让我们设计的网页自适应客户端分辨率

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

  在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。

  第一种方法:做一个网页解决问题(长了点)

  如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得"面目全非",那多令人沮丧!下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW)为例,列出几个网页制作初学者较常见的网页布局问题以及解决方法,希望对初学者们有所帮助。

  一、消除任意缩放浏览器窗口对网页的影响

  一番辛苦做出来的网页,在全屏状态下浏览一切正常。但在改变浏览窗口大小之后,网页就变得"不堪入目"了,这是个很值得注意的问题。

  问题的根源还得从网页的布局说起,在DW中,网页内容的定位一般是通过表格来实现的,解决表格的问题也就成功了大半。

  大家应该注意到,在DW中表格属性面板的高宽设定选择上提供了两种不同类型:百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比,如在一个表格单元的宽度是600,在它里面嵌入了另外一个表格,表格宽度占表格单元的50%,则这个表格的宽度为300,依此类推,如果在一个表格不是嵌于另一个表格单元中,则其百分比是相对于当时窗口的宽度的。IE浏览器中,随便改动主页窗口的大小时,表格的内容也随之错位、变形,就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。

  自然,解决这个问题的办法就是将表格宽度设置成固定宽度(也就是像素值)。另外如果外层表格已做好固定宽度设置,内层表格也可以适当使用百分比设置。清楚这个原则以后,如果出现类似的问题大家也知道怎么解决。

  二、让网页居中

  说到了窗口大小就会顺着路子想到分辨率的问题,在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会跑到左边;1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧?做起来费时,看起来也费劲。怎么办呢?

  现在大多数网民都还在用800*600的分辨率,所以我们一般可以以此分辨率为主,要想让网页在1024*768时居中,只要在网页原代码的<body>后紧加一句<center>,</body>前加一句</center>就OK了。不过有几个问题这是要注意一下,第一个就是上面说到的百分比的问题,表格、单元格的宽度单位最好要使用像素单位,而不要用百分比。例如width=770。如果你的表格宽度设的是百分比,那么使用大于800×600的像素时,网页就会拉宽,这样网页可能会变形。在<body>中加入leftmargin=0,即<body leftmargin=0>这种情况下,800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。

  <html> 
  <head></head> 
  <body topmargin=0 leftmargin=0> 
  <center> 
    <table cellspacing cellpadding width=760><tr><td></td></tr></table> 
  </center> 
  </body> 
  </html> 


原文:http://www.coolcha.net/blog/post/Web2.0_Design_Color_2006527.html

颜色的变化跟人类的智慧一样,是无穷的,每个阶段都会有流行的色彩,有属于一个时代的颜色!WEB2.0是一个概念,它宣扬,定位了一些东西,以用户为中心,群体智慧,分享等等,等等.同时顺应这些需求,一些顶尖的设计师和开发者赋予并领导了一些色彩流行趋势.我凭感觉做了部分归纳和收集,心理没大有底,把能想到的列出来希望跟大家一起探讨>>再做补充吧!

淡淡的浅色系及延伸应用

此类颜色似乎最早被应用在一些文档处理软件比如word,和操作系统里(比如MacOSX)用于分类归档,标记,或者突出显示使用.此类颜色给人的感觉很环保,不伤眼睛,而且对比度恰到好处,既可以有效区分,又不会显的太过突兀.

google,Yahoo更为成熟的运用了这些颜色.MSN在新版网站中也设置了Simple White主题选择,并且新的LIVE系列产品更是对那种淡淡的兰色与1PX线条情有独忠~另外一些新兴的WEB-base办公软件也大量选用了此类颜色!事实证明,这些颜色的运用取得了大部分用户的认可并领导了趋势!

例子:GMail,yahoo360,live.com,start.com,netvibes,rember the milk

柔软舒适的过度色

此类颜色不知道跟WEB标准的流行有没有关,包括一些优秀的CSS陈列馆网站,还有著名的simplebit的设计作品,都大量运用了这种柔软的过度色,包括blog的一些优秀THEME 也会经常看到.这让人想到苹果水晶效果的转变,从最新的TIGER系统中我们可以发现,苹果在逐渐弱化那种清澈通明的水晶和金属拉丝效果,而向更直观硬朗的过度色做转变!说白了就是越来越simple而不是玩那么多花样.

例子:rollyo odeo




<

问:利用层进行网页布局好还是利用表格进行布局设计好?

答:现在网络上的大多数网页都是用table写的,可以说它是不标准的!table层层嵌套,缺点是很繁琐,修改起来很麻烦,用w3c网页标准来说,table真正的目的是用来显示数据的,而不是用来布局的。div布局的好处是它符合了w3c网页标准,div是真正用来布局网页的,以后维护时要是想改变布局的话修改起来很方便,现在sina,163等国内网站以及国外的大多数网站都是用div布局的,如果你真的想当一名网页设计师,建议你走div这条路,但前提是要把CSS学好,并且要学精!

问:如何用css把整个网页布局居中?

答:你可以设置body的CSS属性,或者设置Body中元素的CSS属性,例如P标记、Table标记、Div标记等,他们都有text-align属性,设置居中就可以了,另外需要注意的是,要让整个网页居中最好使用Table来定位内容的位置,这样操作起来最简单和最方便。

问:在动态网页布局中如何让单元格不向两边无限撑,特别是在显示数据库内容的时候!

答:先看看这段代码:

以下是引用片段:
style="width: 550; word-wrap: break-word; word-break: break-all;"

再看看这段代码:

以下是引用片段:
<table><tr><td style="word-break:break-all;width:200px;"> 表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容</td></tr></table>

显示效果:

表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容

自己去体会。

问:网页布局如何用工具实现?

答:用fireworks或photoshop作图,然后用切片工具划分,在划分时注意考虑,哪些地方在运用时会拉长什么的,考虑把连续的图像做成背景显示,然后导出切片和HTML文件,最好把切片放在一个文件中,然后用dW打开把不用的东西去掉,把该在上面打字的地方的图去换换成背景,然后填充内容。

使用框架和滑动门技术进行网页设计

  以前看过一些类似的文章,但这些文章文字在理论上阐述得比较多,没有从技术角度来分析和实现滑动门效果,前段时间心血来潮对此作了一番专门的研究,这里就把我的所得奉献给大家。

  一、什么是滑动门技术?

  如上图,简单地说,滑动门技术就是:当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化,从而区别于该组的其他导航按钮,提示给操作者,当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容。这种效果的一大好处在于,在多导航的页面上能够清晰地反映当前浏览内容隶属于哪个栏目或者哪个类,同时给人以美观、清晰、明了的视觉感受。滑动门技术的主角是被操作的对象,也就是这里被点击的对象,其CSS特性主要是指该导航按钮包括其中的其它元素的属性发生变化,当然,这个按钮的形式可以是BUTTON、A、TD甚至可以是P或者DIV这样的闭合元素,它们的属性主要是指这个元素的边框、背景、字体的颜色、大小、粗细以及外间距和内间距等等,总之,其一切可以把自身的“地位”区别于其它属主的属性都可以被应用起来使用在滑动门技术上。

  二、何时使用滑动门技术?

  观察发现,很多大型网站的频道导航或者栏目导航都要出现在其内容页面上或者终级页面上,事实上,这些所谓的频道导航或者栏目导航在每个内容页面上都是一样的,也就是说这些内容都是重复的,那么,浏览器客户端每次在装载这些内容的时候实际上都在重复下载相同内容的数据,这不仅浪费了大量的带宽,同时也给内容页面的装载带来很大的影响(因为导航的内容一般是放在页面的开头,页面装载也是按照从上到下的顺序进行转载,如果导航的部分也就是页面的上部没有装载完毕是不会装载页面的下部的。),因此,传统的网页设计(撇开对搜索引擎的支持)实际上存在很大的弊端和不科学性。当然,如果使用传统的网页设计方法,滑动门技术的应用实际上是没有多大意义的,因为每个页面都有自己的导航部分,只要在这个页面上的导航部分稍微作些动作就可以非常明显地达到滑动门的效果,但这只是一种伪效果,而且方法是这种处理非常低级的。现在我们要做的是让导航组中的导航按钮的属性自动适应当前内容页的显示,也就是说:当点击“新闻”导航按钮之后,出现的内容页面上的“新闻”导航按钮自动显示滑动门效果,而不是事先通过手动对其CSS属性进行过修改,这种效果最好就是用框架页来实现。

  当然,也许你会反对框架页,你会说在这个搜索引擎横行的时代使用框架页无疑是自寻死路,然而事实上在你说这句话的时候自己就已经处于弱势了,真正的强者敢于藐视搜索引擎甚至敢于挑战搜索引擎,真正优秀的网页设计师不是最大限度地去迎合搜索引擎的需要而是要最大限度地去迎合用户的需要,也就是说最大限度地去迎合用户体验,这才是我们的网页设计真正要做的。

  三、框架网页中使用滑动门技术的好处

  虽然很多人反对使用框架来对网页进行布局,事实上,框架对网页的布局有着最好的支持。首先,省去了重复装载不同内容页相同内容的时间和带宽,提高了页面装载速度,给人一种无刷新页面装载的感受。其次,框架与滑动门技术的结合更有利于提高用户体验,在表面上,使用框架与滑动门技术的各个框架页面在用户操作的过程中都在发生变化,对导航框架而言是被操作对象的样式发生变化,对内容页而言是指内容的发生变化,而在深度上,导航框架中的数据还是原来的数据,没有重新从服务器下载。

  而今的Ajax技术被很多人视为高新技术的典范,谁都想去附庸风雅,实际上Ajax技术同样是不被搜索引擎支持的,Ajax最明亮的一点就是不重复装载重复的数据和无刷新装载数据,事实上“无刷新”这三个字说得有些勉强,

  申明:这些方法对一个高手来说是没有什么用处的,所以有矛必有盾,你看着办吧。

  1.将以下代码加入到HEML的<body></body>之间

<SCRIPT language=javascript> 
function click() {if (event.button==2) {alert('不许你偷看!');}}document.onmousedown=click 
</SCRIPT> 


[!--infotagslink--]

相关文章

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

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程,各位想知道具体制作步骤的使用者们,那么各位就快来看看...2016-09-14
  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧,希望文章对各位有帮助。 为了更好的了解redis协议,我们用php来实现...2016-11-25
  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件,有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影,一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06
  • C语言程序设计第五版谭浩强课后答案(第二章答案)

    这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
  • Photoshop设计商务名片的5种常见思路分享

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路,各位想知道的使用者,那么下面就快来跟着小编一起看一看吧。 给各位Photosho...2016-09-14
  • WPF实现类似360安全卫士界面的程序源码分享

    最近在网上看到了新版的360安全卫士,感觉界面还不错,于是用WPF制作了一个,时间有限,一些具体的控件没有制作,用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
  • Element图表初始大小及窗口自适应实现

    这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10
  • 微信小程序(应用号)开发新闻客户端实例

    这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
  • photoshop安卓和苹果界面设计之尺寸规范详解

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下安卓和苹果的界面设计之尺寸规范,各位想知道的使用者们,那么下面就快来跟着小编一起看看吧。 给...2016-09-14
  • photoshop设计重影效果具体制作教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计重影效果具体的制作教程,各位想知道具体制作方法的软件使用者们,那么大家就来看下小编带来的教...2016-09-14
  • 在页面中输出当前客户端时间javascript实例代码

    这篇文章主要介绍了在页面中输出当前客户端时间javascript实例代码的相关资料,需要的朋友可以参考下...2016-03-03
  • Illustrator结合photoshop设计可爱的卡通女厨师头像制作教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说结合photoshop设计可爱的卡通女厨师头像的制作教程,各位想知道具体制作步骤的使用者们,那么下面就快来...2016-09-14
  • PS怎么设计T恤 PS制作T恤教程

    PS怎么设计T恤?很多人都想要在T恤上有自己喜欢的图案,那么自己设计T恤的图案是方法之一,本次为大家带来了详细的ps设计T恤教程,有兴趣的同学快来看看吧。 1、打开PS,新...2016-12-31
  • 客户端实现蓝牙接收(C#)知识总结

    网上有关蓝牙接收的资料很多,使用起来也很简单,但是我觉得还是有必要把这些知识总结下来,蓝牙开发需要用到一个第三方的库InTheHand.Net.Personal.dll,感兴趣的朋友可以了解下,或许对你有所帮助...2020-06-25
  • 从零开始在vue-cli4配置自适应vw布局的实现

    这篇文章主要介绍了从零开始在vue-cli4配置自适应vw布局,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-09
  • photoshop设计一张节约用水环保主题海报制作教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来详细的说说设计一张节约用水环保主题海报的制作教程,各位想知道具体制作方法的使用者们,那么下面就快来跟着小...2016-09-14
  • c#实现51单片机频率计的代码分享(数字频率计设计)

    c#实现51单片机频率计的代码分享,大家参考使用吧...2020-06-25
  • photoshop设计蜘蛛侠纹理文字效果制作教程

    今天小编在这里就来给给各位photoshop的这一款软件的使用者们来说一说设计蜘蛛侠纹理文字效果的制作教程,各位想知道具体制作步骤的使用者们,那么大家下面就来跟着小编...2016-09-14
  • C#获取客户端相关信息实例总结

    这篇文章主要介绍了C#获取客户端相关信息的方法,以实例形式总结了C#获取客户端IP地址、网络连接、硬件信息等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码

    这篇文章主要介绍了js根据手机客户端浏览器类型,判断跳转官网手机网站多个实例代码,需要的朋友可以参考下...2016-05-04