技師電子報

電子報第 156 期

技師電子報於2000年9月21日創刊

本期編撰：潘其芬

本期出刊：92年12月30日

編者的話　　

旅遊感想

記得我小時候約在二十世紀四十年代，所謂東洋貨，亦是日本貨，係最最爛東西，一用即壞，不久即趕上歐美，贏得用戶信賴，我們台灣起初製造業產品亦不好，後來加以改良，並且電子製造業發達很快，不用以高價向國外採購，而是大量輸出世界各國，賺取大量外匯，因此開放觀光旅遊，我們一般市民都可出國旅遊，就是俄羅斯的莫斯科與列寧格勒亦向國人招手賺取外匯(元首及大官例外)。

十一月份又至緬甸仰光探望我的大哥，同時我的两個外甥女及一個外甥，自大陸福建省福州市至仰光探親旅遊，這表示大陸經濟改革後，人民漸漸富有，政府亦有充足外匯供出國旅遊，目前大陸經濟水平與台灣相比，還差一段，不過我們如果還在內訌，經濟停滯不前，則很快就會被大陸趕上，實際上高科技大陸很發達，譬如載人衛星，氫彈等，這是由於大陸很早就實行 “當褲子亦要發展原子彈 ”的結果，但是民生工業不注意亦不發達，直到最近才開始發展, 不要說大陸貨便宜，品質很粗糙，也許假以時日其實力可以搶奪台灣國外市場。

技術交流

談談網頁包裝

網頁本身及各形各色組成項目, 必須加以美化包裝, 以增加其外表美觀, 所用工具包括數十種樣式, 如 Fontsize, color, backgroundcolor, cursortype 等等, html 程式碼視窗如何撰寫樣式, 計有下面方式:

1. 逐行樣式(Inline style)----------即在毎行程式碼加入樣式其語法為

舉例 <B STYLE="color:navy;cursor:hand;">In the navy.</B>

(必須用Front page 及Internet 4.0 以上, 來執行上面程式)

結果 color:navy; 把 in the navy 變成海藍色

In the navy. 如果cursor 在它上面經過則cursor變更為手形(由於cursor:hand 程式碼所致) 這種方法比較精準, 那一行規定樣式變更就在那一行, 不影響其他。

2. 設置樣式表(Embedded style sheet)-----------在<head>與</head>標記間

加入樣式區塊(Style block)

撰寫樣式表規則, 一般語法如下:

selector { property:value ; property:value; . . . }

其中 selector 為選擇項---

a. 選擇項可以為html 標記如 Div Span P B 等等

b. 選擇項也可以為組成項目之 ID

舉例以標記為 selector

<STYLE>

<!--

 B { text-transform:uppercase; }

P { border:silver thick solid; background-color:turquoise; padding:10px;

text-align:center; }

-->

</STYLE>

‘ (以上為樣式區塊, 以下為程式碼)

<P>Not every paragraph has a silver lining with a <B> outlook. </P>

<P>Second line affected <B> second element by </B> B style. </P>

其結果為:

两行程式碼, 均用了B 與 P樣式, 亦即文件中若有更多 B 標記都採用此統一的 B樣式, 網頁若有更多 P 標記都採用此統一的 P 樣式, 如此同一標記有相同樣式, 比較統一, 而且節省時間, 不必每行撰寫樣式。

舉例以ID為 selector

<STYLE>

<!--

#idRedP { color:red; text-indent:10px; font-size:12pt; } ‘ ID 名稱前面必須加#

#idBoldItal { font-weight:bold; font-style:italic; }

-->

</STYLE>

‘ (以上為樣式區塊, 以下為程式碼)

<P ID="idRedP">It is the live <SPAN ID="idBoldItal">rose</SPAN>for me</P>

‘ ID 名稱為idBoldItal‘ 及idRedP

其結果為

It is the live rose for me

ID樣式, 其應用範圍比較狹, 組成項目之ID為唯一名稱, 所以只有該組成項目發生樣式變化。

3. 利用class屬性-----------指定名稱, 代表所屬樣式表, 則各種標記(tag)亦可用相同樣式, 其語法為

class = classname ‘ classname 即所指定名稱

舉例:

<STYLE>

<!—

.ClsSize { font-size:20;text-align:center; }

-->

</STYLE>

以上為指定名稱為ClsSize樣式表, 規定Fontsize 為20 text-align 為 center

然後用 class = clsSize 即可出現此樣式

以下為程式碼

<p class = ClsSize>First line text</P> ‘First line text 用 ClaSize style

<Div class = ClsSize>Second line text</Div> ‘Second line text亦用claSize

<p >Third line text</P> ‘Third line text用原有規定不採用ClaSize style

其結果如下

First line text

Second line text

Third line text

4. 製作樣式表之檔案, 供連結及引用須要, 此時應用更廣, 不僅可用於全網頁, 而且其他網頁亦可加以連結或引用, 其語法為:

連結 <LINK REL="stylesheet" TYPE="text/css" HREF="mystyles.css">

引用 @import: url(mystyles.css) ;

以上技術必須應用於 Internet Explorer 4.0 及更新版本, 通稱css (Cascade style sheet), 因樣式及採用方法多而複雜, 難免發生衝突與重複情事, 按照優先原則順序而下來決定出現之樣式, 故稱 Cascade。

技師投稿

回頁首▲