2.4 使用CSS美化留言板
在新建文件时，我们借用了Dreamweaver CS3提供的现成的CSS模板框架，可能你没有发现吧，其实CSS早已帮助你撑起了这个页面的基本布局（不信你看看源代码）。下面的工作就是锦上添花，希望能够在Dreamweaver CS3提供的默认布局基础上简单的修修补补，使这个留言板更酷点（效果如图2-17所示）。当然这个设计效果是作者本人的审美选择，你可能不喜欢，甚至很反感。这些都不重要，重要的是如何学会使用CSS修改眼前留言板显示效果的方法。
图 2-17
在这里，我重点在色彩上进行了大修，基本上以深黑色调来重新粉饰了整个留言板。主要操作要点如下：
复制index.html为index1.html，做个备份这样你还有反悔重做的机会。然后打开index1.html进行如下操作：
在Dreamweaver CS3中选择【窗口】|【CSS样式】菜单命令，打开【CSS样式】面板（如图2-18所示）。这是一个专门编辑和管理CSS的面板，功能非常强大，让人肃然起敬，我们将在第5章中详细讲解这个面板的使用奥秘。
修改颜色。我们的核心工作主要是借助CSS调整各部分的颜色，实际上一个网页的色彩搭配是否恰当至关重要，它决定了一个页面的审美和情趣。
在【CSS样式】面板中（【全部】视图下），选中“<body>”选项，然后在面板底部单击【编辑样式】按钮（
），打开【CSS规则定义】对话框（如图2-18所示）。然后修改网页的背景色为黑色，字体大小为12像素，行高为1.6倍字体大小，设置字体颜色为白色（我们将在第5章中更详细的讲解该对话框的使用）。
图 2-18
下面分别选中左右两侧栏目，设置左栏背景色为#162328（.twoColFixRt # mainContent），右侧背景色为#2E393E（.twoColFixRt # sidebar1）。操作方法与上图类似：先在编辑窗口中选中要修改样式的标签（可以结合标签选择器），然后就可以在【CSS样式】面板中增加、删除和修改样式的规则了。
然后设置标题颜色为#E46232（土红色），留言标题颜色为#FEE58B（dt标签选择符），正文字体为白色。右侧栏目的字体颜色#CECECE（灰白色）。
网页对象的背景色和前景色搭配很有艺术性，具体如何更艺术，还有待于读者自己去把握。下面再来设置表单的样式。你可以在【CSS样式】面板中设置，或者直接在文档内的<style type="text/css">标签内添加如下代码：
input {/* 定义文本框的样式 */
border: 1px solid #999999; /* 定义文本框的边框为浅灰色、1像素宽 */
background-color: #2E393E; /* 定义文本框背景色为深黑色 */
color: #CCCCCC; /* 定义文本框内的字体颜色为浅白色 */
}
textarea {/* 定义文本区域的样式 */
background-color: #2E393E; /* 定义文本区域背景色为深黑色 */
border: 1px solid #999999; /* 定义文本区域的边框为浅灰色、1像素宽 */
color: #CCCCCC; /* 定义文本区域内的字体颜色为浅白色 */
}
如果在【CSS样式】面板中设置，可以直接单击【CSS样式】面板底部的【增加样式】按钮（
），在打开的【CSS规则定义】对话框进行可视化设置，当然如果你简单了解了CSS基本语言，直接在样式表中输入代码会更简便、更快速，因为Dreamweaver
CS3具体强大的代码智能提示功能，你不需要去记忆每个属性及其设置单位。
最后再为左侧栏目中的留言内容所包含的元素dd定义缩进样式，代码如下：
dd {/* 定义“定义列表项”的样式 */
padding: 0px; /* 清除列表项的边缘空白 */
margin-left: 2em; /* 定义左侧缩进2个字距 */
text-indent: 2em; /* 定义首行缩进2个字距 */
}
你还可以为标题增加一条修饰线，具体代码如下（选中这些标题元素，然后在【CSS样式】面板编辑也行）：
.twoColFixRt #container #sidebar1 h3 {/* 定义标题的样式 */
padding-bottom: 6px; /* 给标题底部增加6像素的空白距离 */
border-bottom-width: 1px; /* 给标题增加下划线，并定义线粗为1像素 */
border-bottom-style: dashed; /* 给标题增加下划线，并定义虚线 */
border-bottom-color: #666666; /* 给标题增加下划线，并设置为灰色显示 */
}
.twoColFixRt #container #mainContent h2 {{/* 定义标题的样式，说明同上 */
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E46232;
padding-bottom: 12px;
}
当然，你还可以设计更多细节，使这个留言板显得更酷、更秀。这一切都有待于你自己去创意、去实践。限于篇幅，我也就不再唠唠叨叨了。
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
- 上一篇：3.1 认识动态网站
- 下一篇：2.3 使用Ajax完成数据传输
