The first assignment for this week is to convert the following design comp into valid XHTML and CSS code. All the necessary images have been pre-cut by your thoroughly competent in-house graphic designer, and are available in the images sub-folder on the server.
Fonts
The fonts used on the page are Georgia for the serif font, and Arial for the sans-serif font.
Tips
To begin converting any design comp into XHTML and CSS code, I would recommend setting up a basic page with the design comp applied as a background image to the container div, following the background image technique outlined elsewhere.
Then, start thinking about how you would create an outline structure with the proper rows and columns. This usually means thinking in terms of the container div and second-level divs that you can create to generate the basic sections of the page without worrying about the content that goes into each section yet.
If the design comp shows columns of content that sit side-by-side, you may want to look into using the clear/float layout technique, if necessary, which is how you coerce block elements, such as divs, to sit side-by-side.
Avoid using the CSS position or z-index properties. It is usually not necessary, and is often a source of trouble for inexperienced developers. Usually, you can position elements properly through a combination of margin and padding, and the float and clear trick.
For this comp, I would start with an outline of the page in the <body> of an XHTML document, something like the following:
<div id="container">
<div id="main_navigation">
</div>
<div id="search_bar">
</div>
<div id="search_results">
</div>
<div id="footer">
</div>
</div>
This simple XHTML code has all the major sections of the page broken up into divs. Now your job is to use CSS to put them into their appropriate positions and sizes.
Once you have the basic layout of the sections done, you can move on to more specifics, and start to think about how some of the parts of the content would be coded in the XHTML.
Global navigation
The global navigation looks like this:
This is not so different from the global navigation menu example we looked at in class, where we converted an unordered list of elements into a horizontal set of links.
So you might want to do something similar for this assignment. For example, working off of that example, you might want to set up the XHTML code for this global navigation to be something similar to this:
<div id="global_nav">
<ul>
<li class="selected"><a href="#">Recently Opened</a></li>
<li><a href="#">My Ratings</a></li>
<li><a href="#">My Friends</a></li>
<div class="clear"><div>
</ul>
</div>
Of course, you’ll then have to work on the CSS. For this example, you will want to use background-images behind each of the list items to give it the red or black background.
Sort options
The sort options allow the user to order the listings shown on the page in a variety of ways.
You will want to be able to apply the proper colors and styles to the links inside of this section, as well as make the “Recently Opened” link look “active”, i.e. bold.
So you would structure your XHTML in such a way that the whole section is contained within its own <div> tag, and the links are within <a> tags. The “active” link simply has an “active” class applied to it, which allows you to add special styles to that link in the CSS.
<div id="options"> Sort Listings by <a href="#">Venue Name</a>, <a href="#">Top Rated</a>, <a href="#" class="active">Recently Opened</a> </div>
As with the selected element in the global navigation section, we can use a special CSS selector to make the link with class “active” look bolder than the other ones.
Listings
The listings of venues should be a table with one row for each listing. Each row is divided up into several table data cells.
As you can see, each table data cell has a few pieces of content.
Here is an example to give you an idea of how you might code the XHTML for one such row. You do not necessarily have to do your rows exactly like this, but it should at least give you a starting reference point:
<tr >
<td class="namecell">
<div class="name">
<a href="#" >Travertine</a>
</div>
<div class="location">
<a href="#" >Nolita</a>
</div>
</td>
<td class="typecell">
<div class="type">
<a href="#" >Restaurant</a>
</div>
<div class="subtype">
<a href="#" >Mediterranean</a>
</div>
</td>
<td class="goingcell">
<div class="going">
<div class="checkbox_container">
<input name="going" type="checkbox" class="going_checkbox" >
</div>
<label class="going_here">I'm going here</label>
<div class="clear"></div>
</div>
</td>
<td class="ratingcell">
<div class="user_rating">
BB User Rating: 0
</div>
<div class="ratebox">
<a href="#" >Click here to rate!</a>
</div>
</td>
</tr>
Pagination
The pagination section towards the bottom of the page is conceptually a list of page numbers.
And you know that a list should probably be created in code using the <ul> or <ol> tags, as we saw with the global navigation.
Here is an example set of code that could potentially be used to create this pagination section:
<div class="pagination"> <ul> <li class="current"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li><a href="#">Next</a></li> <li><a href="#">Last</a></li> </ul> </div>
The list item with the class=”current” could be styled differently so that it appears to be “selected with an overline or top border.
The “Submit” button doesn’t look like Georgia or Arial.