Sign Up Now
Twitter Facebook Flickr Buzz
Social Networks


Forgot Password? Go Join Now
Sign Up for Starter's Pack (Free)
Call (800) 223-8720
Need Web Solutions? Get Free Sample Issue

Library: Creative Design


Take control of complex web page layouts with CSS

Added on Thursday 4th of June 2009 09:23 am EST

Application > Adobe GoLive CS/CS2
Operating Systems > Macintosh, Microsoft Windows

In response to ever changing advancements in web technology, it has been the continuing desire of web designers to create ever more sophisticated web pages. What were once basic heading/text/image page layouts have now evolved into ones that challenge even the most urbane print publications, as shown in Figure A. Ultimately this has required a more powerful means of the page layout command. One that is versatile enough to enable specifications on every visual aspect of page design, yet not so convoluted as to encumber page download times. With the standardization in recent years of Cascading Style Sheets – i.e., CSS – you now can have that kind of control. Let's now create a page example using CSS and highlight how you can use GoLive to make it easy.

Start a new page
The traditional technique for handling page layout has been with tables. While tables have never been the best device to use to locate and organize where a particular piece of content should be located, they have been, for the most part, the only way. Tables are fine as a simple way to display data, but they can become awkward when used to structure text and images. Let's now see how we can avoid tables by using div tags in combination with CSS properties.
1. Launch GoLive, choose File > New. When the New dialog box opens, select Web > Pages > HTML Page, click OK to open a blank untitled HTML page.
2. Choose File > Save, enter CSS Example in the Save text box, click Save, and you're ready to begin. If you're like many designers, chances are the first thing you'll want to do is drag a Table object from the Objects Toolbox. Instead, drag a Layer object from the Toolbox to the page, as shown in Figure B.

In dragging a layer object to your page, you insert a set of div tags into the source code of your page, which you can see when you select the Source tab in your window, as shown in Figure C.

By default, the div box is set with an attribute id value of layer1, as indicated in the Layer section of the Inspector palette, as shown in Figure D. Let's next add several more div boxes which will serve to hold the various content of our page.


Dear Valued Customers,

We regret to announce that ProEdTech LLC and all its affiliate brands will cease operations on April 1, 2019.

We are no longer able to fulfill online orders. We will fullfill all DVD and book orders already placed.

Customers of canceled webinars and subscription products may request a refund at (800) 223-8720 or You must do so by April 1, 2019.

Thank you for your business and loyalty over the years. We sincerely apologize for any inconvenience caused.

Best regards,
The ProEdTech Team