html設(shè)置文本和圖像(web編程基礎(chǔ))PPT課件

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