純靜態(tài)網(wǎng)頁畢業(yè)論文

1、<p>　　第一章 網(wǎng)站設計環(huán)境介紹</p><p>　　隨著計算機應用的發(fā)展，網(wǎng)站已經(jīng)是展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務、體現(xiàn)企業(yè)發(fā)展戰(zhàn)略的重要途徑。網(wǎng)頁設計是科技與藝術的結合，是商業(yè)社會的產(chǎn)物。雖然網(wǎng)頁設計也是平面設計中的一個方面，但是網(wǎng)頁設計有其獨特的設計要求與原則，在設計網(wǎng)頁之前要對其有所了解。</p><p>　　第一節(jié) 因特網(wǎng)和萬維網(wǎng)</p><p

2、><b>　　一、何為因特網(wǎng)</b></p><p>　　大家可能對因特網(wǎng)（Internet）這個詞不會感到陌生，因特網(wǎng)是由許許多多計算機連接在一起構成的一個計算機網(wǎng)絡，在這個網(wǎng)絡中，人們可以使用各自的計算機互相傳遞信息；可以在自己的計算機上存儲文件供別人訪問；可以利用多臺計算機實現(xiàn)分布式應用。Internet規(guī)模龐大，遍及全球，一旦上網(wǎng)，你就與全球無以計數(shù)的計算機連成一體。</

3、p><p><b>　　二、何為萬維網(wǎng)</b></p><p>　　有上網(wǎng)經(jīng)歷的會知道，在瀏覽器的地址欄中經(jīng)常出現(xiàn)“WWW”，比如要訪問百度網(wǎng)站就需輸入“WWW.baidu.com”。其中的三個“W”是英文World Wide Web的縮寫，中文譯為萬維網(wǎng)。萬維網(wǎng)是無數(shù)個網(wǎng)絡站點和網(wǎng)頁的集合，它們在一起構成了因特網(wǎng)最主要的部分（因特網(wǎng)還包括電子郵件、Usenet以及新聞組

4、等應用）。</p><p>　　萬維網(wǎng)實際上是多媒體的集合，各個部分由超級鏈接連接而成。我們通常使用瀏覽器上網(wǎng)觀看的內容，就是萬維網(wǎng)的內容。比如在瀏覽器中輸入“www.sina.com.cn”,就可以訪問新浪網(wǎng)站的首頁。網(wǎng)頁也稱作Web頁面或Web文檔，它包含了文字、圖像、動畫和一些具有交互功能的控件。</p><p>　　第二節(jié) 相關術語解釋</p><p>　

5、　一、Internet</p><p>　　Internet(英特網(wǎng))誕生于上世紀60年代，發(fā)展非常慢，到90年代才開始迅速發(fā)展?，F(xiàn)在英特網(wǎng)已經(jīng)是世界上最大的網(wǎng)絡的，聯(lián)在英特網(wǎng)上的電腦有數(shù)億臺。上面的資料、信息數(shù)不勝數(shù)，所以有人把英特網(wǎng)叫成是信息的海洋、知識的海洋。</p><p><b>　　二、站點</b></p><p>　　所謂站點，就

6、是將網(wǎng)頁文件和素材文件，有條理地放置站點文件夾里，這些文件與文件夾就構成了網(wǎng)站的實質內容。站點文件夾里除了網(wǎng)頁文件還有素材文件，所謂素材就是網(wǎng)頁中所用到的圖像、聲音、視頻等，這些內容是以單獨文件的形式存在。</p><p><b>　　三、超鏈接</b></p><p>　　我們在瀏覽網(wǎng)頁時，當鼠標指針指向某段文本或是某個圖像，鼠標指針變成小手狀，單擊鼠標可以打開其他

7、的網(wǎng)頁或是跳轉到其他的網(wǎng)站，這就是超鏈接。采用超鏈接技術可以將不同的網(wǎng)站、網(wǎng)站中的不同網(wǎng)頁、網(wǎng)頁中的不同位置彼此串在一起，實現(xiàn)相互間的跳轉，方便信息的瀏覽和查找。人們通過超鏈接可以很方便很迅速地訪問分布于全球計算機上的海量資源，實現(xiàn)在互聯(lián)網(wǎng)中的漫游。超鏈接能使Web服務存在廣泛和持久的生命力，超鏈接可以說是Web的靈魂。</p><p><b>　　四、URL</b></p>

8、<p>　　URL（Uniform Resource Locator的縮寫），統(tǒng)一資源定位器?；ヂ?lián)網(wǎng)中某種信息資源以某種方式存儲在網(wǎng)絡中的某處，必須用一個惟一的URL來進行標識，這樣才能方便查找。對于Web來說，可以簡單并通俗把URL理解為網(wǎng)址。每個Web網(wǎng)頁都有自己的網(wǎng)址，在瀏覽器地址欄里輸入網(wǎng)頁的URL，就可以訪問這個網(wǎng)頁。例如，http://www.sina.com/index.html，其意思就是采用http超文本傳輸

9、協(xié)議訪問新浪網(wǎng)的首頁，由于網(wǎng)頁均是通過http超文本傳輸協(xié)議進行訪問，默認下，“http://”可以省略不輸。</p><p><b>　　五、IP地址</b></p><p>　　為了使互聯(lián)網(wǎng)上的電腦主機在通信時能夠相互識別，每臺主機都分配一個能表示其位置的IP（Internet Protocol）地址，這如同公用電話網(wǎng)中電話的號碼一樣。IP地址是由專門的互聯(lián)網(wǎng)機構

10、來分配。IP地址具有惟一性，是由32位二進制數(shù)組成，分為四組，每組8位，每組之間用小數(shù)點分隔，在實際之中常轉換成十進制數(shù)表示。</p><p><b>　　六、網(wǎng)頁</b></p><p>　　網(wǎng)頁，是網(wǎng)站中的一頁，通常是HTML格式（文件擴展名為.html或.htm或.asp或.aspx或.php或.jsp等）。網(wǎng)頁通常用圖像檔來提供圖畫。網(wǎng)頁要透過網(wǎng)頁瀏覽器來閱讀

11、。 </p><p>　　網(wǎng)頁是構成網(wǎng)站的基本元素，是承載各種網(wǎng)站應用的平臺。通俗的說，您的網(wǎng)站就是由網(wǎng)頁組成的。如果您只有域名和虛擬主機而沒有制作任何網(wǎng)頁的話，您的客戶仍舊無法訪問您的網(wǎng)站。 </p><p>　　所謂網(wǎng)站(Website)，就是指在網(wǎng)際網(wǎng)路（因特網(wǎng)）上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用於展示特定內容的相關網(wǎng)頁的集合。簡單地說，網(wǎng)站是一種通訊工具，就像布告欄一樣

12、，人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊（信息），或者利用網(wǎng)站來提供相關的網(wǎng)路服務（網(wǎng)絡服務）。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊（信息）或者享受網(wǎng)路服務。</p><p>　　第三節(jié) Web標準概述</p><p>　　一、什么是Web標準</p><p>　　Web標準是由W3C（World Wide Web Consortium）和其他標

13、準化組織指定的一系列規(guī)范的集合，其中包含了（X）HTML、XML和CSS。Web標準的目的在于創(chuàng)建一個統(tǒng)一的用于Web表現(xiàn)層的技術標準，以便通過不同瀏覽器或終端設備向最終用戶展示信息內容。</p><p><b>　　二、Web的認識</b></p><p>　　Web(World Wide Web，簡稱WWW，又稱萬維網(wǎng))是目前Internet上應用最廣泛也是最重要

14、的信息服務類型，它已經(jīng)影響了Internet上的廣告、新聞、電子商務和展示信息等各個服務領域。 Web采用瀏6hy覽器/服務器（B/S）工作模式，其運作模式可以描述為：請求→處理→應答。</p><p>　　Web以超文本標記語言HTML(Hyper Text Markup Language)與超文本傳輸協(xié)議HTTP(Hyper Text Transfer Protocol)為基礎，通過瀏覽器為用戶提供方便友好的

15、信息瀏覽界面。 Web將位于全世界互聯(lián)網(wǎng)上不同網(wǎng)址的相關信息有機地編織在一起。在Web服務方式中，信息以頁面（或稱Web頁）的形式存儲在Web服務器中，這些頁面采用超文本的方式對信息進行組織，通過鏈接將一頁信息鏈接到另一頁信息。這些相互鏈接的頁面既可以放置在同一臺主機上，也可以放置在不同的主機上。頁面到頁面的鏈接信息由統(tǒng)一資源定位器URL(Uniform Resource Locator)維持。用戶通過客戶端應用程序（即瀏覽器）向Web

16、服務器發(fā)出請求，服務器根據(jù)客戶端的請求將保存在服務器中的某個頁面返回給客戶端，瀏覽器接收到頁面后對其進行解釋，最終將信息以圖、文、聲并茂的形式呈現(xiàn)給用戶。 Web服務的特點在于高度的集成性，它能夠實現(xiàn)不同類型的信息（如文本、圖像、聲音、動畫和視頻等）和服務（如New、FTP、Telnet、Gopher及Mail等）的無縫鏈接，特別適合于廣域網(wǎng)中信息的</p><p>　　三、Web文檔的三層結構</p>

17、;<p>　　Web文檔通常包含三個不同的層次（見圖1.1）。首先是結構層，該層的內容是由（X）HTML編寫的文本文檔。它包含文檔的內容，以及由（X）HTML添加的語義化的標記。第二層為表現(xiàn)層，該層內容是CSS樣式代碼。它描述了文檔該以何種樣式呈現(xiàn)在訪問者面前，樣式包括頁面各部分的布局、文字段落排版、背景圖片和顏色等。第三層是行為層，該層定義了文檔模型以及如何與客戶進行交互，所涉及技術主要是DOM以及ECMAScript腳

18、本語言。</p><p>　　圖1.1 結構、表現(xiàn)和行為及各部分所涉及的技術</p><p>　　四、Web標準的優(yōu)勢</p><p><b>　　1、易于開發(fā)和維護</b></p><p>　　一個大型的網(wǎng)站往往需要很多人員的參與，他們的分工也不同，有負責樣式設計的，有負責頁面編碼的，有負責樣式編寫的等。由于內容結構和

19、表現(xiàn)的分離，不同開發(fā)人員可以獨立工作，專注于自己負責的內容。</p><p>　　樣式信息和內容是相互獨立的，因此同一個樣式信息可用于不同的內容中，從而實現(xiàn)代碼重用。這種做法可用減少重復編碼，加快開發(fā)進度。</p><p>　　樣式信息重用也使得維護工作大大減輕，只需要修改一小部分樣式代碼，就可以使所有用到該樣式的區(qū)域同時改變外觀。</p><p><b>

20、;　　2、高兼容性</b></p><p>　　由于W3C對Web標準的推動，越來越多的瀏覽器支持由W3C制定的各種標準，從而使得根據(jù)標準編寫的Web頁面在不同的瀏覽器中均能獲得一致的效果。</p><p><b>　　3、高靈活性</b></p><p>　　現(xiàn)在，越來越多的人使用手機或PDA訪問網(wǎng)站，通常這些設備的屏幕要遠遠小于

21、PC機的顯示器。網(wǎng)頁的內容和表現(xiàn)的分離使得我們可以針對不同平臺和設備應用不同的樣式文件，而網(wǎng)頁內容無須改動。對于需要打印輸出的頁面，我們也無須再提供另一份“適合打印”的頁面，取而代之的只是新的CSS樣式。</p><p><b>　　4、提高訪問速度</b></p><p>　　內容與表現(xiàn)的分離，使得頁面中不再包含冗余的樣式代碼，而獨立出來的樣式表可以充分地進行重用，

22、網(wǎng)頁整體代碼量大大減少。這樣不僅能占用更少的網(wǎng)絡帶寬，提高頁面載入速度，同時瀏覽器也能對頁面進行快速解析，顯示給用戶。</p><p><b>　　5、提高用戶體驗</b></p><p>　　從Web應用的角度看，用戶體驗（User Experience,UE）指的是Web應用程序能夠提供直觀簡潔的用戶界面、簡便的操作以及有效的交互方式。只有當用戶親自使用時才能體驗

23、帶它們。用戶體驗包含了多方面的內容，其中一致性、可用性等方面均通過標準化開發(fā)來實現(xiàn)。比如各個頁面使用統(tǒng)一的ＣＳＳ樣式，利用行為層技術改善交互設計等。</p><p>　　第四節(jié) Web設計技術</p><p>　　Web設計涵蓋的范圍相當廣，本節(jié)只介紹一些構建Web文檔所需的幾項最基本的技術。</p><p><b>　　一、HTML</b>

24、</p><p>　　HTML，英文全成為 HyperText Markup Language，中文譯為超文版標記語言。它是用來創(chuàng)建Web文檔的語言。頁面元素是由特定的標記來確定的，這些標記告訴瀏覽器該如何顯示這個頁面。所謂超文本，就是一種含有指向其他文檔鏈接的文本，即我們俗稱的鏈接。超文本把存放于不同計算機中的文檔鏈接在一起。訪問者不必關心鏈接所指的內容到底位于何處，只需要在鏈接上單擊一下鼠標，頁面馬上轉到所指

25、的文檔中去。</p><p><b>　　二、CSS</b></p><p>　　HTML可以將內容、結構和格式化的信息都包含在同一個Web文檔中，這樣做雖然簡單易行，但也存在很多問題。各種信息存放在一起不利于文檔的維護，修改起來費時費力。因此HTML應只負責文檔的內容和結構，而格式化信息交給一套新的語言來完成，這就是CSS，它也是本論文的主角。</p>

26、<p>　　CSS全稱為Cascading Style Sheet，中文譯為層疊樣式表（也有譯作級聯(lián)樣式表的）。其作用就是要控制HTML的頁面布局和外觀樣式，使Web文檔內容結構和表現(xiàn)形式完全分離。</p><p><b>　　第五節(jié) 瀏覽器</b></p><p>　　網(wǎng)頁和瀏覽器是分不開的，用戶正是通過瀏覽器來達到訪問網(wǎng)頁的目的。瀏覽器（Browse

27、r）是一種軟件程序，可以和網(wǎng)絡建立連接并與之通信。它可以將存在于萬維網(wǎng)中的特定網(wǎng)頁獲取下來，對網(wǎng)頁中的內容進行分析，并按照一定的規(guī)則顯示出來。目前主瀏覽器有：</p><p>　　① Internet Explorer 1995年微軟公司推出并與Windows 95操作系統(tǒng)進行捆綁銷售。</p><p>　　② Mozilla Firefox 由Mozilla基金會與數(shù)百個自愿者開發(fā)的

28、網(wǎng)頁瀏覽器。</p><p>　　③ Opera Opera Software 開發(fā)的Opera（http://www.opera.com）瀏覽器是一款適用于各種平臺、操作系統(tǒng)和嵌入式網(wǎng)絡產(chǎn)品的高品質、多平臺產(chǎn)品。</p><p>　　第二章 網(wǎng)站需求分析</p><p>　　網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息的一種方式，是企業(yè)開展電子商務的基礎設施和信息平臺。企業(yè)

29、的網(wǎng)址被稱為“網(wǎng)絡商標”，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站則是反映企業(yè)形象和文化的重要窗口。</p><p>　　在建站的可行性分析方面，設計中，我主要針對已經(jīng)確定的需求和目標，研究網(wǎng)站建設的社會環(huán)境、市場等可行性、技術可行性，經(jīng)濟可行性以及開發(fā)人員等問題。</p><p>　　在IT行業(yè)迅速發(fā)展的今天,企業(yè)網(wǎng)站的建設已經(jīng)成為一個企業(yè)發(fā)展必不可少的存在。對于創(chuàng)意設計有限公司來說，我們將建

30、立一個以宣傳為目的的網(wǎng)站類型。將于短期內強力打造公司的宣傳力度，讓更多的客戶了解，信任公司。網(wǎng)站的建設，也是公司對于宣傳方面的長期投資。</p><p><b>　　企業(yè)品牌形象。</b></p><p>　　對于一個以生產(chǎn)為主的大型企業(yè)而言，企業(yè)的品牌形象至關重要。 特別是對于互聯(lián)網(wǎng)技術高度發(fā)展的今天，大多客戶都是通過網(wǎng)絡來了解企業(yè)產(chǎn)品、企業(yè)形象及企業(yè)實力，因此，企

31、業(yè)網(wǎng)站的形象往往決定了客戶對企業(yè)產(chǎn)品的信心。建立具有國際水準的網(wǎng)站，能夠極大的提升企業(yè)的整體形象。</p><p><b>　　產(chǎn)品展示。</b></p><p>　　一般其他營銷模式的企業(yè)網(wǎng)站都是注重產(chǎn)品展示來加強企業(yè)的宣傳力度，但是對于創(chuàng)意設計有限公司來說，沒有其實際物品展示，只有展現(xiàn)其出眾的業(yè)績實例才能讓客戶信服，才能從側面展現(xiàn)出公司的實力，讓客戶更放心的把業(yè)務

32、交給公司處理。</p><p><b>　　公司介紹。</b></p><p>　　具體介紹出公司的發(fā)展史，結構，業(yè)務流程等等一系列來加大公司的宣傳力度，好讓客戶能全面的了解公司。公司的詳細信息，都將批注在網(wǎng)頁上，好讓顧客方便聯(lián)系。在推銷的同時更要注重企業(yè)的特色推廣和服務信息等。</p><p><b>　　內部管理優(yōu)化。</b

33、></p><p>　　網(wǎng)站的建設將會為企業(yè)內部的管理帶來一種全新的模式。網(wǎng)站是實現(xiàn)這一模式的平臺。在降低企業(yè)內部資源順好、減低成本、加強企業(yè)員工與員工，企業(yè)與員工之間的聯(lián)系和溝通等方面發(fā)揮巨大的作用，最終使企業(yè)的運營和運作打到最大的優(yōu)化。</p><p><b>　　第三章 技術支持</b></p><p>　　第一節(jié) Dreamw

34、eaver8.0</p><p>　　Dreamweaver是創(chuàng)建和管理網(wǎng)頁的專業(yè)化可視編輯器。使用Dreamweaver可以輕松創(chuàng)建跨平臺、跨瀏覽器的頁面。Macromedia的Roundtrip HTML技術允許用戶隨意導入HTML文檔而無需重新設置代碼格式。</p><p>　　Dreamweaver可以為用戶做到：使用動態(tài)HTML功能（例如具有動態(tài)效果的層和行為）而不用寫一行代碼。

35、它甚至還可以檢查用戶的工作成果在所有流行的平臺和瀏覽器中可能發(fā)生的錯誤。</p><p>　　Dreamweaver還是一個可以完全自定義的應用程序。用戶可以創(chuàng)建自己的對象和命令修改菜單和快捷鍵，甚至編寫JavaScript代碼擴展Dreamweaver的行為和屬性檢查器。</p><p>　　至于Dreamweaver工作區(qū)是非常靈活的，因此它可以適應各種不同的工作風格和使用水平。常用的

36、Dreamweaver工作區(qū)組件有以下若干種：</p><p>　?、?文檔窗口可顯示當前文檔，文檔的外觀和瀏覽器中看到的非常相似。</p><p>　　② 裝載器中包含一些打開和關閉常用檢查器和模板的按鈕。</p><p>　　③ 對象工具欄包含創(chuàng)建不同類型的對象（例如 圖象、表格和層等）的按鈕。</p><p>　?、?屬性檢查器顯示選定

37、對象的屬性。</p><p>　?、?快捷菜單可以使用戶對當前選擇或區(qū)域快速執(zhí)行某些命令。</p><p>　?、?可固定的浮動工具欄允許用戶將浮動窗口、檢查器和工具欄組合在一個或多個選擇窗口中。</p><p>　　Macromedia Flash 8.0</p><p>　　Macromedia Flash 8.0用于web站點的交互式的

38、矢量圖形和動畫的制作，它可制作出</p><p>　　用于瀏覽時的導航控制、制作動畫圖標、帶同步聲音的大段的動畫，創(chuàng)建出生動富于表現(xiàn)力的網(wǎng)頁。Flash中的圖形都是矢量的，占據(jù)存儲空間較少，因而下載時間短，且能很好地適應瀏覽者不同尺寸的屏幕。</p><p>　　Flash 的交互性的大部分設置就在 Action 和 Fs Command 里，通過對 Action 和 Fs Command

39、 的設置，你可以隨意的設置各事件發(fā)生的效果，還有對變量及函數(shù)的設置。</p><p>　　第三節(jié) Fireworks</p><p>　　Adobe Fireworks可以加速 Web 設計與開發(fā)，是一款創(chuàng)建與優(yōu)化 Web 圖像和快速構建網(wǎng)站與 Web 界面原型的理想工具。Fireworks不僅具備編輯矢量圖形與位圖圖像的靈活性， 還提供了一個預先構建資源的公用庫, 并可與 Adobe

40、Photoshop、Adobe Dreamweaver和Adobe Flash軟件省時集成。 在Fireworks 中將設計迅速轉變?yōu)槟Ｐ停蚶脕碜?Illustrator、Photoshop 和 Flash 的其它資源。 然后直接置入Dreamweaver 中輕松地進行開發(fā)與部署。Fireworks特性如下：</p><p>　　① 矢量編輯與位圖編輯。創(chuàng)建和編輯矢量圖像與位圖圖像，并導入和編輯本機 Phot

41、oshop 文件。</p><p>　?、?圖像優(yōu)化。采用預覽、跨平臺灰度系統(tǒng)預覽、選擇性 JPEG 壓縮和大量導出控件，針對各種交付情況優(yōu)化圖像。</p><p>　?、?高效的 Photoshop 和 Illustrator 集成。導入 Photoshop (PSD) 文件， 導入時可保持分層的圖層、圖層效果和混合模式。 將 Fireworks (PNG) 文件保存回 Photosho

42、p (PSD) 格式。 導入 Illustrator (AI) 文件， 導入時可保持包括圖層、組和顏色信息在內的圖形完整性。</p><p>　?、?智能縮放。通過 9 切片縮放智能地縮放矢量圖像或位圖圖像中的按鈕與圖形元件。 將 9 切片縮放與新的自動形狀庫相結合, 以加速網(wǎng)站和應用程序的原型構建進度。</p><p>　　⑤ 簡化的 Dreamweaver 和 Flash 集成。復制

43、Fireworks CS3 中的任意對象, 并直接粘貼到 Dreamweaver CS3 中。 創(chuàng)建可保存為 CSS 和 HTML 的彈出菜單。 將 Fireworks (PNG) 文件直接導出至 Flash CS3, 導出時可保持矢量、位圖、動畫和多狀態(tài)不變, 然后在 Flash CS3 中編輯文件。</p><p>　　眾所周知，在網(wǎng)頁上的jpg圖片如果過大，會嚴重影響頁面的打開速度，F(xiàn)ireworks提供優(yōu)

44、化圖片的功能，即縮小圖片的KB，而且不影響畫面的質量（除非放大了與原圖對比）。由于很多人喜歡用photoshop制作jpg圖片，所以它的容量會很大,最終還是要用Fireworks來處理一下。</p><p>　　第四節(jié) JavaScript</p><p>　　JavaScript是一種基于對象(Object)和事件驅動(Event Driven)并具有安全性能的腳本語言。使用它的目的是

45、與HTML超文本標記語言、Java 腳本語言（Java小程序）一起實現(xiàn)在一個Web頁面中鏈接多個對象，與Web客戶交互作用。從而可以開發(fā)客戶端的應用程序等。它是通過嵌入或調入在標準的HTML語言中實現(xiàn)的。它的出現(xiàn)彌補了HTML語言的缺陷，它是Java與HTML折衷的選擇。</p><p>　　第五節(jié) Adobe Photoshop8.0</p><p>　　Photoshop 8.0是目

46、前最流行的圖形、圖像編輯設計軟件，在數(shù)碼影像處理、圖像編輯合成、廣告設計、封面設計、美術繪畫、網(wǎng)頁設計等領域都被廣泛地應用。</p><p>　?、?文字處理更加方便</p><p>　?、?增加的圖層集使圖層管理更有序。</p><p>　?、?新增圖像功能：圖像的剪切和剪裁更加方便。</p><p>　?、?將所有工具的選項板改進為工具選

47、項欄放置在工作區(qū)頂部，方便先項參數(shù)的設置。</p><p>　?、?為了更方便地用路徑繪畫，改進增加了幾何形狀工具，通過選擇工具的不同工作模式，可創(chuàng)建路徑、幾何形狀或幾何填充區(qū)，使得矢量繪圖功能得到了加強。</p><p>　　第六節(jié) DIV+CSS</p><p><b>　　一、什么是div</b></p><p>

48、;　　div標簽和其他HTML標簽沒有什么區(qū)別，需要由關閉標志。如果不加入任何css樣式，它的效果類似<p>標記。Div示例代碼如下：</p><p>　　<div>內容</div></p><p>　　把css的擴展屬性放入div標簽中，就可以控制div容器中的所有HTML元素顯示在屏幕上的具體位置，為了實現(xiàn)這種1:1的精確控制，必須給當前的div加上

49、唯一的id，用來區(qū)分其他div標記。還有一種情況是：你想讓一類或者說幾個div具有相同的樣式屬性時，可以給每個div加上class屬性，這樣具有同樣class屬性的div標記樣式相同。代碼如下：</p><p>　　<div id=”wrap”>內容</div></p><p>　　<div class=”button”>內容</div>&l

50、t;/p><p><b>　　二、什么是CSS</b></p><p>　　CSS是英文Cascading Style Sheet縮寫形式，中文譯為層疊樣式表或級聯(lián)樣式表。Web設計者可利用它來定義文檔的樣式，這里指的文檔不僅限于（X）HTML。通過CSS，設計者可控制文檔的字體、顏色、圖像、表格、鏈接和布局格式，同時設計者也可以將表示樣式外觀的信息從內容中分離出來，集中

51、放置在頁面的某一部分，甚至可保存為獨立的文件，從而減少文件的大小，節(jié)省網(wǎng)絡的寬帶、節(jié)約web設計者維護代碼的時間。CSS有如此多的好處，掌握和使用好它對于web設計者來說是非常必要的。</p><p><b>　　三、何為樣式</b></p><p>　　樣式一詞對于我們來說并不陌生，即使尚未接觸CSS的人也不難理解樣式的含義。當你使用Microsoft Word一類

52、的字處理程序時，幾乎總要更愛某些樣式以達到更好的效果，比如設定標題為加粗的三號黑體字，每一段的開始流出兩個空格等。樣式表不能孤立地使用，因為它本身并不包含任何內容信息。當然CSS也不僅僅能同Web文檔一起使用，它還能定義XML甚至軟件界面的樣式。</p><p><b>　　四、何為層疊</b></p><p>　　與樣式相比，了解層疊一詞的CSS初學者可能就比較少了

53、，層疊是CSS中的術語，它包含了一系列的規(guī)則，瀏覽器根據(jù)這個規(guī)則來確定樣式應該如何應用到頁面的各個元素中去。</p><p>　　五、DIV+CSS簡介</p><p>　　DIV+CSS是網(wǎng)站標準（或稱“WEB標準”）中常用術語之一，div+css 是一種網(wǎng)頁的布局方法,這一種網(wǎng)頁布局方法有別于傳統(tǒng)的HTML網(wǎng)頁設計語言中的表格（table）定位方式,真正地達到了w3c內容與表現(xiàn)相分離。

54、HTML語言自HTML4.01以來，不再發(fā)布新版本，原因就在于HTML語言正變得越來越復雜化、專用化。XHTML語言是一種可以將HTML語言標準化，用XHTML語言重寫后的HTML頁面可以應用許多XML應用技術。使得網(wǎng)頁更加容易擴展，適合自動數(shù)據(jù)交換，并且更加規(guī)整。在XHTML網(wǎng)站設計標準中，不再使用表格定位技術，而是采用DIV+CSS的方式實現(xiàn)各種定位。以下是DIV+CSS的特點簡介：</p><p>　?、?

55、符合W3C標準。微軟等公司均為W3C支持者。這一點是最重要的，因為這保證您的網(wǎng)站不會因為將來網(wǎng)絡應用的升級而被淘汰。</p><p>　?、?支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰(zhàn)，勝利的是IE7或者是火狐，您的網(wǎng)站都能很好的兼容。</p><p>　?、?搜索引擎更加友好。相對與傳統(tǒng)的table, 采用DIV+CSS技術的網(wǎng)頁，對于搜索引擎的收錄更加友好。</p>

56、<p>　?、?樣式的調整更加方便。內容和樣式的分離，使頁面和樣式的調整變得更加方便。 現(xiàn)在YAHOO,MSN等國際門戶網(wǎng)站，網(wǎng)易，新浪等國內門戶網(wǎng)站，和主流的WEB2.0網(wǎng)站，均采用DIV+CSS的框架模式，更加印證了DIV+CSS是大勢所趨。 　</p><p>　　⑤ CSS的極大優(yōu)勢表現(xiàn)在簡潔的代碼，對于一個大型網(wǎng)站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。 　　</

57、p><p>　?、?表現(xiàn)和結構分離，在團隊開發(fā)中更容易分工合作而減少相互關聯(lián)性。</p><p>　　第四章 創(chuàng)意設計網(wǎng)的設計</p><p>　　有了網(wǎng)站設計的基礎，企業(yè)網(wǎng)站的需求，技術的支持，一級級前面素材等一系列的準備之后可以開始設計一個網(wǎng)站了，下面就與大家分享我設計的創(chuàng)意設計網(wǎng)。</p><p>　　第一節(jié) 從功能分析開始</p

58、><p>　　將要做的是一個公司網(wǎng)站，該公司專為客戶做網(wǎng)站設計的，因此建設網(wǎng)站的目的主要有兩個：一是使瀏覽者或潛在的客戶迅速了解公司大部分已經(jīng)完成或正在進行的項目及相關的資料，這就要求網(wǎng)站的文字要簡練，盡量減少大篇幅的文字敘述，項目效果圖要精彩，當然網(wǎng)頁的頁面效果也要漂亮，以使瀏覽者或潛在的客戶感覺到公司的設計水平高；二是使瀏覽者或潛在的客戶迅速了解公司對業(yè)務的一般操作流程，以便能夠與公司方便快捷地進行聯(lián)系和溝通，減

59、少不必要的中間環(huán)節(jié)及由此帶來的麻煩。</p><p>　　建立公司網(wǎng)站要有一個清晰的網(wǎng)站布局。比如說，導航條要不要？很多人說那東西人人在做，就顯得太俗沒個性，難顯示出新潮。但導航條之所以有那么多人在用，是因為它給瀏覽者一個明確的布局，便利人們查找本身所需的信息。從某種角度上說，大家都在用的東西就說明它確實被大家所接受。要清楚網(wǎng)站做出來是給每一個人普通用戶看的。網(wǎng)站還要經(jīng)常更新，給人以新意。</p>

60、<p>　　設計技術的成長，帶來了網(wǎng)頁世界的繁榮。尤其在崇尚個性的今天，設計者們更是將頁面設計表示的淋漓盡致。用戶欣喜的看到那些僵化的設計模式正在被逐個打破，網(wǎng)頁設計充滿了朝氣。但是，作為網(wǎng)頁設計者，不能一味的只追求個性的表現(xiàn)，還必需兼顧到用戶和客戶的習慣，在表現(xiàn)本身的風格的同時，在功能上使用戶更加便利。網(wǎng)站的前臺頁面包括首頁、設計理念、作品展示、企業(yè)文化、關于我們、聯(lián)系我們等。</p><p><

61、;b>　　三、頁頭設計</b></p><p>　　網(wǎng)站的頁頭主要分為兩個部分。一是Logo，logo使一張準備好的圖片，直接放置在頭部容器左側，調整好位置；二是導航條，網(wǎng)站導航條因為有立體感效果，因此它需要脫離文本流，因此在控制樣式的時候要用定位，相對于文本流的定位。網(wǎng)站的導航欄目可以讓用戶對網(wǎng)站的內容及信息一目了然。導航分為：首頁、作品展示、設計理念、企業(yè)策劃、關于我們、聯(lián)系我們。導航采用的

62、是ul li布局，然后再用a標簽對其他相關網(wǎng)頁進行鏈接，設計和操作上都非常簡單。相關代碼如下：</p><p>　　四、公司簡介及banner設計</p><p>　　Banner可以說是企業(yè)網(wǎng)頁中一道美麗的風景線。網(wǎng)頁中的banner信息代表著一個企業(yè)的素質和形象，所以應該表現(xiàn)的大氣、端莊而且精細。還更要表現(xiàn)出一個企業(yè)應該有的朝氣和活力。因此banner圖片加文字說明成為首選。實例展示從

63、側面讓客戶了解到公司的實力。在首頁的版面，先是用Photoshop對網(wǎng)站模板進行切片，然后用DIV+CSS進行排版。</p><p>　　圖 4.2 banner</p><p><b>　　五、中間內容設計</b></p><p>　　根據(jù) 瀏覽者在閱讀時經(jīng)常采用從上到下，從左到右的習慣，主體內容中，將“優(yōu)秀網(wǎng)站案例”靠左邊放，這樣能更好地吸

64、引瀏覽者的眼球，同時也體現(xiàn)公司的專業(yè)、能力等。優(yōu)秀網(wǎng)站案例采用網(wǎng)頁圖片切換的形式展現(xiàn)在首頁中，使整個首頁處于于靜于動的畫面。右邊則是創(chuàng)意設計公司的設計理念。</p><p>　　圖 4.3 中間部分</p><p><b>　　六、頁腳 </b></p><p>　　頁腳用.foot 在里面嵌套表格排列，左面是其他友情鏈接等等，右面是法律條款和

65、網(wǎng)站的版權屬于本公司等,.foot 高17像素，寬935像素。由于瀏覽器的兼容性問題，為了使四個DIV能居中對齊，在網(wǎng)頁中用了margin:0 auto來實現(xiàn)。</p><p>　　圖 4.4 底部版權圖</p><p>　　圖 4.5 首頁整體圖</p><p><b>　　第三節(jié) 內頁設計</b></p><p>

66、　　其他頁面的導航和頁面屬性都是采用首頁的導航和body屬性。</p><p><b>　　一、設計理念</b></p><p>　　設計理念界面展示了公司設計的理念，同時還附帶了公司設計的一些行業(yè)案例，讓客戶體會到本公司的專業(yè)。左邊的鏈接為以后的編輯奠定基礎。效果圖如下圖4.6所示：</p><p><b>　　圖4.6 設計理念&

67、lt;/b></p><p><b>　　二、作品展示</b></p><p>　　作品展示模版可以介紹公司的特色，讓游客更充分的了解公司、公司業(yè)務所面向地方對象。左邊列舉了公司業(yè)務項目，左邊的鏈接為以后的編輯奠定基礎。效果圖如下圖4.7所示：</p><p>　　圖4.7  作品展示</p><p>&

68、lt;b>　　三、企業(yè)文化</b></p><p>　　此頁面的的設計為左邊是代表流程的圖片，右邊詳細介紹了公司的企業(yè)文化等信息，讓客戶清晰的了解公司的文化，服務信息等等。效果圖如下圖4.8所示：</p><p>　　圖 4.8 企業(yè)文化</p><p><b>　　四、關于我們</b></p><p>

69、;　　關于我們頁面用來展示最近公司所接受業(yè)務的進程讓，如此才能讓客戶更放心。網(wǎng)頁中給出了公司的設計流程圖、公司的營業(yè)資格證等，讓客戶對本公司的能力更認可。效果圖如下4.9圖所示：</p><p><b>　　圖4.9關于我們</b></p><p><b>　　五、聯(lián)系我們</b></p><p>　　聯(lián)系我們板塊能實現(xiàn)交

70、流的目的，讓客戶對公司的發(fā)展，公司的業(yè)務流程提出寶貴的意見和建議，這樣公司才能更好的為自己定位，才能根據(jù)客戶提出的意見來完善自身。聯(lián)系我們頁面lianxi.html，主要介紹公司所在地、公司聯(lián)系電話、公司地圖等信息。</p><p>　　網(wǎng)站的聯(lián)系我們界面效果，如下圖4.10所示：</p><p>　　圖4.10 聯(lián)系我們</p><p>　　第五章 網(wǎng)站的測試&

71、lt;/p><p>　　編碼完成后，就要對源程序進行測試。軟件測試的目的在于爭取在第一時間發(fā)現(xiàn)程序中的錯誤，以便于及時糾錯，增加軟件可靠性。它在整個系統(tǒng)設計實施過程中占有相當?shù)姆至?。測試是軟件開發(fā)時期的最后一個階段，也是軟件質量保證中至關重要的一個環(huán)節(jié)。</p><p>　　測試的目的是為了盡可能的發(fā)現(xiàn)程序中存在的錯誤，其任務就是消除網(wǎng)站故障，保證程序的可靠運行，最終把一個高質量的網(wǎng)站系統(tǒng)交給

72、用戶使用。一般來說在每個模塊完成之后就要對它作必要的測試，這種測試被稱為單元測試，模塊的測試者也就是編寫者。編碼和單元測試屬于網(wǎng)站生命周期的同一階段。這個階段結束之后，對網(wǎng)站系統(tǒng)還應該進行各種綜合測試，這是網(wǎng)站生命周期的另一個獨立的階段，由專門的測試人員承擔。</p><p>　　在網(wǎng)頁中的測試階段主要是對網(wǎng)站進行瀏覽器兼容性測試。在網(wǎng)頁測試的階段我分別安裝了IE8、火狐等瀏覽器，并且進行了逐個測試。在多次實踐中