网站设计与制作.docx

1、网站设计与制作第六章 网站设计与制作一、 本章内容框架结构1使用第六章本章小结中的学习线路图。从学习线路图中，我们可以看出，网站的设计与制作可以分成三个阶段，即准备规划阶段、制作调试阶段和发布维护阶段。本章分别对这三个阶段的主要内容进行了阐述，并安排了相应的实践探究活动。在准备规划阶段，需要重点解决三方面的问题，一是如何确定网站的主题，以及确定主题的基本方法，二是资料的收集、整理原则及方法，三是网站总体布局的种类以及不同的特点。在制作调试阶段，完成一个主题网站制作的主要工作，并通过调试确保网站能够正常运行，这是本章的重点和难点。在发布维护阶段，将主题网站发布到因特网上，以便让更多的人能够访问，

2、并且通过对网站的日常维护，提高网站的稳定性、可靠性，同时，通过对网站的科学评估，进一步提高主题网站的性能和功能，保证主题网站能够真正为大家服务。二、 教材分析在本章中，我们要在前几章学习过的一些知识和技能的基础上，着重学习规划网站的方法，学习网站制作的方法，学习网站发布的方法，通过实际设计和制作一个主题网站，灵活运用这些知识和技能，并对制作的网站进行维护和评估。由于主题的设计和制作不可能由一个人在比较少的时间内独立完成，必须要通过小组合作的方法来完成。所以，本章的学习主要以小组合作学习的方式进行，有必要在开始本章的学习任务前，花些时间来组织每一个主题网站制作合作小组。在每个主题网站制作合作小组

3、中，应该合理搭配，尽量做到异质分组，即有意识地将不同性别、特长不同，特别是专长互补的同学安排在同一个小组，当然前提是这些同学的兴趣爱好基本一致，否则会影响网站主题的确定，一个得到大家共同认可的主题，是小组成员以后合作学习的基础。本章的综合穿探究活动是本册教材中综合探究活动要求最高的一个活动，需要同学有较高的动手能力和思维能力，许多内容看似比较简单，教材上的示例也没有具体的步骤，但事实上，其中的许多操作都有较高的技能要求，通过这些操作内容的实践，可以加强对学生综合能力的培养，从而使学生的实际操作能力，可以在前几章学习的基础上有进一步的飞跃和发展。三、 教学目标通过本章教学使学生：1、 掌握规划、

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

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

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

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

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

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

10、用上一章学习过的Dreamweaver软件中的导航功能，按照每个栏目的目录结构，建立网站的站点链接图。活动评价：除了实践体验活动共有的评价指标外，还需要对大家在实践体验活动中的表现按照评价指标进行自我评价。评价指标自我评价活动质量网站栏目的划分合理1分网站栏目的划分不合理0分网站站点目录的设计合理1分网站站点目录的设计不合理0分建立网站链接结构，熟练正确4分建立网站链接结构，较为熟练3分建立网站链接结构，基本正确2分建立网站链接结构，有待改进1分活动质量的各个评价指标的标准分别是：“网站栏目的划分合理”是指所划分的网站栏目能够体现网站主题各个方面的内容。“网站栏目的划分不合理”是指所划分的网站

11、栏目与网站主题不相符或比较单一、涉及面太窄。“网站站点目录的设计合理”是指所设计的站点目录能够存放相应的网站内容，并且目录名称简单明了，管理和维护比较方便。“网站站点目录的设计不合理”是指所设计的站点目录结构不清晰，目录名称难以理解，影响以后的网站管理和维护。6.2 网站的制作与调试（一）教学要求1、 学会网站制作的基本方法和技巧。2、 学会网站的基本调试方法。（二）教学设计建议本节安排五个课时。设计制作一个精致、美观的网站首页，可以吸引网站访问者的注意力，提高访问者浏览网页内容的兴趣，从而最大限度地发挥网站的作用。本节内容文字描述部分较多，教材中也没有安排相应的活动，在教学中，如果照本宣科的

12、话，可能无法吸引学生学习的兴趣。这部分内容应该说是比较简单的，对于大多数已经过信息技术基础的高中学生来说，理解、掌握这些内容没有太大的困难。1、关于版面布局形式建议以小组学习的方式，自学有关版面布局形式的有关内容。（1） 每个小组在学习有关教材内容的基础上，理解这些版面布局形式的特征。（2） 每个小组重点研究六种版面布局形式中的一种形式，分别在因特网上查找两个符合所研究的版面布局形式特征的网站首页（注意不包括著名的门户网站），并下载保存查找到的网站首页。（3） 每个小组在班级中向所有同学介绍所查找到的网站首页，并说明这些网站首页所属的版面布局形式及特征。特别注意，由于有些版面布局形式国外的网站

13、用得比较多，如果学生查找有困难，教师可以在课前事先查找并下载一些各种形式的网站首页，把这些首页保存在教师机的共享文件夹或文件服务器上，供学生从中进行查找，方便教学，提高学习效率。2、关于页面色彩规划对于页面色彩的规划，同样可以通过自学，让每个小组的同学分别在因特网上查找一些页面色彩比较单纯（即以一种颜色为主色彩）的网页，说明使用这些色彩的理由，并分析这些色彩所表达的象征意义是否与相应的网站主题相一致。3、关于网站首页设计教材通过一个首页设计的示例，介绍了“同”字形布局首页的制作方法和技巧。虽然，这个示例在下一小节的综合探究活动中仍然可以参考使用，但作为本节的主要学习内容，通过一个具体的活动来体

14、验其中的方法和技巧，无疑是非常有意义的。所以，建议大家在教学中，增加一个实践体验活动“网站首页的设计制作”。每个小组按照前面确定的网站主题和栏目设计方案，参照教材示例中的具体方法和步骤，设计制作网站的首页。版面布局形式一般以“同”字形较为常见，设计制作也相对比较简便。网站中的其他各个栏目的网页，通过本节的综合探究活动“网站的设计与制作”，由小组各成员分工练习完成。4、关于网站测试为了保证所制作的主题网站链接的正确，必须对网站的链接准确性进行认真的测试。建议大家将所要测试的网站所在的文件夹包括所有的文件和子文件夹，复制到另一个不同的文件夹中，然后进行测试。这样可以防止因为在链接中使用绝对路径造成

15、在本地计算机测试完全正确，而上传到因特网后无法正确链接的情况发生。（三） “实践探究”活动指导综合探究“网站的设计与制作”活动目的：（1） 掌握网站设计与制作的基本方法。（2） 掌握一定的网站设计与制作技巧。活动步骤：（1） 建议本活动的第一个步骤的学习内容放在上一小节进行，即学习了网站首页的设计方法后，按照本活动第一步骤的内容，设计本小组准备制作的网站的首页布局，规划页面的各个功能模块，并对页面各个功能模块的内容按照网站制作的实际要求进行认真规划，使之具有可行性。（2） 针对网站的各个功能模块，在小组内进行分工，每位同学负责一个功能模块的制作，并合成为一个完整的网站。可以使用FrontPag

16、e 2000/XP、Dreamweaver等网站制作软件。（3） 重点对制作好的网站进行测试。主要测试两方面的内容，一是链接有效性的测试，不能有错误的链接，如果有错误的链接，必须查明原因，并采取与之相适应的措施，加以修改，保证网站内容能被正常访问。二是不同分辨率的测试，将屏幕的分辨率依次设置为800*600和1024*768，分别进行网站浏览，找出其中页面不对齐、表格错位、文字混乱等问题，并加以调整解决。活动评价：除了综合探究活动的常规评价指标外，特别对“网站设计与制作的活动质量”进行了专门的评价。评价指标自我评价活动质量制作主题网站，合理美观6分制作主题网站，布局合理5分制作主题网站，布局简

17、单3分制作主题网站，还需规划2分网站设计与制作的活动质量的各个评价指标的标准分别是：“合理美观”是指所制作的网站布局合理、功能齐全，并且色彩搭配和谐，整体感觉美观大方，易于吸引访问者的注意力。“布局合理”是指所制作的网站布局合理、功能较为完备，能够表达网站主题。“布局简单”是指所制作的网站布局简单、功能单一，满足网站的基本要求。“还需规划”是指所制作的网站布局无序，无法实现网站的基本功能，需要重新加以设计、制作。6.3 网站的发布、维护和评估（一）教学要求1、 学会网站发布的基本技能和技巧。2、 掌握网站维护的基本方法和技能。3、 懂得评估网站的一般方法和技能。（二）教学设计建议本节安排四个课

18、时。制作网站的目的不是为了孤芳自赏，而是为了能让更多的人分享自己的成果和心得，所以，主题网站制作完成后，应该将其发布到因特网上，以便让大家能够通过因特网，在任何时间、任何地点都能访问这些网站，获取更多的信息。1、关于网站的发布。目前，提供免费个人网站空间服务的网站变化较快，所以在教学中可以通过因特网查找一些当时仍然提供免费网站空间服务的网站，供教学中使用，也可以让学生自己查找。如果条件不允许，无法在因特网上申请到免费网站空间，或没有条件购买收费的空间，那么，就应该在学校服务器上安装FTP服务功能，让同学们将制作完成的主题网站上传到学校的服务器上，供大家在校园网内浏览。如果学校通过光缆或宽带接入

19、因特网，也可以将该服务器的IP地址设置成因特网地址，这样，因特网上的用户就能访问到同学们制作的主题网站，大家在家通过上网也能访问自己的网站了。常用的网站上传方式，除了教材上介绍的“在线方式上传”、“网页制作工具的上传功能”以及“FTP专用工具”等三种方式外，最简便的上传方式是，对于支持FTP功能的免费网站空间而言，直接用浏览器的FTP访问功能，还能使用FTP命令，也能方便地上传网站而不必使用专门的软件工具。在浏览器的地址栏中输入形如“ftp:/网站上传地址”的URL，在输入用户名和口令后，就能用浏览器访问服务器上相应目录内的所有目录和文件，接下来，就可以象在本地计算机上操作一样，进行复制、删除

20、、改名等文件操作。只要把主题网站目录中的所有文件包括文件夹等复制到相应的目录中，就能完成上传网站的工作。如上图所示，在浏览器的地址栏中输入“ftp:/202.120.92.215”并按回车后，在出现的“登录身份”窗口中，输入用户名和密码后，就能进行文件操作。除此之外，使用FTP命令也能上传网站，具体命令格式在第三章的相关章节中有具体介绍。当然，用这种方法上传网站速度较慢，也不支持断点续传、同步更新等功能，比较适合于少量文件上传的情况，一般情况下，应该使用专门的FTP软件来进行网站上传。有条件的学校可以在因特网上注册一个域名，或者免费申请一个网易域名转向服务的账号（“”），并将域名指向自己制作的

21、主题网站的地址。也可以使用“花生壳”免费动态域名解析服务（），只要自己的计算机接入因特网，就能将自己的计算机变成服务器，供大家通过因特网来访问。2、关于网站的评估在网站的评估标准中，兼容性可以通过多试用几个浏览器来访问被测网站来评价。搜索引擎上出现率，通过使用几个常用的搜索引擎对同一个网站名称进行检索，比较不同网站的出现次数即可知道哪一个网站出现率高。站点速度的评估，一种方法是自己用浏览器分别访问被测网站，记录这些网站的首页全部打开所花费的时间，并加以比较。另一种方法是使用专门的网站速度测试软件进行较精确的测试，这类测试软件一般都是免费或共享软件，可以在因特网上免费下载。被链接率的测试，可以通

22、过搜索引擎的高级搜索功能，得到链接被测试网站的网页数。比如，在Google网站中，单击“高级搜索”，在“高级搜索”网页的“搜索特定网页”区域的键连输入框中，输入需要测试的网站的网址，单击“查”按钮，如下所示，就能得到与之链接的网页数，以及与之相链接的网页列表。或者，直接在搜索引擎的搜索关键词输入框中，输入形如“link:”的关键词，也能得到相同的结果。（三） “实践探究”活动指导实践体验“网站的发布与评估”活动目的：（1） 掌握申请免费主页空间的方法。（2） 掌握发布网站的方法。（3） 知道网站评估的方法。活动步骤：（1） 通过搜索引擎在因特网上查找几个提供免费网站空间服务并支持FTP上传方式

23、的网站，以小组为单位，尝试在这些网站中申请免费网站空间。（2） 将制作完成的主题网站，通过FTP方式，上传到申请到的免费网站空间，并进行适当的调试和维护，保证网站能正常运行。（3） 首先，对本班中除自己小组制作的主题网站外的所有主题网站，按照网站的常用评估标准，分别进行评估。然后，在班级中由各小组汇报评估的结果，经过汇总后，评选出班级最佳网站，并结合对站点速度的检测，总结出免费主页空间的性能比较表。活动评价：除了实践体验活动共有的评价指标外，还需要对大家在实践体验活动中的表现按照评价指标进行自我评价。评价指标自我评价活动质量域名、主页空间申请成功1分域名、主页空间申请不成功0分网站上传成功1分

24、网站上传不成功0分对网站的评估，全面且有见解4分对网站的评估，较为全面3分对网站的评估，言之有理2分对网站的评估，词不达意1分“网站的发布与评估”活动质量的各个评价指标的标准分别是：“成功”与“不成功”采用1/0记分法，即成功给1分，不成功则不给分。“对网站的评估，全面且有见解”是指能从各个方面对网站进行评估，并能对被评估的网站提出科学、可行、正确、有意义的建议或意见。“对网站的评估，较为全面”是指能从多个方面对网站进行评估，并且所提的意见较有针对性。“对网站的评估，言之有理”是指能对被评估的网站提出中肯的意见，且有较为可行的整改建议。“对网站的评估，词不达意”是指对网站的评估不够全面，对被评

25、估的网站缺乏足够的认识，所提意见无的放矢，提不出较高质量的建议。六、 知识、技能拓展1、 改变JPG文件的大小在网站制作中经常会用到JPG格式的图片文件，一般来说，放在网页中的JPG文件的分辨率可以适当降低以方便在网上传输，可以提高图片下载、显示的速度。改变JPG文件大小的软件很多，包括PhotoShop在内的许多图像处理软件，都可以改变JPG文件的大小，还有许多软件专用于JPG文件的处理。我们常用的看图软件AcdSee也能实现这类功能。方法是：首先，用AcdSee查看准备改变文件大小的JPG图片，执行菜单中的“另存为”命令“Save As”，出现“Save image as”对话框。然后，单

26、击“Options”按钮，在出现的“JPEG Options”对话框中，拖动“Image quality”区域的标尺，改变JPEG文件的图像质量，同时也就改变了文件的大小。标尺越接近右边的“Best quality”，表示图片的质量越高，但文件越大；反之，标尺越接近左边的“Best compression”，则表示图片的质量越差，不过文件就变小许多。至于，到多少位置才比较合适，需要根据不同的需要，以及原图的质量来确定，多试几次就能得到在网页中效果不差但文件又小的JPG文件。2、 注册因特网域名目前，可以通过国内的因特网域名注册代理商申请注册域名，其中较有影响的域名注册代理商有“新网”和“万网”

27、等几家。注册因特网域名的方法是：（1） 访问域名注册代理商网站，如Http:/。（2） 一般这些网站的网页上都有域名查询功能，将自己准备注册的域名，填入“域名查询”表格进行查询。如对域名进行查询，则：（3） 如果已经有人注册了该域名，那就得另取一个域名，或者向该域名的所有者协商转让。如就已经被人注册了。（4） 如果该域名尚未有人注册，就可以通过注册获得该域名。如在作者编写本书时未被注册，那么，就可以通过“立即注册”进行注册。3、 动态域名解析动态域名解析系统将用户的动态IP地址映射到一个固定的域名解析服务上（DDNS）.动态域名解析系统一般由两部分构成。第一部分是服务器端程序，位于服务商的主机

28、上。另一部分是客户端程序，就运行在广大用户的主机上。在每次连接网络的时候，客户端程序就会通过信息传递，把该主机的动态IP地址传送给位于服务商主机上的服务器程序，服务器程序负责提供DNS服务并实现动态域名解析服务，再收到客户端通知后服务器端程序立即更新数据，将新的IP地址和原有的固定域名绑定，这样就完成了动态域名解析的服务。别人也就可以通过域名访问你的服务器了。动态域名服务的功能，就是实现固定域名到动态IP地址之间的解析。用户每次上网得到新的IP地址之后，都要向DNS申请更新该域名解析数据库；在用户在线期间，Internet上的其他人要访问这个域名的时候，动态域名解析服务器就会返回正确的IP地址

29、。当用户下线时，DNS要停用该域名的服务，以免因为同一个IP地址重复利用引起混乱。七、 评价建议本章安排了四个实践探究活动，教师应该在学生进行自我评价的过程中，开展对学生的评价，在这四次活动中，教师对每位同学至少要评价两次，在此基础上，完成对每位学生在本章学习过程中学习情况的总体评价。下面是本章的学生总体评价样表，电子文稿在配套光盘中，大家可以根据所教班级的多少复制数份使用。第六章学生学习情况总体评价表学校： 届： 班级： 任课教师： 编号姓名活动一活动二活动三活动四总评123456789101112131415161718192021222324252627282930313233343536373839