Tài liệu Learning dreamwarev 3 pptx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.54 MB, 343 trang )
Share these FREE Courses!
Why stuff your friend’s mailbox with a copy of this when we can do it for you!
Just e-mail them the link info –
Make sure that you visit the site as well:
•
MORE FREE COURSES
•
Weekly Tool Tips
•
Updated course versions
•
New courses added regularly
So don’t copy files or photocopy - Share!
End User License Agreement
Use of this package is governed by the following terms:
A. License
TrainingTools.com Inc, ("we", "us" or "our"), provides the Licensee ("you" or "your") with a set of digital files in electronic format (together
called "the Package") and grants to you a license to use the Package in accordance with the terms of this Agreement. Use of the package
includes the right to print a single copy for personal use.
B. Intellectual Property
Ownership of the copyright, trademark and all other rights, title and interest in the Package, as well as any copies, derivative works (if any
are permitted) or merged portions made from the Package shall at all times remain with us or licensors to us. This Package is protected by
local and international intellectual property laws, which apply but are not limited to our copyright and trademark rights, and by international
treaty provisions.
C. Single-User License Restrictions
1. You may not make copies of the files provided in the Package
2. You may not translate and/or reproduce the files in digital or print format
3. You may not rent, lease, assign or transfer the Package or any portion thereof
4.
You may not modify the courseware
Copyrights and Trademarks
No part of this document may be reproduced, stored in a retrieval system, or
transmitted in any form or by any means – electronic, mechanical, recording, or
otherwise – without the prior written consent of the publisher.
Netscape Navigator is a trademark of Netscape Communications Corp.
Windows 3.1, Windows 95, Windows NT, and Internet Explorer are trademarks of
Microsoft Corporation.
All trademarks and brand names are acknowledged as belonging to their
respective owners.
Published by
XtraNet
180 Attwell Dr., Suite 130 Toronto, Ontario, Canada M9W 6A9
Phone: 416-675-1881 Fax: 416-675-9217 E-mail:
Copyright
©
1999 by XtraNet
All Rights Reserved
May 2000
First Edition
1 2 3 4 5 6 7
TABLE OF CONTENTS
Learning Dreamweaver 3
i
CHAPTER 1: HTML Introduction......................................................................................1
Linear Media.....................................................................................................................................................2
Hypermedia ......................................................................................................................................................2
What is HTML Markup.....................................................................................................................................2
A Basic Document...........................................................................................................................................3
Course Goal .....................................................................................................................................................3
Review Questions............................................................................................................................................4
Summary ..........................................................................................................................................................5
CHAPTER 2: Overview of the Dreamweaver Environment............................................6
Dreamweaver's Environment .........................................................................................................................7
The Document Window...................................................................................................................................8
Title Bar...........................................................................................................................................................9
Menu Bar.......................................................................................................................................................10
Tag Selector..................................................................................................................................................11
Window Size .................................................................................................................................................11
Download Speed...........................................................................................................................................12
Launcher .......................................................................................................................................................12
Properties Inspector......................................................................................................................................14
HTML Source..................................................................................................................................................15
Manipulating Dreamweaver's Environment................................................................................................16
Setting Preferences.......................................................................................................................................17
Setting Preview in Browser...........................................................................................................................18
Review Questions..........................................................................................................................................20
Summary ........................................................................................................................................................21
CHAPTER 3:The Anatomy of an HTML Document.......................................................22
Document Structure......................................................................................................................................23
Head Elements...............................................................................................................................................24
Page Properties .............................................................................................................................................25
Title ...............................................................................................................................................................26
Background Image........................................................................................................................................26
Background...................................................................................................................................................26
Text, Links, Visited Links, Active Links.........................................................................................................27
Document Encoding
...................................................................................................................................29
Tracing Image and Image Transparency......................................................................................................30
Inserting Elements ........................................................................................................................................31
Modifying an Element’s Attributes ..............................................................................................................32
Removing Elements ......................................................................................................................................33
Review Questions..........................................................................................................................................34
Exercises........................................................................................................................................................35
Summary ........................................................................................................................................................40
CHAPTER 4: Headings, Paragraphs, and Breaks.........................................................41
Headings.........................................................................................................................................................42
Paragraph.......................................................................................................................................................43
Break...............................................................................................................................................................44
Horizontal Rule ..............................................................................................................................................46
W (WIDTH)....................................................................................................................................................46
H (HEIGHT)...................................................................................................................................................46
Align ..............................................................................................................................................................46
Shading.........................................................................................................................................................47
Spaces Between Characters ........................................................................................................................47
TABLE OF CONTENTS
ii
Learning Dreamweaver 3
Review Questions..........................................................................................................................................49
Exercises........................................................................................................................................................50
Summary ........................................................................................................................................................51
CHAPTER 5: Character Formatting ...............................................................................52
Character Formatting....................................................................................................................................53
Format...........................................................................................................................................................53
Font...............................................................................................................................................................54
Font Size.......................................................................................................................................................54
Font Color .....................................................................................................................................................55
Bold...............................................................................................................................................................55
Italics.............................................................................................................................................................55
Alignment ......................................................................................................................................................56
Indent ............................................................................................................................................................57
Link Controls .................................................................................................................................................57
List Controls ..................................................................................................................................................57
Additional Character Formatting Options...................................................................................................58
Basefont........................................................................................................................................................59
Review Questions..........................................................................................................................................60
Exercises........................................................................................................................................................61
Summary ........................................................................................................................................................62
CHAPTER 6: Lists ...........................................................................................................63
List Elements .................................................................................................................................................64
Unordered Lists.............................................................................................................................................64
Ordered Lists.................................................................................................................................................66
Definition Lists...............................................................................................................................................68
Directory Lists ...............................................................................................................................................70
Menu Lists.....................................................................................................................................................71
Nesting Lists..................................................................................................................................................71
Review Questions..........................................................................................................................................77
Exercises........................................................................................................................................................78
Summary ........................................................................................................................................................81
CHAPTER 7: Anchors and URLs....................................................................................82
Link Elements ................................................................................................................................................83
Anchor <A></A> ...........................................................................................................................................83
Link Types......................................................................................................................................................83
Internal Links.................................................................................................................................................83
Local Links ....................................................................................................................................................83
External Links................................................................................................................................................83
Creating Internal Links..................................................................................................................................84
Creating Local Links .....................................................................................................................................85
Creating External Links ................................................................................................................................86
URLs – Uniform Resource Locators............................................................................................................87
HTTP – HyperText Transport Protocol .........................................................................................................87
FTP – File Transport Protocol.......................................................................................................................87
News – News Groups ...................................................................................................................................87
Gopher ..........................................................................................................................................................88
E-mail – Electronic Mail ................................................................................................................................88
Telnet – Remote Terminal Emulation ...........................................................................................................88
Review Questions..........................................................................................................................................89
Exercises........................................................................................................................................................90
Summary ........................................................................................................................................................91
TABLE OF CONTENTS
Learning Dreamweaver 3
iii
CHAPTER 8: Images and Image Maps...........................................................................92
Supported Image Formats............................................................................................................................93
GIF ................................................................................................................................................................93
Interlacing...................................................................................................................................................93
Transparency .............................................................................................................................................93
Animated GIFs ...........................................................................................................................................93
JPG, JPEG....................................................................................................................................................93
PNG ..............................................................................................................................................................94
Inserting Images............................................................................................................................................94
Image Properties...........................................................................................................................................95
Image Name...............................................................................................................................................95
Width and Height........................................................................................................................................96
Src ..............................................................................................................................................................96
Link.............................................................................................................................................................96
Align............................................................................................................................................................96
Alt ...............................................................................................................................................................96
V Space, H Space ......................................................................................................................................97
Target .........................................................................................................................................................97
Low Src.......................................................................................................................................................97
Border.........................................................................................................................................................97
Align............................................................................................................................................................97
Map.............................................................................................................................................................97
Refresh.......................................................................................................................................................97
Edit .............................................................................................................................................................97
Background Images ......................................................................................................................................98
Inserting Background Images in Dreamweaver............................................................................................98
Image Maps ....................................................................................................................................................99
Client-side Image Maps ..............................................................................................................................100
Server-side Image Maps.............................................................................................................................100
Creating Image Maps in Dreamweaver......................................................................................................101
Review Questions........................................................................................................................................103
Exercises......................................................................................................................................................104
Summary ......................................................................................................................................................106
CHAPTER 9: Tables ......................................................................................................107
Tables ...........................................................................................................................................................108
Inserting a Table .........................................................................................................................................109
Rows and Columns.....................................................................................................................................109
Width ........................................................................................................................................................109
Border.......................................................................................................................................................109
Cell Padding .............................................................................................................................................110
Cell Spacing .............................................................................................................................................110
Selecting Tables, Rows, Columns, and Cells...........................................................................................110
Table Properties ..........................................................................................................................................111
Table Name.................................................................................................................................................111
Rows and Columns.....................................................................................................................................111
Table Width.................................................................................................................................................111
Table Height................................................................................................................................................111
Cellpadding .................................................................................................................................................111
Cellspacing..................................................................................................................................................112
Align ............................................................................................................................................................112
Border .........................................................................................................................................................112
Clear Row Heights, Clear Column Widths..................................................................................................112
Convert Table Widths to Pixels or Percent.................................................................................................112
TABLE OF CONTENTS
iv
Learning Dreamweaver 3
V Space, H Space.......................................................................................................................................112
Light Border, Dark Border...........................................................................................................................112
Background Image, Background Color, and Border Color .........................................................................113
Row, Column, and Cell Properties.............................................................................................................113
Merge Cells.................................................................................................................................................113
Split Cell......................................................................................................................................................115
Alignment within Cells.................................................................................................................................116
Width and Height ........................................................................................................................................117
No Wrap......................................................................................................................................................117
Header ........................................................................................................................................................117
Background Image, Background Color, Border Color ................................................................................117
Importing Tabular Data ...............................................................................................................................118
Inserting a Navigation Bar..........................................................................................................................119
Review Questions........................................................................................................................................122
Exercises......................................................................................................................................................123
Summary ......................................................................................................................................................125
CHAPTER 10: Frames...................................................................................................126
Introduction to Frames ...............................................................................................................................127
The Anatomy of a Frames Page.................................................................................................................129
Creating a Frames Page in Dreamweaver.................................................................................................130
Frameset Properties....................................................................................................................................133
Borders........................................................................................................................................................133
Border Width...............................................................................................................................................133
Border Color................................................................................................................................................133
Column (or Row) and Units.........................................................................................................................134
Setting Frame Properties............................................................................................................................134
Frame Name...............................................................................................................................................135
Src...............................................................................................................................................................137
Borders........................................................................................................................................................137
Scroll ...........................................................................................................................................................137
No Resize....................................................................................................................................................138
Border Color................................................................................................................................................138
Margin Width and Margin Height ................................................................................................................138
Using Frames with the Objects Palette .....................................................................................................139
Alternatives to Frames................................................................................................................................139
Review Questions........................................................................................................................................140
Exercises......................................................................................................................................................141
Summary ......................................................................................................................................................143
CHAPTER 11: Forms.....................................................................................................144
Forms............................................................................................................................................................145
Form Properties...........................................................................................................................................146
Form Element <FORM> </FORM>.............................................................................................................146
Action ..........................................................................................................................................................146
Method ........................................................................................................................................................146
Name...........................................................................................................................................................146
Form Fields ..................................................................................................................................................146
Field Types..................................................................................................................................................147
Text Fields...................................................................................................................................................147
Format ......................................................................................................................................................147
Character Width .......................................................................................................................................147
Max Characters ........................................................................................................................................147
Type (Single Line, Multi-line, Password......................................................................................................147
Wrap.........................................................................................................................................................148
TABLE OF CONTENTS
Learning Dreamweaver 3
v
Initial Value...............................................................................................................................................148
Checkboxes..................................................................................................................................................149
Checkbox Properties...................................................................................................................................149
CheckBox .................................................................................................................................................149
Checked Value .........................................................................................................................................149
Initial State................................................................................................................................................150
Radio Buttons..............................................................................................................................................150
Radio Button Properties..............................................................................................................................150
RadioButton..............................................................................................................................................150
Checked Value .........................................................................................................................................151
Initial State................................................................................................................................................151
List/Menu Box..............................................................................................................................................151
Menu Box Properties ..................................................................................................................................152
List/Menu..................................................................................................................................................152
Type..........................................................................................................................................................152
List Values................................................................................................................................................152
List Box Properties......................................................................................................................................154
List/Menu..................................................................................................................................................154
Type..........................................................................................................................................................154
Height .......................................................................................................................................................154
Selections.................................................................................................................................................154
List Values................................................................................................................................................154
File Field .......................................................................................................................................................155
File Field Properties ....................................................................................................................................155
FileFieldName ..........................................................................................................................................155
Character Width .......................................................................................................................................155
Maximum Characters ...............................................................................................................................155
Initial Value...............................................................................................................................................155
Hidden Field.................................................................................................................................................156
Hidden Field Properties ..............................................................................................................................156
HiddenField ..............................................................................................................................................156
Value ........................................................................................................................................................156
Button Field..................................................................................................................................................156
ButtonName..............................................................................................................................................157
Label.........................................................................................................................................................157
Action........................................................................................................................................................157
Image Field...................................................................................................................................................158
Jump Field....................................................................................................................................................158
Menu Items .................................................................................................................................................158
Text ...............................................................................................................................................................158
When Selected, Go to URL .........................................................................................................................159
Open URLs In...............................................................................................................................................159
Menu Name...................................................................................................................................................159
Options .........................................................................................................................................................159
Common Gateway Interface .......................................................................................................................159
CGI Scripts ...................................................................................................................................................159
Intranet Application Development Architectures.....................................................................................160
Simple CGI Program...................................................................................................................................160
Three Tier Web Application Development..................................................................................................161
Four-Tier Web Application Development....................................................................................................162
Review Questions........................................................................................................................................163
Exercises......................................................................................................................................................164
Summary ......................................................................................................................................................168
TABLE OF CONTENTS
vi
Learning Dreamweaver 3
CHAPTER 12: Special Elements, Plug-ins, Libraries, Templates, History, and the
Quick Tag Editor............................................................................................................169
The Meta Element........................................................................................................................................170
Meta ............................................................................................................................................................171
Keywords ....................................................................................................................................................172
Description ..................................................................................................................................................172
Refresh........................................................................................................................................................173
Base............................................................................................................................................................173
Link..............................................................................................................................................................174
Server Side Includes ...................................................................................................................................174
Enabling Server Side Includes in Dreamweaver ......................................................................................175
Inserting Server Side Include Statements with Dreamweaver................................................................176
Using Plug-ins..............................................................................................................................................176
Inserting a Flash or Shockwave Movie.......................................................................................................177
OBJECT ...................................................................................................................................................177
EMBED.....................................................................................................................................................178
Modifying Plug-in Properties......................................................................................................................178
Other Plug-ins .............................................................................................................................................179
The Library...................................................................................................................................................180
Templates.....................................................................................................................................................182
The History Palette......................................................................................................................................184
The Quick Tag Editor ..................................................................................................................................187
Insert HTML ................................................................................................................................................187
Edit Tag.......................................................................................................................................................187
Wrap Tag ....................................................................................................................................................187
Tag Hint.......................................................................................................................................................188
Review Questions........................................................................................................................................189
Exercises......................................................................................................................................................190
Summary ......................................................................................................................................................192
CHAPTER 13: Page Layout and Design Considerations ...........................................193
Web Development Fundamentals..............................................................................................................194
Screen Dimension.......................................................................................................................................194
Additional Dimension Factors .....................................................................................................................195
HTML Elements that use Pixels .................................................................................................................195
Tables .........................................................................................................................................................195
Graphics in a Table.....................................................................................................................................196
Frames..........................................................................................................................................................196
Images ..........................................................................................................................................................197
What are Spacer GIFs? ..............................................................................................................................197
Horizontal Rule ............................................................................................................................................197
Color Depth..................................................................................................................................................198
Image Formats.............................................................................................................................................198
Bandwidth ....................................................................................................................................................199
Browser Type...............................................................................................................................................199
Browser Version..........................................................................................................................................199
Plug-ins.........................................................................................................................................................200
Platform ........................................................................................................................................................200
Fonts.............................................................................................................................................................201
Common Design Solutions.........................................................................................................................201
Format.........................................................................................................................................................201
Image Maps ................................................................................................................................................202
Layout Tricks...............................................................................................................................................202
Review Questions........................................................................................................................................203
TABLE OF CONTENTS
Learning Dreamweaver 3
vii
CHAPTER 14: Cascading Style Sheets .......................................................................204
Introduction to Cascading Style Sheets ...................................................................................................205
Inline Styles..................................................................................................................................................205
Embedded Style Sheets..............................................................................................................................206
Classes .........................................................................................................................................................207
IDs .................................................................................................................................................................207
Linked Style Sheets.....................................................................................................................................208
Style Hierarchy ............................................................................................................................................208
Creating Embedded Style Sheets in Dreamweaver .................................................................................209
Make Custom Style.....................................................................................................................................210
Redefine HTML Tag....................................................................................................................................210
Use CSS Selector .......................................................................................................................................210
Defining Styles.............................................................................................................................................211
Creating Linked Style Sheets in Dreamweaver ........................................................................................216
Modifying Linked Style Sheets...................................................................................................................221
Layers ...........................................................................................................................................................223
Layers and Cascading Style Sheets..........................................................................................................224
Layer Properties ..........................................................................................................................................225
Layer ID.......................................................................................................................................................225
Layer Position: Left and Top.......................................................................................................................225
Width and Height ........................................................................................................................................225
Layer Depth: The Z-Index...........................................................................................................................225
Background Image......................................................................................................................................225
Visibility.......................................................................................................................................................225
Background Color .......................................................................................................................................225
Tag..............................................................................................................................................................225
Overflow......................................................................................................................................................226
Clip..............................................................................................................................................................226
Layers Window ............................................................................................................................................226
Using Layers to Build Tables.....................................................................................................................228
HTML Styles .................................................................................................................................................230
Review Questions........................................................................................................................................232
Exercises......................................................................................................................................................233
Summary ......................................................................................................................................................234
CHAPTER 15: Behaviors and JavaScript....................................................................235
JavaScript.....................................................................................................................................................236
Behaviors .....................................................................................................................................................237
Adding and Removing Behaviors..............................................................................................................237
Selecting Behaviors for Browser Version and Type ...................................................................................238
Events and Actions .....................................................................................................................................238
Using Behaviors..........................................................................................................................................240
Rollovers ......................................................................................................................................................244
Insert Rollover.............................................................................................................................................245
Swap Image Behavior.................................................................................................................................246
Open Browser Window ...............................................................................................................................247
Review Questions........................................................................................................................................250
Exercises......................................................................................................................................................251
Summary ......................................................................................................................................................252
CHAPTER 16: The Website Development Cycle.........................................................253
Website Development .................................................................................................................................254
The 12 Step Website Development Cycle .................................................................................................255
Pre-Production.............................................................................................................................................256
TABLE OF CONTENTS
viii
Learning Dreamweaver 3
Step 1: Profile of Target Audience..............................................................................................................257
Sales and Marketing.................................................................................................................................258
Communication ........................................................................................................................................258
Revenue Generation ................................................................................................................................258
Specific/General Information....................................................................................................................258
Projected Audience ..................................................................................................................................259
Technical Specifications Document............................................................................................................259
Browser Version and Browser Type.........................................................................................................259
Frames .....................................................................................................................................................259
JavaScript.................................................................................................................................................259
Forms and CGI.........................................................................................................................................259
HTML 4 / DHTML .....................................................................................................................................260
Server Side Includes ................................................................................................................................260
Non-Standard Media ................................................................................................................................260
Search Engine..........................................................................................................................................260
Technical Document.................................................................................................................................260
Text Content and Navigation......................................................................................................................261
Step 3: Visual Elements..............................................................................................................................262
Step 4: Alpha Text Version .........................................................................................................................263
Step 5: Beta Text Version...........................................................................................................................265
Step 6: Alpha Visual Version ......................................................................................................................266
Step 7: Beta Visual Version ........................................................................................................................267
Production....................................................................................................................................................268
Step 8: Content Creators..........................................................................................................................268
Step 9: Content Approval .........................................................................................................................268
Step 10: Page Editing...............................................................................................................................269
Step 11: Staging and Publishing ..............................................................................................................270
Staging Server..........................................................................................................................................270
Public Server ............................................................................................................................................270
Search Engines ........................................................................................................................................271
Tracking Services.....................................................................................................................................271
Post Production...........................................................................................................................................271
Step 12: Post Production..........................................................................................................................271
Site Updates.............................................................................................................................................272
Measuring.................................................................................................................................................272
Review Questions........................................................................................................................................273
Summary ......................................................................................................................................................274
CHAPTER 17: Site Management in Dreamweaver......................................................275
Site Management.........................................................................................................................................276
Dreamweaver’s Site Window......................................................................................................................277
Local Info.....................................................................................................................................................278
Web Server Info..........................................................................................................................................281
Check In/Out ...............................................................................................................................................282
Site Map Layout ..........................................................................................................................................283
Cache Site ....................................................................................................................................................284
Creating Files and Folders with the Site Window ....................................................................................286
Reorganizing Site Structure .......................................................................................................................286
Checking for Broken Links.........................................................................................................................288
Browser Compatibility ................................................................................................................................289
Site Wide Find and Replace........................................................................................................................292
Publishing the Website...............................................................................................................................295
Adding Design Notes ..................................................................................................................................297
Basic Info ....................................................................................................................................................297
All Info .........................................................................................................................................................298
TABLE OF CONTENTS
Learning Dreamweaver 3
ix
Importing and Cleaning Word HTML.........................................................................................................298
Review Questions........................................................................................................................................302
Summary ......................................................................................................................................................303
CHAPTER 18: Preferences...........................................................................................304
Preferences ..................................................................................................................................................305
General Preferences...................................................................................................................................305
Update Links.............................................................................................................................................305
Dictionary..................................................................................................................................................305
Color Scheme...........................................................................................................................................306
Object Palette...........................................................................................................................................306
Options .....................................................................................................................................................306
CSS Styles .....................................................................................................................307
External Editors...........................................................................................................................................308
Reload Modified Files...............................................................................................................................308
Save on Launch .......................................................................................................................................308
Floating Palettes .........................................................................................................................................309
Fonts / Encoding.........................................................................................................................................310
Highlighting .................................................................................................................................................311
HTML Colors...............................................................................................................................................312
HTML Format..............................................................................................................................................313
Indent........................................................................................................................................................313
Autowrap ..................................................................................................................................................313
Line Breaks...............................................................................................................................................313
Case for Tags...........................................................................................................................................314
Case for Attributes....................................................................................................................................314
Override Case Of .....................................................................................................................................314
Centering..................................................................................................................................................314
HTML Rewriting ..........................................................................................................................................315
Invisible Elements.......................................................................................................................................316
Layers .........................................................................................................................................................317
Preview in Browser .....................................................................................................................................318
Site FTP ......................................................................................................................................................319
Quick Tag Editor .........................................................................................................................................319
Status Bar ...................................................................................................................................................321
Window Sizes...........................................................................................................................................321
Connection Speed....................................................................................................................................321
Launcher...................................................................................................................................................321
Style Sheet Format.....................................................................................................................................322
Translation ..................................................................................................................................................322
Translators................................................................................................................................................322
Automatically Translate............................................................................................................................322
Review Questions........................................................................................................................................323
Summary ......................................................................................................................................................324
Learning Dreamweaver 3
1
1
HTML Introduction
In this chapter, you are introduced to the concepts of linear media and hypermedia. You
learn about HTML and the basics of document structure.
Objectives
Upon completing this section, you should be able to:
1. Explain hypermedia vs. linear media
2. Define HTML
3. Understand HTML Element Structure
4. Describe the Basic Document Structure
2
Learning Dreamweaver 3
Linear Media
Linear media describes media with a defined beginning and a linear progression to the
end. Forms of linear media such as film, audio and videotape, as well as most books are
organized with this expectation. The World Wide Web, however, is organized differently.
Hypermedia
Hypermedia is about choice. Users simply select what interests them. A good example is
an audio CD where you can choose song 5 and listen to it almost instantly. Compare this
with an audiotape where you would have to scan through from your current location on the
tape to the beginning of the song.
When this concept is applied to text you get hypertext, where by
{Clicking}
on a link or
hotspot (hyperlink) you are transported to a new location within the same page or to a new
page altogether.
When you interlink a large number of pages of text on different computers all over the
world, you get a spider web-like system of links and pages. This is known as the World
Wide Web - a system whereby pages stored on many different web servers, connected to
the Internet, are linked together.
The system is useful because all of the pages are created in the same format. This format
or "language" is called HTML (Hypertext Markup Language), a subset of an international
standard for electronic document exchanged called SGML (Standard Generalized Markup
Language).
This course introduces you to the format of an HTML page. You learn about the
components that make up HTML, and how to use Dreamweaver to create pages to
publish on the World Wide Web.
What is HTML Markup?
HTML is a set of logical codes (markup) in parentheses that describe the appearance of a
web document and the information it contains.
<B>This text would appear bold in the browser</B>
The codes are enclosed by less than "<", and greater than ">" brackets. These bracketed
codes of the markup are commonly referred to as tags. HTML codes are always contained
inside these brackets and are case-insensitive; meaning, it does not matter whether you
type them in upper case or lower case. However, tags are easier to recognize in a web
document if they are capitalized.
There is an opening element (tag) and a closing element (tag). The closing element is
distinguished by the "/" inside the "<" opening bracket, as in </B> to end where the text is
in bold.
Learning Dreamweaver 3
3
The first word or character that appears inside the "<" opening bracket is called the
element. An element is a command that tells the browser to do something, such as
<FONT>.
Words that follow the element and are contained inside the ">" closing bracket are called
attributes. Attributes are not repeated or contained in the closing element (tag).
Confused? Attributes are another way of describing the element's properties. For instance,
a t-shirt can have several properties or "attributes" - the t-shirt's color, size, material etc.
are all attributes.
Attributes that appear to the right of the element are separated by a space, and followed
by an equal sign. The value of the attribute is contained in quotes. In the following
example, the element is FONT, the attribute is COLOR, and the value of the attribute is
BLUE.
Most HTML elements have more than one attribute:
<FONT COLOR="BLUE" SIZE="+1">This text would be blue and one size larger than
normal.</FONT>
A Basic Document
An element called HTML surrounds the whole document. This element contains two sub-
elements, HEAD and BODY. These elements are required to form any HTML document.
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<BODY>
</BODY>
</HTML>
Course Goal
The goal of this course is to teach you how to use Dreamweaver to apply HTML Elements
and Attributes in designing web pages. This course reviews many elements in the current
HTML specification. Not all web pages use all of the elements, however, it is to your
advantage to understand that they exist so that you can create effective pages.
4
Learning Dreamweaver 3
Review Questions
1. What does HTML stand for?
2. What is an Element?
3. What are the Attributes of an Element?
Learning Dreamweaver 3
5
Summary
As a result of this chapter, you should be able to:
• Explain hypermedia vs. linear media
• Define HTML
• Understand HTML Element Structure
• Describe the Basic Document Structure
6
Learning Dreamweaver 3
2
Overview of the Dreamweaver Environment
This chapter introduces you to Dreamweaver's environment, which consists of various
windows, palettes, objects, inspectors, and tools you utilize to build your web pages and
manage your web site.
Objectives
Upon completing this section, you should be able to:
1. Identify the main components of Dreamweaver's environment
2. Select and modify Dreamweaver's Preferences
Learning Dreamweaver 3
7
Dreamweaver's Environment
The first chapter introduced you to HTML elements and their attributes as well as the
basic document format. The good news is you don't need to type code in by hand.
Dreamweaver is going to make creating your HTML web pages easy. A number of
interface options can be customized. We focus on default settings and use these for the
bulk of the course so you can focus on learning how to create web pages.
Dreamweaver's Default Environment
By default, when you first launch or open Dreamweaver, the interface consists of the
Objects Palette, the Document Window, the Properties Inspector, and the Launcher.
OBJECT
PALETTE
DOCUMENT
WINDOW
PROPERTY
INSPECTOR
LAUNCHER
8
Learning Dreamweaver 3
The Document Window
Use the Document Window to input the content of your web pages. For instance, you can
input text in the Document Window as you would into a word processor. You can insert
graphics, create tables, and add many other common elements that make up a typical
web page. As you follow through the remainder of this text, you'll become familiar with the
wide variety of elements that make up the content of typical web pages.
The Document Window is a WYSIWYG editor. WYSIWYG is an acronym for `What You
See Is What You Get'; that is, the way documents are displayed is how they're going to
look in the Web browser.
The Document Window consists of the Title Bar, the Menu Bar, the Tag Selector,
indicators for Window Size and Window Download Speed, and the mini-Launcher.
The Document Window
TITLE
BAR
MENU
TAG SELECTOR
WINDOW SIZE
DOWNLOAD SPEED
LAUNCHER
Learning Dreamweaver 3
9
Title Bar
The Title Bar displays both the title of the HTML document and the title of the actual HTML
file. The <TITLE> </TITLE> tag is contained in the <HEAD> of an HTML document.
Whatever you input between the <TITLE> tags is the title of the HTML document. You
don't have to save the HTML file with the same name. For instance, if you visit
Macromedia's web site at , and examine the title of the HTML
document in the Title Bar of your browser, it displays "Macromedia."
The Title Bar of Netscape's Navigator Browser
The title of this HTML document is Macromedia
However, the actual file (stored on the hard-drive or server) is titled "index_flash.html."
Dreamweaver displays the title of the HTML document first and the title of the HTML file in
brackets.
Dreamweaver's Title Bar
"Macromedia" is the title of the HTML document.
"index_flash.html" is the name of the HTML file.
10
Learning Dreamweaver 3
Menu Bar
Dreamweaver's Menu Bar
Dreamweaver's Menu Bar consists of File, Edit, View, Insert, Modify, Text, Commands,
Window, and Help. You use menu items to perform various tasks and commands as you
produce web pages. To select a menu item,
{Click}
the menu title, such as "File" and
{Click}
the item you desire from the resulting drop-down menu.
{Click}
the Menu title, in this case "File".
A drop-down menu results.
We want to open a file, so we select the menu item "Open" by
{Clicking}
on it.
As we continue through the textbook, you will become familiar with most of the menu
items. At this point, we won't go through every menu option. We will refer to the menu
options when necessary in the course. When you are called upon to select a menu item,
such as "File" and then "Open" we describe it in the following format: Select “File/Open”.
You may want to make yourself familiar with what is listed in each menu.
Learning Dreamweaver 3
11
Tag Selector
Recall that elements in HTML, such as <B> (to bold text) are also referred to as tags. At
the bottom of Dreamweaver's Document Window, the Tag Selector displays a range of
tags depending on where the cursor is in the current document. As we begin to build web
pages, the convenience of the Tag Selector will become apparent to you. To select a tag
in the Tag Selector, simply
{Click}
it.
Window Size
The current size of the Document Window is displayed in the Window Size box. The
Document Window is resizable. To resize the Document Window,
{Click}
, hold, and drag
any corner or edge of the window. {Release} the mouse button when you have resized
the Document Window to the desired size.
Dimensions or size are expressed in terms of pixels. Computer displays are made up of
individual dots (or units) called pixels. Currently, computers have a common group of
fixed desktop dimensions ranging from 640x480 to 1280x1024 or higher. Websites are
usually designed “resolution-safe”, meaning to the lowest common denominator; which is
a desktop display at 640 pixels wide by 480 pixels high (640x480). Designers commonly
restrict themselves to a pixel width of 600 to ensure everyone can view content without
having to scroll sideways in the browser window. By
{Clicking}
the drop-down arrow in the
Window Size box, you can select from a number of preset Document Window dimensions.
Select from a number of preset Document Window dimensions
12
Learning Dreamweaver 3
Download Speed
The Download Speed box displays the current estimated time it will take a user to
download your page from the Internet. The estimated time changes depending on how
much content, such as text and graphics, your web page contains. The more content
there is, the longer it takes to download. Download speed also depends on the speed of
the user’s connection, which can vary from very slow modems, to quick modems, to direct
connections to the Internet. By default, Dreamweaver assumes users are using a
28.8Kbs modem to connect to the Internet. You can change this setting in Dreamweaver's
Preferences, which we cover later.
Launcher
The Launcher contains six icons that open or launch major tools that you use in
Dreamweaver. It is a miniature version of the full Launcher displayed by default when you
first open Dreamweaver.
The Launcher
{Clicking}
on Site, Library, Styles, Behavior, Time Line, or HTML, opens the respective
tool. For instance, if you
{Click}
Site, Dreamweaver's Site Window opens. If you
{Click}
Library, the Library Window opens. Each of these Windows is covered in depth in later
chapters.
