網(wǎng)頁設(shè)計(jì)基礎(chǔ) 課件全套 羅印 項(xiàng)目1-5 HTML5基礎(chǔ)- 應(yīng)用和美化表單_第1頁
網(wǎng)頁設(shè)計(jì)基礎(chǔ) 課件全套 羅印 項(xiàng)目1-5 HTML5基礎(chǔ)- 應(yīng)用和美化表單_第2頁
網(wǎng)頁設(shè)計(jì)基礎(chǔ) 課件全套 羅印 項(xiàng)目1-5 HTML5基礎(chǔ)- 應(yīng)用和美化表單_第3頁
網(wǎng)頁設(shè)計(jì)基礎(chǔ) 課件全套 羅印 項(xiàng)目1-5 HTML5基礎(chǔ)- 應(yīng)用和美化表單_第4頁
網(wǎng)頁設(shè)計(jì)基礎(chǔ) 課件全套 羅印 項(xiàng)目1-5 HTML5基礎(chǔ)- 應(yīng)用和美化表單_第5頁
已閱讀5頁，還剩168頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

項(xiàng)目一任課老師：XXXHTML5基礎(chǔ)PRESENTATION//SLIDE1創(chuàng)建第一HTML5頁面3制作“電影影評網(wǎng)”頁面2制作“HTML5百科”頁面一、任務(wù)引入小H在網(wǎng)上查看信息，想要搜索目前社會上比較緊缺的人才類型。當(dāng)他看到前端工程師成為互聯(lián)網(wǎng)士時代的職場新貴，有著很好的職業(yè)發(fā)展前景和薪酬待遇時，就萌生了想要從事這方面工作的念頭?？墒牵瑢τ凇扒岸碎_發(fā)”而言，小日完全是個新手，對于網(wǎng)站開發(fā)和網(wǎng)頁設(shè)計(jì)，他一竅不通。在非常仔細(xì)地查看了具體的崗位需求后，小日決定要好好學(xué)習(xí)“前端開發(fā)”的相關(guān)知識，由此進(jìn)入了漫長但又有趣的學(xué)習(xí)過程。1.HTML5概述HTML(HyperTextMarkupLanguage)是用來描述網(wǎng)頁的超文本標(biāo)記語言。HTML并不是編程語言。標(biāo)記語言是一套標(biāo)記標(biāo)簽MarkupTag)，用于創(chuàng)建網(wǎng)頁。HTML文檔包含了HTML標(biāo)簽及文本內(nèi)容，HTML文檔也叫作Web頁面。HTML5是HTML的第5代版本。二、相關(guān)知識二、相關(guān)知識1.HTML5的優(yōu)勢新增了多個新特性解決了跨瀏覽器問題12能夠化繁為簡基于用戶優(yōu)先原則34HTML5瀏覽器的支持情況現(xiàn)今，瀏覽器的許多新功能都是從HTML5標(biāo)準(zhǔn)中發(fā)展而來的。目前常用的瀏覽器有IE瀏覽器、火狐(Firefox)瀏覽器、谷歌(Chrome)瀏覽器、獵豹瀏覽器、Safàri瀏覽器、Opera瀏覽器等。通過對這些主流Web瀏覽器的發(fā)展策略進(jìn)行調(diào)查，發(fā)現(xiàn)它們都在支持HTML5上采取了措施。二、相關(guān)知識2.HTML5基礎(chǔ)1）HTML5文檔的基本格式學(xué)習(xí)任何一門語言，首先要掌握它的基本格式，就像寫信需要符合書信的格式要求一樣，HTML5標(biāo)記語言同樣需要遵從一定的規(guī)范。HTML5文檔的基本格式主要包括<!doctype>文檔類型聲明、<html>根標(biāo)記、<head>頭部標(biāo)記、<body>主體標(biāo)記。<!doctype>標(biāo)記<html></html>標(biāo)記<body></body>標(biāo)記二、相關(guān)知識2）HTML5語法123標(biāo)記不區(qū)分大小寫允許部分屬性的屬性值省略允許屬性值不使用引號二、相關(guān)知識雙標(biāo)記單標(biāo)記3）HTML標(biāo)記500W500WPRESENTATION二、相關(guān)知識4）標(biāo)記的屬性使用HTML制作網(wǎng)頁時，如果要讓HTML標(biāo)記提供更多的信息，例如希望標(biāo)題文本的字體為“微軟雅黑”且居中顯示，此時僅僅依靠HTML標(biāo)記的默認(rèn)顯示樣式已經(jīng)不能滿足需求了，需要對HTML標(biāo)記的屬性加以設(shè)置。二、相關(guān)知識PRESENTATION5）HTML5文檔頭部相關(guān)標(biāo)記（1）<title></title>標(biāo)記(2)<meta>標(biāo)記(4)<style></style>標(biāo)記(3)<link>標(biāo)記二、相關(guān)知識PRESENTATION//SLIDE1創(chuàng)建第一HTML5頁面3制作“電影影評網(wǎng)”頁面2制作“HTML5百科”頁面一、任務(wù)引入通過學(xué)習(xí)，小日已經(jīng)了解了如何創(chuàng)建一個HTML文檔，并掌握了文檔中相關(guān)標(biāo)記和屬性等內(nèi)容?，F(xiàn)在，他想進(jìn)一步嘗試使用HTML5制作一個簡單的頁面。在實(shí)現(xiàn)這個頁面之前，他還需要進(jìn)行相應(yīng)的知識準(zhǔn)備，包括常用圖像格式、圖像標(biāo)記<img/>、絕對路徑和相對路徑、超鏈接等方面的基礎(chǔ)知識與技能的學(xué)習(xí)。文本控制標(biāo)記123標(biāo)題和段落標(biāo)記特殊字符標(biāo)記文本格式化標(biāo)記二、相關(guān)知識1.文本控制標(biāo)記主要有以下三種：01.標(biāo)題標(biāo)記02.段落標(biāo)記03.水平線標(biāo)記04.換行標(biāo)記1標(biāo)題標(biāo)記4換行標(biāo)記3水平線標(biāo)記2段落標(biāo)記二、相關(guān)知識我們經(jīng)常會在頁面中用到標(biāo)題標(biāo)記和段落標(biāo)記。GIF格式PNG格式JPG格式GIF格式最突出的地方就是它支持動畫，同時它也是一種無損的圖像格式。PNG格式包括PNG-8和真色彩PNG(PNG-24和PNG-32)。JPG格式所能顯示的顏色比GI格式和PNG格式要多得多，可以用來保存超過256種顏色的圖像。二、相關(guān)知識2.圖像標(biāo)記1）常用圖像格式titleBorderalignvspace和hspacewidth和height圖像的替換文本屬性alt二、相關(guān)知識2）圖像標(biāo)記<img/>231456相對路徑絕對路徑500W500W從文件自身的位置出發(fā)，依次說明到達(dá)目標(biāo)文件的路徑二、相關(guān)知識3）相對路徑和絕對路徑先指明最高級的層次，然后依次向下說明3.超鏈接標(biāo)記超鏈接的常用屬性包含href和target：href：用于指定鏈接目標(biāo)的URL地址。當(dāng)為<a>標(biāo)記應(yīng)用href屬性時，它就具有了超鏈接的功能。target：用于指定鏈接頁面的打開方式。target有self和blank兩種取值。其中，self為默認(rèn)值，意為在原窗口中打開；blank為在新窗日中打開。hreftarget二、相關(guān)知識PRESENTATION//SLIDE1創(chuàng)建第一HTML5頁面3制作“電影影評網(wǎng)”頁面2制作“HTML5百科”頁面一、任務(wù)引入通過學(xué)習(xí)，小H已經(jīng)掌握了HTML5基本文檔結(jié)構(gòu)，能夠利用標(biāo)題、段落、圖片、超鏈接標(biāo)簽等制作簡單的網(wǎng)頁了。小日很滿意自己學(xué)到的知識和技能,但是他并不滿足于此，他還想做出更美觀、更實(shí)用的網(wǎng)頁，如能夠進(jìn)行簡單的用戶交互。本任務(wù)重點(diǎn)介紹列表元素、結(jié)構(gòu)元素、分組元素、頁面交互元素、文本層次語義元素以及全局屬性。ul元素(無序列表)是網(wǎng)頁中最常用的列表，其各個列表項(xiàng)之間沒有順序級別之分，通常是并列的dl元素(定義列表)用于對術(shù)語或名詞進(jìn)行解釋和描述ol元素(有序列表)有排列順序的列表，其各個列表項(xiàng)按照一定的順序排列列表的嵌套應(yīng)用列表項(xiàng)中也包含若干子列表項(xiàng)，要在列表項(xiàng)中定義子列表項(xiàng)就需要將列表進(jìn)行嵌套二、相關(guān)知識1.列表元素1234footer元素article元素section元素aside元素nav元素header元素二、相關(guān)知識2314562.結(jié)構(gòu)元素fgure和fgcaption元素hgroup元素500W500Wfgure元素用于定義獨(dú)立的流內(nèi)容，一般指一個單獨(dú)的單元二、相關(guān)知識用于將多個標(biāo)題組成一個標(biāo)題組，通常它與h1~h6元素組合使用3.分組元素頁面交互標(biāo)記123details和summary元素meter元素progress元素二、相關(guān)知識4.頁面交互元素主要有以下三種：文本層次語義元素123time元素cite元素mark元素

二、相關(guān)知識5.文本層次語義元素主要有以下三種：(4)contenteditable屬性（2）hidden屬性（3）spellcheck屬性（1）draggable屬性二、相關(guān)知識6.全局屬性感謝觀看項(xiàng)目二任課老師：XXX網(wǎng)頁樣式表（CSS)4制作“鮮花導(dǎo)購”頁面6制作“菜品欣賞”圖文頁面5制作“荷塘月色”頁面7制作“音樂排行榜”圖文頁面一、任務(wù)引入通過學(xué)習(xí)，小日已經(jīng)掌握了HTML5新增的結(jié)構(gòu)標(biāo)簽，會使用分組標(biāo)簽以及交互式標(biāo)簽做出具有簡單交互效果的頁面，同時也可以通過標(biāo)簽的全局屬性進(jìn)行相關(guān)的設(shè)置，達(dá)到一定的效果?？墒?，他總覺得自己的頁面不如別人的“高、大、上”，究其原因才知道,是網(wǎng)頁美化得不夠，需要引入網(wǎng)頁樣式表CSS。二、相關(guān)知識1.CSS概述CSS的發(fā)展歷程CSS1包含了font的相關(guān)屬性、顏色與背景的相關(guān)屬性、文字的相關(guān)屬性、box的相關(guān)性等CSS2.1它在CSS2的基礎(chǔ)上略微做了改動，刪除了許多不被瀏覽器支持的屬性CSS2開始使用樣式表結(jié)構(gòu)，是目前正在使用的版本CSS3規(guī)范權(quán)威的CSS3標(biāo)準(zhǔn)還沒確定，但各主流瀏覽器已經(jīng)開始支持其中的絕大部分特性1234選擇器嚴(yán)格區(qū)分大小寫，而屬性和值不區(qū)分大小寫多個屬性之間必=須用英文狀態(tài)下的分號隔開，最后一個屬性后的分號可以省略二、相關(guān)知識2.CSS核心基礎(chǔ)1）CSS樣式規(guī)則12如果屬性的值由多個單詞組成且中間包含空格，則必須為這個屬性值加上英文狀態(tài)下的引號為提高代碼的可讀性，編寫會加上CSS注釋空格是不被解析的，花括號以及分號前后的空格可有可無345行內(nèi)式內(nèi)嵌式鏈入式行內(nèi)式也稱為內(nèi)聯(lián)樣式，是通過標(biāo)記的soyle屬性來設(shè)置元素的樣式內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的<head>頭部標(biāo)記中，并且用<style>標(biāo)記定義鏈入式是將所有的樣式放在一個或多個以css為擴(kuò)展名的外部樣式表文件中，通過<link今標(biāo)記將外部樣式表文件鏈接到HTML文檔中二、相關(guān)知識2.CSS核心基礎(chǔ)2）引入CSS樣式表1.標(biāo)記選擇器2.類選擇器3.ID選擇器5.標(biāo)簽指定式選擇器4.通配符選擇器7.并集選擇器6.后代選擇器二、相關(guān)知識2.CSS核心基礎(chǔ)3）CSS基礎(chǔ)選擇器4制作“鮮花導(dǎo)購”頁面6制作“菜品欣賞”圖文頁面5制作“荷塘月色”頁面7制作“音樂排行榜”圖文頁面一、任務(wù)引入通過學(xué)習(xí)，小H了解了CSS的發(fā)展歷程以及CSS的核心基礎(chǔ)(包括CSS語法規(guī)范、CSS基本選擇器)，能夠?qū)撁孀龊唵蔚拿阑?。但是，這對于追求專業(yè)級頁面效果的小H來說，還遠(yuǎn)遠(yuǎn)不夠，需要進(jìn)一步學(xué)習(xí)CSS美化頁面的其他相關(guān)知識。網(wǎng)頁的美化包括很多方面，這里對CSS美化文本以及CSS高級特性進(jìn)行介紹。1.font-size2.font-family3.font-weight5.font4.font-style7.word-wrap屬性6.@font-face屬性二、相關(guān)知識1.文本樣式屬性礎(chǔ)1）字體樣式屬性color:文本顏色letter-spacing:字間距二、相關(guān)知識2）文本外觀屬性12word-spacing:單詞間距l(xiāng)ine-height:行間距text-transform:文本轉(zhuǎn)換345text-overHow:標(biāo)示對象內(nèi)溢出文本text-indent:首行縮進(jìn)text-shadow:陰影效果white-space:空白符處理text-align:水平對齊方式text-decoration:文本裝飾二、相關(guān)知識2）文本外觀屬性78691011疊層性繼承性500W500W二、相關(guān)知識2.CSS高級特性1）CSS層疊性與繼承性是指多種CSS樣式的疊加是指書寫CSS樣式表時，子標(biāo)記會繼承父標(biāo)記的某些樣式，如文本顏色和字號01.繼承樣式的權(quán)重為002.行內(nèi)樣式優(yōu)先03.遵循就近原則04.賦予最大的優(yōu)先級1繼承樣式的權(quán)重為04定義了一個!important命令，該命令被賦予最大的優(yōu)先級3權(quán)重相同時，CSS遵循就近原則2行內(nèi)樣式優(yōu)先二、相關(guān)知識2）優(yōu)先級4制作“鮮花導(dǎo)購”頁面6制作“菜品欣賞”圖文頁面5制作“荷塘月色”頁面7制作“音樂排行榜”圖文頁面一、任務(wù)引入通過學(xué)習(xí)，小H掌握了在HTML5文檔中添加CSS3樣式的方式，包括行內(nèi)樣式、內(nèi)嵌樣式、外鏈樣式等，能夠使用選擇器挑選出想要設(shè)置樣式的頁面內(nèi)容。在此基礎(chǔ)上，小H還掌握了簡單的文本樣式，能夠?qū)σ粋€頁面做簡單的美化效果。但是，要使頁面效果更美觀，僅掌握了上述知識和技能遠(yuǎn)遠(yuǎn)不夠，還需要學(xué)習(xí)圖像、視頻、背景的美化方法。1.添加圖像與圖標(biāo)1)添加圖像添加圖像在HTMLS中，使用<img>標(biāo)簽標(biāo)記圖像，具體語法格式如下:<imgsre-"ur]"alt="代替文本"/2）添加圖標(biāo)此處的圖標(biāo)是指網(wǎng)站的Logo，也稱為網(wǎng)站圖標(biāo)。圖標(biāo)大小一般為16x16px，透明背景添加圖像添加圖標(biāo)二、相關(guān)知識2.添加流在HTML5中，新增加了流標(biāo)簽<fgure>，它表示頁面中一塊獨(dú)立的內(nèi)容，如圖像、圖表、代碼片段等。流標(biāo)簽應(yīng)與網(wǎng)頁主體內(nèi)容相關(guān)，但又獨(dú)立于上下文，在頁面中顯示為具有左右縮進(jìn)的內(nèi)容塊。<fgure>標(biāo)簽中有一個表示流標(biāo)題的<fgcaption>標(biāo)簽，它位于<hgure>標(biāo)簽的首行或尾行。一個<fgure>標(biāo)簽中只允許有一個<fgcaption>標(biāo)簽，也可以將其省略。二、相關(guān)知識3.嵌入多媒體文件1)嵌入音頻在HTML5中，使用<audio>標(biāo)簽嵌入音頻文件:<audiosrc="音頻地址"controls="controls">說明文字</audio>2)嵌入視頻在HTML5中，使用<video>標(biāo)簽嵌入視頻文件：<videosrc="視頻地址"controls="controls">說明文字</video>嵌入音頻嵌入視頻二、相關(guān)知識4.使用CSS3美化圖像與背景1)圖像大小使用<img>標(biāo)簽的width和hcight屬性可以設(shè)置圖像大小，但一般不直接使用，而是建議使用CSS3中的width和height屬性,因?yàn)檫@兩個屬性可以更加靈活地設(shè)置圖像大小。為圖像設(shè)置寬度或高度時，瀏覽器會自動調(diào)整橫縱比，以保證圖像寬高比不變，避免圖像變形。如果要同時為圖像設(shè)置寬度和高度，就一定要注意寬高比。二、相關(guān)知識圖像邊框123邊框樣式：使用border-style屬性設(shè)置邊框?qū)挾龋菏褂胋order-width屬性設(shè)置邊框顏色：使用border-color屬性設(shè)置二、相關(guān)知識2)圖像邊框網(wǎng)頁中的圖像元素默認(rèn)是沒有邊框的，使用CSS3的border屬性可以設(shè)置不同樣式不同顏色和不同寬度的邊框。3)透明度在CSS3中，使用opacity屬性設(shè)置圖像透明度，具體語法格式如下:opacity:0-1;opacity的取值范圍為0~1，數(shù)值越高透明度越低，0表示完全透明，1表示完全不透明。二、相關(guān)知識1個屬性值統(tǒng)一設(shè)置4個圓角3個屬性值第1個屬性值設(shè)置左上角，第2個屬性值設(shè)置右上角與左下角，第3個屬性值設(shè)置右下角2個屬性值第1個屬性值設(shè)置左上角與右下角,第2個屬性值設(shè)置右上角與左下角4個屬性值按照左上、右上、右下、左下的順序設(shè)置這4個方向的圓角二、相關(guān)知識4)園角圖像在CSS3中，使用border-radius屬性設(shè)置圓角樣式，具體語法格式如下:border-radius:nonellength12345)圖像陰影在CSS3中，使用box-shadow屬性設(shè)置陰影，具體語法格式如下:box-shadow:h-shadowv-shadowblurspreadcolorinset二、相關(guān)知識6）美化視頻元素可為視頻元素設(shè)置諸如寬、高、邊框、圓角邊框、浮動等效果，以實(shí)現(xiàn)美化4制作“鮮花導(dǎo)購”頁面6制作“菜品欣賞”圖文頁面5制作“荷塘月色”頁面7制作“音樂排行榜”圖文頁面一、任務(wù)引入通過學(xué)習(xí)，小H已經(jīng)掌握了圖片、視頻的美化方法，基本上能夠做出較好的“圖文混排”效果。但是，學(xué)無止境，小H對頁面美化的追求并未止步，他還想獲得更多、更美妙的頁面效果，如背景樣式的美化方法。1.背景樣式1)設(shè)置背景圖像（1）設(shè)置背景圖像。在CSS3中，使用background-image屬性設(shè)置背景圖像，具體語法格式如下:background-irnage:nonelurl;其中，none是默認(rèn)值，表示無背景圖像:url表示背景圖像的地址。二、相關(guān)知識space:以相同間距平鋪整個容器或某個方向repeat:在水平與豎直方向上平鋪round:自動縮放以適應(yīng)容器no-repeat:不平鋪，只顯示一次repeat-y:在豎直方向上平鋪repeat-x:在水平方向上平鋪二、相關(guān)知識231456（2）設(shè)置背景圖像的顯示方式(3)設(shè)置背景圖像的顯示位置顯示在元素左上角?？捎胋ackground-position屬性重設(shè)背景圖像的顯示位置，如下:background-position:length-xlength-y;二、相關(guān)知識(4)固定背景圖像使用background-attachment屬性設(shè)置背景圖像的固定方式，具體語法格式如下:background-attachment;scrolll?xed|lécal;(5)設(shè)置背景圖像大小background-size用于指定背景圖像的大小。背景圖像大小由圖像的實(shí)際大小決定。CSS3中可以指定背景圖像，即在不同的環(huán)境中指定背景圖像的大小二、相關(guān)知識(6)設(shè)置背景圖像的位置區(qū)域background-origin屬性用千指定背景圖像的位置區(qū)域在content-box、padding-box和border-box區(qū)域內(nèi)可以放置背景圖像(7)設(shè)置多個背景圖像CSS3允許用戶在元素上添加多個背景圖像。如:bodybackground-image:url(imgfwr.gif),url(imgtree.gif)二、相關(guān)知識(8)設(shè)置背景圖像的裁剪區(qū)域如:#examplel{border:10pxdottedblack;padding:35px;background:yellow;background-clip:content-box;(9)CSS3的多重背景多重背景是指CSS2中background的屬性外加origin、clip和size組成的新background的多次疊加，縮寫時為用逗號隔開的每組值:用分解寫法時，如果有多個背景圖像，而其他屬性只有一個，表明所有背景圖像應(yīng)用該屬性值。二、相關(guān)知識2)設(shè)置背景顏色在CSS3中，使用background-color屬性設(shè)置背景顏色，具體語法格式如下:background-color:color:其中，屬性值color與文本顏色的設(shè)置相同。二、相關(guān)知識2.圖文混排圖文混排是網(wǎng)頁中較為常見的表現(xiàn)形式，也更有利于提升用戶的閱讀體驗(yàn)。默認(rèn)情況下，圖像作為行內(nèi)元素顯示在頁面中，也就是說，它可以與文本一起放置在段落標(biāo)簽中以達(dá)到圖文混排的效果。使用CSS樣式中的浮動屬性#oat,可以使元素脫離原本的文檔流,移動到容器的邊界,以達(dá)到圖文混排的效果。foat屬性值可以設(shè)置為left、right或none，表示元素向左、向右浮動或不浮動。二、相關(guān)知識線性漸變(LinearGradients)徑向漸變(RadialGradients)500W500W向下/向上/向左/向右/對角方向定義二、相關(guān)知識由它們的中心定義3.漸變樣式PRESENTATION1)線性漸變（1）tobottom:默認(rèn)值，表示漸變從上到下，等同于180deg(2)totop:表示漸變從下到上，等同于0deg(4)toright;表示漸變從左到右，等同于90deg(3)toleh:表示漸變從右到左，等同于270deg二、相關(guān)知識01.farthest-commer02.farthest-side03.closest-side04.closest-cormer1farthest-commer:設(shè)置漸變的半徑長度為從園心到離圓心最遠(yuǎn)的角4closest-cormer:設(shè)置漸變的半徑長度為從圓心到離圓心最近的角3closest-side:設(shè)置漸變的半徑長度為從圓心到離圓心最近的邊2farthest-side;設(shè)置漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的邊二、相關(guān)知識2)徑向漸變感謝觀看項(xiàng)目三任課老師：XXX使用CSS設(shè)置鏈接、列表與菜單8用CSS美化下單菜單美化“網(wǎng)上書店”頁面的導(dǎo)航條9制作八大行星科普網(wǎng)頁美化“網(wǎng)上書店”頁面中的超鏈接為“網(wǎng)上書店”頁面添加超鏈接101112一、任務(wù)引入小H總是被網(wǎng)站中某個特定的模塊吸引，如導(dǎo)航欄。導(dǎo)航欄也稱為菜單，它在網(wǎng)頁中占有很重要的地位，利用它可以打開網(wǎng)站的各個功能模塊。如果沒有導(dǎo)航欄，我們無法將網(wǎng)站的功能完整地體現(xiàn)在頁面上。好的導(dǎo)航欄可以讓網(wǎng)站的易用性得到更好的體現(xiàn)。這里學(xué)習(xí)如何制作及使用CSS美化導(dǎo)航欄，從而使網(wǎng)頁頁面更加個性化。導(dǎo)航欄的主要功能是通過超鏈接實(shí)現(xiàn)從本頁面跳轉(zhuǎn)到用戶想要查看的其他頁面，其中鼠標(biāo)在導(dǎo)航欄上的某個菜單項(xiàng)移動時一般會有變色的效果。一個好的導(dǎo)航欄應(yīng)讓用戶能快捷、準(zhǔn)確地訪問網(wǎng)站要展現(xiàn)的主要內(nèi)容，同時導(dǎo)航欄的風(fēng)格也要與網(wǎng)站本身的風(fēng)格相匹配。導(dǎo)航欄包括縱向?qū)Ш綑?、橫向?qū)Ш綑凇吕藛蔚膶?dǎo)航欄等。在制作導(dǎo)航欄的過程中，一般會使用CSS樣式表對導(dǎo)航欄進(jìn)行設(shè)置和美化。二、相關(guān)知識我的首頁心情日記學(xué)習(xí)心得生活瑣碎工作筆記1.制作簡單的縱向?qū)Ш綑诙?、相關(guān)知識1)效果圖展示該縱向?qū)Ш綑诳煽闯捎梢粋€大盒子和內(nèi)嵌的6個小盒子構(gòu)成。大盒子可看成是整個導(dǎo)航欄整體(菜單)，6個小盒子可看成是6個獨(dú)立的導(dǎo)航條目(即菜單項(xiàng))，所以整個結(jié)構(gòu)可由無序列表構(gòu)成。聯(lián)系我們2)搭建頁面結(jié)構(gòu)頁面結(jié)構(gòu)的搭建主要通過無序列表嵌套超鏈接來實(shí)現(xiàn)3)設(shè)置CSS樣式利用內(nèi)嵌樣式美化縱向?qū)Ш綑诙?、相關(guān)知識使用CSS的小技巧123合理利用display:block屬性利用border設(shè)置特殊邊框利用margin-bottom設(shè)置間隔效果二、相關(guān)知識4)使用CSS的小技巧70%效果圖展示40%搭建頁面結(jié)構(gòu)70%設(shè)置樣式二、相關(guān)知識1)效果圖展示2.制作簡單的橫向?qū)Ш綑?)搭建頁面結(jié)構(gòu)主要通過div、無序列表和超鏈接來搭建頁面結(jié)構(gòu)。整個橫向?qū)Ш綑谟靡粋€名為“topmenu”的盒子來實(shí)現(xiàn)，內(nèi)部嵌套無序列表，列表項(xiàng)中再嵌套超鏈接3)設(shè)置CSS樣式使用內(nèi)嵌樣式使用浮動屬性使用display屬性500W500W通過foat屬性定義浮動。所謂元素的浮動，是指設(shè)置了浮動屬性的元素會脫離標(biāo)準(zhǔn)文檔流的控制，移動到其父元素中指定位置的過程。這樣可以更改元素默認(rèn)從上到不一一羅列的形式。二、相關(guān)知識4)使用CSS的小技巧由多個塊元素和行內(nèi)元素構(gòu)成的盒子排列而成。如希望行內(nèi)元素具有塊元素的某些特性，或需要塊元素具有行內(nèi)元素的某些特性，則可以使用display屬性對元素的類型進(jìn)行轉(zhuǎn)換。70%效果圖展示40%搭建頁面結(jié)構(gòu)70%設(shè)置樣式二、相關(guān)知識1)效果圖展示2.制作帶圖片效果的橫向?qū)Ш綑?)搭建頁面結(jié)構(gòu)通過div和超鏈接搭建頁面結(jié)構(gòu)3)設(shè)置CSS樣式利用內(nèi)嵌樣式美化導(dǎo)航欄01.設(shè)置塊元素02.隱藏元素03.溢出不顯示04.背景圖設(shè)置1要將行內(nèi)元素設(shè)置為塊元素，除了使用display:block，還可以使用浮動方式4背景圖像通過background:url(路徑)no-repeat來設(shè)置3當(dāng)元素溢出時，將溢出部分不顯示，通過overdoww:hidden來設(shè)置2將元素隱藏，對該元素用display:hidden;若要隱藏的元素再顯示，則用display:block二、相關(guān)知識4)使用CSS的小技巧8用CSS美化下單菜單美化“網(wǎng)上書店”頁面的導(dǎo)航條9制作八大行星科普網(wǎng)頁美化“網(wǎng)上書店”頁面中的超鏈接為“網(wǎng)上書店”頁面添加超鏈接101112一、任務(wù)引入圖像(圖片)是網(wǎng)頁中不可缺少的內(nèi)容，它能使頁面更加豐富多彩，也能讓用戶更直觀地感受網(wǎng)頁傳達(dá)的信息。圖像的很多屬性可以直接在HTML中進(jìn)行調(diào)整，并通過CSS統(tǒng)一管理。這樣，不但可以更加精確地調(diào)整圖像的各種屬性，還可以實(shí)現(xiàn)很多特殊的效果。本任務(wù)將詳細(xì)介紹用CSS設(shè)置圖像基本屬性、風(fēng)格樣式的方法,包括設(shè)置圖像的邊框?qū)R方式和圖文混排等，并通過實(shí)例介紹文字和圖像的各種運(yùn)用，為進(jìn)一步深入探討相關(guān)知識打下基礎(chǔ)。border-width(粗細(xì))border-color(顏色)border-style(線型)可用CSS中的各種長度單位，最常用的是px可以使用各種合法的顏色可以在一些預(yù)先定義好的線型中選擇二、相關(guān)知識1.設(shè)置圖像邊框1）基本屬性二、相關(guān)知識border-bottomborder-top上下border-rightborder-left左右2)為不同的邊框分別設(shè)置樣式上面設(shè)置方法會對一個圖像的4條邊框同時產(chǎn)生作用。如果分別為4條邊框設(shè)置不同的樣式，在CSS中也是可以實(shí)現(xiàn)的。只需要分別設(shè)置border-left、border-right、border-top、border-bottom屬性即可，它們依次對應(yīng)左、右、上、下4條邊框。2.圖像縮放使用CSS控制圖像大小的方法與使用HTML一樣，也是通過width和height兩個屬性來實(shí)現(xiàn)的。不同的是，CSS中可以使用更多的屬性值，如相對值和絕對值等。二、相關(guān)知識文字環(huán)繞設(shè)置圖像與文字的間距500W500W二、相關(guān)知識3.圖文混排在CSS中，主要是通過給圖像設(shè)置oat屬性來實(shí)現(xiàn)文字環(huán)繞的margin和padding是CSS網(wǎng)頁布局的核心屬性4.設(shè)置圖像與文字的對齊方式1)橫向?qū)R圖像橫向?qū)R的方法與文字水平對齊的方法基本相同,分為左、中、右3種。2)縱向?qū)R在CSS中，同樣是通過vertical-align屬性(一個比較復(fù)雜的屬性)來實(shí)現(xiàn)搭配的。橫向?qū)R縱向?qū)R二、相關(guān)知識8用CSS美化下單菜單美化“網(wǎng)上書店”頁面的導(dǎo)航條9制作八大行星科普網(wǎng)頁美化“網(wǎng)上書店”頁面中的超鏈接為“網(wǎng)上書店”頁面添加超鏈接101112一、任務(wù)引入列表在網(wǎng)頁中應(yīng)用廣泛，除文字列表、圖文列表以外，導(dǎo)航條、菜單欄等常見模塊一般也是用列表實(shí)現(xiàn)的。傳統(tǒng)的HTML語言提供了項(xiàng)目列表的基本功能，所制作的列表比較簡單，要制作水平導(dǎo)航條、排行榜等比較美觀、實(shí)用的效果就要用到CSS。在引入CSS后，項(xiàng)目列表被賦予許多新的屬性，甚至超越了它最初設(shè)計(jì)時的功能。本任務(wù)首先介紹使用CSS設(shè)置列表樣式的方法，然后通過美化“網(wǎng)上書店”頁面中的導(dǎo)航條(導(dǎo)航菜單)，學(xué)習(xí)使用CSS美化列表的方法。設(shè)置圖文信息列表設(shè)置列表類型設(shè)置列表項(xiàng)位置設(shè)置列表圖像列表布局表格布局二、相關(guān)知識2314561.設(shè)置列表1)表格布局2)列表布局500W500W在表格布局時代，類似新聞列表這樣的效果一般采用表格來實(shí)現(xiàn)，即采用多行多列的表格進(jìn)行布局二、相關(guān)知識使用列表布局來實(shí)現(xiàn)新聞列表，不僅結(jié)構(gòu)清晰，而且代碼數(shù)量明顯減少3)設(shè)置列表類型4)設(shè)置列表項(xiàng)圖像500W500W在CSS樣式中，列表項(xiàng)的標(biāo)志類型是通過屬性list-style-type來修改的，無論是<u>標(biāo)記還是<ol>標(biāo)記，都可以使用相同的屬性值，而且效果是完全相同的。二、相關(guān)知識當(dāng)list-stylc-imagc屬性的屬性值為none或者設(shè)置的圖像路徑出錯時，list-style-type屬性會替代list-style-image屬性對列表產(chǎn)生作用。5)設(shè)置列表項(xiàng)位置6)設(shè)置圖文信息列表500W500Wlist-style-position屬性用于設(shè)置在何處放置列表項(xiàng)標(biāo)記，其屬性值只有兩個關(guān)鍵詞:outside(外部)和inside(內(nèi)部)。二、相關(guān)知識網(wǎng)頁中經(jīng)常可以看到圖文信息列表，之所以稱為圖文信息列表，是因?yàn)榱斜淼膬?nèi)容以圖像和簡短語言的形式呈現(xiàn)在頁面中。制作普通的超鏈接導(dǎo)航菜單123建立網(wǎng)頁結(jié)構(gòu)文件設(shè)置菜單項(xiàng)的內(nèi)部樣式設(shè)置容器的內(nèi)部樣式二、相關(guān)知識2.設(shè)置導(dǎo)航菜單1)制作普通的超鏈接導(dǎo)航菜單制作普通的超鏈接導(dǎo)航菜單123建立網(wǎng)頁結(jié)構(gòu)文件設(shè)置菜單項(xiàng)的內(nèi)部樣式設(shè)置容器的內(nèi)部樣式二、相關(guān)知識2.設(shè)置導(dǎo)航菜單2)使用列表制作垂直導(dǎo)航菜單3)使用列表制作水平導(dǎo)航條使用display屬性可以改變元素的顯示方式,具體語法格式如下:display:nonelinlinelblock|inline-block|list-item;其中，none表示不顯示該元素:inline是默認(rèn)值，表示將該元素轉(zhuǎn)換為行內(nèi)元素;block表示將該元素轉(zhuǎn)換為塊元素;inline-block表示將該元素轉(zhuǎn)換為行內(nèi)塊元素:1ist-item表示將該元素轉(zhuǎn)換為列表塊元素。二、相關(guān)知識第一步第二步創(chuàng)建“music.html”文檔,在<body>標(biāo)簽中輸入代碼,在頁面中添加一個無序列表。在頭部標(biāo)簽中添加<style>標(biāo)簽，并輸入代碼，設(shè)置列表樣式。二、相關(guān)知識3.使用列表制作“經(jīng)典老歌”排行榜8用CSS美化下單菜單美化“網(wǎng)上書店”頁面的導(dǎo)航條9制作八大行星科普網(wǎng)頁美化“網(wǎng)上書店”頁面中的超鏈接為“網(wǎng)上書店”頁面添加超鏈接101112一、任務(wù)引入用戶能夠使用電腦或手機(jī)穿梭在各個網(wǎng)頁之間，都是通過超鏈接來實(shí)現(xiàn)的。超鏈接相當(dāng)于各個網(wǎng)頁之間的橋梁，使用它可以從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁。本任務(wù)將介紹在HTML中應(yīng)用超鏈接，然后為“網(wǎng)上書店”頁面添加超鏈接。URL的格式123http:/，用于從服務(wù)器傳輸超文本到本地瀏覽器的超文本傳輸通信協(xié)議mailo:，表示目標(biāo)資源是電子郵件fp:4，用于從服務(wù)器復(fù)制文件或從本地計(jì)算機(jī)上傳文件的文件傳輸通信協(xié)議二、相關(guān)知識1.URL1)URL的格式相對于文件的URL。這種URL以鏈接的原文件為起點(diǎn)相對于網(wǎng)站根目錄的URL。這種URL以網(wǎng)站的根目錄為起點(diǎn)二、相關(guān)知識2)URL的類型超鏈接的URL可以分為兩種類型:外部URL和內(nèi)部URL。內(nèi)部URL指向相對于原文件的同一網(wǎng)站或者同一文件夾中的文件。內(nèi)部URL通常僅包含文件夾名和文件名，有時甚至僅有文件名。內(nèi)部URL又可以分為以下兩種:普通鏈接內(nèi)容鏈接在HTML中，使用<a>標(biāo)簽添加超鏈接，<ahref-"目標(biāo)地址">載體</a>。<a>標(biāo)簽中的載體可以是文本、圖像或內(nèi)容塊等，但不能是其他鏈接、音頻、視頻等交互式內(nèi)容。二、相關(guān)知識2.普通鏈接與內(nèi)容塊鏈接圖像鏈接下載鏈接除了鏈接到網(wǎng)頁，<a>標(biāo)簽還可以鏈接到圖像，這種鏈接稱為圖像鏈接。除了鏈接到網(wǎng)頁和圖像，超鏈接還可以鏈接到文檔、郵件地址、應(yīng)用程序等。二、相關(guān)知識3.圖像鏈接與下載鏈接創(chuàng)建錨點(diǎn)(書簽)添加鏈接錨點(diǎn)就是錨點(diǎn)鏈接所指向的元素位置。為元素設(shè)置了id屬性后，其屬性值即可作為該元素的錨點(diǎn)。(1)指向頁面內(nèi)書簽的鏈接。(2)指向其他頁面書簽的鏈接。二、相關(guān)知識4.錨點(diǎn)鏈接5.電子郵件鏈接使用電子郵件鏈接可以打開客戶端瀏覽器默認(rèn)的電子郵件應(yīng)用程序，收件人的郵件地址由電子郵件鏈接指定，無須手動輸入。電子郵件鏈接的href屬性值為“mailto:電子郵件地址?subject=郵件主題”，如mailto:test@163.com?subject=suggest。其中，subject表示郵件主題，可以省略。二、相關(guān)知識8用CSS美化下單菜單美化“網(wǎng)上書店”頁面的導(dǎo)航條9制作八大行星科普網(wǎng)頁美化“網(wǎng)上書店”頁面中的超鏈接為“網(wǎng)上書店”頁面添加超鏈接101112一、任務(wù)引入前面介紹了在HTML中應(yīng)用超鏈接，以及為“網(wǎng)上書店”頁面添加超鏈接。本任務(wù)通過美化“網(wǎng)上書店”頁面的導(dǎo)航條和“重磅推薦”區(qū)域，練習(xí)設(shè)置超鏈接基本樣式的方法。01.小標(biāo)題02.小標(biāo)題03.小標(biāo)題04.小標(biāo)題(1)除上面代碼中涉及的與文字相關(guān)的CSS樣式以外，其他各種背景、邊框和排版的CSS樣式都可以隨意加入超鏈接的幾個偽類的樣式規(guī)則中，從而得到各式各樣的超鏈接效果。二、相關(guān)知識1.設(shè)置鏈接各種背景、邊框和排版的CSS樣式都可以隨意加入超鏈接的幾個偽類的樣式規(guī)則中，從而得到各式各樣的超鏈接效果a元素的4種偽類按照a:link、a:visited、a:hover、a:active的順序進(jìn)行設(shè)置當(dāng)前激活狀態(tài)a:active一般被顯示的情況較少，因此很少使用偽類的冒號前面的選擇器之間不要有空格，要連續(xù)書寫二、相關(guān)知識1.設(shè)置鏈接1234圖像熱點(diǎn)鏈接123在頁面中添加一個圖像文件。為<img>標(biāo)簽設(shè)置usemap屬性,屬性值為圖像熱點(diǎn)鏈接作用區(qū)域的名稱在<map>標(biāo)簽中添加<area>標(biāo)簽，設(shè)置圖像映射的熱點(diǎn)區(qū)域在<img/>標(biāo)簽下方添加<map>標(biāo)簽，表示添加圖像熱點(diǎn)鏈接的作用區(qū)域二、相關(guān)知識6.圖像熱點(diǎn)鏈接footer元素article元素section元素aside元素nav元素header元素二、相關(guān)知識2314562.結(jié)構(gòu)元素PRESENTATION5）HTML5文檔頭部相關(guān)標(biāo)記（1）<title></title>標(biāo)記(2)<meta>標(biāo)記(4)<style></style>標(biāo)記(3)<link>標(biāo)記二、相關(guān)知識(4)contenteditable屬性（2）hidden屬性（3）spellcheck屬性（1）draggable屬性二、相關(guān)知識6.全局屬性感謝觀看PRESENTATION項(xiàng)目四任課老師：XXX應(yīng)用和美化表格PRESENTATION//SLIDE1制作“熱銷排行榜”2美化“熱銷排行榜”表格PRESENTATION//SLIDE任務(wù)一制作“熱銷排行榜”一、任務(wù)引入在早期的網(wǎng)頁設(shè)計(jì)中，表格因其極具結(jié)構(gòu)化的表現(xiàn)形式，主要用于整合頁面中的元素進(jìn)行排版。但隨著網(wǎng)頁設(shè)計(jì)的標(biāo)準(zhǔn)化，HTML5中增加了許多格式化標(biāo)簽，不再使用表格標(biāo)簽作為頁面元素的容器，所以在如今的網(wǎng)頁設(shè)計(jì)中，表格主要用來顯示數(shù)據(jù)。本任務(wù)通過為“網(wǎng)上書店”頁面制作“熱銷排行榜”區(qū)域，練習(xí)表格的使用方法13.1創(chuàng)建表格表格是由行和列組成的二維表。每個表格均有若干行，每行有若干列，行和列圍成的區(qū)域是單元格。單元格的內(nèi)容是數(shù)據(jù)，也稱數(shù)據(jù)單元格，數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線或表格等元素。二、相關(guān)知識二、相關(guān)知識13.2表頭與標(biāo)題標(biāo)題表頭1213.3表格分組13.3.1按行分組13.3.2按列分組二、相關(guān)知識13.4表格標(biāo)簽的屬性13.4.1<table>標(biāo)簽的屬性1.border屬性2.cellspacing屬性3.cellpadding屬性4.width屬性和height屬性5.align屬性6.bgcolor屬性7.background屬性二、相關(guān)知識（1）<tr>標(biāo)簽無寬度屬性width，其寬度取決于表格標(biāo)簽<table>二、相關(guān)知識13.4.2<tr>標(biāo)簽的屬性（2（先指明最高級的層次，然后依次向下說明表格標(biāo)簽的屬性123跨行跨行、跨列跨列二、相關(guān)知識1、教學(xué)設(shè)備與工具（1）電腦/每人一臺；（2）U盤、相關(guān)的軟件（AdobeDreamweaverCS6或HBuilder）。三、資源準(zhǔn)備2、職位分工（如表13-4所示）三、資源準(zhǔn)備表13-4職位分工表職位小組成員（姓名）工作分工備注組長A

小組角色由組長進(jìn)行統(tǒng)一安排，下一個項(xiàng)目角色職位互換，提升綜合職業(yè)能力。組員B

組員C

組員D

組員E

四、實(shí)踐操作使用表格制作“網(wǎng)上書店”頁面的“熱銷排行榜”步驟1：任務(wù)引入、效果圖展示本任務(wù)實(shí)施通過制作“網(wǎng)上書店”頁面中的“熱銷排行榜”區(qū)域，練習(xí)表格的實(shí)際應(yīng)用，最終頁面效果圖步驟2：任務(wù)分析分析“網(wǎng)上書店”頁面中的“熱銷排行榜”區(qū)域的構(gòu)成元素，將其拆解為幾個部分，分析各部分使用了哪些HTML5標(biāo)記及屬性。本頁面首先使用thead、tfoot、tbody標(biāo)記將表格內(nèi)容分組，通過tr和td標(biāo)記表格的行與單元格內(nèi)容。在表格的最后一行“完整榜單……”所在td中，加入colspan屬性，實(shí)現(xiàn)表格的列合并。為了設(shè)置表格各列的寬度，在<thead>標(biāo)記前加入col標(biāo)記并使用width屬性。四、實(shí)踐操作四、相關(guān)知識步驟3：任務(wù)實(shí)現(xiàn)1234設(shè)置表格各列的寬度制作“熱銷排行版”區(qū)域中表格的一部分打開配套素材html文檔添加其余行五、總結(jié)評價1、小組互評（如表13-5所示）表14-3實(shí)訓(xùn)過程性評價表（小組互評）組別：

組員：

任務(wù)名稱：

制作“熱銷排行榜”

教學(xué)環(huán)節(jié)

被評組別評分細(xì)則第

組課前預(yù)習(xí)基礎(chǔ)知識完整、正確（10分）得分：

實(shí)施作業(yè)1、操作過程正確（15分）2、基本掌握操作要領(lǐng)（20分）3、操作結(jié)果正確（25分）4、小組分工協(xié)作完成（10分）各環(huán)節(jié)得分：1：

2：

3：

4：

質(zhì)量檢驗(yàn)1、學(xué)習(xí)態(tài)度（5分）1：

2：

3：

2、工作效率（5分）3、代碼編寫規(guī)范（10分）總分（100分）PRESENTATION//SLIDE任務(wù)二美化“熱銷排行榜”表格一、任務(wù)引入在網(wǎng)頁中使用表格可以清晰直觀地顯示數(shù)據(jù)。本任務(wù)首先介紹CSS3中表格的相關(guān)樣式，然后通過美化“網(wǎng)上書店”頁面“熱銷排行榜”區(qū)域的表格，練習(xí)使用CSS3美化表格的方法。14.1.1border和border-collapse屬性（1）當(dāng)表格的border-collapse屬性設(shè)置為collapse時，則HTML中設(shè)置的cellspacing屬性值無效；（2）行標(biāo)簽<tr>無border樣式屬性。二、相關(guān)知識表14-1常用的表格CSS屬性二、相關(guān)知識屬性描述border簡寫屬性。在一條聲明中設(shè)置所有邊框?qū)傩?。border-collapse規(guī)定是否應(yīng)折疊表格邊框。border-spacing規(guī)定相鄰單元格之間的邊框的距離。caption-side規(guī)定表格標(biāo)題的位置。empty-cells規(guī)定是否在表格中的空白單元格上顯示邊框和背景。table-layout設(shè)置用于表格的布局算法。14.1.2border-spacing屬性border-spacing屬性設(shè)置相鄰單元格的邊框間的距離（僅用于“邊框分離”模式），該屬性指定分隔邊框模型中單元格邊界之間的距離。在指定的兩個長度值中，第一個是水平間隔，第二個是垂直間隔。二、相關(guān)知識屬性123

caption-side屬性table-layout屬性empty-cells屬性二、相關(guān)知識1.border和border-collapse屬性1圓角表格是表格常用的表現(xiàn)形式2CSS中常使用border-radius屬性設(shè)置表格的圓角二、相關(guān)知識14.2制作圓角表格GIF格式最自適應(yīng)表格是指當(dāng)瀏覽器窗口寬度變化時能夠自動調(diào)節(jié)顯示方式的表格，制作這類表格需要用到響應(yīng)式布局的媒體查詢功能“@media”，它可以查詢設(shè)備的屏幕寬度、高度等，在其基礎(chǔ)上設(shè)置表格樣式就實(shí)現(xiàn)了自適應(yīng)表格。二、相關(guān)知識14.3制作自適應(yīng)表格1、教學(xué)設(shè)備與工具（1）電腦/每人一臺；（2）U盤、相關(guān)的軟件（Dreamweaver/HBuilderX）。三、資源準(zhǔn)備2、職位分工（如表14-1所示）三、資源準(zhǔn)備表15-13職位分工表職位小組成員（姓名）工作分工備注組長A

小組角色由組長進(jìn)行統(tǒng)一安排，下一個項(xiàng)目角色職位互換，提升綜合職業(yè)能力。組員B

組員C

組員D

組員E

四、實(shí)踐操作美化“網(wǎng)上書店”頁面“熱銷排行榜”區(qū)域的表格步驟1：任務(wù)引入、效果圖展示本任務(wù)實(shí)施通過美化“網(wǎng)上書店”頁面“熱銷排行榜”區(qū)域的表格，練習(xí)使用CSS3設(shè)置表格樣式的方法，頁面效果步驟2：任務(wù)分析（1）首先通過對table設(shè)置整體樣式，設(shè)置表格的寬度、外邊距、文本顏色等屬性。（2）設(shè)置普通單元格td的高度、內(nèi)外邊距與邊框等屬性；（3）設(shè)置表頭th的高度、字號、文本顏色等屬性；（4）設(shè)置表格中a標(biāo)記的樣式，去除下劃線效果，設(shè)置文本顏色、第五列單元格的文本顏色等效果；（5）使用設(shè)置隔行換色的結(jié)構(gòu)選擇器“:nth-child()”為表格設(shè)置隔行換色效果。四、實(shí)踐操作四、相關(guān)知識步驟3：任務(wù)實(shí)現(xiàn)1234設(shè)置按鈕樣式的超鏈接設(shè)置表格整體樣式打開配套素材html文檔設(shè)置超鏈接與單元格樣式五、總結(jié)評價1、小組互評（如表14-3所示）表14-3實(shí)訓(xùn)過程性評價表（小組互評）組別：

組員：

任務(wù)名稱：

美化“熱銷排行榜”表格教學(xué)環(huán)節(jié)

被評組別評分細(xì)則第

組課前預(yù)習(xí)基礎(chǔ)知識完整、正確（10分）得分：

實(shí)施作業(yè)1、操作過程正確（15分）2、基本掌握操作要領(lǐng)（20分）3、操作結(jié)果正確（25分）4、小組分工協(xié)作完成（10分）各環(huán)節(jié)得分：1：

2：

3：

4：

質(zhì)量檢驗(yàn)1、學(xué)習(xí)態(tài)度（5分）1：

2：

3：

2、工作效率（5分）3、代碼編寫規(guī)范（10分）總分（100分）感謝觀看InfographicTimelinePresentationPRESENTATIONYOURLOGOPRESENTATION//SLIDEPRESENTATIONPresentedto:CompanyNamePreparedby:AgencyName項(xiàng)目五任課老師：XXX應(yīng)用和美化表單PRESENTATION//SLIDE1制作“反饋意見”頁面2制作“學(xué)員信息登記表”頁P(yáng)RESENTATION//SLIDE任務(wù)一制作“反饋意見”頁面一、任務(wù)引入通過前面的學(xué)習(xí)，小H已經(jīng)掌握了很多網(wǎng)頁設(shè)計(jì)和美化的方法，自己也能獨(dú)立的制作頁面了，他很有成就感。但是，他有一個大大的疑惑，就是網(wǎng)站上那些可以填寫個人信息并且能夠進(jìn)行提交的網(wǎng)頁頁面又是怎么制作的呢？比如注冊頁面、登錄頁面、還有問卷調(diào)查類頁面。通過上網(wǎng)搜索，小H知道這類型的頁面需要通過“表單”來實(shí)現(xiàn)。那什么是表單、怎樣制作帶有表單內(nèi)容的頁面，以及怎樣對這類頁面進(jìn)行美化，小H開啟了本次學(xué)習(xí)之旅。15.1認(rèn)識表單表單是HTML網(wǎng)頁中的重要元素，它通過收集來自用戶的信息，并將信息發(fā)送給服務(wù)器端程序來處理，以實(shí)現(xiàn)網(wǎng)上注冊、網(wǎng)上登錄、網(wǎng)上交易等多種功能。簡單的說，“表單”是網(wǎng)頁上用于輸入信息的區(qū)域，用來實(shí)現(xiàn)網(wǎng)頁與用戶的交互、溝通。二、相關(guān)知識二、相關(guān)知識15.1.1表單的構(gòu)成在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構(gòu)成（如圖15-1所示）。15.1.2創(chuàng)建表單在HTML中，<form></form>標(biāo)記被用于定義表單域，即創(chuàng)建一個表單，以實(shí)現(xiàn)用戶信息的收集和傳遞，<form></form>中的所有內(nèi)容都會被提交給服務(wù)器。二、相關(guān)知識15.2表單屬性在HTML5中，表單擁有多個屬性，通過設(shè)置表單屬性可以實(shí)現(xiàn)提交方式、自動完成、表單驗(yàn)證等不同的表單的功能。二、相關(guān)知識1action屬性4autocomplete屬性3name屬性2method屬性二、相關(guān)知識表單屬性5novalidate屬性input元素及屬性123

Input元素的type屬性表單對象分組

提示信息二、相關(guān)知識15.3input元素1、教學(xué)設(shè)備與工具（1）電腦/每人一臺；（2）U盤、相關(guān)的軟件（AdobeDreamweaverCS6或HBuilder）。三、資源準(zhǔn)備2、職位分工（如表15-3所示）三、資源準(zhǔn)備表15-13職位分工表職位小組成員（姓名）工作分工備注組長A

小組角色由組長進(jìn)行統(tǒng)一安排，下一個項(xiàng)目角色職位互換，提升綜合職業(yè)能力。組員B

組員C

組員D

組員E

四、實(shí)踐操作制作“反饋意見”頁面步驟1：任務(wù)引入、效果圖展示前面講解了HTML5中創(chuàng)建表單的方法，也介紹了表單中常用控件的添加方法，以及提示信息、控件分組的設(shè)置方法，本次實(shí)訓(xùn)將結(jié)合這些知識點(diǎn)制作一個“反饋意見”的頁面，頁面效果（如圖15-2所示）。步驟2：任務(wù)分析分析“反饋意見”頁面的構(gòu)成元素，將其拆解為3個部分。其中，“反饋意見”幾個字采用標(biāo)題標(biāo)簽，表單部分由兩個分組構(gòu)成，分別是“用戶信息”和“反饋內(nèi)容”，表單底部的“提交”和“重置”按鈕可用一個div單獨(dú)放置。四、實(shí)踐操作（1）啟動Hbuilder，并新建項(xiàng)目文件夾example15，再將index.html改為“feedback.html”。（2）根據(jù)上述分析，使用相應(yīng)的HTML5元素搭建網(wǎng)頁結(jié)構(gòu)四、相關(guān)知識步驟3：任務(wù)實(shí)現(xiàn)五、總結(jié)評價1、小組互評（如表15-4所示）組別：

組員：

任務(wù)名稱：

制作“反饋意見”頁面教學(xué)環(huán)節(jié)

被評組別評分細(xì)則第

組課前預(yù)習(xí)基礎(chǔ)知識完整、正確（10分）得分：

實(shí)施作業(yè)1、操作過程正確（15分）2、基本掌握操作要領(lǐng)（20分）3、操作結(jié)果正確（25分）4、小

溫馨提示

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

評論

0/150

提交評論