© 2011 delmar, cengage learning chapter 2 developing a web page

© 2011 Delmar, Cengage Learning

Chapter 2

Developing a Web Page

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

Introduction

• Use white space effectively.

• Limit media elements.

• Keep it simple.

• Use an intuitive navigation structure.

• Apply a consistent theme.





Tools You’ll Use


• 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


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



• When you are designing a web page, you should consider:– Background color– Default font– Default link colors– Unvisited links– Visited links



Color picker showing color palettes


Click list arrow tochoose a color palette

Web-safe palettes


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



• 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


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



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



Formatting the address on The Striped Umbrella home page

Selected address text

HTML button displays formatting options on Property inspector body_text rule Italic button


• 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



• 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



• 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


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




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)


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



• 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


You can drag the slider on the left side of the History panel to undo or redo steps


The History panel

Drag slider upto undo steps

Click in the barnext to a stepto undo to that step



Code displayed inthe 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.


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



• 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


• 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

© 2011 delmar, cengage learning chapter 2 developing a web page

Documents

page content

web page slide

page properties

delmar cengage learning

format text slide

page title

page objects

web page tools youll