網(wǎng)站前臺設計與實現(xiàn)

畢業(yè)設計系別指導教師本人鄭重聲明：所呈交的畢業(yè)設計，是本人在指導老師的指導下，獨立進行研究工作所取得的成果，成果不存在知識產(chǎn)權(quán)爭議，除設計中已經(jīng)注明引用的內(nèi)容外，本設計不含任何其他個人或集體已經(jīng)發(fā)表或撰寫過的作品成果。對本設計的研究做出重要貢獻的個人和集體均已在文中以明確方式標明。本人完全意識到本聲明的法律結(jié)果由本人承擔。畢業(yè)設計作者簽名：一、網(wǎng)絡傳媒系畢業(yè)設計任務書姓名學號專業(yè)、班級網(wǎng)絡技術0802畢業(yè)設計選題xxx網(wǎng)站的設計與實現(xiàn)主要設計內(nèi)容：（一）設計網(wǎng)站風格和框架。網(wǎng)站頁面的整體風格必須根據(jù)網(wǎng)站所要表達思想表現(xiàn)一致，而整個網(wǎng)站的頁面風格必須統(tǒng)一。（二）設計功能模塊?！饕O計任務：……需提交的設計結(jié)果：……指導老師完成任務期限審核意見：系主任（簽章）：年月日二、網(wǎng)絡傳媒系畢業(yè)設計方案姓名學號專業(yè)、班級網(wǎng)絡技術0802畢業(yè)設計選題xxx網(wǎng)站的設計與實現(xiàn)設計目標：網(wǎng)站包括靜態(tài)的和動態(tài)的頁面，管理員能夠進行后臺維護和管理，要有比較穩(wěn)定的數(shù)據(jù)庫系統(tǒng)。通過連接代碼把網(wǎng)站前臺顯示系統(tǒng)與后臺管理系統(tǒng)連接起來。主要包括……。設計內(nèi)容：1.設計網(wǎng)站的整體風格；2.做好網(wǎng)站的色彩搭配；3.確定前臺網(wǎng)站的欄目設置；4.設計網(wǎng)站所需的Logo、flash、banner、圖片、按鈕等；5.制作網(wǎng)站前臺的所有網(wǎng)頁并實現(xiàn)各個功能模塊?！O計進程：……指導教師意見：簽名：年月日三、網(wǎng)絡傳媒系畢業(yè)設計指導記錄表姓名專業(yè)、班級學號畢業(yè)設計選題xxx網(wǎng)站設計與實現(xiàn)設計階段指導意見畢業(yè)設計方案畢業(yè)設計方案符合主題要求，網(wǎng)站的基本功能可以實現(xiàn)，風格和色彩搭配符合網(wǎng)站主題。設計進程階段一明確主題，需求分析和可行性分析考慮合理，初步制定好了網(wǎng)站方案，確立網(wǎng)站任務，收集素材，但前臺整體框架的設計還有待改善。設計進程階段二明確前臺基本功能模塊，完成了網(wǎng)站總體風格和顏色搭配，初步搭建好了總體框架，制作好效果圖，并制作好靜態(tài)頁面。設計進程階段三及結(jié)果連接后臺數(shù)據(jù)庫，實現(xiàn)網(wǎng)站中每個子頁面和主頁面正常運行，網(wǎng)站功能基本實現(xiàn)。設計報告初稿方案條理欠缺清晰，前臺系統(tǒng)模塊的描述不夠。格式有些問題。設計報告修改稿方案條理基本清晰，后臺系統(tǒng)與前臺系統(tǒng)結(jié)合完整，詳略得當，格式也按格式要求調(diào)整規(guī)范。指導教師：年月日四、網(wǎng)絡傳媒系畢業(yè)設計答辯記錄表

畢業(yè)設計題目xxx網(wǎng)站的設計與實現(xiàn)作者姓名所屬系、專業(yè)、年級指導教師姓名、職稱答辯會紀要時間地點答辯小組成員姓名職務（職稱）姓名職務（職稱）姓名職務（職稱）答辯中提出的主要問題及回答的簡要情況記錄：會議主持人簽名： 記錄人簽名： 年月日答辯小組意見及評分：評分：答辯組長簽名：年月日五、網(wǎng)絡傳媒系畢業(yè)設計評分表姓名專業(yè)、班級學號畢業(yè)設計選題xxx網(wǎng)站的設計與實現(xiàn)畢業(yè)設計過程（20%）評分：指導老師：畢業(yè)設計作品（30%）評分：指導老師：畢業(yè)設計報告（30%）評分：指導老師：畢業(yè)設計答辯（20%）評分：答辯組長：畢業(yè)設計總評評分：指導老師：年月日注：未被抽取參加答辯者，設計作品與設計報告的分值比例各增加10%。xxxx的設計與實現(xiàn)計算機網(wǎng)絡技術級摘要簡單的說網(wǎng)站時一種通訊工具，就像布告欄一樣，人們可以通過網(wǎng)站來發(fā)布自己想要公開的信息。Internet的迅速普及，正是依靠不計其數(shù)、豐富多彩的網(wǎng)站，或者利用網(wǎng)站來提供相關的網(wǎng)絡服務，網(wǎng)站是由網(wǎng)頁按照一定的鏈接順序組成，人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的信息或者享受網(wǎng)絡服務?！?。關鍵字ASP技術?！?。Abstract……KeywordASPtechnology……目錄1系統(tǒng)分析 11.1網(wǎng)站定位 11.2網(wǎng)站研究背景 11.3網(wǎng)站研究意義 11.4網(wǎng)站可行性分析 21.4.1技術可行性分析 21.4.2經(jīng)濟可行性分析 21.4.3操作可行性分析 22項目分析 32.1網(wǎng)站設計目標 32.2網(wǎng)站介紹 32.3客戶需求分析 32.4網(wǎng)站界面設計 42.5網(wǎng)站開發(fā)環(huán)境需求 42.6網(wǎng)站前臺總體設計 43開發(fā)工具介紹 63.1DreamwaverCS3介紹 63.2Fireworks技術 63.3Flash技術 73.4PhotoshopCS4 83.5ASP的特點 84網(wǎng)站前臺設計 104.1網(wǎng)站素材處理 104.2網(wǎng)站顏色的搭配 104.3網(wǎng)站logo設計 104.4網(wǎng)站整體布局 104.5網(wǎng)站前臺頁面設計 114.5.1首頁 114.5.2xxx與文化 114.5.3xxx業(yè)新聞 134.5.4xxx的種類 144.5.5xxx的美食 144.5.6xxx與健康 154.5.7xxx具文化 154.6網(wǎng)站代碼 174.6.1新聞頁面的連接 174.6.2圖片滾動條 184.6.3投票系統(tǒng) 195網(wǎng)站測試 225.1測試的目的 225.2測試的方法 225.3測試用例 235.4測試總結(jié) 23總結(jié) 24致謝 25參考文獻 25第16頁共25頁1系統(tǒng)分析1.1網(wǎng)站定位我們把建設的網(wǎng)站定位于：網(wǎng)站面向那些愛xxx，喜歡中國古典文化，以及需要了解xxx的最新動態(tài)的網(wǎng)民。該定位的具體含義為：通過網(wǎng)站來達到文化傳播的意義，讓人們了解到xxx文化在中國歷史中的地位，讓大家都重視并且學習中國古典文化。讓該網(wǎng)站成為宣傳xxx網(wǎng)站的有力傳播基地。1.2網(wǎng)站研究背景面對日益加快的生活節(jié)奏和信息社會日新月異的變化，網(wǎng)絡已經(jīng)成為一個便利的宣傳平臺，可以通過最少的投資，達到最大的宣傳效果，利用來網(wǎng)絡宣傳xxx文化是一個勢在必行的趨勢。如何運用現(xiàn)代化信息技術完成這一目標，建立“文化一個傳播中心”是本網(wǎng)站要完成的重要任務。網(wǎng)站傳播xxx文化為中心，通過運用Dreamweaver技術與HTML語言來實現(xiàn)網(wǎng)的頁面設計，從而提高了網(wǎng)站的視覺效果。在實際操作過程中，始終堅持著一個原則：網(wǎng)站設計要與實際相結(jié)合，才能創(chuàng)造出新穎便捷的受大眾喜愛的網(wǎng)站。這是本網(wǎng)站設計的目標。1.3網(wǎng)站研究意義網(wǎng)站具有文字、圖片、色彩、電影、三度空間、虛擬現(xiàn)實等所有廣告媒體的功能，通過它，可以讓網(wǎng)民非常方便地看到xxx的歷史文化、xxx的分類、xxx的各種資訊信息，而且可以加入聲音、圖片、動畫和影像信息，達到真正的聲情并茂，達到更好的瀏覽效果。網(wǎng)站傳播與傳統(tǒng)的傳播不同，不需要打大量的人力和物力，并且可提供全天候的服務而不須增加開支，可以減少浪費。網(wǎng)絡還可以滿足那些年長或殘疾而行動不便的客戶的特殊需要，網(wǎng)頁的維護及運作由網(wǎng)絡服務公司負責，有專業(yè)設計的電腦軟件24小時全自動處理來往信息、統(tǒng)計、存檔，無須增加企業(yè)本身的營運或人事成本。提供即時新聞訊息、xxx文化發(fā)展、xxx的種類等內(nèi)容。與傳統(tǒng)傳播方式相比網(wǎng)頁傳播一旦放在網(wǎng)頁上，不僅立即問世，開始發(fā)揮效用，更可隨時更新、更正、省時省力，節(jié)省了大筆的人力及印刷費用。上網(wǎng)的成本可說極低，比起印刷商品目錄和電視廣告，其費用更顯微不足道，且網(wǎng)絡能延伸之全世界每一個角落。1.4網(wǎng)站可行性分析1.4.1技術可行性分析本站使用的是ASP+ACCESS技術，Asp是微軟公司開發(fā)的代替CGI腳本程序的一種應用程序,它可以與數(shù)據(jù)庫和其它程序進行交互，是一種簡單、方便的編程工具.Access數(shù)據(jù)庫作為微軟推出的以標準JET為引擎的桌面型數(shù)據(jù)庫系統(tǒng)，由于具有操作簡單、界面友好等特點，具有較大的用戶群體[1].目前，ASP+Access是中小型Internet網(wǎng)站的首選方案，本網(wǎng)站實現(xiàn)功能的目的主要是通過后臺調(diào)用數(shù)據(jù)信息顯示在前臺，使前臺數(shù)據(jù)信息能夠及時更新。在制作xxx網(wǎng)的過程中，需要考慮到技術可行性的問題，對制作人員一般都要求掌握計算機技術，具有一定的數(shù)據(jù)庫基礎，至少熟悉運用網(wǎng)頁制作的軟件,并對多媒體軟件具有一定的熟悉。1.4.2經(jīng)濟可行性分析本網(wǎng)站制作全過程都有本小組自發(fā)制作，因此不需要太多的人力和物力，管理方便，所以無需龐大的費用。所以從經(jīng)濟上完全是可行的。1.4.3操作可行性分析本網(wǎng)站制作簡單、界面簡潔清晰，對于那些有一般的計算機知識的人員已可以輕松上手。并兼容所有網(wǎng)頁瀏覽的軟件。由此可見，該網(wǎng)站的操作是可行的，有必要開發(fā)本網(wǎng)站。綜合以上方面，本網(wǎng)站具有很高的開發(fā)可行性，無論是從技術上，經(jīng)濟上或者社會因素方面還是操作上都是可行的。擴充性網(wǎng)站的整體規(guī)劃及框架設計是具可擴充性的，前臺頁面的設計能保證企業(yè)網(wǎng)站在增加欄目后不會破壞網(wǎng)站的整體結(jié)構(gòu)。后臺數(shù)據(jù)庫的設計具有高度的擴充性，企業(yè)能夠根據(jù)需要對欄目、類別的增、刪、修改。2項目分析2.1網(wǎng)站設計目標對于一個宣傳網(wǎng)站，企業(yè)的品牌形象至關重要。特別是對于互聯(lián)網(wǎng)技術高度發(fā)展的今天，越來越多的人通過網(wǎng)絡來查找資料或進行學習，因此，文化傳播業(yè)應該緊跟時代發(fā)展的步伐，本設計的主要目標是開發(fā)xxx文化的文化網(wǎng)站，用戶可通過網(wǎng)站瀏覽一些關于xxx的資信或信息，例如：xxx的發(fā)展史、xxx的種類介紹等。按時保質(zhì)地完成xxx網(wǎng)的設計，并掌握到網(wǎng)站的制做過程與技術。網(wǎng)站的整體設計思路簡單，擁有基本的功能，風格簡潔、易用、不單調(diào)。各個子頁面都可正常返回主頁以及正確連接到各個子頁面，子頁面與主頁面的風格及顏色相同。數(shù)據(jù)要求前臺正確顯示后臺要求的數(shù)據(jù)的更新，及錯誤處理。為了保證網(wǎng)絡的安全，不可以通過前臺進入后臺，對后臺進行操作。本網(wǎng)站主要實現(xiàn)前臺通過調(diào)用數(shù)據(jù)庫把后臺數(shù)據(jù)在前臺顯示和更新。管理員在后臺可以動態(tài)更新首頁的內(nèi)容,使整個網(wǎng)站協(xié)調(diào)一致。在設計上,注重協(xié)調(diào)各區(qū)域的主次關系。通過網(wǎng)站的制做，學會與同學的合做，培養(yǎng)團隊協(xié)助能力。2.2網(wǎng)站介紹本網(wǎng)站定位于計算機網(wǎng)絡基礎課程網(wǎng)，暫時考慮單機環(huán)境下的實現(xiàn)；操作系統(tǒng)選擇目前常用的Windowsxp和Windowsserver2003。系統(tǒng)性質(zhì)管理信息系統(tǒng)。本網(wǎng)站前臺功能包含首頁、xxx與文化、xxx新聞、xxx的種類、xxx的美食、xxx與健康、xxx具。整個網(wǎng)站網(wǎng)頁設計簡單，是一個能夠給網(wǎng)民提供xxx消息的網(wǎng)站。2.3客戶需求分析該網(wǎng)站是針對那些對xxx和中國歷史文化有興趣的網(wǎng)民，隨著中國不斷的發(fā)展，越來越多的人對中國的文化有興趣，并且學習中國的文化。xxx不僅對中國有重要的影響對世界的文化業(yè)有著重要的，xxx曾踏上絲綢之路風光過，在中國史上有著不可替代的作用和舉足輕重的歷史地位，學習xxx文化，可以幫助中國文化的學習，本網(wǎng)站就是以推廣中國的xxx文化為本，幫助網(wǎng)民查找有關xxx的信息，并且為網(wǎng)民提供一個可供交流的平臺，供喜歡xxx以及中國歷史文化的網(wǎng)民相互交流和學習。網(wǎng)絡的發(fā)展速度越來越快，所以這個網(wǎng)站還是很有發(fā)展前途的。隨著網(wǎng)絡的發(fā)展，網(wǎng)絡已經(jīng)越來越貼近人民的生活，越來越多的人通過網(wǎng)絡來獲得他們所需要的信息，所以，通過網(wǎng)絡來推廣xxx文化是一個趨勢，也勢在必行。隨著經(jīng)濟的發(fā)展，人們的在物質(zhì)生活得到滿足的同時，人們還希望得到精神生活上的滿足。xxx不僅是一種飲品，更是一種文化，可以滿足人們在物質(zhì)和精神上的滿足，所以，xxx在將來還是有很好的發(fā)展前途。本網(wǎng)站提供了將xxx的文化和xxx的一些實時消息，幫助網(wǎng)民以最快的速度獲得他們想要的信息，網(wǎng)站功能需求表如表2.1：表2.1網(wǎng)站的功能性需求功能序號功能名稱功能說明1首頁整個xxx信心的提供以及一些文化方面的介紹2xxx與文化xxx的歷史習俗以及文化方面的文字和圖片的介紹3xxx新聞一些xxx的展會消息以及最新的動態(tài)資訊4xxx的種類xxx的分類以及其介紹5xxx的美食xxx美食的介紹和做法6xxx與健康教人們要怎么健康飲xxx7xxx具xxx具的欣賞以及一些xxx具的介紹2.4網(wǎng)站界面設計因為本網(wǎng)站是xxx文化的網(wǎng)站，所以這個網(wǎng)站中采用了大量的具有中國文化元素的素材如在制作Logo時選用的素材有中國風格的人物畫，棋盤，xxx壺，燈籠等，這些素材的運用突出了網(wǎng)站的主題。從整體上來看，這個網(wǎng)站各個頁面的分工明確，頁面美觀、大方、簡潔、易懂。標準、具有一定的兼容性。2.5網(wǎng)站開發(fā)環(huán)境需求軟件環(huán)境：兼容當前主流操作系統(tǒng)WindowsXP/server2003等。2.6網(wǎng)站前臺總體設計本網(wǎng)站主要是用來進行xxx葉信息的介紹以及其消息的發(fā)布，作為一個網(wǎng)站，應該有一些相關及其相對獨立的模塊耦合而成。本網(wǎng)站系統(tǒng)主要包括以下幾個主要頁面及幾個大的模塊，每個頁面包含豐富的內(nèi)容，每個大的模塊下又細分為幾個的功能模塊。本網(wǎng)站主要用來進行教學信息的發(fā)布與顯示。作為一個網(wǎng)站，應該由一些相關及相對獨立的模塊耦合而成。本網(wǎng)站系統(tǒng)主要包括以下幾個主要頁面及幾個大的模塊，每個頁面包含豐富的內(nèi)容，每個大的模塊下又細分為幾個的功能模塊。制作前臺頁面模塊，包括主頁及各個子頁面，建立各個頁面與數(shù)據(jù)庫中相關數(shù)據(jù)鏈接，實現(xiàn)前臺通過調(diào)用數(shù)據(jù)庫把后臺數(shù)據(jù)在前臺顯示和更新。整體網(wǎng)站遵循精品課程網(wǎng)站設計思路，擁有完善的功能，風格要求簡潔大方不單調(diào)。各個子頁面都可正常返回主頁以及正確連接到各個子頁面。功能要求使用簡單全面，容易操作。由上面的分析，網(wǎng)站前臺的結(jié)構(gòu)設計成，如圖2-1所示:首首頁xxx與文化xxx具文化xxx與健康xxx的美食xxx的種類xxx業(yè)新聞圖2-1網(wǎng)站前臺結(jié)構(gòu)設計3開發(fā)工具介紹3.1DreamwaverCS3介紹DreamweaverCS3是由Adobe公司在并購Macromedia之后推出的最新版本，它是一款專業(yè)的Web站點開發(fā)軟件，可用于Web站點、Web頁和Web應用程序的設計、編碼和開發(fā)工作。在業(yè)界通常將Dreamweaver、Flash、Fireworks稱為網(wǎng)頁三劍客。將各種網(wǎng)頁制作的相關工具緊密聯(lián)系起來是Dreamweaver系列的一大亮點，同時良好的插件體系，使DreamweaverCS3可通過第三方插件進行補充。另外，DreamweaverCS3還為開發(fā)人員提供了動態(tài)語言支持與豐富的模板。DreamweaverCS3在功能強大與易用性之間具有很好的平衡，使用DreamweaverCS3可以有效地提高Web開發(fā)的工作效率與Dreamwaver8比較DreamwaverCS3新增了許多功能：（1）與PhotoshopCS3的關聯(lián)增強。在DreamweaverCS3中雙擊圖形、圖像文件，即可打開PhotoshopCS3進行編輯，也可以將PhotoshopCS3中設計的圖形、圖像文件直接引入到DreamweaverCS3中。（2）對瀏覽器兼容性的檢查。多種瀏覽器并存的現(xiàn)狀給Web開發(fā)人員增加了很多額外的工作量，也許Web頁面在IE下看到的效果令人非常滿意，而放到其他瀏覽器例如MozillaFirefox看起來卻是一團糟。DreamweaverCS3提供了對Firefox1.5、InternetExplorer(Windows)6.0和7.0、InternetExplorer(Macintosh)5.2、NetscapeNavigator8.0、Opera8.0和9.0、Safari2.0這些瀏覽器相關CSS的兼容性檢測。（3）CSS相關功能的增強。在DreamweaverCS3中提供了大量的CSS模板與代碼塊，開發(fā)人員可以依據(jù)這些模板和代碼塊快速建立基于CSS修飾的頁面。3.2Fireworks技術FireworksCS3是一個強大的網(wǎng)頁圖形設計工具，你可以使用它創(chuàng)建和編輯位圖、矢量圖形，還可以非常輕松的做出各種網(wǎng)頁設計中常見的效果，比如翻轉(zhuǎn)圖象，下拉菜單等，設計完成以后，如果你要在網(wǎng)頁設計中使用，你可以將它輸出為html文件，還能輸出為可以在photoshop，illustrator和flash等軟件中編輯的格式。FireworksCS3軟件可以加速Web設計與開發(fā),是一款創(chuàng)建與優(yōu)化Web圖像和快速構(gòu)建網(wǎng)站與Web界面原型的理想工具。FireworksCS3不僅具備編輯矢量圖形與位圖圖像的靈活性,還提供了一個預先構(gòu)建資源的公用庫,并可與AdobePhotoshopCS3、AdobeIllustratorCS3、AdobeDreamweaverCS3和AdobeFlashCS3軟件省時集成。在Fireworks中將設計迅速轉(zhuǎn)變?yōu)槟Ｐ?或利用來自Illustrator、Photoshop和Flash的其它資源。然后直接置入DreamweaverCS3中輕松地進行開發(fā)與部署。矢量編輯與位圖編輯創(chuàng)建和編輯矢量圖像與位圖圖像,并導入和編輯本機PhotoshopIllustrator文件。圖像優(yōu)化采用預覽、跨平臺灰度系統(tǒng)預覽、選擇性JPEG壓縮和大量導出控件,針對各種交付情況優(yōu)化圖像。高效的Photoshop和Illustrator集成導入Photoshop(PSD)文件,導入時可保持分層的圖層、圖層效果和混合模式。將Fireworks(PNG)文件保存回Photoshop(PSD)格式。導入Illustrator(AI)文件,導入時可保持包括圖層、組和顏色信息在內(nèi)的圖形完整性。3.3Flash技術Flash是Macromedia公司開發(fā)的集動畫制作、網(wǎng)頁設計和多媒體應用為一體的優(yōu)秀應用軟件為。用Flash可制作交互式的動畫和電影，這些動畫和電影可以插入到網(wǎng)頁中，也可以獨立為動態(tài)網(wǎng)頁，同時，他還自帶了功能強大的ActionScript編譯器，擴展了動畫的功能，與網(wǎng)絡應用集成得更加緊密。3.3MicrosoftAccess介紹MicrosoftAccess應用程序是一種功能強大且使用方便的關系型數(shù)據(jù)庫管理系統(tǒng)。MicrosoftAccess是Office系列軟件中用來專門管理數(shù)據(jù)庫的應用軟件。所謂數(shù)據(jù)庫是指經(jīng)過組織的、關于特定主題或?qū)ο蟮男畔⒓稀Ｋ⒉恍枰獢?shù)據(jù)庫管理者具有專業(yè)的程序設計水平，任何非專業(yè)的用戶都可以用它來創(chuàng)建功能強大的數(shù)據(jù)庫管理系統(tǒng)。由于它繼承了Windows的特性，它可運行于各種MicrosoftWindows系統(tǒng)環(huán)境中。MicrosoftAccess數(shù)據(jù)庫能匯集各種信息以供查詢、存儲和檢索。Access的優(yōu)點在于它能使用數(shù)據(jù)表示圖或自定義窗體收集信息。數(shù)據(jù)表示圖提供了一種類似于Excel的電子表格，可以使數(shù)據(jù)庫一目了然。另外，Access允許創(chuàng)建自定義報表用于打印或輸出數(shù)據(jù)庫中的信息。Access也提供數(shù)據(jù)存儲庫，可以使用桌面數(shù)據(jù)庫文件把數(shù)據(jù)庫文件置于網(wǎng)絡文件服務器，與其他網(wǎng)絡用戶共享數(shù)據(jù)庫。Access是一種關系數(shù)據(jù)庫工具，關系數(shù)據(jù)庫是已開發(fā)的最通用的數(shù)據(jù)庫之一。3.4PhotoshopCS4作為世界上最受歡迎的圖像處理軟件，Photoshop每一次發(fā)布，都會給我們帶來很多驚喜。而隨著Adobe正式發(fā)布了其最新版PhotoshopCS4之后，人們的熱情又被重新點燃。和老版相比，新版PhotoshopCS4最大的變化，就是加入了GPU支持。原本相當耗費資源的大圖片處理，在GPU的輔助下，已經(jīng)變得異常迅速。而更加專業(yè)的3D圖像處理，則是新版本的另一個亮點。第一次打開PhotoshopCS4，依舊是熟悉的藍色啟動畫面。不過，和上一版本相比，新版本在畫面配色上更加淡雅，更能卓顯出軟件特有的專業(yè)氣質(zhì)。此外，新版界面也在老版本的基礎上，進行了明顯改進。和原本華麗的CS3相比。PhotoshopCS4依舊采用了人性化十足的點擊式界面，不過風格看上去更加明快。同時，幾個快捷鍵也被加入到了菜單欄右側(cè)，除了可以幫助我們快速完成網(wǎng)格、標尺的顯示之外。最重要的，還是增加了一個窗口布局功能，以便我們能夠快速完成多組圖片的快速布局。除此之外，在窗口最右端，PhotoshopCS4還特意加入了一項菜單布局功能。能夠為不同的使用者，快速排版出適合他們的界面布局。雖然，這項功能在真正的工作中，究竟作用如何，但的確是一項十分貼心的設計。3.5ASP的特點ActiveServerPages（ASP，活動服務器頁面）就是一個編程環(huán)境，在其中，可以混合使用HTML、腳本語言以及組件來創(chuàng)建服務器端功能強大的Internet應用程序。ASP之所以能受到大家的重視與使用的原因主要在于所產(chǎn)生的執(zhí)行結(jié)果都是標準的HTML格式，而且這些程序是在網(wǎng)絡服務器端執(zhí)行，ASP（Activeserverpage）工作在服務器的一端，通過服務器端的編譯來動態(tài)的將HTML頁面?zhèn)魉徒o瀏覽器，而“一般的腳本是直接在客戶機端瀏覽器執(zhí)行處理，由于腳本的兼容問題，經(jīng)常出現(xiàn)錯誤，ASP文件只需后綴.asp擴展，即可實現(xiàn)動態(tài)頁面的輸出，這時當然需要WEB服務器支持ASP的運行。如果你以前創(chuàng)建過一個站點，其中混合了HTML、腳本語言以及組件，你就可以在其中加入ASP程序代碼。通過在HTML頁面中加入腳本命令，你可以創(chuàng)建一個HTML用戶界面，并且，還可以通過使用組件包含一些商業(yè)邏輯規(guī)則。組件可以被腳本程序調(diào)用，也可以由其他的組件調(diào)用。當在Web站點中融入ASP功能后，將發(fā)生以下事情：1、用戶調(diào)出站點內(nèi)容，默認頁面的擴展名是.asp。2、瀏覽器從服務器上請求ASP文件。3、服務器端腳本開始運行ASP。4、ASP文件按照從上到下的順序開始處理，執(zhí)行腳本命令，執(zhí)行HTML頁面內(nèi)容。5、頁面信息發(fā)送到瀏覽器。4網(wǎng)站前臺設計4.1網(wǎng)站素材處理把從網(wǎng)站上收集來的素材通過Fireworks和Photoshop自作靜態(tài)圖片，把圖片做成自己網(wǎng)站所需要的大小或者截取圖片的某個部分。網(wǎng)站中還有一些可以動的圖片是通過flash自作的。通過flash可以使圖片具有動態(tài)效果，把這樣的圖片運用在網(wǎng)頁中，使網(wǎng)頁看起來更加生動。4.2網(wǎng)站顏色的搭配網(wǎng)站的色彩就像是人的外表一樣，如果打扮得美觀大方，就會給人一種魅力四射的感受，而不修邊幅則讓人感到粗糙毛草，因此，網(wǎng)頁的色彩搭配將直接影響訪問者對網(wǎng)站的印象。本網(wǎng)在式以灰色、黑等有古典藝術感顏色色彩搭配使用的，使用了一個淡色背景，在網(wǎng)頁中也使用了一些色彩圖片使得整個網(wǎng)站看上去不會顯的很呆板，又不會失去網(wǎng)站的風格，使整個網(wǎng)站看起來具有中國文化氛圍。4.3網(wǎng)站logo設計應為這個網(wǎng)站是以傳播xxx文化為主要的傳播思想，因此在網(wǎng)站logo的設計中選用了很多具有中國特色、具有文化氛圍的素材，比如燈籠棋盤和xxx一樣代表的都是一種中國的傳統(tǒng)文化，logo設計如圖4-1?！瓐D4-1logo4.4網(wǎng)站整體布局網(wǎng)頁布局大致可分為“國”字型、拐角型、“T”字型、“L”字型、綜合框架型、Flash型、變化型，本網(wǎng)站采用的是“國”字型，“也可以稱為“同”字型，最上面是網(wǎng)站的標題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是網(wǎng)上常見一種結(jié)構(gòu)類型。其實時操作版面，頁面布局清晰，擺布對稱，主次分明，整體布局如圖4-2。Logo導航版權(quán)所有圖4-2網(wǎng)站整體布局4.5網(wǎng)站前臺頁面設計網(wǎng)站主要包括：xxx與文化，xxx新聞，xxx的種類，xxx的美食，xxx與健康，xxx具七個子頁面。制作過程如下：4.5.1首頁網(wǎng)站制作過程：首先利用fireworks制作了網(wǎng)站的首頁效果圖，大小問900*1000。在制作網(wǎng)頁的過程中首先是在dreameaver中用布局畫出整個網(wǎng)站的大體布局格式，主要是分了三欄，各個欄目有可以分多個小欄目，并且通過css樣式來調(diào)表格以及圖片，文字的位子。主頁包括的內(nèi)容主要有：網(wǎng)站網(wǎng)站的域名，導航條，LOGO，版權(quán)。導航條又包含xxx與文化，xxx新聞，xxx的種類，xxx的美食，xxx與健康，xxx具。用asp制作了head.asp，index.asp,tail.asp三個模塊。模塊內(nèi)容，如圖4-3所示：4.5.2xxx與文化制作過程以及使用的技術：首先是吧這個網(wǎng)頁的框架用布局畫出來，頁面的框架構(gòu)成跟主頁的大體上是一樣地，這里就不詳細的介紹了，頁面的長度不做限定，寬度為900像素，網(wǎng)站頭調(diào)用了dead,asp模塊，尾調(diào)用了tail.asp模塊。在正文部分插入可憐一個介紹xxx文化的視頻，可以讓網(wǎng)民以看故事的方式快速了解xxx在中國的發(fā)展歷程。正文中還插入了一幅xxx馬古道的地圖，是一幅xxx的線路地圖，最下面還用一個flsah來介紹了其沿途風光。激發(fā)人們對了解xxx的歷史的欲望、效果圖如圖4-4所示：…………圖4-3首頁……圖4-4xxx與文化4.5.3xxx業(yè)新聞制作過程以及使用的技術：首先把這個頁面的框架畫出來，網(wǎng)頁的框架以及頁面長度和寬度的設置跟xxx與文化大體上時一樣的，新聞頁是為了給網(wǎng)民提供xxx信息，所以我把新聞新聞分成熱點關注，xxx葉會展，xxx業(yè)咨詢，最新動態(tài)，和行情商機，一邊網(wǎng)民快速的了解他們需要的信息。為了提高新聞瀏覽的速度，我把最新新聞的用flash形式顯示出來，還做了一個一個網(wǎng)站公告的滾動條，方便網(wǎng)站發(fā)布最新信息。這個頁面調(diào)用了head.asp和tail.asp的模塊的內(nèi)容，效果圖如圖4-5所示：……圖4-5xxx業(yè)新聞4.5.4xxx的種類制作過程以及使用的技術：這個頁面的框架，長度，寬度，以及調(diào)用的模塊內(nèi)容跟新聞頁面差不多，這里就不過多的說明了，該頁面主要是介紹介紹xxx的總類以及推薦一些xxxxxx的產(chǎn)品給網(wǎng)民，所以我把xxx的種類細分，做成左右兩部分上面的部分介紹xxx的總類，下面推薦一些廠商的產(chǎn)品以及做廣告。廠商產(chǎn)品推薦做成橫向的滾動條以便多推薦一些廠商的產(chǎn)品。效果圖如圖4-6所示：……圖4-6xxx的種類4.5.5xxx的美食xxx美食的制作方法差不多，這個網(wǎng)頁主要是以介紹和欣賞xxx美食為主，該網(wǎng)頁的內(nèi)容有美食排行榜，美食的保健，推薦美食以及美食的制作方法的一些相關信息，效果圖如圖4-7所示：……圖4-7xxx的美食4.5.6xxx與健康制作過程以及使用的技術：這個網(wǎng)頁的制作方法和調(diào)用的模塊內(nèi)容跟xxx新聞的制作方法差不多，這個網(wǎng)頁主要是告訴網(wǎng)民應該如何健康飲xxx，網(wǎng)頁的內(nèi)容包括飲xxx禁忌，xxx葉xxx療，科學飲xxx，效果圖如圖4-8所示：4.5.7xxx具文化制作過程以及使用的技術：這個網(wǎng)頁的制作方法和調(diào)用的模塊內(nèi)容跟xxx新聞的制作方法差不多，這個網(wǎng)頁主要是以介紹和欣賞xxx具為主，該網(wǎng)頁的內(nèi)容有xxx具歷史文化，xxx具知識，xxx具鑒賞，xxx具典故，網(wǎng)頁右邊的模塊做了一個中國印象的flash展示了一些具有文化氣息的圖片，效果圖如圖4-9圖所示：……圖4-8xxx與健康……圖4-9xxx具文化4.6網(wǎng)站代碼4.6.1新聞頁面的連接Conn.asp<%dimconndimconnstrdimdbdb="../databases/manage.mdb"'數(shù)據(jù)庫文件位置onerrorresumenextconnstr="DBQ="+server.mappath(""&db&"")+";DefaultDir=;DRIVER={MicrosoftAccessDriver(*.mdb)};"setconn=server.createobject("ADODB.CONNECTION")iferrthenerr.clearelseconn.openconnstrendifsubCloseConn() conn.close setconn=nothingendsub%><% setrs_news=server.createobject("adodb.recordset")sql="select*fromnewswhereBigClassName='xxx文xxx詩'"rs_news.opensql,conn,1,1i=0 if(rs_news.eoforrs_news.bof)then %><% else while(notrs_news.eofandi<5) %><% rs_news.movenext i=i+1 wend endif rs_news.close setrs_news=nothing %>4.6.2圖片滾動條……圖4-10滾動條實現(xiàn)代碼：<divid="imgmarquee"style="OVERFLOW:hidden;WIDTH:850px;align:left;"><divstyle="width:1800px"><!--id="marquePic1"里面的寬度一定要大于id="imgmarquee"的寬度才能看到效果width:600px;>WIDTH:580px;大的div寬度要為span的兩倍才可以，不然會換行width:1200pxzdz的作品，流風的作品--><spanid="marquePic1"style="width:900px;"><imgsrc="images/dao/index-1-1.gif"alt="1"/><imgsrc="images/dao/index-1-2.gif"alt="2"/><imgsrc="images/dao/index-1-3.gif"alt="3"/><imgsrc="images/dao/index-1-4.gif"alt="4"/><imgsrc="images/dao/index-1-5.gif"alt="5"/></span><spanid="marquePic2"style="width:600px;"></span></div></div><scripttype="text/javascript">varimgmarquee=document.getElementById('imgmarquee');varmarquePic2=document.getElementById('marquePic2');varmarquePic1=document.getElementById('marquePic1');varspeed=10;//控制移動的速度,數(shù)越大越慢marquePic2.innerHTML=marquePic1.innerHTML;//把marquePic1的內(nèi)容復制到marquePic2里面functionMarquee(){if(imgmarquee.scrollLeft>=marquePic1.scrollWidth){imgmarquee.scrollLeft=0;}else{//demo.scrollLeft++;imgmarquee.scrollLeft++;}}varmarqueetemp=setInterval(Marquee,speed);imgmarquee.onmouseover=function(){clearInterval(marqueetemp)}//鼠標移到上面停止并清除計數(shù)imgmarquee.onmouseout=function(){marqueetemp=setInterval(Marquee,speed)}//鼠標離開重新計數(shù)</script>4.6.3投票系統(tǒng)投票系統(tǒng)數(shù)據(jù)庫表，如表4.1：表4.1數(shù)據(jù)庫表字段名稱數(shù)據(jù)類型說明ID自動編號編號Title備注標題select1文本xxx的種類answer1數(shù)字投票的人數(shù)Select2文本xxx的種類Answer2數(shù)字投票的人數(shù)Select3文本xxx的種類Answer3數(shù)字投票的人數(shù)Select4文本xxx的種類Answer4數(shù)字投票的人數(shù)Select5文本xxx的種類Answer5數(shù)字投票的人數(shù)DateAndTime日期/時間添加的時間IsChecked數(shù)字判斷是對還是錯投票設計圖，如圖4-1……圖4-1投票實現(xiàn)代碼：<% setrs=conn.execute("SELECT*fromvotewhereIsChecked=1") ifrs.eofthen response.Write"暫無投票" else%><%=rs("Title")%><%fori=1to5 ifrs("Select"&i)<>""then%><%=rs("Select"&i)%><% endifnext%>投票結(jié)果，如圖4-12……圖4-12投票結(jié)果<%dimoptions,total,sql,i,answer,actionsetrs=server.createobject("adodb.recordset")sql="select*fromvote"rs.opensql,conn,3,3ifrequest.QueryString("stype")=""then ifRequest.ServerVariables("REMOTE_ADDR")=request.cookies("IPAddress")then response.write"<SCRIPTlanguage=JavaScript>alert('感謝您的支持，您已經(jīng)投過票了，謝謝！');" response.write"javascript:window.close();</SCRIPT>" else options=request.form("options") response.cookies("IPAddress")=Request.ServerVariables("REMOTE_ADDR") conn.execute("UPDATEvotesetanswer"&options&"=answer"&options&"+1whereIsChecked=1") endifendif%><%total=0setrs=server.createobject("adodb.recordset")sql="select*fromvotewhereIsChecked=1"rs.opensql,conn,3,3%>fori=1to5 ifrs("Select"&i)<>""then total=total+rs("answer"&i) endifnext%><%fori=1to5 ifrs("Select"&i)<>""then iftotal=0then answer=0 else answer=(rs("answer"&i)/total)*100 endif%><%=rs("select"&i)%><%=round(answer,3)%>共有【<%=total%>】人參加投票<divalign="center"></div><palign="center">【<ahref="javascript:window.close()">關閉窗口</a>】<%rs.closesetrs=nothingconn.closesetconn=nothing%>5網(wǎng)站測試網(wǎng)站做好后，接下來的工作就