View Full Version : Layout Options

05-07-2007, 08:25 AM
I am a new web designer and I am trying to design my web site for my company, so I will be trying to get as much input as possible hahaha, so I guess my first question would be, with the different options of creating a layout...{im going to get off topic real fast, I am also a artist, lol now I AM good at that, and I love creating my sketches first, with pencil then trace with a micron pen for final glory, to show if you will, so I always love the option of tracing "images of a site made with photoshop, or a site that I could literally sketch"}
The different layout options I know of (I am using lynda.com for all learning)

-Image maps (I know old, and not something I prefer lol)
-Layout mode in Dreamweaver which uses div's (which is good, but dreamweaver maps coordinates similar to image maps...is this a good option considering it is my favorite)
-CSS modeling, say with boxes (which is very hard for me, b/c i HATE floats and positioning, its soo confusing for me)

Thats all I can think of for now, and I love layout mode, b/c after I scan in my sketch of the site, I can turn it into .jpg and then use dreamweavers feature of tracing image, to literally build div boxes over the pic...

So knowing all this, what is the best way that I should be building the layout of my site? any suggestions, anything close to what I like, any hybrid ideas with what I like doing? thanks soo much and I am excited to see the responses as I am giving a lot of faith into this site, thanks!

05-07-2007, 08:32 AM
CSS is your best bet. Image maps have their use, but that's few and far between. Things like Dreamweaver (WYSIWYGs - What You See Is What You Get) add all kinds of superfluous code and it's a good idea for you to know why every single thing is in the code.

CSS allows you to update, modify, and control the entire look of your site from one file. Style sheets also allow you to focus on the content when writing the page and the layout when dealing with the CSS file. It's a separation that you'll likely welcome soon enough. Look at the reference page in this category (http://www.codingforums.com/showthread.php?t=20862); jump down to "Various resources." Lots of good stuff there. Floats aren't as bad as they seem once you get a few practice layouts under your belt.

05-07-2007, 08:48 AM
Hmm, ok I can understand what your saying, how its better for the long run... So is it a bad idea to use <div>'s?

See, regardless of using float or positioning at what not, when I am creating content...for example take this page
When building this, do you type up the content first, and then one by one, highlight the content and start applying css rules to it?

Like what would the worflow of building with css looklike, b/c I am an interest in coding this way, but I just get so lost while doing it, and try to resort to tracing my sketched out images lol, thanks!

05-07-2007, 08:50 AM
Oh yea, one more thing....take everything I just said and add this to the mix lol....how would I accomplish this with using somewhat any tools of "drawing" out the layout of a site, thanks!

05-07-2007, 03:04 PM
So is it a bad idea to use <div>'s?
No; divs are perfectly suited for dividing up a document into logical divisions.

The general idea is that you create a document structure, using the most appropriate HTML elements. Secretly, as a designer you do this with one eye on the layout you've drawn earlier, but these shouldn't deviate too much if you did your job as designer properly.

Then, you would create styles to add a presentation layer to your document, including positioning to achieve the desired layout. In case the previously created structure doesn't fully suit your needs, now would be the time to tweak it (as little as possible).

05-07-2007, 03:40 PM
Wow!!! perfect!, really! jeez perfect!!!

Well hey, ok check this out then...this is my current issue right now...I am trying to design my companies web site, and I am using this open source template

and well I am using dreamweaver, and one issue I am having one issue...when I am designing my two columns on the right (I am using the 3 column fixed width non zero web design) are falling down in dreamweaver, yet when I render the page it displays accurately?!?! here are two pics to show you what I mean

I have turned off all visual aides, which fixes the weird grouping of the menu at the top, considering the measurements are in em, "because its the best" and its very confusing...it would help so much if you could explain why dreamweaver is doing this...I cant find any explaination

05-09-2007, 08:08 AM
Provide a live link. I can't account for why Dreamweaver does what it does on your machine. There are all kinds of reasons it might be doing that, but bottom line it: does the final page display correctly or not? That's what really matters right now. Put this on some test site and let us have a look at it in our browsers.