《电子商务网页设计（第二版）》 课件项目六.pptx

1、content电子商务网页赏析商品图片的使用与编辑15目录HTML网页制作基础2电子商务网页编辑软件Dreamweaver 20203网页元素的编辑4表格与DIV的使用HTML5与响应式网页设计610使用CSS控制页面元素7使用Animate制作网页中的动画8 使用JavaScript制作动态效果9设计与制作电子商务网店结构项目11 表格在网页中的应用十分广泛表格在网页中的应用十分广泛,它是网页中的重要元素。表格在网页中有两种功能它是网页中的重要元素。表格在网页中有两种功能:一种功能是一种功能是在网页中用表格组织数据在网页中用表格组织数据,以清晰的二维列表方式显示网页中的数据以清晰的二维列表方

2、式显示网页中的数据,方便查询和浏览方便查询和浏览;另一种功能另一种功能是用表格布局网页是用表格布局网页,平时在网上浏览时看到的排列整齐的页面平时在网上浏览时看到的排列整齐的页面,很多都是利用表格布局的。本项目主很多都是利用表格布局的。本项目主要介绍表格在网页中的具体应用。要介绍表格在网页中的具体应用。思考思考:想想我们常用常见的个人简历页面表格应该包活什么内容？想想我们常用常见的个人简历页面表格应该包活什么内容？项目介绍content目录 6任务一 使用表格制作个人简历任务二 使用Div+CSS进行页面布局Contents目录任务分析1相关知识2任务实施3任务一任务一 使用表格制作个人简历使用

3、表格制作个人简历任务分析1 本任务使用表格元素制作简单的个人简历页面,包括姓名、性别、民族、出生年月、联系电话、家庭住址、学习经历、获奖情况、特长、爱好及性格特点。该个人简历页面的效果如图61所示。任务分析1图61个人简历效果图表格插入表格设置表格属性表格的选择删除表格0102030405单元格属性06相关知识2Brand单元格的合并07单元格的拆分08 1.表格使用表格不仅可以制作用途广泛的图表,还可以通过表格控制页面的整体布局,创作出精美的网页。同时,表格也是Dreamweaver 2020中常用的网页布局工具。相关知识2.插入表格单击“插入”“Table”,在该对话框中,“行”、“列”和

4、“表格宽度”分别用于设置表格的行数、列数和宽度;“边框精细”用于设置表格边框的宽度;“单元格边距”用于设置单元格边框与单元格内容之间的距离;“单元格间距”用于设置相邻单元格之间的距离;“页眉”用于设置表头的位置;“辅助功能”可以输入表格的标题,以及选择标题的对齐位置。相关知识 2.插入表格单击“插入”“Table”,在该对话框中,“行”、“列”和“表格宽度”分别用于设置表格的行数、列数和宽度;“边框精细”用于设置表格边框的宽度;“单元格边距”用于设置单元格边框与单元格内容之间的距离;“单元格间距”用于设置相邻单元格之间的距离;“页眉”用于设置表头的位置;“辅助功能”可以输入表格的标题,以及选择

5、标题的对齐位置。相关知识 3.设置表格属性选中已插入的表格,在“属性”面板中就会显示该表格的相关属性,如图62所示。“填充”用于设置表格中的单元格内容到边框的距离;“间距”用于设置表格中相邻单元格之间的距离;“对齐”用于设置表格的对齐方式,主要有左对齐、居中对齐和右对齐三种方式,默认为左对齐;“边框”和“边框颜色”分别用于设置表格边框的宽度和颜色。相关知识图62新建表格对话框4.表格的选择选择表格是编辑表格的前提,选定表格后表格的周围会出现一个黑色边框,并且在右边框、下边框和右下角均会出现黑色的方形的控制点。选择表格有以下常用的方法;方法一:将光标定位于表格中某一个单元格中,单击窗口底部标签选

6、择器中与该表格对应的table标签,即可选中该表格。方法二:将光标移至表格边框,当指针变成双向箭头时,点击鼠标左键即可选中该表格。相关知识 5.删除表格选中要删除的表格,按键盘上的Delete键即可。相关知识 6.单元格属性选中表格中的任何一个单元格,即可在属性面板中查看该单元格的属性,如图63所示。其中,“链接”后的文本框用于设置单元格中的内容的链接文件;“水平”对齐方式有“左对齐”、“居中对齐”、“右对齐”三种方式,默认为“左对齐”;“垂直”对齐方式有“顶端”、“居中”、“底部”、“基线”四种方式,默认为“居中”;“宽”和“高”后的文本框分别用于设置单元格的宽度和高度;“边框”用于设置单元

7、格边框颜色。相关知识图63表格属性 7.单元格的合并方法一:选中要合并的若干目标单元格,鼠标右键打开快捷菜单,选择“表格”“合并”。方法二:选中要合并的若干目标单元格,在属性面板左下角选择“合并所选单元格,使用跨度”按钮,即可合并所选单元格。相关知识 8.单元格的拆分方法一:选中要拆分的目标单元格,右键打开快捷菜单,选择“表格”“拆分单元格”对话框,选择“行”或“列”,并在下面文本框中输入具体的行数或列数,点击“确定”即可,如图64所示。方法二:选中要拆分的目标单元格,在属性面板左下角选择“拆分单元格为行或列”按钮,即可拆分所选单元格。相关知识3任务实施新建一个空白文档新建一个空白文档,标题栏

8、内输入标题栏内输入“个人个人简历简历”,”,保存为保存为“index.html”“index.html”。选择选择“插入插入”“Table”“Table”菜单项菜单项,打打开表格对话框开表格对话框,行数设置为行数设置为10,10,列数设列数设置为置为2,2,表格宽度设置为表格宽度设置为75%,75%,边框粗细边框粗细为为4,4,单元格间距为单元格间距为2 2，点击，点击“确定确定”。选中该表格选中该表格,在属性面板里设置对齐为在属性面板里设置对齐为居中对齐居中对齐,边框颜色为默认颜色边框颜色为默认颜色,设置设置完成后完成后,显示效果如图显示效果如图6565所示。所示。12图65 插入表格3任务

9、实施合并第一行的两个单元格合并第一行的两个单元格,在其中输入文在其中输入文本本“个人简历个人简历”,”,各文字之间插入一空格各文字之间插入一空格,并在属性面板中设置文本字体为默认字体并在属性面板中设置文本字体为默认字体,大小为大小为3838像素、加粗像素、加粗,颜色为颜色为#0000CC(#0000CC(蓝蓝色色),),文本居中文本居中,单元格背景颜色设置为单元格背景颜色设置为#FFFF99(#FFFF99(黄色黄色)。34将第二行到第四行的将第二行到第四行的6 6个单元格分别拆个单元格分别拆分为两列分为两列,在第一列和第三列中分别输在第一列和第三列中分别输入入“姓名姓名”、“性别性别”、“民

10、族民族”、“出生年月出生年月”、“联系电话联系电话”、“家家庭住址庭住址”。按住。按住CtrlCtrl键依次选中这键依次选中这6 6个个单元格单元格,设置其居中显示设置其居中显示,背景颜色为背景颜色为#FFFF99(#FFFF99(黄色黄色)。3任务实施在第二列和第四列的在第二列和第四列的6 6个单元格里分别输个单元格里分别输入相应的文本内容入相应的文本内容,并按并按CtrlCtrl键依次选中键依次选中这这6 6个单元格个单元格,设置其左对齐设置其左对齐,宽设置为宽设置为25%25%，效果如图，效果如图6666所示。所示。56在第五行第一列单元格中输入文本在第五行第一列单元格中输入文本“学习经

11、历学习经历”,”,并设置该单元格水平对并设置该单元格水平对齐方式为居中对齐齐方式为居中对齐,垂直对齐方式为默垂直对齐方式为默认方式认方式,背景颜色设置为背景颜色设置为#FFFF99(#FFFF99(黄黄色色););相应的第二列单元格拆分为相应的第二列单元格拆分为4 4行行,分别输入相应内容。分别输入相应内容。图66 输入内容3任务实施在第六行第一个单元格中输入文本在第六行第一个单元格中输入文本“获奖获奖情况情况”,”,并设置该单元格水平对齐方式为并设置该单元格水平对齐方式为居中对齐居中对齐,垂直对齐方式为默认方式垂直对齐方式为默认方式,背景背景颜色为颜色为#FFFF99(#FFFF99(黄色黄

12、色););相应的第二列单相应的第二列单元格拆分为元格拆分为5 5行行,分别输入获奖情况的主要分别输入获奖情况的主要内容内容,如图如图6767所示。所示。7图67 输入内容3任务实施在第七行至第九行的单元格中分别输入文在第七行至第九行的单元格中分别输入文本本“爱好爱好”、“特长特长”、“性格特点性格特点”及及其相应内容。选中第七行至第九行的第一其相应内容。选中第七行至第九行的第一列单元格列单元格,设置居中显示设置居中显示,背景颜色设置为背景颜色设置为#FFFF99(#FFFF99(黄色黄色),),效果如图效果如图6868所示。所示。8图68输入内容3任务实施中第十行中第十行,鼠标右键打开快捷菜单

13、鼠标右键打开快捷菜单“表表格格”“”“删除行删除行”,”,即删除该行。即删除该行。910保存文件保存文件,完成表格制作。完成表格制作。Contents目录任务分析1相关知识2任务实施3任务二任务二 使用使用DIV+CSS进行页面布局进行页面布局图69 效果图 本任务使用本任务使用DIVDIV布局制作布局制作“SWEET LOVE“SWEET LOVE的店铺的店铺”页面页面,在在DIVDIV中插入文本、图像等网页元素中插入文本、图像等网页元素,并使用并使用CSSCSS对网页元素进行修饰对网页元素进行修饰,效果如图效果如图6969所示。所示。1任务分析DIV布局与表格布局DIV相关知识2Table

14、的布局容易上手，可以形成复杂的变化，简单快速，表现上更加“严谨”，在不同的浏览器中都能得到很好的兼容。但是如果你的网站有布局变化的需要时，这样table的布局就会重新设计，再加table分行分列什么的，页面变化的比例会稍大一些，这就会影响你前期做好一些排名和搜索基础了，div就不同了，你可以把大部分更新的东西写在CSS里，页面的布局和改动不会太大，也就对搜索引擎的影响不大了DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。1新建一站点,将需

15、要用到的图像文件复制到本地磁盘下的站点文件夹中,在Dreamweaver 2020中新建一网页文件,文件命名为“index.html”,将文件保存在根目录下,在编辑区的“标题”文本框里将标题命名为“SWEET LOVE的店铺”。2单击“插入”“DIV”菜单项,在弹出的“DIV”对话框里单击“新建CSS规则”。任务实施31新建一站点,将需要用到的图像文件复制到本地磁盘下的站点文件夹中,在Dreamweaver 2020中新建一网页文件,文件命名为“index.html”,将文件保存在根目录下,在编辑区的“标题”文本框里将标题命名为“SWEET LOVE的店铺”。2单击“插入”“DIV”菜单项,在

16、弹出的“DIV”对话框里单击“新建CSS规则”。任务实施33在弹出的新建CSS规则对话框的选择器名称中输入自设字符名banner，如图6-10所示单击确定，在弹出的确定信息中信息确定中选择“是”，进入CSS规则定义对话框。任务实施3图610 新建CSS规则对话框4在CSS规则对话框的分类的区块项下的text align项中设置为center，在 width项中设置值为100，单位是%，如图611所示。单击确定完成CSS规则设置，DIV对话框中单击确定完成DIV插入。任务实施3图611 设置内容5在DIV中，单击“插入”“image”菜单项，选择站点中的图片，将图片插入到DIV中，并删除多余的文

17、字，如图612所示。这里图片在网页中就能居中显示。任务实施3图612 插入图片6网页的空白处，单击“插入”“DIV”菜单项,在弹出的“DIV”对话框里Class中选择上次定义的banner，单击确认完成插入DIV，如图6-13所示。7在新插入的DIV中输入文字，并用快捷键Ctrl+Shift+空格键调整位置。任务实施3图6-13 完成插入8将光标放在网面的空白处（在状态栏中显示为BODY）,在属性栏的CSS页中，单击“居中对齐”图标。单击“插入”“DIV”菜单项，单击新建CSS规则。9 在新建CSS规则中新建选择器名称content，单击确定进入CSS规则对话框，在方框类中设置width为12

18、00，单位为px，如图6-14所示。确定完成CSS规则对话框设置。任务实施3图6-14 设置内容10在窗口中选择拆分窗口，找到.content类的定义项，在里面加个margin:0 auto;这条语句，使DIV能在页面中居中显示，如图6-15所示.11 删除DIV中多余文字，再单击“插入”“DIV”菜单项,在弹出的“DIV”对话框里单击“新建CSS规则”。任务实施3图6-15 代码内容12在弹出的新建CSS规则对话框的选择器名称中输入自设字符名left，进入CSS规则定义对话框，在对话框中设置方框类中width值为600，heitht值为400，单位为px，float项为left，如图6-16

19、所示。单击“确定”完成左边商品展示层的设置。任务实施3图6-17 设置内容13再用同样的方法，在content层中再建一个DIV，选择器名称为right,设置方框类中width值为560，heitht值为400，单位为px，float项为right，如图6-17所示。单击“确定”完成新建DIV设置。任务实施3图6-17 设置内容14左边的层中播入图片，在右边的层中打上商品的介绍，如图6-17所示。完成商品介绍页面制作。任务实施3图6-17 效果图5在DIV中，单击“插入”“image”菜单项，选择站点中的图片，将图片插入到DIV中，并删除多余的文字，如图612所示。这里图片在网页中就能居中显示。任务实施3图612 插入图片 本项目制作了简单的个人简历网页和商品促销图网页,在页面中插入了DIV、文本、图片等网页元素,并对网页元素的属性进行了编辑,使用DIV创建一个简单页面。超链接和表格的使用在后面的项目中会经常出现,是学习设计精美网页的基础。经验交流:同学们将学习过程中的疑难问题记录下来,和大家交流一下吧。项目总结