1、1网页设计与制作教案课程名称 网页设计与制作课程类型使用教材教材名称：网页设计与制作实用教程 主编：刘艳丽出版社：高等教育出版社 日期：2011 年 5 月学时分配 共 64 学时，其中理论 36 学时，实践 28 学时。课程教学目的与要求该课程是三年制高职高专电子商务专业的职能课程，目标是让学生掌握网页设计的基本概念，学会使用常用的网页设计工具和相关网页美工软件，能够设计制作常见的静态网页。它要以计算机基础、计算机网络技术课程的学习为基础，也是进一步学习网络编辑、网站建设与管理课程的基础。主要参考书目赵喜清，崔海涛网页设计与制作哈尔滨工业大学出版社，2010.92孙振业网页设计与制作高等教育
2、出版社，2009.3课程教案（:1）授课内容 网页制作基础知识课 型 理论 实践 授课学时 2教学方法与手段 讲授法教学目的与要求本次课程将讲授网页制作的基本知识，使学生了解到什么是网页，网页制作涉及到哪些工具、网页与网站有什么区别，网页与普通的文档有什么区别等。通过讲授也将使学生了解到网页的组成，网页语言的种类及各自特点；动态网页与静态网页的定义；Internet 信息发布的原理等等内容。教学重点与难点教学重点：1Internet 信息访问原理。2什么是网页？（1）网页内容组成；（2）网页编写语言种类及特点。3Dreamweaver8 功能简介。教学难点：Internet 信息访问原理；网页
3、编写语言种类及特点。教学过程设计一、 基础知识1网页简介（15 分钟左右）网页：是组成 WWW（World Wide Web：万维网）的基本元素，也被称为页3面或 Web 页。不同的网页通过超链接联系在一起，构成了 WWW 纵横交织结构。网站：就是一个相互链接的网页的集合，它们可以共享。大的网站页面数量多达几十万，甚至上百万页，小的个人网站也可以只包含数个页面。主页：是网站中的一个特殊网页，它是在 WWW 上进入网站的第一个网页，其中包含指向其他网页的超链接，通常主页的名称是固定的。2Internet 简介（5 分钟左右）3了解常用的网页制作工具（10 分钟左右）如：Dreamweaver 和
4、 FrontPage4了解美化网页的主要工具（10 分钟左右）（1）图像处理软件：Photoshop、Fireworks、CorelDRAW 等（2）动画制作工具：Flash5了解网页中的脚本语言（10 分钟左右）如：VBScript、JavaScript6了解服务器端主要技术（10 分钟左右）服务器端脚本语言：ASP、JSP、PHP、CGI 等。它们的形式与 HTML 有些类似，但功能更加强大，能够实现许多功能。二、了解建立网站的基本流程（10 分钟左右）1确定网站主题2搜集资料3规划网站4选择合适的制作工具5制作网页46上传测试7推广宣传8维护更新三、Dreamweaver CS3 基础（
5、20 分钟左右）1Dreamweaver 的发展史2Dreamweaver CS3 的新功能3Dreamweaver CS3 工作区简介4网页文档的基本操作作业/思考题：1列举你所了解的网页设计的常用工具和美化网页的主要工具2建立网站的基本流程有哪些步骤？请归纳总结。53利用网上资源，在百度中搜索“网页配色方案”关键词，下载相关的“网页配色方案”文件，指导以后网页设计中的配色问题。教学后记：第一节课，应首先介绍网站发展的前景，重点分解 Dreamweaver 和其他软件的区别，提出利用网络传播信息，并由此讲述网络发展给网页带来的市场。通过两节课的讲授，感觉到学生能对本课程产生比较大的兴趣！6课
6、程教案（:2）授课内容 站点的创建与管理课 型 理论 实践 授课学时 2教学方法与手段 讲授法教学目的与要求本次课程将讲授网站站点的创建与管理知识，使学生了解到什么是站点，站点的种类，站点的作用，站点文件的管理。站点的发布及网页的预览。教学重点与难点教学重点：1、站点的创建；2、站点文件的管理；3、站点文件的预览；4、站点地图的生成。教学难点：测试利用服务器技术的站点；站点地图创建的条件；远程站点的创建。教学过程设计、 站点（10 分钟左右）也称“网站” ，用来定位网站上的所有文件，是一系列通过超链接而相互联系的网页集合。建立网站首先要在本地计算机上构建本地站点来管理站点中的文档，制作网页，测
7、试完毕后，上传到 Internet 服务器。、 新建本地站点（20 分钟左右）1站点菜单-新建站点2站点菜单-管理站点-新建3建立站点注意问题：（1）用文件夹进行分类存储：如网页文件存放在 html 文件夹中，图像文件存放在 images 文件夹中。嵌套文件夹的层数不要太多，最多不超过三7层，否则超链接时会出错。（2）文件命名要合理：建议全部使用小写的文件名称，不要用中文文件名。文件夹的名称最好用顾名思义的英文，方便以后修改维护。文件名也要符合规范，比如首页一般命名为 index.html 或 default.html。三、 网站文件的管理（20 分钟左右）1文件的创建(鼠标右击站点 -新建文
8、件；文件菜单-新建；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工具栏-地球土标-选择浏览器：此时可通过”添加浏览器”选项来增加更多的浏览器
9、3编辑菜单-首选参数-在浏览器中预览-不选”使用临时文件预览”五、 站点的编辑和管理（20 分钟左右）1站点管理器：文件面板(窗口菜单或 F8 键)82打开现有本地站点3查看本地和远程网站的文件和地图4调整窗口视图5保存站点地图6重建站点缓存7站点编辑，复制，删除，导入与导出：站点菜单-管理站点作业/思考题：1在制作网页前为什么要首先建立站点？2定义本地站点的含义是什么？3建立站点应该注意的问题？9教学后记：网站的站点，好似一个班级，应该首先为班级起一个名称，并配备一个班主任，然后再陆续的加入一些学生。这其实就是我们站点创建时应该为站点起一个名字，并设置一个首页，增加更多的超链接。10课程教案
10、（:3）授课内容 了解 Dreamweaver 的界面及站点的建立课 型 理论 实践 授课学时 2教学方法与手段 讲授法、演示法教学目的与要求利用 Dreamweaver CS3 熟练创建本地. 远程站点。并掌握 Dreamweaver 的基本操作。教学重点与难点教学重点：1、站点的创建；2、站点文件的管理；3、站点文件的预览；4、站点地图的生成。教学难点：站点地图创建的条件；远程站点的创建。教学过程设计1. 本地站点的创建（1）运行软件（2）站点菜单-新建站点、3、远程服务器连接选择为无2. 远程站点的创建（1）运行软件（2）站点菜单-新建站点（3）远程服务器连接选择为 FTP3. IIS
11、的安装11（1）我的电脑-控制面板-添加和删除程序（2）选择添加 windows 组件（3）勾选 Internet 信息服务，更新安装4. 创建利用服务器技术的站点（1）运行软件（2）站点菜单-新建站点（3）是否利用服务器技术设置为是（4）允许 IIS，将默认站点的主目录设置为站点所对应的文件夹（5）设置服务器站点的测试服务器为 http：/localhost5. 站点文件的管理站点文件的创建. 编辑及预览6. 管理站点（1）站点菜单-新建站点（2）实现对站点创建. 删除. 编辑（3）导出并重新导入站点12作业/思考题：1在制作网页前为什么要首先建立站点？2定义本地站点的含义是什么？3建立站点
12、应该注意的问题？13教学后记：通过本次实训，让学生系统的掌握站点的创建及管理，了解各类站点的创建过程，并能正确的导出和导入站点文件。14课程教案（:4）授课内容 HTML 语言简介课 型 理论 实践 授课学时 2教学方法与手段 讲授法教学目的与要求1了解 HTML 语言，重点掌握 HTML 文件的基本结构和语法格式；2掌握标记语言的用法；3熟记标记、标记及常用属性代码。教学重点与难点教学重点：1、HTML 文件的基本结构；2、HTML 语法格式；教学难点：设置网页标题；设置网页关键字；制作滚动文字。教学过程设计、 HTML 简介（5 分钟左右）HTML：(HyperText Markup La
13、nguage)是一种超文本标记语言，是网页制作的基本语言。即通过将特定的标记放置在文本或图片或 URL 前后，来达到使该段文本或图片或 URL 以指定方式显示的目的。二、 HTML 文件的基本结构（ 10 分钟左右）网页的标题 网页的主体内容15、 HTML 语法格式（20 分钟左右）1HTML 标记一般格式对象说明：标记除了上述格式，还有单标记，如下面的标记；属性书写不分先后顺序；属性值用英文双撇号括住。2HTML 语法规则HTML 文件以纯文本格式形式存放，扩展名为 “*. html”或“*. htm” 。HTML 标记不区分大小写。多数 HTML 标记可以嵌套，但不可以交叉。HTML 源
14、文件中的换行、回车符和多个连续空格在显示效果中无效。只有在设计视图中才有用。在 HTML 源文件中， 为换行标记；为换段标记；空格用 表示。四、 HTML 标记举例（55 分钟左右）1设置网页标题： 标记2元信息标记：标记标记的信息只显示在源代码中，浏览器中没有显示，通过设置标记的不同属性，可以定义页面中各种元数据，如页面的名称、关键词等多种信息。163制作滚动文字：标记属性：1 direction 表示滚动的方向，值可以是 left、right 、up、down，默认为left。2 behavior 表示滚动的方式，值可以是 scroll（连续滚动） 、slide （滑动一次） 、alter
15、nate（来回滚动） 。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()，表示当鼠标浮到以上区域的时候滚动停止和当鼠标
16、移开的时候又继续滚动。作业/思考题：1关键字之间以英文逗号分隔。关键词输入不是越多越好，因为大多数搜索引擎限制关键字的数量，所以设置关键字要精简才会被搜中率高。2什么是 HTML？HTML 文件的基本结构是什么？3HTML 标记的一般格式是什么？17教学后记：虽然现在不懂 HTML 也能制作漂亮网页，但是只有掌握 HTML，才可以更方便、更全面地控制网页，同时又一些网页设计离不开代码。18课程教案（:5）授课内容 网页文本的使用课 型 理论 实践 授课学时 2教学方法与手段 讲授法教学目的与要求本次课程将讲授网页制作过程中的文本使用，掌握各种特殊文本的输入，文本列表的使用。教学重点与难点教学重
17、点：1、特殊文本的输入及使用状态；2、文本属性；3、文本列表的使用；4、在 html 中的文本代码。教学难点：1有序列表和无序列表的区别；2描述性列表的制作。教学过程设计一、 文本的输入（10 分钟左右）1换行与换段的输入2空白字符的输入3特殊符号的输入4日期与时间的插入5、水平线的插入二、 文本的编辑（20 分钟左右）1文本的选择：鼠标拖选，按住 shift+光标键选择192文本的删除，复制，移动，选择性粘贴3查找与替换：ctrl+f文本对文本的替换带格式文本的替换源代码的替换文本高级及指定标签的替换4拼写检查：shift+F7三、 文本的属性（15 分钟左右）1属性工具栏：窗口菜单2设置文
18、本的格式. 大小. 字体. 颜色（注意样式的变化）3设置文本对齐方式：注意 html 代码中的变化四、 文本列表（30 分钟左右）1项目列表的创建2编号列表的创建3描述性列表的创建五、 HTML 中的文本代码（15 分钟左右）1段落和换行代码段落：换行:2保留源格式代码：pre3水平线代码：204标题代码：h1、h2、h3、h4、h5、h65列表代码：ul ol li dl dt dd作业/思考题：1设置网页中文本的字体、颜色时要注意什么问题？2如何修改水平线的颜色？教学后记：本节课授课前，应更多的让学生去回忆此前学习的 word 中的文本。从而感觉本知识的非常容易，最后能比较发现网页文本的特
19、殊性。21课程教案（:6）授课内容 建立简单的网页制作课 型 理论 实践 授课学时 2教学方法与手段 讲授法、演示法教学目的与要求 通过站点的创建，以及站点文件的管理，创建一个简单的网站。教学重点与难点教学重点：1、创建本地站点2、创建首页3、在首页输入文本内容4制作文本列表教学难点：1有序列表和无序列表的区别；2描述性列表的制作。22教学过程设计主要步骤一、 创建本地站点1运行软件2站点菜单-新建站点3远程服务器连接选择为无二、 创建首页1窗口-文件2右击当前站点-新建文件-命名为 Index.html三、 在首页输入文本内容1输入常规文本，并在其中换行/换段2输入空白字符，设置首选参数中的
20、常规设置3插入日期和水平线四、 制作文本列表1制作无序列表 文本属性栏-项目列表 敲回车继续新的项目2制作有序列表 文本属性栏-编号列表 敲回车继续新的项目3嵌套列表的制作 增加文本缩进 修改列表的类型（代码视图修改 type）4制作定义性列表 切换至代码视图23 插入 dl 标签 在 dl 标签中插入一个 dt 和若干个 dd 标签（dt 和 dd 不可嵌套）实训结果作业/思考题：1设置网页中文本的字体、颜色时要注意什么问题？2如何修改水平线的颜色？教学后记：通过学习，并对比此前学习的 word 中的文本。发现网页文本的特殊性。24课程教案（:7）授课内容 制作一个简单的网页课 型 理论 实
21、践 授课学时 2教学方法与手段 讲授法、演示法教学目的与要求本次课程将讲授网页制作过程中的图像的使用，掌握图像及图像对象的插入，交互式图像的使用。掌握图像热区的使用。教学重点与难点教学重点：1图像占位符. 鼠标经过图像；2图像热区；3制作网站相册；4图像的优化。教学难点：1图像的类型；2网站相册的制作。25教学过程设计一、图像格式的介绍（5 分钟左右）1GIF 格式2JPEG 格式3PNG 格式4其他格式二、图像文件的插入及属性（20 分钟左右）1图像的插入：插入菜单，站点面板，直接拖入到文档2图像的属性：名称，源文件，大小，替代，边距，边框3图像的环绕效果三、图像对象的插入及属性（20 分钟
22、左右）1图像占位符2鼠标经过图像3导航条四、图像热区的使用（8 分钟左右）1绘制热区：矩形. 椭圆形. 多边形2选择热区3调整热区位置五、Fireworks 切图及导入 Fireworks HTML（10 分钟左右）1用 Fireworks 制作简单的页面2利用切片工具分隔网页263插入菜单-图像对象-Fireworks HTML六、制作 web 相册（10 分钟左右）1准备制作相册的素材图片2命令菜单-创建网站相册七、利用插件制作 flash 相册（7 分钟左右）1搜索 flash 相册插件2下载安装并利用工具栏制作八、图像的优化及格式的转换（10 分钟左右）1命令菜单2右击图像作业/思考题
23、：1图像地图的作用是什么？2如何插入鼠标经过图像？教学后记：图像能相对充分的表现页面的内容，适当的在网页中加入图像可对页面进行点缀。在选择图像时应尽量寻找品质较高，尺寸较大的文件，从而能方便编辑。27课程教案（:8）授课内容 网页图像的使用课 型 理论 实践 授课学时 2教学方法与手段 讲授法、演示法教学目的与要求1练习站点的创建，以及站点文件的管理；2练习网页上文本和图像的使用；3掌握图文混排的网页制作技巧。教学重点与难点教学重点：1站点的创建；2文本的输入；3网页图像的使用。教学难点：1图文混排的网页；2修改水平线的颜色。教学过程设计实训内容利用提供的素材文件，制作一个“畅想未来”的网站，
24、要求如下：1. 创建本地站点文件夹，将网页用到的素材按类别复制到站点文件夹中，启动 Dreamweaver，定义站点。2. 新建 index.html 文件，设置背景颜色为“#B8DCF4” ，网页标题为 “畅想未来” 。3. 插入基本的页面元素，包括文本、图像、水平线等。4. 对图像进行适当的调整，包括大小、在页面中的对齐方式、与周边对象的距离及环绕方式。28实训步骤一、新建站点1站点菜单新建站点高级 站点名称：畅想未来站点根文件夹：E:/future2选中站点右键 新建文件夹：images （图像文件夹）3选中站点右键 新建文件：index.html （网站首页）4把提供的图片素材复制到
25、images 文件夹中二、设置页面属性4打开 index.html 空白文档5 “修改”“页面属性”外观：字体为宋体、大小为 12 像素，文本颜色为“#034881” ，背景颜色为“#B8DCF4” ，上边距为 0 像素，左、右边距的值均为 30 像素。三、图像对象的插入及属性1 “插入”图像images 1.jpg2属性面板居中对齐注：编辑首选参数 辅助功能 把图像前面的勾去掉4、在页面中插入和编辑文本1编辑首选参数 常用 允许多个连续的空格勾选上，即可输入多个空格2创建项目列表3插入版权符号：插入菜单HTML-特殊字符版权295、设置图像环绕效果选中图片属性面板 对齐 左对齐，同时设置页面的上下、左右边距实训结果作业/思考题：1图像地图的作用是什么？2如何插入鼠标经过图像？教学后记：图像能相对充分的表现页面的内容，适当的在网页中加入图像可对页面进行点缀。在选择图像时应尽量寻找品质较高，尺寸较大的文件，从而能方便编辑。30
