Operation Manual

ManualsBrandsAdobe ManualsSoftwareDreamweaver CC - 2015

161

162

163

164

165

166

167

168

169

170

Table Of Contents

Legal notices
Contents
Chapter 1: What's new
- New features summary
Chapter 2: Workspace and workflow
- Dreamweaver workflow and workspace
- Customizing the Dreamweaver workspace
- Working in the Document window
- Using toolbars, inspectors, and context menus
- Use the Insert panel
- CSS Designer panel
- DOM panel
  - How to use the DOM panel
  - Edit HTML structure using the DOM panel
- Search files based on filename or content | Mac OS
- Zoom in and out
- Keyboard shortcuts
- Optimizing the workspace for visual development
- CEF integration
  - Enhanced user experience
  - Architectural changes
Chapter 3: Site management
- About Dreamweaver sites
  - What is a Dreamweaver “site”?
  - Understanding local and remote folder structure
- About dynamic sites
- Set up a local version of your site
- Connect to a remote server
- Manage Sites dialog box options
  - Manage Sites dialog box options (CS6 and later)
  - Manage Sites dialog box options (CS5 and CS5.5)
- Set up a testing server
- Version Control and Advanced settings
  - Version Control category
  - Advanced Settings category
    - Local Info
    - Cloaking and other categories
- Import and export Dreamweaver site settings
  - Export your site settings
  - Import site settings
- Edit an existing remote website
- Set site preferences for transferring files
- Specify proxy server settings
Chapter 4: File management
- Creating and opening documents
- Managing files and folders
- Getting and putting files to and from your server
- Checking in and checking out files
- Synchronizing files
  - Synchronize the files on your local and remote sites
- Comparing files for differences
- Cloaking files and folders in your Dreamweaver site
- Storing file information in Design Notes
- Testing your Dreamweaver site
  - Site testing guidelines
  - Use reports to test your site
    - Run reports to test a site
    - Use and save a report
Chapter 5: Layout and design
- Using visual aids for layout
- Using Frames
- Laying out pages with CSS
- Work with Bootstrap files
- Visual Media Queries
- Responsive design using fluid grid layouts
- Presenting content with tables
- Using jQuery UI widgets in Dreamweaver
  - Insert a jQuery widget
  - Modifying jQuery widgets
- Using jQuery effects in Dreamweaver
- Colors
  - Web-safe colors
  - Use the color picker
Chapter 6: CSS
- Understanding Cascading Style Sheets
  - About Cascading Style Sheets
  - About CSS rules
  - About cascading styles
  - About text formatting and CSS
  - About Shorthand CSS properties
- CSS Designer panel
  - About the CSS Designer panel
  - Create and attach style sheets
  - Define media queries
  - Define CSS Selectors
    - Copy-paste styles
    - Rearrange selectors
  - Set CSS properties
  - Identify page elements associated with a CSS Selector (13.1)
    - Disable Live Highlight
- Set CSS Styles preferences
- Create a CSS rule
- Set CSS properties
  - Define CSS type properties
  - Define CSS style background properties
  - Define CSS style block properties
  - Define CSS style box properties
  - Define CSS style border properties
  - Define CSS style list properties
  - Define CSS style positioning properties
  - Define CSS style extension properties
- Edit a CSS rule
  - Edit 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 selector
- Add a property to a CSS rule
- Apply, remove, or rename CSS class styles
  - Apply a CSS class style
  - Remove a class style from a selection
  - Rename a class style
- Move/export CSS rules
  - Move/export CSS rules to a new style sheet
  - Move/export CSS rules to an existing style sheet
  - Rearrange or move CSS rules by dragging
  - Select multiple rules before moving them
- Convert inline CSS to a CSS rule
- Link to an external CSS style sheet
- Edit a CSS style sheet
- Format CSS code
  - Set CSS code formatting preferences
  - Format CSS code in a CSS style sheet manually
  - Format embedded CSS code manually
- Disable/Enable CSS
- Inspect CSS in Live view
- Check for cross-browser CSS rendering issues
  - Run a browser compatibility check
  - Select the element affected by a found issue
  - Jump to the next or previous found issue in the code
  - Select browsers for Dreamweaver to check against
  - Exclude an issue from the browser compatibility check
  - Edit the Ignored Issues list
  - Save a browser compatibility check report
  - View a browser compatibility check report in a browser
  - Open the Adobe CSS Advisor website
- Use Design-Time style sheets
- Working with div tags
  - Insert and edit div tags
  - CSS layout blocks
  - Working with AP elements
- Apply gradients to background
  - Rendering gradients in web browsers
  - Swap background images and gradients
- CSS3 transition effects
  - Create and apply CSS3 transition effect
  - Edit CSS3 transition effects
  - Disable CSS shorthand for Transitions
- Use Dreamweaver sample style sheets
- The CSS Styles panel
  - The CSS Styles panel in Current mode
  - The CSS Styles panel in All mode
  - CSS Styles panel buttons and views
  - Open the CSS Styles panel
Chapter 7: Page content and assets
- Set page properties
  - Set CSS page font, background color, and background image properties
  - Set HTML page properties
- Set CSS link properties for an entire page
- Set CSS heading properties for an entire page
- Set title and encoding properties for a page
- Use a tracing image to design apage
- Understanding document encoding
- Select and view elements in the Document window
  - Select elements
  - View the HTML code associated with the selected text or object
  - Show or hide marker icons for invisible elements
  - Set invisible elements preferences
- Zoom in and out
  - Zoom in or out on a page
  - Edit a page after zooming
  - Pan a page after zooming
  - Fill the Document window with a selection
  - Fill the Document window with an entire page
  - Fill the Document window with the entire width of a page
- Set download time and size preferences
- Working with text
  - Add text to a document
  - Insert special characters
  - Add space between characters
    - Insert a non-breaking space
    - Set a preference to add non-breaking spaces
  - Add paragraph spacing
    - Add a paragraph return
    - Add a line break
  - Create bulleted and numbered lists
  - Search for and replace text
  - Define abbreviations and acronyms
  - Set copy and paste preferences
- Arabic and Hebrew text
  - Bi-directional text flow
  - Tag editor
  - Text direction and Unicode-bidi in CSS Rules
  - Table properties
  - Div properties
- Edit in Live View
  - Element Display
    - Associate HTML elements with classes and IDs
  - Quick Property Inspector
    - Quick Property Inspector for images
    - Quick Property Inspector for text
  - Live View Property Inspector
  - Edit HTML attributes
  - Edit text directly in Live View
    - Format text
  - Insert elements directly in Live View
  - Marquee selection
  - Selection and dragging-and-dropping of elements
  - Keyboard navigation in Live View
    - Traverse page elements
    - Traverse selectors
  - Disable editing in Live View
  - Unsupported scenarios
- DOM panel
  - How to use the DOM panel
  - Edit HTML structure using the DOM panel
- Set text properties in the Property inspector
  - About formatting text (CSS versus HTML)
  - Edit CSS rules in the Property inspector
  - Set HTML formatting in the Property inspector
  - Rename a class from the HTML Property inspector
- Spell check a web page
- Import tabular data
- Import Microsoft Office documents (Windows only)
- Create a link to a Word or Excel document
- Use HTML Formatting
  - Format paragraphs
  - Change the color of text
    - Define default text colors for a page
    - Change the color of selected text
  - Align text
    - Align text on a page
    - Center page elements
  - Indent text
  - Apply font styles
- Use horizontal rules
  - Create a horizontal rule
  - Modify a horizontal rule
- Modify font combinations
  - Modify font combinations
  - Add a new combination to the font list
- Add Edge Web Fonts to the Font list
  - Add Adobe Edge Web Fonts to the Font list
  - Add local web fonts to the Font list
  - Create custom font stacks
  - Preview inserted fonts
  - Update web font script tag across files
  - Update web font script tag on a page
- Insert dates
- Working with assets
  - Assets panel overview
  - Add an asset to a document
  - Apply color to text using the Assets panel
  - Assign URLs to images or text
  - Select and edit assets
    - Select multiple assets
    - Edit an asset
  - Reuse assets in another site
    - Locate an asset file in the Files panel
    - Copy assets from the Asset panel to another site
- Creating and managing a list of favorite assets
  - Managing favorite assets
  - Add or remove favorite assets
  - Create a nickname for a favorite asset
  - Group assets in a Favorites folder
- Insert and edit images
  - Insert an image
    - Set image properties
    - Edit image accessibility attributes in code
  - Visually resize an image
  - Insert an image placeholder
  - Replace an image placeholder
  - Set image placeholder properties
  - Edit images in Dreamweaver
  - Create a rollover image
  - Use an external image editor
  - Applying behaviors to images
- Adding media objects
  - Insert and edit media objects
  - Start an external editor for media files
  - Specify the editor to start from Dreamweaver
  - Use Design Notes with media objects
  - Insert Shockwave movies
  - Add video (non-FLV)
  - Insert plug-in content
  - Troubleshooting plug-ins
  - Insert an ActiveX control
    - ActiveX properties
  - Insert a Java applet
    - Java applet properties
  - Using behaviors to control media
  - Use parameters to control media objects
- Adding video
  - Embed videos in web pages (HTML5)
  - Inserting FLV files
- Insert HTML5 video
  - Insert HTML5 video
  - Preview the video in browser
- Inserting SWF files
  - About FLA, SWF, and FLV file types
  - Insert and preview SWF files
  - Insert FlashPaper documents
- Adding web widgets
- Adding Sound
  - Audio file formats
  - Link to an audio file
  - Embed a sound file
- Insert HTML5 audio
  - Insert HTML5 audio
  - Preview the audio in browser
- Automating tasks
  - Task automation
  - Use the History panel
  - Repeat steps
  - Apply steps in the History panel to objects
    - Apply steps to one other object
    - Apply steps to multiple objects
  - Copy and paste steps between documents
  - Create and use commands from history steps
  - Record and save commands
- About assets and libraries
  - About assets
  - About library items
- Working with library items
  - Create a library item
    - Create a library item based on a selection
    - Create an empty library item
  - Insert a library item into a document
  - Edit library items and update documents
  - Customize highlighting of library items
    - Change the highlight color of library items
    - To show or hide highlighting in the Document window
  - Edit the properties of a library item
  - Make library items editable in a document
  - Edit a behavior in a library item
- Working with Photoshop and Dreamweaver
  - About Photoshop integration
  - About Smart Objects and Photoshop-Dreamweaver workflows
  - Create a Smart Object
  - Update a Smart Object
  - Update multiple Smart Objects
  - Resize a Smart Object
  - Edit a Smart Object’s original Photoshop file
  - Smart Object states
  - Copy and paste a selection from Photoshop
  - Edit pasted images
  - Setting Image Optimization dialog box options
Chapter 8: Linking and navigation
- About linking and navigation
  - About links
  - Absolute, document-relative, and site root-relative paths
- Linking
- Jump menus
- Navigation bars
  - About navigation bars
- Image maps
- Troubleshooting links
  - Find broken, external, and orphaned links
  - Fix broken links
    - Fix links in the Link Checker panel
    - Fix links in the Property inspector
Chapter 9: Previewing
- Preview and inspect web pages on multiple devices
- Previewing pages
  - Previewing pages in Dreamweaver
  - Previewing pages in browsers
    - Preview in a browser
    - Set browser preview preferences
Chapter 10: Coding
- General information about coding in Dreamweaver
- Setting up your coding environment
- Setting coding preferences
- Writing and editing code
- Collapsing code
- Lint code
- Optimize code
- Editing code in Design view
- Working with head content for pages
- Working with server-side includes
- Managing tag libraries
- Importing custom tags into Dreamweaver
Chapter 11: Javascript
- Using JavaScript behaviors (general instructions)
- Applying built-in JavaScript behaviors
Chapter 12: Cross-product
- Add-Ons
- Cross-application integration
  - About Photoshop, Flash, and Fireworks integration
- Working with Fireworks and Dreamweaver
- Working with Flash and Dreamweaver
  - Edit a SWF file from Dreamweaver in Flash
- Working with Adobe Bridgeand Dreamweaver
- Working with Device Central and Dreamweaver
  - Using Adobe Device Central with Dreamweaver
  - Tips for creating Dreamweaver web content for mobile devices
- Working with ConnectNow and Dreamweaver
  - Working with ConnectNow
- AIR Extension for Dreamweaver
- Using Dreamweaver with Adobe Online services
  - BrowserLab
  - Business Catalyst InContext Editing
- In-App updates
- Extract in Dreamweaver CC
- Dreamweaver-Business Catalyst integration
- Import Microsoft Office documents (Windows only)
Chapter 13: Templates
- About Dreamweaver templates
- Recognizing templates and template-based documents
- Creating a Dreamweaver template
- Creating editable regions in templates
- Creating repeating regions in templates
- Using optional regions in templates
- Defining editable tag attributes in templates
  - Specify editable tag attributes in a template
  - Make an editable tag attribute uneditable
- Creating a nested template
- Editing, updating, and deleting templates
- Exporting and importing template content
- Applying or removing a template from an existing document
  - Apply a template to an existing document
  - Detach a document from a template
- Editing content in a template-based document
- Template syntax
- Setting authoring preferences for templates
  - Customize code coloring preferences for a template
  - Set highlighting preferences for template regions
    - Change template highlight colors
    - View highlight colors in the Document window
Chapter 14: Mobile and multiscreen
- Creating media queries
- Change page orientation for mobile devices
- Creating web applications for mobile devices
Chapter 15: XML
- About XML and XSLT
- Performing XSL transformationson the server
- Performing XSL transformationson the client
- Missing character entities for XSLT
  - Specify a missing character entity
    - Specify a missing entity definition
    - Add entity definitions to the XSL files Dreamweaver creates by default
Chapter 16: Dynamic sites, pages and web forms
- Understanding web applications
  - About web applications
  - Common uses for web applications
  - Web application example
  - How a web application works
  - Processing static web pages
  - Processing dynamic pages
  - Accessing a database
  - Authoring dynamic pages
  - Web application terminology
- Set up your computer for application development
  - What you need to build web applications
  - Web server basics
  - Choosing a web server
  - Choosing an application server
  - Choosing a database
  - Setting up a ColdFusion development environment
  - Setting up a PHP development environment
  - Setting up an ASP development environment
  - Creating a root folder for the application
  - About defining a Dreamweaver site
- Database connections for ColdFusion developers
  - Connecting to a ColdFusion database
  - Create or modify a ColdFusion data source
    - Create or modify a ColdFusion data source if running ColdFusion MX 7 or later
    - Create or modify a ColdFusion data source if running ColdFusion MX 6.1 or 6.0
  - Connecting to the database in Dreamweaver
- Database connections for ASP developers
  - About ASP database connections
  - About OLE DB connections
  - About connection strings
  - Create a connection using a local DSN
  - Create a connection using a remote DSN
  - Create a connection using a connection string
  - Edit or delete a database connection
    - Edit a connection
    - Delete a connection
- Database connections for PHP developers
  - About PHP database connections
  - Connect to a database
  - Edit or delete a database connection
    - Edit a connection
    - Delete a connection
- Troubleshooting database connections
  - Troubleshooting permissions problems
    - Check or change the database file permissions (Windows XP)
    - Check or change the database file permissions (Windows 2000)
  - Troubleshooting Microsoft error messages
  - Troubleshooting MySQL error messages
- Removing connection scripts
  - Using the Remove Connection Scripts command
- Designing dynamic pages
  - Dreamweaver and dynamic page design
- Dynamic content sources overview
  - About dynamic content sources
  - About recordsets
  - About URL and form parameters
  - About session variables
  - ASP and ColdFusion application variables
  - ASP server variables
  - ColdFusion server variables
- Defining sources of dynamic content
  - Define a recordset without writing SQL
    - Options for the simple Recordset dialog box (PHP, ASP)
    - Options for the simple Recordset dialog box (ColdFusion)
  - Define an advanced recordset by writing SQL
  - Create SQL queries using the Database Items tree
    - Example: Selecting a table
    - Example: Selecting specific rows from a table and ordering the results
  - Define URL parameters
  - Define form parameters
  - Define session variables
  - Define application variables for ASP and ColdFusion
  - Use a variable as a data source for a ColdFusion recordset
  - Define server variables
  - Cache content sources
  - Change or delete content sources
    - Change a content source in the Bindings panel
    - Delete a content source from the Bindings panel
  - Copy a recordset from one page to another page
- Adding dynamic content to pages
  - About adding dynamic content
  - About dynamic text
  - Make text dynamic
    - Add dynamic text
    - Display placeholders for dynamic text
  - Make images dynamic
  - Make HTML attributes dynamic
    - Make HTML attributes dynamic with the Bindings panel
    - Make HTML attributes dynamic with the Property inspector
  - Make ActiveX, Flash, and other object parameters dynamic
- Changing dynamic content
  - About dynamic content
  - Edit dynamic content
  - Delete dynamic content
  - Test dynamic content
  - Let Adobe Contribute users edit dynamic content
  - Modify recordsets with the Property inspector
- Displaying database records
  - About database records
  - Server behaviors and formatting elements
  - Applying typographic and page layout elements to dynamic data
  - Navigating database recordset results
  - Create a recordset navigation bar
  - Custom recordset navigation bars
    - Create and assign server behaviors to a navigation link
    - Set the Move To (server behavior) dialog box options
  - Navigation bar design tasks
  - Display and hide regions based on recordset results
  - Display multiple recordset results
    - Modify repeating regions in the Property inspector
    - Reuse PHP recordsets
  - Create a dynamic table
  - Create record counters
  - Use predefined data formats
- Viewing live data
  - Provide the page with live data in Live view
  - Troubleshooting live data in Live view
- Adding custom server behaviors
  - About custom server behaviors
    - Access Dreamweaver Exchange
    - Install a server behavior or other extension in Dreamweaver
  - Custom server behaviors workflow
  - Use the Server Behavior Builder
    - Advanced options
  - Creating code blocks
  - Positioning a code block
  - Repeating code blocks with the loop directive
  - Request a parameter for the server behavior
  - Edit and modify server behaviors
    - Retain the old and new versions of the behavior in the panel
    - Edit the code of a server behavior created with the Server Behavior Builder
  - Coding guidelines
  - Testing server behaviors
- About building forms
- Using forms to collect information from users
  - About collecting information from users
  - HTML form parameters
  - URL parameters
  - Creating URL parameters using HTML links
- Building ColdFusion forms
  - About ColdFusion forms
  - Enable the ColdFusion enhancements
  - Create ColdFusion forms
  - Insert ColdFusion form controls
  - Insert ColdFusion text fields
  - Insert ColdFusion hidden fields
  - Insert ColdFusion text areas
  - Insert ColdFusion buttons
  - Insert ColdFusion check boxes
  - Insert ColdFusion radio buttons
  - Insert ColdFusion select boxes
  - Insert ColdFusion image fields
  - Insert ColdFusion file fields
  - Insert ColdFusion date fields
  - Modify ColdFusion form controls
  - Validate ColdFusion form data
- Creating web forms
  - About web forms
  - Form objects
  - Create an HTML form
  - About dynamic form objects
  - Insert or change a dynamic HTML form menu
  - Make existing HTML form menus dynamic
  - Display dynamic content in HTML text fields
  - Set the Dynamic Text Field dialog box options
  - Dynamically preselect an HTML check box
  - Dynamically preselect an HTML radio button
    - Set the Dynamic Radio Group dialog box options
    - Set the Dynamic Radio Group dialog box options (ColdFusion)
  - Validate HTML form data
  - Attach JavaScript behaviors to HTML form objects
  - Attach custom scripts to HTML form buttons
  - Create accessible HTML forms
    - Add an accessible form object
    - Edit accessibility values for a form object
- Enhanced HTML5 support for form elements
  - New attributes common to form elements
  - Form elements with modified attributes
  - HTML5 form elements
Chapter 17: Building applications visually
- Building master and detail pages
- Building search and results pages
- Building a record insert page
- Building an update record page
- Building a delete record page
- Building pages with advanced data manipulation objects (ColdFusion, ASP)
- Building a registration page
- Building a login page
- Building a page that only authorized users can access
- Securing a folder in your application (ColdFusion)
  - Secure a folder or site on the server (ColdFusion)
- Using ColdFusion components
Chapter 18: Accessibility
- Dreamweaver and accessibility
Chapter 19: Dreamweaver and Creative Cloud
- Creative Cloud Libraries in Dreamweaver
- Synchronizing Dreamweaver settings with Creative Cloud
Chapter 20: System Requirements
- System requirements for Dreamweaver

163

Layout and design

Last updated 11/30/2015

"Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device

or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for

generating more semantic layouts." -

Bootstrap documentation.

To get started with Bootstrap documents in Dreamweaver, consider using Bootstrap starter templates . Dreamweaver

includes a bunch of templates aimed at different types of websites you may want to create, for example, ecommerce or

portfolio.

If you wish to create a Bootstrap document from scratch, you could always do so as described here .

Can I migrate existing fluid grid documents to Bootstrap documents in Dreamweaver?

No, there isn’t a direct method of converting your existing fluid grid documents to Bootstrap documents. However, the

user experience in Dreamweaver while creating and designing Bootstrap documents is similar to that of fluid grid

documents. For example, you can get started by creating a Bootstrap document right from the New Document dialog

box. While you create fluid grid documents for three basic form factors – Mobile, Tablet, and Desktop, for Bootstrap,

you start by creating a document for basic screen sizes – small, medium, and large. The layout editing options that are

displayed when you click elements in Bootstrap documents also look similar to that of fluid grid documents.

Create Bootstrap documents

You can begin designing your Bootstrap website using one of the following options in the New Document dialog box:

• Bootstrap starter templates (Starter Templates > Bootstrap Templates) - Use this option if you want to get started

quickly without the hassle of laying out your pages from scratch. Simply edit the text and replace the assets, if

necessary, and your responsive website is ready. See

Using Bootstrap starter templates for more information.

• Create an HTML document based on Bootstrap framework (New Document > HTML > Bootstrap) - Use this

option if you want to build your website brick-by-brick using CSS and Bootstrap components within Dreamweaver.

See

Creating HTML documents based on Bootstrap framework for more information.

Using Bootstrap starter templates

Bootstrap starter templates let you create web pages for popular themes in a jiffy. All the dependent files in the

framework are saved automatically.

1 Click File > New.

2 In the New Document dialog box that appears, click Starter Templates, and then select the required template from

the list of Bootstrap Templates.

3 Click Create.

An HTML page that is based on the template you chose is created. You can now modify the page by adding or

deleting components, editing text, or assets as required.

Creating HTML documents based on Bootstrap framework

You can start building your responsive website by creating an HTML document based on Bootstrap framework. You

can choose to create a set of Bootstrap framework files or use the existing files. Once the document is created, you can

add Bootstrap components such as accordions and carousels using the Insert panel in Dreamweaver. Or, if you have

Photoshop comps, you can use Extract to bring in images, fonts, styles, text, and more into your Bootstrap document.

1 Click File > New.

2 In the New Document dialog box that appears, click New Document > HTML, and then click the Bootstrap tab.

3 To create a new bootstrap.css file (and the other bootstrap files), perform the following actions: