City College of San Francisco
Course Outline of Record
Course Status: Active
I. GENERAL DESCRIPTION
A. Approval Date March 2016
B. Effective Semester Spring 2017
C. Department Business
D. Course Number COMP 9919
E. Course Title Using Dreamweaver for Basic Business Web Pages
F. Course Outline Originator Julian Skolnick
G. Department Chairperson Ophelia Clark
H. Dean Wendy Miller
II. COURSE SPECIFICS
A. Hours
45 total
B. Prerequisite None
    Corequisite None
    Pre/Corequisite None
    Advisory ESLN 3600 and COMP 9905 or COMP 9245
    Advisory Pre/Corequisite None
C. Course Justification This course introduces beginning to intermediate website development and Dreamweaver skills for business students. It is a requirement towards the Business Web Pages - Intermediate noncredit certificate. It is also an option in the Business Productivity Web Page Development section of the Computer Applications for Business noncredit certificate.
D. Field Trips No
E. Method of Grading Letter or Pass/No Pass or Satisfactory Progress
F. Repeatability As needed
III. CATALOG DESCRIPTION
Developing and maintaining a personal or business website using HTML and CSS built-in functions of Adobe Dreamweaver. Topics include new website definition, creating and editing the site, adding pages, links, images, text, and media. Beginning through intermediate skills are taught.
IV. STUDENT LEARNING OUTCOMES
Upon completion of this course, a student will be able to:
  1. Plan, design, develop, test, and maintain a website using Dreamweaver.
  2. Use the Dreamweaver interface, tools, and palettes to add: web pages, links, images, and media such as video and animated graphics.
  3. Create a page layout with page divisions and HTML 5 semantic elements using Dreamweaver tools and panels .
  4. Create cascading style sheets and choose appropriate selectors using Dreamweaver tools and panels.
  5. Develop a CSS navigation bar for the website using Dreamweaver tools and panels.
V. CONTENTS
  1. The Dreamweaver interface
    1. HTML insert panel
    2. CSS designer panel
    3. Properties inspector
    4. Design and code view toolbars
    5. Document window
    6. Preset window sizes
    7. Previewing a website in a browser
  2. Creating a website definition
    1. Creating a local site using the site definition dialog box
    2. Naming the site
    3. Creating the local site root folder
    4. Creating the default images folder
    5. Managing the local site root files and folder
    6. Saving the site definition
  3. Creating a new web page
    1. Changing the document type
    2. Adding a page title
    3. Adding a web page
    4. Opening a web page
    5. Saving a web page
  4. Typography
    1. Inserting text
    2. Formatting and modifying text
    3. Fonts
    4. Paragraphs
    5. Line breaks
    6. Headers
    7. Bulleted lists
    8. Web fonts
    9. Font color
  5. Images
    1. Inserting images
    2. Resizing images
    3. Bitmaps
    4. Vectors
    5. Background images
    6. Images outside the site folder
    7. Adding a Photoshop object
    8. Optimizing images
  6. Links
    1. Absolute links
    2. Relative links
    3. E-mail links
    4. Text links
    5. Image links
    6. Link states (link, active, visited, hover)
  7. Page layout
    1. Inserting layout elements
    2. Absolute div elements
    3. Relative div elements
    4. Size, margins, padding, and position
    5. Backgrounds
    6. Borders
    7. HTML 5 semantic tags (header, nav, section, aside, footer)
    8. Positioning
    9. Float and clear properties
    10. Using visual guides
  8. Cascading style sheets
    1. Selectors
    2. Tag selectors
    3. ID selectors
    4. Class selectors
    5. Compound selectors
    6. Style rules
    7. Properties
    8. Inline styles
    9. Internal style sheets
    10. External style sheets
  9. Working with forms
    1. Creating interactive forms
    2. Form objects
    3. Form design
  10. Navigation bars
    1. Creating a list-based CSS navigation bar
    2. Adding a list
    3. Adding links
    4. Formatting using CSS properties
  11. Inserting media objects
    1. Adding HTML 5 audio and video objects
    2. Adding Photoshop GIF or Adobe Animate animation objects
    3. Adding YouTube videos
VI. INSTRUCTIONAL METHODOLOGY
  1. Assignments
    1. In-class assignment: Participation in instructor-led demonstrations of Dreamweaver software skills covered in textbook readings and lectures, such as create a website definition, add new pages, add text, links, and images, use cascading style sheets to create a page layout, and add media objects.
    2. In-class assignment: Discussion of instructor generated handouts on topics such as step by step instructions covering Dreamweaver operations using the new interface, guidelines for published web content relating to permissions and copyright rules, and creation of navigation elements for web pages.
    3. Out-of-class assignment: Reading assignments from the textbook and handouts.
    4. Out-of-class assignment: Viewing online tutorials on topics such as setting up a website, adding content to web pages, and how websites work.
    5. Out-of-class assignment: Hands-on: creating a multi page website with formatted page header, footer, main content, and sidebar content areas, working navigation links, and text, images, and media objects.
  2. Evaluation
    1. Final Assessment: Independent website project such as: creating a multi page web site with formatted page header, footer, main content, and sidebar content areas, working navigation links, and text, images, and media objects.
    2. Exams/Quizzes/Tests: Test/Quizzes assessing the student's knowledge and comprehension of Dreamweaver concepts covering topics such as creating a site definition, adding pages, creating a layout, inserting and formatting text, links, page divisions, and media objects.
  3. Representative Textbooks and Other Instructional Materials
    1. Michael Arguin, Greg Heald, and the AGI Create Team. Adobe Dreamweaver CC Digital Classroom. John Wiley & Sons.
    2. Instructor developed handouts on topics such as: creating a website definition, adding new pages, adding text, links, and images, using cascading style sheets to create a page layout, and adding media objects.
    3. Website: Adobe Dreamweaver Learn and Support