模塊一網頁制作基礎知識任務1搭建開發環境網頁制作CSSHTML知識準備——搭建開發環境實戰演練——搭建開發環境搭建開發環境0201進階訓練——VScode的基本使用03動手實踐——創建簡單的網頁項目041.了解網站和網頁的有關概念

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

3.掌握網頁制作技術及所遵循的標準

4.熟悉VScode的下載和安裝

5.掌握VScode的基本使用搭建開發環境學習目標：1.培養學生的知識產權意識和合法合規的職業道德,強調軟件正版化意識。2.培養社會責任感和公民意識，引導參與社區服務或公益項目相關的網頁設計，讓學生意識到信息技術在促進社會發展、服務公眾利益方面的積極作用。3.提升國際視野與跨文化交流能力，引導終身學習，使其認識到知識和技能的更新換代是個人職業發展和適應社會變化的關鍵。搭建開發環境思政目標：

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

1

雖然在美國也教育了很多優秀學生，但是卻沒有真正的滿足感。只有在教育中國孩子的時候，他的內心才真正充實起來。因為他知道，自己每多教出一名優秀學生，祖國就能強大一分。2000年度的圖靈獎姚期智知識準備--課程引入

2網站website

互聯網上用于展示特定內容的相關網頁的集合。網頁webpage

主要由文字、圖像和超鏈接構成，當然還可以包含音頻、視頻以及動畫等。

一個網站當中的網頁，是通過超鏈接的方式被組織在一起的。知識準備—網站與網頁1

2網站

文件夾網頁文件網站網站網頁樣式表文件圖片資源知識準備—網站與網頁12網頁的分類位置技術主頁：首頁index或default子頁靜態網頁照片動態網頁鏡子知識準備—網站與網頁12好的網站建設具備的特點網站建設流程整體架構清晰視覺效果圖文并茂網站主題資料收集整理規劃網站選擇制作工具設計制作網頁知識準備—網站與網頁1

3作用

渲染網頁，對網頁制作人員編寫的網頁源代碼進行解析，變成文字、圖像、視頻等內容顯示出來，讓用戶能夠瀏覽欣賞網頁。知識準備—瀏覽器1

3知識準備—瀏覽器1

1結構樣式行為HTMLCSSJavaScript從語義的角度，描述網頁的結構從美學的角度，美化頁面從交互的角度，提升用戶的體驗知識準備—網頁制作技術1

1結構HTML樣式CSS行為JavaScript

知識準備—網頁制作技術1

1最終網頁效果知識準備—網頁制作技術1

1HTML網頁效果知識準備—網頁制作技術1

1HTML、CSS網頁效果知識準備—網頁制作技術1

HTML、CSS、JS網頁效果知識準備—網頁制作技術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/（推薦戴耳機）可參考網站知識準備—網頁制作技術1

2theWorldWideWebConsortium萬維網聯盟國際最著名的標準化組織網頁標準：Web標準知識準備—網頁制作標準1

2官網：學習網站：知識準備—網頁制作標準1

實戰演練—網頁制作工具的選擇2

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

2實戰演練—VSCode的下載和安裝2

2實戰演練—VSCode的下載和安裝2

進階訓練—認識和操作用戶界面3

1進階訓練—認識和操作用戶界面3

1VScode的啟動用戶界面的操作操作演示進階訓練—認識和操作用戶界面3

2

網站是網頁的集合，它本質上是一個文件夾。Vscode里面無法直接創建站點，我們可以采取先創建站點文件夾，然后用在VScode里面打開文件夾的方式，來創建站點。操作演示進階訓練—創建站點并創建一個簡單網頁3

3https://devhints.io/emmet/shortcuts/keyboard-shortcuts-windows.pdf進階訓練—快捷鍵的使用、Emmet的使用3

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

這些問題可以通過安裝相應擴展的方法來解決，VScode可以安裝各式各樣的擴展，擴展的安裝和使用方法基本上是一樣的。操作演示進階訓練—擴展的安裝3

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