Advice on creating a easy to edit site layout

Discussion in 'Web Design and Development' started by zjb, Aug 18, 2010.

  1. zjb macrumors newbie

    Joined:
    Aug 28, 2009
    #1
    I apologize in advance if this post comes across as scattered or otherwise hard to follow. I also also apologize if there is some location where this has been asked and answered before. I did skim the posted topics, as well as some search results and didn't find what I was looking for. Likewise, Google wasn't any help, though I could have been unclear in what I was looking for.

    I have been tasked with redesigning a site at work that isn't more than 10 pages total at the moment. There is an external css document that provides the styling for divs and everything else. The problem that is currently bugging my boss is that if a change needs to be made to the header, footer, navigation bar, etc., each page has to be opened individually and edited. What he would like to see is a layout that allows myself or whoever gets tasked with it after me to open one document that will let us make changes to the content of the "infrastructure" of the site (header, footer, nav, etc.....i.e. the stuff that doesn't change on each page). The body content that is unique to each page would still be edited by opening the respective document.

    Currently the site uses primarily html, and I possess limited proficiency in other languages (which is not to say that I'm terribly proficient with html either...). Does anyone have any thoughts on how this could be accomplished - preferably in the least script-heavy method possible?

    Many thanks to all that can contribute.
     
  2. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #2
    If you use dreamweaver, you can set sections of the html as part of a template and so that when you make a change to it, it will change it sitewide and will eliminate the need for you to manually change it.

    One other way would be to convert the sections to php and all you would need to do an include.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    I use PHP for this for my site, using the include function. If that's not an option see if the web server supports SSI (server side includes).
     
  4. jsm4182 macrumors 6502

    Joined:
    Apr 3, 2006
    Location:
    Beacon, NY
    #4
    I second a Dreamweaver template if you have access to dreamweaver. I use it on all my small static content sites(I use drupal for the bigger and more dynamic sites)
     
  5. zjb thread starter macrumors newbie

    Joined:
    Aug 28, 2009
    #5
    Thanks to everyone for their input.

    With regards to PHP, is it terribly difficult to convert sections to PHP and then utilize includes? From my limited understanding this sounds similar to SSI's include command. I'll have to do some more reading when I get off of work, as its glaringly apparent that I don't know enough about them to make a good decision.

    I do have access to Dreamweaver, though I have never really played with its template capabilities. Essentially what folks are saying is that although this simplifies the editing process, if someone who did not have Dreamweaver were asked to edit the page, they would have to do each page individually?
     
  6. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #6
    PHP is what you want. I had some great help from people here, and in another forum.
    Someone gave me great advice here; presumably you will have your site all same pages. You can create the top part of your page - layout nav bar etc. As angelwatt said php include function to show it on your page, then you can have your normal content.
    The basics of this (and I am not in a position to be giving advice as I am pure amateur) you need to name your files .php after their name. Php transfers the html onto the page, so I'd have document type thingy in your file (lets call it top.php has your nav bar, master header etc) you leave the <html> tag open, and another file (this is one of your ten pages) lets call this page1.php (put your content in here) as in unique content like about us or previous project you worked on etc.
    In your file 'page.php' you (as angelwatt said) use php include top.php, then in your file after including it close your html tag. So say you make a change to the navigation list, or masterheader it will update all ten pages just by editing one :). Here is how I (with the help of angelwatt, and others managed it)
    top.php
    PHP:
    <!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" xml:lang="en" lang="en">
    <head>
    <title><?php echo $pagetitle?></title>

    link to your stylesheet
    </head>

    <body>

    page1.php
    [PHP]<?php
    $pagetitle
    ='Formwork Services';
    include 
    'top.php';
    ?>

    <h1>High Finish Formwork</h1>
    <p>When we undertake a project we prefer to take on all works, so we can take all responsibility and ensure the works are to our high Standards.</p>

    <h2>Steel Reinforcement</h2>
    <p>We follow steel reinforcement details strictly and though the nature of steel reinforcement means it is not visible as the end product, we still treat it with pride and positive comments are always made on the presentation of our steel reinforcement.</p>

    <h3>Concrete Placement</h3>
    <p>Often concrete placement is seen as unskilled work, and often sub-contractors delegate the placing of concrete to the cheapest workers. Our team are experienced and take personal pride in their work.</p>

    <?php
    include 'bottom.php';
    ?>
    <div id="container">

    <div id="masterhead">
    Your masterheader however you choose to have it.
    </div>

    <ul>
    Your nav list here or etc.
    </ul>
    <div id="page-content">
    [/PHP]

    PHP:
    <?php
    $pagetitle
    ='[COLOR="DarkOrange"]your page title here[/COLOR]';
    include 
    'top.php';
    ?>

    <h1>[COLOR="DarkOrange"]your heading etc[/COLOR]</h1>
    <p>paragraph and other content like this</p>

    </html>
    </body>

    I have probably had some errors and may have forgotten a tag or two etc. as opening and copying different files but hopefully you get the gist of it.:) w3schools.com can give you a little insight to how it works, and when you come against problems I'll try to help a bit, (I'm no expert, but people have really helped me and really appreciate it and would be nice to help someone else and give something back to the forum :D).
     
  7. zjb thread starter macrumors newbie

    Joined:
    Aug 28, 2009
    #7
    Thanks very much for your help as well Dal123. That sounds like it will do what I want pretty well. I'll have to give that as well as a Dreamweaver template a try when I get home to see how it goes.
     
  8. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #8
    Sorry I messed it up a bit, you can see where the code runs out the thingy :eek: :eek: sorry :eek:.
     
  9. zjb thread starter macrumors newbie

    Joined:
    Aug 28, 2009
  10. Dana Beck macrumors member

    Dana Beck

    Joined:
    Jun 13, 2010
    Location:
    Blackwell, OK
    #10
    Contribute ancillary to DW

    To allow end users to edit content--and only content-- areas, in conjunction with Dreamweaver templates, check into Contribute, an inexpensive program that let's you lock down structural areas of the page layout, while still allowing end users editing privileges.
     
  11. RobertD63 macrumors 6502

    Joined:
    Feb 17, 2008
    Location:
    A place
    #11
    I disagree with everyone that says Dreamweaver is the way. For users that don't know what they are doing web wise, it will be hard to edit it with out messing something up. Also editing pages in a WYSIWYG editor is the devil!
     
  12. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #12
    You do know that Dreamweaver offers the option to work in strictly code view? While I do see the Design view of Dreamweaver as a crutch, it can be helpful to someone who's still learning.

    While I would recommend programs such as Coda to any experienced web developer, someone who's inexperienced might be better served be better served by something in the middle ground that Dreamweaver offers.
     
  13. RobertD63 macrumors 6502

    Joined:
    Feb 17, 2008
    Location:
    A place
    #13
    Yes I do, and I hate Dreamweaver. I'm not even close to being an experienced web developer, but I use coda.
     

Share This Page