Week 07

Topics: Building website prototype: Image optimization for Web, image slicing, CSS, more XHTML markup
Studio Demonstration: AP divs, Tables and CSS
Project: Continue working on midterm project. Bring in your work next week. We will have studio time in class on Wednesday, October 28.

Reading for For Next Week
Stylin’ with CSS: Chapter 6: “Designing Interface Components” (pg.174-217)
Watch the following video chapters from “Dreamweaver CS4 Essential Training with: James Williamson” on lynda.com.
Chapter 6. CSS Foundations

  • The CSS Styles panel
  • Understanding Element Selectors
  • Understanding Class Selectors
  • Understanding ID Selectors
  • Understanding Descendent Selectors
  • Attaching external style sheets

Chapter 10. Controlling Layout with CSS

  • CSS structuring basics
  • Structuring with DIV tags
  • The Box Model
  • Understanding floats
  • Clearing and containing floats
  • Using relative positioning
  • Using absolute positioning
  • Using fixed postioning

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:

Image Optimization & Image Slicing
Overview

Web designers develop their page layouts in Photoshop or Illustrator before they use an application such as Dreamweaver to assemble the page in HTML. This approach allows the designer to use all of the powerful layout and design capabilities of Photoshop to work on the creative aspects of laying out the page. Once a design is solidified, the designer must translate their Photoshop layout into HTML and CSS. This involves compressing different parts of the layout in different ways (e.g. some parts will be GIF while others will be JPEG), and leaving some parts of the layout for live HTML. To do this, it’s usually necessary to cut the original Photoshop image into smaller pieces. This is called image slicing.*

*Adobe Fireworks is another program designed for image slicing.

Advantages of image slicing

By slicing the page into smaller graphics, the designer can:

  • Compose the page in Photoshop – rather than Dreamweaver
  • Optimize the page – compress parts of the web page individually, and leave parts of the page “transparent” so the background color or background image shows through. For example, use JPEG for a photograph in one part of the page, use GIF for a logo with a transparent background where the page background color shows through.
  • Use HTML text – leave parts of the page available for HTML text which requires very little download time compared to graphic text. HTML text can also be updated more easily than graphic text.
  • Make graphic elements individual links – while his effect can be achieved with image maps, usually separate graphics
    or each link is better: better compatibility when the page is viewed without graphics (using the ALT text), better accessibility for the disabled, the ability to have rollovers for the links, and simpler updating of the page.
  • Rollovers – rollover images can be created for each navigational element on the page which would not be possible if the page was one large image.
Disadvantages of image slicing

Page slicing can create numerous problems if the designer is not careful:

  • Page size – by letting a program create all of your images, it is easy to let the page size grow too large. Be vigilant about the total page size when image slicing!
  • Page complexity – image slicing programs can create a large number of cells in the page. If this happens, the browser will take longer to display the page, and the user feels it is taking longer to download. Keep the number of slices to a minimum so the page is not too complex.
  • More complex design process – image slicing creates a more complex process, and may add to the time it takes to develop a website. In particular, it might take longer to make changes to pages developed with slicing.
Recommended Process

Be methodical.
Creating the numerous image slices for a web page makes the designer’s job potentially very complicated. One has to keep track of the page layout, the precise dimensions of each graphic element, rollover highlights, etc. If any changes are made to the page after it’s initially constructed, these factors become even more acute. As a consequence, the designer must take a very organized and careful approach to developing web page graphics.

Here is one method:

  1. Do the initial design and layout in Photoshop. (Note that each element should be on its own layer and all layers should be named. You want to be sure to keep your psd file very organized and all elements on separate layers.)
  2. Test the design in a web site by exporting a JPEG version of the entire page.
  3. Based on the tests, revise the design in Photoshop and create a final comp.
  4. Create rollover highlights as separate layers
  5. In Photoshop –
    1. Determine how the page will be sliced up to:
      compress each section of the image most efficiently (with JPEG or GIF)
      make slices for each rollover.
    2. Create the image slices using the minimum number of rectangles for dividing the page. Try to keep the total number of slices under 15. It is better to have fewer, larger slices than many small slices.
    3. Set the image format for each slice (JPEG, GIF, level of compression, etc.)
    4. Set the transparency for the slice, and set the matte color if applicable.
    5. Export all the slices along with an HTML file if needed. (Photoshop automatically creates a table that arranges the slices properly on the page). Save the image slices in a separate folder for each web page.
  6. Create the HTML in Dreamweaver to finalize the page.
Slicing in Photoshop

An image is created and edited in Photoshop.

Open the Photoshop file and:

  • Choose VIEW > SHOW RULERS, and create any guides you may need to make your slices consistent.
  • Select the slice tool
  • Draw a slice by clicking and dragging to create a rectangle for your slice
  • Double click on the image to open the slice option palette, In the slice option palette, set the following attributes for the following sections:
    Name
    : set the name of the file to be created for this slice (Photoshop creates a default file name, which I suggest you change)

  • After you have named all of your slices, select FILE > SAVE FOR WEB to individually optimize every image. In the save for web palette, set the appropriate image coding for every slice. Don’t forget transparency and matte if they are appropriate. Use the slice select tool (the alternate for theslice tool) to select different slices.
  • An easy way to remember the slicing process is as a 3 step process:
    Step 1- slice
    Step 2- name

    Step 3- optimize
Save Optimized Images

When you are ready to save your sliced images, you can create image files only, or create an HTML file with all of the images inserted in a table in the correct layout. We will cover saving a HTML file later in the semester. When saving, be sure to set the following items:

  • Create HTML or not
  • The directory for the images
  • After you have completed steps 1-3 (slice, name, optimize) for every slice, you can save the files as images only. You do not need to change the name of the file. Save to a folder called “Photoshop.” Photoshop will create an images folder and will place your optimized images there. Note that image slicing often generates many images. In general, it’s recommended that you create separate image directories for each sliced page so you can keep track of the images better.Notice also the following settings:
  • Settings : Default Settings
  • Slices: All

Use separate image directories for each web page.
Sliced pages often have many images, and the pages are frequently regenerated with different slices. This process can leave many unused “orphaned” images that should be deleted. If several sliced pages have their images saved in the same directory, it is difficult to find the orphaned image slices. On the other hand, if the image slices are saved in a separate directory for each sliced web page, then after significant changes to the slicing, the entire directory can be deleted and a new set of images can be optimized and saved into a clean directory.

Dreamweaver as prototyping tool

Dreamweaver introduction

Dreamweaver is an application for creating web pages. All web pages are simple text files that use HTML (and sometimes JavaScript) to describe the page. HTML (Hypertext Markup Language) is a standardized language that can be viewed with any web browser or other web page application.

Because web pages are made up of HTML, Dreamweaver does not create special Dreamweaver files. On the PC, you may find that if you double click on .html files, they will open in Explorer or Safari rather than Dreamweaver. As a result, it’s best to open your .html files from within Dreamweaver.

Dreamweaver is just a page formatting application, and is not capable of creating any media elements other than text. You must use Photoshop or other applications to create images, sounds, etc.

Creating a new web page in Dreamweaver
  • Select FILE>NEW
  • Immediately save the file in a good location on your disk before you do anything else. Select FILE>SAVE, and browse to the location on your disk. It’s necessary to save first because many web page features (such as showing images) rely on links to other files. These links only make sense in terms of where the web page is in relation to the linked file.
  • Give the file a name. This name should be all lower case, and have no spaces between words.
  • SAVE the file
  • There are two windows to use when creating web pages:
    Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.
    Code Inspector. This window shows the raw HTML (and other code such as JavaScript). You can write HTML directly in this window, and any changes you make will be reflected in the Document window when you switch to the document window, press F5, or perform a Save (control-s for PC or command-s for Mac).
Previewing in the browser

Dreamweaver is a WYSIWYG (What You See Is What You Get) authoring tool, and you can see how your web page is going to look in the Document window. But it is not perfect or complete in the way it displays web pages. As a result, you must preview your web pages in a real web browser such as Safari or Firefox. When you have built a page to the point where you want to check how it looks, save your file, then select FILE>PREVIEW IN BROWSER>SAFARI (or Explorer or Firefox). Alternatively, you can simply press the shift + F12 function key.

Dreamweaver Windows

Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.

Properties. This window is one of the most important and is used to show and set any properties of the currently selected element (image, table, text, etc.). For example, when you have some an image selected, you use this window to set the vspace and hspace.

Insert. This small palette is a shortcut menu used to place items into the current web page. For example, in the COMMON section, click on the icon with the tree to place an image in the document (at the current insert location). Each tab in the Insert menu brings up a different set of features for working with your document.

Site. This window servers two main purposes. First, it shows the way files are organized in your web site, and it allows you to open files without using the File>Open dialog. Second, it’s an FTP (File Transfer Protocol) client, which enables you to transfer your HTML files from the computer where you create them, to the web server where the files will be visible from the Web.

Behaviors. This window shows where interactive actions are added to text or graphic elements in the page. The most common behavior to add in Dreamweaver is for swap image, where an image changes when the user moves the cursor over the image. Two things are defined for each behavior, an event and an action. The event is the situation that causes something to happen. The action is what is activated when the event occurs.

Page properties

Every web page has global properties that can be set in the menu MODIFY>PAGE PROPERTIES… Important properties to be set are:

  • Title. This text does not appear in the body of the document. It sets the text to be displayed in the top bar of the browser window. You can also set the page title in toolbar of the document window.
  • Background Color. If this property is not set, the background color of the web page is undefined (although most web browsers will display it as white). Set this property to control the color of the background.
  • Background Image. This optional property allows you to use an image as a repeating, tiled background for the entire page.
  • Page margins. There are settings which control the margin at the top and left of the page. Most designerslike to eliminate these margins so they have complete control over the page layout. To do this, set LEFT MARGIN, TOP MARGIN, MARGIN HEIGHT, MARGIN WIDTH all to zero (there are four settings to accomodate Explorer).
The document toolbar

The Dreamweaver toolbar contains some common commands related to your view selection and your document’s status, plus a field for setting the page title. The Options menu items (button located on the right) change depending on the view you select.

document toolbar

Of particular note are the three buttons on the left. They allow you to quickly change the window view:

  • Design View – where you see how the page will appear in a browser
  • Code and Design View – a split page view where you see the code at the top, and the design at the bottom
  • Code View – where you see only the code that describes the page

Working with images

Web pages are usually a combination of text and images, and Dreamweaver allows you to place, adjust and to a limited extent, set the layout of images on the page. Keep in mind that HTML is a page MARKUP language, not a page LAYOUT language, so you may find yourself being frustrated at your lack of ability to position images exactly on the page.

A quick way to get images for use in making test web pages is to “borrow” the images from other web pages. This approach is only for learning purposes, and you must not use this method for commercial purposes since this would violate the rights of the copyright owner of the image.

To “borrow” an image from a web page, place the cursor over the image, and right-click (pc) or control-click (Mac). A menu will pop-up, and you can select “Save Image As…”. Browse to the location on your disk where the web page is, and save the file in the same location as the web page. Here is an image to use.

flower
Image: FreeDigitalPhotos.net

Once you have an image to work with, these are the steps for putting an image in a web page.

  • Placing an image. To place an image on a page, first, place your cursor and CLICK in the location on the page where you want the image to show up. Then, click on the image icon in the Insert palette. It will request the name of the image, whichyou can use the open dialog to set. Once the image is displayed on the page, you can set it’s characteristics in the Property Inspector.
  • Adjusting the size of the image. Click on the image to select it. Then you can change the displayed size by clicking and dragging the small black squares that appear on the edges of the image when you select it.
  • Making an image a link. Click on the image to select it. In the Property Inspector put the link in the Link section. You may also want to put a zero in the Border section to prevent the blue line that will appear around an image to indicate it is a link.
  • Flowing text around an image. By default, text does not flow nicely around images. To enable text flowing, select the image, and then set the Align setting to Left or Right. This will place the image on the left or right of the browser screen, and text will flow around it. You may need to reposition the image to get text to flow around the image at the point you want.
  • Adjusting the margins around an image. When text flows around the image, it “hugs” the image very closely by default. You can increase the margin around the image by adjusting the horizontal and vertical spacing. Select the image, and then put the number of pixels of space you want in the Vspace and Hspace sections of the Property Inspector.

Note that the inspector is taller than in the text example above. You make this happen by clicking on the small triangle in the

lower right hand corner of the palette. Experiment with the following:

  • Change the height and width of the image
  • Reset the size of the image to its natural size by clicking on the “W” and “H“. When the width or height number is bold, the dimension is different from the natural size.
  • Change the alignment so text wraps around the image
  • Set the alt attribute of an image
  • Make the image a link
  • Change the VSpace and Hspace to change the margin around an image when text if flowing around it
Insert Rollover

Create a rollover

  • Position the cursor where you want the graphic rollover to appear in your page, and click to set the insertion point.
  • Click on the “Insert Rollover Image” icon in the objects palette
  • Type in a name for the image (the name should have no spaces or special characters). This name will be used to reference this image from the JavaScript that is performing the rollover behavior.
  • Browse to the “Original Image” file. This is the image that is shown when the cursor is not over the graphic.
  • Browse to the “Rollover Image” file. This is the image that is shown when the cursor is over the graphic.
  • Normally, you check the “Preload Rollover Image” box. This ensures that the rollover image will be downloaded when the rest of the page loads. If this checkbox is not checked, the rollover image will download when you first rollover the graphic.
  • Type in the alternate text associated with this graphic
  • Browse or type in the link you want associated with this graphic. If you don’t want to link anywhere, just put a “#” in this space.
Image maps

Image maps allow you specify multiple links inside of a single image. The links are tied to shapes overlaid on the image, which can be rectangles, circles, or polygons.

This is especially useful when mocking up a website. Rather than taking time to create many separate images (by slicing or other means), you can quickly create your complete web pages in Illustrator or Photoshop and export them as complete pages. Then use image maps for any links on the page.

In Dreamweaver, create an image map by clicking on the image, then naming the imagemap in the lower left corner of the property inspector. Once the map is named, you can create multiple links by drawing a shape, and then associating the URL with the link, using the tools in the property inspector.

The following image has four links, one over the logo and over each navigational “button”.

Making an image map:

  1. Click on the image
  2. Set the name of the map in the lower left of the property inspector (lowercase, no spaces, no special characters!)
  3. Select a shape (rectangle, circle, or polygon) from the lower left
  4. Draw a shape with the drawing tool
  5. Dreamweaver will create a translucent shape for your hotspot
  6. Enter a URL or local web page file name in the Link section
  7. If you want a link to open in a new browser window, set the “Target” selection to “_blank”
  8. Set the “ALT” section to the desired alternate text
  9. Create additional hotspots by repeating steps 3-8
  10. When you’ve finished, click on the arrow in the lower left of the property inspector to turn off the map drawing.

Tables

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

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.

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/Layers 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)

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

XHTML & CSS Exercises
Faux Column

Faux columns: Add 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; /* 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;
}

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.



Comments

Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Interactive Design 01