very basics

File Organization 5:09

It all starts here. If you lose the handle on where your files are located, you're doomed.

Web File Naming 3:29

If you don't follow web naming conventions, you're doomed.

File Paths 9:08

File paths are a road map for the browser. They tell the browser how to navigate to - or from where to retrieve - a file. If you don't understand this concept, all is lost.

Local & Remote Servers 6:04

Once you've created and perfected all your web files, it's time to upload them to your web server. Should your files be organized and named in exactly the same way on both servers? Don't guess. Watch the movie!

html

HTML Basics 11:01

Behold the basic concepts of HTML code. Watch. Learn. And gird your loins. For you will soon be writing code!

Writing HTML 16:22

Watch this video, then handcode HTML to impress your friends and family! You shall be godlike in their eyes.

images & animation

Saving Images for Web 13:59

Should you save your images as JPGs? GIFs? PNGs or PSDs? If you don't know the answer, you really need to watch this video.

GIF Animation - Part 1 11:18

Learn how to create a GIF animation in Photoshop. This video covers the Frame Animation Timeline and Keyframes.

GIF Animation - Part 2 9:59

Better than the original! You learn how to generate tweens and save your animation for the web in this video.

css

CSS Basics 18:27

CSS is a very powerful language that allows you to design to your web pages by attaching styles to HTML elements. Master CSS and the world is your oyster. If you only kind of get it, then you'll have to settle for a Mussel from the pier.

The Box Model 5:41

When it comes to CSS, there's not many things more important than understanding the box model. Not clear on the difference between margin and padding? Do your boxes not fit into your layout? Then this is video for you!

Normal Document Flow 15:20

Before you start going nuts using CSS positioning, you really need to understand the natural state of things. In other words, what will the browser do with your elements if left to its own devices? What are the rules that define normal document flow? And how can you use them to your advantage?

CSS Positioning 24:11

When normal document flow just won't cut the cheese, so to speak, then it's time to pull CSS Positioning out of your toolbox. The different types of positioning at your disposal are: Normal Document Flow (including Relative Postioning), Floating, Absolute and Fixed.

dreamweaver

Setting up your Site 2:40

Let Dreamweaver do the driving! Set up your site folder through DW and it will keep track of your files (as long as you only work with files which are inside youre site folder, that is).

Setting up your Workspace 5:21

Dreamweaver can appear startlingly complex with all its windows, buttons and menus. This video helps you set up your desktop to match what we use in class. Of course, once you're an expert you can make it be whatever you want.

Setting up your web Server 9:09

So you have your domain name and web hosting account. Now it's time to tell Dreamweaver where your remote server is located. Soon the world will see your genius.

Syncing Local & Web Servers 9:27

Now that you have your local site folder organized perfectly, and all your html pages look and function just as your heart desires, it's time to upload!

Formatting Text 15:49

Since our job as graphic designers is to communicate using the written word, it's important that we know how to style type so that it reads well no matter the computer or browser being used.

Creating Text Links 11:23

If you'd like to create a web site, as opposed to a web page, then you need to know how to create links. This video will not only moooove you, but show you how easy it is to create a text link.

Inserting Images &
Creating Image Links 8:08

Inserting images is quite easy, as long as you understand where you're inserting them. This video will walk you through the basics of getting images into your layout. And how to make them be links, too.

Inserting Rollover Images 5:35

If you think it's neat, cool and/or groovy when a picture changes as you hover your mouse over it, then rollovers are for you! They're quite easy to insert into your layout, and make for a more compelling user experience.

Inserting Audio 8:05

With the broad acceptance of new HTML 5 features, embedding audio into web pages has never been easier. Or more widely supported.

Inserting Video 7:28

With the broad acceptance of new HTML 5 features, embedding video into web pages has never been easier. Or more widely supported. (Yes, I did copy the 'Inserting Audio' text and just change audio to video. So sue me.

Creating CSS Rules 15:00

Don't want to handcode all your CSS rules? Who does?! Using Dreamweaver's CSS Designer window makes the task relatively easy.

Creating & Styling DIVs 13:37

Most web layouts require that you create and style lots of DIVs and Elements. It doesn't have to be difficult, but you must have a plan! Using Dreamweaver, this video will take you through the creation of several DIVs working from a detailed wireframe.

Inserting DIVs 17:58

The wireframe is just as important in this step, as it will serve as a blueprint for inserting all of our boxes. We'll use Dreamweaver to insert DIVs and elements which will eventually contain images, rollovers and text.

Open New Browser Window 9:06

This video will show you two techniques for creating a link that will open a new browser window. In the first, you insert a "target" attribute into the Anchor (link) element. In the second, you'll use Dreamweaver to create a JavaScript behavior that will open a new window at a specific size.

Swap Image Behavior 11:07

Unlike a simple rollover, Dreamweaver's Swap Image behavior (JavaScript) allows you to rollover one image and have another image - in a completely different location in your layout - change to something else. Good stuff.

web fonts

Web Fonts 15:23

No longer do we designers have to use only system fonts in our websites. Do I hear a Hallelujah?! This video will show you how to access free Adobe Edge and Google Fonts web fonts, and easily add them to your site.

jQuery Slideshow

jQuery Slideshow 18:18

No, we won't be learning JavaScript or jQuery. That's a little too big of a nut to crack in this class. But this video will show you how to access amazing resources that will easily allow you to create dynamic, interactive JavaScript content. Such as a slideshow.