Help With Template Design - Page 2

alana r · #16 (**permalink**) 11-19-2008, 04:33 PM

thanks Lisa

thats what I thought, I cant understand what I am doing wrong

James · #17 (**permalink**) 11-19-2008, 04:41 PM

Alana

Open the index.html in your browser by just clicking/double clicking (however you are set up) and tell me what happens.

James

alana r · #18 (**permalink**) 11-19-2008, 04:42 PM

it looks fine in the browser

James · #19 (**permalink**) 11-19-2008, 05:25 PM

Alana,

Great. I got your message that it opens ok in the browser. That means the template and associated files are fine. It is a problem with Dreamweaver (setup or whatever).

Got to work on something else for at least a half hour so I will get back a little later. But this means we can use an alternate approach and go right on.

James

alana r · #20 (**permalink**) 11-19-2008, 05:27 PM

ok thanks

will look up dreamweaver settings online see if I can find anything

James · #21 (**permalink**) 11-19-2008, 07:23 PM

Alana,

Keep a few things in mind as we work through this.

First, if you don't like the way something is going or whatever, speak up. I'm flexible, and I don't want to be sounding as if I am telling you how it should be, just trying to help you get what you want and do it so your work will be easier later on, with css and includes.

Second, keep in mind that at first everything is going to look very weird. There will be strange combinations of css/content for a while that won't match up (combining your old site stuff with the new template), so don't worry about it. We will straighten it out in time. We need to get some content moved before fixing the css.

Third, I will try to explain everything as clearly as possible. I don't want to sound like I am talking down to anyone but I will try to be as simple and clear as possible, even if some things sound obvious.

Fourth, it may seem to make it take longer, but I want to explain why some things are being done as we go along. That way you will be able to follow through easier. I expect that after we are done with the home page you will be able to do the others easily.

As far as your editor is concerned, since you are not able to open the files like you want in your Dreamweaver we have to decide on an alternative before going further. I would suggest downloading the free version of NoteTab and take a look at it. It is very easy to use. But if you want to just get started, you can open the index.html file in Notepad and work on it there. If you do you will type each code by hand. Let me know if you want to start immediately using Notepad, if you want to check out another text editor like NoteTab Lite, or if by chance you have gotten Dreamweaver to work.

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

thanks James

I appreciate all you are doing here for me
I am open to any suggestions and advice you give me, I have downloaded note tab lite, I am a bit nervous about changing, I am still getting used to dw but Im willing to learn

alana r · #23 (**permalink**) 11-19-2008, 07:46 PM

sorry James

forgot about time difference

Its nearly 2 in the morning here so Im gonna have to go get some sleep!

I have downloaded notetab, so if there is anything you want me to do, if you just post it for me, I can try it in the morning.

Thanks

alana r · #24 (**permalink**) 11-20-2008, 05:59 AM

Hi
I found out this morning that my version of dw won't display the template in design view but that it dosent matter because it will still work fine if I just work in the code view, so if I am going to be doing it by code does it matter which I use?

James · #25 (**permalink**) 11-20-2008, 10:16 AM

No, it doesn't matter. NoteTab does have the shortcuts that you might like, but Dreamweaver probably does too. Use what you like. The rest of this post I wrote before getting your question so it assumes you couldn't use Dreamweaver and mentions NoteTab so you can just ignore those comments if you are not using it.

Alana,

First, to use NoteTab you don't need to know anything new to start with (it works a lot like notepad), but it will help you automatically in several ways. Most important, it will preserve what you write just as it is without any hidden formatting or anything. You just type, paste, copy, cut, etc. as you do elsewhere.

At the same time, on the left side you will see a column with short cuts. There is a dropdown box toward the top. Make sure it has HTML selected in it. Near the bottom of that column, in red, you will see a section named "Block Formatting." Scroll it up a little so you can see the items in it.

It will save you a lot of time to use a few of these and it is very easy. You can either click the item you want first and fill it in or type what you want, select it and then click and the item will be enclosed with the tags.

For example, click "paragraph block" and it will print <p></p> on the screen (a small menu may pop up about alignment, but if it does ignore it, leave blank, and click "ok." Now put your cursor in the middle and type or paste your paragraph. Or, as I often do, I just type or paste my paragraph on screen, select it with my cursor, then hit the command and it will put the marks in place.

The header command is the other one it will pay to use. When you click on it, it will pop up a box asking for a header lever, which can be numbers 1-6 with 1 already in the box. If you want a smaller header change the number and click "ok."

That is all you need to begin work. Most of what we need to do can be used just changing the content in the template, but using these two commands will help speed things up.

Now, open up your index.html file in NoteTab. You will need to decide on a way to work that is most convenient for you to be able to follow the instructions here. Either have two screens on line or print off this part to have it easily available to work back and forth.

The easiest way to do this will be to simply start at the top of the template and work our way down.

First you see these lines which are the doctype instructions.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

This is the easiest part. Just leave it alone. Every page needs one so the browser knows what version of html you are using. It must be the very first thing on the page. (You don't need to understand it. Check w3schools if you are interested. Most people just copy and paste and go on.

Next is the head section.

<head>

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://www.flat-stomach-exercises.com/favicon.ico" />

<title>Your Title</title>

<META Name="Description" Content="description" />
<META Name="Keywords" Content="keywords separated by commas"/>
<link rel="Shortcut Icon" href="/favicon.ico" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

Start by deleting the first two lines:
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://www.flat-stomach-exercises.com/favicon.ico" />

You have a favicon but this item is duplicated further down and we will insert yours at that point.

Then you have the title line:
<title>Your Title</title>
Simply insert your own title.
<title>the children's party planner</title>

Next we come to some meta tags.

<META Name="Keywords" Content="keywords separated by commas"/>

Simply change this by substituting your own key words inside the second quotes after "Content." The easiest way is to cut and paste from your old file.

<META Name="Keywords" Content="everything you need to know to plan your child's party with party ideas, party themes, docorations, party supplies, childrens costumes, party games and more"/>

The next item if one for your favicon. This line is exactly the same as your old line

<link rel="shortcut icon" href="/favicon.ico">

except for the caps. Actually, yours are the correct format. With xhtml you properly should use all lower case. You may want to copy and paste yours but it shouldn't be necessary.

If you save your file and open in a browser you will now see the new title at the top of your browser. The favicon will not show because it is only online. Everything else will still look the same as the template.

Break time: I am posting this now. Let me know (Alana) if you have any trouble to this point and when you are done. I don't want posts to get too long. I may get more up before you answer, though, so you can continue to work without getting back to me since we are dealing with different time zones.

James · #26 (**permalink**) 11-20-2008, 01:44 PM

Alana,

Although I didn't write it, I intended to indicate that the rest of the head should stay as it is. It identifies the style sheet location and has a style section where additional style elements just for this page could be inserted.

Continuing, in your old code you have placed google analytics and pageTracker codes between the head and body sections. Google instructions call for putting its code inside the body, at the bottom, just before the closing tag </body>. I do not know about pageTracker. If you intend to keep these I would copy them now and place them in the new template, but in the recommended location (at the very bottom).

</div>
[PLACE GOOGLE ANALYTICS AND PAGETRACKER CODE HERRE]
</body>
</html>

Now we are ready to begin work in the body of your page. Look at the first part of the code:

<body>

<div id="container">

<div id="header"><span class="style1">
</span>
</p>
</div>

The "container" div includes everything in the body, really, and the id is a code allowing the css to give styling instructions for everything in it. For example, width and margins are set now. We can adjust them after we get the content on the page.

Notice the header div. Again the "id" along with the "class" in the span are references in the css style sheet. Every page in your site will reference this same style sheet so you can change the header for your whole site by changing the style sheet. Includes can also be used to make changes on the whole site, but often you can do the same easier with css alone. We will look at your header when we get to the style sheet.

You are going to see that your whole html page is much simpler than before. For example, you can adjust spacing between paragraphs, size and color of fonts, etc. in the css. One command can change the size of paragraph fonts, for example, for the whole site. So you will only need to copy some parts from your old site into the html.

The next section to work on is the navigation.

<div id="leftnav">
<ul id="navlist">
<li><a href="http://www.thisisyourhomepage.com">Home</a></li>
<li><a href="http://www.yahoo.com">Links</a></li>
<li><a href="http://www.yahoo.com">Links</a></li>
<li><a href="http://www.yahoo.com">Links</a></li>
<li><a href="http://www.yahoo.com">Links</a></li>
<li><a href="http://www.yahoo.com">Links</a></li>
</ul>

You simply need to put in the link location and what you want the link to say. Since you have many more pages to link to, just copy more of the lines first, then change these two parts.

Notice that the tags used are for an unordered list <ul> and each line is a list item <li>. This is the best way to do the navigation. Later we can make whatever adjustments we want (mostly css) to make it look as you want with color, spacing, effects, etc.

Note: it is best not to mix htm and html file extensions. Either will work. Since most of yours are html I would change all to that. The problem is that you should then put a redirect for each one you change into your .htaccess file so anyone who has saved a link can find it. For that reason I will not change them now.

Also, your GIFTGUIDE.htm file is in caps. It is best to keep your files in all small letters. I would not change that either right now on the one you have but just follow a consistent pattern in the future.

Your new code for the menu will look like this:

<div id="leftnav">
<ul id="navlist">
<li><a href="index.html">home</a></li>
<li><a href="birthdaywishes.html">birthday wishes</a></li>
<li><a href="partyideas.html">party themes</a></li>
<li><a href="childrenscostumes.html">children’s costumes</a></li>
<li><a href="christmas.html">everything christmas</a></li>
<li><a href="toptwentytoys.html">top 20 gift ideas</a></li>
<li><a href="partysupplies.html">party supplies</a></li>
<li><a href="partyplannerrecipes.html">party receipes</a></li>
<li><a href="nobakerecipes.html">no bake kid’s recipes</a></li>
<li><a href="yourrecipes.html">your recipes</a></li>
<li><a href="partymenu.html">party menu</a></li>
<li><a href="decorations.html">decorations</a></li>
<li><a href="partygames.html">party games</a></li>
<li><a href="GIFTGUIDE.htm">gift shops</a></li>
<li><a href="partyessentials.html">party essentials</a></li>
<li><a href="partychecklist.html">party checklist</a></li>
<li><a href="mybooks.html">my bookshelf</a></li>
<li><a href="links.html">links</a></li>

</ul>

Your links will now have the default style of the template, including underlines. We can easily adjust these in many ways (spacing, color, size, underline, etc.) through the css.

The next few lines in the template just explain that you can use css to style the menu. We will delete this to get it out of the way.

Select the following and delete it from the template:

<p>The entire left column layout and color is controlled by the "leftnav" section on the style sheet. </p>
<p>The nav links above are controlled by the a leftnav, a leftnav, leftnav a:hover and leftnav ul section.</p>
<p>Play around with different attributes to see different results.</p>

This is a good place to close this post. Next we will work on the main content.

alana r · #27 (**permalink**) 11-20-2008, 03:46 PM

James

Sorry I didnt post, I was at work before you posted part 1 so I just got it now, am just home, will start working on it now and will post when it is done

thanks

alana r · #28 (**permalink**) 11-20-2008, 04:14 PM

Have finished them now, thanks

saved it and looked at it in browser, looks good

James · #29 (**permalink**) 11-20-2008, 06:11 PM

Alana,

Glad you like what you see, but don't worry about stuff you don't like. Everything will be easy to arrange (hopefully) later. The first step is getting the information into the template and to do so putting everything into the right tags.

Before going on the to main content, let's look at the code where we left off. You will find the next section (div) reads:

<div id="sidebar">
<p> This is where you put sidebar text. It's a great place for text and banner ads or news items.</p>
<p>Define the look and feel of this area by editing the <strong>sidebar</strong> section in the style.css file
that came with this template.</p>
<p>You can also adjust the color, height, etc. of this area if you wish.</p>
</div>

This "sidebar" div is actually the right column content. Leave the first and last lines (the opening and closing <div> tags with modifiers) and insert your ad material here. It is just one cut and paste. Start with:

<p align="center"><a href="http://www.paidonres...
and end with:
Unique Baby Gifts - Click here!"></a></p>

Be sure not to include the table tags from your old template. We need to take out the align="center" and replace with css but I will leave it for now (for looks).

Save your work and check the file by opening it in your browser. I have not mentioned it to this point, but I would save every few minutes (as with any work) and look in the browser to see what it looks like occasionally. Remember, save first. Then in the browser click the reload to update.

Now we can move into the main content area. Before starting to cut and paste it is important to recognize and follow a few guidelines. First and foremost always use tags only for what they are intended.

Use the header tags for titles of pages and sections, for SEO purposes but also for making it possible to use css to style more easily. For example, if each page has one header size 1 for the page title you could easily change the font, size, and other qualities even without adding id or class to the tags.

Use paragraph tags for paragraphs, obviously. Most of what is in this area will be in paragraph tags as they are in the old template. Use header 1 <h1></h1> tags for the title of the page and header 2 <h2></h2> tags for the section titles.

Do not keep any of the tag modifiers except for the anchor tags <a></a> or image tags <img />. Save those just as they are. If any changes are needed we will do it later. Delete any empty paragraph tags (<p> </p>).

You should end up with something like this. You need to paste this into the code immediately after <div id="content">.

<h1>Welcome to the Children's party planner</h1>

<p>The aim of this website is to help you plan your children's party, giving your children a day to remember. There are many different party ideas and themes to choose from, party recipes, decoration ideas, party games to play, party supplies
and much more!</p>
<p>Planning a party can be a lot of work, so try to make it as enjoyable as possible, let the children help with the cooking, its great for them to learn and it gives them something to do other than asking "is it time for the party yet?"
</p>

<p>The countdown to Christmas has started, the shops are filling with Christmas decorations and gifts but sometimes it can be hard to get into the spirit of it all. If you want to start feeling that Christmas spirit then its time to start planning your Christmas party! Kids love everything about Christmas and the wait for them can be so long, having a party can be just the thing your family needs! Check out the <a href="/christmas.html">Everything
Christmas</a> page, for party ideas, supplies and gifts.</p>
<h2>Birthday announcements
</h2>
<p>If your child/niece or nephew has a birthday coming up why not send a photo of them and a birthday message for our new <a href="birthdaywishes.htm">Birthday
Wishes</a> page so all your friends and family can check them out on
their special day!</p>

<h2>Stuck for Christmas or birthday
gift ideas?</h2>
<p>Why not <a href="http://www.dpbolvw.net/click-3234389-10476143" target="_top" class="linktext">Name
a Star</a> <img src="http://www.awltovhc.com/image-3234389-10476143" width="1" height="1" border="0"/>for someone special in your life, the perfect gift idea!</p>
<h2>Looking for something different and fun?</h2>

<p>Join the <a href="http://www.kqzyfj.com/click-3234389-10452625" target="_blank" onmouseover="window.status='http://www.hotelchocolat.co.uk';return true;" onmouseout="window.status=' ';return true;" class="linktext">Hotel
Chocolat Tasting Club</a> <img src="http://www.lduhtrp.net/image-3234389-10452625" width="1" height="1" border="0"/></p>

<p>I will be updating and adding
recipes frequently. If you have a recipe you would like to share I would
be more than happy to add it to the site. <a href="contactme.html" class="linktext">contact
me</a></p>
<p><a href="http://www.tkqlhce.com/click-3234389-10368637" target="_blank" onmouseover="window.status='http://www.santa-claus.com';return true;" onmouseout="window.status=' ';return true;">
<img src="http://www.awltovhc.com/image-3234389-10368637" width="468" height="60" alt="Wow! A Letter From Santa" border="0"/></a></p>

<h2>Sponsored Listings</h2>
<p>Looking for great educational toys?
Choose <a href="http://www.anrdoezrs.net/click-3234389-10399745" target="_blank" onmouseover="window.status='http://www.kazootoys.com';return true;" onmouseout="window.status=' ';return true;" class="linktext">KazooToys.com.</a>
Shop by type of toy, age range, and price.<img src="http://www.tqlkg.com/image-3234389-10399745" width="1" height="1" border="0"/></p>
<p<a href="http://www.dpbolvw.net/click-3234389-10476143" target="_blank" onmouseover="window.status='http://www.starregistry.com/';return true;" onmouseout="window.status=' ';return true;" class="linktext">Name
a Star</a> <img src="http://www.tqlkg.com/image-3234389-10476143" width="1" height="1" border="0"/>
</p>

<p<a href="http://www.kqzyfj.com/click-3234389-5528002" target="_blank" onmouseover="window.status='http://www.iseeme.com';return true;" onmouseout="window.status=' ';return true;" class="linktext">Click
here for high quality personalized children's books</a> <img src="http://www.awltovhc.com/image-3234389-5528002" width="1" height="1" border="0"/>
</p>
<p<a href="http://www.jdoqocy.com/click-3234389-10433715" target="_blank" onmouseover="window.status='http://www.hotelchocolat.co.uk';return true;" onmouseout="window.status=' ';return true;">Special
Offers from Hotel Chocolat</a><img src="http://www.ftjcfx.com/image-3234389-10433715" width="1" height="1" border="0"/></p>
<p class="maincontent"> <a href="http://www.dpbolvw.net/click-3234389-10285524" target="_blank" class="linktext">Irish
Shopping - The Premier web site for Irish Gifts, Jewelry and other Items
</a> <img src="http://www.awltovhc.com/image-3234389-10285524" width="1" height="1" border="0"/></p>
<p><a href="http://www.anrdoezrs.net/click-3234389-8829216" target="_blank" class="linktext">Buy
One Get One Free on Selected Toys</a> <img src="http://www.ftjcfx.com/image-3234389-8829216" width="1" height="1" border="0"/>
at Argos</p>

<p<a href="http://www.dpbolvw.net/click-3234389-10530095" target="_blank" class="linktext">TinyRide</a>
- See the latest, most innovative strollers and car seats. Free Shipping
On all orders over $100. <img src="http://www.ftjcfx.com/image-3234389-10530095" width="1" height="1" border="0"/></p>
<p><a href="http://www.tkqlhce.com/click-3234389-10567349" target="_blank" class="linktext">Shop
all the award-winning building sets from the official Lincoln Logs online
store.</a> <img src="http://www.awltovhc.com/image-3234389-10567349" width="1" height="1" border="0"/></p>
<p><a href="http://www.kqzyfj.com/click-3234389-10567088" target="_blank" class="linktext">See
all the K'NEX Special Offers</a> <img src="http://www.awltovhc.com/image-3234389-10567088" width="1" height="1" border="0"/></p>
<p><a href="http://www.tkqlhce.com/click-3234389-10368120" target="_top" class="linktext">First Christmas</a> Gifts, books, clocks, music, clothes, 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>

<p align="center" class="copyright">©2008 thechildrenspartyplanner,
<a href="contactme.html">contact webmaster</a>, <a href="links.html">links</a></p>

This will be all for this post.

alana r · #30 (**permalink**) 11-20-2008, 06:35 PM

hi

have finished doing that, think i got it right

thanks

WB Sponsors