"学习CSS网页制作：PS导航按钮素材制作与整合技巧"

作为背景色填充整个图层。接下来，使用椭圆工具创建一个圆形，并在图层样式中添加阴影和内阴影效果，使之呈现出玻璃质感。然后，使用文字工具添加按钮上的文字，并进行相应的调整和样式设置。最后，将按钮复制多个，并进行适当的排列和间距调整，以完成整个导航栏的制作。 接下来，我们将学习如何设置页面的背景。在Dreamweaver中打开HTML文档，首先需要在 ``` <style> body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; } </style> ``` 接着是页面的整体布局。我们可以使用CSS的盒模型来实现页面的布局。首先，在CSS中创建一个类选择器，以设置整个页面的宽度和边距。 ``` .layout { width: 960px; margin: 0 auto; } ``` 然后，在HTML文档中使用这个类选择器。 ``` <div class="layout"> <!-- 页面内容 --> </div> ``` 接下来，我们将添加顶部导航栏。首先，在HTML文档中添加一个带有导航链接的无序列表。 ``` <ul class="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> ``` 然后，在CSS中创建一个类选择器，以设置导航栏的样式。 ``` .navigation { list-style: none; margin: 0; padding: 0; background-color: #333; } .navigation li { display: inline; } .navigation li a { display: inline-block; padding: 10px; color: #fff; text-decoration: none; } .navigation li a:hover { background-color: #555; } ``` 最后，我们需要将CSS和XHTML整合，以实现页面的样式和结构的分离。在HTML文档的头部添加以下代码。 ``` <link rel="stylesheet" href="style.css"> ``` 然后在Dreamweaver中创建一个新的CSS文档，并将以上的CSS代码复制到其中。保存CSS文件，并在HTML文档中引用它。完成这一步骤后，我们就将样式和结构分离了。 综上所述，使用Dreamweaver和CSS来制作网页可以让我们逐步构建一个具有良好视觉效果和交互性的页面。从导航按钮素材的制作开始，我们了解了素材制作中的细节处理对最终作品的重要性。然后，我们学习了如何设置页面的背景，使用CSS的盒模型布局整个页面，并添加了一个顶部导航栏。最后，我们将CSS和XHTML进行整合，实现了样式和结构的分离。这些步骤的学习和应用将帮助我们更好地进行网页制作和设计工作。