The layout of a web page is controlled by either Tables or Cascading Style Sheets (CSS). If you don't know what CSS is (most people don't, and you don't need to), then use tables to control the layout and arrangement of text and images on your web pages.
Tables are defined by columns and rows like what you see in an excel spreadsheet. The "borders" of a table may be set to invisible, so it may not be readily apparent that a web page is using tables - but it is highly likely that they are.
Before we begin:
Think about whether or not you even want to know this. If you just need to update your web site with news and announcements, post or update an image in a designated "place", or use a pre-defined page - you can probably shortcut this lesson to simply inserting rows and merging cells. If this describes you, grab a page layout from the Pick & Click Editor, or hire an Authorized Service Provider to make you a custom template - and then use that as a starting point and have your ASP tailor it for you when needed.
Site Width Basics:
You or your web developer made some decisions about your web site width in the very beginning. You are going to need to know just a few things about your site width before you can go merging cells and making wider columns.
First, Check your default web site width under Basic Settings | Web Site Basics | Option # 2 - Site Layout
Your Site Width is defined in pixels, where 120 pixels = approximately 1 inch. We say approximately since each computer monitor has a different resolution (pixels per inch or DPI for dots per inch).
The most common widths are 770, 890, and 1010. 770 is kind of narrow by modern standards, and 1010 or wider is a little cutting edge (fall 2009). The only thing that really matters is that you do not want your site to be so wide that it introduces a horizontal scroll bar (left to right) in your visitors browser. Most users will scroll down for you, but few will see the horizontal scroll bar and know to move right or left.
The second thing you need to know is whether your menus are presented horizontally or vertically (running down the left hand column of the page). See Basic Settings | Web Site Basics | Option # 2 - Site Layout and look at the bottom of the page for this:
If your menus run horizontally (across the page from left to right), they do not take up any site width. If your menus are running vertically down the side of your page, then they take up 120 pixels of width.
So if your site is 890 pixels wide, and the 1st "column" is reserved for your menus running down the side of the page, then you have 770 pixels left to work with. If your site width is 770, then you have 650 pixels of "usable" space that you can maintain... and so forth.
Finally, when you edit a web page using the TCOEditor, you want to make sure that the "page" is not wider than the "usable" area calculated above. Most pages will use columns to separate text so that it is more readable. Imagine if a newspaper spread the text from left to right for the entire width of the page? That would be very hard to read.
The same principle applies to your web site. Whether you use two text columns, or three, or mix it up with images and text, your pages are most likely laid out using a table where the table width is the maximum usable width, and the sum of the width of the columns does not exceed the usable width... or you will "push" the page wider, making the site look odd - or leaving a bunch of blank space in your header, and or forcing a horizontal scroll bar for your visitors.
Good:
Bad:
Now let insert a wide graphic somewhere
You see that the width of the graphic "pushed" the width of the column - making the whole page too wide.
Now let's fix it....
This web site author should have chosen an insertion point that was wide enough not to expand the entire column. To fix this, we are going to
A) insert a new row and then
B) merge the cells together to create a cell that spans two columns, giving us the required width sot hat we do not stretch the other columns:
We are going to insert a new row in the table, and then merge the cell(s) to create a wider space for the wider graphic.
Insert a row: Choose the insertion point, right mouse click and choose "Insert Row Above"
This is going to give us a new row, so we can merge the cells in column one with column 2:
Now we have a new wider row, and we can insert a wider image... and it looks great!
Pop Quiz..... How do you think we made the row with 3 columns (Adult Clinics, Junior Programs, and the IBM Grand Slam Widget)?
Hint: Right mouse click, insert new row. Then Split Cells and set each cell width ;-)
Setting cell width:
When you set the width of a cell, the ciolumn that it is in will be set the the width of the widest cell....
Bonus:
Pick & Click Editor. To use this free page template simply pick it from the Pick & Click Editor.
- Go to the Web Site Builder and add a new page
- Name your page for Navigation and give the page a page title
- Click in the editable page content area (erase existing content)
- Click the
Pick & Click Editor icon, Choose TennisConnect (brand), Choose 770 Fleet_Feet!
1 inch = approximately 120 pixels
Simple Changes
Article ID: 70, Created On: 12/26/2009, Modified: 12/26/2009