1、第1章 网页设计基础知识,网站作为新媒体，具有很多与传统媒体不同的特征与特性，在开始制作网页之前，需要对网站的设计有全面的了解和认识。这一章首先介绍网页的基本概念及构成要素，帮助大家理解网页的特点与结构；接下来学习网站建设的基本流程，了解网站是如何从无到有的；此外，网页版式与风格设计是建设一个成功网站的关键，学习基本的规律有助于设计出更美观、实用的网站。,1.1 网页与网站,由于互联网具备同时传送文字、动画、图形、声音等多媒体的能力，使之成为当今最流行的媒体。而形式各异、内容繁杂的网页是这些信息的载体。那么什么是网页？什么是网站？网页与网站究竟有哪些异同？网页包含哪些基本构成要素？,1.1.1
2、 认识网页与网站,网页（Web Page）实际上是一个文件，网页经由网址（URL）来识别与存取。当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。网站（Web Site）是各种各样网页的集合，有的网站内容众多，如新浪、搜狐等门户网站；有个网站只有几个页面，如个人网站。在构成网站的众多网页中，有一个页面比较特殊，称为首页（Home Page）。例如，当浏览者输入搜狐网站地址“”后出现在第一个页面，即sohu网站的首页，如图1.1所示。浏览者可以根据首页的导航进入其他页面，了解更多内容。,1.1.2 网页的基本构成要素,虽然网页种类繁多，形式内容各有不同。但网页的基本构成要素大
3、体相同，包括标题（Logo）、导航、文本、图片、动画、超链接、表单、音视频等，如图1.2所示。网页设计就是要将上述构成要素有机整合，表达出美与和谐。,1.2 网站建设的基本流程,规范的网站建设应遵循一定的流程，主要由规划设计阶段、实施发布阶段、评价阶段组成，各个阶段的具体环节如图1.3所示。,1.3 网页版式设计,网页的版式设计是网页设计的核心，主要内容包括网页整体布局设计和导航样式的设计。本节将介绍常见的几种网页布局，以及网页导航设计应遵循的原则。,1.3.1 网页布局,网页布局是网页设计的基础，目前网页的布局主要可归为三大类型：分栏式结构、区块分布式结构、无框架局限式结构。1分栏式结构2区
4、域分布式结构3无框架局限式结构,1.3.2 导航设计,导航是网页设计中不可或缺的基础元素之一。导航就如同一个网站的路标，有了它就不会在浏览网站时“迷路”。导航链接着各个页面，只要单击导航中的超级链接就能进入相应的页面。导航设计的好坏，决定着用户是否能很方便地使用网站。导航设计应直观明确，最大限度地为用户使用考虑，尽可能使网页切换更便捷。导航的设计要符合整个网站的风格和要求，不同的网站会采用不同的导航方式。一般来说，在网页的上端或左侧设置导航栏是比较普遍的方式，如图1.9所示。网站采用上端文字作为一级导航，左侧树状结构菜单作为二级导航。导航设计应遵循以下原则：让用户了解当前所处的位置；让用户能根
5、据走过的路径，确定下一步的前进方向和路径；不需要浏览太多的页面才能找到需要的信息，让用户能快速而简捷地找到所需的信息，并以最佳的路径到达这些信息；让用户使用网站遇到困难时，能寻求到解决困难的方法，找到最佳路径；让用户清楚地了解整个网站的结构概况，产生整体性感知；对使用频率不同的信息作有序处理。,1.4 网页风格设计,同样的版式设计，配色不同，文字样式不同，也可以呈现出多种不同的网页风格。本节将结合实例从网页配色、文字艺术两个方面对网页风格设计进行具体分析。,1.4.1 网页配色,设计精美的网站都有其色调构成的总体倾向。以一种或几种临近颜色为主导，使网页全局呈现某种和谐、统一的色彩倾向。下面介绍
6、一些网页配色的具体经验。运用色系。先根据网页主题，选定一种主色，然后调整透明度或饱和度，也就是将色彩变浅或加深，调配出新的色彩。这样的页面看起来色彩一致，有层次感，如图1.10所示。IBM网站运用蓝色系营造出蓝色海洋的感觉。使用对比色。可以充分利用对比色进行设计，同时注意使用灰色调进行调和。这样的作品页面色彩丰富，如图1.11所示。,1.4.2 文字艺术,文字在版面中一般占有绝大部分空间，是网页信息的主要载体。处理好文字关系到网页设计的成败。字体的选择、字号的大小、文字的颜色、行与行的距离、段落与段落的安排，都需要认真考虑。好的文字设计会给网页增色不少，如图1.13所示。,1.4.3 实例分析
7、,1网站描述这是一家航空公司的网站首页。界面设计给人现代、驿动的感觉，这与公司的风格相一致。导航设计简洁利落，很值得学习借鉴，如图1.14所示。2布局网页布局采用的是比较常见的分栏式结构，如图1.15所示。A为网站的Logo所在的区域；B为网站主菜单所在的区域；C为搜索与其他公共功能所在的区域；D为网站的内容区域，主要由文字和图片组成；E为版权信息所在的区域。3配色网页选用蓝色系，象征天空，与网站主题一致。网页主要运用了两种蓝色，分别是“#14397D”和“1E95BD”，如图1.16所示。除此之外，网页文字的配色主要以白色和蓝色为主。,第2章 初识Dreamweaver CS4,Adobe
8、Dreamweaver CS4是建立Web站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于CSS的设计的领先支持到手工编码功能Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用Dreamweaver 及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能连接到数据库、Web服务和旧式系统。,2.1 Dreamweaver CS4简介,Adobe Dreamweaver CS4是一款专业的 HTML
9、 编辑软件，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论是喜欢直接编写HTML代码还是偏爱在可视化编辑环境中工作，Dreamweaver都会提供众多工具，丰富用户的Web创作体验。 利用Dreamweaver中的可视化编辑功能，可以快速地创建页面而无需编写任何代码。不过，如果您更喜欢用手工直接编码，Dreamweaver 还包括许多与编码相关的工具和功能。并且，借助 Dreamweaver，还可以使用服务器语言（例如 ASP、ASP.NET、JSP 和 PHP）生成支持动态数据库的Web应用程序。,2.2 Dreamweaver CS4的工作界面,Dreamweaver
10、 CS4的工作界面与Dreamweaver 以前版本有所差别，主要由菜单栏、文档工具栏、编辑区、状态栏、属性检查器、面板组等部分组成，而插入栏则整合在面板组中，如图2.1所示。,2.2.1 菜单栏,菜单栏主要包括“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”、“帮助”等菜单。单击菜单栏中的命令，在弹出的下拉菜单中选择要执行的命令，如图2.2所示。,2.2.2 插入栏,“插入”工具栏在之前的版本均在菜单栏下方，CS4版本将其整合在右部面板组中，使用起来更为灵活方便，插入栏按以下的类别进行组织：“常用”类别可以创建和插入最常用的对象，例如图像和Flash等
11、。“布局”类别主要用于网页布局，可以插入表格、div 标签、层和框架。“表单”类别包含用于创建表单和插入表单元素的按钮。“数据”类别可以插入Spry数据对象和其它动态元素，例如记录集、重复区域、显示区域以及插入记录和更新记录等。“Spry”类别包含一些用于构建 Spry 页面的按钮，例如Spry文本域、Spry菜单栏等。“文本”类别可以插入各种文本格式设置标签和列表格式设置标签。“收藏夹”类别可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。,2.2.3 文档工具栏,文档工具栏中包含一些按钮可以在文档的不同视图间快速切换，例如：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的
12、拆分视图。文档工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如：“在浏览器中预览/调试”、“文件管理”、“验证标记”、“检查浏览器兼容性”等。注意：单击“查看”|“工具栏”|“文档”命令菜单，就会在Dreamweaver CS4中显示文档工具栏。若去掉“文档”选项前的对勾，就可以隐藏文档工具栏。,2.2.4 状态栏,状态栏提供与您正创建的文档有关的其它信息。其中“标签选择器”显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 可以选择文档的整个正文。“缩放工具”可以设置当前页面的缩放比率。“窗口大小”用来将“文档
13、”窗口的大小调整到预定义或自定义的尺寸。状态栏最右侧显示当前页面的文档大小和估计下载时间。,2.2.5 面板组,Dreamweaver CS4将各种工具面板集成到面板组中，包括插入面板、行为面板、框架面板、文件面板、CSS样式面板、历史面板等。用户可以根据自己的需要，选择隐藏和显示面板。单击菜单栏“窗口”命令，在下拉菜单中选择“历史记录”，将展开历史面板，如图2.3所示。,2.4 一个简单的网页实例,本例将利用Dreamweaver制作一个简单的网页，来熟悉Dreamweaver的工作界面和工作流程。具体操作步骤如下：,第3章 定义站点,站点是一个管理网页文档的场所。简单地讲，一个个网页文档连
14、接起来就构成了站点。站点可以小到一个网页，也可大到一个网站。Dreamweaver CS4具有强大的站点管理功能，可以实现站点的即时修改，帮助用户管理和维护整个站点的所有文档。它还可以自动更新和修复文档中的链接和路径，以及实现远程站点和本地站点文档的同步与更新。本章将重点介绍如何创建管理本地站点和远程站点，以及使用“文件”面板和“站点地图”管理站点中的文件。,3.1 创建站点,用Dreamweaver制作网站，首先第一步就是创建站点，为网站指定本地的文件夹和服务器，使之建立联系。此外，Dreamweaver提供的“管理站点”功能，还可以对新创建的站点进行管理。,3.1.1 创建本地站点和远程站
15、点,本地站点是指在本地计算机上用来存放网站的所有文件的文件夹。远程站点是在服务器上存放网站所有文件的文件夹。通过设置远程站点的地址、登录名等信息，建立该服务器与本地站点的联系，在本地站点与远程站点之间传递文件。其具体操作步骤如下：,3.1.2 使用“管理站点”对话框,在上一小节创建站点过程中，已经接触到“管理站点”对话框。使用“管理站点”对话框，可以管理多个站点，实现对站点的创建、编辑、复制、删除、导入和导出。具体操作步骤如下：,3.2 管理站点中的文件,在3.1节学习了如何创建站点，新创建的站点是空的或杂乱的，本节将学习在Dreamweaver中如何管理站点中的文件，主要介绍两种方法：使用“
16、文件”面板和使用“站点地图”。,3.2.1 使用“文件”面板管理文件,站点的所有文件在“文件”面板中以目录树的形式呈现，方便管理与查看。,3.2.2 使用存储库视图进行文件的写入取出,同CS3版本不同，在文件面板中，地图视图换为了存储图视图，Subversion是一个版本控制软件，集成了Subversion的Dreamweaver CS4提供了更健壮的文件版本控制、回滚等等的取出文件/存回文件t体验，无需任何第三方工具或命令行界面，整个版本控制系统都在Dreamweaver CS4中完成。,第4章 网页管理,第3章对创建站点和管理站点作了详细介绍，除了对站点的管理以外，对网页的管理也尤为重要。
17、 本章将介绍在Dreamweaver中创建新文档，设置文档的基本属性，预览网页以及网页制作的规范。学习本章是后续网页制作的基础。,4.1 文件的创建,使用Dreamweaver既可以创建空白页和空白模板，也可以创建基于模板的页面以及基于Dreamweaver示例的页面。读者可以根据自身需要创建文档，并将文档保存在站点下。,4.1.1 Dreamweaver的文件类型,在Dreamweaver中，可以创建多种文件类型，最常用的文件类型是HTML文件，其扩展名为“.html”或“.htm”。此外，Dreamweaver还支持其他文件类型。HTML模板文件：Dreamweaver的模板文件可以编辑可
18、编辑区域，文件扩展名为“.dwt”。CSS文件：CSS是Cascading style Sheets（层叠样式表）的缩写，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。其文件扩展名为“.css”。JavaScript文件：JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。它是通过嵌入或调入到标准的HTML语言中实现的。文件扩展名为“.js”。XML文件：XML是The Extensible Markup Language（可扩展标识语言）的缩写。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描
19、述。文件扩展名为“.xml”。动作脚本文件：ActionScript是Macromedia为其Flash产品开发的，是一种完全的面向对象的编程语言，功能强大，类库丰富，语法类似Java，多用于Flash互动性、娱乐性、实用性开发，网页制作和RIA应用程序开发。文件扩展名为“.as”。ASP文件：ASP是Active Server Page的缩写，是微软公司开发的代替CGI脚本程序的一种应用，它可以与数据库和其它程序进行交互，是一种简单、方便的编程工具。ASP的网页文件的格式是“.asp”。JSP文件：JSP是JavaServer Pages的缩写，是由Sun Microsystems公司倡导、
20、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段和JSP标记，从而形成JSP文件(*.jsp)。PHP文件：PHP是一种服务器端、跨平台、HTML嵌入式的脚本语言。其实，它和大家所熟知的ASP一样，是一门常用于Web编程的语言。PHP的网页文件的格式是“.php”。,4.1.2 创建新文档,这里主要介绍如何创建HTML文档，包括创建空白文档以及创建应用CSS布局的文档。具体操作步骤如下：,4.2 设置页面属性,系统默认创建的新网页背景色为白色、无背景图像、无标题等，可以通过修改页面属性的方法修
21、改当前文档的属性，如背景、文字颜色、页面边距、标题编码属性等。,4.2.1 设置背景属性,本小节来学习如何设置页面的背景颜色和背景图像。具体操作步骤如下：,4.2.2 设置文字属性,网页中用不同的文字颜色来标示不同的内容，可以帮助浏览者更方便、快捷地浏览网站，如图4.8所示。为普通文本为黑色加粗显示，链接文本为蓝色下划线显示，活动链接为桔黄色下划线显示。,4.2.3 设置页面边距,“左边距”、“上边距”两个属性是针对IE浏览器，用于设置整个页面距离浏览器左侧边缘的宽度以及整个页面距离浏览器顶部边缘的宽度，以像素为单位。具体操作步骤如下：（1）在“页面属性”对话框中，“左边距”文本框中输入“10
22、0”；“上边距”文本框中输入“100”，如图4.12所示。（2）此时，页面内容距离浏览器左边缘和上边缘的宽度调整为100像素，在IE浏览器中的显示效果如图4.13所示。,4.2.4 设置标题和编码属性,（1）在“页面属性”对话框的左侧“分类”列表中选择“标题/编码”选项；在右侧出现的“标题”文本框中输入网页的标题，其对应的HTML标签是“”；在“文档类型”下拉列表框中选择当前网页常用的类型“XHTML 1.0 Transitional”；在“编码”下拉列表框中选择编码方式，中文网站通常选择“简体中文（GB2312）”；单击“确定”按钮。（2）以上操作生成的代码如下：,4.2.5 使用跟踪图像设
23、计页面,制作网页时，需要参照事先设计好的网页效果图。在Dreamweaver中，可以使用跟踪图像将网页效果图作为网页设计的指导。例如，已制作好的网页效果图，大小为779672，如图4.15所示。下面来学习如何将该图像设置为网页跟踪图像。具体操作步骤如下：,4.3 预览网页,浏览器是一种把在互联网上的文本文档和其他类型的文件翻译成网页的软件。通过浏览器，可以快捷地连接Interne。目前使用较广泛的浏览器主要有Microsoft公司的IE浏览器和腾讯公司的TT浏览器等等，如图4.18所示。,4.4 网页制作规范,在网页制作过程中，要求为目录和文件命名时都应遵循相应的规范，名称应能代表文件的意义，
24、以便进行查找、修改。下面从网站目录建立规范、文件命名规范、文件头代码规范三个方面，具体介绍网页制作的规范。,4.4.1 网站目录建立规范,网站目录建立的原则是以最少的层次提供最清晰简便的访问结构。网站目录建立规范如图4.23所示。,4.4.2 文件命名规范,对于初学者来说，在做网页时，给文件、文件夹命名是一件挺麻烦的事情。对文件命名时遵循的基本原则是以最少的字母达到最容易理解的意义。对于文件夹和文件的命名规范，主要遵循以下几点：所有文件名、文件夹使用小写英文字母、数字、下划线的组合，比如：news.html，unit1_1.html等。不要使用汉字、空格和特殊字符。有些服务器无法识别这些字符，
25、会导致文件链接出错。尽量使用英文，最好有一定的意义，这样以后便于别人或自己修改。例如：名为“Login.html”的文件，一看名称，就知道是登录页面。对于图像文件，在命名时要遵循以下几点：名称分为头部和尾部两部分，用下划线分开，尽量用英文。头部表示图片的大类性质，比如：广告（banner）、标志(logo)、菜单(menu)、按钮(button)、背景(bg)等。尾部表示图片的具体含义。比如：banner_sohu.gif，menu_aboutus.gif，title_news.gif，logo_maths.jpg等。这种命名方式一目了然，便于管理与查找。,4.4.3 文件头代码规范,文件头（
26、head）里都是一些与网页整体有关、相对独立一些的属性，比如网站标题属性，标识字符编码、作者、版权信息或关键字的标签等。文件头的规范化代码如下： 公司版权注释TITLE 网页标题网页显示字符集（简体中文为Gb2312，繁体中文为big5，英文为iso-8859-1） 网页制作者信息 网站简介 搜索关键字 网页的css规范,第5章 HTML,最初的网页都是靠编写HTML代码实现的，现在有了很多功能强大的网页编辑软件，如Dreamweaver、Frontpage等，使网页制作变得很简单。但是学习HTML语言还是很有必要的。当网页做得很复杂时往往会出现一些错误，通过常规方法已无法纠正，这时候就只能通
27、过修改源代码来改正这些错误了。对于想写脚本语言程序或者服务器端脚本的人来说，就更需要了解HTML语言。本章将首先介绍HTML的基本结构和常用的标签语法，让读者对HTML有一个初步认识；然后学习在Dreamweaver中如何查看、编写HTML代码；最后通过实例讲解如何运用HTML。,5.1 HTML的初步知识,HTML（Hypertext Markup Language）是一种Web网页元素的标记语言规范，称为超文本标记语言。所谓“超文本”，是指页面内可以包含图像、链接、多媒体对象、程序等非文本元素。所谓“标记”，是指它不是程序语言，而是由文字和标签组合而成。HTML文件是纯文本文件，可以由任意
28、文本编辑器编写，文件的扩展名为“html”。本节将主要介绍HTML语言的基本概念和常用的标签，使读者对HTML有一个初步认识。,5.1.1 HTML的基本概念,一般的HTML由标签（Tags）、代码（Codes）、注释（Comments）组成。HTML标签的基本格式是：页面内容1HTML文档特征2HTML文档格式,5.1.2 常用的HTML标签,经过上一小节的学习，读者对HTML语言有了一个大致的了解。HTML语言中涉及的标签相当多，对于初次接触它的读者来说，只需掌握一些常用的标签。在今后的学习过程中，再逐渐深入学习。1文本2标题3图像4链接5表格,5.2 查看HTML源代码,通过5.1节的学
29、习，读者已经明白一个网页无论看上去多么精致漂亮，其实质都是由HTML语言组成的。本节将学习如何查看网页的源代码以及在Dreamweaver cs4中几种查看源代码的方法。,5.2.1 查看网页源代码,查看别人网页的源代码是学习HTML语言的一种很好方式，其操作步骤也非常简单。（1）在IE浏览器中的地址栏输入网址“http:/”，打开新浪的首页，如图5.7所示。（2）单击“查看”|“源文件”命令菜单，此时网页的源代码以记事本的形式打开，如图5.8所示。,5.2.2 在Dreamweaver中查看源代码,5.2.1小节介绍了在IE中如何查看网页的源代码，在Dreamweaver cs4中可以通过多
30、种方式查看当前文档的源代码。本小节将介绍以下几种常用方式：通过拆分“文档”窗口同时显示页面和代码；打开“代码”视图在“文档”窗口中显示源代码；在代码检查器中查看源代码。具体操作步骤如下：,5.3 在Dreamweaver中编写HTML,学习HTML有一个很好的方法，就是在Dreamweaver中边学边练。Dreamweaver的所见即所得的特性，可以使我们很容易地学习HTML语法。本节将介绍四种在Dreamweaver中编写HTML的方法，分别是使用快速标签编辑器，使用源代码面板，使用标签选择器和标签检查器。,5.3.1 使用“快速标签编辑器”,要编辑少量的HTML标签，用户可以使用“快速标签
31、编辑器”，在任意时刻实现对源代码的修改，而无需打开HTMl源代码面板。“快速标签编辑器”有三种工作模式：编辑标签模式，插入HTML模式，环绕标签模式。根据在“编辑区”中选择的插入点或选中的部分不同，“快速标签编辑器”会启用不同的工作模式。下面结合实例具体说明。1.编辑标签模式2.环绕标签模式3.插入HTML模式,5.3.2 使用“代码”视图,Dreamweaver cs4提供了“编码工具栏”，在编写HTML过程中，可以方便地折叠标签，选择标签，插入注释，缩进代码等。下面分别来看各个功能的用途。1折叠标签2选择父标签3插入注释4缩进代码5使用“参考”面板,5.3.3 使用“标签选择器”和“标签编
32、辑器”,使用“标签选择器”和“标签编辑器”，读者可以方便地在“设计”视图中通过对话框从Dreamweaver标签库中选择指定的标签插入，并进行编辑。而无需记忆大量HTML语法与格式。下面以插入图像标签为例，讲解“标签选择器”与“标签编辑器”的使用方法。,5.3.4 使用“代码片断”面板,使用“代码片断”面板，可以将做网页中常用到的部分代码，例如导航、表格样式等，存储起来以便快速重复使用，是提高工作效率的有效方法，避免了重复编写代码的麻烦。Dreamweaver软件自身也提供了一些常用的代码片断供用户直接使用。本小节将学习如何创建、插入、编辑、删除代码片断。具体操作步骤如下：,第6章 文本,文本
33、在网络上传输速度较快，用户可以很方便地浏览和下载文本信息，故其成为网页主要的信息载体。整齐划一、大小适中的文本能够体现网页的视觉效果。因而文本处理是设计精美网页的第一步。本章将结合具体实例介绍在Dreamweaver CS4中如何插入文本，对文本进行排版及一些文本辅助功能。,6.1 插入文本,Dreamweaver CS4提供了多种插入文本的方法供读者选择。标题、栏目名称等少量文本，可以选择直接在文档窗口中键入；段落文本，可以选择从其它文档中复制粘贴；整篇文章或表格，可以选择导入Word、Excel文档。,6.1.1 将文本添加到文档,在Dreamweaver CS4中输入文本与Word略有不
34、同，下面通过实例来说明。要注意不换行空格，换行符的插入，文本添加效果如图6.1所示。,6.1.2 插入日期,在网页中经常需要插入日期，比如网页的更新日期，文章的上传日期等。Dreamweaver CS4提供了日期对象，可以方便地插入当前日期。下面这个例子就是利用“日期”按钮插入更新时间，效果如图6.8所示，更新时间显示为当前编辑文档的时间。,6.1.3 插入特殊字符,前两节学习了在网页中添加文本与日期，Dreamweaver CS4还提供了丰富的特殊字符插入功能，可以插入如注册商标、版权、货币符号等特殊符号。下面以网页中经常用到的版权符号为例，演示如何在文档中插入特殊符号。具体操作步骤如下：,
35、6.1.4 导入数据文档,除了直接键入文本和复制粘贴文本以外，Dreamweaver CS4还可以直接将表格式文档、Word文档、Excel文档导入到当前文档，省去了复制粘贴的麻烦。下面通过实例演示如何导入Excel表格，最终效果如图6.15所示。,6.2 设置文本格式,6.1节介绍了在网页中插入文本的几种方法，由于插入的文本大小、字体格式不一致，需要对文本属性进行设置，使其风格保持统一。,6.2.1 关于设置文本格式,设置文本格式有两种方法：使用HTML标签格式化文本，使用层叠样式表（CSS）。使用HTML标签和CSS都可以控制文本属性，包括特定字体和字大小；粗体、斜体、下划线；文本颜色等。
36、两者区别在于，使用HTML标签仅仅对当前应用的文本有效，当改变设置时，无法实现文本自动更新。而CSS则不同，通过CSS事先定义好文本样式，当改变CSS样式表时，所有应用该样式的文本将自动更新。此外，使用 CSS 能更精确地定义字体的大小，还可以确保字体在多个浏览器中的一致性。默认情况下，Dreamweaver CS4 使用 CSS 而不是HTML标签指定页面属性。CSS功能强大，除控制文本外，CSS还可以控制网页中的其他元素，具体内容将在第13章中详细讲解。这里主要介绍使用属性检查器设置文本属性的基本操作。,6.2.2 使用属性检查器设置文本属性,使用“属性检查器”可以方便地设置字体的类型、格
37、式、大小、颜色，对于初学者来说这种方法简单易用。下面结合具体实例来学习如何使用“属性检查器”设置文本属性，效果如图6.20所示。页面中的文本格式为段落，字体为宋体，颜色为灰色，大小为12像素。,6.3 设置段落格式,6.2节介绍了使用属性检查器设置文本格式的方法及操作步骤，本节将学习设置段落格式，包括对齐文本、缩进文本、使用水平线等常用功能。,6.3.1 对齐文本,在网页文字排版时，经常用到对齐文本功能。对齐文本方式主要有四种：左对齐，居中对齐，右对齐，两端对齐。操作步骤类似，下面以其中一种对齐方式“右对齐”为例来说明如何操作。,6.3.2 缩进文本,在对网页中的段落进行排版布局时，经常会用到
38、“缩进文本”命令，缩进页面两侧的文本长度，留出一定的空白区域，使页面更美观。其操作步骤如下：,6.3.3 使用水平线,使用水平线进行文本段落分割，也是常用的方法。例如，在制作网页时，通常会在页面下部版权文字的上方插入一条水平线，用以分隔文档内容，使文档结构清晰明确。效果如图6.33所示。,6.4 列表,在网页中使用列表将内容分级显示，使侧重点一目了然，内容更有条理性。在Dreamweaver CS4中创建列表有两种方法：使用“属性检查器”或“文本”菜单下的“列表”命令。Dreamweaver CS4中的列表主要分为项目列表，编号列表，定义列表三种。搜狐网站中就同时应用了上述三种样式的列表，如图
39、6.38所示。,6.4.1 创建列表,创建列表有两种方式：创建新列表，使用现有文本创建列表。两者创建列表方式操作类似。下面结合实例说明如何创建嵌套列表，效果如图6.39所示。,6.4.2 设置列表属性,通过设置列表属性，可以改变列表的类型以及样式。下面就以上一节创建的嵌套列表为例，改变其属性。具体操作步骤如下：,6.5 检查拼写,在输入文本时，有时会遇到拼写错误。使用Dreamweaver CS4的“检查拼写”命令，可以自动检查出当前文档中文本拼写的错误并将其更正，大大提高了工作效率。下面举例来说明如何检查并修改出网页中存在的拼写错误。具体操作步骤如下：,6.6 查找和替换文本,使用Dream
40、weaver CS4的“查找和替换文本”功能，可以在文档或站点中方便地查找出指定的文本或代码，并进行替换，省去了亲自动手查找修改的麻烦，大大提高了网页编辑与修改的效率。下面举例来说明如何使用该功能。,第7章 图像,图像通常用来添加图形界面（例如导航按钮）、具有视觉感染力的内容（例如Logo）或交互式设计元素（例如鼠标经过图像或图像地图），是网页中必不可少的元素之一。本章节将和大家一起探讨常用的Web图像的种类、基本概念及在Dreamweaver中的具体操作方法。,7.1 常用的Web图像格式,计算机对图像的处理也是以文件的形式进行的，由于图像编码的方法很多，因而形成了许多图像文件格式。但Web
41、页中通常使用的只有三种格式，即GIF、JPEG和PNG。本节将重点介绍三种图像格式的特点及其适用的范围。,7.1.1 GIF格式,GIF（Graphics Interchange Format）是世界最大的联机服务机构CompuServe所在1987年开发的图像文件格式，扩展名为“.gif”。GIF文件是经过压缩的，最多只支持256种色彩的图像，容量较小，解码与下载速度快。可以创建简单的动画，并支持透明背景。最适合显示色调不连续或具有大面积单一颜色的图像，例如网页中的导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。,7.1.2 JPEG格式,JPEG格式是由联合图像专家组制定的文件格式
42、，扩展名为“.jpg”或“.jpeg”。JPEG是一种有损压缩，可支持1670万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。所以在网页中使用JPEG图像时，不妨多试几次不同的压缩率，以找到压缩率与失真度之间的最佳结合点。,7.1.3 PNG格式,PNG（Portable Network Graphic Format）是20世纪90年代中期开发的一种新兴的网络图像格式，文件扩展名是“.PNG”。PNG是Macromedia公司的Fireworks的默认格式，可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是完全可编辑的。目前，不同浏览器对PN
43、G的支持是不一致的，因而不建议在网页中使用PNG文件，还应该将它们导出为GIF或JPEG格式。,7.2 插入图像与图像占位符,在7.1节中详细介绍了网页中常用的图像格式，下面来学习如何在网页中插入图像，使网页更加美观，效果如图7.1所示。,7.2.1 插入图像,（1）将光标放在“编辑区”中要插入图像的位置，如图7.2所示。然后在“插入”工具栏的“常用”类别中，单击“图像”按钮。（2）在弹出的“选择图像源文件”对话框中，浏览并选中要插入的图像“banner.gif”，单击“确定”按钮，如图7.3所示。文档中即会出现插入的图像。注意：如果当前工作的文档未保存，则Dreamweaver会弹出提示窗口
44、，生成一个对图像文件的file:/引用，如图7.4所示。将文档保存到站点中的任何位置后，Dreamweaver将该引用转换为文档相对路径。（3）在将图像插入Dreamweaver文档后，Dreamweaver会自动在HTML源代码中生成对该图像文件的引用。生成代码如下：,7.2.2 插入图像占位符,本小节来学习在网页中插入图像占位符。图像占位符是Dreamweaver对图像功能的补充，指在将最终图像添加到Web页之前使用的替代图形。在对网页进行布局时经常用到这一功能，可以设置不同的颜色和文字来替代图像。如图7.6所示。,7.3 图像属性设置,在网页中插入的图像大小、位置通常需要调整才能与网页相
45、配，可以通过Dreamweaver的“属性检查器”来设置图像的基本属性，包括调整图像的大小，对齐图像等。,7.3.1 调整图像大小,本小节将介绍两种调整图像大小的方法：以可视化的形式调整及在属性检查器中调整。,7.3.2 对齐图像,插入图像默认的对齐方式是“左对齐”，可以通过对齐图像操作调整图像的位置，使图像与同一行中的文本、另一个图像、插件或其它元素对齐。具体操作步骤如下：（1）在“编辑区”中单击选中要调整的图像，可以看出图像当前默认的对齐方式为“左对齐”，如图7.12所示。（2）在“属性检查器”中单击“对齐”下拉列表框选择“右对齐”选项，也可以使用“对齐”按钮（左对齐、右对齐、居中对齐）设
46、置图像的水平对齐方式，如图7.13所示。调整后的Logo位于表格的右侧，如图7.14所示。,7.4 在Dreamweaver中编辑图像,Dreamweaver具有强大的图像编辑功能，读者无需借助外部图像编辑软件，就可以轻松实现对图像的重新取样、裁剪、调整亮度和对比度、锐化等操作，获得网页图像显示的最佳效果。,7.4.1 重新取样,当对网页中图像大小进行调整后，图像显示效果会发生改变，如图7.15所示。左边为原始图像，右边为缩小后图像，很明显调整后图像的效果不如原图。此时，可以通过“重新取样”增加或减少图像的像素数量，使其与原始图像的外观尽可能匹配。对图像进行重新取样可以减少图像文件大小，提高下
47、载速度，同时会降低图像品质。,7.4.2 裁剪,在Dreamweaver CS4中，读者不再需要借助外部图像编辑软件，利用Dreamweaver的“裁剪”功能，就可以轻松地将图像中多余的部分删除，突出图像的主题。比如，在制作网页的“友情链接”栏目时，发现插入的Logo大小不一，很不美观，需要将Logo中多余部分删除。具体操作步骤如下：（1）在“编辑区”中单击选中要裁剪的原图像，如图7.17所示。（2）在“属性检查器”中单击“裁剪”按钮，此时图像上会出现8个调整大小手柄，阴影区域为要删除的部分。拖动调整大小手柄，将图像的保留区域调整到合适大小，如图7.18所示。（3）单击“裁剪”按钮或双击图像保
48、留区域，效果如图7.19所示。友情链接中Logo的多余部分就被删除了。,7.4.3 亮度和对比度,在Dreamweaver中，可以通过“亮度和对比度”按钮调整网页中过亮或过暗的图像，使图像整体色调一致。例如，网页中的“新品上架”标题图像亮度过暗，与网页整体风格不符，需要调整图像的亮度和对比度，如图7.20所示。,7.4.4 锐化,Dreamweaver的“锐化”功能与Photoshop相似，是通过提高图像边缘部分的对比度，从而使图像边界更清晰。下面来学习如何将图像中边缘模糊的字体清晰化。（1）在“编辑区”中单击选中要编辑的图像，如图7.24所示。（2）在“属性检查器”中单击“锐化”按钮。（3）在弹出的“锐化”对话框中，分别拖动滑块左右调节或在相应文本框中输入010之间的数值，直到达到满意效果，单击“确定”按钮，如图7.25所示。（4）锐化后的图片边缘部分更加清晰，效果如图7.26所示。,7.5 创建图像的特殊效果,在7.4小节中介绍了Dreamweaver基本的图像编辑功能，利用Dreamweaver还可以实现网页图像的特殊效果。本小节将学习如何设置图像替换文本以及创建鼠标经过图像效果。,7.5.1 Alt属性的使用,
