网站制作基础：制作内容简介模块

步骤1　将光标移动至导航菜单表格的最后面，点击【插入】菜单的【表格】命令。

步骤2　在【表格】对话框中的“行数”“列数”和“表格宽度”输入框中分别输入“1，2，800”，“边框粗细”“单元格边距”和“单元格间距”输入框中输入“0，0，0”，单击【确定】按钮，完成表格的插入，然后设置表格居中对齐，表格id中输入main，如图5-2-17所示。

图5-2-17　表格【属性】面板

步骤3　鼠标选中表格，然后选择CSS样式面板中的“新建CSS规则”，新建id为main的表格的CSS规则，如图5-2-18所示。在弹出的选项卡中，设置上外边距（margin-top）为20px，如图5-2-19所示。

图5-2-18　【新建CSS规则】对话框

图5-2-19　【#main的CSS规则定义】对话框

步骤4　将光标放在左边的单元格中，点击【插入】菜单的【表格】命令，在【表格】对话框中的“行数”“列数”和“表格宽度”输入框中分别输入“10，1，500”，“边框粗细”“单元格边距”和“单元格间距”输入框中输入“0，0，0”，单击【确定】按钮，完成表格的插入，然后设置表格居中对齐，表格id中输入left，如图5-2-20所示。

图5-2-20　表格【属性】面板

步骤5　选中left【表格】，然后选择CSS样式面板中的“新建CSS规则”，新建id为left的表格的CSS规则，如图5-2-21和图5-2-22所示，在弹出的选项卡中，设置背景颜色为#FFF，左、右内边距分别为20px，border-radius：10px；。

图5-2-21　【新建CSS规则】对话框

图5-2-22　【#main tr .left的CSS规则定义】对话框

步骤6　把显示模式切换到“拆分”，然后在代码视图中找到#main tr td #left，在其中添加圆角边框属性“border-radius：10px；”如图5-2-23。

图5-2-23　CSS样式表代码

步骤7　在id为left的表格的每一行填写内容，其中会用到之前章节讲过的插入MP4视频和插入图像，效果如图5-2-24所示。

图5-2-24　效果图

步骤8　拖动鼠标选中标题“这是我的创意”，在其属性面板【格式】中选中“标题2”，然后选择CSS样式面板中的“新建CSS规则”，设置字体颜色为#333，字体大小为18px，上内边距为20px，如图5-2-25和图5-2-26所示。

图5-2-25　【CSS规则定义】对话框

图5-2-26　【CSS规则定义】对话框

步骤9　拖动鼠标选中副标题“May 8，2015 in China”，在其属性面板【格式】中选中“标题6”，然后选择CSS样式面板中的“新建CSS规则”，设置字体大小为9px。

步骤10　拖动鼠标选中内容简介“本门课主要讲解的是电商专题页的设计与制作......”，在其属性面板【格式】中选中“段落”，然后选择CSS样式面板中的“新建CSS规则”，设置字体大小为12px，行间距为1.5em，首行缩进为2ems，如果5-2-27和图5-2-28所示。(www.xing528.com)

图5-2-27　【CSS规则定义】对话框

图5-2-28　【CSS规则定义】对话框

步骤11　在设计视图中选中图像，在其属性面板中将【宽】设置为460px，切换到代码视图，在video标签中设置宽度为460px，<video src="video/trjdzw.mp4" controls= "controls"width="460px">，最后在<style type="text/css"> </style>中添加图像与视频的圆角边框属性img，video{border-radius：20px；}，最终效果如图5-2-29所示。

图5-2-29　效果图