Need guidance regarding new website

Discussion in 'Web Design and Development' started by mthao00, Feb 4, 2009.

  1. mthao00 macrumors member

    Joined:
    Aug 24, 2007
    #1
    Fellow mac users, I'm a so called "noob" to web development. I'm still learning how to program in CSS and refreshing my mind on HTML.

    I've created a mockup of my potential website in photoshop. 3 sections (main nav, alt nav, content) with the alt nav appearing when links Nav 2-3 are hovered over. If it's not possible (or beneficial to viewers) for the alt nav to "wipe right" then the section can remain static. I'll just display other things in the section regarding the Home, Contact, and Calendar pages.

    I need guidance on building this. Links, tutorials, code (haha), etc... anything...

    BTW, I don't want to design this with flash for the obvious reasons.

    Thanks, mT.
     

    Attached Files:

  2. TodVader macrumors 6502a

    TodVader

    Joined:
    Sep 27, 2005
    Location:
    Quebec, Canada
    #2
    The DIV layout could look something like this:

    HTML:
    <div id="wrap">
     <div id="leftnav" style="float:left;">
       Left sidebar here
     </div>
      <div id="center-right" style="float:right;">
        <div id="rightnav" style="float:left;">
         Right sidebar here
        </div>
        <div id="content" style="float:right;">
         Content here
        </div>
      </div>
    </div>
    
    Assign CSS background images to the divs to get your images on the website. To be sure that the menus will follow the height of the content area, assign 1 picture as a background for id=wrap. Just join the 3 images you got into 1. You're going to need PHP or Javascript to make the kind of menu you want unless you plan on rewritting the menu on each page instead of using an include. For the rest, go learn some basic HTML. I will not show you how to make links here.
     
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    Respectfully, TodVader, it is not best practice to use inline styline (embedding CSS into HTML using the style attribute). Although perfectly legal in older DOC TYPES, the future is all about separating content from style. This means using either external stylesheets or <style> tags in the head sections, and the use of class and ID in the HTML. Since this person is new to development, I also feel the need to jump in since we want them starting out with the best approach in mind - this is a future developer here. Hope you understand and nothing personal in this reply and I greatly appreciate you taking the time to code the HTML.

    To the OP:

    1. Create an external style sheet named "layout.css" which contains
    2. Use the <link> tag in HTML to reference the style sheet

    layout.css contains:

    Code:
    #wrap {
    padding: 0;
    margin: 0
    }
    
    #leftnav {
    float: right
    }
    
    #center-right {
    float: right
    }
    
    #right-nav {
    float: right
    }
    
    #content {
    float: right
    }
    
    Your HTML page contains:

    Code:
    <div id="wrap">
     <div id="leftnav">
       Left sidebar here
     </div>
      <div id="center-right">
        <div id="rightnav">
         Right sidebar here
        </div>
        <div id="content">
         Content here
        </div>
      </div>
    </div>
    

    As to the animating your menus, you'll need to learn Javacript (getElementbyID, etc. to reference div ID's) and how onClick/onMouseOver and tother event triggers work and how to use the display property in CSS to show and hid div's based on those event triggeres. If this is your very first page then you picked something relatively complex your first try as it involves CSS layout and Javascript on top of HTML, but more power to you if you have the desire.

    To learn about basic CSS start here (w3schools)
    To learn about Javascript start here (w3schools)
    For examples on showing/hiding div's using Javascript start here
    For CSS basic layout start here (excellent, take the time to complete it)

    If anyone reading this wants to write the entire project for the OP, feel free, I for one feel its best simply to guide them along and help out on specific technical obstacles as they start coding on their own. Best way to learn.

    -jim
     
  4. mthao00 thread starter macrumors member

    Joined:
    Aug 24, 2007
    #4
    Thanks Jim... I knew the site would be complicated to develop. I'm a visual person so I wanted to create a site where usability and content are the priorities and where aesthetics help accomplish that.

    I really appreciate your guidance and advice. There's a lot to learn.
     
  5. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #5
  6. TodVader macrumors 6502a

    TodVader

    Joined:
    Sep 27, 2005
    Location:
    Quebec, Canada
    #6
    Just to clarify, I rarely if ever put CSS in my HTML. This was just an example. All that CSS would have been in an external file. This was just to simplify my example. (at least for me heh).
     

Share This Page