350 likes | 588 Views
資訊素養與應用. 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,其中1最大,且前後要對應。 • 範例: • <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網頁設計