Highlighted

Have multiple html documents combine to make a solitary page.

New Here ,
Aug 02, 2018

Copy link to clipboard

Copied

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.

TOPICS
Learn Dreamweaver

Views

283

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Have multiple html documents combine to make a solitary page.

New Here ,
Aug 02, 2018

Copy link to clipboard

Copied

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.

TOPICS
Learn Dreamweaver

Views

284

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 02, 2018 0
LEGEND ,
Aug 02, 2018

Copy link to clipboard

Copied

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

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 02, 2018 0
Adobe Community Professional ,
Aug 02, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 02, 2018 1
LEGEND ,
Aug 02, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 02, 2018 1
Adobe Community Professional ,
Aug 02, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 02, 2018 1
osgood_ LATEST
LEGEND ,
Aug 02, 2018

Copy link to clipboard

Copied

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

});

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 02, 2018 1