我們歡迎您!! …為服務大台北地區技師朋友,省公會台北辦公室成立了,開辦帶案技師各項業務掛件審查等服務,可在辦公室前臨時停車掛件,或通知會務至門口取件,交通便捷,請多加利用。台北辦公室位於台北市復興南路2段160巷8號1樓,近『科技大樓捷運站』,步行約 3 分鐘。…

如無法檢視此頁面,請點選我

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

本期編撰:潘其芬

本期出刊:92年12月30日

臺灣省土木技師公會 發行

編者的話  

旅遊感想

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

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

技術交流

談談網頁包裝

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

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

<tag STYLE="property:value; property:value; . . ."></tag>

舉例        <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。

技師投稿
回頁首▲
 

版權所有,未經確認授權,請勿轉貼節錄

    Top   Back