網(wǎng)頁實訓(xùn)報告

PAGEPAGE1安徽機電職業(yè)技術(shù)學(xué)院《Html+Css網(wǎng)站設(shè)計》課程實訓(xùn)說明書系（部）：信息工程系班級：姓名：指導(dǎo)教師：方繼才王軍張婷婷2011~2012學(xué)年第一學(xué)期

摘要經(jīng)本次的實驗我們主要的是學(xué)習(xí)table布局，及使用div布局，這兩種方法各有各的好處，在以前沒有學(xué)習(xí)div布局的時候，可是學(xué)習(xí)網(wǎng)頁，首先使用的就是使用table布局，感覺很好用，按照老師教的能完成一些簡的網(wǎng)頁，感覺很好用，按照這樣的方式我們慢慢的就開始組合成網(wǎng)頁，能完成一個比較簡單的網(wǎng)頁，感覺很好玩，一個大型的網(wǎng)頁我們能把他分割很多的小塊，并按照我們的思路建立網(wǎng)頁設(shè)計的整體框架。在學(xué)習(xí)了div布局的時候，我們可是使用的時候我們感覺入手非常的難，有的時候根本不知道自己在做什么，在以后的學(xué)習(xí)中，我們對div布局有了深入的了解我們，我們感覺div布局比table布局更靈活，在table布局中遇到的弊端基本上能在div中彌補，并且div不受表格或框架，或自己構(gòu)思思路的影響。很實用。并且在制作網(wǎng)頁的時候我們做的效果還是比table好看的很多，可以設(shè)置很多的東西，他有自己專門的一個文件放置自己格式設(shè)置。減少代碼量，看起來很合理。在本次的實用中我們中我們主要的就是完成10個網(wǎng)頁，在主主頁的布局中我們主頁實用的是div布局，使界面看起來很合理，在其他附頁當中我們有兩個網(wǎng)頁實用的是table布局，其他的是使用混合布局方式，在這兩種方式混合使用中，能從中了解更多的知識，并且在設(shè)計的時候混合使用比單方面使用更好用。我們在這次的使用中不僅需要學(xué)會兩種布局方式，而且要學(xué)會在網(wǎng)頁之間怎么的建立超鏈接，使用插入一些圖片，設(shè)置圖片的格式，及使用不同格式的文件。目錄第一章：引言 41.1設(shè)計目的 41.2開發(fā)工具 41.3Dreamweaver介紹 4第二章：需求分析 62.1需求描述 62.2功能描述 6第三章：總體設(shè)計 73.1設(shè)計概念 73.2網(wǎng)頁界面布局特點 7第四章：詳細設(shè)計 94.1站點設(shè)計 94.2主界面設(shè)計 94.3附頁界面設(shè)計 104.4信息工程系 114.5信息工程系簡介 124.6校園文化 134.7校園文化 14第五章:總結(jié) 15參考資料： 15第一章：引言1.1設(shè)計目的1.通過綜合實訓(xùn)進一步鞏固,深化和加強學(xué)生的理論知識于專業(yè)技能。(1)掌握規(guī)劃網(wǎng)站的內(nèi)容結(jié)構(gòu),目錄結(jié)構(gòu),鏈接結(jié)構(gòu)的方法。(2)熟練掌握網(wǎng)頁制作軟件Dreamweaver8和基本操作和使用技能。(3)掌握頁面的整體控制和頭部內(nèi)容設(shè)置的方法。(4)熟練掌握網(wǎng)頁頁面布局的各種方法。(5)熟練掌握在網(wǎng)頁中輸入,設(shè)置標題和正文文字的方法。(6)熟練掌握在網(wǎng)頁中插入圖像,Flash動畫和背景音樂的方法。(7)熟練建立各種形式的超級鏈接的方法。(8)掌握表單網(wǎng)頁制作方法。(9)掌握網(wǎng)頁特效制作方法。(10)掌握網(wǎng)站測試的方法。2.訓(xùn)練和培養(yǎng)學(xué)生獲取信息和處理信息的能力,充分培養(yǎng)和提高學(xué)生的動手能力,學(xué)會通過網(wǎng)站、書籍、素材光盤等方式收集所需的文字資料、圖像資料、Flash動畫和網(wǎng)頁特效等。3.培養(yǎng)學(xué)生運用所學(xué)的理論知識和技能解決網(wǎng)站開發(fā)過程中所遇到的實際問題的能力及基本工作素質(zhì)。4.培養(yǎng)學(xué)生理論聯(lián)系實際的工作作風(fēng),嚴肅認真的科學(xué)態(tài)度以及獨立工作的能力,樹立自信心。1.2開發(fā)工具Dreamweaver8、Fireworks、Photoshop、Flash、Access、IIS1.3Dreamweaver介紹個可視化的網(wǎng)頁設(shè)計和網(wǎng)站管理工具，支持最新的Web技術(shù)，包含HTML檢查、HTML格式控制、HTML格式化選項、HomeSite/BBEdit捆綁、可視化網(wǎng)頁設(shè)計、圖像編輯、全局查找替換、全FTP功能、處理Flash和Shockwave等富媒體格式和動態(tài)HTML、基于團隊的Web創(chuàng)作。在編輯上你可以選擇可視化方式或者你喜歡的源碼編輯方式。DreamweaverMX2004的十大新特性:1.動態(tài)跨瀏覽器驗證:自動檢測標簽和CSS規(guī)則來適應(yīng)所有主流瀏覽器!2.更強大的CSS支持!3.內(nèi)建的圖形編輯引擎:修剪,改變大小,尺寸,旋轉(zhuǎn)角度,調(diào)節(jié)明暗度都不需要離開Dreamweaver環(huán)境,因為它本身集成了FW的基本圖形編輯技術(shù).(這一點有模仿FrontPage的嫌疑,但這個功能確實很實用)!4.安全FTP:完全加密傳輸保證文件和帳號信息的安全!5.增強對當今技術(shù)的支持:支持當今主流的開放環(huán)境:ColdFusion,J2EE,PHP,.NET,和其他主流的服務(wù)器技術(shù).Dreamweaver現(xiàn)在加入了XML命名空間支持,ASP.NET表單控件對象,新的參考書內(nèi)容和新的PHP服務(wù)器端行為!6.無縫整合外部文件和代碼:直接將Word和Excel文檔復(fù)制和粘貼到Dreamweaver中,會保留字體,顏色,CSS樣式表信息.使用,使用系統(tǒng)支持的編碼保存任何字體,包括雙字節(jié)字符集.7.緊密整合MM的其他工具:加強了和MM其他幾款產(chǎn)品的協(xié)同工作能力.例如:你可以通過DW直接設(shè)置Flash組件的參數(shù).8.基本支持改良:插入條,表格工具都有改進!9.增強代碼編寫工具:編輯代碼更省時,例如右鍵編寫代碼工具,增強的查找和替換,高效的屬性面板.10.改進的設(shè)計開放環(huán)境:一個改良的用戶界面,更高的實用性,非常親切和有邏輯,讓你快速找到你想要的東西,一個新的開始屏幕讓你快速訪問最近的文件和教程資源.第二章：需求分析2.1需求描述通過本次實訓(xùn)，讓同學(xué)們對本學(xué)期的《網(wǎng)頁設(shè)計與制作》這門課程有一個系統(tǒng)的認識，加強和鞏固已有的知識，訓(xùn)練和培養(yǎng)學(xué)生獲取信息和處理信息的能力，充分培養(yǎng)和提高學(xué)生的動手能力，學(xué)會通過網(wǎng)站、書籍、素材光盤等方式收集所需的文字資料、圖像資料、Flash動畫和網(wǎng)頁特效。能夠運用所學(xué)的理論知識和技能解決網(wǎng)站開發(fā)過程中所遇到的實際問題，同時也能夠體現(xiàn)自己的工作作風(fēng)，認真學(xué)習(xí)的態(tài)度。主要是希望同學(xué)門能夠熟練的掌握利用我們所學(xué)的知識來制作一個主題鮮明的網(wǎng)站。2.2功能描述我們在實訓(xùn)的時候我們主要使用用到的是div及table布局方式，我們利用者兩種方式我們建立一個主頁，在主頁當中我們建立一些關(guān)鍵的連接，在點擊的時候我們能調(diào)用我們所需要的網(wǎng)頁，使我們所做的網(wǎng)頁連接起來，形成一個完整的網(wǎng)頁，在這次的實訓(xùn)當中我們主要做的網(wǎng)頁課題是校園文化建設(shè)，在力個網(wǎng)站、也當中我實現(xiàn)不同網(wǎng)頁之間的調(diào)用，在進行超鏈接的時候我們主要利用的是a：link標記和a:hover標記，設(shè)置連接的一些特點，在插入flash圖片的時候能顯示出來。用不同的網(wǎng)頁展示我們所要表現(xiàn)的主題，使瀏覽者能更好的了解我們的校園。第三章：總體設(shè)計3.1設(shè)計概念在學(xué)習(xí)網(wǎng)頁制作的時候我們主要的是學(xué)會使用table表格，div，css布局方式，這兩中方式是制作網(wǎng)頁的時候經(jīng)常用到的兩種布局方式，及一些其他網(wǎng)頁制作工具如：Dreamweaver、Fireworks、Photoshop、Flash、Access、IIS等一些網(wǎng)頁制作的常用的軟件，在網(wǎng)頁建成之后我們能熟練的建立進行超鏈接。3.2網(wǎng)頁界面布局特點（1）定義CSS樣式（2）創(chuàng)建樣式表（3）創(chuàng)建類用類選擇符能夠把多個的元素分類定義不同的樣式。類名可以是包含任何字母和數(shù)字的組合，所有類樣式均以句點（.）開頭。（4）創(chuàng)建標簽采用HTML中標準的標記名稱作為選擇符（樣式名）。作為原HTML標準標記（屬性）的補充。（5）創(chuàng)建CSS鏈接樣式定義除選擇器為類和標簽之外的其他CSS樣式，有三種形式：派生選擇器ID選擇器偽類（6）設(shè)置樣式表通過設(shè)置樣式表樣式定義CSS規(guī)則的屬性，可以對網(wǎng)頁中的布局元素，如表格、字體、顏色、背景、鏈接效果和其他圖文效果實現(xiàn)精確的控制。首先，創(chuàng)建新規(guī)則，然后設(shè)置下列任意屬性，如圖10-18所示，樣式表的設(shè)置總共分為八大類:類型、背景、區(qū)塊、方框、邊框、列表、定位和擴展。（7）定義CSS類型屬性使用“CSS規(guī)則定義”對話框中的“類型”類別可以定義CSS樣式的基本字體和類型設(shè)置。（8）定義CSS樣式背景屬性使用“CSS規(guī)則定義”對話框的“背景”類別可以定義CSS樣式的背景設(shè)置?？梢詫W(wǎng)頁中的任何元素應(yīng)用背景屬性。例如，創(chuàng)建一個樣式，將背景顏色或背景圖像添加到任何頁面元素中，比如在文本、表格、頁面等的后面。還可以設(shè)置背景圖像的位置。（9）定義CSS樣式區(qū)塊屬性使用“CSS規(guī)則定義”對話框的“區(qū)塊”類別可以定義標簽和屬性的間距和對齊設(shè)置。（10）定義CSS樣式方框?qū)傩允褂谩癈SS規(guī)則定義”對話框的“方框”類別可以為用于控制元素在頁面上的放置方式的標簽和屬性定義設(shè)置?？梢栽趹?yīng)用填充和邊距設(shè)置時將設(shè)置應(yīng)用于元素的各個邊，也可以使用“全部相同”設(shè)置將相同的設(shè)置應(yīng)用于元素的所有邊。（11）定義CSS樣式列表屬性“CSS規(guī)則定義”對話框的“列表”類別為列表標簽定義列表設(shè)置（如項目符號大小和類型）。（12）定義CSS樣式定位屬性--第四章：詳細設(shè)計4.1站點設(shè)計首頁首頁信息系系部概況風(fēng)采首頁附件校園風(fēng)采校園風(fēng)采4.2主界面設(shè)計本網(wǎng)頁主要的是使用了Div布局方式，在網(wǎng)頁的首頁我們采用的是a：link設(shè)計的超鏈接，并顯示字體的顏色，使用a:hover設(shè)計樣式設(shè)計當鼠標移動到上面的時候，會顯示另一種效果，用這種方式做，顯得界面設(shè)計很美觀，在顯示的時候顯示不同的效果。里面建立了很多的超連接和附頁建立不同的關(guān)系，可以調(diào)用其他的網(wǎng)頁或網(wǎng)站。4.3附頁界面設(shè)計次附頁頁面主要顯示的是校園文化風(fēng)景圖，在網(wǎng)頁的界面中我們主要是利用圖片添加的效果，在這個網(wǎng)頁中我們使用了table網(wǎng)格和Divi格式布局，在圖片顯示的欄中我們主要用到的就是table格式插入圖片，在行為動態(tài)和快速連接中我用到的是Divi格式布局，整體大框也是使用的div格式布局，整體效果還是很好的，在圖片中我們也使用了超鏈接，設(shè)置顯示的字體顏色，及當鼠標移動的時候顯示其他的顏色此時的圖片畫面有一種動態(tài)的效果，同時我還使用了JavaScript腳本語言，鼠標顯示的時候會出現(xiàn)機電歡迎你的字體移動效果界面的設(shè)計格式還算很好。4.4信息工程系本網(wǎng)頁主要講的是信息工程系系部網(wǎng)站，總體的布局還算是好的，在顯示的方面顯得有一些單調(diào)吧！次網(wǎng)頁中我也是運用的是div格式布局和table布局格式，兩種格式混用，能減少我們的工作量布局的時候我們做起來也很合理，可以隨時的改變我們設(shè)計的界面效果，菜單欄我采用的是滾動的方式顯示，重復(fù)的出現(xiàn)，提醒的文字，中的來說建立的還好。4.5信息工程系簡介此網(wǎng)頁主要顯示的是信息工程系系部的概括，主要講的是簡介情況，這個網(wǎng)頁我們主要用的table格式布局，這網(wǎng)頁在使用table是顯得比較麻煩，雖然此網(wǎng)頁的界面布局不是很好，界面的內(nèi)容還是不是很多，但是基本上完成了table格式設(shè)計的一些要求。4.6校園文化4.7校園文化第五章:總結(jié)經(jīng)過一周緊張的實訓(xùn)，讓我感受到很多，因為這周任務(wù)很重，所以這周都很緊張，但我體會到網(wǎng)頁做出來的快樂和興奮，但自己把一個一個問題解決了，有一種莫名的感覺就一直想做下去。在這次實訓(xùn)中我明白了很多，想要做一下好網(wǎng)站，素材和技能都十分重要，好的素材需要多方面查找資料的，好的技能需要不斷的實踐。有些東西不是一來就會的，是要靠每天練習(xí)才能得心應(yīng)手，松懈了就淡忘了，以前建一個站點那么簡單，經(jīng)過一段時間沒做網(wǎng)頁了，一下子要建一個站點有點忘卻了。以前上課聽講都聽懂了，也會做簡單的，現(xiàn)在才發(fā)現(xiàn)原來不是那么簡單，上課之后一定要多練才有效果，聽懂了沒多大效果，實踐才是最真的。在學(xué)習(xí)了div布局的時候，我們可是使用的時候我們感覺入手非常的難，有的時候根本不知道自己在做什么，在以后的學(xué)習(xí)中，我們對div布局有了深入的了解我們，我們感覺div布局比table布局更靈活，在table布局中遇到的弊端基本上能在div中彌補，并且div不受表格或框架，或自己構(gòu)思思路的影響。很實用。并且在制作網(wǎng)頁的時候我們做的效果還是比table好看的很多，可以設(shè)置很多的東西，他有自己專門的一個文件