制作作品展示网页

《制作作品展示网页》由会员分享，可在线阅读，更多相关《制作作品展示网页（97页珍藏版）》请在金锄头文库上搜索。

1、目录目录上一页上一页下一页下一页退出退出Dreamweaver网页制作网页制作第三单元第三单元 制作制作“作品展示作品展示”网网页页 主 编：王树平副主编：杜大志 王润泉 马文惠 目录目录上一页上一页下一页下一页退出退出 本单元通过“创建表格”、“编辑表格”、“添加表格内容”和“建立超级链接”四个任务，完成“幽幽我心的个人网站”中的“作品展示”网页的制作，学习如何使用表格来进行网页的布局。任务完成后效果如图所示。 第三单元 制作“作品展示”网页 目录目录上一页上一页下一页下一页退出退出第三单元第三单元 制作制作“作品展示作品展示”网页网页 任务一 创建表格 任务二 编辑表格 任务三 添加表格内

2、容 任务四 建立超级链接 任务五 使用代码制作表格网页 目录目录上一页上一页下一页下一页退出退出任务一任务一 创建表格创建表格 任务描述：任务描述：完成“作品展示”网页中表格的创建。 任务分析任务分析：要对 “作品展示”网页进行表格布局分析，研究如何设计表格来完成网页的布局。然后通过菜单栏完成创建表格的操作。第三单元 制作“作品展示”网页 目录目录上一页上一页下一页下一页退出退出 要制作出漂亮的网页要有合理的布局结构。 在Dreamweaver 8中，表格是用于在页面上显示表格式数据及对文本和图像等元素进行布局的强用力的工具。 表格布局是目前最常见的网页布局方式之一，它灵活方便，比其他布局方式

3、简单、易学。熟练地使用表格是对网页制作者的必须要求。 用表格布局页面用表格布局页面任务一 创建表格 目录目录上一页上一页下一页下一页退出退出 分析网页布局分析网页布局“table1”“table1-1”“table2”“table3”“table3-1”“web1”“web2”“flash1”“flash2”“3D1”“3D2”“table4” 表格布局分析网页是怎样利用表格设计页面布局的呢？回想以前打开一张网页时是否所有的内容都同时全部显示？如果不是的话是怎样进行显示的？为什么网页不能一次全部显示？表格的布局在这里有什么作用？依据不同的设计内容，这四个表格还需要进行相应的编辑与嵌套。插入嵌套

4、表格是指在表格的单元格中插入新的表格。 任务一 创建表格 目录目录上一页上一页下一页下一页退出退出 自己动手：自己动手： 1创建目录结构创建目录结构所在路径文件/文件夹的名字说明D:mysite worksworks.html“心情日记”网页存放本栏目的图像存放Flash作品存放用于链接的作品网页 制作“作品展示”网页的文件夹结构任务一 创建表格 目录目录上一页上一页下一页下一页退出退出 2表格的创建表格的创建 创建本任务页面效果图所需表格结构。如下图所示：嵌套表格任务一 创建表格 目录目录上一页上一页下一页下一页退出退出 A.使用菜单插入一个表格“table1” ，会出现下面的“表格”对话框

5、：除了使用菜单还可以使用“插入”栏、快捷键创建表格。表格对话框中 “页眉” 、“标题”、“对齐标题”、“摘要”作用是什么？任务一 创建表格 网页中长度单位百分比和像素表示什么？ “百分比”是相对于谁说的？它们的区别是什么？目录目录上一页上一页下一页下一页退出退出大多数浏览器默认显示单元格边距、间距是多少？若要确保浏览器显示的表格没有边距和间距，必须把单元格边距和单元格间距设置为多少？如果没有明确指定边框的值，则浏览器怎么显示表格边框？大多数浏览器默认显示边框粗细是多少？若要确保浏览器显示的表格没有边框应该怎么办？若把边框设置为0，则如何查看单元格和表格的边框？用表格布局页面时，宽度设为多少时页

6、面不会出现水平方向的滚动条？任务一 创建表格 目录目录上一页上一页下一页下一页退出退出任务一 创建表格 B.使用“插入”栏创建表格“table2”。 C.用快捷键创建表格“table3” 。 D.创建表格“table4”。 如何给当前表格命名？如何删除当前选中的表格？目录目录上一页上一页下一页下一页退出退出 E.在“table1”中插入嵌套表格table1-1。 F.在“table3”中插入嵌套表格table3-1 。 注意：嵌套表格的宽度受所在单元格宽度的限制。任务一 创建表格 目录目录上一页上一页下一页下一页退出退出 任务总结：任务总结： 1创建表格 2表格布局页面 3表格在页面中的作用任

7、务一 创建表格 目录目录上一页上一页下一页下一页退出退出举一反三：举一反三： 创建网页“practice3-1.html”，在网页中插入一个6行5列的表格，宽500像素，边框粗细与单元格间距均为5像素，页眉选择“顶部”，标题为“产品信息”，保存并预览网页。 1启发思路： 回想插入表格的几种方法，考虑页眉、标题等选项出现在哪个对话框的选项卡中，并考虑如何设置创建表格的相关属性。 2分组完成任务。任务一 创建表格 目录目录上一页上一页下一页下一页退出退出作业：作业：1创建网页“practice3-2.html”，在网页中插入如图JYFS3-1所示的嵌套表格，保存并预览网页。 图JYFS3-1任务一

8、 创建表格 目录目录上一页上一页下一页下一页退出退出2创建网页“practice3-3.html”，在网页中插入如图JYFS3-2所示的嵌套表格，保存并预览网页。图JYFS3-23设计一个以环保为主题的网页，利用已学知识设计网页的栏目与目录结构，创建表格布局网页。内容在以后的学习中添加。 任务一 创建表格 目录目录上一页上一页下一页下一页退出退出任务二任务二 编辑表格编辑表格 任务描述：任务描述：编辑已创建成的表格。 任务分析：任务分析：在任务一中，已创建好布局网页所需的表格，还需要进一步对这些表格进行编辑，以满足页面布局要求。根据以前知识知道编辑文字、编辑图像是通过相应的属性面板进行设置，同

9、样编辑表格也是通过其属性面板来进行编辑。第三单元 制作“作品展示”网页 目录目录上一页上一页下一页下一页退出退出这两个表格的形状、底色不同对比任务一中创建的表格与图3-1中表格的差别任务二 编辑表格 目录目录上一页上一页下一页下一页退出退出表格“table1”处于选定状态控制柄控制柄任务二 编辑表格 思考：什么是表格、单元格、行、列？如何选中表格？ 自己动手：自己动手：注意：要编辑表格、行、列或单元格，必须先选中它们。 1选择表格“table1” 目录目录上一页上一页下一页下一页退出退出 2编辑表格“table1” 任务二 编辑表格 依据设计要求，设置表格“table1”的“对齐”方式为“居中

10、对齐”如下图所示：各属性选项有什么作用？目录目录上一页上一页下一页下一页退出退出设置表格“table1”的第2行的单元格背景图像为“wkimages”文件夹下的dhJpg。如下图所示：任务二 编辑表格 通过WORD、EXCEL等知识迁移，想想如何选择矩形的单元格或不相邻的单元格呢选中表格中所有单元格和选中整个表格是一个概念吗？单元格属性选项有什么作用？如何选中单个单元格、行、列？目录目录上一页上一页下一页下一页退出退出3编辑表格“table1-1”设置表格“table1-1”宽500像素、高34像素、左对齐。把“table1-1”5个单元格宽度设为100像素。任务二 编辑表格 4编辑表格“ta

11、ble2”设置表格“table2”的属性：“表格Id”为“table2”、高“50像素”、对齐方式为“居中对齐”，背景颜色为“#FFFFFF”，第一列和第四列的列宽均为17像素。目录目录上一页上一页下一页下一页退出退出 5编辑表格“table3”及其中的嵌套表格设置表格“table3”为“居中对齐”，背景颜色为“#FFFFFF”，第1列与第3列列宽均设置为17像素。设置“table3-1”边框粗细为1像素，边框颜色为“#EFEFEF”。分别设置表格“table3-1”第一行、第三行和第五行单元格中嵌套的表格“web1”、“flash1”和“3D1”的属性：高30像素，对齐方式为左对齐，第1列列

12、宽为30像素。 分别设置表格“table3-1”第二行、第四行和第六行单元格中嵌套的表格“web2”、“flash2”和“3D2”的属性：第1列和第5列的列宽均设置为40像素。任务二 编辑表格 目录目录上一页上一页下一页下一页退出退出6编辑表格“table4”设置表格“table4”对齐方式为居中对齐，背景颜色为“#FFFFFF”。将第2行行高设置为1像素、背景颜色设置为“#EFEFEF”，这样表格“table4”的第2行就显示为一条高1像素、颜色为“#EFEFEF”的细线。注意：此时须在“代码”视图里将表格“table4”第2行单元格内的“ ”删除，否则行高不会以1像素显示。如下图

13、所示：任务二 编辑表格 目录目录上一页上一页下一页下一页退出退出任务二 编辑表格 删除表格“table4”第2行中的“ ”标记目录目录上一页上一页下一页下一页退出退出 至此，完成了“作品展示”网页中所有表格的编辑工作。完成后的效果如下图：任务二 编辑表格 目录目录上一页上一页下一页下一页退出退出任务小结任务小结1选中单元格、选中表格的方法。2编辑单元格属性3编辑表格属性4表格的相关基本操作：如合并、拆分单元格，添加、删除行或列，调整行高、列宽任务二 编辑表格 目录目录上一页上一页下一页下一页退出退出 举一反三举一反三创建网页“practice3-4.html”，插入一个1行2列的表格

14、，在属性面板中设置表格的填充、间距、边框均为10像素，在第1行第2列中再插入一个2行1列的嵌套表格，设置表格的填充、间距为0像素，边框为1像素，保存并预览网页，体会填充、间距、边框的含义。 1启发思路： 注意区分表格和单元格属性设置，单元格和表格有一些相同属性，如都有背景颜色或背景图像属性，他们设置时有什么区别？ 2分组完成任务。任务二 编辑表格 目录目录上一页上一页下一页下一页退出退出作业：作业： 1创建网页“practice3-5.html”，插入如图JYFS3-4所示表格并按要求设置其属性：宽400像素、高100像素、单元格间距为5像素、边框粗细为3像素、边框颜色为“#FF0000”。表

15、格第1、3列宽100像素、单元格的边框颜色为“#00FF00”，第2列宽100像素、单元格的边框颜色为“#0000FF”。图JYFS3-4任务二 编辑表格 目录目录上一页上一页下一页下一页退出退出 2创建网页“practice3-6.html”，插入一个4行3列的表格，按图JYFS3-5所示，对单元格进行合并与拆分。设置表格边框粗细为1像素、颜色为“#000000”，将表格第1行的背景颜色设置为“#3399CC”，第2行与第3行的第一列单元格、第4行第1、2列单元格的背景颜色设置为“#FFFFCC”。图JYFS3-5 任务二 编辑表格 目录目录上一页上一页下一页下一页退出退出3创建网页“pra

16、ctice3-7.html”，插入5个表格，设置表格对齐属性及单元格内容对齐属性，使预览效果如图JYFS3-6所示。 图JYFS3-6任务二 编辑表格 目录目录上一页上一页下一页下一页退出退出4继续创建上一任务作业中以环保为主题的网页，对表格进行相应编辑。暂不进行表格中内容的添加。任务二 编辑表格 目录目录上一页上一页下一页下一页退出退出任务三任务三 添加表格内容添加表格内容 任务描述：任务描述：在“作品展示”网页中添加表格内容。 任务分析：任务分析：任务二已完成“作品展示”页面表格的编辑，页面布局部分已经完成，本任务需要将准备好的内容添加进去，并设置其格式。添加内容需首先使单元格处于编辑状态

17、。第三单元 制作“作品展示”网页 目录目录上一页上一页下一页下一页退出退出自己动手：自己动手：向表格内部添加内容向表格内部添加内容 1向表格“table1”中添加内容 利用第二单元所学方法，在“文件”面板中打开“works”文件夹，把“wkimages”文件夹下的“title.jpg”图像添加到表格“table1”的第1行中。 将光标放入表格“table1-1”的第1列的单元格中，输入导航文字“首页”。在第2至5列的单元格中分别输入文字“作品展示”、“心情日记”、“家乡山水”和“访客信息”。 用鼠标拖拽选中表格“table1-1”的全部单元格，在单元格“属性”面板中设置各单元格内容的对齐方式为

18、“居中”，文字大小保持默认值，文字颜色为“#5E5C5D”、加粗。效果如下图：任务三 添加表格内容 目录目录上一页上一页下一页下一页退出退出向表格“table1”中添加内容 并设置格式。任务三 添加表格内容 目录目录上一页上一页下一页下一页退出退出 2向表格“table2”、“table3”中添加内容 将光标放入表格“table2”的第2个单元格中，添加图像“works.jpg”。 将光标放入表格“table2”的第3个单元格中，添加图像“link.jpg”。效果如下图所示：任务三 添加表格内容 Works.jpglink.jpg目录目录上一页上一页下一页下一页退出退出 将光标放入表格“web

19、1”的第1个单元格中，在“属性”面板中设置单元格水平对齐方式为“居中”，在其中添加图像“arrow.gif”。然后将光标放入表格“web1”的第2个单元格中，输入文字“网页作品”，设置文字大小为14像素，颜色为“#336666”、加粗。 使用同样方法在表格“flash1”和“3D1”中添加图像“arrow.gif”和文本，文本内容分别为“flash作品”和“3D作品”，并与“网页作品”文字进行同样的样式设置。任务三 添加表格内容 目录目录上一页上一页下一页下一页退出退出 选择表格“web2”的第2至4个单元格，在“属性”面板中将单元格水平对齐方式设为“居中”。在“web2”的第2个单元格中，添

20、加图像“w1.gif”；在“web2”的第3个单元格中，添加图像“w2.gif”；在“web2”的第4个单元格中，添加图像“w3.gif”。添加好图像文件后，可以看到图像与所在行等高，为了网页美观，让图像与表格边框之间适当留白，将表格“web2”的行高设置为159像素。 接下来分别选择上述三幅图像，在图像“属性”面板里设置边框为1。为这三幅图像加上边框。完成以上操作后，效果如下图所示：任务三 添加表格内容 目录目录上一页上一页下一页下一页退出退出向表格“web1”和“web2”中添加内容 任务三 添加表格内容 目录目录上一页上一页下一页下一页退出退出 采用如上方法分别在表格“flash2”和“

21、3D2”中添加内容：在“flash2”中添加的图像文件分别为“f1.gif”、“f2.gif”和“f3.gif”，在“3D2”中添加的图像文件分别为“d1.jpg”、“d2.jpg”和“d3.jpg”。 3向表格“table4”中添加内容 将光标放入表格“table4”第3行的单元格中，将其行高设为48像素，单元格水平对齐方式为“居中”，文字大小为12像素，然后在其中输入文字： “版权所有：幽幽我心欢迎来信QQ:123456789”。 4添加网页背景图像 单击“页面属性”按钮，在“分类”中选择“外观”，在“外观”中设置背景图像为“D:mysiteworkswkimagesbgfill.jpg”

22、。 至此，页面内容添加完毕。任务三 添加表格内容 目录目录上一页上一页下一页下一页退出退出 思考题：思考题： 单元格设置背景图像和插入图像又什么区别呢？你能区别开吗？单元格背景图像的大小对单元格的显示又什么影响呢？任务三 添加表格内容 目录目录上一页上一页下一页下一页退出退出 知识讲解：表格的三种布局模式知识讲解：表格的三种布局模式 Dreamweaver 8在“插入”栏的“布局”类别中提供了“标准”、“扩展”和“布局”三种表格视图模式：图3-30 “插入”栏“布局”类别“标准标准”模式：模式：标准模式是表格默认的视图模式，对于表格及其内容的绝大部分操作适合在该模式下进行。任务三 添加表格内容

23、 目录目录上一页上一页下一页下一页退出退出 “扩展扩展”模式：模式：在标准模式中，当图像填满整个单元格时，很难直接将光标定位在单元格中，为了解决这个问题，可以切换到“扩展表格”模式。在“扩展”模式下，Dreamweaver 8临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，可以方便地选择表格中的内容或者精确地定位插入点。 “布局布局”模式：模式：在“布局”模式中，可以在表格添加内容前，使用“布局”单元格和“布局”表格对页面进行灵活的布局。文档窗口的顶部显示“布局模式”，指示当前正处于“布局”模式中，原来页面上的每个表格都显示为布局表格。任务三

24、添加表格内容 目录目录上一页上一页下一页下一页退出退出 布局”模式的主要功能是绘制或编辑复杂的表格。“布局单元格”不能存在于布局表格之外，可以在“布局表格”中任意位置绘制“布局单元格”。单击绘制“布局表格”或“布局单元格”按钮后，可以通过拖拽鼠标来绘制“布局表格”或“布局单元格”，也可以按住Ctrl键拖拽鼠标，实现连续绘制多个“布局表格”或“布局单元格”。在布局表格内，布局单元格可以任意移动。 注意：如果页面中没有其他内容，则新建的“布局表格”自动定位在页面的左上角。不能在文档、图像、表格等内容的旁边绘制“布局表格”。如果要在内容之下绘制布局表格时出现禁止绘制光标，表示布局表格的插入点距离内容

25、太近。“布局”单元格可以自由移动，也可以利用控制柄灵活地调整大小。任务三 添加表格内容 目录目录上一页上一页下一页下一页退出退出 任务小结任务小结 1掌握在单元格内插入图片，并设置图片格式。 2掌握在单元格内插入文字，并设置文字格式。 3掌握使用表格的三种视图模式。任务三 添加表格内容 目录目录上一页上一页下一页下一页退出退出 举一反三：举一反三： 打开上一任务作业中创建的以环保为主题的网页，继续完成。从互联网或其他途经搜索需要的素材，插入到表格中，并设置相应格式。 1启发思路： 自己搜索素材，把素材插入到表格中并设置格式。根据最终要完成的效果可调整素材或单元格。若在操作单元格时遇到问题，可以

26、考虑用“扩展”或“布局”模式来配合操作。 2分组完成任务。任务三 添加表格内容 目录目录上一页上一页下一页下一页退出退出 做课本本任务中的举一反三习题。 作业作业任务三 添加表格内容 目录目录上一页上一页下一页下一页退出退出任务四任务四 建立超级链接建立超级链接 任务：任务：通过在“作品展示”网页上建立超级链接，学习各种超级链接的创建方法。 分析：分析：为了把Internet站点上众多分散的网页联系起来，构成一个整体，就必须在网页上加入超级链接。通过点击网页上的超级链接，才能在信息的海洋中尽情遨游。 第三单元 制作“作品展示”网页目录目录上一页上一页下一页下一页退出退出自己动手：自己动手： 1

27、启动Dreamwear，打开“幽幽我心的个人网站”。2在文件面板中打开“作品展示”works.html。3为文本添加超级链接。 任务四 建立超级链接 注意：在建立超级链接之前，要明确链接源与链接目标对象之间的链接关系和目标对象所在的位置，然后根据不同的超级链接类型建立超级链接。在以前的学习中，哪些软件利用到了超级链接？在这些软件中超级链接起什么作用？什么是超级链接？浏览Iternetr时，见到过哪些类型的超级链接？关于链接源与链接目标对象目录目录上一页上一页下一页下一页退出退出 选定要添加超级链接的文本“首页”。 单击“属性”面板中 “链接”下拉列表框右侧的“浏览文件”按钮。任务四 建立超级链

28、接目录目录上一页上一页下一页下一页退出退出 从弹出的对话框中选择“站点首页” index.html”。 选择完毕后在“链接”下拉列表框中显示为“./index.html”创建链接的其他方法有哪些？任务四 建立超级链接目录目录上一页上一页下一页下一页退出退出 设置文本超级链接样式 默认状态下，添加了超级链接的文本“首页”两字自动变为蓝色，且文本被加上下划线。 单击“属性”面板中的“页面属性”按钮，打开“页面属性”对话框，在对话框中进行如下设置：任务四 建立超级链接目录目录上一页上一页下一页下一页退出退出 选择“分类”列表框中的“链接”项。 设置各项参数。各项参数的功能是什么？任务四 建立超级链接

29、目录目录上一页上一页下一页下一页退出退出4为图像添加超级链接 选择表格“web2”中的作品图像“w1.gif” 单击“属性”面板“链接”下拉列表框右侧的“浏览文件”按钮任务四 建立超级链接目录目录上一页上一页下一页下一页退出退出 选择链接对象“w1.gif” 在“属性”面板“替换”下拉列表框的文本框内，输入文字“单击此处可查看放大图”，为此图像设置提示文本。在浏览器中预览时，鼠标指向添加了超级链接的图像后，只要稍停片刻，设置的提示文本就会显示出来。任务四 建立超级链接目录目录上一页上一页下一页下一页退出退出 在“属性”面板中的链接文本框中输入绝对路径“http:/”。 5添加友情链接 任务四

30、建立超级链接链接源链接目标目录目录上一页上一页下一页下一页退出退出“欢迎来信欢迎来信”6添加电子邮件超级链接 任务四 建立超级链接链接源链接目标目录目录上一页上一页下一页下一页退出退出添加电子邮件超级链接的方法1： 选择“ “欢迎来信” 单击“插入”栏“常用”类别中的“电子邮件链接”按钮或 选择“插入”菜单中的“电子邮件链接”选项任务四 建立超级链接目录目录上一页上一页下一页下一页退出退出完成上一步操作后将弹出“电子邮件链接”对话框，如图所示：输入要链接的E-Mail地址任务四 建立超级链接目录目录上一页上一页下一页下一页退出退出在网页中选择“欢迎来信”，然后在“属性”面板中的“链接”文本框中

31、直接输入“mailto：邮件地址”。添加电子邮件超级链接的方法2： 还有哪些类型的超级链接？任务四 建立超级链接目录目录上一页上一页下一页下一页退出退出通过完成以上任务，学习了在网页上建立超级链接。 什么是超级链接。 建立各种超级链接的方法。 不同类型的链接路径。 设置文本超级链接样式的方法。 任务总结任务总结任务四 建立超级链接目录目录上一页上一页下一页下一页退出退出举一反三举一反三利用收集到的素材和课前的准备，完成“环保”主题网站制作。在网页上添加本任务所学习到的各种超级链接，链接的目标网页内容可以相对简单，但所有链接均为有效链接。任务四 建立超级链接目录目录上一页上一页下一页下一页退出退

32、出启发思路：1超链接可以使访问者从一个页面跳转至另外一个页面，或从一个站点跳转至另外一个站点。但是这种频繁的跳转可能使人烦躁。为了方便用户更好的浏览页面，要注意什么？2当超链接位于不同的背景时，如：位于导航条内，对其应该 。3超链接能做到“来去自如，但是要是在中途迷路了，该怎么办？使用特别的颜色和效果使用特别的颜色和效果 在每一页上都做返回链接，为了浏览方便，还可以添加在每一页上都做返回链接，为了浏览方便，还可以添加“上一页、下一页上一页、下一页”等等链接。对于这样的链接，所有页面的超链接格式最好保持一致。链接。对于这样的链接，所有页面的超链接格式最好保持一致。 超链接必须简洁明了。超链接必须

33、简洁明了。 超链接文字必须与普通的内容文字相区别，鼠标移动到超链接上时显示突出超链接文字必须与普通的内容文字相区别，鼠标移动到超链接上时显示突出效果。默认的超链接动作对应的是颜色变化，同时还要考虑到如果仅仅依靠颜色的效果。默认的超链接动作对应的是颜色变化，同时还要考虑到如果仅仅依靠颜色的变化来区分超链接状态的话，那么色盲们可以接受吗？给超链接加上下划线将更有变化来区分超链接状态的话，那么色盲们可以接受吗？给超链接加上下划线将更有助于用户辨认超链接；或者是当鼠标经过超链接时出现下划线，也能达到同样的效助于用户辨认超链接；或者是当鼠标经过超链接时出现下划线，也能达到同样的效果。果。 当链接到一个文

34、件时，超链接上包含一段关于文件的简单描述，这有助于用当链接到一个文件时，超链接上包含一段关于文件的简单描述，这有助于用户决定自己的意愿（即：是否点击该文件链接）。户决定自己的意愿（即：是否点击该文件链接）。任务四 建立超级链接目录目录上一页上一页下一页下一页退出退出1在个人网站的推广中，如何有效的利用超级链接。2上网浏览一些个人网站，注意特殊的超级链接效果，并模仿制作。 作业：作业： 任务四 建立超级链接目录目录上一页上一页下一页下一页退出退出任务五任务五 使用代码制作表格网页使用代码制作表格网页 任务：任务：使用HTML代码制作一个简单的表格布局网页，完成属性设置并添加超级链接。 示例示例1

35、 1 分析：分析：在HTML的语法中，表格主要通过3个标签来构成，表格标签、行标签、单元格标签。如下表所示：标 记描述表格标签行标签单元格标签示例示例2 2第三单元 制作“作品展示”网页目录目录上一页上一页下一页下一页退出退出自己动手：自己动手： 1准备工作。 在桌面上新建一个文件夹“yssx”，将光盘“第三单元素材”下的“HTML”文件夹中的“htmlimages”文件夹拷贝到“yssx”文件夹中，然后运行Dreamweaver 8，创建一个HTML文档，文件命名为“jade.html”，保存在新建的“yssx”文件夹中。目录结构图示。 将Dreamweaver 8的“文档”窗口切换到“代码

36、”视图，将其中的代码进行如下修改：玉石鉴赏 !-任务五 使用代码制作表格网页 目录目录上一页上一页下一页下一页退出退出2.2.插入表格结构并设置属性。插入表格结构并设置属性。table width=700 align=center border=1 =0!-table: - -td height=50 =3 !- td :- / =#339999/ =#339999 / td height=50 =3 / 表格、行、单元格标签格式任务五 使用代码制作表格网页 目录目录上一页上一页下一页下一页退出退出3.3.添加图像与文本添加图像与文本任务五 使用代码制作表格网页 目录目录上一页上一页下一页下一

37、页退出退出 为表格第二行中的三幅图像添加超级链接，使之单击后可以看到清晰的大图像，为第四行的文本添加文件下载链接，使浏览者可以下载更多的玉石图像。4.4.添加超级链接添加超级链接更多精美玉石图像下载 超级链接标签格式任务五 使用代码制作表格网页 目录目录上一页上一页下一页下一页退出退出             课堂练习1： 这是一个这是一个 行行 列，列，宽宽 像素，边框为像素，边框为 ，单元格间距为单元格间距为 、单元格、单元格边距为边距为 的表格。的表格。23200100任务五 使用代码制作表格网页 目录目录上一页上一页下一页下一

38、页退出退出请写出如图所示表格的HTML代码： 课堂练习2：任务五 使用代码制作表格网页 目录目录上一页上一页下一页下一页退出退出通过完成以上任务，学习使用代码制作表格网页。本任务需要重点掌握的知识是：表格标签、行标签、单元格标签、超级链接标签的用法及属性。任务总结：任务总结：任务五 使用代码制作表格网页 目录目录上一页上一页下一页下一页退出退出1启发思路：在分析“作品展示”网页时注意以下几点： 页面属性。 CSS样式的定义。 表格结构。 表格标签的“align”属性与行标签和单元格标签的“align”属性的异同。 HTML代码中电子邮件超链接是如何实现的？ 超级链接的“href”属性部分都使用

39、了哪些类型的链接路径？ 在Dreamweaver 8的代码视图下分析“作品展示”网页 举一反三：举一反三：任务五 使用代码制作表格网页 目录目录上一页上一页下一页下一页退出退出1使用代码制作网页“practice3-14html”，这个网页中包含一个2行3列的表格。2使用HTML代码制作网页“practice3-15html”，网页中包含课本P98“图JYFS3-11”所示表格。3制作本课开 始时所展示的彩色虚线表格。（给出CSS样式的HTML代码。）4在第一单元任务一中，设计了自己的个人网站栏目，使用HTML代码制作其中一个栏目的网页。作业：作业：任务五 使用代码制作表格网页 目录目录上一页

40、上一页下一页下一页退出退出目录结构： 相关知识：相关知识： 1许多网页的表格布局可分为上、中、下三个部分，上面部分放置网页的标题，中间部分放置网页的主要内容,下部分放置制作者的信息及版权信息等。上、中、下三个部分又包含各自的嵌套表格来布局相应的内容。 2如果表格布局网页的结构不合理，会减慢网页的下载速度，因为浏览器在解析网页时，先将整个网页的结构下载完毕之后才显示内容，如果不使用嵌套，表格会非常复杂，浏览者要等待很长时间才能看到网页内容。通常用表格布局页面时，应该遵循以下几点： A.整个网页不要放在一个表格里，尽量使用多个表格来进行布局。 B.表格的嵌套层次尽量要少。 C.单一表格的结构尽量整

41、齐，不要太复杂。任务一 创建表格 3表格对话框中有关选项的名作用如下。 “页眉”选项组：选择标题单元格的位置。 “标 题”：输入表格标题文字。 “对 齐 标 题”：选择标题的位置，可选择默认、顶部、底部、左边或右边。 “摘 要”：添加备注文字。 任务一 创建表格 4 在网页制作过程中，有很多元素的长度单位可以选用百分比或像素来表示。像素是组成图像的最小单位，使用像素为长度单位表示该值是一个绝对值；百分比是指元素针对其所属父元素所占的比例，使用百分比为长度单位说明这个值是相对的，其绝对大小会随所属父元素的大小变化而发生变化。 5大多数浏览器默认显示单元格边距为1、间距为2，若要确保浏览器显示的表

42、格没有边距和间距，必须把单元格边距和单元格间距设置为0。 6 为防止浏览过程中出现水平方向的滚动条，通常在800*600分辨率下，把表格宽度最大设置为778像素，在1024*768分辨率下最大设置为1002像素。 7 大多数浏览器默认显示边框粗细为1，若要确保浏览器显示的表格没有边框，必须把边框设置为0。若要在边框设置为0时查看单元格和表格的边框，可以在“查看”菜单的“可视化助理”选项中，选择“表格边框”。任务一 创建表格 8 选择表格后，在“属性”面板“表格Id”下的文本框里可以直接输入表格的名称，也可以用Delete键删除表格。 任务一 创建表格 目录目录上一页上一页下一页下一页退出退出相

43、关知识：相关知识： 1选择表格的方法 A.单击表格中的某个单元格，然后在文档窗口左下角的标签选择器中，通过单击“table”标签选择表格，如下图所示： 任务二 编辑表格 任务二 编辑表格 B.单击表格单元格，然后选择菜单栏“修改”“表格”“选择表格”选项。 C.将光标放入表格的某个单元格内，单击鼠标右键，在弹出的快捷菜单里选择“表格”选项的“选择表格”命令。 注意：对于简单的表格的选择使用单击边框的方法比较方便，对于复杂表格的选择使用标签选择器比较方便。 目录目录上一页上一页下一页下一页退出退出 2 表格“属性”面板参数介绍“表格Id”：表格的Id，为表格命名。“行”和“列”：表格中行、列的数

44、目。“宽”和“高”：以像素为单位或按百分比指定表格宽度、高度。通常不需要设置表格的高度。“填充”：指的是单元格边距，即单元格内容和单元格边框之间距离，单位为像素。“间距”：指的是单元格间距，即相邻单元格之间的距离，单位为像素。“对齐”：确定表格相对于同一段落中其他元素（例如文本和图像）的显示位置。“边框”：指定表格边框的宽度，单位为像素。“清除列宽”按钮：从表格中删除所有明确指定的列宽。“清除行高”按钮：从表格中删除所有明确指定的行高。“将表格宽度转换成像素”按钮和“将表格高度转换成像素”按钮：将表格中每列的宽度或高度设置为以像素为单位的当前宽度，同时将整个表格的宽度设置为以像素为单位的当前宽

45、度。“将表格宽度转换成百分比”按钮和“将表格高度转换成百分比”按钮：将表格中每列的宽度或高度设置为按百分比表示的当前宽度，同时将整个表格的宽度设置为按百分比表示的当前宽度。任务二 编辑表格 4选择行的方法 在要选择行中的任意单元格内单击，然后在标签选择器中通过“tr”标签选择。也可以用鼠标指向行的左边缘，当指针变为水平选择箭头时单击选择。 任务二 编辑表格 3选择单个单元格的方法 在要选择的单元格内单击，然后在文档窗口左下角的标签选择器中通过“td”标签选择。 单击单元格，然后在“编辑”菜单中选择“全选”。（选中一个单元格后，再次在“编辑”菜单中选择“全选”，可以选择整个表格） 单击单元格，然

46、后按快捷键Ctrl+A。 按住Ctrl键在该单元格内单击。目录目录上一页上一页下一页下一页退出退出 5选择列的方法 用鼠标指向列的上边缘，当指针变为垂直选择箭头时单击选择一列。也可以在要选择的列中任意单元格内单击，在列标题菜单（列标题可以通过“查看”菜单“可视化助理”中的“表格宽度”显示和隐藏）中选择“选择列”选项，如下图所示： 任务二 编辑表格选择列 目录目录上一页上一页下一页下一页退出退出 6选择一行或矩形的单元格块的方法 将鼠标指针从一个单元格拖到另一个单元格。单击一个单元格，然后按住Shift键单击另一个单元格。 7选择不相邻的单元格的方法 按住Ctrl键单击尚未选中的单元格、行或列，

47、会将其选中；单击已经被选中的单元格、行或列，则会取消选择。 8 选择表格和选择表格中的全部单元格是不同的概念，采用的操作方法也不同。可以通过鼠标拖拽选中表格中的全部单元格，但是不能用拖拽选择表格；选择表格后只能对表格本身的属性进行编辑，如果要编辑单元格属性，应直接选择该单元格。任务二 编辑表格目录目录上一页上一页下一页下一页退出退出 9 单元格“属性”面板参数介绍“合并单元格”按钮：将所选的单元格、行或列合并为一个单元格。“拆分单元格”按钮：将一个单元格拆分成多个单元格。一次只能拆分一个单元格；如果选择的单元格多于一个，则此按钮将禁用。“水平”：设置单元格、行或列内容的水平对齐方式。“垂直”：

48、设置单元格、行或列内容的垂直对齐方式。“宽”和“高”：可以以像素为单位或按占整个表格宽度或高度的百分比进行设置。若让浏览器根据单元格的内容以及其他列和行的宽度和高度自动确定适当的宽度或高度，此文本框采取默认设置（空）。“不换行”：可以防止换行，从而使给定单元格中的所有文本都在同一行。如果启用了“不换行”，则当键入数据或将数据粘贴到单元格时，单元格会加宽来容纳所有数据。“标题”：可以将所选的单元格格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体并且居中。“背景”和“背景颜色”：设置所选单元格、列或行的背景图像和背景颜色。“边框”：单元格的边框颜色。任务二 编辑表格 相关知识：相关

49、知识：任务四 建立超级链接1超级链接：简称超链接，是指从一个网页到一个目标对象的链接关系。该目标对象可以是网页，或者是当前网页上的不同位置，还可以是图像、电子邮件地址或文件，甚至可以是应用程序。3网页中的超级链接一般分为外部链接、内部链接、邮件链接和锚记链接等四种类型。内部链接：在同一个站点内部网页文档之间的链接。外部链接：在不同网站网页文档之间的链接。邮件链接：电子邮件链接。锚记链接：可以链接到网页中某个特定位置的链接（锚记链接将在第五单元中介绍）。如果按照使用对象的不同，网页中的超级链接又可以分为：文本超级链接、图像超级链接、锚记超级链接、多媒体文件超级链接、空链接等。2关于链接源和链接目

50、标：超级链接不能凭空建立，需依托一个实体而存在，这个实体可以是文本、图片、表格的行列或单元格等，链接的目标对象可以是网页、文件、邮件地址等，甚至可以是应用程序。任务四 建立超级链接4链接路径的三种类型 绝对路径：指链接文件的完整路径。例如，“http:/ 如果要链接站点外远程服务器上的网页或图像等文件，必须使用绝对路径进行链接，即使站点移动至其他位置也不会出现断链现象 。 站点根目录相对路径：是指从站点的根文件夹到文档的路径。站点根目录相对路径以一个正斜杠开始，该正斜杠表示站点根文件夹。例如，“/index.html”是首页文件“index.html”的站点根目录的相对路径。如果不熟悉此类型的

51、路径，最好坚持使用文档相对路径。 文档相对路径：最常使用。文档相对路径的基本思想是省略掉与当前文档路径中相同的部分，只输入不同的路径部分。 正斜杠“/”表示在文件夹层次结构中下移一级。 “.”表示在文件夹层次结构中上移一级。 若成组地移动文件，则必须更新这些链接。 默认情况下，Dreamweaver 8使用文档相对路径创建指向站点中其他网页的链接。 任务四 建立超级链接a . 输入超级链接路径：直接在“链接”下拉列表框中输入文本的链接对象的路径。b . “指向文件”按钮：按住“链接”下拉列表框右侧的“指向文件”按钮，将其拖拽至右侧展开的“文件”面板中要链接的对象文件上。如图所示。c. 使用“插

52、入”菜单，“插入” “超级链接” 。d. 使用“插入”栏“常用”类别中的“超级链接”按钮，在指定位置插入文本并建立超级链接。5其他几种建立超级链接的方法任务四 建立超级链接6页面属性对话框中“分类”列表框中“链接”项参数介绍：“链接颜色” 指定应用于链接文本的颜色。“已访问链接”的颜色指定应用于访问过的链接的颜色。“变换图像链接”的颜色指定当鼠标指针位于链接上时应用的颜色。“活动链接”的颜色指定当鼠标指针在链接上单击时应用的颜色。“下划线样式”指定了应用于链接的下划线样式。任务四 建立超级链接文件下载超级链接：在选中需添加超级链接的内容后，如果在“链接”下拉列表框中输入的内容为预下载文件的路径

53、时，就建立了一个该文件的下载链接，预览网页时单击该链接将弹出“文件下载”对话框。7.其他类型的超级链接 任务四 建立超级链接空链接：选择要创建空链接的对象后，在“属性”面板中的“链接”下拉列表框中输入“#”，就为该对象添加了一个空链接。空链接主要用于向网页上的对象附加行为。课堂讨论：课堂讨论：建立了超级链接后，需要删除超级链接时如何操作？任务四 建立超级链接8. 删除超级链接：先用鼠标选定链接源，将光标定位于属性面板的“链接”文本框中，用“BackSpace”键或“Delete”键，将其中显示的超级链接对象删除，再回车。或在选定链接源后选择“修改”-“移除链接”命令，或使用快捷键“CTRL+SHIFT+L”,也可以删除超级链接。任务四 建立超级链接任务四 建立超级链接相关知识：相关知识：表格标签格式：表格标签格式：行标签格式：行标签格式：单元格标签格式：单元格标签格式：“rowspan”属性：用于实现单元格跨越多行“colspan”属性：用于实现单元格跨越多列 任务五 使用代码制作表格网页 :超级链接标签，成对标签，属性包括href：链接路径属性，可以使用相对路径或者绝对路径来描述；target:链接页面的打开方式属性 。任务五 使用代码制作表格网页