index.html

<!DOCTYPE html>
<html lang="zh-tw">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>First Page</title>
  <link rel="icon" image="image/x-icon" href="./images/favicon.ico">
  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">
    body {
      min-height: 2000px;
      padding-top: 70px;
    }
    
    .iframe {
      width: 100%;
      min-height: 500px;
    }
  </style>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <script type="text/javascript" charset="utf-8">
    $(document).load(function() {
        
      });
  </script>
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="./">Main</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="./">Home</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Homework<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="http://thwu.github.io/" target="_blank">HW01：First Page</a></li>
              <li><a href="./Homework/resume.html" target="_blank">HW02：Online Resume</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Practice(1~5)<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Class 1</li>
              <li><a href="./Practice/Class1/index.html" target="_blank">Class 1 P1: 物件</a></li>
              <li class="dropdown-header">Class 2</li>
              <li><a href="./Practice/Class2/index.html" target="_blank">Class 2 P1: 物件</a></li>
              <li><a href="./Practice/Class2/practice_1.html" target="_blank">Class 2 習題</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Course Resource<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="https://www.facebook.com/groups/advanced.html266/" target="_blank">Facebook 社團</a></li>
              <li><a href="https://www.dropbox.com/sh/ow2znmrvk09jpmp/AAByvltMgE6I_Rox9mahMLdHa?dl=0" target="_blank">Dropbox (Password: html266)</a></li>
              
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Course 1</li>              
              <li><a href="http://www.books.com.tw/products/0010690010" target="_blank">完整學會Git GitHub Git Server的24堂課 (ISBN：9789863477471)</a></li>
              <li><a href="https://zh.wikipedia.org/wiki/%E6%A0%91%E8%8E%93%E6%B4%BE" target="_blank">自行架站：Raspberry Pi</a></li>
              <li><a href="http://www.books.com.tw/products/0010537216" target="_blank">深入淺出 jQuery (ISBN：9789862764060)</a></li>
              <li><a href="http://www.books.com.tw/products/0010672352" target="_blank">JavaScript & jQuery：The Missing Manual國際中文版(第三版) (ISBN：9789863476009)</a></li>                
              
              <li class="dropdown-header">Course 2</li>              
              <li><a href="http://www.w3schools.com/js/js_object_prototypes.asp" target="_blank">W3Schools: JavaScript Prototypes</a></li>
              
              <li class="dropdown-header">Course 7</li>
              <li><a href="http://www.amazon.co.jp/AngularJS-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/dp/4774175684" target="_blank">AngularJS　アプリケーションプログラミング</a></li>
              <li><a href="http://www.amazon.com/Mastering-Web-Application-Development-AngularJS/dp/1782161821" target="_blank">Mastering Web Application Development with AngularJS</a></li>
              
              <li class="dropdown-header">Course 9</li>              
              <li><a href="http://resnick.tw/app/#/start" target="_blank">7 Minutes Workout (AngularJS)</a></li>  
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resource<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li class="dropdown-header">Cloud Service</li>
              <li><a href="https://drive.google.com/" target="_blank">Google Drive</a></li>
              <li><a href="https://www.dropbox.com/" target="_blank">Dropbox</a></li>
              <li><a href="https://www.evernote.com/" target="_blank">Evernote</a></li>

              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Version control</li>
              <li><a href="https://github.com/" target="_blank">GitHub</a></li>              

              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Library / Framework</li>
              <li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a></li>
              <li><a href="https://angularjs.org/" target="_blank">AngularJS</a></li>
              <li><a href="https://nodejs.org/en/" target="_blank">Node.js</a></li>

              <li role="separator" class="divider"></li>
              <li class="dropdown-header">IDE</li>
              <li><a href="http://www.sublimetext.com/" target="_blank">Sublime Text</a></li>
              <li><a href="https://code.visualstudio.com/" target="_blank">Visual Stuio Code</a></li>

              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Plugin</li>
              <li><a href="http://livestyle.emmet.io/" target="_blank">Emmet Livestyle</a></li>
              <li><a href="http://64px.com/" target="_blank">Auto Refresh</a></li>
              <li><a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a></li>              

              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Search</li>
              <li><a href="http://it-ebooks-search.info/" target="_blank">IT eBooks</a></li>
              
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Fonts</li>
              <li><a href="https://www.google.com/fonts/" target="_blank">Google Fonts</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resource 2<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Online Tools</li>
              <li><a href="http://www.w3schools.com/" target="_blank">W3schools</a></li>
              <li><a href="http://www.w3schools.com/tags/ref_colorpicker.asp" target="_blank">HTML Color Picker</a></li>
              <li><a href="https://balsamiq.com/" target="_blank">Balsamiq</a></li>
              <li><a href="https://pixlr.com/editor/" target="_blank">Pixlr (Online PS)</a></li>
              <li><a href="http://validator.w3.org/" target="_blank">W3C Validator</a></li>
              <li><a href="http://www.favicon.cc/" target="_blank">Favicon.cc</a></li>
              <li><a href="http://placehold.it/" target="_blank">Placehold.it</a></li>
              <li><a href="https://jsbin.com/" target="_blank">JS Bin</a></li>
              <li><a href="https://jsfiddle.net/" target="_blank">JSFIDDLE</a></li>
              <li><a href="http://codepen.io/" target="_blank">CODEPEN</a></li>
              <li><a href="http://shouldiprefix.com/" target="_blank">What CSS to prefix?</a></li>
              <li><a href="http://caniuse.com/" target="_blank">Can I use...?</a></li>
              <li><a href="http://www.colorzilla.com/gradient-editor/" target="_blank">Ultimate CSS Gradient Generator</a></li>
              <li><a href="https://daneden.github.io/animate.css/" target="_blank">Animate.CSS</a></li>
              <li><a href="http://westciv.com/tools/transforms/index.html" target="_blank">Transforms tool</a></li>
              <li><a href="http://css3.bradshawenterprises.com/transitions/" target="_blank">CSS Transitions</a></li>
              <li><a href="http://jsconsole.com/" target="_blank">JS Console</a></li>
              <li><a href="http://startbootstrap.com/" target="_blank">Start Bootstrap</a></li>              
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Document<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="http://audi.tw/Blog/CSS/css3.shape.asp" target="_blank">Border 應用</a></li>
              <li><a href="https://css-tricks.com/examples/ShapesOfCSS/" target="_blank">The Shapes Of CSS</a></li>
              <li><a href="http://zh-tw.learnlayout.com/" target="_blank">學習CSS版面配置</a></li>
                            
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">RWD</li>
              <li><a href="http://tech.mozilla.com.tw/posts/4759/%E4%B9%9D%E5%80%8B%E9%81%A9%E6%87%89%E6%80%A7%E8%A8%AD%E8%A8%88%E5%B0%8F%E6%92%87%E6%AD%A5%EF%BC%8C%E6%8A%8A%E7%B6%B2%E7%AB%99%E6%89%93%E9%80%A0%E6%88%90%E8%AE%8A%E5%BD%A2%E9%87%91%E5%89%9B" target="_blank">九個適應性設計小撇步，把你的網站打造成變形金剛！（上篇）</a></li>
              <li><a href="http://tech.mozilla.com.tw/posts/4901/%E4%B9%9D%E5%80%8B%E9%81%A9%E6%87%89%E6%80%A7%E8%A8%AD%E8%A8%88%E5%B0%8F%E6%92%87%E6%AD%A5%EF%BC%8C%E6%8A%8A%E7%B6%B2%E7%AB%99%E6%89%93%E9%80%A0%E6%88%90%E8%AE%8A%E5%BD%A2%E9%87%91%E5%89%9B-2" target="_blank">九個適應性設計小撇步，把你的網站打造成變形金剛！（下篇）</a></li>
              
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">精確度(權重)及覆蓋原則</li>
              <li><a href="http://ithelp.ithome.com.tw/question/10103896" target="_blank">[新手前端]從平面設計前進 CSS-4 權重及覆蓋</a></li>
              
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">偽元素(pseudo-element)及偽類(pseudo-class)</li>
              <li><a href="http://swordair.com/origin-and-difference-between-css-pseudo-classes-and-pseudo-elements/" target="_blank">CSS伪类与CSS伪元素的区别及由来</a></li>
              <li><a href="http://blog.mukispace.com/pseudo-elements-10-examples/" target="_blank">那些 CSS 偽元素可以幫你做的 10 個效果</a></li>
              
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Canvas</li>
              <li><a href="https://developer.mozilla.org/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial" target="_blank">Canvas 教學文件</a></li>
              
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">javascript OOP</li>              
              <li><a href="http://renjin.blogspot.tw/2008/08/object-oriented-javascript.html" target="_blank">認識 JavaScript 的物件導向技術</a></li>
              
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">WebSocket</li>  
              <li><a href="https://zh.wikipedia.org/wiki/WebSocket" target="_blank">WebSocket</a></li>
              
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">AngularJS</li>  
              <li><a href="https://docs.com/user648588/4144/angularjs" target="_blank">AngularJS 初學者相關學習資源</a></li>
            </ul>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="https://www.csie.ntu.edu.tw/train/?page=course_info.html&courseid=1329">課程首頁</a></li>
          <li><a href="https://www.csie.ntu.edu.tw/train/">台灣大學資訊系統訓練班</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>
  <div class="container">
    <iframe src="main.html" frameborder="0" class="iframe"></iframe>
  </div>
</body>

</html>