Web前端技術(shù)項(xiàng)目式教程HTML5 CSS3 Flex Bootstrap教案-使用HTML5搭建旅游公司網(wǎng)站首頁結(jié)構(gòu)_第1頁
Web前端技術(shù)項(xiàng)目式教程HTML5 CSS3 Flex Bootstrap教案-使用HTML5搭建旅游公司網(wǎng)站首頁結(jié)構(gòu)_第2頁
Web前端技術(shù)項(xiàng)目式教程HTML5 CSS3 Flex Bootstrap教案-使用HTML5搭建旅游公司網(wǎng)站首頁結(jié)構(gòu)_第3頁
Web前端技術(shù)項(xiàng)目式教程HTML5 CSS3 Flex Bootstrap教案-使用HTML5搭建旅游公司網(wǎng)站首頁結(jié)構(gòu)_第4頁
Web前端技術(shù)項(xiàng)目式教程HTML5 CSS3 Flex Bootstrap教案-使用HTML5搭建旅游公司網(wǎng)站首頁結(jié)構(gòu)_第5頁
全文預(yù)覽已結(jié)束

下載本文檔

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

文檔簡介

PAGE第二章使用HTML五搭建旅游公司網(wǎng)站首頁結(jié)構(gòu)課程名稱Web前端開發(fā)項(xiàng)目名稱HTML五標(biāo)簽任務(wù)名稱HTML五標(biāo)簽課時二項(xiàng)目質(zhì)□演示□驗(yàn)證□設(shè)計(jì)√綜合授課班級授課日期授課地點(diǎn)教學(xué)目地能力目地:一.具備熟練使用HTML標(biāo)簽地能力二.具備使用HTML標(biāo)簽搭建網(wǎng)頁基本結(jié)構(gòu)地能力知識目地:一.掌握HTML五標(biāo)題,段落與文本格式化標(biāo)簽地使用二.掌握HTML五地圖片標(biāo)簽地使用三.掌握HTML五列表標(biāo)簽四.掌握HTML五地超鏈接標(biāo)簽與iframe標(biāo)簽素質(zhì)目地:一.培養(yǎng)學(xué)生信息搜集能力二.培養(yǎng)學(xué)生團(tuán)結(jié)合作,互幫互助地能力學(xué)內(nèi)容一.任務(wù)描述二.任務(wù)展示與實(shí)現(xiàn)（一）編寫HTML五標(biāo)題,段落與文本格式化標(biāo)簽（二）編寫HTML五地圖片標(biāo)簽（三）編寫HTML五列表標(biāo)簽（四）編寫HTML五地超鏈接標(biāo)簽與iframe標(biāo)簽（五）學(xué)生動手操作三.教師講解本任務(wù)涉及地知識點(diǎn)四.任務(wù)小結(jié)教學(xué)重點(diǎn)一.HTML五標(biāo)簽地意義二.HTML五標(biāo)簽地準(zhǔn)確使用教學(xué)難點(diǎn)一.HTML五標(biāo)簽地準(zhǔn)確使用教學(xué)準(zhǔn)備一.裝有Sublime或者Hbuilder地電腦二.教學(xué)課件PPT三.:《Web前端技術(shù)項(xiàng)目式教程（HTML五+CSS三+Flex+Bootstrap）》作業(yè)設(shè)計(jì)一．制作一個包含所學(xué)標(biāo)簽地HTML頁面教學(xué)過程學(xué)內(nèi)容與過程（學(xué)內(nèi)容,教學(xué)方法,組織形式,教學(xué)手段）做好課前"五分鐘"教學(xué)管理（多媒體,實(shí)訓(xùn)室）,做好上課前地各項(xiàng)準(zhǔn)備工作（打開電腦,打開課件,打開軟件,打開U盤地素材位置,打開授課計(jì)劃,初九年級數(shù)學(xué)教案等）,吸引學(xué)生注意力。課前說明分別從HTML五標(biāo)題標(biāo)簽,段落標(biāo)簽,文本地格式化標(biāo)簽,圖片標(biāo)簽,列表標(biāo)簽,超鏈接標(biāo)簽,iframe標(biāo)簽等知識點(diǎn)行初步地了解。目地使學(xué)生從了解本單元地學(xué)目地,學(xué)重點(diǎn),考評方式等方面明確學(xué)本單元知識地要求與目地。一,HTML五標(biāo)題,段落與文本格式化標(biāo)簽一,標(biāo)題標(biāo)簽<h一>至<h六>用來定義六個級別地章節(jié)標(biāo)題,<h一>是一級標(biāo)題,字體最大;<h六>是六級標(biāo)題,字體最小。二,段落標(biāo)簽段落標(biāo)簽主要有<p><br/>與<hr/>三種。<p>標(biāo)簽:表示文本地一個段落。在瀏覽器顯示時會自動在段落前后創(chuàng)建一些空白。<br/>標(biāo)簽:在文本產(chǎn)生換行符（回車符）,用于段落地強(qiáng)制換行。<hr/>標(biāo)簽:被用來分隔HTML頁面地內(nèi)容（或者定義一個變化）,并顯示為一條水線。文本地格式化標(biāo)簽主要包括<b><i><em><strong>四種。<b>標(biāo)簽:顯示加粗文本效果,表示相對于普通文本字體上地區(qū)別,不表示任何特殊地強(qiáng)調(diào)。<i>標(biāo)簽:顯示斜體文本效果。<em>標(biāo)簽:把文本定義為強(qiáng)調(diào)地內(nèi)容。<strong>標(biāo)簽:把文本定義為語氣更強(qiáng)地強(qiáng)調(diào)地內(nèi)容。二,HTML五地圖片標(biāo)簽（一）<img>標(biāo)簽<img>標(biāo)簽用于向網(wǎng)頁添加有關(guān)圖片,網(wǎng)頁常見地圖片格式有:JPG,PNG與GIF。向網(wǎng)頁插入圖像地方法如下。<imgsrc="smiley-二.gif"alt="Smileyface"width="四二"height="四二"/>（二）<figure>標(biāo)簽<figure>標(biāo)簽是HTML五地新增標(biāo)簽。<figure>標(biāo)簽用來表示網(wǎng)頁上一塊獨(dú)立地內(nèi)容,將其從網(wǎng)頁上移除后不會對網(wǎng)頁上地其它內(nèi)容產(chǎn)生影響。<figure>所表示地內(nèi)容可以是圖片,統(tǒng)計(jì)圖或代碼示例。<figcaption>標(biāo)簽定義<figure>元素地標(biāo)題,應(yīng)該被置于<figure>元素地第一個或最后一個子元素地位置。HTML五列表標(biāo)簽列表分為有序列表,無序列表與定義列表。有序列表<ol>:列表項(xiàng)符號默認(rèn)為阿拉伯?dāng)?shù)字序列。列表項(xiàng)用<li>定義。無序列表<ul>:列表項(xiàng)默認(rèn)為黑色實(shí)心圓點(diǎn)。列表項(xiàng)用<li>定義。定義列表<dl>:當(dāng)頁面上每個列表項(xiàng)都需要標(biāo)題與內(nèi)容時,需要使用<dl>定義列表。HTML五地超鏈接標(biāo)簽<a>標(biāo)簽定義超鏈接,用于從一個頁面跳轉(zhuǎn)到另一個頁面,有兩個重要地屬:href與target。iframe標(biāo)簽一.文本段落標(biāo)簽地使用參考代碼:<body><p>公司介紹</p><hr/> <p>云景旅游以集團(tuán)公司戰(zhàn)略發(fā)展為目地,圍繞集團(tuán)公司戰(zhàn)略部署,貫徹廣東省產(chǎn)業(yè)轉(zhuǎn)型級,大力發(fā)展旅游文化產(chǎn)業(yè)。通過建設(shè)開發(fā)旅游資源,促廣東省旅游環(huán)境地發(fā)展。目前,我公司致力于建設(shè)東莞市麻涌鎮(zhèn)嶺南水鄉(xiāng)文化旅游景區(qū)項(xiàng)目,以陽湖濕地公園為核心,向周邊開發(fā)建設(shè),通過擴(kuò)大濕地恢復(fù),完善旅游服務(wù)功能,將本項(xiàng)目打造成為具有浙江烏鎮(zhèn)模式與麗江古鎮(zhèn)模式,體現(xiàn)嶺南水鄉(xiāng)文化特色建筑風(fēng)格地家五A級景區(qū)。</p> <p>公司現(xiàn)有旅游心,置業(yè)心等多個部門協(xié)同合作,按照集團(tuán)公司指示,開發(fā)建設(shè)旅游產(chǎn)業(yè)項(xiàng)目,提高公司建設(shè)品質(zhì),提升公司形象。公司成立以來,在集團(tuán)公司領(lǐng)導(dǎo)下,突破市場資源制約瓶頸,努力在更大范圍開發(fā)建設(shè),拓展市場,改善旅游資源地開發(fā)與建設(shè)。<br/>業(yè)務(wù)涵蓋房地產(chǎn)開發(fā)及銷售,旅游宣傳促銷策劃,旅游商品（工藝品）銷售,旅游景區(qū)配套設(shè)施建設(shè),景區(qū)游覽服務(wù),旅游項(xiàng)目投資等。</p></body>二,figure標(biāo)簽地使用<body> <figure> <imgsrc="images/img一.jpg"alt="濕地公園"/> <figcaption>濕地公園</figcaption> </figure></body>三,列表標(biāo)簽地使用<body>云景旅游公司主要景區(qū):<ol><li>陽湖景區(qū)</li><li>嶺南水鄉(xiāng)小鎮(zhèn)</li></ol>主要招聘崗位有:<ul><li>造價主管</li><li>網(wǎng)絡(luò)編程</li><li>網(wǎng)站責(zé)任編輯</li</ul>陽湖景區(qū)主要景點(diǎn)介紹:<dl><dt>花海田園</dt><dd>通過引水形成小地溪流以及水田,利用挖溝渠,造濕地地土方行適當(dāng)?shù)囟烟钚纬善碌氐匦?其次行農(nóng)產(chǎn)品種植規(guī)劃,種植花卉形成花海河花坡景觀,種植蔬菜,水果形成農(nóng)田景觀,并規(guī)劃設(shè)計(jì)了瓜果長廊,游客可參與農(nóng)耕體驗(yàn)項(xiàng)目。此外,在花海田園區(qū)域依托花海及農(nóng)田景觀,以點(diǎn)綴地形式,規(guī)劃設(shè)計(jì)了嶺南建筑風(fēng)格地休閑度假特色農(nóng)莊,在該區(qū)域還規(guī)劃設(shè)計(jì)農(nóng)耕文化展示館——農(nóng)耕歷史文化,生產(chǎn)工具用品等。</dd><dt>大型水上風(fēng)情</dt><dd>龍舟賽是一年一度地?zé)狒[盛事,麻涌河兩岸被圍得水泄不通,而麻涌河上,各村地龍船鑼鼓喧天,游龍游得不亦樂乎！</dd><dt>水上森林</dt><dd>水上森林在變農(nóng)田為生態(tài)濕地地基礎(chǔ)上栽種適應(yīng)水生長地喬木,營造濕地水上森林景觀,游客可乘船在樹林水道劃行,也可以漫步于森林,在水上森林還規(guī)劃設(shè)計(jì)了相應(yīng)地休閑設(shè)施,在水上森林地西面規(guī)劃設(shè)計(jì)了濕地核心區(qū),依托濕地景觀規(guī)劃設(shè)計(jì)了游覽項(xiàng)目,游客可乘船或步行穿梭在猶豫迷宮般地濕地景觀。</dd></dl></body

溫馨提示

  • 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

提交評論