Need guidance regarding new website

mthao00 · Feb 4, 2009

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.

TodVader · Feb 4, 2009

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.

SrWebDeveloper · Feb 4, 2009

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

mthao00 · Feb 4, 2009

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.

SrWebDeveloper · Feb 4, 2009

Forgot to mention, for very easy "wipe" effects, after learning all of the above, use the free JQuery javascript framework with the free "Cycle" plugin using its wipe function:

Download JQuery here
Download the "Cycle" plugin here
Demos here and code examples

Have fun!

-jim

TodVader · Feb 4, 2009

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).

Search

Search

Need guidance regarding new website

mthao00

macrumors member

Attachments

TodVader

macrumors 6502a

SrWebDeveloper

macrumors 68000