寵物網(wǎng)站設計案例

寵物之家網(wǎng)站研究論文PAGE34-07級電子商務2班03307204潘夢菲論文摘要序：寵物之家網(wǎng)站，是我們小組的網(wǎng)站名稱，顧名思義，我們所做的網(wǎng)站是跟寵物有關的。我們希望可以利用自己所學的知識，將我們的網(wǎng)站做的很好。我們組共有八名同學，作為小組長的我將我們的網(wǎng)站分為了八個模塊。每個人負責其中的一個模塊，最后由我在將首頁做好。在此，我將主要介紹首頁和我負責的寵物商店的設計過程。對論文主要內(nèi)容的概括本論文主要介紹寵物之家網(wǎng)站的構建過程以及實現(xiàn)情況。包括動態(tài)頁面和靜態(tài)頁面的設置，各種功能的實現(xiàn)。從設計到實現(xiàn)的階段都有具體的體現(xiàn)。重點介紹寵物商店的構建情況。關鍵字：寵物之家寵物商店動態(tài)網(wǎng)頁注冊登錄模塊在線投票模塊搜索引擎模塊留言版模塊目錄摘要 1目錄 2第一章 緒論 31.1研究目的與意義 31.1.1研究目的 31.1.2選題背景 31.1.3研究意義 41.2基本理論 41.3文獻綜述 6第二章 寵物之家網(wǎng)站設計策劃 82.1設計討論 82.2網(wǎng)站的主題 92.3實現(xiàn)的功能 92.4頁面風格 92.5推廣自己的網(wǎng)站 11第三章寵物之家網(wǎng)站設計實現(xiàn) 133.1網(wǎng)站建設網(wǎng)頁設計的流程和具體實現(xiàn) 133.2介紹整個網(wǎng)站的頁面效果、功能實現(xiàn) 133.3動態(tài)網(wǎng)頁的交互流程 16第四章 寵物商店功能模塊的實現(xiàn) 184.1寵物商店的模塊設計 184.2動態(tài)網(wǎng)頁的制作 184.2.1注冊登錄以及個人資料修改模塊 194.2.2留言版模塊 224.2.3在線投票以及結果顯示模塊 234.2.4搜索引擎模塊 254.2.5動態(tài)模塊的總結 264.3靜態(tài)網(wǎng)頁制作 264.3.1網(wǎng)頁布局 274.3.2圖片鏈接以及Flash的插入 274.3.3CSS樣式的使用 274.3.3flash圖像查看器的使用 28第五章 寵物之家首頁的實現(xiàn) 295.1對于logo的設計 295.2個性化設置 295.3時間軸的使用 305.4背景圖片的切分 305.5添加背景音樂 30第六章總結 31參考文獻 33緒論1.1研究目的與意義1.1.1研究目的寵物之家網(wǎng)站是我們的小組網(wǎng)頁設計課程的期末考試作業(yè)。作為一個電子商務專業(yè)的學生，我認為學會如何做網(wǎng)站是我們必備的技能。因此，這個網(wǎng)站對于我而言，不僅僅是一個作業(yè)，是我們?yōu)榱藢W會一種技能，也是我們提高自己能力的過程。我們努力完成一個具有多種功能的網(wǎng)站。人貴在有一技之長。研究這個網(wǎng)站的構建情況，有助于我們很好的了解構建一個網(wǎng)頁所需要的整體過程，從一開始的設計到建設到維護階段。每一個階段都需要我們認真地對待，需要我們進行統(tǒng)籌分析并進行實施。我們每個人都需要百分百的投入其中，并進自己的一份力。1.1.2選題背景隨著時代的不斷發(fā)展，我們的腳步已經(jīng)邁入信息社會的大門。計算機技術的發(fā)展，特別是網(wǎng)絡技術的飛速發(fā)展，給文檔的保存和管理提供極大的方便。在這信息化的社會里，人門對信息傳遞服務需求的及時性越來越迫切，要求越來越高。工作和生活中要涉及到大量的信息查詢與修改，信息存儲和共享。在具體制作中，用ASP技術來實現(xiàn)B/S系統(tǒng)，ASP技術與數(shù)據(jù)庫技術結合，用戶在瀏覽器端可以隨意查詢自己需要的標本，而數(shù)據(jù)的后臺操作則由服務器端處理。這樣提高了網(wǎng)頁的互動性，使整個系統(tǒng)能更好的為用戶服務。我們所學的就是以Dreamweaver和ASP相結合作網(wǎng)頁的技術。本網(wǎng)頁是我們根據(jù)小組同學的個人愛好以及當代人的偏好而設計開發(fā)的。界面簡潔、使用方便，內(nèi)容豐富，而重在實現(xiàn)功能，是我們寵物網(wǎng)站的目標。作為初學網(wǎng)站設計的學生，我們對于如何構建一個網(wǎng)頁還不是很清楚，一切從頭做起。根據(jù)我們小組八個成員的討論，我們本來想做一個有關80后為主題的網(wǎng)站，但是由于這個網(wǎng)站所涉及的內(nèi)容太過廣泛，難度過大，所以最終我們確定以寵物作為我們的主題，在當今時代，越來越多的人將寵物作為生活的一部分，這使得這幾年寵物行業(yè)得到了大力的發(fā)展。網(wǎng)絡上也出現(xiàn)了很多與寵物有關的網(wǎng)站。我們小組也以寵物為主題，設計并實現(xiàn)功能。我們的網(wǎng)站由寵物社區(qū)，寵物照片，寵物視頻，寵物趣事，寵物博客，寵物游戲，寵物百科，寵物商店八個模塊構成。網(wǎng)絡是信息傳播工具，從它登場那一天起就是一種新型的信息傳播工具,它和任何工具一樣供人利用,來為人類服務。我們做為新時代的大學生，尤其是電子商務專業(yè)的學生，更要努力的掌握我們所學的知識，學以致用。無論我們寵物之家網(wǎng)站最后做的是好是壞，它都是我們這一個多月的努力成果。我們希望可以通過自己的努力而獲得成功，當然我們的網(wǎng)站有非常多的不足之處，功能也很簡陋，但是仍然希望老師和同學們可以認可。1.1.3研究意義本論文旨在對于我們寵物之家網(wǎng)站的一個總結和概括，是為了將我們網(wǎng)站的構建過程完整的呈現(xiàn)給大家。便于我們及時糾正和改正在制作網(wǎng)站中的錯誤。同時，加強同學之間的交流。開拓我們的思維，培養(yǎng)我們的創(chuàng)新精神，提高我們的團隊意識，增強我們的實踐能力。也是我們個人對我們寵物之家網(wǎng)站的一個小結。1.2基本理論Dreamweaver是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。它有一個很好聽的中文名字，叫做“織夢者”。它的出現(xiàn)以及不斷的推陳出新，取代了當時網(wǎng)頁制作的龍頭老大Frontpage。我們所學習的網(wǎng)站設計與制作就是建立在Dreamweaver的基礎之上的，同時結合ASP構建動態(tài)網(wǎng)頁，利用Photoshop和Flash作為輔助。下面介紹在寵物之家網(wǎng)頁建設中所使用到得理論基礎和概念。界面是一種由色彩、文字、圖象、符號等視覺元素以及多媒體元素為主構成的，傳達特定信息的，以方便人機交流為目的的中間媒體。網(wǎng)頁界面的構成要素由文字，圖形，頁面版式，色彩，多媒體，技術等構成。界面就是網(wǎng)站給瀏覽者的第一印象，往往決定著網(wǎng)站的可看性，在確定網(wǎng)站的界面時要注意欄目與板塊編排，構建一個網(wǎng)站就好比寫一篇論文，首先要列出題綱，才能主題明確、層次清晰。網(wǎng)站建設初學者，最容易犯的錯誤就是：確定題材后立刻開始制作，沒有進行合理規(guī)劃。從而導致網(wǎng)站結構不清晰，目錄龐雜混亂，板塊編排混亂等。結果不但瀏覽者看得糊里糊涂，制作者自己在擴充和維護網(wǎng)站也相當困難。所以，我們在動手制作網(wǎng)頁前，一定要考慮好欄目和板塊的編排問題。網(wǎng)站的題材確定后，就要將收集到的資料內(nèi)容作一個合理的編排。比如，將一些最吸引人的內(nèi)容放在最突出的位置或者在版面分布上占優(yōu)勢地位。欄目的實質是一個網(wǎng)站的大綱索引，索引應該將網(wǎng)站的主體明確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。在欄目編排時需要注意的是：盡可能刪除那些與主題無關的欄目；盡可能將網(wǎng)站內(nèi)最有價值的內(nèi)容列在欄目上；盡可能從訪問者角度來編排欄目以方便訪問者的瀏覽和查詢；輔助內(nèi)容，如站點簡介、版權信息、個人信息等大可不必放在主欄目里，以免沖淡主題。而文字部分包括標題、文字信息、文字鏈接；圖形包括標題背景、主圖、鏈接按鈕；多媒體包括視頻，音頻，動畫；技術包括瀏覽器，傳輸速度，屏幕分辨率、顏色顯示。網(wǎng)頁界面的特征主要是主體的經(jīng)濟性，手段的先進性，對象的廣泛性，內(nèi)容的豐富性，形式的多樣性，操作的交互性。設計以功能為主，主要體現(xiàn)在信息傳遞功能和審美功能。形象明確，易于接受，形式簡潔，因此需要加強網(wǎng)頁界面的視覺沖擊力，迅速傳遞信息的要求，也是形式美的要求。信息傳播是網(wǎng)頁界面設計的首要因素。網(wǎng)頁界面的信息傳播功能主要體現(xiàn)在三個方面，科學技術作為生產(chǎn)力組成員要素的作用日益明顯的表現(xiàn)出來。社會文化的發(fā)展飛速進行，由此帶來的社會變化比以往任何時候都更加顯著。網(wǎng)絡使人們跨越心理屏障和社會階層差異進行溝通的有效工具。網(wǎng)頁界面的主要形式主要有信息查詢類，大眾媒體類，宣傳窗口類，電子商務類，交流平臺類，網(wǎng)絡社區(qū)類。電子商務網(wǎng)站建設是互聯(lián)網(wǎng)發(fā)展的一個增長點，我們建立網(wǎng)站的目的是為了充分利用網(wǎng)絡資源，開展電子商務與客戶互動來往，建立企業(yè)形象，主動搶占先機，做網(wǎng)上廣告。下面主要介紹寵物商店以及首頁所用的理論基礎：關于背景，由于很多我們下載的圖片都是很小的圖，或者分辨率很低。這樣就會導致在我們的頁面上會顯示很不協(xié)調(diào)的背景。用Photoshop進行調(diào)整，但是仍然會比較詭異。另外在表格布局中，想將一張照片插入到不同單元中，就需要進行切分。因此必要的Photoshop技術是我們需要的。關于色調(diào)搭配，作為一個寵物主題網(wǎng)站，我們盡量運用鮮艷的顏色。網(wǎng)站首頁顏色是紅色。在顏色變化方面，盡量以暖色調(diào)為主，背景以冷色調(diào)為主，營造一種反差，可以突出所要表現(xiàn)的內(nèi)容。并且我們的網(wǎng)站有諸多的版塊，但是我們不僅要把版塊內(nèi)容放在導航欄上，更要讓登陸我們網(wǎng)站的人一眼就能看到自己感興趣的內(nèi)容在哪里。所以我們主頁大部分的空間是對版塊的重新排版，讓最新的最好玩的信息集中體現(xiàn)到首頁上，這樣不僅能吸引更多的寵物迷，還能讓網(wǎng)站看起來生動活潑。另外各種分頁面我們沒有采用統(tǒng)一的色彩搭配要求，希望每個組員都可以自由發(fā)揮。關于布局，在寵物商店中，主要是采用表格布局。關于圖片和圖表的設計，需要相關Flash的制作。1.3文獻綜述本網(wǎng)頁共涉及到的知識以及內(nèi)容是以我們的教材《電子商務網(wǎng)頁設計與網(wǎng)站建設》為主。此書結構安排合理、語言通俗易懂、內(nèi)容圖文并茂，以培養(yǎng)思維能力為主，精選了大量有針對性的實例，并將要求掌握的知識點融入到實例中，力求讓讀者通過親自動手操作達到掌握所學知識、培養(yǎng)動手能力的目的，真正做到授之以漁和授之以魚兼得。共分十六章，具體內(nèi)容如下：1電子商務網(wǎng)頁界面設計和網(wǎng)站建設的理論基礎2網(wǎng)頁的基礎知識3構建靜態(tài)HTML頁面4構建動態(tài)HTML頁面5構建交互式頁面6ASP的應用7用ASP設計主頁模塊8電子商務網(wǎng)站規(guī)劃9電子商務網(wǎng)站建設中的軟件工程方法10電子商務網(wǎng)站的系統(tǒng)設計11電子商務網(wǎng)站網(wǎng)絡數(shù)據(jù)庫12電子商務網(wǎng)站核心功能的實現(xiàn)13電子商務網(wǎng)站的推廣及管理與維護14電子商務網(wǎng)站的安全管理寵物之家網(wǎng)站設計策劃2.1設計討論我們根據(jù)時間的分布進行了分工，時間分布表如下：計劃階段 項目立項 1 可行性研究 2 需求分析 12 總體設計 10 詳細設計 22設計階段 網(wǎng)頁制作 5 腳本程序編制 6 應用程序編制 12測試與完善階段 系統(tǒng)測試 18 發(fā)布試運行 2 系統(tǒng)維護 10構建網(wǎng)站，我們要做的是確定網(wǎng)站主題，確定網(wǎng)站界面，進行形象設計，確定網(wǎng)站風格，有創(chuàng)意的內(nèi)容選擇網(wǎng)站的設計可以從以下幾點出發(fā)：設計網(wǎng)站標志(LOGO)，設計網(wǎng)站色彩，設計網(wǎng)站字體，設計網(wǎng)站宣傳語。根據(jù)我們小組的實際情況，我們每個人分管一個模塊。由于我們小組的人員對于網(wǎng)站設計都不是很在行，缺乏對于整體設計和統(tǒng)一的策劃。因此一人分管自己的一個模塊，最后統(tǒng)一在首頁上。我們的分工情況是我和陳浩博負責首頁的設置，嚴揚負責寵物博客，張曉負責寵物社區(qū)，蔣靚媛負責寵物趣事，我負責寵物商店，陳浩博負責寵物視屏，侯臻負責寵物照片，張臻崢負責寵物游戲，周旭負責寵物百科。我們的目標是，網(wǎng)站重在實現(xiàn)功能，務必將每個功能實現(xiàn)，以此來彌補我們在排版和色彩美化上的差距。我們的要求是，每位同學都必須自己做網(wǎng)頁，不可以下載模板，我們是為了學會自己動手做一個網(wǎng)站的全過程，我們力爭所學的網(wǎng)頁設計每個知識點都涉及到?；蛟S利用網(wǎng)上現(xiàn)成的模板會很省事，也會很漂亮，但是就會增加我們的懶惰心理。也許我們的網(wǎng)站會很平凡，但是是我們每個人辛勤的勞動成果。作為組長的我，為每個組員做了一個小的Flash頭像，放在每個同學的頁面上。2.2網(wǎng)站的主題我們寵物之家網(wǎng)站的主題，顧名思義，以寵物為主題。設計到寵物的方方面面，從寵物的習性到收養(yǎng)注意事項，從寵物美容到寵物商店。是為熱愛寵物的朋友們提供了一個平臺，可以是大家在我們的網(wǎng)站中進行交流。2.3實現(xiàn)的功能進入首頁后，會有背景音樂，顯示時間軸，圖片以及flash的顯示等等。在寵物社區(qū)里，可以看到最新更新的文章，以及發(fā)表文章，相當于一個論壇。在寵物圖片里，主要是以大量圖片為主，穿插著超鏈接。寵物商店中，主要是顯示注冊登錄系統(tǒng)，留言版系統(tǒng)，在線投票及結果顯示系統(tǒng)，搜索引擎的制作，并以簡明的圖案呈現(xiàn)網(wǎng)上商城的狀況。寵物游戲則是以flash為主，利用flash顯現(xiàn)一些功能，使頁面立體化。寵物百科是對寵物文章進行分類整理，寵物博客是顯示愛寵達人的養(yǎng)寵物的經(jīng)驗，寵物趣事的功能是使用CSS樣式表，錨點的利用等等。2.4頁面風格我們小組在頁面風格上沒有做統(tǒng)一的規(guī)定和要求，主要強調(diào)的是簡潔，清爽。首頁以天藍色做作為背景，填充的色彩以紅色為主，對比性很強。它保持了簡單性，各分網(wǎng)頁力求以暖色調(diào)為主，背景圖片使用Photoshop進行切分后拼接使用。適當?shù)氖褂妙伾珴u變的技巧，全譜色彩漸變完美地吸引了注意?？傊η蠛啙嵉?，以我的寵物商店為例，以白色為底，漸變的藍色做為標題，使得整個頁面給人清爽和舒心的感覺。色彩的鮮明性，獨特性，藝術性，合適性，聯(lián)想性，色彩搭配的合理性都是我們要考慮的內(nèi)容。網(wǎng)頁風格的三個基本要素，顏色、線條和形狀、版式。我們要協(xié)調(diào)運用顏色，不同的色彩影響著人們對網(wǎng)站的第一感覺，紅色系象征著激烈、興奮，寵物能給我們帶來歡樂和幸福，所以我們網(wǎng)站的主色調(diào)是紅色。一個網(wǎng)站不可能單一運用一種顏色，這會讓人感覺單調(diào)，乏味；但是也不可能把所有顏色運用到網(wǎng)站中，給人感覺輕浮、花哨。一個網(wǎng)站必須有一種或兩種主題色。我們的網(wǎng)站就是兩種主題色，分別是紅色和藍色。這樣既不會讓用戶迷失方向，也不至于單調(diào)、乏味。所以確定網(wǎng)站主題色是我們必須慎重考慮的問題之一。首頁以紅色為主，寵物商店則是以藍色為主。通常情況下，一個頁面內(nèi)盡量不要使用超過4種色彩，太多的色彩容易讓人感覺沒有方向、沒有側重。當主題色確定好以后，考慮其他配色時，一定要考慮其他配色與主題色的關系，要體現(xiàn)什么樣的效果；另外還要考慮哪種因素可能占主要地位，是明度、純度還是色相。我們網(wǎng)站以藍色或者黑色作為背景，有的文字鏈接采用暖色系，這樣一冷一暖的搭配可以更好的突出所表現(xiàn)的內(nèi)容，從而達到很好的效果。適當選擇線條和形狀，文字、標題、圖片等的組合，會在頁面上形成各種各樣的線條和形狀。這些線條與形狀的組合，構成了主頁的總體藝術效果。必須注意藝術地搭配好這些線條和形狀，才能增強頁面的藝術魅力。一般網(wǎng)站有以下三種線條和形狀的使用方法：直線（矩形）的應用。直線條的藝術效果是流暢、挺拔、規(guī)矩、整齊的，也就是所謂的有輪有廓。直線和矩形在頁面上的重復組合可以呈現(xiàn)井井有條、涇渭分明的視覺效果。一般應用于比較莊重、嚴肅的主頁題材。曲線（弧形）的應用。曲線的效果是流動、活躍，具有動感的，曲線和弧形在頁面上的重復組合可以呈現(xiàn)流暢、輕快、富有活力的視覺效果。一般應用于青春、活潑的主頁題材。曲、直線（矩形、弧形）的綜合應用。把以上兩種線條和形狀結合起來運用，可以大大豐富主頁的表現(xiàn)力，使頁面呈現(xiàn)更加豐富多彩的藝術效果。這種形式的主頁，適應的范圍更大，各種主題的主頁都可以應用。但是，在頁面的編排處理上，難度也會相應大一些，處理得不好會產(chǎn)生凌亂的效果。最簡單的途徑是，在一個頁面上以一種線條（形狀）為主，只在局部的范圍內(nèi)適當用一些其他線條（形狀）。由于我們的技術條件有限，我們本想采用曲、直線綜合應用的版面形狀，可惜我們工作只能在dreamweaver上進行，在這款軟件上還沒有發(fā)現(xiàn)類似功能，所以為了節(jié)約時間，我們就采用直線線條的版面形狀。均衡的分割板式，在網(wǎng)頁設計中，頁面因為內(nèi)容元素的需要被分割成很多區(qū)塊，區(qū)塊之間的均衡就是版式設計上需要著重考慮的問題。均衡并非簡單理性的等量不等形的計算，一幅好的、均衡的網(wǎng)頁版面設計，是布局、重心、對比等多種形式原理創(chuàng)造性全面應用的結果，是對設計師的藝術修養(yǎng)、藝術感受力的一種檢驗。在面積對比強烈(不等形)而又均衡(等量)的設計中，我們可以看到對比法則的成功參與；而在一些對比不十分強烈、典雅的不對稱設計中，我們則可感受到設計者的別具用心。需要注意的是，傳統(tǒng)網(wǎng)頁設計的版式控制都是在不超越大眾顯示器分辨率寬度的前提下，依照內(nèi)容多少縱向延展設計。而如今流行的產(chǎn)品型網(wǎng)站，更傾向于在一屏內(nèi)表達最主要的東西，尤其是首頁，盡量不出現(xiàn)滾動條。而在分頁面中，像是寵物美容，則出現(xiàn)大量滾動條來顯示信息。另外適當美化，去除冗余，在必要的元素都設計完成之后，回顧整個頁面，根據(jù)整站的風格需要，也許你會覺得設計得過于復雜了，或者是設計得不夠完美，不能突出想要的風格。這個時候就需要適當調(diào)整對頁面的美化控制。簡潔的往往是美的，而美的東西不一定簡潔。尤其在網(wǎng)頁設計上，對于內(nèi)容很多的門戶網(wǎng)站，任何多余的修飾都會加重瀏覽者眼睛的負擔，所以可以看到門戶的設計往往特別簡單；而某些專業(yè)型網(wǎng)站，就首頁來說確實沒有什么東西可以展示，那么則需要刻意增加一些點綴而不顯得特別空洞。當然，這也不是定理，針對行業(yè)不同或者突發(fā)性事件，適當?shù)貙υO計進行調(diào)整也能夠起到很好的效果。2.5推廣自己的網(wǎng)站想特別說明一下網(wǎng)站的推廣情況，與剛學的市場營銷是緊密聯(lián)系的。網(wǎng)站的營銷推廣在個人網(wǎng)站的運行中也占著重要的地位，在推廣個人網(wǎng)站之前，請確保已經(jīng)做好了以下內(nèi)容：網(wǎng)站信息內(nèi)容豐富、準確、及時；網(wǎng)站技術具有一定專業(yè)水準，網(wǎng)站的交互性能良好。一般來說，網(wǎng)站的推廣有以下幾種方式：1.搜索引擎注冊與搜索目錄登錄技巧注冊著名的搜索引擎站點是在技術上推廣網(wǎng)站的第一步。注冊搜索引擎有一定的技巧，像AltaVista、搜索客這樣的搜索引擎，它自動收錄提交的網(wǎng)址。另外，注意Meta的使用，不要提交分欄Frame頁面，大部分搜索引擎不識別Frame，所以一定要提交有內(nèi)容的Main頁面。而像Yahoo、搜狐等搜索目錄網(wǎng)站采用手工方式收錄網(wǎng)址，以保證收錄網(wǎng)站的質量，在分類查詢時獲得的信息相關性比搜索引擎站點（靠Spider自動搜索的）更強。由于搜索目錄網(wǎng)站收錄網(wǎng)站的人為因素相對較多，因此在提交網(wǎng)站時要注意遵守規(guī)則。如Yahoo要求注冊站點描述不超過25個單詞。在此要注意：將網(wǎng)址提交到最合適的目錄下面，要認真詳細的介紹網(wǎng)站，千萬不要有虛假、夸張的成分。2.廣告交換技巧很多個人站點在相互廣告交換時都提出了幾個條件：第一，訪問量相當；第二，首頁交換。顯而易見，這種做法是為了充分利用廣告交換。以很多個人網(wǎng)站的經(jīng)驗，當與一個個人站點交換鏈接時，對方把網(wǎng)站的LOGO放到了友情連接一頁，而不是首頁時，很少有訪客會來自那里。通常在首頁，廣告交換才會有很好的效果。3.目標電子郵件推廣使用電子郵件宣傳網(wǎng)址時，主要有如下技巧：可以使用免費郵件列表來進行，只要你申請了免費郵件列表服務，你就可以利用郵件列表來推廣你的網(wǎng)站；可以通過收集的特定郵件地址，來發(fā)送信息到特定的網(wǎng)絡群體，在特定網(wǎng)絡群體中推廣自己的網(wǎng)站；發(fā)送HTML格式的郵件，即使其內(nèi)容與接收者關系不大，也不會被被當作垃圾信件馬上刪掉，人們至少會留意一下發(fā)送者的地址。而對于我們的網(wǎng)站，我們在班級內(nèi)部推廣就可以了。第三章寵物之家網(wǎng)站設計實現(xiàn)3.1網(wǎng)站建設網(wǎng)頁設計的流程和具體實現(xiàn)寵物之家網(wǎng)站的具體流程是，通過主頁分別鏈接到分網(wǎng)頁，首頁—寵物社區(qū)—寵物照片—寵物視頻—寵物趣事—寵物百科—寵物游戲—寵物博客—寵物商店。每個頁面都有自己的特點和功能。具體實現(xiàn)將在后面的章節(jié)體現(xiàn)。3.2介紹整個網(wǎng)站的頁面效果、功能實現(xiàn)我們網(wǎng)站的預覽效果如下：（以部分為例）首頁首頁為靜態(tài)網(wǎng)頁，網(wǎng)站的形象代表著品牌形象，人們在網(wǎng)上了解寵物的主要方式就是訪問寵物相關的網(wǎng)站，網(wǎng)站形象代表了一個網(wǎng)站的制作水平，設計理念，內(nèi)容豐富度等多個方面。實現(xiàn)鏈接為主要功能，擁有大量圖片和文字，主要為給用戶視覺上的效果。寵物社區(qū)寵物博客社區(qū)和博客的是實現(xiàn)交互式頁面的功能?？梢赃_到增進顧客關系，吸引顧客參與的目的，不僅為熱愛寵物的朋友提供一個交流的平臺，同時也有助于緊密聯(lián)系網(wǎng)站管理者和用戶之間的關系。寵物趣事通過訪問寵物趣事頁面，可以讓用戶對寵物的用品和美容有一個更深入地了解，靈活地向用戶展示寵物說明及圖片。內(nèi)容及其豐富的一個頁面。寵物視頻制作寵物視頻網(wǎng)頁過程其實很簡單，里面多運用一項插入FLASH視頻的技術。但總體上來說，是屬于靜態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁最大的不同之處是，靜態(tài)網(wǎng)頁的更新需要網(wǎng)站的管理人員每天親自的進行更新，而動態(tài)網(wǎng)頁的特點就是，使用網(wǎng)站的每個用戶都可以成為網(wǎng)站的管理員，上傳的帖子，上傳的圖片，上傳的視頻都是網(wǎng)站更新內(nèi)容的一部分。寵物照片要做一個含有大量圖片的分網(wǎng)頁，最重要的就是對圖片的大小進行優(yōu)化，因為如果要是以默認格式直接黏貼圖片上去的話，文件大小就會特別的大，如果上傳到服務器的話就會嚴重影響打開圖片的速度，所以用PHOTOSHOP軟件把每張圖片進行優(yōu)化并保存為WEB格式，也就是說，在寵物照片網(wǎng)頁里，每張照片可以單獨作為一個網(wǎng)頁打開放大觀察，滿足不同用戶的需求。寵物商店以動態(tài)模塊為主，完善顧客服務，為顧客提供各種服務和幫助信息，在網(wǎng)站上發(fā)布在線調(diào)查表或問卷，可以獲得客戶的反饋信息，通過這種信息的反饋有助于我們更好的改進服務，是獲得第一手市場資料的有效調(diào)查工具。搜索引擎模塊為大家提供了很好的服務。寵物百科以Flash為主構建的頁面，很有新意。3.3動態(tài)網(wǎng)頁的交互流程網(wǎng)頁不同于傳統(tǒng)媒體之處，就在于信息的動態(tài)更新和即時交互性。即時的交互性是Web成為熱點的主要原因，也是網(wǎng)頁設計時必須考慮的問題。傳統(tǒng)媒體（如廣播、電視節(jié)目、報刊雜志等）都以線性方式提供信息，即按照信息提供者的感覺、體驗和事先確定的格式來傳播。而在Web環(huán)境下，人們不再是一個傳統(tǒng)媒體方式的被動接受者，而是以一個主動參與者的身份加入到信息的加工處理和發(fā)布之中。這種持續(xù)的交互，使網(wǎng)頁藝術設計不像印刷品設計那樣，發(fā)表之后就意味著設計的結束。網(wǎng)頁設計人員必須根據(jù)網(wǎng)站各個階段的經(jīng)營目標，配合網(wǎng)站不同時期的經(jīng)營策略，以及用戶的反饋信息，經(jīng)常地對網(wǎng)頁進行調(diào)整和修改。為了保持瀏覽者對網(wǎng)站的新鮮感，需要定期或不定期的進行改版，這就需要設計者在保持網(wǎng)站視覺形象一貫性的基礎上，不斷創(chuàng)作出新的網(wǎng)頁設計作品。寵物社區(qū)和寵物商店是兩個動態(tài)的交互頁面，共有5個動態(tài)的功能模塊。關于寵物商店的構建，每個交互頁面都是為了提供與用戶交互的功能。注冊登錄與修改資料是記錄用戶信息，用戶通過注冊，將信息傳遞到數(shù)據(jù)庫當中。登錄時調(diào)用數(shù)據(jù)庫的信息，登錄后顯示用戶信息，用戶可以進行修改，修改后數(shù)據(jù)庫同時更新。留言版是便于用戶進行交流的頁面。在線投票功能是系統(tǒng)人員了解用戶對于網(wǎng)站的評價，通過調(diào)教調(diào)查問卷形式，將信息寫入數(shù)據(jù)庫，并將結果直接顯示在另一個頁面。搜索引擎功能是為了方便用戶查找到相關的信息，輸入相關信息，傳遞到數(shù)據(jù)庫中，顯示符合條件的信息。

寵物商店功能模塊的實現(xiàn)我負責的部分是寵物商店的模塊，通過對網(wǎng)絡上很多網(wǎng)站的考察以及和同學們的討論，我負責的寵物商店功能主要是以實現(xiàn)寵物商店模塊的注冊登錄修改個人資料功能，實現(xiàn)在線投票以及投票結果顯示功能，留言版的功能實現(xiàn)，搜索引擎功能的實現(xiàn)。另外，還有的主要就是對于靜態(tài)網(wǎng)頁的一些基本功能的實現(xiàn)，圖像和文字的鏈接，表格和框架布局網(wǎng)頁，對于背景圖片用Photoshop進行拆分后使用，用Flash做小的圖標等。4.1寵物商店的模塊設計作為寵物之家的重要組成部分，在設計階段，首先在色調(diào)上保持與首頁一致。以藍白為主，給人以簡單明了的感覺。寵物商店共分五個具體分頁面，即寵物商店首頁，貓貓專區(qū)，小寵專區(qū)，雜志區(qū)，紀念品區(qū)。其次首頁采用的表格布局，其他頁面采用的為框架布局，統(tǒng)一布局，條理清晰。在ASP和ACCESS數(shù)據(jù)庫的支持下，寵物商店的注冊登錄模塊，留言版模塊，在線投票以及結果顯示模塊均使用ASP頁面構建。由于寵物商店設計到在線購物系統(tǒng)，較為復雜，因此就沒有具體實現(xiàn)，只是夠建出具體的模塊。商店的美觀主要是對于物品的展示，由于我本人對于美觀設計這一方面較為欠缺，在我的網(wǎng)頁中，僅僅只是重在實現(xiàn)功能，在外觀上會差一些。在寵物商店構建的準備工作中，我看了很多網(wǎng)站，研究了很多書籍，并希望可以在網(wǎng)頁中使用。4.2動態(tài)網(wǎng)頁的制作動態(tài)網(wǎng)頁的目的是實現(xiàn)交互式的功能。準備工作，即在電腦中裝入IIS。我的電腦很奇怪，點開控制面板中選擇添加/刪除程序后在Windows組件里并沒有Internet信息服務一項。在查詢了相關資料后，利用打開C:\Windows\inf文件夾，搜索到sysoc.inf記事本文件，加入代碼iis=iis2.dll,OcEntry,iis2.inf,,7，將IIS的下載解壓到一個系統(tǒng)盤里面，然后進行安裝。然后按照步驟進行安裝，選擇“開始”“程序”里的“管理工具”中“Internet信息服務”命令，在打開的“Internet信息服務”窗口中鼠標右擊“默認網(wǎng)站”，在菜單中選擇“屬性”。在彈出的“默認網(wǎng)站屬性”對話框中設置。網(wǎng)站中“IP地址”選擇“全部未分配”；“TCP端口”通常設置為80，主目錄中“文本路徑”中設置網(wǎng)站虛擬目錄的實際路徑；勾選“讀取”“寫入”選項。選中“啟用默認文檔”，則該選項組中的文件可默認為一個ASP工程中的初試文件；點擊“添加”可在“默認文檔名”中填寫新的文檔名稱。點擊確定，接著配置IIS的虛擬目錄鼠標右擊“默認網(wǎng)站”，在菜單中選擇“新建”“虛擬目錄”命令，打開“虛擬目錄創(chuàng)建向導”，單擊“下一步”，打開“虛擬目錄別名”對話框并在“別名”中輸入虛擬目錄的名稱。點擊“下一步”，在“目錄”中添加文件的物理路徑，點擊“下一步”，打開“訪問權限”對話框，選中“讀取”、“運行腳本”和“寫入”選項。點擊“下一步”，單擊完成，此時在“Internet信息服務”窗口中可以瀏覽創(chuàng)建的虛擬目錄。這個過程很痛苦，試了很多次，不過終于還是安裝好了IIS。然后進行設置，新建虛擬目錄，對文件夾的共享進行設置，添加everyone，并賦予其全部權限。另外安裝ACCESS，在Dreamweaver中進行站點的設置。這一切準備工作做好之后，便開始了我的動態(tài)模塊的制作。4.2.1注冊登錄以及個人資料修改模塊這個模塊式我根據(jù)老師上課所教的注冊登陸模塊進行修改以及增加了個人資料的修改模塊。這樣可以使得我們的注冊登錄系統(tǒng)更加人性化和合理化。注冊登錄系統(tǒng)共包含8個頁面，即注冊頁面，注冊成功頁面，注冊失敗頁面，登錄頁面，登錄成功頁面，登錄失敗頁面，個人資料修改頁面，個人資料修改成功頁面，個人資料修改失敗頁面。首先進行數(shù)據(jù)庫的設計，建立一個用戶注冊信息的數(shù)據(jù)庫注冊時進行數(shù)據(jù)有效性檢驗，通過檢驗后將表單數(shù)據(jù)插入數(shù)據(jù)庫中登陸時讀取數(shù)據(jù)庫信息，在數(shù)據(jù)庫中查找表單提交的用戶名是否存在，用戶名與密碼是否匹配，如果是則返回登陸成功，不是則提示出錯。登錄后進行個人資料的修改，將登錄用戶的個人資料掉出，并進行修改，將修改后的數(shù)據(jù)插入數(shù)據(jù)庫中。首先分析數(shù)據(jù)庫結構，此為注冊用戶登錄頁面的數(shù)據(jù)庫db1:字段類型長度必填字段允許空值備注ID自動編號YN編號，主鍵username文本50YN用戶名，唯一性userpasswd文本50YN用戶密碼question文本50YN密碼提示問題answer文本50YN提示問題答案sex文本50NY性別，非必填age數(shù)字3NY年齡，非必填—根據(jù)此表進行數(shù)據(jù)庫的設計，建立數(shù)據(jù)庫，并保存至指定文件夾。進行數(shù)據(jù)庫的鏈接,使用代碼Driver={MicrosoftAccessDriver(*.mdb)};DBQ=e:\asp\db1.mdb對于注冊頁面，利用Dreamweaver進行表單的設置，添加行為，設置插入記錄，進行用戶名檢察。對于注冊失敗頁面，使用靜態(tài)頁面制作，添加代碼JavaScript:history.go(-1)。另外，綁定階段變量，在綁定頁面板中選擇添加按鈕，并在彈出的菜單中選擇“階段變量”命令，定義階段變量的名稱MM_username，完成綁定階段變量的操作。對于注冊成功頁面,這個頁面中引入階段變量，得到登陸成功的用戶名，另外還要限制對頁的訪問，只有在成功登陸的用戶才可以訪問此頁面。登陸失敗頁面則直接利用超鏈接跳轉。個人資料修改頁面，插入與登陸頁面同樣的表單域，并綁定記錄集，在篩選條件中選擇User=階段變量MM_username。綁定動態(tài)記錄后，進行記錄的更新，在插入欄數(shù)據(jù)中選擇更新記錄，并限制對頁的訪問。個人資料修改成功頁面與退出頁面均使用靜態(tài)頁面。在實現(xiàn)這些功能過后，對于頁面進行適當?shù)拿拦ぃm然這個登陸系統(tǒng)看似很簡單，但是在實際操作的過程中，遇到了很多的麻煩。同樣一個操作，可能要做很多遍，但是總是會報錯。有時侯直接顯示錯誤，不顯示原因，類似像http錯誤等等。不過總之，還是做出來了。4.2.2留言版模塊這個模塊是在寵物商店里，為方便用戶溝通交流而制作的。比較簡單的一個頁面。由兩個頁面構成，一個是用戶留言以及留言顯示頁面，另一個是留言成功的頁面。這個頁面的構思很簡單，就是從首頁點擊我要留言后進入到留言的頁面，上面就會顯示之前已經(jīng)在數(shù)據(jù)庫中留言內(nèi)容，下面則是留言模塊，輸入留言的內(nèi)容，點擊提交，在提交成功后，進入留言成功頁面，點擊返回留言頁面，此時正好刷新數(shù)據(jù)庫中的內(nèi)容，使得留言直接在頁面中顯示出來。比較偷懶的使用了老師所給的數(shù)據(jù)庫設計思路，此為數(shù)據(jù)庫設計表。字段 類型長度必填字段允許空值備注ID自動編號YN主鍵Subject文本255YN留言主題Content備注YN留言內(nèi)容Reply備注NY回復內(nèi)容Data時間/日期YN留言時間ReplyData時間/日期NY回復時間UserIP文本15YN留言IP根據(jù)此表進行數(shù)據(jù)庫的建立，建立記錄集后動態(tài)的綁定記錄集內(nèi)容，設置重復區(qū)域使得每條記錄都可以得以顯示，插入記錄的設置基本都和之前的一致。與之不同的就是對于表單項設置重復區(qū)域。此頁面重視的是色調(diào)的搭配，以深藍做底色，利用一些圖案做裝飾，給人鮮明的視覺效果。4.2.3在線投票以及結果顯示模塊很多的網(wǎng)站都有在線投票的功能，因此，我在寵物商城的網(wǎng)頁中設置了一個商品點評的模塊，通過這個模塊，用戶可以進行投票，屬于在線調(diào)查的一個模式。投票后會直接顯示投票的結果。本系統(tǒng)分為兩個具體顯示頁面，投票調(diào)查信息頁面，調(diào)查結果顯示頁面。包含一個數(shù)據(jù)庫表如下：字段名稱字段類型內(nèi)容說明id自動編號主鍵user文本姓名age數(shù)字年齡lujing數(shù)字知道本網(wǎng)站的路徑fchmyi是/否對本網(wǎng)站非常滿意myi是/否對本網(wǎng)站滿意yiban是/否對本網(wǎng)站一般buhao是/否對本網(wǎng)站感覺不好根據(jù)此表創(chuàng)建數(shù)據(jù)庫。對于投票調(diào)查信息頁面。在該網(wǎng)頁進行勾選后，點擊提交，網(wǎng)頁會將用戶提交的資料全部交給服務器端并插入到調(diào)查表中。插入表單域后，進行表單的相關設置。利用復選框和單選框進行初始設置，并輸入相應的文字，插入記錄的設置。做好的頁面如下圖：制作調(diào)查結果頁面，在插入表單域和表格后，設置對比鮮明的顏色做為單元格背景，用來反應調(diào)查結果。在此頁面上工綁定5個記錄集，RD1是將剛才提交的數(shù)據(jù)綁定到這個頁面上，age,lujing,fchmyi,myi是為了顯示調(diào)查單項調(diào)查結果而設置的。以age為例，在綁定記錄集時選擇高級，添加SQL語句：SELECTcount(age)asageNum,(ageNum/(SELECTcount(user)FROMdch))asmyPercentFROMdchgroupbyageORDERBYage。同理對其他的進行設置。設置動態(tài)記錄集，綁定相關字段，并設置重復區(qū)域。此功能中，應顯示百分比數(shù)據(jù)，但是由于技術有限和版本的限制，無法找到動態(tài)數(shù)據(jù)對話框，因此此功能為完全實現(xiàn)。只能勉強將結果顯示，請老師見諒。圖如下所示：4.2.4搜索引擎模塊在寵物商店中，搜索引擎作為一個重要的組成部分，因為在寵物商店中會涉及到大量的信息內(nèi)容，為方便用戶們及時方面的找到自己所需要的物品，因此設計了高級搜索一覽，即搜索引擎模塊，方面用戶查找自己所需要的信息。應用的依然是統(tǒng)一風格的頁面。數(shù)據(jù)庫設計圖如下：字段名稱字段類型內(nèi)容說明id自動編號主鍵keyword文本關鍵字class文本分類pingpai文本品牌data時間/日期上榜日期way文本所在區(qū)域price貨幣價格除了與前面大致相同的表單添加，動態(tài)文本的設置操作等等，在此模塊中增加了設置條件顯示區(qū)域，并對部分代碼進行了修改。使得一開始的時候，未搜索時不顯示結果，當搜索過后顯示結果。搜索引擎模塊使得整個流程更加順暢和完整化。4.2.5動態(tài)模塊的總結至此，所有的動態(tài)網(wǎng)頁的部分已經(jīng)結束，寵物商店的四個動態(tài)模塊構建已經(jīng)完成，這四個模塊是寵物商店的主要功能部分。貫穿整個寵物商店之中，是動態(tài)交互式的頁面。很多的過程不知道怎么用文字表述，請見諒。4.3靜態(tài)網(wǎng)頁制作寵物商店網(wǎng)頁同時也有大量的靜態(tài)頁面來呈現(xiàn)所銷售的商品，因此會有大量的介紹頁面的呈現(xiàn)。4.3.1網(wǎng)頁布局對于寵物商店的布局，對于首頁以表格布局，四段式，即標題欄（圖標是用photoshop修改過的），中間分三欄，左邊是分類頁面的向導，中間是對于商品的展示，旁邊是圖片顯示。分頁面均以相同表格的形式布局，保持頁面的一致性。同時使得左邊的分類向導隨著頁面的變化而變化。4.3.2圖片鏈接以及Flash的插入“屬性”面板中拖動“鏈接”文本框右邊的“指向文件”按鈕，拖動鼠標時會出現(xiàn)一條帶箭頭的細線，指向鏈接文件后釋放鼠標，即會鏈接到該文件。在插入flash的時候出現(xiàn)過bug,flash按鈕插入后顯示不在一個文件夾下無法使用。很奇怪，后來重新開DW8，重新添加按鈕又成功了，也不知道為什么。由于寵物商店涉及到大量的圖片的文字內(nèi)容，在分網(wǎng)頁中，添加錨點等功能方便用戶使用。4.3.3CSS樣式的使用CascadingStyleSheet（CSS）層疊樣式表（或級聯(lián)樣式表）用于定義文字屬性、文本屬性等網(wǎng)頁中基本信息，是網(wǎng)頁中的字體、大小、顏色等一系列基本信息，不隨著瀏覽器及系統(tǒng)顯示的分辨率等因素的變化而變化，使得網(wǎng)頁具有一定“固定”性。使用“CSS樣式”面板附加樣式表新建CSS樣式，里面含有編輯樣式表、刪除CSS樣式、創(chuàng)建新的CSS樣式三項。在“CSS樣式”面板底部單擊“新建CSS樣式”按鈕，在彈出的“新建CSS規(guī)則”對話框中進行設置，選擇器類型：選擇“標簽”，自定義標簽名稱，選擇“新建樣式表文件”點擊確定，保存新建的樣式表，即可創(chuàng)建CSS樣式表。在對于網(wǎng)頁的文字和標題部分，我大量使用了CSS樣式表，這樣可以使得標題更加美觀和突出。4.3.3flash圖像查看器的使用在媒體中選擇圖像查看器，保存相應的Flash元素，對于flash元素進行修改，編輯IamgeURLs進行修改設置，選擇需要插入的圖片進行保存。寵物之家首頁的實現(xiàn)5.1對于logo的設計首頁需要突出重點，因此圖標和圖片元素顯得十分重要，我在首頁中加入了很多小的元素，并在于此鏈接的小網(wǎng)頁中加入了各種圖片元素，參考了部分網(wǎng)站的內(nèi)容。寵物商店的logo以簡潔突出為主要目的，同時色調(diào)與首頁logo保持一致。以簡潔清晰的搭配進行設計，同時用Photoshop進行修改。5.2個性化設置在一開始的設計的思路中，我的想法是用我們每個人的頭像用Flash做一個小動畫，然后插到每個人的頁面中。我在網(wǎng)上搜集了幾個可愛的gif和flash的圖，然后使用Flash將圖像進行摳圖，將我們自己的頭像換到當中。最后在將拆分的幾個圖重新拼接，做成動態(tài)的小圖。希望可以給我們的網(wǎng)站增加些色彩。5.3時間軸的使用將鼠標經(jīng)過圖像變換與時間軸結合使用，在首頁制作時間軸，使得頁面充滿動態(tài)的感覺。先選中建立APＤＩＶ元素，后將所需圖片插入其中，窗口中選擇時間軸后進行設置，增加關鍵幀等。5.4背景圖片的切分我們的首頁是用表格布局，因此需要對于背景圖片進行切分，充分的利用Photoshop進行切分后對單獨的單元格進行背景的設置，或者偷懶的用QQ截圖進行功能的實現(xiàn)。5.5添加背景音樂利用代碼進行添加，<bgsoundsrc="e:/asp/web/shop/lovesong.mp3"loop=3>，使得音樂在打開頁面時播放，最小化時停止。代碼可以插在body中，也可以在body之外。P．S．這個部分是我跟陳浩博同學一起實現(xiàn)的，我是負責美工以及鏈接和分網(wǎng)頁的制作。布局是由他完成的，后期制作是由我完成的。這里就只重點介紹沒有出現(xiàn)過的功能。第六章總結本小組其實并不是一個非常優(yōu)秀的小組，相反，可能我們組在整個班級中還算比較差的。在一開始的