《电子商务网页设计》 项目八 使用表格布局设置页面
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
8.单元格的拆分
• 方法一:选中要拆分的目标单元格,右键打开快捷菜单,选择 “表格”→“拆分单元格”对话框,选择“行”或“列”,并 在下面文本框中输入具体的行数或列数,点击“确定”即可。
• 方法二:选中要拆分的目标单元格,在属性面板左下角选择 “拆分单元格为行或列”按钮,即可拆分所选单元格。
任务实施
• (7)在第六行第一个单元格中输入文本“获奖情况”,并设置 该单元格水平对齐方式为居中对齐,垂直对齐方式为默认方式, 背景颜色为#FFFF99(黄色);相应的第二列单元格拆分为8行, 分别输入获奖情况的主要内容 。
• (8)在第七行至第九行的单元格中分别输入文本“爱好”、 “特长”、“性格特点”及其相应内容。选中第七行至第九 行的第一列单元格,设置居中显示,背景颜色设置为 #FFFF99(黄色) 。
页面的整体布局,创作出精美的网页。同时,表格也是 Dreamweaver CS5中常用的网页布局工具。 2.插入表格 • 单击“插入”→“表格”,在该对话框中,“行”、“列”和 “表格宽度”分别用于设置表格的行数、列数和宽度;“边框 精细”用于设置表格边框的宽度;“单元格边距”用于设置单 元格边框与单元格内容之间的距离;“单元格间距”用于设置 相邻单元格之间的距离;“页眉”用于设置表头的位置;“辅 助功能”可以输入表格的标题,以及选择标题的对齐位置。 3.设置表格属性 • 选中已插入的表格,在“属性”面板中就会显示该表格的相关 属性。
• (1)新建一个空白文档,标题栏内输入“个人简历”,保存为 “index.html”。
• (2)选择“插入”→“表格”菜单项,打开表格对话框,行数设置为10, 列数设置为2,表格宽度设置为75%,点击“确定”。选中该表格,在 属性面板里设置对齐为居中对齐,边框为4,间距为2,背景颜色为 #FFFFCC(浅黄色),边框颜色为默认颜色 。
任务实施
• (1)新建一站点,将需要用到的图像文件复制到本地磁盘下的站点文 件夹中,在Dreamweaver CS5中新建一网页文件,文件命名为 “index.html”,将文件保存在根目录下,在编辑区的“标题”文本 框里将标题命名为“淘你要”。
• (2)单击“插入”→“表格”菜单项,在弹出的“表格”对话框里设 置1行、1列,宽度为780像素,边框粗细为0像素,单元格间距、边距 为0像素 。
5.删除表格
• 选中要删除的表格,按键盘上的Delete键即可。
6.单元格属性
• 选中表格中的任何一个单元格,即可在属性面板中查看该单元 格的属性 。
7.单元格的合并
• 方法一:选中要合并的若干目标单元格,鼠标右键打开快捷菜 单,选择“表格”→“合并”。
• 方法二:选中要合并的若干目标单元格,在属性面板左下角选 择“合并所选单元格,使用跨度”按钮,即可合并所选单元格。
相关知识
1.表格布局 • 在网页设计中,使用表格进行页面布局,能很好地控制整
个布局页面。将整个页面划分为若干表格,表格中可以 设置单元格,通过设置它们的高度、宽度及相互之间的 比例,再将构成网页的各种网页元素合理地放置在单元 格中,可以达到页面布局显示效果的最佳状态。 2.使用嵌套表格进行页面布局 • 在使用表格布局页面时,对于表现形式多样、内容丰富、 布局相对复杂的网页,可以使用嵌套表格将页面进行划 分布置,使页面内容显得更有层次,也便于页面元素的修 饰。
• (5)在第二列和第四列的6个单元格里分别输入相应的文本内容,并 按Ctrl键依次选中这6个单元格,设置其左对齐 。
• (6)在第五行第一列单元格中输入文本“学习经历”,并设置 该单元格水平对齐方式为居中对齐,垂直对齐方式为默认方式, 背景颜色设置为#FFFF99(黄色);相应的第二列单元格拆分为 4行,分别输入相应内容。
• (3)单击“确定”按钮,会发现在编辑区已经插入了一个1行1列的表 格。选中该表格,在“属性”面板的“对齐”中选择“居中对齐” 。
• (4)将光标定位在表格中,选择“插入”→“图像”命令,选择 images文件夹中的图像“a.jpg”,单击“确定”按钮 。
• (5)预览页面时可以发现,图像与浏览器的边缘有一些空隙,通过以下 步骤去除此空隙:单击CSS面板右下角的“新建CSS规则”按钮,定 义“body”标签样式 。
项目八 使用表格布局设置页面
1 使用表格制作个人简历
任务分析
• 本任务使用表格元素制作简单的个人简历页面,包括姓 名、性别、民族、出生年月、联系电话、家庭住址、学 习经历、获奖情况、特长、爱好及性格特点。该个人简 历页面的效果如图所示。
相关知识
1.表格 • 使用表格不仅可以制作用途广泛的图表,还可以通过表格控制
• (9)选中第十行,鼠标右键打开快捷菜单“菜单”→“删除 行”,即删除该行。
• (10)调整表格中的列宽,达到最优的显示效果 。
项目八 使用表格布局设置页面
2 使用表格进行页面布局
任务分析
• 本任务使用表格布局制作“淘你要”页面,在表格中插 入文本、图像等网页元素,并使用CSS对网页元素进行 修饰,效果如图所示。
• (3)合并第一行的两个单元格,在其中输入文本“个人简历”,各文字 之间插入一空格,并设置文本字体为默认字体,大小为38像素、加粗, 颜色为#0000CC(蓝色),文本居中,单元格背景颜色设置为 #FFFF99(黄色)。
• (4)将第二行到第四行的6个单元格分别拆分为两列,在第一列和第 三列中分别输入“姓名”、“性别”、“民族”、“出生年月”、 “联系电话”、“家庭住址”。按住Ctrl键依次选中这6个单元格, 设置其居中显示,背景颜色为#FFFF99(黄色)。
4.表格的选择
• 选择表格是编辑表格的前提,选定表格后表格的周围会出现一 个黑色边框,并且在右边框、下边框和右下角用的方法;
– 方法一:将光标定位于表格中某一个单元格中,单击窗口底部标签选择 器中与该表格对应的table标签,即可选中该表格。
– 方法二:将光标移至表格边框,当指针变成双向箭头时,点击鼠标左键即 可选中该表格。
• 方法一:选中要拆分的目标单元格,右键打开快捷菜单,选择 “表格”→“拆分单元格”对话框,选择“行”或“列”,并 在下面文本框中输入具体的行数或列数,点击“确定”即可。
• 方法二:选中要拆分的目标单元格,在属性面板左下角选择 “拆分单元格为行或列”按钮,即可拆分所选单元格。
任务实施
• (7)在第六行第一个单元格中输入文本“获奖情况”,并设置 该单元格水平对齐方式为居中对齐,垂直对齐方式为默认方式, 背景颜色为#FFFF99(黄色);相应的第二列单元格拆分为8行, 分别输入获奖情况的主要内容 。
• (8)在第七行至第九行的单元格中分别输入文本“爱好”、 “特长”、“性格特点”及其相应内容。选中第七行至第九 行的第一列单元格,设置居中显示,背景颜色设置为 #FFFF99(黄色) 。
页面的整体布局,创作出精美的网页。同时,表格也是 Dreamweaver CS5中常用的网页布局工具。 2.插入表格 • 单击“插入”→“表格”,在该对话框中,“行”、“列”和 “表格宽度”分别用于设置表格的行数、列数和宽度;“边框 精细”用于设置表格边框的宽度;“单元格边距”用于设置单 元格边框与单元格内容之间的距离;“单元格间距”用于设置 相邻单元格之间的距离;“页眉”用于设置表头的位置;“辅 助功能”可以输入表格的标题,以及选择标题的对齐位置。 3.设置表格属性 • 选中已插入的表格,在“属性”面板中就会显示该表格的相关 属性。
• (1)新建一个空白文档,标题栏内输入“个人简历”,保存为 “index.html”。
• (2)选择“插入”→“表格”菜单项,打开表格对话框,行数设置为10, 列数设置为2,表格宽度设置为75%,点击“确定”。选中该表格,在 属性面板里设置对齐为居中对齐,边框为4,间距为2,背景颜色为 #FFFFCC(浅黄色),边框颜色为默认颜色 。
任务实施
• (1)新建一站点,将需要用到的图像文件复制到本地磁盘下的站点文 件夹中,在Dreamweaver CS5中新建一网页文件,文件命名为 “index.html”,将文件保存在根目录下,在编辑区的“标题”文本 框里将标题命名为“淘你要”。
• (2)单击“插入”→“表格”菜单项,在弹出的“表格”对话框里设 置1行、1列,宽度为780像素,边框粗细为0像素,单元格间距、边距 为0像素 。
5.删除表格
• 选中要删除的表格,按键盘上的Delete键即可。
6.单元格属性
• 选中表格中的任何一个单元格,即可在属性面板中查看该单元 格的属性 。
7.单元格的合并
• 方法一:选中要合并的若干目标单元格,鼠标右键打开快捷菜 单,选择“表格”→“合并”。
• 方法二:选中要合并的若干目标单元格,在属性面板左下角选 择“合并所选单元格,使用跨度”按钮,即可合并所选单元格。
相关知识
1.表格布局 • 在网页设计中,使用表格进行页面布局,能很好地控制整
个布局页面。将整个页面划分为若干表格,表格中可以 设置单元格,通过设置它们的高度、宽度及相互之间的 比例,再将构成网页的各种网页元素合理地放置在单元 格中,可以达到页面布局显示效果的最佳状态。 2.使用嵌套表格进行页面布局 • 在使用表格布局页面时,对于表现形式多样、内容丰富、 布局相对复杂的网页,可以使用嵌套表格将页面进行划 分布置,使页面内容显得更有层次,也便于页面元素的修 饰。
• (5)在第二列和第四列的6个单元格里分别输入相应的文本内容,并 按Ctrl键依次选中这6个单元格,设置其左对齐 。
• (6)在第五行第一列单元格中输入文本“学习经历”,并设置 该单元格水平对齐方式为居中对齐,垂直对齐方式为默认方式, 背景颜色设置为#FFFF99(黄色);相应的第二列单元格拆分为 4行,分别输入相应内容。
• (3)单击“确定”按钮,会发现在编辑区已经插入了一个1行1列的表 格。选中该表格,在“属性”面板的“对齐”中选择“居中对齐” 。
• (4)将光标定位在表格中,选择“插入”→“图像”命令,选择 images文件夹中的图像“a.jpg”,单击“确定”按钮 。
• (5)预览页面时可以发现,图像与浏览器的边缘有一些空隙,通过以下 步骤去除此空隙:单击CSS面板右下角的“新建CSS规则”按钮,定 义“body”标签样式 。
项目八 使用表格布局设置页面
1 使用表格制作个人简历
任务分析
• 本任务使用表格元素制作简单的个人简历页面,包括姓 名、性别、民族、出生年月、联系电话、家庭住址、学 习经历、获奖情况、特长、爱好及性格特点。该个人简 历页面的效果如图所示。
相关知识
1.表格 • 使用表格不仅可以制作用途广泛的图表,还可以通过表格控制
• (9)选中第十行,鼠标右键打开快捷菜单“菜单”→“删除 行”,即删除该行。
• (10)调整表格中的列宽,达到最优的显示效果 。
项目八 使用表格布局设置页面
2 使用表格进行页面布局
任务分析
• 本任务使用表格布局制作“淘你要”页面,在表格中插 入文本、图像等网页元素,并使用CSS对网页元素进行 修饰,效果如图所示。
• (3)合并第一行的两个单元格,在其中输入文本“个人简历”,各文字 之间插入一空格,并设置文本字体为默认字体,大小为38像素、加粗, 颜色为#0000CC(蓝色),文本居中,单元格背景颜色设置为 #FFFF99(黄色)。
• (4)将第二行到第四行的6个单元格分别拆分为两列,在第一列和第 三列中分别输入“姓名”、“性别”、“民族”、“出生年月”、 “联系电话”、“家庭住址”。按住Ctrl键依次选中这6个单元格, 设置其居中显示,背景颜色为#FFFF99(黄色)。
4.表格的选择
• 选择表格是编辑表格的前提,选定表格后表格的周围会出现一 个黑色边框,并且在右边框、下边框和右下角用的方法;
– 方法一:将光标定位于表格中某一个单元格中,单击窗口底部标签选择 器中与该表格对应的table标签,即可选中该表格。
– 方法二:将光标移至表格边框,当指针变成双向箭头时,点击鼠标左键即 可选中该表格。