Web Design and Layout Tutorial

Thought and

organization of

your site from the

beginning can save

a lot of time later

on in the process.

Looking at the code

as you are working

in the design

view enhances your

understanding

of the whole process.

To follow these instructions comfortably while working with the Dreamweaver application, I suggest that you print out this tutorial, thereby freeing your monitor for the work at hand. You may also want to copy the practice text (see the indented block of text halfway through this tutorial) into the editor of your choice for ready access.

A good WYSIWYG program
Probably the most versatile and widely used program for creating web pages today is Macromedia Dreamweaver MX. This is a program in which "what you see is what you get," so you don't need any previous knowledge of HTML hand-coding to create a web page. Dreamweaver MX allows you to create and edit web pages and sites in a graphical user interface, so you are able to see changes to your work as you make them.

First, structure your site.
If you preplan your site from the beginning, you can save a lot of time later. In Part I of this tutorial I suggested that you think about your web site before you begin, using such tools as wireframing and storyboarding. (If you've forgotten, open the November/December issue of MetroMac Express on this website.)

Before you get to Dreamweaver, you should place all the text and graphics you think you will need in one folder––to be known as the Local Root Folder––on your desktop. This is important, because once you are ready to upload the files to the web it will mirror this structure. (You can, if you wish, have subfolders in this folder for different parts of the site, such as Bio, Bibliography, About Us, etc. Or you could have a Text subfolder and an Images subfolder.) I like to have an additional folder called Original Art––usually Photoshop or Illustrator files––for files that will not be going on the web site but may be needed for later editing. We will be talking extensively about graphics for the web in our next issue. For now, if you are following this tutorial on your computer, just ignore the matter of graphics. You'll see why later.

Another preliminary step is to make sure you have several browsers installed on your Mac. I recommend at least three––Netscape, Internet Explorer and Safari. That way, before you finally publish your website, you can check how it will look anywhere in the world, on any computer. I show you how later on.

Once you establish the Local Root Folder, you are ready to launch Dreamweaver. If you don't have the program, now is a good time to download the free 30-day trial version from http://www.macromedia.com/downloads/. Here you have two choices: the older Macromedia Dreamweaver MX, or the latest version Macromedia Studio MX 2004. I will be using Dreamweaver MX in my tutorials, but you can download whichever version you want. (Note: these two versions have somewhat different interfaces, so what you see on your screen may not be the same as the screen shots in this tutorial. But the basic philosophy and metaphors for building a site are similar, so by learning MX, you will find it easy to move into Studio MX 2004 if you choose to. I will do an article on the differences between the two down the line. Also see the review of Dreamweaver 2004 elsewhere in this month's Express).

Now, establish your Local Root Directory.
This is something you must always do before starting a new web page. The folder you just created with all your files will be the basis for the Local Site Root. Even if you don't have any files, you must have a designated folder to declare as your Local Site Root. You will be saving anything you create––HTML pages or images––in this folder.

To create the Local Site Root, open Dreamweaver and go to the menu Site > New Site. A site definition window will come up with two tabs: Basic and Advanced. Choose Advanced. Fill out only the first two fields: Site Name and Local Root folder. The Site Name is your internal name for the project, so name it something that will help you recognize your project 3-6 months down the road. For the Local Site Root, click on the blue "browse" folder on the right side of this field and locate your folder. That is all. Press OK .

You will now see a window with two side-by-side panels. Since you will not now need the remote (on the left), close that side by pulling the vertical line to the left, then grabbing the right-hand corner of the whole dialog box and moving it diagonally up to the left. This will give you more screen real estate, which you will need, once all the palettes are open.

Go to Menu>File>New, then, for most work, choose Basic Page, HTML (see figure 1).

Figure 1

Examine the screen anatomy.
Once the page opens you will see the opening screen. To keep from getting confused, close all open windows and palettes, if any, except the Document Window (see figure 2). This is the main window where all the designing is done. The others are all ancillary, feeding the main design area, and will be introduced as needed.

Figure 2

At the top left (number 1) are three icons representing the three different modes in which you can work. Which you select largely determines the appearance of the whole window, Reading from left to right, they are:

Show Code View. When this is selected, the window below will show only the source code of your document (number 3 but not number 2). This will not be your preferred working mode now or for some time, but you will occasionally find it useful.
Show Code and Design View, the middle icon, is selected in this screen shot, and you can see both the source code and the design of the document in the split window below (numbers 2 and 3). This is the mode that I prefer to work in. It gives you the most information, and you get to take advantage of one of Dreamweaver's strengths while working in this mode—seeing and having a choice to edit in two modes interchangeably and simultaneously. (Incidentally, you can switch the two halves and put the Design view on top if you prefer––a refinement we'll skip for the moment.).
Show Design View. With this icon selected, the design of the document would fill the window. As in Quark or InDesign, here is where the designer lays out the text and graphics of the page. If you use this view because it provides maximum real estate while designing, you should switch to the Show Code view occasionally to see how the code reflects what you have done.

At the bottom of the window is the status bar (number 4). It contains important information that we use while designing. It has three distinct sections, here labeled a, b and c.

a, the tag selector, shows what tags ( HTML commands) are in our document.
b displays the dimension, size and download time of our page
c is an iconic shortcut for launching different menus and palettes. The most important icon is the first one, the Site Manager.

On the right of the top menu strip (number 5), is the Globe icon. When you click on it, you launch the different browser choices (figure 3), so you can get a realistic idea of how your web page designs will look to different users. To make sure that your pages "degrade gracefully," always test them in different browsers. (You will have to link to the browsers in this dialog box by choosing Edit.)

Figure 3

Finally, at the top center (number 6) is the Title field. It won't show up on your finished web page, but it is essential that you provide a title, because search engines look for one when trying to locate web pages. It is also the title that appears when someone bookmarks your page for future reference. Obviously a clear title will help the viewer to return to your page. (Leaving it blank will automatically name it "Untitled," and why would somebody ever come back to a bookmark with that name?)

Use a Tracing Image.
Although not mandatory, an excellent way to trigger your creativity is to use a Tracing Image––a clever Dreamweaver device to get your design started. It could be a rough sketch done with paper and pencil, then scanned in, or a more refined comp done in Photoshop or Illustrator and saved as a gif or a jpeg. It could even be a screen shot of a web page you encountered in your surfing that you liked something about—the color palette, the layout grid, the navigation style, etc.

For this tutorial, start by creating a Tracing Image from the e-zine you are now reading––the Metromac Express. Command-Shift-4 takes a snapshot of the page. Find the resultant pdf file on the desktop (probably named "Picture 1"), open it in Photoshop, click on File and Save For The Web as a gif or jpeg file. It is ready to be inserted into your Dreamweaver page as a Tracing Image. (Don't worry about optimization or quality. This image is just your private design guide; it won't go up on the web.)

To insert the Tracing Image into the background of the page, go to the Modify menu and choose Page Properties. In that window, next to the Tracing Image field is a Browse bar; browse until you find the gif file you just created in Photoshop. Use the Image Transparency slider to lower the opacity to about 50%, so your work will show clearly over the tracing image design. (See figure 4).

Figure 4

The layout.
With the Tracing Image as a basis, you are now ready to create a layout structure for your first page. For this you will use the Insert Palette. (Figure 5).

Figure 5

This palette is found under the Window menu. Note the tabs on top. For this task, select the Layout tab, then the Layout View. Now you should see two choices––Layout Table and Layout Cell. The correct choice will be Layout Cell. With the Tracing Image ghosted on the web page, select Layout Cell and drag a rectangular or square shape across a section of the page you want to emulate in your own design. Let's start the page grid by defining the banner and then the main text content. (See figure 6.)

Figure 6

Continue copying the grid of the tracing image. Add the rectangles for the sidebar on the left and the "pull quotes" on the right. Before you remove the tracing image, give each cell a temporary color so you can see them until you add content, at which time you will remove the colors. To color the cells you use the Property bar. This context-sensitive tool is found under the Window menu. Click on the edge of a cell; the perimeter turns blue, indicating that it is selected. Now move down to the Property bar and find the Background field. Press the down arrow and choose any color.

Once each cell has a background color in it, go to the top menu View>Tracing Image, and take the checkmark off of Show. The tracing image disappears, and you should see something like Figure 7.

Figure 7

Add content.
Now that the page grid is set up, you are ready to populate the cells. You can either type the text directly into the middle column (the yellow one in my case) or cut and paste text from another text document. (To spare you the work of typing, I include here a couple of paragraphs of corporate mumbo jumbo, which you can cut and paste into your own document):

By moving executive focus from lag financial indicators to more actionable lead indicators, the balanced scorecard, like the executive dashboard, is an essential tool taking full cognizance of organizational learning parameters and principles. Benchmarking against industry leaders, an essential process should be a top priority at all times working through a top-down, bottom-up approach. Measure the process, not the people. The three C's––customers, competition and change––have created a new world for business by adopting project appraisal through incremental cash flow analysis. Big is no longer impregnable; building a dynamic relationship between the main players is critical.

Building flexibility through spreading knowledge and self-organization, the components and priorities for the change program while those at the coalface don't have sufficient view of the overall goals. Whenever single-loop learning strategies go wrong, working through a top-down, bottom-up approach, quantitative analysis of all the key ratios has a vital role to play in this. In order to build a shared view of what can be improved, by adopting project appraisal through incremental cash flow analysis, in a collaborative, forward-thinking venture brought together through the merging of like minds. Exploiting the productive lifecycle exploitation of core competencies as an essential enabler, taking full cognizance of organizational learning parameters and principles.

Repeat this same process for the navigation bar on the left side and the "pull-quotes" on the right. You can vary type size, spacing (double spacing), color and font, by experimenting with the other attributes of the Property bar. And remember––once a cell is populated with either text or graphics, turn off the background color (View>Tracing Image; uncheck Show.)

All the text should now be in place and you are ready for the finishing touches ––the logo and banner that will give the site your personal branding. Next issue we will get into creating and optimizing graphics for the web, using Fireworks and Dreamweaver. One final step now will prepare your page to receive your logo graphics, and let you know how large the logo should be.

This is achieved by inserting in the top banner cell a "placeholder" which, once in place, will show what size to make the artwork, and later will serve as a vehicle through which to substitute and transfer the web graphics. Find the Image Placeholder tool (menu>Insert>Common tab>Image Placeholder) ––see figure 8––and drag the Placeholder icon diagonally from the upper left to the lower right of the top banner cell. The size of this potential graphic appears automatically.

Figure 8

Do your homework.
To prepare for the next tutorial, create and have ready the components for a personal logo/graphic collage the size of the banner (858 x 120 in my example) in any program of your choice––Photoshop, Illustrator or whatever. Next time you will convert it to web art and import it into your page.

See you next time with a tutorial on Graphics for the Web. So bring your bitmaps, photos and vector art, and we will discuss them all. Happy Holidays!

Melody Reed is a native of Manhattan. She has been an instructor at Pratt Institute for 18 years, chairperson of the Macromedia MX web design SIG of NYPC (using her Power Mac, of course!), and a computer consultant, web designer, digital photographer and tutor. She also represents artists by providing copy, graphics and implementation etc. for online gallery alternatives via websites or eBay, and hosts the "Arts and Technology" cable TV show on MNN (for which she is always seeking interesting guests.)

Melody can be reached for questions or consultation at 917-721-9696 or inspiration@melodyreed.com.

Web Design and Layout
Part 2

A TUTORIAL BY MELODY REED

Jan | Feb 2004
Issue No.14