網(wǎng)頁設計的教學設計

1、網(wǎng)頁的設計網(wǎng)頁的設計教學目標：教學目標：1、掌握網(wǎng)頁元素和網(wǎng)頁構(gòu)件的使用：2、能進行簡單的網(wǎng)頁設計；教學重點：教學重點：網(wǎng)頁構(gòu)件的使用；網(wǎng)頁設計；教學難點：教學難點：網(wǎng)頁的設計；課時課時：第1課時導入：導入：今天我們進入第六章網(wǎng)頁的設計與制作的學習，一個成功的網(wǎng)站不僅僅在于它的內(nèi)容的多少，功能的交互功能多強，設計也是關鍵的一項，它決定了網(wǎng)站的藝術(shù)美是否能吸引瀏覽者的眼球。新課：新課：一、網(wǎng)頁元素的組成一、網(wǎng)頁元素的組成打開2007年全國

2、中小學信息技術(shù)大賽中獲獎作品《鄱陽湖白鶴》，讓學生觀看并總結(jié)網(wǎng)頁的組成元素有？文字、圖片、動畫、聲音、超鏈接等。一般情況下，網(wǎng)頁都應該具備這三種元素，但是也有的網(wǎng)頁只有其中的兩種，甚至只有一種。如有的網(wǎng)頁就是為了展示一篇文章，那么這個網(wǎng)頁就沒有必要放置圖像；有的網(wǎng)頁只用于顯示一幅大尺寸的照片，也可以沒有文字說明；而有的網(wǎng)頁純粹就是提供資料，就不必設置超鏈接，這樣，這個網(wǎng)頁就成為網(wǎng)絡中某一個信息鏈的“終點”，即只有別的網(wǎng)頁鏈接它。過渡：同

3、學們想不想自己也做個網(wǎng)站呢？想做網(wǎng)站前提則是先設計網(wǎng)站，規(guī)劃網(wǎng)站的主題，畫出草圖。二、網(wǎng)頁設計二、網(wǎng)頁設計現(xiàn)在給大家5分鐘的時間設計一個學校網(wǎng)站的主頁，內(nèi)容包括網(wǎng)頁的主題、思考內(nèi)容Angel網(wǎng)頁Music網(wǎng)頁怎樣突出的網(wǎng)頁的主題網(wǎng)頁的框架結(jié)構(gòu)及特點以什么色調(diào)為主及作用圖、文有何講究網(wǎng)頁版式設計的視覺因素網(wǎng)頁版式設計的視覺因素為了增強人們對網(wǎng)頁的注意程度，提高對于網(wǎng)頁內(nèi)容的理解程度，從而影響人們的思想和行為，我們必須按照人的視覺生理和心理

4、特征，去設計我們的網(wǎng)頁版式，以達到最佳的設計訴求。我們先來看一下人的視線移動規(guī)律：?人眼的視線沿水平方向運動比沿垂直方向運動快而且不易疲勞。?視線的變化習慣于從左到右，從上到下和順時針方向運動。?當視線沿既不水平，也不垂直的斜線方向移動時，在水平方向上下約45o的范圍視線為從左到右移動，在垂直方向左右約45o的范圍內(nèi)，視線為從上到下移動。符合視覺規(guī)律?文字橫向編排由于人眼的視線橫向移動比豎向移動快而且不易疲勞，因此將文字盡量橫向排布，除

5、非一些有特殊設計要求的版式或書法字體的版式。同時，頁面盡量保持橫向尺寸固定，豎向尺寸不固定，目的是使人們能連續(xù)不間斷地瀏覽頁面。需要注意的是，應避免頁面左右、上下都能滾動，這會給瀏覽者帶來極大的不便。?2重要信息置于“最佳視覺區(qū)域”在進行網(wǎng)頁版式設計時，要考慮將最重要的信息或視覺流程的停留上安排在注目價值高的位置，這就是“最佳視覺區(qū)域”。由于人們習慣于將視線從左到右、從上到下移動，因而視區(qū)中的不同位置注目程度不同。圖片的類型和最上面是標

6、題及廣告，左側(cè)是導航鏈接的類型?！癟”布局就是指頁面頂部為橫條網(wǎng)站標志與廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因為菜單背景色彩較深，整體效果類似英文字母“T”，我們稱之為“T”形布局。這種布局的優(yōu)點是頁面結(jié)構(gòu)清晰，主次分明，是初學者最容易上手的布局方法。缺點是規(guī)矩呆板，如果細節(jié)色彩上不注意，很容易讓人感覺枯燥無味。6、圖片或文字在頁面上作流線的編排構(gòu)成，產(chǎn)生韻律與節(jié)奏。焦點型、滿版型、分割型、拐角型、流線型、對稱型等等。（展示頁

7、面，學生意會）（二）、色彩搭配頁面的色彩設計，直接影響閱讀者的觀賞興趣，彩色的網(wǎng)頁總是勝于單色的網(wǎng)頁，網(wǎng)頁也是一件藝術(shù)品，因為它既要求文字的優(yōu)美流暢，有要求頁面的新穎、整潔，使用色彩可以產(chǎn)生強烈的視覺效果，是頁面更加生動。所以我們在制作時一定要先確定網(wǎng)站的主題色，以下介紹幾種色調(diào)。1、同類色比鄰近色更加接近的顏色，它主要指在同一色相中不同的顏色變化。例如，紅顏色中有紫紅、深紅、玫瑰紅、大紅、朱紅、桔紅等等種類，黃顏色中又有深黃、土黃、中

8、黃、桔黃、淡黃、檸檬黃等等區(qū)別。它起到色彩調(diào)和統(tǒng)一，又有微妙變化的作用。第一眼看上去給人溫柔、雅致、安寧的心理感受，便可知該組同類色系非常調(diào)和統(tǒng)一。只運用同類色系配色，是十分謹慎穩(wěn)妥的做法，但是有時會有單調(diào)感。添加少許相鄰或?qū)Ρ壬担梢泽w現(xiàn)出頁面的活躍感和強度。2、暖色，如圖中的黃色，橙色，紅色，紫色等都屬于暖色系列。暖色系的飽和度越高，其溫暖特性越明顯。可以刺激人的興奮性，使體溫有所升高。暖色跟黑色調(diào)和可以達到很好的效果。高明度高純

9、度的色彩搭配，把頁面表達得鮮艷炫目，有非常強烈刺激的視覺表現(xiàn)力。冷色，如圖中的綠色，藍色，藍紫色等等都屬于冷色系列。冷色系亮度越高，其特性越明顯，能夠使人的心情平靜，清爽。冷色一般跟白色調(diào)和可以達到一種很好的效果。?3、冷暖色與此同時，在一個環(huán)境、區(qū)域范圍里，色彩的屬性、性能特性是相對的。例如黃色在藍色、綠色這兩個區(qū)域環(huán)境下，黃色可以說這個時候是呈暖色，而出現(xiàn)在桔紅、朱紅、深紅這幾個區(qū)域環(huán)境下，黃色可以說在這個時候是呈冷色。同樣的，藍色

10、相對綠色是冷色，紫色相對藍色是暖色等等。可根據(jù)網(wǎng)頁設計主題的目的要求，環(huán)境協(xié)調(diào)度的需要等等做相應的搭配調(diào)整。?色相對比色相對比是指因色相之間的差別形成的對比。要增強色彩的表現(xiàn)力，當主色相確定后，必須考慮其他色彩與主色相是什么關系，要表現(xiàn)什么內(nèi)容及效果。不同色相對比取得的效果有所不同，兩色越接近，對比效果越柔和。?明度對比明度對比是色彩明暗程度的對比，也稱色彩的黑白度對比。兩種不同明度的色彩并列時，會使明色更亮，而暗色更暗。將同明度的灰色

11、置于白底和黑底上，會感覺黑底上的灰色較亮；而白底上的灰色明度較暗。?純度對比純度對比是指不同色彩之間純度的差別而形成的對比。色彩純度可大致分為高純度、中純度、低純度三種。未經(jīng)調(diào)和過的原色純度是最高的，而間色多屬中純度的色彩，復色其本身純度偏低而屬低純度的色彩范圍。?冷暖對比冷暖對比是指不同色彩之間的冷暖差別形成的對比。色彩的冷暖對比還受明度與純度的影響，白光反射高而感覺冷，黑色吸收率高而感覺暖。冷暖對比的應用，通常在休閑娛樂網(wǎng)站、食品網(wǎng)

12、站出現(xiàn)比較多。將這兩個色系的色彩安排在同一畫面時，其對比效果極為強烈。?面積對比是指兩個或更多色塊的對比，這是一種多與少、大與小之間的對比。面積的對比，可以是中高低明度差的面積變化及中高低純度差的面積變化。同一種色彩，面積越大，明度、純度越強，面積越小，明度、純度越低。?同種色的調(diào)和同種色的調(diào)和是相同色相、不同明度和純度的色彩調(diào)和，使之產(chǎn)生秩序的漸進，在明度、純度的變化上，為了不至于讓整個頁面呈現(xiàn)過于單調(diào)平淡，有些頁面則是加入極其小的其