Bike and Hike

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

Galleries, Layers

Locate FilesLocate Files

• Open the CTDWebDesign drag and drop the folder BikeHike into your flash drive.

Insert an Inline GraphicInsert 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 Crop, Resize and Resample a GraphicGraphic

• 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 Crop, Resize and Resample a Graphic cont…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 GraphicModify 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 Create an Image Map with HotspotsHotspots

• 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 Create an Image Map with Hotspots cont…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!


• 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.


• 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.


• 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.


• 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 Create a Web Photo Album Using FireworksUsing 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 Create a Web Photo Album Using Fireworks cont…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 Create a Web Photo Album Using Fireworks cont…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 SoundsInsert 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 ClipInsert 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 ClipInsert 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: http://www.macromedia.com/go/getflashplayer

http://www.macromedia.com/go/getflashplayer

Insert an AnimationInsert 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 Create and Insert a Flash Button 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 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 InformationAdd 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 Remove a Page From a TemplateTemplate

• 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 ButtonInsert 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.


• 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.


• 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-FurnitureClick 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.

Documents

Bike and Hike