Redesigning Pages with Cascading Style Sheets

As I’ve posted before, much of my summer project includes creating a mini-site for a new class I will be teaching in the fall:  Introduction to Physics.   I hadn’t really bothered much with the under-the-hood design of this page, because my main purpose was actually to relearn physics.  To that end, I spent time going through chapters, finding resources on the web and creating powerpoint presentations.  Posting this information at https://www.biologycorner.com/physics/ was more of an afterthought or a way to organize all of that information.   I did what I have always done to create a page:  that is, find a theme or template that would work and use {tables} to design the layout.

A few days ago, I found out that my AP Biology class would be returning in the fall.  (We had cancelled this class last year due to low enrollment.)   I was thrilled to have this class open up for the 2010-11 school year.  I didn’t panic, since I had all of the resources for the class from past years, all I would really need to do is check the pages, check the documents and make sure everything was updated and no links were broken.   Should be an easy task and then I could get back to working on the physics site.

I couldn’t have been more wrong.

As it turns out, using tables as a layout tool for web design is wrong.  The pages I made in 1996 are using tags and features that are now deprecated (meaning that browsers should continue to support these tags and attributes, but eventually they are likely to become obsolete.)   Tags like <center>  and <p align left> are deprecated tags.    Since I made the majority of the site’s pages in the late 90’s, they need a major overhaul to fix.   It reminds me of when I took my  old ford ranger to the shop to get an air conditioner recharge – 500 dollars later, we have recharge, new hoses, brakes …etc.

I started on the AP biology pages, labeled in the menu as Bio 3A and Bio 4A .  Even the name of the course is wrong because I got AP certified last year (ironically, for a class that was cancelled).   I’ve now spent the last few days, redesigning this section of the website.  It has been a painful process, mainly due to my lack of familiarity with cascading style sheets.

Is it worth it?   I haven’t decided.   I think for new pages, I will try to make them W3C Compliant.  Which means, that the AP Biology pages that I’m redesigning will be using css styled floating elements rather than tables.   Dreamweaver is making this process a little easier, and most of my time was spent learning how to do things that were normally pretty simple.  I spent a whole day learning the difference between an ID and a CLASS.   And how to use these tags to do simple operations like change the font or the alignment of the text.   This further  illustrates perfectly why I do not recommend new teachers try to create websites from scratch.  Once you get under the hood to try to create something, the job inevitably ends up much bigger than you expect.

If you are however, already the owner of an aging website and you also need to fix your deprecation problems, I do recommend Adobe Dreamweaver, and you can even get an educator discount for it.  Don’t waste time trying to play with it to figure stuff out right when you open the box, it’s not that user friendly, so go straight to the tutorials.  I found “Designing with CSS” by Adrian Senior very helpful for teaching me some of the basics (like the difference between #tags  and .tags).

Also, I should mention that last year, I turned the main part of biologycorner.com  into a wordpress themed site.  This is still working great,  for styling my pages and organizing menus and galleries.  I still use dreamweaver for styling the individual pages that students (and other teachers) can access and print.    While I could alternatively paste these pages into content pages of wordpress, I prefer to have them stand alone:  they load faster and are easier to print and edit.   I love wordpress, but it has its limitations.  Taking all of the /worksheets I have and making them into wordpress content pages would probably be more painful that learning how to use stylesheets and leaving them as simple html documents in their own folder.

***As if to really reinforce my decision to have the pages stand-alone, while I was writing this article, my entire database attached to wordpress became nonfunctional.  The site wouldn’t load and all that you could see when loading biologycorner.com was a text sentence that said: DATABASE ERROR.  It was quite intimidating and the database isn’t really something I have delved into.  I put in a ticket to my hosting service to fix it.   Luckily, while the site’s index page and wordpress files were nonfunctional. I could still go into other directories not tied to wordpress like the intro physics page and still access files there and in other directories.    In other words, I don’t like having all of my resources tied to a database I don’t understand and cannot fix without outside help.  HTML (with or without cascading style sheets) is a beast I understand. ***

To summarize:

1.  Old websites will need a major overhaul to remove deprecated tags and become W3C standards compliant and valid

2.  Bio 3A and 4A is an old website that is non compliant

3.  Learning Dreamweaver and cascading style sheets is time consuming and headache-making, but a necessary evil

4.  Advanced Placement  Biology (its own mini-site) will be unveiled within the next couple of weeks

5.  Over the next few months, worksheets will be given minor tweaking to make them compliant also

6.  The engine running the whole of biologycorner.com is wordpress, which manages menus and galleries and links.  Individual worksheet pages (lessons) will remain separate .html documents.