资源简介 《网页制作项目实训教程》目录教学 课题 任务1 活动1 表格基本操作课题 类型 理论+实作 课时 安排 2 上课 时间教 学 目 标 1.了解表格的构成与表格的属性 2.掌握表格的基本操作教学 重点 1、2 教学 难点 2辅助 资源 课件、多媒体、网络复习引入 1.锚点链接。 2.如何在网页中添加锚点链接？教学 手段 教学过程 师生互动 活动设计课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 如下图所示，使用表格完成比赛成绩表的制作。 二、师生讨论学习新知识 1、表格的构成 表格最基本的单位是单元格，由单元格组成行和列。单元格之间的间隔称为单元格间距；单元格内容与单元格边框之间的间隔称为单元格边距（或填充）。表格边框有明暗之分，可以设置粗细、颜色等属性。单元格边框也有明暗之分，可以设置颜色，但不可设置粗细属性。 2、表格的属性，如下图所示 3、表格的编辑 （1）选择表格 选择整个表格，主要有以下几种操作方法。 单击表格左上角或单击表格中任一个单元格的边框。 将光标移到表格内，单击文档窗口左下角的标签“”。 选择表格的行（或列） 把光标放在需要选择的行左边（或列上方）时，光标变成黑色箭头，单击鼠标左键，选中该行（或列）。 （2）合并与拆分单元格 合并单元格 选择要合并的几个单元格后，可以采取以下几种方法进行合并单元格操作。 单击鼠标右键，在弹出的菜单中选择“表格”栏下的“合并单元格”选项。 单击“属性”面板左下角 按钮。 拆分单元格 选择要拆分的单元格后，可以采取以下几种方法进行拆分操作。 单击鼠标右键，在弹出的菜单中选择“表格”栏下的“拆分单元格”选项。 单击“属性”面板左下角 按钮。 （3）增加或删除行（或列） 增加行（或列） 把光标移到需要增加行（或列）的下面（右侧）后，有以下几种方法增加行（或列）： 点击鼠标右键，在弹出的菜单中选择“表格”栏下的“插入行（或列）”选项。 选择 “修改”菜单栏下的“表格”选项，选择“插入行（或列）”选项。 删除行（或列） 把光标移到需要删除的行（或列）后，有以下几种方法删除该行（或列）： 点击鼠标右键，在弹出的菜单中选择“表格”栏下的“删除行（或列）”选项。 选择 “修改”菜单栏下的“表格”选项，选择“删除行（或列）”选项。 三、教师演示活动实施过程并让学生完成活动任务 1、新建表格 （1）打开Dreamweaver CS6，在“欢迎界面”中单击“新建”栏下的“HTML”按钮，新建一个HTML网页文件，进入新的窗口界面。 （2）选择 “插入”菜单下的“表格”选项，在打开的“表格”对话框中设置参数，然后单击“确定”按钮在页面上新建一个表格。 2、属性设置及信息录入 （1）选择该新建表格，在下方“属性”面板中进行修改。 （2）在表中录入比赛排名前五位选手的名字和成绩。 3、合并表格 （1）选择表格第一行 把光标放在第一行首左侧，光标变成黑色箭头，单击鼠标左键，选中该行。 （2） 单击“属性”面板左下角“合并所选单元格”按钮。 4、保存文件 最后将该网页文件以“task3-1-1.html”为文件名保存到“项目3”站点根目录下。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 阅读知识窗：DW的三种编辑模式；网页的基本结构 演示：教师演示活动实施过程 实训活动：学生练习及点评作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容教学 后记教学 课题 任务1 活动2 使用表格制作简单新闻网页课题 类型 理论+实作 课时 安排 2 上课 时间教 学 目 标 1.了解单元格的属性 2.掌握如何使用表格制作简单新闻网页教学 重点 1、2 教学 难点 2辅助 资源 课件、多媒体、网络复习引入 1.表格的属性。 2.表格的基本操作。教学 手段 教学过程 师生互动 活动设计课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 1、新建一个网页文件，按要求插入表格。 2、把素材中的文字、图片合理布局到网页中，并将网页文件以“task3-1-2.html”为文件名保存到“项目3”站点根目录下，最终效果如下图所示。 二、师生讨论学习新知识 单元格的属性，如下图所示，下面对单元格“属性”面板中相关参数进行说明： 水平：设置单元格内容在水平方向上的对齐方式。 垂直：设置单元格内容在垂直方向上的对齐方式。 宽和高：设置被选择单元格的宽和高。 不换行：防止换行，从而使给定单元格中的所有文本都在一行上。 标题：将所选单元格格式设置为表格标题单元格。 背景颜色：设置单元格的背景颜色。 合并（拆分）按钮：将所选单元格、行或列合并（拆分）为一个（两个或多个）单元格。 三、教师演示活动实施过程并让学生完成活动任务 1、新建页眉表格 （1）插入一个表格，将其命名为“T1”，其他参数按要求设置。 （2）将光标置于表“T1”中，设置单元格的属性。 （3）切换到“属性”面板中的“CSS”，选择目标规则“<新CSS规则>”，点击“编辑规则”，新建一个选择器类型为“类”，名称为“S1”的为CSS规则。 （4）设置“S1”的类型规则。 （5）在表“T1”中输入文字“电子商务系新闻”，并在属性中应用类“S1”。 2、新建正文表格 （1）在表“T1”后插入一个新表格，将其命名为“T2”，按要求设置参数。 （2）将光标置于表“T2”中，设置单元格的属性。 （3）将素材文件夹中“task3-1-2text.txt”的文本复制粘贴到表“T2”中。 （4）新建“S2”、“S3”两种CSS规则。 （5）将“S2”、“S3”分别应用到表“T2”中的标题行和正文文字上。 （6）插入素材文件夹中“3-1-2pic.jpg”的图片文件，设置图片属性为“右对齐”，并调整为合适大小放入图中位置。 3、将该网页文件以“task3-1-2.html”为文件名保存到“项目3”站点根目录下。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 阅读知识窗：单元格的属性 演示：教师演示活动实施过程 实训活动：学生练习及点评作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容教学 后记教学 课题 任务2 活动1 使用表格进行整体布局课题 类型 理论+实作 课时 安排 2 上课 时间教 学 目 标 1.了解表格标签 2.掌握使用表格布局网页教学 重点 1、2 教学 难点 2辅助 资源 课件、多媒体、网络复习引入 1.单元格的属性。 2.使用表格制作简单新闻网页。教学 手段 教学过程 师生互动 活动设计课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 如下图所示，完成基本主页布局的制作，完成后以“task3-2-1.html”为文件名保存。 二、师生讨论学习新知识 1、网页布局 制作网页首先要进行基本的网页布局，以下是最为常用的页面布局类型： 上下型布局：上下排列网页标题和内容。 左右型布局：左右排列网页的导航栏和内容。 “同”字型结构布局：布局结构与汉字“同”相似。 “国”字型布局：布局结构与汉字“国”相似，是一些大型网站喜欢的布局类型。 T型布局：布局结构与英文大写字母“T”相似，初学者容易上手。 POP布局：页面布局像一张宣传海报，以一张精美图片作为页面设计中心。 Flash布局：整个或大部分幅面的网页是一个Flash动画。 2、表格标签 表格和单元格分别都有很多属性，有相同相似的，也有不同的。表格中的基本标签有、、。一般描述整个表格属性的标签放在中，描述单元格属性的标签放在（行）、中。标签从属关系由左向右依次递减。 三、教师演示活动实施过程并让学生完成活动任务 1、制作页眉 （1）新建一个HTML文档，插入表“T1”并居中对齐，按要求设置参数。 （2）将光标置于表“T1”中，设置单元格的属性。 （3）在单元格中输入“页眉区”。 2、制作导航栏 （1）在表“T1” 后插入表“T2”并居中对齐，按要求设置参数。 （2）选择表“T2”的第一行，设置单元格的属性。 （3）分别在单元格中输入每个栏目的名称，并以“|”间隔。 3、制作正文部分 （1）在表“T2” 后插入表“T3”并居中对齐，按要求设置参数。 （2）选择表“T3”第二列的两个单元格进行合并，设置所有单元格的水平和垂直对齐都为“居中”，并在单元格内输入文字。 4、制作版权栏 （1）在表“T3” 后插入表“T4”并居中对齐，按要求设置参数。 （2）将光标置于表“T4”内，设置单元格的属性。 （3）在表“T4”内输入“版权区”。 5、将该网页文件以“task3-2-1.html”为文件名保存到“项目3”站点根目录下。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 阅读知识窗：网页布局；表格标签 演示：教师演示活动实施过程 实训活动：学生练习及点评作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容教学 后记教学 课题 任务2 活动2 使用表格嵌套完成主页布局课题 类型 理论+实作 课时 安排 2 上课 时间教 学 目 标 1.了解表格嵌套 2.掌握使用表格嵌套布局网页教学 重点 1、2 教学 难点 2辅助 资源 课件、多媒体、网络复习引入 1.表格标签。 2.使用表格布局网页。教学 手段 教学过程 师生互动 活动设计课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 在已完成的“活动一”基础上增加图片、文字等对象，细化板块结构，最终完成整个主页的制作，如下图所示，并以文件名“task3-2-2.html”另存到“项目3”站点根目录下。 二、师生讨论学习新知识 表格的嵌套 在复杂表格的布局中，一般不建议使用单元格的拆分和合并来实现，这样对后期布局的修改往往会造成不利的影响。建议通过表格的嵌套或更好的Div布局来进行。 嵌套表格是指在表格的单元格中再插入表格，其宽度受所在单元格的宽度限制，可以很好地控制表格内各个对象的位置。但嵌套层次不建议太多，否则有可能让布局页面过于复杂，可读性差，还可能影响网页的浏览速度。 如下图所示就是两个表格的嵌套，从标签上很容易看出，表格2是嵌套在表格1内的。 三、教师演示活动实施过程并让学生完成活动任务 打开“活动一”已完成的“task3-2-1.html”文件。 1、美化页眉区 （1）将表“T1”的边框改为“0”。 （2）新建CSS规则：类“bg”，将素材文件中名为“task3-2-1pic.jpg”的图片设置为单元格背景 （4）新建CSS规则：类“S1”，按要求设置参数。 （5）将 “T1”单元格水平对齐改为“左对齐”，并输入“电子商务系新闻中心”，并应用类“S1”。 2、修改导航栏 （1）将表“T2”的边框改为“0”。 （2）选择 “T2”的第一行，设置单元格的背景颜色为“#98B2CD”。 （3）分别把单元格中的内容改为每个栏目的具体名称。 3、细划正文部分布局 （1）修改表“T3”右新闻区（第二列）的属性，按要求设置参数。 （2）将光标置于右新闻区（第二列）内，插入新表格“T3-1” ，按要求设置参数。 （3）修改表“T3-1”单元格属性，按要求设置参数。 （4）复制3-4个表 “T3-1”到左新闻区，在第一行分别输入各栏目名称 （5）将表“T3”左上新闻区（第一列第一行）进行拆分。 （6）将单元格“1”的宽和高都设置为“400”。选择“插入”菜单下“图像对象”，插入图片占位符，按要求设置参数。 （7）在单元格“2”中插入新表格“T3-5” ，按要求设置参数。 （8）将“T3-5”复制2-3个到单元格“3”中，输入内容。可适当调整单元格高度，增加图片占位符等对象，设置不同文字CSS样式等，制作出不同结构内容的栏目板块。 （9）在表“T3”左下新闻区（第一列第二行）中插入图片占位符。 4、修改版权栏 在表“T4”内输入版权信息。 5、将该网页文件以“task3-2-2.html”为文件名另存到“项目3”站点根目录下。 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 阅读知识窗：表格嵌套 演示：教师演示活动实施过程 实训活动：学生练习及点评作业 布置 填写提交实训报告和实训表格 预习作业：预习下一节内容教学 后记 展开更多...... 收起↑ 资源预览