网页设计略谈(一)

这最近几个月公司筹备一个电子商务网站,因为纯原创性,也就颇有难度,开会讨论已是家常便饭,这前不久可算是到了设计阶段了,由于进度稍慢,这两天我赶了个首页设计图,,,貌似很久没有做设计图了,自然是没有了之前来的速度,两天内经过几番修改,算是初步成型,暂且不提好看,算是看得过去罢了,,,因为今天的主题并非展示页面,我就低调的给大家看看,若是有趣,留下点建议也是感激不尽.

首页设计图

或许这也不是我最好的,毕竟是目前最接近自身水平的…对了差些忘了,我要谈点正事,,,拿这页面来说,就说初学者设计页面需要几点注意罢:

  1. 这页面版式,自然是要整洁,除了对齐,就是要保持结构统一,即便是不统一也要用广告条类似的相间隔开来,方可看着舒服.
  2. 这色彩,色彩其实是不大好掌握的,这也是我的致命缺陷,没办法,半路出家,本是做网络的,却弄起了网页设计,跟专业好似有些关系却又并不是攻此业(不好意思又跑题了)色彩来说的话,这基本原理还是要简单看看,什么RGB啊,色相,明度什么的,还是要略知一二才好,那么,最简单的,就是整体色调统一为妙,比如我这暖色,基本全是暖色,这红色要是浅了话说可是不好看,我这找到了这样的色彩,可是费了不小功夫,难度大一点的还有什么对比色,中差色什么的,我也记不得了,总之关于配色,,,多多欣赏别人优秀设计网站,心中自然有了印象,对提升色彩感有很大帮助.
  3. 这细节,通俗我说即修饰不可少.修饰的好,起到画龙点睛作用,给人眼前一亮,比方说我这页面为了速度,统一了所有栏目的标题栏的样式,又比如最后的每日问答,加上个背景图,这也是通用的手法了,虽然俗,却很中用,当然要注意一点的是,修饰物永远是为了加强页面的美观性,千万别过于鲜显眼,喧宾夺主,否则效果就糟糕了,这细节当然除了修饰图之外,还有的就是真正的细节,别小看这一条阴影线,高光线,就这一条单色的线条,可以起到很神奇的效果,不妨试试罢.

好了,今天暂且就说这些,,,这设计图也就给大家参考参考罢了,大家也不喜勿喷,多多包涵~时间不早了,辛苦的朋友们早些休息罢~

CyanogenMod 6.1稳定版(12月7日更新版本)刷机测试

买了G2手机很久了,之前经常刷机,,,后来刷着刷着,感觉也就那么回事,,,每次没有什么重大更新也就懒得刷新固件了,几个月前啊兴出了一个新的2.2 ROM的固件,但是第一个版本刷了有很大问题,随后啊兴也发现了,把下载关闭了,又等了好多天,修复的2.2.0.5版本发布了可是问题依然很多有点失望,正好这最近几天CM也发布新版本了,索性找到蛋总本地化版本,刷了下感觉设置选项十分强大.可惜还是不支持网页flash播放.我的手机参数如下:

机型: HTC MAGIC TIM (G2 32A)
SPL : 1.33.0008 (原生)
RADIO : 3.22.20.17 (买回来未刷过)

至于刷机过程不再复述,先WIPE,不过我倒是不知道WIPE CACHE是什么概念…然后再直接刷即可.刷完后进行简单设置,最后使用了这几天一切都很正常,感觉还是比较舒服,除了那个主工具栏中间的快捷方式我总是当成删除了…一开始不知道怎么调,纠结了很长时间才弄好.刷好了顺便上几张图片供大家参考下.

顺便共享一下蛋总官方的下载地址: http://www.kugou.me/froyo/12-7-32a-cm-6.1.zip

js修改标签内内容(下)

经过彻夜和一上午的研究,现在总算是把最终效果弄出来了,我先上代码,老鸟不要笑话(这么简单的东西琢磨半天…),没办法,没有系统学习过这个玩意,很多东西都出问题.代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输入框焦点样式变化测试</title>
<!--文本框样式可以忽略,不过为了增加特效的观赏性,我简单的加上了.-->
<style>
input {border:1px solid #eee;height:20px;width:100px;line-height:20px;}
</style>
<script type="text/javascript">
window.onload = iSC; //加载iSC()函数
function iSC() {
inputs=document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++) {
inputs[i].onmouseup = function(){this.style.backgroundColor='#fffab5';}
inputs[i].onblur = function(){this.style.backgroundColor='#fff';}
}
}
</script>
</head>
<body>
<form>
  <input type="text" />
  <input type="text" />
  <input type="text" />
</form>
</body>
</html>

当然这只是一个简单的示例,效果也很简单.那段JS也不难理解,这里并没有用到之前所想的用setAttribute()来解决,而后来的多次测试,不知道是不是我代码不对还是其他原因,通过这个方法无法达到目的.总之,通过这个简单的东西我总结出了几个需要注意的问题:

  1. inputs[i].onmouseup = function(){this.style.backgroundColor=’#fffab5′;}不能通过inputs[i].setAttribute(“onmouseup“,”function(){this.style.backgroundColor=’#fffab5′;“)来实现.
  2. window.onload = iSC;千万不能忘记!否则,你会发现,他根本没有运行这个js.当然你同样可以在测试的时候,写一个按钮,测试这个js是否读取了所有的input标签,方便调试.

关于此次学习的其他方面总结包括,在查找问题的同时,我学到了其他的一些特效,特别分享给大家.

其实,在一些高级的浏览器(我基本是把除了IE6(包括相同核心),其他的都算高级了,IE7那不伦不类,IE8稍有长进~)中,input设置一个伪类,十分简单的就可以实现以上效果:

  • 看这个就知道了(除了IE6不行,我测试过IE8和chrome都是没有问题的,我想其他的比如FF,OPERA应该也没有问题吧)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>最简单的输入框变化方法</title>
    <style>
    input:focus {background-color:#FF9;}
    </style>
    </head>
    <body>
    <input type="text" />
    <input type="text" />
    <input type="text" />
    </body>
    </html>
    
  • 另外还有许多其他的效果,比如跟这个类似的,并非样式变化,而是当光标焦点处于输入框时,输入框默认value改变,比如,默认value=”请在此处输入用户名”,当焦点在此时,value=””等待用户输入,,等等效果,这里不一一列举,为了方便大家学习,我顺便将其打包,部分代码摘自互联网,版权的话,我也找不到了,反正大家学习嘛,我想这小东西不会还说我侵权吧…z当然以上我自己总结的东西,大家尽管拿去,有什么疑问也可以发邮箱与我联系交流.
  • 其他部分特效源码打包下载(skydrive网盘地址下载)(除了我这两种之外的源码在内,还有其他三种比较简单的效果)
  • 百度可参考的资料,其实后来我发现,这个不就是我那个差不多的嘛,汗我研究这么久,http://baike.baidu.com/view/1710146.htm

js修改标签内内容(上)

最近几天做页面,跟表单设计制作打交道很多,很多页面的表单格式都很简单,其中,在设计初期,有些效果未添加,而后期需要增加这些效果,于是面对大量的input标签,修改起来也出现了困难,具体情况待我细说.

比如原始的代码大部分格式是这样的:

<html>
<head>
</head>
<body>
<form>
<input type="text" />
</form>
</body>
</html>

而,后来有需求说,需要添加一个效果,当光标进入输入框时,会出现比如输入框边框颜色变化,输入框背景颜色变化的效果,当然,如果这仅仅是修改其中这一个输入框的效果,那么方法很多,其中最简单的方法可能可以这样写:

<html>
<head>
</head>
<body>
<form>
<input type="text" onBlur="this.style.backgroundColor='#ffffff'" onMouseUp="this.style.backgroundColor='#fffab5'" />
</form>
</body>
</html>

是的,大概就是这样,但是如果有很多页面,有很多input标签,难道一个个这样加,虽然我不是很会js,但是我感觉应该可以直接修改input标签内的内容,更多的是通过获取某个ID,并通过setAttribute()修改某个属性的值,然后事实并不是这样的.也不知道是不是我代码写错了,还是什么的,无论是用setAttribute(属性,值)还是setAttribute(属性,函数),效果都无法实现,当然,这里是为了测试才使用ID的,既然无法实现,则采取另外一个思路,直接通过getElementsByTagName()方法,对于这个方法,可以方便的修改所有input标签的属性,即getElementsByTagName(“input”),当然,首先是需要遍历当前页面的所有input标签,然后一个个进行修改,之前,我试了很多次,可能是由于代码规范问题,因为我还没有系统的学习js,或者可能是种种原因,弄了一晚上没弄好,最后还Anfy同学的帮助下,解决了这个问题,由于时间关系,今天暂时写这些,明天把这个简单的小例子写出来,分析,同时也是为了方便以后查阅,举一反三!

正则表达式学习总结(表单验证)

前一阵子,每天忙着做公司的电子商务网站的前台,对我来说也是一个很大的挑战,由于某些原因程序员离职,最后公司找了一个兼职程序员,这可苦了我~一向做前台只管设计图纸和HTML的我需要自己弄js了,也怪我不争气,早就说了把js掌握,可是到现在都没搞好,还是个看得懂却写不出的水平.

这次电子商务网站首先从用户注册开始写起,之前做过博客制作项目,不过当时是公司程序员做了很多js,那时我也就万事大吉了~现在看到注册页面,首先表单不熟悉的我就是悲剧,这个要动态验证用户注册时填写的是否正确可是让我忙碌了许多天,也头疼了许多天,当然在此先感谢前几天热心帮助我的大师丁同志.于是乎,今天也是闲着,细致了看了关于正则表达式的基本用法,受益匪浅,学习过程中像小熊同志(最近研究PHP)问了下,也给我带来了不少帮助,不过他说PHP的正则表达式跟这个我看的js有区别,这下我又晕了,不管,总之大同小异. 其实本来表单验证的正则表达式网上是有很多的,但是不够灵活,不具复制性,下面,我将以我自己学习的结果举几个例子.

  1. 验证手机号码(大陆): 我是这样写的: ^(\(\+86\)?)|(\+86)?(13[0-9]|15[0|3|6|7|8|9]|18[8|9])\d{8}$ 首先在input内的文本输入框有个默认的value=”(+86)”或者没有都不影响最终验证,并且,它能够验证当前国内的手机号码是否符合,当然同样国际手机号码的格式可以这样写 \+/d{2,4}/d{8,11} 这里需要说明的是,它分为两个部分,第一部分\+/d{2,4}为国家区号长度为最小长度2,最大长度4,后面同理号码最小长度6,最大长度11.
  2. 验证网站地址: 网上大多比较简陋,比如: [a-zA-z]+://[^/s]* ,这个明显存在很大问题,如果用户输入 what://baidu 他是可以通过验证的,有谁见过这样的网址?当然准确的说,http://可写可不写,因为ftp://和https://一般不是默认域名.我则是这样处理的,input文本输入框默认值value=”http://”,而表达式是我是这样写的: ^(http\:\/\/)?([a-zA-Z]{0,63}\.)?[-a-zA-Z0-9]{0,63}\.[a-zA-Z]{2,3}$ 这个对于whidy.net,www.whidy.net,http://whidy.net,http://www.whidy.net都是OK的,对于网站域名最大长度保守的来说我就设定为最大63,我想没有谁会申请这么长的域名了: ),,,而对于网址的结尾,则做了最小长度为2,最大长度为3的限制,域名一般没有长度为1或者大于3的.那么这样相对来说就很严格,用户哪里有输入错误,可以方便的检测出来~

看了这两个例子之后,大家可以尝试在其他表单验证,根据自己需求来写.对于正则表达式的熟练使用还是相当重要的! 最后,我分享几个有关资源,大家可以用来学习测试(一下资源均来自互联网,仅供学习参考使用,不可用于商业用途.嘻嘻~)

  1. 正则表达式系统教程
  2. 正则表达式验证小工具:RegexTester.exe 简要说明:在Regex输入框内输入规则后,在Resource内输入你要验证的内容,最后按F5,查看Matches框内的验证结果~示例如图:

    Regex Tester
    Regex Tester
  3. 一个别人写的,不错,当然看到后面也比较费力,大家有兴趣也可以看看 http://deerchao.net/tutorials/regex/regex.htm