DreamweaverCS5网页制作第12章 综合制作.pptVIP

12.2 案例制作：网站“集邮之家” 操作步骤： 2） 删除“apDiv8”、“apDiv10”、“apDiv15”、“apDiv16”、“apDiv14”、“apDiv18”、“apDiv19”、“apDiv20”元素，如图所示。 12.2 案例制作：网站“集邮之家” 操作步骤： 将“apDiv11”中的文字改为“小知识”。将“apDiv12”中文字修改为“发明者也不曾料到经过一个多世纪的演变，小小明信片竟会风靡世界，并以其画面的绚丽多姿、功能的广泛多样、史料的公正客观及独特的迷人艺术魅力而受到世人的种爱。”按F12预览，如图所示。 3）将“apDiv13”中的文字改为“友情链接”。鼠标单击“apDiv14”元素表单内部，在状态栏中单击表单域标记 选中表单，按DEL键删除表单。在元素中插入一个4行2列、宽为100%的表格，输入文字，全部建立空链接。按F12预览，调整图层的位置，如图所示。 12.2 案例制作：网站“集邮之家” 操作步骤： （5）定义CSS样式 1）创建ID样式“#main”。打开“CSS样式”面板，单击“新建CSS规则”按钮 ，打开“新建CSS规则”对话框，“选择器类型”设为“ID”，“选择器名称”文本框中输入“#main”，“规则定义”选择“新建样式表文件”，如图所示。单击“确定”打开保存样式表文件的对话框，输入文件名称“css.css”，保存到other文件夹下，点击“确定”按钮。 12.2 案例制作：网站“集邮之家” 操作步骤： 2）接下来打开“CSS规则定义”窗口。在“分类”中“方框”项设置“宽”为776像素，“高”为730像素，取消“边界”下方的复选框对勾，“右”、“左”分别设为“自动”，如图所示。 12.2 案例制作：网站“集邮之家” 操作步骤： 在“分类”中的“定位”项设置定位“类型”为“相对”，单击“确定”按钮，设置完成。如图所示。 12.2 案例制作：网站“集邮之家” 操作步骤： 3）创建body标签样式。打开“CSS样式”面板，单击“新建CSS规则”按钮 ，打开“新建CSS规则”对话框，“选择器类型”设为“标签”，在“选择器名称”文本框中选择“body”，“规则定义”选择“css.css”，点击“确定”按钮。 4）在“分类”中“类别”项设置字体为宋体，字体大小为12px，颜色#666，行高为150%。在“分类”中“方框”项中边界选择“全部相同”复选框，值设为0像素。 5）创建复合内容样式。打开“CSS样式”面板，单击“新建CSS规则”按钮 ，打开“新建CSS规则”对话框，“选择器类型”设为“复合内容”，“选择器名称”文本框中输入“a:link”，“规则定义”选择“css.css”，点击“确定”按钮。在“分类”中“类别”项设置a:link的字体为宋体，字体大小为12像素，颜色为#0C3，修饰设为无。 12.2 案例制作：网站“集邮之家” 操作步骤： 6）依据相同的操作方法重复步骤5）的操作，分别对a:visited、a:hover、a:active创建复合内容样式如下。 设置a:visited：字体为宋体，宋体大小为12像素，颜色为#0C3，修饰设为无。 设置a:hover：字体为宋体，宋体大小为12像素，颜色为#F00，修饰设为无。 设置a:active：字体为宋体，宋体大小为12像素，颜色为# F00，修饰设为下划线。 12.2 案例制作：网站“集邮之家” 操作步骤： （5）网页布局 父AP Div元素与网页背景 1）在编辑窗口中绘制一个较大AP Div元素做父AP Div元素，切换到代码视图，将以下代码删除。 #apDiv1 { position:absolute; left:93px; top:23px; width:843px; height:200px; z-index:1; } 12.2 案例制作：网站“集邮之家” 操作步骤： 切换到设计视图，此时，AP Div元素以虚线框显示。选中刚刚绘制的AP Div元素，在“属性”面板中在“Div ID”下拉列表中选择“main”，此时文档窗口将发生变化，属性面板显示“CSS-P元素”。设AP Div元素的“背景颜色”设为红色，如图所示。 按F12预览，观察网页中是否有宽为776像素，高为730像素的色块出现，改变浏览器窗口的大小，观察色块是否始终居中。如果始终居中，这表示父AP Div元素设置成功。在“属性”面板中取消AP Div元素的背景颜色。 12.2 案例制作：网站“集邮之家” 操作步骤： （6）网页布局 页眉与导航 1）在父AP Div元素中插入表格，表格为3行1列、宽100%，其余参数均为0。在各个单元格中分别插入图像image/beijing1_01.gif、image/beijing1_02.gif、i