logo资料库

Web前端开发教案-上传用.docx

发布时间：2022-06-13 发布人：admin 分类：说明书 资料大小：17.67M 资料格式：docx 举报 版权申诉
第1页 / 共189页
第2页 / 共189页
第3页 / 共189页
第4页 / 共189页
第5页 / 共189页
第6页 / 共189页
第7页 / 共189页
第8页 / 共189页
资料共189页，剩余部分请下载后查看
    【授课题目】第一章 Web开发概述及环境搭建
    1.1 网站与网页概述
    1.3 网页设计工具
    1.4 使用网页三剑客制作网页素材
    【授课题目】第二章 使用HTML标签组织网页内容
    2.1 HTML语言概述
    2.2 简单的HTML标签
    2.3 表格
    【授课题目】第三章 使用CSS样式设置页面外观
    3.1 CSS样式概述
    3.3 CSS样式的建立与使用
    3.4 常用CSS样式属性
    3.5 重新定义HTML元素外观
    3.6 最新样式标准CSS3
    【授课题目】第四章 网站页面布局
    4.1 页面布局概述
    4.2 CSS+Div布局
    4.3 页内框架与框架集
    4.4 综合项目:会员管理信息系统memmanal
    4.5 使用HTML5页面布局标签
    【授课题目】第五章 JavaScript与jQuery
    5.1 JavaScript基础
    5.2 JavaScript内置对象
    5.3 浏览器对象
    5.4 综合项目:会员管理信息系统
    5.5 jQuery
    5.6 jQuery Ajax
    【授课题目】第六章 HTML5新增功能
    6.1 HTML5概述
    6.2 HTML5对表单的新增功能
    6.3 音频与视频
    6.6 HTML5响应式布局与媒体查询
    6.7 HTML5 Web存储
    【授课题目】第七章 Web前端流行框架的使用
    7.1 Web前端框架Bootstrap
    7.2 模块化前端框架LayUI
    7.3 富文本编辑器Baidu UE
    7.4 JS运行时环境Node.js
    7.5 渐进式JS框架—Vue.js
    【授课题目】第一章 Web 开发概述及环境搭建 【授课内容】 1.网站与网页概述； 2.基于 B/S 体系的网站系统； 3.网页设计工具； 4.使用网页三剑客制作网页素材。 【课时安排】 4 课时 【教学目标】 1.理解 Web 应用与传统的桌面应用方式的不同； 2.掌握使用 WampServer 搭建 PHP 网站的方法； 3.掌握浏览器调试的基本方法； 4.掌握 VS Code 和 HBuilder 等网页编辑软件的使用方法； 5.基本掌握使用网站三剑客处理网页素材的方法。 【教学重点】 HBuilder 网页编辑软件的基本使用方法。 【教学难点】 浏览器调试网页代码。 【教学方式】 以课堂讲授为主，学生自主学习为辅。 【教学手段】 多媒体课件，上机操作。 【教学过程】 计算机的应用经历了从桌面应用到 Web 应用的转变。Web 应用使人们超越了时间、地理 位置的限制，能方便地进行各种各样的信息处理，尤其是在手机等移动设备广泛使用的今天。 导入 1.1.1 网站、网页与网址 1.1 网站与网页概述 使用浏览器打开网站里的网页，我们就可以浏览新闻、信息查询和网上购物等。如图 1.1.1 所示。
    1.1.2 网页组成 图 1.1.1 网站的几个典型应用 网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可包括音频、 视频以及 flash 等。 除了首页之外，一个网站通常还包括多个子页面。网页与网页之间通过超链接互相访问。 网页有静态和动态之分。静态网页是指用户无论何时何地访问，网页都会显示固定的信息， 除非网页源代码被重新修改上传。动态网页显示的内容则会随着用户操作和时间的不同而变化， 它包含有只能在 Web 服务器端运行的程序。 1.1.3 资源引用的相对路径和绝对路径 供网页使用的资源文件，可以有图像文件、CSS 样式文件、和音乐文件等。一个网页文件 本身也可能被另一个网页引用。在网站开发中，对文件的引用有相对路径和绝对路径两种方式。 使用相对路径时，可能出现的符号及含义如下： “.”表示当前所在的目录； “..”表示当前目录的上一层目录； “/”表示站点根目录，也作为路径分隔符。 绝对路径是以 Web 站点根目录为参考基础的目录路径。通常情况下，对网络资源的引用 使用绝对路径。绝对路径与当前页面的路径无关，一个使用绝对路径的示例代码如下： 1.1.4 快速创建一个 web 服务器 Web 服务器有多种类型，主要有 Microsoft 推出的 IIS、Apache 推出的 Tomcat 和 WAMP 等 示。 WAMP 服务器软件很小，易于安装和使用。成功启动后，在任务栏上的图标如图 1.1.2 所
    图 1.1.2 WAMP 启动后的图标 右键 WAMP 图标，选择 Exit，即可关闭 WAMP 服务器。单击 WAMP 图标，可以查看到 有打开默认站点、进入站点根目录和进入 MySQL 操作等选项，如图 1.1.3 所示。 图 1.1.3 单击 WAMP 图标时的功能菜单选项 1.1.5 相关名词解释 1.W3C 与 WWW 万维网联盟创建于 1994 年，是 Web 技术领域最具权威和影响力的国际中立性技术标准机 构。到目前为止，W3C 已发布了 200 多项影响深远的 Web 技术标准及实施指南，如广为业界 采用的超文本标记语言 HTML（标准通用标记语言下的一个应用）、可扩展标记语言 XML （标准通用标记语言下的一个子集）以及帮助残障人士有效获得 Web 信息的无障碍指南 （WCAG）等，有效促进了 Web 技术的互相兼容，对互联网技术的发展和应用起到了基础性 和根本性的支撑作用。 WWW 是环球信息网的缩写，（亦作“Web”、“WWW”、“'W3'”，英文全称为“World Wide Web”），中文名字为“万维网”，"环球网"等，常简称为 Web。 分为 Web 客户端和 Web 服务器 程序。 WWW 可以让 Web 客户端（常用浏览器）访问浏览 Web 服务器上的页面。 是一个由 许多互相链接的超文本组成的系统，通过互联网访问。在这个系统中，每个有用的事物，称为
    一样“资源”；并且由一个全局“统一资源标识符”（URI）标识；这些资源通过超文本传输协议 （Hypertext Transfer Protocol）传送给用户，而后者通过点击链接来获得资源。 2.HTTP 协议和 URL HTTP 是一个简单的请求-响应协议，它通常运行在 TCP 之上。它指定了客户端可能发送 给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以 ASCII 码形式给出；而 消息内容则具有一个类似 MIME 的格式。这个简单模型是早期 Web 成功的有功之臣，因为它 使得开发和部署是那么的直截了当。 url 是统一资源定位符，对可以从互联网上得到的资源的位置和访问方法的一种简洁的表 示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息 指出文件的位置以及浏览器应该怎么处理它。url 是网民们在 Internet 知识海洋中寻找资源、获 取信息、用 E- mail 通讯、网上交流等所必不可少的。 3.Web 标准 WEB 标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构 （Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标 准语言主要包括 XHTML 和 XML，表现标准语言主要包括 CSS，行为标准主要包括对象模型 （如 W3C DOM）、ECMAScript 等。这些标准大部分由万维网联盟（外语缩写：W3C）起草 和发布，也有一些是其他标准组织制订的标准，比如 ECMA（European Computer Manufacturers Association）的 ECMAScript 标准。 1.2 基于 B/S 体系的网站系统 1.2.1 Web 服务器与数据库服务器 不管什么 Web 服务器，想被远程计算机访问，都必须有一个与之对应的网络通信程序， 当用户来访问时，这个网络通信程序读取 web 资源数据，并把数据发送给来访者。Web 服务 器就是这样一个程序，它用于完成底层网络通信，处理 HTTP 协议。 访问网站最总是对网页的访问。通过访问的网页，人们能够查询所需要的信息。也能提交 信息并将其保存在数据库服务器里。 1.2.2 动态网页的执行过程 所谓的动态网页，是指跟静态网页相对的一种网页编程技术。静态网页，随着 html 代码 的生成，页面的内容和显示效果就基本上不会发生变化了--除非你修改页面代码。而动态网页 则不然，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结 果而发生改变的。 值得强调的是，不要将动态网页和页面内容是否有动感混为一谈。这里说的动态网页，与 网页上的各种动画、滚动字幕等视觉上的动态效果没有直接关系，动态网页也可以是纯文字内
    容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有 动态效果，只要是采用了动态网站技术生成的网页都可以称为动态网页。 总之，动态网页是基本的 html 语法规范与 Java、VB、VC 等高级程序设计语言、数据库 编程等多种技术的融合，以期实现对网站内容和风格的高效、动态和交互式的管理。因此，从 这个意义上来讲，凡是结合了 HTML 以外的高级程序设计语言和数据库技术进行的网页编程 技术生成的网页都是动态网页。 B 系 Browser，表示浏览器客户端；S 系 Server，表示 Web 服务器端。 通常情况下，存在客户端浏览器、Web 服务器和数据库服务器之间的信息流动。 访问网站里的 PHP 页面（属于动态页面）时，使用客户端浏览器的“查看”菜单查看到的 是经过 PHP 解析后生成的 HTML 代码，而无法查看到源文件中的程序代码。 如果客户端请求服务端的静态页面，则直接发送给客户端。 浏览器除了发送用户请求外，主要是解析 HTML 文档而呈现页面 图 1.2.2 PHP 动态网页的执行过程 1.2.3 应用层协议 HTTP 与 HTTPS HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答 的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器 更加高效，使网络传输减少。 HTTPS：是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。 HTTP 协议传输的数据都是未加密的，也就是明文的，因此使用 HTTP 协议传输隐私信息 非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了 SSL（Secure Sockets Layer）协议用于对 HTTP 协议传输的数据进行加密，从而就诞生了 HTTPS。简单来说，
    HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，要比 http 协 议安全。 HTTPS 和 HTTP 的区别主要如下： 1、https 协议需要到 ca 申请证书，一般免费证书较少，因而需要一定费用。 2、http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协 3、http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者 议。 是 443。 4、http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行 加密传输、身份认证的网络协议，比 http 协议安全。 1.2.4 Web 客户端与浏览器内核 在 B/S 模式中，客户端使用被称为浏览器的应用程序，用于在地址栏向 Web 发出 HTTP 请求，也用于解析 Web 服务器响应信息的渲染而呈现页面。 浏览器的核心部分是渲染引擎（Rendering Engine），它负责对网页语法的解释并渲染 （显示）网页。 因此，同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。 Trident 内核程序在 1997 年的 IE 4 中首次被采用，是微软在 Mosaic 代码的基础之上修改而 来的，并沿用到 IE11。 Webkit 是苹果公司的内核，也是苹果的 Safari 浏览器使用的内核。Google Chrome、360 极 速浏览器也使用 Webkit 作为内核(在脚本理解方面，Chrome 使用自己研发的 V8 引擎)。 360 浏览器使用双核，用户可以根据需要进行切换。 图 1.2.4 360 安全浏览器的两种使用模式 1.2.5 浏览器调试程序 打开浏览器，访问作者教学网站 http://www.wustwzx.com; 按功能键 F12，进入浏览器调试 模式。 (1)查看和分析页面元素（标签及 CSS 样式），并可测试 CSS 样式效果。 (2)选择“Network”选项，可以查看图像文件、CSS 样式文件（详见第 3 章）。 (3)查看 JavaScript 文件（详见第 5 章）等是否加载成功。
    (4)查看 JavaScript 脚本实现的浏览器 Console 控制台输出 图 1.2.5 使用浏览器调试模式的一个界面 1.2.6 Cookie 信息与浏览器缓存 访问网站时，Web 服务器可能在客户端硬盘里写一些已经加密处理了的非常小的文本 文件，用来记录你的用户 ID、密码、浏览过的网页、停留时间等信息，称这些信息为 Cookie 信息。 设计网页时，会进行频繁的修改和浏览测试。如果修改后浏览时，页面没有更新，就 要考虑清理浏览器缓存了。 目前的浏览器，都提供了清理浏览器缓存的功能。例如，Google 浏览器清理浏览器缓 存数据的方法是：进入浏览器设置→高级→清理浏览数据。360 浏览器，其工具菜单提供 了清理上网痕迹选项。 本地开发修改了代码时，若按 F5 刷新未成功，则尝试强制刷新（按 Ctrl+F5）。当强 制刷新操作不成功时，才使用清理上网痕迹。 1.3 网页设计工具 1.3.1 高效的网页编辑器 VS Code Microsoft 在 2015 年 4 月 30 日 Build 开发者大会上正式宣布了 Visual Studio Code（以 下简称 VS Code） 项目：一个运行于 Mac OS X、Windows 和 Linux 之上的，针对于编写 现代 Web 和云应用的跨平台源代码编辑器。
    VS Code 集成了所有一款现代编辑器所应该具备的特性，包括语法高亮（syntax high lighting），可定制的热键绑定（customizable keyboard bindings），括号匹配（bracket matching）以及代码片段收集（snippets）。 图 1.3.1 使用 VS Code 创建一个 HTML 文档 单击左边的扩展工具 ，在搜索文本框里输入“vscode browser sync”，单击相应的插件 名称即可在线安装。 在编辑状态下，按 Ctrl+P，出现操作对话框。 在对话框里输入“>”，选择“Browser Sync：Server mode at side panel”，出现路径选择 对话框。 在对话框里输入“\”并回车，出现页面的同步浏览窗口。
    分享到：
    赞 收藏

    相关推荐

    资料库

    课程资源

    共收录17145份资料，累计13个分类，关注成员有19位，主要包括：PHP,网络管理,网页制作,Java,.Net,数据库,3G/移动开发,C/C++,游戏开发,嵌入式,讲义,软件测试,专业指导

    热门标签

    PHP 网络管理 网页制作 Java .Net 数据库 3G/移动开发 C/C++ 游戏开发 嵌入式 讲义 软件测试 专业指导

    最新资料