Create head content and set page properties

1
Unit Lessons
OVERVIEW

• Create head content and set page properties
• Create, import, and format text
• Add links to Web pages
• Use the History panel and Code Inspector
• Modify and test Web pages

2
Developing a Web page
INTRODUCTION

• Understanding Page Layout
• Use White Space Effectively
• Limit Multimedia Elements
• Keep it Simple
• Use an Intuitive Navigation Structure
• Apply a Consistent Theme

3
Creating Head Content

• Title - browser title bar
• fig B-2
• Keywords - search
• Description - search resultsfig B-4

title
description
keywords
4
Create Head Contentlthtmlgtltheadgt lttitlegtlt/tit
legt ltmeta namekeywords contentgt ltmeta
namedescription contentgtlt/headgtltbody.gt
..lt/bodygtlt/htmlgt
LESSON 1
5
Web Page Properties
LESSON 1

• Background color
• Font color
• Link colors (unvisited, visited, active)

6
Web-Safe Colors
LESSON 1

• 216 colors
• RGB
• Hexidecimalvalues

7
Background color
LESSON 1
8
Create, Import and Format Text
LESSON 2

• Adding text to a Dreamweaver page
• Type in Dreamweaver
• Copy/Paste CtrlC and CtrlV
• Import Word HTML

9
Web fonts
LESSON 1

• Browsers use visitors fonts
• Font combinations
• Serif and Sans Serif t T
• Graphic text for funky fonts

10
Text Property Inspector
LESSON 2

• Font, Size, Color, Style, Alignment

11
Font Size
LESSON 2

• 3 - Default browser size
• 1 through 7, or
• -7 through 7

12
Web filenames

• Do not use
• Spaces
• Special characters
• Punctuation
• Capital letters

13
Add Links to Web Pages
LESSON 3
14
Link properties

• Link names - informative
• Hyper text - topic
• Graphic
• Formatting properties - consistent
• Address or path - relative vs absolute

15
Broken Links
LESSON 3

• Typos
• Pages move
• Sites move
• Sites expire

16
Add a Link
LESSON 3
Browse or Point
17
E-Mail Link(mailto)
LESSON 3
Fig B-20
18
Site Map
LESSON 3
Home page
Linked pages
email
19
History Panelfunctions
LESSON 4

• Undo
• Redo
• Replay
• Save As Command

20
History Panelproperties
LESSON 3

• 50 steps
• Preferences adds more
• Increasing steps uses memory

21
Code Inspector
LESSON 3

• Code View in a floating window

22
Reference Panel
LESSON 4

• Open from Code Inspector or Reference Panel

Html tag
info
example
23
Comments
LESSON 4

• Discerns code
• Not visible in browser

24
Date Object
LESSON 4
25
Comment and Date HTML
LESSON 4
Comment tag used for date
26
Test Pagesin Preview
LESSON 5

• Proofreading
• Window size
• Links

27
Test window sizeswithin Dreamweaver
28
Test Pagesin field
LESSON 5

• Monitors size and resolution
• Platforms unix, mac, pc
• Browsers explorer, netscape, aol

29
Unit Tasks
SUMMARY

• Create head content
• Set page properties
• Import and Format text
• Add links
• Use History Panel
• Use Code Inspector
• Test Web pages