网页设计中该如何决定是否使用框架?

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

  框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。

  但是,框架的设计可能比较复杂;并且在许多情况下,您可以创建没有框架的 Web 页,它可以达到使用一组框架所能达到的许多同样效果。例如,如果您想让导航条显示在页面的左侧,则既可以用一组框架代替您的页面,也可以只是在站点中的每一页上包含该导航条;

  许多专业 Web 设计人员不喜欢使用框架,并且许多浏览 Web 的人也不喜欢框架。在大多数情况下,这种反感是因为遇到了那些使用框架效果不佳或不必要地使用框架的站点(例如,每当访问者单击导航按钮时就重新加载导航框架内容的框架集)。如果框架使用得法(例如,在允许其他框架的内容发生更改的同时,使一个框架中的导航控件保持静态),则这些框架对于某些站点可能非常有用。

  并不是所有的浏览器都提供良好的框架支持,框架对于无法导航的访问者而言可能难以显示。所以,如果您确实要使用框架,应始终在您的框架集中提供 noframes 部分,以方便不能查看这些框架的访问者。您最好还要提供指向站点的无框架版本的显式链接,以用于那些虽然其浏览器支持框架但不喜欢使用框架的访问者。

  使用框架具有以下优点:

  访问者的浏览器不需要为每个页面重新加载与导航相关的图形。

  每个框架都具有自己的滚动条(如果内容太大,在窗口中显示不下),因此访问者可以独立滚动这些框架。

  例如,当框架中的内容页面较长时,如果导航条位于不同的框架中,那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。

  使用框架具有以下缺点:

  可能难以实现不同框架中各元素的精确图形对齐。

  对导航进行测试可能很耗时间。

  各个带有框架的页面的 URL 不显示在浏览器中,因此访问者可能难以将特定页面设为书签(除非您提供了服务器代码,使访问者可以加载特定页面的带框架版本。)




< 在做一些网站(特别是bbs之类)时,经常会有充许用户输入html样式代码,却禁止脚本的运行的需求, 以达到丰富网页样式,禁止恶意代码的运行。
当然不能用 htmlencode 和 htmldecode 方法,因为这样连基本的html代码会被禁止掉。
我在网上搜索,也没有找到好的解决办法,倒是收集了一些脚本攻击的实例:
1. <script>标记中包含的代码
2. <a href=javascript:...中的代码
3. 其它基本控件的 on...事件中的代码
4. iframe 和 frameset 中载入其它页面造成的攻击
有了这些资料后,事情就简单多了,写一个简单的方法,用正则表达式把以上符合几点的代码替换掉:
public string wipescript(string html)
{
system.text.regularexpressions.regex regex1 = new system.text.regularexpressions.regex(@"<script[ss]+</script *>",system.text.regularexpressions.regexoptions.ignorecase);
system.text.regularexpressions.regex regex2 = new system.text.regularexpressions.regex(@" href *= *[ss]*script *:",system.text.regularexpressions.regexoptions.ignorecase);
system.text.regularexpressions.regex regex3 = new system.text.regularexpressions.regex(@" on[ss]*=",system.text.regularexpressions.regexoptions.ignorecase);
system.text.regularexpressions.regex regex4 = new system.text.regularexpressions.regex(@"<iframe[ss]+</iframe *>",system.text.regularexpressions.regexoptions.ignorecase);
system.text.regularexpressions.regex regex5 = new system.text.regularexpressions.regex(@"<frameset[ss]+</frameset *>",system.text.regularexpressions.regexoptions.ignorecase);
html = regex1.replace(html, ""); //过滤<script></script>标记
html = regex2.replace(html, ""); //过滤href=javascript: (<a>) 属性
html = regex3.replace(html, " _disibledevent="); //过滤其它控件的on...事件
html = regex4.replace(html, ""); //过滤iframe
html = regex5.replace(html, ""); //过滤frameset
return html;
}
此方法输入可能包含脚本的html代码,返回则就是干净的代码了。

  如果想别人在看你的主页时,每次都刷新,而不是读取缓存里旧的数据,可以这样来做。

  用鼠标右键单击页面,选择“页面属性”,弹出“网页属性”对话框。单击“自定义”选项卡 ,这里并没有我们要的功能。

  

  点“添加”按钮,弹出“系统Meta变量”对话框,输入一个变量,“名称”为“Pragma”,“值”为“no-cache”,单击“确定”。

  

  这样在网页的中就加入下面这样的HTML源代码:

  <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

  这样每次浏览此页时,浏览器浏览信息时必须从服务器中读取。




< <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

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

漂亮与质量

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

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

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

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

漂亮还是舒服

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

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

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

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

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

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

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

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

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

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

<
[!--infotagslink--]

相关文章

  • photoshop设计一幅大鱼海棠动画片海报制作实例教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程,各位想知道具体制作步骤的使用者们,那么各位就快来看看...2016-09-14
  • 图解PHP使用Zend Guard 6.0加密方法教程

    有时为了网站安全和版权问题,会对自己写的php源码进行加密,在php加密技术上最常用的是zend公司的zend guard 加密软件,现在我们来图文讲解一下。 下面就简单说说如何...2016-11-25
  • ps怎么使用HSL面板

    ps软件是现在很多人都会使用到的,HSL面板在ps软件中又有着非常独特的作用。这次文章就给大家介绍下ps怎么使用HSL面板,还不知道使用方法的下面一起来看看。 &#8195;...2017-07-06
  • 基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

    这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍 的相关资料,需要的朋友可以参考下...2016-05-14
  • Plesk控制面板新手使用手册总结

    许多的朋友对于Plesk控制面板应用不是非常的了解特别是英文版的Plesk控制面板,在这里小编整理了一些关于Plesk控制面板常用的使用方案整理,具体如下。 本文基于Linu...2016-10-10
  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件,有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影,一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06
  • 使用insertAfter()方法在现有元素后添加一个新元素

    复制代码 代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newEl...2014-05-31
  • C语言程序设计第五版谭浩强课后答案(第二章答案)

    这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
  • 使用GruntJS构建Web程序之构建篇

    大概有如下步骤 新建项目Bejs 新建文件package.json 新建文件Gruntfile.js 命令行执行grunt任务 一、新建项目Bejs源码放在src下,该目录有两个js文件,selector.js和ajax.js。编译后代码放在dest,这个grunt会...2014-06-07
  • 使用percona-toolkit操作MySQL的实用命令小结

    1.pt-archiver 功能介绍: 将mysql数据库中表的记录归档到另外一个表或者文件 用法介绍: pt-archiver [OPTION...] --source DSN --where WHERE 这个工具只是归档旧的数据,不会对线上数据的OLTP查询造成太大影响,你可以将...2015-11-24
  • 如何使用php脚本给html中引用的js和css路径打上版本号

    在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css、js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css、...2015-11-24
  • jQuery 1.9使用$.support替代$.browser的使用方法

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合...2014-05-31
  • 安装和使用percona-toolkit来辅助操作MySQL的基本教程

    一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务,这些任务包括: 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24
  • C#注释的一些使用方法浅谈

    C#注释的一些使用方法浅谈,需要的朋友可以参考一下...2020-06-25
  • Photoshop设计商务名片的5种常见思路分享

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路,各位想知道的使用者,那么下面就快来跟着小编一起看一看吧。 给各位Photosho...2016-09-14
  • MySQL日志分析软件mysqlsla的安装和使用教程

    一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24
  • php语言中使用json的技巧及json的实现代码详解

    目前,JSON已经成为最流行的数据交换格式之一,各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》,探讨它的设计思想。今天,我想总结一下PHP语言对它的支持,这是开发互联网应用程序(特别是编写API)必须了解的知识...2015-10-30
  • PHP实现无限级分类(不使用递归)

    无限级分类在开发中经常使用,例如:部门结构、文章分类。无限级分类的难点在于“输出”和“查询”,例如 将文章分类输出为<ul>列表形式; 查找分类A下面所有分类包含的文章。1.实现原理 几种常见的实现方法,各有利弊。其中...2015-10-23
  • php类的使用实例教程

    php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25
  • 双冒号 ::在PHP中的使用情况

    前几天在百度知道里面看到有人问PHP中双冒号::的用法,当时给他的回答比较简洁因为手机打字不大方便!今天突然想起来,所以在这里总结一下我遇到的双冒号::在PHP中使用的情况!双冒号操作符即作用域限定操作符Scope Resoluti...2015-11-08