How do I reuse my nav bar

[KeanuPotatoGod]

I was wondering how would I reuse my nav bar, can I even do it in dreamweaver? I just want it so I have a nav.html and I can apply it to the new pages I may create.

[B i r n o u]

well, there are so many way to include some content into an hosting page.

it all depend on how stuffs are build (those links are pretty old, but they should help you to open the door)

so

you can use PHP include (http://www.dreamweaverclub.com/php-includes.php) - https://www.php.net/manual/en/function.include.php

you can use SHTML - http://www.asrvision.com/web-design-tutorials/headers-footersn-in-shtml.htm 

you can use JavaScript - https://stackoverflow.com/questions/38837835/include-html-in-another-html-file

you can use Template - https://helpx.adobe.com/dreamweaver/using/dreamweaver-templates.html

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

[Nancy OShea]

You should look at Dreamweaver Templates (F1 in the Help Menu).  This method is suitable for small sites, under 50 pages.  

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

PART 1: Create a Template.dwt file

1. Start with an ordinary HTML document or Starter Template that contains all sitewide elements you will need --  i.e. header, navigation, footer, etc... 

2. File > Save As Template.

3. Add Editable Regions for content that will change from page to page. 

4. Save Template and Close it.

PART 2: Create Child Pages.

1. Go to File > New > Site Templates.  Select your DWT file from 3rd column.

2. Hit the Create Button. 

3. Save As index.html (your domain's home page).

Repeat for other site pages.

[B i r n o u]

what is different from the above link... so funny ... 🙂

[Nancy OShea]

what is different from the above link... so funny ... 🙂

By @B i r n o u

========

The difference is step-by-step instructions on how to set-up and use Dreamweaver's built-in Template feature.  A bit more information than random links. 

I suppose I should have provided more detail about using server-side includes too, as they're more flexible than Templates. But whatever... 😍

[BenPleysier]

Of late, I have been enjoying using Express as my templating engine while using Node as my server model. This templating engine functions in the same manner as the template engine built into Dreamweaver. But unlike Dreamweaver's templating engine, Express is not reliant on the IDE. There are many tutorials on Node/Express that use the freely available VS Code.  

For me, I have chosen Wappler as my IDE to make it dead easy to setup a template, as this video will attest.

https://youtu.be/ee4iwQpUQ2U

[osgood_]

I was wondering how would I reuse my nav bar, can I even do it in dreamweaver? I just want it so I have a nav.html and I can apply it to the new pages I may create.

By @KeanuPotatoGod

You don't need anything fancy, other than what's already available by default in your browser. Javascript is available out of the box so no set up like php, node, python etc is required.

Just create a file and name it 'include_nav.js' - paste in the below code, the bold text being YOUR navigation html.

const navbar = `
<ul class="navbar">
<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>
<li><a href="">Link 5</a></li>

</ul>
`
document.querySelector('body').insertAdjacentHTML('afterbegin', navbar);

Then in the page/s where you want the naviagtion bar included paste the code below just before your closing </body> tag:

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

Thats it, you can update your navigation code in the js file and it will propogate to ALL pages which contain the <script></script>

Of course IF you are using php, node, python then take advantage of the way those workflows allow you to include files (if youre using any of those then you probably wouldnt be asking the question anyway) BUT they are not strictly necessary if you have no desire to use any of them.

Personally Id stay away from Dreamweaver .dwt templates because if you ever decide to move away from Dreamweaver your route to updating your navigation will be more difficult. Stay away from any kind of niche workflow or software as its a ticking time-bomb which may come back to bite you in the ass at some stage. 

[B i r n o u]

yes that is what is exactly said in the link I have proposed above your comment*

https://stackoverflow.com/questions/38837835/include-html-in-another-html-file

[osgood_]

Well l wouldn't go to the extremes of including the jquery library unless you're already using it and whilst the object tag seems to be the simplest approach, it's browser support is currently still poor, as far as l know but l think there is something amongst those suggestions which would be useful, without having to deploy the heavy lifting gear (php, node, python, etc) if its not required.

[B i r n o u]

although you are right in the content of the obvious non-use of jquery...
admit that writing HTML in a Javascript variable remains an exercise that can quickly become verbose, complex and obscure...
compare to two lines in jquery... which integrates an HTML created in HTML... from the WYSIWYG DW interface... 😉

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#DivContent").load("another_file.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="DivContent"></div>
  </body> 
</html>

[osgood_]

I think its OK IF you are using jquery as a considered choice but my preference these days is to leverage anything  l can without the need of additional crutches. I find it more satisfying, others of course have their own criteria,

It's not that verbose, you just wrap the html code in a variable, it's more verbose to use a library of any kind as you'll probaby never use most of it. Just because its hidden doesnt mean its not verbose.

[B i r n o u]

@osgood_ 

I'm sorry, I didn't express myself well and that didn't help you to clearly understand my point.

the point is not to validate or invalidate the use of jquery...

the point is that if we don't use jquery (as your example shows very well), is that the HTML code injected in the host file is HTML code contained in a Javascript variable.

it is not HTML code saved in HTML format... so it is more complex to implement, maintain, modify etc...

so, and this is where the confusion can operate, I don't advocate jquery... but for only two lines of code, of course by relying on jquery (which I don't claim), the end user, who seems not to be a developer, can very clearly integrate the injected HTML in a host file... and maintain this HTML file, extrenal, and in a very flexible way... even by using a WYSIWYG editor. At least, much more easily than editing a string in a variable.

[osgood_]

@osgood_ 

I'm sorry, I didn't express myself well and that didn't help you to clearly understand my point.

the point is not to validate or invalidate the use of jquery...

the point is that if we don't use jquery (as your example shows very well), is that the HTML code injected in the host file is HTML code contained in a Javascript variable.

it is not HTML code saved in HTML format... so it is more complex to implement, maintain, modify etc...

so, and this is where the confusion can operate, I don't advocate jquery... but for only two lines of code, of course by relying on jquery (which I don't claim), the end user, who seems not to be a developer, can very clearly integrate the injected HTML in a host file... and maintain this HTML file, extrenal, and in a very flexible way... even by using a WYSIWYG editor. At least, much more easily than editing a string in a variable.

By @B i r n o u

I understood your initial post fully which is why l said l didn't think that wrapping a block of 'simple' html code such as the example navigation bar in a javascript variable was verbose to the extent that it would cause much of a maintenance issue. I'm not implying wrapping a whole page in a javascript variable which of course probably wouldn't be best use of the example. 

It's up to the individual what workflow they want to use in that circumstance but l would not be encouraging them to use jquery going forward, l would more likey opt for the fetch api.