從網頁psd到html的開發

本文轉載自查看原文 2015-11-06 10:25 2260 web前端學習聯系--網頁的制作

　　從網上下載了一張psd的網頁設計稿，初學html+css，所以記錄一下我的學習過程。原圖是這個樣子：

　　　　　　　　　　　　原圖布局圖

一、整體思路

　　拿到一張psd圖片以后，先不要着急做，一定要先整體觀察它的布局，確定基本框架。不管css，先在草稿紙上畫出布局圖，然后寫出沒有css的html。新建一個webpage2的文件夾，在里面新建images文件夾，用來保存第二步切圖的圖片。　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <header>
 9         
10     </header>
11     <div class="center_content">
12         
13     </div>
14     <footer>
15         
16     </footer>
17 </body>
18 </html>

View Code

二、切圖

　　把psd中的圖片圖標什么的，切出來，使用工具Photoshop cc，不知道為什么這個psd在fireworks里面打開就出現了錯位，所以就用photoshop了。切圖注意事項如下：

　　1.圖片的框選：因為是手工切圖，所以要把圖片放的大一些，才可以更為准確的測量圖片的大小。這里也可以用fireworks輔助。

　　2.圓角矩形：使用css3ps輔助，可以在一定程度上輸出css的格式，如照片的背景框就是一個圓角矩形，圖1.

　　　　　　　　但是有的是不行的，如：紅色more，這時候我是大致用選取框測量的。如圖2.

　　　　　　　　　　　　　　　　　　　　　　　　圖一　　　　　　　　　　　　　　　　　　　　　　圖二

　　3.圖片的存儲：在Photoshop里，選取了圖片以后，Ctrl + c，Ctrl+N，Ctrl+V，就可以存儲為web所用格式，記得在右側調整圖片的格式png8，png24，gif，jpeg等。保存在images文件夾下。

三、細化布局：

　　在頭部，身體，和尾部三部分中又分別有各自的布局。下面，我們來一一分析：

　　1.header

　　　　header部分有三部分：logo，nav和一張寬為1920的img。logo部分文字和圖片，我們把圖片設置為背景（只是其中一種方法，有空會寫一下文字和圖片對齊的幾種方　式）。nav部分是a標簽。代碼如下：　

 1     <header>
 2         <div class="center_content">
 3             <!-- logo和nav -->
 4             <div class="header_1">
 5                 <!-- <img src="images/logo.png"> -->
 6                 <span class="f1">羲緣康非葯物調養中心</span>
 7                 <hr color="#57411a" width="250px" height="1px" />
 8                 <span class="f2">XI YUAN KANG NON DRUG THERAPY CENTER</span>
 9             </div>
10             <nav>
11                 <a href=""  id="nav1">網 站 首 頁</a>
12                 <a href="">企 業 簡 介</a>
13                 <a href="">惜 緣 開 講</a>
14                 <a href="">調 養 生 命</a>
15                 <a href="">預 約 健 康</a>
16                 <a href="">招 賢 納 士</a>
17                 <a href="">羲 緣 廚 房</a>
18                 <a href="">調 養 產 品</a>
19                 <a href="">禪 樂 靜 修</a>
20                 <a href="">聯 系 我 們</a>
21             </nav>
22         </div>
23         <img src="./images/pic_2.png">
24     </header>

View Code

　　2.center_content部分分為左右兩部分：left_main，right_main。並且在每一部分中又可以細化若干小的div。每部分都有注釋哦

  1     <!-- 中間 -->
  2     <div class="center_content">
  3         <!-- 左側的主體 -->
  4         <div class="left_main">
  5             <!-- 圖片輪播的地方 -->
  6             <div class="focus_pic">
  7                 <img src="images/focuspic.png">
  8                 <span class="focus_pic1">“順天而食，順時而食”的養生觀念</span>
  9             </div>
 10             <!-- 企業簡介div -->
 11             <div class="content">
 12                 <div class="t1">
 13                     <span class="t1_1">企業簡介</span>
 14                     <div class="t1_2">more</div>
 15                 </div>
 16                 <div class="boo">
 17                     <div class="boom">
 18                         <img src="images/boom.png">
 19                     </div>
 20                     <span class="boom_1">&nbsp;&nbsp;國際中醫現代非葯物療法協會(以下簡稱協會，是經香港特別行政區注冊(第622章)，並在國家中醫葯管理局的業務指導和監督管理下，具有獨立法人資格的社會組織... <span class="detail">[詳細]</span></span>
 21                 </div>
 22                 <div class="nav2">
 23                     <a href="">企業文化</a>
 24                     <code>/</code>
 25                     <a href="">&nbsp;企業資質</a>
 26                     <code>/</code>
 27                     <a href="">&nbsp;合作伙伴</a>
 28                     <code>/</code>
 29                     <a href="">&nbsp;健康理念</a>
 30                 </div>
 31             </div>
 32             <!-- 調養產品 -->
 33             <div class="ty_pro">
 34                 <div class="ty_head">
 35                     <span class="t3_1">調養產品</span>
 36                     <span class="t3_2">更多&gt;</span>
 37                 </div>
 38                 <div class="ty_examples">
 39                     <div class="ty_example">
 40                         <img src="images/驅寒.png">
 41                         <br/>
 42                         <a href="">祛寒</a>
 43                     </div>
 44                     <div class="ty_example">
 45                         <img src="images/排濕.png">
 46                         <br/>
 47                         <a href="">排濕</a>
 48                     </div>
 49                     <div class="ty_example">
 50                         <img src="images/撥筋.png">
 51                         <br/>
 52                         <a href="">撥筋</a>
 53                     </div>
 54                     <div class="ty_example">
 55                         <img src="images/艾灸補陽.png">
 56                         <br/>
 57                         <a href="">艾灸補陽</a>
 58                     </div>
 59                     <div class="ty_example">
 60                         <img src="images/食療.png">
 61                         <br/>
 62                         <a href="">食療</a>
 63                     </div>
 64                 </div>
 65             </div>
 66         </div>
 67         <!-- 右側主體：網站公告、電話等 -->
 68         <div class="right_main">
 69             <!-- 網站公告 -->
 70             <div class="webad">
 71                 <div class="t2">
 72                     <span class="t2_1">網站公告</span>
 73                     <div class="t1_2">more</div>
 74                 </div>
 75                 <div class="announce">
 76                     <span class="date_gray">02/11/2015</span>
 77                     <a href="">常州市道德講堂主持詞（腳本）</a>
 78                     <span class="date_gray">02/11/2015</span>
 79                     <a href="">南大街調整優化交通方案</a>
 80                     <span class="date_gray">02/11/2015</span>
 81                     <a href="">新《交通旅游圖》 地理風貌出行旅游</a>
 82                     <span class="date_gray">02/11/2015</span>
 83                     <a href="">中共中央關於制定國民經濟和社會發展第</a>
 84                 </div>
 85             </div>
 86             <!-- 調養預約 -->
 87             <div class="ty_app">
 88                 <img src="images/ty_app.png">
 89                 <span class="ty_app1">調養預約</span>
 90                 <div class="circle">
 91                     &lt;
 92                 </div>
 93             </div>
 94             <!-- 招賢納士 -->
 95             <div  class="offer">
 96                 <img src="images/offer.png">
 97                 <span class="ty_app1">招賢納士</span>
 98                 <div  class="circle">
 99                     &lt;
100                 </div>
101             </div>
102             <!-- 電話 -->
103             <div class="tel">
104                 <img src="images/tel.png">
105                 <span class="tel_num">(+86) 519-85512976 <br/>400-0157-687
106                 </span>
107             </div>
108         </div>
109     </div>

View Code

　　3.footer

　　　　footer部分只有兩段文字　

1  <!-- footer -->
2     <footer>
3         <div class="center_content">
4             <div class="footer1">2015 All Rights Reserved 版權所有·國際中醫現代非葯物療法協會 <br/>蘇ICP備08009317號-4</div>
5             <div class="footer2">常州市武進區湖塘鎮永勝路118-40 <br/>（+86） 519-85512976 　　400-0157-687 13961180976@139.com</div>
6         </div>
7     </footer>

footer

四、對每部分進行css的設置。

　　1.整體的設置：主要是背景background，因為背景圖片的大小為1920*1251，比較大，需要涉及到background-size:100% 100%的屬性。　　

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 body {
 7     background: url(images/background.jpg) no-repeat;
 8     background-size:100% 100%;
 9     -moz-background-size:100% 100%;
10     -webkit-background-size:100% 100%;
11 }

View Code

　　　又因為整個布局中所有的內容都在中間，所以我們把中間的css設置為max-width: 980px;水平居中

1 /*主題部分*/
2 .center_content {
3     margin: 0 auto;
4     max-width: 980px;
5     position: relative;
6 }

View Code

　　2.header

　　　　我遇到的難點是：（1）圖片和多行文字水平居中對齊（2）導航中a標簽的垂直文字排列以及靠右排列

　　　　解決方法：（1）把圖片設置為背景，並且設置位置為左中，然后排列文字居中，然后用padding-left屬性分開圖片和文字。

　　　　　　　　　（2）a標簽內文字垂直方法：把a標簽設置為block格式，然后設置block的寬度為width: 18px;因為字體是14px；略大於一個字體，小於兩個文字寬度，所以　　　　　　　　　　　可以呈現單字豎直排列。定位方面一定要注意position和float兩個的定位原理和文檔流的變換。

 1 header {
 2     position: relative;
 3     /*height: 580px;*/
 4     width: 100%;
 5 }
 6 /**/
 7 header img{
 8     width: 100%; 
 9     height: 215px;
10 }
11 /*logo的定位*/
12 
13 .header_1 {
14     height: 152px;
15     width: 370px;
16     position: relative;
17     padding-left: 95px;
18     margin-top: 36px;
19     display: inline-block;
20     font-family: FZCCHJW—GB1-0, serif;
21     line-height: 35px;
22     float: left;
23     background: url(images/logo.png) no-repeat left top;
24 }
25 
26 .f1 {
27     font-size: 24px;
28 }
29 
30 .f2 {
31     font-size: 14px;
32 }
33 
34 /*導航*/
35 
36 nav {
37     position: absolute;
38     right: 0;
39 }
40 /*網站首頁的顯示*/
41 nav #nav1 {
42     background-color: rgb(160, 39, 22);
43     color: #fff;
44 }
45 /*其他a標簽的定位和屬性設置*/
46 
47 nav a {
48     margin-top: 26px;
49     display: block;
50     width: 18px;
51     text-decoration: none;
52     float: left;
53     margin-right: 20px;
54     color: #000;
55     font-size: 14px;
56     padding: 2px;
57     line-height: 20px;
58 }
59 /*hover屬性的設置*/
60 
61 nav a:hover {
62     color: #fff;
63     background-color: rgb(160, 39, 22);
64 }

View Code

　　3.center_content部分

　　　　左側主要分為三部分，上面的兩個div設置為float：left；下面一個div。就不多贅述了，方法差不多。比較簡單。比較考驗的就是耐心和一直測量各種數據。　　　

  1 .left_main {
  2     float: left;
  3     width: 740px;
  4     height: 500px;
  5 }
  6 
  7 .left_main .focus_pic {
  8     width: 330px;
  9     height: 248px;
 10     position: relative;
 11     float: left;
 12     /*background: url(images/focus_pic.png);*/
 13 }
 14 /*焦點圖片文字位置的設置*/
 15 .focus_pic1 {
 16     position: absolute;
 17     z-index: 101;
 18     left: 0;
 19     bottom: 0;
 20     width: 100%;
 21     color: #fff;
 22     background: rgba(0, 0, 0, .7);
 23     height: 30px;
 24     line-height: 30px;
 25     font-size: 12px;
 26     overflow: hidden;
 27 }
 28 .content{
 29     width: 330px;
 30     height: 248px;
 31     float: left;
 32     margin-left: 40px;
 33     position: relative;
 34     /*float: left;*/
 35 }
 36 /*企業簡介標題*/
 37 .content .t1{
 38     border-bottom: dotted #ccc;
 39     height: 36px;
 40 }
 41 .content .t1_1{
 42     float: left;
 43     margin-top: 11px;
 44     font-weight:bold;
 45     font-size: 14px;
 46     
 47 }
 48 /*更多more*/
 49 .t1_2{
 50     margin-top: 12px;
 51     font-size: 12px;
 52     line-height: 12px;
 53     text-align: center;
 54     color: #fff;
 55     float: right;
 56     width: 53px;
 57     height: 12px;
 58     -webkit-border-radius: 2px;
 59     -moz-border-radius: 2px;
 60     border-radius: 2px;
 61     background-color: rgb(185,15,16);
 62 
 63 }
 64 .boo{
 65     height: 164px;
 66     border-bottom: dotted #ccc;
 67 }
 68 /*企業簡介圖片的圓角框*/
 69 .boom {
 70     width: 106px;
 71     height: 106px;
 72     -webkit-border-radius: 10px;
 73     -moz-border-radius: 10px;
 74     border-radius: 10px;
 75     background-color: #fff;
 76     float: left;
 77     margin-top: 30px;
 78 }
 79 /*介紹內容*/
 80 .boom_1{
 81     display: block;
 82     margin-top: 30px;
 83     float: right;
 84     font-size: 12px;
 85     margin-left: 20px;
 86     width: 200px;
 87     line-height: 22px;
 88 }
 89 .boom_1 .detail{
 90     color: red;
 91 }
 92 .nav2 a{
 93     margin-top: 18px;
 94     display: inline-block;
 95     margin-right: 8px;
 96     font-size: 12px;
 97     color: red;
 98     text-decoration: none;
 99 }
100 /*調養產品div*/
101 .ty_pro{
102     width: 701px;
103     height: 218px;
104     float: left;
105     margin-top: 35px;
106     position: relative;
107     background-color: #fff;
108 }
109 /*調養產品的標題*/
110 .ty_head{
111     width: 641px;
112     height: 50px;
113     border-bottom: solid #ccc;
114     margin-left: 20px;
115 }
116 .ty_head .t3_1{
117     float: left;
118     margin-top: 18px;
119     font-weight: bold;
120     font-size: 14px;
121 }
122 .t3_2{
123     margin-top: 19px;
124     float: right;
125     font-size: 12px;
126     color: #999;
127 }
128 /*調養產品的照片瀏覽*/
129 .ty_examples{
130     width: 641px;
131     margin-left: 20px;
132 }
133 .ty_example{
134     margin-top: 24px;
135     float: left;
136     margin-left: 10px;
137     text-align: center;
138     
139 }
140 .ty_examples a{
141     font-size: 12px;
142     font-weight: bold;
143     text-decoration: none;
144     color: #000;
145 }

View Code

　　　　右側：　　

  1 /*主體右側*/
  2 .right_main {
  3     width: 240px;
  4     float: left;
  5 }
  6 .webad{
  7     width: 240px;
  8     height: 248px;
  9     float: left;
 10     position: relative;
 11     /*float: left;*/
 12 }
 13 /*網站公告的標題*/
 14 .webad .t2{
 15     border-bottom: dotted #ccc;
 16     height: 36px;
 17 }
 18 .webad .t2_1{
 19     float: left;
 20     margin-top: 11px;
 21     font-weight:bold;
 22     font-size: 14px;
 23     
 24 }
 25 /*更多more*/
 26 .t1_2{
 27     margin-top: 12px;
 28     font-size: 12px;
 29     line-height: 12px;
 30     text-align: center;
 31     color: #fff;
 32     float: right;
 33     width: 53px;
 34     height: 12px;
 35     -webkit-border-radius: 2px;
 36     -moz-border-radius: 2px;
 37     border-radius: 2px;
 38     background-color: rgb(185,15,16);
 39 
 40 }
 41 /*網站公告*/
 42 .announce{
 43     margin-top: 20px;
 44 }
 45 /*日期*/
 46 .announce span{
 47     color: #aaa;
 48     display: block;
 49     font-size: 12px;
 50     margin-bottom: 10px;
 51 }
 52 /*網站公告鏈接*/
 53 .announce a{
 54     text-decoration: none;
 55     color: #000;
 56     display: block;
 57     font-size: 12px;
 58     margin-bottom: 10px;
 59 }
 60 /*調養預約*/
 61 .ty_app{
 62     width: 240px;
 63     height: 52px;
 64     float: left;
 65     margin-top: 35px;
 66     background-color: #bdb098;
 67 }
 68 /*調養預約字體*/
 69 .ty_app1{
 70     font-size: 18px;
 71     line-height: 52px;
 72     font-weight: bold;
 73 }
 74 /*調養預約圖標*/
 75 .ty_app img{
 76     float: left;
 77     margin-left: 20px;
 78     margin-top: 15px;
 79 }
 80 /*右側小圓圈*/
 81 .circle{
 82     width: 20px;
 83     height: 20px;
 84     background-color: #533B27;
 85     -webkit-border-radius: 10px;
 86     -moz-border-radius: 10px;
 87     border-radius: 10px;
 88     float: right;
 89     margin-right: 13px;
 90     color: #fff;
 91     margin-top: 16px;
 92     text-align: center;
 93 
 94 }
 95 /*招賢納士div*/
 96 .offer{
 97     width: 240px;
 98     height: 52px;
 99     vertical-align:middle; 
100     float: left;
101     margin-top: 10px;
102     background-color: #bdb098;
103 }
104 /*招賢納士圖標*/
105 .offer img{
106     float: left;
107     margin-left: 20px;
108     margin-top: 15px;
109 }
110 /*電話div*/
111 .tel{
112     width: 240px;
113     height: 52px;
114     float: left;
115     margin-top: 10px;
116     
117 }
118 /*電話號碼*/
119 .tel_num{
120     color: #000;
121     margin-top: 15px;
122     font-size: 14px;
123     line-height: 24px;
124     font-weight: bold;
125     display: block;
126     float: left;
127     margin-left: 15px;
128 }
129 /*電話圖標定位*/
130 .tel img{
131     float: left;
132     /*margin-left: 20px;*/
133     margin-top: 15px;
134 }

View Code

　　4.footer　　　　

 1 footer {
 2     float: left;
 3     margin-top: 50px;
 4     color: white;
 5     width: 100%;
 6     height: 120px;
 7     background-color: rgba(0, 0, 0, .8);
 8 }
 9 /*左邊文字區域*/
10 .footer1{
11     float: left;
12     width: 424px;
13     height: 40px;
14     margin-top: 40px;
15     font-size: 12px;
16     font-weight: bold;
17     line-height: 20px;
18 }
19 /*右邊文字區域*/
20 .footer2{
21     float: right;
22     width: 424px;
23     height: 40px;
24     margin-top: 40px;
25     font-size: 12px;
26     font-weight: bold;
27     line-height: 20px;
28 }

View Code

五、素材文件打包，大家一起交流學習。(*^__^*) 第一次做的網頁，技術一般~

　　http://yun.baidu.com/share/link?shareid=1682921571&uk=3811305747

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。