当前位置:首页 >> 其它课程 >>

第六章 网站设计与制作


第六章 网站设计与制作
一、本章内容框架

网站设计与制作

知识内容

学生活动

确定主题 6.1

主题确定的原则

网 站 的 规 划 与 设 计

实践体验:建站资 料的收集与整理

资料的收集、 筛选

和整理

资料收集的途径, 筛选、整理的步骤 实践体验:网站规划

网 站 的布 局 川 6.2

网站栏目、板块、 目录结构、链接结 构和整体风格 版面布局形式、色彩 规划以及网站制作。 综合探究:网站 的设计与制作

网 站 的 制 作 与 调 试

网站的制作

网站的调试

代码优化、网站测试 的内容和方法

图 6-1 “网站设计与制作”内容框架图 从本章内容框架中我们可以看出, 网站的设计与制作可以分成三个阶段, 即准备规划阶 段、制作调试阶段和发布维护阶段。本章分别对这三个阶段的主要内容展开讨论,并安排了

6.3

网站的发布

网 站 的 发 布 、 维 护 和 评 估

网站发布的途径 和上传

网站的维护

网站更新、故障 排除和网站安全

实践体验:网站 的发布与评估

网站的评估

网站评估的指标

相应的实践探究活动。在准备规划阶段,需要重点解决三方面的问题,一是如何确定网站的 主题,以及用来确定主题的基本方法;二是收集和整理资料的原则与方法;三是网站总体布 局的几种类型以及各种布局的不同特点。 在制作调试阶段, 要完成一个主题网站制作的主要 工作,并通过调试确保网站能够正常运行,这是本章的重点和难点。在发布维护阶段,将主 题网站发布到因特网上,以便让更多的人能够访问,并且通过对网站的日常维护,提高网站 的稳定性、可靠性。同时,通过对网站的科学评估,进一步提高主题网站的性能和进行必要 的功能扩充,保证主题网站能够高质量地为访问者提供满意的服务。

二、

教材分析、难点分析

在前几章学习过的知识和技能的基础上, 本章着重学习规划网站的方法、 网站制作的方 法、网站发布的方法。通过实际设计和制作一个主题网站,灵活运用这些知识和技能,并对 制作的网站进行维护和评估。 由于主题网站的设计和制作很难由一个人在很短的时间内独立完成, 通过小组合作的方 法来完成“网站的设计制作”是一种较为合适的做法。所以,本章的学习主要以小组合作学 习的方式进行, 有必要在开始本章的学习任务前, 花些时间来组织每个主题网站的设计制作 合作小组。 在每个制作主题网站的合作小组中,应该合理搭配,尽量做到异质分组,即有意识地将 不同性别、不同专长,专长互补的同学安排在一个小组,前提是这些同学的兴趣爱好基本一 致,否则会影响网站主题的确定。一个得到大家共同认可的主题,能把小组成员合作学习中 的精力汇聚起来。 本章的综合探究活动是本册教材中综合探究活动要求最高的一个活动, 对同学的动手能 力和思维能力有较强的训练作用, 许多内容看似比较简单, 教材上的示例没有给出具体的步 骤,但是,其中许多操作都有较高的技能要求,通过这些操作内容的实践,可以加强对学生 综合能力的培养, 从而使学生的实际操作能力, 在前几章学习的基础上得到进一步的提高和 进展。

三、 教学目标
通过本章教学使学生: 1、 掌握规划、设计网站的步骤与方法 2、 学会网站制作的基本技能和技巧 3、 学会网站发布的基本技能 4、 知道管理与评估网站的方法和技能

四、 课时分配建议
小节 6.1 6.2 6.3 合计 内容 网站的规划与设计 网站的制作与调试 网站的发布、维护和评估 实践探究活动 实践体验:建站资料的搜集与整理。 实践体验:网站规划。 综合探究:网站的设计与制作。 实践体验:网站的发布与评估。 课时 2 5 3 10

五、 各节教学要求和教学设计建议 教材 6.1 节 网站的规划与设计
(一)教学要求 掌握规划、设计网站的基本步骤和方法。 (二)教学设计建议 建议用两个课时,通过两个实践体验活动,强化同学对信息来源的多样性和信息获取 方法的多样性的认识。 重点是让学生了解信息获取方法的多样性, 知道网络是获取信息的一 个重要途径,但通过其他的途径同样可以获取信息。 网站主题是一个网站的要素之一, 必须予以足够的重视, 可以在教学中适当增加一些实 践体验活动。 比如,可以增加一个讨论交流活动“怎样确定网站主题——网站主题的比较与选择” , 通过小组学习的方式,从几个备选的网站主题中,挑选出一个最合适的主题。在活动中,可 以要求学生在因特网上浏览与这些主题类似的现有网站,做好分析工作,根据“人无我有, 人有我专,人专我精”的原则,确定好一个网站主题。 设计一个简单易记,便于联想的网站名字,也是一项需要动些脑筋的工作,同样应该避 免雷同并要有新意。 确定了网站的主题后,小组的各个成员就可以分工进行有关资料的收集和整理工作。 首先,通过各种途径和方法,尽可能多地收集建站用的资料,并分门别类地存放在相关的文 件夹中。然后,对这些资料进行筛选和整理,找出有用的资料,并对这些资料进行整理。比 如,将有些文本资料转换成网页格式,将有些图片文件的格式转换成可以在网页上使用的 JPG 格式,将有些图像或声音文件的格式转换成可以在网上实时播放的流媒体格式等。这些 操作大多在信息技术基础和多媒体技术应用的教材或教师用书中有详细的说明, 可以指导学 生进行复习,并在实践中加以灵活运用。 本节的内容是关系到网站制作能否成功的第一步。 (三) “实践探究”活动指导 1、第一个活动:实践体验“建站资料的搜集与整理” 活动目的: (1) 掌握资料收集的方法,提高采集资料的能力。 (2) 对收集到的资料进行整理,提高资料整理能力。 活动步骤: 本活动以小组合作的形式进行学习,以四位同学为一组比较合适。 (1) 要求每个小组搜集到的资料存放在同一个硬盘的指定文件夹中,并且将这个文件夹 与班级中的其他同学共享,也可以将这些资料上传到教师机的指定共享文件夹中, 或者开设的文件服务中,方便与其他同学的相互交流、学习。 (2) 小组同学在充分讨论的基础上,对大家搜集到的资料进行比较、分析,从中筛选出 基本符合要求的资料。 (3) 各小组选出一位同学向全班同学介绍自己小组搜集到的资料,并说明采用这些资料 的理由。 活动评价: 活动后,每位同学根据评价表分别进行自我评价,填写评价量表。 除了实践体验活动共有的评价指标外, 还需要对学生在这项实践体验活动中的表现进行 评价。 评价指标 自我评价

网站开发资料收集活动,质优量多 活动 质量 网站开发资料收集活动,题材不全 网站开发资料收集活动,数量贫乏 网站开发资料收集活动,有待努力

6分 5分 3分 2分

活动质量的各个评价指标的标准分别是: “质优量多” 是指收集到的开发网站的资料的含义与准备开发的网站主题相一致, 并涉 及与网站主题相关的各个方面,资料的种类比较齐备,数量较多。而且资料质量高,能在一 定深度与广度上阐释主题。 “题材不全”是指所收集的资料种类不多,只涉及网站主题的某一方面。 “数量贫乏”是指所收集的资料数量很少。 “有待努力”是指所收集的资料在数量和质量上,都无法满足网站建设对资料的需求, 需要进一步提高。 2、第二个活动:实践体验“网站规划” 活动目的: (1) 掌握网站栏目划分的原则。 (2) 掌握站点目录建立的方法。 (3) 掌握建立网站的链接结构的方法。 活动步骤: 以小组合作的形式进行本项实践体验活动。 (1) 小组中的每位同学经过讨论、交流,参照示例,共同划分自己准备建立的网站 的栏目名称,并初步确定每个栏目的主要内容。原则上不应该照抄教材上示例 中的网站主题和栏目名称。 (2) 根据每个栏目的不同内容,参考示例中的目录设计方法,设计网站中的目录结 构,除了图片文件单独存放在一个子目录中外,如果用到了声音和视频资料, 也要单独存放在一个子目录中,便于管理和维护。声音文件可以存放在 Audio 目录中,视频资料则可以存放在 Video 目录中。 (3) 使用上一章学习过的 Dreamweaver 软件中的导航功能,按照每个栏目的目录结 构,建立网站的站点链接图。 活动评价: 除了实践体验活动共有的评价指标外, 对每人在实践体验活动中的表现还需要按照评价 指标进行自我评价。 评价指标 网站栏目的划分合理 网站栏目的划分不合理 网站站点目录的设计合理 活动 质量 网站站点目录的设计不合理 建立网站链接结构,熟练正确 建立网站链接结构,较为熟练 建立网站链接结构,基本正确 1分 0分 1分 0分 4分 3分 2分 自我评价

建立网站链接结构,有待改进

1分

教材 6.2 节 网站的制作与调试 (一)教学要求 1、 学会网站制作的基本方法和技巧。 2、 学会网站的基本调试方法。 (二)教学设计建议 本节内容大约需要安排五个课时才能做完。 设计制作一个精致、美观的网站首页,可以吸引网站访问者的注意力,提高访问者浏览 网页内容的兴趣,从而最大限度地发挥网站的作用。 本节内容文字描述部分较多,教材中也没有安排相应的活动,在教学中,如果照本宣科 的话,可能无法吸引学生学习的兴趣。 这部分内容应该说是比较简单的, 对于大多数已经过 《信息技术基础》 的高中学生来说, 理解、掌握这些内容没有太大的困难。 1、关于版面布局形式 建议以小组学习的方式,自学有关版面布局形式的有关内容。 (1) 每个小组在学习有关教材内容的基础上,理解这些版面布局形式的特征。 (2) 每个小组重点研究六种版面布局形式中的一种形式,分别在因特网上查找两个 符合所研究的版面布局形式特征的网站首页(注意不包括著名的门户网站) ,并 下载保存查找到的网站首页。 (3) 每个小组在班级中向所有同学介绍所查找到的网站首页,并说明这些网站首页 所属的版面布局形式及特征。 特别注意,由于有些版面布局形式国外的网站用得比较多,如果学生查找有困难,教师 可以在课前事先查找并下载一些各种形式的网站首页, 把这些首页保存在教师机的共享文件 夹或文件服务器上,供学生从中进行查找,方便教学,提高学习效率。 2、关于页面色彩规划 对于页面色彩的规划, 同样可以通过自学, 让每个小组的同学分别在因特网上查找一些 页面色彩比较单纯(即以一种颜色为主色彩)的网页,说明使用这些色彩的理由,并分析这 些色彩所表达的象征意义是否与相应的网站主题相一致。 3、关于网站首页设计 教材通过一个首页设计的示例,介绍了“同”字形布局首页的制作方法和技巧。虽然, 这个示例在下一小节的综合探究活动中仍然可以参考使用, 但作为本节的主要学习内容, 通 过一个具体的活动来体验其中的方法和技巧,无疑是非常有意义的。所以,建议大家在教学 中,增加一个实践体验活动“网站首页的设计制作” 。 每个小组按照前面确定的网站主题和栏目设计方案,参照教材示例中的具体方法和步 骤,设计制作网站的首页。版面布局形式一般以“同”字形较为常见,设计制作也相对比较 简便。网站中的其他各个栏目的网页,通过本节的综合探究活动“网站的设计与制作” ,由 小组各成员分工练习完成。 4、关于网站测试 为了保证所制作的主题网站链接的正确, 必须对网站的链接准确性进行认真的测试。 建 议大家将所要测试的网站所在的文件夹包括所有的文件和子文件夹, 复制到另一个不同的文 件夹中, 然后进行测试。 这样可以防止因为在链接中使用绝对路径造成在本地计算机测试完 全正确,而上传到因特网后无法正确链接的情况发生。

(三) “实践探究”活动指导 综合探究“网站的设计与制作” 活动目的: (1) 掌握网站设计与制作的基本方法。 (2) 掌握一定的网站设计与制作技巧。 活动步骤: (1) 建议本活动的第一个步骤的学习内容放在上一小节进行,即学习了网站首页的 设计方法后,按照本活动第一步骤的内容,设计本小组准备制作的网站的首页 布局,规划页面的各个功能模块,并对页面各个功能模块的内容按照网站制作 的实际要求进行认真规划,使之具有可行性。 (2) 针对网站的各个功能模块,在小组内进行分工,每位同学负责一个功能模块的 制作,并合成为一个完整的网站。可以使用 FrontPage 2000/XP、Dreamweaver 等网站制作软件。 (3) 重点对制作好的网站进行测试。主要测试两方面的内容,一是链接有效性的测 试,不能有错误的链接,如果有错误的链接,必须查明原因,并采取与之相适 应的措施,加以修改,保证网站内容能被正常访问。二是不同分辨率的测试, 将屏幕的分辨率依次设置为 800*600 和 1024*768,分别进行网站浏览,找出其 中页面不对齐、表格错位、文字混乱等问题,并加以调整解决。 活动评价: 除了综合探究活动的常规评价指标外,特别对“网站设计与制作的活动质量”进行了专 门的评价。 评价指标 制作主题网站,合理美观 活动 质量 制作主题网站,布局合理 制作主题网站,布局简单 制作主题网站,还需规划 6分 5分 3分 2分 自我评价

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

本节安排四个课时。 制作网站的目的不是为了孤芳自赏, 而是为了能让更多的人分享自己的成果和心得, 所 以,主题网站制作完成后,应该将其发布到因特网上,以便让大家能够通过因特网,在任何 时间、任何地点都能访问这些网站,获得本网站提供的信息。 1、关于网站的发布。 目前, 提供免费个人网站空间服务的网站变化较快, 所以在教学中可以通过因特网查找 一些当时仍然提供免费网站空间服务的网站,供教学中使用,也可以让学生自己查找。 如果条件不允许,无法在因特网上申请到免费网站空间,或没有条件购买收费的空间, 那么,就应该在学校服务器上安装 FTP 服务功能,让同学们将制作完成的主题网站上传到 学校的服务器上,供大家在校园网内浏览。如果学校通过光缆或宽带接入因特网,也可以将 该服务器的 IP 地址设置成因特网地址,这样,因特网上的用户就能访问到同学们制作的主 题网站,大家在家中通过上网也能访问自己的网站了。 常用的网站上传方式,教材中介绍了“在线方式上传” 、 “网页制作工具的上传功能”以 及“FTP 专用工具”等三种方式。其实,还有一种简便的上传方式,对于支持 FTP 功能的 免费网站空间而言,直接用浏览器的 FTP 访问功能,使用 FTP 命令,也能方便地上传网站 而不必使用专门的软件工具。 在浏览器的地址栏中输入形如“ftp://网站上传地址”的 URL,在输入用户名和口令后, 就能用浏览器访问服务器上相应目录内的所有目录和文件。 然后, 就可以象在本地计算机上 操作一样,进行复制、删除、改名等文件操作。只要把主题网站目录中的所有文件包括文件 夹等复制到相应的目录中,就能完成上传网站的工作。 图 6-2 运用浏览器的 FTP 访问功能中“登录身份”窗口图 如图 6-2 所示,在浏览器的地址栏中输入“ftp://202.120.92.215”并按回车后,在出现的 “登录身份”窗口中,输入用户名和密码后,就能进行文件操作。 除此之外,使用 FTP 命令也能上传网站,具体命令格式在教材第三章第四节中有具体 介绍。 当然,用这种方法上传网站速度较慢,也不支持断点续传、同步更新等功能,比较适合 于少量文件上传的情况,一般情况下,应该使用专门的 FTP 软件来进行网站上传。 有条件的学校可以在因特网上注册一个域名, 或者免费申请一个网易域名转向服务的账 号( “http://my.yeah.net” ) ,并将域名指向自己制作的主题网站的地址。也可以使用“花生壳” 免费动态域名解析服务(http://www.oray.net) ,只要自己的计算机接入因特网,就能将自己 的计算机变成服务器,供大家通过因特网来访问。 2、关于网站的评估 在网站的评估标准中,可以通过试用多个浏览器访问被测网站作为评价兼容性的标准。 搜索引擎上出现率, 通过使用几个常用的搜索引擎对同一个网站名称进行检索, 比较不 同网站的出现次数,即可知道哪一个网站出现率高。 站点速度的评估, 一种方法是自己用浏览器分别访问被测网站, 记录这些网站的首页全 部打开所花费的时间, 并加以比较。 另一种方法是使用专门的网站速度测试软件进行较精确 的测试,这类测试软件一般都是免费或共享的软件,可以从因特网上免费下载。 被链接率的测试,可以通过搜索引擎的高级搜索功能,得到链接被测试网站的网页数。 比如,在 Google 网站中,单击“高级搜索” ,在“高级搜索”网页的“搜索特定网页” (见图 6-3)区域的“链接”输入框中,输入需要测试的网站的网址,如下所示,单击“查” 按钮,就能得到与之链接的网页数,以及与之相链接的网页列表。 图 6-3 Google 网站中的“搜索特定网页”对话框

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


相关文章:
第六章网站设计与制作上
第六章 网站设计与制作一、本章内容框架 网站设计与制作 知识内容 学生活动 确定主题 6.1 主题确定的原则 网站的规划与设计 实践体验:建站资 料的收集与整理 ...
第六章 网站设计与制作
第六章 网站设计与制作一、本章内容框架 网站设计与制作 知识内容 学生活动 确定主题 6.1 主题确定的原则 网站的规划与设计 实践体验:建站资 料的收集与整理 ...
第六章 网页的设计与制作
第六章 网页设计与制作本章学习要求如下表: 章节 第一节第二节 基本要求 ⒈了解网页网站的基本概念 ⒉理解网页的基本元素 ⒊了解基本的网页制作工具软件 ⒈...
第六章 网页设计与制作试题答
网站建设的内容 暂无评价 1页 免费如要投诉违规内容,请到百度文库投诉中心;如要提出功能问题或意见建议,请点击此处进行反馈。 第六章 网页设计与制作试题答 隐藏>...
第六章网页表格的设计
《HTML 网页设计》教案 章节课题 列 1 号共 3 页 第六章 网页表格的设计 2015 年 3 月 30 日 第四周 授课时数 2 学时 授课日期 教学目的 1.了解网页...
第六章网页制作基础
第六章网页制作基础 网页是网站的基本组成,要想制作网站,必须学会制作网页。有关...网页的版式与布局技巧、网页 中的超链接等,为下章的网站设计与制作奠定基础。 ...
浙教版高一年级第六章第一节《网站和网页》的教学设计
浙教版高一年级第六章第一节《网站和网页》的教学设计_建筑/土木_工程科技_专业...bluegeinus@163.com 【设计思想】 本堂课是学习网页制作的第一课,根据新课程...
个人网站的设计与制作毕业论文
个人网站的设计与制作毕业论文_其它_高等教育_教育专区。毕业论文 计算机专业论文...31 淄博职业学院毕业设计 第六章 网站的测试 一个好的网站建设好了之后是不能...
第六章系统设计
新闻网页贴吧知道音乐图片视频地图百科文库 搜 试试 帮助 全部 DOC PPT TXT ...第6章 系统设计 第6章 系统设计电子设计与制作的对象范围广泛,从控制工程到测量...
更多相关标签:
网站设计制作 | 网站设计与制作培训 | 网站推广设计制作 | 企业网站设计制作 | 班级网站设计与制作 | 深圳网站设计制作 | 北京网站设计制作 | 网站设计与制作教程 |