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