Web Design 1
Tutorials / Examples
The following tutorials and examples are designed to compliment the course objectives. My hope is that they will not only help build your technical skill set but encourage further inquisition, teamwork and independent problem solving. If you are not taking my course and have stumbled upon this page through a web search, you're welcome to download and use them. All I ask is that you drop me a line and let me know that you're using them and if you found them helpful, etc. Keep in mind that they were created in the context of the classroom and were not designed to be independent resources.
This tutorial walks you though creating and linking a basic site using HTML with a simple text editor
This video shows how to set up a Dreamweaver Site. A "Site" is essential for organizing your web site's files, links and web pages and uploading those files to a server.
This tutorial walks you though creating and linking a basic site using HTML and CSS with a simple text editor.
This tutorial walks you though creating and linking a basic site with HTML, CSS and div tags using Adobe Dreamweaver.
This tutorial walks you though adjusting and exporting single images for web output using Photoshop's Save for Web feature. Then uses those images to create a website using Dreamweaver.
This tutorial walks you though creating and linking a basic site with HTML, CSS, div tags and Tables using Adobe Dreamweaver.
An explanation of floating div tags side by side.
A description of the process of linking a flash swf in an html page and uploading to our server using Dreamweaver's site manager.
An intro to the Photoshop Slice Tool, and a review of the old faves. This is both written and video.
Creating a prototype in Photoshop then slicing out the needed graphics for web output.
Using PHP and HTML to create a contact form
A more complicated explanation of setting up a Flash Animation in Web Ad Format.
This tutorial discusses basic Flash Animation Using Motion Tweens and Scenes
This tutorial walks you through completing a basic animation using Adobe Flash's Motion Tween.
This tutorial walks you through animating the interface elements of a Flash application.
This tutorial discusses saving loads of time and effort by using a Photoshop Action to edit a series of images. Those images are then imported as a sequence into Flash to create a stop motion type animation.
Utilizing the Easing options in Flash is an excellent way to animate objects in a more realistic and lifelike way. This tutorial explains how to apply ease using the Properties Window and the Motion Editor.
This tutorial explains how to create a looping background in Flash. It also discusses utilizing Bryan Heisey's vcam
This describes how to utilize masks in Adobe Flash CS4 to create a growing effect.
This tutorial discusses utilizing Flash's Shape Tween feature to create simple morphing effects from one shape to another.
The Bird Ad tutorial with masking and 3D tool.