網(wǎng)頁設(shè)計3-設(shè)置文本、段落和圖像

網(wǎng)頁設(shè)計（三）——用HTML設(shè)置文本、段落和圖像

知識技能目標

（1）通過實訓(xùn)項目了解HTML中文本與圖像標記的特點與語法結(jié)構(gòu)。（2）通過實訓(xùn)項目熟練掌握用HTML在網(wǎng)頁中設(shè)置文本與圖像的各種效果。（3）通過實訓(xùn)項目熟練掌握用HTML在網(wǎng)頁中設(shè)置文本與圖像的排版。

實訓(xùn)內(nèi)容

（1）在網(wǎng)頁中用HTML設(shè)置文本與圖像的各種效果（2）在網(wǎng)頁中用HTML設(shè)置文本與圖像的排版。

實訓(xùn)項目設(shè)置頁面效果如圖

課堂實訓(xùn)1.創(chuàng)建帶文本的網(wǎng)頁（1）在學(xué)生盤文件夾09IT下的文件夾“website”中新建文件夾“shixun3”（2）在文件夾“shixun3”中新建網(wǎng)頁，文件名為ex1.htm。（3）在網(wǎng)頁中添加下列文本。

課堂實訓(xùn)九寨溝——西部的世外桃源九寨溝位于岷江上游阿壩州南坪縣境內(nèi)，面積600平方公里，因溝內(nèi)有九個藏族村寨而得名。九寨溝以三溝一百一十八海為代表，包括五灘十二瀑、十流數(shù)十泉等，以水為主境，與九寨十二峰組成高山河谷自然景觀。1982年被國務(wù)院批準為國家級風(fēng)景名勝區(qū)，1991年被聯(lián)合國教科文組織列入《世界自然遺產(chǎn)名錄》。九寨的山水形成于第四紀古冰川時期，現(xiàn)保存著大量第四紀古冰川遺跡。九寨溝地下水富含大量的碳酸鈣質(zhì)，湖底、湖堤、湖畔水邊均可見乳白色碳酸鈣形成的白色晶體；而來自雪山、森林的活水泉又異常潔凈，加之梯形狀的湖泊過濾，其水色愈加透明，能見度高達20米。翠海、疊瀑、彩林、雪峰、藏情，被譽為九寨“五絕”。水乳交融，美不勝收?！包S山歸來不看云，九寨歸來不看水”，九寨的精靈是水。湖（海子）、泉、溪、瀑、河、灘連綴一體，飛動與靜謐結(jié)合，剛烈與溫柔相濟，千言萬色、多彩多姿。高低錯落的群瀑自叢林峭壁跌落，高唱低吟，熱情洋溢。大大小小的群海置身于高山深谷之中，碧藍澄激、恬靜秀美；水中倒映著紅葉、綠樹、雪峰、藍天。一步一色，變換無窮，水在樹間流，樹在水中長，花樹開在水中央，有“中華水景之王”的美譽。人們說，如果世界上真有仙境，那肯定就是九寨溝。它是一個以高原湖泊眾多，瀑布宏偉壯觀，植物景觀奇妙著稱的美麗的名勝；是一個佳景薈萃、神奇莫測的曠世勝地；是一個不見纖塵、自然純凈的“童話世界”，那里還生活著大熊貓等多種珍禽異獸。九寨溝風(fēng)景區(qū)地處四川北部九寨的萬山叢中，總面積為6000公頃。因周圍有9個藏族村寨而得名，總面積約620平方公里，大約有52％的面積被茂密的原始森林所覆蓋。自然景色兼有湖泊、瀑布、雪山、森林之美。溝中地僻人稀，景物特異，富于原始自然風(fēng)貌。有長海、劍巖、諾日朗、樹正、扎如、黑海六大景區(qū)，以翠海、疊瀑、彩林、雪峰、藏情這五絕而馳名中外。其主溝呈“Y”字形，即由三條溝組成，總長50余千米。其間有114個湖泊、17個瀑布群、5處鈣華灘流、47眼泉水、11段激流，以1000余米的高差，穿行于雪峰、林、谷之間，逶迤50千米。它是中國唯一、世界罕見的巨大的以高山湖泊群和瀑布群為特色，集群海、溪流、瀑布、雪峰、林莽、鈣華灘流等自然景觀和藏族風(fēng)情為一體的風(fēng)景名勝區(qū)。溝內(nèi)最美的景致“海子”，是個有108個階梯的彩色湖泊，這里飛泉流瀑，奔騰傾瀉，山谷轟鳴，蔚為壯觀。樹正群海景區(qū)包括：盆景海蘆葦海火花海雙龍海臥龍?；鸹ê湔浩贅湔汉＠匣⒑ＶZ日朗瀑布則查洼溝景區(qū)包括：季節(jié)海五彩池長海日則溝景區(qū)包括：珍珠灘金鈴?？兹负Ｎ寤êＰ茇埡＜窈Ｌ禊Z海芳草海劍巖如果說，樹正群海清秀嫵媚，諾日朗景區(qū)奇麗妖嬈，那么遠離塵囂、鮮有人跡的劍巖風(fēng)景則更古樸、更野性、更原始沉寂，使你仿佛穿過時空隧道，一步跨進了遠古寧靜的史前社會。

課堂實訓(xùn)2.給文本設(shè)置顯示效果（1）給第3段文本設(shè)置色彩<fontcolor="red">（2）給第6段文本定義多級列表無序列表<ul><li>...</ul>有序列表<ol><li>...</ol>（3）給第1、2段文本設(shè)置預(yù)定義格式

課堂實訓(xùn)3.給網(wǎng)頁插入圖片并排版（1）給第3、4、5段文本后插入圖片<imgsrc="img/九寨風(fēng)景1.gif“/>（2）定義多級列表圖片的樣式（大小等）<imgsrc="img/九寨風(fēng)景1.gif"width="155"height="116“/>（3）給圖文混排思考：Align屬性的多個取值的頁面效果HTML文本圖象1

文本字體標題

字號

物理字體

邏輯字體

顏色

客戶端字體

字符實體

文字布局

行的控制

文字的對齊

文字的分區(qū)

列表

定制列表元素

預(yù)格式化文本

空白

多列文本

2圖象控制標簽

一個網(wǎng)站如果沒有圖片，那將是沒有生氣的，也吸引不了讀者的目光。一個好的設(shè)計師會用合適的圖片美化自己的設(shè)計，如果使用恰當會有點睛之筆的效果。

1.插入圖片：插入圖象的語句是<imgsrc=“圖片的URL”>,它沒有結(jié)束標簽。2圖象控制標簽基本語法