Menu
A version of the HTML5 Pack has now been released for Dreamweaver CS3 and CS4. It doesn't include all the features of the HTML5 Pack for Dreamweaver CS5, but it supports the tools you'll use in this tutorial to embed HTML5 video. If you're using CS3 or CS4, you can pretty much follow these instructions to embed video.
Learn how to edit, update, and delete templates in Dreamweaver, and update templates in a Contribute site.
When you make changes to and save a template, all thedocuments based on the template are updated. You can also manuallyupdate a template-based document or the entire site if necessary.
Note:
To edit a template for a Contribute site, you must use Dreamweaver; you cannot edit templates inContribute.
Use the Templates category of the Assets panel to manage existing templates, including renaming template files and deleting template files.
You can perform the following template management tasks using the Assets panel:
- Create a template
- Edit and update templates
- Apply or remove a template from an existing document
Dreamweaver checks template syntax whenyou save a template but it’s a good idea to manually check the templatesyntax while you’re editing a template.
Youcan open a template file directly for editing, or you can open atemplate-based document, then open the attached template for editing.
Whenyou make a change to a template, Dreamweaver prompts you to update thedocuments based on the template.
Note:
You can also manuallyupdate the documents for template changes if necessary.
- In the Assets panel (Window > Assets), select the Templates icon on the left side of the panel.The Assets panel lists all of the available templates foryour site and displays a preview of the selected template.
- In the list of available templates, do one of the following:
- Right-click the template and click Edit.
- Double-click the name of the template you want to edit.
- Select a template to edit, then click the Edit button at the bottom of the Assets panel.
- Right-click the template and click Edit.
- Save the template. Dreamweaver prompts you to updatepages based on the template.
- Click Update to update all documents based on the modifiedtemplate; click Don’t Update if you don’t want to update documentsbased on the modified template.Dreamweaver displays a log indicatingthe files that were updated.
Open and modify the template attachedto the current document
- Open the template-based document inthe Document window.
- Select Tools > Templates > Open Attached Template.
- Note:To modify the template’s page properties, select File > Page Properties. (Documents based on a template inherit the template’s page properties)
- Save the template. Dreamweaver prompts you to updatepages based on the template.
- Click Update to update all documents based on the modifiedtemplate; click Don’t Update if you don’t want to update documentsbased on the modified template.Dreamweaver displays a log indicatingthe files that were updated.
- In the Assets panel (Window > Assets), select the Templates icon on the left side of the panel.
- Click the name again so that the text is selectable,then enter a new name.This method of renaming works in the same way as renaminga file in Windows Explorer (Windows) or theFinder (Macintosh). As with Windows Explorer andthe Finder, be sure to pause briefly between clicks. Do not double-clickthe name, because that opens the template for editing.
- Click in another area of the Asset panel, or press Enter(Windows) or Return (Macintosh) for the change to take effect.An alert asks if you want to update documents that arebased on this template.
- To update all documents in the site that are based onthis template, click Update. Click Don’t Update if youdo not want to update any document based on this template.
The template description appears in the NewDocument dialog box when you’re creating a page from an existingtemplate.
- In the Template Description dialog box, edit the descriptionand click OK.
When you make a change to a template,Dreamweaver prompts you to update the documents based on the template,but you can manually update the current document or the entire siteif necessary. Manually updating template-based documents is thesame as reapplying the template.
Apply template changes to the currenttemplate-based document
- Dreamweaver updates the documentwith any template changes.
Update the entire site or all documentsthat use a specified template
You can update all the pages in the site,or only update pages for a specific template.
- To update all the files in the selectedsite to their corresponding templates, select Entire Site, thenselect the site name from the adjacent pop‑up menu.
- To update files for a specific template, selectFiles That Use, then select the template name from the adjacent pop‑upmenu.
- Make sure Templates is selected in the Update option.
- If you don’t want to see a log of the files Dreamweaver updates, deselect the Show Logoption; otherwise, leave that option selected.
- Click Start to update the files as indicated. If youselected the Show Log option, Dreamweaver provides information aboutthe files it attempts to update, including information on whetherthey were updated successfully.
Contribute users can’t make changesto a Dreamweaver template. You can, however,use Dreamweaver to change a template fora Contribute site
Keep these factors in mind when updatingtemplates in a Contribute site:
- Contributeretrieves new and changed templates from the site only when Contributestarts up and when a Contribute user changes their connection information.If you make changes to a template while a Contribute user is editinga file based on that template, the user won’t see the changes tothe template until they restart Contribute.
- If you remove an editable region from a template, a Contributeuser editing a page based on that template might be confused aboutwhat to do with the content that was in that editable region.
Toupdate a template in a Contribute site, complete the following steps.
- Open the Contribute template in Dreamweaver, edit it, and then save it. Forinstructions, see Opena template for editing.
- Notify all of the Contribute users who are working onthe site to restart Contribute.
- In the Assets panel (Window > Assets), select the Templates icon on the left side of the panel.
- Click the Delete button atthe bottom of the panel, then confirm that you want to delete thetemplate.Note:After you delete a template file,you can’t retrieve it. The template file is deleted from your site.Documentsthat are based on a deleted template are not detached from the template;they retain the structure and editable regions that the templatefile had before it was deleted. You can convert such a documentinto an HTML file without editable or locked regions.
More like this
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.
Legal Notices | Online Privacy Policy
Dreamweaver CC: PSD to HTML and CSS
Adobe Products Featured
Our team continues to streamline and improve Dreamweaver. It has a modern UI, edit capabilities in Live View, CSS Designer and a 64-bit architecture. That’s not all though, it gets even better. It also has a complete integration of Extract which empowers users to easily go from PSD comp to code.
Extract enables web designers and developers to build web and mobile content from a Photoshop comp directly in Dreamweaver, bridging the gap between Photoshop and Dreamweaver, and reducing the need to go back and forth between the two.
Extract Panel
The Extract panel is where all the magic happens. You can easily extract CSS, images, fonts, colors, gradients, measurement and more to help build sites faster. If the panel is not opened by default, you can launch it as follows:
- Launch Dreamweaver CC
- Window > Extract ( see Figure 1)
Extract Tutorial (
experience)
We’ve added an onboarding experience to show how easily users can Extract info from a PSD. Click on any layer, text, or image to see how to easily extract info. To get going, click on the “Get Started” (see Figure 2) button on the top left corner.
View Photoshop documents in Dreamweaver
Once you click the “Get Started” button, the Extract panel will automatically sync to your Creative Cloud folders (see Figure 3). You have the following options to upload and view your PSD in Dreamweaver:
- The “Upload PSD” button, which will upload your PSD to your Creative Cloud account directly from within Dreamweaver. (Figure 3).
- Browse your Creative Cloud account folders and select any PSD to get started.
Now that you have successfully uploaded and can view a PSD in the Extract panel, here are the things you can do with it:
When a PSD is opened in the Extract panel, you can fully inspect the CSS that is pulled from Photoshop layers. When you select a layer, you’ll see all the CSS associated with that selection. Let’s see how that works:
- In the Extract panel, select any text or image layer in your PSD. You will get prompted with the resulting dialog (see Figure 4).
- Click on “Copy CSS” to copy the CSS associated with that specific element.
- You can now paste it into your CSS document to edit or tweak your design.
Extract an image (PNG, PNG 8 Alpha, JPG)
Web designers and developers are now able to extract web-optimized images into their designs – all without leaving Dreamweaver.
- In the Extract panel (see Figure 5), select an image.
- In the resulting dialog (see Figure 6), click on which will prompt you with another dialog where you can:
The Layer tab (see Figure 7) is a convenient way for web designers and developers to view the PSD structure and layers in one place. This tab enables them to:
- View the PSD layers and structure in one place.
- Toggle the eye icon next to the layers to show or hide that layer.
- Click on to download one or more layers.
Styles tab
No more guessing font names, sizes or styles. The styles tab (see Figure 8) enables you to inspect, copy and easily extract font styles, colors, and gradients as follows:
- Click on Styles tab in the Extract panel.
- Select any font to get font style, size, and colors.
Where to go from here
Download Dreamweaver CC and explore the new Extract feature videos and tutorials to see how the new capabilities speed up your development process.
In future blog posts, we will cover the new contextual code hinting, extract measurement, and the new drag and drop functionalities in the Extract panel. As always, we encourage you to provide your input and feedback on the latest release of Dreamweaver CC.
The Dreamweaver Team