Dreamweaver 网页制作教程系列规划
这个系列从零开始，循序渐进，适合初学者，完成整个系列后,您将能够独立制作一个响应式的静态网站。
入门与准备 (2-3个视频)
视频 1: Dreamweaver 简介与环境搭建
- 内容概要:
- 什么是 Dreamweaver？它的核心优势（可视化设计、代码编辑、FTP 功能等）。
- 下载并安装 Dreamweaver（介绍 Creative Cloud 订阅）。
- 第一次启动 Dreamweaver，进行初始设置（如工作区选择）。
- 核心知识点:
- 工作区选择：
应用程序(经典布局) vs.基本(简洁布局)。 - 界面初识：菜单栏、工具栏、文件面板、属性检查器等。
- 工作区选择：
视频 2: 创建第一个项目与站点
- 内容概要:
- 为什么需要“站点管理”？（文件管理、路径解析、链接正确性）。
- 创建一个本地新站点,定义本地文件夹。
- 熟悉“文件”面板，学习如何创建和管理 HTML、CSS、图片等文件。
- 核心知识点:
- 站点设置 (
站点 > 新建站点)。 - 本地根文件夹、测试服务器等概念。
- 在文件面板中创建、重命名、删除文件和文件夹。
- 站点设置 (
基础页面制作 (3-4个视频)
视频 3: HTML 与可视化视图
- 内容概要:
- Dreamweaver 的三种视图：
代码、拆分、实时。 - 使用
实时视图（可视化视图）像 Word 一样输入文本、创建列表。 - 切换到
代码视图，认识基本的 HTML 标签 (<html>,<head>,<body>,<h1>,<p>,<img>)。
- Dreamweaver 的三种视图：
- 核心知识点:
- 实时视图的所见即所得操作。
- Dreamweaver 如何自动生成对应的 HTML 代码。
- 插入图像 (
插入 > 图像) 并设置alt属性（SEO 和无障碍访问）。
视频 4: CSS 样式入门
- 内容概要:
- 什么是 CSS？它的作用（美化网页）。
- 使用 Dreamweaver 的 CSS 设计器面板来添加和应用样式。
- 创建一个外部 CSS 文件，并链接到 HTML 页面。
- 核心知识点:
- 内联样式、内部样式表、外部样式表的区别与使用。
- CSS 设计器面板：创建、管理 CSS 规则。
- 选择器：元素选择器、类选择器、ID 选择器。
- 常用 CSS 属性：
color,font-size,text-align,background-color。
视频 5: 表格与 AP 元素
- 内容概要:
- 使用表格进行页面布局（虽然现代布局多用 Flex/Grid，但表格仍是展示数据的利器）。
- 插入表格，设置行、列、边框、单元格间距。
- 了解 AP 元素（绝对定位的 Div）,及其在布局中的简单应用。
- 核心知识点:
- 表格结构：
table,tr,td。 - 合并单元格 (
rowspan,colspan)。 - AP 元素的定位方式（绝对、相对）。
- 表格结构：
进阶布局与交互 (3-4个视频)
视频 6: 使用 Div 与 CSS 进行现代布局
- 内容概要:
- 从表格布局转向 Div+CSS 布局。
- 使用“插入 Div 标签”功能创建页面容器。
- 学习使用 CSS 的
display,float,clear属性进行简单的浮动布局。
- 核心知识点:
<div>标签作为容器的作用。- 盒子模型：
margin,border,padding,content。 - 浮动布局的实现与清除。
视频 7: 模板与资源重用
- 内容概要:
- 什么是网页模板？为什么使用模板？（提高效率，统一风格）。
- 创建一个包含头部、导航、页脚的模板文件。
- 定义可编辑区域,并基于模板创建新页面。
- 更新模板,查看所有子页面的同步变化。
- 核心知识点:
- 创建模板 (
文件 > 保存为模板)。 - 插入可编辑区域 (
插入 > 模板对象 > 可编辑区域)。 - 使用模板创建页面 (
文件 > 新建 > 从模板新建)。
- 创建模板 (
视频 8: 超链接与导航菜单
- 内容概要:
- 创建文本和图片的超链接。
- 链接到不同页面、网站外部、页面锚点。
- 使用 CSS 美化导航菜单,实现鼠标悬停效果。
- 核心知识点:
- 链接路径：相对路径 vs. 绝对路径。
- 锚点链接的制作。
- CSS 伪类选择器 (
hover,active)。
响应式设计与发布 (2个视频)
视频 9: 响应式网页设计入门
- 内容概要:
- 什么是响应式设计？为什么它很重要？
- 引入 Bootstrap 框架（或使用 Dreamweaver 内置的 Fluid Grid 布局，但 Bootstrap 更主流）。
- 使用 Bootstrap 的网格系统和组件快速构建响应式页面。
- 核心知识点:
- 媒体查询 (
@media) 的基本概念。 - Bootstrap 的栅格系统：
container,row,col-xs-*,col-sm-*,col-md-*。 - 使用 Bootstrap 组件（如导航栏、轮播图）。
- 媒体查询 (
视频 10: 测试与发布网站
- 内容概要:
- 在浏览器中预览和测试网站（检查链接、图片、在不同设备上的显示效果）。
- 设置远程服务器，通过 FTP 将网站上传到互联网。
- 管理已发布的文件。
- 核心知识点:
- 文件同步功能。
- 站点设置中的“服务器”选项。
- FTP 连接信息（主机、目录、用户名、密码）。
- 上传、下载、同步文件。
优质视频教程资源推荐
除了自己按照上述系列学习,您也可以直接观看以下平台上的优秀教程：
国内平台 (中文，适合快速入门)
-
Bilibili (B站):
- 搜索关键词:
Dreamweaver 教程,DW 制作网页,Dreamweaver 响应式。 - 推荐UP主/系列:
- 尚硅谷: 他们的教程通常非常系统、全面，从基础到项目实战,质量很高。
- 黑马程序员: 同样是知名的IT教育机构，视频教程通俗易懂,适合零基础。
- 搜一下“Dreamweaver 2025教程”,通常能找到最新的版本教程。
- 优点: 免费，资源丰富,有大量实战案例。
- 搜索关键词:
-
腾讯课堂 / 网易云课堂:
- 搜索关键词: 同上。
- 特点: 既有免费的基础课，也有系统的付费精品课，付费课程通常有老师答疑和作业批改,学习体验更好。
国际平台 (英文，内容更新快，专业性强)
- YouTube:
- 搜索关键词:
Adobe Dreamweaver Tutorial for Beginners,Dreamweaver CC Responsive Web Design,Dreamweaver Tutorial 2025。 - 推荐频道:
- Traversy Media: Brad 的教程以高效、实用著称,非常受欢迎。
- The Net Ninja: 教学风格清晰，系列化做得很好，有完整的 Dreamweaver 系列教程。
- LinkedIn Learning (原 Lynda.com): 内容非常专业、系统，是学习软件的权威平台,很多图书馆或大学会提供免费订阅。
- 优点: 全球顶尖的讲师，内容紧跟最新版本,通常是免费的。
- 搜索关键词:
学习建议
- 动手实践: 视看教程时，一定要跟着
