当前位置:主页 > 平面设计

最新发布

网页设计时超级链接target=_blank的使用
网页设计时超级链接target=_blank的使用

虽然已经是个很古老的议题了,不过感觉依然有很多站长朋友在做网站的时候并不是非常注意这种细节,使用target=_blank并非绝对错误,不过为了提高网站的可访问性,应该分场景探讨如何减少新开窗口。抛开某些不合逻辑意图不论,为什么大量使用弹出页面?因为设计师担心用户迷失方向。为什么用户会迷失方向?因为导航系统不够好。为什么导航系统不够好?因为产品功能太多太乱。为什么功能太多太乱?因为需求没控制好。为什么需求没控制好?因为提需求的人自己也没想清楚。说白了,很多场合都不仅仅是设计师的问题,因此只能选择不断妥协用劣质方案堆砌豆腐渣结构体系。快节奏中有些事情没法避免很正常,但设计师应该尽责做到迭代式的全局统筹重构。应该强制target=_blank1.文件下载链接2.文件打印链接3.非主线任务并打断进程的链接以上参考淘宝的老包同学在08年总结符合国情的链接新窗口打开中的应用场景。下载各种文件、打印各种文档,需要前后对比的帮助,注册表单的隐私条款都有必要target=_blank。能够定论target=_blank必然提升用户体验的场景很少,并且个人认为随着客户端技术的发展,会被逐步取代。比如lightbox这个ajax应用,给设计师带来了“查看大图不用再新开窗口”的全新设计理念,这在以前是不可想象的。可选择target=_blank

9 次浏览
HTML教程:marquee标签实现滚动效果
HTML教程:marquee标签实现滚动效果

说了这么多年的 Web 标准,似乎类似 marquee 这种非常规的标签,已经逐渐淡出视线,不过芒果刚刚在项目中用了这个蹩脚的标签,我觉得这是合理的善用,没必要顾忌太多的标准问题。标准并不是一项技术,标准只是一种规范与提议。既然如此,我们尚且撇开 Web 标准不谈,着眼于应用,无需 JavaScript 的掺和,marquee 标签对滚动效果的实现方便简练。代码示例:<marquee>这是一个滚动示例</marquee> 属性参数:direction表示滚动的方向,值可以是 left,right,up,down,默认为 leftbehavior表示滚动的方式,值可以是 scroll(连续滚动)slide(滑动一次)alternate(来回滚动)loop表示循环的次数,值是正整数,默认为无限循环scrollamount表示运动速度,值是正整数,默认为 6scrolldelay表示停顿时间,值是正整数,默认为 0,单位是毫秒valign表示元素的垂直对齐方式,值可以是 top,middle,bottom,默认为 middlealign表示元素的水平对齐方式,值可以是 left,center,right,默认为 leftbgcolor表示运动区域的背景色,值是 16 进制的 RGB 颜色,默认为白色height、width表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认 width=100%,height为标签内元素的高度hspace、vspace表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素onmouseover=this.stop() onmouseout=this.start()表示当鼠标以上区域的时候滚动停止,当鼠标移开的时候又继续滚动出于用户体验的考虑,当鼠标移入暂停滚动的效果可以使用 JavaScript 独立出来。

11 次浏览
网页设计师制作网页注意的10个技巧
网页设计师制作网页注意的10个技巧

这片文章大体概括了一些设计网页中的大问题。希望能给你做下一个网页时给予一些儿启发。1.记住:你能掌控的时间是有限的我仅仅用4秒钟就能浏览完平常的页面,因此,你没有足够的时间吸引用户并让他们继续浏览你的网站。也就是说你应尽可能准确的描述你设计的网站是关于什么的。如果它需要让浏览者花费更多的时间去弄明白此网站是关于什么的,他将放弃并离开。2、记住:用户是略读页面当你进入一个房间时,你不会具体的看每一样东西的外表。首先你会注意屋子里面人或物的外形,你环视整个屋子,然后找令你敢兴趣的东西。在第一次浏览网站的时候也会发生类似的事儿,浏览者或用户首先是大体浏览一下。这就需要你引导用户去你想要让他们去的地方。它可能是个登陆按钮、更多内容按钮、或博客文章等等3、网站的左上角是最明显的位置这是大家公认的事实。主要原因是大家都是用这种习惯方式来读书读文章的(从左上角的位置开始),另外早期的网站和应用软件也是基于此方法进行设计开发的。我们通常会把LOGO放在左上角,这样是很好的。但是考虑一下加入一个或者两个其他的元素在这个位置让它看起来更明显(注册的链接、搜索的表单、标语等)。4了解“F”结构一些视觉跟踪调查研究证明,用户浏览网站的视觉路线类似于字母“F”型。最顶部的位置总是能被看到,中间区域仅有一半被看到,再往下只有左边一部分能被看到。当你在设计的时候不知道将一个内容块放到社么位置的时候,你可以去考虑一下这一因素。5.了解用户忽略什么用户都是对广告视而不见的。他们习惯于忽略图片广告和文字广告。避免设计的东西看上去像广告,同时,用户也会忽略大块的文字区域。没有人有时间(更确切的说是耐心!)去阅读大片的文字,他们仅仅是了解页面文章的大意。6.文字和图片一个有趣的事实是。文字比那些绝妙的图片更能够获得注意!如果你想向你的用户传达信息,我建议你使用大的标语文字来代替那些很炫的头部图片……7.用设计元素来吸引注意来吸引注意的好的元素是文字口号,行动纲领的按钮(通常用亮色调),分成1-2-3级,或者就是一个普通的列表……如果你在写一篇很长的文章,很重要的一件事情就是你要去找小标题。小标题比其他的内容容易获得关注。使用恰当的标题,通过这简单的步骤向用户阐述这篇文章的主题。8.文字格式恰当的文字格式的编排更有意于阅读。不要担心使用过多的段落、加粗、斜体、引用、下划线或者字母大小写……它们都可以让文字块更有视觉冲击力。当然,你也需要用格式化强调一些你认为很重要的文字或者句子,这些能够引导你的读者阅读完全文。9.使用简洁图片我前面已经提及过用户对广告是视而不见的。当你在设计过程中使用到图片时,要确保它们不要杂乱、令人讨厌或不被理解。大部分人感觉看杂乱、色彩花哨的图片是比较费劲儿的。图片应该简洁、易理解的。你使用人的脸部图片更容易引起用户的注意,尤其当图片人物的眼睛盯着用户。当然你也可以用目光的方向来引导用户关注某一个方向。

2 次浏览
网页设计师必须知道的XHTML代码编写技巧
网页设计师必须知道的XHTML代码编写技巧

本文总结了30条HTML代码编写指南,只要在编写HTML代码的过程中牢记它们,灵活运用,你一定会写出一手漂亮的代码,早日迈入专业开发者的行列。1. 一定要闭合HTML标签在以往的页面源代码里,经常看到这样的语句:<li>Some text here.<li>Some new text here.<li>You get the idea.也许过去我们可以容忍这样的非闭合HTML标签,但在今天的标准来看,这是非常不可取的,是必须百分百避免的。一定要注意闭合你的HTML标签,否则将无法通过验证,并且容易出现一些难以预见的问题。最好使用这样的形式:<ul><li>Some text here. </li><li>Some new text here. </li><li>You get the idea. </li></ul>2. 声明正确的文档类型( DocType )笔者早先曾加入过许多CSS论坛,在那里,如果有用户遇到问题,我们会建议他首先做两件事:1. 验证CSS文件,解决所有可见的错误 2. 加上文档类型 DoctypeDOCTYPE 定义在HTML标签出现之前,它告诉浏览器这个页面包含的是HTML,XHTML,还是两者混合出现,这样浏览器才能正确的解析标记。通常有四种文档类型可供选择:1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">关于该使用什么样的文档类型声明,一直有不同的说法。通常认为使用最严格的声明是最佳选择,但研究表明,大部分浏览器会使用普通的方式解析这种声明,所以很多人选择使用HTML4.01标准。选择声明的底线是,它是不是真的适合你,所以你要综合考虑来选择适合你得项目的声明。3. 不要使用嵌入式CSS样式当你在埋头写代码时,可能会经常顺手或偷懒的加上一点嵌入式css代码,就象这样:<p style="color: red;">网页教学网</p>这样看起来即方便又没有问题,但是它会在你得代码中产生问题。

5 次浏览
简单学习认识HTML5标签
简单学习认识HTML5标签

HTML是人们在万维网上沟通和交流所必须要使用的核心标记语言。最新版本的超文本标记语言HTML5已经带着新的功能和要素推出了,这里提供一些信息供您学习HTML5.HTML5是基于HTML4.01,XHTML1.0和DOM级别2HTML的下一代推荐标准。它的目标是减少对专有RIA技术的需要,就比如Adobe Flash, MicrosoftSilverlight 和 Sun JavaFX.这个改进HTML的想法由WHATWG始于2004年且现在还在继续,虽然一些改进的部分已经完成并被使用了,但这是一个持续性的工作,将会持续很多年。它当然拥有一系列新元素和属性去改进现代的网站,一些基本元素已经被增加包括为一些通用块和内联元素的语义替换。其他元素将会在标准化接口下运行,比如<audio>和<video>元素。当你学习了HTML5,你会发现有很多元素已经从HTML4.01中被淘汰。其中一个特性就是关于<font>和<centers>的表象元素已经被CSS功能替代了。最后,你会发现HTML语法已经不再基于SGML,现在变成了和SGML文档类型声明很像的一种新的引导语句,使用“DOCTYPE sniffing”语句则允许在所有的浏览器中使用标准统一的语言。在一个升级改进后的软件或程序版本中找到新的元素和附件总是另人期待的,同样的在HTML5中你会找到新的标签。最新版本在通过如何操作不同的HTML元素上制定了明确的规则,降低了开发成本的同时提升了协同工作功能.在万维网语言中有几个不同的元素具备了新的功能。一些新的功能用于插入音频、视频、图片,客户端数据存储和交互式文档。此外,你会发现像,,等新的元素。你将会找到HTML5利用了超过100种新的HTML5标签。你会发现一些新的标签是用于定义一则评论,文档类型,超链接,文本,主体元素等等。正如刚刚提到的,HTML5有多个新标签帮助我们定义娱乐功能。在这一领域一些新的标签包括<video>,<img>是为图片使用的,<canvas>则是描述图片,还有<audio>用于定义声音文件。在越来越多的网站在其网页上支持视频和音频播放的时候,认识并了解这些标签是必要的。

8 次浏览
XHTML5实例:HTML5的表单验证
XHTML5实例:HTML5的表单验证

在网页加载完成是,光标自动聚焦在用户需要输入的地方,比如邮箱登陆页面的输入用户名,之前我们需要在网页onload的时候来用javascript代码指定某个输入框获取焦点的做法,现在html 5直接支持在输入框中加入autofocus属性。之前我们需要用javascript的onblur、onfocus来实现一个输入框的提示信息,现在只需要增加一个placeholder属性。判断必填项判断数据格式可以直接拖动,可以设置最小值、最大值、以及每拖动一格的步长。

10 次浏览
HTML5教程:HTML5的基础写法
HTML5教程:HTML5的基础写法

对比一下XHTML 1.0 Transitional的规范,html5基本上没有XHTML 1.0 Transitional严格的要求,并且简化了很多东西。•文档声明更简单了。1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2 <!--在HTML5中,这样写:--> 3 <!DOCTYPE html> •html标签上不需要声明命名空间。1 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">  2 <!--在HTML5中,这样写:--> 3 <html  lang="zh-CN"> •字符集编码声明也简单了1 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  2 <!--在HTML5中,这样写:--> 3 <meta charset="UTF-8" /> •可以不用给css及javascript代码写type属性了1 <script type="text/javascript"></script>  2 <style type="text/css"></style>  3 <!--在HTML5中,可以直接写:--> 4 <script></script>  5 <style></style> •没有XHTML代码规范的要求

10 次浏览
PSD模板转XHTML/CSS文档教程
PSD模板转XHTML/CSS文档教程

继上篇”碳纤维风格的插入式导航菜单“,Richard Carpenter把菜单图片转化为CSS/HTML文档了。我们就一起接着学习吧!查看CSS/HTML完整版,请点击这里:在我们开始切割图片之前,先在本地web服务器上布署文件,创建文件夹,在新建的文件夹中新建空白HTML文件”index.html”,空白CSS文件”styles.css”,styles.css放在另一个文件夹”stylesheets”中,最后再新建文件夹”images”存放图片。用代码编辑器打开html文件,在标签”BODY”内新建DIV,设置ID属性为”container”,此DIV将是所有元素的容器,代码如下:在”container “DIV内创建另外一个DIV,ID属性为”nav”,是包含所有导航元素的容器,代码如下:在”nav”DIV内创建一个简单的UL无序列表,设置UL的class属性为”navigation”,每个列表元素(LI)也设置不同的class属性,根据class属性来设置LI的样式。代码如下:

13 次浏览
网页设计中的常用表单设计技巧
网页设计中的常用表单设计技巧

“输入框( Input )应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系。”– 《HTML权威指南》Web应用程序总是利用表单来处理数据录入和配置,但并不是所有的表单都保持一致。输入区域的对齐方式,各自的标签(label),操作方式,以及周围的视觉元素都会或多或少影响用户的行为。表单布局考虑到用户完成表单填写的时间应当尽可能的短,并且收集的数据都是用户所熟悉的(比如姓名、地址、付费信息等),垂直对齐的 标签和输入框可以说是最佳的。每对标签和输入框垂直对齐给人一种两者接近的感觉,并且一致的左对齐减少了眼睛移动和处理时间。用户只需要往一个方向移动:下。在这种布局中,推荐使用加粗的标签,这可以增加它们视觉比重,提高其显著性。如果不加粗的话,从用户的角度讲,标签和输入框的文字几乎就一样了。如果一个表单上的数据并不为人熟悉或者在逻辑上分组有困难(比如一个地址的多个组成部分),左对齐的标签可以很容易的通览表单的信息。用户只需要上下看看左侧一栏标签就可以了,而不会被输入框打断思路。但这样一来,标签与其对应的输入框之间的距离通常会被更长的标签拉长,可能会影响填写表单的时间。用户必须左右来回的跳转目光来找到两个对应的标签和输入框。于是产生了一种替代的方案,标签右对齐布局,使得标签和输入框之间的联系更紧密。然而结果是左边参差不齐的空白和标签让用户很难快速检索表单要填写的内容。在西方国家,人们习惯于从左至右的书写,所以这种右对齐的布局就给用户造成了阅读障碍。

11 次浏览
预览:Dreamweaver CS5新功能更新列表
预览:Dreamweaver CS5新功能更新列表

Dreamweaver CS5新功能更新列表:  1、集成 CMS 支持  尽享对 WordPress、Joomla! 和 Drupal 等内容管理系统框架的创作和测试支持。  2、CSS 检查  以可视方式显示详细的 CSS 框模型,轻松切换 CSS 属性并且无需读取代码或使用其他实用程序。  3、与 Adobe Browserlab 集成  使用多个查看、诊断和比较工具预览动态网页和本地内容。  4、PHP 自定义类代码提示  为自定义 PHP 函数显示适当的语法,帮助您更准确地编写代码  5、站点特定的代码提示

2 次浏览
共计26043条记录 上一页 1.. 838 839 840 841 842 843 844 ..2605 下一页