Have multiple html documents combine to make a solitary page.

Signaler · Aug 02, 2018

Hi!

I have been watching a video on YouTube from DevTips. He uses Jekyll as his programming platform and as such there are some differences in the code.

One thing that he is able to do is in the index.html he uses code like this;

{% include header.html%}

This code links the header code to the index and makes the preview appear with the header but from the index document instead of the header document.

Is there a way to do this with Dreamweaver? Have multiple documents with HTML, CSS and JS all combine to create one page?

Thanks, I hope that makes sense.

Signaler · Aug 02, 2018

I'm not sure I understand your question, but it sounds to me like you are asking about server-side includes.

V/r,

^ _ ^

Signaler · Aug 02, 2018

I have a quick tutorial on using server-side includes below.

Alt-Web Design & Publishing: Server-Side Includes with PHP

My Linux server supports PHP code so that's what I use in development. If you're on Windows server, you'll likely need to use ASP. If unsure, ask your host which server-side includes you can use with your hosting plan.

Nancy O'Shea— Product User, Community Expert & Moderator

Signaler · Aug 02, 2018

I'm not sure, but I think OP is looking for something like this. OP didn't mention a server-side scripting solution like PHP or ASP. Just HTML, Javascript, and CSS.

V/r,

^ _ ^

Signaler · Aug 02, 2018

SHTML includes are exactly the same as ASP includes except the file extensions are different. .sthml instead of .asp

Nancy O'Shea— Product User, Community Expert & Moderator

Signaler · Aug 02, 2018

You could probably do something similar using vue js.

Set up a template page for your website, typically you would have generic content like the header, sidebar, footer, navigation. You can make vue templates and store them in 1 js file linked to the pages which when updated will propogate to all the pages which use the 'template' page.

A simple workflow is below, the html page and the vue templates js file:

html file:

<!DOCTYPE html>

<head>

<style>

* {

box-sizing: border-box;

}

.page-wrapper {

width: 80%;

margin: 0 auto;

}

.header {

background-color:#c3f3f5;

text-align: center;

padding: 20px;

}

.main-navigation ul {

display: flex;

justify-content: center;

margin: 0;

padding: 15px;

background-color: #000;

}

.main-navigation li {

list-style: none;

}

.main-navigation a {

padding: 10px;

}

.main-navigation a {

text-decoration: none;

color: #fff;

}

.main-content-sidebar {

display: flex;

}

.main-content {

background-color: #f2f2f2;

width: 60%;

padding: 20px;

}

.side-bar {

width: 40%;

background-color:#f4e08e;

padding: 20px;

}

.footer {

background-color:#f9c5f8;

text-align: center;

padding: 20px;

}

</style>

</head>

<body>

<include-header></include-header>

<include-navigation></include-navigation>

<h2>Main Content</h2>

<p>Main content stuff goes here</p>

</main>

<include-sidebar></include-sidebar>

</section>

<include-footer></include-footer>

</div>

new Vue({

el: '.page-wrapper'

});

</script>

</body>

</html>

vue_templates.js file

'use strict';

//HEADER

Vue.component('include-header', {

template:

`<header class="header">

<h1>Header stuff goes here</h1>

</header>`

});

//HEADER

Vue.component('include-navigation', {

template:

`<nav class="main-navigation">

<ul>

</ul>

</nav>`

});

//SIDEBAR

Vue.component('include-sidebar', {

template:

`<aside class="side-bar">

<h2>Sidebar stuff goes here</h2>

<p>Sidebar stuff goes here</p>

</aside>`

});

//FOOTER

Vue.component('include-footer', {

template:

`<footer class="footer">

<h3>Footer stuff goes here</h3>

</footer>`

});