Team:SUSTC-Shenzhen-A/tutorial

From 2012.igem.org

(Difference between revisions)
 
(47 intermediate revisions not shown)
Line 1: Line 1:
{{Template:SUSTC_A}}
{{Template:SUSTC_A}}
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
-
<style type="text/css">
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title>无标题文档</title>
 +
<STYLE type=text/css>
-
.sidebar_box_woframe {
+
OL LI {
-
margin-bottom: 20px;
+
MARGIN: 8px
}
}
-
 
+
#con {
-
.sidebar_box {
+
FONT-SIZE: 12px; WIDTH: 530px
-
width: 260px;
+
-
padding: 0;
+
-
 
+
}
}
-
 
+
#tags {
-
.sidebar_box_top {
+
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 0px; WIDTH: 500px; PADDING-TOP: 0px; HEIGHT: 40px
-
width: 260px;
+
-
height: 20px;
+
-
 
+
}
}
-
 
+
#tags LI {
-
.sidebar_box_bottom {
+
BACKGROUND: url(http://taftproot.gotoip2.com/ld/images/tagleft.gif) no-repeat left bottom; FLOAT: left; MARGIN-RIGHT: 0px; LIST-STYLE-TYPE: none; HEIGHT: 40px
-
width: 260px;
+
-
height: 20px;
+
-
margin-bottom: 30px;
+
-
 
+
}
}
-
 
+
#tags LI A {
-
.sidebar_box_content {
+
PADDING-RIGHT: 25px; PADDING-LEFT: 25px; BACKGROUND: url(http://taftproot.gotoip2.com/ld/images/tip_bg.gif) no-repeat right bottom; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999;LINE-HEIGHT: 23px; PADDING-TOP: 5px; HEIGHT: 23px; TEXT-DECORATION: none;FONT-SIZE: 30px
-
padding: 0 20px;
+
}
}
-
 
+
#tags LI.emptyTag {
-
.sidebar_box_content p {
+
BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px
-
margin-bottom: 10px;
+
}
}
-
 
+
#tags LI.selectTag {
-
.image_wrapper {
+
BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 40px
-
position: relative;
+
-
display: block;
+
-
width: 218px;
+
-
height: 128px;
+
-
padding: 9px;
+
}
}
-
.image_wrapper span {
+
#tags LI.selectTag A {
-
position: absolute;
+
BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px
-
left: 0;
+
-
top: 0;
+
-
width: 236px;
+
-
height: 144px;
+
-
background: url(https://static.igem.org/mediawiki/2012/3/3d/Fruit_site_templatemo_image_frame.png) no-repeat;
+
}
}
-
.image_fl { float: left; margin: 3px 20px 0 0; }
+
#tagContent {
-
.image_fr { float: right; margin: 3px 0 0 20px; }
+
PADDING-RIGHT: 1px; BORDER-TOP: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP:1px; BACKGROUND-COLOR: #fff
-
 
+
-
.title {
+
-
font-family: "Comic Sans MS", cursive;
+
-
font-size: xx-large;
+
-
color: #698B69;
+
}
}
-
.title1 {
+
.tagContent {
-
font-family: "Comic Sans MS", cursive;
+
PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; BACKGROUND: url(http://www.6a8a.com/images/bg3.gif) repeat-x; PADDING-BOTTOM: 10px; COLOR: #474747; PADDING-TOP: 10px; HEIGHT: 250px
-
font-size: x-large;
+
-
color: #000;
+
}
}
-
.date {
+
#tagContent DIV.selectTag {
-
      font-family: serif, cursive, fantasy;
+
DISPLAY: block
-
      color:#5f3c23;
+
}
}
-
#talkbubble {
 
-
  width: 544px;
 
-
  height:165px;
 
-
  background:#ffffff;
 
-
//  background:#EFEFEF;
 
-
  position: relative;
 
-
  -moz-border-radius:    0px;
 
-
  -webkit-border-radius: 0px;
 
-
  border-radius:        10px;
 
-
  font-family: Tahoma, Geneva, sans-serif;
 
-
font-size: 14px;
 
-
  color:#333;
 
-
}
 
-
#talkbubble_a {
 
-
  width: 544px;
 
-
  height:200px;
 
-
//  background:#EFEFEF;
 
-
  background:#ffffff;
 
-
  position: relative;
 
-
  -moz-border-radius:    0px;
 
-
  -webkit-border-radius: 0px;
 
-
  border-radius:        10px;
 
-
  font-family: Tahoma, Geneva, sans-serif;
 
-
  font-size: 13px;
 
-
  color:#333;
 
-
}
 
-
#talkbubble_b {
 
-
  width: 544px;
 
-
  height:250px;
 
-
//  background:#EFEFEF;
 
-
  background:#ffffff;
 
-
  position: relative;
 
-
  -moz-border-radius:    0px;
 
-
  -webkit-border-radius: 0px;
 
-
  border-radius:        10px;
 
-
  font-family: Tahoma, Geneva, sans-serif;
 
-
  font-size: 13px;
 
-
  color:#333;
 
-
}
 
-
#talkbubble1 {
 
-
  width: 275px;
 
-
  height:500px;
 
-
//  background:#FAF0E6;
 
-
//  background:#feeeed;
 
-
  background:#EFEFEF;
 
-
  position: relative;
 
-
  -moz-border-radius:    10px;
 
-
  -webkit-border-radius: 10px;
 
-
  border-radius:        10px;
 
-
text-align: left;
 
-
border-top-style: solid;
 
-
border-right-style: solid;
 
-
border-bottom-style: solid;
 
-
border-left-style: solid;
 
-
        border-width: thin;
 
-
border-top-color:#DCDCDC;
 
-
border-right-color: #DCDCDC;
 
-
border-bottom-color:#DCDCDC;
 
-
border-left-color:#DCDCDC;
 
-
  font-size: 13px;
 
-
  color:#333;
 
-
font-family: Tahoma, Geneva;
 
 +
#width_1{width:60px}
-
 
+
  #course {
-
 
+
border-width:0px 1px 1px 1px;
-
 
+
border-style:solid;
-
 
+
border-color:#f3c3f3;
-
 
+
width:150px;
-
#content .row-1, #content .row-2{font-size:0.814em;width:960px;margin:0 auto}
+
}
-
#content {margin-top:0px;position:relative}
+
  #course dt,#course dd {
-
#content .row-1 .inside {padding:0 0 40px 40px}
+
margin:0;
-
#content .row-2 .inside {padding:32px 0 40px 0}
+
padding:3px;
-
#content .row-2 h3 {padding-left:42px}
+
font-size:25px;
-
#content .aside {float:left;width:258px;margin-right:58px}
+
}
-
#content .aside h3 {border-bottom:1px solid #d4d4d4;padding:0 0 0 10px;margin-bottom:20px;left:-10px;position:relative}
+
  #course dt {
-
#content .aside ul {padding-bottom:5px}
+
border-top: 1px solid #f3c3f3;
-
 
+
font-weight: bold;
-
 
+
background-color:#c3f3c3;
-
 
+
}
-
#content .aside ul li img {float:left;position:relative;top:3px;margin-right:15px}
+
</STYLE>
-
#content .aside ul li span {display:block;color:#000;font-size:20px;line-height:1.2em;padding-bottom:2px}
+
-
#content .content {float:left;width:570px}
+
-
#content .indent {padding:0 20px}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
.li{list-style-type:none;}
+
-
 
+
-
 
+
-
</style>
+
</head>
</head>
-
<body >
 
-
 
-
<table align="center">
 
-
  <tr>
 
-
 
-
    <td valign="TOP" height="900"><table>
 
-
      <tr>
 
-
        <td width="584"  align="center"><div align="left" id="talkbubble">
 
-
 
-
            <p class="title"><strong>Welcome to Biosearch</strong></p>
 
-
 
-
<p>
 
-
 
-
<div align="center"><div id=AdRotator></div></div>
 
-
 
-
<SCRIPT LANGUAGE="JavaScript">
+
<body>
-
<!--
+
<table align="center" width="900" border="0">
-
function adRotator() {};
+
  <tr>
-
adRotator.initialize=function(o)
+
    <td><DIV id=con>
-
{
+
<UL id=tags>
-
// script by blueDestiny
+
  <LI><A onMouseOver="selectTag('tagContent0',this)"
-
this._t = new Array();
+
  href="javascript:void(0)"> <em><strong>Tip  1 </strong></em><strong></strong></A> </LI>
-
this._l = new Array();
+
  <LI class=selectTag><A onMouseOver="selectTag('tagContent1',this)"
-
this._p = new Array();
+
  href="javascript:void(0)"> <em><strong>Tip  2 </strong></em><strong></strong></A> </LI>
-
this._i = new Image();
+
  <LI><A onMouseOver="selectTag('tagContent2',this)"
-
this._c = 0;
+
  href="javascript:void(0)"> <em><strong>Tip  3 </strong></em><strong></strong></A> </LI>
-
this._f = false;
+
    <LI><A onMouseOver="selectTag('tagContent3',this)"
-
this._o = o;
+
  href="javascript:void(0)"> <em><strong>Tip  4 </strong></em><strong></strong></A> </LI>
-
this._timeout = null;
+
  </UL>
-
this._html = "";
+
<DIV id=tagContent>
-
// configration.
+
<DIV class=tagContent id=tagContent0>
-
// @ image width
+
  <table width="458" border="0">
-
// @ image height
+
    <tr>
-
// @ rotator speed
+
      <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_01.png" width="300" height="500"></td>
-
// @ filter type
+
      <td width="195"><p><strong>This is the first page after you open the  app first time. In this page, you can choice your address in order we can  choice the best server to provide the data.</strong></p></td>
-
this._w = 450;
+
    </tr>
-
this._h = 450;
+
  </table></DIV>
-
this._s = 4;
+
<DIV class="tagContent selectTag" id=tagContent1>
-
this._x = 23;
+
  <table width="458" border="0">
-
return this;
+
    <tr>
-
};
+
      <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_02.png" width="300" height="500"></td>
-
adRotator.add=function(p,t,l) { with (this)
+
      <td width="148"><p><strong>This is the first page after you open the  app first time. In this page, you can choice your address in order we can  choice the best server to provide the data.</strong></p></td>
-
{
+
    </tr>
-
_p.push(p);
+
  </table>
-
_t.push(t);
+
</DIV>
-
_l.push(l);
+
<DIV class=tagContent id=tagContent2>
-
}};
+
<table width="458" border="0">
-
adRotator.load=function() { with (adRotator)
+
    <tr>
-
{
+
      <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_03.png" width="300" height="500"></td>
-
if( _i.readyState=='complete' )
+
      <td width="195"><p><strong>This is the first page after you open the  app first time. In this page, you can choice your address in order we can  choice the best server to provide the data.</strong></p></td>
-
{
+
    </tr>
-
if(_p.length-1==_c)
+
  </table></DIV>
-
{
+
<DIV class=tagContent id=tagContent3>
-
_f = true;
+
<table width="458" border="0">
-
_c = 0;
+
    <tr>
-
window.clearTimeout(_timeout);
+
      <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_04.png" width="300" height="500"></td>
-
//getRef("AdRotator").innerHTML="complete";
+
      <td width="195"><p><strong>This is the first page after you open the  app first time. In this page, you can choice your address in order we can  choice the best server to provide the data.</strong></p></td>
-
adRotator.play();
+
    </tr>
 +
  </table></DIV></DIV></DIV>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<SCRIPT type=text/javascript>
 +
function selectTag(showContent,selfObj){
 +
// 标签6a8a.com
 +
var tag = document.getElementById("tags").getElementsByTagName("li");
 +
var taglength = tag.length;
 +
for(i=0; i<taglength; i++){
 +
tag[i].className = "";
 +
}
 +
selfObj.parentNode.className = "selectTag";
 +
// 标签内容
 +
for(i=0; j=document.getElementById("tagContent"+i); i++){
 +
j.style.display = "none";
 +
}
 +
document.getElementById(showContent).style.display = "block";
}
}
-
else
 
-
{
 
-
_c++;
 
-
getRef(_o).innerHTML="total images " + _p.length + ", loading picture " + _c + ' ' + _i.readyState + "...";
 
-
_timeout=window.setTimeout(adRotator.load,10)
 
-
}
 
-
}
 
-
else
 
-
{
 
-
getRef(_o).innerHTML="total images " + _p.length + ", loading picture " + _c + ' ' + _i.readyState + "...";
 
-
_timeout=window.setTimeout(adRotator.load,10)
 
-
}
 
-
}};
 
-
adRotator.play=function() { with (adRotator)
 
-
{
 
-
if( _f )
 
-
{
 
-
_html = "";
 
-
_html += '<table style="border:1px solid #333333;"><tr><td style="font-size:9pt;font-family:tahoma;font-weight:bold;">'
 
-
_html += '<div id="rotatorPlayer"'
 
-
+ ' style="width:' + _w + ''
 
-
+ ';height:"' + _h + '"'
 
-
+ '>'
 
-
_html += '<a href="' + ( _l[_c] ? _l[_c] : "javascript:void(0);" ) + '">';
 
-
_html += '<img id="rotatorPic" src="' + _p[_c] + '"'
 
-
+ ' width="' + _w + '"'
 
-
+ ' height="' + _h + '"'
 
-
+ (_t[_c]?' title="' + _t[_c] + '"':'')
 
-
+ ' style="border:1px solid blue;FILTER:revealTrans(transition=' + _x + ',duration=1);"'
 
-
+ ' >';
 
-
_html += (_t[_c]?('<div align="center">' + (_c+1) + '. ' + _t[_c] + '</div>'):'<p></p>');
 
-
_html += '</a>';
 
-
_html += "</div>";
 
-
_html += '<div align="right">';
 
-
for(var i=0; i<_p.length; i++)
 
-
_html += '<span'
 
-
+ ' style="border:1px solid #333333;padding:1px 5px 1px 5px;height:20px;text-align:center;cursor:'
 
-
+ (_c==i ? ('default;background-color:red;"') : 'hand;" onclick="adRotator.select(' + i + ')"')
 
-
+ '>'
 
-
+ (i>8?(i+1):('0'+(i+1)))+ '</span> ';
 
-
_html += "</div></td></tr></table>";
 
-
getRef(_o).innerHTML = _html;
 
-
getRef("rotatorPic").filters[0].Apply();
 
-
getRef("rotatorPic").filters[0].Play();
 
-
next();
 
-
}
 
-
else
 
-
{
 
-
_i.src = _p[_c];
 
-
adRotator.load();
 
-
}
 
-
}};
 
-
adRotator.next=function() { with (this)
 
-
{
 
-
(_p.length-1==_c) ? _c=0 : _c++;
 
-
_timeout=window.setTimeout(adRotator.play,_s*1000);
 
-
}};
 
-
adRotator.select=function(i) { with (this)
 
-
{
 
-
window.clearTimeout(_timeout);
 
-
_c=i;
 
-
adRotator.play();
 
-
}};
 
-
adRotator.set=function(second) { with (this)
 
-
{
 
-
window.clearTimeout(_timeout);
 
-
if((/\d+/).test(second)==true)
 
-
{
 
-
_s=second;
 
-
adRotator.play();
 
-
}
 
-
else
 
-
{
 
-
alert("must be digit!")
 
-
adRotator.play();
 
-
}
 
-
}};
 
-
function getRef(id)
 
-
{
 
-
return (document.all?document.all(id):document.getElementById(id));
 
-
}
 
-
adRotator.initialize("AdRotator");
 
-
adRotator.add("http://down.tutu001.com/d/file/20110426/0be2da5862d69da29968f66640_560.jpg","aasasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa","http://www.blueidea.com")
 
-
adRotator.add("http://down.tutu001.com/d/file/20110426/0be2da5862d69da29968f66640_560.jpg")
 
-
adRotator.add("************************************.jpg")
 
-
adRotator.add("************************************.jpg")
 
-
adRotator.add("************************************.jpg")
 
-
adRotator.add("************************************.jpg")
 
-
adRotator.play();
 
-
//-->
 
</SCRIPT>
</SCRIPT>
 +
<br />
 +
</td>
 +
<td>
 +
<div id="width_1"></div>
 +
</td>
 +
    <td>
 +
   
 +
<div class="sidebar_box"><div class="sidebar_box_top"></div>
 +
<div class="sidebar_box_content">           
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
</p>
 
-
 
-
 
-
</div>
 
-
    </td>
 
-
          </tr>
 
-
       
 
-
        </table></td>
 
-
    <td valign="TOP" width="305">
 
-
 
-
 
-
<table>
 
-
 
-
 
-
 
-
 
-
  <tr>
 
-
    <td align="left"><div id="talkbubble1"><div class="sidebar_box"><div class="sidebar_box_top"></div>
 
-
<div class="sidebar_box_content">           
 
-
<p class="title1">Tutorial</p>
 
-
<img src="https://static.igem.org/mediawiki/2012/c/c9/Devidingline_side.jpg">
 
-
<span class="date"><strong>In this page,the tutorial of the APP will be showed to you.</strong></span>
 
Line 350: Line 158:
-
 
+
    <dl id="course" width="200">
-
 
+
<dt><strong><a href="#">Tips 1 - 4</a></strong></dt>
-
 
+
  <dd>&nbsp;</dd>
-
 
+
<dt>Tips 5 - 8</dt>
-
 
+
  <dd>&nbsp;</dd>
-
 
+
<dt>Tips 9 - 12</dt>
-
 
+
  <dd>&nbsp;</dd>
-
 
+
<dt>Tips 13 - 16</dt>
-
 
+
  <dd>&nbsp;</dd>
-
 
+
<dt>Tips 17 - 20</dt>
-
 
+
  <dd>&nbsp;</dd>
-
<div id="content">
+
<dt>Tips 21 - 24</dt>
-
<div class="row-1">
+
  <dd>&nbsp;</dd>
-
<div class="inside">
+
<dt>Tips 25 - 28</dt>
-
<div class="container">
+
  <dd>&nbsp;</dd>
-
<div class="aside">
+
<dt>Tips 28 - 32</dt>
-
<ul>
+
  <dd>&nbsp;</dd>
-
<li>
+
</dl>
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />           <a href="#">   Step 1   -   4</a> </li>  <p></p>     <p></p>
+
-
 
+
-
<li>
+
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <a href="#">    Step 5   -   8</a> </li><p></p>     <p></p>
+
-
 
+
-
<li>
+
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <a href="#">    Step 9   -12</a>
+
-
</li><p></p>      <p></p>
+
-
 
+
-
<li>
+
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <a href="#">   Step 13-16</a>
+
-
</li><p></p>      <p></p>
+
-
 
+
-
<li style="list-style-type:none;">
+
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <a href="#">    Step 17-20</a> </li><p></p>      <p></p>
+
-
<li style="list-style-type:none;">
+
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <a href="#">   Step 21-24</a> </li><p></p>     <p></p>
+
-
 
+
-
<li style="list-style-type:none;">
+
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <a href="#">   Step 25-28</a> </li><p></p>      <p></p>
+
-
<li style="list-style-type:none;">
+
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <a href="#">    Step 29-32</a> </li><p></p>      <p></p>
+
-
 
+
-
 
+
-
 
+
-
</ul>
+
-
</div>
+
-
 
+
-
<div class="clear"></div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
</div>                     
</div>                     
             </div>
             </div>
-
</div></td>
+
</div>  
-
      </tr>
+
   
 +
    </td>
 +
  </tr>
</table>
</table>
-
 
-
 
-
</td>
 
-
      </tr>
 
-
</table>
 
-
<!-- end of header -->
 
-
 
</body>
</body>
</html>
</html>

Latest revision as of 16:28, 18 September 2012

无标题文档

This is the first page after you open the app first time. In this page, you can choice your address in order we can choice the best server to provide the data.

This is the first page after you open the app first time. In this page, you can choice your address in order we can choice the best server to provide the data.

This is the first page after you open the app first time. In this page, you can choice your address in order we can choice the best server to provide the data.

This is the first page after you open the app first time. In this page, you can choice your address in order we can choice the best server to provide the data.

Tips 1 - 4
 
Tips 5 - 8
 
Tips 9 - 12
 
Tips 13 - 16
 
Tips 17 - 20
 
Tips 21 - 24
 
Tips 25 - 28
 
Tips 28 - 32
 

Retrieved from "http://2012.igem.org/Team:SUSTC-Shenzhen-A/tutorial"