標籤：creat doc effective 今天 logo ext ctr color photoshop
今天的這個教程，教大家如何把psd頁面利用div+css切割成html頁面，這類的教程，本站做的一直都很少，大多講的都比較零碎的一些東西，在今後，我們將慢慢發布翻譯出更多這類的教程，供大家學習，轉載請著名來源，以及站碼翻譯，謝謝.... 首先看看效果下面的圖片就是，切割出來後，可能頭部和底部會寬點..... 建立檔案夾開始時，在您的電腦中建立一個檔案夾。我把它命名為zmool。再在檔案夾中建立新檔案夾images，放網站的所有映像。接下來開啟代碼編輯器（Dreamweaver），並在根目錄下建立一個HTML檔案名稱為index.html，這是我們的首頁模板。現在建立一個新的CSS檔案，並將其命名為style.css檔案。如： 開啟index.html檔案。在head標籤頂部，添加連結到您的樣式表（style.css）。你可以使用下面的代碼。
<link href="style.css" rel="stylesheet" type="text/css" /> 頭部的代碼如下面: <!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>Modern Design Studio</title><link href="style.css" rel="stylesheet" type="text/css" /></head><body></body></html>建立HTML結構 現在，我們將設定HTML檔案結構。設定3個部分（標題，內容，頁尾）像下面一樣: <!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>Untitled Document</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body><div id="header"></div><div id="content"></div><div id="footer"></div></body></html>切割背景 我們的PSD檔案包含了很多紋理效果，我們要把這些全部切出來，然後，用代碼添加到網頁上面，使div頁面效果和設計的效果達到一致。 <body><div id="header"> <div id="container"> </div></div><div id="content"> <div id="container"> </div></div><div id="footer"> <div id="container"> </div></div></body> 現在在photoshop裡面開啟原先設計好的, 隱藏所以的圖層，除背景層外. 現在採取的切片工具，選擇背景，儲存網頁web格式按（ALT +shift+Ctrl + S）。然後儲存的影像檔夾檔案名稱為background.jpg。 設定背景樣式開啟style.css檔案，設定基本樣式，還有背景樣以及主體部分的寬度，如下代碼： * { margin: 0px; padding: 0px;}body{ background:url(images/background.jpg);}#container{ margin: auto; width: 960px;}切割頭部 返回photoshop，隱藏所以圖層，除頭部背景外，並用同樣的方法，把頭部背景圖片切割儲存為web格式，儲存檔案名稱為head.jpg。 編輯頭部背景代碼在style.css檔案裡編輯如下代碼: #header{background:url(images/header.jpg);height:124px;}切割頭部logo在這時，切割logo層，隱藏所有圖層，包括背景層，如上同樣方法切割logo層儲存為logo.png，注意：儲存為png格式圖片 添加在頁面添加logo現在返回到html中，在#header #container內,添加下面的代碼<div id="logo">....</div>. <div id="header"> <div id="container"> <div id="logo"><a href="#"><img src="images/logo.png" class="logo"></a></div> </div></div> 現在, 下面切換到style.css檔案，編寫#logo樣式. #logo{margin-top:20px;border:none;}編輯導航代碼下面是頁面裡的代碼，頭部header包括logo和導航兩個部分. <div id="header"> <div id="container"> <div id="logo"><a href="#"><img src="images/logo.png" class="logo"></a></div> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div></div>導航樣式如下： 現在,添加css表裡的導航樣式~，ul、li和連結a的樣式: #header li{color:#959595;list-style:none;float:left;margin-right:20px;font-family:"Myriad Pro",arial;font-weight:bold;font-size:24px;}#header li a{color:#959595;text-decoration:none;padding:10px;}#header ul{float:right;margin-top:-40px;}#header li a:hover{background:#202020;color:#d2d2d2;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;}現在製作中間部分現在我們在頁面的中間部分content添加兩個div，如： <div id="content"> <div id="container"> <div id="featured"> </div> <div id="paragraphs"> </div> </div></div> 切換到photoshop的psd頁面, 切下中間部分，取名為featured.jpg.如：
在你的HTML頁面添加如下代碼， 和一些文字介紹: <div id="content"> <div id="container"> <div id="featured"> <a href="#">MORE PROJECTS</a> <p class="dummytext"><span>Portfolio project, Jan 5th, 2010</span> Have you ever wanted to create clean and nice portfolio design? In this tutorial I will show you how to design clean blue portfolio layout. Have you ever wanted to create clean and nice portfolio design? In this tutorial I will show you how to design clean blue portfolio layout in Adobe Photoshop.</p> </div> <div id="paragraphs"> </div> </div></div> 在PSD檔案裡，隱藏其他所以圖層，只留下按鈕圖層部分，切下按鈕部分，儲存png格式，命名為button.png. 現在我們把這些圖片添加到頁面中去，切換到css檔案頁面，添加如下代碼，這裡包括背景樣式，和按鈕的樣式. #featured{background:url(images/featured.jpg) no-repeat;height:381px;margin-top:30px;margin-left:80px;}#featured a{background:url(images/button.png);height:30px;width:124px;text-indent:-9999px;position:absolute;margin-top:330px;margin-left:180px;}#featured a:hover{background-position:0px 30px;}現在我們添加些dummytext（文字介紹）的樣式: .dummytext{color:#d2d2d2;width:245px;margin-top:150px;position:absolute;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:180%;margin-left:290px;}.dummytext span{font-size:16px;color:#191919;font-weight:bold;}下面添加添加圖片展示下面的分類介紹部分頁面的代碼部分如下. <div id="paragraphs"> <p class="paragraph"> <span>BEAUTIFUL</span>WebDesignFan is a design related blog about web design, photoshop, freebies and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free resources like vectors, wordpress themes and a lot of inspiration. </p> <p class="paragraph"> <span>EFFECTIVE</span>WebDesignFan is a design related blog about web design, photoshop, freebies and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free resources like vectors, wordpress themes and a lot of inspiration. </p> <p class="paragraph"> <span>FUNCTIONAL</span>WebDesignFan is a design related blog about web design, photoshop, freebies and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free resources like vectors, wordpress themes and a lot of inspiration. </p></div> 我們中間部分的內容，整體看起來應該是這樣的: <div id="content"> <div id="container"> <div id="featured"> <a href="#">MORE PROJECTS</a> <p class="dummytext"><span>Portfolio project, Jan 5th, 2010</span> Have you ever wanted to create clean and nice portfolio design? In this tutorial I will show you how to design clean blue portfolio layout. Have you ever wanted to create clean and nice portfolio design? In this tutorial I will show you how to design clean blue portfolio layout in Adobe Photoshop.</p> </div> <div id="paragraphs"> <p class="paragraph"> <span>BEAUTIFUL</span>WebDesignFan is a design related blog about web design, photoshop, freebies and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free resources like vectors, wordpress themes and a lot of inspiration. </p> <p class="paragraph"> <span>EFFECTIVE</span>WebDesignFan is a design related blog about web design, photoshop, freebies and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free resources like vectors, wordpress themes and a lot of inspiration. </p> <p class="paragraph"> <span>FUNCTIONAL</span>WebDesignFan is a design related blog about web design, photoshop, freebies and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free resources like vectors, wordpress themes and a lot of inspiration. </p> </div> </div></div> 去你的CSS檔案添加下面的代碼， #paragraphs span{font-family:"Myriad pro", Helvetica, sans-serif;font-size:22px;font-weight:600;letter-spacing:-2px;}#paragraphs{margin-left:80px;font-family:Arial, Helvetica, sans-serif;color:#191919;font-size:12px;margin-top:15px;}.paragraph{width:250px;margin-left:15px;float:left;}這個就是我們到目前位置的效果: 下面處理網站底部現在，我們完成該部分內容，我們將開始建立頁尾. 首先，在你的PSD檔案中，隱藏除頁尾和頁尾紋理層外的其他層，然後把頁尾檔案夾的東西切片並儲存為footer.jpg. 然後再切一遍，把按鈕和鳥的圖形切下來.分別取名為follow.png和 bird.jpg. 編輯底部代碼底部頁尾包括一些文字和一個帶有連結的小鳥圖片. 所以在HTML頁面添加如下代碼. <div id="footer"> <div id="container"> <p>2010 © Fictional Design Studio. Design by Webdesignfan.</p> <a href="#">Follow us on Twitter</a> <img src="images/bird.jpg" /> </div></div> 現在, 編輯底部footer樣式的代碼，如下: #footer{background:url(images/footer.jpg);height:71px;margin-top:191px;}#footer p{font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#959595;position:absolute;margin-top:30px;}#footer a{background:url(images/follow.png);text-indent:-9999px;position:absolute;height:27px;width:124px;margin-left:730px;margin-top:30px;}#footer img{float:right;margin-top:10px;}我們用footer.jpg 做頁尾的背景，然後添加一些文字的樣式. 對於底部的鳥圖片的連結，我們用之前同樣的辦法，利用浮動效果定位。 最終效果檔案 (0,7 MB)到現在就算是結束了，不知道大家有沒有看懂，不懂的就留言，什麼地方不懂，我再添加修改下，哈哈~ .
|
PSD網頁切圖製作HTML全過程教程
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
