网页设计PPT内部资料.ppt

第1章网页的基础知识 WWW简介网页制作的技术和工具介绍 1 1WWW简介 WWW WorldWideWeb 万维网 服务也称为Web服务 是Internet用户最喜爱的信息查询工具 遍布于世界各地的Web服务器 为上网浏览者提供了图文并茂的Web页 网页 使Internet用户可以有效地交流信息 从天气预报 班机时刻到股市行情 从政府公报 学术成果到企业产品 几乎应有尽有 可以说Internet的迅速流行在很大程度上应该归功于WWW 正是由于它的出现 把地球上的信息资源带进了一个全球范围的交互式环境 1 超文本 超文本 Hypertext 是WWW的信息组织方式 也是WWW实现的关键技术之一 超文本采用一种非线性的网状结构来组织信息 采用这种网状结构 各信息块很容易按照人们的 联想 关系加以组织 2 WWW的工作方式 WWW是以超文本标记语言 HTML HypertextMarkupLanguage 与超文本传输协议 HTTP HypertextTransferProtocol 为基础 能够提供面向Internet服务的 一致的用户界面的信息浏览系统 WWW系统的结构采用客户机 服务器模式 信息资源以网页的形式存储在Web服务器中 用户在自己的计算机上运行WWW的客户端程序 Web浏览器 向WWW服务器提出查询请求 这些请求由客户机程序转换成查询命令 传送给Internet网上相应的Web服务器进行处理 Web服务器根据客户端请求内容 将保存在Web服务器中的某个页面发送给客户端 浏览器在接收到该页面后对其进行解释 最终将图 文 声并茂的画面呈现给用户 用户还可以通过页面中的链接 方便地访问位于其他WWW服务器中的页面或其他类型的网络信息资源 Web服务器上主要存放Web页面文件 通常称为Web站点 在Web站点上除了Web页面文件外还有Web服务程序 当Web服务器接到客户机的查询请求后 第一步总是先将一个称为 主页 HomePage 的初始文件传送给客户机 从主页出发可以连接到本站点的其它页面 也可以连接到其它站点 这样就可以方便地接通世界上任何一个Internet结点 3 浏览器和服务器 WWW浏览器是用来浏览Internet上的Web页面的客户端软件 WWW浏览器为用户提供了寻找Internet上内容丰富 形式多样的信息资源的便捷途径 目前最流行Web浏览器软件有Microsoft公司的InternetExplorer和Netscape公司的Navigator 在Web中 浏览器的任务是 帮助制作一个请求 通常在单击某个链接点时启动 将请求发送给某个服务器 呈交HTML文档和传送各种文件给相应的 观察器 把请求所得的结果进行报告 一个观察器是一个可被WWW客户机调用而呈现特定类型文件的程序 例如当一个视频文件 rm被某个浏览器查阅并下载时 它只能用某些程序 例如流媒体播放软件RealPlayer 来 观察 网络浏览器为网络服务器提供了一个图形界面 它负责把网络服务器送来的HTML在浏览器内转换成图形用户界面 通常浏览器不仅可以向Web服务器发出请求 还可以向其他服务器 例如FTP 邮件服务器 发出请求 一个Web服务器的任务是 接受请求 请求的合法性检查 包括安全性屏蔽 针对请求获取并制作数据 包括用Java脚本和程序 CGI脚本和程序来对数据进行前期处理和后期处理 把信息发送给提出请来的浏览器 4 URL地址 在Web上的任何可用资源 包括HTML文档 图像 视频 程序等等 都有一个地址 称为统一资源定位符URL UniformResourceLocator 资源 是指在网络上所能获取的文字 图像 声音 动画等资料的统称 这些资料实际上都是以各种不同格式的 文件 类型存在 分散于各地的电脑主机中 而 定位符 的目的就是要指出这些资料的所在处 在WWW上 每一信息资源都有统一的且在网上唯一的地址 这个地址就是URL Web浏览器通过使用URL来对互联网上的资源进行定位 一个URL包括了以上所有的信息 它由3部分组成 资源类型 存放资源的主机域名及资源文件名 例如 网页和网站 网页一般又称HTML文件 通过URL识别和存取网站根据一定的规则 使用HTML等工具制作的用于展示特定内容的相关网页的集合 首页Homepage又称主页 访问网站看到的第一个页面 文件名一般默认为index或default 新浪网站的首页 页面组成元素 1 LOGO2 BANNER3 导航栏4 文本和图像5 动画6 超链接7 表单8 声音和视频 1 2网页制作的技术和工具 1 网页制作中的技术知识HTML语言是网页制作的基础 是初学者必学的内容 但是 要编写一个出色的Web页面只靠了解和掌握普通的HTML是远远不够的 许多技术适时地加入了Web页面的编写过程 可以把它们看作是自成一体的Web页面编制技术 但实际上它们更像是HTML的有力补充 这些 技术 中 比较有代表性的有DHTML JavaApplet CGI ASP PHP JSP和XML等 1 HTML HTML即HyperTextMarkupLanguage 中文翻译为 超文本标记语言 它是一种用特殊标记来描述文档结构和表现形式的语言 由W3C WorldWideWebConsortium 所制定和更新 它利用标记 tag 来描述网页中文字的字体 大小 颜色及页面布局等等 使用任何的文本编辑器都可以对它进行编辑 网页就是由HTML语言编写出来的 通常我们看到的网页 都是以htm或html后缀结尾的文件 俗称HTML文件 不同的后缀 分别代表不同类型的网页文件 例如以CGI ASP PHP JSP甚至其他更多 2 DHTML DynamicHTML DHTML包含了4个部分 HTML CSS DOM和脚本语言 Javascript和VBscript CSS CascadingStylesheets 层叠样式表 可以使网页的内容和结构版面控制相脱离 大量的减少网页中重复使用的HTML代码 从而减小网页的体积 这对于在网上传输是非常有利的 并且通过CSS可以使用更丰富 更灵活的样式 更简单设计出更美观的网页 CSS最基本的概念在于可将网页要展示的内容与样式设定分开 也就是将网页的外观设定信息从网页内容独立出来 并集中管理 3 脚本语言 从本质上讲 脚本语言是一种描述性语言 常用的脚本语言有JavaScript和VBScript 脚本语言是HTML一个有力的补充 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言 使用它的目的是与HTML超文本标记语言 Java脚本语言 Java小程序 一起实现在一个Web页面中链接多个对象 与Web客户交互作用 从而可以开发客户端的应用程序等 它的出现弥补了HTML语言的缺陷 它是Java与HTML折衷的选择 4 ASP ASP全称为ActiveServerPages 动态服务器主页 它是微软公司IIS3 0中的一个组件 实际上是一个服务器端的脚本语言开发环境 它包含三个方面的含义 Active ASP使用了Microsoft的ActiveX技术 ActiveX COM 技术是Microsoft软件的重要基础 它采用封装对象 程序调用对象的技术 简化编程 加强程序间合作 ASP本身封装了一些基本组件和常用组件 有很多公司也开发了很多实用组件 只要在服务器上安装这些组件 通过访问组件 就可以快速 简易地建立自己的Web应用 Server ASP运行在服务器端 当脚本程序运行在服务器上时 Web服务器完成所有的工作 包括动态生成HTML页面并传送到用户的浏览器上 程序员不必担心浏览器是否能处理你的页面 因为Web服务器已经全部替浏览器完成页面的转化工作 对浏览器而言 见到的还是普通的HTML页面 ASP了提供VBScript和JavaScript两种脚本引擎 缺省为VBScript Pages ASP返回标准的HTML页面 可以正常地在常用的浏览器中显示 浏览者查看页面源文件时 看到的是ASP生成的HTML代码 而不是ASP程序代码 这样就可以防止别人抄袭程序 利用ASP可以编写计数器 留言簿 公告板 聊天室等等 并且 ASP可以轻松地实现对页面内容的动态控制 根据不同的浏览者 显示不同的页面内容 而浏览者一点觉察不出来 就像为他专门制作的页面一样 2 常用的网页制作软件 对于网页设计者而言 除了要学习HTML CSS等技术知识外 通常还需要掌握网页制作工具 图形工具和网页动画工具的使用 工欲善其事 必先利其器 制作网页第一件事就是选定 学习和掌握网页制作软件 对于网页制作而言 最为常用的专业级产品仍然是Dreamweaver和FrontPage 图形工具大多选择Photoshop Fireworks 而网页动画工具则可以使用Flash GifAnimator等 MacromediaDreamweave Dreamweaver是Adobe Macromedia 公司制作的功能强大的网页制作工具 它很适合专业的制作人员使用 在Dreamweaver中 由于其所见即所得的模式 只要利用鼠标拖曳即可轻易地完成复杂的网页 而无需接触任何源代码 MicrosoftFrontPage FrontPage是Microsoft的产品 它可以帮助用户创建个人站点 电子商务站点 或者是多用户Intranet站点 由于FrontPage与其他Office工具结合非常紧密 因此 如果用户对Word很熟悉 那么使用FrontPage进行网页设计就会得心应手 这样 FrontPage也就成为大多数初学者的选择 AdobePhotoshop AdobePhotoshop是当今世界上最为流行的图像处理软件 其强大的功能和友好的界面深受广大用户的喜爱 MacromediaFireworks Fireworks是Adobe Macromedia 推出的Web图像制作工具 它的出现使Web作图发生了革命性的变化 Fireworks是专为网络图像设计而开发 内建丰富的支持网络出版功能 比如Fireworks能够自动切图 生成鼠标动态感应的JavaScript 而且Fireworks具有十分强大的动画功能和一个几乎完美的网络图像生成器 Export功能 它增强了与Dreamweaver的联系 可以直接生成Dreamweaver的Library甚至能够导出为配合CSS式样的网页及图片 MacromediaFlash Flash是Adobe Macromedia 公司出品的矢量图编辑和动画制作软件 它和MacromediaDreamweaver MacromediaFireworks一起被誉为Macromedia的 网页制作三剑客 Flash自96年诞生以来 很快就被业界接受 并成为交互式矢量动画制作的标准 在互连网上逐渐流行起来 MacromediaFlash具有强大的动画制作功能 制作出来的动画具有短小精悍的特点 更适合放置在网页中使用 其友好的界面 简单易懂的操作 成为当今最流行的动画制作软件之一 UleadGifAnimator 在网页上的动画多数是以GIF和FLASH的格式来呈现的 而这些中以GIF格式的为多 相对FLASH来说 GIF格式图像文件的最大特点是小巧 因此 GIF仍然是Internet上应用最广泛的图像格式 自从Ulead公司在1992年发布UleadGIFAnimator1 0以来 GifAnimator一直是制作GIF动画的工具中 功能最强大 操作使用最简单的动画制