Lesson 4 HTML Structural Design Techniques

1. Lesson 4HTML Structural Design Techniques HTML and JavaScript BASICS, 4th Edition Barksdale / Turner

2. Objectives • Create a frameset. • Add a navigation bar. • Make a welcome page. • Create a nested frameset. • Include a title bar frame and page. • Utilize frame and frameset options. 2

3. border attribute cols attribute frames frame separator frameset tag left-hand navigation name attribute navigation bar nested frameset noresize attribute Vocabulary 3

4. pixel rows attribute src attribute target attribute title bar Vocabulary (continued) 4

5. Creating an HTML Frameset • Framesets allow you to display two or more Web pages on the screen at the same time. • One frame can communicate with a page in a different frame. • As its name implies, the frameset tag allows you to define a set of rectangular areas on your browser screen called frames. 5

6. Creating an HTML Frameset (continued) • The <frameset> and </frameset> tags mark the beginning and end of frame definitions. • The rows attribute allows you to define horizontal frames. The cols attribute allows you to define vertical frames. • The name and src attributes allow you to name each frame and to specify the source Web page to be displayed in each frame. 6

7. Creating an HTML Frameset (continued) • Three frames on a Web page 7

8. Adding a Navigation Bar • A common Web design is to place a Web page in a narrow left-hand frame that contains hyperlinks. The Web page is displayed in the larger right-hand frame. • This is referred to as left-hand navigation, and the Web page containing the hyperlinks is called a navigation bar. 8

9. Adding a Navigation Bar (continued) • Two-frame Web page 9

10. Adding a Navigation Bar (continued) • A pixel is an individual “dot” of light on a computer screen. • The target attribute tells the browser which frame it should use to display the target Web page. 10

11. Creating a Web Site Welcome Page A welcome page should give users a good first impression of the Web site. A welcome page with a navigation bar 11 11

12. Creating a Nested Frameset As you recall, a frameset can contain either horizontal frames or vertical frames, but not both. A nested frameset solves this problem. You can use a <frameset> tag inside another <frameset> tag to create both vertical and horizontal frames. 12 12

13. Creating a Title Bar A page that displays a constant title for a Web site is commonly called a title bar. Three frames with a navigation bar, title bar, and welcome page 13 13

14. Using Advanced HTML Options The border attribute within the <frameset> tag adjusts the appearance of the frame separators. The noresize attribute within the <frame> tag instructs the browser that the user should not be able to change the size of the frames. These two attributes can be used separately or together. 14 14

15. Using Advanced HTML Options (continued) • Eliminating frame separators on a Web page 15

16. Summary In this lesson, you learned: • How to create a frameset. • How to interpret frameset attributes and values. • How to create a navigation bar in a frame. • How to make a simple welcome page in a frame. 16

17. Summary (continued) • How to insert nested tags and attributes. • How to add a title bar frame to a frameset. • How to remove the borders in a frameset.