FREE WEB DESIGN VIDEO TUTORIALS

Free web design video tutorials

Welcome to our free web design video tutorial library. Here you will find a range of free web design video tutorials targeted towards all levels of users. Our free web design video tutorials range from basic tools through to techniques and effects.

Learn how easy Dreamweaver, Fireworks, Flash & Illustrator are to use with our free video tutorials. We take you through step by step from first opening the programs to complete web page layouts, tips, tricks and techniques so you become productive faster.

Whether you are wanting to learn as a hobby or training to become a web designer, our free web design video tutorials will help you learn those vital steps.

Free Dreamweaver Video Tutorials

» Define Your Site

• Setting up a new site
• Setting up remote info
• Setting up the testing server
• Setting up the FTP upload accounts

» Making New Pages

• Make a new HTML page
• Setup guides and rulers
• Navigate through the page elements

» Files Menu

• Locate and open the files palette
• Working in local view
• Working with assets
• Working with snippets

» Preview in Browser

• Define which to browser to use
• Setting multiple browsers
• Preview your page in a browser

» Tracing Images

• Locate and open the tracing image button
• Set your tracing image
• Use the tracing image as a reference for layout

» List Menus

• Locate and open the list menu item
• Insert list menu into page
• Styling list menu with CSS
  

» Jump Menus

• Locate and open the jump menu item
• Insert jump menu into page
• Styling jump menu with CSS
  

» Adding Flash Content

• Add flash and style with Css

» Simple Contact Form

• Adding form elements
• Adding text boxes
• Styling buttons with CSS

» Flash Buttons

• Adding flash buttons
• Setting links in buttons

» Adding Images

• Located and open the add image button
• Add an image from a location on your computer
• Defining ALT tags

» Working with Tables

• Located and open the tables button
• Working with tables
• Splitting and adding cells
• Styling with CSS

» Working with Layers

• Located and open the layers button
• Working with layers
• Adding multiple layers
• Tables and layers

» Layer Visibility

• Located and open the show hide layers button
• Adding a show hide behaviour
• Working with Z-index
• Clipping layers

» Animating Layers

• Adding layers to timeline
• Animating along timelines
• Animating layers

» Adding Rollovers

• Locate and open the rollover menu
• Adding a rollover
• Adding a fireworks rollover

» Image Navigation Menu

• Adding an image based navigation system

» Ads by Layers

• Create a content overlay ad
• Use behaviours to show hide layers

» Working with CSS

• Build a layout with css

» Dreamweaver Templates

• Create a new template page
• Assign template elements
• Saving templates

» Editing Templates

• Edit a premade template
• Save and update all template pages

» Using Snippets

• Using the snippet menu to save code
• Insert code from snippet into a page

» Rollover Status Bar Message

• Using behaviours
• Add a rollover and rollout behaviour on a flash object
• Set stauts bar message for each behaviour

» Validate Forms

• Using behaviours
• Add a validate form behaviour

» Check for Plugins

• Using behaviours
• Check for media plugins
• Redirect user on success or failure
• Display correct page

» Pop Up Windows

• Make a pop up window that displays on page load

» Control Flash Movies

• Using behaviours to control flash content