Web Design 1

By Mike Amante

Technology Education Educational Technology Software How-To

What's Web Design 1 about?

This podcast features live screencasted lessons in the use of Fireworks and Dreamweaver as part of the Web Design 1 class at New Hartford High School in New Hartford, NY, USA. Skills taught here specific for students enrolled in the class but anyone is free to subscribe and learn how to make great looking web graphics and websites!

Download our free app to listen on your phone

Web Design 1 episodes:

06.02.2017
Site Upload to Web Server via FTP
During the lesson, students learn how to publish their site files so that other people can view them online. In the lesson, students first learn how to to connect to our internal web server and upload their files to it...
05.26.2017
Final Site Details
This lesson overviews the finishing details students need to take to complete their final website. During this lesson, they will learn how to correctly title each page of their site. Next, they will learn how to place the required code...
05.18.2017
Creating Your Site's Rollover Navigation System - Exporting & Placement
In this lesson, students learn to implement their navigation system thought their website. It begins by showing students how to correctly export and then add the necessary hyperlinks to their navigation system to make it functional. Finally, students learn the...
05.16.2017
Creating Your Site's Rollover Navigation System - Creating the Buttons
During this lesson, students start the process of creating the Javascript-powered navigation system for their final website. The lesson begins with a quick explanation of how Javascript rollover buttons work in their design and function. It then gets right into...
05.12.2017
Why & How to Create Forms in Dreamweaver
This lesson starts out with a quick discussion of the reasons for using, the technology behind, and the design concepts related to web-based forms that are commonly found and used on all kinds of websites. This lesson then progresses through...
05.08.2017
Using AP Divs in Dreamweaver
This lesson covers how students can layout elements of their site using AP Divs, the modern web design technology which offers a great deal of flexibility in the lay out of webpages versus using traditional HTML tables and cells. While...
04.26.2017
CSS Layout Techniques for Text & Graphics
This lesson demonstrates some of the general techniques for setting up and applying CSS within Dreamweaver for better control layout of the text as well as graphics within a website. In the lesson, students learn how to set up an...
04.06.2017
Site Setup & Export Slices from Fireworks
This lesson begins by overviewing the preparation of the local root folder for the student's final site including the naming conventions and setup of its enclosed images directories. Next, students are walked through the process export images from the home...
04.06.2017
Introduction to Slicing in Fireworks
This lesson discusses how to use the slicing features of Fireworks to break a large graphic file into smaller pieces that will allow for quicker downloading and assembly as part of a web page layout. This lesson will pick up...
04.04.2017
Intro to Using Layout Tables in Dreamweaver - Part 2
This lesson concludes from our last class where students first started working with a tracing image along with a layout table and layout cells to layout a webpage. This lesson review the use of layout cells to layout images and...
03.31.2017
Intro to Using Layout Tables in Dreamweaver - Part 1
This lesson from our textbook teaches students how to use of a layout table and cells in Dreamweaver to create a basic web page that will remain fixed in place when viewed with a browser. The lesson starts with how...
03.31.2017
Inserting Graphics in an HTML Text Layout
In this lesson from our text, students learn how about techniques for working with graphics inline within an HTML text based layout. Student also learn about some of the options for incorporating basic Flash elements into a page.
03.29.2017
Introduction to HTML Text Formatting & Introduction to CSS Text Styling
This lesson covers the general techniques for working with HTML text within Dreamweaver. Using an exercise from our textbook, students are first introduced to basic concepts for structuring text using paragraphs, headings, and list. In doing so, they start to...
03.27.2017
Site Setup in Dreamweaver
This lesson orients students to the process and purpose of setting up a website for local authoring in Dreamweaver. After explaining the basic interface, students go through the site set up process by creating a training site for course lessons...
03.27.2017
Web Server Basics
This lesson discusses in general, simple terms how a web server works as well as shares the common terms & technologies associated with web pages, web sites, and servers. The general overview is provided since it will serve as a...
03.21.2017
Creating Curved Text & More Vector Image Masking Techniques
In the first part of this lesson, students learn how to add vector text to a circle or curved path in Fireworks. This type of text is common for logos, banner graphics, and similar web page elements. Students learn how...
03.07.2017
Using Gradients, Patterns, & Filters in Fireworks
During this lesson, students learn how to apply gradients and patterns to their vector graphics to give them a custom look as well as more depth and realism. They also learn how these can be saved as custom Styles so...
02.27.2017
Using the Pen Tool
This lesson demonstrates use of the Pen tool in Fireworks for creating irregularly shaped vector objects. Use of this tool will be necessary for many drawing tasks in the web design process, especially for students who have an immediate need...
02.27.2017
Using Combine Path Commands in Fireworks
During this quick lesson, students learn some new skills using the vector drawing tools that they will need to apply in their MP3 skin project. First, they also learn how to use and manipulate Smart Shapes in their vector drawing...
02.08.2017
Fine Tune Bitmap Editing
During this lesson, students receive brief instruction on image enhancement techniques to retouch images. Concepts such as how to lighten and darken areas of a photograph using the Burn and Dodge tools as well use of the Blur, Sharpen, Smudge,...
02.08.2017
Using the Rubber Stamp Tool
In this lesson, students learn to use the Rubber Stamp tool to clone pixels in one area of a bitmap image and then paint pixels back into another part of a bitmap image
02.06.2017
Using the Lasso Tool & Intro to Layers
The skills covered in this lesson will be used by students when performing detailed bitmap editing the Fireworks program. In this lesson, students first learn how the Lasso tool can used for performing irregular selections in a bitmap image. Students...
02.06.2017
Using the Magic Wand Tool
This lesson introduces some of the tools used when performing basic bitmap editing the Fireworks program. Students first learn how the Magic Wand tool is used to select solid areas of color in bitmap image. They are introduced to how...
02.02.2017
Using the Marquee Tool
During this lesson, students learn how to select various parts of bitmap images using the Marquee tools. After exploring the using the oval Marquee tools for making circular selection, students also learn to use the rectangular Marquee tools for performing...
02.02.2017
Viewing & Navigating Bitmap Graphics in Fireworks
This lesson orients students to the Fireworks interface including the default PNG image format tat is used by the program. They learn about the most common elements of the Fireworks workspace and how to use them effectively for viewing and...
01.31.2017
Bitmap vs. Vector
In this opening lesson to the course, students are led in a discussion about the two main types of graphics formats that are used to create graphics on a computer. This lesson demonstrates a comparison of the bitmap versus vector...

What's Web Design 1 about?

Download our free app to listen on your phone

Web Design 1 episodes:

Site Upload to Web Server via FTP

Final Site Details

Creating Your Site's Rollover Navigation System - Exporting & Placement

Creating Your Site's Rollover Navigation System - Creating the Buttons

Why & How to Create Forms in Dreamweaver

Using AP Divs in Dreamweaver

CSS Layout Techniques for Text & Graphics

Site Setup & Export Slices from Fireworks

Introduction to Slicing in Fireworks

Intro to Using Layout Tables in Dreamweaver - Part 2

Intro to Using Layout Tables in Dreamweaver - Part 1

Inserting Graphics in an HTML Text Layout

Introduction to HTML Text Formatting & Introduction to CSS Text Styling

Site Setup in Dreamweaver

Web Server Basics

Creating Curved Text & More Vector Image Masking Techniques

Using Gradients, Patterns, & Filters in Fireworks

Using the Pen Tool

Using Combine Path Commands in Fireworks

Fine Tune Bitmap Editing

Using the Rubber Stamp Tool

Using the Lasso Tool & Intro to Layers

Using the Magic Wand Tool

Using the Marquee Tool

Viewing & Navigating Bitmap Graphics in Fireworks

Bitmap vs. Vector