影像標籤

影像標籤

【影像標籤】

在使用影像標籤時有兩件事值得注意一下，一是檔名，二是路徑。首先要注意的就是，檔名是否正確以及大小寫是否一致！圖檔名稱不正確，任電腦再厲害也找不到您要的圖，檔名大小寫不一致，如Image.gif、image.gif、image.GIF在自己的電腦中看都能正確的顯示，但是一但傳到網路上去時，因爲系統不一樣的關係（電腦伺服器的作業系統可比個人用電腦的作業系統嚴謹多了）就變成三個不一樣的檔案了，所以，可別忽略檔名大小寫不一致的影響。

另外一個就是路徑問題了，這個問題也不難，我們在稍後會提到。我們先來看看影像的標籤如何寫。

使用方法：<img src="boy.gif" alt="本站特約模特兒" align=right border=0 hspace=2 vspace=2 height=56 width=32>
標籤解說：目前常見的網頁圖形格式有兩種就是gif及jpg兩種格式。gif格式只有256色，不過色彩比較鮮豔乾淨漂亮，適合電腦美工圖案。而jpg格式的圖案是全綵失真壓縮，比較適合一大堆顏色的圖片，如照片就較適合用jpg格式來呈現。

使用範例：

基本用法	用法：<img src="圖檔名稱、路徑"> 顯示圖片最基本的方法（就是不加任何屬性啦！）其中 boy.gif 就是圖檔的檔名。
原始碼	<img src="images/G-FASE4.GIF">嗨！我是本站的模特兒喔！
呈現結果	嗨！我是本站的模特兒喔！

長寬設定	用法：<img src="圖檔" height="高度" width="寬度"> 設圖片的大小，其實不用設也可以，但是有設更好，可以加快瀏覽速度，因爲瀏覽器就不用在那邊花時間算您的圖片有多大啦！此外您也可以自己隨意設定圖片大小。
原始碼	<img src="images/G-FASE4.GIF" height=32 width=32>
呈現結果

加上說明	用法：<img src="圖檔" alt="說明文字"> 滑鼠一到圖上時，說明文字就會自動出現。此外，在圖片未顯示出來或顯示不出來時，也會以這一段字代替，讓使用者知道這個未顯示出來的圖片究竟是幹嘛用的。
原始碼	<img src="images/G-FASE4.GIF" alt="本站特約模特兒">移到圖上看看。
呈現結果	移到圖上看看。

圖片位置	用法：<img src="圖檔" align="位置"> 圖片位置設定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成‘文繞圖’的效果。
原始碼	<img src="images/G-FASE4.GIF" align=right>嗨！我往右邊靠！
呈現結果	嗨！我往右邊靠！
原始碼	<img src="images/G-FASE4.GIF" align=left>嗨！我往左邊靠！
呈現結果	嗨！我往左邊靠！
原始碼	<img src="images/G-FASE4.GIF" align=top>文字對齊我頭頂！
呈現結果	文字對齊我頭頂！
原始碼	<img src="images/G-FASE4.GIF" align=bottom>文字對齊我腳底！
呈現結果	文字對齊我腳底！
原始碼	<img src="images/G-FASE4.GIF" align=middle>文字對齊我中間！
呈現結果	文字對齊我中間！
原始碼	<img src="images/G-FASE4.GIF" align=absmiddle>文字對齊我絕對中間！
呈現結果	文字對齊我絕對中間！

邊框設定	用法：<img src="圖檔" border="邊框粗細"> 設定邊框大小，通常都設成 0 感覺比較美觀啦！因爲內定的框框實在是不怎麼漂亮....。尤其在連結時，設框框簡直是醜斃了...。
原始碼	<img src="images/G-FASE4.GIF" border="4">
呈現結果

左右間距	用法：<img src="圖檔" hspace="離左右物件的距離"> 離文字的水平距離，通常多少也設一點，以免靠文字太近，看起來纔不會有太擠的感覺。
原始碼	左邊的字<img src="images/G-FASE4.GIF" hspace="15">右邊的字
呈現結果	左邊的字右邊的字

上下間距	用法：<img src="圖檔" vspace="離上下物件的距離"> 離文字的垂直距離，通常多少也設一點，以免靠文字太近，看起來纔不會有太擠的感覺。
原始碼	上面的字<br><img src="images/G-FASE4.GIF" vspace="15"><br>下面的字
呈現結果	上面的字下面的字

由於此網頁有用css控制版面圖文，故在netscape下觀看，會稍有不正確。

【網頁影像重要觀念】

關於路徑：現在我們來談談圖片路徑的事，路徑不對，不管您的網頁名稱寫的多正確也沒用，因爲瀏覽器無法尋着您的路徑去找到該有的圖片，所以，我們來看看該如何正確的使用路徑。有些人並不喜歡將網頁及圖通通放在同一個目錄下，比如說有人將圖檔全放在c:/images裏，而網頁檔放在c:/demo裏，這樣子的話，我們該如何正確的寫圖片的路徑呢？我將幾種常見的情形整理成下表：

html檔的位置	圖檔的位置	寫法	情形說明
c:/demo	c:/demo	<img src="tad.gif">	圖文均在同一目錄
c:/demo	c:/demo/images	<img src="images/tad.gif">	圖在網頁下一層目錄
c:/demo	c:/	<img src=" ../tad.gif">	圖在網頁上一層
c:/demo	c:/image	<img src=" image/tad.gif">	圖文在同一層但不同目錄

或許有人看到不明就理，我來說明一下，“../”是回到上一層目錄的意思。“images/”則是進入下一層目錄image之意，而“images/”的意思就是，回到上一層目錄，然後再進入目錄images中。以上我們使用的均爲“相對路徑”的概念。

影像單位：或許您會常常看到px這個單位，沒錯，這是我們在製作最常用的一個單位了。這個單位完整的寫法是“pixels”，我們稱之爲“像素”。像素，是螢幕上的一個小光點，然而這一小光點的大小，並非是固定的，舉個例子而言，螢幕本身十五寸，不會因爲你的任何設定而變成十七寸。但是，其解析度是可以改變的，我們常見的解析度有以下幾種：“640 ×480”、“800 ×600”、“1024 ×768”。舉其中之一的640 ×480來說，其代表的就是在螢幕上有寬640個光點，高有480光點，若是我們將解析度調整爲800 ×600其寬勢必要從640變成800個光點，也因此，該光點便會變小一點，所以，我們看起來就會覺得解析度調高後，螢幕內的東西，變得小小的，很精緻，那就是因爲光點變小的原因。
影像單位：或許您會常常看到px這個單位，沒錯，這是我們在製作最常用的一個單位了。這個單位完整的寫法是“pixels”，我們稱之爲“像素”。像素，是螢幕上的一個小光點，然而這一小光點的大小，並非是固定的，舉個例子而言，螢幕本身十五寸，不會因爲你的任何設定而變成十七寸。但是，其解析度是可以改變的，我們常見的解析度有以下幾種：“640 ×480”、“800 ×600”、“1024 ×768”。舉其中之一的640 ×480來說，其代表的就是在螢幕上有寬640個光點，高有480光點，若是我們將解析度調整爲800 ×600其寬勢必要從640變成800個光點，也因此，該光點便會變小一點，所以，我們看起來就會覺得解析度調高後，螢幕內的東西，變得小小的，很精緻，那就是因爲光點變小的原因。

影像格式：網頁用的圖檔目前只有gif格式（即副檔名爲gif的圖檔，如：bg.gif）以及jpg格式（即副檔名爲jpg的圖檔，如：bg.jpg）爲一般的瀏覽器所接受。其他如bmp格式或是pcx格式都是無法在網頁上使用的，若非得要用，那就利用影像繪圖軟體來作格式的轉換吧！

圖檔範例	說明
	gif格式的圖形只能以256個顏色顯示，雖然其色彩較少，但顏色鮮豔亮麗，若是圖形顏色不多，用gif格式存檔會較漂亮。
	jpg格式的圖形是以全綵顯示，適合用在相片或是漸層顏色的圖片上，壓縮比例以75%爲適中。

zhi 發表於 14:56 | 閱讀全文 | 評論( 0 )|引用(trackback 0 )

分隔標籤 - 2004-04-24 14:56

分隔標籤

【文字上的分隔標籤】

或許你已經發現這個問題了：天啊！我不是在記事本里排版排得很漂亮，爲何透過瀏覽器看起來一切都走了樣？對啊！別太訝異，在網頁的編排裏，並不像漢書或WORD一樣，只要拼命按Enter鍵或空白鍵，便能完成分段或分行，因爲，HTML語言是不認識我們所謂的Enter鍵或空白鍵，所以不管您按了多少次的空白或Enter，瀏覽器都會當作沒看見啦！

使用方法：強制斷行標籤<br>、強制分段標籤<p>
標籤解說：我們在寫文章時，有時候在特定的地方會強迫斷行（<br>），或是在寫完某一段的時候便會分段（<p>），寫網頁也一樣，而且更需要斷行及分段的功能，以免整個網頁看起來亂糟糟的。

使用範例：

原始碼	呈現結果
這是一個斷行的範例<br>看出來了嗎？	這是一個斷行的範例看出來了嗎？
這是一個分段的範例<p>基本上他會比斷行還多空出一行	這是一個分段的範例基本上分段會比斷行還多空出一行

【分隔線標籤】

使用方法：上一段文字內容<hr>下一段文字內容
標籤解說：利用<hr>這個標籤便可產生一條橫分隔線。另外，其有些屬性分別說明如下：

使用範例：

一般用法	尚未加任何屬性。
原始碼	普通分隔線<hr>
呈現結果	普通分隔線

顏色屬性	用法：<hr color="顏色碼或顏色名稱">
原始碼	橘色分隔線<hr color="#ff8000">
呈現結果	橘色分隔線

寬度屬性	用法：<hr width="寬度">，其單位爲px（像素），寬度亦可用百分比來作設定，如50%即意爲寬度佔螢幕50%。
原始碼	寬度爲240px的分隔線<hr width="240">
呈現結果	寬度爲240px分隔線

厚度屬性	用法：<hr size="厚度">
原始碼	厚度爲5的分隔線<hr size="5">
呈現結果	厚度爲5分隔線

位置屬性	用法：<hr align="水平對齊位置">，其設定值有三個，也就是置左align="left"、置中align="center"、置右align="right"
原始碼	靠右的分隔線<hr align="right">
呈現結果	靠右的分隔線

陰影屬性	用法：<hr noshade>，無設定值，只要將 noshade 加入即可，通常會配合顏色設定，效果較佳。
原始碼	實心分隔線（無陰影）<hr noshade>
呈現結果	實心分隔線（無陰影）

zhi 發表於 14:56 | 閱讀全文 | 評論( 0 )|引用(trackback 0 )

其他 - 2004-04-24 14:56

其他

■ 網頁配色及背景音樂

首先是網頁的底色，通常是白白的，要怎麼做變化呢？可以做自己的背景圖片。
要注意一點，如果背景和文字顏色一樣～或者顏色相近，天啊～那誰知道你在寫什麼呀？最好文字與背景顏色有對比，像敝人當初，網頁背景是黑的，字是白的紅的，就可以很明顯的突顯出文字。如果圖片中有文字，也要儘量淡化，否則影響內容就不好囉！
內容的東西顏色要配的適宜（除非你想要有奇怪的風格），不然像背景大紅大紅，太刺眼了，有人會想去嗎？剩下的就讓您自己配配看吧！
然後是音樂，有人喜歡用bgsound標籤
<bgsound src="music.mid">
可是用NetScape看就沒有聲音了最好用embed標籤 <embed src="music.mid">
這樣就可以正常播放了唷～

■ 首頁應有的特質及重要性

About Open Page：打開browser看到網站的第一個部份，有人稱之爲Open Page(通常是首頁的一半或三分之一)，這個部份應該包含網站的主功能(亦即使用者上這個網站最希望或者最可能做的事)，ex. 一進入Allproducts.com即可看到“Key word search”及“Search by category”，應該儘量避免讓使用者還要使用mouse上下左右拉才能看到他(她)所想要的功能或資訊，有時資訊太多，在不得已的情況下，頁面可以往下沿申，但切忌右左劃面過大，不符一般人的使用習慣，也會造成列印上的困擾。
主題明確：Open Page應包含公司Logo、網站主題(最好是一段簡短的Slogan，讓使用者一看就知道這個網站主要功能或架站目的,ex. Allproducts.com上的The world's best products directory for volume buyers)
Navigation：讓使用者很明確瞭解他(她)目前在網站的什麼地方(或功能)，首頁上應該有主要功能的連結，各個icon如果可能的話，儘可能加上一些純文字的說明及link；至於icon或者link的擺放亦應有其相對應的邏輯，如與整個網站或大架構較爲相關的，放在較外層，與目前執行的功能或頁面較爲相關的link應該放在內層；另外，最好能在首頁上提供Site Map的連結，讓使用者可以很快了解網站的架構；所有的link應該把握 intuitive , obvious , fast的原則。
Color or image：對於顏色的採用，應該考慮到該網站的特性及與其它相關網站的區別，特別是首頁的顏色配置，應該讓使用者感覺很舒服、沒有壓迫感，但又不失其專業性，但切忌過度追求美感而犧牲其功能性，就公司目前的網站設計理念，應該是功能性的考量優於純美術的考量，首頁的設計最好設定在60k以內，而且不要用太多層的table。
Meta tag：該部份不會出現在前端的頁面上，但網站規劃時應該將該部份一併考量，做爲網站登錄時使用，網站上線時務必將相關資料加入。
其它：首頁上應該有service account 及聯絡資料

■ Meta Tag 的簡介

一般常用的格式如下：

<Title>All Products Online</title>
這雖說不是meta的一部份，但是也不可忽略，總長度不要超過85個Character (約10個字)。
<meta http-quive="content-type" content="text/html; charset=iso-8859-1">
說明網站的格式及編碼方式，另外這個功能也可以拿來說明網站的名稱。
<meta name="keyword" contents="關鍵字一, 關鍵字二, 關鍵字三, …..">
鏟明整個網站的關鍵字，關鍵字間用逗點隔開，總長度最好不要超過1000個Character (約44個字)。
<meta name="description" contents="整個網站的描述….">
鏟明整個網站爲何吸引人的地方，可用逗點隔開，總長度最好不要超過200個Character (約15個字)，若文章真的太長，可以切割成兩個部分，較不重要的部分置入下一個Description。
<meta name="robots" content=" ALL, NONE, INDEX, NOINDEX, FOLLOW, NOFOLLOW">
此功能是要給搜尋引擎使用的，是要用來告訴Spider哪些網頁是要去擷取的或不用去擷取的，一般都設定成All(內定值)。

zhi 發表於 14:56 | 閱讀全文 | 評論( 0 )|引用(trackback 0 )

表格標籤 - 2004-04-24 14:56

表格標籤

【網頁中的表格觀念】

舉個例子來說，如果今天我們要做一個3欄2列的表格，在WORD中，只要設定表格爲3欄、2列就完成了，不過，在網頁中做一個3欄2列的表格，可是要分成好幾個步驟的，第一個步驟，利用<TABLE></TABLE>標籤告訴電腦我要做一個表格；第二個步驟，利用一組<TR></TR>標籤先做一個橫列，然後在橫列中利用三組<TD></TD>標籤再分出三欄；第三個步驟，重複第二個步驟，再做一橫列然後再分三欄，如此才能得到一個3欄2列的表格。聽不太懂嗎？沒關係，以下咱們就來慢慢的看個仔細：

首先我們來看一個最簡單的表格：
原始碼呈現結果
<TABLE BORDER=1>
<TR><TD>1</TD></TR>
</TABLE>
1
利用<TABLE>這個標籤來告訴電腦，這是一個表格，至於 BORDER=1 這參數是設定此表格的框線粗細爲 1。一組<TR></TR>是設定一橫列的開始。一組<TD></TD>則是設定一個欄位。當然，文字就是要擺在這裏面。
現在我們再來增加二個格子：
原始碼呈現結果
<TABLE BORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
1 2 3
看見沒有，<TR></TR>沒有增加，<TD></TD>卻增加了二組。那如果我要再加上一列呢？很簡單，就像這樣：
原始碼呈現結果
<TABLE BORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>
1 2 3
4 5 6

【合併表格欄位】

並非所有的表格都是規規矩矩的只有幾欄、幾列而已，有時候，我們還會希望能夠“合併欄位”，讓表格更美觀、更實用一點，而談到“合併欄位”，我們就必須知道，合併的方向有兩種：一種是上下合併（也就是橫列間的合併），一種是左右合併（也就是直欄間的合併），這兩種合併方式各有不同的屬性設定方法。
左右欄位合併：基本上，您的表格已經學會囉！接下來，咱們就來看看，如何將 1、2、3 格通通合併變成一大格：
原始碼呈現結果
<TABLE BORDER=1>
<TR><TD COLSPAN=3>1</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>
1
4 5 6
您應該會發現，怎麼2、3都消失了？只剩下1，而且該欄的<TD>標籤還多了一個陌生的臉孔COLSPAN="3"，沒錯，這就是“左右欄位合併”的屬性，COLSPAN="3"的意思就是“這個欄位左右橫跨了3個欄位”，也正因如此，本來的兩個<TD>都可以省掉了，因爲都被並掉了嘛！
上下欄位合併：學會了左右合併！接下來，咱們就來看看，如何上下合併，將 1、4格通通合併變成一大格：
原始碼呈現結果
<TABLE BORDER=1>
<TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>5</TD><TD>6</TD></TR>
</TABLE>
1 2 3
5 6
有了上一次的經驗後，我們就知道，要合併欄位就一定有些欄位會被“犧牲”掉（也就是那些被合併的欄位啦！），這次我們要“上下合併”，我們將1與4合併成一個欄位，那麼被犧牲的是哪一個欄位呢？沒錯就是下面那一個倒楣的4，我們看看上圖，果然4已經刪掉了，而在1的<TD>標籤中則多了個生面孔ROWSPAN，這就是“上下欄位合併”的屬性，ROWSPAN=2的意思就是“這個欄位上下連跨了2個欄位”，其結果如下：

【表格欄位對齊位置設定】

我可以自己設定表格的大小嗎？當然可以，您可以自由設定表格的“寬”及“高”喔！我們來製作一個寬100、高60的表格，做法如下：
原始碼呈現結果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD>1</TD></TR>
</TABLE>
1
哎呀！怎麼 1 老是在表格的左邊呢？可以弄到中間嗎？當然可以，只要在<TD>加入 ALIGN=CENTER 這參數即可：
原始碼呈現結果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER>1</TD></TR>
</TABLE>
1
此外，利用 ALIGN=RIGHT可以讓表格中物件置右、利用 ALIGN=LEFT可以讓表格中物件置左（預設值），至於爲什麼要加在<TD>中呢？因爲，<TD>是一個欄位的意思，我們要指定在這欄位中的東西要置中或置左置右，就必須將ALIGN加在<TD>中。
既然可以置中，那麼也可以控制表格內文字靠上方、靠下方嗎？可以的，只要利用 VALIGN=TOP 這種屬性即可讓表格內物件靠上方對齊。
原始碼呈現結果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR>
</TABLE>
1
利用VALIGN=MIDDLE可以讓表格中物件垂直置中（預設值），VALIGN=BOTTOM可以H讓表格中物件靠下方。

【表格背景、底色設定】

那麼表格可以設定底色嗎？可以的不但表格可以，您也可以指定某欄或某列的顏色，方法和加背景顏色一樣，利用BGCOLOR="顏色碼"就行了。底下是指定整格表格背景顏色的方法：
原始碼呈現結果
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
將BGCOLOR="顏色碼"加在<TR>中，可以指定“一列”的背景顏色：
原始碼呈現結果
<TABLE BORDER="1" >
<TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
將BGCOLOR="顏色碼"加在<TD>中，可以指定“一欄”的背景顏色：
原始碼呈現結果
<TABLE BORDER="1" >
<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
表格除了可以設定底色外，也可以用圖片來作背景嗎？當然可以，方法一樣簡單，只要將BACKGROUND="圖片名稱"加到表格中就行了。和表格背景顏色一樣，不但表格可以設定背景圖片，您也可以指定某欄或某列的背景圖片：
原始碼呈現結果
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
將BACKGROUND="圖片名稱"加在<TD>中，可以指定“一欄”的背景顏色：
原始碼呈現結果
<TABLE BORDER="1">
<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4

【表格框線設定】

如何設定表格粗細？只要利用BORDER="粗細值"就行了。
原始碼呈現結果
<TABLE BORDER=5>
<TR><TD>1</TD></TR>
</TABLE>
1
如何設定表格顏色？只要利用BORDERCOLOR="顏色碼"就行了。
原始碼呈現結果
<TABLE BORDER="5" BORDERCOLOR="#0080FF">
<TR><TD>1</TD></TR>
</TABLE>
1
另外，我們也可以設定表格的陰影、亮面顏色，讓表格看起來更有立體感喔！只要利用 BORDERCOLORLIGHT="#顏色碼"（亮面設定） BORDERCOLORDARK="顏色碼"（暗面設定）就行了。
原始碼呈現結果
<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
<TR><TD>1</TD></TR>
</TABLE>
1

【表格欄距設定】

我們可以利用CELLPADDING屬性自由設定表格內文距離格線的距離，這個屬性很好用，保持適當的距離，看起來比較舒服。一般而言內定值爲2，不過我建議設定爲4比較漂亮。
原始碼呈現結果
<TABLE BORDER="1" CELLPADDING="10">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
1 2
我們可以利用CELLSPACING屬性設定表格欄位格線之間的距離。一般而言內定值爲2，不過我通常習慣設爲 0 。
原始碼呈現結果
<TABLE BORDER="1" CELLSPACING="5">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
1 2

zhi 發表於 14:56 | 閱讀全文 | 評論( 0 )|引用(trackback 0 )

背景標籤 - 2004-04-24 14:56

背景標籤

【背景標籤】

說穿了，背景標籤只有<BODY>這個標籤，其餘的效果，只要加上一些簡單的屬性便可做到。

使用方法：<body bgcolor="#ffffff" background="bg.jpg">

標籤解說：這個標籤其實應該老早就要講了，畢竟它是構成網頁不可或缺的基本要素之一（哎哎哎...現在放馬後炮有什麼用！）。我們背景顏色或圖片的設定以及連結字體的顏色，通通都放在<body>這標籤裏面。我就其屬性來一一解說：

背景顏色

用法：<body bgcolor="顏色碼">
設定背景顏色。有人會說：‘我已經設定了背景圖片，那背景顏色還有用嗎？’當然有用！當使用者連結到貴站時，若背景圖案還沒傳輸完之前（有的背景圖蠻大的），就會先顯現背景顏色，您說，是不是比一片灰灰的好看多了呢！

原始碼

這裏是本文區

</body>
</html>

呈現結果

按下此處觀看結果

背景圖案

用法：<body background="圖檔名稱、路徑">
g設定背景圖案。圖檔可以是jpg或gif格式的圖檔，我建議：圖檔不要太大，否則網頁載入會蠻慢的。

原始碼

這裏是本文區

</body>
</html>

呈現結果

按下此處觀看結果

【內文、連結文字顏色設定】

使用方法：<body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000>

標籤解說：用字體標籤中的顏色屬性，可以設定文字的顏色，不過，卻沒有提到文字的顏色內定值該如何修改，這個<body>標籤中，便有設定內文、連結等文字的顏色內定值功能。用法如下：

內文顏色

用法：<body text="顏色碼">
設定一般文字顏色，也就是說，若沒有特別去設定文字顏色的話，瀏覽器就會自動顯現您所設定的顏色。

原始碼

這裏是本文區

</body>
</html>

呈現結果

按下此處觀看結果

連結顏色

用法：<body link="顏色碼">
設定“連結”的顏色。只要是有連結的地方就會出現你指定的顏色，當然，如果按下連結後，那又會變成另一個顏色了，這底下會說明。

原始碼

</body>
</html>

呈現結果

按下此處觀看結果（設定連結爲橘色）

連結時顏色

用法：<body alink="顏色碼">
設定“按下連結”的顏色，也就是當您滑鼠按下那連結的瞬間所呈現的顏色。

原始碼

<a href="index.htm">連結中文字</a>

</body>
</html>

呈現結果

按下此處觀看結果（滑鼠點下連結瞬間纔會出現我們設定的淺藍色）

已連結顏色

用法：<body vlink="顏色碼">
設定“按下鏈結後”的顏色，也就是如果該連結已經有被按過了，那麼就會呈現的顏色。如此的做法，是要讓使用者容易識別到底哪些連結有去過了，哪些沒去過。

原始碼

</body>
</html>

呈現結果

按下此處觀看結果（設定已執行過的連結以紅色顯示）

zhi 發表於 14:56 | 閱讀全文 | 評論( 0 )|引用(trackback 0 )

連結標籤 - 2004-04-24 14:56

連結標籤

【WWW連結標籤基本概念】

連結基本概念：一般而言，所謂連結就是，在網頁中有些字會有特別的顏色，而且字的底下會有條線，當遊標移到那些字上時，會變成手指形狀，按下去，則會連到別的文章或網站，就像這樣（以上這段是給超級新手看的...）。
扯到連結，最基本來看有‘內部連結’及‘外部連結’，所謂‘內部連結’就是自己網站間網頁的連結，至於外部連結我們稍後再來討論。
要了解內部連結，首先必須先了解一下這兩種東西，一個是‘相對路徑’，一個是‘絕對路徑’。
現在假設一個情形：我們在自己的電腦裏設計網頁，所有網頁相關的檔案我們通通放在 c:/www 裏面，現在假設 c:/www 裏面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 這四個檔案。ok！
現在我們想在 index.htm 裏面設一個連結，能夠按一下就連到 text1.htm，那我們該怎麼做呢？基本上，有兩中方式可以做到，在 index.htm 裏面加上下面任一敘述：
<a href="/c|/www/text1.htm"> 這就是‘絕對路徑’
<a href="text1.htm"> 這就是‘相對路徑’
瞧出什麼端倪了沒有？嗯嗯....沒錯，‘絕對路徑’要給電腦一個非常詳盡的位置，讓電腦尋着這路徑去找到檔案。而‘相對路徑’就簡單多啦！如果沒有特別指定，他就會直接在 index.htm 的所在目錄下找，也就是在 c:/www 底下去找text1.htm。
如果說，今天我們將 c:/www 裏所有的檔案都上傳到網路上的網頁伺服器（總不能做好了只給自己看吧！），且該伺服器是別人的電腦，而非你自己架設的主機，那麼問題就來了！你猜，哪一種連結會出問題？呵呵...答案是‘絕對路徑’，您猜對了嗎？
爲什麼說‘絕對路徑’會出問題呢？因爲，當您將檔案上傳到網路上時，您的整個網頁目錄架構一定會變，到時候，電腦可能找不到 c:/ （尤其是unix系列的主機）更可能找不到 www 這目錄（有些會規定要放在特定的目錄下才能顯示網頁），所以說，沒事的話，儘量用‘相對路徑’來作連結吧！好寫又不容易出錯。
另外一個情形是：爲了整理方便，有些網友喜歡將圖檔通通放到同一個目錄下，如：c:/www/gif/ 底下放進了p1.gif 、 p2.gif兩個圖，而index.htm 、 text1.htm 依舊在 c:/www 底下。現在我們想在 index.htm 下設個連結到 p1.gif 這圖檔（連結不限於只能連html檔，圖檔、文字檔均可），那我們又該如何來使用‘相對路徑’呢？他們又不在‘同一個目錄’下...？
<a href="/c|/www/gif/p1.gif"> 這是‘絕對路徑’的寫法
<a href="gif/p1.gif"> 這是‘相對路徑’的寫法
如何？不難吧！（只是字有點多，看到腦子發脹）

總整理：很亂嗎？嗯...看看這表，或許會清楚些。

相對路徑表示方式	代表連結位置
<a href="text1.htm">	text1.htm在目前的目錄中（就例子而言，就是在c:/www中）
<a href="docs/text1.htm">	text1.htm在名爲docs的次目錄中（就本例而言，就是在c:/www/docs中）
<a href="../text1.htm">	text1.htm在目前目錄的上一層目錄中（就本例而言，就是在c:/底下了）

【網頁內部的連結】

使用方法：
1. 先在欲連結處作記號：<a name="here1">這裏是你想連結的點</a>
2. 設定連結：<a href="#here1">連結</a>
標籤解說：有時候，當某頁的內容很多時，我們可以利用網頁的內部連結，來使使用者快速的找到資料。其原理不過是：在欲連結處做個記號（網頁的任何地方都可以喔！），然後，連結時就尋這記號，就可以快速找到資料。很簡單吧！

使用範例：

範例	第一步驟	第二步驟
www連結標籤基本概念	<a name="m1">欲連結的位置</a>	<a href="#m1">www連結標籤基本概念</a>
網頁內部的連結	<a name="m2">欲連結的位置</a>	<a href="#m2">網頁內部的連結</a>
網頁外部的連結	<a name="m3">欲連結的位置</a>	<a href="#m3">網頁外部的連結</a>

【網頁外部的連結】

標籤解說：連結到外面去，可以擴充您網站的實用性及充實性，也正因這功能，才造就了www五彩繽紛的世界。由於網路上的服務五花八門，所以不同的服務有不同的連結方法，我將之整理在下表。

使用範例：

網站連結	好站	<a href="http://sunspot-design.com">好站</a>
電子郵件連結	寫情書給我	<a href="mailto:[email protected]">寫情書給我</a>
ftp連結	下載檔案	<a href="ftp://ftp.ntu.edu.tw">下載檔案</a>
news連結	seednet news服務	<a href="news:news.seed.net.tw">seednet news服務</a>
gopher連結	seednet gopher服務	<a href="gopher://gopher.seed.net.tw/">seednet gopher服務</a>
bbs連結	seednet gopher服務	<a href="telnet://bbs.seed.net.tw/">seednet bbs服務</a>

【連結標籤的參數】

使用方法：在連結後面加入 target=_參數
標籤解說：連結的參數並不多，常見的大概就屬 target 這參數了，target 的意思是‘目標’，也就是網頁連結的指向目標，這參數在框窗（frame）裏尤爲重要！
使用範例：
- target=框窗名稱：
  這在‘框架標籤’中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名稱，因此，我們可以利用此標籤，來指定連結的內容顯示到哪一個框窗中。
- target=_blank：
  將連結的畫面內容，開在新的瀏覽視窗中。
- target=_parent：
  將連結的畫面內容，當成文件的上一個畫面。
- target=_self：
  將連結的畫面內容，顯示在目前的視窗中。
- target=_top：
  這個參數可以解決新連結的畫面內容，被舊框窗包圍的困擾，使用這參數，會將整個畫面重新顯示成連結的畫面內容。

zhi 發表於 14:56 | 閱讀全文 | 評論( 0 )|引用(trackback 0 )

網頁架構 - 2004-04-24 14:56

網頁架構

<HTML>
　<HEAD>
　　<TITLE>網頁製作教學</TITLE>
　　<Meta>
　</HEAD>
　<BODY>
　　BODY之間則爲主要語法所在，也是網頁的主要呈現部分。
　</BODY>
</HTML>

【標籤解說】

以上看到的就是一篇最簡單架構的網頁。沒錯，網頁其實就是一堆標籤（所謂標籤就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。

簡單而言，通常一份完整的網頁包含了二個部份：擡頭（HEAD）、文件本體（BODY）。也就是各位在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。

在擡頭的部份<HEAD></HEAD>中，有另一組標籤<TITLE></TITLE>。打在<TITLE></TITLE>這裏面的文字會出現在瀏覽器視窗最上頭藍色部份裏，當作一篇網頁的主題。

您可能會發現，爲什麼我一直沒提到<HTML></HTML>這一組標籤，嗯！因爲它可有可無。這一組標籤是告訴瀏覽器說：我是一份HTML文件喔！也就是說它是一個網頁的格式啦！通常都包在網頁的最上下兩端，將所有的原始碼都包起來。

zhi 發表於 14:56 | 閱讀全文 | 評論( 0 )|引用(trackback 0 )

文字標籤 - 2004-04-24 14:56

文字標籤

【文字字型設定】

使用方法：<font face="字型名稱">文字</font>
標籤解說：網頁上也可以使用字型喔！唯一的一個限制是：對方也要有該字型！否則看到的仍然還是宋體。另外要說明的是，這個標籤並無法保證在每個瀏覽器上都能正常的顯現，不過這並沒有關係，看不到特殊的字型時，瀏覽器仍會以宋體來顯示，所以不用怕會一團亂！
另外，如果您的網頁中有加上這一行敘述<meta http-equiv="content-type" content="text/html;charset=big5">（指定網頁的語言格式，以後我會解釋），那麼，netscape可以正確顯示出中文，但英文無反應。若沒有加該行，那麼英文會正確顯示，但中文卻仍是宋體。至於 ie 系列，均能正常顯示。
使用範例：
原始碼呈現結果
<font face="楷體_GB2312">楷體_GB2312</font> 楷體_GB2312
<font face="華康儷中黑">華康儷中黑</font> 華康儷中黑

【特殊字元】

使用方法： 
標籤解說：很多特殊的符號是需要特別處理的，比如說" < "、" > "這兩個符號若想要呈現在網頁上是沒有辦法直接打" < "的，要呈現" < "必須輸入編碼表示法：“<”，常用的如下：
使用範例：
原始碼呈現結果
  ( 代表一個不斷行空白)
< <
> >
& &
" "

【設定文字內定值大小】

使用方法：<basefont size="1~7">
標籤解說：這個標籤可以改變文字大小的內定值，直接加在<body>標籤之後就行了。一般而言，若是沒有特別設定，文字大小內定值預定值爲3。

zhi 發表於 14:56 | 閱讀全文 | 評論( 0 )|引用(trackback 0 )

字體標籤 - 2004-04-24 14:56

字體標籤

【標題標籤】

使用方法：<h1>標題內容</h1>
標籤解說：標題的大小一共有六種，兩個標籤一組，也就是從<h1>到<h6>，<h1>最大，<h6>最小。使用標題標籤時，該標籤會將字體變成粗體字，並且會自成一行。
使用範例：
原始碼呈現結果
<h1>標題一</h1>
標題一
<h2>標題二</h2>
標題二
<h3>標題三</h3>
標題三
<h4>標題四</h4>
標題四
<h5>標題五</h5>
標題五
<h6>標題六</h6>
標題六

【設定字體大小標籤】

使用方法：<font size=3>文字內容</font>
標籤解說：標題的大小一共有七種，也就是<font size=1>（最小）到<font size=7>（最大），另外，還有一種寫法：<font size=+1>文字內容</font>，其意思就是說：比預設字大一級。當然也可以 font size=+2（比預設字大二級），或是 font size=-1（比預設字小一級），以一般而言，預設字體多爲 3。

使用範例：

原始碼	呈現結果
<font size=1>字體一</font> 或是 <font size=-2>字體一</font>	字體一
<font size=2>字體二</font> 或是 <font size=-1>字體二</font>	字體二
<font size=3>字體三</font> 或是 <font size=+0>字體三</font>	字體三
<font size=4>字體四</font> 或是 <font size=+1>字體四</font>	字體四
<font size=5>字體五</font> 或是 <font size=+2>字體五</font>	字體五
<font size=6>字體六</font> 或是 <font size=+3>字體六</font>	字體六
<font size=6>字體七</font> 或是 <font size=+4>字體七</font>	字體七

【字型變化標籤】

使用方法：<b>文字</b>
標籤解說：在文字標籤裏，對於文字的格式也有相當多的變化，如粗體、斜體...等，此外，也定義了一些現成的格式供編者使用，如‘強調’、‘原始碼’...等，當然，這只是方便您參考用，並無強迫說遇到原始碼就要加上‘原始碼’的標籤。

使用範例：

原始碼	呈現結果
<b>粗體</b>	粗體
<i>斜體</i>	斜體
<u>底線</u>	底線
<sup>上標</sup>	^上標
<sub>下標</sub>	_下標
<tt>打字機</tt>	`打字機`
<blink>閃爍</blink>（ie沒效果）	閃爍
<em>強調</em>	強調
<strong>加強</strong>	加強
<samp>範例</samp>	`範例`
<code>原始碼</code>	`原始碼`
<var>變數</var>	`變數`
<dfn>定義</dfn>	定義
<cite>引用</cite>	引用
<address>所在地址</address>	所在地址

【文字顏色設定】

使用方法：<font color="#fefecb">文字顏色</font>
標籤解說：文字也可以設定顏色喔！至於顏色有哪些....這....哪天我心血來潮再來做個色彩對應表吧！

使用範例：

原始碼	呈現結果
<font color="#ff0000">紅</font>	紅色的字喔！
<font color="#ff8000">橙</font>	橙色的字喔！
<font color="#ffff00">黃</font>	黃色的字喔！
<font color="#00ff00">綠</font>	綠色的字喔！
<font color="#0080ff">藍</font>	藍色的字喔！
<font color="#0000a0">靛</font>	靛色的字喔！
<font color="#8000ff">紫</font>	紫色的字喔！
<font color="#000000">黑</font>	黑色的字喔！
<font color="#c0c0c0">灰</font>	灰色的字喔！

zhi 發表於 14:56 | 閱讀全文 | 評論( 0 )|引用(trackback 0 )

表單標籤 - 2004-04-24 14:56

表單標籤

【表單的用途】

對於一般的網頁設計初學者而言，表單功能其實並不常用，因爲表單通常必須配合着CGI、JAVA Script程式或是ASP程式來運作，不然表單單獨存在的意義並不大。不過，一旦有機會將表單運用到網頁中時，您的網頁將擺脫單向呈現，而開始邁入和使用者互動的階段喔！

本單元純粹以介紹各式表單爲主，至於一些CGI或ASP觀念在此我就不提出了，因爲提供零碎的觀念，倒不如去看看專門介紹CGI的書籍來的妥當。

【各種輸入類型】

文字輸入列：每個表單之所以會有不同的類型，原因就在於TYPE="表單類型"設定的不同而已，我們就先來看看第一個類型：文字輸入列。文字輸入列的形態就是TYPE="TEXT，其使用方法如下：
呈現結果
姓名：
原始碼 <FORM>
姓名：<INPUT TYPE="TEXT" NAME="NAME" SIZE="20">
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- SIZE="數值"，是設定此一欄位顯現的寬度。
- VALUE="預設內容"，是設定此一欄位的預設內容。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- SIZE="數值"，是設定此一欄位顯現的寬度。
- VALUE="預設內容"，是設定此一欄位的預設內容。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。
單選核取表單：利用TYPE="RADIO"就會產生單選核取表單，單選核取表單通常是好幾個選項一起擺出來供使用者點選，一次只能從中選一個，故爲單選核取表單。
呈現結果
性別：男女
原始碼 <FORM>
性別：
男 <INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY">
女 <INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL">
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- VALUE="內容"，是設定此一欄位的內容、值或是意義。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- CHECKED，是設定此一欄位爲預設選取值。
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- VALUE="內容"，是設定此一欄位的內容、值或是意義。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- CHECKED，是設定此一欄位爲預設選取值。
複選核取表單：利用TYPE=" CHECKBOX "就會產生複選核取表單，複選核取表單通常是好幾個選項一起擺出來供使用者點選，一次可以同時選好幾個，故爲複選核取表單。
呈現結果
喜好：電影看書
原始碼 <FORM>
喜好：
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">電影
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看書
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- VALUE="內容"，是設定此一欄位的內容、值或是意義。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- CHECKED，是設定此一欄位爲預設選取值。
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- VALUE="內容"，是設定此一欄位的內容、值或是意義。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- CHECKED，是設定此一欄位爲預設選取值。
密碼錶單：利用TYPE=" PASSWORD "就會產生一個密碼錶單，密碼錶單和文字輸入表單長得幾乎一樣，差別就在於密碼錶單在輸入時全部會以星號來取代輸入的文字，以防他人偷窺。
呈現結果
請輸入密碼：
原始碼 <FORM>
請輸入密碼：<INPUT TYPE="PASSWORD" NAME="INPUT">
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- SIZE="數值"，是設定此一欄位顯現的寬度。
- VALUE="預設內容"，是設定此一欄位的預設內容，不過呈現出來仍是星號。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- SIZE="數值"，是設定此一欄位顯現的寬度。
- VALUE="預設內容"，是設定此一欄位的預設內容，不過呈現出來仍是星號。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。
送出按鈕：通常我們表單填完之後，都會有一個送出按鈕以及清除重寫的按鈕，分別是利用TYPE=" SUBMIT "及TYPE=" RESET "來產生，相當的簡單易用。
呈現結果

原始碼 <FORM>
<INPUT TYPE="SUBMIT" VALUE="送出資料">
<INPUT TYPE="RESET" VALUE="重新填寫">
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一按鈕的名稱。
- VALUE="文字"，是設定此一按鈕上要呈現的文字，若是沒有設定，瀏覽器也會自動替您加上“送出查詢”、“重設”等字樣。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- NAME="名稱"，是設定此一按鈕的名稱。
- VALUE="文字"，是設定此一按鈕上要呈現的文字，若是沒有設定，瀏覽器也會自動替您加上“送出查詢”、“重設”等字樣。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
按鈕元件：表單中或是JAVA SCRIPT常會用到按鈕來作一些效果，因此，我們可以利用TYPE=" BUTTON "來產生一個按鈕，相當簡單。
呈現結果
請按下按鈕：
原始碼 <FORM>
請按下按鈕：<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意">
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一按鈕的名稱。
- VALUE="文字"，是設定此一按鈕上要呈現的文字。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- NAME="名稱"，是設定此一按鈕的名稱。
- VALUE="文字"，是設定此一按鈕上要呈現的文字。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
隱藏欄位：表單中有時有些東西因爲某些因素，不想讓使用者看到，但因程式需要卻又不得不存在，此時，我們就可以利用TYPE=" HIDDEN "來產生一個隱藏的欄位。
呈現結果
隱藏欄位：
原始碼 <FORM>
隱藏欄位：<INPUT TYPE="HIDDEN" NAME="NOSEE" VALUE="看不到">
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱。
- VALUE="文字"，是設定此一欄位的值、文字或意義。
- NAME="名稱"，是設定此一欄位的名稱。
- VALUE="文字"，是設定此一欄位的值、文字或意義。

【大量文字輸入元件】

有時候我們會希望讓使用者輸入比較大量的文字，此時，文字輸入列就顯得不敷使用，因此我們就可以利用<TEXTAREA></TEXTAREA>來產生一個可以輸入大量文字的元件，夾在兩個標籤中的文字會出現在框框中，可作爲預設文字。
呈現結果
請輸入您的意見：

原始碼 <FORM>
請輸入您的意見：<BR>
<TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA>
</FORM>
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱。
- WRAP="設定值"，是設定此一欄位的換行模式。設定值有三種：OFF（輸入文字不會自動換行）、VIRTUAL（輸入文字在螢幕上會自動換行，不過若是使用者沒有自行按下ENTER換行，送出資料時，也視爲沒有換行）、PHYSICAL（輸入文字會自動換行，送出資料時，會將螢幕上的自動換行，視爲換行效果送出）。
- COLS="數值"，是設定此一欄位的行數（橫向字數）。
- ROWS="數值"，是設定此一欄位的列數（垂直字數）。
- NAME="名稱"，是設定此一欄位的名稱。
- WRAP="設定值"，是設定此一欄位的換行模式。設定值有三種：OFF（輸入文字不會自動換行）、VIRTUAL（輸入文字在螢幕上會自動換行，不過若是使用者沒有自行按下ENTER換行，送出資料時，也視爲沒有換行）、PHYSICAL（輸入文字會自動換行，送出資料時，會將螢幕上的自動換行，視爲換行效果送出）。
- COLS="數值"，是設定此一欄位的行數（橫向字數）。
- ROWS="數值"，是設定此一欄位的列數（垂直字數）。

【下拉式選單】

下拉式選單令整個網頁看起來有很專業的感覺，我們只要利用<SELECT NAME="名稱">便可以產生一個下拉式選單，另外，還需要配合<OPTION>標籤來產生選項，這樣纔算完整喔！

呈現結果	您喜歡看書嗎？：
原始碼	<FORM> 您喜歡看書嗎？： <SELECT NAME="LIKE"> <OPTION VALUE="非常喜歡">非常喜歡 <OPTION VALUE="還算喜歡">還算喜歡 <OPTION VALUE="不太喜歡">不太喜歡 <OPTION VALUE="非常討厭">非常討厭 </SELECT> </FORM>

其有下列可設定之屬性：

SIZE="數值"，是設定此一欄位的大小，預設值爲1，若是您的選項有四個，然後您將SIZE設成4，那麼，下拉式選單便會變成選項方塊，將四個選項一起呈現在方塊中。
MULTIPLE，是設定此一欄位爲複選，可以一次選好幾個選項。

SIZE="數值"，是設定此一欄位的大小，預設值爲1，若是您的選項有四個，然後您將SIZE設成4，那麼，下拉式選單便會變成選項方塊，將四個選項一起呈現在方塊中。
MULTIPLE，是設定此一欄位爲複選，可以一次選好幾個選項。

zhi 發表於 14:56 | 閱讀全文 | 評論( 0 )|引用(trackback 0 )

序列標籤 - 2004-04-24 14:56

序列標籤

【無序標籤】

序列標籤基本上可分爲兩種，一種是“無序條列”，一種是“有序條列”。所謂“無序條列”當然就是意指各條列間並無順序關係，純粹只是利用條列式方法來呈現資料而已，此種無序標籤，在各條列前面均有一符號以示區隔。至於“有序條列”就是指各條列之間是有順序的，從1、2、3…一直延伸下去。
我們先來看看“無序列表標籤”如何使用：
原始碼呈現結果
<UL>
<LI>姓名：傑克升
<LI>生日：1974/11/21
<LI>星座：天蠍座
</UL>
姓名：傑克升
生日：1974/11/21
星座：天蠍座
其中<UL>標籤即爲“無序列表標籤”，每增加一列內容，就必須加一個<LI>。
前面的符號一定是要圓形的嗎？不，我們可以加入TYPE="形狀名稱"屬性來改變其符號形狀，一共有三個選擇：DISK（實心圓）、SQUARE（小正方形）、CIRCLE（空心圓）三種（由於本頁使用CSS故僅於Netscape看得出效果。）：
原始碼呈現結果
<UL TYPE="CIRCLE">
<LI>姓名：傑克升
<LI>生日：1974/11/21
<LI>星座：天蠍座
</UL>
姓名：傑克升凱
生日：1974/11/21
星座：天蠍座

【有序標籤】

接下來，我們來看看“有序列表標籤”如何使用：
原始碼呈現結果
<OL>
<LI>姓名：傑克升
<LI>生日：1974/11/21
<LI>星座：天蠍座
</OL>
姓名：傑克升
生日：1974/11/21
星座：天蠍座
其中<OL>標籤即爲“有序列表標籤”，每增加一列內容，就必須加一個<LI>。
和無序列表標籤一樣，我們也可以選擇不同的符號來顯示順序，一樣是用TYPE屬性來作更改，一更有五種符號：1（數字）、A（大寫英文字母）、a（小寫英文字母）、I（大寫羅馬字母）、i（小寫羅馬字母）等五種：
原始碼呈現結果
<OL TYPE="A">
<LI>姓名：傑克升
<LI>生日：1974/11/21
<LI>星座：天蠍座
</OL>
姓名：傑克升
生日：1974/11/21
星座：天蠍座
另外，我們亦可指定序列起始的數目，其方法如下：
原始碼呈現結果
<OL START="8">
<LI>姓名：傑克升
<LI>生日：1974/11/21
<LI>星座：天蠍座
</OL>
姓名：傑克升
生日：1974/11/21
星座：天蠍座

【定義列表標籤】

接下來我們要說明的這個標籤，是“定義列表標籤”也是屬於序列標籤之一。我們先來舉個例子，我們常常會在文章中看見這樣的格式：

CSS（Cascading style sheet）

CSS是由W3C於1996年12月所公佈的一項新技術，什麼叫做Cascading style sheet？簡單說來他是一種具有階層性的形式設定，能夠讓網頁設計者在設計網頁時，對於網頁上的任何物件均有更佳的操控性…

網頁裏也有可以做到這種效果的標籤喔！現在要來跟各位說的就是這個標籤。咱們先來看看這標籤的用法：

我們先來看看“定義列表標籤”如何使用：
原始碼呈現結果
<DL>
<DT>小標題
<DD>標題的內容說明
</DL>
小標題

zhi 發表於 14:56 | 閱讀全文 | 評論( 0 )|引用(trackback 0 )

框架標籤 - 2004-04-24 14:56

框架標籤

【框架的基本概念】

首先，各位先看看右手邊這張圖，我將利用這張圖來作解說，這樣子，講起來可能會清楚一點。 OK！我們可以看見，右邊的這個視窗，一共分爲 1 、 2 、 3 三個框架，每一個框架，各有其顯示的內容分別是a.htm、b.htm、c.htm三個檔案。然而左下角的那個 index.htm 是做什麼用的呢？
原來，左下角的這個檔案 index.htm，就是要告訴電腦，我們要將畫面分割成這樣，也就是說，所有Frame的標籤，其實都只擺在 index.htm 這個檔案裏。（當然，不是檔名一定要叫做 index.htm 取其他檔名也是可以的。）
這樣明白了嗎？總之，您要分割幾個框框，就一定會有幾個對應的html檔案（假如您要分割100個框框，就要有100個html檔就對了。），另外，還會多一個檔案是來告訴電腦要如何分割的。（也就是例中的 index.htm 檔啦！）

【開始分割】

別急、別急，分割視窗可是一門學問，要分割也是要一步一步來的。看看剛剛那例子，想像畫面是一個蛋糕，你要怎麼割，才能割成那樣呢？
原始碼呈現結果
<HTML>
<HEAD>
<TITLE>框窗實作</TITLE>
</HEAD>
</HTML>
各位會發現，奇怪，在上面的語法中，怎麼都沒見到<BODY></BODY>熟悉的身影？呵呵...沒錯，它已經被待會兒要加進去的<FRAMESET></FRAMESET>標籤給取代了！也就是說，如果我們要分割畫面，就要先用<FRAMESET>標籤告訴電腦說：‘喂！我要開始分割了！’此時，<BODY>是派不上用場的，所以躲到一旁涼快去了！

各位會發現，奇怪，在上面的語法中，怎麼都沒見到<BODY></BODY>熟悉的身影？呵呵...沒錯，它已經被待會兒要加進去的<FRAMESET></FRAMESET>標籤給取代了！也就是說，如果我們要分割畫面，就要先用<FRAMESET>標籤告訴電腦說：‘喂！我要開始分割了！’此時，<BODY>是派不上用場的，所以躲到一旁涼快去了！
現在開始動手割割看囉！我們先將畫面分成左右兩邊（左邊就是框窗 1 了，右邊就暫定爲 2 等一下還要分割呢！），如下圖：
原始碼呈現結果
<HTML>
<HEAD>
<TITLE>框窗實作</TITLE>
</HEAD>
<FRAMESET COLS="120,*" >
　<FRAME SRC="a.htm" NAME="1">
　<FRAME SRC="b.htm" NAME="2">
</FRAMESET>
</HTML>
在<FRAMESET>中，我們要告訴電腦到底是要左右分（COLS）？還是上下分（ROWS）。一開始我們是左右分，所以我們寫成<FRAMESET COLS="120,*" >。COLS="120,*" 就是說，左邊那一欄強制定爲 120點，右邊則隨視窗大小而變。除了直接寫點數外，我們亦可用百分比來表示，例如COLS="20%,80%"也是可以的。

在<FRAMESET>中，我們要告訴電腦到底是要左右分（COLS）？還是上下分（ROWS）。一開始我們是左右分，所以我們寫成<FRAMESET COLS="120,*" >。COLS="120,*" 就是說，左邊那一欄強制定爲 120點，右邊則隨視窗大小而變。除了直接寫點數外，我們亦可用百分比來表示，例如COLS="20%,80%"也是可以的。

然後，再將右邊的框窗再割成上下兩個畫面（也就是框窗 2 和 3 了）。如下圖：

原始碼

呈現結果

看見了沒？原本的<FRAME SRC="b.htm" NAME="2">（在第 3 點的語法中）被另一組<FRAMESET ROWS="100,*" >所取代了！所以要注意喔！第二組<FRAMESET ROWS="100,*" >是被第一組<FRAMESET COLS="120,*" >所包圍起來的喔！（亂七八糟了對不對？）
呵呵...不知不覺就大功告成了，其實只要將最後完成的那些語法存成 index.htm，然後再準備三個檔 a.htm 、b.htm 、c.htm那麼就完工囉！當然，這是一個最陽春的分割法，我會再將一些進階的標籤在底下一一說明。

看見了沒？原本的<FRAME SRC="b.htm" NAME="2">（在第 3 點的語法中）被另一組<FRAMESET ROWS="100,*" >所取代了！所以要注意喔！第二組<FRAMESET ROWS="100,*" >是被第一組<FRAMESET COLS="120,*" >所包圍起來的喔！（亂七八糟了對不對？）
呵呵...不知不覺就大功告成了，其實只要將最後完成的那些語法存成 index.htm，然後再準備三個檔 a.htm 、b.htm 、c.htm那麼就完工囉！當然，這是一個最陽春的分割法，我會再將一些進階的標籤在底下一一說明。

【其他標籤參數說明】

<FRAMESET COLS="120,*" frameborder=0 framespacing=5>
COLS="120," 就是垂直切割畫面啦！你可以一次切成左右兩個畫面，當然也可以切成三個，很簡單隻要寫成 COLS="30,,50" （數字隨便您自己調整啦！），依此類推，四個以上當然就是四組數字啦！ ROWS="120,*" 就是橫向切割畫面，也就是將畫面上下分開，切法同上。 frameborder=0 設定框架的邊框，其值只有 0 和 1 ， 0 就是不要邊框， 1 就是要顯示邊框。邊框是無法調整粗細的。 framespacing=5 表示框架與框架間的保留空白的距離，以免看起來太擠。
<FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize marginhight=2 marginwidth=2>
SRC="a.htm" 設定此框架中要顯示的網頁名稱，每個框架一定要對應一個網頁，否則就會產生錯誤，這裏就是要您填入對應網頁的名稱。（如果該網頁在不同目錄，記得路徑要寫清楚） NAME="1" 設定這個框架的名稱，這樣才能指定框架來作連結，所以一定要設定喔！當然名稱隨你高興取名。 frameborder=0 設定框架的邊框，其值只有 0 和 1 ， 0 就是不要邊框， 1 就是要顯示邊框。邊框是無法調整粗細的。 scrolling="no" 設定是否要顯示卷軸，YES是要顯示卷軸，NO是無論如何都不要顯示，AUTO是視情況顯示。 noresize 設定不讓使用者可以改變這個框框的大小，如果沒有設定這個參數，使用者可以很容易的拉動框架，改變其大小。 marginhight=2 表示框架高度部份邊緣所保留的空間。 marginwidth=2 表示框架寬度部份邊緣所保留的空間。

【相關用法】

◆ <noframe>

使用方法：<noframe>請換有支援Frame功能的瀏覽器</noframe>
標籤解說：有些瀏覽器較爲老舊，無法顯示Frame的功能，因此，就要使用此標籤，讓這些網友知道，該換換瀏覽器了。或者，你也可以在這標籤中，擺上沒有Frame語法的網頁標籤，那麼，沒有支援Frame功能的瀏覽器，便會自動顯示沒有Frame語法的網頁。

◆ target=框窗名稱

使用方法：<A HREF="d1-1.htm" target=3>顯示內容</A>
標籤解說：常常有一個情況是，我想在框窗 1 的地方按下連結，但是希望他的內容出現在框窗 3 中（請參照上面那個圖），那應該如何寫呢？就像上面加個 target=框窗名稱就行啦！

◆ target=_top

使用方法：<A HREF="http://www.kimo.com" target=_top>奇摩站</A>
標籤解說：有時候，在框窗裏會連結到別的站，卻發現，新連結的這個站，竟然被框窗包住了，不但難看，而且可能會吃上官司說！所以，這時候你必需加入 target=_top這個參數，那麼，這個新連到的網站，就會重新佔據整個螢幕啦！

zhi 發表於 14:56 | 閱讀全文 | 評論( 0 )|引用(trackback 0 )

排版標籤 - 2004-04-24 14:56

排版標籤

【文字置左、置中、置右】

使用方法：老實說，剛剛我們學過的分段標籤<p>再加上一些簡單的屬性設定，就可以讓其整個文字段落置左、置中或置右了，就如下表所示：
原始碼呈現結果
<p align="left">文字靠左</p>
文字靠左
<p align="center">文字置中</p>
文字置中
<p align="right">文字靠右</p>
文字靠右
標籤解說：嗯！祕訣就在於“align=對齊位置”而已啦！align是分段標籤<p>的屬性之一，這個屬性將來會常常在不同標籤中看到，它的功能是專門在設定“水平對齊位置”，其常見的設定值有三個，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。

【置中標籤】

使用方法：<center>這是置中</center>
標籤解說：這個標籤是最常用到的標籤了，除了文字，對於圖片、表格，任何可以顯現在網頁上的東西都可以置中喔！
使用範例：
原始碼呈現結果
<center>這是最中間</center> 這是最中間

【向右縮排標籤】

使用方法：<blockquote>要縮排的文字</blockquote>
標籤解說：利用<blockquote></blockquote>這個標籤可以將其包起來的文字，全部往右縮排。而且加一組標籤，往右縮排一單位，加兩組標籤，往右縮排兩單位，依此類推。
使用範例：
原始碼呈現結果
<blockquote>縮排1單位</blockquote>
縮排1單位
<blockquote><blockquote>縮排2單位</blockquote></blockquote>
縮排2單位

【保存原始格式標籤】

使用方法：<pre>文字內容<pre>
標籤解說：利用<pre></pre>這個標籤可以將其包起來的文字排版、格式，原封不動的呈現出來。算是相當好用的標籤之一。
使用範例：
原始碼呈現結果
<pre>
文　字
　格　式
</pre>
文　字　格　式

zhi 發表於 14:56 | 閱讀全文 | 評論( 0 )|引用(trackback 0 )

截圖軟件全接觸 - 2004-04-08 04:58

最基本的截圖方法——初級使用篇

上面所說的截圖方法，可以說是“最原始”的了，事實上很少人如此截圖的，因爲這樣做既不方便，效率也不高。通常我們還是藉助於專用截圖軟件。

最常見的截圖方式是截取全屏畫面、單個窗口或局部畫面，下面就以HyperSnap-DX爲例，分別介紹一下。

在截取之前，請先打開HyperSnap-DX的菜單“Options”菜單，執行“Activate Hot Keys”命令，激活默認的截圖熱鍵。在接下來的操作中，你會體會到使用熱鍵的好處（如圖1）！

截取全屏畫面

最小化HyperSnap-DX，按下熱鍵［Ctrl+Shift+F］，軟件旋即彈出截圖預覽窗口，當前桌面已經被截取下來了，存盤即可。

截取當前窗口

按下熱鍵［Ctrl+Shift+W］，這時桌面上顯示出一個閃爍的黑色邊框，黑框隨鼠標的移動而移動，將之移至需要截取的窗口中，點擊一下即可。

如果按下熱鍵［Ctrl+Shift+A］，可以快速地截取當前活動窗口，即處於活動狀態的那個窗口。

截取局部畫面

截取局部畫面也稱之爲“區域截圖”，意即截取當前屏幕的部分區域，由你自行定義，因此靈活性很大。按下熱鍵［Ctrl+Shift+R］，這時屏幕上出現一個十字狀的座標，用鼠標拖出起點與終點，然後點擊一下，由起點與終點組成的區域就被截取下來了！

截出“眩”的效果——高級應用篇

截圖也有特效？當然有了！因爲有些效果通過正常途徑是無法截取的，必須使用特殊方法。而衆多的截圖軟件，幾乎每種都有自己的看家本領——獨特的功能。

靜態圖像截取

視頻靜態畫面的截取

大家有沒有這樣的經歷，在播放VCD或DVD時，很想把美麗的鏡頭截取下來欣賞，按下［Print Screen］鍵，得到的是一個黑乎乎的畫面；即便用HyperSnap-DX的熱鍵［Ctrl+Shift+W］截取，結果如出一轍。

其實HyperSnap-DX是完全可以勝任的，不過必須先做準備工作：

打開菜單［Capture］→［Enable Special Capture (DirectX,Glide)...］，在設置對話窗口，選中所有選項，將“Gamma Correction Fact”設置爲“1”，按下［OK］確定（如圖2）。

按下截取熱鍵［Scroll Lock］（注意這個鍵，與普通截圖的熱鍵完全不同！），可以看到，視頻畫面似乎“暫停”了一下，然後你心愛的畫面就出現了。

這裏有一個小技巧，當畫面比較暗時，可將 “Gamma Correction Fact”的設置值提高，然後再截取，這樣截出來的畫面亮一些。

通常的視頻播放軟件如《超解解霸》、《東方影都》、《金山影霸》、《WinDVD》等等，這類軟件自身也提供了截取視頻影像圖片的功能（窗口上的相機狀的按鈕），同樣可以獲得很好的效果，具體的使用方法我們將在A42版介紹。

從程序文件中截圖

我們所熟悉的可執行文件EXE與動態鏈接文件DLL中，都包含有圖片！位圖、圖標和鼠標箭頭一個也不能少。通過SnagIt可以將這些圖片從中提取出來！呵呵，很神奇吧？

打開軟件SnagIt，點擊主界面中的“Image Capture”圖標，依次選擇菜單［Input］→［vanced］→［Program File］，再選取菜單［Output］→［File］。設置完畢，按SnagIt默認的截圖熱鍵［Ctrl+Shift+P］，出現一截取畫面，點擊“Browse...”選擇程序文件，就以SnagIt的程序文件SnagIt32.exe爲例（如圖3），分別點擊“Bitmaps”、“Icons”和“Cursors”標籤，可以看到程序文件中的位圖、圖標與鼠標箭頭已被截取出來了！選中需要截取的圖片，點擊圖中的［Capture］就可以了。

輕鬆截取子菜單或按鈕

我們如果想截取某個菜單下的子菜單或是某個按鈕，一般情況下是截取當前的窗口，然後再剪切。其實有更好的辦法啦。

先看截取子菜單，用的軟件是SnagIt。點擊主界面中的“Image Capture”圖標，再依次點擊菜單［Input］→［Menu］。然後將鼠標移至需要截取的子菜單中，按下熱鍵［Ctrl+Shift+P］就可以了。

再看截取按鈕，用的軟件是HyperSnap-DX。首先將鼠標移至按鈕上，這時按鈕會凸起，表示已選定該按鈕，按下按鈕專用截取熱鍵［Ctrl+Shift+B］，就是這樣輕鬆。

現在你明白截取菜單、按鈕是多麼輕鬆了吧。

同時截取多個畫面區域

這種截圖方式就是將若干個相鄰或不相鄰的區域同時截取下來，這在截取多個連續的子菜單或不相鄰的工具欄時特別有用。

以HyperSnap-DX爲例。打開Word中的某個多級菜單，將鼠標指向其中最低一級的子菜單，按下熱鍵［Ctrl+Shift+M］，子菜單四周出現一個閃爍的黑色邊框，點擊一下鼠標，該子菜單即刻反黑顯示，表明已被選定；同理，依次選定其他的子菜單，全部選定後按下回車鍵，則整個菜單就被截取下來了（如圖4）。

這種截取方式的好處在於我們無需做任何處理，即可將各級菜單一次性截取下來，而且菜單與菜單之間爲空白。若採用其他方式截取，菜單與菜單之間的部分必須要另作處理，不如這種方式來得直接與方便。

若使用SnagIt作多個區域的截圖測試，會發現它提供的功能更強大，因爲它允許你定義截取的範圍，而HyperSnap-DX僅限定於截取窗口與工具欄。打開SnagIt，點擊主界面中的“Image Capture”圖標，然後選擇“Input”菜單中的“Region”與“Multiple Area”。截圖時按下熱鍵［Ctrl+Shift+P］，此時鼠標變爲手狀，在屏幕上拖出一塊區域，該區域以黑色顯示；接着再拖出另一塊區域，選中所有你想截取的區域。最後按右鍵選擇“Finish”，得到的截圖是所有區域的交集（如圖5）。

截取網頁圖片

這是SnagIt的一項獨有的功能，它的作用是可以將網頁中的圖片一次性截取（其實就是下載）完畢，免得一張張地“另存”，相當麻煩。

打開SnagIt，點擊主面板中的“Web Capture”，開啓網頁截圖功能。這一步一定要做，要不然以下的步驟可能繼續不了。打開菜單［Input］→［Fixed Address］→［Properties］，在“Web page address”中輸入目標地址。

接着打開菜單“Output”，選擇“Catalog”，意即將所截圖片將保存至某目錄中，目錄路徑請在［Output］→［Properties］→［Catalog Browser］中指定。

再接下來設置網頁過濾，打開菜單“Filters”中的“Properties”選項，彈出如圖6所示的對話框。

設置完畢後按［OK］鍵確認，繼續按截圖熱鍵［Ctrl+Shift+P］，SnagIt自動連接至該網頁，執行截圖任務。並出現一個下載進度界面，當進度條達到100%時，會出現一個報告窗口“Web Capture Summary”，緊接着便會彈出“SnagIt Capture Preview”窗口，所有已抓圖片的鏈接清單、圖片的格式、詳細的網址路徑等等信息一目瞭然，若有不需要的圖片，將前面的勾去掉（如圖7）。

最後點擊上圖窗口工具欄中的［Finish］按鈕，截取的所有圖片會按照剛纔設定的“Catalog”路徑保存起來。同時SnagIt會自動打開“SnagIt Catalog Browser”瀏覽器，很方便吧？

如果你想從互聯網上搜集圖片或是下載圖片庫，這種截圖方式最合適不過了！

截取DOS窗口

這裏指的是截取Windows環境下DOS程序的界面，可以利用SnagIt來實現。點擊[Image Capture]按鈕，然後選擇[Input]→[Advanced]→[Full-screen DOS]，接着在Windows的DOS模式下執行一個程序，截取時按快捷鍵[Print Screen]就行啦（如圖8）。

動態畫面截取

截取並輸出爲GIF動畫

向大家介紹一個小軟件Gif·gIf·giF，顧名思義，這是與動態圖像格式GIF有關的軟件。它可以將所選區域的動態畫面截取下來並保存爲GIF動畫（如圖9）！

這個軟件幾乎不需要設置就可使用：先點擊［Select Area］按鈕，用鼠標在桌面上選擇截取區域，選定後按下［Start］，軟件倒計時三秒後自動截取。不過，如果指定的區域內沒有動作發生，會自動停止截取。結束時按［Stop］按鈕，這時會顯示所截的動畫幀數與生成文件的大小。最後選擇菜單［File］→［Save］將之保存爲GIF文件就可以了。

此外，軟件提供“Edit”菜單，可截取動畫進行編輯。但是未註冊的版本不能使用該菜單。

這個軟件最大的好處在於可以直接生成GIF文件，且生成的文件較小，便於在網絡上傳輸或直接引用。

截取並輸出爲AVI動畫

截取動態畫面並非高不可攀，常用的截圖軟件SnagIt就提供了這樣的功能。不信？那我們就來看看！

看到SnagIt主面板上的“Video Capture”圖標了嗎？按下去！接着點擊“Input”菜單，選擇“Region”。其實選其他的也行，但選“Region”便於選擇截取動態畫面的區域。按熱鍵［Ctrl+Shift+P］，這時鼠標變成手狀，按住不動，拖出一個選取區域，該區域以紅色線條顯示，鬆開鼠標，即變爲斜線邊框。同時出現如圖10所示的“SnagIt Video Capture”窗口，點擊［Start］開始截取。

在截圖的過程中，斜線邊框變爲純黑邊框，且不停地閃爍，同時SysTray中出現一個閃動的攝像機的圖標，表明正在錄製動態圖像。截取完畢仍舊按［Ctrl+Shift+P］，仍舊出現“SnagIt Video Capture”窗口，不過這次需要按［Stop］停止。此時黑框消失，重新變爲斜線邊框。彈出一個預覽窗口，可以播放所截動畫，滿意的話按［Finish］按鈕存盤，保存的格式爲AVI（如圖10）。

大家知道AVI是一種視頻影像格式，如果你希望在截取的AVI動態文件中添加聲音，可以在截取前點擊SnagIt的“Input”菜單，將“Record Audio”選上即可。

另外還有兩款更強大的動態圖像截取工具可截取生成AVI格式的動畫，且具備編輯功能，它們是HyperCam和Camtasia，。

截取並輸出爲SWF動畫

Flash Cam可以將捕捉到的單獨影像幀連起來成爲一個SWF文件，還可以插入標題文字、錄製旁白聲音、自定義鼠標軌跡，並生成HTML+SWF文件預覽在網頁中的效果！

軟件的安裝自不必多說，運行Flash Cam，出現主界面，軟件採用了嚮導的方式幫助新手。截取前打開菜單［Options］→［Recording Options］，在出現的窗口中，選中全部選項，按［Save］確定（如圖11）。

雙擊界面中的“New Movie”圖標，在彈出的窗口中選擇截取的區域範圍，這裏我們選“640×480”，按［Advanced］可做更多設定。

按下［Next］，背景中出現一個虛框，即剛纔指定的區域範圍，可移動虛框至合適的位置，或者按虛框右下角調節其大小。

點擊虛框中的［Record］按鈕，軟件自動隱藏至系統工具欄中，縮成一個圖標，同時截取任務開始執行，只要當前區域有鼠標活動，都能捕捉下來。

用鼠標單擊系統工具欄中的Flash Cam圖標，結束截取任務，軟件處理後會列出所截取的每一幀，對於不需要的可以刪除，雙擊之可對之進行修改。

這是關鍵的一步，因爲我們可以給幀做註釋或添加鏈接。雙擊某一幀進入到幀修改模式，打開“Insert”菜單，共有四個選項，可以爲當前幀添加文字註釋（Caption）、高亮邊框（Highlight Box）、點擊按鈕（Click Box）和圖像（Image），這些對象可移至幀中的任意位置（如圖12）。

若想添加語音解說，單擊[Frame]→[Audio]命令，出現音頻添加窗口（如圖13），打開已存在的音頻文件或現場錄製語音註解。

修改完所有的幀之後，回到主界面中設置整個影片的屬性，點擊“Movie”菜單下“Preferences”命令，可以對每一幀的文字註釋的顯示速度、鼠標動作速度、鍵盤動作速度、幀與幀之間的過渡速度以及圖像的壓縮率作個性化設置（如圖14）。

設置片頭與片尾：選擇［Movie］→［Start and End］，在彈出的窗口中點擊［Browse］選擇片頭裝載的文件，選中“Close Browse Window”意即放映結束後關閉瀏覽器。

輸出影片，選擇［File］→［Export］，可以看出，Flash Cam提供了多種輸出方式，比如EXE文件，Movie、Word、Outlook、FTP等等。一般選擇“Movie”，最終可生成含有SWF文件的HTML網頁！想預覽一下效果，可以點擊主界面工具欄中的［Preview］按鈕（如圖15）。

如此，一段Flash截圖就可生成了！利用Flash格式截取動態圖像的好處多多，首先是生成的文件小，其次是允許編輯關鍵幀，並且可以加入互動對象，如點擊按鈕與鏈接目標。最後，軟件可自動生成播放控制條，大大方便了瀏覽者！

這麼說罷，如果你想製作出相當棒的Flash格式的教學影片，那麼利用這款影像捕捉工具最合適不過了！

zhi 發表於 04:58 | 閱讀全文 | 評論( 0 )|引用(trackback 0 )

隱藏輸入框的邊框 - 2004-04-07 02:26

CSS實例：橫線樣式的輸入框

2002-09-27· · ··

　　在網上我們常常看見一些註冊表單的輸入框部分並不是我們常見的矩形框，而是一條細線，很多朋友對此很感興趣。其實要實現這樣的效果並不困難，我們只要用一段簡短的CSS代碼控制好表單輸入框的樣式即可。

　　示例如下：

　　請輸入您的用戶名：

　　下面我們就來看看這段實現效果的css代碼。它主要運用了表格邊框的樣式控制，將左、上、右邊框設置爲none，只剩下下邊框即可。

　　樣式表中代碼解釋如下：

　　“BORDER-LEFT-STYLE:none”：隱藏左邊框
　　“BORDER-RIGHT-STYLE: none”：隱藏右邊框
　　“BORDER-TOP-STYLE: none”：隱藏上邊框
　　“BORDER-bottom-STYLE: none”：隱藏下邊框。

下面讓我們一起來看一個應用實例：
　　<html>
　　<head>
　　<title>橫線式輸入框</title>
　　<style type="text/css">
　　
　　</style>
　　
　　</head>
　　<body bgcolor="#FFFFFF" text="#000000">
　　隱藏的邊框的輸入框：
　　<p>用戶名：<input type="text" name="name" class=line>
　　 
　　</p>
　　</body>
　　</html>

標題一

標題二

標題三

標題四

標題五

標題六

python gdal 安裝使用（Windows， python 3.6.8）

小腹不積肉的小竅門

喫不胖的20個小祕密

教你們幾招很妙的生活絕招，很管用的！

吃不胖的20個小祕密

對付身體小毛病27妙招集錄

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結