Dreamweaver 4 is the latest version of a "wysiwyg" ("what-you-see-is-what-you-get) web-authoring program that allows you to construct even pretty advanced web pages without having to know or write the underlying HTML code. Dreamweaver does the code for you and lets you see the changes immediately, just as if you were working with Word. Dreamweaver is also available in a 30-day trial version from Macromedia. You should decide whether you’d prefer the trial now or when you’re working on your final project. Go to:http://www.macromedia.com/software/dreamweaver/trial/

• If you double-click on the Web Development icon on the desktop of a CWRL computer, you will find a shortcut to Dreamweaver there. Open it by double-clicking on this icon. A blank, untitled screen will appear with 3 to 5 variously arranged floating panels. These can be moved by single-clicking on their blue title bars and dragging them where you want them.
• For most purposes, you only need one or two of these panels. Let’s keep the Properties panel and the Objects panel (shown below). Close the HTML Styles and Reference panels by clicking on the little "x" in the upper right hand corner of each. Note: any panel you make disappear can be made to come back by re-selecting them from the Window menu.
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Though Dreamweaver writes the HTML commands (or tags) that web browsers "read" in presenting webpages, you can also write or edit these tags yourself if you know a little code. The default view when you open the program is Design View - what you see pretty closely resembles what you will see on the web. But you can also use Code View to see the underlying code, or view both at once. In fact, using the split view is good way to familiarize yourself with HTML.

It’s very important to save your document immediately, before you begin adding page elements. This is so that images will be assigned "relative links" - links that are relative to the site. Create a folder where you’ll put all of the elements of your page(s) - including graphics. Name your main page in this folder index.html, as web browsers always look for this "index page" in any directory. You are now ready to start building your site! Use only lowercase letters in the name; don’t use spaces or punctuation.

To begin, you will want to set up the basic look of the page. Don’t worry, anything you choose can be easily changed at a later time by returning to "Page Properties."

• This window allows you specify the background color for your page, or select an image for the background that you have saved on your computer; it also lets you decide what color text and links should be. Play around with some text and background colors until you find a readable, attractive combination. Don’t forget to title your page, and don’t worry about anything below the link colors. If you want to use an image as a background, hit browse, and find where you have saved the image on your disk or desktop. When you are done, hit OK.

Unless your page is very simply arranged, the most reliable way to position text or images on your webpage is to put them in tables. Yet tables limit where you can position your page’s elements - right-justified, left justified, or centered. Dreamweaver allows you to design your page by putting things into layers which can be dragged anywhere you want on the page, and then it allows you to convert those layers into the more web-stable tables for display online. There will always be some differences between what you design and what you see on the web, but using layers and converting them to tables this way can help you minimize those differences. Let’s start by making a table and learning how to format it.

• Create a table by slowly rolling your mouse over the Objects Menu icons until you find the Insert Table icon (you can also select Table from the Insert menu). It will ask you to choose how many columns and rows you want, columns being the boxes or "cells" arranged side by side, and rows being the ones arranged vertically. Make a simple table of one row and one column to put text in. Don’t worry about the other properties - we will change them from the Properties Panel.
• As you might have noticed, when you click on an object on your page, the Properties Panel changes correspondingly. Below is what it will look like when a table is selected.

• Now let’s format your table and its cells using the Properties Panel. To position the table on the page, you can push it around using the cursor (using the Enter, Space and Backspace keys), or choose Left, Center or Right from the Align Menu. To make the borders of your table invisible, change the number in the Border box to "0."
• For more options, click on the tiny white triangle on the bottom right of the panel. To color the background of your table (or of a single cell), click on Bg Color and choose from the palette of colors that pops up. To change border colors, select from the Brdr Color palette. When you finish, click on some other part of the page to deselect your table.

Now let’s type some text, either in a table (recommended), or directly on the page. Simply place the cursor where you want it and begin typing. As with Word, use the familiar controls on the properties panel (below) to make your text appear how you want it. Highlight it and select your font, color, and size, then align it to the center, right or left using the right-most three buttons on the top row.

• Note that you cannot create blank space in Dreamweaver with the Tab or Space bars as you can in Word. One way around this is to insert text copied from Word with the spaces you want already inserted in it.

As you see, the positioning of tables is a little inflexible, so let’s make some layers for the rest of your images and text. Unlike tables, these are easy to drag to wherever you want them.

• Roll your mouse over the icons on the "Objects" panel until you find the button called Draw Layer. You can also find this in the "Insert" menu.
• Move the cursor into the document window and click and drag to create the layer, which will look like a box. Clicking on the tab on top and to the left will allow you to select, or to drag your layer wherever you want it on the page. Once it is selected, you can resize the layer by "grabbing" any of the black squares along its border.
• Important Note: to prevent elements on your page from overlapping, select Layers from the Windows menu, and check the box Prevent Layer Overlaps in the panel that appears. This will keep web browsers from jumbling your page elements.

When your layer is selected, you’ll notice that the Properties Panel changes into the Layers Property Panel (below) to display those elements that you can change about your layer, such as size, background color or image, and its name. We will be using this layer as a text box, so, as with table cells, choose a background color by clicking on Bg Color.

To link any text, highlight it and type or paste the web address you wish it to link to in the box in the Properties Panel labeled "Link." When you are done, click anywhere in your document to deselect it, and the text will appear as a link.

• Type some text, for example, "Click here to visit the UT Homepage." Highlight the words you wish to link and then type in the UT homepage address in the link box. Click somewhere on the page to deselect the text and it will then appear as a link, underlined and in the color you specified for links in Page Properties.
• To make your email address "clickable," type your name or your email address in your layer, highlight it, then click on "Insert Email Link" from the Objects Panel. You’ll see the text you highlighted, and a box for the email address. Type it in and click OK to finish.

Place images inside layers (or tables, or directly on the page) by selecting Image from the Insert menu.

• Find where you have saved an image with the Select Image Source dialog box, (you must have the image saved on your disc or computer). After you select the image, DW will ask you if it can put a copy of it in your local folder. Say OK. If, however, it prompts you to save, delete that image (highlight it by single clicking on it, then hit delete) and go save your page before you insert it again. This way, it will be assigned a document-relative path. More on this below.
• You will also want to make sure your image is named without spaces or punctuation such as periods, commas, or slashes. These confuse web browsers. If you want to divide words, use the underscore, as in my_face.gif.
• To stretch an image’s height or width, highlight the image by single-clicking on it, and drag from one of the blocks in the middle of a border. If you want to keep the image’s proportions, hold down the shift key while re-sizing it from a corner. This will allow you to change the image size without distorting it. You’ll then want to resize the layer to the same size as your picture.

• Note that you can also specify your dimensions in the Image Properties Panel, as well as make your picture a clickable link to a location on the web. For accessibility, in the box marked Alt, (short for alt-tag) you should type in a brief description of the image for screenreaders used by the visually impaired - less than 150 characters, including spaces and punctuation, please. This is required for your webpage, so be sure to do this.

• Once you have completed your design, and are happy with the layout, convert those layers to tables so that Netscape and IE will both arrange your pages more consistently. To do this, select Convert from the Modify menu, choose Layers to Tables, and hit OK. You can also reverse this process if you want to make additional changes, but each conversion will throw off your formatting - so to save time, don’t convert layers to tables until you’re done. Dreamweaver will create an intricate network of tables to accommodate your design - this would be extremely hard to do manually.

• Create a new page by going to the File menu and selecting New. You should title and save this page right away by going to File and Save As. Again, when you title your page, don’t forget to avoid spaces, slashes and periods, as this confuses web browsers. Instead, use underscores - for example: "deloria_one.html"
• Now that you have another page to your site, let’s link to it internally. Go to your first page and type into your table some text referring to the other page.

• Type in the name of your second page in the Link box of the Properties Panel, as shown above. This is called an internal or relative link. As long as all your pages and images are in one folder, browsers will know how to find them. Be sure you get the page’s name exactly right. This is where many simple mistakes are made. Click anywhere on the page to complete this action.

• This is the satisfying part, but remember to save all your documents before you look at them, or the changes you have made won’t be seen. From the File menu, select Preview in Browser. If a browser is not already selected, pick either Netscape or Internet Explorer (on PC’s, you will have to look for them in Program Files on the C: drive; on Macs, find them on the Mac hard drive).
• Not everything will look as you planned, so go back, make adjustments, and view it again.

To upload your site to a web server - a computer that is always on and connected to the Internet, you will need to use an FTP program such as WS_FTP, or Fetch. On CWRL computers, however, you can also put a copy of your website in the HTTP volume, a folder you will find on your desktop used for temporary storage. Anyone with access to CWRL computers can use the HTTP volume to view their sites while in they are working on them, checking for design problems, and broken links or images.

NOTE: You should never keep the only version of your web site there, however, because the HTTP volume is insecure - anyone could access and delete your work. Always save a copy to your disc.

To "upload" a webpage or website to this server, all you need to do is create a folder there—again, without any spaces in the name of it - and drag all the completed pages to this folder. The contents will then be viewable from any computer once you figure out the address, which will be

http://www2.cwrl.utexas.edu/~ + the name of the folder in which you put your files + forward slash + a dot and the name of the homepage itself - which should be properly be labeled index.html.

For example, if I created a folder in the HTTP volume called "miriam," and dragged my site files there, the web address for my site would be http://www2.cwrl.utexas.edu/~miriam/index.html

If I want to put a folder inside that folder, i.e. creating a folder in "miriam" called "deloria," and dragged my site files into a folder I created inside that folder called student, the web address for my site would be http://www2.cwrl.utexas.edu/~miriam/deloria/index.html

Dreamweaver has a great tutorial in the help menu ("Using Dreamweaver") where you can learn about its basic and more advanced features. There are other sources online too for help and tutorial, such as the GSLIS page:

http://www.gslis.utexas.edu/technology/tutorials/webpub/dreamweaver/basic/index.html

updated 28. March 2002