Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Oct 2007
    Posts
    3
    Member #
    15942
    Hello all, this is my first post on these forums. Please bare with me through this slightly long post. I hope I am not offending any rules.

    I have recieved the task of making a simple website for a sports team. What I intend to do is a basic design where there's a horizontal banner on top, then followed by two columns below that. One narrow column will be a list of navigation links, and the other wider column will be the main web page content. What I have in mind is very similiar to this page: www.ringette.ualberta.ca

    What I was first going to do was use a basic tables layout using pure HTML. However, the problem with that is that the upkeep/maintainence of the page will be very difficult. Everytime another page is to be added, then I would have to add a navigation link into the navigation column of every single existing page. What a pain!

    This is probably a good time to say that I am using just a plain text editor to make the website. No fancy programs to help me automate anything.

    So my second plan was to use frames. This way, I can split up the page into modules where the navigation column (or frame) would be it's own "navigation.html" frame so that when I add a page, then I would only have to change this one .html file. This sort of solves my problem, however, frames are not very pleasing. Most people don't like them. I don't like how the scrolling will have to look if I used frames. That's why I looked further.

    Now comes the CSS. After a few hours of research online, (I know nothing about CSS before today) CSS seems like a very efficient and clean way of defining the styles on your page. There was also promise that it would allow me to make the page modular (with 3 sections: top_banner, navigation, main_content) just like how it would work with frames. I picked up a CSS for dummies book and to my surprise, it says nothing about how to make it "modular." so that if i was to add a link to the navigation section, then that new link would appear on all my pages.

    My question is, is it possible to achieve this frame-like modular setup with CSS? If not, what do you recommend me doing? Can someone please point me in the right direction.

    The other question is, if this CSS thing will not work, then does that mean I will have to get a web design program? What's a simple web design program that would be appropriate for my task? Are there free ones that are good enough?


    Thanks a bunch,

    Weiyang

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Try using PHP and includes:

    index.php
    PHP Code:
    <?php include_once("header.php"); ?>

    <h1>Welcome to Our Site!</h1>
    <p>This is our content!!!</p>

    <?php include_once("footer.php"); ?>

    header.php
    PHP Code:
    <html>
        <head>
            <title>My Page</title>
        </head>
        <body>
            <div id="wrapper">
                <div id="header">
                    <div id="logo"><img src="logo.gif" /></div>
                    <div id="menu-top">
                        <?php include("menu_top.php"); ?>
                    </div>
                </div>
                <div id="page">
                    <div id="left">
                        <div id="menu-left">
                            <?php include("menu_left.php"); ?>
                        </div>
                    </diiv>
                    <div id="right">
                        <div id="content">

    <!-- START CONTENT -->
    footer.php
    PHP Code:
    <!-- END CONTENT -->

                        </
    div>
                    </
    div>
                </
    div>
            </
    div>
        </
    body>
    </
    html

    menu_top.php
    PHP Code:
    <ul>
        <
    li><a href="/">Home</a></li>
        <
    li><a href="about.php">About Us</a></li>
        <
    li><a href="contact.php">Contact Us</a></li>
    </
    ul
    menu_left.php
    PHP Code:
    <ul>
        <
    li><a href="page1.php">Link 1</a></li>
        <
    li><a href="page2.php">Link 2</a></li>
        <
    li><a href="page3.php">Link 3</a></li>
        <
    li><a href="page4.php">Link 4</a></li>
        <
    li><a href="page5.php">Link 5</a></li>
        <
    li><a href="page6.php">Link 6</a></li>
        <
    li><a href="page7.php">Link 7</a></li>
    </
    ul

  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Oh, forgot to add notes.

    Whenever you want to add a page, you just reference the header and footer files, which contain all your design and navigation (as demonstrated in the "index.php" example).

    When you want to add navigation items, just modify the corresponding menu_###.php file, and it will reflect the changes in all pages.

  5. #4
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    You're doing fine, pal.

    Well here's a few pointers. Don't use frames at all for this - or if you can, don't ever use frames. They've got many problems.

    What you want is something called an include. The simplest kind I use are based on PHP, a programming language for the web. Most servers provide it.

    With PHP, you can simply insert this piece of code in the area where your navigation column is:

    PHP Code:
    <?php
       
    include("nav.php");
    ?>
    while renaming that file to be index.php (or whatever .php, you can't use .html usually). When your page is displayed, you will retrieve the file "nav.php" and place it where that tag was placed. Simple as that.

    Then there's the issue of using tables for layout, opposed to using the cleaner CSS layout... but thats another story.

    EDIT: Gwah, transio got to it first.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  6. #5
    Senior Member Ferro's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    386
    Member #
    14204
    Liked
    5 times
    Thirded - php includes FTW.

  7. #6
    Junior Member
    Join Date
    Oct 2007
    Posts
    3
    Member #
    15942
    Good morning and thank you all so much for the quick replies.

    I took on this small project thinking of doing it just in classic html.
    Yesterday, I realized, to keep it elegant, I'll probably have to learn some CSS.
    Today, I realized, on top of CSS, I'll need php as well... yikes!

    I guess the next step is to see if the "server" I'll be hosting on will support php.
    What I intended on doing was just registering for a domain (already done) and have that forward to my university student webspace and just mask the url to just show the domain. I wonder if my student webspace supports php.

    Weiyang

  8. #7
    Junior Member
    Join Date
    Oct 2007
    Posts
    3
    Member #
    15942
    Good News!
    I just spoke with the network IT guys and it looks like my university webspace does support php. He showed me a simple home page he was making using php and it looks like it's a lot closer to an actual programming language than html or CSS. Reminded me a lot of java scripts. Is my first impressions correct?

    It seems to be able to select what you need and output that into the browser so that the source that's visible to the browser is only the output of the php code and not the whole thing. So my next question is, can php be used in conjunction with CSS?

    Weiyang

  9. #8
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Yes. Definitely!

    CSS is a layout tool. It does not deal with code production. When your php outputs HTML, it will also output the CSS:
    PHP Code:
    $nav1 = array();
    $nav1[] .= 'home';
    $nav1[] .= 'articles';
    $nav1[] .= 'links';
    $nav1[] .= 'contact';

    echo 
    '<ul id="mainNav">';
    foreach(
    $nav1 as $value){
      echo 
    "<li>" $value "<li>";
    }
    echo 
    '</ul>'
    Should produce the following:
    HTML Code:
    <ul id="mainNav">
      <li>home</li>
      <li>articles</li>
      <li>links</li>
      <li>contact</li>
    </ul>
    Which allows you to style the following CSS:
    Code:
    ul {}
    li {}
    ul#mainNav {}
    ul#mainNav li {}
    Remember with CSS, you have the element level (something that applies to every <ul> for example), the ID level (#in CSS, appears once on a page) and every class (. [period] in CSS, can appear multiple times on the page).

    There's lots of CSS knowledge to attain on this forum and on the web
    Shani

    I have an eye for detail like you'd never believe.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:24 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com