網(wǎng)頁(yè)設(shè)計(jì)的教學(xué)設(shè)計(jì)

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

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

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

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

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

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

7、面，學(xué)生意會(huì)）（二）、色彩搭配頁(yè)面的色彩設(shè)計(jì)，直接影響閱讀者的觀(guān)賞興趣，彩色的網(wǎng)頁(yè)總是勝于單色的網(wǎng)頁(yè)，網(wǎng)頁(yè)也是一件藝術(shù)品，因?yàn)樗纫笪淖值膬?yōu)美流暢，有要求頁(yè)面的新穎、整潔，使用色彩可以產(chǎn)生強(qiáng)烈的視覺(jué)效果，是頁(yè)面更加生動(dòng)。所以我們?cè)谥谱鲿r(shí)一定要先確定網(wǎng)站的主題色，以下介紹幾種色調(diào)。1、同類(lèi)色比鄰近色更加接近的顏色，它主要指在同一色相中不同的顏色變化。例如，紅顏色中有紫紅、深紅、玫瑰紅、大紅、朱紅、桔紅等等種類(lèi)，黃顏色中又有深黃、土黃、中

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

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

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

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

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