The Computer Gal Logo - Laptop with coffee and plants
To register for this class,
click here.

It will take you right to the Lifelong Learning Center registration page.
Even the Average Human
Can Do Basic HTML

Note: this course is in transition from being focused primarily on Dreamweaver to being focused primarily on HTML and CSS as you might use then in a CMS. This syllabus is a guide, not a law. The needs of the students will be taken into consideration in following the syllabus. Also, the syllabus will be adjusted as the needs and questions of the students are taken into consideration.

Course Objectives

  • To understand how an IDE, like Dreamweaver, works.
  • To understand the patterns of HTML and basic CSS for text formatting
  • To understand the structure and properties of building web sites with tables and how table structure is different from CSS strucutre
  • To understand how background images are created and used
  • To understand how to optimize photos for web sites and the code to add them to a website
  • To understand the code for various types of links

Text: I recommend that you find a text that matches your version of Dreamweaver to use as a reference. The "on Demand" series is the best I have found to date.

Days Class Description Web References
1

Class Introductions and Discussion about Where Coding Fits into the CMS Era

  1. What we hope to accomplish in this class.
  2. Good web development is a whole lot more than code
  3. In these days of WordPress, Joomla and Drupal, why would you need to know code?
  4. Commonly used online text editors
  5. The process of working between an Editing Program on your own computer (not online ) and your Browser and how it's different from working in an online editor
  6. Basic HTML structure
TinyMCE Demo
2

Basic Coding without an IDE

  1. More basic HTML
  2. Deprecated HTML tags v CSS
  3. Semantical structure (content structure v layout structure)
  4. Basic CSS syntax
  5. Basic CSS structure as in internal style
  6. How HTML and CSS work on a web page

Text reference: Chapters 14, page 321 for HTML. Chapter 2, page 11

An XML Example

Back to top

3

Introduction to Dreamweaver  

  1. How to Introduce Dreamweaver to your Web Sites (Manage Sites)
  2. How Dreamweaver Links your Local and Remote Files
  3. Viewing your website files in Dreamweaver
  4. How an IDE creates code for you
  5. Try a free IDE

Text reference:

SharePoint Designer

Back to top

4

Continuing Code: CSS and Tables

  1. Review how CSS and HTML work together, compared to the old HTML tags.
  2. Discuss how programming code might show up in a file you are looking at.
  3. Basic Table Properties
  4. Example of Calendar Table
  5. Table Exercise

Text reference:

Website Accessibility Checker

A demonstration of how <th> works for accessibility

Example of how HTML, CSS, PHP and MySQL fit together on a web page

Back to top

5

Introduction to PhotoShop

  1. Introduction to the Photoshop interface


Example of a site with a simple lined background

Misuse of background images on a website

 

Back to top

6

Preparing Photos for your Web Page

  1. Practice images
  2. Preparing photos for your website
How to Prepare a Photo for your Website

Back to top

7

Lab Night
Case study: how to define software specs and find appropriate software on the web

Back to top

8

Navigation 1

How to Create Different Types of Website Links

Case study: download software and understand files

Back to top

9

Navigation 2
Case study: set up the software for your web site

Back to top

10

Lab Night

Back to top

 

Nora McDougall | Missoula, Montana 59801 | 406.253.4045 | Contact Nora
© 2012, Nora McDougall-Collins