Prof. Jenna Spevack | Teaching Site

COURSE CALENDAR | WEEK 10 CLASS OUTLINE | Homework

Topics Covered in Class:

1. Review
   1. Student Projects
   2. Review nested lists from last class and problem questions from the Midterm Exam.
2. Types of Navigation-- Horizontal Navigation, Vertical Navigation, Horizontal Global Navigation and Vertical Local Navigation, Tabbed Navigation, Drop-Down Navigation, Breadcrumb Navigation.
3. Understanding the path structure when creating sub-navigation
   1. Last week we created a separate projects folder to hold the various project sections.
   2. Your links from the sub-navigation list on the projects.html page to a section page should look like this: <a href="projects/photo.html">Photography</a>
   3. Links from a section page back to the project.html, any main navigation link, and the link to your css should look like this: <a href="../projects.html">Projects</a>
   4. Links from a section page to another section page should look like this: <a href="design.html">Graphic Design</a>
4. Creating thumbnails:
   1. Open the original file in Photoshop
   2. Select the crop tool and set the width and height options to 100px wide by 100px high. Set the dpi to 72dpi. Click and drag the crop tool over a section of your image. Move or resize the selection to get the important elements. Double-click and view at 100%.
      1. Alternately, you can change the image size to keep the rectangular proportions of the original. However, make sure you keep the image size consistent for each image optimized. Use Image > Canvas Size to adjust the short side.
   3. Choose File > Save for Web
   4. Optimize your image based on image quality and size. View your image at 100% and compare the original and optimized with the 2-up tab.
   5. Save these to your projects/images folder with a proper file name
      EXAMPLE: t_photo01.jpg
   6. Close your original file without saving.
5. Adding images to your HTML page:
   1. http://www.htmldog.com/guides/htmlbeginner/images/
   2. Add a thumbnail image to your projects page representing each sub-section (web.html, photo.html) using the img tag.
   3. Make the thumbnail image a link by adding an anchor around the image tag. <a href="projects/photo.html"><img src="projects/images/t_photo.jpg" width="100" height="100" alt="photo of tree " /></a>
6. Floating an image on the Projects page: sample
   1. You will place the image inside a paragraph like this:
      <p>
<img src="projects/images/t_photo.jpg" width="100" height="100" alt="photo of tree" class="floatright" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip...
</p>
   2. Use this Tutorial to learn more about floating images: http://css.maxdesign.com.au/floatutorial/tutorial0101.htm
   3. You may notice that if you don't have enough content to wrap around your image, the following content will also wrap around. To fix this problem, create a custom class called .clear and set it to clear: both. Add this class to the heading or paragraph that follows the float. Or alternately, set your <h3> to clear:both.
7. Creating thumbnails on the Projects sub-section pages: sample
   1. How to Float your Thumbnails
   2. Here is what the CSS looks like: (Feel free to remove/adjust the background color and margins/padding.) div.float {
float: left;
background-color: #999999;
margin: 4px;
padding: 5px;
width: 100px;
text-align: center;
} div.float p {
text-align: center;
line-height: normal;
background-color: #FFFFFF;
margin: 3px 5px 0px;
padding: 2px;
}

.clear {
clear: both;
}
   3. And the HTML: <div class="float">
<img src="image1.gif">
<p>caption 1</p>
</div> <div class="float">
<img src="image2.gif">
<p>caption 2</p>
</div> <div class="float">
<img src="image3.gif">
<p>caption 3</p>
</div><div class="float">
<img src="image4.gif">
<p>caption 4</p>
</div> <div class="clear">&nbsp;</div>

Finish the tutorials covered in class and add the skills learned to your projects section.

• Projects sample
• Sub-section sample

Start reseaching and thinking about an alternate graphic style for your site. We will be creating an alternate stylesheet (different look and feel) for the final project.