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: | + | {{Template:SUSTC_A2}} |
- | |||
<html> | <html> | ||
<head> | <head> | ||
- | |||
- | |||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | .sidebar_box_woframe { | |
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | .sidebar_box { | ||
+ | width: 260px; | ||
+ | padding: 0; | ||
- | |||
- | |||
- | |||
} | } | ||
- | + | ||
- | { | + | .sidebar_box_top { |
- | + | width: 260px; | |
- | + | height: 20px; | |
+ | |||
} | } | ||
- | + | .sidebar_box_bottom { | |
- | { | + | width: 260px; |
- | + | height: 20px; | |
+ | margin-bottom: 30px; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | + | ||
- | { | + | .sidebar_box_content { |
- | + | padding: 0 20px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .sidebar_box_content p { | |
- | { | + | margin-bottom: 10px; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
+ | .image_wrapper { | ||
+ | position: relative; | ||
+ | display: block; | ||
+ | width: 218px; | ||
+ | height: 128px; | ||
+ | padding: 9px; | ||
} | } | ||
- | + | .image_wrapper span { | |
- | { | + | position: absolute; |
- | + | 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; } | |
- | { | + | .image_fr { float: right; margin: 3px 0 0 20px; } |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | + | ||
- | + | .title { | |
- | { | + | font-family: "Comic Sans MS", cursive; |
- | + | font-size: xx-large; | |
- | + | color: #698B69; | |
- | + | ||
} | } | ||
- | # | + | .title1 { |
- | { | + | font-family: "Comic Sans MS", cursive; |
- | + | 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; | ||
} | } | ||
- | # | + | #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_c1 { |
- | + | width: 862px; | |
- | + | height:350px; | |
- | + | // 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_c2 { |
- | + | width: 862px; | |
- | + | height:6000px; | |
- | + | // 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_c3 { |
- | + | width: 864px; | |
- | background-color:# | + | 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> | ||
- | + | </head> | |
- | + | <body > | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | <table width="899" border="0" cellspacing="0px" cellpadding="0px" align="center"> | ||
+ | <div> <tr> | ||
+ | <td><div> | ||
+ | <h1 class="title"> BioSearch Tutorial</h1> <ul> | ||
+ | <a href="#Search">Search page | ||
+ | </a> | ||
+ | <a href="#Catalog">Catalog page | ||
+ | </a> | ||
- | < | + | <a href="#Favourite">Favourite page |
- | + | </a> | |
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </ | + | <a href="#More">More |
+ | </a> | ||
+ | <a href="#Video">Video tutorial | ||
+ | </a> | ||
+ | </ul> | ||
+ | <table border="0" cellspacing="0" cellpadding="0"> | ||
+ | <tr> | ||
+ | <td> </td> | ||
+ | </tr> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | <tr><td><a name="Search" ></a> | |
- | + | <p class="title1"> Search page</p> | |
+ | <img src="https://static.igem.org/mediawiki/2012/0/0b/Devidingline_whole.jpg"> | ||
- | + | <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> | |
- | + | <p> </p> | |
- | + | <p class="title"> <--(1)</p> | |
- | < | + | <p> </p> |
- | + | <p> After loading, it’s the search page.</p> | |
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> Click the ‘Tutorial’ button, you can learn how to use the functions of this page. Click ‘Okey’ button to exit.</p> | ||
+ | <p> </p> | ||
+ | <p class="title"> (2)--></p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </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> </p> | ||
+ | <p class="title"> <--(3)</p> | ||
+ | <p> </p> | ||
+ | <p> Click the button in the top right corner, you can choose to add a search keyword. </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> After entering, click ‘return’ button to hide the keyboard.</p> | ||
+ | <p> </p> | ||
+ | <p class="title"> (4)--></p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | </td> | ||
+ | </tr> | ||
- | < | + | <tr> |
- | + | <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> | ||
- | + | <p> </p> | |
- | + | <p class="title"> <--(5)</p> | |
+ | <p> </p> | ||
+ | <p> Click the ‘Search’ button to do the search. The loading will last for a few seconds. </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> 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> </p> | ||
+ | <p class="title"> (6)--></p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | </td> | ||
+ | </tr> | ||
- | < | + | <tr> |
- | + | <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> </p> | ||
+ | <p class="title"> <--(7)</p> | ||
+ | <p> </p> | ||
+ | <p> Click the biobrick name, you can browse the detail information of this BioBrick. </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> 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> </p> | ||
+ | <p class="title"> (8)--></p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | |||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | </td> | ||
+ | </tr> | ||
- | + | <tr> | |
- | + | <td><a name="Catalog" ></a> | |
+ | <p class="title1"> 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> </p> | ||
+ | <p class="title"> <--(9)</p> | ||
+ | <p> </p> | ||
+ | <p> The second page is the catalog page. </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> The‘tutorial’ button is located at the top right corner. Click the ‘Okey’ button to exit.</p> | ||
+ | <p> </p> | ||
+ | <p class="title"> (10)--></p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | </td> | ||
+ | </tr> | ||
- | + | <tr> | |
- | + | <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> </p> | ||
+ | <p class="title"> <--(11)</p> | ||
+ | <p> </p> | ||
+ | <p> Click the option name, you can get the submenu.</p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> Click the ‘list’ button, you can browse all the biobricks in this catagery.</p> | ||
+ | <p> </p> | ||
+ | <p class="title"> (12)--></p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <br/> | ||
- | + | <p> </p> | |
- | + | <p> </p> | |
+ | </td> | ||
+ | </tr> | ||
- | + | <tr> | |
- | + | <td><a name="Favourite" ></a> | |
+ | <p class="title1"> 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> </p> | ||
+ | <p class="title"> <--(13)</p> | ||
+ | <p> </p> | ||
+ | <p> In the "favorites" page, you can see all the biobricks you have added.</p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> Click the ‘edit’ button to enter the edit mode. Click the ‘done’ button to exit.</p> | ||
+ | <p> </p> | ||
+ | <p class="title"> (14)--></p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | </td> | ||
+ | </tr> | ||
- | + | <tr> | |
- | + | <td> | |
- | + | <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> | |
- | + | <p> </p> | |
- | + | <p class="title"> <--(15)</p> | |
- | </ | + | <p> </p> |
+ | <p> Click the ‘browse’ button, you can choose the way to browse your bookmarks.</p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <br/> | ||
- | + | <p> </p> | |
+ | <p> </p> | ||
+ | </td> | ||
+ | </tr> | ||
- | </div> | + | <tr> |
+ | <td><a name="More" ></a> | ||
+ | <p class="title1"> 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> </p> | ||
+ | <p class="title"> <--(16)</p> | ||
+ | <p> </p> | ||
+ | <p> In the "more" page, you can get some information about synthetic biology and biobricks.</p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> On the bottom, there is the feedback part.</p> | ||
+ | <p> </p> | ||
+ | <p class="title"> (17)--></p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </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> </p> | ||
+ | <p class="title"> <--(18)</p> | ||
+ | <p> </p> | ||
+ | <p> The ‘About us’ part show the information of our team.</p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> Click the ‘Compose the mail’ to send your suggestion to us.</p> | ||
+ | <p> </p> | ||
+ | <p class="title"> (19)--></p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | </br> | ||
+ | </br> | ||
+ | </br> | ||
+ | </br> | ||
+ | <a name="Video"></a> | ||
+ | <p class="title1"> Video tutorial</p> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/0/0b/Devidingline_whole.jpg"> | ||
+ | <p> </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