web網(wǎng)設(shè)計報告

1、web網(wǎng)頁設(shè)計專業(yè)物流工程學(xué)院班級物流1301姓名李維源學(xué)號2016年5月4日第一部分：實訓(xùn)目的21世紀(jì)是一個信息時代，Internet已經(jīng)進(jìn)入人們生活與工作的各方面，而網(wǎng)頁作為 In ternet信息傳遞的重要載體，其重要也日趨突出。所以實訓(xùn)的目的就是要我們更好的 掌握好這一學(xué)期的網(wǎng)頁知識和提高自己的動手能力，并且上傳到網(wǎng)上去，讓更多人認(rèn)識 我，更好的宣傳自己。第二部分：實訓(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è)計，做模板，找素材，

2、進(jìn)行站點的規(guī)劃和素 材、資料的收集，要按照制作網(wǎng)站的步驟一步一步來完成。第三部分：實訓(xùn)要求1、主題鮮明、內(nèi)容充實；顏色清新、舒適、結(jié)構(gòu)合理；2、導(dǎo)航清楚、欄目合理、層次分明、使用方便3、設(shè)計8至15個頁面。內(nèi)含：用戶注冊，登錄系統(tǒng)，留言系統(tǒng)、統(tǒng)計在線人 數(shù)，設(shè)為首頁、加為收藏等動態(tài)網(wǎng)頁內(nèi)容。第四部分：個人網(wǎng)站的總體規(guī)劃和步驟1 .設(shè)計的思路我的個人網(wǎng)站主要是以綠為主，以淡色為輔。主要是希望所有的朋友看到這個空間能一種和諧、安寧、充滿生機(jī)的感覺。得到心靈的慰藉！2 . 綠色網(wǎng)站的意義 我設(shè)計的這個網(wǎng)站主要是給人輕松舒爽、賞心悅目的感覺，讓人 們置身于一種美麗大自然的意境中，明快而錯落的綠，讓人仿

3、佛來到青山翠谷。網(wǎng)站的總體風(fēng)格網(wǎng)站的總體風(fēng)格主要是以綠色為主，以淡色為輔，充滿活力，生機(jī)。具有個性色彩。網(wǎng)站 的布局其實很簡單，主要是做好一個模版，模版做好框架了，那網(wǎng)站就初步形成了，雖 然主要框架做好了，但是也不要高興得太早哦，但是你也要想清楚怎樣把整個界面搭配得 更具有個性化。首先，在框架的最top要插入一個能體現(xiàn)你個人網(wǎng)站的主圖。然后在主 圖的下面插入按鈕導(dǎo)航條，之后下面就插入自己想要的風(fēng)格，雖然用模版做出來的風(fēng)格都 非常相似，但是各個頁面都具有各自的特色，讓我們感受到自己的空間的個性。綠色網(wǎng)站的內(nèi)容結(jié)構(gòu)也很簡單，分類清楚。頁面鏈接的層次也很明確，訪問者可以 很明確的感受到制作網(wǎng)站的人的

4、心情和性格。綠色網(wǎng)站的主要色調(diào)是以綠色為主。鮮艷的綠色是一種非常美麗、優(yōu)雅的顏色，它生 機(jī)勃勃，象征著生命。綠色寬容、大度，幾乎能容納所有的顏色。綠色的用途極 為廣闊， 無論是童年、青年、中年、還是老年，使用綠色決不失其活潑、大方。以淡 色為輔，兩種 顏色的結(jié)合更體現(xiàn)出了青春與活力。淡綠色網(wǎng)站主要采用的是環(huán)型結(jié)構(gòu)，每一個頁面連接另一個頁面，使各個頁面能方便 的跳轉(zhuǎn)。4網(wǎng)站的分析與設(shè)計設(shè)計一個個人網(wǎng)站，主要需要考慮兩個方面的因素：L速度：反應(yīng)出用戶訪問網(wǎng)站頁面的速度。主頁是經(jīng)常被訪問的頁面，最好把每頁的 風(fēng)格統(tǒng)一起來，例如：導(dǎo)航部分最好放在每頁相同的位置，便于在每個頁面中的跳 轉(zhuǎn)。2.布局：是個

5、人網(wǎng)站具有吸引力的根本所在，它主要說的是信息顯示的視覺效果。5.規(guī)劃站點站點規(guī)劃是設(shè)計站點前的一個重要步驟。合理地規(guī)劃站點對以后站點的設(shè)計甚至 網(wǎng)站 的制作會有事半功倍的效果。4. 1導(dǎo)航草圖的制作有利于理清思路，避免在制作網(wǎng)站的過程中亂了方寸。如圖4-1所示 就是個人粉色網(wǎng)站的初始導(dǎo)航草圖。李杰鵬網(wǎng)站的首頁我的簡介T相冊留言板日記一我的音樂圖4-1導(dǎo)航圖在導(dǎo)航草圖中，網(wǎng)站首頁下面有6個二級網(wǎng)頁。各網(wǎng)頁主要內(nèi)容如下:薔首頁：總述。1我的簡介：個人資料。相冊：包括了我自己的相冊，家人相冊、朋友相冊、明星相冊和漫畫圖片。留言板：是訪問我的朋友其中可以寫上姓名、聯(lián)系方式和對我的網(wǎng)站的看法。讓朋友給我

6、留言，增進(jìn)彼此的了解與交流。，日記：是用框架素材的，有我的作品，最新自己日記，我收藏的文章，動畫效果，文字飄動，供訪問者觀賞。音樂：有我最喜歡的音樂，我收藏的音樂，可以播放，帶歌詞，下載，有飄動圖片，共訪問者分享。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)建不同功能的文件來，文件夾分別命名為圖 片素材庫，按鈕素材，我

7、的主頁，我的檔案，登陸注冊，相冊，日記，音樂8個文件 夾，并將對應(yīng)的素材放到各自的文件夾中。4. 1創(chuàng)建站點步驟1進(jìn)入Dreamweaver8工作界面后，選擇“站點” / “新建站點”命令 彈出“未命名站點1的站點定義為對話框。步驟2在該對話框中的“基本”選項卡中的“您打算為您的站點起什么名字？ ”文本框中輸入hyfu步驟2單擊“下 步”按鈕，在彈出的對話框中選中“是，我想使用服務(wù)器技術(shù)”，在“哪種種服務(wù)器技術(shù)？ ”下拉列表中選擇“ASPVBScript”。步驟3單擊“下一步”按鈕，在彈出的對話框中選擇在開發(fā)過程中如何使用文 件，這里選中“在本地進(jìn)行編輯和測試”，在“你將把文件存儲 在計算機(jī)上

8、的什么位 置？ ”文本框中輸入F:index步驟4在彈出的對話框的“您應(yīng)該使用什么URL來瀏覽站點的根目錄？ ”中輸入，輸完后，單擊“測試URL按鈕。如果這時它提醒你URL前 綴測試成 功，點擊“確定”按鈕，你就可以進(jìn)入下一步了，否則的話，你再按照前面的步驟檢查站點出現(xiàn)的問題。步驟5單擊“下 步”按鈕，在對話框中選擇“否”。步驟6單擊“下 步”按鈕，點擊“完成”按鈕即可完成本地站點的 創(chuàng)建，這時，創(chuàng)建的站點就顯示在“文件”面板中了如圖所示4. 4首頁的布局步驟1選擇“布局模式”，將頁面布局為如圖4-3所示 圖4-3步驟2在第1行第1列里插入一張主要的圖片。步驟3在第2行第2列里面插入導(dǎo)航條。步

9、驟4在相應(yīng)的位置插入相應(yīng)的圖片的Flash影片。步驟5在第2行第1列中插入一個表單，在表單中插入一個4行2列的表 格，輸入相應(yīng)的信息如圖4-4所示圖4-4步驟6新建一個數(shù)據(jù)庫文件，在其中輸入用戶名和密碼，在設(shè)置一個主鍵保存退出(注意：再創(chuàng)建服務(wù)器行為時必須把數(shù)據(jù)庫關(guān)閉，否則會出現(xiàn)錯誤 )步驟7還有就是創(chuàng)建一個注冊動態(tài)網(wǎng)頁如圖4-4所示用戶名，P 144-5步驟8先添加數(shù)據(jù)源，在登陸界面創(chuàng)建一個登陸用戶的服務(wù)器行為，之后 在注冊界面中創(chuàng)建一個插入記錄服務(wù)器行為。( )步驟9在相信的地方插入幾張可愛的漫畫，之后在創(chuàng)建它的滾動方式，代 碼為( marquee on directi on 蘭 righ

10、t ” )還要力口個 結(jié)束標(biāo)記注冊登錄與留言板提交的工作流程圖J -真也il護(hù).能 fta*翰扎用戶群1球帶呵 u首頁就完成了4. 5制作其它頁面，晞人汗網(wǎng)Lk毗!jft制作其他首頁一樣，在布局模式中進(jìn)行布局，插入相應(yīng)的圖片或flash o4. 6制作留言板留言板的設(shè)計比其它幾個網(wǎng)頁都要復(fù)雜一點，如果沒有搞好的話就會出現(xiàn)差 錯，其中自己做留言板的時候就出現(xiàn)過很多差錯不是預(yù)覽不出就是跳轉(zhuǎn)不過來，最 后經(jīng)過老師的提點終于把一個一個的錯誤給找出來了。步驟1插入模板，在模板的第1列第1行插入一個主要圖片步驟2在第2行第2列插入導(dǎo)航條步驟3在第3行第2列插隊入一個表單，在表單中插入一個5行2列的表格步驟

11、3做完了相應(yīng)的操做之后就保存，保存完之后再另存為一個一模一樣的 網(wǎng)頁，改一下名字，點擊確定步驟4創(chuàng)建一個數(shù)據(jù)庫文件，其中輸入姓名、性別、電話、E-mail、QC留言，在姓名的字段中添加一個主鍵，單擊保存。步驟4在留言板中添加數(shù)據(jù)源，在添加插入記錄的服務(wù)器行為步驟5在另外一個留言板中，添加記錄集和綁定服務(wù)器行為。步驟6在插入菜單一應(yīng)用程序?qū)ο笮巫?記錄集分頁，插入一個記錄集分 頁4. 7設(shè)為首頁、我的信箱、加為收藏夾步驟1在indexl中輸入設(shè)為首頁、我的信箱、加為收藏夾的字樣步驟2選中設(shè)為首頁字樣，在鏈接處輸入一個空鏈接，切換到代碼視圖，在代碼 視圖中輸入代碼，代碼如下：步驟3選中加為收藏夾字

12、樣，在鏈接處輸入一個空鏈接，切換到代碼視圖，在代 碼視圖中輸入代碼，代碼如下：步驟4制作在線人數(shù)步驟1新建一個網(wǎng)頁，在代碼視圖中插入代碼，代碼如下：subapplicat ion_onstart ()app lication (z/ sum) =0endsubsubsession_onstart ()=1application(sunT)=application(sum)+1endsubsubsession_onend()application(sum)=application(sum)-1endsub步驟2在網(wǎng)頁中，在相應(yīng)的位置輸入在線人數(shù)為：步驟3在網(wǎng)頁中，在代碼視圖 中插入代碼，代碼如下

13、： 4. 9 制作聊天室步驟1新建一個動態(tài)頁面插入一個表單，在表單中插入一個3行2列的表格輸 入相應(yīng)的文安，插入相應(yīng)的按鈕和文字安段。步驟2 “文件” / “保存”，在彈出的對話框中輸入loginl保存步驟3 文件 / ”新建”在彈出的對話框中選則常規(guī)中選擇”框架集,選中”下方固定”的框架集單擊”創(chuàng)建“步驟4 文件 / ”框架集另存為“分別保存mainl sponsek displayl步驟5在displayl網(wǎng)頁中輸入”歡迎進(jìn)入我的聊天室“步驟6在“插入“ / HTM “L / ”水平線“步驟7在到代碼視圖中插入代碼，代碼如下：步驟8切換到sponsel網(wǎng)頁，在網(wǎng)頁中插入一個表單在輸入“我要

14、發(fā) 言”，在 插入一個文本字段，在添加兩個按鈕步驟9在到sponsel的代碼視圖中輸入代碼，代碼如下：thenmessagel=trim(/zmessage/z)0xm3=session (xm2)application (show) =xm3& 在&說：/&messagel&/_&application (show)0endif%步驟10切換到mainl網(wǎng)頁中，在代碼視圖中輸入代碼，代碼如下：制作音樂播放效果音樂頁面如圖4-7在站點下新建一個音樂文件夾作為播放網(wǎng)頁，在播放網(wǎng)頁中插入所需的背景音樂， 代碼設(shè)計為：bgsoundsrc= 童安格-明天你是否依然愛我.mp3/zloop 二 1。在

15、播放頁中插入方框素材，設(shè)置方框大小，將相對應(yīng)的歌詞插入方框中，給歌詞設(shè) 置為向上移動效果；并且設(shè)置移動位置大小和速度。代碼為：palign二center”明天你是否依然愛我br/曲：童安格詞：楊立德午夜的收音機(jī)br/輕輕傳來一首歌.播放圖為4-8五.實驗結(jié)果在這次的實訓(xùn)中，老師要求我們在網(wǎng)站中實現(xiàn)的功能，我都完成了，通 過思考綜合 運(yùn)用制作出音樂播放效果。我覺得我完成很成功，在這次實訓(xùn)中，我收獲了不少， 以前不知道做的現(xiàn)在全知道做了，我也有了做網(wǎng)站的經(jīng)驗，雖然經(jīng)驗不足，但是收 獲很多，讓我從中學(xué)到了不少，雖然 在做網(wǎng)站的過程中出現(xiàn)過很多的錯誤，但是經(jīng) 過老師的指點和同學(xué)的指點，錯誤全都沒有了，

16、現(xiàn)在整個網(wǎng)站鏈接很瀏暢，所以這 次實訓(xùn)我覺得 我完成得很成功，從中也學(xué)到了不少。六實訓(xùn)中的錯誤和怎樣解決的在這次實訓(xùn)中出現(xiàn)了很多的錯誤，出現(xiàn)的最多的錯誤就是把代碼輸錯，還有就是做 的網(wǎng)頁不能正常預(yù)覽，由其是在主頁中出現(xiàn)的錯誤，特別是網(wǎng)頁布局設(shè)計視圖是好 的，但是預(yù)覽圖就走位了；在留言板也反復(fù)做了好多遍才做出來，那可真是一波三 折。，之后復(fù)制到機(jī)房里面去就運(yùn)行不了，之后找了很多的原因，才找出來，首先 要在你放的那個的文件夾，站一個web共享，在新建一個站點，這樣才能正常的運(yùn) 行，還有就是 那個數(shù)據(jù)庫就是要重新添加數(shù)據(jù)源才可以，不然就會出現(xiàn)錯誤，遇到 問題時我努力查閱資料，查閱代碼。七實訓(xùn)心得一連

17、上了一個星期的網(wǎng)頁實訓(xùn)課，可以說學(xué)到很多以前沒有學(xué)到的東西。感覺這一個星期學(xué)到的遠(yuǎn)遠(yuǎn)比以前學(xué)一個學(xué)期的要多，要豐富。在這期間，首先是網(wǎng)頁素材的準(zhǔn)備，在網(wǎng)上查看一些網(wǎng)頁背景和背景顏色搭配，讓 我了解到網(wǎng)頁的顏色不能多過3種色彩。接下來的幾天再結(jié)合自己的網(wǎng)頁來進(jìn)行策 劃，在做首頁之前，先用圖紙把網(wǎng)頁的結(jié)構(gòu)畫出來，內(nèi)容和結(jié)構(gòu)都想清楚用 Fireworks把網(wǎng)頁設(shè)計出來，再切割圖片，把 它們導(dǎo)成Html格式在 Dreamweaver中進(jìn)行進(jìn)一步的編輯。通過這個實訓(xùn)我學(xué)到了很多，也發(fā)現(xiàn)自己的不足，一周的實習(xí)結(jié)束了，至于總體的感覺只能用八個字來概括雖然辛苦，但很充實。在這一周里，我 學(xué)到了很多有用的知識，我也深深地體會到IT行業(yè)的辛苦和