CSS Web Page Templates
The following templates are intended for educational use. Students are welcome to download the zip files and use them for educational purposes. Should you use them on a live site, please provide a link back to this website.
Simple CSS
Simple CSS incorporates the use of minimum HTML and CSS to achieve an asthetically pleasing web page. The template can be used in programmes such as DreamWeaver and Expression Web, where it can easly be saved as a dynamic webpage template or you can use an HTML editor or even just notepad to edit the web page.
The layout uses CSS and is made to be viewed at a minimum resolution of 1024X768.
The template incorporates a right aligned horizontal, tabbed, menu.
CSS has been used to style all elements of the page. While the page works in all browsers, modern browsers like Firefox, Opera and Safari will display rounded corners on images and blockquotes as well as subtle drop shadows on the main heading and wrapper. In older browsers and all versions of Internet Explorer these styles will be absent. As these styles simply enhance the design but are not essential the slight difference in rendering is not to be considered a flaw.
The Journal
This design is not my own, but rather inspired by a combination of a lovely web page I saw on CSS Zen Garden and my Moleskine diary.
All the graphic work is my own, as is the coding. While it is not as good as the original or an authentic looking Moleskine notebook, I was pleased with the over all look.
The template incorporates three images to create the journal background. As text is entered into either the left or the right hand columns, the page will automatically extend vertically to accommodate the text.
Tree Frog
The layout uses CSS and is made to be viewed at a resolution of 1024 X 768.
The template incorporates a horizontal tabbed menu overlaying the header image as well as rounded borders.
The tree frog image can be found on Wikimedia Commons.
I have tested this layout in Firefox 3.0.1, Internet Explorer 6, 7 & 8, Safari 3.1.2, Chrome and Opera 9.51 and it looks good in all of them.
Life's a Journey
Preview Life's A Journey,
Enjoy the Ride!
This layout is supposed to be an improvement on the Blue template
The layout uses CSS and is made to be viewed at a resolution of 800X600, but centres nicely on larger screens.
The template incorporates a horizontally centred, tabbed, menu.
I have tested this layout in Firefox 3.0.1, Internet Explorer 6, 7 & 8, Safari 3.1.2, Chrome and Opera 9.51.
Blue
This was my first attempt at a web page template.
The layout uses CSS and is made to be viewed at a resolution of 800X600, but centres nicely on larger screens.
I have tested these layouts in Firefox 3.0.1, Internet Explorer 6 & 7, Safari 3.1.2, Chrome and Opera 9.51 and it looks good in all of them.
The Blue.zip file contains all the required CSS files, HTML files, images and dynamic templates, which work in Expression Web and should work in Dream Weaver.
Simply Black
I recently set out to create a fluid template using only CSS where all widths are defined as percentages.
The body area of the template fills 98% of the browser window and is positioned so that it lies centred in the window with a 1% border on all sides.
The body is then divided into 6 sections. A header, navigation, three columns and a footer.
Website Development Resources
- Buttons
- Image Rotator
- Advanced mouse-over
- Animated Scrolling
- Enhance Photographs with a caption, border & drop shadow
CSS Templates
Website Authoring Tutorials
- Styling and placement of images within a web page
- Creating a styled link list using CSS and HTML
- Building a single column webpage from scratch
- CSS mouse-overs
- CSS photograph gallery
- Styling Fonts