web網(wǎng)頁(yè)設(shè)計(jì)報(bào)告

web 網(wǎng)頁(yè)設(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)頁(yè)作為Internet信息傳遞的重要載體， 其重要也日趨突出。 所以實(shí)訓(xùn)的目的就是要我們更好的掌握好這一學(xué)期的網(wǎng)頁(yè)知識(shí)和提高自己的動(dòng)手能力，并且上傳到網(wǎng)上去，讓更多人認(rèn)識(shí)我，更好的宣傳自己。第二部分 : 實(shí)訓(xùn)準(zhǔn)備通過(guò)一個(gè)學(xué)期的web網(wǎng)頁(yè)設(shè)計(jì)課程的學(xué)習(xí)，我終于明白我們?yōu)g覽的每個(gè)漂亮的網(wǎng)頁(yè)是怎么做出來(lái)的，我也想自己親手來(lái)做自己的個(gè)人網(wǎng)站。在做個(gè)人網(wǎng)站之前，我做以下準(zhǔn)備：理清自己的思緒，想清楚自己的網(wǎng)站設(shè)計(jì)，做模板，找素材，進(jìn)行站點(diǎn)的規(guī)劃和素材、資料的收集，要按照制作網(wǎng)站的步驟一步一步來(lái)完成。第三部分 : 實(shí)訓(xùn)要求1、主題鮮明、內(nèi)容充實(shí)；顏色清新、舒適、結(jié)構(gòu)合理；2、導(dǎo)航清楚、欄目合理、層次分明、使用方便3、設(shè)計(jì) 8 至 15 個(gè)頁(yè)面。內(nèi)含：用戶注冊(cè)，登錄系統(tǒng)，留言系統(tǒng)、統(tǒng)計(jì)在線人數(shù)，設(shè)為首頁(yè)、加為收藏等動(dòng)態(tài)網(wǎng)頁(yè)內(nèi)容。第四部分：個(gè)人網(wǎng)站的總體規(guī)劃和步驟1設(shè)計(jì)的思路我的個(gè)人網(wǎng)站主要是以綠為主，以淡色為輔。主要是希望所有的朋友看到這個(gè)空間能一種和諧、安寧、充滿生機(jī)的感覺(jué)。得到心靈的慰藉！2綠色網(wǎng)站的意義我設(shè)計(jì)的這個(gè)網(wǎng)站主要是給人輕松舒爽、賞心悅目的感覺(jué)，讓人們置身于一種美麗大自然的意境中，明快而錯(cuò)落的綠，讓人仿佛來(lái)到青山翠谷。網(wǎng)站的總體風(fēng)格網(wǎng)站的總體風(fēng)格主要是以綠色為主，以淡色為輔，充滿活力，生機(jī)。具有個(gè)性色彩。網(wǎng)站的布局其實(shí)很簡(jiǎn)單，主要是做好一個(gè)模版，模版做好框架了，那網(wǎng)站就初步形成了，雖然主要框架做好了，但是也不要高興得太早哦，但是你也要想清楚怎樣把整個(gè)界面搭配得更具有個(gè)性化。首先，在框架的最top 要插入一個(gè)能體現(xiàn)你個(gè)人網(wǎng)站的主圖。然后在主圖的下面插入按鈕導(dǎo)航條，之后下面就插入自己想要的風(fēng)格，雖然用模版做出來(lái)的風(fēng)格都非常相似，但是各個(gè)頁(yè)面都具有各自的特色，讓我們感受到自己的空間的個(gè)性。綠色網(wǎng)站的內(nèi)容結(jié)構(gòu)也很簡(jiǎn)單，分類清楚。頁(yè)面鏈接的層次也很明確，訪問(wèn)者可以很明確的感受到制作網(wǎng)站的人的心情和性格。綠色網(wǎng)站的主要色調(diào)是以綠色為主。鮮艷的綠色是一種非常美麗、優(yōu)雅的顏色，它生機(jī)勃勃，象征著生命。綠色寬容、大度，幾乎能容納所有的顏色。綠色的用途極為廣闊，無(wú)論是童年、青年、中年、還是老年，使用綠色決不失其活潑、大方。以淡色為輔，兩種顏色的結(jié)合更體現(xiàn)出了青春與活力。淡綠色網(wǎng)站主要采用的是環(huán)型結(jié)構(gòu)，每一個(gè)頁(yè)面連接另一個(gè)頁(yè)面，使各個(gè)頁(yè)面能方便的跳轉(zhuǎn)。4 網(wǎng)站的分析與設(shè)計(jì)設(shè)計(jì)一個(gè)個(gè)人網(wǎng)站 , 主要需要考慮兩個(gè)方面的因素:1. 速度 : 反應(yīng)出用戶訪問(wèn)網(wǎng)站頁(yè)面的速度。主頁(yè)是經(jīng)常被訪問(wèn)的頁(yè)面，最好把每頁(yè)的風(fēng)格統(tǒng)一起來(lái)，例如：導(dǎo)航部分最好放在每頁(yè)相同的位置，便于在每個(gè)頁(yè)面中的跳轉(zhuǎn)。2布局：是個(gè)人網(wǎng)站具有吸引力的根本所在，它主要說(shuō)的是信息顯示的視覺(jué)效果。5規(guī)劃站點(diǎn)站點(diǎn)規(guī)劃是設(shè)計(jì)站點(diǎn)前的一個(gè)重要步驟。合理地規(guī)劃站點(diǎn)對(duì)以后站點(diǎn)的設(shè)計(jì)甚至網(wǎng)站的制作會(huì)有事半功倍的效果。41導(dǎo)航草圖的制作有利于理清思路，避免在制作網(wǎng)站的過(guò)程中亂了方寸。如圖4-1 所示就是個(gè)人粉色網(wǎng)站的初始導(dǎo)航草圖。李杰鵬網(wǎng)站的首頁(yè)首我的相留日我頁(yè)簡(jiǎn)冊(cè)介言記的板音樂(lè)圖 4-1 導(dǎo)航圖在導(dǎo)航草圖中，網(wǎng)站首頁(yè)下面有 6 個(gè)二級(jí)網(wǎng)頁(yè)。各網(wǎng)頁(yè)主要內(nèi)容如下：首頁(yè)：總述。我的簡(jiǎn)介：個(gè)人資料。相冊(cè)：包括了我自己的相冊(cè)，家人相冊(cè)、朋友相冊(cè)、明星相冊(cè)和漫畫圖片。留言板： 是訪問(wèn)我的朋友其中可以寫上姓名、聯(lián)系方式和對(duì)我的網(wǎng)站的看法。讓朋友給我留言，增進(jìn)彼此的了解與交流。日記：是用框架素材的，有我的作品，最新自己日記，我收藏的文章，動(dòng)畫效果，文字飄動(dòng)，供訪問(wèn)者觀賞。音樂(lè)：有我最喜歡的音樂(lè)，我收藏的音樂(lè)，可以播放，帶歌詞，下載，有飄動(dòng)圖片，共訪問(wèn)者分享。42創(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)建不同功能的文件來(lái)，文件夾分別命名為圖片素材庫(kù) , 按鈕素材，我的主頁(yè)，我的檔案，登陸注冊(cè)，相冊(cè)，日記，音樂(lè) 8 個(gè)文件夾，并將對(duì)應(yīng)的素材放到各自的文件夾中。41 創(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 單擊“下一步”按鈕，在彈出的對(duì)話框中選擇在開(kāi)發(fā)過(guò)程中如何使用文件，這里選中“在本地進(jìn)行編輯和測(cè)試” ，在“你將把文件存儲(chǔ)在計(jì)算機(jī)上的什么位置？”文本框中輸入 F: index步驟 4 在彈出的對(duì)話框的“您應(yīng)該使用什么 URL來(lái)瀏覽站點(diǎn)的根目錄？”中輸入 , 輸完后，單擊“測(cè)試 URL”按鈕。如果這時(shí)它提醒你 URL前綴測(cè)試成功，點(diǎn)擊“確定”按鈕，你就可以進(jìn)入下一步了，否則的話，你再按照前面的步驟檢查站點(diǎn)出現(xiàn)的問(wèn)題。步驟 5單擊“下一步”按鈕，在對(duì)話框中選擇“否”。步驟 6單擊“下一步”按鈕，點(diǎn)擊“完成”按鈕即可完成本地站點(diǎn)的創(chuàng)建，這時(shí)，創(chuàng)建的站點(diǎn)就顯示在“文件”面板中了如圖所示44 首頁(yè)的布局步驟 1 選擇“布局模式”，將頁(yè)面布局為如圖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ù)庫(kù)文件， 在其中輸入用戶名和密碼， 在設(shè)置一個(gè)主鍵保存退出（注意：再創(chuàng)建服務(wù)器行為時(shí)必須把數(shù)據(jù)庫(kù)關(guān)閉，否則會(huì)出現(xiàn)錯(cuò)誤）步驟 7 還有就是創(chuàng)建一個(gè)注冊(cè)動(dòng)態(tài)網(wǎng)頁(yè)如圖4-4 所示4-5步驟 8 先添加數(shù)據(jù)源，在登陸界面創(chuàng)建一個(gè)登陸用戶的服務(wù)器行為，之后在注冊(cè)界面中創(chuàng)建一個(gè)插入記錄服務(wù)器行為。步驟 9 在相信的地方插入幾張可愛(ài)的漫畫，之后在創(chuàng)建它的滾動(dòng)方式，代碼為（“marquee ondirection= ”right ”>）還要加一個(gè)結(jié)束標(biāo)記 (</marquee>) 注冊(cè)登錄與留言板提交的工作流程圖首頁(yè)就完成了45 制作其它頁(yè)面和制作其他首頁(yè)一樣，在布局模式中進(jìn)行布局，插入相應(yīng)的圖片或flash 。46 制作留言板留言板的設(shè)計(jì)比其它幾個(gè)網(wǎng)頁(yè)都要復(fù)雜一點(diǎn)，如果沒(méi)有搞好的話就會(huì)出現(xiàn)差錯(cuò)，其中自己做留言板的時(shí)候就出現(xiàn)過(guò)很多差錯(cuò)不是預(yù)覽不出就是跳轉(zhuǎn)不過(guò)來(lái)，最后經(jīng)過(guò)老師的提點(diǎn)終于把一個(gè)一個(gè)的錯(cuò)誤給找出來(lái)了。步驟 1插入模板，在模板的第1 列第 1 行插入一個(gè)主要圖片步驟 2 在第 2 行第 2 列插入導(dǎo)航條步驟 3 在第 3 行第 2 列插隊(duì)入一個(gè)表單，在表單中插入一個(gè)5 行2 列的表格步驟 3 做完了相應(yīng)的操做之后就保存，保存完之后再另存為一個(gè)一模一樣的網(wǎng)頁(yè)，改一下名字，點(diǎn)擊確定步驟 4 創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)文件，其中輸入姓名、性別、電話、 E-mail 、QQ留言，在姓名的字段中添加一個(gè)主鍵，單擊保存。步驟 4 在留言板中添加數(shù)據(jù)源，在添加插入記錄的服務(wù)器行為步驟 5 在另外一個(gè)留言板中，添加記錄集和綁定服務(wù)器行為。步驟 6 在插入菜單 - 應(yīng)用程序?qū)ο笮巫?- 記錄集分頁(yè)，插入一個(gè)記錄集分頁(yè)47 設(shè)為首頁(yè)、我的信箱、加為收藏夾步驟 1在 index1 中輸入設(shè)為首頁(yè)、我的信箱、加為收藏夾的字樣步驟 2選中設(shè)為首頁(yè)字樣，在鏈接處輸入一個(gè)空鏈接，切換到代碼視圖，在代碼視圖中輸入代碼，代碼如下：步驟 3選中加為收藏夾字樣， 在鏈接處輸入一個(gè)空鏈接， 切換到代碼視圖，在代碼視圖中輸入代碼，代碼如下：制作在線人數(shù)步驟 1 新建一個(gè)網(wǎng)頁(yè)，在代碼視圖中插入代碼，代碼如下：<script language="vbscript" runat=server>sub application_onstart()application("sum")=0end subsub session_onstart()=1application("sum")=application("sum")+1end subsub session_onend()application("sum")=application("sum")-1end sub</script>步驟 2在網(wǎng)頁(yè)中，在相應(yīng)的位置輸入在線人數(shù)為：步驟 3在網(wǎng)頁(yè)中，在代碼視圖中插入代碼，代碼如下：<%=application("sum")%>49 制作聊天室步驟 1 新建一個(gè)動(dòng)態(tài)頁(yè)面插入一個(gè)表單，在表單中插入一個(gè)3 行 2 列的表格輸入相應(yīng)的文安，插入相應(yīng)的按鈕和文字安段。步驟 2 “文件” / “保存”，在彈出的對(duì)話框中輸入login1保存步驟 3“文件“ / ”新建“ 在彈出的對(duì)話框中選則常規(guī)中選擇”框架集“，選中”下方固定“的框架集單擊”創(chuàng)建“步驟 4“文件“ / ”框架集另存為“分別保存main1、sponse1 、display1“步驟 5在 display1網(wǎng)頁(yè)中輸入”歡迎進(jìn)入我的聊天室“步驟 6在“插入“ / ”HTML“/ ”水平線“步驟 7在到代碼視圖中插入代碼，代碼如下：<%(application("show")%>步驟 8切換到 sponse1 網(wǎng)頁(yè)，在網(wǎng)頁(yè)中插入一個(gè)表單在輸入“我要發(fā)言”，在插入一個(gè)文本字段，在添加兩個(gè)按鈕步驟 9在到 sponse1 的代碼視圖中輸入代碼，代碼如下：<%if ("message")<>"" thenmessage1=trim("message")()xm3=session("xm2")application("show")=xm3 & "在" & " 說(shuō)： " & message1 & "<br>"_&application("show")()end if%>步驟 10 切換到 main1 網(wǎng)頁(yè)中，在代碼視圖中輸入代碼，代碼如下：<%if ("xm1")=""or ("mm")="" then(" 對(duì)不起 , 你的資料不全 ! 請(qǐng)返回重填 " )elsesession("xm2")=trim("xm1")end if%>制作音樂(lè)播放效果音樂(lè)頁(yè)面如圖 4-7在站點(diǎn)下新建一個(gè)音樂(lè)文件夾作為播放網(wǎng)頁(yè)，在播放網(wǎng)頁(yè)中插入所需的背景音樂(lè)，代碼設(shè)計(jì)為： <head><bgsound src=" 童安格 -明天你是否依然愛(ài)我.mp3" loop="1">。在播放頁(yè)中插入方框素材，設(shè)置方框大小，將相對(duì)應(yīng)的歌詞插入方框中，給歌詞設(shè)置為向上移動(dòng)效果；并且設(shè)置移動(dòng)位置大小和速度。代碼為： <marquee behavior="scroll" width="200" height="180"direction="up" scrollamount="1" ><p align="center">明天你是否依然愛(ài)我<br />曲：童安格詞：楊立德 <br />午夜的收音機(jī) <br />輕輕傳來(lái)一首歌<br /></marquee>.播放圖為 4-8五實(shí)驗(yàn)結(jié)果在這次的實(shí)訓(xùn)中，老師要求我們?cè)诰W(wǎng)站中實(shí)現(xiàn)的功能，我都完成了，通過(guò)思考綜合運(yùn)用制作出音樂(lè)播放效果。我覺(jué)得我完成很成功，在這次實(shí)訓(xùn)中，我收獲了不少，以前不知道做的現(xiàn)在全知道做了，我也有了做網(wǎng)站的經(jīng)驗(yàn)，雖然經(jīng)驗(yàn)不足，但是收獲很多，讓我從中學(xué)到了不少，雖然在做網(wǎng)站的過(guò)程中出現(xiàn)過(guò)很多的錯(cuò)誤，但是經(jīng)過(guò)老師的指點(diǎn)和同學(xué)的指點(diǎn)，錯(cuò)誤全都沒(méi)有了，現(xiàn)在整個(gè)網(wǎng)站鏈接很瀏暢，所以這次實(shí)訓(xùn)我覺(jué)得我完成得很成功，從中也學(xué)到了不少。六實(shí)訓(xùn)中的錯(cuò)誤和怎樣解決的在這次實(shí)訓(xùn)中出現(xiàn)了很多的錯(cuò)誤，出現(xiàn)的最多的錯(cuò)誤就是把代碼輸錯(cuò)，還有就是做的網(wǎng)頁(yè)不能正常預(yù)覽，由其是在主頁(yè)中出現(xiàn)的錯(cuò)誤，特別是網(wǎng)頁(yè)布局設(shè)計(jì)視圖是好的，但是預(yù)覽圖就走位了；在留言板也反復(fù)做了好多遍才做出來(lái)，那可真是一波三折。 ，之后復(fù)制到機(jī)房里面去就運(yùn)行不了，之后找了很多的原因，才找出來(lái)，首先要在你放的那個(gè)的文件夾，站一個(gè)web 共享，在新建一個(gè)站點(diǎn)，這樣才能正常的運(yùn)行，還有就是那個(gè)數(shù)據(jù)庫(kù)就是要重新添加數(shù)據(jù)源才可以，不然就會(huì)出現(xiàn)錯(cuò)誤，遇到問(wèn)題時(shí)我努力查閱資料，查閱代碼。七 實(shí)訓(xùn)心得一連上了一個(gè)星期的網(wǎng)頁(yè)實(shí)訓(xùn)課，可以說(shuō)學(xué)到很多以前沒(méi)有學(xué)到的東西。感覺(jué)這一個(gè)星期學(xué)到的遠(yuǎn)遠(yuǎn)比以前學(xué)一個(gè)學(xué)期的要多，要豐富。在這期間，首先是網(wǎng)頁(yè)素材的準(zhǔn)備，在網(wǎng)上查看一些網(wǎng)頁(yè)背景和背景顏色搭配，讓我了解到網(wǎng)頁(yè)的顏色不能多過(guò)3 種色彩。接下來(lái)的幾天再結(jié)合自己的網(wǎng)頁(yè)來(lái)進(jìn)行策劃，在做首頁(yè)之前，先用圖紙把網(wǎng)頁(yè)的結(jié)構(gòu)畫出來(lái)，內(nèi)容和結(jié)構(gòu)都想清楚用 Fireworks把網(wǎng)頁(yè)設(shè)計(jì)出來(lái)，再切割圖片，把它們導(dǎo)成Html 格式在Dreamweaver中進(jìn)行進(jìn)一步的編輯。通過(guò)這個(gè)實(shí)訓(xùn)我學(xué)到了很多，也發(fā)現(xiàn)自己的不足， 一周的實(shí)習(xí)結(jié)束了，至于總體的感覺(jué)只能用八個(gè)字來(lái)概括雖然辛苦，但很充實(shí)。在這一周里，我學(xué)到了很多有用的知識(shí)，我也深深地體會(huì)到IT 行業(yè)的辛苦和偉大，隨著科學(xué)的迅猛發(fā)展，計(jì)算機(jī)行業(yè)發(fā)展更快了，新技術(shù)的廣泛應(yīng)用，會(huì)有很多領(lǐng)域是我們未曾接觸過(guò)的，只有敢于去嘗試才能有所突破，有所創(chuàng)新。所以搞好一次實(shí)訓(xùn)，是我今后走上社會(huì)的一種財(cái)富，所以努力搞好實(shí)訓(xùn)才是最要的，打高分不是最重要的，最重要的是你在這次實(shí)訓(xùn)中你學(xué)到了什么，因?yàn)檫@就是你今后走上社會(huì)的一種定貴的財(cái)富。學(xué)習(xí)的能力很重要，特別是對(duì)一個(gè)站長(zhǎng)來(lái)說(shuō)，因?yàn)榫W(wǎng)絡(luò)的發(fā)展太快，新的技術(shù)，新的模式，新的思維方法每天都在出現(xiàn)，如果不學(xué)習(xí)，很快就會(huì)跟不上形勢(shì)。 做網(wǎng)站雖然辛苦但是讓我知道： “千淘萬(wàn)漉雖辛苦，吹盡黃沙始到金！”