第一篇：實(shí)訓(xùn)一 制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)

實(shí)訓(xùn)一 創(chuàng)建和管理站點(diǎn)、制作站點(diǎn)首頁(yè)

實(shí)訓(xùn)目標(biāo)：用Dreamweaver制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)

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

（一）在D盤上創(chuàng)建“暢想未來(lái)”站點(diǎn)

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

（二）對(duì)站點(diǎn)進(jìn)行規(guī)劃

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

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

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

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

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

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

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

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

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

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

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

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

選擇“修改”→“頁(yè)面屬性”，打開“頁(yè)面屬性”對(duì)話框。

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

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

（二）設(shè)置頁(yè)面標(biāo)題

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

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

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

（一）編輯文本

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

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

換行標(biāo)記
的使用

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

的使用

由

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

文字

的有什么區(qū)別呢？通俗的講就是，它們?cè)诜中械臅r(shí)候
分得行比

分得行距比較大！

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

則是分段符，相當(dāng)于回車，等同于兩個(gè)
。

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

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

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

（2）將“未來(lái)都市”、“未來(lái)旅游”、“未來(lái)通訊”、“展望太空”、“科幻小說(shuō)”設(shè)置為“標(biāo)題2”，并為其添加項(xiàng)目符號(hào)。

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

3．添加和刪除中文字體

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

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

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

（二）在頁(yè)面中插入和處理圖象

1．插入圖象

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

（a）將光標(biāo)置于頁(yè)面左上角的起始處，然后按回車鍵，生成一個(gè)空行。

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

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

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

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

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

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

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

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

（三）插入水平線

1．在頁(yè)面中插入水平線

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

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

2．修改水平線

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

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

（1）選中水平線。

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

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

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

（四）插入特殊字符

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

（1）刪除頁(yè)腳中的“？”。

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

2．改變欄目顏色

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

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

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

四、實(shí)訓(xùn)總結(jié)

（一）本實(shí)訓(xùn)介紹了利用Dreamweaver創(chuàng)建站點(diǎn)的方法

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

（二）制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)

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

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

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

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

五、作業(yè)

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

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

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

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

《網(wǎng)站設(shè)計(jì)與制作》實(shí)訓(xùn)報(bào)告

X學(xué)院XX班XXX號(hào)

一．實(shí)訓(xùn)時(shí)間：

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

二．實(shí)訓(xùn)地點(diǎn)：

XXX學(xué)院XXX班級(jí)

三．實(shí)訓(xùn)組員：

XXX、XXX

四．實(shí)訓(xùn)目標(biāo)：

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

五．實(shí)訓(xùn)策劃：

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

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

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

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

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

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

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

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

六．實(shí)訓(xùn)心得：

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

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

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

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

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

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

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

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

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

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

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

第三篇：電子商務(wù)網(wǎng)頁(yè)制作實(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)，我也一樣，只是多了一種不舍得感覺，雖然我們?cè)趯?shí)訓(xùn)中也有些苦痛和煩惱，但是我會(huì)努力的克服自己所遇到的任何困難以及在老師熱心的幫助下我們很快的解決了自己遇到的一些困難。

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

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

我收獲頗豐，學(xué)到了很多知識(shí)，特別是提高了綜合分析應(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é)們的合作意識(shí)，提高了大家的應(yīng)用分析能力。

第四篇：網(wǎng)頁(yè)與制作實(shí)訓(xùn)論文范文

網(wǎng)頁(yè)實(shí)訓(xùn)報(bào)告

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

組長(zhǎng)：

組員：

指導(dǎo)老師：

實(shí)訓(xùn)目的………………………………………………………………………2 項(xiàng)目思路………………………………………………………………………3 項(xiàng)目準(zhǔn)備………………………………………………..…………………….4 前臺(tái)頁(yè)面主要代碼……………………………………………………………5 數(shù)據(jù)庫(kù)連接，確保登錄代碼…………………………………………………6 后臺(tái)頁(yè)面主要代碼…………………………………………….………………7 項(xiàng)目亮點(diǎn)………………………………………………………………….…..13 優(yōu)點(diǎn)和不足之處……………………………………………………………...13 實(shí)訓(xùn)總結(jié)…………………………………………………………………......14

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

實(shí)訓(xùn)目的：

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

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

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

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

5.具備獨(dú)立撰寫實(shí)訓(xùn)報(bào)告等科技文件的基本能力；

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

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

項(xiàng)目思路：

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

項(xiàng)目準(zhǔn)備：

news-info:

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

admin：

管理員登錄表名

user：

用戶注冊(cè)信息表名

news：

新聞信息表名

前臺(tái)（web）：

images：

js播放圖片；

img：

登錄頁(yè)面背景圖

ht.php：

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

Style：

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

config.php：

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

conn.php：

確保登錄成功

login.php：

登錄頁(yè)面

jQuery.js：

js代碼 后臺(tái)(admin):

登錄頁(yè)面(dl):

img:

背景圖 config.php

確保登錄成功 login.php

登錄頁(yè)面

admin：

conn.php

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

htsy.php

后臺(tái)首頁(yè)

index.php

后臺(tái)界面

left.php

框架左列表選項(xiàng)

news.add.php

添加新聞

news-del.php

news-upd.php

news-list.php

zcye.php

zcye-del.php

zcye-list.php

zcye-upd.php

1.前臺(tái)頁(yè)面主要代碼：

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

添加用戶

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

2.登錄頁(yè)面代碼：

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

4.確保登錄：

5.后臺(tái)界面代碼：

6.框架左列表代碼：

7.后臺(tái)首頁(yè)：

8.新聞列表代碼：

9.添加新聞：

10.刪除新聞：

11.修改新聞：

12.用戶列表：

13.添加用戶：

14.修改用戶：

15.刪除用戶：

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

項(xiàng)目亮點(diǎn)：

運(yùn)用了兩次js代碼來(lái)實(shí)現(xiàn)效果，使頁(yè)面更加生動(dòng)。同時(shí)也運(yùn)用了驗(yàn)證碼等一些小亮點(diǎn)。

優(yōu)點(diǎn)：

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

不足之處：

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

總結(jié)：

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

第五篇：網(wǎng)頁(yè)制作實(shí)訓(xùn)指導(dǎo)1-5

項(xiàng)目名稱：站點(diǎn)的建立

任課教師：翟英杰分組情況：1人/組實(shí)訓(xùn)指導(dǎo)老師：翟英杰

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

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

實(shí)訓(xùn)要求及操作規(guī)程：要求獨(dú)立完成實(shí)驗(yàn)，由指導(dǎo)老師指導(dǎo)。

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

實(shí)訓(xùn)步驟

1、打開dw軟件

2、在菜單欄【站點(diǎn)】菜單中選擇【管理站點(diǎn)】，在彈出的【管理站點(diǎn)】對(duì)話框中點(diǎn)擊【新建】按鈕，出現(xiàn)【站點(diǎn)】和【FTP】?jī)蓚€(gè)選項(xiàng)。

3、選擇【站點(diǎn)】彈出【未命名站點(diǎn)1的站點(diǎn)定義為】對(duì)話框，在【未命名站點(diǎn)1的站點(diǎn)定義為】中選擇【基本】選項(xiàng)卡。

4、文本框中填寫您站點(diǎn)的名字，單擊【下一步】按鈕，進(jìn)入下一步。

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

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

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

6、完成實(shí)訓(xùn)體會(huì)：

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

項(xiàng)目名稱：文本的編輯 任課教師：翟英杰

分組情況：1人/組

實(shí)訓(xùn)指導(dǎo)老師：翟英杰

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

實(shí)訓(xùn)要求及操作規(guī)程：要求獨(dú)立完成實(shí)驗(yàn)，由指導(dǎo)老師指導(dǎo)。所用儀器設(shè)備/軟件：PC機(jī)； 實(shí)訓(xùn)步驟：

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

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

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

文本——》列表——》項(xiàng)目列表和編號(hào)列表 4：插入日期和水平線(進(jìn)行顏色修改)插入——》HTML——》水平線 更改水平線的顏色

選中水平線——》代碼視圖——》color——》選擇所要顏色即可 實(shí)訓(xùn)體會(huì)：

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

項(xiàng)目名稱：圖象的編輯 任課教師：翟英杰

分組情況：1人/組

實(shí)訓(xùn)指導(dǎo)老師：翟英杰

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

1、插入一張圖片

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

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

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

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

3.選擇【文件】菜單【在瀏覽器中預(yù)覽】，測(cè)試鼠標(biāo)經(jīng)過前和后的效果 實(shí)訓(xùn)體會(huì)：

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

項(xiàng)目名稱：表格的應(yīng)用 任課教師：翟英杰

分組情況：1人/組

實(shí)訓(xùn)指導(dǎo)老師：翟英杰

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

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

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

2、建一個(gè)無(wú)邊框表格：5行1列。

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

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

項(xiàng)目名稱：超級(jí)鏈接任課教師：翟英杰

分組情況：1人/組

實(shí)訓(xùn)指導(dǎo)老師：翟英杰

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

實(shí)訓(xùn)要求及操作規(guī)程：要求獨(dú)立完成實(shí)驗(yàn)，由指導(dǎo)老師指導(dǎo)。所用儀器設(shè)備/軟件：PC機(jī)； 實(shí)訓(xùn)步驟：

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

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

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

6、鏈接到電子郵件

7、鏈接到下載文件實(shí)訓(xùn)體會(huì)：

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