Transcript Project 8 - bYTEBoss

HTML
Concepts and Techniques
Fourth Edition
Project 8
Creating Style Sheets
Project Objectives
• Describe the three different types of Cascading
Style Sheets
• Add an embedded style sheet to a Web page
• Change the margin and link styles using an
embedded style sheet
• Create an external style sheet
Project 8: Creating Style Sheets
2
Project Objectives
• Change the body margins and background using
an external style sheet
• Change the link decoration and color using an
external style sheet
• Change the font family and size for all
paragraphs using an external style sheet
• Change table styles using an external style sheet
Project 8: Creating Style Sheets
3
Project Objectives
• Use the <link> tag to insert a link to an external
style sheet
• Add an inline style sheet to a Web page
• Change the text style of a single paragraph using
an inline style sheet
• Understand how to define style classes
Project 8: Creating Style Sheets
4
Style Sheet Precedence
Project 8: Creating Style Sheets
5
Starting Notepad
and Opening an HTML File
• Start Notepad and, if necessary, maximize the
window
• With the USB drive plugged into your computer,
click File on the menu bar and then click Open on
the File menu. If necessary, click UDISK (G:) in
the Look in list. Click the Project08 folder and
then click the ProjectFiles folder in the list of
available folders
• If necessary, click the Files of type list arrow and
then click All Files
• Double-click menu.htm in the list of files
Project 8: Creating Style Sheets
6
Starting Notepad
and Opening an HTML File
Project 8: Creating Style Sheets
7
Adding an Embedded Style Sheet
• Highlight the comment, <!-- Insert embedded
style sheet here -->, on line 9 and then press the
DELETE key
• Enter the CSS code as shown on the following
slide
Project 8: Creating Style Sheets
8
Adding an Embedded Style Sheet
Project 8: Creating Style Sheets
9
Saving an HTML File
• With the USB drive plugged into your computer
click File on the menu bar and then click Save As.
If necessary, type menu.htm in the File name
text box
• If necessary, click UDISK (G:) in the Save in list.
Click the Project08 folder, and then click the
ProjectFiles folder in the list of available folders
• Click the Save button in the Save As dialog box. If
a Save As dialog box is displayed, click Yes to
continue saving
Project 8: Creating Style Sheets
10
Viewing an HTML File
Using a Browser
• Start your browser
• Click the Address bar. Type
G:\Project08\ProjectFiles\
index.htm in the Address text box and then
press the ENTER key
Project 8: Creating Style Sheets
11
Viewing an HTML File
Using a Browser
Project 8: Creating Style Sheets
12
Printing an HTML File
• Click the Notepad button on the taskbar
• Click File on the menu bar and then click Print on
the File menu
• Click the Print button in the Print dialog box
Project 8: Creating Style Sheets
13
Printing an HTML File
Project 8: Creating Style Sheets
14
Creating an External Style Sheet
• If necessary, click the Notepad button on the taskbar.
Click File on the menu bar and then click New
• Enter the CSS code as shown in Table 8-5 on page HTM
349
• With the USB drive plugged into your computer, click File
on the menu bar and then click Save As. Type
styles1.css in the File name text box. If necessary,
click UDISK (G:) in the Save in list. Click the Project08
folder and then click the ProjectFiles folder in the list of
available folders. Click the Save button in the Save As
dialog box
• Click the File menu and then click Print on the File menu
Project 8: Creating Style Sheets
15
Creating an External Style Sheet
Project 8: Creating Style Sheets
16
Linking to an External Style Sheet
• If necessary, click the Notepad button on the
taskbar
• With the USB drive plugged into your computer,
click File on the menu bar and then click Open on
the File menu
• Type contact.htm in the File name text box. If
necessary, click UDISK (G:) in the Look in list,
click the Project08 folder, and then click the
ProjectFiles folder in the list of available folders
• Click the Open button in the Open dialog box
Project 8: Creating Style Sheets
17
Linking to an External Style Sheet
• Highlight the text, <!--Insert link statement here ->, in line 9 and then press the DELETE key
• Type <link rel="stylesheet“
type="text/css" href="styles1.css"
/> as the tag
• Click File on the menu bar and then click Save on
the File menu
Project 8: Creating Style Sheets
18
Linking to an External Style Sheet
Project 8: Creating Style Sheets
19
Linking the Remaining HTML Files to
an External Style Sheet
• With the USB drive plugged into your computer,
click File on the menu bar and then click Open on
the File menu
• Type products.htm in the File name text box. If
necessary, click UDISK (G:) in the Look in list,
click the Project08 folder, and then click the
ProjectFiles folder in the list of available folders
• Click the Open button in the Open dialog box
• Highlight the text, <!--Insert link statement here ->, and press the DELETE key
Project 8: Creating Style Sheets
20
Linking the Remaining HTML Files to
an External Style Sheet
• Type <link rel="stylesheet“
type="text/css" href="styles1.css"
/> as the tag
• Click File on the menu bar and then click Save on
the File menu
• One at a time, open the remaining HTML files,
questions.htm and products.htm, and repeat the
previous three steps
Project 8: Creating Style Sheets
21
Adding an Inline Style Sheet
• If necessary, click the Notepad button on the taskbar to
display the file, welcome.htm
• Click immediately to the right of the p in the <p> tag on
line 31. Press the SPACEBAR and then type
style="font-style: italic; font-size: 8pt"
as the code
• Click File on the menu bar and then click Save
Project 8: Creating Style Sheets
22
Adding an Inline Style Sheet
Project 8: Creating Style Sheets
23
Viewing and Printing
Framed Web Pages
• Click the browser button on the taskbar
• Click the Blue Cell, Inc. logo in the upper-left
corner of the Web page
• Click File on the menu bar and then click Print on
the File menu
Project 8: Creating Style Sheets
24
Viewing and Printing
Framed Web Pages
• When the Print dialog box is displayed, click the
Options tab
• Click As laid out on screen and then click the
Print button
• One at a time, click the remaining links, Contact,
Products, and Questions, and repeat the previous
three steps
Project 8: Creating Style Sheets
25
Viewing and Printing HTML Files
• If necessary, click the browser button on the taskbar. If
necessary, click the Home link in the menu frame to
display the Welcome Web page (welcome.htm) in the
right frame
• Right-click anywhere on the Welcome page except on a
link
• Click View Source on the shortcut menu
• After the file welcome.htm is opened in Notepad, click File
on the menu bar and then click Print on the File menu.
Click the Print button on the Print dialog box
Project 8: Creating Style Sheets
26
Viewing and Printing HTML Files
• Click the browser button on the taskbar, click the Contact
link, and then repeat the previous three steps
• Click the browser button on the taskbar, click the Products
link, and then repeat the last three steps on the previous
slide
• Click the browser button on the taskbar, click the
Questions link, and then repeat the last three steps on the
previous slide
Project 8: Creating Style Sheets
27
Quitting Notepad and a Browser
• Click the Close button on the browser title bar
• Click the Close button on the Notepad window
title bar
Project 8: Creating Style Sheets
28
Project Summary
• Describe the three different types of Cascading
Style Sheets
• Add an embedded style sheet to a Web page
• Change the margin and link styles using an
embedded style sheet
• Create an external style sheet
Project 8: Creating Style Sheets
29
Project Summary
• Change the body margins and background using
an external style sheet
• Change the link decoration and color using an
external style sheet
• Change the font family and size for all
paragraphs using an external style sheet
• Change table styles using an external style sheet
Project 8: Creating Style Sheets
30
Project Summary
• Use the <link> tag to insert a link to an external
style sheet
• Add an inline style sheet to a Web page
• Change the text style of a single paragraph using
an inline style sheet
• Understand how to define style classes
Project 8: Creating Style Sheets
31
HTML
Concepts and Techniques
Fourth Edition
Project 8 Complete
Creating Style Sheets