View
213
Download
0
Category
Tags:
Preview:
Citation preview
1
Planning and Laying Out Frames
Planning and Laying Out Frames
• Sketch the frame structure on paper before writing the HTML code
two rows
two columns
2
Start Notepad (BBEdit)Start Notepad (BBEdit)
3
Enter Initial HTML TagsEnter Initial HTML Tags
4
Setting Frame RowsSetting Frame Rows
• Use the ROWS attribute in the <FRAMESET> tag to set the number and sizes of rows
<FRAMESET ROWS=“30%, 70%”>
sizes of rows as apercentage of the
screen
5
Setting Frame RowsSetting Frame Rows
• Additional rows may be added by simply specifying the height in percentage of screen height or number of pixels
• Asterisks may be used instead of numbers to evenly divide the remaining space available
6
Setting Frame RowsSetting Frame Rows
first rowis 30% high
second rowis 70% high
Enter the FRAMESETtag on line 6 of your
document
7
Identifying the Header Content
Identifying the Header Content
• The frame in the first row will display the header Web page
• A <FRAME> tag must define each frame in the frame definition file
• Use the SRC attribute to identify the Web page that will display in the frame
• You will turn off scrolling because the header can display without having to scroll
8
Identifying the Header Content
Identifying the Header Content
Enter the FRAMEtag on line 7 of your
document
Web page thatdisplays infirst frame
scrollingturned off for
first frame
9
Setting Frame ColumnsSetting Frame Columns
• Columns divide the screen vertically
• The COLS attribute works like the ROWS attribute
• If you need more than two columns, you must include the dimensions for the columns in the <FRAMESET> tag
10
Setting Frame ColumnsSetting Frame Columns
Enter the FRAMESETtag on line 9 of your
document
first columnis 25% wide
secondcolumn is75% wide
11
Identifying the Column Content
Identifying the Column Content
• The first column will display the navigation page that will remain constant
• Do not turn off scrolling, in case further links are added in the future The default scrolling setting is AUTO The scroll bar will automatically be available
for the frame, if needed
12
Identifying the Column Content
Identifying the Column Content
• The second column will display variable information
• Use the NAME attribute to give that frame a target name Links can use this target to direct the display
of subsequent Web pages to that frame
13
Identifying the Column Content
Identifying the Column Content
Web pagemenu.htm displaysin a second frame
Web pagehome.htm displays
in a third frame
Name of thirdframe; other Web
pages can useas a target
Enter the FRAMEtags on lines 10 and 11
of your document
14
Ending the FramesetsEnding the Framesets
• You must enter a </FRAMESET> tag for each <FRAMESET> tag
begin frameset 1
begin frameset 2
end frameset 1
end frameset 2
Enter the /FRAMESETtags on lines 13 and 14
of your document
15
Saving the HTML FileSaving the HTML File
• Save the HTML file in your network account with framedef.htm as the file name
file name
Recommended