前端網(wǎng)頁(yè)設(shè)計(jì)(高職高專)課件

1、書名：前端網(wǎng)頁(yè)設(shè)計(jì)ISBN： 978-7-111-44372-8作者：杜黎強(qiáng)出版社：機(jī)械工業(yè)出版社本書配有電子課件第1次課教學(xué)回顧教學(xué)導(dǎo)入教學(xué)實(shí)施任務(wù)實(shí)施準(zhǔn)備頁(yè)檢查知識(shí)點(diǎn)講解任務(wù)實(shí)施請(qǐng)大家完成本次課課中頁(yè)：任務(wù)2-實(shí)施過(guò)程.doc第2次課教學(xué)內(nèi)容及實(shí)施環(huán)節(jié)項(xiàng)目準(zhǔn)備：任務(wù)2 應(yīng)用web2.0標(biāo)準(zhǔn)區(qū)分HTML與XHTML文檔分發(fā)本次課所用文件項(xiàng)目準(zhǔn)備-任務(wù)2(任務(wù)實(shí)施過(guò)程).doc項(xiàng)目準(zhǔn)備-任務(wù)2(任務(wù)實(shí)施總結(jié)).doc項(xiàng)目準(zhǔn)備-任務(wù)3子任務(wù)1-任務(wù)實(shí)施準(zhǔn)備.doc知識(shí)點(diǎn)：(一)概念(2個(gè))(1)W3C組織:(World Wide Web Consortium, 萬(wàn)維網(wǎng)聯(lián)盟)是一個(gè)專門負(fù)責(zé)網(wǎng)絡(luò)標(biāo)準(zhǔn)

2、制定的非贏利組織,諸如HTML、XHTML、CSS、XML等標(biāo)準(zhǔn)都是W3C制定的。2. W3C會(huì)員包括生產(chǎn)技術(shù)產(chǎn)品及服務(wù)的廠商、內(nèi)容供應(yīng)商、 團(tuán)體擁護(hù)、研究實(shí)驗(yàn)室、標(biāo)準(zhǔn)制定機(jī)構(gòu)和政府部門，會(huì)員一起協(xié)同工作，致力在萬(wàn)維網(wǎng)發(fā)展方向上達(dá)成共識(shí)。(2)Web標(biāo)準(zhǔn)是由W3C和其他標(biāo)準(zhǔn)化組織制定的一套規(guī)范集合;目的是創(chuàng)建一個(gè)統(tǒng)一的用于Web表現(xiàn)層的技術(shù)標(biāo)準(zhǔn);通過(guò)不同瀏覽器或終端設(shè)備向最終用戶展示信息內(nèi)容。知識(shí)點(diǎn)：(二)Web標(biāo)準(zhǔn)由3大部分組成對(duì)應(yīng)的標(biāo)準(zhǔn)語(yǔ)言也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言(HTML、XHTML和XML)表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言(CSS)行為標(biāo)準(zhǔn)(對(duì)象模型:W3CDOM、ECMAScript)結(jié)構(gòu)(Struc

3、ture)：對(duì)網(wǎng)頁(yè)中用到的信息進(jìn)行分類與整理表現(xiàn)(Presentation)：對(duì)信息進(jìn)行版式、顏色、大小等形式控制行為(Behavior)：文檔內(nèi)部的模型定義及交互行為的編寫Document Object Model文檔對(duì)象模型:瀏覽器與網(wǎng)頁(yè)內(nèi)容結(jié)構(gòu)之間的接口，使用戶可以訪問(wèn)頁(yè)面上的標(biāo)準(zhǔn)組件腳本語(yǔ)言，用于實(shí)現(xiàn)具體界面上對(duì)象的交互操作歐洲電腦廠商協(xié)會(huì)(European Computer Manufacturers Association)提問(wèn)1、結(jié)構(gòu)標(biāo)準(zhǔn)語(yǔ)言在網(wǎng)頁(yè)中主要對(duì)網(wǎng)頁(yè)信息起到組織和分類的作用：(1) XHTML (The Extensible HyperText Markup Langu

4、age，可擴(kuò)展超文本標(biāo)記語(yǔ)言)。W3C于2000年1月20日推出XHTML1.0版本。(2) XML (The Extensible Markup Language，可擴(kuò)展標(biāo)記語(yǔ)言)，W3C于1998年2月10日發(fā)布XML1.0，于2000年10月6日發(fā)布XML1.0(SE)第2版。是一種能定義其他語(yǔ)言的語(yǔ)言，最初設(shè)計(jì)的目的是彌補(bǔ)HTML的不足，以強(qiáng)大的擴(kuò)展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，逐漸用于網(wǎng)絡(luò)數(shù)據(jù)交換標(biāo)準(zhǔn)的格式2、表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言在網(wǎng)頁(yè)中主要對(duì)網(wǎng)頁(yè)信息的顯示進(jìn)行控制，即如何修飾網(wǎng)頁(yè)信息的顯示樣式CSS (Cascading Style Sheets，層疊式樣式表)，W3C于1998年5月12日發(fā)

5、布的CSS2，創(chuàng)建的目的就是使用CSS取代HTML中結(jié)構(gòu)與表現(xiàn)混淆的弊端，使站點(diǎn)訪問(wèn)與維護(hù)更加容易3、行為標(biāo)準(zhǔn)語(yǔ)言在網(wǎng)頁(yè)中主要對(duì)網(wǎng)頁(yè)信息的結(jié)構(gòu)和顯示進(jìn)行邏輯控制，即動(dòng)態(tài)控制網(wǎng)頁(yè)信息的結(jié)構(gòu)和顯示，實(shí)現(xiàn)網(wǎng)頁(yè)的交互。(1) DOM (Document Object Model，文檔對(duì)象模型)。是一種讓瀏覽器與網(wǎng)頁(yè)內(nèi)容溝通的語(yǔ)言，使得用戶可以訪問(wèn)頁(yè)面元素和組件。給Web設(shè)計(jì)師和設(shè)計(jì)者一個(gè)標(biāo)準(zhǔn)的方法，讓他們來(lái)訪問(wèn)站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)象(2) ECMAScript，由ECMA指定的標(biāo)準(zhǔn)腳本語(yǔ)言歐洲電腦廠商協(xié)會(huì)知識(shí)點(diǎn)：(三)Web標(biāo)準(zhǔn)布局的使用國(guó)內(nèi)第一個(gè)使用Web標(biāo)準(zhǔn)布局的網(wǎng)站：閃客帝國(guó)()， 20

6、04年10月開始使用Web標(biāo)準(zhǔn)對(duì)網(wǎng)站進(jìn)行改版重構(gòu)，于2005年完成全部CSS布局。Web標(biāo)準(zhǔn)在國(guó)內(nèi)應(yīng)用逐漸普及，它不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。提問(wèn)知識(shí)點(diǎn)：(四)Web標(biāo)準(zhǔn)布局與傳統(tǒng)表格布局的對(duì)比看下面實(shí)例：三行三列表格布局網(wǎng)頁(yè)Web標(biāo)準(zhǔn)布局與傳統(tǒng)表格布局的對(duì)比標(biāo)準(zhǔn)布局(源文件)表格布局(源文件)知識(shí)點(diǎn)：(五)XHTML頁(yè)面結(jié)構(gòu)XHTML與HTML文檔頁(yè)面沒有太大區(qū)別，但增加了XML語(yǔ)言的基本規(guī)范和要求：參看下列標(biāo)準(zhǔn)XHTML網(wǎng)頁(yè)文檔結(jié)構(gòu)：XHTML提供 DTD文檔類型過(guò)渡型(Transitional):表示要求非常寬松的DTD文檔，允許使用HTML元素，但要符合XHTML的語(yǔ)法要求，

7、此格式完整代碼如下： 三種幾種 ？嚴(yán)格型(Strict)：表示要求嚴(yán)格的DTD文檔，需要干凈的標(biāo)記，標(biāo)記中不能使用任何描述性的元素和屬性，避免表現(xiàn)上的混亂，與層疊樣式表配合使用。完整代碼如下：框架型(Frameset)：針對(duì)框架頁(yè)面設(shè)計(jì)使用的DTD文檔，如果是框架網(wǎng)頁(yè)或網(wǎng)頁(yè)中包含框架，則采用這種DTD。完整代碼如下：知識(shí)點(diǎn)：(六)XHTML常用元素簡(jiǎn)介通用塊狀元素，在標(biāo)準(zhǔn)網(wǎng)頁(yè)布局中最常用的結(jié)構(gòu)化元素。表示文檔結(jié)構(gòu)塊，可以把文檔分割為多個(gè)區(qū)域。如下面網(wǎng)頁(yè)實(shí)例中使用了3個(gè)div元素將頁(yè)面分割成三大塊區(qū)域，分別屬于頁(yè)眉、主體、頁(yè)腳，在頁(yè)眉和主體區(qū)域中又用幾個(gè)div元素再分割幾個(gè)更小區(qū)域：(1) di

8、v (division,分隔)網(wǎng)頁(yè)實(shí)例頁(yè)眉主體頁(yè)腳實(shí)例代碼： (2) span (行內(nèi))通用內(nèi)聯(lián)元素，作為文本或內(nèi)聯(lián)元素的容器。一般使用span元素為部分文本或內(nèi)聯(lián)元素定義特殊樣式、排版、修飾特定內(nèi)容或局部區(qū)域。如下面實(shí)例代碼： 紅色顯示 加粗顯示 .斜體顯示 . .(3) h1h6 (header,標(biāo)題)定義網(wǎng)頁(yè)標(biāo)題：一級(jí)標(biāo)題到六級(jí)標(biāo)題。此類元素為塊狀元素。一般搜索引擎可以對(duì)標(biāo)題元素進(jìn)行檢索，因此用戶要使用標(biāo)題元素定義網(wǎng)頁(yè)標(biāo)題。用法如下： 標(biāo)題 . . (4) p (paragraph，段落)設(shè)置段落，為塊狀元素。用法如下： . . (5) li、ol、ul、dl、dt、dd(項(xiàng)目列表)li

9、: item in a list縮寫，表示列表中的項(xiàng)目ol: order list縮寫，表示有順序的列表ul: unordered list縮寫，表示無(wú)順序列表dl: definition list縮寫，表示定義列表dt: definition term縮寫，表示定義列表標(biāo)題dd: definition in a definition list縮寫，表 示定義列表中的定義，即對(duì)標(biāo)題的解釋列表元素全部是塊狀元素，全部配對(duì)使用：ol與li合用定義有序列表；ul與li合用則定義無(wú)序列表；dl、dt、dd合用可以實(shí)現(xiàn)定義列表列表序號(hào)屬性：type1、a、A、i、I列表序號(hào)屬性：typedisc、cir

10、cle、square列表元素用法： 列表項(xiàng) 列表項(xiàng) . 列表項(xiàng) 列表項(xiàng) . 標(biāo)題列表項(xiàng) 標(biāo)題說(shuō)明 標(biāo)題列表項(xiàng) 標(biāo)題說(shuō)明 .任務(wù)實(shí)施：使用列表設(shè)計(jì)導(dǎo)航菜單操作要求：請(qǐng)根據(jù)下列網(wǎng)頁(yè)布局樣圖，完成.html格式的網(wǎng)頁(yè)效果；使用CSS+DIV布局；文件命名：list_navigation .htm課后作業(yè)完成本次課任務(wù)2實(shí)施總結(jié)和第3次課任務(wù)3-子任務(wù)1實(shí)施準(zhǔn)備上傳: FTP:/up/ 第1周作業(yè)注意：作業(yè)文件夾一定要按命名規(guī)則命名教學(xué)導(dǎo)入教學(xué)實(shí)施知識(shí)點(diǎn)講解任務(wù)實(shí)施請(qǐng)大家完成本次課課中頁(yè)：任務(wù)3-子任務(wù)1實(shí)施過(guò)程.doc第3次課教學(xué)內(nèi)容及實(shí)施環(huán)節(jié)第2次課教學(xué)回顧項(xiàng)目準(zhǔn)備：任務(wù)3 使用CSS樣式表修飾H

11、TML網(wǎng)頁(yè)子任務(wù)1 網(wǎng)頁(yè)對(duì)象布局分發(fā)本次課所用文件項(xiàng)目準(zhǔn)備-任務(wù)3 子任務(wù)1-任務(wù)實(shí)施過(guò)程.doc項(xiàng)目準(zhǔn)備-任務(wù)3 子任務(wù)1-任務(wù)實(shí)施總結(jié).doc項(xiàng)目準(zhǔn)備-任務(wù)3 子任務(wù)2-任務(wù)實(shí)施準(zhǔn)備.doc定義：CSS就是(Cascading Style Sheets)“層疊樣式表”，簡(jiǎn)稱樣式表，它是一種定義網(wǎng)頁(yè)頁(yè)面排版樣式的工具特點(diǎn)：1、CSS精確地控制網(wǎng)頁(yè)面里各元素的格式，通過(guò)修改一個(gè) 文件就可以改變大量網(wǎng)頁(yè)的外觀和格式； 2、CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的瀏覽器支持；3、編碼更少，下載速度更快；知識(shí)點(diǎn)： （一）CSS基礎(chǔ)提問(wèn)：

12、屬于網(wǎng)頁(yè)設(shè)計(jì) 哪種標(biāo)準(zhǔn)語(yǔ)言？將樣式表文件嵌入HTML或XHTML文檔的方法 (1)一般是嵌入到文檔頭即:標(biāo)記中(2)將樣式表加入到代碼行中(3)將外部CSS文件鏈接到HTML或XHTML文檔(4)將外部CSS文件導(dǎo)入到HTML或XHTML文檔鏈接外部樣式表導(dǎo)入外部樣式表內(nèi)嵌樣式表提問(wèn)內(nèi)部樣式表知識(shí)點(diǎn)： （二）語(yǔ)法結(jié)構(gòu)1. CSS基本語(yǔ)法結(jié)構(gòu) CSS的語(yǔ)法結(jié)構(gòu)由三部分組成： 選擇符(selector) 屬性(properties) 屬性值(value) 書寫格式如下： selector property: value 選擇符 屬性:值提問(wèn)練習(xí)：請(qǐng)大家快速完成一個(gè)CSS命令語(yǔ)句的編輯，內(nèi)容自定義2

13、、選擇符的類型 3種 HTML或XHTML標(biāo)記選擇符：HTML或XHTML標(biāo)記 如 body、p、table等，屬性和值要用冒號(hào)隔開： 例如 body margin: 50px 40px 20px 10px; id選擇符：#選擇符 （id屬性） 定義一個(gè)元素的獨(dú)特樣式，每個(gè)id屬性的值是唯一的，必須 以字母開頭并且僅包含字母、數(shù)字或連字符(字母:AZ、az) 例如：#mbgcolor:#00ffff;width:260px;height:160px; 歡迎使用CSS層疊式樣式表 類選擇符：.選擇符（class屬性） 類的名稱可以是任意英文單詞或以英文開頭與數(shù)字的組合， 一般以其功能和效果簡(jiǎn)要命

14、名。 例如： .tcolor:#0000ff;font-family:”隸書” 歡迎使用CSS層疊式樣式表提問(wèn)知識(shí)點(diǎn)： （三）CSS元素分類1、塊級(jí)元素 (display:block)每個(gè)塊級(jí)元素都從新行開始，其后元 素也要另起一行開始，如div2、內(nèi)聯(lián)元素 (display:inline)不需要在新行內(nèi)顯示，其后元素也不 必另起一行，如span3、列表項(xiàng) (display:list-item)和列表類似塊狀元素與內(nèi)聯(lián)元素區(qū)別塊狀元素內(nèi)聯(lián)元素最大區(qū)別：塊狀元素可以定義大小，即設(shè)置寬度、高度屬性知識(shí)點(diǎn)：(四)盒模型 (邊距、填充距)left內(nèi)容寬度、邊距、填充據(jù)、邊框之間的關(guān)系，如下圖所示：知識(shí)點(diǎn)：(四)盒模型 (邊距、填充距)整個(gè)區(qū)域?qū)挾龋?=20+10+40+200+40+10+20=340px邊框默認(rèn)樣式為0(即不顯示)；填充距padding不可以 為負(fù)；如果