Please register and sign-in to use bookmarks.
Subscription or course purchase needed
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 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.
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.
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.
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.
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.
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 are included with this course so you can practice what you learn and work right along with the videos.
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.
This course comes in crisp 1280 x 720 high definition video.
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.
All rights reserved.
video2brain and the video2brain logo are trademarks registered to video2brain.
Please register and sign-in to use bookmarks.