I am designing (not developing) a databased web application.  There
will be many web pages, each with many fields, links, buttons, etc.  I
would like to know what my options are for specifying the size and
location of the different objects on the web pages.

Since I will not be writing the code, I just need a shorthand method
to specify locations and sizes.  I guess the two methods that I can
imagine are by using tables, or by using absolute positioning.  I am
open to other methods.

For example, I believe that in HTML I can have tables with rows and
columns.  And I can have sub-tables (tables within tables).  And I can
specify that a particular field spans 2 columns.  With that knowledge
I can specify that
a particular label will go in a table, row1 column 1, and that the
field associated with that label will go in row1 column2 through
column3.  How do I specify column widths and row heights?

What are the other ways to place things on a web page?  For example,
is there such a thing as absolute positioning?  Can I say that a data
entry field should appear x inches (or x pixels) down the page, and
that it is 2" wide?

---

Request for Question Clarification by theta-ga on 21 Sep 2006 21:50 PDT

Hi pablos-ga,
    We would be able to help you better if you could provide us with
more details on how you plan to use this shorthand notation. For eg.,
will it be used just as a reference by the actual page developers when
they code the page, or is it your intention to actually lay out the
page contents using this shorthand notation?
    The recommended way of laying out items on a webpage is to use CSS
(Cascading Style Sheets). These allow you to place content on the page
in a number of ways including using absolute as well as relative
positioning.
    For a quick intro to the layout options available with CSS, take a look at:
        - Learn CSS Positioning in Ten Steps
          [http://www.barelyfitz.com/screencast/html-training/css/positioning/]

    To understand the power of CSS, take a look at the CSS Zen Garden
[http://www.csszengarden.com/]
     
    Please indicate this is the information you are looking for, and
whether you want more details. IF so, then I will post a detailed
answer as per your needs.

Thanks,
Theta-ga
:)

---

Clarification of Question by pablos-ga on 22 Sep 2006 16:48 PDT

Thanks,
I think you pointed me to the answers. And your links pointed me to
another good article:
http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute.
I also looked at Wikipedia for a quick overview of CSS.

It looks like I can specify relative or absolute positions, and I can
use px, in, %, em, etc. (I realize that using pixels or inches can be
hazardous).

But that is more complicated than I want to get. My goal is to specify
the locations and sizes as quickly as possible, as long as my
specification is usable by the programmers.  So I am thinking that if
I say Label X is in row1, column1 and it is 2 columns wide, they can
work with that. (To oversimplify, I plan to give them a table listing
the fields and their rows, columns, widths [# of cols], heights [# of
rows].)

Does that seem like a reasonable approach that a web developer can
work with? (only in terms of the locations and sizes)

Feel free to mark this one as answered.

Hi pablos-ga,
  As per your comments above, I am going ahead and posting this as the answer.
" 
  The recommended way of laying out items on a webpage is to use CSS
(Cascading Style Sheets). These allow you to place content on the page
in a number of ways including using absolute as well as relative
positioning.
    For a quick intro to the layout options available with CSS, take a look at:
        - Learn CSS Positioning in Ten Steps
          [http://www.barelyfitz.com/screencast/html-training/css/positioning/]

    To understand the power of CSS, take a look at the CSS Zen Garden
[http://www.csszengarden.com/]
     
"

Since all you are looking for is a simple way to specify layout
informations for items on a page, you can explore the various
techniques people use to create webpage mockups:
   - A couple of the projects that I worked on have used Powerpoint to
create page layout mockups. Essentially one slide represents a
webpage, and the different elemnts on a page are represented by
rectangular boxes. This is a simple way to indicate the layout you
have in mind to the page developers.
   - Another popular method is to use paint programs, such as MS
Paint, Photoshop or Paint Shop Pro to draw out how you expect the page
to look. The benefit of this is that since you are working in the
paint program, you can make the layout diagram as detailed as you
want. They apps will also allow you pixel level positioning control,
as well as allow to to easily move the elements around.
   - There are a number of other webpage mockup creators available on
the web, that you can try out. I have listed a couple below:
           - http://web.forret.com/tools/designer.asp
             This is an online WYSIWYG webpage layout specification tool.
           - http://www.revenuejournal.com/blog/_archives/2005/8/20/1154982.html
             A review of Web Builder, which is a WYSIWYG web page
mockup creation tool.

You can take a look at the above suggestions and see if any of them
simplify your task. If you need further information or any
clarification, just ask!

Hope this helps.

Regards,
Theta-ga
:)

"I am designing (not developing) a databased web application.  There
will be many web pages, each with many fields, links, buttons, etc.  I
would like to know what my options are for specifying the size and
location of the different objects on the web pages."

You are not actually making the dynamic pages yourself? But want to
specify static templates to give the positioning and layout of the
pages? This could be done with simple html, using tables, other
elements, and css.

"Since I will not be writing the code, I just need a shorthand method
to specify locations and sizes.  I guess the two methods that I can
imagine are by using tables, or by using absolute positioning.  I am
open to other methods."

A good web applications developer should be able to handle the
database side and the interface side. You could simply give them a
drawing of what you what it to look like. Or static html page. No need
to get overcomplicated if you are not familiar with advanced methods
of styling. The developer is the one that should be able to implement
the correct methods. It is really important that you discuss it well
with him or her because one thing they should know about is web
interface. You may have a good idea about how you want it to be
visually communicated but not necessarily if it possible/viable. Then
they can draw up a schematic that make sense to the both of you.

Personally I would be fine if somebody gave me some static HTML
templates for the interface. Though this would be a least the 3rd
stage approx. I would want to know a bit about what they are hoping to
achieve first. This is merely to make sure that things don't get done
if they are not strictly necessary or if you need additional pages and
templates.

Though it is good to be prepared too. There a plenty web design
packages that would be fine for drawing up static HTML templates,
without much knowledge necessary. Let the developer clean it up and
make sure it works cross-browser.

"For example, I believe that in HTML I can have tables with rows and
columns.  And I can have sub-tables (tables within tables).  And I can
specify that a particular field spans 2 columns.  With that knowledge
I can specify that
a particular label will go in a table, row1 column 1, and that the
field associated with that label will go in row1 column2 through
column3.  How do I specify column widths and row heights?"

You can put tables within tables but I wouldn't generally recommend
it. However if you a familiar with tables you have colspan and rowspan
to get cells spanning columns and rows. The most full proof way of
doing is to split your template into manageable blocks of tables
display one after each other e.g.

<html>
<body>

<table border="1" width="100%">
  <tr>
    <td><h1>Heading</h1></td>
  </tr>
</table>

<table border="1" width="100%">
  <tr>
    <td width='10%'></td>
    <td width='90%'><h2>Sub-heading</h2></td>
  </tr>
  <tr>
    <td colspan='2' height='10'></td>
  </tr>
</table>

<!-- 

This table I want to repeat dynamically 

From data pulled from the database based on search results

-->

<table border="1" width="100%">
  <tr>
    <td width="75%" rowspan="4">Main Area</td>
    <td width="25%">Param1</td>
  </tr>
  <tr>
    <td width="25%">Param2</td>
  </tr>
  <tr>
    <td width="25%">Param3</td>
  </tr>
  <tr>
    <td width="25%">Param4</td>
  </tr>
</table>

<!-- 

End repeat 

!-->

<table border="1" width="100%">
  <tr>
    <td>Footer</td>
  </tr>
</table>
</body>
</html>

It may seem odd, but it is accurate and easy to read. 

Tables themselves are being used less and less nowadays because of
more efficient methods of positioning of inline/block elements.
However for a template tables are fine.

"What are the other ways to place things on a web page?  For example,
is there such a thing as absolute positioning?  Can I say that a data
entry field should appear x inches (or x pixels) down the page, and
that it is 2" wide?"

Yes you can do that. But it shouldn't be used unless it is necessary
to do so. You can usually achieve the positioning you want with block
and inline elements.

Hope that helps,

Paul