Skip To Navigation

   CLASS SCHEDULE

  

Week 1 (1/28)

TOPICS

  • Introduction to the class
  • Introduction to Multimedia and the World WIde Web
  • Self publishing
  • Introduction to blogging for the class
  • Setting up your own blog (on Blogger or WordPress)

RESOURCES

LAb/Homework

  • Set up your blog and e-mail me the address (URL)
  • Make your first post to the blog
  • Get the Book and begin play/experimentation
  • Review HTML Basics at HTML Dog and/or W3 Schools

Week 2 (2/4)

TOPICS

  • Web basics
  • Reveiw of HTML and XHTML
  • Basic HTML Tags
  • Hard-coding web pages with HTML
  • Coding Color
  • HTML vs. CSS for formatting
  • Coding Tables and Images
  • Using a WYSIWYG: Introduction to Dreamweaver for creating and editing Web pages

RESOURCES

Exercise #1: <I AM IN HTML>

Hand-code a web page using HTML that provides a brief introduction to who you are, including a biographical description of yourself, your careers goals/major, your interest in the course, and/or any other information that you'd like to provide. At minimum, your HTML page should include:

  • A page title
  • A header with your name
  • Some form of narrative biographical information about yourself
  • An ordered or unordered list of your favorite web sites with links to the sites
  • A hot link with your e-mail address

Remember to play around with the formatting and select a background color and font styles for your page (Note that modern formatting uses CSS rather than presentational HTML code, but you are welcome to use either for this exercise). You're welcome to explore coding tables, inserting images, inserting horizontal rules, etc., but it's not required.

Save the file using your last name plus "e1", and then use the extension ".html" (i.e. clevelande1.html). Put it in the Exercise 1 folder on the shared drive.

LAb/Homework

  • Finish Exercise # 1
  • Bring a poem (5 - 25 lines) to the next class on 2/11
  • Read Dreamweaver CS4 Digital Classroom, Chapter/Lesson 1 (recommended)
  • Read Design in Theory and Practice (Principles, Elements)
  • Blog Away

Week 3 (2/11)

TOPICS

  • Introduction to Working with Dreamweaver
  • WYSIWYG
  • The Dreamweaver Environment
  • Page properties
  • Working with text/typography
  • Formatting text
  • HTML Formatting vs. CSS Formatting
  • Line breaks and paragraphs
  • Special Characters
  • Absolute and relative links
  • Working with tables

RESOURCES

Exercise #2: HYPER POEM

Use Dreamweaver to creatively format your poem and add hyper-links.

Try to make the formatting of your page(s) thematically consistent with the poem. You may wish to manipulate the background properties (such as background color and margins); use line breaks and/or paragraph breaks; play with the font family, color, size, and formatting; use special characters when appropriate; and explore differing alignment options.

Explore creating a "hyper" poem using absolute links (to external sources) or relative links (to other pages you create or with named anchors for within-the-page links). You must have at least one link on the page.

You may insert images and work with tables if you wish, but it is not necessary.

Create a folder with your name + -e2 (i.e. karlcleveland-e2) and save all of your html and dependent files in it. Put it in the Exercise 2 folder on the shared drive.

LAb/Homework

Week 4 (2/18)

TOPICS

  • Introduce Midterm Project | "Client" Interview/Survey
  • Review of Photoshop for Creating Web Graphics
  • Optimizing Images for the Web
  • Formats for Optimizing Web Graphics
  • Working with Images in Dreamweaver
  • Integrating images and text
  • Image maps
  • Images as buttons
  • Images as backgrounds
  • Rollover buttons

Midterm Project - ipoinT Advisors Webbsite: Design the NaV menu & gRAPHICS (Part 1)

In a five step process, you will create a website for the fictional company, iPoint Advisors, using this textual content. You will begin by creating graphics and image-based rollover buttons for the navigational menu (Part 1); you will then layout your pages using HTML Tables (Part 2); style and format the text and other elements using Cascading Style Sheets or CSS (Part 3); refine your design and define a template for the site (Part 4), and finally you will populate the site with all content, refine your indivdual page designs, debug problems, and upload the site to the MAT servers via FTP (Part 5).

You will have the opportunity to ask the "client" (me) questions about the project to guide your creative development and understand the communication goals and objectives for the site. This client survey may be useful to that end.

The website should have the following sections/pages: profile, services, staff bios, client list, and contact (you are free to change the names/labels for these pages).

You are required to create the following imagery in Photoshop, Illustrator, or Fireworks: a simple text-based logo/banner for the company that will serve as the site identifier; page titles/headers (page identifiers); and image-based rollover buttons for the navigational menu linking to each page.

Create a root folder with the following naming convention: your last name + p1. My folder would be called "cleveland-p1" for example. Save all of your work (including your imagery) in this folder.

RESOURCES

LAb/Homework

  • Work on iPoint Advisors graphics
  • Read Dreamweaver CS4 Digital Classroom, Chapter/Lesson 3, pp. 84 - 93 (recommended)
  • Blogging Does a Body Good

Week 5 (2/25)

TOPICS

  • Review of Graphics and Rollover Images
  • Background Images
  • Tables and table-based layouts
  • Table properties
  • Pixel-based vs. percentage-based tables
  • Nesting tables
  • Rounded corners in tables

Midterm Project - ipoinT Advisors Website: Page Layout USiNG Tables (Part 2)

In the second part of the iPoint project (see above for general info and info on part 1), you will layout your pages using HTML tables. Decide whether you want your pages to expand and contract to fit varying screen sizes or whether you want to use a fixed size table. It is likely that you will need to create separate cells for your logo/site identifier, navigational menu, page titles, and body copy, but you should strive to have the simplest table-based layout possible that meets your needs. Once you setup the table layout, insert all of your images and content and enable your links for each of your pages.

RESOURCES

LAb/Homework

  • Finish iPoint Advisors graphics, begin layout with tables
  • Read Dreamweaver CS4 Digital Classroom, Chapter/Lesson 6, Working with Tables (recommended)
  • Da Blog

Week 6 (3/4)

TOPICS

  • Tables and Table Based Layouts (continued)
  • Working with Cascading Style Sheets (CSS)
  • External Stylesheets vs. Embedded and Inline Styles
  • Selectors: tags, classes, ids
  • Formatting with CSS, CSS Properties

Midterm Project - ipoinT Advisors Website: Formatting TEXT Using CSS (PART 3)

In the third part of the iPoint project (see above for general info and info on parts 1 and 2), you are required to style and format the text for iPoint Advisors using an external Cascading Style Sheet (CSS). Create differing styles to format, design, and differentiate body text, headers, sub heads, etc.

RESOURCES

LAb/Homework

  • Work on iPoint Advisors Project
  • Read Dreamweaver CS4 Digital Classroom, Chapter/Lesson 4, Styling Your Pages with CSS (recommended)
  • El Blog

Week 7 (3/11)

TOPICS

  • Review of CSS formatting
  • Efficiency and Automation
  • Working with Templates
  • Defining Editibale and Non-Editable Regions
  • Using Templates for Site-Wide Changes
  • Assets and Library Items
  • Using Find/Replace
  • Using the History Panel and Commands
  • Working with Snippets
  • Creating Your Own Code Snippet

Midterm Project - ipoinT Advisors Website: define and use a template for the site (PART 4)

In the fourth part of the iPoint exercises (see above for general info and info on parts 1-3), you are required to refine and finalize your page design (including adding all links, alt tags, etc.) and then save it as a template. Define the appropriate editable regions of your template. Create your content pages based on the template (using "New Page from Template"). Insert the content appropriate for each page and format the text using your external Cascading Style Sheet (CSS).

RESOURCES

LAb/Homework

Week 8 (3/18)

TOPICS

  • Discuss Final Project Process
  • Review of Templates
  • Defining a Site in Dreamweaver
  • Site Management
  • FTP
  • Lab for Midterm Project