CSS網(wǎng)頁制作布局實(shí)例教程
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2008-10-17 19:24:36 作者：佚名 
我要評(píng)論
我要評(píng)論相關(guān)文章：用CSS建設(shè)網(wǎng)站的實(shí)例
原文博客：veerle
翻譯整理：西米CC
來自國外博客veerle的一個(gè)系列教程，分八個(gè)部分講解一張完整CSS頁面的構(gòu)建過程。雖然它不是每個(gè)步驟都解釋得非常詳細(xì)，但是其中提及的很多技巧和經(jīng)驗(yàn)都很值得初學(xué)者借鑒，從界面設(shè)計(jì)到頁面構(gòu)建，
CSS混沌初開III:頂部圖片視覺修飾
這節(jié)是關(guān)于素材設(shè)計(jì)的最后一部分了，設(shè)計(jì)工作完成后將會(huì)開始講解如何切片以及在CSS和XHTML中構(gòu)建最終頁面。首先看一下這節(jié)設(shè)計(jì)的效果圖：
在制作按鈕時(shí)，我用了粉紅和暗綠兩種色調(diào)，可能看起來有點(diǎn)怪，但個(gè)人很鐘意這個(gè)組合。在設(shè)計(jì)網(wǎng)頁整體界面的過程中，我會(huì)給出一些意見和建議，重點(diǎn)是頂部的圖片，如何增加一些細(xì)節(jié)，讓它看起來更加的美觀、精致。
頂部圖片的視覺處理
在教程的前兩部分中，提到過導(dǎo)航按鈕的顏色選擇，現(xiàn)在我們來看一下如何處理一張花卉圖像的色調(diào)，使其與頁面的風(fēng)格達(dá)到統(tǒng)一。在用到的花卉圖像素材中，大家可以發(fā)現(xiàn)它上面也有紅和綠兩種色調(diào)，我要做的事情就是把其中的顏色調(diào)制成粉紅和暗綠，就好似導(dǎo)航菜單中使用的色調(diào)一樣：
首先來看一下圖片中花朵的顏色，它的色調(diào)偏向于大紅，還是使用PS中的色相/飽和度命令來對(duì)它進(jìn)行調(diào)整。利用快捷鍵按Ctrl U調(diào)出色相/飽和度面板，在“編輯”項(xiàng)的下拉列表中選擇“紅色（Ctrl 1）”，這樣我們就能只針對(duì)圖像中的紅色進(jìn)行調(diào)整了。拖動(dòng)色相滑塊調(diào)制出我們需要的紅色，具體的數(shù)值依據(jù)實(shí)際情況，比如我這里是大致是-30左右：
下一步就是通過修飾細(xì)節(jié)增加一些輔助色調(diào)來增進(jìn)視覺效果，為接下來的濾鏡處理作一些預(yù)處理。頂部圖片的處理對(duì)創(chuàng)意有一定的要求，如果有相關(guān)的經(jīng)驗(yàn)的話也就不是件難事，所以素材處理能力以及個(gè)人的美工基礎(chǔ)都會(huì)對(duì)設(shè)計(jì)過程、設(shè)計(jì)結(jié)果產(chǎn)生影響：
在之前的步驟中圖片的尺寸和體積無疑已經(jīng)進(jìn)行了調(diào)整，但是如果有比較多的細(xì)節(jié)要處理的話，建議還是在原始尺寸上操作，像示例中的圖片我剛開始也是在1600 1200的原始大小下進(jìn)行處理的。我為圖像添加了個(gè)人比較偏愛的繪畫涂抹濾鏡（濾鏡菜單—藝術(shù)效果），效果如下圖。在PS中，濾鏡的運(yùn)用是很有趣的一件事情，調(diào)節(jié)其中的參數(shù)就可以達(dá)到很多意想不到的效果，加之在CS版本中提供了可用濾鏡效果的縮略圖預(yù)覽，讓這個(gè)實(shí)用的工具用起來更加方便：
接著我們添加一些波浪線條來營造虛幻的意境，可以用筆刷或者鋼筆繪制一些曲線，當(dāng)然也可以用漸變工具制作，只要達(dá)到下圖中漸隱效果即可。事實(shí)上我們只需要做出其中一條就可以了，然后復(fù)制圖層調(diào)整其透明度、角度、扭曲制作出其它的線條。這里使用的顏色還是推薦使用粉紅，為了區(qū)別于花朵的顏色，可以把線條的粉紅明度調(diào)大一點(diǎn)。在圖片的右邊，我利用Tamuz字體添加了一個(gè)修飾符號(hào)，效果如下：
如果對(duì)以上操作有疑問，可以 下載QuickTime演示影片 觀看！
在圖片上添加BLOG標(biāo)題
Blog的標(biāo)題反映了你網(wǎng)站的內(nèi)容主題，其文字組織因人而異，一般還會(huì)加上一個(gè)圖標(biāo)或LOGO，畢竟每個(gè)人都想自己的Blog與眾不同，有一些標(biāo)志性的元素，在這里我就簡(jiǎn)單的選用一個(gè)仙人掌標(biāo)志：
下面是一些關(guān)于字體或修飾符號(hào)的資源鏈接： Minion修飾符和Tamuz字體 Adobe提供的修飾性字體 一系列免費(fèi)的Dingbats字體
最終的界面設(shè)計(jì)效果
至今為止，不論是在導(dǎo)航按鈕還是頂部圖片的制作，我們都還沒有遇到什么棘手的難題?，F(xiàn)在讓我們把做出來的素材整合在一起，拼合成一張 最終的界面效果 。這已經(jīng)是界面設(shè)計(jì)的最后一個(gè)階段了，所有若還有什么可添加的修飾元素，最好都在界面效果圖中體現(xiàn)出來。在我的示例頁面中，文章標(biāo)題和友情鏈接的前面我都用精致的圖標(biāo)進(jìn)行修飾，效果看起來還可以，當(dāng)然你們可以選擇自己喜歡的素材替換，最好也能在設(shè)計(jì)過程中體會(huì)到樂趣！
相關(guān)文章
本文主要介紹了css九宮格布局的五種方法，內(nèi)容包括grid布局、flex布局、table布局、float浮動(dòng)定位、inline-block+letter-spacing屬性這五種方法的實(shí)現(xiàn)，感興趣的可以了解下2023-09-18- 在Web開發(fā)中，經(jīng)常會(huì)遇到需要將元素水平和垂直居中的情況,今天，將為大家分享幾種CSS方法，讓你的元素輕松居中，讓頁面更美觀吸引人，感興趣的小伙伴可以自己動(dòng)手試一試2023-09-08
- 相信大家在面試的時(shí)候也會(huì)經(jīng)常碰到css實(shí)現(xiàn)元素居中的方法，下面我介紹6種方法給大家，歡迎大家評(píng)論區(qū)交流2023-09-07
flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐
最近需要做個(gè)換行的布局，本文主要介紹了flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需2022-06-16CSS布局之浮動(dòng)(float)和定位(position)屬性的區(qū)別
今天看到有朋友留言問浮動(dòng)和定位有什么區(qū)別，如何使用？今天找了篇文章，講的比較通俗易懂，供大家參考2021-09-23
這篇文章主要介紹了css實(shí)現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
div水平布局兩邊對(duì)齊的三種實(shí)現(xiàn)方法
這篇文章主要介紹了div水平布局兩邊對(duì)齊的三種實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2021-01-21
waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)
這篇文章主要介紹了waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2021-01-19
頁面中有間隔的方格布局如何完美實(shí)現(xiàn)方法
這篇文章主要介紹了頁面中有間隔的方格布局如何完美實(shí)現(xiàn)方法。文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來2020-11-27css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式
這篇文章主要介紹了css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-10-28