91人妻在线综合,伊人久久大香线蕉av最新午夜

本書根據(jù)HTML5和CSS3標(biāo)準(zhǔn)詳細(xì)講解了網(wǎng)頁(yè)的布局和制作方法。全書共分12個(gè)單元，內(nèi)容包括：準(zhǔn)備工作、HTML5 常見元素、網(wǎng)頁(yè)整體布局的搭建、網(wǎng)頁(yè)主體內(nèi)容的構(gòu)建、網(wǎng)頁(yè)頁(yè)眉的構(gòu)建、網(wǎng)頁(yè)主導(dǎo)航的構(gòu)建、網(wǎng)頁(yè)橫幅廣告的構(gòu)建、網(wǎng)頁(yè)頁(yè)腳的構(gòu)建，以及混合布局的綜合網(wǎng)頁(yè)的構(gòu)建。每個(gè)單元包含若干個(gè)任務(wù)，各任務(wù)之間有連貫性，強(qiáng)化和覆蓋相關(guān)知識(shí)點(diǎn)。本書與Web前端開發(fā)工作崗位接軌，強(qiáng)調(diào)三方面的技能：一是針對(duì)只會(huì)寫局部不會(huì)寫整體的問題，培養(yǎng)基于網(wǎng)頁(yè)設(shè)計(jì)稿（或效果圖）來(lái)規(guī)劃網(wǎng)頁(yè)，從網(wǎng)頁(yè)整體入手，先搭建結(jié)構(gòu)，再填充內(nèi)容的技能；二是歸納和強(qiáng)化常用的方法，使讀者熟練掌握方法，而不僅是知識(shí)點(diǎn)；三是學(xué)會(huì)寫代碼，而不是用Dreamweaver的可視化操作來(lái)生成代碼。本書適合作為高職高專院校HTML5 CSS3 集中實(shí)訓(xùn)課程或理實(shí)一體化課程的教材，也可作為網(wǎng)頁(yè)設(shè)計(jì)與制作愛好者的自學(xué)讀物

HTML5 和CSS3 是HTML 和CSS 的較新標(biāo)準(zhǔn)。HTML 和CSS 是Web 前端開發(fā)基礎(chǔ)技術(shù)，分別
用于實(shí)現(xiàn)網(wǎng)頁(yè)的結(jié)構(gòu)和表現(xiàn)，是學(xué)習(xí)后續(xù)前端腳本語(yǔ)言JavaScript 和前端開發(fā)框架（Bootstrap、
jQuery 等）的重要基礎(chǔ)。
作者將長(zhǎng)期的高職教學(xué)實(shí)踐所得精心提煉到了本書中，充分考慮了高職學(xué)生的學(xué)情，按照初
學(xué)者的認(rèn)知規(guī)律循循善誘，按照開發(fā)者的思考路線分步講解，在精心編排的50 多個(gè)網(wǎng)頁(yè)制作任
務(wù)中滲透了實(shí)際網(wǎng)站開發(fā)中常用的方法、經(jīng)驗(yàn)，覆蓋了從無(wú)到有地制作一個(gè)完整的網(wǎng)頁(yè)所需的知
識(shí)和技術(shù)。
本書共分12 個(gè)單元，單元內(nèi)的任務(wù)之間互補(bǔ)強(qiáng)化，單元之間銜接連貫。
第1 單元準(zhǔn)備工作，介紹HTML5 和CSS3 是什么，如何搭建網(wǎng)頁(yè)制作環(huán)境，如何使用網(wǎng)頁(yè)
編輯器的編輯和調(diào)試功能。
第2 單元 HTML5 常見元素，介紹制作一個(gè)完整的網(wǎng)頁(yè)一般需要哪些HTML5 元素，如何使
用這些元素。
第3 單元網(wǎng)頁(yè)整體布局的搭建，介紹典型的網(wǎng)頁(yè)布局有哪些，搭建網(wǎng)頁(yè)結(jié)構(gòu)用到哪些盒
子，實(shí)現(xiàn)這些布局設(shè)置哪些樣式。
第4 單元網(wǎng)頁(yè)主體內(nèi)容的構(gòu)建1文本的制作，介紹典型的網(wǎng)頁(yè)布局中主體內(nèi)容區(qū)的文本
內(nèi)容的制作方法。
第5 單元網(wǎng)頁(yè)主體內(nèi)容的構(gòu)建2圖片的制作，介紹典型的網(wǎng)頁(yè)布局中主體內(nèi)容區(qū)的圖片
內(nèi)容的制作方法。
第6 單元網(wǎng)頁(yè)主體內(nèi)容的構(gòu)建3表格的制作，介紹典型的網(wǎng)頁(yè)布局中主體內(nèi)容區(qū)的表格
內(nèi)容的制作方法。
第7 單元網(wǎng)頁(yè)主體內(nèi)容的構(gòu)建4表單的制作，介紹典型的網(wǎng)頁(yè)布局中主體內(nèi)容區(qū)的表單
內(nèi)容的制作方法。
第8 單元網(wǎng)頁(yè)頁(yè)眉的構(gòu)建，介紹典型的網(wǎng)頁(yè)布局中頁(yè)眉的制作方法。
第9 單元網(wǎng)頁(yè)主導(dǎo)航的構(gòu)建，介紹典型的網(wǎng)頁(yè)布局中主導(dǎo)航的制作方法。
第10 單元網(wǎng)頁(yè)橫幅廣告的構(gòu)建，介紹典型的網(wǎng)頁(yè)布局中橫幅廣告的制作方法。
第11 單元網(wǎng)頁(yè)頁(yè)腳的構(gòu)建，介紹典型的網(wǎng)頁(yè)布局中頁(yè)腳的制作方法。
第12 單元混合布局的綜合網(wǎng)頁(yè)的構(gòu)建，介紹復(fù)雜網(wǎng)頁(yè)的制作方法。
本書主要特色：
① 與Web 前端開發(fā)工作崗位接軌，教學(xué)生直接寫HTML5 和CSS3 代碼，而不是教可視化
操作。
② 教學(xué)生基于網(wǎng)頁(yè)設(shè)計(jì)稿（或效果圖）制作完整的網(wǎng)頁(yè)，而不是僅僅會(huì)做網(wǎng)頁(yè)一角。
③ 歸納和強(qiáng)化常用的方法，讓學(xué)生熟練掌握方法，而不僅僅是知識(shí)點(diǎn)。
④ 每個(gè)實(shí)訓(xùn)任務(wù)都有詳盡的步驟和邏輯，而不是直接粘貼成片的代碼。
課時(shí)數(shù)及選用建議（僅供參考）：
前言
單元任務(wù) 課時(shí)數(shù)建議選用建議
任務(wù)1.1~1.2 2
第1單元
任務(wù)1.3~1.4 2
任務(wù)2.1~2.2 2
任務(wù)2.3~2.4 2
任務(wù)2.5~2.6 2
任務(wù)2.7~2.8 2
任務(wù)2.9~2.10 2
第2單元
任務(wù)2.11 2
理實(shí)一體化課程：
選用所有任務(wù)。
集中實(shí)訓(xùn)課程：
省略
任務(wù)3.1 4
第3 單元任務(wù)3.2 4
任務(wù)3.3 2
理實(shí)一體化課程：
選用所有任務(wù)。
集中實(shí)訓(xùn)課程：
選用所有任務(wù)
任務(wù)4.1 2
任務(wù)4.2 2
任務(wù)4.3 2
任務(wù)4.4 2
任務(wù)4.5 4
第4單元
任務(wù)4.6 4
理實(shí)一體化課程：
任務(wù)4.2、4.5、4.6 或全部。
集中實(shí)訓(xùn)課程：
任選
任務(wù)5.1~5.2 2
任務(wù)5.3 2
任務(wù)5.4 2
任務(wù)5.5~5.6 2
任務(wù)5.7 2
第5單元
任務(wù)5.8~5.9 2
理實(shí)一體化課程：
任務(wù)5.2、5.3、5.4、5.5、5.7 或全部。
集中實(shí)訓(xùn)課程：
任選
任務(wù)6.1 2
第6單元
任務(wù)6.2~6.3 2
任務(wù)7.1 2
第7 單元任務(wù)7.2 2
任務(wù)7.3 2
任務(wù)8.1 2
第8單元
任務(wù)8.2 2
任務(wù)9.1 2
第9單元
任務(wù)9.2 2
任務(wù)10.1 2
第10 單元
任務(wù)10.2 2
任務(wù)11.1 2
第11 單元
任務(wù)11.2 2
理實(shí)一體化課程：
任選。
集中實(shí)訓(xùn)課程：
任選
任務(wù)12.1 8
第12 單元
任務(wù)12.2 12
理實(shí)一體化課程：
省略。
集中實(shí)訓(xùn)課程：
任選
合計(jì) 100
本書由斯琴高娃任主編，孟清、譚海中、雷琳任副主編。其中：斯琴高娃編寫第3~5 單元、
第12單元，孟清編寫第6~8 單元、譚海中編寫第1、2 單元，雷琳編寫第9~11 單元。
由于時(shí)間倉(cāng)促，編者水平有限，書中難免存在疏漏和不足之處，敬請(qǐng)廣大讀者批評(píng)指正，聯(lián)
系方式：378083015@qq.com。
編者
2020 年6 月

第1 單元準(zhǔn)備工作.......................................................................................... 1

任務(wù)1.1 認(rèn)識(shí)HTML5 和CSS3 ................................................................................................ 1

任務(wù)1.2 搭建軟件環(huán)境........................................................................................................... 2

任務(wù)1.2.1 安裝HBuilder X ............................................................................................. 3

任務(wù)1.2.2 安裝Sublime Text3 ........................................................................................ 5

任務(wù)1.3 分析個(gè)網(wǎng)頁(yè)........................................................................................................ 6

任務(wù)1.4 了解網(wǎng)頁(yè)編輯和調(diào)試技巧........................................................................................ 9

單元小結(jié)............................................................................................................................... .. 10

習(xí)題............................................................................................................................... .......... 10

第2 單元 HTML5 常見元素............................................................................ 12

任務(wù)2.1 認(rèn)識(shí)標(biāo)題元素......................................................................................................... 12

任務(wù)2.2 認(rèn)識(shí)段落元素......................................................................................................... 14

任務(wù)2.3 認(rèn)識(shí)換行元素、水平線元素.................................................................................. 15

任務(wù)2.4 認(rèn)識(shí)圖像元素......................................................................................................... 16

任務(wù)2.5 認(rèn)識(shí)超鏈接............................................................................................................. 17

任務(wù)2.6 認(rèn)識(shí)無(wú)序列表......................................................................................................... 18

任務(wù)2.7 認(rèn)識(shí)有序列表......................................................................................................... 19

任務(wù)2.8 認(rèn)識(shí)自定義列表...................................................................................................... 20

任務(wù)2.9 認(rèn)識(shí)表格元素......................................................................................................... 21

任務(wù)2.10 認(rèn)識(shí)表單元素....................................................................................................... 23

任務(wù)2.11 認(rèn)識(shí)音頻、視頻元素............................................................................................ 24

單元小結(jié)............................................................................................................................... .. 26

習(xí)題............................................................................................................................... .......... 26

第3 單元網(wǎng)頁(yè)整體布局的搭建...................................................................... 27

任務(wù)3.1 單列布局的搭建...................................................................................................... 27

任務(wù)3.1.1 網(wǎng)頁(yè)結(jié)構(gòu)的實(shí)現(xiàn)........................................................................................... 28

任務(wù)3.1.2 網(wǎng)頁(yè)樣式的實(shí)現(xiàn)........................................................................................... 29

任務(wù)3.2 左寬右窄兩列布局（F 式布局）的搭建................................................................ 35

任務(wù)3.2.1 網(wǎng)頁(yè)結(jié)構(gòu)的實(shí)現(xiàn)........................................................................................... 35

任務(wù)3.2.2 網(wǎng)頁(yè)樣式的實(shí)現(xiàn)........................................................................................... 36

任務(wù)3.3 三列布局的搭建...................................................................................................... 44

2 HTML5 CSS3 網(wǎng)頁(yè)布局任務(wù)教程

任務(wù)3.3.1 網(wǎng)頁(yè)結(jié)構(gòu)的實(shí)現(xiàn)........................................................................................... 44

任務(wù)3.3.2 網(wǎng)頁(yè)樣式的實(shí)現(xiàn)........................................................................................... 45

單元小結(jié)............................................................................................................................... .. 51

習(xí)題............................................................................................................................... .......... 51

第4 單元網(wǎng)頁(yè)主體內(nèi)容的構(gòu)建1文本的制作........................................... 53

任務(wù)4.1 海南島簡(jiǎn)介頁(yè)的制作（標(biāo)題段落）................................................................ 53

任務(wù)4.1.1 網(wǎng)頁(yè)結(jié)構(gòu)的實(shí)現(xiàn)........................................................................................... 54

任務(wù)4.1.2 網(wǎng)頁(yè)基本樣式的實(shí)現(xiàn)................................................................................... 56

任務(wù)4.1.3 簡(jiǎn)介標(biāo)題樣式和段落樣式的實(shí)現(xiàn)................................................................. 58

任務(wù)4.2 學(xué)院簡(jiǎn)介頁(yè)的制作（頭部段落） ................................................................... 63

任務(wù)4.2.1 網(wǎng)頁(yè)結(jié)構(gòu)的實(shí)現(xiàn)........................................................................................... 64

任務(wù)4.2.2 網(wǎng)頁(yè)基本樣式的實(shí)現(xiàn)................................................................................... 65

任務(wù)4.2.3 簡(jiǎn)介頭部的樣式和正文樣式的實(shí)現(xiàn)............................................................. 66

任務(wù)4.3 美麗的草原頁(yè)的制作（頭部章節(jié)）................................................................ 69

任務(wù)4.3.1 網(wǎng)頁(yè)結(jié)構(gòu)和基本樣式的實(shí)現(xiàn)........................................................................ 70

任務(wù)4.3.2 文章頭部樣式和章節(jié)樣式的實(shí)現(xiàn)................................................................. 72

任務(wù)4.4 學(xué)院首頁(yè)兩行對(duì)稱欄目的制作......................................................................... 73

任務(wù)4.4.1 網(wǎng)頁(yè)結(jié)構(gòu)和基本樣式的實(shí)現(xiàn)........................................................................ 74

任務(wù)4.4.2 兩列對(duì)稱欄目樣式的實(shí)現(xiàn)............................................................................ 78

任務(wù)4.5 學(xué)院首頁(yè)三列非對(duì)稱欄目的制作...................................................................... 81

任務(wù)4.5.1 網(wǎng)頁(yè)結(jié)構(gòu)和基本樣式的實(shí)現(xiàn)........................................................................ 82

任務(wù)4.5.2 三列非對(duì)稱欄目樣式的實(shí)現(xiàn)........................................................................ 85

任務(wù)4.6 專業(yè)介紹頁(yè)的制作（左窄右寬的兩列布局）................................................... 88

任務(wù)4.6.1 網(wǎng)頁(yè)結(jié)構(gòu)和基本樣式的實(shí)現(xiàn)........................................................................ 89

任務(wù)4.6.2 左窄右寬的兩列布局的實(shí)現(xiàn)........................................................................ 91

單元小結(jié)............................................................................................................................... .. 96

習(xí)題............................................................................................................................... .......... 96

第5 單元網(wǎng)頁(yè)主體內(nèi)容的構(gòu)建2圖片的制作........................................... 98

任務(wù)5.1 學(xué)院首頁(yè)兩行對(duì)稱欄目插圖............................................................................. 98

任務(wù)5.2 學(xué)院首頁(yè)三列非對(duì)稱欄目插圖....................................................................... 101

任務(wù)5.3 F 式布局、左圖右文............................................................................................. 106

任務(wù)5.4 兩列布局、上圖下文............................................................................................ 109

任務(wù)5.5 文字環(huán)繞圖片1 ...................................................................

你還可能感興趣

我要評(píng)論