了得網計算機/網絡_HTML5+CSS3跨平臺網頁設計實例教程

編輯推薦

充分調研HTML5、CSS3新技術的實際應用情況，優選了53個來自於真實網站的典型教學案例，采用“任務驅動、精講多練、理論實踐一體化”的教學方法，改進和優化教學內容的組織方法和網頁設計技能的訓練方法，全方向促進基於HTML5 CSS3網頁應用設計能力的提升。

內容簡介

本書從網頁設計實際應用的角度理解HTML5和CSS素和新功能,合理選取教學內容。本書設置了以下10個: 站點與網頁的創建、網頁中文本與段落的應用設計、網頁中圖像與背景的應用設計、網頁中列表與表格的應用設計、網頁中超鏈接與導航欄的應用設計、網頁中表單與控件的應用設計、網頁中音頻與視頻的應用設計、網頁中圖形繪制與操作的應用設計、網頁中特效與交互的應用設計、素與整體布局的應用設計,將HTML5和CSS3的相關知識合理安排到各個中。
本書編者充分調研HTML5、CSS3新技術的實際應用情況,優選了50多個來自真實網站的典型教學案例,采用“任務驅動、精講多練、理論實踐一體化”的教學方法,改進和優化教學內容的組織方法和網頁設計技能的訓練方法,全方位促進基於HTML5 CSS3網頁應用設計能力的提升。每個面向教學全過程設置“知識→引導訓練→同步訓練→技術進階→問題探究&rar習題”6個教學環節，同時還提供了豐富的配套教學資源。
本書可以作為普通高等院校、高職高專或中等職業院校各專業網頁設計的教材,也可以作為網頁設計的培訓用書及技術用書。

【知識】1
【引導訓練】4
任務11創建&ldqu1”站點並瀏覽網頁4
任務111創建本地站點&ldqu1”4
任務112認識Dreamweaver CC的工作界面6
任務113打開與瀏覽網頁文檔0101.html10
任務12認知HTML5的典型標記和結構標簽13
任務121分析HTML代碼的組成結構13
任務122認知HTML5中典型的標記方法17
任務123認知HTML5主要的結構標簽17
【同步訓練】18
任務13打開並瀏覽網頁0103.html18
【技術進階】19
【問題探究】20
【知識】22
【引導訓練】37
任務21制作阿壩概況的文本網頁37
任務211建立站點及其目錄結構38
任務212創建與保存網頁文檔0201.html40
任務213設置網頁的項40
任務214設置頁面的整體屬性42
任務215在網頁中輸入文字48
任務216輸入與編輯網頁中的文本49
任務217格式化網頁文本50
任務218設置超鏈接與瀏覽網頁效果51
任務219在【代碼】視圖中查看CSS代碼和HTML代碼51
任務22使用CSS美化文本標題和文本段落55
【同步訓練】61
任務23制作介紹九寨溝概況的文本網頁61
【技術進階】62
【問題探究】65
3網頁中圖像與背景的應用設計68
【知識】68
【引導訓練】74
任務31制作介紹九寨溝景區景點的圖文混排網頁74
任務311使用【管理站點】對話框創建站點&ldqu3”75
任務312應用【文件】面板新建網頁0301.html76
任務313設置頁面的背景圖像77
任務314在網頁中輸入所需的文本內容與設置文本格式78
任務315插入圖像與設置圖像屬性79
任務316在“代碼”視圖中查看CSS代碼和HTML代碼81
任務32使用CSS美化網頁文本與圖片82
任務33創建多張圖片並行排列的網頁0303.html88
【同步訓練】90
任務34在網頁中設置圖片與背景屬性90
任務35創建圖文混排的網頁0305.html91
【技術進階】91
【問題探究】96
【知識】99
【引導訓練】105
任務41創建以項目列表形式表現新聞標題的網頁105
任務42創建以項目列表形式表現圖文按鈕的網頁109
任務43創建應用表格存放數據的網頁114
任務44創建包含個性化表格的網頁119
【同步訓練】122
任務45創建項目列表為主的旅遊攻略標題網頁122
任務46創建包含5行3列表格的網頁123
【技術進階】123
【問題探究】124
【知識】128
【引導訓練】131
任務51設置網頁中導航欄的超鏈接屬性131
任務52制作包含橫向主導航欄的網頁134
任務53制作包含縱向欄目導航欄的網頁139
任務54創建包含圖像熱點鏈接的網頁141
【同步訓練】145
任務55創建包含頂部橫向導航欄的網頁145
任務56創建包含多種不同形狀圖像鏈接的網頁146
【技術進階】146
【問題探究】150
【知識】152
【引導訓練】158
任務61在網頁中添加表單及表單控件158
任務62創建用戶注冊的表單網頁164
【同步訓練】171
任務63創建用戶登錄的表單網頁171
任務64創建用戶留言反饋網頁172
【技術進階】172
【問題探究】174
【知識】175
【引導訓練】177
任務71設計基於HTML5的網頁音樂播放器之一177
任務72設計基於HTML5的網頁視頻播放器之一179
【同步訓練】180
任務73設計基於HTML5的網頁音樂播放器之二180
任務74設計基於HTML5的網頁視頻播放器之二181
【技術進階】182
【問題探究】183
【知識】185
【引導訓練】194
任務81網頁中應用純CSS繪制各種規則圖形194
任務82網頁中應用純CSS繪制各種特色圖形197
任務83網頁中應用can素繪制各種圖形和文字200
任務84網頁中繪制菊花圖形206
【同步訓練】208
任務85網頁中繪制陰陽圖和五角星208
任務86網頁中繪制多種圖形和圖片208
【技術進階】209
【問題探究】210
【知識】214
【引導訓練】227
任務91網頁中顯示當前日期227
任務92網頁中不同時間段顯示不同的問候語231
任務93網頁中制作圓角按鈕和圓角圖片234
任務94設計網頁中的圓形導航按鈕239
任務95網頁中實現搜索框聚焦變長的效果242
任務96網頁中應用CSS實現超酷導航菜單243
任務97網頁中實現仿Office風格的多級菜單246
任務98網頁中實現圖片拖動操作251
【同步訓練】254
任務99網頁中不同的節假日顯示不同的問候語254
任務910網頁中創建下拉導航菜單255
【技術進階】255
【問題探究】255
【知識】262
【引導訓練】276
任務101體驗網頁的不同布局方式276
任務102創建浮動定位2列式布局的網頁281
任務103創建等距排列的4列式布局網頁289
任務104創建不規則布局網頁295
【同步訓練】300
任務105創建浮動定位2列規則分塊的網頁300
任務106創建3列式與4列式等距布局的網頁301
【技術進階】301
【問題探究】302
參考文獻305
附錄ACSS的屬性306
附錄BCSS的選擇器307

前言

目前,HTML5和CSS3已成為Web應用開發中的熱門技術,HTML5和CSS3不僅是兩項新的Web技術標準,更代表了HTML和CSS技術的發展趨勢,是Web開發領域的一次重大改變。HTML5具有便捷的描述性標簽、良好的多媒體支持、強大的Web應用、先進的選擇器、精美的視覺效果、方便的操作、跨文檔的消息通信、客戶端的方便存儲等諸多優勢。HTML5的突出優點是該技術可以進行跨平臺使用。CSS3是CSS技術的升級版本,CSS3語言開發是朝著模塊化方向發展的。CSS3中可以使用新的選擇器和屬性,而且可以很簡單地設計出許多理想的展示效果。
本書具有以下特色和創新。
(1) 編者充分調研了HTML5、CSS3新技術的實際應用情況,精心挑選教學案例。本書開發前期對HTML5、CSS3新技術在網頁中的實際應用情況做了大量細致的調研工作,經過多次篩選、優化和簡化,終形成了50多個典型教學案例,這些教學案例全部來自於真實網站,代表了網頁應用設計的實際需求和水平。
(2) 全書合理選取教學內容,科學設置。讓讀者從網頁設計實際應用的角度理解HTML5和CSS素和新功能,而不是過於注重學習HTML5和CSS3理論知識。同時，本書遵循學習者的認知規律,將基於HTML5 CSS3的網頁應用設計分為1。目前,HTML5和CSS3已成為Web應用開發中的熱門技術,HTML5和CSS3不僅是兩項新的Web技術標準,更代表了HTML和CSS技術的發展趨勢,是Web開發領域的一次重大改變。HTML5具有便捷的描述性標簽、良好的多媒體支持、強大的Web應用、先進的選擇器、精美的視覺效果、方便的操作、跨文檔的消息通信、客戶端的方便存儲等諸多優勢。HTML5的突出優點是該技術可以進行跨平臺使用。CSS3是CSS技術的升級版本,CSS3語言開發是朝著模塊化方向發展的。CSS3中可以使用新的選擇器和屬性,而且可以很簡單地設計出許多理想的展示效果。
本書具有以下特色和創新。
(1) 編者充分調研了HTML5、CSS3新技術的實際應用情況,精心挑選教學案例。本書開發前期對HTML5、CSS3新技術在網頁中的實際應用情況做了大量細致的調研工作,經過多次篩選、優化和簡化,終形成了50多個典型教學案例,這些教學案例全部來自於真實網站,代表了網頁應用設計的實際需求和水平。
(2) 全書合理選取教學內容,科學設置。讓讀者從網頁設計實際應用的角度理解HTML5和CSS素和新功能,而不是過於注重學習HTML5和CSS3理論知識。同時，本書遵循學習者的認知規律,將基於HTML5 CSS3的網頁應用設計分為1。
(3) 全書充分考慮教學實施的實際需求,每個面向教學全過程合理設置了6個教學環節: 知識→引導訓練→同步訓練→技術進階→問題探究&rar習題。書中將網頁設計的相關理論知識分層次進行分析與呈現,將網頁設計技能的訓練分階段實施,充分滿足不同專業、不同層次學習者學習網頁設計知識和訓練網頁設計技能的需求。全書還提供了500多道習題,讓學習者通過大量的練習進一步加深對HTML5、CSS3、網頁設計相關知識的理解,從而提升網頁設計的操作技能。
(4) 全書圍繞網頁應用的實際需要來設計具有很強操作性的任務。采用“任務驅動、精講多練、理論實踐一體化”的教學方法,全方位促進基於HTML5 CSS3網頁應用設計能力的提升。注重引導學習者在完成各個設計任務的過程中,逐步理解HTML5和CSS3的新功能和新特點,循序漸進地學會HTML5和CSS3的實際應用,從而熟練掌握網頁設計的方法和具備網頁設計的能力。
(5) 本書創新了教材的結構和呈現形式,采用紙質教材電子書相結合的方式。由於紙質教材篇幅的限制,同時要保證教學內容的繫統性,部分內容在紙質教材中隻列出主干內容,完整內容通過掃描二維碼可以在線瀏覽的習題也是以在線瀏覽方式提供。
(6) 本書配套教學資源豐富。設計、教學流程設計、網頁任務設計、教學案例及素材、電子教稿等教學資源一應俱全,力求做到想師生之所想,急師生之所急。
本書由湖南鐵道職業技術學院的陳承歡、顏珍平老師,包頭輕工職業技術學院的韓耀坤老師共同編寫,顏謙和、謝樹新、吳獻文、肖素華、林保康、王歡燕、張丹、王姿、裴來芝、潘玫玫、郭外萍、侯偉、張麗芳等多位老師也參與了教材的編寫。
由於編者水平有限,書中難免存在疏漏之處,敬請各位專家和讀者批評、指正。編者的QQ為1574819688，需要相關資源的讀者可通過QQ與編者聯繫。

編者2018年2月

在線試讀

/figure 其瀏覽效果如圖31所示。
圖31帶標題的圖片瀏覽效果
figcaption 標簽用於定義 figu素的標題,figcapt素應該被置於fig素的個或後素的位置。
2. CSS的背景設置與定位
1) 背景色的設置
CSS允許應用純色作為背景,可以使用backgroundcolor素設置背景色,這個屬性接受任何合法的顏色值。backgroundcolor屬性用素的背景顏色,其取值為指定的顏色或transparent(默認值即透明色)。也就是說,如素沒有指定背景色,那麼背景就是透明的,這素的背景纔能可見。一般都不采用這種方法進行設置,如素被設置了背景色,素就可以使用這種形式恢復成透明色的效果。(接正文是42mm)圖像是網頁中素之一,圖像不但能美化網頁,而且能夠更直觀地表達信息。在頁面中恰到好處地使用圖像,能使網頁更加生動、形像和美觀。
【知識】〖*2〗1. HTML5中常用的圖片標簽HTML5的圖像標簽如表31所示。表31HTML5的圖像標簽標簽名稱標簽描述標簽名稱標簽描述定義圖像

定義fig素的標題定義圖像映射

標簽
標簽表示一段獨立的流內容(圖像、圖表、照片、代碼等),一般表示文檔主體流內容中的一個,fig素的內容應該與主內容相關,但如果被刪除,則不應對文檔流產生影響。使用figcapt素可以為fig素組添加標題。向文檔中插入帶有標題圖像的示例代碼如下:

九寨溝風光

其瀏覽效果如圖31所示。
圖31帶標題的圖片瀏覽效果
標簽用於定義2. CSS的背景設置與定位
1) 背景色的設置
CSS允許應用純色作為背景,可以使用backgroundcolor素設置背景色,這個屬性接受任何合法的顏色值。backgroundcolor屬性用素的背景顏色,其取值為指定的顏色或transparent(默認值即透明色)。也就是說,如素沒有指定背景色,那麼背景就是透明的,這素的背景纔能可見。一般都不采用這種方法進行設置,如素被設置了背景色,素就可以使用這種形式恢復成透明色的效果。
HTML5 CSS3跨平臺網頁設計實例3網頁中圖像與背景的應用設計定義背景顏色的示例代碼如下: .main { background-color: #fff;}
p {background-color: gray;}如果希望背素中的文本向外少有延伸,隻需增加一些內邊距即可。p {background-color: gray; padding: 20px;}可以為網頁中素設置背景顏色,也可以為HTML的標簽設置背景顏色。
2) 背景圖像的設置
在CSS3之前,背景圖片的尺寸是由圖片的實際尺寸決定的。在CSS3中,可以規定背景圖片的尺寸,這就允許我們在不同的環境中重復使用背景圖片。可以以像素或百分比規定尺寸,如果以百分比規定尺寸,那麼尺寸相素的寬度和高度。
背景圖像可以作為修飾要素在網頁布局與排版中使用,CSS為了實現網頁背景圖像廣泛應用,提供了大量的屬性,且得到了各大瀏覽器的廣泛支持,綜合利用這些屬性可以提高網頁布局和排版的靈活性和適應能力。
CSS也允許使用背景圖像創建相當復雜的效果,要把圖像放入背景,需要使用backgroundimage屬性,該屬性的默認值是none,表示背景上沒有放置任何圖像。如果需要設置一個背景圖像,必須為這個屬性設置一個URL值,示例代碼如下: body {background-image: url(bg_01.gif);}大多數背景都應用到b素,不過並不僅限於此。下面的示例代碼為一個段落應用了一個背景,而不會對文檔的其他部分應用背景。p.flower {background-image: url(bg_02.gif);}甚至可以素設置背景圖像,下面的示例代碼為一個鏈接設置了背景圖像。a.radio {background-image: url(bg_03.gif);}backgroundimage也不能繼承,事實上,所有背景屬性都不能繼承。
(1) backgroundimage。backgroundimage屬性用於定義對像的背景圖像,當背景圖像與背景顏色(backgroundcolor)同時被定義時,背景圖像覆蓋於背景顏色之上。其取值可以為none(無背景圖像)或者為圖像地址,可以使用或相對地址指定背景圖像。
(2) backgroundsize。backgroundsize屬性用於定義背景圖像的尺寸,其屬性值可以為數值或者auto,也可以是percentage、cover和contain。示例代碼如下:background-size: 200px;
background-size: 200px 100px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;如果屬性值為數值或者auto,用於設置背景圖像的高度和寬度,第1個值設置背景圖的寬度,第2個值設置背景圖的高度,其單位可以為像素(px)或者百分比(%),如果隻設置1個值,則第2個值會被設置為auto。
如果屬性值為percentage,則width和height是針對背景區域,不是背景圖像大小素的百分比來設置背景圖像的寬度和高度,同樣第1個值設置寬度,第2個值設置高度。如果隻設置1個值,則第2個值會被設置為auto。
如果屬性值為cover,則把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
如果屬性值為contain,則把背景圖像擴展至尺寸,以使其寬度和高度完全適應內容區域。
(3) backgroundposition。backgroundposition屬性用於定義對像背景圖像的位置,應先定義對像的backgroundimage屬性,該屬性不受對像的填充屬性padding的影響。默認值為0,即背景圖像默認位於對像內容區塊的左上角。如果隻指定了一個值,該值將用於橫坐標,縱坐標默認為50%。如果指定了兩個值,個值用於橫坐標,第二個值用於縱坐標。
背景圖像的位置由backgroundpositionx和backgroundpositiony兩個屬性綜合確定。backgroundpositionx定位背景圖像的橫坐標位置,默認值為0,其取值包括left、center、right和數值。backgroundpositiony定位背景圖像的縱坐標位置,默認值為0,其取值包括top、center、bottom和數值。當背景圖像的位置坐標定義為數值時,單位可以取長度單位,也可以為百分比。
下面的示例代碼在b素中將一個背景圖像居中放置。body {
background-image:url('bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}(4) backgroundrepeat。backgroundrepeat屬性用於定義對像的背景圖像是否重復以及如何平鋪,應先定義對像的backgroundimage屬性。其取值包括repeat(重復,即背景圖像在縱向和橫向上都平鋪)、norepeat(不重復)、repeatx(橫向平鋪)和repeaty(縱向平鋪)。
如果需要在頁面上對背景圖像進行平鋪,可以使用backgroundrepeat屬性。屬性值repeat導致圖像在水平垂直方向上都平鋪,就像以往背景圖像的通常做法一樣。repeatx和repeaty分別導致圖像隻在水平或垂直方向上重復,norepeat則不允許圖像在任何方向上平鋪。背景圖像默認將素的左上角開始,示例代碼如下: body {
background-image: url(bg_03.gif);
background-repeat: repeat-y;
}網頁設計時,經常使用橫向重復屬性使一些小圖片形成大的背景圖像,主要應用於導航欄、標題欄以及按鈕等。
(5) backgroundorigin。backgroundorigin屬性用於規定背景圖片的定位區域,背景圖片可以放置於contentbox、paddingbox或borderbox區域,示意圖如圖32所示。
圖32背景圖片放置位置的示意圖
在contentbox中定位背景圖片的示例代碼如下: div {
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}(6) backgroundattachment。backgroundattachment屬性用於定義背景圖像是否隨對像內容滾動還是固定位置。其取值包括scroll(背景圖像隨對像內容滾動)和fixed(背景圖像處在固定位置),默認值是scroll,也就是說在默認的情況下,背景會隨文檔滾動。
如果文檔比較長,那麼當文檔向下滾動時背景圖像也會隨之滾動,當文檔滾動到超過圖像的位置時圖像就會消失。可以通過backgroundattachment屬性防止這種滾動,通過這個屬性,可以聲明圖像相對於可視區是固定的(fixed),因此不會受到滾動的影響。
對於背景圖像固定的頁面,瀏覽網頁時可以看到頁面滾動時背景仍保持固定,網頁中的內容可以浮動在背景圖像的不同位置。背景圖像固定一般用於整個網頁的背景設置,即設置body標簽的背景屬性,示例代碼如下:body {
background-attachment: fixed;
background-image: url(../images/bg0301. jpg);
background-repeat: repeat-y;
}(7) background。background屬性是一個復合屬性,可以快速定義背景圖像,其組成包括backgroundcolor、backgroundimage、backgroundposition、backgroundrepeat和backgroundattachment,默認值為transparent none repeat scroll 0,如果其單個屬性沒有顯式定義,則取其默認值,示例代碼如下:background: #c63 url(images/0303bg01.gif) repeat-x left top fixed;該屬性不可繼承,如果未指定素的背景顏色和背景圖素下面顯示。
3. 背景定位的方法
1) 應用位置關鍵字
圖像放置關鍵字容易理解,其作用如其名稱所表明的。例如,top right使圖像素內邊距區的右上角。根據規範,位置關鍵字可以按任何順序出現,隻要保證不超過兩個關鍵字(一個對應水平方向,另一個對應垂直方向)。如果隻出現一個關鍵字,則認為另一個關鍵字是center。所以,如果希望每個段落的中部上方出現一個圖像,隻需聲明如下所示的代碼。p {
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}2) 應用百分數值
百分數值的表現方式更為復雜。假設希望用百分數值將圖素中居中,這很容易,示例代碼如下:

書摘插畫

商品搜索

商品分类

【醫學】

【各大出版社】