CG数据库 >> Skillfeed – Photoshop CS6 PSD to HTML

Skillfeed – Photoshop CS6 PSD to HTML的图片1

密码: nhg7

If you want to learn how to convert a design from an Adobe Photoshop file into an HTML/CSS document then this course is for you. Its a step-by-step course that explains everything you need to know to get started. You should already be familiar with basic concepts of HTML & CSS. Well convert a layout in Photoshop into a working HTML/CSS file that works consistently across all major web browsers.

Content:

[list] []Chapter 1: Setup and Analyze

[]Welcome

[]Getting Setup Properly

[]Analyze the Layout

[]Isolate and Export Graphics

[]Additional Export Considerations

[]Isolating Button Graphics

[]Export Button Graphics[]Chapter 2: Coding the Top Section

[]Getting Started

[]Calculating the Width

[]Adding the Background Image

[]Creating the Links

[]Reviewing the F2FW ico Class

[]Creating the Social Icon Graphics

[]Displaying the Social Icons[]Chapter 3: Coding the Header

[]Coding the Header Structure

[]Included F2FW IDs and Classes

[]Create the Gradient Background

[]Adding the Logo

[]Adding the Menu[]Chapter 4: Coding the Hello Page Section

[]Creating the HTML Structure

[]Creating the Gradient Background

[]Adding the Border

[]Coding the Top Bar

[]Adding the Hello Button

[]Creating the Article Text

[]Adding the Custom Buttons

[]Placing the Slider Image

[]Generating the Next and Previous Buttons

[]Position Button and Create Image Files

[]Adding the Arrow Images[]Chapter 5: Coding the Page Albums and Blog Section

[]Coding the Thumbnails

[]Adding Gray Surrounds and White Space

[]Correcting Thumbnail Appearance

[]Styling the Hyperlinks

[]Adding the Icons to the Hyperlinks

[]Coding the HTML for the Blog Section

[]Styling the Blog Section

[]Displaying Blog Post Icons

[]Changing Icon Position

[]Chapter 6: Coding the Footer and Debugging

[]Coding the HTML for the Footer

[]Styling the Footer

[]Testing in Safari Chrome and Opera

[]Debugging Firefox Issues

[]Testing in Internet Explorer 9

[]Using Adobe Browser Lab

[]Adding the @font-face Declaration

[]Correcting IE Bug 1 and 2

[]Correcting IE Bug 3 and 4

[]Correcting IE Bug 5 and 6

[]Conclusion