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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

52、的字處理程序時(shí)，幾乎總要更愛某些樣式以達(dá)到更好的效果，比如設(shè)定標(biāo)題為加粗的三號(hào)黑體字，每一段的開始流出兩個(gè)空格等。樣式表不能孤立地使用，因?yàn)樗旧聿⒉话魏蝺?nèi)容信息。當(dāng)然CSS也不僅僅能同Web文檔一起使用，它還能定義XML甚至軟件界面的樣式。</p><p><b>　　四、何為層疊</b></p><p>　　與樣式相比，了解層疊一詞的CSS初學(xué)者可能就比較少了

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

70、流的目的，讓客戶對公司的發(fā)展，公司的業(yè)務(wù)流程提出寶貴的意見和建議，這樣公司才能更好的為自己定位，才能根據(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>　　編碼完成后，就要對源程序進(jìn)行測試。軟件測試的目的在于爭取在第一時(shí)間發(fā)現(xiàn)程序中的錯(cuò)誤，以便于及時(shí)糾錯(cuò)，增加軟件可靠性。它在整個(gè)系統(tǒng)設(shè)計(jì)實(shí)施過程中占有相當(dāng)?shù)姆至?。測試是軟件開發(fā)時(shí)期的最后一個(gè)階段，也是軟件質(zhì)量保證中至關(guān)重要的一個(gè)環(huán)節(jié)。</p><p>　　測試的目的是為了盡可能的發(fā)現(xiàn)程序中存在的錯(cuò)誤，其任務(wù)就是消除網(wǎng)站故障，保證程序的可靠運(yùn)行，最終把一個(gè)高質(zhì)量的網(wǎng)站系統(tǒng)交給

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