电子商务网页制作教学课件ppt作者谢嵘03课件.pptVIP

主编：谢嵘 项目导学 我们在浏览电子商务网站时注意到，受欢迎的网站大都颜色艳丽、布局美观。在一个页面上，既要罗列出海量的商品信息，又要使页面看起来整齐漂亮，它们是怎样做到的呢？这样的网站大部分都是由表格来进行布局排版的，只是因为没有显示表格的边框，所以在浏览时根本看不出表格的存在。因此，掌握表格的操作是制作出整齐美观的电子商务网页的必修课。 体验活动一：认识表格及其基本操作 活动任务： 新建一个表格并在表格中插入图片和文字，利用“属性”面板修改表格的参数。 活动指导： 在Dreamweaver CS4中，只要在“表格”对话框中设置行列数、边框、表格位置等参数，就可以插入表格。表格由行和列组成，行和列交叉所形成的矩形区域，即表格中的一个矩形就称为单元格。在表格中可以合并或拆分多个单元格。 体验活动一：认识表格及其基本操作 活动步骤： 启动Dreamweaver CS4软件。单击“站点”菜单上的“管理站点”命令，单击“完成”按钮，打开“我的站点1”。 打开“newbook.html”页面，然后单击“插入”菜单上的“表格”命令 体验活动一：认识表格及其基本操作 活动步骤： 在弹出的“表格”对话框中，设置表格为3行2列，标题选择“左”对齐，单击“确定”按钮。 在“newbook.html”页面中出现了一个表格。 体验活动一：认识表格及其基本操作 活动步骤： 选中第一行的两个单元格，单击“属性”面板上的“合并单元格”按钮。 在合并过的单元格中输入文字“图书分类”。 体验活动一：认识表格及其基本操作 活动步骤： 在“插入”面板上单击“图像”按钮，在弹出的对话框中，打开“image”文件夹中的“1.jpg”文件。 将“2.jpg”插入到左边列下方的单元格中。 体验活动一：认识表格及其基本操作 活动步骤： 在表格的右边列输入如图所示的文字。 选中表格的第二行和第三行，在“属性”面板中设置它的“水平”为“居中对齐”，“垂直”为“居中”。 体验活动一：认识表格及其基本操作 活动步骤： 选中表格的第一行，在“属性”面板中设置“背景颜色”为“#FFFF66”，设置“高”为“50”。 保存网页，单击F12键，在浏览器中预览网页的效果。 体验活动二：表格的基本操作 活动任务： 利用表格制作圆角矩形样式。 活动指导： 表格是矩形的或正方形的，圆角矩形使页面的效果更加美观。表格直接决定了网页是否美观，内容组织是否清晰，其实合理利用表格可以美化页面。 体验活动二：表格的基本操作 活动步骤： 打开“index.html”页面后，单击“插入”面板上的“表格”按钮，插入一个3行3列的表格，表格宽度为300，边框粗细为0像素。 给每个单元格编号以方便下面的操作。 体验活动二：表格的基本操作 活动步骤： 选中单元格１，单击插入工具栏上的“图像”按钮 在弹出的对话框中，如图3-16所示，选择站点image文件夹中的“top_01.jpg”文件。 体验活动二：表格的基本操作 活动步骤： 图像插入单元格1内后，将该单元格的宽和高需按照插入的图像宽和高设置。 体验活动二：表格的基本操作 活动步骤： 图像插入单元格1内后，将该单元格的宽和高需按照插入的图像宽和高设置。 体验活动二：表格的基本操作 活动步骤： 单元格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”文件。 体验活动二：表格的基本操作 活动步骤： 单元格5中输入“欢迎光临网上书城！”，将单元格2中的图片“top_02.jpg”文件将它的宽设为260，同样的方法设置单元格8中的图片“bot_02.jpg”文件的宽度为260。 体验活动二：表格的基本操作 活动步骤： 选中文字“欢迎光临网上书城！”，设置居中对齐。选中表格，在属性面板上设置“填充”、“间距”、“边框”均为0。保存页面，按F12键并在浏览器中预览。 活动小结 完成体验活动一和体验活动二后，填写下表 体验活动三：处理表格中的数据 活动任务： 用表格工具处理数据，对数据进行排序操作。 活动指导： 学习新的新建页面的方法和打开方法。在实际工作中，利用“文件”面板来完成这样的工作更便于对页面的管理，不容易造成页面保存路径的出错。 体验活动三：处理表格中的数据 活动步骤： 双击“文件”面板上的“shuping.html”文件，打开该页面。选中表格，从表格中可以看到“排行”列的数字不是按顺序排列的。 选择“命令”