1 / 32

Project 8

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 Objectives.

tia
Télécharger la présentation

Project 8

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Project 8 Creating Style Sheets

  2. 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

  3. 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

  4. 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

  5. Style Sheet Precedence Project 8: Creating Style Sheets

  6. 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

  7. Starting Notepad and Opening an HTML File Project 8: Creating Style Sheets

  8. 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

  9. Adding an Embedded Style Sheet Project 8: Creating Style Sheets

  10. 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

  11. 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

  12. Viewing an HTML File Using a Browser Project 8: Creating Style Sheets

  13. 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

  14. Printing an HTML File Project 8: Creating Style Sheets

  15. 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

  16. Creating an External Style Sheet Project 8: Creating Style Sheets

  17. 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

  18. 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

  19. Linking to an External Style Sheet Project 8: Creating Style Sheets

  20. 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

  21. 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

  22. 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

  23. Adding an Inline Style Sheet Project 8: Creating Style Sheets

  24. 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

  25. 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

  26. 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

  27. 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

  28. 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

  29. 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

  30. 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

  31. 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

  32. Project 8 Complete Creating Style Sheets

More Related