企业官网建设流程全解析

简介：《网页设计与制作——Dreamweaver CS6标准教程（第二版）》配套案例素材包，面向网页设计初学者、职业院校学生及自学Dreamweaver CS6的读者，是配合教材进行实操练习的核心资料。压缩包共1190个文件，以jpg、gif、png等图像素材为主，同时包含html网页文件、css样式表、js脚本及swf、mp3、flv等多媒体文件，整体约44.95MB，可覆盖教程各章节的页面制作、样式调整与交互设计练习。素材围绕HTML5基础标记、CSS布局与样式、表单与交互元素、音视频嵌入、网站优化与发布等关键知识组织，帮助读者跟着书中步骤一步步构建真实网页，将理论转化为可运行的作品。已有3029人学习下载，适合自学场景，也可作为课堂教学与课程设计的配套案例库。 每个学网页设计的初学者，手头大概率都有这么个东西：《网页设计与制作——Dreamweaver CS6标准教程（第二版）》配套的案例素材，通常是“案例素材.zip”这样一个压缩包。很多人下载完就卡住了——解压出来一堆文件夹，有图片、有HTML文件、有CSS文件，不知道从哪儿开始看；要么就是照着视频敲了半天，发现自己做出来的页面和素材里的效果完全对不上。

这篇东西就是给还在和这套素材较劲的人写的。我会从“素材包到底怎么用”这个最朴素的问题出发，把解压、建站、改代码、踩坑这一条完整链路捋一遍。无论你是正在上网页设计课的学生，还是打算自学前端、手里刚好有这个包的爱好者，都可以照着操作一遍。

1. 这套案例素材包里到底装了些什么

先说一句大实话：很多人把这个zip当成了“答案”，觉得素材包就是为了让你对着抄代码用的。这是对这套素材最大的误解。

1.1 常见的目录结构与文件类型

我没有看过你下载的具体版本，但根据Dreamweaver CS6标准教程这类书的通用配套思路，案例素材包基本可以分成三类东西：

• 完整案例页面：一般是.html或.htm文件，有的章节会附带对应的.css文件，这是你打开浏览器就能直接看到效果的那些页面。
• 半成品素材：这是最有价值的部分。通常是某章练习的起点，比如你已经写好了HTML结构，但CSS样式表留空，或者图片文件是齐全的、代码是缺失的。这类素材是让你“接续完成任务”用的，不是你拿来直接看效果的。
• 资源文件：images文件夹（放图片）、media文件夹（放音视频）、可能还有fonts文件夹。资源文件通常是和上面的页面配套的。

我拆过不少这类教材的素材包，典型的目录层级一般是：

chapter04_forms/ ├── images/ │ ├── bg.jpg │ ├── btn_submit.gif │ └── logo.png ├── style/ │ └── style.css ├── form_demo.html └── form_demo_finish.html

注意区分两个相邻文件：一个叫form_demo.html，一个叫form_demo_finish.html。前者是“练手版”，后者是“完成版”。很多新手打开页面不生效，就是因为打开的是练手版，而练手版的CSS路径或图片路径还没有补全。

1.2 为什么必须用真实素材练手，而不是只看视频

短视频平台上很多教程是把完整代码打出来让你抄，这套素材的逻辑完全不同：它把半成品交给你，让你补完缺失的部分。这其实是更接近真实工作的方式——你入职之后接手的项目，永远是别人写了一半的代码，不是从零开始的文档。

所以这套素材的正确打开方式，从来不是“打开页面看看效果”，而是“把半成品做成完成版”。这是从使用软件到理解网页本质的分水岭。整个素材包就是一本“练习册”，而不是“参考答案集”。

2. 拿到素材包后的第一步：解压、建站、预览

这一步听起来简单到不用教，但我亲眼见过不少人在解压环节就翻车了，而且翻车之后还意识不到问题是出在“解压”上。

2.1 解压前先解决两个隐藏坑：编码与路径

第一个坑：zip包里的文件名显示乱码。原因是压缩包制作时使用了非UTF-8编码的文件名。国内早期教材素材包尤其常见。Windows自带的资源管理器解压这一类zip时，经常把中文文件名解成乱码（常见的是韩文乱码，比如“图片”变成“��Ƭ”）。这不是文件坏了，是解码方式不对。

解决办法：换用支持编码识别的解压工具，比如Bandizip或7-Zip，并设置自动检测编码。如果已经用系统自带的解压工具解出了乱码目录，把整个文件夹删掉，重新解压，不要再在乱码目录上继续操作——因为里面的引用路径也会跟着乱，后面改起来非常痛苦。

第二个坑：把zip包直接拖到Dreamweaver里用。Dreamweaver的站点管理需要一个真实文件夹路径，它不支持直接读取zip压缩包，也不推荐在压缩软件打开的虚拟目录里工作。标准做法是：

解压到 D:\DW_Learning\（或者其他不含中文、不含空格的纯英文路径）

路径里有中文、空格，在浏览器里打开本地HTML时问题不大，但一旦涉及CSS中的相对路径跳转、Dreamweaver的实时视图、模板插件的资源引用，就会出现各种“明明文件在却加载不出来”的怪异现象。养成纯英文路径的习惯，能把这类问题直接消灭在萌芽阶段。

2.2 用Dreamweaver CS6建立本地站点，让案例“活”起来

解压之后，打开Dreamweaver CS6，先别急着双击HTML文件。你应该在Dreamweaver里建立一个“站点”，把这个素材目录关联进去。

具体操作是：

1. 菜单栏点击“站点” -> “新建站点”。
2. 站点名称随便填，比如“DW教材案例”。
3. 本地站点文件夹选择你解压出来的那个根目录。
4. 点击保存。

这一步的意义在于：Dreamweaver只有在你建立了站点之后，它的“资源面板”“链接检查”“代码提示”才会正常工作。很多人在素材包里改代码，发现图片路径提示不出来、CSS类名没有自动补全，就是因为没有建立站点，Dreamweaver只是把HTML当作普通文本在打开。

建立站点后，你会在右侧的“文件”面板里看到整个素材包的目录树，双击任意HTML文件就能进入编辑状态，按F12可以调出浏览器预览。

2.3 预览技巧与浏览器联调

Dreamweaver CS6自带一个“实时视图”，但它毕竟是老软件，渲染引擎还是IE时代的底子。不要用实时视图判断页面效果，要以真实浏览器为准。

我的习惯是：在Dreamweaver里改完代码按F12，让它在默认浏览器打开，然后按F12打开开发者工具，主要看Console里有没有报错、Network里有没有加载失败的资源。素材包里最常见的“页面白屏”“图片裂开”“样式没生效”，九成能在Network标签页里找到答案——某个CSS文件或图片返回404了。

这个习惯虽然简单，但能让你在素材练习阶段就建立“代码问题会真实反映在网络请求上”的信号意识，这比背十个标签更有用。

3. 从素材到自己的作品：三个典型素材的拆解思路

这套教材的不同章节会带着你完成不同类型的网站页面。我从里外里拆几个最具代表性的类型，讲一讲拿到素材后应该怎么看、怎么改。

3.1 图文混排页面：从表格布局到CSS布局的进化

早期教材里有很多“图文混排”案例。打开这种HTML文件，你大概率会看到两种不同的结构写法混在一起：

• 老式写法：用<table>做整体布局，<td>里塞文字和图片。
• 新式写法：用<div>承载图文内容，用CSS控制浮动布局。

这一章素材的核心知识点，就是让你对比这两种方式的差异。如果你是初学，建议这样拆解：

先用浏览器开发者工具把效果图和代码对照着看，弄清楚每个内容是放在表格里还是div里；然后把表格布局那份文件里负责布局的<table>标签逐个改成<div>，每改一个就刷新页面看看效果是否有变化；最后尝试用CSS的float: left或display: inline-block实现和原来表格一样的图文并排效果。

我这样练过之后的最大感受是：光听老师讲“表格布局不行了”永远记不住，亲手把一个三个单元格的表格改写成div样式后，你才会真正明白为什么CSS布局更灵活。

3.2 表单页面：交互元素的结构与行为分离

表单页面的素材通常是教你怎么做“用户注册”“留言板”这类页面。这套素材里最有意思的地方在于：很多表单文件自带一个“提交后动作”——有的会弹出一个JavaScript的alert，有的会用mailto提交。

在查看这类素材时，我会盯死三个位置：

• <form>标签上的action和method属性。
• 每个<input>标签的name属性——这是后台接收数据时使用的字段名。
• 末尾那个<input type="submit">按钮的触发逻辑。

你不需要会写后台，但一定要养成“表单字段必须有name、表单提交动作要明确”的习惯。素材包里有些案例的action属性是空的，这是故意的，目的是让你在浏览器里看到页面提交后无法处理的报错，从而理解“前台和后台需要配合”这一概念。别删掉那个空属性，把它理解透彻更重要。

另外，表单页是练习CSS选择器的好场景。.form-group input和.form-group > input在页面上表现的差异不大，但在修改素材里的某类输入框样式时会直接决定你有没有改对目标。

3.3 带JavaScript的页面：素材里最容易丢代码的地方

教材里的JavaScript案例通常很小，比如图片轮播、下拉菜单、表单验证。这类素材的问题是：你解压后打开，发现特效没生效。

绝大多数情况下，那是因为素材包里的JS文件路径是绝对路径（比如/js/slider.js），你本地没有对应的服务器环境，所以浏览器加载失败。解决办法很简单：把JS引用从/js/slider.js改成相对路径js/slider.js，确保它以当前页面所在目录为基准定位文件。

另一个常见问题是：早期教材的JS会直接写在HTML的<head>里，使用onclick="xxx()"这样的方式调用。现代浏览器对这类代码兼容性已经有所下降，如果发现点击没反应，先打开Console看报错，把提示的语法错误修掉，再刷新测试。素材里的JS代码一般非常简单，即便不精通JavaScript也能从报错信息里猜出个大概。

4. 实战中绕不开的报错与修复

用这套素材做练习，最容易被卡住的位置其实不在于HTML本身，而是各种“文件层面”的意外。挑几个高频问题讲。

4.1 解压失败：invalid zip archive / could not find EOCD 这类报错怎么处理

很多人下载的素材包在解压时会弹出一个英文报错，提示invalid zip archive: could not find EOCD。这个EOCD是“End of Central Directory”的缩写，可以理解为zip包的“末尾目录区”。如果找不到它，说明这个zip文件不完整，多半是下载时断点续传造成的，也有可能是网盘端做了切割。

处理思路是按顺序排查：

1. 重新下载一遍文件，换用浏览器自带下载或者网盘客户端下载，避免使用会中断的下载工具。
2. 对比文件大小。下载完成后的zip文件体积，应该和下载源页面标注的大小一致。不一致就说明没下全。
3. 用7-Zip打开zip文件，菜单栏选择“测试”，如果测试过程报错，就确认了文件损坏。

如果文件确实损坏且重新下载也无效，就不要硬扛了，找教材的官方支持或原发布渠道重新获取。与技术支持部联系时，把完整的报错信息和文件大小直接发过去，这是最快的解决路径。

4.2 压缩包分卷、乱码与编码问题的处理边界

还有一类情况：你下载的素材包是分卷压缩的，也就是拆成了素材包.z01、素材包.z02、素材包.zip这样的一组。解压时提示“缺少压缩分卷”，或者“必须有下列压缩分卷”。

这类问题的标准做法是：把所有分卷文件放在同一个文件夹内，文件名不要改动（尤其不要改名成素材包1.zip这种），然后使用7-Zip打开扩展名为.zip的那个文件，右键选择“解压”。它会自动识别同目录下的z01分卷。这里需要记住：用Windows自带解压工具通常处理不了分卷，建议全部交给7-Zip。

至于前文提到的乱码问题，我再多啰嗦一句：不要试图手动挨个改文件名。HTML内部如果引用了图片路径，文件名一改，引用路径全断。正确做法是删除乱码目录，换个支持编码识别的解压工具重新解压，一次性把文件名解对。

4.3 Dreamweaver CS6在新系统上的兼容性处理

CS6是Adobe在2012年前后的产品，放在现在的新操作系统上，常见的坑有两类。

第一类是启动或操作时的“脚本错误”弹窗。这类问题通常是操作系统对老版HTML渲染引擎不支持导致的，可以在“编辑 -> 首选参数 -> 常规”里，把“显示欢迎屏幕”取消勾选，或者干脆换用别的代码编辑器（如VS Code）编写代码，只把Dreamweaver当作预览工具。

第二类是字体、面板布局错乱。这种情况别去改配置文件，容易越改越乱。直接重置工作区：点击右上角“设计器”下拉菜单，选择“重置”，让面板恢复到默认布局，一般就能正常使用。

如果你本身就是想学网页设计而不是学工具，我的建议是：Dreamweaver CS6在“设计视图”下的可视化操作有一定教学价值，但到了后期，尽快切到“代码视图”状态练习手写代码，切换写法是迟早的事。

5. 把案例素材变成自己的组件库：改版练习路线

当你把所有案例都照着做了一遍之后，这套素材就换了一个身份：从“作业”变成了“组件库”。素材里成熟的页面结构、CSS样式命名、JS轮播逻辑，都可以拆出来留作己用。

5.1 从模仿到改造的“三步走”

我自己带新人的时候，一直推荐一套改版练习法，套在教材素材上同样适用：

第一步，改文字。把素材里的企业简介换成你自己的个人介绍，把“关于我们”改成“关于本站”。这一步不涉及结构变动，主要帮你熟悉内容替换时CSS是否有影响。

第二步，改配色。找到页面的CSS文件，定位body或.header等容器的background-color、color、border-color属性，把整套配色换掉。这一步的核心目的是理解CSS选择器和继承关系——你会发现只改一个地方，整个页面的风格就变了，这就是CSS样式集中管理的威力。

第三步，改结构。这是最有挑战的一步。尝试把素材里的两栏布局改成三栏布局，或者把顶部导航从水平排列改成垂直排列。此时需要同时修改HTML和CSS，改完之后还要检查页面是否在窄屏下变形。

三步走完，这个素材才算是真正吃透了。

5.2 一个完整的改版练习设计

我给一个我自己常用的练习题目，你可以直接拿素材包里的任意成品页面来做。

目标：把素材里的“公司产品展示页”改造成一个个人博客首页。

改造要求：

1. 顶部导航从“公司首页/产品中心/联系我们”换成“首页/技术笔记/关于我”。
2. 左侧产品图片列表改成博客文章标题列表，每条标题加一个发布日期。
3. 右侧侧边栏的原“联系方式”区块改成“个人简介”，放一段兴趣爱好文字。
4. 底部版权信息，把公司名称改成自己的域名。
5. 全站主色调从素材原来的蓝灰色系改成深绿或墨蓝。

这个练习的意义在于：它逼着你把所有标签都用一遍，同时保留原来的CSS框架。你会发现，只需要改HTML文本内容和有限的几条CSS属性，就能造出一个看起来完全不同的页面——这就是网页制作里“结构复用”的核心价值。

5.3 素材管理习惯

最后分享一个我自己的素材管理习惯：不要把所有案例平铺堆在一个目录里，按章节或功能建立子目录，每一个页面改版后的文件命名为xx_v2.html，不要覆盖原文件。因为改版过程中随时需要回到原版对照效果，保留了原始素材，你的试错成本就永远不会变高。

案例素材包的使用从来不是一次性的。把它当作一个工具箱，每次重新翻一个案例，都可能发现之前遗漏的细节。

我个人在实际操作中的体会是：Dreamweaver C6乃至整个网页制作课程，真正留下的不是软件操作记忆，而是“看到页面能拆解结构、遇到错误知道排查思路”的能力。这套素材恰好提供了极好的训练场，把它做厚，你学到的就不只是书上的案例，而是做网页的基本功。

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