8 December 2008
Familiarity with the Dreamweaver workspace.
Note: This tutorial was written for Creative Suite 4. Although the screenshots may differ from what you see on your screen, the content is still valid for Creative Suite 5 and later.
Strategies for efficient, and scalable, web development have really changed in the past few years. While some fundamental concepts still exist at the core, other advancements in standards adoption and new Dreamweaver development features, have given way to even faster and more expansive techniques.
With the Web becoming an immensely crowded place, clean document structure is becoming more and more important. When search engines catalog your site, you want them to see a well thought-out structure, clean tags, and understandably labeled links to the other pages in your site. Combining HTML and cascading style sheets (CSS) allows you to create a visually appealing site, while maintaining a good structure for your visitors. What's more, you can construct your CSS rules in a separate file altogether, allowing any number of HTML pages to simply refer to a single CSS file. This way, when you make changes to your single CSS file, your entire website, regardless of how many pages, will reflect these changes.
Site management tools in Dreamweaver let you keep track of your pages and links, manage layout and content through templates and Library items, code snippets, and allow you to synchronize and upload files to your web server when you're finished working on the site.
Lastly, you can use server-side technologies to allow your web server to do some of the work for you, such as including code dynamically, creating breadcrumbs, or leveraging an unlimited number of other possibilities available to you on the web.
First, you need to create a CSS file and link it to our HTML file. Create a CSS file by choosing File > New > Blank Page > CSS in the New Document dialog box. Save and name the CSS file. Open your HTML file in Dreamweaver, then choose Format > CSS Styles > Attach Style Sheet. You can also right-click inside of the page area of the HTML document and choose CSS Styles > Attach Stylesheet from the contextual menu (see Figure 1).
What Dreamweaver does is add a link tag in the heading area of the HTML document with a reference attribute to the CSS file you just created (see Figure 2). Every HTML page in your website that contains this link tag in the head area will have access to the CSS rules you create in that CSS document.
On the web, CSS is responsible for both layout as well as text styling. By wrapping HTML tags in DIV and SPAN tags, you can control groups of HTML tags, and give them properties, such as width, alignment settings, and background colors, to name a few (see Figure 3).
With CSS controlling your site's layout, making modifications to your layout as your site grows is as quick as making style changes, and it can be done from a single CSS file.
First introduced to Dreamweaver in version CS3, the Spry widgets objects give you instant access to the power of Ajax from within Dreamweaver. Simply select a widget from the insert panel, and Dreamweaver will do the rest.
When you have finished adding your panels and content, preview your web page in a browser and click the tabs to see your content update within the same web page, without even reloading.
If you take a look at the source code you'll see the tabbed panel widget is simply made up of a standard bullet list,
li tags, and a corresponding set of
Dreamweaver CS4 features two more widgets, in addition to a new Dataset wizard that is nothing short of amazing. You can quickly create truly dynamic web pages from external data sources such as HTML, XML, and JSON; all with the ease and simplicity of a stepped wizard.
In order to take advantage of Dreamweaver's site management capabilities, you'll need to set up a site. A site is nothing more than a folder on your hard drive, or network drive, where Dreamweaver expects to find the files that belong to your website. As you add files such as HTML, CSS, SWF (Flash), GIF and JPG graphics, Dreamweaver will be able to make sure that all files, links, CSS, Flash, and images are linked properly throughout your site. In addition, Dreamweaver can also store information about your website, such as log-in and file transfer information. This allows Dreamweaver to connect to your web server and upload files you create or update when you are ready.
To create a site, simply go to the Site menu in Dreamweaver and choose New Site. The New Site wizard will walk you through the process of naming your site, picking a local directory (where all of your web files are, or will be), and entering your web server info (you'd get that info from your hosting company, or server administrator).
With a site defined, you can now use some of Dreamweaver's site management capabilities. One feature that can save you lots of time in growing your site is templates. When you have a web page ready that can serve as a base structure for other pages, you are ready to convert that into template. A Dreamweaver template is a regular web page with areas designated as editable regions (see Figure 5). These regions act as "holes" when you apply a template to a new HTML page in your site. Areas inside of the regions can be customized on each page they are applied to. Typically you create editable regions for content areas, promotional areas; even inside of Spry widgets; anywhere you'd want a web page to be customized.
The power of templates comes in when you edit the template itself. If you make an adjustment in the template, Dreamweaver will update every page in your site to match the template, but will not alter the content you have customized on each page inside of the editable regions. Adding and maintaining pages in your website have never been easier.
Another feature of Dreamweaver site management comes in the form of Library items. These work much like the way symbols work in Flash or Illustrator. A Library item can be made up of any HTML and other web assets, and can be applied to any number of pages in your website. Let's say you have your company's phone number and address on a few key pages within your site, but you want to be able to update that information once, and have it be updated on all pages, just like templates. That's exactly what Library items are for.
Thinking one step beyond, since your web site can have multiple templates, Library items are a great way to share information between templates, especially if information between your templates is repeated, such as banner or footer information (see Figure 6).
The site management features mentioned above allow you to author templates and Library items from a single location, and Dreamweaver will take care of updating all of the HTML page sin your site. Another option for this same idea is to have your web server assemble parts of your web page automatically when someone visits your site.
There are many server-side technologies your web hosting company may offer. ColdFusion (by Adobe Systems), PHP, JSP, and ASP (by Microsoft) are some of the more common. In this example, I'll look at PHP, although the principle is the same for the others.
When you put server-side code into your web page, Dreamwaver will represent the code by putting a small object icon in the page where the code exists in relation to the layout (see Figure 7). If you select the object, you can edit the code directly in the Properties panel. When your users visit this web page in the following example, the server will include the HTML file as instructed by the PHP code, and users will see your web page plus the HTML code specified in the file to be included.
To learn how to apply the techniques discussed in this article, be sure to check out the resources in the Dreamweaver Developer Center, including the following resources:
Tutorials and samples