Help and tutorials - Adobe

1. Open Dreamweaver. 2. Select Help > Updates. 3. In the Adobe Application Manager, select the Dreamweaver update. 4. Click Update. After you upgrade Enable previously installed extensions If you upgrade from Dreamweaver CS6 to Creative Cloud, your previously installed extensions do not appear in Dreamweaver menus.


Texto en PDF

ADOB DREAMWEAVERHelp and tutorials
ADOBE ONLOCATION CS4ϢʔβΨΠυ
ADOBE ONLOCATION CS4
ADOBE ONLOCATION CS4Do we like to use TW chinese font which matchthe weight? (although it is not recommended to use*bold* for TW character which can be condensed.
ADOBE ONLOCATION CS4
Please make sure to hide or remove this production note layer (or its contents)before you nalize the art.Please do not change the placement of text box (2 lines, 3 lines layers), Adobe logo (Adobe Logo layer), and Page size invisible box (page size layer). It is set to t book title text and logo in good position when the image is imported to 8.5 by 10.875 FrameMaker templat both GEP and Non-GEP. Please see PDF output for positioning sample.
Page size invisible box is on “page size” layer and shouldnot be touched.Adobe Logos are on “Adobe Logo” (for title page without color) and “New Adobe Logo” (for title pagewith *RED* color) layers and shouldnot be touched. (09/24/09)
Product name Style: ALL CAPS, font size: 28 pt, Font: Adobe Clean BoldComponent name font size: 26pt, Font: Adobe Clean Bold SemiCondensed (Aisan font sizes 21pt)Bugs font size: 9.5 pt, baseline shi 12.75pt, Font: Adobe Clean Regularleading: 3.2ptKearning: Optical (all), Auto (bugs if they get too close. Depends on characters bugs following) tracking -7
Adobe Clean Bold (FIGS-Clean Bold disappears from the font list when running out memories)খ௩ΰγοΫ1SP# +BQBOFTF

UsingADOB PRODUC NAME VERSION#
February 2013
ContentsDreamweaver Creative Cloud1........................................................................................................................Release Notes | Dreamweaver 12.1 | Creative Cloud2.............................................................................................................What's new | Creative Cloud5....................................................................................................................................................Insert HTML5 audio | Creative Cloud8......................................................................................................................................Insert HTML5 video | Creative Cloud10.....................................................................................................................................Import Edge Animate compositions | Creative Cloud12............................................................................................................Search files based on filename or content | Mac OS | Creative Cloud13..................................................................................Enhanced HTML5 support for form elements | Creative Cloud14.............................................................................................Changes to Insert options | Creative Cloud16...........................................................................................................................What's New20..................................................................................................................................................What's new in CS621................................................................................................................................................................Arabic and Hebrew text24.........................................................................................................................................................What’s new in CS5.526.............................................................................................................................................................Dreamweaver tutorials & getting started29................................................................................................................................................Workspace and workflow30.............................................................................................................................Dreamweaver workflow and workspace31................................................................................................................................Collapsing code40.....................................................................................................................................................................Customizing the Dreamweaver CS5 workspace42...................................................................................................................Dynamic content panels50........................................................................................................................................................Enhancements to CSS3 support in the CSS styles panel (CS5.5)52........................................................................................Optimizing the workspace for visual development54.................................................................................................................Setting coding preferences56....................................................................................................................................................Setting up your coding environment60......................................................................................................................................Use the Insert panel62...............................................................................................................................................................Using toolbars, inspectors, and context menus65.....................................................................................................................Working in the Document window67.........................................................................................................................................Zoom in and out70.....................................................................................................................................................................Site management71.........................................................................................................................................Connect to a remote server72...................................................................................................................................................Set up a testing server78...........................................................................................................................................................Set up a local version of your site80..........................................................................................................................................Manage Sites dialog box options81...........................................................................................................................................Version Control and Advanced settings83.................................................................................................................................Import and export Dreamweaver site settings85.......................................................................................................................Edit an existing remote website86.............................................................................................................................................About Dreamweaver sites87......................................................................................................................................................Getting and putting files to and from your server89...................................................................................................................Managing Contribute sites93.....................................................................................................................................................Set site preferences for transferring files98...............................................................................................................................Testing your Dreamweaver site99.............................................................................................................................................CSS102...........................................................................................................................................................Set CSS properties103..............................................................................................................................................................Laying out pages with CSS108..................................................................................................................................................Understanding Cascading Style Sheets113..............................................................................................................................Create a CSS rule117................................................................................................................................................................CSS3 transition effects118........................................................................................................................................................
Add a property to a CSS rule120...............................................................................................................................................Apply, remove, or rename CSS class styles121........................................................................................................................Check for cross-browser CSS rendering issues122..................................................................................................................Convert inline CSS to a CSS rule124........................................................................................................................................Disable/Enable CSS125............................................................................................................................................................Edit a CSS rule126....................................................................................................................................................................Edit a CSS style sheet127.........................................................................................................................................................Enhancements to CSS3 support in the CSS styles panel (CS5.5)128......................................................................................Format CSS code130................................................................................................................................................................Inspect CSS in Live view131.....................................................................................................................................................Link to an external CSS style sheet132.....................................................................................................................................Move/export CSS rules133........................................................................................................................................................Set CSS Styles preferences135................................................................................................................................................Set CSS heading properties for an entire page136...................................................................................................................Set CSS link properties for an entire page137..........................................................................................................................The CSS Styles panel138..........................................................................................................................................................Update CSS style sheets in a Contribute site141......................................................................................................................Use Design-Time style sheets142.............................................................................................................................................Use Dreamweaver sample style sheets143..............................................................................................................................Working with div tags144...........................................................................................................................................................Layout and design154.....................................................................................................................................Laying out pages with CSS155..................................................................................................................................................About the Spry framework160...................................................................................................................................................Adding Spry effects161..............................................................................................................................................................Change page orientation for mobile devices (CS5.5 and later)164...........................................................................................Colors165..................................................................................................................................................................................Creating media queries (CS5.5 and later)166...........................................................................................................................Designing dynamic pages168....................................................................................................................................................Displaying data with Spry170....................................................................................................................................................Displaying database records179...............................................................................................................................................Presenting content with tables186.............................................................................................................................................Set CSS heading properties for an entire page198...................................................................................................................Set title and encoding properties for a page199........................................................................................................................Understanding document encoding200.....................................................................................................................................Update CSS style sheets in a Contribute site201......................................................................................................................Use Design-Time style sheets202.............................................................................................................................................Use Dreamweaver sample style sheets203..............................................................................................................................Use a tracing image to design a page204.................................................................................................................................Using Frames205......................................................................................................................................................................Using visual aids for layout214..................................................................................................................................................Working with Spry widgets (general instructions)217................................................................................................................Working with div tags219...........................................................................................................................................................Working with head content for pages229..................................................................................................................................Working with the Spry Accordion widget233.............................................................................................................................Working with the Spry Collapsible Panel widget236..................................................................................................................Working with the Spry Tabbed Panels widget239.....................................................................................................................Working with the Spry Tooltip widget242...................................................................................................................................Working with the Spry Validation Checkbox widget244.............................................................................................................Working with the Spry Validation Confirm widget246................................................................................................................
Working with the Spry Validation Password widget249.............................................................................................................Page content and assets252...........................................................................................................................Working with Photoshop and Dreamweaver253........................................................................................................................Working with the Spry Menu Bar widget258..............................................................................................................................Creating and opening documents262........................................................................................................................................Set text properties in the Property inspector273........................................................................................................................Arabic and Hebrew text276.......................................................................................................................................................Set page properties278.............................................................................................................................................................Adding and modifying images280..............................................................................................................................................About assets and libraries289...................................................................................................................................................About the Spry framework290...................................................................................................................................................Adding Sound291......................................................................................................................................................................Adding media objects293..........................................................................................................................................................Adding video299........................................................................................................................................................................Adding web widgets303.............................................................................................................................................................Automating tasks304.................................................................................................................................................................Create a link to a Word or Excel document308.........................................................................................................................Creating and managing a list of favorite assets309...................................................................................................................Displaying data with Spry311....................................................................................................................................................Editing content in a template-based document320....................................................................................................................Import Microsoft Office documents (Windows only)322............................................................................................................Import tabular data323...............................................................................................................................................................Importing custom tags into Dreamweaver324...........................................................................................................................Insert dates326..........................................................................................................................................................................Inserting SWF files327...............................................................................................................................................................Managing tag libraries329.........................................................................................................................................................Modify font combinations331.....................................................................................................................................................Set title and encoding properties for a page332........................................................................................................................Spell check a web page333.......................................................................................................................................................Use HTML Formatting334.........................................................................................................................................................Use horizontal rules336.............................................................................................................................................................Use the Insert panel337.............................................................................................................................................................File management340.......................................................................................................................................Checking in and checking out files341......................................................................................................................................Cloaking files and folders in your Dreamweaver site347...........................................................................................................Comparing files for differences349............................................................................................................................................Getting and putting files to and from your server351.................................................................................................................Managing files and folders355...................................................................................................................................................Rolling back files (Contribute users)361....................................................................................................................................Set download time and size preferences362.............................................................................................................................Storing file information in Design Notes363...............................................................................................................................Synchronizing files366...............................................................................................................................................................Understanding document encoding368.....................................................................................................................................Linking and navigation369...............................................................................................................................About linking and navigation370................................................................................................................................................Image maps372.........................................................................................................................................................................Jump menus374........................................................................................................................................................................Link to an external CSS style sheet376.....................................................................................................................................Navigation bars377....................................................................................................................................................................
Set CSS link properties for an entire page378..........................................................................................................................Troubleshooting links379...........................................................................................................................................................Coding381.......................................................................................................................................................Collapsing code382...................................................................................................................................................................Editing code in Design view384.................................................................................................................................................Format CSS code389................................................................................................................................................................General information about coding in Dreamweaver390............................................................................................................Managing tag libraries394.........................................................................................................................................................Optimizing and debugging code396..........................................................................................................................................Setting coding preferences400..................................................................................................................................................Setting up your coding environment404....................................................................................................................................Template syntax406..................................................................................................................................................................Writing and editing code408......................................................................................................................................................Mobile and multiscreen420..............................................................................................................................Creating web applications for mobile devices (CS5.5, CS6)421...............................................................................................Packaging web applications as native mobile applications with PhoneGap Build424...............................................................Change page orientation for mobile devices (CS5.5 and later)427...........................................................................................Creating media queries (CS5.5 and later)428...........................................................................................................................Packaging web applications430................................................................................................................................................Preview pages using the Multiscreen Preview panel433...........................................................................................................Previewing434.................................................................................................................................................Check for cross-browser CSS rendering issues435..................................................................................................................Preview pages using the Multiscreen Preview panel437...........................................................................................................Previewing pages438................................................................................................................................................................Select and view elements in the Document window441............................................................................................................Viewing live data443..................................................................................................................................................................Templates444..................................................................................................................................................About Dreamweaver templates445...........................................................................................................................................Applying or removing a template from an existing document449..............................................................................................Creating a Dreamweaver template451......................................................................................................................................Creating a nested template454..................................................................................................................................................Creating editable regions in templates457................................................................................................................................Creating repeating regions in templates459..............................................................................................................................Defining editable tag attributes in templates461........................................................................................................................Editing content in a template-based document463....................................................................................................................Editing, updating, and deleting templates465............................................................................................................................Exporting and importing template content468...........................................................................................................................Recognizing templates and template-based documents470.....................................................................................................Setting authoring preferences for templates473........................................................................................................................Template syntax475..................................................................................................................................................................Using optional regions in templates477.....................................................................................................................................Web applications and forms479......................................................................................................................Set up a testing server480.........................................................................................................................................................Adding custom server behaviors482.........................................................................................................................................Adding dynamic content to pages490........................................................................................................................................Building ColdFusion forms493...................................................................................................................................................Building a delete record page502..............................................................................................................................................Building a login page508...........................................................................................................................................................
Building a page that only authorized users can access510.......................................................................................................Building a record insert page512...............................................................................................................................................Building a registration page515.................................................................................................................................................Building pages with advanced data manipulation objects (ColdFusion, ASP)517.....................................................................Building search and results pages521.......................................................................................................................................Changing dynamic content526..................................................................................................................................................Creating web forms528..............................................................................................................................................................Database connections for ASP developers538.........................................................................................................................Database connections for ColdFusion developers544..............................................................................................................Database connections for PHP developers546.........................................................................................................................Defining sources of dynamic content548...................................................................................................................................Designing dynamic pages559....................................................................................................................................................Displaying database records561...............................................................................................................................................Dynamic content panels568......................................................................................................................................................Dynamic content sources overview570.....................................................................................................................................Optimizing the workspace for visual development574...............................................................................................................Packaging web applications576................................................................................................................................................Removing connection scripts579...............................................................................................................................................Securing a folder in your application (ColdFusion)580..............................................................................................................Set up your computer for application development581.............................................................................................................Troubleshooting database connections585...............................................................................................................................Understanding web applications589..........................................................................................................................................Using ColdFusion components595............................................................................................................................................Cross-product600............................................................................................................................................Working with Photoshop and Dreamweaver601........................................................................................................................Dreamweaver-Business Catalyst integration606.......................................................................................................................Adding and modifying images608..............................................................................................................................................AIR Extension for Dreamweaver617.........................................................................................................................................Create a link to a Word or Excel document621.........................................................................................................................Cross-application integration622...............................................................................................................................................Extensions623...........................................................................................................................................................................Import Microsoft Office documents (Windows only)624............................................................................................................Managing Contribute sites625...................................................................................................................................................Update CSS style sheets in a Contribute site630......................................................................................................................Using Dreamweaver with Adobe Online services631................................................................................................................Working with Adobe Bridge and Dreamweaver636...................................................................................................................Working with ConnectNow and Dreamweaver638....................................................................................................................Working with Device Central and Dreamweaver639.................................................................................................................Working with Fireworks and Dreamweaver641.........................................................................................................................Working with Flash and Dreamweaver646................................................................................................................................Javascript647...................................................................................................................................................þÿ A p p l y i n g b u i l t i n J a v a S c r i p t b e h a v i o r s648.......................................................................................Using JavaScript behaviors (general instructions)656...............................................................................................................Accessibility659...............................................................................................................................................Dreamweaver and accessibility660...........................................................................................................................................Keyboard shortcuts663..............................................................................................................................................................XML665...........................................................................................................................................................About XML and XSLT666..........................................................................................................................................................
Missing character entities for XSLT671.....................................................................................................................................Performing XSL transformations on the client673.....................................................................................................................Performing XSL transformations on the server675....................................................................................................................
Dreamweaver Creative Cloud
1
Release Notes | Dreamweaver 12.1 | Creative Cloud
To the topTo the topTo the topThis release is available for Creative Cloud members and point product subscribers only. To join Adobe Creative Cloud, see Adobe CreativeBefore you upgradeUpgrade to Dreamweaver Creative CloudAfter you upgradeKnown limitationsHTML5 videos do not play as intended on websiteVersion: 12.1Release Date: 24 September 2012This document lists the known issues, limitations, and workarounds in the Dreamweaver release for Creative Cloud.Ensure that you read this document before you upgrade.Before you upgradeTo avoid losing your personal settings and preferences in Dreamweaver CS6, ensure that you follow the instructions listed below.Export keyboard shortcutsBefore upgrading to Creative Cloud, do the following:Select Edit� Keyboard ShortcutsClick "Export Set As HTML" button.After you upgrade, refer to the exported file to set the shortcuts again.Note down items in the Favorites section of the Insert panelItems in the Favorites section of the Insert panel are removed after upgrade. Note down the items so that you can manually add them afterUpgrade to Dreamweaver Creative CloudThis 12.1 upgrade includes fixes from the earlier Dreamweaver 12.0.1 patch release.Open Dreamweaver.Select Help� Updates.In the Adobe Application Manager, select the Dreamweaver update.Click Update.After you upgradeEnable previously installed extensionsIf you upgrade from Dreamweaver CS6 to Creative Cloud, your previously installed extensions do not appear in Dreamweaver menus.To display previously installed extensions, open Adobe Extension Manager, select all extensions, and re-enable them.Insert items into the Favorites section of the Insert panelThe items you inserted into the Favorites section of the Insert panel in Dreamweaver CS6 are removed after upgrade. Manually reinsert items intothe Favorites panel.(Mac OS 10.6.x only, FileVault enabled) Point site local root folder outside Users folderLive search does not work if FileVault is enabled for site local root folder.
2
To the topTo the top
The local root folder is inside the user folder&#xuser; (/Users/) Point the site local root folder outside the Users folder.
HTML labels in Property InspectorHTML keywords are no longer localized in the Property Inspector. They appear in English only.Edge Animate CompositionsPreviewing Edge Animate compositions in the Live View slows down Dreamweaver considerably. Adobe suggests that you use browser previewfor Edge Animate Compositions.Only OAM files can be inserted into Dreamweaver. OAM files with double-byte, high-ASCII, or special characters in the filename cannot beHTML5 Video/Audio does not play in Live ViewPreview HTML5 audio/video in a browser.HTML5 videos do not play as intended on websiteIf your video plays well on your local computer but doesn’t play on a live web server, it’s probably because the remote web server isn’t configuredproperly for your video format.For HTML5 video support on your websites, ensure that you correctly configure MIME (Multi-purpose Internet Mail Extensions) types on yourwebserver .For choosing the correct MIME type, check the format of your videos (MP4, OGV, WEBM). Adobe recommends that you have all the formats or atleast MP4 and WEBM for maximum browser compatibility. You set MIME types for each format separately.For video encoding, you can try HTML5 Video Player. The player can convert your videos into different HTML5 video formats in a batch mode.If you plan to host your websites on different web server types such as Windows server with IIS, or Linux server with Apache, configure HTML5MIME types in accordance with the server type.Set HTML5 video MIME type on ApacheAddType video/ogg.ogvAddType video/mp4.mp4AddType video/webm.webmAdd the following code to your file or to a file in the directory containing your video file.The first line is for videos in an Ogg container. The second line is for videos in an MPEG-4 container. The third is for WebM.Set HTML5 video MIME type on IISTo set up HTML5 video MIME types on IIS servers, open IIS Manager on the Windows server. Navigate to the MIME Types settings.There are some differences between the IIS versions. Consult your server’s documentation or your hosting company on how to set the HTML5video MIME type for specific file types on Windows servers.If you use IIS Express and don’t have a full instance of IIS running, use the file. This method works on any IIS7 web server, and isignored on all non-IIS7 web servers. So, it is safe regardless of the type of application or content.Add the following code to your configuration file: FileExtension=":mp4" mimeType="video/mp4"&#xmime;&#xMap-;圀 / FileExtension=".ogv" mimeType="video/ogg"&#xmime;&#xMap-;圀 / FileExtension=".webmv" mimeType="video/webmv"&#xmime;&#xMap-;圀 /
3
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
If you use a web server other than Apache or IIS, consult your server’s documentation on how to set the HTML5 video MIME type for specific file
types.
4
What's new | Creative Cloud
To the topTo the topTo the topTo the topTo the topThese features are available for Creative Cloud members and point product subscribers only. To join Adobe Creative Cloud, see Adobe CreativeDreamweaver CS6 Update for Creative Cloud Members (Video)Insert HTML5 video and audioInsert HTML5 semantic elements from the Insert panelImport Adobe Edge Animate compositionsSupport for HTML5 CanvasEnhancements to HTML5 support for form elementsLive Search (Mac OS)FTP enhancementsImprovements to handling fontsReorganized Insert menuInsert HTML5 video and audioYou can insert HTML5 video and HTML5 audio into web pages using Dreamweaver. The video and audio elements in HTML5 specify a standardway to embed and display video and audio on a web page.For more details on inserting HTML5 video, see Insert HTML5 video.For more details on inserting HTML5 audio, see Insert HTML5 audio.Insert HTML5 semantic elements from the Insert panelSelect Layout in the ) panel for a list of semantic elements that you can insert in your HTML5 page layout. To edit theproperties of inserted semantic elements, select an element and edit its properties in the You can also use the Insert menu () to insert semantic tags.The seven new semantic tags for this release: Article, Aside, HGroup, Navigation, Section, Header, and Footer.For a tutorial on using semantic tags for page layout, see the blog article by Jennifer Marsman titled Semantic Markup and Page LayoutHTML5 Semantics in Dreamweaver CS5.5 tutorial provides you with a perspective of using HTML5 semantic elements in Dreamweaver CS 5.5.Import Adobe Edge Animate compositionsYou can import Adobe Edge Animate compositions (OAM files) into Dreamweaver. The composition is placed at the location of the cursor.Dreamweaver places the extracted contents of the OAM file in a folder named by default. You can change the default locationin the Site Setup dialog.For more information, see Import Edge Animate compositions.The Canvas element in HTML5 is a container for dynamically generated graphics. These graphics are created at runtime using a scriptinglanguage such as JavaScript. For more information, see the article HTML5 CanvasThe Canvas element has ID, height, and weight attributes.
To locate the Canvas element, select . Alternatively, open the panel (), and select from the menu.
To edit the properties of the Canvas element, select the element and edit its properties in the Enhancements to HTML5 support for form elementsAs part of HTML5 support, new attributes have been added to the panel for form elements. In addition, four new form elements (
5
To the topTo the topAutomatically Upload Files to Server on SaveContinue working with Dreamweaver when downloading Business Catalyst SiteEnhancements to the Adobe ID Password dialogTo the top
mail, search, telephone, URL) have been introduced in the Forms section of the
For more information, see Enhanced HTML5 support for form objects.Live Search (Mac OS)Use Live Search to locate files based on filename or text present in files. The site selected in the panel is used for search.Live Search uses the Spotlight API in Mac OS. Any customization that you apply to Spotlight preferences is also used for Live Search. Spotlightdisplays all files on your computer that match your search query. Live Search searches files in the root folder of the site currently selected in theFor more information, see Search files based on filename or contentThis option allows files to be uploaded to the server even if a parallel upload or downloadprocess is in progress during the save operation. Some issues with this feature in the previous release have been fixed to make it seamless. Automatic Upload Files to Server on Save doesnot disrupt your work with Dreamweaver when downloading the Business Catalyst site.Your Adobe ID that you selected during installation is displayed in this dialog. Options to saveyour password and retrieve forgotten passwords are available.
Improvements to handling fontsThe font list in the menu has been classified based on system fonts and web fonts. The system fonts are listed first in the menu.
The Web Fonts Manager (Web Fonts) dialog is renamed toWeb Fonts Suitcase. You can use the Web Fonts to add web fonts to the fonts list.
The Add Fonts button is renamed to Add Local Font
Separate icons help easily identify system fonts from web fonts.
Web Fonts Suitcase dialog
6
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
To the top
Separate icons for system fonts and web fontsReorganized Insert menuThe options in the panel and menu have been reorganized. For more information, see Changes to Insert Options | Creative Cloud.
7
Insert HTML5 audio | Creative Cloud
To the topTo the topThis feature is available for Creative Cloud members and point product subscribers only. To join Adobe Creative Cloud, see Adobe CreativeDreamweaver allows you to insert and preview HTML5 audio in web pages. The HTML5 audio element provides a standard way to embed audiocontent into web pages.For more information on HTML5 audio element, see the article on HTML5 audio at Insert HTML5 audioPreview the audio in browserInsert HTML5 audioEnsure that your cursor is at the location where you want to insert the audio.Select InsertHTML5 Audio. The audio file is inserted at the specified location.In the panel, enter the following information:
Alt Source 1Alt Source 2: In , enter the location of the audio file. Alternatively, click the folder icon toselect an audio file from your computer. Support for audio formats varies on different browsers. If the audio format in is not supported, the format specified in Alt Source 1 or Alt Source 2 is used. The browser selects the firstrecognized format to display the audio.To quickly add videos to the three fields, use multiple selection. When you choose three video formats for the same videofrom a folder, the first format in the list is used for the . The following formats in the list are used to auto-fill Source 1 and Alt Source 2
: Enter a title for the audio file.
Fallback text: Enter the text to be displayed in browsers that do not support HTML5.
: Select if you want to display audio controls such as Play, Pause, and Mute in the HTML page.
: Select if you want the audio to start playing as soon as it loads on the web page.
Loop Audio: Select this option if you want the audio to continuously play until the user stops playing it.
: Select this option if you want to mute the audio after download.
: Selecting loads the entire audio file on page download. Selecting downloads only the metadataafter the page download is complete.
Properties panel for the HTML5 audioPreview the audio in browserSave the web page.
Internet Explorer 9Firefox 4.0Google Chrome 6Apple Safari 5Opera 10.6
8
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy PolicySelect FilePreview in Browser. Select the browser in which you want to preview the audio.
9
Insert HTML5 video | Creative Cloud
To the topThis feature is available for Creative Cloud members and point product subscribers only. To join Adobe Creative Cloud, see Adobe CreativeDreamweaver allows you to insert HTML5 video into web pages.The HTML5 video element provides a standard way to embed movies or videos in web pages.For more information on HTML5 video element, see the article on HTML5 Video at Insert HTML5 videoPreview the video in browserInsert HTML5 videoEnsure that your cursor is at the location where you want to insert the video.Select InsertHTML5 Video. The HTML5 video element is inserted at the specified location.In the Properties panel, specify values for the various options.
Alt Source 1Alt Source 2: In , enter the location of the video file. Alternatively, click the folder icon toselect a video file from the local file system. Support for a video format varies on different browsers. If the video format in is not supported on a browser, the video format specified in Alt Source 1 or Alt Source 2 is used. The browserselects the first recognized format to display the video.To quickly add videos to the three fields, use multiple selection. When you choose three video formats for the same videofrom a folder, the first format in the list is used for the . The following formats in the list are used to auto-fill Source 1 and Alt Source 2See the table below for more information on browser and supported video format. For the latest info, see HTML5 - Browser
: Specify a title for the video.
Width (W): Enter the width in pixel of the video.
Height (H): Enter the height in pixel of the video.
: Select if you want to display the video controls such as Play, Pause, and Mute in the HTML page.
: Select if you want the video to start playing as soon as it loads on the web page.
: Enter the location of the image you want displayed until the video completes downloading, or until the user clicks. The Width and Height values are auto-filled when you insert the image.
: Select this option if you want the video to continuously play until the user stops playing the movie.
: Select this option if you want to mute the audio portion of the video.
Flash Video: Select a SWF file for browsers that do not support HTML5 video.
Fallback text: Provide the text to display if the browser doesn't support HTML5.
: Specifies the author preferences on how the video should be loaded when the page loads. Selecting the entire video on page download. Selecting downloads only the metadata after the page download is
Internet Explorer 9Firefox 4.0Google Chrome 6Apple Safari 5Opera 10.6
10
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
To the top
HTML5 video Properties PanelPreview the video in browserSave the web page.Select FilePreview in Browser. Select the browser in which you want to preview the video.
11
Import Edge Animate compositions | Creative Cloud
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
To the topThis feature is available for Creative Cloud members and point product subscribers only. To join Adobe Creative Cloud, see Adobe CreativeYou can import Adobe Edge Animate compositions (OAM files) into Dreamweaver. The composition is placed at the location of the cursor.Dreamweaver extracts the contents of the imported OAM file to a folder named edgeanimate_assets. You can change the default location in theSite Setup dialog.Ensure that your cursor is at the location where you want to insert the Edge Animate composition.Select InsertEdge Animate CompositionNavigate to the location in your computer containing the OAM file, and open it. The animation is placed at the specifiedBy default, the contents of the OAM file are extracted to the folder. A sub folder with the name of the fileis created. The contents of the OAM file are placed in the folder under this location.You can place Edge Animate Compositions into individual pages not part of any site. The files are extracted to thelocation of the page.
Location of extracted files The edgeanimate_assets folder The folder created using the file name of the OAM file The Assets folder containingthe extracted files Preview the inserted Edge Animate composition in a browser or in the Live View.Change default location for extracted filesOpen the Site Setup dialog for your site.Under Advanced Settings, select Edge Animate AssetsIn Asset Folder, modify the location for extracted files.
12
Search files based on filename or content | Mac OS | Creative Cloud
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy PolicyMatching filesMatching Text InThis feature is available for Creative Cloud members and point product subscribers only. To join Adobe Creative Cloud, see Adobe CreativeThis feature is available only for Mac OS.Use Live Search to locate files based on filename or text present in files. The site selected in the panel is used for search. If there is no siteselected in the panel, the search option does not appear.Live Search uses the Spotlight API in Mac OS. Any customization that you apply to Spotlight preferences is also used for Live Search. Spotlightdisplays all files on your computer that match your search query. Live Search searches files in the local root folder of the site currently selected inthe FilesSelect EditLive Search. Alternatively, use. The focus is set to the Live Search text box in Enter the word or phrase in the text box. The results are displayed as you enter text in the text box.Displays a maximum of 10 filenames that match your search criteria. The message More Than 10 Results is displayed if there are more than 10 matching files. Refine your search criteria if you do not find your desired file inthe options displayed.Displays a maximum of 10 files that contain text matching the word or phrase you entered. For moreoptions, click Find All. The results are displayed in the When you move the mouse cursor over a search result, a tool tip with the root-relative path of the file is displayed. Press, or click the item to open the file.For files containing matching text, the first instance of the text is highlighted. Use to navigate to other instances.To close the Live Search results panel, click outside the panel, or press Escape / Esc
13
Enhanced HTML5 support for form elements | Creative Cloud
To the topTo the topThis feature is available for Creative Cloud members and point product subscribers only. To join Adobe Creative Cloud, see Adobe CreativeNew attributes common to form elementsForm elements with modified attributesNew form elementsIn line with continued support for HTML5 in Dreamweaver, new attributes have been introduced for some form elements. In addition, four newHTML5 form elements have been introduced.You can locate the form elements in the panel. Select . In the panel menu, select Forms.Related LinksNew attributes common to form elementsThe following new attributes are common to all form elements:
: Select this option if you want the browser to disable the element
: Select this option if you want the browser to check if a value has been specified
Auto complete: Select this option to auto fill values when user enters information in a browser.
Auto focus: Select this option if you want the focus to be on this element when browser loads the page.
Read only: Select this option to set the value of the element to read-only.
: Specifies one or more forms to which an&#xinpu;&#xt000; element belongs.
: Unique name used to reference the element in the code.
Place holder: Hint that describes the expected value of an input field
: Regular expression against which the element's value is validated.
: Extra information about an element. Displayed as a tool tip.
Tab Index: Specifies the position of the current element in the tab order for the current document.Form elements with modified attributes
Form No Validate: Select this option to disable form validation. This selection overrides the No Validate attribute at form
Form Enc Type: A MIME type with which a user agent is meant to associate this element for form submission.
Form Target: A browsing context name or keyword that represents the target of the control.
Accept charset: Specifies the character encodings used for form submission.The links for attributes contain information on all attributes listed in the HTML5 specifications. Not all these attributes are present in the panel. You can use the code view to add attributes not present in the panel.
New attributes specific to the elementDescription of attributesText Fieldhttp://www.w3.org/TR/html- specific new&#xNo-6;瀀 attributeCheck Box specific new&#xNo-6;瀀 attributehttp://www.w3.org/TR/html-http://www.w3.org/TR/html-No validateAccept charsethttp://www.w3.org/TR/2012/WD-html-markup-20120329/form.htmlhttp://www.w3.org/TR/2012/WD-html-
14
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
To the topNew form elementsE-mail: A control for editing a list of email addresses given in the element’s value. A one-line plain-text edit control for entering one or more search terms.Telephone (Tel): A one-line plain-text edit control for entering a telephone number. A control for editing an absolute URL given in the element’s value.The attributes specific to these elements are:
Size
Max Length
Value
Tab Index
The attribute is available for the E-mail element only.
specific new&#xNo-6;瀀 attribute
markup-20120329/input.hidden.html specific new&#xNo-6;瀀 attributehttp://www.w3.org/TR/html-Width, Height, Action, Method,Form no Validate, Form EncType, Form target.http://www.w3.org/TR/html- specific new&#xNo-6;瀀 attributeForm No Validate, Form Enctype, Form target, Action, TabIndex, Methodhttp://www.w3.org/TR/html- specific new&#xNo-6;瀀 attributehttp://www.w3.org/TR/html-Text AreaRows, Cols, Place Holder, Wrap,Max Length, Tab Indexhttp://www.w3.org/TR/html-
Description of attributesE-mailhttp://www.w3.org/TR/html-markup/input.email.htmlhttp://www.w3.org/TR/html-markup/input.search.htmlTelephone (Tel)http://www.w3.org/TR/html-markup/input.tel.htmlhttp://www.w3.org/TR/html-markup/input.url.html
15
Changes to Insert options | Creative Cloud
To the topTo the topTo the topThis feature is available for Creative Cloud members and point product subscribers only. To join Adobe Creative Cloud, see Adobe CreativeQuicker access to Insert options and enhanced support for HTML5 elementsDeprecated optionsReorganized options in the Insert panel and Insert menuQuicker access to Insert options and enhanced support for HTML5 elementsOptions in the Insert panel and the Insert menu are reorganized to help you quickly discover and insert those options. New HTML5 elements havebeen introduced in the Insert menu.The changes to the Insert options have been done for the following reasons:
Sync the ordering of options in the Insert panel with the Insert menu to improve speed of their disoverability.
As part of enhanced HTML5 support in Dreamweaver, new HTML5 elements introduced in the Insert options.
Insert options that required multiple-clicks are deprecated. These options can be quickly and easily configured using theProperty Inspector or the Code view.Deprecated optionsInsert options that required multiple clicks are deprecated. These options can be configured using the Property Inspector, or in the As a consequence, the following dialogs have been deprecated: Tag EditorTag ChooserForm Tag and Input Tag Accessibility Attributes. Thecorresponding options are, therefore, not available in the right-click menu as well.The following options under in the panel are deprecated: , and Repeat ListThe following options in the Head Tags category under are deprecated: Link.The option to set color icons in the Insert panel has been deprecated. Element icons are now available only in black and white.Reorganized options in the Insert panel and Insert menuThe Insert panel and menu are reorganized to be in sync with each other. The order of the options in the panel matches with theAlso, there are some new options available and some of the previous options have been removed.Insert options in Dreamweaver 12 (CS6)
16
Insert options in Dreamweaver 12.1
Changes to Media and Form options
CS6, CS5.5Creative Cloud
17
Div
Layout Objects
HTML5 VideoNot availableHTML5 VideoNot availableLine Break, Non BreakingSpace, Copyright, Registered,Trademark, Pound, Yen, Euro,Left Quote, Right Quote, Em-Dash, En-Dash, OtherHead TagsDescription,Horizontal RuleNot availableHorizontal RuleData ObjectsRecordset, Stored Procedure,Dynamic Data, Repeat Region,Show Region, RecordsetPaging, Go To, Display RecordCount, Master Detail Page Set,Insert Record, Update Record,Delete Record, UserAuthentication, XSLTNot availableRollover ImageFireworks HTMLEdge Animate Composition,Flash SWF, Flash Video,HTML5 Video, HTML5 Audio,Media QueriesMedia QueriesMedia QueriesTable ObjectsTable ObjectsNot availableDiv, Fluid Grid Layout Div,Draw Absolute Position Div,Header, HGroup, Navigation,Aside, Article, Section, Footer,Form, Text, Email, Password,URL, Tel, Search Textarea,Button, Submit, Reset, File,Image Button, Hidden, Select,Radio Button, Radio Group,Checkbox, Checkbox group,Fieldset, LabelEmail LinkEmail LinkEmail LinkNamed AnchorNamed AnchorNamed AnchorServer Side IncludeServer Side IncludeNot availableNot availableNot availableMake Template, Make NestedTemplate, Editable Region,Optional Region, RepeatedRegion, Editable OptionalRegion, Repeating TableRecent SnippetsRecent SnippetsRecent SnippetsPage, List View, Layout Grid,Collapsible Block, Text,Password, Text Area, Select,
18
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
jQuery MobilejQuery MobilejQuery Mobile
Checkbox, Radio Button,Button, Slider, Flip ToggleIn-ContextIn-ContextIn-ContextEditable Region, RepeatingDataset, Region, Repeat,Repeat List, Validation TextField, Validation Text Area,Validation Check Box,Validation Select, ValidationPassword, Validation Confirm,Validation Radio Group, MenuBar, Tabbed Panels,Accordion, Collapsible Panel,Data ObjectsData ObjectsGet More ObjectsGet More ObjectsGet More Objects
19
What's New
20
What's new in CS6
To the topTo the topTo the topTo the topTo the topVideo tutorialsInserting HTML5 video contentNew site managerFluid grid-based CSS layoutsCSS3 transitionsMultiple CSS class selectionPhoneGap Build integrationjQuery Mobile 1.0 and jQuery Mobile swatchesBusiness Catalyst integrationWeb fontsSimplified PSD optimizationImprovements to FTP transferVideo tutorialsThe video tutorials for new features in Dreamweaver CS6 are now available on Adobe TV New site managerThe Manage Sites dialog box (Sites Manage Sites) has a new look and feel, although much of the functionality remains the same. Additionalfunctionality includes the ability to create or import Business Catalyst sites.
Manage Sites dialog box optionsFluid grid-based CSS layoutsUse the robust new fluid grid layouts in Dreamweaver (New New Fluid Grid Layout) to create adaptive CSS layouts that respond to varyingscreen sizes. When you build a web page using a fluid grid, the layout and its contents automatically adjust to the user's viewing device, whetherdesktop computer, tablet, or smart phone.
Introduction to fluid grid layouts
Using fluid grid layouts in Dreamweaver CS6 (tutorial)
Adobe TV: Using fluid grid layouts in Dreamweaver CS6
Adobe TV: Creating adaptive designs with fluid grid layouts in Dreamweaver CS6
Adobe TV: Fluid Grid Layout deep dive with Dreamweaver Product Manager Scott FegetteCSS3 transitionsUse the new CSS Transitions panel to apply smooth property changes to CSS-based page elements that respond to trigger events such ashovering, clicking, and focusing. (A common example is a menu bar item that gradually fades from one color to another when you hover over it.)You can now create CSS transitions using both code-level support, and the new CSS Transitions panel (Window CSS Transitions
Understanding CSS3 Transitions
CSS3 transition effects in Dreamweaver (reference)
Creating smooth changes with the CSS transitions panel (tutorial)
Adobe TV: Using CSS3 transitions in Dreamweaver CS6Multiple CSS class selectionYou can now apply multiple CSS classes to a single element. Select the element, open the Multiclass Selection dialog box, and choose yourclasses. After you apply multiple classes, Dreamweaver creates a new multiclass from your selections. The new multiclass then becomes availablefrom other places where you make CSS selections.
21
To the topTo the topTo the topTo the top
To the topYou can open the Multiclass Selection dialog box from several access points:
The HTML property inspector (Choose Apply Multiple Classes from the menu.)
The Targeted Rule pop-up menu of the CSS property inspector
The context menu of the tag selector at the bottom of the Document window (right-click a tag and choose Set ClassMultiple ClassesAdobe TV: Selecting multiple classes in Dreamweaver CS6PhoneGap Build integrationThrough direct integration with the exciting new PhoneGap Build service, Dreamweaver CS6 customers can build native applications for mobiledevices using their existing HTML, CSS and JavaScript skills. After you log into PhoneGap Build via the PhoneGap Build panel (), you can build your web application directly on the PhoneGap Build service, and download the resulting native mobile applications to eitheryour local desktop or mobile device. The PhoneGap Build service manages your project and allows you to build native applications for the mostpopular mobile platforms, including Android, iOS, Blackberry, Symbian and webOS.
What is PhoneGap?
Packaging web applications with PhoneGap Build (reference)
Adobe TV: Packaging an application with PhoneGap BuildjQuery Mobile 1.0 and jQuery Mobile swatchesjQuery Mobile 1.0Dreamweaver CS6 ships with jQuery 1.6.4, as well as jQuery Mobile 1.0 files. Starter jQuery Mobile pages are available from the New Documentdialog box (Page From SampleMobile Starters). You can also now choose between two kinds of CSS files when creating yourjQuery mobile pages: full CSS files, or CSS files that are split into structural and theme components.
jQuery Mobile applications and starter pages
Adobe TV: Enhanced jQuery Mobile support in Dreamweaver CS6jQuery Mobile swatchesPreview all the swatches (themes) in a jQuery mobile CSS file by using the new jQuery Mobile Swatches panel (jQuery Mobile). Then use the panel to apply swatches to or remove them from various elements in your jQuery mobile web page. Use this feature toindividually apply swatches to headers, lists, buttons and other elements.
Using jQuery mobile themes in Dreamweaver CS6 (tutorial)
Adobe TV: Enhanced jQuery Mobile support in Dreamweaver CS6Business Catalyst integrationNew Business Catalyst sitesYou can now create a new Business Catalyst trial site directly from Dreamweaver, and explore the broad capabilities that Business Catalyst canprovide to your clients and projects.Business Catalyst panelAfter you log in to your Business Catalyst Site, you can insert and customize Business Catalyst modules directly from the Business Catalyst panel(WindowBusiness Catalyst) in Dreamweaver.You'll have access to rich functionality such as product catalogs, blogs and social mediaintegration, shopping carts and more. The integration provides a way for you to eamlessly work between your local files in Dreamweaver andyour site's database content on the Business Catalyst site.
Dreamweaver-Business Catalyst integration (reference)
Reimport Business Catalyst sites into Dreamweaver CS6 (reference)
Customize a Business Catalyst module using Dreamweaver (reference)
Adobe TV: Creating and Editing your Business Catalyst websiteYou can now use creative web-supported fonts (such as Google or Typekit web fonts) in Dreamweaver. First, use the Web Font Manager (Web Fonts) to import a web font into your Dreamweaver site. The web font then becomes available for use in your web pages.
Adobe TV: Working with Web Fonts in Dreamweaver CS6
22
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
To the top
Simplified PSD optimization
The Dreamweaver CS5 Image Preview dialog box is now called the Image Optimization dialog box. To open the dialog box, select an image in theDocument window and click the Edit Image Settings button in the Property inspector. Some of the options found in the previous CS5 dialog box now appear in the Properties Inspector.An instant preview of the image is displayed in view as you change settings in the Image Optimization dialog box.
Edit images in Dreamweaver (reference)
Adobe TV: Editing images in Dreamweaver CS6Improvements to FTP transferDreamweaver uses multi-channel transfer to simultaneously transfer selected files using multiple channels. Dreamweaver also allows you tosimultaneously use the Get and Put operations to transfer files.If there is sufficient bandwidth available, FTP multi-channel asynchronous transfer considerably speeds up the transfer process.For more information, see http://blogs.adobe.com/dreamweaver/2012/06/ftp-improvement-in-dreamweaver-cs6.html
23
Arabic and Hebrew text
To the topTo the topTo the topBi-directional text flowTag editorText direction and Unicode-bidi in CSS RulesTable propertiesDiv propertiesNew and improved features for working in Arabic and Hebrew are available in the Middle East and North African edition of this software.Bi-directional text flowText in Middle Eastern languages is mostly written from right to left (RTL). However, in general, the most commonly used form is bi-directional(bidi) text - a mix of left-to-right and right-to-left text. An example of bidi text is a paragraph that includes Arabic and English text. In CS6, you canuse Dreamweaver to type Arabic, Hebrew, or bidi text, in design view and code view.In Dreamweaver Middle Eastern version, Right-to-left direction attribute can be applied to two notional objects, paragraphs and characters. The attribute can be applied to tags supported in the HTML specification. The direction attribute can take values: ltr (default), , or
Direction attribute in CSSWhen you enter Arabic, Hebrew, or mixed text, Dreamweaver recognizes the languages as Right-to-left (RTL) and displays it text appropriately.Tag editorYou can apply direction and language settings using the Tag Editor
Tag EditorText direction and Unicode-bidi in CSS RulesYou can specify the Text direction as a CSS rule. In the CSS Rule definition dialog box, specify Direction and Unicode-bidi options.
24
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
To the topTo the top
Language options in CSS RulesTable propertiesRight-to-left tables are right aligned, and columns are ordered from right to left. The resizing handles appear on the left side. On tabbing, thecursor moves in RTL direction..Specify the table direction using the Properties panel.
Right-to-left tableDiv propertiesUse Direction to specify the Div direction in the Properties.
Div direction
25
What’s New
To the topTo the topWhat’s new (CS5.5)What’s new (CS5)Deprecated featuresImportant: This page provides a list of new features in Dreamweaver CS5 and Dreamweaver CS5.5. This page does NOT tell you how to usethose features. For more information about any of the new features, click the corresponding links provided. You can also watch a CS5 feature, or a CS5.5 feature overview on AdobeTV.What’s new (CS5.5)Multiscreen supportPreview your designs in standard screen resolutions, or use media queries to define resolution. When testing for devices that change pageorientation based on how the device is held, use the landscape and portrait options during preview. For more information, see Designing formultiple screens and devices.Media query supportUse media queries to customize the appearance of your site for different screen resolutions. For more information, see Creating media queries(CS5.5 and later).Web applications for mobile devicesQuickly design a web application that works on most mobile devices using the jQuery Mobile widget. For more information, see Creating webapplications for mobile devices (CS5.5).Package web applications for Android, iPhone, and iPadPackage your web applications in Dreamweaver, and deploy them to Android™ and iOS-based devices. For more information, see Packaging webapplications as native mobile applications (CS5.5).HTML5, CSS3, and jQuery supportDreamweaver supports code hinting for HTML5, CSS3, and jQuery.Starter layouts are also available for building HTML5 pages from scratch. Dreamweaver supports the HTML5 feature to embed videos in HTMLpages. For more information, see Embed videos in web pages (HTML5).The CSS panel has been enhanced to support commonly used CSS3 properties. For more information, see Code hints and Enhancements toCSS3 support in the CSS styles panel (CS5.5).FTPS supportTransfer data using FTPS. FTPS (FTP over SSL) provides both encryption and authentication support as compared to SFTP that supports onlyencryption. For more information, see FTPS connections (CS5.5)W3C validator supportCreate standards-compliant HTML and XHTML pages using the W3C validator in Dreamweaver. For more information, see Validate documentsusing W3C validator (CS5.5).What’s new (CS5)Adobe BrowserLabDreamweaver CS5 integrates with Adobe BrowserLab, one of the new CS Live online services, which provides a fast and accurate solution forcross-browser compatibility testing. With BrowserLab you can preview web pages and local content using multiple viewing and comparison tools.See BrowserLab.Business Catalyst integration
26
To the top
Adobe Business Catalyst is a hosted application that replaces traditional desktop tools with one, central platform for web designers. The
application works hand-in-hand with Dreamweaver, and lets you build everything from basic data-driven websites to powerful online stores. SeeCSS enhancementsCSS Disable/EnableCSS Disable/Enable lets you disable and re-enable CSS properties directly from the CSS Styles panel. Disabling a CSS property simplycomments out the specified property without actually deleting it. See Disable/Enable CSS.CSS InspectionInspect mode lets you visually display the CSS box model properties—including padding, border, and margin—in detail without reading code orrequiring a separate third-party utility such as Firebug. See Inspect CSS in Live view.CSS starter layoutsDreamweaver CS5 includes updated and simplified CSS starter layouts. The complex descendent selectors from the CS4 layouts have beenremoved and replaced with simplified, easy-to-understand classes. See Create a page with a CSS layoutDynamically-Related FilesThe Dynamically-Related Files feature lets you discover all of the external files and scripts necessary to assemble PHP-based ContentManagement System (CMS) pages, and displays their filenames in the Related Files toolbar. By default Dreamweaver supports file discovery forthe Wordpress, Drupal, and Joomla! CMS frameworks. See Open Dynamically-Related FilesLive view navigationLive view navigation activates links in Live view, allowing you to interact with server-side applications and dynamic data. The feature also allowsyou to enter a URL to inspect pages served from a live web server and edit pages you have browsed to if they exist in one of your locally definedsites. See Previewing pages in Dreamweaver.PHP custom class code hintingPHP custom class code hinting displays the proper syntax for PHP functions, objects, and constants, helping you type more accurate code. Codehinting also works with your own custom functions and classes, as well as third-party frameworks, such as the Zend framework.Simplified site setupThe newly redesigned Site Definition dialog box (now the Site Setup dialog box) makes it easier to set up a local Dreamweaver site so that youcan start building web pages right away. The remote server category lets you specify your remote and testing servers in one view. See Set up alocal version of your site and Connect to a remote serverSite-specific code hintsThe Site-specific code hints feature lets you customize your coding environment when working with third-party PHP libraries and CMS frameworkssuch as WordPress, Drupal, Joomla!, or other frameworks. Theme files for blogs and other custom PHP files and directories can be included orexcluded as sources for code-hints. See Site-specific code hints.Subversion support enhancementsDreamweaver CS5 expands its support for Subversion, allowing you to move, copy, and delete files locally, and then synchronize changes withyour remote SVN repository. The new Revert command allows you to quickly correct tree conflicts or rollback to a previous version of a file.Additionally, a new extension allows you to specify which version of Subversion you would like to work with on a given project. See UseSubversion (SVN) to get and check in files.Deprecated featuresThe following features have been deprecated as of Dreamweaver CS5:
Accessibility validation report
ASP/JavaScript server behaviors
Check Browser JavaScript behavior
Connect to FTP/RDS server without defining a site
Control Shockwave or SWF JavaScript behavior
Create Web Photo Album
27

Hide Pop-up Menu JavaScript behavior
InContext Editing Manage Available CSS Classes
Insert FlashPaper
Insert/Remove Mark of the Web
Microsoft Visual Sourcesafe integration
Navigation bars
Play Sound JavaScript behavior
Show Events menu (Behaviors panel)
Show Pop-up Menu JavaScript behavior
Timeline JavaScript behaviors
Validate tags
View Live Data
Legal Notices | Online Privacy Policy
28
Dreamweaver tutorials & getting startedTo learn more, view these recommended resources online.Dreamweaver on Adobe TVAdobe TV (Aug. 16, 2012)Learn how to do the basics of Dreamweaver CS6 with Getting Started and New Features tutorials by product experts.Getting Started and TutorialsDreamweaver Developer Center (Jul. 19, 2012)Welcome to Dreamweaver Developer Center!! Get up to speed quickly with Dreamweaver: Watch videos to get anoverview of key new features and learn how to use them, or jump right in and build your first static or dynamic websiteCustomizing a Spry Menu BarDavid Powers (Jan. 1, 2011)See how you can turn a standard menu bar into something much more elegant by careful planning and a reasonableunderstanding of CSS.Building Mobile Pages with Dreamweaver CS5.5David Karlins (Aug. 3, 2011)David Karlins, author of "Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques," takes you throughDreamweaver techniques to build mobile-friendly web pages based on jQuery JavaScript.Creating a page layout with Dreamweaver CS6Adobe Creative Team (Jul. 19, 2012)In this tutorial, you will learn the basics of webpage design, how to create design thumbnails and wireframes, insert andformat new components into a predefined CSS layout, and check for browser compatibility.Creating and Editing your Business Catalyst Website Using Dreamweaver CS6Adobe TV (Jul. 19, 2012)video-tutorialProvides you an overview of the Business Catalyst features built into CS6, working with module templates from thisinterface and display some new features like code completion and related files.
29
Workspace and workflow
30
Dreamweaver workflow and workspace
To the topDreamweaver workflow overviewWorkspace layout overviewWorkspace elements overviewDocument window overviewDocument toolbar overviewStandard toolbar overviewStyle Rendering toolbar overviewBrowser Navigation toolbar overviewCoding toolbar overviewStatus bar overviewProperty inspector overviewInsert panel overviewFiles panel overviewCSS Styles panel overviewVisual guides overviewGoLive usersDreamweaver workflow overviewYou can use several approaches to create a website. This is one approach:Plan and set up your siteDetermine where the files will go and examine site requirements, audience profiles, and site goals. Additionally, consider technical requirementssuch as user access, as well as browser, plug-in, and download restrictions. After you’ve organized your information and determined a structure,you can begin creating your site. (See Working with Dreamweaver sites.)Organize and manage your site filesIn the Files panel you can easily add, delete, and rename files and folders to change the organization as needed. The Files panel also has manytools for managing your site, transferring files to and from a remote server, setting up a Check In/Check Out process to prevent files from beingoverwritten, and synchronizing the files on your local and remote sites. From the Assets panel, you can easily organize the assets in a site; youcan then drag most assets directly from the Assets panel into a Dreamweaver document. You can also use Dreamweaver to manage aspects ofyour Adobe sites. (See Managing files and folders and Managing assets and libraries.)Lay out your web pagesChoose the layout technique that works for you, or use the Dreamweaver layout options in conjunction with one another to create your site’s look.You can use Dreamweaver AP elements, CSS positioning styles, or predesigned CSS layouts to create your layout. The table tools let you designpages quickly by drawing and then rearranging the page structure. If you want to display multiple elements at once in a browser, you can useframes to lay out your documents. Finally, you can create new pages based on a Dreamweaver template, then update the layout of those pagesautomatically when the template changes. (See Creating pages with CSS and Laying out pages with HTML.)Add content to pagesAdd assets and design elements such as text, images, rollover images, image maps, colors, movies, sound, HTML links, jump menus, and more.You can use built-in page-creation features for such elements as titles and backgrounds, type directly in the page, or import content from otherdocuments. Dreamweaver also provides behaviors for performing tasks in response to specific events, such as validating a form when the visitorclicks the Submit button or opening a second browser window when the main page has finished loading. Finally, Dreamweaver provides tools formaximizing website performance and for testing pages to ensure compatibility with different web browsers. (See Adding content to pages.)Create pages by hand codingCoding web pages by hand is another approach to creating pages. Dreamweaver provides easy-to-use visual editing tools, but it also provides asophisticated coding environment; you can use either approach, or both, to create and edit your pages. (See Working with page code.)Set up a web application for dynamic contentMany websites contain dynamic pages that allow visitors to view information stored in databases, and usually allow some visitors to add newinformation and edit information in the databases. To create such pages, you must first set up a web server and application server, create ormodify a Dreamweaver site, and connect to a database. (See Preparing to build dynamic sites.)Create dynamic pages
31
To the topTo the topThe Welcome screenThe Application barThe Document toolbarThe Standard toolbarThe Coding toolbar
The Style Rendering toolbar
In Dreamweaver, you can define a variety of sources of dynamic content, including recordsets extracted from databases, form parameters, andJavaBeans components. To add the dynamic content to a page, simply drag it onto the page.You can set your page to display one record or many records at a time, display more than one page of records, add special links to move fromone page of records to the next (and back), and create record counters to help users keep track of the records. You can encapsulate application orbusiness logic using technologies such as Adobe ColdFusion and web services. If you need more flexibility, you can create custom serverbehaviors and interactive forms. (See Making pages dynamic.)Test and publishTesting your pages is an ongoing process that happens throughout the development cycle. At the end of the cycle, you publish the site on aserver. Many developers also schedule periodic maintenance to ensure that the site remains current and functional. (See Getting and putting filesto and from your serverFor a video tutorial on what you can do with Dreamweaver, see Workspace layout overviewThe Dreamweaver workspace lets you view documents and object properties. The workspace also places many of the most common operations intoolbars so that you can quickly make changes to your documents.
Document toolbar Application bar Document window Workspace switcher Panel groups Tag selector Property inspector Files panel For a tutorial on working with different Dreamweaver workspaces, see Workspace elements overviewThe workspace includes the following elements.Dreamweaver provides many other panels, inspectors, and windows. To open the panels, inspectors, and windows, use the Window menu.Lets you open a recent document or create a new document. From the screen, you can also learn more aboutDreamweaver by taking a product tour or a tutorial.Across the top of the application window contains a workspace switcher, menus (Windows only), and other applicationContains buttons that provide options for different views of the window (such as view and Code view),various viewing options, and some common operations such as previewing in a browser.To display the toolbar, select . The toolbar contains buttons for common operationsfrom the and menus: Browse in BridgeSave AllPrint Code, and Redo.(Displayed in view only.) Contains buttons that let you perform many standard coding operations.
To display the toolbar, select Style Rendering. The toolbar contains buttons that let
®®
32
The Document windowThe Property inspectorThe Tag selectorThe Insert panelThe Files panelTo the topDesign viewSplit Code viewCode and Design viewLive viewLive Code viewTo the topShow Code ViewShow Code and Design Views
Show Design View
you see how your design would look in different media types if you use media-dependent style sheets. It also contains a button that lets youenable or disable Cascading Style Sheets (CSS) styles.Displays the current document as you create and edit it.Lets you view and change a variety of properties for the selected object or text. Each object has different properties. TheProperty Inspector is not expanded by default in the workspace layout.Located in the bar at the bottom of the window. Shows the hierarchy of tags surrounding the current selection.Click any tag in the hierarchy to select that tag and all its contents.Help you monitor and modify your work. Examples include the Insert panel, the CSS Styles panel, and the panel. To expand apanel, double-click its tab.Contains buttons for inserting various types of objects, such as images, tables, and media elements, into a document. Eachobject is a piece of HTML code that lets you set various attributes as you insert it. For example, you can insert a table by clicking the in the Insert panel. If you prefer, you can insert objects using the menu instead of the Lets you manage your files and folders, whether they are part of a Dreamweaver site or on a remote server. The panel alsolets you access all the files on your local disk.Document window overviewThe Document window shows the current document. To switch to a document, click its tab.You can select any of the following views. A design environment for visual page layout, visual editing, and rapid application development. In this view, Dreamweaver displays afully editable, visual representation of the document, similar to what you would see when viewing the page in a browser.A hand-coding environment for writing and editing HTML, JavaScript, serverlanguage code—such PHP or ColdFusion MarkupLanguage (CFML)—and any other kind of code.A split version of view that lets you scroll to work on different sections of the document at the same time.Lets you see both view and view for the same document in a single window.Similar to view, view displays a more realistic representation of what your document will look like in a browser, and lets youinteract with the document exactly as you would in a browser. view is not editable. However, you can edit in view and refresh to see your changes.Only available when viewing a document in view. Code view displays the actual code that a browser uses to executethe page, and can dynamically change as you interact with the page in view. Live Code view is not editable.When a window is maximized (the default), tabs appear at the top of the window showing the filenames of all opendocuments. Dreamweaver displays an asterisk after the filename if you’ve made changes that you haven’t saved yet.Dreamweaver also displays the Related Files toolbar below the document’s tab (or below the document’s title bar if you’re viewing documents inseparate windows). Related documents are documents associated with the current file, such as CSS files or JavaScript files. To open one of theserelated files in the window, click its filename in the Related Files toolbar.Document toolbar overviewThe Document toolbar contains buttons that let you toggle between different views of your document quickly. The toolbar also contains somecommon commands and options related to viewing the document and transferring it between the local and remote sites. The illustration belowshows the expanded
Show code view Show code and design view Show design view Live view Multiscreen Preview/Debug in browser management W3C validation Check browser compatibility Visual aids Refresh design view Document title The following options appear in the Displays only the view in the Splits the window between the and the views. When you select this combined view, theoption Design View on Top becomes available in the View Options menu.
Displays only the view in the
33
Live ViewPreview/Debug in BrowserFile ManagementW3C ValidationCheck Browser CompatibilityVisual AidsRefresh Design ViewDocument TitleTo the topTo the topRender Screen Media TypeRender Print Media TypeRender Handheld Media TypeRender Projection Media TypeRender TTY Media TypeRender TV Media TypeToggle Displaying Of CSS StylesDesign-time Style SheetsTo the top: If you are working with XML, JavaScript, CSS, or other code based file types, you cannot view the files in view and the buttons are dimmed out.Displays a non-editable, interactive, browser based view of the document.View the page as it would appear in screens of different sizes.Allows you to preview or debug your document in a browser. Select a browser from the pop-up menu.Displays the File Management pop-up menu.Lets you validate the current document or a selected tag.Lets you check if your CSS is compatible across different browsers.Lets you use different visual aids to design your pages.Refreshes the document’s view after you make changes in view. Changes you make in view don’tautomatically appear in view until you perform certain actions, such as saving the file or clicking this button.: Refreshing also updates code features that are DOM (Document Object Model) dependent, such as the ability to select a code block’sopening or closing tags.Allows you to enter a title for your document, to be displayed in the browser’s title bar. If your document already has a title, itappears in this field.Standard toolbar overviewThe Standard toolbar contains buttons for common operations from the and menus: Browse in BridgeSave All, and . Use these buttons just as you would use the equivalent menu commands.Style Rendering toolbar overviewThe Style Rendering toolbar (hidden by default) contains buttons that let you see how your design would look in different media types if you usemedia-dependent style sheets. It also contains a button that lets you enable or disable CSS styles. To display the toolbar, selectStyle Rendering
This toolbar only works if your documents use media-dependent style sheets. For example, your style sheet might specify a body rule for printmedia and a different body rule for handheld devices. For more information on creating media-dependent style sheets, see the World Wide WebConsortium website at By default, Dreamweaver displays your design for the screen media type (which shows you how a page is rendered on a computer screen). Youcan view the following media type renderings by clicking the respective buttons in the Style Rendering toolbar.Shows you how the page appears on a computer screen.Shows you how the page appears on a printed piece of paper.Shows you how the page appears on a handheld device, such as a mobile phone or a BlackBerry device.Shows you how the page appears on a projection device.Shows you how the page appears on a teletype machine.Shows you how the page appears on a television screen.Lets you enable or disable CSS styles. This button works independently of the other media buttons.Lets you specify a Design-time style sheet.For a tutorial on designing style sheets for print and handheld devices, see Browser Navigation toolbar overviewThe Browser Navigation toolbar becomes active in Live view, and shows you the address of the page you’re looking at in the view acts like a regular browser, so even if you browse to a site outside of your local site (for example, http://www.adobe.com), Dreamweaverwill load the page in the
34
To the topTo the top
Browser controls Address box Live view options By default, links are not active in view. Having links non-active lets you select or click link text in the window without being taken toanother page. To test links in view, you can enable one-time clicking or continuous clicking by selecting Follow Links or Follow Links from the options menu to the right of the address box.The Coding toolbar contains buttons that let you perform many standard coding operations, such as collapsing and expanding code selections,highlighting invalid code, applying and removing comments, indenting code, and inserting recently used code snippets. The appears vertically on the left side of the window, and is only visible when view is displayed.
You cannot undock or move the toolbar, but you can hide it (Coding).You can also edit the toolbar to display more buttons (such as Word WrapShow Hidden Characters, and Auto Indent), or hide buttons thatyou don’t want to use. To do so, however, you must edit the XML file that generates the toolbar. For more information, see Status bar overviewThe Status bar at the bottom of the window provides additional information about the document you are creating.
Tag selector Select tool Hand tool Zoom tool Set magnification Mobile size Tablet size Desktop size Window size Download size / Download time Encoding format Tag selectorShows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select that tag and all its contents. Click select the entire body of the document. To set the or attributes for a tag in the tag selector, right-click (Windows) or Control-click(Macintosh) the tag and select a class or ID from the context menu.Select toolEnables and disables the Lets you click the document and drag it in the Zoom tool and Set Magnification pop-up menuLet you set a magnification level for your document.
35
To the topTo the topThe Common categoryThe Layout categoryThe Forms categoryWindow size pop-up menu(Not available in Code view.) Lets you resize the window to predetermined or custom dimensions. When you change the view size of apage in design or live view only the dimensions of the view size change. The document size is unaltered.In addition to predetermined and custom sizes, Dreamweaver also lists sizes specified in a media query. When you select a size corresponding toa media query, Dreamweaver uses the media query to display the page. You can also change the page orientation to preview the page for mobiledevices where the page layout changes based on how the device is held.Document size and download timeShows the estimated document size and estimated download time for the page, including all dependent files such as images and other media files.Encoding indicatorShows the text encoding for the current document.Property inspector overviewThe Property Inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an insertedobject. The contents of the Property Inspector vary depending on the element selected. For example, if you select an image on your page, theProperty Inspector changes to show properties for the image (such as the file path to the image, the width and height of the image, the borderaround the image, if any, and so on).
The Property Inspector is at the lower edge of the workspace by default, but you can undock it and make it a floating panel in the workspace.Insert panel overviewThe Insert panel contains buttons for creating and inserting objects such as tables, images, and links. The buttons are organized into severalcategories, which you can switch by selecting the desired category from the Category pop-up menu. Additional categories appear when the currentdocument contains server code, such as ASP or CFML documents.
Some categories have buttons with pop-up menus. When you select an option from a pop-up menu, it becomes the default action for the button.For example, if you select Image Placeholder from the button’s pop-up menu, the next time you click the button, Dreamweaverinserts an image placeholder. Anytime you select a new option from the pop-up menu, the default action for the button changes.The Insert panel is organized in the following categories:Lets you create and insert the most commonly used objects, such as images and tables.Lets you insert tables, table elements, tags, frames, and Spry widgets. You can also choose two views for tables:Standard (default) and Expanded Tables.Contains buttons for creating forms and inserting form elements, including Spry validation widgets.
36
The Data categoryThe Spry categoryjQuery Mobile categoryThe InContext Editing categoryThe Text categoryThe Favorites categoryServer-code categoriesTo the topTo the topLets you insert Spry data objects as well as other dynamic elements like recordsets, repeated regions, and record insertionand update forms.Contains buttons for building Spry pages, including Spry data objects and widgets.Contains buttons for building sites that use jQuery Mobile.Contains buttons for building InContext editing pages, including buttons for Editable Regions, RepeatingRegions, and managing CSS classes.Lets you insert a variety of text- and list-formatting tags, such as , and Lets you group and organize the panel buttons you use the most in one common place.Available only for pages that use a particular server language, including ASP, CFML Basic, CFML Flow, CFMLAdvanced, and PHP. Each of these categories provides server-code objects that you can insert in Code view.Unlike other panels in Dreamweaver, you can drag the panel out of its default dock position and drop it into a horizontal position at the topof the Document window. When you do so, it changes from a panel to a toolbar (though you cannot hide and display it in the same way as otherFiles panel overviewUse the panel to view and manage the files in your Dreamweaver site.
When you view sites, files, or folders in the panel, you can change the size of the viewing area, and expand or collapse the When the panel is collapsed, it displays the contents of the local site, the remote site, the testing server, or the SVN repository as a list offiles. When expanded, it displays the local site and either the remote site, the testing server, or the SVN repository.For Dreamweaver sites, you can also customize the panel by changing the view—either your local or remote site—that appears by default inthe collapsed panel.(CS5.5) The panel interacts with the server at regular intervals to update its content. An error message is displayed when you try to performan action in the panel when it is running these auto-updates. To disable auto-updates, open the panel options menu, and deselectAuto-Update in the View menu.To update the contents of the panel manually, use the button in the panel. The current check-out status of files, however, is updated onlywhen auto-updates are enabled.CSS Styles panel overviewThe CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current mode), or the rules andproperties affecting an entire document (All mode). A toggle button at the top of the CSS Styles panel lets you switch between the two modes. TheCSS Styles panel also lets you modify CSS properties in both and
37
To the topTo the top
You can resize any of the panes by dragging the borders between the panes.In Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSS properties for the currentselection in the document, a pane that displays the location of selected properties (or a cascade of rules for the selected tag, depending onyour selection), and a pane that lets you edit CSS properties for the rule defining the selection.In All mode, the CSS Styles panel displays two panes: an All Rules pane (on top), and a pane (on bottom). The All Rules pane displaysa list of rules defined in the current document as well as all rules defined in style sheets attached to the current document. The lets you edit CSS properties for any selected rule in the All Rules pane.Any changes you make in the pane are applied immediately, letting you preview your work as you go.Visual guides overviewDreamweaver provides several kinds of visual guides to help you design documents and predict approximately how they appear in browsers. Youcan do any of the following:
Instantly snap the window to a desired window size to see how the elements fit on the page.
Use a tracing image as the page background to help you duplicate a design created in an illustration or image-editingapplication such as Adobe® Photoshop® or Adobe® Fireworks®.
Use rulers and guides to provide a visual cue for precise positioning and resizing of page elements.
Use the grid for precise positioning and resizing of absolutely positioned elements (AP elements).Grid marks on the page help you align AP elements, and when snapping is enabled, AP elements automatically snap to theclosest grid point when moved or resized. (Other objects, such as images and paragraphs, do not snap to the grid.) Snappingworks regardless of whether the grid is visible.GoLive usersIf you have been using GoLive and want to switch to working with Dreamweaver, you can find an online introduction to the Dreamweaverworkspace and workflow, as well as a discussion of ways to migrate your sites to Dreamweaver.
Working in the Document window
About Live view
General information about coding in Dreamweaver
Preview pages in Live view
Setting coding preferences
View and edit head content
Using visual aids for layout
Previewing pages in Dreamweaver
Insert code with the Coding toolbar
Set window size and connection speed
Zoom in and out
Resize the Document window
Set download time and size preferences
Manage windows and panels
Use the Property inspector
Use the Insert panel
Work with files in the Filespanel
Using visual aids for layout
38
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
Dreamweaver for GoLive users tutorial
39
Collapsing code
To the topTo the topAbout collapsing codeCollapse and expand code fragmentsPaste and move collapsed code fragmentsAbout collapsing codeYou can collapse and expand code fragments so that you can view different sections of your document without having to use the scroll bar. Forexample, to see all of the CSS rules in the tag that apply to a tag farther down the page, you can collapse everything between the tag and the tag so that you can see both sections of code at once. Although you can select code fragments by making selections in Designview or Code view, you can collapse code only in Code view.Note: Files created from Dreamweaver templates display all code as fully expanded, even if the template file (.dwt) contains collapsed codeCollapse and expand code fragmentsWhen you select code, a set of collapse buttons is displayed next to the selection (Minus symbols in Windows; vertical triangles on the Macintosh).Click the buttons to collapse and expand the selection. When the code is collapsed, the collapse buttons change to an expand button (a Plusbutton in Windows; a horizontal triangle on the Macintosh).Sometimes, the exact fragment of code that you selected is not collapsed. Dreamweaver uses “smart collapse” to collapse the most common andvisually pleasing selection. For example, if you selected an indented tag and then selected the indented spaces before the tag as well,Dreamweaver would not collapse the indented spaces, because most users would expect their indentations to be preserved. To disable smartcollapse and force Dreamweaver to collapse exactly what you selected, hold down the Control key before collapsing your code.Also, a warning icon on collapsed code fragments is displayed if a fragment contains errors or code that is unsupported by certain browsers.You can also collapse the code by Altclicking (Windows) or Option-clicking (Macintosh) one of the collapse buttons, or by clicking the CollapseSelection button in the Coding toolbar.Select some code.Select Edit� Code Collapse, and select any of options.Select a collapsed code fragment
In Code view, click the collapsed code fragment.Note: When you make a selection in Design view that is part of a collapsed code fragment, the fragment is automatically expanded in Code view.When you make a selection in Design view that is a complete code fragment, the fragment remains collapsed in Code view.View the code in a collapsed code fragment without expanding it
Hold the mouse pointer over the collapsed code fragment.Use keyboard shortcuts to collapse and expand code
You can also use the following keyboard shortcuts:Collapse SelectionCollapse Outside SelectionExpand SelectionCollapse Full TagCollapse Outside Full TagExpand All
40

To the topPaste and move collapsed code fragmentsYou can copy and paste collapsed code fragments, or move collapsed code fragments by dragging.Copy and paste a collapsed code fragmentSelect the collapsed code fragment.Select Edit� Copy.Place the insertion point where you want to paste the code.Select Edit� Paste.Note: You can paste into other applications, but the collapsed state of the code fragment is not preserved.Drag a collapsed code fragmentSelect the collapsed code fragment.Drag the selection to the new location.To drag a copy of the selection, Control-drag (Windows) or Altdrag (Macintosh).Note: You cannot drag to other documents.More Help topics
Legal Notices | Online Privacy Policy
41
Customizing the Dreamweaver CS5 workspace
To the topManage windows and panelsSave and switch workspacesDisplay tabbed documents (Dreamweaver Macintosh)Turn on color iconsHide and display the Dreamweaver Welcome screenAbout customizing Dreamweaver in multiuser systemsSet General preferences for DreamweaverSet Fonts preferences for documents in DreamweaverCustomize Dreamweaver highlighting colorsRestore default preferencesManage windows and panelsYou can create a custom workspace by moving and manipulating Document windows and panels. You can also save workspaces and switchamong them. For Fireworks, renaming custom workspaces can lead to unexpected behavior.Note: The following examples use Photoshop for demonstration purposes. The workspace behaves the same in all the products.Rearrange, dock, or float document windowsWhen you open more than one file, the Document windows are tabbed.
To rearrange the order of tabbed Document windows, drag a window’s tab to a new location in the group.
To undock (float or untab) a Document window from a group of windows, drag the window’s tab out of the group.Note: In Photoshop you can also choose Window� Arrange� Float in Window to float a single Document window, or Window� Arrange� Float All In Windows to float all of the Document windows at once. See tech note for more information.Note: Dreamweaver does not support docking and undocking Document windows. Use the Document window’s Minimizebutton to create floating windows (Windows), or choose Window� Tile Vertically to create side-by-side Document windows.Search “Tile Vertically” in Dreamweaver Help for more information on this topic. The workflow is slightly different for Macintosh
To dock a Document window to a separate group of Document windows, drag the window into the group.
To create groups of stacked or tiled documents, drag the window to one of the drop zones along the top, bottom, or sides ofanother window. You can also select a layout for the group by using the Layout button on the Application bar.Note: Some products do not support this functionality. However, your product may have Cascade and Tile commands in theWindow menu to help you lay out your documents.
To switch to another document in a tabbed group when dragging a selection, drag the selection over the document’s tab for aNote: Some products do not support this functionality.Dock and undock panels is a collection of panels or panel groups displayed together, generally in a vertical orientation. You dock and undock panels by movingthem into and out of a dock.
To dock a panel, drag it by its tab into the dock, at the top, bottom, or in between other panels.
To dock a panel group, drag it by its title bar (the solid empty bar above the tabs) into the dock.
To remove a panel or panel group, drag it out of the dock by its tab or title bar. You can drag it into another dock or make itfree-floating.
42
Navigator panel being dragged out to new dock, indicated by blue vertical highlight
Navigator panel now in its own dockYou can prevent panels from filling all the space in a dock. Drag the bottom edge of the dock up so it no longer meets the edge of theMove panelsAs you move panels, you see blue highlighted drop zones, areas where you can move the panel. For example, you can move a panel up or downin a dock by dragging it to the narrow blue drop zone above or below another panel. If you drag to an area that is not a drop zone, the panel floatsfreely in the workspace.Note: The position of the mouse (rather than the position of the panel), activates the drop zone, so if you can’t see the drop zone, try draggingthe mouse to the place where the drop zone should be.
To move a panel, drag it by its tab.
To move a panel group, drag the title bar.
Narrow blue drop zone indicates Color panel will be docked on its own above the Layers panel group.Title bar TabDrop zonePress Ctrl (Windows) or Command (Mac OS) while moving a panel to prevent it from docking. Press Esc while moving the panel to cancel theAdd and remove panelsIf you remove all panels from a dock, the dock disappears. You can create a dock by moving panels to the right edge of the workspace until a dropzone appears.
43
To remove a panel, right-click (Windows) or Control-click (Mac) its tab and then select Close, or deselect it from the Window
menu.
To add a panel, select it from the Window menu and dock it wherever you want.Manipulate panel groups
To move a panel into a group, drag the panel’s tab to the highlighted drop zone in the group.
Adding a panel to a panel group
To rearrange panels in a group, drag a panel’s tab to a new location in the group.
To remove a panel from a group so that it floats freely, drag the panel by its tab outside the group.
To move a group, drag the title bar (the area above the tabs).Stack floating panelsWhen you drag a panel out of its dock but not into a drop zone, the panel floats freely. The floating panel allows you to position it anywhere in theworkspace. You can stack floating panels or panel groups so that they move as a unit when you drag the topmost title bar.
Free-floating stacked panels
To stack floating panels, drag a panel by its tab to the drop zone at the bottom of another panel.
To change the stacking order, drag a panel up or down by its tab.Note: Be sure to release the tab over the narrow drop zone between panels, rather than the broad drop zone in a title bar.
To remove a panel or panel group from the stack, so that it floats by itself, drag it out by its tab or title bar.Resize panels
To minimize or maximize a panel, panel group, or stack of panels, double-click a tab. You can also double-click the tab area(the empty space next to the tabs).
To resize a panel, drag any side of the panel. Some panels, such as the Color panel in Photoshop, cannot be resized byCollapse and expand panel iconsYou can collapse panels to icons to reduce clutter on the workspace. In some cases, panels are collapsed to icons in the default workspace.
44
To the top
Panels collapsed to icons
Panels expanded from icons
To collapse or expand all panel icons in a column, click the double arrow at the top of the dock.
To expand a single panel icon, click it.
To resize panel icons so that you see only the icons (and not the labels), adjust the width of the dock until the text disappears.To display the icon text again, make the dock wider.
To collapse an expanded panel back to its icon, click its tab, its icon, or the double arrow in the panel’s title bar.In some products, if you select Auto-Collapse Icon Panels from the Interface or User Interface Options preferences, anexpanded panel icon collapses automatically when you click away from it.
To add a floating panel or panel group to an icon dock, drag it in by its tab or title bar. (Panels are automatically collapsed toicons when added to an icon dock.)
To move a panel icon (or panel icon group), drag the icon. You can drag panel icons up and down in the dock, into otherdocks (where they appear in the panel style of that dock), or outside the dock (where they appear as floating icons).Save and switch workspacesBy saving the current size and position of panels as a named workspace, you can restore that workspace even if you move or close a panel. Thenames of saved workspaces appear in the workspace switcher in the Application bar.Save a custom workspaceWith the workspace in the configuration you want to save, do one of the following:
(Illustrator) Choose Window� Workspace� Save Workspace.
(Photoshop, InDesign, InCopy) Choose Window� Workspace� New Workspace.
(Dreamweaver) Choose Window� Workspace Layout� New Workspace.
(Flash) Choose New Workspace from the workspace switcher in the Application bar.
(Fireworks) Choose Save Current from the workspace switcher in the Application bar.Type a name for the workspace.(Photoshop, InDesign) Under Capture, select one or more options:Panel LocationsSaves the current panel locations (InDesign only).Keyboard shortcutsSaves the current set of keyboard shortcuts (Photoshop only).Menus or Menu CustomizationSaves the current set of menus.
45
To the topTo the topDisplay or switch workspaces
Select a workspace from the workspace switcher in the Application bar.In Photoshop, you can assign keyboard shortcuts to each workspace to navigate among them quickly.Delete a custom workspace
Select Manage Workspaces from the workspace switcher in the Application bar, select the workspace, and then click Delete.(The option is not available in Fireworks.)
(Photoshop, InDesign, InCopy) Select Delete Workspace from the workspace switcher.
(Illustrator) Choose Window� Workspace� Manage Workspaces, select the workspace, and then click the Delete icon.
(Photoshop, InDesign) Choose Window� Workspace� Delete Workspace, select the workspace, and then click Delete.Restore the default workspaceSelect the Default or Essentials workspace from the workspace switcher in the application bar. For Fireworks, see the articleNote: In Dreamweaver, Designer is the default workspace.For Fireworks (Windows), delete these folders:Windows Vista&#xuser;&#xname;\\Users\\\\\ CS4\Windows XP\\Documents and&#xuser;&#xname; Settings\\ Data\Adobe\Fireworks CS4(Photoshop, InDesign, InCopy) Select Window&#xuser;&#xname; Workspace&#xuser;&#xname; Reset [Workspace Name](Photoshop) Restore a saved workspace arrangementIn Photoshop, workspaces automatically appear as you last arranged them, but you can restore the original, saved arrangement of panels.
To restore an individual workspace, choose Window� Workspace� Reset Workspace Name
To restore all the workspaces installed with Photoshop, click Restore Default Workspaces in the Interface preferences.To rearrange the order of workspaces in the application bar, drag them.Display tabbed documents (Dreamweaver Macintosh)You can view multiple documents in a single Document window by using tabs to identify each document. You can also display them as part of afloating workspace, in which each document appears in its own window.Open a tabbed document in a separate window
click the tab and select Move To New Window from the context menu.Combine separate documents into tabbed windows
Select Window� Combine As Tabs.Change the default tabbed document settingSelect Dreamweaver� Preferences, and then select the General category.Select or deselect Open Documents in Tabs, and click OK.Dreamweaver does not alter the display of documents that are currently open when you change preferences. Documentsopened after you select a new preference, however, display according to the preference you selected.Turn on color iconsBy default, Dreamweaver CS4 and later uses black and white icons that turn into colored icons when you hover over them. You can turn coloricons on permanently so that no hovering is required.
Do one of the following:
Choose View� Color Icons.
Switch to the Classic or Coder workspace.To turn color icons off again, deselect Color Icons in the View menu, or switch to a different workspace.
46
To the topTo the topTo the topHide and display the Dreamweaver Welcome screenThe Welcome screen appears when you start Dreamweaver and anytime that you do not have any documents open. You can choose to hide theWelcome screen, and then later display it again. When the Welcome screen is hidden and no documents are open, the Document windowis blank.Hide the Welcome screen
Select the Don’t Show Again option on the Welcome screen.Display the Welcome screenSelect Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh).In the General category, select the Show Welcome Screen option.About customizing Dreamweaver in multiuser systemsYou can customize Dreamweaver to suit your needs even in a multiuser operating system such as Windows XP or Mac OS X.Dreamweaver prevents any user’s customized configuration from affecting any other user’s customized configuration. To accomplish this goal, thefirst time you run Dreamweaver in one of the multiuser operating systems that it recognizes, the application creates copies of a variety ofconfiguration files. These user configuration files are stored in a folder that belongs to you.For example, in Windows XP, they’re stored in C:\Documents and Settings\\Application Data\Adobe\Dreamweaver\en_US\Configuration,which is hidden by default. To show hidden files and folders, select Tools� Folder Options in Windows Explorer, click the View tab, and select theShow Hidden Files and Folders option.In Windows Vista, they’re stored in C:\Users\\AppData\Roaming\Adobe\Dreamweaver \en_US\Configuration, which is hidden by default.To show hidden files and folders, select Tools� Folder Options in Windows Explorer, click the View tab, and select the Show Hidden Files andFolders option.In Mac OS X, they’re stored inside your Home folder; specifically, in Users/username/Library/ApplicationIf you reinstall or upgrade Dreamweaver, Dreamweaver automatically makes backup copies of existing user configuration files, so if youcustomized those files by hand, you still have access to the changes you made.Set General preferences for DreamweaverSelect Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh).Set any of the following options:Open Documents In TabsOpens all documents in a single window with tabs that let you switch between documents(Macintosh only).Show Welcome ScreenDisplays the Dreamweaver Welcome screen when you start Dreamweaver or when you don’t haveany documents open.Reopen Documents on StartupOpens any documents that were open when you closed Dreamweaver. If this option is notselected, Dreamweaver displays the Welcome screen or a blank screen when you start (depending on your Show WelcomeScreen setting).Warn When Opening Read-Only FilesAlerts you when you open a read-only (locked) file. Choose to unlock/check out thefile, view the file, or cancel.Enable Related FilesLets you see which files are connected to the current document (for example, CSS or JavaScript files).Dreamweaver displays a button for each related file at the top of the document, and opens the file if you click the button.Discover Dynamically-Related FilesLets you select whether Dynamically-Related Files appear in the Related Files toolbarautomatically, or after manual interaction. You can also choose to disable the discovery of Dynamically-Related Files.Update Links When Moving FilesDetermines what happens when you move, rename, or delete a document within your site.Set this preference to always update links automatically, never update links, or prompt you to perform an update. (See Updatelinks automatically.)Show Dialog When Inserting ObjectsDetermines whether Dreamweaver prompts you to enter additional information wheninserting images, tables, Shockwave movies, and certain other objects by using the Insert panel or the Insert menu. If thisoption is off, the dialog box does not appear and you must use the Property inspector to specify the source file for images, thenumber of rows in a table, and so on. For roll over images and Fireworks HTML, a dialog box always appears when you insertthe object, regardless of this option setting. (To temporarily override this setting, Control-click (Windows) or Command-click(Macintosh) when creating and inserting objects.)Enable Double-Byte Inline InputLets you enter double-byte text directly into the Document window if you are using a
47
To the topTo the top
development environment or language kit that facilitates double-byte text (such as Japanese characters). When this option is
deselected, a text input window appears for entering and converting double-byte text; the text appears in the Documentwindow after it is accepted.Switch To Plain Paragraph After HeadingSpecifies that pressing Enter (Windows) or Return (Macintosh) at the end of aheading paragraph in Design view creates a new paragraph tagged with a tag. (A heading paragraph is one that’s taggedwith a heading tag such as or .) When the option is disabled, pressing Enter or Return at the end of a headingparagraph creates a new paragraph tagged with the same heading tag (allowing you to type multiple headings in a row andthen go back and fill in details).Allow Multiple Consecutive SpacesSpecifies that typing two or more spaces in Design view creates nonbreaking spacesthat appear in a browser as multiple spaces. (For example, you can type two spaces between sentences, as you would on atypewriter.) This option is designed mostly for people who are used to typing in word processors. When the option is disabled,multiple spaces are treated as a single space (because browsers treat multiple spaces as single spaces).Use&#xstro;&#xng00; andm00; in Place of뀀 and&#xi000; Specifies that Dreamweaver applies the tag whenever you performan action that would normally apply the tag, and applies the tag whenever you perform an action that would normallyapply the tag. Such actions include clicking the Bold or Italic buttons in the text Property inspector in HTML mode andchoosing Format&#xi000; Style&#xi000; Bold or Format&#xi000; Style&#xi000; Italic. To use the and tags in your documents, deselect this option.Note: The World Wide Web Consortium discourages use of the and tags; the and tags provide more semanticinformation than the and tags do.Warn when placing editable regions within&#xp000; &#xh100; or -&#xh600; tagsSpecifies whether a warning message is displayedwhenever you save a Dreamweaver template that has an editable region within a paragraph or heading tag. The message tellsyou that users will not be able to create more paragraphs in the region. It is enabled by default.Specifies whether you want to center elements using divalign="center" or the tag when you click the AlignCenter button in the Property inspector.Note: Both of these approaches to centering have been officially deprecated as of the HTML 4.01 specification; you shoulduse CSS styles to center text. Both of these approaches are still technically valid as of the XHTML 1.0 Transitionalspecification, but they’re no longer valid in the XHTML 1.0 Strict specification.Maximum Number of History StepsDetermines the number of steps that the History panel retains and shows. (The defaultvalue should be sufficient for most users.) If you exceed the given number of steps in the History panel, the oldest steps areFor more information, see Task automation.Spelling Dictionarylists the available spelling dictionaries. If a dictionary contains multiple dialects or spelling conventions(such as American English and British English), the dialects are listed separately in the Dictionary popup menu.Set Fonts preferences for documents in DreamweaverA document’s encoding determines how the document appears in a browser. Dreamweaver font preferences let you view a given encoding in thefont and size you prefer. The fonts you select in the Fonts Preferences dialog, however, only affect the way fonts appear in Dreamweaver; they donot affect the way the document appears in a visitor’s browser. To change the way fonts appear in a browser, you need to change the text by usingthe Property inspector or by applying a CSS rule.For information on setting a default encoding for new documents, see Creating and opening documentsSelect Edit&#xh600; Preferences (Windows) or Dreamweaver&#xh600; Preferences (Macintosh).Select Fonts from the Category list on the left.Select an encoding type (such as Western European or Japanese) from the Font Settings list.Note: To display an Asian language, you must be using an operating system that supports double-byte fonts.Select a font and size to use for each category of the selected encoding.Note: To appear in the font popup menus, a font must be installed on your computer. For example, to see Japanese textyou must have a Japanese font installed.Proportional FontThe font that Dreamweaver uses to display normal text (for example, text in paragraphs, headings, andtables). The default depends on your system’s installed fonts. For most U.S. systems, the default is Times New Roman 12 pt.(Medium) on Windows and Times 12 pt. on Mac OS.Fixed FontThe font Dreamweaver uses to display text within , and tags. The default depends on your system’sinstalled fonts. For most U.S. systems, the default is Courier New 10 pt. (Small) on Windows and Monaco 12 pt. on Mac OS.The font used for all text that appears in the Code view and Code inspector. The default depends on yoursystem’s installed fonts.Customize Dreamweaver highlighting colorsUse the Highlighting preferences to customize the colors that identify template regions, library items, third-party tags, layout elements, and code in
48

To the top
Dreamweaver.
Change a highlighting colorSelect Edit� Preferences and select the Highlighting category.Beside the object you want to change the highlighting color for, click the color box, and then use the color picker to select anew color, or enter a hexadecimal value.Activate or deactivate highlighting for an objectSelect Edit� Preferences and select the Highlighting category.Beside the object you want to activate or deactivate highlighting color for, select or deselect the Show option.Restore default preferencesFor procedures on restoring default Dreamweaver preferences, see Tech Note 83912More Help topicsWorkspace layout overview
Legal Notices | Online Privacy Policy
49
Dynamic content panels
To the topTo the topBindings panelServer Behaviors panelDatabases panelComponents panelUse the Bindings panel to define and edit sources of dynamic content, add dynamic content to a page, and apply data formats to dynamic text.You can perform the following tasks with this panel:
Defining sources of dynamic content
Adding dynamic content to pages
Change or delete content sources
Use predefined data formats
Attach XML data sources
Display XML data in XSLT pages
URL parameters
Define session variables
Define application variables for ASP and ColdFusion
Define server variables
Cache content sources
Copy a recordset from one page to another page
Make HTML attributes dynamicServer Behaviors panelUse the Server Behavior panel to add Dreamweaver server behaviors to a page, edit server behaviors, and create server behaviors.You can perform the following tasks with this panel:
Displaying database records
Defining sources of dynamic content
Build master and detail pages in one operation
Building search and results pages
Building a record insert page
Building an update record page
Building a delete record page
Building a page that only authorized users can access
Building a registration page
Building a login page
Building a page that only authorized users can access
Add a stored procedure (ColdFusion)
Delete dynamic content
Adding custom server behaviors
50

To the topTo the topDatabases panelUse the Databases panel to create database connections, to inspect databases, and to insert database-related code in your pages.You can view and connect to your database with this panel:
View your database within Dreamweaver
Database connections for ColdFusion developers
Database connections for ASP developers
Database connections for PHP developersUse the Components panel to create and inspect components, and to insert component code in your pages.Note: The panel does not work in Design view.You can perform the following tasks with this panel:
Using ColdFusion components
Legal Notices | Online Privacy Policy
51
Enhancements to CSS3 support in the CSS styles panel (CS5.5)
To the topTo the topTo the topTo the topTo the topApply CSS3 properties using the pop-up panelSpecifying multiple value-setsLocate properties in the Category viewEnsuring compliance with browsersPreview changes in Live viewA pop-up panel has been introduced in the CSS panel for the following properties:
text-shadow
box-shadow
border-radius
border-imageThe options in the pop-up panel ensure that you apply the property correctly even if you are unfamiliar with their W3C syntax.
The pop-up panel displaying options for the CSS3 property border-imageApply CSS3 properties using the pop-up panel
Click the “+” icon corresponding to these properties. Use the options in the pop-up panel to apply the property.Specifying multiple value-setsCSS3 properties like text-shadow support multiple value sets. For example: text-shadow: 3px 3px #000, -3px -3px #0f0;When you specify multiple value-sets in the code view and open the pop-up panel for editing, only the first value-set is displayed. If you edit thisvalue-set in the pop-up panel, only the first value-set in the code is affected. The other value-sets are unaffected, and applied as specified in theLocate properties in the Category viewIn the category view, text-shadow is listed under the Font category. box-shadow border-radius, and border-image are listed under the BorderEnsuring compliance with browsersDreamweaver CS5.5 also supports browser (webkit, Mozilla) specific implementation of box-shadow, border-radius, and border-image properties.In the Category view, use the options under the respective browser category to ensure browser compliance for these properties. For example, tocomply with Mozilla’s implementation of the border-image property, edit -moz-border-image in the Mozilla category.Preview changes in Live view
52

Changes made to CSS properties are not displayed in the Design view. Switch to Live view to preview changes. You can also make quick edits to
CSS3 properties in the Live view, and the changes are immediately reflected in this view.The following CSS3 properties are supported in Live View:
text-shadow
border-radius
-webkit-box-shadow
-webkit-border-image
Have a tutorial you would like toshare?
Enhanced support for CSS3in DW CS5.5Preran KurnoolSupport for Text-shadow, Box-shadow, Border-radius, and Border-image
Legal Notices | Online Privacy Policy
53
Optimizing the workspace for visual development
To the topTo the topTo the topDisplaying web-application development panelsView your database within DreamweaverPreviewing dynamic pages in a browserRestrict database information displayed in DreamweaverSet the Property inspector for ColdFusion stored procedures and ASP commandsInput Name optionsDisplaying web-application development panelsSelect the Data category from the Category pop-up menu of the Insert panel to display a set of buttons that let you add dynamic content andserver behaviors to your page.The number and type of buttons that appear vary depending upon the document type opened in the Document window. Move your mouse over anicon to display a tooltip that describes what that button does.The Insert panel includes buttons to add the following items to the page:
Recordsets
Dynamic text or tables
Record navigation barsIf you switch to Code view (View� Code), additional panels might appear in their own Insert panel category, allowing you toinsert code in the page. For example, if you view a ColdFusion page in Code view, a CFML panel becomes available in theCFML category of the Insert panel.Several panels provide ways for you to create dynamic pages:
Select the Bindings panel (Window� Bindings) to define sources of dynamic content for your page and add the content tothe page.
Select the Server Behaviors panel (Window� Server Behaviors) to add server-side logic to your dynamic pages.
Select the Databases panel (Window� Databases) to explore databases or create database connections.
Select the Components panel (Window� Components) to inspect, add, or modify code for ColdFusion components.Note: The Components panel is enabled only if you open a ColdFusion page.A server behavior is the set of instructions inserted in a dynamic page at design time and executed on the server at run time.For a tutorial on setting up the development workspace, see View your database within DreamweaverAfter connecting to your database, you can view its structure and data within Dreamweaver.Open the Databases panel (Window� Databases).The Databases panel displays all the databases for which you created connections. If you’re developing a ColdFusion site, thepanel displays all the databases that have data sources defined in the ColdFusion Administrator.Note: Dreamweaver looks at the ColdFusion server you defined for the current site.If no database appears in the panel, you must create a database connection.To display the tables, stored procedures, and views in the database, click the Plus (+) sign beside a connection in the list.To display the columns in the table, click a table name.The column icons reflect the data type and indicate the primary key of the table.To view the data in a table, right-click (Windows) or Controlclick (Macintosh) the table name in the list, and select View Datafrom the popup menu.Previewing dynamic pages in a browser
54

To the topTo the topTo the topWeb application developers often debug their pages by checking them often in a web browser. You can quickly view dynamic pages in a browserwithout first manually uploading them to a server (press F12).To preview dynamic pages, you must complete the Testing Server category of the Site Definition dialog box.You can specify that Dreamweaver use temporary files instead of the original files. With this option, Dreamweaver runs a temporary copy of thepage on a web server before displaying it in your browser. (Dreamweaver then deletes the temporary file from the server.) To set this option, selectEdit� Preferences� Preview In Browser.The Preview In Browser option does not upload related pages such as a results or a detail page, dependent files such as image files, or server-side includes. To upload a missing file, select Window� Site to open the Site panel, select the file under Local Folder, and click the blue up arrowin the toolbar to copy the file to the web server folder.Restrict database information displayed in DreamweaverAdvanced users of large database systems like Oracle should restrict the number of database items retrieved and displayed by Dreamweaver atdesign time. An Oracle database may contain items that Dreamweaver cannot process at design time. You can create a schema in Oracle anduse it in Dreamweaver to filter out unnecessary items at design time.Note: You cannot create a schema or catalog in Microsoft Access.Other users may benefit from restricting the amount of information Dreamweaver retrieves at design time. Some databases contain dozens oreven hundreds of tables, and you might prefer not to list them all while you work. A schema or catalog can restrict the number of database itemsthat are retrieved at design time.You must create a schema or catalog in your database system before you can apply it in Dreamweaver. Consult your database systemdocumentation or your system administrator.Note: You cannot apply a schema or catalog in Dreamweaver if you’re developing a ColdFusion application, or using Microsoft Access.Open a dynamic page in Dreamweaver; then open the Databases panel (Window� Databases).
If the database connection exists, right-click (Windows) or Controlclick (Macintosh) the connection in the list, and selectEdit Connection from the popup menu.
If the connection does not exist, click the Plus (+) button at the top of the panel and create it.In the dialog box for the connection, click Advanced.Specify your schema or catalog, and click OK.Set the Property inspector for ColdFusion stored procedures and ASP commandsModify the selected stored procedure. The available options vary depending on the server technology.
Edit any of the options. When you select a new option in the inspector, Dreamweaver updates the page.Input Name optionsThis Property inspector appears when Dreamweaver encounters an unrecognized input type. Typically this occurs because of a typing or otherdata entry error.If you change the field type in the Property inspector to a value that Dreamweaver recognizes—for example, if you correct the spelling error—theProperty inspector updates to show the properties for the recognized type. Set any of the following options in the Property inspector:Input NameAssigns a name to the field. This box is required, and the name must be unique.Sets the input type of the field. The contents of this box reflect the input type value that currently appears in your HTML source code.Sets the value of the field.Opens the Parameters dialog box so you can view the current attributes of the field, as well as add or remove attributes.More Help topicsDevelopment workspace tutorialSet up a testing server
Legal Notices | Online Privacy Policy
55
Setting coding preferences
To the topTo the topTo the topAbout coding preferencesSet the code appearanceChange the code formatSet the code rewriting preferencesSet the code colorsUse an external editorAbout coding preferencesYou can set coding preferences such as code formatting and coloring, among others, to meet your specific needs.Note: To set advanced preferences, use the Tag Library editor (see Managing tag libraries).Set the code appearanceYou can set word wrapping, display line numbers for the code, highlight invalid code, set syntax coloring for code elements, set indenting, andshow hidden characters from the View� Code View Options menu.View a document in Code view or the Code inspector.Do one of the following:
Select View� Code View Options
Click the View Options button
in the toolbar at the top of Code view or the Code inspector.Select or deselect any of the following options:Word WrapWraps the code so that you can view it without scrolling horizontally. This option doesn’t insert line breaks; it justmakes the code easier to view.Line NumbersDisplays line numbers along the side of the code.Hidden CharactersDisplays special characters in place of white space. For example, a dot replaces each space, a doublechevron replaces each tab, and a paragraph marker replaces each line break.Note: Soft line breaks that Dreamweaver uses for word wrapping are not displayed with a paragraph marker.Highlight Invalid CodeCauses Dreamweaver to highlight in yellow all HTML code that isn’t valid. When you select an invalidtag, the Property inspector displays information on how to correct the error.Syntax ColoringEnables or disables code coloring. For information on changing the coloring scheme, see Set the codeAuto IndentMakes your code indent automatically when you press Enter while writing code. The new line of code indents tothe same level as the previous line. For information on changing the indent spacing, see the Tab Size option in Change thecode format.Change the code formatYou can change the look of your code by specifying formatting preferences such as indentation, line length, and the case of tag and attributeAll the Code Format options, except the Override Case Of option, are automatically applied only to new documents or additions to documents thatyou subsequently create.To reformat existing HTML documents, open the document, and select Commands� Apply Source Formatting.Select Edit� Preferences.Select Code Format from the Category list on the left.Set any of the following options:Indicates whether code generated by Dreamweaver should be indented (according to the indentation rules specified inthese preferences) or not.Note: Most of the indentation options in this dialog box apply only to code generated by Dreamweaver, not to code that youtype. To make each new line of code that you type indent to the same level as the previous line, select View� Code View
56
To the top
Options Auto-Indent option. For more information, see Set the code appearance.
(Text box and popup menu) Specifies how many spaces or tabs Dreamweaver should use to indent code that itgenerates. For example, if you type 3 in the box and select Tabs in the popup menu, then code generated by Dreamweaveris indented using three tab characters for every level of indentation.Tab SizeDetermines how many characters wide each tab character appears in Code view. For example, if Tab Size is set to4, then each tab is displayed in Code view as a four-character-wide blank space. If, additionally, Indent With is set to 3 Tabs,then code generated by Dreamweaver is indented using three tab characters for every level of indentation, which appears inCode view as a twelve-character-wide blank space.Note: Dreamweaver indents using either spaces or tabs; it doesn’t convert a run of spaces to a tab when inserting code.Line Break TypeSpecifies the type of remote server (Windows, Macintosh, or UNIX) that hosts your remote site. Choosingthe correct type of line break characters ensures that your HTML source code appears correctly when viewed on the remoteserver. This setting is also useful when you are working with an external text editor that recognizes only certain kinds of linebreaks. For example, use CR LF (Windows) if Notepad is your external editor, and use CR (Macintosh) if SimpleText is yourexternal editor.Note: For servers that you connect to using FTP, this option applies only to binary transfer mode; the ASCII transfer mode inDreamweaver ignores this option. If you download files using ASCII mode, Dreamweaver sets line breaks based on theoperating system of your computer; if you upload files using ASCII mode, the line breaks are all set to CR LF.Default Tag Case and Default Attribute CaseControl the capitalization of tag and attribute names. These options areapplied to tags and attributes that you insert or edit in Design view, but they are not applied to the tags and attributes that youenter directly in Code view, or to the tags and attributes already in a document when you open it (unless you also select oneor both of the Override Case Of options).Note: These preferences apply only to HTML pages. Dreamweaver ignores them for XHTML pages because uppercase tagsand attributes are invalid XHTML.Override Case Of: Tags and AttributesSpecifies whether to enforce your specified case options at all times, including whenyou open an existing HTML document. When you select one of these options and click OK to dismiss the dialog box, all tagsor attributes in the current document are immediately converted to the specified case, as are all tags or attributes in eachdocument you open from then on (until you deselect this option again). Tags or attributes you type in Code view and in theQuick Tag Editor are also converted to the specified case, as are tags or attributes you insert using the Insert panel. Forexample, if you want tag names always to be converted to lowercase, specify lowercase in the Default Tag Case option, andthen select the Override Case Of: Tags option. Then when you open a document that contains uppercase tag names,Dreamweaver converts them all to lowercase.Note: Older versions of HTML allowed either uppercase or lowercase tag and attribute names, but XHTML requireslowercase for tag and attribute names. The web is moving toward XHTML, so it’s generally best to use lowercase tag andattribute names.TD Tag: Do Not Include A Break Inside The TD TagAddresses a rendering problem that occurs in some older browserswhen white space or line breaks exist immediately after a&#xtd00; tag, or immediately before a&#x/td0; tag. When you select thisoption, Dreamweaver does not write line breaks after a&#xtd00; or before a&#x/td0; tag, even if the formatting in the Tag Libraryindicates that the line break should be there.Advanced FormattingLets you set formatting options for Cascading Style Sheets(CSS) code and for individual tags andattributes in the Tag Library Editor.White Space Character(Japanese version only) Lets you select either   or Zenkaku space for HTML code. The whitespace selected in this option will be used for empty tags when creating a table and when the “Allow Multiple ConsecutiveSpaces” option is enabled in Japanese Encoding pages.Set the code rewriting preferencesUse the code rewriting preferences to specify how and whether Dreamweaver modifies your code while opening documents, when copying andpasting form elements, and when entering attribute values and URLs using tools such as the Property inspector. These preferences have no effectwhen you edit HTML or scripts in Code view.If you disable the rewriting options, invalid-markup items are displayed in the Document window for HTML that it would have rewritten.Select Edit&#x/td0; Preferences (Windows) or Dreamweaver&#x/td0; Preferences (Macintosh).Select Code Rewriting from the Category list on the left.Set any of the following options:Fix Invalidly Nested and Unclosed TagsRewrites overlapping tags. For example, is rewritten as This option also inserts closing quotation marks and closing brackets if they are missing.Rename Form Items When PastingEnsures you don’t have duplicate names for form objects. This option is enabled byNote: Unlike the other options in this preferences dialog box, this option does not apply when you open a document, onlywhen you copy and paste a form element.
57
To the topTo the top
Remove Extra Closing TagsDeletes closing tags that have no corresponding opening tag.
Warn When Fixing Or Removing TagsDisplays a summary of technically invalid HTML that Dreamweaver attempted tocorrect. The summary notes the location of the problem (using line and column numbers) so that you can find the correctionand ensure that it’s rendering as intended.Never Rewrite Code: In Files With ExtensionsAllows you to prevent Dreamweaver from rewriting code in files with thespecified filename extensions. This option is particularly useful for files that contain third-party tags.Encode &#x,-66; , &, And " In Attribute Values Using &Ensures that attribute values that you enter or edit using Dreamweavertools such as the Property inspector contain only legal characters. This option is enabled by default.Note: This option and the following options do not apply to URLs that you type in Code view. Also, they do not causeexisting code already in a file to change.Do Not Encode Special CharactersPrevents Dreamweaver from changing URLs to use only legal characters. This option isenabled by default.Encode Special Characters In URL Using &#Ensures that when you enter or edit URLs using Dreamweaver tools such asthe Property inspector, those URLs contain only legal characters.Encode Special Characters In URL Using %Operates the same way as the preceding option, but uses a different methodof encoding special characters. This encoding method (using the percent sign) may be more compatible with older browsers,but doesn’t work as well with characters from some languages.Set the code colorsUse the code coloring preferences to specify colors for general categories of tags and code elements, such as form-related tags or JavaScriptidentifiers. To set color preferences for a specific tag, edit the tag definition in the Tag Library editor.Select Edit&#x,-66; Preferences (Windows) or Dreamweaver&#x,-66; Preferences (Macintosh).Select Code Coloring from the Category list on the left.Select a document type from the Document type list. Any edits you make to code coloring preferences will affect alldocuments of this type.Click the Edit Coloring Scheme button.In the Edit Coloring Scheme dialog box, select a code element from the Styles For list, and set its text color, background color,and (optional) style (bold, italic, or underline). The sample code in the Preview pane changes to match the new colors andClick OK to save your changes and close the Edit Coloring Scheme dialog box.Make any other necessary selections in Code Coloring preferences and click OK.Default backgroundsets the default background color for Code view and the Code inspector.Hidden characterssets the color for hidden characters.Live Code backgroundsets the background color for Live Code view. The default color is yellow.Live Code changessets the highlighting color of code that changes in Live Code view. The default color is pink.Read only backgroundsets the background color for read only text.Use an external editorYou can specify an external editor to use for editing files with specific filename extensions. For example, you can start a text editor such as BBEdit,Notepad, or TextEdit from Dreamweaver to edit JavaScript (JS) files.You can assign different external editors for different filename extensions.Set an external editor for a file typeSelect Edit&#x,-66; Preferences.Select File Types/Editors from the Category list on the left, set the options, and click OK.Open In Code ViewSpecifies the filename extensions that automatically open in Code view in Dreamweaver.External Code EditorSpecifies the text editor to use.Reload Modified FilesSpecifies the behavior when Dreamweaver detects that changes were made externally to a documentthat is open in Dreamweaver.Save On LaunchSpecifies whether Dreamweaver should always save the current document before starting the editor, neversave the document, or prompt you to ask whether to save or not each time you start the external editor.Specifies editors for various media file types.
58

Start an external code editor
Select Edit� Edit with External Editor.More Help topicsCoding toolbar overviewClean up Microsoft Word HTML files
Legal Notices | Online Privacy Policy
59
Setting up your coding environment
To the topTo the topTo the topUsing coder-oriented workspacesViewing codeCustomizing keyboard shortcutsOpen files in Code view by defaultUsing coder-oriented workspacesYou can adapt the coding environment in Dreamweaver to fit the way you work. For example, you can change the way you view code, set updifferent keyboard shortcuts, or import and use your favorite tag library.Dreamweaver comes with several workspace layouts designed for an optimal coding experience. From the workspace switcher on the Applicationbar, you can select from Application Developer, Application Developer Plus, Coder, and Coder Plus workspaces. All of these workspaces showCode view by default (in either the entire Document window, or in Code and Design views), and have panels docked on the left side of the screen.All but Application Developer Plus eliminate the Property inspector from the default view.If none of the pre-designed workspaces offer exactly what you need, you can customize your own workspace layout by opening and dockingpanels where you want them, and then saving the workspace as a custom workspace.Viewing codeYou can view the source code for the current document in several ways: you can display it in the Document window by enabling Code view, youcan split the Document window to display both the page and its associated code, or you can work in the Code inspector, a separate codingwindow. The Code inspector works just like Code view; you can think of it as a detachable Code view for the current document.View code in the Document window
Select View� Code.Code and edit a page simultaneously in the Document windowSelect View� Code and Design.The code appears in the top pane and the page appears in the bottom pane.To display the page on top, select Design View On Top from the View Options menu on the Document toolbar.To adjust the size of the panes in the Document window, drag the splitter bar to the desired position. The splitter bar islocated between the two panes.Code view is updated automatically when you make changes in Design view. However, after making changes in Code view,you must manually update the document in Design view by clicking in Design view or pressing F5.View code in a separate window with the Code inspectorThe Code inspector lets you work in a separate coding window, just like working in Code view.
Select Window� Code Inspector. The toolbar includes the following options:File ManagementPuts or gets the file.Preview/Debug In BrowserPreviews or debugs your document in a browser.Refresh Design ViewUpdates the document in Design view so that it reflects any changes you made in the code. Changes you make in the codedon’t automatically appear in Design view until you perform certain actions, such as saving the file or clicking this button.Opens the Reference panel. See Use language-reference material.Lets you move quickly in the code. See Go to a JavaScript or VBScript function.View OptionsLets you determine how the code is displayed. See Set the code appearance.To use the Coding toolbar along the left side of the window, see Insert code with the Coding toolbar.Customizing keyboard shortcutsYou can use your favorite keyboard shortcuts in Dreamweaver. If you’re accustomed to using specific keyboard shortcuts—for example,Shift+Enter to add a line break, or Control+G to go to a specific position in the code—you can add them to Dreamweaver using the KeyboardShortcut Editor.
60

To the topFor instructions, see Customize keyboard shortcuts.Open files in Code view by defaultWhen you open a file type that normally doesn’t contain any HTML (for example, a JavaScript file), the file opens in Code view (or Code inspector)instead of Design view. You can specify which file types open in Code view.Select Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh).Select File Types/Editors from the Category list on the left.In the Open In Code View box, add the filename extension of the file type you want to open automatically in Code view.Type a space between filename extensions. You can add as many extensions as you like.More Help topics
Legal Notices | Online Privacy Policy
61
Use the Insert panel
To the topTo the topTo the topTo the topHide or show the Insert panelShow the buttons in a particular categoryDisplay the pop-up menu for a buttonInsert an objectBypass the object-insertion dialog box and insert an empty placeholder objectModify preferences for the Insert panelAdd, delete, or manage items in the Favorites category of the Insert panelInsert objects using buttons in the Favorites categoryDisplay the Insert panel as a horizontal Insert barReturn the horizontal Insert bar to a panel groupShow horizontal Insert bar categories as tabsShow horizontal Insert bar categories as a menuThe Insert panel contains buttons for creating and inserting objects such as tables and images. The buttons are organized into categories.Hide or show the Insert panel
Select Window� Insert.Note: If you are working with certain types of files, such as XML, JavaScript, Java, and CSS, the Insert panel and the Design view option aredimmed because you cannot insert items into these code files.Show the buttons in a particular category
Select the category name from the Category pop-up menu. For example, to show buttons for the Layout category, select Layout.Display the pop-up menu for a button
Click the down arrow beside the button’s icon.
Insert an objectSelect the appropriate category from the Category pop-up menu of the Insert panel.
62
To the topTo the topTo the topTo the topTo the topDo one of the following:
Click an object button or drag the button’s icon into the Document window.
Click the arrow on a button, then select an option from the menu.Depending on the object, a corresponding object-insertion dialog box may appear, prompting you to browse to a file orspecify parameters for an object. Or, Dreamweaver may insert code into the document, or open a tag editor or a panel foryou to specify information before the code is inserted.For some objects, no dialog box appears if you insert the object in Design view, but a tag editor appears if you insert theobject in Code view. For a few objects, inserting the object in Design view causes Dreamweaver to switch to Code viewbefore inserting the object.Note: Some objects, such as named anchors, are not visible when the page is viewed in a browser window. You candisplay icons in Design view that mark the locations of such invisible objects.Bypass the object-insertion dialog box and insert an empty placeholder object
Control-click (Windows) or Option-click (Macintosh) the button for the object.For example, to insert a placeholder for an image without specifying an image file, Control-click or Option-click the Image button.Note: This procedure does not bypass all object-insertion dialog boxes. Many objects, including AP elements and framesets, do not insertplaceholders or defaultvalued objects.Modify preferences for the Insert panelSelect Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh).In the General category of the Preferences dialog box, deselect Show Dialog When Inserting Objects to suppress dialog boxeswhen you insert objects such as images, tables, scripts, and head elements or by holding down the Control key (Windows) orthe Option key (Macintosh) while creating the object.When you insert an object with this option off, the object is given default attribute values. Use the Property inspector tochange object properties after inserting the object.Add, delete, or manage items in the Favorites category of the Insert panelSelect any category in the Insert panel.Right-click (Windows) or Control-click (Macintosh) in the area where the buttons appear, and then select Customize Favorites.In the Cutomize Favorite Objects dialog box, make changes as necessary, and click OK.
To add an object, select an object in the Available Objects pane on the left, and then click the arrow between the twopanes or double-click the object in the Available Objects pane.Note: You can add one object at a time. You cannot select a category name, such as Common, to add an entire categoryto your favorites list.
To delete an object or separator, select an object in the Favorite Objects pane on the right, and then click the RemoveSelected Object in Favorite Objects List button above the pane.
To move an object, select an object in the Favorite Objects pane on the right, and then click the Up or Down arrow buttonabove the pane.
To add a separator below an object, select an object in the Favorite Objects pane on the right, and then click the AddSeparator button below the pane.If you’re not in the Favorites category of the Insert panel, select that category to see your changes.Insert objects using buttons in the Favorites category
Select the Favorites category from the Category pop-up menu of the Insert panel, and then click the button for any Favorites object that youDisplay the Insert panel as a horizontal Insert barUnlike other panels in Dreamweaver, you can drag the Insert panel out of its default dock position and drop it into a horizontal position at the topof the Document window. When you do so, it changes from a panel to a toolbar (though you cannot hide and display it in the same way as otherClick the Insert panel’s tab and drag it to the top of the Document window.
63

To the topTo the topTo the top
When you see a horizontal blue line across the top of the Document window, drop the Insert panel into position.Note: The horizontal Insert bar is also a default part of the Classic workspace. To switch to the Classic workspace, select Classic from theworkspace switcher in the Application bar.Return the horizontal Insert bar to a panel groupClick the horizontal Insert bar’s gripper (on the left side of the Insert bar) and drag the bar to the place where your panels arePosition the Insert panel and drop it. A blue line indicates where you can drop the panel.Show horizontal Insert bar categories as tabs
Click the arrow beside the category name on the left end of the horizontal Insert bar, and then select Show as Tabs.Show horizontal Insert bar categories as a menu
Right-click (Windows) or Control-click (Macintosh) a category tab in the horizontal Insert bar, and then select Show as Menus.More Help topicsInsert panel overview
Legal Notices | Online Privacy Policy
64
Using toolbars, inspectors, and context menus
To the topTo the topTo the topDisplay toolbarsUse the Property inspectorUse context menusDisplay toolbarsUse the Document and Standard toolbars to perform document-related and standard editing operations; the Coding toolbar to insert code quickly;and the Style Rendering toolbar to display your page as it would appear in different media types. You can choose to display or hide the toolbars as
Select View� Toolbars, and then select the toolbar.
Right-click (Windows) or Controlclick (Macintosh) any of the toolbars and select the toolbar from the context menu.Note: To display or hide the Coding toolbar in the Code inspector (Window� Code Inspector), select Coding Toolbar from theView Options popup menu at the top of the inspector.Use the Property inspectorThe Property inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an insertedobject. The contents of the Property inspector vary depending on the element(s) selected.To access help for a particular Property inspector, click the help button in the upper right corner of the Property inspector, or select Help from aProperty inspector’s Options menu.Note: Use the Tag inspector to view and edit every attribute associated with a given tag’s properties.Show or hide the Property inspector
Select Window� Properties.Expand or collapse the Property inspector
Click the expander arrow in the lower-right corner of the Property inspector.View and change properties for a page elementSelect the page element in the Document window.You might have to expand the Property inspector to view all the properties for the selected element.Change any of the properties in the Property inspector.Note: For information on specific properties, select an element in the Document window, and then click the Help icon in theupper-right corner of the Property inspector.If your changes are not immediately applied in the Document window, apply the changes in one of these ways:
Click outside the property-editing text fields.
Press Enter (Windows) or Return (Macintosh).
Press Tab to switch to another property.Use context menusContext menus provide convenient access to the most useful commands and properties related to the object or window you’re working with.Context menus list only those commands that pertain to the current selection.Right-click (Windows) or Controlclick (Macintosh) the object or window.Select a command from the context menu.
65

More Help topicsDocument toolbar overviewSet text properties in the Property inspector
Legal Notices | Online Privacy Policy
66
Working in the Document window
To the topTo the topSwitch between views in the Document windowCascade or tile Document windowsResize the Document windowSet window size and connection speedReports in DreamweaverSwitch between views in the Document windowYou can view a document in the Document window in Code view, Split Code view, Design view, Code and Design views (Split view), or Live view.You also have the option of viewing Split Code view or Code and Design views horizontally or vertically. (Horizontal display is the default.)Switch to Code view
Do one of the following:
Select View� Code.
In the Document toolbar, click the Show Code View button.
Switch to Split Code viewSplit Code view splits your document in two so that you can work on two sections of the code at once.
Select View� Split Code.Switch to Design view
Do one of the following:
Select View� Design.
In the Document toolbar, click the Show Design View button.
Show both Code and Design views
Do one of the following:
Select View� Code and Design.
In the Document toolbar, click the Show Code and Design Views button.
By default, Code view appears at the top of the Document window and Design view appears at the bottom. To display Design view on top, selectView� Design View on Top.Toggle between Code view and Design view
Press Control+backquote (`).If both views are showing in the Document window, this keyboard shortcut changes keyboard focus from one view to the other.Split views verticallyThis option is only available for Split Code view and Code and Design views (Split view). It is disabled for Code view and Design view.Make sure that you are in Split Code view (View� Split Code) or Code and Design views (View� Code and Design).Select View� Split Vertically.If you are in Code and Design views, you have the option of displaying Design view on the left (View� Design View on Left).
67
To the top
Cascade or tile Document windows
If you have many documents open at once, you can cascade or tile them.Cascade Document windows
Select Window� Cascade.Tile Document windows
(Windows) Select Window� Tile Horizontally or Window� Tile Vertically.
(Macintosh) Select Window� Tile.Resize the Document windowThe Status bar displays the Document window’s current dimensions (in pixels). To design a page that looks its best at a specific size, you canadjust the Document window to any of the predetermined sizes, edit those predetermined sizes, or create sizes.When you change the view size of a page in design or live view only the dimensions of the view size change. The document size is unaltered.In addition to predetermined and custom sizes, Dreamweaver also lists sizes specified in a media query. When you select a size corresponding toa media query, Dreamweaver uses the media query to display the page. You can also change the page orientation to preview the page for mobiledevices where the page layout changes based on how the device is held.Resize the Document window to a predetermined size
Select one of the sizes from the Window Size popup menu at the bottom of the Document window. Dreamweaver CS5.5 and later offers anextended list of choices, including choices for common mobile devices (as pictured below).
The window size shown reflects the inside dimensions of the browser window, without borders; the monitor size or mobile device is listed to theFor less precise resizing, use your operating system’s standard methods of resizing windows, such as dragging the lower-right corner of aNote: (Windows only) Documents within the Document window are maximized by default, and you can't resize a document when it's maximized.To de-maximize the document, click the de-maximize button
in the upper right corner of the document.Change the values listed in the Window Size popup menuSelect Edit Sizes from the Window Size popup menu.Click any of the width or height values in the Window Sizes list, and type a new value.To make the Document window adjust only to a specific width (leaving the height unchanged), select a height value anddelete it.Click the Description box to enter descriptive text about a specific size.Add a new size to the Window Size popup menuSelect Edit Sizes from the Window Size popup menu.Click the blank space below the last value in the Width column.Enter values for Width and Height.
68

To the topTo the top
To set the Width or Height only, simply leave one field empty.
Click the Description field to enter descriptive text about the size you added.For example, you might type or average PC next to the entry for an 800 x 600 pixel monitor, and in. Mac next to theentry for an 832 x 624 pixel monitor. Most monitors can be adjusted to a variety of pixel dimensions.Set window size and connection speedSelect Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh).Select Status Bar (CS5) or Window Sizes (CS5.5 and later) from the Category list on the left.Set any of the following options:Window Sizeslets you customize the window sizes that appear in the Status bar’s popup menu.determines the connection speed (in kilobits per second) used to calculate the download size. Thedownload size for the page is displayed in the Status bar. When an image is selected in the Document window, the image’sdownload size is displayed in the Property inspector.Reports in DreamweaverYou can run reports in Dreamweaver to find content, troubleshoot, or test content. You can generate the following types of reports:Lets you search for tags, attributes, and specific text within tags.Lets you search for helpful reference information.Lets you check for code or syntax errors.Browser CompatibilityLets you test the HTML in your documents to see if any tags or attributes are unsupported by your target browsers.Link CheckerLets you find and fix broken, external, and orphaned links.Site ReportsEnable you to improve workflow and test HTML attributes in your site. Workflow reports include checked out by, recently modified,and design notes; HTML reports include combinable nested font tags, accessibility, missing Alt text, redundant nested tags, removable emptytags, and untitled documents.FTP LogEnables you to view all FTP file-transfer activity.Server DebugLets you view information to debug an Adobe® ColdFusion® application.More Help topicsDocument window overview
Legal Notices | Online Privacy Policy
69
Zoom in and out
To the topTo the topTo the topTo the topTo the topTo the topZoom in or out on a pageEdit a page after zoomingPan a page after zoomingFill the Document window with a selectionFill the Document window with an entire pageFill the Document window with the entire width of a pageDreamweaver lets you increase the magnification (zoom in) in the Document window so that you can check the pixel accuracy of graphics, selectsmall items more easily, design pages with small text, design large pages, and so on.Note: The zooming tools are only available in Design view.Zoom in or out on a pageClick the Zoom tool (the magnifying glass icon) in the lower-right corner of the Document window.Do one of the following:
Click the spot on the page you want to magnify until you’ve achieved the desired magnification.
Drag a box over the area on the page that you want to zoom in on and release the mouse button.
Select a preset magnification level from the Zoom popup menu.
Type a magnification level in the Zoom text box.You can also zoom in without using the Zoom tool by pressing Control+= (Windows) or Command+= (Macintosh).To zoom out (reduce magnification), select the Zoom tool, press Alt (Windows) or Option (Macintosh) and click on the page.You can also zoom out without using the Zoom tool by pressing Control+- (Windows) or Command+- (Macintosh).Edit a page after zooming
Click the Select tool (the pointer icon) in the lower-right corner of the Document window, and click inside the page.Pan a page after zoomingClick the Hand tool (the hand icon) in the lower-right corner of the Document window.Drag the page.Fill the Document window with a selectionSelect an element on the page.Select View� Fit Selection.Fill the Document window with an entire page
Select View� Fit AllFill the Document window with the entire width of a page
Select View� Fit WidthMore Help topicsStatus bar overview
Legal Notices | Online Privacy Policy
70
Site management
71
Connect to a remote server
To the topSpecify a connection methodSet Advanced server optionsConnect to or disconnect from a remote folder with network accessConnect to or disconnect from a remote folder with FTP accessTroubleshoot the remote folder setupOnce you’ve specified a local site in Dreamweaver, you can specify a remote server for your site as well. The remote server (often referred to asthe web server) is where you publish your site files so that people can view them online. The remote server is simply another computer like yourlocal computer with a collection of files and folders on it. You’ll specify a folder for your site on the remote server, just as you specified a folder foryour local site on your local computer.Dreamweaver refers to the specified remote folder as your remote siteWhen you set up a remote folder, you must select a connection method for Dreamweaver to upload and download files to and from your webserver. The most typical connection method is FTP, but Dreamweaver also supports local/network, FTPS, SFTP, WebDav, and RDS connectionmethods. If you don’t know which connection method to use, ask your ISP or your server administrator.Dreamweaver also supports connections to IPv6-enabled servers. Supported connection types include FTP, SFTP, WebDav, and RDS. Formore information, see Specify a connection methodFTP connectionsUse this setting if you connect to your web server using FTP.Business Catalyst users: To ensure better security, Business Catalyst will support only SFTP from December 2012. Ensure that you switch yoursite settings to SFTP. For more info, see the section on SFTP connections on this page.Select Site� Manage Sites.Click New to set up a new site, or select an existing Dreamweaver site and click Edit.In the Site Setup dialog box, select the Servers category and do one of the following:
Click the Add New Server button to add a new server
Select an existing server and click the Edit Existing Server buttonThe following illustration shows the Basic screen of the Server category with the text fields already populated.
Basic screen of the Server category, Site Setup dialog box.In the Server Name text box, specify a name for the new server. The name can be anything of your choosing.Select FTP from the Connect Using pop-up menu.In the FTP Address text box, enter the address of the FTP server to which you upload files for your website.
72
Note:Note:Note:
Your FTP address is the full Internet name of a computer system, such as ftp.mindspring.com. Enter the full address without
any additional text. In particular, don’t add a protocol name in front of the address.If you do not know your FTP address, contact your web hosting company.Port 21 is the default port for receiving FTP connections. You can change the default port number by editing the textbox to the right. The result when you save your settings is a colon and the new port number appended to your FTP address(for example, ftp.mindspring.com:29).In the Username and Password text boxes, enter the username and password that you use to connect to the FTP server.Click Test to test your FTP address, username, and password.You must obtain the FTP address, username and password information from the system administrator for the companyhosting your site. No one else has access to this information. Enter the information exactly as your system administrator givesit to you.Dreamweaver saves your password by default. Deselect the Save option if you prefer that Dreamweaver prompt you for apassword each time you connect to the remote server.In the Root Directory text box, enter the directory (folder) on the remote server where you store documents that are visible tothe public.If you’re uncertain about what to enter as the root directory, contact the server’s administrator or leave the text box blank. Onsome servers, your root directory is the same as the directory you first connect to with FTP. To find out, connect to the server.If a folder with a name like public_html, or www, or your user name, appears in the Remote File view in your Files panel,that’s probably the directory you should enter in the Root Directory text box.In the Web URL text box enter the URL of your website (for example, http://www.mysite.com). Dreamweaver uses the WebURL to create site root-relative links, and to verify links when you use the link checker.For a more extensive explanation of this option, see Advanced Settings category.Expand the More Options section if you still need to set more options.Select Use Passive FTP if your firewall configuration requires use of passive FTP.Passive FTP enables your local software to set up the FTP connection rather than requesting the remote server to set it up. Ifyou’re not sure whether you use passive FTP, check with your system administrator, or try both checking and unchecking theUse Passive FTP option.For more information, see TechNote 15220 on the Adobe website at Select Use IPv6 Transfer Mode if you are using an IPv6-enabled FTP server.With the deployment of version 6 of the Internet Protocol (IPv6), EPRT and EPSV have replaced the FTP commands PORTand PASV, respectively. Thus, if you are trying to connect to an IPv6-enabled FTP server, you must use the extended passive(EPSV) and the extended active (EPRT) commands for your data connection.For more information, see Select Use Proxy if you want to specify a proxy host or proxy port.For more information, click the link to go to the Preferences dialog box, and then click the Help button in the Site category ofthe Preferences dialog.Click Save to close the Basic screen. Then in the Servers category, specify whether the server you just added or edited is aremote server, a testing server, or both.For help with troubleshooting FTP connectivity problems, see TechNote kb405912 on the Adobe website at SFTP connectionsUse Secure FTP (SFTP) if your firewall configuration requires use of secure FTP. SFTP uses encryption and public keys to secure a connection toyour testing server.Your server must be running an SFTP service for you to select this option. If you don’t know whether your server is running SFTP, checkwith your server administrator.Select Site� Manage Sites.Click New to set up a new site, or select an existing Dreamweaver site and click Edit.In the Site Setup dialog box, select the Servers category and do one of the following:
Click the Add New Server button to add a new server
Select an existing server and click the Edit Existing Server buttonIn the Server Name text box, specify a name for the new server. The name can be anything of your choosing.Select SFTP from the Connect Using pop-up menu.
73
FTP over SSL/TLS (Implicit Encryption)FTP over SSL/TLS (Explicit Encryption)Encrypt Only Command ChannelEncrypt Only User Name and Password
The rest of the options are the same as the options for FTP connections. See the above section for more information.
Port 22 is the default port for receiving SFTP connections.FTPS connections (CS5.5)FTPS (FTP over SSL) provides both encryption and authentication support as compared to SFTP that offers only encryption support.When using FTPS for data transfer, you can choose to encrypt your credentials, and also the data being transmitted to the server. In addition, youcan choose to authenticate the server's credentials and connections. The credentials of a server are validated against the current set of trusted CAserver certificates in the Dreamweaver database. Certificate Authorities (CAs), which include companies like VeriSign, Thawte, and so on, issuedigitally signed server certificatesThis procedure describes options specific to FTPS. For information on regular FTP options, see the previous section.Select Site� Manage Sites.Click New to set up a new site, or select an existing Dreamweaver site and click Edit.In the Site Setup dialog box, select the Servers category and do one of the following:
Click the “+” (Add New Server) button to add a new server.
Select an existing server and click the Edit Existing Server button.In Server Name, specify a name for the new server.In Connect Using, select one of the following based on your requirement.The server terminates the connection if the security request is not received.If the client does not request security, the server can choose to proceed with aninsecure transaction, or refuse/limit the connection.In Authentication, choose one of the following options:The server’s credentials, signed or self-signed, are displayed. If you accept the server’s credentials, the certificate isadded to a certificate store, , in Dreamweaver. When you connect to the same server the next time,Dreamweaver directly connects to the server.: If the credentials of a self-signed certificate have changed on the server, you are prompted to accept the newThe presented certificate is validated with the current set of trusted CA server certificates in the Dreamweaverdatabase. The list of trusted servers is stored in the : An error message is displayed if you select Trusted Server, and connect to a server with a self-signed certificate.Expand the More Options section to set more options.Select this option if you want to encrypt only the commands that are being transmitted.Use this option when the data being transmitted is already encrypted, or does not contain sensitive information.Select this option if you want to encrypt only your user name and password.Click Save to close the Basic screen. Then in the Servers category, specify whether the server you added or edited is aremote server, a testing server, or both.For help with troubleshooting FTP connectivity problems, see TechNote kb405912 on the Adobe website at Local or network connectionsUse this setting to connect to a network folder, or if you are storing files or running your testing server on your local computer.Select Site� Manage Sites.Click New to set up a new site, or select an existing Dreamweaver site and click Edit.In the Site Setup dialog box, select the Servers category and do one of the following:
Click the Add New Server button to add a new server
Select an existing server and click the Edit Existing Server buttonIn the Server Name text box, specify a name for the new server. The name can be anything of your choosing.
74
Select Local/Network from the Connect Using pop-up menu.Click the folder icon beside the Server Folder text box to browse to and select the folder where you store your site files.In the Web URL text box enter the URL of your website (for example, http://www.mysite.com). Dreamweaver uses the WebURL to create site root-relative links, and to verify links when you use the link checker.For a more extensive explanation of this option, see Advanced Settings category.Click Save to close the Basic screen. Then in the Servers category, specify whether the server you just added or edited is aremote server, a testing server, or both.WebDAV connectionsUse this setting if you connect to your web server using the Web-based Distributed Authoring and Versioning (WebDAV) protocol.For this connection method, you must have a server that supports this protocol, such as Microsoft Internet Information Server (IIS) 5.0 or anappropriately configured installation of Apache web server.: If you select WebDAV as your connection method, and you are using Dreamweaver in a multiuser environment, you should also make surethat all of your users select WebDAV as the connection method. If some users select WebDAV, and other users select other connection methods(FTP, for example), Dreamweaver’s check-in/check-out feature will not work as expected, since WebDAV uses its own locking system.Select Site� Manage Sites.Click New to set up a new site, or select an existing Dreamweaver site and click Edit.In the Site Setup dialog box, select the Servers category and do one of the following:
Click the Add New Server button to add a new server
Select an existing server and click the Edit Existing Server buttonIn the Server Name text box, specify a name for the new server. The name can be anything of your choosing.Select WebDAV from the Connect Using pop-up menu.For the URL, enter the complete URL to the directory on the WebDAV server you want to connect to.This URL includes the protocol, port, and directory (if not the root directory). For example, http://webdav.mydomain.net/mysite.Enter your username and password.This information is for server authentication and is not related to Dreamweaver. If you are not sure of your username andpassword, check with your system administrator or webmaster.Click Test to test your connection settings.Select the Save option if you want Dreamweaver to remember your password each time you start a new session.In the Web URL text box enter the URL of your website (for example, http://www.mysite.com). Dreamweaver uses the WebURL to create site root-relative links, and to verify links when you use the link checker.For a more extensive explanation of this option, see Advanced Settings category.Click Save to close the Basic screen. Then in the Servers category, specify whether the server you just added or edited is aremote server, a testing server, or both.RDS connectionsUse this setting if you connect to your web server using Remote Development Services (RDS). For this connection method, your remote servermust be on a computer running Adobe® ColdFusion®Select Site� Manage Sites.Click New to set up a new site, or select an existing Dreamweaver site and click Edit.In the Site Setup dialog box, select the Servers category and do one of the following:
Click the Add New Server button to add a new server
Select an existing server and click the Edit Existing Server buttonIn the Server Name text box, specify a name for the new server. The name can be anything of your choosing.Select RDS from the Connect Using pop-up menu.Click the Settings button and provide the following information in the Configure RDS Server dialog box:
Enter the name of the host computer where your web server is installed.
The host name is probably an IP address or a URL. If you are unsure, ask your administrator.
Enter the port number that you connect to.
Enter your root remote folder as the host directory.
For example, c:\inetpub\wwwroot\myHostDir\.
75
To the topTo the topTo the topTo the top
Enter your RDS username and password.
These options might not appear if you set your username and password in the ColdFusion Administrator security
Select the Save option if you want Dreamweaver to remember your settings.Click OK to close the Configure RDS Server dialog box.In the Web URL text box enter the URL of your website (for example, http://www.mysite.com). Dreamweaver uses the WebURL to create site root-relative links, and to verify links when you use the link checker.For a more extensive explanation of this option, see Advanced Settings category.Click Save to close the Basic screen. Then in the Servers category, specify whether the server you just added or edited is aremote server, a testing server, or both.Microsoft Visual SourceSafe connectionsSupport for Microsoft Visual SourceSafe has been deprecated as of Dreamweaver CS5.Set Advanced server optionsSelect Site� Manage Sites.Click New to set up a new site, or select an existing Dreamweaver site and click Edit.In the Site Setup dialog box, select the Servers category and do one of the following:
Click the Add New Server button to add a new server
Select an existing server and click the Edit Existing Server buttonSpecify Basic options as necessary, and then click the Advanced button.Select Maintain Synchronization Information if you want to automatically synchronize your local and remote files. (This optionis selected by default.)Select Automatically Upload Files to Server on Save if you want Dreamweaver to upload your file to your remote site whenyou save the file.Select Enable File Check Out if you want to activate the Check In/Out system.If you are using a Testing server, select a server model from the Server Model pop-up menu. For more information, see Setup a testing server.Connect to or disconnect from a remote folder with network access
You don’t need to connect to the remote folder; you’re always connected. Click the Refresh button to see your remote files.Connect to or disconnect from a remote folder with FTP access
In the Files panel:
To connect, click Connects to Remote Host in the toolbar.
To disconnect, click Disconnect in the toolbar.Troubleshoot the remote folder setupThe following list provides information on common problems you may encounter in setting up a remote folder, and how to resolve them.There is also an extensive tech note that specifically provides FTP troubleshooting information on the Adobe website at
The Dreamweaver FTP implementation might not work properly with certain proxy servers, multilevel firewalls, and other formsof indirect server access. If you encounter problems with FTP access, ask your local system administrator for help.
For a Dreamweaver FTP implementation, you must connect to the remote system’s root folder. Be sure to indicate the remotesystem’s root folder as the host directory. If you’ve specified the host directory using a single slash (/), you might need tospecify a relative path from the directory you are connecting to and the remote root folder. For example, if the remote rootfolder is a higher level directory, you may need to specify a ../../ for the host directory.
Use underscores in place of spaces, and avoid special characters in file and folder names wherever possible. Colons, slashes,periods, and apostrophes in file or folder names can sometimes cause problems.
If you encounter problems with long filenames, rename them with shorter names. On the Mac OS, filenames cannot be more
76
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
than 31 characters long.
Many servers use symbolic links (UNIX), shortcuts (Windows), or aliases (Macintosh) to connect a folder on one part of theserver’s disk with another folder elsewhere. Such aliases usually have no effect on your ability to connect to the appropriatefolder or directory; however, if you can connect to one part of the server but not another, there might be an alias discrepancy.
If you encounter an error message such as “cannot put file,” your remote folder may be out of space. For more detailedinformation, look at the FTP log.: In general, when you encounter a problem with an FTP transfer, examine the FTP log by selecting Window� Results(Windows) or Site� FTP Log (Macintosh), then clicking the FTP Log tag.
77
Set up a testing server
To the topTo the topThe home directoryA virtual directorySet up a testing serverAbout the Web URL for the testing serverIf you plan to develop dynamic pages, Dreamweaver needs the services of a testing server to generate and display dynamic content while youwork. The testing server can be your local computer, a development server, a staging server, or a production server.For a detailed overview about the purposes of a testing server, see David Powers’s Dreamweaver Developer Center article, Setting up a localtesting server in Dreamweaver CS5Set up a testing serverSelect SiteManage SitesClick New to set up a new site, or select an existing Dreamweaver site and click Edit.In the Site Setup dialog box, select the Servers category and do one of the following:
Click the Add New Server button to add a new server
Select an existing server and click the Edit Existing Server buttonSpecify Basic options as necessary, and then click the You must specify a Web URL in the Basic screen when specifying a testing server. For more information, see the nextUnder Testing Server, select the server model you want to use for your web application.As of Dreamweaver CS5, Dreamweaver no longer installs ASP.NET, ASP JavaScript, or JSP server behaviors. (Youcan manually re-enable the deprecated server behaviors if you wish, but keep in mind that Dreamweaver no longer officiallysupports them.) If you’re working on ASP.NET, ASP JavaScript, or JSP pages, however, Dreamweaver will still support Liveview, code coloring, and code hinting for those pages. You do not need to select ASP.NET, ASP JavaScript or JSP in the SiteDefinition dialog box for any of these features to work.Click Save to close the Advanced screen. Then in the Servers category, specify the server you just added or edited as atesting server.About the Web URL for the testing serverYou must specify a Web URL so Dreamweaver can use the services of a testing server to display data and to connect to databases while youwork. Dreamweaver uses the design-time connection to provide you with useful information about the database, such as the names of the tablesin your database and the names of the columns in your tables.A Web URL for a testing server comprises the domain name and any of your website’s home directory’s subdirectories or virtual directories.The terminology used in Microsoft IIS may vary from server to server, but the same concepts apply to most web servers.The folder on the server mapped to your site’s domain name. Suppose the folder you want to use to process dynamic pagesis c:\sites\company\, and this folder is your home directory (that is, this folder is mapped to your site’s domain name—for example,www.mystartup.com). In that case, the URL prefix is http://www.mystartup.com/.If the folder you want to use to process dynamic pages is a subfolder of your home directory, simply add the subfolder to the URL. If your homedirectory is c:\sites\company\, your site’s domain name is www.mystartup.com, and the folder you want to use to process dynamic pagesis c:\sites\company\inventory. Enter the following Web URL:If the folder you want to use to process dynamic pages is not your home directory or any of its subdirectories, you must create a virtual directory.A folder that is not physically contained in the home directory of the server even though it appears to be in the URL. To createa virtual directory, specify an alias for the folder’s path in the URL. Suppose your home directory is c:\sites\company, your processing folder isd:\apps\inventory, and you define an alias for this folder called warehouse. Enter the following Web URL:
78
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
http://www.mystartup.com/warehouse/
Refers to the home directory in your URLs when the client (usually a browser, but in this case Dreamweaver) runs on the samesystem as your web server. Suppose Dreamweaver is running on the same Windows system as the web server, your home directory isc:\sites\company, and you defined a virtual directory called warehouse to refer to the folder you want to use to process dynamic pages. Thefollowing are the Web URLs you would enter for selected web servers:By default the ColdFusion MX 7 web server runs on port 8500, the Apache web server runs on port 80, and the Jakarta Tomcat web serverruns on port 8080.For Macintosh users running the Apache web server, your personal home directory is Users/MyUserName/Sites, where MyUserName is yourMacintosh user name. An alias called ~MyUserName is automatically defined for this folder when you install Mac OS 10.1 or higher. Therefore,your default Web URL in Dreamweaver is as follows:If the folder you want to use to process dynamic pages is Users:MyUserName:Sites:inventory, then the Web URL is as follows:
Choosing an application server
Preparing to build dynamic sites
Web serverWeb URLColdFusion MX 7Apache (Windows)Jakarta Tomcat (Windows)
79
Set up a local version of your site
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy PolicyTo set up a local version of your site, all you need to do is specify the local folder where you’ll store all of your site files. The local folder can be onyour local computer or on a network server.Identify or create the folder on your computer where you want to store the local version of your site files. (The folder can beanywhere on your computer.) You’ll specify this folder as your local site in Dreamweaver.In Dreamweaver, choose Site� New Site.In the Site Setup dialog box, make sure the Site category is selected. (It should be selected by default.)In the Site Name text box, enter a name for your site. This name appears in the Files panel and in the Manage Sites dialogbox; it does not appear in the browser.In the Local Site Folder text box, specify the folder you identified in step one—the folder on your computer where you want tostore the local version of your site files. You can click the folder icon to the right of the text box to browse to the folder.Click Save to close the Site Setup dialog box. You can now begin working on your local site files in Dreamweaver.When you’re ready, you can fill out the other categories in the Site Setup dialog box, including the Servers category, where you can specify aremote folder on your remote server.For a video tutorial on setting up a new Dreamweaver site, see
80
Manage Sites dialog box options
To the topCreate a new siteImport a siteCreate a new Business Catalyst siteImport a Business Catalyst siteTo the topManage Sites dialog box options (CS6)Manage Sites dialog box options (CS5 and CS5.5)The Manage Sites dialog box is your gateway into various Dreamweaver site functions. From this dialog box, you can initiate the process forcreating a new site, editing an existing site, duplicating a site, removing a site, or importing or exporting a site’s settings.The Manage Sites dialog box does not let you connect to or publish files to a remote server. For instructions on connecting to a remoteserver, see Connect to a remote server. If you are trying to connect to an existing website, see Edit an existing remote website.Manage Sites dialog box options (CS6)Select SiteManage SitesA site list appears. If you haven't created any sites yet, the site list will be blank.Do one of the following:Click the New Site button to create a new Dreamweaver site. Then specify the name and location for yournew site in the Site Setup dialog box. For more information, see Set up a local version of your site.Click the Import Site button to import a site. For more information, see Import and export site settings. The import feature only imports site settings that have previously been exported from Dreamweaver. It does not importsite files to create a new Dreamweaver site. For information on creating a new site in Dreamweaver, see Set up a local versionof your site.Click the New Business Catalyst Site button to create a new Business Catalyst Site.For more information, see Create a temporary Business Catalyst site.Click the Import Business Catalyst Site button to import an existing Business Catalyst site.For more information, see Importing a Business Catalyst site.For existing sites, the following options are also available:
Deletes the selected site and all of its setup information from your list of Dreamweaver sites; it does delete theactual site files. (If you want to remove the site files from your computer, you need to do that manually.) To delete a site fromDreamweaver, select the site in the site list and then click the Delete button. You cannot undo this action.
Enables you to edit information such as username, password, and server information for an existing Dreamweaversite. Select the existing site in the site list and click the Edit button to edit the existing site. (The Site Setup dialog box opensonce you click the Edit button for a selected site.) For more information on editing existing site options, click the Help button inthe various screens of the Site Setup dialog box.
Creates a copy of an existing site. To duplicate a site, select the site in the site list and click the Duplicatebutton. The duplicated site appears in the site list with the word “copy” appended to the name of the site. To change the nameof the duplicated site, leave the site selected and click the Edit button.
Enables you to export the selected site’s settings as an XML file (*.ste). For more information, see Import andexport site settings.Manage Sites dialog box options (CS5 and CS5.5)Select SiteManage Sites and select a site from the list on the left.Click a button to select one of the options, make any changes you need to make, and click Done.Enables you to create a new site. When you click the New button the Site Setup dialog box opens, letting you name andspecify the location for your new site. For more information, see Set up a local version of your site.
81
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
Edit
DuplicateRemove
Enables you to edit information such as username, password, and server information for an existing Dreamweaver site.
Select the existing site in the site list on the left and click the Edit button to edit the existing site. For more information onediting existing site options, see Connect to a remote server.Creates a copy of an existing site. To duplicate a site, select the site in the site list on the left and click theDuplicate button. The duplicated site appears in the site list with the word “copy” appended to the name of the site. To changethe name of the duplicated site, leave the site selected and click the Edit button.Deletes the selected site and all of its setup information from your list of Dreamweaver sites; it does delete theactual site files. (If you want to remove the site files from your computer, you need to do that manually.) To delete a site fromDreamweaver, select the site in the site list and then click the Remove button. You cannot undo this action.Enables you to either export the selected site’s settings as an XML file (*.ste), or import a site’s settings. Formore information, see Import and export site settings.: The import feature only imports site settings that have previously been exported. It does not import site files to create anew Dreamweaver site. For information on creating a new site in Dreamweaver, see Set up a local version of your site.
About Dreamweaver sites
82
Version Control and Advanced settings
To the topTo the topDefault Images FolderLinks Relative ToWeb URLCase-sensitive Links CheckingEnable CacheVersion Control categoryAdvanced Settings categoryAccess the Version Control and Advanced settings categories in the Site Setup dialog box by choosing Manage Sites, selecting the site youwant to edit, and clicking Edit.Version Control categoryYou can get and check in files using Subversion. For more information, see Use Subversion (SVN) to get and check in files.Advanced Settings categoryLocal InfoThe folder in which you want to store images for your site. Enter the path to the folder, or click the folder icon to browseto the folder. Dreamweaver uses the path to the folder when you add images to documents.Specifies the kind of links Dreamweaver creates when you create links to other assets or pages in your site. Dreamweaver cancreate two kinds of links: document-relative and site root-relative. For more information on the differences between the two, see Absolute,document-relative, and site root-relative paths.By default, Dreamweaver creates document-relative links. If you change the default setting and select the Site Root option, make sure the correctWeb URL for the site is entered in the Web URL text box (see below). Changing this setting does not convert the path of existing links; the settingwill only apply to new links you create visually with Dreamweaver.Content linked by site-root relative links does not appear when you preview documents in a local browser unless you specify a testingserver, or select the Preview Using Temporary File option in � Preview In Browser. This is because browsers don’t recognizesite roots—servers do.The URL of your website. Dreamweaver uses the Web URL to create site root-relative links, and to verify links when you use the linkSite root-relative links are useful if you are uncertain about the final location in the directory structure of the page you’re working on, or if you thinkyou might later relocate or reorganize files that contain links. Site root-relative links are links whose paths to other site assets are relative to thesite root, not the document, so if you move the document at some point, the path to the assets remains correct.For example, let’s say that you’ve specified http://www.mysite.com/mycoolsite (the remote server’s site root directory) as the Web URL, and thatyou also have an images folder in the mycoolsite directory on the remote server (http://www.mysite.com/mycoolsite/images). Let’s also say thatyour index.html file is in the mycoolsite directory.When you create a site root-relative link from the index.html file to an image in the images directory, the link looks as follows: src="/mycoolsite/images/image1.jpg"&#ximg-;⤀ /This is different from a document-relative link, which would simply be: src="images/image1.jpg"&#ximg-;⤀ /The appendage of /mycoolsite/ to the image source links the image relative to the site root, not the document. Assuming the image stays in theimage directory, the file path to the image (/mycoolsite/images/image1.jpg), will always be correct, even if you move the index.html file to anotherFor more information, see Absolute, document-relative, and site root-relative paths.With regard to link verification, the Web URL is necessary for determining whether a link is internal or external to the site. For example, if your webURL is http://www.mysite.com/mycoolsite, and the link checker finds a link with a URL of http://www.yoursite.com on your page, the checkerdetermines that the latter link is an external link and reports it as such. Similarly, the link checker uses the Web URL to determine if links areinternal to the site, and then checks to see if those internal links are broken.Checks that the case of the links matches the case of the filenames when Dreamweaver checks links. Thisoption is useful on UNIX systems where filenames are case-sensitive.Indicates whether to create a local cache to improve the speed of link and site management tasks. If you do not select this option,Dreamweaver asks you if you want to create a cache again before it creates the site. It is a good idea to select this option because the Assetspanel (in the Files panel group) only works if a cache is created.
83
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy PolicyCloaking and other categoriesFor more information on the Cloaking, Design Notes, File View Columns, Contribute, Templates, or Spry categories, click the Help button in thedialog box.
84
Import and export Dreamweaver site settings
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
To the topTo the topExport your site settingsImport site settingsYou can export your site settings as an XML file that you can later import into Dreamweaver. Exporting/importing sites enables you to transfer sitesettings to other machines and product versions, share site settings with other users, and back up site settings.The import/export feature does not import or export site . It only imports/exports site settings to save you the time of recreating sites inDreamweaver. For information on creating a new site in Dreamweaver, see Set up a local version of your site.Export your site settings regularly so that you have a backup copy if anything happens to the site.Export your site settingsSelect SiteManage sites Select one or more sites whose settings you want to export and click (CS5/CS5.5) or the Export button
(CS6 and
To select more than one site, Controlclick (Windows) or Command-click (Macintosh) each site.
To select a range of sites, Shift-click the first and last site in the range.If you want to back up your site settings for yourself, select the first option in the Exporting Site dialog box and click OK.Dreamweaver saves remote server login information, such as the user name and password, as well as local path information.If you want to share your settings with other users, select the second option in the Exporting Site dialog box and click OK.(Dreamweaver does not save information that would not work for other users, such as your remote server login informationand local paths.)For each site whose settings you want to export, browse to a location where you want to save the site file and click Save.(Dreamweaver saves each site’s settings as an XML file, with an .ste file extension.)Click Done.Save the *.ste file to your site root folder or to your desktop to make it easy to find. If you cannot remember where youput it, do a file search on your computer for files with the *.ste extension to locate it.Import site settingsSelect SiteManage sitesClick Import (CS5/CS5.5) or the Import Site button (CS6 and later).Browse to and select one or more sites—defined in files with an .ste file extension—whose settings you want to import.To select more than one site, Controlclick (Windows) or Command-click (Macintosh) each .ste file. To select a range of sites,Shift-click the first and last file in the range.Click Open and then click Done.After Dreamweaver imports the site settings, the site names appear in the Manage Sites dialog box.
About Dreamweaver sites
Backing up and restoring site definitions
85
Edit an existing remote website
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy PolicyYou can use Dreamweaver to copy an existing remote site (or any branch of a remote site) to your local disk and edit it there, even if you didn’tuse Dreamweaver to create the original site. You must have the correct connection information, and connect to the site’s remote server, before youcan edit the site.Create a local folder to contain the existing site and set up the folder as the local folder for the site. (See Set up a localversion of your site.)You must locally duplicate the entire structure of the relevant branch of the existing remote site.Set up a remote folder, using the remote access information about the existing site. You must connect to the remote site todownload the files to your computer before you can edit them. (See Connect to a remote server.)Make sure to choose the correct root folder for the remote site.In the Files panel (), click the Connects To Remote Host button (for FTP access) or the button (fornetwork access) in the toolbar to view the remote site.Edit the site:
If you want to work with the entire site, select the root folder of the remote site in the Files panel, and click Get File(s) inthe toolbar to download the entire site to your local disk.
If you want to work with just one of the files or folders of the site, locate the file or folder in the Remote view of the Filespanel, and click Get File(s) in the toolbar to download that file to your local disk.Dreamweaver automatically duplicates as much of the remote site’s structure as is necessary to place the downloaded file in the correct part of thesite hierarchy. When editing only one part of a site, you should generally include dependent files, such as image files.
About Dreamweaver sites
Editing an existing website (Dreamweaver blog)
86
About Dreamweaver sites
To the topTo the topWhat is a Dreamweaver “site”?Understanding local and remote folder structureWhat is a Dreamweaver “site”?In Dreamweaver the term “site” refers to a local or remote storage location for the documents that belong to a website. A Dreamweaver siteprovides a way to organize and manage all of your web documents, upload your site to a web server, track and maintain your links, and manageand share files. You should define a site to take full advantage of Dreamweaver features.Note: To define a Dreamweaver site, you only need to set up a local folder. To transfer files to a web server or to develop web applications, youmust also add information for a remote site and testing server.A Dreamweaver site consists of as many as three parts, or folders, depending on your development environment and the type of website you areLocal root folderStores the files you’re working on. Dreamweaver refers to this folder as your “local site.” This folder is typically on your localcomputer, but it can also be on a network server.Remote folderStores your files for testing, production, collaboration, and so on. Dreamweaver refers to this folder as your “remote site” in theFiles panel. Typically, your remote folder is on the computer where your web server is running. The remote folder holds the files that users accesson the Internet.Together, the local and remote folders enable you to transfer files between your local hard disk and web server, making it easy to manage files inyour Dreamweaver sites. You work on files in the local folder, and then publish them to the remote folder when you want other people to viewTesting server folderThe folder where Dreamweaver processes dynamic pages.For a tutorial on defining a Dreamweaver site, see Understanding local and remote folder structureWhen you want to use Dreamweaver to connect to a remote folder, you specify the remote folder in the Servers category of the Site Setup dialogbox. The remote folder that you specify (also referred to as the “host directory”) should correspond to the local root folder of your Dreamweaversite. (The local root folder is the top-level folder of your Dreamweaver site.) Remote folders, like local folders, can have any title, but commonly,Internet Service Providers (ISPs) name the top-level remote folders for individual user accounts public_html, pub_html, or something similar. If youare in charge of your own remote server, and can name the remote folder anything you want, it is a good idea for your local root folder and remotefolder to have the same name.The following example shows a sample local root folder on the left and a sample remote folder on the right. The local root folder on the localmachine maps directly to the remote folder on the web server, rather than to any of the remote folder’s sub folders, or folders that exist above theremote folder in the directory structure.
Note: The above example illustrates one local root folder on the local machine, and one top-level remote folder on the remote web server. If,however, you are maintaining a number of Dreamweaver sites on your local machine, you would need an equal number of remote folders on theremote server. In such a case the above example would not apply, and you would instead create different remote folders within the public_htmlfolder, and then map them to their corresponding local root folders on your local machine.When you first establish a remote connection, the remote folder on the web server is usually empty. Then, when you use Dreamweaver to upload
87

all of the files in your local root folder, the remote folder populates with all of your web files. The directory structure of the remote folder and the
local root folder should always be the same. (That is, there should always be a one-to-one correspondence between the files and folders in yourlocal root folder, and the files and folders in your remote folder.) If the structure of the remote folder doesn’t match the structure of the local rootfolder, Dreamweaver uploads files to the wrong place, where they might not be visible to site visitors. Additionally, image and link paths can easilybreak when folder and file structures are not in synch.The remote folder must exist before Dreamweaver can connect to it. If you don’t have a designated folder that acts as your remote folder on theweb server, create one or ask your ISP’s server administrator to create one for you.
Legal Notices | Online Privacy Policy
88
Getting and putting files to and from your server
To the topTo the topTo the topFile transfer and dependent filesAbout background file transfersGet files from a remote serverPut files on a remote serverManage file transfersFile transfer and dependent filesIf you’re working in a collaborative environment, use the Check In/Check Out system to transfer files between local and remote sites. If you’re theonly person working on the remote site, however, you can use the Get and Put commands to transfer files without checking them in or out.When you transfer a document between a local and remote folder using the Files panel, you have the option of transferring the document’sdependent files. Dependent files are images, external style sheets, and other files referenced in your document that a browser loads when it loadsthe document.Note: It’s usually a good idea to download dependent files when checking out a new file, but if the latest versions of the dependent files arealready on the local disk, there’s no need to download them again. This is also true for uploading and checking in files: no need if up-to-datecopies are already at the remote site.Library items are treated as dependent files.Some servers report errors when putting library items. However, you can cloak these files to prevent them from being transferred.About background file transfersYou can perform other, non-server-related, activities while you’re getting or putting files. Background file transfer works for all of the transferprotocols supported by Dreamweaver: FTP, SFTP, LAN, WebDAV, Subversion, and RDS.Non-server-related activities include common operations like typing, editing external style sheets, generating site-wide reports, and creating newServer-related activities that Dreamweaver cannot perform during file transfers include the following:
Put/Get/Check in/Check out files
Undo check-out
Create a database connection
Bind dynamic data
Preview data in Live view
Insert a web service
Delete remote files or folders
Preview in a browser on a testing server
Save a file to a remote server
Insert an image from a remote server
Open a file from a remote server
Auto put files upon saving
Drag files to the remote site
Cut, copy, or paste files on the remote site
Refresh Remote viewBy default, the Background File Activity dialog box is open during file transfers. You can minimize the dialog box by clicking the Minimize button inthe upper right corner. Closing the dialog box during file transfers results in a cancelation of the operation.Get files from a remote server
89
To the top
Use the Get command to copy files from the remote site to your local site. You can use the Files panel or the Document window to get files.
Dreamweaver creates a log of file activity during the transfer that you can view and save.Note: You cannot turn background file transfer off. If you have the detail log open in the Background File Activity dialog box, you can close that toimprove performance.Dreamweaver also records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP, the Site FTP log can help youdetermine the problem.Get files from a remote server using the Files panelIn the Files panel (Window� Files), select the desired files to download.Usually you select these files in the Remote view, but you can select the corresponding files in the Local view if you prefer. Ifthe Remote view is active, then Dreamweaver copies the selected files to the local site; if the Local view is active, thenDreamweaver copies the remote versions of the selected local files to the local site.Note: To get only those files for which the remote version is more recent than the local version, use the SynchronizeDo one of the following to get the file:
Click the Get button in the Files panel toolbar.
Right-click (Windows) or Controlclick (Macintosh) the file in the Files panel, then select Get from the context menu.Click Yes in the Dependent Files dialog box to download dependent files; if you already have local copies of the dependentfiles, click No. The default is to not download dependent files. You can set this option at Edit� Preferences� Site.Dreamweaver downloads the selected files, as follows:
If you’re using the Check In/Check Out system, getting a file results in a read-only local copy of the file; the file remainsavailable on the remote site or testing server for other team members to check out.
If you’re not using the Check In/Check Out system, getting a file results in a copy that has both read and write privileges.Note: If you’re working in a collaborative environment—that is, if others are working on the same files—you should notdisable Enable File Check In and Check Out. If other people are using the Check In/Check Out system with the site, youshould use that system as well.To stop the file transfer at any time, click the Cancel button in the Background File Activity dialog box.Get files from a remote server using the Document windowMake sure the document is active in the Document window.Do one of the following to get the file:
Select Site� Get.
Click the File Management icon in the Document window toolbar, then select Get from the menu.Note: If the current file is not part of the current site in the Files panel, Dreamweaver attempts to determine which locallydefined site the current file belongs to. If the current file belongs to only one local site, Dreamweaver opens that site, thenperforms the Get operation.Display the FTP logClick the Options menu in the upper right corner of the Files panel.Select View� Site FTP Log.Note: In the Expanded Files Panel, you can click the FTP Log button to display the log.Put files on a remote serverYou can put files from the local site to the remote site, generally without changing the file’s checked out status.There are two common situations in which you might use the Put command instead of Check In:
You’re not in a collaborative environment and you aren’t using the Check In/Check Out system.
You want to put the current version of the file on the server but you’re going to keep editing it.Note: If you put a file that didn’t previously exist on the remote site and you’re using the Check In/Check Out system, the fileis copied to the remote site and is then checked out to you so that you can continue editing.You can use the Files panel or the Document window to put files. Dreamweaver creates a log of file activity during the transferthat you can view and save.
Note:
You cannot turn background file transfer off. If you have the detail log open in the Background File Activity dialog box,
90
To the topyou can close that to improve performance.Dreamweaver also records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP, the SiteFTP log can help you determine the problem.For a tutorial on putting files on a remote server, see For a tutorial on troubleshooting publishing problems, see Put files on a remote or testing server using the Files panelIn the Files panel (Window� Files), select the files to upload.Usually you select these in the Local view, but you may select the corresponding files in the Remote view if you prefer.Note: You can put only those files for which the local version is more recent than the remote version.Do one of the following to put the file on the remote server:
Click the Put button in the Files panel toolbar.
Right-click (Windows) or Controlclick (Macintosh) the file in the Files panel, then select Put from the context menu.If the file hasn’t been saved, a dialog box appears (if you set this preference in the Site category of the Preferences dialogbox) allowing you to save the file before putting it on the remote server. Click Yes to save the file or No to put the previouslysaved version on the remote server.Note: If you do not save the file, any changes you’ve made since the last time you saved will not be put onto the remoteserver. However, the file remains open, so you can still save the changes after putting the file on the server if you want.Click Yes to upload dependent files along with the selected files, or click No to refrain from uploading dependent files. Thedefault is to not upload dependent files. You can set this option at Edit� Preferences� Site.Note: It’s usually a good idea to upload dependent files when checking in a new file, but if the latest versions of thedependent files are already on the remote server, there’s no need to upload them again.To stop the file transfer at any time, click the Cancel button in the Background File Activity dialog box.Put files on a remote server using the Document windowMake sure the document is active in the Document window.Do one of the following to put the file:
Select Site� Put.
Click the File Management icon in the Document window toolbar, then select Put from the menu.Note: If the current file is not part of the current site in the Files panel, Dreamweaver attempts to determine which locallydefined site the current file belongs to. If the current file belongs to only one local site, Dreamweaver opens that site, thenperforms the Put operation.Display the FTP logClick the Options menu in the upper right corner of the Files panel.Select View� Site FTP Log.Note: In the Expanded Files Panel, you can click the FTP Log button to display the log.Manage file transfersYou can view the status of file transfer operations, as well as a list of transferred files and their outcomes (transfer successful, skipped, or failed).You can also save a log of the file activity.Note: Dreamweaver lets you perform other non-server-related activities while you’re transferring files to or from a server.Cancel a file transfer
Click the Cancel button in the Background File Activity dialog box. If the dialog box isn’t showing, click the File Activity button at the bottom ofthe Files panel.Show the Background File Activity dialog box during transfers
Click the File Activity or Log button at the bottom of the Files panel.Note: You cannot hide or remove the Log button. It’s a permanent part of the panel.View details of the last file transferClick the Log button at the bottom of the Files panel to open the Background File Activity dialog box.Click the Details expander arrow.
91

Save a log of the last file transferClick the Log button at the bottom of the Files panel to open the Background File Activity dialog box.Click the Save Log button and save the information as a text file.You can review the file activity by opening the log file in Dreamweaver or in any text editor.More Help topicsPutting files tutorialTroubleshoot publishing problems tutorial
Legal Notices | Online Privacy Policy
92
Managing Contribute sites
To the topTo the topManaging Contribute sitesSite structure and page design for a Contribute siteFile transfer to and from a Contribute siteContribute file and folder permissions on the serverContribute special filesPrepare a site for use with ContributeAdminister a Contribute site using DreamweaverDelete, move, or rename a remote file in a Contribute siteEnable Contribute users to access templates without root folder accessTroubleshoot a Contribute siteManaging Contribute sitesAdobe® Contribute® CS4 combines a web browser with a web-page editor. It enables your colleagues or clients to browse to a page in a site thatyou created, and to edit or update the page if they have permission to do so. Contribute users can add and update basic web content, includingformatted text, images, tables, and links. Contribute site administrators can limit what ordinary (non-administrator) users can do in a site.Note: This topic assumes that you are a Contribute administrator.As the site administrator, you give non-administrators the ability to edit pages by creating a connection key and sending it to them (for informationon how to do this, see Contribute Help. You can also set up a connection to a Contribute site using Dreamweaver, which lets you or your sitedesigner connect to the Contribute site and use all of the editing capabilities available in Dreamweaver.Contribute adds functionality to your website with Contribute Publishing Server (CPS), a suite of publishing applications and user managementtools that lets you integrate Contribute with your organization’s user directory service—for example, Lightweight Directory Access Protocol (LDAP)or Active Directory. When you enable your Dreamweaver site as a Contribute site, Dreamweaver reads Contribute’s administration settingswhenever you connect to the remote site. If Dreamweaver detects that CPS is enabled, it inherits some of the functionality of CPS, such as filerollback and event logging.You can use Dreamweaver to connect to and modify a file in a Contribute site. Most Dreamweaver capabilities work the same way with aContribute site as they do with any other site. However, when you use Dreamweaver with a Contribute site, Dreamweaver automatically performscertain file-management operations, such as saving multiple revisions of a document, and logging certain events in the CPS Console.For more information, see Contribute Help.Site structure and page design for a Contribute siteTo enable Contribute users to edit your website, keep the following points in mind when you structure it:
Keep your site structure simple. Don’t nest folders too deeply. Group related items together in a folder.
Set up appropriate read and write permissions for folders on the server.
Add index pages to folders as you create them, to encourage Contribute users to place new pages in the correct folders. Forexample, if Contribute users provide pages containing meeting minutes, create a folder in the site root folder namedmeeting_minutes, and create an index page in that folder. Then provide a link from your site’s main page to the index page formeeting minutes. A Contribute user can then navigate to that index page and create a new page of minutes for a specificmeeting, linked from that page.
On each folder’s index page, provide a list of links to the individual content pages and documents in that folder.
Keep page designs as simple as possible, minimizing fancy formatting.
Use CSS rather than HTML tags and name your CSS styles clearly. If the Contribute users use a standard set of styles inMicrosoft Word, use the same names for the CSS styles, so that Contribute can map the styles when a user copies informationfrom a Word document and pastes it into a Contribute page.
To prevent a CSS style from being available to Contribute users, change the name of the style so that the name starts withmmhide_. For example, if you use a style named RightJustified in a page but you don’t want Contribute users to be able to usethat style, rename the style to mmhide_RightJustified.Note: You have to add mmhide_ to the style name in Code view; you cannot add it in the CSS panel.
Use as few CSS styles as possible, to keep things simple and clean.
93
To the topTo the topTo the topTo the top
If you use server-side includes for HTML page elements, such as headers or footers, create an unlinked HTML page that
contains links to the include files. Contribute users can then bookmark that page and use it to navigate to the include files andedit them.File transfer to and from a Contribute siteContribute uses a system much like the Dreamweaver Check In/Check Out system to ensure that only one user at a time can edit a given webpage. When you enable Contribute compatibility in Dreamweaver, the Dreamweaver Check In/Check Out system is automatically enabled.To transfer files to and from a Contribute site using Dreamweaver, always use the Check In and Check Out commands. If you instead use the PUTand GET commands to transfer files, you might overwrite the modifications that a Contribute user has recently made to a file.When you check a file in to a Contribute site, Dreamweaver makes a backup copy of the previous checked-in version of the file in the _baks folderand adds your user name and a date stamp to a Design Notes file.Contribute file and folder permissions on the serverContribute provides a way to manage file and folder permissions for each user role you define; however, Contribute doesn’t provide a way tomanage the underlying read and write permissions assigned to files and folders by the server. In Dreamweaver, you can manage thosepermissions directly on the server.If a Contribute user doesn’t have read access on the server to a dependent file, such as an image displayed in a page, the contents of thedependent file don’t appear in the Contribute window. For example, if a user doesn’t have read access to an images folder, the images in thatfolder appear as broken image icons in Contribute. Similarly, Dreamweaver templates are stored in a subfolder of the site’s root folder, so if aContribute user doesn’t have read access to the root folder, they can’t use templates in that site unless you copy the templates to an appropriateWhen you set up a Dreamweaver site, you must give users read access on the server to the /_mm folder (the _mm subfolder of the root folder),the /Templates folder, and all of the folders containing assets that they will need to use.If, for security reasons, you can’t give users read access to the /Templates folder, you can still enable Contribute users to access templates. SeeEnable Contribute users to access templates without root folder access.For more information about Contribute permissions, see Administering Contribute in Contribute Help.Contribute special filesContribute uses a variety of special files that aren’t intended to be viewed by visitors to your site:
The shared settings file, which has an obfuscated filename with a CSI extension, appears in a folder named _mm in the rootfolder of the site, and contains information that Contribute uses to manage the site
Older versions of files, in folders named _baks
Temporary versions of pages, so that users can preview changes
Temporary lock files, indicating that a given page is being edited or previewed
Design Notes files containing metadata about the site’s pagesIn general, you shouldn’t edit any of these Contribute special files using Dreamweaver; Dreamweaver manages themIf you don’t want these Contribute special files to appear on your publicly accessible server, you can set up a staging serverwhere Contribute users work on pages. Then periodically copy those web pages from the staging server to a production serverthat’s on the web. If you take this staging-server approach, copy only web pages to the production server, not any of theabove-listed Contribute special files. In particular, don’t copy the _mm and _baks folders to the production server.Note: For information about setting up a server to prevent visitors from seeing files in folders that begin with an underscore,see “Website security” in Contribute Help.Occasionally you might need to manually delete Contribute special files. For example, there might be circumstances in whichContribute fails to delete temporary preview pages when the user is finished previewing; in that case, you would have tomanually delete those temporary pages. Temporary preview pages have filenames that begin with TMP.Similarly, under some circumstances an outdated lock file may be accidentally left on the server. If that happens, you mustmanually delete the lock file to allow others to edit the page.Prepare a site for use with ContributeIf you’re preparing an existing Dreamweaver site for Contribute users, you need to explicitly enable Contribute compatibility to use Contribute-
94
To the top
related features; Dreamweaver does not prompt you to do this; however, when you connect to a site that’s been set up as a Contribute site (that
has an administrator), Dreamweaver prompts you to enable Contribute compatibility.Not all connection types support Contribute compatibility. The following restrictions apply to connection types:
If your remote site connection uses WebDAV, you can’t enable Contribute compatibility, because those source-control systemsaren’t compatible with the Design Notes and Check In/Check Out systems that Dreamweaver uses for Contribute sites.
If you use RDS to connect to your remote site, you can enable Contribute compatibility, but you must customize yourconnection before you can share it with Contribute users.
If you’re using your local computer as a web server, you must set up the site using an FTP or network connection to yourcomputer (rather than just a local folder path) to be able to share your connection with Contribute users.When you enable Contribute compatibility, Dreamweaver automatically enables Design Notes (including the Upload Design Notes For Sharingoption) and the Check In/Check Out system.If Contribute Publishing Server (CPS) is enabled on the remote site you are connecting to, Dreamweaver notifies the CPS every time you trigger anetwork operation such as checking in, rolling back, or publishing a file. The CPS will log these events, and you can view the log in the CPSAdministration Console. (If you disable CPS, these events are not logged.) You enable CPS using Contribute. For more information, see AdobeContribute Help.Note: You can make a site Contribute compatible without having Contribute on your computer; but if you want to be able to start ContributeAdministrator from Dreamweaver, you must have Contribute installed on the same computer as Dreamweaver and you must be connected to theremote site before you enable Contribute compatibility. Otherwise, Dreamweaver cannot read Contribute’s administrative settings to determinewhether CPS and Rollback are enabled.Important: You must make sure that the shared settings file (CSI file) that Contribute uses to administer the site is on the remote server anduncorrupted. Contribute automatically creates this file (and overwrites old versions of it) whenever you administer in Contribute Administrator. If theshared settings file is not on the server or is corrupted, Dreamweaver returns the error, "The file required for Contribute compatibility does not existon the server" whenever you attempt a network operation (such as put). To ensure that the correct file is on the server, disable the connection tothe server in Dreamweaver, start Contribute Administrator, make an administration change, and then reconnect to the server in Dreamweaver. Formore information, see Adobe Contribute Help.Select Site� Manage Sites.Select a site, then click Edit.In the Site Setup dialog box, expand Advanced Settings, select the Contribute category, and then select Enable ContributeIf a dialog box appears saying that you must enable Design Notes and Check In/Check Out, click OK.If you haven’t already provided your Check In/Check Out contact information, type your name and email address in the dialogbox, and then click OK. Rollback status, CPS status, the Site Root URL text box, and the Administer Site in Contribute buttonappear in the Site Definition dialog box.If Rollback is enabled in Contribute, you’ll have the ability to roll back to previous versions of files that you’ve changed inCheck the URL in the Site Root URL text box and correct it if necessary. Dreamweaver constructs a site root URL based onother site-definition information you’ve provided, but sometimes the constructed URL isn’t quite right.Click the Test button to verify that you’ve entered the correct URL.Note: If you are ready to send a connection key or perform Contribute site administration tasks now, skip the remainingClick Administer Site in Contribute if you want to make administration changes. Remember, you must have Contributeinstalled on the same machine if you want to open Contribute Administrator from Dreamweaver.Click Save and then click Done.Administer a Contribute site using DreamweaverAfter you enable Contribute compatibility, you can use Dreamweaver to start Contribute to perform site administration tasks.Note: Contribute must be installed on the same computer as Dreamweaver.As an administrator of a Contribute site, you can:
Change the administrative settings for the site.Contribute administrative settings are a collection of settings that apply to all users of your website. These settings enable youto fine-tune Contribute to provide a better user experience.
Change the permissions granted to user roles in Contribute.
Set up Contribute users.
95
To the topTo the topTo the topContribute users need certain information about the site to be able to connect to it. You can package all of this information in afile called a connection key to send to Contribute users.Note: A connection key is not the same as a Dreamweaver exported site file.Before you give Contribute users the connection information they need to edit pages, use Dreamweaver to create the basicfolder hierarchy for your site, and to create any templates and CSS style sheets needed for the site.Select Site� Manage Sites.Select a site, and then click Edit.In the Site Setup dialog box, expand Advanced Settings and select the Contribute category.Click the Administer Site in Contribute button.Note: This button does not appear if you have not enabled Contribute compatibility.If prompted, enter the administrator password, and then click OK.The Administer Website dialog box appears.
To change administrative settings, select a category from the list on the left, and then change settings as necessary.
To change role settings, in the Users and Roles category, click Edit Role Settings, and then make changes as necessary.
To send a connection key to set up users, in the Users and Roles category, click Send Connection Key, and thencomplete the Connection Wizard.Click Close, click OK, and then click Done.For more information about administrative settings, managing user roles, or creating a connection key, see Contribute Help.Delete, move, or rename a remote file in a Contribute siteDeleting a file from the remote server that hosts a Contribute site works much like deleting a file from the server for any Dreamweaver site.However, when you delete a file from a Contribute site, Dreamweaver asks whether to delete all older versions of the file. If you choose to keepthe older versions, Dreamweaver saves a copy of the current version in the _baks folder so you can restore it later.Renaming a remote file or moving it from one folder to another in a Contribute site works the same way it works in any Dreamweaver site. In aContribute site, Dreamweaver also renames or moves the associated previous versions of the file that are saved in the _baks folder.Select the file in the Remote pane of the Files panel (Window� Files), and then press Backspace (Windows) orDelete (Macintosh).A dialog box appears asking you to confirm that you want to delete the file.In the confirmation dialog box:
To delete all previous versions of the file as well as the current version, select the Delete Rollback Versions option.
To leave previous versions on the server, deselect the Delete Rollback Versions option.Click Yes to delete the file.Enable Contribute users to access templates without root folder accessIn a Contribute site, you manage underlying file and folder permissions directly on the server. If, for security reasons, you can’t give users readaccess to the /Templates folder, you can still make the templates available to users.Set up the Contribute site so that its root folder is the folder you want users to see as the root.Manually copy the template folder from the main site’s root folder into the Contribute site’s root folder, using the Files panel.After you update templates for the main site, recopy the changed templates into appropriate subfolders as needed.If you take this approach, don’t use site root-relative links in the subfolders. Site root-relative links are relative to the main rootfolder on the server, not to the root folder you define in Dreamweaver. Contribute users can’t create site root-relative links.If links in a Contribute page appear to be broken, it’s possible that there’s a problem with folder permissions, particularly if thelinks link to pages outside of the Contribute user’s root folder. Check read and write permissions for folders on the server.Troubleshoot a Contribute siteIf a remote file in a Contribute site appears to be checked out, but the file isn’t actually locked on the user’s computer, you can unlock the file toenable users to edit it.When you click any button related to Contribute site administration, Dreamweaver verifies that it can connect to your remote site and that the SiteRoot URL you’ve given for the site is valid. If Dreamweaver can’t connect, or if the URL isn’t valid, an error message appears.If the administration tools aren’t working properly, there might be something wrong with the _mm folder.
96

Unlock a file in a Contribute siteNote: Before following this procedure, make sure that the file really isn’t checked out. If you unlock a file while a Contribute user is editing it,multiple users might edit the file simultaneously.Do one of the following:
Open the file in the Document window, and then select Site� Undo Check Out.
In the Files panel (Window� Files), right-click (Windows) or Controlclick (Macintosh), and then select Undo Check Out.A dialog box might appear, indicating who has the file checked out and asking you to confirm that you want to unlock theIf the dialog box appears, click Yes to confirm.The file is unlocked on the server.Troubleshoot connection problems for a Contribute siteCheck the Site Root URL in the Contribute category of the Site Definition dialog box by opening that URL in a browser, tomake sure that the correct page opens.Use the Test button in the Remote Info category of the Site Definition dialog box to make sure that you can connect to theIf the URL is correct but the Test button results in an error message, ask your system administrator for help.Troubleshoot Contribute administration toolsOn the server, make sure that you have read and write permissions, and executable permissions if necessary, for the _mmMake sure that the _mm folder contains a shared settings file with a CSI extension.If it doesn’t, use the Connection Wizard (Windows) or Connection Assistant (Macintosh) to create a connection to the site andto become an administrator for the site. The shared settings file is created automatically when you become an administrator.For more information about becoming an administrator for an existing Contribute website, see Administering Contribute inContribute Help.More Help topicsImport and export Dreamweaver site settings
Legal Notices | Online Privacy Policy
97
Set site preferences for transferring files

You select preferences to control file transfer features that appear in the Files panel.Select Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh).In the Preferences dialog box, select Site from the category list on the left.Set the options and click OK.Always ShowSpecifies which site (remote or local) is always shown, and in which Files panel pane (left or right) the localand remote files appear.By default, the local site always appears on the right. Whichever pane is not chosen (the left one by default) is the changeablepane: this pane can display the files in the other site (the remote site by default).Dependent FilesDisplays a prompt for transferring dependent files (such as images, external style sheets, and other filesreferenced in the HTML file) that the browser loads when it loads the HTML file. By default, both Prompt on Get/Check Outand Prompt on Put/Check In are selected.It’s usually a good idea to download dependent files when checking out a new file, but if the latest versions of the dependentfiles are already on the local disk, there’s no need to download them again. This is also true for uploading and checking infiles: no need if up-to-date copies are already at the destination.If you deselect these options, your dependent files are not transferred. Therefore, to force the Dependent Files dialog boxto appear even when these options are deselected, hold down Alt (Windows) or Option (Macintosh) while choosing theGet, Put, Check In, or Check Out commands.FTP ConnectionDetermines whether the connection to the remote site is terminated after the specified number of minuteshave passed with no activity.FTP Time OutSpecifies the number of seconds in which Dreamweaver attempts to make a connection with the remoteIf there is no response after the specified amount of time, Dreamweaver displays a warning dialog box alerting you to this fact.FTP Transfer optionsDetermines whether Dreamweaver selects the default option, after a specified number of seconds,when a dialog box appears during a file transfer and there is no user response.Proxy HostSpecifies the address of the proxy server through which you connect to outside servers if you are behind aIf you are not behind a firewall, leave this space blank. If you are behind a firewall, select the Use Proxy option in the SiteDefinition dialog box (Servers� Edit Existing Server (pencil icon)� More OptionsProxy PortSpecifies the port in your proxy or firewall through which you pass to connect to the remote server. If you connectthrough a port other than 21 (the default for FTP), enter the number here.Put Options: Save Files Before PuttingIndicates that unsaved files are saved automatically before being put onto theremote site.Move Options: Prompt Before Moving Files on ServerAlerts you when you attempt to move files on the remote site.Manage SitesOpens the Manage Sites dialog box, where you can edit an existing site or create a new one.You can define whether the types of files that you transfer are transferred as ASCII (text) or binary, by customizing theFTPExtensionMap.txt file in the Dreamweaver/Configuration folder (on the Macintosh, FTPExtensionMapMac.txt). For moreinformation see, Extending Dreamweaver.
Legal Notices | Online Privacy Policy
98
Testing your Dreamweaver site
To the topTo the topSite testing guidelinesUse reports to test your siteSite testing guidelinesBefore uploading your site to a server and declaring it ready for viewing, it’s a good idea to test it locally. (In fact, it’s a good idea to test andtroubleshoot your site frequently throughout its construction—you can catch problems early and avoid repeating them.)You should make sure that your pages look and work as expected in the browsers you’re targeting, that there are no broken links, and that thepages don’t take too long to download. You can also test and troubleshoot your entire site by running a site report.The following guidelines will help you create a good experience for visitors to your site:1. Make sure your pages function in the browsers you’re targeting.Your pages should be legible and functional in browsers that do not support styles, layers, plugins, or JavaScript. For pages that fail badly in olderbrowsers, consider using the Check Browser behavior to automatically redirect visitors to another page.2. Preview your pages in different browsers and platforms.This gives you an opportunity to see differences in layout, color, font sizes, and default browser window size that cannot be predicted in a targetbrowser check.3. Check your site for broken links and fix them.Other sites undergo redesign and reorganization too, and the page you’re linking to may have been moved or deleted. You can run a link checkreport to test your links.4. Monitor the file size of your pages and the time they take to download.Keep in mind that if a page consists of one large table, in some browsers, visitors will see nothing until the entire table finishes loading. Considerbreaking up large tables; if this is not possible, consider putting a small amount of content—such as a welcome message or an advertising banner—outside the table at the top of the page so users can view this material while the table downloads.5. Run a few site reports to test and troubleshoot the entire site.You can check your entire site for problems, such as untitled documents, empty tags, and redundant nested tags.6. Validate your code to locate tag or syntax errors.7. Update and maintain the site after its published.Publishing your site—that is, making it live—can be accomplished in several ways and is an ongoing process. An important part of the process isdefining and implementing a version-control system, either with the tools Dreamweaver includes or through an external version-control application.8. Use the discussion forums.The Dreamweaver discussion forums can be found on the Adobe website at The forums are a great resource for getting information on different browsers, platforms, and so on. You can also discuss technical issues andshare helpful hints with other Dreamweaver users.For a tutorial on troubleshooting publishing problems, see Use reports to test your siteYou can run site reports on workflow or HTML attributes. You can also use the Reports command to check links in your site.Workflow reports can improve collaboration among members of a web team. You can run workflow reports that display who has checked out a file,which files have Design Notes associated with them, and which files have been modified recently. You can further refine Design Note reports byspecifying name/value parameters.Note: You must have a remote site connection defined to run the workflow reports.HTML reports enable you to compile and generate reports for several HTML attributes. You can check combinable nested font tags, missing Alttext, redundant nested tags, removable empty tags, and untitled documents.After you run a report, you can save it as an XML file, then import it into a template instance or a database or spreadsheet and print it, or display it
99
on a website.
Note: You can also add different report types to Dreamweaver through the Adobe Dreamweaver Exchange website.Run reports to test a siteSelect Site� Reports.Select what to report on from the Report On popup menu and set any of the report types to run (workflow or HTML).You cannot run a Selected Files In Site report unless you have already selected files in the Files panel.If you selected a workflow report, click Report Settings. Otherwise, skip this step.Note: If you selected more than one workflow report, you need to click the Report Settings button for each report. Select areport, click Report Settings, and enter settings; then, repeat the process for any other workflow reports.Checked Out ByCreates a report listing all documents checked out by a specific team member. Enter the name of a teammember, and then click OK to return to the Reports dialog box.Design NotesCreates a report listing all Design Notes for selected documents or for the site. Enter one or more name andvalue pairs, then select comparison values from the corresponding popup menus. Click OK to return to the Reports dialogRecently ModifiedCreates a report listing files that have changed during a specified time frame. Enter date ranges andlocation for the files you want to view.If you selected an HTML report, select from the following reports:Combinable Nested Font TagsCreates a report that lists all nested font tags that can be combined to clean up the code.For example, ont;&#x-340; color="#FF0000"ont;&#x-580;&#x/fon;&#xt000;&#x/fon;&#xt000; size="4"STOP! is reported.Missing Alt TextCreates a report listing all the tags that don’t have alternate text.Alternate text appears in place of images for text-only browsers or for browsers that have been set to download imagesmanually. Screen readers read alternate text, and some browsers display alternate text when the user mouses over theRedundant Nested TagsCreates a report detailing nested tags that should be cleaned up.For example,&#xi000; The rain&#xi000; &#x/i00; in Spain stays mainly in the&#x/i00; plain is reported.Removable Empty TagsCreates a report detailing all empty tags that can be removed to clean up the HTML code.For example, you may have deleted an item or image in Code view, but left behind the tags that applied to that item.Untitled DocumentsCreates a report listing all the untitled documents found within the selected parameters. Dreamweaverreports all documents with default titles, multiple title tags, or missing title tags.Click Run to create the report.Depending on the type of report you run, you might be prompted to save your file, define your site, or select a folder (if youhaven’t already done so).A list of results appears in the Site Reports panel (in the Results panel group).Use and save a reportRun a report (see the previous procedure).In the Site Reports panel, do any of the following to view the report:
Click the column heading you want to sort results by.You can sort by filename, line number, or description. You can also run several different reports and keep the differentreports open.
Select any line in the report, then click the More Info button on the left side of the Site Reports panel for a description ofthe problem.
Double-click any line in the report to view the corresponding code in the Document window.Note: If you are in Design view, Dreamweaver changes the display to split view to show the reported problem in code.Click Save Report to save the report.When you save a report, you can import it into an existing template file. You can then import the file into a database orspreadsheet and print it, or use the file to display the report on a website.After running HTML reports, use the Clean Up HTML command to correct any HTML errors the reports listed.More Help topicsTroubleshoot publishing problems tutorial
100

Legal Notices | Online Privacy Policy
101
To learn more, view these recommended resources online.Designing Pages in Dreamweaver with CSS3Janine Warner (Feb. 24, 2011)Dreamweaver CS5: CSS InspectGeoff Blake (Apr. 23, 2010)video-tutorial
102
Set CSS properties
To the topFont-familyFont-sizeFont-styleLine-heightText-decorationFont-weightFont-variantText-transformTo the topDefine CSS type propertiesDefine CSS style background propertiesDefine CSS style block propertiesDefine CSS style box propertiesDefine CSS style border propertiesDefine CSS style list propertiesDefine CSS style positioning propertiesDefine CSS style extension propertiesYou can define properties for CSS rules such as text font, background image and color, spacing and layout properties, and the appearance of listelements. First create a new rule, then set any of the following properties.Define CSS type propertiesYou use the Type category in the CSS Rule Definition dialog box to define basic font and type settings for a CSS style.Open the CSS Styles panel (Shift + F11) if it isn’t already open.Double-click an existing rule or property in the top pane of the CSS Styles panel.In the CSS Rule Definition dialog box, select Type, and then set the style properties.Leave any of the following properties empty if they are not important to the style:Sets the font family (or series of families) for the style. Browsers display text in the first font in the series that isinstalled on the user’s system. For compatibility with Internet Explorer 3.0, list a Windows font first. The font attribute issupported by both browsers.Defines the size of the text. You can choose a specific size by selecting the number and the unit of measurement,or you can choose a relative size. Pixels work well to prevent browsers from distorting your text. The size attribute issupported by both browsers.Specifies Normal, Italic, or Oblique as the font style. The default setting is Normal. The style attribute is supportedby both browsers.Sets the height of the line on which the text is placed. This setting is traditionally called . Select Normal tohave the line height for the font size calculated automatically, or enter an exact value and select a unit of measurement.Theline height attribute is supported by both browsers.Adds an underline, overline, or line-through to the text, or makes the text blink. The default setting forregular text is None. The default setting for links is Underline. When you set the link setting to none, you can remove theunderline from links by defining a special class.The decoration attribute is supported by both browsers.Applies a specific or relative amount of boldface to the font. Normal is equivalent to 400; Bold is equivalent to700. The weight attribute is supported by both browsers.Sets the small caps variant on text. Dreamweaver does not display this attribute in the Document window. Thevariant attribute is supported by Internet Explorer but not Navigator.Capitalizes the first letter of each word in the selection or sets the text to all uppercase or lowercase. Thecase attribute is supported by both browsers.Sets the text color. The color attribute is supported by both browsers.When you are finished setting these options, select another CSS category on the left side of the panel to set additional styleproperties, or click OK.Define CSS style background propertiesUse the Background category of the CSS Rule Definition dialog box to define background settings for a CSS style. You can apply background
103
Background ColorBackground ImageBackground RepeatBackground AttachmentBackground Position (X) and Background Position (Y)To the topWord SpacingLetter SpacingVertical AlignText AlignText Indent
properties to any element in a web page. For example, create a style which adds a background color or background image to any page element,
for example behind text, a table, the page, and so on. You can also set the positioning of a background image.Open the CSS Styles panel (Shift+F11) if it isn’t already open.Double-click an existing rule or property in the top pane of the CSS Styles panel.In the CSS Rule Definition dialog box, select Background, then set the style properties.Leave any of the following properties empty if they are not important to the style:Sets the background color for the element. The background color attribute is supported by bothSets the background image for the element.The background image attribute is supported by bothDetermines whether and how the background image is repeated. The Repeat attribute is supported byboth browsers.
No Repeat displays the image once at the beginning of the element.
Repeat tiles the image horizontally and vertically behind the element.
x and Repeaty display a horizontal and vertical band of images, respectively. Images are clipped to fit within theboundaries of the element.: Use the Repeat property to redefine the tag and set a background image that does not tile or repeat.Determines whether the background image is fixed at its original position or scrolls along with thecontent. Note that some browsers may treat the Fixed option as Scroll. This is supported by Internet Explorer but notNetscape Navigator.Specify the initial position of the background image in relation tothe element. This can be used to align a background image to the center of the page, both vertically (Y) and horizontally (X). Ifthe attachment property is Fixed, the position is relative to the Document window, not to the element.When you are finished setting these options, select another CSS category on the left side of the panel to set additional styleproperties, or click OK.Define CSS style block propertiesYou use the Block category of the CSS Rule Definition dialog box to define spacing and alignment settings for tags and properties.Open the CSS Styles panel (Shift+F11) if it isn’t already open.Double-click an existing rule or property in the top pane of the CSS Styles panel.In the CSS Rule Definition dialog box, select Block, then set any of the following style properties. (Leave the property blank if itis not important to the style.)Sets the spacing between words. To set a specific value, in the popup menu, select Value, then enter anumeric value. In the second popup menu, select a measurement unit (for example, pixel, points, and so on).: You can specify negative values, but the display depends on the browser. Dreamweaver does not display this attributein the Document window.Increases or decreases space between letters or characters. To decrease the space between charactersspecify a negative value, for example (4). Letter spacing settings override justified text settings. The Letter Spacing attributeis supported by Internet Explorer 4 and later and Netscape Navigator 6.Specifies the vertical alignment of the element to which it is applied. Dreamweaver displays this attribute in theDocument window only when it is applied to the Sets how text is aligned within the element. The Text Align attribute is supported by both browsers.Specifies how far the first line of text indents. A negative value may be used to create an outdent, but the displaydepends on the browser. Dreamweaver displays this attribute in the Document window only when the tag is applied to block-level elements. The Text Indent attribute is supported by both browsers.Determines how white space within the element is handled. Select from three options: Normal collapses whitespace; Pre handles it as if the text were enclosed in tags (that is, all white space, including spaces, tabs, and returns, isrespected); Nowrap specifies that the text only wraps when a tag is encountered. Dreamweaver does not display this
attribute in the Document window. The Whitespace attribute is supported by Netscape Navigator and Internet Explorer 5.5.
104
To the topWidth and HeightSame For AllSame For AllTo the topSame For AllSame For AllSame For AllSpecifies whether an element is displayed and if so how it is displayed. None disables the display of an element towhich it is assigned.When you are finished setting these options, select another CSS category on the left side of the panel to set additional styleproperties, or click OK.Define CSS style box propertiesUse the Box category of the CSS Rule Definition dialog box to define settings for tags and properties that control the placement of elements on theYou can apply settings to individual sides of an element when applying padding and margin settings, or use the Same For All setting to apply thesame setting to all sides of an element.Open the CSS Styles panel (Shift + F11) if it isn’t already open.Double-click an existing rule or property in the top pane of the CSS Styles panel.In the CSS Rule Definition dialog box, select Box, and set any of the following style properties. (Leave the property blank if itis not important to the style.)Sets the width and height of the element.Specifies the side around which other elements flow around the floated element. The floated element is fixed to the floatside and other contents flow around it on the opposite side.For example, an image that is floated right is fixed to the right, and content that you add later flows to the left of the image.For more information, see http://css-tricks.com/all-about-floats/Specifies the sides of an element that do not allow other floating elements.Specifies the amount of space between the content of an element and its border (or margin if there is no border).Deselect the Same For All option to set the padding for individual sides of the element.Sets the same padding properties to the Top, Right, Bottom, and Left of the element to which it is applied.Specifies the amount of space between the border of an element (or the padding if there is no border) and anotherelement. Dreamweaver displays this attribute in the Document window only when it is applied to block-level elements(paragraphs, headings, lists, and so on). Deselect Same For All to set the margin for individual sides of the element.Sets the same margin properties to the Top, Right, Bottom, and Left of the element to which it is applied.When you are finished setting these options, select another CSS category on the left side of the panel to set additional styleproperties, or click OK.Define CSS style border propertiesUse the Border category of the CSS Rule Definition dialog box to define settings, such as width, color, and style, for the borders around elements.Open the CSS Styles panel (Shift+F11) if it isn’t already open.Double-click an existing rule or property in the top pane of the CSS Styles panel.In the CSS Rule Definition dialog box, select Border, and set any of the following style properties. (Leave the property blank ifit is not important to the style.)Sets the style appearance of the border. The way the style appears depends on the browser. Deselect Same For All toset the border style for individual sides of the element.Sets the same border style properties to the Top, Right, Bottom, and Left of the element to which it is applied.Sets the thickness of the element’s border. The Width attribute is supported by both browsers. Deselect Same For Allto set the border width for individual sides of the element.Sets the same border width to the Top, Right, Bottom, and Left of the element to which it is applied.Sets the color of the border. You can set each side’s color independently, but the display depends on the browser.Deselect Same For All to set the border color for individual sides of the element.Sets the same border color to the Top, Right, Bottom, and Left of the element to which it is applied.
105
To the topList style typeList style imageList style positionTo the top
When you are finished setting these options, select another CSS category on the left side of the panel to set additional style
properties, or click OK.Define CSS style list propertiesThe List category of the CSS Rule Definition dialog box defines list settings, such as bullet size and type, for list tags.Open the CSS Styles panel (Shift+F11) if it isn’t already open.Double-click an existing rule or property in the top pane of the CSS Styles panel.In the CSS Rule Definition dialog box, select List, and set any of the following style properties. (Leave the property blank if it isnot important to the style.)Sets the appearance of bullets or numbers. Type is supported by both browsers.Lets you specify a custom image for bullets. Click Browse (Windows) or Choose (Macintosh) to browse toan image, or type the image’s path.Sets whether list item text wraps and indents (outside) or whether the text wraps to the left marginWhen you are finished setting these options, select another CSS category on the left side of the panel to set additional styleproperties, or click OK.Define CSS style positioning propertiesThe Positioning style properties determine how the content related to the selected CSS style is positioned on the page.Open the CSS Styles panel (Shift+F11) if it isn’t already open.Double-click an existing rule or property in the top pane of the CSS Styles panel.In the CSS Rule Definition dialog box, select Positioning, and then set the style properties you want.Leave any of the following properties empty if they are not important to the style:Determines how the browser should position the selected element as follows:
places the content using the coordinates entered in the Placement boxes relative to the nearest absolutely- orrelatively-positioned ancestor, or, if no absolutely- or relatively-positioned ancestor exists, to the upper-left corner of the
places the content block using the coordinates entered in the Placement boxes relative to block’s position in thetext flow of the document. For example, giving an element a relative position and top and left coordinates of 20px each willshift the element 20px to the right and 20px down from its normal position in the flow. Elements can also be positionedrelatively, with or without top, left, right, or bottom coordinates, to establish a context for absolutely-positioned children.
places the content using the coordinates entered in the Placement boxes, relative to the top left corner of thebrowser. The content will remain fixed in this position as the user scrolls the page.
places the content at its location in the text flow. This is the default position of all positionable HTML elements.Determines the initial display condition of the content. If you do not specify a visibility property, by default thecontent inherits the parent tag’s value. The default visibility of the body tag is visible. Select one of the following visibility
inherits the visibility property of the content’s parent.
displays the content, regardless of the parent’s value.
hides the content, regardless of the parent’s value.Determines the stacking order of the content. Elements with a higher z-index appear above elements with a lower z-index (or none at all). Values can be positive or negative. (If your content is absolutely positioned, it’s easier to change thestacking order using the AP Elements panel).Determines what happens if the contents of a container (for example, a DIV or a P) exceed its size. Theseproperties control the expansion as follows:
increases the container’s size so that all of its contents are visible. The container expands down and to the right.
maintains the container’s size and clips any content that doesn’t fit. No scroll bars are provided.
adds scroll bars to the container regardless of whether the contents exceed the container’s size. Specifically
106
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
To the topPage break before
providing scroll bars avoids confusion caused by the appearance and disappearance of scroll bars in a dynamic
environment. This option is not displayed in the Document window.
makes scroll bars appear only when the container’s contents exceed its boundaries. This option is not displayed inthe Document window.Specifies the location and size of the content block. How the browser interprets the location depends on thesetting for Type. Size values are overridden if the content of the content block exceeds the specified size.The default units for location and size are pixels. You can also specify the following units: pc (picas), pt (points), in (inches),mm (millimeters), cm (centimeters), (ems), (exs), or % (percentage of the parent’s value). The abbreviations must follow thevalue without a space: for example, Defines the part of the content that is visible. If you specify a clipping region, you can access it with a scripting languagesuch as JavaScript and manipulate the properties to create special effects such as wipes. These wipes can be set up by usingthe Change Property behavior.When you are finished setting these options, select another CSS category on the left side of the panel to set additional styleproperties, or click OK.Define CSS style extension propertiesExtensions style properties include filters, page break, and pointer options.There are a number of other extension properties available in Dreamweaver, but to access them, you need to go through the CSS Stylespanel. You can easily see a list of extension properties available by opening the CSS Styles panel (Windows� CSS Styles), clicking the ShowCategory View button at the bottom of the panel, and expanding the Extensions category.Open the CSS Styles panel (Shift + F11) if it isn’t already open.Double-click an existing rule or property in the top pane of the CSS Styles panel.In the CSS Rule Definition dialog box, select Extensions, and set any of the following style properties. (Leave the propertyblank if it is not important to the style.)Forces a page break during printing either before or after the object controlled by the style. Select theoption you want to set in the popup menu. This option is not supported by any 4.0 browser, but support may be provided byfuture browsers.Changes the pointer image when the pointer is over the object controlled by the style. Select the option you want toset in the popup menu. Internet Explorer 4.0 and later, and Netscape Navigator 6 support this attribute.Applies special effects to the object controlled by the style, including blur and inversion. Select an effect from theup menu.When you are finished setting these options, select another CSS category on the left side of the panel to set additional styleproperties, or click OK.
107
Laying out pages with CSS
To the topTo the topAbout CSS page layoutAbout CSS page layout structureCreate a page with a CSS layoutAbout CSS page layoutA CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a webpage. The basic building block of the CSS layout is the div tag—an HTML tag that in most cases acts as a container for text, images, and otherpage elements. When you create a CSS layout, you place div tags on the page, add content to them, and position them in various places. Unliketable cells, which are restricted to existing somewhere within the rows and columns of a table, div tags can appear anywhere on a web page. Youcan position div tags absolutely (by specifying x and y coordinates), or relatively (by specifying its location with respect to its current location). Youcan also position div tags by specifying floats, paddings, and margins—the preferred method by today’s web standards.Creating CSS layouts from scratch can be difficult because there are so many ways to do it. You can create a simple two-column CSS layout bysetting floats, margins, paddings, and other CSS properties in a nearly infinite number of combinations. Additionally, the problem of cross-browserrendering causes certain CSS layouts to display properly in some browsers, and display improperly in others. Dreamweaver makes it easy for youto build pages with CSS layouts by providing 16 pre-designed layouts that work across different browsers.Using the pre-designed CSS layouts that come with Dreamweaver is the easiest way to create a page with a CSS layout, but you can also createCSS layouts using Dreamweaver absolutely-positioned elements (AP elements). An AP element in Dreamweaver is an HTML page element—specifically, a tag, or any other tag—that has an absolute position assigned to it. The limitation of Dreamweaver AP elements, however, is thatsince they are absolutely positioned, their positions never adjust on the page according to the size of the browser window.If you are an advanced user, you can also insert tags manually and apply CSS positioning styles to them to create page layouts.About CSS page layout structureBefore proceeding with this section, you should be familiar with basic CSS concepts.The basic building block of the CSS layout is the div tag—an HTML tag that in most cases acts as a container for text, images, and other pageelements. The following example shows an HTML page that contains three separate div tags: one large “container” tag, and two other tags—asidebar tag, and a main content tag—within the container tag.
Container div Sidebar div Main Content div Following is the code for all three div tags in the HTML:--container div tag--&#x!-14; iv-;⤀ id="container" --sidebar div tag--&#x!-14; iv-;⤀ id="sidebar" &#xh300; &#x/h30; Content &#xp000; ipsum dolor sit amet, consectetuer adipiscing&#x/p00; elit. &#xp000; urna purus, fermentum id, molestie in, commodo porttitor,&#x/p00; felis. &#x/div; --mainContent div tag--&#x!-14; iv-;⤀ id="mainContent"
&#xh100; Main Content&#x/h10;
108
&#xp000; ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
&#x/p00;rutrum. &#xp000; tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,&#x/p00; odio. &#xh200; level heading&#x/h20; &#xp000; ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac&#x/p00; quam. &#x/div; In the above example, there is no “styling” attached to any of the div tags. Without CSS rules defined, each div tag and its contents fall into adefault location on the page. However, if each div tag has a unique id (as in the above example), you can use the ids to create CSS rules that,when applied, change the style and positioning of the div tags.The following CSS rule, which can reside in the head of the document or in an external CSS file, creates styling rules for the first, or “container” divtag on the page:#container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; The #container rule styles the container div tag to have a width of 780 pixels, a white background, no margin (from the left side of the page), asolid, black, 1pixel border, and text that is aligned left. The results of applying the rule to the container div tag are as follows:
Container div tag, 780 pixels, no margin Text aligned left White background 1-pixel solid black border The next CSS rule creates styling rules for the sidebar div tag:#sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; The #sidebar rule styles the sidebar div tag to have a width of 200 pixels, a gray background, a top and bottom padding of 15 pixels, a rightpadding of 10 pixels, and a left padding of 20 pixels. (The default order for padding is top-right-bottom-left.) Additionally, the rule positions thesidebar div tag with float: left—a property that pushes the sidebar div tag to the left side of the container div tag. The results of applying the rule tothe sidebar div tag are as follows:
Sidebar div, float left
A.
Width 200 pixels
B.
Top and bottom padding, 15 pixels
109
Lastly, the CSS rule for the main container div tag finishes the layout:#mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; The #mainContent rule styles the main content div with a left margin of 250 pixels, which means that it places 250 pixels of space between the leftside of the container div, and the left side of the main content div. Additionally, the rule provides for 20 pixels of spacing on the right, bottom, andleft sides of the main content div. The results of applying the rule to the mainContent div are as follows:The complete code looks as follows:
Main Content div, left margin of 250 pixels 20 pixels left padding 20 pixels right padding 20 pixels bottom padding &#xhead; http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&#xmeta;&#x-710; / &#xtitl;&#x/tit;&#xle00; Document &#xstyl;-43; type="text/css" #container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; #sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; &#x/sty;&#xle00; &#x/hea;퀀 ody; --container div tag--&#x!-14; iv-;⤀ id="container" --sidebar div tag--&#x!-14; iv-;⤀ id="sidebar" &#xh300; &#x/h30; Content &#xp000; ipsum dolor sit amet, consectetuer adipiscing&#x/p00; elit. &#xp000; urna purus, fermentum id, molestie in, commodo porttitor,&#x/p00; felis. &#x/div; --mainContent div tag--&#x!-14; iv-;⤀ id="mainContent" &#xh100; Main Content&#x/h10; &#xp000; ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus &#x/p00;rutrum. &#xp000; tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus
venenatis, tristique in, vulputate at,&#x/p00; odio.
110
To the topAdd To HeadCreate New FileLink To Existing File
&#xh200; level heading&#x/h20;
&#xp000; ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac&#x/p00; quam. &#x/div; &#x/div; The above example code is a simplified version of the code that creates the two-column fixed left sidebar layout when you create a newdocument using the predesigned layouts that come with Dreamweaver.Create a page with a CSS layoutWhen creating a new page in Dreamweaver, you can create one that already contains a CSS layout. Dreamweaver comes with 16 different CSSlayouts that you can choose from. Additionally, you can create your own CSS layouts and add them to the configuration folder so that they appearas layout choices in the New Document dialog box.Dreamweaver CSS layouts render correctly in the following browsers: Firefox (Windows and Macintosh) 1.0, 1.5, 2.0, and 3.6; Internet Explorer(Windows) 5.5, 6.0, 7.0, and 8.0; Opera (Windows and Macintosh) 8.0, 9.0, and 10.0; Safari 2.0, 3.0, and 4.0; and Chrome 3.0.For an informational article that explains how to use the CSS layouts that come with Dreamweaver, see the Dreamweaver Developer CenterThere are also more CSS layouts available on the Adobe Dreamweaver ExchangeCreate a page with a CSS layoutSelect File&#x/div; New.In the New Document dialog box, select the Blank Page category. (It’s the default selection.)For Page Type, select the kind of page you want to create.You must select an HTML page type for the layout. For example, you can select HTML, ColdFusion®, PHP, and so on.You cannot create an ActionScript™, CSS, Library Item, JavaScript, XML, XSLT, or ColdFusion Component page with a CSSlayout. Page types in the Other category of the New Document dialog box are also restricted from including CSS pageFor Layout, select the CSS layout you want to use. You can choose from 16 different layouts. The Preview window shows thelayout and gives a brief description of the selected layout.The predesigned CSS layouts provide the following types of columns:Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor’stext settings.Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitormakes the browser wider or narrower, but does not change based on the site visitor’s text settings.Select a document type from the DocType popup menu.Select a location for the layout’s CSS from the Layout CSS in popup menu.Adds CSS for the layout to the head of the page you’re creating.Adds CSS for the layout to a new external CSS stylesheet and attaches the new stylesheet to the pageyou’re creating.Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. Thisoption is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a single file)across multiple documents.Do one of the following:
If you selected Add to Head from the Layout CSS in popup menu (the default option), click Create.
If you selected Create New File from the Layout CSS popup menu, click Create, and then specify a name for the newexternal file in the Save Style Sheet File As dialog box.
If you selected Link to Existing File from the Layout CSS in popup menu, add the external file to the Attach CSS file textbox by clicking the Add Style Sheet icon, completing the Attach External Style Sheet dialog box, and clicking OK. Whenyou’re finished, click Create in the New Document dialog box.When you select the Link to Existing File option, the file you specify must already have the rules for the CSS filecontained within it.When you put the layout CSS in a new file or link to an existing file, Dreamweaver automatically links the file to the HTML
111
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
Note:
page you’re creating.
Internet Explorer conditional comments (CCs), which help work around IE rendering issues, remain embedded in thehead of the new CSS layout document, even if you select New External File or Existing External File as the location for yourlayout CSS.(Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page.To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet.For a detailed walk-through of this process, see David Powers’s article, Automatically attaching a style sheet to newAdd custom CSS layouts to the list of choicesCreate an HTML page that contains the CSS layout you’d like to add to the list of choices in the New Document dialog box.The CSS for the layout must reside in the head of the HTML page.To make your custom CSS layout consistent with the other layouts that come with Dreamweaver, you should save yourHTML file with the .htm extension.Add the HTML page to the Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts folder.(Optional) Add a preview image of your layout (for example a .gif or .png file) to the Adobe DreamweaverCS5\Configuration\BuiltIn\Layouts folder. The default images that come with Dreamweaver are 227 pixels wide x 193 pixelshigh PNG files.Give your preview image the same file name as your HTML file so that you can easily keep track of it. For example, if yourHTML file is called myCustomLayout.htm, call your preview image myCustomLayout.png.(Optional) Create a notes file for your custom layout by opening the Adobe DreamweaverCS5\Configuration\BuiltIn\Layouts\_notes folder, copying and pasting any of the existing notes files in the same folder, andrenaming the copy for your custom layout. For example, you could copy the oneColElsCtr.htm.mno file, and rename it(Optional) After you’ve created a notes file for your custom layout, you can open the file and specify the layout name,description, and preview image.
Link to an external CSS style sheet
112
Understanding Cascading Style Sheets
To the topTo the topAbout Cascading Style SheetsAbout CSS rulesAbout cascading stylesAbout text formatting and CSSAbout Shorthand CSS propertiesAbout Cascading Style SheetsCascading Style Sheets (CSS) is a collection of formatting rules that control the appearance of content in a web page. Using CSS styles to formata page separates content from presentation. The content of your page—the HTML code—resides in the HTML file, and the CSS rules defining thepresentation of the code reside in another file (an external style sheet) or in another part of the HTML document (usually the head section).Separating content from presentation makes it much easier to maintain the appearance of your site from a central location because you don’t needto update every property on every page whenever you want to make a change. Separating content from presentation also results in simpler andcleaner HTML code, which provides shorter browser loading times, and simplifies navigation for people with accessibility issues (for example, thoseusing screen readers).CSS gives you great flexibility and control over the exact appearance of your page. With CSS you can control many text properties includingspecific fonts and font sizes; bold, italics, underlining, and text shadows; text color and background color; link color and link underlining; and muchmore. By using CSS to control your fonts, you can also ensure a more consistent treatment of your page layout and appearance in multipleIn addition to text formatting, you can use CSS to control the format and positioning of block-level elements in a web page. A block-level elementis a standalone piece of content, usually separated by a new line in the HTML, and visually formatted as a block. For example, tags, and tags all produce block-level elements on a web page. You can set margins and borders for block-level elements, position them in aspecific location, add background color to them, float text around them, and so on. Manipulating block-level elements is in essence the way youlay out pages with CSS.About CSS rulesA CSS formatting rule consists of two parts—the selector and the declaration (or in most cases, a block of declarations). The selector is a term(such as a class name, or an id) that identifies the formatted element, and the declaration block defines what the style properties are. In thefollowing example, is the selector, and everything that falls between the braces () is the declaration block:h1 { font-size: 16 pixels; font-family: Helvetica; font-weight:bold; An individual declaration consists of two parts, the property (such as font-family) and value (such as ). In the previous CSS rule, aparticular style has been created for tags: the text for all tags linked to this style will be 16 pixels in size, Helvetica font, and bold.The style (which comes from a rule, or a collection of rules) resides in a place separate from the actual text it’s formatting—usually in an externalstyle sheet, or in the head portion of an HTML document. Thus, one rule for tags can apply to many tags at once (and in the case of externalstyle sheets, the rule can apply to many tags at once on many different pages). In this way, CSS provides extremely easy update capability. Whenyou update a CSS rule in one place, the formatting of all the elements that use the defined style are automatically updated to the new style.
113
External CSS style sheetsInternal (or embedded) CSS style sheetsInline stylesTo the top
You can define the following types of styles in Dreamweaver:
Class styles let you apply style properties to any element or elements on the page.
HTML tag styles redefine the formatting for a particular tag, such as . When you create or change a CSS style for the tag, all text formatted with the tag is immediately updated.
Advanced styles redefine the formatting for a particular combination of elements, or for other selector forms as allowed by CSS(for example, the selector td h2 applies whenever an header appears inside a table cell.) Advanced styles can alsoredefine the formatting for tags that contain a specific attribute (for example, the styles defined by apply to alltags that contain the attribute-value pair CSS rules can reside in the following locations:Collections of CSS rules stored in a separate, external CSS (.css) file (not an HTML file). This file is linked to one ormore pages in a website using a link or an @import rule in the head section of a document.Collections of CSS rules included in a tag in the head portion of an HTML document.Defined within specific instances of tags throughout an HTML document. (Using Inline styles is not recommended.)Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS style guidelines. Dreamweaver also renders mostapplied styles directly in Design view. (Previewing the document in a browser window, however, gives you the most accurate “live” rendering of thepage.) Some CSS styles are rendered differently in Microsoft Internet Explorer, Netscape, Opera, Apple Safari, or other browsers, and some arenot currently supported by any browser.To display the O’Reilly CSS reference guide included with Dreamweaver, select Help� Reference and select O’Reilly CSS Reference fromthe popup menu in the Reference panel.About cascading stylesThe term refers to the way a browser ultimately displays styles for specific elements on a web page. Three different sources areresponsible for the styles you see on a web page: the style sheet created by the author of the page, the user’s customized style selections (if any),and the default styles of the browser itself. The previous topics describe creating styles for a web page as the author of both the web page and thestyle sheet attached to that page. But browsers also have their own default style sheets that dictate the rendering of web pages, and in addition tothat, users can customize their browsers by making selections that adjust the display of web pages. The final appearance of a web page is theresult of the rules of all three of these sources coming together (or “cascading”) to render the web page in an optimal way.A common tag—the paragraph tag, or tag—illustrates the concept. By default, browsers come with style sheets that define the font and fontsize for paragraph text (that is, text that falls between tags in the HTML code). In Internet Explorer, for example, all body text, includingparagraph text, displays in Times New Roman, Medium font by default.As the author of a web page, however, you can create a style sheet that overrides the browser’s default style for paragraph font and font size. Forexample, you can create the following rule in your style sheet:font-family: Arial; font-size: small; When a user loads the page, the paragraph font and font size settings set by you as the author override the default paragraph text settings of theUsers can make selections to customize the browser display in an optimal way for their own use. In Internet Explorer, for example, the user canselect View� Text Size� Largest to expand the page font to a more readable size if they think the font is too small. Ultimately (at least in thiscase), the user’s selection overrides both the default browser styles for paragraph font size and the paragraph styles created by the author of theweb page.
Inheritance is another important part of the cascade. Properties for most elements on a web page are inherited—for example, paragraph tags
114
To the topTo the topinherit certain properties from body tags, span tags inherit certain properties from paragraph tags, and so on. Thus, if you create the following rulein your style sheet:body { font-family: Arial; font-style: italic; All paragraph text on your web page (as well as text that inherits properties from the paragraph tag) will be Arial and italic because the paragraphtag inherits these properties from the body tag. You can, however, become more specific with your rules, and create styles that override thestandard formula for inheritence. For example, if you create the following rules in your style sheet:body { font-family: Arial; font-style: italic; font-family: Courier; font-style: normal; All body text will be Arial and italic paragraph (and its inherited) text, which will display as Courier normal (non-italic). Technically, theparagraph tag first inherits the properties that are set for the body tag, but then ignores those properties because it has properties of its owndefined. In other words, while page elements generally inherit properties from above, the direct application of a property to a tag always causes anoverride of the standard formula for inheritance.The combination of all of the factors discussed above, plus other factors like CSS specificity (a system that gives different weight to particularkinds of CSS rules), and the order of CSS rules, ultimately create a complex cascade where items with higher priorities override properties thathave lower priorities. For more information on the rules governing the cascade, inheritance, and specificity, visitAbout text formatting and CSSBy default, Dreamweaver uses Cascading Style Sheets (CSS) to format text. The styles that you apply to text using the Property inspector ormenu commands create CSS rules that are embedded in the head of the current document.You can also use the CSS Styles panel to create and edit CSS rules and properties. The CSS Styles panel is a much more robust editor than theProperty inspector, and displays all CSS rules defined for the current document, whether those rules are embedded in the head of the documentor in an external style sheet. Adobe recommends that you use the CSS Styles panel (rather than the Property inspector) as the primary tool forcreating and editing your CSS. As a result, your code will be cleaner and easier to maintain.In addition to styles and style sheets you create, you can use style sheets that come with Dreamweaver to apply styles to your documents.For a tutorial about formatting text with CSS, see About Shorthand CSS propertiesThe CSS specification allows for the creation of styles using an abbreviated syntax known as shorthand CSS. Shorthand CSS lets you specify thevalues of several properties using a single declaration. For example, the property lets you set font-stylefont-variantfont-font-sizeline-height, and font-family properties on a single line.A key issue to note when using shorthand CSS, is that values omitted from a shorthand CSS property are assigned their default value. This maycause pages to be incorrectly displayed when two or more CSS rules are assigned to the same tag.For example, the rule shown below uses longhand CSS syntax. Note that the font-variantfont-stretchfont-size-adjust, andfont-style properties have been assigned their default values.h1 { font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none
115
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
Rewritten as a single, shorthand property, the same rule might appear as follows:h1 { font: bold 16pt/18pt Arial }When written using shorthand notation, omitted values are automatically assigned their default values. Thus, the previous shorthand exampleomits the font-variantfont-stylefont-stretch, and font-size-adjustIf you have styles defined in more than one location (for example, both embedded in an HTML page and imported from an external style sheet)using both the short and long forms of CSS syntax, be aware that omitted properties in a shorthand rule may override (or ) properties thatare explicitly set in another rule.For this reason, Dreamweaver uses the long form of CSS notation by default. This prevents possible problems caused by a shorthand ruleoverriding a longhand rule. If you open a web page that was coded with shorthand CSS notation in Dreamweaver, be aware that Dreamweaver willcreate any new CSS rules using the longhand form. You can specify how Dreamweaver creates and edits CSS rules by changing the CSS editingpreferences in the CSS Styles category of the Preferences dialog box (Edit� Preferences in Windows; Dreamweaver� Preferences on theThe CSS Styles panel creates rules using only longhand notation. If you create a page or CSS style sheet using the CSS Styles panel, beaware that hand coding shorthand CSS rules may result in the shorthand properties overriding those created in longhand form. For this reason,use longhand CSS notation to create your styles.
Understanding CSS tutorial
Apply, remove, or rename class styles
Adding and formatting text
CSS Styles panel
Formatting text with CSS tutorial
116
Create a CSS rule
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy PolicyYou can create a CSS rule to automate the formatting of HTML tags or a range of text identified by or Place the insertion point in the document, and then do one of the following to open the New CSS Rule dialog box:
Select Format� CSS Styles� New.
In the CSS Styles panel (Window� CSS Styles), click the New CSS Rule (+) button located in the lower-right side of the
Select text in the Document window, select New CSS Rule from the Targeted Rule pop-up menu in the CSS Propertyinspector (Window� Properties); then click the Edit Rule button or select an option from the Property inspector (forexample, click the Bold button), to initiate a new rule.In the New CSS Rule dialog box, specify the selector type for the CSS rule you want to create:
To create a custom style that can be applied as a attribute to any HTML element, select the Class option from theSelector Type pop-up menu and then enter a name for the style in the Selector Name text box.Class names must begin with a period and can contain any combination of letters and numbers (for example,.myhead1). If you don’t enter a beginning period, Dreamweaver automatically enters it for you.
To define the formatting for a tag that contains a specific attribute, select the ID option from the Selector Type pop-upmenu and then enter the unique ID (for example, containerDIV) in the Selector Name text box.IDs must begin with a pound (#) sign and can contain any combination of letters and numbers (for example, #myID1). Ifyou don’t enter a beginning pound sign, Dreamweaver automatically enters it for you.
To redefine the default formatting of a specific HTML tag, select the Tag option from the Selector Type pop-up menu; thenenter an HTML tag in the Selector Name text box or select one from the popup menu.
To define a compound rule that affects two or more tags, classes, or IDs simultaneously, select the Compound option andenter the selectors for your compound rule. For example if you enter div p, all p elements within div tags will be affectedby the rule. A description text area explains exactly which elements the rule will affect as you add or delete selectors.Select the location in which you want to define the rule, and then click OK:
To place the rule in a style sheet that is already attached to the document, select the style sheet.
To create an external style sheet, select New Style Sheet File.
To embed the style in the current document, select This Document Only.In the CSS Rule Definition dialog box, select the style options you want to set for the new CSS rule. For more information, seethe next section.When you are finished setting style properties, click OK.Clicking OK without setting style options results in a new, empty rule.
117
CSS3 transition effects
To the topTarget RuleTransition OnUse the Same Transition for All PropertiesUse a Different Transition for Each PropertyTiming functionEnd ValueChoose Where To Create The TransitionTo the topYou can create, modify, and delete CSS3 transitions using the CSS Transitions panel.To create a CSS3 transition, create a transition class by specifying values for the transition properties of the element. If you select an elementbefore creating a transition class, the transition class is automatically applied to the selected element.You can choose to add the generated CSS code to the current document or specify an external CSS file.Create and apply CSS3 transition effect(Optional) Select an element (paragraph, heading, and so on) to which you want to apply the transition. Alternatively, you cancreate a transition and apply it later to an element.Select WindowCSS TransitionsClick
Create a transition class using the options in the New Transition dialog box.Enter a name for the selector. The selector can be any CSS selector such as a tag, a rule, an ID, or acompound selector. For example, if you want to add transition effects to all tags, enter Select a state to which you want to apply the transition. For example, if you want to apply the transition whenthe mouse moves over the element, use the Select this option if you want to specify the same , and for all CSS properties that you want to transition.Select this option if you want to specify a different , and for each of CSS properties that you want to transition.Click
to add a CSS property to transition.Enter a duration in seconds (s) or milliseconds (ms) for the transition effect.The time, in seconds or milliseconds, before the transition effect starts.Select a transition style from the available options.The end value for the transition effect. For example, if you want the font-size to increase to 40px at the end of thetransition effect, specify 40px for the font-size property.To embed the style in the current document, select This Document OnlyIf you want to create an external style sheet for the CSS3 code, select New Style Sheet File. When you click you are prompted for a location to save the new CSS file. After the style sheet is created, it is added to the Where To Create Transition menu.Edit CSS3 transition effectsIn the CSS Transitions panel, select the transition effect that you want to edit.
118
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
To the topClick
Use the Edit Transition dialog to change previously entered values for the transition.Disable CSS shorthand for TransitionsSelect � PreferencesSelect CSS StylesIn Use Shorthand For, deselect Transition.
119
Add a property to a CSS rule

You can use the CSS Styles panel to add properties to rules.In the CSS Styles panel (Window� CSS), select a rule in the All Rules pane (All mode), or select a property in the Summaryfor Selection pane (Current mode).Do one of the following:
If Show Only Set Properties view is selected in the Properties pane, click the Add Properties link and add a property.
If Category view or List view is selected in the Properties pane, fill in a value for the property you want to add.
Legal Notices | Online Privacy Policy
120
Apply, remove, or rename CSS class styles
To the topTo the topTo the topApply a CSS class styleRemove a class style from a selectionRename a class styleClass styles are the only type of CSS style that can be applied to any text in a document, regardless of which tags control the text. All class stylesassociated with the current document are displayed in the CSS Styles panel (with a period [.] preceding their name) and in the Style popup menuof the text Property inspector.You’ll see most styles updated immediately, however, you should preview your page in a browser to verify a style was applied as expected. Whenyou apply two or more styles to the same text, the styles may conflict and produce unexpected results.When previewing styles defined in an external CSS style sheet, be sure to save the style sheet to ensure that your changes are reflected whenyou preview the page in a browser.Apply a CSS class styleIn the document, select the text to which you want to apply a CSS style.Place the insertion point in a paragraph to apply the style to the entire paragraph.If you select a range of text within a single paragraph, the CSS style affects only the selected range.To specify the exact tag to which the CSS style should be applied, select the tag in the tag selector located at the lower left ofthe Document window.To apply a class style, do one of the following:
In the CSS Styles panel (Window� CSS Styles), select All mode, right-click the name of the style you want to apply, andselect Apply from the context menu.
In the HTML Property inspector, select the class style you want to apply from the Class popup menu.
In the Document window, right-click (Windows) or Controlclick (Macintosh) the selected text, and in the context menu,select CSS Styles and then select the style you want to apply.
Select Format� CSS Styles, and in the submenu select the style you want to apply.Remove a class style from a selectionSelect the object or text you want to remove the style from.In the HTML Property inspector (Window� Properties), select None from the Class popup menu.Rename a class styleIn the CSS styles panel, right-click the CSS class style you want to rename and select Rename Class.You can also rename a class by selecting Rename Class from the CSS Styles panel options menu.In the Rename Class dialog box, make sure that the class you want to rename is selected in the Rename Class popup menu.In the New Name text box, enter the new name for the new class and click OK.If the class you’re renaming is internal to the head of the current document, Dreamweaver changes the class name as well asall instances of the class name in the current document. If the class you’re renaming is in an external CSS file, Dreamweaveropens and changes the class name in the file. Dreamweaver also launches a site-wide Find and Replace dialog box so thatyou can search for all instances of the old class name in your site.More Help topics[print]About Cascading Style Sheets
Legal Notices | Online Privacy Policy
121
Check for cross-browser CSS rendering issues
To the topTo the topTo the topTo the topTo the topRun a browser compatibility checkSelect the element affected by a found issueJump to the next or previous found issue in the codeSelect browsers for Dreamweaver to check againstExclude an issue from the browser compatibility checkEdit the Ignored Issues listSave a browser compatibility check reportView a browser compatibility check report in a browserOpen the Adobe CSS Advisor websiteThe Browser Compatibility Check (BCC) feature helps you locate combinations of HTML and CSS that have problems in certain browsers. Whenyou run a BCC on an open file, Dreamweaver scans the file and reports any potential CSS rendering issues in the Results panel. A confidencerating, indicated by a quarter, half, three-quarter, or completely filled circle, indicates the likelihood of the bug’s occurrence (a quarter-filled circleindicating a possible occurrence, and a completely-filled circle indicating a very likely occurrence). For each potential bug that it finds,Dreamweaver also provides a direct link to documentation about the bug on Adobe CSS Advisor, a website that details commonly known browserrendering bugs, and offers solutions for fixing them.By default, the BCC feature checks against the following browsers: Firefox 1.5; Internet Explorer (Windows) 6.0 and 7.0; Internet Explorer(Macintosh) 5.2; Netscape Navigator 8.0; Opera 8.0 and 9.0; Safari 2.0.This feature replaces the former Target Browser Check feature, but retains the CSS functionality of that feature. That is, the new BCC feature stilltests the code in your documents to see if any of the CSS properties or values are unsupported by your target browsers.Three levels of potential browser-support problems can arise:
An error indicates CSS code that might cause a serious visible problem in a particular browser, such as causing parts of apage to disappear. (Error is the default designation for browser support problems, so in some cases, code with an unknowneffect is also marked as an error.)
A warning indicates a piece of CSS code that isn’t supported in a particular browser, but that won’t cause any serious display
An informational message indicates code that isn’t supported in a particular browser, but that has no visible effect.Browser compatibility checks do not alter your document in any way.Run a browser compatibility check
Select File� Check Page� Browser Compatibility.Select the element affected by a found issue
Double-click the issue in the Results panel.Jump to the next or previous found issue in the code
Select Next Issue or Previous Issue from the Browser Compatibility Check menu in the Document toolbar.Select browsers for Dreamweaver to check againstIn the Results panel (Window� Results), select the Browser Compatibility Check tab.Click the green arrow in the upper-left corner of the Results panel and select Settings.Select the checkbox next to each browser you want to check against.For each selected browser, select a minimum version to check against from the corresponding popup menu.For example, to see if CSS rendering bugs might appear in Internet Explorer 5.0 and later and Netscape Navigator 7.0 andlater, select the checkboxes next to those browser names, and select 5.0 from the Internet Explorer popup menu and 7.0from the Netscape popup menu.
122

To the topTo the topTo the topTo the top
Exclude an issue from the browser compatibility check
Run a browser compatibility check.In the Results panel, Right-click (Windows) or Control-click (Macintosh) the issue that you want to exclude from futureSelect Ignore Issue from the context menu.Edit the Ignored Issues listIn the Results panel (Window� Results), select the Browser Compatibility Check tab.Click the green arrow in the upper-left corner of the Results panel and select Edit Ignored Issues List.In the Exceptions.xml file, find the issue that you want deleted from the Ignored Issues list and delete it.Save and close the Exceptions.xml file.Save a browser compatibility check reportRun a browser compatibility check.Click the Save Report button on the left side of the Results panel.Hover over buttons in the Results panel to see button tool tips.Note: Reports are not saved automatically; if you want to keep a copy of a report, you must follow the above procedure tosave it.View a browser compatibility check report in a browserRun a browser compatibility check.Click the Browse Report button on the left side of the Results panel.Hover over buttons in the Results panel to see button tool tips.Open the Adobe CSS Advisor websiteIn the Results panel (Window� Results), select the Browser Compatibility Check tab.Click the link text at the bottom right of the panel.More Help topicsCSS Advisor
Legal Notices | Online Privacy Policy
123
Convert inline CSS to a CSS rule

line styles are not recommended best practices. To make your CSS cleaner and more organized, you can convert inline styles to CSS rules thatreside in the head of the document or in an external style sheet.In Code view (View� Code), select the entire style attribute that contains the inline CSS you want to convertRight-click and select CSS Styles� Convert Inline CSS to Rule.In the Convert Inline CSS dialog box, enter a class name for the new rule, and then do one of the following:
Specify a style sheet where you want the new CSS rule to appear and click OK.
Select the head of the document as the location where you want the new CSS rule to appear and click OK.You can also convert rules by using the Coding toolbar. The Coding toolbar is available in Code view only.More Help topics
Legal Notices | Online Privacy Policy
124
Disable/Enable CSS

The Disable/Enable CSS Property feature lets you comment out portions of CSS from the CSS Styles panel, without having to make changesdirectly in the code. When you comment out portions of the CSS, you can see what kinds of effects particular properties and values have on yourWhen you disable a CSS property, Dreamweaver adds CSS comment tags and a [disabled] label to the CSS property you’ve disabled. You canthen easily re-enable or delete the disabled CSS property according to your preference.For a video overview from the Dreamweaver engineering team about working with CSS Disable/Enable, see In the Properties pane of the CSS Styles panel (Window� CSS Styles), select the property you want to disable.Click the Disable/Enable CSS Property icon in the lower-right corner of the Properties pane. The icon also appears if youhover to the left of the property itself.Once you click the Disable/Enable CSS Property icon, a Disabled icon appears to the left of the property. To re-enable theproperty, click the Disabled icon, or right-click (Windows) or Control-click (Macintosh OS) the property and select Enable.(Optional) To enable or delete all of the disabled properties in a selected rule, right-click (Windows) or Control-click(Macintosh OS) any rule or property in which properties are disabled, and selectEnable All Disabled in Selected Rule, orDelete all Disabled in Selected rule.
Legal Notices | Online Privacy Policy
125
Edit a CSS rule

To the topTo the topTo the topEdit a rule in the CSS Styles panel (Current mode)Edit a rule in the CSS Styles panel (All mode)Change the name of a CSS selectorYou can easily edit both internal and external rules that you have applied to a document.When you edit a CSS style sheet that controls the text in your document, you instantly reformat all of the text controlled by that CSS style sheet.Edits to an external style sheet affect all the documents linked to it.You can set an external editor to use for editing style sheets.Edit a rule in the CSS Styles panel (Current mode)Open the CSS Styles panel by selecting Window� CSS Styles.Click the Current button at the top of the CSS Styles panel.Select a text element in the current page to display its properties.Do one of the following:
Double-click a property in the Summary for Selection pane to display the CSS Rule Definition dialog box, and then makeyour changes.
Select a property in the Summary for Selection pane, and then edit the property in the Properties pane below.
Select a rule in the Rules pane, and then edit the rule’s properties in the Properties pane below.Note: You can change the double-clicking behavior for editing CSS, as well as other behaviors, by changingDreamweaver preferences.Edit a rule in the CSS Styles panel (All mode)Open the CSS Styles panel by selecting Window� CSS Styles.Click the All button at the top of the CSS Styles panel.Do one of the following:
Double-click a rule in the All Rules pane to display the CSS Rule Definition dialog box, and then make your changes.
Select a rule in the All Rules pane, and then edit the rule’s properties in the Properties pane below.
Select a rule in the All Rules pane, and then click the Edit Style button in the lower-right corner of the CSS Styles panel.Note: You can change the double-clicking behavior for editing CSS, as well as other behaviors, by changingDreamweaver preferences.Change the name of a CSS selectorIn the CSS Styles panel (All mode) select the selector you want to change.Click the selector again to make the name editable.Make your changes and press Enter (Windows) or Return (Macintosh).More Help topicsSet text properties in the Property inspector
Legal Notices | Online Privacy Policy
126
Edit a CSS style sheet

A CSS style sheet typically includes one or more rules. You can edit an individual rule in a CSS style sheet using the CSS Styles panel, or if youprefer, you can work directly in the CSS style sheet.In the CSS Styles panel (Window� CSS Styles), select All mode.In the All rules pane, double-click the name of the style sheet you want to edit.In the Document window, modify the style sheet as desired, and then save the style sheet.
Legal Notices | Online Privacy Policy
127
Enhancements to CSS3 support in the CSS styles panel (CS5.5)
To the topTo the topTo the topTo the topTo the topApply CSS3 properties using the pop-up panelSpecifying multiple value-setsLocate properties in the Category viewEnsuring compliance with browsersPreview changes in Live viewA pop-up panel has been introduced in the CSS panel for the following properties:
text-shadow
box-shadow
border-radius
border-imageThe options in the pop-up panel ensure that you apply the property correctly even if you are unfamiliar with their W3C syntax.
The pop-up panel displaying options for the CSS3 property border-imageApply CSS3 properties using the pop-up panel
Click the “+” icon corresponding to these properties. Use the options in the pop-up panel to apply the property.Specifying multiple value-setsCSS3 properties like text-shadow support multiple value sets. For example: text-shadow: 3px 3px #000, -3px -3px #0f0;When you specify multiple value-sets in the code view and open the pop-up panel for editing, only the first value-set is displayed. If you edit thisvalue-set in the pop-up panel, only the first value-set in the code is affected. The other value-sets are unaffected, and applied as specified in theLocate properties in the Category viewIn the category view, text-shadow is listed under the Font category. box-shadow border-radius, and border-image are listed under the BorderEnsuring compliance with browsersDreamweaver CS5.5 also supports browser (webkit, Mozilla) specific implementation of box-shadow, border-radius, and border-image properties.In the Category view, use the options under the respective browser category to ensure browser compliance for these properties. For example, tocomply with Mozilla’s implementation of the border-image property, edit -moz-border-image in the Mozilla category.Preview changes in Live view
128

Changes made to CSS properties are not displayed in the Design view. Switch to Live view to preview changes. You can also make quick edits to
CSS3 properties in the Live view, and the changes are immediately reflected in this view.The following CSS3 properties are supported in Live View:
text-shadow
border-radius
-webkit-box-shadow
-webkit-border-image
Have a tutorial you would like toshare?
Enhanced support for CSS3in DW CS5.5Preran KurnoolSupport for Text-shadow, Box-shadow, Border-radius, and Border-image
Legal Notices | Online Privacy Policy
129
Format CSS code
To the topTo the topTo the topSet CSS code formatting preferencesFormat CSS code in a CSS style sheet manuallyFormat embedded CSS code manuallyYou can set preferences that control the format of your CSS code whenever you create or edit a CSS rule using the Dreamweaver interface. Forexample, you can set preferences that will place all CSS properties on separate lines, place a blank line between CSS rules, and so on.When you set CSS code formatting preferences, the preferences you select are automatically applied to all new CSS rules that you create. Youcan, however, also apply these preferences manually to individual documents. This might be useful if you have an older HTML or CSS documentthat needs formatting.Note: CSS code formatting preferences apply to CSS rules in external or embedded style sheets only (not to in-line styles)Set CSS code formatting preferencesSelect Edit� Preferences.In the Preferences dialog box, select the Code Format category.Next to Advanced Formatting, click the CSS button.In the CSS Source Format Options dialog box, select the options that you want to apply to your CSS source code. A previewof the CSS as it would look according to the options you’ve selected appears in the Preview window below.Indent Properties WithSets the indentation value for properties within a rule. You can specify tabs or spaces.Each Property On A Separate LinePlaces each property within a rule on a separate line.Opening Brace On Separate LinePlaces the opening brace for a rule on a separate line from the selector.Only If More Than One PropertyPlaces single-property rules on the same line as the selector.All Selectors For A Rule On Same LinePlaces all selectors for the rule on the same line.Blank Line Between RulesInserts a blank line between each rule.Click OK.Note: CSS code formatting also inherits the Line Break Type preference that you set in the Code Format category of the Preferences dialog box.Format CSS code in a CSS style sheet manuallyOpen a CSS style sheet.Select Commands� Apply Source Formatting.The formatting options you set in CSS code formatting preferences are applied to the entire document. You cannot formatindividual selections.Format embedded CSS code manuallyOpen an HTML page that contains CSS embedded in the head of the document.Select any part of the CSS code.Select Commands� Apply Source Formatting To Selection.The formatting options you set in CSS code formatting preferences are applied to all CSS rules in the head of the documentNote: You can select Commands� Apply Source Formatting to format the entire document according to your specified codeformatting preferences.More Help topics
Legal Notices | Online Privacy Policy
130
Inspect CSS in Live view

Inspect mode works together with Live View to help you quickly identify HTML elements and their associated CSS styles. With Inspect modeturned on, you can hover over elements on your page to see the CSS box model attributes for any block-level element.Note: For more information on the CSS box model, see the CSS 2.1 specificationIn addition to seeing a visual representation of the box model in Inspect mode, you can also use the CSS Styles panel as you hover over elementsin the Document window. When you have the CSS Styles panel open in Current mode and hover over an element on the page, the rules andproperties in the CSS Styles panel automatically update to show you the rules and properties for that element. Additionally, any view or panelrelated to the element you’re hovering over updates as well (for example, Code view, the Tag selector, the Property inspector, and so on).With your document open in the Document window, click the Inspect button (next to the Live View button in the DocumentNote: If you’re not already in Live view, Inspect mode automatically enables it.Hover over elements on the page to see the CSS box model. Inspect mode highlights different colors for the border, margin,padding, and content.(Optional) Press the left arrow on your computer keyboard to highlight the parent of the currently highlighted element. Pressthe right arrow to return to highlighting for the child element.(Optional) Click an element to lock a highlight selection.Note: Clicking an element to lock a highlight selection turns off Inspect mode.
Have a tutorial you would like toshare?
Dreamweaver CS5 - CSSScott Fegette, Dreamweaver Product ManagerVideo tutorial taking you through CSS InspectMore Help topics
Legal Notices | Online Privacy Policy
131
Link to an external CSS style sheet

When you edit an external CSS style sheet, all documents linked to that CSS style sheet are updated to reflect those edits. You can export theCSS styles found in a document to create a new CSS style sheet, and attach or link to an external style sheet to apply the styles found there.You can attach to your pages any style sheet that you create or copy into your site. In addition, Dreamweaver is shipped with prebuilt style sheetsthat can be automatically moved into your site and attached to your pages.Open the CSS Styles panel by doing one of the following:
Select Window� CSS Styles.
Press Shift + F11.In the CSS Styles panel, click the Attach Style Sheet button. (It’s in the lower-right corner of the panel.)Do one of the following:
Click Browse to browse to an external CSS style sheet.
Type the path to the style sheet in the File/URL box.For Add As, select one of the options:
To create a link between the current document and an external style sheet, select Link. This creates a link tag in theHTML code, and references the URL where the published style sheet is located. This method is supported by bothMicrosoft Internet Explorer and Netscape Navigator.
You cannot use a link tag to add a reference from one external style sheet to another. If you want to nest style sheets, youmust use an import directive. Most browsers also recognize the import directive within a page (rather than just within stylesheets). There are subtle differences in how conflicting properties are resolved when overlapping rules exist within externalstyle sheets that are linked versus imported to a page. If you want to import, rather than link to, an external style sheet,select Import.In the Media popup menu, specify the target medium for the style sheet.For more information on media-dependent style sheets, see the World Wide Web Consortium website atClick the Preview button to verify that the style sheet applies the styles you want to the current page.If the styles applied are not what you expect them to be, click Cancel to remove the style sheet. The page will revert to itsprevious appearance.Click OK.More Help topicsCreate a page based on a Dreamweaver sample file
Legal Notices | Online Privacy Policy
132
Move/export CSS rules
To the topTo the topTo the topTo the topMove/export CSS rules to a new style sheetMove/export CSS rules to an existing style sheetRearrange or move CSS rules by draggingSelect multiple rules before moving themThe CSS management features in Dreamweaver make it easy for you to move or export CSS rules to different locations. You can move rules fromdocument to document, from the head of a document to an external style sheet, between external CSS files, and more.Note: If the rule you’re trying to move conflicts with a rule in the destination style sheet, Dreamweaver displays the Rule With Same Name Existsdialog box. If you elect to move the conflicting rule, Dreamweaver places the moved rule immediately adjacent to the conflicting rule in thedestination style sheet.Move/export CSS rules to a new style sheetDo one of the following:
In the CSS Styles panel, select the rule or rules you want to move. Then right-click the selection and select Move CSSRules from the context menu. To select multiple rules, Controlclick (Windows) or Command-click (Macintosh) the rulesyou want to select.
In Code view, select the rule or rules you want to move. Then right-click the selection and select CSS Styles� Move CSSRules from the context menu.
Note: Partial selection of a rule will result in the relocation of the entire rule.In the Move To External Style Sheet dialog box, select the new style sheet option and click OK.In the Save Style Sheet File As dialog box, enter a name for the new style sheet and click Save.When you click Save, Dreamweaver saves a new style sheet with the rules you selected and attaches it to the currentYou can also move rules by using the Coding toolbar. The Coding toolbar is available in Code view only.Move/export CSS rules to an existing style sheetDo one of the following:
In the CSS Styles panel, select the rule or rules you want to move. Then right-click the selection and select Move CSSRules from the context menu. To select multiple rules, Controlclick (Windows) or Command-click (Macintosh) the rulesyou want to select.
In Code view, select the rule or rules you want to move. Then right-click the selection and select CSS Styles� Move CSSRules from the context menu.
Note: Partial selection of a rule will result in the relocation of the entire rule.In the Move To External Style Sheet dialog box, select an existing style sheet from the popup menu or browse to an existingstyle sheet and click OK.Note: The popup menu displays all style sheets that are linked to the current document.You can also move rules by using the Coding toolbar. The Coding toolbar is available in Code view only.Rearrange or move CSS rules by dragging
In the CSS Styles panel (All mode), select a rule and drag it rule to the desired location. You can select and drag to reorder rules within a stylesheet, or move a rule to another style sheet or the document head.You can move more than one rule at a time by Controlclicking (Windows) or Command-clicking (Macintosh) multiple rules to select them.Select multiple rules before moving them
In the CSS Styles panel, Controlclick (Windows) or Command-click (Macintosh) the rules you want to select.More Help topics
133

Legal Notices | Online Privacy Policy
134
Set CSS Styles preferences

CSS style preferences control how Dreamweaver writes the code that defines CSS styles. CSS styles can be written in a shorthand form thatsome people find easier to work with. Some older versions of browsers, however, do not correctly interpret the shorthand.Select Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh) and from the Category list select CSSSet the CSS style options you want to apply:When Creating CSS Rules Use Shorthand ForLets you select which CSS style properties Dreamweaver writesin shorthand.When Editing CSS Rules Use ShorthandControls whether Dreamweaver rewrites existing styles in shorthand.Select If Original Used Shorthand to leave all styles as they are.Select According to Settings Above to rewrite styles in shorthand for the properties selected in Use Shorthand For.When Double-Clicking In CSS PanelLets you select a tool for editing CSS rules.Click OK.
Legal Notices | Online Privacy Policy
135
Set CSS heading properties for an entire page

You can specify fonts, font sizes, and colors for your page headings. By default, Dreamweaver creates CSS rules for your headings and appliesthem to all headings you use on the page. (The rules are embedded in the section of the page.)Headings are available for selection in HTML Property inspector.Select Modify� Page Properties, or click the Page Properties button in the text Property inspector.Choose the Headings (CSS) category and set the options.Heading FontSpecifies the default font family to use for headings. Dreamweaver will use the font family you specify unlessanother font is specifically set for a text element.Heading 1 through Heading 6 Specify the font size and color to use for up to six levels of heading tags.
Legal Notices | Online Privacy Policy
136
Set CSS link properties for an entire page

You can specify fonts, font sizes, colors, and other items for your links. By default, Dreamweaver creates CSS rules for your links and appliesthem to all links you use on the page. (The rules are embedded in the section of the page.)Note: If you want to customize individual links on a page, you need to create individual CSS rules, and then apply them to the links separately.Select Modify� Page Properties, or click the Page Properties button in the text Property inspector.Choose the Links (CSS) category and set the options.Link FontSpecifies the default font family to use for link text. By default, Dreamweaver uses the font family specified for theentire page unless you specify another font.Specifies the default font size to use for link text.Link ColorSpecifies the color to apply to link text.Visited LinksSpecifies the color to apply to visited links.Rollover LinksSpecifies the color to apply when a mouse (or pointer) hovers over a link.Active LinksSpecifies the color to apply when a mouse (or pointer) clicks on a linkUnderline StyleSpecifies the underline style to apply to links. If your page already has an underline link style defined(through an external CSS style sheet for example), the Underline Style menu defaults to a “don’t change” option. This optionalerts you to a link style that has been defined. If you modify the underline link style using the Page Properties dialog box,Dreamweaver will change the previous link definition.
Legal Notices | Online Privacy Policy
137
The CSS Styles panel
To the topThe CSS Styles panel in Current modeThe CSS Styles panel in All modeCSS Styles panel buttons and viewsOpen the CSS Styles panelThe CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current mode), or all of the rulesand properties that are available to the document (All mode). A toggle button at the top of panel lets you switch between the two modes. The CSSStyles panel also lets you modify CSS properties in both All and Current mode.The CSS Styles panel in Current modeIn Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSS properties for the currentselection in the document, a Rules pane that displays the location of selected properties (or a cascade of rules for the selected tag, depending onyour selection), and a Properties pane that lets you edit CSS properties for the rule applied to the selection.
You can resize any of the panes by dragging the borders between the panes, and can resize columns by dragging dividers.The Summary for Selection pane displays a summary of CSS properties and their values for the item currently selected in the active document.The summary shows the properties for all rules that directly apply to the selection. Only set properties are shown.For example, the following rules create a class style and a tag (in this case paragraph) style:.foo{ color: green; font-family: 'Arial'; p{ font-family: 'serif'; font-size: 12px; When you select paragraph text with a class style of in the Document window, the Summary for Selection pane displays the relevantproperties for both rules, because both rules apply to the selection. In this case, the Summary for Selection pane would list the following
138
To the top
font-size: 12px
font-family: 'Arial' color: greenThe Summary for Selection pane arranges properties in increasing order of specificity. In the above example, the tag style defines the font sizeand the class style defines the font family and the color. (The font family defined by the class style overrides the font family defined by the tag stylebecause class selectors have higher specificity than tag selectors. For more information on CSS specificity, seeThe Rules pane displays two different views—About view or Rules view—depending on your selection. In About view (the default view), the panedisplays the name of the rule that defines the selected CSS property, and the name of the file containing the rule. In Rules view, the pane displaysa cascade, or hierarchy, of all rules that apply directly or indirectly to the current selection. (The tag to which the rule directly applies appears inthe right column.) You can toggle between the two views by clicking the Show Information and Show Cascade buttons in the upper-right corner ofthe Rules pane.When you select a property in the Summary for Selection pane, all of the properties for the defining rule appear in the Properties pane. (Thedefining rule is also selected in the Rules pane, if Rules view is selected.) For example, if you have a rule called that defines a fontfamily, font size, and color, then selecting any of those properties in the Summary for Selection pane will display all of the properties defined bythe .maintext rule in the Properties pane, as well as the selected rule in the Rules pane. (Additionally, selecting any rule in the Rulespane displays that rule’s properties in the Properties pane.) You can then use the Properties pane to quickly modify your CSS, whether it isembedded in the current document or linked by means of an attached style sheet. By default, the Properties pane shows only those properties thathave already been set, and arranges them in alphabetical order.You can choose to display the Properties pane in two other views. Category view displays properties grouped into categories, such as Font,Background, Block, Border, and so on, with set properties at the top of each category, displayed in blue text. List view displays an alphabetical listof all available properties, and likewise sorts set properties to the top, displaying them in blue text. To switch between views, click the ShowCategory View, Show List View, or Show Only Set Properties button, located at the lower-left corner of the Properties pane.In all views, set properties are displayed in blue; properties irrelevant to a selection are displayed with a red strike-through line. Holding the mouseover a rule that is irrelevant displays a message explaining why the property is irrelevant. Typically a property is irrelevant because it’s overriddenor not an inherited property.Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.The CSS Styles panel in All modeIn All mode, the CSS Styles panel displays two panes: an All Rules pane (on top), and a Properties pane (on bottom). The All Rules pane displaysa list of rules defined in the current document as well as all rules defined in style sheets attached to the current document. The Properties panelets you edit CSS properties for any selected rule in the All Rules pane.
You can resize either pane by dragging the border between the panes, and can resize the Properties columns by dragging their divider.When you select a rule in the All Rules pane, all of the properties that are defined in that rule appear in the Properties pane. You can then use theProperties pane to quickly modify your CSS, whether it is embedded in the current document or linked in an attached style sheet. By default, theProperties pane shows only those properties that have been previously set, and arranges them in alphabetical order.You can choose to display properties in two other views. Category view displays properties grouped into categories, such as Font, Background,Block, Border, and so on, with set properties at the top of each category. List view displays an alphabetical list of all available properties, and
139

To the topTo the top
likewise sorts set properties to the top. To switch between views, click the Show Category View, Show List View, or Show Only Set Properties
button, located at the lower-left corner of the Properties pane. In all views, set properties are displayed in blue.Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.CSS Styles panel buttons and viewsIn both All and Current modes, the CSS Styles panel contains three buttons that let you alter the view in the Properties pane (the bottom pane):
Category ViewList ViewSet Properties ViewCategory ViewDivides the Dreamweaver-supported CSS properties into eight categories: font, background, block, border, box, list, positioning,and extensions. Each category’s properties are contained in a list that you expand or collapse by clicking the Plus (+) button next to the categoryname. Set properties appear (in blue) at the top of the list.List ViewDisplays all of the Dreamweaver-supported CSS properties in alphabetical order. Set properties appear (in blue) at the top of the list.Set Properties ViewDisplays only those properties that have been set. Set Properties view is the default view.In both All and Current modes, the CSS Styles panel also contains the following buttons:
Attach Style SheetNew CSS RuleEdit StyleDisable/enable CSS propertyDelete CSSAttach Style SheetOpens the Link External Style Sheet dialog box. Select an external style sheet to link to or import into your currentNew CSS RuleOpens a dialog box in which you can select the type of style you’re creating—for example, to create a class style, redefine anHTML tag, or to define a CSS selector.Edit StyleOpens a dialog box in which you can edit the styles in the current document or in an external style sheet.Delete CSS RuleRemoves the selected rule or property from the CSS Styles panel, and removes the formatting from any element to which it wasapplied. (It does not, however, remove class or ID properties referenced by that style). The Delete CSS Rule button can also detach (or “unlink”)an attached CSS style sheet.Right-click (Windows) or Controlclick (Macintosh) the CSS Styles panel to open a context menu of options for working with CSS style sheetOpen the CSS Styles panelYou use the CSS Styles panel to view, create, edit, and remove CSS styles, as well as to attach external style sheets to documents.
Do one of the following:
Select Window� CSS Styles.
Press Shift+F11.
Click the CSS button in the Property inspector.
Legal Notices | Online Privacy Policy
140
Update CSS style sheets in a Contribute site

Adobe Contribute users can’t make changes to a CSS style sheet. To change a style sheet for a Contribute site, use Dreamweaver.Edit the style sheet using the Dreamweaver style-sheet-editing tools.Tell all of the Contribute users who are working on the site to publish pages that use that style sheet, then reedit those pagesto view the new style sheet.The following are important factors to keep in mind when updating style sheets for a Contribute site:
If you make changes to a style sheet while a Contribute user is editing a page that uses that style sheet, the user won’t seethe changes to the style sheet until they publish the page.
If you delete a style from a style sheet, the style name is not deleted from pages that use that style sheet, but since the styleno longer exists, it isn’t displayed the way the Contribute user may expect. Thus, if a user tells you that nothing happens whenthey apply a particular style, the problem may be that the style has been deleted from the style sheet.
Legal Notices | Online Privacy Policy
141
Use Design-Time style sheets

Design-Time style sheets allow you to show or hide design applied by a CSS style sheet as you work in a Dreamweaver document. For example,you can use this option to include or exclude the effect of a Macintosh-only or a Windows-only style sheet as you design a page.Design-Time style sheets only apply while you are working in the document; when the page is displayed in a browser window, only the styles thatare actually attached to or embedded in the document appear in a browser.Note: You can also enable or disable styles for an entire page using the Style Rendering toolbar. To display the toolbar, select View� Toolbars� Style Rendering. The Toggle Displaying of CSS Styles button (the right-most button) works independently of the other media buttons on theTo use a Design-time style sheet, follow these steps.Open the Design-Time Style Sheets dialog box by doing one of the following:
Right-click in the CSS Styles panel, and in the context menu select Design-time.
Select Format� CSS Styles� Design-time.In the dialog box, set options to show or hide a selected style sheet:
To display a CSS style sheet at design-time, click the Plus (+) button above Show Only At Design Time, then in the Selecta Style Sheet dialog box, browse to the CSS style sheet you want to show.
To hide a CSS style sheet, click the Plus (+) button above Hide At Design-Time, then in the Select a Style Sheet dialogbox, browse to the CSS style sheet you want to show.
To remove a style sheet from either list, click the style sheet you want to remove, then click the appropriate Minus (–)Click OK to close the dialog box.The CSS Styles panel updates with the selected style sheet’s name along with an indicator, “hidden” or “design,” to reflect thestyle sheet’s status.More Help topicsStyle Rendering toolbar overview
Legal Notices | Online Privacy Policy
142
Use Dreamweaver sample style sheets

Dreamweaver provides sample style sheets that you can apply to your pages or that you can use as starting points to develop your own styles.Open the CSS Styles panel by doing one of the following:
Select Window� CSS Styles.
Press Shift+F11.In the CSS Styles panel, click the Attach External Style Sheet button. (It’s in the lower-right corner of the panel.)In the Attach External Style Sheet dialog box, click Sample Style Sheets.In the Sample Style Sheets dialog box, select a style sheet from the list box.As you select style sheets within the list box, the Preview pane displays the text and color formatting of the selected styleClick the Preview button to apply the style sheet and verify that it applies the styles you want to the current page.If the styles applied are not what you expect them to be, select another style sheet from the list, and click Preview to seethose styles.By default, Dreamweaver saves the style sheet in a folder named CSS just below the root of the site you defined for yourpage. If that folder does not exist, Dreamweaver creates it. You can save the file to another location by clicking Browse andbrowsing to another folder.When you find a style sheet whose formatting rules meet your design criteria, click OK.
Legal Notices | Online Privacy Policy
143
Working with div tags
To the topInsert and edit div tagsCSS layout blocksWorking with AP elements(Creative Cloud users only): Seven new semantic tags are available when you select Insert� Layout. The new tags are : Article, Aside, HGroup,Navigation, Section, Header, and Footer. For more information, see Insert HTML5 semantic elements from the Insert panelInsert and edit div tagsYou can create page layouts by manually inserting tags and applying CSS positioning styles to them. A tag is a tag that defines logicaldivisions within the content of a web page. You can use tags to center blocks of content, create column effects, create different areas of color,and much more.If you’re unfamiliar using tags and Cascading Style Sheets (CSS) to create web pages, you can create a CSS layout based on one of the pre-designed layouts that come with Dreamweaver. If you’re uncomfortable working with CSS, but are familiar with using tables, you can also try usingNote: Dreamweaver treats all div tags with an absolute position as AP elements (absolutely positioned elements), even if you didn’t create thosediv tags using the AP Div drawing tool.Insert div tagsYou can use tags to create CSS layout blocks and position them in your document. This is useful if you have an existing CSS style sheet withpositioning styles attached to your document. Dreamweaver enables you to quickly insert a div tag and apply existing styles to it.In the Document window, place the insertion point where you want the tag to appear.Do one of the following:
Select Insert� Layout Objects� Div Tag.
In the Layout category of the Insert panel, click the Insert Div Tag button
Set any of the following options:Lets you select the location of the tag and the tag name if it is not a new tag.Displays the class style currently applied to the tag. If you attached a style sheet, classes defined in that style sheetappear in the list. Use this popup menu to select the style you want to apply to the tag.Lets you change the name used to identify the tag. If you attached a style sheet, IDs defined in that style sheet appearin the list. IDs for blocks that are already in your document are not listed.Note: Dreamweaver alerts you if you enter the same ID as another tag in your document.New CSS RuleOpens the New CSS Rule dialog box.Click OK.The div tag appears as a box in your document with placeholder text. When you move the pointer over the edge of the box,Dreamweaver highlights it.If the tag is absolutely positioned, it becomes an AP element. (You can edit tags that aren’t absolutely positioned.)Edit div tagsAfter you insert a tag, you can manipulate it or add content to it.Note: Div tags that are absolutely positioned become AP elements.When you assign borders to tags, or when you have CSS Layout Outlines selected, they have visible borders. (CSS Layout Outlines isselected by default in the View� Visual Aids menu.) When you move the pointer over a tag, Dreamweaver highlights the tag. You can changethe highlight color or disable highlighting.When you select a tag, you can view and edit rules for it in the CSS Styles panel. You can also add content to the tag by simply placingyour insertion point inside the tag, and then adding content just as you would add content to a page.View and edit rules applied to a div tagDo one of the following to select the
144
To the top
Click the border of the
Look for the highlighting to see the border.
Click inside the tag, and press Control+A (Windows) or Command+A (Macintosh) twice.
Click inside the tag, then select the tag from the tag selector at the bottom of the Document window.Select Window� CSS Styles to open the CSS Styles panel if it is not already open.Rules applied to the tag appear in the panel.Make edits as necessary.Place the insertion point in a div tag to add content
Click anywhere inside the tag’s borders.Change the placeholder text in a div tag
Select the text, and then type over it or press Delete.Note: You can add content to the tag just as you would add content to a page.Change the highlight color of div tagsWhen you move the pointer over the edge of a tag in Design view, Dreamweaver highlights the borders of the tag. You can enable or disablehighlighting as necessary, or change the highlight color in the Preferences dialog box.Select Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh).Select Highlighting from the category list on the left.Make either of the following changes and click OK:
To change the highlighting color for tags, click the Mouse-Over color box, and then select a highlight color using thecolor picker (or enter the hexadecimal value for the highlight color in the text box).
To enable or disable highlighting for tags, select or deselect the Show checkbox for Mouse-Over.Note: These options affect all objects, such as tables, that Dreamweaver highlights when you move the pointer overCSS layout blocksVisualizing CSS layout blocksYou can visualize CSS layout blocks while you work in Design view. A CSS layout block is an HTML page element that you can position anywhereon your page. More specifically, a CSS layout block is either a tag without , or any other page element that includes the, or CSS declarations. Following are a few examples of elements that are considered CSS layoutblocks in Dreamweaver:
A div tag
An image with an absolute or relative position assigned to it
An a tag with the style assigned to it
A paragraph with an absolute or relative position assigned to itNote: For purposes of visual rendering, CSS layout blocks do not include inline elements (that is, elements whose code falls within a line of text),or simple block elements like paragraphs.Dreamweaver provides a number of visual aids for viewing CSS layout blocks. For example, you can enable outlines, backgrounds, and the boxmodel for CSS layout blocks while you design. You can also view tooltips that display properties for a selected CSS layout block when you floatthe 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 OutlinesDisplays the outlines of all CSS layout blocks on the page.CSS Layout BackgroundsDisplays temporarily assigned background colors for individual CSS layout blocks, and hides any other backgroundcolors 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 distinctbackground color. (Dreamweaver selects the colors using an algorithmic process—there is no way for you to assign the colors yourself.) Theassigned colors are visually distinctive, and are designed to help you differentiate between CSS layout blocks.CSS Layout Box ModelDisplays the box model (that is, padding and margins) of the selected CSS layout block.View CSS layout blocksYou can enable or disable CSS layout block visual aids as necessary.
145
To the topView 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 elementsYou can use a Design-time style sheet to display the backgrounds, borders, or box model for elements that aren’t normally considered CSS layoutblocks. To do so, you must first create a Design-time style sheet that assigns the 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 inthe Basic page column, and clicking Create.In the new style sheet, create rules that assign the attribute to the page elements you want to display as CSSlayout blocks.For example, if you wanted to display a background color for paragraphs and list items, you could create a style sheet with thefollowing rules:p{ display:block; li{ display:block; Save the file.In Design view, open the page to which you want to attach the new styles.Select Format� CSS Styles� Design-time.In the Design-time Style Sheets dialog box, click the plus (+) button above the Show Only at Design Time text box, select thestyle sheet you just created, and click OK.Click OK to close the Design-time Style Sheets dialog box.The style sheet is attached to your document. If you had created a style sheet using the previous example, all paragraphs andlist items would be formatted with the attribute, thereby allowing you to enable or disable CSS layout block visualaids for paragraphs and list items.Working with AP elementsAbout AP elements in DreamweaverAn AP element (absolutely positioned element) is an HTML page element—specifically, a tag, or any other tag—that has an absolute positionassigned to it. AP elements can contain text, images, or any other content that you can place in the body of an HTML document.With Dreamweaver, you can use AP elements to lay out your page. You can place AP elements in front of and behind each other, hide some APelements while showing others, and move AP elements across the screen. You can place a background image in one AP element, then place asecond AP element, containing text with a transparent background, in front of that.AP elements will usually be absolutely positioned div tags. (These are the kinds of AP elements Dreamweaver inserts by default.) But remember,you can classify any HTML element (for example, an image) as an AP element by assigning an absolute position to it. All AP elements (not justabsolutely positioned div tags) appear in the AP elements panel.HTML code for AP Div elementsDreamweaver creates AP elements using the tag. When you draw an AP element using the Draw AP Div tool, Dreamweaver inserts a in the document and assigns the div an id value (by default apDiv1 for the first div you draw, apDiv2 for the second div you draw, and so on).Later, you can rename the AP Div to anything you want using the AP elements panel or the Property inspector. Dreamweaver also usesembedded CSS in the head of the document to position the AP Div, and to assign the AP Div its exact dimensions.The following is sample HTML code for an AP Div:&#xhead; http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&#xmeta;&#x-710; /
146
&#xtitl; AP Div&#x/tit;&#xle00; Page
&#xstyl;-43; type="text/css" !-- #apDiv1 { position:absolute; left:62px; top:67px; width:421px; height:188px; z-index:1; &#x/sty;&#xle00; &#x/hea;퀀 ody; iv-;⤀ id="apDiv1" &#x/div; &#x/bod;&#xy000; You can change properties for AP Divs (or any AP element) on your page, including x and y coordinates, zindex (also called the stacking order),and visibility.Insert an AP DivDreamweaver lets you easily create and position AP Divs on your page. You can also create nested AP Divs.When you insert an AP Div, Dreamweaver displays an outline of the AP Div in Design view by default, and highlights the block when you move thepointer over it. You can disable the visual aid that shows AP Div (or any AP element) outlines by disabling both AP Element Outlines and CSSLayout Outlines in the View&#x/bod;&#xy000; Visual Aids menu. You can also enable backgrounds and the box model for AP elements as a visual aid while youAfter you create an AP Div, you can add content to it by simply placing your insertion point in the AP Div, and then adding content just as youwould add content to a page.Draw a single AP Div or multiple AP Divs consecutivelyIn the Layout category of the Insert panel, click the Draw AP Div button
In the Document window’s Design view, do one of the following:
Drag to draw a single AP Div.
drag (Windows) or Command-drag (Macintosh) to draw multiple AP Divs consecutively.You can continue to draw new AP Divs as long as you do not release the Control or Command key.Insert an AP Div at a particular place in the document
Place the insertion point in the Document window, and then select Insert� Layout Objects� AP Div.Note: This procedure places the tag for the AP Div wherever you clicked in the Document window. The visual rendering of the AP Div may thusaffect other page elements (like text) that surround it.Place the insertion point in an AP Div
Click anywhere inside the AP Div’s borders.The AP Div’s borders are highlighted, and the selection handle appears, but the AP Div itself is not selected.Show AP Div borders
Select View� Visual Aids and select either AP Div Outlines or CSS Layout Outlines.Note: Selecting both options simultaneously has the same effect.Hide AP Div borders
Select View� Visual Aids and deselect both AP Div Outlines and CSS Layout Outlines.Work with nested AP DivsA nested AP Div is an AP Div that has code contained within the tags of another AP Div. For example, the following code shows two AP Divs thatare nested, and two AP Divs that are nested: iv-;⤀&#x/div; id="apDiv1" iv-;⤀&#x/div; id="apDiv2"
147
iv-;⤀ id="apDiv3"
iv-;⤀&#x/div; id="apDiv4" The graphical depiction for either set of AP Divs might look as follows:
In the first set of div tags, one div is sitting on top of the other on the page. In the second set, the apDiv4 div is actually inside of the apDiv3 div.(You can change AP Div stacking order in the AP Elements panel.)Nesting is often used to group AP Divs together. A nested AP Div moves with its parent AP Div and can be set to inherit visibility from its parent.You can enable the Nesting option to automatically nest when you draw an AP Div starting inside another AP Div. To draw inside or over anotherAP Div, you must also have the Prevent Overlaps option deselected.Draw a nested AP DivMake sure Prevent Overlaps is deselected in the AP Elements panel (Window� AP Elements).In the Layout category of the Insert panel, click the Draw AP Div button
In the Document window’s Design view, drag to draw an AP Div inside an existing AP Div.If Nesting is disabled in AP Elements preferences, Altdrag (Windows) or Option-drag (Macintosh) to nest an AP Div inside anexisting AP Div.Nested AP Divs may appear differently in different browsers. When you create nested AP Divs, check their appearance invarious browsers frequently during the design process.Insert a nested AP DivMake sure Prevent Overlaps is deselected.Place the insertion point inside an existing AP Div in the Document window’s Design view, then select Insert� LayoutObjects� AP Div.Nest AP Divs automatically when you draw an AP Div inside another AP Div
Select the Nesting option in the AP Elements preferences.View or set AP element preferencesUse the AP Elements category in the Preferences dialog box to specify the default settings for new AP elements you create.Select Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh).Select AP elements from the Category list on the left and specify any of the following preferences, and then click OK.Determines whether AP elements are visible by default. The options are default, inherit, visible, and hidden.Width and HeightSpecify a default width and height (in pixels) for AP elements you create using Insert� LayoutObjects� AP Div.Background ColorSpecifies a default background color. Select a color from the color picker.Background ImageSpecifies a default background image. Click Browse to locate the image file on your computer.Nesting: Nest When Created Within An AP DivSpecifies whether an AP Div that you draw starting from a point within theboundaries of an existing AP Div should be a nested AP Div. Hold down Alt (Windows) or Option (Macintosh) to temporarilychange this setting while you’re drawing an AP Div.View or set properties for a single AP elementWhen you select an AP element, the Property inspector displays AP element properties.Select an AP element.In the Property inspector (Window� Properties), click the expander arrow in the lower-right corner, if it isn’t already expanded,
148
to see all properties.
Set any of the following options:CSS-P ElementSpecifies an ID for the selected AP element. The ID identifies the AP element in the AP Elements panel andin JavaScript code.Use only standard alphanumeric characters; do not use special characters such as spaces, hyphens, slashes, or periods.Every AP element must have its own unique ID.Note: The CSS-P Property inspector presents the same options for relatively-positioned elements.L and T (left and top)Specify the position of the AP element’s upper-left corner relative to the upper-left corner of the page,or of the parent AP element if nested.W and HSpecify the width and height of the AP element.Note: If the content of the AP element exceeds the specified size, the bottom edge of the AP element (as it appears in theDesign view in Dreamweaver) stretches to accommodate the content. (The bottom edge doesn’t stretch when the AP elementappears in a browser, unless the Overflow property is set to Visible.)The default unit for position and size is pixels (px). You can instead specify the following units: pc (picas), pt (points), in(inches), mm (millimeters), cm (centimeters), or % (percentage of the parent AP element’s corresponding value). Theabbreviations must follow the value without a space: for example, 3mm indicates 3 millimeters.Determines the zindex, or stacking order, of the AP element.In a browser, higher-numbered AP elements appear in front of lower-numbered AP elements. Values can be positive ornegative. It’s easier to change the stacking order of AP elements using the AP Elements panel than to enter specific Specifies whether the AP element is initially visible or not. Select from the following options:
Default does not specify a visibility property. When no visibility is specified, most browsers default to Inherit.
Inherit uses the visibility property of the AP element’s parent.
Visible displays the AP element contents, regardless of the parent’s value.
Hidden hides the AP element contents, regardless of the parent’s value.Use a scripting language, such as JavaScript, to control the visibility property and dynamically display AP elementBg ImageSpecifies a background image for the AP element.Click the folder icon to browse to and select an image file.Bg ColorSpecifies a background color for the AP element.Leave this option blank to specify a transparent background.Specifies the CSS class used to style the AP element.Controls how AP elements appear in a browser when the content exceeds the AP element’s specified size.Visible indicates that the extra content appears in the AP element; effectively, the AP element stretches to accommodate it.Hidden specifies that extra content is not displayed in the browser. Scroll specifies that the browser should add scroll bars tothe AP element whether they’re needed or not. Auto causes the browser to display scroll bars for the AP element only whenneeded (that is, when the AP element’s contents exceed its boundaries.)Note: The overflow option has uneven support across browsers.Defines the visible area of an AP element.Specify left, top, right, and bottom coordinates to define a rectangle in the coordinate space of the AP element (counting fromthe upper-left corner of the AP element). The AP element is “clipped” so that only the specified rectangle is visible. Forexample, to make an AP element’s contents invisible except for a 50pixel-wide, 75pixel-high visible rectangle at the upper-left corner of the AP element, set L to 0, T to 0, R to 50, and B to 75.Note: Although CSS specifies different semantics for clip, Dreamweaver interprets clip the way that most browsers do.If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.View or set properties for multiple AP elementsWhen you select two or more AP elements, the Property inspector displays text properties and a subset of the full AP element properties, allowingyou to modify several AP elements at once.
149
Select multiple AP elements
Hold down Shift while selecting AP elements.View and set properties for multiple AP elementsSelect multiple AP elements.In the Property inspector (Window� Properties), click the expander arrow in the lower-right corner, if it isn’t already expanded,to see all properties.
Set any of the following properties for multiple AP elements:L and T (left and top)Specify the position of the AP elements’ upper-left corners relative to the upper-left corner of the page,or of the parent AP element if nested.W and HSpecify the width and height of the AP elements.Note: If the content of any AP element exceeds the specified size, the bottom edge of the AP element (as it appears in theDesign view in Dreamweaver) stretches to accommodate the content. (The bottom edge doesn’t stretch when the AP elementappears in a browser, unless the Overflow property is set to Visible.)The default unit for position and size is pixels (px). You can instead specify the following units: pc (picas), pt (points), in(inches), mm (millimeters), cm (centimeters), or % (percentage of the parent AP element’s corresponding value). Theabbreviations must follow the value without a space: for example, 3mm indicates 3 millimeters.Specifies whether the AP elements are initially visible or not. Select from the following options:
Default does not specify a visibility property. When no visibility is specified, most browsers default to Inherit.
Inherit uses the visibility property of the AP elements’ parent.
Visible displays the AP elements’ contents, regardless of the parent’s value.
Hidden hides the AP element contents, regardless of the parent’s value.Use a scripting language, such as JavaScript, to control the visibility property and dynamically display AP elementSpecifies the HTML tag used to define the AP elements.Bg ImageSpecifies a background image for the AP elements.Click the folder icon to browse to and select an image file.Bg ColorSpecifies a background color for the AP elements. Leave this option blank to specify a transparent background.If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.AP Elements panel overviewYou use the AP Elements panel (Window� AP Elements) to manage the AP elements in your document. Use the AP Elements panel to preventoverlaps, to change the visibility of AP elements, to nest or stack AP elements, and to select one or more AP elements.Note: An AP element in Dreamweaver is an HTML page element—specifically, a tag, or any other tag—that has an absolute positionassigned to it. The AP Elements panel does not display relatively-positioned elements.AP elements are displayed as a list of names, in order of index; by default, the first created AP element (with a index of 1) appears at thebottom of the list, and the most recently created AP element appears at the top. You can, however, change the index of an AP element bychanging its place in the stacking order. For example, if you created eight AP elements and wanted to move the fourth AP element to the top, youcould assign it a higher index than the others.Select AP elementsYou can select one or more AP elements to manipulate them or change their properties.Select an AP element in the AP elements panel
In the AP elements panel (Window� AP elements), click the name of the AP element.Select an AP element in the Document window
Do one of the following:
Click an AP element’s selection handle.If the selection handle isn’t visible, click anywhere inside the AP element to make the handle visible.
150
Click an AP element’s border.
Shift-click (Windows) or Command-Shift-click (Macintosh) inside an AP element.
Click inside an AP element and press Control+A (Windows) or Command+A (Macintosh) to select the contents of the APelement. Press Control+A or Command+A again to select the AP element.
Click inside an AP element and select its tag in the tag selector.Select multiple AP elements
Do one of the following:
In the AP Elements panel (Window� AP Elements), Shift-click two or more AP element names.
In the Document window, Shift-click inside or on the border of two or more AP elements.Change the stacking order of AP elementsUse the Property inspector or the AP Elements panel to change the stacking order of AP elements. The AP element at the top of the AP Elementspanel list is at the top of the stacking order, and appears in front of the other AP elements.In HTML code, the stacking order, or index, of the AP elements determines the order in which they are drawn in a browser. The higher theindex of an AP element, the higher that AP element is in the stacking order. (For example, an element with a z-index of 4 will appear on top of anelement with a z-index of 3; 1 is always the lowest number in the stacking order.) You can change the index for each AP element using the APElements panel or Property inspector.Change the stacking order of AP elements using the AP Elements panelSelect Window� AP Elements to open the AP Elements panel.Double-click the z-index number next to the AP element whose z-index you want to change.Change the number and press Return/Enter.
Type a higher number to move the AP element up in the stacking order.
Type a lower number to move the AP element down in the stacking order.Change the stacking order of AP elements using the Property inspectorSelect Window� AP Elements to open the AP Elements panel to see the current stacking order.In the AP Elements panel or in the Document window, select the AP element whose z-index you want to change.In the Property inspector (Window� Properties), type a number in the ZIndex text box.
Type a higher number to move the AP element up in the stacking order.
Type a lower number to move the AP element down in the stacking order.Show and hide AP elementsWhile working on your document, you can show and hide AP elements manually, using the AP Elements panel, to see how the page will appearunder different conditions.Note: The currently selected AP element always becomes visible and appears in front of other AP elements while it’s selected.Change AP element visibilitySelect Window� AP Elements to open the AP Elements panel.Click in the eye icon column for an AP element to change its visibility.
An open eye means the AP element is visible.
A closed eye means the AP element is invisible.
If there is no eye icon, usually the AP element inherits visibility from its parent. (When AP elements are not nested, theparent is the document body, which is always visible.)Also, no eye icon appears when no visibility is specified (which appears in the Property inspector as Default visibility).Change the visibility of all AP elements at once
In the AP Elements panel (Window� AP Elements), click the header eye icon at the top of the column.Note: This procedure can set all AP elements to visible or hidden, but not to inherit.Resize AP elementsYou can resize an individual AP element, or simultaneously resize multiple AP elements to make them the same width and height.If the Prevent Overlaps option is on, you will not be able to resize an AP element so that it overlaps with another AP element.
151
Resize an AP elementIn Design view, select an AP element.Do one of the following to resize the AP element:
To resize by dragging, drag any of the AP element’s resize handles.
To resize one pixel at a time, hold down Control (Windows) or Option (Macintosh) while pressing an arrow key.The arrow keys move the right and bottom borders of the AP element; you can’t resize using the top and left borders withthis technique.
To resize by the grid snapping increment, hold down Shift-Control (Windows) or Shift-Option (Macintosh) while pressingan arrow key.
In the Property inspector (Window� Properties), type values for width (W) and height (H).Resizing an AP element changes the width and height of the AP element. It does not define how much of the APelement’s content is visible. You can define the visible region within an AP element in preferences.Resize multiple AP elements at onceIn the Design view, select two or more AP elements.Do one of the following:
Select Modify� Arrange� Make Same Width Or Modify� Arrange� Make Same Height.The first selected AP elements conform to the width or height of the last selected AP element.
In the Property inspector (Window� Properties), under Multiple CSS-P Element, enter width and height values.The values are applied to all selected AP elements.Move AP elementsYou can move AP elements in the Design view in much the same way that you move objects in most basic graphics applications.If the Prevent Overlaps option is on, you will not be able to move a AP element so that it overlaps another AP element.In the Design view, select an AP element or multiple AP elements.Do one of the following:
To move by dragging, drag the selection handle of the last selected AP element (highlighted in black).
To move one pixel at a time, use the arrow keys.Hold down the Shift key while pressing an arrow key to move the AP element by the current grid-snapping increment.Align AP elementsUse the AP element alignment commands to align one or more AP elements with a border of the last AP element selected.When you align AP elements, child AP elements that aren’t selected may move because their parent AP element is selected and moved. Toprevent this, don’t use nested AP elements.In the Design view, select the AP element.Select Modify� Arrange, and then select an alignment option.For example, if you select Top, all of the AP elements move so that their top borders are in the same vertical position as thetop border of the last selected AP element (highlighted in black).Converting AP elements to tablesInstead of using tables to create your layout, some web designers prefer to work with AP elements. Dreamweaver enables you to create yourlayout using AP elements, then (if you want) convert them into tables. For example, you might need to convert your AP elements to tables if youneed to support browsers before version 4.0. Converting AP elements to tables, however, is highly discouraged because it can result in tables witha large number of empty cells, not to mention bloated code. If you need a page layout that uses tables, it is best to create that page layout usingthe standard table layout tools available in Dreamweaver.You can convert back and forth between AP elements and tables to adjust the layout and optimize page design. (When you convert a table backto AP elements, however, Dreamweaver converts the table back to AP Divs, regardless of the type of AP element you might have had on the pagebefore the conversion to tables.) You cannot convert a specific table or AP element on a page; you must convert AP elements to tables and tablesto AP Divs for an entire page.Note: You can’t convert AP elements to tables or tables to AP Divs in a template document or in a document to which a template has beenapplied. Instead, create your layout in a non-template document and convert it before saving it as a template.
152

Convert between AP elements and tables
You can create your layout using AP elements, then convert the AP elements to tables so that your layout can be viewed in older browsers.Before you convert to tables, make sure AP elements do not overlap. Also, make sure you’re in Standard Mode (View� Table Mode� StandardConvert AP elements to a tableSelect Modify� Convert� AP Divs To Table.Specify any of the following options and click OK:Most AccurateCreates a cell for every AP element, plus any additional cells that are necessary to preserve the spacebetween AP elements.Smallest: Collapse Empty CellsSpecifies that the AP elements’ edges should be aligned if they are positioned within thespecified number of pixels.If you select this option, the resulting table will have fewer empty rows and columns, but may not match your layout precisely.Use Transparent GIFsFills the table’s last row with transparent GIFs. This ensures that the table is displayed with the samecolumn widths in all browsers.When this option is enabled, you cannot edit the resulting table by dragging its columns. When this option is disabled, theresulting table will not contain transparent GIFs, but the widths of the columns may vary from browser to browser.Center On PageCenters the resulting table on the page. If this option is disabled, the table starts at the left edge of theConvert tables to AP DivsSelect Modify� Convert� Tables to AP Divs.Specify any of the following options and click OK:Prevent AP Element OverlapsConstrains the positions of AP elements when they are created, moved, and resized so thatthey don’t overlap.Show AP Elements PanelDisplays the AP elements panel.Show Grid and Snap To GridLet you use a grid to help position AP elements.The tables are converted to AP Divs. Empty cells are not converted to AP elements unless they have background colors.Note: Page elements that were outside of tables are also placed in AP Divs.Prevent AP element overlapsBecause table cells cannot overlap, Dreamweaver cannot create a table from overlapping AP elements. If you plan to convert the AP elements in adocument to tables, use the Prevent Overlap option to constrain AP element movement and positioning so that AP elements don’t overlap.When this option is on, an AP element can’t be created in front of, moved or resized over, or nested within an existing AP element. If you activatethis option after creating overlapping AP elements, drag each overlapping AP element to move it away from other AP elements. Dreamweaverdoes not automatically fix existing overlapping AP elements in the page when you enable Prevent AP element Overlaps.When this option and snapping are enabled, an AP element won’t snap to the grid if it would cause two AP elements to overlap. Instead, it willsnap to the edge of the closest AP element.Note: Certain actions allow you to overlap AP elements even when the Prevent Overlaps option is enabled. If you insert an AP element using theInsert menu, enter numbers in the Property inspector, or reposition AP elements by editing the HTML source code, you can cause AP elements tooverlap or nest while this option is enabled. If overlaps happen, drag overlapping AP elements in the Design view to separate them.
In the AP Elements panel (Window� AP Elements), select the Prevent Overlaps option.
In the Document window, select Modify� Arrange� Prevent AP Element Overlaps.More Help topicsCreate a page with a CSS layout
Legal Notices | Online Privacy Policy
153
Layout and designTo learn more, view these recommended resources online.Creating a page layout with Dreamweaver CS6Adobe Creative Team (Jul. 19, 2012)In this tutorial, you will learn the basics of webpage design, how to create design thumbnails and wireframes, insert andformat new components into a predefined CSS layout, and check for browser compatibility.
154
Laying out pages with CSS
To the topTo the topAbout CSS page layoutAbout CSS page layout structureCreate a page with a CSS layoutAbout CSS page layoutA CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a webpage. The basic building block of the CSS layout is the div tag—an HTML tag that in most cases acts as a container for text, images, and otherpage elements. When you create a CSS layout, you place div tags on the page, add content to them, and position them in various places. Unliketable cells, which are restricted to existing somewhere within the rows and columns of a table, div tags can appear anywhere on a web page. Youcan position div tags absolutely (by specifying x and y coordinates), or relatively (by specifying its location with respect to its current location). Youcan also position div tags by specifying floats, paddings, and margins—the preferred method by today’s web standards.Creating CSS layouts from scratch can be difficult because there are so many ways to do it. You can create a simple two-column CSS layout bysetting floats, margins, paddings, and other CSS properties in a nearly infinite number of combinations. Additionally, the problem of cross-browserrendering causes certain CSS layouts to display properly in some browsers, and display improperly in others. Dreamweaver makes it easy for youto build pages with CSS layouts by providing 16 pre-designed layouts that work across different browsers.Using the pre-designed CSS layouts that come with Dreamweaver is the easiest way to create a page with a CSS layout, but you can also createCSS layouts using Dreamweaver absolutely-positioned elements (AP elements). An AP element in Dreamweaver is an HTML page element—specifically, a tag, or any other tag—that has an absolute position assigned to it. The limitation of Dreamweaver AP elements, however, is thatsince they are absolutely positioned, their positions never adjust on the page according to the size of the browser window.If you are an advanced user, you can also insert tags manually and apply CSS positioning styles to them to create page layouts.About CSS page layout structureBefore proceeding with this section, you should be familiar with basic CSS concepts.The basic building block of the CSS layout is the div tag—an HTML tag that in most cases acts as a container for text, images, and other pageelements. The following example shows an HTML page that contains three separate div tags: one large “container” tag, and two other tags—asidebar tag, and a main content tag—within the container tag.
Container div Sidebar div Main Content div Following is the code for all three div tags in the HTML:--container div tag--&#x!-14; iv-;⤀ id="container" --sidebar div tag--&#x!-14; iv-;⤀ id="sidebar" &#xh300; &#x/h30; Content &#xp000; ipsum dolor sit amet, consectetuer adipiscing&#x/p00; elit. &#xp000; urna purus, fermentum id, molestie in, commodo porttitor,&#x/p00; felis. &#x/div; --mainContent div tag--&#x!-14; iv-;⤀ id="mainContent"
&#xh100; Main Content&#x/h10;
155
&#xp000; ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
&#x/p00;rutrum. &#xp000; tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,&#x/p00; odio. &#xh200; level heading&#x/h20; &#xp000; ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac&#x/p00; quam. &#x/div; In the above example, there is no “styling” attached to any of the div tags. Without CSS rules defined, each div tag and its contents fall into adefault location on the page. However, if each div tag has a unique id (as in the above example), you can use the ids to create CSS rules that,when applied, change the style and positioning of the div tags.The following CSS rule, which can reside in the head of the document or in an external CSS file, creates styling rules for the first, or “container” divtag on the page:#container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; The #container rule styles the container div tag to have a width of 780 pixels, a white background, no margin (from the left side of the page), asolid, black, 1pixel border, and text that is aligned left. The results of applying the rule to the container div tag are as follows:
Container div tag, 780 pixels, no margin Text aligned left White background 1-pixel solid black border The next CSS rule creates styling rules for the sidebar div tag:#sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; The #sidebar rule styles the sidebar div tag to have a width of 200 pixels, a gray background, a top and bottom padding of 15 pixels, a rightpadding of 10 pixels, and a left padding of 20 pixels. (The default order for padding is top-right-bottom-left.) Additionally, the rule positions thesidebar div tag with float: left—a property that pushes the sidebar div tag to the left side of the container div tag. The results of applying the rule tothe sidebar div tag are as follows:
Sidebar div, float left
A.
Width 200 pixels
B.
Top and bottom padding, 15 pixels
156
Lastly, the CSS rule for the main container div tag finishes the layout:#mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; The #mainContent rule styles the main content div with a left margin of 250 pixels, which means that it places 250 pixels of space between the leftside of the container div, and the left side of the main content div. Additionally, the rule provides for 20 pixels of spacing on the right, bottom, andleft sides of the main content div. The results of applying the rule to the mainContent div are as follows:The complete code looks as follows:
Main Content div, left margin of 250 pixels 20 pixels left padding 20 pixels right padding 20 pixels bottom padding &#xhead; http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&#xmeta;&#x-710; / &#xtitl;&#x/tit;&#xle00; Document &#xstyl;-43; type="text/css" #container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; #sidebar { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px 15px 20px; #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; &#x/sty;&#xle00; &#x/hea;퀀 ody; --container div tag--&#x!-14; iv-;⤀ id="container" --sidebar div tag--&#x!-14; iv-;⤀ id="sidebar" &#xh300; &#x/h30; Content &#xp000; ipsum dolor sit amet, consectetuer adipiscing&#x/p00; elit. &#xp000; urna purus, fermentum id, molestie in, commodo porttitor,&#x/p00; felis. &#x/div; --mainContent div tag--&#x!-14; iv-;⤀ id="mainContent" &#xh100; Main Content&#x/h10; &#xp000; ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus &#x/p00;rutrum. &#xp000; tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus
venenatis, tristique in, vulputate at,&#x/p00; odio.
157
To the topAdd To HeadCreate New FileLink To Existing File
&#xh200; level heading&#x/h20;
&#xp000; ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac&#x/p00; quam. &#x/div; &#x/div; The above example code is a simplified version of the code that creates the two-column fixed left sidebar layout when you create a newdocument using the predesigned layouts that come with Dreamweaver.Create a page with a CSS layoutWhen creating a new page in Dreamweaver, you can create one that already contains a CSS layout. Dreamweaver comes with 16 different CSSlayouts that you can choose from. Additionally, you can create your own CSS layouts and add them to the configuration folder so that they appearas layout choices in the New Document dialog box.Dreamweaver CSS layouts render correctly in the following browsers: Firefox (Windows and Macintosh) 1.0, 1.5, 2.0, and 3.6; Internet Explorer(Windows) 5.5, 6.0, 7.0, and 8.0; Opera (Windows and Macintosh) 8.0, 9.0, and 10.0; Safari 2.0, 3.0, and 4.0; and Chrome 3.0.For an informational article that explains how to use the CSS layouts that come with Dreamweaver, see the Dreamweaver Developer CenterThere are also more CSS layouts available on the Adobe Dreamweaver ExchangeCreate a page with a CSS layoutSelect File&#x/div; New.In the New Document dialog box, select the Blank Page category. (It’s the default selection.)For Page Type, select the kind of page you want to create.You must select an HTML page type for the layout. For example, you can select HTML, ColdFusion®, PHP, and so on.You cannot create an ActionScript™, CSS, Library Item, JavaScript, XML, XSLT, or ColdFusion Component page with a CSSlayout. Page types in the Other category of the New Document dialog box are also restricted from including CSS pageFor Layout, select the CSS layout you want to use. You can choose from 16 different layouts. The Preview window shows thelayout and gives a brief description of the selected layout.The predesigned CSS layouts provide the following types of columns:Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor’stext settings.Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitormakes the browser wider or narrower, but does not change based on the site visitor’s text settings.Select a document type from the DocType popup menu.Select a location for the layout’s CSS from the Layout CSS in popup menu.Adds CSS for the layout to the head of the page you’re creating.Adds CSS for the layout to a new external CSS stylesheet and attaches the new stylesheet to the pageyou’re creating.Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. Thisoption is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a single file)across multiple documents.Do one of the following:
If you selected Add to Head from the Layout CSS in popup menu (the default option), click Create.
If you selected Create New File from the Layout CSS popup menu, click Create, and then specify a name for the newexternal file in the Save Style Sheet File As dialog box.
If you selected Link to Existing File from the Layout CSS in popup menu, add the external file to the Attach CSS file textbox by clicking the Add Style Sheet icon, completing the Attach External Style Sheet dialog box, and clicking OK. Whenyou’re finished, click Create in the New Document dialog box.When you select the Link to Existing File option, the file you specify must already have the rules for the CSS filecontained within it.When you put the layout CSS in a new file or link to an existing file, Dreamweaver automatically links the file to the HTML
158
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
Note:
page you’re creating.
Internet Explorer conditional comments (CCs), which help work around IE rendering issues, remain embedded in thehead of the new CSS layout document, even if you select New External File or Existing External File as the location for yourlayout CSS.(Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page.To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet.For a detailed walk-through of this process, see David Powers’s article, Automatically attaching a style sheet to newAdd custom CSS layouts to the list of choicesCreate an HTML page that contains the CSS layout you’d like to add to the list of choices in the New Document dialog box.The CSS for the layout must reside in the head of the HTML page.To make your custom CSS layout consistent with the other layouts that come with Dreamweaver, you should save yourHTML file with the .htm extension.Add the HTML page to the Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts folder.(Optional) Add a preview image of your layout (for example a .gif or .png file) to the Adobe DreamweaverCS5\Configuration\BuiltIn\Layouts folder. The default images that come with Dreamweaver are 227 pixels wide x 193 pixelshigh PNG files.Give your preview image the same file name as your HTML file so that you can easily keep track of it. For example, if yourHTML file is called myCustomLayout.htm, call your preview image myCustomLayout.png.(Optional) Create a notes file for your custom layout by opening the Adobe DreamweaverCS5\Configuration\BuiltIn\Layouts\_notes folder, copying and pasting any of the existing notes files in the same folder, andrenaming the copy for your custom layout. For example, you could copy the oneColElsCtr.htm.mno file, and rename it(Optional) After you’ve created a notes file for your custom layout, you can open the file and specify the layout name,description, and preview image.
Link to an external CSS style sheet
159
About the Spry framework

The Spry framework is a JavaScript library that provides web designers with the ability to build web pages that offer richer experiences to their sitevisitors. With Spry, you can use HTML, CSS, and a minimal amount of JavaScript to incorporate XML data into your HTML documents, createwidgets such as accordions and menu bars, and add different kinds of effects to various page elements. The Spry framework is designed so thatmarkup is simple and easy to use for those who have basic knowledge of HTML, CSS, and JavaScript.The Spry framework is meant primarily for users who are web design professionals or advanced nonprofessional web designers. It is not intendedas a full web application framework for enterprise-level web development (though it can be used in conjunction with other enterprise-level pages).For more information on the Spry framework, see More Help topicsSpry Developer Guide
Legal Notices | Online Privacy Policy
160
Adding Spry effects
To the topTo the topTo the topSpry effects overviewApply an Appear/Fade effectApply a Blind effectApply a Grow/Shrink effectApply a Highlight effectApply a Shake effectApply a Slide effectApply a Squish effectAdd an additional effectDelete an effectSpry effects overviewSpry effects are visual enhancements that you can apply to almost any element on an HTML page using JavaScript. Effects are often used tohighlight information, create animated transitions, or alter a page element visually for a duration of time. You can apply effects to HTML elementswithout needing additional custom tags.Note: To apply an effect to an element, it must be currently selected or it must have an ID. If, for example, you are applying highlighting to a tag that is not currently selected, the div must have a valid ID value. If the element doesn’t already, you will need to add one to the HTML code.Effects can alter an element’s opacity, scale, position, and styling properties such as background color. You can create interesting visual effects bycombining two or more properties.Because these effects are Spry-based, when a user clicks on an element with an effect, only that element is dynamically updated, withoutrefreshing the entire HTML page.Spry includes these effects: Makes an element appear or fade away.Changes the background color of an element. Simulates a window blind that goes up or down to hide or reveal the element.Moves the element up or down.Increases or reduces the size of the element.Simulates shaking the element from left to right.Makes the element disappear into the upper-left corner of the page.Important: When you use an effect, various lines of code are added to your file in the Code view. One line identifies the SpryEffects.js file, whichis necessary to include the effects. Do not remove this line from your code or the effects will not work.For a comprehensive overview of the Spry effects available in the Spry framework, visit Apply an Appear/Fade effectNote: You can use this effect with any HTML elements except , or th.(Optional) Select the content or layout element you want to apply the effect to.In the Behaviors panel (Window� Behaviors), click the Plus (+) button and select Effects� Appear/Fade from the menu.Select the element’s ID from the target element menu. If you already selected an element, choose urr;nt-;ᄀ Selection.In the Effect Duration box, define the time it takes for the effect to occur, in milliseconds.Select the effect you want to apply: Fade or Appear.In the Fade From box, define the percentage of opacity you want the effect to have when it appears.In the Fade To box, define the percentage of opacity you want to fade to.Select Toggle Effect if you want the effect to be reversible, going from fade to appear and back again with successive clicks.Apply a Blind effectNote: You can only use this effect with these HTML elements: dir,, or pre.(Optional) Select the content or layout element you want to apply the effect to.
161
To the topTo the topTo the topTo the top
In the Behaviors panel (Window� Behaviors), click the Plus (+) button and select Effects� Blind from the menu.
Select the element’s ID from the target element menu. If you already selected an element, choose urr;nt-;ᄀ Selection.In the Effect Duration box, define the time it takes for the effect to occur, in milliseconds.Select the effect you want to apply: Blind Up or Blind Down.In the Blind Up From/Blind Down From box, define the blind-scrolling starting point as a percentage or as a pixel number.These values are calculated from the top of the element.In the Blind Up To/Blind Down To field, define the blind-scrolling end point as a percentage or as a pixel number. Thesevalues are calculated from the top of the element.Select Toggle Effect if you want the effect to be reversible, scrolling up and down with successive clicks.Apply a Grow/Shrink effectNote: You can use this effect with these HTML elements: , or pre.(Optional) Select the content or layout element you want to apply the effect to.In the Behaviors panel (Window urr;nt-;ᄀ Behaviors), click the Plus (+) button and select Effects urr;nt-;ᄀ Grow/Shrink from the popupSelect the element’s ID from the target element pop-up menu. If you have already selected an element, choose In the Effect Duration field, define the time it takes for the effect to occur, in milliseconds.Select the effect you want to apply: Grow or Shrink.In the Grow/Shrink From box, define the element’s size when the effect starts. This is a percentage of the size or a pixelIn the Grow/Shrink To box, define the element’s size when the effect ends. This is a percentage of the size or a pixel value.If you choose pixels for either the Grow/Shrink From or To boxes, the wide/high field becomes visible. Depending on theoption you choose, the element will grow or shrink proportionately.Select whether you want the element to grow or shrink to the upper-left corner of the page or into the page’s center.Select Toggle Effect if you want the effect to be reversible, growing and shrinking with successive clicks.Apply a Highlight effectNote: You can use this effect with any HTML elements except , or noframes.(Optional) Select the content or layout element you want to apply the effect to.In the Behaviors panel (Window urr;nt0; Behaviors), click the Plus (+) button and select Effects urr;nt0; Highlight from the menu.Select the element’s ID from the target element menu. If you already selected an element, choose urr;nt-;ᄀ Selection.In the Effect Duration box, define how long you want the effect to last, in milliseconds.Select the color you want the highlight to start with.Select the color you want the highlight to end with. This color lasts only as long as the duration you define in Effect Duration.Select the color for the element after the highlight has finished.Select Toggle Effect if you want the effect to be reversible, cycling through the highlight colors with successive clicks.Apply a Shake effectNote: You can use this effect with these HTML elements: img,, or table.(Optional) Select the content or layout element you want to apply the effect to.In the Behaviors panel (Window urr;nt-;ᄀ Behaviors), click the Plus (+) button and select Effects urr;nt-;ᄀ Shake from the menu.Select the element’s ID from the target element menu. If you have already selected an element, choose urr;nt-;ᄀ Selection.Apply a Slide effectFor the Slide effect to work properly the target element must be wrapped in a container tag that has a unique ID. The container tag with which youwrap the target element must be a , or The target element tag must be one of the following: dd,div, or image.(Optional) Select the container tag of the content you want to apply the effect to.In the Behaviors panel (Window urr;nt-;ᄀ Behaviors), click the Plus (+) button and select Effects urr;nt-;ᄀ Slide from the menu.Select the container tag’s ID from the target element menu. If the container is already selected, choose urr;nt-;ᄀ Selection.
162

To the topTo the topTo the top
In the Effect Duration field, define the time it takes for the effect to occur, in milliseconds.
Select the effect you want to apply: Slide Up or Slide Down.In the Slide Up From box, define the sliding starting point as a percentage or as a pixel number.In the Slide Up To box, define the sliding end point as a percentage or as a positive pixel number.Select Toggle Effect if you want the effect to be reversible, sliding up and down with successive clicks.Apply a Squish effectNote: You can only use this effect with these HTML elements: , or pre.(Optional) Select the content or layout element you want to apply the effect to.In the Behaviors panel (Window� Behaviors), click the Plus (+) button and select Effects� Squish from the menu.Select the element’s ID from the target element menu. If you have already selected an element, choose urr;nt-;ᄀ Selection.Add an additional effectYou can associate multiple effect behaviors with the same element to produce interesting results.(Optional) Select the content or layout element you want to apply the effect to.In the Behaviors panel (Window urr;nt-;ᄀ Behaviors), click the Plus (+) button and select an effect from the Effects menu.Select the element’s ID from the target element menu. If you have already selected an element, choose urr;nt-;ᄀ Selection.Delete an effectYou can remove one or more effect behaviors from an element.(Optional) Select the content or layout element you want to apply the effect to.In the Behaviors panel (Window urr;nt-;ᄀ Behaviors), click the effect you want to delete from the list of behaviors.Do one of the following:
Click the Remove Event button in the subpanel title bar (-).
Right-click (Windows) or Control-click (Macintosh) the behavior, and select Delete Behavior.
Legal Notices | Online Privacy Policy
163
Change page orientation for mobile devices (CS5.5 and later)

In most advanced mobile devices, the orientation of a page changes based on how the device is held. When the user holds the phone vertically,the portrait view is displayed. When the user flips the device horizontally, the page readjusts itself to fit the landscape dimensions.In Dreamweaver, the option to view a page in either Portrait or Landscape orientation is available in both Live View and Design View. Using theseoptions you can test how your page adapts to these settings. You can then, if necessary, modify your CSS file such that the page is displayed asintended in both these orientations.
Select View� Window Size� Orientation Landscape, or Orientation Portrait.
Legal Notices | Online Privacy Policy
164
Colors
To the topTo the topWeb-safe colorsUse the color pickerWeb-safe colorsIn HTML, colors are expressed either as hexadecimal values (for example, ) or as color names (). A web-safe color is one thatappears the same in Safari and Microsoft Internet Explorer on both Windows and Macintosh systems when running in 256color mode. Theconventional wisdom is that there are 216 common colors, and that any hexadecimal value that combines the pairs 00, 33, 66, 99, CC, or FF(RGB values 0, 51, 102, 153, 204, and 255, respectively) represents a web-safe color.Testing, however, reveals that there are only 212 web-safe colors rather than a full 216, because Internet Explorer on Windows does not correctlyrender the colors #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51), and #33FF00 (51,255,0).When web browsers first made their appearance, most computers displayed only 265 colors (8 bits per channel (bpc). Today, the majority ofcomputers display thousands or millions of colors (16 and 32bpc), so the justification for using the browser-safe palette is greatly diminished ifyou are developing your site for users with current computer systems.One reason to use the web-safe color palette is if you are developing for alternative web devices such as PDA and cell phone displays. Many ofthis devices offer only black and white (1bpc) or 256 color (8bpc) displays.The Color Cubes (default) and the Continuous Tone palettes in Dreamweaver use the 216color web-safe palette; selecting a color from thesepalettes displays the color’s hexadecimal value.To select a color outside the web-safe range, open the system color picker by clicking the Color Wheel button in the upper-right corner of theDreamweaver color picker. The system color picker is not limited to web-safe colors.UNIX versions of browsers use a different color palette than the Windows and Macintosh versions. If you are developing exclusively for UNIXbrowsers (or your target audience is Windows or Macintosh users with 24bpc monitors and UNIX users with 8bpc monitors), consider usinghexadecimal values that combine the pairs 00, 40, 80, BF, or FF, which produce web-safe colors for SunOS.Use the color pickerIn Dreamweaver, many of the dialog boxes, as well as the Property inspector for many page elements, contain a color box, which opens a colorpicker. Use the color picker to select a color for a page element. You can also set the default text color for your page elements.Click a color box in any dialog box or in the Property inspector.The color picker appears.Do one of the following:
Use the eyedropper to select a color swatch from the palette. All colors in the Color Cubes (default) and Continuous Tonepalettes are web-safe; other palettes are not.
Use the eyedropper to pick up a color from anywhere on your screen—even outside the Dreamweaver windows. To pickup a color from the desktop or another application, press and hold the mouse button; this allows the eyedropper to retainfocus, and select a color outside of Dreamweaver. If you click the desktop or another application, Dreamweaver picks upthe color where you clicked. However, if you switch to another application, you may need to click a Dreamweaver windowto continue working in Dreamweaver.
To expand your color selection, use the popup menu at the upper-right corner of the color picker. You can select ColorCubes, Continuous Tone, Windows OS, Mac OS, and Grayscale.Note: The Color Cubes and Continuous Tone palettes are web-safe, whereas Windows OS, Mac OS and Grayscale are
To clear the current color without choosing a different color, click the Default Color button
.
To open the system color picker, click the Color Wheel button
.
Legal Notices | Online Privacy Policy
165
Creating media queries (CS5.5 and later)
To the topCreate a media queryUse an existing media queries fileChoose a different site-wide media queries fileViewing web pages based on media queryYou can use media queries to specify CSS files based on the reported characteristics of a device. The browser on a device checks the mediaquery and uses the corresponding CSS file to display the web page.For example, the following media query specifies the file for devices that are 300-320 pixels wide. href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width:&#xlink;&#x-710; 320px)"For an extensive introduction to media queries see Don Booth’s article on the Adobe Developer CenterFor more information on media queries from the W3C see www.w3.org/TR/css3-mediaqueries/Create a media queryIn Dreamweaver, you can create a site-wide media query file, or a document-specific media query.Site-wide media query fileSpecifies display settings for all pages in your site that include the file.The site-wide media query file acts as the central repository for all media queries in your site. After you create this file, link to it from pages in yoursite that must use the media queries in the file for their display.Document-specific media queryThe media query is inserted directly into the document, and the page is displayed based on the inserted mediaCreate a web page.Select Modify&#xlink;&#x-710; Media Queries.Do one of the following:
To create a site-wide media query file, select Site Wide Media Queries File.
To create a document-specific media query, select This Document.For site-wide media query, do the following:Click Specify.Select Create New File.Specify a name for the file, and click OK.It is possible that some devices do not report their actual width. To force devices to report their actual width, ensure that theoption Force Devices To Report Actual Width is enabled.The following code is inserted into your file when you choose this option. name="viewport" content="width=device-&#xmeta;&#x-710;width"Do one of the following:
Click "+" to define the properties for the media query file.
Click Default Presets if you want to begin with standard presets.Select rows in the table, and edit their properties using the options under Properties.The description of the device for which the CSS file must be used. For example, phone, TV, tablet, and so on.Min Width and Max widthThe CSS file is used for devices whose reported width is within the specified values.Note: Leave either Min Width or Max Width blank if you do not want to specify an explicit range for a device. For example, itis common to leave Min Width blank if you want to target phones, which are 320px wide, or less.CSS fileSelect Use Existing File, and browse to the CSS file for the device.
166

To the topTo the topTo the topIf you want to specify a CSS file that you are yet to create, select Create New File. Enter the name of the CSS file. The file iscreated when you press OK.Click OK.For site-wide media query, a new file is created. Save it.Site-wide media query: For existing pages, ensure that you include the media query file in all the pages in the&#xhead; tag.Example of a media query link where mediaquery_adobedotcom.css is the site-wide media query file for the site www.adobe.com: href="mediaquery_adobedotcom.css" rel="stylesheet"&#xlink;&#x-710; type="text/css"Use an existing media queries fileCreate a web page, or open an existing page.Select Modify&#xlink;&#x-710; Media Queries.Select Site-Wide Media Queries File.Click Specify.Select Use Existing File if you have already created a CSS file with the Media Query.Click the browse icon to navigate to, and specify the file. Click OK.Select Site-Wide Media Queries File.To force devices to report their actual width, ensure that the option Force Devices To Report Actual Width is enabled. Thefollowing code is inserted into your file when you choose this option. name="viewport" content="width=device-&#xmeta;&#x-710;width"Click OK.Choose a different site-wide media queries fileUse this procedure to change the site-wide media queries file that you have set in the Media Queries dialog box.Select Site&#xmeta;&#x-710; Manage Sites.In the Manage Sites dialog, select your site.Click Edit. The Site Setup dialog box is displayed.Under Advanced Settings in the left panel, select Local Info.In Site-Wide Media Query File on the right panel, click Browse to select the media query CSS file.Note: Changing the site-wide media queries file does not affect documents linked to a different or previous site-wide mediaquery file.Click Save.Viewing web pages based on media queryDimensions specified in a media query appear in the options for Multiscreen button/window size. When you select a dimension from the menu, thefollowing changes are seen:
The view size changes to reflect the specified dimensions. The document frame size is unaltered.
The CSS file specified in the media query is used to display the page.
Legal Notices | Online Privacy Policy
167
Designing dynamic pages
To the topDreamweaver and dynamic page designDreamweaver and dynamic page designFollow these general steps to successfully design and create a dynamic website.Design the page.A key step in designing any website—whether static or dynamic—is the visual design of the page. When adding dynamicelements to a web page, the design of the page becomes crucial to its usability. You should carefully consider how users willinteract with both individual pages and the website as a whole.A common method of incorporating dynamic content into a web page is to create a table to present content, and importdynamic content into one or more of the table’s cells. Using this method you can present information of various types in astructured format.Create a source of dynamic content.Dynamic websites require a content source from which to extract data before they can display it on a web page. Before youcan use content sources in a web page, you must do the following:
Create a connection to the dynamic content source (such as a database) and the application server processing the page.Create the data source by using the Bindings panel; then you can select and insert the data source in the page.
Specify what information in the database you want to display, or what variables to include in the page by creating arecordset. You can also test the query from within the Recordset dialog box, and make any needed adjustments beforeadding it to the Bindings panel.
Select and insert dynamic content elements into the selected page.Add dynamic content to a web page.After you define a recordset or other data source, and add it to the Bindings panel, you can insert the dynamic content therecordset represents into the page. The Dreamweaver menu-driven interface makes adding dynamic content elements aseasy as selecting a dynamic content source from the Bindings panel, and inserting it into an appropriate text, image, or formobject within the current page.When you insert a dynamic content element or other server behavior into a page, Dreamweaver inserts a server-side scriptinto the page’s source code. This script instructs the server to retrieve data from the defined data source and render it withinthe web page. To place dynamic content within a web page, you can do one of the following:
Place it at the insertion point in either Code or Design view.
Replace a text string or other placeholder.Insert it into an HTML attribute. For example, dynamic content can define the src attribute of an image or the valueattribute of a form field.Add server behaviors to a page.In addition to adding dynamic content, you can incorporate complex application logic into web pages by using serverbehaviors. Server behaviors are predefined pieces of server-side code that add application logic to web pages, providinggreater interaction and functionality.The Dreamweaver server behaviors let you add application logic to a website without having to write the code yourself. Theserver behaviors supplied with Dreamweaver support ColdFusion, ASP, and PHP document types. The server behaviors arewritten and tested to be fast, secure, and robust. The builtin server behaviors support cross-platform web pages for allDreamweaver provides a point-and-click interface that makes applying dynamic content and complex behaviors to a page aseasy as inserting textual and design elements. The following server behaviors are available:
Define a recordset from an existing database. The recordset you define is then stored in the Bindings panel.
Display multiple records on a single page. You select either an entire table or individual cells or rows that contain dynamiccontent, and specify the number of records to display on each page view.
Create and insert a dynamic table into a page, and associate the table with a recordset. You can later modify both the
168

table’s appearance and the repeating region by using the Property inspector and Repeating Region Server Behavior,
respectively.
Insert a dynamic text object into a page. The text object you insert is an item from a predefined recordset, to which youcan apply any of the data formats.
Create record navigation and status controls, master/detail pages, and forms for updating information in a database.
Display more than one record from a database record.
Create recordset navigation links that allow users to view the previous or next records from a database record.
Add a record counter to help users keep track of how many records were returned, and where they are in the returnedYou can also extend Dreamweaver server behaviors by writing your own, or installing server behaviors written by third parties.Test and debug the page.Before making a dynamic page—or an entire website—available on the web, you should test its functionality. You should alsoconsider how your application’s functionality might affect people with disabilities.More Help topicsAdding and modifying images
Legal Notices | Online Privacy Policy
169
Displaying data with Spry
To the topTo the topAbout Spry data setsCreate a Spry data setCreate a Spry regionCreate a Spry repeat regionCreate a Spry repeat list regionAbout Spry data setsA Spry data set is fundamentally a JavaScript object that holds a collection of data that you specify. With Dreamweaver you can quickly create thisobject and load data from a data source (such as an XML file or HTML file) into the object. The data set results in an array of data in the form of astandard table containing rows and columns. As you’re creating a Spry data set with Dreamweaver, you can also specify how you want to displaythe data on a web page.You can think of a data set as a virtual holding container whose structure is rows and columns. It exists as a JavaScript object whose informationis only visible when you specify exactly how to display it on the web page. You can display all of the data in this holding container, or you mightchoose to display only selected pieces of it.For complete information on how Spry data sets work, see For a video overview from the Dreamweaver engineering team about working with Spry data sets, see For a video tutorial on working with Spry data sets, see Create a Spry data setCreate a Spry HTML data setIf you are only creating a data set, you do not need to worry about the insertion point. If you are creating a data set and alsoinserting a layout, make sure that the insertion point is where you want to insert the layout on the page.Choose Insert� Spry� Spry Data Set.In the Specify Data Source screen, do the following:
Select HTML from the Select Data Type pop-up menu. (It’s selected by default.)
Specify a name for the new data set. The default name is ds1 the first time you create a data set. The data set name cancontain letters, numbers, and underscores, but cannot start with a number.
Specify the HTML elements in your data source that you want Dreamweaver to detect. For example, if you’ve organizedyour data inside a tag, and you want Dreamweaver to detect tags instead of tables, select Divs from the Detectpop-up menu. The Custom option lets you type any tag name that you want to detect.
Specify the path to the file that contains your HTML data source. The path can be a relative path to a local file in your site(for example, data/html_data.html), or an absolute URL to a live web page (using HTTP or HTTPS). You can click theBrowse button to navigate to a local file and select it.Dreamweaver renders the HTML data source in the Data Selection window, and displays visual markers for the elementsthat are eligible as containers for the data set. The element you want to use must already have a unique ID assigned to it.If it doesn’t, Dreamweaver will display an error message, and you’ll need to go back to the data source file and assign aunique ID. Additionally, eligible elements in the data source file cannot reside in Spry regions, or contain other dataAlternatively you can specify a Design Time Feed as your data source. For more information, see Use a design-time feed.
Select the element for your data container by clicking one of the yellow arrows that appears in the Data Selection window,or by choosing an ID from the Data Containers pop-up menu.
170
Selecting the element for the HTML data set data container.For lengthy files, you can click the Expand/Collapse arrow at the bottom of the Data Selection window to see more of theOnce you select the container element for the data set, Dreamweaver displays a preview of the data set in the DataPreview window.
(Optional) Select Advanced Data Selection if you want to specify CSS data selectors for the data set. For example, if youspecified in the Row Selectors text box, and in the Column Selectors text box, the data set wouldinclude only those rows with the .product class assigned to them, and only those columns with the .boximage classassigned to them.If you want to type more than one selector in a given text box, separate the selectors with a comma.For more information, see About Spry data selectors.
When you’re finished in the Specify Data Source screen, click Done to create the data set right away, or click Next to goon to the Set Data Options screen. If you click Done, the data set becomes available in the Bindings panel (Window� In the Set Data Options screen, do the following:
(Optional) Set data set column types by selecting a column, and choosing a column type from the Type pop-up menu. Forexample, if a column in the data set contains numbers, select the column and choose from the Type pop-upmenu. This option is only important if you want your user to be able to sort the data by that column.You can select a data set column by clicking its header, by choosing it from the Column Name pop-up menu, or bynavigating to it using the left and right arrows in the upper-left corner of the screen.
(Optional) Specify how you want to sort the data by selecting the column you want to sort by from the Sort Columns pop-up menu. Once you’ve selected the column, you can specify whether to sort it in ascending or descending order.
(Optional: tables only) Deselect Use First Row as Header if you want to use generic column names (that is column0,column1, column 2, and so on) instead of the column names specified in your HTML data source.Note: If you’ve selected something other than a table for the container element of your data set, this option and the nextoption are not available. Dreamweaver automatically uses column0, column1, column2, and so on, for the column namesof non-table-based data sets.
(Optional: tables only) Select Use Columns as Rows to reverse the horizontal and vertical orientation of the data in thedata set. If you select this option, columns will be used as rows.
(Optional) Select Filter out Duplicate rows to exclude duplicate rows of data from the data set.
(Optional) Select Disable Data Caching if you always want to have access to the most recent data in the data set. If youwant data to autorefresh, select Autorefresh Data and specify a refresh time in milliseconds.
When you’re finished in the Set Data Options screen, click Done to create the data set right away, or click Next to go on tothe Choose Insert Options screen. If you click Done, the data set becomes available in the Bindings panel (Window� In the Choose Insert Options screen, do one of the following:
Select a layout for the new data set, and specify the appropriate setup options. For more information, see Choose a layoutfor the data set.
171
Select Do Not Insert HTML. If you select this option, Dreamweaver creates the data set, but does not add any HTML tothe page. The data set becomes available from the Bindings panel (Window� Bindings), and you can manually dragpieces of data from the data set to the page.Click Done.Dreamweaver creates the data set and, if you selected a layout option, displays the layout and data placeholders on yourpage. If you look in Code view, you’ll see that Dreamweaver has added references in the header to the SpryData.js file andthe SpryHTMLDataSet.js file. These files are important Spry assets that work in conjunction with the page. Be sure not toremove this code from your page or the data set will not function. When you upload your page to a server, you’ll also need toupload these files as dependent filesCreate a Spry XML data setIf you are only creating a data set, you do not need to worry about the insertion point. If you are creating a data set and alsoinserting a layout, make sure that the insertion point is where you want to insert the layout on the page.Choose Insert� Spry� Spry Data Set.In the Specify Data Source screen, do the following:
Select XML from the Select Data Type pop-up menu.
Specify a name for the new data set. The default name is ds1 the first time you create a data set. The data set name cancontain letters, numbers, and underscores, but cannot start with a number.
Specify the path to the file that contains your XML data source. The path can be a relative path to a local file in your site(for example, datafiles/data.xml), or an absolute URL to a page on the web (using HTTP or HTTPS). You can click theBrowse button to navigate to a local file and select it.Dreamweaver renders the XML data source in the Row Elements window, displaying the XML tree of data elementsavailable for selection. Repeating elements are marked with a plus (+) sign, and child elements are indented.Alternatively you can specify a Design Time Feed as your data source. For more information, see Use a design-time feed.
Select the element that contains the data you want to display. Typically this element is a repeating element, such as&#xmenu;&#x_ite;&#xm000; with several children elements, such as&#xitem; &#xlink; Þsc;&#xript;&#xion0; and so on.
Selecting a repeating element for the XML data set.Once you select the container element for the data set, Dreamweaver displays a preview of the data set in the DataPreview window. The XPath text box displays an expression that shows where the selected node is located in the XMLsource file.Note: XPath (XML Path Language) is a syntax for addressing portions of an XML document. It is used mostly as a querylanguage for XML data, just as the SQL language is used to query databases. For more information on XPath, see theXPath language specification on the W3C website at
When you’re finished in the Specify Data Source screen, click Done to create the data set right away, or click Next to goon to the Set Data Options screen. If you click Done, the data set becomes available in the Bindings panel (Window� In the Set Data Options screen, do the following:
172
(Optional) Set data set column types by selecting a column, and choosing a column type from the Type pop-up menu. For
example, if a column in the data set contains numbers, select the column and choose from the Type pop-upmenu. This option is only important if you want your user to be able to sort the data by that column.You can select a data set column by clicking its header, by choosing it from the Column Name pop-up menu, or bynavigating to it using the left and right arrows in the upper-left corner of the screen.
(Optional) Specify how you want to sort the data by selecting the column you want to sort by from the Sort Column pop-upmenu. Once you’ve selected the column, you can specify whether to sort it in ascending or descending order.
(Optional) Select Filter Out Duplicate rows to exclude duplicate rows of data from the data set.
(Optional) Select Disable Data Caching if you always want to have access to the most recent data in the data set. If youwant to autorefresh data, select Autorefresh Data and specify a refresh time in milliseconds.
When you’re finished in the Set Data Options screen, click Done to create the data set right away, or click Next to go on tothe Choose Insert Options screen. If you click Done, the data set becomes available in the Bindings panel (Window� In the Choose Insert Options screen, do one of the following:
Select a layout for the new data set, and specify the appropriate setup options. For more information, see Choose a layoutfor the data set.
Select Do Not Insert HTML. If you select this option, Dreamweaver creates the data set, but does not add any HTML tothe page. The data set becomes available from the Bindings panel (Window� Bindings), and you can manually dragpieces of data from the data set to the page.Click Done.Dreamweaver creates the data set and, if you selected a layout option, displays the layout and data placeholders on yourpage. If you look in Code view, you’ll see that Dreamweaver has added references in the header to the xpath.js file and theSpryData.js file. These files are important Spry assets that work in conjunction with the page. Be sure not to remove this codefrom your page or the data set will not function. When you upload your page to a server, you’ll also need to upload these filesas dependent files.Choose a layout for the data setThe Choose Insert Options screen lets you select different display options for how you want to display values from the data set on the page. Youcan display data using a dynamic Spry Table, a master/detail layout, a stacked containers (single column) layout, or a stacked containers withspotlight area (two-column) layout. A thumbnail depiction of what each layout looks like appears in the Choose Insert Options screen.Dynamic Table layoutSelect this option if you want to display your data in a dynamic Spry Table. Spry Tables allow for dynamic column sorting and other interactiveOnce you’ve selected this option, click the Set Up button to open the Insert Table dialog box and follow these steps:In the Columns panel, adjust the columns for your table by doing the following:
Select a column name and click the minus (-) sign to delete the column from the table. Click the plus (+) sign and select acolumn name to add new columns to the table.
Select a column name and click the up or down arrows to move the column. Moving a column up moves it further left inthe displayed table; moving a column down moves it to the right.To make a column sortable, select the column in the Columns panel and select Sort Column When Header Is Clicked. Bydefault, all columns are sortable.If you want to make a column unsortable, select its column name in the Columns panel, and deselect Sort Column WhenHeader Is Clicked.If you have CSS styles associated with your page, either as an attached style sheet or as a set of individual styles in yourHTML page, you can apply a CSS class for one or more of the following options:Odd Row ClassChanges the appearance of the odd-numbered rows in the dynamic table according to the selected classEven Row ClassChanges the appearance of the even-numbered rows in the dynamic table according to the selected classHover ClassChanges the appearance of a table row when you move the mouse over it according to the selected classSelect ClassChanges the appearance of a table row when you click it according to the selected class style.Note: The order of the odd, even, hover, and select classes in your style sheet is very important. The rules should be in the
173
exact order indicated above (odd, even, hover, select). If the hover rule appears below the select rule in the style sheet, the
hover effect won’t appear until the user mouses over a different row. If the hover and select rules appear above the even andodd rules in the style sheet, the even and odd effects will not work at all. You can drag rules in the CSS panel to order themcorrectly, or you can manipulate the CSS code directly.If the table you are creating is going to become a dynamic Spry master table, select Update Detail Region When Row IsClicked. For more information, see About dynamic Spry master tables and updating detail regions.Click OK to close the dialog box and then click Done in the Choose Insert Options screen.If you’re in Design view you’ll see the table appear with a row of headers and a row of data references. The data referencesare highlighted and enclosed in curly brackets ({}).Master/Detail layoutSelect this option if you want to display your data using a master/detail layout. Master/detail layouts let users click an item in the master (left)region that updates the information in the detail (right) region. Typically the master region contains a long list of names, for example a list ofavailable products. When the user clicks one of the product names, the detail region displays much more detailed information about the selection.Once you’ve selected this option, click the Set Up button to open the Insert Master/Detail Layout dialog box and follow these steps:In the Master Columns panel, adjust the content of your master region by doing the following:
Select a column name and click the minus (-) sign to delete the column from the master region. Click the plus (+) sign andselect a column name to add new columns to the master region. By default Dreamweaver populates the master regionwith data from the first column in the data set.
Select a column name and click the up or down arrows to move the column. Moving a column up or down in the MasterColumns panel sets the order of the data’s appearance in the master region on the page.Repeat the above steps for the Detail Columns panel. By default Dreamweaver populates the detail region with all of the datathat is not in the master region (that is, all columns except for the first column in the data set).(Optional) Set different container types for data in the detail region. To do so, select the name of a detail column, and selectthe container you want to use for it from the Container Type pop-up menu. You can choose from , or H1-H6Click OK to close the dialog box and then click Done in the Choose Insert Options screen.If you’re in Design view you’ll see the master/detail regions appear, populated with your selected data references. The datareferences are highlighted and enclosed in curly brackets ({}).Stacked Containers layoutSelect this option if you want to display your data using a repeating container structure on the page. For example, if you have four columns of datain the data set, each container can include all four columns, and the container structure will repeat itself for each row in the data set.Once you’ve selected this option, click the Set Up button to open the Insert Stacked Containers dialog box and follow these steps:In the Columns panel, adjust the content of your stacked containers by doing the following:
Select a column name and click the minus (-) sign to delete the column from the stacked containers. Click the plus (+)sign and select a column name to add new columns to the containers. By default Dreamweaver populates the stackedcontainers with data from every column in the data set.
Select a column name and click the up or down arrows to move the column. Moving a column up or down in the Columnspanel sets the order of the data’s appearance in the stacked containers on the page.(Optional) Set different container types for data in the stacked container. To do so, select the name of a data set column, andselect the container you want to use for it from the Container Type pop-up menu. You can choose from , or H1-Click OK to close the dialog box and then click Done in the Choose Insert Options screen.If you’re in Design view you’ll see the container, populated with your selected data references. The data references arehighlighted and enclosed in curly brackets ({}).Stacked Containers with Spotlight Area layoutSelect this option if you want to display your data using a repeating container structure on the page with a spotlight area in each container.Typically, the spotlight area contains a picture. The Spotlight Area layout is similar to the Stacked Containers layout, the difference being that inthe Spotlight Area layout, the data display is divided into two separate columns (within the same container).Once you’ve selected this option, click the Set Up button to open the Insert Spoltlight Area Layout dialog box and follow these steps:In the Spotlight Columns panel, adjust the content of your spotlight area by doing the following:
Select a column name and click the minus (-) sign to delete the column from the spotlight area. Click the plus (+) sign and
174
select a column name to add new columns to the spotlight area. By default Dreamweaver populates the spotlight area
with data from the first column in the data set.
Select a column name and click the up or down arrows to move the column. Moving a column up or down in the SpotlightColumns panel sets the order of the data’s appearance in the spotlight area on the page.(Optional) Set different container types for data in the spotlight area. To do so, select the name of a data set column, andselect the container you want to use for it from the Container Type pop-up menu. You can choose from , or H1-Repeat the above steps for the Stacked Columns panel. By default Dreamweaver populates the stacked columns with all ofthe data that is not in the spotlight area (that is, all columns except for the first column in the data set).Click OK to close the dialog box and then click Done in the Choose Insert Options screen.If you’re in Design view you’ll see the spotlight area with stacked containers alongside of it, populated with your selected datareferences. The data references are highlighted and enclosed in curly brackets ({}).Do Not Insert HTMLSelect this option if you want to create a data set, but do not want Dreamweaver to insert an HTML layout for the data set. The data set becomesavailable from the Bindings panel (Window� Bindings), and you can manually drag pieces of the data set to the page.Even if you create a data set without inserting a layout, you can still insert one of the available HTML layouts at any time. To do so, double-clickthe name of the data set in the Bindings panel, click through to the Choose Insert Options screen, select your layout, and click Done.Note: You can also drag the name of the data set from the Bindings panel to the insertion point on the page. When you do so, the Choose InsertOptions screen opens. Make your layout selection and click Done.Edit a data setAfter you create a Spry data set, you can edit it at any time.
In the Bindings panel (Window� Bindings), double-click the name of your data set, and make your edits.Note: When you edit a data set, and select a new layout in the Choose Insert Options screen, Dreamweaver does not replace whatever layout ison the page, but rather inserts a new one.Use a design-time feedIf you are working with data that is still being developed, you may find it useful to use a design-time feed. For example, if the server developer isstill finalizing the database behind your XML data file, you can use a test version of the file to design your page separately from the databaseWhen you use a design-time feed, Dreamweaver only populates your work environment with data from that feed. References to the data sourcethat exist in the page code remain references to the real data source you want to use.Begin creating a Spry Data Set (see previous procedures for instructions).In the Specify a Data Source screen, click the Design-time feed link.Click the Browse button to locate the design-time feed and click OK.About Spry data selectorsWhen you use Dreamweaver to create a Spry data set, Dreamweaver includes all of the data in a selected container by default. You can refine thisselection by using CSS data selectors. CSS data selectors let you include only a portion of the data from the data source by allowing you tospecify CSS rules that are attached to certain pieces of data. For example, if you specify in the Row Selectors text box of the SpecifyData Source screen, Dreamweaver creates a data set that only contains rows with the .product class assigned to them.You must select the Advance Data Selection option in the Specify Data Source screen for the data selectors boxes to become active. If you enterdata selectors and deselect the option, Dreamweaver retains what you typed in the boxes, but does not use them as filters for the data set.About dynamic Spry master tables and updating detail regionsOne of the most common uses of Spry data sets is to create one or more HTML tables that dynamically update other page data in response to auser action. For example, if a user selects a product from a list of products in a table, the data set can immediately update data elsewhere on thepage with detailed information about the selected product. With Spry, these updates do not require a page refresh.These separate page regions are referred to as and regions. Typically, one area on the page (the master region) displays a list ofcategorized items (for example, a list of products), and another area of the page (the detail region) displays more information about a selectedEach data set maintains the notion of a current row, and by default, the current row is set to the first row of data in the data set. When a usermakes different selections in a master region (again, taking the example of a list of different products), Spry actually changes the data set’s currentrow. Because the detail region is dependent on the master region, any changes that occur from user interaction with the master region (forexample, selecting different products), result in changes to the data displayed in the detail region.
Dreamweaver creates master/detail layouts for you automatically, so that all of the correct associations between master and detail regions are in
175
To the topplace. But if you want to create a dynamic master table on your own, you have the option of preparing it for association with a detail region later.When you select the Update Detail Regions When Row is Clicked Option (in the Insert Table dialog box), Dreamweaver inserts a inside the tag for the repeating row of your dynamic table. This attribute prepares the table as a master table that has the ability of resetting thecurrent row of the data set as the user interacts with the table.For more information on creating master/detail regions by hand, see the Spry Developer Guide atCreate a Spry regionThe Spry framework uses two types of regions: one is a Spry Region that wraps around data objects such as tables and repeat lists, and the otheris a Spry Detail Region that is used in conjunction with a master table object to allow dynamic updating of data on a Dreamweaver page.All Spry data objects must be enclosed in a Spry Region. (If you try to add a Spry data object before adding a Spry region to a page,Dreamweaver prompts you to add a Spry region.) By default, Spry regions are in HTML containers. You can add them before you add a table,add them automatically when you insert a table or repeat list, or you can wrap them around existing tables or repeat list objects.If you are adding a detail region, typically you add the master table object first and select the Update Detail Regions option (see Dynamic Tablelayout). The only value that is different and specific for a detail region is the Type option in the Insert Spry Region dialog box.Select Insert� Spry� Spry Region.You can also click the Spry Region button in the Spry category in the Insert panel.For the object container, select the iv0; or&#xspan; option. The default is to use a iv0; container.Choose one of the following options:
To create a Spry Region, select Region (the default) as the type of region to insert.
To create a Spry Detail Region, select the Detail Region option. You would only use a detail region if you want to binddynamic data that updates as data in another Spry region changes.Important: You need to insert a detail region in a different iv0; from the master table region. You might need to use Codeview to place the insertion point precisely.Choose your Spry data set from the menu.If you want to create or change the region defined for an object, select the object and choose one of the following:Puts a new region around an object.Replace SelectionReplaces an existing region for an object.When you click OK, Dreamweaver puts a region placeholder into your page with the text “Content for Spry Region GoesHere.” You can replace this placeholder text with a Spry data object such as a table or repeat list, or with dynamic data fromthe Bindings panel (Window iv0; Bindings).
The Bindings panel displays the available data from the data set.Note: In the Bindings panel, there are some built-in Spry elements, ds_RowID, ds_CurrentRowID, and ds_RowCount, alsolisted. Spry uses these to define the row a user clicked in when determining how to update dynamic detail regions.To replace the placeholder text with a Spry data object (for example, a Spry Table), click the appropriate Spry data objectbutton in the Spry category of the Insert panel.To replace the placeholder text with dynamic data, use one of the following methods:
Drag one or more elements from the Bindings panel on top of the selected text.
In Code view, type the code for one or more elements directly. Use this format: {dataset-name::element-name}, as in. or . If you are only using one data set in your file, or if you are using data elementsfrom the same data set that you defined for the region, you can omit the data set name and simply write {desc}.Regardless of which method you use to define the contents of your region, the following lines are added to your HTML code:
176
To the topTo the top iv-;⤀&#x/div; spry:region="ds1"{name}{category} iv-;⤀&#x/div; spry:region="ds2"{ds1::name}{ds1::descheader}Create a Spry repeat regionYou can add repeat regions to display your data. A repeat region is a simple data structure that you can format as needed to present your data.For example, you can use a repeat region to display a set of photograph thumbnails one after another within a page layout object such as an APSelect Insert&#x/div; Spry&#x/div; Spry Repeat.You can also click the Spry Repeat button in the Spry category in the Insert panel.For the object container, select the iv0; or&#xspan; option depending on the type of tag you want. The default is to use a iv0; container.Select the Repeat (default) or Repeat Children option.If you want more flexibility, you may want to use the Repeat Children option where data validation is done for each line in alist at the child level. For instance, if you have a&#xul00; list, the data is checked at the&#xli00; level. If you choose the Repeatoption, the data is checked at the&#xul00; level. The Repeat Children option may be especially useful if you use conditionalexpressions in your code.Choose your Spry data set from the menu.If you already have text or elements selected, you can wrap or replace them.Click OK to display a repeat region on your page.Note: All Spry data objects must be within regions, so make sure you’ve created a Spry region on your page before insertinga repeat region.When you click OK, Dreamweaver inserts a region placeholder into your page with the text “Content for Spry Region GoesHere.” You can replace this placeholder text with a Spry data object such as a table or repeat list or with dynamic data fromthe Bindings panel (Window&#xul00; Bindings).
The Bindings panel displays the available data from the data set.Note: In the Bindings panel, there are some built-in Spry elements, ds_RowID, ds_CurrentRowID, and ds_RowCount, alsolisted. Spry uses these to define the row a user clicked in when determining how to update dynamic detail regions.To replace the placeholder text with a Spry data object, click the appropriate Spry data object button in the Insert panel.To replace the placeholder text with one or more dynamic data, use one of the following methods:
Drag one or more elements from the Bindings panel on top of the selected text.
In Code view, type the code for one or more elements directly. Use this format: {dataset-name::element-name}, as in. or . If you are only using one data set in your file, or if you are using data elementsfrom the same data set that you defined for the region, you can omit the data set name and simply write {desc}.Regardless of which method you use to define the contents of your region, the following lines of code are added to your HTML iv-;⤀&#x/div; spry:region="ds1"{name}{category} iv-;⤀&#x/div; spry:region="ds2"{ds1::name}{ds1::descheader}Create a Spry repeat list regionYou can add repeat lists to display your data as an ordered list, an unordered (bulleted) list, a definition list, or a drop-down list.Select Insert&#x/div; Spry&#x/div; Spry Repeat List.
177

You can also click the Spry Repeat List button in the Spry category in the Insert panel.
Select the container tag you want to use: UL, OL, DL, or SELECT. The other options vary depending on which container youchoose. If you choose SELECT, you must define the following fields:
Display Column: This is what users see when they view the page in their browsers.
Value Column: This is the actual value sent to the background server.For example, you can create a list of states and show users Alabama and Alaska, but send AL or AK to the server. You canalso use the SELECT as a navigational tool and show product names such as “Adobe Dreamweaver” and “Adobe Acrobat” tousers, but send URLs such as “support/products/dreamweaver.html” and “support/products/acrobat.html” to the server.Choose your Spry data set from the menu.Choose the columns you want to display.Click OK to display a repeat list region on your page. In Code View, you can see that HTML&#xul00; &#xol00; l00; or FORM selecttags are inserted into your file.Note: If you try to insert a repeat list region but you haven’t created a region, Dreamweaver prompts you to add one before inserting the table. AllSpry data objects must be contained within regions.
Legal Notices | Online Privacy Policy
178
Displaying database records
To the topTo the topTo the topTo the topAbout database recordsServer behaviors and formatting elementsApplying typographic and page layout elements to dynamic dataNavigating database recordset resultsCreate a recordset navigation barCustom recordset navigation barsNavigation bar design tasksDisplay and hide regions based on recordset resultsDisplay multiple recordset resultsCreate a dynamic tableCreate record countersUse predefined data formatsAbout database recordsDisplaying database records involves retrieving information stored in a database or other source of content, and rendering that information to aweb page. Dreamweaver provides many methods of displaying dynamic content, and provides several builtin server behaviors that let you bothenhance the presentation of dynamic content, and allow users to more easily search through and navigate information returned from a database.Databases and other sources of dynamic content provide you with more power and flexibility in searching, sorting, and viewing large stores ofinformation. Using a database to store content for websites makes sense when you need to store large amounts of information, and then retrieveand display that information in a meaningful way. Dreamweaver provides you with several tools and prebuilt behaviors to help you effectivelyretrieve and display information stored in a database.Server behaviors and formatting elementsDreamweaver provides the following server behaviors and formatting elements to let you enhance the display of dynamic data:let you apply different types of numerical, monetary, date/time, and percentage values to dynamic text.For example, if the price of an item in a recordset reads 10.989, you can display the price on the page as $10.99 by selecting the Dreamweaver“Currency - 2 Decimal Places” format. This format displays a number using two decimal places. If the number has more than two decimal places,the data format rounds the number to the closest decimal. If the number has no decimal places, the data format adds a decimal point and twoRepeating Regionserver behaviors let you display multiple items returned from a database query, and let you specify the number of records todisplay per page.Recordset Navigationserver behaviors let you insert navigation elements that allow users to move to the next or previous set of records returnedby the recordset. For example, if you choose to display 10 records per page using the Repeating Region server object, and the recordset returns40 records, you can navigate through 10 records at a time.Recordset Status Barserver behaviors let you include a counter that shows users where they are within a set of records relative to the totalnumber of records returned.Show Regionserver behaviors let you choose to show or hide items on the page based on the relevance of the currently displayed records. Forexample, if a user has navigated to the last record in a recordset, you can hide the link, and display only the records link.Applying typographic and page layout elements to dynamic dataA powerful feature of Dreamweaver is the ability to present dynamic data within a structured page, and to apply typographic formatting usingHTML and CSS. To apply formats to dynamic data in Dreamweaver, format the tables and placeholders for the dynamic data using theDreamweaver formatting tools. When the data is inserted from its data source, it automatically adopts the font, paragraph, and table formatting youNavigating database recordset resultsRecordset navigation links let users move from one record to the next, or from one set of records to the next. For example, after designing a pageto display five records at a time, you might want to add links such as or that let users display the five next or previous records.You can create four types of navigation links to move through a recordset: First, Previous, Next, and Last. A single page can contain any number
179
To the topTo the top
of these links, provided they all work on a single recordset. You can’t add links to move through a second recordset on the same page.
Recordset navigation links require the following dynamic elements:
A recordset to navigate
Dynamic content on the page to display the record or records
Text or images on the page to serve as a clickable navigation bar
A Move To Record set of server behaviors to navigate the recordsetYou can add the last two elements by using the Record Navigation Bar server object, or you can add them separately by usingthe design tools and the Server Behaviors panel.Create a recordset navigation barYou can create a recordset navigation bar in a single operation using the Recordset Navigation Bar server behavior. The server object adds thefollowing building blocks to the page:
An HTML table with either text or image links
A set of Move To server behaviors
A set of Show Region server behaviorsThe text version of the Recordset Navigation Bar looks like this:
The image version of the Recordset Navigation Bar looks like this:
Before placing the navigation bar on the page, make sure the page contains a recordset to navigate and a page layout inwhich to display the records.After placing the navigation bar on the page, you can use the design tools to customize the bar to your liking. You can alsoedit the Move To and Show Region server behaviors by double-clicking them in the Server Behaviors panel.Dreamweaver creates a table that contains text or image links that allow the user to navigate through the selected recordsetwhen clicked. When the first record in the recordset is displayed, the and links or images are hidden. When thelast record in the recordset is displayed, the and links or images are hidden.You can customize the layout of the navigation bar by using the design tools and the Server Behaviors panel.In Design view, place the insertion point at the location on the page where you want the navigation bar to appear.Display the Recordset Navigation Bar dialog box (Insert� Data Objects� Recordset Paging� Recordset Navigation Bar).Select the recordset you want to navigate from the Recordset popup menu.From the Display Using section, select the format to display the navigation links on the page, and click OK.Places text links on the page.Includes graphical images as links. Dreamweaver uses its own image files. You can replace these images with imagefiles of your own after placing the bar on the page.Custom recordset navigation barsYou can create your own recordset navigation bar that uses more complex layout and formatting styles than the simple table created by theRecordset Navigation Bar server object.To create your own recordset navigation bar, you must:
Create navigation links in text or images
Place the links in the page in Design view
Assign individual server behaviors to each navigation linkThis section describes how to assign individual server behaviors to the navigation links.Create and assign server behaviors to a navigation linkIn Design view, select the text string or image on the page you want to use as a record navigation link.
180
To the topTo the topTo the top
Open the Server Behaviors panel (Window� Server Behaviors), and click the Plus (+) button.
Select Recordset Paging from the popup menu; then select a server behavior appropriate to that link from the listed serverIf the recordset contains a large number of records, the Move To Last Record server behavior can take a long time to runwhen the user clicks the link.In the Recordset popup menu, select the recordset that contains the records, and click OK.The server behavior is assigned to the navigation link.Set the Move To (server behavior) dialog box optionsAdd links that let the user navigate through records in a recordset.If you didn’t select anything on the page, select a link from the popup menu.Select the recordset that contains the records to page through, and click OK.Note: If the recordset contains a large number of records, the Move To Last Record server behavior can take a long time torun when the user clicks the link.Navigation bar design tasksWhen creating a custom navigation bar, begin by creating its visual representation using the Dreamweaver page-design tools. You don’t have tocreate a link for the text string or image, Dreamweaver creates one for you.The page you create the navigation bar for must contain a recordset to navigate. A simple recordset navigation bar might look like this, with linkbuttons created out of images, or other content elements:
After you have added a recordset to a page, and have created a navigation bar, you must apply individual server behaviors to each navigationelement. For example, a typical recordset navigation bar contains representations of the following links matched to the appropriate behavior:Navigation linkServer behaviorGo to first pageMove to first pageGo to previous pageMove to previous pageGo to next pageMove to next pageGo to last pageMove to last pageDisplay and hide regions based on recordset resultsYou can also specify that a region be displayed or hidden based on whether the recordset is empty. If a recordset is empty (for example, norecords were found matching the query), you can display a message informing the user that no records were returned. This is especially usefulwhen creating search pages that rely on user input search terms to run queries against. Similarly, you can display an error message if there is aproblem connecting to a database, or if a user’s user name and password do not match those recognized by the server.The Show Region server behaviors are:
Show If Recordset Is Empty
Show If Recordset Is Not Empty
Show If First Page
Show If Not First Page
Show If Last Page
Show If Not Last PageIn Design view, select the region on the page to show or hide.In the Server Behaviors panel (Window� Server Behaviors), click the Plus (+) button.Select Show Region from the popup menu, select one of the listed server behaviors, and click OK.Display multiple recordset results
181
To the topThe Repeating Region server behavior lets you display multiple records from a recordset within a page. Any dynamic data selection can be turnedinto a repeating region. However, the most common regions are a table, a table row, or a series of table rows.In Design view, select a region that contains dynamic content.The selection can be anything, including a table, a table row, or even a paragraph of text.To select a region on the page precisely, you can use the tag selector on the left corner of the document window. Forexample, if the region is a table row, click inside the row on the page, then click the rightmost &#xtr00; tag in the tag selector toselect the table row.Select Window&#xtr00; Server Behaviors to display the Server Behaviors panel.Click the Plus (+) button, and select Repeating Region.Select the name of the recordset to use from the popup menu.Select the number of records to display per page, and click OK.In the Document window, a thin, tabbed, gray outline appears around the repeating region.Modify repeating regions in the Property inspector
Modify the selected repeating region by changing any of the following options:
The name of the repeating region.
The recordset providing the records for the repeating region.
The number of records displayedWhen you select a new option, Dreamweaver updates the page.Reuse PHP recordsetsFor a tutorial on reusing PHP recordsets, see David Powers’s tutorial, How Do I Reuse a PHP Recordset in More Than One Repeat Region?Create a dynamic tableThe following example illustrates how the Repeating Region server behavior is applied to a table row, and specifies that nine records are displayedper page. The row itself displays four different records: city, state, street address, and ZIP code.
To create a table such as the one in the previous example, you must create a table that contains dynamic content, and apply the RepeatingRegion server behavior to the table row containing the dynamic content. When the page is processed by the application server, the row isrepeated the number of times specified in the Repeating Region server object, with a different record inserted in each new row.Do one of the following to insert a dynamic table:
Select Insert� Data Objects� Dynamic Data� Dynamic Table to display the Dynamic Table dialog box.
From the Data category of the Insert panel, click the Dynamic Data button and select the Dynamic Table icon from thepop-up menu.
182
To the top
Select the recordset from the Recordset popup menu.
Select the number of records to display per page.(Optional) Input values for the table border, cell padding, and cell spacing.The Dynamic Table dialog box retains the values you enter for table borders, cell padding, and cell spacing.Note: If you are working on a project that requires several dynamic tables with the same appearance, enter the table layoutvalues, which further simplifies page development. You can adjust these values after inserting the table by using the tableProperty inspector.Click OK.A table and placeholders for the dynamic content defined in its associated recordset are inserted into the page.
In this example, the recordset contains four columns: AUTHORID, FIRSTNAME, LASTNAME, and BIO. The table’s headingrow is populated with the names of each column. You can edit the headings using any descriptive text, or replace them withrepresentative images.Create record countersRecord counters give users a reference point when they are navigating through a set of records. Typically, record counters display the totalnumber of records returned, and the current records being viewed. For example, if a recordset returns 40 individual records, and 8 records aredisplayed per page, the record counter on the first page would indicate “Displaying records 18 of 40.”Before you create a record counter for a page, you must create a recordset for the page, an appropriate page layout to contain the dynamiccontent, and then a recordset navigation bar.Create simple record countersRecord counters let users know where they are within a given set of records relative to the total number of records returned. For this reason recordcounters are a useful behavior that can significantly add to the usability of a web page.Create a simple record counter by using the Recordset Navigation Status server object. This server object creates a text entry on the page todisplay the current record status. You can customize the record counter by using Dreamweaver page-design tools.Place the insertion point where you want to insert the record counter.Select Insert� Data Objects� Display Record Count� Recordset Navigation Status, select the recordset from the Recordsetup menu, and click OK.The Recordset Navigation Status server object inserts a text record counter that appears similar to the following example:
When viewed in Live view, the counter appears similar to the following example:
Build and add the record counter to the page
In the Insert Recordset Navigation Status dialog box, select the recordset to track, and click OK.Create custom record countersYou use individual record count behaviors to create custom record counters. Creating a custom record counter lets you create a record counterbeyond the simple, single row table inserted by the Recordset Navigation Status server object. You can arrange design elements in a number ofcreative ways, and apply an appropriate server behavior to each element.The Record Count server behaviors are:
Display Starting Record Number
Display Ending Record Number
Display Total RecordsBefore you create a custom record counter for a page, you must first create a recordset for the page, an appropriate page layout to contain thedynamic content, and a recordset navigation bar.
183
To the topThis example creates a record counter that appears similar to the example in “Simple record counters.” In this example, the text in sans-serif fontrepresents the record count placeholders that will be inserted in the page. The record counter in this example appears as follows:Displaying records through of RecordSet.RecordCount.In Design view, enter the counter’s text on the page. The text can be anything you want, for example:Displaying records thru of .Place the insertion point at the end of the text string.Open the Server Behaviors panel (Window� Server Behaviors).Click the Plus (+) button in the upper-left corner, and click Display Record Count. Within this submenu, select Display TotalRecords. The Display Total Records behavior is inserted into the page, and a placeholder is inserted where the insertion pointwas. The text string now appears as follows:Displaying records thru of {Recordset1.RecordCount}.Place the insertion point after the word , and select the Display Starting Record Count Number from the ServerBehaviors� Plus (+) button� Record Count panel. The text string now appear as follows:Displaying records thru of {Recordset1.RecordCount}.Now place the insertion point between the words and , and select the Display Starting Record Count Number from theServer Behaviors� Plus (+) button� Record Count panel. The text string now appear as follows:Displaying records thru {Recordset1.RecordCount}.Confirm that the counter functions correctly by viewing the page in Live view; the counter is similar to the following example:Displaying records 1 thru 8 of 40.If the results page has a navigation link to move to the next set of records, clicking the link updates the record counter to readas follows:Showing records 9 thru 16 of 40.Use predefined data formatsDreamweaver includes several predefined data formats that you can apply to dynamic data elements. The data format styles include date andtime, currency, numerical, and percentage formats.Apply data formats to dynamic contentSelect the dynamic content placeholder in the Document window.Select Window� Bindings to display the Bindings panel.Click the down arrow button in the Format column.If the down arrow is not visible, expand the panel.From the Format popup menu, select the data format category you want.Ensure that the data format is appropriate for the type of data you are formatting. For example, the Currency formats workonly if the dynamic data consists of numerical data. Note that you cannot apply more than one format to the same data.Verify that the format was applied correctly by previewing the page in Live view.Customize a data formatOpen a page that contains dynamic data in Design view.Select the dynamic data whose format you want to customize.The bound data item whose dynamic text you selected is highlighted in the Bindings panel (Window� Bindings). The paneldisplays two columns for the selected item—Binding and Format. If the Format column is not visible, widen the Bindings panelto reveal it.In the Bindings panel, click the down arrow in the Format column to expand the popup menu of available data formats.If the down arrow is not visible, widen the Bindings panel more.Select Edit Format List from the popup menu.Complete the dialog box, and click OK.
184

Select the format from the list, and click Edit.
Change any of the following parameters in the Currency, Number, or Percent dialog boxes, and click OK.
The number of digits to display after the decimal point
Whether to place a leading zero in front of fractions
Whether to use parentheses or a minus sign for negative values
Whether to group digitsTo delete a data format, click the format in the list, and click the Minus (-) button.Create a data format (ASP only)Open a page containing dynamic data in Design view.Select the dynamic data you want to create a custom format for.Select Window� Bindings to display the Bindings panel, and click the down arrow in the Format column. If the down arrow isnot visible, expand the panel.Select Edit Format List from the popup menu.Click the Plus (+) button, and select a format type.Define the format, and click OK.Enter a name for the new format in the Name column, and click OK.Note: Though Dreamweaver only supports creating data formats for ASP pages, ColdFusion and PHP users can downloadformats that other developers created, or create server formats and post them to the Dreamweaver Exchange. For moreinformation on the Server Format API, see Extending Dreamweaver(Help� Extending Dreamweaver� Server Formats).More Help topics
Legal Notices | Online Privacy Policy
185
Presenting content with tables
To the topTo the topTo the topAbout tablesTable formatting precedence in HTMLAbout splitting and merging table cellsInsert a table and add contentImport and export tabular dataSelect table elementsSet table propertiesSet cell, row, or column propertiesUse Expanded Tables mode for easier table editingFormat tables and cellsResizing tables, columns, and rowsResize tables, columns, and rowsAdd and remove rows and columnsSplit and merge cellsCopy, paste, and delete cellsNest tablesAbout tablesTables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table consists of one or more rows;each row consists of one or more cells. Although columns aren’t usually explicitly specified in HTML code, Dreamweaver enables you tomanipulate columns as well as rows and cells.Dreamweaver displays the table width and the column width for each table column when the table is selected or when the insertion point is in thetable. Next to the widths are arrows for the table header menu and the column header menus. Use the menus for quick access to common table-related commands. You can enable or disable the widths and menus.If you do not see a width for the table or for a column, then that table or column does not have a specified width in the HTML code. If two numbersappear, then the visual width as it appears in Design view doesn’t match the width specified in the HTML code. This can happen when you resizea table by dragging its lower-right corner or when you add content to a cell that’s larger than its set width.For example, if you set a column’s width to 200 pixels and then add content that stretches the width to 250 pixels, two numbers appear for thatcolumn: 200 (the width specified in the code) and (250) in parentheses (the visual width of the column as it’s rendered on your screen).Note: You can also lay out your pages using CSS positioning.Table formatting precedence in HTMLWhen formatting tables in Design view, you can set properties for the entire table or for selected rows, columns, or cells in the table. When aproperty, such as background color or alignment, is set to one value for the whole table and another value for individual cells, cell formatting takesprecedence over row formatting, which in turn takes precedence over table formatting.The order of precedence for table formatting is as follows:For example, if you set the background color for a single cell to blue, then set the background color of the entire table to yellow, the blue cell doesnot change to yellow, since cell formatting takes precedence over table formatting.Note: When you set properties on a column, Dreamweaver changes the attributes of the tag corresponding to each cell in the column.About splitting and merging table cellsYou can merge any number of adjacent cells—as long as the entire selection is a line or a rectangle of cells—to produce a single cell that spansseveral columns or rows. You can split a cell into any number of rows or columns, regardless of whether it was previously merged. Dreamweaverautomatically restructures the table (adding any necessary or attributes) to create the specified arrangement.
186
To the topTo the top
In the following example, the cells in the middle of the first two rows have been merged into a single cell that spans two rows.
Insert a table and add contentUse the Insert panel or the Insert menu to create a new table. Then, add text and images to table cells the same way that you add text andimages outside of a table.Note: The Layout mode feature is deprecated as of Dreamweaver CS4 and later. Layout mode created page layouts using layout tables, whichare no longer recommended by Adobe. For more information on Layout mode and why it was deprecated, see the Dreamweaver Team BlogIn the Design view of the Document window, place the insertion point where you want the table to appear.Note: If your document is blank, you can place the insertion point only at the beginning of the document.
Select Insert� Table.
In the Common category of the Insert panel, click Table.Set the attributes of the Table dialog box and click OK to create the table.Determines the number of table rows.Determines the number of table columns.Table WidthSpecifies the width of the table in pixels, or as a percentage of the browser window’s width.Border ThicknessSpecifies the width, in pixels, of the table’s borders.Cell SpacingDetermines the number of pixels between adjacent table cells.When you don’t explicitly assign values for border thickness or cell spacing and cell padding, most browsers display thetable border thickness and cell padding set to 1 and cell spacing were set to 2. To ensure that browsers display the tablewith no border, padding or spacing, set Cell Padding and Cell Spacing to 0.Cell PaddingDetermines the number of pixels between a cell’s border and its contents.Does not enable column or row headings for the table.Makes the first column of the table a column for headings, so that you can enter a heading for each of the table.Makes the first row of the table a row for headings, so that you can enter a heading for each of the table.Enables you to enter column and row headings in the table.It’s a good idea to use headers in case any of your website visitors use screen readers. Screen readers read tableheadings and help screen-reader users keep track of table information.Provides a table title which displays outside of the table.Specifies where the table caption appears in relation to the table.Provides a table description. Screen readers read the summary text, but the text does not appear in the user’sImport and export tabular dataYou can import tabular data that has been created in another application (such as Microsoft Excel) and saved in a delimited text format (with itemsseparated by tabs, commas, colons, or semicolons) into Dreamweaver and format it as a table.You can also export table data from Dreamweaver into a text file, with the contents of adjacent cells separated by a delimiter. You can usecommas, colons, semicolons, or spaces as delimiters. When you export a table, the entire table is exported; you cannot select portions of a tableto export.If you want only some of the data from a table—for example, the first six rows or the first six columns—then copy the cells containing that data,paste those cells outside of the table (to create a new table), and export the new table.Import table dataDo one of the following:
Select File� Import� Tabular Data.
In the Data category of the Insert panel, click the Import Tabular Data icon
.
Select Insert� Table Objects� Import Tabular Data.
187
To the topSpecify the options for the tabular data and click OK.Data FileThe name of the file to import. Click the Browse button to select a file.The delimiter used in the file you’re importing.If you select Other, a text box appears to the right of the popup menu. Enter the delimiter used in your file.Note: Specify the delimiter that was used when the data file was saved. If you don’t do this, the file will not be importedproperly, and your data will not be correctly formatted in a table.Table WidthThe width of the table.
Select Fit to Data to make each column wide enough to fit the longest text string in the column.
Select Set to specify a fixed table width in pixels or as a percentage of the browser window’s width.Specifies the width, in pixels, of the table’s borders.Cell PaddingThe number of pixels between a cell’s content and the cell boundaries.Cell SpacingThe number of pixels between adjacent table cells.If you don’t explicitly assign values for borders, cell spacing, and cell padding, most browsers display the table with bordersand cell padding set to 1, and cell spacing set to 2. To ensure that browsers display the table with no padding or spacing,set Cell Padding and Cell Spacing to 0. To view cell and table boundaries when the border is set to 0, select View� VisualAids� Table Borders.Format Top RowDetermines what formatting, if any, is applied to the top row of the table. Select from four formattingoptions: no formatting, bold, italic, or bold italic.Export a tablePlace the insertion point in any cell of the table.Select File� Export� Table.Specify the following options:Specifies which delimiter character should be used to separate items in the exported file.Line BreaksSpecifies which operating system you’ll be opening the exported file in: Windows, Macintosh, or UNIX. (Differentoperating systems have different ways of indicating the end of a line of text.)Click Export.Enter a name for the file and click Save.Select table elementsYou can select an entire table, row, or column at once. You can also select one or more individual cells.When you move your pointer over a table, row, column, or cell, Dreamweaver highlights all the cells in that selection so that you know which cellswill be selected. This is useful when you have tables without borders, cells that span multiple columns or rows, or nested tables. You can changethe highlight color in preferences.If you position the pointer over a table’s border, then hold the Control key (Windows) or Command key (Macintosh), the entire structure of thetable—that is, all cells in the table—is highlighted. This is useful when you have nested tables and want to see the structure of one of theSelect an entire table
Do one of the following:
Click the upper-left corner of the table, anywhere on the top or bottom edge of the table, or on a row or column’s border.Note: The pointer changes to the table grid icon
when you can select the table (unless you click a row or column border).
Click in a table cell, then select the tag in the tag selector at the lower-left corner of the Document window.
Click in a table cell, then select Modify� Table� Select Table.
Click in a table cell, click the table header menu, then select Select Table. Selection handles appear on the selected table’slower and right edges.Select individual or multiple rows or columnsPosition the pointer to point to the left edge of a row or the top edge of a column.When the pointer changes to a selection arrow, click to select a row or column, or drag to select multiple rows or columns.
188
To the top
Select a single columnClick in the column.Click the column header menu and choose Select Column.
Select a single cell
Do one of the following:
Click in the cell, then select the tag in the tag selector at the lower-left corner of the Document window.
Control-click (Windows) or Command-click (Macintosh) in the cell.
Click in the cell and select Edit� Select AllSelect Edit� Select All again when a cell is selected to select the entire table.Select a line or a rectangular block of cells
Do one of the following:
Drag from a cell to another cell.
Click in one cell, Controlclick (Windows) or Command-click (Macintosh) in the same cell to select it, then Shift-click anotherAll of the cells within the linear or rectangular region defined by the two cells are selected.
Select nonadjacent cells
click (Windows) or Command-click (Macintosh) the cells, rows, or columns you want to select.If each cell, row, or column you Controlclick or Command-click isn’t already selected, it’s added to the selection. If it is already selected, it’sremoved from the selection.Change the highlight color for table elementsSelect Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh).Select Highlighting from the category list on the left, make either of the following changes, and click OK.
To change the highlighting color for table elements, click the Mouse-Over color box, then select a highlight color using thecolor picker (or enter the hexadecimal value for the highlight color in the text box).
To enable or disable highlighting for table elements, select or deselect the Show option for Mouse-Over.Note: These options affect all objects, such as absolutely-positioned elements (AP elements), that Dreamweaverhighlights when you move the pointer over them.Set table propertiesYou can use the Property inspector to edit tables.Select a table.
189
To the top
In the Property inspector (Window� Properties), change properties as necessary.
Table IdAn ID for the table.Rows and ColsThe number of rows and columns in the table.The width of the table in pixels, or as a percentage of the browser window’s width.Note: You usually don’t need to set the height of a table.The number of pixels between a cell’s content and the cell boundaries.The number of pixels between adjacent table cells.Determines where the table appears, relative to other elements in the same paragraph, such as text or images.Left aligns the table to the left of other elements (so that text in the same paragraph wraps around the table to the right); Rightaligns the table to the right of other elements (with text wrapping around it to the left); and Center centers the table (with textappearing above and/or below the table). Default indicates that the browser should use its default alignment.When alignment is set to Default, other content is not displayed next to the table. To display a table next to other content,use Left or Right alignment.Specifies the width, in pixels, of the table’s borders.If you don’t explicitly assign values for the border, cell spacing, and cell padding, most browsers display the table with theborder and cell padding set to 1 and cell spacing set to 2. To ensure that browsers display the table with no padding orspacing, set Border to 0, Cell Padding and Cell Spacing to 0. To view cell and table boundaries when the border is set to0, select View� Visual Aids� Table Borders.sets a CSS class on the table.Note: You might need to expand the Table Property inspector to see the following options. To expand the Table Propertyinspector, click the expander arrow in the lower-right corner.Clear Column Widthsand Clear Row Heights delete all explicitly specified row height or column width values from theConvert Table Widths To Pixelsand Convert Table Heights To Pixels set the width or height of each column in the table toits current width in pixels (also sets the width of the whole table to its current width in pixels).Convert Table Widths To Percentand Convert Table Heights To Percent set the width or height of each column in the tableto its current width expressed as a percentage of the Document window’s width (also sets the width of the whole table to itscurrent width as a percentage of the Document window’s width).If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.Set cell, row, or column propertiesYou can use the Property inspector to edit cells and rows in a table.Select the column or row.In the Property inspector (Window� Properties), set the following options:Specifies the horizontal alignment of the contents of a cell, row, or column. You can align the contents to the left, right,or center of the cells, or you can indicate that the browser should use its default alignment (usually left for regular cells andcenter for header cells).Specifies the vertical alignment of the contents of a cell, row, or column. You can align the contents to the top, middle,bottom, or baseline of the cells, or indicate that the browser should use its default alignment (usually middle).W and HThe width and height of selected cells in pixels, or as a percentage of the entire table’s width or height. To specify apercentage, follow the value with a percent symbol (%). To let the browser determine the proper width or height based on thecontents of the cell and the widths and heights of the other columns and rows, leave the field blank (the default).By default, a browser chooses a row height and column width to accommodate and the widest image or the longest line in acolumn. This is why a column sometimes becomes much wider than the other columns in the table when you add content to it.Note: You can specify a height as a percentage of the total table height, but the row may not display at the specifiedpercentage height in browsers.The background color for a cell, column, or row, chosen with the color picker.Merge CellsCombines selected cells, rows, or columns into one cell. You can merge cells only if they form a rectangular orlinear block.Split CellDivides a cell, creating two or more cells. You can split only one cell at a time; this button is disabled if more thanone cell is selected.No WrapPrevents line wrapping, keeping all the text in a given cell on a single line. If No Wrap is enabled, cells widen toaccommodate all data as you type it or paste it into a cell. (Normally, cells expand horizontally to accommodate the longest
190
To the topTo the top
word or widest image in the cell, then expand vertically as necessary to accommodate other contents.)
Formats the selected cells as table header cells. The contents of table header cells are bold and centered by default.You can specify widths and heights as either pixels or percentages, and you can convert from pixels to percentages andNote: When you set properties on a column, Dreamweaver changes the attributes of the tag corresponding to each cell inthe column. When you set certain properties for a row, however, Dreamweaver changes the attributes of the tr tag rather thanchanging the attributes of each td tag in the row. When you’re applying the same format to all the cells in a row, applying theformat to the tr tag produces cleaner, more concise HTML code.Press Tab or Enter (Windows) or Return (Macintosh) to apply the value.Use Expanded Tables mode for easier table editingExpanded Tables mode temporarily adds cell padding and spacing to all tables in a document and increases the tables’ borders to make editingeasier. This mode enables you to select items in tables or precisely place the insertion point.For example, you might expand a table to place the insertion point to the left or right of an image, without inadvertently selecting the image or table
Table in Standard modeTable in Expandedtables modeNote: After you make your selection or place the insertion point, you should return to the Standard mode of Design view to make your edits.Some visual operations, such as resizing, will not give expected results in Expanded Tables mode.Switch to Expanded Tables modeIf you are working in Code view, select View� Design or View� Code And Design (you cannot switch to Expanded Tablesmode in Code view).Do one of the following:
Select View� Table Mode� Expanded Tables Mode.
In the Layout category of the Insert panel, click Expanded Tables Mode.A bar labeled Expanded Tables Mode appears across the top of the Document window. Dreamweaver adds cell paddingand spacing to all tables on the page and increases the tables’ borders.Switch out of Expanded Tables mode
Do one of the following:
Click Exit in the bar labeled Expanded Tables Mode at the top of the Document window.
Select View� Table Mode� Standard Mode.
In the Layout category of the Insert panel, click Standard Mode.Format tables and cellsYou can change the appearance of tables by setting properties for the table and its cells or by applying a preset design to the table. Before you settable and cell properties, be aware that the order of precedence for formatting is cells, rows, and tables.To format the text inside a table cell, use the same procedures you would use to format text outside of a table.Change the format of a table, row, cell, or columnSelect a table, cell, row, or column.In the Property inspector (Window� Properties), click the expander arrow in the lower-right corner and change properties asChange the properties as necessary.For more information on the options, click the Help icon on the Property inspector.Note: When you set properties on a column, Dreamweaver changes the attributes of the tag corresponding to each cell inthe column. When you set certain properties for a row, however, Dreamweaver changes the attributes of the tag rather than
191
To the topTo the top
changing the attributes of each td tag in the row, When you’re applying the same format to all the cells in a row, applying the
format to the tr tag produces cleaner, more concise HTML code.Add or edit accessibility values for a table in Code view
Edit the appropriate attributes in the code.To quickly locate the tags in the code, click in the table, then select the &#xtabl; tag in the tag selector at the bottom of the Document window.Add or edit accessibility values for a table in Design view
To edit the table caption, highlight the caption and type a new caption.
To edit the caption alignment, place the insertion point in the table caption, right-click (Windows) or Controlclick (Macintosh),then select Edit Tag Code.
To edit the table summary, select the table, right-click (Windows) or Control-click (Macintosh), then select Edit Tag Code.Resizing tables, columns, and rowsResizing tablesYou can resize an entire table or individual rows and columns. When you resize an entire table, all of the cells in the table change sizeproportionately. If a table’s cells have explicit widths or heights specified, resizing the table changes the visual size of the cells in the Documentwindow but does not change the specified widths and heights of the cells.You can resize a table by dragging one of its selection handles. Dreamweaver displays the table width, along with a table header menu, at the topor bottom of the table when the table is selected or the insertion point is in the table.Sometimes the column widths set in the HTML code do not match their apparent widths on the screen. When this happens, you can make thewidths consistent. Table and column widths and header menus appear in Dreamweaver to help you lay out your tables; you can enable or disablethe widths and menus as necessary.Resizing columns and rowsYou can change the width of a column or the height of a row in the Property inspector or by dragging the borders of the column or row. If you havetrouble resizing, you can clear the column widths or row heights and start over.Note: You can also change cell widths and heights directly in the HTML code using Code view.Dreamweaver displays column widths, along with column header menus, at the tops or bottoms of columns when the table is selected or theinsertion point is in the table; you can enable or disable the column header menus as necessary.Resize tables, columns, and rowsResize a table
Select the table.
To resize the table horizontally, drag the selection handle on the right.
To resize the table vertically, drag the selection handle on the bottom.
To resize the table in both dimensions, drag the selection handle at the lower-right corner.Change a column’s width and keep the overall table width
Drag the right border of the column you want to change.The width of the adjacent column also changes, so you actually resize two columns. Visual feedback shows you how the columns will adjust; theoverall table width does not change.
Note: In tables with percentage-based widths (not pixels), if you drag the right border of the rightmost column, the entire table’s width changes,and all of the columns grow wider or narrow proportionately.Change a column’s width and maintain the size of the other columns
Hold the Shift key and drag the column’s border.The width of one column changes. Visual feedback shows you how the columns will adjust; the overall table width changes to accommodate the
192
To the top
column you are resizing.
Change a row’s height visually
Drag the lower border of the row.Make column widths in code consistent with visual widthsClick in a cell.Click the table header menu, then select Make All Widths Consistent.
Dreamweaver resets the width specified in the code to match the visual width.Clear all set widths or heights in a tableSelect the table.Do one of the following:
Select Modify� Table� Clear Cell Widths, or Modify� Table� Clear Cell Heights.
In the Property inspector, (Window� Properties), click the Clear Row Heights button
or the Clear Column Widths button
.
Click the table header menu, then selectClear All Heights or Clear All Widths.
Clear a column’s set width
Click in the column, click the column header menu, and select Clear Column Width.Enable or disable table and column widths and menusSelect View� Visual Aids� Table Widths.Right-click (Windows) or Controlclick (Macintosh) in the table, then select Table� Table Widths.Add and remove rows and columnsTo add and remove rows and columns, use the Modify� Table or column header menu.Pressing Tab in the last cell of a table automatically adds another row to the table.Add a single row or column
Click in a cell and do one of the following:
Select Modify� Table� Insert Row or Modify� Table� Insert Column.A row appears above the insertion point or a column appears to the left of the insertion point.
Click the column header menu, and then select Insert Column Left or Insert Column Right.
193
To the top
Add multiple rows or columnsClick in a cell.Select Modify� Table� Insert Rows Or Columns, complete the dialog box, and click OK.Indicates whether to insert rows or columns.Number of Rows or Number of ColumnsThe number of rows or columns to insert.Specifies whether the new rows or columns should appear before or after the row or column of the selected cell.Delete a row or column
Do one of the following:
Click in a cell within the row or column you want to delete, then select Modify� Table� Delete Row, or Modify� Table� Delete Column.
Select a complete row or column, then select Edit� Clear or press Delete.Add or delete rows or columns using the Property inspectorSelect the table.In the Property inspector (Windows� Properties), do one of the following:
To add or delete rows, increase or decrease the Rows value.
To add or delete columns, increase or decrease the Cols value.Note: Dreamweaver does not warn you if you are deleting rows and columns that contain data.Split and merge cellsUse the Property inspector or the commands in the Modify� Table submenu to split or merge cells.Merge two or more cells in a tableSelect the cells in a contiguous line and in the shape of a rectangle.In the following illustration, the selection is a rectangle of cells, so the cells can be merged.
In the following illustration, the selection is not a rectangle, so the cells can’t be merged.
Do one of the following:
Select Modify� Table� Merge Cells.
In the expanded HTML Property inspector (Window� Properties), click Merge Cells
Note: If you don’t see the button, click the expander arrow in the lower-right corner of the Property inspector so that yousee all the options.
194
To the top
The contents of the individual cells are placed in the resulting merged cell. The properties of the first cell selected are
applied to the merged cell.Split a cellClick in the cell and do one of the following:
Select Modify� Table� Split Cell.
In the expanded HTML Property inspector (Window� Properties), click Split Cell
Note: If you don’t see the button, click the expander arrow in the lower-right corner of the Property inspector so that yousee all the options.In the Split Cell dialog box, specify how to split the cell:Split Cell IntoSpecifies whether to split the cell into rows or columns.Number Of Rows/Number Of ColumnsSpecifies how many rows or columns to split the cell into.Increase or decrease the number of rows or columns spanned by a cell
Do one of the following:
Select Modify� Table� Increase Row Span, or Modify� Table� Increase Column Span.
Select Modify� Table� Decrease Row Span, or Modify� Table� Decrease Column Span.Copy, paste, and delete cellsYou can copy, paste, or delete a single table cell or multiple cells at once, preserving the cells’ formatting.You can paste cells at the insertion point or in place of a selection in an existing table. To paste multiple table cells, the contents of the Clipboardmust be compatible with the structure of the table or the selection in the table in which the cells will be pasted.Cut or copy table cellsSelect one or more cells in a contiguous line and in the shape of a rectangle.In the following illustration, the selection is a rectangle of cells, so the cells can be cut or copied.
In the following illustration, the selection is not a rectangle, so the cells can’t be cut or copied.
Select Edit� Cut or Edit� Copy.Note: If you selected an entire row or column and you select Edit� Cut, the entire row or column is removed from the table(not just the contents of the cells).Paste table cellsSelect where you want to paste the cells:
To replace existing cells with the cells you are pasting, select a set of existing cells with the same layout as the cells onthe clipboard. (For example, if you’ve copied or cut a 3 x 2 block of cells, you can select another 3 x 2 block of cells toreplace by pasting.)
To paste a full row of cells above a particular cell, click in that cell.
To paste a full column of cells to the left of a particular cell, click in that cell.Note: If you have less than a full row or column of cells in the clipboard, and you click in a cell and paste the cells fromthe clipboard, the cell you clicked in and its neighbors may (depending on its location in the table) be replaced with the
195
To the topTo the top
cells you are pasting.
To create a new table with the pasted cells, place the insertion point outside of the table.Select Edit� Paste.If you are pasting entire rows or columns into an existing table, the rows or columns are added to the table. If you are pastingan individual cell, the contents of the selected cell are replaced. If you are pasting outside a table, the rows, columns, or cellsare used to define a new table.Remove cell content but leave the cells intactSelect one or more cells.Note: Make sure the selection does not consist entirely of complete rows or columns.Select Edit� Clear or press Delete.Note: If only complete rows or columns are selected when you select Edit� Clear or press Delete, the entire rows orcolumns—not just their contents—are removed from the table.Delete rows or columns that contain merged cellsSelect the row or column.Select Modify� Table� Delete Row, or Modify� Table� Delete Column.Nest tablesA nested table is a table inside a cell of another table. You can format a nested table as you would any other table; however, its width is limited bythe width of the cell in which it appears.Click in a cell of the existing table.Select Insert� Table, set the Insert Table options, and click OK.You can sort the rows of a table based on the contents of a single column. You can also perform a more complicated table sort based on thecontents of two columns.You cannot sort tables that contain or attributes—that is, tables that contain merged cells.Select the table or click in any cell.Select Commands� Sort Table, set the options in the dialog box, and click OK.Determines which column’s values will be used to sort the table’s rows.Determines whether to sort the column alphabetically or numerically, and whether to sort it in ascending order (A to Z,lower numbers to higher numbers) or descending order.When the contents of a column are numbers, select Numerically. An alphabetic sort applied to a list of one- and two-digitnumbers results in the numbers being sorted as if they were words (resulting in ordering such as 1, 10, 2, 20, 3, 30) ratherthan being sorted as numbers (resulting in ordering such as 1, 2, 3, 10, 20, 30).Then By/OrderDetermines the sorting order for a secondary sort on a different column. Specify the secondary-sort column inthe Then By popup menu, and the secondary sort order in the Order popup menus.Sort Includes The First RowSpecifies that the first row of the table should be included in the sort. If the first row is aheading that should not be moved, do not select this option.Sort Header RowsSpecifies to sort all the rows in the table’s section (if any) using the same criteria as the body rows.(Note that rows remain in the section and still appear at the top of the table even after sorting.) For informationabout the tag, see the Reference panel (select Help� Reference).Sort Footer RowsSpecifies to sort all the rows in the table’s section (if any) using the same criteria as the body rows.(Note that rows remain in the section and still appear at the bottom of the table even after sorting.) For informationabout the tag, see the Reference panel (select Help� Reference).Keep All Row Colors The Same After The Sort Has Been CompletedSpecifies that table row attributes (such as color)should remain associated with the same content after the sort. If your table rows are formatted with two alternating colors, donot select this option to ensure that the sorted table still has alternating-colored rows. If the row attributes are specific to thecontent of each row, then select this option to ensure that those attributes remain associated with the correct rows in thesorted table.More Help topics[print]Laying out pages with CSS
196

Legal Notices | Online Privacy Policy
197
Set CSS heading properties for an entire page

You can specify fonts, font sizes, and colors for your page headings. By default, Dreamweaver creates CSS rules for your headings and appliesthem to all headings you use on the page. (The rules are embedded in the section of the page.)Headings are available for selection in HTML Property inspector.Select Modify� Page Properties, or click the Page Properties button in the text Property inspector.Choose the Headings (CSS) category and set the options.Heading FontSpecifies the default font family to use for headings. Dreamweaver will use the font family you specify unlessanother font is specifically set for a text element.Heading 1 through Heading 6 Specify the font size and color to use for up to six levels of heading tags.
Legal Notices | Online Privacy Policy
198
Set title and encoding properties for a page

The Title/Encoding Page Properties options let you specify the document encoding type that is specific to the language used to author your webpages as well as specify which Unicode Normalization Form to use with that encoding type.Select Modify� Page Properties, or click the Page Properties button in the text Property inspector.Choose the Title/Encoding category and set the options.Specifies the page title that appears in the title bar of the Document window and most browser windows.Document Type (DTD)Specifies a document type definition. For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strict from the popup menu.Specifies the encoding used for characters in the document.If you select Unicode (UTF8) as the document encoding, entity encoding is not necessary because UTF8 can safelyrepresent all characters. If you select another document encoding, entity encoding may be necessary to represent certaincharacters. For more information on character entities, see www.w3.org/TR/REC-html40/sgml/entities.html Converts the existing document, or reopens it using the new encoding.Unicode Normalization FormEnabled only if you select UTF8 as a document encoding. There are four UnicodeNormalization Forms. The most important is Normalization Form C because it’s the most common form used in the CharacterModel for the World Wide Web. Adobe provides the other three Unicode Normalization Forms for completeness.In Unicode, some characters are visually similar but can be stored within the document in different ways. For example, “ë”umlaut) can be represented as a single character, “eumlaut,” or as two characters, “regular Latin e” + “combining umlaut.”A Unicode combining character is one that gets used with the previous character, so the umlaut would appear above the“Latin e.” Both forms result in the same visual typography, but what is saved in the file is different for each form.Normalization is the process of making sure all characters that can be saved in different forms are all saved using the samefrom. That is, all “ë” characters in a document are saved as single “eumlaut” or as “e” + “combining umlaut,” and not as bothforms in one document.For more information on Unicode Normalization and the specific forms that can be used, see the Unicode website atInclude Unicode Signature (BOM)Includes a Byte Order Mark (BOM) in the document. A BOM is 2 to 4 bytes at thebeginning of a text file that identifies a file as Unicode, and if so, the byte order of the following bytes. Because UTF8 has nobyte order, adding a UTF8 BOM is optional. For UTF16 and UTF32, it is required.
Legal Notices | Online Privacy Policy
199
Understanding document encoding

Document encoding specifies the encoding used for characters in the document. Document encoding is specified in a tag in the head of thedocument; it tells the browser and Dreamweaver how the document should be decoded and what fonts should be used to display the decodedFor example, if you specify Western European (Latin1), this tag is inserted: http-equiv="Content-Type" content="text/html; charset=iso-8859-&#xmeta;&#x-500;1"Dreamweaver displays the document using the fonts you specify in Fonts Preferences for the Western European (Latin1) encoding; a browserdisplays the document using the fonts the browser user specifies for the Western European (Latin1) encoding.If you specify Japanese (Shift JIS), this tag is inserted: http-equiv="Content-Type" content="text/html;&#xmeta;&#x-500; charset=Shift_JIS"Dreamweaver displays the document using the fonts you specify for the Japanese encoding; a browser displays the document using the fonts thebrowser user specifies for the Japanese encodings.You can change document encoding for a page and change the default encoding that Dreamweaver uses to create new documents, including thefonts used to display each encoding.More Help topics[print]Set default document type and encoding
Legal Notices | Online Privacy Policy
200
Update CSS style sheets in a Contribute site

Adobe Contribute users can’t make changes to a CSS style sheet. To change a style sheet for a Contribute site, use Dreamweaver.Edit the style sheet using the Dreamweaver style-sheet-editing tools.Tell all of the Contribute users who are working on the site to publish pages that use that style sheet, then reedit those pagesto view the new style sheet.The following are important factors to keep in mind when updating style sheets for a Contribute site:
If you make changes to a style sheet while a Contribute user is editing a page that uses that style sheet, the user won’t seethe changes to the style sheet until they publish the page.
If you delete a style from a style sheet, the style name is not deleted from pages that use that style sheet, but since the styleno longer exists, it isn’t displayed the way the Contribute user may expect. Thus, if a user tells you that nothing happens whenthey apply a particular style, the problem may be that the style has been deleted from the style sheet.
Legal Notices | Online Privacy Policy
201
Use Design-Time style sheets

Design-Time style sheets allow you to show or hide design applied by a CSS style sheet as you work in a Dreamweaver document. For example,you can use this option to include or exclude the effect of a Macintosh-only or a Windows-only style sheet as you design a page.Design-Time style sheets only apply while you are working in the document; when the page is displayed in a browser window, only the styles thatare actually attached to or embedded in the document appear in a browser.Note: You can also enable or disable styles for an entire page using the Style Rendering toolbar. To display the toolbar, select View� Toolbars� Style Rendering. The Toggle Displaying of CSS Styles button (the right-most button) works independently of the other media buttons on theTo use a Design-time style sheet, follow these steps.Open the Design-Time Style Sheets dialog box by doing one of the following:
Right-click in the CSS Styles panel, and in the context menu select Design-time.
Select Format� CSS Styles� Design-time.In the dialog box, set options to show or hide a selected style sheet:
To display a CSS style sheet at design-time, click the Plus (+) button above Show Only At Design Time, then in the Selecta Style Sheet dialog box, browse to the CSS style sheet you want to show.
To hide a CSS style sheet, click the Plus (+) button above Hide At Design-Time, then in the Select a Style Sheet dialogbox, browse to the CSS style sheet you want to show.
To remove a style sheet from either list, click the style sheet you want to remove, then click the appropriate Minus (–)Click OK to close the dialog box.The CSS Styles panel updates with the selected style sheet’s name along with an indicator, “hidden” or “design,” to reflect thestyle sheet’s status.More Help topicsStyle Rendering toolbar overview
Legal Notices | Online Privacy Policy
202
Use Dreamweaver sample style sheets

Dreamweaver provides sample style sheets that you can apply to your pages or that you can use as starting points to develop your own styles.Open the CSS Styles panel by doing one of the following:
Select Window� CSS Styles.
Press Shift+F11.In the CSS Styles panel, click the Attach External Style Sheet button. (It’s in the lower-right corner of the panel.)In the Attach External Style Sheet dialog box, click Sample Style Sheets.In the Sample Style Sheets dialog box, select a style sheet from the list box.As you select style sheets within the list box, the Preview pane displays the text and color formatting of the selected styleClick the Preview button to apply the style sheet and verify that it applies the styles you want to the current page.If the styles applied are not what you expect them to be, select another style sheet from the list, and click Preview to seethose styles.By default, Dreamweaver saves the style sheet in a folder named CSS just below the root of the site you defined for yourpage. If that folder does not exist, Dreamweaver creates it. You can save the file to another location by clicking Browse andbrowsing to another folder.When you find a style sheet whose formatting rules meet your design criteria, click OK.
Legal Notices | Online Privacy Policy
203
Use a tracing image to design a page

You can insert an image file to use as a guide in designing your page. The image appears as a background image, which you can “design over” asyou lay out your page.Select Modify� Page Properties, or click the Page Properties button in the text Property inspector.Choose the Tracing Image category and set the options.Tracing ImageSpecifies an image to use as a guide for copying a design. This image is for reference only, and does notappear when the document is displayed in a browser.Determines the opacity of the tracing image, from completely transparent to completely opaque.
Legal Notices | Online Privacy Policy
204
Using Frames
To the topHow frames and framesets workDeciding whether to use framesNested framesetsWork with framesets in the Document windowCreate frames and framesetsSelect frames and framesetsOpen a document in a frameSave frame and frameset filesView and set frame properties and attributesView and set frameset propertiesControl frame content with linksProvide content for browsers without frame supportUsing JavaScript behaviors with framesHow frames and framesets work is a region in a browser window that can display an HTML document independent of what’s being displayed in the rest of the browserwindow. Frames provide a way to divide a browser window into multiple regions, each of which can display a different HTML document. In themost common use of frames, one frame displays a document containing navigation controls, while another frame displays a document with content is an HTML file that defines the layout and properties of a set of frames, including the number of frames, the size and placement of theframes, and the URL of the page that initially appears in each frame. The frameset file itself doesn’t contain HTML content that displays in abrowser, except in the section; the frameset file simply provides information to the browser about how a set of frames should look andwhat documents should appear in them.To view a set of frames in a browser, enter the URL of the frameset file; the browser then opens the relevant documents to display in the frames.The frameset file for a site is often named index.html, so that it displays by default if a visitor doesn’t specify a filename.The following example shows a frame layout consisting of three frames: one narrow frame on the side that contains a navigation bar, one framethat runs along the top, containing the logo and title of the website, and one large frame that takes up the rest of the page and contains the maincontent. Each of these frames displays a separate HTML document.
In this example, the document displayed in the top frame never changes as the visitor navigates the site. The side frame navigation bar containslinks; clicking one of these links changes the content of the main content frame, but the contents of the side frame itself remain static. The maincontent frame on the right displays the appropriate document for the link the visitor clicks on the left.A frame is not a file; it’s easy to think of the document that currently appears in a frame as an integral part of the frame, but the document isn’t
205
To the topTo the topactually part of the frame. The frame is a container that holds the document.Note: A “page” refers either to a single HTML document or to the entire contents of a browser window at a given moment, even if several HTMLdocuments appear at once. The phrase “a page that uses frames,” for example, usually refers to a set of frames and the documents that initiallyappear in those frames.A site that appears in a browser as a single page comprising three frames actually consists of at least four HTML documents: the frameset file,plus the three documents containing the content that initially appears in the frames. When you design a page using framesets in Dreamweaver,you must save each of these four files in order for the page to work properly in the browser.For more comprehensive information about Frames, consult Thierry Koblentz’s website at Deciding whether to use framesAdobe discourages the use of frames for web page layout. Some of the disadvantages of using frames include:
Precise graphical alignment of elements in different frames can be difficult.
Testing the navigation can be time-consuming.
The URLs of the individual framed pages don’t appear in browsers, so it can be difficult for a visitor to bookmark a specificpage (unless you provide server code that enables them to load a framed version of a particular page).For a full treatment of why you should use frames, see Gary White’s explanation at The most common use of frames, if you do decide to use them, is for navigation. A set of frames often includes one frame containing a navigationbar and another frame to display the main content pages. Using frames in this way has a couple of advantages:
A visitor’s browser doesn’t need to reload the navigation-related graphics for every page.
Each frame has its own scroll bar (if the content is too large to fit in a window), so a visitor can scroll the frames independently.For example, a visitor who scrolls to the bottom of a long page of content in a frame doesn’t need to scroll back up to the top touse the navigation bar if the navigation bar is in a different frame.In many cases, you can create a web page without frames that accomplishes the same goals as a set of frames. For example, if you want anavigation bar to appear on the left side of your page, you can either replace your page with a set of frames, or just include the navigation bar onevery page in your site. (Dreamweaver helps you create multiple pages that use the same layout.) The following example shows a page designwith a framelike layout that doesn’t use frames.
Poorly designed sites use frames unnecessarily, such as a frameset that reloads the contents of the navigation frames every time the visitor clicksa navigation button. When frames are used well (for example, to keep navigation controls static in one frame while allowing the contents of anotherframe to change), they can be very useful for a site.Not all browsers provide good frame support, and frames may be difficult for visitors with disabilities to navigate, so if you do use frames, alwaysprovide a section in your frameset, for visitors who can’t view them. You might also provide an explicit link to a frameless version of theFor more comprehensive information about Frames, consult Thierry Koblentz’s website at
206
To the topTo the top
Nested framesets
A frameset inside another frameset is called a nested frameset. A single frameset file can contain multiple nested framesets. Most web pages thatuse frames are actually using nested frames, and most of the predefined framesets in Dreamweaver also use nesting. Any set of frames in whichthere are different numbers of frames in different rows or columns requires a nested frameset.For example, the most common frame layout has one frame in the top row (where the company’s logo appears) and two frames in the bottom row(a navigation frame and a content frame). This layout requires a nested frameset: a two-row frameset, with a two-column frameset nested in thesecond row.
Main framesetMenu frame and content frameare nested within the main frameset.Dreamweaver takes care of nesting framesets as needed; if you use the frame-splitting tools in Dreamweaver, you don’t need to worry about thedetails of which frames are nested and which are not.There are two ways to nest framesets in HTML: the inner frameset can be defined either in the same file as the outer frameset, or in a separate fileof its own. Each predefined frameset in Dreamweaver defines all of its framesets in the same file.Both kinds of nesting produce the same visual results; it’s not easy to tell, without looking at the code, which kind of nesting is being used. Themost likely situation in which an external frameset file would be used in Dreamweaver is when you use the Open in Frame command to open aframeset file inside a frame; doing this may result in problems with setting targets for links. It’s generally simplest to keep all framesets defined in asingle file.Work with framesets in the Document windowDreamweaver enables you to view and edit all of the documents associated with a set of frames in one Document window. This approach enablesyou to see approximately how the framed pages will appear in a browser as you edit them. However, some aspects of this approach can beconfusing until you get used to them. In particular, each frame displays a separate HTML document. Even if the documents are empty, you mustsave them all before you can preview them (because the frameset can be accurately previewed only if it contains the URL of a document todisplay in each frame).To ensure that your frameset appears correctly in browsers, follow these general steps:Create your frameset and specify a document to appear in each frame.Save every file that’s going to appear in a frame. Remember that each frame displays a separate HTML document, and youmust save each document, along with the frameset file.Set the properties for each frame and for the frameset (including naming each frame, setting scrolling and non-scrollingSet the Target property in the Property inspector for all your links so that the linked content appears in the correct area.Create frames and framesetsThere are two ways to create a frameset in Dreamweaver: You can select from several predefined framesets or you can design it yourself.Choosing a predefined frameset sets up all the framesets and frames needed to create the layout and is the easiest way to create a frames-basedlayout quickly. You can insert a predefined frameset only in the Document window’s Design view.You can also design your own frameset in Dreamweaver by adding “splitters” to the Document window.Before creating a frameset or working with frames, make the frame borders visible in the Document window’s Design view by selectingView� Visual Aids� Frame Borders.
207
To the top
Create a predefined frameset and display an existing document in a frame
Place the insertion point in a document and do one of the following:
Choose Insert� HTML� Frames and select a predefined frameset.
In the Layout category of the Insert panel, click the drop-down arrow on the Frames button and select a predefinedThe frameset icons provide a visual representation of each frameset as applied to the current document. The blue area ofa frameset icon represents the current document, and the white areas represent frames that will display other documents.If you have set up Dreamweaver to prompt you for frame accessibility attributes, select a frame from the pop-up menu, enter aname for the frame, and click OK. (For visitors who use screen readers, the screen reader will read this name when itencounters the frame in a page.)Note: If you click OK without entering a new name, Dreamweaver gives the frame a name that corresponds to its position(left frame, right frame, and so on) in the frameset.Note: If you press Cancel, the frameset appears in the document, but Dreamweaver does not associate accessibility tags orattributes with it.Select Window� Frames to view a diagram of the frames you are naming.Create an empty predefined framesetSelect File� New.In the New Document dialog box, select the Page from Sample category.Select the Frameset folder in the Sample Folder column.Select a frameset from the Sample Page column and click Create.If you have activated the frame accessibility attributes in Preferences, the Frame Tag Accessibility Attributes dialog boxappears; complete the dialog box for each frame and click OK.Note: If you press Cancel, the frameset appears in the document, but Dreamweaver does not associate accessibility tags orattributes with it.Create a frameset
Select Modify� Frameset, then select a splitting item (such as Split Frame Left or Split Frame Right) from the submenu.Dreamweaver splits the window into frames. If you had an existing document open, it appears in one of the frames.Split a frame into smaller frames
To split the frame where the insertion point is, select a splitting item from the Modify� Frameset submenu.
To split a frame or set of frames vertically or horizontally, drag a frame border from the edge into the middle of the Design
To split a frame using a frame border that isn’t at the edge of the Design view, Altdrag (Windows) or Option-drag (Macintosh)a frame border.
To divide a frame into four frames, drag a frame border from one of the corners of the Design view into the middle of a frame.To create three frames, start with two frames, then split one of them. It’s not easy to merge two adjacent frames withoutediting the frameset code, so changing four frames into three frames is harder than changing two frames into three frames.Delete a frame
Drag a frame border off the page or to a border of the parent frame.If there’s unsaved content in a document in a frame that’s being removed, Dreamweaver prompts you to save the document.Note: You can’t remove a frameset entirely by dragging borders. To remove a frameset, close the Document window that displays it. If theframeset file has been saved, delete the file.Resize a frame
To set approximate sizes for frames, drag frame borders in the Document window’s Design view.
To specify exact sizes, and to specify how much space the browser allocates to a row or column of frames when the browserwindow size doesn’t allow the frames to display at full size, use the Property inspector.Select frames and framesetsTo make changes to the properties of a frame or frameset, begin by selecting the frame or frameset you want to change. You can select a frameor frameset either in the Document window or by using the Frames panel.The Frames panel provides a visual representation of the frames within a frameset. It shows the hierarchy of the frameset structure in a way thatmay not be apparent in the Document window. In the Frames panel, a very thick border surrounds each frameset; each frame is surrounded by a
208
To the top
thin gray line and is identified by a frame name.
In the Document window’s Design view, when a frame is selected, its borders are outlined with a dotted line; when a frameset is selected, all theborders of the frames within the frameset are outlined with a light dotted line.Note: Placing the insertion point in a document that’s displayed in a frame is not the same as selecting a frame. There are various operations(such as setting frame properties) for which you must select a frame.Select a frame or frameset in the Frames panelSelect Window� Frames.In the Frames panel:
To select a frame, click the frame. (A selection outline appears around the frame in both the Frames panel and theDocument window’s Design view.)
To select a frameset, click the border that surrounds the frameset.Select a frame or frameset in the Document window
To select a frame, Shift-Altclick (Windows) or Shift-Option-click (Macintosh) inside a frame in Design view.
To select a frameset, click one of the frameset’s internal frame borders in Design view. (Frame borders must be visible to dothis; select View� Visual Aids� Frame Borders to make frame borders visible if they aren’t.)Note: It’s generally easier to select framesets in the Frames panel than in the Document window. For more information, seethe above topics.Select a different frame or frameset
To select the next or previous frame or frameset at the same hierarchical level as the current selection, press Alt+Left Arrow orAlt+Right Arrow (Windows), or Command+Left Arrow or Command+Right Arrow (Macintosh). Using these keys, you can cyclethrough frames and framesets in the order in which they’re defined in the frameset file.
To select the parent frameset (the frameset that contains the current selection), press Alt+Up Arrow (Windows) orCommand+Up Arrow (Macintosh).
To select the first child frame or frameset of the currently selected frameset (that is, first in the order in which they’re defined inthe frameset file), press Alt+Down Arrow (Windows) or Command+Down Arrow (Macintosh).Open a document in a frameYou can specify the initial content of a frame by either inserting new content into an empty document in a frame, or opening an existing documentin a frame.Place the insertion point in a frame.
209
To the topTo the top
Select File� Open in Frame.
Select a document to open in the frame, and click OK (Windows) or Choose (Macintosh).(Optional) To make this document the default document to display in the frame when the frameset is opened in a browser,save the frameset.Save frame and frameset filesBefore you can preview a frameset in a browser, you must save the frameset file and all of the documents that will display in the frames. You cansave each frameset file and framed document individually, or you can save the frameset file and all documents appearing in frames at once.Note: When you use visual tools in Dreamweaver to create a set of frames, each new document that appears in a frame is given a defaultfilename. For example, the first frameset file is named UntitledFrameset1, while the first document in a frame is named UntitledFrameSave a frameset file
Select the frameset in the Frames panel or the Document window.
To save the frameset file, select File� Save Frameset.
To save the frameset file as a new file, select File� Save Frameset As.Note: If the frameset file has not previously been saved, these two commands are equivalent.Save a document that appears in a frame
Click in the frame, then select File� Save Frame or File� Save Frame As.Save all files associated with a set of frames
Select File� Save All Frames.This saves all open documents in the frameset, including the frameset file and all framed documents. If the frameset file has not yet been saved, aheavy border appears around the frameset (or the unsaved frame) in the Design view, and you can select a filename.Note: If you used File� Open in Frame to open a document in a frame, then when you save the frameset, the document you opened in the framebecomes the default document to be displayed in that frame. If you don’t want that document to be the default, don’t save the frameset file.View and set frame properties and attributesUse the Property inspector to view and set most frame properties, including borders, margins, and whether scroll bars appear in frames. Setting aframe property overrides the setting for that property in a frameset.You may also want to set some frame attributes, such as the title attribute (which is not the same as the name attribute), to improve accessibility.You can enable the accessibility authoring option for frames to set attributes when you create frames, or you can set attributes after inserting aframe. To edit accessibility attributes for a frame, use the Tag inspector to edit the HTML code directly.View or set frame propertiesSelect a frame by doing one of the following:
click (Windows) or Shift-Option-click (Macintosh) a frame in the Document window’s Design view.
Click a frame in the Frames panel (Window� Frames).In the Property inspector (Window� Properties), click the expander arrow in the lower-right corner to see all of the frameSet the frame Property inspector options.Frame NameThe name used by a link’s attribute or by a script to refer to the frame. A frame name must be a singleword; underscores (_) are allowed, but hyphens (), periods (.), and spaces are not. A frame name must start with a letter (asopposed to a numeral). Frame names are case-sensitive. Don’t use terms that are reserved words in JavaScript (such as or navigator) as frame names.To make a link change the contents of another frame, you must name the target frame. To make it easier to create cross-frame links later, name each of your frames when you create it.Specifies the source document to display in the frame. Click the folder icon to browse to and select a file.Specifies whether scroll bars appear in the frame. Setting this option to Default doesn’t set a value for thecorresponding attribute, allowing each browser to use its default value. Most browsers default to Auto, meaning that scroll barsappear only when there is not enough room in a browser window to display the full contents of the current frame.No ResizePrevents visitors from dragging the frame borders to resize the frame in a browser.Note: You can always resize frames in Dreamweaver; this option applies only to visitors viewing the frames in a browser.Shows or hides the borders of the current frame when it’s viewed in a browser. Selecting a Borders option for aframe overrides the frameset’s border settings.
210
To the topBorder options are Yes (show borders), No (hide borders), and Default; most browsers default to showing borders, unless theparent frameset has Borders set to No. A border is hidden only when all frames that share the border have Borders set to No,or when the parent frameset’s Borders property is set to No and the frames sharing the border have Borders set to Default.Border ColorSets a border color for all of the frame’s borders. This color applies to all borders that touch the frame, andoverrides the specified border color of the frameset.Margin WidthSets the width in pixels of the left and right margins (the space between the frame borders and the content).Margin HeightSets the height in pixels of the top and bottom margins (the space between the frame borders and theNote: Setting the margin width and height for a frame is not the same as setting margins in the Modify� Page Propertiesdialog box.To change the background color of a frame, set the background color of the document in the frame in page properties.Set accessibility values for a frameIn the Frames panel (Window� Frames), select a frame by placing the insertion point in one of the frames.Select Modify� Edit Tagram;set; Select Style Sheet/Accessibility from the category list on the left, enter values, and click OK.Edit accessibility values for a frameDisplay Code view or Code and Design views for your document, if you’re currently in Design view.In the Frames panel (Windowram;set; Frames), select a frame by placing the insertion point in one of the frames. Dreamweaverhighlights the frame tag in the code.Right-click (Windows) or Controlclick (Macintosh) in the code, and then select Edit Tag.In the tag editor, make your changes and click OK.Change the background color of a document in a framePlace the insertion point in the frame.Select Modifyram;set; Page Properties.In the Page Properties dialog box, click the Background color menu, and select a color.View and set frameset propertiesUse the Property inspector to view and set most frameset properties, including the frameset title, borders, and frame sizes.Set a title for a frameset documentSelect a frameset by doing one of the following:
Click a border between two frames in the frameset in the Document window’s Design view.
Click the border that surrounds a frameset in the Frames panel (Window� Frames).In the Title box of the Document toolbar, type a name for the frameset document.When a visitor views the frameset in a browser, the title appears in the browser’s title bar.View or set frameset propertiesSelect a frameset by doing one of the following:
Click a border between two frames in the frameset in the Document window’s Design view.
Click the border that surrounds a frameset in the Frames panel (Window� Frames).In the Property inspector (Window� Properties), click the expander arrow in the lower-right corner and set the framesetDetermines whether borders should appear around frames when the document is viewed in a browser. To displayborders, select Yes; to prevent the browser from displaying borders, select No. To allow the browser to determine how bordersare displayed, select Default.Border WidthSpecifies a width for all the borders in the frameset.Border ColorSets a color for the borders. Use the color picker to select a color, or type the hexadecimal value for a color.RowCol SelectionSets frame sizes for rows and columns of the selected frameset, click a tab on the left side or top of theRowCol Selection area; then enter a height or width in the Value text box.
211
To the topTo the top
To specify how much space the browser allocates to each frame, select from the following choices in the Units menu:Sets the size of the selected column or row to an absolute value. Choose this option for a frame that should always bethe same size, such as a navigation bar. Frames with sizes specified in pixels are allocated space before frames with sizesspecified as percent or relative. The most common approach to frame sizes is to set a left-side frame to a fixed pixel width andto set a right-size frame to relative, which enables the right frame to stretch to take up all the remaining space after the pixelwidth is allocated.Note: If all of your widths are specified in pixels, and a visitor views the frameset in a browser that’s too wide or too narrowfor the width you specified, then the frames stretch or shrink proportionately to fill the available space. The same applies toheights specified in pixels. Thus, it’s generally a good idea to specify at least one width and height as relative.Specifies that the selected column or row should be a percentage of the total width or height of its frameset. Frameswith units set to Percent are allocated space after frames with units set to Pixels, but before frames with units set to Relative.Specifies that the selected column or row be allocated the rest of the available space after Pixels and Percentframes have had space allocated; that remaining space is divided proportionally among the frames with sizes set to Relative.Note: When you select Relative from the Units menu, any number you’ve entered in the Value field disappears; if you want tospecify a number, you must reenter it. If there’s only one row or column set to Relative, though, there’s no need to enter anumber, since that row or column receives all the remaining space after the other rows and columns have space allocated. Tobe certain of full cross-browser compatibility, you can enter 1 in the Value field; that’s equivalent to entering no value.Control frame content with linksTo use a link in one frame to open a document in another frame, you must set a target for the link. The attribute of a link specifies the frameor window in which the linked content opens.For example, if your navigation bar is in the left frame, and you want the linked material to appear in the main content frame on the right, you mustspecify the name of the main content frame as the target for each of the navigation bar links. When a visitor clicks a navigation link, the specifiedcontent opens in the main frame.In Design view, select text or an object.In the Link box in the Property inspector (Window� Properties), do one of the following:
Click the folder icon and select the file to link to.
Drag the Point to File icon to the Files panel and select the file to link to.In the Target menu in the Property inspector, select the frame or window in which the linked document should appear:
opens the linked document in a new browser window, leaving the current window untouched.
opens the linked document in the parent frameset of the frame the link appears in, replacing the entire frameset.
opens the link in the current frame, replacing the content in that frame.
opens the linked document in the current browser window, replacing all frames.Frame names also appear in this menu. Select a named frame to open the linked document in that frame.Note: Frame names appear only when you’re editing a document within a frameset. When you edit a document in its ownDocument window, frame names do not appear in the Target popup menu. If you’re editing a document outside of theframeset, you can type the target frame’s name in the Target text box.If you’re linking to a page outside of your site, always use or to ensure that the pagedoesn’t appear to be part of your site.Provide content for browsers without frame supportDreamweaver lets you specify content to display in text-based browsers and in older graphical browsers that do not support frames. This content isstored in the frameset file, wrapped in a tag. When a browser that doesn’t support frames loads the frameset file, the browser displaysonly the content enclosed by the Note: Content in the area should be more than just a note saying “You should upgrade to a browser that can handle frames.” Somesite visitors use systems that don’t allow them to view frames.Select Modify� Frameset� Edit NoFrames Content.Dreamweaver clears the Design view, and the words “NoFrames Content” appear at the top of the Design view.
212

To the topDo one of the following:
In the Document window, type or insert the content just as you would for an ordinary document.
Select Window� Code Inspector, place the insertion point between the tags that appear inside the then type the HTML code for the content.Select Modify� Frameset� Edit NoFrames Content again to return to the normal view of the frameset document.Using JavaScript behaviors with framesThere are several JavaScript behaviors and navigation-related commands that are particularly appropriate for use with frames:Set Text Of FrameReplaces the content and formatting of a given frame with the content you specify. The content can include any valid HTML.Use this action to dynamically display information in a frame.Go To URLOpens a new page in the current window or in the specified frame. This action is particularly useful for changing the contents of two ormore frames with one click.Insert Jump MenuSets up a menu list of links that open files in a browser window when clicked. You can also target a particular window or framein which the document opens.For more information, see Adding JavaScript behaviors.More Help topics
Legal Notices | Online Privacy Policy
213
Using visual aids for layout
To the topTo the topSet rulersSet layout guidesUsing guides with templatesUse the layout gridUse a tracing imageSet rulersRulers help you measure, organize, and plan your layout. They can appear on the left and top borders of the page, marked in pixels, inches, or
To toggle rulers on and off, select View� Rulers� Show.
To change the origin, drag the ruler-origin icon
(at the upper-left corner of the Design view of the Document window)anywhere on the page.
To reset the origin to its default position, select View� Rulers� Reset Origin.
To change the unit of measure, select View� Rulers, and then select Pixels, Inches, or Centimeters.Set layout guidesGuides are lines that you drag onto the document from the rulers. They help you place and align objects more precisely. You can also use guidesto measure the size of page elements, or emulate the (visible areas) of web browsers.To help you align elements, you can snap elements to guides, and snap guides to elements. (Elements must be absolutely positioned in order forthe snap feature to work.) You can also lock guides to prevent them from being accidentally moved by another user.Create a horizontal or vertical guideDrag from the corresponding ruler.Position the guide in the Document window and release the mouse button (reposition the guide by dragging it again).Note: By default, guides are recorded as absolute pixel measurements from the top or left side of the document, and areshown relative to the origin of the ruler. To record the guide as a percentage, press the Shift key while you create or move theShow or hide guides
Select View� Guides� Show Guides.Snap elements to guides
To snap elements to guides, select View� Guides� Snap to Guides.
To snap guides to elements, select View� Guides� Guides Snap to Elements.Note: When you resize elements, such as absolutely-positioned elements (AP elements), tables, and images, the resizedelements snap to guides.Lock or unlock all guides
Select View� Guides� Lock Guides.View and move a guide to a specific positionHold the mouse pointer over the guide to view its position.Double-click the guide.Enter the new position in the Move Guide dialog box and click OK.View the distance between guides
Press Control (Windows) or Command (Macintosh) and hold the mouse pointer anywhere between the two guides.Note: The unit of measure is the same as the unit of measure used for the rulers.Emulate the fold (visible area) of a web browser
214
To the topTo the topTo the top
Select View� Guides, and then select a preset browser size from the menu.
Remove a guide
Drag the guide off the document.Change guide settings
Select View� Guides� Edit Guides, set the following options, and click OK.Guide colorSpecifies the color of the guide lines. Click the color swatch and select a color from the color picker, or type a hexadecimal number inthe text box.Distance ColorSpecifies the color of the lines that appear as distance indicators when you hold the mouse pointer between guides. Click thecolor swatch and select a color from the color picker, or type a hexadecimal number in the text box.Show GuidesMakes guides visible in Design view.Snap to GuidesMakes page elements snap to guides as you move elements around the page.Lock GuidesLocks guides in place.Guides Snap to ElementsSnaps guides to elements on the page as you drag guides.Clear AllClears all guides from the page.Using guides with templatesWhen guides are added to a Dreamweaver template, all instances of the template inherit the guides. Guides in template instances, however, aretreated as editable regions, so users can modify them. Modified guides in template instances are restored to their original location whenever theinstance is updated with the master template.You can also add your own guides to instances of a template. Guides added in this manner are not overwritten when the template instance isupdated with the master template.Use the layout gridThe grid displays a system of horizontal and vertical lines in the Document window. It is useful for placing objects precisely. You can makeabsolutely-positioned page elements automatically snap to the grid as you move them, and change the grid or control the snapping behavior byspecifying grid settings. Snapping works whether or not the grid is visible.Show or hide the grid
Select View� Grid� Show Grid.Enable or disable snapping
Select View� Grid� Snap to Grid.Change grid settingsSelect View� Grid� Grid Settings.Set the options and click OK to apply the changes.Specifies the color of the grid lines. Click the color swatch and select a color from the color picker, or type ahexadecimal number in the text box.Show GridMakes the grid visible in Design view.Snap to GridMakes page elements snap to the lines of the grid.Controls how far apart the grid lines are. Enter a number and select Pixels, Inches, or Centimeters from the menu.Specifies whether the grid lines appear as lines or dots.Note: If Show Grid is not selected, the grid does not appear in the document and no changes are visible.Use a tracing imageYou can use a tracing image as a guide to recreate a page design that was created in a graphics application such as Adobe Freehand orA tracing image is a JPEG, GIF, or PNG image that is placed in the background of the Document window. You can hide the image, set its opacity,and change its position.The tracing image is visible only in Dreamweaver; it is not visible when you view the page in a browser. When the tracing image is visible, thepage’s real background image and color are not visible in the Document window; however, the background image and color will be visible whenthe page is viewed in a browser.
215

Place a tracing image in the Document window
Do one of the following:
Select View� Tracing Image� Load.
Select Modify� Page Properties, then click Browse (next to the Tracing Image text box).In the Select Image Source dialog box, select an image file and click OK.In the Page Properties dialog box, specify the transparency for the image by dragging the Image Transparency slider, thenclick OK.To switch to another tracing image or change the transparency of the current tracing image at any time, select Modify� PageShow or hide the tracing image
Select View� Tracing Image� Show.Change the position of a tracing image
Select View� Tracing Image� Adjust Position.
To precisely specify the position of the tracing image, enter coordinate values in the X and Y text boxes.
To move the image 1 pixel at a time, use the arrow keys.
To move the image 5 pixels at a time, press Shift and an arrow key.Reset the position of the tracing image
Select View� Tracing Image� Reset Position.The tracing image returns to the upper-left corner of the Document window (0,0).Align the tracing image to a selected elementSelect an element in the Document window.Select View� Tracing Image� Align with Selection.The upper-left corner of the tracing image is aligned with the upper-left corner of the selected element.More Help topics
Legal Notices | Online Privacy Policy
216
Working with Spry widgets (general instructions)
To the topTo the topTo the topTo the topTo the topTo the topAbout Spry widgetsSpry widgets resources and tutorialsInsert a Spry widgetSelect a Spry widgetEdit a Spry widgetStyle a Spry widgetGet more widgetsChange the default Spry assets folderAbout Spry widgetsSpry widget is a page element that provides a richer user experience by enabling user interaction. A Spry widget comprises the following parts:Widget structureAn HTML code block that defines the structural composition of the widget.Widget behaviorJavaScript that controls how the widget responds to user-initiated events.Widget stylingCSS that specifies the appearance of the widget.The Spry framework supports a set of reusable widgets written in standard HTML, CSS, and JavaScript. You can easily insert these widgets—thecode is HTML and CSS at its simplest—and then style the widget. The behaviors in the framework include functionality that lets users show orhide content on the page, change the appearance (such as color) of the page, interact with menu items, and much more.Each widget in the Spry framework is associated with unique CSS and JavaScript files. The CSS file contains everything necessary for styling thewidget, and the JavaScript file gives the widget its functionality. When you insert a widget by using the Dreamweaver interface, Dreamweaverautomatically links these files to your page so that your widget contains functionality and styling.The CSS and JavaScript files associated with a given widget are named after the widget, so it’s easy for you to know which files correspond towhich widgets. (For example, the files associated with the Accordion widget are called SpryAccordion.css and SpryAccordion.js). When you inserta widget in a saved page, Dreamweaver creates a SpryAssets directory in your site, and saves the corresponding JavaScript and CSS files to thatSpry widgets resources and tutorialsThe following on-line resources provide more information on customizing Spry widgets.Spry widget samplesCustomizing Spry Menu Bars in DreamweaverSpry Validation widgets (video tutorial)Insert a Spry widget
Select Insert� Spry, and select the widget to insert.When you insert a widget, Dreamweaver automatically includes the necessary Spry JavaScript and CSS files in your site when you save the page.Note: You can also insert Spry widgets by using the Spry category in the Insert panel.Select a Spry widgetHold the mouse pointer over the widget until you see the widget’s blue tabbed outline.Click the widget’s tab at the upper-left corner of the widget.Edit a Spry widget
Select the widget to edit and make your changes in the Property inspector (Window� Properties).For details on making changes to specific widgets, see the appropriate sections for each widget.
217

To the topTo the top
Style a Spry widget
Locate the appropriate CSS file for the widget in the SpryAssets folder of your site, and edit the CSS according to your preferences.For details on styling specific widgets, see the appropriate customization sections for each widget.You can also format a Spry widget by editing styles in the CSS panel, just as you would for any other styled element on the page.Get more widgetsThere are many more web widgets available than the Spry widgets that install with Dreamweaver. The Adobe Exchangeprovides web widgets thathave been developed by other creative professionals.
Choose Browse for Web Widgets from the Extend Dreamweaver menu
in the Application bar.For a video overview from the Dreamweaver engineering team about working with web widgets, see Change the default Spry assets folderWhen you insert a Spry widget, data set, or effect in a saved page, Dreamweaver creates a SpryAssets directory in your site, and saves thecorresponding JavaScript and CSS files to that location. You can change the default location where Dreamweaver saves Spry assets if you preferto save them somewhere else.Select Sites� Manage Sites.Select your site in the Manage Sites dialog box and click Edit.In the Site Setup dialog box, expand Advanced Settings and select the Spry category.Enter a path to the folder you want to use for Spry assets and click OK. You can also click the folder icon to browse to aMore Help topicsUnderstanding Cascading Style Sheets
Legal Notices | Online Privacy Policy
218
Working with div tags
To the topInsert and edit div tagsCSS layout blocksWorking with AP elements(Creative Cloud users only): Seven new semantic tags are available when you select Insert� Layout. The new tags are : Article, Aside, HGroup,Navigation, Section, Header, and Footer. For more information, see Insert HTML5 semantic elements from the Insert panelInsert and edit div tagsYou can create page layouts by manually inserting tags and applying CSS positioning styles to them. A tag is a tag that defines logicaldivisions within the content of a web page. You can use tags to center blocks of content, create column effects, create different areas of color,and much more.If you’re unfamiliar using tags and Cascading Style Sheets (CSS) to create web pages, you can create a CSS layout based on one of the pre-designed layouts that come with Dreamweaver. If you’re uncomfortable working with CSS, but are familiar with using tables, you can also try usingNote: Dreamweaver treats all div tags with an absolute position as AP elements (absolutely positioned elements), even if you didn’t create thosediv tags using the AP Div drawing tool.Insert div tagsYou can use tags to create CSS layout blocks and position them in your document. This is useful if you have an existing CSS style sheet withpositioning styles attached to your document. Dreamweaver enables you to quickly insert a div tag and apply existing styles to it.In the Document window, place the insertion point where you want the tag to appear.Do one of the following:
Select Insert� Layout Objects� Div Tag.
In the Layout category of the Insert panel, click the Insert Div Tag button
Set any of the following options:Lets you select the location of the tag and the tag name if it is not a new tag.Displays the class style currently applied to the tag. If you attached a style sheet, classes defined in that style sheetappear in the list. Use this popup menu to select the style you want to apply to the tag.Lets you change the name used to identify the tag. If you attached a style sheet, IDs defined in that style sheet appearin the list. IDs for blocks that are already in your document are not listed.Note: Dreamweaver alerts you if you enter the same ID as another tag in your document.New CSS RuleOpens the New CSS Rule dialog box.Click OK.The div tag appears as a box in your document with placeholder text. When you move the pointer over the edge of the box,Dreamweaver highlights it.If the tag is absolutely positioned, it becomes an AP element. (You can edit tags that aren’t absolutely positioned.)Edit div tagsAfter you insert a tag, you can manipulate it or add content to it.Note: Div tags that are absolutely positioned become AP elements.When you assign borders to tags, or when you have CSS Layout Outlines selected, they have visible borders. (CSS Layout Outlines isselected by default in the View� Visual Aids menu.) When you move the pointer over a tag, Dreamweaver highlights the tag. You can changethe highlight color or disable highlighting.When you select a tag, you can view and edit rules for it in the CSS Styles panel. You can also add content to the tag by simply placingyour insertion point inside the tag, and then adding content just as you would add content to a page.View and edit rules applied to a div tagDo one of the following to select the
219
To the top
Click the border of the
Look for the highlighting to see the border.
Click inside the tag, and press Control+A (Windows) or Command+A (Macintosh) twice.
Click inside the tag, then select the tag from the tag selector at the bottom of the Document window.Select Window� CSS Styles to open the CSS Styles panel if it is not already open.Rules applied to the tag appear in the panel.Make edits as necessary.Place the insertion point in a div tag to add content
Click anywhere inside the tag’s borders.Change the placeholder text in a div tag
Select the text, and then type over it or press Delete.Note: You can add content to the tag just as you would add content to a page.Change the highlight color of div tagsWhen you move the pointer over the edge of a tag in Design view, Dreamweaver highlights the borders of the tag. You can enable or disablehighlighting as necessary, or change the highlight color in the Preferences dialog box.Select Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh).Select Highlighting from the category list on the left.Make either of the following changes and click OK:
To change the highlighting color for tags, click the Mouse-Over color box, and then select a highlight color using thecolor picker (or enter the hexadecimal value for the highlight color in the text box).
To enable or disable highlighting for tags, select or deselect the Show checkbox for Mouse-Over.Note: These options affect all objects, such as tables, that Dreamweaver highlights when you move the pointer overCSS layout blocksVisualizing CSS layout blocksYou can visualize CSS layout blocks while you work in Design view. A CSS layout block is an HTML page element that you can position anywhereon your page. More specifically, a CSS layout block is either a tag without , or any other page element that includes the, or CSS declarations. Following are a few examples of elements that are considered CSS layoutblocks in Dreamweaver:
A div tag
An image with an absolute or relative position assigned to it
An a tag with the style assigned to it
A paragraph with an absolute or relative position assigned to itNote: For purposes of visual rendering, CSS layout blocks do not include inline elements (that is, elements whose code falls within a line of text),or simple block elements like paragraphs.Dreamweaver provides a number of visual aids for viewing CSS layout blocks. For example, you can enable outlines, backgrounds, and the boxmodel for CSS layout blocks while you design. You can also view tooltips that display properties for a selected CSS layout block when you floatthe 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 OutlinesDisplays the outlines of all CSS layout blocks on the page.CSS Layout BackgroundsDisplays temporarily assigned background colors for individual CSS layout blocks, and hides any other backgroundcolors 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 distinctbackground color. (Dreamweaver selects the colors using an algorithmic process—there is no way for you to assign the colors yourself.) Theassigned colors are visually distinctive, and are designed to help you differentiate between CSS layout blocks.CSS Layout Box ModelDisplays the box model (that is, padding and margins) of the selected CSS layout block.View CSS layout blocksYou can enable or disable CSS layout block visual aids as necessary.
220
To the topView 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 elementsYou can use a Design-time style sheet to display the backgrounds, borders, or box model for elements that aren’t normally considered CSS layoutblocks. To do so, you must first create a Design-time style sheet that assigns the 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 inthe Basic page column, and clicking Create.In the new style sheet, create rules that assign the attribute to the page elements you want to display as CSSlayout blocks.For example, if you wanted to display a background color for paragraphs and list items, you could create a style sheet with thefollowing rules:p{ display:block; li{ display:block; Save the file.In Design view, open the page to which you want to attach the new styles.Select Format� CSS Styles� Design-time.In the Design-time Style Sheets dialog box, click the plus (+) button above the Show Only at Design Time text box, select thestyle sheet you just created, and click OK.Click OK to close the Design-time Style Sheets dialog box.The style sheet is attached to your document. If you had created a style sheet using the previous example, all paragraphs andlist items would be formatted with the attribute, thereby allowing you to enable or disable CSS layout block visualaids for paragraphs and list items.Working with AP elementsAbout AP elements in DreamweaverAn AP element (absolutely positioned element) is an HTML page element—specifically, a tag, or any other tag—that has an absolute positionassigned to it. AP elements can contain text, images, or any other content that you can place in the body of an HTML document.With Dreamweaver, you can use AP elements to lay out your page. You can place AP elements in front of and behind each other, hide some APelements while showing others, and move AP elements across the screen. You can place a background image in one AP element, then place asecond AP element, containing text with a transparent background, in front of that.AP elements will usually be absolutely positioned div tags. (These are the kinds of AP elements Dreamweaver inserts by default.) But remember,you can classify any HTML element (for example, an image) as an AP element by assigning an absolute position to it. All AP elements (not justabsolutely positioned div tags) appear in the AP elements panel.HTML code for AP Div elementsDreamweaver creates AP elements using the tag. When you draw an AP element using the Draw AP Div tool, Dreamweaver inserts a in the document and assigns the div an id value (by default apDiv1 for the first div you draw, apDiv2 for the second div you draw, and so on).Later, you can rename the AP Div to anything you want using the AP elements panel or the Property inspector. Dreamweaver also usesembedded CSS in the head of the document to position the AP Div, and to assign the AP Div its exact dimensions.The following is sample HTML code for an AP Div:&#xhead; http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&#xmeta;&#x-710; /
221
&#xtitl; AP Div&#x/tit;&#xle00; Page
&#xstyl;-43; type="text/css" !-- #apDiv1 { position:absolute; left:62px; top:67px; width:421px; height:188px; z-index:1; &#x/sty;&#xle00; &#x/hea;퀀 ody; iv-;⤀ id="apDiv1" &#x/div; &#x/bod;&#xy000; You can change properties for AP Divs (or any AP element) on your page, including x and y coordinates, zindex (also called the stacking order),and visibility.Insert an AP DivDreamweaver lets you easily create and position AP Divs on your page. You can also create nested AP Divs.When you insert an AP Div, Dreamweaver displays an outline of the AP Div in Design view by default, and highlights the block when you move thepointer over it. You can disable the visual aid that shows AP Div (or any AP element) outlines by disabling both AP Element Outlines and CSSLayout Outlines in the View&#x/bod;&#xy000; Visual Aids menu. You can also enable backgrounds and the box model for AP elements as a visual aid while youAfter you create an AP Div, you can add content to it by simply placing your insertion point in the AP Div, and then adding content just as youwould add content to a page.Draw a single AP Div or multiple AP Divs consecutivelyIn the Layout category of the Insert panel, click the Draw AP Div button
In the Document window’s Design view, do one of the following:
Drag to draw a single AP Div.
drag (Windows) or Command-drag (Macintosh) to draw multiple AP Divs consecutively.You can continue to draw new AP Divs as long as you do not release the Control or Command key.Insert an AP Div at a particular place in the document
Place the insertion point in the Document window, and then select Insert� Layout Objects� AP Div.Note: This procedure places the tag for the AP Div wherever you clicked in the Document window. The visual rendering of the AP Div may thusaffect other page elements (like text) that surround it.Place the insertion point in an AP Div
Click anywhere inside the AP Div’s borders.The AP Div’s borders are highlighted, and the selection handle appears, but the AP Div itself is not selected.Show AP Div borders
Select View� Visual Aids and select either AP Div Outlines or CSS Layout Outlines.Note: Selecting both options simultaneously has the same effect.Hide AP Div borders
Select View� Visual Aids and deselect both AP Div Outlines and CSS Layout Outlines.Work with nested AP DivsA nested AP Div is an AP Div that has code contained within the tags of another AP Div. For example, the following code shows two AP Divs thatare nested, and two AP Divs that are nested: iv-;⤀&#x/div; id="apDiv1" iv-;⤀&#x/div; id="apDiv2"
222
iv-;⤀ id="apDiv3"
iv-;⤀&#x/div; id="apDiv4" The graphical depiction for either set of AP Divs might look as follows:
In the first set of div tags, one div is sitting on top of the other on the page. In the second set, the apDiv4 div is actually inside of the apDiv3 div.(You can change AP Div stacking order in the AP Elements panel.)Nesting is often used to group AP Divs together. A nested AP Div moves with its parent AP Div and can be set to inherit visibility from its parent.You can enable the Nesting option to automatically nest when you draw an AP Div starting inside another AP Div. To draw inside or over anotherAP Div, you must also have the Prevent Overlaps option deselected.Draw a nested AP DivMake sure Prevent Overlaps is deselected in the AP Elements panel (Window� AP Elements).In the Layout category of the Insert panel, click the Draw AP Div button
In the Document window’s Design view, drag to draw an AP Div inside an existing AP Div.If Nesting is disabled in AP Elements preferences, Altdrag (Windows) or Option-drag (Macintosh) to nest an AP Div inside anexisting AP Div.Nested AP Divs may appear differently in different browsers. When you create nested AP Divs, check their appearance invarious browsers frequently during the design process.Insert a nested AP DivMake sure Prevent Overlaps is deselected.Place the insertion point inside an existing AP Div in the Document window’s Design view, then select Insert� LayoutObjects� AP Div.Nest AP Divs automatically when you draw an AP Div inside another AP Div
Select the Nesting option in the AP Elements preferences.View or set AP element preferencesUse the AP Elements category in the Preferences dialog box to specify the default settings for new AP elements you create.Select Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh).Select AP elements from the Category list on the left and specify any of the following preferences, and then click OK.Determines whether AP elements are visible by default. The options are default, inherit, visible, and hidden.Width and HeightSpecify a default width and height (in pixels) for AP elements you create using Insert� LayoutObjects� AP Div.Background ColorSpecifies a default background color. Select a color from the color picker.Background ImageSpecifies a default background image. Click Browse to locate the image file on your computer.Nesting: Nest When Created Within An AP DivSpecifies whether an AP Div that you draw starting from a point within theboundaries of an existing AP Div should be a nested AP Div. Hold down Alt (Windows) or Option (Macintosh) to temporarilychange this setting while you’re drawing an AP Div.View or set properties for a single AP elementWhen you select an AP element, the Property inspector displays AP element properties.Select an AP element.In the Property inspector (Window� Properties), click the expander arrow in the lower-right corner, if it isn’t already expanded,
223
to see all properties.
Set any of the following options:CSS-P ElementSpecifies an ID for the selected AP element. The ID identifies the AP element in the AP Elements panel andin JavaScript code.Use only standard alphanumeric characters; do not use special characters such as spaces, hyphens, slashes, or periods.Every AP element must have its own unique ID.Note: The CSS-P Property inspector presents the same options for relatively-positioned elements.L and T (left and top)Specify the position of the AP element’s upper-left corner relative to the upper-left corner of the page,or of the parent AP element if nested.W and HSpecify the width and height of the AP element.Note: If the content of the AP element exceeds the specified size, the bottom edge of the AP element (as it appears in theDesign view in Dreamweaver) stretches to accommodate the content. (The bottom edge doesn’t stretch when the AP elementappears in a browser, unless the Overflow property is set to Visible.)The default unit for position and size is pixels (px). You can instead specify the following units: pc (picas), pt (points), in(inches), mm (millimeters), cm (centimeters), or % (percentage of the parent AP element’s corresponding value). Theabbreviations must follow the value without a space: for example, 3mm indicates 3 millimeters.Determines the zindex, or stacking order, of the AP element.In a browser, higher-numbered AP elements appear in front of lower-numbered AP elements. Values can be positive ornegative. It’s easier to change the stacking order of AP elements using the AP Elements panel than to enter specific Specifies whether the AP element is initially visible or not. Select from the following options:
Default does not specify a visibility property. When no visibility is specified, most browsers default to Inherit.
Inherit uses the visibility property of the AP element’s parent.
Visible displays the AP element contents, regardless of the parent’s value.
Hidden hides the AP element contents, regardless of the parent’s value.Use a scripting language, such as JavaScript, to control the visibility property and dynamically display AP elementBg ImageSpecifies a background image for the AP element.Click the folder icon to browse to and select an image file.Bg ColorSpecifies a background color for the AP element.Leave this option blank to specify a transparent background.Specifies the CSS class used to style the AP element.Controls how AP elements appear in a browser when the content exceeds the AP element’s specified size.Visible indicates that the extra content appears in the AP element; effectively, the AP element stretches to accommodate it.Hidden specifies that extra content is not displayed in the browser. Scroll specifies that the browser should add scroll bars tothe AP element whether they’re needed or not. Auto causes the browser to display scroll bars for the AP element only whenneeded (that is, when the AP element’s contents exceed its boundaries.)Note: The overflow option has uneven support across browsers.Defines the visible area of an AP element.Specify left, top, right, and bottom coordinates to define a rectangle in the coordinate space of the AP element (counting fromthe upper-left corner of the AP element). The AP element is “clipped” so that only the specified rectangle is visible. Forexample, to make an AP element’s contents invisible except for a 50pixel-wide, 75pixel-high visible rectangle at the upper-left corner of the AP element, set L to 0, T to 0, R to 50, and B to 75.Note: Although CSS specifies different semantics for clip, Dreamweaver interprets clip the way that most browsers do.If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.View or set properties for multiple AP elementsWhen you select two or more AP elements, the Property inspector displays text properties and a subset of the full AP element properties, allowingyou to modify several AP elements at once.
224
Select multiple AP elements
Hold down Shift while selecting AP elements.View and set properties for multiple AP elementsSelect multiple AP elements.In the Property inspector (Window� Properties), click the expander arrow in the lower-right corner, if it isn’t already expanded,to see all properties.
Set any of the following properties for multiple AP elements:L and T (left and top)Specify the position of the AP elements’ upper-left corners relative to the upper-left corner of the page,or of the parent AP element if nested.W and HSpecify the width and height of the AP elements.Note: If the content of any AP element exceeds the specified size, the bottom edge of the AP element (as it appears in theDesign view in Dreamweaver) stretches to accommodate the content. (The bottom edge doesn’t stretch when the AP elementappears in a browser, unless the Overflow property is set to Visible.)The default unit for position and size is pixels (px). You can instead specify the following units: pc (picas), pt (points), in(inches), mm (millimeters), cm (centimeters), or % (percentage of the parent AP element’s corresponding value). Theabbreviations must follow the value without a space: for example, 3mm indicates 3 millimeters.Specifies whether the AP elements are initially visible or not. Select from the following options:
Default does not specify a visibility property. When no visibility is specified, most browsers default to Inherit.
Inherit uses the visibility property of the AP elements’ parent.
Visible displays the AP elements’ contents, regardless of the parent’s value.
Hidden hides the AP element contents, regardless of the parent’s value.Use a scripting language, such as JavaScript, to control the visibility property and dynamically display AP elementSpecifies the HTML tag used to define the AP elements.Bg ImageSpecifies a background image for the AP elements.Click the folder icon to browse to and select an image file.Bg ColorSpecifies a background color for the AP elements. Leave this option blank to specify a transparent background.If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.AP Elements panel overviewYou use the AP Elements panel (Window� AP Elements) to manage the AP elements in your document. Use the AP Elements panel to preventoverlaps, to change the visibility of AP elements, to nest or stack AP elements, and to select one or more AP elements.Note: An AP element in Dreamweaver is an HTML page element—specifically, a tag, or any other tag—that has an absolute positionassigned to it. The AP Elements panel does not display relatively-positioned elements.AP elements are displayed as a list of names, in order of index; by default, the first created AP element (with a index of 1) appears at thebottom of the list, and the most recently created AP element appears at the top. You can, however, change the index of an AP element bychanging its place in the stacking order. For example, if you created eight AP elements and wanted to move the fourth AP element to the top, youcould assign it a higher index than the others.Select AP elementsYou can select one or more AP elements to manipulate them or change their properties.Select an AP element in the AP elements panel
In the AP elements panel (Window� AP elements), click the name of the AP element.Select an AP element in the Document window
Do one of the following:
Click an AP element’s selection handle.If the selection handle isn’t visible, click anywhere inside the AP element to make the handle visible.
225
Click an AP element’s border.
Shift-click (Windows) or Command-Shift-click (Macintosh) inside an AP element.
Click inside an AP element and press Control+A (Windows) or Command+A (Macintosh) to select the contents of the APelement. Press Control+A or Command+A again to select the AP element.
Click inside an AP element and select its tag in the tag selector.Select multiple AP elements
Do one of the following:
In the AP Elements panel (Window� AP Elements), Shift-click two or more AP element names.
In the Document window, Shift-click inside or on the border of two or more AP elements.Change the stacking order of AP elementsUse the Property inspector or the AP Elements panel to change the stacking order of AP elements. The AP element at the top of the AP Elementspanel list is at the top of the stacking order, and appears in front of the other AP elements.In HTML code, the stacking order, or index, of the AP elements determines the order in which they are drawn in a browser. The higher theindex of an AP element, the higher that AP element is in the stacking order. (For example, an element with a z-index of 4 will appear on top of anelement with a z-index of 3; 1 is always the lowest number in the stacking order.) You can change the index for each AP element using the APElements panel or Property inspector.Change the stacking order of AP elements using the AP Elements panelSelect Window� AP Elements to open the AP Elements panel.Double-click the z-index number next to the AP element whose z-index you want to change.Change the number and press Return/Enter.
Type a higher number to move the AP element up in the stacking order.
Type a lower number to move the AP element down in the stacking order.Change the stacking order of AP elements using the Property inspectorSelect Window� AP Elements to open the AP Elements panel to see the current stacking order.In the AP Elements panel or in the Document window, select the AP element whose z-index you want to change.In the Property inspector (Window� Properties), type a number in the ZIndex text box.
Type a higher number to move the AP element up in the stacking order.
Type a lower number to move the AP element down in the stacking order.Show and hide AP elementsWhile working on your document, you can show and hide AP elements manually, using the AP Elements panel, to see how the page will appearunder different conditions.Note: The currently selected AP element always becomes visible and appears in front of other AP elements while it’s selected.Change AP element visibilitySelect Window� AP Elements to open the AP Elements panel.Click in the eye icon column for an AP element to change its visibility.
An open eye means the AP element is visible.
A closed eye means the AP element is invisible.
If there is no eye icon, usually the AP element inherits visibility from its parent. (When AP elements are not nested, theparent is the document body, which is always visible.)Also, no eye icon appears when no visibility is specified (which appears in the Property inspector as Default visibility).Change the visibility of all AP elements at once
In the AP Elements panel (Window� AP Elements), click the header eye icon at the top of the column.Note: This procedure can set all AP elements to visible or hidden, but not to inherit.Resize AP elementsYou can resize an individual AP element, or simultaneously resize multiple AP elements to make them the same width and height.If the Prevent Overlaps option is on, you will not be able to resize an AP element so that it overlaps with another AP element.
226
Resize an AP elementIn Design view, select an AP element.Do one of the following to resize the AP element:
To resize by dragging, drag any of the AP element’s resize handles.
To resize one pixel at a time, hold down Control (Windows) or Option (Macintosh) while pressing an arrow key.The arrow keys move the right and bottom borders of the AP element; you can’t resize using the top and left borders withthis technique.
To resize by the grid snapping increment, hold down Shift-Control (Windows) or Shift-Option (Macintosh) while pressingan arrow key.
In the Property inspector (Window� Properties), type values for width (W) and height (H).Resizing an AP element changes the width and height of the AP element. It does not define how much of the APelement’s content is visible. You can define the visible region within an AP element in preferences.Resize multiple AP elements at onceIn the Design view, select two or more AP elements.Do one of the following:
Select Modify� Arrange� Make Same Width Or Modify� Arrange� Make Same Height.The first selected AP elements conform to the width or height of the last selected AP element.
In the Property inspector (Window� Properties), under Multiple CSS-P Element, enter width and height values.The values are applied to all selected AP elements.Move AP elementsYou can move AP elements in the Design view in much the same way that you move objects in most basic graphics applications.If the Prevent Overlaps option is on, you will not be able to move a AP element so that it overlaps another AP element.In the Design view, select an AP element or multiple AP elements.Do one of the following:
To move by dragging, drag the selection handle of the last selected AP element (highlighted in black).
To move one pixel at a time, use the arrow keys.Hold down the Shift key while pressing an arrow key to move the AP element by the current grid-snapping increment.Align AP elementsUse the AP element alignment commands to align one or more AP elements with a border of the last AP element selected.When you align AP elements, child AP elements that aren’t selected may move because their parent AP element is selected and moved. Toprevent this, don’t use nested AP elements.In the Design view, select the AP element.Select Modify� Arrange, and then select an alignment option.For example, if you select Top, all of the AP elements move so that their top borders are in the same vertical position as thetop border of the last selected AP element (highlighted in black).Converting AP elements to tablesInstead of using tables to create your layout, some web designers prefer to work with AP elements. Dreamweaver enables you to create yourlayout using AP elements, then (if you want) convert them into tables. For example, you might need to convert your AP elements to tables if youneed to support browsers before version 4.0. Converting AP elements to tables, however, is highly discouraged because it can result in tables witha large number of empty cells, not to mention bloated code. If you need a page layout that uses tables, it is best to create that page layout usingthe standard table layout tools available in Dreamweaver.You can convert back and forth between AP elements and tables to adjust the layout and optimize page design. (When you convert a table backto AP elements, however, Dreamweaver converts the table back to AP Divs, regardless of the type of AP element you might have had on the pagebefore the conversion to tables.) You cannot convert a specific table or AP element on a page; you must convert AP elements to tables and tablesto AP Divs for an entire page.Note: You can’t convert AP elements to tables or tables to AP Divs in a template document or in a document to which a template has beenapplied. Instead, create your layout in a non-template document and convert it before saving it as a template.
227

Convert between AP elements and tables
You can create your layout using AP elements, then convert the AP elements to tables so that your layout can be viewed in older browsers.Before you convert to tables, make sure AP elements do not overlap. Also, make sure you’re in Standard Mode (View� Table Mode� StandardConvert AP elements to a tableSelect Modify� Convert� AP Divs To Table.Specify any of the following options and click OK:Most AccurateCreates a cell for every AP element, plus any additional cells that are necessary to preserve the spacebetween AP elements.Smallest: Collapse Empty CellsSpecifies that the AP elements’ edges should be aligned if they are positioned within thespecified number of pixels.If you select this option, the resulting table will have fewer empty rows and columns, but may not match your layout precisely.Use Transparent GIFsFills the table’s last row with transparent GIFs. This ensures that the table is displayed with the samecolumn widths in all browsers.When this option is enabled, you cannot edit the resulting table by dragging its columns. When this option is disabled, theresulting table will not contain transparent GIFs, but the widths of the columns may vary from browser to browser.Center On PageCenters the resulting table on the page. If this option is disabled, the table starts at the left edge of theConvert tables to AP DivsSelect Modify� Convert� Tables to AP Divs.Specify any of the following options and click OK:Prevent AP Element OverlapsConstrains the positions of AP elements when they are created, moved, and resized so thatthey don’t overlap.Show AP Elements PanelDisplays the AP elements panel.Show Grid and Snap To GridLet you use a grid to help position AP elements.The tables are converted to AP Divs. Empty cells are not converted to AP elements unless they have background colors.Note: Page elements that were outside of tables are also placed in AP Divs.Prevent AP element overlapsBecause table cells cannot overlap, Dreamweaver cannot create a table from overlapping AP elements. If you plan to convert the AP elements in adocument to tables, use the Prevent Overlap option to constrain AP element movement and positioning so that AP elements don’t overlap.When this option is on, an AP element can’t be created in front of, moved or resized over, or nested within an existing AP element. If you activatethis option after creating overlapping AP elements, drag each overlapping AP element to move it away from other AP elements. Dreamweaverdoes not automatically fix existing overlapping AP elements in the page when you enable Prevent AP element Overlaps.When this option and snapping are enabled, an AP element won’t snap to the grid if it would cause two AP elements to overlap. Instead, it willsnap to the edge of the closest AP element.Note: Certain actions allow you to overlap AP elements even when the Prevent Overlaps option is enabled. If you insert an AP element using theInsert menu, enter numbers in the Property inspector, or reposition AP elements by editing the HTML source code, you can cause AP elements tooverlap or nest while this option is enabled. If overlaps happen, drag overlapping AP elements in the Design view to separate them.
In the AP Elements panel (Window� AP Elements), select the Prevent Overlaps option.
In the Document window, select Modify� Arrange� Prevent AP Element Overlaps.More Help topicsCreate a page with a CSS layout
Legal Notices | Online Privacy Policy
228
Working with head content for pages
To the topTo the topView and edit head contentSet the meta properties for the pageSet the page titleSpecify keywords for the pageSpecify descriptions for the pageSet the refresh properties of the pageSet the base URL properties of the pageSet the link properties of the pagePages contain elements that describe the information on the page, which is used by search browsers. You can set the properties of to control how your pages are identified.View and edit head contentYou can view the elements in the section of a document by using the View menu, the Document window’s Code view, or the Code inspector.View elements in the head section of a document
Select View� Head Content. For each element of the content, a marker appears at the top of the Document window in Design view.Note: If your Document window is set to show only Code view, View� Head Content is dimmed.Insert an element into the head section of a documentSelect an item from the Insert� HTML� Head Tags submenu.Enter options for the element in the dialog box that appears, or in the Property inspector.Edit an element in the head section of a documentSelect View� Head Content.Click one of the icons in the section to select it.Set or modify the properties of the element in the Property inspector.Set the meta properties for the page tag is a element that records information about the current page, such as the character encoding, author, copyright, or keywords.These tags can also be used to give information to the server, such as the expiration date, refresh interval, and POWDER rating for the page.(POWDER, the Protocol for Web Description Resources, provides a method for assigning ratings, such as movie ratings, to web pages.)Add a meta tagSelect Insert� HTML� Head Tags� Meta.Specify the properties in the dialog box that appears.Edit an existing meta tagSelect View� Head Content.Select the Meta marker that appears at the top of the Document window.Specify the properties in the Property inspector.Meta tag properties
Set the meta tag properties as follows:Specifies whether the tag contains descriptive information about the page () or HTTP header information (http-equiv).Specifies the type of information you’re supplying in this tag. Some values, such as , and , are already welldefined (and have their own individual Property inspectors in Dreamweaver), but you can specify practically any value (for example, creationdate,, or level).Specifies the actual information. For example, if you specified for Value, you might specify , or
229
To the topTo the topTo the topTo the topSet the page titleThere is only one title property: the title of the page. The title appears in the title bar of the Document window in Dreamweaver as well as in thebrowser’s title bar when you view the page in most browsers. The title also appears in the Document window toolbar.Specify the title in the Document window
Enter the title in the Title text box in the Document window toolbar.Specify the title in the head contentSelect View� Head Content.Select the Title marker that appears at the top of the Document window.Specify the page title in the Property inspector.Specify keywords for the pageMany search-engine robots (programs that automatically browse the web gathering information for search engines to index) read the contents ofthe Keywords tag and use the information to index your pages in their databases. Because some search engines limit the number ofkeywords or characters they index, or ignore all keywords if you go beyond the limit, it’s a good idea to use just a few well-chosen keywords.Add a Keywords meta tagSelect Insert� HTML� Head Tags� Keywords.Specify the keywords, separated by commas, in the dialog box that appears.Edit a Keywords meta tagSelect View� Head Content.Select the Keywords marker that appears at the top of the Document window.In the Property inspector, view, modify, or delete keywords. You can also add keywords separated by commas.Specify descriptions for the pageMany search-engine robots (programs that automatically browse the web gathering information for search engines to index) read the contents ofthe Description tag. Some use the information to index your pages in their databases, and some also display the information on the searchresults page (instead of displaying the first few lines of your document). Some search engines limit the number of characters they index, so it’s agood idea to limit your description to a few words (for example, Pork barbecue catering in Albany, Georgia, or Web design at reasonable rates forclients worldwideAdd a Description meta tagSelect Insert� HTML� Head Tags� Description.Enter descriptive text in the dialog box that appears.Edit a Description meta tagSelect View� Head Content.Select the Description marker that appears at the top of the Document window.In the Property inspector, view, modify, or delete the descriptive text.Set the refresh properties of the pageUse the Refresh element to specify that the browser should automatically refresh your page—by reloading the current page or going to a differentone—after a certain amount of time. This element is often used to redirect users from one URL to another, often after displaying a text messagethat the URL has changed.Add a Refresh meta tagSelect Insert� HTML� Head Tags� Refresh.Set the Refresh meta tag properties in the dialog box that appears.Edit a Refresh meta tagSelect View� Head Content.
230
To the topTo the top
Select the Refresh marker that appears at the top of the Document window.
In the Property inspector, set the Refresh meta tag properties.Set the Refresh meta tag properties
Specify the Refresh meta tag properties as follows:The time in seconds to wait before the browser refreshes the page. To make the browser refresh the page immediately after it finishesloading, enter 0 in this box.URL or ActionSpecifies whether the browser should go to a different URL or refresh the current page, after the specified delay. To make adifferent URL open (rather than refreshing the current page), click the Browse button, then browse to and select the page to load.Set the base URL properties of the pageUse the Base element to set the base URL that all document-relative paths in the page are considered relative to.Add a Base meta tagSelect Insert� HTML� Head Tags� Base.Specify the Base meta tag properties in the dialog box that appears.Edit a Base meta tagSelect View� Head Content.Select the Base marker that appears at the top of the Document window.In the Property inspector, specify the Base meta tag properties.Specify the Base meta tag properties
Specify the Base meta tag properties as follows:The base URL. Click the Browse button to browse to and select a file, or type a path in the box.Specifies the frame or window in which all linked documents should open. Select one of the frames in the current frameset, or one of thefollowing reserved names:
loads the linked document in a new, unnamed browser window.
loads the linked document into the parent frameset or window of the frame that contains the link. If the framecontaining the link is not nested, then this is equivalent to ; the linked document loads into the full browser window.
loads the linked document in the same frame or window as the link. This target is the default, so you usually don’t have tospecify it.
loads the linked document in the full browser window, thereby removing all frames.Set the link properties of the pageUse the tag to define a relationship between the current document and another file.Note: The link tag in the section is not the same thing as an HTML link between documents in the Add a Link meta tagSelect Insert� HTML� Head Tags� Link.Specify the Link meta tag properties in the dialog box that appears.Edit a Link meta tagSelect View� Head Content.Select the Link marker that appears at the top of the Document window.In the Property inspector, specify the Link meta tag properties.Specify the Link meta tag properties
Set the Link meta tag properties as follows:The URL of the file that you are defining a relationship to. Click the Browse button to browse to and select a file, or type a path in the box.Note that this attribute does not indicate a file that you’re linking to in the usual HTML sense; the relationships specified in a Link element are moreSpecifies a unique identifier for the link.Describes the relationship. This attribute has special relevance for linked style sheets; for more information, see the External Style Sheetssection of the HTML 4.0 specification on the World Wide Web Consortium website at www.w3.org/TR/REC-html40/present/styles.html#style-
231

external.
Specifies the relationship between the current document and the document in the Href box. Possible values include Stylesheet,, and . To specify more than onerelationship, separate values with a space.Specifies a reverse relationship (the opposite of Rel) between the current document and the document in the Href box. Possible values arethe same as those for Rel.
Legal Notices | Online Privacy Policy
232
Working with the Spry Accordion widget
To the topTo the topAbout the Accordion widgetInsert and edit the Accordion widgetCustomize the Accordion widgetAbout the Accordion widgetAn Accordion widget is a set of collapsible panels that can store a large amount of content in a compact space. Site visitors hide or reveal thecontent stored in the accordion by clicking the tab of the panel. The panels of the accordion expand or contract accordingly as the visitor clicksdifferent tabs. In an accordion, only one content panel is open and visible at a given time. The following example shows an Accordion widget, withthe first panel expanded:
Accordion panel tabAccordion panel contentAccordion panel (open)The default HTML for the Accordion widget comprises an outer tag that contains all of the panels, a tag for each panel, and a header and content within the tag for each panel. An Accordion widget can contain any number of individual panels. The HTML for the Accordionwidget also includes tags in the head of the document and after the accordion’s HTML markup.For a more comprehensive explanation of how the Accordion widget works, including a full anatomy of the Accordion widget’s code, seeFor a tutorial on working with the Accordion widget, see Insert and edit the Accordion widgetInsert the Accordion widget
Select Insert� Spry� Spry Accordion.Note: You can also insert an Accordion widget by using the Spry category in the Insert panel.Add a panel to an Accordion widgetSelect an Accordion widget in the Document window.Click the Panels Plus (+) button in the Property inspector (Window� Properties).(Optional) Change the name of the panel by selecting the panel’s text in Design view and altering the text.Delete a panel from an Accordion widgetSelect an Accordion widget in the Document window.In the Panels menu of the Property inspector (Window� Properties), select the name of the panel to delete, and click theMinus (-) button.Open a panel for editing
233
To the top
Do one of the following:
Move the mouse pointer over the tab of the panel to open it in Design view, and click the eye icon that appears at the right ofthe tab.
Select an Accordion widget in the Document window, and then click the name of the panel to edit it in the Panels menu of theProperty inspector (Window� Properties).Change the order of panelsSelect an Accordion widget in the Document window.In the Property inspector (Window� Properties), select the name of the Accordion panel you want to move.Click the up or down arrows to move the panel up or down.Customize the Accordion widgetAlthough the Property inspector enables you to make simple edits to an Accordion widget, it does not support customized styling tasks. You canalter the CSS rules for the Accordion widget and create an accordion that is styled to your liking.For a quick reference on changing the colors of the Accordion widget, see David Powers’s Quick guide to styling Spry tabbed panels, accordions,and collapsible panelsFor a more advanced list of styling tasks, see All CSS rules in the following topics refer to the default rules located in the SpryAccordion.css file. Dreamweaver saves the SpryAccordion.css filein the SpryAssets folder of your site whenever you create a Spry Accordion widget. This file also contains commented information about variousstyles that apply to the widget, so you might find it helpful to consult the file as well.Although you can easily edit rules for the Accordion widget directly in the CSS file, you can also use the CSS Styles panel to edit theaccordion’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially if you usethe panel’s Current mode.Style Accordion widget textYou can style the text of an Accordion widget by setting properties for the entire Accordion widget container, or by setting properties for thecomponents of the widget individually.
To change the text styling of an Accordion widget, use the following table to locate the appropriate CSS rule, and then add your own text stylingproperties and values:Text to changeRelevant CSS ruleExample of properties and values toText in the entire accordion (includes bothtab and content panel).Accordion or .AccordionPanelfont: Arial; font-size:medium;Text in accordion panel tabs onlyfont: Arial; font-size:medium;Text in accordion content panels onlyfont: Arial; font-size:medium;Change Accordion widget background colors
To change the background colors of different parts of an Accordion widget, use the following table to locate the appropriate CSS rule, and thenadd or change background color properties and values:Part of widget to changeRelevant CSS ruleExample of property and value to addBackground color of accordion panel tabsbackground-color: #CCCCCC; (This is thedefault value.)Background color of accordion contentbackground-color: #CCCCCC;Background color of the open accordion.AccordionPanelOpen background-color: #EEEEEE; (This is thedefault value.)
234

Background color of panel tabs on hover
.AccordionPanelTabHover
color: #555555; (This is the default value.)
Background color of open panel tab on.AccordionPanelOpen color: #555555; (This is the default value.)Constrain the width of an accordionBy default, the Accordion widget expands to fill available space. You can constrain the width of an Accordion widget, however, by setting a widthproperty for the accordion container.Locate the .Accordion CSS rule by opening up the SpryAccordion.css file. This is the rule that defines properties for the maincontainer element of the Accordion widget.You can also locate the rule by selecting the Accordion widget, and looking in the CSS Styles panel (Window� CSSStyles). Make sure the panel is set to Current mode.Add a width property and value to the rule, for example width: 300px;More Help topics
Legal Notices | Online Privacy Policy
235
Working with the Spry Collapsible Panel widget
To the topTo the topTo the topAbout the Collapsible Panel widgetInsert and edit the Collapsible Panel widgetCustomize the Collapsible Panel widgetAbout the Collapsible Panel widgetA Collapsible Panel widget is a panel that can store content in a compact space. Users hide or reveal the content stored in the Collapsible Panelby clicking the tab of the widget. The following example shows a Collapsible Panel widget, expanded and collapsed:
Expanded CollapsedThe HTML for the Collapsible Panel widget comprises an outer tag that contains the content tag and the tab container tag. The HTMLfor the Collapsible Panel widget also includes script tags in the head of the document and after the Collapsible Panel’s HTML markup.For a more comprehensive explanation of how the Collapsible Panel widget works, including a full anatomy of the Collapsible Panel widget’s code,see Insert and edit the Collapsible Panel widgetInsert the Collapsible Panel widget
Select Insert� Spry� Spry Collapsible Panel.Note: You can also insert a Collapsible Panel widget by using the Spry category in the Insert panel.Open or close the Collapsible Panel in Design view
Do one of the following:
Move the mouse pointer over the tab of the panel in Design view and click the eye icon that appears at the right of the tab.
Select a Collapsible Panel widget in the Document window, and then select Open or Closed from the Display pop-up menu inthe Property inspector (Window� Properties).Set the default state of a Collapsible Panel widgetYou can set the default state (open or closed) of the Collapsible Panel widget when the web page loads in a browser.Select a Collapsible Panel widget in the Document window.In the Property inspector (Window� Properties), select Open or Closed from the Default state pop-up menu.Enable or disable animation for the Collapsible Panel widgetBy default, when you enable animation for a Collapsible Panel widget, the panel gradually and smoothly opens and closes when the site visitorclicks the panel’s tab. If you disable animation, the collapsible panel snaps open and closed abruptly.Select a Collapsible Panel widget in the Document window.In the Property inspector (Window� Properties), select or deselect Enable Animation.Customize the Collapsible Panel widgetAlthough the Property inspector enables you to make simple edits to a Collapsible Panel widget, it does not support customized styling tasks. Youcan alter the CSS for the Collapsible Panel widget and create a collapsible panel that is styled to your liking.
236
For a quick reference on changing the colors of the Collapsible Panel widget, see David Powers’s Quick guide to styling Spry tabbed panels,
accordions, and collapsible panelsFor a more advanced list of styling tasks, see All CSS rules in the topics below refer to the default rules located in the SpryCollapsiblePanel.css file. Dreamweaver saves theSpryCollapsiblePanel.css file in the SpryAssets folder of your site whenever you create a Spry Collapsible Panel widget. This file also containsuseful commented information about various styles that apply to the widget.While you can easily edit rules for the Collapsible Panel widget directly in the accompanying CSS file, you can also use the CSS Styles panelto edit the collapsible panel’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget,especially if you use the panel’s Current mode.Style Collapsible Panel widget textYou can style the text of a Collapsible Panel widget by setting properties for the entire Collapsible Panel widget container, or by setting propertiesfor the components of the widget individually.
To change the text format of a Collapsible Panel widget, use the following table to locate the appropriate CSS rule, and then add your own textstyling properties and values:Style to changeRelevant CSS ruleExample of properties and values toadd or changeText in the entire collapsible panelfont: Arial; font-size:medium;Text in panel tab onlyfont: bold 0.7em sans-serif; (This is thedefault value.)Text in content panel onlyfont: Arial; font-size:medium;Change Collapsible Panel widget background colors
To change the background colors of different parts of a Collapsible Panel widget, use the following table to locate the appropriate CSS rule, andthen add or change background color properties and values to your liking:Color to changeRelevant CSS ruleExample of property and value to addBackground color of panel tabbackground-color: #DDD; (This is thedefault value.)Background color of content panelbackground-color: #DDD;Background color of tab when panel is.CollapsiblePanelOpen background-color: #EEE; (This is thedefault value.)Background color of open panel tab whenthe mouse pointer moves over it.CollapsiblePanelTabHover, .CollapsiblePanelOpen background-color: #CCC; (This is thedefault value.)Constrain the width of a collapsible panelBy default, the Collapsible Panel widget expands to fill available space. You can constrain the width of a Collapsible Panel widget, however, bysetting a width property for the collapsible panel container.Locate the .CollapsiblePanel CSS rule by opening the SpryCollapsible Panel.css file. This rule defines properties for the maincontainer element of the Collapsible Panel widget.You can also locate the rule by selecting the Collapsible Panel widget, and looking in the CSS Styles panel (Window� CSS Styles). Make sure the panel is set to Current mode.Add a width property and value to the rule, for example width: 300px;More Help topics
237

Legal Notices | Online Privacy Policy
238
Working with the Spry Tabbed Panels widget
To the topTo the topAbout the Tabbed Panels widgetInsert and edit the Tabbed Panels widgetCustomize the Tabbed Panels widgetAbout the Tabbed Panels widgetA Tabbed Panels widget is a set of panels that can store content in a compact space. Site viewers hide or reveal the content stored in the TabbedPanels by clicking the tab of the panel they want to access. The panels of the widget open accordingly as the visitor clicks different tabs. In aTabbed Panels widget, only one content panel is open at a given time. The following example shows a Tabbed Panels widget, with the third panel
Tab ContentTabbed Panels widgetTabbed panelThe HTML code for the Tabbed Panels widget comprises an outer tag that contains all of the panels, a list for the tabs, a to contain thecontent panels, and a for each content panel. The HTML for the Tabbed Panels widget also includes script tags in the head of the documentand after the Tabbed Panel widget’s HTML markup.For a more comprehensive explanation of how the Tabbed Panels widget works, including a full anatomy of the widget’s code, seeInsert and edit the Tabbed Panels widgetInsert the Tabbed Panels widget
Select Insert� Spry� Spry Tabbed Panels.Note: You can also insert a Tabbed Panels widget by using the Spry category in the Insert panel.Add a panel to a Tabbed Panels widgetSelect a Tabbed Panels widget in the Document window.Click the Panels plus button in the Property inspector (Window� Properties).(Optional) Change the tab name by selecting the tab’s text in Design view and altering it.Delete a panel from a Tabbed Panels widgetSelect a Tabbed Panels widget in the Document window.In the Panels menu of the Property inspector (Window� Properties), select the name of the panel you want to delete and clickthe minus button.Open a panel for editing
Do one of the following:
Move the mouse pointer over the tab of the panel you want to open in Design view and click the eye icon that appears at theright of the tab.
Select a Tabbed Panels widget in the Document window and click the name of the panel you want to edit in the Panels menuof the Property inspector (Window� Properties).Change the order of panels
239
To the topSelect a Tabbed Panels widget in the Document window.In the Panels menu of the Property inspector (Window� Properties), select the name of the panel you want to move.Click the up or down arrows to move the panel up or down.Set the default open panelYou can set which panel of the Tabbed Panels widget opens by default when the page opens in a browser.Select a Tabbed Panels widget in the Document window.In the Property inspector (Window� Properties), select the panel you want open by default from the Default panel pop-upCustomize the Tabbed Panels widgetAlthough the Property inspector enables you to make simple edits to a Tabbed Panels widget, it does not support customized styling tasks. Youcan alter the CSS rules for the Tabbed Panels widget and create a widget that is styled to your liking.For a quick reference on changing the colors of the Tabbed Panels widget, see David Powers’s Quick guide to styling Spry tabbed panels,accordions, and collapsible panelsFor a more advanced list of styling tasks, see All CSS rules in the topics below refer to the default rules located in the SpryTabbedPanels.css file. Dreamweaver saves theSpryTabbedPanels.css file in the SpryAssets folder of your site whenever you create a Spry Tabbed Panels widget. This file also contains usefulcommented information about various styles that apply to the widget.Although you can easily edit rules for the Tabbed Panels widget directly in the accompanying CSS file, you can also use the CSS Styles panelto edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially ifyou use the panel’s Current mode.Style Tabbed Panels widget textYou can style the text of a Tabbed Panels widget by setting properties for the entire Tabbed Panels widget container, or by setting properties forthe components of the widget individually.
To change the text styling of a Tabbed Panels widget, use the following table to locate the appropriate CSS rule, and then add your own textstyling properties and values:Text to changeRelevant CSS ruleExample of properties and values toText in the entire widgetfont: Arial; font-size:medium;Text in panel tabs only.TabbedPanelsTabGroup or font: Arial; font-size:medium;Text in content panels only.TabbedPanelsContentGroup or font: Arial; font-size:medium;Change Tabbed Panels widget background colors
To change the background colors of different parts of a Tabbed Panels widget, use the following table to locate the appropriate CSS rule, andthen add or change background color properties and values to your liking:Color to changeRelevant CSS ruleExample of property and value to addBackground color of panel tabs.TabbedPanelsTabGroup or background-color: #DDD; (This is thedefault value.)Background color of content panels.Tabbed PanelsContentGroup or background-color: #EEE; (This is thedefault value.)Background color of selected tab
.TabbedPanelsTabSelected
background-color: #EEE; (This is the
240

default value.)
Background color of panel tabs when themouse pointer moves over thembackground-color: #CCC; (This is thedefault value.)Constrain the width of tabbed panelsBy default, the Tabbed Panels widget expands to fill available space. You can constrain the width of a Tabbed Panels widget, however, by settinga width property for the accordion container.Locate the .TabbedPanels CSS rule by opening the SpryTabbedPanels.css file. This rule defines properties for the maincontainer element of the Tabbed Panels widget.You can also locate the rule by selecting the Tabbed Panels widget, and looking in the CSS Styles panel (Window� CSSStyles). Make sure the panel is set to Current mode.Add a width property and value to the rule, for example width: 300px;More Help topics
Legal Notices | Online Privacy Policy
241
Working with the Spry Tooltip widget
To the topTo the topTo the topAbout the Tooltip widgetInsert the Tooltip widgetEdit Tooltip widget optionsAbout the Tooltip widgetThe Spry tooltip widget displays additional information when a user hovers over a particular element on a web page. The additional contentdisappears when the user stops hovering. You can also set tooltips to stay open for longer periods of time so that users can interact with contentinside the tooltip.A Tooltip widget consists of the following three elements:
The tooltip container. This is the element that contains the message or content that you want to display when the useractivates the tooltip.
The page element(s) that activates the tooltip.
The constructor script. This is JavaScript that tells Spry to create the tooltip functionality.When you insert a Tooltip widget, Dreamweaver creates a tooltip container using tags, and wraps the “trigger” element (the page element thatactivates the tooltip) with tags. Dreamweaver uses these tags by default, but the tags for the tooltip and the trigger element can be any tags,as long as they are within the body of the page.Keep the following points in mind when working with the Tooltip widget:
An open tooltip will close before the next one opens.
Tooltips persist while users hover over the trigger area.
There are no limitations as to what kinds of tags you can use for triggers and for tooltip content. (Block level elements arealways advisable, however, to avoid possible cross-browser rendering problems.)
By default, the tooltip appears 20 pixels down and to the right of the cursor. You can use the Horizontal and Vertical offsetoptions in the Property inspector to set a custom appearance point.
Currently there is no way to have a tooltip open when a page loads in a browser.The tooltip widget requires very little CSS. Spry uses JavaScript to show, hide, and position the tooltip. You can achieve any other styling for thetooltip with standard CSS techniques, as your page requires. The only rule contained in the default CSS file is a workaround for Internet Explorer 6problems so that the tooltip appears above form elements or Flash objects.For a more comprehensive explanation of how the Spry Tooltip widget works, including a full anatomy of the widget’s code, seeFor a video tutorial on working with the Spry Tooltip widget, see Insert the Tooltip widget
Select Insert� Spry� Spry Tooltip.Note: You can also insert a Tooltip widget by using the Spry category in the Insert panel.This action inserts a new Tooltip widget with a container for the tooltip content, and a placeholder sentence that acts as the tooltip trigger.You can also select an existing element on the page (for example, an image), and then insert the tooltip. When you do this, the element youselected acts as the new tooltip’s trigger. The selection must be a full tag element (for example an tag or a tag) so that Dreamweaver canassign an ID to it if it does not already have one.You can set options that let you customize the Tooltip widget’s behavior.Hover over or place the insertion point in the tooltip content on the page.Click the Tooltip widget’s blue tab to select it.Set options in the Tooltip widget Property inspector as desired.
242

The name of the tooltip container. The container holds the content of the tooltip. By default Dreamweaver uses a tag as the container.The element on the page that activates the tooltip. By default Dreamweaver inserts a placeholder sentence, surrounded by tags, asthe trigger, but you can select any element on the page that has a unique ID.Follow MouseWhen selected, this option causes the tooltip to follow the mouse while hovering over the trigger element.Hide on Mouse OutWhen selected, this option keeps the tooltip open as long as the mouse is hovering over the tooltip (even if the mouseleaves the trigger element). Keeping the tooltip open is useful if you have links or other interactive elements in your tooltip. If this option is notselected, the tooltip element closes when the mouse leaves the trigger area.Horizontal OffsetComputes the tooltip’s horizontal position in relation to the mouse. The offset value is in pixels, and the default offset is 20Vertical OffsetComputes the tooltip’s vertical position in relation to the mouse. The offset value is in pixels, and the default offset is 20 pixelsShow DelayThe delay in milliseconds before the tooltip appears after it has entered the trigger element. The default value is 0.Hide DelayThe delay in milliseconds before the tooltip disappears after it has left the trigger element. The default value is 0.The type of effect you want to use when the tooltip appears. Blind simulates a window blind that moves up and down to reveal and hide thetooltip. Fade fades the tooltip in and out. The default value is none.
Legal Notices | Online Privacy Policy
243
Working with the Spry Validation Checkbox widget
To the topTo the topAbout the Validation Checkbox widgetInsert and edit the Validation Checkbox widgetCustomize Validation Checkbox widget error messagesAbout the Validation Checkbox widgetA Spry Validation Checkbox widget is a check box or group of check boxes in an HTML form that display valid or invalid states when the userselects or fails to select a check box. For example, you can add a Validation Checkbox widget to a form in which a user might be required to makethree selections. If the user fails to make all three selections, the widget returns a message stating that the minimum number of selections has notbeen met.The following example shows a Validation Checkbox widget in various states:
Validation checkbox widget group, minimum number of selections stateValidation Checkbox widget, required stateThe Validation Checkbox widget includes a number of states (for example, valid, invalid, required value, and so on). You can alter the properties ofthese states using the Property inspector, depending on the desired validation results. A Validation Checkbox widget can validate at various points—for example, when the user clicks outside the widget, as the user makes selections, or when the user tries to submit the form.Initial stateThe widget state when the page loads in the browser, or when the user resets the form.Valid stateThe widget state when the user has made a selection, or the correct number of selections, and the form can be submitted.Required stateThe widget state when the user has failed to make a required selection.Minimum Number Of Selections stateThe widget state when the user has selected fewer than the minimum number of check boxes required.Maximum Number Of Selections stateThe widget state when the user has selected more than the maximum number of check boxes allowed.Whenever a Validation Checkbox widget enters one of these states through user interaction, the Spry framework logic applies a specific CSS classto the HTML container for the widget at run time. For example, if a user tries to submit a form, but has made no selections, Spry applies a class tothe widget that causes it to display the error message, “Please make a selection.” The rules that control the style and display states of errormessages reside in the CSS file that accompanies the widget, SpryValidationCheckbox.css.The default HTML for the Validation Checkbox widget, usually inside of a form, comprises a container&#xspan; tag that surrounds the &#xinpu;&#xt000;type="checkbox" tag of the check box. The HTML for the Validation Checkbox widget also includes script tags in the head of the document andafter the widget’s HTML markup.For a more comprehensive explanation of how the Validation Checkbox widget works, including a full anatomy of the Validation Checkbox widget’scode, see Insert and edit the Validation Checkbox widgetInsert the Validation Checkbox widgetSelect Insert&#xinpu;&#xt000; Spry&#xinpu;&#xt000; Spry Validation Checkbox.Complete the Input Tag Accessibility Attributes dialog box and click OK.Note: You can also insert a Validation Checkbox widget by using the Spry category in the Insert panel.Specify when validation occurs
244

To the top
You can set the point at which validation occurs—when the user clicks outside the widget, as the user makes selections, or when the user tries to
submit the form.Select a Validation Checkbox widget in the Document window.In the Property inspector (Window� Properties), select the option that indicates when you want validation to occur. You canselect all of the options or Submit only.Validates whenever the user clicks outside the check box.Validates as the user makes selections.Validates when the user tries to submit the form. The submit option is selected by default, and cannot beSpecify a minimum and maximum selection rangeBy default, a Validation Checkbox widget is set to required by default. If you insert a number of check boxes on your page, however, you canspecify a minimum and maximum selection range. For example, if you have six check boxes within the&#xspan; tag for a single ValidationCheckbox widget, and you want to make sure that the user selects at least three check boxes, you can set such a preference for the entire widget.Select a Validation Checkbox widget in the Document window.In the Property inspector (Window&#xspan; Properties), select the Enforce Range option.Enter a minimum or maximum number (or both) of check boxes that you want the user to select.Display widget states in Design viewSelect a Validation Checkbox widget in the Document window.In the Property inspector (Window&#xspan; Properties), select the state you want to see from the Preview States pop-up menu. Forexample, select Initial to see the widget in its initial state.Customize Validation Checkbox widget error messagesBy default, error messages for the Validation Checkbox widget appear in red with a 1-pixel border surrounding the text. You can alter the CSS forthe Validation Checkbox widget so that you can create a widget that is styled to your liking. For a more advanced list of styling tasks, seeOpen the SpryValidationCheckbox.css file.Dreamweaver saves the SpryValidationCheckbox.css file in the SpryAssets folder of your site whenever you create a SpryValidation Checkbox widget. It’s helpful to consult this file because it contains commented information about various styles thatapply to the widget.Use the following table to locate the appropriate CSS rule, and then change the default properties, or add your own text-styling properties and values:Text to styleRelevant CSS ruleRelevant properties to changeError message text.checkboxRequiredState .checkboxRequiredMsg, .checkboxMinSelectionsState .checkboxMinSelectionsMsg, .checkboxMaxSelectionsState color: #CC3333; border: 1px solidAlthough you can easily edit rules for the Validation Checkbox widget directly in the accompanying CSS file, you can alsouse the CSS Styles panel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assignedto different parts of the widget, especially if you use the panel’s Current mode.More Help topics
Legal Notices | Online Privacy Policy
245
Working with the Spry Validation Confirm widget
To the topTo the topAbout the Validation Confirm widgetInsert and edit the Validation Confirm widgetCustomize the Confirm widgetAbout the Validation Confirm widgetThe Validation Confirm Widget is a text field or a password form field that displays valid or invalid states when a user enters a value that does notmatch the value of a similar field in the same form. For example, you can add a Validation Confirm widget to a form that requires a user to retypethe password they've specified in a previous field. If the user fails to type the password exactly as they've specified it previously, the widget returnsan error message stating that the values do not match.You can also use a Validation Confirm widget in conjunction with a Validation Text Field widget to validate email addresses.Note: You should be familiar with Spry validation widgets before you work with the Confirm widget. If you’re not familiar with them, see Workingwith the Spry Validation Text Field widget, or any of the other validation widget overviews before proceeding. This overview does not present allbasic validation widget concepts.The following illustration shows a typical setup for a Confirm widget:
A password field or Spry Password Validation widgetConfirm widgetThe Validation Confirm widget includes a number of states (for example, valid, invalid, required, and so on). You can alter the properties of thesestates by editing the corresponding CSS file (SpryValidationConfirm.css), depending on the desired validation results. A Validation Confirm widgetcan validate at various points—for example, when the site visitor clicks outside the widget, when they type, or when they try to submit the form.Initial stateWhen the page loads in the browser, or when the user resets the form.Focus stateWhen the user places the insertion point in the widget.Valid stateWhen the user enters information correctly, and the form can be submitted.Invalid stateWhen the user enters text that does not match the text entered in a previous text field, Validation Text Field widget, or ValidationPassword widget.Required stateWhen the user fails to enter required text in the text field.For a more comprehensive explanation of how Validation Confirm widgets work, as well as additional information about widget structure, seeInsert and edit the Validation Confirm widgetInsert the Validation Confirm widgetSelect Insert� Spry� Spry Validation Confirm.Complete the Input Tag Accessibility Attributes dialog box and click OK.Note: You can also insert a Validation Confirm widget by using the Spry category in the Insert panel.Change required status of a Validation Confirm widgetBy default, all Validation Confirm widgets that you insert with Dreamweaver require user input when published on a web page. You can, however,make the completion of confirm text fields optional for the user.Select a Validation Confirm widget in the Document window by clicking its blue tab.In the Property inspector (Window� Properties), select or deselect the Required option, depending on your preference.Specify the text field to validate againstSelect a Validation Confirm widget in the Document window by clicking its blue tab.In the Property inspector (Window� Properties), select the text field you want to validate against by selecting a text field fromthe Validate Against pop-up menu. All text fields with unique IDs assigned to them appear as options in the pop-up menu.
246
To the topDisplay widget states in Design viewSelect a Validation Confirm widget in the Document window by clicking its blue tab.In the Property inspector (Window� Properties), select the state you want to see from the Preview States pop-up menu. Forexample, if you want to see the widget in its valid state, select Valid.Specify when validation occursYou can set the point at which validation occurs—when the site visitor clicks outside the widget, as the visitor types, or when the visitor tries tosubmit the form.Select a Validation Confirm widget in the Document window by clicking its blue tab.In the Property inspector (Window� Properties), select the option that indicates when you want validation to occur. You canselect all of the options or Submit only.Validates whenever the user clicks outside the confirm text field.Validates as the user changes text inside the confirm text field.Validates when the user tries to submit the form. The submit option is selected by default, and cannot beCustomize the Confirm widgetAlthough the Property inspector enables you to make simple edits to a Validation Confirm widget, it does not support customized styling tasks. Youcan alter the CSS for the Validation Confirm widget so that you can create a widget that is styled to your liking. For a more advanced list of stylingtasks, see All CSS rules in the topics below refer to the default rules located in the SpryValidationConfirm.css file. Dreamweaver saves theSpryValidationConfirm.css file in the SpryAssets folder of your site whenever you create a Spry Validation Confirm widget. Consulting this file ishelpful because it contains commented information about various styles that apply to the widget.Although you can easily edit rules for the Validation Confirm widget directly in the accompanying CSS file, you can also use the CSS Stylespanel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget,especially if you use the panel’s Current mode.Style a Validation Confirm widget (general instructions)Open the SpryValidationConfirm.css file.Locate the CSS rule for the part of the widget to change. For example, to change the background color of the Confirmwidget’s required state, edit the rule in the SpryValidationConfirm.css file.Make your changes to the CSS and save the file.The SpryValidationConfirm.css file contains extensive comments, explaining the code and the purpose for certain rules. For further information,see the comments in the file.Style Validation Confirm widget error message textBy default, error messages for the Validation Confirm widget appear in red with a 1-pixel solid border surrounding the text.
To change the text styling of Validation Confirm widget error messages, use the following table to locate the appropriate CSS rule, and thenchange the default properties, or add your own text-styling properties and values.Text to changeRelevant CSS ruleRelevant properties to changeError message text.confirmRequiredState .confirmRequiredMsg, .confirmInvalidState color: #CC3333; border: 1px solidChange Validation Confirm widget background colors
To change the background colors of the Validation Confirm widget in various states, use the following table to locate the appropriate CSS rule,and then change the default background color values.Color to changeRelevant CSS ruleRelevant property to changeBackground color of widget in valid state
.confirmValidState input,
background-color: #B8F5B1;
247

input.confirmValidState
Background color of widget in invalid stateinput.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState inputbackground-color: #FF9F9F;Background color of widget in focus.confirmFocusState input, background-color: #FFFFCC;More Help topicsValidation Confirm widget samples
Legal Notices | Online Privacy Policy
248
Working with the Spry Validation Password widget
To the topTo the topAbout the Validation Password widgetInsert and edit the Validation Password widgetCustomize the Validation Password widgetAbout the Validation Password widgetThe Spry Validation Password widget is a password text field that you can use to enforce password rules (for example, number and type ofcharacters). The widget provides warning or error messages based upon a user's input.Note: You should be familiar with Spry validation widgets before you work with the Password widget. If you’re not familiar with them, see Workingwith the Spry Validation Text Field widget, or any of the other validation widget overviews before proceeding. This overview does not present allbasic validation widget concepts.The following example shows a Validation Password widget in various states:
Password widget, minimum number of characters statePassword widget, maximumnumber of characters statePassword widget, required stateThe Validation Password widget includes a number of states (for example, valid, required, minimum number of characters, and so on). You canalter the properties of these states by editing the corresponding CSS file (SpryValidationPassword.css), depending on the desired validationresults. A Validation Password widget can validate at various points—for example, when the site visitor clicks outside the text field, when theytype, or when they try to submit the form.Initial stateWhen the page loads in the browser, or when the user resets the form.Focus stateWhen the user places the insertion point in the widget.Valid stateWhen the user enters information correctly, and the form can be submitted.Invalid strength stateWhen the user enters text that does not match the strength criteria for the password text field. (For example, if you’vespecified that a password must contain at least two uppercase letters, and the entered password contains no or only one uppercase letter).Required stateWhen the user fails to enter required text in the text field.Minimum Number Of Characters stateWhen the user enters fewer than the minimum number of characters required in the password text field.Maximum Number Of Characters stateWhen the user enters more than the maximum number of characters allowed in the password text field.For a more comprehensive explanation of how Validation Password widgets work, as well as additional information about widget structure, seeInsert and edit the Validation Password widgetInsert the Validation Password widgetSelect Insert� Spry� Spry Validation Password.Complete the Input Tag Accessibility Attributes dialog box and click OK.Note: You can also insert a Validation Password widget by using the Spry category in the Insert panel.Change required status of a Validation Password widgetBy default, all Validation Password widgets that you insert with Dreamweaver require user input when published on a web page. You can,however, make the completion of password text fields optional for the user.Select a Validation Password widget in the Document window by clicking its blue tab.In the Property inspector (Window� Properties), select or deselect the Required option, depending on your preference.Display widget states in Design view
249
To the top
Select a Validation Password widget in the Document window by clicking its blue tab.
In the Property inspector (Window� Properties), select the state you want to see from the Preview States pop-up menu. Forexample, if you want to see the widget in its valid state, select Valid.Specify when validation occursYou can set the point at which validation occurs—when the site visitor clicks outside the widget, as the visitor types, or when the visitor tries tosubmit the form.Select a Validation Password widget in the Document window by clicking its blue tab.In the Property inspector (Window� Properties), select the option that indicates when you want validation to occur. You canselect all of the options or Submit only.Validates whenever the user clicks outside the password text field.Validates as the user changes text inside the password text field.Validates when the user tries to submit the form. The submit option is selected by default, and cannot beSet password strengthPassword strength refers to the degree to which combinations of certain characters match the requirements for a password text field. For example,if you’ve created a form in which users are selecting a password, you might want to force your users to include a certain number of uppercaseletters in the password, a certain number of special characters, and so on.Note: By default, none of the available options are set for the Password widget.Click the Validation Password widget’s blue tab to select it.Set options in the Property inspector (Window� Properties) as desired. The numbers that you enter into the option fields arethe numbers required for the widget to validate. For example, if you enter 8 in the Minimum characters box, the widget will notvalidate unless the user has entered at least eight characters in the password text field.Minimum/Maximum charactersSpecifies the minimum and maximum number of characters required for the password to be valid.Minimum/Maximum lettersSpecifies the minimum and maximum number of letters (a, b, c, and so on) required for the password to be valid.Minimum/Maximum numbersSpecifies the minimum and maximum number of numbers (1, 2, 3, and so on) required for the password to beMinimum/Maximum uppercaseSpecifies the minimum and maximum number of uppercase letters (A, B, C, and so on) required for the passwordto be valid.Minimum/Maximum special charactersSpecifies the minimum and maximum number of special characters (!, @, #, and so on) required for thepassword to be valid.Leaving any of the above options blank causes the widget to validate against that criterion. For example, if you leave the Minimum/Maximumnumbers option blank, the widget does not look for numbers in the password string.Customize the Validation Password widgetAlthough the Property inspector enables you to make simple edits to a Validation Password widget, it does not support customized styling tasks.You can alter the CSS for the Validation Password widget so that you can create a widget that is styled to your liking. For a more advanced list ofstyling tasks, see All CSS rules in the topics below refer to the default rules located in the SpryValidationPassword.css file. Dreamweaver saves theSpryValidationPassword.css file in the SpryAssets folder of your site whenever you create a Spry Validation Password widget. Consulting this file ishelpful because it contains commented information about various styles that apply to the widget.Although you can easily edit rules for the Validation Password widget directly in the accompanying CSS file, you can also use the CSS Stylespanel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget,especially if you use the panel’s Current mode.Style a Validation Password widget (general instructions)Open the SpryValidationPassword.css file.Locate the CSS rule for the part of the widget to change. For example, to change the background color of the Passwordwidget’s required state, edit the rule in the SpryValidationPassword.css file.Make your changes to the CSS and save the file.The SpryValidationPassword.css file contains extensive comments, explaining the code and the purpose for certain rules. For further information,see the comments in the file.Style Validation Password widget error message text
250

By default, error messages for the Validation Password widget appear in red with a 1-pixel solid border surrounding the text.
To change the text styling of Validation Password widget error messages, use the following table to locate the appropriate CSS rule, and thenchange the default properties, or add your own text-styling properties and values.Text to changeRelevant CSS ruleRelevant properties to changeError message text.passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState color: #CC3333; border: 1px solidChange Validation Password widget background colors
To change the background colors of the Validation Password widget in various states, use the following table to locate the appropriate CSS rule,and then change the default background color values.Color to changeRelevant CSS ruleRelevant property to changeBackground color of widget in valid state.passwordValidState input, background-color: #B8F5B1;Background color of widget in invalid stateinput.passwordRequiredState, .passwordRequiredState input, ate, .passwordInvalidStrengthState input, input.passwordMinCharsState, .passwordMinCharsState input, input.passwordCustomState, .passwordCustomState input, input.passwordMaxCharsState, .passwordMaxCharsState inputbackground-color: #FF9F9F;Background color of widget in focus.passwordFocusState input, background-color: #FFFFCC;More Help topicsValidation Password widget samples
Legal Notices | Online Privacy Policy
251
Page content and assets
252
Working with Photoshop and Dreamweaver
To the topTo the topAbout Photoshop integrationAbout Smart Objects and Photoshop-Dreamweaver workflowsCreate a Smart ObjectUpdate a Smart ObjectUpdate multiple Smart ObjectsResize a Smart ObjectEdit a Smart Object’s original Photoshop fileSmart Object statesCopy and paste a selection from PhotoshopEdit pasted imagesSetting Image Optimization dialog box optionsAbout Photoshop integrationYou can insert Photoshop image files (PSD format) into web pages in Dreamweaver and let Dreamweaver optimize them as webready images(GIF, JPEG, and PNG formats). When you do this, Dreamweaver inserts the image as a Smart Object and maintains a live connection to theoriginal PSD file.You can also paste all or part of a multi-layered or multi-sliced Photoshop image into a web page in Dreamweaver. When you copy and paste fromPhotoshop, however, no live connection to the original file is maintained. To update the image, make your changes in Photoshop, and copy andpaste again.If you use this integration feature often, you may want to store your Photoshop files in your Dreamweaver site for easier access. If you do,be sure to cloak them to avoid exposure of the original assets, as well as unnecessary transfers between the local site and the remote server.For a tutorial about the Smart Object workflow in Photoshop and Dreamweaver, see About Smart Objects and Photoshop-Dreamweaver workflowsThere are two main workflows for working with Photoshop files in Dreamweaver: the copy/paste workflow, and the Smart Objects workflow.Copy/paste workflowThe copy/paste workflow lets you select slices or layers in a Photoshop file, and then use Dreamweaver to insert them as web-ready images. Ifyou want to update the content later on, however, you must open the original Photoshop file, make your changes, copy your slice or layer to theclipboard again, and then paste the updated slice or layer into Dreamweaver. This workflow is only recommended when you want to insert part ofa Photoshop file (for example, a section of a design comp) as an image on a web page.Smart Objects workflowWhen working with complete Photoshop files, Adobe recommends the Smart Objects workflow. A Smart Object in Dreamweaver is an image assetplaced on a web page that has a live connection to an original Photoshop (PSD) file. In Dreamweaver Design view, a Smart Object is denoted byan icon in the upper left corner of the image.
253
To the topTo the top
Smart Object
When the web image (that is, the image on the Dreamweaver page) is out of sync with the original Photoshop file, Dreamweaver detects that theoriginal file has been updated, and displays one of the Smart Object icon’s arrows in red. When you select the web image in Design view and clickthe Update from Original button in the Property inspector, the image updates automatically, reflecting any changes that you made to the originalPhotoshop file.When you use the Smart Objects workflow, you do not need to open Photoshop to update a web image. Additionally, any updates you make to aSmart Object in Dreamweaver are non-destructive. That is, you can change the web version of the image on your page while keeping the originalPhotoshop image intact.You can also update a Smart Object without selecting the web image in Design view. The Assets panel lets you update all Smart Objects,including images that might not be selectable in the Document window (for example, CSS background images).Image optimization settingsFor both the copy/paste and the Smart Object workflows, you can specify optimization settings in the Image Optimization dialog box. This dialogbox lets you specify the file format and image quality. If you are copying a slice or a layer, or inserting a Photoshop file as a Smart Object for thefirst time, Dreamweaver displays this dialog so that you can easily create the web image.If you copy and paste an update to a particular slice or layer, Dreameaver remembers the original settings and re-creates the web image withthose settings. Likewise, when you update a Smart Object using the Property inspector, Dreamweaver uses the same settings you used when youfirst inserted the image. You can change an image’s settings at any time by selecting the web image in Design view, and then clicking the Image Settings button in the Property inspector.Storing Photoshop filesIf you’ve inserted a web image, and have not stored the original Photoshop file in your Dreamweaver site, Dreamweaver recognizes the path to theoriginal file as an absolute local file path. (This is true for both the copy/paste and Smart Object workflows.) For example, if the path to yourDreamweaver site is C:\Sites\mySite, and your Photoshop file is stored in C:\Images\Photoshop, Dreameaver will not recognize the original assetas part of the site called mySite. This will cause problems if you ever want to share the Photoshop file with other team members becauseDreamweaver will only recognize the file as being available on a particular local hard drive.If you store the Photoshop file inside your site, however, Dreamweaver establishes a site-relative path to the file. Any user with access to the sitewill also be able to establish the correct path to the file, assuming that you have also provided the original file for them to download.For a video tutorial on the Smart Objects workflow in Photoshop and Dreamweaver, see Create a Smart ObjectWhen you insert a Photoshop image (PSD file) into your page, Dreamweaver creates a Smart Object. A Smart Object is a web-ready image thatmaintains a live connection to the original Photoshop image. Whenever you update the original image in Photoshop, Dreamweaver gives you theoption of updating the image in Dreamweaver with the click of a button.In Dreamweaver (Design or Code view), place the insertion point on your page where you want the image inserted.Select InsertImage.You can also drag the PSD file to the page from the Files panel if you’re storing your Photoshop files in your website. If youdo so, you’ll skip the next step.Locate your Photoshop PSD image file in the Select Image Source dialog box by clicking the Browse button and navigating toIn the Image Optimization dialog box that appears, adjust optimization settings as needed and click OK.Save the webready image file to a location within your website’s root folder.Dreamweaver creates the Smart Object based on the selected optimization settings and places a web-ready version of the image on your page.The Smart Object maintains a live connection to the original image and lets you know when the two are out of synch.If you decide later that you want to change the optimization settings for an image placed in your pages, you can select the image, click theEdit Image Settings button in the Property inspector, and make changes in the Image Optimization dialog box. Changes made in the dialog box are applied non-destructively. Dreamweaver never modifies the original Photoshop file, and always re-creates the webimage based on the original data.For a video tutorial about working with Photoshop Smart Objects, see Update a Smart ObjectIf you change the Photoshop file to which your Smart Object is linked, Dreamweaver notifies you that the web-ready image is out of sync with theoriginal. In Dreamweaver, Smart Objects are denoted by an icon at the upper left corner of the image. When the web-ready image in
254
To the topTo the topTo the topTo the top
Dreamweaver is in sync with the original Photoshop file, both of the arrows in the icon are green. When the web-ready image is out of sync with
the original Photoshop file, one of the icon’s arrows turns read.
To update a Smart Object with the current contents of the original Photoshop file, select the Smart Object in the Documentwindow, and then click the Update from Original button in the Property inspector.You do not need Photoshop installed to make the update from Dreamweaver.Update multiple Smart ObjectsYou can update multiple Smart Objects at once using the Assets panel. The Assets panel also lets you see Smart Objects that might not beselectable in the Document window (for example, CSS background images).In the Files panel, click the Assets tab to view site assets.Make sure that Images view is selected. If it isn’t, click the Select each image asset in the Assets panel. When you select a Smart Object, you’ll see the Smart Object icon in the upperleft corner of the image. Regular images do not have this icon.For each Smart Object that you want to update, right-click the filename and select Update from Original. You can also Control-click to select multiple filenames and update them all at once.You do not need Photoshop installed to make the update from Dreamweaver.Resize a Smart ObjectYou can resize a Smart Object in the Document window just as you would any other image.Select the Smart Object in the Document window and drag the resize handles to resize the image. You can maintain the widthand height proportions by holding down the Shift key as you drag.Click the Update from Original button in the Property inspector.When you update the Smart Object, the web image non-destructively re-renders at the new size, based on the currentcontents of the original file, and the original optimization settings.Edit a Smart Object’s original Photoshop fileAfter you create a Smart Object on your Dreamweaver page, you can edit the original PSD file in Photoshop. After you make your changes inPhotoshop, you can then easily update the web image in Dreamweaver.Make sure that you have Photoshop set as your primary external image editor.Select the Smart Object in the Document window.Click the button in the Property inspector.Make your changes in Photoshop and save the new PSD file.In Dreamweaver, select the Smart Object again and click the Update from Original button.If you changed the size of your image in Photoshop, you need to reset the size of the web image in Dreamweaver. Dreamweaver updates aSmart Object based only on the contents of the original Photoshop file, and not its size. To sync the size of a web image with the size of theoriginal Photoshop file, right-click the image and select Reset Size To OriginalSmart Object statesThe following table lists the various states for Smart Objects.
SmartObject stateRecommended actionImages synchedThe web image is in sync with the currentcontents of the original Photoshop file.Width and height attributes in the HTMLcode match the dimensions of the webOriginal asset modifiedThe original Photoshop file has beenUse the Update From Original button in
255
To the topTo the topCopy and paste a selection from PhotoshopYou can copy all or some of a Photoshop image and paste the selection into your Dreamweaver page as a web-ready image. You can copy asingle layer or a set of layers for a selected area of the image or you can copy a slice of the image. When you do this, however, Dreamweaverdoes not create a Smart Object.While the Update from Original functionality is not available for pasted images, you can still open and edit the original Photoshop file byselecting the pasted image and clicking the button in the Property inspector.In Photoshop, do one of the following:
Copy all or part of a single layer by using the Marquee tool to select the portion you want to copy, and then choose . This copies only the active layer for the selected area into the clipboard. If you have layer-based effects, they arenot copied.
Copy and merge multiple layers by using the Marquee tool to select the portion you want to copy, and then choose Copy Merged. This flattens and copies all the selected area’s active and lower layers into the clipboard. If you have layer-based effects associated with any of these layers, they are copied.
Copy a slice by using the Slice Select tool to select the slice, and then choose . This flattens and copies allthe slice’s active and lower layers into the clipboard.You can choose to quickly select all of an image for copying.In Dreamweaver (Design or Code view), place the insertion point on your page where you want the image inserted.Select EditPaste.In the Image Optimization dialog box, adjust optimization settings as needed and click OK.Save the webready image file to a location within your website’s root folder.Dreamweaver defines the image according to your optimization settings and places a web-ready version of your image in your page. Informationabout the image, such as the location of the original PSD source file, is saved in a Design Note, regardless of whether you have enabled DesignNotes for your site. The Design Note allows you to return to edit the original Photoshop file from Dreamweaver.For a tutorial on copying and pasting between different applications, including Dreamweaver and Photoshop, see Edit pasted imagesAfter you paste Photoshop images in your Dreamweaver pages, you can edit the original PSD file in Photoshop. When using the copy/pasteworkflow, Adobe recommends that you always make your edits to the original PSD file (rather than the web-ready image itself), and then repasteto maintain single sourcing.Make sure that you have Photoshop set as your primary external image editor for the file type you want to edit.In Dreamweaver, select a web-ready image that was originally created in Photoshop and do one of the following:
Click the button in the image’s Property inspector.
modified after the creation of the web
image in Dreamweaver.
the Property inspector to sync the two
Dimensions of web image are differentfrom selected HTML width and heightThe width and height attributes in theHTML code are different from the widthand height dimensions of the web imagethat Dreamweaver created upon insertion.If the web image’s dimensions are smallerthan the selected HTML width and heightvalues, the web image can appearUse the Update From Original button inthe Property inspector to re-create the webimage from the original Photoshop file.Dreamweaver uses the currently specifiedHTML width and height dimensions whenit re-creates the image.Dimensions of original asset are too smallfor selected HTML width and heightThe width and height attributes in theHTML code are larger than the width andheight dimensions of the originalPhotoshop file. The web image canappear pixelated.Don’t create web images with dimensionslarger than the dimensions of the originalPhotoshop file.Original asset not foundDreamweaver cannot find the originalPhotoshop file specified in the Original textbox of the Property inspector.Correct the file path in the Original textbox of the Property inspector, or move thePhotoshop file to the location that’scurrently specified.
256
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
To the top
Press Control (Windows) or Command (Macintosh) as you double-click the file.
Right-click (Windows) or Control-click (Macintosh) an image, choose Edit Original With from the context menu, and thenchoose Photoshop.This assumes that Photoshop is set as the primary external image editor for PSD image files. You may also want to setPhotoshop as the default editor for JPEG, GIF, and PNG file types.Edit the file in Photoshop.Return to Dreamweaver and paste the updated image or selection into your page.If you want to reoptimize the image at any time, you can select the image and click the Edit Image Settings button in the Property inspector.Setting Image Optimization dialog box optionsWhen you create a Smart Object or paste a selection from Photoshop, Dreamweaver displays the Image Optimization dialog box. (Dreamweaveralso displays this dialog box for any other kind of image if you select the image and click the Edit Image Settings button in the Property inspector.)This dialog box lets you define and preview settings for web-ready images using the right mix of color, compression, and quality.A web-ready image is one that can be displayed by all modern web browsers and looks the same no matter what system or browser the viewer isusing. In general, the settings result in a trade-off between quality and file size.Whatever settings you select only affect the imported version of the image file. The original Photoshop PSD or Fireworks PNG file alwaysremains untouched.Choose a Preset that best suits your requirements. The file size of the image changes based on your chosen preset. An instant preview ofthe image with the applied setting is displayed in the background.For example, for images that have to be displayed with a high degree of clarity, choose PNG24 for Photos (Sharp Details). Select GIF ForBackground Images (Patterns) if you are inserting a pattern that will act as the background of the page.When you select a preset, the configurable options for the preset are displayed. If you want to further customize optimization settings, modify thevalues for these options.
257
Working with the Spry Menu Bar widget
To the topTo the topAbout the Menu Bar widgetInsert and edit the Menu Bar widgetCustomize the Menu Bar widgetAbout the Menu Bar widgetA Menu Bar widget is a set of navigational menu buttons that display submenus when a site visitor hovers over one of the buttons. Menu Bars letyou display a large amount of navigational information in a compact space, and also give visitors to the site a sense of what is available on the sitewithout having to browse it extensively.Dreamweaver lets you insert two kinds of Menu Bar widgets: vertical and horizontal. The following example shows a horizontal Menu Bar widget,with the third menu item expanded:
Menu Bar widget (consists of&#xul00; &#xli00; andꀀ tags) Menu item has submenu Submenu item has submenu The HTML for the Menu Bar widget comprises an outer tag that contains an tag for each of the top-level menu items. The top-level menuitems (li tags) in turn contain and tags that define submenus for each of the items, and submenus can likewise contain submenus. Top-level menus and submenus can contain as many submenu items as you like.For a more comprehensive explanation of how the Menu Bar widget works, including a full anatomy of the Menu Bar widget’s code, seeFor a tutorial on creating a Spry Menu Bar, see Insert and edit the Menu Bar widgetInsert the Menu Bar widgetSelect Insertꀀ Spryꀀ Spry Menu Bar.Select Horizontal or Vertical, and click OK.You can also insert a Menu Bar widget using the Spry category of the Insert panel.The Spry Menu Bar widget uses DHTML layers to display sections of HTML on top of other sections. If your page contains content createdwith Adobe Flash, this might cause a problem because SWF files are always displayed on top of all other DHTML layers, so the SWF file might bedisplayed on top of your submenus. The workaround for this situation is to change the parameters for the SWF file to use. You can easily do this by selecting the SWF file in the Document window, and setting the option in the Propertyinspector to . For more information, see Add or delete menus and submenusUse the Property inspector (Windowꀀ Properties) to add or delete menu items to and from the Menu Bar widget.Add a main menu itemSelect a Menu Bar widget in the Document window.In the Property inspector, click the plus button above the first column.(Optional) Rename the new menu item by changing the default text in either the Document window or the Text box of theProperty inspector.Add a submenu item
258
Note:_blank_self_parent_top
Select a Menu Bar widget in the Document window.
In the Property inspector, select the name of the main menu item to which you want to add the submenu.Click the plus button above the second column.(Optional) Rename the new submenu item by changing the default text in either the Document window or the Text box of theProperty inspector.To add a submenu to a submenu, select the name of the submenu item to which you want to add another submenu item, and click the plus buttonabove the third column in the Property inspector.Dreamweaver only supports two levels of submenus in Design view, but you can add as many submenus as you want in Code view.Delete a main menu or submenu itemSelect a Menu Bar widget in the Document window.In the Property inspector, select the name of the main menu or submenu item you want to delete and click the minus button.Change the order of menu itemsSelect a Menu Bar widget in the Document window.In the Property inspector (Window� Properties), select the name of the menu item you want to reorder.Click the up or down arrows to move the menu item up or down.Change the text of a menu itemSelect a Menu Bar widget in the Document window.In the Property inspector (Window� Properties) select the name of the menu item whose text you want to change.Make your changes in the Text box.Link a menu itemSelect a Menu Bar widget in the Document window.In the Property inspector (Window� Properties) select the name of the menu item to which you want to apply a link.Type the link in the Link text box, or click the folder icon to browse to a file.Create a tool tip for a menu itemSelect a Menu Bar widget in the Document window.In the Property inspector (Window� Properties) select the name of the menu item for which you want to create a tool tip.Type the text for the tool tip in the Title text box.Assign a target attribute for a menu itemThe target attribute specifies where to open a linked page. For example, you can assign a target attribute to a menu item so that the linked pageopens in a new browser window when the site visitor clicks the link. If you are using framesets, you can also specify the name of a frame whereyou want the linked page to open.Select a Menu Bar widget in the Document window.In the Property inspector (Window� Properties), select the name of the menu item to which you want to assign a targetEnter one of the four attributes in the Target box:Opens the linked page in a new browser window.Loads the linked page in the same browser window. This is the default option. If the page is in a frame or frameset, thepage loads within that frame.Loads the linked document in the immediate frameset parent of the document.Loads the linked page in the topmost window of a frameset.Turn off stylesYou can disable the styling of a Menu Bar widget so that you can better see the HTML structure of the widget in Design view. For example, whenyou disable styles, menu bar items are displayed in a bulleted list on the page, rather than as the styled items of the menu bar.Select a Menu Bar widget in the Document window.Click the Turn Styles Off button in the Property Inspector (Window� Properties).
259
To the top
Change the orientation of a Menu Bar widget
You can change the orientation of a Menu Bar widget from horizontal to vertical, and vice versa. All you need to do is alter the HTML code for themenu bar and make sure you have the correct CSS file in your SpryAssets folder.The following example changes a horizontal Menu Bar widget to a vertical Menu Bar widget.In Dreamweaver, open the page that contains a horizontal Menu Bar widget.Insert a vertical Menu Bar widget (Insert� Spry� Spry Menu Bar) and save the page. This step ensures that the correct CSSfile for a vertical menu bar is included in your site.If your site already has a vertical Menu Bar widget somewhere else, you don’t need to insert a new one. You cansimply attach the SpryMenuBarVertical.css file to the page instead by clicking the Attach Style Sheet button in the CSS Stylespanel (Windows� CSS Styles).Delete the vertical Menu Bar.In Code view (View� Code), locate the MenuBarHorizontal class and change it to MenuBarVertical. The MenuBarHorizontalclass is defined in the container tag for the menu bar ( id="MenuBar1"&#xul-5;瀀 class="MenuBarHorizontal"After the code for the menu bar, locate the menu bar constructor:var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", Remove the preload option (and comma) from the constructor:var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",: If converting from a vertical menu bar to a horizontal one, add the preload option and comma instead.var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", (Optional) If your page no longer contains any other horizontal Menu Bar widgets, delete the link to the formerMenuBarHorizontal.css file in the head of the document.Save the page.Customize the Menu Bar widgetAlthough the Property inspector enables you to make simple edits to a Menu Bar widget, it does not support customized styling tasks. You canalter the CSS rules for the Menu Bar widget and create a menu bar that is styled to your liking.All CSS rules in the topics below refer to the default rules located in the SpryMenuBarHorizontal.css or SpryMenuBarVertical.css file (dependingon your selection). Dreamweaver saves these CSS files in the SpryAssets folder of your site whenever you create a Spry Menu Bar widget. Thesefiles also contain useful commented information about various styles that apply to the widget.Although you can easily edit rules for the Menu Bar widget directly in the accompanying CSS file, you can also use the CSS Styles panel toedit the menu bar’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially ifyou use the panel’s Current mode.Change text styling of a menu itemThe CSS attached to theꀀ tag contains the information for text styling. There are also several relevant text styling class values attached to theꀀ tag that pertain to different menu states.
To change the text styling of a menu item, use the following table to locate the appropriate CSS rule, and then change thedefault value:Style to changeCSS rule for vertical or horizontalmenu barRelevant properties and defaultDefault textul.MenuBarVertical a,ul.MenuBarHorizontal acolor: #333; text-decoration: none;Text color when mouse pointermoves over itul.MenuBarVertical a:hover,color: #FFF;Text color when in focusul.MenuBarVertical a:focus,color: #FFF;
260
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
a:focus
Menu Bar item color when mousepointer moves over itcolor: #FFF;Submenu item color when mousepointer moves over itcolor: #FFF;Change the background color of a menu itemThe CSS attached to theꀀ tag contains the information for a menu item’s background color. There are also several relevant background colorclass values attached to theꀀ tag that pertain to different menu states.
To change the background color of a menu item, use the following table to locate the appropriate CSS rule, and then changethe default value:Change the dimension of menu itemsYou change the dimension of menu items by changing the width properties of the menu item’s and Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal liChange the width property to a desired width (or change the property to to remove a fixed width, and add the propertyand value white-space: nowrap; to the rule).Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ulChange the width property to a desired width (or change the property to to remove a fixed width).Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul liAdd the following properties to the rule: float: none; and background-color: transparent;Delete the width: 8.2em; property and value.Position submenusThe position of Spry Menu Bar submenus is controlled by the margin property on submenu Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ulChange the margin: -5% 0 0 95%; default values to the desired values.
Spry Menu Bar tutorial
The CSS Styles panel in Current mode
Color to changeCSS rule for vertical or horizontalmenu barRelevant properties and defaultDefault backgroundul.MenuBarVertical a,ul.MenuBarHorizontal abackground-color: #EEE;Background color when mousepointer moves over itul.MenuBarVertical a:hover,background-color: #33C;Background color when in focusul.MenuBarVertical a:focus,background-color: #33C;Menu Bar item color when mousepointer moves over itbackground-color: #33C;Submenu item color when mousepointer moves over itbackground-color: #33C;
261
Creating and opening documents
To the topTo the topAbout creating Dreamweaver documentsDreamweaver file typesCreate a layout using a blank pageCreate a blank templateCreate a page based on an existing templateCreate a page based on a Dreamweaver sample fileCreate other kinds of pagesSave and revert documentsSet default document type and encodingConverting HTML5 to an older doctypeSet the default file extension of new HTML documentsOpen and edit existing documentsOpen Related FilesOpen Dynamically-Related FilesClean up Microsoft Word HTML filesAbout creating Dreamweaver documentsDreamweaver offers a flexible environment for working with a variety of web documents. In addition to HTML documents, you can create and opena variety of text-based documents, including ColdFusion Markup Language (CFML), ASP, JavaScript, and Cascading Style Sheets (CSS). Sourcecode files, such as Visual Basic, .NET, C#, and Java, are also supported.Dreamweaver provides several options for creating a new document. You can create any of the following:
A new blank document or template
A document based on one of the predesigned page layouts that comes with Dreamweaver, including over 30 CSS-based page
A document based on one of your existing templatesYou can also set document preferences. For example, if you typically work with one type of document, you can set it as thedefault document type for new pages you create.You can easily define document properties, such as meta tags, document title, and background colors, and several other pageproperties in either Design view or Code view.Dreamweaver file typesYou can work with a variety of file types in Dreamweaver. The primary kind of file you will work with is the HTML file. HTML files—or HypertextMarkup Language files—contain the tag-based language responsible for displaying a web page in a browser. You can save HTML files with eitherthe .html or .htm extension. Dreamweaver saves files using the .html extension by default.Dreamweaver lets you create and edit HTML5-based web pages. Starter layouts are also available for building HTML5 pages from scratch.Following are some of the other common file types you might use when working in Dreamweaver:Cascading Style Sheet files have a .css extension. They are used to format HTML content and control the positioning of various pageGraphics Interchange Format files have a .gif extension. GIF format is a popular web graphic format for cartoons, logos, graphics withtransparent areas, and animations. GIFs contain a maximum of 256 colors.Joint Photographic Experts Group files (named after the organization that created the format) have a .jpg extension, and are usuallyphotographs or high-color images. The JPEG format is best for digital or scanned photographs, images using textures, images with gradient colortransitions, and any images that require more than 256 colors.Extensible Markup Language files have a .xml extension. They contain data in a raw form that can be formatted using XSL (ExtensibleStylesheet Language).Extensible Stylesheet Language files have a .xsl or .xslt extension. They are used to style XML data that you want to display on a web page.
262
CFML
To the topAdd To HeadCreate New FileLink To Existing File
ColdFusion Markup Language files have a .cfm extension. They are used to process dynamic pages.
Hypertext Preprocessor files have a .php extension and are used to process dynamic pages.Create a layout using a blank pageYou can create a page that contains a predesigned CSS layout, or create a completely blank page and then create a layout of your own.Select FileNew.In the Blank Page category of the New Document dialog box, select the kind of page you want to create from the Page Typecolumn. For example, select to create a plain HTML page, select to create a ColdFusion page, and so on.If you want your new page to contain a CSS layout, select a predesigned CSS layout from the column; otherwise,select None. Based on your selection, a preview and description of the selected layout appears on the right side of the dialogThe predesigned CSS layouts provide the following types of columns:Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor’stext settings.Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitormakes the browser wider or narrower, but does not change based on the site visitor’s text settings.Dreamweaver also offers two HTML5 CSS layouts: two- and three-column fixed.Select a document type from the pop-up menu. In most cases, you can use the default selection, XHTML 1.0Transitional.Selecting one of the XHTML document type definitions from the DocType (DTD) menu makes your page XHTML-compliant.For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strictfrom the menu. XHTML (Extensible Hypertext Markup Language) is a reformulation of HTML as an XML application. Generally,using XHTML gives you the benefits of XML, while ensuring the backward and future compatibility of your web documents.For more information about XHTML, see the World Wide Web Consortium (W3C) website, which contains thespecification for XHTML 1.1 - Module-Based XHTML () and XHTML 1.0 (as well as XHTML validator sites for web-based files () and local files (http://validator.w3.org/file-Dreamweaver also offers HTML5 as a doctype option.If you selected a CSS layout in the column, select a location for the layout’s CSS from the Layout CSS pop-up menu.Adds CSS for the layout to the head of the page you’re creating.Adds CSS for the layout to a new external CSS file and attaches the new style sheet to the page you’reLets you specify an existing CSS file that already contains the CSS rules needed for the layout. To dothis, click the Attach Style Sheet icon above the Attach CSS file pane and select an existing CSS style sheet. This option isparticularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a single file) acrossmultiple documents.(Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page.To do this, click the Attach Style Sheet icon
above the Attach CSS File pane and select a CSS style sheet.For a detailed walk-through of this process, see David Powers’s article, Automatically attaching a style sheet to newSelect Enable InContext Editing if you want to create a page that becomes InContext Editing-enabled as soon as you save it.An InContext Editing-enabled page must have at least one tag that can be specified as an editable region. For example, ifyou’ve selected the HTML page type, you must select one of the CSS layouts for your new page, since these layouts alreadycontain pre-defined tags. The InContext Editing editable region is automatically placed on the tag with the You can later add more editable regions to the page if you like.
263
To the topAdd to HeadCreate New FileLink To Existing File
Click Preferences if you want to set default document preferences, such as a document type, encoding, and a file extension.
Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design content.Click the Save the new document Save).In the dialog box that appears, navigate to the folder where you want to save the file.It’s a good idea to save your file in a Dreamweaver site.In the File Name box, type a name for the file.Avoid using spaces and special characters in file and folder names, and do not begin a filename with a numeral. In particular,do not use special characters (such as é, ç, or Â¥) or punctuation marks (such as colons, slashes, or periods) in the names offiles you intend to put on a remote server; many servers change these characters during upload, which will cause any links tothe files to break.Create a blank templateYou can use the New Document dialog box to create Dreamweaver templates. By default, templates are saved in the folder of yourSelect FileNew.In the New Document dialog box, select the Blank Template category.Select the kind of page you want to create from the Template Type column. For example, select HTML template to create aplain HTML template, select ColdFusion template to create a ColdFusion template, and so on.If you want your new page to contain a CSS layout, select a predesigned CSS layout from the column; otherwise,select None. Based on your selection, a preview and description of the selected layout appears on the right side of the dialogThe predesigned CSS layouts provide the following types of columns:Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor’stext settings.Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitormakes the browser wider or narrower, but does not change based on the site visitor’s text settings.Select a document type from the DocType pop-up menu. In most cases, you will want to leave this selected to the defaultselection, XHTML 1.0 Transitional.Selecting one of the XHTML document type definitions from the DocType (DTD) menu makes your page XHTML-compliant.For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strictfrom the menu. XHTML (Extensible Hypertext Markup Language) is a reformulation of HTML as an XML application. Generally,using XHTML gives you the benefits of XML, while ensuring the backward and future compatibility of your web documents.For more information about XHTML, see the World Wide Web Consortium (W3C) website, which contains thespecification for XHTML 1.1 - Module-Based XHTML () and XHTML 1.0 (as well as XHTML validator sites for web-based files () and local files (http://validator.w3.org/file-If you selected a CSS layout in the Layout column, select a location for the layout’s CSS from the Layout CSS pop-up menu.Adds CSS for the layout to the head of the page you’re creating.Adds CSS for the layout to a new external CSS styles sheet and attaches the new style sheet to the pageyou’re creating.Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. To dothis, click the Attach Style Sheet icon
above the Attach CSS file pane and select an existing CSS style sheet. This option isparticularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a single file) acrossmultiple documents.
264
To the top
(Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page.
To do this, click the Attach Style Sheet icon
above the Attach CSS file pane and select a CSS style sheet.Select Enable InContext Editing if you want to create a page that becomes InContext Editing-enabled as soon as you save it.An InContext Editing-enabled page must have at least one tag that can be specified as an editable region. For example, ifyou’ve selected the HTML page type, you must select one of the CSS layouts for your new page, since these layouts alreadycontain pre-defined tags. The InContext Editing editable region is automatically placed on the tag with the You can later add more editable regions to the page if you like.Click Preferences if you want to set default document preferences, such as a document type, encoding, and a file extension.Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design content.Click the Save the new document (). If you haven’t added editable regions to the template yet, a dialog box appears tellingyou that there are no editable regions in the document. Click to close the dialog box.In the Save As dialog box, select a site in which to save the template.In the File Name box, type a name for the new template. You do not need to append a file extension to the name of thetemplate. When you click , the .dwt extension is appended to the new template, which is saved in the folder ofyour site.Avoid using spaces and special characters in file and folder names and do not begin a filename with a numeral. In particular,do not use special characters (such as é, ç, or Â¥) or punctuation (such as colons, slashes, or periods) in the names of filesyou intend to put on a remote server; many servers change these characters during upload, which will cause any links to thefiles to break.Create a page based on an existing templateYou can select, preview, and create a new document from an existing template. You can either use the New Document dialog box to select atemplate from any of your Dreamweaver-defined sites or use the Assets panel to create a new document from an existing template.Create a document based on a templateSelect FileNew.In the New Document dialog box, select the Page From Template category.In the column, select the site that contains the template you want use, and then select a template from thelist on the right.Deselect Update Page When Template Changes if you don’t want to update this page each time you make changes to thetemplate on which this page is based.Click Preferences if you want to set default document preferences, such as a document type, encoding, and a file extension.Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design content.Click Create and save the document (Save).Create a document from a template in the Assets panelOpen the panel (), if it is not already open.In the panel, click the Templates icon
on the left to view the list of templates in your current site.If you just created the template you want to apply, you might need to click the button to see it.Right-click (Windows) or Controlclick (Macintosh) the template you want to apply, then select New From TemplateThe document opens in the Save the document.
265
To the topTo the topTo the topCreate a page based on a Dreamweaver sample fileDreamweaver comes with several professionally developed CSS design files and starter pages for mobile applications. You can use these files as starting points for designing pages in your sites. When you create a document based on a sample file, Dreamweaver creates a copy of theYou can preview a sample file and read a brief description of a document’s design elements in the New Document dialog box. In the case of CSSstyle sheets, you can copy a predesigned style sheet and apply it to your documents.Select FileNew.In the New Document dialog box, select the Page From Sample category.In the Sample Folder column, select CSS Style Sheet or Mobile Starters; then select a sample file from the list on the right.Click the Create button.The new document opens in the window ( and views). If you selected CSS Style Sheet, the CSS stylesheet opens in Save the document (Save).If the Copy Dependent Files dialog box appears, set the options, and then click to copy the assets to the selected folder.You can choose your own location for the dependent files or use the default folder location Dreamweaver generates (basedon the sample file’s source name).For information on using starter pages for mobile applications, see:Create other kinds of pagesThe Other category of the New Document dialog box lets you create various types of pages that you might want to use in Dreamweaver, includingC#, VBScript, and text-only pages.Select FileNew.In the New Document dialog box, select the Select the kind of document you want to create from the Page Type column and click the Save the document (Save).Save and revert documentsYou can save a document using its current name and location, or save a copy of a document using a different name and location.When naming files, avoid using spaces and special characters in file and folder names. In particular, do not use special characters (such as é, ç,or Â¥) or punctuation (such as colons, slashes, or periods) in the names of files you intend to put on a remote server; many servers change thesecharacters during upload, which will cause any links to the files to break. Also, do not begin a filename with a numeral.Save a documentDo one of the following:
To overwrite the current version on the disk, and save any changes you have made, select Save.
To save the file in a different folder or using a different name, select Save AsIn the Save As dialog box that appears, navigate to the folder where you want to save the file.In the File Name text box, type a name for the file.Click Save to save the file.Save all open documentsSelect FileSave AllIf there are any unsaved documents open, the Save As dialog box is displayed for each unsaved document.
266
To the topDefault DocumentDefault ExtensionDefault Document Type (DDT)Default EncodingUnicode Normalization FormShow New Document Dialog Box on Control+NIn the dialog box that appears, navigate to the folder where you want to save the file.In the File Name box, type a name for the file and click Save.Revert to the last saved version of a documentSelect FileRevert.A dialog box asks if you want to discard your changes, and revert to the previously saved version.Click Yes to revert to the previous version; click to keep your changes.If you save a document, and then exit Dreamweaver, you cannot revert to the previous version of the document whenyou restart Dreamweaver.Set default document type and encodingYou can define which document type is used as a default document for a site.For example, if most pages in your site are of a specific file type (such as Cold Fusion, HTML, or ASP documents), you can set documentpreferences that automatically create new documents of the specified file type.Select Edit (Windows) or You can also click the button in the New Document dialog box to set new document preferences when youcreate a new document.Click New Document from the category list on the left.Set or change preferences as necessary, and click to save them.Select a document type that will be used for pages that you create.Specify the file extension you prefer (.htm or .html) for new HTML pages you create.: This option is disabled for other file types.Select one of the XHTML document type definitions (DTD) to make new pages XHTML-compliant. For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or 1.0 Strict from the menu.Specify the encoding to be used when a new page is created, as well as when a document is opened thatdoes not specify any encoding.If you select Unicode (UTF as the document encoding, entity encoding is not necessary because UTF8 can safelyrepresent all characters. If you select another document encoding, entity encoding may be necessary to represent certaincharacters. For more information on character entities, see www.w3.org/TR/REC-html40/sgml/entities.htmlIf you select Unicode (UTF as a default encoding, you can include a Byte Order Mark (BOM) in the document by selectingthe Include Unicode Signature (BOM) option.A BOM is 2-4 bytes at the beginning of a text file that identifies a file as Unicode, as well as the byte order of the followingbytes. Because UTF8 has no byte order, adding a UTF8 BOM is optional. For UTF16 and UTF32, it is required.Select one of these options if you select Unicode (UTF-8) as a default encoding.There are four Unicode Normalization Forms. The most important is Normalization Form C because it's the most common oneused in the Character Model for the World Wide Web. Adobe provides the other three Unicode Normalization Forms forDeselect this option (“on Command+N” for Macintosh) to automaticallycreate a document of the default document type when you use the key command.In Unicode, there are characters that are visually similar but can be stored within the document in different ways. For example,“ë” (eumlaut) can be represented as a single character, “eumlaut,” or as two characters, “regular Latin e” + “combiningumlaut.” A Unicode combining character is one that gets used with the previous character, so the umlaut would appear abovethe “Latin e.” Both forms result in the same visual typography, but what is saved in the file is different for each form.Normalization is the process of making sure all characters that can be saved in different forms are all saved using the same
form. That is, all “ë” characters in a document are saved as single “eumlaut” or as “e” + “combining umlaut,” and not as both
267
To the topTo the topTo the topTo the topforms in one document.For more information on Unicode Normalization and the specific forms that can be used, see the Unicode website atConverting HTML5 to an older doctypeUsing File to switch from HTML5 to an older DOCTYPE doesn’t remove HTML5 elements or attributes. Only the DOCTYPE changes,and trailing slashes (for XHTML) are inserted.Semantic tags, such as and , and attributes such as , and are not affected.Set the default file extension of new HTML documentsYou can define the default file extension of HTML documents created in Dreamweaver. For example, you can use an .htm or .html extension for allnew HTML documents.Select Edit (Windows) or You can also click the button in the New Document dialog box to set new document preferences when youcreate a new document.Click New Document from the category list on the left.Make sure that HTML is selected in the Default Document pop-up menu.In the Default Extension box, specify the file extension you want for new HTML documents created in Dreamweaver.For Windows, you can specify the following extensions: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml.For Macintosh, you can specify the following extensions: .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.Open and edit existing documentsYou can open an existing web page or text-based document, whether or not it was created in Dreamweaver, and edit it in either Design view orCode view.If the document you open is a Microsoft Word file that was saved as an HTML document, you can use the Cleanup Word HTML command toremove the extraneous markup tags that Word inserts into HTML files.To clean up HTML or XHTML that was not generated by Microsoft Word, use the Cleanup HTML command.You can also open non-HTML text files, such as JavaScript files, XML files, CSS style sheets, or text files saved by word processors or textSelect FileOpen.You can also use the Files panel to open files.Navigate to and select the file you want to open.If you haven’t already done so, it’s a good idea to organize files you plan to open and edit in a Dreamweaver site,instead of opening them from another location.Click Open.The document opens in the Document window. JavaScript, text, and CSS Style Sheets open in view by default. You canupdate the document while working in Dreamweaver, and save the changes in the file.Open Related FilesDreamweaver lets you view files related to your main document, without losing the main document’s focus. For example, if you have CSS andJavaScript files attached to a main document, Dreamweaver lets you view and edit these related files in the Document window while keeping themain document visible.Dynamically Related Files (such as PHP files in Content Management Systems) are covered in the next Help section.By default, Dreamweaver displays the names of all files related to a main document in a Related Files toolbar below the main document’s title. Theorder of the buttons in the toolbar follows the order of related files links that exist within the main document.
268
If a related file is missing, Dreamweaver still displays the corresponding button in the Related Files toolbar. If you click the button, however,Dreamweaver does not display anything.Dreamweaver supports the following kinds of related files:
Client-side script files
Server Side Includes
Spry data set sources (XML and HTML)
External CSS style sheets (including nested style sheets)For a video overview from the Dreamweaver engineering team about working with related files, see For a video tutorial on working with Live View, related files, and the Code Navigator, see Open a related file from the Related Files toolbarDo one of the following:
In the Related Files toolbar at the top of the document, click the filename of the related file you want to open.
In the Related Files toolbar, right-click the filename of the related file you want to open and select Open as Separate File fromthe context menu. When you open a related file by this method, the main document does not remain simultaneously visible.Open a related file from the Code navigatorPlace the insertion point on a line or in an area that you know is affected by a related file.Wait for the Code Navigator indicator to appear, and then click it to open the Code NavigatorHover over the items in the Code Navigator to see more information about them. For example, if you want to change aparticular CSS color property, but don’t know which rule it resides in, you can find the property by hovering over the availablerules in the Code NavigatorClick the item you’re interested in to open the corresponding related file.Return to the source code of the main document
Click the Source Code button in the Related Files toolbar.Change the display of related filesYou can view related files in a number of ways:
When you open a related file from Design view or and Design views (Split view), the related file displays in a split viewabove the Design view of the main document.You can select Design View on Top if you want the related file to display at the bottom of the Document window
When you open a related file from vertically split and Design views (View� Split vertically), the related file displays in asplit view alongside the view of the main document.You can select or deselect Design View on Left Design View on Left), depending on where you want the
When you open a related file from Split Code view or Vertical Split Code view (Split Code view, and ), the related file displays in a split view beneath, above, or alongside the source code for the main document,depending on the options you have selected.The “code view” in the display option refers to the source code of the main document. For example, if you select View on Top, Dreamweaver displays the source code of the main document in the top half of the Document window. If youselect ViewCode View on Left, Dreamweaver displays the source code of the main document on the left side of theDocument window.
Standard Code view does not let you display related Documents at the same time as the main document’s source code.Disable related filesSelect Edit� Preferences (Windows) or � Preferences In the category, deselect Enable Related Files
269
To the topOpen Dynamically-Related FilesThe Dynamically-Related Files feature extends the functionality of the Related Files feature by allowing you to see the related files of dynamicpages in the Related Files toolbar. Specifically, the Dynamically-Related Files feature lets you see the numerous dynamic includes that arerequired to generate the runtime code for popular open-source PHP Content Management System (CMS) frameworks such as WordPress, Drupaland Joomla!.To use the Dynamically-Related Files feature, you must have access to a local or remote PHP application server running WordPress, Drupal, orJoomla!. One common approach for testing pages is to set up a localhost PHP application server, and test the pages locally.Before you test pages, you’ll need to perform the following steps:
Set up a Dreamweaver site and make sure that you have filled out the Web URL text box the Site Setup dialog box.
Set up a PHP application server.: The server must be running before you attempt to work with Dynamically-Related Files in Dreamweaver.
Install WordPress, Drupal, or Joomla! on the application server. For more information, see:
WordPress Installation
Drupal Installation
Joomla Installation
In Dreamweaver, define a local folder where you’ll download and edit your CMS files.
Define the location of the installed WordPress, Drupal, or Joomla! files as your remote and testing folder.
Download (Get) your CMS files from the remote folder.Set Dynamically-Related Files preferencesWhen you open a page that is associated with Dynamically-Related Files, Dreamweaver can discover the files automatically, or let you discoverthe files manually (which you do by clicking a link in the Info bar above the page). The default setting is manual discovery.Choose Edit (Windows) or Preferences (Macintosh OS).In the category, make sure the Enable Related Files option is selected.Select Manually or from the Dynamically-Related Files pop-up menu. You can also disable the discovery entirelyby selecting Disabled.Discover Dynamically-Related FilesOpen a page that has Dynamically-Related Files associated with it—for example, the site root index.php page of aWordPress, Drupal, or Joomla! site.If the discovery of Dynamically-Related Files is set to manual (the default), click the link in the Info bar that appearsabove the page in the Document window.If the discovery of Dynamically-Related Files is automatically enabled, then a list of Dynamically-Related Files appears in theRelated Files toolbar.The order of Related and Dynamically-Related Files in the Related Files toolbar is as follows:
Static related files (i.e. related files that do not require any sort of dynamic processing)
External related files (i.e. .css and .js files) that are attached to dynamic path server include files
Dynamic path server include files (i.e. .php, .inc, and .module files)Filter Related FilesBecause Related Files and Dynamically-Related Files can often be numerous, Dreamweaver lets you filter Related Files so that you can preciselylocate the files you want to work with.Open a page that has Related Files associated with it.Discover Dynamically-Related Files if necessary.Click the Filter Related Files icon at the right side of the Related Files toolbar.
270
To the topRemove All Word Specific MarkupClean Up CSSClean Upont; TagsFix Invalidly Nested TagsApply Source FormattingShow Log On CompletionSelect the types of files you want to see in the Related Files toolbar. By default, Dreamweaver selects all Related Files.To create a custom filter, click the Filter Related Files icon and choose Custom FilterThe Custom Filter dialog only allows for the filtering of exact file names (style.css), file extensions (.php), and wildcardexpressions using asterisks (*menu*). You can filter on multiple wildcard expressions by separating each expression with asemi-colon (for example, style.css;*.js;*tpl.php).Filter settings do not persist once you close the file.Clean up Microsoft Word HTML filesYou can open documents saved by Microsoft Word as HTML files, and then use the Clean Up Word HTML command to remove the extraneousHTML code generated by Word. The Clean Up Word HTML command is available for documents saved as HTML files by Word 97 or later.The code that Dreamweaver removes is primarily used by Word to format and display documents in Word and is not needed to display the HTMLfile. Retain a copy of your original Word (.doc) file as a backup, because you may not be able to reopen the HTML document in Word once you’veapplied the Clean Up Word HTML feature.To clean up HTML or XHTML that was not generated by Microsoft Word, use the Cleanup HTML command.Save your Microsoft Word document as an HTML file.In Windows, close the file in Word to avoid a sharing violation.Open the HTML file in Dreamweaver.To view the HTML code generated by Word, switch to Code view (Code).Select CommandsClean Up Word HTMLIf Dreamweaver is unable to determine which version of Word was used to save the file, select the correct version fromthe popup menu.Select (or deselect) options for the cleanup. The preferences you enter are saved as default cleanup settings.Dreamweaver applies the cleanup settings to the HTML document and a log of the changes appears (unless you deselectedthat option in the dialog box).Removes all Microsoft Word-specific HTML, including XML from HTMLtags, Wordcustom metadata and link tags in the head of the document, Word XML markup, conditional tags and their contents, andempty paragraphs and margins from styles. You can select each of these options individually using the Detailed tab.Removes all Word-specific CSS, including inline CSS styles when possible (where the parent style has thesame style properties), style attributes beginning with “mso,” non-CSS style declarations, CSS style attributes from tables, andall unused style definitions from the head. You can further customize this option using the Detailed tab.Removes HTML tags, converting the default body text to size 2 HTML text.Removes the font markup tags inserted by Word outside the paragraph and heading (block-level)Applies the source formatting options you specify in HTML Format preferences andSourceFormat.txt to the document.Displays an alert box with details about the changes made to the document as soon as thecleanup is finished.Click OK, or click the tab if you want to further customize the Remove All Word Specific Markup and Clean Up CSS, and then click OK.
Displaying XML data with XSLT
Building applications visually
XHTML code
Business Catalyst InContext Editing
XHTML code
Creating and managing templates
Working with Dreamweaver sites
Business Catalyst InContext Editing
Creating and managing templates
Working with Dreamweaver sites
271
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
Save frame and frameset files
XHTML code
Understanding document encoding
Clean up code
Start an external editor for media files
Work with files in the Files panel
Switch between views in the Document window
Navigate to related code
Previewing pages in Dreamweaver
Related files tutorial
www.adobe.com/go/dwcs5drf_en
Clean up code
Import Microsoft Office documents (Windows only)
272
Set text properties in the Property inspector
To the topTo the topTargeted RuleEdit RuleCSS PanelAbout formatting text (CSS versus HTML)Edit CSS rules in the Property inspectorSet HTML formatting in the Property inspectorRename a class from the HTML Property inspectorYou can use the text Property inspector to apply HTML formatting or Cascading Style Sheet (CSS) formatting. When you apply HTML formatting,Dreamweaver adds properties to the HTML code in the body of your page. When you apply CSS formatting, Dreamweaver writes properties to thehead of the document or to a separate style sheet.When you create CSS inline styles, Dreamweaver adds style attribute code directly to the body of the page.About formatting text (CSS versus HTML)Formatting text in Dreamweaver is similar to using a standard word processor. You can set default formatting styles (Paragraph, Heading 1,Heading 2, and so on) for a block of text, change the font, size, color, and alignment of selected text, or apply text styles such as bold, italic, code(monospace), and underline.Dreamweaver has two Property inspectors, integrated into one: the CSS Property inspector and the HTML Property inspector. When you use theCSS Property inspector, Dreamweaver formats text using Cascading Style Sheets (CSS). CSS gives web designers and developers greater controlover web page design, while providing improved features for accessibility and reduced file size. The CSS Property inspector lets you accessexisting styles, as well as create new ones.Using CSS is a way to control the style of a web page without compromising its structure. By separating visual design elements (fonts, colors,margins, and so on) from the structural logic of a web page, CSS gives web designers visual and typographic control without sacrificing theintegrity of the content. In addition, defining typographic design and page layout from within a single, distinct block of code—without having toresort to image maps, tags, tables, and spacer GIFs—allows for faster downloads, streamlined site maintenance, and a central point fromwhich to control design attributes across multiple web pages.You can store styles created with CSS directly in the document, or for more power and flexibility, you can store styles in an external style sheet. Ifyou attach an external style sheet to several web pages, all the pages automatically reflect any changes you make to the style sheet. To accessall CSS rules for a page, use the CSS Styles panel (Window� CSS Styles). To access rules that apply to a current selection, use the CSS Stylespanel (Current mode) or the Targeted Rule pop-up menu in the CSS Property inspector.If you prefer, you can use HTML markup tags to format text in your web pages. To use HTML tags instead of CSS, format your text using theHTML Property inspector.You can combine CSS and HTML 3.2 formatting within the same page. Formatting is applied in a hierarchical manner: HTML 3.2 formattingoverrides formatting applied by external CSS style sheets, and CSS embedded in a document overrides external CSS.Edit CSS rules in the Property inspectorOpen the Property inspector (Window� Properties), if it isn’t already open and click the CSS button.Do one of the following:
Place the insertion point inside a block of text that’s been formatted by a rule you want to edit. The rule appears in theTargeted Rule pop-up menu.
Select a rule from the Targeted Rule pop-up menu.Make changes to the rule by using the various options in the CSS Property inspector.Is the rule you are editing in the CSS Property inspector. When you have an existing style applied to text, therule affecting the text’s format appears when you click inside the text on the page. You can also use the Targeted Rule pop-upmenu to create new CSS rules, new in-line styles, or apply existing classes to selected text. If you’re creating a new rule, you’llneed to complete the New CSS Rule dialog box. For more information, see the links at the end of this topic.Opens the CSS Rule Definition dialog box for the targeted rule. If you select New CSS Rule from the TargetedRule pop-up menu and click the Edit Rule button, Dreamweaver opens the New CSS Rule definition dialog box instead.Opens the CSS Styles panel and displays properties for the targeted rule in Current view.Changes the font of the targeted rule.
273
Text ColorLeft, Center, and Right AlignTo the topUnordered ListOrdered ListBlockquote and Remove BlockquoteSets the font size for the targeted rule.Sets the selected color as the font color in the targeted rule. Select a web-safe color by clicking the color box, orenter a hexadecimal value (for example, #FF0000) in the adjacent text field.Adds the bold property to the targeted rule.Adds the italics property to the targeted rule.Adds the respective alignment properties to the targeted rule.: The Font, Size, Text Color, Bold, Italic, and Alignment properties always display the properties for the rule that appliesto the current selection in the Document window. When you change any of these properties, you affect the targeted rule.For a video tutorial about working with the CSS Property inspector, see Set HTML formatting in the Property inspectorOpen the Property inspector (Window� Properties), if it isn’t already open, and click the HTML button.Select the text you want to format.Set the options you want to apply to the selected text:Sets the paragraph style of the selected text. Paragraph applies the default format for a tag, Heading 1 adds an tag, and so on.Assigns an ID to your selection. The ID pop-up menu (if applicable) lists all of the document’s unused, declared IDs.Displays the class style that is currently applied to the selected text. If no styles have been applied to the selection, theup menu shows No CSS Style. If multiple styles have been applied to the selection, the menu is blank.Use the Style menu to do any of the following:
Select the style you want to apply to the selection.
Select None to remove the currently selected style.
Select Rename to rename the style.
Select Attach Style Sheet to open a dialog box that lets you attach an external style sheet to the page.Applies either or to the selected text according to the style preference set in the General category of thePreferences dialog box.Applies either or to the selected text according to the style preference set in the General category of thePreferences dialog box.Creates a bulleted list of the selected text. If no text is selected, a new bulleted list is started.Creates a numbered list of the selected text. If no text is selected, a new numbered list is started.Indent or remove indentation from the selected text by applying or removing the tag. In a list, indenting creates a nested list and removing the indentation unnests the list.Creates a hypertext link of the selected text. Click the folder icon to browse to a file in your site; type the URL; drag thePoint-To-File icon to a file in the Files panel; or drag a file from the Files panel into the box.Specifies the textual tooltip for a hypertext link.Specifies the frame or window in which the linked document will load:
loads the linked file in a new, unnamed browser window.
loads the linked file in the parent frameset or window of the frame that contains the link. If the frame containingthe link is not nested, the linked file loads into the full browser window.
loads the linked file in the same frame or window as the link. This target is implied, so you generally don’t need tospecify it.
loads the linked file in the full browser window, thereby removing all frames.
274
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy PolicyTo the topRename a class from the HTML Property inspectorDreamweaver displays all of the classes available to your page in the Class menu of the HTML Property inspector. You can rename styles in thislist by selecting the Rename option at the end of the list of class styles.Select Rename from the text Property inspector Style popup menu.Select the style you want to rename from the Rename Style popup menu.Enter a new name in the New Name text field and click OK.
Open the CSS Styles panel
275
Arabic and Hebrew text
To the topTo the topTo the topBi-directional text flowTag editorText direction and Unicode-bidi in CSS RulesTable propertiesDiv propertiesNew and improved features for working in Arabic and Hebrew are available in the Middle East and North African edition of this software.Bi-directional text flowText in Middle Eastern languages is mostly written from right to left (RTL). However, in general, the most commonly used form is bi-directional(bidi) text - a mix of left-to-right and right-to-left text. An example of bidi text is a paragraph that includes Arabic and English text. In CS6, you canuse Dreamweaver to type Arabic, Hebrew, or bidi text, in design view and code view.In Dreamweaver Middle Eastern version, Right-to-left direction attribute can be applied to two notional objects, paragraphs and characters. The attribute can be applied to tags supported in the HTML specification. The direction attribute can take values: ltr (default), , or
Direction attribute in CSSWhen you enter Arabic, Hebrew, or mixed text, Dreamweaver recognizes the languages as Right-to-left (RTL) and displays it text appropriately.Tag editorYou can apply direction and language settings using the Tag Editor
Tag EditorText direction and Unicode-bidi in CSS RulesYou can specify the Text direction as a CSS rule. In the CSS Rule definition dialog box, specify Direction and Unicode-bidi options.
276
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
To the topTo the top
Language options in CSS RulesTable propertiesRight-to-left tables are right aligned, and columns are ordered from right to left. The resizing handles appear on the left side. On tabbing, thecursor moves in RTL direction..Specify the table direction using the Properties panel.
Right-to-left tableDiv propertiesUse Direction to specify the Div direction in the Properties.
Div direction
277
Set page properties
To the topPage FontText ColorBackground ColorBackground ImageLeft Margin and Right MarginTop Margin and Bottom MarginTo the topBackground ImageSet CSS page font, background color, and background image propertiesSet HTML page propertiesFor each page you create in Dreamweaver, you can specify layout and formatting properties using the Page Properties dialog box (Modify� PageProperties). The Page Properties dialog box lets you specify the default font family and font size, background color, margins, link styles, and manyother aspects of page design. You can assign new page properties for each new page you create, and modify those for existing pages. Changesyou make in the Page Properties dialog box apply to the entire page.Dreamweaver gives you two methods for modifying page properties: CSS or HTML. Adobe recommends using CSS to set backgrounds andmodify page properties.The page properties you choose apply only to the active document. If a page uses an external CSS style sheet, Dreamweaver does notoverwrite the tags set in the style sheet, as this affects all other pages using that style sheet.Set CSS page font, background color, and background image propertiesUse the Page Properties dialog box to specify several basic page layout options for your web pages, including the font, background color, andbackground image.Select Modify� Page Properties, or click the Page Properties button in the text Property inspector.Select the Appearance (CSS) category and set the options.Specifies the default font family to use in your web pages. Dreamweaver uses the font family you specify unlessanother font is specifically set for a text element.Specifies the default font size to use in your web pages. Dreamweaver uses the font size you specify unless anotherfont size is specifically set for a text element.Specifies the default color to render fonts with.Sets a background color for your page. Click the Background color box and select a color from the ColorSets a background image. Click the Browse button, then browse to and select the image. Alternatively,enter the path to the background image in the Background Image box.Dreamweaver tiles (repeats) the background image if it does not fill the entire window, just as browsers do. (To prevent thebackground image from tiling, use Cascading Style Sheets to disable image tiling.)Specifies how the background image will be displayed on the page:
Select the No-repeat option to display the background image only once.
Select the Repeat option to repeat, or tile, the image both horizontally and vertically.
Select the Repeatx option to tile the image horizontally.
Select the Repeaty option to tile the image vertically.Specify the size of the left and right page margins.Specify the size of the top and bottom page margins.Set HTML page propertiesSetting properties in this category of the Page Properties dialog box results in HTML rather than CSS formatting of your page.Select Modify� Page Properties, or click the Page Properties button in the text Property inspector.Select the Appearance (HTML) category and set the options.Sets a background image. Click the Browse button, then browse to and select the image. Alternatively,enter the path to the background image in the Background Image box.
278
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy PolicyVisited LinksActive LinksLeft Margin and Right MarginTop Margin and Bottom Margin
Dreamweaver tiles (repeats) the background image if it does not fill the entire window, just as browsers do. (To prevent the
background image from tiling, use Cascading Style Sheets to disable image tiling.)Sets a background color for your page. Click the Background color box and select a color from the Color Picker.Specifies the default color to render fonts with.Specifies the color to apply to link text.Specifies the color to apply to visited links.Specifies the color to apply when a mouse (or pointer) clicks on a linkSpecify the size of the left and right page margins.Specify the size of the top and bottom page margins.
279
Adding and modifying images
To the topGIF (Graphic Interchange Format)JPEG (Joint Photographic Experts Group)PNG (Portable Network Group)To the topAbout imagesInsert an imageAlign an imageVisually resize an imageInsert an image placeholderReplace an image placeholderSet image placeholder propertiesEdit images in DreamweaverCreate a rollover imageUse an external image editorApplying behaviors to imagesAbout imagesMany different types of graphic file formats exist, but three graphic file formats are generally used in web pages—GIF, JPEG, and PNG. GIF and JPEG file formats are thebest supported and can be viewed by most browsers.GIF files use a maximum of 256 colors, and are best for displaying noncontinuous-tone images or those withlarge areas of flat colors, such as navigation bars, buttons, icons, logos, or other images with uniform colors and tones.The JPEG file format is the superior format for photographic or continuous-tone images, becauseJPEG files can contain millions of colors. As the quality of a JPEG file increases, so does the file size and the file download time. You can oftenstrike a good balance between the quality of the image and the file size by compressing a JPEG file.The PNG file format is a patent-free replacement for GIFs that includes support for indexed-color, gray scale,and true-color images, and alpha channel support for transparency. PNG is the native file format of Adobe® Fireworks®. PNG files retain all theoriginal layer, vector, color, and effects information (such as drop shadows), and all elements are fully editable at all times. Files must have the.png file extension to be recognized as PNG files by Dreamweaver.Insert an imageWhen you insert an image into a Dreamweaver document, a reference to the image file is generated in the HTML source code. To ensure that thisreference is correct, the image file must be in the current site. If it is not in the current site, Dreamweaver asks whether you want to copy the fileinto the site.You can also insert images dynamically. Dynamic images are those images that change often. For example, advertising banner rotation systemsneed to randomly select a single banner from a list of potential banners, and then dynamically display the selected banner’s image when a page isAfter you insert an image, you can set image tag accessibility attributes that can be read by screen readers for visually impaired users. Theseattributes can be edited in HTML code.For a tutorial on inserting images, see Place the insertion point where you want the image to appear in the Document window and do one of the following:
In the Common category of the Insert panel, click the Images icon
.
In the Common category of the Insert panel, click the Images button and select the Image icon. With the Image icondisplayed in the Insert panel, you can drag the icon to the Document window (or to the Code view window if you areworking in the code).
Select InsertImage.
Drag an image from the Assets panel () to the desired location in the Document window; then skip tostep 3.
Drag an image from the Files panel to the desired location in the Document window; then skip to step 3.
Drag an image from the desktop to the desired location in the Document window; then skip to step 3.In the dialog box that appears, do one of the following:
Select File System to choose an image file.
280
W and H
Select Data Source to choose a dynamic image source.
Click the Sites And Servers button to choose an image file in a remote folder of one of your Dreamweaver sites.Browse to select the image or content source you want to insert.If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save thedocument anywhere in the site, Dreamweaver converts the reference to a document-relative path.When inserting images it’s also possible to use an absolute path to an image that resides on a remote server (i.e., animage that is not available on the local hard drive). If you experience performance problems while working, however, youmight want to disable viewing the image in Design view by deselecting Commands� Display External Files.Click OK. The Image Tag Accessibility Attributes dialog box appears if you have activated the dialog box in Preferences(EditPreferences).Enter values in the Alternate Text and Long Description text boxes, and click OK.
In the Alternate Text box, enter a name or brief description for the image. The screen reader reads the information youenter here. You should limit your entry to around 50 characters. For longer descriptions, consider providing a link, in theLong Description text box, to a file that gives more information about the image.
In the Long Description box, enter the location of a file that displays when the user clicks the image or click the folder iconto browse to the file. This text box provides a link to a file that is related to, or gives more information about, the image.You can enter information in one or both text boxes depending on your needs. The screen reader reads the Altattribute for the image.If you click Cancel, the image appears in the document, but Dreamweaver does not associate accessibility tags orattributes with it.In the Property inspector (Window� Properties), set properties for the image.Set image propertiesThe Images Property inspector allows you to set properties for an image. If you do not see all of the image properties, click the expander arrow inthe lower-right corner.
Select Window to view the Property inspector for a selected image.In the text box below the thumbnail image, enter a name so you can refer to the image when using a Dreamweaver behavior(such as Swap Image) or when using a scripting language such as JavaScript or VBScript.Set any of the image options.The width and height of the image, in pixels. Dreamweaver automatically updates these text boxes with the image’soriginal dimensions when you insert an image in a page.If you set W and H values that do not correspond to the actual width and height of the image, the image may not displayproperly in a browser. (To restore the original values, click the W and H text box labels, or the Reset image size button thatappears to the right of the W and H text boxes in entering a new value.)You can change these values to scale the display size of this image instance, but this does not reduce download time,because the browser downloads all image data before scaling the image. To reduce download time and to ensure that allinstances of an image appear at the same size, use an image-editing application to scale images.Specifies the source file for the image. Click the folder icon to browse to the source file, or type the path.Specifies a hyperlink for the image. Drag the Point-To-File icon to a file in the Files panel, click the folder icon to browseto a document on your site, or manually type the URL.Aligns an image and text on the same line.Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set todownload images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text isspoken out loud. In some browsers, this text also appears when the pointer is over the image.
281
Map Name and Hotspot tools
V Space and H SpaceEdit image settingsBrightness and ContrastReset SizeTo the topBaseline and Bottom
Allow you to label and create a client-side image map.
Add space, in pixels, along the sides of the image. V Space adds space along the top and bottom ofan image. H Space adds space along the left and right of an image.Specifies the frame or window in which the linked page should load. (This option is not available when the image isn’tlinked to another file.) The names of all the frames in the current frameset appear in the Target list. You can also choose fromthe following reserved target names:
loads the linked file into a new, unnamed browser window.
loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containingthe link is not nested, the linked file loads into the full browser window.
loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t needto specify it.
loads the linked file into the full browser window, thereby removing all frames.The width, in pixels, of the image’s border. The default is no border.Starts the image editor you specified in External Editors preferences and opens the selected image.
Opens the Image Optimization dialog box and lets you optimize the image.
Trims the size of an image, removing unwanted areas from the selected image.
Resamples a resized image, improving its picture quality at its new size and shape.
Adjusts the brightness and contrast settings of an image.
Adjusts the sharpness of an image.
Resets the W and H values to the original size of the image. This button appears to the right of the W and Htext boxes when you adjust the values of the selected image.Edit image accessibility attributes in codeIf you inserted accessibility attributes for an image, you can edit those values in the HTML code.In the Document window, select the image.Do one of the following:
Edit the appropriate image attributes in Code view.
Right-click (Windows) or Control-click (Macintosh), and then select Edit Tag.
Edit the Alt value in the Property inspector.Align an imageYou can align an image to text, another image, a plugin, or other elements in the same line. You can also set the horizontal alignment of anSelect the image in Design view.Set the alignment attributes of the image in the Property inspector with the Align popup menu.You can set the alignment in relation to other elements in the same paragraph or line.HTML does not provide a way to wrap text around the contours of an image, as you can with some word processingThe alignment options are as follows:Specifies a baseline alignment. (The default may vary depending on the site visitor’s browser.)Align the baseline of the text (or other element in the same paragraph) to the bottom of the selectedAligns the top of an image to the top of the tallest item (image or text) in the current line.
282
Middle
Text TopAbsolute MiddleAbsolute BottomTo the topTo the top
Aligns the middle of the image with the baseline of the current line.
Aligns the top of the image with the top of the tallest character in the text line.Aligns the middle of the image with the middle of the text in the current line.Aligns the bottom of the image with the bottom of the line of text (which includes descenders, as in theletter Places the selected image on the left margin, wrapping text around it to the right. If leftaligned text precedes the objecton the line, it generally forces left-aligned objects to wrap to a new line.Places the image on the right margin, wrapping text around the object to the left. If rightaligned text precedes theobject on the line, it generally forces right-aligned objects to wrap to a new line.Visually resize an imageYou can visually resize elements such as images, plugins, Shockwave or SWF files, applets, and ActiveX controls in Dreamweaver.Visually resizing an image helps you see how the image affects the layout at different dimensions but it does not scale the image file to theproportions that you specify. If you visually resize an image in Dreamweaver without using an image-editing application (such as Adobe Fireworks)to scale the image file to the desired size, the user’s browser scales the image when the page is loaded. This might cause a delay in pagedownload time and the improper display of the image in the user’s browser. To reduce download time and to ensure that all instances of an imageappear at the same size, use an image-editing application to scale images.When you resize an image in Dreamweaver, you can it to accommodate its new dimensions. Resampling adds or subtracts pixels from aresized JPEG and GIF image files to match the appearance of the original image as closely as possible. Resampling an image reduces its file sizeand improves download performance.Visually resize an elementSelect the element (for example, an image or SWF file) in the Document window.Resize handles appear at the bottom and right sides of the element and in the lower-right corner. If resize handles don’tappear, click somewhere other than the element you want to resize and then reselect it, or click the appropriate tag in the tagselector to select the element.Resize the element by doing one of the following:
To adjust the width of the element, drag the selection handle on the right side.
To adjust the height of the element, drag the bottom selection handle.
To adjust the width and the height of the element at the same time, drag the corner selection handle.
To preserve the element’s proportions (its width-to-height ratio) as you adjust its dimensions, Shift-drag the cornerselection handle.
To adjust the width and height of an element to a specific size (for example, 1 x 1 pixel), use the Property inspector toenter a numeric value. Elements can be visually resized to a minimum of 8 x 8 pixels.To return a resized element to its original dimensions, in the Property inspector, delete the values in the W and H text boxes,or click the Reset Size button in the image Property inspector.Revert an image to its original size
Click the Reset size button
in the image Property inspector.Resample a resized imageResize the image as described above.Click the Resample button
in the image Property inspector.You cannot resample image placeholders or elements other than bitmap images.Insert an image placeholderAn image placeholder is a graphic you use until final artwork is ready to be added to a web page. You can set the placeholder’s size and color, aswell as provide it with a text label.In the Document window, place the insertion point where you want to insert a placeholder graphic.
283
To the topTo the topW and H
Select InsertImage ObjectsImage Placeholder
For Name (Optional), enter text you want to appear as a label for the image placeholder. Leave the text box blank if you donot want a label to appear. The name must begin with a letter and can contain only letters and numbers; spaces and highASCII characters are not allowed.For Width and Height (Required), type a number to set the image size in pixels.For Color (Optional), do one of the following to apply a color:
Use the color picker to select a color.
Enter the color’s hexadecimal value (for example, #FF0000).
Enter a web-safe color name (for example, red).For Alternate Text (Optional), enter text to describe the image for viewers using a text-only browser.An image tag is automatically inserted into the HTML code containing an empty Click OK.The placeholder’s color, size attributes, and label appear as follows:
When viewed in a browser, the label and size text do not appear.Replace an image placeholderAn image placeholder does not display an image in a browser. Before you publish your site you should replace any image placeholders you’veadded with web-friendly image files, such as GIFs or JPEGs.If you have Fireworks, you can create a new graphic from the Dreamweaver image placeholder. The new image is set to the same size as theplaceholder image. You can edit the image, then replace it in Dreamweaver.In the Document window, do one of the following:
Double-click the image placeholder.
Click the image placeholder to select it; then in the Property inspector ), click the folder icon next tothe Src text box.In the Image Source dialog box, navigate to the image you want to replace the image placeholder with and click OK.Set image placeholder propertiesTo set properties for an image placeholder, select the placeholder in the Document window; then select to display theProperty inspector. To see all properties, click the expander arrow in the lower-right corner.Use the Property inspector to set a name, width, height, image source, alternate text description, alignment and color for a placeholder image.
In the placeholder Property inspector, the gray text box and the Align text box are disabled. You can set these properties in the image Propertyinspector when you replace the placeholder with an image.
Set any of the following options:Set the width and height of the image placeholder, in pixels.Specifies the source file for the image. For a placeholder image, this text box is empty. Click the Browse button to select areplacement image for the placeholder graphic.Specifies a hyperlink for the image placeholder. Drag the Point-to-File icon to a file in the Files panel, click the folder iconto browse to a document on your site, or manually type the URL.Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to
download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is
284
Reset SizeTo the topBrightness and Contrastspoken out loud. In some browsers, this text also appears when the pointer is over the image.Starts Fireworks to create a replacement image. The button is disabled unless Fireworks is also installed onyour computer.Resets the W and H values to the original size of the image.Specifies a color for the image placeholder.Edit images in DreamweaverYou can resample, crop, optimize, and sharpen images in Dreamweaver. You can also adjust their brightness and contrast.Image-editing featuresDreamweaver provides basic image-editing features that let you modify images without having to use an external image-editing application suchas Fireworks or Photoshop. The Dreamweaver image-editing tools are designed to let you easily work with content designers responsible forcreating image files for use on your website.You do not need to have Fireworks or other image-editing applications installed on your computer to use the Dreamweaver image-editing
Select Modify. Set any of these Dreamweaver image-editing features:Adds or subtracts pixels from a resized JPEG and GIF image files to match the appearance of the original imageas closely as possible. Resampling an image reduces its file size and improves download performance.When you resize an image in Dreamweaver, you can resample it to accommodate its new dimensions. When a bitmap objectis resampled, pixels are added to or removed from the image to make it larger or smaller. Resampling an image to a higherresolution typically causes little loss of quality. Resampling to a lower resolution, however, always causes data loss and usuallya drop in quality.Edit images by reducing the area of the image. Typically, you’ll want to crop an image to place more emphasis on thesubject of the image, and remove unwanted aspects surrounding the center of interest in the image.Modifies the contrast or brightness of pixels in an image. This affects the highlights, shadows, andmidtones of an image. You typically use Brightness/Contrast when correcting images that are too dark or too light.Adjusts the focus of an image by increasing the contrast of edges found within the image. When you scan an image,or take a digital photo, the default action of most image capturing software is to soften the edges of objects in the image. Thisprevents extremely fine details from becoming lost in the pixels from which digital images are composed. However, to bring outthe details in digital image files, it is often necessary to sharpen the image, thereby increasing edge contrast, and making theimage appear sharper.Dreamweaver image-editing features apply only to JPEG, GIF, and PNG image file formats. Other bitmap image fileformats cannot be edited using these image-editing features.Crop an imageDreamweaver lets you crop (or trim) bitmap file images.When you crop an image, the source image file is changed on disk. For this reason, you may want to keep a backup copy of the image filein the event you need to revert to the original image.Open the page containing the image you want to crop, select the image, and do either of the following:
Click the Crop Tool icon
in the image Property inspector.
Select ModifyCrop.
Crop handles appear around the selected image.Adjust the crop handles until the bounding box surrounds the area of the image that you want to keep.Double-click inside the bounding box or press Enter to crop the selection.A dialog box informs you that the image file you are cropping will be changed on disk. Click OK. Every pixel in the selectedbitmap outside the bounding box is removed, but other objects in the image remain.Preview the image and ensure that it meets your expectations. If not, select Edit Undo Crop to revert to the original image.You can undo the effect of the Crop command (and revert to the original image file) up until the time that you quit
285
To the topImage NameOriginal imageRollover Image
Dreamweaver, or edit the file in an external image-editing application.
Optimize an imageYou can optimize images in your web pages from within Dreamweaver.Open the page containing the image you want to optimize, select the image, and do either of the following:
Click the Edit Image Settings button
in the image Property inspector.
Select ModifyOptimize.Make your edits in the Image Optimization dialog box and click OK.Sharpen an imageSharpening increases the contrast of pixels around the edges of objects to increase the image’s definition or sharpness.Open the page containing the image you want to sharpen, select the image, and do either of the following:
Click the button
in the image Property inspector.
Select ModifySharpen.You can specify the degree of sharpening Dreamweaver applies to the image by dragging the slider control, or entering avalue between 0 and 10 in the text box. As you adjust the sharpness of the image using the Sharpness dialog box, you canpreview the change to the image.Click OK when you are satisfied with the image.Save your changes by selecting , or revert to the original image by selecting Undo SharpenYou can only undo the effect of the Sharpen command (and revert to the original image file) prior to saving the pagecontaining the image. After you save the page, the changes made to the image are permanently saved.Adjust the brightness and contrast of an imageBrightness/Contrast modifies the contrast or brightness of pixels in an image. This affects the highlights, shadows, and midtones of an image. Youtypically use Brightness/Contrast when correcting images that are too dark or too light.Open the page containing the image you want to adjust, select the image, and do either of the following:
Click the Brightness/Contrast
button in the image Property inspector.
Select ModifyBrightness/Contrast.Drag the Brightness and Contrast sliders to adjust the settings. Values range from 100 to 100.Click OK.Create a rollover imageYou can insert rollover images in your page. A is an image that, when viewed in a browser, changes when the pointer moves across it.You must have two images to create the rollover: a primary image (the image displayed when the page first loads) and a secondary image (theimage that appears when the pointer moves over the primary image). Both images in a rollover should be the same size; if the images are not thesame size, Dreamweaver resizes the second image to match the properties of the first image.Rollover images are automatically set to respond to the event. You can set an image to respond to a different event (for example, amouse click) or change a rollover image.For a tutorial on creating rollovers, see In the Document window, place the insertion point where you want the rollover to appear.Insert the rollover using one of these methods:
In the Common category of the Insert panel, click the Images button and select the Rollover Image icon. With the RolloverImage icon displayed in the Insert panel, you can drag the icon to the Document window.
Select InsertImage ObjectsRollover ImageSet the options and click OK.The name of the rollover image.The image you want to display when the page loads. Enter the path in the text box, or click Browse andselect the image.The image you want to display when the pointer rolls over the original image. Enter the path or click Browseto select the image.
286
Preload Rollover ImageAlternate TextWhen clicked, Go to URLTo the topPreloads the images in the browser’s cache so no delay occurs when the user rolls the pointer overthe image.(Optional) Text to describe the image for viewers using a text-only browser.The file that you want to open when a user clicks the rollover image. Enter the path or clickBrowse and select the file.If you don’t set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the rolloverbehavior is attached. If you remove the null link, the rollover image will no longer work.Select FilePreview in Browser or press F12.In the browser, move the pointer over the original image to see the rollover image.You cannot see the effect of a rollover image in Design view.Use an external image editorWhile in Dreamweaver, you can open a selected image in an external image editor; when you return to Dreamweaver after saving the editedimage file, any changes you made to the image are visible in the Document window.You can set up Fireworks as your primary external editor. You can also set which file types an editor opens; and you can select multiple imageeditors. For example, you can set preferences to start Fireworks when you want to edit a GIF, and to start a different image editor when you wantto edit a JPG or JPEG.Start the external image editor
Do one of the following:
Double-click the image you want to edit.
Right-click (Windows) or Controlclick (Macintosh) the image you want to edit, then select Edit With and selectan editor.
Select the image you want to edit, and click Edit in the Property inspector.
Double-click the image file in the Files panel to start the primary image editor. If you haven’t specified an image editor,Dreamweaver starts the default editor for the file type.When you open an image from the Files panel, the Fireworks integration features are not in effect; Fireworks does notopen the original PNG file. To use the Fireworks integration features, open images from within the Document window.If you don’t see an updated image after returning to the Dreamweaver window, select the image and then click the Refreshbutton in the Property inspector.Set an external image editor for an existing file typeYou can select an image editor for opening and editing graphic files.Open the File Types/Editors Preferences dialog box by doing one of the following:
Select Edit (Windows) or (Macintosh), and select File Types/Editors in theCategory list on the left.
Select EditEdit with External Editor and select File Types/EditorsIn the Extensions list, select the file extension you want to set an external editor for.Click the Add (+) button above the Editors list.In the Select External Editor dialog box, browse to the application you want to start as an editor for this file type.In the dialog box, click Make Primary if you want this editor to be the primary editor for this file type.If you want to set up an additional editor for this file type, repeat steps 3 and 4.Dreamweaver automatically uses the primary editor when you edit this image type. You can select the other listed editors fromthe context menu for the image in the Document window.Add a new file type to the Extensions listOpen the File Types/Editors Preferences dialog box by doing one of the following:
Select Edit� Preferences (Windows) or (Macintosh), and select File Types/Editors in the
287
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.Legal Notices | Online Privacy Policy
To the topPreload ImagesSwap ImageSwap Image Restore
Category list on the left.
Select EditEdit with External Editor and select File Types/EditorsIn the File Types/Editors Preferences dialog box, click the Add (+) button above the Extensions list.A text box appears in the Extensions list.Type the file extension of the file type you want to start an editor for.To select an external editor for the file type, click the Add (+) button above the Editors list.In the dialog box that appears, select the application you want to use to edit this image type.Click Make Primary if you want this editor to be the primary editor for the image type.Change an existing editor preferenceOpen the File Types/Editors Preferences dialog box by doing one of the following:
Select Edit (Windows) or (Macintosh), and select File Types/Editors in theCategory list on the left.
Select EditEdit with External Editor and select File Types/EditorsIn the File Types/Editors preferences dialog box, in the Extensions list select the file type you are changing to view the existingIn the Editors list, select the editor you want to want to affect, then do one of the following:
Click the Add (+) or Delete (–) buttons above the Editors list to add or remove an editor.
Click the Make Primary button, to change which editor starts by default for editing.Applying behaviors to imagesYou can apply any available behavior to an image or image hotspot. When you apply a behavior to a hotspot, Dreamweaver inserts the HTMLsource code into the area tag. Three behaviors apply specifically to images: Preload Images, Swap Image, and Swap Image Restore.Loads images that do not appear on the page right away (such as those that will be swapped in with behaviors, AP elements, orJavaScript) into the browser cache. This prevents delays caused by downloading when it is time for the images to appear.Swaps one image for another by changing the attribute of the tag. Use this action to create button rollovers and otherimage effects (including swapping more than one image at a time).Restores the last set of swapped images to their previous source files. This action is automatically added whenever youattach the Swap Image action to an object by default; you should never need to select it manually.You can also use behaviors to create more sophisticated navigation systems, such as jump menus.
288
About assets and libraries
To the topTo the topAbout assetsAbout library itemsAbout assetsYou can use Adobe® Dreamweaver® to keep track of and preview stored in your site, such as images, movies, colors, scripts, and links.You can also drag an asset directly to insert it in a page of the current document.You obtain assets from various sources. For example, you might create assets in an application such as Adobe® Fireworks® or Adobe® Flash®,receive them from a coworker, or copy them from a clip-art CD or graphics website.Dreamweaver also provides access to two special types of assets—libraries and templates. Both are linked assets: when you edit a library item ortemplate, Dreamweaver updates all documents that use those assets. Library items generally represent small design assets, such as a site logo orcopyright. To control a larger design area, use a template instead.About library items is a special Dreamweaver file containing a collection of individual assets or copies of assets that you can place in your web pages. Theassets in a library are called library items. Items that you can store in a library include images, tables, sounds, and files created with Adobe Flash.You can automatically update all the pages that use a library item whenever you edit the item.For example, suppose you’re building a large site for a company that wants a slogan to appear on every page. You can create a library item tocontain the slogan and use that library item on every page. If the slogan changes, you can change the library item and automatically update everypage that uses it.Dreamweaver stores library items in a Library folder within the local root folder for each site. Each site has its own library.You can create a library item from any element in the section of a document, including text, tables, forms, Java applets, plugins, ActiveXelements, navigation bars, and images.For linked items such as images, the library stores only a reference to the item. The original file must remain at the specified location for the libraryitem to work correctly.It can still be useful to store an image in a library item, though. For example, you could store a complete tag in a library item, which wouldallow you to easily change the image’s text, or even its attribute, throughout the site. (Don’t use this technique to change an image’s and height attributes, though, unless you also use an image editor to change the actual size of the image.)Note: If the library item contains links, the links may not work in the new site. Also, images in a library item aren’t copied to the new site.When you use a library item, Dreamweaver inserts a link to it, rather than the item itself, in the web page. That is, Dreamweaver inserts a copy ofthe HTML source code for that item into the document and adds an HTML comment containing a reference to the original, external item. It is thisexternal reference that makes automatic updating possible.When you create a library item that includes an element with a Dreamweaver behavior attached to it, Dreamweaver copies the element and itsevent handler (the attribute that specifies which event triggers the action, such as , or , and which action to call whenthe event occurs) to the library item file. Dreamweaver does not copy the associated JavaScript functions into the library item. Instead, when youinsert the library item into a document, Dreamweaver automatically inserts the appropriate JavaScript functions into the section of thatdocument (if they aren’t already there).Note: If you hand-code JavaScript (that is, if you create it without using Dreamweaver behaviors), you can make it part of a library item if you usethe Call JavaScript behavior to execute the code. If you don’t use a Dreamweaver behavior to execute the code, the code isn’t retained as part ofthe library item.There are special requirements for editing the behaviors in library items. Library items cannot contain style sheets, because the code for thoseelements is part of the More Help topics
Legal Notices | Online Privacy Policy
289
About the Spry framework

The Spry framework is a JavaScript library that provides web designers with the ability to build web pages that offer richer experiences to their sitevisitors. With Spry, you can use HTML, CSS, and a minimal amount of JavaScript to incorporate XML data into your HTML documents, createwidgets such as accordions and menu bars, and add different kinds of effects to various page elements. The Spry framework is designed so thatmarkup is simple and easy to use for those who have basic knowledge of HTML, CSS, and JavaScript.The Spry framework is meant primarily for users who are web design professionals or advanced nonprofessional web designers. It is not intendedas a full web application framework for enterprise-level web development (though it can be used in conjunction with other enterprise-level pages).For more information on the Spry framework, see More Help topicsSpry Developer Guide
Legal Notices | Online Privacy Policy
290
Adding Sound
To the topTo the topTo the topAudio file formatsLink to an audio fileEmbed a sound fileAudio file formatsYou can add sound to a web page. There are several different types of sound files and formats, including .wav, .midi, and .mp3. Some factors toconsider before deciding on a format and method for adding sound are its purpose, your audience, file size, sound quality, and differences inNote: Sound files are handled very differently and inconsistently by different browsers. You may want to add a sound file to a SWF file and thenembed the SWF file to improve consistency.The following list describes the more common audio file formats along with some of the advantages and disadvantages of each for web design..midi or .mid (Musical Instrument Digital Interface)This format is for instrumental music. MIDI files are supported by many browsers and don’trequire a plugin. Although their sound quality is very good, it can vary depending on a visitor’s sound card. A small MIDI file can provide a longsound clip. MIDI files cannot be recorded and must be synthesized on a computer with special hardware and software..wav (Waveform Extension)These files have good sound quality, are supported by many browsers, and don’t require a plugin. You can recordyour own WAV files from a CD, tape, microphone, and so on. However, the large file size severely limits the length of sound clips that you can useon your web pages..aif (Audio Interchange File Format, or AIFF)The AIFF format, like WAV format, has good sound quality, can be played by most browsers, anddoesn’t require a plugin; you can also record AIFF files from a CD, tape, microphone, and so on. However, the large file size severely limits thelength of sound clips that you can use on your web pages..mp3 (Motion Picture Experts Group Audio, or MPEG-Audio LayerA compressed format that makes sound files substantially smaller. Thesound quality is very good: if an mp3 file is recorded and compressed properly, its quality can rival that of a CD. mp3 technology lets you “stream”the file so that a visitor doesn’t have to wait for the entire file to download before hearing it. However, the file size is larger than a Real Audio file,so an entire song could still take quite a while to download over a typical dialup (telephone line) modem connection. To play mp3 files, visitorsmust download and install a helper application or plugin, such as QuickTime, Windows Media Player or RealPlayer..ra, .ram, .rpm, or Real AudioThis format has a high degree of compression, with smaller file sizes than mp3. Entire song files can bedownloaded in a reasonable amount of time. Because the files can be “streamed” from a normal web server, visitors can begin listening to thesound before the file has completely downloaded. Visitors must download and install the RealPlayer helper application or plugin to play these.qt, .qtm, .mov or QuickTimeThis format is both an audio and video format developed by Apple Computer. QuickTime is included with AppleMacintosh operating systems, and is used by most Macintosh applications that use audio, video, or animation. PCs can also play files inQuickTime format, but require a special QuickTime driver. QuickTime supports most encoding formats, including Cinepak, JPEG, and MPEG.Note: In addition to the more common formats listed above, there are many different audio and video file formats available for use on the web. Ifyou encounter a media file format that you are unfamiliar with, locate the creator of the format for information on how best to use and deploy it.Link to an audio fileLinking to an audio file is a simple and effective way to add sound to a web page. This method of incorporating sound files lets visitors choosewhether they want to listen to the file, and makes the file available to the widest audience.Select the text or image you want to use as the link to the audio file.In the Property inspector, click the folder icon next to the Link text box to browse for the audio file, or type the file’s path andname in the Link text box.Embed a sound fileEmbedding audio incorporates the sound directly into the page, but the sound only plays if visitors to your site have the appropriate plugin for thechosen sound file. Embed files if you want to use the sound as background music, or if you want to control the volume, the way the player lookson the page, or the beginning and ending points of the sound file.When incorporating sound files in your web pages, carefully consider their appropriate use in your web site, and how visitors to your site usethese media resources. Always provide a control to either enable or disable the playing of the sound, in the event that visitors don’t want tolisten to the audio content.In Design view, place the insertion point where you want to embed the file and do one of the following:
291

In the Common category of the Insert panel, click the Media button and select the Plugin icon
from the pop-up menu.
Select Insert� Media� Plugin.Browse for the audio file and click OK.Enter the width and height by entering the values in the appropriate text boxes in the Property inspector or by resizing thein placeholder in the Document window.These values determine the size at which the audio controls are displayed in the browser.More Help topics
Legal Notices | Online Privacy Policy
292
Adding media objects
To the topInsert and edit media objectsStart an external editor for media filesSpecify the editor to start from DreamweaverUse Design Notes with media objectsInsert Shockwave moviesAdd video (non-FLV)Insert plugin contentTroubleshooting plugInsert an ActiveX controlInsert a Java appletUsing behaviors to control mediaUse parameters to control media objectsInsert and edit media objectsIn addition to SWF and FLV files, you can insert QuickTime or Shockwave movies, Java applets, ActiveX controls, or other audio or video objectsin a Dreamweaver document. If you inserted accessibility attributes with a media object, you can set the accessibility attributes and edit thosevalues in the HTML code.Place the insertion point in the Document window where you want to insert the object.Insert the object by doing one of the following:
In the Common category of the Insert panel, click the Media button and select the icon for the type of object you want to
Select the appropriate object from the Insert� Media submenu.
If the object you want to insert is not a Shockwave, Applet, or ActiveX object, select Plugin from the Insert� MediaA dialog box appears letting you select a source file and specify certain parameters for the media object.To prevent such dialog boxes from appearing, select Edit� Preferences� General (Windows) or Dreamweaver� Preferences� General (Macintosh) and deselect the Show Dialog When Inserting Objects option. To override whateverpreference is set for showing dialog boxes, hold down the Control (Windows) or Option (Macintosh) key while insertingthe object. (For example, to insert a placeholder for a Shockwave movie without specifying the file, hold down Controlor Option, and either click the Shockwave button in Media popup menu of the Common Insert panel, or select Insert� Media� Shockwave.)Complete the Select File dialog box, and click OK.Note: The Accessibility Attributes dialog box appears if you have chosen to show attributes when inserting media in theEdit� Preferences dialog box.Set the accessibility attributes.Note: You can also edit media object attributes by selecting the object and editing the HTML code in Code view, or right-clicking (Windows) or Control-clicking (Macintosh), and selecting Edit Tag Code.Enter a title for the media object.Access KeyEnter a keyboard equivalent (one letter) in the text box to select the form object in the browser. This lets a visitorto the site use the Control key (Windows) with the Access Key to access the object. For example, if you enter B as the AccessKey, use Control+B to select the object in the browser.Tab IndexEnter a number for the tab order of the form object. Setting a tab order is useful when you have other links andform objects on the page and need the user to tab through them in a specific order. If you set tab order for one object, be sureto set the tab order for all of them.Click OK to insert the media object.Note: If you click Cancel, a media object placeholder appears in the document, but Dreamweaver does not associateaccessibility tags or attributes with it.To specify a source file, or to set dimensions and other parameters and attributes, use the Property inspector for each object.You can edit accessibility attributes for an object.
293
To the topTo the topTo the topStart an external editor for media filesYou can start an external editor from Dreamweaver to edit most media files. You can also specify the editor you want Dreamweaver to start to editthe file.Make sure the media file type is associated to an editor on your system.To find out what editor is associated with the file type, select Edit� Preferences in Dreamweaver and select File Types/Editorsfrom the Category list. Click the file’s extension in the Extensions column to view the associated editor or editors in the Editorscolumn. You can change the editor associated to a file type.Double-click the media file in the Files panel to open it in the external editor.The editor that starts when you double-click the file in the Files panel is called the primary editor. If you double-click an imagefile, for example, Dreamweaver opens the file in the primary external image editor such as Adobe Fireworks.If you don’t want to use the primary external editor to edit the file, you can use another editor on your system to edit the file bydoing one of the following:
In the Files panel, right-click (Windows) or Controlclick (Macintosh) the filename and select Open With from the context
In Design view, right-click (Windows) or Controlclick (Macintosh) the media element within the current page, and selectEdit With from the context menu.Specify the editor to start from DreamweaverYou can specify the editor you want Dreamweaver to use for editing a file type, and add or delete file types that Dreamweaver recognizes.Explicitly specify which external editors should be started for a given file typeSelect Edit� Preferences and select File Types/Editors from the Category list.Filename extensions, such as .gif, .wav, and .mpg, are listed on the left under Extensions. Associated editors for a selectedextension are listed on the right under Editors.Select the file type extension in the Extensions list and do one of the following:
To associate a new editor with the file type, click the Plus (+) button above the Editors list and complete the dialog boxthat appears.For example, select the application icon for Acrobat to associate it with the file type.
To make an editor the primary editor for a file type (that is, the editor that opens when you double-click the file type in theFiles panel), select the editor in the Editors list and click Make Primary.
To dissociate an editor from a file type, select the editor in the Editors list and click the Minus (-) button above the EditorsAdd a new file type and associated editorClick the Plus (+) button above the Extensions list and enter a file type extension (including the period at the beginning of theextension) or several related extensions separated by spaces.For example, you might enter .xml .xsl if you wanted to associate them with an XML editor installed on your system.Select an editor for the file type by clicking the Plus (+) button above the Editors list and completing the dialog box thatRemove a file type
Select the file type in the Extensions list and click the Minus (-) button above the Extensions list.Note: You can’t undo after removing a file type, so be sure that you want to remove it.Use Design Notes with media objectsAs with other objects in Dreamweaver, you can add Design Notes to a media object. Design Notes are notes associated with a particular file, thatare stored in a separate file. You can use Design Notes to keep track of extra file information associated with your documents, such as imagesource filenames and comments on file status.Right-click (Windows) or Controlclick (Macintosh) the object in the Document window.Note: You must define your site before adding Design Notes to any object.Select Design Notes for Page from the context menu.Enter the information you want in the Design Note.
294
To the topTo the topTo the top
You can also add a Design Note to a media object from the Files panel by selecting the file, revealing the context menu,
and choosing Design Notes from the context menu.Insert Shockwave moviesYou can use Dreamweaver to insert Shockwave movies into your documents. Adobe® Shockwave®, a standard for interactive multimedia on theweb, is a compressed format that allows media files created in Adobe® Director® to be downloaded quickly and played by most popular browsers.In the Document window, place the insertion point where you want to insert a Shockwave movie and do one of the following:
In the Common category of the Insert panel, click the Media button and select the Shockwave icon
from the popup
Select Insert� Media� Shockwave.In the dialog box that appears, select a movie file.In the Property inspector, enter the width and height of the movie in the W and H text boxes.Add video (non-FLV)You can add video to your web page in different ways and using different formats. Video can be downloaded to the user or it can be streamed sothat it plays while it is downloading.Place the clip in your site folder.These clips are often in the AVI or MPEG file format.Link to the clip or embed it in your page.To link to the clip, enter text for the link such as “Download Clip”, select the text, and click the folder icon in the Propertyinspector. Browse to the video file and select it.Note: The user must download a helper application (a plugin) to view common streaming formats like Real Media,QuickTime, and Windows Media.Insert plugYou can create content such as a QuickTime movie for a browser plugin, and then use Dreamweaver to insert that content into an HTMLdocument. Typical plugins include RealPlayer and QuickTime, while some content files include mp3s and QuickTime movies.You can preview movies and animations that rely on browser plugins directly in the Design view of the Document window. You can play all plugelements at one time to see how the page will look to the user, or you can play each one individually to ensure that you have embedded thecorrect media element.Note: You cannot preview movies or animations that rely on ActiveX controls.After inserting content for a plugin, use the Property inspector to set parameters for that content. To view the following properties in the Propertyinspector, select a plugin object.The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower-right corner to see allInsert plugin content and set its propertiesIn the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the
In the Common category of the Insert panel, click the Media button and select the Plugin icon
from the menu.
Select Insert� Media� Plugin.In the dialog box that appears, select a content file for a plugin and click OK.Set the plugin options in the Property inspector.Specifies a name to identify the plugin for scripting. Enter a name in the unlabeled text box on the far left side of theProperty inspector.W and HSpecify, in pixels, the width and height allocated to the object on the page.Specifies the source data file. Click the folder icon to browse to a file, or enter a filename.Plg UrlSpecifies the URL of the attribute. Enter the complete URL of the site where users can download thein. If the user viewing your page does not have the plugin, the browser tries to download it from this URL.Determines how the object is aligned on the page.
295
To the topTo the topV Space and H SpaceSpecify the amount of white space in pixels above, below, and on both sides of the plugSpecifies the width of the border around the plugOpens a dialog box for entering additional parameters to pass to the plugin. Many plugins respond to specialYou can also view the attributes assigned to the selected plugin by clicking the Attribute button. You can edit, add, and deleteattributes such as width and height in this dialog box.Play plugin content in the Document windowInsert one or more media elements using one of the methods described in the previous section.Do one of the following:
Select one of the media elements you have inserted, and select View� Plugins� Play or click the Play button in theProperty inspector.
Select View� Plugins� Play All to play all of the media elements on the selected page that rely on plugNote: Play All only applies to the current document; it does not apply to other documents in a frameset, for example.Stop playing plugin content
Select a media element and select View� Plugins� Stop, or click the Stop button in the Property inspector.You can also select View� Plugins� Stop All to stop all plugin content from playing.If you have followed the steps to play plugin content in the Document window, but some of the plugin content does not play, try the following:
Make sure the associated plugin is installed on your computer, and that the content is compatible with the version of thein you have.
Open the file Configuration/Plugins/UnsupportedPlugins.txt in a text editor and look to see if the problematic plugin is listed.This file keeps track of plugins that cause problems in Dreamweaver and are therefore unsupported. (If you experienceproblems with a particular plugin, consider adding it to this file.)
Check that you have enough memory. Some plugins require an additional 2 to 5 MB of memory to run.Insert an ActiveX controlYou can insert an ActiveX control in your page. ActiveX controls (formerly known as OLE controls) are reusable components, somewhat likeminiature applications, that can act like browser plugins. They run in Internet Explorer with Windows, but they don’t run on the Macintoshbrowsers. The ActiveX object in Dreamweaver lets you supply attributes and parameters for an ActiveX control in your visitor’s browser.After inserting an ActiveX object, use the Property inspector to set attributes of the tag and parameters for the ActiveX control. ClickParameters in the Property inspector to enter names and values for properties that don’t appear in the Property inspector. There is no widelyaccepted standard format for parameters for ActiveX controls; to find out which parameters to use, consult the documentation for the ActiveXcontrol you’re using.
In the Document window, place the insertion point where you want to insert the content and do one of the following:
In the Common category of the Insert panel, click the Media button and select the ActiveX icon
.
In the Common category of the Insert panel, click the Media button and select the ActiveX icon. With the ActiveX icondisplayed in the Insert panel, you can drag the icon to the Document window.
Select Insert� Media� ActiveX. An icon marks where the ActiveX control will appear on the page in Internet Explorer.ActiveX propertiesThe Property inspector initially displays the most commonly used properties. Click the expander arrow in the lowerright corner to see allSpecifies a name to identify the ActiveX object for scripting. Enter a name in the unlabeled text box on the far left side of the PropertyW and HSpecify the width and height of the object, in pixels.Class IDIdentifies the ActiveX control to the browser. Enter a value or select one from the popup menu. When the page is loaded, the browseruses the class ID to locate the ActiveX control required for the ActiveX object associated with the page. If the browser doesn’t locate the specifiedActiveX control, it attempts to download it from the location specified in Base.Adds an tag within the tag for the ActiveX control. If the ActiveX control has another plugin equivalent, the
activates the plugin. Dreamweaver assigns the values you entered as ActiveX properties to their plugin equivalents.
296
To the topTo the topTo the topDetermines how the object is aligned on the page.Opens a dialog box for entering additional parameters to pass to the ActiveX object. Many ActiveX controls respond to specialDefines the data file to be used for a plugin if the Embed option is turned on. If you don’t enter a value, Dreamweaver attempts to determinethe value from the ActiveX properties entered already.V Space and H SpaceSpecify the amount of white space, in pixels, above, below, and on both sides of the object.Specifies the URL containing the ActiveX control. Internet Explorer downloads the ActiveX control from this location if it has not beeninstalled in the visitor’s system. If you don’t specify a Base parameter and if your visitor doesn’t already have the relevant ActiveX control installed,the browser can’t display the ActiveX object.Alt ImgSpecifies an image to be displayed if the browser doesn’t support the tag. This option is available only when the Embed option isSpecifies a data file for the ActiveX control to load. Many ActiveX controls, such as Shockwave and RealPlayer, do not use this parameter.Insert a Java appletYou can insert a Java applet into an HTML document using Dreamweaver. Java is a programming language that allows the development oflightweight applications () that can be embedded in web pages.After inserting a Java applet, use the Property inspector to set parameters. To view the following properties in the Property inspector, select a JavaIn the Document window, place the insertion point where you want to insert the applet, and then do one of the following:
In the Common category of the Insert panel, click the Media button and select the Applet icon
.
Select Insert� Media� Applet.Select a file containing a Java applet.Java applet propertiesThe Property inspector initially displays the most commonly used properties. Click the expander arrow in the lowerright corner to see allSpecifies a name to identify the applet for scripting. Enter a name in the unlabeled text box on the far left side of the Property inspector.W and HSpecify the width and height of the applet, in pixels.Specifies the file containing the applet’s Java code. Click the folder icon to browse to a file, or enter a filename.Identifies the folder containing the selected applet. When you select an applet, this text box is filled automatically.Determines how the object is aligned on the page.Specifies alternative content (usually an image) to be displayed if the user’s browser doesn’t support Java applets or has Java disabled. If youenter text, Dreamweaver inserts the text as the value of the applet’s attribute. If you select an image, Dreamweaver inserts an tag betweenthe opening and closing V Space and H SpaceSpecify the amount of white space in pixels above, below, and on both sides of the applet.Opens a dialog box for entering additional parameters to pass to the applet. Many applets respond to special parameters.Using behaviors to control mediaYou can add behaviors to your page to start and stop various media objects.Control Shockwave Or FlashPlay, stop, rewind, or go to a frame in a Shockwave movie or SWF file.Play SoundLets you play a sound; for example, you can play a sound effect whenever the user moves the mouse pointer over a link.Check PluginLets you check to see if visitors to your site have the required plugin installed, then route them to different URLs, depending onwhether they have the right plugin. This only applies to plugins, as the Check Plugin behavior does not check for ActiveX controls.Use parameters to control media objectsDefine special parameters to control Shockwave and SWF files, ActiveX controls, plugins, and Java applets. Parameters are used with the object,, and tags. Parameters set attributes specific to different types of objects. For example, a SWF file can use a quality parametername="quality"&#xpara;&#xm-11;value="best" for the object tag. The Parameter dialog box is available from the Property inspector. See the documentationfor the object you’re using for information on the parameters it requires.Note: There is no widely accepted standard for identifying data files for ActiveX controls. Consult the documentation for the ActiveX control you’reusing to find out which parameters to use.Enter a name and value for a parameterSelect an object that can have parameters (such as a Shockwave movie, an ActiveX control, a plugin, or a Java applet) in theDocument window.
297

Open the dialog box using one of the following methods:
Right-click (Windows) or Controlclick (Macintosh) the object, and select Parameters from the context menu.
Open the Property inspector if it isn’t already open, and click the Parameters button found in the lower half of the Propertyinspector. (Make sure the Property inspector is expanded.)Click the Plus (+) button and enter the parameter name and value in the appropriate columns.Remove a parameter
Select a parameter and press the minus (–) button.Reorder parameters
Select a parameter, and use the up and down arrow buttons.More Help topics
Legal Notices | Online Privacy Policy
298
Adding video
To the topTo the topEmbed videos in web pages (HTML5)Inserting FLV filesEmbed videos in web pages (HTML5)HTML5 supports video and audio tags that allow users to play video and audio files in a browser, without an external plug-in or player.Dreamweaver supports code hints for adding video and audio tags.Live View renders the video, providing a preview of the video that you are embedding in the web page.Note: Although you can embed any video in your web page, Live View does not always render all videos. The audio and video tags aresupported in Dreamweaver using the Apple QuickTime plug-in. In Windows, if the Apple QuickTime plug-in is not installed, then the web pagedoes not render the media content.Inserting FLV filesInsert FLV filesYou can easily add FLV video to your web pages without using the Flash authoring tool. You must have an encoded FLV file before you begin.Dreamweaver inserts a SWF component that displays the FLV file; when viewed in a browser, this component displays the selected FLV file, aswell as a set of playback controls.
Dreamweaver gives you the following options for delivering FLV video to your site visitors:Progressive Download VideoDownloads the FLV file to the site visitor’s hard disk and then plays it. Unlike traditional “download and play”methods of video delivery, however, progressive download allows the video file to start playing before the download is complete.Streaming VideoStreams the video content and plays it on a web page after a short buffer period that ensures smooth play back. To enablestreaming video on your web pages, you must have access to Adobe® Flash® Media Server.You must have an encoded FLV file before you can use it in Dreamweaver. You can insert video files created with two kinds of codecs(compression/decompression technologies): Sorenson Squeeze and On2.As with regular SWF files, when you insert an FLV file, Dreamweaver inserts code that detects whether the user has the correct version of FlashPlayer to view the video. If the user does not have the correct version, the page displays alternative content that prompts the user to download thelatest version of Flash Player.Note: To view FLV files, users must have Flash Player 8 or later installed on their computers. If a user does not have the required version ofFlash Player installed, but does have Flash Player 6.0 r65 or later installed, the browser displays a Flash Player express installer instead of thealternative content. If the user declines the express install, the page then displays the alternative content.For more information about working with video, visit the Video Technology Center at
299
Insert an FLV file
Select Insert� Media� FLV.In the Insert FLV dialog box, select Progressive Download or Streaming Video from the Video Type pop-up menu.Complete the rest of the dialog box options and click OK.Note: Microsoft Internet Information Server (IIS) does not process nested object tags. For ASP pages, Dreamweaver uses nested object/embedcode instead of nested object code when inserting SWF or FLV files.Set options for progressive download videoThe Insert FLV dialog box lets you set options for progressive download delivery of an FLV file inserted in a web page.Select Insert� Media� FLV (or click the FLV icon in the Media category of the Common insert bar).In the Insert FLV dialog box, select Progressive Download Video from the Video Type menu.Specify the following options:Specifies a relative or absolute path to the FLV file. To specify a relative path (for example, mypath/myvideo.flv), click theBrowse button, navigate to the FLV file, and select it. To specify an absolute path, type the URL (for example,http://www.example.com/myvideo.flv) of the FLV file.Specifies the appearance of the video component. A preview of the selected skin appears beneath the Skin pop-upSpecifies the width of the FLV file, in pixels. To have Dreamweaver determine the exact width of the FLV file, click theDetect Size button. If Dreamweaver cannot determine the width, you must type a width value.Specifies the height of the FLV file, in pixels. To have Dreamweaver determine the exact height of the FLV file, clickthe Detect Size button. If Dreamweaver cannot determine the height, you must type a height value.Note: Total With Skin is the width and height of the FLV file plus the width and height of the selected skin.Maintains the same aspect ratio between the width and height of the video component. This option is selected byAuto PlaySpecifies whether to play the video when the web page is opened.Auto RewindSpecifies whether the playback control returns to starting position after the video finishes playing.Click OK to close the dialog box and add the FLV file to your web page.The Insert FLV command generates a video player SWF file and a skin SWF file that are used to display your video contenton a web page. (To see the new files, you may need to click the Refresh button in the Files panel.) These files are stored inthe same directory as the HTML file to which you’re adding video content. When you upload the HTML page containing theFLV file, Dreamweaver uploads these files as dependent files (as long as you click Yes in the Put Dependent Files dialogSet options for streaming videoThe Insert FLV dialog box lets you set options for streaming video download of an FLV file inserted in a web page.Select Insert� Media� FLV (or click the FLV icon in the Media category of the Common insert bar).Select Streaming Video from the Video Type pop-up menu.Server URISpecifies the server name, application name, and instance name in the formStream NameSpecifies the name of the FLV file that you want to play (for example, myvideo.flv). The .flv extension isSpecifies the appearance of the video component. A preview of the selected skin appears beneath the Skin pop-upSpecifies the width of the FLV file, in pixels. To have Dreamweaver determine the exact width of the FLV file, click theDetect Size button. If Dreamweaver cannot determine the width, you must type a width value.Specifies the height of the FLV file, in pixels. To have Dreamweaver determine the exact height of the FLV file, clickthe Detect Size button. If Dreamweaver cannot determine the height, you must type a height value.Note: Total With Skin is the width and height of the FLV file plus the width and height of the selected skin.Maintains the same aspect ratio between the width and height of the video component. This option is selected byLive Video FeedSpecifies whether the video content is live. If Live Video Feed is selected, Flash Player plays a live videofeed streamed from Flash® Media Server. The name of the live video feed is the name specified in the Stream Name textNote: When you select Live Video Feed, only the volume control appears on the component’s skin, because you cannotmanipulate live video. Additionally, the Auto Play and Auto Rewind options have no effect.
Auto PlaySpecifies whether to play the video when the web page is opened.
300
Auto RewindSpecifies whether the playback control returns to starting position after the video finishes playing.Buffer TimeSpecifies the time, in seconds, required for buffering before the video starts playing. The default buffer time isset to 0 so that the video starts playing instantly after the Play button is clicked. (If Auto Play is selected, the video startsplaying as soon as a connection is made with the server.) You might want to set a buffer time if you are delivering video thathas a higher bit rate than the site visitor’s connection speed, or when Internet traffic might cause bandwidth or connectivityproblems. For example, if you want to send 15 seconds of video to the web page before the web page starts to play the video,set the buffer time to 15.Click OK to close the dialog box and add the FLV file to your web page.The Insert FLV command generates a video player SWF file and a skin SWF file that are used to display your video on a webpage. The command also generates a main.asc file that you must upload to your Flash Media Server. (To see the new files,you may need to click the Refresh button in the Files panel.) These files are stored in the same directory as the HTML file towhich you’re adding video content. When you upload the HTML page containing the FLV file, don’t forget to upload the SWFfiles to your web server, and the main.asc file to your Flash Media Server.Note: If you already have a main.asc file on your server, check with your server administrator before uploading the main.ascfile generated by the Insert FLV command.You can easily upload all of the required media files by selecting the video component placeholder in the DreamweaverDocument window, and clicking the Upload Media button in the Property inspector (Window� Properties). To see a list ofrequired files, click Show required files.Note: The Upload Media button does not upload the HTML file that contains the video content.Edit Flash Player download informationWhen you insert an FLV file in a page, Dreamweaver inserts code that detects whether the user has the correct version of Flash Player. If not, thepage displays default alternative content that prompts the user to download the latest version. You can change this alternative content at any time.This procedure also applies to SWF files.Note: If a user does not have the required version but does have Flash Player 6.0 r65 or later, the browser displays a Flash Player expressinstaller. If the user declines the express install, the page then displays the alternative content.In the Design view of the Document window, select the SWF file or FLV file.Click the eye icon in the tab of the SWF file or FLV file.You can also press Control + ] to switch to alternative content view. To return to SWF/FLV view, press Control + [ until allof the alternative content is selected. Then press Control + [ again.Edit the content just as you would edit any other content in Dreamweaver.Note: You cannot add SWF files or FLV files as alternative content.Click the eye icon again to return to the SWF or FLV file view.Troubleshoot FLV filesThis section details some of the most common causes of problems with FLV files.Viewing problems caused by absence of related filesThe code generated by Dreamweaver CS4 and later relies on four dependent files, different from the FLV file itself:
swfobject_modified.js
expressInstall.swf
FLVPlayer_Progressive.swf
The skin file (for example Clear_Skin_1.swf)Note that there are two more dependent files for Dreamweaver CS4 and later, compared to Dreamweaver CS3.The first two of these files (swfobject_modified.js and expressInstall.swf) are installed in a folder called Scripts, which Dreamweaver creates in theroot of your site if it doesn't already exist.The second two files (FLVPlayer_Progressive.swf and the skin file) are installed in the same folder as the page in which the FLV is embedded.The skin file contains the controls for the FLV, and its name depends on the skin chosen in the options described in Dreamweaver Help. Forexample, if you choose Clear Skin, the file is named Clear_Skin_1.swf.All four dependent files MUST be uploaded to your remote server for the FLV to display correctly.Forgetting to upload these files is the most common cause of FLV files failing to run correctly in a web page. If one of the files is missing, youmight see a "white box" on the page.To ensure that you've uploaded all of the dependent files, use the Dreamweaver Files panel to upload the page in which the FLV appears. Whenyou upload the page, Dreamweaver asks you if you want to upload dependent files (unless you've turned off this option). Click yes to uploaddependent files.
301

Viewing problems when previewing pages locally
Because of security updates in Dreamweaver CS4, you cannot use the Preview in Browser command to test a page with an embedded FLVunless you define a local testing server in your Dreamweaver site definition and use the testing server to preview the page.Normally, you require a testing server only if you are developing pages with ASP, ColdFusion, or PHP (see Set up your computer for applicationdevelopment). If you are building websites that use only HTML, and haven't defined a testing server, pressing F12 (Windows) Opt+F12 (Macintosh)produces a jumble of skin controls onscreen. The workaround is either to define the testing server and use the testing server to preview yourpage, or upload your files to a remote server and view them there.Note: It’s possible that security settings may also be responsible for an inability to preview local FLV content, but Adobe has not been able toconfirm this. You can try changing your security settings to see if it helps. For more information on changing your security settings, see Tech NoteOther possible causes for problems with FLV files
If you are having trouble previewing locally, make sure the Preview using temporary file option is under Edit� Preferences� Preview in Browser
Make sure you have the latest FlashPlayer plug-in
Be wary of moving files and folders around outside of Dreamweaver. When you move files and folders outside ofDreamweaver, Dreamweaver cannot guarantee the correct paths to FLV-related files.
You can temporarily replace the FLV file that’s giving you trouble with a known working FLV file. If the replacement FLV fileworks, then the problem is with the original FLV file, and not with your browser or computer.Edit or delete an FLV componentChange the settings for the video on your web page, by selecting the video component placeholder in the Dreamweaver Document window andusing the Property inspector. Another way is to delete the video component and reinsert it by selecting Insert� Media� FLV.Edit the FLV componentSelect the video component placeholder in the Dreamweaver Document window by clicking the FLV icon at the center of theOpen the Property inspector (Window� Properties) and make your changes.Note: You cannot change video types (from progressive download to streaming, for example) by using the Property inspector.To change the video type, delete the FLV component, and reinsert it by selecting Insert� Media� FLV.Delete the FLV component
Select the FLV component placeholder in the Dreamweaver Document window and press Delete.Remove FLV detection codeFor Dreamweaver CS4 and later, Dreamweaver inserts Flash Player detection code directly in the object tag that contains the FLV file. ForDreamweaver CS3 and earlier, however, the detection code resides outside the FLV file’s object tag. For this reason, if you want to delete FLVfiles from pages created with Dreamweaver CS3 and earlier, you must remove the FLV files and use the Remove FLV detection command toremove the detection code.
Select Commands� Remove Flash Video Detection.
Legal Notices | Online Privacy Policy
302
Adding web widgets

A web widget is a web page component comprised of HTML, CSS, and JavaScript. Examples of web widgets include accordions, tabbed panels,and calendars.You can make your own personal selection of web widgets available in Dreamweaver by using the Adobe Widget Browser—an AIR applicationthat lets you browse, configure, and preview widgets using a visual interface.Select Insert� Widget.In the Widget dialog box, select a widget and preset (if applicable) and click OK.You can also add a web widget to a Dreamweaver page (CS5.5 and later) by doing the following:In the Widget Browser, navigate to My Widgets.Select the widget you want to add.Click and hold the Drag and Drop in Dreamweaver icon at the upper left corner of the Live View tab. Drag the widget toDreamweaver into Design view (Windows) or Design or Code view (Macintosh OS).You cannot drag and drop the widget into Live view, but you can use Live view to test the widget once you’ve dropped it into the page.More Help topics
Adobe Widget Browser Help
Legal Notices | Online Privacy Policy
303
Automating tasks
To the topTo the topTask automationUse the History panelRepeat stepsApply steps in the History panel to objectsCopy and paste steps between documentsCreate and use commands from history stepsRecord and save commandsTask automationThe History panel records the steps you take when you complete a task. Automate a frequently performed task by replaying those steps from theHistory panel or creating a new command that performs the steps automatically.Certain mouse movements, such as selecting by clicking in the Document window, can’t be played back or saved. When you make such amovement, a black line appears in the History panel (the line does not become obvious until you perform another action). To avoid this, use thearrow keys instead of the mouse to move the insertion point within the Document windowSome other steps also aren’t repeatable, such as dragging a page element to somewhere else on the page. When you perform such a step, anicon with a small red appears in the History panel.Saved commands are retained permanently (unless you delete them), while recorded commands are discarded when you exit fromAdobe® Dreamweaver®, and copied sequences of steps are discarded when you copy something elseUse the History panelThe History panel (Window� History) shows a list of the steps you’ve performed in the active document since you created or opened thatdocument (but not steps you’ve performed in other frames, in other Document windows, or in the Site panel). Use the History panel to undomultiple steps at once and to automate tasks.
Slider (thumb) StepsReplay buttonCopy Steps buttonSave As CommandThe slider, or thumb, in the History panel initially points to the last step that you performed.Note: You can’t rearrange the order of steps in the History panel. Don’t think of the History panel as an arbitrary collection of commands; think ofit as a way to view the steps you’ve performed, in the order in which you performed them.Undo the last step
Do one of the following:
Select Edit� Undo.
Drag the History panel slider up one step in the list.Note: To scroll automatically to a particular step, you must click to the left of the step; clicking the step itself selects the step.Selecting a step is different from going back to that step in your undo history.Undo multiple steps at once
Drag the slider to point to any step, or click to the left of a step along the path of the slider.
304
To the topTo the top
The slider scrolls automatically to that step, undoing steps as it scrolls.
Note: As with undoing a single step, if you undo a series of steps and then do something new in the document, you can no longer redo theundone steps; they disappear from the History panel.Set the number of steps that the History panel retains and showsThe default number of steps is sufficient for most users’ needs. The higher the number, the more memory the History panel requires, which canaffect performance and slow your computer significantly.Select Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh).Select General from the Category list on the left.Enter a number for Maximum Number Of History Steps.When the History panel reaches this maximum number of steps, the earliest steps are discarded.Erase the history list for the current document:
In the History panel’s context menu, select Clear History.This command also clears all undo information for the current document; after choosing Clear History, you can’t undo the steps that are cleared.Clear History does not undo steps; it merely removes the record of those steps from memory.Repeat stepsUse the History panel to repeat the last step you performed, repeat a series of adjacent steps, or repeat a series of nonadjacent steps. Replay thesteps directly from the History panel.Repeat one step
Do one of the following:
Select Edit� Redo.
In the History panel, select a step and click the Replay button. The step is replayed and a copy of it appears in the HistoryRepeat a series of stepsSelect steps in the History panel:
To select adjacent steps, drag from one step to another (don’t drag the slider; just drag from the text label of one step tothe text label of another step), or select the first step, and then Shift-click the last step.
To select nonadjacent steps, select a step, and then Controlclick (Windows) or Command-click (Macintosh) to select ordeselect other steps.The steps played are the selected (highlighted) steps, not necessarily the step the slider currently points to.Note: Although you can select a series of steps that includes a black line indicating a step that can’t be recorded, thatstep is skipped when you replay the steps.Click Replay.The steps are replayed in order, and a new step, Replay Steps, appears in the History panel.Make or extend a selection
Hold down the Shift key while pressing an arrow key.If a black mouse-movement indicator line appears while you’re performing a task you want to repeat later, you can undo back to before thatstep and try another approach, perhaps using the arrow keys.Apply steps in the History panel to objectsYou can apply a set of steps from the History panel to any object in the Document window.If you select multiple objects and then apply steps to them from the History panel, the objects are treated as a single selection and Dreamweaverattempts to apply the steps to that combined selection; however, you can apply a set of steps only to a single object at a time.To apply the steps to each object in a set of objects, you must make the last step in the series select the next object in the set. The secondprocedure demonstrates this principle in a specific scenario: setting the vertical and horizontal spacing of a series of images.Apply steps to one other objectSelect the object.
305
To the top
Select the relevant steps in the History panel, and click Replay.
Apply steps to multiple objectsStart with a document in which each line consists of a small image (such as a graphical bullet or an icon) followed by text.The goal is to set the images off from the text and from the other images above and below them.
Open the Property inspector (Window� Properties), if it isn’t already open.Select the first image.In the Property inspector, enter numbers in the V Space and H Space boxes to set the image’s spacing.Click the image again to make the Document window active without moving the insertion point.Press the Left Arrow key to move the insertion point to the left of the image.Press the Down Arrow key to move the insertion point down one line, leaving it just to the left of the second image in thePress Shift+Right Arrow to select the second image.Note: Do not select the image by clicking it, or you won’t be able to replay all the steps.In the History panel, select the steps that correspond to changing the image’s spacing and selecting the next image. ClickReplay to replay those steps.
The current image’s spacing changes, and the next image is selected.
Continue to click Replay until all the images are spaced correctly.Copy and paste steps between documentsEach open document has its own history of steps. You can copy steps from one document and paste them into another.Closing a document clears its history. If you know you will want to use steps from a document later, copy or save the steps before you close theIn the document containing the steps you want to reuse, select the steps in the History panel.Click Copy Steps in the History panel
Note: The Copy Steps button in the History panel is different from the Copy command in the Edit menu. You can’t use Edit� Copy to copy steps, although you do use Edit� Paste to paste them.Be careful when you copy steps that include a Copy or a Paste command:
Don’t use Copy Steps if one of the steps is a Copy command; you may not be able to paste such steps the way you want.
If your steps include a Paste command, you can’t paste those steps, unless the steps also include a Copy commandbefore the Paste command.Open the other document.Place the insertion point where you want it, or select an object to apply the steps to.Select Edit� Paste.The steps are played back as they’re pasted into the document’s History panel. The History panel shows them as only onestep, called Paste Steps.
306
To the topTo the top
If you pasted steps into a text editor or into Code view or the Code inspector, they appear as JavaScript code. This can be
useful for learning to write your own scripts.Create and use commands from history stepsSave a set of history steps as a named command, which then becomes available in the Commands menu. Create and save a new command if youmight use a set of steps again, especially the next time you start Dreamweaver.Create a commandSelect a step or set of steps in the History panel.Click the Save As Command button, or select Save As Command from the History panel’s context menu.Enter a name for the command and click OK.The command appears in the Commands menu.Note: The command is saved as a JavaScript file (or sometimes an HTML file) in yourDreamweaver/Configuration/Commands folder. If you are using Dreamweaver on a multiuser operating system, the file issaved in the specific user’s Commands folder.Use a saved commandSelect an object to apply the command to, or place the insertion point where you want to apply the command.Select the command from the Commands menu.Edit a command nameSelect Commands� Edit Command List.Select a command to rename, enter a new name for it, and then click Close.Delete a name from the Commands menuSelect Commands� Edit Command List.Select a command.Click Delete, and then click Close.Record and save commandsRecord a temporary command for short-term use, or record and save a command to use later. Dreamweaver retains only one recorded commandat a time; as soon as you start recording a new command, the old command is lost, unless you save it before recording the new command.Temporarily record a series of stepsSelect Commands� Start Recording, or press Control+Shift+X (Windows) or Command+Shift+X (Macintosh).The pointer changes to indicate that you’re recording a command.When you finish recording, select Commands� Stop Recording, or press Control+Shift+X (Windows) or Command+Shift+XPlay back a recorded command
Select Commands� Play Recorded Command.Save a recorded commandSelect Commands� Play Recorded Command.Select the Run Command step that appears in the History panel’s step list, and then click the Save As Command button.Enter a name for the command, and click OK.The command appears in the Commands menu.More Help topics
Legal Notices | Online Privacy Policy
307
Create a link to a Word or Excel document

You can insert a link to a Microsoft Word or Excel document in an existing page.Open the page where you want the link to appear.Drag the file from its current location to your Dreamweaver page, positioning the link wherever you want.Select Create A Link, and then click OK.If the document you are linking to is located outside of your site’s root folder, Dreamweaver prompts you to copy thedocument to the site root.By copying the document to the site’s root folder, you ensure that the document will be available when you publish theWhen you upload your page to your web server, make sure to upload the Word or Excel file, too.Your page now contains a link to the Word or Excel document. The link text is the name of the linked file; you can change thelink text in the Document window if you wish.
Legal Notices | Online Privacy Policy
308
Creating and managing a list of favorite assets
To the topTo the topManaging favorite assetsAdd or remove favorite assetsCreate a nickname for a favorite assetGroup assets in a Favorites folderManaging favorite assetsThe complete list of all recognized assets list can become cumbersome for some large sites. You can add frequently used assets to a Favoriteslist, group related assets together, give them nicknames to remind yourself what they’re for, and find them easily in the Assets panel.Note: Favorite assets are not stored as separate files on your disk; they’re references to the assets in the Site list. Dreamweaver keeps track ofwhich assets from the Site list to display in the Favorites list.Most of the operations of the Assets panel are the same in the Favorites list as in the Site list. However, there are several tasks that you canperform only in the Favorites list.Add or remove favorite assetsThere are several ways to add assets to your site’s Favorites list in the Assets panel.Adding a color or URL to the Favorites list requires an extra step. You can’t add new colors or URLs to the Site list; the Site list contains onlyassets that are already in use in your site.Note: There are no Favorites lists for templates and library items.Add assets to the Favorites listDo one of the following:
Select one or more assets in the Site list of the Assets panel, then click the Add To Favorites button
.
Select one or more assets in the Site list of the Assets panel, right-click (Windows) or Control-click (Macintosh), then selectAdd To Favorites
Select one or more files in the Files panel, right-click (Windows) or Control-click (Macintosh), then select Add To FavoritesDreamweaver ignores files that don’t correspond to a category in the Assets panel.
Right-click (Windows) or Control-click (Macintosh) an element in the Document window’s Design view, then select the contextmenu command to add the element to a Favorites category.The context menu for text contains either Add To Color Favorites or Add To URL Favorites, depending on whether the text hasa link attached. You can add only those elements that match one of the categories in the Assets panel.Add a new color or URL to the Favorites listIn the Assets panel, select the Colors or URLs category.Select the Favorites option at the top of the panel.Click the New Color or New URL button
Do one of the following:
Select a color using the color picker, then give the color a nickname if desired.To close the color picker without selecting a color, press Esc or click the gray bar at the top of the color picker.
Enter a URL and a nickname in the Add New URL dialog box, then click OK.Remove assets from the Favorites listIn the Assets panel, select the Favorites option at the top of the panel.Select one or more assets (or a folder) in the Favorites list.Click the Remove From Favorites button
The assets are removed from the Favorites list, but not from the Site list. If you remove a Favorites folder, the folder and all itscontents are removed.
309

To the topTo the topCreate a nickname for a favorite assetYou can give nicknames (for instance, PageBackgroundColor rather than #999900) to assets only in the Favorites list. The Site list retains theirreal filenames (or values, in the case of colors and URLs).In the Assets panel (Window� Assets), select the category that contains your asset.Select the Favorites option at the top of the panel.Do one of the following:
Right-click (Windows) or Control-click (Macintosh) the asset’s name or icon in the Assets panel, then select Edit
Click the asset’s name once, pause, then click it again. (Do not double-click; double-clicking opens the item for editing.)Type a nickname for the asset, then press Enter (Windows) or Return (Macintosh).Group assets in a Favorites folderPlacing an asset in Favorites folder does not change the location of the asset’s file on your disk.In the Assets panel, select the Favorites option at the top of the panel.Click the New Favorites Folder button
Type a name for the folder, then press Enter (Windows) or Return (Macintosh).Drag assets into the folder.More Help topics
Legal Notices | Online Privacy Policy
310
Displaying data with Spry
To the topTo the topAbout Spry data setsCreate a Spry data setCreate a Spry regionCreate a Spry repeat regionCreate a Spry repeat list regionAbout Spry data setsA Spry data set is fundamentally a JavaScript object that holds a collection of data that you specify. With Dreamweaver you can quickly create thisobject and load data from a data source (such as an XML file or HTML file) into the object. The data set results in an array of data in the form of astandard table containing rows and columns. As you’re creating a Spry data set with Dreamweaver, you can also specify how you want to displaythe data on a web page.You can think of a data set as a virtual holding container whose structure is rows and columns. It exists as a JavaScript object whose informationis only visible when you specify exactly how to display it on the web page. You can display all of the data in this holding container, or you mightchoose to display only selected pieces of it.For complete information on how Spry data sets work, see For a video overview from the Dreamweaver engineering team about working with Spry data sets, see For a video tutorial on working with Spry data sets, see Create a Spry data setCreate a Spry HTML data setIf you are only creating a data set, you do not need to worry about the insertion point. If you are creating a data set and alsoinserting a layout, make sure that the insertion point is where you want to insert the layout on the page.Choose Insert� Spry� Spry Data Set.In the Specify Data Source screen, do the following:
Select HTML from the Select Data Type pop-up menu. (It’s selected by default.)
Specify a name for the new data set. The default name is ds1 the first time you create a data set. The data set name cancontain letters, numbers, and underscores, but cannot start with a number.
Specify the HTML elements in your data source that you want Dreamweaver to detect. For example, if you’ve organizedyour data inside a tag, and you want Dreamweaver to detect tags instead of tables, select Divs from the Detectpop-up menu. The Custom option lets you type any tag name that you want to detect.
Specify the path to the file that contains your HTML data source. The path can be a relative path to a local file in your site(for example, data/html_data.html), or an absolute URL to a live web page (using HTTP or HTTPS). You can click theBrowse button to navigate to a local file and select it.Dreamweaver renders the HTML data source in the Data Selection window, and displays visual markers for the elementsthat are eligible as containers for the data set. The element you want to use must already have a unique ID assigned to it.If it doesn’t, Dreamweaver will display an error message, and you’ll need to go back to the data source file and assign aunique ID. Additionally, eligible elements in the data source file cannot reside in Spry regions, or contain other dataAlternatively you can specify a Design Time Feed as your data source. For more information, see Use a design-time feed.
Select the element for your data container by clicking one of the yellow arrows that appears in the Data Selection window,or by choosing an ID from the Data Containers pop-up menu.
311
Selecting the element for the HTML data set data container.For lengthy files, you can click the Expand/Collapse arrow at the bottom of the Data Selection window to see more of theOnce you select the container element for the data set, Dreamweaver displays a preview of the data set in the DataPreview window.
(Optional) Select Advanced Data Selection if you want to specify CSS data selectors for the data set. For example, if youspecified in the Row Selectors text box, and in the Column Selectors text box, the data set wouldinclude only those rows with the .product class assigned to them, and only those columns with the .boximage classassigned to them.If you want to type more than one selector in a given text box, separate the selectors with a comma.For more information, see About Spry data selectors.
When you’re finished in the Specify Data Source screen, click Done to create the data set right away, or click Next to goon to the Set Data Options screen. If you click Done, the data set becomes available in the Bindings panel (Window� In the Set Data Options screen, do the following:
(Optional) Set data set column types by selecting a column, and choosing a column type from the Type pop-up menu. Forexample, if a column in the data set contains numbers, select the column and choose from the Type pop-upmenu. This option is only important if you want your user to be able to sort the data by that column.You can select a data set column by clicking its header, by choosing it from the Column Name pop-up menu, or bynavigating to it using the left and right arrows in the upper-left corner of the screen.
(Optional) Specify how you want to sort the data by selecting the column you want to sort by from the Sort Columns pop-up menu. Once you’ve selected the column, you can specify whether to sort it in ascending or descending order.
(Optional: tables only) Deselect Use First Row as Header if you want to use generic column names (that is column0,column1, column 2, and so on) instead of the column names specified in your HTML data source.Note: If you’ve selected something other than a table for the container element of your data set, this option and the nextoption are not available. Dreamweaver automatically uses column0, column1, column2, and so on, for the column namesof non-table-based data sets.
(Optional: tables only) Select Use Columns as Rows to reverse the horizontal and vertical orientation of the data in thedata set. If you select this option, columns will be used as rows.
(Optional) Select Filter out Duplicate rows to exclude duplicate rows of data from the data set.
(Optional) Select Disable Data Caching if you always want to have access to the most recent data in the data set. If youwant data to autorefresh, select Autorefresh Data and specify a refresh time in milliseconds.
When you’re finished in the Set Data Options screen, click Done to create the data set right away, or click Next to go on tothe Choose Insert Options screen. If you click Done, the data set becomes available in the Bindings panel (Window� In the Choose Insert Options screen, do one of the following:
Select a layout for the new data set, and specify the appropriate setup options. For more information, see Choose a layoutfor the data set.
312
Select Do Not Insert HTML. If you select this option, Dreamweaver creates the data set, but does not add any HTML tothe page. The data set becomes available from the Bindings panel (Window� Bindings), and you can manually dragpieces of data from the data set to the page.Click Done.Dreamweaver creates the data set and, if you selected a layout option, displays the layout and data placeholders on yourpage. If you look in Code view, you’ll see that Dreamweaver has added references in the header to the SpryData.js file andthe SpryHTMLDataSet.js file. These files are important Spry assets that work in conjunction with the page. Be sure not toremove this code from your page or the data set will not function. When you upload your page to a server, you’ll also need toupload these files as dependent filesCreate a Spry XML data setIf you are only creating a data set, you do not need to worry about the insertion point. If you are creating a data set and alsoinserting a layout, make sure that the insertion point is where you want to insert the layout on the page.Choose Insert� Spry� Spry Data Set.In the Specify Data Source screen, do the following:
Select XML from the Select Data Type pop-up menu.
Specify a name for the new data set. The default name is ds1 the first time you create a data set. The data set name cancontain letters, numbers, and underscores, but cannot start with a number.
Specify the path to the file that contains your XML data source. The path can be a relative path to a local file in your site(for example, datafiles/data.xml), or an absolute URL to a page on the web (using HTTP or HTTPS). You can click theBrowse button to navigate to a local file and select it.Dreamweaver renders the XML data source in the Row Elements window, displaying the XML tree of data elementsavailable for selection. Repeating elements are marked with a plus (+) sign, and child elements are indented.Alternatively you can specify a Design Time Feed as your data source. For more information, see Use a design-time feed.
Select the element that contains the data you want to display. Typically this element is a repeating element, such as&#xmenu;&#x_ite;&#xm000; with several children elements, such as&#xitem; &#xlink; Þsc;&#xript;&#xion0; and so on.
Selecting a repeating element for the XML data set.Once you select the container element for the data set, Dreamweaver displays a preview of the data set in the DataPreview window. The XPath text box displays an expression that shows where the selected node is located in the XMLsource file.Note: XPath (XML Path Language) is a syntax for addressing portions of an XML document. It is used mostly as a querylanguage for XML data, just as the SQL language is used to query databases. For more information on XPath, see theXPath language specification on the W3C website at
When you’re finished in the Specify Data Source screen, click Done to create the data set right away, or click Next to goon to the Set Data Options screen. If you click Done, the data set becomes available in the Bindings panel (Window� In the Set Data Options screen, do the following:
313
(Optional) Set data set column types by selecting a column, and choosing a column type from the Type pop-up menu. For
example, if a column in the data set contains numbers, select the column and choose from the Type pop-upmenu. This option is only important if you want your user to be able to sort the data by that column.You can select a data set column by clicking its header, by choosing it from the Column Name pop-up menu, or bynavigating to it using the left and right arrows in the upper-left corner of the screen.
(Optional) Specify how you want to sort the data by selecting the column you want to sort by from the Sort Column pop-upmenu. Once you’ve selected the column, you can specify whether to sort it in ascending or descending order.
(Optional) Select Filter Out Duplicate rows to exclude duplicate rows of data from the data set.
(Optional) Select Disable Data Caching if you always want to have access to the most recent data in the data set. If youwant to autorefresh data, select Autorefresh Data and specify a refresh time in milliseconds.
When you’re finished in the Set Data Options screen, click Done to create the data set right away, or click Next to go on tothe Choose Insert Options screen. If you click Done, the data set becomes available in the Bindings panel (Window� In the Choose Insert Options screen, do one of the following:
Select a layout for the new data set, and specify the appropriate setup options. For more information, see Choose a layoutfor the data set.
Select Do Not Insert HTML. If you select this option, Dreamweaver creates the data set, but does not add any HTML tothe page. The data set becomes available from the Bindings panel (Window� Bindings), and you can manually dragpieces of data from the data set to the page.Click Done.Dreamweaver creates the data set and, if you selected a layout option, displays the layout and data placeholders on yourpage. If you look in Code view, you’ll see that Dreamweaver has added references in the header to the xpath.js file and theSpryData.js file. These files are important Spry assets that work in conjunction with the page. Be sure not to remove this codefrom your page or the data set will not function. When you upload your page to a server, you’ll also need to upload these filesas dependent files.Choose a layout for the data setThe Choose Insert Options screen lets you select different display options for how you want to display values from the data set on the page. Youcan display data using a dynamic Spry Table, a master/detail layout, a stacked containers (single column) layout, or a stacked containers withspotlight area (two-column) layout. A thumbnail depiction of what each layout looks like appears in the Choose Insert Options screen.Dynamic Table layoutSelect this option if you want to display your data in a dynamic Spry Table. Spry Tables allow for dynamic column sorting and other interactiveOnce you’ve selected this option, click the Set Up button to open the Insert Table dialog box and follow these steps:In the Columns panel, adjust the columns for your table by doing the following:
Select a column name and click the minus (-) sign to delete the column from the table. Click the plus (+) sign and select acolumn name to add new columns to the table.
Select a column name and click the up or down arrows to move the column. Moving a column up moves it further left inthe displayed table; moving a column down moves it to the right.To make a column sortable, select the column in the Columns panel and select Sort Column When Header Is Clicked. Bydefault, all columns are sortable.If you want to make a column unsortable, select its column name in the Columns panel, and deselect Sort Column WhenHeader Is Clicked.If you have CSS styles associated with your page, either as an attached style sheet or as a set of individual styles in yourHTML page, you can apply a CSS class for one or more of the following options:Odd Row ClassChanges the appearance of the odd-numbered rows in the dynamic table according to the selected classEven Row ClassChanges the appearance of the even-numbered rows in the dynamic table according to the selected classHover ClassChanges the appearance of a table row when you move the mouse over it according to the selected classSelect ClassChanges the appearance of a table row when you click it according to the selected class style.Note: The order of the odd, even, hover, and select classes in your style sheet is very important. The rules should be in the
314
exact order indicated above (odd, even, hover, select). If the hover rule appears below the select rule in the style sheet, the
hover effect won’t appear until the user mouses over a different row. If the hover and select rules appear above the even andodd rules in the style sheet, the even and odd effects will not work at all. You can drag rules in the CSS panel to order themcorrectly, or you can manipulate the CSS code directly.If the table you are creating is going to become a dynamic Spry master table, select Update Detail Region When Row IsClicked. For more information, see About dynamic Spry master tables and updating detail regions.Click OK to close the dialog box and then click Done in the Choose Insert Options screen.If you’re in Design view you’ll see the table appear with a row of headers and a row of data references. The data referencesare highlighted and enclosed in curly brackets ({}).Master/Detail layoutSelect this option if you want to display your data using a master/detail layout. Master/detail layouts let users click an item in the master (left)region that updates the information in the detail (right) region. Typically the master region contains a long list of names, for example a list ofavailable products. When the user clicks one of the product names, the detail region displays much more detailed information about the selection.Once you’ve selected this option, click the Set Up button to open the Insert Master/Detail Layout dialog box and follow these steps:In the Master Columns panel, adjust the content of your master region by doing the following:
Select a column name and click the minus (-) sign to delete the column from the master region. Click the plus (+) sign andselect a column name to add new columns to the master region. By default Dreamweaver populates the master regionwith data from the first column in the data set.
Select a column name and click the up or down arrows to move the column. Moving a column up or down in the MasterColumns panel sets the order of the data’s appearance in the master region on the page.Repeat the above steps for the Detail Columns panel. By default Dreamweaver populates the detail region with all of the datathat is not in the master region (that is, all columns except for the first column in the data set).(Optional) Set different container types for data in the detail region. To do so, select the name of a detail column, and selectthe container you want to use for it from the Container Type pop-up menu. You can choose from , or H1-H6Click OK to close the dialog box and then click Done in the Choose Insert Options screen.If you’re in Design view you’ll see the master/detail regions appear, populated with your selected data references. The datareferences are highlighted and enclosed in curly brackets ({}).Stacked Containers layoutSelect this option if you want to display your data using a repeating container structure on the page. For example, if you have four columns of datain the data set, each container can include all four columns, and the container structure will repeat itself for each row in the data set.Once you’ve selected this option, click the Set Up button to open the Insert Stacked Containers dialog box and follow these steps:In the Columns panel, adjust the content of your stacked containers by doing the following:
Select a column name and click the minus (-) sign to delete the column from the stacked containers. Click the plus (+)sign and select a column name to add new columns to the containers. By default Dreamweaver populates the stackedcontainers with data from every column in the data set.
Select a column name and click the up or down arrows to move the column. Moving a column up or down in the Columnspanel sets the order of the data’s appearance in the stacked containers on the page.(Optional) Set different container types for data in the stacked container. To do so, select the name of a data set column, andselect the container you want to use for it from the Container Type pop-up menu. You can choose from , or H1-Click OK to close the dialog box and then click Done in the Choose Insert Options screen.If you’re in Design view you’ll see the container, populated with your selected data references. The data references arehighlighted and enclosed in curly brackets ({}).Stacked Containers with Spotlight Area layoutSelect this option if you want to display your data using a repeating container structure on the page with a spotlight area in each container.Typically, the spotlight area contains a picture. The Spotlight Area layout is similar to the Stacked Containers layout, the difference being that inthe Spotlight Area layout, the data display is divided into two separate columns (within the same container).Once you’ve selected this option, click the Set Up button to open the Insert Spoltlight Area Layout dialog box and follow these steps:In the Spotlight Columns panel, adjust the content of your spotlight area by doing the following:
Select a column name and click the minus (-) sign to delete the column from the spotlight area. Click the plus (+) sign and
315
select a column name to add new columns to the spotlight area. By default Dreamweaver populates the spotlight area
with data from the first column in the data set.
Select a column name and click the up or down arrows to move the column. Moving a column up or down in the SpotlightColumns panel sets the order of the data’s appearance in the spotlight area on the page.(Optional) Set different container types for data in the spotlight area. To do so, select the name of a data set column, andselect the container you want to use for it from the Container Type pop-up menu. You can choose from , or H1-Repeat the above steps for the Stacked Columns panel. By default Dreamweaver populates the stacked columns with all ofthe data that is not in the spotlight area (that is, all columns except for the first column in the data set).Click OK to close the dialog box and then click Done in the Choose Insert Options screen.If you’re in Design view you’ll see the spotlight area with stacked containers alongside of it, populated with your selected datareferences. The data references are highlighted and enclosed in curly brackets ({}).Do Not Insert HTMLSelect this option if you want to create a data set, but do not want Dreamweaver to insert an HTML layout for the data set. The data set becomesavailable from the Bindings panel (Window� Bindings), and you can manually drag pieces of the data set to the page.Even if you create a data set without inserting a layout, you can still insert one of the available HTML layouts at any time. To do so, double-clickthe name of the data set in the Bindings panel, click through to the Choose Insert Options screen, select your layout, and click Done.Note: You can also drag the name of the data set from the Bindings panel to the insertion point on the page. When you do so, the Choose InsertOptions screen opens. Make your layout selection and click Done.Edit a data setAfter you create a Spry data set, you can edit it at any time.
In the Bindings panel (Window� Bindings), double-click the name of your data set, and make your edits.Note: When you edit a data set, and select a new layout in the Choose Insert Options screen, Dreamweaver does not replace whatever layout ison the page, but rather inserts a new one.Use a design-time feedIf you are working with data that is still being developed, you may find it useful to use a design-time feed. For example, if the server developer isstill finalizing the database behind your XML data file, you can use a test version of the file to design your page separately from the databaseWhen you use a design-time feed, Dreamweaver only populates your work environment with data from that feed. References to the data sourcethat exist in the page code remain references to the real data source you want to use.Begin creating a Spry Data Set (see previous procedures for instructions).In the Specify a Data Source screen, click the Design-time feed link.Click the Browse button to locate the design-time feed and click OK.About Spry data selectorsWhen you use Dreamweaver to create a Spry data set, Dreamweaver includes all of the data in a selected container by default. You can refine thisselection by using CSS data selectors. CSS data selectors let you include only a portion of the data from the data source by allowing you tospecify CSS rules that are attached to certain pieces of data. For example, if you specify in the Row Selectors text box of the SpecifyData Source screen, Dreamweaver creates a data set that only contains rows with the .product class assigned to them.You must select the Advance Data Selection option in the Specify Data Source screen for the data selectors boxes to become active. If you enterdata selectors and deselect the option, Dreamweaver retains what you typed in the boxes, but does not use them as filters for the data set.About dynamic Spry master tables and updating detail regionsOne of the most common uses of Spry data sets is to create one or more HTML tables that dynamically update other page data in response to auser action. For example, if a user selects a product from a list of products in a table, the data set can immediately update data elsewhere on thepage with detailed information about the selected product. With Spry, these updates do not require a page refresh.These separate page regions are referred to as and regions. Typically, one area on the page (the master region) displays a list ofcategorized items (for example, a list of products), and another area of the page (the detail region) displays more information about a selectedEach data set maintains the notion of a current row, and by default, the current row is set to the first row of data in the data set. When a usermakes different selections in a master region (again, taking the example of a list of different products), Spry actually changes the data set’s currentrow. Because the detail region is dependent on the master region, any changes that occur from user interaction with the master region (forexample, selecting different products), result in changes to the data displayed in the detail region.
Dreamweaver creates master/detail layouts for you automatically, so that all of the correct associations between master and detail regions are in
316
To the topplace. But if you want to create a dynamic master table on your own, you have the option of preparing it for association with a detail region later.When you select the Update Detail Regions When Row is Clicked Option (in the Insert Table dialog box), Dreamweaver inserts a inside the tag for the repeating row of your dynamic table. This attribute prepares the table as a master table that has the ability of resetting thecurrent row of the data set as the user interacts with the table.For more information on creating master/detail regions by hand, see the Spry Developer Guide atCreate a Spry regionThe Spry framework uses two types of regions: one is a Spry Region that wraps around data objects such as tables and repeat lists, and the otheris a Spry Detail Region that is used in conjunction with a master table object to allow dynamic updating of data on a Dreamweaver page.All Spry data objects must be enclosed in a Spry Region. (If you try to add a Spry data object before adding a Spry region to a page,Dreamweaver prompts you to add a Spry region.) By default, Spry regions are in HTML containers. You can add them before you add a table,add them automatically when you insert a table or repeat list, or you can wrap them around existing tables or repeat list objects.If you are adding a detail region, typically you add the master table object first and select the Update Detail Regions option (see Dynamic Tablelayout). The only value that is different and specific for a detail region is the Type option in the Insert Spry Region dialog box.Select Insert� Spry� Spry Region.You can also click the Spry Region button in the Spry category in the Insert panel.For the object container, select the iv0; or&#xspan; option. The default is to use a iv0; container.Choose one of the following options:
To create a Spry Region, select Region (the default) as the type of region to insert.
To create a Spry Detail Region, select the Detail Region option. You would only use a detail region if you want to binddynamic data that updates as data in another Spry region changes.Important: You need to insert a detail region in a different iv0; from the master table region. You might need to use Codeview to place the insertion point precisely.Choose your Spry data set from the menu.If you want to create or change the region defined for an object, select the object and choose one of the following:Puts a new region around an object.Replace SelectionReplaces an existing region for an object.When you click OK, Dreamweaver puts a region placeholder into your page with the text “Content for Spry Region GoesHere.” You can replace this placeholder text with a Spry data object such as a table or repeat list, or with dynamic data fromthe Bindings panel (Window iv0; Bindings).
The Bindings panel displays the available data from the data set.Note: In the Bindings panel, there are some built-in Spry elements, ds_RowID, ds_CurrentRowID, and ds_RowCount, alsolisted. Spry uses these to define the row a user clicked in when determining how to update dynamic detail regions.To replace the placeholder text with a Spry data object (for example, a Spry Table), click the appropriate Spry data objectbutton in the Spry category of the Insert panel.To replace the placeholder text with dynamic data, use one of the following methods:
Drag one or more elements from the Bindings panel on top of the selected text.
In Code view, type the code for one or more elements directly. Use this format: {dataset-name::element-name}, as in. or . If you are only using one data set in your file, or if you are using data elementsfrom the same data set that you defined for the region, you can omit the data set name and simply write {desc}.Regardless of which method you use to define the contents of your region, the following lines are added to your HTML code:
317
To the topTo the top iv-;⤀&#x/div; spry:region="ds1"{name}{category} iv-;⤀&#x/div; spry:region="ds2"{ds1::name}{ds1::descheader}Create a Spry repeat regionYou can add repeat regions to display your data. A repeat region is a simple data structure that you can format as needed to present your data.For example, you can use a repeat region to display a set of photograph thumbnails one after another within a page layout object such as an APSelect Insert&#x/div; Spry&#x/div; Spry Repeat.You can also click the Spry Repeat button in the Spry category in the Insert panel.For the object container, select the iv0; or&#xspan; option depending on the type of tag you want. The default is to use a iv0; container.Select the Repeat (default) or Repeat Children option.If you want more flexibility, you may want to use the Repeat Children option where data validation is done for each line in alist at the child level. For instance, if you have a&#xul00; list, the data is checked at the&#xli00; level. If you choose the Repeatoption, the data is checked at the&#xul00; level. The Repeat Children option may be especially useful if you use conditionalexpressions in your code.Choose your Spry data set from the menu.If you already have text or elements selected, you can wrap or replace them.Click OK to display a repeat region on your page.Note: All Spry data objects must be within regions, so make sure you’ve created a Spry region on your page before insertinga repeat region.When you click OK, Dreamweaver inserts a region placeholder into your page with the text “Content for Spry Region GoesHere.” You can replace this placeholder text with a Spry data object such as a table or repeat list or with dynamic data fromthe Bindings panel (Window&#xul00; Bindings).
The Bindings panel displays the available data from the data set.Note: In the Bindings panel, there are some built-in Spry elements, ds_RowID, ds_CurrentRowID, and ds_RowCount, alsolisted. Spry uses these to define the row a user clicked in when determining how to update dynamic detail regions.To replace the placeholder text with a Spry data object, click the appropriate Spry data object button in the Insert panel.To replace the placeholder text with one or more dynamic data, use one of the following methods:
Drag one or more elements from the Bindings panel on top of the selected text.
In Code view, type the code for one or more elements directly. Use this format: {dataset-name::element-name}, as in. or . If you are only using one data set in your file, or if you are using data elementsfrom the same data set that you defined for the region, you can omit the data set name and simply write {desc}.Regardless of which method you use to define the contents of your region, the following lines of code are added to your HTML iv-;⤀&#x/div; spry:region="ds1"{name}{category} iv-;⤀&#x/div; spry:region="ds2"{ds1::name}{ds1::descheader}Create a Spry repeat list regionYou can add repeat lists to display your data as an ordered list, an unordered (bulleted) list, a definition list, or a drop-down list.Select Insert&#x/div; Spry&#x/div; Spry Repeat List.
318

You can also click the Spry Repeat List button in the Spry category in the Insert panel.
Select the container tag you want to use: UL, OL, DL, or SELECT. The other options vary depending on which container youchoose. If you choose SELECT, you must define the following fields:
Display Column: This is what users see when they view the page in their browsers.
Value Column: This is the actual value sent to the background server.For example, you can create a list of states and show users Alabama and Alaska, but send AL or AK to the server. You canalso use the SELECT as a navigational tool and show product names such as “Adobe Dreamweaver” and “Adobe Acrobat” tousers, but send URLs such as “support/products/dreamweaver.html” and “support/products/acrobat.html” to the server.Choose your Spry data set from the menu.Choose the columns you want to display.Click OK to display a repeat list region on your page. In Code View, you can see that HTML&#xul00; &#xol00; l00; or FORM selecttags are inserted into your file.Note: If you try to insert a repeat list region but you haven’t created a region, Dreamweaver prompts you to add one before inserting the table. AllSpry data objects must be contained within regions.
Legal Notices | Online Privacy Policy
319
Editing content in a template-based document
To the topTo the topTo the topAbout editing content in template-based documentsModify template propertiesAdd, delete, and change the order of a repeating region entryAbout editing content in template-based documentsDreamweaver templates specify regions that are locked (uneditable) and others that are editable for template-based documents.In pages based on templates, template users can edit content in editable regions only. You can easily identify and select editable regions to editcontent. Template users cannot edit content in locked regions.Note: If you try to edit a locked region in a document based on a template when highlighting is turned off, the mouse pointer changes to indicatethat you can’t click in a locked region.Template users can also modify properties and edit entries for a repeating region in template-based documents.Modify template propertiesWhen template authors create parameters in a template, documents based on the template automatically inherit the parameters and their initialvalue settings. A template user can update editable tag attributes and other template parameters (such as optional region settings).Modify an editable tag attributeOpen the template-based document.Select Modify� Template Properties.The Template Properties dialog box opens, showing a list of available properties. The dialog box shows optional regions andeditable tag attributes.In the Name list, select the property.The bottom area of the dialog box updates to show the selected property’s label and its assigned value.In the field to the right of the property label, edit the value to modify the property in the document.Note: The field name and updateable values are defined in the template. Attributes that do not appear in the Name list arenot editable in the template-based document.Select Allow Nested Templates To Control This if you want to pass the editable property along to a documents based on thenested template.Modify optional region template parametersOpen the template-based document.Select Modify� Template Properties.The Template Properties dialog box opens, showing a list of available properties. The dialog box shows optional regions andeditable tag attributes.In the Name list, select a property.The dialog box updates to show the selected property’s label and its assigned value.Select Show to display the optional region in the document, or deselect Show to hide the optional region.Note: The field name and default setting are defined in the template,.Select Allow Nested Templates To Control This if you want to pass the editable property along to a documents based on thenested template.Add, delete, and change the order of a repeating region entryUse repeating region controls to add, delete, or change the order of entries in template-based documents. When you add a repeating region entry,a copy of the entire repeating region is added. To update the content in the repeating regions, the original template must include an editable regionin the repeating region.
320

Add, delete, or change the order of a repeating regionOpen the template-based document.Place the insertion point in the repeating region to select it.Do one of the following:
Click the Plus (+) button to add a repeating region entry below the currently selected entry.
Click the Minus (–) button to delete the selected repeating region entry.
Click the Down Arrow button to move the selected entry down one position.
Click the Up Arrow button to move the selected entry up one position.Note: Alternatively, you can select Modify� Template, then select one of the repeating entry options near the bottom ofthe context menu. You can use this menu to insert a new repeating entry or move the selected entry’s position.Cut, copy, and delete entriesOpen the template-based document.Place the insertion point in the repeating region to select it.Do one of the following:
To cut a repeating entry, select Edit� Repeating Entries� Cut Repeating Entries.
To copy a repeating entry, select Edit� Repeating Entries� Copy Repeating Entries.
To remove a repeating entry, select Edit� Repeating Entries� Delete Repeating Entries.
To paste a repeating entry, select Edit� Paste.Note: Pasting inserts a new entry; it does not replace an existing entry.More Help topicsCreate a page based on an existing template
Legal Notices | Online Privacy Policy
321
Import Microsoft Office documents (Windows only)

You can insert the full contents of a Microsoft Word or Excel document in a new or existing web page. When you import a Word or Exceldocument, Dreamweaver receives the converted HTML and inserts it into your web page. The file’s size, after Dreamweaver receives theconverted HTML, must be less than 300K.Instead of importing the entire contents of a file, you can also paste portions of a Word document and preserve the formatting.Note: If you use Microsoft Office 97, you cannot import the contents of a Word or Excel document; you must insert a link to the document.Open the web page into which you want to insert the Word or Excel document.In Design view, do one of the following to select the file:
Drag the file from its current location to the page where you want the content to appear.
Select File� Import� Word Document or File� Import� Excel Document.In the Insert Document dialog box, browse to the file you want to add, select any of the formatting options from the Formattingpop-up menu at the bottom of the dialog box, and then click Open.Text OnlyInserts unformatted text. If the original text is formatted, all formatting will be removed.Text With StructureInserts text that retains structure, but does not retain basic formatting. For example, you can paste textand retain the structure of paragraphs, lists, and tables, without retaining bold, italics, and other formatting.Text With Structure Plus Basic FormattingInserts both structured and simple HTML-formatted text (e.g., paragraphs andtables, as well as text formatted with the , or Text With Structure Plus Full FormattingInserts text that retains all structure, HTML formatting, and CSS styles.Clean Up Word Paragraph SpacingEliminates extra space between paragraphs when you paste your text if you selectedText With Structure or Basic Formatting.The contents of the Word or Excel document appear in your page.
Legal Notices | Online Privacy Policy
322
Import tabular data

You can import tabular data into your document by first saving the files (such as Microsoft Excel files or database files) as delimited text files.You can import and format tabular data and import text from Microsoft Word HTML documents.You can also add text from Microsoft Excel documents to a Dreamweaver document by importing the contents of the Excel file into a web page.Select File� Import� Import Tabular Data, or Insert� Table Objects� Import Tabular Data.Browse for the file you want or enter its name in the text box.Select the delimiter used when the file was saved as delimited text. Your options are Tab, Comma, Semicolon, Colon, andIf you select Other, a blank field appears next to the option. Enter the character that was used as a delimiter.Use the remaining options to format or define the table into which the data will be imported and click OK.More Help topicsOpen and edit existing documents
Legal Notices | Online Privacy Policy
323
Importing custom tags into Dreamweaver
To the topTo the topTo the topTo the topAbout importing custom tags into DreamweaverImport tags from XML filesImport custom ASP.NET tagsImport JSP tags from a file or server (web.xml)Import JRun tagsAbout importing custom tags into DreamweaverYou can import custom tags into Dreamweaver so that they become an integral part of the authoring environment. For example, when you starttyping an imported custom tag in Code view, a code hints menu appears, listing the tag’s attributes and letting you select one.Import tags from XML filesYou can import tags from an XML Document Type Definition (DTD) file or a schema.Open the Tag Library editor (Edit� Tag Libraries).Click the Plus (+) button and select DTD Schema� Import XML DTD or Schema File.Enter the filename or URL of the DTD or schema file.Enter the prefix to be used with the tags.Note: A prefix is used to identify a tag in the code as part of a particular tag library. Some tag libraries don’t use prefixes.Click OK.Import custom ASP.NET tagsYou can import custom ASP.NET tags into Dreamweaver.Before you begin, make sure that the custom tag is installed on the testing server defined in the Site Definition dialog box (see Set up a testing). Compiled tags (DLL files) must be placed in the site root’s /bin folder. Noncompiled tags (ASCX files) can reside in any virtual directory orsubdirectory on the server. For more information, see the Microsoft ASP.NET documentation.Open an ASP.NET page in Dreamweaver.Open the Tag Library editor (Edit� Tag Libraries).Click the Plus (+) button, select one of the following options, and click OK:
To import all the ASP.NET custom tags from the application server, select ASP.NET� Import All ASP.NET Custom Tags.
To import only certain custom tags from the application server, select ASP.NET� Import Selected ASP.NET Custom Tags.Control-click (Windows) or Command-click (Macintosh) tags from the list.Import JSP tags from a file or server (web.xml)Import a JSP tag library into Dreamweaver from a variety of file types or a JSP server.Open a JSP page in Dreamweaver.Open the Tag Library editor (Edit� Tag Libraries).Click the Plus (+) button, and select JSP� Import From File (*.tld, *.jar, *.zip), or JSP� Import from Server (web.xml.)Click the Browse button or enter a filename for the file that contains the tag library.Enter a URI to identify the tag library.The URI (Uniform Resource Identifier) often consists of the URL of the organization maintaining the tag library. The URL isnot used to view the organization’s website; it is used to uniquely identify the tag library.(Optional) Enter the prefix to be used with the tags. Some tag libraries use a prefix to identify a tag in the code as part of aparticular tag library.Click OK.
324

To the topIf you use Adobe® JRun™, you can import your JRun tags into Dreamweaver.Open a JSP page in Dreamweaver.Open the Tag Library editor (Edit� Tag Libraries).Click the Plus (+) button and select JSP� Import JRun Server Tags From Folder.Enter a folder name for the folder that contains the JRun tags.Enter a URI to identify the tag library.The URI (Uniform Resource Identifier) often consists of the URL of the organization maintaining the tag library. The URL isnot used to view the organization’s website; it is used to uniquely identify the tag library.(Optional) Enter the prefix to be used with the tags. Some tag libraries use a prefix to identify a tag in the code as part of aparticular tag library.Click OK.
Legal Notices | Online Privacy Policy
325
Insert dates

Dreamweaver provides a convenient Date object, which inserts the current date in whatever format you prefer (with or without the time) andprovides the option of updating that date whenever you save the file.Note: The dates and times shown in the Insert Date dialog box are not the current date, nor do they reflect the dates/times that a visitor seeswhen they display your site. They are examples only of the way you want to display this information.In the Document window, place the insertion point where you want the date to be inserted.Do one of the following:
Select Insert� Date.
In the Common category of the Insert panel, click the Date button.In the resulting dialog box, select a format for the name of the day of the week, a format for the date, and a format for theIf you want the inserted date to be updated every time you save the document, select Update Automatically On Save. If youwant the date to become plain text when it’s inserted, and never update automatically, deselect that option.Click OK to insert the date.If you have selected Update Automatically On Save, you can edit the date format after it has been inserted into thedocument by clicking on the formatted text and selecting Edit Date Format in the Property inspector.
Legal Notices | Online Privacy Policy
326
Inserting SWF files
To the topTo the topAbout FLA, SWF, and FLV file typesInsert and preview SWF filesInsert FlashPaper documentsAbout FLA, SWF, and FLV file typesBefore you use Dreamweaver to insert content created with Adobe Flash, you should be familiar with the following different file types:FLA file (.fla)The source file for any project and created in the Flash authoring tool. This type of file can only be opened in Flash (not inDreamweaver or in browsers). You can open the FLA file in Flash, then publish it as a SWF or SWT file to use in browsers.SWF file (.swf)A compiled version of the FLA (.fla) file, optimized for viewing on the web. This file can be played back in browsers and previewedin Dreamweaver, but cannot be edited in Flash.FLV file (.flv)A video file that contains encoded audio and video data for delivery through Flash® Player. For example, if you had a QuickTime orWindows Media video file, you would use an encoder (such as Flash® Video Encoder, or Sorensen Squeeze) to convert the video file to an FLVfile. For more information, visit the Video Technology Center at Insert and preview SWF filesUse Dreamweaver to add SWF files to your pages, and then preview them in a document or a browser. You can also set properties for SWF filesin the Property inspector.For a tutorial on adding SWF files to web pages, see Insert a SWF fileIn the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the
In the Common category of the Insert panel, select Media and click the SWF icon
.
Select Insert� Media� SWF.In the dialog box that appears, select a SWF file (.swf).A SWF file placeholder appears in the Document window.
The placeholder has a tabbed blue outline. The tab indicates the type of asset (SWF file) and the ID of the SWF file. The tabalso displays an eye icon. It acts as toggle between the SWF file and the download information users see when they don’thave the correct version of Flash Player.Save the file.Dreamweaver informs you that two dependent files, expressInstall.swf and swfobject_modified.js, are being saved to a Scriptsfolder in your site. Don’t forget to upload these files when you upload the SWF file to your web server. Browsers can’t displaythe SWF file properly unless you have also uploaded these dependent files.Note: Microsoft Internet Information Server (IIS) does not process nested object tags. For ASP pages, Dreamweaver usesnested object/embed code instead of nested object code when inserting SWF or FLV files.Edit Flash Player download informationWhen you insert a SWF file in a page, Dreamweaver inserts code that detects whether the user has the correct version of Flash Player. If not, thepage displays default alternative content that prompts the user to download the latest version. You can change this alternative content at any time.
This procedure also applies to FLV files.
327
To the topNote: If a user does not have the required version but does have Flash Player 6.0 r65 or later, the browser displays a Flash Player expressinstaller. If the user declines the express install, the page then displays the alternative content.In the Design view of the Document window, select the SWF file or FLV file.Click the eye icon in the tab of the SWF file or FLV file.You can also press Control + ] to switch to alternative content view. To return to SWF/FLV view, press Control + [ until allof the alternative content is selected. Then press Control + [ again.Edit the content just as you would edit any other content in Dreamweaver.Note: You cannot add SWF files or FLV files as alternative content.Click the eye icon again to return to the SWF (or FLV) file view.Preview SWF files in the Document windowIn the Document window, click the SWF file placeholder to select the content.In the Property inspector (Window� Properties), click the Play button. Click Stop to end the preview. You can also preview theSWF file in a browser by pressing F12.To preview all SWF files in a page, press Control+Alt+Shift+P (Windows) or Command+Option+Shift+P (Macintosh). AllSWF files are set to Play.Set SWF file propertiesYou can set properties for SWF files using the Property inspector. The properties are also applicable to Shockwave movies.
Select a SWF file or a Shockwave movie and set the options in the Property inspector (Window� Properties). To see all properties, click theexpander arrow in the lower-right corner of the Property inspector.Specifies a unique ID for the SWF file. Enter an ID in the unlabeled text box on the far left side of the Property inspector. As of DreamweaverCS4, a unique ID is required.W and HSpecify the width and height of the movie, in pixels.Specifies the path to the SWF file or Shockwave file. Click the folder icon to browse to a file, or type a path.Specifies the path to the source document (the FLA file), when Dreamweaver and Flash are both installed on your computer. To edit a SWFfile, update the movie’s source document.Specifies a background color for the movie area. This color also appears while the movie is not playing (while loading and after playing).Starts Flash to update a FLA file (a file created in the Flash authoring tool). This option is disabled if you do not have Flash installed on yourLets you apply a CSS class to the movie.Makes the movie play continuously. When Loop is not selected, the movie plays once and stops.Automatically plays the movie when the page loads.V Space and H SpaceSpecifies the number of pixels of white space above, below, and on both sides of the movie.Controls anti-aliasing during playback of the movie. High settings improve the appearance of movies. However, at high settings moviesrequire a faster processor to render correctly on the screen. Low favors speed over appearance, whereas High favors appearance over speed.Auto Low favors speed at first but improves appearance when possible. Auto High favors both qualities equally at first but later sacrificesappearance for speed if necessary.Determines how the movie fits into the dimensions set in the width and height text boxes. The Default setting displays the entire movie.Determines how the movie is aligned on the page.Sets the Wmode parameter for the SWF file to avoid conflicts with DHTML elements, such as Spry widgets. The default value is Opaque,which allows DHTML elements to appear on top of SWF files in a browser. If the SWF file includes transparencies and you want DHTML elementsto appear behind them, select the Transparent option. Select the Window option to remove the Wmode parameter from the code and allow theSWF file to appear on top of other DHTML elements.Plays the movie in the Document window.Opens a dialog box for entering additional parameters to pass to the movie. The movie must be designed to receive these additionalInsert FlashPaper documentsThe Insert FlashPaper feature has been deprecated as of Dreamweaver CS5.More Help topicsSWF files and DHTML layersWorking with Flash tutorial
Legal Notices | Online Privacy Policy
328
Managing tag libraries
To the topTo the topTo the topTo the topAbout Dreamweaver tag librariesOpen and close the Tag Library editorAdd libraries, tags, and attributesEdit libraries, tags, and attributesDelete libraries, tags, and attributesAbout Dreamweaver tag librariestag library, in Dreamweaver, is a collection of tags of a particular type, along with information about how Dreamweaver should format the tags.Tag libraries provide the information about tags that Dreamweaver uses for code hints, target browser checks, the Tag Chooser, and other codingcapabilities. Using the Tag Library editor, you can add and delete tag libraries, tags, attributes, and attribute values; set properties for a tag library,including format (for easy identification in the code); and edit tags and attributes.Open and close the Tag Library editorSelect Edit� Tag Libraries to open the Tag library editor.The Tag Library Editor dialog box appears. (The options of this dialog box change depending on the selected tag.)Close the Tag Library editor in one of the following ways:
To save changes, click OK.
To close the editor without saving changes, click Cancel.Note: When you click Cancel, all changes you’ve made in the Tag Library editor are discarded. If you deleted a tag or taglibrary, it’s restored.Add libraries, tags, and attributesYou can use the Tag Library editor to add tag libraries, tags, and attributes to the tag libraries in Dreamweaver.Add a tag libraryIn the Tag Library editor (Edit� Tag Libraries), click the Plus (+) button, and select New Tag Library.In the Library Name box, type a name (for example, Miscellaneous Tags), and click OK.Add tags to a tag libraryIn the Tag Library editor (Edit� Tag Libraries), click the Plus (+) button and select New Tags.Select Tag Library popup menu, and select a tag library.Type the name of the new tag. To add more than one tag, separate the tags’ names with a comma and a space (for example:cfgraph, cfgraphdataIf the new tags have corresponding end tags (), select Have Matching End Tags.Click OK.Add attributes to a tagIn the Tag Library editor (Edit� Tag Libraries), click the Plus (+) button and select New Attributes.In the Tag Library popup menu, select a tag library.In the Tag popup menu, select a tag.Type the name of the new attribute. To add more than one attribute, separate attributes’ names with a comma and a space(for example: width, heightClick OK.Edit libraries, tags, and attributes
329

To the top
Use the Tag Library editor to set properties for a tag library and edit tags and attributes in a library.
Set properties for a tag libraryIn the Tag Library editor (Edit� Tag Libraries), select a tag library (not a tag) in the Tags list.Note: The properties for tag libraries appear only when a tag library is selected. Tag libraries are represented by the top-level folders in the Tags list; for example, the HTML Tags folder represents a tag library, while the abbr folder within theHTML Tags folder represents a tag.In the Used In list, select every document type that should use the tag library.The document types you select here determine which document types provide code hints for the given tag library. Forexample, if the HTML option is not selected for a given tag library, code hints for that tag library don’t appear in HTML files.(Optional) Enter the prefix for the tags in the Tag Prefix box.Note: A prefix is used to identify a tag in the code as part of a particular tag library. Some tag libraries don’t use prefixes.Click OK.Edit a tag in a tag libraryIn the Tag Library editor (Edit� Tag Libraries), expand a tag library in the Tags list and select a tag.Set any of the following Tag Format options:Line BreaksSpecifies where Dreamweaver inserts line breaks for a tag.Specifies how Dreamweaver inserts the contents of a tag; that is, if it applies line break, formatting, and indentationrules to the content.Specifies the case for a specific tag. Select from Default, Lowercase, Uppercase, or Mixed Case. If you select MixedCase, the Tag Name Mixed Case dialog box appears. Type the tag with the case Dreamweaver should use when inserting it(for example, and click OK.Set DefaultSets the default case for all tags. In the Default Tag Case dialog box that appears, select&#xUPPE;&#xRCAS; or&#xlowe;&#xrcas; and click OK.You might want to set your default case to be lowercase to comply with XML and XHTML standards.Edit an attribute for a tagIn the Tag Library editor (Edit&#xlowe;&#xrcas; Tag Libraries), expand a tag library in the Tags box, expand a tag, and select a tag attribute.In the Attribute Case popup menu, select the Default, Lowercase, Uppercase, or Mixed Case option.If you select Mixed Case, the Attribute Name Mixed Case dialog box appears. Type the attribute with the case Dreamweavershould use when inserting it (for example, ), and click OK.Click the Set Default link to set the default case for all attribute names.In the Attribute Type popup menu, select the type of the attribute.If you select Enumerated, type every allowed value for the attribute in the Values box. Separate the values with commas, butno spaces. For example, the enumerated values of the attribute of the tag are listed as yes,no.Delete libraries, tags, and attributesIn the Tag Library editor (Edit&#xlowe;&#xrcas; Tag Libraries), select a tag library, tag, or attribute in the Tags box.Click the Minus (–) button.Click OK to permanently delete the item.The item is removed from the Tags box.Click OK to close the Tag Library editor and complete the deletion.More Help topics
Legal Notices | Online Privacy Policy
330
Modify font combinations

To the topTo the topModify font combinationsAdd a new combination to the font listUse the Edit Font List command to set the font combinations that appear in the Property inspector and the Format� Font submenu.Font combinations determine how a browser displays text in your web page. A browser uses the first font in the combination that is installed on theuser’s system; if none of the fonts in the combination is installed, the browser displays the text as specified by the user’s browser preferences.Modify font combinationsSelect Format� Font� Edit Font List.Select the font combination from the list at the top of the dialog box.The fonts in the selected combination are listed in the Chosen Fonts list in the lower-left corner of the dialog box. To the rightis a list of all available fonts installed on your system.Do one of the following:
To add or remove fonts from a font combination, click the arrows button ( or&#x-700;&#x-700; ) between the Chosen Fonts list and theAvailable Fonts list.
To add or remove a font combination, click the Plus (+) and Minus (–) buttons at the top of the dialog box.
To add a font that is not installed on your system, type the font name in the text field below the Available Fonts list andclick the button to add it to the combination. Adding a font not installed on your system is useful, for example, forspecifying a Windows-only font when you are developing pages on a Macintosh.
To move the font combination up or down in the list, click the arrow buttons at the top of the dialog box.Add a new combination to the font listSelect Format� Font� Edit Font List.Select a font from the Available Fonts list and click the button to move the font to the Chosen Fonts list.Repeat step 2 for each subsequent font in the combination.To add a font that is not installed on your system, type the font name in the text field below the Available Fonts list and clickthe button to add the font to the combination. Adding a font not installed on your system is useful, for example, forspecifying a Windows-only font when you are developing pages on a Macintosh.When you have finished selecting specific fonts, select a generic font family from the Available Fonts menu and click the button to move the generic font family to the Chosen Fonts list.Generic font families include cursive, fantasy, monospace, sans-serif, and serif. If none of the fonts in the Chosen Fonts listare available on the user’s system, the text appears in the default font associated with the generic font family. For example,the default monospace font on most systems is Courier.
Legal Notices | Online Privacy Policy
331
Set title and encoding properties for a page

The Title/Encoding Page Properties options let you specify the document encoding type that is specific to the language used to author your webpages as well as specify which Unicode Normalization Form to use with that encoding type.Select Modify� Page Properties, or click the Page Properties button in the text Property inspector.Choose the Title/Encoding category and set the options.Specifies the page title that appears in the title bar of the Document window and most browser windows.Document Type (DTD)Specifies a document type definition. For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strict from the popup menu.Specifies the encoding used for characters in the document.If you select Unicode (UTF8) as the document encoding, entity encoding is not necessary because UTF8 can safelyrepresent all characters. If you select another document encoding, entity encoding may be necessary to represent certaincharacters. For more information on character entities, see www.w3.org/TR/REC-html40/sgml/entities.html Converts the existing document, or reopens it using the new encoding.Unicode Normalization FormEnabled only if you select UTF8 as a document encoding. There are four UnicodeNormalization Forms. The most important is Normalization Form C because it’s the most common form used in the CharacterModel for the World Wide Web. Adobe provides the other three Unicode Normalization Forms for completeness.In Unicode, some characters are visually similar but can be stored within the document in different ways. For example, “ë”umlaut) can be represented as a single character, “eumlaut,” or as two characters, “regular Latin e” + “combining umlaut.”A Unicode combining character is one that gets used with the previous character, so the umlaut would appear above the“Latin e.” Both forms result in the same visual typography, but what is saved in the file is different for each form.Normalization is the process of making sure all characters that can be saved in different forms are all saved using the samefrom. That is, all “ë” characters in a document are saved as single “eumlaut” or as “e” + “combining umlaut,” and not as bothforms in one document.For more information on Unicode Normalization and the specific forms that can be used, see the Unicode website atInclude Unicode Signature (BOM)Includes a Byte Order Mark (BOM) in the document. A BOM is 2 to 4 bytes at thebeginning of a text file that identifies a file as Unicode, and if so, the byte order of the following bytes. Because UTF8 has nobyte order, adding a UTF8 BOM is optional. For UTF16 and UTF32, it is required.
Legal Notices | Online Privacy Policy
332
Spell check a web page

Use the Check Spelling command to check the spelling in the current document. The document must be a web page (for example, an HTML,ColdFusion, or PHP page). The Check Spelling command does not work on text files or XML files.Additionally, the Check Spelling command ignores HTML tags and attribute values.Note: Dreamweaver can only spell check the file that is currently open in the Document window. It cannot spell check all of the files in a siteBy default, the spelling checker uses the U.S. English spelling dictionary. To change the dictionary, select Edit� Preferences� General (Windows)or Dreamweaver� Preferences� General (Macintosh), then in the Spelling Dictionary popup menu select the dictionary you want to use.Select Commands� Check Spelling or press Shift+F7.When Dreamweaver encounters an unrecognized word, the Check Spelling dialog box appears.Select the appropriate option based on how you want the discrepancy handled.Add To PersonalAdds the unrecognized word to your personal dictionary.Ignores this instance of the unrecognized word.Replaces this instance of the unrecognized word with text that you type in the Change To text box or with theselection in the Suggestions list.Ignore AllIgnores all instances of the unrecognized word.Change AllReplaces all instances of the unrecognized word in the same manner.Note: Dreamweaver does not provide a way of deleting entries that have been added to personal dictionaries.
Legal Notices | Online Privacy Policy
333
Use HTML Formatting
To the topTo the topTo the topTo the topFormat paragraphsChange the color of textApply font stylesWhile CSS is the preferred method for formatting text, Dreamweaver still lets you format text with HTML.Format paragraphsUse the Format popup menu in the HTML Property inspector or the Format� Paragraph Format submenu to apply the standard paragraph andheading tags.Place the insertion point in the paragraph, or select some of the text in the paragraph.Using the Format� Paragraph Format submenu or the Format popup menu in the Property inspector, select an option:
Select a paragraph format (for example, Heading 1, Heading 2, Preformatted Text, and so on). The HTML tag associatedwith the selected style (for example, for Heading 1, for Heading 2, for Preformatted text, and so on) is applied tothe entire paragraph.
Select None to remove a paragraph format.When you apply a heading tag to a paragraph, Dreamweaver automatically adds the next line of text as a standardparagraph. To change this setting, select Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh); thenin the General category, under Editing Options, make sure Switch To Plain Paragraph After Heading is not selected.Change the color of textYou can change the default color of all the text in a page, or you can change the color of selected text in the page.Define default text colors for a page
Select Modify� Page Properties� Appearance (HTML) or Links (HTML), and then select colors for the Text Color, Link Color, Visited Links,and Active Links options.Note: The active link color is the color that a link changes to while it’s being clicked. Some web browsers may not use the color you specify.Change the color of selected text
Select Format� Color, select a color from the system color picker, and then click OK.You align text with HTML using the Format� Align submenu. You can center any element on a page using the Format� Align� Center command.Align text on a pageSelect the text you want to align or simply insert the pointer at the beginning of the text.Select Format� Align and select an alignment command.Center page elementsSelect the element (image, plugin, table, or other page element) you want to center.Select Format� Align� Center.Note: You can align and center complete blocks of text; you cannot align or center part of a heading or part of a paragraph.Using the Indent command applies the HTML tag to a paragraph of text, indenting text on both sides of the page.Place the insertion point in the paragraph you want to indent.
334

To the top
Select Format� Indent or Outdent, or select List� Indent or Outdent from the context menu.
Note: You can apply multiple indents to a paragraph. Each time you select this command, the text indents further from bothsides of the document.Apply font stylesYou can use HTML to apply text formatting to one letter, or to entire paragraphs and blocks of text in a site. Use the Format menu to set or changefont characteristics for selected text. You can set the font type, style (such as bold or italic), and size.Select the text. If no text is selected, the option applies to subsequent text you type.Select from the following options:
To change the font, select a font combination from the Format� Font submenu. Select Default to remove previouslyapplied fonts. Default applies the default font for the selected text (either the browser default font or the font assigned tothat tag in the CSS style sheet).
To change the font style, select a font style (Bold, Italic, Underline, and so on) from the Format� Style submenu.More Help topicsSet text properties in the Property inspectorSet CSS propertiesCreate a new CSS rule
Legal Notices | Online Privacy Policy
335
Use horizontal rules

To the topTo the topCreate a horizontal ruleModify a horizontal ruleHorizontal rules (lines) are useful for organizing information. On a page, you can visually separate text and objects with one or more rules.Create a horizontal ruleIn the Document window, place the insertion point where you want to insert a horizontal rule.Select Insert� HTML� Horizontal Rule.Modify a horizontal ruleIn the Document window, select the horizontal rule.Select Window� Properties to open the Property inspector, and modify the properties as desired:The ID text box Lets you specify an ID for the horizontal rule.W and HSpecify the width and height of the rule in pixels or as a percentage of the page size.Specifies the alignment of the rule (Default, Left, Center, or Right). This setting applies only if the width of the rule isless than the width of the browser window.Specifies whether the rule is drawn with shading. Deselect this option to draw the rule in a solid color.Lets you attach a style sheet, or apply a class from an already attached style sheet.
Legal Notices | Online Privacy Policy
336
Use the Insert panel
To the topTo the topTo the topTo the topHide or show the Insert panelShow the buttons in a particular categoryDisplay the pop-up menu for a buttonInsert an objectBypass the object-insertion dialog box and insert an empty placeholder objectModify preferences for the Insert panelAdd, delete, or manage items in the Favorites category of the Insert panelInsert objects using buttons in the Favorites categoryDisplay the Insert panel as a horizontal Insert barReturn the horizontal Insert bar to a panel groupShow horizontal Insert bar categories as tabsShow horizontal Insert bar categories as a menuThe Insert panel contains buttons for creating and inserting objects such as tables and images. The buttons are organized into categories.Hide or show the Insert panel
Select Window� Insert.Note: If you are working with certain types of files, such as XML, JavaScript, Java, and CSS, the Insert panel and the Design view option aredimmed because you cannot insert items into these code files.Show the buttons in a particular category
Select the category name from the Category pop-up menu. For example, to show buttons for the Layout category, select Layout.Display the pop-up menu for a button
Click the down arrow beside the button’s icon.
Insert an objectSelect the appropriate category from the Category pop-up menu of the Insert panel.
337
To the topTo the topTo the topTo the topTo the topDo one of the following:
Click an object button or drag the button’s icon into the Document window.
Click the arrow on a button, then select an option from the menu.Depending on the object, a corresponding object-insertion dialog box may appear, prompting you to browse to a file orspecify parameters for an object. Or, Dreamweaver may insert code into the document, or open a tag editor or a panel foryou to specify information before the code is inserted.For some objects, no dialog box appears if you insert the object in Design view, but a tag editor appears if you insert theobject in Code view. For a few objects, inserting the object in Design view causes Dreamweaver to switch to Code viewbefore inserting the object.Note: Some objects, such as named anchors, are not visible when the page is viewed in a browser window. You candisplay icons in Design view that mark the locations of such invisible objects.Bypass the object-insertion dialog box and insert an empty placeholder object
Control-click (Windows) or Option-click (Macintosh) the button for the object.For example, to insert a placeholder for an image without specifying an image file, Control-click or Option-click the Image button.Note: This procedure does not bypass all object-insertion dialog boxes. Many objects, including AP elements and framesets, do not insertplaceholders or defaultvalued objects.Modify preferences for the Insert panelSelect Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh).In the General category of the Preferences dialog box, deselect Show Dialog When Inserting Objects to suppress dialog boxeswhen you insert objects such as images, tables, scripts, and head elements or by holding down the Control key (Windows) orthe Option key (Macintosh) while creating the object.When you insert an object with this option off, the object is given default attribute values. Use the Property inspector tochange object properties after inserting the object.Add, delete, or manage items in the Favorites category of the Insert panelSelect any category in the Insert panel.Right-click (Windows) or Control-click (Macintosh) in the area where the buttons appear, and then select Customize Favorites.In the Cutomize Favorite Objects dialog box, make changes as necessary, and click OK.
To add an object, select an object in the Available Objects pane on the left, and then click the arrow between the twopanes or double-click the object in the Available Objects pane.Note: You can add one object at a time. You cannot select a category name, such as Common, to add an entire categoryto your favorites list.
To delete an object or separator, select an object in the Favorite Objects pane on the right, and then click the RemoveSelected Object in Favorite Objects List button above the pane.
To move an object, select an object in the Favorite Objects pane on the right, and then click the Up or Down arrow buttonabove the pane.
To add a separator below an object, select an object in the Favorite Objects pane on the right, and then click the AddSeparator button below the pane.If you’re not in the Favorites category of the Insert panel, select that category to see your changes.Insert objects using buttons in the Favorites category
Select the Favorites category from the Category pop-up menu of the Insert panel, and then click the button for any Favorites object that youDisplay the Insert panel as a horizontal Insert barUnlike other panels in Dreamweaver, you can drag the Insert panel out of its default dock position and drop it into a horizontal position at the topof the Document window. When you do so, it changes from a panel to a toolbar (though you cannot hide and display it in the same way as otherClick the Insert panel’s tab and drag it to the top of the Document window.
338

To the topTo the topTo the top
When you see a horizontal blue line across the top of the Document window, drop the Insert panel into position.Note: The horizontal Insert bar is also a default part of the Classic workspace. To switch to the Classic workspace, select Classic from theworkspace switcher in the Application bar.Return the horizontal Insert bar to a panel groupClick the horizontal Insert bar’s gripper (on the left side of the Insert bar) and drag the bar to the place where your panels arePosition the Insert panel and drop it. A blue line indicates where you can drop the panel.Show horizontal Insert bar categories as tabs
Click the arrow beside the category name on the left end of the horizontal Insert bar, and then select Show as Tabs.Show horizontal Insert bar categories as a menu
Right-click (Windows) or Control-click (Macintosh) a category tab in the horizontal Insert bar, and then select Show as Menus.More Help topicsInsert panel overview
Legal Notices | Online Privacy Policy
339
File management
340
Checking in and checking out files
To the topTo the topTo the topAbout the Check In/Check Out systemSet up the Check In/Check Out systemCheck files into and out of a remote folderUse WebDAV to check in and check out filesUse Subversion (SVN) to get and check in filesAbout the Check In/Check Out systemIf you’re working in a collaborative environment, you can check files in and out from local and remote servers. If you’re the only person working onthe remote server, you can use the Put and Get commands without checking files in or out.Note: You can use Get and Put functionality with a testing server, but you cannot use the Check In/ Check Out system with a testing server.Checking out a file is the equivalent of declaring “I’m working on this file now—don’t touch it!” When a file is checked out, the name of the personwho checked out the file is displayed in the Files panel, along with a red check mark (if a team member checked out the file) or green check mark(if you checked out the file) next to the file’s icon.Checking in a file makes the file available for other team members to check out and edit. When you check in a file after editing it, your localversion becomes read-only and a lock symbol appears beside the file in the Files panel to prevent you from making changes to the file.Dreamweaver does not make checked-out files read-only on the remote server. If you transfer files with an application other than Dreamweaver,you can overwrite checked-out files. However, in applications other than Dreamweaver, the LCK file is visible next to the checked-out file in the filehierarchy to help prevent such accidents.Set up the Check In/Check Out systemBefore you can use the Check In/Check Out system, you must associate your local site with a remote server.Select Site� Manage Sites.Select a site and click Edit.In the Site Setup dialog box, select the Servers category and do one of the following:
Click the Add New Server button to add a new server
Select an existing server and click the Edit Existing Server buttonSpecify Basic options as necessary, and then click the Advanced button.Select Enable File Check Out if you are working in a team environment (or working alone but from several different machines).Deselect this option if you want to disable file check in and check out for your website.This option is useful to let others know that you checked out a file for editing, or to alert yourself that you may have left a morerecent version of a file on another machine.If you do not see Check In/Out options, it means that you have not set up a remote server.Select the Check Out Files when Opening option if you want to automatically check out files when you double-click to openthem from the Files panel.Using File� Open to open a file doesn’t check the file out even when this option is selected.Set the remaining options:Check Out NameThe check-out name appears in the Files panel alongside any files that are checked out; this enables teammembers to communicate with the right person if a file they need is checked out.Note: If you work alone from several different machines, use a different check-out name on each machine (for example,AmyR-HomeMac and AmyR-OfficePC) so you’ll know where the latest version of the file is if you forget to check it in.Email AddressIf you enter an e-mail address, when you check out a file, your name appears in the Files panel as a link(blue and underlined) next to that file. If a team member clicks on the link, their default email program opens a new messagewith the user’s email address and a subject that corresponds to the file and site name.Check files into and out of a remote folderAfter you set up the Check In/Check Out system, you can check in and check out files on a remote server using the Files panel or from the
341
Document window.
Check out files using the Files panelIn the Files panel (Window� Files), select files to check out from the remote server.Note: You can select files in the Local or Remote view, not the Testing Server view.A red check mark indicates that another team member has the file checked out and a lock symbol indicates that the file isread-only (Windows) or locked (Macintosh).Do one of the following to check out the file(s):
Click the Check Out button in the Files panel toolbar.
Right-click (Windows) or Controlclick (Macintosh), then select Check Out from the context menu.In the Dependent Files dialog box, click Yes to download dependent files along with the selected files, or click No to refrainfrom downloading dependent files. The default is to not download dependent files. You can set this option at Edit� Preferences� Site.Note: It’s usually a good idea to download dependent files when checking out a new file, but if the latest versions of thedependent files are already on the local disk, there’s no need to download them again.A green check mark appears beside the local file’s icon indicating that you have checked it out.Important: If you check out the currently active file, the currently open version of the file is overwritten by the new checked-out version.Check in files using the Files panelIn the Files panel (Window� Files), select checkedout or new file(s).Note: You can select files in the Local or Remote view, but not the Testing Server view.Do one of the following to check in the file(s):
Click the Check In button in the Files panel toolbar.
Right-click (Windows) or Controlclick (Macintosh), then select Check In from the context menu.Click Yes to upload dependent files along with the selected files, or click No to refrain from uploading dependent files. Thedefault is to not upload dependent files. You can set this option at Edit� Preferences� Site.Note: It’s usually a good idea to upload dependent files when checking in a new file, but if the latest versions of thedependent files are already on the remote server, there’s no need to upload them again.A lock symbol appears beside the local file’s icon indicating that the file is now read-only.Important: If you check in the currently active file, the file may be automatically saved before it’s checked in, depending onthe preference options you’ve set.Check in an open file from the Document windowMake sure the file you want to check in is open in the Document window.Note: You can check in only one open file at a time.Do one of the following:
Select Site� Check In.
Click the File Management icon in the Document window toolbar, then select Check In from the menu.If the current file is not part of the active site in the Files panel, Dreamweaver attempts to determine which locally definedsite the current file belongs to. If the current file belongs to a site other than the one that’s active in the Files panel,Dreamweaver opens that site, then performs the check in operation.Important: If you check in the currently active file, the file may be automatically saved before it’s checked in, dependingon the preference options you’ve set.Undo a file check-outIf you check out a file, then decide not to edit it (or decide to discard the changes you made), you can undo the check-out operation and the filereturns to its original state.To undo a file check-out, do one of the following:
Open the file in the Document window, then select Site� Undo Check Out.
In the Files panel (Window� Files), right-click (Windows) or Controlclick (Macintosh), then select Undo Check Out.The local copy of the file becomes read-only, and any changes you’ve made to it are lost.
342
To the topTo the topUse WebDAV to check in and check out filesDreamweaver can connect to a server that uses WebDAV (Web-based Distributed Authoring and Versioning), which is a set of extensions to theHTTP protocol that allow users to collaboratively edit and manage files on remote web servers. For more information, see If you have not already done so, define a Dreamweaver site that specifies the local folder you use to store your project files.Select Site� Manage Sites, and then double-click your site in the list.In the Site Setup dialog box, select the Servers category and do one of the following:
Click the Add New Server button to add a new server
Select an existing server and click the Edit Existing Server buttonIn the Basic screen, select WebDAV from the Connect Using pop-up menu, and complete the rest of the Basic screen options,as necessary.Click the Advanced button.Select the Enable File Check Out option and enter the following information:
In the Check Out Name box, enter a name identifying you to other team members.
In the Email Address box, enter your email address.The name and email addresses are used to identify ownership on the WebDAV server and appear in the Files panel forcontact purposes.Click Save.Dreamweaver configures the site for WebDAV access. When you use the Check In or Check Out command on any site file,the file is transferred using WebDAV.Note: WebDAV may be unable to properly check out any files with dynamic content like PHP tags or SSIs because the HTTPGET renders these as they are checked out.Use Subversion (SVN) to get and check in filesDreamweaver can connect to a server that uses Subversion (SVN), a versioning control system that lets users collaboratively edit and managefiles on remote web servers. Dreamweaver is not a full SVN client, but does let users get the latest versions of files, make changes, and committhe files.Important: Dreamweaver CS5 uses the Subversion 1.6.6 client library, and Dreamweaver CS5.5 uses the 1.6.9 client library. Later versions ofthe Subversion client library are not backward-compatible. Be aware, if you update a third-party client application (for example, TortoiseSVN) towork with a later version of Subversion, the updated Subversion application will update local Subversion meta data, and Dreamweaver will nolonger be able to communicate with Subversion. This issue is not affected by updates to the Subversion server as those updates are backward-compatible. If you do upgrade to a third-party client application that works with Subversion 1.7 or later, you’ll need to check with Adobe for updatesbefore you can use Subversion with Dreamweaver again. For more information on this issue, see Adobe recommends that you use a third-party file comparison tool as you work with SVN version-controlled files. When you compare files fordifferences, you can learn exactly what kinds of changes other users made to the files. For more information on file comparison tools, use a websearch engine such as Google Search to search for “file comparison” or “diff” tools. Dreamweaver works with most third-party tools.For a video overview of working with SVN and Dreamweaver, see Set up an SVN connectionBefore you use Subversion (SVN) as a version control system with Dreamweaver, you must set up a connection to an SVN server. You set up aconnection to an SVN server in the Version Control category of the Site Definition dialog box.The SVN server is a repository of files from which you and other users can get and commit files. It is different from the remote server you typicallyuse with Dreamweaver. When using SVN, the remote server remains the “live” server for your web pages, and the SVN server exists to hold therepository of files over which you want to maintain version control. The typical workflow is to get and commit files back and forth between the SVNserver, and then publish them to your remote server from Dreamweaver. The remote server setup is completely separate from the SVN set up.You must have access to an SVN server and an SVN repository before you begin this set up. For more information about SVN, see theSubversion website at To set up the SVN connection, follow these steps:Choose Sites� Manage Sites, select the site you want to set up version control for, and click the Edit button.Note: If you haven’t already set up local and remote folders for a Dreamweaver site, you’ll at least need to set up a local sitebefore proceeding. (The remote site is not required at this stage, but you will eventually need to set it up before publishingyour files to the Web.) For more information, see Working with Dreamweaver sites.In the Site Setup dialog box, select the Version Control category.Select Subversion from the Access pop-up menu.
343
Set access options as follows:
Select a protocol from the Protocol pop-up menu. The available protocols are HTTP, HTTPS, SVN, and SVN+SSH.Note: Using the SVN+SSH protocol requires special configuration. For more information, see
Enter the address for the SVN server in the Server address text box (typically in the form of
Enter the path to your repository on the SVN server in the Repository path text box (typically something like. It is up to the server administrator to name the root folder for the SVN repository.)
(Optional) If you want to use a server port other than the default server port, select Non Default and enter the port numberin the text box.
Enter your SVN server user name and password.Click Test to test your connection, or click OK to close the dialog box. Then click Done to close the Manage Sites dialog box.Once the connection with the server established, your SVN repository is available for viewing in the Files panel. To view it, you can selectRepository View from the View pop-up menu, or click the Repository Files button
in the expanded Files panel.Get the latest versions of filesWhen you get the latest version of a file from the SVN repository, Dreamweaver merges the contents of that file with the contents of itscorresponding local copy. (In other words, if someone else has updated the file since you last committed it, those updates are merged into the localversion of the file on your computer.) If the file does not yet exist on the local hard drive, Dreamweaver simply gets the file.Note: When getting files for the first time from the repository, you should work with a local directory that is empty, or a local directory that doesnot contain files with the same names as files in the repository. Dreamweaver will not mount repository files to the local drive upon first try if thelocal drive contains files whose names match files in the remote repository.Make sure that you’ve successfully set up an SVN connection.Do one of the following:
Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu. (If youare working in the expanded Files panel, the Local view is automatically displayed.) Then right-click (Windows) or Control-click (Macintosh) the file or folder you’re interested in and select Version Control� Get Latest Versions.
Display the SVN repository files by selecting Repository View from the View pop-up menu in the Files panel, or by clickingthe Repository Files button in the expanded Files panel. Then right-click (Windows) or Control-click (Macintosh) the file orfolder you’re interested in and select Get Latest Versions.Note: You can also either right-click a file and choose Check Out from the context menu, or select the file and click the Check Out button to getthe latest version. Because SVN does not support a check-out workflow, however, this action does not actually check out the file in the traditionalCommit filesMake sure that you’ve successfully set up an SVN connection.Do one of the following:
Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu. (If youare working in the expanded Files panel, the Local view is automatically displayed.) Then select the file you want tocommit and click the Check In button.
Display the SVN repository files by selecting Repository View from the View pop-up menu in the Files panel, or by clickingthe Repository Files button in the expanded Files panel. Then right-click (Windows) or Control-click (Macintosh) the fileyou want to commit and select Check In.Review the actions in the Commit dialog box, make changes if necessary, and click OK.You can change actions by selecting the file whose action you want to change, and clicking the buttons at the bottom of theCommit dialog box. Two choices are available: commit and ignore.Note: A green check mark on a file in the Files panel denotes a changed file that has not yet been committed to the repository.Update status of files or folders in the repositoryYou can update the SVN status of a single file or folder. The update does not refresh the entire display.Make sure that you’ve successfully set up an SVN connection.Display the SVN repository files by selecting Repository View from the View pop-up menu in the Files panel, or by clicking theRepository Files button in the expanded Files panel.Right-click (Windows) or Control-click (Macintosh) any folder or file in the repository and select Update Status.
344
Update status of local file or foldersYou can update the SVN status of a single file or folder. The update does not refresh the entire display.Make sure that you’ve successfully set up an SVN connection.Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu. (If you areworking in the expanded Files panel, the Local view is automatically displayed.)Right-click (Windows) or Control-click (Macintosh) any folder or file in the Files panel and select Update Status.View revisions for a fileMake sure that you’ve successfully set up an SVN connection.Do one of the following:
Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu. (If youare working in the expanded Files panel, the Local view is automatically displayed.) Then right-click (Windows) or Control-click (Macintosh) the file you want to see revisions for and select Version Control� Show Revisions.
Display the SVN repository files by selecting Repository View from the View pop-up menu in the Files panel, or by clickingthe Repository Files button in the expanded Files panel. Then right-click (Windows) or Control-click (Macintosh) the fileyou want to see revisions for and select Show Revisions.In the Revision History dialog box, select the revision or revisions you’re interested in and do one of the following:
Click Compare to Local to compare the selected revision with the local version of the file.Note: You must install a third-party file comparison tool before you can compare files. For more information on filecomparison tools, use a web search engine such as Google Search to search for “file comparison” or “diff” tools.Dreamweaver works with most third-party tools.
Click Compare to compare two selected revisions. Control-click to select two revisions simultaneously.
Click View to view the selected revision. This action does not overwrite the current local copy of the same file. You cansave the selected revision to your hard drive just as you would save any other file.
Click Promote to make the selected revision the most current revision in the repository.Lock and unlock filesLocking a file in the SVN repository lets other users know that you are working on a file. Other users can still edit the file locally, but will not beable to commit the file until you’ve unlocked it. When you lock a file in the repository, you’ll see an open-lock icon on the file. Other users see acompletely locked icon.Make sure that you’ve successfully set up an SVN connection.Do one of the following:
Display the SVN repository files by selecting Repository View from the View pop-up menu in the Files panel, or by clickingthe Repository Files button in the expanded Files panel. Then right-click (Windows) or Control-click (Macintosh) the fileyou’re interested in and select Lock or Unlock.
Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu. (If youare working in the expanded Files panel, the Local view is automatically displayed.) Then right-click (Windows) or Control-click (Macintosh) the file you’re interested in and select Lock or Unlock.Add a new file to the repositoryA blue plus sign on a file in the Files panel denotes a file that does not yet exist in the SVN repository.Make sure that you’ve successfully set up an SVN connection.In the Files panel, select the file you want to add to the repository and click the Check In button.Make sure that the file is selected for Commit in the Commit dialog box and click OK.Move, copy, delete, or revert files
To move a file, drag the file to the destination folder in your local site.When you move a file, Dreamweaver marks the file in the new location with an Add With History sign, and marks the file in theold location with a Delete sign. When you Commit these files, the file in the old location disappears.
To copy a file, select the file, copy it (Edit� Copy), and paste (Edit� Paste) the file in the new location.When you copy and paste a file, Dreamweaver marks the file in the new location with an Add With History sign.
345

To delete a file, select the file and press delete.Dreamweaver gives you the option of whether you want to delete the local version of the file only, or both the local version andthe version on the SVN server. If you select to delete the local version only, the file on the SVN server is not affected. If youselect to delete the version on the SVN server as well, the local version is marked with a Delete sign, and you must committhe file for the deletion to take place.
To revert a copied or moved file to its original location, right-click the file and select Version Control� Revert.Resolve conflicting filesIf your file conflicts with another file on the server, you can edit it and then mark it as resolved. For example, if you try to check in a file thatconflicts with another user’s changes, SVN will not let you commit the file. You can get the latest version of the file from the repository, manuallymake changes to your working copy, and then mark your file as resolved so that you can commit it.Make sure that you’ve successfully set up an SVN connection.Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu. (If you areworking in the expanded Files panel, the Local view is automatically displayed.)Right-click (Windows) or Control-click (Macintosh) the file you want to resolve and select Version Control� Mark as Resolved.Go offlineYou might find it useful to avoid repository access during other file-transfer activities by going off-line. Dreamweaver will reconnect to the SVNrepository as soon as you invoke an activity that requires a connection (Get Latest Versions, Commit, and so on).Make sure that you’ve successfully set up an SVN connection.Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu. (If you areworking in the expanded Files panel, the Local view is automatically displayed.)Right-click (Windows) or Control-click (Macintosh) any file or folder in the Files panel and select Version Control� Go Offline.Clean up a local SVN siteThis command lets you remove locks on files so that you can resume unfinished operations. You should use this command to remove old locks ifyou receive “working copy locked” errors.Make sure that you’ve successfully set up an SVN connection.Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu. (If you areworking in the expanded Files panel, the Local view is automatically displayed.)Right-click (Windows) or Control-click (Macintosh) the file you want to clean up and select Version Control� Clean Up.About moving files and folders in Subversion-controlled sitesWhen you move the local versions of files or folders in a Subversion-controlled site, you run the risk of creating problems for other users whomight be synching to the SVN repository. For example, if you move a file locally, and don't commit that file to the repository for a few hours,another user might try to get the latest version of the file from the file’s old location. For this reason, you should always commit files back to theSVN server immediately after you've moved them locally.Files and folders remain on the SVN server until you've manually deleted them. So even if you move a file to a different local folder and commit it,the old version of the file remains in the previous location on the server. To avoid confusion, delete the old copies of files and folders that you'veWhen you move a file locally and commit it back to the SVN server, the file’s version history is lost.More Help topics
Legal Notices | Online Privacy Policy
346
Cloaking files and folders in your Dreamweaver site
To the topTo the topTo the topAbout site cloakingEnable and disable site cloakingCloak and uncloak site files and foldersCloak and uncloak specific file typesUncloak all files and foldersAbout site cloakingSite cloaking enables you to exclude files and folders from operations such as Get or Put. You can also cloak all files of a particular type (JPEG,FLV, XML, and so on) from site operations. Dreamweaver remembers your settings for each site so that you don’t have to make selections eachtime you work on that site.For example, if you’re working on a large site and you don’t want to upload your multimedia files each day, you can use site cloaking to cloak yourmultimedia folder. Dreamweaver will then exclude files in that folder from site operations you perform.You can cloak files and folders on the remote or local site. Cloaking excludes cloaked files and folders from the following operations:
Performing Put, Get, Check In, and Check Out operations
Generating reports
Finding newer local and newer remote files
Performing sitewide operations, such as checking and changing links
Synchronizing
Working with Asset panel contents
Updating templates and librariesNote: You can still perform an operation on a specific cloaked folder or file by selecting the item in the Files panel andperforming an operation on it. Performing an operation directly on a file or folder overrides cloaking.Note: Dreamweaver excludes cloaked templates and library items from Get and Put operations only. Dreamweaver does notexclude these items from batch operations, because it might cause them to become out of sync with their instances.Enable and disable site cloakingSite cloaking enables you to exclude folders, files, and file types in a site from sitewide operations such as Get or Put, and is enabled by default.You can disable cloaking permanently or just temporarily to perform an operation on all files, including cloaked files. When you disable sitecloaking, all cloaked files are uncloaked. When you enable site cloaking again, any previously cloaked files become cloaked again.Note: You can also use the Uncloak All option to uncloak all files, but this does not disable cloaking; also there is no way to recloak all files andfolders that were previously cloaked, except to set cloaking again for each folder, file, and file type.In the Files panel (Window� Files) select a file or folder.Right-click (Windows) or Controlclick (Macintosh), and do one of the following:
Select Cloaking� (deselect to disable).
Select Cloaking� Settings to open the Cloaking category of the Site Setup dialog box. Select or deselect , and select ordeselect Cloak Files Ending With to enable or disable cloaking for specific file types. You can enter or delete file suffixes inthe text box that you want to cloak or uncloak.Cloak and uncloak site files and foldersYou can cloak specific files and folders, but you cannot cloak all files and folders or cloak an entire site. When you cloak specific files and folders,you can cloak multiple files and folders at the same time.In the Files panel (Window� Files), select a site that has site cloaking enabled.Select the folder(s) or file(s) you want to cloak or uncloak.Right-click (Windows) or Controlclick (Macintosh), then select Cloaking� Cloak or Cloaking� Uncloak from the context
347

To the topTo the top
A red line through the file or folder icon appears or disappears, indicating that the folder is cloaked or uncloaked.
Note: You can still perform an operation on a specific cloaked file or folder by selecting the item in the Files panel andperforming an operation on it. Performing an operation directly on a file or folder overrides cloaking.Cloak and uncloak specific file typesYou can indicate specific file types to cloak, so that Dreamweaver cloaks all files ending with a specified pattern. For example, you can cloak allfiles ending with the .txt extension. The file types that you enter do not have to be file extensions; they can be any pattern at the end of a filename.Cloak specific file types within a siteIn the Files panel (Window� Files), select a site that has site cloaking enabled.Right-click (Windows) or Controlclick (Macintosh), then select Cloaking� Settings.Select the Cloak Files Ending With option, enter the file types to cloak in the box, and click OK.For example, you might enter to cloak all files with names ending in .jpg in your site.Separate multiple file types with one space; do not use a comma or semicolon.In the Files panel, a red line appears through the affected files, indicating that they are cloaked.Some software creates backup files ending in a particular suffix, such as .bak. You can cloak such files.Note: You can still perform an operation on a specific cloaked file or folder by selecting the item in the Files panel andperforming an operation on it. Performing an operation directly on a file or folder overrides cloaking.Uncloak specific file types within a siteIn the Files panel (Window� Files), select a site that has site cloaking enabled.Right-click (Windows) or Controlclick (Macintosh), then select Cloaking� Settings.In the Advanced Site Definition dialog box, do one of the following:
Deselect the Cloak Files Ending With option to uncloak all the file types listed in the box.
Delete specific file types from the box to uncloak those file types.Click OK.The red lines disappear from the affected files, indicating that they are uncloaked.Uncloak all files and foldersYou can uncloak all files and folders in a site at the same time. This action cannot be undone; there is no way to recloak all items that werepreviously cloaked. You have to recloak items individually.If you want to temporarily uncloak all folders and files, then recloak those items, disable site cloaking.In the Files panel (Window� Files), select a site that has site cloaking enabled.Select any file or folder in that site.Right-click (Windows) or Controlclick (Macintosh), then select Cloaking� Uncloak All.Note: This step also deselects the Cloak Files Ending With option in the Cloaking category of the Site Definition dialog box.The red lines through folder and file icons disappear, indicating that all files and folders in the site are uncloaked.
Legal Notices | Online Privacy Policy
348
Comparing files for differences
To the topCompare local and remote files for differencesCompare before putting filesCompare files when synchronizingCompare local and remote files for differencesDreamweaver can work with file comparison tools (also known as “diff tools”) to compare the code of local and remote versions of the same file,two different remote files, or two different local files. Comparing local and remote versions is useful if you’re working on a file locally and yoususpect the copy of the file on the server has been modified by someone else. Without leaving Dreamweaver, you can view and merge the remotechanges into your local version before putting the file to the server.Comparing two local files or two remote files is also useful if you keep previous, renamed versions of your files. If you’ve forgotten the changesmade to a file from a previous version, a quick comparison will remind you.Before you start, you must install a third-party file comparison tool on your system. For more information on file comparison tools, use a websearch engine such as Google Search to search for “file comparison” or “diff” tools. Dreamweaver works with most third-party tools.Specify a comparison tool in DreamweaverInstall the file comparison tool on the same system as Dreamweaver.In Dreamweaver, open the Preferences dialog box by selecting Edit� Preferences (Windows) or Dreamweaver� Preferences(Macintosh), and then select the File Compare category.Do one of the following:
In Windows, click the Browse button and select the application that compares files.
On the Macintosh, click the Browse button and select the tool or script that launches the file comparison tool from thecommand line, not the actual comparison tool itself.Launch tools or scripts are typically located in the /usr/bin folder on your Macintosh. For example, if you want to useFileMerge, browse to /usr/bin and select opendiff, which is the tool that launches FileMerge.The following table lists common file comparison tools for the Macintosh and the location of their launch tools or scripts onyour hard disk:If you useSelect the following file/usr/bin/opendiff (or /Developer/usr/bin/opendiff)Note: The usr folder is normally hidden in Finder. However, you can access it with the Browse button in Dreamweaver.Note: The actual results displayed depends on the diff tool you are using. Check the user manual for your tool to understand how to interpret theCompare two local filesYou can compare two files located anywhere on your computer.In the Files panel, Controlclick (Windows) or Command-click (Macintosh) the two files to select them.To select files outside your defined site, select your local disk from the left popup menu in the Files panel and then selectthe files.Right-click one of the selected files and select Compare Local Files from the context menu.Note: If you have a one-button mouse, Controlclick one of the selected files instead.The file comparison tool starts and compares the two files.Compare two remote filesYou can compare two files located on your remote server. You must define a Dreamweaver site with remote settings before you can accomplish
349
To the topTo the top
this task.
In the Files panel, display the files on the remote server by selecting Remote View from the right popup menu.click (Windows) or Command-click (Macintosh) the two files to select themRight-click one of the selected files and select Compare Remote Files from the context menu.Note: If you have a one-button mouse, Controlclick one of the selected files instead.The file comparison tool starts and compares the two files.Compare a local file to a remote fileYou can compare a local file to a file located on your remote server. To do this, you must first define a Dreamweaver site with remote settings.
In the Files panel, right-click a local file and select Compare With Remote from the context menu.Note: If you have a one-button mouse, Controlclick the local file instead.The file comparison tool starts and compares the two files.Compare a remote file to a local fileYou can compare a remote file to a local file. You must define a Dreamweaver site with remote settings before accomplishing this task.In the Files panel, display the files on the remote server by selecting Remote View from the right popup menu.Right-click a file in the panel and select Compare with Local from the context menu.Note: If you have a one-button mouse, Controlclick the file instead.Compare an open file to a remote fileYou can compare a file open in Dreamweaver to its counterpart on the remote server.
In the Document window, select File� Compare with Remote.The file comparison tool starts and compares the two files.You can also right-click the document tab along the top of the Document window and select Compare with Remote from the context menu.Compare before putting filesIf you edit a file locally and then try to upload it to your remote server, Dreamweaver will notify you if the remote version of the file has changed.You have the option of comparing the two files before you upload the file and overwrite the remote version.Before you start, you must install a file comparison tool on your system and specify it in Dreamweaver.After editing a file in a Dreamweaver site, put the file (Site� Put) to your remote site.If the remote version of the file has been modified, you’ll receive a notification with the option of seeing the differences.To view the differences, click the Compare button.The file comparison tool starts and compares the two files.If you haven’t specified a file comparison tool, you are prompted to specify one.After you’ve reviewed or merged the changes in the tool, you can proceed with the Put operation or cancel it.Compare files when synchronizingYou can compare the local versions of your files with the remote versions when you synchronize your site files with Dreamweaver.Before you start, you must install a file comparison tool on your system and specify it in Dreamweaver.Right-click anywhere in the Files panel and select Synchronize from the context menu.Complete the Synchronize Files dialog box and click Preview.After you click Preview, the selected files and the actions that will be taken during synchronization are listed.In the list, select each file you want to compare and click the Compare button (the icon with two small pages).Note: The file must be text-based, such as HTML or ColdFusion files.Dreamweaver starts the comparison tool, which compares the local and remote versions of each file you selected.More Help topics
Legal Notices | Online Privacy Policy
350
Getting and putting files to and from your server
To the topTo the topTo the topFile transfer and dependent filesAbout background file transfersGet files from a remote serverPut files on a remote serverManage file transfersFile transfer and dependent filesIf you’re working in a collaborative environment, use the Check In/Check Out system to transfer files between local and remote sites. If you’re theonly person working on the remote site, however, you can use the Get and Put commands to transfer files without checking them in or out.When you transfer a document between a local and remote folder using the Files panel, you have the option of transferring the document’sdependent files. Dependent files are images, external style sheets, and other files referenced in your document that a browser loads when it loadsthe document.Note: It’s usually a good idea to download dependent files when checking out a new file, but if the latest versions of the dependent files arealready on the local disk, there’s no need to download them again. This is also true for uploading and checking in files: no need if up-to-datecopies are already at the remote site.Library items are treated as dependent files.Some servers report errors when putting library items. However, you can cloak these files to prevent them from being transferred.About background file transfersYou can perform other, non-server-related, activities while you’re getting or putting files. Background file transfer works for all of the transferprotocols supported by Dreamweaver: FTP, SFTP, LAN, WebDAV, Subversion, and RDS.Non-server-related activities include common operations like typing, editing external style sheets, generating site-wide reports, and creating newServer-related activities that Dreamweaver cannot perform during file transfers include the following:
Put/Get/Check in/Check out files
Undo check-out
Create a database connection
Bind dynamic data
Preview data in Live view
Insert a web service
Delete remote files or folders
Preview in a browser on a testing server
Save a file to a remote server
Insert an image from a remote server
Open a file from a remote server
Auto put files upon saving
Drag files to the remote site
Cut, copy, or paste files on the remote site
Refresh Remote viewBy default, the Background File Activity dialog box is open during file transfers. You can minimize the dialog box by clicking the Minimize button inthe upper right corner. Closing the dialog box during file transfers results in a cancelation of the operation.Get files from a remote server
351
To the top
Use the Get command to copy files from the remote site to your local site. You can use the Files panel or the Document window to get files.
Dreamweaver creates a log of file activity during the transfer that you can view and save.Note: You cannot turn background file transfer off. If you have the detail log open in the Background File Activity dialog box, you can close that toimprove performance.Dreamweaver also records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP, the Site FTP log can help youdetermine the problem.Get files from a remote server using the Files panelIn the Files panel (Window� Files), select the desired files to download.Usually you select these files in the Remote view, but you can select the corresponding files in the Local view if you prefer. Ifthe Remote view is active, then Dreamweaver copies the selected files to the local site; if the Local view is active, thenDreamweaver copies the remote versions of the selected local files to the local site.Note: To get only those files for which the remote version is more recent than the local version, use the SynchronizeDo one of the following to get the file:
Click the Get button in the Files panel toolbar.
Right-click (Windows) or Controlclick (Macintosh) the file in the Files panel, then select Get from the context menu.Click Yes in the Dependent Files dialog box to download dependent files; if you already have local copies of the dependentfiles, click No. The default is to not download dependent files. You can set this option at Edit� Preferences� Site.Dreamweaver downloads the selected files, as follows:
If you’re using the Check In/Check Out system, getting a file results in a read-only local copy of the file; the file remainsavailable on the remote site or testing server for other team members to check out.
If you’re not using the Check In/Check Out system, getting a file results in a copy that has both read and write privileges.Note: If you’re working in a collaborative environment—that is, if others are working on the same files—you should notdisable Enable File Check In and Check Out. If other people are using the Check In/Check Out system with the site, youshould use that system as well.To stop the file transfer at any time, click the Cancel button in the Background File Activity dialog box.Get files from a remote server using the Document windowMake sure the document is active in the Document window.Do one of the following to get the file:
Select Site� Get.
Click the File Management icon in the Document window toolbar, then select Get from the menu.Note: If the current file is not part of the current site in the Files panel, Dreamweaver attempts to determine which locallydefined site the current file belongs to. If the current file belongs to only one local site, Dreamweaver opens that site, thenperforms the Get operation.Display the FTP logClick the Options menu in the upper right corner of the Files panel.Select View� Site FTP Log.Note: In the Expanded Files Panel, you can click the FTP Log button to display the log.Put files on a remote serverYou can put files from the local site to the remote site, generally without changing the file’s checked out status.There are two common situations in which you might use the Put command instead of Check In:
You’re not in a collaborative environment and you aren’t using the Check In/Check Out system.
You want to put the current version of the file on the server but you’re going to keep editing it.Note: If you put a file that didn’t previously exist on the remote site and you’re using the Check In/Check Out system, the fileis copied to the remote site and is then checked out to you so that you can continue editing.You can use the Files panel or the Document window to put files. Dreamweaver creates a log of file activity during the transferthat you can view and save.
Note:
You cannot turn background file transfer off. If you have the detail log open in the Background File Activity dialog box,
352
To the topyou can close that to improve performance.Dreamweaver also records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP, the SiteFTP log can help you determine the problem.For a tutorial on putting files on a remote server, see For a tutorial on troubleshooting publishing problems, see Put files on a remote or testing server using the Files panelIn the Files panel (Window� Files), select the files to upload.Usually you select these in the Local view, but you may select the corresponding files in the Remote view if you prefer.Note: You can put only those files for which the local version is more recent than the remote version.Do one of the following to put the file on the remote server:
Click the Put button in the Files panel toolbar.
Right-click (Windows) or Controlclick (Macintosh) the file in the Files panel, then select Put from the context menu.If the file hasn’t been saved, a dialog box appears (if you set this preference in the Site category of the Preferences dialogbox) allowing you to save the file before putting it on the remote server. Click Yes to save the file or No to put the previouslysaved version on the remote server.Note: If you do not save the file, any changes you’ve made since the last time you saved will not be put onto the remoteserver. However, the file remains open, so you can still save the changes after putting the file on the server if you want.Click Yes to upload dependent files along with the selected files, or click No to refrain from uploading dependent files. Thedefault is to not upload dependent files. You can set this option at Edit� Preferences� Site.Note: It’s usually a good idea to upload dependent files when checking in a new file, but if the latest versions of thedependent files are already on the remote server, there’s no need to upload them again.To stop the file transfer at any time, click the Cancel button in the Background File Activity dialog box.Put files on a remote server using the Document windowMake sure the document is active in the Document window.Do one of the following to put the file:
Select Site� Put.
Click the File Management icon in the Document window toolbar, then select Put from the menu.Note: If the current file is not part of the current site in the Files panel, Dreamweaver attempts to determine which locallydefined site the current file belongs to. If the current file belongs to only one local site, Dreamweaver opens that site, thenperforms the Put operation.Display the FTP logClick the Options menu in the upper right corner of the Files panel.Select View� Site FTP Log.Note: In the Expanded Files Panel, you can click the FTP Log button to display the log.Manage file transfersYou can view the status of file transfer operations, as well as a list of transferred files and their outcomes (transfer successful, skipped, or failed).You can also save a log of the file activity.Note: Dreamweaver lets you perform other non-server-related activities while you’re transferring files to or from a server.Cancel a file transfer
Click the Cancel button in the Background File Activity dialog box. If the dialog box isn’t showing, click the File Activity button at the bottom ofthe Files panel.Show the Background File Activity dialog box during transfers
Click the File Activity or Log button at the bottom of the Files panel.Note: You cannot hide or remove the Log button. It’s a permanent part of the panel.View details of the last file transferClick the Log button at the bottom of the Files panel to open the Background File Activity dialog box.Click the Details expander arrow.
353

Save a log of the last file transferClick the Log button at the bottom of the Files panel to open the Background File Activity dialog box.Click the Save Log button and save the information as a text file.You can review the file activity by opening the log file in Dreamweaver or in any text editor.More Help topicsPutting files tutorialTroubleshoot publishing problems tutorial
Legal Notices | Online Privacy Policy
354
Managing files and folders
To the topTo the topAbout managing files and foldersUsing the Files panelView files and foldersWork with files in the Files panelFind files in your Dreamweaver siteIdentify and delete unused filesAccess sites, a server, and local drivesCustomize the file and folder details displayed in the expanded Files panelAbout managing files and foldersDreamweaver includes a Files panel that helps you manage and transfer files to and from a remote server. When you transfer files between localand remote sites, parallel file and folder structures between the sites are maintained. When transferring files between sites, Dreamweaver createscorresponding folders if they do not yet exist in a site. You can also synchronize the files between your local and remote sites; Dreamweavercopies files in both directions as necessary and removes unwanted files when appropriate.Using the Files panelThe Files panel enables you to view files and folders, whether they are associated with a Dreamweaver site or not, and perform standard filemaintenance operations, such as opening and moving files.Note: In previous versions of Dreamweaver the Files panel was called the Site panel.You can move the Files panel as necessary and set preferences for the panel.Use this panel to perform the following tasks:
Access sites, a server, and local drives
View files and folders
Manage files and folders in the Files panelFor Dreamweaver sites, use the following options to display or transfer files:
Expanded Files panel options.Site pop-up menu Connect/Disconnect RefreshView site FTP logSite files viewTesting server RepositoryGet File(s)Put File(s)Check Out File(s)Check In File(s) Synchronize Expand/CollapseNote: The Site Files view, Testing Server view, and Synchronize buttons appear only in the expanded Files panel.The Site popup menuLets you select a Dreamweaver site and display that site’s files. You can also use the Site menu to access all the files onyour local disk, much like Windows Explorer(Windows) or the Finder (Macintosh).(FTP, RDS, and WebDAV protocol) Connects to or disconnects from the remote site. By default, Dreamweaver disconnectsfrom the remote site if it has been idle for more than 30 minutes (FTP only). To change the time limit, select Edit� Preferences (Windows) orDreamweaver� Preferences (Macintosh), then select Site from the category list on the left.Refreshes the local and remote directory lists. Use this button to manually refresh the directory lists if you deselected either Refresh LocalFile List Automatically or Refresh Remote File List Automatically in the Site Definition dialog box.Site Files viewDisplays the file structure of the remote and local sites in the panes of the Files panel. (A preference setting determines which siteappears in the left pane and which appears in the right pane.) Site Files view is the default view for the Files panel.Testing Server viewDisplays the directory structure of the testing server and the local site.Repository viewDisplays the Subversion (SVN) Repository.Get File(s)Copies the selected files from the remote site to your local site (overwriting the existing local copy of the file, if any). If Enable FileCheck In And Check Out is enabled, the local copies are read-only; the files remain available on the remote site for other team members to checkout. If Enable File Check In and Check Out is disabled, the file copies will have both read and write privileges.Note: The files Dreamweaver copies are the files you select in the active pane of the Files panel. If the Remote pane is active, the selectedremote or testing server files are copied to the local site; if the Local pane is active, Dreamweaver copies the remote or testing server version ofthe selected local files to the local site.
355
To the top
Put File(s)Copies the selected files from the local site to the remote site.
Note: The files Dreamweaver copies are the files you select in the active pane of the Files panel. If the Local pane is active, the selected localfiles are copied to the remote site or testing server; if the Remote pane is active, Dreamweaver copies the local versions of the selected remoteserver files to the remote site.If you are putting a file that doesn’t already exist on the remote site, and Enable File Check In and Out is enabled, the file is added to the remotesite as “checked out.” Click the Check In Files button if you want to add a file without the checked out status.Check Out File(s)Transfers a copy of the file from the remote server to your local site (overwriting the existing local copy of the file, if any) andmarks the file as checked out on the server. This option is not available if Enable File Check In and Check Out in the Site Definitions dialog box isdisabled for the current site.Check In File(s)Transfers a copy of the local file to the remote server and makes the file available for editing by others. The local file becomesread-only. This option is not available if the Enable File Check In and Check Out option in the Site Definitions dialog box is disabled for the currentSynchronizes the files between the local and remote folders.The Expand/Collapse buttonExpands or collapses the Files panel to display one or two panes.View files and foldersYou can view files and folders in the Files panel, whether they are associated with a Dreamweaver site or not. When you view sites, files, orfolders in the Files panel, you can change the size of the viewing area, and, for Dreamweaver sites, you can expand or collapse the Files panel.For Dreamweaver sites, you can also customize the Files panel by changing the view—either your local or remote site—that appears by default inthe collapsed panel. Or, you can switch the content views in the expanded Files panel using the Always Show option.Open or close the Files panel
Select Window� Files.Search files in the files panel (Mac OS, Creative Cloud users only)Use Live Search to locate files based on filename or text present in files. The site selected in the Files panel is used for search. If there is no siteselected in the panel, the search option does not appear. For more information, see Search files based on filenames or contentExpand or collapse the Files panel (Dreamweaver sites only)
In the Files panel (Window� Files), click the Expand/Collapse button
in the toolbar.Note: If you click the Expand/Collapse button to expand the panel while it is docked, the panel maximizes so that you cannot work in theDocument window. To return to the Document window, click the Expand/Collapse button again to collapse the panel. If you click theExpand/Collapse button to expand the panel while it is not docked, you can still work in the Document window. Before you can dock the panelagain, you must first collapse it.When the Files panel is collapsed it displays the contents of the local site, the remote site, or the testing server as a list of files. When expanded, itdisplays the local site and either the remote site or testing server.Change the size of the view area in the expanded Files panel
In the Files panel (Window� Files), with the panel expanded, do one of the following:
Drag the bar that separates the two views to increase or decrease the view area of the right or left pane.
Use the scroll bars at the bottom of the Files panel to scroll through the views’ contents.Change the site view in Files panel (Dreamweaver sites only)
Do one of the following:
In the collapsed Files panel (Window� Files), select Local View, Remote View, Testing Server, or Repository View from theSite View popup menu.Note: Local View appears in the Site View menu by default.
In the expanded Files panel (Window� Files), click the Site Files button (for the remote site), the Testing Server button, or theRepository Files button.
356
To the top
Site FilesTesting ServerRepository FilesNote: Before you can view a remote site, testing server or repository, you must set up a remote site, testing server, or SVNView files outside of a Dreamweaver site
Navigate your computer using the Site popup menu, much as you would if you were using Windows Explorer(Windows) or the FinderWork with files in the Files panelYou can open or rename files; add, move, or delete files; or refresh the Files panel after you make changes.For Dreamweaver sites, you can also determine which files (on either the local or remote site) have been updated since the last time they wereOpen a fileIn the Files panel (Window� Files), select a site, server, or drive from the popup menu (where the current site, server, ordrive appears).Navigate to the file you want to open.Do one of the following:
Double-click the file’s icon.
Right-click (Windows) or Controlclick (Macintosh) the file’s icon, then select Open.Dreamweaver opens the file in the Document window.Create a file or folderIn the Files panel (Window� Files), select a file or folder.Dreamweaver will create the new file or folder inside the currently selected folder, or in the same folder as the currentlyselected file.Right-click (Windows) or Controlclick (Macintosh), then select New File or New Folder.Enter a name for the new file or folder.Press Enter (Windows) or Return (Macintosh).Delete a file or folderIn the Files panel (Window� Files), select the file or folder you want to delete.Right-click (Windows) or Controlclick (Macintosh), then select Edit� Delete.Rename a file or folderIn the Files panel (Window� Files), select the file or folder you want to rename.Do one of the following to activate the name of the file or folder:
Click in the filename, pause, then click again.
Right-click (Windows) or Controlclick (Macintosh) the file’s icon, then select Edit� Rename.Type the new name over the existing name.Press Enter (Windows) or Return (Macintosh).Move a file or folderIn the Files panel (Window� Files), select the file or folder you want to move.Do one of the following:
Copy the file or folder, then paste it in a new location.
Drag the file or folder to a new location.Refresh the Files panel to see the file or folder in its new location.Refresh the Files panel
Do one of the following:
357
To the top
Right-click (Windows) or Controlclick (Macintosh) any file or folder, then select Refresh.
(Dreamweaver sites only) Click the Refresh button in the Files panel toolbar (this option refreshes both panes).Note: Dreamweaver refreshes the Files panel when you make changes in another application, then return to Dreamweaver.Find files in your Dreamweaver siteDreamweaver makes it easy to find selected, open, checked out, or recently modified files in your site. You can also find files that are newer inyour local or remote site.Find an open file in your siteOpen the file in the Document window.Select Site� Locate in Site.Dreamweaver selects the file in the Files panel.Note: If the open file in the Document window is not part of the current site in the Files panel, Dreamweaver attempts todetermine which of your Dreamweaver sites the file belongs to; if the current file belongs to only one local site, Dreamweaveropens that site in the Files panel, then highlights the file.Locate and select checked out files in a Dreamweaver site
In the Files panel (Window� Files), click the Options menu in the upper-right corner of the Files panel, then select Edit� SelectChecked Out Files.
Dreamweaver selects the files in the Files panel.Find a selected file in your local or remote siteSelect the file in the Local or Remote view of the Files panel (Window� Files).Right-click (Windows) or Controlclick (Macintosh), then select Locate in Local Site or Locate in Local Site (depending onwhere you selected the file).Dreamweaver selects the file in the Files panel.Locate and select files that are newer in the local site than in the remote site
In the Files panel (Window� Files), click the Options menu in the upper-right corner of the Files panel, then select Edit� SelectNewer Local.Dreamweaver selects the files in the Files panel.Locate and select files that are newer in the remote site than in the local site
In the Files panel (Window� Files), click the Options menu in the upper-right corner of the Files panel, then select Edit� SelectNewer Remote.Dreamweaver selects the files in the Files panel.Find recently modified files in your siteIn the collapsed Files panel (Window� Files), click the Options menu in the upper-right corner of the Files panel, and thenselect Edit� Select Recently Modified.Do one of the following to indicate search dates for the report:
To report on all files modified in the last several days, select Files Created or Modified in the Last and enter a number inthe box.
To report on all files modified within a specific time frame, click the Files Created or Modified in the Between radio button,then specify a date range.(Optional) Enter a user name in the Modified By box to limit your search to files modified by a specific user between the datesyou indicated.Note: This option is only available for reports on Contribute sites.Select a radio button to indicate where you want to view files listed in the report, if necessary:Local Machineif the site contains static pages.Testing Serverif the site contains dynamic pages.Note: This option assumes you defined a Testing Server in the Site Definition dialog box (XREF). If you have not defined a
358
To the topTo the top
Testing Server and entered a URL prefix for that server, or if you are running the report for more than one site, this option is
not available.Other Locationif you want to enter a path in the text box.Click OK to save your settings.Dreamweaver highlights the files that were modified within the selected time frame in the Files panel.Identify and delete unused filesYou can identify and delete files that are no longer used by other files in your site.Select Site� Check Links Sitewide.Dreamweaver checks all the links in your site and displays the broken ones in the Results panel.Select Orphaned Files from the menu on the Link Checker panel.Dreamweaver displays all the files with no incoming links. This means that no files in your site link to these files.Select the files you want to delete and press Delete.Important: Although no other file in the site links to these files, some of the listed files may link to other files. Use cautionwhen deleting the files.Access sites, a server, and local drivesYou can access, modify, and save files and folders in your Dreamweaver sites, as well as files and folders that are not part of a Dreamweaversite. In addition to Dreamweaver sites, you can access a server, a local drive, or your desktop.Before you can access a remote server, you must set up Dreamweaver to work with that server.Note: The best way to manage your files is to create a Dreamweaver site.Open an existing Dreamweaver site
In the Files panel (Window� Files), select a site from the menu (where the current site, server, or drive appears).
Open a folder on a remote FTP or RDS serverIn the Files panel (Window� Files), select a server name from the menu (where the current site, server, or drive appears).
Note: Server names appear for servers you’ve configured Dreamweaver to work with.Navigate to and edit files as you normally do.Access a local drive or your desktopIn the Files panel (Window� Files), select Desktop, Local Disk, or CD Drive from the menu (where the current site, server, ordrive appears).
359
To the top
Navigate to a file, then do any of the following:
Open files in Dreamweaver or another application
Rename files
Copy files
Delete files
Drag filesWhen you drag a file from one Dreamweaver site to another or to a folder that is not part of a Dreamweaver site,Dreamweavercopies the file to the location where you drop it. If you drag a file within the same Dreamweaver site,Dreamweavermoves the file to the location where you drop it. If you drag a file that is not part of a Dreamweaver site to afolder that is not part of a Dreamweaver site, Dreamweaver moves the file to the location where you drop it.Note: To move a file that Dreamweaver copies by default, hold down the Shift key (Windows) or the Command key(Macintosh) while you drag. To copy a file that Dreamweaver moves by default, hold the Control key (Windows) or theOption key (Macintosh) while you drag.Customize the file and folder details displayed in the expanded Files panelWhen you view a Dreamweaver site in the expanded Files panel, information about the files and folders is displayed in columns. For example, youcan see the file type or the date a file was modified.You can customize the columns by doing any of the following (some operations are only available for columns you add, not default columns):
Reorder or realign columns
Add new columns (for a maximum of 10 columns)
Hide columns (except the filename column)
Designate columns to be shared with all users connected to a site
Delete columns (custom columns only)
Rename columns (custom columns only)
Associate columns with a Design Note (custom columns only)Change the order of the columns
Select a column name, and then click the up or down arrow button to change the position of the selected column.Note: You can change the order of any column except Name, which is always the first column.Add, delete, or change detail columnsSelect Site� Manage Sites.Select a site, then click Edit.Expand Advanced Settings and select the File View Columns category.Select a column and click the Plus (+) button to add a column, or the Minus (–) button to delete a column.Note: The column is deleted immediately and without confirmation, so make certain that you want to delete the columnbefore clicking the Minus (–) button.In the Column Name box, enter a name for your column.Select a value from the Associate with Design Notes menu, or type in your own.Note: You must associate a new column with a Design Note, so that there is data to display in the Files panel.Select an alignment to determine how text is aligned within the column.Select or deselect Show to reveal or hide the column.Select Share with All Users of This Site to share the column with all users connected to the remote site.Sort by any detail column in the Files panel
Click the heading for the column you want to sort.Click the heading again to reverse the order (ascending or descending) by which Dreamweaver sorts the column.More Help topics[print]Files panel overview
Legal Notices | Online Privacy Policy
360
Rolling back files (Contribute users)

To the topRoll back files (Contribute users)Roll back files (Contribute users)Dreamweaver automatically saves multiple versions of a document when you have Adobe Contribute compatibility enabled.Note: You must have Contribute installed on the same machine as Dreamweaver.File rollback must also be enabled in Contribute’s administrative settings. For more information, see Administering ContributeRight-click (Windows) or Controlclick (Macintosh) a file in the Files panel.Select Roll Back Page.If there is any previous version of the page to roll back, the Rollback dialog box appears.Select the version of the page you want to roll back to and click Roll Back.More Help topics
Legal Notices | Online Privacy Policy
361
Set download time and size preferences

Dreamweaver calculates size based on the entire contents of the page, including all linked objects, such as images and plugins. Dreamweaverestimates download time based on the connection speed entered in Status Bar preferences. Actual download time varies depending on generalInternet conditions.A good guideline to use when checking download times for a particular web page is the 8second rule. That is, most users will not wait longerthan 8 seconds for a page to load.Select Edit� Preferences (Windows) or Dreamweaver� Preferences (Macintosh).Select Status Bar from the Category list on the left.Select a connection speed with which to calculate download time and click OK.More Help topics
Legal Notices | Online Privacy Policy
362
Storing file information in Design Notes
To the topTo the topAbout Design NotesEnable and disable Design Notes for a siteAssociate Design Notes with filesWork with Design NotesAbout Design NotesDesign Notes are notes that you create for a file. Design Notes are associated with the file they describe, but stored in a separate file. You can seewhich files have Design Notes attached in the expanded Files panel: A Design Notes icon appears in the Notes column.You can use Design Notes to keep track of extra file information associated with your documents, such as image source-filenames and commentson file status. For example, if you copy a document from one site to another, you can add Design Notes for that document, with the comment thatthe original document is in the other site folder.You can also use Design Notes to keep track of sensitive information that you can’t put inside a document for security reasons, such as notes onhow a particular price or configuration was chosen, or what marketing factors influenced a design decision.If you open a file in Adobe® Fireworks® or Flash, and export it to another format, Fireworks and Flash automatically save the name of the originalsource file in a Design Notes file. For example, if you open myhouse.png in Fireworks and export it to myhouse.gif, Fireworks creates a DesignNotes file called myhouse.gif.mno. This Design Notes file contains the name of the original file, as an absolute URL. So, the Design Notes formyhouse.gif might contain the following line:A similar Flash Design Note might contain the following line:Note: To share Design Notes, users should define the same site-root path (for example, sites/assets/orig).When you import the graphic into Dreamweaver, the Design Notes file is automatically copied into your site along with the graphic. When youselect the image in Dreamweaver and choose to edit it using Fireworks, Fireworks opens the original file for editing.Enable and disable Design Notes for a siteDesign Notes are notes associated with a file, but stored in a separate file. Use Design Notes to keep track of extra file information associated withyour documents, such as image source-filenames and comments on file status.You enable and disable Design Notes for a site in the Design Notes category of the Site Definition dialog box. When you enable Design Notes,you can also choose to share them with others, if you want.Select Site� Manage Sites.In the Manage Sites dialog box, select a site, then click Edit.In the Site Setup dialog box, expand Advanced Settings and select the Design Notes category.Select Maintain Design Notes to enable Design Notes (deselect to disable them).If you want to delete all local Design Notes files for your site, click Clean Up, and then click Yes. (If you want to delete remoteDesign Notes files, you’ll need to delete them manually).Note: The Clean Up Design Notes command only deletes MNO (Design Notes) files. It does not delete the _notes folder orthe dwsync.xml file inside the _notes folder. Dreamweaver uses the dwsync.xml file to maintain information about siteSelect Enable Upload Design Notes For Sharing to upload Design Notes associated with your site with the rest of yourdocuments and click OK.
If you select this option, you can share Design Notes with the rest of your team. When you put or get a file, Dreamweaverautomatically puts or gets the associated Design Notes file.
If you do not select this option, Dreamweaver maintains Design Notes locally but does not upload them with your files. Ifyou work alone on your site, deselecting this option improves performance. Design Notes will not be transferred to theremote site when you check in or put your files and you can still add and modify the Design Notes for your site locally.
363
To the topTo the topAssociate Design Notes with filesYou can create a Design Notes file for each document or template in your site. You can also create Design Notes for applets, ActiveX controls,images, Flash content, Shockwave objects, and image fields in your documents.Note: If you add Design Notes to a template file, documents you create with the template do not inherit the Design Notes.Do one of the following:
Open the file in the Document window and select File� Design Notes.
In the Files panel, right-click (Windows) or Controlclick (Macintosh) the file, and select Design Notes.Note: If the file resides in a remote site, you must first check out or get the file, and then select it in the local folder.In the Basic Info tab, select a status for the document from the Status menu.Click the date icon (above the Notes box) to insert the current local date in your notes.Type comments in the Notes box.Select Show When File Is Opened to make the Design Notes file appear every time the file is opened.In the All Info tab, click the Plus (+) button to add a new key-value pair; select a pair and click the Minus (–) button to removeFor example, you might name a key (in the Name box) and define the value as (in the Value box).Click OK to save the notes.Dreamweaver saves your notes to a folder called _notes, in the same location as the current file. The filename is thedocument’s filename, plus the extension .mno. For example, if the filename is index.html, the associated Design Notes file isnamed index.html.mno.Work with Design NotesAfter you associate a Design Note with a file, you can open the Design Note, change its status, or delete it.Open Design Notes associated with a file
Do one of the following to open the Design Notes:
Open the file in the Document window, then select File� Design Notes.
In the Files panel, right-click (Windows) or Controlclick (Macintosh) the file, then select Design Notes.
In the Notes column of the Files panel, double-click the yellow Design Notes icon.Note: To show the yellow Design Notes icons, select Site� Manage Sites� [your site name]� Edit� Advanced Settings� File View Columns. Select Notes in the list panel and choose the Show option. When you click the Expand button on the Filestoolbar to show both the local and remote site, you have a Notes column in your local site that shows a yellow note icon forany file with a Design Note.Assign a custom Design Notes statusOpen Design Notes for a file or object (see the previous procedure).Click the All Info tab.Click the Plus (+) button.In the Name field, enter the word status.In the Value field, enter the status.If a status value already existed, it’s replaced with the new one.Click the Basic Info tab and note that the new status value appears in the Status popup menu.Note: You can have only one custom value in the status menu at a time. If you follow this procedure again, Dreamweaverreplaces the status value you entered the first time with the new status value you enter.Delete unassociated Design Notes from your siteSelect Site� Manage Sites.Select the site and click Edit.In the Site Definition dialog box, select Design Notes from the category list on the left.Click the Clean Up button.Dreamweaver prompts you to verify that it should delete any Design Notes that are no longer associated with a file in your
364

If you use Dreamweaver to delete a file that has an associated Design Notes file, Dreamweaver deletes the Design Notes file
too; so usually orphan Design Notes files occur only if you delete or rename a file outside of Dreamweaver.Note: If you deselect the Maintain Design Notes option before you click Clean Up, Dreamweaver deletes all Design Notesfiles for your site.More Help topics
Legal Notices | Online Privacy Policy
365
Synchronizing files
To the topSynchronize the files on your local and remote sitesSynchronize the files on your local and remote sitesAfter you’ve created files in your local and remote sites, you can synchronize the files between the two sites.Note: If your remote site is an FTP server (rather than a networked server), then synchronizing your files uses FTP.Before you synchronize your sites, you can verify which files you want to put, get, delete, or ignore. Dreamweaver also confirms which files havebeen updated after you complete the synchronization.Check which files are newer on the local or remote site, without synchronizing
In the Files panel, do one of the following:
Click the Options menu in the upper-right corner, and then select Edit� Select Newer Local or Edit� Select Newer Remote.
In the Files panel, right-click (Windows) or Controlclick (Macintosh), and then select Select� Newer Local or Select� NewerDisplay detailed synchronization information for a particular file
In the Files panel, right-click (Windows) or Controlclick (Macintosh) the file you want information about, and then select Display SynchronizeNote: You must have the Maintain Synchronization Information option selected in the Remote category of the Site Definition dialog box for thisfeature to be available.Synchronize your filesIn the Files panel (Window� Files), select a site from the menu where the current site, server, or drive appears.(Optional) Select specific files or folders or go to the next step to synchronize the entire site.Click the Options menu in the upper-right corner of the Files panel and select Site� Synchronize.You can also click the Synchronize button at the top of the Files panel to synchronize files.In the Synchronize menu, do one of the following:
To synchronize the entire site, select Entire Site Name
To synchronize selected files only, select Selected Local Files Only (or Selected Remote Files Only if the Remote view ofthe Files panel was where you made the most recent selection).Select the direction in which you want to copy the files:Put Newer Files To RemoteUploads all the local files that don’t exist on the remote server or have changed since the lastGet Newer Files From RemoteDownloads all the remote files that don’t exist locally or have changed since the lastGet And Put Newer FilesPlaces the most recent versions of all the files on both the local and the remote sites.Select whether to delete the files on the destination site that don’t have counterparts on the origin site. (This is not available ifyou select Get and Put from the Direction menu.)If you select Put Newer Files to Remote and you select the Delete option, then any files in your remote site for which there areno corresponding local files are deleted. If you select Get Newer Files from Remote, then any files in your local site for whichthere are no corresponding remote files are deleted.Click Preview.Note: Before you can synchronize the files, you must preview the actions Dreamweaver performs to accomplish this task.If the newest version of each chosen file is already in both locations and nothing needs to be deleted, an alert appearsinforming you that no synchronization is necessary. Otherwise, the Synchronize dialog box appears to let you change theactions (put, get, delete, and ignore) for those files before executing the synchronization.
366

Verify the action that will be performed for each file.To change the action for a particular file, select the file, and then click one of the action icons at the bottom of the previewThe Compare action works only if you installed and specified a file comparison tool in Dreamweaver. If the actionicon is grayed out, the action cannot be performed.Mark Selected Files As Already SynchedThis option lets you specify that the selected file or files are alreadyClick OK to synchronize the files. You can view or save the details of the synchronization to a local file.More Help topics
Legal Notices | Online Privacy Policy
367
Understanding document encoding

Document encoding specifies the encoding used for characters in the document. Document encoding is specified in a tag in the head of thedocument; it tells the browser and Dreamweaver how the document should be decoded and what fonts should be used to display the decodedFor example, if you specify Western European (Latin1), this tag is inserted: http-equiv="Content-Type" content="text/html; charset=iso-8859-&#xmeta;&#x-500;1"Dreamweaver displays the document using the fonts you specify in Fonts Preferences for the Western European (Latin1) encoding; a browserdisplays the document using the fonts the browser user specifies for the Western European (Latin1) encoding.If you specify Japanese (Shift JIS), this tag is inserted: http-equiv="Content-Type" content="text/html;&#xmeta;&#x-500; charset=Shift_JIS"Dreamweaver displays the document using the fonts you specify for the Japanese encoding; a browser displays the document using the fonts thebrowser user specifies for the Japanese encodings.You can change document encoding for a page and change the default encoding that Dreamweaver uses to create new documents, including thefonts used to display each encoding.More Help topics[print]Set default document type and encoding
Legal Notices | Online Privacy Policy
368
Linking and navigationTo learn more, view these recommended resources online.Customizing a Spry Menu BarDavid Powers (Jan. 1, 2011)See how you can turn a standard menu bar into something much more elegant by careful planning and a reasonableunderstanding of CSS.
369
About linking and navigation
To the topTo the topAbout linksAbsolute, document-relative, and site root-relative pathsAbout linksAfter you’ve set up a Dreamweaver site to store your website documents and have created HTML pages, you’ll want to create connections fromyour documents to other documents.Dreamweaver provides several ways to create links to documents, images, multimedia files, or downloadable software. You can establish links toany text or image anywhere within a document, including text or images in a heading, list, table, absolutely-positioned element (AP element), orThere are several different ways of creating and managing links. Some web designers prefer to create links to nonexistent pages or files as theywork, while others prefer to create all the files and pages first and then add the links. Another way to manage links is to create placeholder pages,in which you add and test links before completing all your site pages.Absolute, document-relative, and site root-relative pathsUnderstanding the file path between the document you’re linking from and the document or asset you’re linking to is essential to creating links.Each web page has a unique address, called a Uniform Resource Locator (URL). However, when you create a local link (a link from one documentto another on the same site), you generally don’t specify the entire URL of the document you’re linking to; instead, you specify a relative path fromthe current document or from the site’s root folder.There are three types of link paths:
Absolute paths (such as http://www.adobe.com/support/dreamweaver/contents.html).
Document-relative paths (such as dreamweaver/contents.html).
Site root–relative paths (such as /support/dreamweaver/contents.html).Using Dreamweaver, you can easily select the type of document path to create for your links.Note: It is best to use the type of linking you prefer and are most comfortable with—either site root- or document-relative.Browsing to links, as opposed to typing in the paths, ensures that you always enter the right path.Absolute pathsAbsolute paths provide the complete URL of the linked document, including the protocol to use (usually http:// for web pages), for example,http://www.adobe.com/support/dreamweaver/contents.html. For an image asset, the complete URL might be something likeYou must use an absolute path to link to a document or asset on another server. You can also use absolute paths for local links (to documents inthe same site), but that approach is discouraged—if you move the site to another domain, all of your local absolute-path links will break. Usingrelative paths for local links also provides greater flexibility if you need to move files within your site.Note: When inserting images (not links), you can use an absolute path to an image on a remote server (that is, an image that is not available onthe local hard drive).Document-relative pathsDocument-relative paths are usually best for local links in most websites. They’re particularly useful when the current document and the linkeddocument or asset are in the same folder and are likely to remain together. You can also use a document-relative path to link to a document orasset in another folder by specifying the path through the folder hierarchy from the current document to the linked document.The basic idea of document-relative paths is to omit the part of the absolute path that is the same for both the current document and the linkeddocument or asset, providing only the portion of the path that differs.For example, suppose you have a site with the following structure:
370

To link from contents.html to hours.html (both in the same folder), use the relative path hours.html.
To link from contents.html to tips.html (in the resources subfolder), use the relative path resources/tips.html. At each slash (/),you move down one level in the folder hierarchy.
To link from contents.html to index.html (in the parent folder, one level above contents.html), use the relative path ../index.html.Two dots and a slash (../) moves you up one level in the folder hierarchy.
To link from contents.html to catalog.html (in a different subfolder of the parent folder), use the relative path../products/catalog.html. Here, ../ moves you up to the parent folder, and products/ moves you down to the products subfolder.When you move files as a group—for example, when you move an entire folder, so that all the files inside that folder retain thesame relative paths to each other—you don’t need to update document-relative links between those files. However, when youmove an individual file that contains document-relative links, or an individual file targeted by a document-relative link, you doneed to update those links. (If you move or rename files using the Files panel, Dreamweaver updates all relevant linksSite root–relative pathsSite root–relative paths describe the path from the site’s root folder to a document. You may want to use these paths if you are working on a largewebsite that uses several servers, or one server that hosts several sites. However, if you are not familiar with this type of path, you may want tostick to document-relative paths.A site root–relative path begins with a leading forward slash, which stands for the root folder of the site. For example, /support/tips.html is a siteroot–relative path to a file (tips.html) in the support subfolder of the site’s root folder.A site root–relative path is often the best way to specify links if you frequently move HTML files from one folder to another in your website. Whenyou move a document that contains site root–relative links, you don’t need to change the links since the links are relative to the site root, and notto the document itself; for example, if your HTML files use site root–relative links for dependent files (such as images), then if you move an HTMLfile, its dependent-file links are still valid.However, when you move or rename the documents targeted by site root–relative links, you must update those links, even if the documents’ pathsrelative to each other haven’t changed. For example, if you move a folder, you must update all site root–relative links to files in that folder. (If youmove or rename files using the Files panel, Dreamweaver updates all relevant links automatically.)More Help topics
Legal Notices | Online Privacy Policy
371
Image maps
To the topTo the topAbout image mapsInsert client-side image mapsModify image map hotspotsAbout image mapsAn image map is an image that has been divided into regions called ; when a user clicks a hotspot, an action occurs (for example, a newfile opens).Client-side image maps store the hypertext link information in the HTML document—not in a separate map file as server-side image maps do.When a site visitor clicks a hotspot in the image, the associated URL is sent directly to the server. This makes client-side image maps faster thanserver-side image maps, because the server does not need to interpret where the visitor clicked. Client-side image maps are supported byNetscape Navigator 2.0 and later versions, NCSA Mosaic 2.1 and 3.0, and all versions of Internet Explorer.Dreamweaver does not alter references to server-side image maps in existing documents; you can use both client-side image maps and server-side image maps in the same document. However, browsers that support both types of image maps give priority to client-side image maps. Toinclude a server-side image map in a document, you must write the appropriate HTML code.Insert client-side image mapsWhen you insert a client-side image map, you create a hotspot area and then define a link that opens when a user clicks the hotspot area.Note: You can create multiple hotspot areas, but they are part of the same image map.In the Document window, select the image.In the Property inspector, click the expander arrow in the lower-right corner to see all properties.In the Map Name box, enter a unique name for the image map. If you are using multiple image maps in the same document,make sure each map has a unique name.To define the image map areas, do one of the following:
Select the circle tool
and drag the pointer over the image to create a circular hotspot.
Select the rectangle tool
and drag the pointer over the image to create a rectangular hotspot.
Select the polygon tool
and define an irregularly shaped hotspot by clicking once for each corner point. Click the arrowtool to close the shape.After you create the hotspot, the hotspot Property inspector appears.In the hotspot Property inspector’s Link box, click the folder icon
to browse to and select the file you want to open when theuser clicks the hotspot, or type the path.In the Target popup menu, select the window in which the file should open or type its name.The names of all the frames you’ve named in the current document appear in the popup list. If you specify a frame thatdoesn’t exist, the linked page loads into a new window that has the name you specified. You can also select from the followingreserved target names:
loads the linked file into a new, unnamed browser window.
loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containingthe link is not nested, the linked file loads into the full browser window.
_self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need tospecify it.
_top loads the linked file into the full browser window, thereby removing all frames.Note: The target option isn’t available until the selected hotspot contains a link.In the Alt box, type alternative text for display in textonly browsers or browsers that download images manually. Somebrowsers display this text as a tooltip when the user moves the pointer over the hotspot.Repeat steps 4 through 7 to define additional hotspots in the image map.When you finish mapping the image, click a blank area in the document to change the Property inspector.
372

To the topModify image map hotspotsYou can easily edit the hotspots you create in an image map. You can move a hotspot area, resize hotspots, or move a hotspot forward or back inan absolutely-positioned element (AP element).You can also copy an image with hotspots from one document to another, or copy one or more hotspots from an image and paste them on anotherimage; hotspots associated with the image are also copied to the new document.Select multiple hotspots in an image mapUse the pointer hotspot tool to select a hotspot.Do one of the following:
Shift-click the other hotspots you want to select.
Press Control+A (Windows) or Command+A (Macintosh) to select all of the hotspots.Move a hotspotUse the pointer hotspot tool to select the hotspot.Do one of the following:
Drag the hotspot to a new area.
Use the Control + arrow keys to move a hotspot by 10 pixels in the selected direction.
Use the arrow keys to move a hotspot by 1 pixel in the selected direction.Resize a hotspotUse the pointer hotspot tool
to select the hotspot.Drag a hotspot selector handle to change the size or shape of the hotspot.
Legal Notices | Online Privacy Policy
373
Jump menus
To the topTo the topTo the topTo the topAbout jump menusInsert a jump menuEdit jump menu itemsTroubleshooting jump menusAbout jump menusjump menu is a popup menu in a document, visible to your site visitors, listing links to documents or files. You can create links to documents inyour website, links to documents on other websites, email links, links to graphics, or links to any file type that can be opened in a browser.Each option in a jump menu is associated with a URL. When users choose an option, they are redirected (“jump”) to the associated URL. Jumpmenus are inserted within the Jump Menu form object.A jump menu can contain three components:
(Optional) A menu selection prompt, such as a category description for the menu items, or instructions, such as “Choose one”.
(Required) A list of linked menu items: a user selects an option and a linked document or file opens.
(Optional) A Go button.Insert a jump menuOpen a document, and then place the insertion point in the Document window.Do one of the following:
Select Insert� Form� Jump Menu.
In the Forms category of the Insert panel, click the Jump Menu button.Complete the Insert Jump menu dialog box and click OK. Here is a partial list of options:Plus and Minus buttonsClick Plus to insert an item; click Plus again to add another one. To delete an item, select it andclick Minus.Arrow buttonsSelect an item and click the arrows to move it up or down in the list.Type the name of an unnamed item. If your menu includes a selection prompt (such as “Choose one”), type it here asthe first menu item (if so, you must also choose the Select First Item After URL Change option at the bottom).When Selected Go To URLBrowse to the target file or type its path.Open URLs InSpecify whether to open the file in the same window or in a frame. If the frame you want to target doesn’tappear in the menu, close the Insert Jump Menu dialog box and name the frame.Insert Go Button After MenuSelect to insert a Go button rather than a menu selection prompt.Select First Item After URL ChangeSelect if you inserted a menu selection prompt (“Choose one”) as the first menu item.Edit jump menu itemsYou can change the order of items in the menu or the file an item links to, and you can add, delete, or rename an item.To change the location in which a linked file opens, or to add or change a menu selection prompt, you must apply the Jump Menu behavior fromthe Behaviors panel.Open the Property inspector (Window� Properties) if it isn’t already open.In the Document window’s Design view, click the jump menu object to select it.In the Property inspector, click the List Values button.Use the List Values dialog box to make your changes to the menu items, and then click OK.
374

After a user selects a jump menu item, there is no way to reselect that menu item if the user navigates back to that page, or if the Open URL In
box specifies a frame. There are two ways to work around this problem:
Use a menu selection prompt, such as a category, or a user instruction, such as “Choose one”. The menu selection prompt isreselected automatically after each menu selection.
Use a Go button, which allows a user to revisit the currently chosen link. When you use a Go button with a jump menu, the Gobutton becomes the only mechanism that “jumps” the user to the URL associated with the selection in the menu. Selecting amenu item in the jump menu no longer re-directs the user automatically to another page or frame.Note: Select only one of these options per jump menu, in the Insert Jump Menu dialog box, because they apply to an entirejump menu.More Help topics
Legal Notices | Online Privacy Policy
375
Link to an external CSS style sheet

When you edit an external CSS style sheet, all documents linked to that CSS style sheet are updated to reflect those edits. You can export theCSS styles found in a document to create a new CSS style sheet, and attach or link to an external style sheet to apply the styles found there.You can attach to your pages any style sheet that you create or copy into your site. In addition, Dreamweaver is shipped with prebuilt style sheetsthat can be automatically moved into your site and attached to your pages.Open the CSS Styles panel by doing one of the following:
Select Window� CSS Styles.
Press Shift + F11.In the CSS Styles panel, click the Attach Style Sheet button. (It’s in the lower-right corner of the panel.)Do one of the following:
Click Browse to browse to an external CSS style sheet.
Type the path to the style sheet in the File/URL box.For Add As, select one of the options:
To create a link between the current document and an external style sheet, select Link. This creates a link tag in theHTML code, and references the URL where the published style sheet is located. This method is supported by bothMicrosoft Internet Explorer and Netscape Navigator.
You cannot use a link tag to add a reference from one external style sheet to another. If you want to nest style sheets, youmust use an import directive. Most browsers also recognize the import directive within a page (rather than just within stylesheets). There are subtle differences in how conflicting properties are resolved when overlapping rules exist within externalstyle sheets that are linked versus imported to a page. If you want to import, rather than link to, an external style sheet,select Import.In the Media popup menu, specify the target medium for the style sheet.For more information on media-dependent style sheets, see the World Wide Web Consortium website atClick the Preview button to verify that the style sheet applies the styles you want to the current page.If the styles applied are not what you expect them to be, click Cancel to remove the style sheet. The page will revert to itsprevious appearance.Click OK.More Help topicsCreate a page based on a Dreamweaver sample file
Legal Notices | Online Privacy Policy
376
Navigation bars

To the topAbout navigation barsAbout navigation barsThe navigation bar feature has been deprecated as of Dreamweaver CS5.Adobe recommends using the Spry Menu Bar widget if you want to create a navigation bar.More Help topicsWorking with the Spry Menu Bar widget
Legal Notices | Online Privacy Policy
377
Set CSS link properties for an entire page

You can specify fonts, font sizes, colors, and other items for your links. By default, Dreamweaver creates CSS rules for your links and appliesthem to all links you use on the page. (The rules are embedded in the section of the page.)Note: If you want to customize individual links on a page, you need to create individual CSS rules, and then apply them to the links separately.Select Modify� Page Properties, or click the Page Properties button in the text Property inspector.Choose the Links (CSS) category and set the options.Link FontSpecifies the default font family to use for link text. By default, Dreamweaver uses the font family specified for theentire page unless you specify another font.Specifies the default font size to use for link text.Link ColorSpecifies the color to apply to link text.Visited LinksSpecifies the color to apply to visited links.Rollover LinksSpecifies the color to apply when a mouse (or pointer) hovers over a link.Active LinksSpecifies the color to apply when a mouse (or pointer) clicks on a linkUnderline StyleSpecifies the underline style to apply to links. If your page already has an underline link style defined(through an external CSS style sheet for example), the Underline Style menu defaults to a “don’t change” option. This optionalerts you to a link style that has been defined. If you modify the underline link style using the Page Properties dialog box,Dreamweaver will change the previous link definition.
Legal Notices | Online Privacy Policy
378
Troubleshooting links
To the topTo the topFind broken, external, and orphaned linksFix broken linksFind broken, external, and orphaned linksUse the Check Links feature to search for broken links and files (files that still exist in the site but that aren’t linked to by any other filesin the site). You can search an open file, a portion of a local site, or an entire local site.Dreamweaver verifies links only to documents within the site; Dreamweaver compiles a list of external links in the selected document ordocuments but does not verify them.You can also identify and delete files that are no longer used by other files in your site.Check links in the current documentSave the file to a location within your local Dreamweaver site.Select File� Check Page� Links.The Broken Links report appears in the Link Checker panel (in the Results panel group).In the Link Checker panel, select External Links from the Show popup menu to view another report.The External Links report appears in the Link Checker panel (in the Results panel group).You can check for orphaned files when you check links across an entire site.To save the report, click the Save Report button in the Link Checker panel. The report is a temporary file; it will be lost if youdon’t save it.Check links in part of a local siteIn the Files panel, select a site from the Current Sites popup menu.In Local view, select the files or folders to check.Initiate the check by doing one of the following:
Right-click (Windows) or Controlclick (Macintosh) one of the selected files, and then select Check Links� SelectedFiles/Folders from the context menu.
Select File� Check Page� Links.The Broken Links report appears in the Link Checker panel (in the Results panel group).In the Link Checker panel, select External Links from the Show popup menu to view another report.The External Links report appears in the Link Checker panel (in the Results panel group).You can check for orphaned files when you check links across an entire site.To save a report, click the Save Report button in the Link Checker panel.Check links across the entire siteIn the Files panel, select a site from the Current Sites popup menu.Select Site� Check Links Sitewide.The Broken Links report appears in the Link Checker panel (in the Results panel group).In the Link Checker panel, select External Links or Orphaned Files from the Show popup menu to view another report.A list of files that fit the report type you selected appears in the Link Checker panel.Note: If you select Orphaned Files as your report type, you can delete orphaned files from the Link Checker panel directly byselecting a file from the list and pressing the Delete key.To save a report, click the Save Report button in the Link Checker panel.Fix broken links
379

After you run a links reports, you can fix broken links and image references directly in the Link Checker panel, or you can open files from the listand fix links in the Property inspector.Fix links in the Link Checker panelRun a link check report.In the Broken Links column (not the Files column) of the Link Checker panel (in the Results panel group), select the brokenA folder icon appears next to the broken link.Click the folder icon next
to the broken link and browse to the correct file, or type the correct path and filename.Press Tab or Enter (Windows) or Return (Macintosh).If there are other broken references to this same file, you are prompted to fix the references in the other files as well. ClickYes to have Dreamweaver update all the documents on the list that reference this file. Click No to have Dreamweaver updatethe current reference only.Note: If Enable File Check In And Check Out is enabled for the site, Dreamweaver attempts to check out files that requirechanges. If it cannot check out a file, Dreamweaver displays a warning dialog box and leaves broken references unchanged.Fix links in the Property inspectorRun a link check report.In the Link Checker panel (in the Results panel group), double-click an entry in the File column.Dreamweaver opens the document, selects the broken image or link, and highlights the path and filename in the Propertyinspector. (If the Property inspector is not visible, select Window� Properties to open it.)To set a new path and filename in the Property inspector, click the folder icon
to browse to the correct file, or type over thehighlighted text.If you are updating an image reference and the new image appears at the incorrect size, click the W and H labels in theProperty inspector or click the Refresh button to reset the height and width values.Save the file.As links are fixed, their entries disappear from the Link Checker list. If an entry still appears in the list after you enter a newpath or filename in the Link Checker (or after you save changes in the Property inspector), Dreamweaver cannot find the newfile and still considers the link broken.More Help topics
Legal Notices | Online Privacy Policy
380
Coding
381
Collapsing code
To the topTo the topAbout collapsing codeCollapse and expand code fragmentsPaste and move collapsed code fragmentsAbout collapsing codeYou can collapse and expand code fragments so that you can view different sections of your document without having to use the scroll bar. Forexample, to see all of the CSS rules in the tag that apply to a tag farther down the page, you can collapse everything between the tag and the tag so that you can see both sections of code at once. Although you can select code fragments by making selections in Designview or Code view, you can collapse code only in Code view.Note: Files created from Dreamweaver templates display all code as fully expanded, even if the template file (.dwt) contains collapsed codeCollapse and expand code fragmentsWhen you select code, a set of collapse buttons is displayed next to the selection (Minus symbols in Windows; vertical triangles on the Macintosh).Click the buttons to collapse and expand the selection. When the code is collapsed, the collapse buttons change to an expand button (a Plusbutton in Windows; a horizontal triangle on the Macintosh).Sometimes, the exact fragment of code that you selected is not collapsed. Dreamweaver uses “smart collapse” to collapse the most common andvisually pleasing selection. For example, if you selected an indented tag and then selected the indented spaces before the tag as well,Dreamweaver would not collapse the indented spaces, because most users would expect their indentations to be preserved. To disable smartcollapse and force Dreamweaver to collapse exactly what you selected, hold down the Control key before collapsing your code.Also, a warning icon on collapsed code fragments is displayed if a fragment contains errors or code that is unsupported by certain browsers.You can also collapse the code by Altclicking (Windows) or Option-clicking (Macintosh) one of the collapse buttons, or by clicking the CollapseSelection button in the Coding toolbar.Select some code.Select Edit� Code Collapse, and select any of options.Select a collapsed code fragment
In Code view, click the collapsed code fragment.Note: When you make a selection in Design view that is part of a collapsed code fragment, the fragment is automatically expanded in Code view.When you make a selection in Design view that is a complete code fragment, the fragment remains collapsed in Code view.View the code in a collapsed code fragment without expanding it
Hold the mouse pointer over the collapsed code fragment.Use keyboard shortcuts to collapse and expand code
You can also use the following keyboard shortcuts:Collapse SelectionCollapse Outside SelectionExpand SelectionCollapse Full TagCollapse Outside Full TagExpand All
382

To the topPaste and move collapsed code fragmentsYou can copy and paste collapsed code fragments, or move collapsed code fragments by dragging.Copy and paste a collapsed code fragmentSelect the collapsed code fragment.Select Edit� Copy.Place the insertion point where you want to paste the code.Select Edit� Paste.Note: You can paste into other applications, but the collapsed state of the code fragment is not preserved.Drag a collapsed code fragmentSelect the collapsed code fragment.Drag the selection to the new location.To drag a copy of the selection, Control-drag (Windows) or Altdrag (Macintosh).Note: You cannot drag to other documents.More Help topics
Legal Notices | Online Privacy Policy
383
Editing code in Design view
To the topTo the topTo the topTo the topTo the topAbout editing code in Design viewSelecting child tags in Design viewEdit code with the Property inspectorEdit CFML with the Property inspectorChange attributes with the Tag inspectorQuick Tag Editor overviewEdit code with the Quick Tag EditorUse the hints menu in the Quick Tag EditorEdit code with the tag selectorWrite and edit scripts in Design viewEdit scripts on the page by using the Property inspectorUsing JavaScript behaviorsAbout editing code in Design viewDreamweaver lets you visually create and edit web pages without worrying about the underlying source code, but there are times when you mightneed to edit the code for greater control or to troubleshoot your web page. Dreamweaver lets you edit some code while working in Design view.This section is designed for people who prefer to work in Design view, but who also want quick access to the code.Selecting child tags in Design viewIf you select an object in Design view that contains child tags—for example, an HTML table—you can quickly select the first child tag of that objectby selecting Edit� Select Child.Note: This command is only enabled in Design view.For example, the tag normally has child tags. If you select a tag in the tag selector, you can select the first row in the table byselecting Edit� Select Child. Dreamweaver selects the first tag in the tag selector. Since the tag itself has child tags, namely selecting Edit� Select Child again selects the first cell in the table.Edit code with the Property inspectorYou can use the Property inspector to inspect and edit the attributes of text or of objects on your page. The properties shown in the Propertyinspector generally correspond to attributes of tags; changing a property in the Property inspector generally has the same effect as changing thecorresponding attribute in Code view.Note: The Tag inspector and the Property inspector both let you view and edit a tag’s attributes. The Tag inspector lets you to view and editevery attribute associated with a given tag. The Property inspector shows only the most common attributes, but provides a richer set of controls forchanging those attributes’ values, and lets you edit certain objects (such as table columns) that don’t correspond to specific tags.Click in the text or select an object on the page.The Property inspector for the text or object appears below the Document window. If the Property inspector is not visible,select Window� Properties.Make changes to the attributes in the Property inspector.Edit CFML with the Property inspectorUse the Property inspector to inspect and modify ColdFusion markup in Design view.In the Property inspector, click the Attributes button to edit the tag’s attributes or to add new ones.If the tag holds content between its opening and closing tags, click the Content button to edit the content.The Content button appears only if the selected tag is not an empty tag (that is, if it has both an opening and a closing tag).If the tag contains a conditional expression, make changes to it in the Expression box.
384
To the topTo the top
Change attributes with the Tag inspector
Use the Tag inspector to edit or add attributes and attributes’ values. The Tag inspector lets you edit tags and objects by using a property sheetsimilar to the ones found in other integrated development environments (IDEs).Do one of the following in the Document window:
In Code view (or the Code inspector), click anywhere in a tag’s name or in its contents.
In Design view, select an object, or select a tag in the Tag Selector.Open the Tag inspector (Window� Tag Inspector), and select the Attributes tab.The selection’s attributes and their current values appear in the Tag inspector.Do any of the following in the Tag inspector:
To view the attributes organized by category, click the Show Category View button
.
To view the attributes in an alphabetical list, click the Show List View button
.
To change the attribute’s value, select the value and edit it.
To add a value for an attribute with no value, click in the attribute-value column to the right of the attribute and add a
If the attribute takes pre-defined values, select a value from the popup menu (or the color picker) to the right of theattribute-value column.
If the attribute takes a URL value, click the Browse button or use the Point-To-File icon to select a file, or type the URL inthe box.
If the attribute takes a value from a source of dynamic content (such as a database), click the Dynamic Data button to theright of the attribute-value column. Then select a source.
To delete the attribute’s value, select the value and press Backspace (Windows) or Delete (Macintosh).
To change the name of an attribute, select the attribute name and edit it.Note: If you change the name of a standard attribute and then add a value for that attribute, the attribute and its newvalue move to the appropriate category.
To add a new attribute not already listed, click in the empty space below the last listed attribute name and type a newattribute name.Press Enter (Windows) or Return (Macintosh), or click elsewhere in the Tag inspector, to update the tag in your document.Quick Tag Editor overviewYou use the Quick Tag Editor to quickly inspect, insert, and edit HTML tags without leaving Design view.If