Home » Adobe Manuals » Computer Software » Adobe 38028779 » Manual Viewer

Adobe 38028779 User Guide - Page 22

Typographical conventions, What’s new in Dreamweaver 4, Enhanced code editing, Bold roman text

UPC - 718659742201

Add to My Manuals
Save this manual to your list of manuals

Page 22 highlights

Typographical conventions The following typographical conventions are used in this guide: • Code font indicates HTML tag and attribute names as well as literal text used in examples. • Italic code font indicates replaceable items (sometimes called metasymbols) in code. • Bold roman text indicates text for you to enter verbatim. What's new in Dreamweaver 4 The new features in Dreamweaver 4 enhance HTML editing, make it easier to design pages, improve site and asset management, let you create your own Flash objects, streamline your workflow, improve team collaboration, and allow you to customize and extend Dreamweaver. Enhanced code editing The Dreamweaver toolbar allows you to manage how you view a page-Design view, Code view, or a view of both code and design. The toolbar provides easy access to commonly used features such as Preview in Browser and Design Notes. See "Using the toolbar" on page 78 Code view provides a new way to view HTML source code directly in the Dreamweaver Document window. See "Opening the Code view (or Code inspector)" on page 331. You can also edit non-HTML documents such as JavaScript files and XML files directly in the Dreamweaver Code view. See "Inserting scripts" on page 335. Integrated code editors Dreamweaver now has integrated, state-of-the-art code editors-the Code view and the Code inspector. You can set word wrapping, code indenting, live syntax coloring, and more from the Options menu in either of these editors. See "Setting Code view (or Code inspector) options" on page 333. The Reference panel is a quick reference tool for HTML, JavaScript, and CSS. It provides information about the specific tags you are working with in the Code view (or Code inspector). See "Using the Dreamweaver Reference panel" on page 328. The Code Navigation pop-up menu allows you to select code for JavaScript functions in a page; by using this menu, you can quickly navigate JavaScript code while working in Code view. See "Viewing script functions" on page 337. The JavaScript Debugger lets you debug JavaScript document while in Dreamweaver. For example, you can set breakpoints to control the code you want to examine. See "Debugging JavaScript Code" on page 473. 22 Introduction

Section	Page
Contents	3
Getting Started	11
System requirements	12
Installing Dreamweaver	12
Learning Dreamweaver	13
Guided Tour movies	13
Tutorial	13
Dreamweaver lessons	13
Dreamweaver user guide (printed book)	14
Dreamweaver Help	14
Extending Dreamweaver	16
Dreamweaver Support Center	16
Dreamweaver discussion group	16
Web development workflow	17
About site Planning	17
About designing Web pages	18
About adding content	18
About interactivity and animation	19
About testing and publishing your site	20
Where to start	20
Typographical conventions	22
What’s new in Dreamweaver 4	22
Enhanced code editing	22
Easier page design	23
Improved integration	23
Streamlining your workflow	24
Common user interface	24
HTML and Web technologies resources	25
Accessibility and Dreamweaver	26
Dreamweaver Tutorial	27
Take a guided tour of Dreamweaver	28
The Dreamweaver work area	28
Working in Dreamweaver	29
How the tutorial files are arranged	29
Preview the completed Web site	30
Set up the site structure for the tutorial	31
Define a local site	31
Create the site home page	34
Save your document	34
Define the document page title	35
Design a page in Layout view	35
Work in Layout view	36
Draw layout cells	37
Resize layout cells	38
Add multiple layout cells	39
Move a layout cell	40
Group cells in a layout table	40
Move the layout table	41
Add another layout cell	42
Create a layout table	42
Draw layout cells in a table	43
Add content to the page	44
Insert images	44
Create a rollover image	45
Create the other rollover images	46
Preview your document	47
Insert text	48
Format text	48
Apply color and style	49
Work in Standard view	50
Set cell properties	50
Selecting a table	51
Set table properties	51
Add cell padding	52
View the site files	52
Link your documents	54
Test your page	56
Use the Assets panel	56
Select a new document	56
View site assets	57
Insert an image	58
Insert a Flash movie	58
Apply a color using the Assets panel	59
Create a favorite assets list	59
Add multiple images to favorites	60
View favorite assets	60
Insert Flash objects	60
Create a Flash Text object	61
View the Flash Text object in the document	62
Create a Flash button object	62
View the Flash button in the document	63
Create a template	63
Create a template from an existing page	64
Modify the template	64
Apply the template to a new page	66
Editing a template-based page	67
Check your site	68
Create a Design Note	68
Sitewide reports	70
The next steps	70
Dreamweaver Basics	71
About the Dreamweaver work area	72
About the different views in Dreamweaver	73
Working with the Code view	73
Working with the Design view	73
About the Document window	74
Resizing the Document window	75
Minimizing and restoring windows and panels (PC users only)	76
Setting Status Bar preferences	76
Using the Launcher bar	77
Customizing the Launcher bar	77
Using the toolbar	78
Using context menus	79
Using the Objects panel	80
Using the Property inspector	82
Using dockable floating panels	82
Setting Panels preferences	83
About the History panel	84
Using the History panel	84
Using other Dreamweaver panels	86
Working with colors	87
About Web-safe colors	88
Setting preferences	88
Setting General preferences	88
Setting Fonts/Encoding preferences	89
Using Dreamweaver with other applications	89
Basic Customizing in Dreamweaver	90
Using the Keyboard Shortcut Editor	90
Adding extensions to Dreamweaver	93
Planning and Setting Up Your Site	95
About site planning and design	95
Determining your goals	96
Choosing a target audience	96
Creating sites for browser compatibility	97
Organizing the site structure	98
Creating your design look	100
Designing the navigation scheme	100
Planning and gathering your assets	101
Using Dreamweaver to set up a new site	102
Editing an existing Web site	104
Editing a remote site	105
Removing a site from your list of sites	106
Site Management and Collaboration	107
About the Site window	108
Using Site window controls	108
Setting Site preferences	110
Viewing and opening files in the Sitewindow	112
Viewing local sites	112
Changing Site window layout	114
Working with files in the Site Files view	115
About the site map	116
Using the site map	117
Modifying the site map layout	118
Working with pages in the site map	119
Showing and hiding site map files	121
Viewing the site from a branch	122
Saving the site map	122
Finding files in the Site window	122
Setting up a remote site	123
Associating a remote server with a local site	124
Determining the remote site’s host directory (FTP only)	126
About WebDAV and SourceSafe integration	127
Using Dreamweaver with the WebDAV protocol	127
Using Dreamweaver with Visual SourceSafe	128
Troubleshooting remote site setup	130
Using Check In/Check Out	131
Setting up the Check In/Check Out system	132
Checking in and checking out files on a remote server	133
About Design Notes	134
Saving file information in Design Notes	135
Using file view columns with Design Notes	138
Using Design Notes in Fireworks and Dreamweaver	140
Using reports to improve workflow	141
Getting and putting files	143
Getting files from a remote server	143
Putting files onto a remote server	144
Synchronizing the files on your local and remote sites	146
Setting Up a Document	149
Creating, opening, and saving HTMLdocuments	150
Setting document properties	152
Changing the title of a page	152
Defining a background image or page color	153
Defining default text colors	153
Selecting elements in the Documentwindow	154
About invisible elements	156
Setting Invisible Elements preferences	156
Using visual guides in the design process	157
Displaying rulers	157
Using a tracing image	158
Viewing and editing head content	159
About automating tasks	160
Repeating steps	161
Applying steps to another object	162
Applying steps to multiple objects	162
Copying and pasting steps between documents	164
Creating new commands from history steps	165
Recording commands	166
Designing Page Layout	167
About layout cells and tables	169
Drawing layout cells and tables	170
Drawing a nested layout table	173
Using the Dreamweaver grid	174
Adding content to a cell	174
Clearing automatic cell heights	175
Moving and resizing layout cells and tables	176
Formatting layout cells and tables	177
Formatting a layout cell	177
Formatting layout tables	178
Setting layout width	179
Using spacer images	181
Setting Layout View preferences	182
Using Tables to Present Content	183
Inserting a table	184
Adding content to a table cell	185
Importing table data	186
Selecting table elements	187
Formatting tables and cells	189
About table tags	189
Setting table properties	190
Setting column, row, and cell properties	191
Using a design scheme to format a table	193
Resizing tables and cells	194
Changing column widths	194
Resetting width and height	195
Adding and removing rows and columns	196
Nesting tables	197
Splitting and merging cells	198
Copying and pasting cells	199
Sorting tables	201
Exporting table data	202
Using Frames	203
Deciding whether to use frames	204
About creating frame-based Web pages	205
Creating frames	206
Inserting a predefined frameset	206
Designing and inserting a frameset	207
Creating a nested frameset	208
Selecting a frame or frameset	208
Using the Frames panel	209
Selecting a frame or frameset in the Document window	210
Saving frame and frameset files	211
About frame and frameset properties	212
Setting frame properties	212
Setting frameset properties	214
Naming a frameset document	215
Specifying frame sizes	216
Setting frame and frameset borders	217
Changing the background color of a frame	217
Controlling frame content with links	218
Handling browsers that can’t display frames	219
Using behaviors with frames	220
Managing and Inserting Assets	221
Using the Assets panel	222
Adding an asset to a page	225
Changing the order of assets	226
Selecting and editing assets	227
Working with assets and sites	228
Using favorite assets	229
Adding assets to and removing assets from the Favorites list	229
Creating a nickname for a favorite asset	230
Grouping assets in a Favorites folder	231
Creating a new color, URL, template, or library item	231
Inserting and Formatting Text	233
Inserting text and objects	234
Inserting dates	235
About special characters	236
Inserting special text characters	236
Copying and pasting HTML source code in Dreamweaver	237
Creating lists	237
Setting fonts, styles, color, and alignment	238
Setting and changing fonts and styles	239
Using paragraphs and headings	240
Changing the text color	240
Aligning text	241
Modifying font combinations	242
Using horizontal rules	243
Using HTML styles to format text	244
Using HTML styles	244
Using CSS style sheets	248
About CSS style properties	250
Creating and linking to an external CSS style sheet	250
Editing an external CSS style sheet	252
Creating a CSS style in Dreamweaver	252
Applying a custom (class) CSS style	254
Exporting styles to create a CSS style sheet	254
About conflicting styles	255
Using the CSS Styles panel	255
Setting CSS Styles preferences	256
Converting CSS styles to HTML tags	256
CSS to HTML markup conversion table	257
Checking spelling	258
Running a spell check using the Check Spelling dialog box	258
Searching and replacing text, tags, andattributes	258
About HTML source code searches	260
Searching for HTML tags and attributes	260
Searching for text contained in specific tags	262
Saving search patterns	263
About regular expressions	264
Inserting Images	267
Inserting an image	268
Setting image properties	269
Aligning elements	271
Resizing images and other elements	272
Creating image maps	273
Setting hotspot properties	274
Modifying an image map	275
Creating a rollover image	276
Using an external image editor	277
Setting external image editor preferences	278
Launching an external image editor	280
Applying behaviors to images	280
Using Dreamweaver and FireworksTogether	281
Getting Fireworks files into Dreamweaver	282
Placing Fireworks images in Dreamweaver	282
Inserting Fireworks HTML code into Dreamweaver	282
Copying and pasting Fireworks HTML into Dreamweaver	283
Exporting Fireworks files to Dreamweaver	284
Launching Fireworks from within Dreamweaver	285
Designating Fireworks as the primary external image editor for Dreamweaver	286
About Design Notes and source files	287
Specifying launch-and-edit preferences for Fireworkssourcefiles	287
Editing Fireworks files placed in Dreamweaver	288
Editing Fireworks images	288
Editing Fireworks tables	289
Optimizing Fireworks images and animations placed in Dreamweaver	290
Resizing placed Fireworks images	291
Editing placed Fireworks animations	292
Updating Fireworks HTML placed in Dreamweaver	293
Creating Web photo albums	293
Inserting Media	297
Inserting media objects	297
Launching an external editor	298
Using Design Notes with media objects	300
About Flash content	300
Using Flash button objects	301
Using Flash text objects	304
Setting Flash object properties	305
Creating new button templates	306
Inserting Flash movies	307
Setting Flash movie properties	308
Inserting Generator objects	309
About Shockwave movies	310
Inserting Shockwave movies	310
Setting Shockwave properties	310
Adding sound to a page	311
About audio file formats	311
Linking to an audio file	312
Embedding audio	313
Inserting Netscape Navigator plugin content	313
Setting Netscape Navigator plugin properties	314
Playing plugins in the Document window	315
Troubleshooting Navigator plugins	315
Inserting an ActiveX control	316
Setting ActiveX properties	316
Inserting a Java applet	318
Setting Java applet properties	318
Using parameters	319
Using behaviors to control media	320
Editing HTML in Dreamweaver	321
Understanding basic HTML tags	322
Structure of a document	322
Head tags	323
Body tags	324
Text formatting tags	326
Inserting comments	327
Using the Dreamweaver Reference panel	328
About Roundtrip HTML	329
Using the Code view (or Code inspector)	330
Opening the Code view (or Code inspector)	331
Setting Code view (or Code inspector) options	333
Writing and editing code	334
Inserting scripts	335
Editing a script	336
Viewing script functions	337
Opening and editing non-HTML files in Dreamweaver	338
Editing an HTML tag in the Design view	338
Using the hints menu	341
Removing a tag	342
Setting Quick Tag Editor preferences	342
Setting code formatting preferences	343
Setting Code Colors preferences	343
Setting Code Format preferences	344
Setting Code Rewriting preferences	346
Cleaning up HTML source code	347
Formatting the HTML source code in existing documents	348
Cleaning up Microsoft Word HTML	348
Using external HTML editors	350
Using an external text editor with Dreamweaver	350
Using BBEdit with Dreamweaver (Macintosh only)	351
Editing ColdFusion and Active Server files in Dreamweaver	352
Linking and Navigation	353
About document locations and paths	354
Absolute paths	354
Document-relative paths	355
Root-relative paths	357
Creating links	358
Linking documents using the Property inspector and the Point-to-File icon	359
Linking to a specific place within a document	362
Creating an e-mail link	364
Creating null and script links	365
Managing links	366
Creating and modifying links in the site map	367
Changing a link sitewide	368
Creating jump menus	369
Inserting a jump menu	369
Editing jump menu items	370
Troubleshooting jump menus	370
Creating navigation bars	371
Inserting a navigation bar	372
Modifying a navigation bar	374
Attaching behaviors to links	374
Reusing Content with Templates andLibraries	375
Creating templates	377
Setting template page properties	379
About links in templates	380
Defining a template’s editable regions	381
Setting template preferences	383
Viewing editable and locked regions	384
Viewing editable and locked HTML source code	386
Locking an editable region	387
Using styles, timelines, behaviors, and head tags in templates	388
Creating documents based on templates	388
Finding a document’s editable regions	390
Detaching a document from a template	391
Updating pages based on a template	391
Exporting and importing XML content	392
About XML	394
Using XML tag notations	395
Creating, managing, and editing libraryitems	396
Creating a library item	396
Setting library preferences	397
Inserting a library item in a document	398
Making changes to a library item	398
Making library items editable in a document	401
Editing a behavior in a library item	401
Setting Library item properties	403
Using server-side includes	404
Editing the contents of a server-side include	406
Using Dynamic Layers	407
About layers and HTML code	408
Creating layers on your page	409
About the Layers panel	410
Nesting layers	411
Setting Layers preferences	412
Manipulating layers	412
Selecting layers	413
Resizing layers	414
Moving layers	415
Aligning layers	415
Snapping layers to the grid	416
Making layers active	416
Setting layer properties	417
Setting properties for multiple layers	419
Changing the stacking order of layers	420
Changing layer visibility	420
Using tables and layers for layout	421
Converting between layers and tables	422
Preventing layer overlaps	423
Converting to 3.0 version compatibility	424
Animating your layers	425
Using the Timelines panel	425
Playback options	426
Creating a timeline animation	427
Creating a timeline by dragging a path	428
Modifying timelines	429
Changing image and layer properties with timelines	430
Using multiple timelines	431
Copying and pasting animations	431
Applying an animation sequence to a different object	432
Animation tips for timelines	433
Behavior actions for controlling layerstimelines	434
Using Behaviors	435
Using the Behaviors panel	436
About events	436
Attaching a behavior	439
About behaviors and text	441
Attaching a behavior to a timeline	442
Changing a behavior	442
Updating a behavior	443
Creating new actions	443
Downloading and installing thirdpartybehaviors	443
Using the behavior actions that come withDreamweaver	444
Call JavaScript	446
Change Property	446
Check Browser	447
Check Plugin	449
Control Shockwave or Flash	450
Drag Layer	451
Gathering information about the draggable layer	453
Go to URL	454
Jump Menu	455
Jump Menu Go	456
Open Browser Window	456
Play Sound	458
Popup Message	458
Preload Images	459
Set Nav Bar Image	460
Set Text of Frame	461
Set Text of Layer	462
Set Text of Status Bar	463
Set Text of Text Field	464
Show-Hide Layers	465
Swap Image	467
Swap Image Restore	468
Go to Timeline Frame	468
Play Timeline and Stop Timeline	469
Validate Form	470
Debugging JavaScript Code	473
Running the debugger	474
Finding syntax errors	475

Match case Limit results 1 per page

Introduction

Typographical conventions

The following typographical conventions are used in this guide:

•

Code font

indicates HTML tag and attribute names as well as literal text

used in examples.

•

Italic code font

indicates replaceable items (sometimes called

metasymbols

) in code.

•

Bold roman text

indicates text for you to enter verbatim.

What’s new in Dreamweaver 4

The new features in Dreamweaver 4 enhance HTML editing, make it easier to

design pages, improve site and asset management, let you create your own Flash

objects, streamline your workﬂow, improve team collaboration, and allow you to

customize and extend Dreamweaver.

Enhanced code editing

The Dreamweaver toolbar

allows you to manage how you view a page—Design

view, Code view, or a view of both code and design. The toolbar provides easy

access to commonly used features such as Preview in Browser and Design Notes.

See “Using the toolbar” on page 78

Code view

provides a new way to view HTML source code directly in the

Dreamweaver Document window. See “Opening the Code view (or Code

inspector)” on page 331. You can also edit non-HTML documents such as

JavaScript ﬁles and XML ﬁles directly in the Dreamweaver Code view. See

“Inserting scripts” on page 335.

Integrated code editors

Dreamweaver now has integrated, state-of-the-art code

editors—the Code view and the Code inspector. You can set word wrapping, code

indenting, live syntax coloring, and more from the Options menu in either of

these editors. See “Setting Code view (or Code inspector) options” on page 333.

The Reference panel

is a quick reference tool for HTML, JavaScript, and CSS. It

provides information about the speciﬁc tags you are working with in the Code view

(or Code inspector). See “Using the Dreamweaver Reference panel” on page 328.

The Code Navigation pop-up menu

allows you to select code for JavaScript

functions in a page; by using this menu, you can quickly navigate JavaScript code

while working in Code view. See “Viewing script functions” on page 337.

The JavaScript Debugger

lets you debug JavaScript document while in

Dreamweaver. For example, you can set breakpoints to control the code you want

to examine. See “Debugging JavaScript Code” on page 473.