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