Advanced Web Design Tutorial

Home

Schedule

Classmates

Online Help

Classes this Semester List

Day 1, Sept 22: Advanced Tables

Tables are the first tool available to web designers for formatting and controlling the layout of their page contents. This first session will focus on a detailed look at how to use tables to make layouts that really work well.

  • Table tag <TABLE>
  • Row tag <TR>
  • Data tag <TD>
  • Header tag <TH>
  • Colors, borders
  • Width, Height
  • Align attribute

Implementation

  • By hand
  • Using Dreamweaver's table-tool

Things to think about

  • Browsers display differently
  • Height tag not always supported
  • Today will cover

    • Turning off code helper in Dreamweaver
    • Making tables, with all the nifty table attributes: by hand and with DW
    • Design with tables
    • Contrast and Alignment with tables (see Williams, Chapters 2,3)

    Day 2, Sept 23: Super HTML (SHTML)

    The current UNIX system (and the soon-to-be introduced "Samba" system) allows us to use a nifty form called .shtml, or server-side includes. In short, .shtml allows users to "swap in" other pages and data before the page is sent to the viewer's browser. It can be a great way to make templates and other nifty substitutions. So, we'll cover:

    "Super" HTML: What the heck is it? How does it work?

    Format

    • Format for the codes
    • Primary code methods: #set, #echo, #include
    • How can you use it?

    Implementation

    • By hand - UNIX Server only
    • Using ASWE, Hand-hold mode off
    • Dreamweaver - turn off all the code-munging junk

    Uses for SHTML

    • Standard headers and footers
    • Bring together diverse bodies of text

    Day 3, Sept 24: Cascading Style Sheets (CSS)

    Style-sheets are the designer's most versatile (and yet hard-to-use) tool. Style-sheets give designers a lot of control over their pages. External style sheets have the added advantage of making site maintenence pretty easy to do.

    What are they?
    see NWE help

    • The Style tag
    • The Style attribute
    • The External reference

    Setting up a stylesheet with dreamweaver

    • Applying individual styles
    • Creating an external style sheet

    Cool tricks

    • Background image
    • Indent/margin
    examples

    Day 4, Sept 25: Dreamweaver Templates

    One of Dreamweaver's most handy design tools are its templates, which allow you to change pretty complex web pages with ease. These can be convenient, but they can also be a pain. If at all possible, it's generally a much better idea to use SHTML than to rely on Dreamweaver templates because: Dreamweaver is very picky about them: you can't move the template files or the files based on them, or Dreamweaver won't guarantee that they'll work (and they often don't if you move any files or folders around. But, Dreamweaver templates do allow you to highly structure your documents with ease and the templates don't require anything installed on the servers, so you can control the templates. (This is opposed to SHTML, which requires Apache and the SHTML stuff installed on the servers - while the Apache stuff is awesome, you may not always be on servers that have it).

    Day 5, Sept 26: Simlinks and Optional Play

    This is an optional day

    Using the NWE documentation on symlinks, we'll make a couple of them and we'll continue to work with the other material.

    Why use Symlinks?

    • Easy record of old pages without having to update a new page constantly.
    • Not having overly redundant files.
    • Not having the confusion of swapping files that you often update.

    Home || Schedule || Classmates || Online Help || NWE || IMAGE Lab || Classes this Semester List