第六章网站设计与制作上课件.doc

《第六章网站设计与制作上课件.doc》由会员分享，可在线阅读，更多相关《第六章网站设计与制作上课件.doc（8页珍藏版）》请在三一办公上搜索。

1、第六章 网站设计与制作一、本章内容框架网站设计与制作知识内容学生活动6.1网站的规划与设计6.2网站的制作与调试6.3网站的发布、维护和评估确定主题资料的收集、筛选和整理网站的布局川网站的制作网站的调试网站的发布网站的维护网站的评估实践体验：建站资料的收集与整理实践体验：网站规划综合探究：网站的设计与制作实践体验：网站的发布与评估主题确定的原则资料收集的途径，筛选、整理的步骤网站栏目、板块、目录结构、链接结构和整体风格版面布局形式、色彩规划以及网站制作。代码优化、网站测试的内容和方法网站发布的途径和上传网站更新、故障排除和网站安全网站评估的指标图6-1 “网站设计与制作”内容框架图从本章内容框

2、架中我们可以看出，网站的设计与制作可以分成三个阶段，即准备规划阶段、制作调试阶段和发布维护阶段。本章分别对这三个阶段的主要内容展开讨论，并安排了相应的实践探究活动。在准备规划阶段，需要重点解决三方面的问题，一是如何确定网站的主题，以及用来确定主题的基本方法；二是收集和整理资料的原则与方法；三是网站总体布局的几种类型以及各种布局的不同特点。在制作调试阶段，要完成一个主题网站制作的主要工作，并通过调试确保网站能够正常运行，这是本章的重点和难点。在发布维护阶段，将主题网站发布到因特网上，以便让更多的人能够访问，并且通过对网站的日常维护，提高网站的稳定性、可靠性。同时，通过对网站的科学评估，进一步提高

3、主题网站的性能和进行必要的功能扩充，保证主题网站能够高质量地为访问者提供满意的服务。二、 教材分析、难点分析在前几章学习过的知识和技能的基础上，本章着重学习规划网站的方法、网站制作的方法、网站发布的方法。通过实际设计和制作一个主题网站，灵活运用这些知识和技能，并对制作的网站进行维护和评估。由于主题网站的设计和制作很难由一个人在很短的时间内独立完成，通过小组合作的方法来完成网站的设计制作是一种较为合适的做法。所以，本章的学习主要以小组合作学习的方式进行，有必要在开始本章的学习任务前，花些时间来组织每个主题网站的设计制作合作小组。在每个制作主题网站的合作小组中，应该合理搭配，尽量做到异质分组，即有

4、意识地将不同性别、不同专长，专长互补的同学安排在一个小组，前提是这些同学的兴趣爱好基本一致，否则会影响网站主题的确定。一个得到大家共同认可的主题，能把小组成员合作学习中的精力汇聚起来。本章的综合穿探究活动是本册教材中综合探究活动要求最高的一个活动，对同学的动手能力和思维能力有较强的训练作用，许多内容看似比较简单，教材上的示例没有给出具体的步骤，但是，其中许多操作都有较高的技能要求，通过这些操作内容的实践，可以加强对学生综合能力的培养，从而使学生的实际操作能力，在前几章学习的基础上得到进一步的提高和进展。三、 教学目标通过本章教学使学生：1、 掌握规划、设计网站的步骤与方法2、 学会网站制作的基

5、本技能和技巧3、 学会网站发布的基本技能4、 知道管理与评估网站的方法和技能四、 课时分配建议小节内容实践探究活动课时61网站的规划与设计实践体验：建站资料的搜集与整理。实践体验：网站规划。262网站的制作与调试综合探究：网站的设计与制作。563网站的发布、维护和评估实践体验：网站的发布与评估。3合计10五、 各节教学要求和教学设计建议教材6.1节 网站的规划与设计（一）教学要求掌握规划、设计网站的基本步骤和方法。（二）教学设计建议建议用两个课时，通过两个实践体验活动，强化同学对信息来源的多样性和信息获取方法的多样性的认识。重点是让学生了解信息获取方法的多样性，知道网络是获取信息的一个重要途径

6、，但通过其他的途径同样可以获取信息。网站主题是一个网站的要素之一，必须予以足够的重视，可以在教学中适当增加一些实践体验活动。比如，可以增加一个讨论交流活动“怎样确定网站主题网站主题的比较与选择”，通过小组学习的方式，从几个备选的网站主题中，挑选出一个最合适的主题。在活动中，可以要求学生在因特网上浏览与这些主题类似的现有网站，做好分析工作，根据“人无我有，人有我专，人专我精”的原则，确定好一个网站主题。设计一个简单易记，便于联想的网站名字，也是一项需要动些脑筋的工作，同样应该避免雷同并要有新意。确定了网站的主题后，小组的各个成员就可以分工进行有关资料的收集和整理工作。首先，通过各种途径和方法，尽

7、可能多地收集建站用的资料，并分门别类地存放在相关的文件夹中。然后，对这些资料进行筛选和整理，找出有用的资料，并对这些资料进行整理。比如，将有些文本资料转换成网页格式，将有些图片文件的格式转换成可以在网页上使用的JPG格式，将有些图像或声音文件的格式转换成可以在网上实时播放的流媒体格式等。这些操作大多在信息技术基础和多媒体技术应用的教材或教师用书中有详细的说明，可以指导学生进行复习，并在实践中加以灵活运用。本节的内容是关系到网站制作能否成功的第一步。（三） “实践探究”活动指导1、第一个活动：实践体验“建站资料的搜集与整理”活动目的：（1） 掌握资料收集的方法，提高采集资料的能力。（2） 对收集

8、到的资料进行整理，提高资料整理能力。活动步骤：本活动以小组合作的形式进行学习，以四位同学为一组比较合适。（1） 要求每个小组搜集到的资料存放在同一个硬盘的指定文件夹中，并且将这个文件夹与班级中的其他同学共享，也可以将这些资料上传到教师机的指定共享文件夹中，或者开设的文件服务中，方便与其他同学的相互交流、学习。（2） 小组同学在充分讨论的基础上，对大家搜集到的资料进行比较、分析，从中筛选出基本符合要求的资料。（3） 各小组选出一位同学向全班同学介绍自己小组搜集到的资料，并说明采用这些资料的理由。活动评价：活动后，每位同学根据评价表分别进行自我评价，填写评价量表。除了实践体验活动共有的评价指标外，

9、还需要对学生在这项实践体验活动中的表现进行评价。评价指标自我评价活动质量网站开发资料收集活动，质优量多6分网站开发资料收集活动，题材不全5分网站开发资料收集活动，数量贫乏3分网站开发资料收集活动，有待努力2分活动质量的各个评价指标的标准分别是：“质优量多”是指收集到的开发网站的资料的含义与准备开发的网站主题相一致，并涉及与网站主题相关的各个方面，资料的种类比较齐备，数量较多。而且资料质量高，能在一定深度与广度上阐释主题。“题材不全”是指所收集的资料种类不多，只涉及网站主题的某一方面。“数量贫乏”是指所收集的资料数量很少。“有待努力”是指所收集的资料在数量和质量上，都无法满足网站建设对资料的需求

10、，需要进一步提高。2、第二个活动：实践体验“网站规划”活动目的：（1） 掌握网站栏目划分的原则。（2） 掌握站点目录建立的方法。（3） 掌握建立网站的链接结构的方法。活动步骤：以小组合作的形式进行本项实践体验活动。（1） 小组中的每位同学经过讨论、交流，参照示例，共同划分自己准备建立的网站的栏目名称，并初步确定每个栏目的主要内容。原则上不应该照抄教材上示例中的网站主题和栏目名称。（2） 根据每个栏目的不同内容，参考示例中的目录设计方法，设计网站中的目录结构，除了图片文件单独存放在一个子目录中外，如果用到了声音和视频资料，也要单独存放在一个子目录中，便于管理和维护。声音文件可以存放在Audio目

11、录中，视频资料则可以存放在Video目录中。（3） 使用上一章学习过的Dreamweaver软件中的导航功能，按照每个栏目的目录结构，建立网站的站点链接图。活动评价：除了实践体验活动共有的评价指标外，对每人在实践体验活动中的表现还需要按照评价指标进行自我评价。评价指标自我评价活动质量网站栏目的划分合理1分网站栏目的划分不合理0分网站站点目录的设计合理1分网站站点目录的设计不合理0分建立网站链接结构，熟练正确4分建立网站链接结构，较为熟练3分建立网站链接结构，基本正确2分建立网站链接结构，有待改进1分教材6.2 节 网站的制作与调试（一）教学要求1、 学会网站制作的基本方法和技巧。2、 学会网站

12、的基本调试方法。（二）教学设计建议本节内容大约需要安排五个课时才能做完。设计制作一个精致、美观的网站首页，可以吸引网站访问者的注意力，提高访问者浏览网页内容的兴趣，从而最大限度地发挥网站的作用。本节内容文字描述部分较多，教材中也没有安排相应的活动，在教学中，如果照本宣科的话，可能无法吸引学生学习的兴趣。这部分内容应该说是比较简单的，对于大多数已经过信息技术基础的高中学生来说，理解、掌握这些内容没有太大的困难。1、关于版面布局形式建议以小组学习的方式，自学有关版面布局形式的有关内容。（1） 每个小组在学习有关教材内容的基础上，理解这些版面布局形式的特征。（2） 每个小组重点研究六种版面布局形式中

13、的一种形式，分别在因特网上查找两个符合所研究的版面布局形式特征的网站首页（注意不包括著名的门户网站），并下载保存查找到的网站首页。（3） 每个小组在班级中向所有同学介绍所查找到的网站首页，并说明这些网站首页所属的版面布局形式及特征。特别注意，由于有些版面布局形式国外的网站用得比较多，如果学生查找有困难，教师可以在课前事先查找并下载一些各种形式的网站首页，把这些首页保存在教师机的共享文件夹或文件服务器上，供学生从中进行查找，方便教学，提高学习效率。2、关于页面色彩规划对于页面色彩的规划，同样可以通过自学，让每个小组的同学分别在因特网上查找一些页面色彩比较单纯（即以一种颜色为主色彩）的网页，说明使

14、用这些色彩的理由，并分析这些色彩所表达的象征意义是否与相应的网站主题相一致。3、关于网站首页设计教材通过一个首页设计的示例，介绍了“同”字形布局首页的制作方法和技巧。虽然，这个示例在下一小节的综合探究活动中仍然可以参考使用，但作为本节的主要学习内容，通过一个具体的活动来体验其中的方法和技巧，无疑是非常有意义的。所以，建议大家在教学中，增加一个实践体验活动“网站首页的设计制作”。每个小组按照前面确定的网站主题和栏目设计方案，参照教材示例中的具体方法和步骤，设计制作网站的首页。版面布局形式一般以“同”字形较为常见，设计制作也相对比较简便。网站中的其他各个栏目的网页，通过本节的综合探究活动“网站的设

15、计与制作”，由小组各成员分工练习完成。4、关于网站测试为了保证所制作的主题网站链接的正确，必须对网站的链接准确性进行认真的测试。建议大家将所要测试的网站所在的文件夹包括所有的文件和子文件夹，复制到另一个不同的文件夹中，然后进行测试。这样可以防止因为在链接中使用绝对路径造成在本地计算机测试完全正确，而上传到因特网后无法正确链接的情况发生。（三） “实践探究”活动指导综合探究“网站的设计与制作”活动目的：（1） 掌握网站设计与制作的基本方法。（2） 掌握一定的网站设计与制作技巧。活动步骤：（1） 建议本活动的第一个步骤的学习内容放在上一小节进行，即学习了网站首页的设计方法后，按照本活动第一步骤的内

16、容，设计本小组准备制作的网站的首页布局，规划页面的各个功能模块，并对页面各个功能模块的内容按照网站制作的实际要求进行认真规划，使之具有可行性。（2） 针对网站的各个功能模块，在小组内进行分工，每位同学负责一个功能模块的制作，并合成为一个完整的网站。可以使用FrontPage 2000/XP、Dreamweaver等网站制作软件。（3） 重点对制作好的网站进行测试。主要测试两方面的内容，一是链接有效性的测试，不能有错误的链接，如果有错误的链接，必须查明原因，并采取与之相适应的措施，加以修改，保证网站内容能被正常访问。二是不同分辨率的测试，将屏幕的分辨率依次设置为800*600和1024*768，

17、分别进行网站浏览，找出其中页面不对齐、表格错位、文字混乱等问题，并加以调整解决。活动评价：除了综合探究活动的常规评价指标外，特别对“网站设计与制作的活动质量”进行了专门的评价。评价指标自我评价活动质量制作主题网站，合理美观6分制作主题网站，布局合理5分制作主题网站，布局简单3分制作主题网站，还需规划2分网站设计与制作的活动质量的各个评价指标的标准分别是：“合理美观”是指所制作的网站布局合理、功能齐全，并且色彩搭配和谐，整体感觉美观大方，易于吸引访问者的注意力。“布局合理”是指所制作的网站布局合理、功能较为完备，能够充分表达网站主题。“布局简单”是指所制作的网站布局简单、功能单一，但能满足网站的

18、基本要求。“还需规划”是指所制作的网站布局无序，无法实现网站的基本功能，需要重新加以设计、制作。教材6.3节 网站的发布、维护和评估（一）教学要求1、 学会网站发布的基本技能和技巧。2、 掌握网站维护的基本方法和技能。3、 懂得评估网站的一般方法和技能。（二）教学设计建议本节安排四个课时。制作网站的目的不是为了孤芳自赏，而是为了能让更多的人分享自己的成果和心得，所以，主题网站制作完成后，应该将其发布到因特网上，以便让大家能够通过因特网，在任何时间、任何地点都能访问这些网站，获得本网站提供的信息。1、关于网站的发布。目前，提供免费个人网站空间服务的网站变化较快，所以在教学中可以通过因特网查找一些

19、当时仍然提供免费网站空间服务的网站，供教学中使用，也可以让学生自己查找。如果条件不允许，无法在因特网上申请到免费网站空间，或没有条件购买收费的空间，那么，就应该在学校服务器上安装FTP服务功能，让同学们将制作完成的主题网站上传到学校的服务器上，供大家在校园网内浏览。如果学校通过光缆或宽带接入因特网，也可以将该服务器的IP地址设置成因特网地址，这样，因特网上的用户就能访问到同学们制作的主题网站，大家在家中通过上网也能访问自己的网站了。常用的网站上传方式，教材中介绍了“在线方式上传”、“网页制作工具的上传功能”以及“FTP专用工具”等三种方式。其实，还有一种简便的上传方式，对于支持FTP功能的免费

20、网站空间而言，直接用浏览器的FTP访问功能，使用FTP命令，也能方便地上传网站而不必使用专门的软件工具。在浏览器的地址栏中输入形如“ftp:/网站上传地址”的URL，在输入用户名和口令后，就能用浏览器访问服务器上相应目录内的所有目录和文件。然后，就可以象在本地计算机上操作一样，进行复制、删除、改名等文件操作。只要把主题网站目录中的所有文件包括文件夹等复制到相应的目录中，就能完成上传网站的工作。图6-2 运用浏览器的FTP访问功能中“登录身份”窗口图如图6-2所示，在浏览器的地址栏中输入“ftp:/202.120.92.215”并按回车后，在出现的“登录身份”窗口中，输入用户名和密码后，就能进行

21、文件操作。除此之外，使用FTP命令也能上传网站，具体命令格式在教材第三章第四节中有具体介绍。当然，用这种方法上传网站速度较慢，也不支持断点续传、同步更新等功能，比较适合于少量文件上传的情况，一般情况下，应该使用专门的FTP软件来进行网站上传。有条件的学校可以在因特网上注册一个域名，或者免费申请一个网易域名转向服务的账号（“”），并将域名指向自己制作的主题网站的地址。也可以使用“花生壳”免费动态域名解析服务（），只要自己的计算机接入因特网，就能将自己的计算机变成服务器，供大家通过因特网来访问。2、关于网站的评估在网站的评估标准中，可以通过试用多个浏览器访问被测网站作为评价兼容性的标准。搜索引擎上

22、出现率，通过使用几个常用的搜索引擎对同一个网站名称进行检索，比较不同网站的出现次数，即可知道哪一个网站出现率高。站点速度的评估，一种方法是自己用浏览器分别访问被测网站，记录这些网站的首页全部打开所花费的时间，并加以比较。另一种方法是使用专门的网站速度测试软件进行较精确的测试，这类测试软件一般都是免费或共享的软件，可以从因特网上免费下载。被链接率的测试，可以通过搜索引擎的高级搜索功能，得到链接被测试网站的网页数。比如，在Google网站中，单击“高级搜索”，在“高级搜索”网页的“搜索特定网页”（见图6-3）区域的“链接”输入框中，输入需要测试的网站的网址，如下所示，单击“查”按钮，就能得到与之链

23、接的网页数，以及与之相链接的网页列表。图6-3 Google网站中的“搜索特定网页”对话框或者，直接在搜索引擎的搜索关键词输入框中，输入形如“link:域名（被查链接的网站的域名）”的关键词，也能得到相同的结果。（三） “实践探究”活动指导实践体验“网站的发布与评估”活动目的：（1） 掌握申请免费主页空间的方法。（2） 掌握发布网站的方法。（3） 知道网站评估的方法。活动步骤：（1） 通过搜索引擎在因特网上查找几个提供免费网站空间服务并支持FTP上传方式的网站，以小组为单位，尝试在这些网站中申请免费网站空间。（2） 将制作完成的主题网站，通过FTP方式，上传到已申请成功的免费网站空间，并进行适当的调试和维护，保证网站能正常运行。（3） 首先，对本班中除自己小组制作的主题网站外的所有主题网站，按照网站的常用评估标准，分别进行评估。然后，在班级中由各小组汇报评估的结果，经过汇总后，评选出班级最佳网站，并结合对站点速度的检测，总结出免费主页空间的性能比较表。活动评价：除了实践体验活动共有的评价指标外，还需要对各人在实践体验活动中的表现按照评价指标进行自我评价。评价指标自我评价活动质量域名、主页空间申请成功1分域名、主页空间申请不成功0分网站上传成功1分网站上传不成功0分对网站的评估，全面且有见解4分对网站的评估，较为全面3分对网站的评估，言之有理2分对网站的评估，词不达意1分