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

PSD To HTML With Photoshop And Dreamweaver

Video Description

In this PSD to HTML Using Photoshop and Dreamweaver training course, expert author David Place teaches you the core principles of creating workable websites using these two Adobe programs. This course is designed for users that already have a working knowledge of Photoshop and Dreamweaver. You will start out by creating a PSD mockup using Photoshop. David will teach you about the design basics in Photoshop, layer properties, slicing, and web optimization. From there, you will dive into working in Dreamweaver to transform your Photoshop document into a working website. In Dreamweaver you will explore the process of setting up and managing a website, working with different view modes, and working with images and layout objects. This video tutorial will also teach you some fundamental HTML and CSS rules. Finally, you will work with the Live View in Dreamweaver to test your website. By the completion of this video based training course, you will have developed the necessary skills needed to design, create, and publish a working website. Working files are included, allowing you to follow along with the author throughout the lessons.

Table of Contents

  1. Introduction
    1. What You Will Learn 00:00:33
    2. What Is PSD To Web Conversion? 00:01:25
    3. Working With Lesson Files 00:00:51
    4. Developing A Site Map 00:02:18
    5. How To Access Your Working Files.mp4 00:02:45
  2. Creating A PSD Mockup
    1. Deciding On A Site layout 00:04:23
    2. Selecting Color And Fonts 00:03:21
    3. Using Photoshop To Create A Color Pallet 00:06:59
    4. Setting Up Document Size And Image Resolution 00:02:54
    5. Creating The PSD Mockup Navigation 00:07:07
    6. Completing The PSD Mockup 00:04:57
    7. Working With Placeholder Text 00:03:25
    8. Transparency And Graphics 00:03:39
    9. Slicing The Mockup 00:06:15
    10. Slice Options 00:03:45
    11. Saving For Web - Part 1 00:05:30
    12. Saving For Web - Part 2 00:06:18
  3. Moving To Dreamweaver
    1. Organizing Files 00:01:43
    2. Setting Up And Managing A New Site 00:04:24
    3. Testing The Site Connection 00:05:36
    4. Working With The Files Tab 00:03:11
    5. Working With Code, Design And Split Views 00:03:37
    6. Working With Images And Layout Objects 00:06:08
  4. Converting The PSD Mockup
    1. Opening Files In Dreamweaver 00:01:17
    2. Adding Title And Meta Name Tags 00:02:24
    3. Replacing Placeholder Slices With Div Tags 00:02:37
    4. Replacing Placeholder Text With HTML Using Div Tags 00:06:06
    5. Using AP Div Tags - Part 1 00:06:26
    6. Using AP Div Tags - Part 2 00:04:48
    7. Working With Stylesheets 00:03:52
    8. Creating New Style Rules 00:05:17
    9. Adding Hyperlinks - Relative And Absolute 00:07:23
  5. Testing Your Site
    1. Working With Live View In Dreamweaver 00:01:03
    2. Checking Remote Files And Refreshing 00:02:11
    3. Viewing The Site In A Browser 00:01:35
  6. Conclusion
    1. Summary 00:00:46
  7. About The Author
    1. About The Author 00:00:57