有关网页的制作的实用和美观
前台网页的实用不仅对于服务器端软件的开发重要，而且对于用户的可操作的流畅性和易用性也很重要。首先前台的网页的实用对于服务器软件而言：就是它们之间的交互参数。服务器后台软件将依照参数来设定相关的接口。只有把这些参数有业务逻辑的形式组合起来，才能避免功能的分化，甚至是凌乱；才能使服务器软件的按功能模块来实现，而不是表面看有很多功能，其实由大量功能之间的冗余。这样对于用户在功能上的请求也方便多了，从而达到了实用的效果。
前台网页的美观对于用户来说是很重要的，爱美之心人皆有之，好的网页能起到赏心悦目的作用。并不是要在网页用大量的色彩，也不需要大量的javascript，而是应该根据网页的性质选定一种网页的风格，然后添加适当有特色的动态功能。同时要考虑到用户的显示器，浏览器等，争取使网页具有通用性！
以上是我个人从服务器软件开发角度谈网页的实用和美观的自我总结，希望对页面开发人员有所帮助。
分辨率，什么是分辨率，网页分辨率设置
大家一定在设计网面时，苦恼过不同分辨率下显示的问题，不论你喜欢打表格，还是运用图层，或者利用框架以及帧『内联帧』，当你在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坐标】所以由于客户端分辨率的设置不同，显示时就会出现错位问题。
我的方法是：利用子层与父层的关系解决，具体细节请看下面的代码：
<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>
在Web开发中经常犯的一个错误是为设计者而设计站点，所考虑的是设计者的需求而不是实际用户的需求。如果设计者忽略用户的需求，进程模型就不能保障一个站点的质量。一定要记住Web设计的重要原则：
规则：设计者不是用户。
设计者所理解的并不是用户所理解的。作为一个设计者，你拥有Web站点的直接知识。你知道信息在哪里以及如何安装插入件。你有最优的屏幕分辨率及浏览器的设置等等。你必须接受以下的事实，很多用户并不像你一样理解你认真设计的站点，他们的兴趣甚至也与你不尽相同。 考虑到用户的兴趣和期望的重要性，表面上直接让用户以他们希望的方式进行设计仿佛很合适。但如果你考虑到了另一个基本原则，那就不是一个好主意：
规则：用户不是设计者。
并不是任何人是或必须是一个Web设计者。就像指望电影观众根据观看的电影去指导一部电影一样，仅因为用户浏览了众多站点而指望他们能够设计站点的想法是愚蠢的。用户经常有很多不现实的关于站点的需求和期望。用户也不会认真的单独考虑Web站点的某个部分。总之，用户不会像设计者一样对Web有综合的理解。这就是说，成功且易用的Web站点设计的关键是尽量从用户的角度去思考。以用户为中心的设计要求把用户放在第一位。但我们又能就用户谈些什么呢？是否存在典型的用户呢？是否存在一个有代表性的因特网用户，而我们应该为他设计站点？可能不会，但我们在设计站点时应该考虑一般的特性，如响应时间、记忆和其他一些认知与物理能力。对认知科学的回顾有助于我们理解用户的基本能力，这会在第3章里进一步讨论。记住，用户具有共性时也具有个性。对一个用户看起来很简单的事情对另一个用户则可能很困难。为具有共性的用户设计站点有可能 不能满足所有用户的要求。能力强的用户可能觉得站点的限制太多，而新手则会觉得它太困难。用户是一群具有某些共同能力和特征的个体。站点在专注于共性时，也应该考虑个性，正如下面的原则所指出的。
规则：为用户的共性设计，但应该考虑差异。
效益和可用性
好的Web站点对用户是有用的。有效性包括两个方面的意思：有用性和可用性。有用性指的是站点潜在的满足用户需求的功能。可用性是指用户能够通过站点的操作实现特定目标。例如，考虑一个提供在线银行服务的站点。如果它提供诸如收支平衡检查、转账、资金支付等用户期望的能力，就可以说它是有用的。然而，站点也可能完全失败，它提供的功能可能令人困惑而无法得到有效的使用。很明显，如果一个站点不能恰当地运作，或者设计得非常糟糕甚至存在错误，它就不是一个好站点。可用站点的效率会非常高，容易学习，在实现用户的目标时令人满意而不会有错误。
1.7 外观问题
尽管一个好的站点必须有好的功能和简单的导航系统，但这些特征并不能马上得到承认。站点的外观经常是最先被注意到的。尽管好的品味是不可能强迫出来的，几乎也不可能预测，但我们知道，好的Web设计与用户对站点外观的品味直接相关，第一印象有赖于在线的站点。用户不需要任何预先的知识，就可能主观地认为第二个站点（前端的）比第一个更值得浏览。站点的外观会影响用户对站点的看法。外观好的站点会主观地被认为比外观差的站点好，至少第一眼是这样。因此，有如下规则：
规则：外观会显著地影响用户开始时对站点的价值判断。
注意外观在获得用户信任方面可能也是重要的，这一点在在线交易方面非常至关重要。在对每个站点一无所知的情况下，考虑一下您会选择哪个站点进行交易。记住，信任不仅仅与站点相关，并且很大程度上受第三方认可的初始印象或者公司声誉的影响。
综合印象值
外观开始时很重要，但用户继续使用时，会逐渐减少对外观的关注。当一个用户离开某个站点时，他会有一个综合的印象—对站点访问是否成功的一般感觉。一般来说，这种感觉有可能是正面的、负面的或中性的。考虑一个用户讨厌某个站点的案例。为什么造成这种情况？用户是否发现站点很难使用？站点访问速度是否很慢？站点是否运行得很糟糕或经常出错？站点是否设计得很糟糕？以上任何一种原因都可能导致用户在离开时对站点有负面的评价。可能一开始受到外观的影响较大，最后的印象却来自内容、外观、技术以及可用性的综合。综合印象值可能很大程度上与用户在访问过程中是否达到目的相关。这样，虽然外观在第一印象中占主导性的作用，最终印象的产生却很复杂，可以综述为以下规则：
规则：站点的综合印象值受外观、内容、技术、可用性以及用户满足程度的综合影响。
尽管综合印象值不只是仅仅包括用户对站点的外观评价，但这并不会降低Web外观的重要性，颜色、背景、文本的使用、图像以及页面样式都能用来提高页面的表现力。
撇开视觉有障碍和计算机环境不支持图形浏览的用户不谈，视觉效果好的站点注定更加有趣。不要专注于站点的特定外观或那些可以下载的页面，仅仅在抽象的层次上考虑哪些更令人愉悦。
网页的版式设计---网页的排版与布局
很多朋友都想向我学习如何做网页，我知道他们的意思就是说要想向我学习如何用做网页的软件，如dreamweaver、flash、firework、photoshop等等，这些纯技术的东西我不想多谈，因为如今技术的发展一日千里，就是这种应用软件也是发展升级得非常的快。
今天的很多认为是较难实现的功能也许经过软件升级之后就可以很方便的实现。我想强调的是关于网页排版布局方面的必要的知识，很多初学者都忽视这方面，以为技术就能代表一切，能够知道怎么用这个做网页的工具就能够做出质量较高的网页来。其实不然，因为软件知识只是一种工具，就像你有了笔，但不一定能作出好的文章来一样。很多人对技术很熟练但是做出来的网页却通常是照搬人家的东西，并没有体现做网页的水平的提高。
网络时代，人本身的因素是相当重要的，只有拥有这方面的一定的审美知识，才有机会做好网页，而真正技术上的东西是不重要的，毕竟技术的发展是使每个使用者使用更加的方便，发展的趋势是让软件成为“傻瓜型”。终极目标就是用鼠标一点就能够使所有的网页完成。所以，我们应该培养自己的审美修养才是最重要的。而真正的体现是在具体的网页的布局上，网页的设计呈现出多样化的趋势，但是万变不离其宗，我想认真的分析一下，可以得到一些有用的东西，在我们应用的时候作为参考。
虽然网页设计拥有传统的媒体的不具有的优势，例如是能够声音、图片、文字、动画相结合，营造一个富有生气的独特世界，同时它拥有极强交互性，使使用者能够参与其中，同设计者相交流。但是最基本的模式还是平面设计的内容，所以平面设计就要考虑形式美的内容，其中网页的排版布局就属于形式的内容，那什么形式呢?
形。原形，包括原始形，或称自然形。
式。许慎之《说文解字》说:“法也”。它包括“法则”、“法度”、“法制”、有“用法”的含义，也就是一种“格律”。
中国古典建筑形式就称为“法式”。“形”是自然的，“式”是人为的。“形式”是将自然形态经过人为改造而称为一种新的美的形式。自然形态只有通过人的改造，才能起更大的作用，由于这个原因，就形成了今天的审美形态，形象是客观的，形式则是依据客观的规律进行主观的创造。如果没有主观的创造，就没有艺术，也不可能有今天的一切，当然对于实际的网页制作来说，这也是最基本的，就是主观的创造，因为这是一个网页的灵魂，假如没有自己的主观创造，就只能拾人牙慧? 复别人丢掉不用的东西，是毫无意义的。所以现在强调网页设计的创造，表现在对页面的布局上，具体说就是体现在页面的形式美方面。就是通过页面的合理安排，例如文字的条理清楚、流畅、整体，使形式美得到体现。
从网站内容上来进行排版
现在的网站通常具有的内容是文字、图片、符号、动画、按钮等，其中文字占很大的比重，因为现在网络基本上还是以传送信息为主，而用文字还是非常有效率的一种方式，其次是图片，加入图片不但可以是页面更加的活跃，而且可以形象的说明问题。所以按照目前网页的设计，可以有针对性的对这些内容作一些调整，可以得出一些可以借鉴的东西……
从网页的布局形式上来看
按照平面设计的形式来看，整个页面可以分为几个部分，每个部分有不同的功能，也能体现不同的形式，具体看来就是上边、左边、下边、右边、中间、看似无奇，自身却有许多独特的地方，就说划分的大小吧!中间的部分一般是最大的，因为它承载着主要的信息，使用者主要就是看中间这个部分的内容，有些网站也为了出新意把整个页面进行任意划分，特别是个人网页，例如把整个页面平分为左右两个部分，但是这样会让人不着重点，还有的框架用得太多，影响了页面的整体性……
综合起来看
内容和形式即具体的网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计，所以，不能单独考虑网页的内容的排版，内容和形式即具体的网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计，所以，不能单独考虑网页的内容的排版，以为只要能够把具体内容清晰流畅的放到网站上就行了，造成整个页面的形式感很差，这样严重影响使用者的心情……
现在专业性的网站越来越多，许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事，所以大家都想保护自己独创的作品，为自己的网页上把锁，今天就让我带大家了解一下如何给我们的网页加上一把密码锁。
一、常用JavaScript密码锁
1. 了解javascript
JavaScript是一种新的网页描述语言，是由Sun公司以及网景Netscape公司开发的，此一语言可以被嵌入HTML的文件之中，使用它可以让你设计交互性的网页内容。
2. javascript特点
使用javascript非常简单，只是一小段代码，就可以让网页发生千奇百怪的效果，而且使用javascript来加密的方法是网络中加密最常用的方法。
3. 使用javascript加密
使用javascript加密最简单的结果就是让浏览者不能使用鼠标右键，当他点击右键想对图片进行保存或者复制文字的时候就会弹出一个警告窗口或是弹出收藏夹等。
实现方法：
（1）利用弹出窗口封锁鼠标右键
将下面这段代码放在网页HTML代码的＜head＞＜/head＞标志中，就可以实现封锁右键，给网页加密。
＜script language="javascript"＞
function click() {if (event.button==2) {alert('本站不准使用右键，
使用左键吧！^_^') }}
document.onmousedown=click＜/script＞
（2）弹出“添加收藏夹”封锁鼠标右键
将下面这段代码放在网页的HTML代码的＜head＞＜/head＞标志中。实现点击右键出现“添加到收藏夹”选项。
＜script language="javascript"＞
function click() {if (event.button==2) {window.external.addFavorite
('http:///,' 网页教学网')}}
document.onmousedown=click＜/script＞
（3）彻底封锁鼠标右键
将下面这段代码放在网页的HTML代码的＜head＞＜/head＞标志中能够实现彻底封锁鼠标右键的效果，由于这个脚本在右键按下时调用一个函数，所以可以改为很多种类型。即使按下左键，再按下右键，放开左键，再放开右键的方法也还是破解不了。
＜script＞
function DM(e){if(!ns){if(event.button＞1)window.external.addFavorite
('http:///,' 网页教学网')}else{if(e.which＞1)return false}}ns=navigator.appName=="Netscape";if(ns)document.captureEvents
(Event.MOUSEMOVE|Event.MOUSEDOWN);document.onmousemove=DM;document.
onmousedown=DM;＜/script＞
（4）禁止查看源文件
将下面这段代码放在网页的HTML代码的＜head＞＜/head＞标志中则可以实现禁止利用IE浏览器查看源文件。
＜script language="JavaScript"＞
＜!--
document.onmousedown=click
function click() {
if ( event.button==2) {alert('不准查看源文件') }
if ( event.button==3) {alert('不准查看源文件') }
}
//--＞
＜/script＞
（5）用乱码显示链接、调用地址加密。
利用某些函数把URL字符转换成ASCII码，从而达到隐藏链接Frame页面和*.js,*.asp等脚本的目的。返回ASCII码escape(character),ASCII码为%XX格式,XX是十六进制，如空格键为%20。返回字符unEscape(string)如：
＜!—var Words=" %3Cframeset%20BORDER%3D%220%22%20FRAMEBORDER%3D%220%22
%20FRAMESPACING%3D%220%22%20rows%3D%22100%25%22%3E%0D%0A%20%20%3Cframe
%20SRC%3D%22http%3A//XXX.XXX.COM/XXX/XXX/%22%20NAME%3D%22oos1%22%20"//
--＞
＜/script＞
相关文章
- 当来访者浏览器语言是中文就进入中文版面，国外的用户默认浏览器不是中文的就跳转英文页面。 <?php $lan = substr( $HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
- 什么是js跨域呐？js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。要...2015-10-30
- 腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题，要把腾讯视频放到自己的网页有许多的办法，当然一般情况就是直接使用它们的网页代码了，如果你要下载资源再放到...2016-09-20
- 什么是js跨域呐？js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。要...2015-10-30
- 这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别
我们现在使用的软件都会自动在前面加一个申明了，那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢？下面我们就一起来看看吧． 单...2016-09-20- 本篇文章是对C#中自定义控件的制作与使用实例进行了详细的分析介绍，需要的朋友参考下...2020-06-25
- ps软件是现在很多人比较喜欢的，通过ps软件可以制作很不错的图片效果。这次文章就给大家介绍下使用ps怎么制作任务影子，具体制作方法下面一起来看看。 ps人物影子效...2017-07-06
- 有没有觉得外面拍的证件照都很丑。那么本文就教大家制作二寸证件照的方法，学会了就能做自己美美的证件照了哈哈！ 步骤 双击打开php,首先教大家制作两寸照片的大小。...2016-12-21
- 这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- ps软件使用对很多人来说是非常重要的，很多人还不知道使用ps怎么制作宣传单，下面文章就给大家介绍下ps怎么制作宣传单，喜欢次效果的一起来看看。。 首先，我们新建一个2...2017-07-06
- 这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05
- 最近的一个项目中，需要将数据用日历方式显示，网上有很多的JS插件，后面为了自己能有更大的控制权，决定自己制作一个日历显示。如下图所示：一、计算数据 1、new一个Calendar类2、初始化两个下拉框中的数据，年份与月份3、初始...2015-11-24
- 这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
- 本文主要一步一步介绍利用C#抓取页面数据的过程，抓取HTML，获取标题、描述、图片等信息，并去除HTML，希望对大家有所帮助。...2020-06-25
- 本文为大家带来gif雪糕的制作方法，难度不大，可效果很漂亮哦，关注一聚教程网学起来！ 步骤： 1、使用AI新建一个1200*800的画布 2、使用矩形工具创建一个宽为250px，高度不...2016-12-21
- 美图秀秀可以像ps一样的来制作达到ps同样效果的照片了，但美图秀秀是要简单了很多了，就拿利用美图秀秀制作印章讲吧，不会ps的朋友只需要几下就好了，压根没需要什么基础了，下...2016-09-14
- 现在专业性的网站越来越多，许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事，所以大家都想保护自己独创的...2016-09-20
- 关于利用ps制作非常精致的蓝色水晶按钮的教程小编在几年前就介绍过许多的相关教程了，今天我们一起再来看一篇水晶按钮制作效果吧。 最终效果 1、打开Adobe Photos...2016-09-14
- 在制作网页的时候，常常要遇到制作虚线表格的问题，下面的文章就能解决这个问题。 方法一：作一个1X2的图。 半黑半白，再利用表格作成线。这种方法虽然麻烦...2016-09-20