課程設(shè)計(jì)說明書.doc

陽光夢想設(shè)計(jì)制作與實(shí)現(xiàn)一、 概述隨著知識經(jīng)濟(jì)時代的發(fā)展，基于信息技術(shù)的電子商務(wù)技術(shù)，正在逐步成為現(xiàn)代經(jīng)濟(jì)社會的重要基礎(chǔ)，計(jì)算機(jī)網(wǎng)絡(luò)發(fā)展迅速，信息的發(fā)布突破了時間和地域的限制，電子商務(wù)進(jìn)入人們的日常生活中，網(wǎng)上購物帶給人們的最大便利是縮短了時空距離，消費(fèi)者的購物行為不再受地域的限制，不再受營業(yè)時間的限制，也不用費(fèi)力地貨比三家了解商品價格和質(zhì)量的差異，它無其不有的強(qiáng)大功能，為人們提供了難以言論的方便與快捷，讓你足不出戶也曉天下事。為什么要建立網(wǎng)站？首先，網(wǎng)站是一個廉價但高效的宣傳工具，企業(yè)信息發(fā)布除具有覆蓋面廣，不受時空限制，媒體信息豐富多彩，成本相對較低特點(diǎn)外，與傳統(tǒng)媒體對比最主要的特點(diǎn)具有信息雙向流通的交互功能，企業(yè)通過營銷網(wǎng)站建立客戶網(wǎng)絡(luò)，提供企業(yè)最好的商品信息，以照片、聲音及圖文等多媒體信息形式，面向全球傳遞給客戶最豐富的信息量，開發(fā)潛力無窮的潛在客戶群體，基于網(wǎng)絡(luò)如此多的優(yōu)點(diǎn)及其價值所在，所以制作一個虛構(gòu)的小型網(wǎng)站，在本地磁盤建立個子文件夾。創(chuàng)建個人網(wǎng)站的制作過程中，運(yùn)用了目前Macromedia 公司最流行的網(wǎng)絡(luò)三劍客Dreamweaver MX、Fireworks MX、Flash MX,主要用了目前Dreamweaver MX，因?yàn)镈reamweaver MX的功能完善，使用的便捷上比FrontPage要強(qiáng)些。它囊括了FrontPage的所有基本操作，并開發(fā)了許多獨(dú)具特色的設(shè)計(jì)新概念，諸如行為（Behaviors）、時間線（Time Line）、資源庫（Library）等，還支持層疊式樣式表（CSS）和動態(tài)網(wǎng)頁效果（DHTML）。而動態(tài)HTML是Dreamweaver MX最令人欣賞的功能，是它的最大的特色。有效地利用了這些軟件制作出動靜結(jié)合的網(wǎng)頁，讓顧客在最短的時間內(nèi)找到自己喜歡的香水資料，使其網(wǎng)站信息全面，網(wǎng)頁更為吸引用戶。建議使用Internet Explorer 6.0及以上版本在800*600狀態(tài)下瀏覽。本網(wǎng)站設(shè)計(jì)系統(tǒng)由本人負(fù)責(zé)策劃網(wǎng)站的總框架的設(shè)計(jì)、校驗(yàn)、鏈接、修改和資料的搜集、采編、排版、美術(shù)采樣、網(wǎng)站框架的策劃等，通過充分的準(zhǔn)備、構(gòu)思編排，使該網(wǎng)站做到畫面精美、動靜結(jié)合，使顧客更好地了解本店的各類香水產(chǎn)品。二、 網(wǎng)站的總體規(guī)劃（一）、網(wǎng)站的主題本網(wǎng)站的構(gòu)建主要從顧客的角度入手，以實(shí)用、美觀、新穎為主。其構(gòu)思如下：首先，必須知道自己要做一個什么樣的網(wǎng)站，也就是說要了解自己需要清楚知道該網(wǎng)站的定位，并從顧客的心理角度和市場的發(fā)展趨勢來考慮設(shè)計(jì)整個網(wǎng)站的。（二）、搜集相關(guān)資料確定了網(wǎng)站主題后，就開始搜集相關(guān)的資料，包括文字信息、各種香水的資料，包括網(wǎng)頁制作用的素材和圖片等。（三）、網(wǎng)站架構(gòu)與網(wǎng)頁內(nèi)容主頁主頁新聞資訊休閑地帶共享資源友情鏈接留言板聯(lián)系我們內(nèi)容分類在線調(diào)查將資料采編整理后，接下來就可以把原先的構(gòu)思逐一落實(shí)，首先把網(wǎng)站內(nèi)容進(jìn)行分類，即要分幾個模塊，并畫出相應(yīng)的網(wǎng)站架構(gòu)圖。圖1陽光夢想結(jié)構(gòu)圖（四）、借助各種軟件策劃與編輯網(wǎng)頁利用Fireworks MX對圖片的簡單分割，圖片與文字的修改、排列、背景、顏色的設(shè)定；Dreamweaver MX創(chuàng)建層面網(wǎng)頁，還利用其他軟件來進(jìn)行配合制作圖片、文字、動畫效果等。本網(wǎng)站也采用下載方式收集材料，制作軟件的主要功能有： 導(dǎo)入文件 編排布景主題 網(wǎng)頁中編輯文字 文字與段落編排 條列項(xiàng)目的文字排列整齊 利用表格來編輯網(wǎng)頁的版面 圖片與文字顏色設(shè)定和插入背景音樂 加入圖處與動畫 加入超鏈接三、 網(wǎng)站的風(fēng)格（一）、網(wǎng)站題材的選擇：設(shè)計(jì)一個網(wǎng)站，首先遇到的問題就是網(wǎng)站主題。（二）、網(wǎng)站的命名：網(wǎng)站名稱是網(wǎng)站設(shè)計(jì)的一部分，而且是關(guān)鍵的一個要素。對網(wǎng)站的形象和宣傳推廣也有很大影響。所以這個名稱必須：要有特色及具視角沖擊力。取這名稱是為了對網(wǎng)站的形象和宣傳推廣提供便利。（三）網(wǎng)站的形象風(fēng)格設(shè)計(jì)：這個網(wǎng)站以人為本、以服務(wù)為基礎(chǔ)的概念，使消費(fèi)者能夠享受在網(wǎng)上購物的樂趣。（四）、確定網(wǎng)站的目錄結(jié)構(gòu)與鏈接結(jié)構(gòu)：目錄結(jié)構(gòu)的好壞對瀏覽者來說并沒有什么大感覺，但對于網(wǎng)站本身的上傳維護(hù)、內(nèi)容的擴(kuò)充和移植有著重要的影響。1、所有文件存在相應(yīng)的目錄下；2、根據(jù)欄目建立相應(yīng)的目錄，將同一欄目中的文件存放在相應(yīng)的目錄下，將圖像文件放在欄目中專用的圖像目錄里。3、網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接結(jié)構(gòu)，本網(wǎng)站采用了星狀鏈接結(jié)構(gòu)（一對多），每個頁面相互之間都建立有鏈接；能在各個欄目之間方便跳轉(zhuǎn)，隨時能返回首頁。四、 網(wǎng)頁設(shè)計(jì)的制作過程和關(guān)鍵技術(shù)（一）、主頁是網(wǎng)站的門面，內(nèi)容編排得當(dāng)，頁面設(shè)計(jì)美觀，觀賞性和實(shí)用性并存，在整個頁面構(gòu)建上共包含了主題名稱、圖片、各個區(qū)域的超鏈接按鈕，當(dāng)瀏覽者一進(jìn)入首頁就能馬上感覺到本網(wǎng)頁的幾個組成部分，很容易就能看到自己想看的商品。本主頁“l(fā)ogo”是從網(wǎng)上找來的圖片素材，通過Fireworks MX將一張大圖片進(jìn)行規(guī)劃分割，再加上文字處理及顏色處理而產(chǎn)生的，接下來用表格進(jìn)行網(wǎng)頁布局定位，通過插入表格，定義表格格式及有次序在進(jìn)行頁面布局，通過一些如插入圖片等形式添加網(wǎng)頁元素，為求網(wǎng)站風(fēng)格統(tǒng)一。（二）、網(wǎng)站制作過程中為避免讓顧客瀏覽因各自電腦所設(shè)定的解像度不同會產(chǎn)生一些不同的視覺效果，所以在制作過程中特別設(shè)置了“CSS”樣式使到無論在任何不同像數(shù)的計(jì)算機(jī)下顯示的狀態(tài)都一樣，達(dá)到頁面優(yōu)化的效果。操作步驟：1、選擇“窗口”/CSS樣式命令或者直接單擊文檔窗口右下角微型導(dǎo)航條中的顯示CSS樣式圖標(biāo)，打開CSS樣式面板，如所示。2、單擊CSS樣式面板右下角“+”圖標(biāo)，打開新建CSS樣式對話框，如所示.3、在新建CSS樣式對話框中單擊確定按鈕,保存樣式表,后打開unnamed1的CSS樣式定義對話框,如示.4、在CSS樣式定義對話框設(shè)置網(wǎng)頁中的文本字體、大小風(fēng)格等，如示。5、樣式設(shè)置完成后，對每個網(wǎng)頁進(jìn)行鏈接添加樣式，務(wù)求達(dá)到所見即所得的瀏覽效果。（三）、整個網(wǎng)站使用導(dǎo)航條和工具條來操作，在每一頁同樣的位置上都有相同的導(dǎo)航條，使瀏覽者能夠從每一頁上訪問的任何部分；通過對網(wǎng)頁的設(shè)計(jì)和制作能夠體現(xiàn)網(wǎng)站的主頁所能實(shí)現(xiàn)的基本功能，有各功能的鏈接，如注冊登錄、公司簡介、商品展示、會員說明等。主頁有產(chǎn)品展示，瀏覽者很容易就能看到自己想看的、圖樣及產(chǎn)品型號和單價等。（四）、網(wǎng)站的其它區(qū)域，如公司簡介、注冊登錄、會員說明等。其模板與首頁的風(fēng)格差不多，都是采用主頁“l(fā)ogo”作頁眉。公司簡介中很清晰的網(wǎng)站介紹，告訴訪問者網(wǎng)站提供的一些服務(wù)信息。注冊登錄采用了表單來制作的，主要用來得到用戶的反饋信息、會員注冊、網(wǎng)上調(diào)查、收到訂貨單和建立檢索界面等。會員說明主要是說明會員的協(xié)議條款。（6）網(wǎng)站主頁如下圖所示：圖5陽光夢想主頁圖五、 制作心得通過這次的網(wǎng)站系統(tǒng)創(chuàng)作，使本人感觸頗深。要做一個網(wǎng)站的確不是一件很容易做到的事情，首先是選取材方面，現(xiàn)在社會上的東西應(yīng)有盡有，但想找到一個人們關(guān)注而又喜歡的主題確實(shí)不易，想出網(wǎng)站的主題后，就要開始查找該主題的相關(guān)資料，那絕非一天半天就能完成的事情，還有網(wǎng)站框架、模板與表格的設(shè)計(jì)，顏色的調(diào)配，圖片的修改，在制作過程中要求特別細(xì)致，如框架、表格與圖片大小不一致，就會發(fā)生變形，扭曲。其中，遇到最大的困難是主頁“l(fā)ogo”的處理，“l(fā)ogo”中用藝術(shù)制作了網(wǎng)站的名稱，在制作的過程中藝術(shù)字本身帶有白色的底色，如將導(dǎo)入“l(fā)ogo”圖片內(nèi)就發(fā)生不良的效果，經(jīng)過多方面的探討，利用了Fireworks MX技術(shù)先設(shè)置一個透明的圖片，再把藝術(shù)字復(fù)制粘貼，完成此操作后將圖片放到原“l(fā)ogo”內(nèi)，完在圖片的處理。所以，通過多次修改、測試才能制作一個網(wǎng)站；雖然我做的只是一個較簡單的一個網(wǎng)站，但是卻付出了很多時間和心血。但通過本次制作網(wǎng)站的過程，使我學(xué)會各種設(shè)計(jì)軟件的一些基本操作?；仡櫼幌驴偨Y(jié)經(jīng)驗(yàn)，制作一個網(wǎng)站需要以下幾個階段：擬定網(wǎng)站的總體布局、總體規(guī)劃、網(wǎng)站的風(fēng)格和網(wǎng)站實(shí)際作用與主題，從多方面搜集相關(guān)資料，規(guī)范網(wǎng)站架構(gòu)模塊與網(wǎng)頁的具體內(nèi)容，借助Dreamweaver MX、Fireworks MX等軟件的強(qiáng)大功能來策劃與編輯網(wǎng)頁；并要做到網(wǎng)站與顧客良好的互動性、網(wǎng)站的永續(xù)經(jīng)營?？傊軇?chuàng)造并設(shè)計(jì)出一個既新穎又內(nèi)容豐富的網(wǎng)站，是走向成功的第一步。六、 致謝在這次課程設(shè)計(jì)中，曾遇到過不少問題，如果單靠我個人的努力，很難按時完成課程設(shè)計(jì)，在此，我衷心感謝我的指導(dǎo)老師霍長榮老師