Dreamweaver's Environment The first chapter introduced you to HTML elements and their attributes as well as the basic document format.. Dreamweaver's Default Environment By default, whe
Trang 2Share 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 – http://www.trainingtools.com
Make sure that you visit the site as well:
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
Trang 3Copyrights 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: info@xnu.com
Copyright © 1999 by XtraNet
All Rights Reserved May 2000 First Edition
1 2 3 4 5 6 7
Trang 4TABLE OF CONTENTS
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
Trang 5TABLE OF CONTENTS
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
Trang 6TABLE OF CONTENTS
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
Trang 7TABLE OF CONTENTS
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
Trang 8TABLE OF CONTENTS
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
Trang 9TABLE OF CONTENTS
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
Trang 10TABLE OF CONTENTS
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
Trang 11TABLE OF CONTENTS
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
Trang 12TABLE OF CONTENTS
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
Trang 14Upon 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
Trang 15Linear 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
Trang 16The 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
Trang 18Summary
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
Trang 192
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
Trang 20Dreamweaver'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
Trang 21The 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
DOWNLOAD SPEED
LAUNCHER
Trang 22Title 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 http://www.macromedia.com, 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
Trang 23Menu 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
Trang 24Tag 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
Trang 25Download 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
Trang 26These Windows can also be opened by selecting Window from the Menu Bar Each of these Windows appears as an item
The Windows available in the Launcher are also available
as items in the Window Menu
Trang 27Properties Inspector
The Properties Inspector displays the current settings or properties of any of the
components that make up the content of your web page For instance, when you are working with text, the Properties Inspector displays properties related to text, such as the size of text, the style (bold, italic, normal), justification (left, center, right), color, and so forth If you are working with a graphic, the type of graphic is displayed, the width and height, whether it is acting as a hyperlink, and so forth The Properties Inspector allows you to view and modify properties As we progress through the lessons, you use the Properties Inspector extensively At the bottom of the Properties Inspector is a small
arrow If the arrow is pointing downward, {Click} it to reveal more properties
The Properties Inspector
The properties displayed in this example deal with text
Objects Palette
Character
Objects
Common Objects
Form Objects
Frame Objects
Head Objects
Invisible Objects
Trang 28The Objects Palette consists of objects or elements common to web pages, such as graphics, tables, horizontal rules, form fields, Meta elements, internal links, line breaks, and others, all of which are covered in later chapters There are six major types of
Objects By default, the Common Objects are displayed, as they are the most used
Change the Objects Palette from the Common Objects by {Clicking} the drop-down arrow
at the top of the Palette A fly-out menu results
Clicking the drop-down arrow brings up a fly-out menu
from which you can select the other types of Objects
To use the Objects Palette, place your cursor in the Document Window where you want to
insert an Object, such as an image, and {Click} the appropriate Object, in this case the
Insert Image icon We will use the Objects Palette when we begin building web
pages
HTML Source
In addition to the Document Window, it's a good idea to {Click} the HTML Source icon in
the Document Window You can view the source code (HTML) at any time and can make changes manually if you are so inclined As you progress through this book you may want
Trang 29Manipulating Dreamweaver's Environment
The Document Window, Objects Palette, Properties Inspector, Launcher, and any other Windows you open as you use Dreamweaver can be moved, closed or opened around the
screen To move a palette, inspector, or window, simply {Click}, hold, and drag it to
wherever you want
To close a palette, inspector, or window, simply {Click} on the Close icon
The location of the Document Window, Objects Palette, Properties Inspector, Launcher, and any other Windows you might have opened is saved when you close the program The next time you open Dreamweaver, everything will be in the same location you last left them
To open a palette, inspector, or window, select Window from the Menu Bar and choose the item you want to open
Trang 30Setting Preferences
Dreamweaver allows you to set a number of preferences to customize the environment and affect particular settings, such as the Download Speed indicator At this point, we won't cover all of the Preferences because few of them can be understood until you have actually learned some more HTML and have begun to develop a web page using
Dreamweaver When applicable, we cover Preferences as the lessons progress and all the Preferences are summarized in the last chapter
To access Dreamweaver's Preferences select Edit/Preferences The Preferences Dialog Box pops-up
The Preferences Dialog-Box
Select the type of Preferences from the Category Box
Change the Preferences by modifying the options
that appear beside the Category box
Trang 31Setting secondary “Preview in Browser”
As you create web pages, it’s important to view them in a web browser to see exactly how they appear and function It’s a good idea to view pages in both of the major browsers When a “Document Window” is open, you can press [F12] to view the page in the primary browser or [CTRL+F12] ([COMMAND+F12] on the Macintosh) to view the page in the
secondary browser To designate primary and secondary browsers, {Click} the “Preview
in Browser” category in “Preferences”
In the “Browsers” window there may, or may not be a list of browsers (depending on the
install) To add browsers to the list, {Click} the “Add” button and select the browser Select the browser in the “Browsers” window and {Click} either “Primary Browser” or
“Secondary Browser” to designate the browser as your primary and secondary preview
Trang 32Explorer is the primary browser Netscape is the secondary browser
Trang 33Review Questions
1 What is Dreamweaver’s Document Window used for?
2 What is the purpose of the Properties Inspector?
3 What is the Objects Palette used for?
Trang 34Summary
As a result of this chapter, you should be able to:
• Identify the main components of Dreamweaver's environment
• Select and modify Dreamweaver's Preferences
Trang 353
The Anatomy of an HTML Document
You learn about HTML and basic document structure and where elements are placed
Objectives
Upon completing this section, you should be able to:
1 Describe the Basic Document Structure
2 Identify the Sub-elements of the header
3 Understand how to insert Elements into documents
Trang 36Document Structure
Documents are marked up with elements and attributes according to a Document Type Definition (DTD) These are the rules that govern the way in which a document can be marked up
The authoritative source for information about the HTML Specification and the HTML DTD
is the World Wide Web Consortium (W3C) at http://www.w3.org
The World Wide Web Consortium is a not-for-profit organization that coordinates the evolution of the Web It includes the Internet Engineering Task Force, the group of people who make recommendations for new markup
Trang 37Head Elements
<HTML>
<HEAD> has sub-elements that define header material:
<TITLE> the title of your document is what appears in a web browser's Favorite or
Bookmark list Your document's title should be descriptive as some search engines
use the title for indexing </TITLE>
<META> provides information such as the page's keywords author and other
information </META>
<SCRIPT> contains either JavaScript or VBScript </SCRIPT>
<STYLE> contains cascading style sheet information </STYLE>
<LINK> forms a relationship to another object on the Web It can be used to link a style sheet or a section of JavaScript </LINK>
Base, Meta, Script, Link and Style are covered in detail later in the course
Note: a framed document is formatted differently than a basic document and is discussed
in the advanced section of the course
Trang 38Page Properties
{Right Click} in the Document Window and select "Page Properties" The Page Properties
Dialog Box enables you to modify a number of the <HEAD> elements and attributes of the
<BODY> element
{Right Clicking} in the document window brings up a pop-up box
Select Page Properties to change <HEAD> and <BODY> elements
Trang 39Page Properties Dialog Box
The Page Properties dialog box contains settings for Title, Background Image,
Background, Text, and Links colors, Encoding Type, a Trace Image, Trace Image
Transparency, and information about the current folder the document page is stored in, and the location of the Site Root on your hard drive
Title
Input the Title of your document into the Title field Keep in mind that Search Engines might use the Title of an HTML document as a source for keywords Title your documents appropriately If you were to title your page "Dreamweaver”, the HTML code that
Dreamweaver creates is:
<TITLE> Dreamweaver </TITLE>
The <TITLE> tag is part of the <HEAD> of an HTML document
Background Image
Using images for your background is covered in Images and Image Maps To select a
background image, {Click} on "Browse" beside the Background Image field and select a
web compatible image
Background
{Click} the color box beside "Background" to choose the background color of your web
page
Trang 40{Clicking} on the color box brings up Dreamweaver's Color Picker
By default, Dreamweaver sets the Background color to white, expressed in hexadecimal format as "#FFFFFF." As you pass the mouse pointer over each color (called color
swatches), you'll notice the hexadecimal value is displayed at the bottom of the Color Picker Dreamweaver's Color Picker consists of 216 web-safe colors Both Navigator and Internet Explorer share the same standard colors for display in the browser window This set of 216 colors is known as the web palette or web-safe color set
The Background color is an attribute of the <BODY> tag Dreamweaver inserts the
following HTML code:
<BODY BGCOLOR="#FFFFFF">
Text, Links, Visited Links, Active Links