including one html file in another?

[PaulKraemer1]

Hi,

I am using DreamWeaver version 21.3.  I have created a simple web site with several pages. I have a navigation menu at the top of every page.  Currently, I have copied and pasted the html for my navigation menu onto each page.  With this being the case, for any change I make to my navigation menus, I have to make the same change in several places.

I am wondering if anyone here can tell me the recommended practice if I would like to put the .html for my navigation menu in its own separate html file and simply reference this file from my other pages.

If anyone here can suggest a way I can accomplish this, I would greatly appreciate it.

Thanks in advance,

Paul

[osgood_ · Accepted solution]

The easiest way, without having to use some server  language like php, where you would need to set up a local development environment is to use javascript.

Create a document and name it 'include_nav.js' - copy and paste the code below into the file and include YOUR navigation code between the two back-ticks  `      ` as shown below, in place of the code which is currently there. Save the js file in your website folder.

let nav = `
<nav class="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
`
document.querySelector('body').insertAdjacentHTML('afterbegin', nav);

Then on each page where you require the navigation to appear add the below script tag just before the pages closing </body> tag.

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

Now any time you want to add, remove or update a navigation link you just need to amend the 'include_nav.js' file and the changes will propogate to all your website pages.

[L e n a]

well, your problem can be circumvented in various ways... then everything will depend on the volume, your knowledge in code, your wish to investigate and the durability that you wish to bring to your development...

first way, the old way, DW style... and using only HTML... the use of templates

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

I can hear the opponents shouting from there...

now a more traditional old fashion method, using PHP includes....

so for understanding the principle

https://www.php.net/manual/en/function.include.php

and adapting it to the content of the pages

https://www.phptutorial.net/php-tutorial/php-include-file/

there too I hear the rumbling of the base... at least on the old fashion aspect </joke>

or with more modern methods using Node and from there you will have so many solution... so let us know from where you start and where you want to go...

[Nancy OShea]

Use Server-Side Includes with just the relevant navigation HTML, no doc type, no CSS or other code.  Just the relevant navigation markup.

Save to an Includes folder as menu.html

Open your index page and insert a server-side include statement where your navigation would go using whichever server technology your hosting plan supports -- i.e. PHP, SHTML, ASP.NET or ColdFusion. 

PHP Example:  Save as index.php

<?php require_once('Includes/menu.html'); ?>

ASP or SHTML Example:  Save as index.shtml

<!--#include virtual="Includes/menu.html" -->

Upload Includes folder and index page to your remote server to test.

Repeat for other include files  -- header, footer, etc...

If your hosting plan doesn't support server-side scripts, use a JavaScript method instead.

[PaulKraemer1]

Hi Osgood, Lena, and Nancy,

Thank you for your responses.  Dreamweaver templates, server-side includes, and javascript all sound like viable methods to accomplish what I want.  While to this point I have only used DW in my limited web design experience, I think I'd prefer to first learn a solution that is not reliant on using DW.  With this being the case, I'm interested in trying both the javascript and the server-side include methods.

Osgood's javascript example is very easy to understand, so I think I can try that right away.  

I just have one question about Nancy's PHP example (my hosting plan does seem to support PHP).  If I use this method, does this mean that I have to save all of my web pages that reference my common navigation .html as .PHP files rather than as .html files?

Thanks again for all of your help!

Best regards,
Paul

[osgood_]

I just have one question about Nancy's PHP example (my hosting plan does seem to support PHP).  If I use this method, does this mean that I have to save all of my web pages that reference my common navigation .html as .PHP files rather than as .html files?

By @PaulKraemer1

Yes. Files need to be saved with the .php extension. If you don't have a local php server environment set up then it might become a pain having to push the files to your remote server so you can view the changes.

[Nancy OShea]

If I use this [PHP includes] method, does this mean that I have to save all of my web pages... as PHP files?

By @PaulKraemer1

==============

To keep things simple, yes.  Use PHP files for all pages.  But it really depends on your hosting plan. 

Most shared hosting plans don't allow you to parse code in HTML files because it makes the server work a bit harder. 

If you pay more for a VPS or dedicated server, you can change the server settings with a single line of code in the .htaccess file.   This will parse code in HTML or HTM files as if they were PHP files.

AddType application/x-httpd-php .html .htm

[BenPleysier]

Another way is to use Web Components. This is so that you do not have to rename your pages. But also a  methodology that is future proof and server side agnostic.

The following example is based on a Bootstrap 5 navigation bar, but this could be anything to your liking.

navigation.js

class Navigation extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = `
        <header class="bg-light">
            <div class="container">
                <div class="row">
                <div class="col">
                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <a class="navbar-brand ms-auto" href="#">Navbar</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbar1_collapse">
                        <div class="navbar-nav">
                        <a class="nav-item nav-link active" href="#">Home</a>
                        <a class="nav-item nav-link" href="#">About</a>
                        <a class="nav-item nav-link" href="#">Contact</a>
                        </div>
                    </div>
                    </nav>
                </div>
                </div>
            </div>
        </header>
        `;
    }
}

window.customElements.define('my-navigation', Navigation);

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>

<body>
    <my-navigation></my-navigation>
    <main>
        <div class="container">
            <div class="row">
                <div class="col">
                    <h3>Hello World</h3>
                </div>
            </div>
        </div>
    </main>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="navigation.js"></script>
</body>

</html>

With Web Components your are able to create reusable custom elements each encapsulated with their own functionality. Great time to learn.

[osgood_]

I'd probably still dynamically insert the custom tag:

document.querySelector('body').insertAdjacentHTML('afterbegin' , `<my-navigation></my-navigation>`);

It cuts down on having to include both the script tag and the custom tag on each page where you want the navigation to appear. Since the navigation would most likely be positioned in the same location on each page it seems  logical.

If the component was to appear in different locations on different pages then its more logical to actually include the custom tag manually.

I dont know what happened to web components, they've been around for a few years but dont seem to have been that well recieved.

https://blog.logrocket.com/what-happened-to-web-components/ 

Still nice idea, without having to change the page extension, throw up a local server or upload to a remote server. Ideal for a static page website.

[PaulKraemer1]

Thank you Osgood,

I just accomplished what I wanted using your javascript suggestion.  It works great and it was easy to get working.  I really appreciate your help.  (And sorry for the long delay - I have been trying to improve my web design capabilities, but I'm forced to do this in my spare time and my main job function doesn't leave much of that).

Thank you also to Ben, Lena, and Nancy for your alternate suggestions.  I'd like to look into these as well.

Thank you all again and best regards,

Paul

[osgood_]

Thank you Osgood,

I just accomplished what I wanted using your javascript suggestion.  It works great and it was easy to get working.  I really appreciate your help.  (And sorry for the long delay - I have been trying to improve my web design capabilities, but I'm forced to do this in my spare time and my main job function doesn't leave much of that).

Thank you also to Ben, Lena, and Nancy for your alternate suggestions.  I'd like to look into these as well.

Thank you all again and best regards,

Paul

By @PaulKraemer1

Thank you for coming back and confirming a solution posted has worked for you. Good luck with improving your web development capabilities/skills.