Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newbie question on website design

    I am totally new to building website although I have very very basic knowledge of html tags and syntax.

    I want to build a website with two static sections and one dynamic section. The static section at the top to contain company name, logo, slogan etc. and the one at the left to contain navigation bar. I want all output from the hyperlinks to go to the 3rd section with the other two sections remaining visible all the time so the users can click on any link from where ever they are.

    I had started by using frames and setting the "Target" attribute for every link to the "Name" attribute of the 3rd frame. But then I read some places that some browsers don't like frames and you will be better off staying away from it. I then decided to use a non-frame approach but don't know how.

    Can someone please guide me step-by-step how to do it. I have downloaded some free CSS templates but can't figure out how to accomplish what I want to do.

    Any help will be greatly appreciated....

    Thanks.

    Subhash

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,525
    Thanks
    8
    Thanked 1,091 Times in 1,082 Posts
    The top (banner) and left (nav) will be CSS <div> sections that appear
    the same on all pages. The center part (content) will change from page
    to page. That way, you don't need to use any frames, and every page on
    your site has the same "look" and "layout".

    As your page refreshes (from one page to another), the banner section and
    nav section remain constant. Hard to explain, but see this site as an
    example: http://www.cgrelayforlife.com

    If your webhost allows PHP scripting, you can even do the content part
    dynamically (like the example site). The "nav" part is also dynamic, in that
    the current link changes color from page to page. All of the content is
    inserted from text files (there are no static web pages).

    You can view the HTML source and CSS source to see how the <div>
    sections are layed-out. It's a fairly basic, plain layout.

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks mlseim for your reply.

    I looked at the html and css code. What I can't figure out is that what is there in the html and/or css code that tells the browser to send the output from hyperlinks to the div id "middle". I hope I got that div name right.

    A sample navigation button code looks like this:

    <div class='nav'>
    <div class='navbutton'>
    <a href='page.php?p=9'><span class='button'>How to Participate</span></a>
    </div></div>

    And the css code for the two classes is follows:

    .nav{
    padding: 0px 0px 0px 10px;
    width:130px;
    height:40px;
    }
    .navbutton{
    background-color: #99FF00;
    padding: 7px 5px 7px 5px;
    }

    Can you please help me figure out what piece of code directs the output to "middle" div. If it is the php code, then is there a way I can do that without coding php as I am comparatively new and would like to take things slowly.

    Thanks again for your help....

    Subhash.
    Last edited by Subhash81; 05-31-2007 at 02:08 PM.

  • #4
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,525
    Thanks
    8
    Thanked 1,091 Times in 1,082 Posts
    Well, it is PHP, but it doesn't have to be.

    If you had 10 pages, each page would have the same HTML and CSS.
    The top banner part would be the same and the nav part would be the same
    on every page. It's the part in the middle that would be different between
    pages.

    Each time you press a button (hyperlink), it actually reloads a new page.
    It is a whole new page, but since the layout is the same, it appears that
    only the middle changes.

    Here are two test pages that link to each other, using no PHP scripting.
    This will make it easier to see what I'm trying to explain:

    http://www.cgrelayforlife.com/test1.html

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. I think I am getting the idea.

    Now, my next question what if I need to change the navigation bar along the way, will I have to change the code in every page or is there is a better way to do it.

    Subhash.

  • #6
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,525
    Thanks
    8
    Thanked 1,091 Times in 1,082 Posts
    Unless you use PHP, you'll have to change it in every page.

    That's the whole thing about PHP ... it's powerful and allows for dynamic
    page creation. If your webhost allows PHP (which most do), you can use
    PHP and we can help you with that.

    The only thing I'm not sure of is how you are creating your pages. Using
    PHP requires you to change the file extensions from .html to .php

    So, if you're creating pages offline, they won't appear on your PC because
    your offline browser can't process .php files. PHP is something that happens
    on the webhost's server.

    Tell us a little more about how you create your web pages. Are you using
    Notepad (and doing it by hand), or some software like Dreamweaver?

    Can you upload your existing template (even if it's not done) to a website
    and provide a URL to your page?

  • #7
    New Coder
    Join Date
    May 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am using Dreamweaver 8. It is a great software and allows you to create just about any document including html, css, php etc. I am working offline to create my pages and will upload once I am done.

    So, if my browser will not process php files, that means I am limited in that way. I have just started on my Home page and still on my top banner div. I would have uploaded my template but it is really not much in there right now.

    However, I can give you the link to my partially completed website which I did in frames. I had not finished it before I decided to do away with the frames. However, that is the look and feel I want for my website.

    Here is the link:

    http://www.torontogtahomes.com/

    Thanks for your help...

    Subhash.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,865
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    If your host doesn’t support server side scripting, yes, you are a little limited as you can’t have real dynamic websites. However, you’d still build your site like it was and with the search and replace function of Dreamweaver (Ctrl+F or Option+F (Mac)) you can easily change parts on all pages of your site (like your menu if it looks the same on all pages).

    If you have server side scripting you can use SSI (server side includes) or PHP includes to put your menu code in its own file and include it on every page where the menu should appear. This way you only have to change it once and it’s automatically changed on every page.

    As to the dynamic content section and links going there this is also a very basic, yet powerful PHP thing. There is a thread with a very similar question.

    Hope that helps.

    Oh and by the way: You might be interested in becoming member at http://sharetoronto.com, eh? It’s still in development and not really official yet but keep it in mind for near future.
    Last edited by VIPStephan; 05-31-2007 at 04:33 PM.

  • #9
    New Coder
    Join Date
    May 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks VIPStephen for your help. I will look into that thread and see what I can learn from there.

    And for mlseim, I think I screwed up something while uploading the latest version of my website in frames before I posted the link in this thread. Please forgive me if you get different behaviour everytime you visit my site. I am trying to fix it and bring it to the stage it was before.

    Thanks.

    Subhash.

    P.S. I fixed it now. (11:07 AM EST)
    Last edited by Subhash81; 05-31-2007 at 05:07 PM.

  • #10
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,525
    Thanks
    8
    Thanked 1,091 Times in 1,082 Posts
    torontogtahomes is using 1and1.com as their webhost.

    Do you know which package they have? Linux or Windows, and
    what account package they have? beginner, home, business, etc.

    Interesting to note that only the business level and above allow SSI,
    and I don't see PHP listed anywhere, but MySQL is listed ... very strange.

  • #11
    New Coder
    Join Date
    May 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    They do support php3, php4 and php5. Go to http://order.1and1.com/xml/order/Hos...op&__lf=Static and click on "more...' under Site Building Tools. You will see it. They have both Windows and Linux hosting.

    I have taken Home package.
    Last edited by Subhash81; 05-31-2007 at 07:21 PM.

  • #12
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,525
    Thanks
    8
    Thanked 1,091 Times in 1,082 Posts
    Create a new directory called "test" and then create a new
    webpage that has the banner on the top and nothing else.
    Call that page "index.php". Upload "index.php" into the "test" directory.

    You can start with this basic format:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title>Your Title Here</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    meta name="keywords" content="key1, key2" />
    <
    meta name="description" content="Describe Your Site." />
    <
    link rel="stylesheet" href="style.css" id="folio" type="text/css" media="all" />
    </
    head>
    <
    body>
    <
    div id="content">
    <
    div id="banner">
    Put your banner HTML here
    </div>

    <
    div id="content_wrapper">

    <
    div id="left">
    Your navigation will go here
    </div>

    <
    div id="middle">
    Your content will go here
    </div>

    </
    div>

    <
    div id="bottom">
    Your Footer will go here
    </div>

    </
    div>

    </
    body>
    </
    html
    Create a 2nd file called "style.css" and create a simple style sheet that
    defines your new page colors, etc. You can start with this:
    PHP Code:
    /* ----------------------------------------------------------------+
     |  Cascading Style Sheet                                          |      
      -----------------------------------------------------------------*/

        
    htmlbody {
        
    background-color#FFFFFF;
        
    cursor: default;
        
    font-family"Arial"arial"MS Sans Serif"Genevasans-serif;
        
    font-weightnormal;
        
    font-size10pt;
        
    line-heightnormal;
        
    margin0px auto;
        
    width775px;
        
    padding0px 0px 0px 0px;
        
    min-width775px;
        
    text-aligncenter;    
      }

    a:link,a:active,a:visited {
    background-colortransparent;
    color:#000;
    text-decorationnone;
    FONT13pt "Arial","Arial",sans-serif;
    TEXT-ALIGNleft;
    }
    a:hover {
    background-colortransparent;
    color#000;
    text-decorationunderline;
    FONT13pt "Arial","Arial",sans-serif;
    TEXT-ALIGNleft;
    }

      
    imgimg a {
        
    bordernone;
      }

    h1 {
          
    background-color#transparent;
          
    padding0px 0px 10px 0px;
          
    margin0px auto;
          
    font-family"Arial",sans-serif;
        
    font-size14pt;
          
    color#5e6563;
          
    text-alignleft;
    }

    /*
     ---------------------------------------------------------------------
     |  ID's and Classes
     ---------------------------------------------------------------------
    */
    #content {
    background-color#FFFFFF; 
    margin0px auto;
    padding0px 0px 0px 0px;
    width775px;
    text-aligncenter;
    border1px solid #aaa;
    }
    #wrapper {
    width775px;
    }
    #banner {
    margin0px auto;
    width775px;
    height200px;
    text-alignleft;
    }
    #content_wrapper{
    width775px;
    text-align:center;
    }
    #left {
    background-color#transparent; 
    margin0px auto;
    padding0px 5px 0px 5px;
    font-familyArial"MS Sans Serif"Genevasans-serif;
    font-weightnormal;
    font-size13pt;
    color#eee;
    line-height14pt;
    width150px;
    /* height: 600px; */
    text-aligncenter;
    floatleft;
    border-right1px solid #eee;
    }
    #middle {
    background-color#transparent; 
    font-familyArial"MS Sans Serif"Genevasans-serif;
    font-weightnormal;
    font-size13pt;
    color#333;
    line-height14pt;
    margin0px auto;
    padding0px 0px 0px 30px;
    width550px;
    text-alignleft;
    floatleft;
    }
    #bottom {
    margin0px auto;
    width775px;
    clearboth;
    padding0px 0px 10px 0px;
    font11px Arial,Arial,sans-serif;
    color#bbb;
    text-aligncenter;
    position:relative
    bottom0px;

    In your "index.php" file, right before </head> put this line:
    <link rel="stylesheet" href="style.css" id="folio" type="text/css" media="all" />

    Put everything into that "index.php" page to make it look like your original site.

    When you go to: http://www.torontogtahomes.com/test
    You should see your new webpage (index.php).

    Adjust background colors in the "style.css" file to what you want.

    Let us know when you get that far. So basically, you're create a new website on one
    page without frames. Once you get the page looking correctly by coding in all of your
    HTML, we can take it apart and do some PHP includes.
    Last edited by mlseim; 05-31-2007 at 09:28 PM.

  • #13
    New Coder
    Join Date
    May 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks mlseim.

    I am working on this code but I need some more help in setting up my Banner section. Can I have more than one images in the Banner, one left aligned and one right aligned and then I want to put some text in the middle.

    I put another div tag withing the Div Banner and inserted an image there. Then I tried to add another Div tag but that one shows below the previous image. If I try to add Float:Right property, the whole thing moves to the right.

    I am not sure if I have been able to explain clearly or not. If I did, then please help me what I have to do to make it look like the way I want.

    Thanks again....

  • #14
    New Coder
    Join Date
    May 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry to bother you and I hope you will forgive my ignorance and stupidity. I am really going nuts here.

    I have these two files index.php and style.css both in my test folder. I am trying to start from a very simple page here. I just want to add 2 images in the banner, one on the left and one on the right. That is giving me problem.

    Then I went and added two links in the navigation bar without using either ul or ol. After adding the links, although I can see the html code added in the code window but the navigation bar is all black. I guess the background of the navigation bar as per style.css is black. I tried changing the color attribute to white but I still can't see the links.

    What am I doing wrong here....

    Thanks and please be patient with me.

  • #15
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,525
    Thanks
    8
    Thanked 1,091 Times in 1,082 Posts
    Upload pages into some directory so we can see them too.
    Don't worry about bothering us, we'll see what you have so far.


    <div id="banner">
    <img src="asdf.jpg" style="float:left;">
    <div style="float:left; padding:0px 20px 0px 20px;">
    this is my text
    </div>
    <img src="asdf.jpg" style="float:left;">
    </div>


    Here is the padding sequence:
    padding: top right bottom left;

    With the nav part, when we see the test site, we'll see what is happening.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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