From Web Design to Website

Bridge the Gap Between Graphic Design and the Web

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.

Trainer: Candyce Mairs

January, 2012

Duration: 6 hrs 55 min

Ready for iPad, Android, and HTML5

Powerful, Feature-Rich Interface

HD Video

CSS

Dreamweaver

Add to Cart Downloads

Similar Courses

Welcome to From Web Design to Website

If you want to convert a graphic design into a web page, there are some steps you can take to bridge the gap between the two. In this chapter you'll get the background information you need and learn the initial steps you can take simplify the process, such creating as wireframes and style guides. We'll also take a look at the design that we'll be turning into a web page in this course.

Web Page Design Mockup
- In this video we'll look at the layout and design that we will be working with throughout this course. You'll get an overview of the various areas that will be created on the web page and see how the design can be subdivided into several content areas.
  
  Reviewing the Design
  
  02:46
- In this course the process of converting a graphic design into a web page is divided into four phases. This lesson will give you a basic idea of what is involved in each of these phases.
  
  Planning Your Conversion
  
  06:23
- In this lesson you'll learn what a wireframe is and why it is important to create one during the conversion process. We will build our wireframe directly on top of the design and add some additional details to the document; this detailed wireframe helps bridge the gap between the design side and the coding side.
  
  Getting to Know Wireframes
  
  04:03
- In this video we'll walk through the process of creating wireframe boxes in our Photoshop design to use for the page wireframe. These boxes are created on new layers above the layers in our original design so we can turn them on and off as needed and store them with our original design.
  
  Creating Wireframes
  
  04:19
- In this lesson we'll look at the various steps in the conversion process that assist us in making our mockup conversion. Wireframes are important in this step, and you'll see where to get additional resources for creating and defining wireframes. We'll also develop a style guide that will be used for the coding part of the conversion process.
  
  Creating a Style Guide
  
  04:33
- Cascading Style Sheets (CSS) are a powerful coding tool that allows us to position and format web content. In this lesson we'll look at a website created specifically to demonstrate why we care about coding with CSS.
  
  Defining CSS
  
  03:44
Slicing is a very important step in the transition process from graphic design to web design. In this chapter you'll learn how to slice using either Photoshop or Photoshop Elements and why this is a necessary step in the conversion process. You'll also learn how to use the results of the slicing when creating the web page.

Slicing
- Every web page design begins with a single image that shows the complete design for the page. This image is then sliced up for use on the web page, as you'll see in this video.
  
  What Is a Slice?
  
  04:50
- Photoshop offers the Slice tool to assist you with slicing up graphic designs into separate images to use on a web page. In this lesson you'll learn how to create and work with slices using the Slice tool in Photoshop.
  
  Slicing with Photoshop
  
  10:40
- Photoshop Elements does not specifically offer a Slice tool for slicing graphic designs. In this lesson you'll learn how to work around this to slice your web design file in Photoshop Elements.
  
  Slicing with Photoshop Elements
  
  05:29
Every image that goes onto a web page should be optimized to reduce the file size, helping the page to load quickly. This chapter looks at the various image formats for the web and how to decide which format to use for your images. You'll also learn how to use Photoshop or Photoshop Elements to optimize images.

Optimizing Images
- In this video you'll learn what it means to optimize an image and why it is so important to optimize every image that goes onto a web page.
  
  Understanding Optimization
  
  04:45
- There are three main image formats available for use on the web: .gif, .jpg, and .png. This video describes the differences between them and offers some general tips for optimizing images for web pages.
  
  Image Formats for the Web
  
  10:20
- In this lesson you'll learn how to optimize an image using Photoshop. This process allows you to fine-tune the format and settings for the final image you place onto your web page.
  
  Optimizing Images in Photoshop
  
  08:04
- In this lesson you'll learn how to optimize an image using Photoshop Elements. This process allows you to fine-tune the format and settings for the final image you place onto your web page.
  
  Optimizing Images in Photoshop Elements
  
  10:22
It is very important to look over your graphic design and plan how you are going to set up the web page using CSS. This chapter covers looking at your design in order to plan the coding needed, determine what fonts can be used, and document these decisions before moving on to create the web page.

Planning Page Layout
- When transitioning from a graphic design to a web page, you need to look over the design and organize it based on content areas. The wireframe for the design can assist you with this process. Each design is different, so this step allows you to look at your specific design and determine how you want to organize the coding for the page.
  
  Planning the Design Layout
  
  06:08
- When working on the web you need to make some decisions about which fonts are crucial to the design and which are not. In this video we'll go through the design for our web page, looking at the text on the page to determine if we need to keep text as images or if there is a font available on all computers that can give us the same look as the fonts in the graphic design.
  
  Web Typography
  
  07:53
- In this video you'll learn how to document the details of the graphic design to create a conversion guide that will be used as a reference when we move into HTML and CSS coding for the web page.
  
  Documenting Decisions
  
  05:58
Once the design conversion has been documented, the next step is to export the images needed for the web page. This chapter shows you how to move your images out of the graphic design and optimize them for use on the web page.

Exporting Images
- We need to create slices of our original graphic so we can pull the images we need for our web page from this Photoshop file. In this lesson you'll learn two different methods for creating slices in Photoshop, as well as how to name the images for use in a web page.
  
  Setting Up the Export with Photoshop, Part 1
  
  11:27
- In this lesson you'll learn how to optimize the slices that have been created in Photoshop and have Photoshop create an image for each of the slices using the names that were designated when we created the slices.
  
  Setting Up the Export with Photoshop, Part 2
  
  12:23
- In this lesson you'll learn how to use Photoshop Elements to pull the individual images you need from the graphic design file and optimize those images so they can be used on a web page.
  
  Setting Up the Export with Photoshop Elements
  
  10:12
This chapter will familiarize you with Dreamweaver and its interface. You'll learn how to create a root folder, define a local site, add images to a web page, and more.

Getting Organized
- Before we move into the Dreamweaver and web side of the conversion process, it is a good idea to get organized. In this video you'll see how to create a root folder that contains all of the files we will need for the website.
  
  Creating the Root Folder
  
  07:32
- In order to take advantage of all of the features in Dreamweaver, you need to define a local site. During this process you let Dreamweaver know what folder contains all of your website files; this allows you to access your files and obtain additional information about them from within Dreamweaver. This video will walk you through the process of defining a local site.
  
  Defining a Local Site
  
  04:18
- In this lesson you'll get an overview of the Dreamweaver interface and learn how to work with the various panels and menus, open and close panels, and organize the interface in order to work more efficiently.
  
  Exploring the Interface
  
  05:09
- In this lesson you'll learn how to create a new page in Dreamweaver. We'll also explore the various web page views within Dreamweaver and how to move files in the Files panel.
  
  Creating a Web Page
  
  06:47
- In this lesson you'll learn how to use the Assets panel in Dreamweaver to obtain information about the images in your website and add images to your web pages.
  
  Inserting an Image
  
  06:30
Cascading Style Sheets (CSS) can be used to both format and position the content of web pages. This chapter gives you the background you need to work with CSS to position page content and style the text on the web page. You'll learn how HTML and CSS can work together to give you full control of your web page's formatting and positioning.

Understanding CSS
- In order to control how text looks on a web page, you need to create CSS rules to tell the browser how to display the text. In this lesson you'll learn how easy it is to add text and format it with CSS using Dreamweaver's CSS panel.
  
  Formatting Text with CSS
  
  09:20
- It is important to understand how to use the CSS Styles panel in Dreamweaver to position and format web page content. In this lesson you'll learn how to use Dreamweaver to view the boxes in the box model and turn CSS properties on and off in Dreamweaver to fine-tune your CSS rules.
  
  Using the Box Model
  
  07:04
- In this video you'll see how easy it is to create boxes of content with Dreamweaver and assign IDs to those boxes so you can add CSS to format and position the content on a web page.
  
  Creating DIV Tags with IDs
  
  09:02
Now that all the planning has been done, it is time to begin building the web page. This chapter covers adding text and images to the web page while setting up the page to correctly position content based on the graphic design.

Building the Web Page
- In order to position content on a web page, we need to create boxes for the various content areas and name each of those boxes on the page. In this lesson you'll learn how to use Dreamweaver to create and name the boxes of content based on the conversion guide.
  
  Building the Boxes
  
  11:25
- Once the web page has all of the DIV tags with the correct IDs, we can begin to add content to the page. In this video we will add all the text from the graphic design file to the web page in the correct content area.
  
  Adding Text to the Page
  
  08:34
- In this lesson we'll add the images we need for our web page using Dreamweaver's Assets panel. We'll also set up the alternate text for these images for screen readers.
  
  Adding Images Within DIV Tags
  
  06:48
- Some of the content areas of our graphic design require background colors. In this lesson you'll learn how to add background colors to your content areas using CSS and become familiar with the CSS panel in Dreamweaver.
  
  Customizing Box Backgrounds
  
  07:39
- CSS enables you to add images to your web pages as either foreground or background images. In this video you'll learn how to use Dreamweaver to designate a background image for a portion of a web page.
  
  Using CSS Background Images
  
  08:33
- In looking over our page, it is apparent that we do not have all the boxes nested correctly inside of one another. In this video you'll see how easy it is to fix this by moving content boxes in Dreamweaver.
  
  Correcting Box Placement
  
  09:38
Once the content has been added to the web page, you'll need to create the column structure with HTML and CSS. In this chapter you'll learn how to reposition and fine-tune page content using the CSS box model in order to control the web page's content and styles.

Customizing Page Structure with CSS
- Dreamweaver CS5 and CS5.5 have a new tool that can assist us when working with CSS properties, allowing us to turn CSS properties on and off within Dreamweaver to see how a specific property affects the web page. In this lesson you'll learn how to use this tool to see how various properties change the web page we have open in Dreamweaver.
  
  Testing CSS Properties
  
  04:40
- Our web page is not presently set up in a two-column structure on the page. In order to move our content into two columns, we need to create two additional boxes for our content and use CSS to move these boxes. In this video you'll see how to create additional boxes for content areas in order to display that content side by side in the browser.
  
  Positioning Upper Content
  
  12:09
- The lower portion of our design uses a three-column structure that uses three separate sections of the page for text. In this lesson you'll learn how to build a three-column structure in Dreamweaver to line up content into columns.
  
  Creating Columns on the Page
  
  10:52
- When you create a page layout using the Float property in CSS, you may encounter an issue related to nesting boxes. In this video you'll learn more about this issue and how to correct it in Dreamweaver.
  
  Issues with Floats
  
  08:30
- Dreamweaver has a tracing image feature that can help you set up a page and match a design on the page. In this lesson you'll learn more about this feature, as well as the various tracing images that you might find helpful in the conversion process from graphic design to web page.
  
  Using Tracing Images
  
  08:05
- Default HTML positioning places content vertically on the web page. In this lesson you'll learn how you can use the CSS Float property to create a column look for a web page. CSS Floats can cause some issues with other content on your page, so we'll also look at how to correct this.
  
  Adjusting Box Positioning
  
  11:18
This chapter describes how to fine-tune the web page by adding CSS propertiesto give it the same look as the graphic design. You'll learn how to create a font stack in Dreamweaver to handle fonts on the page that may not be on the user's machine and add CSS background images and colors, along with positioning properties, to place sections of the web page where you want them in order to match the graphic design.

Creating the Look of the Web Page with CSS Properties
- The photos in the upper area of our web page are not positioned correctly. In this video we will use HTML properties to fix that.
  
  Positioning the Photos
  
  04:19
- Dreamweaver comes with a predefined list of font stacks, but in some cases you'll want to add a custom font stack and use it on your web page. In this lesson you'll learn more about what font stacks are, how to customize them, and why you might need to create a font stack for your web pages.
  
  Defining Font Stacks
  
  10:21
- Our web design uses a font that not all users will have on their systems, but it is possible to create this same look using a font most users do have. In this video you'll learn how to customize fonts using CSS properties to get the same look as the original design.
  
  Customizing Text with CSS
  
  06:15
- The upper portion of our web page has the font properties defined to match the look of our final design. We will finish defining the rest of the fonts on our web page in this video.
  
  Finishing Font Definitions
  
  08:45
- At this point our web page does not display the correct colors in each content box. In this lesson you'll see how easy it is to add colors using both hex values and RGB values for box backgrounds.
  
  Correcting Background Colors
  
  06:51
- CSS offers a few properties that allow you to "nudge" content within DIV tags in very small increments. In this video we'll use these properties to precisely position content in the lower section of our web page.
  
  Nudging Content Areas
  
  10:23
- Dreamweaver gives you multiple ways to add CSS properties to your web page. In this lesson you'll learn which method makes it easiest to fine-tune page content.
  
  Positioning Lower Columns
  
  08:50
- Our graphic design contains a curved image with a drop-shadow. In this video you'll learn how to work with background images in CSS to create the same look on your web page.
  
  Creating Curved Boxes
  
  05:52
- CSS classes let you fine-tune the position of content on a page. In this lesson we'll work with CSS classes to position the headers for the three columns of content on our page.
  
  Using CSS Classes
  
  10:08
CSS3, the latest version of CSS, includes additional properties that can assist you in reproducing the look of a graphic design on a web page. In this chapter you'll learn how to create drop-shadows and gradients on web pages without having to use images that can increase the file size. You'll also learn how browsers handle these new properties and how to determine if your browsers can support them.

Adding New CSS3 Properties
- Our design uses the drop-shadow feature in the graphic design for our navigation bar and lower content area of the web page. In this lesson you'll learn how to implement the drop-shadow feature that is now a part of the CSS3 specification. Not all browsers presently support this feature, but it is a great way to add depth to your web page.
  
  Adding Drop-Shadows
  
  06:57
- In this video you'll see how to use CSS3 gradients to create gradients on your web pages without having to use images. We'll look at the various lines of code that are required for gradients to display in every browser version and how you can modify the relevant code snippet in order to use it on your web pages.
  
  Creating Gradients
  
  07:50
Not all the browsers used to display web pages are alike. In this chapter you'll learn how to preview web pages in Dreamweaver to make sure that they work well in different browsers. Once that has been dealt with, you'll learn how to add the final touch to the lower portion of the web page by adding a design between columns.

Testing the Design
- Dreamweaver allows you to easily preview your web pages to see how they would look in a browser. In this video you'll learn how to preview pages and how to add additional browsers to Dreamweaver.
  
  Previewing Pages in Browsers
  
  03:07
- In this video we will use CSS to add the last feature of the original graphic design to our web page, creating soft column separators for the lower area of the page.
  
  Adding Column Separators
  
  05:24
- In this video we'll finalize the web page for display in Google Chrome and Safari by correcting minor spacing issues and adding the information needed to display the drop-shadows in the design.
  
  Finalizing the Web Page for Chrome
  
  04:28
- In this video we'll finalize the web page for display in Firefox by correcting minor spacing issues and adding the information needed to display the drop-shadows in the design.
  
  Finalizing the Web Page for Firefox
  
  11:06
- Now that the page has all of the design features from our graphic design, we need to preview it in all browsers to be sure it is displaying correctly. In this lesson you'll learn how to correct any page alignment issues you encounter in Firefox, Chrome, Internet Explorer, and Safari.
  
  Fixing Page Content Alignment
  
  06:27

Welcome to From Web Design to Website

This course walks you through every step in the process of converting a static graphic design into a living, breathing website. The contents of this course include:

Web Page Design Mockup
If you want to convert a graphic design into a web page, there are some steps you can take to bridge the gap between the two. In this chapter you’ll get the background information you need and learn the initial steps you can take simplify the process, such creating as wireframes and style guides. We’ll also take a look at the design that we’ll be turning into a web page in this course.

Slicing
Slicing is a very important step in the transition process from graphic design to web design. In this chapter you’ll learn how to slice using either Photoshop or Photoshop Elements and why this is a necessary step in the conversion process. You’ll also learn how to use the results of the slicing when creating the web page.

Optimizing Images
Every image that goes onto a web page should be optimized to reduce the file size, helping the page to load quickly. This chapter looks at the various image formats for the web and how to decide which format to use for your images. You’ll also learn how to use Photoshop or Photoshop Elements to optimize images.

Planning Page Layout
It is very important to look over your graphic design and plan how you are going to set up the web page using CSS. This chapter covers looking at your design in order to plan the coding needed, determine what fonts can be used, and document these decisions before moving on to create the web page.

Exporting Images
Once the design conversion has been documented, the next step is to export the images needed for the web page. This chapter shows you how to move your images out of the graphic design and optimize them for use on the web page.

Getting Organized
This chapter will familiarize you with Dreamweaver and its interface. You’ll learn how to create a root folder, define a local site, add images to a web page, and more.

Understanding CSS
Cascading Style Sheets (CSS) can be used to both format and position the content of web pages. This chapter gives you the background you need to work with CSS to position page content and style the text on the web page. You’ll learn how HTML and CSS can work together to give you full control of your web page's formatting and positioning.

Building the Web Page
Now that all the planning has been done, it is time to begin building the web page. This chapter covers adding text and images to the web page while setting up the page to correctly position content based on the graphic design.

Customizing Page Structure with CSS
Once the content has been added to the web page, you’ll need to create the column structure with HTML and CSS. In this chapter you’ll learn how to reposition and fine-tune page content using the CSS box model in order to control the web page's content and styles.

Creating the Look of the Web Page with CSS Properties
This chapter describes how to fine-tune the web page by adding CSS properties to give it the same look as the graphic design. You’ll learn how to create a font stack in Dreamweaver to handle fonts on the page that may not be on the user’s machine and add CSS background images and colors, along with positioning properties, to place sections of the web page where you want them in order to match the graphic design.

Adding New CSS3 Properties
CSS3, the latest version of CSS, includes additional properties that can assist you in reproducing the look of a graphic design on a web page. In this chapter you’ll learn how to create drop-shadows and gradients on web pages without having to use images that can increase the file size. You’ll also learn how browsers handle these new properties and how to determine if your browsers can support them.

Testing the Design
Not all the browsers used to display web pages are alike. In this chapter you’ll learn how to preview web pages in Dreamweaver to make sure that they work well in different browsers. Once that has been dealt with, you’ll learn how to add the final touch to the lower portion of the web page by adding a design between columns.

The lessons are wrapped in a feature-rich interface that lets you jump to any topic and bookmark individual sections for later review. Full-Screen mode provides a hi-def, immersive experience, and Watch-and-Work mode shrinks the video into a small window so you can play the videos alongside your application. Also included are exercise files that give you an easy way to try out the techniques you learn.

System Requirements

Broadband internet connection
Up-to-date browser with Flash plug-in
Screen resolution 1024x768 or higher
Sound card with speakers or headphones attached
Pentium 4 2.6 GHz or higher, or Apple Mac G5
512 MB RAM

Ready for iPad, Android, and HTML5

It's easy to watch this course from your Android device, iPad, or iPhone (4 or later). Access videos straight from your browser, or, for Android devices or iPads, use this course in one of our free apps.

Project Files (Downloadable Feature)

Project files are included with this course so you can practice what you learn and work right along with the videos.

Powerful, Feature-Rich Interface

This course features video2brain’s interactive interface. As you navigate the course, rolling over a chapter or video brings up text describing that item.

Full-Screen mode provides a hi-def, immersive experience. And Watch-and-Work mode puts the video into a resizable window that you can shrink so you can watch the lessons on one side of your screen while you’re following along and applying what you’ve learned on the other.

HD Video

This course comes in crisp 1280 x 720 high definition video.

Bookmarks (Downloadable Feature)

Available in the downloadable version of our courses, this feature makes it easy to create a custom bookmark in any lesson to mark where you left off or to make note of something you want to refer back to later. You can even add a name or short note to remind yourself what the bookmark is for.

No comments yet

Recommended Courses

From Web Design to Website

Bridge the Gap Between Graphic Design and the Web

About this lesson

Welcome to From Web Design to Website

System Requirements

Welcome to video2brain!

Other sites. Andere Seiten. Otros sitios. Autres sites.