1. Chapter 2
Developing a Web Page

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

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

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

5. © 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

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

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

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

9. © 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

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

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

12. © 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

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

14. © 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

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

16. © 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

17. © 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 address that users can use to contact the company with questions or problems.
© 2011 Delmar Cengage Learning

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

19. © 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

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

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

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

23. © 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

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

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