HTML5+CSS3移動Web開發(fā)實(shí)戰(zhàn)單元2--文本新聞瀏覽網(wǎng)頁設(shè)計

1、單元2 文本新聞瀏覽網(wǎng)頁設(shè)計 新聞網(wǎng)站通常以文本新聞為主體，本單元通過對新聞網(wǎng)站的導(dǎo)航網(wǎng)頁和文本新聞網(wǎng)頁設(shè)計的探析與訓(xùn)練，重點(diǎn)學(xué)習(xí)HTML5中常用的文本標(biāo)簽、CSS文本屬性、字體屬性、顏色值及顏色表示方法、CSS鏈接屬性等，學(xué)會網(wǎng)頁元素的水平對齊、CSS導(dǎo)航欄的設(shè)計，掌握文本新聞網(wǎng)頁和導(dǎo)航網(wǎng)頁的設(shè)計方法。教學(xué)導(dǎo)航教學(xué)目標(biāo)（1）熟悉HTML5中常用的文本標(biāo)簽和CSS文本屬性（2）熟悉CSS的字體屬性、顏色值及顏色表示方法、CSS鏈接屬性（3）學(xué)會網(wǎng)頁元素的水平對齊設(shè)置方法（4）學(xué)會CSS導(dǎo)航欄的設(shè)計方法（5）掌握文本新聞網(wǎng)頁和導(dǎo)航網(wǎng)頁的設(shè)計方法關(guān) 鍵 字新聞網(wǎng)站文本網(wǎng)頁導(dǎo)航網(wǎng)頁文本標(biāo)簽與屬性字體

2、屬性顏色值鏈接屬性參考資料（1）HTML5的常用標(biāo)簽及其屬性、方法與事件參考附錄B（2）CSS的屬性參考附錄C（3）CSS的各種選擇器的含義和用法參考附錄D教學(xué)方法任務(wù)驅(qū)動法、分組討論法、理論實(shí)踐一體化、探究學(xué)習(xí)法課時建議8課時【任務(wù)2-1】探析手機(jī)搜狐網(wǎng)的名站導(dǎo)航網(wǎng)頁【效果展示】 手機(jī)搜狐網(wǎng)的名站導(dǎo)航網(wǎng)頁0201.html的瀏覽效果如圖2-1所示。 手機(jī)搜狐網(wǎng)的名站導(dǎo)航網(wǎng)頁0201.html的主體結(jié)構(gòu)為上、中、下結(jié)構(gòu)，頂部為標(biāo)題文本，中部包括多個熱點(diǎn)網(wǎng)站的鏈接按鈕和多行分類網(wǎng)站導(dǎo)航鏈接，底部包括多個導(dǎo)航鏈接和版權(quán)信息。圖2-1手機(jī)搜狐網(wǎng)的名站導(dǎo)航網(wǎng)頁0201.html的瀏覽效果【網(wǎng)頁探析】1

3、網(wǎng)頁0201.html的HTML代碼探析2網(wǎng)頁0201.html的CSS代碼探析知識梳理1HTML5中常用的文本標(biāo)簽 （1）標(biāo)簽與標(biāo)簽 標(biāo)簽用于描述文檔或文檔某個部分的細(xì)節(jié)，目前只有Chrome瀏覽器支持標(biāo)簽，可以與標(biāo)簽配合使用。 （2）標(biāo)簽 標(biāo)簽用于設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。 （3）標(biāo)簽、標(biāo)簽與標(biāo)簽 標(biāo)簽用于定義ruby注釋（中文注音或字符）。與標(biāo)簽一同使用。 元素由一個或多個字符（需要一個解釋或發(fā)音）和一個提供該信息的元素組成，還包括可選的元素，定義當(dāng)瀏覽器不支持標(biāo)簽時顯示的內(nèi)容。 （4）標(biāo)簽 標(biāo)簽主要用來在視覺上向用戶呈現(xiàn)那些需要突出顯示或高亮顯示的文字，典型應(yīng)用是搜

4、索結(jié)果中高亮顯示搜索關(guān)鍵字。 （5）標(biāo)簽 標(biāo)簽用于定義日期或時間，也可以兩者同時。 （6）標(biāo)簽 標(biāo)簽用于定義度量衡。僅用于已知最大和最小值的度量。（7）標(biāo)簽 標(biāo)簽用于定義任何類型任務(wù)的運(yùn)行進(jìn)度，可以使用元素顯示JavaScript中耗時時間函數(shù)的進(jìn)程。 （8） 標(biāo)簽與標(biāo)簽 標(biāo)簽可插入一個簡單的換行符，使用來輸入空行，而不是分割段落。 標(biāo)簽是空標(biāo)簽（意味著它沒有結(jié)束標(biāo)簽，因此這是錯誤的：）。在XHTML中，把結(jié)束標(biāo)簽放在開始標(biāo)簽中，也就是。2CSS文本屬性（Text） CSS文本屬性可定義文本的外觀，通過文本屬性，可以改變文本的顏色、字符間距、對齊文本、裝飾文本，以及對文本進(jìn)行縮進(jìn)等。（1）縮進(jìn)

5、文本 把Web頁面中段落的第一行縮進(jìn)，這是一種最常用的文本格式化效果。 CSS提供了text-indent屬性，該屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。 通過使用text-indent屬性，所有元素的第一行都可以縮進(jìn)一個給定的長度，甚至該長度可以是負(fù)值。（2）水平對齊 text-align是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊方式，其取值left、right和center會導(dǎo)致元素中的文本分別左對齊、右對齊和居中。（3）字間隔 word-spacing屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔，其默認(rèn)值normal與設(shè)置值為0是一樣的。 word-spacing屬性接受一個正長度值或負(fù)長度

6、值。 如果提供一個正長度值，那么文字之間的間隔就會增加。 為word-spacing設(shè)置一個負(fù)值，就會把文字拉近。（4）字母間隔 與word-spacing屬性一樣，letter-spacing屬性的可取值包括所有長度，默認(rèn)關(guān)鍵字是normal（這與letter-spacing:0相同）。 輸入的長度值會使字母之間的間隔增加或減少指定的量。（5）字符轉(zhuǎn)換 text-transform屬性處理文本的大小寫，該屬性有4個取值：none、uppercase、lowercase和capitalize。 默認(rèn)值none對文本不做任何改動，將使用源文檔中的原有大小寫。 顧名思義，uppercase和low

7、ercase將文本轉(zhuǎn)換為全大寫和全小寫字符，capitalize只對每個單詞的首字母大寫。（6）文本裝飾 text-decoration屬性提供了很多非常有趣的行為，text-decoration有5個值：none、underline、overline、line-through、blink，不出所料，underline會對元素加下劃線， overline的作用恰好相反，會在文本的頂端畫一個上劃線，line-through則在文本中間畫一個貫穿線，blink會讓文本閃爍。注意：如果顯式地用這樣一個規(guī)則去掉鏈接的下劃線，那么超鏈接與正常文本之間在視覺上的唯一差別就是顏色。（7）文本陰影 在CSS3

8、中，text-shadow可向文本應(yīng)用陰影，允許規(guī)定水平陰影、垂直陰影、模糊距離及陰影的顏色。（8）處理空白符 white-space屬性會影響到對源文檔中的空格、換行和tab字符的處理。 通過使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。 從某種程度上講，默認(rèn)的XHTML處理已經(jīng)完成了空白符處理它會把所有空白符合并為一個空格。3CSS字體屬性（Font） CSS字體屬性定義文本的字體系列、大小、加粗、風(fēng)格（如斜體）和變形（如小型大寫字母）。（1）CSS字體系列 在CSS中，有兩種不同類型的字體系列： 通用字體系列：擁有相似外觀的字體系統(tǒng)組合（如“serif”或“monosp

9、ace”）。 特定字體系列：具體的字體系列（如“Times”或“Courier”）。除了各種特定的字體系列外，CSS定義了5種通用字體系列：serif 字體、sans-serif 字體、monospace字體、cursive 字體、fantasy字體。（2）字體風(fēng)格 font-style屬性最常用于規(guī)定斜體文本，該屬性有3個取值：normal（文本正常顯示）、italic（文本斜體顯示）、oblique（文本傾斜顯示）。（3）字體變形 font-variant屬性可以設(shè)定小型大寫字母，小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母采用不同大小的大寫字母。（4）字體加粗 font-we

10、ight屬性設(shè)置文本的粗細(xì)，使用bold關(guān)鍵字可以將文本設(shè)置為粗體。 關(guān)鍵字100900為字體指定了9級加粗度。 如果一個字體內(nèi)置了這些加粗級別，那么這些數(shù)字就直接映射到預(yù)定義的級別，100對應(yīng)最細(xì)的字體變形，900對應(yīng)最粗的字體變形。 數(shù)字400等價于normal，而700等價于bold。（5）字體大小 font-size屬性設(shè)置文本的大小，font-size 值可以是絕對或相對值。 絕對值是指將文本設(shè)置為指定的大小，不允許用戶在所有瀏覽器中改變文本大小，絕對大小在確定了輸出的物理尺寸時很有用。 相對大小是指相對于周圍的元素來設(shè)置大小，允許用戶在瀏覽器改變文本大小。注意：如果沒有規(guī)定字體大小

11、，普通文本（如段落）的默認(rèn)大小是16px（16px=1em）。（6）CSS3 font-face 規(guī)則 在CSS3之前，我們必須使用已在用戶計算機(jī)上安裝好的字體，通過CSS3，則可以使用我們喜歡的任意字體。 當(dāng)我們找到或購買到希望使用的字體時，可將該字體文件存放到Web服務(wù)器上，它會在需要時被自動下載到用戶的計算機(jī)上。描述符名稱允許的取值使用說明font-familyname必需項，規(guī)定字體的名稱srcURL必需項，定義字體文件的 URLfont-stretchnormal、condensed、ultra-condensed、extra-condensed、semi-condensed、exp

12、anded、semi-expanded、extra-expanded、ultra-expanded可選項，定義如何拉伸字體，默認(rèn)是“normal”表2-6能夠在font-face 規(guī)則中定義的字體描述符描述符名稱允許的取值使用說明font-stylenormal、italic、oblique可選項，定義字體的樣式，默認(rèn)是“normal”font-weightnormal、bold、100、200、300、400、500、600、700、800、900可選項，定義字體的粗細(xì)，默認(rèn)是“normal”unicode-rangeunicode-range可選項，定義字體支持的UNICODE字符范圍，默

13、認(rèn)是 “U+0-10FFFF”續(xù)表4CSS顏色 顏色是通過對紅、綠和藍(lán)光的組合來顯示的。（1）顏色值 CSS顏色使用組合了紅、綠、藍(lán)顏色值（RGB）的十六進(jìn)制（HEX）表示法進(jìn)行定義。 對光源進(jìn)行設(shè)置的最低值可以是0（十六進(jìn)制00），最高值是255（十六進(jìn)制FF）。 十六進(jìn)制值使用3個兩位數(shù)來編寫，并以#符號開頭。CSS常用顏色的HEX表示法與RGB表示法如表2-7所示。顏色HEX表示法顏色RGB表示法顏色HEX表示法顏色RGB表示法#000000rgb(0,0,0)#00FFFFrgb(0,255,255)#FF0000rgb(255,0,0)#FF00FFrgb(255,0,255)#00

14、FF00rgb(0,255,0)#FFFFFFrgb(255,255,255)#0000FFrgb(0,0,255)#CCCCCCrgb(204,204,204)#FFFF00rgb(255,255,0)#C0rgb(192,192,192)表2-7CSS常用顏色的HEX表示法與RGB表示法（2）CSS中的顏色的表示方法 十六進(jìn)制顏色 十六進(jìn)制顏色是這樣規(guī)定的：#RRGGBB，其中的RR（紅色）、GG（綠色）、BB（藍(lán)色）十六進(jìn)制整數(shù)規(guī)定了顏色的成分，所有值必須介于0與FF之間。 所有瀏覽器都支持十六進(jìn)制顏色值。 RGB顏色 RGB顏色值的表示方式為rgb(red, green, blue)，

15、每個參數(shù)(red、green及blue)定義顏色的強(qiáng)度，可以是介于0255之間的整數(shù)，或者是百分比值（從0%100%）。所有瀏覽器都支持RGB顏色值。 RGBA顏色 RGBA顏色值是RGB顏色值的擴(kuò)展，帶有一個alpha通道（它規(guī)定了對象的不透明度）。 RGBA顏色值的表示方式為：rgba(red, green, blue, alpha)，其中alpha參數(shù)是介于0.0（完全透明）與1.0（完全不透明）之間的數(shù)字。RGBA顏色值得到以下瀏覽器的支持：IE9+、Firefox 3+、Chrome、Safari及Opera 10+。 HSL顏色 HSL指的是Bue（色調(diào)）、Saturation （

16、飽和度）、Lightness（亮度）。 HSL顏色值的表示方式為：hsl(hue, saturation, lightness)。 HSLA顏色 HSLA顏色值是HSL顏色值的擴(kuò)展，帶有一個alpha 通道（它規(guī)定了對象的不透明度）。HSLA顏色值表示方式為：hsla(hue, saturation, lightness, alpha)，其中的alpha參數(shù)定義不透明度，alpha參數(shù)是介于0.0（完全透明）與1.0（完全不透明）之間的數(shù)字。 預(yù)定義/跨瀏覽器顏色名 HTML和CSS顏色規(guī)范中定義了147種顏色名（17種標(biāo)準(zhǔn)顏色加130種其他顏色）。 17種標(biāo)準(zhǔn)色分別是aqua、black、b

17、lue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。所有瀏覽器都支持的顏色名。5網(wǎng)頁元素的水平對齊 在CSS中，可以使用多種屬性來水平對齊元素。 （1）使用text-align屬性水平對齊元素 塊元素指的是占據(jù)全部可用寬度的元素，并且在其前后都會換行。 網(wǎng)頁中常見的塊元素有、。 text-align是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊方式。 （2）使用margin屬性水平對齊塊元素 將塊級元素或表元素居中，要通過在這些元素上適當(dāng)?shù)卦O(shè)置左、右外邊距來

18、實(shí)現(xiàn)，可通過將左和右外邊距設(shè)置為“auto”來對齊塊元素。 把左和右外邊距設(shè)置為auto，規(guī)定的是均等地分配可用的外邊距，結(jié)果就是居中的元素。 （3）使用position屬性進(jìn)行左和右對齊 對齊元素的方法之一是使用絕對定位，絕對定位元素會從正常流中刪除，并且能夠交疊元素。 （4）使用float屬性來進(jìn)行左和右對齊6CSS鏈接屬性（Hyperlink）（1）設(shè)置鏈接的樣式 鏈接的特殊性在于能夠根據(jù)它們所處的狀態(tài)來設(shè)置它們的樣式，能夠設(shè)置鏈接樣式的CSS屬性有很多種（如color、font-family、background等）。 鏈接有4種狀態(tài)：a:link（普通的、未被訪問的鏈接）、a:vis

19、ited（用戶已訪問的鏈接）、a:hover（鼠標(biāo)指針位于鏈接的上方）和a:active （鏈接被單擊的時刻）。（2）常見的鏈接樣式 文本修飾 text-decoration屬性大多用于去掉鏈接中的下劃線。 背景色 background-color屬性用于設(shè)置鏈接的背景色。7CSS導(dǎo)航欄 擁有易用的導(dǎo)航欄對于任何網(wǎng)站都很重要，通過CSS，能夠把乏味的HTML菜單轉(zhuǎn)換為漂亮的導(dǎo)航欄。 導(dǎo)航欄基本上是一個鏈接列表，因此使用和 元素是非常合適的。（1）垂直導(dǎo)航欄（2）水平導(dǎo)航欄 行內(nèi)列表項 對列表項進(jìn)行浮動引導(dǎo)訓(xùn)練【任務(wù)2-2】設(shè)計手機(jī)搜狐網(wǎng)的站內(nèi)導(dǎo)航網(wǎng)頁【任務(wù)描述】 編寫HTML代碼和CSS代碼，

20、設(shè)計圖2-2所示手機(jī)搜狐網(wǎng)的站內(nèi)導(dǎo)航網(wǎng)頁0202.html。 手機(jī)搜狐網(wǎng)的站內(nèi)導(dǎo)航網(wǎng)頁0202.html的主體結(jié)構(gòu)為上、中、下結(jié)構(gòu)，如圖2-2所示。圖2-2手機(jī)搜狐網(wǎng)的站內(nèi)導(dǎo)航網(wǎng)頁0202.html的瀏覽效果 頂部內(nèi)容包括返回鏈接按鈕、標(biāo)題文字和主頁鏈接按鈕，中部內(nèi)容包括多行分類的站內(nèi)頁面導(dǎo)航超鏈接，底部內(nèi)容包括多個超鏈接和版權(quán)信息。【任務(wù)實(shí)施】1網(wǎng)頁0202.html的主體結(jié)構(gòu)設(shè)計 在本地硬盤的文件夾“02文本新聞瀏覽網(wǎng)頁設(shè)計0202”中創(chuàng)建網(wǎng)頁0202.html。 （1）定義網(wǎng)頁0202.html通用CSS代碼 （2）定義網(wǎng)頁0202.html主體結(jié)構(gòu)的CSS代碼 （3）編寫網(wǎng)頁0202.

21、html主體結(jié)構(gòu)的HTML代碼2網(wǎng)頁0202.html的局部內(nèi)容設(shè)計（1）網(wǎng)頁0202.html的頂部內(nèi)容設(shè)計（2）網(wǎng)頁0202.html的中部內(nèi)容設(shè)計（3）網(wǎng)頁0202.html的底部內(nèi)容設(shè)計【網(wǎng)頁瀏覽】 保存網(wǎng)頁0202.html，在瀏覽器Google Chrome中的瀏覽效果如圖2-2所示?！救蝿?wù)2-3】設(shè)計手機(jī)搜狐網(wǎng)的文本新聞網(wǎng)頁【任務(wù)描述】 編寫HTML代碼和CSS代碼，設(shè)計圖2-3所示手機(jī)搜狐網(wǎng)的文本新聞網(wǎng)頁0203.html。 手機(jī)搜狐網(wǎng)的文本新聞網(wǎng)頁0203.html的主體結(jié)構(gòu)為上、中、下結(jié)構(gòu)，如圖2-3所示。 頂部內(nèi)容包括標(biāo)題文字和主頁鏈接按鈕，中部內(nèi)容包括文本新聞的標(biāo)題和正

22、文，底部內(nèi)容包括多個超鏈接和版權(quán)信息。圖2-3手機(jī)搜狐網(wǎng)的文本新聞網(wǎng)頁0203.html的瀏覽效果 網(wǎng)頁0203.html頂部結(jié)構(gòu)使用標(biāo)簽實(shí)現(xiàn)，中部結(jié)構(gòu)使用標(biāo)簽實(shí)現(xiàn)，底部結(jié)構(gòu)使用標(biāo)簽實(shí)現(xiàn)?！救蝿?wù)實(shí)施】1網(wǎng)頁0203.html的主體結(jié)構(gòu)設(shè)計 在本地硬盤的文件夾“02文本新聞瀏覽網(wǎng)頁設(shè)計0203”中創(chuàng)建網(wǎng)頁0203.html。 （1）定義網(wǎng)頁0203.html通用CSS代碼 （2）定義網(wǎng)頁0203.html主體結(jié)構(gòu)的CSS 代碼 （3）編寫網(wǎng)頁0203.html主體結(jié)構(gòu)的HTML代碼2網(wǎng)頁0203.html的局部內(nèi)容設(shè)計（1）網(wǎng)頁0203.html的頂部內(nèi)容設(shè)計（2）網(wǎng)頁0203.html的中部內(nèi)

23、容設(shè)計（3）網(wǎng)頁0203.html的底部內(nèi)容設(shè)計【網(wǎng)頁瀏覽】 保存網(wǎng)頁0203.html，在瀏覽器Google Chrome中的瀏覽效果如圖2-3所示。同步訓(xùn)練【任務(wù)2-4】設(shè)計新華網(wǎng)手機(jī)版的網(wǎng)址導(dǎo)航網(wǎng)頁【任務(wù)描述】【任務(wù)實(shí)施】1網(wǎng)頁0204.html的主體結(jié)構(gòu)設(shè)計 （1）定義網(wǎng)頁0204.html通用CSS代碼 （2）定義網(wǎng)頁0204.html主體結(jié)構(gòu)的CSS代碼 （3）編寫網(wǎng)頁0204.html主體結(jié)構(gòu)的HTML代碼2網(wǎng)頁0204.html的局部內(nèi)容設(shè)計（1）網(wǎng)頁0204.html的頂部內(nèi)容設(shè)計（2）網(wǎng)頁0204.html的中部內(nèi)容設(shè)計（3）網(wǎng)頁0204.html的底部內(nèi)容設(shè)計【網(wǎng)頁瀏覽】

24、 保存網(wǎng)頁0204.html，在瀏覽器Google Chrome中的瀏覽效果如圖2-4所示。圖2-4新華網(wǎng)手機(jī)版的網(wǎng)址導(dǎo)航網(wǎng)頁0204.html的瀏覽效果【任務(wù)2-5】設(shè)計新華網(wǎng)手機(jī)版的文本新聞網(wǎng)頁 【任務(wù)描述】 編寫HTML代碼和CSS代碼，設(shè)計圖2-5所示新華網(wǎng)移動版的文本新聞網(wǎng)頁0205.html。圖2-5新華網(wǎng)移動版的文本新聞網(wǎng)頁0205.html的瀏覽效果 在網(wǎng)頁0205.html中單擊“A+”超鏈接，可以將文本新聞的文字大小設(shè)置為24px，單擊“A-”超鏈接，可以將文本新聞的文字大小重新設(shè)置為16px，即該網(wǎng)頁中文本新聞的文字大小可以在“24px”和“16px”之間進(jìn)行動態(tài)切換。 新華網(wǎng)移動版的文本新聞網(wǎng)頁