1 / 29

Web Foundations

Web Foundations. Wednesday, November 20, 2013 LECTURE 32 : Dreamweaver Slide Show and Google Map. Inserting a Slideshow. Inserting a Slideshow: Steps. 1. Open the HTML file that will be used for the slideshow in Dreamweaver. The "Plain Page" file below can be used for this example.

melinda-oliver
Download Presentation

Web Foundations

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Foundations Wednesday, November 20, 2013 LECTURE 32: Dreamweaver Slide Show and Google Map

  2. Inserting a Slideshow

  3. Inserting a Slideshow: Steps 1. 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. 2. Plain Page: http://faculty.cascadia.edu/cduckett/foundations/test/slideshow.html Images for Slideshow: http://faculty.cascadia.edu/cduckett/foundations/test/images/ JavaScript: http://faculty.cascadia.edu/cduckett/foundations/test/slideshow.js Alternative Online Slideshow Builder: http://www.barelyfitz.com/projects/slideshow/wizard/

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

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

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

  7. 6. In the CSS Rule Definition for #slideshow popup, select the boxcategory from the left-hand column, and enter the following: Width: 246 px Height: 187 px Padding: 2px (Same for all)

  8. 7. Now select the Bordercategory 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 OKagain. 8.

  9. 9. Examine the page in Designview. Delete the "dummy" text that Dreamweaver has entered into the box. 10.

  10. 11. In <div id="slideshow"> enter the following script: <script type="text/javascript"> varshow = 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. 12. 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. 13. This can be fixed by manually resizing your various pixelwidthand heightin the code until the overrun issue is repaired, or else you can simply add overflow:hidden; to #slideshow in the CSScode. Easy-peasy!

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

  14. Inserting a Google Map

  15. Inserting a Google Map 1. 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. 2. Plain Page: http://faculty.cascadia.edu/cduckett/foundations/test/map.html

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

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

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

  19. 6. In the CSS Rule Definition for #LocationMappopup, select the boxcategory from the left-hand column, and enter the following: Width: 600 px

  20. 7. Now select the Bordercategory 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 OKagain. 8.

  21. 9. 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 linkicon (circled in redbelow)

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

  23. 11. In the new popup window, select Customthen enter the following: Width: 600 Height: 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">

  24. 12. Return to Codeview and highlight the "dummy" text that Dreamweaver put in

  25. 13. Now paste in the HTMLcode you previously copied from the Google Map popup

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

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

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

More Related