Whether you're new to building websites or you're a seasoned developer, Dreamweaver is one of those tools that's hard to live without. Rather than using a suite of tools and utilities, you can use the visual preview features, coding tools, and server-related tools in Dreamweaver to speed development.
In this article, I guide you through some of the new features in Dreamweaver CS6 and introduce you to a basic workflow for creating a simple website. You'll build a template for a photo gallery website, including a home page, detail pages, and a navigation bar (click Figure 1 to see a running example). Along the way, you'll learn how to use the new Fluid Grid Layout feature, CSS3 transitions, and Dreamweaver templates.
The first thing to do is define the pages that will be included in the website and the visual theme the pages will use for branding and layout. This can be quite an extensive task for complex websites, but for the purposes of this tutorial, the photo gallery will follow a very simple design (see Figure 2).
Essentially the gallery is composed of a single layout used to build a home page and detail pages. Since the pages will all follow the same design, it's a good idea to use a Dreamweaver template.
Dreamweaver organizes projects by website and provides the Files and Assets panels so you can easily organize and deploy content. In this step, you'll set up the website folder and then create a new site in Dreamweaver.
Before you get started:
Create a new file and start the project:
The Fluid Grid Layout feature is new to Dreamweaver CS6. It provides an easy way to use CSS to create fluid page layouts that can size themselves to any screen or device. In this step, you'll create the foundation for the website template:
At this point, the page appears as a series of column guides and one fluid grid layout div tag creating a row in the grid.
HTML is simply a tree of nested tags that defines the relationship of content on a web page. In this example, the part of the HTML you see in a browser starts with the <body> tag, followed by nested <div> tags and a closing </body> tag. A div tag is an organizational element used to group content on the page in a logical way. CSS styles can be assigned to each div tag to format text and add layout styles such as position, background, and border.
In this step, you'll create three div tags as rows in the grid and add placeholder content:
Right now, the template has all the elements needed to produce the website pages, but it could use some style formatting to refine the layout (see Figure 6).
CSS styles enable you to format the text and visual presentation of the div tag layout. Separating the formatting definition from the definition of the content in the div tags allows for a flexible design workflow.
In this step, you'll format the background color, font styles, div tag layout styles, and thumbnail image styles to format the template:
Tip: The fluid grid layout is composed of three sets of CSS, one for each device size. You always want to start your layout in the mobile size because the styles you define there will be inherited by the other two layouts.
At this point, the layout.html page is ready to be converted to a Dreamweaver template (see Figure 7).
This website is purposefully designed to be very simple with the gallery pages sharing the same layout. Rather than redoing all the work for each page or copying and pasting the code, you can create a Dreamweaver template (DWT) file. A Dreamweaver template contains editable and non-editable regions that can be used to define consistent approaches to layout and branding. The template remains linked to each page you apply it to, which makes it easy to add global changes from a single location.
In this step, you'll create a DWT template from the layout.html file with editable and non-editable regions:
At this point, you're ready to create the gallery pages using the DWT template (see Figure 8).
Creating the gallery pages is easy. All you have to do is create a new page using the template and drop the supplied images and text into the placeholder areas.
In this step, you'll create the detail pages using the template and supplied assets:
Tip: Dreamweaver CS6 includes a simple set of image editing controls available in the Properties panel when an image is selected. You can perform tasks such as cropping, resampling, or changing the brightness and contrast directly in Dreamweaver without needing additional image editing software on your computer.
At this point, your pages are filled with content, and they are ready to be linked together (see Figure 9).
Navigation bars are a common feature in website design and can appear in many forms. Essentially they create hyperlinks between pages in the website (or elsewhere), and they provide a visual cue as a call to action.
In this step, you'll convert the thumbnail images to a navigation bar:
CSS3 transitions provide a new level of animation support directly to the HTML environment, enabling Flash like effects using web standard technologies.
In this step, you'll add CSS3 rollover transitions to the thumbnail images to create a visually engaging experience:
Tip: CSS transitions are supported in the following browsers: Chrome 1.0, Safari 3.2, Firefox 4.0, Internet Explorer 10, and Opera 10.5.
At this point, you've created the home page and detail pages, and you've added the finishing touches to the navigation bar with a CSS3 transition.
It's a good idea to preview your work often as you build the website. Dreamweaver CS6 provides several ways to preview, including using Design view, using Live View, using Multiscreen Preview, and previewing in a browser.
You'll find that using Design view and Live View are the easiest ways to check your work before publishing. Previewing in a browser is a common task that shows your work in your default browser. Multiscreen Preview is useful when checking your work for mobile and tablet sizes. In this step, you'll explore your options for previewing your work.
Check your work using Live View:
Check your work by previewing in a browser:
Tip: It's a good idea to use this option as opposed to simply opening the page in a browser because it saves all the dependent files where the CSS is stored.
Check your work using Multiscreen Preview by choosing Window > Multiscreen Preview.
Now that the website is complete, you'll need to upload it to a server so that people surfing the Internet can see it. You can use any FTP tool to accomplish this, but the Dreamweaver Files panel has FTP capabilities built into it. Dreamweaver CS6 includes performance improvements so you can upload large files and large websites faster and more efficiently than before.
Explore using the Dreamweaver FTP tool:
Tip: If you're new to building websites, you'll need to buy a unique domain name and pay for a host service to provide a server. The server host should provide you with an FTP host address and a username and password to log in.
For more information about Dreamweaver, check out the following resources:
Dan Carr is the owner, lead developer, and trainer for Dan Carr Design in San Francisco. With years of experience developing for Macromedia and Adobe, Dan has created a range of features available in Flash, including e-learning templates, UI components, and Developer Resource Kit extensions. Dan teaches Flash design and ActionScript classes in Northern California and develops e-learning and web applications for the public, as well as for Adobe product teams.