29
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 Unit Lessons
| Date post: | 21-Dec-2015 |
| Category: |
Documents |
| View: | 224 times |
| Download: | 0 times |
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
Unit Lessons
Understanding Page Layout
Use White Space Effectively
Limit Multimedia Elements
Keep it Simple
Use an Intuitive Navigation Structure
Apply a Consistent Theme
Developing a Web page
Creating Head Content
Title - browser title bar
fig B-2
Keywords - search
Description - search resultsfig B-4
keywords description
title
Create Head Content…<html>
<head><title>…</title><meta name=“keywords” content=“…”><meta name=“description” content=“…”>
</head>
<body….>…..</body></html>
Web Page Properties
Background color
Font colorLink colors (unvisited, visited, active)
Web-Safe Colors
216 colors
RGB
Hexidecimalvalues
Background color
Create, Import and Format Text
Adding text to a Dreamweaver page…
Type in DreamweaverCopy/Paste [Ctrl+C] and [Ctrl+V]
Import Word HTML
Web fonts
Browsers use visitor’s fonts
Font combinations
Serif and Sans Serif
t TGraphic text for funky fonts
Text Property Inspector
Font, Size, Color, Style, Alignment
Font Size
“3” - Default browser size
“1” through “7”, or
“-7” through “+7”
Web filenames
• Do not use: • Spaces• Special characters• Punctuation• Capital letters
Add Links to Web Pages
Link properties
•Link names - informative
•Hyper text - topic
•Graphic
•Formatting properties - consistent
•Address or path - relative vs absolute
Broken Links
Typos
Pages move
Sites move
Sites expire
Add a Link
Browse or Point
E-Mail Link(mailto:)
Fig B-20
Site Map
Home page
Linked pages
History Panel…functions
Undo
Redo
Replay
Save As Command
History Panel…properties
50 steps
Preferences adds more
Increasing steps uses memory
Code InspectorCode View in a floating window
Reference PanelOpen from Code Inspector or Reference Panel
Htmltag
example
info
Comments
Discerns code
Not visible in browser
Date Object
Comment and Date HTML
Comment tag used for date
Test Pages…in Preview
Proofreading
Window size
Links
Test window sizeswithin Dreamweaver
Test Pages…in field
Monitors size and resolution
Platforms unix, mac, pc
Browsers explorer, netscape, aol
Unit TasksCreate head content
Set page properties
Import and Format text
Add links
Use History Panel
Use Code Inspector
Test Web pages
