教師備課紙?zhí)K州工業(yè)職業(yè)技術(shù)學(xué)院Suzhou Institute Of Industrial Technology第 13 頁(yè)教師備課首頁(yè)蘇州工業(yè)職業(yè)技術(shù)學(xué)院Suzhou Institute Of Industrial Technology第 1 頁(yè)課題子項(xiàng)目一第3講 確定網(wǎng)頁(yè)的布局、色彩、站點(diǎn)結(jié)構(gòu)課型實(shí)踐授課班級(jí)授課時(shí)數(shù)2教學(xué)目標(biāo)1. 分析開(kāi)發(fā)的項(xiàng)目，根據(jù)項(xiàng)目的特色確定網(wǎng)站的站點(diǎn)結(jié)構(gòu)2. 根據(jù)項(xiàng)目的特色確定網(wǎng)站的色彩定位3. 根據(jù)項(xiàng)目的特色確定網(wǎng)站的網(wǎng)頁(yè)布局教學(xué)重點(diǎn)能夠?qū)?xiàng)目進(jìn)行合理的分析，并根據(jù)本小組對(duì)項(xiàng)目的理解確定網(wǎng)站的站點(diǎn)結(jié)構(gòu)、色彩定位以及網(wǎng)站的網(wǎng)頁(yè)布局教學(xué)難點(diǎn)能夠?qū)?xiàng)目進(jìn)行合理的分析，并根據(jù)本小組對(duì)項(xiàng)目的理解確定網(wǎng)站的站點(diǎn)結(jié)構(gòu)、色彩定位以及網(wǎng)站的網(wǎng)頁(yè)布局學(xué)情分析教學(xué)效果教 后 記對(duì)各小組制作的項(xiàng)目開(kāi)發(fā)進(jìn)度表中存在的問(wèn)題進(jìn)行說(shuō)明。新授：一、結(jié)構(gòu)設(shè)計(jì)設(shè)計(jì)網(wǎng)站的結(jié)構(gòu)首先要明確網(wǎng)站的內(nèi)容。將所有要應(yīng)用到網(wǎng)站上的素材資料列舉出來(lái)，根據(jù)內(nèi)容設(shè)計(jì)一個(gè)結(jié)構(gòu)藍(lán)圖。比如說(shuō)網(wǎng)站的主頁(yè)是什么？網(wǎng)站有哪些欄目？要?jiǎng)澐謳讉€(gè)版塊？怎么設(shè)置各欄目或者各網(wǎng)頁(yè)之間的鏈接？如果內(nèi)容過(guò)多，繪制一個(gè)導(dǎo)航圖也是非常有必要的。【舉例】下圖為參考項(xiàng)目“網(wǎng)上書(shū)店”的網(wǎng)站結(jié)構(gòu)藍(lán)圖主頁(yè)（首頁(yè)）新書(shū)展示暢銷圖書(shū)天天特價(jià)網(wǎng)上訂單詳細(xì)介紹詳細(xì)介紹詳細(xì)介紹【階段任務(wù)1】請(qǐng)?jiān)赪ord中為你開(kāi)發(fā)的網(wǎng)站繪制一幅結(jié)構(gòu)藍(lán)圖。繪制完成以“第X組（開(kāi)發(fā)的網(wǎng)站名）網(wǎng)站結(jié)構(gòu)藍(lán)圖”為名保存文檔?！疽蟆康谝唬阂灾黜?yè)為根，繪制樹(shù)狀結(jié)構(gòu)藍(lán)圖。第二：結(jié)構(gòu)完整、合理，思路清晰。二、關(guān)于網(wǎng)頁(yè)布局網(wǎng)頁(yè)可以說(shuō)是網(wǎng)站構(gòu)成的基本元素。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來(lái)說(shuō)，網(wǎng)頁(yè)的布局設(shè)計(jì)相當(dāng)重要。搞網(wǎng)站設(shè)計(jì)不是把所有內(nèi)容放置到網(wǎng)頁(yè)中就行了，還需要我們把網(wǎng)頁(yè)內(nèi)容進(jìn)行合理的排版布局，以給瀏覽者賞心悅目的感覺(jué)，增強(qiáng)網(wǎng)站的吸引力。在設(shè)計(jì)布局的時(shí)候我們要注意把文字、圖像在網(wǎng)頁(yè)空間上均勻分布并且不同形狀、色彩的網(wǎng)頁(yè)元素要相互對(duì)比，以形成鮮明的視覺(jué)效果。只有當(dāng)網(wǎng)頁(yè)布局和網(wǎng)頁(yè)內(nèi)容成功融合時(shí)，這種網(wǎng)頁(yè)才是受人喜歡的。我們常見(jiàn)的布局結(jié)構(gòu)有“國(guó)”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、封面型布局、Flash布局、標(biāo)題文本型布局、框架型布局和變化型布局等。a“國(guó)”字型布局也可以稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來(lái)就是網(wǎng)站的主要內(nèi)容，左右分列兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們?cè)诰W(wǎng)上見(jiàn)到的差不多最多的一種結(jié)構(gòu)類型。 “國(guó)”字型b“匡”字型布局這種結(jié)構(gòu)與上一種其實(shí)只是形式上的區(qū)別，它去掉了“國(guó)”字形布局的最右邊的部分，給主內(nèi)容區(qū)釋放了更多空間。這種布局上面是標(biāo)題及廣告橫幅，接下來(lái)的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。 “匡”字型c“三”字型布局這是一種簡(jiǎn)潔明快的網(wǎng)頁(yè)布局，在國(guó)外用的比較多，國(guó)內(nèi)比較少見(jiàn)。這種布局的特點(diǎn)是在頁(yè)面上由橫向兩條色塊將網(wǎng)頁(yè)整體分割為3部分，色塊中大多放置廣告條與更新和版權(quán)提示。 “三”字型d“川”字型布局整個(gè)頁(yè)面在垂直方向分為三列，網(wǎng)站的內(nèi)容按欄目分布在這三列中，最大限度地突出主頁(yè)的索引功能。 “川”字型e封面型布局這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁(yè)，大部分為一些精美的平面設(shè)計(jì)結(jié)合一些小的動(dòng)畫(huà)，放上幾個(gè)簡(jiǎn)單的鏈接或者僅是一個(gè)“進(jìn)入”的鏈接甚至直接在首頁(yè)的圖片上做鏈接而沒(méi)有任何提示。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個(gè)人主頁(yè)，如果說(shuō)處理的好，會(huì)給人帶來(lái)賞心悅目的感覺(jué)。封面型fFlash布局這種布局是指整個(gè)網(wǎng)頁(yè)就是一個(gè)Flash動(dòng)畫(huà)，它本身就是動(dòng)態(tài)的，畫(huà)面一般比較絢麗、有趣，是一種比較新潮的布局方式。其實(shí)這種布局與封面型結(jié)構(gòu)是類似的，不同的是由于Flash強(qiáng)大的功能，頁(yè)面所表達(dá)的信息更豐富。其視覺(jué)效果及聽(tīng)覺(jué)效果如果處理得當(dāng)，會(huì)是一種非常有魅力的布局。Flash布局g標(biāo)題文本型布局標(biāo)題文本型布局是指頁(yè)面內(nèi)容以文本為主，這種類型頁(yè)面最上面往往是標(biāo)題或類似的一些東西，下面是正文，比如一些文章頁(yè)面或注冊(cè)頁(yè)面等就是這一類。 標(biāo)題文本型h框架型布局采用框架布局結(jié)構(gòu)，常見(jiàn)的有左右框架型、上下框架型和綜合框架型。由于兼容性和美觀等因素，這種布局目前專業(yè)設(shè)計(jì)人員采用的已不多，不過(guò)在一些大型論壇上還是比較受青睞的，有些企業(yè)網(wǎng)站也有應(yīng)用。左右框架型上下框架型綜合框架型i變化型布局即上述幾種類型的結(jié)合與變化。變化型三、形象設(shè)計(jì)打開(kāi)一個(gè)網(wǎng)站，給用戶留下第一印象的既不是網(wǎng)站豐富的內(nèi)容，也不是網(wǎng)站合理的版面布局，而是網(wǎng)站的色彩。色彩對(duì)人的視覺(jué)效果非常明顯，一個(gè)網(wǎng)站設(shè)計(jì)成功與否，在某種程度上取決于設(shè)計(jì)者對(duì)色彩的運(yùn)用和搭配。因?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)屬于一種平面效果設(shè)計(jì)，在排除立體圖形、動(dòng)畫(huà)效果之外，在平面圖上，色彩的沖擊力是最強(qiáng)的，它很容易給用戶留下深刻的印象。因此，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，我們必須要高度重視色彩的搭配。1、色彩的基礎(chǔ)知識(shí)色彩五顏六色、千變?nèi)f化，我們平時(shí)所看到的白色光，經(jīng)過(guò)分析在色帶上可以看到，它事實(shí)上包括紅、橙、黃、綠、青、藍(lán)、紫等七色，各顏色間自然過(guò)渡。其中，紅、黃、藍(lán)是三原色，三原色通過(guò)不同比例的混合可以得到各種顏色。色彩有冷暖色之分，冷色(如藍(lán)色)給人的感覺(jué)是安靜、冰冷；而暖色(如紅色)給人的感覺(jué)是熱烈、火熱。冷暖色的巧妙運(yùn)用可以讓網(wǎng)站產(chǎn)生意想不到的效果。色彩與人的心理感覺(jué)和情緒也有一定的關(guān)系，利用這一點(diǎn)可以在設(shè)計(jì)網(wǎng)頁(yè)時(shí)形成自己獨(dú)特的色彩效果，給瀏覽者留下深刻的印象。一般情況下，各種色彩給人的感覺(jué)是：紅色代表熱情、活潑、熱鬧、溫暖、幸福、吉祥橙色代表光明、華麗、興奮、甜蜜、快樂(lè)黃色代表明朗、愉快、高貴、希望綠色代表新鮮、平靜、和平、柔和、安逸、青春藍(lán)色代表深遠(yuǎn)、永恒、沉靜、理智、誠(chéng)實(shí)、寒冷紫色代表優(yōu)雅、高貴、魅力、自傲白色代表純潔、純真、樸素、神圣、明快灰色代表憂郁、消極、謙虛、平凡、沉默、中庸、寂寞黑色代表崇高、堅(jiān)實(shí)、嚴(yán)肅、剛健、粗莽紅色主題橙色主題黃色主題綠色主題藍(lán)色主題紫色主題白色主題灰色主題黑色主題2、色彩搭配的原則色彩搭配既是一項(xiàng)技術(shù)性工作，同時(shí)它也是一項(xiàng)藝術(shù)性很強(qiáng)的工作，因此，設(shè)計(jì)者在設(shè)計(jì)網(wǎng)頁(yè)時(shí)除了考慮網(wǎng)站本身的特點(diǎn)外，還要遵循一定的藝術(shù)規(guī)律，從而設(shè)計(jì)出色彩鮮明、性格獨(dú)特的網(wǎng)站。a特色鮮明一個(gè)網(wǎng)站的用色必須要有自己獨(dú)特的風(fēng)格，這樣才能顯得個(gè)性鮮明，給瀏覽者留下深刻的印象。b搭配合理網(wǎng)頁(yè)設(shè)計(jì)雖然屬于平面設(shè)計(jì)的范疇，但它又與其它平面設(shè)計(jì)不同，它在遵從藝術(shù)規(guī)律的同時(shí)，還考慮人的生理特點(diǎn)，色彩搭配一定要合理，給人一種和諧、愉快的感覺(jué)，避免采用純度很高的單一色彩，這樣容易造成視覺(jué)疲勞。 c講究藝術(shù)性網(wǎng)站設(shè)計(jì)也是一種藝術(shù)活動(dòng)，因此它必須遵循藝術(shù)規(guī)律，在考慮到網(wǎng)站本身特點(diǎn)的同時(shí)，按照內(nèi)容決定形式的原則，大膽進(jìn)行藝術(shù)創(chuàng)新，設(shè)計(jì)出既符合網(wǎng)站要求，又有一定藝術(shù)特色的網(wǎng)站。3、色彩搭配要注意的問(wèn)題a使用單色盡管網(wǎng)站設(shè)計(jì)要避免采用單一色彩，以免產(chǎn)生單調(diào)的感覺(jué)，但通過(guò)調(diào)整色彩的飽和度和透明度也可以產(chǎn)生變化，使網(wǎng)站避免單調(diào)。b使用鄰近色所謂鄰近色，就是在色帶上相鄰近的顏色，例如綠色和藍(lán)色，紅色和黃色就互為鄰近色。采用鄰近色設(shè)計(jì)網(wǎng)頁(yè)可以使網(wǎng)頁(yè)避免色彩雜亂，易于達(dá)到頁(yè)面的和諧統(tǒng)一。c使用對(duì)比色對(duì)比色可以突出重點(diǎn)，產(chǎn)生了強(qiáng)烈的視覺(jué)效果，通過(guò)合理使用對(duì)比色能夠使網(wǎng)站特色鮮明、重點(diǎn)突出。在設(shè)計(jì)時(shí)一般以一種顏色為主色調(diào)，對(duì)比色作為點(diǎn)綴，可以起到畫(huà)龍點(diǎn)睛的作用。d黑色的使用黑色是一種特殊的顏色，如果使用恰當(dāng)，設(shè)計(jì)合理，往往產(chǎn)生很強(qiáng)烈的藝術(shù)效果，黑色一般用來(lái)作背景色，與其它純度色彩搭配使用。e背景色的使用背景色一般采用素淡清雅的色彩，避免采用花紋復(fù)雜的圖片和純度很高的色彩作為背景色，同時(shí)背景色要與文字的色彩對(duì)比強(qiáng)烈一些。f色彩的數(shù)量一般初學(xué)者在設(shè)計(jì)網(wǎng)頁(yè)時(shí)往往使用多種顏色