使用框架和滑动门技术进行网页设计
以前看过一些类似的文章，但这些文章文字在理论上阐述得比较多，没有从技术角度来分析和实现滑动门效果，前段时间心血来潮对此作了一番专门的研究，这里就把我的所得奉献给大家。
一、什么是滑动门技术?
如上图，简单地说，滑动门技术就是:当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化，从而区别于该组的其他导航按钮，提示给操作者，当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容。这种效果的一大好处在于，在多导航的页面上能够清晰地反映当前浏览内容隶属于哪个栏目或者哪个类，同时给人以美观、清晰、明了的视觉感受。滑动门技术的主角是被操作的对象，也就是这里被点击的对象，其CSS特性主要是指该导航按钮包括其中的其它元素的属性发生变化，当然，这个按钮的形式可以是BUTTON、A、TD甚至可以是P或者DIV这样的闭合元素，它们的属性主要是指这个元素的边框、背景、字体的颜色、大小、粗细以及外间距和内间距等等，总之，其一切可以把自身的“地位”区别于其它属主的属性都可以被应用起来使用在滑动门技术上。
二、何时使用滑动门技术?
观察发现，很多大型网站的频道导航或者栏目导航都要出现在其内容页面上或者终级页面上，事实上，这些所谓的频道导航或者栏目导航在每个内容页面上都是一样的，也就是说这些内容都是重复的，那么，浏览器客户端每次在装载这些内容的时候实际上都在重复下载相同内容的数据，这不仅浪费了大量的带宽，同时也给内容页面的装载带来很大的影响(因为导航的内容一般是放在页面的开头，页面装载也是按照从上到下的顺序进行转载，如果导航的部分也就是页面的上部没有装载完毕是不会装载页面的下部的。)，因此，传统的网页设计(撇开对搜索引擎的支持)实际上存在很大的弊端和不科学性。当然，如果使用传统的网页设计方法，滑动门技术的应用实际上是没有多大意义的，因为每个页面都有自己的导航部分，只要在这个页面上的导航部分稍微作些动作就可以非常明显地达到滑动门的效果，但这只是一种伪效果，而且方法是这种处理非常低级的。现在我们要做的是让导航组中的导航按钮的属性自动适应当前内容页的显示，也就是说:当点击“新闻”导航按钮之后，出现的内容页面上的“新闻”导航按钮自动显示滑动门效果，而不是事先通过手动对其CSS属性进行过修改，这种效果最好就是用框架页来实现。
当然，也许你会反对框架页，你会说在这个搜索引擎横行的时代使用框架页无疑是自寻死路，然而事实上在你说这句话的时候自己就已经处于弱势了，真正的强者敢于藐视搜索引擎甚至敢于挑战搜索引擎，真正优秀的网页设计师不是最大限度地去迎合搜索引擎的需要而是要最大限度地去迎合用户的需要，也就是说最大限度地去迎合用户体验，这才是我们的网页设计真正要做的。
三、框架网页中使用滑动门技术的好处
虽然很多人反对使用框架来对网页进行布局，事实上，框架对网页的布局有着最好的支持。首先，省去了重复装载不同内容页相同内容的时间和带宽,提高了页面装载速度,给人一种无刷新页面装载的感受。其次，框架与滑动门技术的结合更有利于提高用户体验，在表面上，使用框架与滑动门技术的各个框架页面在用户操作的过程中都在发生变化，对导航框架而言是被操作对象的样式发生变化，对内容页而言是指内容的发生变化，而在深度上，导航框架中的数据还是原来的数据，没有重新从服务器下载。
而今的Ajax技术被很多人视为高新技术的典范，谁都想去附庸风雅，实际上Ajax技术同样是不被搜索引擎支持的，Ajax最明亮的一点就是不重复装载重复的数据和无刷新装载数据，事实上“无刷新”这三个字说得有些勉强，
问：利用层进行网页布局好还是利用表格进行布局设计好？
答：现在网络上的大多数网页都是用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打开把不用的东西去掉,把该在上面打字的地方的图去换换成背景,然后填充内容。申明：这些方法对一个高手来说是没有什么用处的，所以有矛必有盾，你看着办吧。
1.将以下代码加入到HEML的<body></body>之间
function click() {if (event.button==2) {alert('不许你偷看！');}}document.onmousedown=click
</SCRIPT>
因为工作需要，昨晚将另一位网页设计师的设计作品生成了页面，折腾了一通宵，我脑细胞成几何倍数减少，完成了工作，不免有些牢骚要发。
我认为网站是为人民服务的，网站的优劣，内容是关键，而设计能排在第二就不错了。一个网站的设计不仅需要的是美观，更需要的是配合内容的编排以及其它更多方面，例如浏览速度及浏览方便性。如果您同意以上观点，请继续看下文。
因为网站的设计不仅需要美观，所以产生了不少矛盾，挑几个主要的矛盾来分析：
一、 background背景图像的矛盾
由于千篇一律的单色背景早已产生了视觉疲劳，因此出现了花纹背景，例如用点、线、面组成的背景，通常这种背景都是做成10*10px （或其它）的方形大小。再受韩潮影响，目前应用广泛的是渐变背景，由于分辨率的关系，通常采用上下渐变，左右渐变不可取。问题来了，上下渐变在Photoshop（做网页设计的常用软件）中只需要简单的使用渐变工具拉动一下即可，但是作为网页设计师的你有没有想过在页面中这种背景应该如何去做？分成上下2个背景，或者做一个超级长估计要在3000px以上的背景？（可以参看我的博客首页背景http://blog.sina.com.cn/m/baopin）因此在做这种背景的时候，需要仔细考虑页面该如何去生成。
二、 适应分辨率的矛盾
为适应分辨率，最佳方法应该是整个页面采用100％自适应表格，这种网站让800*600及以上分辨率的彩显都能整屏幕最佳效果浏览，这样的制作方法在为数不多的几个网站上出现过。但是这种方法必然需要最少的图片及最多的216安全色及最精简的表格。目前这样的网站不怎么能满足客户的设计要求。
在国内，网站通常都在750-780px的宽度之间，这样做的目的是为了适应800*600及以上分辨率的彩显浏览网站。OK，矛盾出现了，中间是780px的宽度，但是通常设计师会加上描边或者投影的效果，做为设计师的你，有没有把这个尺寸算进去？更有甚者，中间的内容是780px 两边采用长达30px的投影，再加上前面第一点提到的渐变背景，好了，你想让生成页面的工作人员自杀吗？请你在做这样的设计时候为后面的生成页面工作考虑一下。
三、 网页216安全色的矛盾
所谓网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色，也就是说这些颜色在任何用户显示设备上的显示效果都是相同的。所以使用216网页安全色进行网页设计可以最大限度避免颜色失真的问题。
但是通常216个色彩不怎么能满足网页设计师的设计，随便一个渐变已经超出了这个范围，矛盾又出现了。请尽量将非网页完全色做在图片上，也就是说将非网页安全色做成图片，而将安全色做为代码，这样尽可能使网站拥有美观及快速。如果碰到一个网页设计师的设计作品，从上到下、从内到外、从文字到图片都没有1个安全色，你会怎么做？我昨天就遇到了。难道让我把所有的文字都做成图片？那这个网站还需要更新吗？程序员又该如何做？如果你是这样设计网站的，请改改这种毛病。
四、 象素与羽化的矛盾
象素和羽化应用都非常广泛，但是某些地方却产生了矛盾。举个例子，在一个带有图片背景的表格上，有一个翻转图片的按钮（鼠标经过变换图片），而这个按钮并不需要一定做成方形，为了整体效果，你也许会做成圆角，这个圆角如果做成象素，那么按钮可以做成方形透明背景的GIF，这样不会有任何问题，但作为设计师的你，也许会做成羽化的圆角，问题出现了，这个按钮是一定要用JPG或者非透明背景的GIF了，那么一旦需要更改此表格的背景色，这个按钮的两张图片也需要更改。所以在设计到圆角这种效果的时候，用象素还是用羽化，你要考虑清楚了。
“实践检验真理”，你想成为一个优秀的网页设计师，那么请多去把你的设计作品做成页面，这样你会发现很多设计中的问题。单纯的做一个美观的网页设计并不难，难在如何将美观与实际页面相结合。时间仓促，胡乱写下上面的文字。
作者的Blog：blog.donews.com/iqst
最近蓝色用户体验区有一个关于登录时如何保存cookie才合理的帖子，引发了我的一些思考，本来想直接写：如何设置保存cookie才是合理的，但后来想不如把整个登录页面都写了吧，正好对于这个页面的一些设置，自己也有些想法。
登录页面涉及的主要要素无外乎：
用户名
密码
保存cookie
登录按钮
找回用户名的需求在增加
在互联网中，不可能一个用户名走天下，你想注册的那个名字很可能早已被别人注册了，因此你需要准备你的第二名字甚至是第三名字，比如jack、jack1982、jack19820709.所以说现在的用户基本都拥有3个以上常用的用户名，这便增加了混淆的机率。同时随着互联网用户的增加，用户名长度也随之不断增长（想在门户网站注册一个4位的英文用户名几乎是不可能的），这便增加了用户忘记自己名字的可能性。从定性上来说，找回用户名的需求在不断增加，但从定量上来看，这个量还是占极小的比例，是否有必要增加找回用户名功能，完全取决于网站规模：网站越大，这个需求越强。（Yahoo、Ebay、淘宝都提供找回用户名功能）
把找回密码放在哪里？
“找回密码”功能的必要性，我就不多说了，那么这四个字放在什么位置上更合适些，目前有两种方案：
1、 文字紧跟在密码输入框附近；
2、 文字放在登录框下发；
见下图：
这两种方案代表了两种思路，
相关文章
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程，各位想知道具体制作步骤的使用者们，那么各位就快来看看...2016-09-14
- 有时为了网站安全和版权问题，会对自己写的php源码进行加密，在php加密技术上最常用的是zend公司的zend guard 加密软件，现在我们来图文讲解一下。 下面就简单说说如何...2016-11-25
- ps软件是现在很多人都会使用到的，HSL面板在ps软件中又有着非常独特的作用。这次文章就给大家介绍下ps怎么使用HSL面板，还不知道使用方法的下面一起来看看。  ...2017-07-06
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍 的相关资料,需要的朋友可以参考下...2016-05-14- 许多的朋友对于Plesk控制面板应用不是非常的了解特别是英文版的Plesk控制面板，在这里小编整理了一些关于Plesk控制面板常用的使用方案整理，具体如下。 本文基于Linu...2016-10-10
- ps软件是一款非常不错的图片处理软件，有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影，一起来看看设计倒影的方法。 用ps怎么做倒影最终效果̳...2017-07-06
使用insertAfter()方法在现有元素后添加一个新元素
复制代码 代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newEl...2014-05-31- 这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
- 大概有如下步骤 新建项目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-24jQuery 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- C#注释的一些使用方法浅谈，需要的朋友可以参考一下...2020-06-25
- 一、下载 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
安装和使用percona-toolkit来辅助操作MySQL的基本教程
一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合，用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务，这些任务包括： 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24- 今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路，各位想知道的使用者，那么下面就快来跟着小编一起看一看吧。 给各位Photosho...2016-09-14
- 目前，JSON已经成为最流行的数据交换格式之一，各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》，探讨它的设计思想。今天，我想总结一下PHP语言对它的支持，这是开发互联网应用程序（特别是编写API）必须了解的知识...2015-10-30
- 无限级分类在开发中经常使用，例如：部门结构、文章分类。无限级分类的难点在于“输出”和“查询”，例如 将文章分类输出为<ul>列表形式； 查找分类A下面所有分类包含的文章。1.实现原理 几种常见的实现方法，各有利弊。其中...2015-10-23
- php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25
- 前几天在百度知道里面看到有人问PHP中双冒号::的用法，当时给他的回答比较简洁因为手机打字不大方便！今天突然想起来，所以在这里总结一下我遇到的双冒号::在PHP中使用的情况！双冒号操作符即作用域限定操作符Scope Resoluti...2015-11-08