网页制作基本知识

《网页制作基本知识》由会员分享，可在线阅读，更多相关《网页制作基本知识（16页珍藏版）》请在金锄头文库上搜索。

1、 Dreamweaver 网页设计电子版教科书 第 1 章1第 1 章 网页制作基本知识刚开始学习网页制作的人，往往不知道从何入手。针对这种情况，本章简单介绍一下网页相关的基础知识和网站建设的基本流程，以使大家对网页有个感性的认识，并从宏观的角度了解一下网站建设。1.1 认识网站与网页如果读者曾经有过上网的经历，对网站和网页应该不会感到陌生。网页就是我们上网时在浏览器中看到的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。另外，打开某个网站时显示的第一个网页被称为网站的主页（或首页） ，它可以说是网站的门户，通过它不仅可以了解网站

2、的性质和内容，还可以访问网站中的其它页面。下面，我们从网页制作的角度来了解网页的本质和网页的功能组成，以及 IP 地址、域名、网址、静态网页和动态网页等概念。1.1.1 网页的本质图 1-1 上图显示了腾讯网的主页，由该画面可以看出，网页主要由文字、图像和动画等元素组成。事实上，我们看到的网页包括了一组文件，它们分别是网页文件（扩展名为：.html、 .asp 等） 、图像文件（扩展名为 .jpg、.gif 等）和 Flash 动画文件（扩展名为.swf）等。在浏览器中选择“文件”“另存为”菜单，将网页保存到磁盘中，便可看到网页的组成文件，如图 1-1 中、下图所示。 Dreamweaver

3、网页设计电子版教科书 第 1 章2图 1-1 网页及其组成1.1.2 网页的功能组成从浏览者的角度看，网页中无非就是一些文字、图像、动画等。但从专业的角度来讲，网页中的元素各有其不同的作用，可以将它们分为站标、导航栏、广告条、标题栏和按钮等，如图 1-2 所示。 Dreamweaver 网页设计电子版教科书 第 1 章3图 1-2 网页的功能组成1. 站标站标也叫 Logo，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站 Logo 通常采用企业的 Logo。Logo 一般采用蕴含企业文化和特色的图案，或是与企业名称相关的字符或符号及其变形，当然也有很多是图文组合，如图 1-3 所

4、示。图 1-3 网站 Logo在网页设计中，通常把 Logo 放在页面的左上角，大小没有严格要求：不过，考虑到网页显示空间的限制，要求 Logo 的尺寸不能太大。此外，Logo 普遍没有过多的色彩和细腻的描绘。2. 导航条导航条是链接到网站内主要页面的超链接组合，它可以引导浏览者轻松找到网站中的各个页面，导航条也因此而得名。同时，导航条也是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网站的主要内容。设计导航条时，应注意以下几点。 如果网站内容不多，可根据网站风格尝试灵活摆放导航条，也可以使用图片或Flash 动画等制作导航条，如图 1-4 所示。 如果网站栏目很多，可以将导航条分为多

5、排放置在 Logo 的下方或右侧。为便于观看，可为各排设置不同的底色，如图 1-5 所示。站标导航条按钮广告条标题栏 Dreamweaver 网页设计电子版教科书 第 1 章4图 1-4 灵活摆放的导航条图 1-5 多排导航条3. 广告条广告条又称 Banner，其功能是宣传网站或替其它企业做广告。 Banner 的尺寸可以根据版面需要来安排。在 Banner 的制作过程中有以下几点需要注意。 Banner 可以是静态的，也可以是动态的。现在使用动态的居多，动态画面容易引起浏览者的注意。 Banner 的体积不易过大，尽量使用 GIF 格式图片与动画或 Flash 动画，因为这两种格式的文件体

6、积小，载入时间短。 Banner 中的文字不要太多，只要达到一定的提醒效果就可以，通常是一两句企业的广告语。 Banner 中图片的颜色不要太多，尤其是 GIF 格式的图片或动画。要避免出现颜色的渐变和光晕效果，因为 GIF 格式仅支持 256 种颜色，颜色的连续变换会看出明显的断层甚至光斑，影响效果。4. 标题栏此处的标题栏不是指整个网页的标题栏，而是网页内部各板块的标题栏，是各板块内容的概括。它使得网页内容的分类更清晰、明了，大大地方便了浏览者。标题栏可以是文字加不同颜色的背景，也可以是图片，这要根据网站的内容和规模来决定，如图 1-6 所示。 Dreamweaver 网页设计电子版教科书

7、 第 1 章5图 1-6 标题栏5. 按钮在现实生活中，按钮通常是启动某些装置或机关的开关。网页中的按钮也沿用了这个概念。网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转或数据的传输等，图 1-7 是比较常见的几个网页按钮。图 1-7 按钮1.1.3 IP 地址、域名与网址1. IP 地址虽然互联网上连接了不计其数的服务器与客户机，但它们并不是杂乱无章的。每一个主机在互联网上都有唯一的地址，我们称这个地址为 IP 地址（Internet Protocol Address） 。IP 地址有 4 个小于 256 的数字组成，数字之间用点间隔。例如“61.135.150.126”就是一个I

8、P 地址。2. 域名由于 IP 地址在使用过程中难于记忆和书写，人们又发明了一种与 IP 地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我 Dreamweaver 网页设计电子版教科书 第 1 章6们只需要在浏览器地址栏中输入搜狐网站的域名 ，然后按回车键就可以访问搜狐网站了。知识库：在创建好网站后需要申请域名和虚拟空间，并将网站上传到虚拟空间（后面将讲述虚拟空间概念） ，别人才能通过互联网访问你的网站。3. 网址网址又叫 URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。它是网络上通用的一种地址格式，用于标

9、识网页文件在网络中的位置。一个完整的网址由通信协议名称、域名或 IP 地址、网页在服务器中的路径和文件名 4部分组成。例如，对于图 1-8 所示的网址 “http:/page, “”是域名， “cp”是文件在服务器中的路径， “cp1.html”是文件名。http:/ 域名 文件路径 文件名图 1-8 网址示例知识库：当我们在浏览器地址栏中输入域名，并按下回车键后，本地计算机首先通过浏览器将要浏览的网页地址发送给存放网页的服务器，服务器在收到请求后，即将网页文件及其用到的图像文件、动画文件和其他文件发送给客户机。客户机上的浏览器则通过解释执行网页文件中的命令，将网页完整地显示在浏览器中，整个过

10、程如图 1-9 所示。浏览网页的客户机 存放网页的服务器图 1-9 显示网页的过程客户机通过输入网址或其它操作向服务器提出请求服务器将网页文件及图像、动画等辅助文件发给客户机浏览器通过解释网页文件中的命令来显示网页 Dreamweaver 网页设计电子版教科书 第 1 章71.1.4 静态网页与动态网页网页根据制作技术的不同分为静态网页和动态网页。完全采用 HTML 技术制作的网页称为静态网页；使用 HTML、编程语言和数据库共同完成，需要与服务器实时交互的网页称为动态网页。下面从不同角度阐述静态网页与动态网页的区别。 要制作静态网页，用户只需要掌握常用的网页制作软件（如 Dreamweave

11、r）就可以了；而要创建动态网页，除了需要掌握常用的网页制作软件外，还必须掌握诸如 ASP、PHP 等动态网页制作技术，以及 Microsoft SQL Server 或 Oracle 等数据库管理系统。 每一个静态网页都有一个固定的 URL，且网页文件名以.htm 、.html 、.shtml 等为后缀；而动态网页没有固定的 URL，且后缀名与网页使用的制作技术对应，通常为.asp、.jsp、.php 等。 静态网页文件一经发布到服务器上，无论是否有用户访问，每个网页都是客观存在的，也就是说，静态网页是实实在在保存在服务器上的独立的文件；而动态网页并不是独立存在于服务器上的网页文件，只有当用户

12、请求时服务器才返回一个完整的网页（需要从数据库中调用数据） 。 静态网页的内容相对稳定，因此容易被搜索引擎检索到；动态网页则反之，所以现在人们一般都将动态网页内容转化为静态网页发布。 静态网页在网站制作和维护方面工作量较大；而动态网页由于有数据库的支持，在制作和维护方面要简单容易得多。因此当网站信息量很大，需要经常更新时，通常采用动态网页制作技术。 静态网页的交互性较差，在功能方面有较大的限制；而动态网页可以实现交互功能，如各种论坛、留言板和聊天室等都属于动态网页。温馨提示：这里需要指出的是，在静态网页上出现的各种动态效果，如.GIF 格式的动画、FLASH 动画、滚动文字等，这些动态效果只是

13、视觉上的，与动态网页是不同的概念。1.2 网页设计软件和制作技术制作网站主要用到两类软件，一类是网站管理与网页制作软件，另一类是与网页设计相关的辅助软件。如果要深入学习网页制作的话，还需要掌握 HTML 语言和脚本语言等。1.2.1 网站管理与网页制作软件目前用于网站管理和网页制作的软件主要是 Dreamweaver，其功能全面、操作灵活、专业性强。另外，它还可以作为动态网站的开发环境。本书将以该软件为工作环境，并结合诸多实例带领大家共同走进网页制作的大门。在制作网页时，除 Dreamweaver 外还需要用到 Fireworks、Flash、Photoshop 等辅助软件，这些软件的主要功能

14、与特点如下。 Fireworks： Macromedia 公司推出的专门针对网页图形图像设计的工具软件。主要用于制作网页图像、网站标志、GIF 动画、图像按钮和导航条等。 Flash：Macromedia 公司推出的动画制作软件。主要用于制作矢量动画，如广告条、网站片头动画、动画短片和 MTV 等。此外，利用该软件还可以制作交互性很强的游戏、网页和课件等。 Photoshop：Adobe 公司出品的一个优秀而强大的图形图像处理软件，起初它的应用领域主要是平面设计而不是网页设计，但是它所具有的强大功能完全涵盖了网页设计的需要（除了多媒体） 。 Dreamweaver 网页设计电子版教科书 第 1

15、 章8知识库：比较常见的图像处理与动画软件还有：CorelDRAW（优秀的矢量绘图软件） 、Illustrator(功能强大的矢量绘图软件 )、FreeHand(优秀的矢量绘图软件，也可用来制作网页图像)、GIF Animator（GIF 动画制作软件） 、Cool3D（特效字动画制作软件）及SwishMax（小巧却十分强大的动画制作工具，支持导出 swf 格式）等。1.2.2 HTML 语言简介HTML 是 Hypertext Markup Language 的首字母缩写，中文称作“超文本标记语言” 。1. 为什么要学习 HTMLHTML 语言是网页制作的基础，目前 Internet 上的绝大多数网页都遵循 HTML 语言规范，或是由 HTML 语言发展而来。以前，人们是靠手写 HTML 代码来制作网页的，随着网页可视化编辑软件（如Dreamweaver）的出现，我们可以借助软件中的工具、菜单、面板等对网页进行可视化编辑。一般情况下，