第七章网站的设计与制作.docx

第七章网站的设计与制作.docx

《第七章网站的设计与制作.docx》由会员分享，可在线阅读，更多相关《第七章网站的设计与制作.docx（8页珍藏版）》请在冰豆网上搜索。

第七章网站的设计与制作

第七章网站的设计与制作 

网站是集成与发布信息的载体之一。

本章通过实际设计和制作一个主题网站一“山东特产”网站，以网站制作的一般过程为主线，学习规划、制作与发布网站的一般方法。

需要说明的是，各地教师在具体的教学过程中，可以采用更切实自己学生的主题（比如“最美是家乡”）；或者将特产的范围缩小，制作介绍本地特产的网站。

本章的学情分析可从以下几方面考虑：

1．学生已经能熟练地进行文件（文件夹）的新建、移动、复制、删除、重命名等windows的基本操作，初步具备分类存储与管理资料的能力。

2．具备了从规划希舄网页、填充网页内容到链接网页的一般技能，知道制作网页的一般方法。

3．会用动画制作软件制作简单的banner（广告条），能对图片进行简单的处理。

4．鼓励能力强的学生另选主题。

本章内容围绕建设“山东特产”网站这个大主题展开，共分五节，各节内容的安排体现了网站设计与制作的几大步，具有顺序性。

章的最后设置的综合实践的板块，是对本章所学内容的综合练习，各学校可以根据自己的实际进行选择教学。

在短短的几课时里，由一个人独立完成一个网站的规划与制作，有一定难度。

建议采取小组合作的方式进行。

在开始本章学习之前，教师要对学生进行分组，尽量根据学生的兴趣爱好进行异质分组，同组的同学最好志趣相同，然后兼顾性别、专长等因素，每组3～4人为宜。

具体办法，可以是学生先自由组合，然后由老师统筹调配。

本章的重点是网站的规划与制作，难点是网站的规划。

本章参考课时：

6～8课时，第3节至少要3课时。

综合实践2～3课时。

第1节   网站的筹备

1．必备资源本节课所用到的文字、图像等资源均以压缩文件形式存放在以下网站并可下载。

泰山出版社网站链接：

www．tscbs．corn2．参考资源★中国素材网http:

//www．sucai．corn／初中信息技术教师用书★网页制作大宝库http:

//www．dabaoku．com／★黄山特产网http:

//huangshantc．com／  1．教学目标知识与技能★知道从哪些方面人手筹备一个网站。

★依据主题，设计好网站的栏目。

★搜集整理好待建网站的资料。

过程与方法通过小组合作的方式，对要表达的主题进行分析，划分出几个主要栏目，并围绕这些栏目搜集相关的资料，进行整理和分类存储。

情感态度与价值观★通过制作以家乡特产为主题的网站，充分挖掘家乡的特产资源，增加学生对家乡的了解，进而热爱自己的家乡。

★培养学生合作交流的能力。

2．重点和难点重点是从哪些方面筹备一个网站；难点是确定哪些网站栏目，才能更好地表达主题。

本节是网站建设的起始阶段，筹备工作充分与否将直接影响到网站的成败，因此要引起学生的高度重视。

老师要注意引导学生分析利用网站表达信息的特点，并了解从哪些方面着手才能更好的表达主题，引导学生观察、讨论、交流、总结是本课的主要教学方法。

第二节 创建网站

1．教学目标

知识与技能★了解站点的实质。

★掌握创建站点的方法，知道什么是网站的根目录。

★会设计并建立网站的目录结构。

过程与方法通过创建一个主题站点，在资源管理器下观察站点名称，明白站点的实质：

即站点就是保存在磁盘上的某一文件夹；然后设计并建立网站的目录结构。

3．重点和难点创建站点、设计并建立网站的目录结构是重点，其中设计网站的目录结构又是难点。

二、教法设计在讲网站的实质时，建议教师采用演示法，让学生观察事先下载的网站结构；创建站点时则可以让学生小组合作完成，然后让小组充分讨论，共同设计出网站的目录结构，并以一人为主操作，在网站根目录下建立此目录结构。

1．导入新课让学生分别以浏览器方式和网上邻居方式访问教师机上事先下载好的网站，从而引入网站的实质，什么是网站的根目录等。

2．实践导引

（1）创建站点，指定网站的根目录注意从以下几方面对学生进行引导：

★创建站点时最好不要使用默认的站点位置，最好将站点建立在磁盘的根目录下。

★用“文件夹”试图查看网站的目录结构。

★两个默认文件夹“images”和“_private”的用途。

★从FrontPag。

环境和资源管理器浏览网站，进一步加深对网站以及网站根目录等概念的理解。

（2）设计网站的目录结构网站的目录结构设计是指建立网站时创建的目录，这对网站的维护、内容的扩充和移植都有着重要的影响。

设计时应注意以下几点：

★不要将所有文件都放在网站的根目录下，以免造成文件的混乱。

★一般应该按栏目或内容建立子目录，如images文件夹用于存放图片文件，Audio文件夹用于存放声音文件，Video文件夹用于存放视频资料。

★文件名不要使用中文。

建议先让各组在纸上规划好目录结构，再全班交流，看看各组设计得是否合理。

在磁盘上建立网站的目录结构则比较简单。

3．评价建议

评价项目

评价指标

小组自我评价（用彩笔涂星）

创建站点

站点创建成功（★）

站点创建不成功（★）

设计站点目录

站点目录设计合理（★）

站点目录设计不合理（★）

创建站点目录

按规划创建好站点目录（★）

未按规划创建好站点目录（★）

 项目名称评价指标4．助力本节课是学生在计算机上建站的第一课，因此有必要一开始就让学生了解一些建站的规范，本节要关注的是目录结构的规范。

5．加油让学生了解一些快速建立网站的方法，但要让学生明白其局限性。

 参考学案 

第二节创建网站（学案）

合作小组成员

第一环节

创建站点，指定网站的根目录

1、 指定网站的保存位置为：

_____________2、 网站的根目录是：

________________

第二环节

设计网站的目录结构

本组设计的网站的目录结构是_____________

第三环节

创建网站的目录结构

在frontpage中建立文件夹，应该在______________视图下进行。

第3节制作网页

1．必备资源本节课所用到的文字、图像等资源均以压缩文件形式存放在以下网站并可下载。

泰山出版社网站链接：

www．tscbs．com2．首页布局参考资源★新课程教育网http:

//www．xedu．net，★学习无忧网http:

//www．51study．net 教材分析1．教学目标知识与技能★熟悉网页制作的一般过程。

★完成站点中主要网页的制作。

过程与方法通过规划、制作网站的首页，学会制作网页的一般步骤。

3．重点和难点在上一章中，已经学习了网页制作的主要知识，本节是对这些知识的综合运用。

重点要放在如何规划制作一个网站的首页上。

教法设计设计制作一个精致、美观的网站首页，可以吸引网站访问者的注意力，提高访问者浏览网页内容的兴趣，从而最大限度地发挥网站的作用。

每个小组按照前面确定的网站主题和栏目设计方案，参照教材示例中的具体方法和步骤，设计制作网站的首页。

网站中的其他各个栏目的网页，由小组各成员分工完成。

1．导入新课可以以网站制作的一般过程为切入点，直接引入本节的内容。

然后复习制作一个网页的一般步骤：

布局网页、添加网页内容、美化网页。

2．实践导引1）设计网页版式，用表格布局网页根据上一章所学的网页版式知识，小组讨论确定网站首页的版式。

注意进行以下几方面的引导：

★网站首页的重要性★网站首页的常见版式★导航栏的位置设计2）添加网页元素，设置文本的格式和图片的属性由于网页中插入图片的方法与word中插入图片的方法有所不同，插入网站内的图片和网站外的图片又有差别，所以教师要着重强调，注意根据图片的来源选择不同的方法。

插入网站外的图片，其操作方法如下：

第一步：

执行“插入／图片／来自文件”菜单命令，出现如下的对话框：

 第二步：

单击“从计算机上选择一个文件”按钮，从磁盘上选择需要的图片文件。

注意快捷键“Shint+回车”和“回车”的区别。

3）美化网页美化网页的方式有很多，对网页中的文字进行字体和格式等设置，可以起到美化网页的作用。

这里主要是从统一网站风格的角度，使用网页背景和主题来美化网页，二者可以应用到网站中的所有网页。

制作网页（学案）

合作小组成员

第一环节

设计网页版式，用表格布局网页

本组网站首页的版式如下：

第二环节

添加网页元素本的格式和图片的属性

设置文换行但不分段的快捷键是：

______________。

分段的快捷键是：

________________。

第三环节

美化网页

哪些方法可以起到美化网页的作用?

第四环节

总结

制作网页的一般步骤是什么?

第4节链接网页

本节课所用到的文字、图像等资源均以压缩文件形式存放在以下网站并可下载。

泰山出版社网站链接：

WWW．tscbs．com 一、教材分析1．教学目标知识与技能★知道常见的网站链接结构有哪些，各自的优缺点是什么。

★会根据需要设计网站的链接结构。

★会创建超链接使网站连成一个整体。

★理解什么是相对链接和绝对链接。

2．过程与方法通过剖析典型网站的链接方式，了解网站的常见链接结构；运用以前所学的超链接知识，以小组合作方式将网页链接起来。

3．重点和难点设计网站的链接结构和建立超链接是本节的重点，其中，如何设计网站的链接结构、相对链接和绝对链接是本节的难点。

二、教法设计在学习网站的链接结构时，建议采用观察、讨论、归纳等方法；建立超链接时则采用小组合作的方式完成。

三、教学建议一、认知1．导入新课由“网站是由若干网页连接成的一个整体”出发，引出“如何将网页链接起来”、如何设计网站的链接结构”等问题。

2．实践导引。

（1）设计网站的链接结构网站的链接结构是指页面之间相互链接的拓扑结构，它建立在目录结构基础上，但可以跨越目录。

任何一个网站都离不开超链接。

课前准备两个典型的小网站（比如历届全国中学生电脑作品大赛的获奖作品），引导学生分析、总结以下内容：

★网站的页面分类：

首页（一级页面）、栏目页（二级页面）和内容页（三级页面）。

★网站的链接方式及其优缺点。

然后结合“助力”资料，小组讨论、设计本组网站的链接结构，再在全班交流。

（2）创建超链接先引导学生复习创建超链接的方法：

选中超链接源，指定超链接目标。

然后以小组为单位尝试链接网页。

此处可以介绍超链接的另一种分类方法：

站点内超链接和站点外超链接。

创建超链接时默认位置是站点内的文件。

注意引导学生观察创建了超链接的URL，引入相对超链接和绝对超链接的概念和意义。

3.    评价建议建议从以下几方面进行评价:

（1）      网站的超链接结构设计是否合理？

（2）      是否完成了网页的超链接？

4.    助力本资料有助于学生设计网站的超链接结构，旨在让学生养成建站的又一规范“导航设计”5.    加油为计算机上的文件提供下载时，注意以下几个问题文件超链接适用的情形：

为网站内的文件提供下载。

浏览器对超链接的处理方式。

创建到站点外的超链接，指在延伸网站内容。

制作网页（学案）

合作小组成员

第一环节

设计网站的超链接结构

网站的页面通常分为三级，其中，一级页面指_____________，二级页面指______________________，三级页面指__________________________网站的超链接结构有哪几种类型？

___________________本组风站采用的超链接结构是_________________。

第二环节

创建超链接

创建超链接的基本步骤是：

按位置对超链接进行分类，可以分为站点内的超链接和___________。

下列URL的超链接是绝对超链接还是相对超链接______？

将网站内的所有网页超链接起来。

拓展：

尝试为网站内的文件提供超链接下载。

 第五节 调试与发布站点P42全正确、上传到因特网后无法正确超链接的情况发生。

超链接主要进行链接有效性的测试，不能有错误的链接。

对于错误的链接，必须查明原因，并采取与之相适应的措施，加以修改，保证网站内容能被正常访问。

2．申请网站空间网络是个动态的空间，提供免费个人空间服务的网站变化较快。

为了提高课堂教学效率，建议教师课前通过因特网查找一些当时仍然提供免费网站空间服务并支持FTP上传方式的网站，为学生提供参考。

然后以小组为单位，尝试在这些网站上申请免费网站空间。

课后可以安排学生使用搜索引擎在因特网上自己查找免费空间。

如果条件不允许，无法在因特网上申请到免费的网站空间，或没有条件购买收费的空间，可以在教师机上安装FTP服务功能，让学生将制作完成的网站上传到教师机上，供大家浏览。

3．上传网站常用的网站上传方式有“在线方式上传”、“网页制作工具的上传功能”以及“FTP专用工具”等。

将制作完成的网站，通过FTP方式，上传到已申请成功的免费网站空间，并进行适当的调试，保证网站能否正常运行。

评价项目

评价指标

自我评价

调试网站 

内容

内无语法错误、图片与主题相关（1分）

有语法错误、有的图片与主题无关（O分）

超链接

超超链接有效正常（1分）

接有无效的超链接（O分） 

申请网站空间 

域名、主页空间申请成功（1分）

域名、主页空间申请不成功（o分）

上传网站

网站上传成功（1分）

网站上传不成功（O分）

 6．加油为了让更多的人知道自己的网站，离不开必要的网站宣传。

宣传网站的方法有很多，而且随着网络的不断应用，方法还会不断增加。

本资料只列出了其中的几种，供学生参考。

1．检查网页内容，避免出现语句不通、语法错误、图像的选择不符合主题等情况；检查超链接是否正常和有效。

2．略。

3．略。

 参考学桑、 

调试与发布站点（学案）

合作小组成员

第一环节

调试网站

本组对网站进行了哪些方面的调试?

发现的问题有：

________________

第二环节

接

网站空间有收费空间和两种。

申请网站空间本组是从哪个网站申请的免费空间?

本组申请到的网站空间的域名是：

______________。

第三环节

上传网站

上传网站的工具有哪些?

__________________本组使用的上传网站的工具是：

________________________。

 《网页的筹备》教学案 1．教学目标知识与技能★知道从哪些方面人手筹备一个网站。

P44-46

附录1：

网站设计技术规范1．命名规范总体原则：

以最少的字母达到最容易理解的意义。

（1）一般文件及目录的命名规范★每一个目录中应该包含一个缺省的htm文件，文件名统一用index．htm。

★文件名称统一用小写的英文字母、数字和下划线的组合。

★尽量以单词的英语翻译为名称。

例如：

feedback（信息反馈），aboutus（关于我们）。

★多个同类型文件使用英文字母加数字命名，字母和数字之间用一分隔。

例如：

news_01．htm。

注意，数字位数与文件个数成正比，不够的用0补齐。

例如共有200条新闻，其中第18条命名为news—018．htm。

（2）图片的命名规范★名称分为头尾两部分，用下划线隔开，如banner—sohu．gif。

★头部分表示此图片的大类性质。

例如：

放置在页面顶部的广告、装饰图案等长方形的图片取名为banner；标志性的图片取名为logo；在页面上位置不固定并且带有链接的小图片取名为button；在页面上某一个位置连续出现、性质相同的链接栏目的图片取名为menu；装饰用的照片取名为pic；不带链接表示标题的图片取名title；依照此原则类推。

★尾部分用来表示图片的具体含义，用英文字母表示。

例如：

bannersohu．gif、banner—sina．gif、menu—aboutus．gif、menu—job．gif、tittle—ews．gif、logo—police．gif、logo—national．gif、pie—people．jpg、pic—hill．jpg等。

★有onmouse效果的图片，两张分别在原有文件名后加“0n”和“off”命名。

2．目录结构规范总体原则：

以最少的层次提供最清晰简便的访问结构。

★根目录一般只存放index．htm以及其他必须的系统文件。

★每个主要栏目开设一个相应的独立目录★根目录下的images用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片。

”★所有js，ASP，PHP等脚本存放在根目录下的scripts目录★所有CGI程序存放在根目录下的cgi—bin目录。

所有CSS文件存放在根目录下style目录。

★所有flash，avi，ram,quicktime等多媒体文件存放在根目录下的media目录。

3．尺寸规范★页面标准按800*600分辨率制作，推荐尺寸为766*430px。

★页面长度原则上不超过3屏，宽度不超过1屏。

★每个标准页面为A4幅面大小，即8．5X11英寸。

★全尺寸banner为468*60px，半尺寸banner为234*60px，小barlner为88*31px,另外120*90，120*60也是小图标的标准尺寸。

★每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K。

4．网站标志（10go）★网站必须有独立的标志★标志可以以网站中英文名称设计，也可以采用特别的图案。

原则是简单易记。

★标志图片的名称为“logo一域名．gif”，例如：

logo—sina.gif。

★尽量提供标志的矢量图片。

★尽可能在每个页面上都使用标志。

5．标准字体★网站应该定义一种标准字体（指logo上，图片上使用的字体）。

★标准字体原则上定义两种，一种中文字体，一种英文字体（不包括文本内容字体）。

必须提供标准字体的名称和字库。

★尽可能使用标准字体。

6．标准色★网站应该有自己的标准色（主体色）。

★标准色原则上不超过两种，如果有两种，其中一种为标准色，另一种为标准辅助色。

★标准色应尽量采用216种web安全色之内的色彩。

7．内容编辑规范★必须遵守我国《计算机信息网络国际联网安全保护管理办法》的规定，任何单位和个人不得利用国际联网制作、复制、查阅和传播下列信息：

★煽动抗拒、破坏宪法和法律、行政法规实施的；★煽动颠覆国家政权，推翻社会主义制度的；★煽动分裂国家、破坏国家统一的；★煽动民族仇恨、民族歧视，破坏民族团结的