《Dreamweaver网页设计与制作项目五.docx》由会员分享，可在线阅读，更多相关《Dreamweaver网页设计与制作项目五.docx（13页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、课程教案授课内容项目五 用表格构建网页布局授课班级授课学时12课时教学方法与手段讲授法、演示法、讨论法。多媒体教学项目内容本项目的工作是为某珠宝饰品公司设计网站，具体要求如下。1.具有产品发布管理系统。通过该系统可以实现产品的展示发布，管理者可以任意添加、修改产品类别和产品列表，可以上传产品图片，通过可视化文章编辑器添加、修改产品说明文字。2.在线留言系统。留言系统是一种电子便签管理系统，客户可以将他的意见和要求通过电子表单进行提交，提交表单同时发送邮件和信息至系统数据库。要完成上述任务，在网站制作时必须要注意网页的布局，特别是在产品发布系统中，网页布局在网页制作中起着至关重要的作用。只有学会
2、设计网页布局，才能让网页中的元素“各就各位”，制作出高水平的网页。目前来说，构建网页布局最常用的是表格。设计网页时，将不同的网页元素放在不同表格和单元格中，让网页变得井然有序。教学目标学生通过本项目的学习，能：1、 熟悉各种表格的选择方法2、 理解并掌握表格的嵌套3、 熟练掌握表格的编辑4、 理解并掌握布局表格的使用教学重点与难点教学重点：1、熟练掌握表格的编辑2、正确使用嵌套表格布局页面教学难点：正确使用嵌套表格布局页面教学过程设计项目效果【任务一】布局主页 index.html表格的基本应用所谓表格（Table）就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在XHTML语
3、言中以标签开始，标签结束），垂直的多个单元格称为列（以标签开始，标签结束），如图51所示。行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。（一）插入表格Dreamweaver CS3提供了非常完善的表格编辑功能，首先介绍如何在网页文档中插入表格。步骤 1 首先在文档页面上要插入表格的位置单击，以确定插入点位置。步骤 2 单击“常用”插入栏中的“表格”按钮，打开“表格”对话框，设置各项参数后，单击“确定”按钮，即可插入表格，如图所示。下面简单介绍一下“表格”对话框中几个重要选项的意义。l 表格宽度（Width）：设置表格宽度值，否则，其宽度将随其中的内容而改变。l 在Dreamwe
4、aver中，最常使用的单位是像素和百分比。像素使用0或大于0的整数表示；百分比是相对于浏览器而言的，使用 0 或百分比表示。l 边框粗细（Border）：是指整个表格边框的粗细，标准单位是像素。整个表格外部的边框叫外边框，表格内部单元格周围的边框叫内边框。l 单元格边距（Cell padding）：也叫单元格填充，是指单元格内部的文本或图像与单元格边框之间的距离，标准单位是像素。l 单元格间距（Cell spacing）：是指相邻单元格之间的距离，标准单位是像素。（二）选择表格和单元格在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。当表格外框显示为黑色粗实线时，
5、就表示该表格被选中，另外，还可以通过“标签选择器”选择表格。具体做法是：在表格内部任意处单击鼠标，然后在“标签选择器”中单击对应的“”标签，该表格便处于选中状态。要选择某个单元格，可首先将插入点放置在该单元格内，然后按【Ctrl+A】组合键或单击“标签选择器”中对应的“”标签；要选择某行或某列，可将光标置于该行左侧或该列顶部，当光标形状变为黑色箭头时单击鼠标。要选择单元格区域。应首先在要选择的单元格区域的左上角单元格中单击，然后按住鼠标左键向右下角单元格方向拖动鼠标，最后松开鼠标左键。（三）设置表格属性选中表格后，可利用“属性”面板查看或修改表格的行、列、宽，以及填充、间距、背景图像、背景颜色
6、等属性。下面简单介绍一些表格“属性”面板中各主要选项的意义及设置方法。l 表格 Id：用来设置表格的 ID，一般不填。l 行：显示表格的行数，可通过修改该数值改变表格的行数。l 列：显示表格的列数，可通过修改该数值改变表格的列数。l 宽：显示表格的宽度值，可通过修改该数值改变表格的宽度。其后的下拉列表框用来设置宽度的单位，有“”和“像素”两个选项。l 填充：用来设置单元格内部距单元格边框的距离，单位是像素。l 间距：用来设置各个相邻单元格之间的距离，单位是像素。l 对齐：用来设置表格的对齐方式。其中有四个选项“默认”“左对齐”“居中对齐”和“右对齐”。“默认”表示按照浏览器默认的对齐方式对齐，
7、一般为左对齐。l 边框：用来设置表格边框的宽度值，单位是像素。在使用表格进行布局时，一般将“边框”设置为 0。这样在浏览网页时才不会显示表格边框。l 背景颜色：设置表格的背景颜色，具体方法为单击“背景颜色”按钮，在弹出的调色板中选择想要填充的颜色。l 边框颜色：设置表格边框的颜色，与背景颜色的设置方法相同。需要说明的是，只有在表格边框值不为 0 时，该项功能才起作用。l 背景图像：设置表格的背景图像，单击“背景图像”编辑框后的“浏览文件”按钮，在弹出的“选择图像源文件”对话框中选择图像，单击“确定”按钮即可。（四）设置单元格属性在表格的某个单元格中单击选中，“属性”面板中将显示水平、垂直、宽、
8、高等单元格属性，此时可通过“属性”面板设置其属性。下面简单介绍单元格“属性”面板中几个常用选项的意义。l “水平”下拉列表框：用来设置单元格内元素的水平排列方式。l “垂直”下拉列表框：用来设置单元格内元素的垂直排列方式。l “宽”编辑框：用来设置单元格的宽度值，单位可以为像素或百分比。l “高”编辑框：用来设置单元格的高度，单位可以为像素或百分比。l 对于单元格来说，同样可以通过拖动其边框改变宽度和高度值。l 选中“不换行”复选框，可以防止单元格中较长的文本自动换行。l 选中“标题”复选框，单元格中的内容将成为标题。l “背景”编辑框：用来设置单元格的背景图像，其设置方法与表格的背景图像设置
9、l 方法相同。l “背景颜色”编辑框：用来设置单元格的背景颜色。l “边框”编辑框：用来设置单元格的边框颜色。【任务实施】在学习了表格的基本知识后，请同学们动动手，结合课本所述步骤，为饰品网站主页构建布局。【巩固练习】结合任务1所学知识，构建如图所示的网页布局（可参照本项目素材“shipin”文件夹中的“index.html”文档）。【任务二】布局子页表格的高级应用（一）拆分与合并单元格在网页制作中，经常会用到一些特殊结构的表格，此时就需要拆分或合并单元格。1. 拆分单元格拆分单元格就是将一个单元格拆分成多个单元格，具体操作如下。步骤 1在要拆分的单元格中单击（此处为第1行中间的单元格），然后
10、单击“属性”面板上的“拆分单元格为行或列”按钮。步骤 2打开“拆分单元格”对话框，在“把单元格拆分”区选择“列”单选钮，在“列数”编辑框中输入“3”，单击“确定”按钮，单元格被拆分为3列。2.合并单元格所谓合并单元格，就是将相邻的几个单元格合并成一个单元格。继续在前文的文档中操作，也就是将前文拆分的单元格合并成一个单元格。拖动鼠标选中要合并的连续单元格（此处为第1行中间的3个单元格），然后单击“属性”面板上的“合并所选单元格，使用跨度”按钮，将 3 个单元格合并为 1 个单元格。（二）在表格中添加或删除行与列在使用表格组织大量信息时，需要在创建好的表格中添加或删除行与列，以增加或减少记录，具体
11、操作如下：步骤 1 为更好地演示和说明插入行或列的操作，首先在第1行第1列单元格中输入数字1，然后在该单元格中单击鼠标右键，并在弹出的快捷菜单中选择“表格”“插入行或列”菜单。步骤 2 打开“插入行或列”对话框，在“插入”区选择“行”单选钮，设置行数为“1”，位置为“所选之下”，最后单击“确定”按钮。步骤 3 此时可以看到，在所选表格下方插入了1个新行，并且插入点自动位于新行中。步骤 4 如果要删除某行，只需在该行单击鼠标右键，在弹出的快捷菜单中选择“表格”“删除行”即可。【任务实施】在学习了表格的高级应用后，请同学们动动手，为网站子页构建布局。（一）构建网页整体结构步骤 1 首先在站点“ad
12、orning”中创建新文档，并重命名为“sub.html”，双击该文档在文档编辑窗口中打开。步骤 2 按【Ctrl+J】组合键打开“页面属性”对话框，为其设置页面属性，并参照制作网站首页的方法，制作网页导航条以上的部分（包括导航条）。步骤 3 在导航条下方插入一个1行1列，“宽”为1 000像素，“边框粗细”“单元格边距”和“单元格间距”均为0的表格，称该表格为表格3。在表格3中插入图片“sub_1_02.gif”。步骤 4 在表格 3 下方插入一个 1 行 3 列，“宽”为 1 000 像素，“边框粗细”“单元格边距”和“单元格间距”均为 0 的表格，称该表格为表格 4。步骤 5 将首页中的
13、表格5拷贝到子页中表格4下方，打开“CSS样式”面板，将样式文件“s1.css”附加到该文档。（二）制作圆角表格步骤 1 将插入点置于表格4第1个单元格中，在“属性”面板上的“垂直”下拉列表中选择“顶端”，然后在其中插入一个3行1列，“宽”为263像素，“边框粗细”“单元格边框”和“单元格间距”均为 0 的表格。步骤 2 在嵌套表格的第 1 个单元格中插入图片“sub_1_03.gif”。步骤 3 将插入点置于嵌套表格的第2个单元格中，单击“拆分单元格为行或列”按钮，打开“拆分单元格”对话框，在“把单元格拆分”区选择“列”单选钮，设置“列数”为“3”，然后单击“确定”按钮。步骤 4 在拆分后的
14、第 1 个单元格中单击，插入小图片“sub_1_08.gif”步骤 5 再次在第1个单元格中单击，单击“属性”面板上“背景”编辑框后的“浏览文件”图标，将图片“sub_1_08.gif”设置为该单元格的背景图像，并向左拖动其右侧边框，使单元格宽度与图片等宽。步骤 6 按照同样的方法，在拆分后的第3个单元格插入图片“sub_1_10.gif”，并将其设置为单元格背景。步骤 7 在拆分后的第 2 个单元格中单击，进一步将其拆分为 3 行。步骤 8 将拆分后的第1行单元格进一步拆分为3列，并在第1列中输入文本“用户名：”，在第2列中插入文本字段，在“属性”面板上设置文本字段的“字符宽度”为“10”。
15、步骤 9 按照同样的方法将第2行拆分，并输入文本和插入文本字段。步骤 10 将第3列的第1行和第2行两个单元格合并，并在其中插入图片“sub_1_18.gif”，设置图片为“居中对齐”。步骤 11 在第3行单元格中单击，并按【Shift+Enter】组合键换行，然后插入图片“sub_1_21.gif”。步骤 12 在嵌套表格的最后1行单元格中插入图片“sub_1_17.gif”，并设置单元格同图片等高。步骤 13 为使单元格之间的距离更大一些，可以将文本字段所在两行的“高”分别设置为“40”像素，这样圆角表格便制作完成了。（三）制作细线表格步骤 1 在圆角表格下方插入一个1行1列，宽为247像
16、素，“边框粗细”和“单元格边距”均为0，“单元格间距”为1的表格。设置该表格背景颜色为粉色“#fcb4b5”，并设置其在单元格中为“居中对齐”。步骤 2 将插入点置于表格单元格中，设置其背景颜色为白色，一个简单的细线表格便出现了。步骤 3 设置细线表格内容，首先在其中插入一个12行1列，“宽”为100，“边框粗细”“单元格边距”和“单元格间距”均为 0 的表格。步骤 4 在刚插入表格的第 1 行插入图片“sub_1_20.gif”。步骤 5 设置表格第 2 行“高”为“25”像素，背景图像为“sub_1_25.gif”步骤 6 将表格第2行拆分为两列，在第1列中插入图片i_pink.gif，并
17、设置为“居中对齐”，在第2列中输入文本“珍珠饰品批发类”，并设置加粗，颜色为粉色，此时自动生成样式“STYLE2”。步骤 7 在第 3 行单元格中输入文本，并设置文本缩进。步骤 8 按照同样的方式设置下方单元格内容。（四）制作商品展示版块步骤 1 设置表格4的第2个单元格“宽”为“20”像素，然后在第3个单元格中单击，并在“属性”面板上“垂直”下拉列表中选择“顶端”。步骤 2 在表格4的第3个单元格中插入一个1行1列，宽为100，“边框粗细”“单元格边距”和“单元格间距”均为0的表格，称该表格为“表格41”。设置“表格 41”背景图像为“sub_1_06.gif”，并在其中插入图片“sub_1
18、_05.gif”。步骤 3 在“表格41”下方插入一个9行4列，宽为100，“边框粗细”“单元格边距”和“单元格间距”均为 0 表格，称该表格为“表格 42”。步骤 4 自上向下拖动鼠标，选中所有单元格，然后单击“属性”面板上的“居中对齐”按钮，使所有单元格中的内容在单元格中居中对齐。步骤 5 拖动鼠标选择“表格42”第1行中的所有单元格，在“属性”面板上的宽”编辑框中输入“25”，使 4 个单元格平均分配表格宽度。步骤 6 在“表格42”第2行第1列单元格中插入产品图片s1.jpg，并在“属性”面板上的“类”下拉列表中选择已创建的样式“image”；在第3行第1列单元格中输入文本并设置样式。
19、步骤 7 按照同样的方法，在其他单元格中插入图片和输入文本，至此网站子页制作完成，最终效果如图所示。【知识拓展】单元格没有按照指定大小显示问题的处理有时在“属性”面板中指定了单元格的高度，按Enter键后却发现单元格并没有按照指定的高度显示。发生这种情况的原因可能是由于与该单元格相邻的单元格中存在高度比指定高度值更大的单元格，此时可以选择整行后指定大小。另外，在为单元格指定小于6像素的宽度值后，单元格往往不以指定的宽度显示。这是因为空白单元格中存在一个“ ；”空格符号，此时要单击文档工具栏中的“拆分”按钮，在文档窗口上方打开“代码”视图，并将单元格中的“ ；”符号删除，再回到“设计”视图中，就可以看到单元格按照实际设置的宽度显示。作业：1 请简述网页中的链接包含哪几种，分别有什么含义。2 要在新窗口中打开超链接，应该如何操作？3 简述如何设置状态栏文本？