Skip to main content
M
mhairiw71724153
Participant
August 2, 2018
Question

Have multiple html documents combine to make a solitary page.

  • August 2, 2018
  • 3 replies
  • 2202 views

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.

This topic has been closed for replies.

3 replies

O
osgood_
Legend
August 2, 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>

<html lang="en">

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>

<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>

<div class="page-wrapper">

<include-header></include-header>

<include-navigation></include-navigation>

<section class="main-content-sidebar">

<main class="main-content">

<h2>Main Content</h2>

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

</main>

<!-- main-content -->

<include-sidebar></include-sidebar>

<!-- end sidebar -->

</section>

<!-- end main-content-sidebar -->

<include-footer></include-footer>

<!-- end footer -->

</div>

<!-- end page-wrapper -->

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

<script type="text/javascript">

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>

<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>

</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>`

});

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
August 2, 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
WolfShade
WolfShade
Legend
August 2, 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,

^ _ ^

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
August 2, 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
WolfShade
WolfShade
Legend
August 2, 2018

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

V/r,

^ _ ^

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices