Help solving a problem please?

C

Cynic

New Member
Hi guys!

Im trying to make a website with Photoshop, Fireworks and Dreamweaver.
Last time i did a website was 10 years ago with frames, so im pretty lost.

I got 3 images to show what im trying to do.
First one is from Photoshop, second in Fireworks and third Dreamweaver.

First i have made the website in Photoshop.
Full size picture http://bassel.se/WEB/webphp1.jpg

webphp1.jpg



Then i opened it in Fireworks and sliced it. Images as highQ images and white areas and areas where i want text i sliced as html.
Full size picture http://bassel.se/WEB/webFire2.jpg

webFire2.jpg


Then i opened it in Dreamweaver.. and heres the problem.
(full size image http://bassel.se/WEB/webDreamw3.jpg)

webDreamw3.jpg

If you look at the webpage. I would like it to be so that
1. If i press "Sektion 1" on the topmenu. I want a different menu to appear on left side, as well as text appearing on the main content area in the middle.

2. If i then press "länk 1" or "länk2" on the side menu, i would like the text to change on the content area in the middle.

Could any kind sould explain how to make this happen?
 
Phreaddee

Phreaddee

Super Moderator
Staff member
I wont reprimand you for using frames, afterall like you said, that was 10 years ago, you are however it seems heading into dangerous AP div territory.

the best way to get a design from photoshop into dreamweaver is to print it out and use it as a guide. from this guide I would start with the building blocks first.
its got a header horiz and vert navigation and a content area. its all to be centered

so these should all be popped into a new html document between the <body> tags.
(I normally use html5 syntax because but thats another story.)

HTML: 
<div id="wrapper">
<div id="header"></div>
<div id="top-navigation"></div>
<div id="side-navigation"></div>
<div id="content"></div>
</div>
now the basic building blocks are in place build two navigations one for the top navigation and one for the side. these can be made using unordered lists like so...
HTML: 
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="another-page.html">Another Page</a></li>
<li><a href="and-another.html">And Another</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
other than that you've got the logo and the tagline up the top and the content area.
place them in the html file.

each of the content sections are different html pages.
make the page once. copy and save as the next.
add the content copy and save. etc etc...

now its time to do css styling.
I dont have the time right now to write it all out for you, but css isnt that hard to do the basics with, which is what you're after here with this page.

hope that helps.
 
C

Cynic

New Member
Hi and thanx!
Ive never coded in my life lol.. but im going to try my best to understand these tags you shared!
Im really thankfull.

I guess AP div are a big nono as i was heading that direction with fireworks/photoshop?
 
You must log in or register to reply here.
Top