Team:SUSTC-Shenzhen-A/tutorial

From 2012.igem.org

(Difference between revisions)
 
(80 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;
 
-
}
 
-
</style>
 
-
</head>
 
-
<body >
 
-
<table align="center">
+
#width_1{width:60px}
-
  <tr>
+
-
+
-
    <td valign="TOP"><table>
+
-
      <tr>
+
-
        <td width="584" align="center"><div align="left" id="talkbubble">
+
-
            <p class="title"><strong>Welcome to Biosearch</strong></p>
 
-
<p>
+
  #course {
 +
border-width:0px 1px 1px 1px;
 +
border-style:solid;
 +
border-color:#f3c3f3;
 +
width:150px;
 +
}
 +
  #course dt,#course dd {
 +
margin:0;
 +
padding:3px;
 +
font-size:25px;
 +
}
 +
  #course dt {
 +
border-top: 1px solid #f3c3f3;
 +
font-weight: bold;
 +
background-color:#c3f3c3;
 +
}
 +
</STYLE>
 +
</head>
 +
<body>
 +
<table align="center" width="900" border="0">
 +
  <tr>
 +
    <td><DIV id=con>
 +
<UL id=tags>
 +
  <LI><A onMouseOver="selectTag('tagContent0',this)"
 +
  href="javascript:void(0)"> <em><strong>Tip  1 </strong></em><strong></strong></A> </LI>
 +
  <LI class=selectTag><A onMouseOver="selectTag('tagContent1',this)"
 +
  href="javascript:void(0)"> <em><strong>Tip  2 </strong></em><strong></strong></A> </LI>
 +
  <LI><A onMouseOver="selectTag('tagContent2',this)"
 +
  href="javascript:void(0)"> <em><strong>Tip  3 </strong></em><strong></strong></A> </LI>
 +
    <LI><A onMouseOver="selectTag('tagContent3',this)"
 +
  href="javascript:void(0)"> <em><strong>Tip  4 </strong></em><strong></strong></A> </LI>
 +
  </UL>
 +
<DIV id=tagContent>
 +
<DIV class=tagContent id=tagContent0>
 +
  <table width="458" border="0">
 +
    <tr>
 +
      <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_01.png" width="300" height="500"></td>
 +
      <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>
 +
  </table></DIV>
 +
<DIV class="tagContent selectTag" id=tagContent1>
 +
  <table width="458" border="0">
 +
    <tr>
 +
      <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_02.png" width="300" height="500"></td>
 +
      <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>
 +
  </table>
 +
</DIV>
 +
<DIV class=tagContent id=tagContent2>
 +
<table width="458" border="0">
 +
    <tr>
 +
      <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_03.png" width="300" height="500"></td>
 +
      <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>
 +
  </table></DIV>
 +
<DIV class=tagContent id=tagContent3>
 +
<table width="458" border="0">
 +
    <tr>
 +
      <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_04.png" width="300" height="500"></td>
 +
      <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>
 +
  </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";
 +
}
 +
</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>
 
-
      <tr>
 
-
        <td align="center"><div div align="left" id="talkbubble_a">
 
-
            <p class="title">Team abstract</p>
 
-
<div class="image_wrapper image_fr"><span></span><img src="https://static.igem.org/mediawiki/2012/b/bd/Test.jpg"" alt="image 2" /></div>
 
-
This iGEM team is set up by South University of Science and Technology of China, which is a public institution funded by the municipality of Shenzhen, a special economic zone city in southern China.
 
-
The team is multi-disciplinary with sophomore undergrads.
 
-
</div>
 
-
<img src="https://static.igem.org/mediawiki/2012/f/f1/Devidingline.jpg" longdesc="https://static.igem.org/mediawiki/2012/f/f1/Devidingline.jpg">
 
-
      </td>
 
-
          </tr>
 
-
      <tr>
 
-
        <td align="center"><div div align="left" id="talkbubble_b">
 
-
            <p class="title">project</p>
 
-
The website "Registry of Standard Biological Parts" promotes the development of synthetic biology through providing genetic parts. To expand its influence in data exchange, we found it necessary to build an app client for it. In order to save time in searching BioBrick, simplify the process of selecting classifications, and facilitate changing selected category, we will dedicate ourselves to adjust database structure so that we can change the interface of BioBrick searching into spinner-formed .(need a tour)
 
-
</div></td>
 
-
          </tr>     
 
-
        </table></td>
 
-
    <td valign="TOP" width="305">
 
-
<table>
 
-
  <tr>
 
-
    <td align="left"><object type="application/x-shockwave-flash" height="137.5" width="275" data="http://www.usflashmap.com/component/cdt_new/cdt2_1.swf">
 
-
<param name="movie" value="http://www.usflashmap.com/component/cdt_new/cdt2_1.swf" />
 
-
<param name="base" value="http://www.usflashmap.com/component/cdt_new/" />
 
-
<param name="flashvars" value="
 
-
      &timer=1&
 
-
      &time_template=3:ss;2:mm;1:hh;0:dd&
 
-
      &time_color=0x000000&
 
-
      &label_color=0x000000&
 
-
      &background_color=0xFFFFFF&
 
-
      &flare_view=true&
 
-
      &time_label=d:DAY;h:HOUR;m:MIN;s:SEC&
 
-
      &time_zone=Local time&
 
-
      &event_time=year:2012;month:10;day:1;hour:0;minute:0;seconds:0&
 
-
      &event_duration=year:0;month:0;day:0;hour:0;minute:0;seconds:0&
 
-
      &event_recursion=hourly&
 
-
      &title=time to SUSTC！&
 
-
      &event_title=Now the day comes!&
 
-
      &onpress_url=-&
 
-
      &event_onpress_url=-&
 
-
      &sound_file=-&
 
-
      &event_sound_file=-&
 
-
      &transparent=true&
 
-
" />
 
-
<param name="quality" value="high" />
 
-
<param name="wmode" value="transparent" />
 
-
<param name="scale" value="noscale" />
 
-
<param name="salign" value="lt" />
 
-
</object>
 
-
<p>&nbsp;</p>
 
-
</td>
 
-
      </tr>
 
-
  <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">Recent News</p>
 
-
<img src="https://static.igem.org/mediawiki/2012/c/c9/Devidingline_side.jpg">
 
-
<p>&nbsp;</p>
 
-
<span class="date"><strong>16 Aug 2012</strong></span>
 
-
            <p>a line to devide the title and content is needed.</p>
 
-
            <p>main page work remains fixing the size of the img frame</p>
 
-
            <p>adding details...</p>
 
-
<span class="date"><strong>20 Aug 2012</strong></span>
 
-
            <p>The first project has been updated.</p>
 
-
            <p>Preparing putting our app in the store!</p>
 
 +
<div class="sidebar_box_bottom">
-
<div class="sidebar_box_bottom"></div>                  
+
    <dl id="course" width="200">
-
            </div>
+
<dt><strong><a href="#">Tips 1 - 4</a></strong></dt>
-
</div></td>
+
  <dd>&nbsp;</dd>
-
      </tr>
+
<dt>Tips 5 - 8</dt>
-
</table>
+
  <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>
 +
<dt>Tips 21 - 24</dt>
 +
  <dd>&nbsp;</dd>
 +
<dt>Tips 25 - 28</dt>
 +
  <dd>&nbsp;</dd>
 +
<dt>Tips 28 - 32</dt>
 +
  <dd>&nbsp;</dd>
 +
</dl>
-
</td>
+
</div>                   
-
      </tr>
+
            </div>
 +
</div>   
 +
   
 +
    </td>
 +
  </tr>
</table>
</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"