课 程 教 案2018～2019学年 第1学期 课 程 名 称 Web系统与技术 授 课 对 象 主 讲 教 师 谢从华 系 部 计算机工程系 职 称 职 务 副教授 使 用 教 材 谢从华，高蕴梅，黄晓华.Web系...
引用：谢从华，高蕴梅，黄晓华.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 |
最低0.47元/天 解锁文章
1783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
