玄奘大学-资讯素养与应用.ppt

資訊素養與應用 HTML網頁設計 前言 HTML：HyperText Markup Language HTML為網頁設計中最早也最基本的定義樣式 HTML是一種描述文件結構的語法 HTML不是WYSIWYG『所見即所得』 HTML所編寫出來的網頁檔案大致上都很小 所以能很快速傳遞在網路上 前言 HTML是一種跨平台的語言 可以在任何平台上閱覽 HTML是進階網頁程式(ASP、 PHP)設計的基礎 HTML可於任何檔案編輯軟體中完成 本課程以Dreamweaver操作 網頁基本架構 一份標準的HTML文件是由標籤(Tag)以及文件內容所組成。 html/html：此標籤置於整個文件的開始和結束之處，以供瀏覽器識別此文件為合法的文件 head/head：此標籤是用以表示標頭資訊的開始與結束 在head與/head之間可加入其它標籤title/title或meta等 title/title此標籤中為網頁的標題，也就是您瀏覽器最左上面的標題，若沒設則只會顯示成此網頁所在的網址(或目錄) body/body：此標籤中所寫的內容即會顯示於網頁裡 網頁基本架構 範例： html head title玄奘大學/title /head body 計算機概論 /body /html 　 網頁基本架構 換行 br此標籤是跳下一行，使用br的話可在適當的地方讓文章能換行。 換行 p/p此標籤是段落，使用p可自動跳到下一段落，也就是中間會空一行，這與br有不同之處 常用標籤p 水平分隔線 hr此標籤會產生一條分隔線 水平分隔線 最基本的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 水平分隔線 置中調整 center/center將所要置中的文字或圖片置於center與/center之間即可。 調整字體大小 hn/hn訂定標題的大小，共分為六個等級，n是值介於1~6，其中１最大，且前後要對應。 範例： h1字體設為H1的大小/h1 h2字體設為H2的大小/h2 h3字體設為H3的大小/h3 h4字體設為H4的大小/h4 h5字體設為H5的大小/h5 h6字體設為H6的大小/h6 調整字體大小 文字字型 b：粗體 i：斜體 u：底線 文字字型 font可以控制文字的大小，顏色，字型等屬性 範例： font face=Time New Roman color=#ff00ff size=7Hsuan Chuang University/font face：文字字體 color：文字顏色 size：文字大小，數字1～7 網頁顏色設定 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 網頁顏色設定 背景圖像設定 body background=back.gif 在body內加入background的屬性了 範例為背景圖檔檔名： back.gif 如果圖像的檔案跟您網頁的檔案不在同一目錄裡，則必須輸入完整路徑，如：.tw/back.gif。 參數：bgproperties=fixed 使背景圖像固定不動，不過只有IE有效果 改變字的屬性 font color=“rrggbb”/font以RGB調色盤直接改變文字的顏色 亦可使用顏色的單字更改字的顏色 font color=顏色的單字/font 例如：font color=red 更改字型的方法font face=字型全名 /font 例如：font face=標楷體 改變字的屬性 跑馬燈 用法：marquee玄奘大學/marquee 在marquee內的屬性 : bgcolor：設定背景顏色 direction：控制行進方向 scrollamount：控制行進速度 behavior：控制行進方式 slide文字碰到底邊就會