Saturday, March 15, 2008

Consider Open Source CSS Templates for Rapid Web Development

Our department recently deployed a new web server. Our anticipated audience for this website is prospective students, current students, faculty, and potential employers. Being eager to adopt any new opportunity to use technology, I decided to immediately jump aboard by creating my own faculty website. Yes, admittedly I am a geek!

Although the official launch date for the server is well over a week away. I decided not to miss having "my" faculty website online at the same time. It seemed like a good idea, but my problem is that I am absolutely buried at this juncture of the semester. So at 10:15 pm on a Thursday night, I decided to look into the possibility of quickly creating a faculty website.

Web development is not something I do everyday. Although I do have some past experience as a webmaster and teaching HTML in the classroom I would not consider myself an expert in all the latest web technologies. So having presented perhaps way too much background material already, here is how I proceeded in constructing a clean looking, functional website with about an hour and half in labor.

My tools of choice were going to be a CSS template and Microsoft's free development tool Visual
Web Developer Express http://www.microsoft.com/express/vwd/.
CSS allows a person to edit a pre-designed template and replace the content contained in the template with their own information while preserving the general design.

I've written in the past about Open Source Software. There are lots of other forms of media adopting the open source concept (good topic for another blog). A quick Google search using the keywords open source CSS garnered several successful hits. The first on the list was Open Source Web Design http://www.oswd.org. At the time, this site claimed to have 2080 different designs. After reviewing several designs, I decided to change strategy by leaving the site to compile a short outline of the materials and technologies I planned to host on this site. Once this list was complete, I went back and selected a design which would facilitate my definition for the site. I chose the design Andreas08 http://www.oswd.org/design/preview/id/2427.

The design download consisted of a CSS template and an example HTML file. After making a backup copy of the HTML file, I proceeded to create my first page. One should consider using the filename index.htm or default.htm for the first file in any website so the site can be identified by the URL and directory name only. It is always messy when someone attempts to give a website URL with a long address ending with a filename.htm or html.

I opened the file in Visual Web Developer Express (VWDE) and proceeded to enter my content. VWDE has both a WYSIWYG and HTML development environment. Although HTML was useful for a couple specialized tasks, most of what needed to done could be accomplished using the WYSIWYG environment.

By midnight, I had a functional website with a smooth appearance ready to upload. Thanks to the tools of Open Source Web Design CSS and the free Web Developer download from Microsoft, I was able to go from ground zero to a complete site in under two hours. Check it out at http://ace.cte.umt.edu/tom.gallagher