搜索
1/31课题一创建个人网站课时：2一、教学目标⑴理解网站的栏目与目录结构的对应关系。⑵认识常用的网页制作软件。⑶掌握“文件”面板组的使用方法二、教学分析1.教学重点⑴规划个人网站。⑵创建站点。⑶管理站点。⑷创建网站目录结构。2．教学难点⑴通过任务提出，分析任务需求，形成解决问题的思路。⑵创建、管理站点⑶划分网站的目录结构。三、教学过程教学环节教学内容备注组织课堂导入知识任务流程导入任务集中学生注意力，准备上课。通过提问考察学生对网站的了解程度。1．喜欢浏览什么类型的网站，这些网站都有什么用途，通过这些网站得到了什么信息？2．常见的网站主题类型都有哪些？什么是个人网站，个人网站通常包含哪些栏目？通过学生对以上问题的回答，了解学生在学习这门课程之前对网站的了解程度，在此基础上简单介绍什么是网站，网站都有什么作用，为什么要创建网站。提出任务一：规划个人网站。1．定位网站的主题和名称。2．规划网站的栏目与目录结构。3．选择网页制作软件提出任务二：创建个人网站站点。１．启动软件。通过学生尝试操作，使用两种常见方法启动软件。⑴打开计算机后，单击“开始”菜单中的“程序”选项，选择“Macromedia”目录下的“Macromedia”选项,运行。⑵双击桌面上的“Macromedia”快捷方式图标，运行。启动软件后，介绍软件的界面及起始页的功能。２．创建网站站点。展示的作品，网站主题类型为个人网站。知识讲解2/31分析任务知识讲解在启动软件的基础上，通过学生尝试操作，使用“站点”菜单中的“新建站点”选项进入新建站点流程。在弹出的“站点定义”对话框中，选取“基本”选项卡，输入网站名称“幽幽我心的个人网站”，单击“下一步”按钮。至此，站点定义已经完成，查看界面右边面板组中的“文件”面板，可以在站点列表中发现，名为“幽幽我心的个人网站”的新站点已经创建，并且该站点下没有任何内容。提出任务三：管理个人网站站点。在站点创建之后，站点文件保存在本地计算机的某一位置上，整个站点形成了整体，便于对站点进行管理，站点的管理通常包括了编辑、复制、删除、导出和导入。１．导出站点选择“站点”菜单中的“管理站点”选项，在弹出的“管理站点”对话框中可以看到上个任务中创建的网站“幽幽我心的个人网站”，选择要导出的站点“幽幽我心的个人网站”，单击“导出”按钮。在“导出站点”对话框中，选择保存在D盘下的“mysite”文件夹，单击“保存”按钮，在“D:\mysite”文件夹中生成了一个扩展名为“.ste”的文件，这个文件就是“幽幽我心的个人网站”的导出文件。２．导入站点。选择“站点”菜单中的“管理站点”选项，单击“导入”按钮，在“导入站点”对话框中，选择前面保存的扩展名为“.ste”的文件，单击“打开”按钮，导入的站点便出现在列表中，因为有重名站点，导入的站点名称后面会自动加0。３．复制删除与编辑站点分组讨论，学生自主完成站点的复制与删除，最终只保留一个站点。提出任务四：实现任务一中规划的目录结构。１．启动，讲解使用“文件”面板和“文件”菜单里的“新建”选项创建首页。打开首页，分组讨论界面包含几部分，引导学生记住各部分功能。步骤：在“文件”面板中选择已经创建好的站点“幽幽我心的个人网站”，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”选项。在“文件”面板中选择刚建好的文件，单击鼠标右键，在弹出的快捷菜单中选择“编辑”→“重命名”选项。作为首页，将其名称设定为“index.html”在“文件”面板中选择“index.html”文件，单击右键选择“设成首页”选项。２．通过“文件”面板创建站点目录。步骤：使用“文件”面板新建文件夹，方法和新建文件方法类似根据以上学习，让学生分组讨论总结使用“文件面板”删除、复制、剪切、粘贴、重命名网页或文件夹的操作方法。知识讲解3/31课题二添加首页内容课时：2一、教学目标⑴掌握添加和编辑网页文本的基本操作。⑵能够根据具体需求进行文本各种属性及样式的编辑与设置。⑶掌握插入图像的各种方法。二、教学分析1.教学重点⑴添加首页文本。⑵使用CSS规则美化文本。⑶添加图像。⑷创建与应用CSS美化网页。2．教学难点⑴文本样式的设置、应用及修改。⑵使用CSS规则美化文本。⑶添加图像。三、教学过程教学环节教学内容备注组织课堂导入知识任务流程导入任务集中学生注意力，准备上课。在开始新的课程学习之前，先来了解一下，网页元素的构成，为什么要在首页中添加文本。通过浏览新浪、搜狐等著名网站的网页，引导学生分析网页的构成元素，得出结论：网页元素归纳起来有文本、图像、表格等，其中最常用的是文本。因而，为首页添加内容，最重要的是为首页添加文本。提出任务一：添加首页文本。１、建立首页空白文件“index.html”，本单元将对首页修改标题，添加准备好的内容并设置其格式。２、输入首页文本内容并划分段落⑴输入首页文本将素材“index.txt”文本内容复制粘贴到文档窗口。通过比较使学生明确：从普通文档中复制过来的文本不保留格式内容，只保留段落结构，并且在文本遇到文档窗口的边界时会自动换行。⑵换行操作a．“自我介绍”、“青春寄语”和“立志飞翔”部分进行段落划分b．“立志飞翔”部分进行强制换行总结，三种换行方式的特点及其实现方法。⑶输入连续空格演示输入连续空格的几种方式。完成“青春寄语”部分首行缩进的操作。最后，保存网页。展示的作品，网站主题类型为个人网站。知识讲解4/31分析任务知识讲解提出任务二：完成首页文本样式设置，为首页添加水平分隔线与列表通过浏览网站，引导学生明白文本字体、字号、颜色、加粗、倾斜及对齐方式等文本样式的设置是必需的，那么，如何完成文本样式的设置与编辑呢？１．文本样式设置与应用⑴为网页中第一行文字“幽幽我心的个人网站”设置文本样式回忆Word文本格式设置的设置步骤：首先选中相应文本；接着通过格式工具栏进行设置。网页制作也类似，首先要选中相应文本，接着通过文本属性面板完成设置。简介文本属性面板各部分及其功能，讲解为“字体”列表项添加字体的方法。为网页中第二段标题文字“自我介绍”设置文本样式。⑵为标题文字“青春寄语”、“立志飞翔”，应用样式（为“自我介绍”设置的样式）２．样式重命名演示为“幽幽我心的个人网站”中的文本样式重命名的方法，并按照课本P37页表格要求，设置“青春寄语”与“立志飞翔”中的文本样式并重命名。３．修改文本样式演示修改title2样式：单击“样式”列表旁的按钮，打开“CSS样式”面板。对样式“title2”进行编辑，在面板当中修改颜色值为“#FF6600”。让学生观察应用了“title2”样式的文本颜色是否会发生相应的变化。４．插入列表与水平线选中“自我介绍”部分的文本内容，选择“属性”面板中的“项目列表”，为选中文本插入项目列表。将光标插入到“青春寄语”标题之前，将“插入”栏切换到“HTML”类别，选择其中的“水平线”按钮，在“自我介绍”内容和“青春寄语”内容之间插入一条水平线，起到分隔的作用。提出任务三：为首页添加图像内容。通过联想学校宣传栏、报纸、儿童书籍以及课本等内容，总结出其中都有图像；引导学生懂得通过插入图像可以使内容生动直观，具体形象。进一步打开两个网页，一个是全文本的，一个是图文并茂的，让学生通过比较这两个网页明确哪一个更适用并说明原因，引出要使首页内容生动形象，图像的添加和编辑就必不可少了。１．网页中图像文件的格式及其特点教师提出下列问题让学生分组查找答案：通常在网页中使用什么格式的图像文件，它们的特点是什么？在同学回答上述问题基础上，教师总结并讲解在网页中通常使用“.jpg”、“.gif”和“.png”格式图像文件及其这三种格式图像文件的特点。２．准备素材：将本单元素材文件夹中的“images”文件夹下的全部图像素材复制到D:\mysite\images文件夹下。３．使用文件面板插入图像拖曳文件面板中的“top.jpg”到“自我介绍”标题前，插入图像“top.jpg”。选中所插入的图像，在属性面板中设置对齐方式为“右对齐”。知识讲解5/31预览页面效果。通过复习Word中插入图像的方法，总结出另外三种插入图像的方法。A．使用菜单栏插入图像定位插入点到“立志飞翔”文字前，选择菜单栏“插入”菜单中的“图像”选项，插入“flying.gif”图像文件并设置对齐方式为“左对齐”。B．使用插入栏常用类别中的按钮插入图像定位插入点到“立志飞翔”的第三段文字前，选择“插入”栏“常用”类别中的按钮，插入“flying.gif”图像文件并设置对齐方式为“右对齐”。C．使用Ctrl+Alt+I组合键插入图像定位插入点到“立志飞翔”的第五段文字前，使用Ctrl+Alt+I组合键，插入“flying.gif”图像文件并设置对齐方式为“左对齐”。提出任务四：使用CSS美化网页。在之前的任务中使用属性面板来设置并应用文本样式，可以简化文本属性的设置过程。其特点主要表现为：样式可以一次设置多次应用，可以同步修改已应用的样式。１．创建与应用CSS文本样式。使用CSS面板创建文本样式“title3”，并将新样式应用到“青春寄语”部分的标题文本上。讨论这种方法与之前学习的设置方法有什么不同。⑴CSS样式的三种类型“类”样式：“类”样式是最为灵活的一种类型的样式，它可以任意定义名称并且应用到网页中的各种对象上。“标签”样式：“标签”样式的定义是建立在HTML语言基础上的，可以针对网页中的各种标签进行定义，所以用这种类型的样式定义的名称仅限于固定的标签名称，并且在样式定义后，直接被应用到页面中相应的标签对象中。“高级”样式：这种样式仅用于定义超级链接的4种状态，分别是：“a:link”用于定义超级链接初始状态；“a:visited”用于定义已经访问过的超级链接状态；“a:hover”用于定义鼠标经过超级链接对象时的状态；“a:active”用于定义超级链接的活动状态。⑵CSS样式可定义参数。“类型”选项：用于定义常规的文本属性，包括“字体”、“大小”、“颜色”等选项。“背景”选项：用于定义背景属性，可设置“背景颜色”、“背景图像”、背景图像的“水平位置”等选项。“区块”选项：用于定义文本的间距与对齐方式等属性。“方框”选项：用于定义表格、框架等对象的属性。“边框”选项：用于定义各种对象的边框属性，表格、框架、水平线的边框样式都可以使用这一选项进行定义。“列表”选项：用于定义文本列表的属性。“定位”选项：用于定义层对象的属性。“扩展”选项：用于定义光标、图像等内容的视觉效果的扩展属性。6/31课题三创建、编辑表格课时：2一、教学目标⑴掌握表的创建和编辑，能够根据具体需求灵活应用表格，并能利用表格进行页面布局和排版。⑵掌握表格的基本操作：如合并、拆分单元格，添加、删除行或列，调整行高、列宽。二、教学分析1.教学重点⑴创建表格的基本方法。⑵创建嵌套表格。⑶设置单元格属性⑷设置表格属性2．教学难点⑴分析页面的表格布局。⑵创建嵌套表格。⑶单元格和表格属性的区分三、教学过程教学环节教学内容备注组织课堂导入知识任务流程导入任务集中学生注意力，准备上课。通过提问考察学生对插入图像基础知识的了解。如何在网页上插入一张图片，并调整图片的大小、位置？学生分组讨论如何在网页上制作一个班级通讯录，每行内容有“姓名、照片、地址、联系电话”。通过上面讨论，引导学生认识利用表格制作通讯录是方便快捷的方式，再引导学生联想生活中用到的表格，进而了解表格在网页制作中的广泛应用。在中，表格是用于在页面上显示表格式数据及对文本和图像等元素进行布局的强用力的工具。本任务将学习在网页制作中如何灵活运用表格。提出任务一：利用表格规划、布局作品展示网页。依据设计图样，可以使用四个表格把页面划分为四个区域，四个表格分别命名为“table1”、“table2”、“table3”和“table4”。依据不同的设计内容，这四个表格还需要进行相应的编辑与嵌套。１．分析网页布局⑴见课本图3-2，教师带领学生进行页面表格分析。引导学生了解：“table1”是一个2行1列的表格。第一行用于放置网站标题及图像，第二行嵌套