Computing & Information Services

Webpage Creation Using Dreamweaver

The contents of this guide were written specifically for Dreamweaver version 4, however, much of the information contained in this file should be applicable to later versions as well.

Introduction to HTML

In the beginning, there was HTML. HTML became the standard of the web-based world that we know and love today. It is based on tags that tell the browser what to display and how to display it. As time went on, the browsers got fancier and so did HTML. HTML itself is easy to learn, if you don't mind a little programming. If you take any HTML document (such as this one) and look at the source, you will see that it is just a text file that the browser reads. You can create this file with Notepad or SimpleText. It is worthwhile to learn the basics of HTML even if you use a program such as Dreamweaver to create the webpage. Every student at Reed can have their own webpage accessible to the outside world.

[Back to Top]

Dreamweaver 4

Dreamweaver 4 makes creating a webpage easy. Of course, lots of programs do this. Dreamweaver makes creating a good webpage easy, which not so many programs do. Dreamweaver hides the HTML code behind a WYSIWYG interface. The Objects panel allows you to add images, links, tables and several other thing with the click of a mouse. The property inspector allows you to easily see and change the various design options you have. With just these two tools, you can create a great deal, but Dreamweaver has many more elements that allow for streamlining large projects or making small projects slightly easier. The help pages here will help you get started using this program.

[Back to Top]

Getting Dreamweaver

If you are on campus, you can get Dreamweaver 4 from the Academic Software Server, under the Web Tools folder. To install it, copy it to a folder on your Hard Drive. In the Dreamweaver folder, there is a folder "Put my contents into Prefs". Open this, and copy the contents to Macintosh HD > System Folder > Preferences. Double-Click the Dreamweaver icon to open up Dreamweaver, and start creating! If you are using OS X, Dreamweaver will open as a classic program. It is also available for Windows 98 and above computers on the Win_Tools server. Remember, since this is a keyed program, you will only be able to use Dreamweaver on campus with a computer connected to the network and the Key Server software installed.

The Reed-provided version of Dreamweaver is Keyed Software, requiring the installation of KeyAccess on your computer in addition to the standard software.

[Back to Top]

Styling Tips

When you begin a webpage, you should plan ahead what you want it to look like. Here are some tips on style.

  • Your code should be easy to read, use white space and line breaks. Use comments as needed to remind yourself of what you're likely to forget.
  • Keep your pages simple. Less is more.
  • Don't use frames unless you really know what you're doing. There are a few things more aggravating than having your computer crash because a web designer couldn't use frames correctly. Sounds and bits of Java should also be used with caution.
  • Most people find flashing titles and other blinking things really annoying. Avoid them when possible.
  • Obey general graphic design rules; pay attention to your use of white space.
  • Do not write or 'optimize' for one browser. All browsers are not created equal. Check your work in Firefox, Internet Explorer, and Safari to ensure a broad range of viewers will be able to view your content.
  • You'll want to employ neutral hues that are aesthetically pleasing on various monitors. Colors will appear differently on every monitor. Don't try to finesse color shades; it is an exercise in futility.

[Back to Top]

A Site in Dreamweaver

Open Dreamweaver by double-clicking on its icon. It may be found in your Applications folder.

If you want a single page, then all you need to do is open Dreamweaver and begin editing on the blank page it gives you. If you plan to have more than a few pages, using Dreamweaver's site creation tools will help save time when linking and interconnecting webpages. One of the biggest advantages to HTML is linking. Good sites are often non-linear and have links to pages when appropriate, wherever you happen to be. Managing such a site can be a nightmare. Creating it is even worse. Dreamweaver has some tools that can be well suited to the design and management of a large site. One of the main tools is the site manager. To use it, you must first create a site in Dreamweaver.

When you are in the IRCs, setting up a site may or may not be convenient. Dreamweaver will not save your information if you are working on an IRC, so you would have to set it up every time. Dreamweaver still works without setting up a site, but some of its more advanced features will be unavailable.

When you select a folder name, be careful to use only alphanumeric characters. When naming files and folders that will be part of your website, any spaces or characters other than numbers and letters will be unreadable by web browsers.

  1. Open Dreamweaver and choose Site > New Site.
  2. Choose a name for your site and type it in the Site Name field.
  3. Click the folder icon beside the Local Root Folder field. From here you can find an existing folder or create a new one in a location of your choosing.
  4. Now fill in the HTTP Address field with the address where your site will be accessed from. For instance, if you will be putting your site in the HTML folder of the home folder of your Unix account, you would enter http://www.reed.edu/~YourUnixLogin/.
  5. At this point, you have two options. If you want Dreamweaver to update your files on the Reed server (or any other FTP server), continue on. Otherwise, hit OK and skip to Step 11. When asked whether you would like to create a cache file for the site, select Create.
  6. To have your webpage be accessible to Dreamweaver (this makes it a little easier to update files later), go to Web Server Info on the left. A new set of options will be available on the right.
  7. For Server access, you want to expand the dropdown menu and select FTP.
  8. For FTP Server, type your FTP host address. For Reed, it is ftp.reed.edu.
  9. Your Login will be your login name for the site. At Reed, it is your Unix login.
  10. You do not have to fill out the Password field. If you do, your password will be saved on the computer and you will not have to enter it again. If you do not fill out this field, you will be prompted to log in every time you connect to the server. For Reed, you should use your Unix password.
  11. Leave the other options as they are and hit OK. Dreamweaver will ask if you want to create a cache file. Select Create.

[Back to Top]

The Site Window

The site window shows you all the files and directories within your site. If you want to create a new folder in your site, you can do it here, just Ctrl + click on the folder at the top of the list, or whatever folder you want your new folder to be in, and select New Folder. You can move files by dragging them to a new location. If you move a file in this manner, Dreamweaver will automatically check any files that link to this page and ask if you want to update those links. This is usually a good idea. Manipulate files here, rather than in the finder, so dreamweaver will be able to keep dead links out of your document.

If you have multiple sites, you can change which site you're working on by using the pull-down menu at the top of the site window. You can also use this pull-down to go to the Define Sites dialog, which allows you to create new sites and edit the properties of existing sites.

To open an existing file for editing, double-click on it. To create a new file, Ctrl + click on the folder you want the file in and select New File.

If you specified a server to connect to in the previous section, you can use the site window to connect to the remote server. Hit the connect button at the top of the site window. The files on the ftp site will be shown on the left, while the local files will be seen on the right. You can get files from or put files on the server by selecting the desired files and hitting Get or put, respectively.

[Back to Top]

Creating a Webpage

Open Dreamweaver, if it isn't already open. If you don't already have one, open a blank window with File > New. Now you are ready to write a webpage.

Just start typing in the new document window. When you save it, make sure to put it in the directory of your site. Dreamweaver will show you all the files in your site by the site window. From the site window you can open, move, rename, or whatever your files. If you move or rename a file, dreamweaver will check your site and update all the old links to point to the new file. Is that spiffy or what?

Don't forget to save your page!

Now you have a webpage. But it's all text, and probably has boring colors. You can change that using the Object panel and the menus. Most of the rest of the tutorial is going to introduce you many of the things you can do with dreamweaver.

[Back to Top]

Formatting Text

Now that you have words on your page, you should know how to format them. The Text menu and the property inspector have many different ways of styling the text on the screen. The thing to remember when styling text, though, is not to worry too much about layout. People use different browsers on different monitors with different computers to view your page, and a lot of them will see a different layout than the one you see in Dreamweaver (though Dreamweaver's layout design tools attempt to make sure everyone will see the exact same thing). But you still want to have a separate title, section headings, or a really big name on your page, so here's how to do it.

Text Format

Text formats are important. The Format menu has the text formats that have been with HTML for a while now. They are applied to the whole paragraph. The drop down menu has several choices for your textual pleasure. Here they are in no particular order:

  • Paragraph: This is the default format. It is the plain, paragraph style of HTML that you will probably use throughout your page.
  • Heading: There are six headings. Each one has a certain strength to it. Heading 1 is for things like the title of the page. It is big and bold and stands out. Heading 6 is small and meek, a side note to a footnote type of style. The other headings range between the two extremes.
  • Preformatted: 
    Preformatted text looks blocky and terminal-like.
    It is a good style for computer code or such. Preformatted text was originally designed to keep the browser from formatting the text, so you can put in multiple spaces or returns and such. How well that intention has been carried out depends on the browser.

Size Matters

So you want some text bigger than the rest. Before you type it, change the size in the Property Inspector. Or select text and change the size. It's that easy.

The Color of it All

You can change the color of text using the gray box with the arrow in it. When it's gray, it's using the default color of the text (specified in Page Properties). But you can change that by clicking here and selecting another color.

Emphasis

To provide emphasis, strength, and other similar things you might want to have in your text, HTML provides tags that allow the user to customize what he or she thinks is the best way to add strength or emphasis. But, these tags are not used very often because the writers of webpages would rather use bold or italics specifically. To bold or italicize text, use the B and I buttons respectively.

Justify Your Text

Left, right or center justify. It's next to Bold and italics and applies to the whole paragraph the cursor is currently in.

Lists

A list is a wonderful way to organize information.

  • This is an example of a list.
  • This was created with the bullet icon (on the left).
  1. This is an ordered list.
  2. The numbering happens automatically when you push enter.
  3. Lists are spiff!

You can create a list at the click of a mouse. To start a list, click on one of the list buttons. The list button with bullets creates a bulleted list. The one with numbers creates a numbered list. Type away. To create a new bullet or number, hit Enter/Return. When your done with the list, hit enter and click the list button again to turn it off. You are the proud creator of a list.

[Back to Top]

Page Properties

One of the first things you want to do is open the page properties window. Go to Modify > Page Properties. This will open a dialogue of some hidden information (stuff people used to have to code by hand). Here is a description of the fields in the window:

  • Title: The title of your page. This is usually displayed in the titlebar of the web browser. This is also changed in the textbox in the titlebar.
  • Background Image: This is the image that will be plastered behind all your text, and everything else in your webpage. By default it is tiled. Make sure your background image isn't going to hinder reading of the text.
  • Background: This is the background color of your webpage. The field is for the hex RGB number of the color, but you shouldn't worry too much about that. Click on the patch of color and a color palette will appear. Choose the color you want for the background.
  • Text: The color of most of the text on your page.
  • Links: The color in which links will appear on your screen.
  • Visited Links: The color links the user has already been to will appear.
  • Active Links: The color links the user is using at the moment will appear.

Don't worry about the rest of the options. Some of them only work with one browser, and others are advanced features that most people don't need. If you are curious, hit the Help button to get Dreamweaver help.

[Back to Top]

You've got a page, but it's too long and you want to break it into several pages, or your friend has a really awesome page and you want people to go there. So how do you do it? With a hyperlink. Links are the veins of the internet, whisking people all over the world in a few mouse clicks. Creating a link is easy. Select the text, or the picture, you want to link to somewhere. In the Property Inspector, there is a field called Link. Enter the site you want to link to here (such as "http://www.mybestfriend.org", Don't forget the "http://"!), or select the folder icon to choose a file in your site to link to. Good linking is one of the more important aspects of a webpage. And it's so easy, too.

There's another kind of link that's also important. That's the mailto: link. This is the link that allows me to say e-mail CUS with all your computing problems," and all you have to do is click on the mailto: link to send that email. Click on the Insert E-mail Link button in the Objects panel to create a mailto: link. You will be asked what the text you wish to display is (ie - "email me"), and what the email address is (yourstruly@reed.edu). Alternatively, you can select some text (or an image! or both!) and hit the Insert E-mail Link button to create a link on that text. Now you can get some mail about how much people liked your site.

[Back to Top]

Pictures and Images

So you want to put a picture of your dog wrestling an alligator up for the world to see. Well, if you have the picture on your computer that's easy enough. On the Object panel hit the Image icon. If you don't know which icon that is, hold your mouse over the icon for a moment to see a tooltip pop up. The tooltips will tell you what all the icons represent.

When you hit the Picture button, a dialogue will come up asking where the picture is. Find the picture and select Choose. If you choose a picture not within your site, Dreamweaver will ask if you want to copy the file to your site, say you do and select where. Often, people have a directory for all their images. To create one, select the New Folder icon in the Copy File As dialogue. Name your folder something useful, like images or graphics. Stick all your pictures in there, and they won't get shuffled in with the other types of documents.

Another way to get pictures in your site is to use the site window. Save, move, or copy the images you want to use into a folder in your site (usually titled "graphics") using the finder. Open up Dreamweaver, and look in the Site Manager. You will see the pictures there, waiting to be put on the webpage. Open up the page you want to put the picture on. Drag the picture from the Site Window to your document. Your picture will appear. Poof, that's it.

[Back to Top]

Horizontal Rule

The horizontal rule merely creates a bar on the screen. It is useful as a simple separator.

You can change the width and height of it; the color will be a mirror of the background color. To create one, click on the Horizontal Rule button on the Objects panel. A simple horizontal rule will be created. You can change its properties in the Property Inspector.

[Back to Top]

Putting Your Webpage on the Internet

There are several different ways to get your page up on the Reed Webserver. Three of these ways are outlined here. If this is your first time connecting you have to create the HTML folder, which you must do with either the Student Server or via FTP.

Your webpage will be displayed at "http://www.reed.edu/~yourunixlogin". Don't forget the tilde (~), it is very important.

Using Dreamweaver's Site Connection Tool

Dreamweaver has a built in Site Connection Tool that allows you to easily upload your files to the Reed Webserver via FTP. This requires the definition of a site, as explained in A Site in Dreamweaver. Make sure to go through the instructions for having Dreamweaver update the files on the site (i.e. go through all the instructions). If you are using the IRCs, this may not be the best method. Try Using the Home Server (see below). If you created a site, you should be able to open your Site Window in the menu, click Window > Site Files. You should have a window that looks like the image below.

Sites Window

If you only see one column of files, click on the triangle in the lower left of the window. This should expand the window. To connect to the remote server, click on the button that looks like two plugs with a little light next to them. If you did not supply your password earlier, you will be prompted to do so now.

When you connect, you will see two lists of files. The list on the right are the files on your local hard drive, while the list on the left are the files on the remote server. In the menus, go to Site > Synchronize. You probably want to synchronize the entire site in the first pull-down menu. In the second, more likely than not the local files are newer so hit "put newer files to remote" from the second pull-down menu. Then hit OK. After a moment, a window will pop up telling you which files will be updated. Hit OK again and the world gets to see your latest creation.

You can also upload and download files manually using the Site Window. Select the files you want to put on the server or get from the server in the site window. along the top of the Site Window, toward the right, are two buttons with arrows. The down-pointing arrow is the button for getting files from the server. The up-pointing arrow is for putting files on the server. Click the appropriate button. A popup will ask if you want to include the dependant files. You probably do, so go ahead and click OK. Your files will be transferred for you.

Using the Home Server

You can now put your website up directly on your home server. Connect to your student server using your favorite method. If you are on campus, via the chooser will probably be easiest. For more information on connecting to the Home Server, see Connecting to Your Home Server.

Put your web content in the folder called "html" on your Home Server. Now you can browse to your data on the web using the web address http://www.reed.edu/~yourunixlogin.

Using FTP

Using FTP is similar to using the Student Server. You can connect to the Reed Server using Fetch, as described on the Fetch help page.

[Back to Top]