1. © 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page

2. Chapter 2 Lessons 1.Create head content and set page properties 2.Create, import, and format text 3.Add links to web pages 4.Use the History panel and edit code 5.Modify and test web pages © 2011 Delmar Cengage Learning Chapter 2 Lessons

3. Introduction Use white space effectively. Limit media elements. Keep it simple. Use an intuitive navigation structure. Apply a consistent theme. © 2011 Delmar Cengage Learning Developing a Web Page

4. © 2011 Delmar Cengage Learning Developing a Web Page Tools You’ll Use

5. © 2011 Delmar Cengage Learning Head content includes the page title that appears in the title bar of the browser. Meta tags are HTML codes that include information about the pages. Keywords are words that relate to the content of the website. Create Head Content and Set Page Properties

6. © 2011 Delmar Cengage Learning A description is a short paragraph that describes the content and features of the website. The body is the part of the page that appears in a browser window. Create Head Content and Set Page Properties

7. © 2011 Delmar Cengage Learning When you are designing a web page, you should consider: –Background color –Default font –Default link colors –Unvisited links –Visited links Create Head Content and Set Page Properties

8. © 2011 Delmar Cengage Learning Color picker showing color palettes Create Head Content and Set Page Properties Click list arrow to choose a color palette Web-safe palettes

9. © 2011 Delmar Cengage Learning A CSS layout block is a section of a web page that is defined and formatted using a Cascading Style Sheet. CSS has a set of formatting characteristics you can apply to text, tables, and other page objects. Create Head Content and Set Page Properties

10. © 2011 Delmar Cengage Learning Clean HTML code is code that does what it is supposed to do without using unnecessary instructions. The way fonts are rendered (drawn) on the screen differs between a Windows and Macintosh computer. Create, Import, and Format Text

11. © 2011 Delmar Cengage Learning Tags are the parts of the code that specify the appearance for all page content when viewed in a browser. Cascading Style Sheets are sets of formatting attributes that you use to format web pages to provide a consistent presentation across a site. Create, Import, and Format Text

12. © 2011 Delmar Cengage Learning To apply formatting to a website use: –The CSS Property inspector –HTML Property inspector Create, Import, and Format Text Regardless of which Property inspector you use, CSS styles will be created when you format page objects.

13. © 2011 Delmar Cengage Learning Create, Import, and Format Text Formatting the address on The Striped Umbrella home page Selected address text HTML button displays formatting options on Property inspector body_text ruleItalic button

14. © 2011 Delmar Cengage Learning A Font-family is a set of font choices that specify which fonts a browser should use to display the text on your web page. You can change the size of text by: –Using the CSS option and selecting a numerical value for the text –Using a size expressed in words Create, Import, and Format Text

15. © 2011 Delmar Cengage Learning To format a paragraph as a heading use the HTML Property inspector. The Format list contains six headings: –Heading 1-Heading 6, with Heading 1 being the largest and Heading 6 being the smallest Create, Import, and Format Text

16. © 2011 Delmar Cengage Learning Links make it possible for the viewers to: –Navigate all the pages in a website –Connect to other pages anywhere on the web Add Links to Web Pages Links added to menu bar

17. © 2011 Delmar Cengage Learning Broken links are links that cannot find their intended destinations. A point of contact is a place on a web page that provides users with a means of contacting the company. A mailto: link, is an email address that users can use to contact the company with questions or problems. Add Links to Web Pages

18. © 2011 Delmar Cengage Learning Add Links to Web Pages mailto: link on the Property inspector Email Link dialog box mailto: link Text for email on the page (this could also be a person’s name or position or the actual email link)

19. © 2011 Delmar Cengage Learning A menu bar, or a navigation bar, is an area on a web page that contains links to the main pages of a website. The WCAG Guideline 2.4 lists ways to ensure that all viewers can successfully and easily navigate a website. Add Links to Web Pages

20. © 2011 Delmar Cengage Learning The History panel records each editing and formatting task you perform and displays them in a list in the order in which you complete them. Each task listed in the History panel is called a step. Use the History Panel and Edit Code

21. © 2011 Delmar Cengage Learning You can drag the slider on the left side of the History panel to undo or redo steps Use the History Panel and Edit Code The History panel Drag slider up to undo steps Click in the bar next to a step to undo to that step

22. © 2011 Delmar Cengage Learning Use the History Panel and Edit Code Code displayed in the Code Inspector Page displayed in Design view behind the Code Inspector The Code Inspector is a separate window that displays the current page in Code view.

23. © 2011 Delmar Cengage Learning When you use the Code Inspector, you can see a full-screen view of your page in Design view while viewing the underlying code in a floating window. A JavaScript function is a block of code that adds dynamic content. A rollover is a special effect that changes the appearance of an object when the mouse moves over it. Use the History Panel and Edit Code

24. © 2011 Delmar Cengage Learning Testing web pages: –You should preview it in Live view or in a browser window –You should test your links to make sure they work properly –You should proofread your text –You should strike a balance among quality, creativity, and productivity Modify and Test Web Pages

25. © 2011 Delmar Cengage Learning You should test your pages using a variety of screen sizes. You should check your pages using both Windows and Macintosh platforms. Dreamweaver allows you to see what a page would look like if it were viewed on a mobile hand-held device. Modify and Test Web Pages