Week 04

Week 04 – Topics

Midterm project due
Midterm project critiques
Write a communication brief
Cascading Style Sheets (CSS)
CSS Box Model
Page Layout
2-column structure
3-column structure
Create a page with a CSS layout in Dreamweaver

Assignment 4
READ

Please read the following before Tuesday, May 17.

  1. Read ALL of the class notes for Week 04. (Yes, of course!)
  2. CSS Box Model
  3. 6 Keys To Understanding Modern CSS-Based Layouts
WATCH

Please watch the following videos before Tuesday, May 17.
The total viewing time of the 3 videos below is approximately 100 minutes. So plan your time accordingly. These are the same videos located in the body of the class notes.

  1. Introduction to CSS
  2. Introduction to CSS (Part 2)
  3. CSS-Based Layout: Two Column (Download: 128MB)
EXERCISE

Communication Brief

1. Using your Midterm website, write a Communication Brief for this project using the information and example on writing a communication brief detailed in the class notes. Be sure to go through the Communication Brief Worksheet to help you develop the content for this document.  Post the Communication Brief for your Midterm project to your WordPress blog.

Complete the CSS-Based Layout exercise

2. Using the exercise examples 1, 2 and 3 in the notes below, 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 as a zip file to the “Drop box” on smconline.org site by noon on Tuesday, May 24.

MIDTERM PROJECT DUE

The deadline for the midterm project  is noon, Friday, May 20. (This is changed from Tuesday, May 17)

The midterm project needs to be built using a CSS-based layout. Please review the class notes carefully. For those of you who are new to CSS-based layouts, it will take some additional time to practice building a two or three column structure. I suggest you use one of the your files from the Exercises 1-3 (with the 3 separate layouts) as the file you can start with.  The exercise files provide “starter” pages for a one column (basic layout), two column, and three column structures. Please be sure to make use of the resources found here:

Additional Resources
Dreamweaver CS5 intermediate – CSS Layouts

Please be sure to upload your midterm project to the class server by this deadline. See the ftp information on this site for directions on how to connect to the class server. Please be sure you know how to upload your “midterm_lastname” folder there before the final deadline. Please be sure that you name your web project folder “midterm_lastname.” And be sure you upload your entire folder and not just the individual html pages and images folder. Please review the FTP video demonstration to make sure you understand how to do this.

Specifications for the site:

  • Consider the business and communication objectives of the organization, and present the content in a manner that is consistent with these goals
  • Employ a design aesthetic appropriate for the organization
  • Introduce the organization on the home page
  • Direct traffic to key locations in the website from the home page
  • Contain a contact page that provides a contact form that users can email the organization through (this can be a graphic only… you do not need to build a functioning form for this project).
  • Follow basic usability principles to help the user identify their location and find their way around the site (page headings titled to match global navigation, current page identifier in navigation, redundant navigation at the bottom of pages, etc.)
  • Use CSS-based layout for the pages (no tables for layout)
  • Use one external stylesheet to style the entire site
  • Optimize your design for an 1024×768 display (remember this means the finished width should be 990 px and that “the fold” is 560 px but the height of the pages can and probably need to be longer.)
  • Discuss your alternatives with your instructor by posting your ideas to your blog

To review all the directions  for the midterm project, be sure to review the Midterm project page. If you have any questions about the midterm project, please be sure to let me know.

Preparing a Communication Brief

An effective way to make sure you understand what someone has said to you is to repeat it back to the person clearly and concisely. In addition to being the basis for understanding the overall tone, goals, and direction of a project, the Communication Brief (also called the Creative Brief) restates the client’s wishes by organizing the answers from a Client Survey. List the overall site goals in the Communication Brief. This will serve to align both the team and the client under the same terminology. With everyone talking the same language and working toward the same goals, the project has an excellent chance of staying on target.

Take thoughtful time when preparing the Communication Brief (Below is a generic sample) because you and your team will be referring to it throughout the project, but don’t sweat over it for weeks. It is a short and simple statement of site objectives, from overall goals to targeted audience to end-user perception. It should identify — among other things — style, audience, and message. In addition, the Communication Brief sets the project’s tone (how people should perceive the site and the company).

03fig07.jpg

(Click on image to enlarge) 

This sample communication brief has been abbreviated in its printed form here. Both Audience B and Audience C received as much of a description as Audience A. Your communication briefs should do the same for all your target audiences.

The Communication Brief should articulate visual and conceptual goals for the new site, both independent of and in comparison to the existing site. This document should be nonvisual — no sketches or layouts — and it should be short (only one to two pages) to ensure that it actually gets read. It can be as informal as an email or formal enough to be included in a bound report. No matter the form or format, it needs to be client approved. Get it signed.

Pull information you need from the answered Client Survey and from your various meetings thus far with the client. Use the Communication Brief Worksheet to get started. Further questioning may be necessary.

Example of Client Survey
Example of Communication Brief Worksheet

The Communication Brief Worksheet

Answering the questions on this worksheet will effectively build the skeleton for your Communication Brief. The information gathered in the Discovery process (Client Survey, research, interviews) will provide you with the answers.

Project Summary: State general project information, goals, and relevant background information for the site redesign. This paragraph should be a statement overview of the project as a whole.

  1. What is the basic overview of the project? Briefly include background information if relevant.
  2. What is the single purpose of the new site?
  3. What are the secondary goals of the new site?
  4. What are the long-term goals?

Audience Profile: Profile the target audience. Provide enough detail to enhance everyone’s understanding of who the audience is. Include some audience demographic information. Use these questions as a guide. Add some of your own.

  1. Who is your target audience? Choose a typical visitor and profile in detail. Include occupation, age range, gender, online frequency, online activities, and any other relevant information. Profile more than one if applicable.
  2. What is a typical task the visitor might perform on the new site? (For example, register, log on, search for information, buy a specific product, send their email address, call for more information.)
  3. What do these people care about? Why are they interested in the product the site will be offering? What trigger would prompt them to visit the site, and why would they be enticed to return?

Perception/Tone/Guidelines: How should your target audience respond to your new online presence?

  1. What does the target audience think and feel about the company and the current website?
  2. What do we want them to think and feel?
  3. How will this new website help achieve this goal?
  4. What adjectives can be used to describe the way the website and the company should be perceived by the target audience?
  5. What are some specific visual goals the site should convey?

Communication Strategy: How will we meet our measurable goals?

  1. What is the overall message you are trying to convey to your target audience? (For example, cost-effective, secure, reliable, efficient.)
  2. How will you convey the overall message? (For example, effective messaging through copy, directed path towards goal, specific offer on home page.)
  3. Identify stages of development (if appropriate) used to execute goals.
  4. How will you measure the success of the redesigned site?

Competitive Positioning: How you are different from your competition and the factors that will make you a success.

  1. How is your company or your web presence different from your competition?
  2. What specifically sets your company apart from your competition?
  3. What areas of the current site are successful and why?

Targeted Message: State a to-the-point word or concise phrase that will appropriately describe the site once it is launched.

This worksheet is available for download at www.web-redesign.com

Above content from the book  Web Redesign 2.0

CSS (Cascading Style Sheets) Basics

Often designers think they need to get better at Dreamweaver in order to improve their technical skills but what they really need to focus on is understanding CSS. Dreamweaver is only as smart as you are, it is only a tool. Much like Word does not write for you, Dreamweaver does not build a website for you. You must understand how to build a website in order to utilize Dreamweaver.

Improving your CSS skills is what will make you a better designer and improve your technical skills.

CSS– style definitions applied across a document or entire site.

What is CSS?

Cascading Style Sheets (CSS) are definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

Cascading Style Sheets (CSS) enable the web designer to create text styles with characteristics such as font, size, and color.

While HTML structures the document and tells browsers what a certain element’s function is (it is a link to another page? Is it a heading?), CSS gives the browser instructions on how to display a certain element—styling, spacing and positioning. If HTML is the struts and bricks that make up the structure of a house, CSS is the plaster and paint to decorate it.

This is done using a system of rules, the exact syntax of which you’ll learn more about below. These rules state what HTML elements should have styling added to them, and then within each rule list the properties (eg color, size, font, etc.) of those HTML elements they want to manipulate, and what values they want to change them to. For example, a CSS rule might state “I want to find every h2 element and color them all green”, or “I want to find every paragraph with a class name of author-name, color their backgrounds in red, make the text inside them twice the size of normal paragraph text, and add 10 pixels of spacing around each one.

CSS is not a programming language like JavaScript and it is not a markup language like HTML—actually there is nothing that can be compared to it. Technologies that defined interfaces before web development always mixed presentation and structure. This is not a clever thing to do in an environment that changes as often as the web, which is why CSS was invented.

Defining style rules

Let’s have a look at a CSS code example, and then dissect it:

selector {
  property1:value;
  property2:value;
  property3:value;
}

The pertinent parts are as follows:

  • The selector identifies the HTML elements that the rule will be applied to, identified by the actual element name, eg body, or by other means such as class attribute values—we’ll get on to these later.
  • The curly braces contain the property/value pairs, which are separated from each other by semi-colons; the properties are separated from their respective values by colons,
  • The properties define what you want to do to the element(s) you have selected. These come in wide varieties, which can affect element colour, background colour, position, margins, padding, font type, and many other things.
  • The values are the values that you want to change each property of the selected elements to. The values are dependent on the property, for example properties that affect colour can take hexadecimal colours, like #336699, RGB values like rgb(12,134,22) or colour names like red, green or blue. Properties that affect position, margins, width, height etc can be measured in pixels, ems, percentages, centimeters or other such units.

Now let’s look at a specific example:

p {
  margin:5px;
  font-family:arial;
  color:blue;
}

The HTML element this rule selects is p—every p in the HTML document(s) that use this CSS will have this rule applied to it, unless they have more specific rules also applied to them, in which case the more specific rule(s) will overwrite this rule. The properties affected by this rule are the margins around the paragraphs, the font of the text inside the paragraphs, and the colour of that text. The margins are set at 5 pixels, the font is set as Arial, and the colour of the text is set as blue.

We will come back to all of these specifics later—the main goal of this tutorial is to cover the basics of CSS and not the nitty-gritty details.

A whole set of these rules goes together to form a style sheet. This is the most basic syntax of CSS there is. There is more, but not much—probably the coolest thing about CSS is its simplicity.

CSS comments

One thing to know early on is how to comment in CSS. You add comments by enclosing them in /* and */. Comments can span several lines, and the browser will ignore these lines:

/* These are basic element selectors */
selector{
  property1:value;
  property2:value;
  property3:value;
}

You can add comments either between rules or inside the property block—for example in the following CSS the 2nd and 3rd properties are enclosed inside comment delimiters, so they will be ignored by the browser. This is useful when you are checking out what effect certain parts of your CSS are having on your web page; just comment them out, save your CSS, and reload the HTML.

selector{
  property1:value;
  /*
  property2:value;
  property3:value;
  */
}

Unlike other languages, CSS only has block level comments—single line comments do not exist. You can of course constrain the comment to a single line if you wish, but you still need to include the opening and closing comment delimeters /* and */).

Grouping selectors

You can also group different selectors. Say you want to apply the same style to h1 and p—you could write the following CSS:

h1 {color:red}

p {color:red}

This however is not ideal, as you repeat information that is the same. Therefore you can shorten the CSS by grouping the selectors together with a comma—the rules within the brackets are applied to both selectors:

h1, p {color:red}
Selectors

There are several different selectors, each matching a different part of the markup. The three most basic ones that you’ll encounter most often are as follows:

p { }: element selector (Redefines an HTML element)
matches all the elements of that name on the page (p elements, in the case above)
.example{ }: class selector (Apply to any HTML element)
matches all elements that have a class attribute with the value specified, so the above would match <p>, <li class=”example”> or <div>, or any other element with a class of example. Note that class selectors don’t test for any specific element name
#example{ }: id selector (Applies to only one HTML element)
matches all elements that have an id attribute with the value specified, so the above would match <p id=”example”>, <li id=”example”> or <div id=”example”>, or any other element with an id of example. Note that ID selectors don’t test for any element name, and you can only have one of each ID per HTML document—they are unique to each page.

Note: these different selectors are found in the Dreamweaver here:

Select FORMAT > CSS STYLES > NEW. You will see the dialog box below.

You can see the above selectors in action in the following examples. Notice that when you open the example in a browser the warning style gets applied to both the list item and the paragraph (if the bullet disappears it’s because you are setting a white text color on a white background).

You can join some selectors to define even more specific rules:

p.warning{}
matches all paragraphs with the class of warning
div#example{}
matches the element with the id attribute example, but only when it is a div
p.info, li.highlight{}
matches paragraphs with a class of info and list items with a class of highlight

In the following example I use these to differentiate between the different warning styles:

This information about CSS Basics is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

CSS Features

Cascading Style Sheets are style definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

  • Styles Sheets can redefine existing tags. For example, the <p> tag could be made to use the Trebuchet font with a 12 pixel height.
  • Style Sheets can define new styles which can be applied to any text selection.
  • The attributes of Style Sheets goes beyond the normal styling of HTML to include line height, leading, indent, background color or image for the styled selection, text weight, borders, and even page breaks for printing (but not all of these features are supported in all browsers).
Defining a CSS rule

Here is a style I’ve created. I’ve created a CSS rule (in this case, a class) and named it “coolstyle.

.coolstyle {
font-family: "Courier New", Courier, mono;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FF3300;
border: 1px dotted #000000;
background-color: #FFFF99;
}

One method for applying the style to text is by using a span tag:

<span>text to be be styled</span>

This is what it looks like in a browser:

Creating Styles in Dreamweaver

Select FORMAT > CSS STYLES > NEW. You will see the dialog box below:

Note: in the dialog box above that you are asked to select the type of selector. You can select either a class, an ID or a tag selector. Or you can create what Adobe calls a compound rule. We’ll discuss these selector types in more detail next week

  1. Type a name for the selector in the name field (or choose Comp0und if you are creating a link state.) Be sure to create useful names that are easy to remember and make sense. Don’t use names like style1. Remember no spaces in the names, only underscores.
  2. Be sure to select the radio button for “Define in (New Style Sheet File)” This is extremely important because this will create your external CSS file.
  3. Select OK
  4. The dialog box will ask you to name the CSS file and to save it to your folder. Be sure to add the extension .css to the end of the file name and save it in the folder with your HTML files.
  5. Select OK, and a dialog box will open with a series of formatting settings for TYPE, BACKGROUND, BOX, BORDER, etc. We will talk
    about all of these properties in more detail.
  6. Use the APPLY button to see how your style will look in your document (assuming the style is already applied somewhere)
  7. Select OK from the Styles dialog box.
Applying CSS

If you’ve modified a standard HTML tag with a new style, the style will automatically apply, and there is nothing to do beyond setting that tag in the normal way.

If you’ve created a new style, then:
Select the text you want to apply the style to and:

  • Click on the desired style in the Style drop down in the Properties window
  • OR, you can do this by using a right-clicking (pc) or control-click (mac) and selecting CSS STYLES>style

Note: CSS styles may not apply as expected. You should always check your code to see if the CSS tag has been applied properly. You should also preview in both Safari, Firefox, and Explorer to verify that the styleis formatting consistently on both platforms and multiple browsers.

Creating a hover state

Many websites now use links that display no underline, but when the user rolls over the link, the underline shows. This is achieved using the “hover” feature of CSS.

  1. Select FORMAT>CSS STYLES
  2. Select NEW
  3. Select USE CSS SELECTOR: Compound
  4. Select name from pull down menu > a:hover
  5. Select OK and then select text decoration>underline or whatever changes you want in the hover state.
Video Demonstrations

I have created instructional videos for you that you can view two different ways.
1) You can download the entire demonstration in one QuickTime movie file (53MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 4 videos from the YouTube site. I have posted the videos below.

Styling Text using CSS | Part 1

IFRAME Embed for Youtube

Styling Text using CSS | Part 2

IFRAME Embed for Youtube

Styling Text using CSS | Part 3

IFRAME Embed for Youtube

Styling Text using CSS | Part 4

IFRAME Embed for Youtube
Review: Understanding Style Sheets

http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs07-understanding-style-sheets/

Review: Creating and linking to a .css files

http://tv.adobe.com/watch/digital-design/creating-and-linking-to-a-css-file/

Introduction to CSS

http://tv.adobe.com/watch/digital-design/introduction-to-css/

Resource: CSS Cheat Sheet

http://lesliefranke.com/files/reference/csscheatsheet.html

How do I position my content on the page?

There are several ways to control positioning on your page:

  • With an understanding of the CSS box model, you can add padding and margins to help control the positioning of content on your page.
  • With an understanding of absolute and relative positioning, you can use these two properties to help control positioning.
  • Sometimes using a table can help provide a “container” for your content and can help control positioning.
CSS box model


Figure: Detail of the Box Model

The term “box model” is often used by people when talking about CSS-based layouts and design. Not everyone understands what is meant by this though, and not everyone understands why it is so important.

Any HTML element can be considered a box, and so the box model applies to all HTML (and XHTML) elements.

The box model is the specification that defines how a box and its attributes relate to each other. In its simplest form, the box model tells browsers that a box defined as having width 100 pixels and height 50 pixels should be drawn 100 pixels wide and 50 pixels tall.

There is more you can add to a box, though, like padding, margins, borders, etc.

As you can see, a box is made up of four distinct parts. The outside one, the margin, is completely invisible. It has no background color, and will not obstruct elements behind it. The margin is outside the second part, which is the border. The border outlines the visible portion of the element. Inside the border is the third part of the box, the padding, and then inside that the content area of the box. The padding defines the space between the content area of the box and the border.

(Note that in the image above, the only border of the three drawn that would actually be visible is the solid line – the dashed lines are added to help demonstrate the box model).

When you define a width and a height for your box using CSS, you are defining not the entire area taken up by the content, padding, border and margin. You are actually just defining the content area itself – the bit right in the middle. The padding, border and margin must be added to that in order to calculate the total space occupied by the box. (From this point on, we will use width for demonstrations, but the same principles apply to both width and height).

box {
 width: 200px;
 border: 10px solid #99c;
 padding: 20px;
 margin: 20px;
}

The above CSS, applied to a box, would mean that that box occupied 300 pixels of space horizontally on the page. The content of the box would occupy 200 pixels of that (dashed line added to demonstrate the edge of the area occupied by the box). Note: just to be clear, the name of the div can be anything, not only “box.”

In the above image, you can see that the pale blue area is 240 pixels wide (200 pixels of content plus 20 pixels padding either side). The border is 10 pixels wide either side, making the total width including the border 260 pixels. The margin is 20 pixels either side, making the total width of the box 300 pixels.

In practice, this can cause some confusion. For example, if I have a 100 pixel wide space available, and want to fill it with a pale red box with a dark red border and a small amount of padding, it would be very easy to write the CSS like so:

box {
 width: 100px;
 border: 1px solid #900;
 padding: 10px;
 margin: 0;
 background: #fee;
}

(A declaration of 0, as used for the margin above, does not require a unit to be added. Any value other than 0 does require a unit, e.g. px for pixels. Also, although “background” is defined as a shorthand property, it is more widely supported than the more correct “background-color”.)

However, that will not give us a 100 pixel wide box, as the width declaration defines the content area of the box. The content area of the box will be 100 pixels – the total width of the box as defined above will be 122 pixels:

In order to set the above box to only occupy 100 pixels horizontally, you would need to set the width of the content area to be 100 pixels minus the padding and minus the border, in this case 78 pixels, like so:

box {
 width: 78px;
 border: 1px solid #900;
 padding: 10px;
 margin: 0;
 background: #fee;
}

To calculate the overall width of a box, including all padding, borders and margins, you would use the following formula:

total box width = content area width + left padding + right padding + left border + right border + left margin + right margin

Above material about The Box Model from Added Bytes website. Content on the site is licensed under a Creative Commons License.

Reading Assignment : CSS Box Model
CSS Box Model

Introduction to CSS (Part 2)

http://tv.adobe.com/watch/digital-design/introduction-to-css-part-2/

More page layout
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 by creating 2-column and 3-column structures

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.

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

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” This is an example of a 2-column structure.

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

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.

CSS-Based Layouts

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.
Assignment 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;
}
Video Demonstration: Two-column div structure using Dreamweaver

I demonstrate how to build a 2-column structure in Dreamweaver, use a combination of absolute and relative positioning, and use compound selectors for styling a web page . You can download the entire demonstration in one m4v movie file you can play in QuickTime (128MB). (You can right-click to download to your desktop). The video is large and easy to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.

It’s a whopping 128 MB because it is 40 minutes, so you will need a fast connection speed to download.

Reading Assignment: CSS-Based Layouts

6 Keys To Understanding Modern CSS-Based Layouts

Additional Resources

Dreamweaver CS5 intermediate – CSS Layouts

Gallery of Column Structures

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

Create a page with a CSS layout in Dreamweaver

In the examples above, we didn’t use Dreamweaver to create the 2-column and 3-column layouts. Dreamweaver CS4 does have predesigned CSS layouts for you to use. Below are instructions on how to use the predesigned CSS layouts in Dreamweaver CS4.

1. Select File > New.
2. In the New Document dialog box, select the Blank Page category. (It’s the default selection.)
3. For Page Type, select the kind of page you want to create.

Note: You must select an HTML page type for the layout. For example, you can select HTML, ColdFusion®, PHP, and so on. You cannot create an ActionScript™, CSS, Library Item, JavaScript, XML, XSLT, or ColdFusion Component page with a CSS layout. Page types in the Other category of the New Document dialog box are also restricted from including CSS page layouts.

4. For Layout, select the CSS layout you want to use. You can choose from over 30 different layouts. The Preview window shows the layout and gives a brief description of the selected layout.

The predesigned CSS layouts provide the following types of columns:
Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor’s text settings.
Elastic Column width is specified in a unit of measurement (ems) relative to the size of the text. The design adapts if the site visitor changes the text settings, but does not change based on the size of the browser window.
Liquid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor makes the browser wider or narrower, but does not change based on the site visitor’s text settings.
Hybrid Columns are a combination of any of the previous three options. For example, the two-column hybrid, right sidebar layout has a main column that scales to the size of the browser, and an elastic column on the right that scales to the size of the site visitor’s text settings.

5. Select a document type from the DocType pop‑up menu.
6. Select a location for the layout’s CSS from the Layout CSS in pop‑up menu.
Add To Head: Adds CSS for the layout to the head of the page you’re creating.
Create New File: Adds CSS for the layout to a new external CSS stylesheet and attaches the new stylesheet to the page you’re creating.
Link To Existing File: Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. This option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a single file) across multiple documents.

7. Do one of the following:

  • If you selected Add to Head from the Layout CSS in pop‑up menu (the default option), click Create.
  • If you selected Create New File from the Layout CSS pop‑up menu, click Create, and then specify a name for the new external file in the Save Style Sheet File As dialog box.
  • If you selected Link to Existing File from the Layout CSS in pop‑up menu, add the external file to the Attach CSS file text box by clicking the Add Style Sheet icon, completing the Attach External Style Sheet dialog box, and clicking OK. When you’re finished, click Create in the New Document dialog box.

Note: When you select the Link to Existing File option, the file you specify must already have the rules for the CSS file contained within it.
When you put the layout CSS in a new file or link to an existing file, Dreamweaver automatically links the file to the HTML page you’re creating.
Note: Internet Explorer conditional comments (CCs), which help work around IE rendering issues, remain embedded in the head of the new CSS layout document, even if you select New External File or Existing External File as the location for your layout CSS.
(Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet.



Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66