ID01: Interaction Design & Development 01

Icon

Thom Meredith

Week 02

Week 02 – Topics

Best of the Web: Student Selections

Visual Design: Layout and the Grid

Technical lab: Div structure & CSS

Assignments

1) Lab assignment: Using TextEdit, create the HTML for the following layouts:

  • Exercise 1: Basic layout
  • Exercise 2: 2-column layout
  • Exercise 3: 3-column layout

I would like you to add content to these pages using the 20 HTML tags we’ve covered so far. Please put your exercises in a folder named “week_01″ inside a folder with your name as follows: “lastname_firstname.” Post the folder with your name including your exercises to the class server. Remember, information on how to post your work to the class server is on the FTP page of this website.

For your folder called “web_kit.” place the following 3 folders into it:  “basic” — a HTML file and CSS file for a basic layout, “2col” — 2-column structure, and “3col” — 3-column structure. There should be one HTML file and one CSS file for each different layout.

2) Website re-design: Based on our discussion from the “Best of the Web,” re-design the home page of any of the websites we discussed from the “Best of the Web” page. Your design must be in the layout of either a 2-column or 3-column structure. Please post the process you went through, why you made the design choices you did for this project and post to your process blog. Please build your design comp in Photoshop following the specifications below:

  • Your file should be RGB and set at 72 dpi
  • The dimensions of your file should be 990 pixels wide (and remember “the fold” is 560 pixels high).
  • Be sure to put your elements on separate layers and to properly label your layers.

3) Project due before next week: Visiting the websites given in the “Blogs” section of the Resources page of this site, find 3 articles that discuss the Grid and/or layout for the Web. Post a link to these articles on your class blog and include a 5-6 sentence summary of the article. What does the article detail, how is it helpful to your understanding of the Web, and what did you learn by reading it? Also, find 3 websites you feel are designed well and follow either a 2-column or 3-column structure and also post to your blog.

4) Reading for next week: Stylin’ with CSS: Chapter 5: “Basic Page Layout” (pg 134-164)

Review

Please review the following materials. You will have a short quiz next week regarding the following topics:

What we’ve learned so far:

  • How to set up a file structure for a website project
  • How to create a simple HTML page in TextEdit
  • 20 common HTML tags
  • How to post to the server using FTP
  • How to set up a WordPress website

What should be in your “web_kit” folder:

  • PDF of the HTML Cheat Sheet
  • PDF of CSS Cheat Sheet
  • HTML file of the basic XHTML structure.

Best of the Web: Student Selections

Web Critiques

Best of the Web

  1. Who is the target audience for this site?
  2. Is there a grid system for this design? Does it follow a 2-column or 3-column structure? Does it break the grid?
  3. How is the site built? Is it built using Flash? Is it built using PHP? Is it integrated with a Content Management System (CMS)? How does this affect the design of the site?
  4. How has the designer(s) used the design elements and principles of contrast, repetition, alignment, proximity, color, unity and balance?
  5. What is the intended style of the design, and is it appropriate for the target audience?
  6. What is the intention of the style, and does it achieve the desired effect?
  7. What known usability / design / business issues is this site trying to solve?
  8. Are there standard brand elements that should be used, and are they used appropriately?
  9. Where in the design are the most likely places for users to have trouble? and why?
  10. Are there reasonable design changes that might avoid these problems?

http://www.scottberkun.com/essays/23-how-to-run-a-design-critique/

Visual Design for Web

Dimensions

Your pages will be displayed on screens with a variety of screen resolutions – from 800 horizontal x 600 vertical pixels to 1024 x 768 and beyond. As a designer, you need to be sure your pages will look OK when displayed in the different circumstances your target audience will encounter. Don’t assume that everyone has the same monitor setup that you have!

The situation is more complicated than simply screen resolution:

  • Internet Explorer and Safari have different amounts of space available for pages
  • Macs and PCs have different amounts of space available for pages
  • The user can adjust their browser to make more or less room available (e.g. showing or hiding different control bars)
  • If your page needs a vertical or horizontal scroll bar, that scroll bar takes up extra space (12-15 pixels)

Based on all the variations, I’ve created a guide for designing pages for the three major screen resolutions, 640×480, 800×600, and 1024×768. Designing with these recommendations will ensure that all your page content within the pixel dimensions will be visible in the worst case situations. My recommendations are only guides, and you should adjust your designs based on your project’s requirements. You don’t have to design exactly for these dimensions. In particular:

  • In the vertical direction, you can have additional information beyond the specification, just keep in mind that your audience may have to scroll to see it. Consider the information within the first 560 pixels (for 1024 x 768 displays) to be “above the fold”. In newspaper terminology, copy that’s “above the fold” is visible in the top half of the paper, and includes the most important articles and headlines.
  • In the horizontal direction, you don’t have to fill the space to the limits of the recommendation. Just because you can design to 990 pixels wide for an 1024 x 768 screen, doesn’t mean you should design that wide

The size recommendations below are smaller than the actual screen size is because there is space taken up on the screen by menus, scroll bars, buttons, and other interface elements not on the web page.

  • Recommended maximum page dimensions for 640×480 screen: 610×280 (sample page)
  • Recommended maximum page dimensions for 800×600 screen: 770×400 (sample page)
  • Recommended maximum page dimensions for 1024×768 screen: 990×560 (sample page)
  • Recommended maximum page dimensions for above 1024×768 screen: 1020×750

Resolution sample sizes: http://pixelloom.com/resources/sizes/

Browser Display Statistics: http://www.w3schools.com/browsers/browsers_display.asp

Grid systems in Web Design

Grid design is a fundamental skill of any designer. Understanding proportional relationships, white space and composition are all vital in constructing a grid for any delivery platform – web, print & real 3d environments. – Mark Boulton

Five Simple Steps to designing grid systems

  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid

A whole load of considerations

Designing grid systems for print is considerably more straight forward than designing grid systems for the web. First off, in print, the designer has a fixed media size – the paper size (or packaging, poster, whatever). Let’s say a print designer has designed a magazine. The reader of this magazine can’t suddenly increase the font size if they find it difficult to read – well they just move it closer to their eyes I guess. This is just one consideration, there are more but I’m sure you get the point.

So, that’s media size. On the web you have other considerations such as the browser, the OS platform, the screen size and the actual devices that web sites can be viewed on, from PDA’s and Mobile’s to assistive technologies such as screen readers. How do you design a grid for all of this? It’s a really good question and I’m not claiming I have the answer.

. . .

Good designers for the web know that the users who use their sites may want different, and know, with the web, they have the power to change things. The designer has lost, to a degree, the ability to control. For a lot of designers (including me), this has been a tough transition. We’re taught for years to create the delicate balances of white space, the manicured typography and delicate colour palettes, all designed to create harmonious designs which do their job very well.

Then some short sighted user comes along and increases the text size… and… and… totally breaks your design.

I think you get the idea. We can’t be upset when the user wants to change something like the text size. What we can do is design grid systems to adapt to those changes. – Mark Boulton

Grid systems can be constructed from ratios.

Simple ratios such as 1:3, or 2:1 are called rational ratios.

More complex ratios, such as those based on the Golden Section (1: 1.618) , are called irrational ratios.

Fixed layout

A fixed grid for designing for the web is as close a translation from traditional grid design as there is. The designer is using fixed measurements, pixels mostly, to construct the grid and to position elements within the grid structure and a canvas which is based on a fixed size. See, everything is fixed.

Example of the “Rule of Thirds”

Fluid layout

In order for a grid to be flexible (adaptive), we have to use scalable units of measurement such as 100% or Ems. Just a reminder: An Em (pronounced ‘m’ NOT ‘e, m’) is a typographic measurement equal to the point size of the typeface you are using. We also use percentages.

To give us our column width, convert the ratio’s to percentages, which gives us 61.8% for the main column and 38.2% for the right column.

Adaptive Grid System based on the Golden Section

Example of the “Golden Section”

Web Page Layout Grid

Layout Grid
Layout Grid

Photoshop file: Grid Layout

Good Grid system resource: http://tutorialblog.org/grid-systems-in-web-design

Page Layout

The short history

Over the years, web page layout has evolved from the early years of table-based layouts to the current practice of CSS-based layouts. You may still encounter web pages built using a table-based structure. (Craigslist is an example). In the nineties, and even in the early 2000s, many browsers did not support CSS-based layout because they did not offer full support for CSS.

“Although the CSS1 specification was completed in 1996 and Microsoft’s Internet Explorer 3 was released in that year featuring some limited support for CSS, it would be more than three years before any web browser achieved near-full implementation of the specification. Internet Explorer 5.0 for the Macintosh, shipped in March 2000, was the first browser to have full (better than 99 percent) CSS1 support. Other browsers followed soon afterwards, and many of them additionally implemented parts of CSS2.

Even though early browsers such as Internet Explorer 3 and 4, and Netscape 4.x had support for CSS, it was typically incomplete and afflicted with serious bugs. This was a serious obstacle for the adoption of CSS.” Wikipedia

Since the late 1990s when Cascading Style Sheets were beginning to work in most browsers, web authors have been encouraged to avoid what’s called the use of “presentational HTML markup” with a move towards the separation of presentation and content.

What is “presentational HTML markup” and what does the “separation of presentation and content” mean?

Presentational HTML markup basically means defining all your positioning and styling within the HTML page itself. A web page built with a table-based structure is an example of presentational HTML markup. Also, defining your styles “inline” — meaning, defining the styles within the HTML. For example, below is an inline HTML definition:

<font face="Arial" size="7">Welcome To My Homepage</font>

The big problem with presentational HTML markup is that making changes to the presentation (positioning and/or styling) of the content requires changing each and every web page within the site. In the example above, if I want to change the font face from “Arial” to “Times,” I need to change the code on each and every page of the site.

Can you imagine the time required to make this one change if the site is 100+ pages?

The separation of presentation and content solves the problems of presentational HTML markup. When I create my page layout, I can create an HTML pages containing all the CONTENT for my pages and I can create a separate CSS file containing all the PRESENTATION for my pages. Instead of defining my styles inline, I can use CSS to create my styles. Below is an example of a snippet of code for the content in the HTML:

<div id="header">Welcome To My Homepage</div>

And, if I defined the <div> tag in a separate CSS file as follows:

#header {
font-family:"Arial";
}

I will appreciate the advantage of separating my presentation from my content when I need to make a change. Using the example from above, I can change “Arial” to “Times” in the external CSS file and it will change the font-face defined in the div named “header” throughout the entire site. If I have an 100 page site, I don’t need to change each and every page! — I can change the definition of the font-face property in the CSS file for the site and because the CSS file is linked to each and every page (we’ll talk in more detail about this later), the font-face is changed throughout the site.

This is the power of separating presentation from content.

Further exploration: If you want to see examples of designers who have created completely different designs using the same content, see the CSS Zen Garden website. Every page on this site uses the same content — the same HTML code. These completely different designs are created entirely by the designer’s creation of an unique CSS file.

Moving from table-based layouts to CSS-based layouts

So if you want to try to limit the use of tables for the layout of your pages, how does a designer create a CSS-based layout?

In this class we’re going to discuss a few different ways to create page layouts:

1. Absolutely positioned content (Adobe calls this an AP element and we will use this when we talk about Rapid Prototyping)

2. Creating 2-column and 3-column structures

Adding external CSS file

Basic XHTML example with CSS

<html>
<head>
   <title>Basic HTML Example</title>
   <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
   incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
   exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
   dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
   mollit anim id est laborum</p>
</body>
</html>

CSS example

The code below is a good example of basic CSS properties.

body {
background-color: #000000;
}

p {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#ffffff;
line-height:30px;
padding-left: 200px;
}

More page layout

Moving from table-based layouts to CSS-based layouts

2-column and 3-column structures

The reason 2-column and 3-column structures are commonly used as the basis for the construction of web pages is because websites are normally designed based on a grid system.

So, without getting side tracked about the use of the grid and grid systems in web design, this is a basic explanation of why if you understand how to build 2-column and 3-column structures, you can build nearly any website design.

Let’s look at an example of a basic HTML page with CSS.

Basic HTML example with CSS

<html>
<head>
   <title>Basic HTML Example</title>
   <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
   incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
   exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
   dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
   mollit anim id est laborum</p>
</body>
</html>

CSS example

The code below is a good example of basic CSS properties.

body {
background-color: #000000;
}

p {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#ffffff;
line-height:30px;
padding-left: 200px;
}

Note that the example above uses the basic structure used for every web page.

<html>
<head>
   <title></title>
</head>

<body>

</body>

</html>

To create 2-column layouts, we need to add more structure to our HTML

Basic <div> structure for 2 column layout

<html>
<head>
   <title></title>
</head>

<body>

  <div id="wrapper">

    <div id="header"></div>

    <div id="navigation"></div>

    <div id="content"></div>

    <div id="footer"></div>

  </div>
</body>

</html>

2-column layout details

I’ve added 5 divs to the structure above.

<div id=”wrapper”></div>

This div is sometimes called “wrapper,” sometimes called “container.” It doesn’t matter what name you choose but notice that the other 4 divs live inside this <div>. This is very important to understand, make sure your closing <div> tag for your wrapper is at the end but before the closing <body> tag.

<div id=”header”></div>

This <div> creates a header area running across the top of the page.

<div id=”navigation”></div>

This <div> creates a left-side area running down the left-side of the page. Sometimes this is called”left-side” instead of “navigation.”

<div id=”content”></div>

This <div> creates a main area for content usually on the right-hand side.

<div id=”footer”></div>

This <div> creates a footer area.

Important concepts to understand about this structure:

  1. It’s good to memorize this basic div structure. You will use it over and over.
  2. It doesn’t matter what you name the <divs> but give them meaningful names so you can distinguish one div from the other.
  3. The structure above can be modified for almost any 2-column structure.
  4. Later, we’ll modify this structure to build a 3-column layout.

Technical Exercises

Below is code for one HTML page and code for two different CSS files. One CSS file (example 1) will create the layout for a basic div structure, and the other (example 2) will create a 2-column layout. Please experiment with both CSS files and note how the second CSS file creates a 2-column structure for your web page. See the end of the class notes for more information about your assignment.

The code below is a good template to use as the beginning structure for a web page.

(Information about HTML Document Type is here: http://www.w3.org/TR/REC-html40/struct/global.html#h-7.2)

Exercise 1 & 2 HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>2-column web page</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>

<div id="wrapper">

 <div id="header">
      <h1>This is the header</h1>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
       tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
 </div>

 <div id="navigation">
      <h1>This is the navigation </h1>
 </div>

 <div id="content">
      <h1>This is the content</h1>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
       tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
       tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
       quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
</div>

<div id="footer">
     <h1>This is the footer</h1>
</div>

</div>

</body>

</html>

Below is code for two different CSS files.

Example 1: CSS for basic div structure

I use ems to define my font sizes. We will talk about this more next week.

body { font-size: 62.5%; /* 1em = 16px therefore 16px × 62.5% = 10px */ }

h1 { font-size: 2em; /* 10px × 2em = 20px */ }

p { font-size: 1.2em; /* 10px × 1.2em = 12px */ }

The code below is a good example of basic CSS properties for the <div> tags of a basic web page.

body { font-size: 62.5%;
}

#wrapper {
width:990px;
margin-left:auto;
margin-right:auto;
}

#header {
 height: 150px;
 background-color: #666;
}

#navigation {
 height: 150px;
 background-color: #999;}

#content  {
 height: 260px;
 background-color: #CCC;
}

#footer {
 height: 50px;
 background-color: #666;
}

h1 {
 font-family:Verdana, Geneva, sans-serif;
 font-size:1.6em;
 font-weight:bold;
 letter-spacing:1px;
 padding-left: 20px;
}

p {
 font-family:Arial, Helvetica, sans-serif;
 font-size:1.2em;
 line-height:1.7em;
 padding-left: 20px;
}

Example 2: CSS for 2-column structure

body { font-size: 62.5%; /* 1em = 16px therefore 16px × 62.5% = 10px */ }

h1 { font-size: 2em; /* 10px × 2em = 20px */ }

p { font-size: 1.2em; /* 10px × 1.2em = 12px */ }

The code below is a good example of basic CSS properties for the <div> tags of a 2-column web page.

body { font-size: 62.5%;
}

#wrapper {
width:990px;
margin-left:auto;
margin-right:auto;
}

#header {
 height: 150px;
 background-color: #666;
}

#navigation {
 width:22%;
 float:left;
 background-color: #999;
}

#content  {
 width:78%;
 float:left;
 top:0px;
 background-color: #CCC;
}

#footer {
 clear:both;
 background-color: #666;
}

h1 {
 font-family:Verdana, Geneva, sans-serif;
 font-size:1.6em;
 font-weight:bold;
 letter-spacing:1px;
 padding-left: 20px;
}

p {
 font-family:Arial, Helvetica, sans-serif;
 font-size:1.2em;
 line-height:1.7em;
 padding-left: 20px;
}

3-column layout

Basic <div> structure for 3-column layout

To create 3-column layouts, we need to add even more structure to our HTML file.

<html>
<head>
   <title></title>
</head>

<body>

  <div id="wrapper">

    <div id="header"></div>

          <div id="threecolwrap"><!--encloses the three columns-->

               <div id="twocolwrap"><!-- encloses the left and center columns-->

               <div id="navigation"></div>

               <div id="content"></div>

               </div><!--end of twocolwrap-->

         <div id="right_side"></div>

         </div><!--end of threecolwrap div-->

    <div id="footer"></div>

  </div>
</body>

</html>

3-column layout details

Note: I’ve added 3 new divs to the structure:

<div id=”threecolwrap”></div>

Again, It doesn’t matter which name you choose but notice that all the column related divs (in this case, “twocolwrap,” “navigation,” “content” and “right_side” live inside this <div>. This is very important to understand, make sure your closing <div> tag for this div is at the end of the three columns but before the <div> tag for the footer.

<div id=”twocolwrap”></div>

This <div> creates a wrapper for the two columns. Notice that the “navigation” and “content” divs live inside of this div.

<div id=”right_side”></div>

This <div> creates a rught-side area (this is the 3rd column) running down the right-side of the page. Notice this div lives outside the “twocolwrap” div but within the “threecolwrap.”

Exercise 3: HTML code for 3-column layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>3-column web page</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>

<div id="wrapper">

 <div id="header">
 <h1>This is the header</h1>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
 </div>

<div id="threecolwrap">
<!--encloses the three columns-->

<div id="twocolwrap">
 <!-- encloses the left and center columns-->

 <div id="navigation">
 <h1>This is the navigation </h1>
 </div>

 <div id="content">
 <h1>This is the content</h1>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
 </div>

</div>
 <!--end of twocolwrap-->

 <div id="right_side">
 <h1>This is the right side content</h1>
</div>

</div>
<!--end of threecolwrap div-->

<div id="footer">

<h1>This is the footer</h1>
</div>

</div>
</body>
</html>

Exercise 3: CSS for 3-column layout

body { font-size: 62.5%; /* 1em = 16px therefore 16px × 62.5% = 10px */ }

h1 { font-size: 2em; /* 10px × 2em = 20px */ }

p { font-size: 1.2em; /* 10px × 1.2em = 12px */ }

The code below is a good example of basic CSS properties for the <div> tags of a 3-column web page.

body {
 font-size: 62.5%;
 margin-top:25px;
}

* {margin:0; padding:0;} /* this tag is added globally*/

#wrapper {
 min-width:760px; max-width:990px;
 margin-left:auto;
 margin-right:auto;
}

#header {
 width:auto;
 height: 150px;
 background-color: #666;
}

#threecolwrap {
 float:left;
 width:100%;
 background-color: #ffffcc;
 }

#twocolwrap {
 float:left;
 width:100%;
 display:inline; /* stops IE doubling  margin on float*/
 margin-right:-170px; /* CWS - neg margin move */
 }

#navigation {
 width:150px;
 float:left;
 background-color: #999;
 display:inline; /* stops IE doubling margin on float*/
}

#content  {
 width:auto;
 top:0px;
 margin-left:150px;
 margin-right:170px;
 height:1%;
 background-color: #CCC;
}

#right_side{
 float:left;
 width:170px;
 display:inline; /* stops IE doubling  margin on float*/
 background-color: #999;
 }

#footer {
 clear:both;
 width:100%;
 background-color: #666;
}

h1 {
 font-family:Verdana, Geneva, sans-serif;
 font-size:1.6em;
 font-weight:bold;
 letter-spacing:1px;
 padding-left: 20px;
}

p {
 font-family:Arial, Helvetica, sans-serif;
 font-size:1.2em;
 line-height:1.7em;
 padding-left: 20px;
}

Assignment

Basic layout, 2-column and 3-column layouts

Using the exercise examples 1, 2 and 3 in the notes above, create 3 separate web layouts– all with their own separate file structures. Therefore, each example will have it’s own folder and will contain (1) html file and (1) CSS file. You can create the files in the code view in Dreamweaver.

  • Exercise 1: Basic layout
  • Exercise 2: 2-column layout
  • Exercise 3: 3-column layout

Modify the CSS in some way and experiment to understand what happens to the layout when you add modify and add additional CSS properties.

Upload your web files to the class server.

Gallery of Column Structures

2-column structure: http://www.everythingaboutweb.com/classes/examples/2-column/

2-column faux structure: http://www.everythingaboutweb.com/classes/examples/2-column_faux/

3-column structure: http://www.everythingaboutweb.com/classes/examples/3-column/

Category: Classes

Tagged:

Comments are closed.