符合Web標準的企業(yè)網站的要求

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

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

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