Websites/project1/pages/illustration.html must include

• A header image/banner
• Explanation text about the assignment with correct spelling and grammar
• A thumbnail of your illustration properly linked as described below to a custom browser window that displays your large illustration
• A title of the illustration
• Your edited and corrected Artist Statement for your illustration

How do you the above? Follow these instructions:

1. Your Self-Portrait illustration was produced in your Design class as a CMYK print document but we need an RBG web version for the web. So open your illustration file and File > Save as > illustration.ai in your Websites/project1/p1_LOCAL_ONLY folder. Then change the color mode by going to File > Document Color Mode > RGB.
2. Create two .jpg versions of the same image by twice going to File > Save for Web
   • change the image size in the Image Size tab on the Save for Web window
   • choose .jpg format
   • create a .jpg thumbnail with max width of 200 px saved as Websites/project1/images/design_illustration_thumbnail.jpg
   • repeat and create a larger .jpg version with max width of 1000 px saved as Websites/project1/images/design_illustration.jpg
3. In DW, open illustration.html and type an explanation of the assignment so that your viewers have some context to view your art. Then paste your Artist Statement for your illustration.
4. Place your cursor in front of your Artist Statement in Design view. Go to Insert > Layout Objects > Div and choose for class "photoleft" or "photoright". Delete the text inside the resulting div on your page.
5. Click inside the .photoleft or .photoright div box so that your cursor is blinking inside the div. Go to Insert > Image and navigate to Websites/project1/images/design_illustration_thumbnail.jpg. A caption is optional by clicking on the thumbnail, pressing on the right arrow key on your keyboard and Shift+Return to create a new line and type in your caption under the photo. The caption could state "Click on image to see larger version".
6. Create a new blank html page (in DW, File > New > Blank page > HTML > none > Create) and save it as Websites/project1/pages/illustration-large.html. Include a suitable page title for the browser window. Insert > image your design_illustration.jpg (larger one) image
7. For Websites/project1/pages/illustration-large.html, go to the CSS Styles panel and attach Websites/styles/fonts.css so that you can have any custom fonts available to you.
8. For Websites/project1/pages/illustration-large.html, go to the CSS Styles panel and create Tag rule for "body" with the following properties and values:
   • font-family = should match your other font choices
   • font-size = 100% (not pixels)
   • color = white (or the color of your choice)
   • background-color = black (or the color of your choice that doesn't conflict with the text color)
   • margins = 0
   • text-align=center
   • padding = 0
9. Back on Websites/project1/pages/illustration.html, click on the thumbnail and in the Properties panel, type a # in the link field.
10. Link the thumbnail to open a new browser window linked to illustration-large.html by selecting the thumbnail and going to Tag Inspector > Behaviors > + > Open Browser Window with these settings
    • width = width of your photo + 16 pixels for the external scrollbar (i.e. 1000 for photo + 16 for scrollbar = 1016 px)
    • nothing for window height
    • check the box for Scrollbars as needed just in case a vertical external scrollbar is needed
    • window name = showcase
11. Optional: Offset the new browser window from the screen top and left by a custom amount (works on some browsers)
    • Click on the thumbnail. Then go to Modify > Edit Tag
    • Twirl down Event and choose onClick
    • Add the top and left code like the image below with any amount of your choice - be careful with commas and apostrophes
    • 
12. OPTIONAL 5 points CONTENT EXTRA CREDIT - record yourself reading your Illustration Artist Statement with music and embed the resulting .mp3 in an artful way - either as a caption under the thumbnail, above the main text of the Artist Statement, or part of the illustration-large.html page. Inserting HTML5 Audio instructions here - you'll have to tweak it a bit to customize it for your audio.