《創(chuàng)意設計類網站的設計與實現(xiàn)畢業(yè)設計》

1、重慶郵電大學高等函授畢業(yè)設計?？迫蝿諘?頁/共2頁姓名學號專業(yè)計算機信息管理所屬站重慶新華電腦學校工作單位重慶新華電腦學校 通信地址重慶沙坪壩鳳鳴山8號E-mail地址設計或論文題目創(chuàng)意設計類網站的設計與實現(xiàn)指導教師、指導教師組組長及成員姓名職 稱工作單位及所從事專業(yè)中級重慶新華電腦學校，網頁設計專業(yè)方向、根本理論、技術要求及設計論文內容綱要專業(yè)方向： 網站開發(fā)根底理論：采用網站開發(fā)的思路進行設計，具體設計作品可根據(jù)自己搜集資料的詳細程度來自行選擇。技術要求：1、采用Windows 2000以上的操作系統(tǒng)，網頁三劍客 + Photoshop + div+css開發(fā)；2、采用div+css布局

2、和美化網頁；設計內容：1、 整個網站風格定位及各頁面布局設計。2、 網頁整體圖形的制作。3、 div+css布局。4、 網站測試與后期優(yōu)化。論文內容：畢業(yè)論文要求論點突出、條理清楚、論據(jù)充分、內容實際、格式標準，所針對的題目應具有一定的廣泛性和實用性，結論明確。論文的內容綱要應符合以下要求：1、摘要：以濃縮的形式概括課題的內容，中文摘要在500字左右。 2、目錄：目錄按三級標題編制，要求標題層次清晰，題文一致。 3、正文：畢業(yè)論文正文包括前言、主體和結論。要求正文字數(shù)不少于10000字。正文主體局部應按照軟件工程的思想進行論述。 4、結束語：對導師和給予指導或協(xié)助完成畢業(yè)論文設計工作的組織和個

3、人表示感謝。文字要簡捷、實事求是。5、參考文獻：文獻條目只要包括三個局部：作者、標題和出版信息。數(shù)量5-10本。6、附錄：是一些不宜放在正文中，但有參考價值的內容。本人在該設計中具體完成的工作1.完成調研和資料收集。2.完成使用DIV+CSS布局信息宣傳類網站的分析，設計，實現(xiàn)和測試。3.完成論文的撰寫。主要參考文獻、資料：唐守國.?創(chuàng)意+：Photoshop cs4網頁設計、配色與特效案例精粹?. 清華大學出版社，2021年項宇峰.?HTML網絡編程從入門到精通?. 清華大學出版社，2006年要求完成報告書的時間：2021年5月15日審批意見 函授站 蓋章年 月 日審批意見重郵成教院蓋章 年

4、 月 日注：第2頁/共2頁；本表由指導教師填寫一式三份。重慶郵電大學高等函授畢業(yè)設計?？圃u定表姓 名學號專業(yè)計算機信息管理所屬站重慶新華電腦學校設計或論文題目創(chuàng)意設計類網站的設計與實現(xiàn)畢業(yè)設計或論文的評語：指導教師簽名 年 月 日備 注重慶郵電大學高等函授畢業(yè)設計(?？? 評閱意見表畢業(yè)論文題目創(chuàng)意設計類網站的設計與實現(xiàn)評 價 項 目得分選題質量01選題符合專業(yè)培養(yǎng)目標，表達綜合訓練根本要求選題綜合得分共10分：02題目難易度03題目工作量04理論意義或實際價值能力水平05查閱文獻資料能力能力水平綜合得分共50分：06綜合運用知識能力07研究方案的設計能力08研究方法和手段的運用能力成果質量0

5、9文題相符論文成果綜合得分共40分：10寫作水平11寫作標準12篇幅評閱人評定成績共100分 評閱人： 重慶郵電大學高等函授畢業(yè)設計成績總評表姓名學號專業(yè)計算機信息管理所 屬 站重慶新華電腦學校設計或論文題目創(chuàng)意設計類網站的設計與實現(xiàn)畢業(yè)設計指導委員會意見： 根據(jù)畢業(yè)設計指導教師和評閱教師意見，經成人教育學院高等函授畢業(yè)設計指導委員會認真評定，該學員的畢業(yè)設計總評四級評分制成績?yōu)椋?畢業(yè)設計指導委員會主任： 年 月 日【摘要】 計算機和計算機網絡的飛速開展，人們對計算機網絡的依賴是越來越大。人們在網上聊天交友，在網上請教問題，查閱資料，還在網上聽音樂。除此之外，人們還會在網上進行商務交易、下載

6、信息，有著眾多的使用者。尤其是電子商務大大的減少了人們對周圍環(huán)境的依賴，無論是哪里的網友，都可以瀏覽到世界各地的各類信息，非常的方便，由于以上的優(yōu)勢，各類網站如雨后春筍般的出現(xiàn)，企業(yè)網站也不例外。而Web設計的健康開展依靠web標準的采用，沒有web標準就不會有真正的可訪問性和連貫的設計。不用web標準，就跟不上時代。在這樣的標準時代，我們需要網頁更加容易擴展，適合自動數(shù)據(jù)交換，并且更加規(guī)整。而css，那么實現(xiàn)了頁面內容與樣式別離。鑒于web標準，本論文著重對div+css布局與美化公司網頁進行了討論；同時根據(jù)客戶需求，采用div+css實現(xiàn)了咨詢公司網頁的設計，具體實現(xiàn)了首頁、設計理念、作品

7、展示、企業(yè)文化、關于我們、聯(lián)系我們等功能，系統(tǒng)符合公司網站的需求。【關鍵詞】企業(yè)網站 網頁設計 div css Dreamweaver目 錄前 言1第一章 網站設計環(huán)境介紹2第一節(jié) 因特網和萬維網2一、何為因特網2二、何為萬維網2第二節(jié) 相關術語解釋3一、Internet3二、站點3三、超鏈接3四、URL3五、IP地址4六、網頁4第三節(jié) Web標準概述4一、什么是Web標準4二、Web的認識5三、Web文檔的三層結構5四、Web標準的優(yōu)勢6第四節(jié) Web設計技術7一、HTML7二、CSS7第五節(jié) 瀏覽器8第二章 網站需求分析9第三章 技術支持11第一節(jié)11第一節(jié)11第三節(jié) Fireworks1

8、2第四節(jié) JavaScript13第五節(jié)13第六節(jié) DIV+CSS14一、什么是div14二、什么是CSS14三、何為樣式14四、何為層疊15五、DIV+CSS簡介15第四章 創(chuàng)意設計網的設計16第一節(jié) 從功能分析開始16第二節(jié) 首頁頁面設計16一、結構分析17二、風格定位18三、頁頭設計18四、公司簡介及banner設計19五、中間內容設計19六、頁腳20第三節(jié) 內頁設計21一、設計理念21二、作品展示22三、企業(yè)文化23四、關于我們24五、聯(lián)系我們25第五章 網站的測試27第六章 后續(xù)工作28結 論29結束語30參考文獻31附 錄：網站效果圖32前 言當今世界已進入信息時代，Interne

9、t成為21世紀最受關注的行業(yè)之一,它的飛速開展和在全球范圍的普及應用正在給人類生活帶來革命性變化。網絡技術的開展也取得了巨大的成就，為網站開發(fā)提供了很好的技術支持。網站已經成為現(xiàn)階段眾多企業(yè)不可或缺的網絡營銷平臺，互聯(lián)網應用規(guī)模正在不斷擴大。其中，特別是中小型企業(yè)，對于網絡平臺搭建的需求相當?shù)钠惹?。各大門戶網，企業(yè)網都在WEB2.0的標準上,采用div+css來布局，因此有了此次的選題。論文詳細論述了一個基于公司網站開發(fā)的設計過程。在技術上，采用了 Dreamweaver網站開發(fā)工具，以 HTML的超大功能結合 JavaScript 的客戶端語言，這樣的構造有利于以后對網站系統(tǒng)開發(fā)的把握，并為

10、以后的開發(fā)積累了一定的經驗，提升編程能力。其中，最主要的就是介紹和展示DIV+CSS在網頁中的最用和魅力。本文實現(xiàn)了首頁、設計理念、作品展示、企業(yè)籌劃、關于我們、聯(lián)系我們等功能，系統(tǒng)符合公司網站的需求。論文組織如下：首先闡述了該網站的開發(fā)背景、意義，詳細介紹了div+css理論知識；其次介紹了相關的開發(fā)工具及技術根底；接著對網站的需求進行了分析，并提出了具體的設計方案；然后展現(xiàn)了整個網站的具體實現(xiàn)，包括網頁的設計和連接，各功能模塊的實現(xiàn)；最后對該網站進行了嚴格的測試。第一章 網站設計環(huán)境介紹隨著計算機應用的開展，網站已經是展現(xiàn)企業(yè)形象、介紹產品和效勞、表達企業(yè)開展戰(zhàn)略的重要途徑。網頁設計是科技

11、與藝術的結合，是商業(yè)社會的產物。雖然網頁設計也是平面設計中的一個方面，但是網頁設計有其獨特的設計要求與原那么，在設計網頁之前要對其有所了解。第一節(jié) 因特網和萬維網一、何為因特網大家可能對因特網Internet這個詞不會感到陌生，因特網是由許許多多計算機連接在一起構成的一個計算機網絡，在這個網絡中，人們可以使用各自的計算機互相傳遞信息；可以在自己的計算機上存儲文件供別人訪問；可以利用多臺計算機實現(xiàn)分布式應用。Internet規(guī)模龐大，普及全球，一旦上網，你就與全球無以計數(shù)的計算機連成一體。二、何為萬維網有上網經歷的會知道，在瀏覽器的地址欄中經常出現(xiàn)“WWW，比方要訪問百度網站就需輸入“。其中的三

12、個“W是英文World Wide Web的縮寫，中文譯為萬維網。萬維網是無數(shù)個網絡站點和網頁的集合，它們在一起構成了因特網最主要的局部因特網還包括電子郵件、Usenet以及新聞組等應用。萬維網實際上是多媒體的集合，各個局部由超級鏈接連接而成。我們通常使用瀏覽器上網觀看的內容，就是萬維網的內容。比方在瀏覽器中輸入“,就可以訪問新浪網站的首頁。網頁也稱作Web頁面或Web文檔，它包含了文字、圖像、動畫和一些具有交互功能的控件。第二節(jié) 相關術語解釋一、InternetInternet(英特網)誕生于上世紀60年代，開展非常慢，到90年代才開始迅速開展?，F(xiàn)在英特網已經是世界上最大的網絡的，聯(lián)在英特網上

13、的電腦有數(shù)億臺。上面的資料、信息數(shù)不勝數(shù)，所以有人把英特網叫成是信息的海洋、知識的海洋。二、站點所謂站點，就是將網頁文件和素材文件，有條理地放置站點文件夾里，這些文件與文件夾就構成了網站的實質內容。站點文件夾里除了網頁文件還有素材文件，所謂素材就是網頁中所用到的圖像、聲音、視頻等，這些內容是以單獨文件的形式存在。三、超鏈接我們在瀏覽網頁時，當鼠標指針指向某段文本或是某個圖像，鼠標指針變成小手狀，單擊鼠標可以翻開其他的網頁或是跳轉到其他的網站，這就是超鏈接。采用超鏈接技術可以將不同的網站、網站中的不同網頁、網頁中的不同位置彼此串在一起，實現(xiàn)相互間的跳轉，方便信息的瀏覽和查找。人們通過超鏈接可以很

14、方便很迅速地訪問分布于全球計算機上的海量資源，實現(xiàn)在互聯(lián)網中的漫游。超鏈接能使Web效勞存在廣泛和持久的生命力，超鏈接可以說是Web的靈魂。四、URLURLUniform Resource Locator的縮寫，統(tǒng)一資源定位器?；ヂ?lián)網中某種信息資源以某種方式存儲在網絡中的某處，必須用一個惟一的URL來進行標識，這樣才能方便查找。對于Web來說，可以簡單并通俗把URL理解為網址。每個Web網頁都有自己的網址，在瀏覽器地址欄里輸入網頁的URL，就可以訪問這個網頁。例如， :/ sina /index.html，其意思就是采用 超文本傳輸協(xié)議訪問新浪網的首頁，由于網頁均是通過 超文本傳輸協(xié)議進行訪問

15、，默認下，“ :/可以省略不輸。五、IP地址為了使互聯(lián)網上的電腦主機在通信時能夠相互識別，每臺主機都分配一個能表示其位置的IPInternet Protocol地址，這如同公用 網中 的號碼一樣。IP地址是由專門的互聯(lián)網機構來分配。IP地址具有惟一性，是由32位二進制數(shù)組成，分為四組，每組8位，每組之間用小數(shù)點分隔，在實際之中常轉換成十進制數(shù)表示。六、網頁網頁，是網站中的一頁，通常是HTML格式文件擴展名為.html或.htm或.asp或.aspx或.php或.jsp等。網頁通常用圖像檔來提供圖畫。網頁要透過網頁瀏覽器來閱讀。 網頁是構成網站的根本元素，是承載各種網站應用的平臺。通俗的說，您的

16、網站就是由網頁組成的。如果您只有域名和虛擬主機而沒有制作任何網頁的話，您的客戶仍舊無法訪問您的網站。 所謂網站(Website)，就是指在網際網路因特網上，根據(jù)一定的規(guī)那么，使用HTML等工具制作的用於展示特定內容的相關網頁的集合。簡單地說，網站是一種通訊工具，就像布告欄一樣，人們可以通過網站來發(fā)布自己想要公開的資訊信息，或者利用網站來提供相關的網路效勞網絡效勞。人們可以通過網頁瀏覽器來訪問網站，獲取自己需要的資訊信息或者享受網路效勞。第三節(jié) Web標準概述一、什么是Web標準Web標準是由W3CWorld Wide Web Consortium和其他標準化組織指定的一系列標準的集合，其中包含

17、了XHTML、XML和CSS。Web標準的目的在于創(chuàng)立一個統(tǒng)一的用于Web表現(xiàn)層的技術標準，以便通過不同瀏覽器或終端設備向最終用戶展示信息內容。二、Web的認識Web(World Wide Web，簡稱WWW，又稱萬維網)是目前Internet上應用最廣泛也是最重要的信息效勞類型，它已經影響了Internet上的廣告、新聞、電子商務和展示信息等各個效勞領域。 Web采用瀏6hy覽器/效勞器B/S工作模式，其運作模式可以描述為：請求處理應答。Web以超文本標記語言HTML(Hyper Text Markup Language)與超文本傳輸協(xié)議 (Hyper Text Transfer Proto

18、col)為根底，通過瀏覽器為用戶提供方便友好的信息瀏覽界面。 Web將位于全世界互聯(lián)網上不同網址的相關信息有機地編織在一起。在Web效勞方式中，信息以頁面或稱Web頁的形式存儲在Web效勞器中，這些頁面采用超文本的方式對信息進行組織，通過鏈接將一頁信息鏈接到另一頁信息。這些相互鏈接的頁面既可以放置在同一臺主機上，也可以放置在不同的主機上。頁面到頁面的鏈接信息由統(tǒng)一資源定位器URL(Uniform Resource Locator)維持。用戶通過客戶端應用程序即瀏覽器向Web效勞器發(fā)出請求，效勞器根據(jù)客戶端的請求將保存在效勞器中的某個頁面返回給客戶端，瀏覽器接收到頁面后對其進行解釋，最終將信息以

19、圖、文、聲并茂的形式呈現(xiàn)給用戶。 Web效勞的特點在于高度的集成性，它能夠實現(xiàn)不同類型的信息如文本、圖像、聲音、動畫和視頻等和效勞如New、FTP、Telnet、Gopher及Mail等的無縫鏈接，特別適合于廣域網中信息的組織、檢索與顯示。三、Web文檔的三層結構Web文檔通常包含三個不同的層次見圖1.1。首先是結構層，該層的內容是由XHTML編寫的文本文檔。它包含文檔的內容，以及由XHTML添加的語義化的標記。第二層為表現(xiàn)層，該層內容是CSS樣式代碼。它描述了文檔該以何種樣式呈現(xiàn)在訪問者面前，樣式包括頁面各局部的布局、文字段落排版、背景圖片和顏色等。第三層是行為層，該層定義了文檔模型以及如何

20、與客戶進行交互，所涉及技術主要是DOM以及ECMAScript腳本語言。圖1.1 結構、表現(xiàn)和行為及各局部所涉及的技術四、Web標準的優(yōu)勢1、易于開發(fā)和維護一個大型的網站往往需要很多人員的參與，他們的分工也不同，有負責樣式設計的，有負責頁面編碼的，有負責樣式編寫的等。由于內容結構和表現(xiàn)的別離，不同開發(fā)人員可以獨立工作，專注于自己負責的內容。樣式信息和內容是相互獨立的，因此同一個樣式信息可用于不同的內容中，從而實現(xiàn)代碼重用。這種做法可用減少重復編碼，加快開發(fā)進度。樣式信息重用也使得維護工作大大減輕，只需要修改一小局部樣式代碼，就可以使所有用到該樣式的區(qū)域同時改變外觀。2、高兼容性由于W3C對We

21、b標準的推動，越來越多的瀏覽器支持由W3C制定的各種標準，從而使得根據(jù)標準編寫的Web頁面在不同的瀏覽器中均能獲得一致的效果。3、高靈活性現(xiàn)在，越來越多的人使用 或PDA訪問網站，通常這些設備的屏幕要遠遠小于PC機的顯示器。網頁的內容和表現(xiàn)的別離使得我們可以針對不同平臺和設備應用不同的樣式文件，而網頁內容無須改動。對于需要打印輸出的頁面，我們也無須再提供另一份“適合打印的頁面，取而代之的只是新的CSS樣式。4、提高訪問速度內容與表現(xiàn)的別離，使得頁面中不再包含冗余的樣式代碼，而獨立出來的樣式表可以充分地進行重用，網頁整體代碼量大大減少。這樣不僅能占用更少的網絡帶寬，提高頁面載入速度，同時瀏覽器也

22、能對頁面進行快速解析，顯示給用戶。5、提高用戶體驗從Web應用的角度看，用戶體驗User Experience,UE指的是Web應用程序能夠提供直觀簡潔的用戶界面、簡便的操作以及有效的交互方式。只有當用戶親自使用時才能體驗帶它們。用戶體驗包含了多方面的內容，其中一致性、可用性等方面均通過標準化開發(fā)來實現(xiàn)。比方各個頁面使用統(tǒng)一的樣式，利用行為層技術改善交互設計等。第四節(jié) Web設計技術Web設計涵蓋的范圍相當廣，本節(jié)只介紹一些構建Web文檔所需的幾項最根本的技術。一、HTMLHTML，英文全成為 HyperText Markup Language，中文譯為超文版標記語言。它是用來創(chuàng)立Web文檔的

23、語言。頁面元素是由特定的標記來確定的，這些標記告訴瀏覽器該如何顯示這個頁面。所謂超文本，就是一種含有指向其他文檔鏈接的文本，即我們俗稱的鏈接。超文本把存放于不同計算機中的文檔鏈接在一起。訪問者不必關心鏈接所指的內容到底位于何處，只需要在鏈接上單擊一下鼠標，頁面馬上轉到所指的文檔中去。二、CSSHTML可以將內容、結構和格式化的信息都包含在同一個Web文檔中，這樣做雖然簡單易行，但也存在很多問題。各種信息存放在一起不利于文檔的維護，修改起來費時費力。因此HTML應只負責文檔的內容和結構，而格式化信息交給一套新的語言來完成，這就是CSS，它也是本論文的主角。CSS全稱為Cascading Styl

24、e Sheet，中文譯為層疊樣式表也有譯作級聯(lián)樣式表的。其作用就是要控制HTML的頁面布局和外觀樣式，使Web文檔內容結構和表現(xiàn)形式完全別離。第五節(jié) 瀏覽器網頁和瀏覽器是分不開的，用戶正是通過瀏覽器來到達訪問網頁的目的。瀏覽器Browser是一種軟件程序，可以和網絡建立連接并與之通信。它可以將存在于萬維網中的特定網頁獲取下來，對網頁中的內容進行分析，并按照一定的規(guī)那么顯示出來。目前主瀏覽器有： Internet Explorer 1995年微軟公司推出并與Windows 95操作系統(tǒng)進行捆綁銷售。 Mozilla Firefox 由Mozilla基金會與數(shù)百個自愿者開發(fā)的網頁瀏覽器。 Oper

25、a Opera Software 開發(fā)的Opera :/ opera 瀏覽器是一款適用于各種平臺、操作系統(tǒng)和嵌入式網絡產品的高品質、多平臺產品。第二章 網站需求分析網站是企業(yè)向用戶和網民提供信息的一種方式，是企業(yè)開展電子商務的根底設施和信息平臺。企業(yè)的網址被稱為“網絡商標，也是企業(yè)無形資產的組成局部，而網站那么是反映企業(yè)形象和文化的重要窗口。在建站的可行性分析方面，設計中，我主要針對已經確定的需求和目標，研究網站建設的社會環(huán)境、市場等可行性、技術可行性，經濟可行性以及開發(fā)人員等問題。在IT行業(yè)迅速開展的今天,企業(yè)網站的建設已經成為一個企業(yè)開展必不可少的存在。對于創(chuàng)意設計來說，我們將建立一個以宣

26、傳為目的的網站類型。將于短期內強力打造公司的宣傳力度，讓更多的客戶了解，信任公司。網站的建設，也是公司對于宣傳方面的長期投資。 企業(yè)品牌形象。對于一個以生產為主的大型企業(yè)而言，企業(yè)的品牌形象至關重要。 特別是對于互聯(lián)網技術高度開展的今天，大多客戶都是通過網絡來了解企業(yè)產品、企業(yè)形象及企業(yè)實力，因此，企業(yè)網站的形象往往決定了客戶對企業(yè)產品的信心。建立具有國際水準的網站，能夠極大的提升企業(yè)的整體形象。 產品展示。一般其他營銷模式的企業(yè)網站都是注重產品展示來加強企業(yè)的宣傳力度，但是對于創(chuàng)意設計來說，沒有其實際物品展示，只有展現(xiàn)其出眾的業(yè)績實例才能讓客戶信服，才能從側面展現(xiàn)出公司的實力，讓客戶更放心的

27、把業(yè)務交給公司處理。 公司介紹。具體介紹出公司的開展史，結構，業(yè)務流程等等一系列來加大公司的宣傳力度，好讓客戶能全面的了解公司。公司的詳細信息，都將批注在網頁上，好讓顧客方便聯(lián)系。在推銷的同時更要注重企業(yè)的特色推廣和效勞信息等。 內部管理優(yōu)化。網站的建設將會為企業(yè)內部的管理帶來一種全新的模式。網站是實現(xiàn)這一模式的平臺。在降低企業(yè)內部資源順好、減低本錢、加強企業(yè)員工與員工，企業(yè)與員工之間的聯(lián)系和溝通等方面發(fā)揮巨大的作用，最終使企業(yè)的運營和運作打到最大的優(yōu)化。第三章 技術支持Dreamweaver是創(chuàng)立和管理網頁的專業(yè)化可視編輯器。使用Dreamweaver可以輕松創(chuàng)立跨平臺、跨瀏覽器的頁面。Ma

28、cromedia的Roundtrip HTML技術允許用戶隨意導入HTML文檔而無需重新設置代碼格式。Dreamweaver可以為用戶做到：使用動態(tài)HTML功能例如具有動態(tài)效果的層和行為而不用寫一行代碼。它甚至還可以檢查用戶的工作成果在所有流行的平臺和瀏覽器中可能發(fā)生的錯誤。Dreamweaver還是一個可以完全自定義的應用程序。用戶可以創(chuàng)立自己的對象和命令修改菜單和快捷鍵，甚至編寫JavaScript代碼擴展Dreamweaver的行為和屬性檢查器。至于Dreamweaver工作區(qū)是非常靈活的，因此它可以適應各種不同的工作風格和使用水平。常用的Dreamweaver工作區(qū)組件有以下假設干種：

29、 文檔窗口可顯示當前文檔，文檔的外觀和瀏覽器中看到的非常相似。 裝載器中包含一些翻開和關閉常用檢查器和模板的按鈕。 對象工具欄包含創(chuàng)立不同類型的對象例如 圖象、表格和層等的按鈕。 屬性檢查器顯示選定對象的屬性。 快捷菜單可以使用戶對當前選擇或區(qū)域快速執(zhí)行某些命令。 可固定的浮開工具欄允許用戶將浮動窗口、檢查器和工具欄組合在一個或多個選擇窗口中。第一節(jié)Macromedia Flash 8.0用于web站點的交互式的矢量圖形和動畫的制作，它可制作出用于瀏覽時的導航控制、制作動畫圖標、帶同步聲音的大段的動畫，創(chuàng)立出生動富于表現(xiàn)力的網頁。Flash中的圖形都是矢量的，占據(jù)存儲空間較少，因而下載時間短，

30、且能很好地適應瀏覽者不同尺寸的屏幕。Flash 的交互性的大局部設置就在 Action 和 Fs Command 里，通過對 Action 和 Fs Command 的設置，你可以隨意的設置各事件發(fā)生的效果，還有對變量及函數(shù)的設置。第三節(jié) FireworksAdobe Fireworks可以加速 Web 設計與開發(fā)，是一款創(chuàng)立與優(yōu)化 Web 圖像和快速構建網站與 Web 界面原型的理想工具。Fireworks不僅具備編輯矢量圖形與位圖圖像的靈活性， 還提供了一個預先構建資源的公用庫, 并可與 Adobe Photoshop、Adobe Dreamweaver和Adobe Flash軟件省時集成

31、。 在Fireworks 中將設計迅速轉變?yōu)槟Ｐ?，或利用來?Illustrator、Photoshop 和 Flash 的其它資源。 然后直接置入Dreamweaver 中輕松地進行開發(fā)與部署。Fireworks特性如下： 矢量編輯與位圖編輯。創(chuàng)立和編輯矢量圖像與位圖圖像，并導入和編輯本機 Photoshop 文件。 圖像優(yōu)化。采用預覽、跨平臺灰度系統(tǒng)預覽、選擇性 JPEG 壓縮和大量導出控件，針對各種交付情況優(yōu)化圖像。 高效的 Photoshop 和 Illustrator 集成。導入 Photoshop (PSD) 文件， 導入時可保持分層的圖層、圖層效果和混合模式。 將 Firewor

32、ks (PNG) 文件保存回 Photoshop (PSD) 格式。 導入 Illustrator (AI) 文件， 導入時可保持包括圖層、組和顏色信息在內的圖形完整性。 智能縮放。通過 9 切片縮放智能地縮放矢量圖像或位圖圖像中的按鈕與圖形元件。 將 9 切片縮放與新的自動形狀庫相結合, 以加速網站和應用程序的原型構建進度。 簡化的 Dreamweaver 和 Flash 集成。復制 Fireworks CS3 中的任意對象, 并直接粘貼到 Dreamweaver CS3 中。 創(chuàng)立可保存為 CSS 和 HTML 的彈出菜單。 將 Fireworks (PNG) 文件直接導出至 Flash

33、CS3, 導出時可保持矢量、位圖、動畫和多狀態(tài)不變, 然后在 Flash CS3 中編輯文件。眾所周知，在網頁上的jpg圖片如果過大，會嚴重影響頁面的翻開速度，F(xiàn)ireworks提供優(yōu)化圖片的功能，即縮小圖片的KB，而且不影響畫面的質量除非放大了與原圖比照。由于很多人喜歡用photoshop制作jpg圖片，所以它的容量會很大,最終還是要用Fireworks來處理一下。第四節(jié) JavaScriptJavaScript是一種基于對象(Object)和事件驅動(Event Driven)并具有平安性能的腳本語言。使用它的目的是與HTML超文本標記語言、Java 腳本語言Java小程序一起實現(xiàn)在一個W

34、eb頁面中鏈接多個對象，與Web客戶交互作用。從而可以開發(fā)客戶端的應用程序等。它是通過嵌入或調入在標準的HTML語言中實現(xiàn)的。它的出現(xiàn)彌補了HTML語言的缺陷，它是Java與HTML折衷的選擇。Photoshop 8.0是目前最流行的圖形、圖像編輯設計軟件，在數(shù)碼影像處理、圖像編輯合成、廣告設計、封面設計、美術繪畫、網頁設計等領域都被廣泛地應用。 文字處理更加方便 增加的圖層集使圖層管理更有序。 新增圖像功能：圖像的剪切和剪裁更加方便。 將所有工具的選項板改良為工具選項欄放置在工作區(qū)頂部，方便先項參數(shù)的設置。 為了更方便地用路徑繪畫，改良增加了幾何形狀工具，通過選擇工具的不同工作模式，可創(chuàng)立路

35、徑、幾何形狀或幾何填充區(qū)，使得矢量繪圖功能得到了加強。第六節(jié) DIV+CSS一、什么是divdiv標簽和其他HTML標簽沒有什么區(qū)別，需要由關閉標志。如果不參加任何css樣式，它的效果類似標記。Div例如代碼如下：內容把css的擴展屬性放入div標簽中，就可以控制div容器中的所有HTML元素顯示在屏幕上的具體位置，為了實現(xiàn)這種1:1的精確控制，必須給當前的div加上唯一的id，用來區(qū)分其他div標記。還有一種情況是：你想讓一類或者說幾個div具有相同的樣式屬性時，可以給每個div加上class屬性，這樣具有同樣class屬性的div標記樣式相同。代碼如下：內容內容二、什么是CSSCSS是英文

36、Cascading Style Sheet縮寫形式，中文譯為層疊樣式表或級聯(lián)樣式表。Web設計者可利用它來定義文檔的樣式，這里指的文檔不僅限于XHTML。通過CSS，設計者可控制文檔的字體、顏色、圖像、表格、鏈接和布局格式，同時設計者也可以將表示樣式外觀的信息從內容中別離出來，集中放置在頁面的某一局部，甚至可保存為獨立的文件，從而減少文件的大小，節(jié)省網絡的寬帶、節(jié)約web設計者維護代碼的時間。CSS有如此多的好處，掌握和使用好它對于web設計者來說是非常必要的。三、何為樣式樣式一詞對于我們來說并不陌生，即使尚未接觸CSS的人也不難理解樣式的含義。當你使用Microsoft Word一類的字處理

37、程序時，幾乎總要更愛某些樣式以到達更好的效果，比方設定標題為加粗的三號黑體字，每一段的開始流出兩個空格等。樣式表不能孤立地使用，因為它本身并不包含任何內容信息。當然CSS也不僅僅能同Web文檔一起使用，它還能定義XML甚至軟件界面的樣式。四、何為層疊與樣式相比，了解層疊一詞的CSS初學者可能就比擬少了，層疊是CSS中的術語，它包含了一系列的規(guī)那么，瀏覽器根據(jù)這個規(guī)那么來確定樣式應該如何應用到頁面的各個元素中去。五、DIV+CSS簡介DIV+CSS是網站標準或稱“WEB標準中常用術語之一，div+css 是一種網頁的布局方法,這一種網頁布局方法有別于傳統(tǒng)的HTML網頁設計語言中的表格table定

38、位方式,真正地到達了w3c內容與表現(xiàn)相別離。HTML語言自HTML4.01以來，不再發(fā)布新版本，原因就在于HTML語言正變得越來越復雜化、專用化。XHTML語言是一種可以將HTML語言標準化，用XHTML語言重寫后的HTML頁面可以應用許多XML應用技術。使得網頁更加容易擴展，適合自動數(shù)據(jù)交換，并且更加規(guī)整。在XHTML網站設計標準中，不再使用表格定位技術，而是采用DIV+CSS的方式實現(xiàn)各種定位。以下是DIV+CSS的特點簡介： 符合W3C標準。微軟等公司均為W3C支持者。這一點是最重要的，因為這保證您的網站不會因為將來網絡應用的升級而被淘汰。 支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大

39、戰(zhàn)，勝利的是IE7或者是火狐，您的網站都能很好的兼容。 搜索引擎更加友好。相對與傳統(tǒng)的table, 采用DIV+CSS技術的網頁，對于搜索引擎的收錄更加友好。 樣式的調整更加方便。內容和樣式的別離，使頁面和樣式的調整變得更加方便。 現(xiàn)在YAHOO,MSN等國際門戶網站，網易，新浪等國內門戶網站，和主流的WEB2.0網站，均采用DIV+CSS的框架模式，更加印證了DIV+CSS是大勢所趨。 CSS的極大優(yōu)勢表現(xiàn)在簡潔的代碼，對于一個大型網站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。 表現(xiàn)和結構別離，在團隊開發(fā)中更容易分工合作而減少相互關聯(lián)性。第四章 創(chuàng)意設計網的設計有了網站設

40、計的根底，企業(yè)網站的需求，技術的支持，一級級前面素材等一系列的準備之后可以開始設計一個網站了，下面就與大家分享我設計的創(chuàng)意設計網。第一節(jié) 從功能分析開始將要做的是一個公司網站，該公司專為客戶做網站設計的，因此建設網站的目的主要有兩個：一是使瀏覽者或潛在的客戶迅速了解公司大局部已經完成或正在進行的工程及相關的資料，這就要求網站的文字要簡練，盡量減少大篇幅的文字表達，工程效果圖要精彩，當然網頁的頁面效果也要漂亮，以使瀏覽者或潛在的客戶感覺到公司的設計水平高；二是使瀏覽者或潛在的客戶迅速了解公司對業(yè)務的一般操作流程，以便能夠與公司方便快捷地進行聯(lián)系和溝通，減少不必要的中間環(huán)節(jié)及由此帶來的麻煩。建立公

41、司網站要有一個清晰的網站布局。比方說，導航條要不要？很多人說那東西人人在做，就顯得太俗沒個性，難顯示出新潮。但導航條之所以有那么多人在用，是因為它給瀏覽者一個明確的布局，便利人們查找本身所需的信息。從某種角度上說，大家都在用的東西就說明它確實被大家所接受。要清楚網站做出來是給每一個人普通用戶看的。網站還要經常更新，給人以新意。設計技術的成長，帶來了網頁世界的繁榮。尤其在崇尚個性的今天，設計者們更是將頁面設計表示的淋漓盡致。用戶欣喜的看到那些僵化的設計模式正在被逐個打破，網頁設計充滿了朝氣。但是，作為網頁設計者，不能一味的只追求個性的表現(xiàn)，還必需兼顧到用戶和客戶的習慣，在表現(xiàn)本身的風格的同時，在

42、功能上使用戶更加便利。網站的前臺頁面包括首頁、設計理念、作品展示、企業(yè)文化、關于我們、聯(lián)系我們等。第二節(jié) 首頁頁面設計有了基于準備之后的網站籌劃，就可以開始進行頁面設計了，頁面設計主要包括創(chuàng)意、色彩和版式三個方面。創(chuàng)意會使網頁在眾多的競爭對手中脫穎而出；色彩可以使網頁獲得生命的力量；板式那么是和用戶溝通的核心，所以這三者缺一不可。一般的網站都需要這樣一些版塊站名稱logo、廣告區(qū)，導航區(qū)、新聞區(qū)、友情鏈接和版權等版塊。這些版塊又可以稱之為模塊。選擇哪些模塊，實現(xiàn)哪些功能是否需要添加其他模塊都是首頁設計制作時首先需要確定的，下面我們就開始具體的首頁設計制作工作。一、結構分析根據(jù)需求可以知道，在頁

43、面上部要有l(wèi)ogo和導航，接下來使banner，中間局部的左側顯示假設干次要的欄目，右側那么顯示局部文章的內容及作品展示，頁面最底端為頁腳區(qū)域，顯示一些版權信息。很明顯可以用四行兩列的布局方式來安排頁面內容。如下列圖：圖 4.1 頁面布局安排二、風格定位翻開一個網站，給用戶留下第一印象的既不是網站豐富的內容，也不是網站合理的版面布局，而是網站的色彩。色彩對人的視覺效果非常明顯，一個網站設計成功與否，在某種程度上取決于設計者對色彩的運用和搭配。因為網頁設計屬于一種平面效果設計，在排除立體圖形、動畫效果之外，在平面圖上，色彩的沖擊力是最強的，它很容易給用戶留下深刻的印象。因此，在設計網頁時，必須要

44、高度重視色彩的搭配。本網站的搭配主色為：白、淡藍、黑、三種顏色。白色代表純潔、純真、樸素、神圣、明快。淡藍色代表熱情、活潑、熱鬧、溫暖、幸福、桔祥。黑色代表崇高、堅實、嚴肅、剛健、端莊，充分代表了一個企業(yè)應有的氣質和形象。給客戶留下深刻的印象。三、頁頭設計網站的頁頭主要分為兩個局部。一是Logo，logo使一張準備好的圖片，直接放置在頭部容器左側，調整好位置；二是導航條，網站導航條因為有立體感效果，因此它需要脫離文本流，因此在控制樣式的時候要用定位，相對于文本流的定位。網站的導航欄目可以讓用戶對網站的內容及信息一目了然。導航分為：首頁、作品展示、設計理念、企業(yè)籌劃、關于我們、聯(lián)系我們。導航采用

45、的是ul li布局，然后再用a標簽對其他相關網頁進行鏈接，設計和操作上都非常簡單。相關代碼如下： 首  頁 設計理念 作品展示 企業(yè)文化 關于我們 聯(lián)系我們 四、公司簡介及banner設計Banner可以說是企業(yè)網頁中一道美麗的風景線。網頁中的banner信息代表著一個企業(yè)的素質和形象，所以應該表現(xiàn)的大氣、端莊而且精細。還更要表現(xiàn)出一個企業(yè)應該有的朝氣和活力。因此banner圖片加文字說明成為首選。實例展示從側面讓客戶了解到公司的實力。在首頁的版面，先是用Photoshop對網站模板進行切片，然后用DIV+CSS進行排版。圖 4.2 banner五、中間內容設計根據(jù) 瀏覽者

46、在閱讀時經常采用從上到下，從左到右的習慣，主體內容中，將“優(yōu)秀網站案例靠左邊放，這樣能更好地吸引瀏覽者的眼球，同時也表達公司的專業(yè)、能力等。優(yōu)秀網站案例采用網頁圖片切換的形式展現(xiàn)在首頁中，使整個首頁處于于靜于動的畫面。右邊那么是創(chuàng)意設計公司的設計理念。圖 4.3 中間局部六、頁腳 頁腳用.foot 在里面嵌套表格排列，左面是其他友情鏈接等等，右面是法律條款和網站的版權屬于本公司等,.foot 高17像素，寬935像素。由于瀏覽器的兼容性問題，為了使四個DIV能居中對齊，在網頁中用了margin:0 auto來實現(xiàn)。圖 4.4 底部版權圖圖 4.5 首頁整體圖第三節(jié) 內頁設計其他頁面的導航和頁面

47、屬性都是采用首頁的導航和body屬性。一、設計理念設計理念界面展示了公司設計的理念，同時還附帶了公司設計的一些行業(yè)案例，讓客戶體會到本公司的專業(yè)。左邊的鏈接為以后的編輯奠定根底。效果圖如下列圖4.6所示：圖4.6 設計理念二、作品展示作品展示模版可以介紹公司的特色，讓游客更充分的了解公司、公司業(yè)務所面向地方對象。左邊列舉了公司業(yè)務工程，左邊的鏈接為以后的編輯奠定根底。效果圖如下列圖4.7所示：圖4.7 作品展示三、企業(yè)文化此頁面的的設計為左邊是代表流程的圖片，右邊詳細介紹了公司的企業(yè)文化等信息，讓客戶清晰的了解公司的文化，效勞信息等等。效果圖如下列圖4.8所示：圖 4.8 企業(yè)文化四、關于我們

48、關于我們頁面用來展示最近公司所接受業(yè)務的進程讓，如此才能讓客戶更放心。網頁中給出了公司的設計流程圖、公司的營業(yè)資格證等，讓客戶對本公司的能力更認可。效果圖如下4.9圖所示：五、聯(lián)系我們聯(lián)系我們板塊能實現(xiàn)交流的目的，讓客戶對公司的開展，公司的業(yè)務流程提出珍貴的意見和建議，這樣公司才能更好的為自己定位，才能根據(jù)客戶提出的意見來完善自身。聯(lián)系我們頁面lianxi.html，主要介紹公司所在地、公司聯(lián)系 、公司地圖等信息。網站的聯(lián)系我們界面效果，如下列圖4.10所示：圖4.10 聯(lián)系我們第五章 網站的測試編碼完成后，就要對源程序進行測試。軟件測試的目的在于爭取在第一時間發(fā)現(xiàn)程序中的錯誤，以便于及時糾錯

49、，增加軟件可靠性。它在整個系統(tǒng)設計實施過程中占有相當?shù)姆至?。測試是軟件開發(fā)時期的最后一個階段，也是軟件質量保證中至關重要的一個環(huán)節(jié)。測試的目的是為了盡可能的發(fā)現(xiàn)程序中存在的錯誤，其任務就是消除網站故障，保證程序的可靠運行，最終把一個高質量的網站系統(tǒng)交給用戶使用。一般來說在每個模塊完成之后就要對它作必要的測試，這種測試被稱為單元測試，模塊的測試者也就是編寫者。編碼和單元測試屬于網站生命周期的同一階段。這個階段結束之后，對網站系統(tǒng)還應該進行各種綜合測試，這是網站生命周期的另一個獨立的階段，由專門的測試人員承當。在網頁中的測試階段主要是對網站進行瀏覽器兼容性測試。在網頁測試的階段我分別安裝了IE8、火狐等瀏覽器，并且進