Switching between Style Sheet and Table layout

PhotoWebber uses document properties to determine what type of HTML code to generate for each page. To ensure that the page you build matches your Photoshop layout in your browser, you must select the correct layout option.

If you are certain that your site visitors will be using browser versions 4.0 or higher, you may want to use Style Sheets. If your visitors will be using 3.0 or lower browsers, or if you do not know what browsers your site visitors use, use Tables.

In this tutorial we will build both table and style sheet versions of the same web page.

1. Create a new document.

From the File menu, select New and choose Style Sheet Aligned Web Page.

Import TUTORIAL2.PSD

2. Build the style sheet aligned page.

From the Output menu, select Set Site Folder... and choose a Folder on your hard drive.

Select Output, Build All to output the HTML and graphics.

3. Change to Table Alignment Layout.

In the Properties Window, select the Layout tab.

Note: If the Properties Window is not displaying Document Properties,select index.html in the Layers window.

Click Tables (HTML3).

 

4. Set the table Granularity.

PhotoWebber allows you to control the precision of table slicing.

Click Options.

  • For more precision, enter a lower number. This results in a table with more, smaller cells.
  • For a simpler table, enter a higher number. This results in a table with fewer larger cells. Rollover graphics will have less precise boundaries.

Select Preview Table to see the resulting slices in the Document window.

When you are satisfied with the results, click OK.

5. Build the table aligned page.

Set a new Site Folder. Select a different Site Folder than where you saved the style sheet aligned version.

Build the page and graphics.

To see how style sheet and table layouts differ, open each page in your browser and view the HTML source.

 

Copyright © 2000 - 2001 Media Lab, Inc. All rights reserved.
PhotoWebber is a trademark of Media Lab. Photoshop is a registered trademark and GoLive is a trademark of Adobe Systems Incorporated.
All other trade names are trademarks of their respective owners.