推荐阅读
详细解析日系网页设计的现象和本质
在很多人眼里，日本是一个隐忍、充满禅意的国家。以寺庙、茶道、电子产品而闻名。既传统，又现代。日本的建筑设计、书刊设计受世界瞩目。但是不知怎么的，日本的网页设计风格很怪异。有点像1998年的网页风格。RakutenNicoNicoDougaGigazine看看日本这些最流行的网站(比如 Goo, Rakuten, Yomiuri, NicoNico, OKWave, @cosme)，你会发现他们都有共同点:文字排布紧密图像质量偏低
FW MX 2004 之 Shapes 初体验(二)
大家好，欢迎大家回来继续和我一起早早体验FWMX2004之Shapes带给我们的全新体验！ 在上一节，我们一起详细的研究了工具箱上的Shapes工具组的使用方法，操作技巧，本节我们就来看看Shapes浮动面板带给我们的新奇感受吧！ 首先我们再次来看看Shapes浮动面板都有哪些新东西： 可以看到，Shapes面板里面目前共有9个形状组：Clock(钟表)、Cog(齿轮)、Cube(立方体)、Cylinder(圆柱体)、Frame(像框)、Perspective(透视图)、Tabs(制表符)、Talking(谈话框)、Tube(管子)。接下来我们依次来看看个个形状组的使用方法及技巧。 提示：为什么我们对Shapes面板里面的9个形状对象使用的称呼是“形状组”，大家可以从Shapes面板中任意拖拽形状对象到编辑区，然后执行菜单命令“Modify--Ungroup（快捷键为Ctrl+Shift+G）”，解散群组关系，就会发现这些形状对象都是以群组方式形成的！所以这里我们称其为“形状组”。 提示2：关于形状组的操作技巧，我们会在下面的介绍中马上介绍道，需要注意的是，所有的方法技巧都是在没有打散群组关系的前提下进行的！ 1、Clock（钟表）组 将Clock形状组直接拖放在编辑区上，就会自动出现一个钟表图案，如下图所示。钟表的调整很有意思的，大家可以看到，用鼠标单击钟表后会出现四个调整控制点，下面我们就依次来看看各个调整控制点的作用所在： a、1号点：单击鼠标，会出现背景提示框：“Click to change tick marks（单击改变表盘标记）”，如果单击鼠标，就会改变表盘的时间刻度显示状态，总共有4种显示状态：不显示时间刻度；只显示以0点为起点的90度间隔的时间刻度，共4个刻度；显示以0点为起点的45度间隔的时间刻度，共12各个刻度，也就是12个小时的显示方式；显示60个刻度，也就是60秒的显示方式。大家可以根据自己的需要选择相应的显示方式。
基于Pro/E和ADAMS的少自由度并联机构运动仿真
少自由度并联机构是国际上机器人学研究的热点之一，构造出具有良好性能的少自由度并联机器人的众多构型，以便根据应用要求选择不同性能的机构，是并联机器人机构中的一项重要任务，当前众多研究人员的研究方向都集中于构建新型的少自由度并联机构。根据理论研究出来的众多的少自由度并联机构还需要检验其运动的正确性，传统的方法是通过试验样机制造实物来验证，而近年计算机技术的广泛应用提供了新的方法，那就是虚拟样机技术，这包括了三维CAD建模技术和机械系统运动学等相关技术。 大型的商用动力学仿真软件ADAMS、SIMPACT等集成了最新的多体系统动力学理论成果、各种方便的建模工具、高效的求解器、功能强大的后处理模块以及可视化界面等，用它们来建立机械系统的仿真模型，可以将注意力放在改进模型设计上，而不必关心建立方程、求解方程这些在过去要耗费大量精力的工作，从而大大提高了机械系统仿真的效率。仿真首先要做的是建立少自由度并联机构精确的三维模型，此时用动力学仿真软件就有点力不从心了，特别是对于此类少自由度并联机构，各个运动副的空间几何结构和位置都对整个机构的运动有重大的影响，需要三维建模建立准确的模型。因此，需要借助于三维建模功能很强的CAD软件来建模。 这里以PTC公司的三维建模软件Pro/E和MDI公司的动力学仿真软件ADAMS相结合建立少自由度并联机构的运动仿真模型。首先在Pro/E中建立机构的三维模型，机构的安装位置为机构运动的初始位置。然后利用两个软件的接口程序Mechanism/Pro生成刚体和基本的运动副，把三维模型导入ADAMS进行进一步的完善，添加驱动和约束，进行运动仿真。在整个过程中，需要对建立模型等前续工作进行不断的修改和完善，才能生成所要求的少自由度并联机构的仿真模型。 一、少自由度并联机构的提出 少自由度并联机构新构型的提出有着不同的理论方法，本文中采用的为利用螺旋理论来分析新型少自由度并联机构。利用运动螺旋与力螺旋的对偶关系，以及运动与约束、运动螺旋与反螺旋的对应关系，建立复杂少自由度并联机器人机构类型综合的数学模型。因为并联机器人机构是由支链、动平台和静平 在少自由度并联机构中，三自由度移动并联机构有着广泛的用途。在很多工业应用中，三个方向的移动就已经满足要求，而使用传统的六自由度机构增加了机构的复杂性和控制的难度，因此直接应用三自由度移动并联机构非常合适。此处利用螺旋理论提出一种纯移动三自由度并联机构，通过此机构来说明利用Pro/E和ADAMS完成运动仿真的过程。如图1所示，此机器人支链为三条对称的RPC支链，通过螺旋理论和空间几何分析可得此并联机构动平台应具有三个纯移动自由度。 图1 三支链并联机构模型
最新发布
IE8开发人员工具的菜单讲解
IE8正式版已经发布了。本篇文章不会非常扯蛋地去进行什么评测，然后给出什么“Chrome运行JavaScript能力是IE8的15倍”、什么“IE8页面渲染速度是Safari的2.456倍”、什么“IE8的抗强暴能力比FireFox高出1.235倍” 这样的操蛋的结论。我管谁比谁强多少？我只知道：当windows7发布的时候，IE8浏览器的市场占有率将让前台开发人员无法说：“不用去管IE8，没有几个人在用它”。所以，这篇文章将会非常务实的讲解一下，IE8中也许是唯一让开发人员感到亲切的“开发人员工具”。同时，我们会延伸一些相关的资料和知识。所以，请抛弃你对IE8的偏见，耐心的看下去吧。 你还没有安装IE8？ 如果你是前端开发人员，那么还请你安装一下这玩意吧。因为正式版已经发布了。不同于以前的beta版，这次咱得认真的关注一下它了。去下载并安装一个吧，下面是下载地址—— IE8中文版下载列表Windows XP Windows Vista Windows Server 2003 Windows Server 2008 Windows XP 64-bit Windows Vista 64-bit Windows Server 2003 64-bit Windows Server 2008 64-bit IE8英文版下载列表Windows XP Windows XP 64 Bit Windows Vista Windows Vista 64 Bit Windows Server 2003 Windows Server 2003 64 Bit Windows Server 2008 Windows Server 2008 64 Bit 哦，也许你会担心，你系统内的IE6或者IE7完蛋了。恩，的确，这有可能。但是，你可以试试下面的工具。它可以让你多版本的IE共存——IE多版本共存的解决方案——IETester 微软网页开发调试利器SuperPreview（附下载）认识“开发人员工具”虽然这玩意改了时髦的名字，但是却也不是什么新玩意，它的前身是“IEdevtoolbar”。但是，以前只是IE的一个插件而已。而在IE8中，浏览器已经自动集成了这玩意，不仅改了个有点土鳖的名字，而且功能也加强了很多。 开发人员工具在IE8的工具菜单下，或者直接点击F12快捷键也可以呼叫出来。 在我们介绍它之前，我们先来说说这玩意到底能做什么？如果你只是用浏览器来浏览网站，而不用操心页面是怎么做出来的。那么我想你已经可以离开这页面了。 总体来说，开发人员工具就是是为前端开发人员开发页面而设计的工具。提供一系列的小工具，让你可以方便的查找页面的bug，包括html代码、css代码和JavaScript代码。同时，他也提供了一些虽然比较鸡肋，但是还能咂咂味的小工具，例如取色、屏幕尺子等。 ok，我们已经看到它了，并且也知道它能干什么了。那就让我们根据菜单的顺序一一来介绍它吧——
select网页下拉列表与div层遮盖问题
在html中关于select元素的问题在很多地方都提出过，而在前段时间的项目中，刚好遇到了关于select元素的两个小问题，这里进行一下总结。 相关文章：div层被flash层遮盖问题解决思路 第一就是比较有名的：一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例： 注解：如果你在FirFox下和IE7下看都的结果是一样的：浮层A、B、C都可以正常的现实，即遮住下面的select元素。但是在IE6下则是3种不一样的情况，浮层A依然正常；浮层B主体部分遮盖住了select元素，但是浮层的边框却无法遮住select元素；浮层3则完全无法遮盖select元素。造成这个现象的原因是在IE6下，浏览器将select元素视为窗口级元素，这时div或者其它的普通元素无论z-index设置的多高都是无法遮住select元素的，但是可以通过同为窗口级元素的iframe来遮住select，上面的例子就是这样做的。浮层C仅仅是一个div浮层，这里不多讲，直接看浮层B的结构： <div class="containDiv" > <iframe class="maskIframe" ></iframe> <div class="mainDiv" >浮层B</div> </div> 用一个div将实际需要的内容div和一个iframe元素放在一起，它们对应的样式为：.containDiv{position: absolute; top: 140px; left: 60px; } .maskIframe{position: absolute; left: -1px; top: -1px; z-index: -1;border:1px solid #000;height:50px;width:50px;_height:48px;_width:48px;} .mainDiv{background:#EBAC3B;width:50px;height:50px;} 浮层B运用了iframe在containDiv中绝对定位并设置z-index: -1;，然后让下面真正放内容的mainDiv可以遮盖住iframe，这个时候iframe是可以遮住select元素的，而间接的使得mainDiv也覆盖了select元素。但是浮层B还是不完美，原因就是这里的浮层B的边框使用的iframe边框，iframe本身可以遮盖select，但是它的边框却不能，所以出现了浮层B的情况。浮层A是解决了这个问题，达到了理想想过，它基本上跟浮层B一样，只是它使iframe比mainDiv上下左右各多出1px，然后再给mainDiv边框，这样浮层的边框是由mainDiv提供的，而整个mainDiv连同边框都在iframe上面，所以达到了理想效果！ select的第二个问题是在IE下动态生成option选项的问题。看上面第二个问题的例子，当点击（限FF）的链接时在FF下可以给select元素加入3个option选项元素，但是在IE下却不行；当点击（通用）的链接时IE和FF下都可以给select元素加入3个option选项元素。原因是第一个链接是通过select元素的innerHTML属性来加入option元素的
Web Slices是什么
微软3月20日发布IE8正式版，新功能Web Slices(网页快讯)是让我挺感兴趣的一个东西。Web Slices是什么？slice是指某一部分，Web Slices就是网页上的某一部分内容。比如你关心ITFeed上的最新文章或taobao上某个商品的最新价格，但是你又不想时刻打开页面去查看，怎么办？Web Slices就为你提供了这样的便捷，你可以在收藏夹栏上获得该网页所关心部分的更新。点击右键选择属性设置更新计划，当有更新时它会以加粗的方式通知你，或者手动刷新查看。如何制作Web Slices？Web Slices采用了Microformats(微格式)的方式，只要对某段(x)html代码设定3个特定的class标记就可以了，另外别忘了给这块内容加上ID，否则无效。三个class标记分别为hslice、entry-title、entry-contenthslice设定内容块entry-title设定显示的标题entry-content设定所要显示的内容<div id="news" class="hslice"><h4 class="entry-title">ITFeed最近更新</h4><ul class="entry-content"><li><a href="#">另一个来自老外的快速贷款</a></li><li><a href="#">垂直门户网站的SNS社区之路</a></li><li><a href="#">学做jQuery中的data()函数</a></li><li><a href="#">淘宝前端开发人员的心声</a></li><li><a href="#">利用jQuery制作一个浮动的导航. </a></li></ul></div>
中文Web设计HTML的em标记使用
标记em用来表示强调，其默认样式为斜体。由于一些原因，中文斜体显示效果并不理想，因此对中文直接应用em标记存在不妥之处。一些设计师使用加粗表示强调，中英文显示效果都不错。不妨插一句，小字号（如12px）的加粗文本在使用点阵字体的情况下与普通文本差异明显，在使用矢量字体时则可能与普通文本差异不明显。这些设计师甚至使用strong代替em。配合标记默认样式决定标记之选择的做法必不可取。我们有理由为标记定制样式，替换其默认样式。正式的中文排版中，强调往往是通过在文字下文打上实心圆点实现的，这样的圆点被称作着重号。在中文Web设计中，我推荐对em标记使用着重号的效果，strong标记仍保留对文本加粗的效果。由于汉字的宽度一定，这种效果不难实现。这里打算为12px大小的文章正文设置em标记样式。首先，制作一张12px宽的图片，下图是放大至16倍的效果。对12px大小的文字来说，将圆点直径设为3px看起来最为合适，虽然这样圆点的中心不可能处于绝对居中的位置（本图中圆点偏右）。此外，将圆点以外的部分设为透明将更具适应性。接着制定样式。.post p em { padding-bottom:4px; font-style:normal; background:transparent url(images/dot-accent.gif) repeat-x left bottom; } 为了保证效果，段落文本应具有1.5em以上的行距，否则着重号可能距离下面一行文字太近。下面是一段HTML代码及其对应的样式效果。<p>事业是<em>干</em>出来的，不是<em>吹</em>出来的。</p> 事业是干出来的，不是吹出来的。
后缀是.shtml的网页文件你知道是什么意思吗？
首先介绍一下html与htm 关于HTML，HTML(HyperTextMark-upLanguage)即超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 关于HTM，实际上HTM与HTML没有本质意义的区别，只是为了满足DOS仅能识别8+3的文件名而已，因为一些老的系统(win32)不能识别四位文件名，所以某些网页服务器要求index.html最后一个l不能省略。MSIE能自动识别和打开这些文件，但编写网页地址的时候必须是完全对应的，也就是说index.htm和index.html是两个不同的文件，对应着不同的地址。值得一提的是UNIX系统中对大小写敏感，不吻合的话就可能报没有文件或者找不到文件。 其次介绍一下shtml和shtm 关于shtml，shtml是一种基于SSI技术的文件，也就是Server Side Include--SSI 服务器端包含指令，一些Web Server如果有SSI功能的话就会对shtml文件特殊招待，服务器会先扫一次shtml文件看没有特殊的SSI指令存在，如果有的话就按Web Server设定规则解释SSI指令，解释完后跟一般html一起调去客户端。 关于shtm，shtm与shtml的关系和htm与html的关系大致相似，这里就不多说了。 html或htm与shtml或shtm的关系是什么 html或者htm是一种静态的页面格式，也就是说不需要服务器解析其中的脚本，或者说里面没有服务器端执行的脚本，而shtml或者shtm由于它基于SSI技术，当有服务器端可执行脚本时被当作一种动态编程语言来看待，就如asp、jsp或者php一样。当shtml或者shtm中不包含服务器端可执行脚本时其作用和html或者htm是一样的。
HTML教程：脚本JS标记script详解
script标签有两种用途：它要依赖于src属性的存在。上面两种情况都需要</script>闭合标签。script标签可以包含下面的属性：src属性是可选的。如果存在src属性，它的值应是一个url(网址)表示的.js文件。当浏览器加载，编译与执行文件时，页面将停止装载与处理。<script src="url">与</script>之间不应有任何内容(保持空白)。如果没有src属性，<script>与</script>之间的文字可被编译与执行。script不能包含序列</ 因为可能与</script>混淆。可以插入反斜线符号在<与/之间避免此问题。</\ 反斜线将被JavaScript编译器忽略。不要使用<!– //–>这种hack脚本。这种方法可以阻止第一代浏览器（Netscape 1和Mosaic）将脚本显示成文字。已经有很长时间不需要这么做了。<!– //–>是一个HTML注释。注释中的脚本将被忽略，不被编译与执行。同样，HTML注释不包括–，因此脚本将忽略HTML错误。这个属性是不赞成使用的。它被用于选择其它的程序语言或特殊版本的JavaScript。尽量避免使用。
网页中利用Title属性的好处
最早大家都没有给链接加title的习惯，后来因为w3c标准普及，又集体加上了title。从一个极端走到另个极端，于是出现很多怪异现象。两方面，第一a标签内title不是必须使用，第二title可以用在除了base, basefont, head, html, meta, param, script和title之外的所有标签。抛开标签语义、搜索引擎友好等因素，在纯用户角度找几个场景来分析。列表内容被截断后通过title显示完整，此时如果没有被截的链接，也会被再显示出来。试想本来已经看清楚的信息，触发又提示一遍，传达是不是感觉很婆妈。如果没有截的链接控制不输出title，效果或许合理很多。或者title在此时根本就不应该？印象中英文好站似乎很少做列表截取。最典型类似对icon图示的辅助说明，可以最大化平衡界面复杂度与可操作性。并且针对某些群众认知度比较高的操作，如果图形传达到位，完全可以使用icon代替，更多交互场景请参考臭鱼在06年完成文字还是图标的总结。在导航系统的各条目中，title主要作用是做补充说明。同时也对应可访问性原则中，要求导航传达清晰简洁的建议。用户感兴趣后操作触发，再title提示更多详细，强调信息引导而不是推送。还有种做目地指引之用的案例，明确告知用户这个链接做什么？到哪里？在某些容易引起误会，或者不是很清晰的地方效果比较好。另外title不在a标签内也有广泛应用，典型如表单。可以为用户提供更精准、得体的操作指引，并且我想一定程度上可以代替明文提示。学以致用，顺手给评论模板加了条语句。上次改的时候本想写出来，又感觉多余，现在好多了。准备动手评论的用户，自然会看到，并且这么土的语句也没有兼容性问题。相应的不良应用不再图示举例，互联网上不胜枚举，深入分析语义和用法不仅能纠正错误、开拓思路，而且能贯通很多理论上的困惑。总结起来，title并不像seo从业者鼓吹的那么简单，在用户角度除避免与文字、图形重复传达，主要有三类用途：
202个免费的高质量XHTML模板(2)
继上一篇202个免费的高质量XHTML模板(1) 之后，破洛洛推出了该系列的第二部分，让我们一起看看这部分模板吧：预览 || 下载预览 || 下载预览 || 下载预览 || 下载
202个免费的高质量XHTML模板(1)
对于网页设计师中的新手来说，总是希望能找些好的免费的模板来学习，那么颇为纠结的是，国内相关资源相当匮乏，还好，国外有很多专业和高质量的XHTML & CSS模板可以免费使用。当然如果你对前端编码比较熟悉，你也将能从这些模板的代码中学到许多先进的技术。这些模板都是免费的，但是尽管如此，希望你在使用它们之前不要忘了检查一下授权。这里破洛洛推出了这些模板的第一部分——每个模板都是亲自挑选的，而且，我只选择那些对编码比较讲究或的确非常优秀的按照标准布局的模板。破洛洛这里是该系列收集的第一部分，有101个免费的高质量XHTML模板，和下一篇的101个模板加到一起，总共有202个模板。预览 || 下载预览 || 下载预览 || 下载
10个未被充分利用或被误解的HTML标签
网页开发人员常常希望能够了解并掌握多种语言，结果是，学习一门语言的所有内容是棘手的，但是却很容易发现你并没有完全利用那些比较特殊却很有用的标签。译自：TutsPlus不幸的是我们到现在还没有涉足的那些比较不知名的HTML标记所有潜力。但它永远不会太晚重新进入领域，并开始编写代码来发掘这些未开发的标签的能量。这里是10个未被充分利用或被误解的HTML标签。或许它们不太广为人知，但是在特定情况下他们却非常有用。貌似每个人都比较熟悉<blockquote> 标签，但是你可知道<blockquote>的小弟弟<cite>？<cite> 允许你定义元素内的文字作为一种参考。一般，浏览器会用斜体来显示<cite> 标签内的文字，但是这可以用一点CSS来改变。<cite> 标签对于引用目录或其它网站的参考非常有用。这里是一个在段落中使用cite标签的例子:David Allen的突破性组织性的图书完成你的工作给忘了带来了一场风暴。<optgroup>标签是定义select标签中的选项分组的一种很好的方法。比如，你需要按时间来分组电影列表，那么就可以这样做：