企业官网建设流程全解析

简介：网页设计与制作课程案例素材包是《网页设计与制作——Dreamweaver CS6标准教程（第二版）》的配套练习文件，面向初学Dreamweaver CS6的网页设计学习者，帮助将教材中的理论讲解转化为可操作的真实案例，既适用于课堂实训，也便于课后自学。压缩包共1190个文件，包括550个jpg图片、331个gif动图、116个png图标，以及大量html结构页、css样式表和js交互脚本，另有swf动画、flv视频、音频等多媒体素材，整体约44.95MB，按教程章节对应存放，便于随学随取。目前已有3038人学习下载，素材覆盖HTML5基础标记、CSS选择器与布局、表单交互、多媒体嵌入、站点发布等关键知识点，其中样式和脚本文件可直接打开修改，图片与动画素材能完整还原案例效果。通过逐步操作这些素材，学习者可反复练习可视化编辑、响应式调整与FTP上传流程，在动手过程中巩固技能，最终独立完成从页面设计到上线发布的完整项目。

1. 打开案例素材包以前，先想清楚你要拿它做什么

很多人拿到“网页设计与制作——Dreamweaver CS6标准教程（第二版）案例素材.zip”这个名字，第一反应是解压、双击HTML、看到一个完整网站。我见过不少人在这一步翻车：图片裂了，样式丢了，然后跑来问这个包是不是坏的。其实这份案例素材不是“成品网页安装包”，它是配合教材使用的练习稿——图给你、文字给你、CSS框架给你，但页面结构要你亲手补完。把它当模板用，方向就错了。真正适合用这份素材的人，是跟着教材章节刷练习的学生、要给静态页面基础课找落地素材的老师，以及想快速回顾传统切图布局的从业者。常见做法是把解压目录直接当作 Dreamweaver CS6 的本地站点根目录来管理，后面所有相对路径才走得通。

2. 为什么要用 CS6 而不是新版本：先看懂这套素材的设计逻辑

2.1 解压前先做一次“矿藏盘点”

我的建议是别急着双击。zip 只是运输容器，它的目录结构是教材的“站点骨架”。你在解压后第一眼看到的东西，往往就决定了后面能不能顺利跑起来。比如根目录下常见章节目录、images 文件夹、style 文件夹，这些命名风格直接对应教材里讲的“站点根目录”概念。理解这一点，建站点时就可以直接把本地根文件夹指到这里，不用重新设计目录结构。

解压这一步有讲究。在 macOS 或 Linux 下我一般用命令行，干净且能看到完整路径：

mkdir -p ~/dw_demo unzip 案例素材.zip -d ~/dw_demo cd ~/dw_demo && ls -l

逻辑说明：unzip 案例素材.zip -d ~/dw_demo中的-d指定了解压目标目录，避免压缩包内容直接散落在“下载”文件夹里，后面建站点时路径会很乱。ls -l用来查看第一层目录结构，确认有没有多套了一层文件夹，这是后面站点指错路径的一个常见隐患。

如果你在 Windows 上，PowerShell 下用这条命令效果一样：

Expand-Archive -Path 案例素材.zip -DestinationPath .\dw_demo

参数说明：-DestinationPath指定解压目标，如果不写，PowerShell 会解压到当前目录并自动命名。我一般会在解压前把压缩包放一个英文路径下，比如D:\demo\，避免后续 Dreamweaver 在中文路径下出现资源面板识别异常。

2.2 CS6 与当前前端工具在“站点”概念上的差异

用 VSCode 打开这个文件夹也能改代码，但案例素材的教育设计是围绕 Dreamweaver CS6 的“站点”概念展开的。所谓站点，在 CS6 里有三层含义：本地根文件夹、默认图像文件夹、服务器信息。本地根文件夹让 DW 识别文件之间的相对路径；默认图像文件夹是执行“插入图片”操作时的基准；服务器信息是后面学习“上传站点”时用的。

如果不用站点而直接用编辑器打开，浏览器依然能解析相对路径，因为浏览器以 HTML 文件所在目录为基准。但这样做你会丢掉 DW 的资源面板、链接检查器、站点范围内的查找替换，而这些恰恰是教材里反复出现的操作。所以建站点不算玄学，而是为了激活 DW 的站点级工具，让素材包里的相对路径体系真正运转起来。

这里需要说明为什么是 CS6 而不是新版 Dreamweaver。这套第二版教材的界面截图、菜单名称、快捷键全部以 CS6 为准。新版界面把“插入”面板改成了图标化窗口，“站点”菜单的位置也变了。用新版照旧版教材做练习，会在“找菜单”上消耗大量时间。忠实还原学习环境，反而比追赶新版本更容易把案例做完。

2.3 把案例素材建成本地站点：一条最快的路径

我做过很多次这个操作，最快的路径是这样：解压完成后，打开 Dreamweaver CS6，菜单栏选“站点 → 新建站点”，弹出对话框后先给站点起名，再指定本地站点文件夹。

站点名称建议用英文，比如case_dw，避免中文目录名在后续的浏览器预览或本地服务器测试中解析出问题。本地站点文件夹，一定要选到解压出来的根目录，不要点进内层。如果你选到了内层的chapter01，后面做“全站点链接检查”时就只能检查其中一个章节，而且其他页面里的../images/xxx.jpg路径会全部断掉。

设置项里有一个“默认图像文件夹”，素材包里如果有 images 目录，就把它指定进去；没有就留空。HTTP 地址在纯本地练习时不用填，填http://localhost也行，但不影响页面预览。

这里要纠正一个常见误解：没有“把 zip 导入 Dreamweaver”这种说法。zip 包必须先解压成普通文件夹，再用新建站点指向它。DW 不认识 zip 容器，只认识真实文件夹。

3. 把案例素材跑起来的四个实操环节

3.1 第一步：用本地站点打开案例页，先做一次链接体检

站点建完后，在 DW 左侧的“文件”面板里双击主页文件打开。注意不要从资源管理器双击，而是从 DW 内部打开，这样才能识别站点根目录并加载相对路径。打开后按 F12 在默认浏览器预览。如果 F12 没反应，检查默认浏览器配置：菜单“编辑 → 首选参数 → 在浏览器中预览”，把默认浏览器指到本机已安装的 Chrome 或 Edge。

页面打开后，先不要急着改代码，做一次“链接体检”。在“文件”面板中右键站点根目录，选择“检查链接”，CS6 会列出所有断开的链接。这一步很值得做，相当于给整个案例素材做一次健康检查，能提前暴露素材包里哪些页面引用了不存在的文件。

检查链接的结果可能显示“孤立文件”，这很正常。案例素材包里有些图片是备用素材，页面尚未引用，不需要处理。你需要关注的是“断掉的链接”那一栏，它直接告诉你哪些路径写错了。

3.2 第二步：把练习稿补成完整页面

教材里很多案例素材是缺结构的练习稿，没有完整的页头、内容、页脚。我一般会先按语义分块，再往区块里填内容。注意，素材包里通常已经提供了一个基础 CSS 文件，里面的类名是现成的规则，你要做的是在 HTML 里正确使用这些类名。不要自己发明一套 class，否则 CSS 全部白写。

下面这段就是我常用的页面骨架：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>案例补全页</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="header"> <h1>站点标题</h1> </div> <div class="nav"> <ul> <li><a href="index.html">首页</a></li> <li><a href="about.html">关于</a></li> </ul> </div> <div class="content"> <p>案例素材的文字内容粘贴到这里。</p> </div> <div class="footer"> <p>版权信息，替换成你的练习信息。</p> </div> </body> </html>

逻辑说明：这段代码先搭出“头部、导航、内容、页脚”四个基本区块，然后把素材里的文字段落粘贴进content，把图片补充进对应位置。<link rel="stylesheet" href="css/style.css">这行的href必须与素材包里的 CSS 文件实际位置一致，多一层目录或少一层都会导致样式加载失败。

操作上，我建议切到“拆分”视图：左边代码、右边设计。选中页面里的某个区块，在右侧 CSS 样式面板就能看到这个区块已经有哪些样式规则，缺什么属性直接改。这个工作流比纯代码效率高，也更容易让新手理解“CSS 作用在谁身上”。

3.3 第三步：图片引用与 CSS 引用的路径规则

路径问题是素材包练习里最让人头疼的部分。先给正确写法：

<!-- HTML 文件在站点根目录，images 也在根目录 --> <img src="images/banner.jpg" alt="主横幅图片"> <!-- HTML 文件在子目录，需要退回上一级 --> <img src="../images/banner.jpg" alt="主横幅图片">

逻辑说明：静态页面里浏览器以当前 HTML 文件所在位置为基准解析路径。页面在根目录时，images/banner.jpg能直接找到；页面在chapter01/子目录时，就必须用../退回根目录再进 images。很多练习稿出错，就是因为这个“上一级”的写法写错了。

alt属性在浏览器里看不见，但教材面试题、考核评分和后面的无障碍检查都会关注到它。补图片时顺手写上说明文字，比后面统一补要省事得多。

CSS 引用同样按这个规则：

<link rel="stylesheet" href="css/style.css">

不要写成C:/dw_demo/css/style.css这种绝对路径。本机打开能用，换一台机器就彻底失效，发布到服务器后也会直接 404。素材包里能看到的全部引用都应该写成相对路径。

3.4 第四步：在拆分视图里对照 CSS 和 HTML，别把设计视图当黑匣子

很多初学者只看“设计视图”，因为它直观。CS6 的设计视图有自动纠错能力，它会帮你渲染出不完整的标签，这造成一个错觉：页面已经正常了。但浏览器没有这种纠错能力，标签闭合错误时页面直接错位。所以我的习惯是：设计视图只用来“看大概”，具体修改永远落在代码和 CSS 上。

拆分视图是最好的学习工具。左边代码、右边设计，改一行 CSS，右边立刻刷新视觉反馈。选中设计视图里的某个元素，右侧 CSS 面板会列出作用于它的所有规则，从哪来、在哪定义、优先级如何，一目了然。这一步做多了，你对“CSS 作用域”的理解会越来越扎实。

最后强调一点：每次改完都按 F12 到真实浏览器里过一遍。设计视图显示正常不代表浏览器正常，浏览器才是最终的裁判。

4. 案例素材的五个常见问题排查与避坑

这一节是我带学生刷这套素材时总结出的高频踩坑点。每个问题都按“现象 → 原因 → 解决”来写，你可以直接对照排查。

4.1 图片全变红叉，页面只剩文字

现象：打开页面后，所有图片位置显示红叉图标，文字能显示，页面结构还完整。

原因：最常见的有三个。一是素材包里图片文件名是英文小写，HTML 里引用却写成了大写；二是引用路径少了一级../；三是解压后你主动改了顶层目录名，导致相对路径失效。

解决：先在“文件”面板里确认图片的真实文件名和位置，再执行“编辑 → 查找和替换”，把错误路径批量替换成正确路径。如果你不确定当前目录结构哪里不对，用命令遍历一下：

find . -type f | sort | head -50

逻辑说明：这条命令会按顺序列出站点的前 50 个文件，你能直接看到图片真实路径与 HTML 里的引用差异。排查路径问题时，用文件列表说话比盯着代码猜要快得多。

4.2 CSS 样式不生效，页面变成纯文本列表

现象：HTML 结构都在，但没有任何布局效果，也看不到背景色、字体大小、边框。

原因：不是素材包坏了，而是很多案例的 CSS 文件本身就是练习稿，教材故意把样式规则留空，让你自己补写。另一个可能是link标签的href路径错误，浏览器实际没加载到 CSS。

解决：先打开 CSS 文件看是否有内容。如果有内容，检查 HTML 里的引用路径；如果 CSS 文件是空的，从零开始写基础样式。确定是路径问题还是规则缺失，最快的方法是浏览器开发者工具里选中某个元素，看“样式”栏右上方是否有css/style.css:12这样的来源标注。没有，就是没加载进来。

4.3 DW 设计视图正常，浏览器里页面全乱

现象：在 DW 里看设计视图结构工整，按 F12 到浏览器里，表格撑破、div 错位、文字溢出。

原因：设计视图能自动纠错，HTML 标签没闭合它也能渲染个大概。浏览器没有这个能力，遇到不闭合的标签会按自己的规则解析，结果就乱了。

解决：以 F12 的浏览器预览为准，不要以设计视图为准。然后做标签闭合检查：在代码视图里选中整个 body 内容，观察缩进结构是否有明显的层级断裂。CS6 的“验证”菜单也能帮你看常见语法错误，但真正有效的还是养成“改一点、预览一次”的习惯。

4.4 文字全是蓝色下划线，怎么都清不掉

现象：页面里的整段文字自带蓝色链接样式，CSS 里没有写过相关规则，删也删不干净。

原因：素材里的文字其实被<a>标签包裹了。CS6 时代教材常见的练习形式是把“版权信息”“案例说明”做成链接对象，有时甚至整段内容都套在链接里，颜色和下划线是浏览器默认的链接样式。

解决：切到代码视图，找到蓝色文字所在的<a>标签，如果确认不需要跳转，把<a>和</a>删掉，只保留中间的文本；如果确实需要保留链接，就在 CSS 里追加一条规则，定义a { text-decoration: none; color: inherit; }，让链接样式跟随周围文本。

4.5 解压后文件比教程里少，以为素材包不完整

现象：教程目录写到“多媒体文件”“psd 源文件”，但解压后找不到对应目录。

原因：一种情况是操作系统默认隐藏了部分文件；另一种情况是这份压缩包本身就是简化版，是教材光盘素材的子集，而不是完整版。

解决：先在系统设置里打开“显示隐藏文件”再检查。如果隐藏文件打开后还是没有，说明压缩包里确实没有，这不是你的操作问题。接下来能做的是：把现有素材按章节归类，缺的图片用占位图补上，先保证页面结构与布局能跑通，不要卡在“找原图”上。

5. 素材包的边界：哪些能做，哪些做不到

5.1 它是练习稿，不是现成的网站模板

这份案例素材能帮你练手，但你不能直接套给客户当官网。原因是它没有后台、没有数据库、也没有任何动态语言支撑，只是纯静态 HTML 和 CSS。你可以改文字、换图片、调整配色，做出一个新页面外观，但表单提交、后台管理、内容发布这些功能全部做不了。

我一般会把案例素材拆成“结构参考”和“视觉规范”两层来用。结构上，看它怎么组织页面区块；视觉上，看配色和排版布局。真正做项目时，从这套素材里提取布局思路，再按需求重新搭建页面。

5.2 HTML 结构有明显的时代感，学到的是思路不是现代最佳实践

素材里表格布局和<font>标签出现得非常频繁，这是教材成书年代决定的。你不需要照着这些老写法做新项目，但需要能看懂它们，因为你未来可能接手的老页面里全是这些东西。

下面这张对照表，是我带学生时常用的：

学习时要把“手法”和“思路”分开。表格布局要学的是“一行里的列怎么排、怎么对齐”，这是布局的基本功；Flex 和 Grid 是今天实现同样目标的新工具。你理解了元素排列的底层逻辑，再看 Flex 的justify-content就不会觉得抽象。

5.3 浏览器兼容性的残余问题：老语法在新浏览器里翻车

CS6 时代的代码要兼容 IE6/IE7，很多写法在今天浏览器里效果完全不同。最典型的是居中问题：老页面喜欢在body上写text-align: center;实现整页居中，这在现代浏览器里会导致所有文字都居中，但页面块级元素不会居中。

正确的现代写法是：

body { margin: 0 auto; max-width: 960px; }

逻辑说明：margin: 0 auto是让块级容器水平居中的标准方式，max-width: 960px给页面一个最大宽度约束，浏览器窗口再宽也不会把内容拉变形。这段样式直接追加在素材 CSS 文件的末尾即可，不需要改动原有代码，方便你对照“旧写法效果”和“新写法效果”的差异。

另一个常见问题是老页面用固定像素字体大小，今天建议用相对单位，em或rem。因为你没法预测访问者用什么设备看页面，固定12px在手机上会小到看不清。把素材里的px改成rem是一个很好的进阶练习。

6. 把案例素材变成自己作品集的一个小习惯

做完这套素材，真正拉开学习者差距的不是“做了多少页”，而是“做完之后怎么处置练习成果”。我建议你把每一章的完成稿都归档成独立站点，路径按“章节号_主题_完成日期”命名，比如chapter03_layout_20250610。这样做的好处是，以后回头找某个布局方案时，不用在几十个散落文件中乱翻。

归档前我习惯再验证一遍三个点。第一，全站链接检查为 0 断链；第二，图片 alt 属性全部有值；第三，浏览器里 Ctrl+F5 强刷后样式不丢。这三点过了，这份练习才算真正完成。

如果你想把练习再往深做一步，可以把同一套素材用两种布局方式各实现一遍：第一次照素材原样用表格布局，第二次用 div + CSS 重写。对比两版代码，你能清晰体会到结构和样式分离带来的维护优势。

我以前吃过亏，做完的案例删得干干净净，后来要给客户演示时死活找不到当时的页面。从那以后，我做练习都用站点复制的方式保存，每个版本一个文件夹，命名带上版本号。这个习惯帮我省了很多次后悔药。

希望帮到你。

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