網(wǎng)頁(yè)設(shè)計(jì)課程設(shè)計(jì)報(bào)告.doc

網(wǎng)頁(yè)設(shè)計(jì)與制作（2011/2012學(xué)年第一學(xué)期）課程名稱 網(wǎng)頁(yè)設(shè)計(jì)與制作 設(shè)計(jì)題目 我的獨(dú)白 課程性質(zhì) 公共選修課 學(xué)生專業(yè) 10級(jí)中文系新聞學(xué)專業(yè) 學(xué)生姓名 1040402009 學(xué)生姓名 胡紫煙 授課教師 劉 紅 軍 邵陽學(xué)院2011年 10月20日目錄（一）網(wǎng)站設(shè)計(jì)目的和任務(wù)（二）網(wǎng)站主題（三）網(wǎng)站規(guī)劃思想（四）網(wǎng)站頁(yè)面鏈接總結(jié)（五）綜合知識(shí)的運(yùn)用情況（六）課程設(shè)計(jì)心得與體會(huì) 一、 網(wǎng)站設(shè)計(jì)目的和任務(wù) 一學(xué)期的網(wǎng)頁(yè)設(shè)計(jì)理論和實(shí)踐課程都結(jié)束了，根據(jù)老師的要求及指導(dǎo)，我設(shè)計(jì)了此網(wǎng)站，本網(wǎng)站屬于小型個(gè)人網(wǎng)站，目的在于簡(jiǎn)單的介紹一下個(gè)人狀況，可以使老師和同學(xué)們更進(jìn)一步的了解我現(xiàn)在以及部分過去的情況，加強(qiáng)老師和同學(xué)們對(duì)我的認(rèn)識(shí)，深化我們大家的情誼，有利于以后在學(xué)習(xí)、工作生活當(dāng)中的團(tuán)結(jié)協(xié)作。此外，這不僅是為了肩負(fù)學(xué)生的責(zé)任而去完成老師交給我的任務(wù)，更是對(duì)過去學(xué)習(xí)的知識(shí)的溫習(xí)鞏固，是一個(gè)把理論轉(zhuǎn)化為實(shí)踐的過程，是一個(gè)把自己的設(shè)計(jì)思想轉(zhuǎn)化為實(shí)物的過程，是一個(gè)發(fā)揮自己創(chuàng)造力和想象力的過程。再者，這是對(duì)自己在一學(xué)期內(nèi)該學(xué)習(xí)科目以來的成果的檢查，這是一個(gè)自我審視的過程：檢測(cè)我該學(xué)期的學(xué)習(xí)成果，衡量一期以來的收獲，更為重要的是揚(yáng)長(zhǎng)避短，發(fā)現(xiàn)自己的問題與缺點(diǎn)，使自己及時(shí)改正，發(fā)覺自身的優(yōu)點(diǎn)和長(zhǎng)處并堅(jiān)持發(fā)揚(yáng)，有利于我以后的學(xué)習(xí)和發(fā)展。二、 網(wǎng)站主題 本網(wǎng)站以個(gè)人從小到現(xiàn)在的大概情況介紹為主題，闡述喜好，表現(xiàn)本人的性格特點(diǎn)。從而更好的進(jìn)行自我剖析、自我反省、自我思考。為以后的學(xué)習(xí)工作做更好的準(zhǔn)備，促進(jìn)自身不斷的進(jìn)步和發(fā)展。達(dá)到學(xué)以致用的目的，發(fā)揮活到老學(xué)到老的精神。三、 網(wǎng)站規(guī)劃思想 當(dāng)今社會(huì)，靠什么成功?很多成功人士都說過這樣一句話：“成功來自百分之八十的人際關(guān)系和百分之二十的自身天分和努力?！睋?jù)此可以發(fā)現(xiàn)，擴(kuò)大人際關(guān)系網(wǎng)是十分重要的一項(xiàng)活動(dòng)，因此就需要一條聯(lián)系兩方的橋梁，這條橋梁是滿載信息的大流量的通道，在這信息時(shí)代，于是網(wǎng)絡(luò)成為了這當(dāng)之無愧的橋梁。我設(shè)計(jì)這個(gè)網(wǎng)站的思路就來源于此。 怎樣讓更多人了解你？怎么使別人更了解你？怎樣擴(kuò)大自己的接觸面？當(dāng)代是繁忙的一代也是講究高效率的一代，當(dāng)今面對(duì)這些問題，這時(shí)候的內(nèi)斂不會(huì)被認(rèn)為是好的，最好的解決辦法我認(rèn)為是把自己推銷出去，我想通過網(wǎng)絡(luò)把自己的概況晾曬，方便別人更快捷更省事地得到相關(guān)信息，通過這種方式，也可以交到志同道合的朋友，可以一起研究探討，相互促進(jìn)，達(dá)到共贏。 既然這樣，那么網(wǎng)站的風(fēng)格自然是溫和、高雅、柔美的，這樣才能達(dá)到更高的親和力效果，同時(shí)也應(yīng)該具有喜悅性、創(chuàng)新性、活潑開朗性，展現(xiàn)個(gè)人品格及魅力。最重要的是要呈現(xiàn)一個(gè)真誠(chéng)的自我在大家面前，樹立可信性、誠(chéng)實(shí)性，消除虛擬因素，獲得大家的真誠(chéng)對(duì)待和好感。 在內(nèi)容和結(jié)構(gòu)上，具體如下：整個(gè)網(wǎng)站分為九個(gè)頁(yè)面，分別為：主頁(yè)面、基本信息、個(gè)人照片、成長(zhǎng)階段概況（童年、中學(xué)、大學(xué)）、興趣愛好（文學(xué)、書法、旅游）。各個(gè)頁(yè)面間都是相互連接的，方便讀者更快捷地找到想了解的信息。用表格表示如下：編號(hào)一級(jí)欄目二級(jí)欄目欄目?jī)?nèi)容及功能說明1基本信息陳列個(gè)人基本信息2成長(zhǎng)階段童年講述童年的生活時(shí)光3中學(xué)敘述中學(xué)的堅(jiān)強(qiáng)成長(zhǎng)4大學(xué)細(xì)數(shù)大學(xué)的豐富多彩5個(gè)人照片展現(xiàn)個(gè)人形象6興趣愛好文學(xué)闡述對(duì)文學(xué)的看法和認(rèn)識(shí)7書法表達(dá)練習(xí)書法的感受8旅游介紹某些旅游景點(diǎn) 網(wǎng)站的目錄結(jié)構(gòu)如下：Flyfish -網(wǎng)站根目錄Css -存放外置CSS文件Flash -存放Flash動(dòng)畫Images -存放圖片文件Bt -存放所有標(biāo)題或欄目標(biāo)題的圖片文件Content -存放所有與網(wǎng)頁(yè)內(nèi)容相關(guān)的圖片文件Design -存放所有與網(wǎng)頁(yè)界面設(shè)計(jì)相關(guān)圖片文件Menux -存放所有與導(dǎo)航下拉菜單相關(guān)圖片Navigation -存放導(dǎo)航欄目圖片文件Sight -存放景點(diǎn)圖片 Linkpages -存放圖像或文本超鏈接的文件 Music -存放背景音樂 Nagvipages -存放導(dǎo)航下拉菜單連接的網(wǎng)頁(yè) Js -存放外置JS圖片 Text -存放文本文件 Video -存放視頻文件四、 網(wǎng)站頁(yè)面鏈接總圖主頁(yè)ff2.html基本信息ff3.html成長(zhǎng)階段個(gè)人圖片ff4.html興趣愛好童年ff5.html中學(xué)ff1.html大學(xué)ff6.html文學(xué)ff8.html書法ff7.html旅游ff9.html返回主頁(yè)五、 綜合知識(shí)的運(yùn)用情況1、層的使用 在這次網(wǎng)頁(yè)設(shè)計(jì)過程中，使用了大量層，因?yàn)樗`活好用，可以隨便拖動(dòng)，變大變小都很方便，而框架雖然也能達(dá)到這個(gè)效果，但是，它不夠靈活，不利于我所需要表達(dá)的效果的呈現(xiàn)，也許是不習(xí)慣的原因吧，覺得太死板了，當(dāng)然一些地方仍然要用到它，體現(xiàn)清晰的結(jié)構(gòu)。 2、運(yùn)用Photoshop工具圖片的插入和設(shè)置背景圖像是兩個(gè)不同的概念，當(dāng)然可以達(dá)到相同的效果，這是很基本的知識(shí)運(yùn)用，也用了很多次，但是當(dāng)圖像較小時(shí)在層中插入更方便些，因?yàn)樽鳛楸尘皶r(shí)圖片會(huì)重復(fù)出現(xiàn)造成混亂的局面，但圖片過小時(shí)，用層將之拉寬大就會(huì)使圖片變模糊、嚴(yán)重變形，不但沒能美化頁(yè)面反而帶來了負(fù)面影響，此時(shí)最好借助Photoshop工具來編輯圖片。文本的插入在層內(nèi)或框架內(nèi)完成較好，但不能設(shè)置為藝術(shù)字體，因此需要運(yùn)用Photoshop工具來輔助完成，其實(shí)很多地方都可以用到Photoshop工具特別是一些要表現(xiàn)自己獨(dú)特的思想和設(shè)計(jì)畫面。 3、使用Flash工具 只要是動(dòng)態(tài)效果都可以用Flash工具，音樂、閃動(dòng)圖片等。4、使用鏈接 為方便讀者的查閱，在各頁(yè)面底部都設(shè)置了頁(yè)面鏈接。5、插入跳轉(zhuǎn)菜單為了使讀者能快捷的回到自己感興趣的頁(yè)面，于是在各個(gè)頁(yè)面都插入了跳轉(zhuǎn)菜單。6、插入滾動(dòng)文字7、設(shè)置交替圖像，鼠標(biāo)放置停止圖片切換8、制作在整個(gè)頁(yè)面浮動(dòng)的圖片9、設(shè)置垂直循環(huán)滾動(dòng)的圖片10、使用彈出信息行為11、框架的使用12、背景圖像的固定，讓文本在圖像上滾動(dòng)13、插入音樂文件14、插入Flash按鈕15、動(dòng)態(tài)效果的使用：1）每個(gè)頁(yè)面都設(shè)置了鏈接，有鏈接的地方就設(shè)置了鼠標(biāo)放置時(shí)的顏色變化，還插入了Flash按鈕;2)首頁(yè)有上下滾動(dòng)的圖片，插入了背景音樂;3)基本信息頁(yè)面使用了交替圖像插入了音樂文件;4)書法頁(yè)面使用了浮動(dòng)的圖片;5)旅游頁(yè)面使用了上下滾動(dòng)的圖片;6)文學(xué)頁(yè)面運(yùn)用了滾動(dòng)字幕；7）童年頁(yè)面插入了Flash動(dòng)畫。六、 課程設(shè)計(jì)心得與體會(huì) 第一：我非常感謝學(xué)校給了我這次制作網(wǎng)頁(yè)的機(jī)會(huì)，通過這次實(shí)訓(xùn)，我學(xué)到了很多有價(jià)值的東西。我獨(dú)立的完成了網(wǎng)站設(shè)計(jì)的全過程，把設(shè)計(jì)中散亂的網(wǎng)頁(yè)鏈接成框架體系，使平時(shí)學(xué)到的知識(shí)點(diǎn)有了很高的提高，并且合理的在試驗(yàn)中進(jìn)行了實(shí)踐。第二：在這次實(shí)驗(yàn)的過程中，我搜集了大量的素材和網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)技巧方面的書，擴(kuò)大了知識(shí)面，給我在以后的設(shè)計(jì)過程中能博采眾長(zhǎng)，制作出好的網(wǎng)頁(yè)打下了基礎(chǔ)。第三：我現(xiàn)在已經(jīng)掌握文檔排版標(biāo)記的使用熟練使用及其屬性設(shè)置、特殊符號(hào)；第四：我現(xiàn)在已經(jīng)熟練使用超級(jí)鏈接