web design: ad550

COURSE CALENDAR | WEEK 07 CLASS OUTLINE | Homework | QUIZ

Review student Portfolio sites in progress- students will take note of what is missing, what needs improvement and what is required for a passing midterm grade.

Topics Covered in Class:

A good tutorial for setting up a CSS layout.
An overview of CSS Positioning, Floats and review of the Box Model
LAYOUT: Adding divs to the HTML and corresponding id selectors to the CSS
- What is the div tag? DIV stands for Logical Division, or a generic block-level container with no predefined default style rules. Block boxes act as a containing block for any boxes within them.
- What does an id selector do? ID selectors must be called on in the html document using the id attribute. However, a specific id can only be used once in a document. Your style sheet will contain an id selector using an # sign like this:
  
  #content {
  width: 460px;
  }
- Your html will call on the id selector like this:
  
  <div id="content">
  <h2>Page Heading</h2>
  
  <p>Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content... Here is my content...</p>
  </div>
Change your resume page markup by adding the following divs. (example)
1. Wrap everything inside the body tags with <div id="wrapper>. Don't forget to close the div with </div>.
  
  <body>
  <div id="wrapper">
  
  <h1>Polly Waterford</h1>
  <h2>Resume</h2>
  
  ...
  
  <ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="bio.html">Biography</a></li>
  <li><a href="resume.html">Resume</a></li>
  <li><a href="projects.html">Projects</a></li>
  <li><a href="contact.html">Contact</a></li>
  </ul>
  
  </div>
  </body>
2. Wrap your <h1> tag with <div id="header">
  
  <div id="header">
  <h1>Polly Waterford</h1>
  </div>
3. Wrap your content with <div id="content"> starting with the <h2> and ending just before your profile links. Don't forget to close the div with </div>.
  
  <div id="content">
  <h2>Resume</h2>
  <h3>Objective / Summary</h3>
  <p>Graphic Designer with solid design and technical experience looking for a challenging position in the field of branding design.</p>
  
  ...
  
  </div>
4. Wrap your profile links using <div id="sidebar">
  
  <div id="sidebar">
  <ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="bio.html">Biography</a></li>
  <li><a href="resume.html">Resume</a></li>
  <li><a href="projects.html">Projects</a></li>
  <li><a href="contact.html">Contact</a></li>
  </ul>
  </div>
5. Lastly, move your copyright/email link to the bottom of the page, just below the sidebar. Wrap it with <div id="footer">
  
  <div id="footer">
  <p>© Polly Waterford 2004 | <a href="mailto:pwaterford@yahoo.com">pwaterford@yahoo.com</a></p>
  </div>
Add the following to your main stylesheet. Please note: these measurements can be adjusted to your layout.
1. Use the CSS Selector button to add these id selectors to your style sheet: #wrapper, #header, #content, #sidebar and #footer
2. For #wrapper: set box width to 767px, top / bottom margins to 0 and right / left margins to auto.
3. For #header: set the background image to your header.gif and no repeat. Set box height to 126px. (Remove the background image and height from h1)
4. For #content: set box width to 517px and float to left
5. For #sidebar: set box width to 250px and float to right
6. For #footer: set box height to 45px and clear to both.
Adding margins and padding (avoiding the IE box model hack)
1. In order to avoid alignment problems in various browsers it helps to set your padding and/or margins in separate nested divs. Add the following to your code and style sheet to give breathing room around the content and sidebar text.
2. Nest <div id="main-content"> inside <div id="content">
  
  <div id="content">
  <div id="main-content">
  <h2>Resume</h2>
  
  ...
  
  </div>
  </div>
3. Add #main-content to your stylesheet and set margins to 20px.
4. Nest <div id="sidebar-content"> inside <div id="sidebar">
  
  <div id="sidebar">
  <div id="sidebar-content">
  <ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="bio.html">Biography</a></li>
  <li><a href="resume.html">Resume</a></li>
  <li><a href="projects.html">Projects</a></li>
  <li><a href="contact.html">Contact</a></li>
  </ul>
  
  ...
  
  </div>
  </div>
5. Add #sidebar-content to your stylesheet and set margins to 20px.
Some EXTRAS:
1. Last week we set the background image for the h1. Since we now have a header div, remove the background image and height from h1, but keep the font-size set to 1px. (Headings as Images)
2. To remove your bullets from the navigation list in the sidebar create a selector named #sidebar-content ul. Set list to list-style: none.
3. To get the sidebar's background color to extend all the way down the page, create a vertically titled background image and apply it to your wrapper. (see here)
4. Body background-- Choose or create a subtle pattern for the body background-image. You may also create a vertical tile to indicate the edges of the container. See this example.
  - Gradient tiles with shadow
  - Shady Background
Update the other pages in your site.

Using your completed resume.html as a template, update your index.html, bio.html, projects.html and contact.html with the necessary div containers.

Homework| Week 7

Midterm Project is DUE Next Class!!!

Your portfolio site should include the following:

Functioning links from your index.html to resume.html, bio.html, contact.html, projects.html and back again.
- The content should include, at very least, your introduction, resume and biography. However, every page in your site must contain your nameplate, page heading, copyright footer and navigation. You may also include copy on the contact.html and projects.html for extra credit.
A unique graphic style and appropriate color scheme that reflects your professional identity. Use background images such as a logo and/or photographic banner for your header, custom bullets for your lists and a tiling body background-image. You may also create additional background images for your wrapper and/or content and sidebar.
A main style sheet applied to every page containing:
- Redefined HTML tags: body, h1, h2, h3, h4, p, ul, li
- CSS Selectors for: a:link, a:visited, a:hover, a:active
- ids: #wrapper, #header, #content, #main-content, #sidebar, #sidebar-content and #footer
- You may include additional styles where necessary.
Your site will be graded on lean, efficient structure (HTML), appropriate and unique presentation (CSS), functioning navigation, as well as, proper grammar, spelling and professional content.
Your site must be loaded and functioning on the FTP server in order to receive a passing grade.

Make at lease one BACKUP of your work on CD!!

Late projects will not be accepted. Your site should be finished and uploaded to the FTP server. You will not have time in class to upload your files. UPLOAD BEFORE YOU COME TO CLASS (instructions).

The Rubric that will be used to grade your project has been defined. Please read it before turning in your project.