Rhe 306Q: Rhetoric and Composition

Dreamweaver MX Basics:
A Brief Tutorial

Open Dreamweaver MX

Dreamweaver is an HTML editing and web page construction tool, offering a graphical user interface (GUI) for HTML functionality.

You can open it by going to the start-up menu on your desktop:

• PROGRAMS > MACROMEDIA > MACROMEDIA DREAMWEAVER MX

You can click on this icon to download a free trial of Dreamweaver from Macromedia.

Your Workspace

Your workspace in Dreamweaver MX consists of a main menu, an insert window, and a properties window.

Main Menu

It is located on the top of your screen. You might be familiar with most items in the menu from other applications. The one that deserves special attention here is MODIFY. This item allows you to set the properties of the whole document and to modify elements such as tables.

Insert Window

It is located right under the main menu and provides shortcuts for inserting different types of objects in your document. Explore the icons to find out what objects they are related to. When you click any of the icons a dialog window will appear with guidelines for how to browse and insert a specific object.

Properties Window

It is located at the bottom of your screen. Depending on what element in your document you select, the properties window displays the options you have for formatting this element.

[back to top]

File Management

Websites include links between different web pages or between a web page and some other types of file, such as an image file. It is important that all files for your website are stored in the same folder.

Do the following to successfully manage your files:

• Create a new folder by right clicking on the desktop and choosing NEW > FOLDER.
• Name this folder: proposal, for example.
• Place whatever image or word files you have that will be linked to in your web site.
• As you create every web page, make sure that you save your HTML document in the same folder.

As you store your website in Webspace, always make sure that you place the whole folder on your desktop before making changes to any of the files.

[back to top]

Create a New Document

When you open Dreamweaver MX, a blank new document appears on your screen. Before you start adding content to this document, you need to do the following:

• Save it in your website folder by going to FILE > SAVE AS and browsing to open your website folder. Make sure that the title page for you website is called index.html (it is always a good idea to actually type the extension .html when you are creating a new file, instead of letting Dreamweaver decide on an extension).
• Give your file a title, which will appear in the top blue title line in browsers. You can do this in a text field right under the insert window, which says "Untitled Document" by default.
• Select the properties of your file by going to the main menu: MODIFY > PAGE PROPERTIES. A dialog window appears which allows you to select background color, text color, and colors for the links.

Now you are ready to start adding content to your file. As you do that, remember to save your document often by going to the main menu in FILE > SAVE.

[back to top]

Add Text

You can add text to your document by typing it or by copy-pasting it from Word, for example.

• If you type your text, keep in mind that pressing ENTER produces a new paragraph and a double space between paragraphs. If you want to avoid the double space, you have to hold SHIFT and press ENTER.
• If you copy-paste text from MSWord, most of the text formatting will disappear. So you will need to go over your text and format it again. Remeber that even paragraphs divisions are lost in the pasting, so you will have to add ENTER at the end of every paragraph.

You can format your text in Dreamweaver using the properties window on the bottom of your screen. When you select some text, the properties window allows you to change its format by choosing:

• Format: paragraph, heading, etc. You don’t have to change that one.
• Font: You have a choice of just a few font groups because browsers have different capabilities.
• Size: If you leave it as “none” browsers can resize the text. You can make the font bigger by choosing a “+” value, or smaller by choosing a “-“ value.
• Color: When you click on the little square, you can see all your color options.
• Link: In the link field, you can type the URL if you want the selected text to be a link. Don’t forget that you have to start with http:// and type the whole URL. For more guidelines on links, read the next section of this tutorial.
• Other properties similar to MSWord, such as bold, italics, centered, etc.
  

Properties Window for Text:

[back to top]

Add Links

There are three types of links: hyperlinks, e-mail links, and anchor links.

Hyperlinks: links to other web pages. You can add a hyperlink by doing the following:

• Select the text or image that will represent the link.
• In the properties window at the bottom of your screen, you will see a Link: field. There you can type the URL starting with http: if you want to link to somebody else's website, or you can type the name of a file from your website folder if you want to link to another page from your website. If you are not sure about the file name, you can use the yellow folder icon next to the field to browse your files. When you browse, remember not to add links to files located outside of your website folder.

E-mail links: links that allow others to easily send you e-mails. You can add an e-mail link by doing the following:

• Select the text or image that will represent the link.
• Click on the envelop icon from the insert menu which will let you type the e-mail address. Another way to do the same is to use the Link: field in the properties window and type mailto: followed by the a-mail address. Make sure that you do NOT leave a space after the colon.

Anchor links: links to different sections within the same web page. You can add anchor links by doing the following:

• Insert anchors in the beginning of every section you want to link to. Remember to insert an anchor at the top of your document, so that people can jump both up and down the page using your anchor links. You can insert anchors by clicking at the desired spot in your document and then clicking on the anchor icon from the insert menu, which allows you to give a name to every anchor. A yellow anchor object appears in your document, but it is not visible in a browser. If you forget the name of an anchor you can click on it in you document and see its name in the properties window.
• Select the text or image that will represent the link to a specific anchor.
• In the properties window, use the Link: field to type a number sign (#) followed by the name of the anchor. Do NOT leave a space between # and the anchor name.

[back to top]

Add Tables

There are two types of tables that you can use in Dreamweaver.

To insert a regular table with a specific number of columns and rows, follow the directions below:

• You may insert a table in two ways:
  • Go to the main menu: INSERT > TABLE
  • Use the insert menu and click on the table icon.
• A window appears with options for # of rows, # of columns, cell spacing, cell padding, width, and border (0 means no border; 1 means a border of 1 pixel. You can get thicker borders if you type a bigger number.)
• Choose the dimensions for your table and press DONE. You have a table!
  

Properties Window for Tables:

A more advanced and flexible option for adding tables:

To insert a design table, you need to go into design view. Design tables are more flexible because you can freely draw cells in them that do not have to form neat columns and rows. If this is your first experience with Dreamweaver, do not use this option.

• Go into design view by clicking on the LAYOUT tab in the insert menu. New insert icons will appear. The standard view icon will be active, so you need to click on the design view icon to switch to design view. After you do that a message might appear, you can just say OK.
• Now that you are in design view, you can click on the design table icon and draw a table by dragging your mouse from the upper left corner of the document diagonally to the lower right corner. The table is displayed with green borders but those borders are not visible in browsers.
• To be able to add content in the table, you have to draw cells by clicking on the cell icon and drawing individual cells in the same way you drew the table.
• Only after you create a cell can you start typing text or adding images into it.
• At any time, you can click on the border of a cell or table to select them. Then you can change their size and position either by dragging them or by using the properties window.
  

[back to top]

Add Images

Before you insert an image make sure your image is saved in the folder you chose for your site.

• You can insert it in one of two ways:
  • Place your cursor at the desired spot in your document and click on the image icon (tree) from the insert window
  • Place your cursor at the desired spot in your document and go to the main menu INSERT> IMAGE
• A window appears asking for the location of the image file you would like to insert. Browse through your folder and select the right image file.
• The image should appear in your document.
  

Properties Window for Images:

You can use the properties window for images (which appears when the image is selected) to position your image or to make it a link. Also, you can use the Alt field to describe briefly what the image is for people with visual impairments.

[back to top]

Publish Your Website with Webspace

You can use Webspace not only to store your files, but also to publish a web site. For web sites, however, we want to keep our files together in the same folder. To do this, you can either place a whole folder from your desktop into Webspace using the Web folder option, or you can create a new folder in Webspace and upload all the relevant files into that folder. Next, to make a web site available on the Web, you would need to change that folder's status from "private" to "public." Below you will find instructions how to upload you web site folder into Webspace and how to make this folder public.

Upload your web site folder into Webspace

After you open Webspace and log into it, you would need to do the following:

• Click on the Web Folder Icon in the top menu. It will lauch an alternative display window of your Webspace, which would look very much like an open folder on your desktop.
• Drag you web site folder into that Webspace window.
• Close the Webspace window and go back to the traditional Webspace display in your browser. After you refresh that page, you will see the folder you just added in the list of your contents list.

If you want to work on files from your web site later, you can launch the Web folder in Webspace and drag the folder you need to your desktop. Do not be confused by the look of the Web folder window: it is a remote location so opening and editing documents from it could be a problem. Remember that to work on specific files from you web site, the safest thing to do is to drag the whole web site folder onto your desktop first and then work from there.

Publish on the Web

After you have placed your whole web site folder in Webspace, its default status will be "private." To make your web site publicly available, you will need to use the SHARE option. Next to the name of every file or folder in Webspace, you can see four icons. The SHARE icon usually looks like this to indicate that your file or folder is private. When you click on this SHARE icon for your web site folder, a new screen will display a table of the folder's sharing properties. You will need to do the following on that screen to make you folder public:

• Click on CHANGE under the sharing properties table.
• Say YES to every setting that appears in the editable version of the sharing properties table.
• Choose the first out of the three options under the table, which says "Apply changed settings to sub-directories and files."
• Click APPLY NOW.
• You are done. Your web site folder is now public and this icon appears next to its name:

The URL for your web site is: webspace.utexas.edu/YourUTEID/NameOfFolder/ This URL will call up the index.html file from your folder, which is actually your title page.
For example, I have an e-portfolio folder in my Webspace which I have placed in another folder called "Management," so my URL for the e-portfolio is: webspace.utexas.edu/mah5785/Management/e-portfolio/
If I had a proposal folder in my Webspace exactly like your proposal folders, the URL for it would be: webspace.utexas.edu/mah5785/proposal/

[back to top]