網(wǎng)頁設(shè)計實(shí)訓(xùn)報告

1、網(wǎng)頁設(shè)計課程設(shè)計報告 設(shè)計題目： 專 業(yè)： 學(xué)生姓名： 學(xué) 號: 起迄日期： 指導(dǎo)教師： 目錄第一部分:實(shí)訓(xùn)目的21世紀(jì)是一。第二部分:實(shí)訓(xùn)準(zhǔn)備 通過一個學(xué)期的web網(wǎng)頁設(shè)計課程的學(xué)習(xí)，我終于明白我們?yōu)g覽的每個漂亮的網(wǎng)頁是怎么做出來的，我也想自己親手來做自己的個人網(wǎng)站。在做個人網(wǎng)站之前，我做以下準(zhǔn)備：理清自己的思緒，想清楚自己的網(wǎng)站設(shè)計，做模板，找素材，進(jìn)行站點(diǎn)的規(guī)劃和素材、資料的收集，要按照制作網(wǎng)站的步驟一步一步來完成。第三部分:實(shí)訓(xùn)要求1、主題鮮明、內(nèi)容充實(shí)；顏色清新、舒適、結(jié)構(gòu)合理；2、導(dǎo)航清楚、欄目合理、層次分明、使用方便3、設(shè)計8至15個頁面。內(nèi)含：用戶注冊，登錄系統(tǒng)，留言

2、系統(tǒng)、統(tǒng)計在線人數(shù)，設(shè)為首頁、加為收藏等動態(tài)網(wǎng)頁內(nèi)容。第四部分：個人網(wǎng)站的總體規(guī)劃和步驟 1 設(shè)計的思路！2 網(wǎng)站的意義 3. 網(wǎng)站的總體風(fēng)格 。4. 網(wǎng)站的分析與設(shè)計設(shè)計一個個人網(wǎng)站,主要需要考慮兩個方面的因素:1.速度:反應(yīng)出用戶訪問網(wǎng)站頁面的速度。主頁是經(jīng)常被訪問的頁面，最好把每頁的風(fēng)格統(tǒng)一起來，例如：導(dǎo)航部分最好放在每頁相同的位置，便于在每個頁面中的跳轉(zhuǎn)。2布局：是個人網(wǎng)站具有吸引力的根本所在，它主要說的是信息顯示的視覺效果。5規(guī)劃站點(diǎn)站點(diǎn)規(guī)劃是設(shè)計站點(diǎn)前的一個重要步驟。合理地規(guī)劃站點(diǎn)對以后站點(diǎn)的設(shè)計甚至網(wǎng)站的制作會有事半功倍的效果。51 導(dǎo)航草圖的制作有利于理清思路，避免在制作網(wǎng)站的

3、過程中亂了方寸。如圖4-1所示就是個人粉色網(wǎng)站的初始導(dǎo)航草圖。相冊留言板日記我的簡介首頁首頁我的音樂 圖4-1 導(dǎo)航圖在導(dǎo)航草圖中，網(wǎng)站首頁下面有6個二級網(wǎng)頁。各網(wǎng)頁主要內(nèi)容如下：首頁：總述。我的簡介：個人資料。相冊：包括了我自己的相冊，家人相冊、朋友相冊、明星相冊和漫畫圖片。留言板： 是訪問我的朋友其中可以寫上姓名、聯(lián)系方式和對我的網(wǎng)站的看法。讓朋友給我留言，增進(jìn)彼此的了解與交流。日記：是用框架素材的，有我的作品，最新自己日記，我收藏的文章，動畫效果，文字飄動，供訪問者觀賞。音樂：有我最喜歡的音樂，我收藏的音樂，可以播放，帶歌詞，下載，有飄動圖片，共訪問者分享。52 創(chuàng)建站點(diǎn)文件夾 合理地創(chuàng)

4、建站點(diǎn)文件夾可將網(wǎng)站文檔分門別類，井井有條地放置其中，這對以后網(wǎng)站的制作是極其有利的。創(chuàng)建“綠色”網(wǎng)站的站點(diǎn)文件夾的具體操作如下：步驟1 在本地磁E盤創(chuàng)建一個文件夾，該文件夾在創(chuàng)建動態(tài)站點(diǎn)時將作為站點(diǎn)的根目錄。這里在E盤下創(chuàng)建一個名為黃裕福個人網(wǎng)站的文件夾。步驟2 在黃裕福個人網(wǎng)站文件夾內(nèi)創(chuàng)建不同功能的文件來，文件夾分別命名為圖片素材庫,按鈕素材，我的主頁，我的檔案，登陸注冊，相冊，日記，音樂8個文件夾，并將對應(yīng)的素材放到各自的文件夾中。41創(chuàng)建站點(diǎn) 步驟1 進(jìn)入Dreamweaver 8工作界面后，選擇“站點(diǎn)”/“新建站點(diǎn)”命令彈出“未命名站點(diǎn)1的站點(diǎn)定義為”對話框。步驟2 在該對話框中的“

5、基本”選項(xiàng)卡中的“ 您打算為您的站點(diǎn)起什么名字？”文本框中輸入 hyfu步驟2 單擊“下一步”按鈕，在彈出的對話框中選中“是，我想使用服務(wù)器技術(shù)”，在“哪種種服務(wù)器技術(shù)？”下拉列表中選擇“ASP VBScript”。步驟3 單擊“下一步”按鈕，在彈出的對話框中選擇在開發(fā)過程中如何使用文件，這里選中“在本地進(jìn)行編輯和測試”，在“你將把文件存儲在計算機(jī)上的什么位置？”文本框中輸入F: index步驟4 在彈出的對話框的“您應(yīng)該使用什么URL來瀏覽站點(diǎn)的根目錄？”中輸入http:/localhost/index/ ,輸完后，單擊“測試URL”按鈕。如果這時它提醒你URL前綴測試成功，點(diǎn)擊“確定”按鈕

6、，你就可以進(jìn)入下一步了，否則的話，你再按照前面的步驟檢查站點(diǎn)出現(xiàn)的問題。步驟5 單擊“下一步”按鈕，在對話框中選擇“否”。步驟6 單擊“下一步”按鈕，點(diǎn)擊“完成”按鈕即可完成本地站點(diǎn)的創(chuàng)建，這時，創(chuàng)建的站點(diǎn)就顯示在“文件”面板中了如圖所示44首頁的布局步驟1 選擇“布局模式”，將頁面布局為如圖4-3所示 圖4-3步驟2 在第1行第1列里插入一張主要的圖片。步驟3 在第2行第2列里面插入導(dǎo)航條。步驟4 在相應(yīng)的位置插入相應(yīng)的圖片的Flash影片。步驟5 在第2行第1列中插入一個表單，在表單中插入一個4行2列的表格，輸入相應(yīng)的信息如圖4-4所示 圖4-4 步驟6 新建一個數(shù)據(jù)庫文件，在其中輸入用戶

7、名和密碼，在設(shè)置一個主鍵保存退出（注意：再創(chuàng)建服務(wù)器行為時必須把數(shù)據(jù)庫關(guān)閉，否則會出現(xiàn)錯誤）步驟7 還有就是創(chuàng)建一個注冊動態(tài)網(wǎng)頁如圖4-4所示 4-5步驟8 先添加數(shù)據(jù)源， 在登陸界面創(chuàng)建一個登陸用戶的服務(wù)器行為，之后在注冊界面中創(chuàng)建一個插入記錄服務(wù)器行為。步驟9 在相信的地方插入幾張可愛的漫畫，之后在創(chuàng)建它的滾動方式，代碼為（“marquee ondirection=”right”>）還要加一個結(jié)束標(biāo)記(</marquee>)注冊登錄與留言板提交的工作流程圖首頁就完成了45制作其它頁面和制作其他首頁一樣，在布局模式中進(jìn)行布局，插入相應(yīng)的圖片或flash。46制作留言板留言板

8、的設(shè)計比其它幾個網(wǎng)頁都要復(fù)雜一點(diǎn)，如果沒有搞好的話就會出現(xiàn)差錯，其中自己做留言板的時候就出現(xiàn)過很多差錯不是預(yù)覽不出就是跳轉(zhuǎn)不過來，最后經(jīng)過老師的提點(diǎn)終于把一個一個的錯誤給找出來了。步驟1 插入模板，在模板的第1列第1行插入一個主要圖片步驟2 在第2行第2列插入導(dǎo)航條步驟3 在第3行第2列插隊(duì)入一個表單，在表單中插入一個5行2列的表格步驟3 做完了相應(yīng)的操做之后就保存，保存完之后再另存為一個一模一樣的網(wǎng)頁，改一下名字，點(diǎn)擊確定步驟4 創(chuàng)建一個數(shù)據(jù)庫文件，其中輸入姓名、性別、電話、E-mail、QQ留言，在姓名的字段中添加一個主鍵，單擊保存。步驟4 在留言板中添加數(shù)據(jù)源，在添加插入記錄的服務(wù)器行為

9、步驟5 在另外一個留言板中，添加記錄集和綁定服務(wù)器行為。步驟6 在插入菜單-應(yīng)用程序?qū)ο笮巫?記錄集分頁，插入一個記錄集分頁47設(shè)為首頁、我的信箱、加為收藏夾步驟1 在index1中輸入設(shè)為首頁、我的信箱、加為收藏夾的字樣步驟2 選中設(shè)為首頁字樣，在鏈接處輸入一個空鏈接，切換到代碼視圖，在代碼視圖中輸入代碼，代碼如下：onClick="this.style.behavior='url(#default#homepage)'this.sethomepage('http;/www.我的域名.com');"步驟3 選中加為收藏夾字樣，在鏈接處輸入一

10、個空鏈接，切換到代碼視圖，在代碼視圖中輸入代碼，代碼如下：onClick="window.external.addfavorite('http:/www.我的域名.com','mysite')"步驟4 選中我的信箱字樣，在屬性面板的鏈接中輸入：mailto:08wangluohuangyufu4.8制作在線人數(shù)步驟1 新建一個global.asa網(wǎng)頁，在代碼視圖中插入代碼，代碼如下：<script language="vbscript" runat=server>sub application_onstart(

11、)application("sum")=0end subsub session_onstart()session.Timeout=1application("sum")=application("sum")+1end subsub session_onend()application("sum")=application("sum")-1end sub</script>步驟2 在index.asp網(wǎng)頁中，在相應(yīng)的位置輸入在線人數(shù)為：步驟3 在index.asp網(wǎng)頁中，在代碼視圖中插入

12、代碼，代碼如下：<%=application("sum")%>49制作聊天室步驟1 新建一個動態(tài)頁面 插入一個表單，在表單中插入一個3行2列的表格輸入相應(yīng)的文安，插入相應(yīng)的按鈕和文字安段。步驟2 “文件”/“保存”，在彈出的對話框中輸入login1保存步驟3 “文件“/”新建“ 在彈出的對話框中選則常規(guī)中選擇”框架集“，選中”下方固定“的框架集 單擊”創(chuàng)建“步驟4 “文件“/”框架集另存為“分別保存main1、sponse1 、display1“步驟5 在display1網(wǎng)頁中輸入” 歡迎進(jìn)入我的聊天室“步驟6 在“插入“/”HTML“/”水平線“步驟7 在到代

13、碼視圖中插入代碼，代碼如下：<%response.write(application("show")%>步驟8 切換到sponse1網(wǎng)頁，在網(wǎng)頁中插入一個表單在輸入“我要發(fā)言”，在插入一個文本字段，在添加兩個按鈕步驟9 在到sponse1的代碼視圖中輸入代碼，代碼如下：<%if request.form("message")<>"" thenmessage1=trim(request.form("message")application.Lock()xm3=session("

14、xm2")application("show")=xm3 & "在" & "說：" & message1 & "<br>"_&application("show")application.UnLock()end if%>步驟10 切換到main1網(wǎng)頁中，在代碼視圖中輸入代碼，代碼如下：<%if request.form("xm1")=""or request.form("m

15、m")="" thenresponse.write("對不起,你的資料不全!請返回重填" )elsesession("xm2")=trim(request.form("xm1") end if%>4.10制作音樂播放效果音樂頁面如圖4-7在站點(diǎn)下新建一個音樂文件夾作為播放網(wǎng)頁，在播放網(wǎng)頁中插入所需的背景音樂，代碼設(shè)計為：<head><bgsound src="童安格 - 明天你是否依然愛我.mp3" loop="1">。在播放頁中插入方框素材，設(shè)置方框大小，將相對應(yīng)的歌詞插入方框中，給歌詞設(shè)置為向上移動效果；并且設(shè)置移動位置大小和速度。代碼為：<marquee behavior="scroll" width="200" height="180" direction=&quo