how to design web pages

Setting document properties

Page titles, background images and colors, text and link colors, and margins are basic properties of every HTML document.  The page title identifies and names the document.  A background image or color sets the overall appearance of the document.

Page layout

Even for the visual editing process you will needs to know the method used by the HTML language to place text and image in a page.  Page layout is an important part of Web design.  The term page layout refers to the way your page will look in the browser, such as where a menu or images will go.  Macromedia Dreamweaver gives you several different ways to create and control your Web page layout.

There are tree methods to organize a page

• HTML tables
• Page Layers
• Page Frames

Tables

One common method for creating a page layout is with HTML tables (see Figure 11a to e.).   Tables weren't originally created for Web page layout, but for displaying tabular data.  Creating transparent (Border = 0) tables is an easy method to organize a page’s structure.  Tables are an extremely powerful tool for laying out data and images on an HTML page.  Tables provide Web designers ways to add vertical and horizontal structure to a page.

Tables consist of three basic components:

• Rows (horizontal spacing)
• Columns (vertical spacing)
• Cells (the container created when a row and column intersect)

Use tables to lay out tabular data, to design columns on a page, or to lay out text and graphics on a Web page.  Once you create a table you can easily modify both the appearance and the structure of the table.  You can add content; add, delete, split, and merge rows and columns; modify table, row, or cell properties to add color and alignment; and copy and paste cells.

Layers

The second method is to create Layers. To simplify the process of using tables for page layout, Dreamweaver provides Layout view. In Layout view, you can design your page using tables as the underlying structure, but avoid the traditional pitfalls of using tables. For example, you can easily draw cells (table cells) onto your page, then customize and move the cells where you want them. Your layout can have a fixed width, or it can grow to fill the browser window.

Frames

Frames (see Figure 11f to g.). are used in a Web page to divide it into multiple HTML pages. For example, our entry Web page consists of three frames. One thin frame on the side that contains a scrolling menu, one frame that runs along the top that contains the logo and title of the Web site, and one large frame that takes up the rest of the page and contains the main content. Each of these frames is an independent HTML page. They all work together on the page through the use of one or more framesets, which is an HTML page that defines the structure and properties for the Web page, including information about the number of frames displayed on a page, the size of the frames, the source of the page loaded into a frame, and other definable properties.

Figure 11a. Dreamweaver Editors WYSIWYG window screenshot: creating transparent (Border = 0) tables is an easy method to organize a page’s structure. Transparent tables are visible as small lines on this document.

Figure 11b. Same Dreamweaver Editors WYSIWYG window screenshot as above: transparent tables are visible as small lines on this document. The property inspector popup window is focused on table properties.

Figure 11c. Internet explorer screenshot: a document page.

Figure 11d. Screenshot of the same page as above but as seen in Dreamweaver Editors WYSIWYG window: transparent tables organize the page and are visible as small lines on this document.

Figure 11e. Dreamweaver Editors and HTML window screenshot: same page as above. Transparent tables are visible as small lines on this document. The property inspector popup window is focused on table properties. The HTML code appears over the Editors WYSIWYG window.

Figure 11f. Internet explorer screenshot: an entry page with 3 frames (top, left, right) page.

Figure 11g. Screenshot of the same page as above but as seen in Dreamweaver Editors WYSIWYG window: 3 (top, left, right) frames organize the page. The property inspector popup window is focused on frame properties.