网页设计案例马拉松宣传网页设计

博客简介

本篇博客介绍一个典型而有效的网页设计案例，这个案例用到了HTML，HTML5，CSS，CSS3，JavaScript。囊括了主页设计，联系方式页面设计，旋转唱片音乐页面，图片库页面，幻灯片设计，表单页面等等，最后提供了源码下载。源码地址

资源结构
页面结构
导航栏设计
幻灯片
网页内部导航
图片库
旋转唱片音乐页面
增强表格
联系方式页面
压缩代码

样例展示

可能会有广告，请直接跳过看下面的代码

网页设计——一张介绍马拉松keep训练的网页

资源结构

整个图片，audio，video，HTML，以及CSS ，JavaScript文件的布局如下：

HTML的文件设置

我们设想，整个网页由多个结构相似的页面组成，通过页面上部的导航栏链接起来。那么为什么不 给所有的页面设计一个模板 呢？设置好模板之后，每个页面只需要在当前模板的基础上稍加改动就能达到我们想要的效果。这样整个模板的重用性将会大大提高，也给后期的维护带来便利

CSS文件设置

令人眼花缭乱的CSS文件如何设置？关键在于你的文件布局是否有利于后期的维护，如果布局不合理，那么CSS的设置将会是一个让人头疼的问题，这里我们的处理办法是：按照布局layout，颜色color，排版typography归为三个文件进行处理，最后在basic.css文件中综合起来：

@import url(color.css);
@import url(layout.css);
@import url(typography.css);

JScript文件设置

关于JavaScript文件，我们一般是尽可能的少，尽可能的让JavaScript综合在一个文件里。为什么？因为一些jS函数是能够重用的，我们尽量将所有的JS放在一个文件中，方便函数重用。当然在特殊情况下我们可以创建格外的JS文件：

资源文件设置

我们将照片，音频，视频分别放在images，audioes，videoes文件中：

页面结构

关于页面结构，我们主要关注的是template模板页面的布局，这个布局很大程度上决定了我们整个网页的布局：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Are you ready for the marathon?</title><link rel="stylesheet" type="text/css" href="styles/basic.css">
</head>
<body id="about1">
<header id="about2"><img src="images/logo.jpg" width="640"><nav><ul><li><a href="Home.html"> Home</a></li><li><a href="About.html"> About</a></li><li><a href="Photos.html"> Photos</a> </li>   <li><a href="Music.html"> Music</a> </li><li><a href="Schedule.html"> Schedule</a> </li><li><a href="Contact.html"> Contact</a> </li></ul></nav>
</header>
<article><h1>Are you ready for the marathon?</h1><p>There is no doubt that Kipchog is a hero, in fact we can be heroes too. If you want to run a marathon like him, you'll be ready for a marathon. But how to preper for a marathon？It is difficult for a novice who has just entered the marathon to be fully prepared, so let's introduce it in a few simple ways. </p><h1>tips</h1><ul id="tip"><li><a href="#equipment">equipment</a></li><li><a href="#training">training</a></li><li><a href="#food">food</a></li></ul>     <h2>training</h2><p>Behind every top athlete is endless training. After basic preparation, you have to start hard training. Training is not an endless repetition of a process, but a scientific and effective arrangement of implementation time. </p></article><script src="scriptes/global.js"></script>
</body>
</html>

这里我们主要是按照如下布局来设置的：

导航栏设计

导航栏布局

导航栏的设计一般是采用的无序列表，列表内部嵌套a标签超链接，我们给超链接设置样式，并且设置display样式为block来实现,同时设置a标签的内外边距可以有较好的展示效果：

HTML：

 <nav><ul><li><a href="Home.html"> Home</a></li><li><a href="About.html"> About</a></li><li><a href="Photos.html"> Photos</a> </li>   <li><a href="Music.html"> Music</a> </li><li><a href="Schedule.html"> Schedule</a> </li><li><a href="Contact.html"> Contact</a> </li></ul></nav>

CSS：

header nav{border:0.1em solid;border-top: 0;padding-left: 10%;border-radius: 3px;
}
header nav ul{width: 100%;overflow: hidden;border-left: 0.1em solid;
}
header nav li{display: inline;border-radius: 3px;
}
header nav li a{display: block;float: left;padding: 0.7em 2em;border-right: 0.1em solid;
}
header nav{font-family: "Lucida Grande","Helvetica","Arial",sans-serif;
}
header nav a{text-decoration: none;font-weight: bold;
}

当前页面的导航栏选项点亮

我们想要实现这样一个效果，我们点击链接，到达相应的链接网页。我们想要看到当前所在网页的导航栏选项处于高亮的状态。这样的效果很好实现，只需要获取当前网页的链接，历遍nav中的超链接，对比，如果相同则将其class属性设置为高亮的类here，用

window.location.href.indexOf(url)

获取当前网页，并且进行对比。

function prepareSlidshow()
{if(!document.getElementById) return false;if(!document.getElementsByTagName) return false;var slideShow=document.createElement("div");slideShow.setAttribute("id","slideShow");var preview=document.createElement("img");preview.setAttribute("src","images/test.jpg");preview.setAttribute("alt","Choose a picture");preview.setAttribute("id","preview");slideShow.appendChild(preview);var gallery=document.getElementById("gallery");//找到插入位置insertAfter(slideShow,gallery);preview.style.position="absolute";preview.style.left="0px";preview.style.top="0px";var move=0;loop("preview",move,2000,20);
}
function hightLightPage()
{if(!document.getElementsByTagName) return false;if(!document.getElementById) return false;var header=document.getElementsByTagName("header");if(header.length==0) return false;var vans=header[0].getElementsByTagName("ul");if(vans.length==0) return false;var links=vans[0].getElementsByTagName("a");for(var i=0;i<links.length;i++){var url=links[i].getAttribute("href");if(window.location.href.indexOf(url)!=-1){links[i].className="here";}}
}

幻灯片设计

和很多网站类似（比如说淘宝，京东）有一个幻灯片的展示区域，我们实现的思路有很多，可以直接用canvas画布设置动画来实现，也可以将几张图片拼接成一张横向的长图，然后设计一个loop函数来递归地移动这张图片，到达边界后又移回起点：

function loop(id,move,time,movetime)//动画
{if(move<=-2000) move=0;//边界else move-=400;moveElement(id,move,0,movetime);//loop(id,move,time,movetime);var repeat="loop('"+id+"',"+move+","+time+","+movetime+")";t=setTimeout(repeat,time);
}
function moveElement(elementId,final_x,final_y,interval)
{if(!document.getElementById) return false;if(!document.getElementById(elementId)) return false;var elem=document.getElementById(elementId);var x=parseInt(elem.style.left);var y=parseInt(elem.style.top);if(elem.timer) clearTimeout(elem.timer);if(x==final_x&&y==final_y) return true;//边界条件var dis_x,dis_y;dis_x=Math.ceil((final_x-x)/10);//向上取整x+=dis_x;//round向下取整dis_y=Math.ceil((final_y-y)/10);//向上取整y+=dis_y;elem.style.left=x+"px";elem.style.top=y+"px";var repeat="moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";elem.timer=setTimeout(repeat,interval);//定时器设置，递归调用
}

网页内部导航

比如说CSDN博客的文章，右侧有一个内部导航栏，点击一个标题我们就能跳转到网页中的相应段落，网页内部导航是一种常见的导航形式，对于长篇幅的页面十分重要，如何实现？

在网页内部设置一个超链接列表
给每一个标题设置一个id
将超链接列表的超链接href设置为相应的“”#”+id

   <h1>tips</h1><ul id="tip"><li><a href="#equipment">equipment</a></li><li><a href="#training">training</a></li><li><a href="#food">food</a></li></ul>        <section id="equipment"><h2>Equipment</h2><p>As the king of running shoes, Asics is undoubtedly the best choice.</p></section><section id="training"><h2>training</h2><p>Behind every top athlete is endless training. After basic preparation</p></section><section id="food"><h2>Food</h2><p>Take care of rest and recovery to avoid pain.</p></section>

section标签不是必要的，我们完全可以将id设置在h1内部.< section > 只是标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

图片库

可以将所有图片直接统一放在网页里，但是这样加载网页就会十分缓慢。我们也可以为每一张图片设计一个像网页，就不存在加载缓慢的问题，但是这对于设计人员来说是繁琐的，这个时候我们可以考虑创建一个图片库：
把整个图片库的浏览链接集中放在图片库主页里，只在用户点击了这个主页的链接时才把相应的链接发送给他，图片库里阻断click的方法值得回味，这里我直接贴出代码，因为在前面我已经介绍过了，直接参考我之前的博客即可：

图片库经典案例
图片库改进版
图片库最终版

function prepareGallery()
{if(!document.getElementsByTagName) return false;if(!document.getElementById) return false;if(!document.getElementById("photoGallery")) return false;var gallery=document.getElementById("photoGallery");var links=gallery.getElementsByTagName("a");for(var i=0;i<links.length;i++){links[i].onclick=function(){return !showPic(this);//调用showPic函数}links[i].onkeypress=links[i].onclick;}
}
function showPic(element){if(!document.getElementById("placeholder")) return false;var source=element.getAttribute("href");//获取元素节点的src属性值var placeholder=document.getElementById("placeholder");//查找placeholder元素节点if(placeholder.nodeName!="IMG") return false;//nodeName总是返回大写字母placeholder.setAttribute("src",source);//设置placeholder的src属性值为if(document.getElementById("description")){var description=document.getElementById("description");//获取元素var text=element.getAttribute("title")?element.getAttribute("title"):"";//查找成功则获取title，否则获取空串,这样不会因为无法访问title而导致图片也无法加载if (description.firstChild.nodeType==3) description.firstChild.nodeValue=text;//当节点类型为3的时候，添加}return true;
}
function preparePlaceHolder()
{if(!document.createTextNode) return false;if(!document.createElement) return false;if(!document.getElementById) return false;if(!document.getElementById("photoGallery")) return false;var placeholder=document.createElement("img");placeholder.setAttribute("id","placeholder");placeholder.setAttribute("src","images/background6.jpg");placeholder.setAttribute("alt","This is my photoGallery");placeholder.setAttribute("height","400");placeholder.setAttribute("width","629");var description=document.createElement("p");description.setAttribute("id","description");var txt=document.createTextNode("Choose an image");description.appendChild(txt);var photoGallery=document.getElementById("photoGallery");//photoGallery.parentNode.insertBefore(placeholder,photoGallery);//photoGallery.parentNode.insertBefore(description,photoGallery);insertAfter(placeholder,photoGallery);insertAfter(description,placeholder);
}

旋转唱片音乐页面

用audio插入音频
设置div插入照片，设置边框为圆形
设置CSS动画
设置监听，当点击播放时，设置div的class为animation2，点击暂停设置div的class为animation2
更为详细的展示可以参见唱片旋转播放效果

CSS 设置动画关键帧，设置两个class对应停止和永动旋转：

.animation1{   width: 200px;height: 200px;border:1px solid white;border-radius: 100px;overflow: hidden;float: left;animation:frame 6s  linear paused;
}
.animation2{ width: 200px;height: 200px;border:1px solid white;border-radius: 100px;overflow: hidden;float: left;animation:frame 6s  linear infinite;
}
.animation1 img,.animation2 img{width: 200px;height: 200px;}
@keyframes frame{0% {transform:rotate(0deg); }20%{transform: rotate(72deg);}40%{transform: rotate(144deg);}60%{transform: rotate(216deg);}80%{transform: rotate(288deg);}100%{transform: rotate(360deg);}
}

Jscript：

function addLoadEvent(func)
{var oldonload=window.onload;if(typeof window.onload!='function')//未被绑定{window.onload=func;}else{window.onload=function()//匿名函数添加{oldonload();func();}}
}
//唱片的旋转
function player(audio,pic)
{if(audio.paused)//当前状态{pic.setAttribute("class","animation1");}else{pic.setAttribute("class","animation2");}
}
function playe_Pause()
{if(!document.getElementsByTagName) return false;var audioes=document.getElementsByTagName("audio");var pictures=document.getElementsByTagName('article')[0].getElementsByTagName("img");if(!audioes||!pictures) return false;audioes[0].addEventListener("pause",function(){player(audioes[0],pictures[0].parentNode);});audioes[0].addEventListener("play",function(){player(audioes[0],pictures[0].parentNode);});          audioes[1].addEventListener("pause",function(){player(audioes[1],pictures[1].parentNode);});audioes[1].addEventListener("play",function(){player(audioes[1],pictures[1].parentNode);});       audioes[2].addEventListener("pause",function(){player(audioes[2],pictures[2].parentNode);});audioes[2].addEventListener("play",function(){player(audioes[2],pictures[2].parentNode);});   audioes[3].addEventListener("pause",function(){player(audioes[3],pictures[3].parentNode);});audioes[3].addEventListener("play",function(){player(audioes[3],pictures[3].parentNode);});       audioes[4].addEventListener("pause",function(){player(audioes[4],pictures[4].parentNode);});audioes[4].addEventListener("play",function(){player(audioes[4],pictures[4].parentNode);});   audioes[5].addEventListener("pause",function(){player(audioes[5],pictures[5].parentNode);});audioes[5].addEventListener("play",function(){player(audioes[5],pictures[5].parentNode);});       audioes[6].addEventListener("pause",function(){player(audioes[6],pictures[6].parentNode);});audioes[6].addEventListener("play",function(){player(audioes[6],pictures[6].parentNode);});               }
addLoadEvent(playe_Pause);

增强表格

关于表单的增强，我们主要是设置表单的奇偶行的颜色以及鼠标悬停时的高光。完全可以采用CSS实现，但是这里我们采用的是JavaScript，可以给所有的表格都设置这样的样式：

历遍表格的tr行，如果是奇数行更新className为’odd’
历遍表格的tr行，如果是偶数行更新className为’even’
历遍表格的tr行，设置监听，如果鼠标悬停，则先保存当前oldclass，更新为新的styleover。如果鼠标移出，则将oldclass设置回去。

function tripeTables()
{if(!document.getElementsByTagName) return false;var tables=document.getElementsByTagName("table");for(var i=0;i<tables.length;i++){var rows=tables[i].getElementsByTagName("tr");//取得所有列for(var j=0;j<rows.length;j++){if(j%2) rows[j].setAttribute("class",'odd');else rows[j].setAttribute("class",'even')}}
}
function HightRows()
{if(!document.getElementsByTagName) return false;var rows=document.getElementsByTagName("tr");var oldClass;for(var i=0;i<rows.length;i++){rows[i].onmouseover=function(){oldClass=this.getAttribute("class");this.setAttribute("class","styleover")}rows[i].onmouseout=function(){this.className=oldClass;}}
}
addLoadEvent(tripeTables);
addLoadEvent(HightRows);

联系方式页面

联系方式页面的设计时绝对必要的，为了让用户能够很方便的反馈，获取联系方式，我们可以用form表单完成，得益于HTML5中表单的新属性，给我们提供了很多便捷的标签。在开始设置之前，我们可以简单地用标签设置标记：

创建标记

post输入框，输入Name信息
email输入框，输入联系邮件
textarea输入框，输入文本
submit提按钮，提交当前页面
label可以在点击name时获取焦点
placeholder占位符可以在文本框里显示对应的提示消息

   <form method="post" action="submit.html"><fieldset><p><label for="name">Name:</label><input type="post" id="name" name="name" placeholder="Your name" required="required"></p><p><label for="email">Email:</label><input type="email" id="email" name="email" placeholder="Your email address" required="required"> </p><p><label for="message">Message:</label><textarea cols="45" rows="7" id="message" name="message" require="require" placeholder="Write your message here."></textarea></p><input  id="submit" type="submit" value="Send"></fieldset></form>

设置样式

必要的CSS样式，设置如下

label{display: block;
}
fieldset{border:0;
}
input{height: 18px;border-radius: 5px;padding: 8px;border:1px solid white;line-height: 18px;
}
textarea{border-radius: 5px;
}
#submit{background-color: #9370DB;font-weight: bold;width: 65px;height: 40px;border-radius: 5px;padding: 8px;border:1px solid white;line-height: 18px;
}
input:hover{transform: scale(1.1);
}

表单验证

我们可以用JavaScript设置一个验证函数，进行简单的格式处理一般验证是否填入，邮件格式是否正确，我们完全可以设置两个函数来验证ifFilll和isEmail但是得益于：

具有require属性的表格不能为空
email表单会自动检验是email格式

HTML5的新标签帮我们更加完善地解决了这些问题，我们不需要过度的预处理，切记JScript脚本写得不好不如没有编写脚本验证

提交表单

关于表单的提交，此处设置了一个新的页面submit.html，当用户提交成功后页面就会自动跳转到submit页面，显示感谢信息：

< form method=“post” action=“submit.html” >设置form标签的action属性，提交表单后将会跳转到相应页面
建立一个新的页面submit.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Are you ready for the marathon?</title><link rel="stylesheet" type="text/css" href="styles/basic.css">
</head>
<body id="contact1">
<header id="contact2"><img src="images/logo.jpg" width="640"><nav><ul><li><a href="Home.html"> Home</a></li><li><a href="About.html"> About</a></li><li><a href="Photos.html"> Photos</a> </li>   <li><a href="Music.html"> Music</a> </li><li><a href="Schedule.html"> Schedule</a> </li><li><a href="Contact.html"> Contact</a> </li></ul></nav>
</header>
<article><h1>Thanks!</h1><br><br><h4>Thanks for contacting us.We will get back to you as soon as we can.</h4><br><br><br><br>
</article><script src="scriptes/global.js"></script>
</body>
</html>

压缩代码

关于代码压缩我们不再赘述，我们在谷歌的Closure Compiler上粘贴代码就能得到压缩的代码了，为了减少用户的网页加载时间，增强体验感，压缩代码不可忽略，十分重要。

最后我们的网页就设置完成了，虽然说还有很多地方需要改进，比如说最后表单的提交可以用Ajax技术进行优化，界面设计可以更加完美，但是这张网页还是十分具有价值和启发意义，希望所有的Web爱好者，都能在Web开发这条路上越走越宽，越走越远，永远保持一颗积极进取，不断开拓的心。

网页设计——一张介绍马拉松keep训练的网页