《Web系统与技术》课程教案第1部分_《web系统与技术》课程实验指导-优快云博客

本文链接：https://blog.youkuaiyun.com/caterpillarxie/article/details/80400361

这是一份关于《Web系统与技术》课程的教案，由谢从华、高蕴梅、黄晓华编著，清华大学出版社于2018年出版。教案覆盖了第1至6周的教学内容，详细规划了每周的课程，适合计算机工程系的学生学习，由谢从华副教授主讲。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引用：谢从华，高蕴梅，黄晓华.Web系统与技术[M].清华大学出版社，2018年5月
系列：面向“工程教育认证”计算机系列课程规划教材
书名：Web系统与技术
作者：谢从华高蕴梅黄晓华编著
ISBN 978-7-302-49594-9
定价：69.00元
出版社：清华大学出版社
出版日期：2018年５月

课　程　教　案

2018～2019学年第1学期

课程名称 Web系统与技术 　

授课对象

主讲教师谢从华　

系部计算机工程系

职称职务副教授

使用教材谢从华，高蕴梅，黄晓华.Web系统与技术

清华大学出版社，2018

2018年　5月　22日

课程教案（1）

第 1 周　星期　第　　节　年月日

授课章节	第1章 Web系统与技术的基础知识 1.1 Internet介绍 1.2 Web浏览器 1.3 Web服务器 1.4系统的主要技术概述
教学目的	1了解Internet相关的概念，以及Web系统的相关技术HTML、 JavaScript、 XML、PHP和Ajax； 2 熟悉Web浏览器和服务器的工作原理。
教学重点	Internet相关的概念。
教学难点	理解Web浏览器和服务器的工作原理。
教学方式	讲授 (ppt)
课程设计	（1）课程导入: 介绍《Web系统与技术》在课程体系的位置，各大人才招聘网站的人才需求,让学生初步了解本课程地位、作用，本课程应该学什么内容，以及如何学好本课程。（2）介绍Internet、Web浏览器和Web服务器。介绍Internet的发展历史，Web1.0,Web2.0 和Web3.0的特点。讲授关于Web的常见名词解释：TCP/IP协议、IP地址、域名、URL、MIME、HTTP和HTTPS协议。比较分析常用Web浏览器Internet Explorer(IE浏览器)、Google Chrome(谷歌浏览器)、Mozilla Firefox(火狐浏览器)等的特点和问题。比较和分析常见的两个Web服务器： Apache服务器和IIS服务器的架构、网站、应用程序、虚拟目录、应用程序池和进程（3）互动环节。和学生一起归纳总结Internet、Web浏览器和Web服务器特点。（4）讲授Web的常用技术及其典型应用案例。 HTML 概述： XHTML 1.1、XHTML 1.0或者HTML 4.01、HTML5的网页区别。 JavaScript概述，客户端脚本语言的作用和发展历程。 XML概述： XML、SGML和HTML的区别。 PHP概述：语言特点、应用范围。 Ajax概述，产生背景、主要技术和作用。 (5) 互动环节。和学生一起归纳总结HTML、 JavaScript、 XML、PHP和Ajax的主要特点。
参考资源	教材第1章
作业	1 简单分析Web1.0、Web2.0、Web3.0的特点。 2 分析URL：http://localhost：8080/readnews.aspx?newsid=123的含义。 3 请说明Web系统的HTTPS和HTTP协议的区别。

课程教案（2）

第 2 周　星期　第　　节　年月日

授课章节	第2章 HTML网页设计基础 2.1 HTML 网页 2.1.1 简介 2.1.2 HTML文件结构 2.1.3 文件编辑器 2.2 HTML基本标签 2.2.1 元信息标签<Meta> 2.2.2 文本标签 2.2.3 列表标签 2.2.4 表格标签
教学目的	1．掌握 HTML文件基本结构，文本和格式标记，超链接标记和表格标记。 2．熟悉 HTML的集成开发环境。 3．了解 HTML的发展历史。
教学重点	运用HTML 各种标记元素及其属性解决网页设计问题。
教学难点	列表和表格的数据和格式读取和设置。
教学方式	讲授 (ppt)
课程设计	（1）课程导入: 展示几个HTML页面,让学生对要学习的内容有个认识,了解到所学内容的作用。（2）讲述 HTML的发展过程、 HTML文件结构、 HTML文件编辑器和HTML基本标签。介绍<meta>标签generator（编辑工具）author（作者）、CopyRight（版权）、robots（机器人向导)、 CopyRight（版权）、http-equiv属性包括content-type（显示字符集的设定）、expires（期限）、refresh（刷新）、Pragma(Cache模式)、X-UA-Compatible（ IE浏览器兼容模式）等参数值，实现不同的网页功能。介绍文本标签：标题文字标签<h1>~<h6>，文字格式标签<font>，段落标签<p>，水平线标签<hr>，换行标签<br>，空格，特殊字符等属性、参数值，实现不同的网页功能。介绍定义列表、无序列表、有序列表的Html语法。介绍插入表格、设置表格标题 <caption>、设置表格表头 <th>、插入行 <tr>、插入单元格数据<td>、设置划分结构表格<thead><tbody><tfoot>的Html语法。（3）结合实例演示，分析各类标签的使用方法。【例2.1】用VS 2013创建一个HTML文档。第1步，用VS2013新建一个空网站HTMLWebsites项目。第2步，添加新项HTML文件，命名为Ex2-1.HTML，设置为起始页，添加代码： <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org /TR/ HTML4/loose.dtd”> <HTML> <!-- 这是一个HTML文档基本标记演示--> <head> <Meta http-equiv=“Content-Type” content=“text/HTML; charset=gb2312”> <title>HTML文档基本标记演示</title> </head> <body> 这是一个HTML文档基本标记演示效果! </body> </HTML> 第3步，运行程序。【例2.2】列表实例。 <html> <body> <h4>数字列表：</h4> <ol> <li>苹果</li> <li>香蕉</li> </ol> <h4>字母列表：</h4> <ol type="A"> <li>苹果</li> <li>香蕉</li> </ol> <h4>小写字母列表：</h4> <ol type="a"> <li>苹果</li> <li>香蕉</li> </ol> <h4>罗马字母列表：</h4> <ol type="I"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>小写罗马字母列表：</h4> <ol type="i"> <li>苹果</li> <li>香蕉</li> </ol> </body> </html> 【例2.3】关于跨行和跨列的表格例子 <table border="1"> <tr><td colspan=3"">关于跨行和跨列的例子</tr> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100.00</td> <td rowspan="2">$50</td> </tr> <tr> <td>February</td> <td>$10.00</td> </tr> <tr> <td>February</td> <td>$10.00</td> </tr> </table> （4）互动环节。和学生一起归纳总结标签<meta>、文本标签、列表标签和表格标签的功能和特点。
参考资源	教材第2章
作业
教学后记

课程教案（3）

第 3 周　星期　第　　节　年月日

授课章节	第2章 HTML网页设计基础 2.2.5 超级链接标签 2.2.6 图像标签 2.2.7 背景声音标签 2.2.8 视频标签 2.3 网页表单和控件 2.3.1 表单标签<form> 2.3.2 表单的控件 2.3.3 获取表单数据 2.4 框架标签 2.4.1 帧标记<frame> 2.4.2 IFRAME标记
教学目的	1．掌握 HTML的超级链接标签、图像标签、背景声音标签、视频标签。 2．熟悉HTML的网页表单和控件。 3．了解 HTML的框架标签。
教学重点	运用HTML 各种标记元素及其属性解决网页设计问题。
教学难点	表单数据的保存、传送和提取。
教学方式	讲授 (ppt)
课程设计	（1）课程导入: 回顾上节课程的<meta>标签、文本标签、列表标签和表格标签等主要内容。（2）讲述文本链接、图像链接、脚本链接、空链接、图像<img>标签、背景声音BGSound标签、音频和视频文件<embed>标签的语法和使用步骤。表单(form)数据的收集，使用语法，区别post和get方法。表单的text、password、radio、checkbox、button、submit、reset、image、hidden、file、文本区域<Textarea >、下拉菜单<Select [Multiple]>控件使用方法。表单数据提取的三种方法的区别： Request.Form.Get(“username”); Request.QueryString(“username”); Request[“username”]。帧标记<frame>和浮动帧标记<Iframe>的语法和使用技巧。（3）结合实例演示，分析各类标签的使用方法。【例2.9】表单使用实例。第1步，在HTMLWebsites项目中添加新项HTML文件，命名为Ex2-9.HTML，设置为起始页，添加代码： <!DOCTYPEHTML> <HTMLxmlns=“http://www.w3.org/1999/xHTML”> <head> <Metahttp-equiv=“Content-Type”content=“text/HTML; charset=utf-8”/> <title></title> </head> <body> <form action=“form _action.asp”method=“post”target=““> 用户名：<inputtype=“text”name=“user”/><br/> 密码： <inputtype=“password”name=“password”/><br/> <inputtype=“submit”value=“确定”/> </form > </body> </HTML> 第2步，运行程序。【例2.11】文件上传的例子。第1步，在HTMLWebsites项目中添加新项HTML文件，命名为Ex2-11.HTML，设置为起始页，添加代码： <HTML> <Head> <Title>文件域示例</Title> </Head> <Body> <Form Action=“GetCourse.asp” Method=“post” enctype=“multipart/form -data”> <Table Align=center BgColor=#D6D3CE Width=368> <Tr> <Th ColSpan=2 BgColor=#00034EF> <Font Color=#FFFFFF>文件域</Font> </Th> </Tr> <Tr> <Td Height=52 Align=right>请选择文件：</Td> <Td Height=52><Input Type=file Name=F1 Size=16></Td> </Tr > <Tr Align=center> <Td Height=52 Align=right><Input Type=submit Value=提交 Name=btnSubmit></Td> <Td Height=52><Input Type=reset Value=全部重写 Name=btnReset></Td> </Tr> </Table> </Form > </Body> </HTML> 第2步，运行程序。【例2.13】表单数据提交和提取例子。第1步，在HTMLWebsites项目中添加新项HTML文件，命名为Ex2-13.HTML，设置为起始页，添加代码： <!DOCTYPEHTML> <HTMLxmlns=“http://www.w3.org/1999/xHTML”> <head> <Metahttp-equiv=“Content-Type