珠寶展示網(wǎng)站前臺設(shè)計與開發(fā)畢業(yè)設(shè)計

1、 設(shè)計論文設(shè)計題目：珠寶展示網(wǎng)站前臺設(shè)計與開發(fā) 學生姓名： 指導教師： 專業(yè)名稱： 所在院系： 摘 要新的世紀，互聯(lián)網(wǎng)進入一個嶄新的階段，信息化的發(fā)展帶動其它產(chǎn)業(yè)的發(fā)展，各行業(yè)都將與進行更深入的融合和滲透?；ヂ?lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。為了適應(yīng)知識經(jīng)濟社會的需要，促進學習與交流。網(wǎng)上交流和協(xié)作的功能比較普遍；技術(shù)管理和資源管理受到重視。隨著互聯(lián)網(wǎng)的普及和發(fā)展，必將有越來越多的企業(yè)及個人在Internet上擁有自己的網(wǎng)站。網(wǎng)站建設(shè)成為企事業(yè)形象宣傳、產(chǎn)品展示推廣、客戶溝通的最新最快捷的橋梁；成為個人展示自我，與世界交流的重要

2、平臺。越來越多的人已開始對互聯(lián)網(wǎng)的認知階段進入到認同和行動階段。Internet上發(fā)布信息主要是通過網(wǎng)站來實現(xiàn)的，獲取信息也是要在Internet“海洋”中按照一定的檢索方式將所需要的信息從網(wǎng)站上下載下來。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。為了更好的協(xié)作，更多的與外界交流新的信息，和人共享信息，特構(gòu)建珠寶網(wǎng)站。新的技術(shù)總是帶來新機遇。企業(yè)迫切需要充分利用網(wǎng)絡(luò)，加速培養(yǎng)自身的學習能力，捕捉市場變化的機遇，積極吸取新知識并制定相應(yīng)的戰(zhàn)略，重組資源，調(diào)整自己的行動。這樣企事業(yè)才能應(yīng)變靈活，不斷提高競爭優(yōu)勢。關(guān)鍵

3、字： Flash； Photoshop；Dream weaver；珠寶展示網(wǎng)站 目錄摘 要I第1章 緒論- 1 -網(wǎng)站建設(shè)概述- 1 -網(wǎng)站需求分析- 1 -系統(tǒng)概述- 1 -1.4 Adobe Dream weaver簡介- 1 -1.5 Flash 簡介- 3 -1.6 Photoshop 簡介- 3 -第2章 總體設(shè)計- 5 -2.1 利用Flash制作動畫- 5 -2.1.1 主頁動畫- 5 -2.1.2 產(chǎn)品中心動畫- 6 -2.1.3 銷售網(wǎng)點動畫- 7 -2.1. 產(chǎn)品特征動畫- 8 -2.1.專題活動動畫- 9 -2.2 利用Photoshop整修圖片- 10 -2.3 實現(xiàn)網(wǎng)

4、頁設(shè)計- 10 -主頁- 12 -品牌介紹- 15 -產(chǎn)品中心- 18 -新聞資訊- 18 -尊貴服務(wù)- 20 -2.3.6珠寶文化- 21 -第3章 結(jié)論- 24 -參考文獻- 25 -致 謝- 26 -指導教師評語- 27 -答辯委員會評語- 27 -圖目錄圖 1主頁動畫效果- 5 -圖 2產(chǎn)品中心動畫效果- 6 -圖 3新品上市效果圖- 6 -圖 4精品系列效果圖- 7 -圖 5豪華定制效果圖- 7 -圖 6銷售網(wǎng)點主界面- 8 -圖 7銷售網(wǎng)點效果圖- 8 -圖 8產(chǎn)特征效果圖- 9 -圖 9專題活動效果圖- 9 -圖 10 PS常用工具- 10 -圖 11主頁- 12 -圖 12品牌

5、介紹- 16 -圖 13產(chǎn)品中心- 18 -圖 14新聞資訊- 18 -圖 15尊貴服務(wù)- 20 -圖 16珠寶文化- 21 -圖 17中秋傳說與金鑲玉兔- 22 -圖 18歐洲珠寶文化歷史之八:現(xiàn)當代時期的首飾文化- 22 -圖 19中國珠寶文化歷史之六:明清時期(下)- 23 -第1章 緒論網(wǎng)站建設(shè)概述此次設(shè)計的題目是做一個珠寶網(wǎng)站展示網(wǎng)站（靜態(tài)），至少要做七個頁面，主要包括網(wǎng)站網(wǎng)站首頁、關(guān)于我們、新聞動態(tài)、產(chǎn)品展示、今日推薦、客戶留言、聯(lián)系我們等多個頁面。網(wǎng)站采用Adobe Dream weaver技術(shù)編寫，過程中也采用了Adobe Photoshop CS3做了一些圖片的整修。網(wǎng)站是企

6、業(yè)向用戶和網(wǎng)民提供信息的一種方式，是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標”，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站則是反映企業(yè)形象和文化的重要窗口。在建站的可行性分析方面，設(shè)計中，我主要針對已經(jīng)確定的需求和目標，研究網(wǎng)站建設(shè)的社會環(huán)境、市場等可行性、技術(shù)可行性，經(jīng)濟可行性以及開發(fā)人員等問題。在IT行業(yè)迅速發(fā)展的今天,企業(yè)網(wǎng)站的建設(shè)已經(jīng)成為一個企業(yè)發(fā)展必不可少的存在。對于創(chuàng)意設(shè)計 來說，我們將建立一個以宣傳為目的的網(wǎng)站類型。將于短期內(nèi)強力打造公司的宣傳力度，讓更多的客戶了解，信任公司。網(wǎng)站的建設(shè)，也是公司對于宣傳方面的長期投資。 企業(yè)品牌形象。對于一個以生產(chǎn)為主的大型企業(yè)

7、而言，企業(yè)的品牌形象至關(guān)重要。 特別是對于互聯(lián)網(wǎng)技術(shù)高度發(fā)展的今天，大多客戶都是通過網(wǎng)絡(luò)來了解企業(yè)產(chǎn)品、企業(yè)形象及企業(yè)實力，因此，企業(yè)網(wǎng)站的形象往往決定了客戶對企業(yè)產(chǎn)品的信心。建立具有國際水準的網(wǎng)站，能夠極大的提升企業(yè)的整體形象。 產(chǎn)品展示。一般其他營銷模式的企業(yè)網(wǎng)站都是注重產(chǎn)品展示來加強企業(yè)的宣傳力度，但是對于創(chuàng)意設(shè)計 來說，沒有其實際物品展示，只有展現(xiàn)其出眾的業(yè)績實例才能讓客戶信服，才能從側(cè)面展現(xiàn)出公司的實力，讓客戶更放心的把業(yè)務(wù)交給公司處理。 公司介紹。具體介紹出公司的發(fā)展史，結(jié)構(gòu)，業(yè)務(wù)流程等等一系列來加大公司的宣傳力度，好讓客戶能全面的了解公司。公司的詳細信息，都將批注在網(wǎng)頁上，好讓顧

8、客方便聯(lián)系。在推銷的同時更要注重企業(yè)的特色推廣和服務(wù)信息等。 內(nèi)部管理優(yōu)化。網(wǎng)站的建設(shè)將會為企業(yè)內(nèi)部的管理帶來一種全新的模式。網(wǎng)站是實現(xiàn)這一模式的平臺。在降低企業(yè)內(nèi)部資源順好、減低成本、加強企業(yè)員工與員工，企業(yè)與員工之間的聯(lián)系和溝通等方面發(fā)揮巨大的作用，最終使企業(yè)的運營和運作打到最大的優(yōu)化。概述在現(xiàn)今的信息共享的時代，網(wǎng)絡(luò)信息化管理工作系統(tǒng)信息量大、數(shù)據(jù)準確、速度快、管理工作全面等特點在現(xiàn)實生活中得到廣泛地應(yīng)用?；ヂ?lián)網(wǎng)商業(yè)的普及應(yīng)用已經(jīng)成網(wǎng)絡(luò)經(jīng)濟的大勢所趨。本章主要介紹網(wǎng)站建設(shè)所必須掌握的基礎(chǔ)知識，以及在制作網(wǎng)面過程所用到一些相關(guān)軟件及相關(guān)知識。1.4 Adobe Dream weaver簡介

9、Adobe Dream weaver是個原本由Macromedia公司所開發(fā)的著名網(wǎng)站開發(fā)工具。它使用所見即所得的接口，亦有HTML編輯的功能。它現(xiàn)在有Mac和Windows系統(tǒng)的版本。隨Macromedia被Adobe收購后，Adobe也開始計劃開發(fā)Linux版本的Dreamweaver了。 Dreamweaver自MX版本開始，使用了Opera的排版引擎 "Presto" 作為網(wǎng)頁預覽。   軟件優(yōu)點 制作效率 Dream weaver可以用最快速的方式將Fireworks，F(xiàn)reeHand，或Photoshop等檔案移至網(wǎng)頁上。使用檢色吸管工具選擇

10、熒幕上的顏色可設(shè)定最接近的網(wǎng)頁安全色。對于選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。Dreamweaver能與您喜愛的設(shè)計工具，如Playback Flash，Shockwave和外掛模組等搭配，不需離開Dreamweaver便可完成，整體運用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動開啟Firework或Photoshop來進行編輯與設(shè)定圖檔的最佳化。 網(wǎng)站管理 使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設(shè)計、更新和重組網(wǎng)頁。改變網(wǎng)頁位置或檔案名稱，Dreamweaver 會自動更新所有連結(jié)。使用支援文字、HTML碼、HTML屬性標簽和一般語法的搜尋及置換功能使得復雜

11、的網(wǎng)站更新變得迅速又簡單。 控制能力 Dreamweaver是唯一提供Roundtrip HTML、視覺化編輯與原始碼編輯同步的設(shè)計工具。它包含HomeSite和BBEdit等主流文字編輯器。幀(frames)和表格的制作速度快的令您無法想像。進階表格編輯功能使您簡單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組，Dreamweaver 支援精準定位，利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進行版面配置。所見即所得 Dreamweaver成功整合動態(tài)式出版視覺編輯及電子商務(wù)功能，提供超強的支援能力給Third-party廠商，包含ASP， Apache，BroadVisio

12、n， Cold Fusion，iCAT， Tango與自行發(fā)展的應(yīng)用軟體。當您正使用Dreamweaver在設(shè)計動態(tài)網(wǎng)頁時，所見即所得的功能，讓您不需要透過瀏覽器就能預覽網(wǎng)頁。夢幻樣版和XML Dreamweaver將內(nèi)容與設(shè)計分開，應(yīng)用于快速網(wǎng)頁更新和團隊合作網(wǎng)頁編輯。建立網(wǎng)頁外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出XML內(nèi)容。 全方位的呈現(xiàn)利用Dreamweaver設(shè)計的網(wǎng)頁，可以全方位的呈現(xiàn)在任何平臺的熱門瀏覽器上。對于cascading style sheets的動態(tài)HTML支援和鼠標換圖效

13、果，聲音和動畫的DHTML效果資料庫可在Netscape和Microsoft瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能，Dreamweaver可以告知您在不同瀏覽器上執(zhí)行的成效如何。當有新的瀏覽器上市時，只要從Dreamweaver的網(wǎng)站在下載它的描述檔，便可得知詳盡的成效報告。1.5 fireworks 簡介Adobe Fireworks可以加速 Web 設(shè)計與開發(fā)，是一款創(chuàng)建與優(yōu)化 Web 圖像和快速構(gòu)建網(wǎng)站與 Web 界面原型的理想工具。Fireworks不僅具備編輯矢量圖形與位圖圖像的靈活性， 還提供了一個預先構(gòu)建資源的公用庫, 并可與 Adobe Photoshop、Adobe Dream

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

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

16、rks (PNG) 文件直接導出至 Flash CS3, 導出時可保持矢量、位圖、動畫和多狀態(tài)不變, 然后在 Flash CS3 中編輯文件。眾所周知，在網(wǎng)頁上的jpg圖片如果過大，會嚴重影響頁面的打開速度，F(xiàn)ireworks提供優(yōu)化圖片的功能，即縮小圖片的KB，而且不影響畫面的質(zhì)量（除非放大了與原圖對比）。由于很多人喜歡用photoshop制作jpg圖片，所以它的容量會很大,最終還是要用Fireworks來處理一下。1.6 Photoshop 簡介  Phtotshop LOGOPhotoshop是Adobe公司旗下最為出名的圖像處理軟件之一，集圖像掃描、編輯修改、圖像制

17、作、廣告創(chuàng)意，圖像輸入與輸出于一體的圖形圖像處理軟件，深受廣大平面設(shè)計人員和電腦美術(shù)愛好者的喜愛。Photoshop是電腦上的圖像處理軟件；對于廣大Photoshop愛好者而言，PS亦用來形容通過Photoshop等圖形處理軟件處理過的圖片，即非原始、非未處理的圖片；多數(shù)人對于PHOTOSHOP的了解僅限于“一個很好的圖像編輯軟件”，并不知道它的諸多應(yīng)用方面，實際上，PHOTOSHOP的應(yīng)用領(lǐng)域很廣泛，在圖像、圖形、文字、視頻、出版各方面都有涉及。從功能上看，該軟件可分為圖像編輯、圖像合成、校色調(diào)色及特效制作部分等。 圖像編輯是圖像處理的基礎(chǔ)，可以對圖像做各種變換如放大、縮小、旋轉(zhuǎn)、傾斜、鏡像

18、、透視等。也可進行復制、去除斑點、修補、修飾圖像的殘損等。這在婚紗攝影、人像處理制作中有非常大的用場，去除人像上不滿意的部分，進行美化加工，得到讓人非常滿意的效果。 圖像合成則是將幾幅圖像通過圖層操作、工具應(yīng)用合成完整的、傳達明確意義的圖像，這是美術(shù)設(shè)計的必經(jīng)之路；該軟件提供的繪圖工具讓外來圖像與創(chuàng)意很好地融合，成為可能使圖像的合成天衣無縫。校色調(diào)色是該軟件中深具威力的功能之一，可方便快捷地對圖像的顏色進行明暗、色偏的調(diào)整和校正，也可在不同顏色進行切換以滿足圖像在不同領(lǐng)域如網(wǎng)頁設(shè)計、印刷、多媒體等方面應(yīng)用。 特效制作在該軟件中主要由濾鏡、通道及工具綜合應(yīng)用完成。包括圖像的特效創(chuàng)意和特效字的制作

19、，如油畫、浮雕、石膏畫、素描等常用的傳統(tǒng)美術(shù)技巧都可藉由該軟件特效完成。而各種特效字的制作更是很多美術(shù)設(shè)計師熱衷于該軟件的研究的原因。第2章 總體設(shè)計將要做的是一個珠寶展示網(wǎng)站，該公司專門銷售珠寶的，因此建設(shè)網(wǎng)站的目的主要有兩個：一是使瀏覽者或潛在的客戶迅速了解公司大部分在售的產(chǎn)品，這就要求網(wǎng)站的文字要簡練，盡量減少大篇幅的文字敘述，珠寶效果圖要精彩，當然網(wǎng)頁的頁面效果也要漂亮，以使瀏覽者或潛在的客戶感覺到公司的產(chǎn)品精美；二是使瀏覽者或潛在的客戶迅速了解公司對購買的一般操作流程，以便能夠與公司方便快捷地進行聯(lián)系和溝通，減少不必要的中間環(huán)節(jié)及由此帶來的麻煩。建立公司網(wǎng)站要有一個清晰的網(wǎng)站布局。比

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

21、頁面包括首頁、關(guān)于我們、產(chǎn)品展示、新聞動態(tài)、客戶留言、聯(lián)系我們等。 首頁設(shè)計有了基于準備之后的網(wǎng)站策劃，就可以開始進行頁面設(shè)計了，頁面設(shè)計主要包括創(chuàng)意、色彩和版式三個方面。創(chuàng)意會使網(wǎng)頁在眾多的競爭對手中脫穎而出；色彩可以使網(wǎng)頁獲得生命的力量；板式則是和用戶溝通的核心，所以這三者缺一不可。一般的網(wǎng)站都需要這樣一些版塊站名稱（logo）、Logo區(qū)，導航區(qū)、新聞區(qū)、產(chǎn)品展示區(qū)、推薦產(chǎn)品區(qū)、最新行情區(qū)和版權(quán)等版塊。這些版塊又可以稱之為模塊。選擇哪些模塊，實現(xiàn)哪些功能是否需要添加其他模塊都是首頁設(shè)計制作時首先需要確定的，下面我們就開始具體的首頁設(shè)計制作工作。.1 結(jié)構(gòu)分析根據(jù)需求可以知道，在頁面上部要

22、有l(wèi)ogo和導航，中間部分的左側(cè)顯示若干個欄目，右側(cè)顯示另幾個欄目，中間則顯示新聞動態(tài)及產(chǎn)品展示，頁面最底端為頁腳區(qū)域，顯示一些版權(quán)信息。很明顯可以用四行兩列的布局方式來安排頁面內(nèi)容。如下圖：.2 風格定位打開一個網(wǎng)站，給用戶留下第一印象的既不是網(wǎng)站豐富的內(nèi)容，也不是網(wǎng)站合理的版面布局，而是網(wǎng)站的色彩。色彩對人的視覺效果非常明顯，一個網(wǎng)站設(shè)計成功與否，在某種程度上取決于設(shè)計者對色彩的運用和搭配。因為網(wǎng)頁設(shè)計屬于一種平面效果設(shè)計，在排除立體圖形、動畫效果之外，在平面圖上，色彩的沖擊力是最強的，它很容易給用戶留下深刻的印象。因此，在設(shè)計網(wǎng)頁時，必須要高度重視色彩的搭配。本網(wǎng)站的搭配主色為：白、銀灰

23、、黑、三種顏色。白色代表純潔、純真、樸素、神圣、明快。銀灰色代表熱情、活潑、熱鬧、溫暖、幸福、吉祥。黑色代表崇高、堅實、嚴肅、剛健、端莊，充分代表了一個企業(yè)應(yīng)有的氣質(zhì)和形象。給客戶留下深刻的印象。.3 首頭設(shè)計網(wǎng)站的頁頭主要分為兩個部分。一是Logo，logo使一張準備好的圖片，直接放置在頭部容器左側(cè)，調(diào)整好位置；二是導航條，網(wǎng)站導航條因為有立體感效果，因此它需要脫離文本流，因此在控制樣式的時候要用定位，相對于文本流的定位。網(wǎng)站的導航欄目可以讓用戶對網(wǎng)站的內(nèi)容及信息一目了然。導航分為：公司首頁、關(guān)于我們、產(chǎn)品展示、新聞動態(tài)、今日推薦、客戶留言、聯(lián)系我們。導航采用的是div布局，然后再用a標簽對

24、其他相關(guān)網(wǎng)頁進行鏈接，設(shè)計和操作上都非常簡單。效果與相關(guān)代碼如下：<div id="pdv_3912" class="pdv_class" style="width:990px;height:34px;top:87px;left:0px; z-index:17"><div id="spdv_3912" class="pdv_top" style="overflow:hidden;width:100%;height:100%"><div class

25、="pdv_border" style="margin: 0px; padding: 0px; height: 34px; border: 0px solid; "><div style="height:25px;margin:1px;display:none;background:;"><div style="float:left;margin-left:12px;line-height:25px;font-weight:bold;color:"></div><di

26、v style="float:right;margin-right:10px;display:none"><a href="#" style="line-height:25px;color:">更多</a></div></div><div style="padding:0px"><link href="images/A.css" rel="stylesheet" type="text/css&q

27、uot;><div id="menumain"><div id="menumain_" class="menumain"><a href="index.htm">公司首頁</a></div><div id="menumain_" class="menumain"><a href="aboutus.htm">關(guān)于我們</a></div><d

28、iv id="menumain_" class="menumain"><a href="products.htm">產(chǎn)品展示</a></div><div id="menumain_" class="menumain"><a href="news.htm">新聞動態(tài)</a></div><div id="menumain_" class="menumain

29、"><a href="recommend.htm">今日推薦</a></div><div id="menumain_" class="menumain"><a href="message.htm">客戶留言</a></div><div id="menumain_" class="menumain"><a href="contact.htm"

30、>聯(lián)系我們</a></div></div></div></div></div></div> 中間內(nèi)容設(shè)計根據(jù) 瀏覽者在閱讀時經(jīng)常采用從上到下，從左到右的習慣，主體內(nèi)容中，將重要促銷內(nèi)容靠左邊放，這樣能更好地吸引瀏覽者的眼球，同時也體現(xiàn)公司的專業(yè)、能力等。中間部分主要包括以下幾個模塊：今日推薦、新聞動態(tài)、促銷產(chǎn)品、產(chǎn)品展示，今日行情，友情鏈接等。頁腳設(shè)計頁腳主要為顯示版權(quán)信息等，為了使四個DIV能居中對齊，在網(wǎng)頁中用了margin:0 auto來實現(xiàn)。2.2 利用Photoshop整修圖片在制作網(wǎng)頁過程中需

31、要對一些圖片（比如一些截圖）做修整，這些都是通過用Photoshop來實現(xiàn)的，經(jīng)過用到的工具有剪裁工具、切片工具、仿制圖章工具、橡皮擦工具等，如下圖：圖 1 PS常用工具 對圖片進行整修后再導入Flash和Dream weaver中使用，使其變得更加美觀。2.3 子頁設(shè)計整個網(wǎng)站主要是利用Dream weaver來完成。其中主要包括7個頁面，分別是：網(wǎng)站首頁、關(guān)于我們、產(chǎn)品展示、新聞動態(tài)、客戶留言、今日推薦、聯(lián)系我們，其連接關(guān)系如下所示：網(wǎng)站首頁網(wǎng)站首頁 關(guān)于我們 產(chǎn)品展示 新聞動態(tài) 今日動態(tài) 客戶留言 聯(lián)系我們品牌介紹 產(chǎn)品中心 新聞資訊 尊貴服務(wù) 銷售網(wǎng)點 珠寶文化 專題活動關(guān)于我們 關(guān)于

32、我們主要簡介公司基本情況，對品牌進行介紹。在Dream weaver里插入相應(yīng)的div布局，進行設(shè)計和調(diào)整，關(guān)于我們子頁效果如下圖：產(chǎn)品展示 在產(chǎn)品展示頁，主要用于顯示公司的產(chǎn)品與產(chǎn)品相關(guān)的參數(shù)，價格等，讓客戶更好的了解產(chǎn)品。該頁應(yīng)用分頁技術(shù)，可以查看到公司所有的產(chǎn)品信息。新聞動態(tài)新聞動態(tài)頁以列表的方式按時間順序列出公司的所有新聞，也使用分頁的方式。今日推薦 今日推薦每天推薦一款最好的產(chǎn)品，其本質(zhì)就是一個單件產(chǎn)品介紹模板?？蛻袅粞钥蛻袅粞灾饕墙o客戶和企業(yè)之類一個溝通的渠道，使客戶信息能反饋給企業(yè)。此頁面其主要代碼如下：<DIV style="PADDING-BOTTOM: 1

33、px; PADDING-TOP: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px"><LINK rel=stylesheet type=text/css href="images/comment.css"> <DIV id=commentForm> <DIV class=formtitlebg><DIV class=formtitle></DIV></DIV><DIV class=formzone><DIV id=notice cl

34、ass=noticediv></DIV><FORM id=commentSend method=post name=commentSend action=""><DIV class=row><DIV class=left></DIV><DIV class=con></DIV></DIV><DIV class=row><DIV class=left>留言標題</DIV><DIV class=con><INPUT class

35、=input style="WIDTH: 680px" value="" name=title> </DIV></DIV><DIV class=row><DIV class=left>留言內(nèi)容</DIV><DIV class=con><TEXTAREA class=textarea style="WIDTH: 680px" rows=16 name=body></TEXTAREA> </DIV></DIV>&l

36、t;DIV class=row><DIV class=left></DIV><DIV class=con></DIV></DIV><DIV class=row><DIV style="PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 5px; PADDING-LEFT: 93px; PADDING-RIGHT: 3px"><INPUT class=submit type=submit value=提交 name=Submit&

37、gt;</DIV></DIV></FORM></DIV></DIV></DIV> 聯(lián)系我們 聯(lián)系我們頁面主要用來列出企業(yè)的聯(lián)系方式其他幾個頁面的設(shè)計方法均與以上頁面的設(shè)計方法相似，此處不再重復說明解釋。第3章 網(wǎng)站的測試編碼完成后，就要對源程序進行測試。軟件測試的目的在于爭取在第一時間發(fā)現(xiàn)程序中的錯誤，以便于及時糾錯，增加軟件可靠性。它在整個系統(tǒng)設(shè)計實施過程中占有相當?shù)姆至?。測試是軟件開發(fā)時期的最后一個階段，也是軟件質(zhì)量保證中至關(guān)重要的一個環(huán)節(jié)。測試的目的是為了盡可能的發(fā)現(xiàn)程序中存在的錯誤，其任務(wù)就是消除網(wǎng)站故障，保證程序

38、的可靠運行，最終把一個高質(zhì)量的網(wǎng)站系統(tǒng)交給用戶使用。一般來說在每個模塊完成之后就要對它作必要的測試，這種測試被稱為單元測試，模塊的測試者也就是編寫者。編碼和單元測試屬于網(wǎng)站生命周期的同一階段。這個階段結(jié)束之后，對網(wǎng)站系統(tǒng)還應(yīng)該進行各種綜合測試，這是網(wǎng)站生命周期的另一個獨立的階段，由專門的測試人員承擔。在網(wǎng)頁中的測試階段主要是對網(wǎng)站進行瀏覽器兼容性測試。在網(wǎng)頁測試的階段我分別安裝了IE8、火狐等瀏覽器，并且進行了逐個測試。在多次實踐中或多或少都遇到了不可調(diào)節(jié)的DIV浮動問題，但是最后還是在老師的指導和書籍查閱后，嵌入表格完成了頁面設(shè)計，使頁面在各個瀏覽器中顯示正常。第4章 后續(xù)工作本網(wǎng)站以前臺靜態(tài)HTML為主，其中關(guān)鍵是描述DIV+CSS在網(wǎng)頁布局中的妙用、巧用。但要真正的去完善一個網(wǎng)站，還需要更多的專業(yè)知識，比如說，數(shù)據(jù)庫、其他后臺相關(guān)語言，網(wǎng)站的安全，網(wǎng)站的發(fā)布，日常維護和更新，等等一系列