The way that I originally created my website was by creating a template in Dreamweaver, and creating a new page based on that template for each new web page. Dreamweaver automatically updates any page based on a template when that template is saved. Thus, every page had it’s own coded copy of the header, the sidebar, and the footer. I figured out that all this does is create a lot of unnecessarily repeated code. So I decided to try something else.
I created a new sub-domain, dynamic.testing.thetoothpick.com, and deleted everything on it. I created “index.php,” and started coding the layout. I wanted to do this entirely by coding (not using Dreamweaver’s layout feature), because it’s a lot easier to get it to do exactly what you want. I still used Dreamweaver (it’s got a pretty a pretty advanced coding setup), mainly because of the integrated FTP directory synchronization. Also, I decided to go with div tags instead of tables (they’re just easier to work with, although arguably harder to center).
I put in the first two div tags, for the header and the title, and then the div tag for the main part of the page. I created a div tag within this for the sidebar (I floated it on the left), then put in the div tag for the actual page content (I floated this on the right). I made a clearing div tag after this (still in the larger container), and closed the container tag. Then, I made the div tag for the footer.
In properties.css, I made a rule for the div tags in the main column, gave them a width of 740 (not sure why that number, it was the one my table layout used), made both margins “auto” (effectively centering the column on the page). I then made individual rules for each div tag (I used the main column rule as the class, and the individual rule as the id). I put things like background in each individual rule, and, in the rule for the clearing div, I cleared the floats on both sides.
Clearing the floats in the clearing div made it so that no matter how long the sidebar or main content is, the container would encompass both of them. However, if the main content was longer than the sidebar, there would be a gap between the end of the sidebar and the footer. So I made a image that was as wide as the sidebar, one pixel high, and the same color as the sidebar background, and made this the background of the main content div (as well as left aligning it and setting it to repeat on the y-axis).
Now for dynamically getting the page title/content. I made a directory called “pages,” and made .php files for each page. In the root folder, I made function.php, and in that a function that compared the $page variable passed to it (which was set in index.php to the value of $_GET['p']) to values stored in an array, which defined every page I had created, and returned true if it matched a value. I called this in another function, which would include “/pages/$page.php” if $page was a valid page. I also made another function, that returned the value of $pages[$page] ($pages is the array of defined pages), again, if $page was a valid page. I also made provisions for if the requested page isn’t defined. That way, I could set $title to getTitle($page), echo $title in the title of document and underneath the page header, and simply call get($page) in the main content area. I also included files for the sidebar and footer, so I could easily update them without changing the whole page.
I tested it out in IE, and it looked perfect (well, exactly like it had before). So I sent it to my friend. She mentioned a gap between two of the div tags (where they didn’t meet). That was when I realized I hadn’t tested it in Firefox (or Opera, for that matter, or Safari). I looked at the page in Firefox, and, sure enough, there was a pretty noticeable place where the div tags didn’t meet. In Opera, same thing, but a different place. I went into the CSS, and put borders around every div tag, just to see where one ended and the next began. I went back, and in both browsers, there were pretty big borders, but no gaps. So I tried putting borders around just the affected div tags, and the same thing happened. I made two new CSS files, one for Firefox, and one for Opera, made a border around the top and bottom of them, and changed the color to the color of the rest of the div tags (#006600), and put php if statements around the two statements importing them (if the browser was Firefox, import firefox.css, same for Opera). I asked my friend too look at it again, and she said it was fine. I checked in both Firefox and Opera, and it looked fine in both.
So, index.php is now 33 lines, as apposed to 120. And I only need one copy of every line. I can also link to other documents with /?p=sites, not /sites.php.
Oh, and by the way, the site described here is now what you see when you go to http://thetoothpick.com.
