希望能書寫簡(jiǎn)單而漂亮的CSS網(wǎng)站代碼嗎？Nice and Free CSS Templates 這個(gè)網(wǎng)站提供免費(fèi)的模板代碼，代碼均能通過(guò)W3C檢驗(yàn)。該網(wǎng)站提供12款模板代碼，基本上能滿足日常網(wǎng)站的設(shè)計(jì)樣式。有興趣的各位可以參詳下。
轉(zhuǎn)自Smartr.cn
分類目錄歸檔：網(wǎng)頁(yè)制作
網(wǎng)站制作之八大要領(lǐng)
要領(lǐng)一：確定網(wǎng)站主題
做網(wǎng)站，首先必須要解決的就是網(wǎng)站內(nèi)容問(wèn)題，即確定網(wǎng)站的主題。美國(guó)《個(gè)人電腦》雜志(PC Magazine)評(píng)出了99年度排名前100位的全美知名網(wǎng)站的十類題材:第1類:網(wǎng)上求職;第2類:網(wǎng)上聊天/即時(shí)信息/ICQ;第3類:網(wǎng)上社區(qū)/ 討論/郵件列表;第4類:計(jì)算機(jī)技術(shù);第5類:網(wǎng)頁(yè)/網(wǎng)站開(kāi)發(fā);第6類:娛樂(lè)網(wǎng)站;第7類:旅行;第8類:參考/資訊;第9類:家庭/教育;第10類:生 活/時(shí)尚。我們可以參看上面的分類，繼續(xù)細(xì)分。如果自己在某些方面有興趣，或掌握的資料較多，也可以做一個(gè)自己感興趣的東西，一者，你可以有自己的見(jiàn)解， 做出自己的特色;二者，在制作網(wǎng)站時(shí)不會(huì)覺(jué)得無(wú)聊或者力不從心。興趣是制作網(wǎng)站的動(dòng)力，沒(méi)有創(chuàng)作熱情，很難設(shè)計(jì)制作出優(yōu)秀的作品。
對(duì)于內(nèi)容主題的選擇，要做到小而精，主題定位要小，內(nèi)容要精。不要去試圖制作一個(gè)包羅萬(wàn)象的站點(diǎn)，這往往會(huì)失去網(wǎng)站的特色，也會(huì)帶來(lái)高強(qiáng)度的勞動(dòng)，給網(wǎng)站的及時(shí)更新帶來(lái)困難。記住:在互聯(lián)網(wǎng)上只有第一，沒(méi)有第二!
10 步學(xué)習(xí)如何進(jìn)行 css 定位
我們今天來(lái)探討一下不同的 css 布局特性，包括：position:static, position:relative, position:absolute, 等等。
1 . position:static：
網(wǎng)頁(yè)各個(gè)單元的默認(rèn)位置，這意味著該單元的位置通常不發(fā)生變化。在一般情況下，你不需要特別對(duì)它進(jìn)行設(shè)定，除非你需要指定先前已經(jīng)確定的另一個(gè)位置。
1 2 3 | #div-1 { position:static; } |
效果：
繼續(xù)閱讀
幾種典型配色方案
新模板《 羽落凡塵》
網(wǎng)站設(shè)計(jì)精華65條原則
01.明確內(nèi)容
如果你想成為一個(gè)網(wǎng)站設(shè)計(jì)者，并正想建一個(gè)網(wǎng)站的話，首先應(yīng)該考慮網(wǎng)站的內(nèi)容，包括網(wǎng)站功能和你的用戶需要什么。你的整個(gè)設(shè)計(jì)都應(yīng)該圍繞這些方面來(lái)進(jìn)行。
02.抓住用戶
如果用戶不能夠迅速地進(jìn)入你的網(wǎng)站，或操作不便捷，網(wǎng)站設(shè)計(jì)就是失敗的。不要讓用戶失望而轉(zhuǎn)向你的對(duì)手的網(wǎng)站。
03.優(yōu)化內(nèi)容
內(nèi)容是核心。大約在兩年以前，企業(yè)網(wǎng)站就像一本廣告冊(cè)子，更槽糕的是，網(wǎng)站使用了大量的圖片，似乎要幾個(gè)世紀(jì)才能下載完。
Chanels網(wǎng)站（www.channels.co.uk）在設(shè)計(jì)的某些方面是成功的，但是內(nèi)容太貪乏，并且要花很長(zhǎng)時(shí)間才能找到所要的東西，因此不能算是一個(gè)成功的網(wǎng)站。
04.快速下載
沒(méi)有什么比要花很長(zhǎng)時(shí)間下載頁(yè)面更槽糕的了。作為一條經(jīng)驗(yàn)，一個(gè)標(biāo)準(zhǔn)的網(wǎng)頁(yè)應(yīng)不大于60K，通過(guò)56K調(diào)制解調(diào)器加載花30秒的時(shí)間。有的設(shè)計(jì)者說(shuō)網(wǎng)頁(yè)加載應(yīng)在15秒內(nèi)。
05.網(wǎng)站升級(jí)
時(shí)刻注意網(wǎng)站的運(yùn)行狀況。性能很好的主機(jī)隨著訪問(wèn)人數(shù)的增加，可能會(huì)運(yùn)行緩慢。但是，如果你不想失去訪問(wèn)者的話，一定要仔細(xì)計(jì)劃好你的升級(jí)計(jì)劃。
用 CSS 打造一個(gè)惟妙惟肖的網(wǎng)頁(yè)版蘋果工具條！
如果你是大蘋果的粉絲，你一定會(huì)愛(ài)上這款由 CSS 打造的蘋果工具條（dock menu，效果預(yù)覽），原文作者原創(chuàng)，原文會(huì)手把手教你打造！該工具條使用了 Jquery 這個(gè)輕量級(jí) Javascript 類庫(kù)（很多 AJAX 效果哦）提供的接口，Interface 提供的界面組件和原作者的原創(chuàng) Icon。 這款 CSS dock menu 是為了用在作者打造的 WordPress 皮膚 iTheme 上的，不用我多說(shuō)，大家都猜到了吧：一款模仿蘋果的 WP 主題。
該皮膚支持 widgets ，側(cè)邊欄支持拖拽，適合WordPress 2.0 和 2.1，適合以下瀏覽器：IE, Firefox, Safari, Opera。
想看原文教程呢，請(qǐng)點(diǎn)擊這里，想下載 CSS dock menu呢，這里。
Insert code
In between the HTML <head> tag, add the following code
1 2 | <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/interface.js"></script> |
1 | <link href="style.css" rel="stylesheet" type="text/css" /> |
1 2 3 4 5 | <!--[if lt IE 7]> <style type="text/css"> .dock img { behavior: url(iepngfix.htc) } </style> <![endif]–> |
一些DIV+CSS 命名規(guī)范
1.CSS ID 的命名
外 套： wrap
主導(dǎo)航： mainnav
子導(dǎo)航： subnav
頁(yè) 腳： footet
整個(gè)頁(yè)面： content
頁(yè) 眉： header
頁(yè) 腳： footer
商 標(biāo)： label
標(biāo) 題： title
主導(dǎo)航： mainbav（globalnav）
頂導(dǎo)航： topnav
邊導(dǎo)航： sidebar
左導(dǎo)航： leftsidebar
右導(dǎo)航： rightsidebar
旗 志： logo
標(biāo) 語(yǔ)： banner
菜單內(nèi)容1： menu1 content
菜單容量： menu container
子菜單： submenu
邊導(dǎo)航圖標(biāo)：sidebarIcon
注釋： note
面包屑： breadcrumb(即頁(yè)面所處位置導(dǎo)航提示）
繼續(xù)閱讀
為自己的網(wǎng)頁(yè)制做Tab Pane
在E-Spacy看到了漂亮的Tab Pane，于是也給自己的BLOG裝了個(gè)。
安裝方法是參照E-Spacy做的，效果見(jiàn)側(cè)欄 。
到tabpane下載源代碼，解壓縮后，上傳到自己的網(wǎng)頁(yè)空間，推薦放到WP安裝目錄的wp-content\themes內(nèi)。
然后把此兩行代碼復(fù)制到模板文件的header.php內(nèi)，head之間：
1 2 | <script type="text/javascript" src="js/tabpane.js"></script> <link type="text/css" rel="StyleSheet" href="css/tab.webfx.css" /> |
其中js/tabpane.js和css/tab.webfx.css部分改成自己的網(wǎng)絡(luò)鏈接地址，推薦使用
1 | <?php bloginfo('template_directory'); ?> |
這樣在更換空間時(shí)也不會(huì)出錯(cuò)。
3個(gè)小工具
1.CSS Creator
這個(gè)小工具可以為您可視化的制作theme的框架結(jié)構(gòu)，包括doctype、外形(滿屏，居中，靠左)、最小寬度、最大寬度、頭部、左右欄、底部等的基本CSS定義。設(shè)置完畢以后點(diǎn)擊Generate Layout便會(huì)生成HTML和CSS文件，右鍵另存為即可使用了。
總的來(lái)說(shuō)，對(duì)于CSS初學(xué)者還是很有用的，因?yàn)槌鯇W(xué)者對(duì)一些margin、float可能搞不懂，使得左右欄這樣的布局無(wú)法實(shí)現(xiàn)。這個(gè)小工具僅僅是各出一個(gè)基本的框架結(jié)構(gòu)，生成的CSS文件還需要進(jìn)一步的完善。比如說(shuō)，你要加入你的配色。
2.kuler
布局完成以后，我們就需要考慮theme的色系了，憑空的想像是很難得，使用這個(gè)小工具可以為你節(jié)省冥思苦想的煩惱。而且網(wǎng)站還列出了一些優(yōu)秀的配色方案，值得借鑒。需要注冊(cè)。
3.Stripe Generator
有些時(shí)候，我們對(duì)一些區(qū)域，比如說(shuō)背景，不僅僅需要一些顏色的裝飾，可能會(huì)需要一些條紋？但PS等制圖軟件又不會(huì)，這時(shí)該怎么辦？使用Stripe吧，通過(guò)Stripe可以更具自己的需要選擇背景色，背景樣式，條紋色，條紋的形狀，條紋間距和寬度等，而且生成的條紋可以實(shí)現(xiàn)無(wú)縫連接，免去一些考慮是否無(wú)縫的苦惱。
轉(zhuǎn)自www.wp-theme.cn