<<< >>>
1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16

6. Tables, Links, & Sites

Having learned how to layout pages using CSS, you may wonder why we're now learning how to do it the old way using XHTML tables. Though CSS is making tremendous in-roads in page design, invisible tables are still used extensively by site designers to control page layout and present tabular data. So it's still important to learn tables.

For this week's classes, you were supposed to find two sites with invisible tables whose layout and design you thought were appealing. If you have done so, call up these site on Internet Explorer, and we'll begin walking through several examples to see how they've used tables. After that, you'll try your hand at laying out a Web page using the tables feature of Dreamweaver.

Table code reconstruction

  1. Open Internet Explorer and type in the URL of the site you have chosen.
  2. Open up the Source code window to view the underlying HTML code.
  3. Select the entire contents of the Source code window and copy it into the clipboard
  4. Open up a new page within Dreamweaver.
  5. With the page in Source mode, paste the source code from your web page into the new Dreamweaver page.
  6. Strip away all code that is outside the opening and closing <table> tags of the site. If there is more than one set of <table> tags, leave them all.
  7. Remove all contents between all <td> tags within the table.
  8. Change the table border value from 0 to 5.
  9. View the resulting file within Internet Explorer to see the basic layout of the page. The graphics and text will be absent, but you will get a sense of the page's foundational layout using this technique.

Making tables in Dreamweaver

  1. To create a table within Dreamwever, first open a new blank XHTML page
  2. Open the Insert Window under "Windows => Insert" and click the tables icon under the "Common" tab to the page in Design mode (see image below).

    table insert graphic
  3. A tables dialog box will appear, allowing you to choose the variables for table you wish to include on your page.

    Table dialogue box graphic.
  4. Change the table to a 2 x 2 table and the overall width to 700 pixels. Change the Cell Pad to 10, then click OK.
  5. Right-click anywhere within the upper left-hand cell and select "Table => Increase Column Span" from the contextual menu to create a header that spans both columns of the page layout.
  6. Click-hold the divider between the two cells of the second row and drag it to the left until the left cell is only 150 pixels wide. The right-hand cell should exand to fill the void, though there seems to be a bug in Dreamweaver that doesn't make to the two cells add up to 700. The two cells of the second row will expand vertically to accommodate all text or images placed within them.
  7. View the resulting table within a browser and then return to Dreamweaver to change the 1 pixel border to 0 in order to make the table layout invisible. While constructing a template, however, it's a good idea to leave the border at 1 or slightly higher in order to see the grids laid out on the page.

The layout table procedure above is pretty basic, but there are any number of combinations of row and column spans that one can experiment with in designing a page template. The best thing to do is look around the web for examples of interesting page layouts and then try to figure how the designers have achieved their results.

Links

Though links were covered in the Castrol XHTML book earlier in the semester, now is a good time to refresh our undestanding of how to place links within the page body and how to use them for overall site navigation. To place a link within a page, follow these directions:

  1. Use your cursor to select the text on your page that you wish to act as the clickable link to another page.
  2. Open the Insert Window under "Windows => Insert" and click the hyperlink icon under the "Common" tab to the page in Design mode (see image below).

    Hyperlink Insertion Graphic
  3. A hyperlinks dialog box will appear, allowing you to choose the variables for the link.

    Hyperlink Dialog Box
  4. If you wish to change the label for the hyperlink, type a new phrase in the "Text" slot.
  5. To connect the hyperlink to its target file, make sure you save the file you are linking from, then click on on the folder to the right of the "Link" slot. You can then navigate to and select the target file. Other variables include:
    • Target - opens a new window with various target names, such as "_blank" and "_parent". Very useful if using frame pages.
    • Title - recommended for greater open accessibility, though not all browsers support this feature.
    • Access key - allows you to assign keyboard shortcuts for use with certain browsers.
    • Tab index - allows you assign an order in which users can tab through a variety of hyperlinks on a given page

Site templates

During the first few weeks of class, you learned how to start a new site in Dreamweaver and how to link an external CSS page to pages of the site. In this lesson, you'll learn how to create a page template so that all new pages of the site, as well as future changes to menus and constant page features, can be updated through changes to a single control file.

Creating the template file

  1. From the Dreamweaver menu, choose "File => New" to open the New Document dialog box.
  2. Select the following options (from left to right) in the three-column dialog box
    • 1st column: "Blank Template"
    • 2nd column: "HTML Template"
    • 3rd column: "2 column fixed, left sidebar" (or another option, if you want)
  3. In the 4th column, under "Doctype," choose "XHTML 1.0, Transitional."
  4. Under "Layout CSS," choose "Create New File."
  5. Click the "Create" button to create the file.



Establishing editable regions

  1. With the template file open, select all of the text—both headers and paragraph text—in the right column of the two-column layout.
  2. In the menu bar, choose "Insert => Insert Template Object => Editable Region."
  3. You will be prompted in a dialog box to give the editable region a name. In this example, I have called it simply "Main" which shows up on the blue-green tab above the editable region.
  4. Repeat the process for the Sidebar 1 Content; in this example, I have named the editable region "Navbar."
  5. When you are finished defining editable regions, choose "File => Save as Template," but make sure you choose the correct Dreamweaver site before saving the final file.



Combining CSS files

If you began your site, you probably created previous external CSS file that you should merge with the new template's CSS file so you don't duplicate elements across both files.

  1. Open your existing CSS file and select the Code mode to view the underlying CSS code.
  2. Open the external CSS file created when you start the new template file. In the example below, the file is call "twoColFixLt.css," named by the Dreamweaver program when the template was created.
  3. Select all of the code within the new CSS and copy it to the clipboard.
  4. Return to the initial CSS file and paste the code at the bottom of the file, then save the file back to its original position.
  5. Open the new HTML template file, enter Code mode, and change the name of the external CSS file to that of the original file. In this case, the line of code:

    <link href="../twoColFixLt.css" rel="stylesheet" type="text/css" />

    would be changed to:

    <link href="../basic.css" rel="stylesheet" type="text/css" />
  6. Save the template file back to preserver changes. You are now ready to create new XHTML files from your new template using your original CSS file for the site.



Using the template to create a new XHTML file

  1. In the main menu, select "File => New" to access the New Document dialog box.
  2. Select the following options (from left to right) in the three-column dialog box
    • 1st column: "Page from Template"
    • 2nd column: the name of the site you are working in.
    • 3rd column, the name of the template within that site.
  3. The 4th column will display a visual representation of the template page.
  4. Be sure to click the "Update page when template changes" checkbox if you want future changes to the template to be reflected in the page you are creating. This would affect only peripheral regions of the template, not the editable regions "Main" and "Navbar" created in our example above.
  5. Click the "Create" button to create the new XHTML file. You are now free to change the text in any of the editable regions as well as the page title that shows up at the top of the browser window.
  6. When you are finished making changes to the editable regions, go to "File => Save As" to save the file to the site file folder.