1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale /...
-
Upload
gregory-owen -
Category
Documents
-
view
223 -
download
0
Transcript of 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale /...
![Page 1: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/1.jpg)
1
Lesson 4HTML Structural Design Techniques
HTML and JavaScript BASICS, 4th Edition
Barksdale / Turner
![Page 2: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/2.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E22
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.
![Page 3: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/3.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E33
Vocabulary
border attribute cols attribute frames frame separator frameset tag
left-hand navigation name attribute navigation bar nested frameset noresize attribute
![Page 4: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/4.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E44
Vocabulary (continued)
pixel rows attribute src attribute target attribute title bar
![Page 5: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/5.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E55
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.
![Page 6: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/6.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E66
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.
![Page 7: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/7.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E
Creating an HTML Frameset (continued)
Three frames on a Web page
7
![Page 8: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/8.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E88
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.
![Page 9: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/9.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E
Adding a Navigation Bar (continued)
Two-frame Web page
9
![Page 10: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/10.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E1010
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.
![Page 11: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/11.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E1111
Creating a Web Site Welcome Page
A welcome page should give users a good first impression of the Web site.
A welcome page witha navigation bar
![Page 12: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/12.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E1212
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.
![Page 13: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/13.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E1313
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
![Page 14: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/14.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E1414
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.
![Page 15: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/15.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E
Using Advanced HTML Options (continued)
Eliminating frame separators on a Web page
15
![Page 16: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/16.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E1616
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.
![Page 17: 1 Lesson 4 HTML Structural Design Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.](https://reader035.fdocuments.in/reader035/viewer/2022081512/56649da65503460f94a915c2/html5/thumbnails/17.jpg)
Le
sso
n 4
Barksdale / Turner HTML and JavaScript BASICS 4E
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.