The Viewpoint: Macromedia Dreamweaver 3.0 (part three)

by Jason Smith | Jul 31, 2000 7:00:00 AM

Tags: Jason Smith

Takeaway: Want to be a Web page developer? Learn the importance of Web page layout, how to create tables, insert images, and much more in the final part of Jason Smith's Dreamweaver series.

Welcome to the third and final installment in my series on Dreamweaver. If you missed out on parts 1 and 2, please check them out. Part one covers the basics and how to get started creating a Web page using Dreamweaver, while part two answers questions you may have on inserting links, images, and tables. In part three, I’ll wrap everything up with a few more helpful hints about Dreamweaver, what I think is the best WYSIWYG (what you see is what you get) HTML editor on the market.

Web page layout
When you mention building Web pages, it’s generally suggested that you start off by working out on paper what you want the layout of your page to look like. I believe this is an excellent first step. A visual layout can aid you greatly when you design your Web page, providing a guide to follow as you create it. The difficult part, however, often lies in making your Web page look like your layout. There are a few techniques you can use with Dreamweaver that will help you make your Web page dream a reality.

Tables
One of the most versatile Web page design features is a table. Tables act as excellent assistants when designing Web pages from a layout. You can set up multiple tables, different sized tables, and tables within tables in order to achieve your layout goals. Instructions on how to insert a table are clearly outlined in part two of this series. Once you have reviewed that information, you can use the following techniques to use tables in a more useful fashion.

For example, if you want your Web page broken up into Header—Body—Footer, like in some word processing documents, you can create a table with one column and three rows. If you put your imagination to the test, the layout possibilities are really endless.
One of the easiest ways to create a sidebar, a popular technique for setting up a Web page’s layout, is to create a table with two columns and one row. One cell will be for the sidebar material, and the other will be for the body of the Web page. With this table, you can put links to the side, while displaying text in the middle of the page (see Figure A).

Tables and images
If you would like to insert an image somewhere in a body of text on your Web page, it’s a good idea to create a table to host such an image. You can create a table with one column and two rows, the top cell serving as a place for the image, while the bottom cell acting as the spot for a caption. Would you like to insert that image table to the right and have text flow around it on the left? Highlight your table by clicking on one of the corners and choose “Right” from the Align field on the toolbar. (If this toolbar isn’t on your screen, you can make it appear by clicking on Modify | Selection Properties.) Don’t underestimate the power of tables. There isn’t much that can’t be done with them.

Other useful goodies
Much of what can be done in HTML code can also be done using a WYSIWYG editor.

Using comments
If you think that once you have crossed the line into WYSIWYG world, you no longer have to comment your HTML documents—think again. It is always a good idea to comment your Web page, especially if you are designing one that others will be working on at a later time. Comments don’t appear in the finished product, and are a great way to answer the question, “What was I thinking?”

You can insert comments in Dreamweaver by clicking on Insert | Comment. Once you insert a comment, select View | Invisible Elements. A little yellow icon will then appear wherever you placed your comment. To read the comment, click on that little yellow icon. The comment will be displayed in your toolbar.

Horizontal rules
Horizontal rules make a nice addition to your Web page as well. You can insert these by clicking on Insert | Horizontal Rule. You can change the options—height, width, alignment, and shading—for this dividing line in the toolbar. Personally, I like the recessed look that you get from a shaded horizontal rule.

Meta tags
If you want your Web page to be recognized by the world at large (as well as some search engines), you might want to consider altering some of the Meta tags in the document. By clicking on Insert | Head | Keywords, you are taken to a window where you can enter words that describe your Web page. Don’t forget to separate these items with commas.

When search words are entered in some search engines, the engines will search in an HTML document for a match. If a match is found, your Web site might pop up! So be sure to have plenty of keywords that describe what your Web site is all about.

Style sheets
Although extremely useful, style sheets can be very difficult to code in HTML. However, Dreamweaver also offers an easy way to set up style sheets. By clicking on Text | Custom Style (Selection) | Edit Style Sheet, you can set up a style sheet for your Web page. From this window, click on New to create the style sheet.

If you go through all the options, you’ll quickly realize that, with the help of a style sheet, you can define the entire design of your Web page from the text to the background. Once you are finished defining your style, choose your style from the Text | Custom Style (Selection) menu. Now the style sheet has been applied to this Web page.

The final word
Dreamweaver, along with other WYSIWYG editors, can be an invaluable tool when creating a Web page. Now that I’ve shown you how to get started with a WYSIWYG editor, go out and create Web pages using these techniques. However, if you are working in an environment where someone else is depending on readable code, please keep my warning from part one in this series in mind, and do your best to keep the HTML code clean.
Check out part one and part two if you missed them. If you'd like to offer your take on this article or the Dreamweaver series, please post a comment below or send us an e-mail. Your feedback is greatly appreciated.