HTML網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識學(xué)習(xí)講課教案.ppt

1 1 HTML概述 1 1簡介HTML即超文本標(biāo)記語言 所謂標(biāo)記語言是指用標(biāo)記進(jìn)行編輯作業(yè)的語言 通過標(biāo)記指定文本或其他對象 如圖像 聲音等 的表示格式 從而制作成超文本文件 標(biāo)記是描述HTML文件結(jié)構(gòu)的標(biāo)識符 它規(guī)定了HTML文件的邏輯結(jié)構(gòu) 并且控制網(wǎng)頁的顯示方式 HTML的標(biāo)記不區(qū)分大小寫 例如和等價(jià) 1 標(biāo)記的功能HTML標(biāo)記的功能是 標(biāo)記文件結(jié)構(gòu) 設(shè)定文字 圖像 表格 表單等在瀏覽器上的顯示風(fēng)格和位置 嵌入腳本 實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁及多媒體等 2 1 HTML概述 2 標(biāo)記的構(gòu)成標(biāo)記是由符號 和括在其中的命令字符串組成 標(biāo)記有雙標(biāo)記和單標(biāo)記兩種 雙標(biāo)記包括開始標(biāo)記和結(jié)束標(biāo)記 必須成對出現(xiàn) 例如 是文件的開始標(biāo)記和結(jié)束標(biāo)記 是網(wǎng)頁內(nèi)容的開始和結(jié)束標(biāo)記 單標(biāo)記只有開始標(biāo)記而沒有結(jié)束標(biāo)記 例如 標(biāo)尺線標(biāo)記只有開始標(biāo)記而沒有結(jié)束標(biāo)記 另外 有的標(biāo)記例如 分段標(biāo)記 可以寫為雙標(biāo)記 也可以寫為單標(biāo)記 3 1 HTML概述 3 標(biāo)記的表示方法HTML的標(biāo)記有下列3種表示方法 a 文本b 文本c 僅用于一些特殊的標(biāo)記 例如 表示強(qiáng)制換行 它沒有與之對應(yīng)的 4 標(biāo)記的屬性屬性是用來修飾說明標(biāo)記的 放在開始標(biāo)記內(nèi) 例如顏色 對齊方式 高度和寬度等 各屬性間以空格分隔 4 1 HTML概述 標(biāo)記的常用屬性如下 a 對齊屬性 align left左對齊 默認(rèn) center居中對齊 right右對齊 justify兩端對齊 b 范圍屬性 width 像素值或百分比對象寬度 height 像素值或百分比對象高度 c 色彩屬性 color RRGGBB前景色bgcolor RRGGBB背景色 其中 顏色值可以是英文顏色名或十六進(jìn)制的顏色值 5 6 1 HTML概述 1 2HTML文件結(jié)構(gòu) 7 1 HTML概述 標(biāo)記中可以有以下常用屬性 background 設(shè)置網(wǎng)頁背景圖案 bgcolor 設(shè)置網(wǎng)頁背景色 默認(rèn)為白色 text 設(shè)置文本顏色 默認(rèn)為黑色 link 設(shè)置尚未被訪問過的超文本鏈接的顏色 默認(rèn)為藍(lán)色 vlink 設(shè)置已被訪問過的超文本鏈接的顏色 默認(rèn)為紫色 例如 將背景圖像設(shè)為photo6 gif 背景色設(shè)為綠色 8 2 網(wǎng)頁的基本元素 2 1網(wǎng)頁中的文本使用一般而言 Web網(wǎng)頁是由圖像 表格及環(huán)繞它們的文本組成 網(wǎng)頁中文本的文字風(fēng)格和布局設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中非常重要 例如 標(biāo)題字的大小 是否居中及各級標(biāo)題的設(shè)置 文字字體及顏色的設(shè)定 文章分段及段落的風(fēng)格 頁面的整體布局等 都是在網(wǎng)頁設(shè)計(jì)中必須考慮的問題 1 標(biāo)題標(biāo)題標(biāo)記中的n值可取1 6的整數(shù) 取1時(shí)文字最大 取6時(shí)最小 默認(rèn)為 9 2 網(wǎng)頁的基本元素 例2 1 標(biāo)記的應(yīng)用 軟件學(xué)院教授簡介定義一條標(biāo)尺線張光明教授張光明教授 男 1940年10月誕生于河北省石家莊市 張光明教授研究方向張光明教授研究成果 10 2 網(wǎng)頁的基本元素 2 文字大小和顏色1 使用標(biāo)記使用標(biāo)記的size屬性可以設(shè)定一段文章 一個(gè)語句 一個(gè)單詞的文字大小 格式為 一段文章 一個(gè)語句 一個(gè)單詞標(biāo)記的color屬性設(shè)定一段文章 一個(gè)語句 一個(gè)單詞的文字顏色 格式為 一段文章 一個(gè)語句 一個(gè)單詞例如 文字段顏色為白色或文字段顏色為紅色 11 2 網(wǎng)頁的基本元素 2 使用標(biāo)記的text屬性標(biāo)記中的text屬性可以設(shè)定整個(gè)網(wǎng)頁文字的顏色 格式為 例如 3 換行和分段1 強(qiáng)制改行強(qiáng)制改行使用標(biāo)記 位于行的末尾 無結(jié)束標(biāo)記 2 段落段落標(biāo)記用于分段 位于前段的末尾 并使前段與后段之間加一行空白 段落標(biāo)記可以省略結(jié)束標(biāo)記 12 2 網(wǎng)頁的基本元素 3 標(biāo)尺線標(biāo)尺線標(biāo)記在前 后兩個(gè)段落之間定義一條標(biāo)尺線 標(biāo)記中的width屬性用來控制標(biāo)尺線的長度 例如 線長為50像素寬線長為屏幕寬度的50 標(biāo)記的size屬性控制標(biāo)尺線的粗細(xì) noshade屬性將標(biāo)尺線設(shè)置為黑色 align屬性指定標(biāo)尺線的位置 例如 右對齊左對齊居中 默認(rèn) 的color屬性控制標(biāo)尺線的顏色 如 13 2 網(wǎng)頁的基本元素 文本 或圖像 布局1 對齊方式文本或圖像或文本或圖像 n 1 2 3 4 5 6 或文本或圖像 center居中 right右對齊 left左對齊 2 標(biāo)記當(dāng)要在許多段落中設(shè)置對齊方式時(shí) 常使用 層 標(biāo)記 文本或圖像居中 center居中 right右對齊 left左對齊 14 2 網(wǎng)頁的基本元素 2 2網(wǎng)頁中的圖像使用1 網(wǎng)頁中加入圖像使用標(biāo)記格式為 其中 圖像文件名 可以用絕對路徑也可以用相對路徑 文件可以是gif jpg或png類型 圖像文本性說明 用在不能顯示圖像的瀏覽器 或?yàn)g覽器顯示圖像時(shí)間太長時(shí)先顯示此文字內(nèi)容 xxx htm 指明關(guān)于圖的詳細(xì)說明以補(bǔ)充alt屬性的簡單說明 15 2 網(wǎng)頁的基本元素 2 圖像的尺寸設(shè)定使用標(biāo)記的width和height屬性設(shè)定圖像的寬和高格式為 其中 x和y可以是像素值 也可以取百分?jǐn)?shù) 例如 16 2 網(wǎng)頁的基本元素 3 圖像和文本布局圖像和文本混排時(shí) 圖像和文本在垂直方向的對齊及相互間的左右位置關(guān)系使用align屬性 格式為 文本文本其中 位置參數(shù)可以是 top 頂對齊 middle 中央對齊 bottom 底邊對齊 left 圖像在文本左邊 和right 圖像在文本右邊 17 2 網(wǎng)頁的基本元素 2 3網(wǎng)頁中的列表使用在網(wǎng)頁中使用列表 可以清楚地看到定義順序 信息排序及信息的相對重要性 HTML提供了豐富的列表元素 用于在HTML文檔中建立列表 列表中并列的信息 數(shù)據(jù) 稱為項(xiàng) 項(xiàng)前可以添加符號或序號 也可以各項(xiàng)并列而不加任何記號 帶序號的列表稱為有序列表 帶符號的列表稱為無序列表 各項(xiàng)并列而不加任何記號的列表稱為定義列表 18 2 網(wǎng)頁的基本元素 1 無序列表建立無序列表可以使用標(biāo)記和項(xiàng)目標(biāo)記 格式為 項(xiàng)目項(xiàng)目 WWWBrowserHTMLHomePage注 無序列表可以嵌套 19 2 網(wǎng)頁的基本元素 2 有序列表1 創(chuàng)建有序列表在實(shí)現(xiàn)應(yīng)用中 人們更多地使用帶序號的列表 以便清楚地表達(dá)并列信息的順序 使用標(biāo)記 可以實(shí)現(xiàn)有序列表 格式為 項(xiàng)目項(xiàng)目 20 2 網(wǎng)頁的基本元素 2 有序列表序號的種類有序列表序號可以設(shè)定 在或標(biāo)記內(nèi)使用type屬性可以設(shè)定5種序號 即阿拉伯?dāng)?shù)字 1 大小寫英文字母 A 和 a 大小寫羅馬數(shù)字 I 和 i 格式為 或說明 省略type屬性時(shí)自動(dòng)設(shè)定為阿拉伯?dāng)?shù)字 的作用范圍為整個(gè)標(biāo)記范圍 的作用范圍是當(dāng)前項(xiàng) 行 21 2 網(wǎng)頁的基本元素 3 設(shè)定起始序號有序列表的序號可以從任意數(shù)字開始 方法是 在標(biāo)記內(nèi)使用start屬性或在標(biāo)記內(nèi)加入value屬性 格式為 其中 x為任意整數(shù) 注意 的作用域?yàn)楫?dāng)前標(biāo)記 的作用域?yàn)閺漠?dāng)前項(xiàng)開始直到當(dāng)前的標(biāo)記為止的各項(xiàng) 22 2 網(wǎng)頁的基本元素 例2 2 設(shè)定序號的種類 大字HTML入門WWWBrowserHTML網(wǎng)頁HTML案例教程斜體WWW網(wǎng)頁網(wǎng)頁文本的布局在網(wǎng)頁中插入圖像列表表格 23 2 網(wǎng)頁的基本元素 2 4超文本鏈接瀏覽Web頁時(shí) 我們能夠快捷地從一個(gè)Web網(wǎng)頁跳到另一個(gè)相關(guān)的Web網(wǎng)頁 就是在這些文件之間建立了超文本鏈接 1 創(chuàng)建網(wǎng)頁間的鏈接建立超文本鏈接語法格式為 文本或圖像注意 必須使用結(jié)束標(biāo)記 href意為超文本引用 URL是一個(gè)有效的鏈接資源的地址 文本或圖像 是在瀏覽器上顯示的熱點(diǎn)信息 標(biāo)記的常用屬性 Href 定義一個(gè)URL 作為有效的鏈接資源的地址 Name 指定當(dāng)前文檔內(nèi)的一個(gè)字符串作為鏈接時(shí)的位置名稱 Type 指定特定內(nèi)容的類型 24 2 網(wǎng)頁的基本元素 注意 依鏈接資源存放位置不同 鏈接可分為全局鏈接和局部鏈接 如果資源文件存放在服務(wù)器自己的目錄中 稱為局部鏈接 與本服務(wù)器以外文件的鏈接稱全局鏈接 在全局鏈接中 http寫入的URL稱為絕對路徑 例如 熱點(diǎn)文本文件之間的局部鏈接有下面 種情況 1 鏈接同一目錄內(nèi)的文件 2 鏈接下一級目錄內(nèi)的文件 3 鏈接上一級目錄內(nèi)的文件 4 鏈接同級目錄內(nèi)的文件 25 2 網(wǎng)頁的基本元素 標(biāo)記用來控制文字的移動(dòng) 例如 文字在移動(dòng)標(biāo)記的主要屬性有 direction 控制移動(dòng)方向 可取 left right up down 四個(gè)值 behavior 移動(dòng)方式 可取 scroll 循環(huán)移動(dòng) slide 只走一圈 alternate 來回移動(dòng) loop 循環(huán)次數(shù) 不輸入表示無限次循環(huán) scrollamount 移動(dòng)快慢 數(shù)值越大越快 scrolldelay 每移動(dòng)一步之后的延時(shí) 單位是毫秒 height width 移動(dòng)區(qū)域的高和寬 單位像素 bgcolor 移動(dòng)區(qū)域的背景色實(shí)例 滾動(dòng)文字 26 2 網(wǎng)頁的基本元素 2 圖像鏈接圖像鏈接是將圖像設(shè)定為熱區(qū) 單擊圖像則轉(zhuǎn)移到被鏈接的文本或其他文件 鏈接同一目錄中的文件的格式為 例如 邊框距離20 27 2 網(wǎng)頁的基本元素 2 5表格將文本或圖像按一定的行 列規(guī)則進(jìn)行排列稱為表格 在網(wǎng)頁中使用表格 可以使一些數(shù)據(jù)信息更容易瀏覽 HTML有極強(qiáng)的表格能力 可以把文字 圖像 聲音甚至視頻組織在表格中 也可以使用表格實(shí)現(xiàn)對文本 圖像或其他對象的頁面布局 1 創(chuàng)建表格網(wǎng)頁中建立一個(gè)表格的基本格式為 表項(xiàng)1 表項(xiàng)n 28 2 網(wǎng)頁的基本元素 1 標(biāo)記border n 定義表格邊框的粗細(xì) n取整數(shù) 單位為像素 bordercolor 顏色值 定義表格邊框的顏色 summary 簡要說明 對表格的格式和內(nèi)容簡要說明 bgcolor 設(shè)定表格的背景色 background 設(shè)定表格的背景圖像 width n n 設(shè)定表格的寬度 height n 設(shè)定表格的高度 align left right center 定義表格的水平對齊方式 29 2 網(wǎng)頁的基本元素 cellpadding 調(diào)節(jié)表單元線和數(shù)據(jù)之間的距離 cellspacing 調(diào)節(jié)表單元與邊框間的空白 rules 參數(shù) 設(shè)定有無表格線 align left right all 設(shè)定表格與文本的相互位置 2 標(biāo)記表示表格的一行開始 可以是單標(biāo)記 也可以是雙標(biāo)記 標(biāo)記的屬性主要如下 bgcolor 設(shè)定表格一行的背景色 align left right center 定義表格一行的表數(shù)據(jù)項(xiàng)的水平對齊方式 30 2 網(wǎng)頁的基本元素 3 標(biāo)記為列定義標(biāo)記 表格的數(shù)據(jù)寫在列和之間 標(biāo)記的屬性主要如下 bgcolor 設(shè)定背景色 align left right center 定義表數(shù)據(jù)項(xiàng)水平對齊方式 bodercolordark 顏色值 定義表格單元邊框的顏色 width n n 設(shè)定表格單元的寬度 height n 設(shè)定表格單元的高度 實(shí)例 31 2 網(wǎng)頁的基本元素 2 表題表題是表格的內(nèi)容聲明 HTML使用標(biāo)記給表格添加表題 并使用align屬性定義表題的位置 格式為 表題其屬性值如下 top 表題放在表的上部bottom 表題放在表的下部left 表題放在表上部的左側(cè)right 表題放在表上部的右側(cè) 32 2 網(wǎng)頁的基本元素 3 表頭使用標(biāo)記可以在表的第1行或第1列加表頭 表頭寫在開始標(biāo)記和結(jié)束標(biāo)記之間 并用醒目的粗體字顯示 在表的第1行加表頭的格式為 表頭1表頭2表頭3表項(xiàng)1表項(xiàng)2表項(xiàng)3表項(xiàng)4表項(xiàng)5表項(xiàng)6 33 2 網(wǎng)頁的基本元素 在表的第1列加表頭的格式為 表頭1表項(xiàng)1表項(xiàng)2表頭2表項(xiàng)3表項(xiàng)4表頭3表項(xiàng)5表項(xiàng)6 34 2 網(wǎng)頁的基本元素 4 表格邊框在標(biāo)記內(nèi)附加frame rules和border屬性可以生成各種表格邊框單元線 內(nèi)容1 frame屬性值 35 2 網(wǎng)頁的基本元素 2 rules屬性值none 無格線 groups 僅在行組和列組間有格線 rows 僅有行間格線 cols 僅有列間格線 all 有行和列格線 3 border 像素 設(shè)定邊框?qū)挾?例如 表格邊框僅有行線時(shí)為 36 2 網(wǎng)頁的基本元素 5 表格修飾HTML提供了配置表格元素背景色的功能 并可以設(shè)定表項(xiàng)數(shù)據(jù)的顏色 設(shè)定表格背景色的方法是使用bgcolor屬性 格式分別為 設(shè)定表格背景色設(shè)定表格中一行的背景色設(shè)定表格中一個(gè)單元格的背景色在標(biāo)記中 可以使用background屬性設(shè)置表格的背景圖像 格式為background 圖像文件名 37 2 網(wǎng)頁的基本元素 表格綜合實(shí)例 38 窗口框架 3 1窗口框架簡介3 1 1什么是窗口框架窗口框架可用于將窗口畫面分割成多個(gè)小窗口 且每個(gè)小窗口中 可以顯示不同的網(wǎng)頁 達(dá)到在瀏覽器中同時(shí)瀏覽不同網(wǎng)頁的效果 另外各窗口還可以扮演不同的功能 3 1 2窗口框架的基本結(jié)構(gòu)窗口框架的建立語法 其中 標(biāo)記用于定義一個(gè)窗口框架組件 而標(biāo)記則用于定義窗口框架中的子窗口組件 39 窗口框架 3 2窗口框架的控制3 2 1窗口的水平分割 Rows屬性 設(shè)置給rows屬性的字符串 代表各分割子窗口的高度 第一個(gè)子窗口高度為高度1 依此類推 而最后一個(gè) 則代表最后一個(gè)子窗口的高度 為其他子窗口高度分配后所剩余的高度 例如 40 窗口框架 3 2 2窗口的垂直分割 Cols屬性 3 2 3嵌套窗口框架一個(gè)窗口框架還包含了另一個(gè)窗口框架 41 窗口框架 3 2 4窗口框架的寬度 Border屬性 n為一整數(shù) 代表此窗口框架的寬度 單位為像素 3 2 5框架的隱藏 Frameborder屬性 Frameborder屬性用于控制窗口框架四周 是否顯示框架 此屬性可使用在標(biāo)記與標(biāo)記中 使用在標(biāo)記內(nèi)時(shí) 可控制窗口框架的所有子窗口 使用在標(biāo)記時(shí) 則僅能控制該標(biāo)記所代表的子窗口 0代表不顯示框線 1代表顯示框線 實(shí)例 42 窗口框架 3 3子窗口的設(shè)置3 3 1指定子窗口顯示網(wǎng)頁 SRC屬性 Src屬性是用于指定要導(dǎo)入到某子窗口的HTML文件的位置 3 3 2定義子窗口名稱 Name屬性 Name屬性是用來指定窗口的名稱 當(dāng)完成定義子窗口的名稱后 便可在超鏈接中 指定顯示網(wǎng)頁的子窗口 3 3 3控制框架滾動(dòng)條 Scrolling屬性 43 窗口框架 3 3 4子窗口大小的調(diào)整 NoResize屬性 若不能隨意更改子窗口的大小 可在標(biāo)記中 設(shè)置NoResize屬性 3 4超鏈接Target屬性與框架的應(yīng)用3 4 1網(wǎng)頁顯示子窗口 Target屬性 如何實(shí)現(xiàn)各窗口不同功能 運(yùn)用標(biāo)記的target屬性 指定顯示鏈接網(wǎng)頁的子窗口 實(shí)例 44 窗口框架 3 4 2搭配Target屬性的特殊設(shè)置 設(shè)置在空白窗口中顯示網(wǎng)頁當(dāng)將Target屬性設(shè)置為 blank時(shí) 若單擊超鏈接后 將以打開另一個(gè)窗口的方式顯示網(wǎng)頁 設(shè)置在上一層框架顯示網(wǎng)頁當(dāng)將Target屬性值為 parent時(shí) 單擊超鏈接后 該鏈接網(wǎng)頁將導(dǎo)入目前子窗口的上一層框架 若沒有上層 則導(dǎo)入在同一窗口中 將網(wǎng)頁導(dǎo)入到同一子窗口中若將targer屬性設(shè)置為 self 則將在同一子窗口中顯示鏈接的網(wǎng)頁 45 4 表單的應(yīng)用 HTML提供的表單是用來將用戶數(shù)據(jù)從瀏覽器傳遞給Web服務(wù)器的 例如可以利用表單建立一個(gè)錄入界面 也可以利用表單對數(shù)據(jù)庫進(jìn)行查詢 在這里需要聲明的是 表單的操作是與服務(wù)器進(jìn)行交互的操作 而服務(wù)器端的操作是通過服務(wù)器端的程序來實(shí)現(xiàn)的 實(shí)現(xiàn)在服務(wù)器端的操作有許多種方式 其中ASP 動(dòng)態(tài)服務(wù)網(wǎng)頁 的方式就是一種 它可以通過ADO方式與多種數(shù)據(jù)庫相連 46 4 表單的應(yīng)用 4 1表單的標(biāo)記表單就是為Internet網(wǎng)絡(luò)用戶在瀏覽器上建立一個(gè)交互接口 使Internet網(wǎng)絡(luò)用戶可以在這個(gè)接口上輸入自己的信息 然后使用提交按鈕 將Internet網(wǎng)絡(luò)用戶的輸入信息傳送給Web服務(wù)器 在HTML中 有一個(gè)專門的標(biāo)記FORM提供表單的功能 由表單開始標(biāo)記和表單結(jié)束標(biāo)記組成 表單中可以設(shè)置文本框 按鈕或下拉菜單 它們也是通過標(biāo)記完成 在表單的開始標(biāo)記中帶有兩個(gè)屬性 ACTION和METHOD 書寫表單的HTML格式如下 47 4 表單的應(yīng)用 FORM標(biāo)記有以下主要屬性 1 ACTION屬性是用來指出 當(dāng)這個(gè)FORM提交后需要執(zhí)行的駐留在Web服務(wù)器上的程序名 包括路徑 是什么 一旦Internet網(wǎng)絡(luò)用戶提交輸入信息后服務(wù)器便激活這個(gè)程序 完成某種任務(wù) 例如 當(dāng)用戶點(diǎn)擊 提交 按鈕以后 Web服務(wù)器上的 login asp 將接收用戶輸入的信息 以登記用戶信息 48 4 表單的應(yīng)用 2 METHOD屬性是用來說明從客戶端瀏覽器將Internet網(wǎng)絡(luò)用戶輸入的信息傳送給Web服務(wù)器時(shí)所使用的方式 它有兩種方式 POST和GET 默認(rèn)的方式是GET 這兩者的區(qū)別是在使用POST時(shí) 表單中所有的變量及其值都按一定的規(guī)律放入報(bào)文中 而不是附加在ACTION所設(shè)定的URL之后 在使用GET時(shí)將FORM的輸入信息作為字符串附加在ACTION所設(shè)定的URL的后面 中間用 隔開 即在客戶端瀏覽器的地址欄中可以直接看見這些內(nèi)容 49 4 表單的應(yīng)用 HTML中的INPUT標(biāo)記HTML中的INPUT標(biāo)記是表單中最常用的標(biāo)記 我們在網(wǎng)頁上所見到的文本框 按鈕等等都由這個(gè)標(biāo)記引出的 下面是INPUT標(biāo)記的標(biāo)準(zhǔn)格式 其中TYPE屬性是用來說明提供給用戶進(jìn)行信息輸入的類型是什么 例如是文本框 單選按鈕或多選按鈕 它的取值如下 TEXT PASSWORD RADIO CHECKBOX SUBMIT RESET 50 這是個(gè)測試頁請輸入您的真實(shí)姓名 您的主頁的網(wǎng)址 密碼 1 文字輸入和密碼輸入 51 2 復(fù)選框 Checkbox 和單選框 RadioButton 52 4 表單的應(yīng)用 HTML中的SELECT標(biāo)記在制做HT