河北省秦皇岛市抚宁县驻操营学区初中信息技术第二册 第六课 设计网站与制作首页教案 新人教版.doc

第六课设计网站与制作首页本单元安排的是使用Dreamweaver制作个人网站，展现自我风采。本课主要介绍网站、网页等概念，网站设计制作流程，认识Dreamweaver工作界面，设计、制作个人网站的首页。本课首先让学生了解什么是网站，什么是网页，网站和网页的关系。明确网站主题、名称、栏目结构、网页版面等在网页中的作用，了解常见的几种网页版面布局。建议2个课时完成。第1课时学习制作网站前需要了解的内容和熟悉网页制作工具——Dreamweaver的使用。第2课时学习设设计个人网站并制作网站的首页。设计个人网站首页网页设计包括内容设计和布局结构设计。在制作网页前需要搜集、整理网页中需要的素材，包括文字、图片等形式。确定首页的页面布局方式，合理安排首页中的栏目。教材在设计个人网站前先介绍了网站和网页的关系，让学生首先对网站和网页两个概念有一个了解和界定，知道网站是由网页通过超连接非线性组成的。设计制作网站，就要明确网站的主题，名称及栏目结构等，还需要准备相应的素材。这些工作可以是同时进行的，也可以分步进行，相互补充。熟悉Dreamweaver学生能自主认识Dreamweaver工作界面，教师指导学生观察整个界面的组成，动手尝试使用各个菜单，了解Dreamweaver的各种工具。在这里，避免教师演示各个工具的位置，讲解各个工具的作用，让学生活动中亲自体会，不断尝试使用，在使用的过程中了解工具，掌握工具的使用方法和作用。定义本地站点定义本地站点是制作网站前的准备工作。所谓本地站点，就是指本地硬盘中存放远程网站所有文档的文件夹。通常建立网站时，在本地硬盘建立一个文件夹，用来存放网站的所有文件，以后就在该文件夹中创建和编辑文档。待网页制作和测试好后，使用远程上传工具把它们上传（发布）到服务器上，供浏览者查询浏览。对于站点文件夹的理解，教师可以举例学生平时经常浏览的网站来介绍，介绍中说明我们平常看到的网页只是整个网站中的一页，制作时需要把网页归到网站中去，这时就需要建立网站文件夹来容纳网页以形成网站。学生对站点的理解以及如何建站点，需要在反复练习中掌握，本课教材提供了定义本地站点的详细步骤和必要提示，教师可指导学生按此步骤，完成定义站点。定义站点之前，要做好站点结构规划，如果制作之前没有对整个站点的结构进行认真的研究，日后的维护工作将会很大。因此，一开始就要精心规划好整个站点，把站点资源分门别类，存于不同的文件夹中，便于日后的维护与管理。下图是一个简单的站点结构：在站点结构中，文件夹一般用自己便于记忆的英文单词或缩写来命名，如image文件夹用来存放与网页设计有关的图形图像，Webpage文件夹用来存放与网页设计有关的网页，data文件夹则存放数据库方面的内容，这样便于查找和管理，在需要的情况下，还可以创建子文件夹。用表格布局首页教师要让学生明白，网页上丰富内容的自如排列其实是被许多隐藏着的“虚线”所束缚，这些“虚线”就是表格线。表格在网页制作中起着对内容对象进行排版的重要作用。教师指导学生按照教材的指导插入表格，表格中插入表格被称为表格的嵌套，如教材中在“导航区”插入5行1列表格等。使用表格嵌套时层次要尽量少，因为表格嵌套层次越多，下载速度越慢。表格布局完成后，教师指导学生通过“属性”面板设置表格属性，根据内容，调整表格大小，设置网页背景等，美化网页。添加首页内容在页面中适当地添加图片会使网页丰富多彩，但过多地加入图片会降低页面的下载速度，特别是对通过调制解调器访问网页的用户。大多数图片都是采用压缩格式，有的调制解调器不具有压缩功能，这种调制解调器速度更慢。因此在插入图片时，应认真选择和进行规划，应适度使用较少颜色，缩小高度和宽度或裁剪图形、降低图形的分辨率，尽可能地减少图形文件大小，如用压缩格式的文件类型。注意图片文件要保存到image文件夹中，否则不能正常显示。学生可以事先把准备的图片素材就保存在image文件夹中。实践与探索为班级设计一个主题网页。教师可以组织学生根据本班实际情况，讨论网页所需包括的栏目、内容，学生可以分别按照自己的布局规划完成网页。【文本资源】什么是DreamweaverDreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。DREAMWEAVER、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA公司对它们的自信。说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程，随着互联网(Interne