From Web Design to Website

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 will 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 will use HTML and CSS to create web pages, add content, and format and position that content. Finally, you will see how to test your pages in a variety of browsers to make sure you get the best results.

Table of content

Web Page Design Mocku

• Reviewing the Design
• Planning Your Conversion
• Getting to Know Wireframes
• Creating Wireframes
• Creating a Style Guide
• Defining CSS

Slicing

• What Is a Slice?
• Slicing with Photoshop
• Slicing with Photoshop Elements

Optimizing Images

• Understanding Optimization
• Image Formats for the Web
• Optimizing Images in Photoshop
• Optimizing Images in Photoshop Elements

Planning Page Layout

• Planning the Design Layout
• Web Typography
• Documenting Decisions

Exporting Images

• Setting Up the Export with Photoshop, Part 1
• Setting Up the Export with Photoshop, Part 2
• Setting Up the Export with Photoshop Elements

Getting Organized

• Creating the Root Folder
• Defining a Local Site
• Exploring the Interface
• Creating a Web Page
• Inserting an Image

Understanding CSS

• Formatting Text with CSS
• Using the Box Model
• Creating DIV Tags with IDs

Building the Web Page

• Building the Boxes
• Adding Text to the Page
• Adding Images Within DIV Tags
• Customizing Box Backgrounds
• Using CSS Background Images
• Correcting Box Placement

Customizing Page Structure with CSS

• Testing CSS Properties
• Positioning Upper Content
• Creating Columns on the Page
• Issues with Floats
• Using Tracing Images
• Adjusting Box Positioning

Creating the Look of the Web Page with CSS Properties

• Positioning the Photos
• Defining Font Stacks
• Customizing Text with CSS
• Finishing Font Definitions
• Correcting Background Colors
• Nudging Content Areas
• Positioning Lower Columns
• Creating Curved Boxes
• Using CSS Classes

Adding New CSS3 Properties

• Adding Drop-Shadows
• Creating Gradients

Testing the Design

• Previewing Pages in Browsers
• Adding Column Separators
• Finalizing the Web Page for Chrome
• Finalizing the Web Page for Firefox
• Fixing Page Content Alignment

Letitbit.net

1. http://bit.ly/1j0LvEW
2. http://bit.ly/1jIbKD7
3. http://bit.ly/1hmO7zE
4. http://bit.ly/1oBa0Mv
5. http://bit.ly/1lVAPIU
6. http://bit.ly/1gO6M2F
7. http://bit.ly/1bV3szP