作者：孙膺等
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Dreamweaver CC网页设计与制作标准教程(不提供光盘内容)试读：
前言
虽然静态页面已经成为非主流网页，但网页的前台美工还需要通过静态页面来查看网页的布局效果。因此，在学习网站开发之前，用户还是要对静态网页有所了解。并且，作为前台开发人员，静态网页设计也是其必修课之一。
在静态网页开发过程中，选择优秀的开发工具，可以起到事半功倍的效果。比较流行的Dreamweaver软件，就是一个不错的网页开发工具。在最新的Dreamweaver CC版本中，增强了CSS样式的可视化操作，还包含了jQuery UI和jQuery Mobile网页的设计与开发等功能。本书主要内容
本书通过大量的实例全面介绍了网页设计与制作过程中使用的各种专业技术，以及用户可能遇到的各种问题。全书共分为11章，各章的内容概括如下：
第1章Dreamweaver CC快速入门，包括了解网站与网页、网站的设计及制作、网页的概念、了解Dreamweaver CC、Dreamweaver工作区、了解文档视图、【编码】工具栏、创建网页文档、网页的构成等内容。
第2章介绍了创建与管理站点，包括了解站点及站点结构、创建本地站点、使用【文件】面板、站点文件及文件夹、远程文件操作等内容。
第3章介绍了编辑网页元素，包括编辑文本、项目列表设置、添加网页结构、格式化文本等内容。
第4章介绍了图像与多媒体，包括插入图像、编辑图像、图像对象操作、插入多媒体等内容。
第5章介绍了创建超链接，包括链接与路径、创建超链接、添加热链接、特殊链接等内容。
第6章介绍了表格化网页布局，包括插入表格、在单元格中添加内容、设置表格属性、表格的基本操作等内容。
第7章介绍了CSS样式表，包括Div标签应用、CSS样式表基础、创建样式表、CSS语法与选择器等内容。
第8章介绍了网页模板与框架，包括创建框架页、编辑框架属性、模板网页等内容。
第9章介绍了在网页中插入表单，包括表单概述、添加表单、文本组件、网页元素、日期与时间元素、选择元素、按钮元素、其他元素等内容。
第10章介绍了jQuery与jQuery UI，包括了解jQuery与jQuery UI、jQuery基础、jQuery UI交互、jQuery UI效果等内容。
第11章介绍了jQuery Mobile，包括了解jQuery Mobile、页面基础、对话框与页面样式、创建工具栏、创建网页按钮、添加表单元素等内容。本书特色
本书结合办公用户的需求，详细介绍了网页设计与网站制作的应用知识，具有以下特色。
丰富实例 本书每章以实例形式演示网页设计与网站制作的操作应用知识，便于读者模仿学习操作，同时方便教师组织授课。
彩色插图 本书提供了大量精美的实例，在彩色插图中读者可以感受逼真的实例效果，从而迅速掌握网页设计与网站制作的操作知识。
思考与练习 扩展练习测试读者对本章所介绍内容的掌握程度；上机练习理论结合实际，引导学生提高上机操作能力。
配书光盘 本书作者精心制作了功能完善的配书光盘。在光盘中完整地提供了本书实例效果和大量全程配音视频文件，便于读者学习使用。适合读者对象
本书定位于各大中专院校、职业院校和各类培训学校讲授网页设计与网站制作的教材。内容详尽，讲解清晰，全书知识体系完善，采用与实际范例相结合的方式进行讲解，并配以清晰、简洁的图文排版方式，使学习过程变得更加轻松和易于上手。
参与本书编写的除了封面署名人员外，还有刘凌霞、王海峰、张瑞萍、吴东伟、王健、倪宝童、温玲娟、石玉慧、李志国、唐有明、王咏梅、李乃文、陶丽、王黎、连彩霞、毕小君、王兰兰、牛红惠、汤莉孙岩等人。由于时间仓促，水平有限，疏漏之处在所难免，欢迎读者朋友登录清华大学出版社的网站www.tup.com.cn与我们联系，帮助本书的改进和提高。编 者2014.10第1章Dreamweaver CC快速入门
Dreamweaver已经成为业界最流行的静态网页制作与网站开发工具，其不仅支持“所见即所得”的设计方式，同时还辅以强大的程序开发功能，可以帮助不同层次的用户快速设计网页。
本章帮助用户快速了解Dreamweaver CC版本的新增功能，以及Dreamweaver的工作环境和网站建设等相关内容。本章学习要点：了解网站与网页网站的设计及制作网页的概念了解Dreamweaver CCDreamweaver工作区了解文档视图了解【编码】工具栏创建网页文档网页的构成1.1 了解网站与网页
翱翔在Internet中，会经常听到网站、网页等一些非常陌生的概念。而这些概念在网页制作过程中，也是需要用户理解的。1.1.1 认识网页
网页（Web Page）是一个文件，它存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，是万维网中的一个“页”面，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页要通过网页浏览器来阅读，如图1-1所示。图1-1 网页页面
文字与图片是构成一个网页的两个最基本的元素。可以简单地理解为：文字，就是网页的内容，图片就是网页的美观。除此之外，网页的元素还包括其他内容，常见的网页元素如下。
文本 文本是网页上最重要的信息载体与交流工具，网页中的主要信息一般都以文本形式为主。
图像 图像元素在网页中具有提供信息并展示直观形象的作用。其中，静态图像在页面中可能是光栅图形或矢量图形，如JPEG或PNG。而矢量格式通常包含有GIF和SVG动画。
Flash动画 动画在网页中的作用是有效地吸引访问者更多的注意。
声音 声音是多媒体和视频网页重要的组成部分。
视频 视频文件的采用使网页效果更加精彩且富有动感。
表格 表格是在网页中用来控制页面信息的布局方式。
导航栏 导航栏在网页中是一组超链接，其链接的目的端是网页中重要的页面。
交互式表单 表单在网页中通常用来联系数据库并接收访问用户在浏览器端输入的数据。利用服务器的数据库为客户端与服务器端提供更多的互动。
在网页上右击，执行【查看源文件】命令，即可通过记事本看到网页的实际内容。可以看到，网页实际上只是一个纯文本文件，如图1-2所示。它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，于是就得到你现在所看到的画面。图1-2 查看源码
为什么在源文件看不到任何图片？这是由于网页文件中存放的只是图片的链接位置，而图片文件与网页文件是互相独立存放的，甚至可以不在同一台计算机上。1.1.2 认识网站
网站（Website）是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。
简单地说，网站是一种通信工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网络服务（网路服务）。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。
网站是由多个网页组成的，但不是网页的简单罗列组合，而是用超链接方式组成的既有鲜明风格又有完善内容的有机整体。要想制作出一个好的网站，除了必须了解网站建设的一些基本知识，还需了解网页页面的布局、使用哪些代码语言、如何使用CSS、HTML、Flash、VBScript、JavaScript等，这些代码语言对网页进行布局、美化和制作特效非常重要。
1. 网站分类
在Internet中，可以说网站成为主要的组成部分，并且用户可以根据不同的用途或者领域来划分这些网站。
• 根据编程语言分类
在网页设计时，用户可以根据自己熟悉的编程语言来制作网站中的网页内容，如常用的网页编程语言有ASP、PHP、JSP、ASP.NET等。
• 根据用途分类
根据用途分类是针对行业而言的，可以分为门户网站（综合网站）、行业网站、娱乐网站、教育网站、学习类网站等。
• 根据功能分类
根据网站的功能，用户可以将网站划分为企业网站、商城网站、服务性网站、交易网站等。
• 根据持有者分类
根据网站拥有者或者持有者来划分，可以分为个人网站、商业网站、政府网站、教育网站等。
• 根据商业目的分类
在商业领域，有些网站主要是用来营利的，而有些网站是以宣传为主的非营利性的，所以可以分为营利性网站和非营利性网站等。
2. 网站制作工具
网站制作工具，也可说是网页的设计工具。因为网页是组成网站的重要组成部分，所以在网站建设中重要的是网页的设计与制作。
• Photoshop图像处理软件
Adobe Photoshop（PS）是一个由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效地进行图片编辑工作。
该软件在网页设计过程中是必不可少的，已经成为了网页前端美化设计必要的工具之一。
• Illustrator矢量图处理软件
Adobe Illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件，作为一款非常好的图片处理工具，Adobe Illustrator广泛应用于印刷出版、专业插画、多媒体图像处理和互联网页面的制作等，也可以为线稿提供较高的精度和控制，适合生产任何小型设计到大型的复杂项目。
Illustrator与Photoshop相比，在网页设计中应用较少，但对于美工而言该软件也是不可或缺的。因为在网页中一些Logo和标签图片等，都可以通过Illustrator来制作，并且效果比较好。
• Fireworks网页作图软件
Adobe Fireworks是Adobe推出的一款网页作图软件，软件可以加速Web设计与开发，是一款创建与优化Web图像和快速构建网站与Web界面原型的理想工具。
Fireworks不仅具备编辑矢量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库，并可与Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和Adobe Flash软件省时集成。
在Fireworks中将设计迅速转变为模型，或利用来自Illustrator、Photoshop和Flash的其他资源，然后直接置入Dreamweaver中轻松地进行开发与部署。
• Flash动画制作软件
Flash是一种将动画创作与应用程序开发于一身的创作软件。Adobe Flash为创建数字动画、交互式Web站点、桌面应用程序以及手机应用程序开发提供了功能全面的创作和编辑环境。
通常，使用Flash可以在网页设计中通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的网页元素。另外，用户还可以通过Flash软件，制作流媒体视频，在多媒体网页中也是一款应用较为广泛的软件。
• Dreamweaver网页编辑软件
Dreamweaver可以用快速的方式将Fireworks、FreeHand或Photoshop等文件移至网页上。使用【拾色吸管】工具选择屏幕上的颜色可设定最接近的网页安全色。它是用于编辑HTML、ASP、JSP、PHP、JavaScript等代码文件的重要辅助工具。
• WebStorm前端开发软件
WebStorm是JetBrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML 5编辑器”、“智能的JavaScript IDE”等。
WebStorm可编辑、调试HTML、CSS、JavaScript等代码，也可以作为可视化工具，监控网站系统的运行情况，受到网站开发工作者的青睐。1.2 网站的设计及制作
虽然对网站已经有了清晰的认识，但是网站建设过程并不像制作一个网页页面那样简单。因为网站由多个网页组成，是一个集合。如果该网站是公司的门户网站，则代表着公司的形象；如果是政府网站，则代表着该政府的形象。1.2.1 确定网站主题
网站的主题是一个网站的核心，创建网站前要先确定站点的主题，只有主题确定之后才会有目的地去寻找相关的资料，所以确定网站主题非常重要。
那么，什么是网站主题呢？例如，一个电子商务网站，则该商务网站面向商品销售，其主题自然是所要销售的商品；如果该电子商务网站是面向交易的，则该网站的主题是所要进行商品交易的用户，如图1-3所示。图1-3 网站主题1.2.2 搜集网站素材
搜集网站素材主要围绕网站主题进行搜集，主要是为满足各页面信息的需求。网站素材是指从现实生活中搜索到的、未经加工提炼的用来建设网站的资料。
在搜集过程中，素材可以包括公司或者单位的形象标志、所经营业务的信息、产品信息、发展史信息等，多数以图像和文字内容为主。1.2.3 确定网站布局
网站布局与绘画非常相似，就像一张白纸，需要先勾勒出网站中各页面的轮廓，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，只有在制作网页之前把这些方面都考虑到了，才能在制作时胸有成竹。
例如，在下面的“软件下载网”页面中，网站的主题颜色为“橙色”，布局为上、中、下结构，如图1-4所示。图1-4 软件下载网1.2.4 制作网页
网站是由许多不同的网页组成，而在开发网站时其核心就是设计不同的网页。在设计网页时，需要选择一些工具，如Dreamweaver就是设计网页很好的工具之一。除此之外，还有其他工具，以及一些设计网页的辅助工具。
素材整理好，工具也选好了，接下来就可以设计网页了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。例如，先确定网页的整体结构，并在该区域内再划分不同的区域进行设计；先简单后复杂是指先设计简单的内容，然后再设计复杂的内容，如图1-5所示。图1-5 网页制作过程1.2.5 发布网站信息
网页制作完毕，最后要发布到Web服务器上，才能够让其他网络用户浏览。简单地说，是将本地网站中的文件，放置到服务器指定的文件夹中。因此，如果服务器不是本地计算机，那么需要通过FTP将文件上传到远程服务器中。
网站上传以后，要在浏览器中打开自己的网站，逐页逐个链接地进行测试，发现问题及时修改，然后再上传测试。1.2.6 网站推广
网页做好之后，还要不断地进行宣传，这样才能让更多用户知道该网站，提高该网站的访问率和知名度。推广网站的方法有很多，如搜索引擎排名、网站之间交换链接、加入广告链接等，如图1-6所示。图1-6 网站推广1.2.7 后期更新与维护
网站是营销的一个重要手段，它是将企业或者单位推广出去的一种方法。尤其是商业化的网站，更需要经常性地进行更新。这样才能不断地吸引浏览者再次光临，使潜在的消费者变成客户，如果网站一成不变，是无法获得更多的商业机会的。例如，一个新闻网站，如果网站中的新闻无比陈旧，那么就无法吸引浏览者。1.3 网页的相关概念
术语是各学科、行业的专门用语。在网页设计中，经常要使用到术语。了解术语的含义，有助于同行业间的交流，也有助于用户对该专业的理解。网站的术语可以包含两部分，一部分为网络与网站相关的术语，另一部分是网站及网页设计中的相关术语。1.3.1 因特网
因特网（Internet）又叫做国际互联网。它是由那些使用公用语言互相通信的计算机连接而成的全球网络。一旦连接到它的任何一个节点上，就意味着用户的计算机已经连入Internet网上了。
我们知道，Internet是信息资源的大海洋，通过它可以获取各种各样的信息。那么，谁是这些信息的提供者呢？这就是网站。当不同类型的网站发布后，用户通过Internet浏览这些网站即可获取信息，如图1-7所示。图1-7 用户获取Internet资源1.3.2 万维网
万维网（World Wide Web，WWW、3W、Web或网络），是一个资料空间。在这个空间中，一样有用的事物称为一样“资源”；并且由一个全域“统一资源标识符”（URL）标识。这些资源通过超文本传输协议（Hypertext Transfer Protocol）传送给使用者，而后者通过单击链接来获得资源。
从另一个观点来看，万维网是一个通过网络存取的互联超文件（Interlinked Hypertext Document）系统。万维网联盟（World Wide Web Consortium，W3C），又称W3C理事会。
1994年10月在拥有“世界理工大学之最”称号的麻省理工学院（MIT），计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯·李。蒂姆·伯纳斯·李是万维网联盟的领导人，这个组织的作用是使计算机能够在万维网上不同形式的信息间更有效地储存和通信。
万维网常被当成因特网的同义词，但万维网与因特网有着本质的区别。因特网（Internet）指的是一个硬件的网络，全球的所有计算机通过网络连接后便形成了因特网。而万维网更倾向于一种浏览网页的功能。万维网的内核部分是由URL、HTTP和HTML三个标准构成。
万维网是一个基于超文本方式的信息检索服务工具。这种把全球范围内的信息组织在一起的超文本方法，不是采用自上而下的树状结构，也不是按图书资料管理中的编目结构，而是采用指针链接的超网状结构。所以检索数据时非常灵活，通过指针从一处信息资源迅速跳到本地或异地的另一信息资源。不仅如此，信息的重新组织也非常方便，包括随意增加数据或删除、归并已有数据。1.3.3 浏览器
浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件，如图1-8所示。图1-8 Internet Explorer浏览器
网页浏览器主要通过HTTP与网页服务器交互并获取网页，这些网页由URL指定，文件格式通常为HTML，并由MIME在HTTP中指明。
除了Internet Explorer浏览器之外，网页浏览器还包括Mozilla的Firefox、Apple的Safari、Opera、HotBrowser、Google的Chrome。浏览器是最常使用到的客户端程序。1.3.4 HTML
HTML是标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括头部分（head）、和主体部分（body），其中头部提供关于网页的信息，主体部分提供网页的具体内容。
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准。它通过标记符号来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，用户只能通过显示效果来分析出错原因和出错部位。
但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。1.3.5 电子邮件
电子邮件（Email，标志为@，也被大家昵称为“伊妹儿”），又称电子信箱、电子邮政。
在Internet上，电子邮件是使用最多的网络通信工具，Email已成为倍受欢迎的通信方式。可以通过Email系统同世界上任何地方的朋友交换电子邮件，如图1-9所示。图1-9 发送及接收电子邮件1.3.6 URL
URL（统一资源定位符）的作用是用于完整地描述Internet上的网页和其他资源，如图1-10所示。图1-10 URL地址
URL标识在Internet中是唯一的，一个URL标识只能表示一个网页或其他资源的位置。URL以统一的语法编写而成，其格式如下：“协议名”//“主机域名/IP地址”：“端口”/“目录”/“文件名”.“文件扩展名”#“锚记名称”1.3.7 域名
从技术上讲，域名只是一种Internet中用于解决IP地址对应问题的方法。它可以是Internet中的1个服务器或1个网络系统的名称。该名称是全世界唯一的，因此被称为网址，如图1-11所示。图1-11 IP和域名的对应关系
提示
在浏览网页时，网页上的文件、图片、动画等都需要一个URL地址。该地址代表网页对象所在网站空间中的相对位置。URL地址可以使用域名，也可以使用IP地址。1.3.8 IP地址
众所周知，在电话通信中，电话是靠电话号码来识别的，如图1-12所示。同样，在网络中为了区别不同的计算机，也需要给计算机指定一个号码，这个号码就是“IP地址”。图1-12 电话号码
Internet上的每台主机都有一个唯一的IP地址。网络之间的用户是通过IP协议和这个地址进行通信的，这是Internet能够运行的基础。IP地址的长度为32位，分为4段，每段8位，用十进制数字表示，如192.168.1.1，如图1-13所示。图1-13 机器分配的IP地址1.4 了解Dreamweaver CC
目前，Dreamweaver CC是最新版本，快速了解Dreamweaver的作用，以及开发环境的一些基础组成部分，对日后学习及工作非常有帮助。1.4.1 Dreamweaver概述
Dreamweaver主要包含两方面的功能，即设计网站前台页面和开发网站后台程序。在设计网站前台页面时，Dreamweaver允许用户通过“所见即所得”的界面操作方式添加和编辑网页中的各种元素；而在开发网站后台程序时，Dreamweaver除了允许用户以可视化的方式开发程序外，还提供了丰富的代码提示功能，帮助用户编写网站程序的代码。
Dreamweaver支持多种类型的语言。在标记语言方面，支持HTML 4.0、XHTML 1.0、XML和最新的HTML 5.0等标准化的结构语言。在编程语言方面，支持JavaScript、VBScript、C#、Visual Basic、ColdFusion、Java以及PHP等常用编程语言。除此之外，Dreamweaver还提供了CSS、ActionScript、EDML、WML等语言的支持，允许用户开发各种常见的Web应用。
Dreamweaver不仅是一种网页设计与网站开发软件，其还附带有资源管理功能，可将站点目录中的图像、视频、音频、色彩、链接和一些特殊的Dreamweaver对象集中管理，帮助用户快速建立索引、收藏以及应用到网页中。
使用Dreamweaver，用户既可以快速创建基于Web标准化的网页，也可以便捷地开发各种大型网站项目。1.4.2 Dreamweaver CC新增功能
虽然在Dreamweaver CS6版本中，已经具有自适应网格版面创建行业标准的HTML 5和CSS 3编码，以及增添jQuery移动功能用于支持手机和平板电脑建立项目。但是，在Dreamweaver CC新版本中，又对Dreamweaver软件作了进一步的改进。
1. CSS设计器
在Dreamweaver CC版本中，更倾向于前端的页面设计与布局。因此，高度直观的可视化编辑工具，可帮助用户生成整洁的Web标准的代码。使用此工具，用户可以快速查看和编辑与特定上下文（或页面元素）有关的样式。仅单击几下就可以应用如渐变和框阴影等属性，如图1-14所示。图1-14 CSS设计器
2. 与Creative Cloud同步
Creative Cloud用于存储的文件、应用程序设置和站点定义。每当用户需要这些文件和设置时，可以从任何机器登录Creative Cloud并访问它们。
用户可以设置Dreamweaver参数，以达到自动与Creative Cloud同步连接。或者，在必要时可以在【首选项】对话框中，设置【同步设置】选项中的相关参数，如图1-15所示。图1-15 设置同步参数
3. 支持新式平台
在Dreamweaver CC版本中，增加了前端设计的新技术支持，如jQuery。用户可以通过HTML 5/CSS 3、jQuery和jQuery移动框架创作项目。
jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的JS库，它兼容CSS 3，还兼容各种浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势，那就是有许多成熟的插件可供选择。jQuery能够使用户的HTML页面保持代码和HTML内容分离。也就是说，不用再在HTML里面插入一堆JS来调用命令了，只需定义ID即可。
如果用户需要添加jQuery UI插件内容，执行【插入】|jQuery UI命令即可，如图1-16所示。图1-16 jQuery UI插件
拖放文档中的手风琴、按钮、选项卡以及许多其他jQuery插件。通过jQuery效果增加网站的趣味性和吸引力。例如，用户可以执行【窗口】|【行为】|【效果】命令，如图1-17所示。图1-17 添加jQuery效果
4. 简化了用户界面
Dreamweaver CC用户界面经过改进，减少了对话框的数量。改进后的界面可帮助用户使用直观的上下文菜单更高效地开发网站。1.5 Dreamweaver工作区
在首次启动Dreamweaver CC时，将显示【欢迎屏幕】界面，用于打开最近使用过的文档或创建新文档。1.5.1 Dreamweaver窗口
用户还可以从【欢迎屏幕】界面中了解产品介绍或教程，以及有关Dreamweaver的更多信息。帮助用户快速创建常用的项目文档，如图1-18所示。图1-18 【欢迎屏幕】界面
创建及打开文档时，即可打开Dreamweaver工作区。用户在该工作区中，可以查看文档和对象属性，通过工具栏中的操作，可以快速编辑文档内容，如图1-19所示。图1-19 Dreamweaver工作区1.5.2 窗口组成
在窗口中，包含了许多面板、工具按钮，以及对不同网页元素进行设置的【属性】检查器等。下面来详细了解一下窗口中的主要组成部分。
1. 窗口的组成部分
在窗口中，主要包含以下内容。
• 菜单栏
Dreamweaver的基本菜单栏包含各种操作执行菜单命令，以及切换按钮，如【最小化】、【最大化】、【还原】和【关闭】等按钮。
在默认状态下，菜单栏中还将显示【扩展】按钮和【同步设置】按钮，允许用户更改窗口的界面以“压缩”或“扩展”方式显示，而【同步设置】按钮可以设置是否与Creative Cloud同步连接。
• 【相关文件】工具栏
打开的网页文档嵌入了多种文档，如嵌入了CSS样式表文档、JavaScript脚本文档等，会在【相关文件】工具栏中显示这些文档的名称，如main.css文件。
用户可以单击任意相关文件的名称，在【文档】窗口中显示文件内容。
• 【文档】工具栏
为用户提供视图切换、文档预览等功能，同时还允许用户测试网页并设置网页的标题。
• 【文档】窗口
用于显示当前创建和编辑的文档。用户可在此设置和编排网页文档的内容，也可编写文档的代码。
• 【标签】选择器
位于【文档】窗口底部的状态栏中，用于显示环绕当前选定内容的标签，以及该标签的父标签等，可体现出这些标签的层次结构。
提示
在【标签】选择器中，用户可以单击标签的名称，然后再对该标签进行各种编辑操作。
• 【属性】检查器
用于查看和更改当前选择对象或文本的各种属性，其会根据用户选择不同的内容而显示不同的属性。
• 【面板】组
显示Dreamweaver提供的各种面板，默认显示【插入】、【CSS设计器】、【CSS过渡效果】和【文件】等面板。
2. 操作面板和检查器
面板是Dreamweaver中的重要工作区域，许多重要的可视化操作都需要借助Dreamweaver的面板来实现。合理地分配各种面板，可以最大限度地提高用户的工作效率。
Dreamweaver的面板通常以组的方式显示。例如，在面板中，【CSS样式】面板和【CSS过渡效果】面板就位于同一组中，【插入】面板和【文件】面板位于一个面板组位置，如图1-20所示。按住面板的标签后，可将面板向任意方向拖曳，将面板转换为浮动模式，脱离原面板组。图1-20 面板组
面板组通常由【面板标签】栏和面板内容等部分组成，当面板组处于折叠状态时，用户可以双击面板的【面板标签】栏将其展开。同理，用户也可以双击已展开面板组的【面板标签】栏将其折叠，如图1-21所示。图1-21 面板折叠与展开
在右击面板组的【面板标签】栏后，用户还可以执行【折叠为图标】命令，将面板转换为折叠图标状态，如图1-22所示。图1-22 将面板折叠为图标
除了默认显示的面板外，Dreamweaver还提供了其他的一些面板。在Dreamweaver中执行【窗口】命令后，即可在弹出的菜单中选择面板，将其添加到面板组中，如图1-23所示。图1-23 添加新面板1.6 了解文档视图
在【文档】窗口中，为方便编辑网页内容，提供了多种视图方式。
1. 【设计】视图
在此视图中，显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容，如图1-24所示。图1-24 【设计】视图
2. 【代码】视图
一个用于编写和编辑HTML、JavaScript、PHP或ColdFusion标记语言，以及任何其他类型代码的手工编码环境，如图1-25所示。图1-25 【代码】视图
3. 【拆分】视图
合并【代码】视图和【设计】视图，使之在窗口中同时显示，以便在开发时快速根据显示效果调整代码，如图1-26所示。图1-26 【拆分】视图
4. 【实时视图】视图
类似于【设计】视图，但【实时】视图更逼真地显示文档在浏览器中的表示形式，并能够像在浏览器中那样与文档进行交互，如图1-27所示。图1-27 【实时】视图
提示【实时】视图不可编辑。但可以在【代码】视图中进行编辑，然后刷新操作，即可在【实时】视图来查看所做的更改。
5. 【实时代码】视图
仅当在【实时】视图中，查看文档时可用。【实时代码】视图显示浏览器用于执行该页面的实际代码，当在【实时】视图中与该页面进行交互时，它可以动态变化。而【实时代码】视图不可编辑，如图1-28所示。图1-28 【实时代码】视图1.7 【编码】工具栏
在前面已经介绍过【代码】视图，并可以在该视图中直接输入代码内容。而在【编码】工具栏中，包含可用于执行多种标准编码操作的按钮。1.7.1 查看【编码】工具栏【编码】工具栏显示在【文档】窗口的左侧，仅在【代码】视图时才可见，如图1-29所示。图1-29 【编码】工具栏
若要了解和使用每个按钮的功能，可以将鼠标指针定位于按钮上，此时将出现工具使用提示。在默认情况下，编码工具栏中将显示按钮，如表1-1所示。
试读结束[说明：试读内容隐藏了图片]