Designing an appealing web page.

You have already finished the HTML and CSS code for creating and formatting web pages. Now that you have these skills, you need to be able to make your web site look appealing to the viewer. You only have seconds to keep a viewer’s attention. In this section you will learn how to format two-column layouts and the difference between a good and bad web site.

Creating a two-column layout.

Anne Billings has asked you to add a new page to her current Web page. The construction around the gallery has changed the route of traffic. The colors, logos, and information are present but the layout looks sloppy. She has asked for you to format the information with two-columns.

ContainerClick on the step at the bottom of the page to receive directions.

Step 1 Step 2 Step 3 Step 4

The container is exactly what the name implies. It is like a big box that holds other boxes (or containers). It is created using the word div.

The function of the container includes:•Determining the width for the page layout.•Center layout horizontally•It can contain a border to unify page content•It can apply a background color to add dimension to the Web page.

Put in the opening div for the container.

Put in the closing div for the container.

Format the container. The width of the container will depend on the type of resolution you expect your audience to have on their monitors.

Finished Container.

Header/BannerClick on the step at the bottom of the page to receive directions.

Step 1 Step 2 Step 3 Step 4 Step 5

Since headers were covered in an earlier section, this part will just format. The container for the header is necessary so that the header is not split into columns. It is like putting a continuous break in a word document before the columns are entered. A banner is optional. After the header we can place the navigation bar and it would be formatted about the same as the banner. The navigation bar is at the bottom of this page. The banner is a heading that will be changed on each page of the site.

Put in the opening and closing div for the header.

Format the header. It should be the same width as the container. Usually the bottom margin is bigger in the header to create separation. It is optional. We place a background color in the header in case the picture or logo does not appear for several seconds and also to create division.

This is what the header will look like.

Put in the opening and closing div for the banner.

Format the banner. .

Step 6

Finished header and banner.

SidebarClick on the step at the bottom of the page to receive directions.

Step 1 Step 2 Step 3 Step 4

The sidebar will create the first column on the left side. The sidebar can be on the left or right of the main section. It is always the smaller width of a two-column layout. It can be used for a variety of things. You can place a logo, navigation bar, pictures, quotes, or other objects in the sidebar.

Put in the opening div for the sidebar.

Put in the closing div for the sidebar.

Format the sidebar. The sidebar width is usually about 200px. It can be bigger or smaller. We need to add padding to the sidebar and main so that the words have white space between the two columns. Borders will add division but is not necessary. Make sure to float the sidebar. In this case we are floating it to the left. When floating the sidebar to the right, the text in notepad needs to be placed below the main section.Finished sidebar.

MainClick on the step at the bottom of the page to receive directions.

Step 1 Step 2 Step 3 Step 4 Step 5

When we created the sidebar it moved some of the text over to the right. However, it needs to be formatted and placed in a container. If it is not placed in a container than we will not be able to fix the bottom of the page.

Put in the opening div for main.

Put in the closing div for main.Format the div for the main. Make sure you float the section to the left. The container width should equal the width of the main + the left and right padding+ the left and right margin + width of the sidebar + the left and right padding of the sidebar + the left and right margin of the sidebar.

This is how main should look. We need to indent the paragraphs for separation. Descendant selector will accomplish the job.

When we indent using a descendant selector to the paragraph, it allows the paragraph to indent without indenting the headings.

Step 6Finished Main

FooterClick on the step at the bottom of the page to receive directions.

Step 1 Step 2 Step 3 Step 4 Step 5

The bottom of this page is a mess. We want to have the background go to the bottom of the text. We also want to move the information at the bottom of the left column to the very bottom of the document. To accomplish this we will create a footer that covers the bottom of the sidebar and main.

Put the opening div and close div for the footer.

Format the footer. Most footers are not the same color as the main section of the Web page. However, that is a personal choice. The color difference just sets the footer apart from the main section.

This is how the footer should look. The default blue on the links blends in with the background. Creating descendant selectors will fix the problem.

The two sections fix the link colors. This should not be new information.

This is the finished footer. Notice the rollover.

Finished Product

Practice

You have seen how to create a two-column layout. Now you are going to create one.

Which formula gives you the desired effect?

Desired Results

A B C D

Click on the letter of the correct answer.

A is incorrect. The sidebar and main have the width’s switched and the floats switched. Main carries the larger width.

B is Correct! Nice Job!

C is Incorrect. The widths are equal and the picture does not show equal column lengths.

D is Incorrect. The width of the container is 930px. When you add the content area, margins, and padding of both main and sidebar, they equal 945px.

Container has a width of 930px.

Create a sidebar and main

A B C D

Click on the letter for the next step.Create the following styles for the #sidebar id selector.• Set the width to 150px• Add padding of 10px to all sides• Have the text appear in white• Set the background color to teal• Set the value of the float property to right

Create the following styles for the #main id selector• Set the width to 700px• Set the margin on the right to 10px• Add padding of 10px to all sides• Set the background color to teal• Set the value of the float property to left• Set the text indent to 2em

Did you check your answers? Did you do it correctly? Click to view the finished product.

Does yours look the same?

In this assignment, you are to create the sidebar and main id selectors. Open biz.html in notepad and when given instructions type the code in the file.The sidebar goes on the right side and contains the logo. When you click the letter it will give you directions for the next step and the answer to the previous step. Do your best. You should correct your mistakes.

Create your own sidebar and main

A B C

Click on the letter for the next step.

Make sure to set your width. Do you need margins or padding and on which sides?

Here is what your finished product should look like. Go ahead and write your code and then come back and click on C.

This is an example of what your code could look like. Is yours wrong if It is a little different? No. Just make sure your columns are not bigger than 940 px.

In this assignment, you are to take the website below and change it to a two-column layout. Open griff.html in notepad, when given instructions type the code in the file. The width of the container is 940px.

Good and Bad Design

Just because you can place your web page in columns, it does not mean that your page is appealing. You are going to discover the difference between an annoying page and an appealing page.

RULES TO AVOID BAD DESIGN1. Don’t annoy your viewers.

•Don't use frames unless you have to! - Frames are annoying and cause people to lose their way when navigating your site.

•No animated GIFs. These seem cool at first as you learn web design. But they take up a lot of space and the way they keep moving over and over again makes them annoying. Also the generic ones you can download for free are usually very tacky.

•Avoid bright & neon colors. Less is always more and bright colors can make your page hard to read, and thus annoying

•Be subtle- no strong backgrounds that overwhelm your page.

Example of a bad animated page and bright colors. Here

Example of bad background. Here

RULES TO AVOID BAD DESIGN2. Follow the rules.•Make a site map. Your site will grow and people will want to have an easy way to find everything

•Have a navigation bar immediately apparent (and easy to use.) This way visitors to your site have an idea of the kinds of things you have on the site. A page without a navigation system and bad design.

•Don't put any giant images or titles on your page. Make everything small and simple, so your page loads faster and no one element overwhelms your visitors. Example of a bad website.

example 1 example 2Is this a good example of a background?

Click here for the answerExample two is the correct background. In example one, the background not only clashes, but overwhelms everything else going on. The second background in the small box makes the text illegible. In example 2, Much Better- note that the background doesn't clash with the foreground, but especially look at the little box and it's background.

RULES TO AVOID BAD DESIGN3. Keep it simple.•Use variations of the same colors as design elements- don't mix too many different colors. Good example.•If in doubt, keep it out. If you overwhelm the visitor with information or with choices, they will just go away. Boil everything down. Remember you are conveying information- not putting on a show. Too much information and not enough organization.•Keep the page small- long load times mean people won't come to your page. •Don't use a lot of different fonts. See how annoying this line is and how it doesn't fit in with the rest of this page ???!?!?!?!

What is wrong with this page?

Click here for the answerWhy is the top green? Why use italics for the navigation? If you can't answer questions about the design elements on your page, take them out and simplify them..

RULES TO AVOID BAD DESIGNMake a bad site better.

Let's do a quick redesign of one of our bad examples- HERE , to show how a few quick decisions can make a better website...

1 - All we have to do is apply the rules we went over abovea) take out the ugly background (Add a simple background image or make the page white)b) make the fonts consistent (make them all Arial and black)c) no loud colors (take out all those loud colors in the title and text and anywhere else)d) no giant images or letters (make the title smaller)

Just by doing those things, the page already looks better--- HERE

Click here to go to the next page.

2 - Let's simplify the page even morea) take out all those border edges on the bottom of the page- the red is loud and there are borders within bordersb) make the main table more attractive by giving it a fixed size and more rows so it doesn't stretch across the pagec) put the introductory text in a table to rein it in a littled) get rid of those horizontal rules, they're unnecessarye) make a table for the title, with a simple background color, then change the color of the text so it stands out moref) put the whole part of the page in a table and give the table a border that matches the background color of the title table

Now our page looks like THIS. It may not win any awards, but compare it to the old version HERE

Step 1 Step 2

RULES TO AVOID BAD DESIGNFix this page.

I want you to take this page and make it a good site. Copy the code and change things to make it a great site. When you are done, send it to your homework folder. Some of the ideas you might want to talk about is the frames, two-column layout, colors, and animations.

Site to change. Here

Lesson plan adapted from : http://www.un.org/events/workshop/dpi-unitar/2003/dreamweaver/bad-design.htm

You are on your way to creating an appealing page. Happy

creating.