Web Site Design Tutorials/Lessons Page
Mr. Clarke Green, Instructor

IMPORTANT notes on file formats at bottom of page.

Dreamweaver (DW)Tutorials
File Formats
IMPORTANT notes on file formats at bottom of page.
Dreamweaver Workspace
HTML/
Flash
WMV
Creating a New SITE. You will rarely create a new site. You will create only 2 or 3 sites during the quarter. You will create many new files within existing sites. Creating new files is the next lesson.
HTML/
Flash
WMV
Creating a New FILE. This is how you create a new HTML page. You will create many new files...always within an existing site.
HTML/
Flash
WMV
Text 1. Formatting and laying out text.
HTML/
Flash
WMV
Text 2. The Insert bar / Text Tab VS. the text Property inspector. The neat thing in this lesson is how to put info flags on links
HTML/
Flash
WMV
Images 1. Inserting, aligning, file management, alt tag, hspace and links.
HTML/
Flash
WMV
File Management for Images. Relates to both PSP and DW. Importance of using correct file formats and file sizes and how to change the formats and sizes so the picture works and can be managed in DW.
HTML/
Flash
WMV
Tables 1. Creating tables and changing the attributes of the tables and the cells: table and cell size, relative vs. absolute sizing, borders, backgrounds, padding, spacing, and the property inspector.

HTML/
Flash

Part 1
Part 2

WMV
Tables 2. Table and cell alignment, nesting tables, resizing, splitting and merging cells and tables as nav bars.
HTML/
Flash
WMV
Tables 3. Adding/deleting columns and rows.
HTML/
Flash
WMV
Tables 4. "Shrink-wrapping" the cells to fit the content and adding rows to a photo array table to put a caption below the pictures
HTML/
Flash
Something really wrong here.
Thumbnails (DW). Arraying thumbnails and linking to full sized pictures
HTML/
Flash
WMV
Frames 1. New frameset, frameset panel, showing/hiding frame borders, 4 ways to create frameset/frames, saving frameset/frames.
HTML/
Flash
WMV
Frames 2. Browser title bar, page properties save all, property inspector (frames vs. frameset), fixing size of frames, borders.
HTML/
Flash
WMV
Frames 3. Nested frames aka parent / child relationships in frames.
HTML/
Flash
WMV
Frames 4. Targeting links,naming frames in property inspector / frame panel, scrolling frames or not.
HTML/
Flash
WMV
Flash Text.
HTML/
Flash
WMV
Flash Buttons.
HTML/
Flash
WMV
Rollover Images.
HTML/
Flash
WMV
Layout View vs. Standard View - Part 1
HTML/
Flash
WMV
Layout View vs. Standard View - Part 2 The transition from Part 1 to Part 2 is almost non-existent (it is abrupt). This is because i just cut the original video in half and called them Part 1 and Part 2. Oh well
HTML/
Flash
WMV
Simple Layers. Flexible, powerful and easy. All the good points of Layout View and few of the weaknesses.
HTML/
Flash
WMV
Inserting Audio
HTML/
Flash
WMV

 

Paint Shop Pro Tutorials
File Formats
IMPORTANT notes on file formats at bottom of page.
Creating a new PSP file. Image size, resolution, background.
HTML/
Flash
WMV
PSP Workspace. Workspace, Menu bar, toolbar, tool options palette, color palette, choosing colors, gradients, patterns, textures, foreground (left click& line) background (right click & fill).
HTML/
Flash
WMV
File Management for Images. Relates to both PSP and DW. Importance of using correct file formats and file sizes and how to change the formats and sizes so the picture works and can be managed in DW.
HTML/
Flash
WMV
Preset Shapes. Creating items with preset shapes, retaining styles, applying custom lines and fills.
HTML/
Flash
WMV
Picture Tube and Airbrush.
HTML/
Flash
WMV
Selecting and Deleting. Selecting and deleting pats of an image, selection shapes vs. freehand selection, hard edge vs. feathering, inverting selection, matching background to web page.
HTML/
Flash
WMV
Thumbnails (PSP). Full size images vs. thumbs, download time considerations, separate images for thumbs and full size, resizing pictures.
HTML/
Flash
WMV
Transparent Backgrounds. GIF's only... .....you've heard of transparent gif's, gut you've never heard of a transparent jpg.
HTML/
Flash
WMV
What is Antialias?
HTML/
Flash
WMV
What are Vectors?
HTML/
Flash
WMV
Rollover Images.
HTML/
Flash
WMV
Animated Banners.
HTML/
Flash
WMV
3D Buttons. Simple 3D buttons using the buttonize function and creating buttons with both an up-state and a down-state.
HTML/
Flash
WMV
BAD Backgrounds. Things not to do when creating custom backgrounds.
HTML/
Flash
WMV
Custom Backgrounds - Part 1. Creating custom patterns from scratch and from exisitng images, fading them down so they are backgrounds, and generating seamless edges so they tile well.
HTML/
Flash
WMV
Custom Backgrounds - Part 2. An abrupt continuation of Part 1. The entire tutorial was too long, so I cut it in half. Therefore this second have has no intro. It shows a couple more examples. It also applies all the backgrounds from Parts 1 & 2 and critiques how they look on web pages.
HTML/
Flash
WMV
Text Images and Text-On-A-Curve.
HTML/
Flash
WMV
Node Edit. Editing nodes on vectors and specifically on vector text.
HTML/
Flash
WMV
 
HTML/
Flash
WMV
 
HTML/
Flash
WMV

HTML/Flash: Viewed via web browser. No viewer or additional software necessary. Cross platform. Requires Macromedia Flash PlugIn which is normally installed by default. You may press F11 to view in full screen. WARNINGS:There is no way to fast forward or rewind in this view.

MSV: Windows Media Video is the current Microsoft streaming file format. WMV files can be streamed or played locally from the hard disk. You may be asked, “Do you want to play file in Internet Explorer?” I suggest you answer NO. If the file launches in Windows Media Player, you may press Alt-Enter to toggle to and from full screen view. You may pause, fast forward and replay in this view. WARNINGS: Some of the preview screens don't show in this format.