COURSE CALENDAR | WEEK 11 CLASS OUTLINE | Homework

Topics Covered in Class:

  1. Projects page continued...
  2. Another way of setting up a larger portfolio: 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:

    4. <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 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;
      height: 1px;
      }
    • 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">&nbsp;</div>
  5. 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;
      }
  6. 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.

Homework | Week 11

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). Each section should include the following:

We will be creating a form for the contact page next week, so please make sure your projects area is complete.