Insert Hotspots and Add Layers

Next you will place a hotspot over each of your links (Home, About Me, Hobbies, Friends, Family). With your webpage open in Dreamweaver on the Properties panel select the rectangle hotspot tool then drag the hotspot over each rectangle.


Add Hotspots

Flash Video
Windows Video

Create Layers:

Now you will create layers for each link. Click the Common button Common Button on the top of your document and select layout from the drop down menu.

Common Layout

Click on the draw layer button on the Layout Palette and drag out a new layer::

Draw Layer

Drawn Layer

Click on the top left corner of the layer to select it.
Select Layer

Layer Properties:

On the Properties panel make sure the W and H are the size for all your links. The L and T are where you top left insertion point will be. This should be the same for all your pictures. Your layer size might differ from mine depending on your height of your header and footer.

Layer Properties

Rename Layer 1:

On the layer palette (Windows > Layers) you will now see Layer 1 has been created. Double click on the text Layer 1 in the Layers palette and rename it Home.

Home Layer

Add Layers and Set Properties

Flash Video

Insert Text and Any Images:

Open the storyboard you previously created that contains the text and graphics you want to include on each page. Copy the text you want to appear when the Home page is open. Return to Dreamweaver and place your cursor in the layer you just created and position your cursor inside the layer by clicking in it. Select Edit then select Paste Special and select the Text radio button to paste only text with no formatting.

Paste Special

To insert an image from Word you will need to copy and paste it in Fireworks. You will need to do the same thing you did to graphic you cleaned up earlier. You will need to use the magic want to delete the background, change the background to black to check for smudges, change the background to transparent, then select gif as the file type and Index Transparency from the drop down list in the Optimizer Palette. You will then need to export the graphic and save it in your picture folder located in your root folder directory. Click back on the Common button at the top of your document window, then click Insert Image to insert an image into the layer. Make sure that you assign Alternate text to your photo at the Image Tag Accessibility Attributes dialog box:

Alt Tags

Insert Text and Graphics

Flash Video

If your graphic appears with jagged edges, click the edit in Fireworks button on the properties panel in Dreamweaver. This will take your graphic into Fireworks where you can now edit it.