第一篇：實訓一 制作一個簡單的網(wǎng)頁

實訓一 創(chuàng)建和管理站點、制作站點首頁

實訓目標：用Dreamweaver制作一個簡單的網(wǎng)頁

一、用Dreamweaver創(chuàng)建和管理站點

（一）在D盤上創(chuàng)建“暢想未來”站點

在菜單欄中選擇“站點”→“新建站點”，在文本框中輸入網(wǎng)站的名稱“暢想未來”。

（二）對站點進行規(guī)劃

1．在文件面板中搭建站點的結(jié)構(gòu)

（1）在站點根文件夾下建立4個子文件夾“city”、“novel”、“outspace”和“travel”。在文件面板中右單擊站點“暢想未來”，選擇“新建文件夾”命令。

2）在文件夾“city”中建4個子文件夾“images”、“sound”、“swf”和“webpages”。

3）將文件夾“city”中的4個子文件夾分別復制到“novel”、“outspace”和“travel”中。6（（方法：依次選中“images”、“sound”、“swf”和“webpages”，然后按住Ctrl鍵，分別將其拖動到“novel”、“outspace”和“travel”中。

結(jié)果如下圖所示。

（二）設(shè)置網(wǎng)站首頁，重新搭建站點結(jié)構(gòu)

1．設(shè)置網(wǎng)站首頁

（1）右單擊站點的根文件夾，從彈出的快捷菜單中選擇“新建文件”命令。（2）將文件重命名為“index.html”。（3）將其設(shè)置成首頁。

2．重新搭建站點結(jié)構(gòu)

（1）將站點的根文件夾下的4個子文件夾“city”、“novel”、“outspace”和“travel”刪除。（2）在站點的根文件夾下新建2個子文件夾“images”和“webpages”，如下圖所示。

在Dreamweaver中打開文件“txt3_1.txt”，并將其另存為index.html。

二、設(shè)置index.html網(wǎng)頁屬性

選擇“修改”→“頁面屬性”，打開“頁面屬性”對話框。

（一）設(shè)置頁面外觀

在“分類”→“外觀”中按下圖設(shè)置“頁面字體”：宋體、“文本顏色”：#034881、“背景顏色”：#B8DCF4。

（二）設(shè)置頁面標題

在“分類”→“標題/編碼”中按下圖設(shè)置“標題”：暢想未來。

（三）按F12鍵，保存并預覽網(wǎng)頁。

三、制作index.html網(wǎng)頁

（一）編輯文本

1．編輯網(wǎng)頁中的文本。

按下圖編輯index.html網(wǎng)頁中的文本。

換行標記
的使用

HTML文件中任何位置只要使用了
標記，當文件顯示在瀏覽器中時，該位置之后的文字將顯示于下一行，該
標記就是起到換行的標記。段落標記

的使用

由

標記所標識和文字，代表同一個段落的文字。在瀏覽器中，不同段落文字間除了換行外，有時還會以一行空白加以間隔，以便區(qū)別出文字的不同段落，其語法如下：

文字

的有什么區(qū)別呢？通俗的講就是，它們在分行的時候
分得行比

分得行距比較大！

在HTML代碼中，
是換行符，表示強制性換到下一行。而

則是分段符，相當于回車，等同于兩個
。

Copyright ? 2007200x 暢想工作室，All Rights Reserved
如果您對我們的服務有任何意見或建議，請惠賜E-mail至:teach_ie@163.com
聯(lián)系電話：0755-12345678 聯(lián)系人：絲雨輕夢

2．設(shè)置文本格式

（1）在第一行前輸入2個空格，并去掉最后3行之間的空行，如下圖所示。

（2）將“未來都市”、“未來旅游”、“未來通訊”、“展望太空”、“科幻小說”設(shè)置為“標題2”，并為其添加項目符號。

（3）將“設(shè)為首頁”、“加入收藏”、“聯(lián)系我們”、“網(wǎng)站管理”設(shè)置為“標題5”。（4）將最后4行文本的對齊方式設(shè)置為“居中”。（5）將最后3行文本的顏色設(shè)置為灰色（#999999）。

3．添加和刪除中文字體

（1）添加“隸書”、“華文行楷”等中文字體。

（2）將“未來都市”、“未來旅游”、“未來通訊”、“展望太空”、“科幻小說”5行文字的字體設(shè)置為華文行楷。

（3）按F12，保存并預覽網(wǎng)頁。

（二）在頁面中插入和處理圖象

1．插入圖象

（1）在index.html頁面頂端插入圖象“img3_1.jpg”。

（a）將光標置于頁面左上角的起始處，然后按回車鍵，生成一個空行。

（b）在菜單欄中選擇“插入”→“圖象”命令，找到素材文件夾webcoursechapter03images中的圖象“img3_1.jpg”。注意：要將其復制到站點的“images”文件夾中。

（c）用同樣的方法，在第一段下面插入圖象“img3_2.jpg”，效果如下圖所示。

2．調(diào)整圖象“img3_1.jpg”、“img3_2.jpg”的對齊方式

（1）使圖象“img3_1.jpg”居中對齊。方法：選中圖象“img3_1.jpg”，在屬性面板中單擊“居中對齊”按鈕。

（2）使圖象“img3_2.jpg”左對齊。方法同上。3．調(diào)整圖象“img3_2.jpg”的周邊間距

選中圖象“img3_2.jpg”，按下圖設(shè)置圖象的垂直邊距和水平邊距。

4．為圖象“img3_2.jpg”添加提示文本：科幻圖象

方法：選中圖象“img3_2.jpg”，在“屬性”面板的“替換”文本框中輸入“科幻圖象”，然后按回車鍵。按F12，保存并預覽網(wǎng)頁，效果如下圖所示。

（三）插入水平線

1．在頁面中插入水平線

（1）將插入點置于“設(shè)為首頁”文本前。

（2）在菜單欄中選擇“插入”→“HTML”→“水平線”。

2．修改水平線

將水平線設(shè)置成居中對齊、寬：920像素、高：5像素。如下圖所示。

3．將水平線的顏色設(shè)置為藍色

（1）選中水平線。

（2）單擊“屬性”面板右側(cè)的“快速標簽編輯器”中輸入“color=”#024918””。

按鈕，打開“快速標簽編輯器”，如下圖所示，在其

（3）按F12鍵預覽，可以看到水平線變?yōu)樗{色了。

（四）插入特殊字符

1．在頁面頁腳插入版權(quán)字符“?”（Ctrl+Alt+c）

（1）刪除頁腳中的“？”。

（2）在菜單欄上選擇“插入”→“HTML”→“特殊字符”，從單出的子菜單中選擇“版權(quán)”。

2．改變欄目顏色

將“未來都市”、“未來旅游”、“未來通訊”、“展望太空”、“科幻小說”5行文本的顏色設(shè)置為與頂端“暢想未來”logo相同的顏色。

方法：先選中文本，然后在文本的“屬性”面板上單擊“文本顏色”按鈕，拖動鼠標移動滴管到所要設(shè)置的顏色上單擊即可，如下圖所示。

至此，本頁面已完成，完成后的效果如下。

四、實訓總結(jié)

（一）本實訓介紹了利用Dreamweaver創(chuàng)建站點的方法

1．建立站點，首先要規(guī)劃站點結(jié)構(gòu)，然后創(chuàng)建站點。2．其中重點介紹了利用“文件”面板管理站點文件的方法。

（二）制作一個簡單的網(wǎng)頁

1．設(shè)置頁面屬性 2．網(wǎng)頁中的基本元素

（1）在網(wǎng)頁中編輯文本 字體格式和段落格式（2）在網(wǎng)頁中插入圖片 圖片格式的設(shè)置

（3）在網(wǎng)頁中插入水平線 水平線格式的設(shè)置

（4）在網(wǎng)頁中插入特殊字符

五、作業(yè)

參照提供的作業(yè)結(jié)果，利用所給的素材文件，制作一個介紹臺灣音樂團體“信樂團”的網(wǎng)站，要求如下：

1．在Dreamweaver創(chuàng)建本地站點文件夾，將網(wǎng)頁用到的素材按類別復制到站點文件夾中。2．新建index.html文件，設(shè)置頁面背景圖象為bg.jpg，網(wǎng)頁標題為“信樂團”。3．插入基本頁面元素，包括文本、圖象、水平線和日期對象，效果如下圖所示。

4．對圖象進行適當?shù)恼{(diào)整，包括大小、對齊方式、與周邊對象的距離及環(huán)繞方式等，效果如下圖所示。5．對文本設(shè)置相應的字符格式和段落格式，效果如下圖所示。

第二篇：網(wǎng)頁制作實訓報告

《網(wǎng)站設(shè)計與制作》實訓報告

X學院XX班XXX號

一．實訓時間：

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

二．實訓地點：

XXX學院XXX班級

三．實訓組員：

XXX、XXX

四．實訓目標：

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

五．實訓策劃：

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

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

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

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

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

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

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

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

六．實訓心得：

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

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

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

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

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

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

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

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

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

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

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

第三篇：電子商務網(wǎng)頁制作實訓報告

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

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

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

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

第四篇：網(wǎng)頁與制作實訓論文范文

網(wǎng)頁實訓報告

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

組長：

組員：

指導老師：

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

實訓報告

實訓目的：

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

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

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

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

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

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

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

項目思路：

首先我們分為兩大塊，前臺頁面和后臺頁面。分別建文件夾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é)作能力，對網(wǎng)頁設(shè)計軟件DreamWeaver,Sublime,WampServer,NetBeans,PhotoShop,JavaScript的強大運用有了很大提高。也大大提高了自己分析問題，解決問題的能力。

不足之處：

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

總結(jié)：

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

第五篇：網(wǎng)頁制作實訓指導1-5

項目名稱：站點的建立

任課教師：翟英杰分組情況：1人/組實訓指導老師：翟英杰

實訓時間：2010年9月7日星期二 5、6（7、8）節(jié)；

實訓目的及理論依據(jù)：熟悉網(wǎng)頁制作基本流程和dw基本界面

實訓要求及操作規(guī)程：要求獨立完成實驗，由指導老師指導。

所用儀器設(shè)備/軟件：PC機；

實訓步驟

1、打開dw軟件

2、在菜單欄【站點】菜單中選擇【管理站點】，在彈出的【管理站點】對話框中點擊【新建】按鈕，出現(xiàn)【站點】和【FTP】兩個選項。

3、選擇【站點】彈出【未命名站點1的站點定義為】對話框，在【未命名站點1的站點定義為】中選擇【基本】選項卡。

4、文本框中填寫您站點的名字，單擊【下一步】按鈕，進入下一步。

5、選擇【不，我不想使用服務器技術(shù)】，單擊【下一步】。

6、選擇第一項：編輯我計算機的本地副本，完成后再上傳，也建議網(wǎng)絡(luò)初學者也采用此項，選擇要保存網(wǎng)站的物理路徑名。手工填寫或者點擊文件夾圖標選擇路徑都可以，單擊【下一步】按鈕，進入下一步。

5、【您如何連接到遠程服務器】現(xiàn)在，已經(jīng)為您的站點定義了一個本地根文件夾。暫時我們還不登陸遠程服務器，因此選項中選擇【無】。單擊【下一步】按鈕，進入下一步。

6、完成實訓體會：

大家開動腦筋，自己領(lǐng)悟*-*

項目名稱：文本的編輯 任課教師：翟英杰

分組情況：1人/組

實訓指導老師：翟英杰

實訓時間：2010年9月14日星期二5、6（7、8）節(jié)； 實訓目的及理論依據(jù)：熟悉、掌握在dw中編輯文本

實訓要求及操作規(guī)程：要求獨立完成實驗，由指導老師指導。所用儀器設(shè)備/軟件：PC機； 實訓步驟：

1：對文字進行顏色、大小、字體的設(shè)置 選中文字—》屬性下做編輯

2：加入一個背景色（也可以自己下載圖片做背景）頁面屬性—》背景顏色

3：進行段落設(shè)置（如分行等）

文本——》列表——》項目列表和編號列表 4：插入日期和水平線(進行顏色修改)插入——》HTML——》水平線 更改水平線的顏色

選中水平線——》代碼視圖——》color——》選擇所要顏色即可 實訓體會：

大家開動腦筋，自己領(lǐng)悟*-*

項目名稱：圖象的編輯 任課教師：翟英杰

分組情況：1人/組

實訓指導老師：翟英杰

實訓時間：2010年9月21日星期二5、6（7、8）節(jié)； 實訓目的及理論依據(jù)：熟悉在dw中對圖象的基本操作 實訓要求及操作規(guī)程：要求獨立完成實驗，由指導老師指導。所用儀器設(shè)備/軟件：PC機； 實訓步驟：

1、插入一張圖片

2、用一張圖片做背景 頁面屬性——》背景圖片

3、創(chuàng)建鼠標經(jīng)過圖象

1.在文檔窗口中，將插入點放置在要顯示鼠標經(jīng)過圖像的位置。從【插入】菜單中選擇【圖像】對象

2.在對話框中選擇原圖像和鼠標經(jīng)過圖像要顯示的圖片

3.選擇【文件】菜單【在瀏覽器中預覽】，測試鼠標經(jīng)過前和后的效果 實訓體會：

大家開動腦筋，自己領(lǐng)悟*-*

項目名稱：表格的應用 任課教師：翟英杰

分組情況：1人/組

實訓指導老師：翟英杰

實訓時間：2010年10月12日星期二5、6（7、8）節(jié)；

實訓目的及理論依據(jù)：熟悉在dw中表格的編輯，以及表格在布局中的重要性 實訓要求及操作規(guī)程：要求獨立完成實驗，由指導老師指導。所用儀器設(shè)備/軟件：PC機； 實訓步驟：

1、建一個導航欄：5列1行，背景色任選，顯示邊框。(表格)插入——》表格（設(shè)置為5列1行）邊框設(shè)為1 背景顏色（選取適合顏色）

2、建一個無邊框表格：5行1列。

應當注意的是在設(shè)置無邊框時邊框設(shè)為0即可3、4行2列的表格。每個單元格中各插入一幅圖片，并對圖片有文字的介紹 此處是圖片、表格和文本的結(jié)合使用，過程中應注意排版 實訓體會：

大家開動腦筋，自己領(lǐng)悟*-*

項目名稱：超級鏈接任課教師：翟英杰

分組情況：1人/組

實訓指導老師：翟英杰

實訓時間：2010年10月19日星期二5、6（7、8）節(jié)； 實訓目的及理論依據(jù)：學會運用超級鏈接

實訓要求及操作規(guī)程：要求獨立完成實驗，由指導老師指導。所用儀器設(shè)備/軟件：PC機； 實訓步驟：

1、打開dw2、輸入一段文字，使其鏈接到百度首頁

選中所要處理的文字——》鏈接文件，4)然后保存文件并預覽效果，5、設(shè)置一個錨點鏈接 1)插入】菜單下【命名錨記】

2)在彈出的【命名錨記】對話框中，輸入錨記（錨點）名稱如“茉莉飄香”點擊確定 3）選擇導航欄中的文字“茉莉飄香”，在【屬性】面板中的“鏈接”地址欄中，輸入一個符號“＃”和錨記名稱。這里輸入“＃茉莉飄香” 4）測試

6、鏈接到電子郵件

7、鏈接到下載文件實訓體會：

大家開動腦筋，自己領(lǐng)悟*-*