Is there a way to change the page layout on multiple page at once (HTML)?

Hi everyone !

I am new to both this forum and web design and I must say people seams pretty awesome around here !

So yes ! I was wondering if there was a way in HTML to change the page layout ( like the nav bar, footer ,logo etc…) on multiple page/file in a website ?
I hope there is a better way than changing the code on every single page.

I don’t really know if my question is clear that’s why I came here.

Many thanks !

A certain amount can be done if you used css and this is a good reason to use a templating system with something like php; but that sounds to late for you now?

No no it’s not too late ! I asked before I got that problem because every tutorial I watched did not adress that issue.
I don’t know php yet, but is there a well known tool to do that job ( templating via php ) ?

Thank you !

Yes there are templating systems but when you use php you can “include” other files. So you can have a page and include a header and a footer so that you only need to change the header or footer file and it will change on all the pages.

I am not a WYSIWYG user but there is probably some software that you can setup a template and use it on each page but you will have to look around to see what software may use it.

As I say there is a lot you can do with css for instance you can change the layout and style of all the pages by modifying the one css file. You can link the header logo/image within the css file and you can also change the layout of the page by modifying the divisons which layout the positions of the header, navigation etc.

good ! Very enlightening ! I’m going to think of that when I start to code!

Thank you very much :slight_smile:

Even without a complete templating system you can do quite a lot using ANY server side language simply using include statements.

Just place the common parts of the page layout into separate files that get included in each page in their appropriate locations. Only the content that is unique to each page would then be actually included in each file.

You would then be able to change the complete layout of the entire site simply by replacing the contents of the includes without needing to touch any of the actual page files.

It is difficult to recommend a solution without knowing how your pages are generated. Is it possible to supply a typical page layout or possibly a URL to your site.

I use a PHP Framework that generates common pages, includes vary depending on the page generated:


<?php 
  $page = substr($_SERVER['PHP_SELF'], 1+strrpos($_SERVER['PHP_SELF'], '/') );


  switch($page)
  {
    case 'about.php';
        include '_footer-about.php';     break;  


    case 'blog.php';
        include '_footer-blog.php';  break;  


    case 'contact.php';
        include '_footer-contact.php';  break;  

    case 'terms.php';
        include '_footer-terms.php'; break;  


    default:
      include '_footer-common.php';


  } // endswitch;  
?>

Thanks felgall !

Hi John_Betong,

I don’t have anything yet, I was just being preventive because I knew I was going to run in that problem eventually !
Beside being .php does this technique have a name ? Can I find documentation somewhere ?

I don’t know php yet but I would like to learn how to do that when the time comes.

Many thanks :slight_smile:

Hi Billy,

As far as creating HTML pages and different techniques are concerned then I would be tempted to look in the SitePoint Store for a book on learning HTML. After learning HTML you can then proceed with CSS, JavaScript, PHP, etc.

Running a localhost server from your computer is also recommended so search for Wamp or Xampp servers which allow running websites from your desktop.

I would also investigate a free web hosting service which will allow you to create your own website.

The list of website information is increasing on a daily basis and it is difficult to keep abreast.

Have fun :slight_smile:

Hi John_Betong,

Yes I find that very overwhelming! I am currently following a course on Udemy and been thru Html and CSS section and I started the Javascript one ! I’m going to take a look at the store and Xampp as well.
Thanks for the support !