Welcome to the first in a series of articles intended to help you learn the ins and outs of Dreamweaver. While I will be taking an approach catered to this specific piece of software, you can apply these techniques and instructions to almost any WYSIWYG editor. So don’t feel as if you need to rush out and buy a copy of Dreamweaver (even though I did).
A little introduction to WYSIWYG
When you want to make a Web page, there are a large variety of applications to choose from. Some people prefer to use Notepad or a similar program. These people generally know HTML inside and out and can literally create a Web site from scratch with very little assistance.
Some people like the added features of a code editor such as HomeSite. These code editors allow you to write code faster by offering one-click access to portions of code, such as inserting a table or hyperlink, where all you have to do is fill in the information.
However, there are those out there who either do not have the time to learn HTML or want a program that makes writing HTML easier. For these people, there are applications known as WYSIWYG editors. WYSIWYG stands for “What You See Is What You Get.” By using these editors, it’s possible to create a large number of Web pages without knowing a single snippet of HTML.
This doesn’t mean that WYSIWYG editors are only for those wishing to avoid dealing with HTML. People who wish to learn HTML can use WYSIWYG editors to help them learn as they create documents. A person can create something in a WYSIWYG editor, look at the code, and see what has been done to create a desired effect. In this fashion, WYSIWYG editors can be looked at as a kind of HTML dictionary.
Dreamweaver is a WYSIWYG editor created by the geniuses at Macromedia. For HTML applications, it is my tool of choice.
As soon as you launch Dreamweaver, you get a blank page similar to that of a word processing document. At this point, several things have already occurred. All the HTML tags that define a Web page are already in place. You don’t have to worry about typing <HTML> or </HTML>. In fact, if you don’t want to, you never have to type a single piece of HTML code at all.
So you now have a blank Web page and a few floating menu bars. Don’t worry about the floating bars for the moment; they’ll come in handy later. For the time being, you are ready to start creating a Web page.
If you are not satisfied with the default white background that Dreamweaver has chosen for you, all you have to do is go to Modify, then Page Properties. This is a great place to start, because from Page Properties you can define the background color as well as the entire style of your Web page.
If you pull down the Modify menu and go to Page Properties, you will see a box similar to the one in Figure A. From this point, you can choose the color of your background or use an image as wallpaper. You can also define the default color of your text and links here.
|In the Page Properties menu, you can change the way your Web page background will look.|
Let’s say you want a purple background with neon green text. You want your links to be blue before being clicked, yellow while being clicked, and pink after they have been visited. In that case, you’d want your Page Properties to look just like Figure A. (And just so you know, I am not in kindergarten. I just happen to like bright colors.) You can also title your document here. This is the title that will appear at the top of the screen in the Web browser. When closing the Page Properties window, be sure to click Apply and then OK when you are finished making your changes.
Other color schemes
If you can’t come up with a good color scheme, Dreamweaver has a few predesigned ones for your use. To access these schemes, go to Commands and then Set Color Scheme. From here, you can play around with the color options. You might find something that you really like.
|You can play around with predesigned schemes by going to Commands, then Set Color Scheme.|
Now you are ready to get down to work. All the presets have been made, and a color scheme has been chosen. You are now officially ready to dig in.
Next is the text
Now you can type out all the text you want. You can type out a whole novel if that’s what your heart desires (although that much text might frighten off visitors to your site). Dreamweaver has a layout similar to word processor programs such as Microsoft Word. However, a key difference is that when you hit [Enter], you'll skip a line rather than moving the cursor to the next line. If you would like to move down just one line, rather than skipping one, you have to hold down [Shift] and hit [Enter]. This is the difference between a paragraph tag and a break tag in HTML code, but you are not here to learn about HTML.
So now you have some text on the page, but you need to format it. To do so, simply highlight the words that you wish to format and pull down the Text menu. From here, you have the options to indent, format your text in different heading styles, align your text, change the font, size, style, color, and more.
For example, let’s say you have a list of items that you want to make into a bulleted list. You can do this by typing up your list, hitting [Enter] after each line, highlighting the text, and then selecting Text, List, and then Unordered List. Of course, if you would rather have numbers in place of the bullets, choose Ordered List.
A word about HTML cleanliness
If you are just creating Web pages for your own personal use, you won’t need to worry about what the HTML code looks like. However, if you are in a business environment where other people depend on being able to read HTML code, I can tell you that most of the WYSIWYG editors on the market can make the HTML difficult to read.
I have found Dreamweaver to be the least likely to mangle code beyond recognition, but it is a WYSIWYG editor. All software packages from this species have this one horrible similarity. There are things you can do, however, to prevent a total massacre of your code.
When playing with fonts and font sizes, don’t keep choosing different styles and colors until you find one that you like. If you change the format of the text and find that it doesn’t appeal to you, choose Edit and then Undo before you change the format of the text again. If you don’t, you risk the chance of having your HTML full of font tags and end font tags. Trust me, this makes for a big headache if you are trying to alter HTML. This is especially true if you make different sections of text different sizes, colors, and fonts, and then change the entire body of text to one uniform style.
Another thing you can do to alleviate some of the messy code is to choose the Commands/Clean Up HTML option when you have finished the Web page. This is a wonderful tool for straightening out the HTML that you have written. One slight problem should be noted with this feature—if there are any scripts running on the Web page, it has been known to erase portions of Java- and VB-scripts; otherwise, it’s a good feature to use.
Tune in next week for part two of this three-part series, where the discussion turns to how to easily insert links, tables, and images as well as some interesting combinations of these three options. If you’d like to offer your take on this article, please post a comment below or send us an e-mail.