[display_podcast]

• Goal
  • Understand how to create a web page with a central image that has links with image maps
• Product
  • Splash page with image map links
    • Main box with image
    • Navigation with links to your class social media tools
    • Quote  / Name box
• Examples
  • Maddie’s post
• Steps
  1. Export your Illustrator prototype as a .jpg or .png
  2. Upload  finished prototype .jpg or .png image to your Flickr account
  3. Download sample HTML and CSS file from this page
  4. Embed your image code into the HTML and CSS code
  5. Adjust the main DIV and image size to the size of your image
  6. Create the image maps over the social media icons linking them to your school social media sites
  7. Take a screenshot of the finished work
• Tools
  • Adobe Dreamweaver  (Free 30 day trial)
  • Kompozer (free – Open Source)
• Resources
  • splash_page_imagemap.html (html and CSS without image maps)
  • –> RIGHT CLICK TO DOWNLOAD HTML FILE <–
  • The downloadable HTML has all the code necessary for the image map version of the project with comments.
  • You will need to make the image map and size changes, of course.
  • Resources from W3schools.com
    • CSS Grouping/Nesting
    • CSS Dimension
    • CSS Display
    • CSS Positioning
    • CSS Floating
    • CSS Align
    • CSS Navigation Bar
    • CSS Image Opacity
    • CSS Media Types

Remember to Your Comment Code

• Use comments to identify DIV’s in the CSS and HTML
• /* This is a sample of a comment in CSS */
• <!– This is an example of a HTML comment. –>

Sample Commented Code