|
大自然是彩色的。信息时代的快速到来，网络也开始变的多姿多彩。人们不再局限于简单的文字与图片，他们要求网页看上去漂亮，舒适。所以当代设计者不仅要掌握基本的网站制作技术，还需要掌握网站的风格，配色等设计艺术。其中色彩在网站设计中占据相当重要的地位。
一、 色彩的一些基本概念
首先了解一下色彩的一些基本概念。自然界中有好多好多种色彩，比如玫瑰是红色的，大海是蓝色的，桔子是橙色的……但是最基本的有三种（红，黄，蓝），其它的色彩都可以由这三种色彩调和而成。我们称这三种色彩为“三原色”。
现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列。其它的色彩都属于彩色。任何一种彩色具备三个特征：色相，明度和纯度。其中非彩色只有明度属性。
色相，指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。比如说紫色，绿色，黄色等等都代表了不同的色相。同一色相的色彩，调整一下亮度，或者纯度很容易搭配，比如，深绿，暗绿，草绿，亮绿。
明度，也叫亮度，指的是色彩的明暗程度，明度越大，色彩越亮。比如一些购物，儿童类网站。用的是一些鲜亮的颜色，让人感觉绚丽多姿，生气勃勃。明度越低，颜色越暗。主要用于一些游戏类网站，充满神秘感；一些个人站长为了体现自身的个性，也可以运用一些暗色调来表达个人的一些孤僻，或者忧郁等性格。有明度差的色彩更容易调和。如紫色（#993399）跟黄色（#ffff00），暗红（#cc3300）跟草绿（#99cc00），暗蓝（#0066cc）跟橙色（#ff9933）等。图1中的（1）就是明度由高到低变化的例子。
图1 （1）明度变化（2）纯度变化
纯度，指色彩的鲜艳程度，纯度高的色彩纯，鲜亮。纯度底的色彩暗淡，含灰色。如图1中的（2）是纯度从低到高的变化。
相近色：色环中相邻的三种颜色。如图2中的黄绿色，黄色和桔黄色。相近色的搭配给人的视觉效果很舒适，很自然。所以相近色在网站设计中极为常用。 |
当你使用框架时，它会给你、访问者以及搜索引擎等带来一系列的问题，而最后可能影响你站点的访问情况和它在搜索引擎中的排名。下面是这些问题中的一部分。
1、使用框架的站点需要更仔细的规划和设计，尤其是其中的链接，稍不注意就会造成窗口的错误，如一些站内的链接另外跳出了新窗口，或本该另开窗口的（如链接到其他站点的页面）没有跳出；
2、不管你相不相信，现在确实还有很多冲浪者在使用那些不支持框架的、很古老的浏览器，这样一来，你有时得考虑建一个无框架版。
3、会浪费你宝贵的屏幕显示面积，你用到的框架和滚动条越多，可以使用的有效面积就越少。
4、框架还会让一些网上新手不知如何下手，特别是当你用得太多如三层甚至更多的时候，会使人们不知该从那儿浏览起。
5、框架会给搜索引擎造成一个严重的技术问题。到目前为止，只有AltaVista和Infoseek两个主要搜索引擎能够处理带框架的页面。而对于其它搜索引擎，当它们在检索这些带框架的页面时，它们看到的只是一个“死”页面（框架结构的页面）。
当然你可以通过另外提供信息来克服这个困难，也就是：在你的只有框架结构的页面里加入<Noframes>...</Noframes>部分，而且其中要有相关的链接，指向一个可以连到你站点所有其它部分的页面。
这时这个框架结构页面应该大致像这样：
---------------------------------
< html>
< head>
< meta name="description" content=" 这 儿 是 你 的 站 点 的 描 述
（ Description ） ">
< meta name="keywords" content=" 这 儿 是 关 键 词（ KeyWords ） ">
< meta name="Author" content=" 作 者 名 ">
< meta name="Classification" content=" 你 的 站 点 的 分 类 ">
< meta name="ROBOTS" content="ALL">
< meta name="GENERATOR" content="Microsoft FrontPage 3.0">
< title>你 的 页 面 标 题< /title>< /head>
< frameset framespacing="0" border="false" frameborder="0"cols="140,*">
< frame name="contents" target="main" src="http:///htmldata/2005-02-24/home.htm" scrolling="auto">
< frame name="main" src="http:///htmldata/2005-02-24/main.html" scrolling="auto" noresize>
< noframes>
< body>
<p>本页使用了框架结构，但是您的浏览器不支持它。不过您仍可以通过以下链
接访问站点，请点击！</p>
<p><ahref="contents.html">进入</a></p>
</body>
</noframes></frameset>
</html>
---------------------------------
当我们使用FrontPage等编辑工具时，其缺省的<Noframes>部分只是一句：
“Thispageusesframes,butyourbrowserdoesn'tsupportthem."这样不支持框架的搜索引擎
（以及那些浏览者）根本没办法连入你的站点。但是如果你能像上面例子中那样在<Noframes>部分加入一个链接（上例中的contents.html），就能让搜索引擎知道该怎么
找了。
顺便提一句，这时在<head>部分中的<meta>标签对于站点在搜索引擎中的位置将变得非常重要。
6、一旦你使用了框架，你就得对其中每一个页面都要仔细加以控制，因为你要考虑到那些不小心从“后门”进来的访问者——这里是指那些从你的一个不带框架的页面进入者，如果这些页面中没有合适的导览的话，他们就根本看不到站点中的其它部分。
如何避免这种情况呢？可以通过在页面中加入下面这段Javascript脚本（注意：对于框架结构页面不要加入），可以保证绝大部分的浏览者克服这个问题，除非浏览器不支持Javascript或关闭了其中的脚本调试选项。
最近小弟看到这样的一个好东东，就是可以为我们的主页设置出一些可以放大或缩小的文字来，好东东不想独占还是拿出来吧！
代码如下：
|
<SCRIPT language=JavaScript>
<!-- Begin
var speed = 20;
var cycledelay = 1000;
var maxsize = 48;
var x = 0;
var y = 0;
var themessage, size;
var esize = "";
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
var themessage2 = new initArray(
"免费软件 随意传播",
"中国电脑教育报和资源站点",
"网站：xiaoguang99122.myetang.com",
"请多多留意最新版"
);
if(navigator.appName == "Netscape")
document.write('<layer id="wds"></layer><br>');
if (navigator.appVersion.indexOf("MSIE") != -1)
document.write('<span id="wds"></span><br>');
function upwords(){
themessage = themessage2[y];
if (x < maxsize) {
x++;
setTimeout("upwords()",speed);
}
else setTimeout("downwords()",cycledelay);
if(navigator.appName == "Netscape") {
size = "<font point-size='"+x+"pt'>";
document.wds.document.write(size+"<center>"+themessage+"</center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = "<center>"+themessage+"</center>";
wds.style.fontSize=x+'px'
}
}
function downwords(){
if (x > 1) {
x--;
setTimeout("downwords()",speed);
}
else {
setTimeout("upwords()",cycledelay);
y++;
if (y > themessage2.length - 1) y = 0;
}
if(navigator.appName == "Netscape") {
size = "<font point-size='"+x+"pt'>";
document.wds.document.write(size+"<center>"+themessage+"</center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = "<center>"+themessage+"</center>";
wds.style.fontSize=x+'px'
}
}
setTimeout("upwords()",speed);
// End -->
</script> |
我们在制作网页时，由于一些网页编辑软件有时会改变我们已设置好的网页元素，因此经常要用记事本对网页文件进行编辑、修改。如何才能快速调用记事本对网页文件进行编辑和修改呢?只要对注册表略作改动即可实现此功能。
点击“开始”→“运行”，在对话框中输入“regedit”，打开注册表编辑器，展开HKEY_CLASSES_ROOThtmlfileshell分支。在该分支下新建一个名为“QuickEdit”的子分支并将“QuickEdit”子分支下“默认”主键的键值修改为“使用记事本编辑”。再在“QuickEdit”分支下新建一个名为“command”的子分支并将“command”子分支下“默认”主键的键值修改为“notepad.exe %1”
网络安全已经成为互联网最热门的话题之一，与现实相对应的，网络安全的部属、实现也就成为一个企业特别关心的问题。所以，现在我们可以很容易的看到各个企业在设计自己网络、构建企业网站的时候，对于网络安全的投入还是比较大方的，特别是一些敏感信息比较多的网站，比如银行、证券等企业，对于网络安全更是不遗余力，市场上各种宣传、广告，也都大力推广各种安全产品，比如防火墙、入侵检测、企业防病毒等一系列的产品。但是，是不是使用了这些产品，网络特别是网站就真的安全了？不一定，即使这些安全设备最高档、设置也很合理，网站还是有被攻击甚至完全被控制的可能。我们知道，现在的网站特别是稍微大一点的网站，一般都采用ASP、PHP或者JSP等脚本语言来连接数据库，取得数据库里面的数据生成动态网页，这样，当一个网站完全建立的以后，程序就会很多，特别是网页设计的特殊性，服务器与用户的交互程序特别多，所以，如果程序员不是很有经验或者没有强烈的安全意识，程序的漏洞就会很多，给网站带来不可估量的安全隐患。这些程序漏洞，一定程度上，可能比网站服务器的漏洞更加严重，因为这些漏洞防火墙或者入侵检测系统根本无法防止。
一、编程漏洞的形成
编程漏洞怎么形成的呢？我们需要对网页编程有比较全面的认识才可以理解。首先，我们来看看网页编程的特点。
1、网页编程交互性强
之所以采用各种语言来设计网站而不直接采用HTML，目的就是为了更好的管理网站资源，增加网站与浏览者之间的交互。所以，在网站设计的时候，一些常见的交互编程是少不了的，比如留言版、BBS论坛，聊天室等，这些程序最大的共同点就是用户输入很多资料，通过这些资料与其他浏览者交流或者与网站管理者交流。而交互的特点，正式漏洞形成的一大原因，因为用户输入信息是不可预测的，如果程序没有考虑到或者考虑不全面一些安全问题，用户输入就有可能成为攻击事件，不管有意还是无意。
2、网页编程字符处理特别多
上面我们谈到，交互其实就是信息的流通。所以，这些信息的处理就是大问题，怎样严格控制用户输入信息的内容、信息格式、信息长度都是编程需要考虑的问题。
3、网页编程涉及安全最里层
我们知道，网页编程直接和服务器打交道，这些程序都是直接和网站目录、网站数据库设置网站设置、系统设置相关，通过这些程序，可以访问网站目录、设置等几乎所有服务器内容。仔细想，这些程序其实都是很有潜在安全问题的，因为它们太敏感了。所以，如果程序设计有漏洞，几乎就等于网站有漏洞，甚至完全开放。
4、网页编程整体人员基础较差
网页编程人员的技术素质，这个问题其实我们可能比较少关注。在部分传统程序员眼中，网页程序设计其实不能称为程序员，他们认为网页程序设计，只需要美工好就可以了，完全没有技巧可言，不叫真正的编程。之所以形成这种观点，有几个原因。一是网页编程相对比较简单，变化较少，基本上，网页编程可以很简单的概括出几个类型：留言版、论坛、聊天室、邮件列表、新闻发布、软件下载等，而这些类型的编程，大部分都有模式可循，和传统编程相比，的确比较简单，任意掌握；二是网页编程人员大部分半路出家，专业的程序员相对较少，编程的系统训练较少，可能编程的基础也比较弱，所以，编程方面可以还是有一些缺陷的；三是部分网站直接下载网上免费程序来建立网站，这些程序的健壮性、安全性都没有严格考虑，如果网站采用者不自己修改这些程序而直接照搬得话，很可能存在严重安全问题。
二、编程漏洞的类型
网页编程相对比较简单，漏洞的形成实例虽然很多，但是，都有一些内在地共同点可以寻找，以此归纳出一些共同的特点，供我们参考。
1、用户输入验证不全面
在网站编程而言，有一个规则可能我们需要牢记，那就是对于用户和用户的输入，都必须抱怀疑态度，不能完全信任。所以，对于用户的输入，不能简单的直接采用，而必须经过严格验证，确定用户的输入是否符合输入规则才可以现实、录入数据库。总结用户输入验证，应该包括以下几个方面。
（1）输入信息长度验证
这一点可能我们比较少注意，因为我们往往认为一般用户不会故意将输入过分拉长，稍微有一些用户可能捣乱，但是，在这一点上可能没有危害。其实，只要我们仔细考虑，如果不进行输入验证，可能的危害会相当大，为什么？如果用户输入的信息达到几个兆，而我们的程序又没有验证长度的话，想想的危害就有：a、程序验证出错；b、变量占用大量内存，出现内存溢出，至使服务器服务停止甚至关机。这样的危害多大？
（2）输入信息敏感字符检查
这一点平时在设计程序的时候我们可能都有注意，主要关注的是一些JavaScript的敏感字符，比如在设计留言版的时候，我们会将“<”等符号的信息去除，以免用户留下页面炸弹。但是，是否这些就已经足够了呢？还远远不够。我们还有很多没有注意到，以下几个方面我们需要特别注意。
a、留言版内容信息的过滤
这一点上面已经提到，平时也使用较多。
b、用户名信息的过滤
这一点其实我们常常验证，但是，用户名的验证我们往往只是验证长度，没有验证JavaScript或者HTML的标记，这样就容易形成漏洞。比如用户在用户名填入“<h1>黑</h1>”，一般的用户名验证都可以通过，但是，显示在网页中却是很不美观的。这个输入没有破坏，但是，如果用户名验证不严，没有长度限制，后果怎样呢？
相关文章
ps怎么制作倒影 ps设计倒影的方法
ps软件是一款非常不错的图片处理软件，有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影，一起来看看设计倒影的方法。 用ps怎么做倒影最终效果̳...2017-07-06
Photoshop设计商务名片的5种常见思路分享
今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路，各位想知道的使用者，那么下面就快来跟着小编一起看一看吧。
给各位Photosho...2016-09-14
php根据用户语言跳转相应网页
当来访者浏览器语言是中文就进入中文版面，国外的用户默认浏览器不是中文的就跳转英文页面。
<?php $lan = substr( $HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
腾讯视频怎么放到自己的网页上?
腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题，要把腾讯视频放到自己的网页有许多的办法，当然一般情况就是直接使用它们的网页代码了，如果你要下载资源再放到...2016-09-20
WPF实现类似360安全卫士界面的程序源码分享
最近在网上看到了新版的360安全卫士，感觉界面还不错，于是用WPF制作了一个，时间有限，一些具体的控件没有制作，用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
Photoshop做色彩缤纷的插画卡通字效果教程
今天小编在这里就来给Photoshop的这一款软件的使用者们来说下色彩缤纷的插画卡通字效果的制作教程，各位想知道具体制作步骤的使用者们，那么下面就快来跟着小编一起看一...2016-09-14
photoshop设计重影效果具体制作教程
今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计重影效果具体的制作教程，各位想知道具体制作方法的软件使用者们，那么大家就来看下小编带来的教...2016-09-14
PS怎么设计T恤 PS制作T恤教程
PS怎么设计T恤？很多人都想要在T恤上有自己喜欢的图案，那么自己设计T恤的图案是方法之一，本次为大家带来了详细的ps设计T恤教程，有兴趣的同学快来看看吧。 1、打开PS，新...2016-12-31
PS/AE渐变工具色带波纹色彩过渡不均匀怎么办？
PS或者AE中我们在使用渐变工具时，会发现渐变的过渡不均匀，出现明显的波纹，也就是色带（色阶），怎么能很好地优化这个问题呢？（之所以说优化，因为此问题不可能完全解决，只能说能让色...2017-01-22
C#实现Winform中打开网页页面的方法
这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
photoshop设计蜘蛛侠纹理文字效果制作教程
今天小编在这里就来给给各位photoshop的这一款软件的使用者们来说一说设计蜘蛛侠纹理文字效果的制作教程，各位想知道具体制作步骤的使用者们，那么大家下面就来跟着小编...2016-09-14
Photoshop设计武侠风毛笔字效果教程
今天小编在这里就来给Photoshop的这一款软件的使用者们说下设计武侠风毛笔字效果得教程，各位想知道到底该怎么射击制作的使用者们，那么下面就快来跟着小编一起看一看制...2016-09-14
