名词解释㊣傲枫曰写网页前所必须知道的名词_第1页
名词解释㊣傲枫曰写网页前所必须知道的名词_第2页
名词解释㊣傲枫曰写网页前所必须知道的名词_第3页
名词解释㊣傲枫曰写网页前所必须知道的名词_第4页
名词解释㊣傲枫曰写网页前所必须知道的名词_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、Html 手冊 名詞解釋：傲楓曰：寫網頁前所必須知道的名詞。Html：(HyperText Markup Language )，是編寫網頁的基本語法，簡單易懂，用最基本的文字編輯器即可編寫，例如：記事本。傲楓就是用記事本寫出來的。時下還有很多好用的編輯器，讓編寫html文件更加容易。瀏覽器：相當於html翻譯器，將html語法，用生動活潑易懂的方式解讀出來，目前時下最受歡迎的瀏覽器有IE、Netscape。網頁：您所看到的每一頁html文件都叫做網頁。首頁：當你連上一個站時，所出現的第一個畫面就叫做首頁，通常完整檔名應該存成。但有些提供網頁空間的公司，會規定你首頁的檔名，那你就必須存成這個檔名

2、才行(例如default.htm)。標籤：又稱為標記，例如<body>。html文件就是由一群標籤所構成的，瀏覽器會根據你所寫的標籤，解讀出相對應的內容。以下數章就是說明各個標籤的功能與寫法。屬性：有些標籤中還可以加入屬性來做進階的控制，例如 <body text="#000000">，text就是body這個標籤下的一個屬性，是用來控制文字顏色的。以下數章還會介紹更多的屬性。基本架構 傲楓曰：先釐清html文件的骨架基本架構： 千萬不要偷懶喔！以下的程序請大家一步一步的跟我做。、 打開附屬應用程式中的記事本，複製以下藍色的部分，貼在記事本中。(這藍

3、色的部分就是html文件的基本架構)<html><head><title></title></head><body></body></html>、在<title>與</title>之間，輸入簡短的文字。、同樣的，在<body>與</body>之間，輸入簡短的文字。步驟、如下圖所示、接下來要存檔，輸入檔名時，需包括主檔名及副檔名(*.htm或 *.html)。主檔名由你自行選擇，副檔名則必須是 htm或html。另外要注意的是，若是沒有特別規定，首頁的檔

4、名必須是index.htm或index.html。如圖所示(本例中將檔名存為1.htm)、找到你剛存好的檔案，快速用滑鼠左鍵按兩下，OK！你所看到的，就是你的第一個網頁。、如果你沒有網頁編輯軟體，請把上面的基本架構複製下來，然後存成範本，免得每次都要重新打一遍。標籤功能解說： 以下是基本架構的說明<html>.</html> ：這一對配對標籤，是用來表示這份html文件的有效範圍。<title>.</title> ：輸入在這對標籤中的文字，將成為網頁的標題，會出現在瀏覽器最左上方的部分。<body>.</body> ：這一

5、對標籤，是用來標示網頁主要內容(文字或圖片等等)的開始與結束。接下來幾個單元介紹的所有語法都必須放在這對標籤之中！另外，body這個標籤內可加入許多的屬性，啥？你不懂什麼是屬性？你一定是懶得看第一章吧！幫你複習一下: ex. <body text="#000000">其中text就是body中的屬性，記住囉，以後標籤中的屬性就是這樣加的！body中的屬性 ： 言歸正傳，<body>中最常用的屬性如下:text ：用來控制你網頁中，所有文字的顏色，寫法是：<body text="#000000"> 其中 #000000

6、是網頁所使用的顏色代碼，變換這些色碼，可自行設定顏色。bgcolor ：用來控制您網頁中，背景的顏色，寫法是：<body bgcolor="#ffffff">link ：用來控制網頁中，超連結的顏色，寫法是：<body link="#0080ff">alink ：用來指定超連結，在連結中的顏色，寫法是：<body alink="#8000ff">vlink ：用來指定超連結，在連結後的顏色，寫法是：<body vlink="#ff0000">background ：用

7、來控制網頁中，背景的圖案，若你嫌背景每次都用素面的顏色不好看，那就一定要用這個，寫法是：<body background="xxx.jpg">直接將圖檔的位置輸入在引號中，可放置 jpg 或 gif 這兩種格式的圖檔。也許你會有疑問，若是想一次控制很多屬性，豈不是要打一堆body？不用啦！這些屬性可以在一個標籤內完成。只要在屬性與屬性之間空一格即可，以後我們都這樣做。ex. <body text="#000000" bgcolor="#ffffff">範例 ： 廢話不多說，看範例<html><

8、head><title>傲楓小築教學範例</title></head><body text="#3366ff" bgcolor="#000000">請注意看視窗左上角，還有文字與背景的顏色。</body></html>以上藍色的部分，就是由你自己決定啦，試著改變它的內容，再看看有什麼不同。結果呈現排版對齊 傲楓曰：好的排版能夠帶來異想不到的效果。傲楓前言 ： 上一章傲楓曾經介紹過，在<body>與 </body>之間，加進一些簡單的文字，就可以建立一個初

9、具規模的網頁，但也許有人會發現，明明我在記事本中已經排版完成，為什麼寫出來的網頁卻雜亂無章？原因很簡單，因為html語法具有它特定的排版標籤，並不像word一樣，只要按下 enter就可以讓文字換行。接下來就要介紹如何利用標籤來編排網頁。PS. 網頁中的元件(包括文字、圖片、表格等等)，都可以利用以下介紹的標籤來排版！換行 ： html文件並不是按下 enter就會自動換行，它必須使用這些標籤。<p>.</p> ：<p> 代表一個段落的開始，用了它以後，文字會自動換行，</p>則代表此段落結束。<br> ：它可以使文字換到下一行。注意

10、！它並沒有配對標籤。寫法效果第一段<p>第二段</p>第一段第二段換到<br>下一行換到下一行對齊 ： 使用word的人一定知道，可以讓文字靠左靠右，或是置中。html文件也可以做到。<p align=left>.</p><p align=center>.</p> <p align=right>.</p>這分別是靠左、置中與靠右的寫法。沒錯，其實只要用<p>.</p>中 align這個屬性就可以做到，所以除了對齊的功能外，也有上述的換行功能。<center&

11、gt;.</center> ：夾在這組配對標籤中的元件，將會被置中。固定模式 ： <pre>.</pre> ：這組配對標籤好用極了！你可以先用平常在word中的排版方式，將網頁的主要內容搞定，再用這個標籤將主要內容全部包起來，最後在瀏覽器看到的結果，不管是空格、空行、換行或是文字的位置，都會依你原來的格式乖乖排好。縮排 ： <blockquote>.</blockquote> ：使用這個標籤，文字將會向右縮排，相當於打字時按下 Tab鍵的效果。如果使用兩組的話，就會縮排兩單位，依此類推。範例 ： <html><bod

12、y>傲楓，也叫綠痕，又叫做轉轉龜。<p>你總以為愛是討你歡心，</p><p>對你好不過是天經地義，</p><p>卻不曾關心我也有情緒。</p><p>我的付出需要你的熱情回應。<br>是我寵壞了你<br>溺愛驕縱了你的心</p>小痞子，<br>逛大街，<br>沿街被人扁。<p align=left>我走路愛靠左邊</p><p align=center>我走路愛走中間</p><p align=ri

13、ght>我走路愛靠右邊</p><center>我是兄弟象的中間手<br>我是味全龍的中間手<br>我是三商虎的中間手</center><pre>男人不該讓女人流淚至少我盡力而為 相信我</pre><blockquote>縮排一次</blockquote><blockquote><blockquote>縮排兩次</blockquote></blockquote></body></html>結果呈現 文字之美 傲楓

14、曰：網頁中加入文字的方法。標題文字 ： 經過了前兩章的練習，我想大家一定都會覺得很簡單，沒錯，寫網頁就是這麼簡單，別想的太難囉！接下來的單元我們把注意力擺在"主要內容"上面。文字通常是一個網頁最重要的部分，我們所追求的目標，要讓文字易讀，而且能給人舒適感，這樣你所想表達的意思才可以清楚的呈現出來。<h1>.</h1><h6>.</h6>這六組叫做標題標籤，顧名思義，當你想要加入一個標題文字時，就需要用到它們。其中<h1>是最大的，<h6>則是最小的，寫法是：<h1>傲楓</h1>

15、簡單吧！標題的大小還可以自由控制！ex <h1>傲</h1> <h2>楓</h2> <h3>真</h3> <h4>的</h4> <h5>很</h5> <h6>帥</h6>結果呈現請大家注意這六個字的排列方式，是一個字就佔據一行，沒錯，因為這個標籤有自動換行的效果。而且它會自動將文字變成粗體。字體大小 ： <font>.</font>這個標籤相當的好用，因為他可以加入一些屬性以控制文字的大小、顏色、字型等.先把注意力擺在"

16、;大小"，寫法是：<font size="3">傲楓</font> size這個屬性就是用來控制大小，基本上如果沒有特別規定，預設值就是3，值越大字就越大。size還有一種寫法：<font size="+1">傲楓</font>這種寫法的原理，就是因為預設值為3，所以+1以後就變成4的效果了，同理-1就變成 2的效果。頭昏了嗎？沒關係，看下面的對照你就懂了。<font size="7"> = <font size="+4"><f

17、ont size="6"> = <font size="+3"><font size="5"> = <font size="+2"><font size="4"> = <font size="+1"><font size="3"> = <font size="+0"><font size="2"> = <fon

18、t size="-1"><font size="1"> = <font size="-2">如果我異想天開，想做出超級大字來介紹自己，於是我就寫<font size="+100">傲楓</font>，但是失敗啦！嗚嗚因為這個屬性有一定的限制，不能讓你做出超級大字或是螞蟻小字，若你的設定超過最大值，那將會以最大的字體來顯示。ex. <font size=-2>傲</font> <font size="-1">

19、楓</font> <font size="+0">小</font> <font size="+1">築</font> <font size="+2">網</font> <font size="+3">頁</font> <font size="+4">教</font> <font size="+100">學</font>結果

20、呈現修改文字大小預設值 ： 文字大小預設值是3，你想要改變它？其實也是可以的。寫法是：<basefont size="17">請放在<body>這個標籤後面，這樣一來預設值可以改成17。字型及顏色 ： face ：這個屬性是用來控制字型的，寫法是 ：<font face="標楷體">你會發現文字就變成標楷體了，但是有一點要特別注意，你所設定的字型最好是大家都有的，如果沒有你所設定的字型，文字仍然只會以細明體的型式呈現，也許就沒有你想像中的漂亮。color ：除了可以在<body>中控制字的顏色，我們也可以讓

21、某特定的一段文字換顏色，寫法是：<font color="#ff0000"> 其中 #ff0000 是網頁所使用的顏色代碼，變換這些色碼，可自行設定顏色。其他的特別效果 ： 我是<i>斜體字</i>我是斜體字我是<b>粗體字</b>我是粗體字我有<u>底線</u>我有底線我是<tt>打字機字型</tt>我是打字機字型我讓<big>文字加大</big>我讓文字加大我讓<small>文字變小</small>我讓文字變小我在&

22、lt;sup>上</sup>我在上我在<sub>下</sub>我在下我會<blink>閃爍</blink>(IE不支援)我會閃爍我是<code>原始碼</code>我是原始碼我是<var>變數</var>我是變數我是<address>地址</address>我是地址<strong>加強</strong>語氣加強語氣<cite>引用</cite>名言引用名言其他的特殊符號 ： &lt;<&g

23、t;>&amp;&圖像之美 傲楓曰：告訴大家怎樣將圖片貼的更漂亮。加入圖片 ： 在第二章的時候，傲楓曾經介紹過如何加入背景圖片，背景圖的原理是利用一塊小圖，然後像貼磁磚一樣的貼滿。而我們現在要介紹的，是如何在網頁的某特定處，放入你所喜愛的圖片。圖片標籤 ： <img src="xxx.gif">利用這個寫法就可以把圖放進網頁中了，src 後面要填的是你這張圖的位置所在。至於這張圖的位置要怎麼寫呢？這牽扯到絕對位置跟相對位置的問題，大家一定要到位置設定看看，因為這太重要了。我們這個例子是用相對位置的方式寫的。 <img src=&quo

24、t;015.gif"> img中的屬性 ： widthheightwidth 跟height這兩個屬性是用來控制圖形的寬跟長，但是要注意，如果把圖形過度的放大，會使圖形產生粗糙失真的情形，所以要特別注意。<img src="015.gif" width="26" height="40"> <img src="015.gif" width="60" height="90"> alt這個屬性可將圖片加入註解。因為傳輸的不順利，瀏覽者往往會看

25、不到你所放的圖，所以貼心的你將圖片加入註解，這個註解會出現在圖框中，滑鼠放上這張圖也會顯示出來，這樣一來瀏覽者就知道知道它是什麼圖，再決定要不要reload這張圖。  寫法顯示沒有註解<img src="x.gif">有註解<img src="x.gif" alt="傲楓">border ：這個屬性控制圖片邊框的粗細，如果沒有特別指定，預設值是0<img src="015.gif" border="4"> vspace=xx ：圖的垂直方向預留的空白

26、寬度。xx裡面填的是數字，這個標籤是為了避免圖跟其他的內容擠成一團。hspace=xx ：圖的水平方向預留的空白寬度。  寫法顯示垂直方向上<br><img src="015.gif" vspace="30"><br>下上下水平方向左<img src="015.gif" hspace="20">右左右align ：控制圖片的定位。left、center、right分別表示將圖片置左、置中、置右。top、middle、bottom分別表示圖片的上緣、中間、下緣

27、對齊基準線。寫法顯示<img src="015.gif" align="right">圖置右圖置右<img src="015.gif" align="left">圖置左圖置左<img src="015.gif" align="top">圖上緣對齊基準圖上緣對齊基準<img src="015.gif" align="bottom">圖下緣對齊基準圖下緣對齊基準 連結應用 傲楓曰：超連結不會用

28、就慘了。超連結的標籤 ： 何謂超連結呢？就是滑鼠游標放上去會變成手指，按下去會連到新的網頁，這個東東就是超連結。其實超連結不只可以連到網頁，還可以連結 ftp、e-mail，這部分我們稍後再介紹。<a href="xxx.html">文字敘述</a>文字敘述就是用來告訴別人，這個超連結連到何處。而xxx.html處，則是填入網頁的位置。這牽涉到絕對位置跟相對位置的問題，大家一定要到位置設定看看，因為這太重要了。我們這個例子是用絕對位置的方式寫的。 寫法顯示<a href=".tw/">奇摩站</a>奇摩站文

29、字敘述的部分還可以用圖片來代替，這就是網頁中按鈕的道理。 寫法顯示<a href="<img src="ie.gif" alt="到暈倒總部"></a>大家有沒有發現，按鈕的旁邊有一層框線，要讓這個框線消失嗎？只要在<img>後面加上border="0"這個屬性就可以了。寫法顯示<a href="<img src="ie.gif" alt="到暈倒總部" border="0"></a>

30、內部連結 ： 當你的某一頁內容太多了，瀏覽者往往會因為懶得捲動捲軸，而放棄繼續看下去，所以我們可以在這一頁，做一些超連結，直接連到這一頁的某一個地方。首先我們將欲連結處定義起來。寫法是：<a name="point">欲連結處</a>想用一個超連結連到此處，連結的寫法只要在前面多加一個 #。寫法是：<a href="#point">連到欲連結處</a>完整範例還有用這個方法要注意，必須有去有回，例如你從最上面跳到最下面，之後瀏覽者想回去，那還是要動用到捲軸，所以貼心的你，必須在最下面的地方也做一個超連結連回

31、去，大家去看看我的免費資源，就是這樣做的。網頁開啟位置 ： target是超連結屬性中相當重要的，它決定了你按下超連結後，新網頁開啟的位置。寫法：<a href="xxx.html" target="?">文字敘述</a>?可以換成_blank、_parent、_self、_toptarget="_blank" ：使連結的畫面內容，在新視窗中開啟。target="_parent" ：使連結的畫面內容，當成文件的上一個畫面。target="_self" ：使連結的畫面內容，

32、顯示在目前的框架中。(預設值)target="_top" ：將瀏覽器的畫面全部清掉之後，再貼上連結的畫面內容，也就是可以去除原來的框架。連結的其他功能 ： 別忘了，超連結不只是能連到網頁而已，其他功能如下表<a href="kitty.gif">kitty貓</a><a href="note.txt">重要記事</a>連到圖檔、文字檔等<a href="gopher:/可以連到gopher系統。<a href="ftp:/.tw/">地下f

33、tp</a>可以連到ftp站台。<a href="news:.tw">大至新聞</a>可以連到新聞群組。<a href="mailto:lalacom.tw">寫信給傲楓</a>可以連結電子郵件。<a href="telnet:/22">心情小築</a>可以連結bbs站台。預設超連結樣式 ： 大家應該記得，在第二章的時候，我們曾經利用<body>中的屬性link、alink、vlink來控制超連結的顏色，我現在來介

34、紹一個更炫的。<style><!-a text-decoration:none;color:#8080ffa:hover text-decoration:underline;color:#ff9900/ -></style>這是一種CSS的排版方法，加在<head>和</head>之間，讓我們來慢慢說明。a 這個括弧裡的設定是滑鼠還沒有放上超連結時，超連結的樣式，none代表不加底線，color裡面的色碼是超連結的顏色。變換這些色碼，可自行設定顏色。a:hover 這個括弧裡的設定是滑鼠放上超連結時，超連結的樣式，underline代

35、表加底線，色碼當然是滑鼠放上後超連結的顏色。a:visited 這個括弧裡的設定是代表按過此超連結後，超連結的樣式。詳情亦可參考敝站的CSS教學。水平線條 傲楓曰：利用水平線可以將不同的單元分開。加入水平線 ： 水平線也是一個相當好用的網頁元件，利用它可以讓你的版面更容易閱讀。<hr> ：利用這個標籤就可以做出基本的水平線，它並沒有相對應的配對標籤。效果呈現 水平線樣式 ： 我們也可以利用一些屬性來控制水平線的外型。size ：用來控制水平線的厚度，數字越大水平線越厚。ex.<hr size="8">width ：用來控制水平線的寬度，可使用兩種寫法

36、。相對寫法(百分比)：width=80% 就表示寬度佔80%。絕對寫法(像素)：width=100px 就表示寬度為100像素。ex.<hr width="80%">ex.<hr width="100px">noshade ：加入這個屬性，可以讓水平線變成實心的。ex.<hr size="8"> 一般加厚過的水平線ex.<hr size="8" noshade> 加厚的實心水平線對齊方式 ： align ：這個屬性可以指定水平線的對齊方式，可以填入left(靠左)、c

37、enter(置中)、right(靠右)。ex.<hr width="100px" align="left">當然，我們還是可以利用<center>來將水平線置中。ex.<center><hr width="100px"></center>彩色的水平線 ： color ：利用這個屬性可以指定水平線的顏色，但是只有用IE瀏覽器才能看出此效果，Netscape並不支援。ex.<hr color="#ff0000">繪製表格 傲楓曰：善用表格可以帶給你

38、想像不到的效果。表格的基本架構 ： 繪製表格算是html語法中，比較難懂得一環了，因為變化很多，傲楓想了很久，才想出一個淺顯易懂的方式來完成這一篇嘔心瀝血之作。希望大家一定要一步一步的跟我做。先介紹表格的基本架構原始碼結果<table border="1"><tr><td>1-1</td></tr></table>1-1<table>.</table> ：代表一個表格的開始與結束。border ：用這個屬性來控制框線的粗細，數字越大，框線越粗，也就越有立體感。<tr>

39、.</tr> ：代表往下多增加一橫列。<td>.</td> ：代表在那一橫列中，往右多加一格。現在我們練習畫一個 1 x 2 的表格。、先寫好一組<tr>.</tr>，如此一來我們就有一橫列了。、在<tr>.</tr>中加入兩組<td>.</td>，如此一來，在第一列中就有兩格了。、在<td>.</td>中輸入任意文字，然後存檔，用瀏覽器看結果。原始碼結果<table border="1"><tr><td>1

40、-1</td><td>1-2</td></tr></table>1-11-2現在我們練習畫一個 2 x 2 的表格。、先寫好兩組<tr>.</tr>，如此一來我們就有兩橫列了。、分別在<tr>.</tr>中加入兩組<td>.</td>，如此一來，每一列中就都有兩格了。、在<td>.</td>中輸入任意文字，然後存檔，用瀏覽器看結果。原始碼結果<table border="1"><tr><td

41、>1-1</td><td>1-2</td></tr><tr><td>2-1</td><td>2-2</td></tr></table>1-11-22-12-2現在我們練習畫一個比較奇怪的，第一、第二列各有兩格，第三列有三格。、先寫好三組<tr>.</tr>，如此一來我們就有三橫列了。、第一、第二列只需要兩格，所以在第一、第二組<tr>.</tr>中，分別加入兩組<td>.</td>、第三

42、列需要三格，故在第三組<tr>.</tr>中，放三組<td>.</td>、在<td>.</td>中輸入任意文字，然後存檔，用瀏覽器看結果。原始碼結果<table border="1"><tr><td>1-1</td><td>1-2</td></tr><tr><td>2-1</td><td>2-2</td></tr><tr><td&g

43、t;3-1</td><td>3-2</td><td>3-3</td></tr></table>1-11-22-12-23-13-23-3跨越的技巧 ： 大家看了上一個範例，有沒有覺得第一、二列的右方很醜呢？沒關係，傲楓教你一招，就是跨越的技巧。先將上一個範例的表格整容一下。原始碼結果<table border="1"><tr><td>1-1</td><td colspan="2">1-2</td>&l

44、t;/tr><tr><td>2-1</td><td colspan="2">2-2</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr></table>1-11-22-12-23-13-23-3怎麼做到的呢？請看以下步驟：、先重複上一個範例的步驟 。、 因為我們希望讓1-2與2-2，一共橫跨兩格， 所以我們分別在它們的<td>

45、;中加入一個屬性colspan="2"、 存檔後看結果。有了橫跨，當然也有直跨的技巧囉！原始碼結果<table border="1"><tr><td>1</td><td rowspan="3">2</td><td>3</td></tr><tr><td>4</td><td>5</td></tr><tr><td>6</td>&

46、lt;td>7</td></tr></table>1234567怎麼做到的呢？請看以下步驟：、因為有三列，所以先寫三組<tr>.</tr>。、通常 2這一格，認定為屬於第一列，所以第一列有三格，第二、第三列各有兩格。在第一組<tr>.</tr>中，加入三組<td>.</td>在第二、第三組<tr>.</tr>，分別加入兩組<td>.</td>、我們希望讓 2，一共直跨三格，所以在它的<td>中加入一個屬性rowspan=&

47、quot;3"、存檔看結果。 多練習幾次，相信你會熟悉畫表格的方式。再複習一次：colspan ：代表橫跨。等號後面的數字，代表橫跨的格數。rowspan ： 代表直跨。等號後面的數字，代表直跨的格數。 表格進階 傲楓曰：一些進階的表格控制法。內容定位 ： 如果將儲存格放大，內容也跟著亂跑，有沒有方法把它們定位呢？當然可以，寫法是：<td align="left">利用align這個屬性，可以控制橫向定位，left、center、right分別代表置左、置中、置右。如果沒有沒有特別設定，預設值是置左。<td valign="top&qu

48、ot;>利用valign這個屬性，可以控制縱向定位，top、middle、bottom分別代表置上、置中、置下。預設值是置中。原始碼結果<table border="1" width="110" height="150"><tr><td align="right">置右</td> <td align="center">置中</td></tr><tr><td valign="top

49、">置上</td> <td valign="bottom">置下</td></tr></table>置右置中置上置下表格顏色 ： 我們也可以控制整個表格，甚至任何一個儲存格的顏色。寫法是：<table bgcolor="#FFD350"> ：控制整個表格的顏色。其中 #FFD350 是網頁所使用的顏色代碼，變換這些色碼，可自行設定顏色。<tr bgcolor="#FFD350"> ：控制單一列的顏色。<td bgcolor=&qu

50、ot;#FFD350"> ：控制單一儲存格的顏色。有了這個屬性，我們可以來玩一點特別的，稱之為色塊，簡單的說，就是把框線的粗細變成 0，再配合背景的顏色，就可以出現下面的效果了。原始碼結果<table border="0"><tr><td bgcolor="#FFD350">暱稱</td><td bgcolor="#FFD350">傲楓</td></tr><tr><td bgcolor="#FFD350&qu

51、ot;>綽號</td><td bgcolor="#FFD350">轉轉龜</td></tr><tr><td bgcolor="#FFD350" colspan="2">痞子一個</td></tr></table>暱稱傲楓綽號轉轉龜痞子一個進階控制 ： <caption>.</caption> ：夾在這組配對標籤中的文字，會變成表格的標題。<table cellpadding="20&

52、quot;> ：cellpadding 這個屬性可以控制內容與框線的距離，數字越大距離越遠。原始碼結果<table border="1" cellpadding="25"><caption>數字遊戲</caption><tr><td>1</td><td>2</td><tr><tr><td>3</td><td>4</td><tr></table>數字遊戲1234

53、<table cellspacing="10"> ：cellspacing 這個屬性，控制框線與框線之間的間距，如下圖所示。框線裝飾 ： 最後是框線裝飾部分了，配色好的框線，可以大大的美化表格。<table bordercolor="#000080"> ：其中bordercolor用來控制所有框線的顏色。原始碼結果<table border="3" bordercolor="#000080"><tr><td>1-1</td><td>

54、1-2</td></tr></table>1-11-2<table bordercolorlight="blue" bordercolordark="red">其中bordercolorlight用來控制亮邊框線的顏色。bordercolordark用來控制暗邊框線的顏色。原始碼結果<table border="3" bordercolorlight="blue" bordercolordark="red"><tr><

55、td>1-1</td><td>1-2</td></tr></table>1-11-2分割視窗 傲楓曰：有點複雜，請耐心體會。 入門概念 ： 以下這些文字，又臭又長，但為了紮好根基，請含淚看下去。大家仔細的觀察也許不難發現，傲楓小築的畫面其實是由三個部分所組成的，如下圖所示為了呈現這個效果，傲楓一共寫了四個html檔：1、list.html，也就是左側目錄的內容2、counter.html，也就是右上方計數器的內容3、test10.html，也就是這篇教學的內容4、index1.htm，非常神秘且神奇的東東很奇怪吧？明明只有三個部

56、分，為什麼寫了四份html檔，最後那個神秘且神奇的東東到底用來做什麼啊？一點都不奇怪，最後那份文件的主要功能就是用來分割視窗，你想想看，瀏覽器怎麼會知道要將視窗分割成三部分？怎麼會知道list.html要放在左側，counter.html要放在右側，test10.html要放在右下方？其實這些設定都寫在index1.htm之中。如果你想要按下超連結，就可以讓三個部分同時出現在瀏覽器的視窗內，應該連結到哪一個html檔呢？時間到，猜出來了嗎？只要連到index1.htm就可以了，因為這個檔裡面已經有分割視窗的設定，一連到它的時候，瀏覽器就會依據這些設定，讓這三個部分乖乖的同時顯示出來。你可以按下

57、面這個超連結，就會更清楚了。index1.htm傲楓你很無聊耶，為什麼弄得這麼複雜？碰！嗯，雖然傲楓被扁了一拳，但仍然要辯駁一下。當你按下左方的目錄時，有沒有發現左側跟右上方的內容都是不變的，唯一的改變只有主要內容的部分，這麼一來不是很方便嗎？不用把整個畫面洗掉，再顯示新的內容，只要更動你想改變的地方就好了。古人云：這就是分割視窗的真諦。基本形式 ： 接下來就要正式跟大家介紹分割視窗的設定要怎麼寫了。假設我希望出現的畫面如下圖所示left.htmright.htm寫法：<html><head><title>分割視窗</title></hea

58、d><frameset cols="20%,80%"><frame src="left.htm" name="left"><frame src="right.htm" name="right"></frameset></html>注意：frameset不能與body共同使用，也就是不能加入<body>這個配對標籤。注意：分割畫面最多的限度四個就好，因為太多反而會造成下載畫面太久的問題。讓我來詳細說明一下吧。<fr

59、ameset>.</frameset> ：設定的開始與結束。cols ：將視窗左右分割，若改成rows則將視窗上下分割，等號後面用來設定分割畫面的大小。設定的方式有三種：1、百分比法：直接輸入子畫面所佔的的比例，像本例是左邊佔整個畫面的20%，右邊80%，當然啦！全部加起來必須是100% 2、相對比例法：寫法是cols="1,1"，則這兩個子畫面大小的比例為1：1，也就是各佔畫面的一半，如果寫 1,2就是1：2，依此類推。 3、絕對大小法：寫法是cols="80,*"，這個意思是，左邊的子畫面大小為80像素，其他全部被右邊的子畫面所佔去

60、(如下圖)，如果寫成*,80就剛好反過來。點數越大子畫面越大。80像素其他部分如果你想分成三個畫面呢？簡單啊，多加一個逗點就可以了，例如1,3,1，則三個畫面比例為1：3：1。上面的三個方法都可以用喔。frame src ：指定這個分割畫面要開啟的html文件。name ：指定這個分割畫面的名稱，可以隨便取一個名字，這個步驟相當重要，不要小看它了，稍後我們會介紹原因。一些常用的分割視窗格式 ： 網友們剛接觸到這個技巧的時候，一定覺得有點難吧，所以我把一些常用的分割格式寫出來，給大家一個參考。對了，紅色字體的部分是註解，可別連它們都寫進去了。 leftright寫法：<frameset c

61、ols="150,*"> ：左右分割成兩部分，左邊佔100像素<frame src="left.html" name="left">指定左邊的名字叫left，顯示的內容則為left.html<frame src="right.html" name="right">指定右邊的名字叫right，顯示的內容則為right.html</frameset> updown寫法：<frameset rows="64,*">上下分割成兩部

62、分，上方佔64像素<frame src="up.html" name="up">指定上面的名字叫做up，顯示的內容則為up.html<frame src="down.html" name="down"> 指定下面的名字叫做down，顯示的內容則為down.html</frameset> leftcenterright寫法：<frameset cols="1,1,1">左右分割成三個部分，每個部分大小的比例為1：1：1<frame src=&q

63、uot;left.html" name="left"><frame src="center.html" name="center"><frame src="right.html" name="right"></frameset>下面這個是蜂巢式的喔，也就是子畫面中又分割了子畫面，大家要注意看，仔細體會。 leftruprdown寫法：<frameset cols="150,*">先將畫面分割成左右兩邊<fr

64、ame src="left.html" name="left">指定左邊的名字叫做left，顯示的內容則為left.html<frameset rows="20%,*">再將右邊的子畫面做上下分割<frame src="rup.html" name="rup">指定右上方的名字叫做rup，顯示的內容則為rup.html<frame src="rdown.html" name="rdown">指定右下方的名字叫做rd

65、own，顯示的內容則為rdown.html</frameset></frameset>frameset中的屬性 ： frameborder= ：指定是否加入框線，可以填0或1，填0代表不加框線，填1代表要。border= ：指定框線的寬度。bordercolor= ：指定框線的顏色。framespacing= ：指定兩相鄰子畫面之間的間隔大小。frame中的屬性 ： marginwidth= ：指定子畫面左右邊緣所保留的空間。marginheight= ：指定子畫面上下邊緣所保留的空間。frameborder= ：指定是否加入框線，可以填0或1，填0代表不加框線，填1代

66、表要。scrolling= ：指定需不需要使用捲軸。可以填入yes,no,auto。yes ，表示不管如何都加入捲軸。auto，如果子畫面的內容超過指定的大小時，捲軸才會出現。no ，表示不管如何都不要加入捲軸，若配合 frameborder="0"這個參數，就不會在兩個子畫面間，出現一條醜醜的分割線但是要特別注意，畫面內容如果超過指定大小，就會有部分內容看不見。bordercolor= ：指定框線的顏色。Noresize ：指定框線可否移動，如果加入這個屬性，框線就被固定住了，若是沒有寫的話，瀏覽者就可以拉動框線來改變子畫面的大小。不支援分割畫面的瀏覽器 ： 協定都訂出來了，瀏覽器還要搞分裂，像是IE跟Netscape瀏覽的效果就很不同，還好這兩個龍頭都有支援分割視窗，但是還是有一些朋友使用不支援的瀏覽器，所以為了這些人，我們要加上這一段。<noframes><body>對不起！你的瀏覽器不支援分割視窗，所以看不到我的心血</body></noframes>這些可憐的朋友瀏覽到這一頁時，就可以看到這一段話了，否則會什麼都沒有。n

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论