河北省秦皇岛市抚宁县驻操营学区初中信息技术第二册 第六课 设计网站与制作首页教案 新人教版.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我们应该了解一下网页编辑器的发展过程，随着互联网(internet) 的家喻户晓，html技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在word中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点： 一、 难以精确达到与浏览器完全一致的显示效果。也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来； 二、 页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的html代码都在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的html代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。在dreamweaver之前，frontpage98一直被人们认为是最好的所见即所得网页编辑器，但是它同样继承了所见即所得的种种劣性。但是我说过这是在dreamweaver之前，现在我无意说dreamweaver已经实现网页设计师的梦想，但我觉得dreamweaver正在努力向这个梦想一步步走去。 dreamweaver特点：1最佳的制作效率 dreamweaver可以用最快速的方式将fireworks，freehand，或photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。dremweaver能与您喜爱的设计工具，如playback flash，shockwave和外挂模组等搭配，不需离开dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使dreamweaver自动开启firework或photoshop来进行编辑与设定图档的最佳化。 2网站管理 使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，dreamweaver 会自动更新所有连结。使用支援文字、html码、html属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 3无可比拟的控制能力 dreamweaver是惟一提供roundtrip html、视觉化编辑与原始码编辑同步的设计工具。它包含homesite和bbedit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想象。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给third-party厂商，包含asp， apache，broadvision， cold fusion，icat， tango与自行发展的应用软体。当您正使用dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和xml dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出xml内容。全方位的呈现利用dreamweaver设计的网页，可以全方位的呈现在任何