Free Sample Lessons

Video2Brain CSS Conversion Free Sample Lessons

What is a Wireframe?

This lesson will introduce you to the concept of a wireframe. There is no need to manually create
a wireframe from designs when using Adobe Fireworks, but understanding the idea of a wireframe
will help understand how Fireworks looks at a web page when creating the code for web designs
during the graphic design to HTML and CSS conversion process.

Creating a Pop-Up Menu

See how easy it is to create a pop-up menu with Adobe Fireworks. Learn how to create a pop-up
menu using the Fireworks interface for the Destinations link in the navigation bar of a web page.

Preparing a PNG File for Export

Graphic design files can become laden with extra layers, and those extra layers can prevent
the conversion process from working correctly. In this lesson you’ll see how to set up your
PNG file to avoid issues while converting from a graphic design into a web page.

Exporting the PNG File

Positioning with CSS

Video2Brain CSS Positioning Free Sample Lessons

Positioning with CSS


HTML tags define page content in the browser. Before you add CSS properties to a div tag,
it is necessary to assign an ID to the div tag to tell the browser which div tag you wish to
change. Once an ID is added to a div tag, CSS properties can be added for that div. In this lesson
we will explore how to assign CSS properties to a div tag.

Exploring the Fireworks Web Workflow Project


Adobe Fireworks CS6 enables you to add additional features to the HTML and CSS files created
when exporting a graphic design. In this lesson we’ll take a look at the graphic design that
will be used in this course and explore some of the features that will be added during
the graphic design to HTML and CSS web page transition process.

Exploring CSS Positioning Trailer


CSS enables you to control the look and layout of a web page much more precisely than with
HTML alone, but it can be time-consuming to learn. In this innovative workshop, Adobe Certified
Expert Candyce Mairs makes it quick and easy, walking you through the process of adding
content to a web page and using CSS to position that content. You will learn CSS positioning
concepts like the CSS “box model,” “floats,” and “clears,” and gain a deeper understanding
of how HTML and CSS work together to create the look of your web page. By speaking the
same language as the browser, you will learn to work with the browser to place content
accurately and easily.

 Creating a CSS Rule for the Column


It will be much easier to see where the left div is located on the page if we create a CSS
style rule for the div and add both a border and a width property to it. In this video we
begin to build the style rules for the left div in order to control both the box and the
content within the box.

Understanding the Float Property


This video demonstrates the float property and the two values available for this property
in CSS. We will use a web page with three divs to play with the float property to demonstrate
the CSS float property before we apply it to our web page for this course.

Free Dreamweaver Training at Educator.com

Learn Adobe Dreamweaver the Easy Way!

“What is Dreamweaver?” | Dreamweaver CS6

Adobe Dreamweaver can speed up your website development substantially due to
the many features built into the program. Get an overview of the Dreamweaver
interface and preview the product in this free sample lesson at Educator.com.

“Creating Page Designs” | Dreamweaver CS6

The first step in building a website is to create a page design in a graphics editor
such as Adobe Photoshop or Fireworks.View these 2 Adobe products and learn
more about the page design process in this lesson at Educator.com.

“Using Firebug for CSS / JS” | Dreamweaver CS6

Modern browsers offer many built-in tools to assist you with web development. There
are also many free browser plug-ins that are available that can be installed
separately. Learn more about the Firebug Firefox extension and view how it can
assist you when working in CSS or JavaScript on your web pages.

Get more free samples on YouTube or learn more about this course!