O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Website Design: Extreme Website Makeover

Video Description

These video tutorials equip you with the skills necessary to turn an ordinary website into one that's content-rich using popular web design and development tools: Dreamweaver, Fireworks, Flash, Contribute, Photoshop, and Illustrator. You'll be amazed at how easy it is to combine these programs interchangeably. John shares his expertise to help you understand how to ensure compatibility across multiple browsers and platforms.

Table of Contents

  1. Chapter 1: Introduction & Project Background
    1. INTRODUCTION 00:01:42
    2. Project File Overview 00:01:32
    3. Identifying Ways to Improve a Website 00:03:52
    4. Previewing the Finished Website 00:03:03
  2. Chapter 2: Creating a Company Logo with Illustrator®
    1. INTRODUCTION 00:00:16
    2. Live Trace & the Tracing Options Dialog Box 00:05:01
    3. Adjusting Tracing Presets, Mode & Threshold 00:03:29
    4. Adjusting the Trace Settings 00:03:23
    5. Converting a Tracing Object into Paths 00:03:03
    6. Tracing Strokes & Changing the View 00:03:39
    7. Using Live Paint to Fill an Area with Color 00:06:02
  3. Chapter 3: Website Layout Using Photoshop®
    1. INTRODUCTION 00:00:17
    2. Preparing a Web Page Mock-up in Photoshop 00:03:41
    3. Creating Mock-up Navigation Buttons 00:08:31
    4. Managing Assets & Working with Layer Groups 00:03:31
    5. Working with Rasterized Illustrator® Files 00:05:32
    6. Importing & Working with Smart Objects 00:04:20
    7. Working with Text 00:08:20
    8. Adding Buttons to the Layout 00:07:48
    9. Using Blend Modes to Add Graphic Highlights 00:04:21
    10. Tidying Up Photoshop® & Saving Your Project 00:02:35
  4. Chapter 4: Making Slices with Fireworks®
    1. INTRODUCTION 00:00:19
    2. Altering Some Design Issues in Photoshop 00:04:11
    3. Opening a Photoshop File in Fireworks 00:04:01
    4. Using the Slice Tool 00:03:54
    5. Making Slices with the Selection Tool 00:02:54
    6. Exporting from Fireworks into Dreamweaver® 00:06:35
    7. Adding More Slices to the Web Page 00:07:15
    8. Renaming the Slices 00:06:11
    9. Setting Up the HTML File for Export 00:02:51
    10. Looking at the Images & Deleting Unused Files 00:02:10
    11. Optimizing Images with the Optimize Palette 00:03:29
    12. Doing a Final Clean-up Pass 00:03:01
  5. Chapter 5: Creating a Dreamweaver® Site
    1. INTRODUCTION 00:00:27
    2. Setting Up the Site Definition 00:03:44
    3. New Document & Preview in Browser Preferences 00:02:32
    4. Creating a Tracing Image 00:03:16
    5. Editing a Layout in Fireworks® 00:02:40
    6. Choosing Background Color & Alignment 00:02:29
    7. Creating Multiple Pages Using a Template 00:04:04
    8. Adding Content to the Pages 00:06:59
    9. Modifying a Template in Expanded Mode 00:01:53
    10. Linking Buttons to Pages 00:02:09
    11. Saving & Updating Template-Based Files 00:01:48
  6. Chapter 6: Cascading Style Sheets
    1. INTRODUCTION 00:00:16
    2. Introducing CSS Styles 00:04:45
    3. Creating & Applying a New Class Style 00:03:38
    4. Creating & Applying New Tag Styles 00:05:33
    5. Removing, Finding & Replacing Styles 00:04:50
    6. Duplicating, Moving & Modifying Styles 00:05:53
    7. Viewing Applied Styles & Updating Changes 00:03:09
    8. Creating an Advanced CSS Rule for Links 00:05:52
    9. Defining Group & Combination Tag Selectors 00:05:57
    10. Creating a Class Style for Text Color 00:02:28
    11. Creating a Horizontal Rule to Divide Text 00:03:59
  7. Chapter 7: Main Navigation Systems
    1. INTRODUCTION 00:00:19
    2. Setting Up Rollover Button Images in Fireworks 00:04:45
    3. Copying & Sharing Graphics across Frames 00:03:03
    4. Setting Up the Rollover Behavior in Fireworks 00:04:37
    5. Setting Up Pages for a Pop-up Menu 00:02:13
    6. Creating a Pop-up Menu in Fireworks 00:07:23
    7. Using Correct Paths, Button Styles & Special Characters 00:05:18
    8. Adding Rollover Button Images to a Page 00:06:32
    9. Exporting Images from Fireworks to Dreamweaver 00:03:12
    10. Creating a Rollover Button in Dreamweaver 00:03:32
    11. Creating an Animated GIF in Fireworks 00:06:26
  8. Chapter 8: DHTML Layers, Interactivity & Forms
    1. INTRODUCTION 00:00:14
    2. Designing Layers with CSS 00:10:08
    3. Determining Table Position with CSS Rules 00:03:18
    4. Integrating CSS Styles & DHTML Layers 00:02:45
    5. Setting Up a Form on the Stuff Page 00:04:29
    6. Adding Buttons & Checkboxes to a Form 00:04:50
    7. Enabling the Form to Submit Order Data 00:04:09
    8. Creating Remote Rollovers 00:05:19
    9. Using the Show-Hide Layers Function 00:08:50
    10. Using Tags & Behaviors to Control HTML Text 00:07:26
    11. Final Comments 00:00:13
  9. Chapter 9: Advanced Gallery Pages
    1. INTRODUCTION 00:00:16
    2. Looking at Web Page Layers in Fireworks® 00:03:47
    3. Creating Slices for the Crew Images 00:07:52
    4. Setting Slice Types & Optimization 00:05:26
    5. Copying Images to Another Frame for Rollovers 00:05:29
    6. Setting Behaviors for the Navigation Bar 00:02:49
    7. Adding Simple Rollovers to the Main Menu 00:03:05
    8. Exporting HTML, Images & Slices from Fireworks 00:05:03
    9. Linking Slices & Putting Images on Separate Layers 00:04:23
    10. Editing HTML & Attaching a Style Sheet 00:03:20
    11. Building the Individual Crew Pages 00:03:55
    12. Linking the Crew Pages to the Main Page 00:03:06
    13. Creating a Photoshop® Web Photo Gallery 00:06:04
    14. Setting Up a Page Template for the Gallery 00:06:21
    15. Incorporating the Gallery into the Website 00:02:58
    16. Finishing Up the Gallery Pages in Dreamweaver® 00:04:11
  10. Chapter 10: Flash(R) Elements & Flash Video
    1. INTRODUCTION 00:00:17
    2. Inserting Flash Text into Dreamweaver 00:05:44
    3. Using Flash Buttons 00:04:03
    4. Preparing Video in the Flash 8 Video Encoder 00:04:09
    5. Advanced Flash Video Encoding Settings 00:03:45
    6. Using the Insert Flash Video Dialog Box 00:06:10
    7. Viewing the Inserted Flash Video in a Browser 00:02:26
  11. Chapter 11: Making Flash Slideshows
    1. INTRODUCTION 00:00:18
    2. Starting a New Slideshow 00:04:58
    3. Importing Still Image Files 00:08:29
    4. Adding Text to the Slideshow 00:07:33
    5. Creating Navigation Button Graphics 00:05:10
    6. Converting Button Graphics to Symbols 00:03:55
    7. Understanding Keyframe Properties 00:06:19
    8. Adding Behaviors to Buttons 00:02:07
    9. Loading the Slideshow into a Website 00:06:17
    10. Using a Flash Movie as a Template 00:10:39
    11. Looking at Publish Settings 00:03:51
  12. Chapter 12: Creating a Flash Banner Ad
    1. INTRODUCTION 00:00:19
    2. Setting Up to Create a Banner Ad 00:04:57
    3. Designing the Banner 00:07:09
    4. Adding Motion to the Banner 00:08:23
    5. Adding Text Elements to the Banner 00:05:51
    6. Creating & Animating Text 00:05:52
    7. Animating with Motion & Shape Tweens 00:06:48
    8. Adjusting the Animation for Timing 00:02:42
    9. Linking the Animated Banner to the Site 00:02:52
    10. Generating a Size Report & Publishing 00:04:47
  13. Chapter 13: Making a Mini Flash Site
    1. INTRODUCTION 00:00:17
    2. Reviewing the Site in Fireworks 00:05:22
    3. Importing & Organizing Assets 00:06:13
    4. Adjusting Values & Settings in an Imported Document 00:03:22
    5. Converting the Layout to a Flash Movie 00:02:30
    6. Creating a Flash Animation with Slides 00:04:59
    7. Making More Animations Using Guides & Slides 00:08:26
    8. Testing Your Flash Movie & Fixing Errors 00:02:43
    9. Converting Graphics into Buttons 00:05:44
    10. Applying a Behavior to a Button 00:02:10
    11. Importing Video 00:03:59
    12. Animating the Video 00:04:19
    13. Controlling the Video with Behaviors 00:06:05
    14. Adding Behaviors to Buttons 00:04:20
    15. Setting up a Loader 00:03:33
    16. Adding a Progress Bar 00:04:40
    17. Placing the Mini Site into the Website 00:04:57
  14. Chapter 14: Site Testing & Publishing
    1. INTRODUCTION 00:00:26
    2. Testing a Website for Potential Problems 00:07:49
    3. Adding Keywords & Description Meta Tags 00:04:02
    4. Viewing the Site Map & Modifying Page Titles 00:05:04
    5. Verifying Links with Check Links Sitewide Feature 00:04:08
    6. Checking Source Code for Errors 00:03:51
    7. Setting Up a Remote Server for Your Website 00:04:23
    8. Cloaking Certain File Types to Prevent Publishing 00:03:44
    9. Making Changes to a Published Website 00:03:08
  15. Chapter 15: Workgroup Integration Using Contribute
    1. INTRODUCTION 00:00:25
    2. Setting Up a Website for Multiple Users 00:04:24
    3. Communicating through Design Notes 00:02:06
    4. Creating a Connection with Contribute™ 00:04:53
    5. Editing a Web Page in Contribute 00:04:24
    6. Administering a Website 00:04:37
  16. Chapter 16: Incorporating Print Materials
    1. INTRODUCTION 00:00:18
    2. Creating a Business Card Using Web Page Graphics 00:06:07
    3. Creating a Brochure Using Web Page Graphics 00:04:38
    4. Adding Background & Text Colors to the Brochure 00:05:14
    5. Saving the Brochure as a PDF for Printing Purposes 00:04:14
    6. Saving the Brochure as a PDF for the Web 00:03:29
    7. Linking the Brochure PDF to the Website 00:03:49
    8. Final Comments & Credits 00:02:19