Hi, could I get some feedback for my site please. I've been learning as I go and keep finding myself up to my eyeballs in errors and layout issues. (no surprises there eh!)

http://www.ewegotit.com

Firstly I have done probably a typical newbie thing and used tables for most of my layout. From what I've read, it appears that I can convert tables to layout cells using CSS by replacing with div tags... am I right?? I'm using Dreamweaver by the way. Problem is I can't work out how to specify the dimensions . for example on my index page I have a little text explaining the purpose of the site which I have in a table at the moment. I would like to just be able to have that in a nice box. I also can't work out how to give the box an outline either.

Also this is more a graphicsy problem than a CSS, but I've designed the sheep logo which I would like to use on other promotional materials but although I have used Photoshop for years now (at a novice level mind) I can't work out how to make it look clean. Does anyone know if I can convert this to a vector image or if there are any great snazzy free tools which will make this logo do what I want?

I also need to filter a fair bit of crap out as I keep getting carried away with all the things, including ads, which I can throw in but I'll leave that for another day

OK, as you can see I have many issues these are just the tip of the iceberg lol so any advice would be greatly appreciated. Also if you have any suggestions which would make the layout more clean and visually appealing, major issues etc I would also appreciate your comments.

Cheers
Jo

Jo, first of all I really like your design. I think the color scheme is great and I was immediately impressed. Good job. The one thing I would like to see different is to have the entire page centered in my browser instead of being up against the left edge. But overall I like your design a lot.

The sheep look fine to me. Is the problem that it doesn't look good in print? You probably needed to use more PPI when you created it. I'm guessing you went with 72 PPI for the image online, but you generally want more information for printing. I usually use 300 PPI for anything I think will end up being printed. I don't think there's any good way to convert the image to the higher resolution.

I'm not a graphics expert and so I'm not sure if you can convert this easily to a vector image. Hopefully someone who knows more than I do will drop into this thread. The image does look like one that would scale well as a vector, but I'm not sure if you can convert the current one of if you'd need to create a new one. I suspect a new one will be needed, but I've certainly been wrong before.

As for the code, yeah, it could be improved. I do see a lot of empty <div> tags. Using css to layout a site is definitely a better approach to coding for a variety of reasons, but there are plenty of sites still using table based layouts. Don't feel like you need to rush to convert the site to all css.

Better would be to take the time to learn how to develop an all css layout and when you feel more comfortable you can rework the site.

DreamWeaver does have decent support for css, but I think it will only create a table based layout. It's been awhile and a few versions since I've used it so that may have changed. Personally I think the best way to develop is to hand code. Hand coding forces you to learn the code better and once you've got a handle on things development is just as fast as using a WYSIWYG. Most hand coders, myself included, would tell you it's quicker to code by hand once you know how.

You could use an editor as simple as Notepad, but there are better ones. I use HTML KIt, which is a free editor with a lot of nice featues. PS Pad is another free editor, which I've recommended to people and there are many more free editors.

For learning the code a good place to start is W3Schools. Simple tutorials that pack a lot of information in them. I learned css through Eric Meyer's books and I'd highly recommend any of them.

Ultimately the way to learn to code is by coding. Grab a book or find a tutorial online and start typing in the code they give you. Then play around with that code some and see if you can do some different things. When you're comfortable start developing some web pages from scratch. Hand code these even if you decide later to go back to DreamWeaver.

HTML is pretty easy to understand and use. Much of CSS is too. A full CSS layout can be a little tricky and will take some practice to get right and then with each new site you build it'll get a little easier and you'll discover better ways to do things.

It's worth the effort and time.

Thanks for your comments Vangogh, really encouraging.
I'll try and sort that left align problem out as I hate that myself. Of course on my PC it works fine so I missed that.

I have been using split code and design view while using dreamweaver so that I can try to get a handle on html but I think the problem is that dreamweaver makes it so easy to dive in and create something, then like me you find yourself up to the neck in code you don't understand. As a result I half know what I'm putting in and taking out but have been coming
unstuck a bit.

I totally agree with your point about coding by hand from scratch and I am trying to do this on a test site as I go along but my biggest problem is I lack patience. I'll keep at it though and have a look at those resources you mentioned cheers.
As for the image, you were right on the money with the 72dpi. I think I will probably need to re draw it as a vector but I just wondered if there was some natty tool out there which would do it all for me... see my patience again.

Unfortunately there really aren't any natty tools that will convert a raster image to vector AND increase the bit-depth too - which you'd need for print.

It looks pretty simple though, so if you want, I could take a crack at vectorizing it for you, I'd just need the PSD file or a good-sized JPG at least to go from.

Diane I had a feeling it wouldn't be easy to convert from one to the other. What program or programs will you use to try? Is it a Photoshop to Illustrator thing?

Jo, the compliments on the design are well deserved. I'm guessing the resolution of your monitor is 1024x768. One thing about designing sites is that you never really know how someone's viewing it. You won't know their screen resolution or what operating system their using so you generally want to be somewhat flexible in your design.

It's been awhile since I worked with a table layout, but I think if you add align="center" to the outermost table everything gets centered. Please don't hold me to that though.

In css the way I center the whole page is by wrapping everything in between the body tags with a div and assigning an id to that div. I usually give it an id="page" for lack of a better word

<div id="page">
all the code you want to be centered
</div>

Then with the css you need to give the wrapper div a width and set the left and right margin to auto. I use a shortcut

div#page {width:760px; margin: 0 auto}

The width can be anything and the shortcut on the margin is saying that the top and bottom margins are 0 (they could be anything you want) and the right and left margins are set to auto.

One more thing you need is a proper doctype at the top of your document, otherwise the above css won't work in IE.

With the hand coding just start out easy. Get used to typing the basic html structure and add a <p> here and an <h2> there. Code a list and then a form and a table. And add some css to style them. No one's looking so have fun experimenting and playing around seeing what you can create. In time you'll want to create some more standard web page layouts.

DreamWeaver and other WYSIWYG editors do make things very easy at times and that's exactly what they were designed to do. There's a huge advantage in that it lets anyone design a website. There's also a huge disadvantage in that it keeps people from understanding the underlying code.

DreamWeaver is a pretty good program, but many times you'll still need to get into the code to clean things up or fix something that just isn't working. Learning to hand code is really the best way to enable you to do that.

And of course we'll be here if you have any questions along the way.

Thanks Ladynred, that's very generous of you to offer and I'd be a fool not to take you up so, I've uploaded the PSD to http://www.ewegotit.com/assets/ewelogo.psd for you.

I'll also give centering the page a try, I had a sneaking suspicion that it would be the resolution as I tested it in 1280 last night and low and behold it jumped to the left! Thanks for the tips on sorting it out... you've been really helpful.

Jo, I'll try to knock out the logo and get it back to you.

As for centering, the margin: 0 auto works great - EXCEPT for IE 6 and below. For THAT browser, you have to also add this:

body{text-align: center;}

As long as you use a proper doctype it works fine in IE6 and and maybe even 5, though don't hold me to version 5.

I've never had to add the text-align: center.

I use XHTML 1.0 Strict and IE 6 will NOT center w/o it and IE 5.. fuggetaboutit..

Interesting. I didn't know that about xhtml 1.0 strict. Doesn't really surprise me that IE can't handle it though.

Fortunately I don't there are too many IE5 users out there anymore. Some I assume, but not too many.

Well, I (think) I have finally sorted out the issue with left aligning at different resolutions. I added the <div id="page"> and centred the lot.
Good thing is, not only did doing this teach me a bit more about building pages with CSS, but it threw up a few little niggly issues which had been bugging me and I managed to resolve those too.

So all in all, even though it took me best part of my spare time this weekend, I have definitely moved forward with my site.

Thanks again to both of you!

Jo, I should have your vectorized version of your logo to you tonight. I have it as an Illustrator EPS file now, but I thought I try to make it into a PS custom shape for you so it will be scalable.

Glad to help Jo. Every time you tackle one coding problem you'll learn something and probably find a few more issues along the way. Each one takes you that much closer to your goal.

Thanks, Ladynred, I really appreciate you doing this.

How's the logo coming along Ladynred?

Well, I've got it turned into a PS shape and a PS smart object (CS2).
If you'll PM me your email, I'll send you a zip file with the shape (csh) and the PSD with the paths intact. The zip file is too big to attach here by a few kb .