Website Babble Webmaster Forums - View Single Post

James · #48 (**permalink**) 11-22-2008, 02:15 PM

Alana,

One thing to note is that there are always fixes to make and improvements to be made. Here are a couple of things I missed.

First, drop down to the line: <p>Sponsored Listings</p>
Change the <p> tags to <h2> tags: <h2>Sponsored Listings</h2>

Also, when we located the banner at the top of the page I used a method that did not work properly on the banner at the bottom of the page as it is now located so we want to change that (better than making the two different). In the style file change the .adbanner section, dropping the current margin line and inserting a text-align one as follows.

.adbanner{
text-align: center;}

Also, when I began to look at the footer for purposes of making an include I noticed right away that html had been used in the opening tag to center the footer. Let's fix it now.

Old form:
<div align="center" id="footer">

New form:
<div id="footer">

Then go to the css and add one line (text-align: center

to the #footer section:

As revised:
#footer {
padding: 10px;
clear: both;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
}

Using includes is relatively easy. Getting set up may be a little more challenging (not too difficult), but once it is done there will be nothing else to do with it.

There are several ways to use includes, but the one I will show here is through setting up using the htaccess file because you don't have to change your file extensions. It preserves the viability of previous links to your site.

Start by accessing your root folder with your ftp program and see if there is a file in there named "htaccess." Note that it has NO extension and you must make sure that yours does not when you upload it. Don't let your editor add a .txt or anything else.

IMPORTANT! I understand that with some hosts it doesn't show without them changing some settings. So make sure your ftp program, as Filezilla does, always asks before saving over an existing file if you do not see it. Or, ask your host about it.

With FileZilla, as with other ftp programs, you will also need to tell the program to "show hidden files" in order to see it. Just look under "view" and there is a setting for it.

If there is one, download a copy to work with. If there isn't, just make one. It is a simple text file (like html and css). There are absolutely no code elements or formatting associated with it. Open a text file in notepad (or NotePad) and name it htaccess.

So either begin with your existing htaccess file or create a new empty text file. Then at the top of this file put these two lines:

AddType text/html .shtml .shtm .htm .html
AddHandler server-parsed .shtml .shtm .htm .html

Even without this many (or most) hosts will work if you change all your file extensions to .shtml but this has problems associated with previous links, etc. If I were going to change all my extensions I would change to php and have all the advantages of php programming.

These two lines will enable all your .htm and .html extensions to work with includes.

Once this is done you are ready to use includes with your files. There are two formats you can use to "include" an external file but one only works when you put all the include files into the root folder so I will ignore it.

The form we will use allows putting the includes in a separate folder. If you have not done so make a folder named "includes" and put it into your root folder along with the "images" folder.

Here is the format we will use:



Making the includes is very simple. Make sure the codes you want are surrounded by <div> tags. This makes it easy to identify and protects you from mixing areas of the code. In most cases this will be already done and you will have it marked with an id or class.

For example, one of the areas you will want to set up is your header. In your html index file you will find:

<div id="header">
<h1 id="title">THE CHILDREN'S PARTY PLANNER</h1>
<h3>Everything you need to know to plan your children's party</h3>
<p><a id="headerlink" href="index.html">HOME</a>
</p>
</div>

All you need to do is copy this div, including the div tags, and paste it into a new file. Put nothing else into that file. Now save it with the name of "header.html" into your "includes" folder.

NOTE: Before going further you may want to save your index file as it is with a name like "masterindex.html" so that you can look at it when needed. One of the challenges of working with includes is that they show when on the host server but not when on your computer.

Next, replace the header div in your code with this line. Just cut out the code you placed into the include and enter this in its place:



Now all that is needed is to do the same with several other divs on the page. Any that you want.

There are two ad banners on your page, one at the top and one at the bottom. You can call them "adbanner1" and "adbanner2."





Next you will want to do the same with the footer div. It is easy to select and copy the content to a new file when you start and end with the div tag. Then, again, replace the footer div with the include:



Now looking at the end of your file, notice that you have the tracker section. Note that there are no div tags. While you would not have to do it, I would enclose the section in div tags and then procede as with the former sections. This will replace the section with another include:



Now simply do the save for the "navbar" and the "sidebar."




There is another issue that arises from the fact that the ad banner at the bottom is not in the content division. It extends into the right column, it seems, but is then not centered as it should be because it is wider than the content area. This is easily fixed by moving the end of content div up above the footer and ad banner.

Below is the end of the page as it now stands. The two div's are together ending the content and then the container. Just move the top one up above the footer and adbanner2 includes.

[Notice how I have used comment tags to identify the tags. I have found it helpful to use comments and only wish I had done it more when I go back to any of my older work. This is especially true of div's. They can easily get confusing to separate, especially when they are several layers deep.]

New code:
ornaments and more to remember that very first christmas. <img src="http://www.tqlkg.com/image-3234389-10368120" width="1" height="1" border="0"/></p>

</div>





</div>



</body>
</html>

This is the point to break. You don't have it on line yet, even worse you can't see it without putting it up, but let's get the work done to this point and then line up what to do next. Believe it or not it is "virtually" done.