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
Related
I've never used WordPress.org before. I'm wondering if I can convert this html website that I have to wordpress exactly the same?
https://reporting.pacificamerican.org/pas/
And if this website is a wordpress site, does it means that I don't have to go into the codes if I want to update my content? Because right now with html site it takes more time to update all the contents.
Thank you.
Yes, you can, but looking at the content I wouldn't say it looks like a great idea. Mostly because of how static the current content seems to be.
Pros:
It looks like you are about to add a blog-page. WordPress does make such re-occuring content easy.
It looks like you have repeated the menu on every page. (If you change the menu on one page, then you have to makes changes to all pages as well?). WordPress would help with that and let you use one menu everywhere. But there are also tons of easier methods to accomplish the same thing without WordPress. (For example <?php include 'menu.php';?> using PHP).
Cons:
The "multiple sub-pages in one page" that you are using doesn't play naturally with WordPress. Absolutely possible yes, perhaps not even difficult, but not out-of-the-box for sure.
The time it would take to edit pages would likely not change as drastic as you hope. I believe that the current content looks so static that anyone with a bit HTML/CSS knowledge would rather want to edit those static html files over having to click around in the WordPress admin interface.
The scroll-spy, editing tables and things like the yearly admissions does not come naturally either. I can think of a few dozen ways to solve such things with WordPress, but if you are going to do this work yourself, then the WordPress-conversion will take some effort and the results will not always be as pretty as you might imagine.
You'll definitely take a performance hit over using only static html. (But that is true for any CMS/framework)
My suggestion would be to first look at your current workflow. Perhaps look at an IDE that can upload with a click or on save, have history so you can back up when things break, and predefined snippets that make static content changes easy, (and of course code syntax highlighting!).
What tools are you using now?
Also remember that you are asking on a coding-site. Not many here would opt to use the WordPress editor over simply editing html-files. In fact, I dare to say many here carries a deep grudge after having to work around some specific quirks in the WP editor (aka tinyMCE).
Sure, you could replicate the layouts.
Sure, your content would be editable with just a form.
It would take a lot of effort, but certainly doable.
I'm building a small-scale website (a personal one) in which each page would have the same set of header elements (I'm not talking about the <head> element). In other words, I want each page to have essentially the same title at the top of the page and the same navigation bar below that (with possibly minor differences in each page). It's kind of like how StackOverflow has that navigation bar (with the logo, and the Questions, Tags, etc. buttons) on the top of every page.
Is it possible create such a header for every web page without copying and pasting the HTML code to do so? I really don't want to run into a situation where if I want to make a single change, I would have to change all of my pages containing the header.
Real web sites use real web frameworks, which have a concept called a "layout" (at least that's what they're called in Rails; as mentioned in Uwe's answer, they're called master pages in ASP.NET). All the common "templatey" stuff goes into a layout.
How about include files in a server-side language like PHP or master pages in ASP.NET?
You need to use some kind of dynamic page processing, whether it's PHP, a server-side include, or a similar tool.
If you need to stick with straight HTML, you could try to rig something up with AJAX or JavaScript - but then you highly limiting your website's functionality, giving it serious performance issues, AND preventing users who have JavaScript disabled from using your website.
A third answer is to use some sort of pre-deployment tool. This used to be a bigger market, but I think it's mostly dried up now. Here's an example for using DreamWeaver to handle this.
If you have a PHP server that supports PHP,
<?php include 'header_inc.php'; ?>
If that's not available
<!--#include virtual="header_inc.html" -->
But whether this works or not is server dependent
If you have a server with PHP capabilities
include 'header.inc.php';
you must put the header code in a file named that and then put that include code in all pages that you want the header to show up on
I'm trying to create a theme for a CMS, but it's proving nearly impossible, as I have no understanding of PHP or ASP.NET. I can put a site together via CSS and HTML, but I want clients to be able to add and edit content themselves. I'm about ready to give up on designing one altogether and just use an existing theme.
I've had a go at trying to understand the inner workings of Wordpress, SilverStripe, Umbraco and Pixie, but the tutorials have left me confounded. Are there other CMSes I should be looking into for a more simplified theming process?
I'd really love to be able to just drop a chunk of code into the content area of a given HTML page, and make that region editable from a WYSIWYG front end that the client can log into. Is there such a thing?
Anything but DotNetNuke.
I'd recommend giving Wordpress another try.
I'm no web developer, just a an average Java/C# programmer who needed a web site and has some basic knowledge of HTML and CSS. What I did was find a theme that was similar to what I wanted, then started tweaking it incrementally. My theme is pretty basic, but before long I got a pretty good grasp of "The Loop" and printing out category and page links and such.
How about Movable Type?
You can (and should) edit the templates via the web interface, they are divided into separate modules, so you can concentrate on one area of the site, styling is of course handled via CSS.
It took me a few hours without any prior experience with this CMS to completely port a Wordpress theme to MT - I found the documentation very helpful and didn't even have to look elsewhere.
An awesome thing about MT - it generates static pages based on the templates you defined. Meaning, very low load on the server, you don't need to query the database on every request, etc. You could probably do the same/similar by activating the cache plugin (or is it built in now?) in Wordpress, but here it's the default modus operandi so it's more stable and integrated with the CMS.
Drupal with the zen theme (or a "lighter" version of it: Starkish theme) seems like a popular choice (and well deserved, too). It gives you a good starting point, it has great documentation and many modules available.
PS: I've added this as an additional answer so that it can be voted upon separately from my other suggestion - I just could not stop myself from bringing up the Drupal + zen combo :)
I worked with Joomla, it is really easy to have a theme for it without knowing any programming language. When you install it using a simple installer, there will be a folder named templates. There are three simple themes each in its own folder. Just copy one of them,change XML data for that theme ( just to name it and have some details, no programming ) and change the contents of CSS and HTMLs. every where you see something unrelated to HTML like , copy them!! Names are descriptive. so you can guess what do they do. give it a try!
I'd really love to be able to just drop a chunk of code into the content area of a given HTML page, and make that region editable from a WYSIWYG front end that the client can log into. Is there such a thing?
The only system I've come across with this kind of functionality is Perch.
Just create your website using HTML/CSS as usual and chuck in a few small php tags where you want editable content. These areas are then added to an admin area for your clients to edit.
The only drawback is it costs £35 per site - I don't know if there's a free/open-source CMS with this functionality...
It's difficult to say which CMS will be the best one for you (maybe your question should be made into a community wiki question).
I have a little experience with mojoPortal, and found it to be easily customizable. There's a lot of documentation about how to skin your CMS and there a lots of complete skins that you can use as a starting point.
There is also a demo site, where you can see how the CMS works for an end-user.
Take a look at Joomla. That was the first CMS that I really used, and I still think its templating engine is better than most of the others out there.
Its template system essentially lets you build a standard web page, and then use some simple tags to define where the content and modules would go. You can override the output of most external components and modules without too much trouble, and the vast library of third-party extensions should help you add a ton of functionality to your site without much coding on your part. Joomla also has a fairly easy-to-use administrative backend, so your clients should like it too.
This page for themeing Wordpress helped me a lot:
Theme Development
UPDATE
Xichael,
If you know HTML and CSS pretty well, but you just don't want to spend time learning the Wordpress framework, then I think this is a good option for you (again, I can relate to your situation). Use Wordpress with the new Toolbox starter theme. It's super minimal.
Toolbox: An HTML5 WordPress Starter Theme
Here's an example of what it looks like. Just "View page source" and go to town on the CSS!
I've thought about writing my own very simple CMS just for handling pages, i.e. you have some sort of template, and then a <div> in the middle to drop in text from a WYSIWYG editor. You could even use XML as the data store to eliminate having to set up a database to store the page content.
It would sort of be re-inventing the wheel though, because there is so much polished CMS software out there already, but it wouldn't be that hard because it wouldn't have 99% of the features most systems have. However, what happens when your client wants to add something in the future that's already standard in an existing CMS or plugin?
If you are looking for a simple CMS tool, CMSimple is as basic as it gets. A small PHP based CMS system that does not even require a database or XML.
"CMSimple is the ideal tool for a single user to maintain a website."
Original version here: CMSimple.ORG
Original plus 2 enhanced versions here: Download CMSimple
117KB content manangement system
no database required; the entire site is stored in a single HTML file
built in WYSIWYG
no modules or widgets, no blog, no comments, etc., just basic pages
uses PHP (but no database)
Get themes here: dotcomwebdesign.com
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.
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>