John Keston Classes

Week 1

Session 1: In this class we’ll be exploring interactive design through the use of several excellent software tools. The tools include Dreamweaver and Flash. We’ll also be making use of FTP client software, creating and publishing a website and manipulating digital imagery with programs like Photoshop and Fireworks. For the final project we will be authoring a full website.

We will start the class by using Dreamweaver to create a basic five page website. Dreamweaver is an HTML editor. It does not create Dreamweaver documents, it is used to help you build and edit HTML documents, allowing you to publish content on the World Wide Web.

Before getting started in Dreamweaver it’s important to understand a little about HTML and how websites operate. In this class you’re not expected to become HTML experts, but it’s important to have a good understanding of it when involved in virtually any technology field. Thursday I’ll demonstrate some of the basic functionality within Dreamweaver, and talk more about our first project, which is a five page website using links, images and tables.

Assignment 1: "Project Portal" Static Web Page
Due Session 1, Week 2 (10 points)

For the official assignment requirements, download the assignment sheet in MS Word format.

This assignment is an introduction to the most basic concepts of building a web page (i.e. hyperlinks, uploading files, creating directories, creating HTML pages in Dreamweaver). It is also the mechanism through which I will grade all of your subsequent assignments. First you will log in to your OLS account and create four new directories within your /htdocs directory. You will then build one web page with links to the new directories you created, and upload the page. This page will be the "project portal" for this class. You are free to use it for other classes too, just make sure to label your assigment links clearly.

Session 2: Today I’ll be demonstrating a couple of ways to produce the "Project Portal" assignment that we discussed last time. We will also start our duscussion on HTML, look at some functionality within the Dreamweaver application, and discuss the requirements for the next project shown below.

Dreamweaver Project – "The World" Website
Due Date – Session 2, Week 6
Total Points - 40

For the "The World" project requirements, download the assignment sheet in MS Word format.

Assignment Overview:
Using Dreamweaver create a 6 page website about a country other than the United States. Each page should include images specifically prepared for the web in either jpg, gif, or png format. Use tables to organized the information on each page. Include text content, hard links, relative links and an email link. Also use the properties panel to choose specific fonts, font sizes, font styles and colors.

Content Specifics:
Website size – 6 pages.
Images on each page must be formatted as jpg, gif or png.
Text content must be included on each page. Pages consisting entirely of images are unacceptable.
Must be fully navigable, create universal navigation to get the user from one page to any other page.
Completed project must be uploaded to your OLS account and accessible over the internet.

Competencies:
Proper image formatting
Use of tables for layout
Use of links: email, relative and absolute
Use of page titles
Proper file naming
Use of CSS to format content
Setting document properties for text, tables and images
File transfer
Usability concepts (information design / navigation)
Originality of design and content organization

Grading Standards:
Grading is based on the above requirements (i.e. following the instructions as given in the content area, technical area, and competencies). Presentations of the "Word Almanac" will be held in class on the due date. Not presenting will result in a 5% reduction in your grade for the project.

Check these links for information on countries:
http://www.cia.gov/cia/publications/factbook/
http://www.unicef.org/infobycountry/
http://en.wikipedia.org/

Check these links for tutorials and information:
http://hotwired.lycos.com/webmonkey/
http://www.macromedia.com/support/dreamweaver/
http://www.projectseven.com/tutorials/index.htm
http://www.siteownersdesign.com/design-tutorials/dreamweaver-mx-tutorial