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

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

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

3、作 活动步骤：3.在弹出的“表格”对话框中，设置表格为3行2列，标题选择“左”对齐，单击“确定”按钮。4.在“newbook.html”页面中出现了一个表格。项目项目3 3 用表格布局网站用表格布局网站 体验活动一：体验活动一：认识表格及其基本操作认识表格及其基本操作 活动步骤：5.选中第一行的两个单元格，单击“属性”面板上的“合并单元格”按钮。6.在合并过的单元格中输入文字“图书分类”。项目项目3 3 用表格布局网站用表格布局网站 体验活动一：体验活动一：认识表格及其基本操作认识表格及其基本操作 活动步骤：7.在“插入”面板上单击“图像”按钮，在弹出的对话框中，打开“image”文件夹中的“

4、1.jpg”文件。8.将“2.jpg”插入到左边列下方的单元格中。项目项目3 3 用表格布局网站用表格布局网站 体验活动一：体验活动一：认识表格及其基本操作认识表格及其基本操作 活动步骤：9.在表格的右边列输入如图所示的文字。10.选中表格的第二行和第三行，在“属性”面板中设置它的“水平”为“居中对齐”，“垂直”为“居中”。项目项目3 3 用表格布局网站用表格布局网站 体验活动一：体验活动一：认识表格及其基本操作认识表格及其基本操作 活动步骤：11.选中表格的第一行，在“属性”面板中设置“背景颜色”为“#FFFF66”，设置“高”为“50”。12.保存网页，单击F12键，在浏览器中预览网页的效

5、果。项目项目3 3 用表格布局网站用表格布局网站 体验活动二：体验活动二：表格的基本操作表格的基本操作活动任务：利用表格制作圆角矩形样式。活动指导：表格是矩形的或正方形的，圆角矩形使页面的效果更加美观。表格直接决定了网页是否美观，内容组织是否清晰，其实合理利用表格可以美化页面。项目项目3 3 用表格布局网站用表格布局网站 体验活动二：体验活动二：表格的基本操作表格的基本操作活动步骤：1.打开“index.html”页面后，单击“插入”面板上的“表格”按钮，插入一个3行3列的表格，表格宽度为300，边框粗细为0像素。2.给每个单元格编号以方便下面的操作。项目项目3 3 用表格布局网站用表格布局网

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

7、用表格布局网站 体验活动二：体验活动二：表格的基本操作表格的基本操作活动步骤：7.单元格2中插入“top_02.jpg”文件；单元格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 3 用表格布局网站用表格布局网站 体验活动二：体验活动二：表格的基本操作表格的基本操作活动步骤：8.单元格5中输入“欢迎光临网上书城！”，将单元格2中的图片“top_02.jpg”文件将它的宽设为2

8、60，同样的方法设置单元格8中的图片“bot_02.jpg”文件的宽度为260。项目项目3 3 用表格布局网站用表格布局网站 体验活动二：体验活动二：表格的基本操作表格的基本操作活动步骤：9.选中文字“欢迎光临网上书城！”，设置居中对齐。选中表格，在属性面板上设置“填充”、“间距”、“边框”均为0。保存页面，按F12键并在浏览器中预览。项目项目3 3 用表格布局网站用表格布局网站 活动小结活动小结完成体验活动一和体验活动二后，填写下表 项目项目3 3 用表格布局网页用表格布局网页 “插入”菜单“插入”“表格”“插入”面板“插入”“常用”插入表格的方法和步骤体验活动三：体验活动三：处理表格中的数

9、据处理表格中的数据活动任务：用表格工具处理数据，对数据进行排序操作。活动指导：学习新的新建页面的方法和打开方法。在实际工作中，利用“文件”面板来完成这样的工作更便于对页面的管理，不容易造成页面保存路径的出错。项目项目3 3 用表格布局网站用表格布局网站 体验活动三：体验活动三：处理表格中的数据处理表格中的数据活动步骤：1.双击“文件”面板上的“shuping.html”文件，打开该页面。选中表格，从表格中可以看到“排行”列的数字不是按顺序排列的。2.选择“命令”菜单栏中的“排序表格”命令。项目项目3 3 用表格布局网站用表格布局网站 体验活动三：体验活动三：处理表格中的数据处理表格中的数据活动

10、步骤：3.在弹出的“对话框中，在“排序按”下拉列表中选择“列”、“顺序”下拉列表中选择“按数字顺序”，在后面的排序方式中选择“升序”项。4.表格中“排行”列的序号从小到大进行升序排列。项目项目3 3 用表格布局网站用表格布局网站 相关知识相关知识以开始以标签结束，它代表的是一个表格标签。项目项目3 3 用表格布局网站用表格布局网站 相关知识相关知识width：是表格的宽度，可以使用像素或者百分比为单位。hight：代表表格或是单元格的高度，可以使用像素或者百分比为单位。border：是表格的边框的宽度，使用像素表示。cellspacing：代表单元格的间距。cellpadding：代表单元格与单元格内容之间的间隔距离。tr：代表一行。td：代表一个单元格。项目项目3 3 用表格布局网站用表格布局网站 相关知识相关知识1.用文件夹来保存文档；在Dreamweaver中，“设计”视图中显示的表格有时候是正常的，但因为在网页代码增加了高和宽的代码，当在预览的时候浏览器就会按这些代码来显示，于是就会出现表格样子发生变化。所以，在使用表格排版的时候，同一行或同一列的单元格中，宽度和高度的数值要么不进行设置，要么就设置为统一的数值，不然在预览的时候就会出现表格错误的显示。项目项目3 3 用表格布局网站用表格布局网站