html設置文本和圖像(web編程基礎)PPT課件VIP

信息工程學院 web編程基礎 用HTML設置文本 圖像 列表教師 劉欣欣年級 2014級時間 2015 2016學年第一學期聯(lián)系方式 621422公室 21號樓303 3 知識回顧 什么是HMTL HTML HypertextMarkupLanguage 是一種SGML StandardforGeneralMarkupLanguage 定義下的一個描述性的語言 全稱是超文本標記語言是一種國際化標準語言 它用于在Web上發(fā)布超文本信息 是一種基于SGML 公開的資源描述格式不是程序語言 只是標記語言 設計者只需要掌握各類標記的使用方法即可 4 X HTML 什么是XHTML XHTML是TheExtensibleHypertextMarkupLanguage可擴展標識語言的縮寫 在HTML4 0的基礎上 用XML的規(guī)則對其進行擴展 得到了XHTML 它實現(xiàn)HTML向XML的過渡 什么是XML XML ExtensibleMarkupLanguage 的出現(xiàn) 結(jié)構(gòu)化文檔和數(shù)據(jù)有了一個通用的 科適應的格式 不僅僅應用在web上 也可以應用在任何地方 標準成為可能 是Web未來的發(fā)展方向 5 X HTML 為什么要使用XHMTL HTML沒有足夠的可擴展性 HTML文檔創(chuàng)建要素是有限的 如無法處理非常規(guī)的內(nèi)容 樂譜 數(shù)學表達式等 同時HTML不能很好地支持不斷更新的顯示媒體 如手機等 而XHMTL就可以很好地解決這一點 XHMTL的優(yōu)點有 HTML沒有非常良好的格式 所以當添加新的元素時 需更改文檔類型定義 而XHMTL有良好的格式 極大簡化了新元素的開發(fā)和集成 HTML沒有非常良好的格式 所以在計算能力較差的瀏覽設備上不能正常顯示 而XHMTL有良好的格式 可在非臺式設備中正常顯示 新建的Web文檔使用XHTML 將會使文檔具有更大的擴展性和兼容性 6 HTML文件的總體結(jié)構(gòu) 文件標題 表頭區(qū) 主體區(qū) 以開頭 以結(jié)尾 HTML頁面結(jié)構(gòu) 7 X HTML頁面結(jié)構(gòu) XHMTL頁面結(jié)構(gòu) 關于文檔類型的說明 聲明名字空間頁面標題這里是頁面內(nèi)容部分 注意內(nèi)容與瀏覽器邊緣的距離 8 XHTML文件基本結(jié)構(gòu)說明 說明 1 HTML只是一個純文本文件 由 顯示內(nèi)容 及 控制語句 兩部分組成2 規(guī)范的標記方法為 受影響內(nèi)容3 由英文 括起來的一個單詞 例如4 在XHTML中大部分的標簽是成對出現(xiàn)的 第一個成為 起始 標簽 第二個叫做 結(jié)束標簽 結(jié)束標簽比起始標簽多一個 例如5 標簽之間相互嵌套來定義網(wǎng)頁中文字圖片的板式 但是先后順序必須一致 6 兩個標簽之間定義的就是排版的內(nèi)容 7 html標簽區(qū)分大小寫 xhtml標簽與屬性必須小寫 9 Meta標簽 什么叫Meta標簽 1 meta是html語言head區(qū)的一個輔助性標簽 2 也許你認為這些代碼可有可無 其實如果你能夠用好meta標簽 會給你帶來意想不到的效果 例如加入關鍵字會自動被大型搜索網(wǎng)站自動搜集 可以設定頁面格式及刷新等等 3 meta標簽的組成meta標簽共有兩個屬性 它們分別是http equiv屬性和name屬性 不同的屬性又有不同的參數(shù)值 這些不同的參數(shù)值就實現(xiàn)了不同的網(wǎng)頁功能 10 Meta標簽 1 name屬性name屬性主要用于描述網(wǎng)頁 與之對應的屬性值為content content中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的 meta標簽的name屬性語法格式是 metaname 參數(shù) content 具體的參數(shù)值 其中name屬性主要有以下幾種參數(shù) 11 Meta標簽 A Keywords 關鍵字 說明 keywords用來告訴搜索引擎你網(wǎng)頁的關鍵字是什么 舉例 metaname keywords content science education culture politics ecnomics relationships entertaiment human B description 網(wǎng)站內(nèi)容描述 說明 description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容 舉例 metaname description content Thispageisaboutthemeaningofscience education culture 12 Meta標簽 C robots 機器人向?qū)?說明 robots用來告訴搜索機器人哪些頁面需要索引 哪些頁面不需要索引 content的參數(shù)有all none index noindex follow nofollow 默認是all 舉例 metaname robots content none D author 作者 說明 標注網(wǎng)頁的作者舉例 metaname author content root root 13 Meta標簽 2 http equiv屬性http equiv顧名思義 相當于http的文件頭作用 它可以向瀏覽器傳回一些有用的信息 以幫助正確和精確地顯示網(wǎng)頁內(nèi)容 與之對應的屬性值為content content中的內(nèi)容其實就是各個參數(shù)的變量值 meat標簽的http equiv屬性語法格式是 metahttp equiv 參數(shù) content 參數(shù)變量值 其中http equiv屬性主要有以下幾種參數(shù) 14 Meta標簽 A Expires 期限 說明 可以用于設定網(wǎng)頁的到期時間 一旦網(wǎng)頁過期 必須到服務器上重新傳輸 用法 metahttp equiv expires content Fri 12Jan200118 18 18GMT 注意 必須使用GMT的時間格式 B Pragma cache模式 說明 禁止瀏覽器從本地計算機的緩存中訪問頁面內(nèi)容 用法 metahttp equiv Pragma content no cache 注意 這樣設定 訪問者將無法脫機瀏覽 15 Meta標簽 C Refresh 刷新 說明 自動刷新并指向新頁面 用法 metahttp equiv Refresh content 2 URL 注意 其中的2是指停留2秒鐘后自動刷新到URL網(wǎng)址 D Set Cookie cookie設定 說明 如果網(wǎng)頁過期 那么存盤的cookie將被刪除 用法 metahttp equiv Set Cookie content cookievalue xxx expires Friday 12 Jan 200118 18 18GMT path 注意 必須使用GMT的時間格式 16 Meta標簽 E Window target 顯示窗口的設定 說明 強制頁面在當前窗口以獨立頁面顯示 用法 metahttp equiv Window target content top 注意 用來防止別人在框架里調(diào)用自己的頁面 F content Type 顯示字符集的設定 說明 設定頁面使用的字符集 用法 metahttp equiv content Type content text html charset gb2312 17 Meta標簽功能 幫助主頁被各大搜索引擎登錄 定義頁面的使用語言 自動刷新并指向新的頁面 實現(xiàn)網(wǎng)頁轉(zhuǎn)換時的動畫效果 網(wǎng)頁定級評價 控制頁面緩沖 控制網(wǎng)頁顯示的窗口 18 XHTML與HTML的重要區(qū)別 XHTML與HTML的重要區(qū)別 代碼規(guī)范 1 在XHTML中標記名稱必須小寫2 在XHTML中屬性名稱必須小寫3 在XHTML中標記必須嚴格嚴格嵌套4 在XHTML中標記必須封閉5 在XHTML中 即使是空元素的標記也必須封閉6 在XHTML中屬性值用雙引號括起來7 在XHTML中屬性值必須使用完整形式8 在XHTML中 應該區(qū)分 內(nèi)容標記 與 形式標記 9 在XHTML1 0中 別用name用id name屬性是不贊成使用的 在以后的XHTML版本中將被刪除 19 XHTML語法注意事項 1 為圖片添加alt屬性為所有圖片添加alt屬性 alt屬性指定了當圖片不能顯示的時候就顯示供替換文本 這樣做對正常用戶可有可無 但對純文本瀏覽器和使用屏幕閱讀機的用戶來說是至關重要的 只有添加了alt屬性 代碼才會被W3C正確性校驗通過 注意的是我們要添加有意義的alt屬性 像下面這樣的寫法毫無意義 正確的寫法 20 XHTML語法注意事項 2 給所有屬性值加引號在HTML中 你可以不需要給屬性值加引號 但是在XHTML中 它們必須被加引號 還必須用空格分開屬性 例 這也是不正確的3 關閉所有的標簽在XHTML中 每一個打開的標簽都必須關閉 空標簽也要關閉 在標簽尾部使用一個正斜杠 來關閉它們自己 例如 4 使用頁面注釋XHTML中使用作為頁面注釋 其示例代碼如下 說明 在頁面相應的位置使用注釋 可以使文檔結(jié)構(gòu)更加清晰 21 XHTML開發(fā)環(huán)境 XHTML編寫環(huán)境和測試方法1 記事本 1 打開記事本文件 編寫HTML文件 保存為后綴為html的文件 2 雙擊打開該文件 即可在瀏覽器中查看2 Dreamweaver 1 啟動Dreamweaver軟件 新建HTML文件 在代碼視圖下編寫HTML文件 保存 2 F12或是選擇菜單預覽 即可在瀏覽器中查看 22 X HTML標簽 一 1 規(guī)范的標記方法為 受影響內(nèi)容2 html3 head4 title5 body主要屬性 bgcolor 背景顏色background 背景圖片text 文字顏色link 設置鏈接文字顏色margin 邊距 23 一 段落段落標簽是處理文字時常用到的標簽 成對出現(xiàn)的標簽 見ch02 2 1 02 html文檔 二 換行單標簽例 見ch02 2 1 03 html文檔 使用段落標記后的效果 在段落內(nèi)部強制換行 2 1文本排版 4 6 2020 三 標題標題標簽由6個級別從到 為最大標題 為最小標題 成對出現(xiàn)的標簽 例 見ch02 2 1 04 html文檔屬性 align 值 right center left 段落與標題的效果 2 1 2設置標題 25 四 居中對齊例 見ch02 2 1 05 html文檔 居中顯示 2 1 3使文字水平居中 4 6 2020 2 1 4設置文字段落的縮進 五 向右縮進五個字符例 見ch02 2 1 06 html文檔 縮進顯示 27 六 預排版把預先排版好的格式保留下來 成對標簽 七 水平線在頁面中插入一條水平標尺線 使文字分隔開 單標簽 主要屬性 Width 寬度Color 顏色Align 對齊方式Noshade 去掉水平線的陰影 XHTML常用標簽 文本排版 4 6 2020 八 文字標簽 成對標簽 用于設置文字的大小 字體 字型 顏色 字號等 常用屬性如下 size 設置文字大小 取值范圍 1 7 6 6face 設置字體 如 黑體 宋體 TimesNewRomancolor 設置文字顏色 如 000000 black 文字列表的主要作用是有序地編排一些信息資源 使其結(jié)構(gòu)化和條理化 并以列表的樣式顯示出來 以便瀏覽者能更加快捷地獲得相應信息 HTML中 文字列表主要分為無序列表 有序列表 定義列表三種 第一種每個列表項的前面有一個圓點符號 第二種則對每個列表項依次編號 第三種用于關鍵詞的解釋說明 2 2文字列表 項目列表使用的一對標記是 其中每一個列表項使用 其結(jié)構(gòu)如下所示 第1項第2項第3項 2 2 1建立無序列表 無序列表 有序列表和無序列表的使用方法基本相同 它使用標記 每一個列表項前使用 每個項目都有前后順序之分 多數(shù)用數(shù)字表示 其結(jié)構(gòu)如下所示 第1項第2項第3項 2 2 2建立有序列表 有序列表 4 6 2020 2 2 3建立定義列表 定義列表是一列事物以及其相關的解釋 定義義列表的開始標簽是 每個被解釋的事物的開始標簽為 每個解釋的內(nèi)容的開始標簽是 1 該元素用于定義一個釋義列表的開始與結(jié)束 2 該元素用來在釋義列表中創(chuàng)建一個上層項目 3 該元素用來在釋義列表中創(chuàng)建一個上層項目 通過上面幾個實例的應用 用戶對文字的排版已有了一個基本認識 到目前為止 都是通過HTML標記對文字進行編排 但版面編輯并不僅是如此 還可以利用一些HTML屬性更加靈活地編排網(wǎng)頁中的文字 在大多數(shù)HTML標記中都可以加入屬性控制 屬性的作用是幫助HTML標記進一步控制HTML文件的內(nèi)容 如內(nèi)容的對齊方式 文字的大小 字體 顏色 網(wǎng)頁的背景樣式 圖片的插入等 2 3HTML標記與HTML屬性 上一節(jié)中介紹過使用標記可以使文本水平居中 若希望右對齊 可以使用HTML的align屬性 2 3 1控制段落的水平位置 段落對齊方式 HTML中 不同的標記會有各自不同的屬性 例如在前面曾介紹過的標記 使用它的屬性就可以控制網(wǎng)頁的背景以及文字字體的顏色 例如在上面的代碼中 將一行改為 2 3 2設置背景顏色 通過標記的屬性 使用HTML標記和屬性還可以設置文字的樣式 2 3 3文字的特殊樣式 設置字體樣式 除了可以設置文字的樣式外 還可以使用標記設置字體相關的屬性 標記有3個主要屬性 分別用于設置文字的字體 大小和顏色 2 3 4文字的字體大小和顏色 使用標記設置字體 大小和顏色 前面介紹了HTML的標記和屬性 但HTML樣式標記和屬性是有很大局限性的 前面介紹了很多HTML標記和HTML屬性 目的是使讀者更深入地理解HTML的原理 而實際上有一些標記現(xiàn)在已經(jīng)過時了 并不鼓勵用戶使用 因為有更好的 更科學的方法已經(jīng)出現(xiàn)了 這種更好 更科學的方法就是使用CSS來控制網(wǎng)頁的樣式 在互聯(lián)網(wǎng)發(fā)展的初期 各種規(guī)范還遠沒有像今天這樣完善和普及 因此當時為了更容易被大家和軟件廠商所接受 網(wǎng)頁主要是由HTML來完成的 這樣寫起來更簡單 一個網(wǎng)頁的兩個方面 結(jié)構(gòu) 和 表現(xiàn) 都由HTML來承擔 因此HTML標記就由兩類構(gòu)成 負責定義網(wǎng)頁結(jié)構(gòu)的標記和負責定義網(wǎng)頁表現(xiàn)形式的標記 例如 標記用來定義段落 這就是結(jié)構(gòu)標記 而標記用于定義網(wǎng)頁元素的字體 這就是形式標記 2 4HTML標記和屬性的局限性 現(xiàn)在 網(wǎng)頁的功能已不再單純地傳播一些信息 它還包括傳播大量的專業(yè)技術知識 如數(shù)學 物理和化學知識等 HTML中有許多特殊符號 可以用來實現(xiàn)在網(wǎng)頁上顯示數(shù)學公式 化學方程式等特殊字符 2 5特殊文字符號 在網(wǎng)頁中使用特殊符號 運算式 圖片是網(wǎng)頁中不可缺少的元素 巧妙地在網(wǎng)頁中使用圖片可以為網(wǎng)頁增色不少 這里首先介紹在網(wǎng)頁中常用的3種圖片格式 然后再介紹如何在網(wǎng)頁中插入圖片 以及設置圖片的樣式和插入的位置 通過對本章的學習 讀者可以制作簡單的圖文網(wǎng)頁 并根據(jù)自己的喜好制作出不同的圖片效果 在本章中 我們將事先準備好的圖像插入網(wǎng)頁中 并使它按照我們需要的格式顯示 而在實際的工作中 需要的圖像可能并不存在 或者并不適合直接放入網(wǎng)頁 因此網(wǎng)頁設計師必須要掌握一定的圖片處理和實踐的能力 在本書后續(xù)章節(jié)將對網(wǎng)頁設計師所需的美術方面的技能進行簡要介紹 從而讓用戶掌握一定的圖像和動畫的設計 加工 處理能力 以更好地掌握網(wǎng)頁設計的綜合能力 2 6使用圖像 Web頁中通常使用的圖像文件有JPEG GIF PNG共3種格式 但大多數(shù)瀏覽器只支持JPEG GIF兩種圖像格式 因為要保證瀏覽者下載網(wǎng)頁的速度 所以網(wǎng)站設計者也常使用JPEG和GIF這兩種壓縮格式的圖像 1 GIF文件2 JPEG文件3 PNG文件 2 6 1網(wǎng)頁中的圖像格式 在網(wǎng)頁上使用圖片 對于視覺效果而言 能使網(wǎng)頁充滿生機 并且直觀且巧妙地表達出網(wǎng)頁的主題 這是僅靠文字很難達到的效果 一個精美的圖片網(wǎng)頁不但能引起瀏覽者對網(wǎng)頁瀏覽的興趣 而且在很多時候要通過圖片以及相關顏色的配合來做出本網(wǎng)站的網(wǎng)頁風格 2 6 2簡單案例 在網(wǎng)頁中使用圖片 對于路徑信息的說明 通常分為以下兩種情況 1 一種稱為相對路徑 也就是從自己的位置出發(fā) 依次說明到達目標文件的路徑 這就好像如果班主任要找本班的一名學生 只需直接說名字即可 而校長要找到一名學生 就還要說明年級和班級 2 另一種稱為絕對路徑 也就是先指明最高級的層次 然后依次向下說明 例如要找外校的一名學生 就無法從本校為起點找到他 因此就可以說 八一中學3年4班的張偉 這就是絕對路徑的概念 2 6 3文件路徑 文件系統(tǒng)結(jié)構(gòu)示意圖 每一個圖像都有一定的尺寸 在Windows中可以方便地查看一個圖像文件的尺寸 在 我的電腦 中找到圖像文件 然后把鼠標指針移動到圖像文件上 停留幾秒鐘后 就會出現(xiàn)一個提示框 說明圖像文件的尺寸 尺寸 250 250 就表示該圖像的寬度和高度都是250像素 在HTML中 可以設定圖像的顯示大小 通常情況下都按照原本的大小顯示 當然也可以任意設置不同于原本尺寸的顯示大小 2 7設置圖片的尺寸 在Windows中查看圖像的尺寸 文件系統(tǒng)結(jié)構(gòu)示意圖 由于一些原因 圖像可能無法正常顯示 比如網(wǎng)絡速度太慢 瀏覽器版本過低等 因此應該為圖像設置一個替換文本 用于圖像無法顯示的時候告訴瀏覽者該圖片的內(nèi)容 2 8設置圖像的替換文本 顯示替換文本 上一節(jié)中介紹了如何使用Dreamweaver可視化的方法制作網(wǎng)頁 實際上Dreamweaver也提供了方便的代碼編寫功能 前面曾經(jīng)談到 頁面在瀏覽器中的最終顯示效果完全是由HTML代碼決定的 Dreamweaver只是幫助用戶方便地插入或者生成必要的代碼 在實際工作中 還是經(jīng)常會遇到通過可視化的方式生成的代碼并不能獲得最佳效果的情況 這時就需要設計師對代碼進行手工調(diào)整 這個工作可以在Dreamweaver文檔窗口的 代碼 視圖中完成 在 代碼 視圖中 Dreamweaver也提供了很多方便的功能 可以幫助用戶更高效地完成代碼的輸入和編輯操作 2 10利用Dreamweaver代碼視圖提高效率 在HTML以及本書后面要介紹的CSS中 都有很多種標記 屬性和屬性值 都是英文單詞 因此設計師要把繁多的標記 屬性和屬性值記清楚是很不容易的 而一旦拼寫錯誤 就無法得到正確的效果了 為此 Dreamweaver提供了很方便的代碼提示功能 可以大大減少設計者的記憶量 也可以盡可能避免拼寫錯誤 2 10 1代碼提示 代碼提示功能 代碼折疊是另一項Dreamweaver提供的輔助手段 當頁面非常復雜的時候 代碼量就會很大 這時如果分析代碼就會感到很混亂 代碼折疊的功能就是可以暫時把某些部分的代碼收縮隱藏起來 便于設計師分析和編輯代碼 2 10 2代碼折疊 選中一些代碼 將代碼折疊起來 文檔窗口中有3種視圖 其中 拆分 視圖就是把整個窗口分為左右兩半 左面顯示代碼 右面顯示設計視圖 2 10 3拆分視圖與代碼快速定位 使用 拆分 視圖對代碼進行快速定位 在制作頁面是表格起到布局定位的作用 當然也可以用來制作數(shù)據(jù)表 4 1使用表格 建立一個最基本的表格 必須包含一組標記 一組標記以及一組標記 這也是最簡單的單元格表格 標記的作用是定義一個表格