專題頁面設(shè)計與制作課件

專題頁面的設(shè)計與制作主講：鄭州北方汽修學(xué)校網(wǎng)編吳藝博2023/1/91專題頁面的設(shè)計與制作主講：鄭州北方汽修學(xué)校網(wǎng)編吳藝博2023專題網(wǎng)頁主要是由頁面色彩、頁面布局、頁面圖片和文字信息組成。頁面色彩主要影響頁面的整體觀感、設(shè)計品質(zhì)以及受眾情緒。頁面布局主要是對頁面進行整體的規(guī)劃，而頁面圖片和頁面文字主要是為了明確的表示專題頁面所表達的內(nèi)容以及含義。專題頁面的設(shè)計與制作2023/1/92專題網(wǎng)頁主要是由頁面色彩、頁面布局、頁面圖片和文字信息組成。010203專題頁面色彩專題網(wǎng)頁布局專題頁面圖片與文字目錄/contents2023/1/93010203專題頁面色彩專題網(wǎng)頁布局專題頁面圖片與文字目錄1專題頁面與色彩搭配zhuantyemianyusecaidapei2023/1/941專題頁面與色彩搭配zhuantyemianyusecaid 一個網(wǎng)站，給觀看者留下第一印象不是網(wǎng)站合理的排版，也不是網(wǎng)站豐富的內(nèi)容，而是網(wǎng)站的色彩。色彩最具表現(xiàn)力，色彩的搭配不同，給人的感覺也是不同的。一個專題頁面是否能夠吸引瀏覽者的目光重點取決于色彩。專題頁面與色彩搭配2023/1/95 一個網(wǎng)站，給觀看者留下第一印象不是網(wǎng)站合理的排版，也不是網(wǎng)一切色彩都是由光的照射產(chǎn)生的色彩分為有彩色系和無彩色系色彩三要素：色相、明度、純度等分析顏色色彩基礎(chǔ)專題頁面與色彩搭配2023/1/96一切色彩都是由光的照射產(chǎn)生的色彩基礎(chǔ)專題頁面與色彩搭配2021.色彩的鮮明性：如果一個網(wǎng)站的色彩鮮明，很容易引人注意，會給瀏覽者耳目一新的感覺。2.色彩的獨特性：要有與眾不同色彩，網(wǎng)頁的用色必須要有自己獨特的風(fēng)格，融入自己的想法，這樣才能給人瀏覽者留下深刻的印象。3.色彩搭配的合理性：色彩要根據(jù)主題來確定，不同的主題選用不同的色彩。例如，用藍色體現(xiàn)科技型網(wǎng)站的專業(yè)，用粉紅色體現(xiàn)女性的柔情等。色彩特性專題頁面與色彩搭配2023/1/971.色彩的鮮明性：如果一個網(wǎng)站的色彩鮮明，很容易引人注意，會專題頁面與色彩搭配網(wǎng)頁色彩搭配方法1.同種色彩搭配2.鄰近色彩搭配3.對比色彩搭配4.暖色色彩搭配5.冷色色彩搭配6.有主色的混合色彩搭配網(wǎng)頁配色很重要，網(wǎng)頁顏色搭配的是否合理會直接影響到訪問者的情緒。好的色彩搭配會給訪問者帶來很強的視覺沖擊力。色彩搭配主要分為以下六種2023/1/98專題頁面與色彩搭配網(wǎng)頁色彩搭配方法1.同種色彩搭配網(wǎng)頁配色很同種色彩搭配同種色彩搭配：同種色彩搭配是指首先選定一種色彩，然后調(diào)整其透明度和飽和度，將色彩變淡或加深，而產(chǎn)生新的色彩，這樣的頁面看起來色彩統(tǒng)一，具有層次感。專題頁面與色彩搭配2023/1/99同種色彩搭配同種色彩搭配：同種色彩搭配是指首先選定一種色彩，鄰近色彩搭配鄰近色彩搭配:鄰近色是指在色環(huán)上相鄰的顏色，如綠色和藍色、紅色和黃色即互為鄰近色。采用鄰近色搭配可以里是網(wǎng)頁避免色彩雜亂，易于達到頁面和諧統(tǒng)一的效果。專題頁面與色彩搭配2023/1/910鄰近色彩搭配鄰近色彩搭配:鄰近色是指在色環(huán)上相鄰的顏色，如綠對比色彩搭配對比色彩搭配：一般來說，色彩的三原色最能體現(xiàn)色彩間的差異。色彩的強烈對比具有視覺誘惑力，能夠起到幾種實現(xiàn)的作用。對比色可以突出重點，產(chǎn)生強烈的視覺效果。通過合理使用對比色，能夠使網(wǎng)站特色鮮明、重點突出。在設(shè)計時，通常以一種顏色為主色調(diào)，其對比色作為點綴，以起到畫龍點睛的作用。專題頁面與色彩搭配2023/1/911對比色彩搭配對比色彩搭配：專題頁面與色彩搭配2023/1/8暖色色彩搭配暖色色彩搭配：暖色色彩搭配是指使用紅色、橙色、黃色、集合色等色彩的搭配。這種色調(diào)的運用可為網(wǎng)頁營造出穩(wěn)性、和諧和熱情的氛圍。專題頁面與色彩搭配2023/1/912暖色色彩搭配暖色色彩搭配：暖色色彩搭配是指使用紅色、橙色、黃冷色彩搭配冷色色彩搭配：冷色色彩搭配是指使用綠色、藍色及紫色等色彩的搭配，這種色彩搭配可為網(wǎng)頁營造出寧靜、清涼和高雅的氛圍。冷色彩與白色搭配一般會獲得較好的視覺效果。專題頁面與色彩搭配2023/1/913冷色彩搭配冷色色彩搭配：冷色色彩搭配是指使用綠色、藍色及紫色有主色的混合色彩搭配有主色的混合色彩搭配是指以一種顏色作為主要顏色，同色輔以其他色彩混合搭配，形成繽紛而不雜亂的搭配效果專題頁面與色彩搭配2023/1/914有主色的混合色彩搭配有主色的混合色彩搭配是指以一種顏色作為主網(wǎng)頁配色不宜超過三種。色相差異要明顯，常見的有對比色、臨近色、冷暖色調(diào)互補等方式，或者直接從成功作品中借鑒主輔色配比都可以。常見的有：朱紅點綴深藍、明黃點綴深綠等。根據(jù)網(wǎng)頁信息的多寡，頁面設(shè)計中會有更多的色彩區(qū)域劃分和文字信息區(qū)分需求，這樣我們需要更多的同色系色彩滿足要求，我們可以在“飽和度”和“明度”上做文章。小結(jié)：專題頁面與色彩搭配2023/1/915網(wǎng)頁配色不宜超過三種。小結(jié)：專題頁面與色彩搭配2023/12專題頁面布局zhuantyemianyusecaidapei2023/1/9162專題頁面布局zhuantyemianyusecaidape專題頁面布局專題網(wǎng)頁布局頁面布局就是在網(wǎng)頁設(shè)計時，把網(wǎng)頁的各種構(gòu)成要素文字、圖片、菜單等在頁面內(nèi)完美的搭配起來。一個精美的網(wǎng)頁,不僅體現(xiàn)在頁面內(nèi)容的精彩,還要有效地利用頁面的有效顯示空間,創(chuàng)造出合理的布局模式專題頁面布局2023/1/917專題頁面布局專題網(wǎng)頁布局專題頁面布局2023/1/81718網(wǎng)頁布局(一)“國”字型，這類頁面布局型式適用于大型網(wǎng)站,也就是在網(wǎng)頁的最上面是網(wǎng)站的標題以及橫幅廣告,接下來是網(wǎng)站的主要內(nèi)容,左右分列一些兩小條內(nèi)容,中間是主要部分,與左右一起羅列到底,最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。專題頁面布局2023/1/91818網(wǎng)頁布局(一)“國”字型，這類頁面布局型式適用于大型網(wǎng)站19網(wǎng)頁布局(二)拐角型，這種結(jié)構(gòu)與上一種“國”字型結(jié)構(gòu),其實只是形式上的區(qū)別,有相似性。頂端是標題及廣告橫幅,接下來的左側(cè)是一窄列鏈接等,右列是很寬的正文,底端也是一些網(wǎng)站的輔助信息。在這種類型中,一種很常見的類型是,頂端是標題及廣告,左側(cè)是導(dǎo)航鏈接。專題頁面布局2023/1/91919網(wǎng)頁布局(二)拐角型，這種結(jié)構(gòu)與上一種“國”字型結(jié)構(gòu),其20網(wǎng)頁布局（三)左右框架型，這是一種左右分為兩頁的框架結(jié)構(gòu)。一般左面是導(dǎo)航鏈接,有時頂端會有一個小的標題或標致,右面是正文。目前,大部分的大型論壇都是這種結(jié)構(gòu),一些企業(yè)網(wǎng)站也喜歡采用這種左右框架型結(jié)構(gòu)。這種類型結(jié)構(gòu)非常清晰,一目了然。專題頁面布局2023/1/92020網(wǎng)頁布局（三)左右框架型，這是一種左右分為兩頁的框架結(jié)構(gòu)21除了以上的布局類型外,還有上下框架型、綜合框架型等。在以上幾種網(wǎng)站頁面的布局設(shè)計中，我們可以發(fā)現(xiàn)頁面布局大致也分為以下幾個部分：1、頂部部分，其中又包括了導(dǎo)航、菜單和橫幅廣告圖片；2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；3、底部，包括一些版權(quán)信息。專題頁面布局小結(jié)2023/1/92121除了以上的布局類型外,還有上下框架型、綜合框架型等。專題3專題頁面圖片與文字zhuantiyemianwenziyutupian2023/1/9223專題頁面圖片與文字zhuantiyemianwenziyu23專題頁面圖片要比文字更能增加網(wǎng)頁的吸引力，頁面圖片能夠提升用戶在瀏覽網(wǎng)頁時的的體驗。因此圖片的展現(xiàn)形式也是相當重要的。圖片的展示形式豐富多樣，不同形式的圖片展現(xiàn)也讓瀏覽網(wǎng)頁更加多樣化！專題頁面圖片與文字專題頁面圖片與文字2023/1/92323專題頁面圖片要比文字更能增加網(wǎng)頁的吸引力，24專題頁面圖片與文字專題頁面圖片的展現(xiàn)形式：1、分組展示，同一種類型的圖片，具有典型的說明性，通過調(diào)整圖片與圖片之間的間距、大小、讓由一個或者多個圖片組成的組，形成一個集體，集中去體現(xiàn)，更加說明性，據(jù)不完全統(tǒng)計，瀏覽者在有文字和圖片同時存在的頁面上，圖片會比較文字更加有吸引和點擊！2023/1/92424專題頁面圖片與文字專題頁面圖片的展現(xiàn)形式：1、分組展示，25專題頁面圖片與文字專題頁面圖片的展現(xiàn)形式：2、圖片的瀑布流，首先什么是瀑布流：瀑布流是最近新起的一種圖片展示方式，在相比較下這種方式會更加有創(chuàng)意性，不設(shè)置高的這種特性，更加適合人的瀏覽，錯亂的排版更加有藝術(shù)性用戶可以在眾多圖片中快速地掃視，然后選擇其中自己感興趣的部分。2023/1/92525專題頁面圖片與文字專題頁面圖片的展現(xiàn)形式：2、圖片的瀑布26專題頁面圖片與文字專題頁面圖片的展現(xiàn)形式：3、上下點擊，其實我們經(jīng)常會碰到這種模式的圖片瀏覽方式，包括產(chǎn)品展示，圖片展示，通常這種展示方式會帶來更好的用戶體現(xiàn)，最大化的體現(xiàn)了圖片的展示。2023/1/92626專題頁面圖片與文字專題頁面圖片的展現(xiàn)形式：3、上下點擊，27專題頁面圖片與文字專題頁面文字在瀏覽網(wǎng)站中，文字通常起到畫龍點睛的左右。合理的圖片與文字搭配，能夠最大化的體現(xiàn)頁面專題的內(nèi)容。2023/1/92727專題頁面圖片與文字專題頁面文字在瀏覽網(wǎng)站中，文字通常起到28專題頁面圖片與文字專題頁面文字注意事項：1.合理的圖片與文字布局，使整個標題形成一個整體。2.專題文字一般都很精辟簡短，基本上簡單幾個字就能概括了整個產(chǎn)品所表達的含義，吸引瀏覽者對展示產(chǎn)品的關(guān)注度。3.文字能夠直接的表達出，專題是什么，為什么，怎么樣，在專題頁面文字設(shè)計中，文字的設(shè)計需符合整個專題的風(fēng)格。2023/1/92828專題頁面圖片與文字專題頁面文字注意事項：1.合理的圖片與TheEndThankyou2023/1/929TheEndThank2023/1/829專題頁面的設(shè)計與制作主講：鄭州北方汽修學(xué)校網(wǎng)編吳藝博2023/1/930專題頁面的設(shè)計與制作主講：鄭州北方汽修學(xué)校網(wǎng)編吳藝博2023專題網(wǎng)頁主要是由頁面色彩、頁面布局、頁面圖片和文字信息組成。頁面色彩主要影響頁面的整體觀感、設(shè)計品質(zhì)以及受眾情緒。頁面布局主要是對頁面進行整體的規(guī)劃，而頁面圖片和頁面文字主要是為了明確的表示專題頁面所表達的內(nèi)容以及含義。專題頁面的設(shè)計與制作2023/1/931專題網(wǎng)頁主要是由頁面色彩、頁面布局、頁面圖片和文字信息組成。010203專題頁面色彩專題網(wǎng)頁布局專題頁面圖片與文字目錄/contents2023/1/932010203專題頁面色彩專題網(wǎng)頁布局專題頁面圖片與文字目錄1專題頁面與色彩搭配zhuantyemianyusecaidapei2023/1/9331專題頁面與色彩搭配zhuantyemianyusecaid 一個網(wǎng)站，給觀看者留下第一印象不是網(wǎng)站合理的排版，也不是網(wǎng)站豐富的內(nèi)容，而是網(wǎng)站的色彩。色彩最具表現(xiàn)力，色彩的搭配不同，給人的感覺也是不同的。一個專題頁面是否能夠吸引瀏覽者的目光重點取決于色彩。專題頁面與色彩搭配2023/1/934 一個網(wǎng)站，給觀看者留下第一印象不是網(wǎng)站合理的排版，也不是網(wǎng)一切色彩都是由光的照射產(chǎn)生的色彩分為有彩色系和無彩色系色彩三要素：色相、明度、純度等分析顏色色彩基礎(chǔ)專題頁面與色彩搭配2023/1/935一切色彩都是由光的照射產(chǎn)生的色彩基礎(chǔ)專題頁面與色彩搭配2021.色彩的鮮明性：如果一個網(wǎng)站的色彩鮮明，很容易引人注意，會給瀏覽者耳目一新的感覺。2.色彩的獨特性：要有與眾不同色彩，網(wǎng)頁的用色必須要有自己獨特的風(fēng)格，融入自己的想法，這樣才能給人瀏覽者留下深刻的印象。3.色彩搭配的合理性：色彩要根據(jù)主題來確定，不同的主題選用不同的色彩。例如，用藍色體現(xiàn)科技型網(wǎng)站的專業(yè)，用粉紅色體現(xiàn)女性的柔情等。色彩特性專題頁面與色彩搭配2023/1/9361.色彩的鮮明性：如果一個網(wǎng)站的色彩鮮明，很容易引人注意，會專題頁面與色彩搭配網(wǎng)頁色彩搭配方法1.同種色彩搭配2.鄰近色彩搭配3.對比色彩搭配4.暖色色彩搭配5.冷色色彩搭配6.有主色的混合色彩搭配網(wǎng)頁配色很重要，網(wǎng)頁顏色搭配的是否合理會直接影響到訪問者的情緒。好的色彩搭配會給訪問者帶來很強的視覺沖擊力。色彩搭配主要分為以下六種2023/1/937專題頁面與色彩搭配網(wǎng)頁色彩搭配方法1.同種色彩搭配網(wǎng)頁配色很同種色彩搭配同種色彩搭配：同種色彩搭配是指首先選定一種色彩，然后調(diào)整其透明度和飽和度，將色彩變淡或加深，而產(chǎn)生新的色彩，這樣的頁面看起來色彩統(tǒng)一，具有層次感。專題頁面與色彩搭配2023/1/938同種色彩搭配同種色彩搭配：同種色彩搭配是指首先選定一種色彩，鄰近色彩搭配鄰近色彩搭配:鄰近色是指在色環(huán)上相鄰的顏色，如綠色和藍色、紅色和黃色即互為鄰近色。采用鄰近色搭配可以里是網(wǎng)頁避免色彩雜亂，易于達到頁面和諧統(tǒng)一的效果。專題頁面與色彩搭配2023/1/939鄰近色彩搭配鄰近色彩搭配:鄰近色是指在色環(huán)上相鄰的顏色，如綠對比色彩搭配對比色彩搭配：一般來說，色彩的三原色最能體現(xiàn)色彩間的差異。色彩的強烈對比具有視覺誘惑力，能夠起到幾種實現(xiàn)的作用。對比色可以突出重點，產(chǎn)生強烈的視覺效果。通過合理使用對比色，能夠使網(wǎng)站特色鮮明、重點突出。在設(shè)計時，通常以一種顏色為主色調(diào)，其對比色作為點綴，以起到畫龍點睛的作用。專題頁面與色彩搭配2023/1/940對比色彩搭配對比色彩搭配：專題頁面與色彩搭配2023/1/8暖色色彩搭配暖色色彩搭配：暖色色彩搭配是指使用紅色、橙色、黃色、集合色等色彩的搭配。這種色調(diào)的運用可為網(wǎng)頁營造出穩(wěn)性、和諧和熱情的氛圍。專題頁面與色彩搭配2023/1/941暖色色彩搭配暖色色彩搭配：暖色色彩搭配是指使用紅色、橙色、黃冷色彩搭配冷色色彩搭配：冷色色彩搭配是指使用綠色、藍色及紫色等色彩的搭配，這種色彩搭配可為網(wǎng)頁營造出寧靜、清涼和高雅的氛圍。冷色彩與白色搭配一般會獲得較好的視覺效果。專題頁面與色彩搭配2023/1/942冷色彩搭配冷色色彩搭配：冷色色彩搭配是指使用綠色、藍色及紫色有主色的混合色彩搭配有主色的混合色彩搭配是指以一種顏色作為主要顏色，同色輔以其他色彩混合搭配，形成繽紛而不雜亂的搭配效果專題頁面與色彩搭配2023/1/943有主色的混合色彩搭配有主色的混合色彩搭配是指以一種顏色作為主網(wǎng)頁配色不宜超過三種。色相差異要明顯，常見的有對比色、臨近色、冷暖色調(diào)互補等方式，或者直接從成功作品中借鑒主輔色配比都可以。常見的有：朱紅點綴深藍、明黃點綴深綠等。根據(jù)網(wǎng)頁信息的多寡，頁面設(shè)計中會有更多的色彩區(qū)域劃分和文字信息區(qū)分需求，這樣我們需要更多的同色系色彩滿足要求，我們可以在“飽和度”和“明度”上做文章。小結(jié)：專題頁面與色彩搭配2023/1/944網(wǎng)頁配色不宜超過三種。小結(jié)：專題頁面與色彩搭配2023/12專題頁面布局zhuantyemianyusecaidapei2023/1/9452專題頁面布局zhuantyemianyusecaidape專題頁面布局專題網(wǎng)頁布局頁面布局就是在網(wǎng)頁設(shè)計時，把網(wǎng)頁的各種構(gòu)成要素文字、圖片、菜單等在頁面內(nèi)完美的搭配起來。一個精美的網(wǎng)頁,不僅體現(xiàn)在頁面內(nèi)容的精彩,還要有效地利用頁面的有效顯示空間,創(chuàng)造出合理的布局模式專題頁面布局2023/1/946專題頁面布局專題網(wǎng)頁布局專題頁面布局2023/1/81747網(wǎng)頁布局(一)“國”字型，這類頁面布局型式適用于大型網(wǎng)站,也就是在網(wǎng)頁的最上面是網(wǎng)站的標題以及橫幅廣告,接下來是網(wǎng)站的主要內(nèi)容,左右分列一些兩小條內(nèi)容,中間是主要部分,與左右一起羅列到底,最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。專題頁面布局2023/1/94718網(wǎng)頁布局(一)“國”字型，這類頁面布局型式適用于大型網(wǎng)站48網(wǎng)頁布局(二)拐角型，這種結(jié)構(gòu)與上一種“國”字型結(jié)構(gòu),其實只是形式上的區(qū)別,有相似性。頂端是標題及廣告橫幅,接下來的左側(cè)是一窄列鏈接等,右列是很寬的正文,底端也是一些網(wǎng)站的輔助信息。在這種類型中,一種很常見的類型是,頂端是標題及廣告,左側(cè)是導(dǎo)航鏈接。專題頁面布局2023/1/94819網(wǎng)頁布局(二)拐角型，這種結(jié)構(gòu)與上一種“國”字型結(jié)構(gòu),其49網(wǎng)頁布局（三)左右框架型，這是一種左右分為兩頁的框架結(jié)構(gòu)。一般左面是導(dǎo)航鏈接,有時頂端會有一個小的標題或標致,右面是正文。目前,大部分的大型論壇都是這種結(jié)構(gòu),一些企業(yè)網(wǎng)站也喜歡采用這種左右框架型結(jié)構(gòu)。這種類型結(jié)構(gòu)非常清晰,一目了然。專題頁面布局2023/1/94920網(wǎng)頁布局（三)左右框架型，這是一種左右分為兩頁的框架結(jié)構(gòu)50除了以上的布局類型外,還有上下框架型、綜合框架型等。在以上幾種網(wǎng)站頁面的布局設(shè)計中，我們可以發(fā)現(xiàn)頁面布局大致也分為以下幾個部分：1、頂部部分，其中又包括了導(dǎo)航、菜單和橫幅廣告圖片；2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；3、底部，包括一些版權(quán)信息。專題頁面布局小結(jié)2023/1/95021除了以上的布局類型外,還有上下框架型、綜合框架型等。專題3專題頁面圖片與文字zhuantiyemianwenziyutupian2023/1/9513專題頁面圖片與文字zhuantiyemianwenziyu52專題頁面圖片要比文字更能增加網(wǎng)頁的吸引力，頁面圖片能夠提升用戶在瀏覽網(wǎng)頁時的的體驗。因此圖片的展現(xiàn)形式也是相當重要的。圖片的展示形式豐富多樣，不同形式的圖片展現(xiàn)也讓瀏覽網(wǎng)頁更加多樣化！專題頁面圖片與文字專題頁面圖片與文字2023/1/95223專題頁面圖片要比文字更能增加網(wǎng)頁的吸引力，53專題頁面圖片與文字專題頁面圖片的展現(xiàn)形式：1、分組展示，同一種類型的圖片