Download Chapter 2

Chapter 2
Developing a Web Page
© 2011 Delmar, Cengage Learning
Chapter22Lessons
Lessons
Chapter
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
Developing a Web Page
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
Tools You’ll Use
© 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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