作者：孙印杰 等
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
新世纪Dreamweaver CS5中文版应用教程试读：
前言
Macromedia 公司推出的 Dreamweaver 网页制作软件可以说是众多网页制作软件中的佼佼者。作为一款专业的网页制作工具，Dreamweaver 具有可视化编辑界面和强大的所见即所得网页编辑功能，不仅可以制作网页，而且为设计和开发站点提供了良好的操作平台，集网页制作与网站管理于一身，即使是完全没有设计基础的用户，也可以在很短时间内掌握该软件的使用方法，用它制作出跨平台、跨浏览器的精彩网页。最近，Macromedia公司又推出了Dreamweaver的最新版本——Dreamweaver CS5版。Dreamweaver的每一次升级都为用户带来更多的惊喜，Dreamweaver CS5同样在原有版本的基础上对不足之处作了改进，并新增了许多有效功能，从而使用户可以在更短的时间内完成更多工作，让设计者可以快速地从微不足道的小步骤中释放出来，将精力投注在设计和开发大型网站上。Dreamweaver CS5最明显的特点是增强了CSS样式的功能，并以可视的方式显示详细的CSS框模型，使用户可以轻松切换CSS属性，且无需读取代码或使用其他实用程序。此外， Dreamweaver CS5还集成了CMS支持，即对WordPress、Joomla!和Drupal等内容管理系统框架的创作和测试支持；与Adobe Browserlab集成，可使用多个查看、诊断和比较工具预览动态网页和本地内容。Dreamweaver CS5新增的PHP自定义类代码提示功能可为自定义PHP函数显示适当的语法，从而帮助用户更准确地编写代码。站点特定的代码提示功能则可从Dreamweaver中的非标准文件和目录代码提示中受益。所有这些改进使Dreamweaver的功能更加强大，该程序的网页制作能力也得到更大的扩展。本书全面介绍了Dreamweaver CS5的功能、基本组成及基本操作等基础知识，另外还介绍了创建网页、制作动态特效、制作交互式网页、建立和发布站点、管理与维护网站等的方法和技巧。全书共分17章，各章的内容概括如下。第1章介绍设计网页和开发网站的基本知识。内容包括网页设计构思和布局原则，网站策划与创建原则，网站的开发流程等。第2章介绍Dreamweaver CS5的功能、启动方法、工作界面及自定义工作环境等内容。第3章介绍规划和设计站点的方法。内容包括创建站点，创建站点地图，查看本地和远程站点，从远程服务器上获取文件和将文件传送到远程服务器上，以及同步、遮盖和备注等功能的使用方法。第4章介绍层叠样式表(CSS样式)的使用方法。内容包括CSS样式的语法规则及优先顺序介绍，CSS样式的创建、应用、编辑和属性设置，以及使用CSS布局网页的方法。第5章介绍Dreamweaver CS5中文版的基本操作及应用技巧。包括创建文档的方法，文本的编辑和修改，使用水平分隔线及网页属性的基本设置等内容。第6章介绍在网页中使用图像的方法和技巧。包括网页图像格式，插入和调整图像，设置图像属性及创建图像映射等。第7章介绍在网页中插入各种多媒体组件的方法。如插入声音文件、视频文件、SWF文件、FLV文件以及Shockwave电影、ActiveX控件、Java applet插件等。第8章介绍在网页中使用表格的方法和技巧。包括创建表格、调整表格结构、表格的嵌套及利用表格布局页面等。第9章介绍AP元素的基本操作方法。包括创建和编辑AP元素、设置AP元素的相关属性及AP元素和表格间的转换方法等。第10章介绍网页框架的使用方法。包括创建框架网页、设置框架属性、编辑框架网页及解决浏览器不能显示框架的问题等。第11章介绍在网页中添加超链接的方法。包括超连接的概念和路径介绍，以及文本超链接、图片超链接、锚点链接及其他一些特殊类型超链接的使用。第12章介绍表单的基本操作方法。包括创建表单的方法、表单属性的设置、验证表单的正确性等。第13章介绍HTML/XHTML代码的相关知识。包括HTML和XHTML的基本介绍及其不同之处，HTML的基本语法和常用标签，HTML/XHTML代码的使用，HTML代码参数的设置，以及清理多余的HTML代码等。第14章介绍在Dreamweaver中使用JavaScript行为来为网页设计动态特效的方法。包括行为的基本使用方法、为对象附加行为及获取更多的行为，应用Dreamweaver中内置的各种行为的方法等。第15章介绍Spry构件和Spry效果的使用方法。包括Spry构件和Spry效果的基本概念，以及添加Spry构件和Spry效果的方法。第16章介绍库与模板的使用方法。包括创建和设置库项目、为网页添加库项目和编辑库项目、创建模板、设置模板的网页属性及导入导出XML内容的方法等。第17章介绍共同开发网站、测试站点及上传网站的方法。包括使用存回与取出开发网站、检查浏览器的兼容性、检查页面或站点内的链接、修复断开的链接、设置下载时间和大小、使用报告测试站点、申请个人主页、将站点上传到服务器和推广网站等。本书由孙印杰、夏跃伟和高翔主持编写，此外参加编写工作的人员还有王珂、何立军、千丽霞、马云众、孙全庆、孙全党、张国权、刘金广、赵丽、靳瑞霞、李宝方、张聪品、刘云峰和孟兆宏等。由于编写人员的水平有限，因此在编写过程中难免有不当之处，欢迎广大读者批评、指正（我们的E-mail地址是：qiyuqin@phei.com.cn）。编著者2011年3月第1章网站设计基础知识教学目标：在着手制作网站之前，用户应先了解一些基本的网页设计知识，如网站设计中的常用术语、网页的构成元素、网站的设计和规划原则等。了解了这些知识，用户才能在设计网站的过程中做到心中有数，顺利高效地完成网站的设计与制作。本章即介绍一些网页设计的常识，包括网站与网页的一些基本概念、网页的主要构成元素、网页的设计和布局原则、网站的规划，以及网站的开发流程等内容。教学重点与难点：1. 网页与网站的关系。2. 网页的主要构成元素。3. 网页的设计和布局原则。4. 网站的规划。5. 网站的开发流程。1.1 网站与网页概述现在，上网已经成了许多人娱乐休闲和工作生活的一部分，网上聊天、网上购物、网上游戏、网上教学等，都已不再是什么神秘和新鲜的事情，有些人甚至将上网当成了生活中的头等大事，包括笔者在内，早晨一起床必先打开电脑，连上因特网，这才能放心地做其他事情，可以说，上网成了很多人日常生活中必不可少的事情之一。在这样的氛围之下，网站、网页这些基本术语可以说已经是妇孺皆知、耳熟能详了，但是，网站和网页究竟是个什么概念？网站与网页之间又有什么关系呢？这就让很多人又陷入了糊涂之中。然而，我们要制动作手网站，这些都是必须要事先搞清楚的东西。1.1.1 网页与网站网页的英文名称为Web Page，是通过浏览器在Internet上看到的页面，其中可以包含文字、图片以及各种多媒体内容。网站是多个相关网页的集合，也称为站点，英文名称为Web Site。网站中的网页之间有一定的链接关系，可以通过点击被设置为超链接的文字或对象来跳转到相关的网页。当访问者在浏览器的地址栏中输入一个网站的地址以后，浏览器会自动链接到这个网址所指定的Web服务器，打开一个默认的网页（一般是index.htm或default.htm）作为浏览这个网站的开始。这个总是被最先打开的默认页面被称为主页（Home Page）或者首页。访问者可以通过点击主页中的超链接来跳转到其他网页。例如，启动某个浏览器程序，在地址栏中输入“http://www.people.com.cn”，按下 Enter键后，即可转到人民网的主页，如图1-1所示。将鼠标指针指向主页中的文本或图片，若指针变为手形，表示此对象为超链接，单击此对象即可跳转到相关网页。例如，在人民网的主页中单击大标题“直播……”超链接文本，可跳转到相关新闻网页，如图1-2所示。图1-1 人民网主页图1-2 跳转到的新闻网页1.1.2 网站的类型在设计网站时，设计者需要先确定网站的类型。按照不同的分类方法，网站可分为不同的类型。按照网站的用途来进行分类，网站可分为门户网站、导航网站、搜索网站、电子商务网站、企业网站、政府部门网站和个人网站等几大类。1. 门户网站门户网站是指一些大型的综合性商业网站，用于提供各种各样的服务，如搜索信息、论坛、聊天室、电子邮箱、虚拟社区、短信，以及发布新闻、娱乐、体育、音乐、影视、文学等页面的信息服务。国内比较著名的门户网站有新浪（http://www.sina. com.cn）、搜狐（http://www.sohu.com）、网易（http://www.163.com）、雅虎（http://cn.yahoo.com）等。2. 导航网站导航网站是一种特殊的网站，用于分门别类地提供各类网站链接，以便用户查找并选择所需的网站。通过点击导航网站中的超链接可快速跳转到相关的网站。3. 搜索网站搜索网站也称为搜索引擎，用于让用户通过输入关键词来搜索相关的网站。搜索网站的用户十分广泛，大多数网民都是通过搜索网站来搜索自己所需的网站的。目前在国内使用频率较高的搜索网站是百度网（http://www.baidu.com）。4. 电子商务网站电子商务网站是一种网上交易平台，用于发布和搜索供求信息，进行线上或线下交易等。比较著名的国内电子商务网站有阿里巴巴（http://exporter.alibaba.com）、阿里巴巴旗下的淘宝网（http://www.taobao.com）、卓越网（http://www.amazon.cn）等。5. 企业网站企业网站是指企业为了宣传自己的形象和产品，或提供一些客户服务等目的而建立的网站，如中国移动网（http://10086.cn）。6. 政府部门网站政府部门网站是指政府部门为了发布政府信息和提供在线服务而建立的网站，如中国政府网（http://www.gov.cn）。7. 个人网站个人网站是指一些由个人为了展示自己或出于某种兴趣而建立的网站，规模较小。1.1.3 网页的类型通常在浏览网页的时候，可以见到带有如.htm、.html、.asp、.php等不同扩展名称的网页，不同后缀的网页代表不同的网页类型。下面简单介绍一下各种常见的网页类型。1. HTML带.htm或.html扩展名的网页简称为HTML文件，是最常见到的网页类型。HTML的中文名称为超文本标记语言，是HyperText Markup Language的缩写，该语言主要利用标记来描述网页字体、大小、颜色及页面布局。在Dreamwerver中，可以通过代码编辑视图来编辑HTML代码以生成对应的网页。2. ASPASP是Active Server Pages（动态服务器主页）的缩写，主要用于网络数据库的查询与管理，其编辑语言为 JavaScript 等脚本语言。访问者在浏览该类网页时，发出浏览请求后，服务器会自动将ASP的程序代码解释为标准HTML格式的网页内容，再返回到浏览者浏览器中显示出来。应用ASP生成的网页比HTML网页更具有灵活性。只要结构合理，一个ASP页面就可以取代成千上万个网页。3. JSPJSP与ASP非常相似，不同之处在于ASP的编程语言是VBScript之类的脚本语言，而JSP使用的是Java。此外，ASP与JSP还有一个本质的区别，即两种语言引擎用完全不同的方式处理页面中嵌入的程序代码。在ASP下VBScript代码被ASP引擎解释执行，在JSP下代码被编译成Servlet并由Java虚拟机执行。4. CGICGI是Common Gateway Interface（公共网关接口）的缩写，是一种编程标准，规定了Web服务器调用其他可执行程序（CGI程序）的接口协议标准。CGI程序通过读取浏览者输入的请求产生HTML网页，通常用于查询、搜索或其他的一些交互式的应用。5. PHPPHP是PHP：Hypertext Preprocessor（PHP：超文本预处理器）的缩写，其优势在于运行效率比一般的CGI程序要高，而且是完全免费的，可从PHP官方网站（http://www.php.net）自由下载。很多论坛都使用了PHP技术。6. VRMLVRML是Virtual Reality Modeling Language（虚拟实景描述模型语言）的缩写，是描述三维的物体及其连接的网页格式，使用户可以在三维虚拟现实场景中实时漫游。浏览VRML网页需要安装相应的插件，利用经典的三维动画制作软件3ds max可以简单而快速地制作出VRML。1.1.4 构成网页的元素构成网页的最基本的元素是文字和图片，此外，网页中还可以包含颜色、影片、声音以及其他多媒体内容。下面介绍一些网页中常见的组成元素。1. 文本网页中的信息以文本为主，因为文本可以准确地表达信息的内容和含义，一直以来就是人类最重要的信息载体与交流工具。在网页中使用文本时，可以设置文本的字体类型、大小、颜色和对齐等属性，以达到美化页面的需求。2. 图像使用图像不但可以提供信息和装饰网页，还可以直观地展示作品的外观。通常用于网页的图像有三种格式，即GIF、JPG和PNG。目前，GIF和JPG文件格式的图像支持情况最好，大多数浏览器支持这两种图像格式。3. 动画在网页中使用动画元素可以使网页更生动。常见的网页动画有两种：一种是GIF动画，另一种是Flash动画。GIF动画在早期的网页中应用相当普遍，虽然它只能表现出200多种颜色，但制作动画却非常容易，常见的制作软件有 Fireworks等。Flash动画具有极好的显示连贯性，可以加入声音，而且体积较小，比较适合应用于网页，常见的制作软件有Flash等。4. 视频和音频网页中的视频和音频都是通过在网页中插入音频、视频插件来实现的。最流行的音频、视频格式有两种：一种是 AVI，另一种是 RM，两种格式都使用了压缩算法和流媒体技术进行传送。5. 超链接超链接是在 Internet 上各网页之间进行跳转的媒介。可以将一个网页中的文本、图像或按钮等对象设置为超链接，并指向另一个网页或某个文档、图像、多媒体文件、可下载软件以及文档内任意位置的任何对象（包括标题、列表、表、层或框架中的文本或图像）。当把鼠标指针放在超链接上时，指针形状会变成小手状，通过单击超链接即可跳转到目标对象。6. 导航栏导航栏的作用是引导访问者浏览站点。导航栏实际上就是一组超链接，其链接目标是本站点中的各个网页。导航栏既可以是文本链接，也可以是一些图形按钮。7. 表单表单是访问者与网站交互的桥梁。网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端，以实现收集浏览者信息并与其进行交互的目的。Internet 上的许多功能都是通过表单来实现的。根据表单功能与处理方式的不同，通常可以将表单分为用户反馈表单、留言簿表单、搜索表单和用户注册表单等类型。1.2 网站的规划想要建立一个成功的网站，建站前的规划与设计工作是极为重要的。建立网站需要规划和设计的内容大体可分为两个方面：一是纯网站本身的设计，如文字排版、图像制作和平面设计等；二是网站的延伸设计，包括网站的主题和浏览群的定位，智能交互，制作策划等。在网站开发之前，设计者必须决定站点的目标定位、风格、CI形象、栏目、版块及最基本的目录结构，才能顺利地完成网站的开发与制作。1.2.1 网站的开发规范一个大型网站往往是由多人的共同努力、互相协助才得以完成的，不同的设计者有不同的建站习惯，为了方便网站的开发，提高开发效率，主设计者在开发网站前一定要先制作网站开发的规范。在网站开发规范中必须指定站点的目标定位、风格、CI形象、栏目及版块，以及最基本的目录结构；有时还需要一个合理的脚本语言作为参考。网站开发规范并不是一成不变的，可以根据特殊情况灵活运用。但需要注意的是，在灵活运用的同时一定要和开发小组的其他成员进行沟通，以免出现这样或那样的问题。1.2.2 网站的目标定位一个网站要有明确的目标定位，这是在策划网站之前必须首先考虑和解决的问题。只有定位准确，目标鲜明，才可能做出切实可行的计划，按部就班地进行设计。网站的目标定位可以从题材和内容、网站名称及域名几个方面进行考虑。1. 题材和内容作为一个初级的网站设计者，网站的主题定位一定要小而精，选择自己所擅长或者喜爱的内容，突出个性和特色。2. 网站名称网站名称也是网站设计的一部分，且至关重要。网站名称是否响亮、易记，对网站的形象和宣传推广也有着很大的影响。网站名称最好用中文，字数应该控制在6个字以内，且能代表本站特色，使人一看就知道本网站的主题是什么。3. 网站的域名在申请域名时，一定要选择一个便于记忆的域名，最好是与网站名称相关的域名，如百度的域名为baidu.com，搜狐的域名为sohu.com等。1.2.3 网站的CI形象CI（Corporate Identity的缩写）是借用的广告术语，意思是通过视觉来统一企业的形象。网站的CI形象包括标志、色彩、字体、标语等，一个有创意的CI设计对网站的宣传推广能够起到事半功倍的效果。当一个网站的主题和风格确定以后，就需要根据它们设计相应的网站CI形象，以提高访问者的关注度。1. 设计网站的标志网站的标志是一个网站的特色和内涵的集中体现，其设计、创意来自该网站的名称和内容，最好能让浏览者一看到标志就联想到这个网站。2. 设计网站的标准色彩网站给人的第一印象来自于视觉冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。标准色彩指能体现网站形象和延伸内涵的色彩，它要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。一般来说，适合于网页标准色的颜色有蓝色、黄/橙色和黑/灰/白色3大系列色。3. 设计网站的标准字体标准字体指用于标志、标题和主菜单的特有字体。为了体现站点的特有风格，可以根据需要选择一些特别字体。注意不同操作系统可能支持不同的字体。4. 设计网站的宣传标语网站的宣传标语也可以说是网站的精神，网站的目标，最好是用一句话，甚至是一个词来高度概括。1.2.4 网站的风格风格是指站点的整体形象给浏览者的综合感受。这个整体形象包括许多方面，如版面布局、浏览方式、交互性和文字等。一个网站的风格要独树一帜，通过网站的某一点能让浏览者明确分辨出此部分就是该网站所独有的。设计者可从以下几方面入手，来树立网站的风格。（1） 建立在有价值的内容之上。有价值的内容是支撑网站浏览量的支点，一个网格空有装饰而无实质性的内容也难以留住浏览者。因此，网站首先必须保证内容的质量和价值性，这是最基本的。（2） 明确希望站点留给浏览者的印象。在开始设计站点前，要彻底搞清楚自己的站点留给浏览者的印象。这一步骤可以通过自己所希望的印象及别人感受到的印象加以对比，最终来确定该网站的印象。（3） 着手建立和加强站点印象。确定着眼点印象后，还需要进一步找出其中最有特色的内容，即最能体现网站风格的内容并以其作为网站的特色进行强化和重点宣传。1.2.5 网站的栏目和版块网站的栏目实质上是一个突出显示网站主体的大纲索引，在动手制作网页前，一定要先确定好合理的栏目和版块。在确定栏目和版块时，要遵循以下几个原则。（1） 紧扣网站的主题。一般做法是将网站的主题按一定的方法分类并将其作为网站的主栏目，且主题栏目个数在总数上要占绝对优势。这样的网站显得专业，主题突出，容易给人留下深刻的印象。例如，图1-3所示的这个LOGO就有机地将站名“道通天下”和它的标志图案、所属机构及其会标都有机地结合在了一起，整体形象不但简单明了，而且有助于提升网站的品牌形象。图1-3 网站LOGO示例（2） 设计“最近更新”或“网站指南”栏目。如果首页没有安排版面放置最近更新内容信息，就要设立一个“最近更新”的栏目，这样做可使主页更人性化。如果主页层次较多，而又没有站内的搜索引擎，建议设置一个“本站指南”栏目，这样可以帮助初访者快速找到需要的内容。（3） 设定一个可以双向交流的栏目。设定一个可以双向交流的栏目，比如论坛、留言板或邮件列表等，可以让浏览者留下他们的信息，这远比只留一个E-mail地址更具有吸引力。版块的概念要比栏目大一些，每一个版块都有自己的栏目。例如搜狐网站分为新闻、体育、道琼斯、汽车、房地产和健康等版块，而每一个版块下面都有自己的主栏目。在设置版块时，注意各版块要相对独立，相互关联，且版块的内容要围绕站点的主题。1.2.6 网站的目录结构网站的目录是指建立网站时创建的目录。网站目录结构的好坏对浏览者没有太大的关系，但对于站点本身的上传和维护、将来内容的扩充和移植却有着重要的影响。下面是对建立目录结构的一些建议。（1） 不要将所有的文件都存放在根目录下。在建立网站时，不要为了一时的方便，将所有文件都存放在根目录下，这样会造成文件管理上混乱等诸多不便，所以要尽可能减少根目录中的文件数。正确的方法是，在网站根目录中开设images、common、temp和media等子目录。images 目录中存放不同栏目的网页中都要用到的图像，例如站标、广告横幅、菜单、按钮等；common子目录中存放css、js、php和include等公共文件；temp子目录存放客户提供的各种文字图像等原始资料；media子目录中存放Flash、Avi和Quick Time等多媒体文件。（2） 按栏目内容建立子目录。在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中应开设images和media等子目录用以存放此栏目专用的图像和多媒体文件。如果这个栏目的内容特别多，分出很多下级栏目，可相应的开设其他子目录。对于一些需要经常更新的栏目可以建立独立的子目录，而一些相关性强，不需要经常更新的栏目，可以合并放在一个统一的子目录下。除此之外，所有的程序文件最好存放在特定的目录下，如一些需要下载的文件最好存放在一个目录下。（3） 目录的层次不要太深。为了维护方便，目录的层次最好不要超过3层。（4） 使用正确的目录名称。注意不要使用中文名称的目录和名称太长的目录。除非有特殊情况，目录、文件的名称应全部用小写英文字母、数字、下画线的组合，其中尽量不要包含汉字、空格和特殊字符。对于一些正规的网站（个人站点除外）目录的命名方式最好尽量以英文为指导，不到万不得已不要以拼音作为目录名称。此外，为了方便分辨网页，还要尽量使用意义明确的目录。1.2.7 网站信息的准备和收集内容是网站的灵魂，因此，网站信息的准备和收集是一项非常重要的工作。要准备和收集网站信息，必须从网站的主题和构成网页的基本元素着手。确定了网站的主题与内容之后，就应该着手进行资料的搜集工作了。设计者需要将网站中将要用到的文字、图片、动画、背景音乐等资料一一准备好，以备不时之需。搜集来的网页素材应该与网站中的元素相互对应，例如，可能需要将搜集来的文字资料转换成文本文件或其他网页能够识别的文件格式，或者将图片转换成适用于网页的格式等。1.3 网页的设计和布局一般来说，网页中除了包含主要内容外，还会加入网站名称、广告条、主菜单、计数器和邮件列表等元素，同时，还要针对网页的主题、命名、标志、颜色搭配和字体等要素进行详细的构思和策划。总的来说，网页的版面与布局应遵循平衡和精练的原则。1.3.1 网页主题网页的主题是指该网页所要表现的主要思想内涵，可以说是网页的灵魂。网络上的题材五花八门，几乎涉及了社会生活的方方面面。设计者在选择网页主题时，一定要遵循以下几项原则。（1）选择自己擅长或喜爱的内容。这个道理很简单，只有选择自己擅长或喜爱的内容，在制作网页时才会做到得心应手；否则，如果自己对目标任务都没有兴趣或热情，怎么可能制作出优秀的作品来呢？（2） 主题小而精。即主题定位要明确，内容要精悍，不要什么都往网页里放，否则可能会造成网页的主题不鲜明，没有特色，样样都有却样样不精。（3） 不要太滥或目标太高。“太滥”是指到处可见，人人都有的题材。“目标太高”是指在这一题材上已经存在非常优秀、知名度很高的站点，如果想超过它是很困难的，除非有决心及实力与之竞争。1.3.2 网页的命名与标志网页名称是网页主题最精练的概括，好的网页名称往往会给浏览者留下深刻的印象。一般来说，命名网页应遵循以下的原则。（1） 体现网页的主题精练、概括性强。（2） 合法、合情并合理。（3） 字数不要太多，一般控制在6个字以内。（4） 有个性，体现一定的内涵，可给浏览者更多的视觉冲击力和空间想像力。网站标志简称站标，也称LOGO，是站点特色和内涵的集中体现。站标一般放在网站的首页上，和商标类似，标志可以是中文文字、英文字母、符号、图案等，其设计创意应立足于网页的主题和内容。图1-4所示的分别是百度网、网易网和新浪网的站标。图1-4 网站LOGO1.3.3 网页的色彩网页的色彩是树立网站形象的关键因素之一，它直观地冲击着访问者的视觉感观。不过，用户在浏览网页时可以发现这样一个规律：大部分网页的主要内容都采用了黑色文字与彩色边框、背景与图像的搭配。这种搭配方式之所以得到众多网页设计者的青睐，是有一定道理的，这种效果可以使网页整体不单调，看主要内容时也不会感到眼花缭乱，符合大多数人的阅读习惯。在搭配网页色彩时，要注意色彩的鲜明性、独特性、适合性和联想性。鲜明的色彩容易引人注目，独特的色彩能使人印象深刻；色彩的适合性是指色彩与表达的内容气氛相适合；色彩的联想性是指不同的色彩会使人产生不同的联想。在选择色彩时还要注意所选色彩与网页的内涵相关联。下面简单介绍一下搭配色彩时的基本常识。1. 非彩色的搭配黑白是最基本和最简单的搭配，白底黑字非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。2. 色彩搭配色彩千变万化，其搭配是颜色搭配的重点和难点。在搭配色彩时，要注意不同的色彩、不同的色彩饱和度和透明度都会给浏览者不同的感觉。例如绿色可以使人产生优雅、舒适的气氛，黄绿色有青春、旺盛的视觉意境，而蓝绿色则显得幽静、阴森等。1.3.4 网页中的文字在浏览器中，默认的标准字体是中文宋体和英文Times New Roman字体，也就是说，如果没有设置任何字体，网页将以这两种标准字体显示。在设计网页时，还可以自由使用Windows操作系统自带的所有英文字体和中文字体。浏览该网页时，在Windows操作系统中都能正确显示。如果想用特殊的字体来体现某种风格，可以用图像来代替，即把特殊字体的文字做成图像格式，然后在需要这种字体的地方放置文字的图像，从而保证所有人看到的页面都是同一种效果。在网页中设置字体时，要注意遵循以下几项基本原则。（1） 不使用超过3种的字体类型，以免网页看起来显得杂乱，没有主题。（2） 不使用太大的字，因为版面空间非常宝贵和有限，粗陋的大字体不能带给浏览者更多的信息。（3） 最好不要使用不停闪烁的文字，以免分散浏览者的注意力。（4） 标题的字体比正文要稍大一些，颜色也应有所区别，以突出主题。1.3.5 网页的版面和布局版面是指浏览器显示的一个完整的页面（包括框架和层），根据浏览者显示器分辨率的不同，同一大小的页面可能会出现不同的尺寸。布局是指以最适合浏览的方式将图像和文字排放在页面的不同位置。1. 版面设计的主要步骤在设计网页时，必须精心设计页面的版面和布局，使浏览者在浏览网页时不觉得拥挤和凌乱。进行页面布局的前提条件是确定页面的功能模块，然后设置网页的版面。设计版面的最好方法是先用笔在白纸上将头脑中的草图勾勒下来，然后用Dreamweaver来实现。版面设计可分为画出页面的结构草图、布局细化和调整、确定最终版式三步。（1） 画出页面的结构草图。此步骤不需要很详细，不必考虑细节功能，只需要画出页面的大体结构即可。为了追求更高的质量，可多画几张，选定一个最满意的作为继续创作的样本。（2） 布局细化和调整。在结构草图的基础上，将需要放置的功能模块安排在页面上。同时，必须注意突出重点和平衡协调。安排完毕查看总体效果和感觉，将视觉不协调或不美观的地方进行相应的调整。这个过程需要反复地进行，直到满意为止。（3）确定最终版式。在布局反复细化和调整的基础上，找出一个比较完美的布局方案，确定为最后的版式。2. 常见的网页布局常见的网页布局主要有、T型和三型3种结构。（1）型结构：顶部通常为网站标志、广告条和主菜单，顶部以下分为3个区域，左右两边通常为链接、广告或其他内容，中间部分是主题内容。这种布局的网页整体效果类似符号，优点是能够充分利用版面空间，信息量大，但是页面显得比较拥挤，不够灵活。图1-5所示的即是一个采用型结构的网页实例。图1-5 π型结构（2） T型结构：顶部通常为网站标志和广告条，下半部分左面是主菜单，右面是主要内容。这种布局方式的优点是页面结构清晰，主次分明，初学网页设计者很容易上手，但显得有些呆板，如果细节色彩搭配不好，很容易给人杂乱的感觉。图1-6所示是采用T型结构的一个网页实例。图1-6 T型结构（3）三型结构：多见于国外站点，特点是用两条横向的色块将整个页面分割为3部分，色块中大多放广告条与更新和版权提示，色块之间是主要内容。图1-7所示的即是采用三型结构的一个网页实例。图1-7 三型结构1.4 网站的开发流程一个网站的开发流程是指在开发一个网站时，规定每步应完成的工作。当设计者确定了网站的主题及整体风格、完成了版面设计并且收集和制作好各种所需素材后，就可以开始着手建立网站了。下面介绍网站的主要开发流程。1.4.1 定义站点开发网站的首要工作就是要定义该站点，即明确建立网站的目的、确定网站提供的内容及网站资料的搜集。建立网站的目的很多，例如个人求职、扩大公司知名度、介绍公司新产品、提供信息或游戏娱乐等。随着信息时代的发展，综合型的网站将日益减少。越来越多的网站将趋向于企业产品的宣传及信息咨询服务，一些娱乐休闲型的网站也会渐渐增多。创建网站的目的一定要明确，才不会影响到以后的设计工作。在明确建立网站的目的之后，需要所有参与网站设计的单位与成员一起构思、讨论，最后取得共识，才能确保以后的开发过程不会发生争论，能够有效地进行开展工作。接下来设计者还需要确定网站提供的内容，这些内容必须按照网站的目的来选择，且不能有内容越多越好的思想。确定内容时，应该有所侧重，与网站主题有关的选择的内容相对来说多一些；与网站主题无关的，则应该少选择一些或者不选择。当确定网站的内容以后，就应该进行资料的搜集工作，主要是搜集文字、图像、动画及背景音乐等（在设计企业网站时，一般都是由企业提供大部分的文字和图像资料），然后对资料进行整理和筛选，选出网站所需要的资料。网站制作完毕，还要把它上传到因特网供人浏览，因此还需要配置服务器。目前Windows中常用的服务主要是Windows 2000/XP下的IIS服务器。1.4.2 建立网站结构定义站点后，就应该根据网站结构开始搭建网站。网站中通常包括三类网页：首页、主页和内容页。（1） 首页：首页是指浏览者访问网站时首先看到的网页，其中的内容通常很简单，主要用于引导用户进行浏览。（2） 主页：主页是网站的精华部分，绝大部分网站的内容都可在主页中找到缩影。（3） 内容页：内容页是网站具体内容的承载页，是制作网站的重点，也是体现网站主题的主体。1.4.3 首页的设计和制作对于一个网站来说，首页至关重要，它一般代表着整个网站的制作水平与精华部分。首页的好坏可以直接影响浏览者的情绪。首页的制作也需要先绘制一张草图，草图应包括网站的标志、广告条、菜单栏和友情链接等一些基本的部件。而且需要合理地布置这些部件，根据部件的重要性来摆放。首页的内容一般都是比较概括性的文字，起引导性的作用，所以文字不应该太多。首页的草图设计好后，即可使用Dreamweaver动手制作。在首页中，注意不要使用太多的图像及音频和视频等，因为这些素材的数据量都比较大，是制约网页下载速度的重要因素之一。如果首页的下载速度比较慢，浏览者对这个网站可能就不会有太大的兴趣。1.4.4 制作其他页面其他页面的设计和制作不如首页复杂，但设计与制作的方法和首页设计一样，需要注意以下几点。（1） 要和首页保持相同的风格。（2） 要有返回首页的超链接。（3） 目录结构最好不要超过3层。1.4.5 网页的测试与调试网页的测试与调试主要包括测试网页和验证与调试网站两方面的内容。1. 测试网页网页制作完成后，用户需要测试网页以确保网页的正常使用。测试网页主要包括以下几个方面。（1） 兼容性测试。Dreamweaver 虽然考虑到了网页在不同版本、不同类型的网页浏览器中的兼容性，但是也可能有一些元素必须是更新版本的浏览器才能得以支持。可以在Dreamweaver中选择“文件”|“检查页”|“浏览器兼容性”命令来测试所制作的页面，以检查网页在不同版本、不同类型的浏览器中的兼容性。（2） 超链接测试。在Dreamweaver中可以选择“文件”|“检查页”|“链接”命令检查超链接的正确性，以保证没有孤立的链接。用户也可以单击每一个超链接，查看是否有效和正确。（3） 实地测试。把网页上传到Internet服务器，测试超链接及下载速度等问题。注意：有可能在本地测试成功的网页上传后却有问题。例如，如果Internet服务器的文件名区分大小写，而所做的链接忽略了这一点，则可能导致链接错误。2. 网站的验证与调试在网站的验证与调试阶段，要尽最大努力找出网站中的所有错误。在验证与调试期间，要注意网站的可浏览性，因为在不同类型的浏览器中浏览的效果有所差异，最好在几个不同的浏览器中浏览。1.4.6 发布与维护当一个网站制作完成，并且验证与调试正确后，即可将该网站发布到Internet服务器上，即通常所说的上传网站。在服务器上发布网站以后，还需要对网站做定期维护、内容的更新和版面的扩展等，以吸引更多的浏览者。1.5 典型实例——规划和设计网站本节以规划和设计一个小型个人网站为例介绍网站的规划和设计。1. 确定主题及风格对于小型个人网站来说，设计者可以按照自己的性格、爱好来定义网站的主题及风格。例如，爱好文学的人可以制作一个文学网，主色调采用适合阅读的淡绿色，而爱好体育的人则可以制作一个体育网，主色调采用张扬的黄色等。在本例中，笔者将主题定为美食，包含食谱、美食介绍、美食图片欣赏等内容，名称为“美食网”。2. 撰写文字内容网站主题及整体风格确定后，接下来就要开始搜集材料。文字方面的东西要事先准备好，可用Word、写字板或记事本等文字编辑软件进行编辑。3. 准备图片及其他素材对于图片元素，设计者可以使用图形图像软件进行绘制和编辑，或者通过用扫描仪扫描、用数码相机拍照等方式来获得，还可以用摄像机来获得视频文件。图片上传到计算机中后通常还须根据需要进行处理，如压缩图像文件的大小。在扫描照片时，为使照片更加清晰，一般情况下分辨率选择300 dpi；为了减小图片体积，最好选择jpg格式。除了图片之外，动画在网页中的作用也很大，设计者可以利用动画制作软件来自己制作动画，也可以请朋友帮忙。4. 版面设计本案例将包含首页、主页和内容网页。图1-8所示的是“休闲角落”网站的首页及主页两个网页的版面设计简图。图1-8 首页及主页版面设计1.6 本章小结本章介绍了网页设计的基础知识，包括网页设计和布局的原则、网站策划与创建的原则，以及网站的开发流程。通过本章的学习，读者应掌握设计网页与开发网站时的一些基本要求等内容。例如网页设计时对网页字体、色彩的要求，开发网站时有关网站的目标、风格和CI形象的树立等。1.7 上机练习与习题1.7.1 选择题（1）__________可以说是网页的灵魂。A. 标题B. 主题C. 风格D. 内容（2）__________指的是站点的整体形象给浏览者的综合感受。A. 布局B. 风格C. CI形象D. 栏目（3）__________并不是一个网站树立CI形象的关键。A. 标志B. 色彩C. 字体D. 版块（4） 适合于网页标准色的3大系列颜色中不包括__________系列色。A. 蓝色B. 黄/橙色C. 红色D. 黑/灰/白色（5） 为了维护方便，目录的层次最好不要超过__________。A. 2层B. 3层C. 4层D. 5层1.7.2 填空题（1） 网页的英文名称为__________；网站也称为站点，英文名称为__________，是多个网页的集合。（2） 常见的网页构成元素有__________、__________、__________、__________、__________、__________和__________等。（3） 一般来说，网页主要由__________、__________、__________、__________和__________等元素组成。（4） 一个网站可以有很多网页，而__________只有一个。（5）__________是指浏览器显示的完整的一个页面，__________是网页的集合。（6） 在浏览器中，默认的标准中文字体是__________，英文字体是__________。（7）__________、__________、__________和__________是一个网站树立CI形象的关键。1.7.3 问答题（1） 网站可分为哪几类？（2） 网站的开发需要经过哪几个主要阶段？（3） 在创建网站目录时应注意哪些问题？（4） 制作网页时要注意哪些问题？（5） 测试网页包括哪些方面？1.7.4 上机练习（1） 规划一个网站并绘出版面设计草图。（2） 根据自己设计的网站主题准备和搜集相关素材。第2章认识Dreamweaver CS5教学目标：Dreamweaver是Adobe公司推出的一款专业的网页制作软件，目前的最新版本是Dreamweaver CS5。Dreamweaver简单易用，具有所见即所得的特性和强大的网页制作功能，一经推出就受到了广大网站设计者的青睐和好评。本章介绍Dreamweaver CS5的入门知识，包括该Dreamweaver的用途、新增功能、工作界面及自定义工作界面的方法等内容。教学重点与难点：1. Dreamweaver CS5的实用新功能。2. Dreamweaver CS5的工作界面。3. 自定义工作界面。2.1 Dreamweaver简介Adobe公司出品的Dreamweaver、Flash和Fireworks被合称为“网页制作三剑客”。三款软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver 是一款专业的网页制作工具，主要用于制作网页，制作出来的网页兼容性比较好。Flash和Fireworks分别是动画制作和图形图像制作工具，可用于制作精美的网页动画及处理网页中的图形。在 Flash 中创建的动画和在Fireworks中编辑的图片可以直接导入到Dreamweaver中使用。2.1.1 Dreamweaver的发展历程与功能Dreamweaver是Adobe公司于1997年首次推出的一款专业网页制作软件，后来又依次推出了Dreamweaver UltraDev、Dreamweaver MX、Dreamweaver MX 2004、Dreamweaver 8，一直到现在的Dreamweaver CS5。Dreamweaver的字面意思为“梦幻编织”，与其名字一样，该软件有着不断变化的丰富内涵和经久不衰的设计思维，能够充分展现设计者的创意，实现制作者的想法，锻炼用户的能力，让用户成为真正的网页设计大师。Dreamweaver 是一款可视化的网页制作工具，具有所见即所得的特性，无须编写代码即可完成网页的制作，简单易用，非常适合初学者使用。同时，Dreamweaver也支持代码设计，为高级程序人员提供了代码编辑环境，方便程序人员应用HTML或其他代码进行网页开发，主要包括HTML、CSS、JavaScript、CFML、ASP和JSP等语言的代码编辑工具和参考资源。设计者可以使用Roundtrip HTML技术，无须重新格式化即可直接导入使用记事本等程序手写的HTML文档，然后在Dreamweaver中根据实际需要重新格式化代码。2.1.2 Dreamweaver CS5的新增功能Dreamweaver的每一次升级都会给用户带来更多的惊喜，Dreamweaver CS5的诞生也不例外。Dreamweaver CS5在原版本的基础上，又新增了以下功能：（1） 集成CMS支持。即对WordPress、Joomla!和Drupal等内容管理系统框架的创作和测试支持。（2） CSS检查。在Dreamweaver CS5中能以可视方式显示详细的CSS框模型，使用户可以轻松切换CSS属性，并且无需读取代码或使用其他实用程序。（3）与Adobe Browserlab集成。可使用多个查看、诊断和比较工具预览动态网页和本地内容。（4） PHP自定义类代码提示。为自定义PHP函数显示适当的语法，可帮助用户更准确地编写代码。（5） 站点特定的代码提示。可从Dreamweaver中的非标准文件和目录代码提示中受益。2.2启动Dreamweaver CS5用户可以购买Dreamweaver CS5软件光盘，或者从Adobe官方网站上下载Dreamweaver CS5程序。安装完毕后，即可按常规方法启动Dreamweaver CS5，如从“开始”|“程序”菜单中选择“Dreamweaver CS5”命令，或者双击桌面上的Dreamweaver CS5的程序图标等。2.2.1 选择编辑器安装Dreamweaver CS5后，第一次启动该程序时会打开一个“默认编辑器”对话框，让用户选择要将Dreamweaver CS5设置为哪些文件类型的默认编辑器，如图2-1所示。用户可按照自己的实际需要选择所需的选项，然后单击“确定”按钮，即可正式启动 Dreamweaver CS5。图2-1 “默认编辑器”对话框试读结束[说明：试读内容隐藏了图片]