I come from a strictly java/C++ background. With that said I've been asked to write a web application for my team at work. The thing I don't understand is how web pages are laid out and/or how to lay them out or structure them. From a java point of view I'm used to using GridBagLayout to put panels exactly where I want them and size them exactly how I need.... how is this done in html? I'm just looking for a basic over-view on how to do this ... any help would be great. Thanks.
("Anger is not an emotion, its a symptom of fear.")
unfortunately (or luckily ) I'm more a developer, too. But from my experience and most things I heard and read the last couple of years you shouldn't use HTML at all to define the (visual) layout of a web page. HTML should only be concerned about the structure, i.e. the content of a page and CSS should be an appropriate tool do define the visual layout as seen by end users. But in my opinion there's a big difference between just creating some web pages and creating web pages which look beautiful. Web design is some kind of art like many other things and if you are technical oriented like me, you won't be talented enough to create web pages which look good But the basic idea with the seperation of content (HTML) and style (CSS) is still valid!
Joined: Feb 14, 2006
I hear ya ... I was not looking for anything too flashy seeing as how this app is for in-house use only. If css is the way to go however than css it is .... so on that note ... any css advice/how-to's pertaining to laying out a web page?
Chris Dancy wrote:From a java point of view I'm used to using GridBagLayout to put panels exactly where I want them and size them exactly how I need.... how is this done in html?
Well, unfortunately, there's a lot of web pages laid out using that principle. And when you want to resize your browser so you can see something else at the same time, or print the pages, then the nice layout that the designer produced is just a pain. So the first step is to let go of the idea that you have to position everything just so.
For example: suppose you want to display a table of data. HTML has a collection of tags (which I'm sure you are familiar with by now) which let you display tables. Now, you can plan ahead and say "Okay, this column has to be 90 pixels wide and this column has to be 470 pixels wide", and the browser will obey you. Or you can just skip that and let the browser choose the column widths based on the actual data in the columns. In my opinion the latter is the better approach, because no matter what font the user chooses -- yes the user can choose the font and the size of the font too -- it will still result in a decent layout.
There's more to it than that, of course, and you should really learn how to control layout with CSS, but to start with just write the simplest possible HTML which will work.
It's also possible that as a programmer you may never be a good web-site designer (I speak from personal experience here) but you can still steal, um, borrow other people's ideas. If you see a site whose layout you like, display the source. Download the CSS and check it out.
Paul is absolutely right! I'm currently working with a web application which makes use (or better say misuse) of the HTML table features to define the layout of web pages. This was a common practice some years ago and it may look like a quick solution at first but in the long run it only makes you trouble. Just use HTML to give the page content a structure like you would do in a simple text document (declare headings, paragraphs, images etc.) and then use CSS to tune the visual representation.
As you're familiar with Java's layout managers for Swing application I should note that there are concepts behind the layout manager which make very much sense for web applications, too. As you may know you often don't tell the layout manager about exact pixel sizes or position but instead you roughly tell it what components to layout and the manager figures out the exact positions and sizes at runtime depending on the current context which may change if the user resizes windows or changes fonts for example. You simple shouldn't make too much assumptions about details if don't have to. That saves you a lot of time and helps the application to look reasonably good for all users even though the layout may not be as accurately as it could be. For web applications this point is even more important as you have lots of different platforms and browsers (with lots of different bugs ) at runtime which should display your web pages "good enough". If you make too much optimizations for one specific browser you're almost guaranteed to get into trouble with other browsers etc.
Joined: Feb 14, 2006
Yes I've read that using tables to layout your page is not a great idea. I will look into structuring the page using css. I was under the assumption that css was mainly to define text,color,width,height and that sort of thing ... but if you can position things on a page using css, than all the better. Thanks for the help guys and pointing me in the right direction.
If the pages follow a canonical layout, simply top to bottom, left to right, you may not need much in the way of CSS at all. Just define the HTML elements in the order you want them rendered. Tweaking that is when CSS comes into play.
Paul's advice is spot-on -- let go of the Swing concepts of deterministic layout and just become zen with the browser.
Maybe you're interested to see the power of CSS (although I myself am far from being a CSS expert). Have a look at CSS Zen Garden At the right side you can choose different styles which all use exactly the same HTML content only with different CSS style sheets. You will clearly see that you can not only influence fonts, colors or something like this but you can also position elements of the page completely different.
If you need to do more research: I read Head First HTML + CSS some time ago and it explains the basics of good web pages with the separation of HTML and CSS very well!