Bike and Hike Skills: Graphics, Image Maps, Photo Galleries, Layers

Locate Files Open the CTDWebDesign  drag and drop the folder BikeHike  into your flash drive.

Insert an Inline Graphic Open Dreamweaver. Open the Scrapbook page (scrapbook.html) located in the  BikeHike inside the  pages. Position the insertion point just after the View Video Page button and press ENTER once. Click Insert  Image Browse for the image file bike.jpg in the images folder. Alternate Text, key: Bike Photo

Crop, Resize and Resample a Graphic Select the photograph that you entered into the scrapbook.html page. In the Properties Inspector, click the Crop button. A warning box appears telling you that this action will permanently alter your graphic file. Click OK. A dashed outline box with eight square handles appears over the image. Click and drag the handles to adjust the crop marks until the picture looks like this.

Crop, Resize and Resample a Graphic cont… Click the crop button a second time to finalize cropping the image. Select your image. Click and drag the handle in the image's lower-right corner. As you drag the handle, hold down the Shift key to maintain the image's proportions. Resize the image so, in the Properties inspector, its width (W) is 370. In the Properties inspector, click the Resample button once. Note that you must resize the image before the Resample button becomes alive. Select the image. In the Properties inspector, click Align Center.

Modify a Graphic Select the photograph. On the Properties inspector, click the Brightness and Contrast button. In the Brightness/Contrast dialog box, make sure the Preview box is checked. In the Properties inspector, click the Sharpen button. In the Sharpen dialog box, key: 3 Click OK.

Create an Image Map with Hotspots In the BikeHike , open the homepage (index.html) in design view. Position the insertion point at the end of the paragraph, and press Enter once. Insert  Image. Browse for the image_map.gif file in the images . The word Register should be at the bottom of the image. Select the image and Align Center. On the Properties inspector, in the Map box, key: home. This will assign a name ot the image map.

Create an Image Map with Hotspots cont… In the Properties inspector, click the Polygon Hotspot Tool. Click in the upper-left corner of the image, and click around the Contact Us wedge. Be sure to cover as much of the logo as possible without overlapping any of the wedges for the other four pages. In the Properties inspector, in the Link box, key: pages/contact.html. If you see the # symbol in the Link box, be sure to delete this before you key the text. The Link box only becomes active after the hotspot is created!

Create an Image Map with Hotspots cont… In the Properties inspector, click the Polygon Hotspot Tool. Click in the upper-left corner of the image, and click around the Donate wedge. Be sure to cover as much of the logo as possible without overlapping any of the wedges for the other four pages. In the Properties inspector, in the Link box, key: pages/donate.html. If you see the # symbol in the Link box, be sure to delete this before you key the text.

Create an Image Map with Hotspots cont… In the Properties inspector, click the Polygon Hotspot Tool. Click in the upper-left corner of the image, and click around the Register wedge. Be sure to cover as much of the logo as possible without overlapping any of the wedges for the other four pages. In the Properties inspector, in the Link box, key: pages/register.html. If you see the # symbol in the Link box, be sure to delete this before you key the text.

Create an Image Map with Hotspots cont… In the Properties inspector, click the Polygon Hotspot Tool. Click in the upper-left corner of the image, and click around the Scrapbook wedge. Be sure to cover as much of the logo as possible without overlapping any of the wedges for the other four pages. In the Properties inspector, in the Link box, key: pages/scrapbook.html. If you see the # symbol in the Link box, be sure to delete this before you key the text.

Create an Image Map with Hotspots cont… In the Properties inspector, click the Polygon Hotspot Tool. Click in the upper-left corner of the image, and click around the Sponsors wedge. Be sure to cover as much of the logo as possible without overlapping any of the wedges for the other four pages. In the Properties inspector, in the Link box, key: pages/sponsors.html. If you see the # symbol in the Link box, be sure to delete this before you key the text.

Create a Web Photo Album Using Fireworks Open the Scrapbook page in the design view. Choose Commands  Create Web Photo Album. In the Create Web Photo Album dialog box, in the Photo album title box, key: Bike and Hike Photos. To the right of the Source images folder box, click the Browse button. Browse to  Images. Double-click the  photos, and click select. Click the Thumbnail size drop-down arrow and select 72 x72. In the Columns box, key 3. Do not change the other options. Click OK.

Create a Web Photo Album Using Fireworks cont… When Fireworks completes the image processing, close Fireworks. A message saying Album created appears, Click OK. In Dreamweaver, open the scrapbook.html page. Click the View Web Photo Album button. In the Properties inspector, to the right of the Link box, click the folder icon. In the Select File dialog box, double-click the photos folder. In the folder, select the index.htm file and click OK. (Caution … DO NOT select the index.html page!)

Create a Web Photo Album Using Fireworks cont… Open the index.htm file. Click on the first thumbnail, in the Properties inspector in the Alt box, key: Cactus Flower. Add descriptive text to the Alt box for all of the other images.

Insert Background Sounds Open your Bike and Hike home page (index.html) in design view. Position the insertion point after the image map graphic. Select Insert  Media  Flash (SWF). In the Source File dialog box, click the Look in drop- down arrow. Browse to the Multimedia . In the folder, select sound.swf and click OK. If necessary, in the warning box, click Yes. In the Properties inspector, uncheck the Loop box. The sound file will now play only once.

Insert a Video Clip In your Bike and Hike Web site, open the video.html page in design view. In the Content area, double-click the word video. Press Delete. Choose Insert  Media  Flash. In the Select File dialog box, browse to  multimedia. Select the bike.swf file and click OK. If necessary, in the warning box, click Yes. Save the file in the Web site’s multimedia folder. A gray box with a Flash plug-in icon appears. With the gray box still selected, in the Properties inspector, next to Loop, uncheck the check box. In the W box, change the number to 240. In the H box, change the number to 180.

Insert a Video Clip Position the insertion point after the Flash plug- in icon and press Enter once. Key the following text: To view this video, you may need to download the latest Macromedia Flash Player plug-in. Click here to go to the player. Select the words Click here. In the Properties inspector, in the Link text box, key the following URL:

Insert an Animation Open the Register page (register.html) in design view. Double-click the word Content. Press Delete. Click Insert ↓ Image. Browse for the  multimedia. Select title_animate.gif and click OK.

Create and Insert a Flash Button Open the Register page (register.html) in design view. Position the insertion point after the animated GIF file and press Enter once. Click Insert ↓ Media → Flash Button. In the Insert Flash Button dialog box, in the Style box, scroll down and select the Diamond Spinner style. In the Button text box, key: Registration. Click the Browse button to the right of the Link text box. In the Select File dialog box, browse to the text folder in your  BikeHike. Select the registration.doc file. In the Relative to box, make sure Document is selected. Click OK. The Flash button will now link to this document.

Insert a Banner Ad Open the Sponsors page (sponsors.html) in design view. Position the insertion point to the right of the video store logo. Click on Insert ↓ Images → Rollover Image. In the Insert Rollover Image dialog box, in the Image Name box, key: bike_ad Click the Browse button next to the Original image box. Browse

Add Update Information Open the Bike and Hike template (Bike_Main.dwt) in design view. Locate it in the  BikeHike,  Templates. Choose Insert  Date. In the Insert Date dialog box, click the Day format drop-down arrow. Select Thursday,. In the Date format list, make sure March 7, 1974 is selected. Click the Time format drop-down arrow and select 10:18 PM. Make sure the Update automatically on save check box is checked.

Remove a Page From a Template Open the donate.html page in design view. Locate the file in. Locate it in the  BikeHike,  Pages. In the Title box, key: Bike and Hike – Donate Choose Modify  Templates  Detach from Template. The donate.html page is no longer defined by the template.

Insert Show-Hide Layers Button With the donate.html page in design view, click after the word Donations and press Enter. Key: Select the buttons below to learn how to donate to the Centuryville Community Center. Format the text to be Heading2. Click Insert  Image. Browse to  BikeHike,  images. Insert the button_funds.gif file. In the Alt text box, Key: Funds. Click Insert  Image. Browse to  BikeHike,  images. Insert the button_resale.gif file. In the Alt text box, Key: Resale. Press Enter.

Insert Show-Hide Layers Button Click to the right of the Resale button. Press Enter once. Click Insert toolbar click on Common and select Layout. Click on Draw APDiv. Click inside the layer and key: (to make a list … Insert  HTML text objects  unordered list) Donate funds in the amount of: – $25 – $50 – $100 – $500 Click the layer's top-left handle. The properties inspector's view make the following changes. In the L box, key: 272px, In the T box, key: 290px. Click the Vis drop-down arrow and select hidden. In the ID box, key: funds.

Insert Show-Hide Layers Button Click on Draw APDiv again. To create a second layer that is roughly the same size as the first. Inside the layer, key: (to make a list … Insert  HTML text objects  unordered list) Donate goods for resale such as: -Electronics -Appliances -Clothes -Furniture Click the layer's top-left handle. The properties inspector's view make the following changes. In the L box, key: 272px, In the T box, key: 290px. Click the Vis drop-down arrow and select hidden. In the ID box, key: resale.