imd content

Interactive Media Design > Web Design
Technical
Skills

Seen on the web...

Good graphic design is not the same as good user experience design, In fact, 'good web design is invisible'—it feels simple and authentic because it’s about the character of the content, not the character of the designer.

—Jeffrey Zeldman, Understanding Web Design, video presentation, 42:40 running time
Working with
content, structure, and presentation

The separation of content, structure, and presentation is a fundamental principle for web design. We'll use two sets of examples for our class discussion. Here is the first set of examples:

1. Content (this page only contains text and images)
2. Content + structure (this page adds only HTML structure to the text and images)
3. Content + structure + presentation (this page adds CSS presentation to the content and the HTML structure)

Here is another set of examples:

1. Content (this page only contains text and images)
2. Content + structure(this page adds only HTML structure to the text and images)
3. Content + structure + presentation (the current page you are viewing; this page adds CSS presentation to content and the HTML structure)

The class exercises will help reinforce these fundamental concepts:

1. The relationship between content, structure, and presentation.
2. The pattern for using HTML and CSS codes.
3. All web pages are simply text. Images and videos are inserted as file references.
4. Web pages typically exist in two places: the originating computer and the destination web server.
5. We'll see that Dreamweaver is not a web design program; it is simply a web page editor and file manager. You'll need to develop a web design started with a blank canvas.

We'll take one page design from start to finish using three different processes.

1. Inspiration
2. Paper sketch
3. Three page building approaches
1. In Dreamweaver, build a web page using HTML tables.
2. In Dreamweaver, build a web page using CSS divisions.
3. Starting in Photoshop, build a web page.

One additional method is reserved for advanced coders:

4. In Dreamweaver, build a web page using a "Blank Template". This option installs about 200 lines of code into your first page—which can be a time saver if you know what to do with it, otherwise it will be a waste of time to try and make it work for you.

The following methods are not acceptable for course assignments, although they may be helpful in order to learn by example.

5. Build a web page using Dreamweaver's "Page from Sample".
6. Build a web page starting from an exisiting web site.
7. Build a web page starting with any free or purchased web page template.
8. Build a web page from within Microsoft Office (Word, Excel, PowerPoint).
9. Build a web page from another web editor, such as iWeb.

Things to keep in mind

* Always view the local file in a web browser and check for problems.
* Upload the finished file from your computer to your copland web space.
* Preview the page live on the web and verify that it is working.
* Establish (and follow!) your own set of conventions. For starters, understand HTML and CSS conventions: code syntax, file names, and more.