网页分辨率设置技巧

 更新时间:2016年9月20日 19:05  点击:1849
    分辨率,什么是分辨率,网页分辨率设置

     大家一定在设计网面时,苦恼过不同分辨率下显示的问题,不论你喜欢打表格,还是运用图层,或者利用框架以及帧『内联帧』,当你在800×600下完成创作,1024×768下就会错位,或出现左对齐

     1.如果你喜欢打表格,解决的办法就很简单了,只要把最外边的<table>水平居中即可;如果你处理不好单元格,就把最外边的<table>的width设成"768"[针对800×600而言];这样你的网页在800×600满屏,1024×768就水平局中了,如果想1024×768下也满屏,你只要把最外边的<table>的width设成"100%"。

     说明:层,其实你可以把他看做是绝对定位标记区域,标记为<div></div>

     2.如果你喜欢运用图层,【我很喜欢,而且极爱】,居中问题就是一个大问题 

     图层的好处就是想怎么放就怎么放,比表格灵活的多,再者众多的动态页面技术javascript的运用都涉及到了层的概念,页面中表格与层的混合运用,在很多知名网站都可见其踪影因为是绝对定位的,【相对于浏览窗口0.0坐标】所以由于客户端分辨率的设置不同,显示时就会出现错位问题。

     我的方法是:利用子层与父层的关系解决,具体细节请看下面的代码:

<html>
<head>
<title>New Page 1</title>
</head>
<body>
<div ID="blockdiv" style="position: absolute; top: 0; left: 0; width: 780; height: 26">
<table border="0" width="100%" bgcolor="#00FF00" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="13">
<div style="position: absolute; left: 100; top: 75; width: 54; height: 23">
aaaa
</div>
<div style="position: absolute; left: 172; top: 178; width: 54; height: 23">
bbbb
</div>
</td>
</tr>
</table>
</div>

<script language="javascript">
<!--
var a
ie4=(document.all)?true:false
if(ie4) block=blockdiv.style
a=screen.width
if (a=="1024")
{
alert(block.left);
block.left=112;
}

if (a=="800")

{ alert(block.left);
block.left=0;
}
-->
</script>
</body>
</html>




<

  网页中的平衡、对比、连贯和留白

  网页设计中需要把握好很多原则和细节,今天我们来谈谈网页设计中的平衡、对比、连贯和留白。

  一、平衡

  如果你的页面是平衡的,当用户浏览这个页面的时候就会感觉它们是一个整体,看得时候目光的跳转也会很自然。同时,构成页面的元素仍然是彼此独立(注意不是孤立)的,你不需要用线用颜色将它们直接地串接起来,这是为什么呢?因为它们彼此之间是平衡的。这就好比跷跷板,即便你看不到连接两端的人的木板,你也能感觉到他们是一个整体,因为“平衡”!

  1、对称平衡

  对称是最常见、最自然的平衡手段,这种方式通常用来设计比较正式的页面,不过也还需要和下面介绍的多种方式结合起来使用。比如图 1所示的网站,如果你在页面正中间划一条垂直向下的直线,你会发现页面的两边的布局是基本对称。

  2、非对称平衡

  非对称其实并不是真正的“不对称”,而是一种层次更高的“对称”,如果把握不好页面就会显得乱,因此使用起来要慎重,更不可用的过滥。比如这个网站http://www.graphic.com.cn(图 2)就打破了常见的对称。但是如果仔细看的话还是能够感到某种“对称”的影子。

  3、辐射平衡

  页面中的元素以某一个点为中心展开就可以构成辐射平衡。比如图3就是典型的例子,页面的正中是一个大大的LOGO,外侧环绕着多个链接 。

  4、实战平衡

  下面我们通过一个LOGO设计实例来看一看平衡的多种变化。

  二、对比

  如果说平衡搭起了一个稳定的页面框架,那么对比就是这个框架中的动态点缀。这里说动态并不是说要真的让元素动起来,而是要有“变化”。可以变化的因素包括:大小、颜色、字体、重心、形状、纹理等等。 我们还是通过简单的例子来介绍一下对比的应用,图 9是我们设计的底版,字体一样、大小一样、颜色一样,单调枯燥。

  三、连贯

  前面谈到了对比,对比离不开变化,然而如果对比太多,变化也会太多,页面就会显得零乱,因此我们现在来谈“连贯”。在一个成功的页面设计中,有很多要素是必须保持一致的,这些要素通常包括:

  1、布局

  页面的上下、左右,页面与页面中间要保持布局一致。比如如果页面上方的表格居中对齐而页面下方的表格却左对齐,那么整个页面就会很难看。

  2、字体

  字体的大小、颜色应当基本保持一致。

  3、导航栏

  导航栏应当保持完全一样,通常应单单独为导航栏建立一个框架页,这样就可以保证更新导航栏的时候,所有网页都会被自动更新。

  四、留白

  国画中“画鱼不画水”的妙处就是留白的妙处。留白可以让访问者有更大的想象空间,就好像就如一个没有过多摆设的房间一样。上上下下、里里外外都塞得满满当当就是很糟糕的设计。

  留白的原则包括:

  1、元素之间的留白不能太大 这是基本的原则,留白过多,叶面会变得零碎。

  2、文本中间的间隔不能太大 文本应当紧凑,尤其汉字文本,如果字与字之间或者行与行之间空白太大页面就会非常难看。

  总的来说平衡、对比、连贯和留白设四条原则是在网页设计中必须始终牢记,但绝不是教条,应当结合自己的实际需要灵活的应用。




     作为一名希望成为服务器端软件的开发人员,总是想在需求中找到业务规则,根据设计方法把业务规则组合起来,配置好一些底层的结构,然后在该基础上来实现设计的框架,最后完成整个服务的功能。而服务器的软件与浏览器之间交互是服务器软件的窗口,因此前台网页的美观和实用在一定程度上反映服务器软件的功能特性。

     前台网页的实用不仅对于服务器端软件的开发重要,而且对于用户的可操作的流畅性和易用性也很重要。首先前台的网页的实用对于服务器软件而言:就是它们之间的交互参数。服务器后台软件将依照参数来设定相关的接口。只有把这些参数有业务逻辑的形式组合起来,才能避免功能的分化,甚至是凌乱;才能使服务器软件的按功能模块来实现,而不是表面看有很多功能,其实由大量功能之间的冗余。这样对于用户在功能上的请求也方便多了,从而达到了实用的效果。

    前台网页的美观对于用户来说是很重要的,爱美之心人皆有之,好的网页能起到赏心悦目的作用。并不是要在网页用大量的色彩,也不需要大量的javascript,而是应该根据网页的性质选定一种网页的风格,然后添加适当有特色的动态功能。同时要考虑到用户的显示器,浏览器等,争取使网页具有通用性!

    以上是我个人从服务器软件开发角度谈网页的实用和美观的自我总结,希望对页面开发人员有所帮助。




1.3 为用户设计

在Web开发中经常犯的一个错误是为设计者而设计站点,所考虑的是设计者的需求而不是实际用户的需求。如果设计者忽略用户的需求,进程模型就不能保障一个站点的质量。一定要记住Web设计的重要原则:

规则:设计者不是用户。

设计者所理解的并不是用户所理解的。作为一个设计者,你拥有Web站点的直接知识。你知道信息在哪里以及如何安装插入件。你有最优的屏幕分辨率及浏览器的设置等等。你必须接受以下的事实,很多用户并不像你一样理解你认真设计的站点,他们的兴趣甚至也与你不尽相同。 考虑到用户的兴趣和期望的重要性,表面上直接让用户以他们希望的方式进行设计仿佛很合适。但如果你考虑到了另一个基本原则,那就不是一个好主意:

规则:用户不是设计者。

并不是任何人是或必须是一个Web设计者。就像指望电影观众根据观看的电影去指导一部电影一样,仅因为用户浏览了众多站点而指望他们能够设计站点的想法是愚蠢的。用户经常有很多不现实的关于站点的需求和期望。用户也不会认真的单独考虑Web站点的某个部分。总之,用户不会像设计者一样对Web有综合的理解。这就是说,成功且易用的Web站点设计的关键是尽量从用户的角度去思考。以用户为中心的设计要求把用户放在第一位。但我们又能就用户谈些什么呢?是否存在典型的用户呢?是否存在一个有代表性的因特网用户,而我们应该为他设计站点?可能不会,但我们在设计站点时应该考虑一般的特性,如响应时间、记忆和其他一些认知与物理能力。对认知科学的回顾有助于我们理解用户的基本能力,这会在第3章里进一步讨论。记住,用户具有共性时也具有个性。对一个用户看起来很简单的事情对另一个用户则可能很困难。为具有共性的用户设计站点有可能 不能满足所有用户的要求。能力强的用户可能觉得站点的限制太多,而新手则会觉得它太困难。用户是一群具有某些共同能力和特征的个体。站点在专注于共性时,也应该考虑个性,正如下面的原则所指出的。

规则:为用户的共性设计,但应该考虑差异。

效益和可用性

好的Web站点对用户是有用的。有效性包括两个方面的意思:有用性和可用性。有用性指的是站点潜在的满足用户需求的功能。可用性是指用户能够通过站点的操作实现特定目标。例如,考虑一个提供在线银行服务的站点。如果它提供诸如收支平衡检查、转账、资金支付等用户期望的能力,就可以说它是有用的。然而,站点也可能完全失败,它提供的功能可能令人困惑而无法得到有效的使用。很明显,如果一个站点不能恰当地运作,或者设计得非常糟糕甚至存在错误,它就不是一个好站点。可用站点的效率会非常高,容易学习,在实现用户的目标时令人满意而不会有错误。

1.7 外观问题

尽管一个好的站点必须有好的功能和简单的导航系统,但这些特征并不能马上得到承认。站点的外观经常是最先被注意到的。尽管好的品味是不可能强迫出来的,几乎也不可能预测,但我们知道,好的Web设计与用户对站点外观的品味直接相关,第一印象有赖于在线的站点。用户不需要任何预先的知识,就可能主观地认为第二个站点(前端的)比第一个更值得浏览。站点的外观会影响用户对站点的看法。外观好的站点会主观地被认为比外观差的站点好,至少第一眼是这样。因此,有如下规则:

规则:外观会显著地影响用户开始时对站点的价值判断。

注意外观在获得用户信任方面可能也是重要的,这一点在在线交易方面非常至关重要。在对每个站点一无所知的情况下,考虑一下您会选择哪个站点进行交易。记住,信任不仅仅与站点相关,并且很大程度上受第三方认可的初始印象或者公司声誉的影响。

综合印象值

外观开始时很重要,但用户继续使用时,会逐渐减少对外观的关注。当一个用户离开某个站点时,他会有一个综合的印象—对站点访问是否成功的一般感觉。一般来说,这种感觉有可能是正面的、负面的或中性的。考虑一个用户讨厌某个站点的案例。为什么造成这种情况?用户是否发现站点很难使用?站点访问速度是否很慢?站点是否运行得很糟糕或经常出错?站点是否设计得很糟糕?以上任何一种原因都可能导致用户在离开时对站点有负面的评价。可能一开始受到外观的影响较大,最后的印象却来自内容、外观、技术以及可用性的综合。综合印象值可能很大程度上与用户在访问过程中是否达到目的相关。这样,虽然外观在第一印象中占主导性的作用,最终印象的产生却很复杂,可以综述为以下规则:

规则:站点的综合印象值受外观、内容、技术、可用性以及用户满足程度的综合影响。

尽管综合印象值不只是仅仅包括用户对站点的外观评价,但这并不会降低Web外观的重要性,颜色、背景、文本的使用、图像以及页面样式都能用来提高页面的表现力。

撇开视觉有障碍和计算机环境不支持图形浏览的用户不谈,视觉效果好的站点注定更加有趣。不要专注于站点的特定外观或那些可以下载的页面,仅仅在抽象的层次上考虑哪些更令人愉悦。

  网页的版式设计---网页的排版与布局

  很多朋友都想向我学习如何做网页,我知道他们的意思就是说要想向我学习如何用做网页的软件,如dreamweaver、flash、firework、photoshop等等,这些纯技术的东西我不想多谈,因为如今技术的发展一日千里,就是这种应用软件也是发展升级得非常的快。

  今天的很多认为是较难实现的功能也许经过软件升级之后就可以很方便的实现。我想强调的是关于网页排版布局方面的必要的知识,很多初学者都忽视这方面,以为技术就能代表一切,能够知道怎么用这个做网页的工具就能够做出质量较高的网页来。其实不然,因为软件知识只是一种工具,就像你有了笔,但不一定能作出好的文章来一样。很多人对技术很熟练但是做出来的网页却通常是照搬人家的东西,并没有体现做网页的水平的提高。

  网络时代,人本身的因素是相当重要的,只有拥有这方面的一定的审美知识,才有机会做好网页,而真正技术上的东西是不重要的,毕竟技术的发展是使每个使用者使用更加的方便,发展的趋势是让软件成为“傻瓜型”。终极目标就是用鼠标一点就能够使所有的网页完成。所以,我们应该培养自己的审美修养才是最重要的。而真正的体现是在具体的网页的布局上,网页的设计呈现出多样化的趋势,但是万变不离其宗,我想认真的分析一下,可以得到一些有用的东西,在我们应用的时候作为参考。

  虽然网页设计拥有传统的媒体的不具有的优势,例如是能够声音、图片、文字、动画相结合,营造一个富有生气的独特世界,同时它拥有极强交互性,使使用者能够参与其中,同设计者相交流。但是最基本的模式还是平面设计的内容,所以平面设计就要考虑形式美的内容,其中网页的排版布局就属于形式的内容,那什么形式呢?

  形。原形,包括原始形,或称自然形。

  式。许慎之《说文解字》说:“法也”。它包括“法则”、“法度”、“法制”、有“用法”的含义,也就是一种“格律”。

  中国古典建筑形式就称为“法式”。“形”是自然的,“式”是人为的。“形式”是将自然形态经过人为改造而称为一种新的美的形式。自然形态只有通过人的改造,才能起更大的作用,由于这个原因,就形成了今天的审美形态,形象是客观的,形式则是依据客观的规律进行主观的创造。如果没有主观的创造,就没有艺术,也不可能有今天的一切,当然对于实际的网页制作来说,这也是最基本的,就是主观的创造,因为这是一个网页的灵魂,假如没有自己的主观创造,就只能拾人牙慧? 复别人丢掉不用的东西,是毫无意义的。所以现在强调网页设计的创造,表现在对页面的布局上,具体说就是体现在页面的形式美方面。就是通过页面的合理安排,例如文字的条理清楚、流畅、整体,使形式美得到体现。

  从网站内容上来进行排版

  现在的网站通常具有的内容是文字、图片、符号、动画、按钮等,其中文字占很大的比重,因为现在网络基本上还是以传送信息为主,而用文字还是非常有效率的一种方式,其次是图片,加入图片不但可以是页面更加的活跃,而且可以形象的说明问题。所以按照目前网页的设计,可以有针对性的对这些内容作一些调整,可以得出一些可以借鉴的东西……

  从网页的布局形式上来看

  按照平面设计的形式来看,整个页面可以分为几个部分,每个部分有不同的功能,也能体现不同的形式,具体看来就是上边、左边、下边、右边、中间、看似无奇,自身却有许多独特的地方,就说划分的大小吧!中间的部分一般是最大的,因为它承载着主要的信息,使用者主要就是看中间这个部分的内容,有些网站也为了出新意把整个页面进行任意划分,特别是个人网页,例如把整个页面平分为左右两个部分,但是这样会让人不着重点,还有的框架用得太多,影响了页面的整体性……

  综合起来看

  内容和形式即具体的网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计,所以,不能单独考虑网页的内容的排版,内容和形式即具体的网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计,所以,不能单独考虑网页的内容的排版,以为只要能够把具体内容清晰流畅的放到网站上就行了,造成整个页面的形式感很差,这样严重影响使用者的心情……




<
[!--infotagslink--]

相关文章

  • photoshop打开很慢怎么办 ps打开慢的设置技巧

    photoshop软件是一款专业的图像设计软件了,但对电脑的要求也是越高越好的,如果配置一般打开ps会比较慢了,那么photoshop打开很慢怎么办呢,下面来看问题解决办法。 1、...2016-09-14
  • Jquery Ajax Error 调试错误的技巧

    JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
  • php语言中使用json的技巧及json的实现代码详解

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

    TextView默认是横着显示了,今天我们一起来看看Android设置TextView竖着显示如何来实现吧,今天我们就一起来看看操作细节,具体的如下所示。 在开发Android程序的时候,...2016-10-02
  • 基于PHP给大家讲解防刷票的一些技巧

    刷票行为,一直以来都是个难题,无法从根本上防止。但是我们可以尽量减少刷票的伤害,比如:通过人为增加的逻辑限制。基于 PHP,下面介绍防刷票的一些技巧:1、使用CURL进行信息伪造$ch = curl_init(); curl_setopt($ch, CURLOP...2015-11-24
  • 图解Sublime Text3使用技巧

    通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识,对sublime text3技巧相关知识感兴趣的朋友一起学习吧...2015-12-24
  • 分享12个非常实用的JavaScript小技巧

    这篇文章主要介绍了分享12个非常实用的JavaScript小技巧,这些小技巧可能在你的实际工作中或许能帮助你解决一些问题,需要的朋友可以参考下...2016-05-14
  • Python爬虫必备技巧详细总结

    本篇文章介绍了我在爬虫过程中总结的几个必备技巧,都是经过实验的,通读本篇对大家的学习或工作具有一定的价值,需要的朋友可以参考下...2021-10-22
  • Illustrator像素级完美绘制经验技巧分享

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说像素级完美绘制的经验技巧,各位想知道具体信息的使用者们,那么下面就快来跟着小编一起看一看。 给...2016-09-14
  • Windows Server 2008 R2远程设置选项灰色解决方法

    最近公司环境有几天Windows Server 2008R2的服务器因为没有激活导致过期后都不能远程,连接显示器后发现远程设置的地方为灰色了...2016-01-27
  • vivo x9怎么设置默认输入法?vivo x9设置默认输入法教程

    本篇文章介绍了vivo x9如何设置默认输入法的方法,手机小白们快来了解一下吧。 问:vivo x9怎么设置默认输入法?答:其实设置默认输入法很容易,首先点击应用程序,然后点设...2017-01-22
  • 前端开发必知的15个jQuery小技巧

    本文主要介绍了前端开发必知的15个jQuery小技巧。具有很好的参考价值,下面跟着小编一起来看下吧...2017-01-26
  • Windows 2016 服务器安全设置

    最近公司的网站升级Windows 2016服务器,选择安装了最新版的Windows 2016,以前使用Windows服务器还是Windows 2003系统,发现变化还是挺多的,依次记录下来以备后面查阅...2020-10-05
  • PHP脚本实现Magento权限设置与缓存清理

    PHP脚本实现Magento权限设置与缓存清理的实例代码有需要的朋友可参考一下。 代码如下 复制代码 <?php ## 设置文件644,目录755 function Al...2016-11-25
  • win2008之IIS7中FTP设置技巧

    如果要允许用户在站点中上载或下载文件,就需要在 Web 服务器上设置 FTP。无论站点是位于 Intranet 还是位于 Internet 上,使用 FTP 在所提供的位置中上载和下载文件的原理是相同的。...2016-01-27
  • 深入分析为Visual Assist设置快捷键的方法

    本篇文章是对为Visual Assist设置快捷键的方法进行了详细的分析介绍,需要的朋友参考下...2020-04-25
  • MySQL中的binlog相关命令和恢复技巧

    操作命令:复制代码 代码如下:show binlog events in 'mysql-bin.000016' limit 10;reset master 删除所有的二进制日志flush logs 产生一个新的binlog日志文件show master logs; 或者 show binary logs; 查看二进制文...2014-05-31
  • goland设置颜色和字体的操作

    这篇文章主要介绍了goland设置颜色和字体的操作方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-04
  • MySQL编程中的6个实用技巧

    每一行命令都是用分号(;)作为结束对于MySQL,第一件你必须牢记的是它的每一行命令都是用分号(;)作为结束的,但当一行MySQL被插入在PHP代码中时,最好把后面的分号省略掉,例如: 复制代码 代码如下: mysql_query("INSERT INTO...2015-03-15
  • C#如何更改Word的语言设置

    这篇文章主要为大家详细介绍了C#如何更改Word的语言设置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25