Summary:

What in the World? - Create a Map with Rollover Popup's in Dreamweaver

    ●   Create an interactive web page promoting a country or tourist destination of your choice.

    ●   Embed a map with at least 3 “tooltip” style popups that activate on rollover.  Each popup div is like a mini web page with text, images, borders, backgrounds, colors, and other elements detailing the specifics of their country or destination.

    ●   Students also create maps of their destination in Adobe Illustrator, including roads, mountains, rivers, coastlines, etc., while simultaneously building the foundations of their web pages in Dreamweaver®, creating containers, wrappers, headers and footers.  Using both Illustrator and Dreamweaver together keeps the project moving briskly and capitalizes on students’ artistic abilities, as well as coding skills.  This project incorporates a “need to know” about their destination, including geography and cartography.  


    ●   Students modify the rollover attributes in Java, learn about display: none and block, position the popup divs in proximity to the “hotspot,” and adjust the size of the div to accommodate the enclosed information.  They learn to recognize the differences between HTML, CSS and Java, and their similarities.

 

The Project Happens in 3 Parts:

Part #1: Draw a Map in Illustrator ~

    ●   Mark at least 3 Areas a Visitor would be Interested:

Cities - Airports - Rivers - Waterfalls - Beaches - Hiking Trails - Roads - Parks - Driving Tours - National Parks - Recreational Opportunities - Etc.

  •   Also Indicate Mountains, Lakes, Towns, Water and Coastlines.

  •   Use Gradients, Feathering and the Mesh Tool to create Roads, Rivers, Mountains, Lakes, Towns, Water and Coastlines.

 •    Add Image Traced Pictures of Famous Landmarks and other Remarkable Features.

 •    Also add borders, text, and backgrounds to create a visually interesting and stimulating map image.


    ●   During this early phase you also create the foundations of your index page:


  •   Root Folder

  •   index.htm page

  •   Basic HTML elements:


  container   •   header   •   nav   •   content   •   footer
  All Controlled by an External CSS Document

 •    The Illustrator map is then saved as a .png file, resized to fit the content area of the index page.


  •   The differences between .jpg and .png are discussed.

  •   Transparency vs. Opacity
  •   kilobytes size vs. download speed
  •   Pixels vs. Vector
  •   Resolution   •   dpi


Part #2: JavaScript ToolTip Rollovers ~

    ●   Students create at least 3 “hotspots” over their maps.

  •     Tourist destinations on maps must be clearly indicated by large stars or circles

  •    Text and other graphic elements indicate where the hotspot is.

  •     Without these visual aids visitors won't know where the interactive elements on the map are.

animated flagEngland is known for its long history.

The Romans called it Britannia and named its major trade center Londinium.

  •    Students often recognize the need for revisions on their maps images during this phase.

  •     It’s easy to modify the image in Photoshop at this point.

    ●   Each “hotspot” is created using the tools in Dreamweaver and is given its own unique id

    ●   The JavaScript User Interface is downloaded to root folders and linked to index page.

    ●   Students learn to access the external .js file.

    ●   Lastly, divs are created and given unique id’s

    ●   The new divs must be positioned near the “hotspot” on the map, but shouldn’t overlap.

  •     The design concept of Proximity is introduced here.

  •     Popup divs won't be associated with the interactive element unless they are near the hotspot.

    ●   Contents of Popup:

  •     Each div must contain at least 3 of the following:

Favicons Floated Images CSS Borders Google Fonts CSS Background Colors
Semi-Transparent Backgrounds Pseudo Tags CSS Generated Rounded Divs Gradient Text
Absolute Links Relative Links Slideshows
Background Images

display: block makes the apDiv visible so you can see it!

    ●   display=none

    ●   The default state of each div must be made invisible when the page first loads by adding code to the div in CSS.

  •     To view the contents of the div it’s display=none attribute must be changed back to block.


Last Part: Presentation ~

    ●   Your Final Product

    •   Using CSS, HTML, Illustrator, JavaScript, and Photoshop, all content used to describe the particular issues associated with your subject must be 90% your own, modified into an original composition, including all text and imagery, and must reflect the nature of the subject in a positive school appropriate manner.

  •  Your design will be graded according to the Rubric, including organizational hierarchy, presentation skills, technological proficiency, attention to detail, QUALITY!

  •  Attach your Final Product to your Portfolio According to These Instructions.

ALWAYS name your first page index and create a separate root folder for all your files.

DO NOT store any associated files outside your the root folder for THIS SPECIFIC PROJECT.

NEVER leave your work on the desktop or depend on a flash drive - instead, upload your work to and back it up.

Other People's Work:

These are examples created by students following this project.

Example 1

Example 2

Example 3

Example 4

Example 5

Example 6

Example 7

Example 8

Example 9

Example 10

Example 11

Example 12

     

New Project "What in the World?" Begins Today

Digital Art and Design

New Project "What in the World?" Begins Today  ~ 

Introduce this PBL project by reading the Entry Document with the Class -

Reflection Journal - Attach your previous project to your portfolio and reflect upon what you have learned from the previous project.

Assignment #1 - Create a New Folder and an index Page at the Root Level of your sites In DwNOTHING TO ATTACH - Just Do it!

Assignment #1 - Research your country and complete the Creative Brief (Graphic Organizer) …

  •    Begin your Research Here


Day #2: What in the World? ~

Digital Art and Design

Day #2: What in the World?  ~ 

Daily Journal - What are you trying to do? Begin class with this warm-up writing prompt … ~ OR ~

Daily Journal - Something You Don't Like? - Begin class with this warm-up writing prompt …

 Tutorial #1 - Mapping - Find an outline of your country and begin tracing it in Illustrator.

Tutorial #2 - styles.css - Attach your CSS file by the End of Class.

Assignment #1 - Choose your Colors for this Project - NOTHING TO ATTACH - Just Do it!

Assignment #2 - Create a New Folder and an index Page at the Root Level of your sites In DwNOTHING TO ATTACH - Just Do it!

Continue your Research on your Creative Brief (Graphic Organizer) …

  •   Workshop - What's a Creative Brief (Graphic Organizer)?


Day #3: What in the World? ~

Digital Art and Design

Day #3: What in the World?  ~ 

Daily Journal - What are you Doing? Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - What Makes a Good Interactive Map? - Begin class with this warm-up writing prompt …

 Tutorial #1 - Finish Mapping - Find an outline of your country and begin tracing it in Illustrator.

Tutorial #2 - HTML Tag - NOTHING TO ATTACH - Just Do it!

 Tutorial #3 - Road Maps in Illustrator - Attach by Due Date.

Continue your Research on your Creative Brief (Graphic Organizer)

  •   Workshop - Mountain Symbols - How do you install them?


Day #4: What in the World? ~

Digital Art and Design

Day #4: What in the World?   ~ 

Daily Journal - Color Journal - Begin class with this warm-up writing prompt.

Tutorial #1 - Container - Attach by Due Date.

Tutorial #2 - Brushes Background in PS - Attach by Due Date.

Tutorial #3 - Clipping Mask in Illustrator - Attach by Due Date.

 Continue your Research on your Creative Brief (Graphic Organizer)

  •   Workshop - Where are the Rollovers on your Map going to Be?


Day #5: What in the World? ~

Digital Art and Design

Day #5: What in the World?  ~ 

Daily Journal - Intended Audience - Begin class with this warm-up writing prompt. ~OR~

Daily Journal - Why Visit? - Begin class with this warm-up writing prompt.

Tutorial #1 - Header - Attach by Due Date.

 Tutorial #2 - Finish Clipping Mask in Illustrator - Attach by Due Date.

Tutorial #3 - Coast Line Brush in Illustrator - Attach by Due Date.

Tutorial #4 - Mesh Tool Flower in Illustrator - Attach by Due Date.

  Due Today! - Finish your Research on your Creative Brief (Graphic Organizer)


Day #6: What in the World? ~

Digital Art and Design

Day #6: What in the World?   ~ 

Daily Journal - Tone - Begin class with this warm-up writing prompt.

Tutorial #1 - Nav Div Tutorial - NOTHING TO ATTACH - Just Do it!

 Tutorial #2 - Mountain Symbols in Illustrator - Attach by Due Date.

 Tutorial #3 - Image Trace your Map in Illustrator - Attach by Due Date.

•   Workshop - What file format make for Transparency!


Day #7: What in the World? ~

Digital Art and Design

Day #7: What in the World?   ~ 

Daily Journal - View This Rollover Web Site - Begin class with this warm-up writing prompt. ~OR~

Daily Journal - What is Most Interesting? - Begin class with this warm-up writing prompt.

Tutorial #1 - Content Div Tutorial - NOTHING TO ATTACH - Just Do it!

 Continue to Research and Update your Sites.

  •   Workshop - Rollover Buttons - What's Really Happening?


Day #8: What in the World? ~

Digital Art and Design

Day #8: What in the World?   ~ 

Daily Journal - Your Design? Begin class with this warm-up writing prompt. ~OR~

Daily Journal - Describe the Following Topics - Begin class with this warm-up writing prompt.

Tutorial #1 - Frames in Photoshop - Attach by Due Date.

Tutorial #2 - Untitled Documents - Nothing to attach - Just Do it because the Rubric says …

Tutorial #3 - Footer Div Tutorial - NOTHING TO ATTACH - Just Do it!

 Continue your Research - Update your sites.

•   Workshop - What's Java?


Day #9: What in the World? ~

Digital Art and Design

Day #9: What in the World?   ~ 

 Journal - Bad Design Journal- Begin class with this warm-up writing prompt … ~OR~

 Journal - What's Good About It?- Begin class with this warm-up writing prompt …

Tutorial #1 - Coastline Brushes in Ai - Attach by Due Date.

Tutorial #2 - First Letter Pseudo Tags - Nothing to attach - Just Do it because the Rubric says …

 Tutorial #3 - Image Trace your Map in Illustrator - Attach by Due Date.

  •   Workshop - Continue your Research - Update your sites.


Day #10: What in the World? ~

Cell Example

Day #10: What in the World?   ~ 

Daily Journal - Compare and Contrast - Begin class with this warm-up writing prompt. ~OR~

Daily Journal - What is Special? - Begin class with this warm-up writing prompt.

Tutorial #1 - Frames in Photoshop - Attach by Due Date.

Tutorial #2 - Text Indent Pseudo Tags - Nothing to attach - Just Do it because the Rubric says …

Assignment #1 - Favicon - Nothing Due - Just Do It.

Workshop: Your Rollover Divs must be styled with everything you've learned about web design so far to get an A on this project, including: Insert Images and Float themGoogle FontsBackgrounds & ColorsTransparent backgroundsFirst Letter Pseudo TagsGradient Backgrounds


Day #11: What in the World? ~

Digital Art and Design

Day #11: What in the World?  ~ 

 Daily Journal - What do they do well? Begin class with this warm-up writing prompt. ~OR~

Daily Journal - Interesting Thing - Begin class with this warm-up writing prompt.

Tutorial #1 - Map Text - Attach by Due Date.

Tutorial #2 - Style your apDiv - Attach by Due Date.

Tutorial #3 - First Line UPPERCASE Pseudo Tags - Attach by Due Date.

Assignment #1 - Favicon - Nothing to attach - Just Do it because the Rubric says …

Remember: Your Rollover Divs must be styled with everything you've learned about web design so far to get an A on this project, including: Insert Images and Float themGoogle FontsBackgrounds & ColorsTransparent backgroundsFirst Letter Pseudo TagsGradient Backgrounds

  •   Workshop - Contrast Presentation!


Day #12: What in the World? ~

Digital Art and Design

Day #12: What in the World?   ~ 

Daily Journal - Top 3 Attractions … Begin class with this warm-up writing prompt. ~OR~

Daily Journal - View these web sites and comment … Begin class with this warm-up writing prompt.

Tutorial #1 - Style your apDiv - Attach by Due Date.

 Tutorial #2 - Gradient Backgrounds in CSS - Attach by Due Date.

Tutorial #3 - First Line UPPERCASE Pseudo Tags - Attach by Due Date.

Tutorial #4 - Float an Animated GIF - Attach by Due Date.

Remember: Your Rollover Divs must be styled with everything you've learned about web design so far to get an A on this project, including: Insert Images and Float themGoogle FontsBackgrounds & ColorsTransparent backgroundsFirst Letter Pseudo TagsGradient Backgrounds

  •   Workshop - Contrast Presentation!


Day #13: What in the World? ~

Digital Art and Design

Day #13: What in the World?   ~ 

Daily Journal - Contrast - Begin class with this warm-up writing prompt. ~OR~

Daily Journal - What's the Most Important Aspect of your Design? Begin class with this warm-up writing prompt.

Tutorial #1 - Google Fonts - Nothing to Attach - Just Do It!

 Tutorial #2 - Gradient Backgrounds in CSS - Attach by Due Date.

Tutorial #3 - Float an Animated GIF - Attach by Due Date.

Remember: Your Rollover Divs must be styled with everything you've learned about web design so far to get an A on this project, including: Insert Images and Float themGoogle FontsBackgrounds & ColorsTransparent backgroundsFirst Letter Pseudo TagsGradient Backgrounds

  •   Workshop - Contrast Presentation!


Day #14: What in the World? ~

Digital Art and Design

Day #14: What in the World?  ~ 

Daily Journal - View the 10 Commandments - Begin class with this warm-up writing prompt. ~OR~

Daily Journal -Weather in your apDiv - Begin class with this warm-up writing prompt.

Tutorial #1- Create a shiny Globe in Illustrator - Attach by Due Date.

Tutorial #2 - img Padding - Attach by Due Date.

Tutorial #3 - Float an Animated GIF - Attach your uploaded web site by the end of the period…

  •   Workshop - position: relative - How do you position your apdiv relative to it's container?

Remember: Your Rollover Divs must be styled with everything you've learned about web design so far to get an A on this project, including: Insert Images and Float themGoogle FontsBackgrounds & ColorsTransparent backgroundsFirst Letter Pseudo TagsGradient Backgrounds


Day #15: What in the World? ~

Digital Art and Design

Day #15: What in the World?   ~ 

Daily Journal - Find Another Site Like Yours … Begin class with this warm-up writing prompt. ~OR~

Daily Journal - View These Rollovers… Begin class with this warm-up writing prompt.

Tutorial #1 - Radial Circle Backgrounds - Attach by Due Date.

Tutorial #2 - Animated Start .gif for your apDiv - Make your own animated .gif and put it into your popup - Attach by Due Date.

  •   Workshop - position: relative - How do you position your apdiv relative to it's container?

Remember: Your Rollover Divs must be styled with everything you've learned about web design so far to get an A on this project, including: Insert Images and Float themGoogle FontsBackgrounds & ColorsTransparent backgroundsFirst Letter Pseudo TagsGradient Backgrounds


Day #16: What in the World? ~

Digital Art and Design

Day #16: What in the World?   ~ 

Daily Journal - Write a short paragraph- Begin class with this warm-up writing prompt.

Tutorial #1- Create a shiny Globe in Illustrator - Attach by Due Date.

Tutorial #2 - CSS Gradient Backgrounds - Attach by Due Date.

  •   Workshop - position: relative - How do you position your apdiv relative to it's container?


Day #17: What in the World? ~

Digital Art and Design

Day #17: What in the World?   ~ 

Daily Journal - Which One do you like better? - Begin class with this warm-up writing prompt.

Tutorial #1 - CSS Gradient Backgrounds - Attach by Due Date.

Tutorial #2 - Absolute Links - Nothing to Attach. Just Do It Because the Rubric Requires it.

Tutorial #3 - Untitled Document - Nothing Due - Just Do It.

Assignment #1 - Favicon - Nothing Due - Just Do It.

  •   Workshop - position: relative - How do you position your apdiv relative to it's container?