### Dreamweaver可视化编辑与应用CSS样式
#### 一、Dreamweaver简介及CSS基础知识
- **Dreamweaver概述**：Adobe Dreamweaver是一款专业的网页设计软件，支持可视化的网页编辑，同时也支持手写代码模式，是网页设计师的首选工具之一。
- **CSS简介**：CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML或XML等文件样式的语言。通过CSS，可以精确控制页面中的布局和样式，使网页设计更加灵活多样。
#### 二、Dreamweaver中的CSS应用技巧
- **CSS样式的基础语法**：CSS样式的基本结构包括选择器和声明块两部分。选择器用于指定要设置样式的HTML元素，声明块包含具体的样式属性及其对应的值。例如：
```css
p {
color: blue;
font-size: 16px;
}
```
- **CSS样式的创建方法**：
- **内联式**：将CSS样式直接写在HTML元素中，通过`style`属性来指定样式，适用于单个元素的临时样式调整。
```html
<p style="color: red;">这段文字是红色的。</p>
```
- **内嵌式**：将CSS样式放在HTML文档的`<head>`部分的`<style>`标签内，适用于当前页面的所有元素。
```html
<head>
<style>
p {
color: blue;
}
</style>
</head>
```
- **外联式**：将CSS样式写在一个单独的`.css`文件中，并通过`<link>`标签将其引入HTML文档，这种方式最常见且易于维护。
```html
<head>
<link rel="stylesheet" href="styles.css">
</head>
```
#### 三、CSS选择符详解
- **标签选择符**：直接使用HTML标签作为选择符，例如`p`、`h1`等。
- **类选择符**：使用`.classname`的形式来选择具有特定类名的元素，适用于多个元素共享相同的样式。
- **ID选择符**：使用`#idname`的形式来选择具有特定ID的元素，ID应该是唯一的。
- **伪类选择符**：如`:hover`、`:active`等，用于定义元素的特殊状态。
- `a:link`：未访问的链接。
- `a:visited`：已访问的链接。
- `a:hover`：鼠标悬停在链接上时的状态。
- `a:active`：链接被激活时的状态。
#### 四、CSS样式的调用方法
- **CSS面板的使用**：在Dreamweaver中可以通过CSS面板来管理样式，包括新建样式、修改样式、删除样式等操作。
- **新建样式**：通过点击CSS面板上的"+"按钮，选择相应的选择符类型（如类选择符、ID选择符等），然后设置具体的样式属性。
- **修改样式**：直接在CSS面板中选择要修改的样式，然后调整其属性值即可。
- **删除样式**：选中要删除的样式，点击CSS面板上的"-"按钮即可完成删除操作。
#### 五、应用DIV+CSS布局页面
- **理解DIV的作用**：`<div>`标签是用来定义文档中的一个独立的部分或节的容器标签，常用于布局。
- **布局原理**：通过设置`<div>`标签的CSS属性（如`position`、`float`、`margin`等），实现页面元素的定位和排列。
#### 六、常用HTML标签介绍
- **文本相关标签**：`<p>`（段落）、`<h1>-<h6>`（标题）、`<strong>`（加粗）、`<em>`（强调）、`<b>`（粗体）、`<i>`（斜体）、`<del>`（删除线）。
- **列表相关标签**：`<ul>`（无序列表）、`<ol>`（有序列表）、`<li>`（列表项）。
- **表格相关标签**：`<table>`（表格）、`<tr>`（行）、`<td>`（单元格）、`<th>`（标题单元格）。
- **其他标签**：`<img>`（图像）、`<a>`（超链接）、`<div>`（区块）、`<span>`（文本区域）。
#### 七、案例实践
- **案例背景**：利用CSS样式来做汽车用品主页的设计，重点在于页面布局与特效的制作。
- **实践步骤**：
1. 规划页面布局，确定主要区块的划分。
2. 使用`<div>`标签配合CSS样式实现布局。
3. 添加必要的交互效果，如鼠标悬停时的变色等。
4. 调整细节，优化用户体验。
#### 八、作业布置
- **作业任务**：根据上述知识点，完成一个汽车用品主页的设计，重点练习CSS的选择符和样式设置。
- **预习内容**：进一步了解CSS的高级特性，如响应式设计、动画效果等，为后续学习做准备。
VIP享7折，此内容立减5.97元 
