Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

What do I do next?!

Discussion in 'Website Design Forum:' started by allyally2k, Oct 25, 2009.

  1. allyally2k

    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! :)
  2. charles

    charles Senior Member

    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 :)
  3. allyally2k

    allyally2k Senior Member

    lol ok so can ya get notepad++ for mac?
  4. tim

    tim Senior Member

    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.
  5. Kevin

    Kevin Senior Member

    Coda, Espresso or Textmate are the mac alternatives Notepad++ ;)
  6. glenwheeler

    glenwheeler Senior Member

    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.
  7. Levi

    Levi Moderator Staff Member

    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.
  8. designium

    designium Member

    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.
  9. Renniks

    Renniks Senior Member

    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 :)
  10. tbwcf

    tbwcf Active Member

    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
  11. darren

    darren Member

    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;

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

    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.


    btw you don;t need to use a strict doctype declaration, you can use transitional if you like for more freedom.
  12. Renniks

    Renniks Senior Member

    It started talking about IDE's?
  13. darren

    darren Member

    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...
  14. Renniks

    Renniks Senior Member

    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.
  15. Harry

    Harry Senior Member

    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.
  16. Becky

    Becky Member

    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.
  17. Renniks

    Renniks Senior Member

    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
  18. Becky

    Becky Member

    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.
  19. allyally2k

    allyally2k Senior Member

    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!! :)
  20. glenwheeler

    glenwheeler Senior Member

    Nice post there renniks! (Excuse me for not using your real name)

Share This Page