Week 08

Week 08

Topics: Building website prototype: more XHTML markup, CSS, in-class studio time
Studio Demonstration: AP divs, Tables and CSS

Midterm Project (Due Week 09: November 4)

Specifications: Design a prototype website home page and first-level page for a client** of your choice. Create a sitemap for the complete website and be prepared to present the sitemap for your presentation. Focus on implementing the thought process we studied in class and creating an interesting navigational interface that allows the user to navigate the site in multiple ways . Use HTML and an external CSS file to build the prototype for your home page and first-level page of your site. Post your thoughts and decision-making process for this project on your WP blog.

** The client should be a real or fictitious company that is nation-wide and provides product(s) and/or service(s) to the general public. You should avoid picking small, local companies that do not have interest to a large public audience. You should also think about what kind of interactivity could eventually be added to the site. In what ways would the public need/want to communicate or interact with the company?

For example, a national grocer may want to provide ways for the public to order food, be notified of sale items, etc. See this New York Times article about making grocery shopping faster, more reliable, more convenient and more individualized through the online experience. This article illustrates ways in which the public could interact with grocers. The articles references the site mywebgrocer.com. Another good article about mobile interactivity is Retailers Are Learning to Love Smartphones.

Think about how you could apply these types of online interactions for the products and/or services provided by the company you choose as your client.

Deliverables:

  1. Sitemap for entire site
  2. Home page
  3. First-level page for one of the sections. (Commonly referred to as the “landing page.”)
  4. Posting your thoughts and decision-making process for this project on your WP blog.

You need to upload your midterm project to the class server in order to present your project to the class. Please do this BEFORE class on Wednesday, November 4.

I also want you to use the knowledge and skills we’ve covered in class — and hopefully you’ve supplemented on your own — to build a prototype of the site. I do not expect the site to be built perfectly — your technical skills will improve over time. But I do expect you to use the knowledge you’ve acquired to construct a functioning site that lives on a server environment.

In addition to the design and technical production of a prototype website, you are also responsible for documenting your entire process on your WP Blog.

Design Process

The Design Process I’d like you to follow can be found in the section above, “Process Blogs.” On the Process Blog page, I will provide more details about each of the ten steps. For the Midterm Project, I expect you to cover processes #1 — #6 on your WP blog.

1. Defining Project & Audience
2. Sketching
3. Information Design
4. Interface Design
5. Visual Design
6. Prototyping: Wireframes –> HTML
7. Usability Testing
8. Iteration
9. Repeat
10. Final Version

Resources

Possible sources for images other than Corbis:

Do I need to hand code the layout structure for the website?

Feel free to use Dreamweaver.

Dreamweaver HTML layouts
Create a page with a CSS layout

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.

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

To help you understand positioning you need to understand the box model.

Here’s a helpful tutorial you will want to review:

http://www.brainjar.com/css/positioning/default.asp


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):

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.


Demonstration using inner divs

Here is a link to the page from the demonstration.
And a link to the CSS file.

Important code:

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

#inner {
width:250px;
background-color: #fff;
padding: 20px;
float: left;
}

#inner2 {
width:380px;
background-color: #333;
float: right;

}

#inner2 img{
float:left;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 135px;
}

Positioning content using relative and absolute positioning

Another way to postion content on the pages is through the use of what Adobe calls AP divs. “AP” stands for “Absolute Position” and AP divs were once referred to as Layers. (So if you are working in a Macromedia version of Dreamweaver instead of Adobe, you will see they are referred to as layers not AP divs.)

AP divs: a way to position content on a page

AP divs are boxes that can be positioned anywhere on the page, and contain anything that can be put in a normal web page. AP divs can

  • Be positioned with pixel accuracy, in relation to the upper left hand corner of the web page, or in relation to another
    layer.
  • Contain anything, including text, links, gifs, animated gifs, and jpgs.
  • Have a stacking order, so that elements in a layer can be in front of, or behind elements in another layer.
  • Can be shown or hidden.
  • Can have their position changed over time.

Creating AP divs

  1. Insert a layer by selecting INSERT > LAYOUT OBJECT > AP DIV.
    Alternatively, select the layer icon in the insert menu then click and drag a box to create a layer on the screen.
  2. With the div selected, note the following div features in the properties inspector:
    * Left, Top – defines the top left corner of the layer rectangle relative to the upper left corner of the browser window
    * Width, Height – defines the size of the layer in pixels (note that the layer may expand to accomodate its content)
    * The layer name
    * Background image – tiles an image in the background
    * Background color – defines a background color for the layer.
    * Visibility – whether the contents of the layer will show when the page loads
    * Overflow – what to do with any content that exceeds the stated dimensions of the layer (only works in the most recent versions of browsers)
    * Z index – the layer order – higher is in front
    * Clip – the upper left corner and dimensions of a clipping area that will show reveal a part of the layer contents
  3. The AP elements window displays information about all the divs on the screen.
    * The order of the divs, based on the Z index. The order determines the visibility of layers when one overlaps another. Divs with higher numbers are in front. You can change the order by simply dragging one div to a new location.
    * The currently selected div. You can select a div by clicking the layer name in this window
    * The nesting level of a div
    * The visibility of the div. The eye indicates if the div’s visibility when the page is loaded is set by default (no eye), visible (the open eye), invisible (closed eye)

Video Demonstration

I demonstrate how to re-create the this example page using AP divs. In this demonstration, I have used the files found here web1_tables_example.zip to reproduce the example page in Dreamweaver. Note, that the existing page is actually built using a table structure. I will demonstrate how to build the page using a combination of AP divs and tables.

Download the entire demonstration in one QuickTime movie file (54MB). (You can right-click to download to your desktop).  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.

Relative positioning: a “relative” positioned element is “positioned,” which means it becomes the containing block for any absolutely positioned descendants. This gives us an easy-to-use tool for controlling the position of our containing blocks: just set position to relative without moving the box at all.

Absolute positioning: tells browser that element should be placed in an exact location.

The float property is primarily used to flow text around images, but it is also the basis for one of the ways to create multi-column layouts.

The clear property: Any element that has room to do so will move up next to a floated element, but sometimes you don’t want this to happen; you want it to clear– to site below (not beside) the floated element.

Tables

Tables provide a grid for controlling page layout

A cell an image with some text in the cell
cell cel

Tables allow you to control the relative positioning of elements on a page by creating a series of connected cells. These cells can contain text and graphics, and have a specific or relative size specified.

You create tables by clicking on the table icon in the object palette.

You’ll be asked to set the following attributes:

  • Number of rows
  • Number of columns
  • Width in Percent or Pixels
  • The width of the border (the beveled edge on the outer part of the table)
  • The cell padding (the text margin, left, right, top, bottom)
  • The cell spacing (the width of the cell walls)

Table properties
Table properties are accessible by selecting the whole table.

Table Cell properties
Cell properties are accessible by placing the selection point inside a cell – the cell properties will show up in the lower half of the property inspector.

Table Features

The difference between percent and pixelsIf the table is set to percent, the table will change size depending on how wide the user sets the browser. If the table cells are set to percent, their size varies as a percentage of the whole table. In general, it is best to use pixels for all tables.

Flowing text around tables
For flowing text around tables, tables are just like images, and have the same alignment attributes. The most commonly used settings are “left” and “right”.
Table format
The table format is controlled by the Border, Cellspacing, and Cellpadding (explained below). The settings for these table attributes are accessible in the middle right of the table property inspector. If you want the table borders to be invisible to the viewer and/or are using the table to knit together a set of images together, set all of these attributes to zero.

Border size
The setting of the table border in pixels affects the width of the border around the edge of the table.

Cellspacing size
The setting of the table cellspacing affects the width of the border around each cell

Cellpadding size
The setting of the table cellpadding affects the width of the margin. This margin is on the left, right, top and bottom

Selecting a table

There are three ways to select the whole table.

  • click on the upper left hand corner of the table when you see the cursor turn into a hand (this is sometimes hard to do).
  • click anywhere inside the table, then select MODIFY>TABLE>SELECT TABLE or type control-A twice
  • click anywhere inside the table, the click on the <table> tag at the bottom of the document window

Adjust the rightmost cell first

If you are setting specific widths of the table, set the width of the rightmost cell first, and work your way left. This avoids the problem of the cells squeezing up against each other as happens when you adjust from left to right.
Row and Column Span
Row and Column span enable a cell to span adjacent cells. For example, if you set the row span for a cell to 2, the cell will become two rows tall. Likewise, if you set the column span for a cell to 2, it will become two columns wide. The controls for changing these cell attributes are in the lower left hand corner of the table cell properties inspector. To create a span, select the cells you want to consolidate into one cell, and click on the merge button in the inspector. To remove a span, put the cursor inside the cell to be broken apart, and click on the split button in the inspector.
This cell has a row
span of two.
This cell has a column span of
two.
Changing the style of text in multiple cells
You can select multiple cells and change the text style by clicking and dragging across multiple cells, or shift selecting. Alternatively, you can control-click to select individual cells, even if they are not next to each other. Note that the only way to set the text style across multiple cells is to place a <font> tag in each cell. Dreamweaver does this for you, but if you are hand-coding HTML, be aware that you can’t simply put a <font> tag around the whole table–this will not change the style of the text inside the table.
Cell alignment — horizontal and vertical
The location of any text or graphic inside of a table cell is affected by the alignment setting for the cell. By default, the cell contents will be aligned to the left horizontally, and in the middle vertically. To change this, click inside the cell, and then set the Horz or Vert setting in the lower half of the property inspector.
The contents of a cell affects its size
Even when a cell has a specific width and height set, if the contents of the cell are bigger, the cell will always grow to accommodate the size of the content. This is true for both text and graphics. For example,. if the text in a cell doesn’t wrap (either because there are no spaces, or because you set the cell to not allow wrapping), the cell will expand its width to accommodate the text, regardless of the width setting for that cell or the whole table.
Clear row heights or column widths
When you are using a table to control the display of a series of image to be composited together, you should have no widths or heights set. This enables the image in the cell to determine the width and height of the cell. If you select the entire table, in the lower left hand of the properties inspector, there are two buttons (the first and second ones) that enable to you clear the row heights or column widths.
Convert table widths to pixels or percent
If you are having problems with a table, you may have a mix of pixels and percents, not a good thing generally. Dreamweaver has a method for setting all the table widths to the same method. Select the entire table, and in the lower left hand of the properties inspector, there are two buttons (the third and fourth ones) that enable to you set the table and all its cells to pixels or percent.
Nesting tables
You will find that it is often difficult to design a table that places elements exactly where you want them. One way around this is to put a table inside of a table cell. In other words, you use the outside table to set the general location, and the place a table inside the appropriate cell to do your exact positioning. To do this, just place the cursor inside the appropriate cell, and click on the Insert Table icon in the object palette.
This table is inside another
table
How do I create unique styling for different parts of my web page. Do all my paragraphs need to be styled the same?

No. You can have unique styling throughout your website.

You can create unique styles throughout your website with the use of descendant selectors. You are not limited to all paragraphs of text (or any other element) looking the same everywhere on a particular page or throughout the site.

Descendant selectors

How to Use CSS Descendant Selectors

It’s all in the CSS syntax

Step 1

A simple HTML document tree
A web page is organized in a hierarchy. The document hierarchy begins with html and descends through a tree structure that could include many elements within the body. Here’s a simple tree diagram.

Step 2
In the document tree, elements descend from the parent element that encloses them. In the example, there are lists that are the descendant elements of either the content div or the sidebar div. Furthermore, the lists are the ancestors of an A element (a hypertext link).

Step 3
The CSS syntax for a descendant selector is to list the selectors separated by a space, (but not a comma). For example:

#content ul a {rule here}

This selector targets an A element that is contained within a UL element that is contained within the CONTENT div. Other A elements on the page, perhaps one in a paragraph or in the SIDEBAR div, would not be affected by this selector.

Step 4
To style a list or list item in the sidebar, use a descendant selector like this:

#sidebar ul {rule here}

or

#sidebar li {rule here}

To style a hyperlink in the sidebar that is not nested in a list, use selectors like this:

#sidebar a:link {rule here}
#sidebar a:visited {rule here}

Step 5
To make P elements appear differently in the content area and the sidebar area, use descendant selectors like this:

#content p {rule here}
#sidebar p {rule here}

Step 6
Descendant selectors can also be based with classes. For example, if every post on your blog was assigned to the class “blogpost” you could write a descendant selector for an em (emphasized) element in an h3 element that was part of a div in the class blogpost like this:

h3.blogpost em {rule here}

Step 7
Descendant selectors can become quite lengthy when you are targeting a very specific element on a complex page. For example:

#blogpost blockquote p em {rule here}

It is the ability to get completely focused on one and only one element on a page using descendant selectors that give you the power to style your page in any way you desire.

Above material about How to Use CSS Descendant Selectors from eHow website. Content written by Virginia DeBolt.

How will I post my midterm project live to a server?

You will need to post your midterm project to a server so that we will be able to view your site on the internet for midterm critiques.

FTP (File Transfer Protocol)

See the main navigation section FTP for instructions on how to connect to the class server.

XHTML & CSS Exercises
Faux Column

Adding a graphic to the layout’s background that is the same color and width of the columns, to create the illusion that the column extend right down the page.

Notice the following:

  • The image is added to the background of the wrapper.
  • You need to specify your navigation and content <divs> in pixels.
  • You need to change the background color or your <divs> to match your image.

Here is the image I used in the demonstration. (Notice in the CSS, I set my navigation <div> to 290px with background color #ffcc00, and the content div to 700px. with background color #ff6633.)

#wrapper {
width:990px;
margin-left:auto;
margin-right:auto;
background:url("images/faux_col.gif") repeat-y;
}
CSS example
body { font-size: 62.5%;
}

#wrapper {
 width:990px;
 margin-left:auto;
 margin-right:auto;
 background:url("images/faux_col.gif") repeat-y;
}

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

#navigation {
 width:290px;
 float:left;
 background-color: #ffcc00;
}

#content  {
 width:700px;
 float:left;
 top:0px;
 background-color: #ff6633;
}

#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;
}

Exercise 1: Using the HTML code from the 2-column layout from last week, create a 2-column layout with a column that extends down to the bottom of the page using a graphic.

3-column Liquid layout

Basic Div structure:

<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>

<!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>
CSS example

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; /* 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;
}

Exercise 2: Create a page with a 3-column Liquid layout following the example above. Add your own content and styling to the page.

3-column Faux column layout

Exercise 3: With the help of our textbook “Stylin’ with CSS,” create a HTML file and CSS file for a 3-column layout with columns that extends down to the bottom of the page. Remember, this is called a “faux column” and is done using a graphic.

Assignment

Exercise 1: Using the HTML code from the 2-column layout from last week, create a 2-column layout with a column that extends down to the bottom of the page using a graphic.
Exercise 2: Create a page with a 3-column Liquid layout following the example above. Add your own content and styling to the page.
Exercise 3: With the help of our textbook “Stylin’ with CSS,” create a HTML file and CSS file for a 3-column layout with columns that extends down to the bottom of the page. Remember, this is called a “faux column” and is done using a graphic.



Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Interactive Design 01