您的位置：首页 > 编程技术 > html  >  网页不需要漂亮

网页不需要漂亮

 更新时间：2016年9月20日 19:05  点击：1215

终于有了深刻感触为什么 Jakob ,  Norman 等人要把网站做他们的样子，原来我看问题还是太复杂，虽然一直在试图简单。

漂亮与质量

记得某论坛曾帖出一份国外某机构评选出的顶尖网站名单，很快大家都跟帖抱怨或者心中怒骂来表达对作品的不屑一顾，这种人往往把视觉打分的权重放的很高，他可能忘了自己看网站的目的是什么，也没去想人家做网站的目的。

有一种观点就认为CSS写的页面都不怎么漂亮，建议你去看看 CSS World Awards Winners 2006 的作品，某些虽然貌似平庸，但也不至于难看，其中不乏 Haveamint 这样的经典视觉作品。借用 Dave 的话：我不认为使用CSS设计出的作品注定都是丑陋的。只不过用好CSS的人现在还没理解到它的妙处而已。

视觉只是一个无关紧要的标准，比如很多人会认同 K10k 图形上的精致，却只有少数能看懂 Stopdesign 代码上的巧妙。如果你还认为页面只有漂亮和不漂亮两种标准，那说明你对“网页设计”还很陌生，没有理解她蕴含的深意。

对于网站质量来说，漂亮只可用来加分，但不能打分。

漂亮还是舒服

网站是一个平台，网页只是一个界面，替用户服务的媒介，如果成为纯粹的艺术品，那就失去了本身的意义。所以我更认同界面最高的赞誉是舒服，而不是漂亮。注意你每一次界面视觉的体验，本能的会把舒服和漂亮两个概念分开，肯定是两种不同境界的感受。

漂亮是用户对作品的主观评判，我认为这个作品很漂亮。
舒服是作品对用户的客观影响，这个作品让我感觉很舒服。

相对耳熟能详的禅意花园，我可能更推崇 CssPlay ，站长是一位60高龄的工程师，我感兴趣的不是他网站全球1w内的排名，而是平均高达9.0的PageViews，这是现在很多高排名商业网站都达不到的高度。曾经跟踪过前四次改版，视觉上一版比一版简单、舒服，内容也更丰富，整体更好用和耐用，看得出站长的观念也在变，需求分析和定位也日趋精准。

对于视觉体验来说，舒服是比漂亮更高层次的艺术。

今日特别对千鸟的“网页不需要漂亮”一文印象深刻。

有两句总结性言论颇为经典：
" 对于网站质量来说，漂亮只可用来加分，但不能打分。"
" 对于视觉体验来说，我认为舒服是比漂亮更高层次的艺术。"

网站作为当代一种重要的交互平台，越来越被人们重视，不论是它的布局，还是它的内核，都开始趋向高品质的发展路线。从没有规范的繁乱代码和花哨外表的发展初期到符合web标准的简洁代码及和谐外表的新时代，设计师们经历了挖掘漂亮内涵的探索之路。CSS的出现，让美化不再仅仅依赖于图片，简单的色块和线条，配上精美的小图标，也一样能达到美的效果。让我们再看看内核，CSS+DIV代替了传统的嵌套表格。每一个id都像是一面小小的旗帜,显示着它独有的区域.这样一个从内到外都散发着舒服气息的页面,才是我们所追求的真美!

用户体验的出现,给了设计师更全面的思考。单单追求版面的漂亮已经不能满足客户的要求。他们更重视易用性和适用性。一个再有创意的设计，如果没有真正发挥出建站的目的，它除了能满足一种短暂的视觉享受以外毫无用处。但漂亮和舒服并不矛盾，只是舒服更平民化一些！它是一种被大众都容易理解的一种极高明的艺术形式。简单的不简单，随意的不随意，能够达到这一高度需要不断的探索与实践。

我们是幸运的，前方有探路者引路，后方有同路者随行，需要的是持之以恒的决心和勇气！

作为一个美术设计师，大家一定经常发出这样一封信：请确认设计稿。然后随信附上一个或数个不同风格的设计方案。

< <OBJECT id=WebBrowser height=0 width=0
      classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2>
</OBJECT>
<INPUT onclick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开 name=Button1>
<INPUT onclick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为 name=Button2>
<INPUT onclick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性 name=Button3>
<INPUT onclick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印 name=Button>
<INPUT onclick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置 name=Button4>
<INPUT onclick=window.location.reload() type=button value=刷新 name=refresh>
<INPUT onclick="window.external.ImportExportFavorites(true,'');" type=button value=导入收藏夹 name=Button5>
<INPUT onclick="window.external.ImportExportFavorites(false,'');" type=button value=导出收藏夹 name=Button32>
<INPUT onclick="window.external.AddFavorite(location.href, document.title)" type=button value=加入收藏夹 name=Button22>
 <INPUT onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type=button value=整理收藏夹 name=Submit2>
<INPUT onclick='window.location="view-source:" + window.location.href' type=button value=查看源文件 name=Button7>
<INPUT onclick="window.external.ShowBrowserUI('LanguageDialog', null)" type=button value=语言设置 name=Button6>
 <INPUT onclick="document.execCommand('Cut')" type=button value=剪切>
 <INPUT onclick="document.execCommand('Copy')" type=button value=拷贝>
 <INPUT onclick="document.execCommand('Paste')" type=button value=粘贴>
<INPUT onclick="document.execCommand('Undo')" type=button value=撤消>
 <INPUT onclick="document.execCommand('Delete')" type=button value=删除>
<INPUT onclick="document.execCommand('Bold')" type=button value=黑体>
 <INPUT onclick="document.execCommand('Italic')" type=button value=斜体>
 <INPUT onclick="document.execCommand('Underline')" type=button value=下划线>
 <INPUT onclick="document.execCommand('stop')" type=button value=停止>
 <INPUT onclick="document.execCommand('SaveAs')" type=button value=保存>
 <INPUT onclick="document.execCommand('Saveas

　　我们可以用CSS语法来控制超链接的形式、颜色变化。

　　下面我们做一个这样的链接:未被点击时超链接文字无下划线，显示为蓝色;当鼠标在链接上时有下划线，链接文字显示为红色;当点击链接后，链接无下划线，显示为绿色。

　　实现方法很简单，在源代码的和之间加上如下的CSS语法控制:

　　<style type="text/css">
　　 <!--
　　 a:link { text-decoration: none;color: blue}
　　 a:active { text-decoration:blink}
　　 a:hover { text-decoration:underline;color: red} 
　　 a:visited { text-decoration: none;color: green}
　　 -－> 
　　 </style>


<

　　我们早已知道，网站的质量在Google中起关键作用。高级Google工程师Matt Cutts在他的blog中多次提到，“优质”对于Google至关重要，无论是内容还是连接。

　　不过，创建内容和连接并不一定要经历痛苦的过程。网站搭建者们开始趋于从某些角度考虑如何组织内容。所以，让我们放开创新的思维，来想一想所有这些给网站添加优质内容的方法吧。

　　请先记住以下几点：

  • 你只是被你自己的想法和你的网站限制住了。尝试着往完全不同的方向探索一下。
  • 你的网站内容应该是写给你的顾客看，而不是给你。网站内容也不是写给搜索引擎的，它们不是你的目标群体。
  • 把你的网站想象成一幅完整的画，一个有生命的会呼吸的整体。它会持续成长，而不是停滞不前。

　　现在我们进入正题了：面向目标群体的优质内容。

　　1、事件日历。对于房地产网站，它可用于展示新开房屋信息；对于在线书店，可用于介绍新书签名会、作者见面会等；对于收藏类网站，可用于介绍最近的聚会活动等……确保访客能添加他们自己的事件到日历中去。

　　2、地图。考虑给房地产网站、捕猎/捕鱼网站、露营网站、酒店或者其他任何户外休闲网站建一个地图。在地图的底部添加内容来描述该地图并说明它的意图。

　　3、售前/售后经历。如果你的顾客能就你提供的产品或服务写一小段文字，或者探讨你的产品/服务带来的好处，就再好不过了。你可以把它们作为成功的证明放在网站上。

　　4、来自顾客的图片。你可以为已有顾客设立一个特别的地方，让他们能够在你的网站贴出自己的图片和日志等等。这个方法比较适合度假网站、休闲网站、婚姻网站、宝宝网站、摄影工作室等等。想一想，在Halloween网站该怎么做？花卉网站呢？

　　5、在线填色画。发挥你的想象力。如果你将一些度假物品做成填色画，孩子们就可以在旅程开始前给它们填完色然后 贴到他们在网上专有的版块。旅程结束后，他们的父母又可以贴上度假的图片和日志。这样，一个属于他们的度假纪念“网站”（其实完全是建立在你的网站上）就 成为了你这个度假网站的招牌。他们会怎么使用这个“网站”呢？他们会告诉朋友、爷爷奶奶、叔叔婶婶等等。他们会在其他地方给这个“网站”做连接。你可以把 这个招牌作为独特的核心卖点来跟对手竞争。你将会获得以往顾客过来的连接和未来顾客的浏览。你会赢得优势。如果网站可以作孩子们的文章，你可以想很多增添 填色画的方法，或者类似的针对孩子的创造性活动。

　　6、blog或论坛当然会给网站增添新内容。

　　7、令你的目标群体感兴趣的文章或者新页面。有规律的写出新内容——你的目标应该是每周1-2篇。

　　8、在站内主页展示专家问答。请个专家来回答问题，然后每周在主页贴出一问一答（或者每天都贴出，自由控制）。把站上以往的问答做个可搜索的归档。

　　9、产品评测。如果你的行业有产品或软件需要评测，可考虑写一些公正的评测文章。将文章发布到自己的网站和在线 刊物上。读者永远都会对完整的公正评测感兴趣，因为作者不失偏颇的列出产品的优点与弱点。如果你手头的是风景区业务，应该如何去“评测”呢？作为专家的你 将会使用什么产品呢？为什么？

　　10、小提示。如果你的产品或服务适合用小提示，就写一个系列并把它们发布到你的网站上。作为新闻信来发送。邀请使用你的产品的读者也来写小提示/技巧，如果他们提交过来，就给他们一些购买其他产品的优惠/折扣。

　　11、常见问题。常见问题（FAQ）是你的目标群体想要了解的内容。当你从读者那里收到提问，就在FAQ里面添加新的问答内容，使它保持更新。

　　12、使用手册/指引。人们喜欢看使用手册。如果你正在线销售抽水马桶部件，为何不写一份关于“如何在卫生间安 装抽水马桶”的指导手册呢？为你的顾客提供便利，客人就会源源不断。撰写一系列的使用手册。做一个网络上的“厕所超人”。听着这好像不够有魅力，不过如此 一来你就会被高度关注，并能将网站访问流量转化为销售，你会在互联网以外魅力十足。

　　13、能够解决实际问题的内容。人们为何访问互联网？为了寻找信息或者对比购物。如果你能为你的访客解决这些问 题，就帮他们达到了目的。举例说，你在卖东方的小毯子。你的潜在顾客可能正寻求点子如何装饰她的办公室。她的办公室很狭小，她想要增加点颜色。墙壁的大部 分都被窗子和金属书橱占据了。如果你创造出一系列内容/图片来展现你的东方小毯子能如何的解决她的问题，其中一个例子里提到长条形的东方地毯。这些内容不 但包含图片，还有文字描述各个问题并给出解决方案。你的潜在顾客自然能从搜索引擎里找到你的页面。

< 经常听到网友苦述自己的网页中有许多图片不能正常显示，究竟为什么不能正常显示呢？总结其原因绝大部分都是因为使用了错误路径所致。网页中的图像、动画等素材都有自己固定的存放位置，网页只是通过路径使用HTML语言来调用它们，然后把它们显示在网页中。在网页中的路径大体可分为相对路径和绝对路径，大家(尤其是初学网页设计的朋友)往往对它们不够认识，在应该使用相对路径的地方使用了绝对路径，从而导致浏览器无法在指定的位置打开指定的文件，使素材不能正常显示。

　　那什么是相对路径？什么是绝对路径呢？为什么使用了绝对路径有时就不能显示呢？让我们一起来认识一下它们吧。

　　比如C盘的My Pictures目录下有一个tp.jpg图像，那么它的路径就是c:My picturestp.jpg，其实这种完整地描述文件位置的路径就是绝对路径。如网页index.htm中有一张图片tp.jpg，它们的绝对路径是：

　　c:My picturesindex.htm

　　c:My picturestp.jpg

　　如果你使用了绝对路径c:My picturestp.jpg进行图片链接，那么在本地电脑中将一切正常，因为在c:My pictures下的确存在tp.jpg这个图片。但你将它们上传到网站服务器上后，就不会正常了，因为服务器给你划分的存放空间可能在C盘其他目录中，也可能在D盘其他目录中，总之不会那么巧的就是c:My pictures。那么图片路径应该如何设置呢？这里就必须使用相对路径了，所谓相对路径，顾名思义就是自己相对与目标位置。在上例中index.htm中连接的tp.jpg就可以使用My picturestp.jpg来定位文件，这样不论将这些文件放到哪里，只要它们的相对关系没有变，就不会出错。具体的链接方式是这样的：“..My picturesimg.jpg”，其中使用“..”来表示上一级目录，“....”表示上上级的目录，以此类推。

　　我们一起来看看初学的朋友可能犯的几个路径错误：

例1

　　c:mywedwedindex．htm

　　c:mywedimgtp．jpg

　　在此例中，index.htm网页中有tp.jpg这个图片，因为两个文件同在Mywed目录下，所以初学者可能把图片链接写为imgtp.jpg，那么这样实际的链接就变为了C:mywedwedimgtp.jpg，显然这是不正确的。正确的路径应该是相对路径..imgtp.jpg。

例2

　　c:mywedwedwed1index．htm

　　c:mywedimgimg1tp．jpg

　　在此例中，index.htm网页中有tp.jpg这个图片,初学者可能错误的把图片链接写为..imgimg1tp.jpg，那么这样转为绝对路径就是C:mywedwedimgimg1tp.jpg了，因为在该目录下并没有此文件，所以显然这种链接是错误的。正确的应该是....imgimg1tp.jpg。

例3

　　c:mywedwedwedindex．htm

　　c:mywedwedimgtp．jpg

　　在此例中，index.htm网页中有tp.jpg这个图片，初学者可能错误地把图片链接写为....imgtp.jpg，那么这样转为绝对路径就是C:mywedimgtp.jpg了，因为在该目录下并没有此文件，所以显然这种链接是错误的。正确的应该是..imgtp.jpg。

　　通过上面三个例子，我们可以看到网页与图片所在目录相同的部分都可以使用“..”进行代替。

　　有的读者可能会有这样的疑惑：一个网站有许多的链接，我怎么能保证它们的连接都正确，如果我调整了一下图片或网页的存储路径，那不是全乱了么？为了提高工作效率，我们推荐大家使用Dreamweaver进行网站编辑，因为它有个站点管理功能，使用该功能绝对路径可以自动地转化为相对路径，并且当你在站点中改动文件路径时，与这些文件关联的连接路径都会自动更改，实在是方便极了！


[!--infotagslink--]

相关文章

  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面，国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08

  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题，要把腾讯视频放到自己的网页有许多的办法，当然一般情况就是直接使用它们的网页代码了，如果你要下载资源再放到...2016-09-20

  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29

  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了，那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢？下面我们就一起来看看吧． 单...2016-09-20

  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • Go语言通过http抓取网页的方法

    这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05

  • C#抓取网页数据 解析标题描述图片等信息 去除HTML标签

    本文主要一步一步介绍利用C#抓取页面数据的过程，抓取HTML，获取标题、描述、图片等信息，并去除HTML，希望对大家有所帮助。...2020-06-25

  • 分析网页的几种加密技术

    　　现在专业性的网站越来越多，许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事，所以大家都想保护自己独创的...2016-09-20

  • 网页页面控制注意事项

    1、检查标题。2、检查版权信息，尤其是电话号码。3、图片、文件定位问题。4、产品页面首页指向产品类别问题。5、文章页面首页指向文章类别问题。6、产品图片大小...2016-09-20

  • 如何在网页中制作虚线表格

    　　在制作网页的时候，常常要遇到制作虚线表格的问题，下面的文章就能解决这个问题。　　方法一：作一个1X2的图。 　　半黑半白，再利用表格作成线。这种方法虽然麻烦...2016-09-20

  • ASP.NET使用HttpWebRequest读取远程网页源代码

    本文分享了一个使用HttpWebRequest读取远程网页的案例，供大家参考学习。...2021-09-22

  • vue如何在用户要关闭当前网页时弹出提示的实现

    这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-01

  • Illustrator设计细腻的网页纹理背景制作教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们带来的详细的设计细腻的网页纹理背景的制作教程，各位想知道具体制作步骤的，那么下面就快来跟着小编一起看看教...2016-09-14

  • 忠告：网页设计必须注意的29个问题

    当你在INTERNET这个信息的海洋中尽情遨游时，会发现许许多多内容丰富、创意新颖、设计独特的个人网页，不知道你见到这样漂亮可人的网页是否有点心动。一旦你具备了...2016-09-20

  • python 自动刷新网页的两种方法

    这篇文章主要介绍了python 自动刷新网页的两种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-20

  • 在网页上显示你Google Talk的在线状态

    　　一个英国人在自己的网站Jon Burrows上推出了一项服务：显示 Google Talk 的在线状态！ 　　下面是先锋 JasonIT 的显示： 　　大家可以看见，显示有“GTAlk On-Lin...2016-09-20

  • C#网页跳转方法总结

    这篇文章主要介绍了C#网页跳转方法总结的相关资料,需要的朋友可以参考下...2020-06-25

  • asp.net采集网页图片的具体方法

    采集网页上图片的主要关键是在怎么解析出页面代码里那些img标签的src属性...2021-09-22

  • jQuery javascript获得网页的高度与宽度的实现代码

    下面小编就为大家带来一篇jQuery javascript获得网页的高度与宽度的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考...2016-04-27

  • 基于C#实现网络爬虫 C#抓取网页Html源码

    这篇文章主要为大家详细介绍了基于C#实现网络爬虫的相关资料，即C#抓取网页Html源码，感兴趣的小伙伴们可以参考一下...2020-06-25