Ddpz2613 topic8 css

  • View
    912

  • Download
    1

Embed Size (px)

Transcript

  • 1.HTML Concepts and Techniques Fifth Edition Chapter 8 Creating Style Sheets

2. Chapter 8: Creating Style Sheets 2 Chapter 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 Change the body margins and background using an external style sheet Change the link decoration and color using an external style sheet 3. Chapter 8: Creating Style Sheets 3 Chapter Objectives Change the font family and size for all paragraphs using an external style sheet. Change table styles using an external style sheet. Use the 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. 4. Chapter 8: Creating Style Sheets 4 Plan Ahead General Project Guidelines 1. Plan the Web site if using CSS is appropriate. 2. Analyze the need or content to include on the Web page. 3. Choose the content for the Web page 4. Determine the type of style sheets to use for the pages and their precedence. 5. Create the style sheets. 6. Test all Web pages within the Web site. 5. Chapter 8: Creating Style Sheets 5 Using Style Sheets A style is a rule that defines the appearance of an element on a Web page. A style sheet is a series of rules that defines the style for a Web page or an entire Web site. With a style sheet, you can alter the appearance of a Web page or pages by changing characteristics such as font family, font size, margins and link specifications. Style sheets adhere to a common language with a standard and rules. This language called Cascading Style Sheets or CSS. CSS allows a Web developer to write code statements that control the style of elements on a Web page. 6. Chapter 8: Creating Style Sheets 6 Style Sheets Precedence CSS provides for three types of style sheets: Inline style sheet Embedded style sheet External style sheets Table 8-1 Style Sheet Precedence 7. Chapter 8: Creating Style Sheets 7 Style Statement Format Example code for inline style sheet:

Example code for embedded style sheet: Example code for external style sheet: Save the text file with a.css extension a {text-decoration: none; color: blue} p {font-family: Verdana, Garamond; font-size: 11pt} Link must be inserted for external style sheet: 8. Table 8-3 Files Used for Chapter8 File Name Purpose and Display Specifics Changes Made in Chapter 8 index.html Frame definition file Define layout of frame on the Web page None menu.html Provide links to all other web pages Displayed in left frame Add an embedded style sheet style1.css External style sheet that is linked to next four pages Create as external style sheet Save as a .css file welcome.html Provides welcome to Web site Displayed in right frame Add link to external style sheet Add inline style sheet contact.html Lists contact information Displayed in right frame Add link to external style sheet meetings.html List meeting dates / topic available Displayed in right frame Add link to external style sheet questions.html Displays form for questions Displayed in right frame Add link to external style sheet Chapter 8: Creating Style Sheets 8 9. Chapter 8: Creating Style Sheets 9 Starting Notepad and Opening an HTML File With the USB drive plugged into your computer, start the Web browser and enter G:Chapter08 ChapterFilesindex.html on the Address bar. Click the Contact, Meetings, Questions, and Home links to view the original Web pages provided in the Data Files for Students Start Notepad and, if necessary, maximize the window Navigate to the G:Chapter08ChapterFile folder. If necessary, click the Files of type list arrow and then click All Files to display the menu.html file Double-click menu.html in the list of files to open the file 10. Chapter 8: Creating Style Sheets 10 Starting Notepad and Opening an HTML File 11. Chapter 8: Creating Style Sheets 11 Adding an Embedded Style Sheet Highlight the comment , on line 10 and then press the DELETE key Enter the CSS code shown in Table 84 12. Chapter 8: Creating Style Sheets 12 Adding an Embedded Style Sheet 13. Chapter 8: Creating Style Sheets 13 Saving, Validating, and Viewing an HTML File With the USB drive plugged into your computer click File on the menu bar and then click Save. If necessary, type menu.html in the File name text box Validate the Web page using the W3C validation service Open the index.html file in the Web browser to show the completed navigation menu as shown on the left side of the index.html Web page 14. Saving, Validating, and Viewing an HTML File Chapter 8: Creating Style Sheets 14 15. Printing an HTML File and Web Page Print the Web page from the browser Click the menu.html - 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 to print the HTML code Chapter 8: Creating Style Sheets 15 16. Chapter 8: Creating Style Sheets 16 Printing an HTML File and Web Page 17. Chapter 8: Creating Style Sheets 17 Creating an External Style Sheet If necessary, click the menu.html Notepad button on the taskbar. Click File on the menu bar and then click New Enter the CSS code as shown in Table 85 on page HTML 360 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, navigate to the G:Chapter08ChapterFiles folder. Click the Save button in the Save As dialog box to save the file as styles1.css Click the File menu, click Print on the File menu, and then click the Print button in the Print dialog box 18. Chapter 8: Creating Style Sheets 18 Creating an External Style Sheet 19. Chapter 8: Creating Style Sheets 19 Linking to an External Style Sheet If necessary, click the styles1.css 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 If necessary, navigate to the G:Chapter08ChapterFiles folder. Click the Files of type box arrow, and then click All Files to show all files in the Chapter08ChapterFiles folder. Click the contact.html file Click the Open button in the Open dialog box Highlight the text, , in line 10 Type to enter the link to the external style sheet 20. Chapter 8: Creating Style Sheets 20 Linking to an External Style Sheet Click File on the menu bar and then click Save on the File menu Validate the Web page using the W3C service Open the index.html file in the browser and click the Contact Link to see the change on the Web page 21. Chapter 8: Creating Style Sheets 21 Linking to an External Style Sheet 22. Chapter 8: Creating Style Sheets 22 Linking the Remaining HTML Files to an External Style Sheet If necessary, click the contact.html - 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 If necessary, navigate to the G:Chapter08ChapterFiles folder. Click the Files of type box arrow, and then click All Files to show all files in the Chapter08ChapterFiles folder. Click the meetings.html file Click the Open button in the Open dialog box Highlight the text, on line 10 23. Chapter 8: Creating Style Sheets 23 Linking the Remaining HTML Files to an External Style Sheet Type to enter the link to the external style sheet Click File on the menu bar and then click Save on the File menu Validate the Web page One at a time, open the HTML files questions.html and welcome.html, and repeat bullets 5 through 8 to replace the placeholder text with the link tag, then save and validate the code 24. Chapter 8: Creating Style Sheets 24 Adding an Inline Style Sheet If necessary, click the welcome.html - Notepad button on the taskbar so the file welcome.html is displayed Click immediately to the right of the p in the

tag on line 30. Press the SPACEBAR and then type style=fontstyle: italic; font-size: 8pt to insert the inline style sheet Click File on the menu bar and then click Save Validate the Web page 25. Chapter 8: Creating Style Sheets 25 Adding an Inline Style Sheet 26. Chapter 8: Creating Style Sheets 26 Viewing and Printing Framed Web Pages Click the browser button on the taskbar Open the index.html file in the browser Click the File menu, and then click Print 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 links, Contact, Meetings, and Questions, and repeat bullets 3 through 5 27. Chapter 8: Creating Style Sheets 27 Viewing and Printing Framed Web Pages 28. Chapter 8: Creating Style Sheets 28 Viewing and Printing HTML Files If necessary, click the Karen Stofcich Financials browser button on the taskbar. If necessary, click the Home link in the menu frame so the Welcome Web page (welcome.html) is displayed in the right frame Right-click anywhere in the right frame except on a link Click View Source on the shortcut menu After the file welcome.html is opened in Notepad, click the File menu, then click Print. Click the Print button in the Print dialog box 29. Chapter 8: Creating Style Sheets 29 Viewing and Printing HTML Files Click the browser button on the taskbar, click the Contact link, and then repeat bullets 2 through 4 Click the browser button on the taskbar, click the Meetings link, and then repeat bullets 2 through 4 Click the browser button on the taskbar, click the Questions link, and then repeat bullets 2 through 4 30. Chapter 8: Creating Style Sheets 30 Quitting Notepad and a Browser Close all open browser windows Click the Close button on the Notepad window title bar 31. Chapter 8: Creating Style Sheets 31 Chapter Summary Describe the three different types of Cascading