Guide| I need a guide for creating a website with PhotoShop and DreamWeaver.

I am a starter at websites building and until now I used only already-made templates for my websites but now that I want to develop and become better at what I do I want to learn how to create a custom template for myself.
so I wondered If anyone could direct me to a good guide to create a website with PhotoShop CS3 and DreamWeaver CS3.
thank you,
LinkTree

 

Here's a pretty good step by step tutorial on how to use both photoshop & dreamweaver together to create a web site: www.photoshopcafe.com/tutorials/super tutorial 2/website.htm

Hope it helps

 

thank you.

 

You're welcome, I'm sure it will help you out It looked pretty thorough to me

 

yes it does. though i need another program (ImageReady)

 

I believe cs2 was the last version of PS with imageready. Adobe uses animation window in cs3

Everywhere I'm reading shows that imageready has been discontinued

Though imageready is mainly for animations... you should still be able to do all your web template designing without it

 

oh great, thanks.

 

Okay, so i got to the part when i need to use ImageReady but i can't figure out how to do the things they are explaining in PhotoShop CS3.
i don't know how to Optimize the palette as they are showing here:
sorry i can't post links yet.
the page that i am stuck at is the slicing page (4).
if anyone could direct me i would be thankful.

 

I'm not sure where you are or what the problem is with the slicing tool, however... you can select the slice tool from the left panel in ps Cs3. it's the little icon that looks like a knife.

Once selected you hold down your left mouse button to stretch the slice the size you need it. Keep repeating until your whole page is sliced up the way you want it to be. when you are ready to export the sliced page with all the html code, go to: File > Save for web & devices > Save

Once you get some practice then you can play with all the other options in the save for web & devices menu.

Other than what I posted above, I'm not sure what else you're needing.

Hope it helped..

P.S. make sure your using the web design workspace for the slice tool to appear on the left. top right there is a button that says : workplace, select web design from that list

 

PS Cs3 is only one of 15 design software's I use & I don't use it much.. I mainly have it for cross platform conversions... sorry I can't be of more help.

Hopefully someone will come along that uses ps Cs3 on a daily basis with better directions

 

yes i know how to slice my design, and i also figured out how to optimize my design.
right now my problem is the rollover part.
it seems like i need adobe fireworks for the rollover or to use a javascript (which seems complicated).
if theres a way to rollover buttons in an easier way then the 2 that i have mentioned please tell me.
thank you.

 

Actually, coding the buttons in Css would be the easiest way to do a rollover: here's a tutorial on it that might help: www.tutorio.com/tutorial/pure-css-image-rollovers

There's no real easy way around coding it. so i figured Css would be the most simplistic for you.

 

Oh, nice i tried it with the code examples they gave in the tutorial, but i still can't exactly understand how can i figure out the background position.
i need to play around with it until i find the right position?
another question is how can i create a button (i didn't call it a link for a reason) that when it is pressed it shows an image or a text or anything else within the same page?(no page reloading) is it PHP?
thank you very much for all your answers and guiding.

 

You can create the image/text/whatever on the same page using frames in dreamweaver. I'm not sure about php.
Incidentally if you want to create rollovers just design a button or link and save it twice giving it two different colours you can add blending options in photoshop as well if you want. Save both for web and devices. Now in dreamweaver there is a cool button that is for installing rollovers. You just choose the two images/buttons/whatever you created and dreamweaver does all the css coding for you and installs the rollover wherever you want it.

 

cool ill try it.
by the way what is the best image type to use for a web design? (personally i like png but i am not sure that this is the right type for web designs...)

 

depends what you want it for. jpg is about the best but always saves with white background. if you want a transparent background save as gif.

Personally i avoid png, mainly because of filesize.

Glad I could help.

 

while using DreamWeaver i encountered a very disturbing problem.
I can't align my slice in the order i want to.
i managed to align right only my navigation bar (i also managed to create the rollover)
all the rest is going up and down...

 

you probaly need to use image place holders or maybe create a table to hold it all in. This is one of the weird things about all web design packages nothing ever stays where you put it unless you put it inside a container i.e. table.

Let me know how you get on.

 

i managed to figure out how to get all the parts aligned together (i had to save my slices as an html and images and then import it into dreamweaver)
but now my problem is that i can't figure out how to make my site auto resize itself to different monitor sizes and resolutions.
i want my page to cover the whole browser window.
thank you,
LinkTree

 

set the size in the properties toolbar to 100%