Customizable starter designs for beginners
Created
6 July 2009
Requirements
Prerequisite knowledge
Basic familiarity with using Dreamweaver for building websites.
User Level
All
Required products
- Dreamweaver CS4 (Download trial)
The following templates were designed and developed to give web designers a jump on new web layout techniques. In addition to design and layout, each design contains a dynamic element developed using CSS, HTML and JavaScript, commonly referred to as Ajax. Adobe has its own framework for developing Ajax-based sites, commonly known as Spry, and Adobe Dreamweaver supports a visual way to work with Spry and Spry widgets. 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 layout and Spry widgets. Preview and download the templates you want, and watch a short video to learn how you can customize these templates for your own needs.
Using the custom templates
Watch the following video for an overview of 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. I'll walk you through each template, and show you how to edit both the design and Spry widgets in Dreamweaver, Photoshop, and Fireworks.
Learn how to edit a design and Spry widgets in Dreamweaver, Photoshop, and Fireworks using this customizable starter template. (Running time: 14:00)
Note: To learn more about using templates in Dreamweaver, refer to the chapter on Templates in David Sawyer MacFarland's Dreamweaver CS4 Missing Manual.
Preview and download the templates
Refer to the following figures for a summary of the key features of each template and to preview and download the templates. Click the links in the figures to preview each template, including the interactive Spry widgets, and download all files used in creating each design and layout.
Template 1
Template 2
Template 3
Template 4
Template 5
Be sure to explore the Dreamweaver Developer Center for more topics of interest, such as:
More Like This
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 2: Modifying the HTML and CSS
- Working with Drupal in Dreamweaver CS5
- Styling and inserting a Spry Menu Bar 2.0 widget with the Adobe Widget Browser
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 1: Exporting the design
- HTML5 and CSS3 in Dreamweaver CS5.5 – Part 3: Using CSS media queries to target different screen resolutions
- HTML5 and CSS3 in Dreamweaver CS5.5 – Part 2: Styling the web page
- Understanding Spry basics
- Getting to know your CSS selectors – Part 1: CSS2.1 and attribute selectors
- Excerpt: Bring Your Web Design to Life
- Getting to know your CSS selectors – Part 2: CSS3 pseudo-classes and pseudo-elements
Tutorials and samples |
| 04/23/2012 | Resolution/Compatibility/liquid layout |
|---|---|
| 04/20/2012 | using local/testing server with cs5 inserting images look fine in the split screen but do not show |
| 04/18/2012 | Ap Div help |
| 04/23/2012 | Updating |
