Date post: | 20-Dec-2015 |
Category: |
Documents |
View: | 224 times |
Download: | 3 times |
2Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
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
Chapter Lessons
3Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
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
4Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Creating Head ContentA web page is composed of two sections:– Head - includes the page title and meta
tags which are not visible to the web browser.
– Body
5Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Creating Head Content
Title - browser title bar
Keywords - search
Description - search results
6Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Head ContentTitle text box on Document Toolbar
Meta icon
HeadContentsection
Title icon
7Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Create Head Content…<html>
<head><title>TripSmart</title><meta name=“keywords” content=“…”><meta name=“description” content=“…”>
</head>
<body….>…..</body></html>
8Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Web Page Properties
Background color
Font colorLink colors (unvisited, visited, active)
9Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Web-Safe Colors
216 colors
RGB
Hexidecimalvalues
10Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Background color
BackgroundColorbox
HexadecimalNumber forwhite
Strikethroughbutton
White
11Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Create, Import and Format Text
Adding text to a Dreamweaver page…
Type in DreamweaverCopy/Paste [Ctrl+C] and [Ctrl+V] (Windows)[Cmd+C] and [Cmd+V] (Macintosh)
Import Word Document
12Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Web fonts
Browsers use visitor’s fonts
Font combinations
Serif and Sans Serif
t TGraphic text for funky fonts
13Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Text Property Inspector
Selectedaddresstext
Font List
Size listarrow
Style buttons
14Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Font Size
“3” - Default browser size
“1” through “7”, or
“-7” through “+7”
15Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Web filenames
Do not use: Spaces Special characters Punctuation Capital letters
16Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Importing Microsoft Office Documents
File Menu and select Import
Select file to be imported into Dreamweaver
Command Menu and select Clean Up Word HTML
Select version of Word
18Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Link properties
•Link names - informative
• Mail to links
•Hyper text - topic
•Graphic
•Formatting properties - consistent
•Address or path - relative vs absolute
19Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Broken Links
Typos
Pages move
Sites move
Sites expire
20Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Add a Link
Selectedtext
Link textbox
Browse for File Icon
21Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
E-Mail Link(mailto:)
LinkInformation
Text for e-mailLink
22Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Site Map with linksExpand/Collapsebutton
E-mail link
For pagesLinked to Home page
23Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
History Panel…functions
Undo
Redo
Replay
Slider
Red X indicatesAction cannotBe undone
24Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
History Panel…properties
50 steps
Preferences adds more
Be careful - increasing steps uses memory
25Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Code InspectorCode View in a floating window
Line numberOf the HTMLCode
Options
26Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Reference PanelOpen from Code Inspector or Reference Panel
HTML Tag
TagDescription
27Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Date Object
Will change the data each time you save the document
28Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Comment and Date HTML
Comment Tag
29Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Modify and Test Pages…in Preview
Proofreading
Window size
Links
30Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Test window sizeswithin Dreamweaver
Default Screen sizes
31Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Dreamweaver Default Screen Sizes
32Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Test Pages…in field
Monitors size and resolution
Platforms unix, mac, pc
Browsers explorer, netscape, aol
33Developing a Web Page Web Collection: Dreamweaver MX 2004 Chapter B
Under Construction
Don’t do it!
Only causes frustration to the end user