电子商务网页制作0课件3

1、主编：谢嵘我们在浏览电子商务网站时注意到，受欢迎的网站大都颜色艳丽、布局美观。在一个页面上，既要罗列出海量的商品信息，又要使页面看起来整齐漂亮，它们是怎样做到的呢？这样的网站大部分都是由表格来进行布局排版的，只是因为没有显示表格的边框，所以在浏览时根本看不出表格的存在。因此，掌握表格的操作是制作出整齐美观的电子商务网页的必修课。 项目3 用表格布局网站 项目导学 体验活动一：认识表格及其基本操作 活动任务：新建一个表格并在表格中插入图片和文字，利用“属性”面板修改表格的参数。活动指导：在Dreamweaver CS4中，只要在“表格”对话框中设置行列数、边框、表格位置等参数，就可以插入表格。表

2、格由行和列组成，行和列交叉所形成的矩形区域，即表格中的一个矩形就称为单元格。在表格中可以合并或拆分多个单元格。 项目3 用表格布局网站 体验活动一：认识表格及其基本操作 活动步骤：启动Dreamweaver CS4软件。单击“站点”菜单上的“管理站点”命令，单击“完成”按钮，打开“我的站点1”。打开“newbook.html”页面，然后单击“插入”菜单上的“表格”命令 项目3 用表格布局网站 体验活动一：认识表格及其基本操作 活动步骤：在弹出的“表格”对话框中，设置表格为3行2列，标题选择“左”对齐，单击“确定”按钮。在“newbook.html”页面中出现了一个表格。 项目3 用表格布局网站

3、 体验活动一：认识表格及其基本操作 活动步骤：选中第一行的两个单元格，单击“属性”面板上的“合并单元格”按钮。在合并过的单元格中输入文字“图书分类”。 项目3 用表格布局网站 体验活动一：认识表格及其基本操作 活动步骤：在“插入”面板上单击“图像”按钮，在弹出的对话框中，打开“image”文件夹中的“1.jpg”文件。将“2.jpg”插入到左边列下方的单元格中。 项目3 用表格布局网站 体验活动一：认识表格及其基本操作 活动步骤：在表格的右边列输入如图所示的文字。选中表格的第二行和第三行，在“属性”面板中设置它的“水平”为“居中对齐”，“垂直”为“居中”。 项目3 用表格布局网站 体验活动一：

4、认识表格及其基本操作 活动步骤：选中表格的第一行，在“属性”面板中设置“背景颜色”为“#FFFF66”，设置“高”为“50”。保存网页，单击F12键，在浏览器中预览网页的效果。 项目3 用表格布局网站 体验活动二：表格的基本操作活动任务：利用表格制作圆角矩形样式。活动指导：表格是矩形的或正方形的，圆角矩形使页面的效果更加美观。表格直接决定了网页是否美观，内容组织是否清晰，其实合理利用表格可以美化页面。 项目3 用表格布局网站 体验活动二：表格的基本操作活动步骤：打开“index.html”页面后，单击“插入”面板上的“表格”按钮，插入一个3行3列的表格，表格宽度为300，边框粗细为0像素。给每

5、个单元格编号以方便下面的操作。 项目3 用表格布局网站 体验活动二：表格的基本操作活动步骤：选中单元格，单击插入工具栏上的“图像”按钮在弹出的对话框中，如图3-16所示，选择站点image文件夹中的“top_01.jpg”文件。 项目3 用表格布局网站 体验活动二：表格的基本操作活动步骤：图像插入单元格1内后，将该单元格的宽和高需按照插入的图像宽和高设置。 项目3 用表格布局网站 体验活动二：表格的基本操作活动步骤：图像插入单元格1内后，将该单元格的宽和高需按照插入的图像宽和高设置。 项目3 用表格布局网站 体验活动二：表格的基本操作活动步骤：单元格2中插入“top_02.jpg”文件；单元格

6、3中插入“top_03.jpg”文件；单元格4中插入“cen_02.jpg”文件；单元格6中插入“cen_01.jpg”文件；单元格7中插入“bot_01.jpg”文件；单元格8中插入“bot_02.jpg”文件；单元格9中插入“bot_03.jpg”文件。 项目3 用表格布局网站 体验活动二：表格的基本操作活动步骤：单元格5中输入“欢迎光临网上书城！”，将单元格2中的图片“top_02.jpg”文件将它的宽设为260，同样的方法设置单元格8中的图片“bot_02.jpg”文件的宽度为260。 项目3 用表格布局网站 体验活动二：表格的基本操作活动步骤：选中文字“欢迎光临网上书城！”，设置居中

7、对齐。选中表格，在属性面板上设置“填充”、“间距”、“边框”均为0。保存页面，按F12键并在浏览器中预览。 项目3 用表格布局网站 活动小结完成体验活动一和体验活动二后，填写下表 项目3 用表格布局网页 “插入”菜单“插入”“表格”“插入”面板“插入”“常用”插入表格的方法和步骤体验活动三：处理表格中的数据活动任务：用表格工具处理数据，对数据进行排序操作。活动指导：学习新的新建页面的方法和打开方法。在实际工作中，利用“文件”面板来完成这样的工作更便于对页面的管理，不容易造成页面保存路径的出错。 项目3 用表格布局网站 体验活动三：处理表格中的数据活动步骤：双击“文件”面板上的“shuping.

8、html”文件，打开该页面。选中表格，从表格中可以看到“排行”列的数字不是按顺序排列的。选择“命令”菜单栏中的“排序表格”命令。 项目3 用表格布局网站 体验活动三：处理表格中的数据活动步骤：在弹出的“对话框中，在“排序按”下拉列表中选择“列”、“顺序”下拉列表中选择“按数字顺序”，在后面的排序方式中选择“升序”项。表格中“排行”列的序号从小到大进行升序排列。 项目3 用表格布局网站 相关知识一、表格的HTML标签以开始以标签结束，它代表的是一个表格标签。 项目3 用表格布局网站 相关知识一、表格的HTML标签width：是表格的宽度，可以使用像素或者百分比为单位。hight：代表表格或是单元格的高度，可以使用像素或者百分比为单位。border：是表格的边框的宽度，使用像素表示。cellspacing：代表单元格的间距。cellpadding：代表单元格与单元格内容之间的间隔距离。tr：代表一行。td：代表一个单元格。 项目3 用表格布局网站 相关知识二、表格制作技巧用文件夹来保存文档；在Dreamweaver中，“设计”视图中显示的表格有时候是正常的，但因为在网