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.
[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
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 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 3 Lab 1 Modifying Exisiting CSS Layout Lab Exercise 4
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 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 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) Using Legacy Tools: Frames Assignment 2
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 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 Assignment2(due) Working with Flash Understanding Flash Adding a Flash animation to a page Adding Flash video to a page Assignment 3 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 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 9 Lab 1 Working with Online Data Assignment 3(Due)
Working with dynamic content Choosing a server model Configuring a local web server Setting up a testing server Building database applications 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 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 16 & 17 EXAMINATION WEEK