Available in the lab

The Gold Standard - Dreamweaver

Dreamweaver looks a lot like some free editors, with multiple views again. In the code view, we see the basic HTML code that Dreamweaver assumes you want to start with.

In Dreamweaver, the WYSIWYG window is the Design View. In the view above, we are using the split view which shows both the basic code that we used for our initial HMTL practice and the same code as it displays in Design View.

If you look at the taskbar, you can see all the different things you can do with Dreamweaver.

  • You can modify the properties of any object with the properties toolbar.
  • The dropdown boxes and the icons provide you a lot of GUI tools to help you manage objects in the Design View.
  • You can deal with other aspects with the right hand set of tabs.

Dreamweaver incorporates some templates, but would prefer than you stick with CSS standards. It does, however, have a of lot of built in dynamic HTML script that you can use on your pages.

But the best way to learn it is to jump right in, paste in your HTML and start to try out the tabs.

[top]

Define a new site

  1. Create a folder in which you will store all your project files. Create an 'images' folder within it to hold all the images you will use with your site.
  2. Open Dreamweaver
  3. Define a new site [Site > New Site > 'Advanced' tab]
  4. Fill in your Site Name in the box provided for 'Site Name'.
  5. Use the yellow folder icon next to the 'Local Root Folder' box to browse for the project folder you had created.
  6. You should be able to see the 'images' folder in your Files panel [Site > Files].

[top]

Templates

If most of the pages in your web site have the same look and feel, you might find it useful to create a Dreamweaver template. The advantages of creating a dreamweaver template include:

  • All pages will look consistent
  • When you want to make changes that effect the layout of the entire site you can simply make the changes to the template and update all the pages automatically

The Dreamweaver template file has a .dwt extension and will get saved in a folder entitled "Templates". To create a dreamweaver template follow these steps:

  1. File > New
  2. Page Type > HTML template
  3. Layout - select from one of the pre-built layout options and customize it or select <none> and create your own from scratch

[top]

Page layout

You can create the general layout of the page in the Dreamweaver template using either tables or CSS, but for reasons of accessibility and compliance with good design standards, CSS is the preferred method.

Table layouts

Advantages

  • Easy to design
  • Works well on older browsers

Disadvantages

  • Loads only once all the elements within the table have loaded - usually slower than CSS layouts
  • Changes to the tables will need to be made on each page and all the pages will need to uploaded to the server again

Creating the Layout using Tables

  • If you use the tables approach, your layout will be structured within tables and cells.
  • Analyze your layout to figure out how many tables with how many rows and columns you would need.
  • Now start creating your tables. You can use pixels or percentages to define the width and height. If you have more than one column make sure the widths of all the columns add up to the width of the table. [Insert > Table]
  • The Properties Inspector is extremely useful for editing the properties of any element in your page. To edit the properties of a table simply select the table and open the Properties Inspector. [Window > Properties]
  • Try to create separate tables as much as possible. This is because a table will load only once all the elements within it have loaded.
  • Explore creating the layout you designed using tables. You can give background colors, create tables within tables, specify the alignment of the content within the cell etc.

CSS Layouts

Advantages

  • Loads fast - the CSS file just needs to be loaded once
  • Can easily change the layout of the entire site by tweaking the .css file as the design elements are separated from the content

Disadvantages

  • More challenging to design
  • May not work on some of the older browsers

Creating the Layout using DIV Tags and CSS

  • Using the CSS approach you will be creating the layout webpage using div tags to separate different types of content on the page and positioning these div tags in CSS.
  • You will need to create a CSS style sheet and attach it to the template.
  • For every div that you create in the template you will need to create a corresponding style in the css file. You can specify position the location of the div in the page, background colors, borders and other properties in the style.
  • An easy way to create a CSS, div based layout is to use one of the pre-built Dreamweaver layouts. [File New > Blank Page > HTML > Select layout best suited to your needs]

[top]

Links to DreamWeaver assistance

Depending on what you want to do and what version of Dreamweaver you have, this site has a lot of tutorials. But Adobe also offers Dreamweaver Tutorials.

[top]

One way to use Dreamweaver

You may choose to use a text editor or a free web editor for most of your needs, and use Dreamweaver in the lab only for those things Dreamweaver is best suited for (such as creating image maps).

Be aware, though, It's the end of the line for boxed versions of Photoshop, InDesign, and the rest.

[top]