Cover image of Web Design 1
(7)
Education
Technology
How To

Web Design 1

Updated 4 days ago

Education
Technology
How To
Read more

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!

Read more

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!

iTunes Ratings

7 Ratings
Average Ratings
7
0
0
0
0

High quality education !

By Alaghu - Apr 16 2010
Read more
Helps us understand the concepts and the tool ( fireworks). Appreciate you sharing the knowledge through this podcast.

BEST ON THE WEB

By MRRADON - Sep 03 2009
Read more
Thank you, I'm taking college classes that can't match this Podcast ! I hope your students appreciate the work you do.

iTunes Ratings

7 Ratings
Average Ratings
7
0
0
0
0

High quality education !

By Alaghu - Apr 16 2010
Read more
Helps us understand the concepts and the tool ( fireworks). Appreciate you sharing the knowledge through this podcast.

BEST ON THE WEB

By MRRADON - Sep 03 2009
Read more
Thank you, I'm taking college classes that can't match this Podcast ! I hope your students appreciate the work you do.

Listen to:

Cover image of Web Design 1

Web Design 1

Updated 4 days ago

Read more

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!

CSS Layout Techniques for Text & Graphics

Podcast cover
Read more
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 external style sheet called mint.css so they can create and apply CSS for text placement as well graphics layout throughout their sites as needed. The lesson concludes with various techniques they can use how to create, duplicate as well as edit existing styles as they work on the development of their final site.

Apr 26 2017

52mins

Play

Introduction to HTML Text Formatting & Introduction to CSS Text Styling

Podcast cover
Read more
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 learn the relationship between the design view and code side of a web page. Later in the lesson, they are introduced to how CSS can be applied and edited using Dreamweaver CS3 for styling text as well.

Mar 29 2017

1hr 9mins

Play

Site Setup in Dreamweaver

Podcast cover
Read more
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 from our textbook.

Mar 27 2017

14mins

Play

Web Server Basics

Podcast cover
Read more
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 primer on the premise of how Dreamweaver functions and operates in the web site development process.

Mar 27 2017

17mins

Play

Creating Curved Text & More Vector Image Masking Techniques

Podcast cover
Read more
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 attach text to various paths and then manipulate that text using the Property inspector as well as the Text menu commands of Fireworks. In the second part of this lesson, students first review the basic methods of masking images with a Fireworks project such as using Paste Inside command to mask an image inside of a vector shape such as a circle. They then learn how to make a vector graphic mask using a gradient vector shape and the Group as Mask command. In the final part of the lesson, students have a chance to put all of these techniques into practice and see how they can be used together to create a simple logo using both curved text and vector masked imagery.

Mar 21 2017

32mins

Play

Using the Magic Wand Tool

Podcast cover
Read more
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 to adjust how hue, saturation, and lightness can be applied to manipulate a bitmap image.

Feb 06 2017

17mins

Play

Site Upload to Web Server via FTP

Podcast cover
Read more
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 using FTP via the Files panel built-into Dreamweaver. They then learn how to test their final site in the browser, correct errors or updates they need to make, and then upload those changes to bring their site to completion.

Jun 02 2017

21mins

Play

Final Site Details

Podcast cover
Read more
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 so that their favicon file will load for each page of their site. Finally, they learn how to create and place text navigation links, a contact link, and copyright notice at the bottom of each of their pages.

May 26 2017

49mins

Play

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

Podcast cover
Read more
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 best practices for drag and drop placement of the completed navigation system into each page of their website.

May 18 2017

26mins

Play

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

Podcast cover
Read more
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 the process of showing them how to create their own rollover buttons using their navbar’s source images within Fireworks’ its Button editor. In our next lesson, they will learn how to export to an HTML document that contains all of the images and Javascript of their completed navbar as well as how to insert this content into each page of their website

May 16 2017

26mins

Play

Site Upload to Web Server via FTP

Podcast cover
Read more
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 using FTP via the Files panel built-into Dreamweaver. They then learn how to test their final site in the browser, correct errors or updates they need to make, and then upload those changes to bring their site to completion.

Jun 02 2017

21mins

Play

Final Site Details

Podcast cover
Read more
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 so that their favicon file will load for each page of their site. Finally, they learn how to create and place text navigation links, a contact link, and copyright notice at the bottom of each of their pages.

May 26 2017

49mins

Play

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

Podcast cover
Read more
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 best practices for drag and drop placement of the completed navigation system into each page of their website.

May 18 2017

26mins

Play

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

Podcast cover
Read more
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 the process of showing them how to create their own rollover buttons using their navbar’s source images within Fireworks’ its Button editor. In our next lesson, they will learn how to export to an HTML document that contains all of the images and Javascript of their completed navbar as well as how to insert this content into each page of their website

May 16 2017

26mins

Play

Why & How to Create Forms in Dreamweaver

Podcast cover
Read more
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 the tools & techniques to be applied in Dreamweaver to create the contact page and form that will be part of their final website.

May 12 2017

56mins

Play

Using AP Divs in Dreamweaver

Podcast cover
Read more
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 not all websites require AP Divs for image or even text placement, some students will need to employ these in order to lay out their sites as they have been designed.

May 08 2017

22mins

Play

CSS Layout Techniques for Text & Graphics

Podcast cover
Read more
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 external style sheet called mint.css so they can create and apply CSS for text placement as well graphics layout throughout their sites as needed. The lesson concludes with various techniques they can use how to create, duplicate as well as edit existing styles as they work on the development of their final site.

Apr 26 2017

52mins

Play

Site Setup & Export Slices from Fireworks

Podcast cover
Read more
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 page layout as separate slices. This lesson leads into our next lesson where they will reassemble the graphics into an HTML file using Dreamweaver.

Apr 06 2017

9mins

Play

Introduction to Slicing in Fireworks

Podcast cover
Read more
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 in the next lesson where students learn set up their final root folder, optimize and then export images for reassembly in Dreamweaver.

Apr 06 2017

18mins

Play

Intro to Using Layout Tables in Dreamweaver - Part 2

Podcast cover
Read more
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 text. It also reviews how to create a CSS style for the included. The lesson concludes with completion of the example web page that will remain fixed in place when viewed with a browser.

Apr 04 2017

14mins

Play

Intro to Using Layout Tables in Dreamweaver - Part 1

Podcast cover
Read more
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 tracing images can aid in the web page layout process as well as the purpose and advantages of slices to create effective, fast loading web pages. In this lesson which will conclude in our next class, students are show how to create a layout table and use layout cells on top of the tracing image to start laying out the images and text of the example site.

Mar 31 2017

29mins

Play

Inserting Graphics in an HTML Text Layout

Podcast cover
Read more
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.

Mar 31 2017

43mins

Play

Introduction to HTML Text Formatting & Introduction to CSS Text Styling

Podcast cover
Read more
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 learn the relationship between the design view and code side of a web page. Later in the lesson, they are introduced to how CSS can be applied and edited using Dreamweaver CS3 for styling text as well.

Mar 29 2017

1hr 9mins

Play

Site Setup in Dreamweaver

Podcast cover
Read more
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 from our textbook.

Mar 27 2017

14mins

Play

Web Server Basics

Podcast cover
Read more
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 primer on the premise of how Dreamweaver functions and operates in the web site development process.

Mar 27 2017

17mins

Play

Creating Curved Text & More Vector Image Masking Techniques

Podcast cover
Read more
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 attach text to various paths and then manipulate that text using the Property inspector as well as the Text menu commands of Fireworks. In the second part of this lesson, students first review the basic methods of masking images with a Fireworks project such as using Paste Inside command to mask an image inside of a vector shape such as a circle. They then learn how to make a vector graphic mask using a gradient vector shape and the Group as Mask command. In the final part of the lesson, students have a chance to put all of these techniques into practice and see how they can be used together to create a simple logo using both curved text and vector masked imagery.

Mar 21 2017

32mins

Play

Using Gradients, Patterns, & Filters in Fireworks

Podcast cover
Read more
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 they can be used over and over again easily. Finally, they learn about Filters such as drop shadows that can give their vector drawings more depth and a polished look rather than opaque and flat in their rough drawn format.

Mar 07 2017

15mins

Play

Using the Pen Tool

Podcast cover
Read more
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 to create complex shapes as part of their current MP3 player skin project.

Feb 27 2017

16mins

Play

Using Combine Path Commands in Fireworks

Podcast cover
Read more
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 projects. Second and perhaps more importantly, students learn how to use the Modify > Combine commands to create complex shapes from simple primitive vector objects.

Feb 27 2017

22mins

Play

Fine Tune Bitmap Editing

Podcast cover
Read more
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, and Rubber Stamp tools are discussed.

Feb 08 2017

51mins

Play