Wellesley College :: Sample Layouts

Under each layout, click the HTML page to view the actual size layout. To use any of the layouts below, right-click the linked elements (e.g., HTML page, Banner image, etc.) and save them to your computer. All of the images should be stored in a folder named Images, within the site folder. If you have any questions using these layouts, please contact us.

LayoutOne

2 columns, custom bullets

HTML page
Banner image
Bullets
Hammer image

LayoutTwo

3 columns, filled cells

HTML page
Image
I mage

LayoutThree

Transparent rollover images, no underline on links, image in cell background

HTML page
Circle image 1 and rollover
Circle image 2 and rollover
Circle image 3 and rollover
Circle original image (PNG)
Background image

LayoutFour

Rollover buttons, rotating image

HTML page
Button 1 and rollover
Button 2 and rollover
Button 3 and rollover
Button 4 and rollover
Button 5 and rollover
Button original image (PNG) and rollover
Rotating image 1
Rotating image 2
Rotating image 3
Rotating image 4
Field image

LayoutFive

Text links in navigation have a different style than normal links, created in attached CSS stylesheet

HTML page
CSS Stylesheet
Banner