符合Web標(biāo)準(zhǔn)的企業(yè)網(wǎng)站的要求

1、第27章 符合Web標(biāo)準(zhǔn)的企業(yè)網(wǎng)站制作前面幾章學(xué)習(xí)了采用傳統(tǒng)的表格布局來制作各種網(wǎng)站，我們前面講過表格布局雖然簡(jiǎn)單易用，但也存在很多弊端。Web標(biāo)準(zhǔn)拋棄了傳統(tǒng)的表格布局方式，采用層（Div）布局，并且使用層疊樣式表（CSS）設(shè)置頁面的外觀，從而實(shí)現(xiàn)內(nèi)容與表現(xiàn)相分離。本章將通過具體實(shí)例來學(xué)習(xí)符合Web標(biāo)準(zhǔn)的企業(yè)網(wǎng)站制作。主要制作步驟也包括設(shè)計(jì)圖的分析，在Fireworks中切割圖像，在Dreamweaver中制作網(wǎng)頁等。但各個(gè)環(huán)節(jié)與傳統(tǒng)表格布局的網(wǎng)站有很大不同。通過學(xué)習(xí)本實(shí)例，讀者既可以熟悉符合Web標(biāo)準(zhǔn)的網(wǎng)站制作的全過程，又可以復(fù)習(xí)鞏固所學(xué)知識(shí)。成都網(wǎng)絡(luò)電話：27.1 設(shè)計(jì)圖分析本實(shí)例是一個(gè)公

2、司的網(wǎng)站，其網(wǎng)頁設(shè)計(jì)圖如圖27.1所示。網(wǎng)頁包括“公司簡(jiǎn)介”、“產(chǎn)品介紹”、“購買商品”、“聯(lián)系我們”、“招聘信息”等五個(gè)欄目。頁面自上而下分為Logo區(qū)域、Banner與導(dǎo)航區(qū)域、內(nèi)容區(qū)域、頁腳區(qū)域。成都網(wǎng)絡(luò)電話：27.1.1 布局分析搞清楚網(wǎng)頁的布局方式，對(duì)于后面搭建頁面非常重要。這將指導(dǎo)如何切割圖像以及如何創(chuàng)建層結(jié)構(gòu)。網(wǎng)頁采用的是常見的分欄式結(jié)構(gòu)，其布局圖如圖27.2所示。成都網(wǎng)絡(luò)電話：27.1.2 配色分析接下來需要從設(shè)計(jì)圖稿中提取各區(qū)域和字體的顏色。具體操作步驟如下：成都網(wǎng)絡(luò)電話：27.2 在Fireworks中切圖利用Fireworks的“切片”功能，可以將頁面需要的圖像從設(shè)計(jì)圖稿

3、中提取出來，并導(dǎo)出為適合在網(wǎng)頁上使用的圖形格式。成都網(wǎng)絡(luò)電話：27.2.1 切割圖像切割圖像成都網(wǎng)絡(luò)電話：27.2.2 將圖像切片導(dǎo)出在導(dǎo)出切片時(shí)，顏色較少且變化不大的切片最好導(dǎo)出為gif格式的圖像，這樣可以圖像尺寸很??；顏色較豐富的切片最好導(dǎo)出為jpeg格式的圖像，能較好地保留色彩信息。在本實(shí)例中，將banner切片設(shè)置為jpeg格式，背景切片設(shè)為gif格式。具體操作步驟如下：成都網(wǎng)絡(luò)電話：27.3 在Dreamweaver中制作網(wǎng)頁現(xiàn)在就到了在Dreamweaver CS4中制作網(wǎng)頁環(huán)節(jié)。主要包括定義站點(diǎn)、創(chuàng)建層結(jié)構(gòu)、向?qū)又胁迦雰?nèi)容、設(shè)置超鏈接、添加CSS樣式表等幾個(gè)步驟。下面一一來介紹。成都網(wǎng)絡(luò)電話：27.3.1 定義站點(diǎn)具體操作步驟如下：成都網(wǎng)絡(luò)電話：27.3.2 創(chuàng)建層在前面的布局分析環(huán)節(jié)，已經(jīng)對(duì)要?jiǎng)?chuàng)建的層結(jié)構(gòu)和大小有了清晰的認(rèn)識(shí)，下面就來創(chuàng)建層，具體操作步驟如下：成都網(wǎng)絡(luò)電話：27.3.3 向?qū)又刑砑觾?nèi)容接下來向創(chuàng)建好的層結(jié)構(gòu)中添加相應(yīng)的內(nèi)容。注意為了實(shí)現(xiàn)內(nèi)容與表現(xiàn)的分離，在層中只插入網(wǎng)頁的具體內(nèi)容，修飾用的圖像，如背景圖像等不插入到層中。具體操作步驟如下：成都網(wǎng)絡(luò)電話：27.3.4 設(shè)置超鏈接具體操作步驟如下：成都網(wǎng)絡(luò)電話：27.3.5 添加CSS樣式表1設(shè)置標(biāo)簽2設(shè)置main層3設(shè)置Logo層4設(shè)置head層5設(shè)置link層6設(shè)置層content7設(shè)置層left