網(wǎng)頁(yè)實(shí)訓(xùn)報(bào)告

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

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