COURSE OUTLINE FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA

ADOBE DREAMWEAVER AUTHORING TOOL

DTM 3612

SEMESTER 1

SESI 2010/2011

DTM 3612 ADOBE DREAMWEAVER AUTHORING TOOL [2,0,4]

Type of Course: E

1.0 LEARNING OUTCOMES

Upon completing this subject, the student should be able to: 1. Design and build a complete website.

2. Apply the practical skills in utilizing various tools and functions in Adobe Dreamweaver. 3. Publish and manage a website.

2.0 SYNOPSIS

This course will introduce the students to Adobe Dreamweaver as a website authoring tool. The subject contains only lab sessions, which is task-based with students learning by doing. The lab sessions will cover from the introduction of basic features in Adobe Dreamweaver until publishing a complete website. Students are required to work in pairs to produce their own website with appropriate user interface design and interactivity based on the theme given. A complete web application has to be submitted at the end of the semester. Students will also require to present their work in formal project presentation.

3.0 PRE-REQUISITE NONE

4.0 LAB AND PRACTICAL

The use of Adobe Dreamweaver CS4 for web development.

5.0 REFERENCES

[1] Adobe Creative Team, (2008), Adobe Dreamweaver CS4 Classroom in a Book (Paperback),Adobe Press.

[2] Adobe Creative Team, (2010), Adobe Dreamweaver CS5 Classroom in a Book (Paperback),Adobe Press.

[3] Osborn, J., Aquent Creative Team and AGI Creative Team, (2008), Dreamweaver CS4 Digital Classroom , Wiley.

COURSE OUTLINE

FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA

[4] Powers, D., (2007), The Essential Guide to Dreamweaver CS3 with CSS, Ajax, and PHP, HallFriends of ED.

[5] Warner, J., (2008), Teach Yourself VISUALLY Dreamweaver CS4 (CourseSmart), HallFriends of ED.

[6] Negrino, T. and Smith, D. (2010), Dreamweaver CS5 for Windows and Macintosh (Visual QuickStart Guide), Peachpit

6.0 COURSE IMPLEMENTATION

a. Lab: 4 hrs per week for 14 weeks (Total = 56 hrs)

7.0 COURSE EVALUATION

Course Works Marks

Lab Exercises(10) 15%

Assignment(3) 15%

Lab Test 20%

Project 20%

Final Examination Marks

Final Examination 30%

Total 100%

8.0 ASSESSMENT METHOD

Component Knowledge Competency Attitude Communication

Exercises/Test √ √ √

Group Project √ √ √ √

Assignment √ √ √ √

Laboratory Exercise √ √ √

9.0 DETAILED SYLLABUS AND TEACHING PLAN

Week Session Contents Remarks

1 Lab 1 What Is HTML

 What is HTML?

 Where did HTML begin?  Writing your own HTML code  Frequently used HTML 4 codes  Where Is HTML Going? What Is CSS  HTML vs. CSS formatting  CSS box model  HTML defaults  Formatting text  Formatting objects  Multiples, classes and IDs

Lab 2 Customizing Your Workspace  Touring the workspace  Switching and splitting views  Working with panels

 Selecting a workspace layout  Adjusting toolbars

 Personalizing preferences

 Creating custom keyboard shortcuts  Using the Property inspector

Site Definition

 Defining a Dreamweaver site  Using the Welcome screen  Selecting a CSS layout  Saving a page

 Choosing a document view  Modifying the page title  Changing headings  Inserting text  Inserting images

 Selecting and modifying CSS styles  Adjusting text, fonts, and colors

 Working with Code view and Code and Design view  Using the Properties panel

 Previewing a page in Live view  Previewing pages in a browser

Lab Exercise 1

2 Lab 1 Working with Texts Lab Exercise 2

 Creating headings, lists, and blockquotes  Spell-checking a document

 Using the Spry Tooltip widget  Finding and replacing text

Lab 2 Styling HTML Elements with CSS Lab Exercise 3  Attaching an external style sheet

 Creating new CSS rules  Applying styles

 Applying custom classes to page divisions  Examining selectors in the CSS Rules panel  Creating style sheets for other media types

 Web design basics

 Working with thumbnails and wireframes  Modifying an existing CSS layout

 Adding a background image to the header  Inserting new <div> components

 Modifying the page width and background color  Modifying existing content and formatting  Inserting an image placeholder .

 Inserting placeholder text  Modifying the footer

Lab 2 Creating CSS Layout From Scratch

 Creating layout styled <div> elements  Looking at Code view

 Exporting CSS styles  Using the ruler and guides  Checking the layout

Lab Exercise 5 Assignment 1

4 Lab 1 Working with Images Lab Exercise 6

 Inserting an image

 Adjusting image positions with CSS classes  Working with the Insert panel

 Using Adobe Bridge

 Inserting incompatible file types

 Working with Photoshop Smart Objects

 Copying and pasting images from Fireworks and Photoshop

 Inserting images by drag and drop

 Optimizing images with the Property inspector

Lab 2 Working with Links and Navigation Lab Exercise 7  Linking to internal site pages

 Creating an external link  Setting up e-mail links  Targeting links within a page

5 Lab 1 Using Legacy Tools: Tables Lab Exercise 8

 Using tables for layout  Tables versus CSS  Inserting a table  Selecting tables  Modifying tables

 Nesting a table inside a row  Adding content to tables  Formatting tables

Assignment 1 (Due)

 Starting up  Legacy sites  How frames work  Creating framesets  The Frames panel  Splitting a frame

 Specifying frame content 6 Lab 1 Working with Forms

 Learning about forms  Adding a form to the page  Inserting text form elements  Creating radio buttons  Inserting check boxes  Working with lists  Adding a submit button  Styling forms

Lab Exercise 9

Lab 2 Working with Templates  Creating a template  Inserting editable regions  Updating a template  Producing child pages  Using Library items  Using server-side includes

7

Lab 1 Working with Flash

Assignment2(due)  Understanding Flash

 Adding a Flash animation to a page

 Adding Flash video to a page Assignment 3 Lab 2 Lab Test 1

8 Lab 1 Adding Interactivity (Behaviour)

 Learning about Dreamweaver behaviors  Previewing a completed file

 Using a Spry effects behavior  Learning about XML data  Importing XML data with Spry

Lab Exercise 10

Lab 2 Fine-Tuning Dreamweaver Workflow

 Using the Favorites tab on the Insert bar  Resizing the document window

 Using guides  Using grids  The tag selector

 Switching between tabs and cascading documents  Zooming

 Working with dynamic content  Choosing a server model  Configuring a local web server  Setting up a testing server  Building database applications Lab 2 Building Dynamic Pages with Data

 Building pages with ASP, ColdFusion, or PHP  Creating a master/detail page set

 Creating a detail page

10 Lab 1 Working with Code

 Code tools overview  Selecting code  Collapsing code  Expanding code  Adding new code  Using Code Navigator  Accessing Live Code  Using Inspect mode  Working in related files  Accessing Split Code view  Commenting your code

Final Project Briefing

Lab 2 Publishing to the Web  Defining a remote site  Cloaking folders and files  Putting your site online

11 Lab Test 2

12 Hands-On Project Development

13 Hands-On Project Development

14 Project Presentation Final Project (Due)

15 STUDY LEAVE