Aligning Images in Website???

Hello all,

I'm building a website for my AFROTC detachment's Arnold Air Society squadron, and as of now, I've run into an obstacle. I've already created all of the images I want to use on the website; however, I'm completely lost as to how to align them all on the page. I know I need to use CSS somehow, but I have no idea where to begin as far as how to use it. Below is a link to a preview of the website that I made by arranging all of the seperate images in Photoshop, and them saving and uploading them to Angelfire (where they are temporarily being hosted until I can get hosting from the university). The pic pretty much shows how I want the site to look, except for a few things: 1) I want it to be fluid (viewed the same way by anybody, on any OS and/or web browser); 2) Instead of that grey background that I have up there right now, I want it to have the blue and orange bars cascading down the sides of the page, with the seamless white pattern in the background; and 3) I want the page to be spaced evenly. If anybody can help me out with this, I'd really appreciate it. Thanks peoples.

John D. Ryan Squadron Website (Non-Functioning Preview) (http://www.angelfire.com/blog/jdrs/)

Woah, this site is loaded with colorful information. From a designer’s point of view I would suggest to remove the text in the background (that reads “John D. Ryan Squadron” and “UTSA”) so it won’t be too overwhelming and drawing the attention away from the actual content.

Now to the actual question. The first thing you need to ask yourself is: What will my site be about and how should I structure the information I provide. By “structure the information” I mean how it should be laid out in the plain HTML at first. Don’t think about how your site will/should look like in the end yet! If you’ve sorted the HTML properly you will have no problems styling this content then (with CSS) to look like you intended - or totally different (without changing the HTML).

The important keyword is semantics (http://brainstormsandraves.com/articles/semantics/structure/). Use divisions to divide your page logically into different sections: header, content, footer. Those thee sections are all enclosed in one container div. Then in the header goes the page/company/organization name or title (as <h1> element) and the navigation. The content section gets the content which will again be divided into different sections. Basically you have a three column layout so that makes three main sections in the content. And those sections are again divided into different sub sections (if necessary), and so on, and so forth… You see where I’m going?
The footer gets the copyright info or the navigation again (at least a “to top” link).

Only after you’ve sorted that out you can start styling the content - and only those elements you’ve got there (no additional empty elements to add a background image or whatever) - with CSS (putting the images that serve a purely stylistic purpose as background images into your HTML elements). Your layout is quite advanced, though, and for a CSS beginner it might not be the easiest way to go.

Look at the CSS Zen Garden (http://csszengarden.com) to see how the pros are doing it and making on and the same HTML page look totally different. And also check out Bon Rouge’s website (http://bonrouge.com) for a three column CSS layout.

I realize your example on Anglefire is just an example. I hope you'll be
using a real webhost for your site, without banner ads. For about $35.00
per year (yes, that's about $2.50 per month), you can have your own
webhosted site with no ads and your own domain name. That's really
affordable ... www.cleverdot.com

There are other hosts also that have good prices. I mention cleverdot
because they have this thing in their cpanel called "fantastico". With that,
you can install a forum, blog (WordPress), ecommerce store, etc with the
click of a button ... automatically. It does all of the MySQL stuff for you.

They also have CopperMine in their "fantastico" list ... a photo gallery.

Stephan pretty much said it all with regards to CSS/XHTML

Ok, so you guys think I should go simpler first, until I learn the basics of CSS coding, and then try to get more intricate with the layout? We'll see...I mean, I kinda like the design I already have, and I HAD a website with a set up similar to the one I have now, but I didn't code the CSS for it (had a friend do it), and it was all setup in pretty much the same way...but I might take your advice if I can't seem to figure out how to get it looking the way I want it to by the end of the weekend. :P But thanks anyways for the help Stephan. I'mma check out those links later on today. Anybody else got any suggestions?