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