Download
1 / 30
E N D
HTML For the World Wide Web Designing with Frames
Cliff Hangers • One of the most popular climbing schools in Colorado is Cliff Hangers. Located in Bolder, Cliff Hangers specializes in teaching beginners through advanced climbing techniques. The school also sponsors several climbing tours, leading individuals on some of the most exciting climbs in North America. • Debbie Chen is the owner of the school and is always looking for ways to market her programs. • She knows that some web designers use frames to display several web pages in a single browser window and she wants your help to develop a frame-based website for Cliff Hangers
Introducing Frames • Web designers often dedicate individual web pages to a particular topic or group of topics. • As more and more pages are added to a web site, the designer may need to display information from multiple pages at the same time. • One common solution is to duplicate links and lists on multiple pages, but this requires time and is hard to maintain if links change. • A frame is a solution that allows the designer to display a page in one section of a browser window
Some drawbacks of Frames • As convenient as frames sound there are some drawbacks. When frames are used the browser must render multiple pages at one time and this may increase the load times. • Framed sites make it hard for users to bookmark the individual pages. • Some framed-based sites do not work well with internet search engines that use key words to match searches. • For these reasons many web designers suggest that a nonframed version of the site should be provided as well.
Planning your Frames • Before you start creating your frames you want to plan their appearance and determine how you want to use them. • What information will be displayed in each frame • How do you want the frames placed on the web page? • What size will each frame be. • Which frames will be static and which will be dynamic? • What web pages will users see first when they access the site? • Should users be permitted to resize the frames.
Cliff Hangers • As you design the Cliff Hangers website you will consider the questions on the previous slide. • Debbie has created the web pages for the site. Your job is to create the frame layout to display the pages. • The next slide lists the pages that make up the Cliff Hangers website. Debbie has organized the pages by topic • Two of the files (links.htm and staff.htm) do not focus on a particular topic, but contain links to other Cliff Hangers web pages.
Frame Layout Cliff Hangers Logo Frame never changes Table of Contents frame contains links to all of Cliff Hangers web pages Debbie would like you to create three Frames. She would like the school’s logo to appear in the top frame and she Wants the frame on the left to display the list of web pages in the Cliff Hangers website. Finally Debbie wants the frame on the lower right to display the contents of the page selected by the user. Pages frame contains the various Cliff Hangers web pages
Creating a Frameset • Frames are organized into framesets which is HTML code that defines the layout and content of the frames within the browser window. The syntax for creating a frameset is: <html> <head> <title>title</title> </head> <frameset> frames </frameset> </html>
Specify Frames Size & Orientation • Framesets lay out frames in either rows or columns but not both. Frames laid out in columns To lay out frames in columns use the cols attribute <frameset cols="col1, col2, col3,..."> col1, col2, col3 are the width of each column Frames laid out in rows To lay out frames in rows use the rows attribute <frameset rows="row1, row2, row3,..."> row1, row2, row3 are the width of each row
Row and Columns • Row and column sizes can be specified in three ways • Pixels • Percentage of the total size of the frameset • Asterisk (*) instructs the browser to allocate any unclaimed space in the frameset to a given row or column. • Example rows=“160, *” Creates two frames set up as rows. The first has a height of 160 pixels and the second is equal to the remaining space in the browser window. • Example col=“160, 25%, *” Creates a layout of three columns whit the first 160 pixels wide, the second 25% of the frameset, the third covers the remaining space in the frameset. • Tip- Set the size of at least one row or column to * to ensure that the frames fill the entire browser window.
Collect the Cliff Hanger files • Download the files in the Cliff Hanger folder into a folder called cliffhanger. • Unblock the files. • Add your name and date to the comment section of the htm files. • Open the cliff.htm file in notepad and insert the following after the closing </head> tag. <frameset rows="85, *"> </frameset>
Creating a Frame • The first row of the fameset will contain a frame displaying the company logo. To create a frame use the frame element <frame src="url" /> Where url is the URL of the document displayed in the frame. • Debbie saved the page containing the company logo and address as head.htm • Place this document in the first frame of the frameset.
Set the source of the first frame • Return to the cliff.htm file in notepad. • After the opening <frameset> tag insert the following frame element. <frameset rows="85, *"> <!--Company Logo--> <frame src="head.htm" /> </frameset> • Save you changes and check open the cliff.htm file in your browser. Verify that the Cliff Hanger logo appears in the first frame.
Nesting Frames • We noted earlier that frames can either be either rows or column but not both. • To create a layout containing both rows and columns you must nest one frameset within another. • Debbie wants the second row of the current frame lay out to contain two columns. The first column will display the table of contents and the second will display the web pages for the various tours.
Nest a Frameset • Return to the cliff.htm file in notepad. • Directly below the <frame /> tag you just entered, insert the following: <frameset rows="85, *"> <!--Company Logo--> <frame src="head.htm" /> <!--Nested Frameset--> <frameset cols="140, *"> </frameset> </frameset> • Save your changes
Insert the two frames in the nested frameset • Directly below the opening <frameset> tag of the nested frameset, insert the following to add the content to the nested frames. <!--Nested Frameset--> <frameset cols="140, *"> <!--List of Links--> <frame src="links.htm" /> <!--Cliff Hangers Web Pages--> <frame src="home.htm" /> </frameset> • Save your changes and refresh cliff.htm in your browser. Verify that the three frames appear with content from the site.
Formatting the Frame • Notice that the browser window displays the three web pages from the Cliff Hangers website but could use some formatting. • When the web content does not entirely fit within the frame borders, the browser adds scroll bars to allow the user to scroll through the rest of the page content. • You can control three attributes of a frame: • Appearance of scroll bars • Size of the margin within the frame • User control of frame size
Remove the Scroll Bars • Return to the cliff.htm file in notepad. • Within the frame element for the logo frame, insert the following <!--Company Logo--> <frame src="head.htm" scrolling="no" /> • Save your changes and refresh your browser. Verify that the scroll bars have been removed. You may notice that the logo is being cut off.
Setting Frame Margins • Return to the cliff.htm file in notepad. • Within the frame element for the logo frame, insert the following attribute: <!--Company Logo--> <frame src="head.htm" scrolling="no" marginheight="0" /> • Save your changes and refresh your browser. Verify that the Cliff Hanger logo is now fully visible in the top frame.
Controlling Frame Resizing • By default, users can resize frame borders in the browser by clicking and dragging the frame border with their mouse. • Some web designers prefer to freeze or lock the frames so that users cannot resize them. This ensures that the website appears the way that the designer intended. • Adding the attribute noresize=“noresize” will freeze the frames.
Freeze the Frames • Return to the cliff.htm file in notepad. • Within each of the three <frame /> tags in the file, add the following attribute: <frameset rows="85, *"> <!--Company Logo--> <frame src="head.htm" scrolling="no" marginheight="0" noresize="noresize" /> <!--Nested Frameset--> <frameset cols="140, *"> <!--List of Links--> <frame src="links.htm" noresize="noresize" /> <!--Cliff Hangers Web Pages--> <frame src="home.htm" noresize="noresize" /> </frameset> </frameset> • Save your changes and refresh your browser. Verify that the frames have been locked.
Assign Frame Names • You need to name the frames in the Cliff Hanger site so that you can specify where various pages will open when users click in the left frame. • Return to the cliff.htm file in notepad. • Within the first <frame /> tag insert the following attribute: <frame src="head.htm" scrolling="no" marginheight="0" noresize="noresize" name="logo" /> • Within the second <frame /> tag insert the following attribute: <frame src="links.htm" noresize="noresize" name="links" /> • Within the third <frame /> tag insert the following attribute: <frame src="home.htm" noresize="noresize" name="pages" /> • Save your changes.
Targets for Hyperlinks • Now that you have named the frames it is time to specify the pages frame as the target for all of the pages in the table of contents. • Open the links.htm file in notepad • Within the <a> tags for all of the pages enter the following attribute <li><a href="home.htm" target="pages">Home Page</a></li> <li><a href="philosph.htm" target="pages">Our Philosophy</a></li> <li><a href="lessons.htm" target="pages">Climbing Lessons</a></li> • Save your changes and refresh the cliff.htm file in your browser. Click on the first three pages in the table of contents and verify that they open correctly.
Reserved Target Names • The last two links in the table of contents point to a list of tours and staff information. • The tours.htm file does not contain information about tours, instead it is an expanded table of contents for the tours pages. The purpose of the tours.htm file is to generate an additional list of pages for the user to choose from. • To have the tours.htm appear in the links frame you need to use a reserved target name.
Add the _self Reserved Target Name • Return to the links.htm file in notepad. • Within the hypertext link for the tours.htm file, insert the following attribute: <li><a href="tours.htm" target="_self">Tours</a></li> • Save your changes and refresh the cliff.htm file in your browser. Verify that the Tours link opens in the link frame.
Modify the Tours targets • Open the tours.htm file in notepad. • Insert the following tag directly above the closing </head> tag: <base target="pages" /> </head> • Add the following attribute to the link for the links.htm file. <li><a href="links.htm" target="_self">Tours</a></li> • Save your changes and refresh the cliff.htm file in your browser. Verify that the Tours link works as intended. When you click on the link the table of contents should expand. When you click on the new pages they should open in the pages frame.
Apply the _top target to staff.htm • Debbie would like the Staff web page to load into the full display area with its own frame layout. To do this you need to tell the browser to load the staff.htm file on top of the cliff.htm file. • Return to the links.htm file in notepad • Within the staff link add the following attribute: <li><a href="staff.htm" target="_top">Staff</a></li> • Save your changes to the links.htm file • Return to the tours.htm file and make the same change. • Save your changes and refresh the cliff.htm file in your browser.
Check Your Links • With your cliff.htm file refreshed, click on the Staff link and verify that it displays the staff pages in the browser window. • Click on the Home Page link to return to the cliff.htm file in your browser. • Turn in a screen shot of the cliff.htm browser display and printout of the links.htm, cliff.htm, and tours.htm notepad files.
