Web FoundationsWEDNESDAY, NOVEMBER 20, 2013

LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP

Inserting a Slideshow

Inserting a Slideshow: Steps

Open the HTML file that will be used for the slideshow in Dreamweaver. The "Plain Page" file below can be used for this example.

Find the <section> or <div> that will contain the slideshow, and click in the space that will house the slideshow.

Alternative Online Slideshow Builder: http://www.barelyfitz.com/projects/slideshow/wizard/

Plain Page: http://faculty.cascadia.edu/cduckett/foundations/test/slideshow.html

JavaScript: http://faculty.cascadia.edu/cduckett/foundations/test/slideshow.js

1.

2.

Images for Slideshow: http://faculty.cascadia.edu/cduckett/foundations/test/images/

From the menu bar, select Insert, then Layout Objects, then Div Tag

3.

In the Insert Div Tag popup select the New CSS Rule button.

4.

In the New CSS Rule popup, change the contextual selector type to ID, and name the selector slideshow.

5.

In the CSS Rule Definition for #slideshow popup, select the box category from the left-hand column, and enter the following:

Width: 246 pxHeight: 187 pxPadding: 2px (Same for all)

6.

Now select the Border category and enter the following:

Style: solid (Same for all)Width: 1 px (Same for all)Color: #666 (Same for all)

Click on OK, and then OK again.

7.

8.

Examine the page in Design view.

Delete the "dummy" text that Dreamweaver has entered into the box.

9.

10.

In <div id="slideshow"> enter the following script:

<script type="text/javascript"> var show = new SlideShow("", ["dude1.jpg","dude2.jpg","dude3.jpg","dude4.jpg","dude5.jpg","dude6.jpg", "dude7.jpg"], 240, 181); document.write(show.getHTML()); show.run(); </script>

11.

Save and test your slideshow page in the browser. If the pixel width or height is off, the images may appear to overrun the slideshow by one image.

12.

This can be fixed by manually resizing your various pixel width and height in the code until the overrun issue is repaired, or else you can simply add overflow:hidden; to #slideshow in the CSS code. Easy-peasy!

13.

Finished Slideshow: http://faculty.cascadia.edu/cduckett/foundations/test/slideshow/slideshow1.html

Inserting a Google Map

Inserting a Google Map

Plain Page: http://faculty.cascadia.edu/cduckett/foundations/test/map.html

Open the HTML file that will be used for the Google map in Dreamweaver. The "Plain Page" file below can be used for this example.

Find the <section> or <div> that will contain the Google Map, and click in the space that will house the map.

1.

2.

As before, from the menu bar, select Insert, then Layout Objects, then Div Tag

3.

Also as before, in the Insert Div Tag popup select the New CSS Rule button.

4.

In the New CSS Rule popup, change the contextual selector type to ID, and name the selector LocationMap.

5.

In the CSS Rule Definition for #LocationMap popup, select the box category from the left-hand column, and enter the following:

Width: 600 px

6.

Now select the Border category and enter the following:

Style: solid (Same for all)Width: 1 px (Same for all)Color: #666 (Same for all)

Click on OK, and then OK again.

7.

8.

In your browser, go to maps.google.com and start typing Cascadia Community College in the search bar to bring up a map of Cascadia's location, then click on the little link icon (circled in red below)

9.

This will bring up a URL that can be pasted into a browser, but instead click on Customize and preview embedded map

10.

In the new popup window, select Custom then enter the following:

Width: 600Height: 300

Next, select all the HTML code from the lower code window and copy it which is going to be pasted into the <div id="LocationMap">

11.

Return to Code view and highlight the "dummy" text that Dreamweaver put in

12.

Now paste in the HTML code you previously copied from the Google Map popup13.

Return to Design view to examine your map container. If you want, you can delete the View Larger Map link if you don't care to have it.

14.

In my example I deleted the View Larger Map link. Save your work, then examine the page in the browser.

15.

Finished Google Map: http://faculty.cascadia.edu/cduckett/foundations/test/slideshow/map1.html