活动2：制作网站的主页(20200123164601)VIP

.活动 2：制作网站的主页教学目标：一、知识与技能1、熟悉网页制作软件的窗口界面和常用操作。2、掌握用表格编排页面的方法。3、提高文字和图像混合编排的能力。二、过程与方法：认识并熟悉网页编辑软件frontpage，掌握利用软件编辑网页的方法。三：情感态度与价值观：学习利用软件编辑网页的方法，增强团结协作的意识与能力。教学重点： frontpage 使用方法。教学难点：设计、编辑网页的方法。教学时间： 4 课时第一课时教学内容：认识frontpage 软件的操作界面，创建网站，开始制作主页教学过程：.教学环节1、复教师活动预设学 生活 动预设应用软件窗口设计意图巩习建立网站的基本过程？2、导语网站最重要的就是网页，多个网页通过链接关系构成一个 整体。固主页相当于一个网站的门，通过它可以了解网站的功能和基本结构。3、讲新一、 frontpage 软件简介frontpage 功能比较丰富、简单易用。右图是frontpage 软件的窗口，大家打开软件后观察它的结构。下方有四个视图模式按钮，可以改变视图模式。二、创建网站要在网络中建立一个网站，首先要在计算机中创建一个网站，然后在这个网站中添加主观察软件实际上，这个网站就是一个文件夹。页和其他层次的页面。同 步下面我们来建立一个网站。操作在 e 盘建立一个名为“心灵之约”的网站。1、执行“文件 -新建”命令， 在任务窗格中选择 “由一个网页组成的网站”2、把网站的位置改为 e 盘。如图所示。3、在e盘的盘符后面输入“心灵之约” ，然后单击确定按钮。三、制作主页小 组主页是整个网站的窗口。制作讨 论主页一定要达到整齐美观、活交流泼鲜明。（一）、用表格安排页面布局使用表格可以把整个页面分 成很多区域。 编辑时， 首先把文字、图像等素材定位到指定的单元格中， 然后修饰美化单元格。在主页 index.htm 中插入表格同 步1、双击文件名index.htm ，显操作示它的页面编辑区。2、执行“表格 -插入 - 表格” 命令， 设置好参数， 插入一个一行一列、宽度为 870 像素、不显示边框、居中对齐的表格。3、在页面中敲一下回车键后，插入一个一行六列的表格。4、继续插入一个 2 行 2 列、不显示边框的表格， 然后合并其中的第 2 行单元格。5、把第 3 个表格的第 1 行第2 列单元格拆分成 3 行。完成上述操作后，系统在“心灵之约”网站中生成了“private ”和“ images” 两个文件夹，并自动生成了网页文件index.htm 。“ private ”文件夹用来存放不想供浏览者访问的文件；“images” 文件夹用来存放图像文件。6、适当调整表格高度，最后保存网页。（二）、插入网站标题合 作1、把插入点移动到页面中的交流第 1 个表格中， 然后执行 “插入-图片 -来自文件”命令。2、将素材库中“网站动画标题”插入进去。3、适当调整标题的大小，然 后 把 图 像 保 存 到 网 站 中 的images 文件夹里。4、课堂补充练习：完成课堂所学内容。5、小结：网页的布局，表格的插入。6、课后反思成功：不足：第二课时教学内容：网站主页制作教学过程：教学教师活动预设学 生应用软件窗口设环节活 动计预设意图1、复小 组巩习如何调整网页布局？可 以固讨论2、导语网页上除了标题以外，还需要放置更多的文字， 给浏览者提供丰富的信息。3、讲（三）、输入文字。新1、在第 2 个表格的6 个单元这 部格里分别输入各个栏目标题。分 可2、设定文字的格式。独 立3、在第 2 个表格的第1 个单元格中逐行输入下面的文字， 然后设置文字格式。4、将插入点移动到文字当中， 然后执行下列操作， 设置段落格式。执行“格式-段落”操作，然后再设置。这部分学生学习 过，可独立操作。5、在页面相应的位置输入有完成 中华民族的传统美德，源远流长，照亮人心。美德，是至善、至纯、至高人性的结晶，它源自生活又融入生活，只要我们用心去感悟，就会发现它无处不在。我们要让心灵闪耀出本性的光芒，要付出爱的行动，爱亲人、爱朋友， 爱家庭、爱集体、爱国家， 热爱并善待 一 切美好 的 事物。让我们从这里开始， 迈开爱的步伐，让心灵永远保持美丽的本色！文 字图红色文字内容， 并设置适当输入的格式。这一6、单机预览视图按钮，在窗内容口中可以预览网页的效果。进尽量完成爱读书，读好书今天推荐的好书是中华传统美德格言。该书由人民教育出版社出版，精选格言近300（四）、配插图网页中， 除了文字， 还需要配上插图，使网页达到图文并茂的效果。1、在“心灵之约”网站的主页中插入合适的图像。插入图片并调节图片的大小， 学生没有学过这一内容，需加强训练。2、保存网页，把图像保存到网站中的images 文件夹里。四、完善主页在网页中输入文字、 插入图像后，为了使网页更加直观和美观，往往还需要进一步修饰网页。（一）、修改网页标题。尝试修改网站标题。1、右击主页任意位置，在右 键菜单中单击 “网页属性” 命令。2、在对话框中输入网页额标题，再单击确定按钮。3、保存文件后，在浏览器窗口中预览网页， 观察所显示的标题。（二）、修改网页背景默认情况下， 我们看到的网页背景是白色的。把一幅图像设定为“心灵之约”主页的背景。1、右击页面，单击快捷菜单中的“网页属性”命令。2、按需要操作，把一幅图像条，涵盖爱国、修身、立志、进德、处世等内容，是启迪人生的良师益友。讨 论交 流小 组互助“配插图”这一内容，在往年都是七年级上学期的课程，从去年教材变动后，这一内容移动到了小学，而我们本地小学没有开办信息技术这一课程。观 察网 站标题同 步操作主页右击格式背景图片（打），然后单击“浏览”选择素材库中的“主页- 背景图”后，单击确定按钮即可。设成网页的背景。3、保存网页，并把背景图像 文件保存到站点中， 然后浏览网页。（三）、修改单元格样式1、选定栏目标题所在的表格并右击，然后执行相应的操作2、修改边框的颜色，并适当变粗。3、调整单元格的高度，适当修改单元格中文字的颜色。4、修改单元格中文字的对齐方式。5、参考右图，设置其它单元格的边框和背景。（四）、设置单元格的边距 默认情况下， 单元格中的文字会紧贴着单元格的边框，影响美观，如右图。1、选定单元格并右击，然后设置文字与边框的距离。2、保存后浏览网页。4、课堂补充练习：完成上述操作。这一步，大家在老师的诵读下，按要求直接操作即可。跟 踪操作选择“单元格属性”“背景” 项 （选择一种颜色）“样式” （最下面） “格式”（最下面）修改后确定即可。选定单元格并右击单元格属性样式（最下面）边框，样式里选择“无”，衬距中的上下左右都选择8，然后单击确定即可。5、小结：实际操作时，可以根据实际情况进行修改。6、课后反思成功：不足：教学内容：1、制作滚动字幕2、插入水平线教学过程：第三课时教学环节1、复教师活动预设学 生活 动预设应用软件窗口设计意图巩习打开前面自己制作的网站，看看还有哪些方面需要进一步加工处理的？2、导语 很多网站里我们都能看到滚动的字幕，它是怎么实现的呢？观 察固交流滚动字幕中的文字会从某个方向顺序 移动，通过动态的方式呈现。网页中往往用滚动字幕来展示一些通知、广告、标语等，而且要求字幕内容简洁、篇幅短小。3、讲新一、制作滚动字幕在“心灵之约” 主页中添加一行滚动字幕。1、单击第1 个表格下方的空小 组行，执行“插入web 组件”互 相命令。查 看制 作2、双击“字幕”选项，然后效果在字幕属性对话框中输入字幕内容，设置参数。3、预览网页，可以看到文字从左逐渐向右移动。二、插入水平线水平线可以用来划分网页中 的不同区域。 如果网页中内容比较多，需要划分界线以便分类时，使用水平线是一种比较简便的方法。在主页版权信息等文字的上方插入一条水平线。1、把指针移动行首并单击， 执行“插入水平线”命令。2、双击插入的水平线， 在“水平线属性” 对话框中设置它的高度和颜色。 最后单击确定按钮，设置完成。4、课堂补充练习：补充没有完成的项目；将水平线的线性改成其它的类型。5、小结：滚动字幕和水平线的制作方法。6、课后反思成功：不足：第四课时教学内容：1、创建电子信箱地址的超链接2、创建网站超链接教学过程：教学教师活动预设学 生应用软件窗口设环节活 动计预设意图1、复巩习如何制作滚动字幕？指名操固作大屏幕。2、导语访问者与网站的联系方式，最常见的就是电子邮件联系方式。而给出的提示文字可以是电子信箱地址或者类似“欢迎来信” 、“与我们联系” 等等。3、讲一、在主页中创建电子信箱地跟 踪新址的超链接。操作1、选定要插入电子信箱地址超链接的文字并右击。2、按右图操作，建立所选文字与电子信箱地址的超链接。建立超链接后， 当鼠标指针指向那里时， 会出现表示连接的小手标志。二、创建网站超链接小 组因特网上有很多与我们制作合 作的网页相关的网站， 如果在网交流页中插入这些网站的超链接，可以使浏览者很方便地浏览相关的网站，扩大视野。 插入方法：1、在主页中插入友情链接栏目的名称 .2、选定一个栏目，创建与它相应的网站的超链接。如右图，我们链接的网址是人民教