BTI220 Lab 4

Lab 4 is due on Monday, July 22, 2013, at 7:00am ET.

.

Lab 4 – Working with CSS

For this Lab 4, you have the opportunity to demonstrate the correct use of CSS for simple tasks.

.

Getting started on Lab 4

Download the ‘sample-july18.zip’ compressed/zipped package, and save its contents in a folder named ‘lab4’.

In a source code text file named ‘styles.css’ (saved in the lab4/ui/css sub-folder), you will create CSS rules that will affect the formatting and appearance of the ‘original.html’ document.

When appropriate and necessary, you will also edit ‘original.html’ to enable your CSS rules to work the way you intend.

DO NOT use a programmer’s source code editor. Use only a plain text editor that does NOT perform source code formatting and completion tasks.

.

Specifications

Improve the formatting and appearance of ‘original.html’, by adding CSS rules (and editing ‘original.html’ when necessary).

Your goal is to change it to be professional-looking, well-formatted, well-organized, readable, appealing, and attractive.

We expect that you will likely have to create between 20 and 50 rules to get the job done.

Your professor acknowledges that you likely do not have formal training and knowledge of user interface design. However, you have used the web for years, so you are definitely qualified to have an opinion.

We suggest that you think about – and then visit – five to ten of your favourite web sites (or web apps). Then, document – write down – the user interface and user experience features that are meaningful to you. The features are wide-ranging, and could include content, colour, type, layout, organization, interactivity, ease-of-use, and so on.

From a layout perspective, you will use a classic two-column layout:

  • at the top of the page, there will be a header
  • at the bottom of the page, there will be a footer
  • in between, there will be a horizontal site navigation menu strip, and the content area (as two side-by-side ‘columns’)
  • the main content will be in the widest left-side ‘column’
  • at the right edge of the content area, there will be a narrower ‘column’, which will hold sidebar-like content

In a section below, you will learn more about layouts.

As noted above, there will be a horizontal navigation menu strip. The menu choices are currently in an unordered list near the top of the HTML document. In a section below, you will learn more about menus.

.

Menus – an introduction

Navigation menus on web pages are made with unordered lists. The technique for creating a simple menu is described in this section.

Preview of the end result

You will create a simple single-level menu that looks similar to the following:

menu02

.

Start by creating a list

This lab’s original.html includes the list items near the top of the document:

<nav>
  <ul>
    <li><a href=home.html>Home</a></li>
    <li><a href=aboutus.html>About us</a></li>
    <li><a href=curriculum.html>Curriculum</a></li>
    <li><a href=admissions.html>Admissions</a></li>
    <li><a href=careers.html>Careers</a></li>
    <li><a href=contact.html>Contact us</a></li>
  </ul>
</nav>

Notice that the ul is inside (a descendant) of nav. If this was the only nav element on the page, it would not need an id attribute. However, on complex pages – where you offer both site-wide navigation and contextual or page navigation, it would need an id attribute.

.

Think about the default (built-in) CSS rules for a list

The default, or built-in CSS rules for a list makes it appear as follows:

menu01

As you can see, the hyperlinks are rendered as a vertical list (each list item is on its own line), indented, with bullets, and the text is blue and underlined.

Therefore, we want to change all that.

You must be careful – and specific – when naming your selectors. For example, the above list is unambiguously selected with the ‘nav ul’ selector. Its list items are unambiguously selected with the ‘nav ul li’ selector. If you get sloppy and don’t include the ‘nav’ part of the selector, your rules will affect other lists on the web page.

.

Remove the indented bulleted list formatting

By default, an unordered list is indented from the left, and has bullets. It also has a top and bottom margin. Remove all that:

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

Try this now, and view the result.

Links to reference material: nav ul margin padding list-style-type

.

Configure the list items to a horizontal configuration

By default, a list’s items are in a vertical orientation. Also, each is as wide as its content. Change to horizontal, and make all items the same width:

nav ul li {
  float: left;
  width: 16.66%;
}

Try this now, and view the result.

Links to reference material: li float width

.

Configure the hyperlinks, step 1 (structure and positioning)

Add rules to set the structure of each hyperlink, and its positioning. Ideally, we want a bit of padding between the content and its edges, and some margin to separate the hyperlinks.

nav ul li a {
  display: block;
  padding: 0.5em 1.0em;
  margin: 0em 0.2em;
  cursor: default;
}

Try this now, and view the result.

Notes:

  • we want ‘display: block;’, to enable the user to click anywhere on the list item’s width, and not just the hyperlink’s content
  • padding and margin values are in em units, to survive a user changing their browser’s zoom level
  • by default, the cursor changes to a hand+finger pointer over top of a hyperlink, so we change that behaviour

Links to reference material: a display cursor

.

Configure the hyperlinks, step 2 (fine-tune their appearance)

Add some more rules to improve the menu’s appearance. Please note that the fonts colours are examples only, so your finished professional-looking page will probably use better choices.

In the code below for the ‘nav ul li a’ selector, the first four rules we added in ‘step 1’ above are at the top, and the new rules for that selector follow.

nav ul li a {
  display: block;
  padding: 0.5em 1.0em;
  margin: 0em 0.2em;
  cursor: default;
  background-color: yellow;
  text-decoration: none;
  font-family: arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.1em;
  letter-spacing: 0.1em;
}

nav ul li a:link { color: black; }

nav ul li a:visited { color: black; }

nav ul li a:hover {
 background-color: aqua;
 color: black;
}

nav ul li a:active {
 background-color: pink;
 color: black;
}

Try this now, and view the result.

Links to reference material: background-color text-decoration font-family font-weight font-size letter-spacing color

.

Later in this course, you will learn how to create a multi-level menu.

.

Layouts – an introduction

By default, an HTML page is rendered relative to the upper-left corner of a browser tab/window.

Each element is rendered in the sequence that it appears in the HTML source code document. Therefore, if the HTML document includes two div elements in sequence, their content will be rendered in sequence. The first div element’s contents will appear, followed by the second div element’s contents, below the first div element.

We will change that behaviour using CSS rules. Our goal is to place the content of two elements side-by-side.

Also, by default, some elements have a width of 100% of their parent’s width. Others are only as wide as their content.

View/scan the ‘original.html’ in a browser. You will see a number of elements that have a width of 100% of their parent’s width (ultimately the ‘body’ element):

  • paragraph (p)
  • list (ul)
  • image (img)
  • table

We use HTML elements and CSS rules to change these defaults.

Preview of the end result 

For this lab, as noted above, you will create a two-column layout that looks similar to the following:

example1

…bottom…

example5

.

You will notice that it includes a header, and a horizontal menu strip in a nav element. Also, a footer at the bottom.

The content area is organized in two side-by-side “columns”. The left “column”, which uses most of the width, has the page’s ‘main’ content. The right-side “column” includes some images (but it could hold anything, text, images, etc.).

Here’s how to make this happen. You must edit the ‘original.html’ document, and add more rules to your ‘styles.css’ document.

.

HTML element sequence

Your HTML document must declare elements in the following sequence:

  1. header
  2. nav
  3. div id=wrapper – this will wrap the next two elements
    1. div id=main
    2. aside (or div id=sidebar)
  4. footer

Therefore, you must edit ‘original.html’ to match.

.

Initial rules

The new HTML5 container elements need a rule to display them as a block (and not inline):

header, footer, nav, aside, article, section { display: block; }

Next, you need to think about the intended user of the web page, and the device that they’ll use to display the page. For our purposes here, we will assume that the user will have a standard laptop, desktop, or tablet display. (We’ll learn to consider smaller devices – smartphones – later in the course.)

Now, consider the web page’s content. Should it have a maximum width? A minimum? Probably, to both. Those rules should have a body selector, and the measurement units should be px (pixels). Experiment yourself, but somewhere in the range of 800px to 1200px.

The ‘footer’ needs a rule to ensure that it is positioned at the bottom of the page’s content: ‘clear: both;’.

.

Placing the content side-by-side

The ‘div id=wrapper’ element is simply a container for the two elements that will be placed side-by-side. It may not need any of its own rules. Here’s an example of what we’re attempting (click to view the image full-size):

layout-2-column

The ‘div id=main’ element contains the web page’s main content. We want it on the left. Using CSS terminology, we want it to ‘float left’. We also want it to have a flexible width. You simply have to do some basic arithmetic (and use paper-and-pencil) to lay out the content, using the dimensions of your content.

Here’s one example of the rules for ‘div id=main’:

#main {
  float: left;
  width: 80%;
}

With the ‘float: left;’ rule, the element will be positioned to the left of the elements that follow it.

The ‘aside’ element (or a ‘div id=sidebar’) follows ‘div id=main’ in the HTML source code, and will be placed beside ‘div id=main’. At a minimum, it needs a margin-left rule, but it may also need others:

aside {
 margin-left: 80%;
}

.

Later in the course, you will learn how to create more layouts for different configurations.

.

Other bits-and-pieces

In this section, other formatting and appearance issues are discussed.

Faculty profiles

The formatting and appearance ‘faculty profiles’ in ‘original.html’ needs improvement. Editing the HTML and adding rules will result in a better appearance. Here’s an example (but yours can look different):

example2

Notice the new formatting. Each professor has their own rectangle. On the left of this rectangle, a photo. On the right, a name, and description. Here’s how this was done:

Each professor’s content was wrapped in a ‘div class=profile’ element, indented a small amount. Its initial rule was:


.profile {
  margin: 0 5%;
}

Also, the element surrounding the professor’s name was changed to h4 (it was a p before).

From the layout discussion above, it should be apparent that the image has been floated left. It also needs a small margin. Its initial rule was:

.profile img {
  float: left;
  margin: 0 2.0em 1.0em 0;
}

If you do just these tasks, you’ll be part way there, because the result will look similar to the following:

example2inprogress

To fix that, the ‘.profile’ rule simply needs another definition to ‘clear: both;’.

.

Styling tables (and hyperlinks)

You must think about the width of an HTML table. It can be just wide enough to hold the data, but then the content is too close. You need some whitespace. It can also be the full width of the parent’s container, but that may cause too much whitespace. Ideally, it should be somewhere in between. You can choose a fixed width (if you can’t tolerate your table’s data being wrapped in a table cell), or a percentage width. For many tables, a width somewhere between 50% and 90% often looks fine.

example3

Also, you should think about the appearance of the hyperlinks, and improve it. Here’s a strategy:

  1. set the link ‘color’ to something that complements your page’s visual appearance
  2. neutralize the appearance of links (‘a:link’ selector) and visited links (‘a:visited’ selector) by removing the underline, ‘text-decoration: none;’
  3. if you want an ‘active’ (i.e. in the process of being selected/clicked) link to have a different ‘color’, then add another rule

Also, if you want a hover effect (‘a:hover’ selector), you can do so. The following example shows the effect of a ‘background-color’ setting when the mouse pointer is over top of it (sorry, the mouse pointer doesn’t appear on the image):

example7

Should you add a hover rule to the nav/menu? Probably. For best results, use a really specific selector, like ‘nav ul li a:hover’. If you do, here’s the result when the mouse is hovering over the “Home” item:

example6

.

Image that’s inside an a (hyperlink) element

By default, an image that’s inside an a (hyperlink) element has a border around it. You will have to add a rule to remove the border. Use a specific selector (e.g. ‘a img’), so you don’t accidentally affect other images.

The OCAS image – and its container ‘a’ element – should also be on the right. Study ‘original.html’. It appears just above the paragraph elements under the “Application process…” heading.

Edit the HTML document to target the ‘a’ element correctly. You can do it with a unique identifier (e.g. ‘id’), or with a group (e.g. ‘class’) if you think that you may use the same strategy for other images on this or other pages.

Then, add a rule that will ‘float: right;’ (which means that the element will be positioned to the right of the elements which follow it).

example4

.

How to submit your work

Save your “lab4″ folder in one single zip/compressed file (.zip or .7z).

Use My.Seneca (Blackboard), and locate the “Lab 4…” item in the “Assignments” area. Upload your work before the due date and time. (The link will disappear after that date/time.)

.

.

.

.

.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: