




版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)報(bào)告題 目: 個(gè)人網(wǎng)站實(shí)訓(xùn)報(bào)告 姓 名: 一. 實(shí)訓(xùn)意義:網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)是教學(xué)過(guò)程中重要的實(shí)踐性教學(xué)環(huán)節(jié).它是根據(jù)專業(yè)教學(xué)計(jì)劃的要求,在教師的指導(dǎo)下對(duì)學(xué)生進(jìn)行網(wǎng)頁(yè)制作專業(yè)技能的訓(xùn)練,培養(yǎng)學(xué)生綜合運(yùn)用理論知識(shí)分析和解決實(shí)際問(wèn)題的能力,實(shí)現(xiàn)由理論知識(shí)向操作技能的轉(zhuǎn)化,是對(duì)理論與實(shí)踐教學(xué)效果的檢驗(yàn),也是對(duì)學(xué)生綜合分析能力與獨(dú)立工作能力的培養(yǎng)過(guò)程.因此加強(qiáng)實(shí)踐教學(xué)環(huán)節(jié),搞好實(shí)訓(xùn)教學(xué),對(duì)實(shí)現(xiàn)本專業(yè)的培養(yǎng)目標(biāo),提高學(xué)生的綜合素質(zhì)有著重要的作用。二. 實(shí)訓(xùn)目的:1 通過(guò)綜合實(shí)訓(xùn)進(jìn)一步鞏固,深化和拓展學(xué)生的理論知識(shí)與專業(yè)技能。(1)掌握規(guī)劃網(wǎng)站的內(nèi)容結(jié)構(gòu),目錄結(jié)構(gòu),鏈接結(jié)構(gòu)的方法。(2)熟
2、練掌握網(wǎng)頁(yè)制作軟件FrontPage 2003和的基本操作和使用技能。(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í)和
3、技能解決網(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ù)立自信心。 網(wǎng)站是什么?要知道什么是網(wǎng)站首先要弄清楚什么是網(wǎng)頁(yè)?網(wǎng)頁(yè)(英文:Web page)是一個(gè)文件,他存放在世界某個(gè)角落的某一部計(jì)算機(jī)中,而這部計(jì)算機(jī)必須是與互聯(lián)網(wǎng)相連的。網(wǎng)頁(yè)經(jīng)由網(wǎng)址( URL )來(lái)識(shí)別與存取,當(dāng)我們?cè)跒g覽器輸入網(wǎng)址后,經(jīng)過(guò)一段復(fù)雜而又快速的程序,網(wǎng)頁(yè)文件會(huì)被傳送到你的計(jì)算機(jī),然后再通過(guò)瀏覽器解釋網(wǎng)頁(yè)的內(nèi)容,再展示到你的眼前。是萬(wàn)維網(wǎng)中的一“頁(yè)”,通常是HTML格式(文件擴(kuò)展名為.html或.htm)。網(wǎng)頁(yè)通常用圖像檔來(lái)提供圖畫(huà)。網(wǎng)頁(yè)
4、是構(gòu)成網(wǎng)站的基本元素,是承載各種網(wǎng)站應(yīng)用的平臺(tái)。所謂站網(wǎng)站(Website)就是指在網(wǎng)際網(wǎng)路(因特網(wǎng))上,根據(jù)一定的規(guī)則,使用HTML等工具制作的用於展示特定內(nèi)容的相關(guān)網(wǎng)頁(yè)的集合是由網(wǎng)頁(yè)組成的。如果您只有域名和虛擬主機(jī)而沒(méi)有制作任何網(wǎng)頁(yè)的話,您的客戶仍舊無(wú)法訪問(wèn)您的網(wǎng)站。 構(gòu)成網(wǎng)頁(yè)的元素有文字、圖像、動(dòng)畫(huà)、音樂(lè)和程序等。文字與圖片是構(gòu)成一個(gè)網(wǎng)頁(yè)的兩個(gè)最基本的元素。我們可以簡(jiǎn)單的理解為:文字,就是網(wǎng)頁(yè)的內(nèi)容,圖片,就是網(wǎng)頁(yè)的美觀。三實(shí)驗(yàn)步驟:1、網(wǎng)站主題 我的網(wǎng)站的主旨在于從各個(gè)方面全面的介紹我自己,展示自己,包括我的個(gè)人資料、個(gè)人相片和愛(ài)好。另外,網(wǎng)站里還包括我的好友和好友資料,建立一個(gè)展示自
5、我形象的平臺(tái)。同時(shí),網(wǎng)站里的每一個(gè)網(wǎng)頁(yè)都有統(tǒng)一的風(fēng)格,每一個(gè)網(wǎng)頁(yè)的主題色彩都是淺紅色,用以展示自己性格的效果。最重要的是做出自己的風(fēng)格,給瀏覽者好的欣賞感受。 2、網(wǎng)站材料 主要在網(wǎng)站上搜集所要的網(wǎng)頁(yè)信息,包括圖片、文字、相關(guān)的新聞。同時(shí),查詢相關(guān)的書(shū)籍、百度和素材光盤(pán)等方式收集所需的文字資料,圖象資料,flash動(dòng)畫(huà)和網(wǎng)頁(yè)特效等,用以得來(lái)更加具有說(shuō)服力的頁(yè)面。要想做好自己的網(wǎng)站,能夠給瀏覽者好的欣賞感受,就要盡量搜集材料,搜集得材料越多,以后制作網(wǎng)站就越容易。精選自己收集的材料,作為自己制作網(wǎng)頁(yè)的素材,這樣就可以做好一個(gè)好的網(wǎng)站。3、網(wǎng)站規(guī)劃 我的網(wǎng)站共有7個(gè)主頁(yè)面:首頁(yè)、相冊(cè)、簡(jiǎn)歷、圖書(shū)、
6、好友、留言版和音樂(lè)。每一個(gè)頁(yè)面用統(tǒng)一的背景圖片,以保證網(wǎng)站統(tǒng)一的頁(yè)面風(fēng)格。如下圖:我是用自己的姓名和學(xué)號(hào)命名網(wǎng)站名,用以方便存儲(chǔ)和轉(zhuǎn)發(fā)。網(wǎng)站整體色調(diào)為淺紅色,然后點(diǎn)綴其他不同的顏色相配,突出主題,顏色沒(méi)有過(guò)多,過(guò)雜,用以避免給人一種雜亂的感覺(jué)。版面設(shè)計(jì)十分靈活,根據(jù)各部分內(nèi)容的不同適當(dāng)?shù)淖杂稍O(shè)計(jì)。網(wǎng)頁(yè)布局主要用框架和表格,用框架定位內(nèi)容的大體結(jié)構(gòu),再用表格具體定位。位子的設(shè)計(jì)也是重要的一個(gè)部分,根據(jù)具體內(nèi)容決定字體風(fēng)格,相同的風(fēng)格多次調(diào)用是用css設(shè)計(jì)一個(gè)樣式,以保證隨時(shí)、準(zhǔn)確的調(diào)用。另外,為了網(wǎng)頁(yè)布局的協(xié)調(diào),我加入了適當(dāng)?shù)膄lash透明動(dòng)態(tài)圖片,用以達(dá)到更好的瀏覽效果。4、網(wǎng)站的制作工具 做
7、網(wǎng)頁(yè)時(shí)主要使用的是FrontPage 2003,但我還使用了Deamweaver。另外,為了處理網(wǎng)頁(yè)中的其他元素,還使用了Photoshop、Gif Animator等軟件。5、制作網(wǎng)站的網(wǎng)頁(yè) 素材、風(fēng)格、模板都設(shè)計(jì)好以后,下一步就是具體的制作網(wǎng)頁(yè)。制作網(wǎng)站時(shí),首先要做的就是站點(diǎn)的規(guī)劃,建立一個(gè)本地站點(diǎn)“mysite”,建立的各個(gè)頁(yè)面都應(yīng)該放在本地站點(diǎn)中,在網(wǎng)頁(yè)制作時(shí)所需的各個(gè)元素都進(jìn)行了統(tǒng)一的管理,建立統(tǒng)一的文件夾放同一類型的文件,我在制作時(shí)建立了“tupian”文件夾來(lái)存放圖片。同時(shí),由于“相冊(cè)”頁(yè)面中的信息太多,于是建立了一個(gè)專門的文件夾存放相冊(cè)信息,網(wǎng)頁(yè)中的css 樣式文件也應(yīng)統(tǒng)一管理
8、,做到有條不紊,我設(shè)計(jì)的網(wǎng)站的首頁(yè)如下圖: 以導(dǎo)航欄為界,上面插入了兩個(gè)flash動(dòng)畫(huà),用以給瀏覽者好的視覺(jué)享受。左下方有我的個(gè)人資料、相片和相關(guān)鏈接。插入相關(guān)鏈接的菜單欄,一方面為了布局合理,彌補(bǔ)左下角的空缺,另一方面給瀏覽者提供放表的導(dǎo)航,點(diǎn)擊其中任意一個(gè)都會(huì)連接到其他網(wǎng)頁(yè),如點(diǎn)擊google就會(huì)連接到下面網(wǎng)頁(yè):根據(jù)自己的網(wǎng)頁(yè)風(fēng)格,在網(wǎng)上搜集合適的圖片,另外網(wǎng)頁(yè)的頁(yè)寬一般沒(méi)有超過(guò)900像素,以保證左右不出現(xiàn)滾動(dòng)條。右下邊插入的是表格,表格中添加了淺紅色的背景圖片。用以體現(xiàn)網(wǎng)站的主題色彩,表格還定位了網(wǎng)頁(yè)特效、系統(tǒng)時(shí)間和flash動(dòng)畫(huà)。網(wǎng)頁(yè)特效為上下滾動(dòng)的字幕,當(dāng)鼠標(biāo)停在字幕上時(shí),字幕停止?jié)L
9、動(dòng)。取系統(tǒng)時(shí)間代碼如下:今天是:主頁(yè)中還插入了背景音樂(lè),音樂(lè)名為“渡情”,這首音樂(lè)為midi音樂(lè),占用內(nèi)存小,音樂(lè)清脆悅耳,十分適合做背景音樂(lè)。另外,網(wǎng)頁(yè)特效滾動(dòng)字幕就是歌詞。插入過(guò)程如下圖:為了使頁(yè)面連接清晰,相冊(cè)中插入了五個(gè)交互式按鈕,分別是個(gè)人相片、好友相片、風(fēng)景相片、明星相片和古董相片,當(dāng)點(diǎn)擊任一按鈕都會(huì)在右下版塊出現(xiàn)對(duì)應(yīng)瀏覽圖片版塊。交互式按鈕的制做:在設(shè)計(jì)窗口中插入一個(gè)五行一列的表格,表格的間距為0,顏色為黑色,居中對(duì)齊,然后插入背景圖片,就做成了表格的背景。在表格的一個(gè)單元格內(nèi)點(diǎn)擊菜單中的插入,再點(diǎn)擊交互式按鈕,修改按鈕的相應(yīng)屬性就可以了 。簡(jiǎn)歷中包含我的姓名、年齡、職業(yè)、理想和
10、興趣愛(ài)好等。簡(jiǎn)歷的右下方插入了漂亮的flash動(dòng)畫(huà),動(dòng)畫(huà)為游動(dòng)的金魚(yú),為了達(dá)到亮眼的效果,加入了透明flash,既與主網(wǎng)頁(yè)相同,又有新意。插入這個(gè)動(dòng)畫(huà)是為了使頁(yè)面的整體布局合理,既突出網(wǎng)站的主色調(diào),又給人以凝重的感覺(jué),同時(shí)增加頁(yè)面的可看性。第四個(gè)主頁(yè)面是圖書(shū),如下圖:它與第二個(gè)主頁(yè)面采用了相同的背景,相同的布局。為了使頁(yè)面連接清晰,圖書(shū)中也插入了五個(gè)交互式按鈕,分別是唐詩(shī)、宋詞、元曲、明清傳奇和現(xiàn)代小說(shuō)五個(gè)子頁(yè)。在唐詩(shī)子頁(yè)中的右邊網(wǎng)頁(yè)中所有的詩(shī)人名都有超鏈接,如單擊“駱賓王”,就會(huì)出現(xiàn)如下頁(yè)面:另外,導(dǎo)航右下版塊是一段美麗文字欣賞,用相同的色彩布局,明快而又有緊促感,而且使整個(gè)頁(yè)面色調(diào)平衡。單
11、擊任一交互式按鈕都會(huì)在右下版塊出現(xiàn)對(duì)應(yīng)網(wǎng)頁(yè)版塊,如單擊元曲按鈕,頁(yè)面結(jié)果見(jiàn)下圖: 第五個(gè)主頁(yè)面是好友,如下圖:這個(gè)主頁(yè)面和上面的一樣,都插入了交互式按鈕,既突出網(wǎng)站的主色調(diào),又給人以凝重的感覺(jué),目的都是增加網(wǎng)頁(yè)的可看性。另外右邊的相片下面人名設(shè)立了超鏈接第六個(gè)主頁(yè)面是留言版,如下圖:上面使用表單同瀏覽者進(jìn)行信息交流,方便瀏覽者留言。在導(dǎo)航的下面是一個(gè)滾動(dòng)字幕,用層進(jìn)行定位。上面跑馬燈效果代碼為:如果您對(duì)我的網(wǎng)站、本人、老師或其他方面有任何想法,請(qǐng)告知我們。歡迎提出寶貴意見(jiàn)和建議。該網(wǎng)頁(yè)中還插入了時(shí)鐘,顯示當(dāng)前時(shí)間,給瀏覽者提供方便。圖片如下:下面是表單的下部分,用以提交留言到服務(wù)器。上圖的最下
12、面是版權(quán)信息,盡量用簡(jiǎn)潔的語(yǔ)言和穩(wěn)重的色彩,給人留下清新,簡(jiǎn)練的感覺(jué)。版權(quán)信息標(biāo)名了作者和版權(quán)用以提高內(nèi)容的可讀性和使內(nèi)容充實(shí),既突出網(wǎng)站的主色調(diào),又給人以凝重的感覺(jué)。這樣,用戶在提交完后,內(nèi)容就會(huì)儲(chǔ)存進(jìn)wu.txt中。表單的制作過(guò)程:首先打開(kāi)FronrPage 2003,再新建網(wǎng)頁(yè),單擊插入按鈕,在插入按鈕中選擇表單,最后插入表單的各個(gè)屬性就可以完成表單的插入了。第七個(gè)主頁(yè)面是音樂(lè),如下圖:為了達(dá)到亮眼的效果,我在導(dǎo)航欄下的表格背景圖片上加入了透明flash,既與主網(wǎng)頁(yè)相同,又有新意。上面的紅色文字都插入了超鏈接,單擊費(fèi)玉清連接到如下頁(yè)面:上面的頁(yè)面是網(wǎng)絡(luò)上的頁(yè)面,鏈接到網(wǎng)絡(luò)上的可以節(jié)省制作
13、網(wǎng)站的周期。而且,還可以使內(nèi)容更加簡(jiǎn)潔。單擊“一剪梅”鏈接到如下頁(yè)面:上面的頁(yè)面整體美觀漂亮,如果出現(xiàn)上面頁(yè)面就可以傾聽(tīng)動(dòng)人的音樂(lè)了。最后,還要制作各個(gè)頁(yè)面的鏈接,把整個(gè)網(wǎng)頁(yè)鏈接起來(lái),形成一個(gè)統(tǒng)一的整體,方便瀏覽者進(jìn)行各個(gè)頁(yè)面間的跳轉(zhuǎn)。6、上傳測(cè)試網(wǎng)站網(wǎng)頁(yè)制作完畢以后,要進(jìn)行反復(fù)的測(cè)試,保存后在IE瀏覽器上反復(fù)運(yùn)行自己的網(wǎng)站,用以發(fā)現(xiàn)設(shè)計(jì)中的缺陷并及時(shí)改正。四設(shè)計(jì)特色我覺(jué)得我的網(wǎng)頁(yè)設(shè)計(jì)的最大特點(diǎn)就是色彩淡雅,布局協(xié)調(diào),結(jié)構(gòu)清晰。觀之,給人以清麗,純樸的感覺(jué)。另外,設(shè)計(jì)過(guò)程中使用了大量的網(wǎng)頁(yè)特效,如:跑馬燈效果、上下滾動(dòng)字幕和時(shí)鐘等。五心得體會(huì)第一:我非常感謝學(xué)校給了我這次制作網(wǎng)頁(yè)的機(jī)會(huì),通過(guò)這次實(shí)訓(xùn),我學(xué)到了很多有價(jià)值的東西。我獨(dú)立的完成了網(wǎng)站設(shè)計(jì)的全過(guò)程,把設(shè)計(jì)中散亂的網(wǎng)頁(yè)鏈接成框架體系,使平時(shí)學(xué)到的知識(shí)點(diǎn)有了很高的提高,并且合理的在試驗(yàn)中進(jìn)行了實(shí)踐。第二:在這次實(shí)驗(yàn)的過(guò)程中,我搜集了大量的素材和網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)技巧方面的書(shū),擴(kuò)大了知識(shí)面,給我在以后的設(shè)計(jì)過(guò)程中能博采眾長(zhǎng),制作出
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 園藝工技師考試試題及答案
- 拼多多和java面試題及答案
- 鐵路工程測(cè)量培訓(xùn)課件
- 2025年 德陽(yáng)市人民醫(yī)院招聘考試試卷附答案
- 感冒用藥相關(guān)知識(shí)培訓(xùn)
- 員工異地培訓(xùn)差旅費(fèi)會(huì)計(jì)處理指南
- 護(hù)理教師試講15分鐘范例
- 愛(ài)的教育導(dǎo)讀課
- 2025時(shí)間管理培訓(xùn):效率倍增的認(rèn)識(shí)和行動(dòng)實(shí)踐指南
- 通風(fēng)性關(guān)節(jié)炎的護(hù)理講課
- 會(huì)員月底抽獎(jiǎng)活動(dòng)方案
- 2025年互聯(lián)網(wǎng)醫(yī)療平安好醫(yī)生阿里健康京東健康對(duì)比分析報(bào)告
- 攀枝花市仁和區(qū)社會(huì)招考社區(qū)工作者考試真題2024
- 2025年上海楊浦區(qū)七下英語(yǔ)期末達(dá)標(biāo)檢測(cè)試題含答案
- 老年外科患者圍手術(shù)期營(yíng)養(yǎng)支持中國(guó)專家共識(shí)(2024)解讀
- 臨床肘關(guān)節(jié)損傷影像診斷
- 2025年預(yù)應(yīng)力混凝土用鋼棒產(chǎn)品質(zhì)量監(jiān)督抽查實(shí)施細(xì)則
- 不同產(chǎn)地西紅花的質(zhì)量評(píng)價(jià)研究
- 2025石獅市國(guó)企招聘考試題目及答案
- GB/T 16262.2-2025信息技術(shù)抽象語(yǔ)法記法一(ASN.1)第2部分:信息客體規(guī)范
- 《熱力公司各崗位工作流程及工作職責(zé)》
評(píng)論
0/150
提交評(píng)論