Adapting CSS templates from freeCSStemplates.org with Dreamweaver
This tutorial takes a template from freeCSStemplates.org and adapts it for use on a personal website.
I've chosen to use "Professional", downloadable here, but the general idea should work for any of these free templates.
Note that these are intended for use on Blog sites and thus are arranged to handle "posts", "comments", and sometimes calendars that we may not need.
Download and unzip the template. This should result in a folder with all of the needed content. In my case, when I unzipped it, the result was a folder called "professional", which contained another folder called "professional", which in turn contained the content needed.
Copy the needed files. You will need: "index.html", "style.css" (or "default.css"), and any images in the "images" folder. You can safely ignore "license.txt" (and "Thumbs.db" in the images folder if you find it there).
- Rename index.html to _layout.php (that's right, use a preceding underscore).
- Copy _layout.php to the root of your site.
- Copy all of the images from the images folder to the images folder in your website. Note that you may be replacing these, but should copy them for now.
- Copy the .css file (style.css or default.css) to the root of your website.
- Here's what your site files should look like (I've expanded the images folder to show the images added from the template - you might have others as well):
Copy all CSS styles directly to _layout.php. _layout.php is the main HTML file, now changed to a .php file so some server-side code will work; style.css (or default.css) is the corresponding style sheet. Open both files by double-clicking them.
- Start by selecting and copying all of the code in style.css (Edit => Select All, the Edit => Copy).
- Next switch to _layout.php. Here look for the line that refers to the style sheet:
Delete this line and replace it with the following <style> tag. Copy exactly what I have here:
- Next, paste the code from the .css file in step one between the style tags above. You should now have the css code in the same file, and see something like this:
Once you have copied all of the CSS styles into _layout.php, you can delete style.css or default.css as it will no longer be needed.
Replace the menu. Look for "<div id="menu"> in the source code of _layout.php.
- Here, I've selected all of the "<li>" elements in the menu. These will be replaced. Note that the first "<li>" has a class, called "active". We'll need to know this for the next step, when we adjust the CSS above, since we'll be using a class called "selected" instead:
- Here', I'm pasting in the menu from the course website, found under Course Materials. This is actually the same for both vertical and horizontal menus, since this is only the HTML code (the CSS code determines the layout of the menu):
- We also need to fix the CSS Styles for "active" with "selected". Note that in some templates this is called "current_page_item":
combines as:
and
becomes
Divide your layout into parts. Now that we've created and edited _layout.php, we need to break it into "_top.php" and "_bottom.php" so that we ca reuse the design template on other pages without creating multiple copies of the template.
- Edit _layout.php: If you'd like the sidebar to be different on different pages in your site, you will be looking closely for "<div id="page"> and it's corresponding "/div>". if you would like the sidebar to be the same on all pages, you will be looking for "<div id="content"> and it's corresponding </div>. If you need help finding these "div" elements and where the close, view _layout.php in design view and use the string of tags at the base of the editing window to select the proper div (Here, I've selected the "page" div):
Once you've selected the div that contains the part of the template that will change from page to page, switch to code view. Here's you see that this div and it's contents are all select. Note where it starts and ends. - Add Markers: Mark the start and end of your "page" or "content" div with HTML comments. This will help you know where the top and bottom of the template end and start respectively.
In this case, I'm adding 3 lines of comments (all the same comment) between the end of the header and the start of the "page" div. Then I'm adding 3 lines of comments between the end of the "page" div and the closing div for "wrapper", which is just before the footer starts. The reason for 3 lines is to make it easy to find when scanning the code visually. This will be important when we make changes to _layout.php and need to copy and past the changes into _top.php and _bottom.php. - Create _top.php and _bottom.php: select and copy all of the code above the <!-- end _top.php --> coments, create a new php file called _top.php and remove any existing code, then paste in the code you copied for _top.php. Repeat this process for _bottom.php. Your files should now look something like this (I have index.php as well in this picture):
PHP Includes: The next step is create the actual pages of your site - the home page, perhaps the "bio" page, maybe the "media" page for audio and video etc. Since we have _top.php and _bottom.php, this process will be fairly easy. The key is the use of the PHP (red code) at the top and the bottom of each file. Here is the basic format (in code view) of each page:
We use "require_once", a php function for including the contents of another file.
We will repeat the process for other pages in the site, with the content between _top.php and _bottom.php changing for each page.
In the future, when we want to update our template, we will edit _layout.php and copy the top and bottom sections into _top.php and _bottom.php respective. This process can be repeated many times.