=========================
注意事項:
=========================
一般人都會用以下方法去將psd 轉成html
方法一：打開 fireworks 將圖片切割, export 為html
方法二：直接在 dreamweaver 之類的「製作」工具去拉出layout，導入圖片
方法三：先在 photoshop 中完成切圖後，在dreamweaver / notepad 中看着效果圖一步步的製作
以上是一般人的做法,但都不好：
第一種方法最差，generate 出來的code 根本難以修改
第二種方法也不好，會有多餘的code，做出來要再整理
第三種方法也不好，因為需要看效果來寫,即是寫html的時候，要不斷諗這個tag 要怎樣顯示
正確的做法是：
1.設計好 psd 後，什麼都不做，直接在dreamweaver/notepad中將網頁的框架寫出來，完全html，不加任何的 css
2.寫完之後在各個browser測試以確保大致定位都沒有問題
3.加入整體 css，這個 css 只負責各個分區(如HEADER, FOOTER, CONTENT等)的定位及樣式(STYLE)
4.在PHOTOSHOP中,一塊塊的切出需要的圖片，在先前寫好的框架中一點點的加入去(即是製造)，真的需要不斷的嘗試
5.最後，在CODE 之中加入COMMENT
=========================
實作
=========================
設計from photoshop(.PSD)
[img]http://img1.hidemyass.com/img/79LTA.gif[/img]
1. 首先, 規劃整個網頁的架構, 將整個網頁分為不同的區域, 方便設計style
[img]http://img1.hidemyass.com/img/38hTT.gif[/img]
2. 將header 切片
揀選header 的範圍, copy and paste at new document
[img]http://img1.hidemyass.com/img/olq2e.gif[/img]
3. 將navigator 切片
[img]http://img1.hidemyass.com/img/a925l.gif[/img]
4. 將content 切片
注意, 不用整個範圍都要, 只要足夠就得, 因為可以用css 不斷地重複, 好似舖牆紙咁
[img]http://img1.hidemyass.com/img/gi18B.gif[/img]
不用太多, 這樣就夠了
[img]http://img1.hidemyass.com/img/biy3Q.gif[/img]
5. 將footer 切片
[img]http://img1.hidemyass.com/img/xMzLl.gif[/img]
6. 最後是background
留意, 切的時候, 要上面可以接到下面, 左面可以接到右面, 否則拼出不致的背景
>>>[img]http://img1.hidemyass.com/img/SxYuR.gif[/img]<<<
7. 得出以下圖片, 將他們放入folder /images/ 入面
[img]http://img1.hidemyass.com/img/BpUkA.gif[/img]
8. 跟住, 就先建立一個好的html 架構, 主要分header, content, footer 等
[quote]<body>
<!-- wrap starts here -->
<div id="wrap">
<div id="[color=Red]header[/color]">
<!--HEADER INFO WILL GO HERE -->
</div>
<div id="[color=Red]menu[/color]">
<!--NAVIAGTION HERE -->
</div>
<div id="content-wrap"><!-- content-wrap starts here -->
<div id="[color=Red]main[/color]">
<!--MAIN CONTENT HERE -->
</div>
<div id="[color=Red]sidebar[/color]">
<!--SIDE BAR LINKS HERE -->
</div>
</div><!-- content-wrap ends here -->
<div id="[color=Red]footer[/color]">
<!--FOOTER HERE -->
</div>
<!-- wrap ends here -->
</div>
</body>[/quote]
9. 在<head>與</HEAD> 中間加入<link rel="stylesheet" href="styles.css" mce_href="styles.css" type="text/css" />
並用建立一個styles.css 的CSS 檔
並加入BODY 的style
[quote]
/********************************************
HTML ELEMENTS
********************************************/
* { margin: 0; padding: 0; outline: 0; }
body {
background-color: #fff; /*背景顏色*/
background-image: url(images/bg.gif); /*背景圖案*/
background-repeat: repeat; /*不斷重複*/
color: #333333; /*文字顏色*/
margin: 15px 0; /*set margin*/
font-family: Verdana, Tahoma, arial, sans-serif; /*字型*/
font-size: 70%; /*字型大小*/
line-height: 1.5em; /*行高*/
}
[/quote]
10. 開始放逐個區域放入圖片及排位, 注意, 暫時用的是css, 不是html
[quote]
/********************************************
WEBSITE LAYOUT
********************************************/
#wrap {
width: 790px; /*限制整頁的闊度*/
background: #CCC url(images/content.jpg) repeat-y center top; /*背景, 並只有單方向重覆*/
margin: 0 auto; /*網頁置中*/
text-align: left; /*文字靠左*/
}
#content-wrap {
clear: both; /*不容許左右兩旁有別的div*/
width: 760px; /*content 的闊度*/
margin: 5px auto; /*set margin*/
padding: 0; /*set padding*/
}
#header {
position: relative; /*relatve: 根據原本的位置作為0,0*/
height: 131px; /*header 的高度 = image的高度*/
background: #caced1 url(images/header.jpg) no-repeat center top; /*以圖片為背景*/
padding: 0;
}
[/quote][img]http://img1.hidemyass.com/img/UXtLI.gif[/img]
11. 跟住 style navigation
[quote]/********************************************
WEBSITE NAVIAGTION
********************************************/
#menu {
clear: both; /*兩旁不容許有float object*/
margin: 0 auto; /*置中*/
padding: 0;
background: #81C524 url(images/menu.jpg) no-repeat; /*以圖片為背景*/
height: 40px; /*圖片高度*/
width: 790px; /*menu闊度*/
font-family: Verdana, Arial, Helvetica, sans-serif; /*字型*/
font-size: 14px; /*文字大小*/
line-height: 40px; /*行高*/
}
#menu ul {
float: left; /*靠左*/
list-style: none;
margin:0; padding: 0 0 0 20px;
}
#menu ul li {
display: inline; /*強制在element 後沒有line break*/
}
#menu ul li a {
display: block;
float: left;
padding: 0 12px;
color: #fff; /*Font color*/
text-decoration: none;
}
#menu ul li a:hover {
color: #E00000; /*Mouseover hover color*/
}[/quote]
[img]http://img1.hidemyass.com/img/57XhT.gif[/img]
12. CONTENT, SIDEBAR, FOOTER
[quote]/********************************************
MAIN COLUMN
********************************************/
#main {
float: right; /*靠右*/
width: 555px; /*content 闊度*/
margin: 0; padding: 20px 0 0 0;
display: inline;
}
#main h2 { /*標題*/
padding: 0;
margin-bottom: 0;
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 180%;
font-style: normal;
font-weight: bold;
}
#main h2 a {/*標題中的連結*/
color: #2666c3;
text-decoration: none; /*消除連結中的底線*/
}
#main p, #main h1, #main h2, #main h3, #main ol, #main ul,
#main blockquote, #main table, #main form {
margin-left: 25px;
margin-right: 20px;
}
/********************************************
SIDEBAR
********************************************/
#sidebar {
float: left; /*靠左*/
width: 195px; /*SIDEBAR 闊度*/
padding: 0;
color: #333333;
margin-top: 5px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
#sidebar h2 { /*sidebar 中的標題*/
margin: 15px 5px 10px 5px;
font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
color: #333333;
}
#sidebar p {
margin-left: 5px;
}
#sidebar ul.sidemenu { /*sidebar中的menu*/
list-style: none;
text-align: left;
margin: 7px 10px 8px 0; padding: 0;
text-decoration: none;
border-top: 1px solid #A9D4EF;
}
#sidebar ul.sidemenu li {
list-style: none;
padding: 4px 0 4px 5px;
margin: 0 2px;
color: #333333;
border-bottom: 1px solid #D2E8F7;
}
* html body #sidebar ul.sidemenu li {
height: 1%;
}
#sidebar ul.sidemenu li a {
text-decoration: none;
color: #FF0000;
}
#sidebar ul.sidemenu li a:hover {color: #333;}
#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.sidemenu ul li { border: none; }
/********************************************
FOOTER
********************************************/
#footer {
color: #333333;
background: #caced1 url(images/footer.jpg) no-repeat center top;
clear: both;
width: 790px;
height: 57px;
text-align: center;
font-size: 90%;
}
#footer p {
padding: 10px 0;
margin: 0;
}
#footer a {
color: #FF0000;
text-decoration: none;
}
[/quote]
[img]http://img1.hidemyass.com/img/gJ5Fv.gif[/img]
13. 改完晒d style, 可以返去html入面, 加返d 內容就得喇
navigation 內容
[quote]<!-- navigation -->
<div id="[color=Red]menu[/color]">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Archives</a></li>
<li><a href="index.html">Downloads</a></li>
<li><a href="index.html">Services</a></li>
<li><a href="index.html">Support</a></li>
<li><a href="index.html">About</a></li>
</ul>
11
</div>
[/quote]
[img]http://img1.hidemyass.com/img/HRTlg.gif[/img]
14. 其他的都是這樣
[img]http://img1.hidemyass.com/img/ra89a.gif[/img]
完成!!!!!!
[[i] 本帖最後由 zero_man 於 2010-5-4 05:06 PM 編輯 [/i]]