接到一个web前端的笔考试题
Webproject report
启动时间：2013-4-9
结束时间：2013-4-10
项目开发者：陈东景
Tel:13657313364
Email：dongjing_csu@163.com
ps：文本中的图片效果没显示出来，在这里表示抱歉。
项目要求：
web1.png, web2.png设计成Single-pagewebsite.
要求：
1. web1右上角所有链接都要有 “鼠标悬浮在对应链接上时链接显示下划线”的效果。
2. 在web1页面按空格键 或者 在web1右上角点击press链接，则跳转到web2，需要有动画效果。(可参考 http://www.strikingly.com/)
3. 考虑应用动态加载等优化的技术。
4. web2的三个内容块，鼠标悬浮在之上时，该块需要出现黑色蒙层覆盖。鼠标移除后，蒙层消失。
5. 尽可能兼容多种设备/浏览器，chrome, firefox, 360, ipad,iphone, android等(自适应屏幕大小)
Web1：
Web2：
功能分析
由要求可初步知道项目中有两个网页，两个网页通过超链接链起来。在设计网页的过程中，需要使用一定的特效，使网页更加美观，提高用户体验，最好能够跨平台使用。具体要求：
1. web1右上角所有链接都要有 “鼠标悬浮在对应链接上时链接显示下划线”的效果。
2. 在web1页面按空格键 或者 在web1右上角点击press链接，则跳转到web2，需要有动画效果。(可参考http://www.strikingly.com/)
3. 考虑应用动态加载等优化的技术。
4. web2的三个内容块，鼠标悬浮在之上时，该块需要出现黑色蒙层覆盖。鼠标移除后，蒙层消失。
5. 尽可能兼容多种设备/浏览器，chrome, firefox, 360, ipad,iphone, android等(自适应屏幕大小)
项目开发步骤：
根据要求本人做了如下工作：
我选择的是静态页面制作方法，文件所在位置全部在F:\webproject下。项目中主要应用HTML，ＪＡＶＡＳＣＲＩＰＴ，ＪＳＰ，ＣＳＳ等技术。
主页面（main.html）代码：
<%@page contentType ="text/html" pageEncoding = "UTF-8"%>
<%@page taglib prefix = "s"uri = "/struts-tags"%>
<html>
<head>
<mata http-equiv = "Content-Type" content ="text/html;charset = UTF-8">
<title>The World's First Smartphone Breathalyzer</title>
</head>
<style type=text/css>
<!--
body{background-image:url(F:\webproject\background.jpg);
background-repeat:repeat-x;background-attachment:fixed;background-position:center;}
-->
</style>
<body>
<table width ="100%" align ="right"bgcolor="white">
<tr height = "10" bgcolor = "gray" align ="center">
<img src="F:\webproject\logo.jpg" border="0"width="150" height="125">
<strong><font size="7px"color="green">ALCOHOOT</font><strong><br>
<font size="4px"color="blue">                Theworld's First Smartphone Breathalyzer</font>
<style type="text/css">
a:link,a:visited{
text-decoration:none; /*Hyperlink without underline*/
}
a:hover{
text-decoration:underline; /*Put the mouse up the underlined*/
}
</style>
<td><ahref="F:\webproject\top.html" target ="main">About</a></td>
<style type="text/css">
a:link,a:visited{
text-decoration:none; /*Hyperlink without underline*/
}
a:hover{
text-decoration:underline; /*Put the mouse up the underlined*/
}
</style>
<td><ahref="F:\webproject\top.html" target ="main">Press</a></td>
<style type="text/css">
a:link,a:visited{
text-decoration:none; /*Hyperlink without underline*/
}
a:hover{
text-decoration:underline; /*Put the mouse up the underlined*/
}
</style>
<td><ahref="F:\webproject\top.html" target ="main">Team</a></td>
<style type="text/css">
a:link,a:visited{
text-decoration:none; /*Hyperlink without underline*/
}
a:hover{
text-decoration:underline; /*Put the mouse up the underlined*/
}
</style>
<td><ahref="F:\webproject\top.html" target = "main">PreorderNow!</a></td>
<style type="text/css">
a:link,a:visited{
text-decoration:none; /*Hyperlink without underline*/
}
a:hover{
text-decoration:underline; /*Put the mouse up the underlined*/
}
</style>
<td><ahref="F:\webproject\top.html" target ="main">Contact</a></td>
</tr>
</table><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<font size ="6" color="blue"align="center">WHAT IS IT ?</font><br><br>
<font size="3" color="blue"align="center">Alcohoot is the world's firstbreathelyzer</font><br>
<font size="3" color="blue"align="center">plugs into your smartphone</font>
</body>
</html>
实现效果：
子页面代码：
<%@page import = "javaBean.UserNameBeam"%>
<%@page import="java.util.ArrayList"%>
<%@page contentType ="text/html" pageEncoding = "UTF-8"%>
<%@page prefix = "s" uri ="/struts-tags"%>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html;charset =Utf-8">
<title>The World's First Smartphone Breathalyzer
</title>
</head>
<body bgcolor = "#CCDDEE">
<table width ="100%" align ="right"bgcolor="white">
<tr height = "10" bgcolor = "gray" align ="center">
<img src="F:\webproject\logo.jpg" border="0"width="150" height="125">
<strong><font size="7px"color="green">ALCOHOOT</font><strong><br>
<font size="4px"color="blue">                                Theworld's First Smartphone Breathalyzer</font>
<meta http-equiv="Page-Enter"content="blendTrans(Duration=0.5)">
<meta http-equiv="Page-Exit"content="blendTrans(Duration=0.5)">
<style type="text/css">
a:link,a:visited{
text-decoration:none; /*Hyperlink without underline*/
}
a:hover{
text-decoration:underline; /*Put the mouse up the underlined*/
}
</style>
<td><ahref="F:\webproject\main.html" target ="main">About</a></td>
<style type="text/css">
a:link,a:visited{
text-decoration:none; /*Hyperlink without underline*/
}
a:hover{
text-decoration:underline; /*Put the mouse up the underlined*/
}
</style>
<td><ahref="F:\webproject\main.html" target ="main">Press</a></td>
<style type="text/css">
a:link,a:visited{
text-decoration:none; /*Hyperlink without underline*/
}
a:hover{
text-decoration:underline; /*Put the mouse up the underlined*/
}
</style>
<td><ahref="F:\webproject\main.html" target ="main">Team</a></td>
<style type="text/css">
a:link,a:visited{
text-decoration:none; /*Hyperlink without underline*/
}
a:hover{
text-decoration:underline; /*Put the mouse up the underlined*/
}
</style>
<td><ahref="F:\webproject\main.html" target = "main">PreorderNow!</a></td>
<style type="text/css">
a:link,a:visited{
text-decoration:none; /*Hyperlink without underline*/
}
a:hover{
text-decoration:underline; /*Put the mouse up the underlined*/
}
</style>
<td><ahref="F:\webproject\main.html" target ="main">Contact</a></td>
</tr>
</table><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
ClientScript.RegisterClientScriptBlock(GetType(), "space key","alert('马上跳转页面');window.location.href='F:\webproject\main.html'", true);
Button1_Click(space key)
{
if(space key=true)
Response.Redirect("F:\webproject\main.html");
return true;
}
</script>
<scriptlanguage="JavaScript1.2">
// Ticker Messages ( HTML Tags supported)
var qiksearch_ticker_text = new Array("PRESS", "TEAM","PREORDER NOW!","CONTACT");
// Ticker Message URLs
var qiksearch_ticker_URL = new Array("F:\webproject\main.html", "F:\webproject\main.html","F:\webproject\main.html");
// Ticker Message URLs' Target (1 for NEWWINDOW, 0 for SAME WINDOW)
var qiksearch_ticker_target = new Array("0", "0", "0", "1");
var qiksearch_ticker_width = 180; // Thewidth of the Ticker
var qiksearch_ticker_height = 50; // Theheight of the Ticker
var qiksearch_ticker_borderw=1; // Borderwidth
var qiksearch_ticker_borderc="#808080";// Border Color
var timeOutVal=200; // Delay inmilliseconds
var isPause=false; // true if you wantpause on mouseover, else false
// setting to true is a bitbuggy
//--------------------------------------------------------
//-----------------------------DO-NOT-MODIFY-BELOW-THIS---------------------------------------
varie4=document.all&&navigator.userAgent.indexOf("Opera")==-1;
varns6=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1;
var ns4=document.layers;
var qiksearch_tickerObj;
varticker_left_ns4=(screen.width/2-20)-Math.round(qiksearch_ticker_width/2);
// Setting qiksearch_tickerObj depending onBrowser
function setTickerObj()
{
if(ie4)
{
qiksearch_tickerObj=document.all.qiksearch_js_ticker;
}
if(ns6)
{
qiksearch_tickerObj=document.getElementById("qiksearch_js_ticker");
}
}
// isPause Content
var isPauseContent;
if(isPause)
{
isPauseContent='onMouseOver="delay_timeOutVal();" onMouseOut="resume_timeOutVal();"';
}
else
{
isPauseContent='';
}
if(ie4||ns6)
{
document.write('<table' + isPauseContent +' onMouseUp="goURL();"width="' + qiksearch_ticker_width + '" height="' + qiksearch_ticker_height + '"style="cursor:pointer; background:#FFFFFF; border:' +qiksearch_ticker_borderw + 'px solid ' + qiksearch_ticker_borderc +'"><tr><td align="middle">');
document.write('<divid="qiksearch_js_ticker">');
document.write('</div>');
document.write('</td></tr></table>');
}
vardef_10='A',def_11='B',def_12='C',def_13='D',def_14='E',def_15='F';
var colorVal=15;
var div_count=0;
// Fading Color code Generating function
functionqiksearch_fade_desat(getColorIntVal)
{
varreturnVal;
if(getColorIntVal>=10)
{
for(var i=0; i<=15; i++)
{
if((getColorIntVal==i))
{
returnVal = eval('def_' + i);
}
}
}
else
{
returnVal=getColorIntVal;
}
return(returnVal);
}
// Main
function writeDiv()
{
if(ie4||ns6)
{
qiksearch_tickerObj.innerHTML= '<font face="verdana,arial,helvetica"size="-1" color="#' + joinColor(qiksearch_fade_desat(colorVal)) + '"><b>' +qiksearch_ticker_text[div_count] + '</b></font>' ;
}
if(ns4)
{
qiksearch_tickerObj=document.qiksearch_ticker_ns4;
qiksearch_tickerObj.document.write('<table border="1"bordercolor="' + qiksearch_ticker_borderc +'"width="100%"><tr><tdalign="center"><a href="javascript:void(0);"' +isPauseContent + ' onMouseUp="javascript:goURL();"><fontface="verdana,arial,helvetica" size="-1" color="#'+ joinColor(qiksearch_fade_desat(colorVal))+ '"><b>' + qiksearch_ticker_text[div_count] + '</b></font></a></td></tr></table>');
qiksearch_tickerObj.document.close();
}
if((colorVal>0) && (colorVal!=0))
{
colorVal--;
}
else
{
colorVal=15;
if(div_count<qiksearch_ticker_text.length)
{
div_count++;
}
if(div_count==qiksearch_ticker_text.length)
{
setTimeout("resetAll()",timeOutVal);
setTimeout("writeDiv()",timeOutVal);
}
}
if(div_count<qiksearch_ticker_text.length)
{
setTimeout("writeDiv()",timeOutVal);
}
}
// Generating Final Hex Color
function joinColor(getColor)
{
return (getColor + '0' + getColor + '0' +getColor + '0');
}
// Reset
function resetAll()
{
div_count=0;
colorVal=15;
}
// URL Navigation function
function goURL()
{
if(qiksearch_ticker_target[div_count]=="0")
{
location.href=qiksearch_ticker_URL[div_count];
}
else
{
if(qiksearch_ticker_target[div_count]=="1")
{
window.open(qiksearch_ticker_URL[div_count]);
}
}
}
// Setting Delay on MouseOver and MouseOut
var temp_timeOutVal=timeOutVal;
function delay_timeOutVal()
{
timeOutVal=100000000000000;
setTimeout("writeDiv()",timeOutVal);
}
function resume_timeOutVal()
{
timeOutVal=temp_timeOutVal;
setTimeout("writeDiv()",timeOutVal);
}
setTickerObj();
window.onload=writeDiv;
if(ns4)
{
document.write('<layerid="qiksearch_ticker_ns4" width="' + qiksearch_ticker_width +'" left="' + ticker_left_ns4 + '"></layer>');
}
</script><br><br>                    
                    
           
<IMG onmouseover=makevisible(this,1) style="FILTER:alpha(opacity=100)" onmouseout=makevisible(this,0)src="F:\webproject\another.jpg" border=0>
<script>
function makevisible(obj,num)
{
if(num==0)
obj.filters.Alpha.Opacity=100;
else
obj.filters.Alpha.Opacity=50;
}
</script>        
<IMG onmouseover=makevisible(this,1) style="FILTER:alpha(opacity=100)" onmouseout=makevisible(this,0)src="F:\webproject\thebest.jpg" border=0>
<script>
function makevisible(obj,num)
{
if(num==0)
obj.filters.Alpha.Opacity=100;
else
obj.filters.Alpha.Opacity=50;
}
</script>        
<IMG onmouseover=makevisible(this,1) style="FILTER:alpha(opacity=100)" onmouseout=makevisible(this,0)src="F:\webproject\anotherquote.jpg" border=0>
<script>
function makevisible(obj,num)
{
if(num==0)
obj.filters.Alpha.Opacity=100;
else
obj.filters.Alpha.Opacity=50;
}
</script>
</body>
</html>
实现效果：
项目总结：
本项目完全由本人独自完成，大部分代码都是手写敲入，只有少部分参照网络上的代码。在这一次开发过程中，我能够初步完成的功能为项目要求1,2,3,4点。
其中按空格键跳转到另外一个页面的功能没有完成，但是我也尝试过运用多种方法解决，最后都以不理想告终。还有，由于条件的限制，第5条暂时未能验证网页是否能够跨平台使用。
为了区别项目是由我独自完成，在网页设计风格和布局方面，我有意将它稍微改动，但功能均一样。我觉得风格和布局不是技术层面的东西，只要花点时间稍微改动一下就可以得到一模一样的界面。
在本项目中的难点：蒙层的覆盖与去除和按键自动跳转。但是只要多尝试也是可以解决的。