Step by Step Web Design Course | | SiteBuilder.wsSiteBuilder.ws

[button_link url="http://www.sitebuilder.ws/do-it-yourself-website-video-training-course" style="impactBtn"]UPDATE: New Video Training Course Released[/button_link]

Your Ticket to Web Design Guru Using Dreamweaver and Fireworks

You will learn everything you need to know to build the incredible website below using Fireworks and Dreamweaver.

You will receive:

16 Flash Video Tutorials (Over 7 Hours of Training)
Complete source files of EXACTLY what I build in the movie
Working website with Dreamweaver Template and Images
Technical Support
Time and money saving tips
Secret web design tips throughout the process
Site Correction and Updates

This is the website that you will build using Dreamweaver and Fireworks during the Step-by-Step Web Design Course. There will be a total of 7 pages, including a customized homepage layout.

Table of Contents of Web Design Course

View The Slide Show Outline as a PDF

Introduction
- About this Course
  - The goals is to build a complete website from start to finish using Dreamweaver and Fireworks
  - The style is live training
  - You will be taught concepts, techniques and tips while working toward a final project
- What You Need
  - Computer
  - Web Hosting Environment for LIVE website (Ask about our special offer) – If you don’t have web hosting you can build the website on your local computer
  - Dreamweaver & Fireworks software (If you don’t own the software you can download the 30 day free trial)
  - Patience, Perseverance, Purpose and Practice
- Considerations
  - What are you building? Why are you building it? Who is the audience?
  - Site expansion? Search engine friendly/optimized? Shopping cart? Technologies? What is the project outcome?
  - Colors, layout 2 column, 3 column, photos, specials needs
- Layout Sketches
  - Sketch on paper
  - Cut and paste site elements together
  - View sites you like for inspiration
Website Project Concept
- Project Outcome
  - Completed fully functionally published website
  - 2 column layout
  - Colorscheme will be based on reds/grays
  - Customized homepage layout
  - Left navigation with nice background image
  - Contemporary rounded corners look and feel
- Photos
  - Gather photos for use in header and initial homepage layout
  - Photos for interior pages
- Inspiration
  - We’ll use our existing template to get inspired
  - View how we might use other source
Getting Started in Fireworks
- Overview of Fireworks Tools (General overview of Fireworks, common tools, and shortcuts)
- Setup Workspace in Fireworks (Setting up the new document, using guides, setting layout dimensions)
- Create Basic Website Layout in Fireworks(Creating the overall layout, insert base shapes, saving your work)
Detailing the Design in Fireworks
- Adding Texture in Fireworks
  - Creating Curves
  - Using Vector Shapes
  - Adding Gradients
  - Using Drop Shadows
  - Building the Layout
- Completing the General Layout in Fireworks
  - Building layout graphics
  - Using colors
  - Managing your layers
Publishing a Site in Dreamweaver
- Local Site in Dreamweaver
  - Site Name
  - ocal root folder
  - Options
- Remote Site Access in Dreamweaver
  - FTP
  - FTP Host
  - Host Directory
  - Login
  - Password
  - Testing
- Other Settings in Dreamweaver
  - Cloaking
  - Overview
Exporting the Design from Fireworks
- Completing the Layout in Fireworks
  - Grouping our elements
  - Managing and naming our layers
  - Adding a background
  - Finalizing the website border
- Slicing the Layout
  - Using the slice tool
  - Creating the slices for export
  - Setting the optimization
  - Export the HTML and images for Dreamweaver
Setting Up the Page in Dreamweaver
- HTML Setup
  - Creating a new page
  - Inserting the table based on the Fireworks layout
  - Saving the page
- CSS Setup
  - Creating the CSS file
  - Attaching the CSS to our HTML page
  - Insert CSS styles
  - Applying the CSS to our page elements
Building the Navigation in Fireworks
- Left Navigation
  - Create left sidebar base gradient
  - Determine buttons
  - Prepare the background image
  - Create a button
  - Test button effects
  - Duplicate buttons
- Export Images for Dreamweaver
  - Copy left nav to new file
  - Export the images
  - Insert Fireworks HTML into Dreamweaver
Build the Dreamweaver Template
- Left Navigation Review / Completion
  - Separate Fireworks file for easy update
  - Inserted Fireworks HTML (table/buttons/JS code)
  - Set the main body widths (leftnav and body)
- Create Dreamweaver Template
  - Save as .dwt file
  - Explain Editable vs. Non-Editable Regions
  - Determine template regions
  - Insert editable regions
  - Create HTML page based on template to see working example
Create Header Graphic in Fireworks
- Prepare our Images
  - Insert photos for use
  - Access header area of design
  - Clip the background from image
  - Add blending, gradient and background imagery
- Update Header Graphic for Dreamweaver
  - Reconfigure header image with website border
  - Export header graphic
  - View changes in Template
  - Verify changes in HTML Pages
Using CSS in Dreamweaver
- Main Text Styles
  - Using Styles applied to Tags
  - Insert CSS for main text, H1, H2 tags
  - Test styles
- SideBar Styles
  - Using Styles applied to Classes
  - Insert CSS for left sidebar table
  - Test styles
- Footer Styles
  - Using Styles applied to Ids
  - Insert CSS for footer
  - Test styles
Create HTML Pages
- Create HTML Page based
  - Create page using template
  - Create page from existing pages
  - Naming conventions
- Update Navigation Links
  - Create navigation links in Dreamweaver Template
  - Update HTML pages
  - Test links
- Creating Page Specific Sidebar Content
  - Considerations
  - Using the SideBar editable region
  - Adding links
Building a Custom Homepage
- Preparing Images in Fireworks
  - Building a unique homepage layout
  - Guiding our website visitor
  - Using techniques we’ve learned
  - Slicing the images
  - Exporting for Dreamweaver
- Inserting Images with Dreamweaver
  - Insert photos
  - Adding text
  - Controlling our text with CSS
  - Adding Links
- Left Navigation Corrections
  - Fixing our layout dimension issues
  - Learning how to bounce back from miscalculations
Creating Images for HTML Pages
- Preparing Images in Fireworks
  - Considering size
  - Deciding on a style
  - Optimizing images for the web
  - Exporting images to Dreamweaver
- Inserting Images into Webpages
  - Insert photos
  - Setting your padding
  - Using alignment
Creating a Simple Logo in Fireworks
- Creating a Simple Logo
  - Create a appealing shape
  - Using colors, gradients and drop shadows
  - Adding Gradients
  - Using Drop Shadows
- Stylizing Text
  - Adding Text
  - Adding colors, gradients and drop shadows
- Exporting into Dreamweaver
  - Export header/logo for Dreamweaver
  - Creating a stand alone logo for use on websites
Create SEF Pages
- Create Search Engine Friendly Pages
  - Organizing your content
  - Updating the Title tag
  - Adding H1, H2 tags
  - Modifying Meta Content (keywords, description)
  - Writing keyword rich copy
  - Create keyword links
  - Using Alt tags with your images
- Submit Your Website
  - Check out our “MUST DO” links to get your site found in the web on the SiteBuilder Members page
Publish and Modify Live Website
- Publish Website Using Dreamweaver
  - Publishing (Putting) our content in Dreamweaver
  - Consider SFTP
  - Don’t publish your source files
- Modifying Your Live Website
  - How to make updates to html pages
  - How to publish our changes to the web
  - Verify our changes

If there is anything you want to see that I haven’t covered in the list please send me a note!

During this video I will be pointing out ways to save time, save money and build high quality, fast loading sites that will make your momma (and clients) proud!

You’re gonna love this!!! I promise.
The 16 videos are Available for Download NOW!
Your order will be processed within 24 hours, then you will receive an email for download.
These videos are VERY LARGE and are available on DVD.