總結，漢語詞語，讀音為zǒng jié，意思是總地歸結， 以下是為大家整理的關于web前端實訓報告總結3篇 , 供大家參考選擇。
web前端實訓報告總結3篇
web前端實訓報告總結篇1
《Web前端技術實訓》任務書
一、 實訓課題名稱
1、 教育類網站的設計與制作
2、 商業類網站的設計與制作
3、 旅游休閑類網站的設計與制作
4、 體育健身類網站的設計與制作
二、 課題設計目的
通過實訓，應使學生鞏固所學知識，把所學的理論知識運用到網站制作實踐中。培養學生動手能力，將PS制作效果圖、HTML、CSS+DIV網頁布局、JavaScript等Web前端開發技術結合起來，在實訓環節中進行運用。為以后學習動態網站打下基礎。
三、 任務要求：
用PhotoShop、DreamWeaver等開發工具制作一個由靜態網頁構成的簡單網站，要求包括一個首頁、至少三個子網頁，按照網站開發流程，先做網頁效果圖，然后制作網頁素材、構建網站文件結構、規劃網頁布局、制作網頁動畫、實現網頁功能，爾后進行網站測試，并編制出各階段必要的文檔。在編寫文檔時，必須嚴格遵照要求，最后提交文檔。
功能要求：該網站首頁必須包括網站logo、導航條（帶有鼠標事件變化效果）、banner（簡單flash動畫）、圖片、多媒體運用、文字等主要信息展示；子網頁包括用戶注冊（帶有表單輸入項本地驗證功能）、登錄（用戶名和密碼非空驗證）、子網頁相關欄目。各頁面之間通過超鏈接切換。
最后要求提交詳細的課程設計報告及網頁效果圖（.psd）和網站運行文件，現場運行驗收開發的系統。
四、 課題設計報告書要求：
1、 課題設計報告書第一頁為封面，封面上寫清楚標題、班級、姓名、指導老師、完成日期。
2、 課題設計報告書第二頁為本任務書。
3、 課題設計報告書第三頁為教師評語。
4、 課題設計報告書第四頁為目錄。
5、 課題設計報告書第五頁開始為具體內容：
（1）開發背景
（2）網站分析設計部分
1）客戶需求分析
2）網站風格定位
3）網站建設方案
● 網頁風格創意設計
● 網站欄目劃分
● 欄目內容介紹
● 網站拓撲圖
4）網站效果圖
（3）網站制作部分
1）效果圖制作
2）網頁素材及網站架構制作
3）首頁制作頁面設計
4）子頁面制作
6、課題設計報告書最后一頁是本次課程設計的小結和參考文獻。
7、字數要求不少于300字。
8、打印紙張使用B5紙，頁邊距設為上、下、左2厘米，右1.5厘米.
教師評語
目錄
開發背景…………………………………………………………………………4
前期準備…………………………………………………………………………4
客戶需求分析……………………………………………………………………4
網站風格定位……………………………………………………………………5
色彩………………………………………………………………………………5
排版………………………………………………………………………………5
特效……………………………………………………………………………....6
網站建設方案……………………………………………………………………6
網頁風格創意設計………………………………………………………………7
網站欄目劃分……………………………………………………………………7
欄目內容介紹……………………………………………………………………8
網站拓撲圖………………………………………………………………………9
實訓目的…………………………………………………………………………10
實訓任務…………………………………………………………………………10
實訓項目…………………………………………………………………………11
網站基本介紹……………………………………………………………………11
登錄界面…………………………………………………………………………12
保存的文件位置…………………………………………………………………12
首頁展示效果圖…………………………………………………………………13
導航條展示效果圖………………………………………………………………14
表格布局…………………………………………………………………………14
“精品路線l推薦“圖…………………………………………………………..14
“景點簡介”鏈接的效果圖……………………………………………………15
景點介紹效果圖：………………………………………………………………16
土特產品介紹圖…………………………………………………………………16
“長白山之行“的鏈接效果展示圖……………………………………………17
網站底部導航欄的效果展示圖：………………………………………………18
網站版權的展示圖………………………………………………………………18
長白山旅游線路圖：……………………………………………………………18
“招商項目“展示圖……………………………………………………………19
實訓中的問題和解決辦法………………………………………………………19
實訓體會…………………………………………………………………………20
一、開發背景
長白山旅游網一直致力于面向全球華人提供最專業、最豐富、最詳實的旅游咨詢和戶外資訊，力求將長白山旅游網打造成一個東北旅游的互動樂園。
二、前期準備
本網站是以旅游休閑類為主體設計的，系統的介紹了長白山的風土人情。
三、客戶需求分析
客戶需求是指客戶創建本網站的目的和對網站建設提出來的特定的要求。
了解客戶的需求，是建好旅游網站的前提。旅游網站通過互聯網可以更好的開展信息交流和網上預訂等活動。這樣可以提高旅游服務的水平和旅游業務的來源。客戶對其擬建的長白山旅游網站提出的主要要求有以下幾點：
1、宣傳長白山的錦繡景區、民俗風情、土特產品等，提高吉林省旅游業務在國內的知名度。
2、適時地發布長白山的精品旅游路線、酒店推薦等信息，為旅游者提供最佳服務。
3、在網上發布招商項目，引進國內外的商家來長白山投資，為吉林省的經濟發展做出一份微薄之力。
4、 網站上要設有旅游論壇欄目或子頁，用戶可以對旅游路線等進行評論，也可以談談旅游的感受。這對于網站的改進和更新很有幫助。
四、網站風格定位
網站風格是指網站的整體形象給瀏覽者的綜合感受。這個整體形象包括站點的logo、標志、色彩、字體、標語、版面布局、瀏覽方式、交互性、文字、內容價值等諸多元素。可以從三個方面對長白山旅游網進行定位。
1、色彩
網站的色彩是瀏覽者整體的視覺感官，如果網站的色彩具有一致性，會使網站看起來美觀，使瀏覽者不容易對內容混淆，增加了瀏覽的簡潔與方便。從而更能襯托網站的主題，若色彩能與主題合理搭配，將會增加網站的易讀性。
長白山旅游網站選定的主題色是綠色。因為綠色介于冷暖色的中間，能給人和睦、寧靜、健康、安全的感覺，很適合旅游休閑類的網站。通過調整主色調的飽和度和透明度，產生不同視覺效果的綠色，
以及對這些不同的綠色進行漸變處理，形成頁面的整體色彩。這樣的頁面看起來色彩統一，有層次感。
網站中除了采用綠色系外，還和黃色、白色搭配，使網站產生一種優雅、舒適的氣氛。使人可以長時間駐留其間，也不會覺得疲勞。
2、排版
網頁是網站構成的基本元素。當瀏覽者輕點鼠標，在網站中漫游時，一幅幅精彩的網頁會呈現在面前。那么，決定網頁精彩元素是什么?色彩的搭配、文字的變化、圖片的處理等式不可忽略的因素，除了這些外，還有一個非常重要的元素——網頁排版。
長白山旅游網站采用的是“同字型”排版形式。最上面是網站的站標以及橫幅廣告。接下來是網站的主要內容：左右分列兩小條內容，中間是主要內容，與左右一起羅列到底。
最下面的是網站的一種基本信息、聯系方式、版權聲明等。這種版式的優點是網頁結構清晰，主次分明，信息量大，但弱點是規矩呆板。針對這個弱點，該網站在細節上做了一些處理。例如，在中間主要部分采用了柔美的曲線造型，使整個頁面顯得更加生動活潑。
3、特效
網站的特效就是讓網頁看起來生動活潑的各種應用，如Flash、JavaScript等。采用了VBScript腳本制作的滾動字幕。
五、網站建設方案
在旅游服務網站的建設中，前期準備至關重要的，要有明確的做網站的根本目的。該旅游網站通過對長白山的錦繡景區、民俗風情、土特產品信息的宣傳，大大的提高了吉林省旅游業的國內外知名度。由于旅游也作為一個整體的商業生態鏈，涉及旅游服務機構、酒店、交通、旅游區招商項目等內容，因此旅游服務網站可以將這些環節連成一個整體，進而可以大大的提高服務水平和業務的來源，從而推動吉林省經濟的進一部發展。為了充分發揮旅游服務網站的作用，就需要對網站的內容進行系統規劃。
六、網頁風格創意設計
該網站頁面顏色采用綠色為主，黃色為輔。在此色調的基礎上對綠色進行有機搭配，同時還要適當的輔以黃色。通過顏色傳達了新鮮、和睦、熱情、幸福、寧靜、健康、安全等元素，從而使網站產生了一種優雅、舒適的氣氛。
七、網站欄目劃分
1、景點介紹 2、路線推薦 3、保護區建
4、民俗風情 5、土特產品 6、長白山之行
7、旅行社 8、旅游論壇 9、徒步長白山
10、尋夢長白山 12、自駕車旅 13、旅游須知
14、休閑娛樂 15、旅游交通 16、旅游信息
17、旅游圖片
八、欄目內容介紹
1、景點介紹：本欄目中介紹長白山旅游區的主要景點，并對這些旅游景點的歷史、地理、文化淵源進行詳細的介紹。
2、旅游圖片：本欄目主要向旅客展示長白山的錦繡景區，使瀏覽者有身臨其境的感覺。
3、路線推薦：該欄目具體放置長白山各條旅游線路，使瀏覽者在該欄目中可以隨時了解到每條旅游線路的詳細內容。
4、旅游交通：該欄目具體介紹去長白山的各種交通路線，使瀏覽者在該欄目可查詢到公交、鐵路、航班的具體信息。
5、保護區建設：該欄目主要介紹長白山旅游區近幾年的規劃信息。以及旅游區的一些對外開發項目。
6、土特產品：該欄目提供了長白山的一些名貴野生資源信息，為旅游者旅行購物提供了便利。
民俗風情：該欄目主要介紹了長白山地區的飲食風俗、長白山冬俗、抽冰猴、打冰嘎等民俗風情。
7、尋夢長白山：該欄目運用了大篇幅的文字信息介紹長白的文物古跡和文化藝術，讓旅客不但對今日的長白山風光依依不舍，同時也對昔日的長白山有所了解。
8、徒步長白山：該欄目提供詳細的長白山徒步路線和幾條經典的登山路線。
9、自駕車游：該欄目主要向游客推薦一些合適的自駕車二日、三日游的游玩路線，同時對各景區需要做什么進行了詳細的說明。
長白山之行：通過該欄目的具體介紹，使瀏覽者能及時的獲得更多的長白山旅游線路、自駕車游線路等信息。
10、休閑娛樂：該欄目主要介紹旅游區的一些休閑茶樓、健身房、棋牌室、休閑咖啡和量版KTV等娛樂場所。
11、旅游信息：該欄目向瀏覽者介紹大量的最新旅游信息。
12、旅游須知：該欄目向瀏覽者介紹旅游健康、旅游法規、旅游錦囊、野外旅游和出入境等方面的信息。
13、旅游論壇：該欄目主要用來讓旅客對旅游線路、旅游服務等方面在網上進行評論，或者在網上談自己的旅游感受，與大家一起分享。
14、旅行社：該欄目是向瀏覽者推薦一些好的旅行社及旅行社服務事項。
九、網站拓撲圖
十、實訓目的
1． 進一步熟悉和掌握網站建設的基本流程和技術規范；
2． 鞏固運用Dreamweaver網頁制作軟件制作網頁、特別是制作動態網頁的知識；
3． 鞏固運用Fireworks圖像處理軟件進行網頁中圖形制作和運用flash動畫制作軟件設計網頁中動畫的知識；
4． 鞏固綜合運用Dreamweaver、Fireworks、Flash、Photoshops四個軟件完成網站建設任務的方法，能獨立設計一個內容完整、圖文并茂、技術運用得當的網站；
5． 具備獨立撰寫實訓報告等科技文件的基本能力；
6． 在網頁設計的實踐中培養分析問題、解決問題的能力，培養協作、交流的能力，培養創新能力和團隊意識。
十一、 實訓任務
1． 站點規劃，搜集資料。確定網站主題內容，規劃站點結構，從網上搜索相關資料（圖片、文字等）。
2． 進行主頁設計。構思主頁布局，進行主頁標題圖片的設計（要求原創），進行主頁其余圖片的設計和頁面內容的錄入，最后進行主頁的整體優化設計。
3． 網頁設計。除主頁以外的網頁設計，首先設計網頁模版，一部分網頁由模版生成，一部分為單獨設計（依據實際需要確定哪些網頁由模版生成，確定哪些網頁單獨設計）。包括版面設計和圖形設計、內容錄入等。
4． 動畫設計。主頁動畫設計和其余頁面動畫設計，充分運用所掌握技術，效果好。
5． 綜合優化。鏈接正確、得當，動態效果好（時間軸動畫、行為、代碼的嵌入等）
6． 網站測試并遞交。在瀏覽器中對完成的網站逐頁打開測試，包括鏈接正確與否，頁面打開時間，圖片和動畫是否丟失等。
十二、實訓項目
1、網站基本介紹
網站的主題是:游覽天下行，快樂共分享。背景圖片均為國內外知名旅游地圖片，體現網站主題。圖片和文字部分采用浮動形式，讓網站看起來更生動，更有吸引力；導航欄采用超鏈接，鏈接到相關網站，同時插入表單，設置了登陸界面和主頁的鏈接。還插入了音樂，輕柔舒緩，仿佛置身于游覽圣地中。
2、登錄界面：設置了用戶登錄名和密碼
3、保存的文件位置：
4、首頁展示效果圖：
5、導航條展示效果圖：
6、表格布局：
7、“精品路線推薦“圖：
8、“景點簡介鏈接的“效果圖：
9、景點介紹效果圖：
10、土特產品介紹圖：
11、“長白山之行“的鏈接效果展示圖：
12、網站底部導航欄的效果展示圖：
13、網站版權的展示圖：
14、長白山旅游線路圖：
15、“招商項目“展示圖
十三、 實訓中的問題和解決辦法
1、圖片太大，鏈接上就影響整個網頁的效果，將圖片修飾裁剪后在鏈接進去。
2、不能出現完整的站點地圖。講html另存為index.html，并設成首頁，其他導航欄要依次鏈接并設成首頁。
3、按照設置浮動文字的形式插入浮動的圖片。請教同學后，用命令
4.插入音樂的代碼：
5．用360的瀏覽器不能顯示所有的效果圖，只能用IE瀏覽器才可以完全顯示里面所有效果圖
實訓體會
一直很羨慕會作網站的人，是那樣的神奇，自己做了，才知道其中的技術含量。首先要掌握基本的操作，還要找各種資料，查找數據，一切并不像想象的那樣簡單，但做好后很有成就感，想要做一個漂亮的網站，不知光想就能做好的，平時上課開一點小差，有些東西就做不起了。。。。。唉，以后上課一定要認真聽講啊，網頁制作是我們的專業課，面臨現在的就業形勢，大學生畢業就失業已成普遍現象，但如果你真的有過硬的專業只是和實踐能力有何愁找不到工作呢。
信息的傳播，在當今社會以不可阻擋的勢頭迅猛發展著！在現代的信息時代中，多種交易都是通過網絡實現的，于是，對于掌握這方面的知識越來越重要了！所以，我們要啊抓緊一切機會學習，不斷的充實自己，在這個信息爆炸的時代，計算機技術的更新周期不斷縮短，緊緊掌握所學的知識是不行的，還要不斷擴展新的知識，再次實訓中，有的同學作出很漂亮的網站，還插入了自己做的視頻，而我是會插入簡單的圖片和音樂，當時的觸動很大，所以，現在的我們要有危險意識了，畢業后我們的路該怎樣走就看現在的學習了，不是抱怨學校和專業的時候了，沒有用的，再好的學校，再好的專業，自己不好好學，將來走進社會還是一無所成的！以后我會認真上每一堂課，認識完成每一次作業，每一次實習，將來的路是自己走出來的！！
web前端實訓報告總結篇2
《Web前端技術實訓》任務書
一、實訓課題名稱
1、 教育類網站的設計與制作
2、 商業類網站的設計與制作
3、 旅游休閑類網站的設計與制作
4、 體育健身類網站的設計與制作
二、 課題設計目的
通過實訓，應使學生鞏固所學知識，把所學的理論知識運用到網站制作實踐中。培養學生動手能力，將PS制作效果圖、HTML、CSS+DIV網頁布局、JavaScript等Web前端開發技術結合起來，在實訓環節中進行運用。為以后學習動態網站打下基礎。
三、 任務要求：
用PhotoShop、DreamWeaver等開發工具制作一個由靜態網頁構成的簡單網站，要求包括一個首頁、至少三個子網頁，按照網站開發流程，先做網頁效果圖，然后制作網頁素材、構建網站文件結構、規劃網頁布局、制作網頁動畫、實現網頁功能，爾后進行網站測試，并編制出各階段必要的文檔。在編寫文檔時，必須嚴格遵照要求，最后提交文檔。
功能要求：該網站首頁必須包括網站logo、導航條（帶有鼠標事件變化效果）、banner（簡單flash動畫）、圖片、多媒體運用、文字等主要信息展示；子網頁包括用戶注冊（帶有表單輸入項本地驗證功能）、登錄（用戶名和密碼非空驗證）、子網頁相關欄目。各頁面之間通過超鏈接切換。
最后要求提交詳細的課程設計報告及網頁效果圖（.psd）和網站運行文件，現場運行驗收開發的系統。
四、 課題設計報告書要求：
1、 課題設計報告書第一頁為封面，封面上寫清楚標題、班級、姓名、指導老師、完成日期。
2、 課題設計報告書第二頁為本任務書。
3、 課題設計報告書第三頁為教師評語。
4、 課題設計報告書第四頁為目錄。
5、 課題設計報告書第五頁開始為具體內容：
（1）開發背景
（2）網站分析設計部分
1）客戶需求分析
2）網站風格定位
3）網站建設方案
● 網頁風格創意設計
● 網站欄目劃分
● 欄目內容介紹
● 網站拓撲圖
4）網站效果圖
（3）網站制作部分
1）效果圖制作
2）網頁素材及網站架構制作
3）首頁制作頁面設計
4）子頁面制作
6、課題設計報告書最后一頁是本次課程設計的小結和參考文獻。
7、字數要求不少于3000字。
8、打印紙張使用B5紙，頁邊距設為上、下、左2厘米，右1.5厘米，
五、 如有雷同，將作不及格處理。
六、 完成時間：2012.1.5
教師評語
教師：
2012.1．5.
一 前言 - 3 -
1.1客戶需求分析 - 4 -
1.2網站風格定位 - 4 -
1．色彩： - 4 -
2．排版 - 5 -
3．特效 - 5 -
二 網站設計前期準備 - 5 -
2.1網站風格定位 - 6 -
1．頁面風格創意設計 - 6 -
2．網站欄目劃分 - 6 -
3.特效 - 6 -
三、網站拓撲圖 - 6 -
四、網站效果圖 - 7 -
五、中期網站制作 - 10 -
（一）網站首頁制作 - 10 -
1、首頁logo效果： - 10 -
2、站內公告效果： - 10 -
3、站內新聞效果圖： - 10 -
4、登陸效果圖： - 11 -
（二）網站搭建過程 - 13 -
三、制作網站的Logo動畫 - 15 -
六、網站建設心得小結 - 23 -
七、參考文獻 - 24 -
一 前言
1.1客戶需求分析
客戶需求，是指學校創建門戶網站的目的和對網站提出的特定要求。了解客戶需求，是建好學校門戶網站的前提。寧海職業技術學校對其擬建的門戶網站提出的主要要求有以下幾點。
（1）宣傳學校辦學理念，展示辦學設施、教師隊伍、專業設置、就業情況，提高學校的社會知名度；
（2）適時發布學校管理、教學、招生等相關信息，為求學者提供相關咨詢服務；
（3）獲取社會各界對學校教育教學情況的評價和意見、建議；
（4）建立與兄弟院校進行交流學習的平臺；
（5）向社會各界推薦畢業生，為畢業生提供就業信息。
1.2網站風格定位
校園網站就是學校的網上形象，每一所學校都有自己的特色，每一個院系或班級都會有自己的強項。對于本項目介紹的校園網站以撫州職業技術學校為例，從以下三個方面來學習該網站的風格定位。
1．色彩：
本項目中采用一種色彩，先選定主色調為橙色，這是令人激奮的色彩，具有明亮、健康、熱烈、溫暖、歡樂、輝煌、莊嚴，以及尊貴的色感，然后通過調整透明度或者飽和度，就是色彩進行變淡、加深或漸變的處理，產生新的橙色的近似色彩，使網頁看起來色彩統一，富有層次感。在頁面中借助淺灰色的背景圖像，采用了留白藝術給人一個遐想的空間，讓人感覺心情舒適、暢快。同時，也對于協調頁面的均衡起到相當大的作用。
2．排版
本項目就是采用骨骼型排版形式，網頁版式的骨骼型是一種規范的、理性的分割方法，類似于報刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結合使用，既理性、條理，又活潑而富有彈性。
3．特效
在本網站中有兩種動畫效果：一是采用Flash軟件制作了網站的廣告；二是采用Java Script腳本制作了滾動圖片。
二 網站設計前期準備
本項目以教育類網站為范例，系統介紹寧海職業技術學院網站的設計制作基本方法。
2.1網站風格定位
為了充分發揮校園網站的作用，就需要對網站的內容進行系統的規劃。
1．頁面風格創意設計
網站的頁面顏色初步擬定采用橙色為基礎色，在此色調的基礎上進行顏色漸變的展開，通過色彩的運用突出本網站要傳達的求知、務實、健康、熱烈、莊嚴等元素，使網站收到良好的創意效果。
2．網站欄目劃分
根據我們對用戶的了解，特建立以下欄目。
●學校概況●專業設置●新聞中心 ●教學管理●多彩校園●職教動態●校報校刊
●給我留言●視頻新聞●校園快訊●校園文化●專業簡介●校園生活●學生風采
3.特效
網頁特效就是讓網頁看起來生動活潑的各種應用Flash、
JavaScript、VBScript等。本網站采用Flash制作網頁動畫、
photoshop設計平面效果圖、Dreamweaver進行頁面排版、DIV技術
優化頁面效果.
三、網站拓撲圖
四、網站效果圖
（1）網站主頁效果圖如圖7-1示
圖7-1
（2）網站子葉效果圖如圖7-2-1和圖7-2-2所示
圖7-2-1
圖7-2-2
五、中期網站制作
（一）網站首頁制作
利用photoshop制作網站首頁導航欄，效果如下圖所示：
1、首頁logo效果：
2、站內公告效果：
3、站內新聞效果圖：
4、登陸效果圖：
5、 新聞效果圖：
6、教務管理果圖：
7、登陸界面效果圖：
8、注冊頁面效果圖：
（二）網站搭建過程
步驟一 網站首頁的制作
一、 創建站點并設置頁面屬性
1．啟動 Dreamweaver 程序后，創建站點，站點包括三個文件夾：files、images、other
和一個主頁文件：shouye.htm，然后編輯shouye.htm網頁，如圖 下圖 所示。
小提示： 創建站點時必須注意文件 夾及主頁的標準格式，否則對 以后網站的管理與維護不利。
2．在編輯窗口中單擊“頁面屬性”按鈕，打開“頁面屬性”對話框。選擇“分類”區
的“外觀”選項，設置字體大小為 9pt；選擇“標題/編碼”選項，輸入“寧海職業技術學院！ ” ，
編碼為“簡體中文（GB2312） ”選項；設置背景圖像；在上、下、左、右邊距文本框中均輸
入“0”像素，單擊“確定” ，返回網頁編輯窗口，如圖 下圖 所示。
二、設置CSS樣式
設置 CSS 樣式可以在制作網頁前進行，也可以邊制作網頁邊進行設置，但通常推薦的方
法是制作網頁前設置基本的 CSS 樣式，在制作網頁過程中根據需要再隨時填加 CSS樣式。
1． 打開“CSS 樣式”面板，單擊新建 CSS 樣式按鈕，如圖 下圖所示。
小提示：CSS 樣式表可以使操作簡便，請注意樣式表的創建。
三、制作網站的Logo動畫
2．進入“新建 CSS 規則”對話框，在“標簽”下拉列表中選擇“td”選項，在“定義
在”中選擇“新建樣式表文件” 。單擊“確定”，打開“CSS 規則定義”對話框，在其中設
置字體大小為 12 像素，行距為 130%，如圖下圖所示。
小提示： 一般主頁中文本內容的字號均為 12 或 13 像素，否則顯示效果就不佳了。 CSS 樣式定義在新建樣式表文件中有利于其它文件通過鏈接來使用該樣式。
3．單擊“確定”按鈕，在 CSS 樣式面板上可以看到新添加了css.css 文件，根據網頁預設的效果，重復設置后最終得到 CSS 樣式。
四、制作標題欄和導航
1．插入一個表格，參數如圖 下圖所示。
2． 設置表格高度為 140 像素，并居中對齊，效果如圖 下圖 所示。
3． 將光標移到單元格內，插入 LOGO 圖像，效果如圖
4． 在上面表格下方插入 1行 10 列的表格，參數如圖
5．分別設置第1、2 列單元格屬性，并分別填加背景圖像，其它單元格的設置同第2列單元格，輸入導航文字后效果圖略。
五、制作主體內容
網頁主體內容大致分為五部分， 首先使用表格劃分為五個橫向區域，然后在每個單元格
內分別插入嵌套表格制作不同區域的內容。
第一部分
1．在上面表格的下方，插入 1行 2 列、776*203 像素的表格，背景色為白色。
2．在第 1 列中插入 3行 1 列的表格，在該表格中分別插入圖像、背景圖像后效果如圖 所示。
在圖所示的空白區域變換圖像的制作：先插入 JavaScript 腳本，在空白單元格中插入一個1 行 1 列、大小為 175*120 像素的表格，在表格的代碼視圖中插入代碼，
3．在第 2 列中插入 3個表格，圖略。
第 1 個表格中添加滾動字幕
第 2 個表格中插入文本及圖片
第 3 個表格的第 1 列單元格中插入 1 行1 列的表格， 在其中插入圖片，圖片周圍背景圖片為 寧海背景.jpg；第2 列單元格中插入6 行 3 列的表格，填加文本，文本所在行背景圖片為寧海1.jpg
第二部分
1. 在第一部分表格的下方插入 1 行1 列的表格，如圖
2．在上述表格中嵌套 1 個 3行 1 列的表格，如圖
3．在第1 行、第 3 行單元格中分別插入圖片，第 2 行單元格中嵌套1 個 1 行6 列的表格，插入圖片，效果如圖
第三部分
這部分與第一部分大體相同，所以步驟就省略了，效果如圖。
第四部分
1． 在第三部分表格下插入 1 個 1行 1 列的表格，如圖
2． 在上述表格中嵌套 1個 3 行 1列的表格，在第 1 行、第 3 行單元格中分別插入圖片，第 2 行單元格中添加背景顏“#fd7011” 。在第 2 行單元格中編輯JavaScript 腳本得到圖片滾動的效果，如圖
第五部分
1． 在第四部分表格下插入 1 行 2 列的表格，如圖
2． 在第 1列單元格中分別插入 3行 1列的表格， 分別通過表格的嵌套得到效果如圖
3． 在第 2 列單元格中，插入 1個 1 行 3列的表格，如圖
4．在上述表格的下方插入 1行 1 列的表格，在該表格中再嵌套8 行 6 列的表格，如圖
5.在上述表格的下方插入 FLASH 對象，如圖
第六部分
在第五部分表格的下方，插入 1 行1 列的表格，在其中嵌套 1 行5 列的表格，插入相應的鏈接圖片，如圖
五、制作版權信息
在主體內容表格第六部分的下方插入5 行 1 列的表格，輸入文本及圖片，如圖
步驟二 網站子頁的制作
本網站的子頁在形式上套用了主頁的結構，使之在風格上與主頁完全統一。頁面特點：
（1）通過表格的嵌套、單元格的拆分與合并來進行網頁元素的布局；
（2）表單的制作；
（3）欄目背景圖片的制作。
步驟三 鏈接主頁與子頁
對主頁與各子頁之間進行鏈接，并使鏈接暢通。
七、網站建設心得小結
隨著網絡技術應用的快速普及,電子商務正以前所未有的速度迅猛發展,由最初的電子零售階段、電子貿易階段發展到網上交易市場階段。網上交易市場是一個從內向外、內外整合的供應價值鏈。進入網上交易市場的企業內部必須先有一套合作的電子化生產管理系統,并且這套系統能與外部信息無縫對接,從而實現企業生產、采購、銷售全過程的整合信息化。?? 在這實訓期間內，我的網站建設遇到很多問題，如：如何進行頁面布局，怎樣嵌套div，怎樣制作網頁動畫等等一系列問題。一開始滿頭霧水，根本不知道該從哪里下手，像無頭的蒼蠅到處亂竄，摸索了幾次后才開始慢慢理出頭緒，?? 首先明確網站層次，一共有幾級分類，類別劃分的標準是什么，一共有多少類別，每個類下面的二級分類又是什么，首頁、各級頁面的設計框架圖，網站有多少個共同的元素，如何管理。有著這樣的思路建起網站來就容易多了。在老師的幫助下，我的網站慢慢浮出水面。
在制作網站的過程中，一開始都是按部就班的照著書本抄，結果發現它的知識點根本不夠用，只能上網查資料，問老師、問同學，尤其是在繼續組裝時，div嵌套技術一點都不會，看著一串一串的代碼就頭暈，只能努力克服，尋找解決辦法；再次是在進行主頁與子葉的鏈接是也把我難倒了，尋找多方幫助，才鏈接成功。網站制作不是一份簡單的工作，要有廣博的知識面和很好的耐心，在以后的學習過程，會更加努力，更加細心，不斷學習各方面的知識，使自己更加完善。
八、參考文獻
1、《網站前臺設計項目實戰》 北京理工大學出版社
徐敏 韓寶玉 劉改 主編
祝海英 李東升 付曉波 副主編
薛紅啟 主審
2、《javascript程序設計基礎教程》 人民郵電出版社
曾海 主編 高春艷 于一 張春 副主編
web前端實訓報告總結篇3
實 習 報 告
學生姓名：
學 號：
專業班級：
實習單位：
實習時間：
校外指導教師：
校內指導教師：
成 績：
1實習背景1.1 實習目的了解軟件開發的各種模式，開發流程，以及各種形式的建模
詳細學習敏捷開發的各個流程，并通過實習來體會敏捷開發所帶來的效率
掌握HTML5、CSS、JAVASCRIPT等技術
1.2 實習起止時間開始時間：2015年7月12號
截止時間：2015年7月18號
1.3 實習內容概要學習軟件開發的各種模式，重點學習了敏捷開發（專業老師講授）
學習HTML5、CSS、JAVASCRIP技術（形式：觀看視頻）
按照敏捷開發的流程，學員分組，制定每日的站立會議時間
觀看實習內容例子的視頻，分工合作
提交實習成果，老師檢查打分
2 實習內容2.1 實習過程可以以周為時間單位概述實習各階段所從事的主要工作等；
學習階段
開發模式
1) 軟件生命周期
同任何事物一樣,一個軟件產品或軟件系統也要經歷孕育、誕生、成長、成熟、 -衰亡等階段，這一般稱為軟件生命周期。
軟件開發生命周期(SDLC)是指軟件開發的全部過程、活動和任務的結構框架。
SDLC的一般步驟包括：確定問題、可行性分析與開發計劃、收集需求、分析與設計、編碼開發、測試、安裝、維護。
2) 軟件生命周期模式
典型的幾種生命周期模式包括：瀑布模式、演化模式、螺旋模式、快速原型模式、噴泉模式和混合模式等。
3) 敏捷開發
敏捷開發（Agile）是一種關注價值、消除浪費、以人為核心、迭代、循序漸進的開發方法。
特點：
a) 是一種開發方法學（Methodology），可以應對客戶快速變 更的需求。
b) 強調以人為核心，采用迭代的方式，循序漸進地開發軟件。
c) 在敏捷開發過程中，軟件項目被劃分成多個相互聯系但也能獨立運行的子項目。
d) 每個子項目在開發、測試直至完成的過程中一直保持可使用的狀態。
e) 這個過程就是要形成開發過程中團隊之成員之間更加有效的合作關系，使其靈活性更高，以適應不斷變化的需求。
技術講解
1) 講解內容：HTML5、CSS、JAVASCRIPT技術
2) HTML5
HTML5是一個描述用于幫助開發者創建下一代網站和應用的HTML、CSS和JavaScript規格的涵蓋性術語。這個定義中最顯眼的三個部分是：HTML、CSS和JavaScript。他們定義了開發者如何使用優化標記，風格更豐富的性能，以及新JavaScript API來制作最新的網絡開發功能。簡單而言，HTML5=HTML+CSS+JavaScript。
特性：
a) 語義特性（Class：Semantic）
b) 本地存儲特性（Class: OFFLINE & STORAGE）
c) 設備兼容特性 (Class: DEVICE ACCESS)
d) 連接特性（Class: CONNECTIVITY）
e) 網頁多媒體特性(Class: MULTIMEDIA)
f) 三維、圖形及特效特性（Class: 3D, Graphics & Effects）
g) 性能與集成特性（Class: Performance & Integration）
h) CSS3特性(Class: CSS3)
3) CSS
CSS(層疊樣式表)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。
CSS使用方法：
a) 外聯式Linking（也叫外部樣式）：將網頁鏈接到外部樣式表。
b) 嵌入式Embedding（也叫內頁樣式）：在網頁上創建嵌入的樣式表。
c) 內聯式Inline（也叫行內樣式）：應用內嵌樣式到各個網頁元素。
CSS布局特點：
a) 精簡代碼，降低重構難度
b) 網頁訪問速度
c) SEO優化
d) 瀏覽器兼容性
基礎語法：
a) CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
b) 選擇器 {宣言1; 宣言2; ... 宣言N }
c) 選擇器通常是您需要改變樣式的 HTML 元素。
d) 每條聲明由一個屬性和一個值組成。
e) 屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
f) 選擇器 {property: value}
4) JAVASCRIPT
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
組成
a) ECMAScript，描述了該語言的語法和基本對象。
b) 文檔對象模型（DOM），描述處理網頁內容的方法和接口。
c) 瀏覽器對象模型（BOM），描述與瀏覽器進行交互的方法和接口。
特點
a) 是一種解釋性腳本語言（代碼不進行預編譯）。
b) 主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行為。
c) 可以直接嵌入HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。
d) 跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行（如Windows、Linux、Mac、Android、iOS等）。
開發階段
開發第一天
站立會議：8.00—8.15
會議內容：小組分工，制定站立會議時間，了解每個人的學習情況，交流學習的內容
任務內容：“打地鼠”網頁游戲的網頁布局——>HTML5+CSS技術
開發第二天
站立會議：8.00—8.15
會議內容：小組分工，完成情況，了解每個人的進度，交流學習的內容
任務內容：“打地鼠”網頁游戲的功能實現
開發第三天
站立會議：8.00—8.15
會議內容：小組分工，完成情況，查漏補缺，測試軟件，尋找bug，交流學習的內容
任務內容：“打地鼠”網頁游戲的軟件測試，尋找不足，確認無誤，提交實習結果
2.2 實習內容項目介紹
“打地鼠”網頁游戲是安卓版“打地鼠”游戲的進一步開發，可以實現在網頁中構建游戲的所有功能，并且不用下載安裝既可以用的游戲，網頁版游戲的市場前景潛力無限，國內逐漸發展起來一批喜歡網頁游戲的用戶群，并且網頁游戲屬于中小型的項目，易于開發，應用于敏捷開發的流程，效率十分高。
我的任務
“打地鼠”網頁游戲網頁布局的調整，以及“打地鼠”之所謂“打”的動畫實現，還有最后的“軟件測試”。
軟硬件平臺
dreamweaver cs6，Mozilla Firefox瀏覽器，photoshop cs6
使用技術
HTML5
CSS
JAVASCRIPT
瀏覽器中的開發人員調試
photoshop cs6的圖片處理技術
JAVASCRIPT的進階——>JQERY技術
2.3 主要成果“打地鼠”網頁游戲的成功開發，基本功能：打地鼠的動畫，游戲的時間限制，統計分數，開始游戲，暫停游戲，結束游戲，走馬燈介紹等等。但是在實際測試的時候仍然出現了一些bug，比如動畫的遲緩（主要是因為動畫的緩沖沒有做好），還有一些分數的統計不甚合理，這在我們應用的時候及時的發現，并且處理了這樣的問題。
3 總 結3.1 網頁游戲的認識網頁游戲又稱Web游戲，無端網游，簡稱頁游。是基于Web瀏覽器的網絡在線多人互動游戲，無需下載客戶端，不存在機器配置不夠的問題，最重要的是關閉或者切換極其方便，尤其適合上班族。
在那個網絡泡沫經濟高速擴張的年代，在那個大量菜鳥網民擁入網絡的年代，在那個文字MUD已經逐漸衰退而網絡游戲又尚未興起的年代，這種新穎玩意兒的推出，無疑讓很多人為之驚艷。僅僅通過簡單注冊，就可以邊玩游戲邊泡論壇。盡管只有簡陋的游戲界面、一堆文字、幾張圖片，游戲方式也不過是刷新頁面而已，但WebGame卻帶來了無限的樂趣和遐想，同時還演繹了讓無數人刻骨銘心的愛恨情仇。如今網絡游戲百花爭鳴，到處充斥著唯美的人物和絢麗的光影。你會偶爾緬懷那些逝去的歲月嗎？至少在我心底，一直有數款難以忘懷的WebGame。
WebGame，顧名思義就是基于Web瀏覽器的網絡在線多人游戲。從誕生發展至今，WebGame大概分為三種類型：一是基于Web瀏覽器，使用PHP/ASP/Perl等解釋語言建設的虛擬社區；二是基于Web瀏覽器，使用Flash/JAVA技術制作的游戲；三是需要下載客戶端并連接專用服務器運行的游戲。
網頁游戲盡管EBS將國內WebGame的發展往前推了一把，但是一段時間后，這類WebGame的弱點逐漸暴露出來。一些架設WebGame供網民免費游玩的站點，由于質量和管理不過關、服務器負載過大，丟失了不少玩家。同時，比WebGame華麗N倍的網絡游戲興起后，WebGame自然就逐漸沒落了。傳統意義上的WebGame依然為少部分熱愛者延續至今，而且游戲性與游戲素材比以前豐富許多。
前景分析
網頁游戲的市場潛力巨大，與其他類型網游相比有著強勁優勢
網頁游戲的用戶群逐漸培養起來，極有可能成為未來網游用戶的一支主力軍
避大型網游之鋒芒，堅持走游擊路線。堅持和中小站長合作
針對用戶群大膽創新，敢于突破固有模式
游戲特點
混搭式類型成主流
策略游戲不斷豐富
游戲內容多樣化
消費群體不斷成熟
市場集中度提高
游戲跨形態融合
產品結構漸豐富
步入全球化運作
企業品牌意識增強
3.2 實習的自我評價這次實訓充分利用了課堂所學，掌握了許多關鍵技術，例如模版技術，CSS樣式，使得制作過程方便了很多。在完成基本要求得基礎上，文件夾、文件命名規范；文件存放位置合理； 制作完成之后進行過現場清理：沒有無用的文件、文件夾，沒有斷鏈(外部鏈接不算)；工作量飽滿：內容較豐富、自己設計制作的素材應用多；色系、布局合理美觀、考慮用戶訪問方便；采用各種特效、并且運用合理。 不過也有些不足，比如一開始沒有把幾個人制作的文件夾分開，導致后面匯總時比較麻煩。還有就是文件名字開始中文命名，有的時候鏈接錯誤。這次的作業隨說我是在網上找了很多做好的模板但是我還是很有成就感，覺得自己很不錯。不過總的來說，對這次的作品相當滿意，不僅選擇了我們自己喜歡的內容，而且在我們的水平上把它做的很精美。在這個過程中我們意識到了自己在相關技術上的不足，通過學習，知道了如何改進我們的缺點，相信在以后的應用中，我們會做的更加完美！
