Best way to layout a page?? - Post ID...

User 106872 Photo


Registered User
92 posts

I've used VSD in the limited web work I've done . The method that VSD seems to work best is starting with the background add elements on top to roughly develop a page.
With HTML SE2, using the visual editor is it better to work from top down with the tables like a puzzle or like VSD from background forward.
I just the other way would be to block in major tables and then go back to finish the interior of nesting tables or links
I was looking at several web pages that I copied the source code, saved it then opened in se2 and the ones that I looked at seem to start at the top and work down.
The reason for this question is that in learning the visual editor, at times the moving of a table (it's been unlocked) to a new position seems difficult and the program itself does not tell you what layer is a above or below the other as easy as I might like.
Thanks for any help, I realize this maybe old hat to most here but I'm at the bottom of the climb.
Wyndham
User 3004957 Photo


Registered User
866 posts

Hi Whyndham

Design is very much a subjective topic. People go about it in different ways and so do the editors we use. Visual editors are especially finnicky and different editors use different methods to layout pages as users want them. The issue with this is people often have overlapping images, forcing the editor to use complicated layers and other elements that don't necessarily render well in all modern browsers, meaning your site may look very different depending on what browser people use.

Using tables is OK (in my opinion) for layouts and though very much a no-no to many, will still result in a well rendered site among all major browsers. The problem, as you have discovered, is that moving them once in place is a challenge and one is then forced to use nested tables (tables within tables) and the code starts getting ungainly and too busy, resulting in a 'heavy' page. The best plan is a combination of all elements, though if you are visually editing then this is very difficult to control because the editor will be making those decisions for you. At the end of the day, learning html and CSS is going to be the best way forward; this way you can design to your heart's content knowing your page is well designed and compliant with the latest conventions. Until then, it is very much trial and error and learning what limitations you have to work with and how to make best use of the tools you have. That, I believe, is the fun of it!

Good luck.
User 509544 Photo


Registered User
7 posts

Wyndham,

I've been creating websites for years using nothing but a text editor. Then the trend away from tables and towards CSS block constructs forced me to play with various html and visual editors. I ran into the same basic dilemma you seem to be enjoying. :mad:

I found I had to take some time and really learn how CSS blocks worked especially the Z-index that allows you to layer blocks on top of each other (like post-it notes on a whiteboard).

Make yourself a simple web design using DIV classes (like container, header, footer, note1, note2, photo1, photo2, etc.) and play around with placing and moving these on the page. Set initial background colors,heights and widths, and use border attributes to be able to see them clearly.

I've attached a sample index that I recently started with the CC HTML Editor SE2.

Once you get the hang of moving basic blocks around on the page, I think you'll find the transition from tables less frustrating. ;)
Attachments:
User 38401 Photo


Senior Advisor
10,951 posts

Thanks for the example file Dave, I will play around with it myself some too. I'm doing the CSS Live class on Sitepoint and I think between that and this example and some books I have, I may actually learn something! lol :P
User 106872 Photo


Registered User
92 posts

Thanks, I'll play around with it and see what I can learn. New concepts in an old brain take longer than i want. Thanks again Wyndham
User 106872 Photo


Registered User
92 posts

Dave, I've played a bit with the code you generously posted and I have to say it does help me see where things are coming from.
Am I wrong in thinking that the current version of html2010 se does not allow this type of layout in the visual editor but only n the code window?
I realize that I'm just starting on this "Enjoyable Journey" but it would seem that css containers would be easier to code than tables if the visual editor had this function. Maybe it does and i don't see it
Dream Weaver uses a Java based programming to make movable containers and a whole lot of code to boot. Well I'll dig a bit deeper tonight.
Thanks again for the new direction. Wyndham
User 106872 Photo


Registered User
92 posts

If I create a .banner class in css and define all the pertinent parts then in
the body put this in a div tag, I get what I created, a blue box for a banner.
Now I want to insert an image into that banner, is it better to create a class
.pict1 then place this into the div tag for banner or is it better to just place
the image in the div class "banner" with out creating the .pict1 class.
As I say I'm just learning CSS and would like to know which if either is better
coding. Also since I'm using cc html and checking it with DW MX as cc recommends not swapping back to html-visual editor is this a valid
question on coding in light of current coding methods.
Thanks for any thoughts Wyndham
User 192897 Photo


Registered User
325 posts

Jo Ann wrote:
Thanks for the example file Dave, I will play around with it myself some too. I'm doing the CSS Live class on Sitepoint and I think between that and this example and some books I have, I may actually learn something! lol :P


Jo Ann - how are the classes? Are they worth taking?
There is no distinctly native American criminal class except Congress. MARK TWAIN

www.juliekushner.com
www.beercoastermania.com
www.phi-scsc.com
User 562592 Photo


Registered User
2,038 posts

There are two ways to look at this. If you load your image via CSS, your page will load just a bit faster, and of course you have great control over the image. However, it is difficult to get it all set up to start with. In this case it would be easier just to insert the image into the html then put a class above it and position it with the css that way. Its really about preference.

Also, to get rid of the blue box, use this css:

img{border:none;}
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com

User 38401 Photo


Senior Advisor
10,951 posts

george barone wrote:
Jo Ann wrote:
Thanks for the example file Dave, I will play around with it myself some too. I'm doing the CSS Live class on Sitepoint and I think between that and this example and some books I have, I may actually learn something! lol :P


Jo Ann - how are the classes? Are they worth taking?


I guess it would depend on your level of CSS knowledge. I know enough to be dangerous to my web pages LOL. I know quite a bit about styling, but layout is what I need to learn the most about so I think it's going to help quite a bit for me. He does a pretty good job, and the setup is nice. He sped through the presentations a bit and the videos a bit so there's a few goofy errors here and there, but they are pretty obvious so I haven't gotten confused by them yet lol. All in all I think it's pretty good so far.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.