Applying a common footer across all pages

[netnutmike]

How do you apply a common footer (and possibly header/menu) across all pages?  I am trying to help a friend out on fixing up his site and there are some changes to the footer that need to be made.  There are a lot of pages to this site and it would appear I have to go through each page and make the changes.  I am sure there are going to be more changes in the future.  

It is the same for the menu at the top.  I am going to make changes there too.  How can you include another file into a page so that there is one footer and one menu that can be updated and applied to the entire site?

I did see reference to doing it in php which would make sense if the site used PHP.  There is a bit of ajax code but it pulls from a node app and the site itself is not running on a server with php or any server side scripting.

I have not used dreamweaver in years and I cannot figure out how to do it.

Thanks for any guidance you can give me.

Mike

[Jon Fritz]

The easiest ways would be with .PHP or .SHTML includes, especially if the site is larger than about 50 pages or so. That way, you only write one "include file" with just the html of the repeated region you're replacing, tack a tiny include script into each page where you want it to appear, and the server replaces the script code with the include file code. It's super easy with both .PHP and .SHTML (no php installation required).

If you can't use those technologies, due to server limitations, DW has a handy tool called .DWT Templates that would do what you want, but would require basically starting the site over...

https://helpx.adobe.com/dreamweaver/using/dreamweaver-templates.html

[Nancy OShea]

I highly recommend using server-side includes because they are powerful, efficient and easy to update.  Open your include file, change it, save it, upload it to server.  You're done!  And includes will work with any editor.  

In contrast to includes, DW's proprietary Templates and Library Items only work in DW and only on the local site files.  This means you have to re-publish your entire site every time you update those elements.  That might be OK for small sites but not ideal for large ones.

I use PHP includes for everything because that's the server technology my hosting plan supports. 

https://alt-web.blogspot.com/2015/07/server-side-includes-with-php.html

[B i r n o u]

youps in my mailer, I didn't see that you was also pointing on library items... only when my feedback was published... definitely this new forum engine is not yet ready.... despite the updates after 17

Sorry for the noise... promised, from now on, I'll check online before posting

[B i r n o u]

As Jon and Nancy tell you, file inclusion is the most flexible and common way to use and share page fragments when creating a website.
Jon points to Dreamweaver's Templates, which will certainly ask you to start over, to support all your pages on this technique, but you can also use Library elements, without starting from scratch.
the difference between library items and file inclusion comes from the difference in technology used.
The inclusion is based on the server side, the library elements the code of the pages.

so, any change will require to place online only the file included on the server....... whereas if you change a library element you will then have to upload all the pages that contain it again

https://helpx.adobe.com/dreamweaver/using/library-items.html

[osgood_]

There are dozens of ways you can achieve this, with or without server-side scripting:

Below is an eaxmple without server-side scripting, just using a javascript file.

First you would need to set up a container on each page where you want the navigation to appear, along with a link to a javascript file, in this case 'navigation.js': You have to initially insert some kind of code on each page if you use a server include script like php, so its no extra steps.

<nav>

<ul class="mainNav">

<script src="navigation.js"></script>

</ul>

</nav>

Then in the navigation.js file you can store the 'linkUrl' and 'linkText' in an object array then loop through it using the forEach function:

const mainNav = document.querySelector('.mainNav');
const navigation = [
{linkUrl: 'link_1.html', linkText: 'Link 1'},
{linkUrl: 'link_2.html', linkText: 'Link 2'},
{linkUrl: 'link_3.html', linkText: 'Link 3'},
{linkUrl: 'link_4.html', linkText: 'Link 4'},
{linkUrl: 'link_5.html', linkText: 'Link 5'},
{linkUrl: 'link_6.html', linkText: 'Link 6'},
{linkUrl: 'link_7.html', linkText: 'Link 7'},
];
navigation.forEach(function(nav) {
mainNav.innerHTML += `
<li><a href="${nav.linkUrl}">${nav.linkText}</a></li>
`;
});

I prefer to use a php include because php is what I use by default but  javascript is an option if you dont have a server-side set-up, along with the other solutions so far provided.

[netnutmike]

Thank you everyone for the insight.  As I mentioned this site is hosted where there are no server technologies.  It runs on Amazon S3 and uses Cloudfront.  There are some ajax calls into data that is also located within Amazon.  The person my friend hired created the site in Dreamweaver so I am trying to leave it in there.

I did play with templates and realized how big of a job it is to convert everything.  I am normally a developer for web applications in Sencha and API development so I have not looked at an HTML editor in years.

[BenPleysier]

Have you tried https://docs.docker.com/docker-for-aws/ to install a PHP server?

[B i r n o u]

yes Ben you're right... one can also deploy Node on Amazon hosting

https://aws.amazon.com/fr/getting-started/projects/deploy-nodejs-web-app/

[osgood_]

Seriously, would you go to that extent just to include a sitewide footer/nav? In my opinion its just overkill, unless you need to harness other aspects of a server language, or any other language. Still it fits right in with the current climate.