Transcript dreamweaver_ch02

Adobe Dreamweaver CS3
Revealed
CHAPTER TWO: 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
Introduction
 Craft head content
 Choose colors for page background and text
 Add page content, format, and link to other pages
 Test links regularly
Understanding Page Layout
 Use white space effectively
 Limit multimedia elements
 Keep it simple
 Use an intuitive navigation structure
 Apply a consistent theme
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
Create Head Content
 Title

Browser title bar
 Keywords

Search
 Description

Search results
Setting Web Page Properties
 Background color
 Font color
 Link colors (unvisited, visited)

Default:

Unvisited  blue

Visited  purple
Making Pages Accessible to All
Techniques you can use to ensure that your Web site
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
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
Viewing the Head Content
Head content
section
Title text box on
Document toolbar
Title icon
Meta icon
Entering Keywords & Descriptions
 Anticipate search terms
 Keep them short and concise
 List the most important keywords first
 Consider the use of focus groups
Fig. 4: Insert Bar Displaying
HTML Category
Common tab
Keywords
command
Head list
arrow
Fig. 7: Head Content in Code View
Opening
HTML tag
Head tag
Keyword
tags
Description
Description tags
Fig. 8: Page Properties Dialog Box
Background
color box
Transparent
color button
White
Hexadecimal
number for
white
Creating, 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
Formatting Text with Property
Inspector
 Make text attractive and easy to read
 Change font, size, and color
 Use Property Inspector to apply formatting
attributes
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.
Changing Font Sizes
 Default base font: 3
 Select font in Property inspector

Choose between 1 and 7

Change font size relative to the default base size
Formatting Paragraphs
 Format

As text

As different sizes of headings
 Headings

Heading 1 is the largest

Heading 6 is the smallest

<h1>This is a big heading</h1>
Using HTML Tags or Using CSS
 Cascading Style Sheets (CSS)

Standard practice to handle formatting and
placement of objects
 Disable this preference temporarily
Fig. 10: Formatting Address on Striped
Umbrella Home Page
Selected
address text
Italic button
Font list
arrow
Size list
arrow
Web Filenames
Do not use

Spaces

Special characters

Punctuation

Uppercase letters

Number for the first character

Assume case-sensitive
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
Fig. 12: Clean up Word HTML
Clean up HTML
from list arrow
Settings
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.
Link Properties
 Link names should be informative
 Point of contact – mailto: link
 Two types

Hypertext

Graphic
 Formatting properties should be consistent
 Address or path: relative or absolute
Broken Links
 Typos
 Pages move
 Sites move
 Sites expire
Navigation Bars
 Contain links to the main pages
 Usually located at top of side of page
 Backbone of the site’s navigation structure
Fig. 15: Coca-Cola Web Site
Fig. 16: Coca-Cola Web Site
New Navigation
bar
Fig. 17: Formatting the Navigation Bar
Asterisk: page
not saved
New navigation
bar
Format list
arrow
Font list
arrow
Size list
arrow
Fig. 18: Selecting the Home Link
Selected
text
Browse for
file icon
Link text box
Fig. 21: E-mail Link Dialog Box
Text for e-mail link
on the page
Link
information
Fig. 23: Striped Umbrella Site Map
Site Map button
Collapse to show
only local or
remote site
button
Four pages
linked
to home page
E-mail link
Use the History panel
 History panel properties:

Each task is called a step

50 steps

Preferences adds more

Be careful…increasing steps uses memory
History Panel Functions
 Undo
FIGURE 24
 Redo
 Replay
Click in the gray bar
next to a step to undo
to that step
Slider
The History panel
View HTML Code in Code
Inspector
 View Code

Code View

Code and Design View

Code Inspector
 Add advanced features

JavaScript

Rollover function
Fig. 25: Code Inspector
Page displayed in design
view behind Code Inspector
View options
menu
Code displayed in
the Code Inspector
Fig. 29: View Options Menu
View options
list arrow
Code for
horizontal rule
View options
menu
Fig. 31: View the Reference Panel
Information
on HR tag
Fig. 32: Insert Date Dialog Box
Date
formats
Update automatically
on save check box
Fig. 33: View Date Object in Code View
Code for
date object
Modify and Test Web Pages
 Proofread
 Preview in a browser window
 Test links
Testing Pages
 Monitors

Size and resolution
 Platforms

UNIX, Mac, PC
 Browsers

Explorer, Netscape, Firefox
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
Default Window Screen Sizes
Fig. 34: Window Screen Sizes
Size choices for
viewing a page
“Under Construction”
 Don’t do it!
 Only causes frustration to the end user
Chapter 2 Tasks
 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