第十四课 建立分页面 课件+教案

浙教版信息技术八年级上第十四课建立分页面教学设计 课题 建立分页面 单元 第三单元 学科 信息技术 年级 八年级 学习 目标 知识目标：会制作分栏目的页面；学会新建各式网页并命名。 技能目标：掌握制作网页的几种技巧充实页面的内容； 情感目标：体验创作的乐趣，培养学生的想象能力。 重点 建立网站分页面，灵活运用表格与单元格的设置技巧 难点 建立网站分页面，灵活运用表格与单元格的设置技巧 教学过程 教学环节 教师活动 学生活动 设计意图 导入新课 上面第一幅图片是网站主页，点击分栏目后出现与分栏目相关的页面。我们主页建好了，也需要建立与栏目相关的分页面。那么，如何建立分页面呢？我们就开始学习吧！ 思考 激发学生学习兴趣并快速进入学习状态 讲授新课 一个完整的网站不仅有精美的主页面，还需要更丰富的分栏目页面。 一、建立分栏目网页 新建分栏目网页的方法与新建主页类似。 1.单击菜单栏中的“文件”→“新建网页”，选择“HTML”(如图) 2.单击“确定”按钮后，生成网页文件“无标题_1.hum”(如图)，可根据各分栏目名称将网页文件另存为合适的文件名。 “网络世界”根据网站栏目的设计目为“网络拾贝”、“网络交流”、“网络安全”及“网络生活”等 建立的相应网页文件为wlsb.htm、 wlil. htm、wlaq.htm及wlsh.hm，文件夹列表如图所示。 二、充实分栏目网页内容 与主页制作方法类似，分栏目网页一般也使用表格对版面布局，然后按栏目策划方案加人内容。 制作时可参考如下页面制作技巧 1.调整表格指定宽度 通常采用改变表格宽度“百分比”来控制表格在页面中的比例。 (1)右击表格，选择“表格属性” (2)在“表格属性”对话框中，勾选“指定宽度(H)”复选框，选择“百分比” 在文本框中输人具体的数值，如输入“100”表示表格的宽度与网页的宽度一样 输入“50”则表示表格只占网页可视区域的一半，如图所示。 2.改变表格线外观 插入表格的默认“边框”粗细为“0”，预览时，看不见表格线 如要让表格线在预览时显示，则要将“边框”的粗细值设为具体的数值，如“1” 表格线“边框”粗细为“0”，虽然看不见表格线，但单元格之间仍有比较大的间距，会让人感觉线条的存在。 只要合理地设置“单元格衬距”和“单元格间距”的参数，就能生成细线条的表格 浏览时看不到表格线，也感觉不到线条的存在，如图所示 日积月累 单元格间距指两个相邻单元格之间的距离;单元格衬距指单元格内容与单元格左边距和上边距之间的距离 亲身体验 对单元格的“边框粗细”、“单元格衬距”等参数作不同的设置，观察网页表格线外观的变化情况。 阅读材料 使用CSS样式表 在制作网页的过程中，往往要求整个网站的文本、表格的样式协调统一 若手工设置每个页面的文本、表格等格式，将会非常麻烦 使用CSS样式可以解决这问题，并能提高网页制作的工作效率 级联样式表是由国际组织所制定的一套延伸HTML样式的新标准 用来控制网页内容的外观格式，包括版面的精确位置、特定的字体和格式，甚至图像、表格和图层等的位置和格式 可以应用多个样式表到同一个网页中。 使用CSS样式表需要先创建字体新样式，然后再应用。 一、创建字体新样式 1.打开新的空白网页，在文件区中输入文字。 2.在“格式”菜单中选择“新建样式”(如图)，弹出“新建样式”对话框 3.在“选择器”中输入样式名称，如“标题字” 在“定义位置”列表中，选择“当前网页”:设置“类别”列表中各个参数的属性，如文字的字体、大小、粗细、拉长、变窄、颜色等，如图所示。 4.单击“确定”按钮，完成CSS样式设置。 二、应用字体新样式 1.在菜单栏中选择“格式”→“CSS样式”A新建式(选项“应用样式”，打开“应用样式”任务窗格，如图所示。 2.选中要设置为“标题字”样式的文 ... ...