HTML網(wǎng)頁制作PPT學習課件

HTML語言 1 目標 描述HTML文檔的結(jié)構(gòu)使用基本的HTML標簽在HTML文檔中插入特殊字符在HTML文檔中創(chuàng)建超級鏈接 2 HTML簡介 3 超文本 提供鏈接到其他頁面或同一頁面的其他位置的文本 標記 可以用標簽標記頁面的不同部分以正確顯示 語言 HTML可用于 控制頁面和內(nèi)容的外觀發(fā)布和檢索聯(lián)機文檔創(chuàng)建聯(lián)機表單插入諸如音頻剪輯和視頻剪輯等對象 HTML文檔示例 4 學習HTML歡迎來到HTML世界 HTML代碼 瀏覽器處理代碼并進行顯示 編輯器和瀏覽器 5 學習HTML歡迎來到HTML世界 HTML代碼 在編輯器中編寫HTML代碼 瀏覽器顯示HTML文檔 頁面 編輯器2 2 6 需要在編輯器中鍵入源代碼 示例 DreamWeaver MacromediaDreamweaver是一種專業(yè)的HTML編輯器 用于設(shè)計 編碼 開發(fā)網(wǎng)站 網(wǎng)頁和強大的Web應(yīng)用程序 HTML文檔結(jié)構(gòu) 7 學習HTML歡迎來到HTML世界 HTML網(wǎng)頁 頭部部分 主體部分 標簽標記HTML文檔的開始和結(jié)束 這部分包括標題和其他說明信息 包括在 標簽內(nèi) 這部分包含文本 圖像和鏈接 它包括在 標簽內(nèi) HTML標簽2 2 8 學習HTML歡迎來到HTML世界 標簽 標識BODY元素 屬性 提供有關(guān)元素的附加信息 值 分配給屬性的內(nèi)容 META標簽2 1 META標簽是一個特殊的HTML標簽 提供有關(guān)網(wǎng)頁的信息 如作者姓名 公司名稱和聯(lián)系信息等許多搜索引擎都使用META標簽信息例如 要將GrahamBrowne指定為作者 則使用以下META標簽 9 META標簽2 2 http equiv屬性可用來代替META標簽中的name屬性 10 表示有效期 格林尼治標準時間2005年9月12日 星期一14 25 27 表示每隔2秒 自動刷新網(wǎng)頁 演示 自動刷新的例子 HTML基本元素 標題段落換行符預(yù)先格式化字符格式化列表水平線字體圖像特殊字符超級鏈接 11 標題 12 動物世界從大自然獲得靈感從大自然獲得靈感從大自然獲得靈感從大自然獲得靈感從大自然獲得靈感從大自然獲得靈感 H1到H6標簽用于指定不同級別的標題 段落標簽 13 詩詞學習我是第一段我是第二段左對齊顯示居中顯示右對齊顯示 標簽用于標記段落 換行符 只要在文本中放入標簽 就會強制換行 14 詩詞學習我是第一行我是第二行我是第一段我是第二段 標簽 15 詩詞學習靜夜思床前明月光疑是地上霜舉頭望明月低頭思故鄉(xiāng) HTML 標簽用于顯示具有預(yù)先定義格式的文本 如HTML文檔中所示 字符格式化標簽 16 學習HTML這很有趣足球是最令人喜愛的運動之一 信息技術(shù)是發(fā)展的關(guān)鍵 水的分子式是H2O 32等于9 此標簽用于對文本應(yīng)用各種格式 如粗體 斜體 下劃線 下標 上標等 列表簡介 列表用于按邏輯方式對數(shù)據(jù)分組 17 玫瑰花 向日葵 蘭花 蘋果 桔子 水仙 芒果 水果蘋果芒果桔子花卉水仙蘭花向日葵玫瑰花 列表類型 無序列表 18 星期中的每一天星期日星期一星期二星期三星期四星期五星期六 無序列表也稱為 項目列表 列表類型 有序列表 19 星期中的每一天星期日星期一星期二星期三星期四星期五星期六 在有序列表中 列表項以自動生成的順序顯示 使用水平線 20 動物世界老虎的夜間視覺老虎的夜視能力優(yōu)于人類的夜視能力五倍以上 標簽用于在頁面上繪制水平線 使用字體和屬性 21 動物世界了解有關(guān)動物的更多信息斑馬的特性沒有任何兩匹斑馬的斑紋是完全一樣的 因此每匹斑馬都是獨一無二的 可以按名稱或十六進制值指定顏色 可以為字體指定的大小范圍為從1到7 可以指定一列字體 各字體間用逗號分隔 瀏覽器以最先找到的字體顯示文本 元素及其相關(guān)屬性 如SIZE COLOR和FACE 可用于控制網(wǎng)頁上文本的顯示 插入圖像2 1 22 標簽用于在HTML文檔中插入圖像 標簽的兩個常用屬性是SRC和ALIGN SRC屬性用于指定要插入的圖像位置 ALIGN屬性用于指定圖像相對于文本的對齊方式 插入圖像2 2 23 動物世界讓我們看看這些可愛的動物底部對齊頂部對齊居中對齊 插入特殊字符2 1 某些字符在HTML中具有特殊意義 如小于號 定義HTML標簽的開始字符實體用于在HTML文檔中插入特殊字符 如版權(quán)號 注冊商標等通常情況下 HTML會自動截去多余的空格 不管你加多少空格 都被看做一個空格 比如你在兩個字之間加了10個空格 HTML會截去9個空格 只保留一個 為了在網(wǎng)頁中增加空格 你可以使用表示空格 24 插入特殊字符需要用HTML字符實體 空格 插入特殊字符2 2 25 創(chuàng)建超級鏈接 26 了解鳥類會彈琴的狗狗單擊此處查看 絕對和相對路徑名 27 要鏈接到另一目錄 C example 下的頁面 可編寫或 要鏈接到同一目錄 C html 下的頁面 可編寫或 C html目錄 C example目錄 絕對路徑名 相對路徑名 鏈接到同一文檔的某個部分2 1 錨記標簽用于使用戶 跳 到文檔的某個部分HTML的NAME屬性用于創(chuàng)建錨標記為達到這種跳轉(zhuǎn)效果 請在HREF參數(shù)中使用該標記 28 主題名稱 主題名稱 鏈接到同一文檔的各個部分2 2 29 獅子斑馬印度豹獅子獅子的吼聲從八公里之外就能聽到 雄獅 很容易從鬃毛識別出雌雄 的重量達250公斤 而雌獅則要輕得多 只有180公斤 斑馬沒有任何兩匹斑馬的斑紋完全一樣 因此每匹斑馬都是獨一無二的 斑馬也稱為黑白條紋相間的馬 演示 錨鏈接例子 鏈接到其他文檔的特定位置 30 讓我們深入了解一些動物獅子斑馬印度豹 Animals htm 獅子獅子的吼聲從八公里之外就能聽到 雄獅 很容易從鬃毛識別出雌雄 的重量達250公斤 而雌獅則要輕得多 只有180公斤 Animaldetails htm 電子郵件鏈接 用戶可從網(wǎng)頁發(fā)送電子郵件 31 海豚充分交流 密切配合據(jù)說 海豚的交流模式幾乎與人類的一樣復(fù)雜 請將您的疑問發(fā)送至DavidFernandez 總結(jié)2 1 HTML標簽一般配對使用 不區(qū)分大小寫標簽都具有屬性 屬性提供關(guān)于網(wǎng)頁上HTML元素的附加信息META標簽放置在網(wǎng)頁的標題處以提供關(guān)于頁面的信息 搜索引擎常會用到這些標簽標題級標簽使用 32 總結(jié)2 2 段落標簽使用 無序列表使用標簽 有序列表使用標簽字體標簽超鏈接標簽超鏈接文本 33 表格 行 列 列標題 在HTML文檔中 廣泛使用表格來存放網(wǎng)頁上的文本和圖像 單元格 34 使用表格姓名性別分數(shù)RobertM80 創(chuàng)建表格 代表表格的開始 border 2表示邊框尺寸為2 表示行 這是表格的第一行 有三列數(shù)據(jù) 代表列 表格的第二行 有三列數(shù)據(jù) 表格的第三行 也有三列數(shù)據(jù) 35 學員檔案信息姓名性別分數(shù)RobertM80 表格的標題 表示表格標題 表示行或列標題 粗體顯示 表格的第二行 有三列數(shù)據(jù) 表格的第三行 有三列數(shù)據(jù) 36 學員檔案信息姓名性別分數(shù)RobertM80 表格的對齊方式 整個表格居中 姓名列默認左對齊 性別列居中 分數(shù)列右對齊 37 合并單元格 跨列 創(chuàng)建表格第一學期第二學期數(shù)學科學英語數(shù)學科學英語989580958788 COLSPAN n 屬性表示跨多少列 38 合并單元格 跨行 創(chuàng)建表格螺母螺栓錘子第一季度一月250010001240二月300025004000 ROWSPAN n 屬性表示跨多少行 39 學員檔案信息姓名性別分數(shù)RobertM80MaryF18 表格的背景色和尺寸設(shè)置 表格的顏色設(shè)置 表格的背景色行的背景色列的背景色顏色值可以采用RGB red green blue 紅綠藍十六進制值表示 如紅色 FF0000 或是一些預(yù)定義色彩名稱 red blue yellow等 表格的尺寸設(shè)置 例如 表示一個長為200像素 寬為100像素的表格 表示一個寬為窗口的20 高為窗口的10 的表格 40 表單輸入元素 7 課堂練習 請編寫HTML代碼 表單 42 METHOD post或get 表單 ACTION METHOD 指定提交后由服務(wù)器上哪個處理程序處理 指定向服務(wù)器提交的方法 一般為post或get方法 post方法比較安全 ACTION URL 表單輸入元素 1 文本框 按鈕 單選按鈕 復(fù)選框等都是輸入元素 44 表單輸入元素 2 BUTTON 按鈕 表單輸入元素 3 身份證號 TEXT 文本 密碼 請?zhí)顚懩墓ぷ鹘?jīng)歷 表單輸入元素 4 性別 男性女性 單選按鈕和復(fù)選框 你喜歡以下哪些明星 酒井法子鄭秀文BonJovi HTML輸入元素 5 2004年歐錦賽預(yù)測 最佳球員 RonaldoBeckhamZidane預(yù)測大賽亞軍巴西法國阿根廷預(yù)測誰將成為2004年歐錦賽冠軍 閱讀代碼 請問網(wǎng)頁中的顯示結(jié)果 48 表單輸入元素 6 下拉菜單 誰是2002年世界杯冠軍 西班牙法國巴西德國 列表選項 表單輸入元素 7 課堂練習 請編寫HTML代碼 框架 廣告欄頂部框架 top htm 商品詳細介紹右側(cè)框架 main htm 商品導(dǎo)航左側(cè)框架 left htm 51 為何使用框架 在另一個固定部分顯示導(dǎo)航部分 在頁面的一個固定部分顯示徽標或靜態(tài)信息 在此處顯示主要內(nèi)容 站點中只有此部分是變化的 總結(jié)4 1 表格標題數(shù)據(jù)1數(shù)據(jù)2 數(shù)據(jù)11數(shù)據(jù)22 跨行的單元格 數(shù)據(jù)11跨列的單元格 數(shù)據(jù)22 表格的一般語法 53 總結(jié)4 2 文本框密碼框文本域單選按鈕男性復(fù)選框酒井法子 表單的一般語法 54 總結(jié)4 3 選項1選項2 55 總結(jié)4 4 框架 頂部窗口顯示廣告top htm 顯示詳細內(nèi)容main htm 左側(cè)窗口顯示導(dǎo)航鏈接left htm 56 DHTML簡介 DHTML HTML 腳本語言JavaScript 層疊樣式表CSS 指定一個網(wǎng)頁的元素 決定元素的大小顏色和位置 操縱網(wǎng)頁的元素 DHTML是制作動態(tài)HTML頁面的技術(shù) 57 DHTML的功能 設(shè)計人員可以隨著與用戶的交互操作而改變文本的顏色 字體和大小 設(shè)計人員可以隨用戶的輸入或事件 如單擊鼠標 而更改頁面的內(nèi)容 設(shè)計人員可以用x座標和y座標來指定網(wǎng)頁元素的確切位置 絕對位置或相對位置 設(shè)計人員可以將網(wǎng)頁中的表格綁定到數(shù)據(jù)庫 設(shè)計人員可以將選擇的字體和網(wǎng)頁一起封裝 Web程序員可以編寫腳本以更改網(wǎng)頁的樣式和內(nèi)容 在DHTML中 每個元素都被視為一個對象 可以獨立地對每個對象進行訪問和編程 動態(tài)樣式 動態(tài)內(nèi)容 定位 數(shù)據(jù)綁定 可下載字體 腳本 對象結(jié)構(gòu) 58 DHTML示例 閃爍文本 移動文本 消隱文本 59 設(shè)置屬性這個段落應(yīng)用了樣式這個段落按默認樣式顯示 什么是樣式 指定顯示樣式 60 常用的樣式屬性 61 根據(jù)樣式代碼的位置 分為三類 行內(nèi)樣式內(nèi)嵌樣式外部樣式 樣式的分類 在最后一個聲明后面加上一個分號 是一個好習慣 行內(nèi)樣式 您如果希望某段文字和其他段落的文字顯示風格不一樣 那么請采用 行內(nèi)樣式 行內(nèi)樣式使用元素標簽的STYLE屬性定義 關(guān)鍵代碼 剩余時間 成交結(jié)束新舊程度 全新所在地 北京寶貝數(shù)量 5件瀏覽量 220次另送價值50元的充電器套裝 一個充電器 兩節(jié)充電電池 可使用半年以 63 應(yīng)用樣式P font size 20px color blue text align center 我是段落1我是段落2我是段落3我們的樣式絕對統(tǒng)一 內(nèi)嵌樣式 1 所有的段落都采用P樣式 保證樣式統(tǒng)一 行內(nèi)樣式表局限于某個標簽 如果希望本網(wǎng)頁內(nèi)的所以同類標簽都采用統(tǒng)一樣式 這時應(yīng)采用內(nèi)嵌樣式 用分號隔開 64 內(nèi)嵌樣式 2選擇器 根據(jù)選擇器的不同 內(nèi)嵌樣式又分為 HTML選擇器CLASS類選擇器ID選擇器 65 關(guān)鍵代碼 P 設(shè)置樣式 字體和背景色 font family System font size 18px color 3333CC H2 background color CCFF33 text align center 品種特征方面 1 蛋魚 蛋魚 2 龍睛 龍睛 3 高頭 高頭 內(nèi)嵌樣式 3HTML選擇器 應(yīng)用H2樣式 應(yīng)用P樣式 內(nèi)嵌樣式 4class類選擇器 myinput border 1pxsolid border color D4BFFF color 2A00FF 用戶名密碼 CLASS類選擇器 應(yīng)用類選擇器 class 類名 類選擇器的定義格式為 類名 樣式規(guī)則 fire color red font size 24px 我是二級標題 火是這樣的我是段落 火是這樣的 內(nèi)嵌樣式 5ID選擇器 ID選擇器 ID選擇器的定義格式為 ID名 樣式規(guī)則 應(yīng)用ID選擇器 ID ID名 A 設(shè)置超鏈接不帶下劃線 color blue text decoration none 文本修飾 無 A hover 鼠標在超鏈接上方停留時 帶下劃線 color red text decoration underline 文本修飾 下劃線 HEAD 俺是超鏈接 移過來我就顯示下劃線 內(nèi)嵌樣式 6特殊的選擇器 HTML選擇器 特殊的偽類 A代表超鏈接 hover代表鼠標懸停 外部樣式 根據(jù)樣式文件與網(wǎng)頁的關(guān)聯(lián)方式又分為 鏈接 LINK 外部樣式表導(dǎo)入 import 外部樣式表 樣式文件P 網(wǎng)頁2 網(wǎng)頁3 網(wǎng)頁1 70 鏈接外部樣式表 使用LINK 鏈接 標簽 語法 第一步 創(chuàng)建樣式表文件newstyle css 第二步 把樣式文件和網(wǎng)頁關(guān)聯(lián) 樣式文件 newstyle cssP Onel htm another htm 第三步 瀏覽查看各網(wǎng)頁 演示 鏈接樣式表示例 71 導(dǎo)入外部樣式表 使用 import導(dǎo)入 語法 import樣式表文件 css 操作步驟同鏈接樣式表 72 外部樣式文件