Chapter 2 Developing a Web Page

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

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

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

© 2011 Delmar Cengage Learning Create Head Content and Set Page Properties 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. © 2011 Delmar Cengage Learning

© 2011 Delmar Cengage Learning Create Head Content and Set Page Properties 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. © 2011 Delmar Cengage Learning

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

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

© 2011 Delmar Cengage Learning Create Head Content and Set Page Properties 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. © 2011 Delmar Cengage Learning

© 2011 Delmar Cengage Learning Create, Import, and Format Text 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. © 2011 Delmar Cengage Learning

© 2011 Delmar Cengage Learning Create, Import, and Format Text 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. © 2011 Delmar Cengage Learning

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

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

© 2011 Delmar Cengage Learning Create, Import, and Format Text 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 © 2011 Delmar Cengage Learning

© 2011 Delmar Cengage Learning Create, Import, and Format Text 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 © 2011 Delmar Cengage Learning

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

© 2011 Delmar Cengage Learning Add Links to Web Pages 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. © 2011 Delmar Cengage Learning

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

© 2011 Delmar Cengage Learning Add Links to Web Pages 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. © 2011 Delmar Cengage Learning

© 2011 Delmar Cengage Learning Use the History Panel and Edit Code 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. © 2011 Delmar Cengage Learning

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

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

© 2011 Delmar Cengage Learning Use the History Panel and Edit Code 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. © 2011 Delmar Cengage Learning

© 2011 Delmar Cengage Learning Modify and Test Web Pages 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 © 2011 Delmar Cengage Learning

© 2011 Delmar Cengage Learning Modify and Test Web Pages 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. © 2011 Delmar Cengage Learning