Team:SUSTC-Shenzhen-A/Biodesign Tutorial
From 2012.igem.org
(Difference between revisions)
Line 102: | Line 102: | ||
#talkbubble_c2 { | #talkbubble_c2 { | ||
width: 862px; | width: 862px; | ||
- | height: | + | height:6000px; |
// background:#EFEFEF; | // background:#EFEFEF; | ||
background:#ffffff; | background:#ffffff; | ||
Line 150: | Line 150: | ||
} | } | ||
</style> | </style> | ||
+ | |||
</head> | </head> | ||
<body > | <body > | ||
- | <table width="899" border="0" cellspacing=" | + | <table width="899" border="0" cellspacing="0px" cellpadding="0px" align="center"> |
<div> <tr> | <div> <tr> | ||
- | <td> | + | <td><div> |
- | < | + | <h1 class="title"> Search Tutorial</h1> <ul> |
+ | <a href="#Folder">Folder page | ||
+ | </a> | ||
- | < | + | <a href="#File">File page |
- | <a href="# | + | </a> |
- | <a href="# | + | |
- | <a href="# | + | <a href="#Drawing">Drawing page |
- | </ul> | + | </a> |
+ | |||
+ | <a href="#Mail">Mail page | ||
+ | </a> | ||
+ | <a href="#Video">Video tutorial | ||
+ | </a> | ||
+ | </ul> | ||
+ | <table border="0" cellspacing="0" cellpadding="0"> | ||
+ | <tr> | ||
+ | <td> </td> | ||
+ | </tr> | ||
+ | |||
+ | |||
+ | <tr><td><a name="Folder" ></a> | ||
+ | <p class="title1"> Folder 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/e6/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_1.png" valign="top" align="left" width="300" style="BORDER:#CCFFCC 5px dashed;margin:10px;" ><img src="https://static.igem.org/mediawiki/2012/b/b7/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_2.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> Fig.1 is the first page. </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> In order to create a new project/folder, you should click the ‘add’ button at the top right (Fig.2).</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> | </td> | ||
- | </tr> | + | </tr> |
+ | <tr> | ||
+ | <td> | ||
+ | <p><img src="https://static.igem.org/mediawiki/2012/3/35/SUSTC-Shenzhen-A_BioDesign_tutorial_fig_3.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 icon, then click ‘enter’, it goes into the secondary page (Fig.3).</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>< | + | <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> | ||
+ | <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> | </td> | ||
- | + | </tr> | |
- | + | ||
- | </tr> | + | |
- | <tr><td>< | + | <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> | + | <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 | + | <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> | </td> | ||
- | + | </tr> | |
- | + | ||
- | </tr> | + | |
- | <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/> | ||
- | <tr><td>< | + | <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> | + | <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> | </td> | ||
</tr> | </tr> | ||
- | </ | + | |
+ | <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> | </table> | ||
+ | </p> | ||
+ | <div></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </table> | ||
+ | |||
+ | |||
Revision as of 04:36, 26 October 2012