Biomod/2011/TeamJapan/Sendai: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
No edit summary
No edit summary
Line 6: Line 6:


<html>
<html>
<div><img src="Japanese2.png" >
<div>[[Image:Japanese2.png]]
</div></html>
</div></html>
<!-- 消去OK -->
<!-- 消去OK -->

Revision as of 22:05, 5 February 2012

<html>

<style rel="stylesheet" type="text/css"> 

      .clear {clear:both;}
 #verticalmenu {

/*this .CSS is inspired by http://www.javascriptkit.com/ */ font-family: "Comic Sans MS" , "Brush Script MT",serif, sans-serif, monospace, cursive, fantasy; list-style:none;}

  1. verticalmenu a:hover {

color: #aa1d1d; /* color when the click is over the main menu text-transform: uppercase; font-size: 10px; */


}

a:visited { color:#00a5ea; text-decoration: none }

.glossymenu, .glossymenu li ul{ list-style-type: none; margin: 0; padding: 0; width: 250px; /*WIDTH OF MAIN MENU ITEMS*/ border: 1px solid black; list-style:none; }

.glossymenu li{ position: relative; }

.glossymenu li a{ background: white url(http://openwetware.org/images/a/a7/Glossyback2.jpg) repeat-x bottom left; font: bold 17px Verdana, Helvetica, sans-serif; color: white; display: block; width: auto; padding: 10px 0; padding-left: 10px; text-decoration: none; }

.glossymenu li ul{ /*SUB MENU STYLE*/ position: absolute; width: 200px; /*WIDTH OF SUB MENU ITEMS*/

left: 0; top: 0; display: none; }

.glossymenu li ul li{ float: left; }

.glossymenu li ul a{ width: 190px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */ }

.glossymenu .arrowdiv{ position: absolute; right: 2px; background: transparent url(http://openwetware.org/images/6/69/Arrow.gif) no-repeat center right; }

.glossymenu li a:visited, .glossymenu li a:active{ color: white; }

.glossymenu li a:hover{ background-image: url(http://openwetware.org/images/5/50/Glossyback.jpg); }

/* Holly Hack for IE \*/

  • html .glossymenu li { float: left; height: 1%; }
  • html .glossymenu li a { height: 1%; }

/* End */

</style>

<script type="text/javascript">

/***********************************************

  • CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
  • Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
  • This notice must stay intact for usage
  • Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
                                                                                              • /

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){ for (var i=0; i<menuids.length; i++){ 

 var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
   for (var t=0; t<ultags.length; t++){
   var spanref=document.createElement("span")

spanref.className="arrowdiv" spanref.innerHTML="&nbsp;&nbsp;" ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref) 

   ultags[t].parentNode.onmouseover=function(){
   this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
   this.getElementsByTagName("ul")[0].style.display="block"
   }
   ultags[t].parentNode.onmouseout=function(){
   this.getElementsByTagName("ul")[0].style.display="none"
   }
   }
 }

} if (window.addEventListener) window.addEventListener("load", createcssmenu, false) else if (window.attachEvent) window.attachEvent("onload", createcssmenu) </script>

<table border="0" align="center" vertical-align: middle;> <tr> 

 <td>

<ul id="verticalmenu" class="glossymenu"> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai">Home</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Strategy">Strategy</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Design">Design</a></li> <li><a href="#">Experiments</a> 

   <ul>
   <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Results/Electrophoresis">Electrophoresis</a> 
   <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Results/Atomic_Force_Microscope">AFM</a> 
   </ul>

</li> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Computational_design/Simulation" >Simulation</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Notes">Notes</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Team">Team</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Resources">Resources</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Sitemap">Sitemap</a></li>


</ul> </td> 

 <td>

<img src="http://openwetware.org/images/0/07/3D_sendai.png" width="650"> </td> </tr> </table> </html> <html> <head> <style type="text/css">

  1. content {padding-left: 10px;width: 970px;}}

h3 {font-decoration: none;} h1.firstHeading {display: none; } </style> </head> </html>

<html> <style rel="stylesheet" type="text/css"> /*このスタイルシートの著作権はテンプレート工房TAKEにあります*/ /*ページのレイアウト用css*/

body{ background:#F5F5DC; /*壁色と壁紙設定*/ background-repeat:repeat;/*繰り返さない場合はno-repeatに変更*/ font:"メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #333333; margin:0px; padding:0px; }

  1. contents{
     width:900px;

margin:0 auto; background-color: #FFFFFF ;/*コンテンツ内の背景(サイズをぴったりにすること）*/ background-repeat:repeat-y; /*縦に繰り返し*/ border:solid 1px #666666;/*サイトに枠を付ける設定,色の変更可*/ 

     position:relative;
     font-size:80%;

}


/*ヘッダー部分の設定*/

  1. header{

background-image:url(http://openwetware.org/images/c/c4/TeamSendai-logo3.png) ;/*ヘーダー*/ background-repeat:repeat-x; /*縦に繰り返し*/ background-position:top right; height:140px; /*ヘーダーの高さ*/ }

  1. header p {

font-size: 26px; 

       color:#333333;

padding-top: 15px; padding-left: 20px; }


/*上部メニューボタンの設定*/

  1. navbar{
     background-color:#FFFFFF; 
     width: 100%;
     height:40px;
     position:margine;
     top:100px;
     left:0px;
     border-top:solid 1px #FFFFFF;
     border-bottom:solid 1px #FFFFFF; 
     }


  1. navbar ul{
         margin:0;

padding:0; list-style-type:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height:40px; letter-spacing:2px; }

  1. navbar li{
     background-color:#000099;  /*上部メニューのボタンの背景*/

float:left; width:146px; /*メニューボタンの幅*/ text-align:center; padding:0; border-right:solid 1px #ffffff; }

  1. navbar ul a:hover{
  	background-color:#0033cc;	/*メニューボタンにカーソルが来た時に背景*/

width:146px; /*メニューボタンの幅*/ }

  1. navbar a{
     color:#ffffFF;/*メニューボタンの文字の色*/

display:block; }

  1. navbar a:hover{
  color:#999999; /*メニューの文字がカーソルが来た時、この色に変わる*/
  }



/*サイドメニューの設定*/

  1. side{

background-color:#ddffff; 

     width:220px;/*サイドの幅（変更するときはコンテンツ背景も変更すること）*/

position:margin; top:600px;/*上からの位置*/ left:12px; }

  1. side h3 {

font-size: 90%; border: double 3px #FFFFFF; color:#ffffff; text-align: center; background-color:#999999; 

     width:190px;

line-height: 30px; margin-top: 10px; margin-left: 5px; margin-bottom: 5px; }

  1. side h3 a {
     color:#ffffff;

font-weight:normal; }

  1. side ul{
     font-size:100%;

line-height:220%; /*サイドの文字と文字の行間設定*/ background-color: #ddffff; margin:0px; padding-left:10px; }

  1. side ul a:hover {
     width:180px;

background-color: #99ffff; /*サイドのカーソルオーバー時の背景色*/ color: #999999; /*サイドのカーソルオーバー時の文字色*/ }

  1. side ul{
    list-style-type:none;

padding-left:2px; }

  1. side li{

padding-left:15px;　/*文字の左端からの位置*/ }

  1. side li a{
    color:#333333;/*サイドの文字色*/
    width:180px;
    display:block;

}

  1. side .ad_list li{
    background-image:none;

padding-left:0; }



/*右側メイン部分の設定*/

  1. main{
     width:630px;
     padding-top:15px;
     margin-left:240px;

}



/*下部のフッター部分の設定*/ address{ font-size:80%; font-style:normal; text-align:center; padding-top:5px; }

address{ 

     background-color:#000066;
     color:#ffffff;
         width:882px;

padding-bottom:10px; border:none; } address a{ 

     color:#ff9999;

}


/*文字の設定*/ h1{ font-size:60%; letter-spacing: 2px; padding-left:10px; margin: 0px; }

h1 a{ 

     color:#FFFFFF;

font-weight:normal; }


h2{ 

     font-size:140%;

border-left: 10px solid #000066; 

         border-bottom:solid 1px #000099;/*文字の下に線を入れる設定*/
         width:900px;

padding-left: 5px; color:#333333; margin-top: 15px; margin-bottom: 5px; }

h3{ 

     font-size:120%;

border: solid 1px #111111; 

       color:#ffffff;

background-color:#4682B4 ; line-height: 30px; padding-left:10px; margin-top: 10px; margin-bottom: 1px; }

p{ 

     font-size:90%;/*全体の文字サイズ*/

line-height:150%;/*全体で使う、文字と文字の行間*/ 

         margin-left:5px;

}

p img{ 

     float:left;
         margin-top:5px;  /*写真の左にスペースを空ける*/
         margin-left:5px;  /*写真の左にスペースを空ける*/

margin-right:10px; /:写真と文字の間隔*/ }


/*リンク文字の設定*/ a{ 

    color:#000099;
     text-decoration:none;

} a:hover { color: #FF0000;/*リンクの文字の上にマウスが来た時この色に変わる*/ text-decoration: none; }

  1. purple{
     font-size:120%;

border: solid 1px #111111; 

       color:#ffffff;

background-color:#9370DB; line-height: 40px; padding-left:10px; margin-top: 10px; margin-bottom: 1px; }

h5{ 

     font-size:120%;

border: solid 1px #111111; 

       color:#ffffff;

background-color:#FFA500; line-height: 30px; padding-left:10px; margin-top: 10px; margin-bottom: 1px; }

h6{ 

     font-size:120%;

border: solid 1px #111111; 

       color:#ffffff;

background-color:#006400; line-height: 30px; padding-left:10px; margin-top: 10px; margin-bottom: 1px; }

  1. red{
     font-size:120%;

border: solid 1px #111111; 

       color:#ffffff;

background-color:#DC143C; line-height: 40px; padding-left:10px; margin-top: 10px; margin-bottom: 1px; }

  1. blue{
     font-size:120%;

border: solid 1px #111111; 

       color:#ffffff;

background-color:#191970; line-height: 40px; padding-left:10px; margin-top: 10px; margin-bottom: 1px; }

</style> </html>

<html><table border="0" align="center" vertical-aligｎ: middle;> 

<tr><td><font color="#ff0000" size="5">Welcome!!</font></td></tr></table></html>

<html> <div>[[Image:Japanese2.png]] </div></html> <html> <table width=800 border="0" align="center" vertical-align: middle;> 

<tr><td><center><div id="purple">Project</div></center></td></tr></table>

<table border="0" align="center" vertical-align: middle;> <tr> 

 <td>

<Img Src="http://openwetware.org/images/c/cf/Roboname.jpg" Border="0" Width="720" Height="72"> </A> <div style="clear:both;"></div> </td> </tr> </table> <table border="0" align="center" vertical-align: middle;> 

<tr>
<td><img src="http://openwetware.org/images/c/c5/3D_robot1.png" width="500" alt="Triangular Prism" /></td></tr>

</table> <br/> <table border="0" align="center" vertical-align: middle;> 

<tr>
<td><img src="http://openwetware.org/images/3/3d/Achieve.png" width="700" alt="Triangular Prism" /></td></tr>

</table> </html>

<html> <table border="2" align="center" vertical-align: middle; width="850"> 

<tr><td><font size=4>

We propose a new kind of molecular robot fully made of DNA. <br/> To win the race, the robot need to be fast, and also need to go straight toward the goal accurately.<br/> Our design for this rolling robot is able to follow a defined track made of DNA origami in an efficient way by means of going faster than conventional spider robots.<br/> In near future, such molecular robot would be useful for efficient drug delivery in living beings.<br/> Do you want to learn more about this project? We present the following contents for constructing our racing robot. You also can find a video showing our project overview in the bottom of this page. <br/><center><font color="#FF0000"> Have fun!</font></center> 

</font></td></tr>

</table> </html>


<html>

<table cellspacing="15" style="font-size: 13px;" align="center" vertical-align: middle;> 

               <tr>
                <td width="250"><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Design">
                  <center><h5>Design</h5></center></a></td>
                <td width="250"><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Results/Atomic_Force_Microscope">
                  <center><h6>Observation under AFM</h6></center></a></td>
                 <td width="250"><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Computational_design/Simulation">
                  <center><h3>Simulation</h3></center></a></td>
               </tr>
<tr>
<td><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Design">
 <img src="http://openwetware.org/images/8/8e/Folding-animation.gif" width="250" height="180" alt="Triangular Prism" />
 </a></td>
<td><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Results/Atomic_Force_Microscope">
 <img src="http://openwetware.org/images/0/06/AFM2.gif" width="250" height="180" alt="AFM Image" />
 </a></td>
<td><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Computational_design/Simulation">
 <img src="http://openwetware.org/images/3/37/3Ds1.gif" width="250" height="180" alt="Simulation" />
 </a></td>
</tr>
<tr>
<td width="250">Our robot is entirely constructed of DNA molecules.Based on our molecular-dynamics computer simulation result, we designed our robot with caDNAno software.</td>
<td width="250">Atomic-force microscopy(AFM) is suitable for watching molecular robot race. With high-speed AFM, we checked whether the DNA structures would be made or not as the designed. Moreover, the observed results were fed back to seek the optimal condition for the experiments.</td>
<td width="250">We did 3D molecular dynamics simulation for rational design of our racing robot on the DNA origami field. In this simulation, the robot consists of mass points and we used the Langevin equation to describe the motion of each mass point.  The parameters were tuned to represent the results from wet experiments.</td>
</tr>
</table>

</html>


<html> <table width=800 border="0" align="center" vertical-align: middle;> 

<tr><td><center><div id="red">YouTube video</div></center></td></tr></table>

</html>

EmbedVideo received the bad id "Xf8YZxYlAVk&border=1" for the service "youtube".
Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2011/TeamJapan/Sendai&oldid=580951"