University IT » Web Services » Help » Dreamweaver » Starter's Guide
Macromedia Dreamweaver - How To
Index | Setup | Starter's Guide | Templates | Tips & Tricks
- Connecting to the Webserver
- Properties Window
- Editing Text
- Editing Links
- Editing Email Links
- Inserting Images
- Changing Page Title and Background Images
- Trick for Keeping "Last Modified" date up to date
- Putting the Page back Online
Updating Webpages using Dreamweaver MS 2004
This document will show how to do several basic things using Macromedia Dreamweaver.
You most likely have Dreamweaver installed by now and are wondering how to update your webpages using this fine tool. You should have already looked at the Dreamweaver Setup guide and be familiar with connecting to the webserver and the Site window. Now, you just need to find a page that needs updating. It doesn't have to be fancy, this how-to will start off simple.
Connecting to the webserver
Open up Dreamweaver, then select the site that you previously defined from the drop-down menu. Click on the connect button. Find the file that needs updating and double-click on its name.
Editing the webpage
After double-clicking the webpage in the Site window, make sure that the Properties window is open. If it isn't, you can turn it on in the Window menu.
Note for users using the templates: You will see a bunch of yellow icons that are shaped like shields. You can click on them and look at them, but DO NOT change anything in them. This will cause your page to not be in the templates when you are done with it.
Tables
The following steps will teach you how to layout a header, scan column, main body column and footer using tables. The table below is a simple layout example.
Header: the top of the Web page containing the title and other important information about a Web site, letting viewers see what the page is about at first glance.
Scan Column: displays links to reach different parts of a site.
Body Column: the main content of your site will be in the body column.
Footer: may contain email links, a "last revised" date, other information and links to other sections of your site.
Go to the Insert menu and select Table. see illustration from below:
Rows: 3
Columns: 2
Width: 760 pixels
Border: 0
Padding: 4
Spacing: 0
Header: None
Accessibility: Leave Blank
Click OK.
Select the left column by clicking on the Down Arrowunder the first column and choosing Select Column(click inside the column if it doesn’t appear).
Set the width of this column to 150 pixels by typing 150 in the Widthbox in the Cellsection of the Propertiespanel.
Set a background color for each cell. Click into a cell to select it, a palette of color choices will appear. A common scheme is to use one color for both cells in the top row, a complementary color for the links column, and a third color for both cells in the bottom row. 
At this point, your page should look something like this:
Text
Select Modify > Page Properties and then set the Appearance and Links properties to change the appearance of the entire page. Click OK.
Add text to your Web site. Click in the top right cell and type in the text for the title of your page.
Click in the left middle cell and type in the text for the links that will allow 
visitors to navigate your site.
The Properties window is a helpful toolbar with most of the functions you need directly at hand. For example, to bold some text, just highlight it and press the B button on the toolbar. You can also use the commands from the menus. One thing to note when editing text, don't underline things because it confuses many people into thinking they can click on the underlined text like any other link.
Links
- Type in some text, such as “ Rochester ” or “Home”
- Highlight the text.
Go to the Link field of the Properties box. then in the Properties window type the address of the link. If you are linking to another page in your site, make sure it is one of those in your site window and then you can click on the folder icon to link to it. Dreamweaver will then set the link properties for you.
Email Addresses
To put in or change an email address, you do things the same way as you would a link except with one small exception. In the link box, type mailto: and then the email address without any spaces.
Inserting Images
To insert a graphic, go to the Insert menu and choose Image. You will be presented with a dialog box that you can use to pick a graphic or other picture. You should make sure that the image is relative to the document (highlighted in the example picture) and browse to the image using the dialog box, the same way you would for any other document.
If this image is outside of your Web site, Dreamweaver will ask if you want to save a copy of the image inside of your Web. Click Yes.
When the image is selected, go to the Properties window and type in a short description of the image in the Alt field. This text will appear if the image does not display, and when the image is moused over in a Web browser.
*Alternative text for images
With the accessibility options enabled in the preferences, Dreamweaver will ask the user for alternative text when an image is inserted into a document.
Type the appropriate and equivalent alternative text into the Alternate text area. If the image is a complex image, enter a URL or browse to a Web page to use for a longer descriptions. Alternatively, if the image does not convey content and does not provide page functionality, <empty> can be selected in the Alternate text area to provide empty alt text (alt="").
Changing the Page Background and Title
To change your page background and the title, just open up the Page Properties command from the Modify menu.
Tricks for Keeping "Last Modified" Date Up-to-date
Many pages like to say when they were last modified. There is a quick fix to this that will make sure that the "Last Modified" date is always correct if your server uses templates or can use templates (www.rochester.edu does). Go to the spot where the date will be, and then use the Insert menu to insert a Comment. In the dialog that pops up, type #flastmod file=file.html where file.html is the name of the document you are working on.
Putting the Updated Webpage Back Online
Now that you have made all of your changes, you will likely want to put the page online. You should probably rename the copy on your side first to something like "testpage123.html." this is so you don't overwrite anything if your changes didn't work the way you expected them too. Now, select the file in the Site window and click on the Put button, and the page will be online now. You can browse to it in Netscape or Internet Explorer and see what it looks like. Find where it was before using your browser, and type the file location in the location bar, such as http://www.rochester.edu/college/mysite/testpage123.html. With any luck, your page shows up correctly with all of your changes. Now, use the Site window again to change the page's name back to what it was before, select it, and click the Put button again. Browse to the page online as you have previously, and then hold down the Shift key and press Reload or Refresh in the browser.
Conclusion
This is just a basic quick-start for using Dreamweaver MX 2004. If you have further questions as to the capabilities of Dreamweaver, you should look at the Tutorial in the Help menu. The tutorial is very informative and contains information on how to do many useful things with Dreamweaver, such as cleaning up and importing Microsoft Word HTML documents or editing HTML.
