What do I do next?!

allyally2k

Senior Member
I've started to design my website (in photoshop) just the 'homepage', i've sliced it and saved it all now what do I do?!

I know that sounds really stupid, but I just don't know where to take it now... I'm messing round with it in Dreamweaver at the moment - but i know a few of you have said the design view mode is no good... so what are my options?! I am willing to learn how to code or whatever I just would like to know what the entire process is.

Is there a tutorial anyone knows of that tells me how to take the psd doc into well whatever it's called Hope this makes sense!! Thanks in advance! :)
 
apparantly dreamweaver is a big no no lol...

notepad++ is what I have been using whilst learning

In response to your actual question.....

I'm not gonna answer it as I'll prob get corrected :)
 
either use coda or dreamweaver's code view...

but dont use a WYSIWYG editor- phail galore.

i know this is another vague post, but if you dont know how to code you cant really advance too far past the dreamweaver area.
 
notepad ++ is cool, basically after slicing the design identify what area's you can create in plain CSS and HTML. (This saves loading time on image sizes etc) You then need to take your design and css it to hwo you wnat it. After you've done than, make sure its W3C valid and browser friendly. You can then start perfecting area's for best results.
 
ok I'm going to go a little against the grain and say that using the design mode is ok as long as you go back and tidy the code up using something like the W3C validator etc, its far from the cleanest code you can write.

For example GoLive (I don't like dreamweaver but it does the same) sticks all the css styling at the top of the webpage, its usually better to use an external stylesheet and then link to it in the html code in same way as you would a javascript file.
 
i started a new thread at my web site about this :D but never finished my lesson... i guess is because i didnt have any stundent :D ROFL

btw there it goes my first thread whydontyouwebyourself

but in this step of work you need some nice tutorials to tell you who to export the slices and who to construct the grid system.Like as show them in this site: 960 Grid System

and them you can start to draft who many div´s you wanna make it for you project and defining better the ID and class´s for your CSS file.
 
43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation | Graphic and Web Design Blog -Resources And Tutorials

Essentially once you have all the segments, decide on what can be handwritten and drawn using standard html & standard css (this will most likely involve learning these coding languages, or at least the basics) and decide what will most likely be left as an image.

Work out what will be placed where then code them in...

difficult what more to say without an exact example but there are 43 tutorials for psd -> xhtml at the top :)
 
I'm presuming you want to do this yourself in order to learn (if not your welcome to pay me a reasonable fee to do it for you).

This should help - #71: Building a Website (1 of 3): Photoshop Mockup

If you would like your welcome to email me a jpeg of your design and I will sketch out (the divs/tags etc) how I would code it for your and notes on the css for you to take away and code, that would be more beneficial for you than getting someone else to do it for you, and you can obvo post for help along the way
 
This thread seems to have moved more towards IDE's than the actual question.

If you are wondering what to do I woudl start to build your page using your images....

i.e. Stage 1 - create a template to start with;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="XHTML namespace" lang="en" dir="ltr">
<head>
<title>My title</title>
<meta name="description" content="description of the page."/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">@import "styles/mystyle.css";</style>
</head>
<body>
<div id="container">
<div id="heading"></div>
</div>
</body>
</html>

obviously create your styles/mystyle.css file and add some code to that too, like this;

body
{
margin: 0;
padding:0;
border: 0;

background-color: #000000;
background-image: url("../images/page-background.png");
background-repeat: repeat-x;
background-position: top left;
}
body, p, div, span {
font-family: Verdana, Helvetica, "Lucida Grande", lucida, Arial, sans-serif;
}
img{ border: 0; }
div#container{
margin: 0 auto;
width: 800px;
vertical-align: top;
}
div#heading{
width: 800px;
height: 91px;
background: url("../images/heading.png") no-repeat top left;
}

add your heading image to an images directory and the page background image and they should show up.

There.. now you have a foundation. Start to build on it by adding div's and other elements to the page and adding css to style and position them, while using your images that you sliced up.

Simplees

btw you don;t need to use a strict doctype declaration, you can use transitional if you like for more freedom.
 
renniks said:
It started talking about IDE's?

What do you mean, are you asking or telling?

I thought the question was what you should look to do after slicing up your design. Maybe I misread it and should go read it again...
 
I was asking, as I didn't notice the talk of IDE's...
:)
just suggestions to links and ideas with how to change a PSD into a html & css page.
 
Basically you need to visualise all those sliced images ad a web page and think about what they mean. Semantics play a large part. I'll dig up a nut tuts post on how to take a PSD and slice it I to a codable site when I'm on a proper pc.
 
a little tip that I found helpful when I was learning very basic CSS, I sketched out my wireframe on a piece of paper and got coloured pens and drew boxes around each 'element' as I could see them (i.e. a red box around the header, a green one around the navigation, etc).

Then I used this to create the CSS, adding a similar coloured background into each div. Until it looked something similar to my layout.

A bit silly and simple, but it might help you visualise the page.
 
Becky said:
a little tip that I found helpful when I was learning very basic CSS, I sketched out my wireframe on a piece of paper and got coloured pens and drew boxes around each 'element' as I could see them (i.e. a red box around the header, a green one around the navigation, etc).

Then I used this to create the CSS, adding a similar coloured background into each div. Until it looked something similar to my layout.

A bit silly and simple, but it might help you visualise the page.

Brilliant advice in my opinion :) Firefox' web developer addon allows you to see different divs and how they are sized etc. so is quite useful for this too
 
haha thanks, I just found it helpful when I was starting out because it's a nice way to visualise elements if you're not familiar with CSS atall.

Web Dev's 'outline block level elements' is a god send for checking that things are in the right place.
 
Sorry guys i went out for a couple of hours there was some art thing on in the country didn't realize i'd be out for so long! Thanks for all your replies!!! I will read them all after i've had summit to eat! lol. But thanks again for all the links etc much appreciated!! :)
 
Back
Top