photoshop網(wǎng)頁切圖教程

photoshop網(wǎng)頁切圖教程

ID：16016324

大?。?01.00 KB

頁數(shù)：10頁

時間：2018-08-07

photoshop網(wǎng)頁切圖教程_第1頁
photoshop網(wǎng)頁切圖教程_第2頁
photoshop網(wǎng)頁切圖教程_第3頁
photoshop網(wǎng)頁切圖教程_第4頁
photoshop網(wǎng)頁切圖教程_第5頁
資源描述：

《photoshop網(wǎng)頁切圖教程》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、PSD網(wǎng)頁切圖制作HTML教程把psd頁面利用div+css切割成html頁面首先看看效果下面的圖片就是效果圖，切割出來后，可能頭部和底部會寬點.....新建文件夾開始時，在您的計算機中創(chuàng)建一個文件夾。我把它命名為zmool。再在文件夾中創(chuàng)建新文件夾images，放網(wǎng)站的所有圖像。接下來打開代碼編輯器（Dreamweaver），并在根目錄下創(chuàng)建一個HTML文件名為index.html，這是我們的主頁模板?，F(xiàn)在創(chuàng)建一個新的CSS文件，并將其命名為style.css文件。如下圖：打開index.html文件。

2、在head標簽頂部，添加鏈接到您的樣式表（style.css）。你可以使用下面的代碼。頭部的代碼如下面:

3、xhtml">ModernDesignStudio建立HTML結(jié)構(gòu)現(xiàn)在，我們將設(shè)置HTML文件結(jié)構(gòu)。設(shè)置3個部分（標題，內(nèi)容，頁腳）像下面一樣:

4、LIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">UntitledDocument

5、lesheet"type="text/css"href="style.css"/>

切割背景我們的PSD文件包含了很多紋理效果，我們要把這些全部切出來，然后，用代碼添加到網(wǎng)頁上面，使div頁面效果和設(shè)計的效果達到一致。

6、現(xiàn)在在photoshop里面打開原先設(shè)計好的,隱藏所以的圖層，除背景層外.現(xiàn)在采取的切片工具，選擇背景，保存網(wǎng)頁web格式按（ALT+shift+Ctrl+S）。然后保存的圖像文件夾文件名為background.jpg。設(shè)置背景樣式打開style.css文件，設(shè)置基本樣式，還有背景樣以及主體部分的寬度，如

7、下代碼：*{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);heig

8、ht:124px;}切割頭部logo在這時，切割logo層，隱藏所有圖層，包括背景層，如上同樣方法切割logo層保存為logo.png，注意：保存為png格式圖片添加在頁面添加logo現(xiàn)在返回到html中，在#header#container內(nèi),添加下面的代碼.....

當前文檔最多預(yù)覽五頁，下載文檔查看全文

此文檔下載收益歸作者所有

當前文檔最多預(yù)覽五頁，下載文檔查看全文
溫馨提示：
1. 部分包含數(shù)學(xué)公式或PPT動畫的文件，查看預(yù)覽時可能會顯示錯亂或異常，文件下載后無此問題，請放心下載。
2. 本文檔由用戶上傳，版權(quán)歸屬用戶，天天文庫負責整理代發(fā)布。如果您對本文檔版權(quán)有爭議請及時聯(lián)系客服。
3. 下載前請仔細閱讀文檔內(nèi)容，確認文檔內(nèi)容符合您的需求后進行下載，若出現(xiàn)內(nèi)容與標題不符可向本站投訴處理。
4. 下載文檔時可能由于網(wǎng)絡(luò)波動等原因無法下載或下載錯誤，付費完成后未能成功下載的用戶請聯(lián)系客服處理。
相關(guān)標簽