The following tutorial takes a structure-first approach to web design. Although visual formatting is essential to every publication, in this tutorial it is treated as a secondary consideration to be addressed after the content has been marked up with structural HTML tags.
A structure-first approach, which may seem unintuitive to visually-oriented designers, offers several benefits. The first is pedagogical: learners are forced to conceptualize web design as two separate but interrelated steps. The second benefit is practical: good web design is built on a foundation of solid HTML code, and valid HTML requires a separation between document structure using HTML tags and visual presentation using Cascading Style Sheets.
Approaching web design from a structural perspective ensures that content will remain readable even when styling rules are disabled. Handheld devices, like cell phones, typically ignore visual formatting, as do assistive technologies like screen readers. A structural focus also leads to the creation of more flexible web pages, which can be viewed by users (and reformatted by designers) in multiple ways.
This tutorial is comprised of a series of lessons which build on one another to culminate in a simple, accessible website. Along the way, many principles of universal design and best practices are employed and explained. The tutorial was developed in collaboration with the office of Computer Training and Support Services (CTSS) at Colorado State University. It grew out of a desire to incorporate universal design principles and emerging web design standards into the University’s basic training program for web design using Dreamweaver software.
Upon completion of this module, the user will:
- Understand the importance of adhering to web standards and universal design practices
- Understand the importance of designing for diverse technologies and user requirements by adhering to web standards and universal design practices to maximize accessibility and usability
- Understand the importance of separating content from appearance (structure and function vs. visual design)
- Create a simple, standards-compliant website using XHTML, <div> tags, and cascading style sheets (CSS)
- Create rules for a cascading style sheet and understand the following:
- CSS rule construction (syntax)
- Three possible locations for CSS rules
- The meaning of the term “cascade”
- CSS positioning of page elements
- Media-specific CSS, such as “screen” and “print”
- Create a Dreamweaver template and generate a website from it
- Understand the difference between fixed-width and “liquid” layouts, and the pros and cons of each approach
- Create a more complex 3-column layout using the above techniques
- Know where to find web development resources at CSU and elsewhere on the Web
- Understand the importance of validating HTML and CSS code prior to duplicating it throughout your website
These lessons were designed for use with Dreamweaver MX (version 8). Other, especially older, versions of the software may not correspond to the instructions and illustrations provided.
At key points, you will be asked to work with a new set of files to ensure that your work matches the descriptions and illustrations in the text. To switch to a new set of files, simply modify Dreamweaver’s site settings to point to the appropriately numbered folder. The folder numbers are indicated in the text with red icons as follows:
Tutorial Document (PDF)
Note: the following compressed archive files are saved in the .zip file format. They can opened by the Windows operating system (XP or later) and by several zip compression/decompression utilities like WinZip. In all cases, you will want to extract the individual files before using them in Dreamweaver.
- Full set (.zip)
- Individual Sets