網(wǎng)站設(shè)計與網(wǎng)頁制作立體化項目教程（第4版） 課件任務(wù)4：“英博特智能科技”企業(yè)網(wǎng)站二三級頁面布局_第1頁
網(wǎng)站設(shè)計與網(wǎng)頁制作立體化項目教程（第4版） 課件任務(wù)4：“英博特智能科技”企業(yè)網(wǎng)站二三級頁面布局_第2頁
網(wǎng)站設(shè)計與網(wǎng)頁制作立體化項目教程（第4版） 課件任務(wù)4：“英博特智能科技”企業(yè)網(wǎng)站二三級頁面布局_第3頁
網(wǎng)站設(shè)計與網(wǎng)頁制作立體化項目教程（第4版） 課件任務(wù)4：“英博特智能科技”企業(yè)網(wǎng)站二三級頁面布局_第4頁
網(wǎng)站設(shè)計與網(wǎng)頁制作立體化項目教程（第4版） 課件任務(wù)4：“英博特智能科技”企業(yè)網(wǎng)站二三級頁面布局_第5頁
已閱讀5頁，還剩86頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

任務(wù)4：“英博特智能科技”企業(yè)網(wǎng)站二三級頁面布局第二篇：項目實戰(zhàn)篇4.1產(chǎn)品案例頁面制作4-1

產(chǎn)品案例頁面制作能力要求學(xué)習(xí)導(dǎo)覽（1）掌握豎向二級導(dǎo)航菜單的制作。（2）掌握FontAwesome圖標(biāo)字體庫的使用。（3）會使用服務(wù)器端字體。（4）掌握背景屬性的設(shè)置方法，能夠設(shè)置背景顏色和圖像。（5）理解漸變屬性的原理，能夠設(shè)置漸變背景。任務(wù)概述本次任務(wù)完成“英博特智能科技”企業(yè)網(wǎng)站二級頁面產(chǎn)品案例頁面制作，經(jīng)過結(jié)構(gòu)分析，發(fā)現(xiàn)頁面頭部、橫幅廣告和頁尾與首頁一致，因此只需在首頁基礎(chǔ)上，更改中間內(nèi)容即可。搭建好產(chǎn)品案例頁面結(jié)構(gòu)后，主要完成左側(cè)豎向?qū)Ш街谱鳌⒂覀?cè)產(chǎn)品案例圖文混排制作。4.1產(chǎn)品案例頁面制作任務(wù)思考（1）一級導(dǎo)航菜單左側(cè)的小圖標(biāo)可以用哪些方法實現(xiàn)？

（2）二級導(dǎo)航菜單的顯示和隱藏是如何實現(xiàn)的？

（3）網(wǎng)頁中如何換段和換行？

4.1產(chǎn)品案例頁面制作FontAwesome圖標(biāo)字體庫4.1產(chǎn)品案例頁面制作FontAwesome是一套圖標(biāo)字體庫和CSS框架，為我們提供可縮放的矢量圖標(biāo)，我們可以使用CSS所提供的所有特性對它們進(jìn)行更改，包括：大小、顏色、陰影或者其它任何支持的效果。步驟1：下載字體圖標(biāo)庫文件夾“font-awesome”，也可以用國內(nèi)外推薦的CDN。如果引用CDN，則步驟2可以省略。步驟2：復(fù)制整個font-awesome文件夾到項目中。步驟3：在HTML的<head>中引用font-awesome.min.css樣式表文件。步驟4：開始使用FontAwesome。FontAwesome圖標(biāo)字體庫4.1產(chǎn)品案例頁面制作（1）下載字體圖標(biāo)庫文件夾。①FontAwesome官網(wǎng)下載。通過站點/下載字體圖標(biāo)庫，我們選擇了V4.7版本，也可下載最新版本。下載后得到“font-awesome-4.7.0.zip”壓縮文件。②國內(nèi)推薦CDN。<linkrel="stylesheet"href="/font-awesome/4.7.0/css/font-awesome.css">③海外推薦CDN。<linkrel="stylesheet"href="/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">FontAwesome圖標(biāo)字體庫4.1產(chǎn)品案例頁面制作（2）復(fù)制字體圖標(biāo)庫文件夾到項目中。將下載后得到“font-awesome-4.7.0.zip”解壓縮，復(fù)制整個font-awesome文件夾到項目中。（3）在HTML的<head>中引用font-awesome.min.css。<linkrel="stylesheet"type="text/css"href="font-awesome-4.7.0/css/font-awesome.min.css">提示：href里的路徑根據(jù)項目中font-awesome.min.css所在實際路徑確定。（4）使用FontAwesome。<i>和<span>元素廣泛用于圖標(biāo)，F(xiàn)ontAwesome與內(nèi)聯(lián)元素一起使用。更改<i>和<span>元素字體大小或顏色，圖標(biāo)也會更改?？梢允褂们熬Y

fa

和圖標(biāo)的名稱來放置FontAwesome圖標(biāo)。FontAwesome圖標(biāo)字體庫4.1產(chǎn)品案例頁面制作【示例代碼】2-4-1.html。引用font-awesome.min.css<i>元素廣泛用于圖標(biāo)，使用前綴

fa

和圖標(biāo)的名稱來放置FontAwesome圖標(biāo)。CSS3服務(wù)器端字體4.1產(chǎn)品案例頁面制作瀏覽器顯示網(wǎng)頁上的字體只能局限在用戶電腦里已經(jīng)安裝的字體里，但每個用戶電腦里安裝的字體不盡相同，因此網(wǎng)頁里設(shè)置的字體在用戶電腦里未必能顯示出來。@font-face的作用是從網(wǎng)上下載并使用自定義字體，使頁面顯示字體不依賴用戶的操作系統(tǒng)字體環(huán)境。在@font-face規(guī)則中，先定義字體名稱（例如myFirstFont），然后指向字體文件。字體的URL使用小寫字母，大寫字母可能會在IE中產(chǎn)生意外結(jié)果。定義好字體后，再通過font-family屬性使用定義的字體。CSS3服務(wù)器端字體4.1產(chǎn)品案例頁面制作【示例代碼】2-4-2.html。步驟1：定義字體名稱，指向字體文件步驟2：通過font-family屬性使用定義的字體步驟3：使用定義的樣式使用了服務(wù)器端字體的文字樣式和默認(rèn)文字樣式的確有區(qū)別。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作通過background-image屬性可以添加多張背景圖片，不同的背景圖片用逗號隔開，越靠前的圖片層級越高。通過background-image、background-repeat、background-position和background-size等屬性值可以實現(xiàn)多重背景圖像效果，各屬性值之間用逗號隔開。（1）background-image屬性設(shè)置多重背景CSS3新增背景屬性4.1產(chǎn)品案例頁面制作【示例代碼】2-4-3.html：background-image屬性設(shè)置多重背景案例。該示例實現(xiàn)了盒子四個角上分別放置了一張背景，從而實現(xiàn)了多重背景的放置。設(shè)置了4張背景圖片設(shè)置背景圖片不重復(fù)設(shè)置背景圖片位置在盒子的上、下、左、右四個角。（1）background-image屬性設(shè)置多重背景CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（2）background-size屬性在CSS3中，background-size屬性用于設(shè)置背景圖像的大小，可以指定像素或百分比大小。如果指定的是百分比大小，則是相對于父元素的寬度和高度的百分比的尺寸，還有cover和contain兩個屬性值。background-size屬性值類型如下表所示。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（2）background-size屬性修改【示例代碼】2-4-3.html，在樣式表中增加如下代碼，保存后，在瀏覽器中查看，發(fā)現(xiàn)背景圖片大小發(fā)生了改變，每張背景圖片占所在父容器寬度的20%。background-size:20%,20%,20%,20%;增加background-size前增加background-size后CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（3）background-origin屬性background-origin屬性指定了背景圖像的位置區(qū)域，屬性取值有content-box、padding-box和border-box。background-origin屬性取值如表2-4-2所示。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（3）background-origin屬性【示例代碼】2-4-4.html：background-origin設(shè)置不同屬性值案例。下面三幅效果圖顯示了background-origin設(shè)置不同值時，背景圖片開始渲染的位置也不同。content-boxborder-boxpadding-box設(shè)置background-origin屬性CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（4）background-clip屬性背景從盒子左上角開始渲染，background-clip背景裁剪屬性是從指定位置開始裁切，屬性取值和background-origin一樣，包括content-box、padding-box和border-box。background-clip屬性取值如下表所示。雖然background-clip和background-origin屬性取值一樣，但含義完全不同。對于background-clip,

是指將背景圖片以border的尺寸、padding的尺寸或者content的尺寸進(jìn)行裁切，其得到的結(jié)果可能是不完整的背景，也就是其中的一部分(原理與截圖差不多)。而background-origin，是指將背景圖片放置到border范圍內(nèi)、padding范圍內(nèi)或者content范圍內(nèi)，其得到的結(jié)果是完整的背景(原理與圖片的縮放相似)。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（4）background-clip屬性分別把background-clip和background-origin屬性值設(shè)置為content-box，通過觀察，可以發(fā)現(xiàn)background-clip以content的尺寸大小進(jìn)行了裁切，背景圖不完整了。而background-origin是指將背景圖片放置到content范圍內(nèi)開始的起點，圖片沒有被裁切，只是背景圖片放置的起點位置發(fā)生變化而已。background-clip屬性

background-origin屬性CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（5）background屬性background背景縮寫屬性可以在一個聲明中設(shè)置所有的背景屬性?？梢栽O(shè)置的屬性分別是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment和background-image。語法如下：background:bg-colorbg-imageposition/bg-sizebg-repeatbg-originbg-clipbg-attachmentinitial|inherit;background-position和background-size屬性,之間需使用/分隔,且position值在前,size值在后。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（5）background屬性background屬性取值如下表所示。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（5）background屬性修改【示例代碼】2-4-3.html下方部分代碼：修改后代碼如下：【示例代碼】詳見2-4-3.html修改后的顯示效果和修改前是一樣的，background屬性是一種縮寫屬性，效果與分開設(shè)置一樣，但代碼更加精簡了。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（6）背景透明度的設(shè)置通過引入RGBA模式，用rgba()函數(shù)使用紅(R)、綠(G)、藍(lán)(B)、透明度(A)的疊加來生成各式各樣的顏色。例如：使用RGBA模式為p元素指定透明度為0.5，顏色為紅色的背景。p{background-color:rgba(255,0,0,0.5);}RGBA模式屬性取值如下表所示。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（6）背景透明度的設(shè)置【示例代碼】2-4-5.html：RGBA模式。上圖只設(shè)置背景色為紅色：background-color:red。下圖用RGBA模式設(shè)置了透明度：rgba(255,0,0,0.3)。通過比較發(fā)現(xiàn)，右側(cè)圖片明顯帶有透明效果，顏色比左側(cè)紅色略淺。用RGBA模式設(shè)置背景顏色CSS3漸變4.1產(chǎn)品案例頁面制作漸變是網(wǎng)頁設(shè)計中使用頻率較高的一種效果，它可以讓元素看起來更有質(zhì)感。傳統(tǒng)的漸變實現(xiàn)方式是用圖像實現(xiàn)效果的，而CSS3能方便的實現(xiàn)元素的漸變，減少圖片下載的時間，同時使用漸變效果的元素會隨著瀏覽器的放大而效果更好。CSS3漸變（gradients）可以實現(xiàn)在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡，主要定義了線性漸變和徑向漸變兩種類型的漸變。CSS3漸變4.1產(chǎn)品案例頁面制作（1）線性漸變（LinearGradients）創(chuàng)建一個線性漸變，需至少定義兩種顏色節(jié)點，顏色節(jié)點用于呈現(xiàn)平穩(wěn)過渡的顏色。同時，還可以設(shè)置一個起點和一個方向（或一個角度）。①方向線性漸變的方向主要包括向下/向上/向左/向右/對角等方向，如tobottom、totop、toright、toleft、tobottomright等。語法如下：background-image:linear-gradient(direction,color-stop1,color-stop2,...);CSS3漸變4.1產(chǎn)品案例頁面制作（1）線性漸變（LinearGradients）【示例代碼】2-4-6.html：線性漸變（設(shè)置方向）。實現(xiàn)了方向由下到上，顏色由紅色到黃色的線性漸變。CSS3漸變4.1產(chǎn)品案例頁面制作（1）線性漸變（LinearGradients）②角度如果想要在漸變的方向上做更多的控制，可以定義角度，而不用預(yù)定義方向。語法如下：background-image:linear-gradient(angle,color-stop1,color-stop2);角度對應(yīng)方向如圖所示：CSS3漸變4.1產(chǎn)品案例頁面制作（1）線性漸變（LinearGradients）【示例代碼】2-4-7.html：線性漸變（設(shè)置角度）。實現(xiàn)了角度為左上45度角，顏色由紅色過渡到黃色，再到藍(lán)色的線性漸變。CSS3漸變4.1產(chǎn)品案例頁面制作（2）徑向漸變（RadialGradients）創(chuàng)建一個徑向漸變，必須至少定義兩種顏色節(jié)點。顏色節(jié)點用于呈現(xiàn)平穩(wěn)過渡的顏色?？梢灾付u變的中心、形狀（圓形或橢圓形）、大小。默認(rèn)情況下，漸變的中心是center（表示在中心點），漸變的形狀是ellipse（表示橢圓形），漸變的大小是farthest-corner（表示到最遠(yuǎn)的角落）。語法如下：background-image:radial-gradient(shapesizeatposition,start-color,...,last-color);CSS3漸變4.1產(chǎn)品案例頁面制作（2）徑向漸變（RadialGradients）【示例代碼】2-4-8.html：徑向漸變。實現(xiàn)了顏色由紅色到黃色再到綠色的徑向圓形漸變。任務(wù)實施豎向?qū)Ш街谱?2.產(chǎn)品案例圖文混排制作03.01.搭建頁面結(jié)構(gòu)具體要求見任務(wù)書4.1產(chǎn)品案例頁面制作討論區(qū)運用本課學(xué)習(xí)的技術(shù)，模仿完成效果圖所示豎向二級導(dǎo)航菜單。要求有文字、圖片，截圖上傳討論區(qū)。4.1產(chǎn)品案例頁面制作討論區(qū)運用所學(xué)知識，完成小米平板產(chǎn)品案例頁面的制作，要求有文字、圖片，截圖上傳討論區(qū)。4.1產(chǎn)品案例頁面制作4.1產(chǎn)品案例頁面制作完成在線測試題。學(xué)習(xí)其他二級導(dǎo)航菜單的制作和產(chǎn)品案例頁面的制作。運用本課學(xué)習(xí)的技術(shù)，完成豎向二級導(dǎo)航菜單和產(chǎn)品案例圖文混排（詳見能力拓展）。日拱一卒無有盡，功不唐捐終入海！Web前端技術(shù)基礎(chǔ)任務(wù)4：“英博特智能科技”企業(yè)網(wǎng)站二三級頁面布局第二篇：項目實戰(zhàn)篇4.2產(chǎn)品詳細(xì)信息頁面制作4-2產(chǎn)品詳細(xì)信息頁面制作能力要求學(xué)習(xí)導(dǎo)覽（1）掌握HTML表格和表格屬性。（2）掌握表格的跨行和跨列操作。（3）掌握嵌套表格的插入。（4）會使用CSS樣式設(shè)置表格。任務(wù)概述本次任務(wù)完成三級頁面中產(chǎn)品詳細(xì)信息頁面制作，該任務(wù)主要包括三個模塊，上部是產(chǎn)品圖片信息介紹，中部是產(chǎn)品詳情介紹和規(guī)格參數(shù)，下部是產(chǎn)品應(yīng)用場景。4.2產(chǎn)品詳細(xì)信息頁面制作任務(wù)思考（1）中部產(chǎn)品詳情介紹“雙舵輪背負(fù)式”內(nèi)容可以采用哪些方法實現(xiàn)內(nèi)容布局？

（2）數(shù)據(jù)表格主要設(shè)置了哪些樣式？

（3）數(shù)據(jù)表格隔行顯示不同的背景色可以采用什么方法快速實現(xiàn)？

4.2產(chǎn)品詳細(xì)信息頁面制作HTML表格元素常用表格標(biāo)簽包括table（表格）標(biāo)簽、tr（表格行）標(biāo)簽、th（表頭）標(biāo)簽和td（表格單元格）標(biāo)簽，它們組成了HTML的基本表格結(jié)構(gòu)。更復(fù)雜的HTML表格也可以包括caption、col、colgroup、thead、tfoot以及tbody元素。4.2產(chǎn)品詳細(xì)信息頁面制作HTML表格元素4.2產(chǎn)品詳細(xì)信息頁面制作【示例代碼】2-4-9.html：表格。table定義表格caption定義表標(biāo)題tr定義行th定義表頭td定義單元格該示例插入了一個5行3列的表格。HTML表格屬性（1）表格屬性table標(biāo)簽的常用屬性如下表所示，其中width、border、cellspacing和cellpadding屬性的度量單位有兩種，即百分?jǐn)?shù)和像素。當(dāng)使用百分?jǐn)?shù)作為單位時，其值為相對于上一級元素寬度的百分?jǐn)?shù)，并用符號%表示，它不是一個固定值。4.2產(chǎn)品詳細(xì)信息頁面制作HTML表格屬性（2）行、單元格屬性tr標(biāo)簽的常用屬性如下表所示：4.2產(chǎn)品詳細(xì)信息頁面制作th標(biāo)簽和td標(biāo)簽的常用屬性下表所示。這些標(biāo)簽的屬性中都有align和valign屬性。如果在th標(biāo)簽和td標(biāo)簽中不設(shè)置align和valign屬性，默認(rèn)情況下，th在水平和垂直方向上都為居中對齊，加粗顯示，td標(biāo)簽的水平方向為左對齊，垂直方向為居中對齊。CSS表格樣式可以使用CSS表格屬性改善表格的外觀。CSS常用表格屬性如下表所示：4.2產(chǎn)品詳細(xì)信息頁面制作CSS表格樣式可以使用CSS表格屬性改善表格的外觀。CSS常用表格屬性如下表所示：結(jié)合前面所學(xué)的CSS樣式屬性，對表格進(jìn)行美化。4.2產(chǎn)品詳細(xì)信息頁面制作美化前美化后表格跨行跨列（1）跨行跨行是指一個單元格占據(jù)兩行或兩行以上。使用td元素的rowspan屬性來實現(xiàn)單元格的跨行操作。4.2產(chǎn)品詳細(xì)信息頁面制作【示例代碼】2-4-10.html：跨行?？?行，即合并2行單元格表格跨行跨列（2）跨列跨列是指一個單元格占據(jù)兩列或兩列以上。一般使用td元素的colspan屬性來實現(xiàn)單元格跨列操作。注意：在同一個表格中，可以同時使用跨行跨列。但在使用跨行跨列時，要計算好，同一個單元格，不能出現(xiàn)既跨行、又跨列的情況。4.2產(chǎn)品詳細(xì)信息頁面制作【示例代碼】2-4-11.html：跨列?？?列，即合并2列單元格表格嵌套（2）跨列在一個大的表格中，再嵌進(jìn)去一個或幾個小的表格稱作是表格的嵌套。即在單元格th或td中再插入一個或多個新的表格。4.2產(chǎn)品詳細(xì)信息頁面制作【示例代碼】2-4-12.html：表格嵌套。在td里面嵌套了一個table任務(wù)實施圖文內(nèi)容設(shè)計02.數(shù)據(jù)表格設(shè)計03.01.搭建頁面結(jié)構(gòu)具體要求見任務(wù)書4.1產(chǎn)品案例頁面制作編寫相關(guān)樣式04.討論區(qū)運用本課學(xué)習(xí)的技術(shù)，模仿完成效果圖所示產(chǎn)品詳情一覽表。要求有文字、圖片，截圖上傳討論區(qū)。4.1產(chǎn)品案例頁面制作討論區(qū)運用所學(xué)知識，模仿完成效果圖所示房屋信息表。要求有文字、圖片，截圖上傳討論區(qū)。4.1產(chǎn)品案例頁面制作4.1產(chǎn)品案例頁面制作完成在線測試題。運用本課學(xué)習(xí)的技術(shù)，完成產(chǎn)品詳情一覽表和房屋信息表產(chǎn)品案例圖文混排（詳見能力拓展）。吾生也有涯，而知也無涯！Web前端技術(shù)基礎(chǔ)任務(wù)4：“英博特智能科技”企業(yè)網(wǎng)站二三級頁面布局第二篇：項目實戰(zhàn)篇4.3應(yīng)用場景詳細(xì)信息頁面制作4-3應(yīng)用場景詳細(xì)信息頁面制作能力要求學(xué)習(xí)導(dǎo)覽（1）能在網(wǎng)頁中添加音頻、視頻等多媒體文件。（2）熟悉video標(biāo)簽的相關(guān)屬性。（3）熟悉audio標(biāo)簽的相關(guān)屬性。任務(wù)概述本次任務(wù)完成音頻和視頻的插入，該模塊經(jīng)過結(jié)構(gòu)分析，主要包含上下兩部分，上面插入視頻，下面插入音頻。4.3應(yīng)用場景詳細(xì)信息頁面制作任務(wù)思考（1）網(wǎng)頁中常見的多媒體元素有哪些？

（2）常見的音頻和視頻格式有哪些？

（3）HTML5標(biāo)簽中新增的音頻、視頻標(biāo)簽是什么？該如何使用？

4.3應(yīng)用場景詳細(xì)信息頁面制作音頻聲音能極好地烘托網(wǎng)頁頁面的氛圍，網(wǎng)頁中常見的聲音格式有WAV、MP3、MIDI、AIF、RA或RealAudio格式。HTML5規(guī)定了在網(wǎng)頁上嵌入音頻元素的標(biāo)準(zhǔn)，即使用audio元素。目前audio元素支持三種音頻格式文件:MP3、Wav和Ogg。4.3應(yīng)用場景詳細(xì)信息頁面制作【示例代碼】2-4-13.html：插入音頻。音頻4.3應(yīng)用場景詳細(xì)信息頁面制作audio元素允許使用多個source元素，source元素可以鏈接不同的音頻文件，瀏覽器將使用第一個可識別的格式。audio標(biāo)簽提供了許多屬性，如下表所示。音頻4.3應(yīng)用場景詳細(xì)信息頁面制作Audio支持的音頻格式如下表所示。視頻4.3應(yīng)用場景詳細(xì)信息頁面制作video標(biāo)簽定義視頻，比如電影片段或其他視頻流。目前，<video>元素支持三種視頻格式：MP4、WebM、Ogg。video元素允許使用多個source元素，source元素可以鏈接不同的音頻文件，瀏覽器將使用第一個可識別的格式。video標(biāo)簽還提供了許多屬性，如下表所示?！臼纠a】2-4-14.html：插入視頻。視頻4.3應(yīng)用場景詳細(xì)信息頁面制作video屬性如下表所示。視頻格式類型如下表所示。任務(wù)實施插入音頻02.插入視頻03.01.搭建頁面結(jié)構(gòu)具體要求見任務(wù)書4.3應(yīng)用場景詳細(xì)信息頁面制作討論區(qū)運用本課學(xué)習(xí)的技術(shù)，根據(jù)效果圖完成視頻和文字的混排。要求有文字、圖片，截圖上傳討論區(qū)。4.3應(yīng)用場景詳細(xì)信息頁面制作討論區(qū)運用所學(xué)知識，根據(jù)效果圖完成視頻和列表的混排。要求有文字、圖片，截圖上傳討論區(qū)。4.3應(yīng)用場景詳細(xì)信息頁面制作完成在線測試題。運用本課學(xué)習(xí)的技術(shù)，完成視頻和文字的混排及視頻和列表的混排（詳見能力拓展）。4.3應(yīng)用場景詳細(xì)信息頁面制作學(xué)必求其心得,業(yè)必貴其專精！Web前端技術(shù)基礎(chǔ)任務(wù)4：“英博特智能科技”企業(yè)網(wǎng)站二三級頁面布局第二篇：項目實戰(zhàn)篇4.4留言頁面制作4-4留言頁面制作能力要求學(xué)習(xí)導(dǎo)覽（1）了解表單功能，能夠快速創(chuàng)建表單。（2）掌握表單相關(guān)元素，能夠準(zhǔn)確定義不同的表單控件。（3）掌握表單樣式的控制，能夠美化表單界面。任務(wù)概述本次任務(wù)完成二級子頁面留言頁面制作，包括搭建頁面結(jié)構(gòu)、插入表單元素、設(shè)置表單樣式。留言頁面主要用到文本字段、電子郵件、多行文本框、下拉列表框、提交按鈕等表單元素。4.4留言頁面制作任務(wù)思考（1）表單在網(wǎng)站中的作用是什么？工作過程是怎樣的？

（2）表單元素主要分成哪些類型？常用的表單元素和表單屬性有哪些？

（3）表單經(jīng)常設(shè)置的樣式有哪些？

4.4留言頁面制作表單（1）表單作用表單（form）用于收集用戶輸入的信息，然后將用戶輸入的信息提交到action屬性所表示的程序文件中進(jìn)行處理。表單有很多應(yīng)用，如登錄、注冊、調(diào)查問卷、用戶訂單等。表單是一個包含表單元素的區(qū)域，允許用戶在表單中輸入內(nèi)容,比如：文本域、下拉列表、單選框、復(fù)選框等等。4.4留言頁面制作（2）表單工作過程①訪問者在瀏覽有表單的頁面時，可填寫必要的信息，然后單擊“提交”按鈕。②這些信息通過Internet傳送到服務(wù)器上。③服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理，如果有錯誤返回錯誤信息，并要求糾正錯誤。④當(dāng)數(shù)據(jù)完整無誤后，服務(wù)器反饋一個輸入完成信息。表單（3）表單代碼<form>與</form>之間的表單控件是由用戶自定義的，action、method為表單標(biāo)記<form>的常用屬性。<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件</form>表單常用屬性如下表所示。4.4留言頁面制作表單元素（1）Input元素①文本字段（inputtype="text/password"）。文本字段可接受任何類型的字母數(shù)字項。輸入的文本可以顯示為單行文本框或密碼框，其語法格式如下：

<inputtype="text"name="textfield"id="textfield"/><inputtype="password"name="textfield"id="textfield"/>

②復(fù)選框（inputtype="checkbox"）。復(fù)選框允許在一組選項中選擇多項，用戶可以選擇任意多個適用的選項。其語法格式如下：

<inputtype="checkbox"name="checkbox"id="checkbox"/>

③單選按鈕（inputtype="radio"）。單選按鈕代表互相排斥的選擇。選擇一組中的某個按鈕，就會取消選擇該組中的所有其他按鈕。例如，用戶可以選擇“是”或“否”按鈕。其語法格式如下：

<inputtype="radio"name="radio"id="radio"value="radio"/>4.4留言頁面制作表單元素（1）Input元素④圖像域（inputtype="image"）?！皥D像域”使您可以在表單中插入圖像。可以使用圖像域替換“提交”按鈕，以生成圖形化按鈕。其語法格式如下：

<inputtype="image"name="imageField"id="imageField"src="images/1-1.png">

⑤文件域（inputtype="file"）?！拔募颉痹谖臋n中插入空白文本域和“瀏覽”按鈕。文件域使用戶可以瀏覽到其硬盤上的文件，并將這些文件作為表單數(shù)據(jù)上傳。其語法格式如下：

<inputtype="file"name="fileField"id="fileField">

⑥按鈕（inputtype="submit/reset"）。按鈕在單擊時執(zhí)行任務(wù)，如提交或重置表單?？梢詾榘粹o添加自定義名稱或標(biāo)簽，或者使用預(yù)定義的“提交”或“重置”標(biāo)簽之一。其語法格式如下：

<inputtype="submit"name="button"id="button"value="提交"><inputtype="reset"name="button"id="button"value="重置">4.4留言頁面制作表單元素（1）Input元素⑦電子郵件（inputtype="email"）?！半娮余]件”是一種專門用于輸入E-mail地址的文本輸入框，用來驗證email輸入框的內(nèi)容是否符合Email郵件地址格式。如果不符合，將提示相應(yīng)錯誤信息。<inputtype="email"/>⑧url地址（inputtype="tel"）。url類型的input元素是一種用于輸入URL地址的文本框。<inputname="url"type="url"/>⑨電話號碼（inputtype="tel"）。tel類型用于提供輸入電話號碼的文本框，通常會和pattern屬性配合使用。<inputtype="tel"name="telphone"pattern="^\d{11}$"/>⑩搜索框（inputtype="search"）。search類型是一種專門用于輸入搜索關(guān)鍵詞的文本框，它能自動記錄一些字符。右側(cè)會附帶一個刪除圖標(biāo)，單擊這個圖標(biāo)按鈕可以快速清除內(nèi)容。<inputtype="search"name="searchtxt"/>4.4留言頁面制作表單元素（1）Input元素?顏色框（inputtype="color"）。color類型用于提供設(shè)置顏色的文本框，實現(xiàn)RGB顏色的輸入，可以通過value屬性值更改默認(rèn)顏色。<inputtype="color"name="colorbox"value="#00ff00"/>?數(shù)值框（inputtype="number"）。number類型用于提供輸入數(shù)值的文本框。在提交表單時，會自動檢查輸入框中的內(nèi)容是否為數(shù)字，如果不是數(shù)字或者數(shù)字不在限定范圍內(nèi)，則會出現(xiàn)錯誤提示。<inputtype="number"name="number1"value="1"min="1"max="20"step="4"/>?滑動條（inputtype="range"）。range類型的input元素用于提供一定范圍內(nèi)數(shù)值的輸入范圍，在網(wǎng)頁中顯示為滑動條,value屬性用于設(shè)置或返回滑塊控件的value屬性值。<inputtype="range"name="number1"value="1"min="1"max="20"step="4"/>4.4留言頁面制作表單元素（1）Input元素?時間日期（Datepickers）。HTML5中提供了多個可供選取日期和時間的輸入類型，用于驗證輸入的日期。<inputtype=date,month,week…"/>時間和日期類型如下表所示：4.4留言頁面制作表單元素（2）Inp

溫馨提示

  • 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

提交評論