把psd頁面利用div

把psd頁面利用div

ID：6133229

大小：539.50 KB

頁數(shù)：12頁

時(shí)間：2018-01-04

把psd頁面利用div_第1頁
把psd頁面利用div_第2頁
把psd頁面利用div_第3頁
把psd頁面利用div_第4頁
把psd頁面利用div_第5頁
資源描述：

《把psd頁面利用div》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫。

1、把psd頁面利用div+css切割成html頁面首先看看效果下面的圖片就是效果圖，切割出來后，可能頭部和底部會(huì)寬點(diǎn).....新建文件夾開始時(shí)，在您的計(jì)算機(jī)中創(chuàng)建一個(gè)文件夾。我把它命名為zmool。再在文件夾中創(chuàng)建新文件夾images，放網(wǎng)站的所有圖像。接下來打開代碼編輯器（Dreamweaver），并在根目錄下創(chuàng)建一個(gè)HTML文件名為index.html，這是我們的主頁模板?，F(xiàn)在創(chuàng)建一個(gè)新的CSS文件，并將其命名為style.css文件。如下圖：打開index.html文件。在head標(biāo)簽頂部，添加鏈接到您的樣式表（style.css）。你可以使用下面的代碼。

2、style.css"rel="stylesheet"type="text/css"/>頭部的代碼如下面:ModernDe</p><p>3、signStudio建立HTML結(jié)構(gòu)現(xiàn)在，我們將設(shè)置HTML文件結(jié)構(gòu)。設(shè)置3個(gè)部分（標(biāo)題，內(nèi)容，頁腳）像下面一樣:

4、/xhtml">UntitledDocument

切割背景我們的PSD文件包含了很多紋理效果，我們要把這些全部切出來，然后

5、，用代碼添加到網(wǎng)頁上面，使div頁面效果和設(shè)計(jì)的效果達(dá)到一致。

現(xiàn)在在photoshop里面打開原先設(shè)計(jì)好的,隱藏所以的圖層，除背景層外.現(xiàn)在采取的切片工具，選擇背景，保存網(wǎng)頁web格式按（ALT+shift+Ctrl+S）。然后保存的圖像文件夾文件名為background.jp

6、g。設(shè)置背景樣式打開style.css文件，設(shè)置基本樣式，還有背景樣以及主體部分的寬度，如下代碼：*{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

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

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

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

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