顯示具有 網頁設計 標籤的文章。 顯示所有文章
顯示具有 網頁設計 標籤的文章。 顯示所有文章

2013年9月11日 星期三

網頁製作技巧:網頁設計事半功倍的構圖技巧


作者:佚名類型:轉載來源: 全球經典設計聚合網

 

如何將網頁這座樓蓋的漂亮?以下就例舉一些在網頁設計上能起到事半功倍的構圖技巧。個人拙見,希望能夠拋磚引玉。
【一】堅實的地基-幾何圖形的力量。
幾何圖形在頁面中往往能起到大樑的作用,也是網頁內容最為常用的承載面板。這些圖形合理的搭配和有效的穿插,能使頁面除了信息傳達外,更具層次感和觀賞性。


此網站圓角矩形巧妙的結合信息模塊穿插在一起,除了營造了網站的主體富有節奏的形狀之外,更加強了頁面的層次感,不會顯得頁面枯燥和單調。


圓形和橢圓形的結合搭載了輪播廣告和重要信息,使得整個頁面既有亮點又不失簡潔。


同樣是圓角矩形的穿插結合, 色彩填充的圖形交集既能展示重要信息又勾勒出整個網站的風格形態。


豎著的大圓角矩形和線條勾勒出整個完整的畫面,各種信息鑲嵌於各個形狀只中,既不顯得亂又使其相得益彰。
更多類似的例子:


【二】鋼筋上的鉚釘—破格而出的素材
素材應用的好,往往能起到畫龍點睛的作用,而素材起點綴頁面和表達主題之外,還能作為構圖中的一種主要元素存在,這些素材通常破格而出作為連接頁面的紐帶,使頁面結構更加的穩固,故稱其為“鉚釘”。


素材看似隨機的擺放,其實是有意的將素材擺放於左上和右下兩個對角點,視覺上俗稱的暗線,左下角信息內容的圖片和右上角的登錄窗口組成了另外一條對角暗線, 兩者並組成了X結構,而四個素材起到到了固定和壓軸的作用,穩固而又美觀。


飛躍的人越於頁面之上,護目鏡掛於導航欄之上。這兩個素材的使用使整個頁面既貼切於主題又生動,而在構圖上人連接穿插了1、2兩個板塊,而護目鏡所在的2板塊鏈接了3、4板塊,視覺上的感官延續讓頁面脈絡清晰不脫節,切富有節奏感。


頁面非常簡單,除了圖形構築的基礎形,就是幾朵起到“鉚釘”作用的花兒,花朵破框而出,使得素材有機的融於框內又搭於整個頁面之上,讓人有種花是由圓洞內長到頁面之上的錯覺,簡單而富有層次。


這個頁面的素材和主體框架的結合很巧妙,破框而出的噴濺牛奶和靜態的巧克力、杯子的動靜結合於頁面頭部,使得整個頁面主次清晰而又連貫。

更多類似的例子:


【三】打造斜塔之美—斜的視覺張力
比薩斜塔之斜是地質沙化下沉還是設計師故意為之,至今還是有人在爭論,拋開爭議,斜塔的美似乎讓許多人都想來到它身邊一睹這位傾斜美人之容,湊巧的是,在浩瀚的宇宙中最美麗的星球,也就是地球,也斜著身子對著太陽轉著。話題扯的比較遠,斜線,或者說是斜著的物體,似乎天生有一種張力。在網頁設計中亦是如此,而在這裡所表現的為視覺的張力,是種視覺心裡上的延伸力而非物理上的。當頁面過於平均,畫面平平毫無亮點時,打破平均打破通體的平均尤為重要,打破平均的方式有很多,而斜線似乎是網頁設計中慣用的一招,屢試不爽。


斜線的張力讓整個頁面富有動感和延伸性,即可為頁面起到修飾的作用,又能做為信息的承載模塊,兩者有機的融合併不讓人覺得傾斜的標題不好識別或者有礙閱讀,反之更能讓整個頁面富有形式感和表現力。


斜線的運用加上素材和圓形的穿插結合,讓整個頁面具有動感,同時視線又隨著斜線的走向帶入至素材和標題之上,具有張力的同時又讓這些線起到一個很好到視覺導向作用。


以斜線為暗線排版而成的信息組件和右邊斜線切割而成的圖片形成形態上的互補,又形成節奏上虛實和疏密的對比,使得整個畫面既有斜線帶來的張力和動感之外,又不乏整體的穩固和均衡。
更多類似的例子:


以上簡單的介紹了網頁設計中的一個步驟:構圖,羅列了一些比較常用而又有效果的方法,除此之外,應該還有很多,希望大家補充,但我相信無論構圖也好,色彩搭配也好,亦或是節奏旋律等等。它們總是圍繞著一個共同點去進行,那就是使頁面在信息順利傳達的前提下變的美觀而生動,有了這一大準則,我想設計頁面的時候需要的不是一大堆技法和技巧,而是一顆永不停止探索美和創造美的心。

2013年9月10日 星期二

如何寫出不會讓你頭疼的CSS?



為什麼我們的CSS變得一團糟——我們真的很容易陷入這樣的困惑中。有時這是一開始就馬虎編程的結果,有時是由於後期多重的附加代碼(hacks)和修改造成的。無論是哪種原因,這都不是無法避免的。寫出乾淨,超級可管理的CSS很簡單,只要你走對了路,你的代碼會更便於今後的維護和編輯。寫出更輕巧、更快並且更不會讓你頭疼的CSS,以下這10個技巧將會提高你這方面的能力。

1.保持條理性

像任何事情一樣,讓自己保持條理性(有組織)是值得的。採用清晰的結構,而不是隨心所欲地組織id和class(別想到啥就寫啥)。
這會有助於你在心裡記住CSS的級聯性,並讓你的樣式表能夠利用樣式繼承。
首先聲明最通用的item(id class或者是html element),接下來是稍微不那麼通用的……依此類推。這讓你的CSS能適當地繼承屬性,當需要的時候,重寫一條特殊的樣式會更容易。將來編輯CSS時也會更快,因為它遵循著一個易於閱讀的邏輯結構。
用一個對你來說最好使的結構,同時在心裡想著將來的編輯和其他開發人員。
  • 重置和重寫
  • 鏈接和字體
  • 主佈局
  • 二級佈局結構
  • 表單元素
  • 其他雜項


2.標題、日期和簽名

讓其他人知道誰寫了你的CSS,什麼時候寫的,以及如果有問題可以聯繫誰。在設計模板或主題時這非常的有用。

稍等片刻…那些色標數字是咋回事?多年以來,我發現,簡單列舉出我的樣式表裡常用的顏色,在初次開發和後期編輯時真的非常有幫助。
這節約了你打開Photoshop從設計圖裡吸一個顏色,或者在這個網站的風格指南(如果這個東東存在)裡查顏色。如果你需要那個特定的藍色的HTML代碼,只需要翻到註釋處複製它就行了。

3.搞一個模板庫

一旦你選定了用一個結構,剝掉所有不通用的並把文件存成一個CSS模板,以便將來使用。
你可以為多種用途保存多個版本:兩欄佈局、博客佈局、打印、移動等等…… Coda (OSX的編輯器)有一個優秀的Clips特性能讓你很簡單的做到這些。很多其他的編輯器也有類似的特性,不過甚至是一批簡單的文本文件也能很好地工作。
每次都從頭開始重寫每一個樣式表是很瘋狂的,特別是每個都是採用一樣的約定和方法。

4 有用的命名習慣

你會注意到上面我聲明了兩個列的id,我管他們叫col-alpha和col-beta,為什麼不叫col-left和col-right?請總是考慮到將來的編輯。
下一年你可能需要重新設計你的站點,把左邊的列移到右邊,你不該就為了調整位置而在HTML中重命名這個元素並在樣式表中重命名id。
當然,你可以就把左邊的列移動到右邊並且保留#col-left的id,但是那多讓人困惑?如果id是“左”,人們應該會希望它將一直在左邊。之後這沒為你留下太多空間去移動周圍的東西。
CSS的一個主要優點就是分離樣式和內容的能力。你可以完全不用碰HTML,只修改CSS,就能重設計站點,所以不要用限制性的名字弄髒了CSS。用更通用的命名習慣,並保持一致。
讓具體的位置或者樣式的詞語原理你的樣式和id,一個.link-blue同樣會讓你話費更的工作,或者在客戶要求你把那些藍色的鏈接修改成橙色的時候讓你的樣式變得真的很糟糕。
按照他們是什麼,而不是他們看起來的樣子為元素命名。例如,.comment-blue和.comment-beta比起來就不太通用了,.post-largefont比.post-title更局限一些。

5. 用連字符取代下劃線

比較老的瀏覽器可能對CSS中的下劃線支持不太好,或者完全不支持。為了更好的向後兼容,請養成使用連字符的習慣。用#col-alpha而不是#col_alpha。

6. 不要重複自己

用組合元素代替重新聲明樣式來盡可能的重用樣式。如果你的h1和h2都用同樣的字體大小、顏色和邊距,用逗號組合他們。

7. 優化為輕量級的樣式表

遵照上面的技巧,你能真的減少樣式表的體積。體積越小,加載越快,並且更易於維護更新。
刪掉那些不需要的,盡可能的用組合來合併樣式。小心使用封裝好的css框架,你很可能繼承了一大堆不會用到的東西。
另一個為css瘦身的快速技巧是:你不需要為0指定單位。如果一個margin設置為0,你不需要寫0px或者0em。0就是0,不需考慮丈量單位,css能夠明白。

8. 為Gecko編寫你的基本樣式,然後為Webkit和IE做調整

把你自己從排除故障的頭疼中拯救出來,先為Gecko瀏覽器(Firefox, Mozilla, Netscape, Flock, Camino)寫css。如果你的css在Gecko中工作得很好,它也很可能在Webkit(Safari, Chrome)和IE中也沒有問題。

9. 驗證

請使用W3C的免費CSS驗證。如果你遇到問題,你的佈局不像你想要的那樣工作,CSS驗證器會在指出錯誤方面給你很大的幫助。

10.保持屋內整潔

為特定瀏覽器寫的CSS分別放到各自獨立的樣式表,用Javascript/服務器端代碼或者條件註釋按需加載。用這個方法避免在主樣式表出現骯髒的CSS hacks。這將保持基本的CSS乾淨且易於管理。


免費的CSS網頁版型下載

現今的網頁設計主流該是HTML+CSS+JavaScript,
過去使用表格加上巢狀表格的呈現方式,會阻礙搜尋引擎到你的網站拜訪!
如果你的網站已稍具知名度,當然不用擔心。
但是,新建立的網站最迫切希望的就是被網友是用關鍵字找到,
在這方面,CSS的版面呈現因為都是使用文字,占了先天優勢。

網頁設計師不可不知的網站


這些模板都是由許多熱愛設計的高手所創作,而這些創作都有一個特點,就是精美。所以就算是不懂網頁設計的人也可以很容易的套用模板然後做出一張美美的網頁。
前言述完,今天要介紹同樣是提供網頁模板免費下載的網站:Open Source Web Design (簡稱 OSWD),不同的是他提供的模板數量之多,如果要細看的話大概一天也看不完。目前 OSWD 共擁有 2080 個模板,數量還在增加當中。也因為設計作品多到目不暇給,所以他們從中選出一些最喜歡的模板 Our Favorite Designs,讓訪客直接找到網站中的精華。
只有要機會接觸網頁設計的人,OSWD 是一個非常值得收藏的網站,在此推薦給大家。

2013年9月9日 星期一

螞蟻的 CSS

螞蟻的 CSS


提供許多CSS上的範例及應用,學習上可以多加利用參考,是很棒的教學網站。

2013年2月20日 星期三

【分享】Portal 版面設計基礎說明





以下列出常用的樣式設定方式 (以 /* ... */ 標註者為說明文字):
1. 設定網誌背景 (圖片與顏色)
透過 body 內的 background 屬性設定,例如:
body { background:#000000; } /* 將背景設成黑色 */
body { background:url(圖片網址); } /* 將圖片網址設成背景 */
2. 設定網誌文字 (字型、大小與顏色)
透過 body 內的 font-family、font-size 與 color 屬性設定。例如:
body {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}
3. 設定網誌位置 (置左、置中、置右)
透過 body 內的 text-align 屬性設定置左(left)、置中(center)、置右(right)。例如:
body { text-align: left;} /* 網頁置左 */
4. 設定標題圖片 (顏色、圖片)
透過 #banner 內的 background 屬性設定,來控制標題的顏色或圖片。例如:
#banner { background:#000000; } /* 將標題設成黑色 */
#banner { background:url(圖片網址); } /* 將圖片網址設成標題 */
5. 設定標題文字 (字型、大小與顏色)
透過 #bannerTitle 中 font-family、font-size 與 color 屬性設定。例如:
#bannerTitle {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}
6. 設定副標題文字 (字型、大小與顏色)
透過 #bannerNote 中 font-family、font-size 與 color 屬性設定。例如:
#bannerNote {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}
7. 設定標題大小 (長、寬)
透過 #banner 內的 height 與 width 屬性設定,來控制標題圖片的長與寬。例如:
#banner {
    width: 1000px;
    height: 100px;
}
8. 設定選單區塊圖片 (顏色、圖片)
透過 .navi 內的 background 屬性設定,變更選單區塊顏色或圖片。例如:
.navi { background:#000000; } /* 將連結圖設成黑色 */
.navi { background:url(圖片網址); } /* 將圖片網址設成連結圖 */
9. 設定選單區塊在滑鼠經過變換的圖片 (顏色、圖片)
透過 .naviOver 內的 background 屬性設定,變更選單區塊滑鼠經過時的顏色或圖片。例如:
.naviOver { background:#000000; } /* 將連結圖設成黑色 */
.naviOver { background:url(圖片網址); } /* 將圖片網址設成連結圖 */
10. 設定連結文字 (字型、大小與顏色)
更改背景後,連結文字可能因為顏色相近的關係看不太清楚,透過 a 中的 font-family、font-size 與 color  屬性設定變更。例如:
a:link { color:#0000FF; } /* 連結字體變藍色 */
a:visited { color:#00FF00; } /* 點擊連結過文字變成綠色 */
a:hover { color:#FF0000; } /*  滑鼠移動到連結時字體變紅色 */
a:active { color:#FFFFFF; } /* 執行中連結變白色 */
11. 設定側欄標題文字 (字型、大小與顏色)
透過 .menuBlockTitle 中加入 font-family、font-size 與 color 屬性設定。
例如:
.menuBlockTitle  {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}
12. 設定側欄中非連結文字 (字型、大小與顏色)
透過 .menuBlockBody 中 font-family、font-size 與 color 屬性設定。例如:
.menuBlockBody {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}
13. 設定 logo 位置
透過 #bannerTitle 中 left、top 的屬性設定,可改變上標題 logo 的位置。例如:
#bannerTitle { left:10px; top:10px; } /* 左上各平移10px */
14. 設定選單位置
透過 #navi 中的 left、top 的屬性設定,例如:
#navi { left:10px; top:10px; } /* 左上各平移10px */
15. 設定文章的標題文字 (字型、大小與顏色)
透過 .Subject 中 font-family、font-size 與 color 屬性設定。例如:
.Subject {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

指定背景顏色
Tag: background-color
範例:
body { background-color: #000000 ;} /* 將背景設成黑色 */

指定背景圖片
Tag: 
background-image
範例:
body { background-color: url(圖片路徑) } /* 將圖片路徑設為背景 */

指定背景水平或垂直方向以重複的方式填滿
Tag: 
background-repeat設定值:皆填滿 repeat (預設)、水平填滿 repeat-x 、垂直填滿 repeat-y 與不填滿 no-repeat。範例:
body {
    background-repeat: repeat-x;   /* 將背景作水平方向重複 */
    background-image:url(圖片路徑); /* 將圖片路徑設為背景 */
}

設定背景固定或移動
Tag: 
background-attachment設定值:網頁捲動時背景跟著移動 scroll (預設)、背景不隨捲軸移動 fixed。範例:
body {
    background-attachment: fixed;  /* 讓背景不隨捲軸移動 */
    background-image:url(圖片路徑); /* 將圖片路徑設成背景 */
}

設定背景位置
Tag: 
background-attachment
設定值:左上方 left top (預設)、上 top 、中 center 、下 bottom 、左 left 、右 right。範例:
body { background-position: top right; } /* 背景固定在右上角 */



設定文字字體
Tag: 
font-family範例:body { font-family:arial; } /* 字型設為arial */

設定文字大小
Tag: font-size
body { font-size:15px; } /* 文字大小設為15px */

設定文字粗細
Tag: font-weight
設定值:從100到900,也可設定為厚 bold 、較厚 bolder 、及正常 normal
範例:body { font-weight:bold; } /* 字體設為粗體 */

設定字體是否為斜體字
Tag: font-style
設定值:斜體 italic
範例:body { font-style:italic; } /* 字體設為斜體 */

設定文字顏色
Tag: font-weight
範例:body { color:#ff0000; } /* 文字設為紅色 */


設定邊框留白Tag: padding (上留白值 右留白值 下留白值 左留白值)
留白設定是在內容外,邊框內的部分,善用留白可讓文章的排版不會與邊框太過接近,較為清潔與美觀,對應區塊的四個方向可以個別設定外,也可同時作設定,範例:
div { padding: 5px 10px 5px 10px; }
/* 上邊框留白5px、右邊框留白10px、下邊框留白5px、左邊框10px */
div { padding: 5px; }
/* 四邊皆留白5px */
div { padding-top:5px;  padding-right:10px; padding-bottom:5px; padding-left:10px; }
/* 上邊框留白5px、右邊框留白10px、下邊框留白5px、左邊框10px */



2013年2月18日 星期一

【分享】20個初學者實用的CSS技巧



過去就連一個鏡像站點,我們都依靠大量的開發人員和程序員進行維護。得益於CSS和它的靈活性使得樣式能夠從代碼中被獨立抽離出來,從而讓一個只具備基本CSS理論的初學者都能夠輕易地改變網站的樣式。

不論你是對用CSS建站感興趣還是僅僅拿它讓你的博客更有feel,打好基礎才能蓋高樓。下面讓我們來看看一些對於初學者實用的CSS常識:

1、使用reset.css
火狐和IE這兩種不同的瀏覽器,在繪製CSS樣式方法上截然不同。這種情況下,使用reset.css重置所有的基本樣式會讓你得到一個全新的空樣式表。

這兒有一些常用的reset.css框架——Yahoo Reset CSS、Eric Meyer's CSS Reset和Tripoli。


2、CSS縮寫
CSS縮寫簡化了你的CSS代碼,更重要的是,它讓你的代碼更加整潔易懂。

不是像這樣創建CSS

.header {
  background-color: #fff;
  background-image: url(image.gif);
  background-repeat: no-repeat;
  background-position: top left;

}

而是像這樣創建CSS

.header {
  background: #fff url(image.gif) no-repeat top left
}


3、理解class和id
這兩個選擇器總是讓初學者感到迷惑。在CSS中,Class和ID分別用點“.”和井號“#”來標識。簡單來說id就是用來標識那些單獨不重複的樣式,而class是可以重複使用的。


4、實用的<li>
<li>也叫鏈接列表,在與<ol>或<ul>正確搭配的時候非常好用,尤其是用在導航菜單樣式上。


5、少用<table>多用<div>
CSS最大的優勢之一是使用<div>達到樣式上的靈活多變。不同於<table>,<div>裡的內容不會被鎖在單元格<td>中。可以說幾乎所有的表格佈局都可以在<div>和样式的正確使用下完成。當然,有大量表格內容時,還是用<table>吧。


6、CSS調試工具
在設計CSS時,能夠得到頁面佈局的預覽對於優化CSS樣式和糾錯是很有幫助的。
這裡有一些免費的CSS調試工具推薦給你,你可以把它裝在瀏覽器上:FireFox Web Developer、DOM Inspector、Internet Explorer Developer Toolbar、Firebug


7、避免多餘的選擇器
有時你的CSS聲明可以更簡單,特別是你發現你的代碼和下面的類似:

ul li { ... }
ol li { ... }
table tr td { ... }

它們可以簡化為:

li { ... }
td { ... }

如上是因為<li>會且只會與<ul>或<ol>連用,就像<td>只能存在於<tr>和<table>中一樣,這兒真沒有把它們重複一次的必要。

8、!Important
所有被!important 標記的樣式,即使它後來被重寫,瀏覽器也只會採用被標記的那條。

.page {
  background-color:blue !important;
  background-color:red;
}

比如上面的例子,因為background-color:blue 被標記為!important ,即使後來有把背景改成紅色的語句,也只採用被標記的那條。 !important 用來強制使一個樣式避免在之後的編碼中被修改,遺憾的是IE不支持。


9、圖像替代文本
這招經常被用來把一個基於文本的<h1>title</h1>標題換成圖片。按照如下所示:

h1 {
  text-indent:-9999px;
  background:url("title.jpg") no-repeat;
  width:100px;
  height:50px;
}

解釋說明: text-indent:-9999px; 利用縮進把文本撤掉,然後用指定了背景和長寬的圖片代替。








10、理解CSS的定位position


以下內容,歡迎參考原文出處,原作寫得非常仔細豐富,能夠幫助到很多初學者!

原出處:http://www.w3cplus.com/css/20-useful-css-tips-for-beginners.html




2013年1月28日 星期一

快速編寫CSS的方法






原文出處:http://net.tutsplus.com/tutorials/html-css-techniques/5-tips-to-writing-better-css/
參考翻譯:http://blog.mukispace.com/5-ways-write-better-css/



1.Reset


我們在編寫CSS時,一定要使用某些CSS重置的方法,無論你是用Eric Meyer Reset,YUI Reset,或者是你自己習慣的重置表,就是一定要使用,因為不同的瀏覽器對CSS預設的初始值都不相同,藉由CSS重置的設定,可以讓這些瀏覽器按照同樣的規則解讀CSS,可以大量減少之後針對瀏覽器不同,而做個別修改的時間。

它可以簡單移除元素中margin以及padding :
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }


Eric Meyer以及YUI所提供的重置表都很不錯,但對我來說他們太遙不可及了。我希望你可以重新定義每個元素的屬性,最後重置一切。這也是為什麼Eric Meyer建議,如果要更有效使用它,你就不應該直接拿他提供的重置表放入你自己的css裡頭。請調整它修改它,在基礎上重新建置它,並且把重置表變成你自己的。
對了,請停止使用這個語法吧!
* { margin: 0; padding: 0; }
它被使用在太多地方了,你想想如果將一個單選按鈕(Radio Button)的padding給移除會發生什麼事情?
我們常利用表單元素做些華麗的效果,所以建議就讓他保持原狀吧。

2. Alphabetize



一個簡單的小測試:
你覺得下面兩個例子中,哪一個例子可以最快找到margin-right的屬性值?
例1:
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
例2:
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}

能不能告訴我,例2是不是更快。按字母順序排列你的CSS屬性,你創建的一致性,這將有助於你減少你花費的時間尋找一個特定的屬性。
我知道有的人是用這種方法來排序,但有的人卻有另一套排序方法。不過在我的公司,我們一致決定要使用字母作為排序方式,假設你要和別人共同開發程式碼,這種方法對你會比較好。

3. Organization


建議你應該組織樣式表,這樣你會容易找到想要的內容以及相關的項目。可以有效的使用注釋,舉例來說,以下是我替我的樣式表所做的結構:
/*****Reset*****/
移除元素裡的margin以及padding
/*****Basic Elements*****/
定義基本元素的樣式: body, h1-h6, ul, ol, a, p, 等等
/*****Generic Classes*****/
定義像是邊欄的浮動,移除元素底部的margin間距等單純的樣式
也許他們不像我們一般認知的語意化,但是他們對編碼的有效化是必要的。
/*****Basic Layout*****/
定義基本的模版: header, footer, 等等,元素可以幫助網站定義基本的圖層
/*****Header*****/
定義所有header的元素
/*****Content*****/
定義所有content的區塊內容
/*****Footer*****/
定義所有footer的元素
/*****Etc*****/
繼續一對一的定義其他部分


4. Consistency


無論你用什麼方法定義你的程式碼,請繼續下去。我實在厭惡以及厭倦討論單行vs.多行的議題,這是無庸置疑的!每個人都有他們自己的主張,所以就選擇一種你覺得對的或習慣的方式保持下去就可以了。
就個人而言,我通常是使用混合的方式,如果一個樣式超過三種屬性,我就會使用多行:
div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
會用這種方式是因為我使用的編輯器在換行前,單獨一行正好能容納3種屬性。所以你就只要描繪好哪種方法最適合你,並且保持下去。


5. Start in the right place


在你寫好你的html標籤前,不要動你的樣式表!
當我準備做一個網站時,在寫css樣式表之前,我會先檢查<body>...</body>裡所有的標記語言,這時候我不會添加多餘的div,id,以及class。我只會加入基本的圖層像是header、content,footer,因為我知道這些東西是必須存在的。
透過標記後的文件,就會避免碰到多div症以及多class症,這些通常是致命的毛病。你只需要在開始寫css時,當你需要加入額外的效果時再加入他們即可。
有效的使用後代選擇器來定義你的子元素,不要自動給元素增加id和class。記住一點,如果一個文件沒有良好的格式標記,那這份css是毫無價值的。
*編輯註: 我必須要再強調這點,就像Trevor說的,在你還沒有100%標記好你的html時,請不要動css文件。










2012年12月13日 星期四

男丁格爾



介紹許多Javascript特效、HTML5、CSS3等等的網頁程式,網站內容豐富,十分推薦給經常製作網頁特效的朋友。

初學者可以在這邊多多學習,有提供原始碼做參考。

http://abgne.tw/



2012年12月12日 星期三

WEB代碼酷


超多實際的Javascript特效、JQuery特效範例,提供不少原始碼的教學與範例。  

分類很豐富,歡迎製作網頁的朋友前往參觀。

http://www.aspxcs.net/



網頁製作教學


許多實用的網頁教學,包含網頁製作軟體介紹、HTML教學等等,以及不錯的網站介紹。

http://kh.k12.edu.tw/1000510633/webpg1203/index.htm

國外創意網站設計:40個精美的水平滾動網站作品


我們平常見到的網站基本上都是垂直滾動,那麼水平滾動的網站是怎麼樣的滾動形式呢?下面向大家展示40個創意的水平滾動網站作品,這些網站使用了jQuery等優秀的JavaScript 庫來實現平滑的水平滾動動畫效果,相信這些優秀的網站作品一定能帶給你不一樣的瀏覽體驗。

http://www.yixieshi.com/web/11746.html

網頁設計


網頁設計是指使用標識語言(markup language),通過一系列設計、建模、和執行的過程將電子格式的信息通過網際網路傳輸,最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。

簡單來說,網頁設計的目的就是產生網站。簡單的信息如文字,圖片(GIFs, JPEGs,PNGs)和表格,都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。而更複雜的信息如矢量圖形、動畫、視頻、聲頻等多媒體檔案則需要外掛程式程序來運行,同樣地它們亦需要標示語言移植在網站內。

隨著瀏覽器和W3C標準一致性的改善,以及無表格網頁設計的認同性增加,超文件標示語言與層疊樣式表共同用作網頁內容的設計已經被廣泛的接受和使用。最新的標準和建議則是朝著瀏覽器的能力擴充和改善發展,使之能夠不需要外掛程式程序也能夠給用戶傳輸多媒體信息和更多的選擇。