But this is what happens when I try to place my textual content next to the
button. It's fine until the sentence starts to wrap. So if I had a series of
buttons, this is what my page would look like. Because HTML is not a language that is well-suited for layout, you have to use some tricks to be able to place your content where you want it. The basic design trick to accomplish this is using tables with a '0' border or invisible border.
I'll demonstrate how this works by placing content on this page without using a table:
I want to put buttons on my pages, so I have inserted a button image here.
But this is what happens when I try to place my textual content next to the
button. It's fine until the sentence starts to wrap. So if I had a series of
buttons, this is what my page would look like.
I don't like this at all, so I need to use a table for layout.
First, I'll show you the table with visible borders, but when you use a table for layout, be sure to set the border tag to '0' so that it is invisible when viewed in a browser.
|
Now I can place text right next to the button and when it comes time for the sentence to wrap, it will do so without wrapping back under the button. |
|
I can continue to place text next to the buttons without worry. Except that if I have a paragraph of information it will make my button separate. This is because the row or column height will always adjust to the largest amount of text or the largest graphic in a given cell. So I have to merge a couple of the cells so that I can keep my buttons together no matter how much text is on the page. |
I merged the left two cells to make one cell and kept the right two cells as is.
|
Now I can place text right next to the button and when it comes time for the sentence to wrap, it will do so without wrapping back under the button. |
I can continue to place text next to the buttons without worry. Except that if I have a paragraph of information it will make my button separate. This is because the row or column height will always adjust to the largest amount of text or the largest graphic in a given cell. So I have to merge a couple of the cells so that I can keep my buttons together no matter how much text is on the page. I also aligned the graphics at the top of the cell. |
Now here's what this looks like with the table border attribute set to '0' making it invisible.
|
Now I can place text right next to the button and when it comes time for the sentence to wrap, it will do so without wrapping back under the button. |
I can continue to place text next to the buttons without worry. Except that if I have a paragraph of information it will make my button separate. This is because the row or column height will always adjust to the largest amount of text or the largest graphic in a given cell. So I have to merge a couple of the cells so that I can keep my buttons together no matter how much text is on the page. I also aligned the graphics at the top of the cell. |
You can also use tables to place graphics, use color to set off information, and a number of other tricks. You'll just need to play with it to see what you can accomplish using tables.
For example:
| This is a 2x2 table with a border.
In the next cell I've inserted a clip art image. If you would like to copy this image. Place your cursor over the image, right click (on the Mac, hold down the button) with your mouse and select Save Image As and save it into your web site folder. You can rename it if you want to. It is an animated gif and when you save it this way, you save all the images and animation to make it work on your site. See isn't that easy! |
 |
 |
This is a photo I took of the Edinburgh Castle in Edinburgh, Scotland the summer of 2003. It was taken from the top of the Walter Scott Memorial Tower. Edinburg was my favorite travel destination in the U.K. |
Now without borders and using the color tag for a single cell to highlight the text.
| This is a 2x2 table with
a border. In the next cell I've inserted a clip art image. If you would like to copy this image. Place your cursor over the image, right click (on the Mac, hold down the button) with your mouse and select Save Image As and save it into your web site folder. You can rename it if you want to. It is an animated gif and when you save it this way, you save all the images and animation to make it work on your site. See isn't that easy! |
|
|
This is a photo I took of the Edinburgh Castle in Edinburgh, Scotland the summer of 2003. It was taken from the top of the Walter Scott Memorial Tower. Edinburg was my favorite travel destination in the U.K. |
The HTML code for tables is pretty overwhelming, so use a WYSIWYG editor to create pages with tables for layout.
This page was created using Dreamweaver, as part of Studio MX. Dreamweaver is my choice of software for web development.
For
the students in the 6 week Web Design course, don't download the trial until
the 3rd week of class, or you will run out of time before the class is finished!
Create one page and reuse it for all of your pages:
Create a page with the table and the buttons you want to use. Save it as template.htm. Then use the same page for each of your files by opening the template.htm file and using SaveAs to create your other pages. For example, open your tutorial.htm page and save it as index.htm AFTER you have cut and pasted all of the html from Week 2 into the cells of your table. Remember that your very first page MUST be named index.htm.
By using the template page to create all of your other pages, you will have a minimum of editing to do because your buttons and layout will already be in place. This also helps with consistency from page to page.
: Home
: Syllabus : Learning
Teams : M1 : M2 : M3
: M4 : M5 : M6
: Calendar :
: Individual Projects
: Team Projects : Resources
: University of Phoenix
: Connected Creativity
:
©2004-5 Eli Collins-Brown
Problems? Contact
Me