Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务1-搭建开发环境课件

任务1搭建开发环境第一单元 Web基础知识任务1搭建开发环境第一单元 Web基础知识1网页文件的创建和保存Web的工作原理网页开发环境的搭建站点的创建和管理掌握学习目标网页文件的创建和保存Web的工作原理网页开发环境的搭建站点的2Web的类型了解:学习目标Web的类型了解:学习目标3实战演练——搭建开发环境强化训练——创建第一个HTML5页面任务目标实战演练——搭建开发环境强化训练——创建第一个HTML5页面41.什么是Internet？什么是Web？Internet：是一个全球性的计算机互联网络，又称“因特网”、“互联网”，它是世界上规模最大的计算机网络。Web：是用户登录Internet后最常用的功能。Web页又称网页，一般都包含图像、文字和超链接等元素。知识准备1.什么是Internet？什么是Web？Internet5服务器（Server）：监听客户端连接请求、接收请求，返回响应内容通信协议（Http）：超文本传输协议，定义Web服务器和客户端的通讯细节工作模式：浏览器/服务器（B/S）2.Web的工作原理浏览器（Browser）：客户端用于访问网页的主要软件知识准备服务器（Server）：监听客户端连接请求、接收请求，返回响62.Web的工作原理Web服务器知识准备2.Web的工作原理Web服务器知识准备7静态网页：标准的HTML文件，采用HTML（超本文标记语言）编写，通过HTTP（超文本传输协议）在服务器端和客户端之间传输的纯文本文件，扩展名为.html或.htm。知识准备3.Web的类型按技术分：静态网页：标准的HTML文件，采用HTML83.Web的类型动态网页：指网页文件里包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务。动态网页能够根据不同时间和不同访问者而显示不同内容，可由ASP、PHP、JSP等技术编写。按技术分：知识准备3.Web的类型动态网页：指网页文件里包93.Web的类型主页（HomePage）：访问网站时看到的第一页，即首页。主页的名称是特定的，一般为index.html、default.html、default.aspx或index.aspx等。按网页在网站中的位置分：内页（WebPage）：指与主页相链接的其他页面，即网站内部的页面。知识准备3.Web的类型主页（HomePage）：访问网站时看到10HTML5：超文本标记语言（HyperTextMarkupLanguage）的第5代版本优势：标准化，解决了跨浏览器问题，具备良好的跨平台性能4.HTML5概述知识准备HTML5：超文本标记语言（HyperTextMarkup11案例描述：1.安装网页编辑软件2.安装浏览器搭建开发环境实战演练案例描述：1.安装网页编辑软件2.安装浏12案例描述：1.创建和管理站点2.创建和保存HTML5文档创建第一个HTML5页面强化训练案例描述：1.创建和管理站点2.创建和1301Web的工作原理02网页开发环境的搭建03站点的创建和管理04网页文件的创建和保存任务小结01Web的工作原理02网页开发环境的搭建03站点的创建和管14用记事本软件编写并保存以下代码，将其后缀名“.txt”改为“.html”，用谷歌浏览器浏览网页效果。课后实训用记事本软件编写并保存以下代码，将其后缀名“15谢谢观看谢谢观看16任务1搭建开发环境第一单元 Web基础知识任务1搭建开发环境第一单元 Web基础知识17网页文件的创建和保存Web的工作原理网页开发环境的搭建站点的创建和管理掌握学习目标网页文件的创建和保存Web的工作原理网页开发环境的搭建站点的18Web的类型了解:学习目标Web的类型了解:学习目标19实战演练——搭建开发环境强化训练——创建第一个HTML5页面任务目标实战演练——搭建开发环境强化训练——创建第一个HTML5页面201.什么是Internet？什么是Web？Internet：是一个全球性的计算机互联网络，又称“因特网”、“互联网”，它是世界上规模最大的计算机网络。Web：是用户登录Internet后最常用的功能。Web页又称网页，一般都包含图像、文字和超链接等元素。知识准备1.什么是Internet？什么是Web？Internet21服务器（Server）：监听客户端连接请求、接收请求，返回响应内容通信协议（Http）：超文本传输协议，定义Web服务器和客户端的通讯细节工作模式：浏览器/服务器（B/S）2.Web的工作原理浏览器（Browser）：客户端用于访问网页的主要软件知识准备服务器（Server）：监听客户端连接请求、接收请求，返回响222.Web的工作原理Web服务器知识准备2.Web的工作原理Web服务器知识准备23静态网页：标准的HTML文件，采用HTML（超本文标记语言）编写，通过HTTP（超文本传输协议）在服务器端和客户端之间传输的纯文本文件，扩展名为.html或.htm。知识准备3.Web的类型按技术分：静态网页：标准的HTML文件，采用HTML243.Web的类型动态网页：指网页文件里包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务。动态网页能够根据不同时间和不同访问者而显示不同内容，可由ASP、PHP、JSP等技术编写。按技术分：知识准备3.Web的类型动态网页：指网页文件里包253.Web的类型主页（HomePage）：访问网站时看到的第一页，即首页。主页的名称是特定的，一般为index.html、default.html、default.aspx或index.aspx等。按网页在网站中的位置分：内页（WebPage）：指与主页相链接的其他页面，即网站内部的页面。知识准备3.Web的类型主页（HomePage）：访问网站时看到26HTML5：超文本标记语言（HyperTextMarkupLanguage）的第5代版本优势：标准化，解决了跨浏览器问题，具备良好的跨平台性能4.HTML5概述知识准备HTML5：超文本标记语言（HyperTextMarkup27案例描述：1.安装网页编辑软件2.安装浏览器搭建开发环境实战演练案例描述：1.安装网页编辑软件2.安装浏28案例描述：1.创建和管理站点2.创建和保存HTML5文档创建第一个HTML5页面强化训练案例描述：1.创建和管理站点2.创建和2901Web的工作原理02网页开发环境的搭建03站点