Web Design & Architecture -- LIS 9723 logo


Remember, finish your layout first, BEFORE you turn it into a template. I always find it easier to create the file structure before I create the template as well, so that I can link everything properly.

Note: The persistent nav should NOT be in an editable region.

Exercise 8: Create a Mini-Site with a Template

Two parts to this one, but it's actually pretty easy!

This exercise is a two-parter, for two points. If you can do the layout and get it posted, you'll get one point. If you can complete the second part, with working links, you'll get the second.

Create your own layout

First, I'd like you to create a brand new layout. You can make this your own, but I'd like you to imagine it is a site with persistent navigation (six sections), a redundant text-nav system at the bottom. (And don't forget the home page, so 7 pages in total.) You may choose to use some of the resources we used for Exercise 6, to find a logo, choose images and colors.

Or create this one

If you want a specific goal, you can tackle the Big Red Dot layout, first, and then build your template based on it.


Once you've got a layout, turn it into a template, and build a mini-site

Then create an entire site with a page for each of navigation button, plus a home page. You don't have to have any content in the site, except put something in the title and have a main header that matches it. If you want to make up local nav, you can, but you don't have to have actual pages for the local links.

So, that would be 7 pages in total.


If you'd like something in the page so it looks better, here's some dummy text:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

You may also want to try the html-ipsum generator, or for something off-beat, the bacon ipsum generator.

Back to Top
Last updated:

Course Outline | Assignments | Exercises | Schedule | Resources & Links | Lab Tutorials

About the Site | Site Map | About Mark | ©2013-2014 Mark A. Rayner