《HTML5+CSS3网页制作》课件-模块一 网页制作基础知识

模块一网页制作基础知识任务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功能来