網頁設計課程設計報告.doc

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