Web Design & Architecture -- LIS 9723 logo


Extra Information

 

Remember -- this doesn't have to be perfect. I just want you to have a go and to publish it to your web page. Remember to link from your homepage too!

Tutorials to check out:

CSS

CSS Layouts

CSS Links

Tips

Keep an eye out for the comments in the CSS that Dreamweaver gives you -- you can learn a lot from them.

 

Exercise 7: Toaster Uprising

A more challenging exercise today

Okay, today I'd like you to create this layout. Here are the images you need (I've given them all dark borders so they're easier to spot, but they won't appear in the actual images):

s c t s

(note: that horizontal gradient is actually 770 px long -- I just squeezed it down to fit this div)

And some buttons (the logos you have from the tutorial):

c

ppaacc4oo4

Remember, it doesn't have to be exactly the same -- take your best shot and post it to your site! (It took me about 45 minutes to build the layout, not counting the images.)

Lorem Ipsum

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.

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.

 

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