HTML网页模板设计：打造精美登录界面与页面跳转功能
HTML网页登录界面跳转策略
以下列举了五个实例进行详尽阐述，这些实例的核心功能为：在5秒后，自动导向至同一目录下的hello.html（可根据需求自行调整）文件。
1) HTML的运用
优点：简便
缺点：在Struts Tiles中无法应用
2) JavaScript的运用
//以下方法直接导向
window.location.href='hello.html';
//以下方法定时导向
setTimeout("javascript:location.href='hello.html'", 5000);
优点：灵活，可结合更多其他功能
缺点：受不同浏览器影响
3) 结合倒计时JavaScript的运用（IE）
5
var second= totalSecond.innerText;
setInterval("redirect()", 1000);
function redirect(){
totalSecond.innerText=--second;
if(second<0) location.href='hello.html';
}
优点：更具人性化
缺点：firefox不支持（firefox不支持span、div等的innerText属性）
3') 结合倒计时JavaScript的运用（firefox）
var second= document.getElementById('totalSecond').textContent;
setInterval("redirect()", 1000);
function redirect()
{
document.getElementById('totalSecond').textContent=--second;
if(second< 0) location.href='hello.html';
}
4) 解决firefox不支持innerText的问题
5
if(navigator.appName.indexOf("Explorer")>-1){
document.getElementById('totalSecond').innerText="my text innerText";
} else{
document.getElementById('totalSecond').textContent="my text textContent";
}
5) 整合3)和3')
5
var second= document.getElementById('totalSecond').textContent;
if(navigator.appName.indexOf("Explorer")>-1){
second= document.getElementById('totalSecond').innerText;
} else{
second= document.getElementById('totalSecond').textContent;
}
setInterval("redirect()", 1000);
function redirect(){
if(second< 0){
location.href='hello.html';
} else{
if(navigator.appName.indexOf("Explorer")>-1){
document.getElementById('totalSecond').innerText= second--;
} else{
document.getElementById('totalSecond').textContent= second--;
}
}
参考
网页界面设计要点
1、关注网站的链接、按钮和LOGO
网站的链接和按钮都应遵循用户的使用习惯。目前链接文字普遍采用蓝色并带有下划线的文字形式。按钮应具有立体感，看起来像是一个突出的按钮，一眼就能看出可以点击。而LOGO是其他网站链接以及让其他网站链接的标志和门户。通常情况下，点击LOGO可以返回网站首页。因此，LOGO不仅是网站的名片，更是网站的灵魂所在，同时它还具有重要的导航功能。网站的LOGO作为重要的网页元素，当鼠标移上去或划过等事件发生时，应有相应的信息响应。
2、网站页面加载进度
网站的每个链接，包括首页打开，都需要一定时间加载。某些网站功能简单，加载速度快，无需担心页面延迟。但某些网站加载往往不能一次性完成，例如淘宝这种大型购物平台，页面有很多商品图片，加载需要一定时间，此时需要一定的响应式设计，否则让用户等待太久会显得不友好。
实际上，许多因素会影响网页初次加载的响应时间：HTML文件的文档大小；页面中的各种元素如代码、图片、flash、音频、视频等元素文档大小；HTML页面的复杂程度（浏览器可以快速展现简单的页面）；用户反应速度也会影响浏览速度；被网页页面调用的其他内容所在的服务器访问速度；网站的域名和外部域名的DNS解析速度也会影响网页加载速度；用户所使用的计算机的性能（如果计算机资源消耗过多或配置过低，浏览器也会变得响应缓慢）；服务器的配置高低。
除了上述因素会导致网站响应快慢以外，一些人为因素和一些硬件也会影响网页加载速度。例如：服务器端、客户端和网速。服务器端主要包括：服务器地域，是否双线，处理能力等。
3、网页中应隐藏不常用的操作
网站中不常用的操作可以不突出显示，将其弱化或隐藏。例如，网站中有某个弹出层几乎不用到，为了不对用户造成干扰，可以在鼠标经过时才出现这个弹出层。这是基于上文提到的不干扰用户注意力角度出发的。比如，在新浪微博中，微博的屏幕功能只有在鼠标移到对应某条微博的右上角并单击鼠标时才会弹出操作提示框，否则是看不到屏蔽操作的，这就是隐藏操作的具体体现。
网站中较少使用的功能可以适当淡化或隐藏。例如，若网站中存在某个很少使用的弹出窗口，为了不干扰用户，我可以在鼠标悬停时才显示这个弹出窗口。这种做法是基于避免干扰用户注意力这一理念的。例如，在新浪微博中，微博的屏幕功能只有在鼠标移至某条微博的右上角并点击鼠标时才会弹出操作提示框，否则屏蔽操作是看不到的，这就是隐藏功能的一个具体例子。
4、尽量减少弹窗信息
为何要尽量减少弹窗信息呢？以下通过一个例子进行说明。当你正在观看一部精彩的影片或阅读一本好书时，突然接到一个无实质内容的电话，你肯定会感到非常恼怒。网页设计也是如此，如果能在当前页面完成显示，就尽量在当前页面完成加载。对于弹出信息，如弹出层、跳转页面、模态窗口等，都会影响用户体验。
5、网站需引导用户——网站导航
一个优秀的网站应能让用户全面浏览，因此网站导航至关重要。用户在浏览页面时往往是不确定的、无规律的，且更不愿意做出选择。因此，网站需要时刻让用户了解自己的位置。如果浏览者不能快速、便捷地找到所需内容，他们很可能会转至其他网站。例如，许多博客网站除了首页导航外，还将分类作为第二导航置于页面边栏。此外，网站的页脚也非常重要，因为有些用户浏览时可能会接触到网站底部，这时网站的页脚可以帮助用户方便地找到当前站点位置。
长期以来，网页界面设计的研究主要集中在视觉方面，而设计的内容、流程和原则与实物产品设计类似，基本没有太大变化。随着信息科技的发展和交互技术的成熟，交互界面设计已成为一个独立的行业。本文阐述了基于增强现实的交互界面概念，分析了其突出特点，总结了交互界面设计的流程与原则。交互界面设计是一个全新且复杂的研究领域，本文的研究仅是交互界面设计的一小部分。如何清晰分析交互界面设计的理论特性、深入理解，还需依靠同行的持续努力和大量实践，以实现用户与网络的简便、高效和人性化信息交流。