河北版信息技术七年级下册《设计网站与制作首页》教学设计.docVIP

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