Can anyone help with HTML Recode??

Discussion in 'Web Design and Development' started by Aperture, Oct 13, 2006.

  1. Aperture macrumors 68000


    Mar 19, 2006
    Hi guys. I have been using ImageReady to make my website in, & have used the generated HTML it gives me. I really want to get away from the horrible tables it uses, but I have no clue about CSS and need to recode the site. Is there anyone who can help me get going with a page or two? I can take it from there. Right now i'm trying to learn HTML & some CSS, but don't have all the time in the world to learn. I would appreciate it to anyone that replies, even to give a tip or few about something.

    I really hate asking for things w/o much in return; but i'll do what I can.:(

    Is anyone kind enough to please help me out?:(



    PS: I realize that web designers need to eat too. Please don't post if you are going to say that or the like.
  2. JHacker macrumors 6502


    Aug 27, 2006
    East Coast
    I know you said you don't have all the time in the world, but I picked up CSS relatively quickly, and I did it by using someone else's CSS/HTML code on my own, and altering it slightly to see what changes things made. The best way to learn it is to attempt it.

    As far as getting rid of tables, you can use DIVS in CSS, and then use margins to position everything where you want.

    Once again, the best way to learn it is to look at someone else's code and see for yourself what everything does.
  3. Makosuke macrumors 603

    Aug 15, 2001
    The Cool Part of CA, USA
    Best way to learn is to just start goofing around with simple stuff, or grab any of the hundreds of online tutorials and give it a shot.

    That said, here's a VERY rough example of your "about" page redone with CSS:

    It is HORRIBLY ugly under the hood, and I just used some really stupid stuff to get it lined up more or less like your original page. It's going to totally break in anything but Firefox, Opera, or Safari--I'm not even going to bother looking at it in IE, since I used enough features that it supports badly that it's guaranteed to be seriously messed up.

    I do not recommend doing it this way, but maybe if you look over how I did it you can get a very general idea of how that sort of layout can be done; for example, the gradient background is VERY simple (you can see how I did it in the code), and only takes a single 1K image. In fact, the whole page is only about 3K now (1K page, 1K CSS, 1K image), and only uses the one gradient image for the background; something of an improvement over the 80K or so of your entirely image-based original. Plus, since it's "real" text instead of a picture, it's more likely to get noticed by search engines.

    I used Trebuchet MS, which looks moderately close to whatever you're using there, but if you wanted to have, say, your name at the top or the navigation buttons in a specific font, you could always make JUST those images--saves a lot of space over doing the whole thing as an image.

    That said, here are some tips that as a designer you're probably not going to like:

    Working with HTML/CSS isn't the same as working with page layout, and trying to force it to be is sort of going against the grain. For example, you can set exact pixel widths and absolutely position everything, as I did in this example, but it would be much better to use a more "fluid" layout that is more flexible when the window is resized, etc.

    Also, vertical centering just does NOT work well in CSS; I used a crude trick to get the stuff in the main box roughly centered, and you could get approximately the same effect by setting a top margin of about the right amount to move it halfway down, but it's going against the grain.

    I find it's better to "think web" instead of coming up with a print design then trying to apply it to the web--remember that not everybody has the fonts you want, or the monitor size you wish they did, or has good eyes, or whatever--a LOT of people like bigger text because they've got bad eyes or a high resolution monitor (for example, my laptop has higher resolution than my desktop, so I crank up the font size on web pages so I can read properly). If you try to force a very precise font size or design around text being exactly X pixels high or whatever, you're just going to annoy folks with bad eyesight or high-rez monitors.

    Be flexible, think web.

Share This Page