Web Site Design

Topic-Level Outline

Days: 3

Prerequisites: HTML 4: Basic

Unit 1 : Variables in the Web Design

Topic A: 0 Introducing HTML, and the Future of Markup

A-1: Introducing HTML

A-2: Introducing HTML as a Markup language

A-3: HTML and the World Wide Web Consortium

A-4: Separating style from structure

Topic B: 0 Introducing XML

B-1: Introducing XML as on open standard for structuring data

B-2: Introducing XHTML as the future of HTML

Topic C: 0 Understanding how browsers affect your work

C-1: Understanding different types of coding

C-2: Solving browser related problems

C-3: Discussing the use of HTML text editor

C-4: Coding for Multiple screen resolutions

C-5: Understanding bandwidth concerns

Unit 2 : Web site design principles

Topic A: 0 Designing for the medium

A-1: Crafting the look and feel of the site

A-2: Making your design portable

A-3: Designing for low bandwidth

A-4: Planning for clear presentation and easy access to information

Topic B: 0 Designing the whole site

B-1: Creating smooth transitions

B-2: Using a grid to provide visual structure

B-3: Using active white space effectively

Topic C: 0 Designing for the user

C-1: Designing for interaction

C-2: Designing for location

C-3: Guiding the user’s eyes

C-4: Keeping a flat hierarchy

C-5: Using the power of hypertext

C-6: Deciding the size of the content

Topic D: 0 Designing for the screen

D-1: Distinguishing between a screen and a page

Unit 3 : Planning the site

Topic A: 0 Getting started

A-1: Creating a site specification

A-2: Identifying the content goal

A-3: Analyzing the audience

A-4: Building a Web site development team

Topic B: 0 File names and URLs

B-1: Naming files

B-2: Using URLs

Topic C: 0 Understanding directory structure

C-1: Differentiating relative and absolute paths

C-2: Building a relative file structure

Topic D: 0 Preparing a diagram for the site

D-1: Creating the information structure

Unit 4 : Planning site navigation

Topic A: 0 Creating usable navigation

A-1: Locating the user

A-2: Limiting information overload

Topic B: 0 Using text-based navigation

B-1: Linking with text based navigation

B-2: Linking to individual files

B-3: Linking to document fragments

B-4: Linking to external document fragments

B-5: Adding contextual linking

Topic C: 0 Using graphics based navigation

C-1: Using text images for navigation

C-2: Using icons for navigation

C-3: Using the ALT attribute

Unit 5 : Creating page templates

Topic A: 0 Understanding table basics

A-1: Using table elements

A-2: Defining table attributes

A-3: Spanning columns and rows

A-4: Choosing relative or fixed table

A-5: Determining the correct width of the table

A-6: Removing default table spacing

Topic B: 0 Table pointers

B-1: Writing easy-to-read table code

B-2: Removing extra spaces

B-3: Centering tables

B-4: Stacking tables

B-5: Nesting tables

Topic C: 0 Creating a page template

C-1: Building the basic table structure

C-2: Setting a fixed width

C-3: Creating the page banner cell

C-4: Creating the feature cell

C-5: Setting the column widths

C-6: Vertically aligning cells

C-7: Testing the template

Topic D: 0 Understanding types of templates

D-1: Observing two-column templates

D-2: Observing two-column with banner templates

D-3: Observing three-column templates

D-4: Observing three-column with banner templates

D-5: Observing three-column main templates

D-6: Observing three-column sectioned templates

D-7: Observing three-column main sectioned templates

Unit 6 : Web typography

Topic A: 0 Understanding type design principles

A-1: Using fonts effectively

A-2: Designing for legibility

A-3: Avoiding the use of text as graphics

Topic B: 0 Controlling typography with the <FONT> element

B-1: Setting font size

B-2: Specifying font alternates

B-3: Setting font alternates

B-4: Setting font color

B-5: Using the <FONT> element

Unit 7 : Controlling typography with cascading style sheets

Topic A: 0 Introducing CSS

A-1: Understanding the CSS basics

A-2: Linking to an external style sheet

Topic B: 0 Understanding CSS selection techniques

B-1: Selecting multiple elements

B-2: Selecting by context

B-3: Selecting with the CLASS attribute

B-4: Working with the <DIV> element

B-5: Working with the <SPAN> element

Topic C: 0 Understanding CSS font properties

C-1: Selecting a specific font family and alternates

C-2: Specifying font size

C-3: Specifying font weight

C-4: Specifying the line height

C-5: Specifying letter spacing

C-6: Specifying text indents

C-7: Specifying color

C-8: Specifying text background color

Topic D: 0 Specifying block-level space values

D-1: Specifying text padding

D-2: Specifying text margins

D-3: Specifying text borders

D-4: Coding easy-to-read rules

Topic E: 0 Styling with CSS

E-1: Setting up document divisions

E-2: Styling the standard paragraph

E-3: Styling the chapter number

E-4: Styling the chapter title

E-5: Styling the credit and book title

Unit 8 : Graphics and color

Topic A: 0 Understanding the format basics

A-1: Discussing the image file formats

A-2: Using interlacing and progressive display

A-3: Analyzing places where you can find images

A-4: Choosing the right format

Topic B: 0 Understanding computer color basics

B-1: Choosing the right color depth

B-2: Discussing dithering

B-3: Using non-dithering colors

B-4: Choosing a graphics tool

Topic C: 0 Using the <IMG> element

C-1: Replacing <IMG>attributes with style sheets

C-2: Specifying image width and height

Unit 9 : Using graphics effectively

Topic A: 0 Managing graphics

A-1: Sizing graphics for the page

A-2: Removing the hypertext border from an image

A-3: Aligning text and images

A-4: Adding white spaces around images

Topic B: 0 Using advanced graphics tools

B-1: Using transparent spacer gifs

B-2: Using single pixel rules

B-3: Using background images

Topic C: 0 Working with hexadecimal colors

C-1: Defining universal color names

C-2: Setting background page color

C-3: Using background color in tables

C-4: Changing link colors

Unit 10 : Using HTML frames

Topic A: 0 Understanding frames

A-1: Understanding frame benefits

A-2: Understanding frame drawbacks

Topic B: 0 Examining frame syntax

B-1: Using the <FRAMESET> element

B-2: Using the <FRAME> element

B-3: Using the <NOFRAMES> tag

Topic C: 0 Using other frame related features

C-1: Nesting frames

C-2: Controlling scroll bars

C-3: Controlling frame borders

C-4: Controlling frame margins

Topic D: 0 Targeting frame sets

D-1: Naming frames

D-2: Targeting named frames

D-3: Using special target names

Topic E: 0 Planning frame content

E-1: Understanding frames and screen resolutions

E-2: Designing effective frames

E-3: Mixing fixed and variable frames

Unit 11 : Publishing and maintaining your Web site

Topic A: 0 Publishing your Web site

A-1: Choosing an ISP

A-2: Buying a domain name

A-3: Using the ISP comparison checklist

A-4: Using FTP to upload files

Topic B: 0 Testing your Web site

B-1: Testing considerations

B-2: User testing

B-3: Varying your subjects

B-4: Formalizing your testing

B-5: Developing a feedback form

B-6: Refining and updating your content

Topic C: 0 Attracting notice to your Web site

C-1: Working with search engines

C-2: Using meaningful titles

C-3: Using <META> elements

C-4: Guidelines for working with frames

C-5: Using ALT text with images

C-6: Submitting URLs to the search engines