Exercises: Reuse a design

Exercise: Genesis

Download the design Genesis. Make the following changes:

HTML

Make the design HTML, instead of XHTML.

Ticks

There are some ticks in the top nav bar:

Ticks

Figure 1. Ticks

Dogs don’t like ticks. Remove them. Hint: use Firebug to work out what is making the ticks.

Bottom stuff

Remove the large menu at the bottom of the page.

Make the text in the footer easier to read.

Sidebar

Get rid of the Navigate, Search, and Sponsors areas.

Give About a generic title, like Title.

Header

Replace the solid green background with an image or a tile. We talked about background tiles ealier.

I used an image from GRSites.

Extra content

Remove the extra content in the main area. Remove extra links in the nav bar.

Put in template markers, like [SITE NAME].

When you’re done…

Upload your solution to your server. Enter the URL below.

You can see my solution.

(Log in to enter your solution to this exercise.)

Exercise: BusinessBlog

Download the design BusinessBlog. Make the following changes:

HTML

Make the design HTML, instead of XHTML.

Top nav bar

Get rid of the top nav bar, the one that has “Home About” etc.

Sidebar

Float the sidebar to the right instead of the left.

Remove the “Menu Navigation” section. Replace “Resources” with a generic title. Remove all but two of the links. Add some generic text below the links.

Remove content

Remove the extra content in the main area. Remove extra links in the top nav bar.

Add markers

Add markers for [SITE NAME], etc.

Final fixes

Make sure that [SITE NAME] lines up vertically with [PAGE TITLE]. Indent the [SITE SLOGAN] a little.

When you’re done…

Upload your solution to your server. Enter the URL below.

You can see my solution.

(Log in to enter your solution to this exercise.)


How to...

Lessons

User login

Log in problems? Try here


Dogs