Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.
-
Upload
eleanor-chandler -
Category
Documents
-
view
222 -
download
2
Transcript of Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.
![Page 1: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/1.jpg)
Web FoundationsWEDNESDAY, NOVEMBER 20, 2013
LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP
![Page 2: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/2.jpg)
Inserting a Slideshow
![Page 3: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/3.jpg)
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/
![Page 4: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/4.jpg)
From the menu bar, select Insert, then Layout Objects, then Div Tag
3.
![Page 5: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/5.jpg)
In the Insert Div Tag popup select the New CSS Rule button.
4.
![Page 6: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/6.jpg)
In the New CSS Rule popup, change the contextual selector type to ID, and name the selector slideshow.
5.
![Page 7: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/7.jpg)
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.
![Page 8: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/8.jpg)
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.
![Page 9: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/9.jpg)
Examine the page in Design view.
Delete the "dummy" text that Dreamweaver has entered into the box.
9.
10.
![Page 10: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/10.jpg)
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.
![Page 11: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/11.jpg)
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.
![Page 12: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/12.jpg)
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.
![Page 13: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/13.jpg)
Finished Slideshow: http://faculty.cascadia.edu/cduckett/foundations/test/slideshow/slideshow1.html
![Page 14: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/14.jpg)
Inserting a Google Map
![Page 15: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/15.jpg)
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.
![Page 16: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/16.jpg)
As before, from the menu bar, select Insert, then Layout Objects, then Div Tag
3.
![Page 17: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/17.jpg)
Also as before, in the Insert Div Tag popup select the New CSS Rule button.
4.
![Page 18: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/18.jpg)
In the New CSS Rule popup, change the contextual selector type to ID, and name the selector LocationMap.
5.
![Page 19: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/19.jpg)
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.
![Page 20: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/20.jpg)
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.
![Page 21: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/21.jpg)
![Page 22: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/22.jpg)
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.
![Page 23: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/23.jpg)
This will bring up a URL that can be pasted into a browser, but instead click on Customize and preview embedded map
10.
![Page 24: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/24.jpg)
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.
![Page 25: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/25.jpg)
Return to Code view and highlight the "dummy" text that Dreamweaver put in
12.
![Page 26: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/26.jpg)
Now paste in the HTML code you previously copied from the Google Map popup13.
![Page 27: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/27.jpg)
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.
![Page 28: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/28.jpg)
In my example I deleted the View Larger Map link. Save your work, then examine the page in the browser.
15.
![Page 29: Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.](https://reader036.fdocuments.net/reader036/viewer/2022062407/56649f505503460f94c72a94/html5/thumbnails/29.jpg)
Finished Google Map: http://faculty.cascadia.edu/cduckett/foundations/test/slideshow/map1.html