Macromedia Dreamweaver MX: Making a Basic Webpage

Dreamweaver MX is available from apps@stern.nyu.edu. The following guide provides insight for creating a simple website using the Dreamweaver MX interface.

• Introduction to Dreamweaver
• Text
• Links
• Background, Link Color, and Page Properties
• Anchors
• Images

For a guide to making a more complex webpage using tables, layers, templates, frames, and stylesheets, please see the How-to-Guide entitiled Macromedia Dreamweaver: Using More Advanced Features. For more information on site management, please see Macromedia Dreamweaver MX: Publishing Guide.

Introduction to Dreamweaver

The main functions of Dreamweaver are listed in the Insert Tabs below the menu bar. The Common Insert Tab is the default tab because it contains some of the most common options, including inserting hyperlinks, tables, images, Flash objects, rollover images, horizontal bar, etc.. The other Insert Tabs contain more options for tables, templates, frames, etc..

The tool bar below the Insert Tabs pertains to the document page. The blue HTML tag icon to the left will display HTML codes; the icon to its right with a smaller HTML tag displays codes and the page at the same time; while the third icon will display only the page, as it will look online. You may rename your page in the Title box. The globe icon to the right is the Preview icon, and will preview what your page will look like in a browser.

You may work on multiple pages at a time. Similar to how you may navigate through Sheet 1, Sheet 2, and so on in Microsoft Excel, the tab underneath the document window will display the name of the file that you are working on and other all other files that are open.

Text

To add text to your webpage, simply type in the text that you want. To edit the text, choose font, size, style, alignment, lists, and indentation options in the Properties panel (see example below) on the bottom of your screen. For the title for your page such as Welcome to my website, highlight the text and choose the heading size under Format in the Properties panel. Heading1 is the largest size while Heading6 is the smallest.

Links

There are three ways to make a link. First, you may click or highlight the text that you want and type in the address that you wish the link to go to in the Link box, which is in the same Properties panel pictured above (e.g. www.stern.nyu.edu as an absolute address that links to an actual URL, Uniform Resource Locator, or resume.html as a relative address that links to another page within your own folder).

Another way is to click on the hyperlink icon (first one from the left) of the Common Insert Tab. Type the text that you want to appear in the Text box, and enter in either an absolute link to an URL or a relative link to another page in your site.

Or you may click on the black circle to the right of the Link box and drag it to the name of the file that you see listed under Files|Site on the right side panel of your screen. Let go once your black arrow has reached the desired file, and the link will be created for you (see example below).

To make a link for an email contact, type mailto:NetID@stern.nyu.edu in the same Link box mentioned above. Alternatively, you may click the Email Link icon (white envelop icon, second from the left) from the Common Insert Tab, and enter the text that you want (e.g. Email me!) and an email (e.g. NetID@stern.nyu.edu).

The Target box next to the Link box allows to you choose how you want the new page to appear. The implied, or default target is _self, which opens the new page in the same frame or window as the original. _blank loads the new page in a new, unnamed window; while _parent loads the new page in the parent frameset. Lastly, _top loads the new page in the full sizewindow, regardless of any framesets.

Background, Link Color, and Page Properties

To choose a color background for your page, go to Modify|Page Properties. Next to the Background option box, you may click on the black arrow to see a panel of available colors. You may also insert a picture from file by clicking the Browse button next to Background Image. You may enter both a color and a picture, and the background color that you choose will load first while your picture takes time to load. The image will tile unless you create a CSS style sheet indicating no repeat [see Macromedia Dreamweaver: Using More Advanced Features].

Here, you may also edit the color you prefer for your Links, Visited Links, and Active Links. The Active Link color is the color that appears when you click on a particular link.

The Title of your page is the title that will appear on the top of your browser when you view your page on the World Wide Web. At the top of your Dreamweaver screen (see example below), you will see the Title of your page, as well as the name you have saved your file as.

Click Apply to find your desired results, then click OK.

Anchors

Anchors are ways to link sections of content within a longer page. For example, links such as go back to top usually link to an anchor that is set in place, in this case at the top of the page. To create an Anchor, highlight the text such as Welcome to my website or whatever text that appears at the top of your page, and click on the anchor (third from the left) icon from the Common Insert Tab (the default toolbar when you first open Dreamweaver MX). Name your anchor an appropriate name such as top.

Once you have created the anchor, the Anchor symbol should appear next to the text that you just selected. Then to created a link to the top of the page, type the words go to top at the bottom of your page, highlight it, and type #name of anchor (e.g. #top) in the Link box or drag the black circle next to the Link box to the anchor itself. You may also click the Hyperlink icon from the Common Insert Tab and enter the text go to top in the Text box and #top in the Link box in the pop up window.

Images

To insert an image, click on the Image icon (tree icon, sixth from the left) from the Common Insert Tab, and choose the file that contains the image that you want from file.

When you select the image, you may edit the image width and height, border, and alignment within the Properties panel (see below). To make the image a link, type the address in the Link box, or use the black circle as directed above. You may also write a short phrase in the Alt box, which will show when a viewer’s mouse moves over your image in the World Wide Web.