Download
1 / 34
350 likes | 583 Vues
資訊素養與應用. HTML 網頁設計. 前言. HTML ： HyperText Markup Language HTML 為網頁設計中最早也最基本的定義樣式 HTML 是一種描述文件結構的語法 HTML 不是 WYSIWYG『 所見即所得 』 HTML 所編寫出來的網頁檔案大致上都很小 所以能很快速傳遞在網路上. 前言. HTML 是一種跨平台的語言 可以在任何平台上閱覽 HTML 是進階網頁程式 (ASP 、 PHP) 設計的基礎 HTML 可於任何檔案編輯軟體中完成 本課程以 Dreamweaver 操作. 網頁基本架構.
E N D
資訊素養與應用 HTML網頁設計 資訊素養與應用 HTML網頁設計
前言 • HTML：HyperText Markup Language • HTML為網頁設計中最早也最基本的定義樣式 • HTML是一種描述文件結構的語法 • HTML不是WYSIWYG『所見即所得』 • HTML所編寫出來的網頁檔案大致上都很小 • 所以能很快速傳遞在網路上 資訊素養與應用 HTML網頁設計
前言 • HTML是一種跨平台的語言 • 可以在任何平台上閱覽 • HTML是進階網頁程式(ASP、 PHP)設計的基礎 • HTML可於任何檔案編輯軟體中完成 • 本課程以Dreamweaver操作 資訊素養與應用 HTML網頁設計
網頁基本架構 • 一份標準的HTML文件是由標籤(Tag)以及文件內容所組成。 • <html></html>：此標籤置於整個文件的開始和結束之處，以供瀏覽器識別此文件為合法的文件 • <head></head>：此標籤是用以表示標頭資訊的開始與結束 • 在<head>與</head>之間可加入其它標籤<title></title>或<meta>等 • <title></title>此標籤中為網頁的標題，也就是您瀏覽器最左上面的標題，若沒設則只會顯示成此網頁所在的網址(或目錄) • <body></body>：此標籤中所寫的內容即會顯示於網頁裡 資訊素養與應用 HTML網頁設計
網頁基本架構 • 範例： • <html> • <head> • <title>玄奘大學</title> • </head> • <body> • 計算機概論 • </body> • </html> 資訊素養與應用 HTML網頁設計
網頁基本架構 資訊素養與應用 HTML網頁設計
換行 • <br>此標籤是跳下一行，使用<br>的話可在適當的地方讓文章能換行。 資訊素養與應用 HTML網頁設計
換行 • <p></p>此標籤是段落，使用<p>可自動跳到下一段落，也就是中間會空一行，這與<br>有不同之處 資訊素養與應用 HTML網頁設計
常用標籤<p> 資訊素養與應用 HTML網頁設計
水平分隔線 • <hr>此標籤會產生一條分隔線 資訊素養與應用 HTML網頁設計
水平分隔線 • 最基本的<hr>使用方法：<hr> • 可使用size來控制高度：<hr size=8> • 可使用width來控制長度： • <hr width=500> • <hr width=50%> • 可使用color來控制顏色，本範例為紅色：<hr color=ff0000> • 可使用align來控制位置(預設為置中center)右right、左left：<hr align=right> • 混合使用(各標籤前後排列沒有影響) ：<hr width=80% color=0000ff size=5 align=left> 資訊素養與應用 HTML網頁設計
水平分隔線 資訊素養與應用 HTML網頁設計
置中調整 • <center></center>將所要置中的文字或圖片置於<center>與</center>之間即可。 資訊素養與應用 HTML網頁設計
調整字體大小 • <hn></hn>訂定標題的大小，共分為六個等級，n是值介於1~6，其中１最大，且前後要對應。 • 範例： • <h1>字體設為H1的大小</h1> • <h2>字體設為H2的大小</h2> • <h3>字體設為H3的大小</h3> • <h4>字體設為H4的大小</h4> • <h5>字體設為H5的大小</h5> • <h6>字體設為H6的大小</h6> 資訊素養與應用 HTML網頁設計
調整字體大小 資訊素養與應用 HTML網頁設計
文字字型 • <b>：粗體 • <i>：斜體 • <u>：底線 資訊素養與應用 HTML網頁設計
文字字型 • <font>可以控制文字的大小，顏色，字型等屬性 • 範例： <font face="Time New Roman" color="#ff00ff" size="7">Hsuan Chuang University</font> • face：文字字體 • color：文字顏色 • size：文字大小，數字1～7 資訊素養與應用 HTML網頁設計
網頁顏色設定 • <body bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx"> • bgcolor=控制背景顏色 • text=控制文字顏色 • link=控制連結顏色 • vlink=控制已閱讀過的顏色 • alink=控制正在連結的顏色 • xxxxxx六個數值代表紅／綠／籃的顏色元素值，為A～F及0～9等所組合起來的六個數值。 • 另外在#xxxxxx的部份也可用顏色的英文單字代替，如text="#000000"可換成 text="BLACK" 資訊素養與應用 HTML網頁設計
網頁顏色設定 資訊素養與應用 HTML網頁設計
背景圖像設定 • <body background="back.gif"> • 在<body>內加入background的屬性了 • 範例為背景圖檔檔名： back.gif • 如果圖像的檔案跟您網頁的檔案不在同一目錄裡，則必須輸入完整路徑，如：http://www.123.com.tw/back.gif。 • 參數：bgproperties="fixed" • 使背景圖像固定不動，不過只有IE有效果 資訊素養與應用 HTML網頁設計
改變字的屬性 • <font color=“rrggbb”></font>以RGB調色盤直接改變文字的顏色 • 亦可使用顏色的單字更改字的顏色 • <font color="顏色的單字"></font> • 例如：<font color="red"> • 更改字型的方法<font face="字型全名"> </font> • 例如：<font face="標楷體"> 資訊素養與應用 HTML網頁設計
改變字的屬性 資訊素養與應用 HTML網頁設計
跑馬燈 • 用法：<marquee>玄奘大學</marquee> • 在<marquee>內的屬性 : • bgcolor：設定背景顏色 • direction：控制行進方向 • scrollamount：控制行進速度 • behavior：控制行進方式 • slide文字碰到底邊就會停止／alternate左右碰撞 • width：設定行進寬度 • height：設定行進高度 • 範例：<marquee direction="down" height="100" bgcolor="#3399FF" scrollamount="20" behavior="alternate">玄奘大學</marquee> 資訊素養與應用 HTML網頁設計
超連結 • 網頁超連結： • <a href="連結網址">說明文字</a> • 範例：<a href="http://www.hcu.edu.tw">玄奘大學</a> • 電子郵件超連結： • <a href="mailto:你的E-Mail">說明文字</a> • 範例：<a href=“mailto:abc@hcu.edu.tw”>電子郵件</a> 資訊素養與應用 HTML網頁設計
超連結 資訊素養與應用 HTML網頁設計
表格製作 • <table></table>是表格的基本標籤 • width=控制表格長度，可用數字或百分比 • background=背景圖檔 • border=控制外框粗細，不外框便設成0 • 必須在<table>後加上<td>，才會新開一個儲存格，再用</td>來關閉儲存格 : • 範例：<table width="300" border="1"> • <td> 玄奘大學</td><td> 資訊素養與應用</td> • </table> 資訊素養與應用 HTML網頁設計
表格製作 • 加上<tr>即可跳到下一行。 • 範例：<table width="300" border="1"> • <td> 玄奘大學</td><tr><td> 資訊素養與應用</td> • </table> • 儲存格亦可使用<th></th>標籤，其中的文字會自動變為粗體。 • 範例：<table width="300" border="1"> • <td> 玄奘大學</td><tr><th> 資訊素養與應用</th> • </table> 資訊素養與應用 HTML網頁設計
表格製作 • 在<table>後加上標籤<caption>則可為表格加上標題，來標明整個表格的主題。 • 範例：<table width="300" border="1"> • <caption>課程主題</caption> • <td> 玄奘大學</td><tr><th> 資訊素養與應用</th> • </table> 資訊素養與應用 HTML網頁設計
播放音樂 • <embed src=“Midi音樂檔的位址”>，參數： • src=設定撥放的midi音樂檔名 • loop=音樂重撥次數，如想不斷撥放便設成true • autostart=是否要在音樂檔傳完之後，就自動播放音樂。true為要，false為不要。預設值是不要 • width=控制面版寬度 • high=控制面版高度 資訊素養與應用 HTML網頁設計
播放音樂 • <embed src="Midi音樂檔的位址"> • hidden=true(如果寫上這個屬性的話，就會完全隱藏控制面板，但無法設定控制面板的寬和高。) • controls=控制面版樣式為console(正常面版)／smallconsole(較小面版)／playbutton(只顯示撥放按鈕)／pausebutton(只顯示暫停按鈕)／stopbutton(只顯示停止按鈕)／volumelever(只顯示音量調整) • 範例：<embed src="music.mid" loop="1" hidden="true" autostart="true"> 資訊素養與應用 HTML網頁設計
框架(分割視窗) • 左右分割畫面：<frameset cols=數字或比例,數字或比例> • 上下分割畫面：<frameset rows=數字或比例,數字或比例> • 其他用法： • <frameset cols=200,*> • *表示左邊頁面長度為200，剩餘的空間都給右方的頁面使用 資訊素養與應用 HTML網頁設計
框架(分割視窗) • <frameset>之後需加上<frame>，如左邊頁面的顯示檔案為left.htm， 右邊的頁面顯示的檔案為right.htm，則如下所示 : • 範例： • <frameset cols=200,*><frame src="sample1.htm"><frame src="sample2.htm"></frameset> 資訊素養與應用 HTML網頁設計
框架(分割視窗) • <frameset>的控制屬性 : • framespacing=控制兩個frame之間的距離 • frameborder=控制frame外框的粗細 • border=控制外框粗細，無外框便設成0 • 範例： • <frameset cols=120,* frameborder="10" framespacing="20" border="5"><frame src="sample1.htm"><frame src="sample2.htm"></frameset> 資訊素養與應用 HTML網頁設計
框架(分割視窗) • <frame>內的屬性 : • noresize：瀏覽者無法改變frame的size • scrolling：auto/no控制frame可以/不可以捲動 • 範例： • <frameset cols=120,* frameborder="10" framespacing="20" border="5"><frame src="sample1.htm" noresize scrolling="yes"><frame src="sample2.htm" scrolling="no"></frameset> 資訊素養與應用 HTML網頁設計
