[转贴]网页制作及基础知识.

jzhihui

[转贴]网页制作及基础知识.

来自：MACD论坛(bbs.macd.cn) 作者：jzhihui 浏览：8301 回复：31

什么是网页?

现在在你眼前，出现在显示器上的这个“东西”，就是一个网页。网页实际是一个文件，他存放在世界谋个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序（详见“域名系统”），网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。

■ 构成网页的元素

　　文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。

　　除此之外，网页的元素还包括动画、音乐、程序等等。如果想了解更多的话，请参考“商业建站指南”的“网站的要素”。
　

■ 揭开网页的神秘面纱

　　在网页上点击鼠标右键，选择菜单中的“查看源文件”，就可以通过记事本看到网页的实际内容：

jzhihui

可以看到，网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，于是就得到你现在所看到的画面。


知识点:
      为什么在源文件看不到任何图片？  

    网页文件中存放的只是图片的链接位置，而图片文件与网页文件是互相独立存放的，甚至可以不在同一台计算机上。

铁草

好贴就要顶！！！

jzhihui

网页的类型


通常我们看到的网页，都是以 htm 或 html 后缀结尾的文件，俗称 HTML 文件。不同的后缀，分别代表不同类型的网页文件，例如以CGI、ASP、PHP、JSP甚至其他更多。

　　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 ，再也无须象早期的网页制作人员一样，一行一行地编写代码了。

CGI

　　CGI 全称为 Common Gateway Interface （公共网关接口CGI），它是一种编程标准，它规定了Web服务器调用其它可执行程序（CGI程序）的接口协议标准。CGI 程式通过读取使用者的输入请求从而产生 HTML 网页。CGI 程序可以用任何程序设计语言编写，如Shell、Perl、C、Java等，其中最为流行的是Prel。

　　CGI程序通常用于查询、搜索、或其他的一些交互式的应用。


ASP

　　ASP 全称为 Active Server Pages（动态服务器主页），它一种应用程序环境，可以利用 VBscript 或 Java Script 语言来设计，主要用于网络数据库的查询与管理。其工作原理是当浏览者发出浏览请求的时候，服务器会自动将 ASP 的程序码，解释为标准 HTML 格式的网页内容，再送到浏览者浏览器上显示出来。我们也可以将 ASP 理解为一种特殊的 CGI。

　　利用 ASP 生成的网页，与HTML相比具有更大的灵活性。只要结构合理，一个 ASP 页面就可以取代成千上万个网页。尽管 ASP 在工作效率方面较之一些新技术要差，但胜在简单、直观、易学，是涉足网络编程的一条捷径。


PHP

　　PHP 是 Hypertext Preprocessor 的缩写，代表：超文本预处理器。其优势在于其运行效率比一般的CGI程序要高，而且，PHP是完全免费，不用花钱，你可以从PHP官方站点（http://www.php.net）自由下载。PHP 在大多数 Unix 平台，GUN/Linux 和微软 Windows 平台上均可以运行。

　　JSP

　　JSP 与 ASP 非常相似。不同之处在于 ASP 的编程语言是 VBScript 之类的脚本语言， 而 JSP 使用的是 Java 。此外， ASP 与 JSP 还有一个更为本质的区别：两种语言引擎用完全不同的方式处理页面中嵌入的程序代码。在 ASP 下， VBScript 代码被 ASP 引擎解释执行；在 JSP 下，代码被编译成 Servlet 并由 Java 虚拟机执行。

　　VRML

　　VRML（Virtual Reality Modeling Language）就是虚拟实境描述模型语言。是描述三维的物体及其连结的网页格式。用户可在三维虚拟现实场景中实时漫游，VRML2.0在漫游过程中还可能受到重力和碰撞的影响，并可和物体产生交互动作，选择不同视点等（就象玩Quake）。


　　浏览VRML的网页需要安装相应的插件，利用经典的三维动画制作软件3DMAX，可以简单而快速地制作出VRML。

jzhihui

选择一个适合自己的网页编辑工具

如今，上网冲浪已经成为一种时尚，构成了现代都市里一道独特而又亮丽的风景线。当你在网上漫游之际，会不会对那漂亮的网页羡慕不已呢？其实，你也可以制作自己的个人网页，现在网页制作软件不少。但在众多的网页制作软件中，你会选择哪一种呢？现在我们就来介绍几种各有特色的网页制作软件。希望你能从中找到一款适合你制作网页的软件。
入门级软件
　　如果你是一个网页制作初学者，那么让下面几种软件带你走进那绚丽多彩的网页制作世界吧！
　　
    ●Microsoft FrontPage 98/2000/2002/2003——制作功能强大的网页
　　
    如果你曾对Word很熟悉，那么相信你用FrontPage 进行网页设计一定会非常顺手。
　　使用Frontpage制作网页，你能真正体会到“功能强大，简单易用”的含义。页面制作由Frontpage98中的Editor完成，其工作窗口由3个标签页组成，分别是“所见即所得”的编辑页，HTML代码编辑页，预览页。Frontpage带有图形和GIF动画编辑器，支持CGI和CSS。向导和模板都能使初学者在编辑网页时感到更加方便。
　　FrontPage最强大之处是其站点管理功能。在更新服务器上的站点时，不需要创建更改文件的目录。FrontPage会为你跟踪文件并拷贝那些新版本文件。FrontPage是现有网页制作软件中唯一既能在本地计算机上工作，又能通过Internet直接对远程服务器上的文件进行工作的软件。

　　●Netscape编辑器——制作简单的网页

　　Netscape Communicator和Netscape Navigator Gold 3.0版本都带有网页编辑器。
　　如果你喜欢用Netscape浏览器上网，那么使用Netscape编辑器真是简单方便！当你用Netscape浏览器显示网页时，单击编辑按钮，Netscape就会把网页存储在硬盘中，然后就可以开始编辑了。你也可以像使用Word那样编辑文字、字体、颜色，改变主页作者、标题、背景颜色或图像，定义描点，插入链接，定义文档编码，插入图像，创建表格等，是不是与Frontpage 98还有些像。但是，Netscape编辑器对复杂的网页设计就显得功能有限了，它连表单创建、多框架创建都不支持。

　　Netscape编辑器是网页制作初学者很好的入门工具。如果你的网页主要是由文本和图片组成的，Netscape 编辑器将是一个轻松的选择。如果你对HTML语言有所了解的话，能够使用Notepad或UltraEdit等文本编辑器来编写少量的HTML语句，那么也可以弥补Netscape编辑器的一些不足。

　　●Adobe Pagemill 3.0——制作多框架、表单和Image Map图像的网页

　　Pagemill功能不算强大，但使用起来很方便，适合初学者制作较为美观、而不是非常复杂的主页。如果你的主页需要很多框架、表单和Image Map图像，那么Adobe Pagemill 3.0的确是你的首选。

　　Pagemill创建多框架页十分方便，你可以同时编辑各个框架中的内容。Pagemill在服务器端或客户端都可创建与处理Image Map图像，它也支持表单创建。Pagemill允许在HTML代码上编写和修改，支持大部分常见的HTML扩展，还提供拼写检错、搜索替换等文档处理工具。在Pagemill 3.0中还增加了站点管理能力，但仍不支持CSS、TrueDoc和动态HTML等高级特性。

　　Pagemill另一大特色是有一个剪贴板，可以将任意多的文本、图形、表格拖放到里面，需要时再打开，很方便。
　
　　●Claris Home Page 3.0——快速创建动态的网页

　　如果使用Claris Home Page软件，你可以在几分钟之内创建一个动态网页。这是因为它有一个很好的创建和编辑Frame(框架)的工具，你不必花费太多的力气就可以增加新的Frame(框架)。而且Claris Home Page 3.0集成了FileMaker数据库，增强的站点管理特性还允许你检测页面的合法连接。不过界面设计过于粗糙，对Image Map图像的处理也不完全。


提高级软件

　　如果你对网页设计已经有了一定的基础，对HTML语言又有一定的了解，那么你可以选择下面的几种软件来设计你的网页，他们一定会为你的网页添色不少。

　　●DreamWeaver 3.0/4.0/mx——自制动态HTML动画的网页

　　DreamWeaver是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML(Dynamic HTML)的设计，使得页面没有plug－in也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。

　　DreamWeaver还采用了Roundtrip HTML技术。这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。

　　●HotDog Professional 5——制作要加入多种复杂技术的网页

　　HotDog是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助设计者制作页面中的复杂部分。

　　HotDog的高级HTML支持插入marquee，并能在预览模式中以正常速度观看。这点非常难得，因为即使首创这种标签的Microsoft在FrontPage 98中也未提供这样的功能。HotDog对plug－in的支持也远远超过其他产品，它提供的对话框允许你以手动方式为不同格式的文件选择不同的选项。但对中文的处理不很方便。

　　HotDog是个功能强大的软件，对于那些希望在网页中加入CSS、Java、RealVideo等复杂技术的高级设计者，是个很好的选择。

　　●HomeSite 3.0——制作可完全控制页面进程的网页

　　Allaire的HomeSite 3.0是一个小巧而全能的HTML代码编辑器，有丰富的帮助功能，支持CGI和CSS等等，并且可以直接编辑perl程序。HomeSite工作界面繁简由人，根据习惯，可以将其设置成像Notepad那样简单的编辑窗口，也可以在复杂的界面下工作。
　　HomeSite具有良好的站点管理功能，链接确认向导可以检查一个或多个文档的链接状况。
　　HomeSite更适合那些比较复杂和精彩页面的设计。如果你希望能完全控制你制作的页面的进程，HomeSite 3.0是你最佳选择。不过对于生手过于复杂。

　　●HotMetal Pro 4.0——制作具有强大数据嵌入能力的网页

　　HotMetal既提供“所见即所得”图形制作方式，又提供代码编辑方式，是个令各层次设计者都不至于失望的软件。但是初学者需要熟知HTML，才能得心应手地使用这个软件。
　　HotMetal具有强大的数据嵌入能力，利用它的数据插入向导，可以把外部的Access、Word、Excel以及其它ODBC数据提出来，放入页面中。而且HotMetal能够把它们自动转换为HTML格式，是不是很棒，此外它还能转换很多老格式的文档(如WordStar等)，并能在转换过程中把这些文档里的图片自动转换为GIF格式。

　　HotMetal为用户提供了“太多”的工具，而且它还可以用网状图或树状图表现整个站点文档的链接状况。

[ Last edited by jzhihui on 2005-9-15 at 09:47 ]

jzhihui

掌握一种图像处理软件


Photoshop

　　Photoshop 是 Adobe 出品的最老资格，而又最功能强大的图像处理软件。很多人都会被 Photoshop 的复杂功能所吓倒，其实里面还是有不少“傻瓜”级的功能的。而且，哪怕你不是要处理网页的图片，掌握一些基本的 Photoshop 技巧，对于日常的生活、工作也是大有裨益的。


PhotoImpact

　　PhotoImpact 是台湾友立（Ulead）公司推出的一款图像处理软件精品。PhotoShop 等专业级软件不同，PhotoImpact定位于广大普通用户，提供众多“即拖即有”的现成效果和创意工具。它不仅有丰富的网页图库，同时也拥有强大的图形编辑及修片等功能。虽然在特效及照片处理方面与 PhotoShop 仍有很大的差距，但胜在操作简便，是一款“傻瓜级”的图像处理软件。

jzhihui

建议学习方式



■ 建议的学习方式
　　前面一口气介绍了网页的类型、网页的技术、制作网页的工具及常用的图像处理工具，是不是前面所讲的所有东西都是必须掌握的呢？答案当然是“不是”的。网页制作的学习是一个循序渐进的过程，以下，是本站推荐给大部份初学者的学习方式：
　　入门阶段：此时的你，什么都不懂

   先从最简单的 HTML 网页入手；

   选择 Dreamweaver 作为你的网页制作工具；

   选择 Photoshop 作为你的网页制作工具；

   粗略地阅读本站的 Dreamweaver 及 Photoshop 教程，了解这两个软件到底能做些什么；

  制作你的第一个实验性的网站，遇到任何困难，请对照本站的相关教程，如果问题仍然没有解决，请将问题贴于本站论坛，让更多高手为你

  解答:

　　初级阶段：此时的你，已经掌握了 Dreamweaver 和 Photoshop 的基本操作：

    策划和制作你的第一个网站；

    不断为你的网站增加内容与功能（例如尝试将一些 Java Script 小程序添加到你的网页中）；

    粗略阅读本站 HTML 及 CSS 的语法书，并尝试运用到你做的网页中。

　　进阶阶段：此时的你，已经具有一定的网页制作经验，并逐步形成了自己一套的对于网页制作的理解，制作一般的网页已经不在话下：

    根据个人喜好及实际需要，网页制作的方向，你可以向美术设计的方向发展，学习一些美术方面的知识；也可以向网络编程的方向发展，学习ASP等编程语言；也可以向信息制作的方向发展，锻炼自己在网站策划及信息采辑的技能；

    常识制作其他不同类型的网站，从模仿别人开始，都逐渐形成自己的设计风格；

    熟练操作 Dreamweaver 及 Photoshop 两个软件，并至少能读懂 HTML 及 JavaScript。

　　高手阶段：此时的你，至少在美术设计、程序编写、或信息制作方面有一定的造诣：

   学习
   学习
   再学习

jzhihui

1.制作你的第一份网页


我们先来做一份简单的网页：(FrontPage 2000,2003)
   首先打开File菜单下的new（或者点击工具条第一个图标）建立一个空白页面。

   在这个页面中你可以象使用WORD那样键入文字，例如先设置网页的标题，用鼠标拖拽选中键入的标题，然后点击工具条中中的大A放大字号直至满意的大小，你还可以点击图标将其设置为加重显示的字体。点击行对齐图标中间的图标将文字设置为居中显示。回车（注意回车时的设置和WORD有所不同，Shift+Enter为行回车，而直接按Enter则是段落回车，段落回车后的两行之间会插入一个空白行）。在HTML代码中两者的区别在于行回车的代码为<BR></BR>，而段落回车的代码为<P></P>。）

   由于在网页中常常需要加入各种图片来增加网页的观赏性，为了控制图片在网页中的位置，你需要将文字和图片都放置在表格单元中来控制网页的布局。打开Table菜单下的Insert Table，在弹出的对话框的size中设置表格的行数和列数，在 layout中设置表格的对齐方式（alignment）、表格边框尺寸（Border Size）、表格单元中文字或图象同单元边框的空白（Cell Padding）、以及表格单元之间的距离（Cell Spacing）。如果你将这3个选项都设置为0，则在网页中不显示表格的边框，表格单元都紧贴在一起。如果你选中设定宽度（Specify Width）的复选框，则可以在右边的方框中设定表格的宽度，并选择以象素（in Pixels）或百分比（in Percent）为单位。

   你可以在表格中加入文字、图象甚至动画等各种内容。表格可以作为你的网页布局的基本框架。你还可以在表格中套用表格，以实现更复杂的布局。表格的单元还可以拆分或合并，如果拆分或合并后的结果仍然不能达到你的布局要求，则你需要在表格中套用变革。例：在该大表格的右下角的单元中又插入了一个2X2的表格，加入的表格中的行宽和大表格左下角的单元的行宽不同。如果你不插入新的表格就实现不了这种区别，在键入中文字符的时候注意一点：将字体设置为宋体，因为目前浏览器只支持宋体中文字符的显示，如果你用其他的字体，则有可能出乱码。

[ Last edited by jzhihui on 2005-9-15 at 09:54 ]

jzhihui

2.插入图片


将光标置于需要插入图片的位置，打开Insert菜单下的image选项（或者点击工具条中的插入图片的图标，则弹出一个对话框：你可以直接键入图片所在位置的URL 或者点击图标在弹出的文件夹对话框中选择所要加入的图片文件名。你还可以点击Clip Art按钮，从windows自带的图片库中寻找合适的图片，或者点击Scan，然后从扫描仪中扫描所需的图片。

   图片的对齐方式可以通过工具条行对齐图标来设置。如果你希望文字包围在图片周围，如本文左边的图片那样，则需要点击鼠标右键，在弹出的菜单中选择Image Property选项，则会弹出图象属性对话框：点击Appearance标签，从中选择layout项下alignment的下拉选单，在弹出的菜单中选择相应的位置，例如左边的这幅图片选择的是right，如果有时候出现图片是在右首但文字无法在左首包围图片的情况，你还可以通过在HTML源代码中在<img>标签中加入valign="top" ，则文字就会和图片的顶端对齐。

   valign=“center”则会使文字同图片的中部对齐，valign ="bottom"则会使文字同图片的底端对齐。在图象属性的Appearance对话框中你还可以设置图片同周围文字的水平和垂直垂直距离(horizontal spacing和vertical spacing)，是否给图片加边框以及边框的厚度(specify border thickness的复选框及参数设置框）等设置。

jzhihui

3.设置链接


网页最重要的特点之一在于你可以通过网页上的各种链接进入下一级网页或者条到别的网站。

    在HTML 代码中主要通过<a href ="......"> </a>或者<a img src="......"> </a>设置链接。

    在FrontPage2000中你通过鼠标点击等简单的动作就可实现链接的设置。

    例如：如果你想设置这样一个链接，让读者点击“my first page"就可进入你的"my first page"这份网页，你只需在网页中适当的位置键入my first page，用鼠标拖拽选中这几个文字，然后点击工具条中的图标，则弹出的对话框URL框中键入所对应的链接，或者点击对话框中的图标，然后在弹出的文件夹对话框中选择相应的文件。
    通过选择文件夹对话框中的文件名设置的链接为相对路径的链接，注意将来上传你所制作的网页到你所在的服务器时必须将所链接的文件也放在相应的路径（子目录）中，否则就会出现我们常说的missing link。所以尽量将URL设置为绝对路径，即以http://开头的完整的路径名，这样虽说比较费事，但是不容易出现missing link这样的问题。

    给图片设置链接时，首先用鼠标选中图片，然后点击图标，之后的方法和文字链接的设置方法相同。

jzhihui

4.设置图像映射


设置图象映射的过程用HTML代码编写的方式是一件很令人头疼的事情，因为你必须计算每个坐标的位置。但在FrontPage2000 Editor中就象捻死一只苍蝇那样容易（其实捻死苍蝇可不是简单的事情，你首先得设法抓住一只苍蝇，然后忍着恶心捻死它）

    废话少说，转入正题。首先，在网页中插入适当的图象，例：然后点击该图片，你会发现在FrontPage2000界面的底部出现了图象编辑工具条：假设你要在鳄鱼的鼻子上做一个链接，将其链接到mynose.htm文件（当然这个文件得先制作好）。你可以先用鼠标选择工具条中的形状工具，例如我们选择方框图标，然后在鳄鱼的鼻子周围拖出一个方框来，则会弹出设置链接的对话框，之后的工作就和文字链接的设置方法一模一样了。你还可以用圆圈或不规则图形的图标在图象上设置圆圈或不规则图形的图象映射。

jzhihui

5.设置页面的背景属性


在今天的课程中你将学习如何设定页面、文字、表格及表格单元的背景色、背景图象甚至背景声音等等，设定网页的边距、留白、单元格内文字和图象的显示位置、字体、字号，如何增加、拆分和合并单元格（其实它的设置方法和Word十分相似）等等，学习完本篇之后你已经可以设计出专业水准的网页。

    我们首先学习如何设定页面、文字、表格及变革单元的背景色或背景图象。

    打开FrontPage2000的界面，建立一个空白新文件。在页面中插入一个2X2的表格，在表格中随意键入一些文字（以便使下一步中弹出的菜单中也显示表格属性（table property）表格单元属性（cell property）及文字属性（font property）编辑子菜单。在页面中点击鼠标右键，然后在弹出的菜单（如左图所示）中选择page Property...（页面属性），则弹出页面属性编辑对话框：在该对话框中有5个标签：General( 基本属性)、Background(背景属性)、Margin (边距）、custom（定制）、Language（语言）。

   点击Background标签，则显示右图所示的背景属性对话框。如果你想将一幅图象设置为背景图案，则点击选中Background Image复选框，则该项下面的长条方框变为白色，表示你可以在其中键入背景图象所在的路径和文件名。你也可以点击长条框右边的Browse按钮，在弹出的对话框中选择文件路径和文件名。设定之后点击确定按钮你旧会发现页面的背景已经变成了你所喜欢的图象。如果你利用Photoshop或其他图象编辑软件将图片做一些特殊处理之后再用页面背景，则更能增加网页的艺术效果。如果你不想用图片作为背景（因为图片体积一般都比较大，容易造成下载时间过长的问题），你也可以选择某种颜色作为网页背景。首先点击Background右边的下拉选单，在弹出的颜色选单中选择适合的颜色。
   你还可以点击颜色选单中的Custom项，在弹出的调色板中配置自己中意的颜色。你还可以在背景属性对话框中设置文字的颜色，方法是点击Text项右边的颜色下拉选单，然后从中选择喜欢的颜色。另外，在该对话框中你还可以设置链接的颜色。链接颜色的缺省设置是蓝色，你也可以选择其他的颜色作为链接（Hyperlink）的颜色。Vsisted Hyperlink指的是你点击过的链接所显示的颜色，以便使你能很容易地分辨出那些链接的项目你已经能够访问过了。Active Hyperlink是指当你点击某个链接的同时该链接所显示的颜色。

铁草

经查验：这是好贴，所以要顶！！！

jzhihui

6.在网页中加入背景音乐


除了设置背景图象或背景颜色，你还可以设置一种背景音乐或声音。但这个设置是在页面属性对话框的General标签下。所以，点击general标签，则显示以下对话框：

    在该对话框的中下部你可以看到有一项是Background Sound，在该项目下面的location框中你可以键入你所要加入的声音文件所在的路径和文件名。你也可以点击右边的Browse键在弹出的对话框中选择文件所在的路径和文件名。在loop选单中你可以设定背景声音文件循环播放的次数，如果你选中loop右边的Forever选框，则你所设定的背景声音将一直循环播放，直到你转到别的网页或网站浏览时为止。

jzhihui

制作入门

jzhihui

一日学会做主页


(本文适合所有还不会做主页的人阅读）

　　很多人问我：怎么学做主页啊？我说做主页一天就可以了。其实学做主页一点都不难，关键是去做，去做就会了。

　　要学主页，分三步走就行了，请看下图第二行（可直接点击每个阶段的文字）：

jzhihui

首先找一个网页编辑器，例如DreamWaver或者Frontpage，然后就可以制作主页了，制作主页无非是添加文字、添加图片、添加链接，跟用word没什么区别（详细可以看这里），倒腾一番后，其实你已经开始会制作主页了！第三步，就是用一个FTP软件，把你的主页传上去（请看如何上传主页）就完了！原来就那么容易！

jzhihui

假如你要提高基本功的话，可以学习HTML基础知识，假如想网页漂亮点的话，可以学习图片制作，这样你就会一步一步提高了。
　　当然你看到上面的主页只是非常简单， 但是这是你的第一步，也是良好的开端，然后再一步步学习：如何把网页制作漂亮一些？如何制作动画？对于新手，千万不要一下子就想：我看到某某某网页这么漂亮，它是怎样做出来的？我很想马上做出来，于是马上就去研究复杂的网页，这样你会发现网页制作很难（尤其是对于女性），学两下就放弃了，这样永远学不会制作主页。想当初，我对于我的网页能产生链接也高兴了半天，于是产生了更大的兴趣。记住：一步一步来，不要一下子想成为高手，否则很难成为高手。

jzhihui

五彩缤纷建网页（1）


色彩是人视觉最敏感的东西。不同色彩之间的对比会有不同的效果，当两种颜色同时在一起时，这两种色各自走向自已的极端，例如红色与绿色对比，红的更红，绿的更绿，黑色与白色对比，黑的更黑，白的更白。由于人的视觉的不同，对比的效果通常会有不同。当大家长时间的看一种纯色，例如红色，然后再看看周围的人，你会发现周围的人脸色会成绿色，正是因为红色与周围的对比，形成了对我们视觉的刺激 ! 色彩的对比会受很多因素影响，例如色彩的面积、时间、亮度等等。

　　色彩的对比有很多方面，色相的对比是其中的一种。比如湖蓝与深蓝对比时，你会发觉深蓝带点紫味，而湖蓝则有点绿味，各种纯色的对比会产生鲜明的色彩效果，很容易给人带来视觉与心理的满足。

　　色彩间的对比也有纯度对比，如黄色是夺目的色，但是加入灰色会失

去其夺目的光彩。通常可以用混入黑、白、灰色来对比纯色，这样可以减低其纯度。纯度的对比会使色彩的效果更明确肯定。

　　主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。

　　那么如何搭配颜色才能让自己的主页更加绚丽多彩呢？我们常常遇到的问题其实主要是背景颜色和字体颜色的搭配问题：达到既不显得呆板，又不至于过于亮丽而造成过强刺激的视觉效果。

jzhihui

五彩缤纷建网页（2）色彩的基本知识


1.颜色是因为光的折射而产生的。

　　2.红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如：红色是color (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的“bgColor=#FFFFFF”就是指背景色为白色。

　　3.颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。

　　4.任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。

　　网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。

　　我们通常的做法是：要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为“明度变化”。有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。