Updating Webpages using Dreamweaver 8
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 (the top of the webpage containing the title), scan column (displays links to reach different parts of a site), main body column (the main content of your site) and footer (contains other information and links to other sections of you site) using tables. The table below is a simple example.
Go to the Insert menu and select Table.
- Select Insert > Table.
- In the Insert Table dialog box, do the following:
- Enter 3 in the Rows text box.
- Enter 1 in the Columns text box.
- Enter 700 in the Table Width text box.
- Select Pixels from the Table Width pop-up menu.
- Enter 0 in the Border Thickness text box.
- Enter 0 in the Cell Padding text box.
- Enter 0 in the Cell Spacing text box.
Click OK.
A table with three rows and one column appears in your document. The table is 700 pixels wide with no border, cell padding, or cell spacing. Select the left column by clicking on the Down Arrowunder the first column and choosing Select Column.
Set the width of this column to 150 pixels by typing 150 in the Widthbox in the Cellsection of the Properties panel.
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.
- In the Property inspector (Window > Properties), click the folder icon next to the Link text box.
- In the Select File dialog box, browse to the menu.html file, and click OK.
- Click once on the page to deselect the word Cuisine. The Rochester text is underlined and blue, indicating that it's now a link.
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
(I) An image placeholder is a graphic that you use until final artwork is ready to be added to a web page.
- In the Document window, click once inside the first row of the first table.
- Select Insert > Image Objects > Image Placeholder.
- In the Image Placeholder dialog box, do the following:
- Type "a name" in the Name text box.
- Enter 700 in the Width text box.
- Enter 90 in the Height text box.
- Click the color box and select a color from the color picker.
- Leave the Alternate Text text box blank.
- Click OK.
(II) 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. You should make sure that the image is relative to the document 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.
(III) you can insert an image by dragging as well:
- Click once inside the last row of the last table on the page.
- In the Files panel (Window > Files), locate the body_main_footer.gif file (it's inside the images folder), and drag it to the insertion point in the last table.
*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="").
Insert and play a Flash file and Flash Video( New feature)
You'll insert a Flash file that plays a photographic slide show of "Something of your own". The Flash file you'll insert is a flexible messaging area--or FMA--file. The message in the FMA file can change based on the needs of the business.
To insert the Flash FMA file, you need to insert HTML code that embeds the file in the Dreamweaver page. The easiest way to do this is to insert the SWF file (the exported Flash Movie file) into the page. When you insert a SWF file in Dreamweaver, Dreamweaver writes all of the necessary Flash HTML code for you.
- With the index.html page open in the Dreamweaver Document window, click once inside the second row of the first table which you should have created previously.
In the Property inspector (Window > Properties), select Center from the Horz pop-up menu, and select Middle from the Vert pop-up menu.
- This places the contents of the table cell in the middle of the cell.
3. Select Insert > Media > Flash.
4. In the Select File dialog box, browse to the flash_fma.swf file, select the file, and click OK.
5. If the Object Tag Accessibility Attributes dialog box appears, click OK.
- The Flash content placeholder should remain selected after you insert the SWF file. If it's not selected, select the Flash content placeholder by clicking it.
- In the Property inspector (Window > Properties), click Play.
- In the Property inspector, click Stop to stop playing the Flash file.
Next you'll insert a Flash Video file, using the asset provided.
- With the index.html page open in the Dreamweaver Document window, click once above the graphic.
- Select Insert > Media > Flash Video.
- In the Insert Flash Video dialog box, select Progressive Download Video from the Video type pop-up menu.
- In the URL text box, specify a relative path to flv file by clicking Browse, navigating to a flv file and selecting the FLV file.
- Select Halo Skin 2 for example from the Skin pop-up menu to give it a little skin look to it.
- In the Width and Height text boxes, do the following:
- In the Width text box, type 180.
- In the Height text box, type 135 and press Enter (Windows) or Return (Macintosh).
7. Leave the default selections on for the remaining options:
- Constrain
- Auto play
- Auto rewind
8. Click OK to close the dialog box and add the Flash Video content to your web page.
- The Insert Flash Video command generates a video player SWF file and a skin SWF file that are used to display your Flash Video content on a web page. These files are stored in the same directory as the HTML file to which you're adding Flash Video content. When you upload the HTML page containing the Flash Video content, Dreamweaver uploads these files as dependent files by clicking Yes in the Put Dependent Files dialog box.
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. 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. Repeat the steps when you make any chages in dreamweaver. 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 8. 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.
|
