Website design tools
August 27, 2012 4:36 AM Subscribe
Simple HTML coding question: what tools do people use to replicate header and footers across pages when hand coding HTML websites?
I currently use notepad++. But the end up copying and pasting everything over again. Seems like there is a better way?
I currently use notepad++. But the end up copying and pasting everything over again. Seems like there is a better way?
Ideal workflow for building a site involves working out what you're doing (how many pages, what structure) first; you then create one empty HTML file and copy that to the right filenames/directory structure. You'll obviously only be doing this for small sites, as anything more substantial will require some kind of server-side CMS.
I have one called "barebones.html" which I can just open, edit, then save with a different name; only use it on tiny sites though.
For me the step between "proper CMS" and "consistent site created with bucketloads of copy-paste" involves a bunch of HTML fragments (menu, footer, sidebar etc.) included with server side includes either with SSI or PHP ; that way you can update the menus on all pages by just editing the HTML fragment file.
posted by handee at 4:54 AM on August 27, 2012 [2 favorites]
I have one called "barebones.html" which I can just open, edit, then save with a different name; only use it on tiny sites though.
For me the step between "proper CMS" and "consistent site created with bucketloads of copy-paste" involves a bunch of HTML fragments (menu, footer, sidebar etc.) included with server side includes either with SSI or PHP ; that way you can update the menus on all pages by just editing the HTML fragment file.
posted by handee at 4:54 AM on August 27, 2012 [2 favorites]
Best answer: For me the step between "proper CMS" and "consistent site created with bucketloads of copy-paste" involves a bunch of HTML fragments (menu, footer, sidebar etc.) included with server side includes either with SSI or PHP ; that way you can update the menus on all pages by just editing the HTML fragment file.
Exactly.
Here's the basics of how to do that, though they could be even more fragmented. I usually start each site with a directory called /util, and stick htmlheader.php, header.php, footer.php, and nav.php there plus whatever other partials I'll need. In the example below, vars.php is what I use to set constants like the business name or address or phone, that kind of small stuff that's better done in one place so if there's a change you only do it once. Each actual page then looks like
posted by mimi at 5:28 AM on August 27, 2012
Exactly.
Here's the basics of how to do that, though they could be even more fragmented. I usually start each site with a directory called /util, and stick htmlheader.php, header.php, footer.php, and nav.php there plus whatever other partials I'll need. In the example below, vars.php is what I use to set constants like the business name or address or phone, that kind of small stuff that's better done in one place so if there's a change you only do it once. Each actual page then looks like
(?php
include 'util/vars.php';
include 'util/htmlheader.php';
include 'util/header.php';
$pagename=="contact us" ?)
(p)Some text.(/p)
(?include 'footer.php'; ?)posted by mimi at 5:28 AM on August 27, 2012
What mimi says, but you can also use server-side includes (aka SSI). See http://en.wikipedia.org/wiki/Server_Side_Includes for more details but basically the section in the top table marked "most common directives" should be more than enough to get you started. include virtual = "filename" with the comment marks around it as noted in the article.
posted by rachelpapers at 5:52 AM on August 27, 2012 [2 favorites]
posted by rachelpapers at 5:52 AM on August 27, 2012 [2 favorites]
Best answer: If you google php includes there are lots of great tutorials about like this one from Tizag - it's a great way of building up a library of useful code that you just pull in with a few lines of php.
If Notepad++ has code snippets then you can build your own library very easily too.
posted by humph at 5:53 AM on August 27, 2012
If Notepad++ has code snippets then you can build your own library very easily too.
posted by humph at 5:53 AM on August 27, 2012
includes. use server side includes. alternatively you can use a template that you cut and paste to every new page.
posted by TestamentToGrace at 5:55 AM on August 27, 2012
posted by TestamentToGrace at 5:55 AM on August 27, 2012
Response by poster: Ok - resoundingly common and fast answers make it sound like includes are the answer.
Just to answer first question: it is for the top menu, logo, header info, google analytics, etc, and then for repeating of the footer stuff too...
posted by mtstover at 6:31 AM on August 27, 2012
Just to answer first question: it is for the top menu, logo, header info, google analytics, etc, and then for repeating of the footer stuff too...
posted by mtstover at 6:31 AM on August 27, 2012
You might be interested in Jekyll, which is a "static site generator" - it provides a template system but all of your pages exist as static files, not in a database.
posted by usonian at 6:40 AM on August 27, 2012 [1 favorite]
posted by usonian at 6:40 AM on August 27, 2012 [1 favorite]
You might be interested in Jekyll, which is a "static site generator" - it provides a template system but all of your pages exist as static files, not in a database.
And also requires Git, to work the replication magic. OP might be better server with SSI.
posted by Nonsteroidal Anti-Inflammatory Drug at 6:49 AM on August 27, 2012
And also requires Git, to work the replication magic. OP might be better server with SSI.
posted by Nonsteroidal Anti-Inflammatory Drug at 6:49 AM on August 27, 2012
Response by poster: OP again here -- if I use includes, how do I get rid of the .php at end of pages in the browser? Don't know why but they bother me vs a .html suffix or nothing at all...
posted by mtstover at 6:50 AM on August 27, 2012
posted by mtstover at 6:50 AM on August 27, 2012
Use a .htaccess file (on Apache servers).
posted by katrielalex at 6:55 AM on August 27, 2012
posted by katrielalex at 6:55 AM on August 27, 2012
The 'better way' step between a CMS and copy-paste HTML is actually called aStatic Site Generator. That's the first hit from google, sorry I can't do more but I'm on my phone. I personally use a generator called Octopress.
posted by cgg at 7:05 AM on August 27, 2012 [1 favorite]
posted by cgg at 7:05 AM on August 27, 2012 [1 favorite]
Best answer: You can use .htaccess to change which file extensions are used for what, if you want to:
RewriteEngine on
RewriteRule ^(.*)\.html$ $1.php [nc]
will show .html in the url for what are .php files on the server. (There are zillions of different ways to do this sort of thing; apache configuration is a rabbit hole of complexity -- this is just the first one I happened to google up.)
But note that PHP is not the only way to use includes, and isn't necessarily the best way unless you're already using PHP for other purposes (which you aren't.) Apache's native SSI (see rachelpaper's wikipedia link above) will let you do this without involving a scripting language such as PHP.
Alternatively it may be simpler to do the includes on your side instead of on the server: use some search-and-replaceable marker in your files, whatever you want, while you're editing, then use a text editor that allows mass search-and-replace (Sublime Text 2 seems to be the editor du jour) to plug in all the real stuff before you upload the files.
Once you start doing this, you'll soon discover that you then want to start using includes that aren't exactly the same on every page: you want to highlight the current page in the top menu, change the page title, etc. At this point you'll have outgrown plain old includes, and will need to switch to one of the dozens of static site generators out there, or start using PHP or the like.
posted by ook at 7:09 AM on August 27, 2012 [1 favorite]
RewriteEngine on
RewriteRule ^(.*)\.html$ $1.php [nc]
will show .html in the url for what are .php files on the server. (There are zillions of different ways to do this sort of thing; apache configuration is a rabbit hole of complexity -- this is just the first one I happened to google up.)
But note that PHP is not the only way to use includes, and isn't necessarily the best way unless you're already using PHP for other purposes (which you aren't.) Apache's native SSI (see rachelpaper's wikipedia link above) will let you do this without involving a scripting language such as PHP.
Alternatively it may be simpler to do the includes on your side instead of on the server: use some search-and-replaceable marker in your files, whatever you want, while you're editing, then use a text editor that allows mass search-and-replace (Sublime Text 2 seems to be the editor du jour) to plug in all the real stuff before you upload the files.
Once you start doing this, you'll soon discover that you then want to start using includes that aren't exactly the same on every page: you want to highlight the current page in the top menu, change the page title, etc. At this point you'll have outgrown plain old includes, and will need to switch to one of the dozens of static site generators out there, or start using PHP or the like.
posted by ook at 7:09 AM on August 27, 2012 [1 favorite]
Best answer: SSI or PHP includes are a good solution to this problem - I'll just offer a contrary argument for completeness: Both are overkill for static HTML content, and from a security point of view, you would prefer to keep them disabled in your public server if you don't actually need them. Also, if you are not administering the server yourself, one or both may not be available or may cost extra.
One quick and dirty way of getting around this is deploying your content on a development server with php, ssi or whatever enabled, and then crawling the site with wget or equivalent to get a static, html-only version of the site for the public-facing machine.
posted by Dr Dracator at 7:13 AM on August 27, 2012
One quick and dirty way of getting around this is deploying your content on a development server with php, ssi or whatever enabled, and then crawling the site with wget or equivalent to get a static, html-only version of the site for the public-facing machine.
posted by Dr Dracator at 7:13 AM on August 27, 2012
For whatever it's worth, I've used PHP includes and some other simple PHP coding on some mostly-static web pages, and I'm pretty sure they were vulnerabilities used to attack my website and install a bunch of spammy crap.
SSIs should not be vulnerable in that way. I think.
posted by adamrice at 7:24 AM on August 27, 2012
SSIs should not be vulnerable in that way. I think.
posted by adamrice at 7:24 AM on August 27, 2012
You might find dreamweaver's templates useful for this. I only ever write code by hand (not using dreamweaver's WYSIWYG junk) and will often do small static sites where it's not worth getting a CMS installed (or the client's budget didn't allow for it.)
The main advantage is that you could continue to change your headers and footers, and have that change updated across each page you've made with the template. (you'll need to open each file in dreamweaver to have that updated link happen.)
There are a few other light weight HTML templating programs like RapidWeaver, if you'd rather not hand Adobe a hefty hunk of cash for DW.
This is all from the perspective of a designer not a developer.
posted by fontophilic at 7:33 AM on August 27, 2012
The main advantage is that you could continue to change your headers and footers, and have that change updated across each page you've made with the template. (you'll need to open each file in dreamweaver to have that updated link happen.)
There are a few other light weight HTML templating programs like RapidWeaver, if you'd rather not hand Adobe a hefty hunk of cash for DW.
This is all from the perspective of a designer not a developer.
posted by fontophilic at 7:33 AM on August 27, 2012
Response by poster: Excellent fontophilic. Are there any other cheap, PC based alternatives to dreamweaver I should know about?
I'd love to keep this as absolutely dead simple as possible. All I ever do are 5 or 6 page sites, so if I can avoid futzing with server stuff it will be great (recognizing that it is not MUCH server futzing.)
posted by mtstover at 7:42 AM on August 27, 2012
I'd love to keep this as absolutely dead simple as possible. All I ever do are 5 or 6 page sites, so if I can avoid futzing with server stuff it will be great (recognizing that it is not MUCH server futzing.)
posted by mtstover at 7:42 AM on August 27, 2012
You can do some kludgy JavaScript stuff and gain (some of) the benefits of SSI without doing any server work. Build out your header and footer etc as distinct files, and then run that through a JavaScript document.write generator (here's one, there are many others out there) THEN save that file as a .js, and call it from your page as an external script. So, at the top of each page it'll say:
...and at the bottom, below all of your content, it'll have:
...and when the page renders those JavaScripts will write out the header and footer HTML and the page will look like a regular html page to anyone with a browser that has JavaScript enabled which is, well, most.
That way you have a single file that you can edit to affect the header/footer for all pages that call that file, much like an SSI, but you don't need to do any server configuring. Yes, for a variety of reasons a real SSI is better, but this does work.
posted by dirtdirt at 8:00 AM on August 27, 2012
<script type="text/javascript" src="/myheader.js"></script>
...and at the bottom, below all of your content, it'll have:
<script type="text/javascript" src="/myfooter.js"></script>
...and when the page renders those JavaScripts will write out the header and footer HTML and the page will look like a regular html page to anyone with a browser that has JavaScript enabled which is, well, most.
That way you have a single file that you can edit to affect the header/footer for all pages that call that file, much like an SSI, but you don't need to do any server configuring. Yes, for a variety of reasons a real SSI is better, but this does work.
posted by dirtdirt at 8:00 AM on August 27, 2012
[Jekyll] ... also requires Git, to work the replication magic. OP might be better server with SSI.True, Git is required for a "Push and automagically rebuild the site" workflow, but you can use Jekyll without it if you have shell access to the server and are comfortable with command line basics.
posted by usonian at 8:05 AM on August 27, 2012
I'd love to keep this as absolutely dead simple as possible. All I ever do are 5 or 6 page sites
For work on the scale you're talking about, you're almost certainly best off simply using a text editor that supports multi-file search-and-replace, starting with boilerplate HTML copied into each of the files you need to add content to, and only ever modifying the boilerplate blocks of content by search-and-replacing it in all the files at once. (Or bonus points for learning regexp and using that in your search-and-replacing.)
The catch with includes or static generators is that testing the pages while you build becomes a bit more complicated -- you either have to develop and test within a live apache instance (for includes), or run your static generator every time you want to see the results of a change. For larger or more complicated sites this extra work is a worthwhile tradeoff, but if you're doing lots of tiny sites it's probably more work than it's worth.
I'm not a fan of Dreamweaver or other HTML editors of its ilk; I think they do more harm than good. They're fine as far as they go, I guess, but in using them you wind up learning how to use dreamweaver instead of learning how to write HTML, which puts you at one remove from understanding what your code is actually doing and gives you a lot of nontransferrable knowledge when you finally outgrow the editor's capabilities. DW is much better than it used to be about not treating html as this magical black box to be hidden from its user, but I still think it's a counterproductive in the long run.
posted by ook at 11:22 AM on August 27, 2012
Best answer: Here's one more recommendation for either server side includes or PHP includes. I'd say just go ahead and leave the .php extension alone instead of fiddling with some URL rewrite settings. It's not like the .php extension hurts anything.
A typical include based page has really simple code. Usually not more complicated than say:
But what I really want to say to you is this: DO NOT USE DREAMWEAVER TEMPLATES.
Those templates are the god damned devil. Like ook said, learning to set them up is learning how to use dreamweaver, not learning how to make a website. But more importantly, they are just a pain in the ass. Sure, you'll get them set up and get used to that workflow and all will be well for a while, but believe me, eventually something minor will change in your workflow or the structure of the site that will turn the template into your enemy. It sometimes takes years, but this process has happened to every single site I've inherited that used DW templates.
posted by cirrostratus at 2:01 PM on August 27, 2012
A typical include based page has really simple code. Usually not more complicated than say:
<?php include 'header.php'; ?>
<p> the contents of your page</p>
<?php include 'footer.php'; ?>
But what I really want to say to you is this: DO NOT USE DREAMWEAVER TEMPLATES.
Those templates are the god damned devil. Like ook said, learning to set them up is learning how to use dreamweaver, not learning how to make a website. But more importantly, they are just a pain in the ass. Sure, you'll get them set up and get used to that workflow and all will be well for a while, but believe me, eventually something minor will change in your workflow or the structure of the site that will turn the template into your enemy. It sometimes takes years, but this process has happened to every single site I've inherited that used DW templates.
posted by cirrostratus at 2:01 PM on August 27, 2012
Best answer: @Handee has it right. Use includes.
If you're looking for an alternative to Dreamweaver on the PC, try Microsoft Visual Web Developer 2010 Express edition. It's got some Microsofty-quirks, but I like it better than Dreamweaver. I wouldn't recommend only using its WYSIWYG mode, but it does work on static sites, unlike Dreamweaver.
At the end of the day, I wouldn't recommend a static site at all. Static sites scale horribly in terms of the labor it takes to maintain them. (Complex page updates TAKE FOREVER). Use a CMS if you can. If you can't use includes files.
posted by cnc at 2:05 PM on August 27, 2012
If you're looking for an alternative to Dreamweaver on the PC, try Microsoft Visual Web Developer 2010 Express edition. It's got some Microsofty-quirks, but I like it better than Dreamweaver. I wouldn't recommend only using its WYSIWYG mode, but it does work on static sites, unlike Dreamweaver.
At the end of the day, I wouldn't recommend a static site at all. Static sites scale horribly in terms of the labor it takes to maintain them. (Complex page updates TAKE FOREVER). Use a CMS if you can. If you can't use includes files.
posted by cnc at 2:05 PM on August 27, 2012
Response by poster: ....And the winner is.... Includes. Thanks all. I played around with it and you're right - it's really easy!!
posted by mtstover at 8:46 PM on August 27, 2012
posted by mtstover at 8:46 PM on August 27, 2012
This thread is closed to new comments.
Other options:
Create a "template" file with all this information already in it, and just open that and save it as a new page/file for each page you're working on.
You could also look into something like autohotkey or texter to create a macro that, when typed into any program, creates all that code.
honestly I use a combo of the dreamweaver and the template file. Using the template ensures that the design stays consistant across all your pages.
posted by royalsong at 4:48 AM on August 27, 2012 [1 favorite]