Frames - CS 153 Introduction to Computing I
Download
Report
Transcript Frames - CS 153 Introduction to Computing I
2004-2005 Academic Year, Spring Semester
Bilkent University - Faculty of Art, Design and Architecture
Department of Communication and Design
CS 153 Introduction to
Computing I
Lesson 7
Review of Last Week
Open notepad.
Create a table
6 rows 1 columns
Width is 120 pixels
1st and 4th rows have
lightblue background.
Content will be in the
picture...
Save the html page as
menu.html
Create a new html page.
Using header, paragraph, and font tags write
briefly about yourself.
Save the html file as aboutme.html to the same
directory as menu.html
Using images.google.com find a picture you like
about anything. And save it as picture.jpg to the
same directory as menu.html
Anchor
Re-open menu.html for editing.
Using anchor tag ( <a href=“...”> ... </a> ) tag “My
Favourite Picture” text to link picture.jpg
Also tag About me text to link aboutme.html and
“Bilkent” and Metu” texts to link to
http://www.bilkent.edu.tr and
http://www.metu.edu.tr
Why we use http:// for full web addresses?
Save it and view it. Do you get the pages when
you click them?
Organization of HTML pages.
The
Internet
Menu.html
http://www.metu.edu.tr
http://www.bilkent.edu.tr
Aboutme.html
Picture.gif
Frames
Frame creates independent sections in a single page.
Each section can be used as seperate page. Framed
pages codes doesn’t have <body>...</body>, instead
they start with <frameset> ... </frameset> tag.
<frameset rows=“f1,f2,...”
cols=“f3,f4,...”>...</frameset> creates frames inside
the page.
f# can be a number, or a number%, or *.
If number is used: width or height in pixels
If number% is used: width or height in percentage
If * is used: the frame is created with the remaining space (adjusted)
Frames
Inside <frameset> tag, we add each frame by <frame> tag,
attributes are:
src=URL
name="window name"
Give a name to this frame so later you can use it with anchor tag.
scrolling=yes, no, auto
noresize
Means that you cannot resize this frame by mouse
frameborder=yes, no
framespacing= a number in pixel.
same as cellspacing in tables. Distance between content and border.
Frames
Open notepad.
<html>
<head>
<title>My First Framed Page</title>
</head>
<frameset cols=“130,*" frameborder=yes framespacing=0>
<frame src=“menu.html” name=“menu" scrolling=no>
<frame src=“aboutme.html” name="mainFrame">
</frameset>
</html>
Save as index.html
index.html
The
Internet
Menu.html
http://www.metu.edu.tr
http://www.bilkent.edu.tr
Aboutme.html
Picture.gif
Frames
Open index.html. When you click on the links at
the left of your frame (menu.html) the link that
you click is opened at the left frame. To correct
it:
Open menu.html
Add target parameter pointing to mainFrame to the
4 anchor tags (picture, aboutme, bilkent, metu):
Target=mainFrame
Save it and re-open index.html to test.
Frames
Open a new Notepad
<frameset cols="25%,*" rows="25%,25%,*">
<frame>
<frame>
<frame>
<frame>
<frame>
<frame>
</frameset>
Save it as sixframes and view it. The <frame> tags
should be the same number as cols x rows ( 2 x 3 = 6 ).
Frames
Create six html files with the filenames frame1.html
frame2.html..., with backgroud colors red, green, yellow,
pink, purple, and brown.
Complete <frame> tags of the sixframes.html file.
Experiment with *, number%, and number values and
<frame> parameters for these six frames.
Can you make center row always centered?
Hide/show borders, make frames not resizeable...
Change the number of frames, add other frame files if
necessary.
Publishing your web
Bilkent provides web spaces for publishing your
web site.
You have your own UNIX accounts at the
undergraduate student servers. These servers
allows us to use UNIX programs, store files, and
publish our web pages. You have about 20 MB
storage space.
Telnet
You can login to your UNIX account by your bilkent e-mail
username and password.
StartRuntelnet leylak.ug.bcc.bilkent.edu.tr
username: ussakli
password: sosecret
mkdir public_html
makes a directory
chmod 755 public_html
changes access rights
cd public_html
changes directory
cd ..
changes directory to upper
ls
lists files
exit
quits
FTP
You created the folder for your web.
To transfer files to your web site, you need an FTP (remeber: file
transfer protocol) program.
You may login to leylak.ug.bcc.bilkent.edu.tr using any ftp
program with your username and password that you used at
Telnet.
Login to leylak, change directory to public_html and transfer
index.html, menu.html, aboutme.html, and picture.jpg that we
created at the beginning of the lesson.
Open your web browser (ie. Internet Explorer) and go to:
http://www.ug.bcc.bilkent.edu.tr/~yourusername
If everything is correct, you and anyone in the world will see the
pages you created.
HOMEWORK %10
Create a web site an place it to a folder called web1
inside your public_html folder (you need to create the
directory inside public_html, and change access rights.
The web site will be about any 2 cars that you like.
Due date: beginning of the week 8’s lesson. 29 March,
Tuesday. You will be graded in the first hour.
Do not use a professional program like frontpage or
dreamweaver. You will lose half of the grade.
The web site will contain 4 html pages:
index.html:
a frames page with 2 rows
200 pixels
Remaining part (*) (name: mainFrame)
Title: Two Cars I Like
top.html: the top frame (200 pixels long)
This page should have
a table
Center aligned to the page
Top row: centered, bold
2 text links to
car1.html and car2.html
with the target: mainFrame
Each cell is aligned to center.
car1.html & car2.html
These pages are similar. Both have
a table that has
2 columns 2 rows,
center aligned,
cellspacing=10
Border =0
Top row
backcolor=blue
Centered
Has the car’s name.
Colspan =2
Bottom row
First cell
Width=100
Valign=top
Has a 100 pixel wide image, when
clicked shows larger version of the
same image.
Second cell
Width=400
Has information about car, if you take
the text from somewhere give referance.
Expected Results
Expected Results
Expected Results
This will be visible when we click on the small picture of the car.
EOL