# newbie Building website



## skyhigh007 (Jun 17, 2004)

Hi

I'm trying to build a website and I'm not sure about the concept. I have a question: Lets say if I have 5 individual pages include index page and I put 4 links on the index page to link to those 4 pages. How do you keep the header and footer page in the index page constant through out all other pages. Ex: when someone clicks on the link, the header and footer will be the same and only the body will change ?

Thank you


----------



## tomdkat (May 6, 2006)

You can use frames to accomplish this OR you can simply make the other 4 pages exact copies of index.html (so that the header is the same) and then change the content on the other 4 pages as appropriate. In other words, create index.html first and use it as a "template" of sorts for the other pages.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

By the way, I'm using PHP and MYSQL. How are you going to accomplish that ?


----------



## tomdkat (May 6, 2006)

MySQL doesn't matter nor does PHP unless you will be creating the pages using PHP. One thing at a time. 

First, what do you want your site to do? Please be as specific as possible. 

Peace...


----------



## harrysmith (Oct 15, 2007)

Using PHP you can create dynamic pages and if you are going to create basic static site then there is no need to for going with PHP at this stage.
Using CSS you can develop your site easily and can modify/change easily.


----------



## namenotfound (Apr 30, 2005)

harrysmith said:


> ... and if you are going to create basic static site then there is no need to for going with PHP at this stage.


He could still use PHP to make the work easier. Put the header and footer (and anything else you want to be on every page) in their own files (text, html, php, doesn't really matter). Then give each page the .php extension and put in this where you want to include those things:

<?php require_once('header.php'); ?>

Change "header.php" to whatever the file is you want to include.

That way if you make a change to the header, it is made on ALL the pages. This saves time over having to edit each page manually just to change something in the header.


----------



## skyhigh007 (Jun 17, 2004)

sorry for not being clear. I want to create an dynamic website. For example, I have index.php, info.php, contact_us.php, and shipping.php. On the index.php I have links for all those individual pages and Within the index.php I use header.php and footer.php. If I click on the contact_us link and links to the contact_us.php, How do I use the Header.php and Footer.php in the index.php for all new pages that I create ? Do I have to add those two Header and Footer files in every new page that I create or theres a way where I can just add once and it will be used through out the website ?

I know there's a function called include in php but how do i apply to this ?


----------



## namenotfound (Apr 30, 2005)

Two methods:

1, yes add the includes in every page.
2, put ALL the content in index.php and use switches to switch between "pages".

Example of option two.


```
<?php
/* Header info here */

switch ($_GET['page']) {
case 'info':
    require_once('info.php');
    break;
case 'contact':
    require_once('contact_us.php');
    break;
//etc.
}

/* Footer info here */
?>
```
You're including the other pages BETWEEN the header and footer of index.php
You call the pages like so: *yoursite.com/index.php?page=info*

Obviously, since index.php is an index file, it can be omitted from the url and the link will still work, as such: *yoursite.com/?page=info*

I prefer method one, because I think those query string urls look ugly. Although you can make them "pretty" with RewriteRule in .htaccess, but it's just more work for the server.
Method one would produce "normal" urls, since you're calling the page itself. *yoursite.com/info.php*


----------



## skyhigh007 (Jun 17, 2004)

If I add the Include() Dont I need to set the path in the php.ini file ?


----------



## namenotfound (Apr 30, 2005)

No, you can put the path in the include.

Example:

<?php include('/public_html/user/home/contact_us.php'); ?>

Obviously replace that with the real path of your file.


----------



## skyhigh007 (Jun 17, 2004)

Hi
I've change my mind and I want to use HTML and CSS instead of PHP, How can I accomplish that by using HTML and CSS ? Do I really need to copy header and footer code in each page?


----------



## namenotfound (Apr 30, 2005)

skyhigh007 said:


> Hi
> I've change my mind and I want to use HTML and CSS instead of PHP, How can I accomplish that by using HTML and CSS ? Do I really need to copy header and footer code in each page?


Yes, either that or use frames. (frames are ugly and considered unprofessional)

OR, you can use server-side includes with HTML, first change your .html file extensions to .shtml then where you want to include stuff, put



You'll have to put that in every page, but the end result is that if you ever need to edit the header, you only need to edit it once and the change is done on all the pages.


----------



## Susie N (Mar 22, 2003)

This is very simple to do with HTML and CSS. And trust me, once you've messed with the site a few times and had to change the wording on every single page for something in your navigation (for example), you'll definitely want to learn how to use PHP includes.

Anyway, as mentioned previously, just create a basic template for your general layout that you can copy and paste into each new HTML page. Then all you need to do is change the content for each page. Doing it this way will allow the navigation, header, footer, or whatever to stay in the same place on each page.

Here's a very generic example of the HTML framework you could use:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Your title here.</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="wrapper">

<div id="header">
navigation can go here
</div> <!-- end #header -->

<div id="content">
you could put general content here
</div> <!-- end #content -->

<div id="sidebar">
obviously, this is the sidebar 
</div> <!-- end #sidebar -->

</div> <!-- end #wrapper -->

<div id="footer">
and your footer 
</div> <!-- end #footer -->

</body>
</html>
```
Then you just need to use CSS to style and position each of these elements and anything you put in between. If all you change from page to page in this example is what goes into #content, then everything else will be identical on the rest of your pages.

One note: I like to use HTML comments ( ) to show the ends of divs as in my above example. Sometimes you can get so many divs going that you don't know which goes with which div.

Hope this helps!


----------



## skyhigh007 (Jun 17, 2004)

Use your example provided in the above, So for every page that I want to create, I have to copy the whole file and change the content in the middle? That means I'm duplicating all the files except the middle content.


----------



## skyhigh007 (Jun 17, 2004)

OMG! I just did what you told me and this is sad. Is this safe in terms of security?


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> Use your example provided in the above, So for every page that I want to create, I have to copy the whole file and change the content in the middle? That means I'm duplicating all the files except the middle content.


At least as a starting point. Once you have the site functioning the way you want, you can explore refining it by converting to iframes or PHP or whatever.



skyhigh007 said:


> OMG! I just did what you told me and this is sad. Is this safe in terms of security?


What do you mean?

Peace...


----------



## Susie N (Mar 22, 2003)

I agree. It's just a very, very basic starting point. Perhaps once you have your navigation set up, you could learn to use a PHP include so that if you ever need to change something in it, you're not having to wade through 20 pages just to change one little thing on each page. You could just edit the one navigation file.

And I don't understand your question about security, either. Yes, it's safe to do this. I highly recommend using Firefox and installing the Web Developer's Toolbar. With it, you can view the HTML and CSS of any website. You'll see that the code is repeated over and over on each page and that the content is the only part that changes.


----------



## namenotfound (Apr 30, 2005)

skyhigh007 said:


> Use your example provided in the above, So for every page that I want to create, I have to copy the whole file and change the content in the middle? That means I'm duplicating all the files except the middle content.


You could use my example if .shtml to make it a little easier.
It's really going to be a pain to edit every single page every time you want to add or remove something from the header.


----------



## skyhigh007 (Jun 17, 2004)

Thank you all for the Suggestions. I have another question. I want to put a big long rectangular picture in the content area of the website (width is 800px), width two arrows on the end of the left and right side of the picture, so users can view the entire picture by clicking on the arrows. Are there any scripts available for that or theres another way to do it ?


----------



## tomdkat (May 6, 2006)

Here is an example of a script that will scroll from top to bottom, in the manner you describe. Maybe this script could be tweaked to scroll from left to right.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Thank you for the script. Some how it wont let me change the content box to a bigger one.


----------



## tomdkat (May 6, 2006)

Can you post a link to the page that uses the script? I've used that script on another site and in content areas of different sizes.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Would it be a good idea if I created the template in photoshop and save it as an Gif file, then set that Gif as a background. So, all I have to do is to position the rest stuff on that gif .


----------



## tomdkat (May 6, 2006)

IMO, yes and no. Working up the template in PhotoShop would make it easy for you to let us know how you want the site to look so we can help you code the HTML to get it looking the way you want (visuals help a LOT). On the other hand, I'm not a big fan of using graphic or image tools to design websites. I know someone who does that for practically EVERY site she's designed and at some point she always has a problem getting it working just the way she wants because she never learned the HTML aspect well enough to make the site actually function.

Once we have an idea of how you want the site to look, we can see about developing it using HTML/CSS/whatever. 

Just my two cents. 

Can you post a link to the page with the script that's having problems so I can take a peek?

Peace...


----------



## skyhigh007 (Jun 17, 2004)

I didn't install the script that you have provided because it wont let me change the width more than 300


----------



## tomdkat (May 6, 2006)

If you either post the HTML you've got now or a link to the page hosted somewhere, I can grab it and see what the script is or isn't doing.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Is there a rule of thumb for when to use and ? Under what condition you have to use DIV ID and use DIV Class ? I have seen people use many IDs and Classes on a single page .


----------



## namenotfound (Apr 30, 2005)

skyhigh007 said:


> Is there a rule of thumb for when to use and ? Under what condition you have to use DIV ID and use DIV Class ? I have seen people use many IDs and Classes on a single page .


Well I guess you don't *need* to use ID, as far as CSS is concerned. There are some HTML needs for it, for certain elements and functions.

CLASS is your standard "add this CSS style to this element".

The main difference between the two are: You can only use a *unique* ID *once* per page.

Example

Hello World

Would be ok.

Hello World

Would NOT, because you're using the same ID in the same page.


----------



## skyhigh007 (Jun 17, 2004)

Thank you


----------



## skyhigh007 (Jun 17, 2004)

I'm at the stage of making an tabbed multi stages horizontal navigation bar for the website. The thing is I want 3 stages, not two stages. I want to have up, rollover and down stages. The initial display would be up stage and when someone clicks on one of the buttons, that button gets the down stage and the rest displays in up stage. Do you really have to use javascript to get it done or you can write it in css ?


----------



## tomdkat (May 6, 2006)

You can do menus in CSS but some might prefer using JavaScript since the CSS can get complicated to accomodate IE, unfortunately.

Check out this site for great examples of cross-browser CSS menus.

Peace...


----------



## tomdkat (May 6, 2006)

namenotfound said:


> Well I guess you don't *need* to use ID, as far as CSS is concerned. There are some HTML needs for it, for certain elements and functions.
> 
> CLASS is your standard "add this CSS style to this element".
> 
> The main difference between the two are: You can only use a *unique* ID *once* per page.


One use of an ID is to apply a style to a single element that is already of a particular element class.

Peace...


----------



## namenotfound (Apr 30, 2005)

tomdkat said:


> One use of an ID is to apply a style to a single element that is already of a particular element class.
> 
> Peace...


Yeah I know, but I was being as simplistic as I could be in my reply, since he's a beginner at CSS.

You can also double up on classes, example:

Then that gets the styles of both _style1_ and _style2_.


----------



## skyhigh007 (Jun 17, 2004)

What I want to accomplish is same as the http://www.barnesandnoble.com/
Barnes and Noble navigation bar. When you rollover the books button, it has a different color or graphic and then you click on the Books button it displays another color or graphic and the rest displays the initial stage color or graphic.

How do you achieve that by using CSS ?


----------



## namenotfound (Apr 30, 2005)

Are you familiar with a:link, a:hover, a:active, and a:visited?

Basically "a:hover" is the effect of links when you mouse-over them. You can probably figure out the other meanings based on their name.

You can add a background image (which is probably what B&N did, I didn't check)

Example:
a:link {
background-image:url('regularbook.jpg');
}
a:hover {
background-image:url('rolloverbook.jpg');
}

That will cause the "regular book" image to change to the "rollover book" image when you place your mouse on the book.


----------



## skyhigh007 (Jun 17, 2004)

I know what rollover, link and visited are and I know how to how it works. but My question is how do you change the image when someone clicks on that button, not rollover?


----------



## namenotfound (Apr 30, 2005)

That's what *a:active* is

"active" means when you click the mouse button. The effect lasts as long as the button is pressed. A short click = 1/4 second effect. Long held click = effect lasts longer (obviously since they're holding the button down).

Does that help?


----------



## skyhigh007 (Jun 17, 2004)

I tried the a:active and you have to press down the button to see the that image. is there any way where you dont have to hold down the button and just click it and it will stay that way?


----------



## namenotfound (Apr 30, 2005)

Oh, well that's a:visited

(you said you knew what visited was)

a:visited effects links that you already clicked on in the past. Once you click on a link, it keeps the effects of a:visited until you clear your cache.


----------



## skyhigh007 (Jun 17, 2004)

I know what visited is but what i want is ex: there are 3 buttons and they are A,B,C. when I click on button B, it goes to B page and the button should display the visited image. Now, After I click the B button, I click on C button and the only C button should display the visited image and the rest of buttons should display the initial image. 

If it keeps the effects of a:visited until you clear your cache, how do you clear cache every time someone different button ?


----------



## namenotfound (Apr 30, 2005)

skyhigh007 said:


> I know what visited is but what i want is ex: there are 3 buttons and they are A,B,C. when I click on button B, it goes to B page and the button should display the visited image. Now, After I click the B button, I click on C button and the only C button should display the visited image and the rest of buttons should display the initial image.
> 
> If it keeps the effects of a:visited until you clear your cache, how do you clear cache every time someone different button ?


oh THAT is what you want? You weren't really clear before....

Ok, well that can be done by fetching data from the server to find out what page the user is on, then giving them the image associated with that page.

Here's a quick example in PHP (do you have PHP on your server?)

This would be in another file you include, like "images.php" for example.

```
<?php
if ($page == 'page1') {
echo "[IMG]page1-book.jpg[/IMG]";
}
elseif ($page == 'page2') {
echo "[IMG]page2-book.jpg[/IMG]";
}
// etc.
?>
```
Then in your actual page, example "page1.php" have this:

```
<?php
$page = 'page1';
include('images.php');
?>
Rest of the page goes here
```
Of course, this could probably be done more efficiently using MySQL, but if you don't want to use a database, then the simple PHP example I gave will work just fine.


----------



## skyhigh007 (Jun 17, 2004)

Sorry for not being clear, I'm using CSS and XHTML only, not php.


----------



## namenotfound (Apr 30, 2005)

skyhigh007 said:


> Sorry for not being clear, I'm using CSS and XHTML only, not php.


Well then you're gonna have to code every page individually to use the different image. If you're not using some kind of server-side tool, then that's how you'll have to do it.


----------



## skyhigh007 (Jun 17, 2004)

I'm done with buttons. Now, I'm trying to create a photo gallery and a photo slide show on the site, the question is " is it a good idea to put javascripts on your website because now days people tends to turn off their javascripts on IE?" Can CSS create a slide show that photos moves by itself from right to left? Are there any open source scripts available?


----------

