第一篇：網頁與制作實訓論文范文

網頁實訓報告

新聞系統(tǒng)前后臺交互

組長：

組員：

指導老師：

實訓目的………………………………………………………………………2 項目思路………………………………………………………………………3 項目準備………………………………………………..…………………….4 前臺頁面主要代碼……………………………………………………………5 數(shù)據(jù)庫連接，確保登錄代碼…………………………………………………6 后臺頁面主要代碼…………………………………………….………………7 項目亮點………………………………………………………………….…..13 優(yōu)點和不足之處……………………………………………………………...13 實訓總結…………………………………………………………………......14

實訓報告

實訓目的：

這次網頁與制作的實訓是鍛煉我們實踐能力重要環(huán)節(jié)，是對我們實踐工作能力的具體訓練和考察過程。隨著科學技術發(fā)展的日新月異，網頁設計制作已經成為當今計算機應用中空前活躍的領域，在生活中可以說是無處不在。因此作為二十一世紀大學生來說掌握網頁設計制作的技術能力是十分重要的。

1.進一步熟悉和掌握網站建設的基本流程和技術規(guī)范；

2.鞏固運用sublime, Dreamweaver,PhotoShop網頁制作軟件制作網頁 3.鞏固運用NatBeans,wampmanager動態(tài)網頁制作軟件制作動態(tài)網頁

4.用sublime,NetBeans,wampmanager三個軟件完成網站建設登錄前后臺任務的方法，能獨立設計一個內容完整，圖文并茂，技術運用得當?shù)木W站；

5.具備獨立撰寫實訓報告等科技文件的基本能力；

6.在網頁設計的實踐中培養(yǎng)分析問題，解決問題的能力，培養(yǎng)協(xié)作，交流的能力，培養(yǎng)創(chuàng)新和團隊意識；

7.為今后從事網站開發(fā)，維護和管理奠定基礎。通過實訓，掌握網頁設計系列軟件sublime, wampmanager軟件的使用方法，達到全面理解，運用網頁制作的知識，并使之得以融會貫通，在掌握理論知識的基礎上再加以實踐，進一步提高,加強設計，制作網站的綜合能力。

項目思路：

首先我們分為兩大塊，前臺頁面和后臺頁面。分別建文件夾web和admin。前臺：先利用我們學習的div+css布局方法+JavaScripte做好靜態(tài)頁面。接下來利用from表單+簡單的CSS樣式做好登錄頁面。然后利用fromeset分幀做好后臺框架?？蚣茏罅斜頌楹笈_首頁，用戶列表，新增用戶，新聞列表，新增新聞。接下來要完成的就是在每個列表中實現(xiàn)頁面效果。點擊列表能夠出現(xiàn)每個列表的頁面。然而要實現(xiàn)這個效果是要先建數(shù)據(jù)庫，再在數(shù)據(jù)庫中建表，在表中插入我們要的數(shù)據(jù)。我們要建三張表，分別為admin，user，news。再就是連接數(shù)據(jù)庫。admin表是要通過數(shù)據(jù)庫連接在后臺實現(xiàn)管理員登錄頁面。news表是要通過數(shù)據(jù)庫連接實現(xiàn)新聞增加，修改，刪除。user表是要通過數(shù)據(jù)庫連接實現(xiàn)用戶信息，添加用戶顯示在后臺。

項目準備：

news-info:

數(shù)據(jù)庫名

admin：

管理員登錄表名

user：

用戶注冊信息表名

news：

新聞信息表名

前臺（web）：

images：

js播放圖片；

img：

登錄頁面背景圖

ht.php：

前臺靜態(tài)頁面效果圖

Style：

前臺靜態(tài)頁面樣式

config.php：

連接數(shù)據(jù)庫

conn.php：

確保登錄成功

login.php：

登錄頁面

jQuery.js：

js代碼 后臺(admin):

登錄頁面(dl):

img:

背景圖 config.php

確保登錄成功 login.php

登錄頁面

admin：

conn.php

連接數(shù)據(jù)庫

htsy.php

后臺首頁

index.php

后臺界面

left.php

框架左列表選項

news.add.php

添加新聞

news-del.php

news-upd.php

news-list.php

zcye.php

zcye-del.php

zcye-list.php

zcye-upd.php

1.前臺頁面主要代碼：

刪除新聞 新聞修改 新聞列表

添加用戶

刪除用戶 用戶列表 修改用戶

2.登錄頁面代碼：

3.連接數(shù)據(jù)庫：

4.確保登錄：

5.后臺界面代碼：

6.框架左列表代碼：

7.后臺首頁：

8.新聞列表代碼：

9.添加新聞：

10.刪除新聞：

11.修改新聞：

12.用戶列表：

13.添加用戶：

14.修改用戶：

15.刪除用戶：

16.前臺顯示后臺數(shù)據(jù)代碼：

項目亮點：

運用了兩次js代碼來實現(xiàn)效果，使頁面更加生動。同時也運用了驗證碼等一些小亮點。

優(yōu)點：

思路清晰，充分增強了動手能力，創(chuàng)作能力，更加懂得團隊協(xié)作能力，對網頁設計軟件DreamWeaver,Sublime,WampServer,NetBeans,PhotoShop,JavaScript的強大運用有了很大提高。也大大提高了自己分析問題，解決問題的能力。

不足之處：

充分體現(xiàn)出老師教的知識并沒有完全掌握，也是根本沒有真正理解老師上課教的內容。尤其是對PHP，數(shù)據(jù)庫知識了解，懂的太少，以至于在做項目后臺過程中遇到很多問題，大大影響了整個項目的進度。

總結：

通過本次實訓我們基本掌握了制作簡單網頁，完善登陸前后臺，相互連接的過程?；臼煜ち烁鞣N軟件的綜合使用方法。實踐出真理，實訓的日子快要結束，感覺還是學到了很多，從理論和操作中融合了我們平時所學的知識，也為我們今后的學習和工作鋪墊了精彩的一幕。因此，我們堅信，只要用心去學，沒有什么是學不會的。希望今后的我們更加努力的開拓我們的極限，我們也要更加努力。通過這兩周的學習，我們也更加明白平時學習的重要性，平時認真學習的同學，經常做網頁項目的同學，明顯做整個項目很輕松，整個項目做得也非常好。所以，我們平時的學習是不能馬虎的，一分耕耘一分收獲。當然，在制作過程中也出現(xiàn)了很多問題，我們小組先一起討論，一起查找問題，研究問題，最后也能發(fā)現(xiàn)出問題我們會一起解決。我明白這就是團隊的力量，不可小覷。當然也有解決不了的問題，我們會請教他人大家互相幫助，共同進步。有時候解決不了問題的時候，一次又一次在修改代碼，運行不出來時，我們會很著急失去耐心，也想放棄。可還是咬牙堅持下來了，堅持就是勝利。做項目真的需要更多的耐心和能力。我們還有很多能力需要提高，還有很多不足需要在今后生活中慢慢改進。這次實訓也收獲了很多，和我們的組員學到了很多，我們一起學習，一起進步。最大的收獲還是覺得老師講課很幽默，知識點講解的很透徹，讓我們能很容易去理解。遇到不理解的問題老師會很耐心的跟我們講解，還用起了畫圖方法，真的很形象生動。這次實訓真的很充實。在這，我表示深深的感謝！感謝我的小組成員，感謝幫助過我的同學，感謝我們的老師！

第二篇：網頁制作實訓報告

《網站設計與制作》實訓報告

X學院XX班XXX號

一．實訓時間：

2010年6月7日到2010年6月13日

二．實訓地點：

XXX學院XXX班級

三．實訓組員：

XXX、XXX

四．實訓目標：

運用網頁設計方法，設計一個網站，提高綜合應用所學知識的能力，積累Web網站的制作經驗，培養(yǎng)團隊協(xié)作精神。本次實訓的具體目標為:了解網站制作的一般流程;熟練使用網頁制作工具Dreamweaver、Flash、Fireworks設計網頁;能靈活運用表格、層和框架布局頁面;熟練使用CSS樣式表美化網頁;正確使用JavaScript添加網頁特效;靈活使用模板和庫來制作網頁；學會申請免費域名空間和正確上傳站點的方法。

五．實訓策劃：

這一周，我們要進行《網站設計與制作》實訓，我們認為做網站前最主要的是確定主題、框架和標題欄的設計。因此我們相互討論之后，確定制作以“婚紗”為主題的“喜多坊時尚婚紗網”。在之后的資料收集和網頁的框架的建設中，我們發(fā)現(xiàn)了許多問題，某些關鍵點無法做出心中的效果，這讓我們有些遺憾。通過自身及組員的共同探索，我們已盡權利將以下是我們的策劃內容：

1.確定主題。制作網頁,首先是確定主題，冬天很冷,卻冷得很幸福，剛剛過去的圣誕的熱鬧勁還在心頭。于是我們從幸福出發(fā)，想到了結婚-婚紗，建立一個簡單的介紹婚紗的網站并取名喜多坊時尚時尚婚紗,專業(yè)介紹一些喜多坊婚紗的特色等。我們本次間的網站基本以粉紅為基點，粉紅是可愛清純的顏色，粉紅代表著幸福溫馨，所以本站以粉紅為風格，讓整個網站充滿愛的力量。

2.設計主頁。主頁的設計是整個網站的靈魂，構思導航欄的分類，然后是整體規(guī)劃，每一版塊都有其個性的色彩，清晰明了，便于閱讀瀏覽，我們構思大致

分幾部分，首頁，關于我們，婚紗禮服，量體裁衣，婚紗選購，公司門市，與我聯(lián)系，在線論壇8大板塊，每一板塊又分幾小部分，內容比較充分，多樣。確定導航欄的各個分類標題之后對于建立二級子網尤為重要，我們運用Photoshop CS3技術來設計出導航欄，制作切片，建立導航欄，將整體的主頁效果建立起來。

3.資料的搜集。主頁的導航欄設計好后，接下來就是對主頁導航欄的各個內容進行資料的收集，我們采用大量的資料收集再對資料進行塞選p圖，得到最適合導航欄內容的資料。素材的選擇，要符合網站的主題，圖片的大小要符合模板的輪廓，我們將不符合模板的用Photoshop處理編輯，然后放入站點底下，進行圖文的鏈接和排版。

4.各個子網頁的建立。我們設計好模板后只要在可編輯區(qū)依次編輯所需資料就可，運用模板建立子網頁少了很多工序，為我們節(jié)省大量的時間。盡管我們建立了模板，但我們在建立子網時很小心，因為一張圖片的大小插入就有可能破壞整個模板的結構尤其在使用表格時，因此我們對所插入的圖片和表格都得進行測量，做到不影響網站整體的美觀。

5.實現(xiàn)網頁間的鏈接。做好個格子網和首頁后，接下來就是通過模板的鏈接，將整個網站中的網頁鏈接起來，過程其實很簡單，主要是把要鏈接的文字和圖標選擇在選擇工具欄的鏈接按鈕最后選擇自己要鏈接的網頁單擊確定便可以了。做好這一步后，網站基本算是建好了。

6.向靜態(tài)網頁插入動態(tài)效果。在基本建好網頁中的插入層和時間軸，制作其動態(tài)效果，讓整個網頁充滿生機。我們在網上進行flash素材的收集，通過Flash CS3設計出主題下的風格動態(tài)效果。然后插入到靜態(tài)網頁中，使網頁更加生動形象。

六．實訓心得：

通過這周的學習實踐，在老師的指導下以大量明晰的操作步驟和典型的應用實例，使我們真正對所學的軟件融會貫通。我們結合年輕人心理制作了時尚婚紗網站，作為實訓的成果。其內容是多樣化的，制作網頁用的軟件是Deamweaver CS3軟件。它提供了網頁和表單的動態(tài)生成到網站的解決方案。主圖是一個網頁的門面，它能體現(xiàn)出這個網頁的整體風格。

制作網頁,首先是確定主題,經過再三考慮,就做了個關于婚紗的網站?？紤]到,現(xiàn)在城市普遍幸福感不高，加上寒冬，于是以幸福為論點擴展想到了結婚，想到了婚紗，想到了未來的美好城市生活，城市讓生活更美好，結婚讓生活更完整婚紗讓生活更多姿！想到這些，我們最后決定建立一個簡單的介紹都市婚紗的網站,讓這個冬天不再寒冷，讓我們回憶起那些幸福的日子。于是網站主題確立。

然后是整體規(guī)劃，每一版塊都有其個性的色彩，清晰明了，便于閱讀瀏覽，大致分幾部分，首頁，關于我們，婚紗禮服，量體裁衣，婚紗選購，公司門市，與我聯(lián)系，在線論壇，每一部分又分幾小部分，內容比較充分，多樣。

再后是收集資料與素材，大量瀏覽相關網站，收集關于婚紗的圖片，進行Photoshop CS3圖片處理和排版，插入好的文章和圖片等，還有參考一些好的網站的布局，特色，顏色搭配，背景圖等。

再后是設計網頁圖片，用flash制作動畫，用Photoshop制作靜態(tài)圖片。再后是建立站點，和制作網頁了，使用dreamweaver制作。

首頁內容精彩豐富，首頁主要是導航作用。首頁制作時，時刻考慮著網頁的基本原則：統(tǒng)一，連貫，分割，對比及和諧的原則，內容統(tǒng)一，都是為了主題服務，一個網站強調的就是一個整體，只有圍繞一個統(tǒng)一的目標所做的設計才是成功的；連貫，頁面之間關系連貫，統(tǒng)成一體；每版內容都自成一體，顏色各異，便于瀏覽；整個網頁有動有靜，顏色不同，形成對比，不呆板，富有生氣；顏色各異，但又不同之中又相同，渾然一體。

簡潔實用: 這是非常重要的，網絡特殊環(huán)境下，盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的，所以要去掉所有的冗余的東西。使用方便:同第一個是相一致的，滿足使用者的要求，網頁做得越適合使用，就越顯示出其功能美；頁面用色協(xié)調，布局符合形式美的要求: 布局有條理，充分利用美的形式，是網頁富有可欣賞性，提高檔次。當然雅俗共賞是人人都追求的。

利用我們所學的模板設計，制作更完美的頁面。將動態(tài)網頁與靜態(tài)網頁結合起來

再后，調試過程，好多次本來在Deamweaver CS3里好好的，把字調的好好的，位置很對，可在瀏覽器里御覽就出毛病了，不是靠上了，就是靠下了，經過再三調試，整理，加了好多表格，終于滿意了。

通過溫本周的實訓，發(fā)現(xiàn)自己還有很多的不足?？蚣艿膽煤茈y把握，切片也很難合理切割，當插入圖片的時候把原有的模板給撐破了，精確定位很重要。

因為學藝不精，所以不會網頁的代碼設計，只能通過網絡三劍客綜合使用。不過也實踐中也學到了很多知識，表格的嵌套是非常重要的，CSS樣式的應用也很便捷。還有一些行為中的效果也是蠻不錯的。所以這次實訓還是很有意義的。

第三篇：《網頁設計與制作》綜合實訓

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

一、概述：

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

二、網站內容：

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

三、版面及格式：

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

2、要求每個網頁都使用表格布局。

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

4、導航設計簡潔明了，不能有“死鏈接”，要保證能夠在網絡上瀏覽。

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

四、遞交方式：

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

4、遞交時必須把網頁中所有用到的圖片、聲音、動畫等都一起上傳到服務器。網頁的總容量一般不要大于3MB5、建議將網頁中的素材分類，建立不同的子目錄存放。

五、網頁評分標準:

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

1、主題鮮明，有關主題的內容豐富（30分）

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

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

4、其他內容如友情鏈接、相關資料等（5分）

5、插入的圖片等素材恰當、美觀（5分）

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

六、網頁制作特別注意事項：

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

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

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

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

第四篇：網頁設計與制作實訓報告[范文]

《網頁設計與制作》

實習報告

指導老師：

實習地點：

實習時間：

實習班級：

學生姓名：

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

② 學會制作在線調查系統(tǒng)。

③ 熟悉購物網站的主要功能和欄目。

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

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

二、實訓內容

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

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

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

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

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

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

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

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

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

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

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

數(shù)據(jù)，在服務器行為里為左側的表格添加重復區(qū)域和轉到詳細頁，制作記錄集導航條。

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

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

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

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

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

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

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

三、疑難解惑

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

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

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

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

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

⑤ 修改頁面點進去初始內容都一樣，“唯一鍵列”下拉列表中應選擇shpID。

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

四、實訓心得

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

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

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

第五篇：網頁設計與制作實訓報告

《Dreamweaver網頁設計與制作案例教程》

實訓報告

專 業(yè)： 計算機網絡技術 年 級： 2013級 姓 名： 學 號： 輔導老師：

制作電子商務類網站首頁

一、網站建設的前期準備工作

1、網站整體需求分析

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

4)網站建設資金及人員投入情況分析

2、確定網站風格

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

3、網站素材搜集

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

二、創(chuàng)建站點

1、網站建設的第一步是創(chuàng)建本地站點。

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

三、網站主頁制作

1.使用Div+CSS布局頁面

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

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

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

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

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

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

3.插入圖片

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

4.添加導航條

網頁導航條是非常重要的網頁元素，網頁間的跳轉，需要通過導航條來完成。

1）將光標定位在“nav” Div元素中，在其內部輸入列表項，并為列表項的各個單元設置超鏈接。設置情況如圖所示。

2）添加CSS樣式，需要在style.css文件中輸入相關代碼。#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;/*定義內邊距*/ } #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;/*定義內邊距*/ } #nav li a:hover { color:#ff0;/*定義字體顏色*/ background-color:red;/*定義背景顏色*/ 該樣式表使用列表項實現(xiàn)導航菜單功能。效果如圖所示。

5.推薦廠家

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

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

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

1）將光標置于div元素“#left”中，插入一個嵌套的div元素#sideBarLefta2，2）將光標置于DIV元素“banner”中，插入一個已經準備好的SWF元素。

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

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

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

1）將光標置于DIV元素“right”中，插入已經準備好的圖片service.jpg。如圖所示。

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

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

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

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

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

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

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