《网页设计与制作》教案.doc

_网页设计与制作教案课程名称网页设计与制作课程类型使用教材教材名称：网页设计与制作实用教程 主编：刘艳丽出版社：高等教育出版社 日期：2011年5月学时分配共64学时，其中理论36学时，实践28学时。课程教学目的与要求该课程是三年制高职高专电子商务专业的职能课程，目标是让学生掌握网页设计的基本概念，学会使用常用的网页设计工具和相关网页美工软件，能够设计制作常见的静态网页。它要以计算机基础、计算机网络技术课程的学习为基础，也是进一步学习网络编辑、网站建设与管理课程的基础。主要参考书目赵喜清，崔海涛网页设计与制作哈尔滨工业大学出版社，2010.9孙振业网页设计与制作高等教育出版社，2009.3课程教案（:1）授课内容网页制作基础知识课 型R理论 实践授课学时2教学方法与手段讲授法教学目的与要求本次课程将讲授网页制作的基本知识，使学生了解到什么是网页，网页制作涉及到哪些工具、网页与网站有什么区别，网页与普通的文档有什么区别等。通过讲授也将使学生了解到网页的组成，网页语言的种类及各自特点；动态网页与静态网页的定义；Internet信息发布的原理等等内容。教学重点与难点教学重点：1 Internet信息访问原理。2 什么是网页？（1） 网页内容组成；（2） 网页编写语言种类及特点。3 Dreamweaver8功能简介。教学难点：Internet信息访问原理；网页编写语言种类及特点。教学过程设计一、 基础知识1 网页简介（15分钟左右）网页：是组成WWW（World Wide Web：万维网）的基本元素，也被称为页面或Web页。不同的网页通过超链接联系在一起，构成了WWW纵横交织结构。网站：就是一个相互链接的网页的集合，它们可以共享。大的网站页面数量多达几十万，甚至上百万页，小的个人网站也可以只包含数个页面。主页：是网站中的一个特殊网页，它是在WWW上进入网站的第一个网页，其中包含指向其他网页的超链接，通常主页的名称是固定的。2 Internet简介（5分钟左右）3 了解常用的网页制作工具（10分钟左右） 如：Dreamweaver和FrontPage4 了解美化网页的主要工具（10分钟左右）（1）图像处理软件：Photoshop、Fireworks、CorelDRAW等（2）动画制作工具：Flash5 了解网页中的脚本语言（10分钟左右）如：VBScript、JavaScript6 了解服务器端主要技术（10分钟左右）服务器端脚本语言：ASP、JSP、PHP、CGI等。它们的形式与HTML有些类似，但功能更加强大，能够实现许多功能。二、了解建立网站的基本流程（10分钟左右）1 确定网站主题2 搜集资料3 规划网站4 选择合适的制作工具5 制作网页6 上传测试7 推广宣传8 维护更新三、Dreamweaver CS3基础（20分钟左右）1 Dreamweaver的发展史2 Dreamweaver CS3的新功能3 Dreamweaver CS3工作区简介4 网页文档的基本操作作业/思考题：1 列举你所了解的网页设计的常用工具和美化网页的主要工具2 建立网站的基本流程有哪些步骤？请归纳总结。3 利用网上资源，在百度中搜索“网页配色方案”关键词，下载相关的“网页配色方案”文件，指导以后网页设计中的配色问题。教学后记：第一节课，应首先介绍网站发展的前景，重点分解Dreamweaver和其他软件的区别，提出利用网络传播信息，并由此讲述网络发展给网页带来的市场。通过两节课的讲授，感觉到学生能对本课程产生比较大的兴趣！-可编辑修改-课程教案（:2）授课内容站点的创建与管理课 型R理论 实践授课学时2教学方法与手段讲授法教学目的与要求本次课程将讲授网站站点的创建与管理知识，使学生了解到什么是站点，站点的种类，站点的作用，站点文件的管理。站点的发布及网页的预览。教学重点与难点教学重点：1 站点的创建；2 站点文件的管理；3 站点文件的预览；4 站点地图的生成。教学难点：测试利用服务器技术的站点；站点地图创建的条件；远程站点的创建。教学过程设计一、 站点（10分钟左右）也称“网站”，用来定位网站上的所有文件，是一系列通过超链接而相互联系的网页集合。建立网站首先要在本地计算机上构建本地站点来管理站点中的文档，制作网页，测试完毕后，上传到Internet服务器。二、 新建本地站点（20分钟左右）1 站点菜单-新建站点2 站点菜单-管理站点-新建3 建立站点注意问题：（1） 用文件夹进行分类存储：如网页文件存放在html文件夹中，图像文件存放在images文件夹中。嵌套文件夹的层数不要太多，最多不超过三层，否则超链接时会出错。（2） 文件命名要合理：建议全部使用小写的文件名称，不要用中文文件名。文件夹的名称最好用顾名思义的英文，方便以后修改维护。文件名也要符合规范，比如首页一般命名为index.html或default.html。三、 网站文件的管理（20分钟左右）1 文件的创建(鼠标右击站点-新建文件；文件菜单-新建；ctrl+N)；2 文件的选择(鼠标点击单选；按ctrl或shift键辅助多选)；3 打开和编辑文件(双击)；4 删除文件；5 重命名文件(右击文件；F2)；6 保存及另存为文件：ctrl+s/f12；或通过文件菜单；7 文件的复制，移动，关闭：ctrl+c.ctrl+x，ctrl+w；8 消除文件只读属性：右击文件选择；9 将文件设为首页：和制作站点地图有关；10 给文件添加设计备注：备注文件的存放位置和文件的扩展名。四、 页面预览(F12键)（20分钟左右）1 文件菜单-在浏览器中预览-选择浏览器2 工具栏-地球土标-选择浏览器：此时可通过”添加浏览器”选项来增加更多的浏览器3 编辑菜单-首选参数-在浏览器中预览-不选”使用临时文件预览”五、 站点的编辑和管理（20分钟左右）1 站点管理器：文件面板(窗口菜单或F8键)2 打开现有本地站点3 查看本地和远程网站的文件和地图4 调整窗口视图5 保存站点地图6 重建站点缓存7 站点编辑，复制，删除，导入与导出：站点菜单-管理站点作业/思考题：1 在制作网页前为什么要首先建立站点？2 定义本地站点的含义是什么？3 建立站点应该注意的问题？教学后记：网站的站点，好似一个班级，应该首先为班级起一个名称，并配备一个班主任，然后再陆续的加入一些学生。这其实就是我们站点创建时应该为站点起一个名字，并设置一个首页，增加更多的超链接。课程教案（:3）授课内容了解Dreamweaver的界面及站点的建立课 型理论 R实践授课学时2教学方法与手段讲授法、演示法教学目的与要求利用Dreamweaver CS3熟练创建本地. 远程站点。并掌握Dreamweaver的基本操作。教学重点与难点教学重点：1 站点的创建；2 站点文件的管理；3 站点文件的预览；4 站点地图的生成。教学难点：站点地图创建的条件；远程站点的创建。教学过程设计1. 本地站点的创建（1） 运行软件（2） 站点菜单-新建站点（3） 远程服务器连接选择为无2. 远程站点的创建（1） 运行软件（2） 站点菜单-新建站点（3） 远程服务器连接选择为FTP3. IIS的安装（1） 我的电脑-控制面板-添加和删除程序（2） 选择添加windows组件（3） 勾选Internet信息服务，更新安装4. 创建利用服务器技术的站点（1） 运行软件（2） 站点菜单-新建站点（3） 是否利用服务器技术设置为是（4） 允许IIS，将默认站点的主目录设置为站点所对应的文件夹（5） 设置服务器站点的测试服务器为http：/localhost5. 站点文件的管理站点文件的创建. 编辑及预览6. 管理站点（1） 站点菜单-新建站点（2） 实现对站点创建. 删除. 编辑（3） 导出并重新导入站点作业/思考题：1 在制作网页前为什么要首先建立站点？2 定义本地站点的含义是什么？3 建立站点应该注意的问题？教学后记： 通过本次实训，让学生系统的掌握站点的创建及管理，了解各类站点的创建过程，并能正确的导出和导入站点文件。课程教案（:4）授课内容HTML语言简介课 型R理论 实践授课学时2教学方法与手段讲授法教学目的与要求1 了解HTML语言，重点掌握HTML文件的基本结构和语法格式；2 掌握标记语言的用法；3 熟记标记、标记及常用属性代码。教学重点与难点教学重点：1 HTML文件的基本结构；2 HTML语法格式；教学难点：设置网页标题；设置网页关键字；制作滚动文字。教学过程设计一、 HTML简介（5分钟左右）HTML：(HyperText Markup Language)是一种超文本标记语言，是网页制作的基本语言。即通过将特定的标记放置在文本或图片或URL前后，来达到使该段文本或图片或URL以指定方式显示的目的。二、 HTML文件的基本结构（10分钟左右）网页的标题网页的主体内容三、 HTML语法格式（20分钟左右）1 HTML标记一般格式对象说明：标记除了上述格式，还有单标记，如下面的标记；属性书写不分先后顺序；属性值用英文双撇号括住。2 HTML语法规则HTML文件以纯文本格式形式存放，扩展名为“*. html”或“*. htm”。HTML标记不区分大小写。多数HTML标记可以嵌套，但不可以交叉。HTML源文件中的换行、回车符和多个连续空格在显示效果中无效。只有在设计视图中才有用。在HTML源文件中，为换行标记；为换段标记；空格用  表示。四、 HTML标记举例（55分钟左右）1 设置网页标题：标记2 元信息标记：标记标记的信息只显示在源代码中，浏览器中没有显示，通过设置标记的不同属性，可以定义页面中各种元数据，如页面的名称、关键词等多种信息。3 制作滚动文字：标记属性：1 direction 表示滚动的方向，值可以是left、right、up、down，默认为left。2 behavior 表示滚动的方式，值可以是scroll（连续滚动）、slide（滑动一次）、alternate（来回滚动）。3 Loop表示循环的次数，值是正整数，默认为无线循环。4 Scrollamount 表示运动速度，值是正整数，默认为6。5 Scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒。6 Align表示元素的垂直对齐方式，值可以是top、bottom、middle。7 Height、width表示运动区域的高度和宽度，值是正整数或百分比，默认width=100%，height为标签内元素的高度。事件：onMouseOver=this.stop()和onMouseOut=this.start()，表示当鼠标浮到以上区域的时候滚动停止和当鼠标移开的时候又继续滚动。作业/思考题：1 关键字之间以英文逗号分隔。关键词输入不是越多越好，因为大多数搜索引擎限制关键字的数量，所以设置关键字要精简才会被搜中率高。2 什么是HTML？HTML文件的基本结构是什么？3 HTML标记的一般格式是什么？教学后记：虽然现在不懂HTML也能制作漂亮网页，但是只有掌握HTML，才可以更方便、更全面地控制网页，同时又一些网页设计离不开代码。课程教案（:5）授课内容网页文本的使用课 型R理论 实践授课学时2教学方法与手段讲授法教学目的与要求本次课程将讲授网页制作过程中的文本使用，掌握各种特殊文本的输入，文本列表的使用。教学重点与难点教学重点：1 特殊文本的输入及使用状态；2 文本属性；3 文本列表的使用；4 在html中的文本代码。教学难点：1 有序列表和无序列表的区别；2 描述性列表的制作。教学过程设计一、 文本的输入（10分钟左右）1 换行与换段的输入2 空白字符的输入3 特殊符号的输入4 日期与时间的插入5 水平线的插入二、 文本的编辑（20分钟左右）1 文本的选择：鼠标拖选，按住shift+光标键选择2 文本的删除，复制，移动，选择性粘贴3 查找与替换：ctrl+fl 文本对文本的替换l 带格式文本的替换l 源代码的替换l 文本高级及指定标签的替换4 拼写检查：shift+F7三、 文本的属性（15分钟左右）1 属性工具栏：窗口菜单2 设置文本的格式. 大小. 字体. 颜色（注意样式的变化）3 设置文本对齐方式：注意html代码中的变化四、 文本列表（30分钟左右）1 项目列表的创建2 编号列表的创建3 描述性列表的创建五、 HTML中的文本代码（15分钟左右）1 段落和换行代码段落：换行:2 保留源格式代码：pre3 水平线代码：4 标题代码：h1、h2、h3、h4、h5、h65 列表代码：ul ol li dl dt dd作业/思考题：1 设置网页中文本的字体、颜色时要注意什么问题？2 如何修改水平线的颜色？教学后记：本节课授课前，应更多的让学生去回忆此前学习的word中的文本。从而感觉本知识的非常容易，最后能比较发现网页文本的特殊性。课程教案（:6）授课内容建立简单的网页制作课 型理论 R实践授课学时2教学方法与手段讲授法、演示法教学目的与要求通过站点的创建，以及站点文件的管理，创建一个简单的网站。教学重点与难点教学重点：1 创建本地站点2 创建首页3 在首页输入文本内容4 制作文本列表教学难点：1 有序列表和无序列表的区别；2 描述性列表的制作。教学过程设计主要步骤一、 创建本地站点1 运行软件2 站点菜单-新建站点3 远程服务器连接选择为无二、 创建首页1 窗口-文件2 右击当前站点-新建文件-命名为Index.html三、 在首页输入文本内容1 输入常规文本，并在其中换行/换段2 输入空白字符，设置首选参数中的常规设置3 插入日期和水平线四、 制作文本列表1 制作无序列表l文本属性栏-项目列表l敲回车继续新的项目2 制作有序列表l文本属性栏-编号列表l敲回车继续新的项目3 嵌套列表的制作l增加文本缩进l修改列表的类型（代码视图修改type）4 制作定义性列表l切换至代码视图l插入dl标签l在dl标签中插入一个dt和若干个dd标签（dt和dd不可嵌套）实训结果作业/思考题：1 设置网页中文本的字体、颜色时要注意什么问题？2 如何修改水平线的颜色？教学后记：通过学习，并对比此前学习的word中的文本。发现网页文本的特殊性。课程教案（:7）授课内容制作一个简单的网页课 型R理论 实践授课学时2教学方法与手段讲授法、演示法教学目的与要求本次课程将讲授网页制作过程中的图像的使用，掌握图像及图像对象的插入，交互式图像的使用。掌握图像热区的使用。教学重点与难点教学重点：1 图像占位符. 鼠标经过图像；2 图像热区；3 制作网站相册；4 图像的优化。教学难点：1 图像的类型；2 网站相册的制作。教学过程设计一、图像格式的介绍（5分钟左右）1 GIF格式2 JPEG格式3 PNG格式4 其他格式二、图像文件的插入及属性（20分钟左右）1 图像的插入：插入菜单，站点面板，直接拖入到文档2 图像的属性：名称，源文件，大小，替代，边距，边框3 图像的环绕效果三、图像对象的插入及属性（20分钟左右）1 图像占位符2 鼠标经过图像3 导航条四、图像热区的使用（8分钟左右）1 绘制热区：矩形. 椭圆形. 多边形2 选择热区3 调整热区位置五、Fireworks切图及导入Fireworks HTML（10分钟左右）1 用Fireworks制作简单的页面2 利用切片工具分隔网页3 插入菜单-图像对象-Fireworks HTML六、制作web相册（10分钟左右）1 准备制作相册的素材图片2 命令菜单-创建网站相册七、利用插件制作flash相册（7分钟左右）1 搜索flash相册插件2 下载安装并利用工具栏制作八、图像的优化及格式的转换（10分钟左右）1 命令菜单2 右击图像作业/思考题：1 图像地图的作用是什么？2 如何插入鼠标经过图像？教学后记：图像能相对充分的表现页面的内容，适当的在网页中加入图像可对页面进行点缀。在选择图像时应尽量寻找品质较高，尺寸较大的文件，从而能方便编辑。课程教案（:8）授课内容网页图像的使用课 型理论 R实践授课学时2教学方法与手段讲授法、演示法教学目的与要求1 练习站点的创建，以及站点文件的管理；2 练习网页上文本和图像的使用；3 掌握图文混排的网页制作技巧。教学重点与难点教学重点：1 站点的创建；2 文本的输入；3 网页图像的使用。教学难点：1 图文混排的网页；2 修改水平线的颜色。教学过程设计实训内容利用提供的素材文件，制作一个“畅想未来”的网站，要求如下：1. 创建本地站点文件夹，将网页用到的素材按类别复制到站点文件夹中，启动Dreamweaver，定义站点。2. 新建index.html文件，设置背景颜色为“#B8DCF4”，网页标题为“畅想未来”。3. 插入基本的页面元素，包括文本、图像、水平线等。4. 对图像进行适当的调整，包括大小、在页面中的对齐方式、与周边对象的距离及环绕方式。实训步骤一、新建站点1 站点菜单新建站点高级站点名称：畅想未来站点根文件夹：E:/future2 选中站点右键新建文件夹：images（图像文件夹）3 选中站点右键新建文件：index.html（网站首页）4 把提供的图片素材复制到images文件夹中二、设置页面属性4 打开index.html空白文档5 “修改”“页面属性”外观：字体为宋体、大小为12像素，文本颜色为“#034881”，背景颜色为“#B8DCF4”，上边距为0像素，左、右边距的值均为30像素。三、图像对象的插入及属性1 “插入”图像images1.jpg2 属性面板居中对齐注：编辑首选参数辅助功能把图像前面的勾去掉4、 在页面中插入和编辑文本1 编辑首选参数常用允许多个连续的空格勾选上，即可输入多个空格2 创建项目列表3 插入版权符号：插入菜单HTML-特殊字符版权5、 设置图像环绕效果选中图片属性面板对齐左对齐，同时设置页面的上下、左右边距实训结果作业/思考题：1 图像地图的作用是什么？2 如何插入鼠标经过图像？教学后记：图像能相对充分的表现页面的内容，适当的在网页中加入图像可对页面进行点缀。在选择图像时应尽量寻找品质较高，尺寸较大的文件，从而能方便编辑。课程教案（:9）授课内容超链接课 型R理论 实践授课学时2教学方法与手段讲授法、演示法教学目的与要求本次课程将讲授网页制作过程中的超链接的使用，掌握超链接的创建方法，创建各种不同形式的链接。理解链接目标的概念。教学重点与难点教学重点：1. 链接创建的简单方法2. 各种不同超链接的制作3. 链接的目标设置教学难点：1 理解链接的原理2 框架页面中的链接教学过程设计1、 理解url（25分钟左右）文件路径就是文件在电脑中的位置，表示文件路径的方式有两种，相对路径和绝对路径。在网页设计中通过路径可以表示链接，插入图像、Flash、CSS文件的位置1 绝对路径URL：（Uniform Resoure Locator：统一资源定位器）是WWW页的地址，它从左到右由下述部分组成：（1） Internet资源类型（scheme）：指出WWW客户程序用来操作的工具。如“http：/”表示WWW服务器，“ftp：/”表示FTP服务器，“gopher：/”表示Gopher服务器，而“new：”表示Newgroup新闻组。（2） 服务器地址（host）：指出WWW页所在的服务器域名。（3） 端口（port）：有时（并非总是这样），对某些资源的访问来说，需给出相应的服务器提供端口号。（4） 路径（path）：指明服务器上某资源的位置（其格式与DOS系统中的格式一样，通常有目录/子目录/文件名这样结构组成）。与端口一样，路径并非总是需要的。 URL地址格式排列为：scheme：/host：port/path，例如http：/www.sohu.com/domain/HXWZ就是一个典型的URL地址。2 相对路径（1） 如何表示同级目录的文件（2） 如何表示上级目录的文件（3） 如何表示下级目录的文件2、 超链接的制作方法（15分钟左右）1 通过插入菜单2 利用插入栏3 属性面板：直接输入路径，指向文件，文件夹浏览4 超链接的相关操作步骤：修改菜单：创建. 移出. 打开链接页面. 设置链接目标3、 超链接的类型（25分钟左右）1 页面间的链接2 文件链接3 空链接4 锚点链接5 电子邮件链接4、 特殊形式的链接（10分钟左右）1 脚本链接：让对象获取事件2 热点链接：针对图像热区5、 设置链接的目标（5分钟左右）1 _self：自身窗口打开2 _blank：新窗口打开目标3 _parent. _top：在框架页面中使用4 修改链接的目标目标：文件头标签-基础6、 框架页面中的链接（10分钟左右）1 新建简单的框架页面并保存2 设置框架的链接目标：目标必须是框架的名称作业/思考题：1 超链接的路径有几种，都是什么？2 什么是超链接和指向页面段落的超链接？3 E-mail超链接与一般的超链接有什么不同？教学后记：可以用班级的结构类比喻超链接，通过介绍http：/www.hao123.com来激发学生学习的动力，通过http：/www.baidu.com介绍超链接的功能。课程教案（:10）授课内容超链接的使用课 型理论 R实践授课学时2教学方法与手段讲授法、演示法教学目的与要求通过实训，掌握网页制作过程中的超链接的使用，掌握超链接的创建方法，创建各种不同形式的链接。理解链接目标的概念。教学重点与难点教学重点：1. 链接创建的简单方法2. 各种不同超链接的制作3. 链接的目标设置教学难点：3 理解链接的原理4 框架页面中的链接教学过程设计实训内容：1 用三种不同的方法创建链接；2 创建至少6种不同形式的超链接；3 修改链接的目标；4 修改链接的样式。实训步骤：1 用三种不同的方法创建链接（1） 插入菜单或者插入栏找到超级链接命令并点击；（2） 修改菜单或通过ctrl+l来创建链接；（3） 属性栏：直接输入链接地址，或通过指向文件和浏览文件创建。2 创建至少6种不同形式的超链接（1） 在链接框中输入一个.html扩展名的文件，创建页面链接；（2） 在链接框中输入一个.exe扩展名的文件，创建文件链接；（3） 在链接框中输入一个#，创建空链接；（4） 在链接框中输入一个#锚点名，创建锚点链接（应先插入命名锚记）；（5） e在链接框中输入mailto：电子邮件，创建电子邮件链接；（6） 在链接框中输入javascript：close()，创建脚本链接。3 修改链接的目标（1） 将链接目标修改为_blank；（2） 通过代码视图在/head之前加入base标签修改默认目标值。4 修改链接的样式（1） 修改菜单下找到页面属性，更改链接的设置；（2） 记住链接的四个不同状态。实训结果：作业/思考题：1 超链接的路径有几种，都是什么？2 什么是超链接和指向页面段落的超链接？3 E-mail超链接与一般的超链接有什么不同？教学后记：可以用班级的结构类比喻超链接，通过介绍http：/www.hao123.com来激发学生学习的动力，通过http：/www.baidu.com介绍超链接的功能。让错综复杂的网络独立页面形成一个系统的链接关系。课程教案（:11）授课内容多媒体的使用课 型R理论 实践授课学时2教学方法与手段讲授法、演示法教学目的与要求本次课程将学习网页中多媒体的使用，掌握各类媒体文件的插入及属性设置。制作带多媒体文件的网页。教学重点与难点教学重点：各类多媒体文件的格式教学难点：各类多媒体文件的参数教学过程设计一、 插入flash文件（20分钟左右）1 插入菜单-媒体-flash2 插入栏-常用-媒体-flash3 设置flash属性：参数wmode 值transparent 可使flash背景透明(非所有)二、 插入flash文本（5分钟左右）1 插入菜单-媒体-flash文本2 插入栏-常用-媒体-flash文本三、 插入flash按钮（5分钟左右）1 插入菜单-媒体-flash按钮2 插入栏-常用-媒体-flash按钮四、 插入shockwave（10分钟左右）1 安装shockwave插件，准备shockwave文件：文件扩展名dir2 插入菜单-媒体-shockwave3 插入栏-常用-媒体-shockwave五、 插入applet（java程序）（5分钟左右）1 安装java虚拟机(jvm)，准备applet文件：文件扩展名class2 插入菜单-媒体-applet3 插入栏-常用-媒体-applet4 安装anfy软件，制作特效并插入到页面六、 插入param参数（5分钟左右）1 插入realplay格式的文件，设置其参数2 插入mediaplay格式的文件，设置其参数3 常见参数：autostart，url，file七、 插入activeX文件（5分钟左右）1 插入菜单-媒体-activeX2 插入栏-常用-媒体-activeX八、 插入插件（5分钟左右）1 插入菜单-媒体-插件2 插入栏-常用-媒体-插件九、 背景音乐的设置（10分钟左右）1 在代码中插入bgsound标签：注意音乐文件的格式2 利用插件制作背景音乐十、 滚动字幕（15分钟左右）1 在代码视图中使用marquee设置滚动对象2 制作无间隙滚动效果：利用js代码3十一、 利用其他辅助软件制作网页特效（5分钟左右）1 有声有色2 网页制作大宝库作业/思考题：1 如何设置flash动画透明背景？2 插入音频和视频的标记是什么？常用属性是什么？教学后记：通过56.tudou这样的网站分析多媒体在未来网络发展中的前景，本节课是最为绚的节次，能充分激发学生学习网页的热情。准备实例一定要充分。但由于多媒体基本都需要插件支持，在插件安装上应放慢速度。课程教案（:12）授课内容表格的使用课 型R理论 实践授课学时2教学方法与手段讲授法、演示法教学目的与要求本次课程将讲授网页制作过程中的表格的使用，掌握表格在网页排版中的重要作用，理解网页布局的格式。同时掌握表格在显示数据式的作用。教学重点与难点教学重点：1 表格的创建2 网页布局的模式3 表格属性4 页面布局的概念教学难点：1 表格的嵌套2 表格的填充与间距教学过程设计1、 插入表格（10分钟左右）1 插入菜单-表格2 插入栏-常用/布局-表格3 制作嵌套表格2、 表格的基本操作（30分钟左右）1 选择表格元素整个表格的选择：标签，修改菜单，点边框，ctrl+a+a，右键行/列，单元格的选择：标签，边框，拖拉2 处理表格的行/列插入行/列：修改菜单；选中表格-插入菜单-表格删除行/列：修改菜单；右键选择表格3 处理单元格单元格的合并与拆分4 其他操作调整行高/列宽表格的复制/粘贴3、 表格及对象的属性（20分钟左右）1 表格：名称；行/列；宽/高；填充/间距，背景，边框，对齐2 单元格/行：对齐；宽/高；背景；边框；标题单元格；不换行4、 特殊表格的制作（10分钟左右）1 1个像素边框的表格2 立体表格3 变色单元格5、 实例制作：（20分钟左右）实例一：制作各类网页导航实例二：设计各类网页中的内部部分作业/思考题：1 什么情况下不显示表格边框？如何设置？2 如何绘制细线表格？3 画一个表格，在表格中输入内容，进行如下标注：表格、单元格、单元格边距、单元格间距、表格边框。教学后记：把表格比喻成是一个盒子，用盒子装东西的概念来引发出网页中的表格，并系统的描述网页布局结构。课程教案（:13）授课内容表格实例课 型理论 R实践授课学时2教学方法与手段实例教学教学目的与要求本次课程将通过前面学习的知识结合的表格的使用，制作完整的网站首页。让学生巩固网页布局的概念。教学重点与难点教学重点：1 站点的创建2 文本、图像、超链接的使用3 表格的布局方式教学难点：网页制作综合能力教学过程设计利用此前学习的知识制作如下图所示的页面：作业/思考题：1 什么情况下不显示表格边框？如何设置？2 如何设置文本行间距、首行缩进？3 如何给表格添加下边框？教学后记：通过更多的页面制作了解到网页中表格的排版功能。课程教案（:14）授课内容利用表格制作网页课 型理论 R实践授课学时2教学方法与手段讲授法、演示法教学目的与要求通过本次实训，需要掌握网页制作过程中的表格的使用，掌握表格在网页排版中的重要作用，理解网页布局的格式。同时掌握表格在显示数据式的作用。教学重点与难点教学重点：1 表格的创建2 网页布局的模式3 表格属性4 页面布局的概念教学难点：1 表格的嵌套2 表格的填充与间距教学过程设计实训内容：利用提供的素材文件，制作一个“心随衣动”的网站，要求如下：1 创建站点2 创建表格3 在表格中插入文本和图像4 设置表格相关属性5 完成页面制作实训步骤：1. 创建本地站点a) 运行软件b) 站点菜单-新建站点c) 远程服务器连接选择为无2. 创建表格a) 绘制网站结构图b) 插入菜单-表格，按结构图插入相应的表格3. 在表格中插入文本和图像a) 在单元格插入相应的文本或图像4. 设置表格的相关属性a) 更改表格行高或列宽b) 更改表格的背景颜色或背景图片c) 更改表格的填充. 间距. 边框. 边框颜色d) 更改单元格的背景颜色或背景图片5. 完成页面制作适当调整表格相关属性实训结果：作业/思考题：1 什么情况下不显示表格边框？如何设置？2 如何绘制细线表格？教学后记：通过本次实训，让学生熟练掌握表格的使用，并能通过表格的布局作用。设计并制作相对完整的网页。课程教案（:15）授课内容页面属性课 型R理论 实践授课学时2教学方法与手段讲授法教学目的与要求本次课程学习网页属性的设置，对网页进行简单的后期美化操作。掌握各类特殊元素在网页中显示设置。教学重点与难点教学重点：1 网页美化2 不可见元素教学难点：文件头标签教学过程设计1、 设置页面属性（20分钟左右）修改-页面属性：1 外观：字体，字号，背景，边距2 链接：四个链接状态3 标题：设置标题文件4 标题/编码：页面识别2、 查看文件头标签（10分钟左右）查看菜单-文件头标签3、 插入文件头标签（40分钟左右）1 插入-html-文件头标签2 meta标签的常见功能：搜索引擎，页面自身描述(1) meta name=Keywords content=向搜索引擎说明你的网页的关键词； (2) meta name=Description content=告诉搜索引擎你的站点的主要内容； (3) meta name=Author content=你的姓名告诉搜索引擎你的站点的制作的作者；(4) http-equiv属性 (5) meta http-equiv=Content-Type content=text/html；charset=gb_2312-80用以说明主页制作所使用的文字以及语言； (6) meta http-equiv=Refresh content=n；url=http：/yourlink定时让网页在指定的时间n内，跳转到页面http；/yourlink。3 基础标签的使用4 链接link：链接外部文件到页面4、 可视化助理（10分钟左右）1 在设计视图下。决定页面对象是否显示2 查看菜单-可视化助理-显示/隐藏所有3 工具栏-可视化助理4 编辑-首选参数-不可见元素5、 跟踪图像（10分钟左右）1 将跟踪图像放在文档窗口中l 查看-跟踪图像-载入l 修改-页面属性2 显示或隐藏跟踪图像l 查看-跟踪图像-显示3 更改跟踪图像的位置l 查看-跟踪图像-调整位置4 重设跟踪图像的位置l 查看-跟踪图像-重设位置5 将跟踪图像与所选元素对齐作业/思考题：1 关键词输入是不是越多越好？2 关键词之间用什么符号分隔？教学后记：页面后期的处理。规范网页显示。课程教案（:16）授课内容层叠样式表 CSS（一）课 型R理论 实践授课学时2教学方法与手段讲授法教学目的与要求本次课程将学习层叠样式表 CSS的功能及使用。教学重点与难点教学重点：1 CSS的语法2 CSS和网页的关系3 CSS的创建教学难点CSS的语法格式教学过程设计1、 CSS功能和分类（30分钟左右）层叠样式表（CSS）是一系列格式规则，它们控制网页内容的外观。使用 CSS样式可以非常灵活地控制网页外观，从精确的布局定位到特定的字体和样式，可以让站点整体风格保持一致。CSS 样式非常灵活，因为样式并不局限于文本对象。对于文本、图像、表格、层等都可以定义定位样式和格式化样式。外链样式表：使用单独的样式表文件.CSS。通过在样式表设置对话框中指定，它的设定将会影响到整个网页。内嵌样式表：该类样式表是嵌在页面头部代码标记之间的，可以通过Dreamweaver 中的样式表对话框设置。内联样式表：即行间样式表，样式代码直接写在某一HTML标签后部，用styles属性说明。它的作用仅限于它修饰的标签，直接影响网页上单个对象。2、 打开“CSS样式编辑器”面板（20分钟左右）1 窗口菜单CSS 样式(Shift+F11)；2 使用“CSS样式”面板可以创建、查看、应用或编辑样式属性；3 “CSS样式”面板具有两种视图或模式；4 使用“应用样式”视图可应用自定义或类 CSS 样式；5 使用“编辑样式”视图可以对已应用于文档的样式进行更改。3、 CSS语法规则（20分钟左右）1 类：可用于所有适合的标签；2 标签：重新设置指定标签的属性；3 高级：以ID类命名的对象或伪类对象。4、 使用CSS样式编辑器（20分钟左右）1 创建新样式单击面板右下角区域中“新建样式”按钮（+）；右击面板选择“新建 CSS 样式”；文本CSS 样式新建 CSS 样式”；随即出现“新建 CSS 样式”对话框，有3种类型的CSS 样式；自定义CSS样式(也称为类样式)可以将样式属性设置为任何文本范围或文本块；重定义特定标签可以改变特定标签（如hl）的默认格式；CSS选择器可以重定义具体某个标签组合的格式。2 自定义css样式对话框中的样式类型：类型属性：定义CSS样式的基本字体和类型设置。背景属性：定义网页中任何元素的背景。区块属性：精确定义标签和属性的间距和对齐方式等。边框属性：定义元素周围的边框的设置（如宽度、颜色和样式）。作业/思考题：1 CSS样式表与HTML语言的语法规则的区别？2 CSS样式包含哪几类？如何应用于网页？教学后记：介绍目前网页制作的新技术，推广使用web2.0技术，重点介绍DIV+CSS排版知识。建立完成的div概念，结合文本列表使用。课程教案（:17）授课内容层叠样式表 CSS（二）课 型R理论 实践授课学时2教学方法与手段讲授法教学目的与要求本次课程将学习层叠样式表 CSS的功能及使用。教学重点与难点教学重点：1 CSS的语法2 CSS和网页的关系3 CSS的创建教学难点CSS的语法格式教学过程设计续前节2. 自定义css样式对话框中的样式类型：（30分钟左右）盒子属性：定义特定元素的大小及其周围元素的间距等属性。 列表属性：为列表标签定义列表设置（如项目符号大小和类型）。 定位属性：定义层在页面中的排布相关属性。 扩展属性：包括过滤镜、分页和鼠标指针选项。五、应用样式表（10分钟左右）自定义样式表是唯一可以应用于文档中的任何文本（与控制文本的标签无关）的CSS 样式类型。六、编辑现有样式表（10分钟左右）1 修改CSS样式双击所选样式；右击，然生选择“编辑”；单击“CSS 样式”面板底部的“编辑样式表”按钮；文本菜单CSS样式编辑样式表（Ctrl+Shift+E）”；编辑样式视图下“编辑样式”按钮，弹出对话框操作。2 删除css 样式3 复制css 样式七、将自定义样式从选定内容中删除（10分钟左右）选择要从中删除样式的对象或文本，在“CSS样式”面板中，选择“应用样式”视图，然后选择“无CSS样式”。在文本属性面板中，利用上下文菜单中选择“CSS样式”，然后在“CSS 样式”弹出式菜单中选择“无CSS样式”。八、从文档中导出样式创建 CSS 样式表文件（10分钟左右）可以从文档中导出样式以创建新的CSS样式表。然后，可链接到其他文档以应用这些样式。 文件菜单导出导出CSS样式 文本菜单导出样式表”九、附加样式表（链接外部样式表文件）（10分钟左右）在“CSS 样式”面板中，单击“附加样式表”按钮，出现“链接外部样式表”。在“添加为”中，选择其中的一个选项： 选择“链接”，创建当前文档和外部样式表之间的链接，该选项在HTML代码 中创建一个Link href 标签，并引用已发布的样式表所在的URL。 选择“导入”，引用外部样式表。该选项在HTML代码中创建一个import标签，并引用已发布的样式表所在的URL。十、将CSS样式转换为HTML标签（10分钟左右）如果使用CSS样式指定了文本格式（如字体、大小、颜色和修饰），后来决定想使该格式可在3.0浏览器中查看，这时可以使用“文件菜单 转换兼容3.0浏览器”命令将尽可能多的样式信息转换为HTML标签.备注：并非所有CSS样式都可以转换为HTML，因为HTML标签并不包括或支持 CSS中可能有的所有属性。作业/思考题：1 CSS样式表与HTML语言的语法规则的区别？2 CSS样式包含哪几类？如何应用于网页？3 什么是附加样式表，有什么用？教学后记：介绍目前网页制作的新技术，推广使用web2.0技术，重点介绍DIV+CSS排版知识。建立完成的div概念，结合文本列表使用。课程教案（:18）授课内容CSS样式的使用课 型理论 R实践授课学时2教学方法与手段实例讲解法教学目的与要求通过本次实训，系统的掌握CSS的应用方法及应用规则，并能利用div结合css制作网页。教学重点与难点教学重点：1 CSS的语法2 CSS和网页的关系3 CSS的创建教学难点CSS的语法格式教学过程设计实训内容1 Css和html结合的三种方法2 Css的语法规则3 Css各类型应用实例4 CSS+div网页制作示例主要步骤1 Css和html结合的三种方法(1) 窗口菜单打开css面板(2) 新建按钮创建仅用于该文档的CSS样式(3) 导出CSS样式，并链接至其他页面(4) 代码视图中直接在标签中加入CSS样式2 CSS的语法规则(1) 创建一个class类的样式，并分别作用于表格，表单，层和段落(2) 创建一个id类的样式，并分别作用于表格，表单，层(3) 创建一个标签样式，作用于body、input对象(4) 创建继承式的链接样式l 在表格中创建链接l 给表格命名l 利用#表格名 a：link更改指定表格中的样式3 Css各类型应用实例(1) 字体类属性(2) 背景类属性：设置颜色、背景、背景固定、背景重复和背景位置(3) 方框、边框、区块属性的设置(4) 定位属性设置(5) 滤镜效果4 CSS+DIV网页制作示例(1) 通过上述方法和规则对html中的div标签进行属性设置(2) 首先在html代码中输入div标签(3) 利用css样式分别对插入的div进行设置(4) CSS+DIV导航实例实训结果作业/思考题：1 CSS样式表与HTML语言的语法规则的区别？2 CSS样式包含哪几类？如何应用于网页？3 什么是附加样式表，有什么用？教学后记：介绍目前网页制作的新技术，推广使用web2.0技术，重点介绍DIV+CSS排版知识。建立完成的div概念，结合文本列表使用。课程教案（:19）授课内容DIV+CSS布局网页课 型R理论 实践授课学时2教学方法与手段讲授法教学目的与要求本次课程将学习DIV+CSS布局网页教学重点与难点教学重点：1 CSS的常用命名2 DIV+CSS布局网页的框架结构3 DIV+CSS布局网页的技巧教学难点CSS的语法格式