掃一掃
關注中圖網
官方微博
本類五星書更多>
-
>
全國計算機等級考試最新真考題庫模擬考場及詳解·二級MSOffice高級應用
-
>
決戰行測5000題(言語理解與表達)
-
>
軟件性能測試.分析與調優實踐之路
-
>
第一行代碼Android
-
>
JAVA持續交付
-
>
EXCEL最強教科書(完全版)(全彩印刷)
-
>
深度學習
高職高專計算機任務驅動模式教材HTML5+CSS3跨平臺網頁設計實例教程 版權信息
- ISBN：9787302502142
- 條形碼：9787302502142 ; 978-7-302-50214-2
- 裝幀：一般膠版紙
- 冊數：暫無
- 重量：暫無
- 所屬分類：>
高職高專計算機任務驅動模式教材HTML5+CSS3跨平臺網頁設計實例教程 本書特色
充分調研HTML5、CSS3新技術的實際應用情況，優選了53個來自于真實網站的典型教學案例，采用“任務驅動、精講多練、理論實踐一體化”的教學方法，改進和優化教學內容的組織方法和網頁設計技能的訓練方法，全方向促進基于HTML5+CSS3網頁應用設計能力的提升。
高職高專計算機任務驅動模式教材HTML5+CSS3跨平臺網頁設計實例教程 內容簡介
本書從網頁設計實際應用的角度理解HTML5和CSS3的新元素和新功能,合理選取教學內容。本書設置了以下10個教學單元: 站點與網頁的創建、網頁中文本與段落的應用設計、網頁中圖像與背景的應用設計、網頁中列表與表格的應用設計、網頁中超鏈接與導航欄的應用設計、網頁中表單與控件的應用設計、網頁中音頻與視頻的應用設計、網頁中圖形繪制與操作的應用設計、網頁中與交互的應用設計、網頁中元素與整體布局的應用設計,將HTML5和CSS3的相關知識合理安排到各個教學單元中。 本書編者充分調研HTML5、CSS3新技術的實際應用情況,優選了50多個來自真實網站的典型教學案例,采用“任務驅動、精講多練、理論實踐一體化”的教學方法,改進和優化教學內容的組織方法和網頁設計技能的訓練方法,多方面促進基于HTML5+CSS3網頁應用設計能力的提升。每個教學單元面向教學全過程設置“知識推薦→引導訓練→同步訓練→技術進階→問題探究→單元習題”6個教學環節，同時還提供了豐富的配套教學資源。 本書可以作為普通高等院校、高職高專或中等職業院校各專業網頁設計的教材,也可以作為網頁設計的培訓用書及技術用書。
高職高專計算機任務驅動模式教材HTML5+CSS3跨平臺網頁設計實例教程 目錄
單元1站點與網頁的創建1
【知識**】1
【引導訓練】4
任務11創建“單元1”站點并瀏覽網頁4
任務111創建本地站點“單元1”4
任務112認識Dreamweaver CC的工作界面6
任務113打開與瀏覽網頁文檔0101.html10
任務12認知HTML5的典型標記和結構標簽13
任務121分析HTML代碼的組成結構13
任務122認知HTML5中典型的標記方法17
任務123認知HTML5主要的結構標簽17
【同步訓練】18
任務13打開并瀏覽網頁0103.html18
【技術進階】19
【問題探究】20
【單元習題】21
單元2網頁中文本與段落的應用設計22
【知識**】22
【引導訓練】37
任務21制作阿壩概況的文本網頁37
任務211建立站點及其目錄結構38
任務212創建與保存網頁文檔0201.html40
任務213設置網頁的首選項40
任務214設置頁面的整體屬性42
任務215在網頁中輸入文字48
任務216輸入與編輯網頁中的文本49
任務217格式化網頁文本50
任務218設置超鏈接與瀏覽網頁效果51
任務219在【代碼】視圖中查看CSS代碼和HTML代碼51
任務22使用CSS美化文本標題和文本段落55
【同步訓練】61
任務23制作介紹九寨溝概況的文本網頁61
【技術進階】62
【問題探究】65
【單元習題】67
目錄單元3網頁中圖像與背景的應用設計68
【知識**】68
【引導訓練】74
任務31制作介紹九寨溝景區景點的圖文混排網頁74
任務311使用【管理站點】對話框創建站點“單元3”75
任務312應用【文件】面板新建網頁0301.html76
任務313設置頁面的背景圖像77
任務314在網頁中輸入所需的文本內容與設置文本格式78
任務315插入圖像與設置圖像屬性79
任務316在“代碼”視圖中查看CSS代碼和HTML代碼81
任務32使用CSS美化網頁文本與圖片82
任務33創建多張圖片并行排列的網頁0303.html88
【同步訓練】90
任務34在網頁中設置圖片與背景屬性90
任務35創建圖文混排的網頁0305.html91
【技術進階】91
【問題探究】96
【單元習題】98
單元4網頁中列表與表格的應用設計99
【知識**】99
【引導訓練】105
任務41創建以項目列表形式表現新聞標題的網頁105
任務42創建以項目列表形式表現圖文按鈕的網頁109
任務43創建應用表格存放數據的網頁114
任務44創建包含個性化表格的網頁119
【同步訓練】122
任務45創建項目列表為主的旅游攻略標題網頁122
任務46創建包含5行3列表格的網頁123
【技術進階】123
【問題探究】124
【單元習題】127
單元5網頁中超鏈接與導航欄的應用設計128
【知識**】128
【引導訓練】131
任務51設置網頁中導航欄的超鏈接屬性131
任務52制作包含橫向主導航欄的網頁134
任務53制作包含縱向欄目導航欄的網頁139
任務54創建包含圖像熱點鏈接的網頁141
【同步訓練】145
任務55創建包含頂部橫向導航欄的網頁145
任務56創建包含多種不同形狀圖像鏈接的網頁146
【技術進階】146
【問題探究】150
【單元習題】151
單元6網頁中表單與控件的應用設計152
【知識**】152
【引導訓練】158
任務61在網頁中添加表單及表單控件158
任務62創建用戶注冊的表單網頁164
【同步訓練】171
任務63創建用戶登錄的表單網頁171
任務64創建用戶留言反饋網頁172
【技術進階】172
【問題探究】174
【單元習題】174
單元7網頁中音頻與視頻的應用設計175
【知識**】175
【引導訓練】177
任務71設計基于HTML5的網頁音樂播放器之一177
任務72設計基于HTML5的網頁視頻播放器之一179
【同步訓練】180
任務73設計基于HTML5的網頁音樂播放器之二180
任務74設計基于HTML5的網頁視頻播放器之二181
【技術進階】182
【問題探究】183
【單元習題】184
單元8網頁中圖形繪制與操作的應用設計185
【知識**】185
【引導訓練】194
任務81網頁中應用純CSS繪制各種規則圖形194
任務82網頁中應用純CSS繪制各種特色圖形197
任務83網頁中應用canvas元素繪制各種圖形和文字200
任務84網頁中繪制菊花圖形206
【同步訓練】208
任務85網頁中繪制陰陽圖和五角星208
任務86網頁中繪制多種圖形和圖片208
【技術進階】209
【問題探究】210
【單元習題】213
單元9網頁中特效與交互的應用設計214
【知識**】214
【引導訓練】227
任務91網頁中顯示當前日期227
任務92網頁中不同時間段顯示不同的問候語231
任務93網頁中制作圓角按鈕和圓角圖片234
任務94設計網頁中的圓形導航按鈕239
任務95網頁中實現搜索框聚焦變長的效果242
任務96網頁中應用CSS實現超酷導航菜單243
任務97網頁中實現仿Office風格的多級菜單246
任務98網頁中實現圖片拖動操作251
【同步訓練】254
任務99網頁中不同的節假日顯示不同的問候語254
任務910網頁中創建下拉導航菜單255
【技術進階】255
【問題探究】255
【單元習題】261
單元10網頁中元素與整體布局的應用設計262
【知識**】262
【引導訓練】276
任務101體驗網頁的不同布局方式276
任務102創建浮動定位2列式布局的網頁281
任務103創建等距排列的4列式布局網頁289
任務104創建不規則布局網頁295
【同步訓練】300
任務105創建浮動定位2列規則分塊的網頁300
任務106創建3列式與4列式等距布局的網頁301
【技術進階】301
【問題探究】302
【單元習題】304
參考文獻305
附錄ACSS的屬性306
附錄BCSS的選擇器307
展開全部
高職高專計算機任務驅動模式教材HTML5+CSS3跨平臺網頁設計實例教程 節選
單元3網頁中圖像與背景的應用設計 (接正文是42mm)圖像是網頁中的主要元素之一,圖像不但能美化網頁,而且能夠更直觀地表達信息。在頁面中恰到好處地使用圖像,能使網頁更加生動、形象和美觀。 【知識**】〖*2〗1. HTML5中常用的圖片標簽HTML5的圖像標簽如表31所示。表31HTML5的圖像標簽標簽名稱標 簽 描 述標簽名稱標 簽 描 述定義圖像定義figure元素的標題定義圖像映射定義媒介內容的分組,以及它們的標題定義圖像地圖內部的區域1) 標簽 標簽用于向網頁中嵌入一幅圖像。從技術上講,標簽并不會在網頁中插入圖像,而是從網頁上鏈接圖像。標簽創建的是被引用圖像的占位空間。標簽有兩個必需的屬性: src屬性和alt屬性。 2) 標簽和標簽 標簽表示一段獨立的流內容(圖像、圖表、照片、代碼等),一般表示文檔主體流內容中的一個獨立單元,figure元素的內容應該與主內容相關,但如果被刪除,則不應對文檔流產生影響。使用figcaption元素可以為figure元素組添加標題。向文檔中插入帶有標題圖像的示例代碼如下: 九寨溝風光 其瀏覽效果如圖31所示。 圖31帶標題的圖片瀏覽效果 標簽用于定義元素的標題,figcaption元素應該被置于figure元素的**個或*后一個子元素的位置。 2. CSS的背景設置與定位 1) 背景色的設置 CSS允許應用純色作為背景,可以使用backgroundcolor屬性為元素設置背景色,這個屬性接受任何合法的顏色值。backgroundcolor屬性用于設置元素的背景顏色,其取值為指定的顏色或transparent(默認值即透明色)。也就是說,如果一個元素沒有指定背景色,那么背景就是透明的,這樣其父元素的背景才能可見。一般都不采用這種方法進行設置,如果某個元素的父元素被設置了背景色,那么該元素就可以使用這種形式恢復成透明色的效果。 HTML5+CSS3跨平臺網頁設計實例教程單元3網頁中圖像與背景的應用設計定義背景顏色的示例代碼如下: .main { background-color: #fff;} p {background-color: gray;}如果希望背景色從元素中的文本向外少有延伸,只需增加一些內邊距即可。p {background-color: gray; padding: 20px;}可以為網頁中的任何元素設置背景顏色,也可以為HTML的標簽設置背景顏色。 2) 背景圖像的設置 在CSS3之前,背景圖片的尺寸是由圖片的實際尺寸決定的。在CSS3中,可以規定背景圖片的尺寸,這就允許我們在不同的環境中重復使用背景圖片。可以以像素或百分比規定尺寸,如果以百分比規定尺寸,那么尺寸相對于父元素的寬度和高度。 背景圖像可以作為修飾要素在網頁布局與排版中使用,CSS為了實現網頁背景圖像廣泛應用,提供了大量的屬性,且得到了各大瀏覽器的廣泛支持,綜合利用這些屬性可以提高網頁布局和排版的靈活性和適應能力。 CSS也允許使用背景圖像創建相當復雜的效果,要把圖像放入背景,需要使用backgroundimage屬性,該屬性的默認值是none,表示背景上沒有放置任何圖像。如果需要設置一個背景圖像,必須為這個屬性設置一個URL值,示例代碼如下: body {background-image: url(bg_01.gif);}大多數背景都應用到body元素,不過并不僅限于此。下面的示例代碼為一個段落應用了一個背景,而不會對文檔的其他部分應用背景。p.flower {background-image: url(bg_02.gif);}甚至可以為行內元素設置背景圖像,下面的示例代碼為一個鏈接設置了背景圖像。a.radio {background-image: url(bg_03.gif);}backgroundimage也不能繼承,事實上,所有背景屬性都不能繼承。 (1) backgroundimage。backgroundimage屬性用于定義對象的背景圖像,當背景圖像與背景顏色(backgroundcolor)同時被定義時,背景圖像覆蓋于背景顏色之上。其取值可以為none(無背景圖像)或者為圖像地址,可以使用絕對或相對地址指定背景圖像。 (2) backgroundsize。backgroundsize屬性用于定義背景圖像的尺寸,其屬性值可以為數值或者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) backgroundposition。backgroundposition屬性用于定義對象背景圖像的位置,應先定義對象的backgroundimage屬性,該屬性不受對象的填充屬性padding的影響。默認值為0,即背景圖像默認位于對象內容區塊的左上角。如果只指定了一個值,該值將用于橫坐標,縱坐標默認為50%。如果指定了兩個值,**個值用于橫坐標,第二個值用于縱坐標。 背景圖像的位置由backgroundpositionx和backgroundpositiony兩個屬性綜合確定。backgroundpositionx定位背景圖像的橫坐標位置,默認值為0,其取值包括left、center、right和數值。backgroundpositiony定位背景圖像的縱坐標位置,默認值為0,其取值包括top、center、bottom和數值。當背景圖像的位置坐標定義為數值時,單位可以取長度單位,也可以為百分比。 下面的示例代碼在body元素中將一個背景圖像居中放置。body { background-image:url('bg_03.gif'); background-repeat:no-repeat; background-position:center; }(4) backgroundrepeat。backgroundrepeat屬性用于定義對象的背景圖像是否重復以及如何平鋪,應先定義對象的backgroundimage屬性。其取值包括repeat(重復,即背景圖像在縱向和橫向上都平鋪)、norepeat(不重復)、repeatx(橫向平鋪)和repeaty(縱向平鋪)。 如果需要在頁面上對背景圖像進行平鋪,可以使用backgroundrepeat屬性。屬性值repeat導致圖像在水平垂直方向上都平鋪,就像以往背景圖像的通常做法一樣。repeatx和repeaty分別導致圖像只在水平或垂直方向上重復,norepeat則不允許圖像在任何方向上平鋪。背景圖像默認將從一個元素的左上角開始,示例代碼如下: body { background-image: url(bg_03.gif); background-repeat: repeat-y; }網頁設計時,經常使用橫向重復屬性使一些小圖片形成大的背景圖像,主要應用于導航欄、標題欄以及按鈕等。 (5) backgroundorigin。backgroundorigin屬性用于規定背景圖片的定位區域,背景圖片可以放置于contentbox、paddingbox或borderbox區域,示意圖如圖32所示。 圖32背景圖片放置位置的示意圖 在contentbox中定位背景圖片的示例代碼如下: div { background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; background-origin:content-box; }(6) backgroundattachment。backgroundattachment屬性用于定義背景圖像是否隨對象內容滾動還是固定位置。其取值包括scroll(背景圖像隨對象內容滾動)和fixed(背景圖像處在固定位置),默認值是scroll,也就是說在默認的情況下,背景會隨文檔滾動。 如果文檔比較長,那么當文檔向下滾動時背景圖像也會隨之滾動,當文檔滾動到超過圖像的位置時圖像就會消失。可以通過backgroundattachment屬性防止這種滾動,通過這個屬性,可以聲明圖像相對于可視區是固定的(fixed),因此不會受到滾動的影響。 對于背景圖像固定的頁面,瀏覽網頁時可以看到頁面滾動時背景仍保持固定,網頁中的內容可以浮動在背景圖像的不同位置。背景圖像固定一般用于整個網頁的背景設置,即設置body標簽的背景屬性,示例代碼如下:body { background-attachment: fixed; background-image: url(../images/bg0301. jpg); background-repeat: repeat-y; }(7) background。background屬性是一個復合屬性,可以快速定義背景圖像,其組成包括backgroundcolor、backgroundimage、backgroundposition、backgroundrepeat和backgroundattachment,默認值為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) 應用百分數值 百分數值的表現方式更為復雜。假設希望用百分數值將圖像在其元素中居中,這很容易,示例代碼如下:
書友推薦
- >
史學評論
- >
伯納黛特,你要去哪(2021新版)
- >
經典常談
- >
二體千字文
- >
自卑與超越
- >
莉莉和章魚
- >
中國人在烏蘇里邊疆區:歷史與人類學概述
- >
煙與鏡
本類暢銷
