网页设计与 制作教程(第三版)

网页设计与 制作教程(第三版)

网页制作教程admin2020-11-21 22:16:0334A+A-

  网页设计与 制作教程(第三版)_计算机软件及应用_IT/计算机_专业资料。普通高等教育“十一五”国家级规划教材 赵祖荫 主编 网页设计与 制作教程(第三版) 第1章 网页设计与制作基础 1.1 1.2 1.3 1.4 Internet基础 网页图像基础 网页制作软件

  普通高等教育“十一五”国家级规划教材 赵祖荫 主编 网页设计与 制作教程(第三版) 第1章 网页设计与制作基础 1.1 1.2 1.3 1.4 Internet基础 网页图像基础 网页制作软件的主要功能和特点 本章小结 第1章 网页设计与制作基础 本章重点: ? Internet基础知识 ? 网页图像基础 ? 网页制作套件的主要功能和特点 1.1 Internet基础 1.1.1 Internet与务 计算机网络,简单的说,就是用通信线路把若 干计算机连起来,再配以适当的软件和硬件,以达 到计算机之间的资源共享和信息交换。Internet的中 文名称是因特网或国际互联网,是一个几乎覆盖了 全世界的计算机网络。 Internet提供的服务主要有万维网(WWW)服 务、电子邮件(E- mail)服务、文件传输(FTP)服 务、远程登录(Telnet)服务和新闻与公告类 (Usenet)服务等。 网页能存放在全球的任何一台计算机上。所以 一旦与WWW连接,用户就可以使用相同的方式轻松 地接收全球任何地方的信息。Internet上链接在一起 的网页构成了一个庞大的信息网。 图1-1 网页的超文本结构 1.1.2 服务器与客户机 Internet连接着难以计数的计算机,按照功能它们 大致可分为服务器和客户机两类。 服务器是提供资源和服务的计算机。 客户机是供用户使用资源和享受服务的计算机。 浏览者在访问网页时,使用的是客户机。浏览器 向存放网页的WWW服务器(经常是在很远的地方) 发出一个请求;收到请求后,WWW服务器将响应信 号和网页发送给客户机。该流程如图1-2所示。 图 1-2 客户机和服务器 客户机也可以通过浏览器将数据信息上传给 WWW服务器的数据库或者应用程序,还可以利用交 互式网页向服务器的数据库查询数据,然后服务器将 处理结果以网页的形式反馈给用户。 1.1.3 IP地址和域名 网络上的每一台计算机都必须有IP地址或域名 作为其独一无二的标识,就像我们每个人都有一个身 份证号一样,作为身份的确认。 IP地址是Internet上计算机的数字标识。两台计 算机不能有相同的IP地址。它通常由四个0~255间的 十进制整数和中分点构成,例如202.121.80.18、 196.2.56.3都是合法的IP地址。 1.1.4 URL和超链接 Internet是全球最大的信息库,每个服务器上 都有成千上万的各种资源,那么如何来标识这些 资源呢? 用于解决这一问题的是统一资源定位器 (uniform resource locator简称URL)。URL是全 球WWW网服务器资源的标准寻址定位编码,它 被用来确定资源的相应位置。 URL采用统一的格式: 协议名://服务器的IP地址或域名/路径/文件名 1.1.5 HTML语言和网页制作工具 网页实际上就是一个用超文本标记语言 HTML(hyper text markup language)编写的文本 文件,从而把文字、表格、图像、动画、声音和 视频等各种媒体有机地组合在一起。 HTML语言能够运行于各种操作系统。 例如图1-3所示的网页的HTML语言源文件为: html head title网页设计大家学/title /head body p align=centerbfont color=#FF0000 size=7网页设计大家学/font/b/p /body /html 图 1-3 网页的例子 1.2 网页图像基础 1.2.1 位图和矢量图 1. 位图 位图是由分配了特定位置和颜色值的点(象 素)的排列组成。位图的色彩和色调变化丰富,但 占用空间较多。 对位图进行编辑时,处理的实际上是一个个 象素。位图的质量与分辨率有关。如果在屏幕上 以较大的倍数放大显示图像,在图像边缘可能会 产生锯齿。如图1-4所示,位图格式的向日葵图片 被放大后与原图对比有很明显的马赛克纹样。 图1-4 将位图格式的局部图像放大前后的效果对比 2. 矢量图 矢量图用一组绘图指令来描述图像的内容, 这些指令根据图形的几何特性定义图形的轮廓, 并用颜色进行描边和填充。矢量图主要用于表示 线框型的图画、工程制图、艺术字等。矢量图文 件的容量较小。 矢量图形和分辨率无关,它们在不同分辨率 的输出设备上显示效果都相同。 图1-5显示了将矢量格式的向日葵局部图像 放大前后的实际效果。 图1-5 将矢量格式的局部图像放大前后的实际效果。 1.2.2常用图像格式及其特点 图像格式是指计算机中存储图像文件的方法, 它们代表不同的图像信息、色彩数和压缩程度。 图形图像处理软件通常可以处理多种图像文件格 式,每一种图像格式都有它的特点和用途。在选 择输出的图像文件格式时,应考虑图像的应用目 的以及图像文件格式的特点。 1.BMP图像文件格式 BMP图像是Microsoft Windows所定义的图像 文件格式,在Windows中运行的图形图像软件都 支持BMP图像格式。BMP图像文件只能存放一幅 图像,图像数据有压缩或不压缩两种处理方式。 2.GIF图像文件格式 GIF图像是一种包含有帧、调色板、优化方 案等工作信息的位图格式。最多只支持256种颜色, 支持透明色。采用无损压缩的方法,产生的文件 很小。 GIF图像在网络上使用广泛。网络图像中色 彩简单、内容不很复杂、动画以及包含透明区域 的图像比较适合使用该图像格式。 3. JPEG图像文件格式 JPEG图像支持多达224种颜色,可以描绘真 实场景图像或颜色丰富、内容细腻的图像。JPEG 图像采用有损压缩的方法,图像质量与采用的压 缩比相关,经过高倍压缩的JPEG图像文件比较小, 是目前网络中使用最广泛的图像格式之一。 4.PNG图像文件格式 PNG图像是一种专门针对网络发布而开发的无 损压缩图像文件格式,可以保存灰度模式、索引颜色 模式、图层、帧等图像信息,并提供从28到232种颜 色的支持,同时支持透明背景和动态效果。 256色的PNG图像格式具有GIF图像格式的全部 功能,文件大小比GIF图像格式小。 支持224或232种颜色的PNG图像格式提供高压 缩比的无损图像压缩。PNG图像使用的是高速交替显 示方案,显示速度很快,只需要下载1/64的图像信息 就可以显示出低分辨率的预览图像。 5.PSD图像文件格式 PSD图像是著名图像处理软件PhotoShop中 使用的一种标准图像文件格式,能够保存图像处 理的每一个细节部分,便于图像的编辑和再处理。 1.2.3 色彩的属性 网页中的色彩是网页内容的一种表现,能够 突出地显示整个网站的风格,给人以视觉冲击。 不同的色彩搭配产生不同的效果,并可能影响到 访问者的情绪。好的色彩搭配具有感染力,同时 也具有象征性,所以确定网页的基准色彩就显得 尤为重要。 1.2.3 色彩的属性 色彩可以分为无彩色和有彩色两大类。无彩 色包括黑、白、灰三种颜色;有彩色包括红、黄、 绿、青、蓝、紫等多种颜色。各种色彩都具有明 度、色相和纯度三种属性。 1.明度 明度是指色彩的明暗程度,任何色彩都有自己的明 暗特征。从光谱上可以看到最明亮的颜色是黄色,处于光 谱的中心位置。最暗的是紫色,处于光谱的边缘。 一个物体表面的光反射率越大,对视觉的刺激的程 度越大,看上去就越亮,这一颜色的明度就越高。因此明 度表示颜色的明暗特征,也就是说明度较高的色彩较亮、 明度较低的色彩较暗。 明度在色彩三要素中可以不依赖于其他性质而单独 存在,任何色彩都可以还原成明度关系来考虑,明度适于 表现物体的立体感和空间感。黑白之间可以形成许多明度 台阶,人的最大明度层次辨别能力可达200个台阶左右, 普通使用的明度标准大都为9级左右。 图1-6 色彩明度值由高到低的明度变化过程 2.色相 色相是指色彩的相貌,用来区别色彩种类。 红、黄、蓝等色族便就是色相,它们之间的差别 属于色相差别。 在应用色彩理论中,通常用色环来表示色彩 系列。最初的基本色相为红、橙、黄、绿、蓝、 紫;在各色中间加插中间色后,可制出红、橙红、 黄橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫、 紫、红紫十二个基本色相。 如果进一步再找出中间色,还可以得到二十 四个色相。 3.纯度 纯度是指色彩的鲜艳度、饱和度。比如,红 色中有鲜艳没有杂质的红、干涩灰暗的红以及淡 薄的粉红等,它们的色相都是红,但却强弱不一, 这说明它们的纯度不同。通常色彩纯度越高的颜 色越鲜艳,纯度越低的越灰暗。任何一种色相只 要和黑、白、灰中的任意一种混合纯度就会降低。 比如,和白色相混明度增加纯度减弱;和黑色相 混明度减弱色相变暗。 1.2.4 RGB色彩模式和Web安全色3 物体的颜色,实际上是由物体表面发出的特 定波长的光作用于人的视觉器官而产生的。自然 界中的颜色千变万化、数不胜数,但每种颜色都 可以用红(R)、绿(G)、蓝(B)三种色光按一定的比 例混合而成,这三种色光被称为光的三原色。 网页制作中使用最广泛的是RGB色彩模式的 十六进制显示模式。即用3个00~FF的十六进制数 来表示组成颜色的红、绿、蓝色的数值。例如: 000000表示黑色, FFFFFF表示白色,00FF00表示 红色,0000FF表示蓝色,总共有224种颜色。 1.2.4 RGB色彩模式和Web安全色3 在图像处理软件中一般都有调色板,用户可 以通过调整RGB的数值选择所需的颜色。图1-7是 Fireworks 8中的调色板。 图1-7 Fireworks 8中的调色板 不同的操作系统和浏览器可能采用不同的调 色板。图像在网络发布后,色彩的显示可能会受 到浏览端的操作系统和浏览器的影响,同一种颜 色也许会在不同的浏览端显示出不同的明度或者 色相。 我们把在不同的操作系统和浏览器中显示效 果一致的216种颜色称为网络安全色。辨别一种颜 色是否是网络安全色的方法是看其颜色值,任何 由00、33、66、99、CC或者FF组合而成的颜色值 都是Web安全色。例如:003366、0066FF、 33CC99等。通常在软件中如图1-8所示的颜色拾取 框中可以直接选取的颜色都是Web安全色 图1-8 Fireworks 8中的颜色拾取框 1.2.5 图像元素在网页中的应用 网页传达的信息由视觉和听觉两种形式组成, 目前主要通过视觉进行传播。网页的视觉设计过 程和其他传统媒体的视觉设计过程一样,通过合 理的组织文字、图像和视频等视觉元素来实现设 计效果。图像是十分重要的网页组成元素,没有 图像的网页往往会显得单调枯燥。 1.LOGO(标志) LOGO是文字、符号、图案按照特定的设计 理念有机结合的产物。网站的标志(LOGO)和产品 的商标—样,是网站主题和风格的集中体现。 2.标题 在网页中可以使用图像标题或文本标题。文 本标题在设计时采用的字体,如果浏览端没有安 装就会被其他字体代替,影响网页的质量。图像 标题表现形式丰富,可以使用各种图案,也可以 使用各种艺术字,在浏览端也不存在字体被替换 的问题。 3.照片和插图 照片和插图是给网页增强视觉效果的基本工 具。它们不仅能够美化页面,而且能够简洁准确 地传达信息。照片和插图的选择取决于站点的内 容和风格,还要注意图片文件不能过大以免用户 下载时间过长。选用JPEG图像文件有必要的话应 进行压缩,在文件大小和图片质量间取得平衡。 4.广告横幅(Banner) 网络广告是推广产品的重要途径。在网站上 做广告通常有两种形式,一种是文字链接广告, 一种是Banner图像广告。图像广告能快速醒目地 吸引浏览者的注意。 广告(Banner)可以有任意大小和形状。图 像格式也常选择GIF动画或Flash动画。 5.背景 网页的背景是网站整体设计风格的重要体现 方法之一。背景可以是单色,也可以是图像。背 景图像可以是GIF格式,也可以是JPEG格式。这 些都取决于整体风格的要求。 制作背景时要注意避免喧宾夺主,不能妨碍 浏览者浏览页面内容。背景图像一般平铺在网页 上,图像尺寸和文件大小都不必也不宜太大。 6.导航栏 整个网站会有很多网页,各网页之间存在着 较为复杂的链接关系。导航栏指向网站的关键部 分,能帮助浏览者熟悉网站结构,快速找到想浏 览的网页。 导航栏有两种形式:文字式导航和图像化导 航,两种方法各有所长。文字式导航清楚易懂, 下载迅速,适用于信息量大的网站。图像化导航 栏大方美观,表现力强,适用于一般的商业网站。 也有很多网站把这两种方法结合使用,同时设立 文字式导航和图像化导航。 一个站点中,导航栏的设计应尽可能保持一 致,达到站点风格的统一。 1.3 网页制作软件的主要功能和特点 Macromedia公司的Dreamweaver 8、Fireworks 8、 Flash 8三个软件是优秀的网页制作套件,被许多用户 称之为网页制作的梦幻组合,又称为网页设计 “三剑 客”。 Macromedia公司对这三款软件的功能进行了合 理的划分。如Dreamweaver 8用于对网页进行整体的布 局和设计,以及对网站的创建和管理;Fireworks 8用 来绘制和优化网页中所用到的图像,并可以制作按钮、 导航条和简单的动画;Flash 8则主要用于制作网页中 的矢量动画。综合使用这套软件便能够制作出理想的 网页。下面就来介绍这三款软件的主要功能和特点。 1.3.1 Fireworks 8 的主要功能和特点 Fireworks 8是网络图形的处理软件,它集网 页图形的创建、编辑、管理于一体,简化了制作 网页图形的流程,能生成大小合适而且质量较好 的网页图形。Fireworks 8具有易学易用、方便快 捷、轻巧高效等众多优点,可以快速创建所需的 各种网页图形。 Fireworks 8 的主要功能和特点 (1)Fireworks 8工作环境与Dreamweaver 8、 Flash 8和谐统一,具有相同风格的面板、菜单栏、 工具箱等。 (2)提供了强大的矢量图形和位图图像的编辑功 能,可以直接在位图图像和矢量图像两者之间进 行切换,可以避免图像在多个应用程序之间转移。 (3)可以快速创建Web导航,由向导程序自动生 成图形和JavaScript代码,并可以在Dreamweaver 8 中方便地编辑所生成的图形文件。 (4)可以进行图形的热区与切片制作,创建复杂 的交互动作和GIF动画文件。 (5)输入输出功能强大,完全支持HTML、 JavaScript和图像的输出;允许导入、导出 Photoshop文件,支持层的遮罩控制和保持对象各 种效果的可编辑性;允许对同一图形中的不同区 域采用不同级别的压缩,在保证图像质量的同时 减小文件的体积,有利于图像在网络上的传输。 (6)提供了一个批处理命令环境,允许设计者快 速地创建并执行批处理任务。 1.3.2 Flash 8的主要功能和特点 Flash 8是制作适合网络传输的流媒体动画的 专用软件。Flash动画文件具有体积小、可边下载 边播放、多媒体交互性等特点,已成为当前制作 高压缩网络动画的专业工具软件。 Flash 8的主要功能和特点 (1)Flash 8与Dreamweaver 8、Fireworks 8有相同 风格的快速启动栏、浮动面板、菜单栏、工具箱 等。 (2)提供了与Fireworks 8基本相同的绘图工具, 因此对于掌握Fireworks 8的设计者来讲,在使用 Flash 8的绘图工具时,基本上不需要再进行重复 学习。 (3)利用关键帧和元件等技术,可以轻而易举地 制作出各类动画。许多动画仅需制作开头和结尾 的关键帧,就可以由Flash 8自动生成中间的部分, 大大减少了设计者的工作量。 (4)提供了层技术,使动画的各组成部分既分又 合,方便了动画的制作和修改。 (5)支持许多图像、声音、视频格式,这些多媒 体文件均可以直接导入动画中,从而使Flash动画 声像并茂。 (6)提供了功能比较完善的ActionScript脚本语言, 可以为动画加入交互效果。 在Flash 8中处理的文档可以保存为Flash 5.0文档的 格式、HTML格式、EXE可执行文件格式等多种 文件格式。 1.3.3 Dreamweaver 8的主要功能和特点 Dreamweaver 8是集网页制作和网站管理于 一身的网页编辑软件,是一套针对专业网页设计 者和开发者的可视化网页开发工具。它具有功能 强大、代码简洁和操作方便等特点,利用它可以 非常轻松地制作出跨越平台和浏览器限制的充满 动感的网页。 1.网页制作方面的功能和特点 (1)在设计网页时,浮动面板和选项卡式的文档 窗口在编辑窗口中可随意移动,这些面板可以组 合在一起,也可以折叠或者扩展,并且可以根据 需要让其缩到屏幕一边,给工作区增加更大的空 间。利用各种浮动面板来调整网页元素的参数, 在不关闭浮动面板的情况下可以直接看到修改的 结果,真正实现了所见即所得的功能。 (2)可使用HTML标记、HTML样式、CSS样式 来格式化文本。 (3)支持使用表格、布局表格和布局单元格、层、 框架来规划网页的布局。 (4)支持用时间轴和行为来制作与控制动感网页。 (5)可使用单选钮、复选框、列表和文字编辑框制作各 种交互式表单,用于信息交流。 (6)可以创建批量制作网页的模板,利用模板来建立风 格一致的网页,将网页的内容与页面的设计分开,使得网 页制作更规范、网站更新更迅速。 (7)可以很方便地将Flash、Fireworks、Shockwave、Java 和ActiveX等软件生成的文件插入到网页上。 (8)Dreamweaver 8可与Macromedia公司出品的其它软件 如Fireworks 8、Flash 8等密切配合,从而更高效地完成网 页制作工作。 (9)支持多种浏览器,并且可以选择主要的浏览器。 (10)支持第三方插件,任何人可以根据自己的需要扩展 Dreamweaver 8的功能,并且可以发布这些插件。 2.网站管理方面的功能和特点 (1)在【站点】面板中,可以快速创建、设计、 更新和重组网页,也可以快速浏览桌面和网络上 的资源和文件。 (2)利用网站管理器能建立、复制和修改网站。 (3)使用【站点地图】可以有效地管理各网页之 间的链接关系,改变网页文件的位置和名称。 可上传或下载网站的文件,并同步更新站点内容。 1.4本章小结 Internet是一个覆盖几乎全球的计算机网络, WWW服务是互联网上最为先进、应用最广、交 互性能最好的信息检索工具,它向人类提供了一 个无比丰富的资源库,网页是其上主要的资源组 织形式。 图像是网页颇具活力的组成元素,网页上常用的 图像格式是Gif和Jpeg, 网页制作中使用最广泛的是 RGB色彩模式,在不同的操作系统和浏览器中显示 效果一致的216种颜色称为网络安全色。 Macromedia公司的Dreamweaver 8、Fireworks 8、 Flash 8三个软件是网页制作的优秀套件。

点击这里复制本文地址 免责声明:本站内容由程序自动采集于互联网,无人工干预,只作交流和学习使用,本站不储存任何资源内容,如有侵权请联系qq邮箱798244092@qq.com立刻删除,谢谢!

支持Ctrl+Enter提交

网页制作软件 © All Rights Reserved.  
Powered by 多多资源网 Themes by 多多资源网
联系我们| 关于我们| 留言建议| 网站管理