Photoshop & Dreamweaver Integration

Kendo Nagasaki

Kendo Nagasaki

Kendo Nagasaki

Associate
Joined
11 Aug 2005
Posts
376
Location
UK
I have been tasked to create a website for the Architectural Company that I work for and I have designed the concept/template in Photoshop.

I have a good understanding of using Photoshop as I use it everyday but I was wondering what the best way is to transfer my ideas into a web based format using Dreamweaver. I only know the basics of Dreamweaver, so what would be the best way to do this?

I was going to slice-up my Photoshop template and save it for web and recreate it within Dreamweaver using tables. I know that this method can be restrictive but the navigation is sorted and agreed, it would only be the content that could/would be changed/updated.

Any ideas would be appreciated.

Cheers
 
Take your photoshop file into image ready (in photoshop shift+ctrl+M)

And slice it up from there do your nav roll overs etc.. then "save optimized as > html and images)

Vola one site all made up and ready to go all be it in tables. you can then ope in dreamweaver and edit any bits you want.
 
Thanks for the reply guys. I was going to do it the way that has been suggested but its good to double-check incase i've missed out on anything.

The Sitegrinder looks interesting but i think i would prefer to take control over everything.

Also, is it ok to use layers aswell. I was going to use layers as a way to enlarge photographs when the user clicked on a number.
For example, if there are 6 numbers (1,2,3,4,5,6) which relate to different projects/photographs when clicked and if the user selects 2 (with rollover) - 1,3,4,5,6 hide and 2 shows. Would that method be ok to use?

Cheers
 
This is probably a poor way of doing it. You can always get a design done with pure css, which will be much neater than using tables and images.

The thing is, you don't need deamweaver to make it. Really it's faster to write it with just the text view of dreamweaver, or using notepad++. Dreamweaver adds a lot of crap to the code.

Post the template if you want and somebody can suggest css/div ways of doing things.

You might want to use lightbox js for the images. Otherwise a custom thing involving javascript would be easiest I expect.
 
Thanks for the input but i've only really got a basic knowledge of code.

I've attached the template for the Architecture page, this is going to be used for all the main headings shown at the top (6 in total).

All the links stay the same apart from the links shown in the middle and they change depending on which heading at the top you select. All the links will rollover/stay white when clicked.

The middle is the main body of content, the darker grey box is on the left is for explanatory text and the darker space to the right is for imagery. You can see the numbers at the middle right, where i want the image to change when clicked.

Any advise, help or recommendations would be appreciated.

Cheers

templaterq9.gif
 
Would you prefer the central bit to stretch vertically to accomodate more information or stay fixed with a scroll bar on the right? I'd favour stretching.

In which case I could probably bang a design up for ya.

Edit: as soon as I get IIS working again, stupid reinstalled windows :mad:
 
Last edited:
I would agree that i would be better if it stretched vertically but i imagine that i would deliberately only use the space available to keep the site consistent. Although it would be good if that option is available.

That lightbox js is a really cool way of looking at images too.

If its not too much trouble, that would great. :)

Edit: thats cool, we're still deciding on what images/photographs to use for the site
 
Last edited:
Tired now and not in the mood. Here's what I was working on anyway:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Something</title>
<style type="text/css">
<!--
* {
padding:0;
margin:0;
color:#fff
}
body{
background:#161616;
padding-top:30px;
}
#container {
width:700px;
margin:0 auto;
}
#header{
width:100%;
}
#nav {
position:relative;
border-top:1px white  solid ;
border-bottom:1px white  solid ;
height:60px;
}
#nav ul {
list-style-type:none;
}
#nav ul li {
display:inline;
}
#links {
height:10px;
}
#numbers {
position:absolute;
right:0;
top:40px;
height:10px;
}
#content {
background:url(contentback.gif) top left repeat-y;
width:700px;
}
#left {
width:250px;
float:left;
}
#right {
width: 450px;
float:right;
}
#sublinks {
clear:both;
border-top:1px white solid;
border-bottom:#505559 10px solid;
}
#sublinks ul {
background-color:#222423;
list-style-type:none;
margin:15px 0;
height:54px;
}
#sublinks ul li {
height:14px;
margin:20px 0;
font-size:14px;
float:right;
}
-->
</style>
</head>
<body>

<div id="container">
<div id="header">Logo</div>
<div id="nav">
	<div id="links1">
		<ul><li>Architecture</li>
		<li>Civil  Structural Engineering</li>
		</ul>
	</div>
	<div id="numbers">
		<ul><li>1</li>
		<li>2</li>
		</ul>
	</div>
</div>
<div id="content">
	<div id="left">Left</div>
	<div id="right">Right</div>
</div>

<div id="sublinks">
<ul><li>Education</li>
<li>Healthcare</li>
</ul>

</div>
</div>
</body>
Might return to it tomorrow. Or somebody else will play with it. It might give you some ideas anyway :)
 
Imageready can do CSS instead of tables if you want. If you post up the PSD it may be easier to work on than a GIF.
 
Thanks for the code you created joeyjojo - I can see the benefit of creating websites this way as it cuts down the upload time and is more flexible.

However, the problem I face is that I know very little about this aspect of web design and find myself limited to using the other method as at least I have a slight clue.

For example, i couldn't take your code and adjust it or add to it.
I had a look at the Imageready creation of CSS too but unfortunately i'm faced with the same problem. Are there any handy tutorials about that i could take a look at?

I think my main issue is that i'm so used to creating things visually rather than using code, its hard to bend to that type of thinking.
 
Although I know the benefits of it I find CSS a pain to code with, tables are much easier.

As said, post up the PSD and I'll try and show you how you can generate your design from it pretty much automatically.
 
Oops late reply. Imageready's CSS output is rubbish, I was going to post that then got bored and wrote it manually (in CSS):



Total size: 12.7kb should be nice and efficient :).

I'll mail you a link :)
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom