Sign Up Now
Twitter Facebook Flickr Buzz
PhotoshopSociety.org
 
Search:   
 
Social Networks

LOGIN     

Go
Forgot Password? Go Join Now
Sign Up for Starter's Pack (Free)
Call (800) 223-8720
Email custserv@photoshopsociety.org
 
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.