第一篇：電子商務(wù)專業(yè)《網(wǎng)頁設(shè)計(jì)與制作》實(shí)訓(xùn)課程設(shè)計(jì)的探索研究

電子商務(wù)專業(yè)《網(wǎng)頁設(shè)計(jì)與制作》實(shí)訓(xùn)課程設(shè)計(jì)的探

索研究

項(xiàng)目來源：沈陽市國家級科技思想庫決策咨詢課題（2013）《沈陽市裝備制造業(yè)升級路徑的比較分析與對策研究――基于技術(shù)創(chuàng)新的視角》（SXK-2013207）（主持人）；遼寧省社會科學(xué)規(guī)劃基金項(xiàng)目（2013）《遼寧由制造大省提升為創(chuàng)造強(qiáng)省的有效途徑研究――基于裝備制造業(yè)升級的視角》（L13BJY036）（主持人）

摘 要：本文針對高職高專電子商務(wù)專業(yè)的需要，結(jié)合實(shí)訓(xùn)課程的特點(diǎn)和作用。探究了《網(wǎng)頁設(shè)計(jì)與制作》實(shí)訓(xùn)課程的設(shè)計(jì)。本文主要從實(shí)訓(xùn)環(huán)境、實(shí)訓(xùn)內(nèi)容和實(shí)訓(xùn)成績評定等三方面進(jìn)行了研究和論述。旨在全面提高學(xué)生的實(shí)踐技能，培養(yǎng)學(xué)生解決實(shí)際問題的能力，從而達(dá)到學(xué)以致用的目的。

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)與制作；實(shí)訓(xùn)；電子商務(wù)

高職高專電子商務(wù)專業(yè)培養(yǎng)能夠從事網(wǎng)絡(luò)營銷、客戶服務(wù)、電子倉儲物流、商務(wù)網(wǎng)站編輯與維護(hù)等相關(guān)工作的高素質(zhì)技術(shù)技能型人才。按照技術(shù)類崗位群分析，電子商務(wù)專業(yè)的學(xué)生要掌握電子商務(wù)所涉及的計(jì)算機(jī)技術(shù)，具備設(shè)計(jì)與制作商務(wù)網(wǎng)站，并對網(wǎng)站進(jìn)行維護(hù)和管理能力。開展《網(wǎng)頁設(shè)計(jì)與制作》實(shí)訓(xùn)課程能使學(xué)生進(jìn)一步掌握網(wǎng)頁設(shè)計(jì)與制作的基本知識，鞏固相關(guān)操作技能。

一、實(shí)訓(xùn)環(huán)境

在電子商務(wù)實(shí)訓(xùn)室中開展《網(wǎng)頁設(shè)計(jì)與制作》實(shí)訓(xùn)課程。實(shí)訓(xùn)開始前先搭建軟件開發(fā)環(huán)境，電腦全部安裝Windows10操作系統(tǒng)，實(shí)訓(xùn)環(huán)境中必備的軟件是Dreamweaver CS6，除此之外還需安裝Fireworks CS6、Flash CS6等軟件。實(shí)訓(xùn)室要達(dá)到內(nèi)、外網(wǎng)覆蓋。在實(shí)訓(xùn)開發(fā)環(huán)境達(dá)到要求后，教師要認(rèn)真組織學(xué)生參加實(shí)訓(xùn)，保證每位學(xué)生一臺電腦，并將學(xué)生劃分成若干個(gè)小組，每3、4位學(xué)生一個(gè)小組，設(shè)一名組長。分組后不但可以充分調(diào)動學(xué)生的積極性和主動性，還能培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識。

二、實(shí)訓(xùn)內(nèi)容

網(wǎng)頁設(shè)計(jì)與制作涉及到的軟件技術(shù)、知識面非常廣泛，不單純是網(wǎng)頁設(shè)計(jì)與制作技術(shù)，還包括圖形圖像處理技術(shù)、動畫制作技術(shù)等。在實(shí)訓(xùn)中上述技術(shù)要求全面開展實(shí)訓(xùn)是有困難的。由于實(shí)訓(xùn)時(shí)間有限，因此在設(shè)計(jì)實(shí)訓(xùn)內(nèi)容的時(shí)候必須少而精，還需結(jié)合網(wǎng)頁設(shè)計(jì)與制作技術(shù)的發(fā)展現(xiàn)狀和電子商務(wù)應(yīng)用的需要，并且要根據(jù)知識點(diǎn)和技能的相互關(guān)系設(shè)計(jì)好實(shí)訓(xùn)內(nèi)容的先后關(guān)系。本課程實(shí)訓(xùn)的目標(biāo)是促進(jìn)學(xué)生對網(wǎng)站建設(shè)理解及技能的掌握，培養(yǎng)學(xué)生對Dreamweaver CS6等相關(guān)軟件的使用能力，為學(xué)生后續(xù)學(xué)習(xí)電子商務(wù)綜合課程奠定基礎(chǔ)。本實(shí)訓(xùn)課程要求學(xué)生在一個(gè)實(shí)訓(xùn)周（共30學(xué)時(shí)）的時(shí)間內(nèi)完成。本實(shí)訓(xùn)課程要求學(xué)生從如下實(shí)訓(xùn)題目中任選一題：

題目一：百貨商城網(wǎng)站設(shè)計(jì)；

題目二：電子商城網(wǎng)站設(shè)計(jì)；

題目三：時(shí)尚購物網(wǎng)站設(shè)計(jì)。

學(xué)生在選定了實(shí)訓(xùn)題目后，根據(jù)教師給劃分的實(shí)訓(xùn)任務(wù)進(jìn)行實(shí)訓(xùn)。具體實(shí)訓(xùn)內(nèi)容及課時(shí)如表1所示。

表1 實(shí)訓(xùn)內(nèi)容及課時(shí)分配表

1.商務(wù)網(wǎng)站整體規(guī)劃

學(xué)生選好主題后，教師引導(dǎo)學(xué)生對所選網(wǎng)站主題進(jìn)行整體規(guī)劃和分析。還要引導(dǎo)學(xué)生明確建立網(wǎng)站的目的、網(wǎng)站規(guī)模，設(shè)計(jì)網(wǎng)站的功能，還有必要做市場分析。在實(shí)訓(xùn)開始階段，教師需要提示學(xué)生只有詳細(xì)的規(guī)劃，避免在網(wǎng)站建設(shè)中出現(xiàn)過多的問題，才能使網(wǎng)站建設(shè)能夠順利進(jìn)行。還要提示學(xué)生明確用戶的需求、確定網(wǎng)站的風(fēng)格、以及網(wǎng)站的技術(shù)問題。

2.創(chuàng)建商務(wù)網(wǎng)站站點(diǎn)

本階段以學(xué)生實(shí)際操作為主。對站點(diǎn)進(jìn)行創(chuàng)建，及打開、修改、復(fù)制、刪除、導(dǎo)入、導(dǎo)出等操作。教師提示學(xué)生注意站點(diǎn)的命名規(guī)則。

3.商務(wù)網(wǎng)站整體布局設(shè)計(jì)

本階段充分展示學(xué)生的設(shè)計(jì)能力。首先學(xué)生要掌握網(wǎng)站的版式設(shè)計(jì)，學(xué)生可以通過之前學(xué)過的層疊樣式表、表格布局、框架布局設(shè)計(jì)網(wǎng)站的板式；學(xué)生還要明確色彩在網(wǎng)頁設(shè)計(jì)中的作用，選擇適合所選網(wǎng)站主題的顏色；學(xué)生還要考慮到網(wǎng)頁形式與內(nèi)容協(xié)調(diào)統(tǒng)一。

4.商務(wù)網(wǎng)站頁面設(shè)計(jì)與制作

本階段最能體現(xiàn)學(xué)生實(shí)操能力。引導(dǎo)學(xué)生分清靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。在學(xué)生進(jìn)行靜態(tài)網(wǎng)頁的制作時(shí)，在各個(gè)具體網(wǎng)頁中添加實(shí)際內(nèi)容，如：網(wǎng)站logo、店招、輪播圖、導(dǎo)航、文字內(nèi)容、圖像、多媒體文件、FLASH動畫等。學(xué)生在進(jìn)行動態(tài)網(wǎng)頁的制作時(shí)，實(shí)現(xiàn)客戶端與服務(wù)器端的交互。例如：會員注冊、信息查詢、產(chǎn)品選購、留言板等功能。

5.商務(wù)網(wǎng)站調(diào)試與上傳

商務(wù)網(wǎng)站制作完畢，需要在本機(jī)上進(jìn)行測試，查看網(wǎng)站上是否存在某些錯(cuò)誤，如網(wǎng)站是否存在鏈接錯(cuò)誤，圖片是否能夠正常顯示，網(wǎng)頁程序代碼是否存在錯(cuò)誤等等。測試完畢后，用FTP等上傳工具將網(wǎng)站傳到WEB服務(wù)器上。

三、實(shí)訓(xùn)成績評定

評定學(xué)生的實(shí)訓(xùn)成績主要從如下方面來綜合評定。

第一、平時(shí)成績：主要看學(xué)生的平時(shí)表現(xiàn)，出勤，實(shí)訓(xùn)態(tài)度，不做與實(shí)訓(xùn)無關(guān)的事情。

第二、完成任務(wù)：是否完成實(shí)訓(xùn)規(guī)定的任務(wù)，按照學(xué)生每項(xiàng)實(shí)訓(xùn)任務(wù)完成情況進(jìn)行相應(yīng)的評價(jià)。

第三、實(shí)際操作：實(shí)訓(xùn)中學(xué)生的實(shí)際操作能力。

第四、獨(dú)立思考：實(shí)訓(xùn)中學(xué)生是否獨(dú)立完成全部實(shí)訓(xùn)任務(wù)。

第五、提交作業(yè)。根據(jù)每階段的任務(wù)要求提交階段作業(yè)，作業(yè)形式多樣。學(xué)生撰寫實(shí)訓(xùn)報(bào)告不但可以反映出學(xué)生的學(xué)習(xí)態(tài)度，還可以鍛煉學(xué)生的寫作能力。在實(shí)訓(xùn)報(bào)告中要求學(xué)生記錄實(shí)訓(xùn)目的及內(nèi)容，并記錄實(shí)訓(xùn)過程中的具體步驟，最后寫出實(shí)訓(xùn)心得體會。教師通過學(xué)生的實(shí)訓(xùn)報(bào)告可以判斷出學(xué)生實(shí)際實(shí)訓(xùn)效果。判斷學(xué)生是否完成實(shí)訓(xùn)任務(wù)時(shí)，除了檢查學(xué)生的網(wǎng)頁作品外，教師還需要根據(jù)學(xué)生的作品詢問學(xué)生重要細(xì)節(jié)的制作方法，以此判斷作品是否是由學(xué)生親自完成，還能判斷出學(xué)生掌握網(wǎng)頁設(shè)計(jì)與制作技術(shù)的水平。

表2 考核目標(biāo)與權(quán)重指標(biāo)對照關(guān)系表

四、結(jié)束語

《網(wǎng)頁設(shè)計(jì)與制作》是電子商務(wù)專業(yè)的核心課程，在電子商務(wù)技術(shù)不斷發(fā)展和變化的當(dāng)下，《網(wǎng)頁設(shè)計(jì)與制作》作為高職高專電子商務(wù)專業(yè)的實(shí)訓(xùn)課程，應(yīng)該緊跟時(shí)代步伐，及時(shí)更新和調(diào)整實(shí)訓(xùn)內(nèi)容，以使學(xué)生掌握最前沿的技術(shù)技能。這樣做不但為學(xué)生學(xué)習(xí)后續(xù)的專業(yè)課程打下良好的基礎(chǔ)。而且為培養(yǎng)符合市場、企業(yè)所需發(fā)展趨勢的高素質(zhì)技術(shù)技能型人才奠定基礎(chǔ)。

參考文獻(xiàn)：

[1]楊森，劉瀟瀟.《網(wǎng)頁設(shè)計(jì)與制作》課程教學(xué)改革的研究與探索[J].辦公自動化，2010（6）.[2]陳明華，石冬凌，熊耀華.計(jì)算機(jī)應(yīng)用軟件項(xiàng)目實(shí)訓(xùn)課程設(shè)計(jì)軟件工程師，第17卷第12期2014年12月（40）.[3]張利，楊俊清.電子商務(wù)設(shè)計(jì)師教程[M].清華大學(xué)出版社，2013（08）.作者簡介：柏翠（1980.04-），漢族，籍貫：遼寧沈陽人，職稱：講師，碩士學(xué)位，研究方向：計(jì)算機(jī)、電子商務(wù)；王婷婷（1983.05-），漢族，籍貫：遼寧沈陽人，職稱：講師，博士學(xué)位，研究方向：產(chǎn)業(yè)經(jīng)濟(jì)學(xué)、組織行為學(xué)

第二篇：電子商務(wù)網(wǎng)頁制作實(shí)訓(xùn)報(bào)告

一周的網(wǎng)站規(guī)劃實(shí)訓(xùn)又結(jié)束了，在這短短的一周實(shí)訓(xùn)中，我們每一個(gè)學(xué)生都受益匪淺。時(shí)間過得真快呀，這也是這學(xué)期我們最后一次在學(xué)校里的實(shí)訓(xùn)，每一個(gè)同學(xué)都懷著飽滿的熱情，都在積極緊張的實(shí)訓(xùn)，我也一樣，只是多了一種不舍得感覺，雖然我們在實(shí)訓(xùn)中也有些苦痛和煩惱，但是我會努力的克服自己所遇到的任何困難以及在老師熱心的幫助下我們很快的解決了自己遇到的一些困難。

總的來說：我在實(shí)訓(xùn)中不僅學(xué)到了課本上面沒有的知識，而且還學(xué)到了堅(jiān)持不懈，不拋棄，不放棄的一種學(xué)習(xí)的精神。這次實(shí)訓(xùn)讓我增長了很多關(guān)于網(wǎng)站制作的知識，也讓我體會到了做網(wǎng)站并不是我想象中的那么簡單。網(wǎng)頁設(shè)計(jì)與制作綜合實(shí)訓(xùn)是我們學(xué)習(xí)過程中重要的實(shí)踐性學(xué)習(xí)環(huán)節(jié)。它是根據(jù)我們學(xué)習(xí)計(jì)劃的要求，在老師的指導(dǎo)下對我們進(jìn)行網(wǎng)頁制作專業(yè)技能的訓(xùn)練,培養(yǎng)我們綜合運(yùn)用理論知識分析和解決實(shí)際問題的能力,實(shí)現(xiàn)由理論知識向操作技能的培養(yǎng)過程.因此加強(qiáng)實(shí)踐學(xué)習(xí)環(huán)節(jié),搞好實(shí)訓(xùn)教學(xué),對實(shí)現(xiàn)我們專業(yè)的培養(yǎng)目標(biāo),提高我們的綜合素質(zhì)有著重要的作用。通過這次實(shí)訓(xùn)，我學(xué)到了很多有價(jià)值的東西。我獨(dú)立的完成網(wǎng)站設(shè)計(jì)的全過程，把設(shè)計(jì)中散亂的網(wǎng)頁鏈接成框架體系，使平時(shí)學(xué)到的知識點(diǎn)有了很高的提高，并且合理的在試驗(yàn)中進(jìn)行了實(shí)踐。在這次實(shí)驗(yàn)的過程中，我搜集了大量的素材和網(wǎng)頁設(shè)計(jì)制作的知識，增加知識面，給我在以后的設(shè)計(jì)過程中能博采眾長，制作出好的網(wǎng)頁打下了基礎(chǔ)。

通過短短幾天的網(wǎng)站規(guī)劃實(shí)訓(xùn)，我從中學(xué)到了很多的知識。每一個(gè)同學(xué)都在認(rèn)認(rèn)真真的實(shí)訓(xùn)，都在認(rèn)真的做網(wǎng)頁。盡管在實(shí)訓(xùn)中遇到了許多不少的問題，通過自己上網(wǎng)查閱資料和老師的耐心教導(dǎo)，我們每一個(gè)同學(xué)都解決了自己在實(shí)訓(xùn)中遇到的困難。有的同學(xué)還互相幫助和積極討論遇到的問題，同樣在學(xué)習(xí)的良好氛圍之下解決了遇到的困難。在這次網(wǎng)站規(guī)劃中，我們學(xué)到了課本上沒有的知識，不僅開拓了我們的視野，而且增加了我們設(shè)計(jì)制作網(wǎng)站的能力。雖然實(shí)訓(xùn)也有些苦痛和煩惱，但是我們每一個(gè)人都懷著一顆學(xué)習(xí)的心，不怕困哪和苦痛，認(rèn)真的完成了網(wǎng)站規(guī)劃的實(shí)訓(xùn)。在網(wǎng)站規(guī)劃中，我們熟悉了Frontpage軟件的新型的功能，增加了對軟件的認(rèn)識和認(rèn)知，學(xué)會了怎么做一個(gè)漂亮的網(wǎng)站和優(yōu)美的布局。

我收獲頗豐，學(xué)到了很多知識，特別是提高了綜合分析應(yīng)用的能力。實(shí)訓(xùn)過程是繁瑣的，但同學(xué)們都表現(xiàn)得很積極，不怕課程難，相互幫助一起分析。任課老師也非常認(rèn)真負(fù)責(zé)，耐心講解，細(xì)心指導(dǎo)，一點(diǎn)一點(diǎn)解答同學(xué)們的疑惑，直到同學(xué)們理解了為止。在實(shí)訓(xùn)中，分析、討論、演算，機(jī)房里充滿了濃濃的學(xué)習(xí)氣氛。此次實(shí)訓(xùn)培養(yǎng)了同學(xué)們耐心的工作作風(fēng)，增強(qiáng)了同學(xué)們的合作意識，提高了大家的應(yīng)用分析能力。

第三篇：《網(wǎng)頁設(shè)計(jì)與制作》綜合實(shí)訓(xùn)

《網(wǎng)頁制作》期末大作業(yè)

一、概述：

要求設(shè)計(jì)并制作一個(gè)表達(dá)某個(gè)主題的網(wǎng)站，通過網(wǎng)站的制作，綜合運(yùn)用本課程各單元所學(xué)的知識。網(wǎng)站的內(nèi)容不能是一些素材如圖片、音樂等的堆積，必須有鮮明的主題。可以從網(wǎng)上下載部分資料，但不能超過整個(gè)內(nèi)容的30%，更不要指望從網(wǎng)上下一個(gè)完整的網(wǎng)站應(yīng)付老師?？偟捻摂?shù)應(yīng)超過10頁（一個(gè)包含主題內(nèi)容的htm文件算一頁）。請同學(xué)們注意不要下載相同的資料，如果出現(xiàn)網(wǎng)頁內(nèi)容雷同，雙方都要扣分，嚴(yán)重的必須重做。

二、網(wǎng)站內(nèi)容：

自行選擇如下內(nèi)容：科普、科幻知識；公益形象宣傳；大、中、小學(xué)教學(xué)用動畫形象；奧林匹克體育；環(huán)境保護(hù)；戰(zhàn)爭與和平；求職；校園生活；誠信、傳統(tǒng)美德；交通安全；衛(wèi)生與健康；愛心；教育；新青年；管理；實(shí)用工具等。自己確定一個(gè)主題，整個(gè)網(wǎng)站要突出主題，信息分類合理，導(dǎo)航清晰。要求必須有自己創(chuàng)作的內(nèi)容，這些原創(chuàng)內(nèi)容可以是文字、圖片、動畫等。

三、版面及格式：

l、要求圖文并茂，顏色搭配合理，但是圖片及聲音文件不要太大。如果能加入自己創(chuàng)作的動態(tài)元素(如Flash，Gif動畫等)將獲得加分。希望充分發(fā)揮自己的創(chuàng)作能力。

2、要求每個(gè)網(wǎng)頁都使用表格布局。

3、要求網(wǎng)頁中插入有Web組件，包括懸停按鈕、滾動字幕、橫幅廣告管理器等。

4、導(dǎo)航設(shè)計(jì)簡潔明了，不能有“死鏈接”，要保證能夠在網(wǎng)絡(luò)上瀏覽。

5、自創(chuàng)內(nèi)容越多越好，得分越高。

四、遞交方式：

1、每個(gè)同學(xué)以自己的學(xué)號姓名建一個(gè)文件夾，上交時(shí)間為18周2、所做網(wǎng)頁的首頁文件名必須為index.htm3、所有文件名和目錄名全部使用英文字母和數(shù)字，不得使用漢字或全角符號，否則，網(wǎng)絡(luò)將出現(xiàn)死鏈接。

4、遞交時(shí)必須把網(wǎng)頁中所有用到的圖片、聲音、動畫等都一起上傳到服務(wù)器。網(wǎng)頁的總?cè)萘恳话悴灰笥?MB5、建議將網(wǎng)頁中的素材分類，建立不同的子目錄存放。

五、網(wǎng)頁評分標(biāo)準(zhǔn):

整個(gè)網(wǎng)頁的評分強(qiáng)調(diào)“自己的創(chuàng)意”，不管主題是什么，也不論是哪一個(gè)欄目的內(nèi)容，如果創(chuàng)意獨(dú)特，有自己鮮明的個(gè)性、觀點(diǎn)，得分較高。

1、主題鮮明，有關(guān)主題的內(nèi)容豐富（30分）

2、原創(chuàng)內(nèi)容豐富，能體現(xiàn)自己的想法，文字流利通順（30分）

3、版面布局合理，整理效果美觀（20分）

4、其他內(nèi)容如友情鏈接、相關(guān)資料等（5分）

5、插入的圖片等素材恰當(dāng)、美觀（5分）

6、技術(shù)含量（使用了各種效果、技術(shù)等）（10分）

六、網(wǎng)頁制作特別注意事項(xiàng)：

1、網(wǎng)頁文件名最好全部用英文字母或數(shù)字（不能包含漢字）；

2、整理圖片和其他素材；

3、在與網(wǎng)頁主文件（index.htm)同級的目錄中建立子目錄image(圖片）、wave(聲音）、?等，將取得的素材按類保存好，在制作網(wǎng)頁（即編輯HTM文件）時(shí)，必須從這些目錄中插入素材，以保證顯示正確，不能從其他目錄插入，提示另外保存圖片時(shí)，不要改變保存目錄，直接按[確定]即可。同學(xué)們要改變那種在編輯網(wǎng)頁時(shí)到處找圖片，找到了就往HTML文件中插的壞習(xí)慣(也不管這個(gè)文件在哪里）；

4、作好筆記將對后期調(diào)試非常有利，從開始規(guī)劃起就記錄目錄名、文件名的分配，以便調(diào)試時(shí)節(jié)省時(shí)間。

第四篇：網(wǎng)頁設(shè)計(jì)與制作實(shí)訓(xùn)報(bào)告[范文]

《網(wǎng)頁設(shè)計(jì)與制作》

實(shí)習(xí)報(bào)告

指導(dǎo)老師：

實(shí)習(xí)地點(diǎn)：

實(shí)習(xí)時(shí)間：

實(shí)習(xí)班級：

學(xué)生姓名：

一、實(shí)習(xí)目的① 學(xué)會制作新聞發(fā)布系統(tǒng)。

② 學(xué)會制作在線調(diào)查系統(tǒng)。

③ 熟悉購物網(wǎng)站的主要功能和欄目。

④ 學(xué)會購物網(wǎng)站數(shù)據(jù)庫表的創(chuàng)建和數(shù)據(jù)庫連接的創(chuàng)建。

⑤ 學(xué)會購物系統(tǒng)前臺頁面制作和后臺管理制作。

二、實(shí)訓(xùn)內(nèi)容

1.創(chuàng)建數(shù)據(jù)庫表

① 啟動Microsoft Access，執(zhí)行“文件”——“新建”命令，打開“新建文件”面板，在面板中單擊“空數(shù)據(jù)庫”。

② 彈出“文件新建數(shù)據(jù)庫”對話框，在對話框中選擇數(shù)據(jù)庫保存的路徑，“文件名”文本框中輸入shop。

③ 單擊“創(chuàng)建”按鈕，在對話框中雙擊“使用設(shè)計(jì)器創(chuàng)建表”選項(xiàng)。

④ 彈出“表1：表”對話框，在對話框中輸入“字段名稱”和字段所對應(yīng)的“數(shù)據(jù)類型”，將shopID字段設(shè)置為主鍵。

⑤ 執(zhí)行“文件”——“保存”命令，彈出“另存為”對話框，在對話框的“表名稱”文本框中輸入products。

⑥ 單擊“確定”按鈕，保存表。按以上步驟的方法，創(chuàng)建表fen和admin。

2.創(chuàng)建數(shù)據(jù)庫連接

新建一個(gè)網(wǎng)頁文件夾，打開IIS信息服務(wù)，創(chuàng)建IIS虛擬目錄，在文件夾安全性把來賓用戶的權(quán)限修改為完全控制，并導(dǎo)入數(shù)據(jù)庫。

3.制作購物網(wǎng)系統(tǒng)頁面

① 用index.html創(chuàng)建zhanshi.asp商品分類展示頁，新建站點(diǎn)，導(dǎo)入shop.mdb數(shù)據(jù)庫文件建立數(shù)據(jù)庫連接。插入表格并插入圖片、文字，創(chuàng)建記錄集并在表格相應(yīng)位置綁定數(shù)據(jù)。在服務(wù)器行為里為表格設(shè)置重復(fù)區(qū)域，創(chuàng)建記錄集RS2并在左邊的商品分類表格里綁定

數(shù)據(jù)，在服務(wù)器行為里為左側(cè)的表格添加重復(fù)區(qū)域和轉(zhuǎn)到詳細(xì)頁，制作記錄集導(dǎo)航條。

② 用index.html創(chuàng)建xiangxi.asp商品詳細(xì)信息頁，首先創(chuàng)建記錄集并制作左側(cè)的商品分類表格，之后在中間區(qū)域插入表格，在表格中插入圖片、文字，創(chuàng)建記錄集RS2并將數(shù)據(jù)綁定在表格相應(yīng)位置。

③ 用index.html創(chuàng)建denglu.asp商品詳細(xì)信息頁,創(chuàng)建記錄集并制作左側(cè)的商品分類表格，在中間區(qū)域插入表單，在表單里插入表格，在表格里插入文字、文本域、表單按鈕，并為表單設(shè)置檢查表單。創(chuàng)建記錄集RS2并在服務(wù)器行為里添加登錄用戶。

④ 用index.html創(chuàng)建fenlei.asp添加商品分類頁，插入表單，在表單里插入文字、文本域、表單按鈕，創(chuàng)建記錄集并在服務(wù)器行為里添加插入記錄和限制對頁的訪問。再用index.html創(chuàng)建fenleiok.asp,在其中插入表格輸入文字，并設(shè)置返回鏈接。

⑤ 用index.html創(chuàng)建tianjia.asp添加商品頁，創(chuàng)建記錄集，用插入記錄表單向?qū)?chuàng)建插入記錄表單，在服務(wù)器行為里添加限制對頁的訪問。再用index.html創(chuàng)建tianjiaok.asp,在其中插入表格輸入文字，并設(shè)置返回鏈接。

⑥ 用index.html創(chuàng)建guanli.asp商品管理頁，創(chuàng)建記錄集并制作左側(cè)的商品分類表格，在中間區(qū)域插入表格并插入文字，創(chuàng)建記錄集RS2并在表格相應(yīng)位置綁定數(shù)據(jù)，為該表格設(shè)置服務(wù)器行為的重復(fù)區(qū)域，制作修改和刪除鏈接，制作記錄集導(dǎo)航條。

⑦ 用tianjia.asp創(chuàng)建xiugai.asp修改頁面，創(chuàng)建記錄集在對應(yīng)的文本域中綁定數(shù)據(jù)，把服務(wù)器行為里的插入記錄刪除并添加更新記錄。在服務(wù)器行為里添加限制對頁的訪問。再用index.html創(chuàng)建xiugaiok.asp,在其中插入表格輸入文字，并設(shè)置返回鏈接。

⑧ 用index.html創(chuàng)建shanchu.asp刪除頁面,插入表格并插入文字，建立記錄集，在表格相應(yīng)位置綁定數(shù)據(jù)，插入表單和表單按鈕，創(chuàng)建服務(wù)器行為限制對頁的訪問和刪除記錄。再用index.html創(chuàng)建shanchuok.asp,在其中插入表格輸入文字，并設(shè)置返回鏈接。

三、疑難解惑

① 網(wǎng)頁不能正常打開，電腦用戶權(quán)限沒有修改，在文件夾安全性把來賓用戶的權(quán)限修改為完全控制。

② 創(chuàng)建重復(fù)區(qū)域時(shí)，總顯示相同的內(nèi)容，仔細(xì)閱讀教材，發(fā)現(xiàn)創(chuàng)建重復(fù)區(qū)域時(shí)要選中表格，而不是文字內(nèi)容。

③ 登陸頁面不能登陸，把表格放入表單后，重新登錄，問題解決。

④ 創(chuàng)建添加商品頁面時(shí)，無法顯示商品分類。在插入記錄表單時(shí)，應(yīng)將feileiID“顯

示為”下拉列表中選擇“菜單”，并在“菜單屬性”里的“域”列表中選擇fenlei。

⑤ 修改頁面點(diǎn)進(jìn)去初始內(nèi)容都一樣，“唯一鍵列”下拉列表中應(yīng)選擇shpID。

⑥ 商品分類點(diǎn)進(jìn)去每個(gè)種類都一樣，查找原因，發(fā)現(xiàn)記錄集中篩選是shpID，把記錄集中的篩選改為fenleiID解決。

四、實(shí)訓(xùn)心得

經(jīng)過一周動態(tài)網(wǎng)頁的實(shí)訓(xùn)，使我們對本學(xué)期的這門課進(jìn)行了整體的匯總。在這匯總期間，也算是對自己本學(xué)期的一個(gè)考核，此次實(shí)訓(xùn)暴露出了許多我自身存在的問題，同時(shí)也對自身有了很大的提高。

在這次實(shí)訓(xùn)中，我也有許多收獲。首先，我體會到了作為一個(gè)計(jì)算機(jī)專業(yè)的人，不會用DW的痛苦和尷尬。在制作的過程中遇到問題，可以說得是困難重重，這畢竟是第一次獨(dú)自制作動態(tài)網(wǎng)頁，難免會遇到過各種各樣的問題，同時(shí)在制作的過程中發(fā)現(xiàn)了自己的不足之處，對以前所學(xué)過的知識理解得不夠深刻，掌握得不夠牢固。在此過程當(dāng)中彌補(bǔ)了我許多知識上的缺陷，弄清的以前沒有搞懂的知識點(diǎn)。經(jīng)過多番的努力和辛酸，我成功地完成了這次過程艱辛的實(shí)訓(xùn)，而且我從中體會到了一種叫做‘成功的喜悅’的感覺，那種小有成就的興奮是只有置身其中的人才能體會的。

在實(shí)訓(xùn)過程中，我更體會到了基礎(chǔ)知識的重要性，也許我們正在迷惘，我們是否學(xué)到了東西，但事實(shí)說明零零散散的知識，在項(xiàng)目開發(fā)當(dāng)中起到了非常關(guān)鍵的作用，我們不缺少時(shí)間和工具，我們只是缺少經(jīng)驗(yàn)和動手能力，如果我們以后能更好的在各方面增長自己的經(jīng)驗(yàn)，相信我們能在長長的就業(yè)隊(duì)伍中脫穎而出的！相信自己，相信未來。今后我將會更加努力的學(xué)習(xí)，不斷提高自身素質(zhì)，為我將來的就業(yè)打下良好的基礎(chǔ)

第五篇：網(wǎng)頁設(shè)計(jì)與制作實(shí)訓(xùn)報(bào)告

《Dreamweaver網(wǎng)頁設(shè)計(jì)與制作案例教程》

實(shí)訓(xùn)報(bào)告

專 業(yè)： 計(jì)算機(jī)網(wǎng)絡(luò)技術(shù) 年 級： 2013級 姓 名： 學(xué) 號： 輔導(dǎo)老師：

制作電子商務(wù)類網(wǎng)站首頁

一、網(wǎng)站建設(shè)的前期準(zhǔn)備工作

1、網(wǎng)站整體需求分析

網(wǎng)站整體需求主要包括以下幾個(gè)方面： 1)網(wǎng)站建設(shè)背景及目標(biāo) 2)網(wǎng)站建設(shè)現(xiàn)狀分析 3)網(wǎng)站建設(shè)目標(biāo)分解

4)網(wǎng)站建設(shè)資金及人員投入情況分析

2、確定網(wǎng)站風(fēng)格

根據(jù)電子商務(wù)網(wǎng)站的特點(diǎn)，確定網(wǎng)站的整體風(fēng)格，即網(wǎng)站的色彩和版式。網(wǎng)站風(fēng)格是在網(wǎng)站整體需求分析的基礎(chǔ)上，通過明確網(wǎng)站設(shè)計(jì)的目的和用戶需求、訪問者的特點(diǎn)等得出的結(jié)論。本實(shí)例是針對一個(gè)工業(yè)產(chǎn)品交易平臺的網(wǎng)站，網(wǎng)站與用戶交互性強(qiáng)，因此確定其主色調(diào)為暖色系的橘黃色給人以輕松愉快的瀏覽環(huán)境。如圖是電子商務(wù)網(wǎng)站的LOGO。

3、網(wǎng)站素材搜集

明確網(wǎng)站主題和劃分板塊后，接著要為后續(xù)的網(wǎng)站建設(shè)搜集素材。若想讓網(wǎng)站有聲有色，能夠吸引客戶注意，就要盡量搜集文字、圖片、音頻、視頻、動畫等多媒體素材。對于一些通用素材，可以從網(wǎng)上搜集得到，也可以根據(jù)需求自行制作素材，比如，通過Photoshop圖像處理軟件對圖像進(jìn)行優(yōu)化處理，使用Flash制作動畫等。如圖所示。

二、創(chuàng)建站點(diǎn)

1、網(wǎng)站建設(shè)的第一步是創(chuàng)建本地站點(diǎn)。

2、創(chuàng)建的站點(diǎn)信息將顯示在“文件”面板中。如果需要對站點(diǎn)參數(shù)進(jìn)行修改，可以單擊“站點(diǎn)→管理站點(diǎn)”對站點(diǎn)進(jìn)行重新設(shè)置。

三、網(wǎng)站主頁制作

1.使用Div+CSS布局頁面

使用Div+CSS實(shí)現(xiàn)頁面布局，具體操作如下：

4）為AP Div元素設(shè)置CSS樣式。由于網(wǎng)站首頁和子頁面采取相同的布局風(fēng)格，因此樣式表采用外部鏈接樣式表。

5）選中創(chuàng)建的AP元素“container”，在右側(cè)的“CSS樣式”面板中單擊鼠標(biāo)右鍵，選擇“新建”命令，打開“新建CSS規(guī)則”對話框，并作相應(yīng)設(shè)置，如圖所示。

6）單擊確定按鈕，彈出“#container的CSS規(guī)則定義”對話框，選擇分類列表框下的“背景”選項(xiàng)卡，設(shè)置文檔的“背景顏色”為#FFF；在分類列表框中，切換到“區(qū)塊”選項(xiàng)卡，設(shè)置“文本對齊”屬性為左對齊；在分類列表框中，切換到“方框”選項(xiàng)卡，設(shè)置Ap Div的“寬”為960 px，“上邊界”為1 px，“下邊界”為0 px；“邊框”和“列表”選項(xiàng)卡的屬性保持默認(rèn)設(shè)置；切換到“定位”選項(xiàng)卡，單擊確定按鈕，完成對“#container”元素樣式的定義。設(shè)置后的“CSS樣式”面板如圖所示。

/* ==整體布局定義開始== */ #Container { width:960px;/*定義頁面寬度*/ visibility:visible;/*設(shè)置可見度*/ margin:1px auto 0;/*設(shè)置外邊距*/ background-color: #FFF;/*定義背景顏色*/ } 2.設(shè)置頁面屬性

在style.css樣式表文件內(nèi)部設(shè)置網(wǎng)頁的頁面屬性。頁面屬性是對標(biāo)簽屬性的設(shè)置。代碼如下所示： body{ font-size:12px;/*定義字號*/ color:#666;/*定義字體顏色*/ background:#FFF;/*定義背景顏色*/ text-align:center;/*定義文本位置*/ margin:0;/*定義外邊距*/ padding:0;/*定義外邊距*/ border:0;/*定義邊框粗細(xì)*/ background: transparent;/*定義背景透明*/ } 也可以打開index.html，選擇“修改→頁面屬性”菜單命令，在打開的“頁面屬性”對話框中進(jìn)行相應(yīng)設(shè)置。

3.插入圖片

在頂部的“top”元素中插入一幅圖像。如圖所示。

4.添加導(dǎo)航條

網(wǎng)頁導(dǎo)航條是非常重要的網(wǎng)頁元素，網(wǎng)頁間的跳轉(zhuǎn)，需要通過導(dǎo)航條來完成。

1）將光標(biāo)定位在“nav” Div元素中，在其內(nèi)部輸入列表項(xiàng)，并為列表項(xiàng)的各個(gè)單元設(shè)置超鏈接。設(shè)置情況如圖所示。

2）添加CSS樣式，需要在style.css文件中輸入相關(guān)代碼。#nav { height:30px;/*定義高度*/ width:100%;/*定義寬度*/ background-color:#c00;/*定義背景顏色*/ overflow: hidden;/*定義溢出效果*/ } #nav ul { font-size:12px;/*定義字號*/ color:#FFF;/*定義字體顏色*/ line-height:30px;/*定義字體行高*/ white-space:nowrap;/*定義區(qū)塊空格*/ margin:0 0 0 30px;/*定義外邊距*/ padding:0;/*定義內(nèi)邊距*/ } #nav li { list-style-type:none;/*定義列表類型*/ display:inline;/*定義區(qū)塊顯示效果*/ } #nav li a { text-decoration:none;/*定義字體修飾*/ font-family:Arial, Helvetica, sans-serif;/*定義字體*/ color:#FFF;/*定義字體顏色*/ padding:7px 10px;/*定義內(nèi)邊距*/ } #nav li a:hover { color:#ff0;/*定義字體顏色*/ background-color:red;/*定義背景顏色*/ 該樣式表使用列表項(xiàng)實(shí)現(xiàn)導(dǎo)航菜單功能。效果如圖所示。

5.推薦廠家

1）把光標(biāo)置于DIV元素“l(fā)eft”中，創(chuàng)建新的DIV元素 sideBarLefta1，并定義相關(guān)樣式

2）在DIV元素“sideBarLefta1”的內(nèi)部插入推薦廠家標(biāo)志及說明文字等信息，定義相關(guān)樣式如圖所示。

3）在style.css樣式表中插入下面的代碼，#left { float:left;/*定義浮動位置 */ width:640px;/*定義寬度 */ height:832px;/*定義高度 */ }.sideBarLeftb1 { width:238px;/*定義寬度 */ height:240px;/*定義高度*/ border:#ebcbb4 solid 1px;/*定義邊框的顏色、粗細(xì)、樣式*/ } 6.網(wǎng)頁廣告設(shè)計(jì)制作

1）將光標(biāo)置于div元素“#left”中，插入一個(gè)嵌套的div元素#sideBarLefta2，2）將光標(biāo)置于DIV元素“banner”中，插入一個(gè)已經(jīng)準(zhǔn)備好的SWF元素。

3）選中“banner”下面DIV元素，并定義類為“hot”，在4個(gè)小DIV元素中分別插入準(zhǔn)備好的廣告圖，效果如圖所示

style.css樣式表中插入的代碼如下： #sideBarLefta2 {

float:left;/*定義浮動位置 */ width:390px;/*定義寬度 */ height:268px;/*定義高度*/ overflow: hidden;/*定義溢出效果*/ } #banner { margin-top:5px;/*定義頂端外邊距*/ border:#999 solid 1px;/*定義邊框的顏色、粗細(xì)、樣式*/ width:390px;/*定義寬度 */ }.hot{ display:inline;/*定義區(qū)塊顯示效果*/ border:#999 1px solid;/*定義邊框的顏色、粗細(xì)、樣式*/ width:91px;/*定義寬度 */ height:70px;/*定義高度*/ float:left;/*定義浮動位置 */ margin:2px;/*定義外邊距*/ } 7.頁面右側(cè)欄目設(shè)計(jì)

1）將光標(biāo)置于DIV元素“right”中，插入已經(jīng)準(zhǔn)備好的圖片service.jpg。如圖所示。

2）在service.jpg下面插入兩個(gè)div，分別定義為.sideBarRightb3和.sideBarRightb4，在新建的div中插入準(zhǔn)備好的廣告圖像ad1.jpg和ad2.jpg并在屬性面板中定義超鏈接，效果如圖所示。

在style.css中添加的代碼如下： #right { float:left;/*定義浮動位置 */ width:320px;/*定義寬度 */ height:832px;/*定義高度 */ }.sideBarRightb3 { height:60px;/*定義高度*/ margin-top:5px;/*定義頂端外邊距*/ border:#ebcbb4 1px solid;/*定義邊框的顏色、粗細(xì)、樣式*/ }.sideBarRightb4 { height:93px;/*定義高度*/ margin-top:5px;/*定義頂端外邊距*/

border:#ebcbb4 1px solid;/*定義邊框的顏色、粗細(xì)、樣式*/ margin-bottom:5px;/*定義底端外邊距*/ }.sideBarRightb3,.sideBarRightb4 img { text-align:center;/*定義文本位置 */ padding:5px;/*定義內(nèi)邊距*/ } 8.行業(yè)欄目設(shè)計(jì)

1）將光標(biāo)置于DIV元素“l(fā)eft”中，在其下側(cè)插入一個(gè)嵌套的DIV元素“sideBarLeftb2”。

2）選中Div元素“sideBarLeftb2”，將光標(biāo)定位在其內(nèi)部，創(chuàng)建多個(gè)新Div，為了方便日后的維護(hù)我們將新建Div單獨(dú)定義為.sideBarLeftb3。

3）選中DIV元素“sideBarLeftb3”，在style.css中添加的代碼如下：

sideBarLeftb3 { text-align:left;/*定義文本位置 */ float:left;/*定義浮動位置 */ height:150px;/*定義高度*/ width:280px;/*定義寬度 */ padding:4px;/*定義內(nèi)邊距*/ } 4）將光標(biāo)移到sideBarLeftb3的DIV元素中，插入兩行列表并對列表設(shè)置相關(guān)CSS參數(shù)。在style.css中添加的代碼如下：.sideBarLeftb3 ul { font-size:12px;/*定義字號*/ line-height:6px;/*定義字體行高*/ float:left;/*定義浮動位置 */ width:270px;/*定義寬度 */ margin:0 0 0 5px;/*定義外邊距*/ padding:0;/*定義內(nèi)邊距*/ } 5）在列表中添加列表內(nèi)容，代碼如下：