博客首頁制作方法

ID：14493766

大小：1.96 MB

頁數(shù)：23頁

時(shí)間：2018-07-29

資源描述：

《博客首頁制作方法》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、今天我們來做第二張首頁網(wǎng)頁，首先我們先來分析下這個(gè)頁面：這里也分為最上面的頁眉部分，然后大的通欄部分，接著是分成兩列的內(nèi)容部分，左邊分成三行，右邊是相應(yīng)的內(nèi)容部分和最后的頁腳。整體頁面看上去非常的簡單，不是非常難，難點(diǎn)在：上面的斜角圖片這里：所有的這些斜角圖片我們要去給他定位，同時(shí)要定位到相應(yīng)的位置上，這是如何做到的，這是一個(gè)難點(diǎn)。第二根問題相對(duì)比較復(fù)雜的是：放大比例大家可以看到我們的框外面有灰框、白邊再加灰邊這三種不同的效果，這是怎么做的？這是多個(gè)

嵌套的結(jié)果。好了，現(xiàn)在FW里來作下切片然后就可以進(jìn)入到兩幅預(yù)覽狀態(tài)進(jìn)行優(yōu)化：LOGO:優(yōu)化

2、為：gif格式精確三張小圖片：jpg的格式品質(zhì)80通欄大圖片：jpg的格式品質(zhì)60優(yōu)化為：gif格式精確字也是：gif格式精確頁腳LOGO:優(yōu)化為：gif格式精確按鈕小切片：jpg的格式品質(zhì)100背景小切片優(yōu)化為：gif格式精確接著使用文件——導(dǎo)出：接著還要再這里單獨(dú)再切一下斜角切片，單獨(dú)處理它：將這個(gè)斜角選中：先將兩個(gè)多邊形的邊角選中，選擇修改菜單下的——片面化所選，接著選擇位圖工具里面的矩形選框?qū)⒍嘤嗟牡胤絼h除：復(fù)制一下，新建一個(gè)畫布，畫布顏色點(diǎn)透明，切貼在里面，然后選擇屬性面板里的符合畫布的命令將大小此存確定，然后選擇文件——圖像預(yù)覽，進(jìn)行優(yōu)

3、化：GIF最適合索引色透明導(dǎo)出保存在img文件里起名叫：newwork同樣的道理將設(shè)計(jì)教程也照剛才的辦法進(jìn)行優(yōu)化保存。保存起名叫教程：現(xiàn)在大家看那看還有沒有需要切的地方：是不是整個(gè)大的背景？這個(gè)大的背景是不是帶有一個(gè)漸變色？但是大家可以看到這么多東西把他蓋住了，怎么辦？打開我們的圖層面板：隱藏頁腳、內(nèi)容、頁眉只顯示背景，接著選擇隱藏切片：只剩下背景，然后選擇裁剪工具。將這張圖裁下來即可接著選擇文件菜單下的——圖像預(yù)覽接著再用裁剪工具裁出這么一小塊：基本上我們都切完了。這下就可以回到DW里面繼續(xù)來添加內(nèi)容頁面的信息。在站點(diǎn)里新建頁面1的網(wǎng)頁和相對(duì)應(yīng)的

4、CSS樣式表在public1.css樣式表寫：body,html{margin:0;padding:0;background:url(../img/bgtop.gif)repeat-xtop;}repeat-x水平重復(fù)top局頂，保存刷新看效果。整個(gè)頁面有個(gè)背景顏色，在FW將這個(gè)背景顏色吸取過來，#C4C0BFbody,html{margin:0;padding:0;background:url(../img/bgtop.gif)repeat-xtop#C4C0BF;}整個(gè)頁面的設(shè)置是不是就完成了，保存刷新看效果。好緊接著回到源代碼里面來，將基本樣

5、式寫出來：在這里我們可以分為：頁眉、內(nèi)容、頁腳三大部分同時(shí)這三大部分是不是都是居中在頁面中的，所以可以看成是一個(gè)大的內(nèi)容包含了三個(gè)小內(nèi)容：首先先來寫居中的DIV：

container容器的意思好所有的三大部分都坐在這個(gè)容器的

里，因此復(fù)制黏貼修改內(nèi)容id名稱：

6、container大的容器里面的內(nèi)容：進(jìn)入public1.css樣式表寫：html{background:url(../img/bgtop.gif)repeat-xtop#C4C0BF;}給個(gè)背景圖片不重復(fù)局頂body{background:url(../img/bg.jpg)no-repeattopcenter;}#container{width:910px;margin:0auto;}寬度910居中保存刷新看效果。接下來寫header：#header{width:910px;height:100px;padding-top:20px;}保存刷新

7、看效果。接著在里面分左邊的圖片加文字，右邊的文字鏈接。進(jìn)入源代碼，先來加這個(gè)LOGO圖片：在

博客首頁制作方法

博客首頁制作方法

網(wǎng)頁效果圖設(shè)計(jì)資源和教程

相關(guān)文章

相關(guān)標(biāo)簽