從PSD到HTML，網頁的實現
我使用的網站PSD檔案是已經設計好的一個SAAS網站首頁，網站的實際效果圖如下：
實際步驟如下：
1、準備工作
我選擇了使用Dreamweaver CS6 作為開發工具，先建立了工作站點，並建立了images資料夾、index.html和style.css，分別用於存放圖片，網頁的HTML程式碼和CSS程式碼。
2、分析網頁佈局
通過網站效果圖，我們大概可以為分為：頁頭、導航、橫幅、內容、頁尾五部分，我將前四部分都集中在一個div中管理，頁尾獨立管理。同時我們也可以發現，整個頁面背景是跟視窗一樣大小的，但所有內容部分居中長度為1010px。基本程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SAAS</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div id="header"> header </div> <div id="navmenu"> navmenu </div> <div id="banner"> banner </div> <div id="content"> content </div> </div> <div id="footer"> footer </div> </body> </html>
相應的CSS程式碼，後續介紹。
3、從頁頭開始實現，直到完成頁尾。
實現頁頭時，主要遇到問題有：
問題1：由於原始設計中logo的字型是本機沒有的，也沒有提示具體的字型名字，我直接將其裁成圖片的形式展示。同理右側的“服務熱線”也裁剪成圖片。
問題2：logo等圖片需要垂直居中顯示，根據圖片的大小計算出需要padding-top，來控制圖片出現在header的中間。
<div id="header"> <img class="logo" src="images/logo.png" alt="logo" /> <img class="phone" src="images/phoneNumber.png" alt="phone number" /> <img class="logo phonenumer" src="images/phone.png" alt="phone logo" /> </div>
CSS程式碼
.logo {
padding-top: 35px;
}4、導航欄部分
導航欄部分沒有特別的問題，主要是使用ul和li標籤，使用到了float:left;，使所有的導航選單項向左浮動，同時要實現選單項中的文字垂直居中，使用了
#navmenu ul li a{
height: 38px;
line-height: 38px;
overflow: hidden;
}5、banner部分
這部分圖片的處理花了點時間，因為原PSD中在儲存圖片的時候總是會出現白色斑點，做了一些處理才完成，由此可見一個好的PSD檔案還是很重要的。主要分離出背景地板顏色的圖片和上層SAAS介紹+蝴蝶圖片。
這部分需要設定banner div的最小寬度是min-width:1010px，防止在使用者電腦螢幕太小時，導致部分內容不能展示。
建立登入欄時，首先是需要灰色透明的背景，為了方便使用了透明圖片作為背景。
至於其中的文字和文字框則主要通過position和float定位進行設定位置，相對而言比較簡單。
6、內容部分
主要分為兩部分，左側是新聞，右側是SAAS介紹，右側應該做成選項卡的方式。同時它們又可以都分為上下兩部分，上面是標題，下面是內容。左側float:left;width:330px;，同理右側和左側保持20px距離。
實現標題要新增一條底線，可以使用hr也可以通過border-bottom的方式來表達。
內容部分通過列表來實現，控制好列表項之間的距離，我是通過設定line-height來填充。還有對於溢位的文字，需要通過text-overflow:ellipsis;來處理。
右側的內容部分，是使用table實現的，理論上也可以通過ul列表來實現，後面可以嘗試一下。
7、頁尾部分
沒有什麼特別的地方，無非是控制文字的位置。
8、之後通過w3c validator進行了驗證，<img>缺少了alt屬性，其他沒有什麼問題。
這基本上就是我的第一次從PSD到HTML工作的全部，沒有按照步驟來介紹，因為程式碼都已經完成，需要花時間去重新整理太費時間，只把遇到的一些問題介紹一下，備忘。
---------------------------
本人技術部落格：