» Windows/Panels

» Wireframes

» Designing a Mock-up

» Slicing Images

» Building the Page

Main Introduction

In this tutorial, we will build a basic webpage using HTML tables. Tables in HTML were once only used to display tabular data, but have since become the dominant means of designing web sites. In recent years though, many developers have moved over to tableless web design. Instead of HTML tables, Cascading Style Sheets (CSS) are used to arrange elements and text on a web page.

CSS was introduced by the World Wide Web Consortium (W3C) in an effort to make HTML code semantic, where content and structure are seperate from visual presentation. CSS offers some advantages over table-based layout, such as improved accessibility (easier for screen readers, braille devices, mobile phones, etc. to understand), faster load times (as a result of less cluttered code) and easier maintainability (since all layout information is centralized, site wide revisions and/or changes can be made without opening every individual page).

The biggest problem with tableless design, however, is browser support. Some CSS attributes don’t render correctly on all browsers if at all, and CSS has a much steeper learning curve than table based design. For the purposes of this tutorial, we will be focusing on building basic webpages using table-based layout.

Workspace Introduction

If this is the first time Dreamweaver is launched, a dialog box should appear that lets you choose a workspace layout (Windows only). For most users, beginners especially, Designer workspace is recommended. Coder workspace is primarily for hand-coders, with a layout similar to Macromedia HomeSite and Macromedia ColdFusion Studio. You can always switch to a different workspace using the Preferences dialog box later.

Next Page »  

© Copyright 2008. All Rights Reserved.