网页设计与制作--教案

第1页教案首页课程名称网页设计与制作课程类型使用教材教材名称：网页设计与制作实用教程主编：刘艳丽出版社：高等教育出版社日期：2011年5月学时分配共64学时，其中理论36学时，实践28学时。课程教学目的与要求该课程是三年制高职高专电子商务专业的职能课程，目标是让学生掌握网页设计的基本概念，学会使用常用的网页设计工具和相关网页美工软件，能够设计制作常见的静态网页。它要以计算机基础、计算机网络技术课程的学习为基础，也是进一步学习网络编辑、网站建设与管理课程的基础。主要参考书目赵喜清，崔海涛《网页设计与制作》哈尔滨工业大学出版社，2010.9孙振业《网页设计与制作》高等教育出版社，2009.3备注第2页课程教案（№:1）授课内容网页制作基础知识课型理论实践授课学时2教学方法与手段讲授法教学目的与要求本次课程将讲授网页制作的基本知识，使学生了解到什么是网页，网页制作涉及到哪些工具、网页与网站有什么区别，网页与普通的文档有什么区别等。通过讲授也将使学生了解到网页的组成，网页语言的种类及各自特点；动态网页与静态网页的定义；Internet信息发布的原理等等内容。教学重点与难点教学重点：1．Internet信息访问原理。2．什么是网页？（1）网页内容组成；（2）网页编写语言种类及特点。3．Dreamweaver8功能简介。教学难点：Internet信息访问原理；网页编写语言种类及特点。教学过程设计一、基础知识1．网页简介（15分钟左右）网页：是组成（WorldWideWeb：万维网）的基本元素，也被称为页面或Web页。不同的网页通过超链接联系在一起，构成了纵横交织结构。网站：就是一个相互链接的网页的集合，它们可以共享。大的网站页面数量多达几十万，甚至上百万页，小的个人网站也可以只包含数个页面。主页：是网站中的一个特殊网页，它是在上进入网站的第一个网页，其中包含指向其他网页的超链接，通常主页的名称是固定的。2．Internet简介（5分钟左右）3．了解常用的网页制作工具（10分钟左右）如：Dreamweaver和FrontPage4．了解美化网页的主要工具（10分钟左右）（1）图像处理软件：Photoshop、Fireworks、CorelDRAW等（2）动画制作工具：Flash5．了解网页中的脚本语言（10分钟左右）如：VBScript、JavaScript6．了解服务器端主要技术（10分钟左右）服务器端脚本语言：ASP、JSP、PHP、CGI等。它们的形式与HTML有些类似，第3页但功能更加强大，能够实现许多功能。二、了解建立网站的基本流程（10分钟左右）1．确定网站主题2．搜集资料3．规划网站4．选择合适的制作工具5．制作网页6．上传测试7．推广宣传8．维护更新三、DreamweaverCS3基础（20分钟左右）1．Dreamweaver的发展史2．DreamweaverCS3的新功能3．DreamweaverCS3工作区简介4．网页文档的基本操作作业/思考题：1．列举你所了解的网页设计的常用工具和美化网页的主要工具2．建立网站的基本流程有哪些步骤？请归纳总结。3．利用网上资源，在百度中搜索“网页配色方案”关键词，下载相关的“网页配色方案”文件，指导以后网页设计中的配色问题。教学后记：第一节课，应首先介绍网站发展的前景，重点分解Dreamweaver和其他软件的区别，提出利用网络传播信息，并由此讲述网络发展给网页带来的市场。通过两节课的讲授，感觉到学生能对本课程产生比较大的兴趣！第4页课程教案（№:2）授课内容站点的创建与管理课型理论实践授课学时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页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．建立站点应该注意的问题？教学后记：网站的站点，好似一个班级，应该首先为班级起一个名称，并配备一个班主任，然后再陆续的加入一些学生。这其实就是我们站点创建时应该为站点起一个名字，并设置一个首页，增加更多的超链接。第6页课程教案（№:3）授课内容了解Dreamweaver的界面及站点的建立课型理论实践授课学时2教学方法与手段讲授法、演示法教学目的与要求利用DreamweaverCS3熟练创建本地.远程站点。并掌握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.站点文件的管理第7页站点文件的创建.编辑及预览6.管理站点（1）站点菜单-新建站点（2）实现对站点创建.删除.编辑（3）导出并重新导入站点作业/思考题：1．在制作网页前为什么要首先建立站点？2．定义本地站点的含义是什么？3．建立站点应该注意的问题？教学后记：通过本次实训，让学生系统的掌握站点的创建及管理，了解各类站点的创建过程，并能正确的导出和导入站点文件。第8页课程教案（№:4）授课内容HTML语言简介课型理论实践授课学时2教学方法与手段讲授法教学目的与要求1．了解HTML语言，重点掌握HTML文件的基本结构和语法格式；2．掌握标记语言的用法；3．熟记title标记、marquee标记及常用属性代码。教学重点与难点教学重点：1．HTML文件的基本结构；2．HTML语法格式；教学难点：设置网页标题；设置网页关键字；制作滚动文字。教学过程设计一、HTML简介（5分钟左右）HTML：(HyperTextMarkupLanguage)是一种超文本标记语言，是网页制作的基本语言。即通过将特定的标记放置在文本或图片或URL前后，来达到使该段文本或图片或URL以指定方式显示的目的。二、HTML文件的基本结构（10分钟左右）HTMLheadtitle网页的标题/title/headbody网页的主体内容/body/HTML三、HTML语法格式（20分钟左右）1．HTML标记一般格式标记属性1=”属性值1”属性2=”属性值2”…对象/标记说明：标记除了上述格式，还有单标记，如下面的img标记；属性书写不分先后顺序；属性值用英文双撇号括住。2．HTML语法规则第9页HTML文件以纯文本格式形式存放，扩展名为“*.html”或“*.htm”。HTML标记不区分大小写。多数HTML标记可以嵌套，但不可以交叉。HTML源文件中的换行、回车符和多个连续空格在显示效果中无效。只有在设计视图中才有用。在HTML源文件中，br为换行标记；p/p为换段标记；空格用 表示。四、HTML标记举例（55分钟左右）1．设置网页标题：title标记2．元信息标记：meta标记meta标记的信息只显示在源代码中，浏览器中没有显示，通过设置meta标记的不同属性，可以定义页面中各种元数据，如页面的名称、关键词等多种信息。3．制作滚动文字：marquee标记属性：①direction表示滚动的方向，值可以是left、right、up、down，默认为left。②behavior表示滚动的方式，值可以是scroll（连续滚动）、slide（滑动一次）、alternate（来回滚动）。③Loop表示循环的次数，值是正整数，默认为无线循环。④Scrollamount表示运动速度，值是正整数，默认为6。⑤Scrolldelay表示停顿时间，值是正整数，默认为0，单位是毫秒。⑥Align表示元素的垂直对齐方式，值可以是top、bottom、middle。⑦Height、width表示运动区域的高度和宽度，值是正整数或百分比，默认width=100%，height为标签内元素的高度。事件：onMouseOver=this.stop()和onMouseOut=this.start()，表示当鼠标浮到以上区域的时候滚动停止和当鼠标移开的时候又继续滚动。作业/思考题：1．关键字之间以英文逗号分隔。关键词输入不是越多越好，因为大多数搜索引擎限制关键字的数量，所以设置关键字要精简才会被搜中率高。2．什么是HTML？HTML文件的基本结构是什么？3．HTML标记的一般格式是什么？教学后记：虽然现在不懂HTML也能制作漂亮网页，但是只有掌握HTML，才可以更方便、更全面地控制网页，同时又一些网页设计离不开代码。第10页课程教案（№:5）授课内容网页文本的使用课型理论实践授课学时2教学方法与手段讲授法教学目的与要求本次课程将讲授网页制作过程中的文本使用，掌握各种特殊文本的输入，文本列表的使用。教学重点与难点教学重点：1．特殊文本的输入及使用状态；2．文本属性；3．文本列表的使用；4．在html中的文本代码。教学难点：1．有序列表和无序列表的区别；2．描述性列表的制作。教学过程设计一、文本的输入（10分钟左右）1．换行与换段的输入2．空白字符的输入3．特殊符号的输入4．日期与时间的插入5．水平线的插入二、文本的编辑