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

Adobe 38040334 User Guide - Page 172

View CSS layout blocks, Use visual aids with non-CSS layout block elements, CSS Layout, utlines

UPC - 883919090467

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

Page 172 highlights

DREAMWEAVER CS3 165 User Guide Dreamweaver provides a number of visual aids for viewing CSS layout blocks. For example, you can enable outlines, backgrounds, and the box model for CSS layout blocks while you design. You can also view tooltips that display properties for a selected CSS layout block when you float the mouse pointer over the layout block. The following list of CSS layout block visual aids describes what Dreamweaver renders as visible for each: CSS Layout Outlines Displays the outlines of all CSS layout blocks on the page. CSS Layout Backgrounds Displays temporarily assigned background colors for individual CSS layout blocks, and hides any other background colors or images that normally appear on the page. Whenever you enable the visual aid to view CSS layout block backgrounds, Dreamweaver automatically assigns each CSS layout block a distinct background color. (Dreamweaver selects the colors using an algorithmic process-there is no way for you to assign the colors yourself.) The assigned colors are visually distinctive, and are designed to help you differentiate between CSS layout blocks. CSS Layout Box Model Displays the box model (that is, padding and margins) of the selected CSS layout block. View CSS layout blocks You can enable or disable CSS layout block visual aids as necessary. View CSS layout block outlines ❖ Select View > Visual Aids > CSS Layout Outlines. View CSS layout block backgrounds ❖ Select View > Visual Aids > CSS Layout Backgrounds. View CSS layout block box models ❖ Select View > Visual Aids > CSS Layout Box Model. You can also access CSS layout block visual aid options by clicking the Visual Aids button on the Document toolbar. Use visual aids with non-CSS layout block elements You can use a Design-time style sheet to display the backgrounds, borders, or box model for elements that aren't normally considered CSS layout blocks. To do so, you must first create a Design-time style sheet that assigns the display:block attribute to the appropriate page element. 1 Create an external CSS style sheet by selecting File > New, selecting Basic page in the Category column, selecting CSS in the Basic page column, and clicking Create. 2 In the new style sheet, create rules that assign the display:block attribute to the page elements you want to display as CSS layout blocks. For example, if you wanted to display a background color for paragraphs and list items, you could create a style sheet with the following rules: p{ display:block; } li{ display:block; } 3 Save the file. September 4, 2007

Section	Page
Contents	3
Chapter 1: Getting started	8
Installation	8
Requirements	8
Install the software	8
Activate the software	8
Register	8
Adobe Help	9
Adobe Help resources	9
Using Help in the product	10
Choosing the right Help documents	11
Resources	12
Adobe Video Workshop	12
Dreamweaver CS3 videos	13
Extras	14
Bridge Home	15
Adobe Design Center	16
Adobe Developer Center	17
Customer support	17
Downloads	17
Adobe Labs	18
User communities	18
What’s new	18
Top new features of Adobe Dreamweaver CS3	18
Chapter 2: Workspace	20
Dreamweaver workflow and workspace	20
Dreamweaver workflow overview	20
Workspace layout overview	21
Workspace elements overview	23
Document window overview	24
Document toolbar overview	24
Standard toolbar overview	25
Status bar overview	25
Insert bar overview	26
Coding toolbar overview	27
Style Rendering toolbar overview	28
Property inspector overview	29
Files panel overview	29
CSS Styles panel overview	30
Visual guides overview	31
GoLive users	31
Working in the Document window	31
Switch between views in the Document window	31
Cascade or tile Document windows	32
Resize the Document window	32
Set window size and connection speed	33
Reports in Dreamweaver	33
Using toolbars, inspectors, context menus, and panels	34
Display toolbars	34
Use the Insert bar	35
Use the Property inspector	37
Use context menus	37
About panel groups	38
View panels and panel groups	38
Dock and undock panels and panel groups	39
Resize and rename panel groups	40
Saving panel groups	41
Customizing the Dreamweaver CS3 workspace	41
Choose the workspace layout (Windows)	41
Choose the workspace layout (Macintosh)	41
Display tabbed documents (Macintosh)	41
Save custom workspace layouts	42
Hide and display the Welcome screen	42
About customizing Dreamweaver in multiuser systems	43
Set General preferences for Dreamweaver	43
Set Fonts preferences for documents in Dreamweaver	45
Customize Highlighting colors	45
Chapter 3: Working with Dreamweaver sites	47
Setting up a Dreamweaver site	47
About Dreamweaver sites	47
Understanding local and remote folder structure	48
Using the Manage Sites dialog box	48
Set up and edit a local root folder	49
Set up a remote folder	50
Troubleshoot the remote folder setup	54
Set up a testing server	55
About the URL prefix for the testing server	56
Edit an existing remote website in Dreamweaver	57
Remove a Dreamweaver site from your list of sites	58
Import and export site settings	58
Working with a visual map of your site	59
Using site maps	59
Show or hide site map files	61
Save the site map as an image	62
Set site map layout preferences	62
Managing Contribute sites with Dreamweaver	63
Managing Contribute sites	63
Site structure and page design for a Contribute site	64
File transfer to and from a Contribute site	64
Contribute file and folder permissions on the server	65
Contribute special files	65
Prepare a site for use with Contribute	66
Administer a Contribute site using Dreamweaver	67
Delete, move, or rename a remote file in a Contribute site	68
Enable Contribute users to access templates without root folder access	68
Troubleshoot a Contribute site	68
Working on files without defining a site	69
Connect to an FTP server without defining a site	69
Connect to an RDS server without defining a site	70
Basic tab options	71
Set Basic tab Editing Files options	71
Set Basic tab Editing Files Part 2 options	71
Set Basic tab Editing Files Part 3 options	71
Set Basic tab Testing Files options (URL prefix)	72
Set Basic tab Testing Files options (remote access)	72
Set Basic tab remote folder setup options	73
Set Basic tab Sharing Files options (remote access)	73
Set Basic tab Sharing Files options (check in/check out)	74
Basic tab Summary options	74
Chapter 4: Creating and managing files	75
Creating and opening documents	75
About creating Dreamweaver documents	75
Dreamweaver file types	75
Create a blank page	76
Create a blank template	77
Create a page based on an existing template	79
Create a page based on a Dreamweaver sample file	80
Create other kinds of pages	81
Set default document type and encoding	81
Set the default file extension of new HTML documents	82
Open and edit existing documents	82
Clean up Microsoft Word HTML files	83
Managing files and folders	84
About managing files and folders	84
Using the Files panel	84
View files and folders	86
Work with files in the Files panel	87
Find files in your Dreamweaver site	89
Identify and delete unused files	90
Access sites, a server, and local drives	90
Set site preferences for transferring files	92
Customize the file and folder details displayed in the expanded Files panel	93
Getting and putting files to and from your server	94
File transfer and dependent files	94
About background file transfers	94
Get files from a remote server	95
Put files on a remote server	96
Manage file transfers	97
Checking in and checking out files	98
About the Check In/Check Out system	98
Set up the Check In/Check Out system	98
Use WebDAV to check in and check out files	99
Check files into and out of a remote folder	100
Synchronizing files	101
Synchronize the files on your local and remote sites	101
Comparing files for differences	103
Compare local and remote files for differences	103
Compare before putting files	105
Compare files when synchronizing	105
Rolling back files (Contribute users)	106
Roll back files (Contribute users)	106
Cloaking folders and files in your site	106
About site cloaking	106
Enable and disable site cloaking	107
Cloak and uncloak site folders	107
Cloak and uncloak specific file types	107
Uncloak all folders and files	108
Storing file information in Design Notes	109
About Design Notes	109
Enable and disable Design Notes for a site	109
Associate Design Notes with files	110
Work with Design Notes	110
Testing your site	111
Site testing guidelines	111
Use reports to test your site	113
Chapter 5: Managing assets and libraries	115
About assets and libraries	115
About assets	115
About library items	115
Working with assets	116
Assets panel overview	116
Add an asset to a document	118
Apply a color to text using the Assets panel	119
Apply a URL to an image or text using the Assets panel	119
Select and edit assets	119
Reuse assets in another site	120
Creating and managing a list of favorite assets	121
Managing favorite assets	121
Add or remove favorite assets	121
Create a nickname for a favorite asset	122
Group assets in a Favorites folder	122
Working with library items	123
Create a library item	123
Insert a library item into a document	123
Edit library items and update documents	124
Customize highlighting of library items	125
Edit the properties of a library item	125
Make library items editable in a document	126
Edit a behavior in a library item	126
Chapter 6: Creating pages with CSS	127
Understanding Cascading Style Sheets	127
About Cascading Style Sheets	127
About CSS rules	127
About cascading styles	129
About text formatting and CSS	130
About Shorthand CSS properties	130
Creating and managing CSS	131
About the CSS Styles panel	131
The CSS Styles panel in Current mode	132
The CSS Styles panel in All mode	134
CSS Styles panel buttons and views	134
Open the CSS Styles panel	135
Set CSS Styles preferences	135
Create a new CSS rule	136
Set CSS properties	136
Edit a CSS rule	142
Add a property to a rule	143
Apply, remove, or rename class styles	143
Move CSS rules	144
Convert inline CSS to a CSS rule	145
Link to an external CSS style sheet	146
Edit a CSS style sheet	147
Format CSS code	147
Check for cross-browser CSS rendering issues	148
Use Design-Time style sheets	150
Use Dreamweaver sample style sheets	151
Update CSS style sheets in a Contribute site	151
Laying out pages with CSS	152
About CSS page layout	152
About CSS page layout structure	152
Create a page with a CSS layout	156
About AP elements in Dreamweaver	158
HTML code for AP Div elements	158
Insert an AP Div	159
Work with nested AP Divs	160
View or set AP element preferences	161
View or set properties for a single AP element	162
View or set properties for multiple AP elements	163
AP Elements panel overview	164
Select AP elements	164
Change the stacking order of AP elements	165
Show and hide AP elements	165
Resize AP elements	166
Move AP elements	167
Align AP elements	167
Converting AP elements to tables	167
Convert between AP elements and tables	168
Prevent AP element overlaps	168
Working with div tags	169
About working with div tags	169
Insert div tags	169
Edit div tags	170
Change the highlight color of div tags	171
Visualizing CSS layout blocks	171
View CSS layout blocks	172
Use visual aids with non-CSS layout block elements	172
Animating AP elements	173
About animating AP elements	173
Timelines panel overview	173
Playback options	174
Animate an AP element using the timeline	175
Create a timeline by dragging a path	175
Modify a timeline	176
Change image and AP element properties with timelines	176
Use multiple timelines	177
Copy and paste animations	177
Apply an animation sequence to a different object	178
Rename the timeline	178
Animation tips for timelines	178
Chapter 7: Laying out pages with HTML	180
Using visual aids for layout	180
Set rulers	180
Set layout guides	180
Using guides with templates	181
Use the layout grid	182
Use a tracing image	182
Presenting content with tables	183
About tables	183
Table formatting precedence in HTML	184
About splitting and merging table cells	184
Insert a table and add content	185
Import and export tabular data	185
Select table elements	187
Set table properties	188
Set cell, row, or column properties	189
Use Expanded Tables mode for easier table editing	190
Format tables and cells	191
Resizing tables, columns, and rows	192
Resize tables, columns, and rows	192
Add and remove rows and columns	194
Split and merge cells	194
Copy, paste, and delete cells	196
Nest tables	197
Sort tables	197
Laying out pages in Layout mode	198
About Layout mode	198
Viewing table and cell widths in Layout mode	199
Layout table and cells grid lines	199
Fixed column width and autostretch columns	200
Spacer images	200
Switch from Standard to Layout mode	200
Draw in Layout mode	201
Add content to a layout cell	203
Clear cell heights	203
Resize and move layout cells and tables	204
Format layout cells and tables	205
Set column width	206
Set preferences for Layout mode	208
Using Frames	208
How frames and framesets work	208
Deciding whether to use frames	210
Nested framesets	211
Work with framesets in the Document window	211
Create frames and framesets	212
Select frames and framesets	214
Open a document in a frame	215
Save frame and frameset files	215
View and set frame properties and attributes	216
View and set frameset properties	217
Control frame content with links	219
Provide content for browsers without frame support	219
Using JavaScript behaviors with frames	220
Chapter 8: Adding content to pages	221
Working with pages	221
About working with pages	221
About setting page properties	221
CSS versus HTML page properties	221
Converting active content	222
Understanding document encoding	223
Set page properties	223
Select and view elements in the Document window	226
Specify HTML instead of CSS	228
Set the HTML Appearance page properties	229
Web-safe colors	229
Use the color picker	230
Zoom in and out	230
Using JavaScript behaviors to detect browsers and plug-ins	231
Set download time and size preferences	232
Set browser preview preferences	232
Save and revert web pages	232
Adding and formatting text	233
About inserting text	233
Add text to a document	233
Insert special characters	234
Add space between characters	234
Create bulleted and numbered lists	235
Search for and replace text	236
Define abbreviations and acronyms	239
Set copy and paste preferences	239
Check and correct spelling	240
Import tabular data	241
Import Microsoft Office documents (Windows only)	241
Create a link to a Word or Excel document	242
About formatting text (CSS versus HTML)	242
Using the Property inspector to format text	243
Set text properties in the Property inspector	244
Format paragraphs	246
Change the color of text	246
Align text	247
Indent text	247
Add paragraph spacing	247
Use horizontal rules	248
Apply font styles	248
Rename a style	249
Modify font combinations	249
Insert dates	250
Adding and modifying images	250
About images	250
Insert an image	251
Edit images in Dreamweaver	254
Insert an image placeholder	254
Set image placeholder properties	255
Replace an image placeholder	256
Align an image	256
Visually resize an image	257
Crop an image	258
Optimize an image	258
Adjust the brightness and contrast of an image	258
Sharpen an image	259
Create a rollover image	259
Use an external image editor	260
Applying behaviors to images	262
Inserting Flash content	262
About Flash file types	262
Insert and preview Flash content	263
Create and insert a Flash button	264
Modify a Flash button object	265
Preview a Flash button object in the document	267
Insert a Flash text object	267
Downloading and installing Flash elements	267
Insert Flash elements	268
Edit Flash elements	268
Use the Image Viewer Flash element	269
Insert FlashPaper documents	271
Adding Flash Video content	271
Insert Flash Video	271
Detect the Flash Player version to view the Flash Video	275
Edit or delete a Flash Video component	275
Adding Sound	276
Audio file formats	276
Link to an audio file	277
Embed a sound file	277
Adding other media objects	277
Insert and edit media objects	277
Start an external editor for media files	278
Specify the editor to start from Dreamweaver	279
Use Design Notes with media objects	280
Insert Shockwave movies	280
Add video (non-Flash)	280
Insert Netscape Navigator plug-in content	281
Troubleshooting Netscape Navigator plug-ins	282
Insert an ActiveX control	282
Insert a Java applet	283
Using behaviors to control media	284
Use parameters to control media objects	284
Chapter 9: Linking and navigation	286
About linking and navigation	286
About links	286
Document locations and paths	286
Absolute paths	287
Document-relative paths	287
Site root-relative paths	288
Linking	288
Linking files and documents	288
Attaching JavaScript behaviors to links	289
Link to documents using the Property inspector	289
Link to documents using the Point-To-File icon	290
Link documents using the site map	290
Add a link using the Hyperlink command	291
Set the relative path of new links	291
Link to a specific place in a document	292
Create an e-mail link	293
Create null and script links	294
Update links automatically	294
Manage links in the site map	295
Change a link sitewide	296
Test links in Dreamweaver	296
Jump menus	297
About jump menus	297
Insert a jump menu	297
Edit jump menu items	298
Troubleshooting jump menus	298
Navigation bars	298
About navigation bars	298
Insert a navigation bar	299
Modify a navigation bar	300
Image maps	300
About image maps	300
Insert client-side image maps	300
Modify image map hotspots	301
Troubleshooting links	302
Find broken, external, and orphaned links	302
Fix broken links	303
Chapter 10: Previewing pages	305
Previewing pages in browsers	305
Preview in a browser	305
Preview active content in Internet Explorer (Windows)	306
Designate browsers for previewing	306
Previewing pages in mobile devices	307
Preview mobile content with Adobe Device Central and Dreamweaver	307
Chapter 11: Working with page code	308
About coding in Dreamweaver	308
Supported languages	308
About fixing invalid markup	308
Automatic code modification in Dreamweaver	309
About the XHTML code generated by Dreamweaver	309
About regular expressions	311
About server behavior code	313
Setting up your coding environment	314
Changing your coding environment	314
Viewing code	314
Using the coder-oriented workspace (Windows only)	315
Customizing keyboard shortcuts	315
Open files in Code view by default	315
Customizing the coding environment	315
About coding preferences	315
Set the code appearance	316
Change the code format	316
Set the code hints	318
Set the code rewriting preferences	318
Set the code colors	319
Use an external editor	320
Writing and editing code	320
Use code hints	320
Edit a server-language tag with the Property inspector	321
Work with code snippets	322
Insert code with the Coding toolbar	323
Insert code with the Insert bar	325
Insert tags with the Tag Chooser	325
Edit tags with Tag editors	326
Indent code blocks	326
Copy and paste code	326
Insert HTML comments	326
Go to a JavaScript or VBScript function	327
Search for tags, attributes, or text in code	327
Save and recall search patterns	328
Change code selections	328
Use language-reference material	330
Print code	330
Collapsing code	331
About collapsing code	331
Collapse and expand code fragments	331
Paste and move collapsed code fragments	332
Optimizing and debugging code	333
Find coding errors with the Validator	333
Clean up code	333
Verify tags and braces are balanced	334
Check for browser compatibility	335
Validate tags	335
Make pages XHTML-compliant	335

Match case Limit results 1 per page

DREAMWEAVER CS3

User Guide

165

Dreamweaver provides a number of visual aids for viewing CSS layout blocks. For example, you can enable outlines,

backgrounds, and the box model for CSS layout blocks while you design. You can also view tooltips that display

properties for a selected CSS layout block when you float the mouse pointer over the layout block.

The following list of CSS layout block visual aids describes what Dreamweaver renders as visible for each:

CSS Layout

utlines

Displays the outlines of all CSS layout blocks on the page.

CSS Layout Backgrounds

Displays temporarily assigned background colors for individual CSS layout blocks, and

hides any other background colors or images that normally appear on the page.

Whenever you enable the visual aid to view CSS layout block backgrounds, Dreamweaver automatically assigns each

CSS layout block a distinct background color. (Dreamweaver selects the colors using an algorithmic process—there

is no way for you to assign the colors yourself.) The assigned colors are visually distinctive, and are designed to help

you differentiate between CSS layout blocks.

CSS Layout Box Model

Displays the box model (that is, padding and margins) of the selected CSS layout block.

View CSS layout blocks

You can enable or disable CSS layout block visual aids as necessary.

View CSS layout block outlines

❖

Select View > Visual Aids > CSS Layout Outlines.

View CSS layout block backgrounds

❖

Select View > Visual Aids > CSS Layout Backgrounds.

View CSS layout block box models

❖

Select View > Visual Aids > CSS Layout Box Model.

You can also access CSS layout block visual aid options by clicking the Visual Aids button on the Document toolbar.

Use visual aids with non-CSS layout block elements

You can use a Design-time style sheet to display the backgrounds, borders, or box model for elements that aren’t

normally considered CSS layout blocks. To do so, you must first create a Design-time style sheet that assigns the

display:block

attribute to the appropriate page element.

Create an external CSS style sheet by selecting File > New, selecting Basic page in the Category column, selecting

CSS in the Basic page column, and clicking Create.

In the new style sheet, create rules that assign the

display:block

attribute to the page elements you want to

display as CSS layout blocks.

For example, if you wanted to display a background color for paragraphs and list items, you could create a style sheet

with the following rules:

display:block;

}

li{

display:block;

}

Save the file.

September 4, 2007