Prof. Jenna Spevack | Teaching Site

COURSE CALENDAR | WEEK 11 CLASS OUTLINE | Homework

Topics Covered in Class:

1. Projects page continued...
2. Another ways of setting up a portfolio:
   1. http://dhtmlsite.com/imagegalleries.php
   2. http://www.cameronolthuis.com/2006/04/top-10-css-tutorials/
   3. http://www.huddletogether.com/projects/lightbox2/
   4. http://www.glance.ca/
3. Understanding the path structure when creating sub-navigation
   • Last week we created a separate projects folder to hold the various project sections.
   • 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>
   • Links from a section page back to the project.html or any main navigation link should look like this: <a href="../projects.html">Projects</a>
   • Links from a section page to another section page should look like this: <a href="design.html">Graphic Design</a>
4. Creating the portfolio pages: sample
   • HTML code: <div class="container"> <img src="images/tomatos.jpg" width="300" height="225" alt="photo tomato" /> <p>Image description</p>

<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul> <div class="spacer">&nbsp;</div> </div>
   • CSS for the container class: .container {
text-align: center;
padding: 0px 10px;
border: 1px dashed #999999;
}
5. Set up your linear navigation (back and next) with this tutorial.
   • CSS CODE for linear navigation: ul#navigation {
list-style-type: none;
margin: 0;
padding: .5em 0;
border-top: 1px solid #666;
} ul#navigation li a {
display: block;
width: 5em;
color: #FFF;
background-color: #036;
padding: .2em 0;
text-align: center;
text-decoration: none;
} ul#navigation li a:hover {
color: #FFF;
background-color: #69C;
} ul#navigation.left { float: left; } ul#navigation.right { float: right; }
   • More on Horizontal Lists here.

1. Finish the tutorials covered in class and add the skills learned to all of your projects sections. Complete each of the three sections in your projects (ex: drawing, graphic design, photo). You can add additional sections and sample images if you like.
   1. Projects Page
   2. Sub-section pages: at least 3 sections
   3. Detail pages: at least 4 images per section
2. In Photoshop or Illustrator design an alternate color scheme, graphic style and layout for your portfolio site. If you are interested in creating horizontal navigation, please contact me ASAP so I can give you some guidance.