Dreamweaver I

Learn to build Web sites using the premiere design tool

Adobe Dreamweaver is the preferred HTML editor of professional Web designers. Dreamweaver integrates a host of design tools in one easy-to-use application. Without advanced HTML and CSS knowledge, you can design sophisticated sites, creating advanced layouts by using Cascading Style Sheets, typography, colors, data tables, and more.

This intensive 6-lesson training course guides you through Adobe's leading-edge Web editor, taking you from absolute beginner to intermediate level. Practical projects help you build a portfolio of Web pages that demonstrate your skills.

Tuition: $900 US

Course Instructor(s):

Piper Nilsson is a graphic designer, information architect, and educator.

Catherine George is a digital media designer, developer, and instructor.

Course content developed by Piper Nilsson and Anne-Marie Yerks.

Requirements:

To take this course you'll need:

Computer with Internet connection (56 Kbps modem or faster).
Adobe Dreamweaver CS4 or CS5.
An account with a Web hosting service. Free services are available. Check with your Web host to make sure it supports Dreamweaver's FTP protocol.
Adobe Photoshop or Fireworks or equivalent digital imaging program is recommended but not required.

Prerequisites:

The following courses can help you meet the above requirements:

4218 - Photoshop Basics

Course Objectives:

Students learn how to:

Develop and submit for feedback six Web pages or sites demonstrating specific Dreamweaver technologies.
Navigate the Dreamweaver interface and access the full range of tools, panels, and commands.
Publish a Web page to a Web server using Dreamweaver FTP and accurate link paths.
Format text, links, and page backgrounds consistently and creatively using Cascading Style Sheets (CSS).
Use CSS as an efficient and flexible method of page layout design.
Present text and image data effectively using tables.
Use basic Web design guidelines to create attractive Web layouts and color schemes.
Add Flash and basic DHTML behaviors to Web pages.
Create working navigation bars using hyperlinks and JavaScript image rollovers.
Develop liquid layouts that effectively respond to user browser size.
Troubleshoot and repair broken links and other basic Web site flaws.

Course Outline

LESSON 1 Intro to Dreamweaver

Lesson One kicks off with an introduction to Dreamweaver's flexible toolkit. You'll learn to customize, create, and save an HTML page, how to define a site and make it talk to your Web server, and how to manage files. You'll explore how HTML and CSS code is generated in Dreamweaver's WYSIWYG interface and learn how to use the Properties Inspector. In the exercise, you'll create a "favorite links" page, hooking up Web links, formatting text, adding images, and more.

LESSON 2 Cascading Style Sheets

Ready to create pages with some real style? Lesson Two introduces you to a key Web technology: Cascading Style Sheets (CSS). With CSS you can refine the look of text and other features on your Web pages, training you to make global site design changes in a snap. You'll learn how to create internal and external style sheets using Dreamweaver's CSS Styles panel that will make your styles look great. In the exercise, it's off to camp-you'll design a Web site for an arts and crafts camp using CSS for text and background formatting.

LESSON 3 CSS Starter Pages

In Web design, it's all about staying on top of current technology and trends. Lesson Three introduces you to CSS positioning—a technology that allows you to create flexible and efficient layouts instead of relying on restrictive HTML tables. You'll see how easy and fun it is to design a layout and build it with CSS, and you'll create a complete Web site using CSS starter pages in Exercise Three.

LESSON 4 Data Tables

Lesson Four explores how to use tables as a layout and organization tool. You'll look at a "best practice" table design on the Web, then find out how easy Dreamweaver makes it. You'll learn how to create tables, add content, adjust and nest tables, and explore design options using table borders, background colors, and patterns. In the training exercise, you'll use tables to design an e-commerce home page including a fully-functional, list-based navigation bar.

LESSON 5 CSS Positioning

Now that you're familiar with Dreamweaver's essential tools, you're ready to really design. Lesson Five focuses on absolutely positioning elements and your layout using CSS. You'll also explore fixed and static positioning, then using these techniques to create boxes with rounded corners using CSS. In the exercise, you'll create a Web site based on a detailed client brief using your new CSS positioning skills.

LESSON 6 Liquid Layouts, Multimedia & Troubleshooting

Lesson Six starts off by diving into liquid layouts and using them effectively. You'll learn how to add Adobe Flash content and DHTML behaviors to your pages. Then, to make sure your sites function when they go live, you'll run through our top troubleshooting tips. In the final project, you'll apply all you've learned by debugging a mini-site, adding JavaScript behaviors, and more. You'll also do your own redesign of the site's home page.