《HTML5+CSS3網(wǎng)頁制作》課件-模塊一 網(wǎng)頁制作基礎(chǔ)知識

模塊一網(wǎng)頁制作基礎(chǔ)知識任務(wù)1搭建開發(fā)環(huán)境網(wǎng)頁制作CSSHTML知識準(zhǔn)備——搭建開發(fā)環(huán)境實(shí)戰(zhàn)演練——搭建開發(fā)環(huán)境搭建開發(fā)環(huán)境0201進(jìn)階訓(xùn)練——VScode的基本使用03動手實(shí)踐——創(chuàng)建簡單的網(wǎng)頁項(xiàng)目041.了解網(wǎng)站和網(wǎng)頁的有關(guān)概念

2.了解瀏覽器的作用及常見的瀏覽器

3.掌握網(wǎng)頁制作技術(shù)及所遵循的標(biāo)準(zhǔn)

4.熟悉VScode的下載和安裝

5.掌握VScode的基本使用搭建開發(fā)環(huán)境學(xué)習(xí)目標(biāo)：1.培養(yǎng)學(xué)生的知識產(chǎn)權(quán)意識和合法合規(guī)的職業(yè)道德,強(qiáng)調(diào)軟件正版化意識。2.培養(yǎng)社會責(zé)任感和公民意識，引導(dǎo)參與社區(qū)服務(wù)或公益項(xiàng)目相關(guān)的網(wǎng)頁設(shè)計(jì)，讓學(xué)生意識到信息技術(shù)在促進(jìn)社會發(fā)展、服務(wù)公眾利益方面的積極作用。3.提升國際視野與跨文化交流能力，引導(dǎo)終身學(xué)習(xí)，使其認(rèn)識到知識和技能的更新?lián)Q代是個(gè)人職業(yè)發(fā)展和適應(yīng)社會變化的關(guān)鍵。搭建開發(fā)環(huán)境思政目標(biāo)：

知識準(zhǔn)備--課程引入11991年8月6日，世界上第一個(gè)服務(wù)器和第一個(gè)網(wǎng)站在歐洲核子研究中心上線第一個(gè)網(wǎng)站：http://info.cern.ch/http://info.cern.ch/hypertext/WWW/TheProject.html互聯(lián)網(wǎng)之父2016年度的圖靈獎蒂姆·伯納斯·李（TimBerners-Lee）

1

雖然在美國也教育了很多優(yōu)秀學(xué)生，但是卻沒有真正的滿足感。只有在教育中國孩子的時(shí)候，他的內(nèi)心才真正充實(shí)起來。因?yàn)樗?，自己每多教出一名?yōu)秀學(xué)生，祖國就能強(qiáng)大一分。2000年度的圖靈獎姚期智知識準(zhǔn)備--課程引入

2網(wǎng)站website

互聯(lián)網(wǎng)上用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。網(wǎng)頁webpage

主要由文字、圖像和超鏈接構(gòu)成，當(dāng)然還可以包含音頻、視頻以及動畫等。

一個(gè)網(wǎng)站當(dāng)中的網(wǎng)頁，是通過超鏈接的方式被組織在一起的。知識準(zhǔn)備—網(wǎng)站與網(wǎng)頁1

2網(wǎng)站

文件夾網(wǎng)頁文件網(wǎng)站網(wǎng)站網(wǎng)頁樣式表文件圖片資源知識準(zhǔn)備—網(wǎng)站與網(wǎng)頁12網(wǎng)頁的分類位置技術(shù)主頁：首頁index或default子頁靜態(tài)網(wǎng)頁照片動態(tài)網(wǎng)頁鏡子知識準(zhǔn)備—網(wǎng)站與網(wǎng)頁12好的網(wǎng)站建設(shè)具備的特點(diǎn)網(wǎng)站建設(shè)流程整體架構(gòu)清晰視覺效果圖文并茂網(wǎng)站主題資料收集整理規(guī)劃網(wǎng)站選擇制作工具設(shè)計(jì)制作網(wǎng)頁知識準(zhǔn)備—網(wǎng)站與網(wǎng)頁1

3作用

渲染網(wǎng)頁，對網(wǎng)頁制作人員編寫的網(wǎng)頁源代碼進(jìn)行解析，變成文字、圖像、視頻等內(nèi)容顯示出來，讓用戶能夠?yàn)g覽欣賞網(wǎng)頁。知識準(zhǔn)備—瀏覽器1

3知識準(zhǔn)備—瀏覽器1

1結(jié)構(gòu)樣式行為HTMLCSSJavaScript從語義的角度，描述網(wǎng)頁的結(jié)構(gòu)從美學(xué)的角度，美化頁面從交互的角度，提升用戶的體驗(yàn)知識準(zhǔn)備—網(wǎng)頁制作技術(shù)1

1結(jié)構(gòu)HTML樣式CSS行為JavaScript

知識準(zhǔn)備—網(wǎng)頁制作技術(shù)1

1最終網(wǎng)頁效果知識準(zhǔn)備—網(wǎng)頁制作技術(shù)1

1HTML網(wǎng)頁效果知識準(zhǔn)備—網(wǎng)頁制作技術(shù)1

1HTML、CSS網(wǎng)頁效果知識準(zhǔn)備—網(wǎng)頁制作技術(shù)1

HTML、CSS、JS網(wǎng)頁效果知識準(zhǔn)備—網(wǎng)頁制作技術(shù)1

1http://2014./https://codepen.io/Yakudoo/full/rJjOJxhttps://codepen.io/pissang/full/geajpXhttps://codepen.io/tsuhre/full/BYbjyghttps://wangyasai.github.io/Stars-Emmision/https://pissang.github.io/papercut-box-art/https://demo.marpi.pl/biomes/https://pissang.github.io/voxelize-image//examples/index.html#chart-type-globe/Development/AudioVisualizers/（推薦戴耳機(jī)）可參考網(wǎng)站知識準(zhǔn)備—網(wǎng)頁制作技術(shù)1

2theWorldWideWebConsortium萬維網(wǎng)聯(lián)盟國際最著名的標(biāo)準(zhǔn)化組織網(wǎng)頁標(biāo)準(zhǔn)：Web標(biāo)準(zhǔn)知識準(zhǔn)備—網(wǎng)頁制作標(biāo)準(zhǔn)1

2官網(wǎng)：學(xué)習(xí)網(wǎng)站：知識準(zhǔn)備—網(wǎng)頁制作標(biāo)準(zhǔn)1

實(shí)戰(zhàn)演練—網(wǎng)頁制作工具的選擇2

1VSCode是VisualStudioCode的簡稱，是一款免費(fèi)開源的、現(xiàn)代化輕量級代碼編輯器，并針對網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化。軟件跨平臺支持Windows、Macos以及Linux，運(yùn)行流暢。是目前網(wǎng)頁開發(fā)人員選用比較多的工具，我們這門課選取的網(wǎng)頁制作工具就是VScode。實(shí)戰(zhàn)演練—網(wǎng)頁制作工具的選擇2

2實(shí)戰(zhàn)演練—VSCode的下載和安裝2

2實(shí)戰(zhàn)演練—VSCode的下載和安裝2

進(jìn)階訓(xùn)練—認(rèn)識和操作用戶界面3

1進(jìn)階訓(xùn)練—認(rèn)識和操作用戶界面3

1VScode的啟動用戶界面的操作操作演示進(jìn)階訓(xùn)練—認(rèn)識和操作用戶界面3

2

網(wǎng)站是網(wǎng)頁的集合，它本質(zhì)上是一個(gè)文件夾。Vscode里面無法直接創(chuàng)建站點(diǎn)，我們可以采取先創(chuàng)建站點(diǎn)文件夾，然后用在VScode里面打開文件夾的方式，來創(chuàng)建站點(diǎn)。操作演示進(jìn)階訓(xùn)練—創(chuàng)建站點(diǎn)并創(chuàng)建一個(gè)簡單網(wǎng)頁3

3https://devhints.io/emmet/shortcuts/keyboard-shortcuts-windows.pdf進(jìn)階訓(xùn)練—快捷鍵的使用、Emmet的使用3

4直接安裝的VScode是英文版的，怎么換成中文版的？網(wǎng)頁制作完成后，我們需要到站點(diǎn)文件夾中，去預(yù)覽我們的網(wǎng)頁效果，我們卻習(xí)慣通過右鍵進(jìn)行預(yù)覽？在制作網(wǎng)頁時(shí)，想在每次保存時(shí)都能自動格式化我們的代碼？

這些問題可以通過安裝相應(yīng)擴(kuò)展的方法來解決，VScode可以安裝各式各樣的擴(kuò)展，擴(kuò)展的安裝和使用方法基本上是一樣的。操作演示進(jìn)階訓(xùn)練—擴(kuò)展的安裝3

讀者在學(xué)完任務(wù)1后，自己動手實(shí)踐一下VSCode的下載安裝、熟悉其用戶界面、掌握基礎(chǔ)操作，以及熟練運(yùn)用快捷鍵和Emmet功能來