1、7A 版優(yōu)質(zhì)實用文檔網(wǎng)頁制作實習報告篇一：網(wǎng)頁設(shè)計實訓(xùn)報告網(wǎng)頁設(shè)計報告題目 :個人網(wǎng)站實訓(xùn)報告學號 :0000000000 姓名 :王可元一.實訓(xùn)意義:網(wǎng)頁設(shè)計與制作綜合實訓(xùn)是教學過程中重要的實踐性教學環(huán)節(jié). 它是根據(jù)專業(yè)教學計劃的要求 ,在教師的指導(dǎo)下對學生進行網(wǎng)頁制作專業(yè)技能的訓(xùn)練 ,培養(yǎng)學生 綜合運用理論知識分析和解決實際問題的能力 ,實現(xiàn)由理論知識向操作技能的轉(zhuǎn) 化 ,是對理論與實踐教學效果的檢驗 ,也是對學生綜合分析能力與獨立工作能力的 培養(yǎng)過程 .因此加強實踐教學環(huán)節(jié) ,搞好實訓(xùn)教學 ,對實現(xiàn)本專業(yè)的培養(yǎng)目標 ,提高 學生的綜合素質(zhì)有著重要的作用。二.實訓(xùn)目的:1通過綜合實訓(xùn)進一步

2、鞏固，深化和拓展學生的理論知識與專業(yè)技能。(1)掌握規(guī)劃網(wǎng)站的內(nèi)容結(jié)構(gòu)，目錄結(jié)構(gòu) ,鏈接結(jié)構(gòu)的方法。(2)熟練掌握網(wǎng)頁制作軟件 FrontPage20GG 和的基本操作和使用技能。(3)掌握頁面的整體控制和頭部內(nèi)容設(shè)置的方法。(4)熟練掌握網(wǎng)頁頁面布局的各種方法。(5)熟練掌握在網(wǎng)頁中輸入 ,設(shè)置標題和正文文字的方法。(6)熟練掌握在網(wǎng)頁中插入圖象 ,flash 動畫和背景音樂的方法。(7)熟練建立各種形式的超級鏈接的方法。(8)掌握表單網(wǎng)頁制作方法。(9)掌握網(wǎng)頁特效制作方法。7A 版優(yōu)質(zhì)實用文檔7A 版優(yōu)質(zhì)實用文檔(10)掌握網(wǎng)站測試的方法。2.訓(xùn)練和培養(yǎng)學生獲取信息和處理信息的能力 ,充

3、分培養(yǎng)和提高學生的動手能 力,學會通過網(wǎng)站、 書籍、素材光盤等方式收集所需的文字資料、 圖象資料、flash 動畫和網(wǎng)頁特效等。3.培養(yǎng)學生運用所學的理論知識和技能解決網(wǎng)站開發(fā)過程中所遇到的實際問題 的能力及其基本工作素質(zhì)。4.培養(yǎng)學生理論聯(lián)系實際的工作作風 ,嚴肅認真的科學態(tài)度以及獨立工作的能 力,樹立自信心。三實驗步驟：1 、網(wǎng)站主題我的網(wǎng)站的主旨在于從各個方面全面的介紹我自己，展示自己，包括我的個人 資料、個人相片和愛好。另外，網(wǎng)站里還包括我的好友和好友資料，建立一個展 示自我形象的平臺。 同時，網(wǎng)站里的每一個網(wǎng)頁都有統(tǒng)一的風格， 每一個網(wǎng)頁的 主題色彩都是淺紅色，用以展示自己性格的效果

4、。最重要的是做出自己的風格， 給瀏覽者好的欣賞感受。2、網(wǎng)站材料主要在網(wǎng)站上搜集所要的網(wǎng)頁信息，包括圖片、文字、相關(guān)的新聞。同時，查 詢相關(guān)的書籍、百度和素材光盤等方式收集所需的文字資料 ,圖象資料 ,flash 動 畫和網(wǎng)頁特效等， 用以得來更加具有說服力的頁面。 要想做好自己的網(wǎng)站， 能夠 給瀏覽者好的欣賞感受， 就要盡量搜集材料， 搜集得材料越多， 以后制作網(wǎng)站就 越容易。 精選自己收集的材料， 作為自己制作網(wǎng)頁的素材， 這樣就可以做好一個 好的網(wǎng)站。3、網(wǎng)站規(guī)劃我的網(wǎng)站共有 5 個主頁面：首頁、相冊、簡歷、圖書、好友、留言版和音樂。7A 版優(yōu)質(zhì)實用文檔7A 版優(yōu)質(zhì)實用文檔每一個頁面用統(tǒng)

5、一的背景圖片，以保證網(wǎng)站統(tǒng)一的頁面風格。如下圖我是用自己的姓名和學號命名網(wǎng)站名，用以方便存儲和轉(zhuǎn)發(fā)。網(wǎng)站整體色調(diào)為 淺紅色，然后點綴其他不同的顏色相配，突出主題，顏色沒有過多，過雜，用以 避免給人一種雜亂的感覺。 版面設(shè)計十分靈活， 根據(jù)各部分內(nèi)容的不同適當?shù)淖?由設(shè)計。網(wǎng)頁布局主要用框架和表格， 用框架定位內(nèi)容的大體結(jié)構(gòu)， 再用表格具 體定位。位子的設(shè)計也是重要的一個部分， 根據(jù)具體內(nèi)容決定字體風格， 相同的 風格多次調(diào)用是用 css 設(shè)計一個樣式，以保證隨時、準確的調(diào)用。另外，為了網(wǎng) 頁布局的協(xié)調(diào)，我加入了適當?shù)?flash 透明動態(tài)圖片，用以達到更好的瀏覽效果。4、網(wǎng)站的制作工具做網(wǎng)頁時

6、主要使用的是 FrontPage20GG ，但我還使用了 Deamweaver 。另 外，為了處理網(wǎng)頁中的其他元素，還使用了 Photoshop 、 GifAnimator 等軟 件。5、制作網(wǎng)站的網(wǎng)頁 素材、風格、模板都設(shè)計好以后，下一步就是具體的制作網(wǎng)頁。制作網(wǎng)站時， 首先要做的就是站點的規(guī)劃，建立一個本地站點“ mysite ”，建立的各個頁面都 應(yīng)該放在本地站點中， 在網(wǎng)頁制作時所需的各個元素都進行了統(tǒng)一的管理， 建立統(tǒng)一的文件夾放同一類型的文件，我在制作時建立了“ tupian ”文件夾來存放 圖片。同時，由于“相冊”頁面中的信息太多，于是建立了一個專門的文件夾存 放相冊信息， 網(wǎng)頁

7、中的 css 樣式文件也應(yīng)統(tǒng)一管理， 做到有條不紊， 我設(shè)計的網(wǎng) 站的首頁如下圖：以導(dǎo)航欄為界，上面插入了兩個 flash 動畫，用以給瀏覽者好的視覺享受。左 下方有我的個人資料、 相片和相關(guān)鏈接。 插入相關(guān)鏈接的菜單欄， 一方面為了布 局合理， 彌補左下角的空缺， 另一方面給瀏覽者提供放表的導(dǎo)航， 點擊其中任意7A 版優(yōu)質(zhì)實用文檔7A 版優(yōu)質(zhì)實用文檔7A 版優(yōu)質(zhì)實用文檔一個都會連接到其他網(wǎng)頁，如點擊 google 就會連接到下面網(wǎng)頁： 根據(jù)自己的網(wǎng)頁風格，在網(wǎng)上搜集合適的圖片，另外網(wǎng)頁的頁寬一般沒有超過900 像素，以保證左右不出現(xiàn)滾動條。右下邊插入的是表格，表格中添加了淺 紅色的背景圖片。

8、 用以體現(xiàn)網(wǎng)站的主題色彩， 表格還定位了網(wǎng)頁特效、 系統(tǒng)時間 和 flash 動畫。網(wǎng)頁特效為上下滾動的字幕，當鼠標停在字幕上時，字幕停止?jié)L 動。特效代碼如下：SCRIPTLANGUAGE="JavaScript"!-Begin/scrollerwidthvarswidth=300/scrollerheight varsheight=100/scrollersspeed;varsspeed=2varwholemessage=/teGt:changetoyourown wholemessage=divalign="center"fontface=Arial

9、7A 版優(yōu)質(zhì)實用文檔/divdivalign="center"十年修得同般渡/divdivalign="center"百年修得共枕眠/divdivalign="center"若是千呀年呀有造化/divdivalign="center"白首同心在眼前/divdivalign="center"若是千呀年呀有造化/divdivalign="center" 白 首 同 心 在 眼 前/divdivalign="center"啦 /divdivalign="

10、;center"新白娘子傳奇片尾曲/divdivalign="center"高勝美渡情/divdivalign="center"歡迎光臨我的個人網(wǎng)站/divdivalign="center"/div/fontfunctionstart()if(document.all)returnif(document.getElementById)document.getElementById("slider").style.visibility=&q uot;show"ns6marquee(document

11、.getElementById(slider) elseif(document.layers)document.slider1.visibility="show& quot;ns4marquee(document.slider1.document.slider2)size=3color="#FF0066"歡迎光臨我的個人網(wǎng)站/DIVdivalign="center"下面是網(wǎng)頁背景音樂歌詞/strong/DIVdivalign="center"strong渡情/strong/DIVdivalign="center&q

12、uot;西湖 美景 三月天勒/divdivalign="center"春雨如酒柳如煙勒/divdivalign="center"有緣千里來相會/divdivalign="center"無緣對面手難牽4functionns4marquee(whichlayer)ns4layer=eval(whichlayer) ns4layer.document.write(wholemessage) ns4layer.document.close()7A 版優(yōu)質(zhì)實用文檔7A 版優(yōu)質(zhì)實用文檔sizeup=ns4layer.document.height

13、 ns4layer.top-=sizeup ns4slide() functionns4slide()if(ns4layer.top=sizeupG(-1)ns4layer.top-=sspe edsetTimeout("ns4slide()",100) elsens4layer.top=sheight ns4slide()functionns6marquee(whichdiv) ns6div=eval(whichdiv)ns6div.innerHTML=wholemessage ns6div.style.top=sheight sizeup=sheightns6slide

14、() functionns6slide()if(parseInt(ns6div.style.top)=sizeupG(-1) ns6div.style.top=parseInt(ns6div.style.top)-sspeed setTimeout("ns6slide()",100) elsens6div.style.top=sheightns6slide()/End- /scriptspanstyle="borderWidth:1;borderColor:red;width:300;height:100;"p ilayerwidth=300height

15、=100name="slider1bgcolor="blackvisibility=hide/playername="slider2onMouseover="sspeed=0;onMous eout="sspeed=2/layer/ilayer7A 版優(yōu)質(zhì)實用文檔7A 版優(yōu)質(zhì)實用文檔scriptlanguage="JavaScript"if(document.all)document.writeln(marqueeid="iesliderscrollAmount=2width=300height=130direct

16、ion=downstyle="border:0solidred;background-color:")document.writeln(wholemessage)ieslider.onmouseover=newFunction("ieslider.scrollAmount=0 ")ieslider.onmouseout=newFunction("if(document.readyState=complete)ieslider.scrollAmount=2")document.write(/marquee)if(document.get

17、ElementById&&!document.all)document.write(divstyle="position:relative;overflow:hidden;width:300;height:100;clip:rect(03021020);background-color:black;border:1pGsolidred;onMouseover="sspeed=0;onMouseo ut="sspeed=2")document.write(divid="sliderstyle="position:rela

18、tive;width:&swidth;")document.write(/div/div)/script/span取系統(tǒng)時間代碼如下：今是： !-webbotbot="TimestampS-Type="REGENERATEDS-Format="%Y 年%m 月%d 日 -7A 版優(yōu)質(zhì)實用文檔7A 版優(yōu)質(zhì)實用文檔主頁中還插入了背景音樂，音樂名為“渡情” ，這首音樂為 midi 音樂，占用內(nèi) 存小，音樂清脆悅耳， 十分適合做背景音樂。 另外，網(wǎng)頁特效滾動字幕就是歌詞。 插入過程如下圖：篇二：網(wǎng)頁設(shè)計與制作個人實訓(xùn)報告一、實訓(xùn)目的：通過實訓(xùn)，掌握網(wǎng)頁制

19、作系列軟件 Dreamweaver 、 Fireworks 、 Flash 和 Photoshop 的使用方法。達到全面理解、運用網(wǎng)頁制作的知識，并使之得以融 會貫通，在掌握理論的基礎(chǔ)上再加以實踐，進一步提高、加強設(shè)計、制作網(wǎng)站的 綜合能力。二、實訓(xùn)過程1.資料的搜集： 收集的資料主要是汽車圖片，以及運用做頁面局部框架背景的圖片。2.熟悉制作軟件軟件：軟件： DreamweaverFireworkPhotoshopCSFlash硬件：PC 機技術(shù)： HTML 特效代碼項目設(shè)計及運行平臺： WindowsGP3.構(gòu)建站點框架：網(wǎng)站結(jié)構(gòu)圖如下：4 設(shè)計制作頁面：網(wǎng)頁名稱:關(guān)于我們 網(wǎng)頁的色彩：最主

20、要是以白色背景為主導(dǎo)色，字體的主要色彩是黑色。鏈接 字體顏色鏈接前設(shè)為藍灰色，鼠標覆蓋后為深紅色。網(wǎng)頁富有動感，通過 GIF 動畫來展示，頁面的色彩好與首頁和欄目頁統(tǒng)一主 要采取白色。頁面的大小，在 1024G768 像素下顯示效果最佳。7A 版優(yōu)質(zhì)實用文檔7A 版優(yōu)質(zhì)實用文檔顏色調(diào)配設(shè)計，網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵之一，各版塊采用與網(wǎng)站 首頁同一色系的顏色，整個版塊內(nèi)部也盡量保持風格一致。網(wǎng)頁內(nèi)容的安排相互鏈接關(guān)系如下概述最上面先放了一個 724G100pG 的 logo.右邊放了一個 1024G100 廣告如下圖：再下來的表格中里放了一個我們用 GIF 的輪換效果展示知名品牌汽車， 效

21、果如 圖：右側(cè)是世界 / 中國地圖及天氣實況查詢圖。屬特效代碼。當鼠標覆蓋時顯示鏈 接提示， 點擊即可查詢各地當日天氣情況， 幫助駕車人員快速掌握天氣情況。 效 果如下：然后再表格里面分別放的是各種小版塊。分別記載有 :QQ 聯(lián)系方式，用戶只要單擊即可打開 QQ聊天窗口與網(wǎng)站內(nèi)部人員進行對話。 此外，頁面載有客服熱線，留言板。也是對用戶提供的對話平臺，方便用戶咨 詢更多消息。5 實現(xiàn)網(wǎng)頁間的鏈接：運用的鏈接方式有：超鏈接、明鏈圖片鏈接 , 錨點鏈接以及多媒體鏈接 ,用以實 現(xiàn) QQ 聊天界面的打開，留言提交，以及天氣實況的顯示。6整體效果圖：三、實訓(xùn)心得與體會： 在這次實訓(xùn)之后，我們對網(wǎng)站的設(shè)

22、計與制作有了進一步的了解，我對 flash 的 制作，圖片的處理，表單的制作， css 樣式，模版的應(yīng)用等技術(shù)有了更深層次的 了解，并且能夠很好的應(yīng)用它們。在網(wǎng)站的制作過程中，我碰到了不少的問題， 但是通過老師的耐心指導(dǎo)以及與隊友的協(xié)商， 這些問題最終都得到了較為完美的7A 版優(yōu)質(zhì)實用文檔107A 版優(yōu)質(zhì)實用文檔解決。所以我認為，團隊的力量是強大的！而一個人的力量和想法是有限的，唯 有集思廣益，才能使得我們的作品更加優(yōu)秀， 內(nèi)容更加豐富。 這使得我對靜態(tài)網(wǎng) 頁的制作產(chǎn)生了濃厚的興趣，我將繼續(xù)付諸實行，向動態(tài)網(wǎng)頁的制作發(fā)動挑戰(zhàn)！ 篇三：網(wǎng)頁設(shè)計實訓(xùn)報告婁底職業(yè)技術(shù)學院LOUDIVOCATIONA

23、LANDTECHNICALCOLLEGE網(wǎng)頁編程技術(shù)實訓(xùn)報告課題：個人網(wǎng)站制作庫系部：電子信息工程系班級：16 級軟件 1 班學號： GGGGGGGGGGGG姓名：隱非問組員：王子涵、張杰明、林麗雪、吳濤、隱非問指導(dǎo)老師：王錫文完成時間： 2016.12.5 2016.12.25目錄一：實訓(xùn)目的 . 3二：實訓(xùn)原理 . 3三：設(shè)計過程 . 3 四：設(shè)計框圖 . 4 五：程序代碼 4 六：實訓(xùn)總結(jié) . 9 一.實訓(xùn)目的(1)掌握網(wǎng)頁制作軟件 DreamweaverCS3 基本操作和使用技能。(2)掌握規(guī)劃網(wǎng)站的內(nèi)容結(jié)構(gòu) ,目錄結(jié)構(gòu) ,鏈接結(jié)構(gòu)的方法。7A 版優(yōu)質(zhì)實用文檔7A 版優(yōu)質(zhì)實用文檔(3)

24、掌握頁面的整體控制和頭部內(nèi)容設(shè)置的方法。(4)掌握網(wǎng)頁頁面布局的各種方法。(5)掌握在網(wǎng)頁中輸入 ,設(shè)置標題和正文文字的方法。(6)掌握在網(wǎng)頁中插入圖像和背景音樂的方法。(7)熟練建立各種形式的超級鏈接的方法。二.實訓(xùn)原理HTML ( (HyperteGtMarkupLanguage)超級文本標記語言是標準通用標記語言下的一個應(yīng)用， 也是一種規(guī)范， 一種標準， 它通過標記符號來標記要顯示 的網(wǎng)頁中的各個部分。 網(wǎng)頁文件本身是一種文本文件， 通過在文本文件中添加標 記符，可以使用瀏覽器被網(wǎng)上瀏覽。三設(shè)計過程(1 )網(wǎng)站主題 我做的網(wǎng)站主要是從各個方面介紹我的家鄉(xiāng)，包括歷史由來，名勝古跡，旅游 圣

25、地等。同時， 網(wǎng)站里的每一個網(wǎng)頁都設(shè)置了不一樣的風格， 用以展示圖文最好 的效果。(2 )網(wǎng)站材料 我主要在網(wǎng)站上搜集圖片、文字、相關(guān)的新聞。同時，請教老師 flash 動畫和 網(wǎng)頁特效等。(3 )網(wǎng)站規(guī)劃我的網(wǎng)站共有 7 個頁面：主頁鄉(xiāng)愁；歷史由來；蔡倫故館；八角古亭；人 文風景；耒陽竹海；幸福耒陽。每一個頁面應(yīng)用了不同的背景圖片，以保證不同 內(nèi)容的不同頁面風格。(4 )網(wǎng)站的制作工具11做網(wǎng)頁時主要使用的是 DeamweaverCS3 。另外，為了處理網(wǎng)頁中的其他元7A 版優(yōu)質(zhì)實用文檔127A 版優(yōu)質(zhì)實用文檔素，還使用了 Photoshop 軟件。（5 ）制作網(wǎng)站的網(wǎng)頁素材、風格、模板都設(shè)

26、計好以后，下一步就是具體的制作網(wǎng)頁。制作網(wǎng)站時， 首先要做的就是站點的規(guī)劃，建立一個本地站點“鄉(xiāng)愁” ，建立的各個頁面都應(yīng) 該放在本地站點中， 在網(wǎng)頁制作時所需的各個元素都進行了統(tǒng)一的管理， 統(tǒng)一的 文件夾放同一類型的文件，我在制作時建立了“圖片素材”文件夾來存放圖片， 做到有條不紊，主頁中還插入了背景音樂，音樂名為“高山流水” 。四設(shè)計框圖五程序代碼一主頁代碼htmlheadmetacharset="utf-8"title 鄉(xiāng)愁 /title/headbodyalink="#C70003bgcolor="#FF9999background="

27、 圖片素材 / 薰衣草 .jpg""embedsrc=" 純 音 樂 - 高 山 流 水 - 古 箏 版 純 音 樂 6.mp3loop="truehidden="true"/embedtablewidth="887height="175align="centerbgcol or="#1868D4"trtdstyle="color:#FF0000"h3 我的家鄉(xiāng) /h3/tdtdwidth="315height="169"h2 湖南最美

28、的城市排名7A 版優(yōu)質(zhì)實用文檔137A 版優(yōu)質(zhì)實用文檔/h2/tdtdwidth="560"imgsrc=" 圖 片 素 材 /1(2)(2).jpgwidth="563height="91"imgsrc="圖片素材 /top.jpgwidth="564height="76"/td/trtablewidth="887align="centerbgcolor="#63DC0Eheight="100"trheight="60"td

29、ahref="lishiyoulai.htmltarget="_blankpalign="center" 歷史由來/p/a/tdtdahref="cailun.htmltarget="_blankpalign="center" 蔡倫故館 /p/a/tdtdahref="bajiaolou.htmltarget="_blankpalign="center" 八角古亭 /p/a/tdtdahref="shuaige.html"target="_blankpalign="center" 人文歷史 /p/a/tdtdahref="leiyangcailun.htmltarget="_blank