《web網(wǎng)頁設(shè)計(jì)報(bào)告》由會(huì)員分享，可在線閱讀，更多相關(guān)《web網(wǎng)頁設(shè)計(jì)報(bào)告（16頁珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、
web 網(wǎng)頁設(shè)計(jì)
專 業(yè)
班 級(jí)
姓 名
物流工程學(xué)院
物流 1301
李維源
學(xué) 號(hào)
2016
年 5 月
4 日
第一部分 : 實(shí)訓(xùn)目的
21 世紀(jì)是一個(gè)信息時(shí)代， Internet 已經(jīng)進(jìn)入人們生活與工作的各方面，而網(wǎng)頁作為
Internet 信息傳遞的重要載體， 其重要也日趨突出。 所以實(shí)訓(xùn)的目的就是要我們更好的掌
握好這一學(xué)期的網(wǎng)頁知識(shí)和提高自己的動(dòng)手能力，并且上傳到網(wǎng)上去，讓更多人認(rèn)識(shí)我，
更好的宣傳自己。
2、
第二部分 : 實(shí)訓(xùn)準(zhǔn)備
通過一個(gè)學(xué)期的 web網(wǎng)頁設(shè)計(jì)課程的學(xué)習(xí)，我終于明白我們?yōu)g覽的每個(gè)漂亮的網(wǎng)
頁是怎么做出來的，我也想自己親手來做自己的個(gè)人網(wǎng)站。在做個(gè)人網(wǎng)站之前，我做以下
準(zhǔn)備：理清自己的思緒，想清楚自己的網(wǎng)站設(shè)計(jì)，做模板，找素材，進(jìn)行站點(diǎn)的規(guī)劃和素
材、資料的收集，要按照制作網(wǎng)站的步驟一步一步來完成。
第三部分 : 實(shí)訓(xùn)要求
1、主題鮮明、內(nèi)容充實(shí)；顏色清新、舒適、結(jié)構(gòu)合理；
2、導(dǎo)航清楚、欄目合理、層次分明、使用方便
3、設(shè)計(jì) 8 至 15 個(gè)頁面。內(nèi)含：用戶注冊(cè)，登錄系統(tǒng)，留言系統(tǒng)、統(tǒng)計(jì)在線人數(shù)，
設(shè)為首頁、加為收藏等
3、動(dòng)態(tài)網(wǎng)頁內(nèi)容。
第四部分：個(gè)人網(wǎng)站的總體規(guī)劃和步驟
1． 設(shè)計(jì)的思路
我的個(gè)人網(wǎng)站主要是以綠為主，以淡色為輔。主要是希望所有的朋友看到這個(gè)空間能
一種和諧、安寧、充滿生機(jī)的感覺。得到心靈的慰藉！
2． 綠色網(wǎng)站的意義
我設(shè)計(jì)的這個(gè)網(wǎng)站主要是給人輕松舒爽、賞心悅目的感覺，讓人們置身于一種美麗
大自然的意境中 ，明快而錯(cuò)落的綠，讓人仿佛來到青山翠谷。
網(wǎng)站的總體風(fēng)格
網(wǎng)站的總體風(fēng)格主要是以綠色為主，以淡色為輔，充滿活力，生機(jī)。具有個(gè)性色彩。
網(wǎng)站的布局其實(shí)很簡(jiǎn)單，主要是做好一個(gè)模版，模版做好框架了，那網(wǎng)站就初步形成
4、
了，雖然主要框架做好了，但是也不要高興得太早哦，但是你也要想清楚怎樣把整個(gè)界面
搭配得更具有個(gè)性化。首先，在框架的最 top 要插入一個(gè)能體現(xiàn)你個(gè)人網(wǎng)站的主圖。然后
在主圖的下面插入按鈕導(dǎo)航條，之后下面就插入自己想要的風(fēng)格，雖然用模版做出來的風(fēng)
格都非常相似，但是各個(gè)頁面都具有各自的特色，讓我們感受到自己的空間的個(gè)性。
綠色網(wǎng)站的內(nèi)容結(jié)構(gòu)也很簡(jiǎn)單，分類清楚。頁面鏈接的層次也很明確，訪問者可以很
明確的感受到制作網(wǎng)站的人的心情和性格。
綠色網(wǎng)站的主要色調(diào)是以綠色為主。鮮艷的綠色是一種非常美麗、優(yōu)雅的顏色，它生
機(jī)勃勃，象征著生命。綠色寬容
5、、大度，幾乎能容納所有的顏色。綠色的用途極為廣闊，
無論是童年、青年、中年、還是老年，使用綠色決不失其活潑、大方。以淡色為輔，兩種
顏色的結(jié)合更體現(xiàn)出了青春與活力。
淡綠色網(wǎng)站主要采用的是環(huán)型結(jié)構(gòu)，每一個(gè)頁面連接另一個(gè)頁面，使各個(gè)頁面能方便
的跳轉(zhuǎn)。
4 網(wǎng)站的分析與設(shè)計(jì)
設(shè)計(jì)一個(gè)個(gè)人網(wǎng)站 , 主要需要考慮兩個(gè)方面的因素 :
1. 速度 : 反應(yīng)出用戶訪問網(wǎng)站頁面的速度。主頁是經(jīng)常被訪問的頁面，最好把每頁的風(fēng)格統(tǒng)一起來，例如：導(dǎo)航部分最好放在每頁相同的位置，便于在每個(gè)頁面中的跳轉(zhuǎn)。
2．布局：是個(gè)人網(wǎng)站具有吸引力的根本所在，它主要說的是信息顯
6、示的視覺效果。
5．規(guī)劃站點(diǎn)
站點(diǎn)規(guī)劃是設(shè)計(jì)站點(diǎn)前的一個(gè)重要步驟。 合理地規(guī)劃站點(diǎn)對(duì)以后站點(diǎn)的設(shè)計(jì)甚至網(wǎng)站
的制作會(huì)有事半功倍的效果。
4．1導(dǎo)航草圖的制作有利于理清思路，避免在制作網(wǎng)站的過程中亂了方寸。如圖
4-1 所
示就是個(gè)人粉色網(wǎng)站的初始導(dǎo)航草圖。
李杰鵬網(wǎng)站的首頁
首
我
的
相
留
日
我
頁
簡(jiǎn)
冊(cè)
介
言
記
的
板
音
樂
7、
圖 4-1 導(dǎo)航圖
在導(dǎo)航草圖中，網(wǎng)站首頁下面有 6 個(gè)二級(jí)網(wǎng)頁。各網(wǎng)頁主要內(nèi)容如下：
首頁：總述。
我的簡(jiǎn)介：個(gè)人資料。
相冊(cè)：包括了我自己的相冊(cè)，家人相冊(cè)、朋友相冊(cè)、明星相冊(cè)和漫畫圖片。
留言板： 是訪問我的朋友其中可以寫上姓名、聯(lián)系方式和對(duì)我的網(wǎng)站的看法。讓朋友給我留言，增進(jìn)彼此的了解與交流。
日記：是用框架素材的，有我的作品，最新自己日記，我收藏的文章，動(dòng)畫效果，文字飄動(dòng)，供訪問者觀賞。
音樂：有我最喜歡的
8、音樂，我收藏的音樂，可以播放，帶歌詞，下
載，有飄動(dòng)圖片，共訪問者分享。
4．2 創(chuàng)建站點(diǎn)文件夾
合理地創(chuàng)建站點(diǎn)文件夾可將網(wǎng)站文檔分門別類，井井有條地放置其
中，這對(duì)以后網(wǎng)站的制作是極其有利的。創(chuàng)建“綠色”網(wǎng)站的站點(diǎn)文件夾的
具體操作如下：
步驟 1 在本地磁 E 盤創(chuàng)建一個(gè)文件夾， 該文件夾在創(chuàng)建動(dòng)態(tài)站點(diǎn)時(shí)將作
為站點(diǎn)的根目錄。這里在 E盤下創(chuàng)建一個(gè)名為黃裕福個(gè)人網(wǎng)站的文件夾。
步驟 2 在黃裕福個(gè)人網(wǎng)站文件夾內(nèi)創(chuàng)建不同功能的文件來， 文件夾分別
命名為圖片素材庫 , 按鈕素材，我的主頁，我
9、的檔案，登陸注冊(cè)，相冊(cè)， 日記，
音樂 8 個(gè)文件夾，并將對(duì)應(yīng)的素材放到各自的文件夾中。
4．1 創(chuàng)建站點(diǎn)
步驟 1 進(jìn)入 Dreamweaver 8 工作界面后，選擇“站點(diǎn)” / “新建站點(diǎn)”命令彈出“未命名站點(diǎn) 1 的站點(diǎn)定義為”對(duì)話框。
步驟 2 在該對(duì)話框中的 “基本” 選項(xiàng)卡中的 “ 您打算為您的站點(diǎn)起什么名字？”文本框中輸入 hyfu
步驟 2 單擊“下一步”按鈕，在彈出的對(duì)話框中選中“是，我想使用服
務(wù)器技術(shù)”，在“哪種種服務(wù)器技術(shù)？”下拉列表中選擇“ ASP VBScript ”。
步驟 3 單擊“下一步”按
10、鈕，在彈出的對(duì)話框中選擇在開發(fā)過程中如何使用文件，這里選中“在本地進(jìn)行編輯和測(cè)試” ，在“你將把文件存儲(chǔ)在計(jì)算機(jī)上的什么位置？”文本框中輸入 F:\ index\
步驟 4 在彈出的對(duì)話框的“您應(yīng)該使用什么 URL來瀏覽站點(diǎn)的根目錄？”中輸入 , 輸完后，單擊“測(cè)試 URL”按鈕。如果這時(shí)它提醒你 URL前綴測(cè)試成功，點(diǎn)擊“確定”按鈕，你就可以進(jìn)入下一步了，否則的話，你再按照前面
的步驟檢查站點(diǎn)出現(xiàn)的問題。
步驟 5 單擊“下一步”按鈕，在對(duì)話框中選擇“否” 。
步驟 6 單擊“下一步”按鈕，點(diǎn)擊“完成”按鈕即可完成本地站點(diǎn)的創(chuàng)
建
11、，這時(shí)，創(chuàng)建的站點(diǎn)就顯示在“文件”面板中了
如圖所示
4．4 首頁的布局
步驟 1 選擇“布局模式”，將頁面布局為如圖 4-3 所示
圖 4-3
步驟 2 在第 1 行第 1 列里插入一張主要的圖片。
步驟 3 在第 2 行第 2 列里面插入導(dǎo)航條。
步驟 4 在相應(yīng)的位置插入相應(yīng)的圖片的 Flash 影片。
步驟 5 在第 2 行第 1 列中插入一個(gè)表單， 在表單中插入一個(gè) 4 行 2 列的表格，
輸入相應(yīng)的信息如圖 4-4 所示
圖 4-4
步驟 6 新建一個(gè)數(shù)據(jù)庫文件， 在其中輸
12、入用戶名和密碼， 在設(shè)置一個(gè)主鍵保
存退出（注意：再創(chuàng)建服務(wù)器行為時(shí)必須把數(shù)據(jù)庫關(guān)閉，否則會(huì)出現(xiàn)錯(cuò)誤）
步驟 7 還有就是創(chuàng)建一個(gè)注冊(cè)動(dòng)態(tài)網(wǎng)頁如圖 4-4 所示
4-5
步驟 8 先添加數(shù)據(jù)源， 在登陸界面創(chuàng)建一個(gè)登陸用戶的服務(wù)器行為， 之后在
注冊(cè)界面中創(chuàng)建一個(gè)插入記錄服務(wù)器行為。
步驟 9 在相信的地方插入幾張可愛的漫畫，之后在創(chuàng)建它的滾動(dòng)方式，代碼
為（“marquee ondirection= ”right ”>）還要加一個(gè)結(jié)束標(biāo)記
13、() 注冊(cè)登錄與留言板提交的工作流程圖
首頁就完成
了
4．5 制作其
它頁面
和制作
其他首頁一
樣，在布局
模式中進(jìn)行
布局，插入相應(yīng)的圖片或 flash 。
4．6 制作留言板
留言板的設(shè)計(jì)比其它幾個(gè)網(wǎng)頁都要復(fù)雜一點(diǎn)，如果沒有搞好的話就會(huì)出
現(xiàn)差錯(cuò)，其中自己做留言板的時(shí)候就出現(xiàn)過很多差錯(cuò)不是預(yù)覽不出就是跳轉(zhuǎn)
不過來，最后經(jīng)過老師的提點(diǎn)終于把一個(gè)一個(gè)的錯(cuò)誤給找出來了。
步驟 1 插入模板，在模板的第 1 列第 1 行插入一個(gè)主要
14、圖片
步驟 2 在第 2 行第 2 列插入導(dǎo)航條
步驟 3 在第 3 行第 2 列插隊(duì)入一個(gè)表單，在表單中插入一個(gè)
5 行
2 列的
表格
步驟 3 做完了相應(yīng)的操做之后就保存，保存完之后再另存為一個(gè)一模一樣的網(wǎng)頁，改一下名字，點(diǎn)擊確定
步驟 4 創(chuàng)建一個(gè)數(shù)據(jù)庫文件，其中輸入姓名、性別、電話、 E-mail 、QQ留言，在姓名的字段中添加一個(gè)主鍵，單擊保存。
步驟 4 在留
15、言板中添加數(shù)據(jù)源，在添加插入記錄的服務(wù)器行為步驟 5 在另外一個(gè)留言板中，添加記錄集和綁定服務(wù)器行為。
步驟 6 在插入菜單 - 應(yīng)用程序?qū)ο笮巫?- 記錄集分頁，插入一個(gè)記錄集分
頁
4．7 設(shè)為首頁、我的信箱、加為收藏夾
步驟 1 在 index1 中輸入設(shè)為首頁、我的信箱、加為收藏夾的字樣
步驟 2 選中設(shè)為首頁字樣，在鏈接處輸入一個(gè)空鏈接，切換到代碼視圖，
在代碼視圖中輸入代碼，代碼如下：
步驟 3 選中加為收藏夾字樣， 在鏈接處輸入一個(gè)空鏈接， 切換到代碼視圖，
在代碼視圖中輸入代碼，代碼如下：
16、
制作在線人數(shù)
步驟 1 新建一個(gè)網(wǎng)頁，在代碼視圖中插入代碼，代碼如下：
步驟 2 在網(wǎng)頁中，在相應(yīng)的位置輸入在線人數(shù)為：
步驟 3 在網(wǎng)頁中，在代碼視圖中插入代碼，代碼如下：
<%=application("sum")%>
4．9 制作聊天室
步驟 1 新建一個(gè)動(dòng)態(tài)頁面 插入一個(gè)表單，在表單中插入一個(gè) 3 行 2 列的表
格輸入相應(yīng)的文安，插入相應(yīng)的按鈕和文字安段。
步驟 2 “文件” / “保存”，在彈出的對(duì)話框中輸入 login1 保存
步驟 3 “文件“ / ”新建“
18、在彈出的對(duì)話框中選則常規(guī)中選擇”框架集“，
選中”下方固定“的框架集 單擊”創(chuàng)建“
步驟 4 “文件“ / ”框架集另存為“分別保存 main1、sponse1 、display1
“
步驟 5 在 display1 網(wǎng)頁中輸入” 歡迎進(jìn)入我的聊天室“
步驟 6 在“插入“ / ”HTML“/ ”水平線“
步驟 7 在到代碼視圖中插入代碼，代碼如下：
<%
(application("show"))
%>
步驟 8 切換到 sponse1 網(wǎng)頁，在網(wǎng)頁中插入一個(gè)表單在輸入“我要發(fā)言” ，
19、
在插入一個(gè)文本字段，在添加兩個(gè)按鈕
步驟 9 在到 sponse1 的代碼視圖中輸入代碼，代碼如下：
<%
if ("message")<>"" then
message1=trim("message"))
()
xm3=session("xm2")
application("show")=xm3 & " 在" & " 說： " & message1 & "
"_
&application("show")
()
end if
%>
步驟 10 切換到
20、main1 網(wǎng)頁中，在代碼視圖中輸入代碼，代碼如下：
<%
if ("xm1")=""or ("mm")="" then
(" 對(duì)不起 , 你的資料不全 ! 請(qǐng)返回重填 " )
else
session("xm2")=trim("xm1"))
end if
%>
制作音樂播放效果
音樂頁面如圖 4-7
在站點(diǎn)下新建一個(gè)音樂文件夾作為播放網(wǎng)頁， 在播放網(wǎng)頁中插入所需的背景
音樂，代碼設(shè)計(jì)為：
21、loop="1"> 。
在播放頁中插入方框素材，設(shè)置方框大小，將相對(duì)應(yīng)的歌詞插入方框中，給
歌詞設(shè)置為向上移動(dòng)效果；并且設(shè)置移動(dòng)位置大小和速度。
代碼為：
web網(wǎng)頁設(shè)計(jì)報(bào)告
