Transcript Chapter 2

Macromedia Dreamweaver 8
Revealed
DEVELOPING A
WEB PAGE
Chapter 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
Macromedia Dreamweaver 8 Revealed
Chapter 2
2
Understanding Page Layout
Use white space effectively
Limit multimedia elements
Keep it simple
Use an intuitive navigation structure
Apply a consistent theme
Macromedia Dreamweaver 8 Revealed
Chapter 2
3
Create Head Content
A Web page is composed of two
sections:
– Head
• Includes the page title and meta tags
which are not visible to the Web browser
– Body
• Contains text, graphics, and links
Macromedia Dreamweaver 8 Revealed
Chapter 2
4
Create Head Content
Title
– Browser title bar
Keywords
– Search
Description
– Search results
Macromedia Dreamweaver 8 Revealed
Chapter 2
5
Web Page Properties
Background color
Font color
Link colors (unvisited, visited)
– Default:
• Unvisited  blue
• Visited  purple
Macromedia Dreamweaver 8 Revealed
Chapter 2
6
Web-Safe Colors
Two palettes
– Color Cubes
– Continuous Tone
216 colors
FIGURE 1
Macromedia Dreamweaver 8 Revealed
Color picker showing color palettes
Chapter 2
7
FIGURE 2
Viewing the head content
Head content
section
Title text box on
Document toolbar
Title icon
Meta icon
Macromedia Dreamweaver 8 Revealed
Chapter 2
8
FIGURE 7
Head content displayed in Code view
Opening
HTML tag
Head tag
Description
Keyword
tags
Description tags
Macromedia Dreamweaver 8 Revealed
Chapter 2
9
Background
color box
Strikethrough
button
White
Hexadecimal
number for
white
FIGURE 8
Macromedia Dreamweaver 8 Revealed
Page Properties dialog box
Chapter 2
10
Create, Import and
Format Text
To add text to a Dreamweaver page
– Type in Dreamweaver
– Copy/paste
[Ctrl][C] and [Ctrl][V] (Windows)
[C] and [V] (Macintosh)
– Import Word document
Macromedia Dreamweaver 8 Revealed
Chapter 2
11
Web Fonts
Browsers use visitor’s fonts
Font combinations
Serif and sans-serif
k K kK
Graphic text for unusual fonts
Macromedia Dreamweaver 8 Revealed
Chapter 2
12
FIGURE 10
Formatting the address on The Striped Umbrella home page
Selected
address text
Font list
arrow
Size list
arrow
Macromedia Dreamweaver 8 Revealed
Italic button
Chapter 2
13
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
Macromedia Dreamweaver 8 Revealed
Chapter 2
14
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>
Macromedia Dreamweaver 8 Revealed
Chapter 2
15
Using HTML Tags or Using
CSS
Cascading Style Sheets (CSS)
– Standard practice to handle formatting
and placement of objects
More on this later…
Disable this preference temporarily
Macromedia Dreamweaver 8 Revealed
Chapter 2
16
Web Filenames
Do not use
– Spaces
– Special characters
– Punctuation
– Uppercase letters
Macromedia Dreamweaver 8 Revealed
Chapter 2
17
Importing Microsoft Office
Documents
File  Import  Word Document
Select file to be imported into
Dreamweaver
Commands  Clean Up Word HTML
Macromedia Dreamweaver 8 Revealed
Chapter 2
18
Settings
Clean up HTML
from list arrow
FIGURE 12
Macromedia Dreamweaver 8 Revealed
Clean Up Word HTML dialog box
Chapter 2
19
Add Links to Web Pages
Links
FIGURE 14
Macromedia Dreamweaver 8 Revealed
Coca-Cola Web site
Chapter 2
20
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
Macromedia Dreamweaver 8 Revealed
Chapter 2
21
Broken Links
Typos
Pages move
Sites move
Sites expire
Macromedia Dreamweaver 8 Revealed
Chapter 2
22
Navigation Bars
Contain links to the main pages
Usually located at top of side of page
Backbone of the site’s navigation
structure
Macromedia Dreamweaver 8 Revealed
Chapter 2
23
FIGURE 15
Viewing the navigation bar
Navigation
bar
Macromedia Dreamweaver 8 Revealed
Chapter 2
24
FIGURE 17
Selecting the Home link
Selected
text
Browse for
file icon
Link text box
Macromedia Dreamweaver 8 Revealed
Chapter 2
25
E-mail Link (mailto:)
Text for e-mail link
on the page
FIGURE 20
Macromedia Dreamweaver 8 Revealed
Email Link dialog box
Chapter 2
Link
information
26
Collapse to show only
local or remote site button
E-mail link
Four pages
linked
to home page
FIGURE 22
The Striped Umbrella site map
Macromedia Dreamweaver 8 Revealed
Chapter 2
27
Use the History panel
History panel properties:
– Each task is called a step
– 50 steps
– Preferences adds more
– Be careful…
• Increasing steps uses memory
Macromedia Dreamweaver 8 Revealed
Chapter 2
28
History Panel Functions
Undo
Redo
Replay
FIGURE 23
The History panel
Click in the gray bar
next to a step to undo
to that step
Slider
Macromedia Dreamweaver 8 Revealed
Chapter 2
29
FIGURE 28
Viewing the View Options menu in the Code Inspector
View options
list arrow
Code for
horizontal rule
Macromedia Dreamweaver 8 Revealed
View options
menu
Chapter 2
30
FIGURE 30
Viewing the Reference panel
Information
on HR tag
Macromedia Dreamweaver 8 Revealed
Chapter 2
31
FIGURE 31
Insert Date dialog box
Date
formats
Update automatically
on save check box
Macromedia Dreamweaver 8 Revealed
Chapter 2
32
FIGURE 32
Viewing the date object in Code view
Code for
date object
Macromedia Dreamweaver 8 Revealed
Chapter 2
33
Modify and Test Web Pages
Proofread
Choose window size
Verify links
Macromedia Dreamweaver 8 Revealed
Chapter 2
34
FIGURE 33
Macromedia Dreamweaver 8 Revealed
Window screen sizes
Chapter 2
35
Default Window Screen
Sizes
Macromedia Dreamweaver 8 Revealed
Chapter 2
36
Testing Pages
Monitors
– Size and resolution
Platforms
– UNIX, Mac, PC
Browsers
– Explorer, Netscape, Firefox
Macromedia Dreamweaver 8 Revealed
Chapter 2
37
“Under Construction”
Don’t do it!
Only causes frustration to the end
user
Macromedia Dreamweaver 8 Revealed
Chapter 2
38
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
Macromedia Dreamweaver 8 Revealed
Chapter 2
39