Download Chapter 02

Chapter 2
Developing a Web Page
© 2010 Delmar, Cengage Learning
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
© 2010 Delmar Cengage Learning
Introduction
• Craft head content
• Choose colors for page background and text
• Add page content, format, and link to other
pages
• Test links regularly
© 2010 Delmar Cengage Learning
Understanding Page Layout
•
•
•
•
•
Use white space effectively
Limit multimedia elements
Keep it simple
Use an intuitive navigation structure
Apply a consistent theme
© 2010 Delmar Cengage Learning
Create Head Content
• A web page is composed of two sections:
– Head content includes
 page title displayed in title bar of
browser
 meta tags which are not visible to the
web browser
– Body
 Contains text, graphics, and links
© 2010 Delmar Cengage Learning
Create Head Content
• Title
– Browser title bar
• Keywords
– Search
• Description
– Search results
© 2010 Delmar Cengage Learning
Setting Web Page Properties
• Background color
• Font color
• Link colors (unvisited, visited)
– Default:
 Unvisited  blue
 Visited  purple
© 2010 Delmar Cengage Learning
Making Pages Accessible to All
Techniques you can use to ensure that your
website is accessible to individuals with
disabilities
• Alternate text with images
• Avoid certain colors
• Supply text as an alternate source for
information that is presented in an audio file
• www.adobe.com/accessibility
© 2010 Delmar Cengage Learning
Using Appropriate Content
•
•
•
•
•
Who is your audience?
What is the age group of your audience?
What is the reading level?
Formal vs. informal tone
Consider font sizes, amount of text and
images, and amount of technical expertise
needed to navigate
• Use consistency
© 2010 Delmar Cengage Learning
Fig. 2: Viewing the Head Content
Meta icon Title icon
CSS icon
Head content
section
© 2010 Delmar Cengage Learning
Title text box on
Document toolbar
Entering Keywords & Descriptions
•
•
•
•
Anticipate search terms
Keep them short and concise
List the most important keywords first
Consider the use of focus groups
© 2010 Delmar Cengage Learning
Fig. 4: Insert Bar Displaying
Common Category
Common
category
Head list
arrow
Your icon
may differ
Keywords
command
© 2010 Delmar Cengage Learning
Fig. 7: Head Content
Displayed in Code View
Opening
head tag
Title tag
Your head
content line
numbers
may differ
Keywords tag
Description tag
Closing head tag
Description
Keywords
© 2010 Delmar Cengage Learning
Fig. 8: Page Properties Dialog
Box
Default Color button
Background
color box
Hexadecimal
shorthand for
white (number
code is preceded
with a # sign)
White
© 2010 Delmar Cengage Learning
Create, Import, and Format
Text
• To add text to a Dreamweaver page
– Type in Dreamweaver
– Copy/paste
[Ctrl][C] and [Ctrl][V] (Windows)
[Command] [C] and [Command] [V]
(Macintosh)
– Import Word Document
© 2010 Delmar Cengage Learning
Formatting Text with Property
Inspector
• Make text attractive and easy to read
• Change font, size, and color
• Use Property Inspector to apply formatting
attributes
© 2010 Delmar Cengage Learning
Using HTML Tags or Using
CSS
• The standard practice today is to use
Cascading Style Sheets (CSS) to handle the
formatting and placement of web page
elements.
• Default preference in Dreamweaver is to
use CSS rather than HTML tags.
© 2010 Delmar Cengage Learning
Changing Fonts
• You can format your text with different fonts
by choosing a font combination from the
Font list in the Property inspector.
• A font combination is a set of three fonts
that specify which fonts a browser should
use to display the text of your web page.
• Font combinations are used so that if one
font is not available, the browser will use the
next one specified in the font combination.
© 2010 Delmar Cengage Learning
Changing Font Sizes
There are two ways to change the size of text
using the Property inspector.
– When the CSS option is selected, you
can select a numerical value for the size
from 9 to 36 pixels.
– You can use a size expressed in words
from xx-small to larger.
© 2010 Delmar Cengage Learning
Formatting Paragraphs
• Format
– As text
– As different sizes of headings
• Headings
– Heading 1 is the largest
– Heading 6 is the smallest
– Browsers display text formatted as headings in
bold, setting them off from paragraphs of text
© 2010 Delmar Cengage Learning
Fig. 10: Formatting Address on
Striped Umbrella Home Page
Selected address CSS
text
button
HTML
button
body_text
rule
© 2010 Delmar Cengage Learning
Italic
button
Web Filenames
Do not use
– Spaces
– Special characters
– Punctuation
– Uppercase letters
– Number for the first character
– Assume case-sensitive
© 2010 Delmar Cengage Learning
Importing Microsoft Office
Documents
• File  Import  Word Document or Excel
Document
• Select file to be imported, then click
Formatting list arrow
• Always use Clean Up Word HTML
command
© 2010 Delmar Cengage Learning
Fig. 13: Clean Up Word HTML
Settings
Clean up
HTML from
list arrow
© 2010 Delmar Cengage Learning
Linking Microsoft Office
Documents
• Drag the Word or Excel document from its
current location to the location on the web
page where you would like the link to
appear
• Select the Create a link option button in the
Insert Document dialog box
• Save the file in your root folder so it will be
uploaded when you publish your site. If it is
not uploaded, the link will be broken.
© 2010 Delmar Cengage Learning
Add Links to Web Pages
• Select the text or image that you want to
serve as a link.
• Then specify a path to the page to which
you want to link in the Link text box in the
Property inspector.
© 2010 Delmar Cengage Learning
Add Links to Web Pages
• Avoid broken links
• Provide point of contact – mailto: link
© 2010 Delmar Cengage Learning
Navigation Bars
•
•
•
•
Contain links to the main pages
Usually located at top or side of page
Backbone of the site’s navigation structure
Can be created with text, images, or both
© 2010 Delmar Cengage Learning
Fig. 16: CIA Website
Additional information
appears
Navigation
bar with text
links using
JavaScript
© 2010 Delmar Cengage Learning
Fig. 17: Viewing the Navigation Bar
© 2010 Delmar Cengage Learning
Fig. 18: Inserting a Horizontal
Rule
Asterisk indicates page has
not been saved
Horizontal
rule
© 2010 Delmar Cengage Learning
Horizontal Rule
command
Fig. 19: Selecting Text for the
Home Link
Selected Link text box
text
Browse for
File icon
© 2010 Delmar Cengage Learning
Fig. 22: E-mail Link Dialog Box
Text for email link on
the page (this could
also be a person’s
name or position or
the actual email link)
Link information
© 2010 Delmar Cengage Learning
Fig. 24: Assets Panel URL
Category
Preview of email
link
URLs button
Email link on home page
© 2010 Delmar Cengage Learning
Use the History panel
• History panel properties:
– Records each editing and formatting task
performed
– Each task is called a step
– 50 steps
– Preferences adds more
– Be careful…increasing steps uses
memory
© 2010 Delmar Cengage Learning
Fig. 25: The History Panel
Drag Slider
up to undo
steps
Click in the bar next
to a step to undo
that step
© 2010 Delmar Cengage Learning
View HTML Code in Code
Inspector
• View Code
– Code View
– Code and Design View
– Code Inspector
• Add advanced features
– JavaScript
– Rollover function
© 2010 Delmar Cengage Learning
Fig. 26: The Code Inspector
Page displayed in
Design view behind
the Code Inspector
Code displayed in
the Code Inspector
© 2010 Delmar Cengage Learning
Fig. 30: View Options Menu in the
Code Inspector
Code for
horizontal rule
View Options menu button
© 2010 Delmar Cengage Learning
View Options menu
Fig. 32: View the Reference
Panel
Results tab
group
Information on
<HR> (horizontal
rule tag)
© 2010 Delmar Cengage Learning
Fig. 33: Insert Date Dialog Box
Date formats
Update automatically on
save checkbox
© 2010 Delmar Cengage Learning
Fig. 34: View Date Object Code
Code for date object
© 2010 Delmar Cengage Learning
Modify and Test Web Pages
• Preview in a browser window
• Test links
• Proofread
© 2010 Delmar Cengage Learning
“Under Construction”
• Don’t do it!
• Only causes frustration to the end user
© 2010 Delmar Cengage Learning
Testing Pages
• Monitors
– Size and resolution
• Platforms
– UNIX, Mac, PC
• Browsers
– Explorer, Netscape, Firefox
© 2010 Delmar Cengage Learning
Different Browsers or Screen
Size
• You should test your pages using different
browsers and a wide variety of screen sizes
to ensure the best view of your page by the
most people possible.
• Check both Windows and Macintosh
platforms
• Testing a web page rendered in a mobile
device
© 2010 Delmar Cengage Learning
Default Window Screen Sizes
© 2010 Delmar Cengage Learning
Fig. 35: Window Screen Sizes
Window size
pop-up menu
Size choices
for viewing
the page
© 2010 Delmar Cengage Learning