Prof. Jenna Spevack | Teaching Site

COURSE CALENDAR | WEEK 13 CLASS OUTLINE | HOMEWORK

Topics covered in class:

1. Defining your DESIGN METHOD for building a web site.
2. Creating a new look and feel for your website
   1. What are you trying to communicate?
   2. Principles of Web Design from WEEK FOUR
   3. Design Meltdown
   4. Where/What Visual Design
3. Types of Stylesheets
   1. Alternate Style Sheet / Same HTML:
      1. You can specify an alternate style sheet for an HTML document. For browsers that support it (such as Firefox 1.0+), the user is then able to easily toggle between the main style sheet and alternative one or use a styleswitcher.
      2. Alternate Stylesheet Example
      3. Alternate Stylesheet Example
      4. Example Styleswitcher
   2. Stylesheets defined by media
      1. Print
      2. Handheld
4. Browser Testing: BrowserCam

Lab:

1. Building a print style sheet
   1. Open index.html
   2. Create a new style sheet named print.css
   3. Create a style for body. Set the font and font size (use points) for printing.
   4. Define any styles that have a background image and set the background: none.
   5. Create a grouped style for #sidebar, #sidebar-content. Set the style to display: none.
   6. Define generic type styles for a:link, a:visited. Set text-decoration: underline.
   7. Add a style rule to the head of the resume.html, below your main css: <link type="text/css" rel="stylesheet" href="print.css" media="print" />
   8. Try printing (or print preview) your web page from the browser and see what happen
2. Build your alternate style sheet: Once you have created your new mockup/color scheme, start to build your alternate style sheet.
   1. Setting up
      1. Remove the current style sheet (main.css) from your projects.html and resume.html by selecting the style sheet in the CSS styles palette and clicking on the trash can icon. Or remove the link from the head of the document.
      2. Create a new style sheet called alt.css and apply it to projects.html and resume.html. We will use these two pages to test our new stylesheet.
      3. In your root directory, create a new folder called alt_images. Here you will place all the images associated with your alternate style sheet.
   2. Build your new stylesheet by first establishing the overall layout using the main divisions (wrapper, header, content, sidebar and footer). Test the layout to make sure it works in several browsers. Then work on the finer details, like typographic styles and background images. DO NOT MAKE A COPY OF MAIN.CSS AND ATTEMPT TO ALTER IT! START FROM SCRATCH!
   3. Add the * style and remove all the margins and padding.
   4. Use as few IDs and classes as possible. You should be able to style almost any element inside a container using descendant selectors.
      
      For example:
      
      #content {} /* styles the container */
      #content h2 {} /* styles any <h2> in the container */
      #content p {} /* styles any <p> in the container */
      #content ul {} /* styles any <ul> in the container */
      #content ul li {} /* styles any <li> in the container */
      #content a {} /* styles any <a> in the container */
      #content li a:link {} /* styles any <a> within an <li> in the container */
   5. Here is a good tutorial with a method for creating two-column fixed width layouts.
3. Adding comments to your HTML and CSS
   1. A comment is a string of code within HTML, XML, and CSS that is not viewed or acted upon by the browser. It is simply in the code to provide information about the code or other feedback from the code developers.
   2. Most programming languages have comments, they are used to:
      * Describe and explain complicated code.
      * Provide details about when the code was edited or reviewed.
      * Remove sections of the code, but leave them available for later use.
      * Chat with other developers working on the code.
   3. An HTML comment begins with "<!--", ends with "-->" and does not contain "--" or ">" anywhere in the comment. <!-- this is an HTML comment -->
<!-- and so is this one,
which occupies more than one line -->
   4. CSS comments can be inserted in a CSS file to explain your code. A CSS comment begins with "/*", and ends with "*/" and does not contain "/" or "*" anywhere in the comment. Comments are useful for organizing your css. Some people like to define sections for layout, typography, color, etc./* CSS comment here */
p
{
margin: 1em; /* CSS comment here */
padding: 2em;
background-color: blue;
}
/*
multi-line
CSS comment here
*/
4. Horizontal Lists
   1. If you'd like to implement horizontal lists you will need to have completed and tested your html and main stylesheet.
   2. In order to add a horizontal list to your website you will need to alter the code on every page in your site. This will not affect your original stylesheet. Add the following code to your existing navigation list:

      <ul id="navlist">
<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>

   3. On your projects pages add the following:<ul id="navlist">
<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>
<ul id="subnavlist">
<li><a href="projects/web.html">web design</a></li>
<li><a href="projects/graphic.html">graphic design</a></li>
<li><a href="projects/photo.html">photography</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
   4. If you want to add styles to indicate which links are active, add the following code on the appropriate pages.<ul id="navlist">
<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 id="active"><a href="projects.html">Projects</a>
<ul id="subnavlist">
<li><a href="projects/web.html">web design</a></li>
<li id="subactive"><a href="projects/graphic.html">graphic design</a></li>
<li><a href="projects/photo.html">photography</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
   5. Use the following tutorial to create your horizontal list. Add these styles to your new alt.css NOT MAIN.CSS. Remember that #navcontainer is our #sidebar-content. Preview your styles in the projects.html and the resume.html each time you add a new style rule. This will help you understand what each property and value is doing.
      
      http://css.maxdesign.com.au/listamatic2/horizontal05.htm

Continue to work on alt.css

There are only two classes left! You have all done an amazing job. Keep up the great work!

Next week is the last working class-- DO NOT MISS THIS CLASS!!

What is required on the last day of class for the CRITIQUE:

• Original and NEW mockup in Photoshop or Illustrator (if your mockup looks like this, you will not get credit. Your mockup should be a snapshot of what the final web page will look like)
• ALL sections of the site have been structured in XHTML and designed using CSS, using recommendations and standards followed in this course.
  1. resume.html
  2. bio.html
  3. projects.html (plus second and third level navigation to project sections)
  4. contact.php
  5. index.html
• Navigation is functioning on the global level.
• Local navigation is defined and functioning in Projects section.
• A second style sheet, named alt.css, with alternate color scheme and graphic style has been created, properly linked to index.html and uploaded to the FTP server. A folder with corresponding images has also be included.
• Site is uploaded to your folder on the FTP server. (Check to make sure the link from the Student Portfolio page is functioning!! This will tell you if you files are in the right place.)

If you miss the Final Critique, you will receive a failing grade on the Final Project.