BlogJava-大道至简-文章分类-HTMLhttp://www.blogjava.net/hellotony/category/11000.html道生一，一生二，二生三，三生万物。万物负阴而抱阳，冲气以为和。zh-cnFri, 02 Mar 2007 06:36:20 GMTFri, 02 Mar 2007 06:36:20 GMT60国内外网站设计资源http://www.blogjava.net/hellotony/articles/91143.htmlTonyTonySun, 31 Dec 2006 05:52:00 GMThttp://www.blogjava.net/hellotony/articles/91143.htmlhttp://www.blogjava.net/hellotony/comments/91143.htmlhttp://www.blogjava.net/hellotony/articles/91143.html#Feedback0http://www.blogjava.net/hellotony/comments/commentRss/91143.htmlhttp://www.blogjava.net/hellotony/services/trackbacks/91143.htmlCSS库

做设计的时候总是容易没有灵感。到CSS库去看看别人做得设计也许会帮你找到不少灵感。如果你的设计足够优秀让这些CSS库收录的话，那么这还会为你带来很多访问者。

  • cssBeauty
  • Css help pile   Links and Discussion About the Best CSS Resources Available on the Web.
  • www.meyerweb.com 埃里克 迈尔的站点
  • www.tanfa.co.uk 克莱尔 坎伯的站点
  • www.designdetector.com 克里斯 Hester 的设计探测器
  • www.cssbeauty.com CSS 设计陈列室
  • cssvault 保罗Scrivens - CSS 地下室
  • www.csscreator.com 最佳的CSS 论坛
  • www.mezzoblue.com 戴维 Shea的最优秀的站点
  • www.positioniseverything.net 大约翰和Holly Bergevin的站点
  • www.oswd.org 贾森?D. Collins的公开源码网页设计
  • Stylegala
  • CSS Drive
  • css thesis
  • Styleboost
  • CSS intensivstation
  • CSSElite
  • CSS Import
  • CSS Mania
  • DesignShack
  • CssPlay   一位60多岁的CSS专家的个人网站.页面风格清新,当然更关键的是他的代码写得好.甚称高手的.想起国内的电脑行业大多是些年青人在做,而且不断听到传言说这行当也就是吃青春饭的,黯然一下...通过这个网站,我觉得还是给了小辈们信心的...我想,这行应该是可以做一辈子的事业.
  • Unmatchedstyle

    Web标准

    遵守Web标准来编写代码会使你的代码干净而且有对搜索引擎有良好的亲和度。一个可以用100行代码就搞定的代码，为什么一定要把他搞成1001行呢？

  • Developing With Web Standards - 这篇文档介绍了如何在Web标准下省时省力的构建你的站点，同时还能带来良好的用户体验。另外还介绍了一些技巧教会你如何提升网站的质量以及流量。
  • Roadmap to Standards
  • Web Standards Project
  • Web Standards Checklist
  • Importance of Web Standards 

    验证器

    在你明白什么是Web标准以后，下面两个小工具可以帮你测试你的站点是否符合标准。

  • HTML & XHTML Validator
  • CSS Validator 

    易用性

    易用性也许是网站设计中最关键的因素之一。良好的设计不但会带来良好的用户体验，而且会提升你的站点的网站转换律

  • What is usability
  • Usability First - 叙述网站易用性的重要程度
  • Weblog Usability: The Top Ten Design Mistakes - Blog往往不是很注重网站的易用性，这使得Blogger很难获得新的读者以及忠实的读者
  • Web Design & Usability Guidelines -这本在线的教程一共分成了18章，它将教你如何设计优秀易用的网站
  • Web usability - the basics
  • The Culture of Usability - 如何使用最小的花销却从易用性中得到更多-测试程序.
  • 90% of All Usability Testing is Useless
  • Ten deadly sins of web design -网站设计中10个易犯的大错
  • Information architecture resources
  • Usability Views 

    博客/资源

    Blog上有大量即时更新的关于设计以及易用性的资讯。下面这个列表中的blog推荐订阅哦。

  • Stopdesign
  • Signal vs. Noise Blog - 37signals的blog，关注网站设计以及易用性
  • Digital Web Magazine - Digital Web Magazine 是一个面向专业网站设计人员，开发人员以及信息构架师的在线杂志。
  • A List Apart - A List Apart 基于Web标准的基础上以特殊的视角关注以下几个方面的最佳实践：设计，开发，网站内容。
  • 456 Berea Street - Roger Johansson 的站点，他经常写一些关于web 标准，可访问性以及易用性的文章
  • mezzoblue
  • Adaptive Path
  • Jesse James Garrett - Adaptive Path创始人的blog.
  • Jeffrey Veen
  • Your Total Site - YourTotalSite中包含了很多内容，比如易用性, 可访问性, 视觉设计,在线市场, (X)HTML & CSS, Javascrīpt, 内容构架等等
  • IxDG Resource Library - 有很多交互设计方面的东东
  • Apples to oranges - Ryan Nichols的blog.
  • Demystifying Usability - Frank Spillers的blog,他是一个网站易用性方面的顾问 

    配色

    配色在设计中显得非常的关键。良好的配色不但能够将你的网站和竞争对手的站点开来，而且还能向你的访问者传递一些特殊的信息。如果你提供的是个人服务的话，你可以选择柔和一点的颜色，如果是为某个组织的网站的话，就应该选择厚实一些的颜色。下面的这些资源可以帮助你做出一些配色上的决定。

  • Color Schemer - 在线配色(感谢Beach提醒链接错误)
  • Color Meaning - 一篇解释不同颜色的象征以及意义的文章
  • The Meaning of Color in Web Design - 在网络营销中颜色如何影响访问者
  • Symbolism of Color
  • Color Matters - 探索如何用颜色是去影响情绪, 食欲, 性欲, 性欲, 涉及, 以及艺术. 

    排版

    有很多字体可供选择，合理的使用它们会得到很好的效果。

  • 1001 Free Fonts - 收集了Windows 以及 Macintosh下的很多True-type字体
  • The Anatomy of Web Fonts
  • Typetester - Typetester 提供了一个在线的应用可以让你比较各种字体的效果，有了它网页设计者的工作轻松多了


    • Tony 2006-12-31 13:52 发表评论
    ]]>    40种网页常用小技巧http://www.blogjava.net/hellotony/articles/52181.htmlTonyTonyMon, 12 Jun 2006 04:57:00 GMThttp://www.blogjava.net/hellotony/articles/52181.htmlhttp://www.blogjava.net/hellotony/comments/52181.htmlhttp://www.blogjava.net/hellotony/articles/52181.html#Feedback0http://www.blogjava.net/hellotony/comments/commentRss/52181.htmlhttp://www.blogjava.net/hellotony/services/trackbacks/52181.html 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
    <table border oncontextmenu=return(false)><td>no</table> 可用于Table

    2. <body onselectstart="return false"> 取消选取、防止复制

    3. onpaste="return false" 不准粘贴

    4. oncopy="return false;" oncut="return false;" 防止复制

    5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

    6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

    7. <input style="ime-mode:disabled"> 关闭输入法

    8. 永远都会带着框架
    <script language="JavaScript"><!--
    if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页
    // --></script>

    9. 防止被人frame
    <SCRIPT LANGUAGE=JAVASCRIPT><!--
    if (top.location != self.location)top.location=self.location;
    // --></SCRIPT>

    10. 网页将不能被另存为
    <noscript><iframe src=*.html></iframe></noscript>

    11. <input type=button value=查看网页源代码
    onclick="window.location = "view-source:"+ "http://www.pconline.com.cn"">

    12.删除时确认
    <a href="javascript:if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"">删除</a>

    13. 取得控件的绝对位置
    //Javascript
    <script language="Javascript">
    function getIE(e){
    var t=e.offsetTop;
    var l=e.offsetLeft;
    while(e=e.offsetParent){
    t+=e.offsetTop;
    l+=e.offsetLeft;
    }
    alert("top="+t+"/nleft="+l);
    }
    </script>

    //VBScript
    <script language="VBScript"><!--
    function getIE()
    dim t,l,a,b
    set a=document.all.img1
    t=document.all.img1.offsetTop
    l=document.all.img1.offsetLeft
    while a.tagName<>"BODY"
    set a = a.offsetParent
    t=t+a.offsetTop
    l=l+a.offsetLeft
    wend
    msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"
    end function
    --></script>

    14. 光标是停在文本框文字的最后
    <script language="javascript">
    function cc()
    {
    var e = event.srcElement;
    var r =e.createTextRange();
    r.moveStart("character",e.value.length);
    r.collapse(true);
    r.select();
    }
    </script>
    <input type=text name=text1 value="123" onfocus="cc()">

    15. 判断上一页的来源
    javascript:
    document.referrer

    16. 最小化、最大化、关闭窗口
    <object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
    <param name="Command" value="Minimize"></object>
    <object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
    <param name="Command" value="Maximize"></object>
    <OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
    <PARAM NAME="Command" VALUE="Close"></OBJECT>
    <input type=button value=最小化 onclick=hh1.Click()>
    <input type=button value=最大化 onclick=hh2.Click()>
    <input type=button value=关闭 onclick=hh3.Click()>
    本例适用于IE

    17.屏蔽功能键Shift,Alt,Ctrl
    <script>
    function look(){
    if(event.shiftKey)
    alert("禁止按Shift键!"); //可以换成ALT　CTRL
    }
    document.onkeydown=look;
    </script>

    18. 网页不会被缓存
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    或者<META HTTP-EQUIV="expires" CONTENT="0">

    19.怎样让表单没有凹凸感？
    <input type=text style="border:1 solid #000000">
    或
    <input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:

    1 solid #000000"></textarea>

    20.<div><span>&<layer>的区别？
    <div>(division)用来定义大段的页面元素，会产生转行
    <span>用来定义同一行内的元素，跟<div>的唯一区别是不产生转行
    <layer>是ns的标记，ie不支持，相当于<div>

    21.让弹出窗口总是在最上面:
    <body onblur="this.focus();">

    22.不要滚动条?
    让竖条没有:
    <body style="overflow:scroll;overflow-y:hidden">
    </body>
    让横条没有:
    <body style="overflow:scroll;overflow-x:hidden">
    </body>
    两个都去掉？更简单了
    <body scroll="no">
    </body>

    23.怎样去掉图片链接点击后，图片周围的虚线？
    <a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>

    24.电子邮件处理提交表单
    <form name="form1" method="post" action="mailto:****@***.com" enctype="text/plain">
    <input type=submit>
    </form>

    25.在打开的子窗口刷新父窗口的代码里如何写？
    window.opener.location.reload()

    26.如何设定打开页面的大小
    <body onload="top.resizeTo(300,200);">
    打开页面的位置<body onload="top.moveBy(300,200);">

    27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
    <STYLE>
    body
    {background-image:url(logo.gif); background-repeat:no-repeat;
    background-position:center;background-attachment: fixed}
    </STYLE>

    28. 检查一段字符串是否全由数字组成
    <script language="Javascript"><!--
    function checkNum(str){return str.match(//D/)==null}
    alert(checkNum("1232142141"))
    alert(checkNum("123214214a1"))
    // --></script>

    29. 获得一个窗口的大小
    document.body.clientWidth; document.body.clientHeight

    30. 怎么判断是否是字符
    if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");
    else alert("全是字符");

    31.TEXTAREA自适应文字行数的多少
    <textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">
    </textarea>
    32. 日期减去天数等于第二个日期
    <script language=Javascript>
    function cc(dd,dadd)
    {
    //可以加上错误处理
    var a = new Date(dd)
    a = a.valueOf()
    a = a - dadd * 24 * 60 * 60 * 1000
    a = new Date(a)
    alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
    }
    cc("12/23/2002",2)
    </script>

    33. 选择了哪一个Radio
    <HTML><script language="vbscript">
    function checkme()
    for each ob in radio1
    if ob.checked then window.alert ob.value
    next
    end function
    </script><BODY>
    <INPUT name="radio1" type="radio" value="style" checked>Style
    <INPUT name="radio1" type="radio" value="barcode">Barcode
    <INPUT type="button" value="check" onclick="checkme()">
    </BODY></HTML>

    34.脚本永不出错
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Hide
    function killErrors() {
    return true;
    }
    window.onerror = killErrors;
    // -->
    </SCRIPT>

    35.ENTER键可以让光标移到下一个输入框
    <input onkeydown="if(event.keyCode==13)event.keyCode=9">

    36. 检测某个网站的链接速度：
    把如下代码加入<body>区域中:
    <script language=Javascript>
    tim=1
    setInterval("tim++",100)
    b=1
    var autourl=new Array()
    autourl[1]="www.njcatv.net"
    autourl[2]="javacool.3322.net"
    autourl[3]="www.sina.com.cn"
    autourl[4]="www.nuaa.edu.cn"
    autourl[5]="www.cctv.com"
    function butt(){
    document.write("<form name=autof>")
    for(var i=1;i<autourl.length;i++)
    document.write("<input type=text name=txt"+i+" size=10 value=测试中……> =》<input type=text
    name=url"+i+" size=40> =》<input type=button value=GO

    onclick=window.open(this.form.url"+i+".value)><br>")
    document.write("<input type=submit value=刷新></form>")
    }
    butt()
    function auto(url){
    document.forms[0]["url"+b].value=url
    if(tim>200)
    {document.forms[0]["txt"+b].value="链接超时"}
    else
    {document.forms[0]["txt"+b].value="时间"+tim/10+"秒"}
    b++
    }
    function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1

    onerror=auto("http://"+autourl+"")>")}
    run()</script>

    37. 各种样式的光标
    auto ：标准光标
    default ：标准箭头
    hand ：手形光标
    wait ：等待光标
    text ：I形光标
    vertical-text ：水平I形光标
    no-drop ：不可拖动光标
    not-allowed ：无效光标
    help ：?帮助光标
    all-scroll ：三角方向标
    move ：移动标
    crosshair ：十字标
    e-resize
    n-resize
    nw-resize
    w-resize
    s-resize
    se-resize
    sw-resize

    38.页面进入和退出的特效
    进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
    推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
    这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:
    　　0 矩形缩小
    　　1 矩形扩大
    　　2 圆形缩小
    　　3 圆形扩大
    　　4 下到上刷新
    　　5 上到下刷新
    　　6 左到右刷新
    　　7 右到左刷新
    　　8 竖百叶窗
    　　9 横百叶窗
    　　10 错位横百叶窗
    　　11 错位竖百叶窗
    　　12 点扩散
    　　13 左右到中间刷新
    　　14 中间到左右刷新
    　　15 中间到上下
    　　16 上下到中间
    　　17 右下到左上
    　　18 右上到左下
    　　19 左上到右下
    　　20 左下到右上
    　　21 横条
    　　22 竖条
    　　23 以上22种随机选择一种

    39.在规定时间内跳转
    <META http-equiv=V="REFRESH" content="5;URL=http://www.51js.com">

    40.网页是否被检索
    <meta name="ROBOTS" content="属性值">
    　　其中属性值有以下一些:
    　　属性值为"all": 文件将被检索，且页上链接可被查询；
    　　属性值为"none": 文件不被检索，而且不查询页上的链接；
    　　属性值为"index": 文件将被检索；
    　　属性值为"follow": 查询页上的链接；
    　　属性值为"noindex": 文件不检索，但可被查询链接；
    　　属性值为"nofollow": 文件不被检索，但可查询页上的链接。

    Tony 2006-06-12 12:57 发表评论
    ]]>    在网页中如何定义鼠标的样式http://www.blogjava.net/hellotony/articles/45537.htmlTonyTonyWed, 10 May 2006 13:22:00 GMThttp://www.blogjava.net/hellotony/articles/45537.htmlhttp://www.blogjava.net/hellotony/comments/45537.htmlhttp://www.blogjava.net/hellotony/articles/45537.html#Feedback0http://www.blogjava.net/hellotony/comments/commentRss/45537.htmlhttp://www.blogjava.net/hellotony/services/trackbacks/45537.html用cursor属性可以实现，可选值及说明如表2.1.6.2所示。
    表2.1.6.2 cursor属性的可选值
    可选值说明
    hand手型
    crosshair十字型
    text鼠标移动到水平文本上的样式
    wait等待
    default系统默认样式
    help带问号的样式
    e-resize向右的箭头
    ne-resize向右上方的箭头
    n-resize向上的箭头
    nw-resize向左上方的箭头
    w-resize向左的箭关
    sw-resize向左下的箭头
    s-resize向下的箭头
    se-resize向右下方的箭头
    auto系统自动应用的样式
    move十字箭头，移动对象时的样式
    pointer鼠标移上链接时的样式，同hand(需IE6+支持)
    all-scroll中间一小圆点，上、下、左、右四个方向是箭头的样式，表示页面可以向任意方向滚动(需IE6+支持)
    col-resize左右两个箭头，中间以两条垂线分开，表示项目/栏的大小可以在水平方向上改变(需IE6+支持)
    no-drop左边为手型，右边为斜线穿过的小圆圈， 表示可拖动项目在当前鼠标位置不能放开.
    not-allowed斜线穿过的小圆圈，表示所请求的动作不能被执行(需IE6+支持)
    progress指针旁有沙漏标志，表示后台有程序在运行，用户与此页面的交互不受影响(需IE6+支持)
    row-resize上下两个箭头，中间以两条水平线分开，表示项目/栏的大小可以在垂直方向上改变(需IE6+支持)
    url(uri)指针由作者定义，使用自定义通用资源识别码，例如url(’mycursor.cur’)。.cir,.ani类型的指针是唯一被支持的指针类型。(需IE6+支持)
    vertical-text可编辑的垂直文本样式,以一个水平翻转的I来表示(需IE6+支持)


    具体步骤：
        代码示例：
        
        <style>
        body{cursor:default}
        textarea{cursor:url(demo.cur)}
        </style>
        <span style="cursor:help">查看帮助</span>
        <textarea></textarea>

    注意：
           以cursor:url(url)方式定义的鼠标样式需要IE6+的支持
           定义的光标效果会因为系统所应用的Theme(主题)的影响而尽相同。
    提示：光标文件除了静态的.cur格式的之外，还有.ani格式动态光标文件。
    特别提示
    运行本例代码，鼠标移上查看帮助四个文字上面，光标的效果如图2.1.6.10所示。

    图1.2  自定义的光标效果

    特别说明


    cursor属性用于设置鼠标移上对象时所显示的光标形状或光标文件，对应的脚本特性为cursor，可选参数见表2.1.6.2。


    Tony 2006-05-10 21:22 发表评论
    ]]>