网页技巧：怎么让别人看不到我的网页代码?
申明：这些方法对一个高手来说是没有什么用处的，所以有矛必有盾，你看着办吧。
1.将以下代码加入到HEML的<body></body>之间
function click() {if (event.button==2) {alert('不许你偷看！');}}document.onmousedown=click
</SCRIPT>
使用框架和滑动门技术进行网页设计
以前看过一些类似的文章，但这些文章文字在理论上阐述得比较多，没有从技术角度来分析和实现滑动门效果，前段时间心血来潮对此作了一番专门的研究，这里就把我的所得奉献给大家。
一、什么是滑动门技术?
如上图，简单地说，滑动门技术就是:当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化，从而区别于该组的其他导航按钮，提示给操作者，当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容。这种效果的一大好处在于，在多导航的页面上能够清晰地反映当前浏览内容隶属于哪个栏目或者哪个类，同时给人以美观、清晰、明了的视觉感受。滑动门技术的主角是被操作的对象，也就是这里被点击的对象，其CSS特性主要是指该导航按钮包括其中的其它元素的属性发生变化，当然，这个按钮的形式可以是BUTTON、A、TD甚至可以是P或者DIV这样的闭合元素，它们的属性主要是指这个元素的边框、背景、字体的颜色、大小、粗细以及外间距和内间距等等，总之，其一切可以把自身的“地位”区别于其它属主的属性都可以被应用起来使用在滑动门技术上。
二、何时使用滑动门技术?
观察发现，很多大型网站的频道导航或者栏目导航都要出现在其内容页面上或者终级页面上，事实上，这些所谓的频道导航或者栏目导航在每个内容页面上都是一样的，也就是说这些内容都是重复的，那么，浏览器客户端每次在装载这些内容的时候实际上都在重复下载相同内容的数据，这不仅浪费了大量的带宽，同时也给内容页面的装载带来很大的影响(因为导航的内容一般是放在页面的开头，页面装载也是按照从上到下的顺序进行转载，如果导航的部分也就是页面的上部没有装载完毕是不会装载页面的下部的。)，因此，传统的网页设计(撇开对搜索引擎的支持)实际上存在很大的弊端和不科学性。当然，如果使用传统的网页设计方法，滑动门技术的应用实际上是没有多大意义的，因为每个页面都有自己的导航部分，只要在这个页面上的导航部分稍微作些动作就可以非常明显地达到滑动门的效果，但这只是一种伪效果，而且方法是这种处理非常低级的。现在我们要做的是让导航组中的导航按钮的属性自动适应当前内容页的显示，也就是说:当点击“新闻”导航按钮之后，出现的内容页面上的“新闻”导航按钮自动显示滑动门效果，而不是事先通过手动对其CSS属性进行过修改，这种效果最好就是用框架页来实现。
当然，也许你会反对框架页，你会说在这个搜索引擎横行的时代使用框架页无疑是自寻死路，然而事实上在你说这句话的时候自己就已经处于弱势了，真正的强者敢于藐视搜索引擎甚至敢于挑战搜索引擎，真正优秀的网页设计师不是最大限度地去迎合搜索引擎的需要而是要最大限度地去迎合用户的需要，也就是说最大限度地去迎合用户体验，这才是我们的网页设计真正要做的。
三、框架网页中使用滑动门技术的好处
虽然很多人反对使用框架来对网页进行布局，事实上，框架对网页的布局有着最好的支持。首先，省去了重复装载不同内容页相同内容的时间和带宽,提高了页面装载速度,给人一种无刷新页面装载的感受。其次，框架与滑动门技术的结合更有利于提高用户体验，在表面上，使用框架与滑动门技术的各个框架页面在用户操作的过程中都在发生变化，对导航框架而言是被操作对象的样式发生变化，对内容页而言是指内容的发生变化，而在深度上，导航框架中的数据还是原来的数据，没有重新从服务器下载。
而今的Ajax技术被很多人视为高新技术的典范，谁都想去附庸风雅，实际上Ajax技术同样是不被搜索引擎支持的，Ajax最明亮的一点就是不重复装载重复的数据和无刷新装载数据，事实上“无刷新”这三个字说得有些勉强，
因为工作需要，昨晚将另一位网页设计师的设计作品生成了页面，折腾了一通宵，我脑细胞成几何倍数减少，完成了工作，不免有些牢骚要发。
我认为网站是为人民服务的，网站的优劣，内容是关键，而设计能排在第二就不错了。一个网站的设计不仅需要的是美观，更需要的是配合内容的编排以及其它更多方面，例如浏览速度及浏览方便性。如果您同意以上观点，请继续看下文。
因为网站的设计不仅需要美观，所以产生了不少矛盾，挑几个主要的矛盾来分析：
一、 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、 文字放在登录框下发；
见下图：
这两种方案代表了两种思路，
如今，互联网越来越走近我们的生活，网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷，涌现出大量优秀精美的网页。大量网络信息的呈现，无非就是通过文本、图像、Flash动画等，其中， 文本是网页中最为重要的设计元素。 对于网页设计初学者而言，了解和掌握网页设计中的文字排版设计就显得尤为重要，下面笔者想谈谈一己之见。
文字的格式化
1.字号、字体、行距字号大小可以用不同的方式来计算，例如磅(Point)或像素(Pixel)。因为以像素技术为基础单位打印时需要转换为磅，所以，建议采用磅为单位。
最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。
网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。例如:粗体字强壮有力，有男性特点，适合机械、建筑业等内容;细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感;字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。
从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。解决问题的办法是:在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。
行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。这主要是出于以下考虑:适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。
除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。
行距可以用行高(line-height)属性来设置，建议以磅或默认行高的百分数为单位。例如:{line-height:20pt｝、{line-height:150%｝。
文字的整体编排页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲，所有的设计元素都可以理解为图形。
1.文字的图形化字体具有两方面的作用:一是实现字意与语义的功能，二是美学效应。所谓文字的图形化，即是强调它的美学效应，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。无论怎样，一切都应围绕如何更出色地实现自己的设计目标。
将文字图形化、意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心。
2.文字的叠置文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、杂音感和叙事感，从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性，但是能造成页面独特的视觉效果。这种不追求易读，而刻意追求“杂音”的表现手法，体现了一种艺术思潮。因而，它不仅大量运用于传统的版式设计，在网页设计中也被广泛采用。
3.标题与正文在进行标题与正文的编排时，可先考虑将正文作双栏、三栏或四栏的编排，再进行标题的置入。将正文分栏，是为了求取页面的空间与弹性，避免通栏的呆板以及标题插入方式的单一性。标题虽是整段或整篇文章的标题，但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理，甚至可以直接插入字群中，以新颖的版式来打破旧有的规律。
4.文字编排的四种基本形式页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。
两端均齐:文字从左端到右端的长度均齐，字群形成方方正正的面，显得端正、严谨、美观。
居中排列:在字距相等的情况下，以页面中心为轴线排列，这种编排方式使文字更加突出，产生对称的形式美感。
左对齐或右对齐:左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线，很容易与图形配合。这种编排方式有松有紧，有虚有实，跳动而飘逸，产生节奏与韵律的形式美感。左对齐符合人们阅读时的习惯，显得自然;右对齐因不太符合阅读习惯而较少采用，但显得新颖。
SyntaxHighlighter.highlight();
相关文章
- 有一种方法，可以不打开网站而直接查看到这个网站的源代码.. 这样可以有效地防止误入恶意网站... 在浏览器地址栏输入： view-source:http://...2016-09-20
- <?php require('path.inc.php'); header('content-Type: text/html; charset=utf-8'); $borough_id = intval($_GET['id']); if(!$borough_id){ echo ' ...2016-11-25
- photoshop软件是一款专业的图像设计软件了，但对电脑的要求也是越高越好的，如果配置一般打开ps会比较慢了，那么photoshop打开很慢怎么办呢，下面来看问题解决办法。 1、...2016-09-14
- 本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考，具体如下：这里演示基于Mootools做的带动画的垂直型菜单，是一个初学者写的，用来学习Mootools的使用有帮助，下载时请注意要将外部引用的mootools...2015-10-23
- 本文实例讲述了JS+CSS实现分类动态选择及移动功能效果代码。分享给大家供大家参考，具体如下：这是一个类似选项卡功能的选择插件，与普通的TAb区别是加入了动画效果，多用于商品类网站，用作商品分类功能，不过其它网站也可以用，...2015-10-21
- 本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考，具体如下：这是一款自定义的简单点的网页软键盘，没有使用任何控件，仅是为了练习JavaScript编写水平，安全性方面没有过多考虑，有顾虑的可以不用，目的是学...2015-11-08
- php 取除连续空格与换行代码，这些我们都用到str_replace与正则函数 第一种： $content=str_replace("n","",$content); echo $content; 第二种： $content=preg_replac...2016-11-25
- JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，我们在Ajax项目中，遇到ajax异步获取数据出错怎么办，我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
- php简单用户登陆程序代码 这些教程很对初学者来讲是很有用的哦，这款就下面这一点点代码了哦。 <center> <p> </p> <p> </p> <form name="form1...2016-11-25
- 公司一些wordpress网站由于下载的插件存在恶意代码，导致整个服务器所有网站PHP文件都存在恶意代码，就写了个简单的脚本清除。恶意代码示例...2015-10-23
- 本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下：这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，现在网上还有很多还在用这个特效的呢，代码分享给大家吧。运行效果截图如下：在线演...2015-10-30
- 其实挺简单的就是if(navigator.userAgent.indexOf('UCBrowser') > -1) {alert("uc浏览器");}else｛//不是uc浏览器执行的操作｝如果想测试某个浏览器的特征可以通过如下方法获取JS获取浏览器信息 浏览器代码名称：navigator...2015-11-08
- 一、日期减去天数等于第二个日期function cc(dd,dadd){//可以加上错误处理var a = new Date(dd)a = a.valueOf()a = a - dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "年" + (a.getMonth() +...2015-11-08
- 微信支付，即便交了保证金，你还是处理测试阶段，不能正式发布。必须到你通过程序测试提交订单、发货通知等数据到微信的系统中，才能申请发布。然后，因为在微信中是通过JS方式调用API，必须在微信后台设置支付授权目录，而且要到...2014-05-31
- 目前，JSON已经成为最流行的数据交换格式之一，各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》，探讨它的设计思想。今天，我想总结一下PHP语言对它的支持，这是开发互联网应用程序（特别是编写API）必须了解的知识...2015-10-30
- 本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考，具体如下：1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24
- 通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识，对sublime text3技巧相关知识感兴趣的朋友一起学习吧...2015-12-24
- 当来访者浏览器语言是中文就进入中文版面，国外的用户默认浏览器不是中文的就跳转英文页面。 <?php $lan = substr( $HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
- 小编分享了一段简单的php中文转拼音的实现代码，代码简单易懂，适合初学php的同学参考学习。 代码如下 复制代码 <?phpfunction Pinyin($_String...2017-07-06
- 刷票行为，一直以来都是个难题，无法从根本上防止。但是我们可以尽量减少刷票的伤害，比如：通过人为增加的逻辑限制。基于 PHP，下面介绍防刷票的一些技巧：1、使用CURL进行信息伪造$ch = curl_init(); curl_setopt($ch, CURLOP...2015-11-24