第一篇：中國銀行網頁版式分析
20個高質量的PS制作網頁版式設計的教程
Photoshop是網頁設計師的重要工具工具。有鑒于此，我們已經搜集了20個最新的photoshop網站設計教程。這些設計教程最終的結果都非常令人賞心悅目。記住,這不是意味著你能精準的復制和使用就是你自己的。相反，按照教程和學習新技術，將其納入自己的設計。
結合課程進度，建議重點看如何設計簡潔多彩的網頁布局
其他……
在photoshop中創建簡潔古典的網頁設計
創建一個粗糙的滑雪板主題
非常不錯清爽的導購類網頁設計 了不起的網頁設計
羅拉博客設計
如何創建獨一無二的WordPress主題
網頁設計布局11
網頁設計布局 14
如何在photoshop中創建簡介的web2.0樣式
從頭開始創建漂亮的網站
如何設計簡潔多彩的網頁布局
如何在photoshop中制作充滿生氣的網頁設計作品
創建專業的Web 2.0樣式
制作粗糙半透明的網頁設計作品
如何制作多彩并且獨一無二的網頁設計
網頁設計教程： Zee Site
在photoshop中制作簡潔兼具現代感的網頁
在photoshop中制作高質量紋理樣式的網頁
如何制作創造性的博客樣式
在photoshop中創建水彩主題
在photoshop中創建促銷的iPhone app 網頁站點
第二篇：版式設計分析總結（范文）
有關版式設計的思考與ppt制作中的應用
王露瑩 6123410113 1236001班
一、版式設計基本要求總結
版式設計不僅僅是一項課程內容，更是可以培養成為學習中的一種技能。尤其在建筑設計的學習過程中，每一個方案的表達，每一次圖紙的設計，每一段進度的匯報展示，都離不開版式的設計。版式設計通常不會作為硬性的要求，但卻是我們的最基本的專業素養，也是影響我們表達效果的重要因素。
同樣地，版式設計不僅僅是天資過人、審美出眾、眼光獨到的人的專利;通過對一定排版規則的學習，再加上細致認真的思考，我們都可以做出布置合理、令人賞心悅目的排版。通過對這門課的學習，我對排版規則的總結如下：
1. 對齊
對齊是在版式設計中最為重要的一項內容。排布的內容橫向要有橫向的對齊關系，豎向要有豎向的對齊規律，這樣排出的才能稱為版式，才能讓人覺得整齊、不混亂，才能談美感。當內容不是很整齊的時候，可以通過添加合理的線框來幫助對齊，但線框切忌要合宜、不能過于搶眼。
2. 層次
層次是版式設計中容易被忽視的一個問題，它包括了圖片分組、圖片大小以及文字大小等層次內涵。不同類別的分組之間要有較明顯的空白分隔，但是分隔明顯不意味著空白間距大，而是明顯大于組內分隔距離即可。對于大面積的重要的圖片圖形而言，要作為一個明顯的大層次，其他圖形按重要程度最好還要再有兩類大小，這樣圖就有了三個明顯的層次。文字也是如此，在圖比文字重要的排版中，文字大小是要受到嚴格控制的，標題不宜大于1厘米，標注性文字3-4毫米即可。整個版式中，文字的樣式不宜多于三種，否則會有喧賓奪主、層次混亂之感。
3. 邏輯
我們知道，版式只是要表達的思想內容的一種表現形式，版式設計也僅僅是一種表現方法。如果沒能把所有的內容有條理地說明白，就不能稱之為一張好的圖紙，更無從談版式設計。邏輯一般體現在對內容的分組上，要把同一類問題分成一組，用同樣的大小層次來表現。比如說設計圖紙中的平、立、剖，分析圖等，均有邏輯關系卻又屬于不同的邏輯類別，應進行分組排布，才能更清晰地說明設計的思想和內容。邏輯的另一方面也體現在整體表達的順序中，如幾張圖紙的排布順序，不同內容的編排位置，匯報文稿中的邏輯關系等。無特殊情況時，盡量要按照人們思考的正常順序來排布頁面和版式，方便別人在短時間內快速理解我們要表達的內容。
4. 色彩
版式設計的最后，也要考慮一定的色彩關系。顏色不宜太過鮮艷、也不宜復雜混亂。顏色樸素簡潔才能更加突顯我們要表達的內容，否則只是嘩眾取寵。雖說顏色要簡潔樸素，但是也不能使版面太過灰調，沒有沖擊感、沒有味道?？梢赃m當用一些不同比例的對比色形成一些反差，用以突出主題，同時增加對比度，更加吸引人眼球。常用的較為協調的對比色有黑與白、紅與藍等。
二、對于自己版式設計歷程的反思
從做設計開始，每一次設計都主要是根據圖紙打分，圖紙的表現能力、表達效果很是重要。如果圖紙的版式設計不好，即使設計方案做的再好，都不可能在眾多的圖紙中脫穎而出。上一次的設計我就在圖紙表達上吃了不小的虧，知道該排版，但卻沒有正確的版式設計的概念和方法。在這次的學習和練習中，我根據學到的原則反復在ps中移動圖形、找版式的感覺，才發現原本一張效果十分不好的圖紙也可以排的非常有設計感、非常美觀。第一次提交的作業因為不熟練，還沒有完全掌握排版的方法，排出的圖紙還存在不少的問題。(如圖1)存在的主要問題有兩個：一是沒有層次，二是分析圖有點分散，沒在一個組中，邏輯關系和層次都不明顯。在老師指點后，我又進行了一番思考，重新做了這次的版式設計，將排版又進行了一次優化，得到的結果還是很令人欣慰的。(如圖2)而且，通過這次反復練習，我不僅僅是將這次作業排好了，更大的收獲是我逐漸掌握了版式設計的方法，并能將它應用在我以后的學習中。下面通過我將學到的知識用在ppt制作中為例，表達一下我對版式設計的思考與應用成果。
圖1
圖2
三、版式設計方法在ppt制作中的應用
在沒有形成版式設計概念之前，制作ppt匯報文稿時，我追求的就是整體結構的一致性，每一頁的相對美觀問題，或者在技術上使用多么炫的效果。但是現在再做ppt時，我明白了用很簡單的手法就可以做出很令人賞心悅目的效果。下面以我做的一次英語演講ppt為例：(如圖)
1.層次方面
因為此次演講文稿主要以文字為主、圖片為輔，因此我在三個層次的字體大小樣式上多下了些功夫。保證了標題的突出，各級文字層次分明。 2. 對齊方面
設置了一下對齊的標準和方式，保證對齊方式一致，從頭到尾看起來十分整齊協調。插入的圖片也和文字找了一定的大小對齊關系，使之看起來不是很突兀 3.邏輯方面
PPT有封面、有結束篇，在前面第二頁還設置了一個目錄，用以清晰地表達整體的演講內容。整體的頁面布置也將所介紹的英國禮儀分方面詳細地表示清楚了。4.顏色方面
為了不使文字過于單調，頁面背景和封面的藍白色協調統一。并將每頁的主標題用紅色寫出，重點的地方也用紅色強調，和淺藍色形成了一個對比，和其他文字的黑色也形成了一定的對比，卻又不失色彩的均衡協調。
…………………………
第三篇：中國元素在茶類網頁設計中的應用分析論文
摘要
：中國的傳統文化歷史悠久、廣博高深，它是中華民族智慧的產物。我們在設計茶類網頁時要將中國的古元素融入其內，傳揚我們中國的傳統文化，創造一種符合當代茶類網頁的表現方式，基于此，現對中國元素在茶類網頁設計中的應用進行了探討。
關鍵詞
：中國元素;茶類;網頁設計;應用
從古到今，我國的茶葉在世界范圍內都是小有盛名的，且茶文化的發展源遠流長。網站是當今網絡信息傳播的重要平臺，在最近幾年來發展迅速，作為一種新型的藝術表現方式，茶類網站的設計也隨之應運而生，并且發展勢頭迅猛，加之科學技術的日益進步，使得茶類網站頁面設計的方式也變的多種多樣。傳統文化的多元化以及藝術形式的多樣化，再加上多種思想與文化間相互碰撞，引發了設計師們對茶類網站頁面設計的關注度。
1中國元素含義及形態
1.1中國元素的含義
所謂中國元素就是人民大眾在日常的生活、生產中不斷探索、總結出來的，具有中國特色的文化成果，這種文化成果不但包含隱形的精神內涵，也包含有形的圖案、符號。由于受我們國家傳統思想的影響，目前，我們國家在設計網站時，也表現出中華文化的和諧性、包容性以及多樣性，在這樣的基礎上，設計具有中國特色的網站就更加要把握好尺度，也就是要表現出中華文化兼容并蓄的傳統，同時又要預防失去自身特色，一味的模仿他人。
1.2中國元素的主要表現形態
第一，方塊字書法，方塊字有抽象符號的作用，它自身就具備審美趣味。漢字在網站的設計中是一種符號或是一種特別的圖形，它不僅是語言信息的載體，表現出它的形狀外，還代表著文化方面的意義，比方說：行書如行云流水;草書結構簡省、畫筆連綿;楷書工妙于點畫，神韻于結體。把中華書法的藝術融入到現代化的網站設計中，能夠有利的彰顯出網頁所獨具的文化民族特色。第二，圖形。在設計網頁圖形的時候，要在傳統圖案上加以豐富的想象力，選擇獨具特色的表現形式，給瀏覽者一個新奇而又獨具特點的視覺感受。將傳統圖案里的點、面、線、色彩、紋理等融入到網站設計里，形成具有傳統特點和現代藝術相融合的審美特色，圖案的多樣性和統一、平行、尺寸比例、韻律以及節奏等特點，將這些特點融合到一個畫面中，彰顯出循序有律的藝術規律。第三，版面。通常為了引起閱讀者的注意，會在網站顯著的位置上放置關鍵的內容，例如版面的中間或是上面，并且，設計師通常會將同樣主題的內容統一放到網站頁面的同一區域里。在我們國家設計師在設計網站時通常會將版面劃分為圖形區、文本區、版權區等等。
2中國傳統元素應用于茶類網頁界面設計的可行性
網站頁面設計中，最基礎的視覺元素有色調、版式、圖片、形狀、文字，除了這些以外還有一些特有的視覺元素，比方說多媒體、動態等。網站頁面設計考慮的就是怎樣將這些元素合理的安排，呈現出一幅和諧、明了、美觀、而又統一的網站頁面，讓瀏覽者可以更加清楚、有效地了解信息同時還會給其帶來一種愉悅的感覺。全世界不同區域內用戶的審美心理存在千差萬別，就像歐洲國家他們不太喜歡色彩艷麗、花里胡哨的設計風格，而是相對喜歡一些雅靜、簡單、簡潔而又嚴謹的風格形式。韓國的用戶喜歡細膩、布局整潔、清晰的設計。與其相比，我們國家大多數的茶類網站頁面缺乏特色之處，一味的隨俗浮沉，無獨特的藝術感染力。其實，我們國家有著十分濃厚的傳統文化和豐富的藝術元素，借助豐富的想象力把這些文化、元素融合到茶類網站頁面的設計中去，相信一定可以設計出具有我們國家獨有的、特色的網站頁面作品。
3中國元素在茶類網頁設計中的應用
3.1茶類網頁版式與中國水墨元素中的“章法構圖”
茶類網站頁面設計師在設計時，第一步要做的就是進行構圖，就是最優秀的創意也必須從構圖開始，只有通過構圖形式的變化，才能將視覺語言效果呈現出來。在我們國家的傳統水墨畫中，構圖被稱之為“布局”或是“章法”，在水墨畫中是十分重視構圖的，他不是遵從歐洲國家的透視理論，相反的是具有自身特點和呈現方式的，比歐洲國家的繪畫更有隨意性，使得畫面中融入了畫家更多的思想意識。在構圖的過程里，我們國家的水墨畫是比較重視“計白當黑”，巧妙構思保留著大小、主次、輕疏不同而形成的“空白”，給觀賞者留有豐富的想象空間，也使畫面更加的獨具特色。我們在設計茶類網站頁面時也要這樣去做，將我們國家的藝術審美形式融入到設計里，讓網頁中游走著“空白”，給設計師和瀏覽者的心靈溝通提供平臺?，F在茶類網站頁面設計流行簡約同意境相結合，茶類網站頁面設計可以參考我們國家傳統水墨畫的構圖原則，通過簡潔的概括水墨畫以及再應用來提高頁面設計的意境，使得網站頁面設計多元化，例如敬庭堯，他在設計個人網站時，選用的就是水墨元素的設計，它的網站將水墨的優美與頁面中的空白呈現的出神入化、惟妙惟肖。茶類網站頁面設計中主要運用水墨這種極具民族特色的視覺元素，在配備墨印、印章、水印以及宋體字，文字和圖案遙相呼應，創造出一幅完美銜接的構圖搭配，給人們瀏覽網站頁面時帶來一種書香氣韻和視覺上的沖擊。
3.2茶類網頁設計中中國傳統色彩的應用
在茶類網站頁面的藝術設計里，最重要的視覺元素就是色調，和諧的色調搭配可以產生強烈的視覺沖擊效果以及藝術的渲染力，讓人們記憶深刻。在設計里，色彩關系到所有的設計元素，是不能缺少的一部分，在茶類網站頁面設計中，吸引瀏覽者眼球以及讓其自發進入網站了解網站內容和閱讀網站內容最為關鍵的就是色彩的搭配，色彩肩負的任務是十分重要的。亞洲傳統色彩的特點是神秘而又婉轉、含蓄，在傳統色彩中包含著悠遠的歷史文化和歷史文明，蘊含著古老民族對未來幸福生活的憧憬和向往，吸引著全世界人們的關注。在我們國家的傳統色彩中，青色、黑色、赤色、白色、黃色這五種顏色分別代表了我們國家傳統文化中的東方、西方、南方、北方、中部等五個方位以及金、水、木、火、土等五行，我們國家的色彩文化和大自然、宇宙世界、哲學理論、倫理道德等許多觀念密切融合到一起，組成我們國家獨有特色的傳統色彩文化。在我們國家的歷史記載中，最早開始使用黑色、白色這兩個顏色的，還有不同深淺的赤色，而且被廣泛的運用。所謂的赤色就是我們常常說的紅色，紅色是我們國家人民最喜歡的顏色，也是日常生活中運用最廣泛的顏色，它蘊含著許多種不同的含義，有個非常貼切的詞語就是“中國紅”。我們國家茶類網站頁面設計就能夠把網站頁面的主色調設計成不同成色的紅色，用它來呈現出我們國家茶文化濃厚的歷史韻味和歷史意義。
3.3茶類網頁設計中漢文字的應用
信息的重要載體與表現方式就是文字;我們國家漢字的獨特形狀表現著我們中華民族的傳統文化特色，且它有思維導向與圖形表意的作用，是構成網站的基礎。在茶類網站頁面設計的過程中，有些設計師也許會忽視了文字排版所發揮的重要作用;現實情況是，在網站頁面所有內容中，所占比重最大、最多的就是文字信息。網站頁面中除了大段的正文描述外，像其他的，例如網站頁面標題、引導、指示信息、文字鏈接、說明圖片等內容，這些內容也不能離開文字表述。我們國家和古代印度、古代巴比倫、古代埃及四國被稱之為世界的四大文明古國;在這四個文明古國中，我們國家的文字是一直被運用的，從來沒有出現被停用的情況，一直不斷被改進，不斷被完善，一直被沿用到現在，追溯文字的發展歷程，我們國家的漢字經歷了甲骨文、金文、大篆、小篆、隸書、楷書、行書、草書等等的形式，最后在象形文字符號的基礎上演變成為我們現在所通用的方塊漢字，直到現在它依然保持著頑強的“生命力”。有個名字叫“悟空堂陶社”的網站，它就是采用我們國家象形文字的獨特之處，把“悟空堂”這三個字做成擁有十足意蘊的獨特標志，這種設計讓瀏覽者感覺像是回到了原來的自然意境中;茶類網站頁面中對細節的一些問題進行了獨特的處理，比方說字號的大小和字號字體的選擇都進行了特殊的處理，這些細節之處都充分表現出我們國家茶類網站頁面設計正在努力朝著突出本國特色的方向發展。目前，我們國家茶類網站頁面上的字體多數是選擇偶數級別的字號來決定字體的大小，像是2pt或是14pt，這樣做的好處就是頁面上多行文字的邊緣處不容易形成鋸齒狀;與此同時把行距之間的距離調大，這樣做可以改觀過去漢字在頁面上擁擠雜亂的現象，科學的調整文字版面之間的間距與節奏;最后去除了過去一味的追求像歐美國家網站一樣美觀的外表，而選擇小的文字字號，進而影響到文字信息的閱讀效果的這種做法。
4結束語
總而言之，我們國家傳統的文化元素不但是傳承技巧和智慧的語言，同時也代表著設計師們獨特創意的心聲。這就要求我們在設計茶類網站時候，站在我們國家傳統文化的基礎上，不斷的尋求新的發展和創新。在設計網站時將中國元素的圖案、形狀、意境、色調進行有機融合，以此來完成網站頁面設計的創新。
參考文獻
[1]王艷.中國傳統繪畫元素在現代平面廣告設計中的應用研究[D].西北師范大學,2014.
[2]高展.我國茶葉電子商務市場現狀分析及營銷模式研究[D].西南大學,2015.
[3]鄭莎莉.基于網絡數字媒體的茶文化推行方案設計實現[D].上海交通大學,2014.
[4]張兵文,李付青.基于云計算的茶企營銷網站安全研究[J].福建茶葉,2016(7).
[5]黃靜.網頁UI設計中“中國風”元素的應用研究[J].美術教育研究.2016(22).
[6]羅岱,王玉硯,黃靜儀.中國元素在旅游導覽系統界面設計中的應用[J].包裝工程.2016(08).
[7]祝曉銘,王艷平.高校站Banner的設計應用研究[J].現代計算機(專業版).2015(33).
作者:徐天樂 馬芳芳 單位:秦皇島職業技術學院
第四篇：在版式設計中多組圖片的使用處理分析論文
一、圖片在版式中的作用及圖片的分類
圖片在版式設計中占有很大的比重，視覺沖擊力比文字強85%,在視覺上可以使版面更加立體、在主題思想的傳達方面也更加清晰、直接。當一個版面當中出現多組圖片的情況時，圖片之間的大小、擺放位置、表現形式以及與文字的搭配等都關系著版式的成功。
在版式設計中的圖片我們常見的有具象性圖片和圖形兩種。
具象性圖片多是以自然環境、社會紀實、人文景觀、產品宣傳為主要內容，可以真實準確的反映和表達出所要傳達的內容及信息。這類圖片多為實物寫實拍攝為主，呈現的圖片完全可以傳達想要表達的信息，這類圖片多用于多用于產品宣傳、廣告、書籍等。
而圖形我們常見的則是以點、線、面為主的抽象性圖片，或者是繪圖插畫形式出現的圖片，多以寫實和裝飾的方式，通過顏色及組合方式的不同來表現。比較適合表現某種意境，讓人們在看到圖片的同時與版式所要傳達的內容信息產生一定的聯系，從而對其所傳遞的內容信息有著一定的了解和感悟。
二、多組圖片在版式設計中的應用及處理
現成的圖片并不能直接運用在版式當中，在排版之前需要對圖片進行一定的處理。處理過的圖片才會形成一種新的視覺效果，更好的表達主題。當多組圖片同時出現在版式當中時，我們則需要通過圖片的功能、內容及想要傳遞的信息來確定圖片的大小、擺放順序及圖片的形式。
1.圖片大小調整
即便同一張照片，在前期處理及圖片大小調整上有不同，最終效果也是不同的。圖片的大小可以影響到版式的最終效果，不僅是排版面積的問題。
一般來說，尺寸大的東西比尺寸小的更容易吸引注意力，這一點對于圖片也是一樣的。多組圖片同時出現，如果大小相同就失去主次關系。多組圖片中有一張尺寸偏大，就會引導人們先去注意該圖片，其次再去注意其他，這樣就會形成一個主次關系一種閱讀順序，這會更容易讓人們發現重點。
圖片的尺寸大小的不同，是表示(圖1:雙12淘寶網頁)先后順序關系的有效手段，也可以使版式顯得富有節奏感和變化。但是，為了保持頁面內的平衡，也需要對圖片的大小協調統一。如果圖片尺寸類型過多，每一張圖片的大小尺寸都不同，就會使得圖片的主次不明顯，版式顯得散亂。
圖1是淘寶雙十二的網頁版式設計，該頁面主要內容是嬰兒用品。因此在圖片排版時，將嬰兒作為主要內容的寫實圖片就被放大而且占據了整個頁面的近1/3.其他圖片則是以繪畫的形式出現在它的周圍，并且在尺寸上都做了相應的調整。在顏色上使用的也相對比較單一，這樣便很好的突出了主題，讓人們在看到頁面的第一眼時就會被左邊的圖片先吸引，然后才會觀察到剩余的圖片。頁面沒有給人雜亂的感覺是因為每張圖片的大小比例都是固定的。另外，版式中主要的圖片也進行了裁剪，嬰兒占畫面的主要部分，這是由于該頁面的主要內容就是嬰兒用品，所以在圖片的裁切時將母親的比重進行了縮減。
2.圖片的外形處理
對于圖片的外形來講，大體上我們可以分為幾何形和自然形兩種。拍攝出來的圖片都是在四邊形的方框當中，但在版式設計中，我們可以對圖片的外形進行處理，從而達到我們想要的效果。方形的圖片時最常見的，他可以將圖片的細節都保留下來，同時也給人一種穩定、莊重和安靜的感覺，但是也容易使畫面顯得呆板。當多組圖片同時出現時，方形圖片的排列是最常見的。
圓形圖也是一種較常見的處理方式，它削弱了圖片四角張揚的感覺，可以形成一種介于四邊形和自然形之間的效果。給人一種圓潤柔和的感覺。自然形態的圖片在版式中也較常出現，它能更好的強調物品的輪廓及形狀，使頁面可以產生一定的動感。這類圖片的處理方式多存在于雜貨、衣物、電子產品、食品的版式中。
3.圖片的組合擺放
多組圖片同時出現在版式內時，會以一定形式的組合呈現。適合形組合，多組圖片在外形上具有一定的適合關系，或者是將一個圖片嵌入到另一個圖片當中?？梢耘c色塊或者圖像進行組合。既產生一個新形象，同時也保留了圖片的各類信息，版式看起來更加生動。拼貼的組合方式，圖片在剪裁后，以打破常規的版面形式重新進行組合和排列，這種組合的方式可以增強版面的空間感和靈活性。拼貼式組合可以是將多張圖拼貼成為一張圖，也可以是一張圖經過剪裁拼貼。
圖片數量多少影響到讀者的閱讀興趣，如果只有一張圖片，那么它的質量就決定了版式的成功與否，也決定了人們對于該版式的印象。增加一張圖片，版式就會變得相對活躍起來，同時也會出現對比的格局。圖片增加到三張以上，就能營造出更加有空間感和動感的氛圍。圖片增多，瀏覽的余地也會增多，但是數量的多少也是需要根據版式的內容來安排的。
在這個快速閱讀的時代，讀圖已經成為了一種習慣。版式設計也需要緊跟時代的步伐，不能單純為了追求感官上的刺激。設計師可以選擇以簡潔明了的形式來突出主題傳達信息，給讀者留下深刻的印象，也可以選擇以新穎獨特的形式來追求另外的視覺體驗，滿足大眾的審美需求。但是在版式的排列當中，圖片排版會直接影響版式內容的藝術表現形式。將圖片設計與版式設計結合在一起，通過對讀者視覺上產生的沖擊力，利用人們的視覺心理，牢牢抓出讀者的眼球，才能將讀者的注意力吸引到版式上面來，設計出符合大眾審美要求的版式作品。
參考文獻：
[1]陳昭霓 著：《圖片在版式設計中的應用》科教文匯 2013年10月(下)。
[2]張翠霞 著：《版式設計中圖片排版要點分析》 劍南文學 2012年07期。
[3]佐佐木剛士著 武湛 譯：《版式設計原理》中國青年出版社 2012年。
第五篇：網頁分析報告
高 校 藝 術 網 頁 設 計 分 析
姓名
班級
學號：
學院：國際教育學院
1
一、網站設計 1.1、網站設計的意義
網頁設計與制作綜合實訓是教學過程中重要的實踐性教學環節。它是根據專業教學計劃的要求，在教師指導下對學生進行的網頁制作專業技能的訓練，培養學生綜合運用理論知識分析和解決實際問題的能力，實現由理論知識向操作技能的轉化，是對理論與實踐教學效果的檢驗，也是對學生綜合分析能力與獨立工作能力的培養過程。
因此，加強實踐教學環節，搞好實訓教學，對實現本專業的培養目標，提高學生的綜合素有著重要的作用。
1.2、網站設計的目的
1通過綜合實訓進一步鞏固，深化和加強學生的理論知識與專業技能 (1)、進一步熟悉和掌握網站建設的基本流程和技術規范; (2)、鞏固運用Dreamweaver網頁制作軟件制作靜態網頁的知識;
(3)、鞏固綜合運用Dreamweaver獨立設計一個內容完整、圖文并茂、技術運用得當的網站;
(4)、具備獨立撰寫實訓報告的基本能力;
(5)、在網頁設計的實踐中培養分析問題、解決問題的能力，培養創新能力和團隊意識;
(6)、培養學生理論聯系實際的工作作風、嚴肅認真的科學態度以及獨立工作的能力，樹立自信心;
(7)、為今后從事網站開發、維護和管理奠定基礎。
1.3、網站設計的任務
1、站點規劃，搜集資料。確定網站主題內容，規劃站點結構，從網上搜索相關資料(圖片、文字等)。
2、進行主頁設計。構思主頁布局，進行主頁標題圖片的設計(要求原創)，進行主頁其余圖片的設計和頁面內容的錄入，最后進行主頁的整體優化設計。
3、動畫設計。主頁動畫設計和其余頁面動畫設計，充分運用所掌握技術，效果好。
2
4、綜合優化。鏈接正確、得當，動態效果好(時間軸動畫、行為、代碼的嵌入等)。
5、網站測試并遞交。在瀏覽器中對完成的網站逐頁打開測試，包括鏈接正確與否，頁面打開時間，圖片和動畫是否丟失等。
1.4、網站設計的要求
1、站點結構與命名
(1)創建站點的名字統一使用學號后兩位+姓名的第一個字母。要將站點目錄明確分層，不能將內容都放在根目錄下;不要使用中文目錄;為每種類型文件都建立一個獨立的目錄。(例如images文件夾，可以再建子目錄，但必須盡量少，以便于管理。)如圖：
(2)主頁上最少有5個指向其它頁面的電子鏈接
(3)網頁數為10頁以上，每一個網頁的標題(title)必須包含本人的學號后兩位和姓名
(4)網頁(任意一個頁面均可)中必須包含以下內容： ?使用flash動畫(可用已有的素材) ?鼠標經過圖像
3
?下拉菜單或彈出菜單 ?錨鏈接和圖片熱點鏈接
?使用CSS樣式
二、網站主題
本網站以個人現在的大概情況介紹為主題，闡述喜好，表現本人的性格特點。
三、網站頁面鏈接總圖
4
四、綜合知識的運用情況 4.1、表格與層的使用
(1)、表格的使用
設計網頁時，插入表格的目的一般是為了能在網頁中控制文字、圖片在網頁中的位置。利用表格可以實現不同的布局模式，而且可以保證當瀏覽器改變頁面字體大小時保持頁面布局不變，這是很重要的，因為網頁設計者總是希望自己的作品能夠真實地展現在瀏覽者面前，而利用表格可以確保這種效果。 (2)、層的使用
在這次網頁設計過程中，使用了大量層，因為它靈活好用，可以隨便拖動，變大變小都很方便。圖層最大的特點是可以重疊，并且可以設置每個圖層是否可見，同時也能自定義各圖層之間的關系。
4.2、運用Photoshop工具
圖片的插入和設置背景圖像是兩個不同的概念，當然可以達到相同的效果，這是很基本的知識運用，也用了很多次，但是當圖像較小時在層中插入更方便些，因為作為背景時圖片會重復出現造成混亂的局面，但圖片過小時，用層將之拉寬大就會使圖片變模糊、嚴重變形，不但沒能美化頁面反而帶來了負面影響，此時最好借助Photoshop工具來編輯圖片。文本的插入在層內或框架內完成較好，但
5
不能設置為藝術字體，因此需要運用Photoshop工具來輔助完成，其實很多地方都可以用到Photoshop工具特別是一些要表現自己獨特的思想和設計畫面。
4.3、CSS樣式
在我們瀏覽網頁時，經?？吹骄W頁的導航條是由文字制作的。這是因為文字與圖像相比，文字的下載速度更快一些。但加上連接的文字可能會改變它的顏色和樣式，和網頁整體不協調，所以這次網頁設計中利用了CSS樣式來定義文字的統一樣式，并與網頁融為一體，讓網頁看以來更統一。
4.4、熱點鏈接、錨點鏈接
(1)、熱點鏈接
在打開帶有圖片的網頁時，有時看到這樣的情況：當鼠標指向圖片的不同部位是，可以打開不同的超級鏈接，這種技術我們稱之為網頁圖片熱點鏈接。熱點鏈接經常出現在一個網站的導航頁里，熱點鏈接不僅可以將整張圖片作為鏈接的連載體，還可以將圖片的某一部分設為鏈接，這要通過設置影像地圖來實現。熱點鏈接的原理就是利用HTML語言在圖片上定義形狀的區域，然后給這些區域加上鏈接，這些區域被稱做熱點。而在本次設計中，通過利用Dreamweaver中的熱區制作技術，實現創建熱點鏈接的效果。 (2)、錨點鏈接
在網頁(Untitled-6.html)我的作品中引用了錨點鏈接，創建命名錨點(間稱錨點)就是在文檔中位置標記，并給該位置設置一個名稱，以便引用。通過創建錨點，可以使鏈接指向當前文檔或者不同文檔中的指定位置。錨點常常被用來實現到特定的主題或者文檔頂部的跳轉鏈接，使訪問者能夠快速瀏覽到選定的位置，加快信息檢索速度。創建錨點鏈接，首先要設置一個命名錨點，然后建立到命名錨點的鏈接。
4.5、鼠標經過圖像
鼠標經過圖像是指當鼠標指針經過一幅圖像時，圖像的顯示會變為另一幅圖像。鼠標經過圖像實際上是由兩幅圖像組成，初始圖像(頁面首次裝載時顯示的圖像)和替換圖像(當鼠標指針經過時顯示的圖像)。用于鼠標經過圖像的兩幅圖像大小
6
必須相同。如果圖像的大小不同，Dreamweaver會自動調整第二幅圖像的大小，使之與第一幅圖像匹配。在這次設計的過程中也引用到了鼠標經過圖像。 4.6、彈出信息
行為是Dreamweaver中最具特色的功能，它能夠讓大家不用編程就實現期望的動作行為。彈出行為是它的功能之一。彈出信息是網頁提示語，當打開本網站，彈出一個“歡迎來到我的個人網站!!!”而提示框，會給人一種很親切的感覺。4.7、框架的使用
在網頁設計中，框架可以將窗口分割成幾個不同的小窗口，各個窗口包含不同的網頁，并且在替換窗口中的網頁文件時不會影響到其他窗口中的網頁?？蚣茏钇胀ǖ挠锰幘褪菍㈨撁鎰澐殖蔀橐粋€導航區和一個內容區?？蚣芗且粋€使用框架定義網頁的文件?？蚣芗斜４媪岁P于頁面中的框架尺寸、位置以及每個框架中作為內容載入的所有文件名得信息。用框架制成的網頁，如UntitledFrameset-9.html所示。
4.8、文字移動效果
在設計網頁中插入代碼從右向左移，從而就可以實現文字從右向左移動的效果了。
五、課程設計心得與體會
這次網頁設計實戰篇——個人網站設計完成后，我收獲了很多，感觸也很深。
我最大的感受就是理論不用于實踐終究是理論，說得難聽點那根本就是紙上談兵，止于理論的學習，將來是沒多少成績的，有前途發展的話也必將是少了更為之錦上添花的一筆。
當然也深刻認識了一點，那就是我們所學的知識雖說是很基礎很根本，但沒有根基怎么能建好別墅呢?所以說基礎知識是很重要的，我們在學習過程中不能小看而去忽略它，它是一筆財富，能引導我們看得更遠飛得高。
通過這次設計，我發現一個很普遍的問題：我們往往是眼高手低，學習這些知識時覺得它就是小菜一樁，但現在真的驗證了“看花容易繡花這句話，當我們著手實踐時就不像我們想象中的那么簡單了，每一個細節都需要注意，稍有不慎
7
頁面就在預覽中變了樣，因此更需要我們細心和耐心地去完成，也就兩個字概括——認真，只有認真對待才會從骨子里學到東西，才學到心里去了。
我覺得這次確實是很有意義的一次檢測，本來自我感覺良好的，結果實戰時還是存在很題的，平時學起來覺得很輕松就以為掌握了所學知識，但現在都忘記很多細節是怎么樣的了，因此開始著手時有些障礙，心把以前的實驗內容都溫習一遍，遇到不懂的就及時查資料，比如翻閱資料書，百度，也可以請教同學，一起討論，相互學習，于是最后也如魚得水，水到渠成，因此得到一個非常重要的結論——只要自己想學只要自己有那份執著與毅力，虛心的請教，勤于查閱相關資料就一定會有收獲的，真的當今沒有什么知識是用不著的，在哪，哪里都是知識，只要自己持有高度的學習熱忱。當然，我們在學習過程中一定要及時鞏固、練習，掌握了也不一定熟悉，熟能生巧啊!我們應該吸取這個教訓，否則即使我們最終達到了目的，但我們走了很多彎路，而不是事半功倍的結果了。不過最終，經過長久的堅持與不斷的琢磨，看到了自己辛苦后的成果，盡管這還有很多不足，但看著它我心里充滿著喜悅，一分耕耘一分收獲，這永遠是真理。
完成自己的作品后我也觀賞了其他同學的作品，對比起來，各有千秋，當然能從其中發現很多值得我去學習的地方，比如說有的頁面布局很好，有的頁面內容很充實，看起來很有感覺，也可以稱之為網站了，而我的有些頁面看上去，可能使別人不會產生網站這一個概念，反而會覺得像是PPT演示文稿，這也反映了我的一個問題：心中還沒很清楚領悟建立網站的基本要點，還應該加強這方面的知識儲備。另外我也發現有的同學的頁面設計插入了太多圖片或者太多浮動的東西，弄得網頁太雜，沒有一定的風格，更談不上凸顯主題了······從對比中，我學到了很多，能讓我揚長避短，吸取他人之精華，去除他人之糟粕。
這次作業對于我來說不是一項任務而是一種享受，因為我發現我越來越喜歡它，不管別人說做這件事做到多晚做得有多累，我都沒覺得。至還越做越興奮。對于一個女生來說，特別是對于一個對電腦不感興趣的女生來說，我覺得這是我最大的收獲，我找到了我的興趣、我的老師，我在計算機專業中找到了方向。真的很感謝老師能給我們這次機會，當然也發現有很多同學跟我一樣喜歡上了它，在這方面也做得比較好，于是我也有一種緊迫感，畢竟現在競爭壓力很大，“適
8
者生存，弱者淘汰”是亙古不變的自然法則，我想我應該更加努力，抓住機會把它學通學精。
9