HTML Concepts and Techniques Fifth Edition Chapter 6 Using Frames in a Web Site

Chapter 6: Using Frames in a Web Site 2 Chapter Objectives Define terms related to frames Describe the steps used to design a frame structure Plan and lay out a frameset Create a frame definition file that defines three frames Use the tag

Chapter 6: Using Frames in a Web Site 3 Chapter Objectives Use the tag Change frame scrolling options Name a frame content target Identify Web pages to display at startup Set frame rows and columns Create a navigation menu page with text links Create a home page

Preparation Create a Ch 6 folder in your HTML directory Copy all the stuff from P:\HTML Stuff\Chapter06\ChapterFiles into your Ch 6 folder DO NOT MOVE THE ENTIRE FOLDER…just copy and paste all the files within it to yours! Read Project on pg. 260 Chapter 6: Using Frames in a Web Site 4

5 Creating a Frame Definition File When frames are used, browser actually contains multiple web pages or image files. A frame definition file defines the layout of the frames in a Web site and specifies the Web page contents of each frame. A frameset is used to define the layout of the frames that are displayed. Think of it as a window with various panes. Within each pane is a separate web page.

Chapter 6: Using Frames in a Web Site 6 Creating a Frame Definition File First step is to create a frame definition file. This gets loaded as soon as a visitor enters your website. It is used to define the pages that will be loaded initially and when various components are clicked on.

Chapter 6: Using Frames in a Web Site 7 Frame Tag Attributes Src – used to define which web page will be displayed at startup. Name – used to give that frame a target name so you can use it to display different web pages. Pg example

Frameset Within the tag, you specify the number of columns and rows in the display area Look at the example on pg. 265 –A) has two rows –B) has two columns Look at the bottom of page 265 and top of pg. 266 to see the frame definition file used to create these. Check out the code on pg. 266 to see another example of frameset attributes. Chapter 6: Using Frames in a Web Site 8

Frameset attributes - continued You can turn borders on/off and also set the margins in # of pixels. Look at this same frame on pg. 267 where margins have been set to 40 pixels. See the space created around each ‘window pane’. Scrolling – if you set this to ‘no’, the user CAN NOT scroll the window. Look at the example on pg It is ON by default, you will have to turn it off if you desire. Noresize – if used, the user can’t resize the frames. Example on pg Chapter 6: Using Frames in a Web Site 9

Creating the frame definition file Like tables, it is a good idea to sketch out what you want, so that when you start writing your code, it works! You will need a navigation menu – this is most often found on the left side of the website. Effectively place the main target frame… this is the usually the only one that changes. Make sure this frame is large enough to contain the content and convenient enough for the visitor to see where it is. Look at the examples on pg Chapter 6: Using Frames in a Web Site 10

Writing the code for the frame definition This is completely different from anything you’ve done before. DOCTYPE statement is DIFFERENT than before. Instead of the transitional document type, you will use the frameset document type. Match and nest your tags correctly. Can be tricky Develop the pages that go in each frame. Name the target frames so you can use this name when you create links in the navigation pane. Chapter 6: Using Frames in a Web Site 11

Chapter 6: Using Frames in a Web Site 12 Entering Initial HTML Tags to Define the Web Page Structure Do page 273 and enter the code for the frame definition file. Save the file as framedef.html Validate the file to make sure there are NO errors. When I did this I got 1 error about no closing tag that was indeed there… It may do this because there are no tags in a frame definition file.

Chapter 6: Using Frames in a Web Site 13 Defining Columns and Rows in the Frameset You can define however many columns and rows you’d like. Look at the bottom of pg. 274 and you can see the code to produce 3 columns. You can specify the columns as a percentage of the total screen size, as a number of pixels, or with an *. Using the percentage allows the browser window to change as it is resized. In pixels, it cannot. A * is used to simply divide it into equal parts.

Chapter 6: Using Frames in a Web Site 14 Defining Columns and Rows in the Frameset We will use 2 frames for this page. One is the navigation pane, the other is the main window where the content changes. The menu will remain constant as the main window changes. We have to assign target names to know where to display the changed web pages. Turn borders off. Do page Validate the code. When you finish, your code will look like pg (next slide) Displaying this in a browser will show NOTHING!

Chapter 6: Using Frames in a Web Site 15 Saving, Validating, and Printing the HTML File

Chapter 6: Using Frames in a Web Site 16 Creating the menu.html file Do pg (Make sure you use the already validated version of the DOCTYPE statement. Here you will use the one you’ve been using. You only used a different one in the frame definition file.) Save this file as menu.html (After all, this is what you defined in your frame definition file!) This creates the navigation side of the frame. Notice that you will use the target attribute that tells the href document where to appear if that link is clicked.

Creating home.html Do pgs Save this file as home.html Validate this file also. To test this, you have to open framedef.html in the browser to make sure it is all displayed properly. The other web pages are already created, i.e. necklaces, watches, bracelets, and order form. ALL links should work. When they do, show this to me. Chapter 6: Using Frames in a Web Site 17

Viewing the Frame Definition File Using a Browser Chapter 6: Using Frames in a Web Site 18

Testing and Printing the Links Chapter 6: Using Frames in a Web Site 19

What am I to do now? You ask…. NO homework! For a lab for this chapter – –In the Lab: Lab2 – Bright Idea, LLC Web site FOLLOW the directions EXACTLY….make sure you name the files as requested. We’ll work on this today and in class Thursday. If you don’t get it finished by then, you can turn it in to me after Thanksgiving. This will be the last chapter we cover. Your final exam will cover Ch There will be questions and a hands-on component. Chapter 6: Using Frames in a Web Site 20