大學(xué)計(jì)算機(jī)基礎(chǔ)及應(yīng)用（Python篇）課件：網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

學(xué)習(xí)目標(biāo)1、網(wǎng)站和網(wǎng)頁(yè)2、HTML概述3、Body中的標(biāo)簽4、CSS概述5、網(wǎng)站設(shè)計(jì)步驟1、多媒體基本知識(shí)6.1網(wǎng)站和網(wǎng)頁(yè)Internet的迅速普及，人們每天瀏覽網(wǎng)站的時(shí)間越來(lái)越多，網(wǎng)絡(luò)直播、網(wǎng)絡(luò)購(gòu)物、電子銀行、網(wǎng)絡(luò)理財(cái)?shù)冉o人們帶來(lái)一種前所未有的、全新的生活體驗(yàn)。越來(lái)越多的人希望在網(wǎng)絡(luò)上擁有自己的個(gè)人主頁(yè)或個(gè)人網(wǎng)站，來(lái)展示個(gè)人的個(gè)性和特點(diǎn)。同時(shí)也有越來(lái)越多的企業(yè)通過(guò)互聯(lián)網(wǎng)上來(lái)展示自身形象，提供服務(wù)和產(chǎn)品資訊。網(wǎng)站是由網(wǎng)頁(yè)按照一定的鏈接順序組成。網(wǎng)頁(yè)是實(shí)現(xiàn)信息交流與溝通最直接的手段，也是互聯(lián)網(wǎng)最重要的一環(huán)。1、多媒體基本知識(shí)6.1.1網(wǎng)站和網(wǎng)頁(yè)的概念6.1.2網(wǎng)頁(yè)基本構(gòu)成要素6.1.3網(wǎng)頁(yè)的基本結(jié)構(gòu)一個(gè)標(biāo)準(zhǔn)的網(wǎng)頁(yè)，一般由結(jié)構(gòu)層、樣式層和行為層三大部分組成。1.結(jié)構(gòu)層HTML/HTML5

HTML是構(gòu)成網(wǎng)頁(yè)的基本骨架，它也是網(wǎng)頁(yè)內(nèi)容的載體，內(nèi)容就是網(wǎng)頁(yè)制作者放在頁(yè)面上想要讓用戶(hù)瀏覽的信息，可以包含文字、圖片、視頻等。如圖6-4所示文字和圖片信息。1、多媒體基本知識(shí)2.樣式層CSS/CSS3CSS樣式是表現(xiàn)。就像網(wǎng)頁(yè)的外衣，比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等，所有這些用來(lái)改變內(nèi)容外觀(guān)的東西稱(chēng)之為表現(xiàn)。3.行為層

JavascriptJavaScript是用來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)上的特效效果。如：鼠標(biāo)滑過(guò)彈出下拉菜單?；蚴髽?biāo)滑過(guò)表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換?？梢赃@么理解，有動(dòng)畫(huà)的，有交互的一般都是用JavaScript來(lái)實(shí)現(xiàn)的。HTML(HyperTextMarkupLanguage)即超文本標(biāo)記語(yǔ)言。它不是一種編程語(yǔ)言，而是標(biāo)記語(yǔ)言，用于告訴瀏覽器如何構(gòu)造您所訪(fǎng)問(wèn)的網(wǎng)頁(yè)。HTML由一系列元素組成，可以用它來(lái)封裝、包裝或標(biāo)記內(nèi)容的不同部分，使其以某種方式顯示或以某種方式執(zhí)行。6.2.1HTML標(biāo)記6.2.2HTML文檔頭部相關(guān)標(biāo)記2、HTML概述body中的標(biāo)簽主要分為塊級(jí)元素和行內(nèi)元素，兩者可以通過(guò)display屬性進(jìn)行轉(zhuǎn)換。塊級(jí)元素：一個(gè)標(biāo)簽占一行的內(nèi)容，下一個(gè)標(biāo)簽需要另起一行；塊級(jí)標(biāo)簽可以更改長(zhǎng)寬。行內(nèi)元素：一個(gè)標(biāo)簽是多大就占多大位置，下一個(gè)標(biāo)簽在右側(cè)補(bǔ)上；行內(nèi)標(biāo)簽不可以更改長(zhǎng)寬。6.3.1塊級(jí)元素1.普通標(biāo)簽常用的普通塊級(jí)標(biāo)簽有：div（常用塊狀容器，也是csslayout的主要標(biāo)簽）、h1-h6（標(biāo)題）、p（段落）、hr（水平分隔線(xiàn)）、table（表格）、form（交互表單）等。3、body中的標(biāo)簽2.列表標(biāo)簽在網(wǎng)頁(yè)中列表是很常見(jiàn)的標(biāo)簽，主要分為有序標(biāo)簽、無(wú)序標(biāo)簽、列表嵌套、定義標(biāo)簽，包括有：ol（有序列表）、ul（無(wú)序列表）、li（列表項(xiàng)）、dl（定義列表）、dt（定義術(shù)語(yǔ)）、dd（定義描述）、menu（菜單列表）等。6.3.2行內(nèi)元素1.普通元素標(biāo)簽常用的元素標(biāo)簽有span（常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊），a（錨點(diǎn)，鏈接），img（引入圖片），br（強(qiáng)制換行），sub（下標(biāo)），sup（上標(biāo)）等。6.3.3行內(nèi)塊狀元素塊級(jí)標(biāo)簽和行內(nèi)標(biāo)簽可以相互轉(zhuǎn)換。塊級(jí)標(biāo)簽轉(zhuǎn)換為行內(nèi)標(biāo)簽的方法是設(shè)置display=inline。塊級(jí)標(biāo)簽轉(zhuǎn)換為行內(nèi)標(biāo)簽以后還可以更改長(zhǎng)寬，方法是設(shè)置display=inline-block。行內(nèi)標(biāo)簽轉(zhuǎn)換為塊級(jí)標(biāo)簽的方法是設(shè)置display=block。6.4CSS概述在頁(yè)面排版時(shí)，內(nèi)容與樣式的混合設(shè)計(jì)方式將導(dǎo)致頁(yè)面代碼過(guò)于臃腫、難于維護(hù)，也不利于搜索引擎的檢索。CSS（層疊樣式表）的出現(xiàn)，將頁(yè)面內(nèi)容與樣式徹底分離，極大改善了HTML在頁(yè)面顯示方面的缺陷。使用CSS樣式表可以控制HTML標(biāo)簽的顯示樣式，如頁(yè)面的布局、字體、顏色、背景和圖文混排等效果。在網(wǎng)站的風(fēng)格方面，一個(gè)CSS樣式文件可以在多個(gè)頁(yè)面中使用，當(dāng)用戶(hù)修改CSS樣式文件時(shí)，所有引用該樣式文件的頁(yè)面外觀(guān)都隨之發(fā)生改變。6.4.1CSS基本語(yǔ)法結(jié)構(gòu)6.4.2CSS的引入6.4.3CSS選擇器6.5網(wǎng)站設(shè)計(jì)步驟