Sometimes the most difficult part of creating a website is a step that is often overlooked: converting a graphic design into HTML/CSS files to be used on the web. In this workshop, expert web developer and trainer Candyce Mairs shows you how use a design created in Photoshop or Photoshop Elements as the basis for a website created with Dreamweaver. YouпїЅll learn how to пїЅsliceпїЅ a graphic design for conversion, optimize and export your images for the web, and plan how you are going to organize your website. Then, as the course moves into Dreamweaver, youпїЅll use HTML and CSS to create web pages, add content, and format and position that content. Finally, youпїЅll see how to test your pages in a variety of browsers to make sure you get the best results. Web Page Design Mockup

Reviewing the Design 02:46
Planning Your Conversion 06:23
Getting to Know Wireframes 04:03
Creating Wireframes 04:19
Creating a Style Guide 04:33
Defining CSS 03:44

Slicing

What Is a Slice? 04:50
Slicing with Photoshop 10:40
Slicing with Photoshop Elements 05:29

Optimizing Images

Understanding Optimization 04:45
Image Formats for the Web 10:20
Optimizing Images in Photoshop 08:04
Optimizing Images in Photoshop Elements 10:22

Planning Page Layout

Planning the Design Layout 06:08
Web Typography 07:53
Documenting Decisions 05:58

Exporting Images

Setting Up the Export with Photoshop, Part 1 11:27
Setting Up the Export with Photoshop, Part 2 12:23
Setting Up the Export with Photoshop Elements 10:12

Getting Organized

Creating the Root Folder 07:32
Defining a Local Site 04:18
Exploring the Interface 05:09
Creating a Web Page 06:47
Inserting an Image 06:30

Understanding CSS

Formatting Text with CSS 09:20
Using the Box Model 07:04
Creating DIV Tags with IDs 09:02

Building the Web Page

Building the Boxes 11:25
Adding Text to the Page 08:34
Adding Images Within DIV Tags 06:48
Customizing Box Backgrounds 07:39
Using CSS Background Images 08:33
Correcting Box Placement 09:38

Customizing Page Structure with CSS

Testing CSS Properties 04:40
Positioning Upper Content 12:09
Creating Columns on the Page 10:52
Issues with Floats 08:30
Using Tracing Images 08:05
Adjusting Box Positioning 11:18

Creating the Look of the Web Page with CSS Properties

Positioning the Photos 04:19
Defining Font Stacks 10:21
Customizing Text with CSS 06:15
Finishing Font Definitions 08:45
Correcting Background Colors 06:51
Nudging Content Areas 10:23
Positioning Lower Columns 08:50
Creating Curved Boxes 05:52
Using CSS Classes 10:08

Adding New CSS3 Properties

Adding Drop-Shadows 06:57
Creating Gradients 07:50

Testing the Design

Previewing Pages in Browsers 03:07
Adding Column Separators 05:24
Finalizing the Web Page for Chrome 04:28
Finalizing the Web Page for Firefox 11:06
Fixing Page Content Alignment 06:27