Customizable starter designs for web designers

This article losely builds on my previous article, Customizable starter designs for beginners. The following templates were designed and developed to give web designers examples of more advanced HTML and CSS techniques for taking more advantage of the web medium. In addition to more fluid design techniques and a mixture of absolute and relative CSS positioning, these designs also include two Word Press themes to get you started in designing and customizing themes for web pages that are dynamically generated by CMS systems.

The download files also include source Photoshop files with slices, which can be edited with either Photoshop or Fireworks, and the design elements are already set up to work with the layouts and WordPress themes provided. Preview and download the templates you want, and watch a short video to learn how you can customize these templates for your own needs.

New features in Dreamweaver CS5 make working with dynamically generated pages a breeze. For example, the Dynamically-Related Files toolbar shows you all of the files used by a server-side script, and allows you to filter the list, or see the generated code in the enhanced Live Code feature. A new Inspect feature allows you to dissect the structure of a web page, while the enhanced Code Navigator searches and targets CSS referenced by either the Inspect feature or the Dynamically-Related Files feature. Using these tools in conjunction with your website ensures you'll be able to find any file and CSS as it relates to your web design and development effort.

Using Dreamweaver CS5 with a dynamic website

Dreamweaver CS5 features a new streamlined Site Setup dialog box, which will allow you to define a site in a few clicks. If you take the extra step of defining a server for Dreamweaver to look for, be it a live server or a testing server, you'll get the added benefits of the software's ability to track all files that a server-side script looks for when processing a web page.

Note: For more details on setting up a server environment refer to Setting up a local testing server. For setting up a live server of your choice, refer to the following articles: Setting up a PHP development environment, Setting up a ColdFusion development environment, or Setting up an ASP development environment.

When you open a web page from your server, Dreamweaver detects if there is any server-side code on that page. The message contains a link to discover the related files. This can be very helpful in realizing all files related to a specific script or web page.

With a dynamic web page opened in Dreamweaver, the enhanced Live View feature allows you to see the page fully rendered by the server. Turning on Live Code will show you all of the results of the server-side scripts in HTML markup.

The new Inspect Feature

Another new feature in Dreamweaver CS5 is the Inspect feature. This feature allows you to roll your mouse over the Live View area and see all of the elements of your web design. As you move across the page, Dreamweaver will highlight elements, and show you the related HTML markup and assigned CSS rules and attributes associated to that page of the page.In our blog design (see Figure 4), we use Command-click (Mac) / Control-click (Windows) in Live View to follow the blog link and discover a CSS issue with our layout. After turning on the Inspect feature, we can identify the region of the page that is breaking our design.

You can combine the Inspect feature with the Code Navigator, introduced in Dreamweaver CS4, to find the exact CSS code you need to modify in order to get your page to render correctly.

Watch the following video for an overview of both the new Dreamweaver features discussed above and the custom templates that accompany this article. In this video, you learn how the templates are structured and how you can customize them for your own needs.

Refer to the following figures for a summary of the key features of each template and to preview and download the templates.

Where to go from here

Be sure to explore the Dreamweaver Developer Center for more topics of interest, such as:

• Learn to work with CSS
• Learn to use the Spry framework for Ajax
• Learn to build dynamic websites and web applications