网站制作基础：制作文章详情内容页

视频26

步骤1　在“WebSite”站点中新建网页，将“untitled.html”默认的文件名改为“detail.html”，重复5.2.1节和5.2.2节所有步骤，完成博客名和导航菜单的制作。

步骤2　将光标移动至导航菜单表格后面，单击【插入】菜单中的【表格】，在【表格】对话框中的“行数”、“列数”和“表格宽度”输入框中分别输入“15，1，800”，“边框粗细”、“单元格边距”和“单元格间距”输入框中输入“0，0，0”，单击【确定】按钮，完成表格的插入，然后在表格id中输入main，并设置居中对齐。

步骤3　点击CSS样式面板中的“新建CSS规则”，设置字体大小为12px，背景颜色为#FFF，上外边距为20px，上内边距为20px，如图5-3-11所示。

步骤4　切换到代码视图，在<style></style>标签中添加table{border-radius：10px；}，把所有的表格设置为圆边。

步骤5　将鼠标放在第一行，输入标题“这就是我的创意”，并设置文本格式为h2，点击CSS样式面板中的“新建CSS规则”，设置字体大小为18px，背景颜色为#333，上内边距为20px，如图5-3-12所示。

图5-3-11　CSS样式表属性

图5-3-12　CSS样式表属性

步骤6　重复步骤5，在第二行输入时间，并设置文本格式为h6，然后新建CSS规则，设置字体大小为9px。

步骤7　重复步骤5，在第三行输入文章内容，本设置文本格式为段落，然后新建CSS规则，设置字体大小为12px，行间距2em，首行缩进2ems。

步骤8　将鼠标放在第四行，设置单元格居中对齐，然后把视图切换到代码视图，然后在该单元格代码中输入<video src="video/trjdzw.mp4" controls="controls"></video>，如图5-3-13所示。

图5-3-13　CSS样式表代码

步骤9　将鼠标放在第五行，输入内容，并将文本格式设置为段落，再插入图片。

步骤10　将鼠标放在第六行，右键【表格】——【拆分单元格】，把该单元格拆分为两列，如图5-3-14和图5-3-15所示。

图5-3-14　拆分单元格

图5-3-15　单元格拆分为2列

步骤11　鼠标放在第一个单元格中，设置单元格左对齐，输入内容并设置超链接。

步骤12　鼠标放在第一个单元格中，设置单元格右对齐，输入内容并设置超链接。保存文件，然后通过浏览器预览，效果如图5-3-16所示。

图5-3-16　效果图

步骤13　将鼠标放置在第七行，输入“评论”，设置其文本格式为段落，并设置id为discuss，如图5-3-17所示。

图5-3-17　段落【属性】面板

步骤14　接上例，点击CSS样式面板中的“新建CSS规则”，设置字体大小为20px，字体加粗，字体颜色为#333，背景颜色为#CCC，上内边距为5px，右内边距为5px，下内边距为5px，左内边距为5px，如图5-3-18所示。

步骤15　点击CSS样式面板中的“新建CSS规则”，创建line类的CSS规则，如图5-3-19所示设置其底部宽度为1px，颜色为#CCC的虚线，上内边距为10px，下内边距为10px，上外边距为10px，下外边距为10px，如图5-3-20所示。

图5-3-18　【CSS样式表属性】

图5-3-19　【新建CSS规则】对话框

图5-3-20　【CSS样式表属性】

步骤16　拖动鼠标选中第八行第一个单元格，类选择line，如图5-3-21所示。

图5-3-21　单元格【属性】面板

步骤17　重复步骤16，选中第八行第二个单元格，类选择line，并设置水平方向右对齐，垂直方向底部，如图5-3-22所示。

图5-3-22　单元格【属性】面板

步骤18　将鼠标放置在第二个单元格中，选中【插入】——【表单】——【按钮】，然后把按钮属性中值修改为“回复”，如图5-3-23所示。

图5-3-23　按钮【属性】面板(www.xing528.com)

步骤19　保存文件，然后通过浏览器预览，效果如图5-3-24所示。

图5-3-24　效果图

步骤20　重复步骤16～18，完成第九行到第十三行的内容。

步骤21　拖动鼠标选中第十四行单元格，设置水平方向居中对齐，然后把鼠标放在单元格中，点击【插入】——【表单】——【文本区域】，并设置其属性字符宽度为100，行数为10，如图5-3-25所示。

图5-3-25　文本区域【属性】面板

步骤22　拖动鼠标选中第十五行单元格，设置水平方向居中对齐，然后把鼠标放在单元格中，点击【插入】——【表单】——【按钮】，并设置其属性值为发评论，如图5-3-26所示。

图5-3-26　按钮【属性】面板

步骤23　重复5.2.8节中的所有步骤，完成版权声明制作，最终完成“详细内容”页面制作。

通过本章的学习，希望读者可以按照下面的要求完成“个人博客“首页、简介页面、详细页面的制作：

1.在个人博客的网页中使用“表格”元素来布局整个结构。

2.使用表单控件来丰富页面。

3.使用CSS层叠样式表来对网页中的各个模块进行统一风格。