HTML5與CSS3項(xiàng)目實(shí)戰(zhàn) (3)教學(xué)課件

1、企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群） 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實(shí)施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)010203掌握HTML5圖像標(biāo)簽的使用掌握CSS3頁(yè)面背景圖像的設(shè)置掌握CSS3新增邊框?qū)傩詫W(xué)習(xí)目標(biāo) 通過實(shí)現(xiàn)去哪兒旅游主界面，學(xué)習(xí)HTML5圖像相關(guān)標(biāo)簽以及CSS3圖像相關(guān)屬性，了解和掌握HTML5和CSS3圖像標(biāo)簽在實(shí)戰(zhàn)中的應(yīng)用企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）02 學(xué)習(xí)路徑 學(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）03 任務(wù)描述 01 情境導(dǎo)入 02 功能描述03 基本框架 04 開發(fā)環(huán)境 任務(wù)描述任務(wù)描述企業(yè)

2、級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群） 情境導(dǎo)入情境導(dǎo)入在這個(gè)信息化的時(shí)代，人們現(xiàn)在更多的是利用圖片來(lái)表達(dá)信息，那么在網(wǎng)頁(yè)編輯時(shí)圖片的美化和布局是非常重要的，我們需要在表達(dá)自己想要表達(dá)的信息的同時(shí)還要考慮界面的美觀，能夠讓用戶在了解信息的同時(shí)還要滿足用戶的視覺享受。本次任務(wù)主要是實(shí)現(xiàn)去哪兒旅游主界面設(shè)計(jì)。企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群） 功能描述功能描述頭部包括去哪兒旅游網(wǎng)站的logo、文本搜索框等 01 02 03主體包括推薦旅游城市的圖片介紹底部包括網(wǎng)站的超鏈接和站點(diǎn)的版權(quán)信息企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群） 基本框架基本框架企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）系統(tǒng)環(huán)境Windows 7

3、系統(tǒng)及以上系統(tǒng)軟件環(huán)境服務(wù)器瀏覽器Sublime TextTomcat 7.0電腦端： 火狐瀏覽器 谷歌瀏覽器手機(jī)端： Webkit內(nèi)核瀏覽器 Android手機(jī)內(nèi)置 瀏覽器 開發(fā)環(huán)境開發(fā)環(huán)境企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）04 任務(wù)技能任務(wù)技能 網(wǎng)頁(yè)中圖片格式 HTML5圖像標(biāo)簽 背景屬性 盒子模型 CSS3邊框?qū)傩?HTML5圖像過渡和變形 任務(wù)技能任務(wù)技能企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）1在網(wǎng)頁(yè)中添加圖片時(shí)，圖片的格式與代碼中圖片的格式必須一致，所以我們需要對(duì)圖片的格式有一定的了解。在網(wǎng)頁(yè)中主要使用以下幾種圖片格式：JPG、PNG、GIF、BMP、PCX、TIFF。其中使用最廣泛

4、的圖片格式為：JPG、PNG、GIF 網(wǎng)頁(yè)中圖片格式網(wǎng)頁(yè)中圖片格式格式企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）標(biāo)簽1標(biāo)簽2標(biāo)簽3是添加圖片的標(biāo)簽，在HTML5中添加圖片的基本格式為：。標(biāo)簽可以成對(duì)出現(xiàn)也可以寫成，在網(wǎng)頁(yè)編寫中標(biāo)簽主要用于添加網(wǎng)站logo和添加網(wǎng)站信息介紹的圖片 標(biāo)簽是 HTML 5 中的新標(biāo)簽。標(biāo)簽代表一段獨(dú)立的流內(nèi)容，主要包括圖像、文字、代碼等。該標(biāo)簽添加標(biāo)題時(shí)需要標(biāo)簽，所有主流瀏覽器都支持 標(biāo)簽定義圖像映射內(nèi)部的區(qū)域通常使用標(biāo)簽，area 元素始終嵌套在 標(biāo)簽內(nèi)部。該標(biāo)簽是新增標(biāo)簽，屬性有rel、media、hreflang。其中rel是規(guī)定當(dāng)前文檔與目標(biāo) URL 之間的關(guān)系，

5、media是規(guī)定目標(biāo) URL 是為何種媒介/設(shè)備優(yōu)化的，hreflang是規(guī)定目標(biāo) URL 的語(yǔ)言 HTML5圖像標(biāo)簽圖像標(biāo)簽企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）1margin屬性2把HTML頁(yè)面中的元素看作是一個(gè)矩形的盒子叫做盒子模型。盒子模型所具備的四個(gè)屬性為：內(nèi)容、填充、邊框、邊界。CSS盒子模型就是在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。盒子模型的四個(gè)屬性分別是：margin、border、padding、content在CSS中通過margin屬性設(shè)置元素邊框與相鄰元素之間的距離。 盒子模型盒子模型盒子模型概念border是為圖像添加邊框的屬性，border的屬性值有三

6、種，分別是：邊框的粗細(xì)程度（2px）、邊框的樣式（solid）、邊框的顏色（#000）padding是設(shè)置邊框和內(nèi)部元素之間的距離的屬性43border屬性padding屬性屬性描述margin-top上外邊距margin-right右外邊距magin-bottom下外邊距margin-left左外邊距margin上外邊距 右外邊距 下邊距 左邊距屬性描述border-width用來(lái)設(shè)置邊框粗細(xì)主要參考值有thin定義細(xì)邊框，medium定義中等邊框border-style 用來(lái)設(shè)置元素邊框樣式，主要參考值有none 定義無(wú)邊框，solid 定義實(shí)線border-color用來(lái)設(shè)置邊框的顏色屬

7、性描述padding-top上內(nèi)邊距padding-right右內(nèi)邊距padding-bottom下內(nèi)邊距padding-left左內(nèi)邊距padding上內(nèi)邊距 右內(nèi)邊距 下內(nèi)距 左內(nèi)距企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）border-image屬性1border-radius屬性2box-shadow屬性3border-image是使用圖像作為標(biāo)簽的邊框的屬性。但是border-collapse屬性不能跟border-image屬性同時(shí)使用border-radius是實(shí)現(xiàn)圓角邊框的屬性box-shadow是給邊框添加陰影效果的屬性，box-shadow的屬性值包括：陰影寬度、陰影顏色等CSS

8、3邊框?qū)傩赃吙驅(qū)傩灾得枋鯾order-image-source表示用在邊框的圖片的路徑border-image-slice表示圖片邊框向內(nèi)偏移border-image-width表示圖片邊框的寬度border-image-outset表示邊框圖像區(qū)域超出邊框的量值描述length定義圓角的形狀%以百分比定義圓角的形狀值描述h-shadow必需填寫。表示水平陰影的位置。允許負(fù)值v-shadow必需填寫。表示垂直陰影的位置。允許負(fù)值blur可選。表示模糊距離spread可選。表示陰影的尺寸color可選。表示陰影的顏色。請(qǐng)參閱 CSS 顏色值inset可選。表示將外部陰影 (outset) 改為內(nèi)

9、部陰影企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）CSS背景屬性是CSS3中一個(gè)屬性，通常用background來(lái)表示，主要是用來(lái)設(shè)置網(wǎng)頁(yè)的背景，例如：背景顏色、背景圖片等CSS背景屬性background-color屬性background-image屬性background-repeat屬性設(shè)置背景顏色通常使用background-color屬性，該屬性有三種表示方式：顏色名、RGB值、十六進(jìn)制數(shù)。最常用的表示方式為十六進(jìn)制數(shù)在網(wǎng)頁(yè)添加背景圖片通常使用background-image屬性，在HTML5中添加背景圖片的代碼為：,而在CSS3中添加背景圖片為：bodybackground-image:

10、url(圖片名.jpg);設(shè)置圖片平鋪方向通常使用background-repeat屬性，該屬性必須在使用背景圖片（background-image）屬性的基礎(chǔ)上使用，不可以單獨(dú)使用 背景屬性背景屬性background-position屬性背景定位通常使用background-position屬性，該屬性的值有三種方式background-position 屬性的默認(rèn)設(shè)置的值是top left。 background-attachment屬性定義背景圖片隨滾動(dòng)軸的移動(dòng)方式通常使用background-attachment屬性，在沒有對(duì)background-attachment屬性進(jìn)行設(shè)置之前

11、，background-attachment的默認(rèn)屬性值為scroll企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）12transition是實(shí)現(xiàn)背景圖像過渡的效果的屬性，是HTML5增加屬性transform是實(shí)現(xiàn)圖形變形的屬性HTML5圖像過渡和變形圖像過渡和變形transition屬性transform屬性值描述property表示設(shè)置過渡效果的 CSS 屬性的名稱transition-duration表示完成過渡效果需要多少秒或毫秒transition-timing-function表示速度效果的速度曲線transition-delay表示過渡效果何時(shí)開始值描述none表示不進(jìn)行轉(zhuǎn)換matrix

12、(n,n,n,n,n,n)表示 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)表示 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣translate(x,y)表示 2D 轉(zhuǎn)換translate3d(x,y,z)表示 3D 轉(zhuǎn)換scale(x,y)表示 2D 縮放轉(zhuǎn)換scale3d(x,y,z)表示轉(zhuǎn)換，只是用 X 軸的值企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）05 任務(wù)實(shí)施第一步：頭部樣式制作分為三部分：網(wǎng)站logo、搜索框、搜索按鈕，其中網(wǎng)站logo是使用的圖片標(biāo)簽，搜索框和搜索按鈕是表單標(biāo)簽第三步：主體部分主要包括導(dǎo)航欄和景點(diǎn)推薦部分第四步：底部信息樣式設(shè)置，版權(quán)信息內(nèi)容為Copyright 2016 ，該內(nèi)容為一個(gè)段落，使用段落標(biāo)簽 任務(wù)實(shí)施任務(wù)實(shí)施企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）06 任務(wù)總結(jié)任務(wù)技能任務(wù)技能任務(wù)實(shí)施任務(wù)實(shí)施任務(wù)拓展任務(wù)拓展任務(wù)描述任務(wù)描述 本項(xiàng)目通過去哪兒網(wǎng)旅游網(wǎng)站旅游目的地推薦網(wǎng)頁(yè)的訓(xùn)練，熟悉了HTML5中的圖像標(biāo)簽、CSS的背景設(shè)置、圖像的設(shè)置以