Dreamweaver Workshop Day 1

Conducted by: Lawrence Zhuang

Book Referenced for this workshop and henceafter

● Adobe Dreamweaver CS4 Digital Classroom by Jeremy Osborn and Aquent Creative Team

Overview of Today's Workshop

What is Dreamweaver

● Web Design● WYSIWYG● Split view (Designer and HTML Coding)

Getting Started

● Creating New Document● Toggling between Code, Split and Design

View● Creating a New Project Folder on your

Computer

Breather (10 minutes)

● Run through the interface and toolbar of the software

● Ask questions?

Demo

● Writing your first sentence on the dreamweaver

Long Demo

● Advanced Word Structuring and Formating(underlining, centering, font size)

● Simple Analysis of html structure on the coding window(opening and closing)

● Making use and referencing the Code Window

● Enter and Shift-Enter

Demo

● More analysis on the HTML structure on the coding window

Demo

● Naming the title of your webpage● Saving convention of the file

Demo

● Google a picture and save it to your project folder

● Inserting Image● Resizing and positioning of the image

Demo

● Creating a weblink on your website

Demo

● Previewing your website on the Web Browser

In a nutshell

● With the useful Designer window, you can think of Dreamweaver like Mircosoft word that is slightly advanced...

Exercise of the Day

● w3m.sourceforge.net● Recreate and reduplicate the above website● Try to be as close to the original content as

possible● Use any image you can found on google for

your header image● Be creative and have fun!