1 / 34

資訊素養與應用

資訊素養與應用. HTML 網頁設計. 前言. HTML : HyperText Markup Language HTML 為網頁設計中最早也最基本的定義樣式 HTML 是一種描述文件結構的語法 HTML 不是 WYSIWYG『 所見即所得 』 HTML 所編寫出來的網頁檔案大致上都很小 所以能很快速傳遞在網路上. 前言. HTML 是一種跨平台的語言 可以在任何平台上閱覽 HTML 是進階網頁程式 (ASP 、 PHP) 設計的基礎 HTML 可於任何檔案編輯軟體中完成 本課程以 Dreamweaver 操作. 網頁基本架構.

Download Presentation

資訊素養與應用

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 資訊素養與應用 HTML網頁設計 資訊素養與應用 HTML網頁設計

  2. 前言 • HTML:HyperText Markup Language • HTML為網頁設計中最早也最基本的定義樣式 • HTML是一種描述文件結構的語法 • HTML不是WYSIWYG『所見即所得』 • HTML所編寫出來的網頁檔案大致上都很小 • 所以能很快速傳遞在網路上 資訊素養與應用 HTML網頁設計

  3. 前言 • HTML是一種跨平台的語言 • 可以在任何平台上閱覽 • HTML是進階網頁程式(ASP、 PHP)設計的基礎 • HTML可於任何檔案編輯軟體中完成 • 本課程以Dreamweaver操作 資訊素養與應用 HTML網頁設計

  4. 網頁基本架構 • 一份標準的HTML文件是由標籤(Tag)以及文件內容所組成。 • <html></html>:此標籤置於整個文件的開始和結束之處,以供瀏覽器識別此文件為合法的文件 • <head></head>:此標籤是用以表示標頭資訊的開始與結束 • 在<head>與</head>之間可加入其它標籤<title></title>或<meta>等 • <title></title>此標籤中為網頁的標題,也就是您瀏覽器最左上面的標題,若沒設則只會顯示成此網頁所在的網址(或目錄) • <body></body>:此標籤中所寫的內容即會顯示於網頁裡 資訊素養與應用 HTML網頁設計

  5. 網頁基本架構 • 範例: • <html> • <head> • <title>玄奘大學</title> • </head> • <body> • 計算機概論 • </body> • </html> 資訊素養與應用 HTML網頁設計

  6. 網頁基本架構 資訊素養與應用 HTML網頁設計

  7. 換行 • <br>此標籤是跳下一行,使用<br>的話可在適當的地方讓文章能換行。 資訊素養與應用 HTML網頁設計

  8. 換行 • <p></p>此標籤是段落,使用<p>可自動跳到下一段落,也就是中間會空一行,這與<br>有不同之處 資訊素養與應用 HTML網頁設計

  9. 常用標籤<p> 資訊素養與應用 HTML網頁設計

  10. 水平分隔線 • <hr>此標籤會產生一條分隔線 資訊素養與應用 HTML網頁設計

  11. 水平分隔線 • 最基本的<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網頁設計

  12. 水平分隔線 資訊素養與應用 HTML網頁設計

  13. 置中調整 • <center></center>將所要置中的文字或圖片置於<center>與</center>之間即可。 資訊素養與應用 HTML網頁設計

  14. 調整字體大小 • <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網頁設計

  15. 調整字體大小 資訊素養與應用 HTML網頁設計

  16. 文字字型 • <b>:粗體 • <i>:斜體 • <u>:底線 資訊素養與應用 HTML網頁設計

  17. 文字字型 • <font>可以控制文字的大小,顏色,字型等屬性 • 範例: <font face="Time New Roman" color="#ff00ff" size="7">Hsuan Chuang University</font> • face:文字字體 • color:文字顏色 • size:文字大小,數字1~7 資訊素養與應用 HTML網頁設計

  18. 網頁顏色設定 • <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網頁設計

  19. 網頁顏色設定 資訊素養與應用 HTML網頁設計

  20. 背景圖像設定 • <body background="back.gif"> • 在<body>內加入background的屬性了 • 範例為背景圖檔檔名: back.gif • 如果圖像的檔案跟您網頁的檔案不在同一目錄裡,則必須輸入完整路徑,如:http://www.123.com.tw/back.gif。 • 參數:bgproperties="fixed" • 使背景圖像固定不動,不過只有IE有效果 資訊素養與應用 HTML網頁設計

  21. 改變字的屬性 • <font color=“rrggbb”></font>以RGB調色盤直接改變文字的顏色 • 亦可使用顏色的單字更改字的顏色 • <font color="顏色的單字"></font> • 例如:<font color="red"> • 更改字型的方法<font face="字型全名"> </font> • 例如:<font face="標楷體"> 資訊素養與應用 HTML網頁設計

  22. 改變字的屬性 資訊素養與應用 HTML網頁設計

  23. 跑馬燈 • 用法:<marquee>玄奘大學</marquee> • 在<marquee>內的屬性 : • bgcolor:設定背景顏色 • direction:控制行進方向 • scrollamount:控制行進速度 • behavior:控制行進方式 • slide文字碰到底邊就會停止/alternate左右碰撞 • width:設定行進寬度 • height:設定行進高度 • 範例:<marquee direction="down" height="100" bgcolor="#3399FF" scrollamount="20" behavior="alternate">玄奘大學</marquee> 資訊素養與應用 HTML網頁設計

  24. 超連結 • 網頁超連結: • <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網頁設計

  25. 超連結 資訊素養與應用 HTML網頁設計

  26. 表格製作 • <table></table>是表格的基本標籤 • width=控制表格長度,可用數字或百分比 • background=背景圖檔 • border=控制外框粗細,不外框便設成0 • 必須在<table>後加上<td>,才會新開一個儲存格,再用</td>來關閉儲存格 : • 範例:<table width="300" border="1"> • <td> 玄奘大學</td><td> 資訊素養與應用</td> • </table> 資訊素養與應用 HTML網頁設計

  27. 表格製作 • 加上<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網頁設計

  28. 表格製作 • 在<table>後加上標籤<caption>則可為表格加上標題,來標明整個表格的主題。 • 範例:<table width="300" border="1"> • <caption>課程主題</caption> • <td> 玄奘大學</td><tr><th> 資訊素養與應用</th> • </table> 資訊素養與應用 HTML網頁設計

  29. 播放音樂 • <embed src=“Midi音樂檔的位址”>,參數: • src=設定撥放的midi音樂檔名 • loop=音樂重撥次數,如想不斷撥放便設成true • autostart=是否要在音樂檔傳完之後,就自動播放音樂。true為要,false為不要。預設值是不要 • width=控制面版寬度 • high=控制面版高度 資訊素養與應用 HTML網頁設計

  30. 播放音樂 • <embed src="Midi音樂檔的位址"> • hidden=true(如果寫上這個屬性的話,就會完全隱藏控制面板,但無法設定控制面板的寬和高。) • controls=控制面版樣式為console(正常面版)/smallconsole(較小面版)/playbutton(只顯示撥放按鈕)/pausebutton(只顯示暫停按鈕)/stopbutton(只顯示停止按鈕)/volumelever(只顯示音量調整) • 範例:<embed src="music.mid" loop="1" hidden="true" autostart="true"> 資訊素養與應用 HTML網頁設計

  31. 框架(分割視窗) • 左右分割畫面:<frameset cols=數字或比例,數字或比例> • 上下分割畫面:<frameset rows=數字或比例,數字或比例> • 其他用法: • <frameset cols=200,*> • *表示左邊頁面長度為200,剩餘的空間都給右方的頁面使用 資訊素養與應用 HTML網頁設計

  32. 框架(分割視窗) • <frameset>之後需加上<frame>,如左邊頁面的顯示檔案為left.htm, 右邊的頁面顯示的檔案為right.htm,則如下所示 : • 範例: • <frameset cols=200,*><frame src="sample1.htm"><frame src="sample2.htm"></frameset> 資訊素養與應用 HTML網頁設計

  33. 框架(分割視窗) • <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網頁設計

  34. 框架(分割視窗) • <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網頁設計

More Related