Linfield College

Navigation

Educational Technology and Curricular Innovation

Linfield Scenic
Linfield Home » Arts & Sciences » Educational Technology and Curricular Innovation » How-to Information » Creating a Web Site with Dreamweaver

Creating a Web Site with Dreamweaver

Dreamweaver is considered by many to be the standard hypertext markup language (html) editor among web professionals. With Dreamweaver, the user can work either directly with html code or in a graphic editing environment that functions like a word processing program (e.g. MS Word). Although Dreamweaver can accomplish many difficult tasks- such as writing Cascading Style Sheets (CSS)- it is relatively easy to use.

The Workspace

When you first open Dreamweaver, there most likely will not be a workspace. Go to File > New > Basic Page (HTML) on the main menu. This will open a new work area.

The Document Window

The Document Window displays your web page in a “What you see is what you get” (WYSIWYG) view- i.e., it shows you basically what your text and images will look like when they are seen in a web browser. The toolbar across the top lets you choose one of three views:

 Code View: Displays the editable html source.

 Design View: Displays the WYSIWYG view. This is the default setting.

 Split View: Displays both the WYSIWYG view with the code view across the top.

Next to the "view" icons is a text field where you can enter your page's title. This title is important as a search agent tool and should be written in natural, formal language.

At the bottom of the Document Window is a status bar containing a tab for the page you are working on and several other useful fields:

 Tag Selector: Displays the tag associated with the current cursor location. Clicking on the tag selects an entire component (such as a heading or an image).

 Window Size: Displays the windows current dimensions in pixels. You can change the size by clicking on this field and selecting one of the other sizes from the drop down menu. These sizes represent some of the most common sizes of monitor screens. This is a good way to quickly test how your page looks on various monitors.

 Document Size and Download Time: Displays your document size in kilobytes and how long it will take to download. Note: The default setting is for 28.8 kbs modem. If you want to use this feature, you may want to reset the default speed in Edit > Preferences > Status bar.

Properties

Everything you insert into a page- including text, graphics, tables, and horizontal lines - are considered “objects” that have certain “properties.” When you select an object, the Properties bar at the bottom of the screen displays all of the formatting properties associated with that object, including any links. Using this bar, you can format the objects, such as:

  • Properties of text: Style, font, size, text decoration, alignment, bullets, numbering, indent, and links.
  • Properties of images: Height, width, source (path of the image), alignment, link, and alternative text (text displayed when the mouse rolls over the image).
  • Properties of horizontal lines: Width, height, alignment, and shading.

Modifying page Properties

You can establish background colors, margins, and other basic page/layout features by selecting Modify > Page Properties.

Under the "Title/Encoding" context in the dialogue box is a field in which you can enter a title for your web page. You can also set default colors under "Appearance" for your text, background, and links (in all three states) by clicking on the appropriate square and selecting a color. As you move the dropper around the colors, the hexadecimal values of each color will appear in the gray bar across the top. More options are available under the buttons on the top right: selecting the color wheel will give you a spectrum from which you can choose millions of different colors. Selecting the arrow allows you to choose from a collection of gray shades.

Panel Group

The Panel Group is a sidebar that expands, displaying certain helpful functions within the sidebar. These include, among others, file management or Files. This function helps in the creation and management of the site (more on this to follow).

Previewing Your Work

Since different browsers render html differently, it is a good idea to preview your work in the two major browsers- Netscape and Internet Explorer. Dreamweaver offers a shortcut: under the File menu, select Preview in Browser. Dreamweaver will open the browser on your machine and load your page. You can add up to 20 different browsers by selecting Edit browser list. Your primary browser will automatically be assigned the keyboard shortcut F12, and your secondary browser will automatically be assigned Ctrl-F12.

Inserting Interactive Images

A rollover- easily one of the most popular visual effects on the internet - is an image that changes when you roll the mouse over it. The effect is created when two images swap at just the right time. You can create mouse rollovers by selecting Insert > Image Objects > Rollover Image. You are prompted for a name that will refer to both images (any unique name will work) and are given two browse button to navigate to the two image files you want to use. Checking the option Preload Rollover Image will cause the images to be stored in the client browser’s cache so they will appear immediately when they need to. If you want to make the rollover image a link, you can also insert a Uniform Resource Locator (URL) in the given field.

Creating and Managing a Site

Dreamweaver provides a way for you to save and work with several different web sites without needing to define new site connection each time. That way you don't have to remember multiple user names, passwords or file server names. This feature also enables you to create your web structure locally before you upload it. Following this method, all relative links will continue to work and you will be prompted to update links automatically should you move a web page in your site.

Go to Site > New Site to create a new site.

Name your site: The name that you choose will appear in the Site > Open Site submenu so you can reopen the entire website to work on later. It is only for your reference and will not appear in a browser.

Server Technology: Use the setting “no” for no server technology.

Editing Files: Work with your files by first editing them locally on your machine, then uploading them to the server (the recommended setting). You'll need to select a folder on your local computer on which to store your files. You can name this folder anything; Dreamweaver may try to suggest a folder name that is the same as your site definition name.

From the top drop down menu, select WebDAV for connecting to the server.

The address is "https://catfiles.linfield.edu/People/[Staff/Student/Faculty]/[username]public".

Then enter your CatNet username and password for the login and Password.

Next, use the Test Connection button in order to confirm that all information is entered properly.

As long as you are going to be the only person working on the site, select No. However, if you will be sharing access to the site, check Yes. By checking Yes, only one person will be able to work on the site at one time (the person will "check out" the site when working on it, just as they would "check out" a book from the library). You'll be prompted to enter a name and an email address.

Now you are done - click through the remaining screens and use your "Files" panel to view local and remote files.