psd轉html

之前的項目老是委託人家給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進行對應完成初步的頁面呈現。

六、進行細節的細化。

相關文章
相關標籤/搜索