2006-11-30 14:39:55
New Site Design
It's been a long time coming, but I finally got a semi-working new site.I started a new job at Northrop Grumman on November 6. The project I will be working on is in the process of moving up here, so there isn't much to do yet. I've basically been studying for a Cisco cert, surfing the web, and a little coding. I decided to put my mind to use and make a new website. This time, though, I would make a _real_website. Instead of static HTML pages like I used before, I was going to make a site with PHP and MySQL. That makes more sense for a blog style design anyway. So for the first week or so I designed the db, entered the data into it, and started the coding to display the information. Once I had a plain text version working, I started on the visual design. This part took just as long. I started by making a the header graphic, which was pretty easy. Then I needed to choose the right fonts and get them to look right. That took longer. But eventually I had a nice header graphic.
Next was to design the physical layout of the page. I started with an HTML/CSS template to get everything looking right, then I incorporated it into the PHP code. Next up was the links to different sections of the site. I remember seeing translucent tabs on the old Mozilla site and liked that idea. So I decided to implement my own version of that. However, my version proved to be much harder. The Mozilla version (and other translucent tab examples) used a solid color background on which to set the tabs. My background, as you can see, is an American flag. So none of the examples would work correctly. I had to get a little creative; taking out all of the opaque colors on the tabs and using precisely sized "corner" images. Then, set the DIV opacity and I'm in business.
Next up was the left side links. I don't have much for there yet, but I could use some little "badges" to show pertinent information. So I got/modified badges for Linux (the hosting platform), Apache (the web server), MySQL (the database), PHP (the programming language), CSS (the style language), XHTML 1.1 (the markup language), and the Creative Commons License (to make sure people use content from my site appropriately). Everything looked great!
I thought that I should look at the site in IE to make sure everything worked. I previously made sure the template worked, which it did. But, with the addition of the left DIV, the tabs disappeared. I mean, the code was there, but the tabs weren't. I tried hiding everything I could to see if they were behind an element. No dice. The problem ended up being that IE didn't like the left DIV being floated. I had to position it absolutely, then the tabs reappeared. Weird, huh?
So anyway, I'm now working on an admin interface. I am making this post through the "New Blog Entry" interface. I still need to make the "Edit Blog Entry" and "Edit Section" interfaces. Those should prove to be rather rough. I mean, the actual coding to make that happen won't be, but the way I designed the site makes it hard to keep the chrome while doing postbacks. I'll have to think this one out a little bit.
After the admin interface comes the part everyone's been waiting for... comments!
Back