From PSD to HTML, the implementation of Web pages

After studying the "from PSD to html:building a Set of Website Designs" Step by step, I have a deeper understanding of the design and implementation of the Web page, I gradually less fear, for this I tried to achieve their first from P SD-to-HTML practice.

I use the website PSD file is already designed for a SaaS site home page, the actual site is as follows:

The actual completed website is as follows: http://lab.shalilang.com/saas/index.html

The actual steps are as follows:

1. Preparatory work

I chose to use Dreamweaver CS6 as a development tool, creating a work site and creating images folders, index.html and Style.css, respectively, for storing images, HTML code for Web pages, and CSS code.

2. Analyze Page layout

Through the site, we can probably be divided into: page header, navigation, banner, content, footer five parts, I will focus on the first four parts of a Div management, footer independent management. At the same time we can also find that the entire page background is the same size as the window, but all content part centered length is 1010px. The basic code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The corresponding CSS code, followed by the introduction.
3, from the beginning of the page, until the completion of the footer.
The main problems encountered when implementing the page header are:
Question 1: Because the original design of the logo font is not in the machine, there is no hint of the specific font name, I directly cut it into a picture of the form of display. Similarly, the "Service hotline" on the right is also cropped to a picture.
Problem 2:logo and other pictures need to be centered vertically, according to the size of the picture to calculate the need to padding-top, to control the picture appears in the middle of the header.
  <div id= "header" >       </div>
CSS Code
. logo {padding-top:35px;}
4. Navigation Bar Section
The Navigation Bar section has no particular problem, mainly using the UL and Li tags, used to float:left, so that all navigation menu items to the left, and to implement the menu item text vertically centered, using the
#navmenu ul Li a{   height:38px;    line-height:38px;   Overflow:hidden;}
5, Banner part
This part of the image processing took a bit of time, because the original PSD in the preservation of the picture will always appear white spots, do some processing to complete, this shows a good psd file is still very important. Mainly separates the background floor color picture and the upper class SaaS introduction + Butterfly picture.
This section needs to set the minimum width of the banner div to be min-width:1010px, preventing the user's computer screen from being too small, causing some content to not be displayed.
When you create a login bar, you first need a gray, transparent background to make it easy to use a transparent picture as a background.
As for the text and text box is mainly through the position and float positioning to set the location, relatively simple.
6. Content part
Mainly divided into two parts, the left is the news, the right side is the introduction of SaaS, the right side should be made into tabs of the way. At the same time they can be divided into two parts, above is the title, the following is the content. Left float:left;width:330px, same as right and left 20px distance.
The implementation of the title to add a bottom line, you can use the HR can also be expressed by border-bottom way.
The Content section is implemented by a list, which controls the distance between items in the list, which I populate by setting line-height. There is also the overflow of the text, need to pass text-overflow:ellipsis;
The Content section on the right is implemented using table, which can theoretically be implemented by UL list, which can be tried later.
7, page tail points
There is no special place, nothing more than control the position of the text.
8, after passing through the validator of the, missing the Alt attribute, no other problem.
This is basically my first time from PSD to HTML work all, did not follow the steps to introduce, because the code has been completed, it takes time to re-organize too much time, only to introduce some of the problems encountered, memo.
---------------------------
My Technical Blog:
Www.shalilang.com