Help and tutorials - Adobe

1 Adobe DREAMWEAVER Help and tutorialsFebruary 2013 ContentsDreamweaver Creative Notes | Dreamweaver | Creative 's new | Creative HTML5 audio | Creative HTML5 video | Creative Edge Animate compositions | Creative files based on filename or content | Mac OS | Creative HTML5 support for form elements | Creative to Insert options | Creative 's 's new in and Hebrew s new in tutorials & getting and workflow and the Dreamweaver CS5 content to CSS3 support in the CSS styles panel ( ) the workspace for visual coding up your coding the Insert toolbars, inspectors, and context in the Document in and to a remote up a testing up a local version of your Sites dialog box Control and Advanced and export Dreamweaver site an existing remote Dreamweaver and putting files to and from your Contribute site preferences for transferring your Dreamweaver CSS out pages with Cascading Style a CSS transition a property to a CSS , remove, or rename CSS class for cross-browser CSS rendering inline CSS to a CSS a CSS a CSS style to CSS3 support in the CSS styles panel ( )

2 CSS CSS in Live to an external CSS style CSS CSS Styles CSS heading properties for an entire CSS link properties for an entire CSS Styles CSS style sheets in a Contribute Design-Time style Dreamweaver sample style with div and out pages with the Spry Spry page orientation for mobile devices ( and later) media queries ( and later) dynamic data with database content with CSS heading properties for an entire title and encoding properties for a document CSS style sheets in a Contribute Design-Time style Dreamweaver sample style a tracing image to design a visual aids for with Spry widgets (general instructions) with div with head content for with the Spry Accordion with the Spry Collapsible Panel with the Spry Tabbed Panels with the Spry Tooltip with the Spry Validation Checkbox with the Spry Validation Confirm with the Spry Validation Password content and with Photoshop and with the Spry Menu Bar and opening text properties in the Property and Hebrew page and modifying assets and the Spry media web a link to a Word or Excel and managing a list of favorite data with content in a template-based Microsoft Office documents (Windows only) tabular custom tags into SWF tag font title and encoding properties for a check a web HTML horizontal the Insert in and checking out files and folders in your Dreamweaver files for and putting files to and from your files and back files (Contribute users)

3 Download time and size file information in Design document and linking and to an external CSS style CSS link properties for an entire code in Design CSS information about coding in tag and debugging coding up your coding and editing and web applications for mobile devices ( , CS6) web applications as native mobile applications with PhoneGap page orientation for mobile devices ( and later) media queries ( and later) web pages using the Multiscreen Preview for cross-browser CSS rendering pages using the Multiscreen Preview and view elements in the Document live Dreamweaver or removing a template from an existing a Dreamweaver a nested editable regions in repeating regions in editable tag attributes in content in a template-based , updating, and deleting and importing template templates and template-based authoring preferences for optional regions in applications and up a testing custom server dynamic content to ColdFusion a delete record a login a page that only authorized users can a record insert a registration pages with advanced data manipulation objects (ColdFusion, ASP)

4 Search and results dynamic web connections for ASP connections for ColdFusion connections for PHP sources of dynamic dynamic database content content sources the workspace for visual web connection a folder in your application (ColdFusion) up your computer for application database web ColdFusion with Photoshop and Catalyst and modifying Extension for a link to a Word or Excel Microsoft Office documents (Windows only) Contribute CSS style sheets in a Contribute Dreamweaver with Adobe Online with Adobe Bridge and with ConnectNow and with Device Central and with Fireworks and with Flash and 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 JavaScript behaviors (general instructions) and XML and character entities for XSL transformations on the XSL transformations on the Creative Cloud1 Release Notes | Dreamweaver | Creative CloudTo the topTo the topTo the topThis release is available for Creative Cloud members and point product subscribers only.

5 To join Adobe Creative Cloud, see Adobe you upgradeUpgrade to Dreamweaver Creative CloudAfter you upgradeKnown limitationsHTML5 videos do not play as intended on websiteVersion: Date: 24 September 2012 This document lists the known issues, limitations, and workarounds in the Dreamweaver release for Creative that you read this document before you you upgradeTo avoid losing your personal settings and preferences in Dreamweaver CS6, ensure that you follow the instructions listed keyboard shortcutsBefore upgrading to Creative Cloud, do the following:1. Select Edit > Keyboard Shortcuts2. Click "Export Set As HTML" you upgrade, refer to the exported file to set the shortcuts 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 to Dreamweaver Creative CloudThis upgrade includes fixes from the earlier Dreamweaver patch Open Select Help > In the Adobe Application Manager, select the Dreamweaver Click you upgradeEnable previously installed extensionsIf you upgrade from Dreamweaver CS6 to Creative Cloud, your previously installed extensions do not appear in Dreamweaver display previously installed extensions, open Adobe Extension Manager, select all extensions, and re-enable 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.

6 Manually reinsert items intothe Favorites panel.(Mac OS only, FileVault enabled) Point site local root folder outside Users folderLive search does not work if FileVault is enabled for site local root the topTo the topThe local root folder is inside the user folder (/Users/<user>/). Point the site local root folder outside the Users labels in Property InspectorHTML keywords are no longer localized in the Property Inspector. They appear in English limitationsEdge Animate CompositionsPreviewing Edge Animate compositions in the Live View slows down Dreamweaver considerably. Adobe suggests that you use browser previewfor Edge Animate OAM files can be inserted into Dreamweaver. OAM files with double-byte, high-ASCII, or special characters in the filename cannot Video/Audio does not play in Live ViewPreview HTML5 audio/video in a 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 HTML5 video support on your websites, ensure that you correctly configure MIME (Multi-purpose Internet Mail Extensions) types on yourwebserver.

7 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 video encoding, you can try HTML5 Video Player. The player can convert your videos into different HTML5 video formats in a batch you plan to host your websites on different web server types such as Windows server with IIS, or Linux server with Apache, configure HTML5 MIME types in accordance with the server HTML5 video MIME type on ApacheAddType the following code to your file or to a .htaccess file in the directory containing your video first line is for videos in an Ogg container. The second line is for videos in an MPEG-4 container. The third is for 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 are some differences between the IIS versions.

8 Consult your server s documentation or your hosting company on how to set the HTML5video MIME type for specific file types on Windows 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 the following code to your configuration file:<configuration> < > <staticContent> <mimeMap FileExtension=":mp4" mimeType="video/mp4" /> <mimeMap FileExtension=".ogv" mimeType="video/ogg" /> <mimeMap FileExtension=".webmv" mimeType="video/webmv" /> </staticContent> < > </configuration>3 Twitter and Facebook posts are not covered under the terms of Creative Notices | Online Privacy PolicyIf 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 's new | Creative CloudTo the topTo the topTo the topTo the topTo the topThese features are available for Creative Cloud members and point product subscribers only.

9 To join Adobe Creative Cloud, see Adobe 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 more details on inserting HTML5 video, see Insert HTML5 more details on inserting HTML5 audio, see Insert HTML5 HTML5 semantic elements from the Insert panelSelect Layout in the Insert (Window > Insert) 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 Properties can also use the Insert menu (Insert > Layout) to insert semantic seven new semantic tags for this release: Article, Aside, HGroup, Navigation, Section, Header, and a tutorial on using semantic tags for page layout, see the blog article by Jennifer Marsman titled Semantic Markup and Page Semantics in Dreamweaver tutorial provides you with a perspective of using HTML5 semantic elements in Dreamweaver CS Adobe Edge Animate compositionsYou can import Adobe Edge Animate compositions (OAM files) into Dreamweaver.

10 The composition is placed at the location of the places the extracted contents of the OAM file in a folder named edgeanimate_assets by default. You can change the default locationin the Site Setup more information, see Import Edge Animate for HTML5 CanvasThe 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 Canvas element has ID, height, and weight locate the Canvas element, select Insert > Canvas. Alternatively, open the Insert panel (Window > Insert), and selectCommon from the edit the properties of the Canvas element, select the element and edit its properties in the Properties to HTML5 support for form elementsAs part of HTML5 support, new attributes have been added to the Properties panel for form elements. In addition, four new form elements (E-5To 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 topmail, search, telephone, URL) have been introduced in the Forms section of the Insert more information, see Enhanced HTML5 support for form Search (Mac OS)Use Live Search to locate files based on filename or text present in files.