Help on which tools to use for creating this website

[Got Josh?]

So this is the deal. My sister recently allowed me to build her a website for her company, i told her that I'm no expert in the subject but i'd work my way around it. First of all i must say I'm not a random idiot that screams "HELP ME WITH SITE LOLOL" I'm just pretty much missing the big picture of what tools to use in order to archive what she wants.

This is the site, that I'm talking about www.grupodina4.com (It's just a picture of how it should look like in the end), She was even nice enough to design the website layout for me, hence I'm no expert on the design material (I can code tho) so the picture on the website it's how it should end up looking (As i just said) ignore all the random letters on the side. The concept it's basically a bunch of pictures which will be the buttons to the different pages in the side, i told i'll work slowly on it but i should get started, the goal for this thread, will be creating the welcome screen as well as the contact page, we'll be a mailing form.

From the top of my head i know i should use Flash to create the animated buttons but i kinda don't wanna get into that (Unless it's absolutely necessary) but the main question is, Which set of tools should i use to accomplish my goal? And maybe a little description on how to start would be great.

I'm sorry up ahead for the long post, and i greatly appreciate the help from anyone that comes. I'd like to encourage angelwatt and Jim to maybe comment on this a little bit, Hence you guys have been GREAT help before, and i'll have to compliment you both for the work that you guys are doing here in the forums by helping everyone out .

Thanks,
Josh

 

[Cabbit]

Adobe Photoshop
Mamp
CSSEdit
Taco HTML Edit, Coda, or similar code editor

And a visit HTML Dog and w3c schools websites for tutorials.

 

[miles01110]

Avoid Flash if you can. Rollover effects using CSS are very powerful.

 

[angelwatt]

It's not clear what specifically you need advice on. Flash isn't necessary from what I see. Do you need to know how to take on certain part of the design? As a quick note, the text color contrast is very low making it very hard to read, so when you go to that part be sure to increase the contrast.

On the photo collage, will that change as the user mouses over the links (or images), and are the images static or will parts change?

 

[Got Josh?]

It's not clear what specifically you need advice on. Flash isn't necessary from what I see. Do you need to know how to take on certain part of the design? As a quick note, the text color contrast is very low making it very hard to read, so when you go to that part be sure to increase the contrast.

On the photo collage, will that change as the user mouses over the links (or images), and are the images static or will parts change?

Yeah angel you got me exactly that, i want the photos to be the links and that they'll change as the user mouses over them (maybe a spin or a change of the frame).

The kind of answer(or tutorial) I'm looking for this is this one:

Start off with a white background, then make the photo frames( links) in photshop with the right image size, apply a mouseover effect with CSS, etc.

I know it's very noobish, but i figure maybe someone is willing to help out.

 

[angelwatt]

Here's an idea. Have all the portraits as a single image as it's seen currently. Then have separate individual images that belong to each link. Then when the user mouses over the link, its individual image will appear on top of the big image, either right next to the link, or you could have all of them appear in the center. I'd probably make it bigger than the other image's dimensions and give it a drop shadow to help it stand out.

Alternatively, you would create each image with transparency so as the image is tilted you can still see behind it. Then use CSS to place each one close to each other and the z-index to create the stacking order you want. You could then also use CSS for the hover effect. You might want to look at CSS Sprites as a potential technique. This way would likely be more tedious. I wasn't able to turn up a tutorial very quickly that applies overly specific to your situation. I also haven't tried this before so not sure what might be the best technique.

I'd also work on laying those links out more neatly. I would find it confusing it currently. It should just have a little more natural flow.

 

[Got Josh?]

thanks a lot angel, i did saw your post right away, sorry it took me so long to post back, i wanted to work on the design a bit before posting again.

So anyways, this is what i have so far, Grupodina4. I thought a better way to do it angel, what im going to do is see the menu up there? I'll make the grey line a lot bigger and put the images over there, and make it a hover effect everytime you mouse over the frame of the "photo menu" will change it's frame color. (Now if i only knew how to accomplish that).

Another thing is my footer is being a b***ch it wont stick to content and also the second columm is only shownig it's half :/. Any thought on this whole matter?

 

[Got Josh?]

I made it! grupodina4, thanks for that link angel. I used the process described over there, and it seemed to work for me, now i have 2 issues.

1. The footer is separate on some browsers

2. The backgroup where it says opcion 1,2,3 it's cut


Any ideas on how to fix these?

 

[angelwatt]

I didn't see a footer issue with Firefox or Safari 4b. Here's something for issue 2 though. Add some of the following properties and remove the line that says so, or at least comment it out as shown.

#content {
 position: relative;
}
.secondary-links {
 position: absolute;
 top: 10em; /* may need to adjust slightly */
}
.main-content {
 /* remove - float: left; */
}