资源描述：
content电子商务网页赏析商品图片的使用与编辑15目录HTML网页制作基础2电子商务网页编辑软件Dreamweaver20203网页元素的编辑4表格与DIV的使用HTML5与响应式网页设计610使用CSS控制页面元素7使用Animate制作网页中的动画8使用JavaScript制作动态效果9设计与制作电子商务网店结构项目11
1表格在网页中的应用十分广泛,它是网页中的重要元素。表格在网页中有两种功能:一种功能是在网页中用表格组织数据,以清晰的二维列表方式显示网页中的数据,方便查询和浏览;另一种功能是用表格布局网页,平时在网上浏览时看到的排列整齐的页面,很多都是利用表格布局|的。本项目主要介绍表格在网页中的具体应用。思考:想想我们常用常见的个人简历页面表格应该包活什么内容？项目介绍
2content目录6表格与DIV的使用任务一使用表格制作个人简历任务二使用Div+CSS进行页面布局
3Contents目录任务分析1相关知识2任务实施3任务一使用表格制作个人简历
4任务分析1本任务使用表格元素制作简单的个人简历页面,包括姓名、性别、民族、出生年月、联系电话、家庭住址、学习经历、获奖情况、特长、爱好及性格特点。该个人简历页面的效果如图6—1所示。
5任务分析1图6—1 个人简历效果图
6表格插入表格设置表格属性表格的选择删除表格0102030405|单元格属性06相关知识2Brand单元格的合并07单元格的拆分08
71.表格使用表格不仅可以制作用途广泛的图表,还可以通过表格控制页面的整体布局,创作出精美的网页。同时,表格也是Dreamweaver2020中常用的网页布局工具。相关知识
82.插入表格单击“插入”→“Table”,在该对话框中,“行”、“列”和“表格宽度”分别用于设置表格的行数、列数和宽度;“边框精细”用于设置表格边框的宽度;“单元格边距”用于设置单元格边框与单元格内容之间的距离;“单元格间距”用于设置相邻单元格之间的距离;“页眉”用于设置表头的位置;“辅助功能”可以输入表格的标题,以及选择标题的对齐位置|。相关知识
92.插入表格单击“插入”→“Table”,在该对话框中,“行”、“列”和“表格宽度”分别用于设置表格的行数、列数和宽度;“边框精细”用于设置表格边框的宽度;“单元格边距”用于设置单元格边框与单元格内容之间的距离;“单元格间距”用于设置相邻单元格之间的距离;“页眉”用于设置表头的位置;“辅助功能”可以输入表格的标题,以及选择标题的对齐位置。相关知识
103.设置表格属性选中已插入的表格,在“属性”面板中就会显示该表格的相关属性,如图6—2所示。“填充”用于设置表格中的单元格内容到边框的距离;“间距”用于设置表格中相邻单元格之间的距离;“对齐”用于设置表格的对齐方式,|主要有左对齐、居中对齐和右对齐三种方式,默认为左对齐;“边框”和“边框颜色”分别用于设置表格边框的宽度和颜色。相关知识图6—2 新建表格对话框
114.表格的选择选择表格是编辑表格的前提,选定表格后表格的周围会出现一个黑色边框,并且在右边框、下边框和右下角均会出现黑色的方形的控制点。选择表格有以下常用的方法;方法一:将光标定位于表格中某一个单元格中,单击窗口底部标签选择器中与该表格对应的table标签,即可选中该表格。方法二:将光标移至表格边框,当指针变成双向箭头时,点击鼠标左键即可选中该表格。相关知识
125.删除表格选中要删除的表格,按键盘上的Delete键即可。相关知识
13|6.单元格属性选中表格中的任何一个单元格,即可在属性面板中查看该单元格的属性,如图6—3所示。其中,“链接”后的文本框用于设置单元格中的内容的链接文件;“水平”对齐方式有“左对齐”、“居中对齐”、“右对齐”三种方式,默认为“左对齐”;“垂直”对齐方式有“顶端”、“居中”、“底部”、“基线”四种方式,默认为“居中”;“宽”和“高”后的文本框分别用于设置单元格的宽度和高度;“边框”用于设置单元格边框颜色。相关知识图6—3表格属性
147.单元格的合并方法一:选中要合并的若干目标单元格,鼠标右键打开快捷菜单,选择“表格”→“合并”。方法二:选中要合并的若干目标单元格,在属性面板左下角|选择“合并所选单元格,使用跨度”按钮,即可合并所选单元格。相关知识
158.单元格的拆分方法一:选中要拆分的目标单元格,右键打开快捷菜单,选择“表格”→“拆分单元格”对话框,选择“行”或“列”,并在下面文本框中输入具体的行数或列数,点击“确定”即可,如图6—4所示。方法二:选中要拆分的目标单元格,在属性面板左下角选择“拆分单元格为行或列”按钮,即可拆分所选单元格。相关知识
163任务实施新建一个空白文档,标题栏内输入“个人简历”,保存为“index.html”。选择“插入”→“Table”菜单项,打开表格对话框,行数设置为10,列数设置为2,表格宽度设置为75%,边框粗细为4,单|元格间距为2，点击“确定”。选中该表格,在属性面板里设置对齐为居中对齐,边框颜色为默认颜色,设置完成后,显示效果如图6—5所示。12图6—5插入表格
173任务实施合并第一行的两个单元格,在其中输入文本“个人简历”,各文字之间插入一空格,并在属性面板中设置文本字体为默认字体,大小为38像素、加粗,颜色为#0000CC(蓝色),文本居中,单元格背景颜色设置为#FFFF99(黄色)。34将第二行到第四行的6个单元格分别拆分为两列,在第一列和第三列中分别输入“姓名”、“性别”、“民族”、“出生年月”、“联系电话”、“家庭住址”。按住Ctrl键依次选中这6个单元格,设置其居中显示,背景|颜色为#FFFF99(黄色)。
183任务实施在第二列和第四列的6个单元格里分别输入相应的文本内容,并按Ctrl键依次选中这6个单元格,设置其左对齐,宽设置为25%，效果如图6—6所示。56在第五行第一列单元格中输入文本“学习经历”,并设置该单元格水平对齐方式为居中对齐,垂直对齐方式为默认方式,背景颜色设置为#FFFF99(黄色);相应的第二列
