網(wǎng)頁制作ppt課件(完整版)

1、任務(wù)1-1 制作“藍(lán)夢音樂網(wǎng)”歡迎頁面任務(wù)描述 我們欣賞下“藍(lán)夢音樂網(wǎng)”的首頁。大家覺得這張網(wǎng)頁怎么樣？ 欣賞完 “藍(lán)夢音樂網(wǎng)”的首頁，大家很想把它制作出來，但又覺得無從下手。 萬丈高樓平地起，要實(shí)現(xiàn)“藍(lán)夢音樂網(wǎng)”首頁這么復(fù)雜的網(wǎng)頁，需要夯實(shí)專業(yè)基礎(chǔ)，不斷地積累知識(shí)。不斷地積累知識(shí)。為實(shí)現(xiàn)自己的目標(biāo)，我們就從制作最簡單的“歡迎進(jìn)入藍(lán)夢音樂網(wǎng)”網(wǎng)頁開始吧。引導(dǎo)訓(xùn)練1-1任務(wù)分析什么是網(wǎng)頁？網(wǎng)頁有什么特殊性？網(wǎng)頁是如何呈現(xiàn)出來的？網(wǎng)頁是如何做出來的？提問任務(wù)目標(biāo)3了解網(wǎng)頁、網(wǎng)站的概念掌握了解熟悉掌握了解熟悉5掌握網(wǎng)頁的文檔結(jié)構(gòu)熟悉HBuilder工具制作網(wǎng)頁42了解萬維網(wǎng)的概念1了解互聯(lián)網(wǎng)的概念任

2、務(wù)實(shí)施1.認(rèn)識(shí)網(wǎng)頁（1）添加文本字段（2） 添加密碼字段2.制作網(wǎng)頁 網(wǎng)頁是由文字、圖片、動(dòng)畫、聲音等多種媒體信息以及超鏈接構(gòu)成的超文本。網(wǎng)頁文件是由超文本標(biāo)記語言（HyperText Markup Language，簡稱HTML）編寫的，能夠在萬維網(wǎng)上（World Wide Web,簡稱WWW或3W）傳輸并能被瀏覽器解析和顯示的文本文件。網(wǎng)頁 在一個(gè)文檔內(nèi)可以加入圖片、聲音、動(dòng)畫、影視等內(nèi)容，這些內(nèi)容可以統(tǒng)稱為資源，并且它可以從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件，與世界各地主機(jī)的文件鏈接。任務(wù)實(shí)施1.認(rèn)識(shí)網(wǎng)頁（1）添加文本字段（2） 添加密碼字段2.制作網(wǎng)頁超文本任務(wù)實(shí)施Hyper（超或超級(jí)）TMLT

3、ext（文本）Markup（標(biāo)記）Language（語言）H1.認(rèn)識(shí)網(wǎng)頁（1）添加文本字段（2） 添加密碼字段2.制作網(wǎng)頁超文本標(biāo)記語言（HTML）沒有嚴(yán)格的計(jì)算機(jī)語言的語法結(jié)構(gòu)，是由標(biāo)記符組成的代碼集合，標(biāo)記符（又稱標(biāo)簽）用“”括起來，其格式為： 任務(wù)實(shí)施1.認(rèn)識(shí)網(wǎng)頁（1）添加文本字段（2） 添加密碼字段2.制作網(wǎng)頁 網(wǎng)站是一個(gè)溝通工具，它由眾多不同內(nèi)容的網(wǎng)頁構(gòu)成，人們可以利用它來發(fā)布自己想要公開的資訊或者利用它來提供相關(guān)的網(wǎng)絡(luò)服務(wù)。網(wǎng)站任務(wù)實(shí)施1.認(rèn)識(shí)網(wǎng)頁（1）添加文本字段（2） 添加密碼字段2.制作網(wǎng)頁 萬維網(wǎng)也稱環(huán)球信息網(wǎng)，它建立在客戶機(jī)/服務(wù)器模型之上，以超文本標(biāo)記語言與超文本傳輸協(xié)

4、議（HyperText Transfer Protocol，簡稱HTTP）為基礎(chǔ)，能夠提供面向因特網(wǎng)（Internet）服務(wù)的、一致的用戶界面的信息瀏覽系統(tǒng)。萬維網(wǎng) 因特網(wǎng)是一組全球信息資源的總匯。它由許多小的網(wǎng)絡(luò)（子網(wǎng)）互聯(lián)而形成的一個(gè)邏輯網(wǎng)，每個(gè)子網(wǎng)中包含相互連接的若干臺(tái)計(jì)算機(jī)（主機(jī)）。它是一個(gè)信息資源和資源共享的集合。它提供的主要服務(wù)有萬維網(wǎng)（WWW）、文件傳輸（FTP）、電子郵件（E-mail）、遠(yuǎn)程登錄（Telnet）等等。任務(wù)實(shí)施1.認(rèn)識(shí)網(wǎng)頁（1）添加文本字段（2） 添加密碼字段2.制作網(wǎng)頁因特網(wǎng)任務(wù)實(shí)施1.認(rèn)識(shí)網(wǎng)頁（1）添加文本字段（2） 添加密碼字段2.制作網(wǎng)頁”藍(lán)夢音樂網(wǎng)”首

5、頁是利用HTML語言制作出來的該文件是一個(gè)超文本，它是由文字、圖片、動(dòng)畫等多種媒體信息以及超鏈接構(gòu)成的網(wǎng)頁文件由萬維網(wǎng)傳輸并通過瀏覽器解析后呈現(xiàn)在瀏覽器上?！八{(lán)夢音樂網(wǎng)”是一個(gè)網(wǎng)站藍(lán)夢音樂網(wǎng)首頁排行榜歌手歌單精選登錄注冊音樂節(jié)任務(wù)實(shí)施1.認(rèn)識(shí)網(wǎng)頁（1）認(rèn)識(shí)HTML文檔結(jié)構(gòu)（2） 編寫代碼2.制作網(wǎng)頁HTML是制作網(wǎng)頁的基本語言HTML指令代碼沒有嚴(yán)格的計(jì)算機(jī)語言的語法結(jié)構(gòu)HTML標(biāo)記符格式為： HTML標(biāo)記符（也稱標(biāo)簽）用“”括起來。標(biāo)簽和屬性都不區(qū)分大小寫。HTML文件的擴(kuò)展名為“.htm”或“.html”HTML文檔結(jié)構(gòu)由兩部分組成，分別為頭部與主體部分任務(wù)實(shí)施1.認(rèn)識(shí)網(wǎng)頁（1）認(rèn)識(shí)HTM

6、L文檔結(jié)構(gòu)（2） 編寫代碼2.制作網(wǎng)頁頭部部分：元標(biāo)簽（）:用于描述HTML網(wǎng)頁文檔的屬性。標(biāo)題標(biāo)簽（）：用于設(shè)置網(wǎng)頁的標(biāo)題腳本（）：用于設(shè)置文檔使用的腳本樣式（）：用于定義文檔使用的樣式主體部分包含了HTML中大部分標(biāo)簽1）使用記事本中編寫代碼 歡迎進(jìn)入藍(lán)夢音樂網(wǎng) 歡迎進(jìn)入藍(lán)夢音樂網(wǎng)！ 任務(wù)實(shí)施1.認(rèn)識(shí)網(wǎng)頁（1）認(rèn)識(shí)HTML文檔結(jié)構(gòu)（2） 編寫代碼2.制作網(wǎng)頁2）使用Hbuilder編寫代碼1.認(rèn)識(shí)網(wǎng)頁（1）認(rèn)識(shí)HTML文檔結(jié)構(gòu)（2） 編寫代碼2.制作網(wǎng)頁任務(wù)實(shí)施HBuilder是由國內(nèi)Dcloud（數(shù)字天堂）專為前端打造的開發(fā)工具，具有最全的語法庫和瀏覽器兼容性，能夠方便的制作手機(jī)App。

7、它支持HTML、CSS、JavaScript、PHP的快速開發(fā)，是一款功能強(qiáng)大、操作方便的工具，深受廣大前端開發(fā)者的喜愛。任務(wù)實(shí)施創(chuàng)建項(xiàng)目1）打開HBuilder軟件，單擊“文件”|“新建”|“項(xiàng)目”菜單，打開“新建項(xiàng)目”對(duì)話框，如圖所示。1.認(rèn)識(shí)網(wǎng)頁（1）認(rèn)識(shí)HTML文檔結(jié)構(gòu)（2） 編寫代碼2.制作網(wǎng)頁任務(wù)實(shí)施創(chuàng)建HTML文件1）右擊“musicProject”項(xiàng)目，彈出菜單對(duì)話框，單擊“新建”|“目錄”菜單，創(chuàng)建“task-1”文件夾，右擊“task-1”文件夾，單擊“新建”|“html”菜單，打開“新建html”對(duì)話框，輸入文件名為“welcome.html”。如圖所示。1.認(rèn)識(shí)網(wǎng)頁（1

8、）認(rèn)識(shí)HTML文檔結(jié)構(gòu)（2） 編寫代碼2.制作網(wǎng)頁任務(wù)實(shí)施2）單擊“創(chuàng)建”按鈕，出現(xiàn)“welcome.hmtl”編輯區(qū)域，在和標(biāo)簽內(nèi)輸入對(duì)應(yīng)的文本，輸入情況如圖所示。1.認(rèn)識(shí)網(wǎng)頁（1）認(rèn)識(shí)HTML文檔結(jié)構(gòu)（2） 編寫代碼2.制作網(wǎng)頁任務(wù)實(shí)施3）單擊“運(yùn)行”|“運(yùn)行到瀏覽器”|“chrome”,就會(huì)以谷歌瀏覽器打開“welcome.html”,展示網(wǎng)頁運(yùn)行效果。運(yùn)行效果圖如圖所示1.認(rèn)識(shí)網(wǎng)頁（1）認(rèn)識(shí)HTML文檔結(jié)構(gòu)（2） 編寫代碼2.制作網(wǎng)頁HTML標(biāo)記符（也稱標(biāo)簽）用“”括起來。標(biāo)簽和屬性都不區(qū)分大小寫。HTML文件的擴(kuò)展名為“.htm”或“.html”HTML文檔包含頭部和主體兩部分。頭部

9、部分是指HTML代碼結(jié)構(gòu)中代碼頭部，用標(biāo)簽標(biāo)識(shí)，其包含在HEAD標(biāo)簽內(nèi)的部分我們叫HTML頭部信息。主體部分是指HTML代碼結(jié)構(gòu)中代碼主體，用標(biāo)簽標(biāo)識(shí)。任務(wù)小結(jié)獨(dú)立訓(xùn)練 請大家用兩種方法制作“時(shí)空電音網(wǎng)”歡迎網(wǎng)面。第一種方法用記事本制作，用IE瀏覽器顯示。第二種方法用HBuilder工具制作，用谷歌瀏覽器顯示。任務(wù)描述Thanks!任務(wù)2-1 制作“藍(lán)夢音樂網(wǎng)”音樂節(jié)頁面內(nèi)容回顧HTML的文檔結(jié)構(gòu)由幾部分構(gòu)成？HBuilder創(chuàng)建項(xiàng)目包含哪幾個(gè)主要步驟？任務(wù)描述 音樂節(jié)是音樂領(lǐng)域一項(xiàng)重大活動(dòng)，為了讓廣大網(wǎng)民了解音樂節(jié)，我們需要制作音樂節(jié)網(wǎng)頁，展示音樂節(jié)的相關(guān)內(nèi)容。音樂節(jié)網(wǎng)頁需要介紹的內(nèi)容有主要

10、形式、演出形式和一些著名的音樂節(jié)。設(shè)計(jì)效果圖如右圖。引導(dǎo)訓(xùn)練1-1任務(wù)分析該網(wǎng)頁中的字體有幾種表現(xiàn)形式？除了文本，該網(wǎng)頁還包含什么內(nèi)容？如何實(shí)現(xiàn)首行縮進(jìn)與分段？提問任務(wù)目標(biāo)1了解HTML中的特殊符號(hào)掌握了解熟悉掌握了解熟悉5掌握段落標(biāo)簽熟悉換行標(biāo)簽34掌握橫線標(biāo)簽6掌握圖片標(biāo)簽熟悉標(biāo)題標(biāo)簽2任務(wù)實(shí)施1.添加標(biāo)題 2.添加段落3.添加橫線4.插入特殊符號(hào)5.添加圖片6.添加換行標(biāo)簽網(wǎng)頁中標(biāo)題和文章中的標(biāo)題具有一致性，都是用于概括一篇文章或一個(gè)段落HTML提供了六級(jí)標(biāo)題，分別是、，其中字號(hào)最大，字號(hào)最小。標(biāo)題在網(wǎng)頁中獨(dú)占一行，并且以粗體顯示。任務(wù)實(shí)施1.添加標(biāo)題2.添加段落3.添加橫線4.插入特殊

11、符號(hào)5.添加圖片6.添加換行標(biāo)簽標(biāo)題設(shè)置：音樂節(jié)主要形式演出形式著名音樂節(jié)巴斯音樂節(jié)亞杰創(chuàng)業(yè)音樂節(jié)克什克騰草原音樂節(jié)“恒大星光”音樂節(jié)/h3任務(wù)實(shí)施1.添加標(biāo)題2.添加段落3.添加橫線4.插入特殊符號(hào)5.添加圖片6.添加換行標(biāo)簽編寫代碼并運(yùn)行任務(wù)實(shí)施1.添加標(biāo)題2.添加段落4.添加橫線3.插入特殊符號(hào)5.添加圖片6.添加換行標(biāo)簽在網(wǎng)頁中，要把文章按段落有條理的顯示出來，需要使用段落標(biāo)簽。使用格式： 文章段落說明： align屬性用于設(shè)置段落的對(duì)齊方式，可以設(shè)置為left（左對(duì)齊）,center（居中）,right(右對(duì)齊)。任務(wù)實(shí)施1.添加標(biāo)題2.添加段落3.添加橫線4.插入特殊符號(hào)5.添加圖

12、片6.添加換行標(biāo)簽為了添加音樂節(jié)網(wǎng)頁中關(guān)于各標(biāo)題的描述，我們需要使用標(biāo)簽任務(wù)實(shí)施1.添加標(biāo)題2.添加段落3.添加橫線4.插入特殊符號(hào)5.添加圖片6.添加換行標(biāo)簽編寫代碼并運(yùn)行任務(wù)實(shí)施1.添加標(biāo)題2.添加段落3.添加橫線4.插入特殊符號(hào)5.添加圖片6.添加換行標(biāo)簽屬性說明width用于設(shè)置橫線的長度，設(shè)置長度時(shí)既可以用占網(wǎng)頁的寬度的百分比，也可以用具體數(shù)字來固定橫線長度，單位為像素。size用于設(shè)置橫線的粗細(xì)，以像素(px)為單位。align用于設(shè)置段落的對(duì)齊方式，可以設(shè)置為left（左對(duì)齊）,center（居中）,right(右對(duì)齊)。color屬性用于橫線的顏色。在網(wǎng)頁中，有時(shí)需要用一根橫線

13、對(duì)網(wǎng)頁內(nèi)容進(jìn)行分隔，這時(shí)候就需要使用標(biāo)簽.使用格式：任務(wù)實(shí)施1.添加標(biāo)題2.添加段落3.添加橫線4.插入特殊符號(hào)5.添加圖片6.添加換行標(biāo)簽為了為了實(shí)現(xiàn)“音樂節(jié)”內(nèi)容和和“主要形式”之間的分隔，需要使用橫線標(biāo)簽。 編寫代碼并運(yùn)行任務(wù)實(shí)施1.添加標(biāo)題2.添加段落3.添加橫線4.插入特殊符號(hào)5.添加圖片6.添加換行標(biāo)簽 在網(wǎng)頁中，一些字符已經(jīng)被HTML使用，如“”、“”(英文雙引號(hào))等等，所以不能在網(wǎng)頁代碼中直接使用它們。如果我們需要在網(wǎng)頁中顯示這些特殊符號(hào)，就需要使用這些符號(hào)的轉(zhuǎn)義碼。常見特殊字符轉(zhuǎn)義碼。特殊字符轉(zhuǎn)義碼引號(hào)（）&空格元（）版權(quán)（）注冊商標(biāo)（）任務(wù)實(shí)施1.添加標(biāo)題2.添加段落3.添

14、加橫線4.插入特殊符號(hào)5.添加圖片6.添加換行標(biāo)簽段落的首行需要縮進(jìn)，不能直接在段落首行單擊空格鍵輸入“空格”字符，而是需要插入空格（）這個(gè)轉(zhuǎn)義碼編寫代碼并運(yùn)行任務(wù)實(shí)施1.添加標(biāo)題2.添加段落3.添加橫線4.插入特殊符號(hào)5.添加圖片6.添加換行標(biāo)簽在網(wǎng)頁中，為了實(shí)現(xiàn)圖文并茂，需要使用圖片標(biāo)簽。使用格式如下： 如何添加圖片？img標(biāo)簽的屬性屬性說明src用于設(shè)置圖片文件的路徑，在實(shí)際應(yīng)用中，文件的路徑采取相對(duì)路徑。height用于設(shè)置圖片在網(wǎng)頁中的高度，其單位為像素(px)width用于設(shè)置圖片在網(wǎng)頁中的寬度，其單位為像素(px)alt用于設(shè)置的圖片的文字說明。在我們?yōu)g覽網(wǎng)頁時(shí)，如果圖片因網(wǎng)絡(luò)原

15、因無法顯示，那么在該圖片的位置就會(huì)顯示該圖片的文字說明，以便瀏覽者清楚該圖片的用途。align用于設(shè)置段落的對(duì)齊方式，可以設(shè)置為left（左對(duì)齊）,center（居中）,right(右對(duì)齊)。hspace用于設(shè)置圖片與文本間的橫向間距，單位是像素(px)。vspace用于設(shè)置圖片與文本間的縱向間距，單位是像素(px)。任務(wù)實(shí)施1.添加標(biāo)題2.添加段落3.添加橫線4.插入特殊符號(hào)5.添加圖片6.添加換行標(biāo)簽需要采用圖文并茂的方式描述著名的音樂節(jié)，需要使用標(biāo)簽編寫代碼并運(yùn)行任務(wù)實(shí)施1.添加標(biāo)題2.添加段落3.添加橫線4.插入特殊符號(hào)5.添加圖片6.添加換行標(biāo)簽不同內(nèi)容塊之間需要使用空行或在一個(gè)段落

16、中某兩句話之間需要換行，就需要使用換行標(biāo)簽。該標(biāo)簽是一個(gè)單獨(dú)標(biāo)簽。任務(wù)實(shí)施1.添加標(biāo)題2.添加段落3.添加橫線4.插入特殊符號(hào)5.添加圖片6.添加換行標(biāo)簽圖文出現(xiàn)了錯(cuò)位顯示，為解決這個(gè)問題，我們使用標(biāo)簽編寫代碼并運(yùn)行任務(wù)小結(jié)42網(wǎng)頁常用的基本標(biāo)簽包括標(biāo)題(-)、段落（）、橫線（）、圖片（）和換行（）等等。在使用標(biāo)簽時(shí)，我們需要根據(jù)網(wǎng)頁效果設(shè)置好標(biāo)簽的屬性。靈活運(yùn)用好標(biāo)簽，能使網(wǎng)頁顯示畫面美觀、漂亮。獨(dú)立訓(xùn)練43 電影節(jié)是電影領(lǐng)域一項(xiàng)重大活動(dòng)，為了讓廣大網(wǎng)民了解電影節(jié)，我們需要制作電影節(jié)網(wǎng)頁，設(shè)計(jì)該網(wǎng)頁的具體要求如下：1.使用標(biāo)簽設(shè)置不同的文本表現(xiàn)形式2.插入圖片3.實(shí)現(xiàn)分段與段落縮進(jìn)任務(wù)描述T

17、hanks!任務(wù)2-2 美化“藍(lán)夢音樂網(wǎng)”注冊頁面內(nèi)容回顧標(biāo)題標(biāo)簽可以分為幾級(jí)？段落標(biāo)簽的屬性align有哪些屬性值？img標(biāo)簽有哪些常用屬性？任務(wù)描述 網(wǎng)頁最基本的要求是頁面美觀大方和具有吸引力。為了實(shí)現(xiàn)上述要求，我們需要對(duì)“藍(lán)夢音樂網(wǎng)”進(jìn)行美化。1.設(shè)置一級(jí)標(biāo)題“音樂節(jié)”文字的顏色為blue；2.設(shè)置二級(jí)標(biāo)題“主要形式”、“演出形式”和“著名音樂節(jié)”文字的顏色為royalblue；3.把“巴斯音樂節(jié)”、“亞杰創(chuàng)業(yè)音樂節(jié)”等著名音樂節(jié)設(shè)置為列表標(biāo)簽，顏色設(shè)置為steelblue，字體為粗體；4.在頁面上添加音樂播放控件，并能播放名為“bgmusic.mp3”的音樂文件；5.在頁面添加視頻播放

18、控件，并播放名為“yajie.mp4”的視頻文件；6.在頁面頂部加一移動(dòng)字幕，并使它從右邊移到左邊，循環(huán)出現(xiàn)。效果圖如右。引導(dǎo)訓(xùn)練2-2任務(wù)分析該網(wǎng)頁中出現(xiàn)了哪些新元素？與之前的網(wǎng)頁相比較美觀度是否有變化？提問任務(wù)目標(biāo)1了解marquee標(biāo)簽掌握了解熟悉掌握了解熟悉4掌握列表標(biāo)簽5掌握文本格式化標(biāo)簽熟悉視頻標(biāo)簽3 熟悉聲音標(biāo)簽2任務(wù)實(shí)施501.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表網(wǎng)頁中美化標(biāo)題可以使用字體標(biāo)簽，該標(biāo)題能設(shè)置文本字體、大小和顏色。任務(wù)實(shí)施511.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加

19、聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表字體標(biāo)簽的使用格式如下： 文字內(nèi)容屬性說明color用于設(shè)置文字內(nèi)容的顏色，屬性值可以是英文顏色單詞，如blue（藍(lán)色），也可以是十六進(jìn)制的數(shù)字值，如#FFFFFF（白色）。size用于設(shè)置文字內(nèi)容字體的大小。size的設(shè)置值為1-7，1為最小字體，7為最大字體。當(dāng)在網(wǎng)頁中出現(xiàn)時(shí)，表示比預(yù)設(shè)的字體大一級(jí)。通常預(yù)設(shè)的字體為3。face用于設(shè)置文字內(nèi)容的字體，如“宋體”。設(shè)置文字內(nèi)容的字體時(shí)，操作系統(tǒng)要安裝該字體，否則瀏覽器以系統(tǒng)中的默認(rèn)字體顯示。任務(wù)實(shí)施521.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲

20、音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表編寫代碼并運(yùn)行任務(wù)實(shí)施531.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表 當(dāng)需要對(duì)網(wǎng)頁內(nèi)容按某種邏輯方式進(jìn)行分組時(shí)，需要使用列表標(biāo)簽。 常用的列表標(biāo)簽有三種，分別是：有序列表無序列表自定義列表任務(wù)實(shí)施541.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表什么是有序列表？有序列表是指各條目之間是有邏輯順序的，如“1、2、3、”

21、或“a、b、c、”。有序類表用來標(biāo)記，列表中的每一項(xiàng)用來標(biāo)記。其使用格式如下：列表項(xiàng)1列表項(xiàng)2任務(wù)實(shí)施551.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表編寫代碼并運(yùn)行任務(wù)實(shí)施561.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表無序列表是指需列表的各條目之間無順序關(guān)系，使用實(shí)心圓、小正方形或空心圓等列舉條目 無序列表使用標(biāo)簽來創(chuàng)建，列表中的每一項(xiàng)用來標(biāo)記。其使用格式如下：列表項(xiàng)1列表項(xiàng)2type屬性：用來設(shè)置列表項(xiàng)邏

22、輯順序的表示方式，共有以下幾種方式。disk（實(shí)心圓 ）square（小正方形）circle（空心圓）什么是無序列表？任務(wù)實(shí)施571.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表編寫代碼并運(yùn)行用無序列表列舉著名的音樂節(jié),其中type屬性設(shè)為disk。任務(wù)實(shí)施581.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表自定義列表不但可以列表項(xiàng)，而且還能對(duì)列表進(jìn)行簡短描述。自定義列表以標(biāo)簽開始，自定義列表項(xiàng)用引導(dǎo)，自定義列表項(xiàng)的

23、簡短描述進(jìn)用引導(dǎo)。其使用格式如下：列表項(xiàng)1列表項(xiàng)描述1 列表項(xiàng)2列表項(xiàng)描述2什么是自定義列表？任務(wù)實(shí)施591.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表自定義列表以標(biāo)簽開始，自定義列表項(xiàng)用引導(dǎo)，自定義列表項(xiàng)的簡短描述進(jìn)用引導(dǎo)。其使用格式如下：列表項(xiàng)1列表項(xiàng)描述1 列表項(xiàng)2列表項(xiàng)描述2編寫代碼并運(yùn)行任務(wù)實(shí)施1.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表 為了使網(wǎng)頁豐富多彩，文本顯示凸顯特色，我們可以使用文本格式化標(biāo)

24、簽。常用文本格式化標(biāo)簽如下。標(biāo)簽描述定義粗體文本。定義大號(hào)字。定義突出文字。定義斜體字。 定義小號(hào)字。定義加重語氣。定義下標(biāo)字。定義上標(biāo)字。任務(wù)實(shí)施1.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表本文本是粗體本文本被強(qiáng)化本文本是大號(hào)字本文本被突出本文本是斜體本文本是小號(hào)字本文本包含下標(biāo)本文本包含上標(biāo)任務(wù)實(shí)施621.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表對(duì)列舉的著名的音樂節(jié)加粗，則需要使用文本格式化標(biāo)簽中的加粗標(biāo)

25、簽。編寫代碼并運(yùn)行任務(wù)實(shí)施631.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表 標(biāo)簽播放音頻，該標(biāo)簽是一個(gè)HTML5標(biāo)簽，必須要支持HTML5的瀏覽器才能使用它。 使用格式如下： 屬性值描述autoplayautoplay如果出現(xiàn)該屬性，則音頻就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。looploop如果出現(xiàn)該屬性，則每當(dāng)音頻播放結(jié)束時(shí)重新開始播放。preloadpreload如果出現(xiàn)該屬性，則音頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 autop

26、lay，則忽略該屬性。srcurl要播放的音頻的 URL。任務(wù)實(shí)施641.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表在音樂節(jié)網(wǎng)頁中，需要在頁面上添加音樂播放控件，播放文件名為“bgmusic.mp3”，可以使用標(biāo)簽。編寫代碼并運(yùn)行任務(wù)實(shí)施651.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表屬性值描述autoplayautoplay如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性

27、，則向用戶顯示控件，比如播放按鈕。heightpixels設(shè)置視頻播放器的高度。looploop如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開始播放。mutedmuted規(guī)定視頻的音頻輸出應(yīng)該被靜音。posterURL規(guī)定視頻下載時(shí)顯示的圖像，或者在用戶點(diǎn)擊播放按鈕前顯示的圖像preloadpreload如果出現(xiàn)該屬性，則視頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 autoplay，則忽略該屬性。srcurl要播放的視頻的 URL。widthpixels設(shè)置視頻播放器的寬度。 標(biāo)簽是一個(gè)HTML5標(biāo)簽，必須要支持HTML5的瀏覽器才能使用它。 使用格式如下： 任務(wù)實(shí)施661.美化標(biāo)題3.添加

28、文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表在音樂節(jié)網(wǎng)頁中，需要在在頁面添加視頻播放控件，播放的文件名為“yajie.mp4”，可以使用標(biāo)簽。 編寫代碼并運(yùn)行任務(wù)實(shí)施671.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表Product標(biāo)簽可以讓文字在網(wǎng)頁上動(dòng)態(tài)滾動(dòng)。該標(biāo)簽的格式如下：屬性說明direction用于設(shè)置文字的運(yùn)動(dòng)方向，可以設(shè)置向左（left）和向右（right）運(yùn)動(dòng)。behavior用于設(shè)置文字的運(yùn)動(dòng)方式，可以設(shè)置為轉(zhuǎn)動(dòng)

29、（scroll）、運(yùn)動(dòng)一遍（slide）和來回交替運(yùn)動(dòng)（alternate）。loop用于設(shè)置循環(huán)次數(shù)，若未指定則一直循環(huán)。scrollamount用于設(shè)置滾動(dòng)速度，數(shù)字越大，速度越快。scrolldelay用于設(shè)置文字滾動(dòng)間隔，單位是毫秒。任務(wù)實(shí)施681.美化標(biāo)題3.添加文本格式化標(biāo)簽4.添加聲音標(biāo)簽5.添加視頻標(biāo)簽6.添加marquee2.使用列表1.有序列表2.無序列表3.自定義列表在音樂節(jié)網(wǎng)頁中，需要在頁面頂部加一移動(dòng)字幕“聽藍(lán)夢音樂，放松好心情！”，并使它從右邊移到左邊，循環(huán)出現(xiàn)，可以使用標(biāo)簽。編寫代碼并運(yùn)行任務(wù)小結(jié)69通過美化音樂節(jié)網(wǎng)頁，我們學(xué)會(huì)了字體（）標(biāo)簽、文本格式化標(biāo)簽、列表

30、標(biāo)簽、音頻標(biāo)簽、視頻標(biāo)簽和marquee標(biāo)簽的使用。字體標(biāo)簽?zāi)軌蛟O(shè)置字體、顏色和字體大小。文本格式化標(biāo)簽?zāi)軌驅(qū)崿F(xiàn)文字加粗、傾斜、加下劃線、上升和下沉。列表包括有序列表、無序列表和自定義列表。音頻標(biāo)簽?zāi)軐?shí)現(xiàn)播放音頻文件。視頻標(biāo)簽?zāi)軐?shí)現(xiàn)播放視頻文件。marquee標(biāo)簽可以讓文字在網(wǎng)頁上動(dòng)態(tài)滾動(dòng)。獨(dú)立訓(xùn)練 對(duì)“時(shí)空電影網(wǎng)”電影節(jié)頁面進(jìn)行美化。具體要求如下：1.設(shè)置一級(jí)標(biāo)題“電影節(jié)”文字的顏色；2.強(qiáng)化描述電影節(jié)中的文本“威尼斯電影節(jié)、戛納電影節(jié)、柏林電影節(jié)”；3.設(shè)置二級(jí)標(biāo)題 “著名電影節(jié)”文字的顏色；4.把各個(gè)電影節(jié)的的網(wǎng)址設(shè)置為斜體；5.把“戛納電影節(jié)”、“威尼斯電影節(jié)”等著名音樂節(jié)設(shè)置為無序列

31、表標(biāo)簽；6.在頁面上添加音樂播放控件，并能播放名為“bgmusic.mp3”的音樂文件；7.在頁面添加視頻播放控件，并播放名為“movieFest.mp4”的視頻文件。任務(wù)描述Thanks!任務(wù)3-1 制作“藍(lán)夢音樂網(wǎng)”歌手頁面內(nèi)容回顧常用的HTML標(biāo)簽有哪些？圖象標(biāo)簽有哪些屬性？字體標(biāo)簽有哪些屬性？列表分為幾類？如何使用列表標(biāo)簽的屬性？如何使用音頻、視屏標(biāo)簽？如何使用marquee標(biāo)簽？任務(wù)描述 歌手欄目是“藍(lán)夢音樂網(wǎng)”六大欄目之一，該網(wǎng)頁要求能展示全部歌手的照片和姓名，也能實(shí)現(xiàn)按中國、歐美和日韓分類展示歌手的照片和姓名。引導(dǎo)訓(xùn)練3-1任務(wù)分析網(wǎng)頁內(nèi)容是如何實(shí)現(xiàn)有序組織的？歌手分類如何實(shí)現(xiàn)？

32、提問任務(wù)目標(biāo)1了解如何使用表格實(shí)現(xiàn)HTML元素的布局掌握了解熟悉掌握了解熟悉5掌握表格標(biāo)簽熟悉如何實(shí)現(xiàn)表格行，列合并4任務(wù)實(shí)施77制作歌手網(wǎng)頁右側(cè)部分制作歌手網(wǎng)頁左側(cè)部分 歌手頁面是以五列的方式顯示歌手的照片和名字。為實(shí)現(xiàn)該網(wǎng)頁的效果，我們可以使用表格有序組織網(wǎng)頁中的元素。任務(wù)實(shí)施78制作歌手網(wǎng)頁右側(cè)部分制作歌手網(wǎng)頁左側(cè)部分表格簡介表格包含表格標(biāo)題（由標(biāo)簽定義）和若干行（由標(biāo)簽定義），每行被分割為若干單元格（由或標(biāo)簽定義,只用于標(biāo)題行中）。文本、圖片、列表、段落、表單、水平線等HTML的元素就存放在單元格中。使用格式：表格標(biāo)題列標(biāo)題 單元格內(nèi)容 任務(wù)實(shí)施制作歌手網(wǎng)頁右側(cè)部分制作歌手網(wǎng)頁左側(cè)部分

33、 表格（table）常用屬性屬性值描述alignLeft（左）Center（中）Right（右）設(shè)置表格相對(duì)周圍元素的對(duì)齊方式。bgcolorrgb(x,x,x)#xxxxxxColorname（顏色名）設(shè)置表格的背景顏色,有三種方式設(shè)置表格背景顏色。borderPixels（像素）設(shè)置表格邊框的寬度。bordercolorrgb(x,x,x)#xxxxxxColorname（顏色名）設(shè)置表格邊框的顏色，有三種方式設(shè)置表格邊框的顏色。cellpaddingpixels（像素）%設(shè)置單元格邊沿與其內(nèi)容之間的空白，既可以設(shè)置為像素，也可以設(shè)置為百分比。cellspacingpixels（像素）%設(shè)

34、置單元格之間的空白，既可以設(shè)置為像素，也可以設(shè)置為百分比。widthPixels（像素）%規(guī)定表格的寬度，既可以設(shè)置為像素，也可以設(shè)置為百分比。任務(wù)實(shí)施制作歌手網(wǎng)頁右側(cè)部分制作歌手網(wǎng)頁左側(cè)部分如何實(shí)現(xiàn)如下表格？編寫代碼并運(yùn)行任務(wù)實(shí)施制作歌手網(wǎng)頁右側(cè)部分制作歌手網(wǎng)頁左側(cè)部分 在歌手網(wǎng)頁中，我們需要在頁面右側(cè)顯示歌手的照片和名字，一行顯示5個(gè)歌手，總共顯示3行，照片和名字在單元格中居中顯示需要設(shè)置該表格的哪些屬性？編寫代碼并運(yùn)行任務(wù)實(shí)施制作歌手網(wǎng)頁右側(cè)部分制作歌手網(wǎng)頁左側(cè)部分 在歌手網(wǎng)頁中，網(wǎng)頁總體上分為左右兩欄，左邊是實(shí)現(xiàn)對(duì)歌手分類，右邊是以五列的方式顯示歌手的照片和名字。把左邊看成表格的1列，

35、則需在原有表格的基礎(chǔ)上添加1列，設(shè)計(jì)成一個(gè)3行6列的表格，其中第一列跨3行。 通過設(shè)置單元格（）標(biāo)簽的rowspan屬性實(shí)現(xiàn)行合并，通過設(shè)置colspan屬性實(shí)現(xiàn)列合并單元格內(nèi)容編寫代碼并運(yùn)行任務(wù)小結(jié)831.在網(wǎng)頁設(shè)計(jì)中，表格最主要的功能是什么？2.如何實(shí)現(xiàn)行合并，如何實(shí)現(xiàn)列合并？獨(dú)立訓(xùn)練84 制作內(nèi)地電影網(wǎng)頁，該網(wǎng)頁需要展示最新熱播和排行榜，設(shè)計(jì)該網(wǎng)頁的具體要求如下：1.使用表格布局該網(wǎng)頁；2.在單元格中插入圖片；任務(wù)描述Thanks!任務(wù)3-2 制作“藍(lán)夢音樂網(wǎng)”注冊頁面內(nèi)容回顧表格由哪幾部分構(gòu)成，對(duì)應(yīng)的標(biāo)簽命名是什么？在網(wǎng)頁設(shè)計(jì)中，表格最主要的功能是什么？如何實(shí)現(xiàn)行合并，如何實(shí)現(xiàn)列合并？

36、任務(wù)描述 用戶注冊是“藍(lán)夢音樂網(wǎng)”一個(gè)最重要的功能，通過用戶注冊，用戶可以成為該網(wǎng)站的會(huì)員，享受會(huì)員服務(wù)。設(shè)計(jì)該網(wǎng)頁的具體要求如下：1.使用表格布局該網(wǎng)頁；2.在網(wǎng)頁的頂部加上該網(wǎng)站的LOGO；3.使用表單實(shí)現(xiàn)用戶輸入。引導(dǎo)訓(xùn)練3-2任務(wù)分析如何用表格布局？網(wǎng)頁中出現(xiàn)了哪些新元素？對(duì)這個(gè)網(wǎng)頁整體感覺怎么樣？提問任務(wù)目標(biāo)1了解網(wǎng)頁的概念掌握了解熟悉掌握了解熟悉5掌握表格標(biāo)簽6掌握常見的表單元素熟悉如何實(shí)現(xiàn)表格行，列合并4 熟悉如何創(chuàng)建表單3 熟悉使用表格實(shí)現(xiàn)HTML元素的布局223任務(wù)實(shí)施911.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）

37、添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素認(rèn)識(shí)border、cellspacing、cellpadding屬性bordercellspacingcellpadding任務(wù)實(shí)施921.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素編寫代碼編寫代碼并運(yùn)行如何實(shí)現(xiàn)該表格？任務(wù)實(shí)施931.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本

38、字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素屬性屬性值說明aligncenter表格在網(wǎng)頁中居中顯示width80%表格在網(wǎng)頁中總是占居80%的寬度border1表格的邊框?qū)挾葹?像素bordercolorgrey表格的邊框顏色為灰色（grey）cellspacing0表格的單元格間距為0像素cellpadding5表格的單元格填充距離為5像素 12行*2列的表格，其中第1行、第2行和第12行應(yīng)進(jìn)行列合并，其中屬性設(shè)置如下。任務(wù)實(shí)施941.設(shè)計(jì)用戶注冊頁面表格2.添加

39、注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素編寫代碼并運(yùn)行任務(wù)實(shí)施951.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素表單不是可視化的HTML元素，運(yùn)行代碼，頁面不會(huì)出現(xiàn)新的效果。 使用格式： 表單元素 屬 性說 明name設(shè)置識(shí)別表單的名稱，為了防止表單在提交到

40、后臺(tái)處理程序時(shí)出現(xiàn)混亂，需要設(shè)置一個(gè)與表單功能相符的名稱。method設(shè)置提交表單時(shí)所用HTTP方法。提交方法有g(shù)et和post兩種方法。（1）get：使用該方法時(shí)，表單數(shù)據(jù)會(huì)附加URL之后，由客戶端直接發(fā)送到服務(wù)器，所以速度比post方法快，但缺點(diǎn)是數(shù)據(jù)長度不能太長。沒有指定method時(shí)，默認(rèn)值是get。（2）post：使用該方法時(shí)，表單數(shù)據(jù)是作為一個(gè)數(shù)據(jù)塊與URL分開發(fā)送的，所以通常沒有數(shù)據(jù)長度上的限制，缺點(diǎn)是速度比get慢。action設(shè)置提交表單的地址。當(dāng)用戶單擊表單上的提交按鈕后，客戶端的數(shù)據(jù)就會(huì)發(fā)送到服務(wù)器端的地址，由服務(wù)器端的處理程序接受數(shù)據(jù)并進(jìn)行處理。任務(wù)實(shí)施961.設(shè)計(jì)用戶

41、注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素編寫代碼并運(yùn)行表單不是可視化的HTML元素，所以運(yùn)行上述代碼時(shí)，不會(huì)出現(xiàn)新的效果。在用戶注冊頁面中，由于需要的傳輸?shù)臄?shù)據(jù)比較多，所以使用post方法，設(shè)置表單的名稱為register。設(shè)置提交表單的地址為“register.jsp”任務(wù)實(shí)施971.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（

42、6）添加下拉列表（7）添加復(fù)選框鈕（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素我們設(shè)置該元素的名稱為username。文本字段用于創(chuàng)建單行文本輸入框，供用戶輸入單行文本信息。 使用格式：input type=”text” name=“名稱” size=”長度” maxlength=”最大長度” value=”默認(rèn)值”任務(wù)實(shí)施981.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框鈕（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素編寫代碼并運(yùn)行任務(wù)實(shí)施

43、99 密碼字段跟文本字段一樣是一個(gè)單行文本框，不同的是在用戶輸入時(shí)不顯示具體內(nèi)容，而是用*代替。當(dāng)把元素的type設(shè)置為password時(shí)，就可以創(chuàng)建密碼字段輸入元素。使用格式：我們設(shè)置這兩個(gè)元素的名稱分別password（密碼）和passwordagain（確認(rèn)密碼）,1.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框鈕（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素任務(wù)實(shí)施1001.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段

44、（3）添加文件域（4）添加單選按鈕（5） 添加密碼字段（6）添加文件域（7）添加單選按鈕（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素編寫代碼并運(yùn)行任務(wù)實(shí)施1011.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加密碼字段（6）添加文件域（7）添加單選按鈕（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素 HTML中有時(shí)候需要上傳頭像，發(fā)送文件，這時(shí)候我們就需要使用文件域。 使用格式： 設(shè)置該元素的名稱為myPhoto任務(wù)實(shí)施102編寫代碼并運(yùn)行1.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）

45、添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加密碼字段（6）添加文件域（7）添加單選按鈕（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素任務(wù)實(shí)施1031.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素屬 性說 明checked設(shè)置此屬性，該單選按鈕被選中name設(shè)置單選按鈕的名稱value設(shè)置單選按鈕的值 單選按鈕用于從一組相互排斥的值中選擇唯一值。組中每個(gè)單選按鈕應(yīng)具有相

46、同的名稱，用戶每一次只能選擇一個(gè)選項(xiàng)。當(dāng)把元素的type設(shè)置為radio時(shí)，就可以創(chuàng)建單選按鈕輸入元素。 使用格式：設(shè)置單選按鈕元素的名稱為gender，其中設(shè)置設(shè)置為男的單選按鈕復(fù)選。任務(wù)實(shí)施1041.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加密碼字段（6）添加文件域（7）添加單選按鈕（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素編寫代碼并運(yùn)行任務(wù)實(shí)施1051.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）

47、添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素 郵件類型元素email是HTML5表單輸入類型，包含了E-mail地址的輸入域。根據(jù)瀏覽器支持，能夠在被提交時(shí)自動(dòng)對(duì)電子郵件地址進(jìn)行驗(yàn)證。當(dāng)把元素的type設(shè)置為email時(shí)，就可以創(chuàng)建郵件地址輸入元素。 使用格式：設(shè)置該元素的名稱為email。任務(wù)實(shí)施106編寫代碼并運(yùn)行1.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素任務(wù)實(shí)

48、施1071.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素下拉列表用于選擇輸入，當(dāng)選中一個(gè)選項(xiàng)時(shí)，該選項(xiàng)將高亮顯示，通過組合select元素和option元素就能夠創(chuàng)建下拉列表。該元素的使用格式如下：提示文本每個(gè)select必須包含至少一個(gè)option元素。屬 性說 明name設(shè)置下拉列表的名稱size在有多行選項(xiàng)供用戶滾動(dòng)查看時(shí)，size確定列表中能同時(shí)查看到的行數(shù)multiple設(shè)置在列表中可以選擇多項(xiàng)。通過點(diǎn)擊

49、鼠標(biāo)左鍵和按shift鍵能連續(xù)選擇多項(xiàng)，點(diǎn)擊鼠標(biāo)左鍵和按ctrl鍵能間隔選擇多項(xiàng)。設(shè)置該元素的名稱為instrument。任務(wù)實(shí)施108編寫代碼并運(yùn)行1.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素任務(wù)實(shí)施1091.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與

50、重置按鈕3.添加表單元素屬 性說 明name設(shè)置復(fù)選框的名稱value設(shè)置復(fù)選框的提交的值checked設(shè)置復(fù)選框被選中復(fù)選框允許用戶在有限數(shù)量的選項(xiàng)中選擇零個(gè)或多個(gè)選項(xiàng)。當(dāng)把元素的type設(shè)置為checkbox時(shí)，就可以創(chuàng)建復(fù)選框輸入元素。使用格式如下：復(fù)選框提示。設(shè)置復(fù)選框的名稱分別為interest1-interest7。任務(wù)實(shí)施110編寫代碼并運(yùn)行1.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素任務(wù)實(shí)施11

51、11.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素屬 性說 明name設(shè)置文本區(qū)域的名稱rows設(shè)置文本區(qū)域的行數(shù)cols設(shè)置文本區(qū)域的列數(shù) 文本域是一個(gè)多行文本輸入元素。使用textarea元素就可以創(chuàng)建文件域。使用格式： 文本域的初始文本。設(shè)置該元素的名稱為remark，rows為7，cols為85。任務(wù)實(shí)施112編寫代碼并運(yùn)行1.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（

52、3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素任務(wù)實(shí)施1131.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素當(dāng)需要把表單數(shù)據(jù)提交給表單處理程序時(shí)，需要使用提交按鈕，當(dāng)把元素的type設(shè)置為submit時(shí)，就可以創(chuàng)建提交按鈕元素。提交按鈕使用格式如下： 當(dāng)需要把表單中所有元素的值重置為初始值時(shí)，需要使用重置按鈕，當(dāng)把元

53、素的type設(shè)置為reset時(shí)，就可以創(chuàng)建重置按鈕輸入元素。該元素的格式如下： 任務(wù)實(shí)施114編寫代碼并運(yùn)行1.設(shè)計(jì)用戶注冊頁面表格2.添加注冊頁面表單（1）添加文本字段（2） 添加密碼字段（3）添加文件域（4）添加單選按鈕（5） 添加郵件地址（6）添加下拉列表（7）添加復(fù)選框（8）添加文本域（9）添加提交按鈕與重置按鈕3.添加表單元素任務(wù)小結(jié)115表格的border屬性用于設(shè)置邊框，cellspacing屬性用于設(shè)置單元格間距，cellpadding屬性用于設(shè)置單元格填充間距。表單包含文本字段、密碼字段、單選按鈕、文件域、下拉列表、復(fù)選按鈕、email、提交按鈕和重置按鈕等常用的表單元素。表

54、格是一個(gè)有效的網(wǎng)頁布局工具，能使網(wǎng)頁的顯示整潔有序，美觀大方；表單能方便實(shí)現(xiàn)用戶輸入且操作快捷。獨(dú)立訓(xùn)練116 用戶注冊是“時(shí)空電影網(wǎng)”一個(gè)最重要的功能，通過用戶注冊，用戶可以成為該網(wǎng)站的會(huì)員，享受會(huì)員服務(wù)。設(shè)計(jì)該網(wǎng)頁的具體要求如下：1.使用表格布局該網(wǎng)頁；2.在網(wǎng)頁的頂部加上該網(wǎng)站的LOGO；3.允許您喜歡多個(gè)地區(qū)的電影任務(wù)描述Thanks!任務(wù)4-1 使用CSS美化“藍(lán)夢音樂網(wǎng)”音樂節(jié)網(wǎng)頁內(nèi)容回顧1.在網(wǎng)頁設(shè)計(jì)中，表格最主要的功能是什么？2.如何實(shí)現(xiàn)行合并，如何實(shí)現(xiàn)列合并？3.如何設(shè)置單元格的間距？如何設(shè)置單元格的填充距離？4.表單的主要功能是什么？常用的表單元素有哪些？任務(wù)描述 我們曾用

55、HTML網(wǎng)頁標(biāo)簽自帶的屬性和格式化標(biāo)簽美化過音樂節(jié)網(wǎng)頁，大部分標(biāo)簽都要設(shè)置一系列的屬性，大部分元素都要運(yùn)用格式化標(biāo)簽，導(dǎo)致代碼編寫產(chǎn)生了大量重復(fù)的工作,工作量大；網(wǎng)頁更新工作很繁瑣，一個(gè)HTML文檔包含許多個(gè)標(biāo)簽，更新標(biāo)簽需要在HTML文檔中去重新設(shè)置一系列標(biāo)簽屬性，很容易遺漏;設(shè)計(jì)出來的網(wǎng)頁畫面也顯得粗糙。使用CSS能解決上述問題，因此我們使用CSS美化音樂節(jié)網(wǎng)頁。引導(dǎo)訓(xùn)練4-1任務(wù)分析對(duì)比曾經(jīng)制作的“音樂節(jié)”網(wǎng)頁，本網(wǎng)頁的效果怎么樣？用格式化標(biāo)簽等美化“音樂節(jié)”網(wǎng)頁效率高嗎？用格式化標(biāo)簽等能做出該網(wǎng)頁的效果嗎？提問任務(wù)目標(biāo)掌握了解熟悉5掌握美化文本、圖片的方式熟悉CSS應(yīng)用的方式4熟悉創(chuàng)建

56、常用的CSS選擇器2熟悉CSS的語法16掌握美化表格的方式任務(wù)實(shí)施123使用表格布局音樂節(jié)網(wǎng)頁 請同學(xué)們分析，該網(wǎng)頁需要使用幾行幾列的表格，又需要設(shè)置哪些屬性？美化音樂節(jié)網(wǎng)頁文本熟悉css的基本語法掌握css的應(yīng)用方式添加網(wǎng)頁文本效果美化網(wǎng)頁的圖片編寫代碼并運(yùn)行任務(wù)實(shí)施124使用表格布局音樂節(jié)網(wǎng)頁美化音樂節(jié)網(wǎng)頁文本熟悉css的基本語法掌握css的應(yīng)用方式添加網(wǎng)頁文本效果美化網(wǎng)頁的圖片 CSS是層疊樣式表的簡稱，它的英文全稱為Cascading Style Sheet。這是一種用來表現(xiàn)HTML、XML等文件樣式的計(jì)算機(jī)語言什么是css?網(wǎng)頁的標(biāo)題、段落、圖片等是內(nèi)容，段落的字體、大小、顏色等就是

57、格式。應(yīng)用樣式表就是控制網(wǎng)頁的格式。任務(wù)實(shí)施125使用表格布局音樂節(jié)網(wǎng)頁美化音樂節(jié)網(wǎng)頁文本熟悉css的基本語法掌握css的應(yīng)用方式添加網(wǎng)頁文本效果美化網(wǎng)頁的圖片 CSS 規(guī)則由兩部分構(gòu)成：選擇器和聲明。 選擇器聲明1；聲明2；聲明n 聲明包括屬性和1至多個(gè)屬性值,屬性值之間用空格分隔，聲明之間用英文分號(hào)分隔.任務(wù)實(shí)施使用表格布局音樂節(jié)網(wǎng)頁美化音樂節(jié)網(wǎng)頁文本熟悉css的基本語法掌握css的應(yīng)用方式添加網(wǎng)頁文本效果美化網(wǎng)頁的圖片 常見CSS選擇器類型名 稱說 明示 例元素選擇器選擇器是某個(gè)HTML元素，如p、img、h1等。pfont-family:宋體；color：redID選擇器ID選擇器允許

58、以一種獨(dú)立于文檔元素的方式來指定樣式, ID 選擇器前面有一個(gè)#號(hào)。#desccolor:red;font-size:14px類選擇器類選擇器允許以一種獨(dú)立于文檔元素的方式來指定樣式, 類選擇器前面有一個(gè).號(hào)。.paracolor:red;font-size:14px群組選擇器多個(gè)選擇器組合在一起，共用相同的屬性，選擇器之間用逗號(hào)分隔。p,h1,h2font-family:宋體；color：red包含選擇器又稱后代選擇器，該選擇器可以選擇作為某元素后代的元素。選擇器之間用空格分隔。h1 strongcolor:red;子元素選擇器子元素選擇器只能選擇某元素的子元素應(yīng)用樣式，元素與子元素之間用“

59、”分隔h1strongcolor:red;任務(wù)實(shí)施使用表格布局音樂節(jié)網(wǎng)頁美化音樂節(jié)網(wǎng)頁文本熟悉css的基本語法掌握css的應(yīng)用方式添加網(wǎng)頁文本效果美化網(wǎng)頁的圖片 行內(nèi)樣式表內(nèi)部樣式表放在代碼行中，對(duì)代碼行中某個(gè)標(biāo)簽元素應(yīng)用樣式，其格式為：放在標(biāo)簽中，對(duì)該網(wǎng)頁相關(guān)元素應(yīng)用樣式，其格式為： /樣式規(guī)則 根據(jù)樣式代碼的位置不同，可以將樣式的分為行內(nèi)樣式表、內(nèi)部樣式表和外部樣式表。任務(wù)實(shí)施使用表格布局音樂節(jié)網(wǎng)頁美化音樂節(jié)網(wǎng)頁文本熟悉css的基本語法掌握css的應(yīng)用方式添加網(wǎng)頁文本效果美化網(wǎng)頁的圖片 外部樣式表 創(chuàng)建外部以.css為后綴的樣式文件，在網(wǎng)頁文件中鏈接或?qū)霕邮奖?，?duì)網(wǎng)頁的相關(guān)文件應(yīng)用樣式。

60、其應(yīng)用格式為：1.鏈接外部樣式表： 2.導(dǎo)入樣式表 import 樣式表文件.css 任務(wù)實(shí)施使用表格布局音樂節(jié)網(wǎng)頁美化音樂節(jié)網(wǎng)頁文本熟悉css的基本語法掌握css的應(yīng)用方式添加網(wǎng)頁文本效果美化網(wǎng)頁的圖片 美化網(wǎng)頁的頭部1頭部元素屬性邊框？文字？logo圖片？ 使用內(nèi)部樣式表并創(chuàng)建一個(gè)ID選擇器，請同學(xué)們觀察，頭部元素都需要我們設(shè)置哪些屬性？編寫代碼并運(yùn)行任務(wù)實(shí)施使用表格布局音樂節(jié)網(wǎng)頁美化音樂節(jié)網(wǎng)頁文本熟悉css的基本語法掌握css的應(yīng)用方式添加網(wǎng)頁文本效果美化網(wǎng)頁的圖片 美化網(wǎng)頁中的標(biāo)題、段落2元素屬性H1？H2？H3？ 針對(duì)不同種類的標(biāo)題標(biāo)簽，我們應(yīng)該選用哪種選擇器？元素又應(yīng)該設(shè)置哪些屬性