Operation Manual

ManualsBrandsAdobe ManualsSoftwareDreamweaver CC - 2015

191

192

193

194

195

196

197

198

199

200

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

190

Layout and design

Last updated 11/30/2015

Using jQuery UI widgets in Dreamweaver

Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry

widgets on your page, you cannot add new spry widgets.

Widgets are small web applications written in languages such as DHTML and JavaScript that can be inserted and

executed within a web page. Among other things, web widgets help provide a way to replicate desktop experiences on

a web page.

jQuery UI widgets such as accordion, tabs, datepicker, slider, and autocomplete bring the experience of the desktop to

the web.

For example, the Tabs widget can be used to replicate the tab feature of dialog boxes in desktop applications.

Tutor ia l

How to author HTML, CSS, jQuery, and PHP 5.4 (15 min)

Learn how the latest support for HTML5, CSS3, jQuery and PHP5.4 in Dreamweaver can help you author static,

dynamic, mobile or responsive projects.

Insert a jQuery widget

When you insert a jQuery widget, the following are automatically added to the code:

• References to all dependent files

• Script tag containing the jQuery API for the widget. Additional widgets are added to the same script tag.

For more information on jQuery widgets, see http://jqueryui.com/demos/

Note: For jQuery effects, external reference to jquery-1.8.24.min.js is not added because this file is automatically included

when you add an effect.

1 Ensure that your cursor is at a location on the page where you want to insert the widget.

2 Select Insert > jQuery UI, and choose the widget that you want to insert.

If you use the Insert panel, the widgets are present in the jQuery UI section of the Insert panel.

When you select a jQuery widget, its properties are displayed in the Properties panel.

You can preview jQuery widgets in the Live view or in browser that supports jQuery widgets.

Modifying jQuery widgets

1 Select the widget that you want to modify.

2 In the Properties panel, modify the properties.

For example, to add an extra tab to the Tabs widget, select the widget and click "+" in the Properties panel.