第1章 网页设计基础.ppt

1,第1章初识DreamweaverCS4,网络的兴起及快速发展，已经渗透到各行各业。尤其，促进商业网络化的发展，如改变了产品的销售方式，业务多渠道联系方式，加快信息的获取方式。诸如这些与网站离不开的，因为网站是发布这些信息的平台。而在开发网站过程中，Dreamweaver可以以“所见即所得”的特点，快速创建网页，是组建网站和设计网页的专业工具。,2,本章学习要点：,了解网页制作常识对网页艺术设计有一定的见解熟悉网页制作与网站开发的流程了解网页设计的各种应用技术以及相关软件配置网站服务器管理Dreamweaver站点配置远端服务器,3,1.1网页制作常识重新编写,网页的设计是一种综合能力的体现，其考验到网页设计师在多种领域中的能力，包括网络技术、图像设计艺术、网页设计软件操作、浏览器兼容性知识以及程序开发能力等。在网页设计之前，应首先了解一些基础知识。,4,1.1.1网络技术基础,计算机网络是由无数的计算机以及各种相关的数码设备，根据有线或无线设备连接而成的网络。网页（Web页）则是基于这种网络的一种超文本（HyperText）的多媒体交互平台。在设计网页之前，有必要对网络技术进行一些简单的了解。,5,1互联网协议,互联网是由各种计算机和数码设备连接而成的通信网络，在各种设备进行数据传输和交换时，必然要遵循统一的标准，以实现互联互通。,2服务器与客户机,服务器的作用是管理大量的资源，并为多种用户提供相关的服务。客户机是相对于服务器的概念，即服务于本地计算机用户，调用服务器服务的计算机。,3超链接与URL路径,URL（Uniform/UniversalResourceLocator，统一资源定位符）路径是一种互联网中标准的资源位置标识方式。,6,1.1.2Web浏览器,Web浏览器是一种用于浏览网页的软件，其可以从互联网中获得网页文档及相关的文档，并将其展示给用户。,1InternetExplorerInternetExplorer（简称IE）是目前全世界最流行的网页浏览器。,2MozzillaFirefoxMozzillaFirefox浏览器是由Mozzilla基金会与开源社区共同开发的一种免费开源的Web浏览器，是在全世界范围内市场占有率仅次于IE的Web浏览器。,3OperaOpera是挪威出品的一款老牌Web浏览器。,7,1.1.3IDC技术基础,IDC（InternetDataCenter，互联网数据中心，又称服务器农场），是用户存放计算机服务器设备，并为其提供各种电力保障、网络通信、环境控制的设备或设备集群。通常意义上讲，IDC技术涵盖了网络服务器运营的整个体系，是互联网中Web或其他服务发布的基础。典型的IDC体系包括四个主要部分。,1服务器系统,2电力保障系统,3数据传输保障系统,4环境控制系统,8,1.2网页设计理论,网页的设计是一种艺术性的创作，设计出的网页需要符合绝大多数用户的审美观念，同时又需要有一定的独创性内容。总的说，设计网页时最难掌握的两个要点就是网页的色彩搭配艺术和内容布局艺术。,9,1.2.1网页配色艺术,网页设计是一种特殊的视觉设计，是平面设计的一个分支，和其他平面设计类似，对色彩都有较大的依赖性。色彩设计同时还是网站风格设计的决定性因素之一，是网页上“看的见”的视觉元素。,1三原色的概念,2色彩的属性,3色彩模式,4216网页安全色,5网页配色方法,10,1.2.2网页布局艺术,网页元素是网页最基本的组成部分，这些网页元素如何在网页中组合，将直接影响到网页设计方案的优劣。因此，掌握网页布局艺术对于一个网页设计师而言是不可缺少的技能。网页布局可以从两方面理解，一种是结构布局，另一种是艺术布局。,1结构布局网页结构布局是根据网页中各种元素的位置结构划分来设计的，最常见到的结构布局方式包括国字型、拐角型、上下框架和左右框架等类型。,11,2艺术布局在网页设计时，往往还广泛地应用了平面构成的原理。通过平面构成原理，可以使网页更富有艺术气息，更加吸引用户的注意力。,12,1.3网页标准化技术,网页是一种承载多媒体数据信息的、跨平台的媒体。在制作这种媒体时，必须依照统一的技术标准，遵循严格的技术规范。目前网页的技术规范主要包括三种，即XHTML语言、CSS样式表以及ECMAScript脚本语言。这三种技术规范分别实现了网页的标准化结构、标准化表现以及标准化的行为，形成了三位一体的网页标准化体系。,13,1.3.1XHTML语言,XHTML（eXtensibleHyperTextMarkupLanguage，可扩展的超文本标记语言）是一种基于XML（eXtensibleMarkupLanguage，可扩展的标记语言）与HTML（HyperTextMarkupLanguage，超文本标记语言）的新型标记语言和结构语言。,1XHTML语言简介,2结构与表现的分离,3XHTML文档类型,14,1.3.2CSS样式表,CSS（CascadingStyleSheets，层叠样式表）是一种由W3C定义的数据表格式，其作用是为XML、HTML以及XHTML等结构化的文档添加样式描述，从而实现对文档中内容的排版和美化。在传统的网页文档中，HTML语言以混合结构与表现的方式显示内容，由于没有统一的样式管理，每个页面即使是相同的标记都必须一一进行更改，从而大大增加了维护的时间、成本及效率。随着网站内页面的不断更新、扩展，需要一种技术对页面布局、字体、颜色、背景和其它图文效果的实现提供更加精确的控制，这种技术就是CSS。,15,1.3.3ECMAScript脚本语言,ECMAScript脚本语言是由NetScape（网景）公司和Sun（升阳）公司开发，最终由ECMA（EuropeanComputerManufacturersAssociation，欧洲计算机制造商协会）国际（一个国际性信息和电信标准组织）进行标准化完善而成的、面向对象编程的脚本程序设计语言标准。ECMAScript并非具体的脚本编程语言，而是吸收多种脚本语言的特点和规范，制订的一种标准。符合该标准的脚本编程语言都可被称作ECMAScript。例如，由MozillaFireFox浏览器支持的JavaScript和微软InternetExplorer支持的Jscript等，都是符合ECMAScript的子集、具体实现或扩展。,16,1.4动态网页开发技术,动态网页开发技术的本质，就是通过编程语言编写的程序与用户进行交互，并将交互所需的数据以及反馈的结果存储到数据库中。动态网页开发技术与一般用于网页特效的脚本语言最大的区别在于，脚本语言所反馈的信息是固定的，基于网页本身的。而动态网页开发技术反馈的信息则是从数据库中调用的。,17,1.4.1ASP技术,ASP（ActiveServerPages，动态服务网页）是微软公司开发的一种由VBScript脚本语言或JavaScript脚本语言调用FSO（FileSystemObject，文件系统对象）组件实现的动态网页技术。ASP技术必须通过Windows的ODBC与后台数据库通信，因此只能应用于Windows服务器中。ASP技术的解释程序包括两种，即Windows9X系统的PWS和WindowsNT系统的IIS。在Windows系统中，必须安装其中一种解释程序，才能使用ASP技术。,18,1.4.2ASP.net技术,ASP.NET是一种已经编译的、基于.NET的环境，可以使用任何与.NET兼容的语言（例如C#、VB.NET等）构造Web应用程序。ASP.NET可以很好地与HTML编辑器和VS.NET编程语言一起工作。ASP.NET也是微软公司提供的开发动态网页的技术。ASP.NET相对于ASP是一个革命性的创新。从运行机制上来说：ASP属于解释型的编程框架，它的核心是VBScript和JavaScript脚本语言，这两种脚本语言决定了ASP的先天不足，这两种脚本语言无法像传统的编程语言那样进行底层操作，所以有时不得不借助于其他语言编写的组件。而ASP.NET是一种编译型的编程框架，它的核心是.NETFramework。它可以运用VS.NET编程序语言开发，这样它就不需要借助于其他的组件来完成底层操作。,19,1.4.3PHP技术,PHP（PersonalHomePages）是一种在服务器端运行的，HTML文档中嵌入的脚本语言。它借鉴C语言、Java语言和Perl语言的语法，同时具有自己独特的语法，可以运行于多种平台。这种语言的目的是让WEB开发人员能够快速高效地写出动态生成的页面。PHP是嵌入到HTML语言中的脚本语言，能够执行一定的功能。如果要将嵌入在HTML文档中的PHP脚本程序与其他语言区分开，如CSS，JavaScript等，就要把嵌入的PHP脚本语言放置到特定的并且成对的标记内。这样当解析一个PHP文件时，会寻找相应的开始和结束标记，这些标记告诉PHP解析器开始和停止的位置。此种解析方式可以使PHP嵌入到各种不同的文档中。在一对开始和结束标记之外的内容会被PHP解析器忽略。,20,1.4.4JSP技术,JSP是一种专门用于在服务器端编译、执行的Web技术，实现普通静态HTML和动态页面输出混合编码的技术，其脚本语言采用Java语言。借助内容和外观表现的分离，Web页面制作的任务可以方便地划分给页面设计人员和程序员，并方便地通过JSP来合成。相比ASP和PHP，JSP具有支持线程、安全、高效等性能。,21,1.5网页设计软件,网页的设计并非简单输入文本的过程，而是一个从处理图像、制作动画到编写网页代码和脚本的完整过程。在这一过程的各种阶段中，需要使用不同类型的软件。这些软件可以极大地提高网页设计的效率。本节将介绍网页设计时使用的3种主要软件，又被称作网页三剑客的Fireworks、Flash以及Dreamweaver。,22,1.5.1FireworksCS4,在各种图像处理软件中，Fireworks是最贴近网页设计需求的图像处理软件之一。目前Fireworks的最新版本为CS4（10.0.3）版本，在该版本中，采用了全新的界面，并增强了与Flash、Dreamweaver等软件的集成性能，并提供了基于CSS的布局，允许用户设计图像并导出以XHTML文档和CSS样式结合的网页，支持将图像导出为PDF，并新增了动态样式等功能。,23,1.5.2FlashCS4,Flash是目前应用最广泛的网页动画设计工具。其具备了从动画的绘制、动作的实现、编程控制以及最后动画的输出等一整套实用的功能，可以完全满足用户的动画创意、动画设计、动画制作以及动画发布所有的要求。使用FlashCS4，不仅可以快速地制作各种网页动画，还可以编辑一些专业的动漫作品，甚至开发基于互联网的跨平台应用程序。,24,1.5.3DreamweaverCS4,Dreamweaver是目前最流行的网页设计工具。其既具有所见即所得的网页设计界面，同时也具有强大的代码编写功能。无论初学者，还是自身的网页程序员，都可以使用Dreamweaver制作出精美的网页，甚至编写出各种复杂的网页应用程序。,25,1.6网站建设流程,随着网站建设的分工越来越细，网站的制作逐渐发展成为一个由网页界面设计、网页制作、数据库开发和动态应用程序编写等一系列工作集成的系统工程。同时，建设一个网站投入的各种前期和后期工作也越来越繁重。了解网站建设的流程，可以有效地进行网站建设的规划，提高网站建设的效率。,26,1.6.1网站策划,在网站的建设工作进行之前，首先要对网站所采用的内容、提供的服务等重要的信息进行策划，为网站中页面设计提供必要的前期数据和参