HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)-第一章-網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件_第1頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)-第一章-網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件_第2頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)-第一章-網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件_第3頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)-第一章-網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件_第4頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)-第一章-網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件_第5頁(yè)
已閱讀5頁(yè)，還剩33頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第1頁(yè)第1章網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁(yè)第1章網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)本章概述第2頁(yè)本章概述網(wǎng)頁(yè)設(shè)計(jì)工作主要包括網(wǎng)頁(yè)內(nèi)容顯示、總體顏色選擇、頁(yè)面的排版布局和用戶群的體驗(yàn)度等。網(wǎng)頁(yè)設(shè)計(jì)作為一門綜合性較高的課程，涉及商業(yè)策劃、平面設(shè)計(jì)、程序語(yǔ)言和數(shù)據(jù)庫(kù)等。本章將介紹網(wǎng)頁(yè)的基本組成元素、頁(yè)面結(jié)構(gòu)和創(chuàng)建網(wǎng)頁(yè)的方法。第2頁(yè)本章概述網(wǎng)頁(yè)設(shè)計(jì)工作主要包括網(wǎng)頁(yè)內(nèi)容顯示、總體顏色選擇第3頁(yè)本章的學(xué)習(xí)目標(biāo)了解網(wǎng)頁(yè)上常見(jiàn)的基本元素及其特點(diǎn)了解網(wǎng)頁(yè)的布局結(jié)構(gòu)即網(wǎng)頁(yè)內(nèi)容的排版知識(shí)掌握編輯HTML5網(wǎng)頁(yè)常用的編輯軟件了解HTML5發(fā)展、優(yōu)勢(shì)、瀏覽器支持情況掌握HTML5文檔的基本格式和語(yǔ)法規(guī)范掌握創(chuàng)建和瀏覽網(wǎng)頁(yè)的方法第3頁(yè)本章的學(xué)習(xí)目標(biāo)了解網(wǎng)頁(yè)上常見(jiàn)的基本元素及其特點(diǎn)第4頁(yè)主要內(nèi)容1.1網(wǎng)頁(yè)的基本元素1.2網(wǎng)頁(yè)的布局結(jié)構(gòu)1.3創(chuàng)建HTML5頁(yè)面1.4HTML5基礎(chǔ)1.5實(shí)訓(xùn)1.6本章小結(jié)第4頁(yè)主要內(nèi)容1.1網(wǎng)頁(yè)的基本元素第5頁(yè)1.1網(wǎng)頁(yè)的基本元素介紹構(gòu)成網(wǎng)頁(yè)的基本元素及其特點(diǎn)。1.文本2.圖片和動(dòng)畫3.聲音和視頻4.超鏈接5.導(dǎo)航欄6.表單7.其他常見(jiàn)元素第5頁(yè)1.1網(wǎng)頁(yè)的基本元素介紹構(gòu)成網(wǎng)頁(yè)的基本元素及其特點(diǎn)。第6頁(yè)1.2網(wǎng)頁(yè)的布局結(jié)構(gòu)從頁(yè)面布局的角度看，一個(gè)頁(yè)面的布局就類似一篇文章的排版，需要分為多個(gè)區(qū)塊，較大的區(qū)塊又可再細(xì)分為小區(qū)塊。塊內(nèi)有文字、圖片、超鏈接等內(nèi)容，這些區(qū)塊一般稱為塊級(jí)元素，而區(qū)塊內(nèi)的文字、圖片或超鏈接等一般稱為行級(jí)元素，如圖1-2所示。第6頁(yè)1.2網(wǎng)頁(yè)的布局結(jié)構(gòu)從頁(yè)面布局的角度看，一個(gè)頁(yè)面的1.3創(chuàng)建HTML5頁(yè)面第7頁(yè)本節(jié)主要內(nèi)容：案例分析用記事本編輯網(wǎng)頁(yè)用HBuilder編輯網(wǎng)頁(yè)1.3創(chuàng)建HTML5頁(yè)面第7頁(yè)本節(jié)主要內(nèi)容：1.3.1案例分析【案例展示】設(shè)計(jì)一個(gè)簡(jiǎn)單的頁(yè)面，包含了網(wǎng)頁(yè)標(biāo)題文字和一行文本信息，本例文件1-1.html在IE瀏覽器中的瀏覽效果如圖1-3所示?！局R(shí)要點(diǎn)】HTML文檔的結(jié)構(gòu)、創(chuàng)建網(wǎng)頁(yè)、保存網(wǎng)頁(yè)與瀏覽網(wǎng)頁(yè)。【學(xué)習(xí)目標(biāo)】掌握使用記事本和HBuilder創(chuàng)建、保存和瀏覽網(wǎng)頁(yè)的方法。第8頁(yè)1.3.1案例分析【案例展示】設(shè)計(jì)一個(gè)簡(jiǎn)單的頁(yè)面，包含了1.3.2用記事本編輯網(wǎng)頁(yè)用記事本創(chuàng)建網(wǎng)頁(yè)過(guò)程如下。(1)打開(kāi)記事本。(2)創(chuàng)建新文件。(3)保存網(wǎng)頁(yè)。(4)瀏覽網(wǎng)頁(yè)。(5)查看網(wǎng)頁(yè)源代碼。第9頁(yè)1.3.2用記事本編輯網(wǎng)頁(yè)用記事本創(chuàng)建網(wǎng)頁(yè)過(guò)程如下。第91.3.3用HBuilder編輯網(wǎng)頁(yè)用HBuilder創(chuàng)建網(wǎng)頁(yè)過(guò)程如下。(1)啟動(dòng)HBuilder，創(chuàng)建Web項(xiàng)目。(2)創(chuàng)建HTML文件。(3)編輯文件。(4)瀏覽網(wǎng)頁(yè)。第10頁(yè)1.3.3用HBuilder編輯網(wǎng)頁(yè)用HBuilder創(chuàng)1.4HTML5基礎(chǔ)第11頁(yè)本節(jié)主要內(nèi)容：HTML5概述HTML5文檔結(jié)構(gòu)HTML5語(yǔ)句結(jié)構(gòu)HTML5語(yǔ)法規(guī)范1.4HTML5基礎(chǔ)第11頁(yè)本節(jié)主要內(nèi)容：1.4.1HTML5概述1.HTML5發(fā)展

2014年10發(fā)布。HTML5將會(huì)逐漸取代HTML4.01、XHTML1.0標(biāo)準(zhǔn)。2.HTML5優(yōu)勢(shì)

新的簡(jiǎn)化的字符集聲明。

新的簡(jiǎn)化的DOCTYPE。

簡(jiǎn)答而強(qiáng)大的HTML5API。

以瀏覽器原生能力替代復(fù)雜的JavaScript代碼。3.瀏覽器支持

目前常用的瀏覽器有IE、火孤(Firefox)、谷歌(Chrome)、Safari和Opera等。第12頁(yè)1.4.1HTML5概述1.HTML5發(fā)展第12頁(yè)1.4.2HTML5文檔結(jié)構(gòu)HTML文檔是一種純文本格式的文件，文檔的基本結(jié)構(gòu)為:<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>網(wǎng)頁(yè)標(biāo)題</title> </head> <body>

網(wǎng)頁(yè)內(nèi)容 </body></html>第13頁(yè)1.4.2HTML5文檔結(jié)構(gòu)HTML文檔是一種純文本格式1.4.2CSS的層疊和繼承性1.<!doctype>聲明：<!DOCTYPE>聲明必須是HTML文檔的第一行，位于<html>標(biāo)簽之前。2.<html>文檔標(biāo)簽：<html>標(biāo)記位于<!doctype>標(biāo)記之后，也稱為根標(biāo)記，表示HTML文檔的開(kāi)始。3.<head>頭標(biāo)簽：<head>標(biāo)簽用于定義HTML文檔的頭部信息，緊跟在<html>標(biāo)簽之后。4.文檔編碼：HTML5文檔使用meta元素的charset屬性指定文檔編碼，格式為：<metacharset="UTF-8">5.<title>標(biāo)題標(biāo)簽：<title>標(biāo)簽用來(lái)定義文檔的標(biāo)題。6.<body>主體標(biāo)簽：<body>標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容。第14頁(yè)1.4.2CSS的層疊和繼承性1.<!doctype>1.4.3HTML5語(yǔ)句結(jié)構(gòu)HTML5語(yǔ)句主要有標(biāo)簽、屬性和元素構(gòu)成，其語(yǔ)法結(jié)構(gòu)如下：<標(biāo)簽屬性1="屬性值1"屬性2="屬性值2"…>元素的內(nèi)容</標(biāo)簽>1.標(biāo)簽

標(biāo)簽分單標(biāo)簽和雙標(biāo)簽，單標(biāo)簽如<br/>、<hr/>等。雙標(biāo)簽由開(kāi)始和結(jié)束兩個(gè)標(biāo)簽符組必須成對(duì)出現(xiàn)，<p>…</p>等。第15頁(yè)1.4.3HTML5語(yǔ)句結(jié)構(gòu)HTML5語(yǔ)句主要有標(biāo)簽、屬1.4.3HTML5語(yǔ)句結(jié)構(gòu)2.屬性

屬性在開(kāi)始標(biāo)簽中指定，用來(lái)表示該標(biāo)簽的性質(zhì)和特性。通常都是以“屬性名=”值”形式來(lái)表示，有多個(gè)屬性時(shí)用空格隔開(kāi)，并且在指定多個(gè)屬性時(shí)不用區(qū)分順序。

例如，段落標(biāo)簽<p>有屬性align，align表示文字的對(duì)齊方式，表示為：<palign=“center">歡迎訪問(wèn)本網(wǎng)站</p>3.元素

元素指的是包含標(biāo)簽在內(nèi)的整體，元素的內(nèi)容是開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容。第16頁(yè)1.4.3HTML5語(yǔ)句結(jié)構(gòu)2.屬性第16頁(yè)1.4.4HTML5語(yǔ)法規(guī)范1.標(biāo)簽和屬性的規(guī)范

標(biāo)簽名和屬性建議都用小寫字母。

HTML標(biāo)簽可以嵌套，但不允許交叉。

HTML標(biāo)簽中的一個(gè)單詞不能分兩行寫。

屬性值都要用雙引號(hào)括起來(lái)。

HTML源文件中的換行、回車符和空格在顯示效果中是無(wú)效的。2.代碼的縮進(jìn)

HTML代碼并不要求在書寫時(shí)縮進(jìn)，但為了文檔的結(jié)構(gòu)性和層次性，建議使用標(biāo)簽時(shí)首尾對(duì)齊，內(nèi)部的內(nèi)容向右縮進(jìn)幾格。第17頁(yè)1.4.4HTML5語(yǔ)法規(guī)范1.標(biāo)簽和屬性的規(guī)范第11.5實(shí)訓(xùn)【實(shí)訓(xùn)任務(wù)】練習(xí)創(chuàng)建網(wǎng)頁(yè)文檔，展示企業(yè)簡(jiǎn)介信息，本例文件1-2.html在瀏覽器中的顯示效果如圖1-11所示。第18頁(yè)1.5實(shí)訓(xùn)【實(shí)訓(xùn)任務(wù)】練習(xí)創(chuàng)建網(wǎng)頁(yè)文檔，展示企業(yè)簡(jiǎn)介信息第19頁(yè)1.6本章小結(jié)本章講述了網(wǎng)頁(yè)的基本元素、布局結(jié)構(gòu)和網(wǎng)頁(yè)編輯技術(shù)。首先，介紹了網(wǎng)頁(yè)上常見(jiàn)基本元素和網(wǎng)頁(yè)的布局結(jié)構(gòu)知識(shí)。然后，結(jié)合案例介紹了常用的網(wǎng)頁(yè)編輯工具記事本和Hbuilder。最后，介紹了HTML5文檔的結(jié)構(gòu)和語(yǔ)法規(guī)范等內(nèi)容。第19頁(yè)1.6本章小結(jié)本章講述了網(wǎng)頁(yè)的基本元素、布局結(jié)第20頁(yè)第1章網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁(yè)第1章網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)本章概述第21頁(yè)本章概述網(wǎng)頁(yè)設(shè)計(jì)工作主要包括網(wǎng)頁(yè)內(nèi)容顯示、總體顏色選擇、頁(yè)面的排版布局和用戶群的體驗(yàn)度等。網(wǎng)頁(yè)設(shè)計(jì)作為一門綜合性較高的課程，涉及商業(yè)策劃、平面設(shè)計(jì)、程序語(yǔ)言和數(shù)據(jù)庫(kù)等。本章將介紹網(wǎng)頁(yè)的基本組成元素、頁(yè)面結(jié)構(gòu)和創(chuàng)建網(wǎng)頁(yè)的方法。第2頁(yè)本章概述網(wǎng)頁(yè)設(shè)計(jì)工作主要包括網(wǎng)頁(yè)內(nèi)容顯示、總體顏色選擇第22頁(yè)本章的學(xué)習(xí)目標(biāo)了解網(wǎng)頁(yè)上常見(jiàn)的基本元素及其特點(diǎn)了解網(wǎng)頁(yè)的布局結(jié)構(gòu)即網(wǎng)頁(yè)內(nèi)容的排版知識(shí)掌握編輯HTML5網(wǎng)頁(yè)常用的編輯軟件了解HTML5發(fā)展、優(yōu)勢(shì)、瀏覽器支持情況掌握HTML5文檔的基本格式和語(yǔ)法規(guī)范掌握創(chuàng)建和瀏覽網(wǎng)頁(yè)的方法第3頁(yè)本章的學(xué)習(xí)目標(biāo)了解網(wǎng)頁(yè)上常見(jiàn)的基本元素及其特點(diǎn)第23頁(yè)主要內(nèi)容1.1網(wǎng)頁(yè)的基本元素1.2網(wǎng)頁(yè)的布局結(jié)構(gòu)1.3創(chuàng)建HTML5頁(yè)面1.4HTML5基礎(chǔ)1.5實(shí)訓(xùn)1.6本章小結(jié)第4頁(yè)主要內(nèi)容1.1網(wǎng)頁(yè)的基本元素第24頁(yè)1.1網(wǎng)頁(yè)的基本元素介紹構(gòu)成網(wǎng)頁(yè)的基本元素及其特點(diǎn)。1.文本2.圖片和動(dòng)畫3.聲音和視頻4.超鏈接5.導(dǎo)航欄6.表單7.其他常見(jiàn)元素第5頁(yè)1.1網(wǎng)頁(yè)的基本元素介紹構(gòu)成網(wǎng)頁(yè)的基本元素及其特點(diǎn)。第25頁(yè)1.2網(wǎng)頁(yè)的布局結(jié)構(gòu)從頁(yè)面布局的角度看，一個(gè)頁(yè)面的布局就類似一篇文章的排版，需要分為多個(gè)區(qū)塊，較大的區(qū)塊又可再細(xì)分為小區(qū)塊。塊內(nèi)有文字、圖片、超鏈接等內(nèi)容，這些區(qū)塊一般稱為塊級(jí)元素，而區(qū)塊內(nèi)的文字、圖片或超鏈接等一般稱為行級(jí)元素，如圖1-2所示。第6頁(yè)1.2網(wǎng)頁(yè)的布局結(jié)構(gòu)從頁(yè)面布局的角度看，一個(gè)頁(yè)面的1.3創(chuàng)建HTML5頁(yè)面第26頁(yè)本節(jié)主要內(nèi)容：案例分析用記事本編輯網(wǎng)頁(yè)用HBuilder編輯網(wǎng)頁(yè)1.3創(chuàng)建HTML5頁(yè)面第7頁(yè)本節(jié)主要內(nèi)容：1.3.1案例分析【案例展示】設(shè)計(jì)一個(gè)簡(jiǎn)單的頁(yè)面，包含了網(wǎng)頁(yè)標(biāo)題文字和一行文本信息，本例文件1-1.html在IE瀏覽器中的瀏覽效果如圖1-3所示?！局R(shí)要點(diǎn)】HTML文檔的結(jié)構(gòu)、創(chuàng)建網(wǎng)頁(yè)、保存網(wǎng)頁(yè)與瀏覽網(wǎng)頁(yè)?！緦W(xué)習(xí)目標(biāo)】掌握使用記事本和HBuilder創(chuàng)建、保存和瀏覽網(wǎng)頁(yè)的方法。第27頁(yè)1.3.1案例分析【案例展示】設(shè)計(jì)一個(gè)簡(jiǎn)單的頁(yè)面，包含了1.3.2用記事本編輯網(wǎng)頁(yè)用記事本創(chuàng)建網(wǎng)頁(yè)過(guò)程如下。(1)打開(kāi)記事本。(2)創(chuàng)建新文件。(3)保存網(wǎng)頁(yè)。(4)瀏覽網(wǎng)頁(yè)。(5)查看網(wǎng)頁(yè)源代碼。第28頁(yè)1.3.2用記事本編輯網(wǎng)頁(yè)用記事本創(chuàng)建網(wǎng)頁(yè)過(guò)程如下。第91.3.3用HBuilder編輯網(wǎng)頁(yè)用HBuilder創(chuàng)建網(wǎng)頁(yè)過(guò)程如下。(1)啟動(dòng)HBuilder，創(chuàng)建Web項(xiàng)目。(2)創(chuàng)建HTML文件。(3)編輯文件。(4)瀏覽網(wǎng)頁(yè)。第29頁(yè)1.3.3用HBuilder編輯網(wǎng)頁(yè)用HBuilder創(chuàng)1.4HTML5基礎(chǔ)第30頁(yè)本節(jié)主要內(nèi)容：HTML5概述HTML5文檔結(jié)構(gòu)HTML5語(yǔ)句結(jié)構(gòu)HTML5語(yǔ)法規(guī)范1.4HTML5基礎(chǔ)第11頁(yè)本節(jié)主要內(nèi)容：1.4.1HTML5概述1.HTML5發(fā)展

2014年10發(fā)布。HTML5將會(huì)逐漸取代HTML4.01、XHTML1.0標(biāo)準(zhǔn)。2.HTML5優(yōu)勢(shì)

新的簡(jiǎn)化的字符集聲明。

新的簡(jiǎn)化的DOCTYPE。

簡(jiǎn)答而強(qiáng)大的HTML5API。

以瀏覽器原生能力替代復(fù)雜的JavaScript代碼。3.瀏覽器支持

目前常用的瀏覽器有IE、火孤(Firefox)、谷歌(Chrome)、Safari和Opera等。第31頁(yè)1.4.1HTML5概述1.HTML5發(fā)展第12頁(yè)1.4.2HTML5文檔結(jié)構(gòu)HTML文檔是一種純文本格式的文件，文檔的基本結(jié)構(gòu)為:<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>網(wǎng)頁(yè)標(biāo)題</title> </head> <body>

網(wǎng)頁(yè)內(nèi)容 </body></html>第32頁(yè)1.4.2HTML5文檔結(jié)構(gòu)HTML文檔是一種純文本格式1.4.2CSS的層疊和繼承性1.<!doctype>聲明：<!DOCTYPE>聲明必須是HTML文檔的第一行，位于<html>標(biāo)簽之前。2.<html>文檔標(biāo)簽：<html>標(biāo)記位于<!doctype>標(biāo)記之后，也稱為根標(biāo)記，表示HTML文檔的開(kāi)始。3.<head>頭標(biāo)簽：<head>標(biāo)簽用于定義HTML文檔的頭部信息，緊跟在<html>標(biāo)簽之后。4.文檔編碼：HTML5文檔使用meta元素的charset屬性指定文檔編碼，格式為：<metacharset="UTF-8">5.<title>標(biāo)題標(biāo)簽：<title>標(biāo)簽用來(lái)定義文檔的標(biāo)題。6.<body>主體標(biāo)簽：<body>標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容。第33頁(yè)1.4.2CSS的層疊和繼承性1.<!doctype>1.4.3HTML5語(yǔ)句結(jié)構(gòu)HTML5語(yǔ)句主要有標(biāo)簽、屬性和元素構(gòu)成，其語(yǔ)法結(jié)構(gòu)如下：<標(biāo)簽屬性1="屬性值1"屬性2="屬性值2"…>元素的內(nèi)容</標(biāo)簽>1.標(biāo)簽

標(biāo)簽分單標(biāo)簽和雙標(biāo)簽，單標(biāo)簽如<br/>、<hr/>等。雙標(biāo)簽由開(kāi)始和結(jié)束兩個(gè)標(biāo)簽符組必須成對(duì)出現(xiàn)，<p>…</p>等。第34頁(yè)1.4.3HTML5語(yǔ)句結(jié)構(gòu)HTML5語(yǔ)句主要有標(biāo)簽、屬1.4.3HTML5語(yǔ)句結(jié)構(gòu)2.屬性

屬性在開(kāi)始標(biāo)簽中指定，用來(lái)表示該標(biāo)簽的性質(zhì)和特性。通常都是以“屬性名=”值”形式來(lái)表示，有多個(gè)屬性時(shí)用空格隔開(kāi)，并且在指定多個(gè)屬性時(shí)不用區(qū)分順序。

例如，段落標(biāo)簽<p>有屬性

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 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ì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論