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

模块一网页制作基础知识

任务1搭建开发环境

知识准备——搭建开发环境

实战演练——搭建开发环境

搭建开发环境

进阶训练——VScode的基本使用

动手实践——创建简单的网页项目

1.了解网站和网页的有关概念

2.了解浏览器的作用及常见的浏览器

3.掌握网页制作技术及所遵循的标准

4.熟悉VScode的下载和安装

5.掌握VScode的基本使用

搭建开发环境

学习目标：

1.培养学生的知识产权意识和合法合规的职业道德,强调软件正版化意识。

2.培养社会责任感和公民意识，引导参与社区服务或公益项目相关的网页设计，让学生意识到信息技术在促进社会发展、服务公众利益方面的积极作用。

3.提升国际视野与跨文化交流能力，引导终身学习，使其认识到知识和技能的更新换代是个人职业发展和适应社会变化的关键。

搭建开发环境

思政目标：

知识准备--课程引入

1

1991年8月6日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线

第一个网站：http://info.cern.ch/

http://info.cern.ch/hypertext/WWW/TheProject.html

互联网之父

2016年度的图灵奖

蒂姆·伯纳斯·李（TimBerners-Lee）

1

虽然在美国也教育了很多优秀学生，但是却没有真正的满足感。只有在教育中国孩子的时候，他的内心才真正充实起来。因为他知道，自己每多教出一名优秀学生，祖国就能强大一分。

2000年度的图灵奖

姚期智

知识准备--课程引入

2

网站website

互联网上用于展示特定内容的相关网页的集合。

网页webpage

主要由文字、图像和超链接构成，当然还可以包含音频、视频以及动画等。

一个网站当中的网页，是通过超链接的方式被组织在一起的。

知识准备—网站与网页

1

2

网站文件夹

网页文件

网站

网站

网页

样式表文件

图片资源

知识准备—网站与网页

1

2

网页的分类

位置

技术

主页：首页index或default

子页

静态网页照片

动态网页镜子

知识准备—网站与网页

1

2

好的网站建设具备的特点

网站建设流程

整体架构清晰

视觉效果图文并茂

网站主题

资料收集整理

规划网站

选择制作工具

设计制作网页

知识准备—网站与网页

1

3

作用

渲染网页，对网页制作人员编写的网页源代码进行解析，变成文字、图像、视频等内容显示出来，让用户能够浏览欣赏网页。

知识准备—浏览器

1

3

知识准备—浏览器

1

1

结构

样式

行为

HTML

CSS

JavaScript

从语义的角度，描述网页的结构

从美学的角度，美化页面

从交互的角度，提升用户的体验

知识准备—网页制作技术

1

1

结构HTML

样式CSS

行为JavaScript

知识准备—网页制作技术

1

1

最终网页效果

知识准备—网页制作技术

1

1

HTML网页效果

知识准备—网页制作技术

1

1

HTML、CSS网页效果

知识准备—网页制作技术

1

HTML、CSS、JS网页效果

知识准备—网页制作技术

1

1

http://2014./

https://codepen.io/Yakudoo/full/rJjOJx

https://codepen.io/pissang/full/geajpX

https://codepen.io/tsuhre/full/BYbjyg

https://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

2

theWorldWideWebConsortium

万维网联盟

国际最著名的标准化组织

网页标准：Web标准

知识准备—网页制作标准

1

2

官网：

学习网站：

知识准备—网页制作标准

1

实战演练—网页制作工具的选择

2

1

VSCode是VisualStudioCode的简称，是一款免费开源的、现代化轻量级代码编辑器，并针对网页开发和云端应用开发做了优