Team:SUSTC-Shenzhen-A/Biosearch Tutorial

From 2012.igem.org

(Difference between revisions)
(Created page with "{{Template:SUSTC_A}} <!--#F6C739 土黄色 #C3D46A 深绿色 #00BFFF深天蓝 #FF69B4 hotpink--> <html> <head> <style type="text/css"> <!--我们需要先把igem...")
m
 
(50 intermediate revisions not shown)
Line 1: Line 1:
-
{{Template:SUSTC_A}}
+
{{Template:SUSTC_A2}}
-
<!--#F6C739  土黄色    #C3D46A 深绿色      #00BFFF深天蓝  #FF69B4 hotpink-->
 
<html>
<html>
<head>
<head>
-
 
-
 
<style type="text/css">
<style type="text/css">
-
<!--我们需要先把igem原网站的一些东西删掉-->
 
-
#globalWrapper {width: 100%;  }
 
-
#top-section {width: 100%; height:100%; border:none;}
 
-
#p-logo {display:none;}
 
-
#search-controls {display:none;}
 
-
.printfooter {display:none;}
 
-
#footer-box {border:none;}
 
-
.firstHeading {display:none;}
 
-
#content { border:none;  }
 
-
#bodyContent {border:none;  }
 
-
<!--删除完毕-->
+
.sidebar_box_woframe {
 +
margin-bottom: 20px;
 +
}
 +
 
 +
.sidebar_box {
 +
width: 260px;
 +
padding: 0;
-
body
 
-
{
 
-
  background-color:#CCFFCC;
 
}
}
-
#sustc_wrapper
+
 
-
{
+
.sidebar_box_top {
-
  width:100%;
+
width: 260px;
-
  margin:0 auto;
+
height: 20px;
 +
 
}
}
-
#sustc_header
+
.sidebar_box_bottom {
-
{
+
width: 260px;
-
  height:285px;
+
height: 20px;
 +
margin-bottom: 30px;
-
  border-width:4px;
 
-
  border-color: #FF9900 ;
 
-
  border-style:solid none solid none;
 
-
  background-color:#CCFFCC;
 
-
 
 
-
 
}
}
-
#sustc_menu
+
 
-
{
+
.sidebar_box_content {
-
  height:35px;
+
padding: 0 20px;
-
  width:920px;
+
-
  margin-left:20px;
+
-
  color:blue;
+
-
  display:block;
+
-
<!--  background-color:yellow;-->
+
-
  border-radius: 7px;
+
-
  background-color:#CCFFCC;
+
-
+
}
}
-
#sustc_menu li
+
.sidebar_box_content p {
-
{
+
margin-bottom: 10px;
-
  list-style:none;
+
-
  float:left;
+
-
  display:block;
+
-
  margin-left:10px;
+
-
<!-- background-color:green;-->
+
-
  height:35px;
+
-
  width:130px;
+
-
  border-radius:7px;
+
-
  text-align:center;
+
-
 
+
}
}
-
.mainMenuBtn
 
-
{
 
-
  padding-left:10px;
 
 +
.image_wrapper {
 +
position: relative;
 +
display: block;
 +
width: 218px;
 +
height: 128px;
 +
padding: 9px;
}
}
-
#sustc_menu a
+
.image_wrapper span {
-
{
+
position: absolute;
-
  padding-top:10px;
+
left: 0;
-
  padding-left:10px;
+
top: 0;
 +
width: 236px;
 +
height: 144px;
 +
background: url(https://static.igem.org/mediawiki/2012/3/3d/Fruit_site_templatemo_image_frame.png) no-repeat;
}
}
-
#sustc_menu li:hover
+
.image_fl { float: left; margin: 3px 20px 0 0; }
-
{
+
.image_fr { float: right; margin: 3px 0 0 20px; }
-
<!-- background-color:red-->
+
-
  border-radius: 7px;
+
-
  text-decoration;
+
-
  background-color:#FF9900;
+
-
}
+
-
 
+
-
#sustc_menu a
+
.title {
-
{
+
font-family: "Comic Sans MS", cursive;
-
  margin:0;
+
font-size: xx-large;
-
  padding-bottom:10px;
+
color: #698B69;
-
  display:block;
+
}
}
-
#sust_menu a:hover
+
.title1 {
-
{
+
font-family: "Comic Sans MS", cursive;
-
  background-color:#FF9900
+
font-size: x-large;
 +
color: #000;
 +
}
 +
.title2 {
 +
font-family: "Comic Sans MS", cursive;
 +
font-size: large;
 +
color: #000;
 +
}
 +
.date {
 +
      font-family: serif, cursive, fantasy;
 +
      color:#5f3c23;
}
}
-
#sustc_menu li li
+
#talkbubble_a {
-
{
+
  width: 544px;  
-
  margin-left:0px;
+
  height:200px;  
-
  float:none;
+
//   background:#EFEFEF;
-
   text-align:left;
+
  background:#ffffff;
-
  padding-left:10px;
+
  position: relative;
-
  padding-top:5px;
+
  -moz-border-radius:   0px;  
-
  width:130px;
+
  -webkit-border-radius: 0px;  
-
<!-- background-color:black;-->
+
  border-radius:        10px;
-
  background-color:#C3D46A ;
+
  font-family: Tahoma, Geneva, sans-serif;
 +
  font-size: 13px;
 +
  color:#333;
}
}
-
#sustc_menu li ul { /* second-level lists */
+
#talkbubble_c1 {
-
position: absolute;
+
  width: 862px;  
-
width: 140px;
+
  height:350px;  
-
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
+
//  background:#EFEFEF;
-
margin-top:2.2em;
+
  background:#ffffff;
-
        border-width:1px;
+
  position: relative;
-
        border-color: #C3D46A ;
+
  -moz-border-radius:   0px;  
-
        border-style:solid;
+
  -webkit-border-radius: 0px;  
-
        border-radius: 7px;
+
  border-radius:         10px;
-
        background-color:#C3D46A ;
+
  font-family: Tahoma, Geneva, sans-serif;
-
        z-index:2;
+
  font-size: 13px;
 +
  color:#333;
}
}
-
#sustc_menu li:hover ul
+
#talkbubble_c2 {
-
{
+
  width: 862px;
-
   margin-left: 0px;
+
  height:6000px;
-
  margin-top:0;
+
//   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;
}
}
-
#sustc_menu li li:hover
+
#talkbubble_c3 {
-
{
+
  width: 864px;
-
   background-color:#FF69B4 ;
+
  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;
}
}
 +
#talkbubble1 {
 +
  width: 275px;
 +
  height:300px;
 +
//  background:#FAF0E6;
 +
  background:#f2eada;
 +
  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: 14px;
 +
  color:#333;
 +
font-family: Tahoma, Geneva;
 +
}
 +
</style>
-
.ibox{width:900px;height:210px;background:#FF9900;margin:1em auto;border:1em solid #ddd;position:relative;overflow:hidden;border-color:#FF9900;  border-radius:7px;
+
</head>
-
        z-index:1;}
+
<body >
-
.ibox .showbox{position:absolute;left:0;width:2700px;height:170px;background:#fff;border-radius:7px;}
+
-
.ibox .showbox ul li{float:left;margin:7px;list-style:none;}
+
-
.ibox .showbox ul li img{border:3px solid #a40000;}
+
-
.ibox span{position:absolute;padding:2px 5px;background:#fff;cursor:pointer;}
+
-
.ibox span.pre{left:10px;bottom:0;background-color:#00BFFF;border-radius:7px;}
+
-
.ibox span.next{right:10px;bottom:0;background-color:#00BFFF;border-radius:7px;}
+
-
.ibox span.num{right:45%;bottom:0;background:#FF9900;line-height:18px;}
+
-
.ibox span.num li{display:inline;margin:0 5px;padding:1px 5px;line-height:18px;}
+
-
.ibox span.num .numcur{background:#FF69B4;color:#fff;}
+
 +
<table width="899" border="0" cellspacing="0px" cellpadding="0px" align="center">
 +
<div>  <tr>
 +
    <td><div>
 +
<h1 class="title">&nbsp;BioSearch Tutorial</h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul>
 +
        <a href="#Search">Search page 
 +
              </a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 +
        <a href="#Catalog">Catalog page
 +
              </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-
</style>
+
        <a href="#Favourite">Favourite page
-
<script src="http://www.csrcode.cn/images/jquery-1.4.min.js"></script>
+
              </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-
<script type="text/javascript">
+
-
/**
+
-
* @author Mr.Think
+
-
* @author blog http://mrthink.net
+
-
* @2010.07.23
+
-
* 可自由转载及使用,但请注明版权归属
+
-
*/
+
-
$(function(){
+
-
    //@Mr.Think***变量
+
-
    var $cur = 1;//初始化显示的版面
+
-
    var $i = 5;//每版显示数
+
-
    var $len = $('.showbox>ul>li').length;//计算列表总长度(个数)
+
-
    var $pages = Math.ceil($len / $i);//计算展示版面数量
+
-
    var $w = $('.ibox').width();//取得展示区外围宽度
+
-
    var $showbox = $('.showbox');
+
-
    var $num = $('span.num li')
+
-
    var $pre = $('span.pre')
+
-
    var $next = $('span.next');
+
-
    var $autoFun;
+
-
//@Mr.Think***调用自动滚动
+
-
    autoSlide();
+
-
//@Mr.Think***向前滚动
+
-
    $pre.click(function(){
+
-
        if (!$showbox.is(':animated')) {//判断展示区是否动画
+
-
            if ($cur == 1) {//在第一个版面时,再向前滚动到最后一个版面
+
-
                $showbox.animate({
+
-
                    left: '-=' + $w * ($pages - 1)
+
-
                }, 1000);//改变left值,切换显示版面,500(ms)为滚动时间,下同
+
-
                $cur = $pages;//初始化版面为最后一个版面
+
-
            }
+
-
            else {
+
-
                $showbox.animate({
+
-
                    left: '+=' + $w
+
-
                }, 500);//改变left值,切换显示版面
+
-
                $cur--;//版面累减
+
-
            }
+
-
            $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur');//为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
+
-
        }
+
-
    });
+
-
    //@Mr.Think***向后滚动
+
-
    $next.click(function(){
+
-
        if (!$showbox.is(':animated')) {//判断展示区是否动画
+
-
            if ($cur == $pages) {//在最后一个版面时,再向后滚动到第一个版面
+
-
                $showbox.animate({
+
-
                    left: 0
+
-
                }, 500);//改变left值,切换显示版面,500(ms)为滚动时间,下同
+
-
                $cur = 1;//初始化版面为第一个版面
+
-
            }
+
-
            else {
+
-
                $showbox.animate({
+
-
                    left: '-=' + $w
+
-
                }, 500);//改变left值,切换显示版面
+
-
                $cur++;//版面数累加
+
-
            }
+
-
            $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur');//为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
+
-
        }
+
-
    });
+
-
    //@Mr.Think***数字点击事件
+
-
    $num.click(function(){
+
-
        if (!$showbox.is(':animated')) {//判断展示区是否动画
+
-
            var $index = $num.index(this);//索引出当前点击在列表中的位置值
+
-
            $showbox.animate({
+
-
                left: '-' + ($w * $index)
+
-
            }, 500);//改变left值,切换显示版面,500(ms)为滚动时间
+
-
            $cur = $index + 1;//初始化版面值,这一句可避免当滚动到第三版时,点击向后按钮,出面空白版.index()取值是从0开始的,故加1
+
-
            $(this).addClass('numcur').siblings().removeClass('numcur');//为当前点击加上高亮样式,并移除同级元素的高亮样式
+
-
        }
+
-
    });
+
-
    //@Mr.Think***停止滚动
+
-
    clearFun($showbox);
+
-
    clearFun($pre);
+
-
    clearFun($next);
+
-
    clearFun($num);
+
-
    //@Mr.Think***事件划入时停止自动滚动
+
-
    function clearFun(elem){
+
-
        elem.hover(function(){
+
-
            clearAuto();
+
-
        }, function(){
+
-
            autoSlide();
+
-
        });
+
-
    }
+
-
    //@Mr.Think***自动滚动
+
-
    function autoSlide(){
+
-
        $next.trigger('click');
+
-
        $autoFun = setTimeout(autoSlide, 3000);//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效
+
-
    }
+
-
    //@Mr.Think***清除自动滚动
+
-
    function clearAuto(){
+
-
        clearTimeout($autoFun);
+
-
    }
+
-
});
+
-
</script>
+
-
</head>
+
        <a href="#More">More 
 +
              </a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 +
        <a href="#Video">Video tutorial
 +
              </a>
 +
            </ul>
 +
<table border="0" cellspacing="0" cellpadding="0">
 +
  <tr>
 +
    <td>&nbsp;</td>
 +
  </tr>
-
<body class="bkcolor" >
 
-
<div id="sustc_wrapper">
 
-
  <div id="sustc_header">
 
-
<div id="demo" class="ibox">
 
-
<div class="showbox">
 
-
  <ul>
 
-
  <li ><a href="http://www.sustc.edu.cn/"><img src="https://static.igem.org/mediawiki/2012/3/38/SUSTC_Logo.jpg" alt="logo of SUSTC" title="logo of SUSTC"
 
-
              style="margin-top:40px" width="200px"  height="60px"/>    </a></li>
 
-
    <li ><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A"><img src="https://static.igem.org/mediawiki/2012/b/bd/Team_logo.png" alt="Team logo"
+
<tr><td><a name="Search" ></a>
-
            title="Team logo" style="margin-top:-3px" width="130px"  height="150px"/>    </a></li>
+
<p class="title1">&nbsp;&nbsp;Search page</p>
 +
<img src="https://static.igem.org/mediawiki/2012/0/0b/Devidingline_whole.jpg">
-
    <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/3/33/Search_page.png" alt="search page"  
+
<p><img src="https://static.igem.org/mediawiki/2012/e/e4/BiosearchPage1.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ><img src="https://static.igem.org/mediawiki/2012/0/0d/BiosearchPage2.png" valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
-
            title="search page" style="margin-top:-3px" width="80px"  height="150px"></a></li>
+
      <p>&nbsp;&nbsp;</p>
-
    
+
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(1)</p>
-
     <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/2/2e/Detail_search_result_page.png "  
+
      <p>&nbsp;&nbsp;</p>
-
          alt="search result page" title="search result page" style="margin-top:-3px" width="80px" height="150px"></a></li>
+
      <p>&nbsp;&nbsp;After loading, it’s the search page.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the ‘Tutorial’ button, you can learn how to use the functions of this page. Click ‘Okey’ button to exit.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
   </tr>
 +
  <tr>
 +
     <td>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/3/34/BiosearchPage3.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="https://static.igem.org/mediawiki/2012/4/4e/BiosearchPage4.png" valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(3)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the button in the top right corner, you can choose to add a search keyword. </p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;After entering, click ‘return’ button to hide the keyboard.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(4)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
-
     <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/8/84/Part_device_page.png" alt="category page"  
+
  <tr>
-
            title="category page" style="margin-top:-3px" width="80px" height="150px"></a></li>
+
     <td>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/c/c3/BiosearchPage5.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="https://static.igem.org/mediawiki/2012/e/e2/BiosearchPage6.png" valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
-
    <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/1/1f/Help_page.png " alt="help page"
+
      <p>&nbsp;&nbsp;</p>
-
            title="help page" style="margin-top:-3px" width="80px"  height="150px"></a></li>
+
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(5)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the ‘Search’ button to do the search. The loading will last for a few seconds. </p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;You can get the result. Each record shows whether the biobrick is available or not and the short description of this biobrick. <strong>You can also click the right corner button to do a second level search.</strong></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(6)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
-
     <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/4/47/Bookmark_page.png  " alt="bookmark page"  
+
  <tr>
-
            title="bookmark page" style="margin-top:-3px" width="80px" height="150px"></a></li>
+
     <td>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/0/0e/BiosearchPage7.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="https://static.igem.org/mediawiki/2012/4/43/BiosearchPage8.png" valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(7)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the biobrick name, you can browse the detail information of this BioBrick. </p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the ‘add’ button, you can add this biobrick to your bookmark (Favorites). In the alert, you can add your own tag to this biobrick. <strong>You need to click the ‘return’ button to submit.</strong></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(8)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
-
  <li><img src="https://static.igem.org/mediawiki/2012/1/14/IMG_1180change%281%29.jpg" alt="Trip to BGI" title="Trip to BGI" style="margin-top:-3px" width="260px"   
+
  <tr>
-
            height="150px"></li>
+
    <td><a name="Catalog" ></a>
 +
<p class="title1">&nbsp;&nbsp;Catalog page</p>
 +
<img src="https://static.igem.org/mediawiki/2012/0/0b/Devidingline_whole.jpg">
 +
    <p><img src="https://static.igem.org/mediawiki/2012/2/26/BiosearchPage9.png" valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="https://static.igem.org/mediawiki/2012/b/bf/BiosearchPage10.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(9)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;The second page is the catalog page. </p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;The‘tutorial’ button is located at the top right corner. Click the ‘Okey’ button to exit.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(10)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
-
  <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Team"><img src="https://static.igem.org/mediawiki/2012/a/a3/SUSTC-Shenzhen-A_team.png" alt="Team"
+
  <tr>
-
            title="We are working" style="margin-top:-3px" width="260px" height="150px"></a></li>
+
    <td>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/1/10/BiosearchPage11.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="https://static.igem.org/mediawiki/2012/0/0d/BiosearchPage12.png" valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(11)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the option name, you can get the submenu.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the ‘list’ button, you can browse all the biobricks in this catagery.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(12)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
<br/>
-
  <li ><a href="http://www.sustc.edu.cn/"><img  src="https://static.igem.org/mediawiki/2012/d/d4/Logo.jpg" alt="SUSTC" title="SUSTC"  style="margin-top:20px"
+
      <p>&nbsp;&nbsp;</p>
-
            width="200px"  height="100px"/></a></li>
+
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
-
  <li ><a href="http://www.sustc.edu.cn/"><img src="https://static.igem.org/mediawiki/2012/a/aa/School_view.jpg " alt="SUSTC" title="SUSTC" style="margin-top:20px"  
+
  <tr>
-
            width="200px" height="100px"/></a></li>
+
    <td><a name="Favourite" ></a>
 +
<p class="title1">&nbsp;&nbsp;Favourite page</p>
 +
<img src="https://static.igem.org/mediawiki/2012/0/0b/Devidingline_whole.jpg">
 +
    <p><img src="https://static.igem.org/mediawiki/2012/b/bb/BiosearchPage13.png" valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="https://static.igem.org/mediawiki/2012/3/31/BiosearchPage14.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(13)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;In the "favorites" page, you can see all the biobricks you have added.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the ‘edit’ button to enter the edit mode. Click the ‘done’ button to exit.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(14)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
-
  <li><img src="/images/m04.jpg" alt="demo" title="demo"></li>
+
<tr>
-
  <li><img src="/images/m05.jpg" alt="demo" title="demo"></li>
+
    <td>
-
  </ul>
+
    <p><img src="https://static.igem.org/mediawiki/2012/3/34/BiosearchPage15.png" valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ></p>
-
</div>
+
      <p>&nbsp;&nbsp;</p>
-
    <span class="pre">&lt;&lt;Roll to the left</span><span class="next">Roll to the right&gt;&gt;</span><span class="num"><ol><li class="numcur">1</li><li>2</li><li>3</li></ol></sapn>
+
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(15)</p>
-
</div>
+
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the ‘browse’ button, you can choose the way to browse your bookmarks.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
<br/>
-
  </div>     <!--end of header-->
+
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
-
</div>     <!--end of wrapper-->
+
  <tr>
 +
    <td><a name="More" ></a>
 +
<p class="title1">&nbsp;&nbsp;More</p>
 +
<img src="https://static.igem.org/mediawiki/2012/0/0b/Devidingline_whole.jpg">
 +
    <p><img src="https://static.igem.org/mediawiki/2012/d/dc/BiosearchPage16.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="https://static.igem.org/mediawiki/2012/6/64/BiosearchPage17.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(16)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;In the "more" page, you can get some information about synthetic biology and biobricks.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;On the bottom, there is the feedback part.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(17)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</td>
 +
  </tr>
 +
 
 +
  <tr>
 +
    <td>
 +
    <p><img src="https://static.igem.org/mediawiki/2012/e/ef/BiosearchPage19.png"  valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:5px;" ><img src="https://static.igem.org/mediawiki/2012/5/5c/BiosearchPage20.png"  valign="top" align="right" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;<--(18)</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;The ‘About us’ part  show the information of our team.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;Click the ‘Compose the mail’ to send your suggestion to us.</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(19)--></p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
      <p>&nbsp;&nbsp;</p>
 +
</br>
 +
</br>
 +
</br>
 +
</br>
 +
      <a name="Video"></a>
 +
      <p class="title1">&nbsp;&nbsp;Video tutorial</p>
 +
      <img src="https://static.igem.org/mediawiki/2012/0/0b/Devidingline_whole.jpg">
 +
      <p>&nbsp;&nbsp;</p>
 +
<p align="center"><embed src="http://player.youku.com/player.php/sid/XNDU1MTY3OTQ0/v.swf" play="true"  quality="high" width="540" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed></p><a name="video"></a>
 +
</td>
 +
  </tr>
 +
 
 +
</table>
 +
</p>
 +
<div></td>
 +
      </tr>
 +
</table>
 +
</table>
 +
 
 +
 
 +
 
 +
 
 +
<!-- end of header -->
</body>
</body>
</html>
</html>
-
 
[[file:footbar.jpg|center]]
[[file:footbar.jpg|center]]

Latest revision as of 10:32, 26 October 2012

 BioSearch Tutorial

      
 

  Search page

  

    <--(1)

  

  After loading, it’s the search page.

  

  

  

  

  

  

  Click the ‘Tutorial’ button, you can learn how to use the functions of this page. Click ‘Okey’ button to exit.

  

        (2)-->

  

  

  

  

  

  

  

  

  

  

    <--(3)

  

  Click the button in the top right corner, you can choose to add a search keyword.

  

  

  

  

  

  

  After entering, click ‘return’ button to hide the keyboard.

  

        (4)-->

  

  

  

  

  

  

  

  

  

  

    <--(5)

  

  Click the ‘Search’ button to do the search. The loading will last for a few seconds.

  

  

  

  

  

  You can get the result. Each record shows whether the biobrick is available or not and the short description of this biobrick. You can also click the right corner button to do a second level search.

  

        (6)-->

  

  

  

  

  

  

  

  

  

  

    <--(7)

  

  Click the biobrick name, you can browse the detail information of this BioBrick.

  

  

  

  

  

  

  Click the ‘add’ button, you can add this biobrick to your bookmark (Favorites). In the alert, you can add your own tag to this biobrick. You need to click the ‘return’ button to submit.

  

        (8)-->

  

  

  

  

  

  

  Catalog page

  

    <--(9)

  

  The second page is the catalog page.

  

  

  

  

  

  The‘tutorial’ button is located at the top right corner. Click the ‘Okey’ button to exit.

  

        (10)-->

  

  

  

  

  

  

  

  

  

  

    <--(11)

  

  Click the option name, you can get the submenu.

  

  

  

  

  

  Click the ‘list’ button, you can browse all the biobricks in this catagery.

  

        (12)-->

  

  

  

  

  

  


  

  

  Favourite page

  

    <--(13)

  

  In the "favorites" page, you can see all the biobricks you have added.

  

  

  

  

  

  Click the ‘edit’ button to enter the edit mode. Click the ‘done’ button to exit.

  

        (14)-->

  

  

  

  

  

  

  

  

  

  

    <--(15)

  

  Click the ‘browse’ button, you can choose the way to browse your bookmarks.

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  


  

  

  More

  

    <--(16)

  

  In the "more" page, you can get some information about synthetic biology and biobricks.

  

  

  

  

  

  On the bottom, there is the feedback part.

  

        (17)-->

  

  

  

  

  

  

  

  

  

  

    <--(18)

  

  The ‘About us’ part show the information of our team.

  

  

  

  

  

  Click the ‘Compose the mail’ to send your suggestion to us.

  

        (19)-->

  

  

  

  

  

  

  





  Video tutorial

  

Footbar.jpg
Retrieved from "http://2012.igem.org/Team:SUSTC-Shenzhen-A/Biosearch_Tutorial"