HTML and CSS

Banners, Headers, & Titles of website: How to share it among all the pages?

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2006

Posts: 19

Reputation: sonya2525 is an unknown quantity at this point

Solved Threads: 0

sonya2525

Offline

Newbie Poster

Banners, Headers, & Titles of website: How to share it among all the pages?

Oct 18th, 2008

Hi,

I'm creating a website and I've ended up with about 10 pages. Each page has the websites name and something like a banner/header. I've entered the banner/header for each page. So if I decide to make any changes, I'll have to change all 10! Is there anyother way that I can do this? Maybe by creating it separately and entering it in the page through a link or something...?? I'm quite new

...

I would appreciate if anyone could help me out on this,

Thanks,
Sonya

•

Join Date: Jul 2006

Posts: 174

Reputation: tefflox is an unknown quantity at this point

Solved Threads: 1

tefflox

Offline

Junior Poster

Re: Banners, Headers, & Titles of website: How to share it among all the pages?

Oct 18th, 2008

Hi Sonya,

Most hosting providers allow quick access to server-side scripting in PHP.

For example, you follow the tutorial for beginning PHP at w3schools.com.

You write a php file that contains functions that place your hearder / banner / title; then you include that php file into the individual 10 or so pages, and call the proper function (one time); then you've only got to tinker with the first script when things change.

site.php

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
function set_home_page_title($string) {
  echo $string;
}
function set_page_banner($int) {
  if($int == 1) 
     echo '<img alt="" src="my_banner.jpg" />';
  else if($int == 2) 
     echo '<img alt="" src="my_other_banner.jpg" />';
  else
      echo '&nbsp;'
}
function set_home_page_title($string) {
  echo $string;
}
function set_page_banner($int) {
  if($int == 1) 
     echo '<img alt="" src="my_banner.jpg" />';
  else if($int == 2) 
     echo '<img alt="" src="my_other_banner.jpg" />';
  else
      echo '&nbsp;'
}

index.php (home page)
<title><?php set_home_page_title("Welcome to my site!"); ?></title>

about.php
<div class="banner"><?php set_page_banner(2); ?></div>

As you progress in web design, it becomes necessary to learn a few of these tools.

•

Join Date: Oct 2008

Posts: 89

Reputation: wickedsunny is an unknown quantity at this point

Solved Threads: 4

wickedsunny wickedsunny is offline

Offline

Junior Poster in Training

Re: Banners, Headers, & Titles of website: How to share it among all the pages?

Oct 18th, 2008

ok let me make it even easier for u. just design a page which only contains ur banner and that welcome note or wht ever u want. save it as a .php file. then in all ur page include that file at the header space. like this: <?php Include("header.php") ?>
header means ur page name ok and after tht whever u need to make a change just change it in the header.php or whtever u name it file. it will be changed every where . cheers.

Last edited by wickedsunny; Oct 18th, 2008 at 2:47 pm.

Ayaz Malik
Free online Photoshop/Drawing | Art Community

•

Join Date: Sep 2008

Posts: 184

Reputation: FlashCreations is an unknown quantity at this point

Solved Threads: 15

FlashCreations FlashCreations is offline

Offline

Junior Poster

Re: Banners, Headers, & Titles of website: How to share it among all the pages?

Oct 18th, 2008

If you don't have scripting abilities you may consider an external Javascript file. Take this example:
header.js:

 Help with Code Tags 
 JavaScript Syntax (Toggle Plain Text) 
function header()
{
document.write("MySite <a href='index.html'>Home</a> <a href='about.html'>About</a> etc. "); //Put the header code here
//Note when placing the header code, make sure you replace " (Double Quotes) with /" (Slash and then Double Quote). Ex. /"I have a dream/"
}
function header()
{
document.write("MySite <a href='index.html'>Home</a> <a href='about.html'>About</a> etc. "); //Put the header code here
//Note when placing the header code, make sure you replace " (Double Quotes) with /" (Slash and then Double Quote). Ex. /"I have a dream/"
}

For the pages you want the header:
Simply put this between the <head> and </head> tags:

Help with Code Tags

JavaScript Syntax (Toggle Plain Text)

<script type='text/javascript' src='header.js'></script>

And place this where you want the header:

 Help with Code Tags 
 JavaScript Syntax (Toggle Plain Text) 
<script type='text/javascript'>
header();
</script>
<script type='text/javascript'>
header();
</script>

I would reccomend the PHP, since it is server side (and not executed on the client's browser) if possible. Here's an example:
header.php (Place your header's code in here):

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
MySite <a href='index.html'>Home</a> <a href='about.html'>About</a> etc. <!-- This is just a sample. Replace this line with your code -->
MySite <a href='index.html'>Home</a> <a href='about.html'>About</a> etc. <!-- This is just a sample. Replace this line with your code -->

For a page that you want to put the header simply type:

 Help with Code Tags 
 PHP Syntax (Toggle Plain Text) 
<?php include('header.php'); ?>
<?php include('header.php'); ?>

Just make sure PHP is enabled.
Best of Luck,
FlashCreations

Last edited by FlashCreations; Oct 18th, 2008 at 7:41 pm.

FlashCreations
(aka PhpMyCoder)

About Me | My Blog | Contact Me

•

Join Date: May 2008

Posts: 19

Reputation: shruti sepra is an unknown quantity at this point

Solved Threads: 0

shruti sepra shruti sepra is offline

Offline

Newbie Poster

Re: Banners, Headers, & Titles of website: How to share it among all the pages?

Oct 22nd, 2008

Hi,

according to me best solution for is placing an image using class of id in css.

code is
{
background-image:path of image;
background-position: according to your requirement;
background-repeat:depend on your image;
}

after modifying this code i hope you will not face this problem in future

Thanks

•

Join Date: Jul 2006

Posts: 19

Reputation: sonya2525 is an unknown quantity at this point

Solved Threads: 0

sonya2525

Offline

Newbie Poster

Re: Banners, Headers, & Titles of website: How to share it among all the pages?

Oct 22nd, 2008

Hi Shruti Sepra,

That is a good idea, but the thing is I have expandable drop down menus, can I still do that?!

•

Join Date: Oct 2008

Posts: 2

Reputation: Zr7 is an unknown quantity at this point

Solved Threads: 0

Zr7

Offline

Newbie Poster

Re: Banners, Headers, & Titles of website: How to share it among all the pages?

Oct 23rd, 2008

<code><title>Home</title> </head><frameset rows="125,*"><frame name="banner" scrolling="no" noresize target="contents" src="Top.html"><frameset cols="170,*"><frame name="contents" target="main" src="links.html"><frame name="main" src="Sprot.html" marginwidth="10" marginheight="14" scrolling="auto"></frameset> </code>

Why not take the easy way out , i know it's not perfect scripting option but use frames in your index page to place your banner and menus in and let the other pages appear in the main-frame

•

Join Date: Apr 2005

Posts: 16,249

Reputation: jbennet is a name known to all

Solved Threads: 540

jbennet

Offline

Moderator

Re: Banners, Headers, & Titles of website: How to share it among all the pages?

Oct 23rd, 2008

Frames.

If i am helpful, please give me reputation points.

•

Join Date: Jul 2006

Posts: 19

Reputation: sonya2525 is an unknown quantity at this point

Solved Threads: 0

sonya2525

Offline

Newbie Poster

Re: Banners, Headers, & Titles of website: How to share it among all the pages?

Oct 23rd, 2008

I did think of frames, but I've heard that they're not recommended...and when the user scrolls down, it's still on the page, and sometimes it's annoying if it takes up one third of the page.. but I guess if I cant' figure out how to do it with the answers given above, I'll just have to go with the frame or just copying and pasting and doing a lot of checking to make sure everything's working.....(sigh..)