网站建设与网页制作课件整套电子教案

《网站建设与网页制作课件整套电子教案》由会员分享，可在线阅读，更多相关《网站建设与网页制作课件整套电子教案（223页珍藏版）》请在金锄头文库上搜索。

1、网站建设与网页设计第一章基础知识网站建设与网页设计普通高等教育“十二五”规划教育第一章基础知识1.1 网站的基础知识1.2 网页的基础知识1.3 网站与网页的关系与设计原则1.1网站的基础知识1.1.1 Internet概述l什么是InternetInternet即国际计算机互联网，在中国也称为“因特网”或“万维网”，是由符合TCP/IP等网络协议的网络组成的互联网，是目前全世界最大的网络，包含丰富多彩的信息，并提供方便快捷的服务。lInternet的组成服务器：网络中能对其它机器提供某些服务的计算机系统。客户机：用户能够在网络环境汇总工作、访问网络共享资源的计算机。网络通信协议：网络之间沟通

2、、交流的桥梁，只有相同网络协议的计算机才能进行信息的沟通与交流。目前常见的通信协议有TCP/IP、SPX/IPX、OSL、X.25、HTTP等。1.1网站的基础知识1.1.1 Internet概述lInternet提供的服务WWW服务Gopher信息搜索文件传输电子邮件BBS服务电子商务1.1网站的基础知识1.1.2 网站的概念和构成l什么是网站在互联网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。实质上，网站是一种通讯工具，就像布告栏一样。l因特网与网站的关系网站是因特中信息的载体和展板。l网站的构成硬件方面：主要包括提供服务功能的服务器、网络连接设备和周边设

3、备。软件方面：主要包括操作系统、应用程序、信息服务、数据库、安全防护等。信息资源：包括文本、图形、图像和多媒体元素等。1.1网站的基础知识1.1.3 网站的相关技术知识lIP地址与域名IP：IP地址是一种无连接的协议，其主要任务是提供网络到网络的寻址及路由信息。Internet上的每台主机(Host)都有一个唯一的IP地址。IP地址的命名：目前因特网中的IP地址命名方法有两种，一种是IPv4版，另一种是IPv6版。域名：是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位。URL URL（统一资源定位符）是全球WWW服务器资源的标准寻

4、址定位编码，俗称“网址”。URL是一个资源位置的完整描述，包括资源所在的计算机名、目录名以及文件名。1.1网站的基础知识1.1.3 网站的相关技术知识l传播技术超链接与超文本：IP地址是一种无连接的协议，其主要任务是提供网络到网络的寻址及路由信息。Internet上的每台主机(Host)都有一个唯一的IP地址。交互技术与流媒体技术：交护技术实现了信息的互动；流媒体指在数据网络上按时间先后次序传输和播放的连续音/视频数据流，丰富了用户在使用上的操作性。l网站速度和信息量衡量网站的两个最重要技术指标就是网站速度和信息量。网站速度包括了网站传输速度和网站响应速度；信息量主要是指网站服务器上存储信息内

5、容的多少。两者之间有着密切的关系，特别是后者对前者的影响有时起着决定性的作用。1.1网站的基础知识1.1.4 网站的传播模式和特点l网站传播模式信息的传播者与信息接收者之间的单向传递关系变为双向互动关系。传播内容不断丰富，形式多样化。l网站传播特点实时性：通过减少传统媒体在信息产品制作过程中的环节，提高信息的时效性。全球性：互联网媒体打破了传统媒体的传播范围的地域限制，其受众通过互联网遍及全世界。交互性：网站可以做到双向、多向的交流，在点点互通的情况下，传者与受者之间没有明显的界线，传者既发布讯息，又同时接受讯息。1.1网站的基础知识1.1.5 网站分类l按服务性质分类主要包括门户网站、游戏网

6、站、搜索网站、企业网站、政府、组织网站、个人网站等。l按域名的命名方法分类l按网站的内容分类l按网站架构技术分类1.2网页的基础知识1.2.1 网页的概念和构成l网页概念网页是一种存储在Web服务器上，通过网络进行传输，并被浏览器所解析和显示的文档类型，其内容由XHTML构成。根据内容对交互响应方式的不同，可以将网页分为静态网页和动态网页两大类。l网页构成在网页中，包括文本、图片、动画、音频、视频、超链接等元素，这些元素与网页文件是相对独立的。1.2网页的基础知识1.2.2 网页的功能网页的主要功能就是通过网页中的不同的元素将信息传达给网站的访问者。网页是网站信息的载体，通过网站可以网站所有者

7、如企业、个人等的形象，利用不同网页制作技术设计的网页功能也各不相同。主要是两个功能。l信息传递功能l信息交互功能1.2网页的基础知识1.2.3 网页制作工具l网页编辑工具Dreamweaver：是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具，同时集成了程序开发语言，对ASP、.NET、PHP、JS的基本语言和连接操作数据库，都是完全支持的。这也是本书主要介绍的工具。FrontPage：有良好的易用性，被认为是优秀的网页初学者的工具，但其功能无法满足更高要求。此外，还有几款常用软件：Adobe GoLive、HomeSit和Visual Studio。素材处理工具P

8、hotoshop：Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件。1.2网页的基础知识1.2.3 网页制作工具l素材处理工具Flash：应用于互联网网页的矢量动画设计软件。Fireworks：Macromedia公司发布的一款专为网络图形设计的图形编辑软件，与 Macromedia Dreamweaver和 Macromedia Flash共同构成的集成工作流程可以使用户创建并优化图像，同时又能避免由于进行Roundtrip 编辑而丢失信息或浪费时间。l网页上传工具友好的用户界面，稳定的传输速度，LeapFTP 与

9、FlashFXP 、CuteFTP堪称FTP三剑客。但是它们都各有不足，要灵活使用。1.2网页的基础知识1.2.4 网页设计语言lHTMLHTML（超文本标识语言）是用于创建Web文档(即Homepage文档)的编程语言。HTML并不是一种标准的编程语言，它只是一些能让浏览器看懂的标记。lCSSCSS(层叠样式表）是一组格式设置规则，用于控制Web页面的外观。lJavaScriptJavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言，最初起源于LiveScript语言，使用它的目的是与HTML超文本标记语言、Java 脚本语言（Jav

10、a小程序）一起实现在一个Web页面中连接多个对象，与Web客户交互作用。1.2网页的基础知识1.2.4 网页设计语言lXML与XSLTXML即可扩展标记语言，它与HTML一样，都是标准通用标记语言。但XML与HTML又是不同的。XML是用来存储数据的，重在数据本身；而HTML是用来定义数据的，重在数据的显示模式。XSL是指可扩展样式表语言，是一种用于以可读格式呈现XML数据的语言。xsl是一种标记语言，表示如何将xml文档的内容装换成另一种形式的文档。通过为xml写xsl来使得xml显示成不同的格式。1.3网站与网页的关系与设计原则1.3.1 网站与网页的关系l网页是网站的信息载体网站是一组相

11、关网页的集合，即若干个网页文件经过规划组织以后彼此相连而形成完整结构的信息服务系统。l网站是由不同形式的网页组成的网站是由网页构成的。网页是构成网站的基本元素，是承载各种网站应用的平台。l网页和网站是有区别的网站是有独立域名、独立存放空间的内容集合，这些内容可以是网页，也可以是程序或者其他文件，不一定要有很多网页。只要网站有独立域名和空间，只有一个网页也是网站。反过来，即使很多有网页，但没有独立域名和空间，也只能叫做网页，而不能成为网站。1.3网站与网页的关系与设计原则1.3.2 网站设计原则l内容与形式相统一网站的形式是指网页的排版、布局、色彩和图形的运用等外在视觉效果。无论采取哪种形式都不

12、能单纯追求网页的美观而忽视了内容的建设。l定位明确在设计一个网站之前，首先要明确网站的发展方向，即网站的定位。网站定位的核心在于寻找或打造你网站的核心差异点。l导航清晰导航设计使用超文本链接或图片链接，使人们能够在您的网站上自由前进或后退，而不会让他们使用浏览器上的前进或后退。l兼顾下载速度和美观在注意网站内容的同时，要考虑网络带宽的限制，保证网站的响应时间。1.3网站与网页的关系与设计原则1.3.3 网页设计原则l布局合理网页设计中，内容组织是最重要、最影响设计品质的方面。合理的网页布局可通过构建好的CSS布局、表格布局和框架布局实现。l色彩统一网页给人的印象来自于视觉，色彩代表了不同的情感

13、，有着不同的象征含义。因此，网站的色彩相当重要。不同的色彩搭配产生不同的视觉效果，同时，网页的色彩处理一定要总体协调，使整体的色彩效果和谐。l更新维护方便访问者希望看到新鲜的内容，没有人对过时的信息感兴趣，所以网站的信息一定要注意及时性，时刻保持新鲜感是很重要的一项工作内容。谢谢！网站建设与网页设计第二章网站规划与设计第二章网站规划与设计2.1 网站规划2.2 网站设计2.1网站规划2.1.1 网站规划概述网站设计首先要做好规划工作，虽然不同类型的网站规划流程有所区别，但就整体上来说还是具有一定的共性，网站规划的流程如右图所示。2.1网站规划2.1.2 方案提出网站建设方案一般要从建站目的、网

14、站功能要求、网站定位、确定网站类型、确定网站规模、建站周期等几个方面进行阐述。l明确建站的目的对外宣传树立形象社会效益与经济效益l明确网站功能需求一般而言，网站的基本服务功能包括WEB、邮箱和FTP功能。各个网站都要根据实际建站目的完善功能。l网站定位所谓网站定位就是网站在internet上扮演什么角色，要向目标群(浏览者)传达什么样的核心概念，透过网站发挥什么样的作用。2.1网站规划2.1.3 可行性分析 所谓可行性分析是通过对项目的主要内容和配套条件进行调查研究和分析比较，并对项目建成以后可能取得的财务、经济效益及社会环境影响进行预测，从而提出该项目是否值得投资和如何进行建设的咨询意见，为

15、项目决策提供依据的一种综合性的系统分析方法。 对网站的建设的可行性分析报告的编写前，要从客观、公正的立场进行调查研究，可以从以下几个方面进行分析说明：技术可行性分析。从技术角度分析建站的可能性和必要性。运营可行性分析。对网站运营情况进行分析和预测。成本可行性分析。对维持网站正常运行及相关费用的预测分析。其他可行性分析。对与网站建设有关的问题进行可行性分析。2.1网站规划2.1.4 制定资源分配计划l人力资源分配 建站工作都需要由一个项目小组来完成，小组成员包括系统管理人员、网站结构规划人员、网页美工设计人员、主页制作人员和网站程序开发人员。l技术资源分配 网站建设的技术资源包括硬件资源、软件资

16、源、技术资料、文档资料等内容。l资金分配 网站建站过程中常规性的费用支出大致有如下几类：网站接入、网站开发费用、网站信息维护费用、人力资源费用。在网站规划阶段，要充分考虑各个方面的费用，进行合理的资金分配，保证网站建设过程不受资金问题困扰。2.1网站规划2.1.5 确定信息构架和内容l确定信息架构 网站的信息架构的一般包括调查、分析、设计和执行过程，它涉及到组织、标识、导航和搜索系统的设计，目的是帮助人们成功地发现和管理信息。网站可以通过好的标识系统、导航系统和搜索系统来帮助用户快速定位信息，同时便于网站的后台管理。l确定网站内容 网站内容的规划优劣直接影响到用户访问网站的频率，不同行业的企业

17、网站页面内容不尽相同，但其主要的功能和模块却万变不离其宗。网站的建设者应该根据自己的实际情况，在网站上放置相应的主题和内容，只有内容充实且实用，才能有效的实现网站的建站目，并最终获得相应的经济效益。2.1网站规划2.1.6 确定方案实施l确定硬件系统建站的规模和硬件投资的多少决定了硬件系统的规模和性能。硬件系统是由网站服务器、集线器、路由器、网卡、连接线等网络设备，以及网络接口、UPS、机房等相关的设备组成的。l确定软件系统网站的软件系统要根据网站采用什么样的技术而决定。网站信息量的大小，决定了采用什么样的数据库。可供选择的大型数据库有Oracle、Sybase、DB2、SQL server，

18、小型数据库有Access、MySQL、BD2等。l确定网站与网页设计方案2.2网站设计2.2.1 设计概述 网站设计是将网站策划案中的内容、网站的主题模式以及结合自己的认识，通过艺术的手法表现出来，是一个把软件需求转换成用软件网站表示的过程。也就是在因特网上，根据一定的规则，使用Dreamweaver、photoshop等工具制作的用于展示特定内容的相关网页的集合。 总体上，网站设计可以通过准备、思考、初步设计、展示、反馈、实施、测试、维护几个阶段来实现。 网站设计与网页制作不同，网页制作通常就是将网页设计师所设计出来的设计稿，按照W3C规范用html语言将其制作成网页格式。网站设计要能充分吸

19、引访问者的注意力，让访问者产生视觉上的愉悦感。因此在网站设计过程中，必须将网站的整体设计与网页设计的相关原理紧密结合起来。2.2网站设计2.2.2 结构设计l网站目录结构设计网站目录结构的好坏，对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。在设计网站的目录结构时，要注意以下几点。（如下个页面所示）不要将所有文件都存放在根目录下按栏目内容建立子目录构建层次简单、含义简洁、清晰的目录l网站信息结构设计信息结构指的是网站上页面的规划，是网站的骨架。信息的结构类型包括矩阵结构、线性结构、层次结构等多种方式。2.2网站设计“校园风光”网站的目录结构示意图2.2网站设计2.2.2 结构设计l

20、网站层次结构设计网站的层次是指一级页面（首页或者主页面）、二级页面和三级页面之间的结构关系，具体如下图所示。2.2网站设计2.2.3 网站形象的艺术设计l形象定位根据商品进行形象定位根据市场消费群体进行定位l标志形象 设计制作一个网站的标志(logo)，就如同商标一样，logo是一个站点特色和内涵的集中体现。下面是一些知名网站的标志。2.2网站设计知名网站的LOGO2.2网站设计2.2.3 网站形象的艺术设计l整体形象 网站的整体形象主要包括两个方面：网站之间的整体一致性和整体形象的一致性。 对于一些跨地域公司的网站而言，它们要面对的是具有不同语言、文化风格的人群，这时网站的风格、形象等就会有

21、不同。但对同一网站而言，不论语言、风格、形象如何变化，从整体上必须保持它们之间的一致性，如网站的结构、信息摆放位置等。 网站是由大量的网页组成的，为了保持网站的整体一致性，应将不同网页的版式设计为同一形式；同时在网站的各个页面保持一致的色调也是保持网站之间整体一致性的重要手段。 下面是中国五矿集团网站的中英文页面的对比。2.2网站设计2.2.4 网站风格的艺术设计一个网站风格的好坏直接影响到了用户的体验度，所谓网站风格，就是指某一网站的整体形象给浏览者的综合感受，是站点与众不同的特色，它能透露出设计者与企业的文化品位。l理性诉求强调理性诉求的网站大多是科技型企业网站，通过产品、技术、服务的介绍

22、，突出企业特点。l感性诉求信息强调感性诉求的网站大多数是以服务为主的企业，以通过网站来树立企业形象，提供相关的服务信息为建站目的。l综合诉求当单一的理性诉求或者感性诉求都不能准确的向用户传达网站的目的、展示企业产品或者服务时，就需要将这两种诉求结合起来，在网站的不同部分采用不同的方法进行设计。谢谢！网站建设与网页设计第三章网页的艺术设计第三章网页的艺术设计3.1网页设计注意的问题3.3 网页的色彩3.4 网页元素设计3.3 网页的构图3.1网页设计注意的问题3.1.1 浏览器 在设计网页时，面临最大的挑战就是因对不同的浏览器、操作系统和硬件平台，虽然大多数HTML元素都可以在浏览器中显示并稳定

23、的运行，但是在执行某些脚本语言时，不同的浏览器会表现出不同的特点。l浏览器类型、版本与网站访问者之间的关系 不同浏览器对不同网页的显示效果是不同的。同一浏览器的不同版本对同一页面的显示效果也有差距。因此在设计网页时要充分考虑不同浏览器和浏览器不同版本之间的差距。l浏览器与网页制作技术之间的关系 网页设计时要选用正确的技术，避免不同浏览器对某些技术的不支持的情况出现。3.1网页设计注意的问题3.1.1 浏览器l网页兼容性问题在设计网页时需要考虑不同浏览器之间的区别，使用的功能也要考虑到浏览器之间的兼容性。3.1.2 显示器对于显示器而已，主要考虑分辨率问题和颜色问题。3.2网页的色彩3.2.1

24、色彩基础在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。只有掌握色彩构成原理，熟知各色彩的相互关系及各种色彩的生理或心理作用，结合自己所具备的平面构成知识，在网页设计中正确用色，才能实现传达特定信息和渲染页面的效果的目的。l色彩的三要素：色调（色相）、饱和度（纯度）和亮度（明度），人眼看到的任一彩色光都是这三个特性的综合效果。l（电脑屏幕）色彩的三原色：RGB（红、绿、蓝）。l色立体：指以三维空间表述色彩三要素的立体色彩，是依据色彩的色相、明度、纯度变化关系，借助三维空间，用旋围直角坐标的方法，组成一个类似球体的立体模型。3.2网页的色彩3.2.1 色彩基础 色立体为设计者提供了直观的色

25、彩资料，可以帮助设计者快速地查找到所需要的颜色标号，更清楚的理解色彩分类、对比与调和的规律，其模型如右图。 色立体有多种，主要有德国奥斯特瓦尔德色立体（奥式色立体）、美国蒙赛尔色立体（蒙氏色立体）、日本色研色立体等。3.2网页的色彩3.2.2 色彩与心理 色彩与人类的色彩生理、心理体验相联系，从而使客观存在的色彩仿佛有了复杂的性格。色彩的直接心理效应来自于色彩的物理光刺激对人的生理发生的直接影响。l白色：白色给人印象中洁净、纯真、清白、卫生、恬静等。l灰色：灰色是中性色，其突出的性格为柔和、细致、平稳、朴素。l黑色：黑色往往给人感觉沉静、严肃、庄重、含蓄，另外，也易让人产生悲哀、恐怖、不祥、沉

26、默、消亡、罪恶等消极印象。l红色：红色易使人联想起太阳、火焰、热血、花卉等，感觉温暖、兴奋、活泼、热情、积极、希望等向上的倾向。l蓝色：蓝色的色感朴实、内向，是一种有助于人头脑冷静的颜色。l绿色：绿色是具有黄色和蓝色两种成分的色，是一种柔顺、恬静、优美的颜色。3.2网页的色彩各种色彩的网页3.2网页的色彩3.2.3 色彩的搭配l网页色彩搭配原理 对于网站的色彩搭配应本着“总体协调、局部对比”的大原则进行，同时注意一下几点：鲜明性、独特性、合适性、联系性、对比性。同时，也要根据网站所在地区的文化对配色方案加以调整。l网页色彩搭配技巧 网页颜色的选择中要学会色彩的搭配，同时注意避免在网页中使用忌讳

27、的色彩搭配。为了方便网页制作，还可以使用比较固定的一些色彩搭配方案。 随着网页制作经验的积累，对于网页用色会出现从单色-五彩缤纷-标准色-单色的一个制作趋势。l使用非色彩技术资源分配 这个主要是对颜色搭配有一定经验的设计者来说。3.3网页的构图3.3.1 点、线、面 网页是一幅特殊的画面，需要通过一定的方式、方法，将不同的视觉元素安排好，才能形成一幅完整、协调的图像。 点、线、面是构成空间视觉的基本元素，是表现视觉形象的基本设计语言。任何视觉形象都是由这三者构成的。网页设计实际上就是如何合理的处理三者之间的关系。3.3.1 点、线、面 一个好的网页布局应该给人一种安定、平稳的感觉，它不仅表现在

28、色彩协调,还包括文字、图像等要素的空间占用上分布均匀，给人一种协调的感觉。在显示屏这样一个狭小的范围内进行网页设计需要对网页中的元素进行合理的布局，使各元素的重心、平衡点和视觉焦点得到统一。3.3网页的构图3.3.3 网页布局l网页布局的概念 网页布局包含了表格、框架的应用、文字缩排、段落等等，而布局并不是整齐就好，还要有明确的分类，以及主题的适当规划。其内容主要有以下方面。页面尺寸整体造型页眉与页脚文本图片多媒体3.3网页的构图3.3.3 网页布局l网页布局原则 网页的布局灵活多样，但万变不离其宗，其原则主要有以下几点。根据网站的客户群选择合适的布局整体布局要大方得体主次分明、条理清晰注意网

29、页的平衡、对称3.3网页的构图3.3.3 网页布局l网页布局技术 网页布局方法有很多种，可以根据设计者的需求在草稿纸上绘出满意的网页布局，也可以采用一些技术来布局，下面介绍三种较为常见的网页布局技术。层叠样式表（CSS）：是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。这是一种非常实用的布局技术。框架布局：框架的英文是Frame，它实际上对应的是HTML语言中的Frame元素。框架布局就是将一个网页分成多个页面，每一网页对应一个框架。表格布局：表格的英文是Table，在HTML语言中对应Table元素。表格布局几乎已经成为一种标准，随便浏览一个网站，其中许多页面都是用表格布局

30、的。3.3网页的构图3.3.3 网页布局l网页布局类型 网页布局中有几种基本的布局类型。左右对称结构布局，如右图所示。3.3网页的构图3.3.3 网页布局l网页布局类型“同”字型结构布局，如下图所示。3.3网页的构图3.3.3 网页布局l网页布局类型“回”字型结构布局，如下图所示。3.3网页的构图3.3.3 网页布局l网页布局类型“匡”字型结构布局，如下图所示。3.3网页的构图3.3.3 网页布局l网页布局类型自由式结构布局，如下图所示。3.3网页的构图3.3.3 网页布局l网页布局类型“另类”结构布局，如下图所示。3.3网页的构图3.3.4 构图实例 在网页布局中，最常见的布局形式是根据页面

31、大大小，将页面分成不同的栏或列。根据分栏的多少可将构图分为单栏式、双栏式、三栏式和多栏式。l单栏式 具体如右图所示。3.3网页的构图3.3.4 构图实例l双栏式 具体如右图所示。3.3网页的构图3.3.4 构图实例l三栏式 具体如右图所示。3.3网页的构图3.3.4 构图实例l多栏式 具体如右图所示。3.4网页元素设计3.4.1 标志设计 LOGO是网站形象的重要体现。一个好的LOGO往往会反映网站及制作者的某些信息，特别是对一个商业网站来话，我们可以从中基本了解到这个网站的类型，或者内容。l标志的表现形式标识图案标识文字组合标志3.4网页元素设计3.4.1 标志设计l标志的设计方法 网页标志

32、的设计一般有三种方法，一是直接以网站网址作为标志，如智联招聘网站标志；二是根据提供的产品和服务来设计标志，老虎地图网站标志，将老虎、地图、手机等网站主要元素都包括在了标志中；三是以传递网站运营理念作为设计的思想基础。不论采用哪种方法，应尽力做到以下几点：用尽可能简洁的图型、线条及色彩来完成。力求巧妙、独特的构思，以达到形式美的视觉效果。图形既要简练、概括，又要讲究艺术性，让看过的人能够记得住。3.4网页元素设计3.4.2 文字设计 页面里的正文部分是由许多单个文字经过编排组成的群体，从艺术的角度可以将字体本身看成是一种艺术形式。在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样

33、非常关键。l文字设计的原则文字的适合性文字的可识性文字的视觉美感文件的独特性3.4网页元素设计3.4.2 文字设计l文字设计的方法整体风格的统一笔画的统一方向的统一空间的统一3.4网页元素设计3.4.2 文字设计l网页中字体的选择 由于网页字体要求浏览者必须具有相应的本地字库，才会正常显示，否则将会按照系统默认的字体显示，所以设计网页字体就不得不考虑用户体验问题。 目前，对中文网站而言，宋体的适应性最强，黑体第二，微软雅黑次之。 主流的英文字体包括Verdana、Georgia、Courier、New sans-serif、Arial、Times NewRoman、Impact六种字体，在各浏

34、览器上显示统一性也比较好。3.4网页元素设计3.4.3 背景设计 在网页设计演化的漫长路程中，网页风格的变化尤其明显。最容易注意到的一个主要变化，就是背景。如今，背景已经成为决定网站的视觉效果如何的核心特征之一。 主要的背景有如下分类。l颜色背景l沙纹背景(如右图所示)l合成背景l局部背景谢谢！网站建设与网页设计第四章CS4入门说明：本章节中的具体操作步骤参见书籍的对应章节。说明：本章节中的具体操作步骤参见书籍的对应章节。第四章CS4入门4.1 Dreamweaver的功能4.2 Dreamweaver CS4的工作环境4.14.1 DreamweaverDreamweaver的功能的功能 D

35、reamweaver是一款专业的网页制作软件，它的可视化编辑能够使用户快速创建富有特色的网页，同时，它所集成的源代码功能为广大编程人员提供了面向细节的工具。l网页制作 Dreamweaver为各种网页和网页文本的开发提供了灵活的环境。Dreamweaver把可视化编辑器和代码编辑器集成在一起，这极大提高了用户的效率。4.14.1 DreamweaverDreamweaver的功能的功能l站点管理 Dreamweaver不仅是一款网页制作软件，也是一个站点管理工具。它提供了合理组织和管理所有与站点相关的文档的方法，并且简化了组更新的文件锁定和跟踪性能。4.2 Dreamweaver CS44.2

36、 Dreamweaver CS4的工作环境的工作环境l欢迎界面4.2.1 Dreamweaver CS4的界面4.2 Dreamweaver CS44.2 Dreamweaver CS4的工作环境的工作环境l工作界面 此工作界面中，包括标题栏、菜单栏、文档窗口、状态栏、面板组、属性面板等元素。4.2.1 Dreamweaver CS4的界面4.2 Dreamweaver CS44.2 Dreamweaver CS4的工作环境的工作环境l菜单栏 菜单栏位于标题栏的下方，提供了Dreamweaver CS4的所有命令，包括了以下10个菜单选项：【文件】、【编辑】、【查看】、【插入】、【修改】、【格

37、式】、【命令】、【站点】、【窗口】、【帮助】。4.2.1 Dreamweaver CS4的界面l工具栏 Dreamweaver中的工具栏有四种模式：“样式呈现”工具栏、“文档”工具栏、“标准”工具栏和“编码”工具栏。4.2 Dreamweaver CS44.2 Dreamweaver CS4的工作环境的工作环境l状态栏 状态栏位于文档窗口底部，它是用户需要关注的区域，包括标签选择器、选取工具等功能按钮、窗口大小等信息。4.2.1 Dreamweaver CS4的界面4.2 Dreamweaver CS44.2 Dreamweaver CS4的工作环境的工作环境 Dreamweaver CS4的

38、面板包括浮动面板和属性面板，而Dreamweaver以前版本的对象面板集成到了浮动面板。它们位于文档窗口之上，用户可以在文档和面板之间自由切换。l浮动面板 Dreamweaver的工具集（包括对象、行为、层等）都有自己的窗口和面板,采用了完全自定义化的浮动面板，可以使用户实现对工作区最大限度的控制。4.2.2 Dreamweaver CS4的面板【插入】面板【数据库】面板【文件】面板4.2 Dreamweaver CS44.2 Dreamweaver CS4的工作环境的工作环境l属性面板 【属性】面板显示了在文档窗口中所选中元素的属性，并允许用户在属性面板直接对元素属性进行修改。 在【属性】面

39、板的右下角，有一个三角形标记，用户可根据三角形标记的向下/向上指向，扩展/折叠“属性”面板。4.2.2 Dreamweaver CS4的面板扩展的【属性】面板折叠的【属性】面板谢谢！网站建设与网页设计第五章站点与文档操作说明：本章节中的具体操作步骤参见书籍的对应章节。说明：本章节中的具体操作步骤参见书籍的对应章节。第五章站点与文档操作5.1 规划站点结构5.3 站点管理5.2 创建本地站点5.4 文档操作5.15.1 规划站点结构规划站点结构 站点是一系列文件的集合。本地站点是位于客户端的网页制作者所使用的文件夹。 作为一个网页设计者，应熟悉网页设计流程，以便更好地规划自己的工作。创建一个站点

40、一般如以下步骤。对站点进行规划，即必须明确用户的站点准备向着哪个方向发展，提供什么服务。按照思路创建站点的基本构架。利用Dreamweaver可以再本地计算机上构建出整个站点的框架，对放置文档的文件夹进行合理分类和命名。开始进行具体的网页设计。在站点编辑完成后，需要将本地站点同位于Internet服务器上的远程站点关联起来，然后定期更新。5.1.1 规划站点的步骤5.15.1 规划站点结构规划站点结构 一个网站中包含大量的文档、图片和媒体（如Flash、音乐、视频等）内容，如何对这些文件进行管理并规划好站点结构是最为重要的。一个规划好的饿网站将会让人感觉紧紧有条，同时对于使用者的日常网站操作（

41、如页面更新、改版等）也会更加轻松。 规划站点要注意下面三个原则。将不同的文件进行分类，分别放置于单独的文件夹中便于管理。在对文件或文件夹命名时需注意几点。例如使用英文或汉语拼音作为文件或文件夹的名称；名称中不能包含空格等非法字符；命名应有明确意义，方便日后的管理等。合理安排各种类型的文件。一般来说，网站的图片文件放置在根目录下名为images的文件夹中；音乐文件放置在根目录下名为music的文件夹中。5.1.2 规划原则5.25.2 创建本地站点创建本地站点 网站制作是一个循序渐进的过程，随着网站内容的丰富，站点目录会逐步丰富起来。需要特别提醒的是看，一定要把本地站点中使用的所有资源都存储到站

42、点目录中。 下图为建立后的本地根目录。5.2.1 创建本地根目录5.25.2 创建本地站点创建本地站点 下面为具体步骤中的截图。5.2.2 使用基本向导创建站点5.25.2 创建本地站点创建本地站点 在Dreamweaver中完成具创建站点后，【文件】面板如下。5.2.2 使用基本向导创建站点5.25.2 创建本地站点创建本地站点 对于“高级”选项卡设置，主要是设置【本地信息】、【远程信息】和【测试服务器】的参数。 在菜单栏中，选择【站点】【新建站点】命令，打开【站点定义】对话框，单击打开“高级”选项卡。5.2.3 使用“高级”选项卡设置站点5.35.3 创建本地站点创建本地站点 对一个已经创

43、建好的站点，还可以更改站点布局、重新规划站点、对站点的信息进行编辑，也可以将站点从列表中删除。若需要创建多个结构相同或相似的站点，还可以利用站点的复制功能。 在菜单栏中，选择【站点】【管理站点】命令，打开【管理站点】对话框。单击各按钮，可进行相对应的操作。5.3.1 管理站点5.35.3 创建本地站点创建本地站点 在Dreamweaver中制作网页，站点中的所有文件操作（如创建网页、更改网页名、删除网页等）一般都可在“文件”面板中进行。l建立站点的文件夹结构 Dreamweaver中可以直接在站点中添加文件和文件夹。l其他文件操作 在【文件】面板中，可以快速使用鼠标右键进行文件操作（如剪切、拷

44、贝、删除、复制等）。5.3.2 文件操作5.35.3 创建本地站点创建本地站点 利用站点地图，可以用图形化的方式查看站点结构。 在【文件】面板的工具栏中单击【展示以显示本地和远程站点】按钮，打开站点管理窗口。5.3.3 站点视图5.4 5.4 文档操作文档操作 在Dreamweaver CS4中，新建文档有几种方式，这里介绍2中新建文件的方法。l使用欢迎界面 启动Dreamweaver CS4时，系统会自动打开欢迎界面。使用该界面可以快速执行一些常用操作，包括打开最近的项目、新建文件或站点、主要功能的使用等。l使用【新建文档】对话框 在Dreamweaver CS4打开后，在菜单栏中选择【文件

45、】【新建】命令，打开【新建文件】对话框。5.4.1 新建文档5.4 5.4 文档操作文档操作 下图为【新建文档】对话框。5.4.1 新建文档5.4 5.4 文档操作文档操作 在Dreamweaver CS4中个，打开文档的方法有2种：（1）鼠标左键双击“文件”面板中的相应文件；（2）执行【文件】【打开】命令。 Dreamweaver CS4可打开多种格式的文件，包括html、css、asp、xml等。5.4.2 打开文档5.4 5.4 文档操作文档操作 网页中包含了一些基本元素，包括文本、图像、表格、超链接、表单、多媒体对象等，它们构成了丰富多彩的网页内容。 下图为添加内容后的截图。5.4.3

46、 添加内容5.4 5.4 文档操作文档操作 在Dreamweaver CS4中，使用菜单栏中的【文件】【保存】命令或者快捷键组合【Ctrl+S】进行操作的保存。 网页制作过程中，设计者为了了解网页在浏览器中的显示情况，经常需要预览网页。预览网页的方法有，使用菜单栏中的【文件】【在浏览器中预览】【IExplorer】命令，也可使用【文档】工具栏中的【在浏览器中预览/调试】按钮，或者快捷键【F12】键。在预览网页之前需要保存文档。5.4.4 保存和预览网页5.4 5.4 文档操作文档操作 Web页面的页面属性包括页面标题、背景图像和背景颜色、文本格式、超链接显示效果、页边距等。 设置页面属性，使用

47、菜单栏中的【修改】【页面属性】命令或者快捷键组合【Ctrl+J】。在该对话框的【分类】列表框中包括【外观（CSS）】、【外观（HTML）】、【链接（CSS）】、【标题（CSS）】、【标题/编码】和【跟踪图像】6个分类，5.4.5 设置页面属性谢谢！网站建设与网页设计第六章文本编辑与格式化说明：本章节中的具体操作步骤参见书籍的对应章节。说明：本章节中的具体操作步骤参见书籍的对应章节。第六章文本编辑与格式化6.1 文本编辑6.2 文本格式化6.16.1 文本编辑文本编辑 文本元素是Web页面内容的基本表现形式，它通常被放置于网页中的行、段落、表单、AP Div元素、Div标签等HTML标签中。使用

48、CSS样式可以对网页中的文本格式化，从而使文本整齐、美观地显示在Web页面中。在Dreamweaver CS4中，使用“文本”工具栏，可以快速地插入各种类型的文本。要应用“文本”工具栏，先打开“插入”面板，然后拖动该面板至“文档”窗口顶部位置，可以将“插入”面板更改为“插入”工具栏，如下图。6.1.1 文本基本操作6.16.1 文本编辑文本编辑 在Dreamweaver CS4中，文档窗口进行输入文本是非常简单的，其输入方式与其他办公软件中的文本输入方式类似，一种是直接在插入点输入文本，一种是复制、粘贴准备好的文本，还有一种是导入其它格式的文本，之后就可以进行各种文本编辑活动，如查找、替换等。

49、 在Dreamweaver CS4的文档窗口中编辑文本，可使用菜单栏【编辑】命令。一般步骤：先选取所需文本，然后执行【编辑】菜单中的相应命令。在文档窗口中，一般使用的文本编辑的基本操作有以下几项。按住鼠标左键不放，在文本上拖动鼠标，选取相应的文本。选取文本后，点击【Backspace】键或【Delete】键，可删除文本。选择【编辑】菜单中相应命令，可执行的操作有剪切、拷贝、粘贴、查找与替换等。6.1.1 文本基本操作6.16.1 文本编辑文本编辑 在制作Web页面过程中，可能需要输入一些特殊字符，例如“￥”（人民币符号）、（版权符号）等。这些特殊字符可在网页代码设计视图中直接输入代码，例如，版

50、权符号表示为“©；”，空格表示为“ ；”。 在文档中使用特殊字符，可以通过插入字符的方式完成输入,下面为操作截图。6.1.2 输入特殊字符6.16.1 文本编辑文本编辑 Web页面中一般还包含一些HTML元素，如日期、水平线、注释等。这类元素也可通过插入栏中的按钮添加。 水平线对于信息组织很有用，在Web页面中，可以使用一条或多条水平线来可视化分隔文本和对象，是段落更分明和层次感；日期元素的插入可以方便用户对于时间的处理，每次保存文件都会自动更新插入的日期。 6.1.3 插入HTML元素6.16.1 文本编辑文本编辑 插入水平线的网页效果如下图所示。 6.1.3 插入HTML元

51、素6.26.2 文本格式化文本格式化 文本格式主要包括段落格式和字符格式两个方面。段落是具有统一样式的一段文本，在文档窗口中输入文本后，点击【Enter】键就会产生一个段落（HTML对应标签）。 Web页面中的段落文本格式主要包括文本行、标题和列表格式。设置文本行使用换行符；设置标题或列表格式，使用属性检测器中的【格式】框进行操作。下图为段落格式设置后的截图。6.2.1 段落格式6.26.2 文本格式化文本格式化6.2.2 字符格式 字符是组成段落的基本元素，它包括字符的样式、字体、字号、颜色等。 在网页中要修饰文本主要靠设置字符格式来实现。在Dreamweaver CS4中，使用属性检查器为

52、文本添加CSS样式来设置字符格式。完成字符格式设置后的效果如下图所示。谢谢！网站建设与网页设计第七章超链接说明：本章节中的具体操作步骤参见书籍的对应章节。说明：本章节中的具体操作步骤参见书籍的对应章节。第七章超链接7.1 认识超链接7.2 创建超链接7.3 管理链接7.17.1 认识超链接认识超链接 WWW是由千千万万个网站组成的，而网站是由许多网页组成的，网页之间通常又是通过超链接方式相互建立关联的，所以超链接是Web的灵魂。超链接的应用广泛，利用它不仅可以链接到其他网页，还可以链接到网页元素等。 超链接是网页中最重要的元素。在Dreamweaver CS4中，可以将Web页面中的任何文字及

53、任意位置的图片设置为超链接。7.17.1 认识超链接认识超链接 Web页面中的超链接可以根据链接目标文件的不同，分为页面链接（链接到单个网页）、电子邮件链接（链接到一个电子邮件地址，单击会打开客服端电子邮件程序）、锚记链接（链接到网页上某一个具体位置）、下载链接（链接到一个不能有浏览器直接打开的文件，从而形成下载效果）等。 Web页面中的超链接还可以根据链接源的不同，分为文字链接、图像链接、对象链接（如flash）等。例如下面的网页。7.1.3 超链接的分类7.27.2 创建超链接创建超链接 在Dreamweaver CS4中可以创建各种超链接，并且在进行本地站点内移动或者重命名文档时，依然可

54、以自动更新指向文件的链接。Dreamweaver中，通常使用文档相对URL创建指定站点中其他网页的链接。 在Dreamweaver CS4中，可以随时随地在所需的位置创建各种超链接，并且可以通过多种方法来创建。l在【属性】面板中创建超链接 下图为操作截图。7.2.1 超链接的基本操作7.27.2 创建超链接创建超链接l使用菜单命令创建超链接 使用菜单命令创建超链接的方法也很简单，选中要创建超链接的对象，使用【插入】【超级链接】命令，打开【超级链接】对话框，在该对话框设置相应选项。l使用【指向文件】图标创建超链接 先选取要创建超链接的对象，单击属性检查器中的【指向文件】按钮，然后拖曳鼠标在【文件

55、】面板，将鼠标指向超链接要跳转的网页文档或文件上，随后释放鼠标左键，即完成链接的创建。 如果要取消或者修改超链接，也应该首先选择相应的网页对象，然后将属性检查器中的【链接（L）】文本框中的链接地址删除或者修改即可。7.2.1 超链接的基本操作7.27.2 创建超链接创建超链接 在对超链接有一定认识的基础上，将分类介绍各种超链接的创建方法，主要包括页面链接、文件下载链接、E-mail链接、瞄记链接。l页面链接 页面链接是指在同一站点中利用网页对象指向其他网页和文件的超链接，单击这种超链接时将会跳转到链接的相应网页或显示相应文件。 创建页面链接需要创建2个网页文件，一个是超链接所在的网页，另一个是

56、跳转页面。l文件下载链接 如果超链接的目标文件是浏览器中不能直接显示的文件格式（例如压缩文件.rar文件等），那么单击该超链接时将弹出【文件下载】对话框，提示浏览者下载文件。7.2.2 超链接的应用7.27.2 创建超链接创建超链接lE-mail链接 E-mail链接就是单击该超链接时，系统会自动启动客户端电子邮件程序（如Outlook Express或Gmail等）并打开一个空白通讯窗口，方便访问者撰写电子邮件。l瞄记链接 瞄记链接又称为页面内超链接，即对页面的某个特定区域命名（即是命名锚记），利用超链接打开目标文档时，直接跳转到相应的命名位置。7.2.2 超链接的应用7.37.3 管理链接

57、管理链接 在Dreamweaver中，使用站点地图可以直观显示网站中的超链接关系。具体在之前的第五章中有介绍。7.3.1 使用站点地图7.3.2 使用链接检测器 在制作网站过程中如需要随时了解站点的超级链接实际情况，则可使用Dreamweaver提供的【链接检查器】工具，以提高工作效率。结果会显示在【链接检查器】选项卡中的【结果】面板，如下图所示。谢谢！网站建设与网页设计第八章使用图像和多媒体说明：本章节中的具体操作步骤参见书籍的对应章节。说明：本章节中的具体操作步骤参见书籍的对应章节。第八章使用图像和多媒体8.1 图像格式基础8.2 插入图像8.3 处理图像8.4 使用Flash动画8.5

58、使用声音与视频8.18.1 图像格式基础图像格式基础 图像和多媒体是网页上最常用的对象之一，制作精美的图像和多媒体文件可以大大增加网页的视觉效果。图像和多媒体文件所蕴含的信息量对于网页而言愈加重要。 图像是网页中不可缺少的组成元素。在Dreamweaver CS4中，可以Web页面中插入图像，并利用软件自带的功能设置各种图像效果，例如导航栏、链接和鼠标经过效果等。 实际上，虽然计算机支持多种图像格式，但由于网络带宽和浏览器的限制，在Web页面上常用的图像格式有3种：JPEG（JPG）、GIF和PNG，它们都是位图。 注意：注意：位图，亦称为点阵图像或绘制图像，是由称作像素的单个点组成的。放大位

59、图，可以看见赖以构成整个图像的无数单个方块。处理位图时要着重考虑分辨率，一般位图编辑软件有Photoshop和Fireworks。8.1.1 图像格式介绍8.18.1 图像格式基础图像格式基础 图像虽然会导致网页下载速度缓慢，但是如果合理安排使用它们，可以形成独特的网站风格。 在Web页面的图像使用过程中，通常要考虑下面3个问题。l文件的大小 为了保证网页的流畅性，文件可以从两个方面来处理：1）注意图像所具有的像素大小；2）对正确的格式使用适当的优化处理。l图像的数量和质量 为了网页文件的下载速度，对于图像的质量问题，可以从两个方面来处理：1）注意图像的分辨率；2）使用合适的优化方法。l动画的

60、使用 合适的动画，才会对整个Web页面起到画龙点睛的作用。反之，如果使用设计不合理的动画，很可能会像劣质的电视广告一样，不仅没有吸引浏览者，而且起到反作用。8.1.2 图像使用原则8.28.2 插入图像插入图像 一般来说，站点中的图像最好集中存放到某个文件夹中。习惯上将图像保存到站点根目录下的“images”文件夹中。 图像可被添加到Web页面中的段落、表单、Div标签等HTML标签内。一般使用Dreamweaver中【插入】栏中的【常用】类别中的【图像】按钮，添加图像。下图为添加图像操作的截图。8.2.1 添加图像8.28.2 插入图像插入图像 在为Web页面添加图像之后，可以使用属性检查器

61、设置属性。图像属性检查器如下图所示。8.2.2 图像属性 一般来说，图像属性常用的是源文件、链接、替换等，其他属性通常不需要修改。如果要修改图像其他的属性（如“对齐”、“边框”或者“边距”属性等），可使用为图像添加CSS样式的方式进行修饰，具体介绍见后面章节。8.38.3 处理图像处理图像 在Web页面制作过程中，有时需要对图像进行一系列的处理，例如修改图像的尺寸、对图像进行优化和导出等。 Dreamweaver CS4集成了Fireworks的基本图像编辑技术，可以不用借助外部图像编辑器直接对图像进行修剪、重新取样、调整图像的亮点和对比度以及锐化图像等操作。 注意：注意：使用内部图像编辑器（

62、即使用Dreamweaver的图像编辑功能）仅适用于两种图像文件格式（JPEG和GIF）。在进行图像处理之前，最好制作一个图像文件的副本，保存好原始图像。在处理图像时，可以使用【编辑】【撤销】命令恢复原始图像。l剪裁图像l重新抽样l调整图像的亮点和对比度l锐化8.3.1 使用内部图像编辑器8.38.3 处理图像处理图像 对于Dreamweaver CS4文档中的图像，也可以使用外部图像编辑器来编辑，在外部编辑器中编辑图像后，保存并返回Dreamweaver时，网页文档窗口中的图像也随之同步更新。一般使用的外部图像编辑器有Fireworks、Photoshop等图像编辑软件。下图为操作中的截图。

63、8.3.2 使用外部图像编辑器8.48.4 使用使用FlashFlash动画动画 目前，Flash动画是网页上最流行的动画格式，被大量运用于网页中。在Dreamweaver中，Flash也是最常用的多媒体插件之一。它将通过压缩把声音、图像和动画等内容加入到一个文件中，使得文件较小，而且有较好的动画效果。 目前，Flash的文件类型有4种：.fla、.swf、.swt、.swc。lFlash源文件（.fla）：这是使用Flash应用程序创建的项目的原始文件。该类型文件只能在Flash打开，不能在Dreamweaver或浏览器中打开。lFlash电影文件（.swf）：这是一种压缩的Flash源文件

64、，可以在浏览器中播放，也可在Dreamweaver中预览，但不能编辑。lFlash库文件（.swt）：这是用于修改或替换Flash电影文件中的信息。lFlash元素（.swc）：这是一种Flash swf文件。该类型文件可以整合到网页中，创建多种形式的应用程序。8.4.1 Flash动画基础8.48.4 使用使用FlashFlash动画动画 插入Flash动画的通常步骤是，在【插入】栏的【常用】类别中【媒体】列表中，点击【Flash】按钮，Flash动画就被添加在了插入点。设置Flash动画可以通过属性检查器完成。8.4.2 插入Flash动画8.58.5 使用声音与视频使用声音与视频 声音和

65、视频也是网页中出现比较多的元素，可以提高网页的丰富度。l声音概述 在Dreamweaver CS4中，可以向网页中添加多种不同类型的声音文件和格式，例如.wav、.mp3等。在添加声音前，要考虑几个因素，包括添加声音的目的、文件大小、声音品质等。 下面简单介绍常见的音频文件格式。midi或.mid:许多浏览器都支持MIDI文件，还不需要插件。wav：具有良好的音质，许多浏览器都支持此类文件而且不需插件，可以录制但是文件较大。mp3:一种压缩的声音文件，克使声音文件明显缩小，音质良好。ra、.ram、.rpm或Real Audio:具有非常高的压缩度，文件小于mp3。8.5.1 声音与视频基础8

66、.58.5 使用声音与视频使用声音与视频l视频概述 视频是信息含量最丰富的一种媒体文件。在Dreamweaver CS4中，可以使用不同方式向网页中添加多种不同类型的视频文件。同时视频可以下载，或者进行流式处理，方便用户在下载的同时可以播放它。 下面简单介绍常见的视频文件格式。音频视频交错格式，就是可以将视频和音频放在一起同步播放。mpeg、.mpg或.dat：运动图像专家组格式，这是运动图像压缩算法的国际标准。ra、.rm或.rmvb：RealNetworks公司开发的一种新型的流式视频文件格式。mov：Apple公司开发的一种音频、视频文件格式，用于保存音频、视频信息。8.5.1 声音与视

67、频基础8.58.5 使用声音与视频使用声音与视频l添加背景音乐 由于背景音乐不是一种标准的网页属性，所以要通过修改源代码来为网页添加背景音乐。l链接声音与视频文件 链接文件是将音频与视频添加到网页的一种方法。这种方法的长处在于访问者可以选择是否收听或收看文件，而且避免了某些浏览器不支持嵌入的音频或视频文件。l综合运用 如果访问者已安装播放相应格式的插件（如RealMedia、QuickTime），那么通过直接嵌入的方式将音频与视频插入到网页中。 音频和视频在网页中被称为插件，于是要在网页中嵌入音频与视频，那么可以使用【插入】栏的【常用】类别中【媒体】列表的【插件】按钮。8.5.2 添加声音与视

68、频谢谢！网站建设与网页设计第九章CSS样式说明：本章节中的具体操作步骤参见书籍的对应章节。说明：本章节中的具体操作步骤参见书籍的对应章节。第九章CSS样式9.1 CSS样式基础9.2 使用CSS样式9.3 管理CSS样式9.4 CSS布局基础9.5 预设的CSS布局9.7 Div标签布局9.6 AP Div元素布局9.19.1 CSSCSS样式基础样式基础 精美的网页离不开CSS技术，使用CSS技术可以有效地对页面的布局、字体、颜色、背景和其他效果实现更精准的控制。CSS技术是HTML的扩展，是网页设计中不可或缺的核心技术。CSS技术最大的优势就是实现了结构与形式的分离，从而更加有利于网站的开

69、发和维护。同时，CSS布局是很有效的网页布局方式。 CSS样式是Cascading Style Sheets（层叠样式单）的简称，也可以称作“级联样式表”，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。9.19.1 CSSCSS样式基础样式基础 CSS，是用来控制一个网页文档中的某文本区域外观的一组格式属性。使用CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而避免了重复操作。 实际上，CSS样式的使用就像很多软件的“更换皮肤”功能。例如，左下角为一个没有应用CSS样式的网页，而右下角为应用了CSS文件后的网页。9.1.1 CSS样式简介9.19.1 CS

70、SCSS样式基础样式基础 在Web页面中，CSS规则有下面3中方式：l外部CSS样式：存储在一个单独的外部CSS (.css)文件（而非HTML文件）中的若干组CSS规则。使用link标签链接到外部样式表文件（.css文件）。如果修改外部样式表文件，那么所有链接到该样式表文件的文件都将随之变化。l内部（或嵌入式）CSS样式：若干组包括在HTML文档头部分的style标签中的CSS规则。使用style标签为当前网页设置样式信息。内部样式的内容包含在文档代码head部分的style标签中，并在【CSS样式】面板中的【所有规则】窗格内列出，此样式只对当前文档有效。l内联样式：通过HTML标签的sty

71、le属性为单个网页元素嵌套样式信息。 其中，内联样式不符合“结构与形式分离”的网页基本设计原则，不建议使用。9.1.2 CSS规则的应用范围9.19.1 CSSCSS样式基础样式基础 从前面的举例中可以看出，CSS样式规则是由两部分组成：选择器和样式定义（也称声明）。选择器是标识已设置格式元素的术语，例如p，h1、类名称等，而样式定义则用于定义样式的属性，大多数情况下为包含多个样式定义的代码块，包括样式属性和相应的属性数值。 h1font-size:12 pixels;font-family:宋体在上面的CSS规则中，h1是选择器，大括号（）之间的所有内容都是样式定义。 在Dreamweave

72、r中常见的CSS样式选择器有3种，分别是HTML标签选择器、类选择器和伪类(也称虚类)选择器。除此之外，还有两种选择器：ID选择器和具有上下文关系的选择器。9.1.3 CSS样式定义规则9.19.1 CSSCSS样式基础样式基础lHTML标签选择器 HTML标签选择器用于为某个或者某些HTML元素应用样式定义。如果要定义多个标签，则要在标签之间用逗号隔开。l类选择器 类选择器定义了某种类样式，可用于多种HTML标签，即可以对网页中多个网页元素重复使用类样式。 类选择器在制作网页中使用较多，一般形式为：首先定义类样式（形式为.类名称），然后在HTML标签中指定相应的class属性对样式进行应用。

73、l伪类选择器 伪类选择器一般用于设置超链接的显示方式。例如，图9-12所示的伪类选择器定义的样式就是指未访问过的、已访问过、激活的以及鼠标指针悬停着的4种状态的超链接。9.1.3 CSS样式定义规则9.19.1 CSSCSS样式基础样式基础9.1.3 CSS样式定义规则HTML标签选择器定义类选择器定义伪类选择器定义9.19.1 CSSCSS样式基础样式基础lID选择器 HTML标签中的ID属性是指定网页中某特定元素；CSS的ID选择器是针对相应的特定元素设置样式，需要注意的是ID选择器只能对指定的唯一网页元素应用样式。一般形式为：首先定义样式为“#ID名样式定义”，然后在HTML标签中利用I

74、D属性应用该样式。l具有上下文关系的选择器 在CSS样式定义中，如果两个选择器之间用空格分开，就表示这是一个具有上下文关系的选择器。在HTML中，第二个选择器必须放在第一个选择器中。例如，如9-14所示的样式表示只针对唯一id为container的标签中的id为header的标签中的h1标签使用该样式。9.1.3 CSS样式定义规则9.19.1 CSSCSS样式基础样式基础9.1.3 CSS样式定义规则ID选择器定义具有上下文关系的选择器定义9.19.1 CSSCSS样式基础样式基础 由于CSS样式定义使用广泛，这里简单介绍CSS样式定义重要组成部分样式属性值的各种单位。l颜色单位 在CSS中

75、使用以下方式设置指定样式颜色值：颜色名；#RRGGBB；#RGB；#rgb（rrr，ggg，bbb）；#rgb（rrr%，ggg%，bbb%）。l长度单位 在CSS样式定义中描述长度包括以下单位：cm（厘米）；em（当前字体m字母的宽度）；ex（当前字体x字母的高度）；in（英寸）；mm（毫米）；pc（皮卡，1pc=12点）；pt（点，1pt=1/72英寸）；px（像素）。在网页制作过程中，em和px经常使用。l百分比单位 在CSS样式定义中，百分比单位也可指定尺寸。例如，pline-height：150%表示该段文字的高度为标准行高的1.5倍。百分比值是一个相对值，一般情况下，这个参照值是该

76、元素本身的字体尺寸。9.1.4 CSS样式属性的单位9.19.1 CSSCSS样式基础样式基础 在Dreamweaver中的“CSS规则定义”对话框中的可以设置CSS样式属性，主要包括类型、背景、区块、方框、边框、列表、定位、扩展。具体对话框如下图所示。9.1.5 常用CSS样式属性9.29.2 使用使用CSSCSS样式样式 在Dreamweaver CS4中，可以创建4种类型的CSS样式，分别是类（可应用于任何标签）、ID（仅应用于一个HTML元素）、标签（重新定义HTML元素）以及复合内容（基于选择的内容）。具体操作是使用【CSS样式】面板中【新建CSS规则】按钮，创建相应的CSS样式。下

77、面以“校园风光”网站为例，展示利用各种样式在网页中使用后的效果。9.2.1 样式的类型9.29.2 使用使用CSSCSS样式样式 CSS样式有不同的使用范围。在【CSS样式】面板中创建样式时，【新建CSS规则】对话框中的【规则定义】选项决定了使用内部样式还是外部样式。如果选择“仅对该文档”选项，表明在网页中使用内部样式表；如果选择样式表文件选项，表明在网页中使用外部样式表文件。l内部样式表 内部样式定义控制了当前网页元素的效果，存在于源代码标签中。l外部样式表 外部样式表是一个包含站点网页所有样式的集合，保存在以.css为后缀的文件中，以链接形式与文件关联。 创建外部样式表：在【样式】面板中创

78、建新样式，然后在出现的【新建CSS规则】对话框中的【规则定义】选项中选择【新建样式表文件】，即完成新建。通过链接使用外部样式表。9.2.2 样式表9.39.3 管理管理CSSCSS样式样式 在【CSS样式】面板是对样式进行管理的主要平台。 点击【CSS样式】面板右上角的按钮，在出现的下拉菜单中包含所有有关CSS样式的命令，设计者可以使用这些命令对站点中的CSS样式进行管理。 此外，在【CSS样式】面底部，有许多快捷键，方便设计者管理CSS。例如，【附加样式表】按钮可把外部样式表和文档链接到一起；【新建CSS规则】按钮可新建样式；【编辑样式】按钮可打开【CSS规则定义】对话框进行样式编辑；【删除

79、样式】按钮可删除样式。 【CSS样式】面板有全部模式和正在模式两种显示模式。9.39.3 管理管理CSSCSS样式样式l全部模式l正在模式9.49.4 CSSCSS布局基础布局基础 CSS布局是近年比较主流的布局方式，它将网页的内容和形式几乎完全分开，便于网站的开发和维护。 CSS页面布局使用CSS技术对页面进行规划组织。CSS布局的基本组成是Div标签，主要存放包括文本、图像和其他网页元素。设计者使用CSS布局，首先把Div标签放在页面不同位置，然后添加内容，最后为Div布局块应用CSS样式，从而快速王超网页显示。9.49.4 CSSCSS布局基础布局基础 网页中的元素都被存放在一个盒子里，

80、可以直接通过创建规则控制这个盒子的属性，完成显示网页内容的目的。 从下图可以看出，CSS模型盒子有内容、填充、边框和边距构成。其中，内容是“#box”块中的文本“此处显示id“box”的内容”；填充是指内容与块边框的距离；边框是指“#box”块四周的边框；边距是指块边框与其他块之间或是浏览器四周的距离。9.4.1 CSS盒子9.49.4 CSSCSS布局基础布局基础 CSS布局是利用CSS模型盒的属性创建出多种多样的页面布局。属性有填充、边框、边距、定位属性和浮动属性。 这里主要介绍定位属性和浮动属性。l定位属性 position（定位属性）控制网页元素（如Div元素）在浏览器应如何来定位，取

81、值包括absolute（绝对）、fixed（固定）、relative（相对）、static（静态）。l浮动属性 float（浮动属性）是用于控制网页元素的浮动方式，取值包括none（无），left（左浮动）、right（有浮动）。利用对Div标签的浮动属性设置，可以创建出不同种类的分栏式布局。 clear（清除属性）是与float相对应的属性，用于结束网页元素的浮动，取值包括left（左）、right（右）、both（二者）。9.4.2 CSS布局属性9.49.4 CSSCSS布局基础布局基础 在Dreamweaver CS4中，常见的创建CSS布局的方法如下。直接使用Dreamweaver提

82、供的预设的CSS布局，这是最便捷的方法。利用这类布局，可以快速创建常用的多列的网页结构。使用Dreamweaver中的绝对定位元素（AP元素）创建CSS布局。AP元素是拥有分配绝对位置的HTML元素（如Div标签）。缺点是该元素无法根据浏览器大小自动调节。手动插入Div标签创建CSS布局。该方法是专业设计者最灵活的一种设计方式。9.4.3 CSS布局方法9.59.5 预设的预设的CSSCSS布局布局 Dreamweaver CS4提供了30多种不同显示的、兼容多种浏览器的预设布局，设计者可以直接使用创建网页。l新建布局 【新建文档】对话框如下设置。9.69.6 AP DivAP Div元素布局

83、元素布局 AP Div元素是指使用了绝对定位属性的Div标签。影响AP Div元素位置的属性有左、上、高、宽属性。因为AP Div元素不能根据浏览器窗口大小自动调整文档布局，所以只适用于一些特殊的网页布局。 AP Div元素都显示在【AP元素】面板中，设置AP Div元素属性同样通过属性检查器。l插入AP Div元素 通常插入AP Div元素的具体步骤如下：首先定位插入点：然后点击【插入】栏的【布局】类别中的【绘制AP Div】按钮；最后，在文档窗口使用鼠标，绘制一个AP Div元素。lAP Div元素基本操作 AP Div元素基本操作包括选择、移动、修改、添加内容。9.6.1 AP Div元

84、素9.69.6 AP DivAP Div元素布局元素布局l【AP元素】面板 选择文档窗口中的AP Div元素，【AP元素】面板如下图所示。 【眼睛】图标是控制AP Div元素的可见性。默认没有图标，表示可见；如果有【睁眼】图标，表示可见；如果有【闭眼】图标，表示隐藏。Z值决定AP Div元素的显示顺序。Z值是一个整数，AP Div元素Z值大的显示在Z值小的上面。9.6.1 AP Div元素9.69.6 AP DivAP Div元素布局元素布局lAP Div元素属性 控制AP Div元素属性的平台是属性检查器，如下图所示。9.6.1 AP Div元素9.79.7 DivDiv标签布局标签布局 D

85、iv标签相当于网页中的一个盒子，里面是网页元素（如文本、图像等），通过定义CSS样式在网页中显示这些元素。 下面介绍一下Div标签的主要属性含义。lDiv ID：可让您更改用于标识Div标签的名称。如果附加了样式表，则该样式表中定义的ID将出现在列表中。l类：显示了当前应用于标签的类样式。如果附加了样式表，则该样式表中定义的类将出现在列表中。可以使用此弹出菜单选择要应用于标签的样式。 注意：注意：如果输入与其它标签相同的ID，Dreamweaver会提醒。l编辑CSS：打开【新建CSS规则】对话框。如果Div标签没有样式，则此按钮无效。 在文档中插入Div标签，可以像段落、表格单元格一样添加网

86、页元素。9.7.1 使用Div标签谢谢！网站建设与网页设计第十章表格和框架说明：本章节中的具体操作步骤参见书籍的对应章节。说明：本章节中的具体操作步骤参见书籍的对应章节。第十章表格和框架10.1 表格基本操作10.2 利用表格显示数据10.3 表格的其他操作10.4 框架基础10.5 实例10.110.1 表格基本操作表格基本操作 表格可以是数据行列显示清楚。在网页中，表格运用广泛，用来表示体育比赛积分、日程等；表格还可以用于网页布局。 表格用于显示表格型数据。在网页中使用【插入】栏的【表格】按钮，可在文档插入点添加表格。 在表格的单元格中也可以添加文本、超链接等网页元素，方法与在段落中添加内

87、容相同。 表格的基本操作主要有以下几种。l插入表格l表格属性设置l选择表格l拆分、合并单元格10.310.3 表格的其他操作表格的其他操作 对于插入的表格，可以根据单个列的内容对表格中的行进行排序或者根据两个列的内容执行更加复杂的表格排序。 选择表格或者任意单元格，执行【命令】|【排序表格】，打开【排序表格】对话框，如下图所示。设置相应的参数选项后，点击【确定】按钮，即可排序表格。10.3.1 排序表格10.310.3 表格的其他操作表格的其他操作 Dreamweaver CS4中可以将在另一个应用程序（例如Microsoft Excel）中创建并以分隔文本的格式（其中的项以制表符、逗号、冒号

88、或分号隔开）保存的表格式数据导入到Dreamweaver中并设置为表格格式；可以将表格数据从Dreamweaver导出到文本文件中，相邻单元格的内容由分隔符隔开，使用逗号、冒号、分号或空格作为分隔符。 如果要导入表格式数据，执行【文件】|【导入】|【表格式数据】命令，或者执行【插入】|【表格对象】|【导入表格式数据】命令，打开【导入表格式数据】对话框。设置相应的参数选项后，即可导入表格式数据。10.3.2 导入和导出表格式数据10.410.4 框架基础框架基础 框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML

89、页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。 当然，框架技术也不是完美的，大多数人不喜欢在网站中使用框架结构，主要有以下方面的考虑。l可能难以实现在不同框架下精确地对齐每个网页元素。l对导航进行测试时可能很耗时。l带有框架的网页的URL不显示在浏览器中，这会让浏览者可能难以将特定页面设为书签。10.4.1 框架概述10.410.4 框架基础框架基础 下图所显示的网页就是一个典型的使用框架结构的网页。10.4

90、.1 框架概述10.410.4 框架基础框架基础 Dreamweaver对框架技术，提供了一系列操作。主要有以下几种。l创建框架l选取框架集与框架l设置框架集和框架的属性l保存框架文件和链接框架。10.4.2 框架基础操作10.510.5 实例实例 新建“顶部和嵌套的左侧框架”，按照顺序命名框架集，分别为“fengguang.html”（整个框架集）、“xiaoyuan.html”（右下框架集）、“left.html”（左下框架集）、“top.html”（顶部框架集）。10.5.1 创建框架10.510.5 实例实例 在属性检查器中，设置框架集和框架属性。下图所示为操作过程中的截图。10.5.

91、2 设置属性10.510.5 实例实例10.5.3 制作网页 这里把实例框架共有4个网页文件，其中框架集网页包括了3个文档，分别是处于顶部框架的top.html、处于左侧框架的left.html和处于右下方框架的xiaoyuan.html。下面分别制作这些网页，同时另作一个网页作为右下方内容框可显示的网页。l制作制作top.htmltop.html文件文件10.510.5 实例实例10.5.3 制作网页l制作制作left.htmlleft.html文件文件10.510.5 实例实例10.5.3 制作网页l制作制作xiaoyuan.htmlxiaoyuan.html文件文件10.510.5 实例

92、实例10.5.3 制作网页l制作制作bju.htmlbju.html文件文件10.510.5 实例实例10.5.3 制作网页l制作制作wuhan.htmlwuhan.html文件文件10.510.5 实例实例 指定超链接的目标框架，确定超链接目标文件显示的位置。最后使用框架完成的网页效果如下图所示。10.5.4 链接框架谢谢！网站建设与网页设计第十一章表单与行为说明：本章节中的具体操作步骤参见书籍的对应章节。说明：本章节中的具体操作步骤参见书籍的对应章节。第十一章表单与行为11.1 表单概述11.2 创建表单11.3 行为基础11.4 使用内置行为11.111.1 表单概述表单概述 表单是一种

93、网页对象，使用表单可以实现浏览者与网页管理者之间的信息交互。在网络中被大量用于信息的收集和反馈。表单及其组件不仅是组成网页的一部分，而且还可以成为单独的表单网页。l表单页面 在各大门户网站中，一般网页左上角都有一个拥有进入应用系统（如邮箱、微薄等）登录的表单。这个表单包括简单文字、两个文本框（一个文本框和一个密码框）、一个下拉菜单和一个【登录】按钮。l表单组件 网页为了包括更多的内容，完成更加复杂的功能，会使用一些组件，如文本框、下拉菜单、单选按钮、复选框等。11.111.1 表单概述表单概述l表单工作原理 一般将表单置于一个HTML文档中，访问者填写相关信息后提交表单，表单内容会自动从客户端

94、的浏览器传送到服务器上，经过服务器上的ASP活CGI等程序处理后，再将访问者所需的信息传送到客户端的浏览器。 注意：注意：表单不同于之前介绍的网页元素（如图像、表格等），它不仅在网页中利用HTML显示，而且还要服务器端特定程序进行支持。网页中的表单11.211.2 创建表单创建表单 Dreamweaver CS4创建表单框的具体步骤是：点击【插入】栏中的【表单】类别的【表单】按钮，即可完成在插入点插入表单框。下图为插入表单框后的文档窗口截图。11.2.1 插入表单框11.211.2 创建表单创建表单 如果要设置表单属性，就在文档窗口中单击该表单的边线，选择表单，在表单属性检查器中设置，如下图所

95、示。11.2.2 表单属性11.211.2 创建表单创建表单 下面以“校园风光”网站为例，展示在表单框中添加表单组件。l文本框 文本框，也称为文本字段或文本域，是用来在表单中输入文本的表单组件。下图为添加文本框后的文档窗口截图。11.2.3 添加表单组件11.211.2 创建表单创建表单l单选按钮 单选按钮，是同一组选项中只能选择一个的一种表单组件。下图为添加单选按钮后的文档窗口截图。11.2.3 添加表单组件11.211.2 创建表单创建表单l复选框 复选框，即是允许用户多选的一种表单组件。下图为添加复选框后的文档窗口截图。11.2.3 添加表单组件11.211.2 创建表单创建表单l单选按

96、钮组 单选按钮组，是一次性添加多个单选按钮的一种表单组件。下图为添加单选按钮组后的文档窗口截图。11.2.3 添加表单组件11.211.2 创建表单创建表单l列表/菜单 列表/菜单，是允许用户在一个列表/菜单中选择一个或多个选项的一种表单组件。下图为添加列表/菜单后的文档窗口截图。11.2.3 添加表单组件11.211.2 创建表单创建表单 下面利用CSS样式修饰表单网页，最后完成的表单网页效果如右图所示。11.2.4 设置表单网页11.311.3 行为基础行为基础 行为是指在网页中进行的一系列动作，通过这些动作，可实现用户同网页的交互，也可通过动作使任务执行。 行为是Dreamweaver

97、CS4中重要的一个部分，通过行为，可以快捷制作网页效果，提高工作效率。行为是由两个部分组成，即事件和行为，通过事件的相应来执行对应的动作。当事件发生后，浏览器查看是否存在与该事件对应的动作，如果有，就执行动作，这就是整个行为的整体过程。 事件是浏览器生成的消息，表面该页面的访问者执行了某种操作。例如，当用户加载网页时，就会发生“onLoad”事件；当访问者单击某个对象时，就会发生“onClick”事件。不同的页面元素定义了不同的事件。 动作是一个预先写好的JavaScript程序，利用程序完成相应的任务。例如打开浏览器动作、显示或隐藏层动作等。11.3.1 行为概念11.311.3 行为基础行

98、为基础 Dreamweaver CS4中，在【行为】面板上可以将内置行为附加到页面元素，并且可以修改以前所附近行为的参数。 执行【窗口】|【行为】命令，打开【标签检查器】面板，默认打开的是【行为】选项卡面板，如右图所示。【行为】面板中显示已附加到当前页面元素的行为，并且是按照字母顺序排列在动作列表中。如果对于同一事件有多个动作，那么将会按照列表中的排列顺序执行动作；如果动作列表中没有任何行为，那么表示没有行为附加到此页面元素。11.3.2 【行为】面板11.411.4 使用内置行为使用内置行为 Dreamweaver提供了一些常用网页行为，方便设计者制作常见的页面交互效果。 “弹出信息”行为可

99、以使用【JavaScript】消息框来显示指定信息，因为它只有一个参数，即消息框中显示的文字信息。通常，“弹出信息”行为总和“onLoad”、“onClick”等事件组合产生一些交互效果。下图展示了使用弹出信息行为的网页效果。11.4.1 弹出信息行为11.411.4 使用内置行为使用内置行为 “打开浏览器窗口”行为，就是浏览者触发行为事件后，会打开一个新的浏览器窗口。用户可以自定义出现的新窗口属性，包括窗口大小、窗口是否需要工具栏等。右图展示了使用弹出信息行为的网页效果。11.4.2 打开浏览器窗口行为11.411.4 使用内置行为使用内置行为 除了之前具体介绍的行为之外，Dreamweav

100、er CS4提供了其他常用行为，例如调用JaveScript行为和改变属性行为等。l调用调用JavaScriptJavaScript “调用JaveScript”行为，就是当触发事件时浏览器会调用相应的JaveScript代码，以执行相应的动作。具体做法是：选择网页中要附加行为的元素，单击【行为】面板上的“加号”按钮，在弹出的下拉菜单中选择“调用JaveScript”命令，打开【调用JaveScript】对话框。l改变属性改变属性 “改变属性”行为，就是实现动态改变对象的属性值，例如改变层得背景颜色、改变图像大小等。这些改变实质上是改变网页对象对应标记的相应属性。具体做法是：选择要附加行为的网

101、页对象，单击【行为】面板上的按钮，在弹出的下拉菜单中选择“改变属性”命令，打开如图11-31所示的【改变属性】对话框。11.4.3 其他行为谢谢！网站建设与网页设计第十二章模板和库说明：本章节中的具体操作步骤参见书籍的对应章节。说明：本章节中的具体操作步骤参见书籍的对应章节。第十二章模板和库12.1 使用模板12.2 库项目的基础12.112.1 使用模板使用模板 模板是一个HTML文档。只是相比一般的HTML文档，模板中添加了模板标记。模板是具有一定共性的文档样板，可以简化常规文档的创建工作。当站点中的网页有某些特性，如相似的导航栏、相同的页面布局时，模板是非常有用的网页制作工具。 在Dre

102、amweaver中，模板的扩展名为.dwt，存放在本地站点的Templates文件夹中。模板文件夹只有在创建模板后系统才会自动生成。12.1.1 模板基础12.112.1 使用模板使用模板 在Dreamweaver中可以基于现有文档创建模板文件。 具体步骤如下：执行【文件】|【另存为模板】命令，打开【另存模板】对话框。在【另存模板】对话框中，【站点】框中选择站点名称，【描述】框中输入文本，【另存为】框中输入模板名称点击【保存】按钮。12.1.2 创建模板12.112.1 使用模板使用模板 模板定义了文档的布局结构和大致框架，模板中创建的元素在基于模板的页面中通常是锁定区域，或称为非编辑区域。要

103、编辑模板，必须在模板中定义可编辑区域。在使用模板创建文档时只能改变可编辑区域的内容，而锁定区域在文档编辑过程中始终保持不变。 通常意义上的编辑模板，就是指创建可编辑区域和在编辑区域进行操作。l定义可编辑区域 模板中的可编辑区域数目没有限制，用户可以更加需要添加一个或多个可编辑区域。模板中的可编辑区域可以是网页中的任何“块状元素”，如段落、列表、表格、Div标签等。12.1.3 定义模板区域12.112.1 使用模板使用模板l可编辑区域基础操作 在模板中创建可编辑区域之后，可以进行常用的可编辑区域的操作，主要操作如下。选择可编辑区域：在模板中单击可编辑区域左上角的选项卡，即选择可编辑区域；在模板

104、中单击可编辑区域之外的任何区域，即取消选择可编辑区域。删除可编辑区域：选择可编辑区域，然后执行【修改】|【模板】|【删除模板标记】命令，即完成删除可编辑区域，此时该区域是非编辑区域。重命名可编辑区域：选择可编辑区域，然后在属性检查器中，在【名称】框中输入新名称即可。12.1.3 定义模板区域12.112.1 使用模板使用模板 在Dreamweaver中，使用模板创建网页有两种方式：使用模板新建网页、对现有网页应用模板。l使用模板新建网页 执行【文件】|【新建】命令，打开【新建文档】对话框，如下图所示,在左侧栏中选择【模板中的页】，完成创建。12.1.4 使用模板创建网页文档12.112.1 使

105、用模板使用模板 当改变站点中网页文档的模板时，系统会提示是否更新站点中基于该模板的文档，同时也可使用更新命令来更新当前页面或整个站点。12.1.5 更新模板页面12.212.2 库项目的基础库项目的基础 库是用来存放文档的页面元素，如文本、图像、多媒体对象等。这些页面元素通常广泛应用于整个站点，并且能够被反复使用或经常更新，因此它们被称为库项目。 库是一种特殊的文件，是指可添加到网页文档中的一组单个资源或资源副本。可重的这些资源被称为库项目。当编辑某个库项目时，系统会自动更新使用该库项目的所有网页文档。 在Dreamweaver CS4中，库项目存储在每个站点的本地更目录下的Library文件

106、夹中。网页文档中的选中元素都可用于创建库项目。对于链接项，库只存储对该项的引用。原始文件必须保留在指定位置，这样库项目才能正常工作。 注意：注意：如果库项目中包含超链接，那么超链接可能无法在新站点中工作，并且库项目中的图像也不会复制到新站点中。12.212.2 库项目的基础库项目的基础 创建库项目时，为发挥更好的作用，减少工作量，一般在模板页面中选取网页元素。 下图为定义库项目操作后的【资源】模板截图。12.2.1 创建库项目12.212.2 库项目的基础库项目的基础 创建了库项目，在【资源】面板上可以编辑和管理库项目。 在【资源】面板中，选择库项目，点击【编辑】按钮，打开该库项目文档，即可6

107、修改库项目。 执行【文件】|【保存】命令，弹出【更新库项目】对话框，点击【更新】按钮，随后系统自动更新该站点中基于该库项目的网页。12.2.2 编辑库项目谢谢！网站建设与网页设计第十三章测试与发布网站说明：本章节中的具体操作步骤参见书籍的对应章节。说明：本章节中的具体操作步骤参见书籍的对应章节。第十三章测试与发布网站13.1 测试网站13.2 发布站点13.113.1 测试网站测试网站 网站设计完成后，如果希望网络上的计算机能够访问到自己的网站，就必须将网站发布到Web服务器上，而在发布站点之前，就必须对站点进行测试。 网站发布之前，要对站点进行严格的测试。一般来说，测试网站主要包括两个方面：

108、单独网页的测试和网站整体测试。13.113.1 测试网站测试网站 单独网页的测试，主要包括如下几个方面。l验证代码标记 验证标记，是检查当前页面或所选标签中的HTML代码是否有标签或语法错误。Dreamweaver CS4可以对多种常用语言编写的网页文档进行验证。通常情况下，使用Dreamweaver编写网页，页面中的标签不会出现错误，但如果手工编写了HTML代码，那么需要验证网页中的标记。l检查超链接 检查超链接是测试页面的重点。在Dreamweaver中，用户可以使用【链接检查器】功能检查页面链接情况。l检查网页内容 网页内容的检查，不仅包括检查页面内容是否有错别字和语句不通顺等语言问题，

109、更关键的是检查页面布局是否合理，也就是段落划分、标题设置等是否方便浏览。13.1.1 测试页面13.113.1 测试网站测试网站 测试站点就是从整体上检查网站，包括检查超链接、检查网页效果、检查浏览器兼容性等。l检查超链接检查超链接 网站创建后，需要利用检查网站链接功能对整个站点的超链接进行检查。检查包括是否有空连接、断链接和错误的链接；是否有不合逻辑的链接等。 这里用“校园风光”站点为例，说明如何对整个站点的超链接进行检查。具体做法是：在【文件】面板中，选择根站点，单击鼠标右键，选择【检查链接】命令，在弹出的菜单中选择【整个本地站点】命令。之后在【结果】面板的【链接检查器】选项卡中，会显示有

110、关该站点中的所有超链接情况。在【显示】框中选择“外部链接”，可查看站点中使用绝对URL的外部链接情况；选择“孤立文件”，可查看站点中所有孤立文件情况。如果出现问题，及时改正。13.1.2 测试站点13.113.1 测试网站测试网站l使用站点报告使用站点报告 在Dreamweaver CS4中，可以使用站点报告对整个站点的工作流程和HTML代码进行检查。 使用站点报告的具体做法是：在【文件】面板中，选择根站点，执行【站点】|【报告】命令，打开【报告】对话框。然后在【报告在】的下拉列表框中选择【整个当前本地站点】，然后勾选要检查的项目，之后点击【运行】按钮，站点报告结果就会出现在【结果】面板的的【

111、站点报告】选项卡中。13.1.2 测试站点13.113.1 测试网站测试网站l检查网页效果检查网页效果 网页效果的检查，主要是检查站点中使用的多媒体对象是否正常运行；检查网页中是否出现乱码等。l检查浏览器兼容性检查浏览器兼容性 浏览器兼容性的检查必不可少。因为浏览器的类型和版本不同，网页的显示效果也不相同，所以应该在多种浏览器平台和不同版本的浏览器中测试，最大限度满足浏览者需要。 检查浏览器兼容性的具体做法是：打开检查目标文档，执行【文件】|【检查页】|【浏览器兼容性】命令，之后检查结果将出现在【结果】面板的的【浏览器兼容性】选项卡中。13.1.2 测试站点13.213.2 发布站点发布站点

112、完成网站的创建和测试之后，下一步就是通过将文件上传到远程文件夹来发布该站点。远程文件夹是存储文件的位置，这些文件用于测试、协作和发布，具体取决于用户的环境。 上传网站之前要需要先在Internet上找到存放自己网站的地方，也就是要在在特定的网络服务器上获取一个存储网站内容的空间和一个用于访问该网站的域名。目前主流采用虚拟主机的形式。 虚拟主机服务分为免费方式和收费方式。免费空间通常有较多的大小和流量限制，而且要求附加广告；收费空间的服务更为全面。在搜索引擎中，用“虚拟空间”等关键字可以搜索到相应的服务提供商。目前，提供域名和空间的网站的网站很多，如“中国数据”网和“中国网格”网等网站都同时提供

113、域名和空间申请服务。13.2.1 申请域名和空间13.213.2 发布站点发布站点 完成了域名和空间的申请之后，就需要定义远程站点，为发布站点做准备。 定义远程站点的具体操作：执行【站点】|【管理站点】命令，打开【管理站点】对话框，双击该对话框左侧列表框中所要定义远程站点的站点名称；随即出现对应的【站点定义】对话框；在【高级】选项卡的【分类】列表框中，选择【远程信息】类别，在右侧的【访问】下拉列表框中选择“FTP”；在【FTP主机】框中输入FTP主机地址，然后进行其他选项的设置。有关选项的内容是由选定的虚拟服务器决定，具体要参见ISP提供的信息。13.2.2 定义远程站点13.213.2 发布

114、站点发布站点 在完成远程站点的设置之后，就差上传站点最后一步，就可以完成网站的发布。在Dreamweaver中，提供了FTP站点上传的功能。下图展示了上传站点窗口的内容。13.2.3 上传站点 注意：注意：如要上传整个站点，只需选中右侧全部本地站点文件，然后拖曳到左边的根目录中；如只需上传部分网页，就选中相应网页，然后拖曳到远程站点的相应目录。同时，管理远程站点的文件夹与文件的具体操作与在本地站点相同。谢谢！网站建设与网页设计第十四章网站制作综合实例说明：本章节中的具体操作步骤参见书籍的对应章节。说明：本章节中的具体操作步骤参见书籍的对应章节。第十四章网站制作综合实例14.1制作分析14.2

115、网页设计14.3 建立本地站点14.2 网页制作14.114.1 制作分析制作分析 网站制作前，要进行细致分析网站制作的目的、针对人群、网站风格、网站内容等。“校园风光”网站在制作前有如下分析。l网站名称：校园风光。l网站目的：在网络上传播国内著名高校的自然风光和人文气息，感受高校教育之外的美丽。l网站用户定位：一般的网络用户。使用平台为Windows操作系统；浏览器支持IE（包括以IE为核心的浏览器）、Firefox、Chrome；屏幕分辨率为1024*768，兼顾1280*800。l网站风格：设计风格尽量简明，页面使用CSS布局方式。l网站内容：精选国内著名高校的自然风光，包括10大省市。

116、14.1.1 网站分析14.114.1 制作分析制作分析 网站开始实际制作前，最好对网站的文件目录规划好，这样可使制作过程清晰，素材保存规范，方便开发以及之后的网站维护。 根据实际情况，“校园风光”网站的文件目录结构图如右图所示。其中白色文本框中的内容表示文件夹，灰色文本框中的内容表示站点中需要制作的网页。14.1.2 网站规划14.214.2 网页设计网页设计 网页设计的工作主要包括：设置页面布局；设计导航方式；设计颜色方案；设计网页元素；设计CSS样式。l设计网页布局 基于实际用途考虑，“校园风光”网站采用“两列、标题和脚注”的页面布局。布局使用“CSS样式+Div标签”技术。网站主要具体

117、布局如右图所示。14.214.2 网页设计网页设计l站点导航 在网站的导航系统中，一般使用带有超链接的网页元素，它们可以将网站中的内容串联起来。同时，浏览者也通过这一方式获取相关网页信息。l颜色方案 由于网站的实际内容，网站选择以绿色为主，体现自然气息。l网页元素 考虑网站的实际用途，以及网页下载和用户浏览需要，网页中只使用一定数量的风景图片，没有加入多媒体对象和行为。lCSS布局样式 网页采用的CSS布局，结合使用模板文档。14.314.3 建立本地站点建立本地站点 下面就是网站实施阶段创建本地站点，主要包括定义站点和建立文件结构。l定义站点制作网站根目录定义本地站点本地根目录的建立14.314.3 建立本地站点建立本地站点l建立文件体系收集信息建立文件体系，如右图所示。网页文件体系谢谢！