slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
第二章 文 字設定 PowerPoint Presentation
Download Presentation
第二章 文 字設定

Loading in 2 Seconds...

play fullscreen
1 / 27

第二章 文 字設定 - PowerPoint PPT Presentation


  • 120 Views
  • Uploaded on

第二章 文 字設定. 段落: 一 篇 文 章 通 常 是 由 一 個 以 上 的 段 落 組 成 , 在 HTML 的 文 件 中 ,如 果 要 將 文 章 分 成 數 個 段 落 , 最 簡 單 的 方 式 就 是 加 一 個 < p> 在 要 分 段 的 地 方 , 而 它 會 自 動 在 段 與 段 之 間 空 一 列 空 白 以 示 分 隔 ,以 </ p> 結 束 。. 標題:

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '第二章 文 字設定' - lorand


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

第二章 文字設定

段落:

一 篇 文 章 通 常 是 由 一 個 以 上 的 段 落 組 成 , 在 HTML 的 文 件 中 ,如 果 要 將 文 章 分 成 數 個 段 落 , 最 簡 單 的 方 式 就 是 加 一 個 <p> 在 要 分 段 的 地 方 , 而 它 會 自 動 在 段 與 段 之 間 空 一 列 空 白 以 示 分 隔 ,以 </p> 結 束。

slide2

標題:

在 文 章 之 中 蠻 常 會 用 到 標 題 , 這 有 時 是 用 來 標 出 文 章 的 精 神所 在 , 或 是 提 醒 讀 者 注 意 某 些 重 點 等 等 的 . . . 不 論 是 何 種 功 用, 都 是 要 讓 它 比 較 顯 眼 , 當 你 使 用 <h1>OOXX</h1> 的 時 候 , 這個 OOXX 就 會 單 獨 成 列 , 字 體 變 的 很 大 , 而 且 是 粗 體 字 ;另 外 , 在 OOXX 的 前 後 會 各 有 一 列 空 白 列 出 現 ,果 然 夠 特 殊 ! 在 這 個 語 法 中 , 又 可 以 分 成 6 級 : 從 <h1> . <h2> . <h3> . <h4> . <h5> .到 <h6> 數 字 越 大 , 字 體 越 小 , 所 以 囉 , 最 大 的 標 題 就 是 <h1> 。

slide3

文字樣式:

<font size=6 color=#FF0000>OOXX</font>

這 個 語 法 是 使 用 在 文 章 中 間 , 調 整 某 幾 個 字 或 某 一 段 字 的 大 小 (size)以 及 顏 色(color) 之 用 , 與 標 題 不 同 之 處 , 在 於 這 個 語 法 不 會 中 斷 文 字 的 連 貫 ,也 不 會 變 成 粗 體 字 , 還 有 , size數 字 越 大 的 , 字 體 越 大 , 剛 好 與 標 題 相 反!而color是用 #紅綠藍 之十六進位表示,例如:#FF0000為紅色,#00FF00為綠色,#FFFF00為黃色。

slide4

粗體<b></b>或<strong></strong>.斜體<i></i>.加底線<u></u>、閃爍<blink></blink>文字、上標字<sup></sup>.下標字<sub></sub>:粗體<b></b>或<strong></strong>.斜體<i></i>.加底線<u></u>、閃爍<blink></blink>文字、上標字<sup></sup>.下標字<sub></sub>:

在 文 章 中 , 要 特 別 標 示 出 幾 個 字 , 除 了 加 大 字 體 . 變 換 顏 色 之 外 , 有 時 候 會 用 加 粗 或 斜 體 的 方 式 , HTML 文 件 也 具 備 這 樣 的 功 能 , 而 且 還 多 了 一 個 可 以 讓 文 字 一 閃 一 閃 的 語 法 喔 (不一定所有瀏覽器都支援此功能)。

slide5

強迫斷行<br>:

· 在 文 章 當 中 , 有 些 地 方 想 直 接 讓 文 字 從 下 一 列 開 始 , 可 是 又 不 想 空 行 , 怎 麼 辦 ? 這 時 候 , 就 可 以 用 這 個 <br> 達 到 你 想 要 的 效 果 !

文字置中<center></center>

slide6

預設格式<pre></pre>:

在 遇 到 一 堆 文 字 排 列 的 樣 子 比 較 複 雜 的 時 候 ,在 使 用 瀏 覽 程 式 的 時 候 會 變 的 比 較 奇 怪 ,尤 其 是 文 字 中 使 用 連 續 超 過 一 個 以 上 的 半 形 空 白 時 ,瀏 覽 程 式 會 當 做 只 有 一 個 , 這 時 候 , 如 果 我 希 望 它 就 照我 打 的 文 字 稿 依 樣 畫 葫 蘆 , 那 就 可 以 用 <pre></pre> 來 偷 懶 一 下 ,字 體 本 來 只 能 用 固 定 的 大 小 , 有 關 字 體 大 小 的 語 法碰 上 它 是 不 管 用 的 !

slide7

位址元件<address>...</address>:

位址(Address)通常是用來指出e-mail位址、簽名、或是文件出處。它一般都出現在文件的頂端或是末端。使用此標註會讓文字以斜體表示,並且會自動將段落中斷。

區塊引言標註<blockquote></blockquote>

這個標註常用來代表這段文字是引用他人的話,本文一般會稍微往左和往右內縮一點且(或)使用斜體段落,會發生中斷,這段本文的前後會各出現一列空白列。

slide8

註釋標註<!- …->:

註釋(comment)其實就是附註,這是會被瀏覽程式忽略過去的部份。註釋不會直接影響NetScape的顯示效果,但能讓它容易被了解,而且修改HTML文件也較容易。作為附註的文字是被放置在<!-和->之間。例如:<!- HTML coding is easy -> 。

slide9

&amp;

→ 顯示「&」符號

&lt;

→ 顯示「<」符號

&gt;

→ 顯示「>」符號

&quot;

→ 顯示「"」符號

slide10

例、<FONT>標籤設定文字大小:

<CENTER>

<FONT SIZE="3">歡迎光臨</FONT>

<FONT SIZE="-5">§</FONT>

<FONT SIZE=“+2”>小</FONT>

<FONT SIZE=“+3”>新</FONT>

<FONT SIZE="+4">的</FONT>

<FONT SIZE="+3">首</FONT>

<FONT SIZE="+2">頁</FONT>

<FONT SIZE="-5">§</FONT>

<FONT SIZE="3">歡迎光臨</FONT>

</CENTER>

slide11

例、設定文字顏色 :

<CENTER>

<FONT COLOR="#d2691a">歡迎光臨</FONT>

<FONT COLOR="red">§</FONT>

<FONT COLOR=“#00ffff”>小</FONT>

<FONT COLOR=“#ff8c00”>新</FONT>

<FONT COLOR="#006400">的</FONT>

<FONT COLOR="#ff8c00">首</FONT>

<FONT COLOR="#00ffff">頁</FONT>

<FONT COLOR="red">§</FONT>

<FONT COLOR="#6495ed">歡迎光臨</FONT>

<BR>

<BR>綠色文字<P>

</CENTER>

slide12

例、設定文字大小與顏色:

<CENTER>

<FONT SIZE="3" COLOR="#d2691a">歡迎光臨</FONT>

<FONT SIZE="-5" COLOR="red">§</FONT>

<FONT SIZE=“+2” COLOR=“#00ffff”>小</FONT>

<FONT SIZE=“+3” COLOR=“#ff8c00”>新</FONT>

<FONT SIZE="+4" COLOR="#006400">的</FONT>

<FONT SIZE="+3" COLOR="#ff8c00">首</FONT>

<FONT SIZE="+2" COLOR="#00ffff">頁</FONT>

<FONT SIZE="-5" COLOR="red">§</FONT>

<FONT SIZE="3" COLOR="#6495ed">歡迎光臨</FONT>

</CENTER>

slide13

例、<FONTBASE>標籤預設文字大小:

<CENTER>

<FONTBASE SIZE="5">

<FONT SIZE="3" COLOR="#d2691a">歡迎光臨</FONT>

<FONT SIZE="-5" COLOR="red">§</FONT>

<FONT SIZE="+2" COLOR="#00ffff">伊</FONT>

<FONT SIZE="+3" COLOR="#ff8C00">蔻</FONT>

<FONT SIZE="+4" COLOR="#006400">的</FONT>

<BASEFONT SIZE="2">

<FONT SIZE="+3" COLOR="#ff8C00">首</FONT>

<FONT SIZE="+2" COLOR="#00ffff">頁</FONT>

<FONT SIZE="-5" COLOR="red">§</FONT>

<FONT SIZE="3" COLOR="#6495ed">歡迎光臨</FONT>

</CENTER>

slide14

例、實體字型的控制標籤:

<B>青蘋果的酸澀</B><br>

<I>青蘋果的酸澀</I><br>

<U>青蘋果的酸澀</U><br>

<S>青蘋果的酸澀</S> <br>

<TT>青蘋果的酸澀</TT><br>

<SUP>青蘋果的酸澀</SUP> <br>

<SUB>青蘋果的酸澀</SUB>

slide15

例、邏輯字型的控制標籤:

<EM>青蘋果的酸澀</EM><br>

<VAR>青蘋果的酸澀</VAR><br>

<CITE>青蘋果的酸澀</CITE><br>

<STRONG>青蘋果的酸澀</STRONG><br>

<CODE>青蘋果的酸澀</CODE><br>

<DFN>青蘋果的酸澀</DFN><br>

<SMALL>青蘋果的酸澀</SMALL><br>

<BIG>青蘋果的酸澀</BIG>

slide16

例、<FONT>設定文字的字型:

<CENTER>

<FONT FACE=“標楷體" SIZE="3" COLOR="#d2691a">歡迎光臨</FONT>

<FONT SIZE="-5" COLOR="red">§</FONT>

<FONT FACE=“標楷體” SIZE=“+2” COLOR=“#00ffff”>小</FONT>

<FONT FACE=“標楷體” SIZE=“+3” COLOR=“#ff8C00”>新</FONT>

<FONT FACE="標楷體" SIZE="+4" COLOR="#006400">的</FONT>

<FONT FACE="標楷體" SIZE="+3" COLOR="#ff8C00">首</FONT>

<FONT FACE="標楷體" SIZE="+2 COLOR="#00ffff">頁</FONT>

<FONT SIZE="-5" COLOR="red">§</FONT>

<FONT FACE="標楷體" SIZE="3" COLOR="#6495ed">歡迎光臨</FONT>

</CENTER>

slide17

例、特殊字元的標示:

&lt;這是一本&quot;精彩&quot;的書;作者有兩位:令狐沖&amp;任我行&gt;

slide18

例、線段粗細的設定:

這是第一條線段,無SIZE設定(取內定值SIZE="1"來顯示)<BR>

<HR>

這是第二條線段,SIZE="5"<BR>

<HR SIZE="5">

這是第三條線段,SIZE="10"<BR>

<HR SIZE="10">

slide19

例、線段長短的設定:

這是第一條線段,無WIDTH設定(取內定值WIDTH="100%"來顯示)<BR>

<HR SIZE="3">

這是第二條線段,WIDTH="50"(點數方式)<BR>

<HR WIDTH="50" SIZE="5">

這是第三條線段,WIDTH="50%"(百分比方式)<BR>

<HR WIDTH="50%" SIZE="7">

slide20

例、線段排列的設定:

這是第一條線段,無ALIGN設定(取內定值center來顯示)<BR>

<HR WIDTH="50%" SIZE="5">

這是第二條線段,向左靠<BR>

<HR WIDTH="60%" SIZE="7" ALIGN="left">

這是第三條線段,向右靠<BR>

<HR WIDTH="70%" SIZE="2" ALIGN="right">

slide21

例、線段陰影的設定:

這是第一條線段,無NOSHADE設定(取內定值有陰影效果來顯示)<BR>

<HR WIDTH="80%" SIZE="5">

這是第二條線段,有NOSHADE設定<BR>

<HR WIDTH="80%" SIZE="7" ALIGN="left" NOSHADE>

slide22

例、文中的備註:

<!-- 這是屬於較感性的一小篇生活記事(本行是備註) --><BR>

日期:1995.02.11<BR>

今天天氣陰陰的,陰的讓人有一點冷,蹉蹉雙腳又縮了起來,忍不住抓<BR>

起棉被蓋在頭頂上,好讓自己感覺天還未亮起來,多賴在床上10秒鐘也<BR>

舒服,其實天氣冷也有好處,就連多賴在棉被裡10秒中,就能得到一天<BR>

中最大的滿足,冷的好!冷的好!<BR>

<!-- 底下整段是當成備註<BR>

日期:1995.02.15<BR>

公車最近又漲了5塊錢,內心實在是不舒服,因為公車的服務品質實在<BR>

太差了,急煞車、急轉彎、過站不停、口出髒言‧‧‧‧這些都是公車<BR>

司機最會的把戲,市議會竟然同意他們漲價,實在沒道理,記得小時後<BR>

5塊錢可買到我最喜歡吃的蔥花麵包,想到更令我難過,現在一塊蔥花<BR>

麵包是25塊,啊‧‧我是沒差啦!但可累壞了我父親。-->

slide23

例、預先格式化的敘述:

<PRE>

日期:1995.02.11

今天天氣陰陰的,陰的讓人有一點冷,蹉蹉雙腳又縮了起來,忍不住抓

起棉被蓋在頭頂上,好讓自己感覺天還未亮起來,多賴在床上10秒鐘也

舒服,其實天氣冷也有好處,就連多賴在棉被裡10秒中,就能得到一天

中最大的滿足,冷的好!冷的好!

</PRE>

slide24

例、預先格式化的敘述[含有其它控制標籤:

<PRE>

<FONT SIZE="5" COLOR="red">日期:1995.02.11</FONT>

<H3

>今天天氣陰陰的,陰的讓人有一點冷,蹉蹉雙腳又縮了起來,忍不住抓

起棉被蓋在頭頂上,好讓自己感覺天還未亮起來,多賴在床上10秒鐘也

舒服,其實天氣冷也有好處,就連多賴在棉被裡10秒中,就能得到一天

中最大的滿足,冷的好!冷的好!

</H3>

</PRE>

slide25

例、可調整排列的區段[能解讀控制標籤:

<DIV ALIGN="center">

<FONT SIZE="5" COLOR="red">日期:1995.02.11</FONT>

<H3>

今天天氣陰陰的,陰的讓人有一點冷,蹉蹉雙腳又縮了起來,忍不住抓

起棉被蓋在頭頂上,好讓自己感覺天還未亮起來,多賴在床上10秒鐘也

舒服,其實天氣冷也有好處,就連多賴在棉被裡10秒中,就能得到一天

中最大的滿足,冷的好!冷的好!

</H3>

</DIV>

slide26

例、書信內容預先格式化的敘述:

<BLOCKQUOTE>

日期:1995.02.11<BR>

<FONT COLOR="red">

今天天氣陰陰的,陰的讓人有一點冷,蹉蹉雙腳又縮了起來,忍不住抓

起棉被蓋在頭頂上,好讓自己感覺天還未亮起來,多賴在床上10秒鐘也

舒服,其實天氣冷也有好處,就連多賴在棉被裡10秒中,就能得到一天

中最大的滿足,冷的好!冷的好!

</FONT>

</BLOCKQUOTE>

slide27

例、書信頭、尾預先格式化的敘述:

<ADDRESS>

這是一封寄給令狐沖先生的信:<BR>

親愛的:

</ADDRESS>

<BLOCKQUOTE>

日期:1995.02.11<BR>

<FONT COLOR="red">

今天天氣陰陰的,陰的讓人有一點冷,蹉蹉雙腳又縮了起來,忍不住抓

起棉被蓋在頭頂上,好讓自己感覺天還未亮起來,多賴在床上10秒鐘也

舒服,其實天氣冷也有好處,就連多賴在棉被裡10秒中,就能得到一天

中最大的滿足,冷的好!冷的好!</FONT>

</BLOCKQUOTE>

<ADDRESS>

這是信件的結尾,祝您青春永駐。<BR>

<FONT COLOR="green">日期:10.23 AM 01:23</FONT> 小親親

</ADDRESS>