讀書的筆記。

 
如何設計好網站--無廢話XHTML & CSS/Patrick Griffiths著/台北市L:上奇科技,2007年初版。譯自HTML dog:the best-practice guide to XHTML & CSS 。有趣的是中文版封面寫說『Amazon.com五顆星一致好評推薦』,實際去亞馬遜網站看,英文的2006年出版,今天為止只有五個人投票,平均4.5啊。沒有什麼公信力的數值。莫非是認為讀此書的中文讀者不會去確認?要當誠實的人,不可以說謊啊。算了,書中的內容真的不錯,比起時下什麼佈置部落格等書實用且可信任。前幾天才在書局站著看完一本,不出所料,我只學到一個字型的原則,幸好沒有買。




 HTML語法
blockquote 引用

若沒有設定字型樣式與背景,看起來只是普通文字罷了。但是文章中常常有引用別人的東西,預先設定好引用區域的顯示樣式,之後就很方便了。我想啦。
▲語法 <blockquote>子曰:群居終日,言不及義,好行小慧,難矣哉!</blockquote>
▲範例
子曰:群居終日,言不及義,好行小慧,難矣哉!




cite+q 也是引用
比較適合文字少的引用,因為顯示是行內而非區塊。更花俏的引用範例可見
Pull Quotes,簡單說就是在CSS新增一個引用的區塊設定,當文章中有引用時,再用原始碼拉出設定。
▲語法 <cite>櫻木花道</cite><q>我是天才</q>
▲範例
櫻木花道我是天才



acronym 縮寫文字的註解 
原始翻譯是首字母縮略字,滑鼠移上去就可以看到說明文。
▲語法 <acronym title="由貴香織里的天使禁獵區">天禁</acronym>
▲範例:日本漫畫中天禁是經典。



文章中的原始碼 
在網誌文章中使用半形的<>大多數會被瀏覽器當作原始碼而無法顯示,然而有些情況是刻意要顯示原始碼,pixnet blog處理這種問題的方法是,當我們在進階編輯器中打了<系統就會在原始碼的地方改成&lt;這四個字元,而>改成&gt;。但是我們直接在進階編輯器中打了&lt;怎麼辦?那原始碼就變成
&amp;lt;這八個字元。所以不需要code等語法了。
▲語法 &lt;font face=&quot;Arial&quot;&gt;123&lt;/font&gt;
▲範例:
<font face="Arial">123</font>



bdo dir 文字排列
橫式中文與英文一樣是從左至右閱讀,當想像舊式中文或是阿拉伯文從右到左也是可以。左至右的屬性是ltr(應該是left to right),右至左rtl。對於一般歹碗郎實用性低。英文推理小說有時候會用到。
▲語法 <bdo dir="rtl">D・N・Angel中,丹羽變身DARK,相對於日渡變身的KRAD,是反字。</bdo>
▲範例:
D・N・Angel中,丹羽變身DARK,相對於日渡變身的KRAD,是反字。 



link 匯入外部CSS
有兩種,法一要放在<head>裡面,法二是行內式。
▲語法1
<link rel="stylesheet" type="text/css" href=
www.css.com/abc.css" />

▲語法2
<style type="text/css">@import url("
www.css.com/abc.css");</style>



media 列印專用CSS
想要印下文章,通常連結區(導覽列)和頁首頁尾都是多餘的,可以使用media屬性在要列印時,連結到另個CSS。列印用CSS可能是灰階文字設定,因為不是每個人都可以印彩色。type="text/css"可有可無。
▲語法(分離式)
<link rel="stylesheet" type="text/css" media="screen" href="
www.css.com/xyz.css" />
<link rel="stylesheet" type="text/css" media="print" href="
www.css.com/abc.css" />

▲語法2(階層式)
<link rel="stylesheet" type="text/css" href="
www.css.com/xyz.css" />
<link rel="stylesheet" type="text/css" media="print" href="
www.css.com/abc.css" />


▲語法3
<style type="text/css">@import url("
www.css.com/xyz.css") screen;</style>
<style type="text/css">@import url("
www.css.com/abc.css") print;</style>

▲語法4
<style type="text/css" media="screen">@import url("
www.css.com/xyz.css") </style>
<style type="text/css" media="print">@import url("
www.css.com/abc.css");</style>



object 嵌入式多媒體物件
因為embed是不良標籤,建議用物件插入影音檔。語法十分十分冗長,很難通通記起來。我想我還是會繼續用不良標籤,設定簡單明瞭,也不需要結束。object的屬性如下,data是物件的位置,classid也是物件的位置。
範例的param是物件參數設定,name為必要屬性,value是參數值。

▲語法1(pixnet插入影音檔)
<object id="PixnetPlayerKJMLJAKPQMKRJIQQ" contentEditable="inherit" codeBase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="54" width="156" align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="http://www.pixnet.net/onsv/KJMLJAKPQMKRJIQQ/75492077/0" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />

<embed src="http://www.pixnet.net/onsv/KJMLJAKPQMKRJIQQ/75492077/0" wmode="transparent" scale="noscale" salign="lt" quality="high" bgcolor="#ffffff" width="156" height="54" name="PixnetPlayerKJMLJAKPQMKRJIQQ" align="9" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>


▲語法2 (蟲音前
這篇提到的flv播放器)
<object contentEditable="inherit" codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="70" width="500" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="_cx" value="13229" />
<param name="_cy" value="1852" />
<param name="FlashVars" value="" />
<param name="Movie" value="http://www.ruochi.com/product/vcastr2/vcastr22.swf?LogoUrl=http://i5.photobucket.com/albums/y200/hana36kkk/2007PacificOcean_005.jpg&amp;LogoText=MushishiOST&amp;BarPosition=0&amp;IsShowBar=1&amp;vcastr_file=http://media.twango.com/m1/original/0096/ea2eefa6b11b44de939d10f0f057c7a9.flv" />
<param name="Src" value="http://www.ruochi.com/product/vcastr2/vcastr22.swf?LogoUrl=
http://i5.photobucket.com/albums/y200/hana36kkk/2007PacificOcean_005.jpg&amp;LogoText=MushishiOST&amp;BarPosition=0&amp;IsShowBar=1&amp;vcastr_file=http://media.twango.com/m1/original/0096/ea2eefa6b11b44de939d10f0f057c7a9.flv" />
<param name="WMode" value="Window" />
<param name="Play" value="0" />
<param name="Loop" value="-1" />
<param name="Quality" value="High" />
<param name="SAlign" value="LT" />
<param name="Menu" value="0" />
<param name="Base" value="" />
<param name="AllowScriptAccess" value="" />
<param name="Scale" value="NoScale" />
<param name="DeviceFont" value="0" />
<param name="EmbedMovie" value="0" />
<param name="BGColor" value="" />
<param name="SWRemote" value="" />
<param name="MovieData" value="" />
<param name="SeamlessTabbing" value="1" />
<param name="Profile" value="0" />
<param name="ProfileAddress" value="" />
<param name="ProfilePort" value="0" />
<param name="AllowNetworking" value="all" />
<param name="AllowFullScreen" value="true" />
</object>


▲不良語法 (我平常用的XD)
<embed width="500" height="140" loop="true" showstatusbar="true" showdisplay="true" autostart="false" type="" src="http://www.music.com/01gogogo.mp3"></embed>




 CSS語法 
font-family 字型設定

字型名稱若有空格,就要括起來。瀏覽器會從第一個開始選擇。
▲語法 
h1 { font-family: "Courier New", "Comic Sans MS", "Times New Roman", "Tahoma", "Verdana"  } 



font-size 字型大小
若要瀏覽器能彈性的控制文字大小,便於視障或特別習慣的朋友閱讀,必須用相對性單位設定。老實說我覺得不多人真的會這麼做啦,畢竟自定大小會有跑框等問題,背景越花風險越大。絕對性單位如px像素和pt點,cm公分或in英吋等不常見。相對性如百分比和em,後者繼承上一階層的大小,如上階層是10px,子元素的2em就是20px。書中建議先用百分比再用em。
▲語法 
body {font-size: 80%;}
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}



text-variant 大小寫
英文使用者可能會需要把標題文字改成大寫,使其更顯目。中文字怎麼轉就是方塊啊。除了下面說的語法,另種方式是新增一個class如.firstletter,設定其大小位置等,要打文章時再套用設定。範例如Drop Caps
▲語法 
h1 {font-variant: small-caps;}/*小寫全部變大寫*/
h2 {text-transform: capitalize} /*首字大寫*/
h2 {text-transform: uppercase} /*全大寫*/
h2 {text-transform: lowercase} /*全小寫*/


fixed 背景固定
真奇怪,當初我用此語法在ff不支援,但是
別人範例檔卻可以耶…有機會再試試好了。
▲語法 h1 {background-attachment: fixed;}



FIR 圖片替代文字
書中不建議用display: none;,而改用如下。法3很妙,好處是當為了加快載入速度不顯示圖片時,可以看到被圖片蓋過的文字,沒實際用過。我平常用font-size: 0px;其實不是很好的方法,FF是真的消失,IE還是會有很小很小的字,還要再修改文字顏色和背景相同才能隱藏。
▲語法1
h1 {
 background-image:url(
www.images.com/image01.jpg); 
 width: 300px;
 height: 100px;
}
h1 span {
 display: block; 
 height: 0; 
 overflow: hidden; 
}


▲或是語法2
h1 {
 background-image:url(
www.images.com/image01.jpg); 
 width: 300px;
 height: 100px;
 font-size: 1px; 
 text-indent: -999em; /*文字縮排*/
}


▲或是語法3
h1 {
 position: relative; 
 width: 300px;
 height: 100px;
 font-size: 30px; /*文字要比圖片小*/
}
h1 span {
 position: absolute; /*將此元素蓋過文字*/
 top: 0;
 width: 300px;
 height: 100px;
 background-image:url(
www.images.com/image01.jpg); 
}



border 邊框
1像素的等距離小點點邊框,IE6及其以下的版本將自動變身成虛線(若打算設成虛線應該是dashed),我測試了一下,IE6有些原則真的妙得怪啊。
▲語法 border: 1px dotted #558097;




list-style-image 清單背景圖片
使用背景圖片當作項目標記是方法之一,比較標準的作法是list-style-image:url(網址)。
▲語法
ul {
 list-style-image: url(
www.images.com/image02.jpg) ; 
}



list-style-position 清單項目位置
清單會自動將項目標記丟到box,我之前做綠色城堡樣板在自訂連結的地方也遇到這個問題,這時要將位置設為行內。預設行外。
▲語法
ul { list-style-position: inherit; }/*繼承之前的設定*/
ul { list-style-position: outside; }/*預設值 項目標記在內容box外*/
ul { list-style-position: inside; }/*項目標記在內容box內*/



list-style-type 清單項目類型
預設阿拉伯數字,不過也可以改成圈圈、羅馬數字等。以上這三種清單設定可以統一用list-style,比如說。ul { list-style: square; none url(www.images.com/image02.jpg) inside; }
▲語法
ul { list-style-type: none; }/*若有自訂的項目圖片,預設的就要隱藏*/
ul { list-style-type: decimal; }/*1.2.3.等等,ol有序清單的預設值*/
ul { list-style-type: disc; }/*● 實心圈圈*/
ul { list-style-type: circle; }/*○ 空心圈圈*/
ul { list-style-type: square; }/*■ 實心正方形*/
ul { list-style-type: lower-roman; }/*i.ii.iii.iv等,小寫羅馬數字*/
ul { list-style-type: upper-roman; }/*I.II.III.IV等,大寫羅馬數字*/
ul { list-style-type: lower-greek; }/*希臘字元,ie不支援*/
ul { list-style-type: lower-latin; }/*a.b.c等,ie不支援*/
ul { list-style-type: upper-latin; }/*A.B.C等,ie不支援*/
ul { list-style-type: decimal-leaading-zero; }/*01.02...10.11等,ie不支援*/



清單取消預設留白和邊界
IE會到用邊界,其他瀏覽器是套用留白,取消法如下。而IE將每個項目後面擅自加上空格,補救是修改HTML,若以CSS設計無法用到。
▲語法
ul {
 padding: 0;
 margin: 0; 
}



vertical-align 垂直對齊
行內或是儲存格的文字位置。
▲語法
h1 { vertical-align: 0 } /*長度,高於基準線是正值,相反為負值,基線是0*/
h1 { vertical-align: 100% } /*0%是基線,100%一倍行高,類推*/
h1 { vertical-align: baseline } /*預設,繼承*/
h1 { vertical-align: super } /*上標*/
h1 { vertical-align: sub } /*下標*/
h1 { vertical-align: top } /*頂端*/
h1 { vertical-align: bottom } /*底部*/
h1 { vertical-align: text-top } /*對齊父box的頂端*/
h1 { vertical-align: text-bottom } /*對齊父box的底部*/
h1 { vertical-align: middle } /*對齊父box?的中間*/



z-index z軸順序
數字越大位置越高。預設auto。
▲範例
#asd { z-index: 2 }
#zxc { z-index: 1 }




 雜談 
其1

開新視窗沒有親和性?確實無法使用上一頁,但是我在網誌幾乎全用開新視窗(target=_blank),因為新的連結覆蓋掉正在閱讀的頁面,當看完新連結的東西,想回頭找上篇文章讀到哪就找不到了。原因二,按上一頁又需要重新載入網頁的圖片、檔案很大的音樂檔、會lag的JAVA Script或flash,對於目前頻寬低的台灣我並不認為是好方法。瀏覽器的分頁功能可以取代開新瀏覽器的遲緩。

其2
剩下書末的CSS字典附錄,這本過兩公分厚的書就解決啦。書中有敎自架站中CSS的ID和class設定法,兩欄、三欄式以上,或是頁首、頁尾與導覽列如何不重疊。只是我應該不會再去架站,反正網誌對於我已經十分足夠XD這本書的作者某方面有點過於理想。不過制定標準就是這樣,先訂下高標準,跟著做的人才能有點水平。

 
 

arrow
arrow
    全站熱搜

    小無 發表在 痞客邦 留言(0) 人氣()