作者：老虎工作室 邹志勇 谭炜 林萍

出版社：人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

Dreamweaver CC中文版基础教程试读：

关于本书

注：本电子书不含光盘内容。

Dreamweaver是当今最流行的网页设计软件之一，它功能强大、使用简便，在网页设计领域内中应用得十分广泛。Dreamweaver CC进一步强化了软件的设计功能，完善了软件的用户界面，使之更人性化。内容和特点

本书结合典型实例深入浅出地介绍了Dreamweaver CC的基本功能和典型网页设计方法。在内容上通过具有典型性的综合实例进行深入剖析，向广大用户详细阐述基础的理论知识，让用户在案例操作中理解和运用理论知识。

全书共分11章，各章具体内容如下。

第1章：介绍运用 Dreamweaver CC进行网页设计的基础知识和操作工具。

第2章：介绍运用 Dreamweaver CC向网页中添加文本和图像的操作方法。

第3章：介绍运用 Dreamweaver CC向网页中添加多媒体和超链接的操作方法。

第4章：介绍运用 Dreamweaver CC添加表格和进行表格布局的方法和技巧。

第5章：介绍运用 Dreamweaver CC的框架嵌套网页的方法和技巧。

第6章：介绍运用 Dreamweaver CC的DIV+CSS来美化和布局网页的方法。

第7章：介绍运用 Dreamweaver CC的表单设计互动网页的方法和技巧。

第8章：介绍运用 Dreamweaver CC的行为制作网页特效的方法和技巧。

第9章：介绍运用 Dreamweaver CC应用HTML5和CSS3的方法和技巧。

第10章：介绍运用 Dreamweaver CC制作动态网页的方法和技巧。

第11章：介绍运用 Dreamweaver CC进行实战演练读者对象

本书注重基础，因此，即使没有网页设计经验的读者也可以根据本书的讲解循序渐进地学习 Dreamweaver CC的基本功能。本书强调通过案例操作来学习理论知识，并在此基础上加强实践环节，使读者能够迅速掌握 Dreamweaver CC设计网页的基本方法和技巧。

本书适合广大的网页设计爱好者和网页设计专业人员，也可作为有兴趣设计网页的读者学习 Dreamweaver CC的入门教材。本书选例综合全面，深度逐级递进，同时也适用于使用 Dreamweaver CC进行网页设计的初、中级读者学习参考。此外，本书还可作为Dreamweaver前期版本的用户学习 Dreamweaver CC的参考用书。附盘内容及用法

为了方便用户的学习，本光盘按章收录了完成书中实例所需要的素材文件、完成实例操作后的结果文件，以及每个实例制作过程的动画演示文件（.avi）。下面是本书配套光盘内容的详细说明。1.素材文件

在部分案例的设计过程中，需要根据书中提示打开光盘中相应位置的素材文件，然后进行下一步操作。这些素材文件分别保存在与章节对应的“素材”文件夹中（例如，“素材\第2章\公司简介\index.html”表示第2章中名字为“index”的网页文件，该文件放在光盘中的“素材\第2章\公司简介”目录下），读者可以使用 Dreamweaver CC打开所需的网页文件，然后进行后续操作。

注意：由于光盘上的文件都是“只读”文件，所以，用户无法直接修改这些文件。建议用户先将这些文件复制到计算机硬盘上，去掉文件的“只读”属性再使用。2.视频文件

用户打开与章节相对应的文件夹中的视频（.mp4）文件，可以观看各实例中的网页设计过程，有助于快速理解和掌握每个案例的设计方法和技巧。3.结果文件

每个实例完成后的结果文件都放在相应章节的“结果文件”文件夹中，打开这些文件可以获得最终的设计效果，并可以对设计结果作进一步操作，从而设计出属于自己的网页效果。4.PPT文件

本书提供了PPT课件，以供教师上课使用。

本书由四川农业大学邹志勇、成都理工大学谭炜以及盐城工学院林萍共同编写。感谢您选择了本书，也欢迎您把对本书的意见和建议告诉我们。

老虎工作室网站 http://www.ttketang.com，电子函件 ttketang@163.com。老虎工作室2016年1月第1章Dreamweaver CC网页设计基础

当用户在网上冲浪时，会欣赏到很多精美的网站。在羡慕的同时，是否想过要亲手设计一个网页？如果想要让自己制作的网页功能更强大，那就需要学习 Dreamweaver，它是设计网页的首选工具。【学习目标】

认识网页的发展历史和基本概念。

掌握网页的一般设计流程。

掌握HTML编写的基本操作。

掌握Dreamweaver CC的操作基础。1.1 网页设计基础

虽然网页存在着各种各样的形式和内容，但构成网页的基本元素大体相同，主要包括标题、网站 Logo、导航、超链接、广告栏、文本、图片、动画、视频与音频等，如图 1-1 所示。网页设计就是要将这些元素进行有机的整合，使整体达到和谐、美观的效果。图1-1 网页的基本元素1.1.1 网页设计的发展历史

自首个网站在20世纪90年代初诞生以来，设计师们开始尝试各种网页的视觉效果。早期的网页完全由文本构成，只有一些小图片和布局零散的标题与段落。随着时代的发展，表格布局走入大众的视线，接着出现了Flash，最后才是如今基于CSS的网页设计。一、第一张网页

1991年8月，Tim Berners-Lee发布了首个网站，只包含了几个链接，且仅基于文本，结构极其简单。这个网站的原始网页的副本至今还在线，共有十几个链接，仿佛是在向人们传递着什么才是万维网。如图1-2所示。二、基于表格的网页设计

表格布局的使用让网页设计师制作网站时有了更大的选择空间。在HTML中，表格标签可以实现数据的有序排列，于是设计师们便充分利用这一优势构造他们设计的网页，让他们手上的“杰作”更加丰富精彩、引人注目。表格布局就这样流行了起来，再加上背景图片切片技术的配合参与，网页的整体结构变得充实而不繁冗，简洁而不单调，如图1-3所示。图1-2 第1张网页图1-3 第1批应用表格布局设计的网页W3C（1998）三、基于Flash的网页设计

Flash开发于1996年，起初只有非常基本的工具与时间线，现在已经发展成能提供开发整套网站功能的强大工具。早期的HTML要实现复杂的设计，往往需要大量的表格结构和图像占位符。而Flash则能够实现快速地创建复杂、互动性强并且拥有动画元素的网站，并且Flash的影片体积小巧，在线应用的可行性更强，如图1-4所示。四、基于CSS的网页设计

21世纪初，CSS设计开始受到关注。与表格布局以及Flash网页相比，CSS能将网页的内容与样式相分离，从而实现了表格与结构的分离，也就是现在网页设计的Web标准，如图1-5所示。它具有以下优点。

具有更少的代码和组件，更容易维护。

更便于搜索引擎的搜寻。

改版方便，不需要变动页面内容。

带宽要求降低，成本降低。

文件下载与页面显示速度更快。

能兼容更多的访问设备（包括手持设备、打印机等）。

用户能够通过样式选择个性化定制表现界面。图1-4 Flash网站全站图1-5 DIV+CSS布局的网页1.1.2 网页的基本概念

在网页设计过程中，经常会碰到一些相关的概念，如网站、网页、主页、静态网页、动态网页和超链接等。这些概念对于制作网页来说是非常重要的，所以用户需要了解和熟悉它们的概念和用途。一、网站

网站是一个存放在网络服务器上的完整信息的集合体。它包含一个或多个网页，这些网页以一定的形式连接成一个整体，如图1-6所示。此外，网站还包含网页中的相关素材，如图片、动画等。一个网站通常由许多网页集合而成。图1-6 清华大学的网站二、网页

简单地说，用户通过浏览器看到的任何一个画面都是网页，网页从本质上讲是一个HTML文件，而浏览器正是用来解读这种文件的工具。网页里面可以有文字、表格、图片、声音、视频和动画等，如图1-7所示。三、主页

主页也可以称之为首页。它既是一个单独的网页，又是一个特殊的网页，作为整个网站的起始点和汇总点，是浏览者浏览某个网站的入口，如图1-8所示。图1-7 一个简单的网页图1-8 老虎工作室网站的主页四、静态网页

所谓的静态网页，是指该用户不论从何时何地浏览网页，该网页所呈现的画面和内容都是不变的，这类网页仅供浏览，不能传达信息给网站以让网站做出响应。如果需要更改网页内容就必须修改源代码然后再上传到服务器上，如图1-9所示。五、动态网页

所谓动态网页，是指网页能够按照用户的操作做出动态响应，如网页上常见的留言板、论坛等。动态网页能根据不同时间访问的来访者显示不同的内容。动态网站的更新十分方便，一般在后台可以直接更新，如图1-10所示。图1-9 静态网页图1-10 动态网页六、超链接

所谓的超链接，是指从一个网页指向一个目标的连接关系，该目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一幅图片、一个电子邮件地址、一个文件，甚至是一个应用程序。而在网页中充当超链接的对象可以是一段文本或是一幅图片。各个网页链接在一起就构成一个网站。当浏览者单击已经创建链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。超链接效果如图1-11所示图1-11 超链接效果1.1.3 网页设计的基本流程

制作网页是一个比较复杂的过程，一个完整的网页的制作过程有以下几个阶段。一、分析阶段

分析阶段是指根据用户或设计者的需要来确定Web站点的目标和类别。在设计之前要确定网站的类别，例如，有的网站设计是为了更好地宣传公司以提高公司的形象，有的是为了树立政府部门的形象，还有的是为了体现私人个性化。不同类型网站的要求、颜色等都不一样，如图 1-12 所示。在设计网页时，要针对不同的类别明确网站制作的定位方向，设计出适合自己需要的站点。图1-12 不同类型的网页二、设计阶段

设计阶段是指根据站点的目标整理出站点的内容框架以及逻辑结构图。目标确定后，先把目标细化，并初步收集整理出站点目标所需要包含的内容，形成站点设计的需求纲要，然后画出站点的结构图。图1-13所示为个人网站功能结构简图。图1-13 网站功能结构图三、实现阶段

实现阶段是指使用网页制作工具完成页面的制作。在网页的制作过程中会使用到许多工具，如Dreamweaver、Fireworks、Flash、Photoshop、imageready等。图1-14所示为使用Dreamweaver CC进行界面布局的效果。图1-14 使用Dreamweaver进行界面布局四、测试阶段

测试阶段是指使用浏览器测试网页的效果和正确性。网页制作完毕后，需要在浏览器中进行网页测试，看看制作的网页效果如何以及是否能在浏览器中正确显示，如图 1-15所示。图1-15 测试阶段五、维护阶段

维护阶段是指把经过测试后准确无误的网页上传并发布到Internet上。为了让网页吸引更多浏览者的眼球，网页需要时常更新的，还要对其进行定期的维护和修改。1.2 认识HTML语言

HTML是Hyper Text Mark-up Language的缩写，即超文本标记语言，是一个纯文本文件，用户可以采用任何一个文本编辑器进行编写，然后通过浏览器解释执行。网页上的文字、图像和动画都是通过HTML语言表现出来的。HTML文件的扩展名是.html或.htm。1.2.1 HTML的基本概念

一般的HTML由标签（Tags）、代码（Codes）和注释（Comments）组成。HTML标签的基本格式如下。

<标签>页面内容一、HTML文档特征

HTML文档具有以下基本特征。

(1) 标签都用“<”和“>”框起来。

(2) 标签一般情况下是成对出现的，结束标签比起始标签多一个“/”。如“”和“”，第一个叫开始标签，第二个叫结束标签。

(3) 标签可以嵌套，但是先后顺序必须保持一致。例如： 这是我的第一个网页。

二、HTML文档格式

一个完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些对象统称为HTML 元素。HTML中使用标签来分割并且描述这些元素，HTML文件就是由各种HTML标签和元素组成的。 /*文件开始*/ /*标头区开始*/ /*标题区*/ /*标头区结束*/ /*正方区开始*/

我的第一个网页

通常，一份HTML网页文件包含两个部分：... 标头区，是用来记录文件基本信息的，如作者、编写时间；...本文区，即文件资料，指在浏览器上看到的网站内容。而和 则代表网页文件格式。

运行记事本并将上述代码复制到记事本中，如图 1-16 所示，然后将其保存为名为“index.html”的HTML文件，在浏览器中打开的效果如图1-17所示。图1-16 用记事本电脑编写代码图1-17 用HTML语言编写的网页1.2.2 常用HTML的标签

HTML语言中涉及的标签种类之多。下面重点介绍几个常用标签，便于让读者能快速入门HTML。一、文本

在HTML中，文本标签为，与之对应常用的属性有 color（定义字体的颜色）、size（定义文字的大小）和face（定义文字的字体）等，使用方法如下。 字体颜色为：红色；文字大小为：5； 字体为：宋体

上述代码在IE中预览的效果如图1-18所示。二、标题

标题标签可以区分文章段落，使页面呈现出丰富的层次感。标题标签有6个级别，从

到

。

为一级标题，

为六级标题，强调方式依次减弱，使用方法如下。

1级标题

2级标题

3级标题

4级标题

5级标题

6级标题

上述代码在IE中预览的效果如图1-19所示。图1-18 文本标签的使用案例图1-19 标题标签的使用案例三、图像

在HTML中，图像是由标签定义的，用于插入图像。常用的属性有src（定义图像所在的地点和文档名称）、alt（设置替换文本）、aling（设置对齐方式）、width（定义图像的宽）和height（定义图像的高）等。

上述代码在IE中预览的效果如图1-20所示。四、链接

链接是非常重要的标签,在HTML中锚标签用来定义链接。常用的属性有target（定义打开链接地址的方式）、href（定义链接到的地址）等。 空链接的文字

上述代码在IE中预览的效果如图1-21所示。图1-20 图像标签的使用案例图1-21 链接标签的使用案例五、表格

在HTML中，

上述代码在IE中预览的效果如图1-22所示。图1-22 表格标签的使用案例1.2.3 典型实例──设计“滚动图片展示”网页

为了巩固HTML的相关知识和标签，熟练掌握HTML语言的操作方法。下面将以设计“滚动图片展示”网页为例进行讲解，设计效果如图1-23所示。图1-23 设计“滚动图片展示”网页

1.导入图像。

(1) 运行 Dreamweaver CC，打开附盘文件“素材\第1章\滚动图片展示\marquee.html”，如图1-24所示。图1-24 打开素材文件

(2) 在文档工具栏中单击按钮，切换至【代码】面板，如图1-25所示。图1-25 切换至【代码】面板

(3) 在第35行代码中的“”代码中添加代码“background="images/banner.jpg"width="721" height="264" border="0"”，如图1-26所示。图1-26 添加背景图像代码

(4) 在文档工具栏中单击按钮，切换至【设计】面板，在网页中间部分的单元格中已经添加了一张背景图像，如图1-27所示。图1-27 添加的背景图像

(5) 切换至【代码】面板，在刚才添加的代码后面添加代码“”，如图1-28所示。图1-28 添加图像代码

(6) 切换至【设计】面板，添加的图像如图1-29所示。图1-29 添加的图像

2.设计滚动效果。

(1) 切换至【代码】面板，在第35行的“”，如图1-30所示。

试读结束[说明：试读内容隐藏了图片]

下载完整电子书