Operation Manual

ManualsBrandsAdobe ManualsSoftwareDreamweaver CC - 2015

391

392

393

394

395

396

397

398

399

400

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

388

Coding

Last updated 11/30/2015

You can get a preview for the following image file types:

• JPEG

• JPG

• PNG

• GIF

• SVG

Color preview

Hover your mouse over color values to preview colors in Code View. The following are the supported formats:

• 3 and 6 digits Hexadecimal color values: #ff0000;

• RGB: rgb(0, 0, 0);

• RGBA: rgba(0, 255, 228,0.5);

• HSL: hsl(120, 100%, 50%);

• HSLA: hsla(120, 60%, 70%, 0.3);

• Pre-defined color names, such as, Olive, Teal, red.

Press Control + Spacebar to see the color picker and change the color values quickly.

Color preview is available in all document types for the above color formats.