...

View Full Version : PhotoShop to Html (DreamWeaver)



SkipStaa
01-05-2007, 02:25 AM
Hey guys I wanted to know if there was an easy way to crop my whole site in witch I made in PS CS2. when i say crop the whole site i mean make several individual crops at once I been trying to crop each part individually a i just can't seem to line them up in Dreamweaver here is a link to the site i gave up as you can see and it's just a .jpg any ideas

http://adultrecruiting.com/maze/maze.htm

It well soon be a MySpace Page as you can see by the type of links

Thanks

-Jason Maze

Len Whistler
01-05-2007, 03:43 AM
I assume you want to slice it up?


In Photoshop drag the blue guidlines down and over, ten lines down and over will be 100 little boxes, 5 lines down and over will be 25 boxes, etc.
Then Save for Web, this will launch ImageReady. Also save the html. ImageReady will then generate the html code to keep everything together.


PS....I misssed the part for the slicing. I'm not on my home computer but I believe it's under "edit" in Photoshop or ImageReady.

VIPStephan
01-05-2007, 04:55 PM
[...]Then Save for Web, this will launch ImageReady. Also save the html. ImageReady will then generate the html code to keep everything together.[...]

Please don't do that. I've seen a lot of people come here asking why their layout is breaking (created with ImageReady) when they insert more content. Also, as I see, the example you provided is an ImageReady layout already and I see it isn't even valid HTML according to W3C standards so this is definately not an option.
And if you don't have the time, interest, or skills to learn some HTML and CSS (http://htmldog.com) then I'd suggest to have someone do it for you who knows how to do it. Should be a no-brainer for a pro and not too expensive for you.

haveacigar
01-05-2007, 08:44 PM
Ok, slice it up, and use this code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

</head>
<body>
<style type="text/css">
body
{
background-color:rgb(45,45,45);
color:#999999;
}
.header
{
position:relative;
top:0;
left:0;
float:left;
}
#container
{
width:800px;
}
#content
{
width:500px;
height:800px;
background-color:rgb(51,51,51);
}
#footer
{
width:500px;
height:100px;
background-color:rgb(51,51,51);
}
</style>
<center>
<div id="container">
<div class="header"><img src="images/layout_01.gif" alt=""/></div>
<div class="header"><img src="images/layout_02.gif" alt=""/></div>
<div class="header"><img src="images/layout_03.gif" alt=""/></div>
<div class="header"><img src="images/layout_04.gif" alt=""/></div>
<div class="header"><img src="images/layout_05.gif" alt=""/></div>


</div>

</center>
</body>
</html>


edit it accordingly

VIPStephan
01-05-2007, 11:57 PM
No offense but what kind of crap is that supposed to be? :confused:
You have the styles in the body instead of the head section where they belong and your code is not the least little bit of help... You have styles that don't even apply to anything, you are using deprecated tags (<center>) and your code is not at all telling anybody what to do. How can this be helpful?

haveacigar
01-06-2007, 12:51 AM
I was sort of assuming he knows at least a little html and css...

The page was from another i made a few days ago....

As long as he

changes the width

changes the images

and puts the sliced images in <div class="header"></div> or the renamed version

and puts them in order

the images will link up without a gap, and look as they did in photoshop...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum