网站登录页面设计

url构成(或者叫url规则)越简单越平常,百度处理起来越顺畅,越容易正确生效。有站长反应:跳转适配的PC页和移动页,内容可以做到一一对应,通过移动适配工具提交了规则适配,但一直无法正确生效。示例链接:http://www.123456.cn/zjj/teacher/p1ll111001示例正则式:http://www.123456.cn/(\w+)/teacher/p1ll(\d+)——http://m.123456.cn/teacher/${1}/s${2}在检查了页面对应的确无误的情况下,请工程师查看后,得出如下结论:移动适配部门在计算PC站点的pattern(规则)时,分割符没有考虑ll,导致计算出的数据有问题。简单说,此站点每个URL中都出现的、极少有网站使用的ll干扰了适配计算,导致适配无法正确生效。工程师解释说,“在考虑分隔符时,出于成本的考虑,只顾及到了常见的url分隔符,像ll这种非常罕见的,暂时没有考虑,后续升级时再统一安排。确实,单从这个case讲是百度的一个badcase。但大家应该都知道,世上没有十全十美的策略,任何一个接近完美的策略都是不断迭代的结果。在此,建议大家在搭建网站结构、制作URL时,尽量避开非主流设计,追求简单美即可。

1、界面元素的需求在Web前端开发中，简单这个原则是很重要的。在任何时候，你在屏幕上显示越多的控制，您的用户将不得不花费的时间去搞清楚如何使用界面。当选择变少时，可用的功能变得更加明显更容易被发现。简化的界面虽然是不容易的，尤其是如果你不想限制应用程序的功能的时候。当你点击 Kontain 搜索框的搜索链接时，会出现一个类似于下拉菜单的层。所以，如果您需要来缩小搜索范围，您可以选择菜单中你所需要的类型。这些选项的聚合简化了搜索框。隐藏或者掩盖高级功能 是使事情更加简单的一种方法。找出最常用的功能，并且把剩下的藏起来。你可以用弹出式菜单和操作来做这件事，这在桌面软件中很常见。例如，如果您的搜索栏拥有高级过滤器，把它们放在尾部的一个特别的下拉菜单中。如果用户需要使用这些过滤器，他们只需几下点击便可以开启这些功能。决定该保留什么隐藏什么不是一个简单的任务，也会取决于重要性和操作时的频繁程度。当你点击 CollabFinder 的搜索链接时你不需要打开不同的页面，相反，搜索框的控制菜单下拉下来，允许你能够直接开始搜索。2、专门操作根据情况选择合适的界面控件 是很重要的。不同情况下可以用不同的方式处理，而且某些控件会比其他控件能够更好地完成他们的目标工作。Backpack 里有一个紧凑的日历和时间选择器选择提醒日期。例如，你可以通过一个下拉列表来选择年月日，但是和日历选择器相比下拉列表不是非常高效的，在日历里你可以直接通过点击选择你想要的某一天。日历选择器也会让你更容易看到日期、周期和月份（特别是工作日和休息日），因此能够让你比用简单的下拉列表更快地做出更明智的选择 。3、禁用按下按钮在web应用程序的表单问题中有一个就是提交过程，非常简单的表单，如果你快速地点击两次或者次“提交”按钮，这个表单会被多次提交。这显示是个问题，因为它会重复创建相同的项目 。防止重复提交的不是很难，而且对于大多数Web应用程序来说做到这一点是非常必要的。它有两层维护：客户端和服务器端 。我们不会通过服务器端维护是因为这将取决于您使用的编程语言和你的后端架构。基本上你应该做的就是在提交过程中添加一个检测机制，去检查被提交的内容是否重复，并且是否需要阻止提交。在 Yammer 上，当你的新消息被提交之后，“更新”按钮将被禁止。客户端则是简单得多。所有您需要做的就是在点击之后禁用“提交”按钮 。最简单的方法就是为“提交”按钮添加一段JavaScript，如下所示：<input type=”submit” value=”Submit” onclick=”this.disabled=true” />当然，我们会建议您同时还对服务器端进行检查，以确保重复不会获得通过。4、模拟窗口的阴影在弹出菜单和窗口下的阴影不止是看起来很漂亮这么简单。它们帮助菜单或者窗口通过强调从背景中脱颖而出 。它们还通过周围暗色调区域来屏蔽掉背景内容的噪音。这种技术来源于传统的桌面软件，帮助用户把他们的焦点放在出现的窗口上。由于大多数情景窗口是不容易从桌面程序中辨识出来，所以阴影帮助他们更接近于读者，因为感觉上窗口似乎是三维地浮在其他页面上。Digg 的登录窗口有一个厚厚的阴影围绕它来屏蔽网页噪音。5、空白状态告诉你要做什么当你设计一个Web应用程序时，你不仅需要通过样本数据去测试这个程序，而且最重要的是当什么内容都没有的情况下，你要确保它看起来不错而且是有帮助的 。当在页面或者查询结果没有信息时，告诉你如何才能处理这些空白区域是一条很有帮助的信息。例如，一个项目管理应用程序的网页可能会列出用户的项目，但如果没有项目，你可以提供一个创建项目的链接。即使已经有创建项目的按钮存在在页面上，但一点额外的帮助并不会有损失 。Campaign Monitor 会在你开始建立一个邮件广告时指导你正确的方向。这种技术实际上鼓励用户试用服务，并在注册之后直接使用这项服务。通过应用程序的单步指导用户能够帮助他/她去了解程序提供的优势以及是否有用。同样重要的是把最重要的操作呈现给用户并且只有这些而已——把所有功能都呈现出来并没有意义。请记住，用户通常希望得到一些或多或少提供给他们的具体构思，但是他们不想要直接跳到详细说明去——他们既没有时间也没有兴趣。通过空白状态去激励用户和行为，可以大大减少“辍学”，并且帮助您的潜在客户，更好地了解该系统如何工作。6、按钮的按下状态许多Web应用程序有自定义的按钮样式。这些都是用自定义图片作为他们背景的锚点或输入按钮。默认输入按钮可能不适合在一些情况下，以及文字链接有时过于渺小。目前的挑战是，当你把你的链接弄得看上去像按钮时，它们的操作也应该和按钮一样——这包括当用户点击它们时会有被“按动”的效果 。这不是一个纯粹的视觉调整。提供即时反馈给用户将使应用程序感觉更有响应性，并且给用户带来更接近于桌面软件的的用户体验。你可以通过CSS为按钮增加按下的效果。Highrise 的按钮实际上是在你点击的时候显示一个按下的效果，给用户一个非常舒适的反馈感觉。7、在登陆页面提供注册的连接一些没有注册你的应用程序的用户将不可避免地停在你的登录页面上。他们想要使用你的应用程序，但是却不能立刻找到注册页面。可能他们已经试过访问一个只提供给注册用户的特定页面。Goplan 的登陆页面上有个漂亮的彩色按钮指向注册页面。在你的登陆页面上放上注册的连接 会让一切容易很多。如果他们没有账户，他们不应该去寻找注册页面。我们研究证实：在注册页面，有18%的网站有登录表单或者链接到登陆页面的连接。8、上下文关联导航思考什么是用户期望看到的以及在每个给与的情景 中他们需要什么是很重要的。你不需要在每个地方显示同样的导航控件因为在用户可能不是在每个环境中都需要它们。上下文关联控件的最佳范例之一是最近在微软office 2007中的界面，在它的界面中默认的工具条被带装控件代替。每个标签上有不同控件相关的特定操作，无论是图形编辑，校对或者简单书面形式。web应用程序也可以受益于这种上下文关联的控件，因为这些控件通过只显示用户需要的内容来帮助整洁界面，并非显示所有的内容 。Lighthouse 提供一个熟悉的标签导航菜单，但是它在标签正下方有二级菜单。这个层级只显示当前项目相关活动的部分。9、更加重视主要功能不是所有控件拥有相同的重要性 。例如，在屏幕上创建一个新项目，你可以有两个按钮：“创建”和“取消”。这个“创建”的链接更重要一些，因为是用户大部分时间会去用的操作。只有少数才会去取消。所以如果这些控件挨着排放，你可能不会想要给于相同的重视。这个 Lighhouse 的“创建任务”按钮。你可以看到“取消”链接在旁边以纯文本格式。这个按钮不仅具有更重要的操作而且会有较大的点击区域并且容易去点击。为了让用户的重点转向“创建”链接，我们可以简单地利用不同的样式或者控件形式。一些应用程序的表单输入按钮用来作为创建动作，并且把取消操作作为一个文字连接。这样不仅给与创建按钮的点击区域 ，而且也帮助那些在搜寻内容的用户获得更好的焦点目光 。10、嵌入式视频当图片和文字作为一种很大的方式去和你的用户沟通并且教育你的用户有关你程序的特点时，如果你有资源去投入，视频甚至可以成为更好的选择。视频在最近几年的web应用上已被越来越受欢迎。对于Web应用程序，视频通常作为展示产品特点的示范影片 被用于市场网站中。但是这不是使用视频的唯一方法。GoodBarry 特点是在头版有示范视频去展示产品，它也通过利用示范影片去教育用户如何开始使用。一些Web应用程序使用视频嵌入在程序本身教导用户如果使用某些特定功能。视频是一种非常好的方式去快速展示你产品是被怎么使用的，因为它更容易描述超过一页文字的内容，也清楚得多，因为观众可以清楚地看到该怎么办。

中国农业银行官方网站：http://www.abchina.com/中国农业银行简介：1.中国农业银行（Agricultural Bank of China，简称ABC，农行）是中国大型上市银行，中国五大银行之一。2.最初成立于1951年(辛卯年)，是新中国成立的第一家国有商业银行，也是中国金融体系的重要组成部分，总行设在北京。3.数年来，中国农行一直位居世界五百强企业之列，在“全球银行1000强”中排名前7位，穆迪信用评级为A1。4.2009年，中国农行由国有独资商业银行整体改制为现代化股份制商业银行，并在2010年完成“A+H”两地上市，总市值位列全球上市银行第五位。

一般的店铺会PS已经足够了，常用的方法涉及到的如钢笔工具（路径）、加深工具、减淡工具、涂抹工具、调色方法（如色彩平衡、可选颜色、色阶、色相/饱和度、阴影、高光）等一系列工具和功能，希望可以帮到你。

其实也没有硬性规定，但是为了兼容大多数浏览器一般是设置960px，随着现在浏览器分辨率的变化，已开始向着1000px,1200px宽度发展，例如淘宝(1000px）京东商城（1200px）。如果需要兼容不同浏览器尺寸，现在比较流行的做法是做成响应式的，即根据不同分辨率显示不同的尺寸，工作量也就随之增加了。貌似国内的大网站也没有使用。网页设计的工具网页设计软件： FrontPage（简单易用，且高度符合IE浏览器支持设计）；DreamWave（功能强大，设计成品支持众多浏览器）。图像处理软件：Photoshop 或Fireworks ；动画制作：Flash MX 。知识储备：基本网页常识；HTML知识（很简单，早期只用此制作网页，用记事本即可编辑，用浏览器打开后呈现网页内容）；CSS知识（级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。通过设立样式表，可以统一地控制HTML中各标志的显示属性。

背景最好是能够做到自动延伸，现在的显示器是越来越大，分辨率也慢慢的变大了，现在用1600*900分辨率的也不少，我的就是，当然也有人用1280*768、1024*768等，所以网页设计的背景一般是不会设计成固定尺寸的，你可以做成可循环平铺的图片或者渐变颜色，直接是一种颜色那就更方便了； 其实网页设计一般所说的尺寸指的是主体框架的尺寸，就拿现在这个百度知道的页面距离，中间的主体部分无论是浏览器怎么伸展，主体内容的宽度是保持不变的，我查看了一下css代码，这个主体框架的宽度是980px 你设计的时候把主体部分设置成980-1000px就差不多了，毕竟现在使用1024*768分辨率以下的人已经毕竟少了

　　Web上的用户登录功能应该是最基本的功能了，可是在我看过一些站点的用户登录功能后，我觉得很有必要写一篇文章教大家怎么来做用户登录功能。下面的文章告诉大家这个功能可能并没有你所想像的那么简单，这是一个关系到用户安全的功能，希望大家能从下面的文章中能知道什么样的方法才是一个好的用户登录功能。　　用户名和口令　　首先，我们先来说说用户名和口令的事。这并不是本站第一次谈论这个事了。如何管理自己的口令让你知道怎么管理自己的口令，破解你的口令让你知道在现代这样速度的计算速度下，用穷举法破解你的口令可能会是一件很轻松的事。在这里我想告诉从开发者的角度上来做设计这个用户名和口令的事。下面一几件规则：　　限制用户输入一些非常容易被破解的口令。如什么qwert，123456, password之类，就像twitter限制用户的口令一样做一个口令的黑名单。另外，你可以限制用户口令的长度，是否有大小写，是否有数字，你可以用你的程序做一下校验。当然，这可能会让用户感到很不爽，所以，现在很多网站都提供了UX让用户知道他的口令强度是什么样的（比如这个有趣的UX），这样可以让用户有一个选择，目的就是告诉用户——要想安全，先把口令设得好一点。　　千万不要明文保存用户的口令。正如如何管理自己的口令所说的一样，很多时候，用户都会用相同的ID相同的口令来登录很多网站。所以，如果你的网站明文保存的话，那么，如果你的数据被你的不良员工流传出去那对用户是灾难性的。所以，用户的口令一定要加密保存，最好是用不可逆的加密，如MD5或是SHA1之类的有hash算法的不可逆的加密算法。CSDN曾明文保存过用户的口令。（另，对于国内公司的品行以及有关部门的管理方式，我不敢保证国内网站以加密的方式保存你的口令。我觉得，做为一个有良知的人，我们应该加密保存用户的口令）　　是否让浏览器保存口令。我们有N多的方法可以不让浏览器保存用户名和口令。但是这可能对用户来说很不爽。因为在真实世界里谁也记得不住那么多的口令。很多用户可能会使用一些密码管理工具来保存密码，浏览器只是其中一种。是否让浏览器保存这个需要你做决定，重点是看一下你的系统的安全级别是否要求比较高，如果是的话，则不要让浏览器保存密码，并在网站明显的位置告诉用户——保存口令最安全的地方只有你的大脑。　　口令在网上的传输。因为HTTP是明文协议，所以，用户名和口令在网上也是明文发送的，这个很不安全。你可以看看这篇文章你就明白了。要做到加密传输就必需使用HTTPS协议。但是，在中国还是有很多网站的Web登录方式还在使用ActiveX控件，这可能成为IE6还大量存在的原因。我通常理解为这些ActiveX控件是为了反键盘记录程序的。不过，我依然觉ActiveX控件不应该存在，因为在国外的众多安全很重要的站点上都看不到ActiveX的控件的身影。　　用户登录状态　　首先，我想告诉大家的是，因为HTTP是无状态的协议，也就是说，这个协议是无法记录用户访问状态的，其每次请求都是独立的无关联的，一笔是一笔。而我们的网站都是设计成多个页面的，所在页面跳转过程中我们需要知道用户的状态，尤其是用户登录的状态，这样我们在页面跳转后我们才知道是否可以让用户有权限来操作一些功能或是查看一些数据。　　所以，我们每个页面都需要对用户的身份进行认证。当然，我们不可能让用户在每个页面上输入用户名和口令，这会让用户觉得我们的网站相当的SB。为了实现这一功能，用得最多的技术就是浏览器的cookie，我们会把用户登录的信息存放在客户端的cookie里，这样，我们每个页面都从这个cookie里获得用户是否登录的信息，从而达到记录状态，验证用户的目的。但是，你真的会用cookie吗？下面是使用cookie的一些原则。　　千万不要在cookie中存放用户的密码。加密的密码都不行。因为这个密码可以被人获取并尝试离线穷举。所以，你一定不能把用户的密码保存在cookie中。我看到太多的站点这么干了。　　正确设计“记住密码”。这个功能简直就是一个安全隐患，我觉得并不是所有的程序员都知道怎么设计这个事。一般的设计是——一时用户勾选了这个功能，系统会生成一个cookie，cookie包括用户名和一个固定的散列值，这个固定的散列值一直使用。这样，你就可以在所有的设备和客户上都可以登录，而且可以有多个用户同时登录。这个并不是很安全。下面是一些更为安全的方法供你参考：　　（——更新 2011/08/26，原文中有些小错误，并且说的不清楚，重新调整了一下——）　　1）在cookie中，保存三个东西——用户名，登录序列，登录token。　　用户名：明文存放。　　登录序列：一个被MD5散列过的随机数，仅当强制用户输入口令时更新（如：用户修改了口令）。　　登录token：一个被MD5散列过的随机数，仅一个登录session内有效，新的登录session会更新它。　　2）上述三个东西会存在服务器上，服务器的验证用户需要验证客户端cookie里的这三个事。　　3）这样的设计会有什么样的效果，会有下面的效果，　　a）登录token是单实例登录。意思就是一个用户只能有一个登录实例。　　b）登录序列是用来做盗用行为检测的。如果用户的cookie被盗后，盗用者使用这个cookie访问网站时，我们的系统是以为是合法用户，然后更新“登录token”，而真正的用户回来访问时，系统发现只有“用户名”和“登录序列”相同，但是“登录token”不对，这样的话，系统就知道，这个用户可能出现了被盗用的情况，于是，系统可以清除并更改登录序列 和 登录token，这样就可以令所有的cookie失效，并要求用户输入口令。并给警告用户系统安全。　　4）当然，上述这样的设计还是会有一些问题，比如：同一用户的不同设备登录，甚至在同一个设备上使用不同的浏览器保登录。一个设备会让另一个设备的登录token和登录序列失效，从而让其它设备和浏览器需要重新登录，并会造成cookie被盗用的假象。所以，你在服务器服还需要考虑- IP 地址，　　a）如果以口令方式登录，我们无需更新服务器的“登录序列”和 “登录token”（但需要更新cookie）。因为我们认为口令只有真正的用户知道。　　b）如果 IP相同 ，那么，我们无需更新服务器的“登录序列”和 “登录token”（但需要更新cookie）。因为我们认为是同一用户有同一IP（当然，同一个局域网里也有同一IP，但我们认为这个局域网是用户可以控制的。网吧内并不推荐使用这一功能）。　　c）如果（IP不同 &&没有用口令登录），那么，“登录token”就会在多个IP间发生变化（登录token在两个或多个ip间被来来回回的变换），当在一定时间内达到一定次数后，系统才会真正觉得被盗用的可能性很高，此时系统在后台清除“登录序列”和“登录token“，让Cookie失效，强制用户输入口令（或是要求用户更改口令），以保证多台设备上的cookie一致。　　不要让cookie有权限访问所有的操作。否则就是XSS攻击，这个功能请参看新浪微博的XSS攻击。下面的这些功能一定要用户输入口令：　　1）修改口令。　　2）修改电子邮件。（电子邮件通过用来找回用户密码）　　3）用户的隐私信息。　　4）用户消费功能。　　权衡Cookie的过期时间。如果是永不过期，会有很不错的用户体验，但是这也会让用户很快就忘了登录密码。如果设置上过期期限，比如2周，一个月，那么可能会好一点，但是2周和一个月后，用户依然会忘了密码。尤其是用户在一些公共电脑上，如果保存了永久cookie的话，等于泄露了帐号。所以，对于cookie的过期时间我们还需要权衡。　　找回口令的功能　　找回口令的功能一定要提供。但是很多朋友并不知道怎么来设计这个功能。我们有很多找回口令的设计，下面我逐个点评一下。　　千万不要使用安全问答。事实证明，这个环节很烦人，而且用户并不能很好的设置安全问答。什么，我的生日啊，我母亲的生日，等等。因为今天的互联网和以前不一样了，因为SNS，今天的互联比以前更真实了，我可以上facebook，开心，人人网，LinkedIn查到你的很多的真实的信息。通过这些信息我可以使用安全问答来重设你的口令。这里需要说一下 Facebook，Facebook的安全问答很强大，还要你通过照片认人，呵呵。　　不要重置用户的密码。因为这有可能让用户的密码遭到恶意攻击。当然，你要发个邮件给用户让其确认，用户点击邮件中的一个链接，你再重置。我并不推荐这样的方法，因为用户一般都会用笔记下来这个很难记的口令，然后登录系统，因为登录系统时使用了“记住密码”的功能，所以导致用户不会去修改密码，从而要么导到被写下来的密码被人盗取，要么又忘记了密码。　　好一点的做法——通过邮件自行重置。当用户申请找回口令功能的时候，系统生成一个MD5唯一的随机字串（可通过UID+IP+timestamp+随机数），放在数据库中，然后设置上时限（比如1小时内），给用户发一个邮件，这个连接中包含那个MD5的字串的链接，用户通过点击那个链接来自己重新设置新的口令。　　更好一点的做法——多重认证。比如：通过手机+邮件的方式让用户输入验证码。手机+邮件可能还不把握，因为手机要能会丢了，而我的手机可以访问我的邮箱。所以，使用U盾，SecureID（一个会变化的6位数token），或是通过人工的方式核实用户身份。当然，这主要看你的系统的安全级别了。　　口令探测防守　　使用验证码。验证码是后台随机产生的一个短暂的验证码，这个验证码一般是一个计算机很难识别的图片。这样就可以防止以程序的方式来尝试用户的口令。事实证明，这是最简单也最有效的方式。当然，总是让用户输入那些肉眼都看不清的验证码的用户体验不好，所以，可以折中一下。比如Google，当他发现一个IP地址发出大量的搜索后，其会要求你输入验证码。当他发现同一个IP注册了3个以上的gmail邮箱后，他需要给你发短信方式或是电话方式的验证码。　　用户口令失败次数。调置口令失败的上限，如果失败过多，则把帐号锁了，需要用户以找回口令的方式来重新激活帐号。但是，这个功能可能会被恶意人使用。最好的方法是，增加其尝试的时间成本（以前的这篇文章说过一个增加时间成本的解密算法）。如，两次口令尝试的间隔是5秒钟。三次以上错误，帐号被临时锁上30秒，5次以上帐号被锁1分钟，10次以上错误帐号被锁4小时……　　系统全局防守。上述的防守只针对某一个别用户。恶意者们深知这一点，所以，他们一般会动用“僵尸网络”轮着尝试一堆用户的口令，所以上述的那种方法可能还不够好。我们需要在系统全局域上监控所有的口令失败的次数。当然，这个需要我们平时没有受到攻击时的数据做为支持。比如你的系统，平均每天有5000次的口令错误的事件，那么你可以认为，当口令错误大幅超过这个数后，而且时间相对集中，就说明有黑客攻击。这个时候你怎么办？一般最常见使用的方法是让所有的用户输错口令后再次尝试的时间成本增加。　　最后，再说一下，关于用户登录，使用第三方的 OAuth 和 OpenID 也不失为一个很不错的选择。　　

说的不太明白，首先要制作用户登录是使用表单实现的,最基本的要有四个页面可以实现，第一个页面时登录页面，第二个是登录成功的页面，第三个是登录失败的页面，第四个页面是验证的页面，在登陆页面上使用form action=“验证的页面”在验证的页面上使用 session获取对象，具体方法<body> <% Session("name")=request.form("name") Session("password")=request.form("pass") If Session("name")="王明"and Session("password")="123" Then Response.Redirect"chonggong.asp" Else Response.Redirect"shibai.asp" End If %> </body>这与数据库连接可以在Dreamweaver中添加实现。有什么不明白的给我回话。希望我说的对你有所帮助 非常感谢，容我多问一句。有这方面的学习资料可以推荐一下不？数据库PHP什么的怎么写代码还不太会，有视频或者文字教程不？Dreamweaver里都可以实现这些功能吗？ 这些都可以在DW上都可以实现的，在网上有很多这类型的视频，你可以去查一下。