Programs and Services

Resources for Teaching

Personnel and Model

Basic Dreamweaver MX

Creating, Editing, and Managing


The first thing to do, is to define a site. We do this by navigating to Site->New Site. Click on the Advanced tab.

Figure 1 is an example of the information you would fill in the Local Info area of your website.

Figure1



Local Root Folder: where you will locally store the files for the site that you are creating. You can click on the small blue folder to navigate to the correct folder on your harddrive where you will store the site.

HTTP Address: here you will type in the address of your website so that Dreamweaver can automatically can all the links that your webpage references, as well as let you know if you have any broken links.

Figure2

Click above image to enlarge.

 


Here, in Figure 2, the Remote Info is highlighted in the left side panel. This area is where you will fill in the necessary info to connect to the server that will host your files that comprise your webpage. The default for Access is set to None. You would need to toggle this to the correct protocol access for your server. The most common kind on campus is FTP. For this you need to know your FTP Host, Login, and Password. In some cases you may also need to know your Host Directory, which is where your files will live on the remote host...but in many cases, this field can be left empty as the server can be configured to know the correct directory based on your login.

Should you check the Save box after the password, Dreamweaver will remember your password. However, this opens up the possibility for any other user of that computer to be able to access, modify or delete your website.

Enable File Check In and Check Out is used when working with others on a webpage. This feature only works when all parties are using Dreamweaver. Checking out a file entails that the file you are working on will appear to others with a check mark next to it, to indicate you are working on it.

Figure 3 illustrates the default layout for Dreamweaver MX.

Figure3

Click above image to enlarge.


T
he insert bar is comprised of various "objects" (images, tables, etc) that you can insert into your document.

The palettes are related panels that are organized under one heading. You can expand and collapse the panels with the arrow at the left of the group's name.

The document window displays the current document as you are creating it. You can toggle the display to Show Code View, Show Code and Design View, or Design View, by selecting one of the three buttons on the top left bar of the document window. Figure 3 is currently illustrating Show Code and Design View.

The property inspector lets you view and edit the various properties for selected objects/text in your document, such as size, alignment...you can also name your objects via the property inspector.

One menu that does not, by default, show is the Site Manager. The Site Manager is located by navigating to menu Site -> Open Site. Then select your site that you have already defined. Once you have saved a file and it is ready to be seen, make sure that you do upload your file to the remote web server. You can do this by highlighting your file and selecting the blue arrow point upwards that is found in the menu bar on your Site Manager.

 


Embedding a graphic. There are only two kinds of images that browsers can display, they are jpg and gif.

Go to the insert bar, and select the image button, . A window will pop up and prompt you to navigate to the image you would like to insert. Upon selecting your file (.jpg or .gif), your image will appear in the document window.

Note that the relative address for the image will also appear in the property inspector, in the source area. You can use the property inspector to align your image left, right, or center. You can also use the property inspector to make your image a link.


Figure4

Click above image to enlarge.

 


Making a link.
Whether you make your link textual or graphical, the process is the same. You want to select the text or image that you want to make the link for. Then, in the Property Inspector, directly below the "source" area, there is an area designated "Link" you can type in the HTTP address or, you can click on the blue folder to navigate to a relative directory (relative to your document and site's root).

To make an email address clickable, type in the "Link" area, mailto:email@ucsb.edu, supplying your email.



Figure5

Click above image to enlarge.