Step 6 Code Navigator can help you find the CSS document that contains the styles you want to edit. This theme, Vostok (vostoktheme.com), houses colour information in colors.css. To edit a CSS document, select it in the Source Code bar, click Get, then click Yes in the Dependent Files dialog.


Step 7 Select Site Elements in the status bar and then edit your page as normal in Dreamweaver (directly in code, in the CSS Styles panel, or by double-clicking Rules and making edits in the CSS Rule Definition dialog). You can add images to use as element backgrounds by copying them to the theme’s folder on your hard drive (Dreamweaver will have downloaded this in step 6) and linking to them using Dreamweaver.


Step 8 File > Save All will save changes to local versions of your documents. When you’re satisfied the changes are ready to be published, return to the Files panel and click the Synchronize button at the top. Select Entire from the Synchronize menu, then Put Newer Files to Remote from Direction, and click Preview. Dreamweaver will show the changes that will be made. Click OK, wait for the files to upload, then check your updated site in a web browser.


Craig Grannell

Who: Craig has been designing websites since back when even the tag seemed like a pretty neat idea. These days, he immerses himself in web-standards-compliant design, and regularly writes for creative and technology magazines. Craig has had a number of books published on web design, including critically acclaimed manual The Essential Guide to CSS and HTML Web Design.
Contact: craiggrannell.com
Software: Dreamweaver CS5, Any web browser
Time to complete: 30 minutes

Project files

Download the resources for this tutorial here. (Free registration required)