HTML5+CSS3網(wǎng)頁設(shè)計實戰(zhàn) 課件 第1章 概述_第1頁
HTML5+CSS3網(wǎng)頁設(shè)計實戰(zhàn) 課件 第1章 概述_第2頁
HTML5+CSS3網(wǎng)頁設(shè)計實戰(zhàn) 課件 第1章 概述_第3頁
HTML5+CSS3網(wǎng)頁設(shè)計實戰(zhàn) 課件 第1章 概述_第4頁
HTML5+CSS3網(wǎng)頁設(shè)計實戰(zhàn) 課件 第1章 概述_第5頁
已閱讀5頁，還剩21頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第1章

概述01學(xué)習(xí)目標(biāo)02課程思政目標(biāo)03知識點04本章練習(xí)PPT模板/moban/

學(xué)習(xí)目標(biāo)能掌握基本的HTML、CSS、容器等概念，理解HTML與CSS的關(guān)系；初步了解HTML標(biāo)簽書寫的規(guī)范；通過練習(xí)認(rèn)識到適合的軟件工具可以克服對英文書寫代碼的陌生感，掌握Hbuilder軟件的快捷操作技巧；碰到不了解的知識點，能使用合適的關(guān)鍵字在百度等搜索引擎中進(jìn)行有效搜索，并能對搜索結(jié)果有一定的識別能力。第1章

概述1通過本章學(xué)習(xí)，要求達(dá)到以下既定目標(biāo)：課程思政目標(biāo)第1章

概述2了解本章成語的出處，理解成語含義與知識點理解的結(jié)合。衣冠齊楚——學(xué)生著裝禮儀。工欲善其事，必先利其器——國產(chǎn)編程“利器”、民族自豪感。善假于物——大數(shù)據(jù)時代網(wǎng)絡(luò)提供了多形式的數(shù)據(jù)資料，培養(yǎng)知識的獲取、分辨、模仿能力。第1章

概述3知識點1.1HTML、CSS概念1.2網(wǎng)頁制作初學(xué)者上手工具選擇高效的代碼編輯器安裝調(diào)試用的瀏覽器。善于使用搜索引擎求解問題1.1HTML、CSS概念3知識點HTML的英文全稱是HyperTextMarkupLanguage，即超文本標(biāo)記語言，實質(zhì)上采用標(biāo)簽將文字、圖形、聲音等內(nèi)容標(biāo)記，再通過網(wǎng)頁瀏覽器顯示出即我們所見到的網(wǎng)頁內(nèi)容。注意，我們沒有這么表述“我們所見到的網(wǎng)頁效果”，這是因為同樣的圖文內(nèi)容，設(shè)計效果好看與否，關(guān)鍵在于“排版”，而這個“排版”就是取決于CSS

對元素外觀的定義。CSS的英文全稱是：CascadingStyleSheets，即層疊樣式表，是一種用來表現(xiàn)HTML文件樣式的語言。1.1HTML、CSS概念3知識點《醒世恒言》：“那太醫(yī)衣冠齊楚，氣宇軒昂，賀司戶迎至艙中，敘禮看坐?！币鹿邶R楚——形容衣帽穿戴得整齊，漂亮。也用來襯托人物的風(fēng)流或高雅。知識點：HTML搭配CSS記憶關(guān)鍵詞：衣冠楚楚關(guān)鍵詞解析：HTML標(biāo)簽搭建內(nèi)容（人），CSS展示外觀樣式（著裝）。對于搜索引擎收錄網(wǎng)頁的標(biāo)準(zhǔn)來說，它只關(guān)注內(nèi)容；對于瀏覽者而言，更希望見到CSS將內(nèi)容打扮出令人愉悅的視覺效果。

1.1HTML、CSS概念3知識點目前，HTML最新版本為5，故常稱謂為“HTML5”，或簡稱為“H5”，HTML5重點強(qiáng)調(diào)HTML標(biāo)簽盡可能成對標(biāo)簽出現(xiàn)，即“開始標(biāo)簽”和“結(jié)束標(biāo)簽”，開始/結(jié)束標(biāo)簽內(nèi)部的代碼塊就是它的子孫元素。簡單理解的話，H5強(qiáng)調(diào)的“對標(biāo)簽”可以形容成“龍頭鳳尾”。開始標(biāo)簽表現(xiàn)為<標(biāo)簽A>，結(jié)束標(biāo)簽對應(yīng)的</標(biāo)簽A>，如：<body>和</body>

<div>和</div><ul>和</ul>

注意許多標(biāo)簽在代碼中重復(fù)出現(xiàn)許多次，比如<div>標(biāo)簽在一個頁面中動輒出現(xiàn)上百次，我們要判定好哪個</div>標(biāo)簽與之配對，以免“亂點鴛鴦譜”。1.1HTML、CSS概念3知識點

由于HTML結(jié)構(gòu)采用標(biāo)簽包裹標(biāo)簽的結(jié)構(gòu)，像是一個個大盒子去裝若干個中盒子，中盒子里面有裝了多個小盒子，所以我們有時候稱HTML標(biāo)簽為“容器”、“盒子”，也有時候稱“元素”。1.1HTML、CSS概念3知識點提問：CSS為什么稱之為層疊樣式表，怎么理解“層疊”這個字眼？類比思維： 層疊，一層一層疊加作用在對象上。1.1HTML、CSS概念3知識點【案例1】打開資源包根目錄，在瀏覽器中運行“第1章-內(nèi)容與樣式分離的意義.html”，效果如圖1-2所示，頁面中包含了大量尺寸不一的圖片。1.1HTML、CSS概念3知識點“記事本”打開對應(yīng)的HTML文件，在所有<img>標(biāo)簽內(nèi)部“.jpg”的后面添加寬高屬性值，就可以為每張圖片統(tǒng)一尺寸，如圖所示。假如你作為一個職業(yè)人，部門主管要求把該頁面的圖片調(diào)整為統(tǒng)一的200px寬，150px高的尺寸。1.1HTML、CSS概念3知識點部門主管總是追求完美，幾分鐘后，覺得圖片尺寸應(yīng)該改為180px*120px更美觀。當(dāng)你覺得改尺寸不過是幾秒鐘的事情的時候，部門主管又要求你把奇數(shù)圖片的透明度調(diào)低點。1.1HTML、CSS概念3知識點如果采用內(nèi)容與表現(xiàn)分離的思路修改代碼呢？把剛才添加的寬高屬性都刪除，同時在<head>標(biāo)簽內(nèi)部添加<style>標(biāo)簽，敲入如圖所示代碼。1.2網(wǎng)頁制作初學(xué)者上手工具3知識點1.2.1選擇高效的代碼編輯器記憶關(guān)鍵詞：工欲善其事必先利其器關(guān)鍵詞解析：初學(xué)者可以自行百度去了解主流的HTML代碼編輯軟件，選擇有代碼提示功能、安裝簡單、不含廣告、占用硬盤空間小，最關(guān)鍵一點的是“免費”。搜索的關(guān)鍵詞可以為“html編輯器代碼提示免費”?！墩撜Z·衛(wèi)靈公》：“子貢問為仁。子曰：‘工欲善其事，必先利其器。居是邦也，事其大夫之賢者，友其士之仁者?！敝腹そ骋胱龊没顑?，一定先要把工具整治得銳利精良。比喻要做好事情，必須先做好準(zhǔn)備，創(chuàng)造條件。1.2網(wǎng)頁制作初學(xué)者上手工具3知識點HBuilder對于初學(xué)者而言，所考慮的優(yōu)點：多平臺支持：HBuilder支持多平臺開發(fā)，包括iOS、Android、Windows、macOS等。強(qiáng)大的語法提示：擁有自主IDE語法分析引擎，對前端語言提供準(zhǔn)確的代碼提示。輕巧：僅數(shù)十兆的綠色發(fā)行包(不含插件)。極速：不管是啟動速度、大文檔打開速度、編碼提示，都極速響應(yīng)。小程序支持：國外開發(fā)工具沒有對中國的小程序開發(fā)優(yōu)化，HBuilder可新建uni-app或小程序、快應(yīng)用等項目，為國人提供更高效工具。1.2網(wǎng)頁制作初學(xué)者上手工具3知識點1.2.2安裝調(diào)試用的瀏覽器。除了自帶的IE瀏覽器外，也要安裝谷歌瀏覽器、火狐瀏覽器、360瀏覽器，最起碼要安裝谷歌瀏覽器。1.2網(wǎng)頁制作初學(xué)者上手工具3知識點1.2.3善于使用搜索引擎求解問題記憶關(guān)鍵詞：善假于物關(guān)鍵詞解析：學(xué)習(xí)搜索引擎的意義，就好比是給你裝上翅膀，讓你能瞬間飛越千山萬水，直達(dá)知識的彼岸。隨著人工智能技術(shù)的發(fā)展，知識搜索將更加智能化。它是你的老師，幫你揭開一個又一個謎團(tuán)；它是你的朋友，陪你穿梭于古今中外的智慧殿堂；它還是你的顧問，總能為你搭配出最潮、最前沿的學(xué)習(xí)資訊。荀子《勸學(xué)》：“君子生非異也，善假于物也?！鄙萍儆谖铩鉃榫拥馁Y質(zhì)與一般人沒有什么區(qū)別，君子之所以高于一般人，是因為他能善于利用外物。善于利用已有的條件，是君子成功的一個重要途徑。劉備善于用人1.2網(wǎng)頁制作初學(xué)者上手工具4本章練習(xí)1.搜索引擎基本用法以百度搜索引擎用法為例。（1）輸入多個關(guān)鍵詞時,只要詞與詞之間用空格隔開,百度就會默認(rèn)檢索包含所有關(guān)鍵詞的網(wǎng)頁，如圖1-6所示。4本章練習(xí)（2）“減號”可以盡可能屏蔽掉不想看到的關(guān)鍵詞。1.2網(wǎng)頁制作初學(xué)者上手工具1.2網(wǎng)頁制作初學(xué)者上手工具4本章練習(xí)2.百度高級用法詳解選擇百度搜索欄右上角“設(shè)置”菜單下的“高級搜索”。在“高級搜索”對話框參數(shù)中填入對應(yīng)限制條件。1.2網(wǎng)頁制作初學(xué)者上手工具4本章練習(xí)3.善于挑選關(guān)鍵詞。某三年級小學(xué)生，想查一些關(guān)于時間的名人名言，他的查詢詞是“小學(xué)三年級關(guān)于時間的名人名言”。這個查詢詞很完整的體現(xiàn)了搜索者的搜索意圖，但效果并不好。絕大多數(shù)名人名言，并不規(guī)定是針對幾年級的，因此，“小學(xué)三年級”事實上和主題無關(guān)，會使得搜索引擎丟掉大量不含“小學(xué)三年級”，但非常有價值的信息；“關(guān)于”也是一個與名人名言本身沒有關(guān)系的詞，多一個這樣的詞，又會減少很多有價值信息；“時間的名人名言”，其中的“的”也不是一個必要的詞，會對搜索結(jié)果產(chǎn)生干擾；“名人名言”，名言通常就是名人留下來的，在名言前加上名人，是一種不必要的重復(fù)。因此，最好的查詢詞，應(yīng)該是“時間名言”。1.2網(wǎng)頁制作初學(xué)者上手工具4本章練習(xí)4.通過網(wǎng)址的識別，篩選出優(yōu)質(zhì)搜索結(jié)果。如果是用一些熱門的關(guān)鍵詞或者想要下載一些免費的資源的時候，通常搜索結(jié)果中，前三條基本上是廣告鏈接（想當(dāng)年的百度競價搜索排名引發(fā)諸多風(fēng)波），后三條也是廣告鏈接，對于學(xué)生黨而言可以快速跳過這幾行內(nèi)容。1.2網(wǎng)頁制作初學(xué)者上手工具1.3基礎(chǔ)練習(xí)4本章練習(xí)【練習(xí)1】：Hbuilder新建一個基本HTML項目，并將所需圖片放置在img文件夾?！揪毩?xí)2】在D盤創(chuàng)建一個website的文件夾，然后在Hbuilder中打開該目錄，陸續(xù)新建3個空白html文檔。擬定分別為網(wǎng)站的首頁、新聞欄目頁、企業(yè)介紹頁，將這些文檔分別保存為index.html、news.html、about_us.html（或者profile.html）?！揪毩?xí)3】Hbuilder快捷鍵操作實踐。1.3基礎(chǔ)練習(xí)4本章練習(xí)【練習(xí)4】完成下圖紅色區(qū)域效果對應(yīng)的HTML代碼?！揪毩?xí)5】一技工學(xué)校機(jī)電系近期開展校園防火知識宣傳，并號召同學(xué)積極參與活動策劃及PPT制作，某同學(xué)想要搜索與本次防火安全主題有關(guān)的數(shù)據(jù)，在百度搜索引擎，他應(yīng)該用什么關(guān)鍵字搭配才能提高數(shù)據(jù)獲取效率？1.3擴(kuò)展練習(xí)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

提交評論