 第一章 网页的基础知识 |
|
|
1.1 什么是网页? 网页实际是一个文件，他存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序（参见“域名系统”），网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。 1.2构成网页的元素 文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。 (1) 文字与图片：文字与图片是任何一个网站最基本的要素。浏览器会根据网页文件中的HTML代码，将文字与图片正确的表现出来。在一页网页中，文字与图片的比例要适当，文字太多，会使减低网站的吸引力；图片太多，又会使页面的浏览速度大大下降，浏览者可能还没等到网页内容全部出现，就已经跳到别的网页去甚至把浏览器关掉。 (2) 动画：假如网页上只有静止的文字和图片，就未免显得过于沉闷。假如有些动画点的点缀，必定会生色不少。通常看到的网页动画，都是动态的GIF格式图片。动态GIF的原理十分简单，就是高速显示多幅的静态GIF图片，就像播动画片一样。而动态GIF的制作也是相当简单的。 要提出的是，动态GIF使用也不能过多，否则不仅网站的浏览速度会大打折扣，更会给人一种眼花乱的感觉。如果需要在网页上加上一些大型或复杂的动画，就需要借助到FLASH动画。利用这FLASH技术，我们可以在网页做出交互性很强的动画，甚至是网上游戏，不过，浏览者要看到FLASH制作的动画，就需要在浏览器加装PLUG-IN程序，并且速度较慢。 (3) 音乐：在多媒体技术大行其道的今天，网页不仅仅可以有色，还可以有声。适当的在网页上加点音乐效果，会使网页更具吸引力。网上的流行的声音格式有MIDI、WAV、MP3及REAL AUDIO。 MIDI格式的音乐，占用空间小，一般有十几KB、几十KB不等，适于网上传播，但音色单调，要发挥MIDI的最大功力，就需要浏览者装有带硬波表的声卡或软波表程序。 WAV为常见的无压缩声音文件，占用空间大，现时通常为配合FLASH动画一起使用。 MP3是时下非常流行的压缩音乐文件，占有空间比WAV少得多，但也能保持相当好的音质。缺点是一定要先下载再收听。 REAL AUDIO是网上最流行的音色格式，虽然他比起WAV和MP3的音质稍差，但占用空间却少很多，而且他还有另一个优点，就是浏览者可以一边下载一边播放。 (4) 视频影像：众所周知，视频影像是一种非常直观而有效的表现方式，但碍于网速所限，下载一个视频文件要花费很多的时间。而现时借助一边下载，以便播放的串流技术(STEAMING)，就可以解决这个问题。视频串流技术常见的格式有REAL VIDEO、MICROSOFT MIDIA及APPLE QUICTIME，他们各有所长，其中数REAL VIDEO的使用者最多。 (5) 搜索功能：搜索功能是使得浏览者在短时间内，快速地从大量的资料中找到符合要求的资料。这对于一个资料非常丰富的网站来说非常有用。要建立一个搜索功能，就要有相应的CGI程序以及完善的数据库支持，而建立数据库需要耗费相当的人力物力，这是决策者不可不知的一件事。 (6) 留言版、论坛及聊天室：留言版、论坛及聊天室为浏览者提供一个信息交换的地方。浏览者可以就个别的产品、服务或话题性讨论。顾客也可以就他们提出的问题提出咨询，或者得到售后的支持服务。 (7) 提交表单：提交表单的用途很多，从收集顾客的意见、资料登记、服务申请、网上购物等等，都 需要使用到提交表单的功能。提交表单的功能是看似很简单，其实也需要一些专门的网页程序，将收集到的资料进行处理才能用作其他用途，如CGI、ASP、PHP、JSP等。 (8) 网页程序 ：要设计一些更复杂、更大型、用途更多的网页，例如大型的门户网站、拍卖网站、购物网站等，就需要更专业、更高级的网页程序支持，如JAVA、JAVA SCRIPT、ACTIVEX、ASP等。不过，一般的中小型企业的网站，通常都不需要用到这些技术，即使有机会使用，也只限于一些简单的应用。 1.3网页的类型 通常我们看到的网页，都是以 htm 或 html 后缀结尾的文件，俗称 HTML 文件。不同的后缀，分别代表不同类型的网页文件，例如以CGI、ASP、PHP、JSP甚至其他更多。 (1)HTML：全称 HyperText Markup Language，正式名称是超文本标记语言，利用标记（tag）用来描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本编辑器都可以对它进行编辑，与VB、C++等编程语言有着本质上的区别。 举一个简单的例子： HTML 原代码： <b>goEway.com</b> 从不懂上网到网络高手 在浏览器的显示效果： goEway.com 从不懂上网到网络高手 其中 <b></b> 就是两个HTML标记。它以起始标记<b>及结束标记</b>标记文字 goEway.com，令它显示成粗体。要知道更多有关HTML的知识，请看“HTML彻底剖析” 对于网页制作的初学者来说，理解 HTML 的工作原理是必要的，但也无须仔细地了解到每一个标记的作用，因为现在已经有了很好的所见即所得的网页编辑软件为我们快速地生成 HTML 代码，例如 Dreamweaver 和 Frontpage ，再也无须象早期的网页制作人员一样，一行一行地编写代码了。 但是，对于以下的“网页类型”，及接着的“网页相关技术”，的确会让一些初学者产生恐惧心理，其实不用担心，在这里，我们只会作简单的介绍，而作为初学者，也只需作初步的了解就足够了。就算一时间无法理解，也可以先放在一边，先看“一些与网页密切相关的技术”，待日后回过头来再慢慢消化这部分的内容也不迟。 目前，最常用的三种动态网页语言有ASP,JSP,PHP。 (2)ASP：全名Active Server Pages，是一个WEB服务器端的开发环境，利用它可以产生和执行动态的、互动的、高性能的WEB服务应用程序。ASP采用脚本语言VBScript（Java script）作为自己的开发语言。 (3)PHP：一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C,Java和Perl语言的语法, 并耦合PHP自己的特性,使WEB开发者能够快速地写出动态产生页面。它支持目前绝大多数数据库。还有一点，PHP是完全免费的，不用花钱，你可以从PHP官方站点(http: //www.php.net)自由下载。而且你可以不受限制地获得源码，甚至可以从中加进你自己需要的特色。 (4)JSP：是Sun公司推出的新一代网站开发语言，Sun公司借助自己在Java上的不凡造诣，将Java从Java应用程序和Java Applet之外，又有新的硕果，就是JSP，Java Server Page。JSP可以在Serverlet和JavaBean的支持下，完成功能强大的站点程序。 三者都提供在 HTML代码中混合某种程序代码、由语言引擎解释执行程序代码的能力。但JSP代码被编译成 Servlet并由Java虚拟机解释执行，这种编译操作仅在对JSP页面的第一次请求时发生。在ASP 、PHP、JSP环境下，HTML代码主要负责描述信息的显示样式，而程序代码则用来描述处理逻辑。普通的 HTML页面只依赖于Web服务器，而ASP 、PHP、JSP页面需要附加的语言引擎分析和执行程序代码。程序代码的执行结果被重新嵌入到HTML代码中，然后一起发送给浏览器。ASP 、PHP、JSP三者都是面向Web服务器的技术，客户端浏览器不需要任何附加的软件支持。 1.4 一些与网页密切相关的技术 (1)Java：Java 是由 Sun 公司开发而成的一种编程语言，利用 Jave 写成的小程序叫做 Java Applet。使用它可在各式各样不同种机器、不同种操作平台的网络环境中开发软件。而且，不论你使用的是哪一种 WWW 浏览器，哪一种计算机，哪一种操作系统，只要WWW浏览器上面注明了“支持Java”，你就可以看到生动的主页。 当初Java面世的时候，曾经轰动一时，被认为将会成为 Internet 应用的主要开发语言。但时至今日，Java 的风头已大不如前，原因是 Java 也有着起致命的弱点，就是在客户端的编译运行的速度慢，资源消耗大。现在 Java 多用于服务器端、及一些复杂的客户端程序的编写。 (2)JavaScript：JavaScript 具有脚本语言的“简单”这个特性，编写容易，不需要有很深的编程经验。JavaScript 语言是通过嵌入或整合在标准 HTML 语言中实现的，也就是说 JavaScript 的程序是直接加入在HTML文档里，当浏览器读取到 HTML 文件中 JavaScript 的程序，就立即解释并执行有关的操作，无须编译器，其运行速度比 Java Applet 要快得多。 现在， JavaScript 已经成为了制作动态网页必不可少的元素，大家经常在网页上看到的动态按钮、滚动字幕，就大多数都是使用 JavaScript 技术制作的。 (3)CSS：CSS（Casading Style Sheets 层叠样式表），跟 HTML 一样也是一种标记语言，甚至很多属性都是来源于HTML。利用 CSS 技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。 (4)Flash：Flash 是 Macromedia 公司出品的一个适量动画制作软件，用他做出来的动画就叫Flash动画，其特点是：动画具有很强的交互性，我们甚至可以完全使用 Flash 来制作一个网站；采用“准”流（Stream）式的设计，就是说，我们可以一边下载动画文件一边欣赏动画；由于它是基于矢量的图形系统，因而只要使用得当，就可以大大地减少文件的数据存储量，所占空间比位图少得多，非常适合在网络上使用。同时，矢量图像可以做到真正的无级放大，这样，无论用户的浏览器使用多大的窗口，图像始终可以完全显示，并且不会降低画面质量。如果你看过使用了 Flash 技术的网站，你一定会被其神奇的魅力所倾倒。当然，Flash 也有其弊端，就是维护更新不方便，不适宜用于一些更新频繁、信息量大的网站。 (5)DHTML：DHTML 的全称为 Dynamic HTML，也就是我们常说的动态 HTML。很多人都误会 DHTML 是一种语言，其实 DHTML 仅仅是一个概念——通过各种技术的综合发展而得以实现的概念，这些技术包括Javascript，VBScript，DOM（Document Object Model，文件目标模块），Layers（层）和 CSS 等。DHTML 的目的在于加强网页的交互性；对用户的操作在本地就可做实时处理，从而得到更快的用户响应；使网页的界面更丰富多变，使页面设计者可以随心所欲地表达自己的构思。动态 HTML 与动态网页是两个不同的概念，你可以简单的理解为动态 HTML 能使网页上的元素动起来（如文字的变色，图片的移动）；而动态网页，则是在服务器端动态地生成你看到的“静态”网页，而这个网页上的元素，并不一定会“动” 1.5 网页制作和美化工具 1.5.1网页制作工具 1．超文本标识语言（HTML） HTML（Hypertext Markup Language）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。 HTML文档由文本、格式化代码和导向其他文档的超链接组成。 2．FrontPage FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。 FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便，Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员，使之功能更为强大。 3．Dreamweaver Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。另外，Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用，即使是初学者也能制作出相当于专业水准的网页，所以Dreamweaver是网页设计者的首选工具。 Dreamweaver支持动态HTML，并采用了Roundtrip HTML技术，从而奠定了在网页高级设计功能方面的领先地位。在进行网页设计过程中，动态HTML技术能够让用户轻松设计复杂的交互式网页，产生动态效果；而Roundtrip HTML技术则可以真正支持HTML源编辑模式，不会产生冗余代码，使网页渲染速度加快。因此，Dreamweaver是一种可以满足多层次需求、功能强大的可视化专业级网页设计及制作工具。 1.3.2网页美化工具 为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化工具对网页进行美化。 1．Photoshop Photoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。 2．Fireworks Fireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。 作为一款为网络设计而开发的图像处理软件，Fireworks还能够自动切割图像、生成光 标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。 3．Flash Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。 |
一、网页文件的种类
（1）公司、单位信息发布
（2）出版物，即电子报刊
（3）个人主页
（4）在线购物站点
（5）专题介绍
（6）实用信息服务
二、 网页文件的规划
网页文件的规划也就是网页文件的内容组织和结构设计。
合理的结构设计对于网页文件的规划是至关重要的。
① 层状结构
层状结构（如图1.8所示）类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。
② 线性结构
线性结构（如图1.9所示）类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。 通常情况下，网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的特点，使网站文件既具有条理性、规范性，又可同时满足设计者和浏览者的要求。
③ Web结构
Web结构（如图1.10所示）类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。
三、网页文件的设计原则
1．总体设计
2．主题鲜明、结构合理
3．组织网页
4．设计首页的考虑
首页（Homepage）作为网页文件的第一页，在整个网页文件中具有举足轻重的作用。
5．网页设计的标准
2.2 网页的创意设计
网页的创意设计一般应遵循以下两个原则：
（1）依据信息内容的意义和结构进行情节化、理性化的统调布局和必要的图像符号化处理。
（2）网页的创意设计还必须重视“形象思维”的情感象征意义的传达，以有别于知识性思考形式审美结构的营造。
一、 网页创意设计的意义、功能和目的
网页创意设计是否成功，除了其内容因素外，首先要看其在视觉上能否引人注目。
网页的创意设计包括文字排列方向、字群聚散组合，字体大小风格的选择，图片的分布及色彩与空白的经营，不仅追求网页形式的变化，更重视各视觉元素的不同形式和构成能给人在感情上造成不同的心理感受，并体现不同的主题。
二、网页创意设计的构成要素及其作用
1．标题：标题是表达信息主题的短句，标题有主标题与子标题之分。
2．标语：标语是具有韵味的意义完整的句子。
3．正文 4．网页名称 5．标志
6．插图：将所传达的信息内容赋以视觉化的造型称为插图。7．图标 8．背景
9．动画：动画不仅能增添网页的视觉趣味效果，同时，也可以用来进一步突出网页和信息内容的主题和风格。
三、网页创意设计的原理和准则
进行网页的创意设计时，应遵循以下几条构成原则：
（1） 内容与形式表现必须统一和有序，形式表现必须服从内容要求，在造型上各构成要素规格化的设计样式要统一。
（2） 必须考虑网页上各构成要素之间的视觉流程，能自然而有序地达到信息诉求重点的位置，突出主题。
（3） 注意保护网页在视觉上的相对均衡感，不论是正常的均衡或是异常的均衡，均应有相应的均衡和律动感，使其在网页上得到正确的配置，否则会失去必要的安定感。
（4） 突出主题要素。
（5） 注意网页设计中的空白处理。
（6） 注重整体的对比因素。
（7） 在视觉上着力强调网页的诉求重点。
（8） 注意提高网页信息内容的视读性。
（9）创造一定的韵律感：它反映在网页设计中利用有力的线条、形体及色彩形成一种有节奏性的律动感，能引导人的视觉以一种流畅而有停顿的方式运动。既有视觉的连续性又有间歇性，使人能够抑扬起落地浏览整个网页，阅读时感到轻松而又富于韵味。
四、网页创意设计的形式法则和表现手法
1．视觉流程 2．点、线、面 3．形状间的组合和构成关系 4．形状与空间关系 5．构架与空间 6．节奏与韵律 7．对比，调和与统一 8．装饰与趣味 9．特异
2.3 网页的创作步骤
辽公网安备:42900402000182号