| 个人资料网页设计空间站日志列表 |  工具  帮助 |
|
网页设计空间站HTML/CSS/Javascript/ 网页配色/网页代码 /网页模板/网页欣赏/CSS+DIV 如何在搜索结果出来之前，让页面显示“等待中。。。在当前页面点击搜索按纽后，当前页的button onclick事件会生成一个sql语句，然后转到查询结果页面，由于查询可能很费时间，客户要求在这两个页面中加入一个提示用户正在查询，请等待的页，
具体的查询是在查询结果页面的Page_Load进行的。 现在的问题是这个中间页面怎么自动转向查询结果页面，如果在Page_Load里写，这个中间页就显示不出来 有两种比较中肯的解决方法： 第一种
1。可以做个公用的用户控件，copy如下代码，样式自己定义 <div id='doing' style='Z-INDEX: 12000; LEFT: 0px; WIDTH: 100%; CURSOR: wait; POSITION: absolute; TOP: 0px; HEIGHT: 100%'> <table width='100%' height='100%' id="Table1"> <tr align='center' valign='middle'> <td > <table id="Table2" class="loading"> <tr align='center' valign='middle'> <td>Loading...</td> </tr> </table> </td> </tr> </table> </div> <script language="javascript"> function ShowWaiting() { document.getElementById('doing').style.visibility = 'visible'; } function CloseWaiting() { document.getElementById('doing').style.visibility = 'hidden'; } function MyOnload() { document.getElementById('doing').style.visibility = 'hidden'; } if (window.onload == null)
{ window.onload = MyOnload; } </script>
2。在页面中拖入用户控件
3。在页面中给button加客户端click方法，如下
protected void Page_Load(object sender, EventArgs e) { this.Button1.Attributes.Add("onclick", "ShowWaiting();"); } 第二种
第一个页面比如first.aspx加入以下js：
<script language="javascript"> <!-- var _tt; function showSending()
{_tt=window.open("processwin.aspx",'uploadfileprocess',"toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,top="+dispHeight+",left="+dispWidth+",width=410,height=200",true); return true; } function closewin() { if (_tt!=null) { _tt.close(); } }
//--> </script> <body bgColor="silver" onunload="closewin();"> 然后，后台代码first.aspx.cs
page_load()时，检索按钮加入如下属性： btFileUpload.Attributes.Add("onclick","return showSending()"); processwin.aspx页面就是你要的中间页了，上面写上“等待...” js脚本学习event.clientX 返回最后一次点击鼠标X坐标值；
event.clientY 返回最后一次点击鼠标Y坐标值； event.offsetX 返回当前鼠标悬停X坐标值 event.offsetY 返回当前鼠标悬停Y坐标值 document.write(document.lastModified) 网页最后一次更新时间 document.ondblclick=x 当双击鼠标产生事件 document.onmousedown=x 单击鼠标键产生事件 document.body.scrollTop; 返回和设置当前竖向滚动条的坐标值，须与函数配合, document.body.scrollLeft; 返回和设置当前横向滚动务的坐标值，须与函数配合， document.title document.title="message"; 当前窗口的标题栏文字 document.bgcolor document.bgcolor="颜色值"; 改变窗口背景颜色 document.Fgcolor document.Fgcolor="颜色值"; 改变正文颜色 document.linkcolor document.linkcolor="颜色值"; 改变超联接颜色 document.alinkcolor document.alinkcolor="颜色值"; 改变正点击联接的颜色 document.VlinkColor document.VlinkColor="颜色值"; 改变已访问联接的颜色 document.forms.length 返回当前页form表单数 document.anchors.length 返回当前页锚的数量 document.links.length 返回当前页联接的数量 document.onmousedown=x 单击鼠标触发事件 document.ondblclick=x 双击鼠标触发事件 defaultStatus window.status=defaultStatus; 将状态栏设置默认显示 function function xx(){...} 定义函数 isNumeric 判断是否是数字 innerHTML xx=对象.innerHTML 输入某对象标签中的html源代码 innerText divid.innerText=xx 将以div定位以id命名的对象值设为XX location.reload(); 使本页刷新，target可等于一个刷新的网页############################ Math.random() 随机涵数,只能是0到1之间的数,如果要得到其它数,可以为*10,再取整 Math.floor(number) 将对象number转为整数，舍取所有小数 Math.min(1,2) 返回1,2哪个小 Math.max(1,2) 返回1,2哪个大 navigator.appName 返回当前浏览器名称 navigator.appVersion 返回当前浏览器版本号 navigator.appCodeName 返回当前浏览器代码名字 navigator.userAgent 返回当前浏览器用户代标志 onsubmit onsubmit="return(xx())" 使用函数返回值 opener opener.document.对象 控制原打开窗体对象 prompt xx=window.prompt("提示信息","预定值"); 输入语句 parent parent.框架名.对象 控制框架页面 return return false 返回值 random 随机参数（0至1之间） reset() form.reset(); 使form表单内的数据重置 split("") string.split("") 将string对象字符以逗号隔开 submit() form对象.submit() 使form对象提交数据 String对象的 charAt(x)对象 反回指定对象的第多少位的字母 lastIndexOf("string") 从右到左询找指定字符，没有返回-1 indexOf("string") 从左到右询找指定字符，没有返回-1 LowerCase() 将对象全部转为小写 UpperCase() 将对象全部转为大写 substring(0,5) string.substring(x,x) 返回对象中从0到5的字符 setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象 toLocaleString() x.toLocaleString() 从x时间对象中获取时间，以字符串型式存在 typeof(变量名) 检查变量的类型，值有：String,Boolean,Object,Function,Underfined window.event.button==1/2/3 鼠标键左键等于1右键等于2两个键一起按为3 window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值)================================== window.screen.height 返回当前屏幕高度(分辨率值) window.document.body.offsetHeight; 返回当前网页高度 window.document.body.offsetWidth; 返回当前网页宽度 window.resizeTo(0,0) 将窗口设置宽高 window.moveTo(0,0) 将窗口移到某位置 window.focus() 使当前窗口获得焦点 window.scroll(x,y) 窗口滚动条坐标，y控制上下移动，须与函数配合 window.open() window.open("地址","名称","属性") 属性:toolbar(工具栏),location(地址栏),directions,status(状态栏), menubar(菜单栏),scrollbar(滚动条),resizable(改变大小), width(宽),height(高),fullscreen(全 屏),scrollbars(全屏时无滚动条无参 数,channelmode(宽屏),left(打开窗口x坐标),top(打开窗口y坐标) window.location = 'view-source:' + window.location.href 应用事件查看网页源代码; a=new Date(); //创建a为一个新的时期对象
y=a.getYear(); //y的值为从对象a中获取年份值 两位数年份 y1=a.getFullYear(); //获取全年份数 四位数年份 m=a.getMonth(); //获取月份值 d=a.getDate(); //获取日期值 d1=a.getDay(); //获取当前星期值 h=a.getHours(); //获取当前小时数 m1=a.getMinutes(); //获取当前分钟数 s=a.getSeconds(); //获取当前秒钟数 对象.style.fontSize="文字大小";
单位：mm/cm/in英寸/pc帕/pt点/px象素/em文字高 1in=1.25cm 1pc=12pt 1pt=1.2px(800*600分辩率下) 文本字体属性： fontSize大小 family字体 color颜色 fontStyle风格，取值为normal一般,italic斜体,oblique斜体且加粗 fontWeight加粗,取值为100到900不等,900最粗,light,normal,bold letterSpacing间距,更改文字间距离,取值为,1pt,10px,1cm textDecoration:文字修饰;取值,none不修饰,underline下划线,overline上划线 background:文字背景颜色, backgroundImage:背景图片,取值为图片的插入路径 点击网页正文函数调用触发器：
1.onClick 当对象被点击 2.onLoad 当网页打开,只能书写在body中 3.onUnload 当网页关闭或离开时,只能书写在body中 4.onmouseover 当鼠标悬于其上时 5.onmouseout 当鼠标离开对象时 6.onmouseup 当鼠标松开 7.onmousedown 当鼠标按下键 8.onFocus 当对象获取焦点时 9.onSelect 当对象的文本被选中时 10.onChange 当对象的内容被改变 11.onBlur 当对象失去焦点 onsubmit=return(ss())表单调用时返回的值 直线 border-bottom:1x solid black 虚线 border-bottom:1x dotted black 点划线 border-bottom:2x dashed black 双线 border-bottom:5x double black 槽状 border-bottom:1x groove black 脊状 border-bottom:1x ridge black 1.边缘高光glow(color=颜色,strength=亮光大小)
2.水平翻转fliph() 使对象水平翻转180度
3.垂直翻转flipv() 使对象垂直翻转180度
4.对象模糊blur(add=true/false direction=方向 strength=强度)
add指定是否按印象画派进行模糊direction模糊方向strength模糊强度 5.对象透明alpha(opaction=0-100,finishopacity=0-100,style=0/1/2/3) opaction对象整体不透明值finishopacity当对象利用了渐透明时该项指定结束透明位置的不透明值style指定透明方式0为整体透明，1为线型透明，2为圆型透明，3为矩形透明 6.去除颜色chroma(color=颜色值)使对象中颜色与指定颜色相同区域透明 7.建立阴影dropshadow(color=阴影颜色,offx=水平向左偏离像素,offy=水平向下偏离像素) 8.去色gray()使对象呈灰度显示 9.负片效果invert()使对象呈底片效果 10.高光light()使对象呈黑色显示 11.遮盖mask(color=颜色)使整个对象以指定颜色进行蒙板一次 opacity 表透明度水平.0~100,0表全透明,100表完全不透明 finishopacity表想要设置的渐变透明效果.0~100. style 表透明区的形状.0表统一形状.1表线形.2表放射形.3表长方形. startx.starty表渐变透明效果的开始时X和Y坐标. finishx,finishy渐变透明效果结束时x,y 的坐标. add有来确定是否在模糊效果中使有原有目标.值为0,1.0表"否",1表"是". direction设置模糊的方向.0度表垂直向上,45度为一个单位.默认值是向左270度.left,right,down,up. strength 只能用整数来确定.代表有多少个像素的宽度将受到模糊影响.默认是5个. color要透明的颜色. offx,offy分别是x,y 方向阴影的偏移量. positive指投影方式.0表透明像素生成阴影.1表只给出不透明像素生成阴影.. AddAmbient:加入包围的光源. AddCone:加入锥形光源. AddPoint加入点光源 Changcolor:改变光的颜色． Changstrength:改变光源的强度． Clear:清除所有的光源． MoveLight:移动光源． freq是波纹的频率，在指定在对象上一区需要产生多少个完事的波纹． lightstrength可对于波纹增强光影的效果．显著0~100正整数，正弦波开始位置是0~360度．0表从0度开始，25表从90度开始． strength表振幅大小． 对屏幕文字行宽度的计算与界定这篇文章涉及的范围是： 人因工学，GUI，文字，版面设置对于文字排版，已经有很多传统的关于平面媒体的论述，而且对于文字栏宽（单行字数）这个话题，早就有概念性的指导，用我们今天的理解来说，是这样表述：在不发光介质上的文字排版，单行不应该大于35字中文字符左右宽度。这是长期的平面媒体在对人的感官视觉计算后得到的一个“舒适阅读”的参考值之一。 那么，现在我们的阅读，大量的转到这个你正在面对的屏幕的时候，我们更加应该重视这个新的阅读介质上应该怎么表现文字，而让我们以往的平面媒体上获得的“舒适阅读”的用户体验得以再次实现。 很显然，这种发光介质上的阅读，和纸张上的阅读有很大的不同，我们今天先放下其中的阅读模式变化，光刺激对视觉的强制性等等话题不谈，先来从视线的线性流向开始谈起。 有人说，印刷品的出现，使得文字阅读有了视觉的线性结构，说得简单些，就是从左向右，由上至下的阅读习惯。 为了不至于在一行读完后，视觉接不上下一行，就必须限制行宽度。 现在我们在屏幕上阅读的时候，也许你会发现，阅读的速度比你平时在读书时的速度要快一些，而且，也不是象读书时那样容易看走行。但是遇到行宽过大的文章，你的视线就开始扫描了，如果文章碰巧很长，你看不了几段就会觉得眼球跑得很累，这就是“视觉疲劳”的开始。其实这个状况不是今天才有的，只是现在显得十分突出而已。为什么这样讲？因为大家现在都换了大的显示器了嘛，有些人用的还是宽银幕的那种。 好吧，我们就来看看，以现在主流的19"显示器来面对，我们在屏幕上到底能接受多宽的文字栏宽才会觉得更舒服。 通常我们的眼睛离显示器大约一尺的距离，也就是333mm左右的距离，按照人因工学对人的有效视觉角度60°辐射出去，我们看到，眼角的余光正好能覆盖到整个屏幕的大部分区域。但是我们不可能用余光去阅读文字，因此，在中间的30°左右清晰视线范围，透射到屏幕上的宽度是多少呢？我们看到计算出来的值在178mm范围，为了便于计算和保证视觉清晰，我们将这个值向下取近似值为175mm，这样很好记忆，正好是一个标准男子身高175CM的1/10长度，也正好接近于两耳之间的距离。:) OK, 那么175mm在屏幕上到底有多宽呢？我们看看在不同的屏幕分辩率下的显示： 现在，我们可以清晰的知道自己应该怎么去做了，我们也可以明确的知道自己的文字栏宽度不应该超过55个中文字符了，一个建议的值也已经凸现出来，那就是每行约40个中文字符。这就是我们在新的阅读媒介上应该把握的尺度。 创新的用户界面阅读本文英文原文 近来，由于互联网的连接速度变得更快，以及访问者使用互联网的水平在不断提高，越来越多的网站开始采用新型的用户界面设计。这些新的交互界面可以让访问者浏览和操控更大量的信息。 本文将介绍最近我们刚刚接触到的几种有趣的用户界面设计，它们是：
本文的目的并不是在鼓励或推崇上述的任何一种用户界面设计，而是将它们介绍给大家，希望引起大家的兴趣并从中得到启发。虽然我们还不曾进行大规模的可用性测试，但我们认为这几种界面都有潜在的可能（如果使用得当的话）来帮助用户更好的完成操作。 滑块筛选 Amazon’s Diamond Search （亚马逊的钻石搜索）的用户界面采用了点击-拖拽的滑块，这样用户可以扩大和缩小搜索的筛选标准。用户通过滑动来变更用户选择的标准时，该页面可以自动的更新搜索结果。 这个界面具有直观和信息丰富的特点，用户可以很容易的在大量信息中搜索所需要的结果： 搜索结果的数量显示在该页面的右侧。这样，用户可以自由变换标准，直到搜索结果的数量小到满意为止。 用户可以使用滑块来缩小搜索范围，这样就可以减少搜索结果的数量： 当用户对结果的数量感到满意时，就可以点击’See results’（查看结果）按钮。这样设计的好处时，如果搜索结果为零时，用户就不必再花时间查看结果了，因为用户在滑动滑块时已经知道了。 鱼眼菜单 鱼眼菜单（Fisheye menus ）对于帮助用户浏览很长、但有序的列表很有用处。该菜单可以动态的变换菜单条目的尺寸，将鼠标所在区域放大。这样便可以在一个屏幕上显示并操作整个菜单了，而无需传统的按钮、滚动条、或分级浏览结构。 对于帮助用户轻松浏览很长的列表，鱼眼菜单很有潜力。 树图 树图（Treemaps）可以将多列数据以方块组的形式展现出来，这些方块还可以加以不同颜色、以不同大小组织起来，从而以图形的方式来揭示数据内在的模式。这种用户界面可以用来表现复杂的数据关系（比如层次关系等）。 在网站Smartmoney website上，便有一个这样的例子。通过这种用户界面，浏览者可以一目了然的看到数百种库存的信息。下面的图例中，库存货物信息根据不同行业被分组，进而按照其市场资本的大小以不同大小的矩形 表示出来。而颜色则用来表示价格的升（绿色）降（红色）。 要了解一个公司的详细情况，则可将鼠标移至该公司所在矩形的上面（下图展现的是通用电气公司的情况）。 拖放 拖放（Drag-and-drop）这种用户界面设计采用了使用者所熟知的移动元素的操控方法（使用者可能有过使用微软视窗应用的经验）。在恐怖小屋的在线商店（Panic Room’s online store）的网页上，要将物品放入购物车中，浏览者可以点击带有加号图标按钮，亦可通过拖放动作来完成。 然后按住鼠标按钮不放，之后在屏幕上向购物车方向拖动该物品: 最后，在购物车上松开按钮，物品就放到购物车中了： 对于研发新的或者改进现有的线上用户交互方式，创新的用户界面设计是很关键的。不过，设计全新的用户界面也有其问题，就是用户可能不会快速容易的学会如何使用。 所以，如果您研发出了完全创新的用户界面设计，请务必在投入到实际应用前进行可用性测试。这样，您便可以检查出用户是否掌握了如何操作，以及了解您该如何改进才能让界面更直观。 当然，记得一定要去访问一下我们上面提到的网站，因为界面本来就是为了交互而设计的！ 作者Tim Fidgeon热衷于网页的可用性研究，目前在Webcredible公司工作，该公司是业界领先的网页可用性和可及性的咨询机构 ，他的主要工作是教习 网页可用性培训 课程.以及进行可用性测试。 web设计95%是排版看到这个题目，第一感觉是耸人听闻。不管是95%或是更多或是更少，排版确实是一个不可忽略的问题。在我所遇到的web设计师中，或许是遇到的还少，我没有发现谁真正在意web排版。看到这篇文章，感触颇深（因为我刚使用linux的时候需要配置字体，顺便学习了不少的字体知识，也顺便成了一个爱好），周日在家挺闲，为了提高英语水平，顺手翻译了出来。希望对大家有所启发。 这篇文章来自一个研究并提供信息架构的网站：Information Architects Japan，原文：Web design is 95% typography. 又及，文章多次出现typography这个单词。正规的中文翻译应该是“排印”，但考虑web这个非印刷媒体，使用排印并不见得好。于是我根据语境，有时用“排版”，有时用“排印”，请读者明鉴。以下是翻译正文。 web中的信息有95%是成文的语言。为何web设计师应该好好学习一下设计成文信息的主要准则，换句话说，排版？这就是最佳的理由。 信息设计就是排版 回到1969年，Emil Ruder, 一个瑞士著名的排印大师，其笔下关于当时的印刷氛围，简直就是我们今天网站的写照： 今天印刷术的泛滥成灾让我们的个人价值被轻视，因为郁闷的我们现在并不能掌控印刷中的一切。分割、组织和实现印刷术的一切是排印师应有的任务，只有这样，读者才有更好的机会找出吸引她／他的东西。 信息设计师是21世纪的排版师 稍微联想一下（请用在线排版取代印刷），这就像是信息设计师的职务描述。分割、组织和实现印刷术的一切是“信息设计师”应有的任务，只有这样，读者才有更好的机会找出吸引她／他的东西。宏观排版（所有的文本结构）跟微观排版（样式和空间的细节方面）包括我们今天称为“信息设计”的很多方面。也就是说，信息设计师今天正在做排印师30年前的工作： 排版面临一个很直白的职责，这就是传达信息。没有理由能免除排版的这一职责。一个并不能阅读的印刷品只能变成一个无用的产品。 优化排版就是优化阅读，亲和力，可用性（！），综合文本平衡等。组织文本块并结合图片，难道不是图形设计师、可用性专家、信息架构师应该做的吗？但为什么这是一个被忽视的主题呢？ 为什么这是一个被忽视的主题？ 字体太少？分辨率低？ 文艺复兴：只有一个字体 该排印师应该没有太在意他手中手能掌握的字体种类，实际上也不应该太在意字体的选择。他应该更关心时代能赋予自己手中掌握的，并尽力发挥。 选择字样并不是排版 把文本当作用户界面 稍微著名把文本当作用户界面的 unornamental 网站例子有： google, ebay, craigslist, youtube, flickr, Digg, reddit, delicious. 一个难以争辩的必然事实是，把文本当作用户界面是成功的唯一参数。成功的网站设法同时创建简单的界面和强烈的特征。但这是另外一个主题了。 从哪开始 web排版 优化排版的5个简单步骤 Khoi Vinh Rod Graves A List Apart Association Typographique Internationale Thinking with Type Typetester Typophile Typohile Wiki The Next Big Thing in Online Type Emil Ruder, Typographie (Amazon) |
||||||||||||||||||||||||||
|
|
