PPTHTML5+CSS3 Web前端開(kāi)發(fā)技術(shù) 課件 第3單元-學(xué)習(xí)情境5-制作招聘網(wǎng)站職位列表頁(yè)面

HTML5+CSS3Web前端開(kāi)發(fā)技術(shù)單元3制作列表頁(yè)面單元3制作列表頁(yè)面學(xué)習(xí)情境5制作招聘網(wǎng)站職位列表頁(yè)面學(xué)習(xí)情境5制作招聘網(wǎng)站職位列表頁(yè)面01030204情境概述知識(shí)準(zhǔn)備案例講解總結(jié)PART01情境概述學(xué)習(xí)情境5制作招聘網(wǎng)站職位列表頁(yè)面教學(xué)概述教學(xué)導(dǎo)航知識(shí)重點(diǎn)<ul>、<li>標(biāo)簽的使用；<dl>、<dt>、<dd>標(biāo)簽的使用；<datalist>標(biāo)簽的使用；@font-face；CSSOverflow；CSStext-overflow；CSSposition(定位)；CSSWhite-space；知識(shí)難點(diǎn)<ul><li>標(biāo)簽的使用Position樣式的設(shè)置推薦教學(xué)方式從學(xué)習(xí)情境入手，通過(guò)引導(dǎo)學(xué)生制作一個(gè)招聘網(wǎng)站列表頁(yè)面，讓學(xué)生掌握HTML中多種元素的用法和多列布局樣式的用法；通過(guò)引導(dǎo)學(xué)生制作一個(gè)企業(yè)網(wǎng)站列表頁(yè)面，讓學(xué)生掌握CSS復(fù)雜布局樣式的用法。建議學(xué)時(shí)8學(xué)時(shí)推薦學(xué)習(xí)方法網(wǎng)站的列表通常是一個(gè)信息篩選頁(yè)面，要綜合運(yùn)用多種HTML標(biāo)簽和CSS樣式，需多鞏固前面的學(xué)習(xí)內(nèi)容，再結(jié)合新知識(shí)點(diǎn)，按照效果圖實(shí)現(xiàn)網(wǎng)頁(yè)。必須掌握的理論知識(shí)<ul><li>標(biāo)簽及屬性；<datalist>標(biāo)簽及屬性；@font-face規(guī)則；overfolw樣式屬性；text-overflow樣式屬性；position樣式屬性；white-space樣式屬性必須掌握的技能使用<ul><li>標(biāo)簽開(kāi)發(fā)網(wǎng)頁(yè)使用<datalist>標(biāo)簽擴(kuò)展<input>標(biāo)簽的使用使用@font-face結(jié)合字體圖標(biāo)開(kāi)發(fā)網(wǎng)頁(yè)使用overflow屬性美化網(wǎng)頁(yè)使用text-overflow屬性美化網(wǎng)頁(yè)使用position屬性美化網(wǎng)頁(yè)使用white-space屬性美化網(wǎng)頁(yè)教學(xué)概述網(wǎng)站列表頁(yè)通常是信息的篩選、搜索頁(yè)面，包含了多個(gè)內(nèi)容板塊。本單元將學(xué)習(xí)制作一個(gè)招聘網(wǎng)站的列表頁(yè)面，本單元的內(nèi)容具有一定的通用性、代表性和擴(kuò)展性，通過(guò)學(xué)習(xí)本單元的內(nèi)容，再舉一反三可在制作出類似的列表頁(yè)面。教學(xué)概述學(xué)習(xí)情境描述本學(xué)習(xí)情境是制作一個(gè)招聘網(wǎng)站的列表頁(yè)。在本學(xué)習(xí)情境中，我們需要考慮與網(wǎng)站列表制作相關(guān)的各種內(nèi)容、布局，如頁(yè)首、頁(yè)腳、導(dǎo)航條、搜索欄、條件篩選欄、列表等，通過(guò)將新學(xué)的知識(shí)技能與前面學(xué)習(xí)的內(nèi)容相結(jié)合，進(jìn)行綜合運(yùn)用，從而完成招聘網(wǎng)站列表頁(yè)的開(kāi)發(fā)制作。教學(xué)概述本節(jié)課需要掌握的情境知識(shí)點(diǎn)和技能點(diǎn)關(guān)鍵知識(shí)點(diǎn)：（1）<ul><li>的使用方法（2）<dl><dt><dd>的使用方法（3）<datalist>的使用方法（4）@font-face結(jié)合Font-Awsome的使用方法（5）樣式overflow屬性的使用方法（6）樣式text-overflow屬性的使用方法（7）樣式position屬性的使用方法（8）樣式white-space屬性的使用方法教學(xué)概述本節(jié)課需要掌握的情境知識(shí)點(diǎn)和技能點(diǎn)關(guān)鍵技能點(diǎn)：（1）使用<ul><li>標(biāo)簽制作下拉菜單（2）使用<dl><dt><dd>標(biāo)簽制作描述列表（3）使用<datalist>標(biāo)簽制作<input>標(biāo)簽的參考選項(xiàng)（4）使用@font-face和FontAwesome實(shí)現(xiàn)字體圖標(biāo)效果（5）使用overflow屬性實(shí)現(xiàn)內(nèi)容溢出的效果（6）使用text-overflow屬性實(shí)現(xiàn)文本溢出框體的效果（7）使用position屬性實(shí)現(xiàn)網(wǎng)頁(yè)布局定位的效果（8）使用white-space屬性實(shí)現(xiàn)網(wǎng)站空白的處理效果教學(xué)概述本節(jié)課的學(xué)習(xí)目標(biāo)掌握綜合運(yùn)用HTML5和CSS3實(shí)現(xiàn)包含頁(yè)首、頁(yè)腳、導(dǎo)航欄、搜索欄、條件篩選欄、列表版塊等的條件篩選型網(wǎng)頁(yè)的技能掌握在網(wǎng)頁(yè)中下拉菜單的制作方法掌握在網(wǎng)頁(yè)中實(shí)現(xiàn)字體圖標(biāo)效果的方法掌握使用CSS樣式實(shí)現(xiàn)搜索欄布局的方法掌握在在網(wǎng)頁(yè)中實(shí)現(xiàn)詳情列表顯示的方法教學(xué)概述本節(jié)課的任務(wù)書(shū)完成招聘網(wǎng)站列表頁(yè)的整體框架設(shè)計(jì)實(shí)現(xiàn)招聘網(wǎng)站列表頁(yè)的頁(yè)首、導(dǎo)航欄和頁(yè)腳效果實(shí)現(xiàn)招聘網(wǎng)站列表頁(yè)的搜索欄實(shí)現(xiàn)招聘網(wǎng)站列表頁(yè)搜索欄的下拉菜單實(shí)現(xiàn)招聘網(wǎng)站列表頁(yè)的條件篩選欄實(shí)現(xiàn)招聘網(wǎng)站列表頁(yè)的項(xiàng)目列表版塊PART02知識(shí)準(zhǔn)備學(xué)習(xí)情境5制作招聘網(wǎng)站職位列表頁(yè)面知識(shí)準(zhǔn)備知識(shí)分布網(wǎng)絡(luò)知識(shí)準(zhǔn)備引導(dǎo)問(wèn)題1.網(wǎng)站列表頁(yè)一般需要包含哪些模塊？2.制作網(wǎng)站列表頁(yè)的各個(gè)模塊時(shí)需要用到哪些頁(yè)面元素？知識(shí)準(zhǔn)備知識(shí)點(diǎn)介紹1、無(wú)序列表<ul>2、列表項(xiàng)<li>3、定義列表<dl>4、<datalist>標(biāo)簽5、@font-face規(guī)則6、white-space屬性7、overflow屬性8、text-overflow屬性9、position屬性<ul>標(biāo)簽的作用是定義無(wú)序列表。將<ul>標(biāo)簽與<li>標(biāo)簽一起使用，創(chuàng)建無(wú)序列表。<ul>標(biāo)簽的常用屬性如表3-4所示。表3-4<ul>標(biāo)簽常用屬性屬性描述compact規(guī)定列表呈現(xiàn)的效果比正常情況更小巧。type規(guī)定列表的項(xiàng)目符號(hào)的類型。項(xiàng)目符號(hào)可選的類型有：disc（實(shí)心圓）、square（正方形）和circle（空心圓）。

示例：<ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>知識(shí)準(zhǔn)備無(wú)序列表<ul>列表項(xiàng)<li>知識(shí)準(zhǔn)備<li>標(biāo)簽定義列表項(xiàng)目。<li>標(biāo)簽可用在有序列表（<ol>）、無(wú)序列表（<ul>）和菜單列表（<menu>）中。本單元主要將<li>標(biāo)簽與<ul>標(biāo)簽結(jié)合使用，創(chuàng)建無(wú)序列表。<li>標(biāo)簽的常用屬性如表3-5所示。表3-5<li>標(biāo)簽常用屬性屬性描述type規(guī)定使用哪種項(xiàng)目符號(hào)。項(xiàng)目符號(hào)有：1、A、a、l、i、disc、square、circ。Value規(guī)定列表項(xiàng)目的數(shù)字。<ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol><ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>知識(shí)準(zhǔn)備列表項(xiàng)<li>示例：定義列表<dl>知識(shí)準(zhǔn)備<dl>標(biāo)簽定義一個(gè)描述列表。<dt>標(biāo)簽定義一個(gè)描述列表的項(xiàng)目/名字。<dd>標(biāo)簽被用來(lái)對(duì)一個(gè)描述列表中的項(xiàng)目/名字進(jìn)行描述。在標(biāo)簽內(nèi)能放置段落、換行、圖片、鏈接、列表等等。使用方法：<dl>與<dt>和<dd>一起使用，形成一個(gè)描述列表。示例：<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl><datalist>標(biāo)簽知識(shí)準(zhǔn)備<datalist>標(biāo)簽規(guī)定了<input>元素可能的選項(xiàng)列表。<datalist>標(biāo)簽被用來(lái)在為<input>元素提供"自動(dòng)完成"的特性。用戶能看到一個(gè)下拉列表，里邊的選項(xiàng)是預(yù)先定義好的，將作為用戶的輸入數(shù)據(jù)。使用方法：請(qǐng)使用<input>元素的list屬性來(lái)綁定<datalist>元素。示例：<inputlist="browsers"><datalistid="browsers"><optionvalue="InternetExplorer"><optionvalue="Firefox"><optionvalue="Chrome"><optionvalue="Opera"><optionvalue="Safari"></datalist>@font-face規(guī)則@font-face規(guī)則，網(wǎng)頁(yè)設(shè)計(jì)師再也不必使用的"web-safe"的字體之一，可使用自定義字體。@font-face{font-family:'FontAwesome';src:url('fontawesome-webfont.eot')format('embedded-opentype'),url('fontawesome-webfont.woff2')format('woff2'),url('fontawesome-webfont.woff')format('woff'),url('fontawesome-webfont.ttf')format('truetype'),url('fontawesome-webfont.svg')format('svg');src:url('fontawesome-webfont.eot?v=4.7.0');font-weight:normal;font-style:normal;}知識(shí)準(zhǔn)備white-space屬性知識(shí)準(zhǔn)備CSS樣式表中，white-space屬性指定元素內(nèi)的空白怎樣處理。值描述normal默認(rèn)?？瞻讜?huì)被瀏覽器忽略。pre空白會(huì)被瀏覽器保留。其行為方式類似HTML中的<pre>標(biāo)簽。nowrap文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到<br>標(biāo)簽為止。pre-wrap保留空白符序列，但是正常地進(jìn)行換行。pre-line合并空白符序列，但是保留換行符。inherit規(guī)定應(yīng)該從父元素繼承white-space屬性的值。p{white-space:nowrap;}示例：overflow屬性知識(shí)準(zhǔn)備CSS樣式表中，overflow屬性指定如果內(nèi)容溢出一個(gè)元素的框，會(huì)發(fā)生什么。參考屬性見(jiàn)表3-7。表3-7overflow的參考屬性值描述visible默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。hidden內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。scroll內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。auto如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。inherit規(guī)定應(yīng)該從父元素繼承overflow屬性的值。div.ex1{overflow:scroll;}div.ex2{overflow:hidden;}div.ex3{overflow:auto;}div.ex4{overflow:visible;}知識(shí)準(zhǔn)備示例：text-overflow屬性知識(shí)準(zhǔn)備CSS樣式表中，text-overflow屬性指定當(dāng)文本溢出包含它的元素時(shí)，應(yīng)該如何顯示?？梢栽O(shè)置溢出后，文本被剪切、顯示省略號(hào)(…)或顯示自定義字符串（不是所有瀏覽器都支持）。值描述clip剪切文本。ellipsis顯示省略符號(hào)…來(lái)代表被修剪的文本。string使用給定的字符串來(lái)代表被修剪的文本。initial設(shè)置為屬性默認(rèn)值。inherit從父元素繼承該屬性值。示例：div.test{text-overflow:ellipsis;}知識(shí)準(zhǔn)備text-overflow屬性position屬性知識(shí)準(zhǔn)備在CSS樣式表中，position屬性指定一個(gè)元素（靜態(tài)的，相對(duì)的，絕對(duì)或固定）的定位方法的類型。h2{position:absolute;left:100px;top:150px;}示例：PART03案例講解學(xué)習(xí)情境5制作招聘網(wǎng)站職位列表頁(yè)面案例講解1.制作招聘網(wǎng)站列表頁(yè)面實(shí)例：使用HBuilder工具制作一個(gè)招聘網(wǎng)站列表頁(yè)面案例講解1.制作招聘網(wǎng)站列表頁(yè)面步驟：設(shè)計(jì)頁(yè)面整體布局設(shè)計(jì)頁(yè)頭設(shè)計(jì)主體內(nèi)容設(shè)計(jì)頁(yè)腳PART04