I'm designing a simple website with no dynamic content that I want to be light and portable — no PHP or other server-side scripting needed, or wanted. I'm running into a question that I've had a few times before.
I'd love to be able to write common elements (head, foot, navigation) once and write the individual pages on the site with content only, then run this mysterious utility to compile everything it into a set of HTML files ready for uploading. A page might be written like this:
Title: Our Services
Top Navigation: Yes
Scripts: jquery, lightbox
<p>
Example, Inc. offers a wide range of…
It'd be great if the engine also had logic that lets me include or exclude elements (like Top Navigation above) from each page, and automate tasks like labelling the current page in the navbar:
<a href="/services"{page == 'services' ? ' class="current"' : ""}>Services</a>
Are there any engines out there like this?
I'd head directly towards Template-Toolkit for this. It comes with the ttree utility for building a static site.
You can handle the last part of your question with something like:
[%
INCLUDE 'navbar.tt'
page = 'services'
%]
To be honest, this is where things like PHP come in handy... to include common elements
Option 1: Use a language and enjoy it.
Option 2: Use the language to make the site... but then point a crawler at your site to grab the generated "static" content. e.g. WinHTTPTrack
Webby is fantastic for exactly this.
Another great option is Jekyll.
Adobe Dreamweaver's Templates do what you need if a non free tool is fine for you.
Basically you create a Template page where you define which parts are editable, then you create all your pages based on the template. If you change the template and save it all the associated pages are updates.
The templating system also has the ability to define default attributes and change them in a specific page. You can use this for labeling the current page, though for this IMHO a couple of lines of jquery code are much better.
You could write a program in any language you are familiar with that outputs static html files. You could have a basic structure and then for the customized stuff, you include it from a separate file.
Related
I have a html template that has multiple pages like home, about us,contact,services,... and I want to convert it to a joomla template.I spent a lot of time for searching a good tutorial in google like this:
http://www.learning.asarayan.com/education-website-design/joomla-training2/334-convert-html-to-joomla-template
but non of them can answer my question: how can I convert ALL pages of html to joomla??I mean that I can convert one page for example home to joomla and define its position but what about other pages?
can anybody introduce me a COMPLETE tutorial???
sorry for my poor english
thanQ
You may start with tutorial posted at below address
http://www.tobacamp.com/tutorial/5-easy-steps-converting-html-template-to-joomla-template/
There is no automatic converter or out of the box solution for this, neither any tutorial to help you.
The best way to sort out the issue is by duplicating the template with the help of Artisteer. You can just recreate the template design and feel with Artisteer. Download link: www.artisteer.com/?p=downloads
You need to change your mindset from that for a static template to that for a dynamic template.
In joomla templates there is a base layout called index.php as you know. But that is very skeletal usually, is just defines some locations on a page, includes your css and javascript that is common to all of your pages. This gives your site a common look and feel and ensures a good user experience.
For your css for the individual pages you would normally just include that in the template.css file or similar.
Within the index file you will see places that say jdoc:inlcude. These are the places that actually include the layouts that provide detailed html for specific blocks on the page, typically there will be one component jdoc (there cannot be more than one) and many modules and module ones as well as some others.
The html for these documents is found in the components/com_componentname/view/viewname/tmpl folders.
To override the core layouts you use the template override system by placing same named files in the html folder of your template. You can look at the included templates to see how this works. There is pretty good documentation of this on the joomla documentation site.
http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core will get you started.
Also this may be a point of confusion. In a CMS you strive to separate content from presentation. So if you enter the core information in the cms, i.e enter the contact information in com_contact, and enter most of your current content into individual articles you will start to see how it actually works. I would usually recommend first entering all of your static content into the appropriate places, then work on making the rendered pages look exactly the way you want them to.
I started creating web pages in plain HTML. I have a header, main content and a footer. The main content is divided into two, left and right content. Everything is the same on all pages except for the right content. Now I have about 15 pages. This is very tiresome if I make some changes on the other static pages (header, footer and left side content) as I have to go through all pages.
How can I create one HTML file for each static area and how am I going to integrate it?
There are, essentially, three places you can do this:
At build time. Run a script that puts the pages together and outputs static HTML. Then upload the static HTML to the server. Back in 2013 I recommended ttree, but these days static site builders are common and more powerful. My projects tend towards Gatsby (for complex projects) and Metalsmith (for simpler ones). Jekyll is very popular (and Github provides documentation for using it with GH Pages).
At runtime on the server. This could be a simple SSI, a PHP include or a full template system (of which there are many, including Template Toolkit and mustache), possibly running inside an MVC framework (such as Catalyst or Django). This is the most common approach, it has less time between making a change and putting the result life then doing the templating at build time.
At runtime on the client. This adds a dependency on client-side JavaScript (which can be fragile and unfriendly to search engines), so I wouldn't recommend it unless you already had a server-side or build-time solution in place. Gatsby, for example, is a static site generator that builds a React frontend backed by static pages.
There are a couple of ways to do this.
If you are working purely with HTML, then you can use a 'server side include' -- this is a tag which allows you to load a file into the page (see http://en.wikipedia.org/wiki/Server_Side_Includes). Whoever is hosting your website has to support this.
<!--#include virtual="../quote.txt" -->
If youe web host happen to use PHP, you can do this using the include method (see http://php.net/manual/en/function.include.php):
<?php include('path_to_file/file.htm');?>
This will include the file at the point you place the tag. But again, whoever is hosting your site needs to support this.
There are other methods of doing this, bit these are the two I make use of.
Well... what you’re looking for is called "Master Page" and unfortunately it isn’t available in html however you can use the <iframe> tag but it would make your website look really ugly. i would suggest you to use a programming language such as PHP its much easier that way.
but if you want to use <iframe> then They’ll load remote pages into your website, so you could define a "Master Page" like this:
<body>
<div id="content">
<iframe src="content1.html"></iframe>
Now, inside of content1.html, you could just write the content without the main layout
What are the most common options for templating HTML files for static pages, to minimize maintenance and redundancy? An example of my question would be Adobe Dreamweaver.
Consider using a server-side scripting language such as PHP or ASP.NET. These produce dynamically built web-pages meaning that you can code it in such a way that headers/footers etc are separate from the main content, meaning you change that link once rather than 30 times.
If server-side scripting is not an option, I'd suggest having a look at Dreamweaver. This will enable you to create templates, and then create pages based on those templates. When you modify that link in the template, all pages that use that template will be updated. This will give you what you want without the server-side scripting.
why dont you use iframe inside ? ( which will contain a single navigation html page...)?
If you're using a server-side language like PHP, you can start to use the include function. So you'll include in a different file your navigation bar and then include it in every file of your website. Thus, every change to the navigation bar file will affect all the others files.
If you are writing only static pages, it isn't possible. Maybe you can try SSI.
Typically you need either a fancy program (like Dreamweaver and its templates functionality) or some sort of server-side scripting. Languages like php, asp, etc might be a bit much if the only thing you are looking to do is as you describe, so I might look into seeing if your server support server side includes (SSI).
How do I turn the site I just made (html+css) into a template? I want to be able to have one master template to use for all the pages on my site like I am able to do in dreamweaver, can I do stuff like that outside of DW? I am kinda sorta new to this....
The easiest way to do this, without programming experience, is through the use of Server-side includes
You'll probably need to take up a web scripting language like php. You may want to learn a website framework like Wordpress or MovableType, etc. Depending on your choice, you'll need to name your relevant content blocks and provide access to them via whichever framework you choose. Smarty is another example.
The beauty of templates in Dreamweaver is that you can make a change to the template and it will automatically change all the pages that use the template. If your site is going to start small, you could think carefully about your basic page design, create your "template" and then copy it every time you want a new page. Then, when you want to make changes, simply repeat the change on each page. When your site gets larger, perhaps Dreamweaver will be worth investing in. You could then save your "template" as a Dreamweaver template and apply it to your pages.
There are also other cheaper software options, depending on your or your customer's requirements, though Dreamweaver is the most commonly used.
You could also try static-site generators like jekyll or nanoc. These two are Ruby-powered (so experience with Ruby would help) but I'm sure there are more variants.
Take a look at PHP includes.
<?php include('header.html'); ?>
<p>The main part of a page.</p>
<?php incluse('footer.html'); ?>
http://www.w3schools.com/PHP/php_includes.asp
I am managing a legacy website with a lot of static HTML websites, no server side scripting, just plain HTML/CSS, minimal javascript. I found it a huge waste of time to change the same piece of code numerous times in different pages. For example, when something in the menu changes, since the menu is just static text in each document, I have to make the same change numerous times.
I was wondering what the best tactic would be to minimize this overhead, in other words what would you recommend for managing things like navigation code across multiple static HTML pages.
I know you can use:
server side scripting (like PHP), but there is no other reason to use scripting at that particular site.
frames (but that's bad because its.. well, frames :))
server side includes (that seems like it could lead to trouble when changing the server)
javascript (bad for SEO)
What would you recommend?
Thanks.
Out of all the possibilities, both what you listed and anything else I know of, I'd still just run with a simple PHP-based solution. It's easy and clean, requiring next to no effort on your part. I do this with all the small sites I design.
Most often, you end up with fairly trivial structure. You write up a full page, then for each subsequent page you're just changing the bit in the middle where the content lives. In that case, just take everything above and below the content and save it in header.php and footer.php files, then put <?php require_once "header.php"; ?> at the top of each content file (and similarly with the footer file). Done!
This does have some minor disadvantages. For one, you're depending on scripting, but PHP is the most widely deployed server-side language in the world, so that's not really an issue. You don't even care if it's PHP4 or PHP5, since you're not doing anything fancy.
For two, you're running a script on every page load, in order to serve what is essentially a static file. That slows down your responses, and stresses the CPU unnecessarily. This probably doesn't matter much (the lag is very minor), but if you find it wasteful, there are some good PHP frameworks which will take your PHP-generated pages and generate static htmls out of them for you. (This is easy enough to do yourself, too, with just a bit of work using output buffering.) This way you get the best of both worlds - PHP templates (and the full PHP language if you end up wanting something fancier down the line) but static html pages for minimal CPU activity and fastest page load times.
You can use a static site generator. I recommend jekyll.
If you are set on maintaining a static site, I would recommend using a static site generator.
One I have used in the past is webgen
From the webgen page:
The page layout is separated from the
content: if you change the layout, all
pages that use that layout are
automatically updated. You can have
any number of different layouts and
even nested ones.
Write content in a markup language:
The content and layout files can be
written in a markup language like
Markdown, Textile or Haml which lets
you concentrate more on what you
write.
Automation: webgen can automatically
generate, for example, menus and
breadcrumb trails for you.
Dynamic content: It is easy to add
some dynamic content if there is a
need for it.
You could preprocess your website with PHP and then just upload the generated static HTML files.
It's been a long time since I've used it, but Dreamweaver was a great tool for working with static sites. It had a templating/repeating region mechanism that used comments for this purpose.
Edited to add: A little Googling jogged my memory. Dreamweaver has templates that are similar to ASP.NET master pages. For other content, it uses the metaphors of a Library and Assets. Since this is a static site, you should be able to pick up an older version of Dreamweaver on the cheap that meets your needs.
Edit 2: I have a soft spot for Dreamweaver. If StackOverflow is the anti-Experts Exchange than DW is the anti-FrontPage. Adobe being Adobe, at this point they've probably added enough features to effectively cripple it.
There may not be any other reason to use server side scripting, but certainly reducing the amount of written code is a pretty big reason to use it wouldn't you think? It would make maintaining the site much more efficient.
In general I'd recommend PHP - its handling for includes is exactly what you need, and it makes anything dynamic much, much easier to manage.
It is also extremely easy to find hosting with PHP installed.
You could use sed to batch-edit files containing the same page elements.
As everyone else has said, a static site generator is the way to go.
DocPad is new static site generator, built with Node.js and CoffeeScript it is able to support cutting edge markups like coffeescript, coffeekup, jade and stylus along with the usual markdown and haml support among others.
If you're completely new to the static site generator concept, and would like to know what templating engines and meta-data are, give this article a read.
What is the big problem with using PHP? In my opinion using an easy PHP include could save you a lot of time instead of editing numerous files. It makes sense.
<?php include('navigation.php'); ?>
Other than that the othe roption is making it on one and then copy and pasting it to the other pages.
I would use PHP whenever my clients would present me with websites of this sort. You can easily put all of the recurring HTML in one file and call it via functions, or put it in separate files and call it via includes/requires/what have you.
Best of all, if whomever you are maintaining the site for, wishes to have some way that they can add content themselves. You already would have enough of the necessary framework in place to make it very simple for them.
I've used Webby for this in the past and was very satisfied with how easy it made things and reduced duplication.
I'd say an inline frame can be just fine for something like a menu that appears on every page and needs to be updated on every single one. Just remove the frameborder, size it properly, and it should be good.
I would put all crawlable content into the HTML, then generate the repetitive content using javascript. So something like this:
<!doctype html>
<html>
<head>
<title>My website</title>
</head>
<body>
Main content goes here.
<!-- This script should generate the extra elements,
the navigation bar and stuff around the main div. -->
<script src="enhance.js"></script>
</body>
</html>
So all you need to do is setting the title and writing the main content in each page. The rest (which is probably not interesting to crawlers anyway) is generated by JS.
I think a reasonable compromise between ease and speed would encompass Server-Side-Includes first, then PHP later.
As for PHP, I'd suggest you wrap the content by using auto_append_file and auto_prepend_file directives for the Apache2 Module.
<?php include('header.php') ?>
//Your contents are placed here
<?php include('sidebar.php') ?>
<?php include('footer.php') ?>
you can include static webpages without using php but instead bu using javascript.
here is an example :
<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>
<div w3-include-html="h1.html"></div>
<div w3-include-html="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>