Grow your CSS skills. Land your dream job.

How do you create a "new" page for a site?

  • # October 15, 2008 at 12:04 am

    Hello everyone, this is a great forum with a lot of information in it. Thanks to Chris and everyone who help’s for having a great place for someone like me who is just starting out to learn how to make (or attempt to make) great looking and usable websites. :D

    So my question is, I’m working on a new site for our family business and I used Photoshop create a mock up and then hand coded the html in Dreamweaver with css and I’m starting to add a little js in as I learn more of it. Now the index or home page is done and now I want to create more pages. For our last site (the first time I ever attempted creating a website) I used DW’s design view and used one of the built in template’s and built each page using the same template, not using any type of external css and it came out so bad I’m really embarrassed by it. Now that I have come to the conclusion that web design and dev is what I want to do (used to be computer sci and development) I want to learn how to do it right.

    So how do you add page’s to your site? Do you create editable templates, copy and paste the basic bone html structure?

    # October 15, 2008 at 2:55 am

    I usually start by creating the index.html (home page). I do this by making a header, navigation area, content area, then footer. when I need to make another page, i take the index page, delete the content area, re save the page as the second page then add the appropriate content to that page.

    # October 15, 2008 at 4:45 am

    My method is the same as cybershot. However, if you’re using php, you will want to consider the ‘include’ function, it’s a very handy feature~

    # October 16, 2008 at 4:18 am

    Besides the site that I’m currently working on (http://www.thedailyspunkmeyer.com) which uses the wordpress engine, my site always comprises of an index.php. The content of which usually looks like:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



    < ?php include('header.html');?>


    < ?php include('top.html');?>


    < ?php include('navigation.php');?>


    < ?php
    $pagename=$_GET['page']; // Get the pagename from the URL

    if ($pagename == 'about') { /* If the pagename is 'about', include content/content-about.html, otherwise, check to see if the following 'pagenames are present*/
    include('content-about.html');
    }
    elseif ($pagename == 'services') {
    include('content-packages.html');
    }
    elseif ($pagename == 'portfolio') {
    include('portfolio.php');
    }
    elseif ($pagename == 'whybooster') {
    include('content-whybooster.html');
    }
    elseif ($pagename == 'resources') {
    include('content-resources.html');
    }
    elseif ($pagename == 'contact') {
    include('content-contact.html');
    }
    else {
    include('content-main.html'); //If no pagename is present, default to the main content page
    }
    ?>


    < ?php include('footer.html');?>


    The above code is really simple and only really works with a small amount of pages, but works fantastic. Basically, you use PHP includes to call each portion of the page… the header, top, navigation and what have you. That way, you only edit one page and the changes are made across the site.

    # October 16, 2008 at 12:43 pm

    Thanks for the reply’s. Looks like it’s time to learn some PHP.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".