digg

Join DiggAbout

Donkeys and Elephants and Delegates,oh my!
Check out the most popular Elections 2008 content on Digg.

The RIGHT way to convert your Photoshop design to XHTML and CSS Layout

joplan.com — How to Convert your Photoshop design to XHTML and CSS div based layout.

Bury
show profanity settings
expand all
  • chipitople, on 10/12/2007, -9/+15nice--really simple and easy to follow......
    • datsclark, on 10/12/2007, -3/+57Fast server, no video, straight forward. Dugg. I dunno why more people don't write "tutorials" like this.
    • simpleid, on 10/12/2007, -9/+9This is a fundamental step in building your web sites or web applications, but the level of detail should be higher, and more planning should be involved than shown in this (i understand) 'quick' tutorial. You really want to know every dimension of every piece that will be adjusted in any way, and have an idea of how everything will be pieced together -as- you design. Exactness determines the quality of your work.

      Just something to note! : ]
    • Cmain, on 10/12/2007, -5/+10It should be a useful tutorial for beginners. Just try to remember to use semantics. For example:
      A header, image or text, should be put in tags.
      A menu should be done with a list.

      This tutorial covers some great basics. For anyone trying to get deep into CSS and XHTML layouts I suggest checking out this book which is really great:
      http://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321346939

      There is also an ebook of it out there. It helps with cross browser problems and is great for semantics.
    • Cmain, on 10/12/2007, -0/+5hehe sorry about that I forgot I can't put tags in here and missed the edit time.

      Headers should be in < H1 > tags
    • DJSdotcom, on 10/12/2007, -20/+11Man this tutorial works great if your design is from the 1990s and uninspired, but what about sites that don't have a simplistic main navigation, "one gigantic middle section", and then a quickie footer? You know, every other website on the planet?

      Marked as lame, I can't believe people actually write/read/follow this crap.
    • Jayphen, on 10/12/2007, -1/+4@DJSdotcom -

      Then you take the same concept and apply it to a columned layout. This is just a very basic tutorial, and it assumes the reader has never attempted using Photoshop to create a layout without slicing it up in imageready and sticking it into a table.
    • GaffleSnipe, on 10/12/2007, -1/+3I doesn't need to be more in depth. It assumes that you already know how slice up a photoshop file and make a site with it. It's the method that is important here.
    • Drahkar, on 10/12/2007, -7/+2Actually I don't know how 'good' the tutorial is for the long term. the DIV tag is considered a depreciated tag under W3 and will likely be pulled from use eventually.
    • Jayphen, on 10/12/2007, -0/+3@Drahkar -

      The div tag is deprecated? Wow, I don't know where you heard that, but it couldn't be further from the truth.

      The align attribute of the div tag has been deprecated, but definitely not the tag itself.
  • Elranzer, on 10/12/2007, -68/+13While the site itself uses sloppy Table-based layout...
    • crawfishsoul, on 10/12/2007, -2/+22Did you even look at the source before making that comment? Not a single table, tr or td to be seen.
    • webtekie, on 10/12/2007, -4/+16ha, ha. He probably thought it was "cool" to use "Table-based layout" in a sentence.
    • seanmc303, on 10/12/2007, -7/+8@Elranzer, where are the tables on the link for this article. They are not in the source code nor in the tutorial. They even have a statement about the tables on their main site. Take a deep breath before freaking out. Anyway, I have heard the arguments by the div camp and for years I have tried to implement them myself, but I keep coming back to tables because browsers, yes even IE, knows how to render a table. You can fight with proper layout for your css div layout to be cross-browser compatible, but I have decided that I don't want to minimize the amount of time in my life I spend cursing and IE to hell. Sure tables are a little more bloated and not as manipulatable as divs, but they sure are fast and painless when dealing with browsers you'd rather not deal with.
    • honging, on 10/12/2007, -2/+13www.joplan.com is probably where he's seeing tables; there's a few scattered in the source there.
    • xxNIRVANAxx, on 10/12/2007, -3/+6Honging is 100% correct, no need to digg him down...
    • bleutuna, on 10/12/2007, -12/+6Nothing wrong with tables when used correctly. The whole concept of moving to CSS/DIV positioning is annoying. It all depends on the application, but a table is *ALWAYS* right, whereas you have to deal with inconsistent browser interpretation for divs to work.

      I've been building sites for a decade now, and that's still the case. Maybe in another 10 years we'll actually be able to do everything in CSS across the board. Somehow, I doubt it. There'll always be some crappy Safari problem or whatever goofyass browser someone's using.
    • bleutuna, on 10/12/2007, -6/+10Addendum to my comment: There are ways to do everything in CSS, where you can use CF, PHP, ASP, AJAX, JavaScript, etc. to detect what browser you're using and give you a stylesheet that works for that browser. I've had to do it before.

      However, when we're talking wanting to get a site templated out in less than an hour so you can start the hardwork of adding content, doing your backend system, etc? Tables always work. Consistently across the board. Wanted to make that clear.

      CSS is cleaner. Tables are steadfast. Both work. Neither is evil.
    • DNABeast, on 10/12/2007, -2/+8Not really everything. Mobiles don't display tabled design properly. Nor Palm pilots and their ilk, and screen readers for the blind like Jaws. They don't work, and hey! Didn't nintendo just release some sort of browser that benefits from semantic coding?

      Tables are for tabular data only. If you don't want to learn, at least you should acknowledge that it's because you're unmotivated, not that tables do the job properly.
    • bleutuna, on 10/12/2007, -5/+12Unmotivated? Please. I DO THIS FOR A LIVING. I've taught myself HTML, CSS, ColdFusion, ASP, JavaScript, Photoshop, Illustrator, After Effects, blah blah blah blah blah. One thing I'm not is unmotivated.

      I was using CSS back in 1997 when the only thing it was really good for was making the underline disappear on links or making your background attached. That's back when Netscape had layers.

      I've forgotten more about CSS then you've learned, boyo. In my career I've personally coded over 250 websites, in all sorts of languages, for all sorts of browsers. Your site ( http://www.invisiblespiders.com/ ) betrays your 'top notch' coding skills with its inline CSS and lack of solid commenting.

      And the Nintendo Wii uses Opera, which has no problems utilizing tables. Whippersnapper!!!
    • ei8htball, on 10/12/2007, -4/+10@bluetuna
      "Nothing wrong with tables when used correctly."
      That is a 100% correct statement...
      A correct use of a table would be to display tabular data (http://www.w3.org/TR/WAI-WEBCONTENT/). Last time I checked, using a table for layout isn't using it for the display of tabular data.

      "It all depends on the application, but a table is *ALWAYS* right, whereas you have to deal with inconsistent browser interpretation for divs to work."
      No it isn't. DNABeast makes several very good points, but one that he omitted is that IE renders tables slightly differently than other browsers.

      "There'll always be some crappy Safari problem or whatever goofyass browser someone's using."
      I have yet to run into an issue with Safari that wasn't a mistake my code. (IE on the other hand....)

      "There are ways to do everything in CSS, where you can use CF, PHP, ASP, AJAX, JavaScript, etc. to detect what browser you're using and give you a stylesheet that works for that browser. I've had to do it before."
      How do you use AJAX to detect a browser? Wouldn't that be using JS?
      Why would you develop different style sheets for every browser? I'll admit that a hack or two is sometimes more convinent than doing it "properly", but there's no reason you'd have to have completely different style sheets... if it doesn't display the same down to the pixel, who cares? You're probably to only one that's going to compare how it looks from one browser to another. I'm not saying that you have to accept major differences, but a few minor ones are bound
      to come up eventually.

      "CSS is cleaner. Tables are steadfast. Both work. Neither is evil."
      I think I prefer something more along the lines of:
      "Semantic code is correct, therefore the use of tables for layout is incorrect. Both appear to work to a person without a disability that would effect the way they browse the web. There's no such thing as 'evil'"
    • ei8htball, on 10/12/2007, -6/+3@bleutuna
      "I DO THIS FOR A LIVING."
      Uhh... so do I...

      "I was using CSS back in 1997 when the only thing it was really good for was making the underline disappear on links or making your background attached."
      In case you hadn't noticed, things changed.

      "[DNABeast's] site ( http://www.invisiblespiders.com/ ) betrays [his] 'top notch' coding skills with its inline CSS and lack of solid commenting."
      The only commenting I could find on your site was along the lines of "" labeling your tag soup so that the endless nested tables wouldn't confuse you...

      After looking at the first site linked to from your page (http://www.tiltedwindows.com/), I'm not sure why I'm even still wasting my energy... it uses frames... and not in a good way...
    • bleutuna, on 10/12/2007, -2/+31) When you're writing HTML, you don't need line by line commenting to discuss what you're doing. Rather, you use commenting to work as placeholders for other people when they access your coding. Higher end programming, such as CF, ASP or PHP has documentation in its coding. But as you know, you don't see that when viewing source.

      2) TiltedWindows is an exception to the rule to get around collegiate red-tape and domain owning and server owning. Sometimes you have to work around.

      3) I test all my sites in Webbie, a browser specifically for the visual impaired. Thanks. The biggest hindrance to the visually impaired is actually the proliferation of text-based advertisement, such as GoogleAds, which clutter up their Text-to-Speech applications. But of course, you knew that already.

    • bleutuna, on 10/12/2007, -5/+4Anyway, Zach, you do things your way, I'll do things my way. But I can promise, I'll never do ANYTHING that looks like your handiwork right here: http://www.potsdam.k12.ny.us/~dsipher/apes_05-06_projects/zach/taxonomy.php

      Good work there, Boyscout.
  • bitterCAMPARI, on 10/12/2007, -2/+16I'd say it's a good start for beginners, however there is some unnecessary css involved. When you have already defined a width with your container, the divs nested inside don't need a width unless you want them to be shorter then said width. Also I don't think css recognizes 100% height at all, I could be wrong with that though.
    • dyzlexiK, on 10/12/2007, -1/+10100% height is a tricky one, being treated diffrently in almost every browser. It shouldnt be used. IE treats it like min-width, while Firefox will stop the container at 100% of its container (Window or set container) and refuse to stretch, allowing content to overflow but stopping background colours and borders, etc. Mozilla on sun system goes one farther by screwing anything past the 100% original height.
  • castrox, on 10/12/2007, -3/+10It's about time "web designers" learn to separate code from content - using CSS. Simpler to maintain, simpler to parse and also yields much simpler solutions to "complex" problems instead of being forced to solve them with e.g. tables (nested mess of columns and rows)...
    • jamief, on 10/12/2007, -6/+6Wow, what a fresh perspective. Where would we be without your daring iconoclastic leadership?

      Seriously. Every web design site says the same damn thing.

  • stuntant, on 10/12/2007, -21/+3This is spam if you look at the link he even customized it and put it in it's own digg/ folder.
  • NotalesS, on 10/12/2007, -4/+7Not that great. FOr such a simple desing (ie single colum) theres not much work to even get done. He should have done something a little better, and well more thought out.
  • PhrosTT, on 10/12/2007, -6/+34This is terrible.

    For starters, both the header and footer have huge chunks that could be coverted into a 1 pixel wide image that x-repeats.

    From somebody telling us to "start doing it right" they should probably do some learning before they start teaching.
    • coolspray, on 10/12/2007, -8/+2Digg it!
    • webnesto, on 10/12/2007, -3/+5I would think he didn't include that in his example as it would make it more complex and therefor harder to follow as a tutorial.
    • Hexxagonal, on 10/12/2007, -1/+9he shouldn't have called this the right way to do it then. more like the lazy way to do something on the right path.
  • joaob, on 10/12/2007, -10/+3Another perfect example of how digg'ers don't actually look at the articles before digg'ing

    blatant spam capitalizing off of yesterdays criticized front page digg
  • LittleDanzig, on 10/12/2007, -10/+4The RIGHT way to convert your Photoshop design to bloated, deprecated and spottily-supported CSS.

    Buried.
    • RustIndy, on 10/12/2007, -0/+6Which part of his CSS is deprecated? Or spottily supported? Admittedly, a layout that simple doesn't need as much CSS as is in there, but it's a long way from bloated, especially compared to the equivalent table-based code.
    • honging, on 10/12/2007, -2/+12margin: 25;
      padding: 25;

      25 what? elephants?

      using text-align to do centering is a bad method; you should use margin-left: auto; margin-right: auto; to accomplish that. using text-align: center cascades to all the children, which is why this guy was forced to declare text-align: left; on all the children nodes.

      using height: 100%; is a bad on the body/html too (there's a thread about it above)
    • theVariable, on 10/12/2007, -4/+1honging is right. There's no need to digg him down...
    • mrussell, on 10/12/2007, -0/+4honging is right, but judging by the number of "I don't like CSS cause you have to code for different browsers" comments on digg articles, most of the people digging down don't actually understand what he/she is saying. Although I would point out in a geeky css geek way that IE versions below 6 don't understand margin: 0 auto so you would need to use text-align: center

      It's a good intro, and I wish there was something like this when I started learning standards - but it is flawedd, so have a look and then move along, move along
    • Hexxagonal, on 10/12/2007, -0/+1i completely agree, but know your target. for instance my site sees about 2% IE Browser < 6. i don't sell anything so i could care less about the 2% of my viewers who use old ie browsers.
  • Trihedralguy, on 10/12/2007, -0/+11I'm not so sure this is a good way to start someone off into the CSS world - Or even start someone off into web design. The pages are all graphically ran and if you re size it or change browsers to something bizzar you can really get some weird stuff that happends. This is great if you want to create something simple, but if you want to move beyond that, this is not a good way to start learning any language (CSS, HTML, etc)
  • smedrick, on 10/12/2007, -1/+1That may work for such a simple, fluff site...but that is not the way to do it if you want to make anything more substantial than a simple blog. What a hack job!
  • alexvalentine, on 10/12/2007, -10/+4Buried. That site is way too ugly for someone to be writing any Photoshop howto.
    • andyhite, on 10/12/2007, -3/+4Um, it's not a Photoshop how-to, it's an xhtml/css how-to. Did you actually look at the article?
  • jmulder, on 10/12/2007, -2/+20Uhm. All he did was explain how to save selections from Photoshop and use them as a background image. Just when you think all the amateurs are left in the era of table-based design, someone gives them a helping hand to come across to the proper side.

    The real discussion in the tutorial should be focused on the seperation of content, presentation and behaviour, semantics, source-order for usability and CSS's crucial theory on floating, selectors and inheritance.

    "Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for life."

    - Design Rant: http://www.thenoodleincident.com/tutorials/design_rant/
    - CSS Based Design: http://adactio.com/articles/1109/
    - Writing Semantic Markup: http://www.digital-web.com/articles/writing_semantic_markup/
    - The Elements of Meaningful XHTML: http://tantek.com/presentations/2005/03/elementsofxhtml/

    Note: Granted, the articles are old, but the essence has gone unchanged. Only the implementation has become cleaner in some areas, perhaps.
    • chubbymidget, on 10/12/2007, -8/+2-1 for using this phrase
      "Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for life."
    • HarrisonFire, on 10/12/2007, -8/+7"Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for life."

      I prefer "Build a man a fire, and he will be warm for the night. Light a man on fire and he will be warm for the rest of his life."

    • inajeep, on 10/12/2007, -0/+3I agree, and all kidding aside it's a topic that needs to be discussed more, how about putting your hat into the ring ?
    • frontpage, on 10/12/2007, -1/+4Loan a man a fish, and he will owe you a fish and interest.
    • snakepimp, on 12/27/2007, -0/+1QUOTE: jmulder- "The real discussion in the tutorial should be focused on the seperation of content, presentation and behaviour, semantics, source-order for usability and CSS's crucial theory on floating, selectors and inheritance."

      Way to nail it, jmulder. This article is teh suck.
  • Obsidian743, on 10/12/2007, -0/+3Simple and clean but not necessarily the best method. Those image sizes add up. Slice a few more smaller parts (few more divs), use colored backgrounds/borders and save the user some bandwidth.
  • jboi, on 10/12/2007, -16/+4I don't like CSS. I don't like the fact u need to test a design in like 8-15 different browsers. i don't like the fact u need to know hacks. Its not my job and frankly i don't care about browser bugs, browser versions, incompatibility and ***** up standards.

    So i work in a different way. My CSS codebase consists of some open source flexible designs, that basically cover all most used layouts. These are tested, updated and commented on by people. And i place my photoshop design on top of it. Customize the CSS and done.

    Nice, clean & fast.


    • ScottMaximus1, on 10/12/2007, -0/+7basically, you hate the english language AND creating custom designs?

      You're a real professional
    • KSUdesigner, on 10/12/2007, -1/+4"I don't like CSS. I don't like the fact u need to test a design in like 8-15 different browsers. i don't like the fact u need to know hacks. Its not my job and frankly i don't care about browser bugs, browser versions, incompatibility and ***** up standards."

      Nobody LIKES to test in multiple browsers, but it is something that we must do to ensure our designs will be viewed properly on every system possible. It might not be your job, but I sure as hell hope you aren't a web designer. If you are, you oughta be fired.

      "So i work in a different way. My CSS codebase consists of some open source flexible designs, that basically cover all most used layouts. These are tested, updated and commented on by people. And i place my photoshop design on top of it. Customize the CSS and done."

      If somebody is paying you for the same old layouts that you've been using for years then you are awfully lucky. Just because a design works once does not mean it is going to work for every application you come across. It's people like you, the ones who use templates and can crank that out in an hour or two, who are ruining the industry. How can a real web designer compete with someone who can turn out an entire site in a day because he used an old template? Do us all a favor...quit your job and get a real education in this stuff.
    • takamalak, on 10/12/2007, -1/+1I feel sorry for the people who hire you.
    • jboi, on 10/12/2007, -2/+2Yeah in a perfect world i would be quite happy to have a designer and a web developer to do this for me.
      But reality is more like this.

      Customer buys packaged software solution with some customizations.
      My boss tells me: produce FAST & CHEAP!

      So yeah, people hire me to build stuff on used templates. Its not my fault, its the customer who doesn't want to spend allot of money on IT solutions.
      Most of them hardly seem to know what they are buying or what they really want & need.
      This is what u get if u have a company who uses sales people to design software for customers.
    • KSUdesigner, on 10/12/2007, -1/+1"So yeah, people hire me to build stuff on used templates. Its not my fault, its the customer who doesn't want to spend allot of money on IT solutions.
      Most of them hardly seem to know what they are buying or what they really want & need.
      This is what u get if u have a company who uses sales people to design software for customers."

      Actually that is your fault. Part of your job as any kind of designer is to tell your customer what it is they really want and need, whether they do or do not know what they want/need. You are SUPPOSED TO BE the professional here, you should be able to look at any situation and provide a custom solution...even on the cheap.

      "Customer buys packaged software solution with some customizations.
      My boss tells me: produce FAST & CHEAP!"

      While my day job isn't exactly web design, I hear the same thing from my boss, and I'll bet 90% of designers do too. This is still not an excuse to provide cookie cutter solutions for every customer. Take my job for instance. I work for a CD duplication company. This year I designed approx. 1,200 CD covers. My boss charges our customers NOTHING for my design time (a mistake IMO but I'm quickly convincing him to start charging). So naturally I have to complete my work quickly and cheaply. Naturally I have a bunch of templates that I've got set up when I'm in a pinch, but there's no more than 10% of my work that was done from a template.

      If every designer worked the way you do there would never be anything new to look at. Nearly every designer is told the exact same thing as you, "FAST AND CHEAP!" Unless you can start producing your own ideas from scratch and be able to execute that quickly and cheaply, then you aren't any sort of designer in my book.
    • strazz, on 10/12/2007, -1/+2Why is everyone modding jboi down? If customers keep coming back and fast and cheap is working, then keep doing it! If you notice some dissatisfaction and the number of clients is dropping then start focusing on more quality and more customization. Why whine about how jboi is "ruining" the industry, blah, blah, when all jboi is doing is making the most profit possible, quickly and legally? I think the real problem is that people are pissed that jboi makes more money in less time...
    • MeatBiProduct, on 10/12/2007, -0/+1the people that make a big deal over design tend to be 16 year olds not working in the business. they make a blog and instantly think they are pros.

      the truth is if you have a short amount of time to complete a lot of work a CSS template and a design merged toghther is a great idea.

      reinvneting the wheel everytime you make a website is a bad idea and usually results in less money and more work. we have frameworks for software so a framework for design makes total sense. arguing against that just shows your own ignorance.
  • pazcal, on 10/12/2007, -3/+3this article is not so useful...
  • sqyttles, on 10/12/2007, -5/+0I used to game with the webmaster(s) of joplan.com. Good job, Dustin (or whoever wrote the article). You're internet famous now.
  • bradabrahams, on 10/12/2007, -3/+2There are way too many divs in this layout. The container div is unecessary, you can style the body element directly. There's also no need for the menu div - just place an unordered list in there and style it the same way as if it were a div. Same for the extra div in the bottom div, just use a paragraph element and style that instead. Also, while I'm being extra nit-picky, the names of the divs could be given more semantic meaning.
  • kalphegor, on 10/12/2007, -0/+5Using a DIV instead of UL and LI for the menu, no digg
  • Joyrex, on 10/12/2007, -1/+2This is news? I thought this was the only way to output graphics from PS for use on a web site...

    Can't say I like his container border showing through his navigation either - but it's not about the design though, is it?
  • daroot, on 10/12/2007, -0/+2okay i think its good to show people how to get rid of the stupid layout tables.
    BUT: this is not the RIGHT way, its just div div and again div. the M in XHTML stands for Markup.
  • theLingoKid, on 10/12/2007, -0/+2You know if all sites were that easy to create, then Web designers like myself would not have jobs, or job security. Thank god its not that easy. But this is a great start... for learning what a tag is... what about all the other important stuff like the doc type and weather it is strict or transitional....

    DUGG! because it is a good intro... now follow it up with some more knowledgable content....
  • makingme, on 10/12/2007, -3/+2The design is quite ugly. Its essentially a giant self-absorbed gradient. But good tutorial.
  • oavil, on 10/12/2007, -1/+1That example layout is way too easy.
  • Dracos, on 10/12/2007, -1/+2His site design and the method he uses is so simple as to be almost useless for illustrating any real world solution.

    No floated elements, no positioning of any kind, and no real mention of the box model, although he did manage to toss in a hack for IE.
  • Bramus, on 10/12/2007, -1/+1Omg, again someone who thinks he can do CSS (you can omit 3 divs by just applying some basic padding) ... I suggest you start reading some books like Designing with Web Standards, Web Standards Solutions, The Zen of CSS Design, Eric Meyer on CSS, CSS Mastery and - last but not least - Transcending CSS.

    Suggested markup would be:
    - header div with h1 in it (replaced by your logo) and an ul in it for the menu
    - content div
    - footer div

    Yet, I must say that's it way more better than that other dugg article where that one guy exports his Photoshop Slices to a CSS layout (wow, he's a pro ... NOT!)
  • bleutuna, on 10/12/2007, -0/+2UGH. Please, what does that even show you? The guy has no idea what he's doing. There are about a dozen ways to do this, far better, and he doesn't even show you how.

    What he gave is a 'n00b's retarded guide to cropping & compressing.' Nothing more.

    A masthead that big is wrong on numerous levels:
    1) It's going to be large byte wise, which is never good, and require sometime before it shows up in the browser
    2) His design isn't scaleable in the slightest
    3) His masthead is made of multiple parts, which can mostly be broken down into files that are less than 1k per image, and then repeated using CSS and div/table structure to make a cleaner, smaller, better page.

    I'm so tired of little kids who know nothing about TRUE HTML/CSS giving these crapass 'how to' guides.
    • daroot, on 10/12/2007, -1/+1what do you mean with table structure?
      dont tell me you are one of those little kids, designing layouts with tables ;)
  • rubah, on 10/12/2007, -0/+1It doesn't seem to deal with how to get a discrete tiling image to go behind the text (and an image lining the left side), but still take up the remaining page length so that it reaches to the bottom box, which frankly is my problem now :(
    • bleutuna, on 10/12/2007, -0/+1Exactly. If you were to say change your logo - with this style, you'd be forced to crop out that large image all over again. If he'd have used a repeating background in a TD or a DIV, then he need not worry. He'd only have to crop out the exact size of his logo, aliased to the background color, and voila - quick, easy, LOW BYTE size simplicity.

      When it comes to simple web design, sometimes you have to make things more detailed/complicated at the beginning so changes and updates are a cinch in the long run. In fact, that's ALWAYS the case. I'd rather spend 4 hours getting it right at the beginning, and then 5 minutes a day updating for the next year or two than spend 10 minutes writing/cropping some huge, messy image code and have to deal with a pain in the ass every time I want to update.
  • dgrant, on 10/12/2007, -1/+2Anyone know how to do those guide lines in GIMP?
  • Anderue, on 10/12/2007, -1/+0Their navigation which is a list of links isn't coded as a list.

    Poor coding from someone trying to teach.
  • Verdanic, on 10/12/2007, -0/+1It does cover the very raw basics. I think everybody has to start off doing a few things too simplistically (not dividing up that header or footer for faster load times and more flexibility, for example), and have to learn how to make changes to their techniques as they go along. You can't dive straight from table layouts to CSS floats, positioning, etc. I don't think you can, anyways, I know I didn't.

    It's a good start, gets somebody off on the right foot.
  • filipeanut, on 10/12/2007, -1/+5So what if he didn't do any precise image cutting or concentrate on better looking headers and footers, he really made his point across to me as a beginner. I've been using tables for a while for my web layouts and now I know an easy way to make a website from pshop to css. Thanks for taking the time joplan.
  • nonconformist, on 10/12/2007, -2/+1DNABeast says: "Tables are for tabular data only. If you don't want to learn, at least you should acknowledge that it's because you're unmotivated, not that tables do the job properly."

    I 100% agree. There is no excuse for using tables for design. None at all. If you are still building sites using techniques that were popular in the 1990's then you might want to consider if you will still be using tables in 10 years time. Tables are for tabular data, and even that is not necessary because CSS can do that as well.

    You can keep telling yourself not to make the jump to CSS because 'it's too damn hard and takes longer' if it makes you sleep better at night. But deep down inside you know you are lazy.
    • Chandon, on 10/12/2007, -1/+0If you're going to set the width of the one text column in *pixels*, how is there a difference?
    • MScrip, on 10/12/2007, -0/+1> "There is no excuse for using tables for design. None at all. If you are still building sites using techniques that were popular in the 1990's..."

      Well, if they are STILL using tables for layout... it probably means they still work.

      People that say, "stop using tables for layout, start using CSS for layout..." only proves that tables have been used for layout for a long time. Using tables for layout is something that has been done, and will continue to be done.

      I agree... tables are old, clunky, and hard to manage. But that's how I learned. I looked at various websites over the years and taught myself. I learned what professionals of the day were doing.

      Now, I'm doing the same thing with CSS. I look at the code for good-looking sites and learn from the best. I study any CSS tutorial I can find. I'm learning CSS. But, I can't change the fact that I learned tables first!

      Hell, there are plenty of websites that still use tables. Why? Because they work... and will continue to work. Oprah.com is built with tables. It's a billion dollar company, with millions of pageviews a day. Do you wanna tell Oprah that her designers are lazy?

      In a perfect world, no one would have ever used tables for layout. But, they did. And still do. You can't undo history. You can only push CSS towards the future, and learn all the hacks to make it work across all browsers.
  • filipeanut, on 10/12/2007, -1/+3I forgot to mention: If you still feel like criticizing this tutorial do something about it and unveil how you created your beautiful website from photoshop to css.
  • linusthepenguin, on 10/12/2007, -0/+3Instead of complaining about how this is not the "RIGHT" way... why not provide some alternative tutorials similar in nature? I'm looking to get into web development and it doesn't help by just bashing along for those who are interested.
  • Chandon, on 10/12/2007, -3/+0Yet another fixed-width-in-pixels web design that happens to look fine in the designer's browser today, but will look like utter crap on a higher (or lower) resolution display. Remember kids: If you're specifying sizes in pixels, you're probably doing it wrong.
    • Metasquares, on 10/12/2007, -0/+1Depends on the content and the nature of the design. Fluid layouts have the advantage of making use of any reasonable amount of screen space well, but enforcing a rigid structure on the design itself becomes difficult.
    • Chandon, on 10/12/2007, -0/+0It doesn't have to be what you call a "fluid" design. My point is that pixels are not a measure of distance... try millimeters or points. This does get you into trouble with raster images, but a good web designer should be able to work around that problem.
  • Metasquares, on 10/12/2007, -0/+1Not bad, though simplistic. Everything is not a DIV, after all.

    I think it's best to experiment and figure out which approach allows you to create the best sites in the shortest amount of time. Yes, development time is important: the majority of my web development business comes from clients who want entire sites designed in 2 or 3 days at most. If you design fast and design well, you'll build a reputation.
  • albatross2147, on 10/12/2007, -1/+1They seem to be using tables in South Asia where all the work is going.

    Could it be that the client doesn't want to wait three months whilst you ALA tableless design fundamentalists work out 11teen hacks to make your sites work in IE7, 6 and 5.5 and Firefox and... Safari. Or 5 weeks whilst you work out a way to add a banner advertising a sale precisely where they want it to appear.

    • nonconformist, on 10/12/2007, -0/+1Wow if it takes you that amount of time to implement a few hacks then you have bigger problems to worry about. CSS is not as hard and as time consuming as some people will have you believe. Anything worth doing is worth doing properly. No matter what anyone says, using tables for layout is half-arsed and dated. It's just not what they are meant for, and now that is proven CSS are superior, why do people still use tables?

      To all you table jockeys out there - seriously - it is not that difficult to make the jump to CSS. And once you have you will wonder why you didn't do it earlier. Give it a shot.
    • theblt, on 10/12/2007, -0/+2@albotross2147
      Please, show us your work of table-based layouts.

      I've been on both boats and I'm currently on the CSS side of things for 3 reasons:
      A) Tables are extremely restrictive unless you just export the slices from Photoshop, but now you're dealing with a hefty file with the countless 's and spacers.
      2) Countless accessibility reasons, not necessarily important to most people, but it is important to me
      D) DIV's are a growing technology and are only going to be further utilized in the new CSS3 spec.

      Just seems to me that inexperience and laziness seem to be the underlying factors. And then people argue due to their ignorance about the subject. There isn't a damn thing you can do with tables that you can't do with a little CSS. Though it may take time to fully master, it's worth it when you're finished. I'm no master but I don't run into huge obstacles when designing any layouts anymore. W3C..
    • MScrip, on 10/12/2007, -0/+0> "No matter what anyone says, using tables for layout is half-arsed and dated. It's just not what they are meant for, and now that is proven CSS are superior, why do people still use tables?"

      Yes, using tables for layout is dated. But, by saying that, you admit that tables WERE used for layout. In fact, many sites still are.

      There have been tons of websites built in tables for years. Were they all wrong? CNN.com has been around for over 10 years... and it's been in tables. Only in 2006 did they finally make a huge leap to implement CSS. Yahoo.com used tables for layout until late 2006. Are they wrong? NBC.com switched to CSS in 2006 also. These are huge companies. What kind of example did they set when they were using tables for layout?

      You're right, tables were never "meant" for layout. But, someone tried it, it worked, and it caught on. For many years, websites were designed with tables.

      Most websites are now "switching" to CSS, which proves that they must have used tables before that. Prior to the widespread adoption of CSS, tables were the only game in town. Were they still "wrong?" Or were they using the tools available at the time?
  • raccettura, on 10/12/2007, -0/+2Only problem with this tutorial is that the design was made for the sake of the tutorial. Ive never seen a site with such a simple design.
  • dudez12, on 10/12/2007, -0/+3Great tutorial! I coded my entire layout in around 20 minutes!
  • j3one, on 10/12/2007, -0/+4Hey it's a start. Thats all I could do on an hour lunch break and I am sure its chocked full of mistakes, but the idea is not to teach people how to float divs, do semantic markup or design pretty sites. It was for make benefit good photoshop designers that are still ctrl-shift-alt-s'ing out sliced up sites and/or making anyone who has to touch the code suicidal. Nobody wants to wade through one of those.

    Besides too many people put perfectly good tutorials out there that will show people how to do proper web design but all that happens is people copy it verbatim, try to throw it together their web 2.0 1337 site and at the first sign of trouble don't have a clue what to do. They have learned nothing. Now you have some basic idea that goes against the grain of yesteryear web development and you can start learning how to use xhtml, css, limited images and javascript, to make great sites. You can do this in usually less time than it takes to set up a table based site, and always less time than one takes to maintain.
  • galen, on 10/12/2007, -0/+2thats common sense stuff!!!
  • GarrettB, on 10/12/2007, -1/+1I don't see how this is 100% correct, since he uses unneeded elements and isn't teaching XHTML/CSS properly.
  • mrl14, on 10/12/2007, -2/+2Another lame site that somehow made it to the front of digg. This page spoke of nothing. What about browser compatibility? What about sites that are a tad more complex than an image header/footer and a text body? Come on. Get Real.
  • premierd, on 01/23/2008, -0/+0Hi guys. What would you say about http://www.dassnagar.com
  • xboxdesign, on 07/29/2008, -0/+0I like it it's too good

    http://xboxdesign.com
    http://www.zeniltuo.com/
    http://www.iconlook.com/

    lokendra
    (web designer)
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.