Dreamweaver Basics

How to Use This Guide

I wrote this guide as lecture notes for the courses I teach on web composing. I was unable to find an existing guide that included everything I needed. It's written for novices, although some sections should be useful for everyone.

I teach web composing, not just web editing. You need to know how to create pages, but also how to use the web to publish. Publishing is more complex than creating (e.g., you must think about your audience/users). See: Composing a Website

If you want to create a few web pages, this guide will show you how. But it's not definitive. Instead, there are many good websites with lots of tutorials, advice, and information, especially HTML Help by the Web Design Group (http://www.htmlhelp.com/). Dreamweaver includes excellent help files and other documentation.

I originally wrote this guide a few years ago, and you're probably using a newer version of Dreamweaver. I've updated the guide, and most/all the guide should still be correct. But let me know if you find an inconsistency.

I like icons, so I use them a lot. Here's my system:

This is a definition or frequently asked question.

This is a big idea (e.g., a tip or warning).

This is the Dreamweaver icon, so it represents a Dreamweaver-specific tip.

Assumptions About You

• You're taking a course from me. You could use this guide independently, but it's not written for that purpose.
• We have a limited time together. I won't talk about everything in this guide, so you should read through it on your own.
• You can be meticulous. Most teachers are great at improvisation and thinking on their feet. Creating a web page is a kind of computer programming. Computers are very picky, with little margin for error. You can't fudge things. One type-o can have big consequences.
• You can be patient. Creating web pages is a new skill. Spend time, attitude, and effort learning how to do it right and do it well.
• You can take risks. The best way to learn these skills is to experiment.
• You can practice. These are complex skills. You'll need to practice over time to master them.

Why use Dreamweaver?

Dreamweaver is the best program for creating web pages and websites. It's accessible to novices, but includes powerful features for experts. It's used by many professional web designers.

Dreamweaver is on all the lab computers at UWSP, including the Remote Lab. You also can download a 30 day evaluation copy from the company that makes Dreamweaver.

But you don't need Dreamweaver to create web pages. web pages are created in HTML, an "open standard." This means anyone can create a program to create web pages. Many such programs have been written, and some are free. Even word processors or simple "notepad" programs can create webpages. Dreamweaver is simply the easiest, most powerful program I've used.

HTML: HyperText Markup Language. web pages include plain text words, accompanied by hidden markup tags to make the words bold, italicized, hyperlinks, etc.

I discourage using Microsoft FrontPage or Word. A web page created using a Microsoft program may not appear correctly in a non-Microsoft Web browser. Microsoft Internet Explorer is a Web browser, but there are other, better browsers (e.g., Firefox ). Some of your audience may not be using Explorer.

The bigger question is whether you should learn using a program like Dreamweaver. Dreamweaver is a WYSIWYG program, so it does many things for you. There is a similar issue in learning math: when should children be given calculators? If children don't understand basic math, using a calculator is risky. Likewise, Dreamweaver is useful, but you should learn enough HTML to understand what Dreamweaver is doing. You should be able to use the WYSIWYG features most of the time, and be able to tweak the HTML. In other words, don't trust technology you don't understand.

Dreamweaver is like a state-of-the-art scientific calculator. You need to have some skills to take advantage of its most powerful features. But once you master these features, Dreamweaver will save you a lot of time and energy.

WYSIWYG: What You See Is What You Get ("wizzy wig"). A program like Dreamweaver works like a word processor, and automatically creates the necessary HTML.

Dreamweaver is a good program for learning by experimenting. The Split view lets you see the WYSIWYG and HTML at the same time.

Try experimenting in a WYSIWYG, then studying the resulting HTML.

Learning by Trying

While creating and publishing web pages, it's very difficult to break the computer, the software, or the Web. In most cases, your page simply won't appear correctly (or at all!). Try to retrace your steps and find the mistake. Test every major change immediately, so mistakes don't pile up.

Edit: Undo is your friend.

Before You Begin

Read What's a Webpage?

Getting Started with Dreamweaver

Find and open Dreamweaver. These directions were originally for Dreamweaver MX (Education version) on Windows 2000. The steps and appearance will vary slightly for different versions.

If you're offered a choice of workspaces, I recommend Dreamweaver 4 or Design, not Dreamweaver MX or Code. To change your workspace later, choose Window: Workspace Layout.

You should see something like this.

If you open Dreamweaver the first time, the webpage is blank.

Whenever you want to create a new webpage, you choose File: New and then Create. Dreamweaver offers many choices, but the default choices are the best for beginners.

Dreamweaver can display a list of your files, if you show Dreamweaver where your files are. Using the dropdown menu, find MyFiles.

You can move, copy, and delete files directly in Dreamweaver.

Saving Your Work

Now you can start creating and save web pages, in your newly-defined website. Always save a new page immediately. Save often as you work.

File: Save All will save all your open web pages in one click.

In Dreamweaver, a "document" is a web page (e.g., resume.htm). Microsoft Word also creates "documents" (e.g., resume.doc).

When you save, don't include any spaces or special characters. You can include underscore characters. Capitalization sometimes matters. I recommend never capitalizing files or folders when creating web pages.

Dreamweaver will automatically add ".htm" at the end of the file name. A web page is a file, just like any other document on your computer. The 3 letter suffix is what matters. Different kinds of files have different suffixes.

Suffix	File Type
.doc	Microsoft Word document
.htm	Web page
.html	Web page
.gif	Image
.jpg	Image
.pdf	Acrobat PDF

There is no difference between ".htm" and ".html" except in a complete Web address. I recommend always using ".htm" and Dreamweaver does this automatically.

You can't change a Word document into a PDF just by changing the suffix. Manually changing the suffix will not change the nature of the file. It will just confuse the computer.

How to Create a Web Page

The best way to create a new page in your portfolio is to copy an existing page. Open a page like 5_assessment.htm and save it with a new file name. Then the new page will already have the portfolio formatting, header, and footer. Just change the title and content.

A web page is similar to a document created in a word processor (e.g., Microsoft Word). A web page includes the text and pictures the reader sees, and a lot of hidden text that the computer reads. This hidden text is a "mark-up" language. Just as you might mark-up a book by underlining important information, the text on a web page is marked-up to organize and emphasize information. That's what HTML stands for: HyperText Mark-up Language. HyperText means the text is nonlinear: it's possible to surf the Web by moving quickly from one page to the next.

HyperText is the primary power of the Web: organizing ideas in a nonlinear way. For comparison, a novel uses linear text.

Dreamweaver is a WYSIWYG program, so it will create hypertext for you. You can write and format your information in the "Design View," and you can see the corresponding HTML that Dreamweaver creates. In the upper right corner of the document window are three buttons to switch views.

Code View will show you the HTML. Design View will hide the HTML. Split view shows both views.

Code View is similar to the View: Source option in a Web browser. Unlike in a browser, you can make changes.

HTML is a combination of text and tags. Tags are hidden instructions the computer applies to text. Tags look like <code></code>. For example, bold text is created by using the <strong></strong> tags. The first tag tells the computer to start using bold text, and the second tag tells it stop using bold text. Notice that Code View has the icon <>, representing HTML tags. Notice that Code View uses color to distinguish tags from normal text.

Always make sure you have a closing tag for every opening tag. Otherwise, the computer will continue following the opening tag. (e.g., The rest of your web page will be bold.)

Here's a list of tags, what they do, and how to use Dreamweaver to create them.

Tag	Purpose	in Dreamweaver...
<title></title>	Title of the page. Not part of the body of the page.
<p></p>	A paragraph. Without paragraph tags, all text would run together.	ENTER
<strong></strong>	Bold	CTRL-B or
<em></em>	Italics	CTRL-I or
<h1></h1>	Header
<h2></h2>	Smaller Header
...	Most people don't use headers below <h3>	...
<h6></h6>	Smallest Header
<ul></ul>	Non-numbered list (bullets)
<table></table>	Table. Tables are complicated. Dreamweaver is great for creating and editing tables.

There is a tag for underline, but never use it. On a web page, underlined text is supposed to be a hyperlink.

In Dreamweaver, many features are accessible through the Properties Window or Insert Window:

These tags don't need closing tags.

Tag	Purpose	in Dreamweaver...
<br>	Line break, instead of a new paragraph	SHIFT-ENTER
<img src="">	Image	in the Insert Window

Always put your images in the right folder first. Otherwise you may have problems later.

Last, but not least, these are the tags that make a web page truly useful: hyperlinks to other pages.

<a href="page.htm"></a>	A relative hyperlink to another page in the same folder	or
<a href="http://www.msu .edu/page.htm"> </a>	An absolute hyperlink to another page	or
<a name=""></a>	An anchor, to mark a place on a page (far from the top). Anchors can be hyperlinked to using page.htm#name_of_ anchor

The bullseye is a really fast way to make hyperlinks. Select the text and drag the bullseye to the file you want to link to.