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

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

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

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

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

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

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

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

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

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

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

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

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

13、認是 “U+0-10FFFF”續(xù)表4CSS顏色 顏色是通過對紅、綠和藍光的組合來顯示的。（1）顏色值 CSS顏色使用組合了紅、綠、藍顏色值（RGB）的十六進制（HEX）表示法進行定義。 對光源進行設置的最低值可以是0（十六進制00），最高值是255（十六進制FF）。 十六進制值使用3個兩位數來編寫，并以#符號開頭。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中的顏色的表示方法 十六進制顏色 十六進制顏色是這樣規(guī)定的：#RRGGBB，其中的RR（紅色）、GG（綠色）、BB（藍色）十六進制整數規(guī)定了顏色的成分，所有值必須介于0與FF之間。 所有瀏覽器都支持十六進制顏色值。 RGB顏色 RGB顏色值的表示方式為rgb(red, green, blue)，

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

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

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

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

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

20、設計圖2-2所示手機搜狐網的站內導航網頁0202.html。 手機搜狐網的站內導航網頁0202.html的主體結構為上、中、下結構，如圖2-2所示。圖2-2手機搜狐網的站內導航網頁0202.html的瀏覽效果 頂部內容包括返回鏈接按鈕、標題文字和主頁鏈接按鈕，中部內容包括多行分類的站內頁面導航超鏈接，底部內容包括多個超鏈接和版權信息?！救蝿諏嵤?網頁0202.html的主體結構設計 在本地硬盤的文件夾“02文本新聞瀏覽網頁設計0202”中創(chuàng)建網頁0202.html。 （1）定義網頁0202.html通用CSS代碼 （2）定義網頁0202.html主體結構的CSS代碼 （3）編寫網頁0202.

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

22、文，底部內容包括多個超鏈接和版權信息。圖2-3手機搜狐網的文本新聞網頁0203.html的瀏覽效果 網頁0203.html頂部結構使用標簽實現，中部結構使用標簽實現，底部結構使用標簽實現?！救蝿諏嵤?網頁0203.html的主體結構設計 在本地硬盤的文件夾“02文本新聞瀏覽網頁設計0203”中創(chuàng)建網頁0203.html。 （1）定義網頁0203.html通用CSS代碼 （2）定義網頁0203.html主體結構的CSS 代碼 （3）編寫網頁0203.html主體結構的HTML代碼2網頁0203.html的局部內容設計（1）網頁0203.html的頂部內容設計（2）網頁0203.html的中部內

23、容設計（3）網頁0203.html的底部內容設計【網頁瀏覽】 保存網頁0203.html，在瀏覽器Google Chrome中的瀏覽效果如圖2-3所示。同步訓練【任務2-4】設計新華網手機版的網址導航網頁【任務描述】【任務實施】1網頁0204.html的主體結構設計 （1）定義網頁0204.html通用CSS代碼 （2）定義網頁0204.html主體結構的CSS代碼 （3）編寫網頁0204.html主體結構的HTML代碼2網頁0204.html的局部內容設計（1）網頁0204.html的頂部內容設計（2）網頁0204.html的中部內容設計（3）網頁0204.html的底部內容設計【網頁瀏覽】

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