Uncategorized

Class on Tuesday 12.10.13 [Starting Late]

My train is delayed today so I will be getting to class about 10-15min late (I hope it doesn’t get delayed further, but I will update this if it does). 

This week we are working on your projects. I’m going to spend the time in class letting you all work on your projects and helping you out. I will stick around after class in the hallway on the 10th floor for 20-30 minutes to help make up for time and help out anyone I didn’t get a chance to talk with during class.

Class on 11.19.13

Layout files from in class SampleLayouts_inClass.zip

This week we are going to take another look at CSS Layouts and then on Thursday do some of the prep requirements for the Final Project.

Final Project Overview

On Thursday we will go over some more details of the final but today we are going to look at the major requirements:

  • Pages: At least 4 pages
  • Content must be different than the midterm.
  • You must attribute all media used: text, images, audio, video. Even if you create that media yourself.
  • Must use at least one audio or video element. The element must have controls and not start playing automatically
  • The SAME header must be on each page. Same text in the heading, same html
  • The same navigation must be on each page. The navigation must be in a nav element and an unordered list in that.
  • The same footer must be on each page.
  • The layout on each page must be at least two columns. It can change slightly from page to page, but the header, nav and footer need to stay the same.
  • The homepage must be named index.html
  • You must use a reset.css stylesheet

On Thursday we will go over some of the documentation requirements like sitemaps, wireframes, proposals and the creative brief.

Layout

Download these files. We will go over them in detail in class.

SampleLayouts.zip

box-sizing: border-box

This is something that make it easier to calculate layouts. We’ll look at the files below and also the Layout examples for how it works.

border-box.zip

HTML5Shiv

https://code.google.com/p/html5shiv/
Older browsers don’t do HTML5. We will look at how we uses this in the Layout files to help it work.

Reset.css

For now it is easiest to just use Eric Meyer’s CSS Reset. Visit the link below and do a save as in your browser and save to your css folder.
http://meyerweb.com/eric/tools/css/reset/reset.css

Navigation

The first thing you need to do navigation is HTML. In this class, and in most sites on the web, we will use an unordered list (<ul>) to hold our navigation. Each <li> will have an <a> with a link to the proper page. We will also wrap all of that in the HTML 5 <nav> element. So all of your navs will basically look like this:

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="sites.html">My Sites</a></li>
        <li><a href="favorites.html">My Favorites</a></li>
    </ul>
</nav>

When you do other sites you will basically just change the text and the links in the href attribute.

Review: Block vs Inline and the Box Model

To understand how we are going to turn this list from a bunch of bullets into something that looks like navigation we need to review the box model and block vs inline.

Block vs Inline

The basic difference to remember is that

  • Block elements are like big blocks that put themselves on their own line and take up the full width of the containing element by default.
  • Inline elements just go with the flow and stack next to each other

Common block and inline elements:

Block Inline
h1..h6
p
ul
ol
li
div
nav
section
article
a
img
b
i
em
strong

You’ll notice that the list elements we want to use are block elements. So we have to figure out a way to get them to appear next to each other. The next part of this article deals with how to do that. It’s all CSS from here.

Navigation CSS

CSS is pretty powerful and one thing it can do is to change an element from block display to inline and vice versa. So we’re going to do that with our li.

We want to make sure it just effects the li elements in our navigation so we will use the nav as part of our selector:

nav li{
   display:inline;
}

This gives us basically what we want. But we need a bit more styling to remove the bullet points and space out the nav items from each other:

nav li{
   display: inline; /*moves list items next to each other*/
   list-style-type: none; /*removes the bullet points*/
   padding-right: 20px; /*spaces the nav items out so not too close to each other*/
}

And there you have a basic navigation. Usually you also want to remove the underline from the links and possible color them to match your design. Here is a simple rule that will do that:

nav li a, nav li a:visited{
    color: #fff;
    text-decoration: none;/* removes the underline */
}

The only complicated part there is we added a “nav li a:visited” selector. We did this because by default a visited link is styled with purple color. We want the links to stay the same whether or not they have been visited.

Additional styles

Sometimes it helps to show that it is navigation if you add some more styling. here are a couple of other things you can do:

This adds a hover style that adds an line under the nav item and changes the color. This way they can see it’s a nav when they hover over it

nav li a:hover{
    color:#ccc;
    border-bottom:1px solid #ccc;
}

This makes the nav look like a nav bar by giving a background color to the ul:

nav ul{
    background-color:#888;
    padding:10px; /*to give some breathing space around the text*/
}

Closing

Have fun and use your creativity to experiment with different color combinations, fonts, sizes etc. But remember that in the end it needs to look and function like navigation or your users will be confused.

There are other ways to style navigation. In the future I’ll show you some more advanced ways of creating a navigation. However the method above is simple and works well on all browsers and so we will learn that first.