电子课件-网站建设与网页制作-.ppt

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上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位。lURL

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

5、速度和网站响应速度；信息量主要是指网站服务器上存储信息内容的多少。两者之间有着密切的关系，特别是后者对前者的影响有时起着决定性的作用。1.1 网站的基础知识1.1.3 网站的相关技术知识l搜索引擎搜索引擎是指根据一定的策略、运用特定的计算机程序从互联网上搜集信息，在对信息进行组织和处理后，为用户提供检索服务，将用户检索相关的信息展示给用户的系统。知名的中文搜索引擎有中文雅虎（http:/）、百度（http:/）等；知名的英文搜索引擎有http:/、http:/ 等。右侧是一些搜索网站的LOGO。1.1 网站的基础知识1.1.4 网站的传播模式和特点l网站传播模式信息的传播者与信息接收者之间的单

6、向传递关系变为双向互动关系。传播内容不断丰富，形式多样化。l网站传播特点实时性：通过减少传统媒体在信息产品制作过程中的环节，提高信息的时效性。全球性：互联网媒体打破了传统媒体的传播范围的地域限制，其受众通过互联网遍及全世界。交互性：网站可以做到双向、多向的交流，在点点互通的情况下，传者与受者之间没有明显的界线，传者既发布讯息，又同时接受讯息。1.1 网站的基础知识1.1.5 网站分类l按服务性质分类主要包括门户网站、游戏网站、搜索网站、企业网站、政府、组织网站、个人网站等。l按域名的命名方法分类l按网站的内容分类l按网站架构技术分类1.2 网页的基础知识1.2.1 网页的概念和构成l网页概念网

7、页是一种存储在Web服务器上，通过网络进行传输，并被浏览器所解析和显示的文档类型，其内容由XHTML构成。根据内容对交互响应方式的不同，可以将网页分为静态网页和动态网页两大类。l网页构成在网页中，包括文本、图片、动画、音频、视频、超链接等元素，这些元素与网页文件是相对独立的。1.2 网页的基础知识1.2.2 网页的功能网页的主要功能就是通过网页中的不同的元素将信息传达给网站的访问者。网页是网站信息的载体，通过网站可以网站所有者如企业、个人等的形象，利用不同网页制作技术设计的网页功能也各不相同。主要是两个功能。l信息传递功能l信息交互功能1.2 网页的基础知识1.2.3 网页制作工具l网页编辑工

8、具Dreamweaver：是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具，同时集成了程序开发语言，对ASP、.NET、PHP、JS的基本语言和连接操作数据库，都是完全支持的。这也是本书主要介绍的工具。FrontPage：有良好的易用性，被认为是优秀的网页初学者的工具，但其功能无法满足更高要求。此外，还有几款常用软件：Adobe GoLive、HomeSit和Visual Studio。l素材处理工具Photoshop：Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件。1.2 网页的基础知

9、识1.2.3 网页制作工具l素材处理工具Flash：应用于互联网网页的矢量动画设计软件。Fireworks：Macromedia公司发布的一款专为网络图形设计的图形编辑软件，与 Macromedia Dreamweaver和 Macromedia Flash共同构成的集成工作流程可以使用户创建并优化图像，同时又能避免由于进行Roundtrip 编辑而丢失信息或浪费时间。l网页上传工具友好的用户界面，稳定的传输速度，LeapFTP 与FlashFXP、CuteFTP堪称FTP三剑客。但是它们都各有不足，要灵活使用。1.2 网页的基础知识1.2.4 网页设计语言lHTMLHTML（超文本标识语言）

10、是用于创建Web文档(即Homepage文档)的编程语言。HTML并不是一种标准的编程语言，它只是一些能让浏览器看懂的标记。lCSSCSS(层叠样式表）是一组格式设置规则，用于控制Web页面的外观。lJavaScriptJavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言，最初起源于LiveScript语言，使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中连接多个对象，与Web客户交互作用。1.2 网页的基础知识1.2.4 网页设计语言lXML与XSLTXML即可扩展标记语言，它与

11、HTML一样，都是标准通用标记语言。但XML与HTML又是不同的。XML是用来存储数据的，重在数据本身；而HTML是用来定义数据的，重在数据的显示模式。XSL是指可扩展样式表语言，是一种用于以可读格式呈现XML数据的语言。xsl是一种标记语言，表示如何将xml文档的内容装换成另一种形式的文档。通过为xml写xsl来使得xml显示成不同的格式。1.3 网站与网页的关系与设计原则1.3.1 网站与网页的关系l网页是网站的信息载体网站是一组相关网页的集合，即若干个网页文件经过规划组织以后彼此相连而形成完整结构的信息服务系统。l网站是由不同形式的网页组成的网站是由网页构成的。网页是构成网站的基本元素，

12、是承载各种网站应用的平台。l网页和网站是有区别的网站是有独立域名、独立存放空间的内容集合，这些内容可以是网页，也可以是程序或者其他文件，不一定要有很多网页。只要网站有独立域名和空间，只有一个网页也是网站。反过来，即使很多有网页，但没有独立域名和空间，也只能叫做网页，而不能成为网站。1.3 网站与网页的关系与设计原则1.3.2 网站设计原则l内容与形式相统一网站的形式是指网页的排版、布局、色彩和图形的运用等外在视觉效果。无论采取哪种形式都不能单纯追求网页的美观而忽视了内容的建设。l定位明确在设计一个网站之前，首先要明确网站的发展方向，即网站的定位。网站定位的核心在于寻找或打造你网站的核心差异点。

13、l导航清晰导航设计使用超文本链接或图片链接，使人们能够在您的网站上自由前进或后退，而不会让他们使用浏览器上的前进或后退。l兼顾下载速度和美观在注意网站内容的同时，要考虑网络带宽的限制，保证网站的响应时间。1.3 网站与网页的关系与设计原则1.3.3 网页设计原则l布局合理网页设计中，内容组织是最重要、最影响设计品质的方面。合理的网页布局可通过构建好的CSS布局、表格布局和框架布局实现。l色彩统一网页给人的印象来自于视觉，色彩代表了不同的情感，有着不同的象征含义。因此，网站的色彩相当重要。不同的色彩搭配产生不同的视觉效果，同时，网页的色彩处理一定要总体协调，使整体的色彩效果和谐。l更新维护方便访

14、问者希望看到新鲜的内容，没有人对过时的信息感兴趣，所以网站的信息一定要注意及时性，时刻保持新鲜感是很重要的一项工作内容。谢谢！网站建设与网页设计第二章 网站规划与设计第二章 网站规划与设计2.1 网站规划2.2 网站设计2.1 网站规划2.1.1 网站规划概述网站设计首先要做好规划工作，虽然不同类型的网站规划流程有所区别，但就整体上来说还是具有一定的共性，网站规划的流程如右图所示。2.1 网站规划2.1.2 方案提出网站建设方案一般要从建站目的、网站功能要求、网站定位、确定网站类型、确定网站规模、建站周期等几个方面进行阐述。l明确建站的目的 对外宣传 树立形象 社会效益与经济效益l 明确网站功

15、能需求一般而言，网站的基本服务功能包括WEB、邮箱和FTP功能。各个网站都要根据实际建站目的完善功能。l 网站定位所谓网站定位就是网站在internet上扮演什么角色，要向目标群(浏览者)传达什么样的核心概念，透过网站发挥什么样的作用。2.1 网站规划2.1.3 可行性分析 所谓可行性分析是通过对项目的主要内容和配套条件进行调查研究和分析比较，并对项目建成以后可能取得的财务、经济效益及社会环境影响进行预测，从而提出该项目是否值得投资和如何进行建设的咨询意见，为项目决策提供依据的一种综合性的系统分析方法。对网站的建设的可行性分析报告的编写前，要从客观、公正的立场进行调查研究，可以从以下几个方面进

16、行分析说明：技术可行性分析。从技术角度分析建站的可能性和必要性。运营可行性分析。对网站运营情况进行分析和预测。成本可行性分析。对维持网站正常运行及相关费用的预测分析。其他可行性分析。对与网站建设有关的问题进行可行性分析。2.1 网站规划2.1.4 制定资源分配计划l人力资源分配 建站工作都需要由一个项目小组来完成，小组成员包括系统管理人员、网站结构规划人员、网页美工设计人员、主页制作人员和网站程序开发人员。l技术资源分配 网站建设的技术资源包括硬件资源、软件资源、技术资料、文档资料等内容。l资金分配 网站建站过程中常规性的费用支出大致有如下几类：网站接入、网站开发费用、网站信息维护费用、人力资

17、源费用。在网站规划阶段，要充分考虑各个方面的费用，进行合理的资金分配，保证网站建设过程不受资金问题困扰。2.1 网站规划2.1.5 确定信息构架和内容l确定信息架构 网站的信息架构的一般包括调查、分析、设计和执行过程，它涉及到组织、标识、导航和搜索系统的设计，目的是帮助人们成功地发现和管理信息。网站可以通过好的标识系统、导航系统和搜索系统来帮助用户快速定位信息，同时便于网站的后台管理。l确定网站内容 网站内容的规划优劣直接影响到用户访问网站的频率，不同行业的企业网站页面内容不尽相同，但其主要的功能和模块却万变不离其宗。网站的建设者应该根据自己的实际情况，在网站上放置相应的主题和内容，只有内容充

18、实且实用，才能有效的实现网站的建站目，并最终获得相应的经济效益。2.1 网站规划2.1.6 确定方案实施l确定硬件系统建站的规模和硬件投资的多少决定了硬件系统的规模和性能。硬件系统是由网站服务器、集线器、路由器、网卡、连接线等网络设备，以及网络接口、UPS、机房等相关的设备组成的。l确定软件系统网站的软件系统要根据网站采用什么样的技术而决定。网站信息量的大小，决定了采用什么样的数据库。可供选择的大型数据库有Oracle、Sybase、DB2、SQL server，小型数据库有Access、MySQL、BD2等。l确定网站与网页设计方案2.2 网站设计2.2.1 设计概述 网站设计是将网站策划案

19、中的内容、网站的主题模式以及结合自己的认识，通过艺术的手法表现出来，是一个把软件需求转换成用软件网站表示的过程。也就是在因特网上，根据一定的规则，使用Dreamweaver、photoshop等工具制作的用于展示特定内容的相关网页的集合。总体上，网站设计可以通过准备、思考、初步设计、展示、反馈、实施、测试、维护几个阶段来实现。网站设计与网页制作不同，网页制作通常就是将网页设计师所设计出来的设计稿，按照W3C规范用html语言将其制作成网页格式。网站设计要能充分吸引访问者的注意力，让访问者产生视觉上的愉悦感。因此在网站设计过程中，必须将网站的整体设计与网页设计的相关原理紧密结合起来。2.2 网站

20、设计2.2.2 结构设计l网站目录结构设计网站目录结构的好坏，对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。在设计网站的目录结构时，要注意以下几点。（如下个页面所示）不要将所有文件都存放在根目录下按栏目内容建立子目录构建层次简单、含义简洁、清晰的目录l网站信息结构设计信息结构指的是网站上页面的规划，是网站的骨架。信息的结构类型包括矩阵结构、线性结构、层次结构等多种方式。2.2 网站设计“校园风光”网站的目录结构示意图2.2 网站设计2.2.2 结构设计l网站层次结构设计网站的层次是指一级页面（首页或者主页面）、二级页面和三级页面之间的结构关系，具体如下图所示。2.2 网站设计2.

21、2.3 网站形象的艺术设计l形象定位根据商品进行形象定位根据市场消费群体进行定位l标志形象 设计制作一个网站的标志(logo)，就如同商标一样，logo是一个站点特色和内涵的集中体现。下面是一些知名网站的标志。2.2 网站设计知名网站的LOGO2.2 网站设计2.2.3 网站形象的艺术设计l整体形象 网站的整体形象主要包括两个方面：网站之间的整体一致性和整体形象的一致性。对于一些跨地域公司的网站而言，它们要面对的是具有不同语言、文化风格的人群，这时网站的风格、形象等就会有不同。但对同一网站而言，不论语言、风格、形象如何变化，从整体上必须保持它们之间的一致性，如网站的结构、信息摆放位置等。网站是

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

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

24、览器类型、版本与网站访问者之间的关系 不同浏览器对不同网页的显示效果是不同的。同一浏览器的不同版本对同一页面的显示效果也有差距。因此在设计网页时要充分考虑不同浏览器和浏览器不同版本之间的差距。l浏览器与网页制作技术之间的关系 网页设计时要选用正确的技术，避免不同浏览器对某些技术的不支持的情况出现。3.1 网页设计注意的问题3.1.1 浏览器l网页兼容性问题在设计网页时需要考虑不同浏览器之间的区别，使用的功能也要考虑到浏览器之间的兼容性。3.1.2 显示器对于显示器而已，主要考虑分辨率问题和颜色问题。3.2 网页的色彩3.2.1 色彩基础在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。只有

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

26、色彩分类、对比与调和的规律，其模型如右图。色立体有多种，主要有德国奥斯特瓦尔德色立体（奥式色立体）、美国蒙赛尔色立体（蒙氏色立体）、日本色研色立体等。3.2 网页的色彩3.2.2 色彩与心理 色彩与人类的色彩生理、心理体验相联系，从而使客观存在的色彩仿佛有了复杂的性格。色彩的直接心理效应来自于色彩的物理光刺激对人的生理发生的直接影响。l白色：白色给人印象中洁净、纯真、清白、卫生、恬静等。l灰色：灰色是中性色，其突出的性格为柔和、细致、平稳、朴素。l黑色：黑色往往给人感觉沉静、严肃、庄重、含蓄，另外，也易让人产生悲哀、恐怖、不祥、沉默、消亡、罪恶等消极印象。l红色：红色易使人联想起太阳、火焰、热

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

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

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

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

31、 网页布局中有几种基本的布局类型。左右对称结构布局，如右图所示。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 构图实例 在网页布局中，最常见的布局形式是根据页面大大小，将页面分成不同的栏或列。根据分栏的

32、多少可将构图分为单栏式、双栏式、三栏式和多栏式。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标志的设计方法 网页标志的设计一般有三种方法，一是直接以

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

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

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

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

37、CS4的工作环境l工作界面 此工作界面中，包括标题栏、菜单栏、文档窗口、状态栏、面板组、属性面板等元素。4.2.1 Dreamweaver CS4的界面4.2 Dreamweaver CS4的工作环境l菜单栏 菜单栏位于标题栏的下方，提供了Dreamweaver CS4的所有命令，包括了以下10个菜单选项：【文件】、【编辑】、【查看】、【插入】、【修改】、【格式】、【命令】、【站点】、【窗口】、【帮助】。4.2.1 Dreamweaver CS4的界面l工具栏 Dreamweaver中的工具栏有四种模式：“样式呈现”工具栏、“文档”工具栏、“标准”工具栏和“编码”工具栏。4.2 Dreamwe

38、aver CS4的工作环境l状态栏 状态栏位于文档窗口底部，它是用户需要关注的区域，包括标签选择器、选取工具等功能按钮、窗口大小等信息。4.2.1 Dreamweaver CS4的界面4.2 Dreamweaver CS4的工作环境 Dreamweaver CS4的面板包括浮动面板和属性面板，而Dreamweaver以前版本的对象面板集成到了浮动面板。它们位于文档窗口之上，用户可以在文档和面板之间自由切换。l浮动面板 Dreamweaver的工具集（包括对象、行为、层等）都有自己的窗口和面板,采用了完全自定义化的浮动面板，可以使用户实现对工作区最大限度的控制。4.2.2 Dreamweaver

39、 CS4的面板【插入】面板【数据库】面板【文件】面板4.2 Dreamweaver CS4的工作环境l属性面板 【属性】面板显示了在文档窗口中所选中元素的属性，并允许用户在属性面板直接对元素属性进行修改。在【属性】面板的右下角，有一个三角形标记，用户可根据三角形标记的向下/向上指向，扩展/折叠“属性”面板。4.2.2 Dreamweaver CS4的面板扩展的【属性】面板折叠的【属性】面板谢谢！网站建设与网页设计第五章 站点与文档操作说明：本章节中的具体操作步骤参见书籍的对应章节。说明：本章节中的具体操作步骤参见书籍的对应章节。第五章 站点与文档操作5.1 规划站点结构5.3 站点管理5.2

40、创建本地站点5.4 文档操作5.1 规划站点结构 站点是一系列文件的集合。本地站点是位于客户端的网页制作者所使用的文件夹。作为一个网页设计者，应熟悉网页设计流程，以便更好地规划自己的工作。创建一个站点一般如以下步骤。对站点进行规划，即必须明确用户的站点准备向着哪个方向发展，提供什么服务。按照思路创建站点的基本构架。利用Dreamweaver可以再本地计算机上构建出整个站点的框架，对放置文档的文件夹进行合理分类和命名。开始进行具体的网页设计。在站点编辑完成后，需要将本地站点同位于Internet服务器上的远程站点关联起来，然后定期更新。5.1.1 规划站点的步骤5.1 规划站点结构 一个网站中包

41、含大量的文档、图片和媒体（如Flash、音乐、视频等）内容，如何对这些文件进行管理并规划好站点结构是最为重要的。一个规划好的饿网站将会让人感觉紧紧有条，同时对于使用者的日常网站操作（如页面更新、改版等）也会更加轻松。规划站点要注意下面三个原则。将不同的文件进行分类，分别放置于单独的文件夹中便于管理。在对文件或文件夹命名时需注意几点。例如使用英文或汉语拼音作为文件或文件夹的名称；名称中不能包含空格等非法字符；命名应有明确意义，方便日后的管理等。合理安排各种类型的文件。一般来说，网站的图片文件放置在根目录下名为images的文件夹中；音乐文件放置在根目录下名为music的文件夹中。5.1.2 规划

42、原则5.2 创建本地站点 网站制作是一个循序渐进的过程，随着网站内容的丰富，站点目录会逐步丰富起来。需要特别提醒的是看，一定要把本地站点中使用的所有资源都存储到站点目录中。下图为建立后的本地根目录。5.2.1 创建本地根目录5.2 创建本地站点 下面为具体步骤中的截图。5.2.2 使用基本向导创建站点5.2 创建本地站点 在Dreamweaver中完成具创建站点后，【文件】面板如下。5.2.2 使用基本向导创建站点5.2 创建本地站点 对于“高级”选项卡设置，主要是设置【本地信息】、【远程信息】和【测试服务器】的参数。在菜单栏中，选择【站点】【新建站点】命令，打开【站点定义】对话框，单击打开“

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

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

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

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

47、+J】。在该对话框的【分类】列表框中包括【外观（CSS）】、【外观（HTML）】、【链接（CSS）】、【标题（CSS）】、【标题/编码】和【跟踪图像】6个分类，5.4.5 设置页面属性谢谢！网站建设与网页设计第六章 文本编辑与格式化说明：本章节中的具体操作步骤参见书籍的对应章节。说明：本章节中的具体操作步骤参见书籍的对应章节。第六章 文本编辑与格式化6.1 文本编辑6.2 文本格式化6.1 文本编辑 文本元素是Web页面内容的基本表现形式，它通常被放置于网页中的行、段落、表单、AP Div元素、Div标签等HTML标签中。使用CSS样式可以对网页中的文本格式化，从而使文本整齐、美观地显示在We

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

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

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