Help With Template Design - Page 4

James · #46 (**permalink**) 11-22-2008, 12:20 PM

Don't feel rushed by me. You should work at your own pace. You have really been moving fast, I think.

I know it is new for you. But you are trying to do it the right way and that is why I want to help. My goal is to help you learn what is going on so you can do it more easily for yourself.

Post 7 will probably go pretty fast, so I may get post 8 up sometime today. You will be happy, perhaps delighted, to hear that it is essentially the last one!

And your includes are almost done already. You will basically just cut them out of your existing page and point to them more or less as you do with links.

James · #47 (**permalink**) 11-22-2008, 01:26 PM

You are going to be happy with the results you are getting.

I will put up the next post in a few minutes. Then, after we get you up and running we can look for problems. If you need to ask questions be sure to do so. This last part, other than the includes especially, are jumping all around so it would be easy for me to leave something out.

Your final result looks terrific. The basic page is all includes except the head where you put in your title, etc., and the one content div!

When you want a page you can just pop up your template and add content.

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.

alana r · #49 (**permalink**) 11-22-2008, 04:23 PM

thanks James

Am not long in from work
going to start on post 7 now, I had a read through post 8 and it seems a bit complicated so I will post if I get stuck if thats ok, will see how I go anyway,

"You will be happy, perhaps delighted, to hear that it is essentially the last one!"

Not at all! I have really enjoyed learning from you, I have looked forward to finishing work and coming home to get started with the posts so Thank you again James, I now realize how difficult it would have been to continue with my site the way I had it set up.

alana r · #50 (**permalink**) 11-22-2008, 05:49 PM

ok
I have most of post 7 and 8 done

I had one problem re:

"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."

Ok so the problem is I dont know anything about my ftp program, so I followed your instructions the best I could, (so please tell me if I did it wrong) so what I did was go to my host and found the ftp icon, went into it (called webshell) and looked for htaccess file, I didnt find one,
I set it to show hidden files and there still wasn't one so I made one with notepad and added the two lines, saved it as htaccess in the folder that I have saved the images folder etc.

evetything else went ok I think (hope)

James · #51 (**permalink**) 11-22-2008, 06:38 PM

It looks to me like you did fine. I can't see any problem at all. When I first did mine there was none in it either. Unless you had put one in it I don't know any reason for there to have been one unless you bought a previously developed site or something, but people always warn about the possibility.

There are several other good uses for this file. One is to redirect files. When I changed from html to php I put my old file names with a redirect to the new ones with the .php extensions. Another use is to write your own files for things like the 404 message.

Good work.

alana r · #52 (**permalink**) 11-22-2008, 07:03 PM

ok thanks

not sure where I go from here though

Theres a few things I am confused about maybe you would know? I dont want to be taking up all your time though so if not thats fine you have been a great help to me already and I reallly dont know how to thank you enough!

ok here are the bits I am confused with

obviously I have a site up already and I will be working on remaking all the pages with the new setup before I have to worry about this - but I dont know how to take the old site off the net to put the new one on when its done

also the htaccess file I just made, do I just put it up when I am putting up the new site up or do I have to do something else with it first?

oh and I didnt make an include for the right sidebar because I will want to display different relative ads on different pages eg food ads on the recipe pages etc, does that matter that I didnt make one or should I have

by the way I showed the new index page to my familly and they all think it looks much better!

James · #53 (**permalink**) 11-22-2008, 09:53 PM

Alana,

First, a look at your questions.

As for the htaccess file, that is the easiest. You need to do nothing. Ever (unless you want to add things like a 404 redirect which I admit I haven't gotten around to myself, but should; it would be nicer to have people find a nice looking page with a link to your home page instead of a sorry, not found).

What you have put in the htaccess can just stay there. It tells your site that you want it to look for includes when it loads files. Now you can put includes on any page you load, and if it finds the include as directed, it will load it into your file.

It is very easy to take down your old files. Really, unless you don't have some of the information (and you should have your backup files anyway) you can just go to the site through your ftp and delete anything you don't want there instead of downloading. For example, you want to leave the htaccess file. But you can just delete everything you don't want and then upload your new files.

As far as making an include of the sidebar, it is naturally up to you. If you are going to use one on several pages, make an include for it. You can name them sidebar1, sidebar2.....and so on and have several. Or if every page will be different just leave it on the pages and make no includes. It is all up to what you think will work best for you. You can put the code of some pages and put the include on others. Just because something is on one page doesn't mean you have to use it on others.

It is good that you are thinking about making these choices because there are lots of ways to do everything. You want to do it the way that is best for you.

If you do several sidebars, say three or four, and name one file sidebar1.html, for example, you would then use that name in the include statement, but you would not change the class name on the div tag in the code for it. That would stay the same. The width of the column, etc., is the same on all your pages so you want to be able to change all sidebars in that way and not need several css statements. (Forgive me if that sounds too obvious.)

What to do next? There are just a few things that relate to the process. First, your index page is complete. If you are having any problems with your work let me know.

For your template there are two ways to go. When you look at the index page there are only two sections left that are not includes (three if you do not do the sidebar). If you want you can make a separate template. Just take a copy of the index page and remove the information in the content section and sidebar, if applicable. Be sure to leave the div tags, however, and everything else like all the includes.

You cannot remove much in the head, but you can remove the specific information that has been inserted. Just put things like [INSERT PAGE TITLE HERE].

Personally, I just use a copy of the index or other page, and make the necessary modifications. A lot of the head information can often stay the same and the page layout gives me suggestions and even some layout help. For example, I can just select the page header one (leaving the tags) and type in my new title. Then select and delete as I go along. Follow your own preference.

A little adjustment or two to make on the sidebar would help. As you go along you will find little things to fix and improve in your site that I did not focus in on. There are not many I hope, but some. For example, here is one that bears fixing and will only take a minute. Look at your side bar.

Look at the end of the first entry: ...Free Delivery"/></a> </p>. The   is code for a space. Then notice the beginning of the next entry (<p> <a href="http://www.paidonresuand...">) and those after. There is another   there. The net result is that the first item is not in line with the others in the column. All are centered, but the centering includes the extra spaces (a net of two on the combination).

All of these  's need to be deleted. Whenever space is needed on the sides or top of anything css "padding" should be used. For example, I think that it wouldn't hurt to put just a little space above the sidebar so it will not be so close to the google ad.

Old:
#sidebar {
padding: 10px;
float: right;
width: 160px;
text-align: center;

New padding line:
padding: 20px 10px 10px 10px;

Replace the padding statement in the first line with the new one. This puts 20 pixels on top instead of ten, then ten on the right, bottom and left. This small adjustment does make a nice improvement.

Good success with your site as you go forward. You will still have plenty of work bringing in the content from your old site, but it will be so much easier to work with in the future. You only need to work on the content div in each page. Everything else is done. For every page you have and for all you will ever make. What great news.

Let me know if I can help.

James · #54 (**permalink**) 11-23-2008, 09:22 AM

Alana,

Did you get the ad section straightened out? In your post you said change "a" instead of "#" to "." so I don't know if that is just a typing error or what.

Quote:

The website looks good - only one thing, the bottom google ads still start at the left. I have changed the "a" to "." in the style sheet so I don't know why?

both ads need the class="adbanner" and the style sheet needs to include:

.adbanner{
text-align: center;
}

mirage2009 · #55 (**permalink**) 11-23-2008, 02:37 PM

James you are a great teacher, and Alana you really are getting good.
GOOD JOB TO YOU BOTH

alana r · #56 (**permalink**) 11-24-2008, 03:37 PM

James

By the way - I will not be changing the file names after all

thanks

James · #57 (**permalink**) 11-24-2008, 07:43 PM

Alana,

There is one problem with the template that has arisen. Because the left and right columns float from the middle column (which is fine), if either the right or left column happens to be longer than the center column and there is anything intended to be below that, as in this case, alignment is thrown out of whack and some items overlap.

The solution is fairly simple. First, put anything intended to be at the bottom of the page inside a <div>. Then put an entry into the css to clear that div from anything on either (both) sides. In this case there are two items for the bottom of the page (actually three, but one is even below the "container" div), a tracking code. The two are the footer and a google ad that is wider than the content column.

Our code should be as follows:

For the html,

</div>

<div id="bottomarea">


</div>

</div>

For the css,

#bottomarea {
clear: both;
}

With this addition, the bottomarea div will drop below the lowest area on either side column.

DTB · #58 (**permalink**) 11-24-2008, 08:25 PM

James, been following this thread. Man, let me just commend you for being so helpful. I learned a lot just by reading some of your replies.

alana r · #59 (**permalink**) 11-25-2008, 04:09 PM

Thanks James

Just home from work, will get working on it now.

Will I put it on every page or just the ones that there is an issue with?

James · #60 (**permalink**) 11-25-2008, 06:44 PM

It is safer to put the clear code on all pages as a matter of habit.

If you make it a part of your templating process you never need to think about it. If you don't, you always have to be thinking about how long your columns get when you make changes and whether you have it on that page.

As long as the content column is longer it won't have any affect so it won't hurt for it to be there.

WB Sponsors