It all starts here. If you lose the handle on where your files are located, you're doomed.
If you don't follow web naming conventions, you're doomed.
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.
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!
Behold the basic concepts of HTML code. Watch. Learn. And gird your loins. For you will soon be writing code!
Watch this video, then handcode HTML to impress your friends and family! You shall be godlike in their eyes.
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.
Learn how to create a GIF animation in Photoshop. This video covers the Frame Animation Timeline and Keyframes.
Better than the original! You learn how to generate tweens and save your animation for the web in this video.
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.
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!
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?
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.
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).
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.
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.
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!
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.
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 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.
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.
With the broad acceptance of new HTML 5 features, embedding audio into web pages has never been easier. Or more widely supported.
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.
Don't want to handcode all your CSS rules? Who does?! Using Dreamweaver's CSS Designer window makes the task relatively easy.
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.
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.
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.
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.
Do you wish that you could make only one small part of an image be a link or trigger a behavior? Well, hotspots are the hot ticket to fulfill your dream.
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 Google Fonts web fonts and easily add them to your site.
What?! You have write JavaScript?! No, no. Don't be silly. Well maybe just a tiny bit. And it's really easy. Or you can copy and paste. But here's the good news: You will be able to click on a button and make your computer belch! Now isn't that worth a little JavaScript?