PowerPoint 簡報
Download
Report
Transcript PowerPoint 簡報
結束
第三章圖文並茂－美化您的網頁內容
本章重點
3-1
基本HTML語法概念
3-2
文字格式與編排
3-3
圖形編排功能
3-4
美化網頁文件實際運用
結束
第三章圖文並茂－美化您的網頁內容
開始與結束－成雙成對的標記語法
一般來說，它的語法除了一些特例，如<HR>、
<BR>、<P>等之外，多半是成雙成對的，它們
最主要的區分，在於分別宣告了文件中語法的
開始與結束。
<html>
<head>
<title>這裏可輸入網頁標題</title>
</head>
<body>
這裏放置網頁的相關內容
</body>
</html>
結束
第三章圖文並茂－美化您的網頁內容
建立第一份HTML文件
結束
第三章圖文並茂－美化您的網頁內容
標題文字大小設定與對齊方式
HTML語法中，標題字(Heading)的設定是
以<h>表示開始，</h>表示結束。它提供
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>六
個等級的字體變化。
標題字在螢幕上顯示的位置可以在<h>標
記中，加入align屬性來控制，它的設定值
有left、right、center等變化。
結束
第三章圖文並茂－美化您的網頁內容
文章段落格式設定
可以利用<p>標記來將段落與段落間區隔
開來。
如果想要使用同一段落來作換行的工作，
則可利用<br>標記來進行。
<pre>標記的作用是將原來在編器中所鍵
入的格式完全顯示在瀏覽器中，並保留文
件中的間隔、空白、及跳行方式。
結束
第三章圖文並茂－美化您的網頁內容
<blockquote>標記可來在引述別人的某段話。使
用此標記後，整段引言會做內縮動作，並且自
成一個段落。在結束引述文字後，別忘了要加
上</blockquote>標記表示結束！
使用水平線標記<hr>它會在畫面加上一條水平
的分隔線。
在編輯HTML文件時註解文字是不會在瀏覽器上
顯示出來，純粹只是用來輔助日後再做網頁的
編輯或維護時的方便。
結束
第三章圖文並茂－美化您的網頁內容
文字格式設定
可使用color屬性來改變<font>之內的文字
顏色。通常是以十六進位法來控制紅、綠、
藍三顏色的比值。
加上注音，好讓讀者能正確地了解。這時
<ruby>和<rt>這兩個標記就可派上用場，
<ruby>標記是提供您輸入所要顯示的中文
字，而<rt>標記則是用來標示注音符號。
結束
第三章圖文並茂－美化您的網頁內容
圖像檔的運用
背景圖案（background）
背景圖案的面積最好不要太大，以節省讀圖
的時間。此外，背景與文字盡量要採對比色
調，以方便文章的閱讀。
<body background=”檔名.檔案格式”>
結束
第三章圖文並茂－美化您的網頁內容
插入網頁圖案<img>
在網頁中，不管是圖形按鈕或是裝飾圖案，
都是以<img>標記來處理。
以線外方式來呈現圖檔的標記方式與一般連結的
方式相同，只不過是在HTML文件上將URL位址轉
換成圖檔名稱罷了。如下所示：
<a href=”檔案名稱.檔案格式”></a>
結束
第三章圖文並茂－美化您的網頁內容
圖檔格式應用技巧大公開
如果想將網頁圖形檔案容量儘量保持最小
的狀態，卻又失去其品質，在色彩方面，
我們可以限制色彩像素的數量來讓檔案變
小。
透明圖是指一種圖案的外圍是可以穿透的
圖形，能讓網頁的背景色顯現出來。
在製作透明圖時，如果圖形經過縮放處理，
其圖案的邊緣就經常會有白色的殘留影像。