企业官网建设流程全解析

简介：这份资源是《网页设计与制作——Dreamweaver CS6标准教程（第二版）》的配套案例素材包，面向网页设计初学者、高校相关课程学生及希望系统练习Dreamweaver CS6的开发者，用于配合教材完成从HTML标记、CSS样式到网页布局、交互元素与多媒体整合的实操训练。压缩包共1190个文件，约44.95MB，以550张jpg、331个gif、116个png等图像素材为主，辅以90个html页面、17个css样式表、18个js脚本及swf、flv、mp3等多媒体文件，覆盖页面结构、样式控制与动态效果等环节，便于按章节逐步搭建真实网页项目。目前已有3038人学习下载，适合边学边练、巩固知识点并提升独立完成网页设计与制作的能力。

1. 从一份 Dreamweaver CS6 案例素材包说起：老工具还能不能打

如果你手里正好有一份「网页设计与制作——Dreamweaver CS6标准教程（第二版）案例素材.zip」，大概率是三种人：一是学校课程要求，老师甩了个压缩包让你照着做；二是自学网页设计，翻到了这本经典教材的配套素材；三是接了个老站维护的活，发现对方还在用 CS6 时代的表格布局和 Spry 菜单。不管哪种，你真正关心的不是「CS6 好不好用」，而是这套素材能不能跑起来、怎么跑、跑完能学到什么。

Dreamweaver CS6 是 Adobe 在 2012 年发布的版本，距今十几年，但它依然是很多院校网页设计课程的标配。原因很现实：它把 HTML、CSS、站点管理、FTP 上传、可视化编辑揉在一个界面里，对零基础的人足够友好。而「案例素材」这四个字才是关键——它意味着你拿到的不只是软件，还有一套按章节组织的练习文件，通常包含 HTML 页面、CSS 样式表、images 图片目录、可能还有 Flash 源文件和模板文件。

这篇文章要解决的问题很具体：拿到这个 zip 之后，怎么在本地把案例跑通，怎么理解每个案例背后的技术点，以及哪些地方是 CS6 时代遗留的坑，放到今天该怎么处理。适合正在上这门课的学生、刚转行想补基础的自学者，以及需要维护老项目的初级前端。如果你期待的是「Dreamweaver 最新版教程」，那这篇不对路；但如果你想用一套现成案例把 HTML+CSS 的底子打牢，下面的内容能直接抄作业。

2. 解压之后先别急着打开：素材包的结构与本地站点搭建

2.1 案例素材包的典型目录长什么样

Dreamweaver 教材配套的案例素材，目录结构通常遵循一个固定套路。解压后你会看到类似这样的层级：

案例素材/ ├── chapter01/ │ ├── index.html │ ├── css/ │ │ └── style.css │ ├── images/ │ │ ├── banner.jpg │ │ └── logo.png │ └── js/ │ └── menu.js ├── chapter02/ │ ├── ... ├── templates/ │ └── main.dwt └── readme.txt

每个 chapter 对应教材的一章，里面是该章完成后的成品页面。有些素材包还会额外提供「原始文件」和「最终效果」两个子目录，方便你对照。templates 目录里放的是 .dwt 模板文件，这是 Dreamweaver 特有的模板格式，用于批量生成风格一致的页面。

注意：解压时不要直接解压到桌面或中文路径下。Dreamweaver CS6 对中文路径的支持不稳定，站点根目录如果包含中文字符，预览时经常出现图片裂图或 CSS 不加载的情况。建议解压到D:\web_cases\或~/Documents/web_cases/这类纯英文路径。

2.2 在 CS6 里建立本地站点：一步都不能省

Dreamweaver 的核心工作模式是「站点」。你不建站点，直接双击打开 HTML 文件也能编辑，但链接检查、模板继承、FTP 同步这些功能全部用不了。正确做法是：

第一步，打开 Dreamweaver CS6，菜单栏选择「站点 → 新建站点」。

第二步，在弹出的对话框中，「站点名称」随便填，比如my_cases；「本地站点文件夹」选择你解压出来的案例素材根目录。

第三步，点「高级设置」，在「本地信息」里确认「默认图像文件夹」指向images/目录。这一步很多人跳过，结果是插入图片时 CS6 不知道该把图片复制到哪里。

第四步，如果你需要上传到服务器，在「远程信息」里配置 FTP。但做案例练习阶段，这一步可以先跳过。

建好站点后，右侧「文件」面板会显示整个素材包的树形结构。这时候你再双击 chapter01/index.html，CS6 会以「设计」视图打开，你能直接看到页面渲染效果。

2.3 用浏览器预览：F12 和实时视图的区别

CS6 提供了两种预览方式。「实时」视图（Live View）是在 CS6 内部模拟浏览器渲染，快捷键 Alt+F11。「在浏览器中预览」是调用外部浏览器，快捷键 F12。

我一般建议做案例时用 F12，因为实时视图的渲染引擎和真实浏览器有差异，尤其是 CSS3 的圆角、阴影、过渡效果，实时视图经常显示不出来。F12 调用的浏览器可以在「编辑 → 首选参数 → 在浏览器中预览」里设置，把 Chrome 或 Firefox 设为默认。

如果你发现 F12 预览时样式全丢，先检查三件事：CSS 文件路径是不是相对路径、站点根目录有没有设对、文件名大小写是否一致。Windows 下文件名不区分大小写，但上传到 Linux 服务器后就区分了，这是老案例最常见的翻车点。

3. 把案例跑通：从 HTML 骨架到 CSS 布局的完整操作链

3.1 用 chapter01 案例理解 HTML 文档结构

打开 chapter01/index.html，切到「代码」视图，你会看到类似这样的结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>第一章案例</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <img src="images/banner.jpg" alt="banner" width="960" height="120" /> </div> <div id="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程介绍</a></li> <li><a href="#">联系我们</a></li> </ul> </div> <div id="content"> <h1>欢迎学习网页设计</h1> <p>这是第一章的案例内容。</p> </div> <div id="footer"> <p>版权所有 &copy; 2024</p> </div> </div> </body> </html>

这段代码是典型的 XHTML 1.0 Transitional 文档类型，CS6 默认生成的就是这个。注意<meta>标签的 charset 是 utf-8，但文件本身的编码可能是 GBK，这会导致中文乱码。检查方法：在 CS6 里「修改 → 页面属性 → 标题/编码」，确认「编码」选的是 UTF-8，并且勾选「包括 Unicode 签名（BOM）」。

页面结构用的是div + id的经典布局，#wrapper作为最外层容器，里面依次是 header、nav、content、footer。这种结构在 HTML5 里可以用<header>、<nav>、<main>、<footer>语义化标签替代，但老案例为了兼容 IE6/7，普遍用 div。

3.2 CSS 文件怎么改：从 style.css 入手调布局

打开 css/style.css，你会看到类似这样的规则：

/* 全局重置 */ * { margin: 0; padding: 0; } body { font-family: "微软雅黑", Arial, sans-serif; font-size: 14px; color: #333; background-color: #f0f0f0; } #wrapper { width: 960px; margin: 0 auto; background-color: #fff; } #header { height: 120px; overflow: hidden; } #nav ul { list-style: none; background-color: #2c3e50; height: 40px; } #nav li { float: left; } #nav li a { display: block; padding: 0 20px; line-height: 40px; color: #fff; text-decoration: none; } #nav li a:hover { background-color: #1abc9c; } #content { padding: 20px; min-height: 400px; } #footer { background-color: #2c3e50; color: #fff; text-align: center; padding: 10px 0; }

这段 CSS 的核心逻辑是：#wrapper固定宽度 960px 并水平居中，#nav li用float: left实现横向菜单，#nav li a用display: block让链接填满整个 li 区域，这样鼠标悬停时背景色变化才覆盖整个菜单项。

参数怎么改：#wrapper的 width 可以改成 1200px 或 100%，改成百分比后要注意内部元素的宽度也要跟着调整。#nav li a的 padding 控制菜单项间距，line-height 控制垂直居中，这两个值要匹配，否则文字会偏上或偏下。

提示：修改 CSS 后如果浏览器没变化，先强制刷新（Ctrl+F5），再检查是不是改错了文件——有些案例包里有多个 style.css，分别放在不同 chapter 目录下。

3.3 用模板批量生成页面：.dwt 文件的正确用法

templates/main.dwt 是 Dreamweaver 模板文件。它的作用是定义一套固定的页面骨架，其中包含「可编辑区域」和「不可编辑区域」。基于模板新建的页面，只有可编辑区域能改，其余部分自动继承模板。

操作步骤：在 CS6 中打开 main.dwt，你会看到页面中某些区域有高亮边框，标注着「可编辑区域」。菜单栏「插入 → 模板对象 → 可编辑区域」，可以新建一个。保存模板后，「文件 → 新建 → 模板中的页」，选择 main.dwt，就能生成一个新页面。

模板的典型用途是：头部导航和底部版权固定不变，中间内容区域可编辑。这样改一次模板，所有基于该模板的页面同步更新。但要注意，模板生成的页面在保存时会提示「是否更新链接」，选「是」才能保持资源路径正确。

如果你不用 Dreamweaver 了，.dwt 文件在别的编辑器里打不开，需要手动把模板内容复制到每个 HTML 文件里。这也是老项目迁移时的一个痛点。

4. 避坑与排查：Dreamweaver CS6 案例练习中最容易翻车的 5 个地方

4.1 中文乱码：现象是页面显示「锟斤拷」

现象：浏览器打开案例页面，中文全部变成乱码，或者显示为「锟斤拷」这样的字符。

原因：HTML 文件的实际编码和<meta charset>声明不一致。CS6 默认新建文件可能是 GBK 编码，但教材案例的 meta 写的是 utf-8，或者反过来。

解决：在 CS6 里打开文件，「修改 → 页面属性 → 标题/编码」，把编码改成 UTF-8，然后「文件 → 另存为」，在保存对话框底部确认编码也是 UTF-8。如果文件已经乱码，用记事本打开，另存为时选择 UTF-8 编码，再重新在 CS6 里打开。

4.2 图片不显示：路径大小写和空格问题

现象：设计视图里图片正常，F12 预览时图片全部裂开。

原因：图片文件名包含大写字母或空格，而 HTML 里引用的是小写或无空格版本。Windows 本地预览不区分大小写，但有些浏览器和服务器区分。

解决：把所有图片文件名改成纯小写、用下划线代替空格，然后在 CS6 里用「站点 → 检查站点范围的链接」批量修复。这个功能会列出所有断链，并允许你手动指定正确路径。

4.3 CSS 不生效：缓存和优先级双重坑

现象：改了 style.css，浏览器里完全没反应。

原因：一是浏览器缓存了旧版 CSS；二是 CSS 选择器优先级不够，被其他规则覆盖了。

解决：先 Ctrl+F5 强制刷新。如果还不行，在 CS6 里用「代码」视图检查是否有内联样式或!important覆盖了你的规则。另外注意，#nav li a的优先级高于.nav-link，如果你用类选择器去覆盖 id 选择器下的样式，需要提高优先级或加!important。

4.4 模板更新后页面错位：可编辑区域被误删

现象：基于模板的页面，更新模板后部分内容消失或布局错乱。

原因：在编辑模板时，不小心删除了某个可编辑区域的标记，导致基于该模板的页面找不到对应区域。

解决：打开模板文件，确认每个可编辑区域的名称没有被改动。如果已经误删，只能手动把内容复制回每个页面。预防方法是：改模板前先备份整个站点文件夹。

4.5 实时视图和 F12 效果不一致：渲染引擎差异

现象：CS6 实时视图里 CSS3 圆角和阴影正常，F12 在 Chrome 里反而不正常，或者反过来。

原因：CS6 实时视图用的是内置的 WebKit 版本，和当前 Chrome 的渲染引擎版本差距很大。老案例里的 CSS3 属性可能没有加浏览器前缀。

解决：以 F12 在 Chrome 或 Firefox 里的效果为准。如果 CSS3 属性不生效，手动加上-webkit-、-moz-前缀。但更根本的做法是：把老案例当作 HTML+CSS 基础练习，不要依赖 CS6 的实时视图做最终判断。

5. 把老案例用出新价值：迁移到现代编辑器与响应式改造

5.1 从 CS6 迁移到 VS Code 的最小操作

Dreamweaver CS6 在 Windows 10/11 上偶尔会闪退，而且不支持现代前端工具链。我的习惯是：用 CS6 打开案例看结构，用 VS Code 写代码。迁移步骤很简单：

# 1. 把案例素材复制一份，避免污染原文件 cp -r 案例素材/ ~/projects/web_cases/ # 2. 用 VS Code 打开项目目录 code ~/projects/web_cases/ # 3. 安装 Live Server 插件，右键 HTML 文件选择 "Open with Live Server"

VS Code 里打开老案例后，第一件事是安装「HTML CSS Support」和「Prettier」两个插件。前者提供 CSS 类名补全，后者格式化代码。老案例的缩进经常是 Tab 和空格混用，Prettier 一键统一。

5.2 把固定宽度布局改成响应式：三个关键断点

老案例的#wrapper是固定 960px，在手机上会横向滚动。改成响应式只需要加一段媒体查询：

/* 默认样式保持不变，在 style.css 末尾追加 */ /* 平板：768px 以下 */ @media screen and (max-width: 768px) { #wrapper { width: 100%; padding: 0 10px; box-sizing: border-box; } #nav li { float: none; display: block; text-align: center; } } /* 手机：480px 以下 */ @media screen and (max-width: 480px) { #header img { width: 100%; height: auto; } #content { padding: 10px; } body { font-size: 13px; } }

这段代码的逻辑是：在 768px 以下，容器宽度变成 100%，导航从横向浮动变成纵向堆叠；在 480px 以下，banner 图片自适应宽度，内容区内边距缩小，字号微调。box-sizing: border-box确保 padding 不会撑破容器。

参数怎么调：断点值 768 和 480 是常见选择，但要根据实际内容调整。如果你在 600px 时发现导航已经挤不下，就把断点改成 600px。测试方法是在 Chrome 开发者工具里按 Ctrl+Shift+M 切换设备模拟，拖动宽度看布局在哪一刻崩掉。

5.3 用老案例练手的正确姿势：改而不是抄

这套案例素材最大的价值不是让你照着敲一遍，而是给你一个「可运行的参照物」。我的建议是：每看完一章案例，把最终效果关掉，自己从空白 HTML 开始写，遇到卡住的地方再回去看案例怎么实现的。具体可以按这个节奏：

第一遍，照着案例敲，确保能跑通，理解每个标签和属性的作用。第二遍，把案例的 CSS 删掉一半，自己补全，训练对盒模型和浮动的直觉。第三遍，把布局从 float 改成 flex 或 grid，对比两种方案的差异。第四遍，把固定宽度改成响应式，加上媒体查询。

提示：不要花时间纠结 CS6 的「设计」视图拖拽功能。那个功能生成的代码冗余严重，而且和现代标准脱节。直接切到「代码」视图手写，效率更高，学到的东西也更扎实。

5.4 一个具体技巧：用浏览器开发者工具反查 CS6 案例的样式来源

老案例的 CSS 文件可能有很多层覆盖，你改了一个值却不生效，这时候别猜，用开发者工具查。在 Chrome 里 F12 打开开发者工具，点击左上角的箭头图标，然后点页面上你想查的元素。右侧「Styles」面板会列出所有作用于该元素的 CSS 规则，从上到下优先级递减，被划掉的就是被覆盖的。

这个技巧能帮你快速定位「为什么我改的样式没生效」。比如你改了#nav li a的 color，但页面上没变，开发者工具里会显示你的规则被另一条更具体的选择器覆盖了。这时候你要么提高选择器优先级，要么去改那条覆盖你的规则。

我刚开始用 CS6 做案例时，最常犯的错就是改错文件——案例包里有三四个 style.css，分别在不同 chapter 目录下，我改了 chapter02 的，预览的却是 chapter01 的页面。后来养成习惯：在 CS6 的「文件」面板里右键当前页面，选「在站点中定位」，确认文件路径后再动手改。这个习惯帮我省了大量排查时间。希望帮到你。

本文还有配套的精品资源，点击获取