DreamWeaver

The first thing to learn in DW is the DW environment, i.e. The menus, the panels, the properties window, etc.

How to start

1. Start DW (e.g., from Start menu-> Programs-> Macromedia -> DW)
2. If you do not have any site under Files on the right window, click on the drop-down menu Site on the left window and manage a new site that you will call for example filast (first initial-last name, your neiu user id).
   Continue answering until done:
   • mostly No answers
   • answer FTP for How to connect to your remote server,
   • answer http for the directory.
3. For a new page, on the left window, start a new html file
4. Type your title and create your page as you like it
5. Save it to your C or other drive
6. Highlight your file name on the right window at the bottom of the list (probably)
7. On the right window, to the right of Files, click on the 3-bullets icon
8. Click on Site and then Synchronize making sure your site is the right one.

Make an album

Note that you need to download Fireworks for building an album using DW.

If your source list of pictures is already on the web, follow the next few steps:

• In remote view click on the 3 dots right of file
• Click on the wanted source directory
• Click on small green down arrow to bring directory into local computer
• Change to local view and check if file is there
• Make sure all are jpgs in the source folder
• Create a target folder by highlighting the root directory (of where you want your target album to be) and clicking on your mouse right button
• Highlight the source file

• In the pull-down menu File click on new - basic page - html - create
• In the Commands pull-down menu click on create web album
• Answer questions (source, target, size, # of photos per row) and create album
• Macromedia Fireworks will start
• F12 after created to see in browser (it will prompt you to save your album first)
• To change background color, close the browser, pull down the Modify menu -> Properties -> Apply -> ok
• Cntl S to save. F12 to bring up the browser again to check on the color
• To ftp your target file over to the web, you may repeat steps 6 to 8 above
• Open a browser to check if your target file has made it

Properties inspector

Use the properties window for a new page. It can change page color, text color, link color, and a lot more.
Highlight an item and then in the properties panel for that item create a hyperlink to another page. See the link definition how to create links by typing, browsing, or dragging.
Add a background image to a page from the properties window.
You can move a file that is linked in the files menu and maintain the links. You can see this happen in the properties panel.
More later:)

Roll-over

Start a new basic html file or work with an old one in DW.
Pull down the Insert menu and click on Image Objects and then Rollover image.
Follow the directions: Mention the source image and then the target one. The source will end up on top and the target will be the rolling-over one.
Just as with any file, you can click on F12 to see your html on the browser as it saves it to you on the C drive.
Once you are satisfied, go to the right and synchronize off the site menu.
Enjoy:)

Image map

Examples:
Ex1
  Ex2
Ex3

Start a (new) html file

Insert a picture large enough to insert several links (hot spots)
In the property inspector click on one of the 3 map shapes at the bottom left.
Place the cursor on the image (it turns into a cross). Draw a rectangle (elipse or polygone)
In the property inspector again fill in the link you desire and the related alternate text
Click on the map arrow and pick a shape again and restart the 3 steps above.
Save your file, synchronize it.

See example

Layers:

Follow instructions in the book to create layers (you won't see a thing except if you look at the page source:).

Simple animation with DHTML 

Open a layer file or create a new file with a layer.
Insert the image you'd like to "fly" about.
Press Alt+F9 key combination to open the Timeline panel.
Click the layer handle, not the image itself
Right-click Frame 1 in animation channel 1. In the pull-down menu select Record Path of Layer.
Drag the layer through the page to indicate the path it will take.
Press Autoplay and check the Loop box.
You may change 15 fps (frames per second) to faster or slower.
Save and watch in the browser.

Cascading Style Sheets

See css.htm and css1.htm for 2 examples on how to incorporate style sheets into your document. One has the <style> tag in the <head> section

and the other in the <body> part.

More on CSS in the book and on DW itself.

Return to Dr. Caftori's     Use n-caftori@neiu.edu to email me

Last updated 12/10/09