PDA

View Full Version : Layout into Dreamweaver


Sandonthefloor
12-29-2008, 04:26 PM
I spent a day perfecting just the home page of a website in Photoshop cs3. And now i want put it into dreamweaver by html or css. But it seems like you have to create the entire background in Dreamweaver.

Is there a way to just have coded buttons so if they go to the website you can click on the buttons... not having to recreate the entire thing in Dreamweaver?

Ricky55
12-29-2008, 04:37 PM
What do you mean, doesn't Dreamweaver create pages its self?

Its a good program but not that good.

Sandonthefloor
12-29-2008, 04:50 PM
No like i made the entire layout in Phtoshop, but now it seems like I have to re=create all the background and stuff in dreamweaver

Isn't there a way to just import the layout into dreamweaver and code that image?

Sandonthefloor
12-29-2008, 05:04 PM
Well i know i have to slice all the images.. but do i have to slice the background too?

Corrosive
12-29-2008, 05:21 PM
No like i made the entire layout in Phtoshop, but now it seems like I have to re=create all the background and stuff in dreamweaver

Pretty much, yes.

Isn't there a way to just import the layout into dreamweaver and code that image?

Yes, but you don't want to build a website that way. It will give you tables in your layout and, as you rightly said in an earlier post, you want an html and CSS based layout.

Sandonthefloor
12-29-2008, 05:47 PM
Well ill stay with tables.. but im using css too

Ricky55
12-29-2008, 05:54 PM
You could export as HTML and images but its not the way to go.

domedia
12-29-2008, 06:50 PM
Well i know i have to slice all the images.. but do i have to slice the background too?
What do you mean by slice? The background only needs to be one image.

Sandonthefloor
12-29-2008, 10:07 PM
Well i sliced all the images in Photoshop

But now when i put it into Dreamweaver it seems to be an image, and I cannot add like a url so when u click it it goes to like index.html

It seems to just be an image


And whenever i put a link into it it makes the page distorted or has a blue box around it and distored

Its a table.. is that the problem?

Corrosive
12-30-2008, 07:23 AM
Well i sliced all the images in Photoshop

But now when i put it into Dreamweaver it seems to be an image, and I cannot add like a url so when u click it it goes to like index.html

It seems to just be an image


And whenever i put a link into it it makes the page distorted or has a blue box around it and distored

Its a table.. is that the problem?

OK, two things here. Exporting a photoshop layout will give you just images. It won't convert your text into html so that you can create links etc. The other issue with this is that search engines will just see images and have nothing to read so you won't appear in Google. You need to learn how to recreate your photoshop design as a web page.

The blue box is a default in Internet Explorer. Unless you tell it otherwise it will add a blue box to any image you use as a link. Just add img {border: 0;} to your CSS and the blue box should disappear.

domedia
12-30-2008, 04:41 PM
Well i sliced all the images in Photoshop

But now when i put it into Dreamweaver it seems to be an image, and I cannot add like a url so when u click it it goes to like index.html

It seems to just be an image


And whenever i put a link into it it makes the page distorted or has a blue box around it and distored

Its a table.. is that the problem?

No it's not the problem. You need to learn regular web development. Noone can expect to click a button and have the website made automagically ;)
On the other hand, this is a great opportunity to learn 8)

Sandonthefloor
12-30-2008, 05:14 PM
OK, two things here. Exporting a photoshop layout will give you just images. It won't convert your text into html so that you can create links etc. The other issue with this is that search engines will just see images and have nothing to read so you won't appear in Google. You need to learn how to recreate your photoshop design as a web page.

The blue box is a default in Internet Explorer. Unless you tell it otherwise it will add a blue box to any image you use as a link. Just add img {border: 0;} to your CSS and the blue box should disappear.

So bassically I take the image and add that code in css and then it will fix it?

Im just using the images for the BUttons and logo's and stuff

The text isn't going to be image

But if I wanted to put a picture somewhere in the page without putting it into photoshop would i have to have another code?

Sandonthefloor
12-30-2008, 07:05 PM
Well First... I dont know where to put it in the code... all i know is to put it somewhere near the main thing.

And If i make the img a link it distorts the page a little bit

d a v e
12-30-2008, 09:32 PM
as Dom said you need to learn regular web development
try these for size
http://www.htmldog.com
http://www.w3schools.com/
http://www.cssbasics.com
http://www.opera.com/wsc/

Sandonthefloor
12-31-2008, 12:04 AM
Well anyway if you even put a link with the Image it distorts the page

Corrosive
12-31-2008, 06:14 AM
Well First... I dont know where to put it in the code... all i know is to put it somewhere near the main thing.

And If i make the img a link it distorts the page a little bit

Hi

You need to put the code I gave you either in a separate style sheet (if you have one set up) or in between the head tags. If you have changed things like 'page properties' you'll see a tag called 'body' has some styles after it. Just put the img {border: 0;} rule underneath it.

Please though, you ought to listen to the lads because you'll waste a lot of time doing it this way. They are giving you really good advice. Table based layouts will cause these page distortions.

Sandonthefloor
12-31-2008, 07:45 PM
Well its not table based anymore..

Someone else made it into a css sytle completely so now i can just look and learn... so it is better now