之前的項目老是委託人家給psd轉html,總感受本身前端仍是不錯的,爲啥不本身好好弄弄呢?看教程學習 多多練習 孰能生巧。css
一、拿到psd圖將整張psd存成一個完整的jpg(快捷鍵提示:alt+ctrl+shift+s)html
二、DW建立網站,分爲index.htm、images(文件夾)、styles.css主css。前端
三、查看psd開始大板塊分割(感受這裏跟面向對象同樣 哈哈),基本思路是header、content、footer(有時候有輪播部分能夠本身進行增長)ide
四、修改index.htm 分爲學習
<!DOCTYPE HTML>網站
<html>ui
<head>spa
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">htm
<title>首頁</title>對象
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--頁面開始-->
<div id="top">
<div id="container">
</div>
</div>
<!--歡迎區域-->
<div id="welcome">
<div id="container">
</div>
</div>
<!--主內容區域-->
<div id="main">
<div id="container">
<!--菜單區域-->
<div id="sidebar"></div>
<!--內容區域-->
<div id="content"></div>
</div>
</div>
<!--頁腳區域-->
<div id="footer">
<div id="container">
</div>
</div>
</body>
</html>
五、將截圖與頁面經過css進行對應完成初步的頁面呈現。
六、進行細節的細化。