SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2002
    Location
    Scotland, UK
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Old school tables warrior, looking to CSS for new site

    Hey folks,

    I've been out of touch with actualy web design for a good few years now, been working in other fields such as video and photography but the time has come to produce a site for myself and ordinarily I would just craft something in photoshop and slice it up into tables BUT thats not how I want to do it.

    Could the helpful peeps on SP point me in the direction of a good guide on how to take a photoshop graphic and turn it into a CSS site that will flow and expand as and when content dictates within.

    I've seen a few links here and there for PSD2CSS/HTML but since there are so many I thought Id ask for recommendations before starting on one that might be not too hot.

    many thanks folks,

    Rik

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a major topic, and not one that can be answered in a single forum thread. However, we can give you a few pointers to get you started in the right direction.

    The first, and most important, advice (in my opinion) is this: forget everything you learned about table layouts!

    The reason is that you need a completely different mindset when working with CSS layouts. Otherwise you'll end up with very complicated CSS and a poorly working site that's all but impossible to maintain.

    Here's how I generally go about creating the templates for a site:
    1. Start with the markup, writing semantic HTML in a logical order for the content of a 'typical' page. Do not think about the layout at all in this stage!
    2. Validate the markup using W3C's HTML validator to make sure the syntax is okay.
    3. Add CSS style rules for generic element types, i.e., decide how various elements (paragraphs, lists, etc.) should look by default. You'll probably also set the base font and foreground/background colours in this stage.
    4. Add CSS for the overall layout, normally using the float property, sometimes in combination with absolute positioning. At this point you probably have to augment your markup a little bit, adding a <div> here and there to group things together, and setting id and class attributes for certain elements.
    5. Add the CSS needed for special styling, e.g., headings in sidebars and so on.
    6. Add any JavaScript you'll need for interactive behaviour.


    It's very important to test thoroughly at every stage in this process. Use the best (i.e., most standards compliant) browser at your disposal as the main testing browser. I use Opera, but Firefox, Safari or Chrome can also be used. Internet Explorer 7 and older are not suitable for this task, because they contain far too many bugs and quirks. IE8 is said to be much better, but I haven't got any experience with it as of yet.

    You should also validate your HTML and CSS frequently, to spot any mistakes as early as possible. Especially if something doesn't work the way you intend. Always validate before you attempt any other trouble-shooting!

    Once something works properly in your main browser, check in all the others and add workarounds when necessary. Every browser has bugs, even the best ones. Make sure it is a browser bug, though, and not a coding mistake on your part.

    And, of course, SitePoint Forums is a valuable resource when you get stuck!
    Birnam wood is come to Dunsinane

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this is a good article to start you off; From PSD to CSS/HTML in Easy Steps

    Then to make a fluid version are other tutorials. Paul 'O Brien has a few.
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Evangelist
    Join Date
    Jan 2002
    Location
    Scotland, UK
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, I will go and read up on this!


  5. #5
    From space with love silver trophy
    SpacePhoenix's Avatar
    Join Date
    May 2007
    Location
    Poole, UK
    Posts
    5,068
    Mentioned
    103 Post(s)
    Tagged
    0 Thread(s)
    SitePoint have a book that you'll find very useful. It is a good introduction to using css instead of tables.
    Community Team Advisor
    Forum Guidelines: Posting FAQ Signatures FAQ Self Promotion FAQ
    Help the Mods: What's Fluff? Report Fluff/Spam to a Moderator


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •