作者：朱兵编著
出版社：数字艺术出版分社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
中文版DreamweaverCS6高手之道试读：
前言
Dreamweaver CS6是Adobe公司在2012年发布的最新版本的专业网页编辑软件，其目的旨在为广大用户提供开发和维护网站的应用程序。最新版本的Dreamweaver CS6在软件的界观和性能上都进行了较大的改进，新增了许多实用功能，增强了软件的可操作性，优化了部分工具和菜单，有助于不同层次的用户熟练地进行操作。
本书是初学者全面自学Dreamweaver CS6的经典都程。全书从实用角度出发，全面、系统地讲解了Dreamweaver CS6中所有的知识点和功能。在介绍知识点和功能的同时，还精心安排了165个具有针对性的操作练习，帮助读者轻松的掌握Dreamweaver CS6的相关操作以及制作网站的方法和技巧，从而学用结合，除此之外，全部操作练习都配有教学视频，详细演示了案例操作过程。本书的结构与内容
本书采用知识点与操作案例相结合的形式，由浅入深的方式向读者讲解了Dreamweaver CS6各方面的知识。全书共分为18章，分别介绍了Dreamweaver CS6轻松入门、创建和管理网站站点、认识XHTML与HTML5、创建与编辑网页基本元素、使用CSS样式控制网页元素、理解Div+CSS布局、使用多媒体丰富网页效果、创建网页链接、在网页中插入表单元素、为网页添加行为和JavaScript特效、表格与AP Div的应用、使用Spry创建网页常见效果、使用框架布局网页、使用模板和库创建网页、动态网站基础、动态数据的创建与使用、网站的发布与上传、商业网站实战。在本书的附录部分还提供了HTML常用标签、CSS常用属性、JavaScript语法手册和常用网页配色，方便读者快速查找和应用。本书版面结构说明
为了达到使读者轻松自学和深入了解软件功能的目的，本书设计了“实战”、“提示”、“技术看板”、“相关链接”等项目，简要介绍如下。其他说明
本书主要由李晓斌编写，此外参与编写工作的还有余精金、单子婵、冯红娟、扬琪、王俊萍、冯海、林学远、衣波、毛颖、张伟、杜秋磊、高杰、郭莉、何经纬、董亮、金昊、李政、刘刚、卢斌、林秋、张晓景、朱兵、胡卫军、宋玉洁、黄爱娟、雷喜、刘明明、孙艳波、王靖文等。由于水平有限，书中难免有纰漏之处，希望广大读者批评指正。第1章Dreamweaver CS6 轻松入门1.1 网页设计概论
随着科技的发展，互联网日益成熟，越来越多的人开始制作网页。制作精美的网页不仅要掌握制作网页的一些基本概念和原则，还要熟练的操作软件，本节主要介绍网页设计制作的基本知识。1.1.1 网页与网站
网页通过互联网展示，一般包括图像和文本信息，稍微复杂的还包括声音、视频等多媒体信息。当浏览者输入一个网址或者点击某个链接，在浏览器中能看到文字、图像、动画、视频等内容，能够承载这些内容的页面称之为网页。
浏览者进入某个网站首先看到的网页，称之为“主页（Homepage）”，也称为“首页”。首页承载了一个网站的所有主要内容，浏览者可以按照首页中的分类快速地找到自己想要的内容。图1-1所示为游戏网站的首页面。图1-1
网站则是各种内容网页的集合，目前主要有门户类网站和公司网站两种。门户类的网站内容比较庞大、复杂（例如新浪、网易、搜狐等）。公司网站一般只有几个页面，但都是由最基本的网页元素组合在一起的。1.1.2 网页基本要素
不同网页的形式和内容各不相同，但是组成网页的要素大体相同（例如文本、图像、超链接、动画、表单、音频、视频等），下面讲解这些要素的基本含义。
● 文本和图像：构成网页的最基本要素，目前在所有网页中都存在。
● 超链接：网页中的链接包含文字链接和图像链接，只要访问者用鼠标单击带有链接的图像或文字，就可以自动链接到相对应的文件。
● 动画：动画使网页更加生动和丰富，网页中的动画可以分为GIF动画和Flash动画。
● 表单：可以在访问者和服务器之间进行信息交互的一种技术，使用表单可以完成搜索、登录、发送邮件等交互功能。
● 音频和视频：音频和视频的加入不仅反映了网络技术的日益成熟，还让网页更加富有个性、时尚和魅力。
网页由网址来识别和存取，当浏览者输入网址进入网站后，可以看到丰富多彩的网页，如图1-2所示。图1-21.1.3 网页的类型
不同的网页文件后缀也不相同，一般包含CGI、ASP、PHP、JSP、VRML等。一般的网页，都是以htm或html后缀结尾的文件，即HTML文件，下面对各种类型的网页文件进行简单的讲解。
● CGI：CGI是一种编程标准，规定Web服务器用其他可执行程序的接口协议标准。CGI程序通过读取使用者的输入请求产生HTML网页，可以用任何程序设计语言编写。
● ASP：ASP是一种应用程序环境，主要用于网络数据库的查询和管理。其工作原理是当浏览者发出浏览请求时，服务器会自动将ASP的程序代码解释为标准的HTML格式的网页内容，并在发送到浏览者的浏览器上显示出来，也可以把ASP理解为一种特殊的CGI。
● PHP：PHP是一种HTML内嵌式的语言，PHP与ASP相似，都是在服务器端执行嵌入HTML文档的脚本语言，风格类似于C语言。PHP语法混合了C、Java、Perl以及PHP自创的语法，可以比CGI或者Perl更快速地执行动态网页。PHP在大多数Unix平台（GUN/Linux）和微软Windows平台上均可运行。
● JSP：JSP是一种动态网页技术标准，与ASP非常相似。不同之处在于ASP的编程语言是VBScript等脚本语言，而JSP使用的是Java语言。此外，ASP和JSP还有一个更为本质的区别，两种语言引擎用完全不同的方式处理页面中嵌入的程序代码。在ASP下，VBScript代码被ASP引擎解释执行；在JSP下，代码被翻译成Servlet并由Java虚拟机执行。
● VRML：VRML是虚拟实境描述模型语言，是描述三维的物体及其连接的网页格式。利用经典的三维动画制作软件3ds Max可以简单而快速的制作出VRML。1.2 网页设计的构成要素
一个优秀的网站页面不仅需要漂亮的图片，还需要传递有价值的信息，另外，随着动态网页的兴起，声音、动画、视频等多媒体元素在网页布局中也非常重要，它使网页更加丰富多彩，更具有时尚魅力。1.2.1 文字元素
在千姿百态的网页中，文字起到了至关重要的作用，是传递信息的重要载体。既然文字是根本，为什么还需要用图形方式来表示呢？首先，对文字进行简单的字体、字号、颜色以及粗细等形式变化满足不了图像设计的需要；其次，网页的访问者需要使用计算机系统中的字体来显示网页中的字体，但不能保证每个浏览者的计算机内都安装与网页中相同的字体，因此需要以图形的方式来显示文字。下面详细讲解文字的主要元素。
1.文字的字体…
网页中存在各种字体，给人的感觉各不相同，宋体字横细竖粗，字形工整，结构均匀，隽永悦目，可用于正文、标题等。黑体字横竖一样粗细，笔法自然，工整肃穆，庄重严谨，字体浑厚，一般可用于标题。圆体字笔法圆润，艺术性强，一般可以根据需要用于正文、装饰等。不同的字体传达不同的印象，如图1-3所示。图1-3
2.文字的字号…
字体的大小控制着整个页面的布局和形象，如图1-4所示。一成不变的字体大小给人以死板的感觉；略大的文字给人有力、自信的感觉；略小的字体给人纤密、紧凑的感觉。根据页面的需要变化字体的大小可以使页面变得更加活跃、生动。一般标题略大于正文，这样更能突出标题的醒目性。图1-4
3.文字的粗细…
细长的文字显得优雅美丽，粗的字体显得浑厚有力量。在视觉联想上，细字冷静、粗字热情，看到比较细的字体的标题，会想到页面的纤细和优雅，倾向于女性风格；粗而明快的标题给人精力充沛的感觉，更倾向于男性。正文中尽量不要大幅度的调整文字的粗细，否则可能会造成可读性的降低，如图1-5所示。图1-5
4.文字的行距…
文字的行距是具是有很强表现力的设计语言，为了加强版式的装饰效果，可以加宽或缩短行距，从而体现独特的审美意趣。加宽行距可以体现轻松、舒展的情绪，适用于娱乐性、抒情性的内容。页面中宽窄行距的并存更能体现设计者的独具匠心和别具一格，如图1-6所示。图1-6
5.文字的图形化
为了更好地达到页面的效果，可以把文字作为图形元素来表现。作为网页设计者，既可以按照常规的方式来设置字体，也可以用艺术化的方式对文字精心设计，达到页面的完美效果。
合理的将文字和设计图结合起来是网页图像设计中不可忽视的环节。设计合理的文本图像可以与网页中的其他元素相得益彰，使得整个网页更有吸引力，如图1-7所示。图1-71.2.2 图形元素
图形的表现方式和手法多种多样，可以通过夸张、变形的手法来显示出强烈的个性，吸引人们的眼球，使中心思想和外在形式浑然一体。
强烈的视觉效果说服力最强，个性十足的插图保证网页的品位，使网页更加显眼，更有影响力，如图1-8所示。图1-8
插图以人物为主题，给人以亲切、可爱的感觉，使用人物夸张的表情和动作，可以使页面更加生动活泼，如图1-9所示。图1-9
动物作为卡通形象的历史相当的久远，将动物拟人化，体现出设计者在创作动物形象时的创造性，使用人们熟悉和喜爱的动物更容易得到认同，如图1-10所示。图1-101.2.3 图像元素
图像元素一般是指通过摄影获得照片，是网页中不可或缺的一部分，可以真实、直观地反映信息，可以用来直接说明事物的特征，事件的场景和情节，可以很好地渲染某种气氛，如图1-11所示。图1-11
图片是表达信息的重要手段，有两种手段可以提高网页的说服力和感染力，一是增强故事性（指插图的信息性）；二是提高造型的紧张感。这样即使网页不运用强烈的色彩也能增强说服力，即使是静止的画面也能让人印象深刻，如图1-12所示。
图像在页面中占据的大小和位置直接显示其重要程度。一般来说，大图像容易形成视觉焦点，感染力强；小图像显得简洁和精致，常用来穿插在文字段中，有呼应页面主题的作用。不管是大图像还是小图像，都要清清楚楚，相互协调，如果在网页中出现了有缺陷的图像，就会造成主页整体信息感的缺失，如图1-13所示。图1-12图1-13
图像的大小不仅决定着内容的主次关系，也控制整个页面的均衡感和运动感。图像的大小对比强烈，页面比较活跃，反之，则页面稳定、安静。在设计网页时应根据网页的主题来决定主要图像的面积，将次要角色退居到从属地位，如图1-14所示。图1-141.2.4 多媒体元素的应用
网页中的多媒体元素包括声音、动画、视频等元素，它们的存在使页面变得更加富有活力，给人们更多视觉上的享受，下面主要讲解动画元素。
动画元素是网页中最活跃的元素，一些设计者喜欢使用动画来传递信息，动画对访问者的吸引力通常大于纯文本，但是现在的网页动画太多，使人眼花缭乱，访问者无心细看，如图1-15所示，这就违背了设计者的初衷，所以使得网页动画的制作要求越来越高。动画的制作手段有很多，目前最常见的网页动画格式有Flash、GIF等。图1-15
在网页中加入动画应该注意以下几个原则。第一，充分的考虑网络传输情况，合理控制动画文件的大小，避免出现加载时间过长，浏览者失去耐心的情况；第二，动画表现的主题应该贴合网页的主要内容；第三，尽量不要使用色彩过于艳丽、变化过于强烈的动画，否则容易干扰访问者对页面中信息的获取。
网页中的多媒体元素多种多样，必须合理地运用，才能使页面更有活力和富有吸引力，如图1-16所示。图1-161.2.5 色彩的搭配
生活中的色彩总是千变万化，而网页中的色彩也是丰富多彩，色彩可以在不知不觉间影响人的心理，左右人的情绪，所以色彩搭配在网页设计中相当重要。
色彩取用时更多的是靠个人感觉和经验，也包括一些视觉上的因素，下面详细讲解色彩搭配应该注意哪些要素。
1.整体色调统一
整体色调统一才能给人舒服、享受的感觉。控制好构成整体色调的色相、明度、纯度关系和面积关系等，才能控制好整体色调。要在配色中确定在页面中占据大部分面积的主色调颜色，并根据这一颜色选择不同的配色方案，然后从中选择最适合的。如果用暖色系做整体色调，会给人呈现温暖、温馨的感觉。用暖色和纯度较高的色彩作为整体色调，会给人呈现火热、刺激的感觉；以冷色和纯度较低的色彩作为整体色调，给人冷清、平静的感觉；以明度高的色彩作为整体色调，给人以亮丽、轻快、活泼之感；以明度低的色彩作为整体色彩则给人庄重、肃穆之感；以色相和明度对比强烈的颜色作为主色调，会显得活泼；取类似或统一色系的色调，会显得文静。色调中色相多则显得华丽，色相少则显得淡雅、清新，如图1-17所示。图1-17
整体的色调可以根据网页的主题内容以及设计者的个人感觉和经验来进行选取。
2.配色的平衡…
配色的平衡就是颜色的强弱、轻重、浓淡这几种关系的平衡。一般来说，同类色配色比较平衡，而处于补色关系且明度相似的颜色配色不平衡（例如红和蓝、绿的配色，会因为过分强烈而感到刺眼，成为不调和色调），但如果把一个色彩的面积缩小，加白色、黑色调和，或者改变其明度和色彩度，则可以使这种不调和色变的调和，取得平衡，如图1-18所示。
纯度高且强烈的色彩与同样明度的浊色或灰色配合时，如果前者的面积小，后者的面积大，可以很容易取得平衡。将明色和暗色上下配置时，如果明色在上暗色在下，页面显得安定；反之，页面会有一种动感，如图1-19所示。图1-18图1-19
3.配色时要有重点色…………………………
配色时，页面中需要一个重点色，从而使整体配色平衡。在整体配色关系不明确时，需要突出一个重点色来平衡配色关系。需要注意，选取重点色应该使用比其他的色调更强烈的颜色；应该选择与整体色调相对比的调和色；应该用于极小的面积上，不能大面积的使用；选择重点色必须慎重考虑配色方面的平衡效果，如图1-20所示。图1-20
4.配色的节奏…
配色的节奏和颜色的排放、形状、质感等因素有关。由于逐渐改变色相、明度、纯度会使配色产生有规则的变化，所以产生阶梯的节奏。将色相、明暗、强弱等变化反复应用，则产生反复的节奏，通过色彩赋予网页跳跃和方向感，产生动的节奏等，如图1-21所示。图1-21
5.渐变色的调和
当出现两个或两个以上颜色不调和时，在其中插入几个阶段变化的渐变色，就可以使之调和，一般有下面几种渐变形式。
● 色环的渐变：色环的渐变与色相一样，在红、黄、绿、蓝、紫等色相之间配以中间色，就可以得到渐变的效果。
● 明度的渐变：从明色到暗色的阶梯变化。
● 纯度的渐变：从纯色到浊色或黑色的阶梯变化。根据色相、明度、纯度组合的渐变，把各种各样的变化作为渐变处理，从而构成复杂的效果。这些渐变色都是调和的，如图1-22所示。图1-22
6.在配色方面的分割…………………………
两个颜色如果相互处于对立关系，具有过分强烈的对比效果，就会成为不调和色。为了调节它们，可以用其他的颜色把它们划分开来，这就是分割。用于分割的颜色不多，最常用的是黑、白、灰3色。金色和银色也具有分割的效果，但在计算机中很难调出这两种质感的颜色。使用其他色彩进行分割也是可以的，但是分割色的明度要与原来颜色的明度有明显的区别，同时还要考虑分割色的色相和纯度，如图1-23所示。图1-231.2.6 网页版式设计
网页版式设计在网页的艺术设计中占据着重要的地位，与报刊杂志等平面版式设计有很多相通之处。网页版式设计是指在有限的屏幕空间上将各种视听元素进行有机的排列组合，将理性思维以个性化的形式表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，还产生感官上的美感和精神上的享受，如图1-24所示。图1-24
网页版式与其他报刊杂志也有一些差异，印刷品有固定的规格尺寸而网页中的排版尺寸是不固定的，如图1-25所示。这就是设计者不能精确地控制页面上元素的尺寸和位置的原因，而且网页的组织结构不像印刷品那样为线性组合，使网页设计者在版式设计上有一定的困难。图1-251.3 安装Dreamweaver CS6简介
Dreamweaver CS6是Adobe公司用于网站设计与开发的业界领先工具的最新版本，在软件的界面和性能上有了很大的改进，使用该工具能够使用户高效地设计、开发以及维护基于标准的网站和应用程序。它还提供了强大的可视化布局工具、应用开发功能和代码编辑支持。1.3.1 Dreamweaver CS6 简介
Dreamweaver CS6是一款由Adobe公司大力开发的专业HTML编辑器，用于对Web站点、Web页面和Web应用程序的设计、编码和开发。通过Dreamweaver CS6中的可视化编辑功能，用户可以快速创建页面而无需编写任何代码。它不仅增强专业人士的基本工具和可视技术，还为网页设计用户提供了功能强大的、开放的、基于标准的开发模式。正是如此，DreamweaverCS6长期占据网页设计专业开发领域行业标准级解决方案的领先地位。图1-26所示为Dreamweaver CS6的启动画面。图1-26
与其他的网页设计制作软件相比，DreamweaverCS6具有以下特点：
1.Dreamweaver CS6支持多种服务器端开发语言。
2.Dreamweaver CS6提供了强大编码功能。
3.Dreamweaver CS6提供了更加全面的CSS渲染和设计支持，用户可以构建符合最新CSS标准的站点。
4.Dreamweaver CS6提供了强大的可视化布局工具。
5.Dreamweaver CS6可以更好地与Adobe公司的其他设计软件集成，如Flash CS6、Photoshop CS6和Fireworks CS6等，以方便对网页动画和图像的操作。1.3.2 Dreamweaver CS6的系统要求
Dreamweaver CS6可以在Windows系统中运行，也可以在苹果机中运行。Dreamweaver CS6在Windows系统中运行的系统要求如下。
● CPU：Intel Pentium4或AMD Athlon 64处理器。
● 操作系统：Microsoft Windows XP（带有ServicePack2，推荐Service Pack3）；Windows Vista HomePremium、Business、Ultimate或Enterprise （带有Service Pack1）；Windows 7。
● 内存：512MB内存，推荐使用1GB以上内存。
● 硬盘空间：1GB可用硬盘空间用于安装，安装过程中需要额外的可用空间（无法安装在可移动闪存设备上）。
● 显示器：16位显卡，1280×800的显示分辨率。
● 光盘驱动器：DVD-ROM驱动器。
● 产品激活：在线服务需要宽带Internet连接。1.3.3 实战——安装Dreamweaver CS6
●实例门类：安装Dreamweaver CS6中文版
●视频位置：光盘>视频>第1章>1-3-3.swf
在了解Dreamweaver CS6的系统要求后，接下来将在Windows 7系统中安装Dreamweaver CS6中文版。
01 将Dreamweaver CS6安装光盘放入DVD光驱中，稍等片刻，自动进入初始化安装程序界面，如图1-27所示。初始化完成后会自动进入欢迎界面，可以选择安装或试用，如图1-28所示。
02 单击“安装”按钮，进入Dreamweaver CS6 软件许可协议界面，如图1-29所示。单击“接受”按钮，进入序列号界面，如图1-30所示，输入序列号，单击“下一步”按钮。图1-27
试读结束[说明：试读内容隐藏了图片]