DreamweaverCS6网页设计项目教程

“十三五”高等职业教育计算机类专业规划教材

DreamweaverCS6网页设计

项目教程

刘晓洪邓长春主编

高俊吴小峰

副主编

石磊熊淑云

内容简介

本书从实用的角度出发，采用“项目驱动，任务引领”的编写模式对DreamweaverCS6中的

相关知识点进行讲解，全书共有十八个项目，每个项目按知识点由浅入深地组织任务，通过具体

任务实际操作，能让读者快速入门并能熟练掌握相关的操作技能。

本书定位准确，教学内容新、深度适当，完全按照教学规律编写，因此非常适合实际教学。

本书理论和实践的比例恰当，特别适合高等教育注重实际能力的培养目标，具有很强的实用性。

本书适合作为高职高专院校、成人高校及本科院校举办的二级职业技术学院、继续教育学院

和民办高校相关专业的教材，也可作为信息技术培训机构的培训用书，还可作为网页设计与制作

人员、网站建设与开发人员、多媒体设计与开发人员的参考书。

图书在版编目（CIP）数据

DreamweaverCS6网页设计项目教程/刘晓洪，邓长

春主编.—北京：中国铁道出版社，2016.2

“十三五”高等职业教育计算机类专业规划教材

ISBN978-7-113-21313-8

Ⅰ.①D…Ⅱ.①刘…②邓…Ⅲ.①网页制作

工具－高等职业教育－教材Ⅳ.①TP393.092

中国版本图书馆CIP数据核字(2016)第003317号

书名：DreamweaverCS6网页设计项目教程

作者：刘晓洪邓长春主编

策划：汪敏读者热线：（010）63550836

责任编辑：秦绪好冯彩茹

封面设计：付巍

封面制作：白雪

责任校对：汤淑梅

责任印制：李佳

出版发行：中国铁道出版社（100054，北京市西城区右安门西街8号）

网址：http://

印刷：三河市宏盛印务有限公司

版次：2016年2月第1版2016年2月第1次印刷

开本：787mm×1092mm1/16印张：15.5字数：375千

印数：1～2000册

书号：ISBN978-7-113-21313-8

定价：33.00元

版权所有侵权必究

凡购买铁道版图书，如有印制质量问题，请与本社教材图书营销部联系调换。电话：（010）63550836

打击盗版举报电话：（010）51873659

FOREWORD前言

随着计算机网络信息技术的快速发展，网络传媒已作为当今主流媒体，而网站则是网络传

媒的一种很好的载体。网站以其投入小、覆盖面广、传播速度快而深受广大单位青睐。目前很

多单位都有属于自己的网站，因此，市场对网页设计与制作方面的人才需求也很大。

网页设计软件对提高网页制作起着举足轻重的作用。DreamweaverCS6是软件厂商Adobe

推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。借助

DreamweaverCS6强大的可视化编辑功能和CSS设计工具，为提高网页设计者开发网站效率起

到事半功倍的作用。

本书从实用的角度出发，采用“项目驱动，任务引领”的编写模式对DreamweaverCS6中

的相关知识点进行讲解，通过具体任务实作，能让读者快速入门并能熟练掌握相关的操作技能。

本书共十八个项目，每个项目按知识点由浅到深组织任务，各项目内容概况如下：

项目一初识DreamweaverCS6，包括安装DreamweaverCS6、启动与退出Dreamweaver

CS6、熟悉DreamweaverCS6的工作环境等内容。

项目二创建与管理站点，包括创建本地站点、管理本地站点、管理本地站点中的文件等

内容。

项目三认识HTML文档及HTML标签，包括创建HTML文档、H标签应用、Meta标签

应用等内容。

项目四文本元素的应用，包括插入文本元素、编辑文本元素等内容。

项目五图像元素的应用，包括插入普通图像、插入背景图像、插入图像占位符、制作鼠

标经过图像等内容。

项目六多媒体元素的应用，包括插入Flash动画、插入FLV视频文件、插入wmv视频文

件、制作背景音乐等内容。

项目七超链接元素的应用，包括内部链接的应用、外部链接的应用、锚点链接的应用等

内容。

项目八表格元素的应用，包括表格元素的插入与设置、运用表格进行网页布局等内容。

项目九框架元素的应用，包括框架导航的应用、浮动框架的应用等内容。

项目十表单元素的应用，包括运用表单及表单对象制作用户注册页面等内容。

项目十一列表元素的应用，包括无序列表的应用、有序列表的应用等内容。

项目十二网页元素的综合应用，包括对网页元素灵活运用，制作出一个图文并茂，有声

有色、页面和谐的静态网站。

项目十三CSS样式表的应用，包括行内样式的应用、内部样式的应用、外部样式的应用

等内容。

项目十四Div层的应用，包括层的重叠显示、层的隐藏与显示、Div+CSS网页布局应用

等内容。

项目十五应用行为创建页面动态效果，包括制作弹出窗口效果、制作交换图像效果、制

作拖动AP元素效果等内容。

项目十六Spry框架的应用，包括Spry菜单栏的应用、Spry选项卡式面板的应用、Spry折

叠式面板的应用、Spry可折叠面板应用等内容。

项目十七动态网页开发，包括IIS组件的安装与配置、表单数据的读取与输出、制作用户

注册系统、制作用户登录系统等内容。

项目十八移动设备网页开发，包括通过流体网格布局创建移动设备网页、通过示例文件

创建移动设备网页等内容。

本书为校企合作创新型精品教材，由重庆城市管理职业学院富有实际项目开发经验的刘晓

洪、邓长春老师任主编，高俊、吴小峰、石磊、熊淑云任副主编。在编写过程中，得到了重庆

红透科技有限公司、重庆邮政公司的大力支持，企业人员车世强、刘治洪全程参与并指导教材

的编写，在此表示衷心的感谢！

本书相关任务的网页源码及素材下载地址为/cLC6CpsRUz39U，访问密码为

1b9c。

由于编者水平有限，书中难免存在疏漏和不足之处，敬请同行和广大读者予以批评指正。

编者

2015年10月

CONTENTS目录

项目一初识DreamweaverCS61任务二插入FLV视频文件54

任务一安装DreamweaverCS61任务三插入WMV视频文件55

任务二启动与退出任务四制作背景音乐57

DreamweaverCS63思考与练习58

任务三熟悉DreamweaverCS6的项目七超链接元素的应用60

工作环境4任务一内部链接的应用60

知识拓展8任务二外部链接的应用63

思考与练习9任务三锚点链接的应用66

项目二创建与管理站点10思考与练习67

任务一创建本地站点10项目八表格元素的应用69

任务二管理本地站点13任务一表格元素的插入与属性

任务三管理本地站点中的文件14设置69

知识拓展16任务二运用表格进行网页布局72

思考与练习17知识拓展76

项目三认识HTML文档及HTML思考与练习78

标签19项目九框架元素的应用81

任务一创建HTML文档19任务一框架导航的应用81

任务二H标签的应用23任务二浮动框架的应用84

任务三Meta标签的应用25知识拓展86

思考与练习30思考与练习88

项目四文本元素的应用33项目十表单元素的应用91

任务插入文本信息33任务制作用户注册页面91

思考与练习38知识拓展95

项目五图像元素的应用39思考与练习100

任务一插入普通图像39项目十一列表元素的应用101

任务二插入背景图像43任务一无序列表的应用101

任务三插入图像占位符45任务二有序列表的应用103

任务四制作鼠标经过图像效果47知识拓展104

知识拓展48思考与练习106

思考与练习49项目十二网页元素的综合应用108

项目六多媒体元素的应用52任务制作文学欣赏网站108

任务一插入Flash动画52

DreamweaverCS6

项目十三CSS样式表的应用116任务二Spry选项卡式面板的应用...167

任务一行内样式的应用116任务三Spry折叠式面板的应用...169

任务二内部样式的应用121任务四Spry可折叠面板的应用...171

任务三外部样式的应用124知识拓展172

网页设计项目教程知识拓展126思考与练习177

思考与练习136项目十七动态网页开发180

项目十四Div层的应用139任务一IIS组件的安装与配置180

任务一层的重叠与嵌套139任务二表单数据的读取与输出186

任务二层的隐藏与显示143任务三制作用户注册系统194

任务四制作用户登录系统201

任务三Div+CSS网页布局应用...145

知识拓展148知识拓展203

思考与练习150思考与练习213

项目十五应用行为创建页面动态项目十八移动设备网页开发216

2效果155任务一通过流体网格布局创建

任务一制作弹出窗口效果155移动设备网页216

任务二制作交换图像效果158任务二通过示例文件创建移动

任务三制作拖动APDiv元素设备网页219

效果159知识拓展221

知识拓展160附录223

思考与练习162附录AHTML5标签参考手册223

项目十六Spry框架的应用164附录BASP函数及对象226

任务一Spry菜单栏的应用164附录C思考与练习参考答案230

项目一

初识DreamweaverCS6

学习目标

掌握DreamweaverCS6软件的安装

了解DreamweaverCS6工作区

了解DreamweaverCS6工具栏

了解DreamweaverCS6属性面板

了解DreamweaverCS6插入栏

了解DreamweaverCS6菜单栏

了解DreamweaverCS6面板组

了解DreamweaverCS6新增功能

项目简介

DreamweaverCS6是软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑

网站和移动应用程序的网页设计软件。本项目从软件的安装、启动、退出和工作环境介绍等

方面着手，帮助学生了解DreamweaverCS6的作用，熟悉DreamweaverCS6开发环境的基本

组成，为学习后面的内容做好准备。

本项目要完成的任务：

任务一安装DreamweaverCS6

任务二启动与退出DreamweaverCS6

任务三熟悉DreamweaverCS6的工作环境

任务一安装DreamweaverCS6

本任务要求学生会根据所要安装DreamweaverCS6的计算机的具体环境，正确选择

DreamweaverCS6（32位或64位）安装软件，并成功安装DreamweaverCS6软件。

以DreamweaverCS632位为例，安装步骤如下：

DreamweaverCS6

①购买DreamweaverCS6安装光盘或从授权网站下载DreamweaverCS6软件，找到

Setup.exe文件并双击。

②在“Adobe软件许可协议”界面（见图1-1）中单击“接受”按钮进入安装位置界面。

网页设计项目教程

2

图1-1软件许可协议界面

③如图1-2所示，选择“语言”和安装“位置”（一般默认），单击“安装”按钮，进

入“安装”界面，如图1-3所示。

图1-2安装位置界面

图1-3“安装”界面

④安装完成后，进入“安装完成”界面，单击“关闭”按钮退出安装，如图1-4所示，

安装结束。

项目一初识

DreamweaverCS6

图1-4“安装完成”界面

任务二启动与退出DreamweaverCS6

通过对前一个任务的学习，掌握了DreamweaverCS6软件的正确安装步骤，本任务需要

3

DreamweaverCS6

掌握启动与退出DreamweaverCS6的技能，通过本任务的学习，从而更好地提高学生对软件

的实践操作能力。

网页设计项目教程1．启动DreamweaverCS6

方法一：从“开始”菜单中启动

选择“开始”→“程序”→“Macromedia”→“MacromediaDreamweaverCS6”命令。

方法二：用快捷方式启动

双击桌面上的图标，即可打开DreamweaverCS6软件。

2．退出DreamweaverCS6

方法一：在DreamweaverCS6主窗口中的“文件”菜单中选择“退出”命令。

方法二：在DreamweaverCS6被激活状态下，直接按【Alt+F4】组合键。

方法三：单击DreamweaverCS6主窗口左上角的控制菜单图标，从弹出的菜单中选择“关

闭”命令，或者直接双击控制菜单图标。

4

方法四：单击DreamweaverCS6主窗口右上角的“关闭”按钮。

任务三熟悉DreamweaverCS6的工作环境

通过对前一个任务的学习，我们对DreamweaverCS6的工作界面有了一个感官上的认识，

该任务需要学生熟悉DreamweaverCS6的工作环境，主要包括工作区、工具栏、属性面板、

插入栏、菜单栏、面板组等。熟练掌握工具、菜单以及属性面板等的使用，通过本任务的学

习，为学习后面的网页制作打下坚实的基础。

1．工作区

DreamweaverCS6的工作区主要包括功能菜单、插入栏、文档工具栏、文档窗口、状态栏、

“属性”面板、功能面板等，如图1-5所示。合理使用板块中的相关功能，可为设计人员提

供一个高效便捷的开发过程。

2．工具栏

（1）“标准”工具栏

“标准”工具栏包括“新建”“打开”“在Bridge中浏览…”“保存”“全部保存”“打印代

码”“剪切”“拷贝”“粘贴”“还原”和“重做”等命令，如图1-6所示。

1）开启与关闭“标准”工具栏

开启：选择“查看”→工具栏→“标准”命令，如图1-7所示。

关闭：右击工具栏空白处，在弹出的快捷菜单中取消“标准”的选择即可。

功能菜单

插入栏

“文档”工具栏文档工具栏

文档窗口功能面板

状态栏

“属性”面板属性面板

图1-5DreamweaverCS6工作区

项目一初识

在Bridge中浏览…打印代码还原重做

新建打开保存全部保存剪切拷贝粘贴

图1-6“标准”工具栏图1-7打开“标准”工具栏DreamweaverCS6

2）“标准”工具栏介绍

①新建文档：新建一个网页文档。

②打开：打开已保存的文档。

③在Bridge中浏览…：AdobeBridge是一个能够单独运行的完全独立的应用程序。用来

组织、浏览和寻找所需资源。它几乎支持所有的图片格式，如PSD、AI、INDD、AdobePDF、

JPG等。

④保存：保存当前编辑的文档。

⑤全部保存：保存所有打开的文档。

⑥打印代码：打印代码视图中的代码。

⑦剪切：剪切工作区中被选中的对象。

⑧拷贝：复制工作区中被选中的对象

5

DreamweaverCS6

⑨粘贴：把剪切或复制的对象粘贴到文档窗口光标所在处。

⑩还原：撤销前一步所做的操作。

重做：重新恢复被取消的操作。

（2）“文档”工具栏

网页设计项目教程“文档”工具栏包括控制文档窗口视图的一些常用按钮和弹出菜单，如图1-8所示。开

发者可通过“代码”“拆分”“设计”和“实时视图”4个按钮在不同的视图模式之间进行

切换。

1）开启与关闭文档工具栏

开启：选择“查看”→工具栏→“文档”命令，如图1-7所示。

关闭：右击工具栏空白处，在弹出的快捷菜单中取消“文档”的选择即可。

多屏幕文件管理检查浏览器兼容性

6在浏览器中浏览/调试W3C验证刷新设计视图

图1-8“文档”工具栏

2）“文档”工具栏介绍

①代码：显示HTML源代码视图。

②拆分：同时显示HTML源代码视图和设计视图。

③设计：显示设计视图。

④实时视图：基于浏览器的文档视图，该视图下的文档不可编辑。

⑤多屏幕：为智能手机、平板电脑和台式机进行设计。

⑥在浏览器中浏览/调试：允许程序员在浏览器中浏览或调试文档。

⑦文件管理：多个人对一个页面进行操作时，进行获取、取出、打开文件、导出等操作。

⑧W3C验证：由WorldWideWebConsortium（W3C）提供的验证服务可以为用户检查

HTML文件是否符合HTML或XHTML标准。

⑨检查浏览器兼容性：检查所设计的页面对不同类型的浏览器的兼容性。

⑩刷新设计视图：将“代码”视图中修改后的内容及时反映到文档窗口中。

标题：输入要在浏览器上显示的文档标题。

3．“属性”面板

“属性”面板主要用于查看和更改所选对象的各种属性，每种对象都具有不同的属性。

“属性”面板包括两种选项，一种是HTML选项，默认显示文本的格式、样式和对齐方

式等属性，如图1-9所示。另一种是CSS选项，可以在CSS选项中设置各种样式，如图1-10

所示。

图1-9HTML选项

图1-10CSS选项

4．插入栏

插入栏包含用于创建和插入对象的按钮。它们分类进行组织，当鼠标指针移动到一个按

钮上时，会出现一个工具提示，其中含有该按钮的名称。主要有“常用”插入栏、“布局”

插入栏、“表单”插入栏、“数据”插入栏、Spry插入栏、“文本”插入栏、“收藏夹”插入

栏、jQueryMobile插入栏、InContextEditing插入栏等。

利用插入栏插入对象的方法有两种：

方法一：在“插入”菜单中选择操作对象，如图1-11所示。

方法二：选择“窗口”→“插入”命令，打开“插入”面板，如图1-12所示。

项目一初识

DreamweaverCS6

图1-11菜单中的插入栏图1-12面板组中的“插入”面板

5．菜单栏

菜单栏是实现一定功能的菜单命令。DreamweaverCS6拥有“文件”“编辑”“查看”“插

入”“修改”“格式”“命令”“站点”“窗口”“帮助”10个菜单，单击这些菜单可以打开其

子菜单，如图1-13所示。DreamweaverCS6的菜单功能极其丰富，几乎涵盖了所有的功能

操作。

7

DreamweaverCS6

图1-13菜单栏

6．熟悉面板组

网页设计项目教程DreamweaverCS6中的面板可以自由组合而成为面板组。每个面板都

可以展开和折叠，并且可以和其他面板组停靠在一起或取消停靠。面板

组还可以停靠到集成的应用程序窗口中，可以很容易地访问所需的面板，

而不会使工作区变得杂乱。

通过“窗口”菜单，可灵活开启相关功能的面板，如图1-14所示。

图1-14面板组

知识拓展

8DreamweaverCS6是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作

并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多

种方式来创作、编写和修改网页，对于初级人员，无需编写任何代码就能快速创建Web页面，

其成熟的代码编辑工具更适用于Web开发高级人员的创作。DreamweaverCS6新版本使用了

自适应网格版面创建页面，在发布前使用多屏幕预览审阅设计，可大大提高工作效率。改善

的FTP性能，更高效地传输大型文件，“实时视图”和“多屏幕预览”面板可呈现HTML5代

码，更能检查自己的工作。DreamweaverCS6以强大的功能和友好的操作界面备受广大网页设

计者的欢迎。

DreamweaverCS6的新增功能如下：

1．基于流体网格的CSS布局

使用新增的流体网格布局来创建能应对不同屏幕尺寸的最合适的CSS布局，可创建跨平

台和跨浏览器的兼容网页设计。在使用流体网格生成Web页时，布局及其内容会自动适应各

种不同设备，如台式机、智能手机等。

2．多屏幕预览

利用更新的“多屏幕预览”面板检查智能手机、平板电脑和台式机所建立项目的显示画

面。增强型面板能让程序员检查HTML5的内容呈现。

3．改善的FTP性能

利用改良的多线程FTP传输工具，节省大文件上传的时间，更快速高效地上传网站文件。

4．AdobeBusinessCatalyst集成

使用Dreamweaver中集成的BusinessCatalyst面板连接并编辑利用AdobeBusiness

Catalyst建立的网站，利用托管解决方案建立电子商务网站。

5．增强型jQuery移动支持

使用更新的jQuery移动框架支持为iOS和Android平台建立本地应用程序。建立触及移

动受众的应用程序，同时简化移动开发工作流程。

6．更新的PhoneGap支持

更新的AdobePhoneGap支持可轻松为iOS和Android建立和封装本地应用程序。通过改

编现有的HTML代码来创建移动应用程序。使用PhoneGap模拟器检查相关设计。

7．CSS3过渡

将CSS变化制成动画转换效果，使网页设计栩栩如生。在处理网页元素和创建优美效果

时保持对网页设计的精准控制。

8．更新的实时视图

使用更新的“实时视图”功能在发布前测试页面。“实时视图”现已使用最新版的WebKit

转换引擎，能够提供绝佳的HTML5支持。

思考与练习

一、填空题

1．DreamweaverCS6的工作窗口由五部分组成，分别是、、、

和。

2．文档窗口中的三种视图分别是、和。

3．DreamweaverCS6是由公司开发的软件。

4．DreamweaverCS6主要包含两大功能，即和。

二、选择题

1．在HTML标记语言中，支持（）标准化的结构语言。

A．HTML4.0B．HTML5.0C．XMLD．C#项目一初识

2．Dreamweaver在编程语言方面支持（）编程语言。

A．VBScriptB．JavaScriptC．PHPD．JSP

3．下面视图模式中即能查看代码又可显示设计效果的是（）。

A．代码视图B．拆分视图C．设计视图D．实时视图

DreamweaverCS6

4．在代码视图中，为了方便设计人员查找代码和调试，可以作（）操作。

A．显示行号B．折叠代码C．应用注释D．显示代码浏览器

三、简答题

简述DreamweaverCS6的新增功能。

9

项目二

创建与管理站点

学习目标

了解本地站点、远程站点的基本概念

了解站点及站点结构

掌握站点的规划方法

掌握创建本地站点

掌握本地站点的管理

项目简介

创建站点是网页设计之前必须的准备工作，站点用于存储和管理网站中的各种网页文

档，以及与网站相关的各种资源。本项目要求学生理解站点相关的概念，掌握如何规划站

点、创建站点、管理站点、管理站点文件及文件夹，最终达到利用站点工具对站点进行管

理的目的。

本项目要完成的任务：

任务一创建本地站点

任务二管理本地站点

任务三管理本地站点中的文件

任务一创建本地站点

在本地磁盘创建站点文件夹webtest，利用DreamweaverCS6的站点管理工具创建本地站

点，站点命名为webtest。通过本任务的学习，使学生掌握创建本地站点的方法。

1．Dreamweaver站点

Dreamweaver站点是一种管理网站中所有文件的工具。“站点”既表示Web站点，也表示

属于Web站点的文件在本地磁盘上的存储位置。通过树形结构来展示网站的内容分布，从而

实现对站点布局及细节内容的展示及修改，本项功能对于网页设计者非常有用。

简单地说，站点就是一个文件夹，是关于网站中所存放文件的一个集合。站点中的文件

通过各种链接关联起来，浏览者利用浏览器浏览各种链接的网页文件，从而实现对整个网站

的浏览。站点建立后，用户在设计网页时可随时通过站点对网站内的各类素材进行统一管理，

使之井然有序，一目了然。

浏览者使用浏览器所看到的网页是保存在Web服务器上相应站点中的网页文件。一台

Web服务器上可以同时有多个站点，每个站点由多个网页、图像、视频等文件和相关文件夹

组成。站点由网站开发人员设计制作，然后通过站点管理软件上传到服务器上，并对其进行

更新和维护。

2．本地站点与远程站点

（1）本地站点

本地站点是直接建立在本地计算机上的站点。一般为网站开发者的计算机工作目录，是

存放网页、素材的本地文件夹，开发者能够在本地计算机的磁盘上构建出整个网站，编辑相

应的文档并对站点进行管理。

（2）远程站点

远程站点是发布到Web服务器上的站点。人们在Internet上浏览的各种网站，其实就是

用浏览器打开存储于Internet服务器上的网页文件以及与网页相关的各种资源。我们通常将

存储在Internet服务器上的站点也称作远程站点。

通过Dreamweaver中的“管理站点”配置，本地站点和远程站点可以实现在本地磁盘和

Web服务器之间传输文件，这样就可轻松管理Dreamweaver站点中的文件和各种素材。

①在本地磁盘（如F盘）下创建用来存放站点的文件夹webtest（F:\webtest）。

项目二创建与管理站点

②启动DreamweaverCS6，选择“站点”→“新建站点”（或“管理站点”项→“新建站

点”）命令，如图2-1所示。

③弹出“站点设置对象”对话框，选择“站点”选项，在“站点名称”文本框中输入

站点名称（webtest），在“本地站点文件夹”右侧单击“浏览文件夹”按钮，选择事先创建好

的站点文件夹（F:\webtest），单击“选择”按钮，如图2-2所示。

图2-1新建站点图2-2设置站点名称和路径

11

DreamweaverCS6

④选择“服务器”选项，单击“添加新服务器”按钮，如图2-3所示。在弹出的对

话框中，输入“服务器名称”，选择“连接方法”为“本地/网络”选项，如图2-4所示。单

击“高级”按钮，在“服务器模型”中选择“ASPVBScript”，单击“保存”按钮，如图2-5

所示。

网页设计项目教程

12

图2-3添加新服务器

图2-4设置服务器

图2-5设置服务器模型

提示

“服务器”选项中的“服务器文件夹”和“WebURL”两项需要创建了Web服务器后方

可设置，Web服务器的配置将在后面项目中讲解，如未创建Web服务器，这里的“服务器

文件夹”选项可以暂时不设置。

⑤在“站点设置对象”对话框中，单击“保存”按钮。

通过上面的操作，在“文件”面板中就可看到创建的本地站点文件，如图2-6所示。

图2-6站点文件夹

提示

后面各项目中的各任务实例文件均保存在webtest站点中。

任务二管理本地站点

通过对前一个任务的学习，掌握了创建本地站点的方法，对于创建好的站点还需要管

理维护，本任务需要学生学会对站点的编辑、复制、导出及删除等的操作。本任务的需

求如下：

项目二创建与管理站点

①编辑webtest站点，把“本地站点文件夹”更改为Test文件夹。

②复制webtest站点，并重命名为MySite。

③导出MySite站点，并保存到D盘中，文件名为MySite。

④删除MySite站点。

⑤导入MySite站点。

1．编辑webtest站点

启动DreamweaverCS6，选择“站点”→“管理站点”命令，弹出“管理站点”对话框，

从站点列表中选择webtest站点，单击“编辑”按钮，在“站点”选项中的“本地站点文

件”处单击“浏览文件夹”按钮，在弹出的“选择根文件夹”对话框中找到Test文件夹，

单击“选择”按钮，再单击“确定”按钮，返回“管理站点”对话框，单击“完成”按钮

完成编辑。

2．复制webtest站点

启动DreamweaverCS6，选择“站点”→“管理站点”命令，弹出“管理站点”对话框，

从站点列表中选择webtest站点，单击“复制”按钮，此时在站点列表中可以看到复制的站

13

DreamweaverCS6

点（webtest复制）。选中“webtest复制”站点，单击“编辑”按钮，在“站点”选项中的

“站点名称”文本框中输入MySite，单击“保存”按钮完成站点复制。

3．导出MySite站点

启动DreamweaverCS6，选择“站点”→“管理站点”命令，弹出“管理站点”对话框，

网页设计项目教程从站点列表中选择MySite站点，单击“导出当前选定的站点”按钮，在弹出的“导出站点”

对话框中，保存位置选择“D盘符”，文件名为MySite.ste，单击“保存”按钮，在“管理站

点”对话框中单击“完成”按钮即可（导出的站点定义文件类型为.ste）。

4．删除MySite站点

启动DreamweaverCS6，选择“站点”→“管理站点”命令，弹出“管理站点”对话框，

从站点列表中选择要删除的MySite站点，单击“删除”按钮，在弹出的提示对话框中单击

“是”按钮，即可删除被选定的站点。

5．导入站点

通过导出的站点定义文件或从别处获得的站点定义文件，可以在DreamweaverCS6中导

14入该站点，对导入的站点可以跟其他创建的站点一样进行编辑操作。

操作步骤：启动DreamweaverCS6，选择“站点”→“管理站点”命令，弹出“管理站点”

对话框，单击“导入站点”按钮，在弹出的“导入站点”对话框中选择D盘符中的MySite.ste

文件，单击“打开”按钮，在“管理站点”对话框中单击“完成”按钮即可。

提示

导入/导出站点能将“站点设置”传输到其他计算机中，与其他开发者共享站点设置和

备份站点设置，该功能不会导入/导出站点文件。

任务三管理本地站点中的文件

前面任务中创建的本地站点，主要用于网站设计者对站点中的各类文件进行管理，通过本

地站点，可以方便地浏览、编辑、新建和删除相关的文件。本任务要求学生掌握利用站点管理

功能实现对文件/文件夹的新建、复制、重命名、删除等操作。本任务的需求如下：

①在webtest站点中创建文件夹，命名为MyFolder，并在MyFolder文件夹中创建文件

MyFile.html。

②把MyFile.html文件复制到webtest站点的根目录下。

③把MyFolder文件夹名重命名为TestFolder。

④删除TestFolder文件夹。

⑤把复制到站点根目录下MyFile.html文件另存为TestFile.html。

1．创建文件夹和文件

在“文件”面板中打开webtest站点，右击站点文件夹，在弹出的快捷菜单中选择“新

建文件夹”命令（见图2-7），输入文件夹名称MyFolder，右击MyFolder文件夹，在弹出

快捷菜单中选择“新建文件”命令，输入文件名MyFile.html（新建文件默认为.html的网页

文件）。

图2-7管理本地站点中的文件夹和文件

提示

也可直接在站点目录webtest中创建文件夹或文件，如在“文件”面板的站点中找不到

新建的文件夹或文件，可单击“文件”面板中的“刷新”按钮，或右击“站点-webtest”，

在弹出的快捷菜单中选择“刷新本地文件”命令，则在站点目录webtest中会显示创建的文

件夹或文件。

2．复制MyFile.html文件

在“文件”面板中打开webtest站点，双击MyFolder文件夹，在展开的文件中选择

“MyFile.html”文件并右击，在弹出的快捷菜单中选择“编辑”→“复制”命令；右击站点文项目二创建与管理站点

件夹，在弹出的快捷菜单中选择“编辑”→“粘贴”命令（文件夹的复制、移动与文件的复

制、移动操作相同）。

3．重命名MyFolder文件夹

在“文件”面板中打开站点，右击MyFolder文件夹，在弹出的快捷菜单中选择“编辑”→

“重命名”命令，输入新的名字TestFolder，在空白处单击即可（文件的重命名与文件夹的重

命名操作相同）。

4．删除TestFolder文件夹

在“文件”面板中打开站点，右击TestFolder文件夹，在弹出的快捷菜单中选择“编

辑”→“删除”命令，在删除确认中单击“是”按钮（删除文件夹时，文件夹中的文件将一

并删除）。

5．保存网页文档

打开MyFile.html网页文档，选择“文件”→“另保存”命令，在弹出的对话框中输入文

件名TestFile，单击“保存”按钮即可。

15

DreamweaverCS6

知识拓展

一、规划站点结构

网页设计项目教程对于网站开发者来说，网站的结构可分为“网站文件结构”和“网页层次结构”两方面。

一个网站包含不同类型的文件，如网页文件、图片文件、CSS样式文件、JavaScript文件、

音频文件、视频文件等，我们应按文件类别分门别类地把它们存放在不同的文件目录下，形

成条理清晰的文件结构。

网页层次结构则反映出一个站点的链接关系和网页文件之间的链接关系。

提示

目录的层次不宜太深，一般不要超过三层；另外给目录起名时要尽量使用能表达目录内

容的英文或汉语拼音，这样会更加方便日后的管理维护。

16二、网页的构成

不同主题的网站对网页内容的安排会有所不同，但大多数网站首页的页面结构都会包括

页面标题、网站