Streamline Training & Documentation: A Dreamweaver Tutorial

Monday, August 10, 2009

A Dreamweaver Tutorial

I've been gearing up to author a new Streamline website, and in the process have been familiarizing myself with what I can do with Adobe's Dreamweaver software.

A tutorial I found helpful (despite its sprinkling of typos) is available at BestWebDesignz.com. The tutorial's eighteen brief sections cover the ten steps it defines for creating a web site with Dreamweaver:

Define the new web site (Section 2 of the tutorial).

Create a template (Section 3 of the tutorial) — Note that the tutorial does not mention the availability of predefined templates in Dreamweaver for users who do not want to begin from scratch. For more information, see Adobe's Help section on predesigned layouts.

For users who do intend to start from scratch, the tutorial recommends first designing the layout in an image editor such as Fireworks CS4.¹ As you create your template, you access your Fireworks images from wherever you have stored them on your hard drive.

Design your template page (Sections 4, 6, 7, 8, and 16 of the tutorial) You need to understand the concepts of floating an element, clearing a float, defining classes, and repeating a background image.

Design your CSS style sheet (Section 5 of the tutorial) — You need to understand the concepts of division and box. Note that Dreamweaver provides sample style sheets to help those who don't want to start from scratch.

Insert editable regions (Section 9 of the tutorial).

Create the pages of your site using the template (Sections 10, 11, and 12 of the tutorial).

Link all the pages together (Section 13 of the tutorial).

(optional) Create a form (Sections 14 and 15 of the tutorial).

Check your site in the browsers you are supporting (Section 17 of the tutorial).

Upload your site (Section 18 of the tutorial) — Note that if you're working with collaborators who may be editing the site files, you should enable checking in and checking out to ensure proper version control.

In order to be manageable, the BestWebDesignz tutorial covers only a basic portion of Dreamweaver's functionality. For more complete information, you can consult Adobe's online help. There you will find guidance on such topics as:

meeting accessibility requirements

head content — elements that describe the information concerning the page (used by search engines and for accessibility). Head content includes such items as page title, content type (i.e., document type), keywords, description of the page content, and author.

tips for ensuring that web pages created in Dreamweaver display well on mobile devices.

__________
¹ The "CS" in CS4 stands for "Creative Suite." CS4 is the current version for Adobe's Creative Suite family of software, which, in addition to Dreamweaver and Fireworks, includes Photoshop, InDesign, Illustrator, Flash, Contribute, After Effects, Premiere, Soundbooth, OnLocation, Encore, Bridge, Device Central, and Version Cue.

###

Labels: Learning resources

<< Home