微机九年级上.doc

初中信息技术
教学参考

九年级·上册

第1单元 制作一个简单的网页
【教学目标】
知识与技能
● 借助学习过的相关软件规划网站的网站地图。
● 学会新建只有一个网页的站点。
● 在页面中熟练地输入文字并对文字进行修饰。
● 学会保存自己的作品。
过程与方法
● 通过浏览各类网页，分析网页中的主要元素和网页布局。
● 借助学习过的相关软件为自己的网站列一个结构化的蓝图。
● 采用知识迁移的方法掌握新工具的使用方法。
● 会评价一个网站的优劣，并提出评价标准。
情感态度价值观
● 能积极参与组内讨论。
● 能通过交流，完善自我的作品。
● 养成事前进行规划的良好习惯。
【教学重点与难点】
● 分析网站的主要元素及网页布局。
● 自我站点的规划。
● 新建自己的站点。
【课时安排建议】
3课时。
【教学准备】
各种类型、各种布局的网站。
【教学过程】
1．引入课题，明确活动任务。
任务：制作一份竞选网页。
目的：让全校学生了解你，投上信任的一票。
2．浏览网站，分析网站的结构。
学生活动：采用组内讨论分析的方法，尝试分类、总结网页中主要组成元素，通过链接发现网站的不同结构。
教师活动：总结归纳学生的想法，并梳理清晰。
提示：网站中的一个网页能和网站中的任何一个页面进行超链接，按照链接的大概情况，网站的结构一般分为三种形式：第一种叫大纲层次结构或树结构。有几个分支，每个分支内的网页，只有同一分支内上层与下层之间的链接，没有分支间网页的链接，条线分隔比较清晰。就如学校里年级和班级的设置一样，学校是一个主页面，下面有按年级分的几个分支页面，各个分支页面下是班级页面，而这些班级只对应相应分支的年级，不会与其他年级页面有关。第二种是线状组织结构，所有网页都按顺序排队，链接时一般只链接上下两个网页，一般每个网页上设计一个返回主页的链接。第三种是随机结构，网页间的链接随心所欲，前两种结构混合在一起，容易让浏览者迷失方向。
3．为自己的站点列一个结构蓝图。
教师活动：提供一个网站或一个网站结构的样例。
学生活动：根据过去自己上网浏览的经验，小组讨论后绘制一张有关网站、网页、主页、超链接的结构蓝图。
4．交流完善。
5．进入Frontpage，熟悉软件，触类旁通，熟悉Office软件的共用功能。
（1）新建网页。
（2）文字的输入、修饰。
（3）页面属性设定。
（4）页面保存。
提示：可以让学生自行学习，也可以让学生做小老师。
①打开FrontPage的方法及窗口的组成，建议由学生自己观察。该软件特别之处是进入该软件的界面，软件提供有普通、HTML、预览三种窗口。
普通窗口：用于一般制作页面，也是初学者用得最多的窗口。
HTML窗口：在普通窗口中制作的网页内容，软件就会自动产生相应的HTML标记文件，而那标记文件就在该窗口中显示。对于部分掌握HTML的使用者来说可以直接在这里进行网页制作和编辑。
预览窗口：用于观察所制作的网页放在浏览器中的大致效果，便于制作者及时修改。一般情况下，预览的效果和在IE里的效果相似，但不一定严格一样。
值得注意的是，已经保存过的网页做了修改后，一定要再次保存后才能在预览中看到修改效果。
②网页是一种超文本文档，它将文字、图片和动画等组织在一个页面里，并使用超链接来连接其他页面。网页文件一般以“.htm”或“.html”结尾。
③网站是一系列与主题相关的网页，既可以在本机上浏览，也可以通过因特网或局域网来访问。首页是指该网站的起始页面，文件名一般为index.htm。

【教学参考】
网站浏览

http://www.p-d-
.tw/home.html
网站结构
结构1：

主页index.htm
页面1
页面3
页面2
页面2-1
页面2-2

结构2：
主页index.htm

页面1

页面1-1

页面1-1-1

第二单元 在网页中使用表格
【教学目标】
知识与技能
● 熟练表格的插入、编辑。
● 利用表格合理地安排网页中的各个元素。
过程与方法
● 掌握用表格进行网页布局的方法。
● 在学习表格编辑等功能使用中的知识迁移能力。
● 采用比较分析的方法，审核设计的合理性。
情感态度价值观
● 坚持与组内的伙伴交流学习的经验和收获。
● 养成记录学习过程的好习惯，虚心听取他人的意见和建议。
● 保持学习的积极性。
【教学重点与难点】
● 表格的使用。
● 利用表格合理布局页面。
【课时安排建议】
4课时。
【教学准备】
● 提供学生模拟的页面样板。
● 相关的颜色搭配建议。
【教学过程】
1. 作品模仿，技能学习。
教师活动：提供一些结构相对简单，但有一定特色的页面，让学生分析，同时让学生自行阐述表格的使用方法。
学生活动：采用组内讨论分析的方法，对常见网站页面的布局类型进行分类，借助学习过的Word的经验，学会FrontPage中表格的使用，并能总结出它的特色和功能；模仿某些页面的表格定位，提高使用表格的能力。
2. 尝试利用表格模仿或是创新设计一个自己的页面。
学生活动：根据自己站点的特色，设计页面的布局样式，利用表格安排页面中的各个元素，绘制出每一页的主要框架，如文本、图片、链接点在页面中的布局。
教师活动：引导学生先观察、尝试一下“表格属性”、“单元格属性”中各项目对表格的影响，然后再开始按前一次课设计的各页布局用表格反映出来。
教师在学生学习、讨论、体会、尝试的过程中要注意观察，及时发现共性问题，由集体讨论解决。在小组内不能解决问题时，鼓励学生向其他小组的同学请教。
提示：插入表格对于学生来说不是问题，关键是插入中规中矩的表格后，如何进一步编辑、调整。本节内容可以说是对Word中插入、编辑表格知识和能力的一种复习、迁移。在学生具体制作每个页面之前，一定要请学生绘制页面布局图，根据这个图再利用表格进行页面布局，以免学生只是盲目地为做表格而做表格。另外可引导学生尝试“表格属性”中各个项目的功能，从而制作出符合自己页面布局的表格。
3. 交流展示自己的网页布局。
4. 制定修改方案完成页面修改。
【教学参考】
网页布局
1．网页布局类型。
网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。
（1）“国”字型：
也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。
（2）拐角型：
这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是：最上面是标题及广告，左侧是导航链接。
（3）标题正文型：
这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。
（4）左右框架型：
这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。
（5）上下框架型：
与上面类似，区别仅仅在于是一种上下分为两页的框架。
（6）综合框架型：
上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。
（7）封面型：
这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接，或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果处理得好，会给人带来赏心悦目的感觉。
（8）Flash型：
其实这与封面型结构是类似的，只是这种类型采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。
（9）变化型：
即上面几种类型的结合与变化。
那么，什么样的布局是最好的呢？这是初学者可能会问的问题。其实这要具体情况具体分析的。比如，如果内容非常多，就要考虑用“国字型”或拐角型；如果内容不算太多，而一些说明性的东西比较多，则可以考虑标题正文型；那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面型是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。
2．网页布局的要求。
第一是页面的易读性。一般的设计要素也是视觉要素，它们的表现与组合就成为视觉语言。视觉语言必须是可读的，排版中的各种视觉要素应是目力能及，清晰易辨，易读性强。比如说明文字的处理，字体、字号大小、横竖位置、字距行距、段间段首的留空等等都要做到易认易读。排版中，还要注意视觉要素与画面空间环境的密切配合。空间宽敞，能更多地吸引浏览者的目光。越是主体，周围的空间要越大，犹如宽敞海面上的一页小帆，才能更加突出主题。
第二是页面的条理性。页面排版特别要求符合浏览者的阅读习惯、心理顺序和思维发展的逻辑顺序。例如，一般在页面的上面或左面安排导航或目录，就是这个道理。页面排版切勿让人看得眼花缭乱，不知其所以然。
第三是页面布局中“形”的美学追求。
对称性：对称具有静态的秩序美，可表现一种恬静、庄重的风格。在网页排版上对称的例子屡见不鲜。但绝对的对称，会使人感到呆板，因此往往需要一些变化。
平衡性：平衡重在感觉。除了形的平衡外，还有色彩的平衡。
点线面的完美结合：运用点、线、面时，要考虑到页面在力量分布上的主次关系，不要三者平均分配。充分利用网页的表格、线条和一些小图片，可构建相当精致的页面。
动静结合：网页的重要特点是可以放置动态图片。这时，要充分利用图片“动”的效果，来活跃页面。但千万记住：动的东西千万不能太多，否则，会弄巧成拙，让人生厌。
此外，页面排版还要把握好对比、比例的应用，空间的应用以及统一和变化的关系。
第四是协调好布局与色彩的关系。
完全撇开页面的颜色谈排版布局是不合适的。所谓“远看色，近看花”，也说明了色彩的重要性。色彩能给人产生冷暖、厚薄、轻重等感觉。形式上不均衡的页面，我们通常会通过颜色来调节。此外，色彩还是决定网页风格的一个重要因素。
网站配色
网站配色方案：
1. 红色。
红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动，还是一种容易造成人视觉疲劳的色。
（1）在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。
（2）在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。
（3）在红色中加入少量的黑，会使其性格变得沉稳，趋于厚重、朴实。
（4）在红色中加入少量的白，会使其性格变得温柔，趋于含蓄、羞涩、娇嫩。
2. 黄色。
黄色的性格冷漠、高傲、敏感，具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其他色，其色相感和色性格均会发生较大程度的变化。
（1）在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。
（2）在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
（3）在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变得成熟、随和。
（4）在黄色中加入少量的白，其色感变得柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。
3. 蓝色。
蓝色的色感较冷，性格朴实而内向，是一种有助于人头脑冷静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广泛、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后依然能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。
4. 绿色。
绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中和，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格显得较为平和、安稳。是一种柔顺、恬静、优美的色。
（1）在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。
（2）在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。
（3）在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。
5. 紫色。
紫色的明度在有彩的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。
（1）在紫色中红的成份较多时，其知觉具有压抑感、威胁感。
（2）在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。
（3）在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。
6. 白色。
白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的、不容侵犯的性质。如果在白色中加入其他任何色，都会影响其纯洁性，使其性格变得含蓄。
（1）在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。
（2）在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。
（3）在白色中混入少量的蓝，给人感觉清冷、洁净。
（4）在白色中混入少量的橙，有一种干燥的气氛。
（5）在白色中混入少量的绿，给人一种稚嫩、柔和的感觉。
（6）在白色中混入少量的紫，可诱导人联想到淡淡的芳香。

第三单元 完善网页
【教学目标】
知识与技能
● 学会运用表格进行页面布局，插入所需的组件与素材。
● 学会邮件链接、网页间的链接，了解网页内的链接（书签）。
过程与方法
● 有创意地设计并制作网页。
情感态度价值观
● 培养学生合作交流、展示表达能力。
● 培养学生触类旁通的学习能力。
● 能主动对活动项目的实施过程及成果进行反思和小结。
● 注明信息的来源和制作版权，加强知识版权保护的意识。
【教学重点与难点】
● 组件、素材的插入。
● 超级链接的使用。
【课时安排建议】
4课时。
【教学准备】
一些技术帮助（可制成学件或提供学生查找帮助的网站或是软件帮助等）。
【教学过程】
1. 图片文字的导入。
2. 所需组件的插入。
教师活动：引导学生自己看书查找、学习，教会学生利用“帮助”菜单来解决困难。同时可以引导学生观察一下“插入”菜单，看看在网页中还可以插入什么元素？
提示：①由于学生已学习过文字处理软件，因此对文字、图片的插入已不成问题。插入菜单与Word中有很多类似的地方，可以引导学生进行比较学习，以自主探究为主。关于组件的插入：在FrontPage中提供了很多组件，学生并不需要都掌握，最常用的“字幕”、“悬停按钮”由学生去尝试性地学习，就学生现有的水平，彼此交流，或是通过查看书本，或是简单的帮助，一定能完成。
②注意插入的图形在浏览时开天窗问题，教师有必要抓住个案进行重点讲解，加深同学们的印象。本节课也是可以让一部分基础较好同学展现才能的好机会，可以调动他们的积极性，在班内、组内进行互帮互学。
3. 建立网页的超链接。
（1）要求学生在自己的网站中至少要有一个邮件链接（若使用了悬停按钮，则再设置悬停按钮的超链接）。
（2）在此基础上请学生观察“创建超链接”对话框，讨论各网页间的链接的创建方法，并创建网页中各页面间的链接。
（3）检查每一页的超链接是否正常。
（4）尝试建立页面中的书签链接。
（5）建立Internet链接。
（6）检查所有链接的正确性。
提示：超级链接在一个网站中起着重要的作用，要实现超链接，在技术上是非常容易的，关键是要让学生建立一个整体的观念，网站的设计是这样，超链接的设计也应如此。因此建议在学生进行页面布局的设计时，就应引导他们将导航栏考虑在内。
①链接是否正确，可以通过学生作品的演示来检验。有同一网页内的链接，不同网页间的链接，不同电脑间的链接，电子邮件链接等等。对于有较多链接的网站，当然可以通过一一检验效果。但也可以打开整个网站，在视图窗口中选择“超链接”模式，编辑窗口中将出现当前网页的超链接情况，可以很方便地查看当前网页的链接关系。
②超链接问题一直是初学者最容易出错的问题。建议让学生搞清楚链接和被链接对象的对应关系，避免出现张冠李戴的错误。另外链接时所用路径问题要引起教师的高度重视。很多学生的链接往往是绝对路径的链接，在学生本人电脑上使用和查看时，错误不容易被发现。因此可以建议学生间交换所做网页或网站，进行异机相互检查。既能查出其他同学的链接错误，也能知道错的原因，从而纠正自己可能所存在的错误。
4. 交流完善。
提示：网页制作是一个不断完善的过程，要培养学生这一意识。学生在交流中发现自己的优势和不足，同时给予伙伴自己的建议和意见，并能从他人的作品中找到亮点。另外在交流后，能制定自己作品的完善方案，并能予以实施。在这里，可以让学生明白网页制作是要不断更新的，同时可以让学生自行制定评价一个网页的标准，在制定的过程中，学生也能发现自己作品对于他的观众而言存在哪些不足，同样能给学生在后期的作品修改中打上一定的基础。

第四单元 制作框架页面
【教学目标】
知识与技能
● 学会框架网页的使用。
● 编辑设置框架网页的属性。
● 建立框架网页的链接。
● 正确保存框架网页。
过程与方法
● 有创意地设计并制作网页。
情感态度价值观
● 培养学生合作交流、展示表达能力。
【教学重点与难点】
● 框架网页的建立和设置。
● 框架网页的链接。
● 框架网页的保存。
【课时安排建议】
3课时。
【教学准备】
框架网页的样例。
【教学过程】
1. 认识框架网页。
提示：教师可以展示一个已经完成的框架网页，让学生分析框架网页的组成。
①框架网页的不同视图切换和视图的作用，可以让学生与普通网页进行对比学习。
②通过浏览新建窗口中的说明文字，了解框架网页的多个模板。
2. 框架网页的制作。
提示：在创建一个框架网页后，必须为每一个框架设置初始网页，这样，在浏览器中查看框架网页时，框架中才会有网页显示出来。否则，浏览器会显示一空白框架。
3. 框架网页的保存。
教师活动：以实例的方式，让学生发现框架网页保存的特殊性（保存的页面比选择的框架数量多1）。
提示：框架网页是一种特别的 HTML 网页，本身并不包含实际的属性 : 它只是一个指定其他网页且如何显示网页的容器。你可以保存框架网页本身及框架中显示的各个网页。在单击“保存文件”按钮后，在 “另存为” 对话框中会出现框架网页布局的缩略图。所保存的部分会以深蓝色框来突出显示：若突出显示的是框架网页的全部外框，则保存的是框架网页本身；若突出显示的是单个框架，则保存的是框架所显示的网页。
4. 为框架网页创建超链接。
提示：注意超链接对话框中，目标框架的使用。
5. 相关属性的设定。
学生活动：尝试活用右键，修改每个属性，发现页面的变化，以此总结属性设定的内容和目的。
教师活动：引导学生组内进行探讨，通过发现总结的能力。
【教学参考】
1．FrontPage中的图形地图：给图片加热区，然后对热区进行超级链接。
2．改变超级链接的属性：script语言的简单输入（下段为链接点没有下滑线）。
<style type="text/css">
<!-
　　a: link{text-decoration: none}
　　a: hover{text-decoration: none}
　　a: visited{text-decoration: none}
　->
</style>
放在<head>…</head>之间。
第五单元 制作表单
【教学目标】
知识与技能
● 了解各表单域及其作用。
● 设计制作一个交友的互动界面。
● 使用向导创建一评价表单网页。
过程与方法
● 通过尝试，发现变化，总结各种表单域及其属性。
● 模拟表单的发布，体验表单确认页的制作。
情感态度价值观
● 体验成功的喜悦。
【教学重点与难点】
● 表单的制作。
● 表单确认页的制作。
【课时安排建议】
2课时。
【教学准备】
● 制作完毕的表单页。
● 局域网络，便于模拟表单的提交。
【教学过程】
1. 浏览交互式页面，认识表单。
教师活动：将事先制作好的页面演示给学生。
学生活动：通过操作，尝试罗列表单域的类型，制作交互页面所牵涉的内容。
提示：可以让学生通过操作，切身体会，通过交流，总结归纳表单域。例如：当学生在使用一个用户注册界面时，可能牵涉到输入昵称、密码、选择性别等相关信息。学生会发现用于输入文本的单行文本框、单选按钮等等。然后让学生各抒己见，罗列内容，以补充完整。
2. 制作表单。
学生活动：按自己的最初设想设计制作一个交友互动界面。
提示：①在制作之前，可请学生先设计好表单的样式，包括所要提出的问题和问题所牵涉到的表单域类型等。养成学生做事的系统性。
②在制作过程中，可请学生自行尝试去修改一个表单域的属性，以发现每一表单域属性的共性和各自的特点。
3. 交流完善。
提示：通过网页制作中的不断交流，应该已经养成学生的不断完善、自我反思的习惯，在这一单元中，也同样可以请学生来制定评价的标准，以提高自己作品的质量。
4. 使用向导创建一评价表。
5. 制作表单确认页。
6. 修饰完善作品。

第六单元 发布网页
【教学目标】
知识与技能
● 了解发布站点的意义和常用的方法。
过程与方法
● 通过学习，了解站点的发布并能模仿操作。
情感态度与价值观
● 体验成功的喜悦。
【教学重点与难点】
● 在网络上申请一个网络空间。
● 利用FTP方式进行发布。
【课时安排建议】
1课时。
【教学准备】
可发布站点的局域网络。
【教学过程】
1. 本地测试站点。
（1）图片的测试。
（2）链接的测试。
提示：让学生全面了解自己的站点，从结构的规划，到页面的布局，到页面的链接等，可以自己浏览，体验一回浏览者的感受。
并让学生在上传前了解：
①不要将链接全部放在图像中。
如果你把所有的链接都放入图像中去，而没有任何同样功能的文字链接的话，用户也许会不知所措。
②不要忘记版权。
现在，网上侵犯知识产权的问题非常猖獗，尊重他人的知识产权，是我们要遵循的网络道德。所以，如果你的网页需要引用别人的东西的话，要么你就和他联系一下，征求意见；要么就在明显的位置注明其版权归属。当然，如果是你自己制作的图像或自己撰写的文章，你绝对有权声明版权归你自己所有！
③不要懒于更新。
网络的浏览者，希望看到的是有不断更新的信息和崭新的面貌，如果长期不改变，不但占用网络空间资源，也会让你的浏览者越来越少。
2. 空间申请。
3. 站点的发布。
教师活动：在课内进行一些演示，让学生有感性认识
学生活动：通过自主学习，尝试性的体验，感受成功后的喜悦。
【教学参考】
洪恩在线：