《HTML5與CSS3項目實戰》課件-CORE01_第1頁
《HTML5與CSS3項目實戰》課件-CORE01_第2頁
《HTML5與CSS3項目實戰》課件-CORE01_第3頁
《HTML5與CSS3項目實戰》課件-CORE01_第4頁
《HTML5與CSS3項目實戰》課件-CORE01_第5頁
已閱讀5頁，還剩21頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

同城旅游界面設計項目一企業級卓越人才培養（信息類專業集群）目錄01學習目標02學習路徑03任務描述04任務技能05任務實施06任務總結01學習目標

學習目標010203了解HTML5的文檔結構、新增標簽了解CSS樣式規則掌握CSS3選擇器學習目標

通過實現同程旅游界面，學習HTML5與CSS3相關知識，了解HTML5與CSS3發展歷史、基礎標簽和自適應網站標簽的使用04了解自適應網站的概念企業級卓越人才培養（信息類專業集群）02學習路徑

學習路徑企業級卓越人才培養（信息類專業集群）03任務描述

01情境導入

02功能描述03

基本框架

04開發環境

任務描述企業級卓越人才培養（信息類專業集群）

情境導入隨著科技的發展，網絡在人們的生活中占著主導地位，而旅游作為人們緩解壓力的方式之一，旅游網站也慢慢的走進了我們的生活。本次任務主要是實現同程旅游的界面設計。企業級卓越人才培養（信息類專業集群）

功能描述情境入01使用響應式布局技術來設計同城旅游界面

01

02

03

04頭部包括同城旅游的logo主體包括各種圖片鏈接底部包括本站點的版權信息企業級卓越人才培養（信息類專業集群）

基本框架企業級卓越人才培養（信息類專業集群）系統環境Windows7系統及以上系統軟件環境服務器瀏覽器Sublime

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

谷歌瀏覽器手機端：Webkit內核瀏覽器

Android手機內置

瀏覽器

開發環境企業級卓越人才培養（信息類專業集群）04任務技能任務技能

HTML5概述

HTML5基礎

網頁編輯器及環境

CSS3初體驗

CSS樣式表

CSS選擇器

任務技能企業級卓越人才培養（信息類專業集群）建設制造強國12HTML5萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改（W3C

Recommendation）。2014年10月29日，萬維網聯盟宣布，經過接近8年的艱苦努力，標準規范終于制定完成。（1）快速迭代（2）減低成本（3）導流入口多（4）分發效率高

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

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

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

CSS3樣式表定義標記的style屬性定義內部樣式企業級卓越人才培養（信息類專業集群）建設制造強國34嵌入外部樣式表就是在HTML代碼中直接導入樣式表的方法。基本語法<styletype="text/css">@importurl("外部樣式表的文件名稱");</style>鏈接外部樣式表就是把外部的CSS文件鏈接到HTML中，基本語法為：<linktype="text/css"rel="stylesheet"href="外部樣式表的文件名稱">

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

任務實施企業級卓越人才培養（信息類專業集群）06任務總結任務技能任務實施任務拓展任務描述

通過本項目的學習，對HTML5的發展、優勢、文檔結構具有初步了解，對HTML5新增的標簽及屬性有了初步認識，同時也掌握了CSS3選擇器和自適應網站的相關概念。

任務總結企業級卓越人才培養（信息類專業集群）謝謝觀賞PPT模板下載：/moban/行業PPT模板：/hangye/節日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優秀PPT下載：

溫馨提示

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

評論

0/150

提交評論