COURSE CALENDAR | WEEK 10 CLASS OUTLINE | Homework
Topics Covered in Class:
- Review student projects
- Review nested lists from last class and problem questions from the Midterm Exam.
- Types of Navigation-- Horizontal Navigation, Vertical Navigation, Horizontal Global Navigation and Vertical Local Navigation, Tabbed Navigation, Drop-Down Navigation, Breadcrumb Navigation.
- Understanding the path structure when creating sub-navigation:
- Last week we created a separate folder in projects to hold the various project sections (photo.html, web.html)
- 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>
- Creating thumbnails:
- Open the original file in Photoshop
- Select the crop tool and set the width and height options to 60px wide by 60px 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%.
- Choose File > Save for Web
- 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.
- Save these to your projects/images folder with a proper
file name
- EXAMPLE: t_photo01.jpg
- Close your original file without saving.
- Adding images to your HTML page:
- http://www.htmldog.com/guides/htmlbeginner/images/
- Add a thumbnail image to your projects page representing each sub-section (web.html, photo.html) using the img tag.
- 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="60" height="60" alt="photo of tree " /></a>
- Floating an image on the Projects page: sample
- You will place the image inside a paragraph like this:
<p>
<img src="projects/images/t_photo.jpg" width="60" height="60" alt="photo of tree " />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> - Use this Tutorial to learn more about floating images: http://css.maxdesign.com.au/floatutorial/tutorial0101.htm
- 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.
- You will place the image inside a paragraph like this:
- Creating thumbnails on the Projects sub-section pages: sample
- How to Float your Thumbnails
- Here is what the CSS looks like:
div.float {
float: left;
background-color: #999999;
margin: 4px;
padding: 5px;
width: 95px;
text-align: center;
}div.float p {
text-align: center;
line-height: normal;
background-color: #FFFFFF;
margin: 3px 5px 0px;
padding: 2px;
}
div.spacer {
clear: both;
} - 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="spacer"> </div>
Finish the tutorials covered in class and add the skills learned to your projects section.