Candyce Mairs

What is a Wireframe?

Slide Duration:

Table of Contents

Section 1: Becoming Familiar with Fireworks

Exploring the Fireworks: Web Workflow Project

Getting to Know the Fireworks Interface

5m 26s

Fireworks CS6 New Features

5m 20s

Section 2: Working with Web Pages

Why Do I Need an HTML Editor?

7m 1s

What Does CSS Do?

2m 49s

Defining a Local Site in Dreamweaver

5m 56s

Becoming Familiar With the Dreamweaver Interface

7m 54s

Section 3: Planning the Page Layout

What is a Wireframe?

Web Typography

4m 46s

Section 4: It all begins with Slicing

What is Slicing?

5m 4s

Learning About The Slice Tool

5m 52s

Slicing Techniques

6m 1s

Section 5: Optimizing Images

What is Optimization?

Using Image Formats for the Web

6m 10s

Exploring How to Optimize an Image

8m 49s

Exporting an Optimized Image

3m 59s

Section 6: Preparing for Export

Preparing a PNG File for Export

8m 28s

Working with the Common Library

13m 13s

Adding Slices to the Design

5m 54s

Optimizing Design Slices

8m 36s

Setting up the Navigation Bar

4m 59s

Section 7: The Export Process

Exporting the PNG File

6m 2s

Correcting the Export Issues

8m 6s

Fixing Final Code

7m 58s

Fine Tuning the Layout

6m 54s

Adding Drop Shadows using CSS

8m 32s

Adding Background Gradients using CSS

7m 56s

Working with Curved Corners

Browser Support for CSS3 Properties

4m 7s

Section 8: Working with the Pages Panel

Exploring the Pages Panel

4m 24s

Creating a Master Page

5m 31s

Creating Pages from a Master Page

7m 13s

Exporting Individual Pages from a PNG File

5m 2s

Section 9: Adding a Popup Menu

What is a Popup Menu?

3m 24s

Creating a Popup Menu

8m 22s

Adding Additional Popup Menus

5m 19s

Section 10: Exporting Popup Menus

Exporting Popup Menus

4m 29s

Exporting as HTML and Images

6m 12s

Copying the Coding Part 1

6m 59s

Copying the Coding Part 2

6m 47s

Correcting the Image Location

2m 8s

Adjusting and Previewing Our Final File

7m 11s

This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Fireworks: Web Workflow

Fireworks: Web Workflow What is a Wireframe?

Section 3: Planning the Page Layout: Lecture 1 | 6:00 min

Lecture Description

Next Lecture

Previous Lecture

Discussion
Study Guides
Table of Contents

Please login to ask a question and view discussion.

Start Learning Now

Our free lessons will get you started (Adobe Flash^® required).
Get immediate access to our entire library.

Membership Overview

Unlimited access to our entire library of courses.
Search and jump to exactly what you want to learn.
*Ask questions and get answers from the community and our teachers!
Practice questions with step-by-step solutions.
Download lesson files for programming and software training practice.
Track your course viewing progress.
Download lecture slides for taking notes.
Learn at your own pace... anytime, anywhere!

What is a Wireframe?

Let’s take a look at the design we will be working with
Then we will look at this same design from an HTML standpoint
We will look at it in terms of boxes the way HTML does

This is planning out how the boxes will be set up in CSS, we have to plan that out so we know how to slice the design
We will take the design & convert it to a wireframe
This wireframe will allow us to look at our design from an HTML standpoint

Fireworks CS6: Web Workflow

Section 1: Becoming Familiar with Fireworks
	Exploring the Fireworks: Web Workflow Project	2:00
	Getting to Know the Fireworks Interface	5:26
	Fireworks CS6 New Features	5:20
Section 2: Working with Web Pages
	Why Do I Need an HTML Editor?	7:01
	What Does CSS Do?	2:49
	Defining a Local Site in Dreamweaver	5:56
	Becoming Familiar With the Dreamweaver Interface	7:54
Section 3: Planning the Page Layout
	What is a Wireframe?	6:00
	Web Typography	4:46
Section 4: It all begins with Slicing
	What is Slicing?	5:04
	Learning About The Slice Tool	5:52
	Slicing Techniques	6:01
Section 5: Optimizing Images
	What is Optimization?	7:00
	Using Image Formats for the Web	6:10
	Exploring How to Optimize an Image	8:49
	Exporting an Optimized Image	3:59
Section 6: Preparing for Export
	Preparing a PNG File for Export	8:28
	Working with the Common Library	13:13
	Adding Slices to the Design	5:54
	Optimizing Design Slices	8:36
	Setting up the Navigation Bar	4:59
Section 7: The Export Process
	Exporting the PNG File	6:02
	Correcting the Export Issues	8:06
	Fixing Final Code	7:58
	Fine Tuning the Layout	6:54
	Adding Drop Shadows using CSS	8:32
	Adding Background Gradients using CSS	7:56
	Working with Curved Corners	5:00
	Browser Support for CSS3 Properties	4:07
Section 8: Working with the Pages Panel
	Exploring the Pages Panel	4:24
	Creating a Master Page	5:31
	Creating Pages from a Master Page	7:13
	Exporting Individual Pages from a PNG File	5:02
Section 9: Adding a Popup Menu
	What is a Popup Menu?	3:24
	Creating a Popup Menu	8:22
	Adding Additional Popup Menus	5:19
Section 10: Exporting Popup Menus
	Exporting Popup Menus	4:29
	Exporting as HTML and Images	6:12
	Copying the Coding Part 1	6:59
	Copying the Coding Part 2	6:47
	Correcting the Image Location	2:08
	Adjusting and Previewing Our Final File	7:11

Fireworks: Web Workflow What is a Wireframe?

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Discussion

Study Guides

Table of Contents

Start Learning Now

Membership Overview

What is a Wireframe?

Fireworks CS6: Web Workflow

Start Learning Now

Membership Overview

Fireworks: Web Workflow What is a Wireframe?

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Discussion

Study Guides

Table of Contents

Start Learning Now

Membership Overview

What is a Wireframe?

Fireworks CS6: Web Workflow

Available 24/7. Unlimited Access to Our Entire Library.

Searchable Lessons

Get Answers & Community Support

Downloadable Lecture Notes

Study Guides, Worksheets and Extra Example Lessons

Start Learning Now

Membership Overview