SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple pages without repeating the site structure

    I have multiple pages on a site I'm working on. Each page has the same header, menu, and footer. The only thing that changes is the content. Presently, I have to copy and paste the page layout for each page. It's a pain, especially when I want to make changes. I know it is possible to build a site and "load" the content into a content section of the page. That way, changing the layout in one file, changes all the pages.

    What is this technique called and how is it accomplished? Is it possible without server-side scripting?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Some web editors will allow you to define common pieces of the page as a template and so will apply any changes to that template to all of the pages when next you open them in that editor. It still needs to regenerate all of the HTML for every page of your site for you to upload to your site before anyone sees the change in that case.

    There are two alternative server side alternatives. One is to use server side includes which allows you to include one HTML file inside another. It does require SSI to be enabled on the server for the includes to work and the files using the include statements usually need a .shtml extension for the includes to be processed by the server.

    The other server side alternative is to use a programming language that generates the HTML for each page and which allows for a lot of other things as well as being able to share common HTML.

    Things that you can share between all of your pages without needing any of the above are all the CSS to define how the pages look and all the JavaScript to define how the pages behave. You can upload a single file for each of these and link the CSS into the head of each page with a single HTML tag and the JavaScript to the very bottom of the body of each page - also with just a single HTML tag.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The other server side alternative is to use a programming language that generates the HTML for each page and which allows for a lot of other things as well as being able to share common HTML.
    Which is the approach I'd suggest you learn... using PHP since it's the most commonly available on servers.

    Let's just say you have everythign before your unique content in header.php

    header.php:
    Code:
    <!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"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    <?php
    	echo isset($pageName) ? $pageName.' - ' : ''
    ?>
    	Site Name
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		Site Name
    		<span><!-- image replacement --></span>
    	</h1>
    	
    	<ul id="mainMenu">
    		<li><a href="#">Home</a></li>
    		<li><a href="#">Forums</a></li>
    		<li><a href="#">Links</a></li>
    		<li><a href="#">Contact</a></li>
    	</ul>
    	
    	<div id="contentWrapper"><div id=content">
    and everything after your unique content in a footer.php

    footer.php
    Code:
    	<!-- #content, #contentWrapper --></div></div>
    
    	<div id="sideBar">
    		SideBar Content Here
    	<!-- #sideBar --></div>
    	
    	<div id="footer">
    		&copy Whoever, All rights reserved.
    	<!-- #footer --></div>
    	
    <!-- #pageWrapper --></div>
    
    </body></html>
    Each of your unique pages would then be built using php thus:

    Code:
    <?php
    $pageName='Unique Page Name';
    include('header.php');
    ?>
    
    	<h2>Unique Page</h2>
    	<p>
    		Unique page content here
    	</p>
    
    <?php
    include('footer.php');
    ?>
    That's the simple way. I would actually probably use functions for the header and footer using echo statements, but I tend to pass more unique data to the page -- this was just a quick example. (Normally I don't advocate even using <?php ?> more than once in a file -- but this is likely simpler for you to follow just starting out)

    I threw in the $pageName variable so you could start to see how those work as well. That way you can pass a unique TITLE tag to each sub-page. More advanced you could "trap" that variable when building the menu to highlight the current page.

  4. #4
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, the IT department doesn't let gearheads like me mess with ASP or PHP for department websites, so Server-side scripting isn't an option for me. Most of our department websites are very basic single page sites generated using MS Word.

    I used an XSLT template to generate en employee directory on one page using javascript to insert the content. I suppose I could do the same thing with the whole page layout. Although, visualizing the page layout using XSLT isn't very intuitive. Opinions?

    A web editor with the option to define a common portion of a layout sounds like a viable option. Can anyone recommend a web editor with this functionality? I've tried komodo edit and coffeecup html editor and I don't think it's possible in these editors.

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,173
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Bluefish has a facility to create templates, which might be what you're after. I use Bluefish on Linux, but there are instructions for installing it on Mac or Windows.

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SharpBarb View Post
    Unfortunately, the IT department doesn't let gearheads like me mess with ASP or PHP for department websites
    Ok, sounds like they have no business being your IT department.

    Quote Originally Posted by SharpBarb View Post
    generated using MS Word.
    So utterly useless web pages with zero accessibility, wasting endless bandwidth on disastrously bad markup, no implementation of caching, and worst of all doesn't work properly in anything but IE6? OUCH.

    Quote Originally Posted by SharpBarb View Post
    I used an XSLT template to generate en employee directory on one page using javascript to insert the content. I suppose I could do the same thing with the whole page layout. Although, visualizing the page layout using XSLT isn't very intuitive. Opinions?
    Which doesn't gracefully degrade when .js isn't present making the page an accessibility nightmare.

    Quote Originally Posted by SharpBarb View Post
    A web editor with the option to define a common portion of a layout sounds like a viable option. Can anyone recommend a web editor with this functionality? I've tried komodo edit and coffeecup html editor and I don't think it's possible in these editors.
    "Web editors" -- half assed garbage that only teach you how NOT to build a website. Do yourself a favor, get in the IT departments face about letting you use server side includes, and start building real websites instead of output from Word. It will save the company money in the long run, open up the site in question to a larger audience, STOP pissing on the companies reputation the moment anyone opens up the site in a modern browser, and maybe get some real traffic through it since I very much doubt what you currently have makes any sense to search engines -- much less accessibility aids like screen readers.

    It might sound harsh - but you last post has all the warning signs of "maybe it's time to hire a real web developer" since it sounds like the typical "Internet, what's that" approach to having a web presence.

  7. #7
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the website that I am trying to setup is an internal department website. They are usually generated by the respective departments by someone from that department with little to no experience in web development. They are not publicly accessible and for the most part they accomplish what they need to, giving a little bit of information about the department. I'd like to make my departments site a little better than that. I know more than the average person about building a website, but I wouldn't call myself a web developer.

    Most of the sites are total garbage, that don't even work in ie6. Even more unfortunate is that 99% of the workforce is using ie6. So I've been build a website and learning the joys of fixing it for ie6.

    I spoke with the IT supervisor and they said that although they can't give me access to setup or configure a directory that can use ASP and a database, they should be able to set it up for me. Of course, now I have to learn ASP.NET.

  8. #8
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    I would ask if their setup supports SSI (server side includes). It's a very simple system to use, no real programming involved, and works on most servers.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •