Update page design on all pages as a template

Discussion in 'HTML & Website Design' started by jazzzyman, Apr 17, 2013.

0
Page 1 of 2
  1. #1
    Is it possible to use a page as a template and define what is design.
    So i can change the page design and have that reflected on all pages referencing this and then just insert content that will be unique to that page only?

    Dont want to be updating page design manually all the time as i plan on adding more drop down menus etc over time.
     
    jazzzyman, Apr 17, 2013 IP
  2. rolodex

    rolodex Well-Known Member

    Messages:
    364
    Likes Received:
    37
    Best Answers:
    5
    Trophy Points:
    175
    #2
    Yeah. You can use Content Management System (CMS), like Wordpress, Joomla, etc. If you have knowledge on PHP, ASP .Net or any other server-side scripting, you can utilize that as well.
     
    rolodex, Apr 17, 2013 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Sounds to me like you are describing what semantic markup and CSS' job is, as well as separation of presentation from content. You know, those things I'm always ranting on and on about that certain people seem to dismiss out of ignorance?

    Though it does also sound like you're talking about separating the content FROM the template, which is server side includes job --- aka PHP, Perl, ASP, ColdFusion, any of those.

    @rolodex, I think you missed the question.

    Without diving for a full CMS that may or may not meet your needs, you just break a page into it's sections.... A simple example would be:

    index.template.php:
    <?php

function template_header($pageTitle) {
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="viewport"
	content="width=device-width; initial-scale=1.0"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	',(isset($pageTitle) ? $pageTitle.' - ' : ''),'Site title
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Site Title
		<span><!-- image replacement --></span>
	</h1>

	<ul id="mainMenu">
		<li><a href="home">Home</a></li>
	</ul>

	<div id="contentWrapper"><div id="content">';
	
} // template_header

function template_footer() {

echo '
	<!-- #content, #contentWrapper --></div></div>

	<div id="extras">
		"SideBar" content Here
	<!-- #extras --></div>

	<hr />

	<div id="footer">
		Footer Content Here
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>';

} // template_footer

?>
    Code (markup):
    then an example page, let's say your links to other sites, would go like this:

    links.php
    
<?php
  require_once('index.template.php');
  $pageTitle = 'links';
  template_header($pageTitle);
?>
<!-- your normal page content goes here -->
<h2>Links</h2>
<ul class="links">
  <li><a href="http://www.google.com">Google</a></li>
  <!-- etc, etc... -->
</ul>

<?php
  template_footer();
?>
    Code (markup):
    That separates your content from the header and footer, letting you modify them across all pages as needed... Though again, if you are practicing separation of presentation from content and use the proper wrappers in the first place, unless you are adding or removing actual content from the page, much of what you describe is CSS' job.
     
    deathshadow, Apr 18, 2013 IP
    rolodex likes this.
  4. rolodex

    rolodex Well-Known Member

    Messages:
    364
    Likes Received:
    37
    Best Answers:
    5
    Trophy Points:
    175
    #4
    I see. What do you think of php include? I find that useful too.
     
    rolodex, Apr 18, 2013 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    I dislike "include", but that's because it doesn't throw an error and stop execution on file not found. that's the difference between "include" and "require". I don't like anything that plods along like nothing is wrong when there's an error. (see my fundamental philosophical disagreement with HTML parsers)

    More important to me though is the use of _once. I was taught that in scripting languages you don't let includes output anything, EVER if they are called directly, meaning everything should be in functions. Using _once makes sure the file is included, without trying to self-overload.
     
    deathshadow, Apr 18, 2013 IP
  6. jazzzyman

    jazzzyman Well-Known Member

    Messages:
    117
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #6
    I see where your going with that, even with basic knowledge of coding but seems a bit over my head. ive adopted using css in external files but am just working on a few minor details.
    Changing the page extension to php is something im going to have to avoid even with 301ing them to the php version.
    Is there nothing simpler anyone can think of?
     
    jazzzyman, Apr 18, 2013 IP
  7. rolodex

    rolodex Well-Known Member

    Messages:
    364
    Likes Received:
    37
    Best Answers:
    5
    Trophy Points:
    175
    #7
    How about iFrame? Or tedious copy-paste? I can't think of anything else, maybe others do, but server-side scripting is the only way easiest. Maybe hard to accomplish, but once you do, it's simple.
     
    rolodex, Apr 18, 2013 IP
  8. jazzzyman

    jazzzyman Well-Known Member

    Messages:
    117
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #8
    Just trying to move away from iframes to increase page load times
    I might just stick to the old find and replace/manual upate for a while as its not a huge site
     
    jazzzyman, Apr 18, 2013 IP
  9. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #9
    Try SSI (Server Side Includes). Is that still a thing?

    All you do is break HTML up as per normal into different files, so a header.htm and a footer.htm.

    Then on your page, in the HTML, you just add this:

    
<!--#include file="header.htm" -->
    HTML:
    Works the same way as PHP include() but...without PHP, so its good for small sites with a few pages.

    Etc. You will probably need to save your file as a .shtm file.
     
    blueparukia, Apr 18, 2013 IP
    rolodex likes this.
  10. rolodex

    rolodex Well-Known Member

    Messages:
    364
    Likes Received:
    37
    Best Answers:
    5
    Trophy Points:
    175
    #10
    This is new to me. Thanks! I'm gonna try it out.
    Is there any catch to this? Maybe not good practice? No?
     
    rolodex, Apr 18, 2013 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #11
    It's Apache specific, it has to be enabled in the copy of apache you are running... but otherwise it can be used to 'glue' bits of code together quite reliably. It's also a nice intermediate step between diving in whole hog with PHP, though really 'how it works' is not really any different from PHP includes.

    <!--#include file="header.htm" -->
    vs.
    <?php include('header.htm'); ?>

    Difference is so little as to make no never-mind... but it does mean that you can still call them .htm (though why you'd even have them as .htm instead of .html in 2013 is beyond me)

    Really I wouldn't worry about old links dying off just from going to .php instead of .htm -- if it doesn't recover in a month from the change even without redirects, you might not have content of value. People are SO paranoid about that stuff these days when if you have content of value people actually want presented in a useful manner, it shouldn't make a lick of difference!

    But with people using SEO and chicanery to effectively dump a can of shellac on a pile, it's not that hard to figure where that paranoia originates.

    -- edit --

    Oh, and when using includes be it SSI or PHP, remember that even if you call the sub-files .htm or .html or whatever, the file is treated exactly as if you typed it EXACTLY where you included it -- so do NOT put a doctype and HEAD on every single one of them! You see people do this all the time...

    ... and how about a link to the official tutorial?
    http://httpd.apache.org/docs/2.2/howto/ssi.html
     
    deathshadow, Apr 18, 2013 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #12
    Actually, wait... I think you still have to call them .shtml instead of just .html or .htm -- you'd think since it's .htaccess or httpd.conf configurable you'd be able to make a rewriterule to make it work on the other extensions.

    -- edit -- might help if I read the tut since it's been so long. It's right there, you can set it up to parse files with the execute bit set -- so you'd have to chmod them or set the x-bit from your FTP client.

    though this line:
    AddOutputFilter INCLUDES .shtml

    if you changed that to say .html or .htm, would that work? I'm gonna test that.
     
    deathshadow, Apr 18, 2013 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Ok, yeah. SHTML is a viable option. I put together a working demo here:
    http://www.cutcodedown.com/for_others/jazzyman/shtmlDemo/test.htm

    Which as you can see in the directory is built from three separate files:
    http://www.cutcodedown.com/for_others/jazzyman/shtmlDemo/

    Of course you can't see the .htaccess so I put that in the parent directory as well as the little source bits as .txt files.
    http://www.cutcodedown.com/for_others/jazzyman/

    The .htaccess is pretty simple:
    Options +Includes
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml .htm .html .html.inc
    Code (markup):
    I used .html.inc for include files to make it clear that it's an include (so never called directly) and that it does contain HTML.

    The header one:
    http://www.cutcodedown.com/for_others/jazzyman/header.html.inc.txt

    I put in a echo of a variable include to test that you can change the contents of the TITLE tag if so desired, with the test.htm file being a simple:

    <!--#set var="pageName" value="Test -" -->
<!--#include file="header.html.inc" -->
Page Content Here
<!--#include file="footer.html.inc" -->
    Code (markup):
    The first line #set does what it sounds like, stores a value in a apache variable; one we made up for our own use, "pageName" -- to store what will be added to the beginning of TITLE. You don't want one you should still set it as empty manually, otherwise it will show "(none)"... The next line is a raw include, as is the last line. Anything in the middle is the content unique to that page.

    I put the sidebar in the footer, but depending on your page and layouts you could just as easily make another include to have different sidebars or even different layouts. Not too difficult, and it will run on existing .htm files -- which is EXACTLY what you are looking for, right?

    Admittedly it's an Apache only solution, but that's usually not too big a deal.

    -- edit --
    I tossed a .rar of the working demo in there for you.
    http://www.cutcodedown.com/for_others/jazzyman/shtmlDemo/jazzyman.rar

    I always find it easier to learn from a working demo.
     
    Last edited: Apr 18, 2013
    deathshadow, Apr 18, 2013 IP
    blueparukia likes this.
  14. rolodex

    rolodex Well-Known Member

    Messages:
    364
    Likes Received:
    37
    Best Answers:
    5
    Trophy Points:
    175
    #14
    I have saved this as pdf. I will practice. I will. I will....and now I'm waiting for your review of that porn site, Death Teacher.
     
    rolodex, Apr 18, 2013 IP
  15. jazzzyman

    jazzzyman Well-Known Member

    Messages:
    117
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #15
    porn site lol
    ok il see if i cant get the hang of it and give it a go but prob just going to stick to the old manual changes for now but you never know - cheers
     
    jazzzyman, Apr 18, 2013 IP
  16. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #16
    Yes, with a little programming knowledge you could include same header and footer in every one of your pages. And the rest of the design, from CSS , of course. Using frames is history already, not a very good technique, that will only downgrade your site.
     
    webcosmo, Apr 19, 2013 IP
  17. GM ORNOB

    GM ORNOB Greenhorn

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #17
    just use CMS system such as Wordpress , joomla , Drupal etc , this is very powerfull solution for control your content properly
     
    GM ORNOB, Apr 20, 2013 IP
  18. jazzzyman

    jazzzyman Well-Known Member

    Messages:
    117
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #18
    i keep toying with the idea of trying this
    i think its quite clever
    just not sure if its going to be too much hastle
     
    jazzzyman, Apr 23, 2013 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #19
    It's usually far less hassle in the long term -- for example, let's say six months from now you want to add one item to your main menu; if all you have is static pages, you have to edit each and every page just to add that one item. Templating using SSI, PHP or any other method means edit once, hit everything. It's how most all 'real' websites are built! Reusing the same bits on all pages is always less work in the long run, even if you are only going the "poor man's" route of gluing stull together with includes.

    Sounds like it's time to put on the big boy pants.

    Really it's one of the things I'm always on about -- you have to look at the long term; expedience in the here and now most always costs you more later - and this is true of EVERY sleazy shortcut people take. (WYSIWYG's, Frameworks, etc) -- It's a difficult concept to drive home in this day and age, where everyone does everything on credit. Pay more later for something you can't afford now is NOT a good decision -- but people do it all the time. People are SO obsessed with the here and now, they'll completely shtup their own future and profitability with irrational decision-making.... result being the concept of "an ounce of sweat now saves a gallon of blood later" is outright alien to most.
     
    deathshadow, Apr 23, 2013 IP
  20. jazzzyman

    jazzzyman Well-Known Member

    Messages:
    117
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #20
    would you really need to break it up into that many sections
    couldnt you just use the whole page as a template and insert content into a predefined area?
     
    jazzzyman, Apr 23, 2013 IP
Page 1 of 2