在本上机实训任务中，我们将学习如何使用CSS（层叠样式表）创建布局丰富的网页。CSS是网页设计中至关重要的部分，它负责控制网页的样式、布局和呈现。以下是一些关键的知识点：
1. **创建站点和HTML页面**：
在开始布局之前，我们需要先创建一个站点并建立HTML页面。例如，可以使用Dreamweaver 8.0创建名为`index.html`的文件。在文件中，我们可以通过`<div>`标签定义不同的内容区域。如在例子中，我们创建了一个id为"header"的`<div>`，用于存放头部内容。
2. **CSS基础样式设置**：
使用CSS来设置`<div>`的样式，如颜色、背景色、高度、宽度和溢出处理等。例如，`#header`的样式设置如下：
```css
#header {
color: #FFFFFF;
background-color: #666666;
height: 100px;
width: 700px;
overflow: hidden;
}
```
同时，我们可以对`<div>`内的子元素进行样式调整，如`<h1>`标签的样式：
```css
#header h1 {
font-size: 20px;
margin-left: 20px;
margin-top: 20px;
display: block;
}
```
3. **创建二栏式布局**：
要实现两栏布局，我们可以创建两个`<div>`，分别用id"left"和"right"标识。通过浮动和宽度设置，使它们并排显示：
```css
#layout {
width: 700px;
}
#layout #left {
background-color: #8dad1f;
float: left;
width: 150px;
}
#layout #right {
padding: 10px;
float: left;
width: 530px;
}
```
4. **设计无序列表**：
对于列表，我们可以创建一个`<ul>`标签，并用`<li>`表示列表项。同时，通过CSS清除默认样式并添加边距和边框，使列表更美观：
```css
#layout #left #titlelist {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#layout #left #titlelist li {
color: #FFFFFF;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #a3c431;
}
```
5. **创建导航栏**：
导航栏通常由一个`<ul>`和多个`<li>`组成，每个`<li>`包含一个链接`<a>`。通过浮动和块级显示，我们可以让链接横向排列：
```css
#header #nav li {
float: left;
list-style-type: none;
}
#header #nav a {
display: block;
background-color: #999999;
color: #FFFFFF;
padding: 5px;
margin-left: 3px;
text-decoration: none;
}
#header #nav a:hover {
background-color: #787878;
}
#header #nav #current {
color: #666666;
background-color: #FFFFFF;
}
```
在这个例子中，我们还设置了一个当前选中的链接样式`#current`。
通过这些基本步骤，我们可以创建一个具有清晰布局和导航功能的网页。在实际应用中，还可以根据需求进一步添加响应式设计、浏览器兼容性处理和其他高级CSS技巧，以确保在各种设备和浏览器上都能良好地展示网页。
