《HTML5與CSS3項(xiàng)目實(shí)戰(zhàn)》課件-CORE01_第1頁(yè)
《HTML5與CSS3項(xiàng)目實(shí)戰(zhàn)》課件-CORE01_第2頁(yè)
《HTML5與CSS3項(xiàng)目實(shí)戰(zhàn)》課件-CORE01_第3頁(yè)
《HTML5與CSS3項(xiàng)目實(shí)戰(zhàn)》課件-CORE01_第4頁(yè)
《HTML5與CSS3項(xiàng)目實(shí)戰(zhàn)》課件-CORE01_第5頁(yè)
已閱讀5頁(yè)，還剩21頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

同城旅游界面設(shè)計(jì)項(xiàng)目一企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(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)010203了解HTML5的文檔結(jié)構(gòu)、新增標(biāo)簽了解CSS樣式規(guī)則掌握CSS3選擇器學(xué)習(xí)目標(biāo)

通過(guò)實(shí)現(xiàn)同程旅游界面，學(xué)習(xí)HTML5與CSS3相關(guān)知識(shí)，了解HTML5與CSS3發(fā)展歷史、基礎(chǔ)標(biāo)簽和自適應(yīng)網(wǎng)站標(biāo)簽的使用04了解自適應(yīng)網(wǎng)站的概念企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）02學(xué)習(xí)路徑

學(xué)習(xí)路徑企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）03任務(wù)描述

01情境導(dǎo)入

02功能描述03

基本框架

04開(kāi)發(fā)環(huán)境

任務(wù)描述企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）

情境導(dǎo)入隨著科技的發(fā)展，網(wǎng)絡(luò)在人們的生活中占著主導(dǎo)地位，而旅游作為人們緩解壓力的方式之一，旅游網(wǎng)站也慢慢的走進(jìn)了我們的生活。本次任務(wù)主要是實(shí)現(xiàn)同程旅游的界面設(shè)計(jì)。企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）

功能描述情境入01使用響應(yīng)式布局技術(shù)來(lái)設(shè)計(jì)同城旅游界面

01

02

03

04頭部包括同城旅游的logo主體包括各種圖片鏈接底部包括本站點(diǎn)的版權(quán)信息企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）

基本框架企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）系統(tǒng)環(huán)境Windows7系統(tǒng)及以上系統(tǒng)軟件環(huán)境服務(wù)器瀏覽器Sublime

TextTomcat7.0電腦端：火狐瀏覽器

谷歌瀏覽器手機(jī)端：Webkit內(nèi)核瀏覽器

Android手機(jī)內(nèi)置

瀏覽器

開(kāi)發(fā)環(huán)境企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）04任務(wù)技能任務(wù)技能

HTML5概述

HTML5基礎(chǔ)

網(wǎng)頁(yè)編輯器及環(huán)境

CSS3初體驗(yàn)

CSS樣式表

CSS選擇器

任務(wù)技能企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）建設(shè)制造強(qiáng)國(guó)12HTML5萬(wàn)維網(wǎng)的核心語(yǔ)言、標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用超文本標(biāo)記語(yǔ)言（HTML）的第五次重大修改（W3C

Recommendation）。2014年10月29日，萬(wàn)維網(wǎng)聯(lián)盟宣布，經(jīng)過(guò)接近8年的艱苦努力，標(biāo)準(zhǔn)規(guī)范終于制定完成。（1）快速迭代（2）減低成本（3）導(dǎo)流入口多（4）分發(fā)效率高

HTML5概述HTML5的發(fā)展HTML5的優(yōu)點(diǎn)企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）HTML5文檔的基本結(jié)構(gòu)1HTML5語(yǔ)法2HTML5新增標(biāo)簽3（1）<!DOCTYPE>用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用哪種HTML標(biāo)簽。（2）<html>和</html>分別表示文檔的開(kāi)始和結(jié)束，用于告知瀏覽器其自身是一個(gè)HTML文檔。（3）<head></head>為頭部標(biāo)簽，用于定義HTML文檔的頭部信息，緊跟在<html>標(biāo)簽后，里面包括的內(nèi)容有<title>、<meta>、<link>和<style>等。（4）<body></body>為主體標(biāo)簽，用于定義HTML文檔所要顯示的內(nèi)容，在瀏覽器中所看到的圖片，音頻，視頻，文本等都位于<body>內(nèi)。該標(biāo)簽中的內(nèi)容是展示給用戶(hù)看的。HTML5為了更大兼容各瀏覽器，在設(shè)計(jì)和語(yǔ)法方面發(fā)生了一些變化，語(yǔ)法變化的主要內(nèi)容如下：標(biāo)簽不在區(qū)分大小寫(xiě)元素可以省略結(jié)束標(biāo)簽允許省略屬性的屬性值允許屬性值不使用引號(hào)

HTML5基礎(chǔ)HTML5和HTML相比，增加了結(jié)構(gòu)標(biāo)簽，語(yǔ)義標(biāo)簽、特殊功能標(biāo)簽以及audio和video標(biāo)簽等。其中新增標(biāo)簽如表標(biāo)簽描述<article>用于描述頁(yè)面上一處完整的文章<nav>用于定義導(dǎo)航條，包括主導(dǎo)航條、頁(yè)面導(dǎo)航、底部導(dǎo)航等aside用于定于當(dāng)前頁(yè)面的附屬信息，內(nèi)容和article內(nèi)容相關(guān)hgroup用于對(duì)網(wǎng)頁(yè)或區(qū)段（section）的標(biāo)題進(jìn)行組合<figure>用于對(duì)元素進(jìn)行組合header用于定義文檔的頁(yè)眉（介紹信息）footer用于定義section或document的頁(yè)腳企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）網(wǎng)頁(yè)編輯器1自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)2手機(jī)端訪問(wèn)網(wǎng)頁(yè)環(huán)境部署3隨著編寫(xiě)網(wǎng)頁(yè)的語(yǔ)言在不斷的更新，網(wǎng)頁(yè)編輯器也在不斷的開(kāi)發(fā)。其中幾款為大家所熟知的網(wǎng)頁(yè)編輯器有Notepad++、Dreamweaver、SublimeText隨著智能手機(jī)的普及，設(shè)計(jì)的界面也需在手機(jī)端顯示，為了能夠在手機(jī)端正常顯示，我們需要使網(wǎng)頁(yè)寬度自動(dòng)調(diào)整。（1）在網(wǎng)頁(yè)代碼的頭部，加入一行viewport元標(biāo)簽。（2）不使用絕對(duì)寬度（3）MediaQuery模塊，自動(dòng)探測(cè)屏幕寬度（4）@media，根據(jù)不同的屏幕分辨率，選擇不同的CSS規(guī)則。在SublimeText制作完之后，點(diǎn)擊瀏覽器就能出現(xiàn)效果，想要手機(jī)訪問(wèn)，我們不僅需要在頭部添加響應(yīng)式布局所對(duì)應(yīng)代碼，還需配置服務(wù)器的環(huán)境才可以在手機(jī)上訪問(wèn)。（1）下載tomcat軟件，網(wǎng)址為http:///download-70.cgi（2）配置tomcat環(huán)境（3）啟動(dòng)Tomcat軟件

網(wǎng)頁(yè)編輯器及環(huán)境企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）建設(shè)制造強(qiáng)國(guó)12CSS3（CascadingStyleSheet，層疊樣式表）是一種不需要編譯、可直接由瀏覽器執(zhí)行的標(biāo)記性語(yǔ)言，用于控制頁(yè)面的布局、文字的大小和顏色、圖片位置、列表、表單等樣式。CSS3的產(chǎn)生大大簡(jiǎn)化了編程模型CSS3主要是給文字、圖片設(shè)置樣式和布局，CSS3的標(biāo)準(zhǔn)格式為：選擇器{屬性1:屬性值1；屬性2:屬性值2}CSS3初體驗(yàn)CSS3概述CSS3樣式規(guī)則企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）建設(shè)制造強(qiáng)國(guó)12CSS3樣式可以寫(xiě)在HTML標(biāo)簽內(nèi)，用style屬性表示，這個(gè)方法簡(jiǎn)便快捷，但是具有局限性，無(wú)法通用，該屬性的語(yǔ)法格式為：<標(biāo)記style="樣式屬性:屬性值…..">定義內(nèi)部樣式表即CSS3樣式表寫(xiě)在HTML文檔內(nèi)，我們可以對(duì)整個(gè)<head>或者整個(gè)<body>設(shè)置樣式，也可以對(duì)單個(gè)標(biāo)簽設(shè)置樣式。

CSS3樣式表定義標(biāo)記的style屬性定義內(nèi)部樣式企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）建設(shè)制造強(qiáng)國(guó)34嵌入外部樣式表就是在HTML代碼中直接導(dǎo)入樣式表的方法?；菊Z(yǔ)法<styletype="text/css">@importurl("外部樣式表的文件名稱(chēng)");</style>鏈接外部樣式表就是把外部的CSS文件鏈接到HTML中，基本語(yǔ)法為：<linktype="text/css"rel="stylesheet"href="外部樣式表的文件名稱(chēng)">

CSS3樣式表嵌入外部樣式表鏈接外部樣式表企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）類(lèi)選擇器根據(jù)類(lèi)名來(lái)選擇前面以“.”來(lái)標(biāo)志類(lèi)選擇器標(biāo)簽選擇器ID選擇器后代選擇器一個(gè)完整的HTML頁(yè)面是有很多不同的標(biāo)簽組成，而標(biāo)簽選擇器，則是決定哪些標(biāo)簽，采用相應(yīng)的CSS樣式。ID選擇器前面以”#”號(hào)來(lái)標(biāo)志，根據(jù)元素ID來(lái)選擇元素，具有唯一性，這意味著同一id在同一文檔頁(yè)面中只能出現(xiàn)一次，ID屬性不允許有以空格分隔的詞列表后代選擇器也稱(chēng)為包含選擇器，用來(lái)選擇特定元素或元素組的后代，將對(duì)父元素的選擇放在前面，對(duì)子元素的選擇放在后面，中間加一個(gè)空格分開(kāi)。CSS選擇器子選擇器子代選擇器與后代選擇器的區(qū)別在于，子選擇器僅是指它的直接后代。而后代選擇器是作用于所有子后代元素。子選擇器是通過(guò)“>”進(jìn)行選擇偽類(lèi)選擇器有時(shí)候還會(huì)需要用文檔以外的其他條件來(lái)應(yīng)用元素的樣式，比如鼠標(biāo)懸停等。這時(shí)候就需要用到偽類(lèi)了。企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）05任務(wù)實(shí)施輸入標(biāo)題輸入標(biāo)題輸入標(biāo)題第一步：在<head>里面添加<meta>標(biāo)簽，使網(wǎng)頁(yè)適應(yīng)手機(jī)屏幕寬度。第二步：頭部為同程旅游的logo，用<img>標(biāo)簽表示第三步：主體部分包括各種圖片的超鏈接，需要用到列表樣式<ul>標(biāo)簽第四步：尾部主要為本站點(diǎn)的版權(quán)信息，版權(quán)信息的樣式為文字居中，內(nèi)間距為10px點(diǎn)擊輸入說(shuō)明文字點(diǎn)擊輸入說(shuō)明文字點(diǎn)擊輸入說(shuō)明文字

任務(wù)實(shí)施企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）06任務(wù)總結(jié)任務(wù)技能任務(wù)實(shí)施任務(wù)拓展任務(wù)描述

通過(guò)本項(xiàng)目的學(xué)習(xí)，對(duì)HTML5的發(fā)展、優(yōu)勢(shì)、文檔結(jié)構(gòu)具有初步了解，對(duì)HTML5新增的標(biāo)簽及屬性有了初步認(rèn)識(shí)，同時(shí)也掌握了CSS3選擇器和自適應(yīng)網(wǎng)站的相關(guān)概念。

任務(wù)總結(jié)企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）謝謝觀賞PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論