Adobe Photoshop 7'0 Design Professional

1
(No Transcript)
2
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

3
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

4
Creating Head Content

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

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

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

7
Web-Safe Colors
LESSON 1

• 216 colors
• RGB
• Hexidecimalvalues

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

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

10
Web fonts
LESSON 1

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

11
Text Property Inspector
LESSON 2

• Font, Size, Color, Style, Alignment

12
Font Size
LESSON 2

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

13
Web filenames

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

14
Add Links to Web Pages
LESSON 3
15
Link properties

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

16
Broken Links
LESSON 3

• Typos
• Pages move
• Sites move
• Sites expire

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

• Undo
• Redo
• Replay
• Save As Command

21
History Panelproperties
LESSON 3

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

22
Code Inspector
LESSON 3

• Code View in a floating window

23
Reference Panel
LESSON 4

• Open from Code Inspector or Reference Panel

Html tag
info
example
24
Comments
LESSON 4

• Discerns code
• Not visible in browser

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

• Proofreading
• Window size
• Links

28
Test window sizeswithin Dreamweaver
29
Test Pagesin field
LESSON 5

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

30
Under Construction
LESSON 5

• Dont do it!
• You may only get 3 clicks

31
Unit B Tasks
SUMMARY

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