英文原文：http://emberjs.com/guides/getting-started/creating-a-static-mockup

Creating a Static Mockup

创建静态页面

Before adding any code, we can roughly sketch out the layout of our application. In your text editor, create a new file and name it index.html. This file will contain the HTML templates of our completed application and trigger requests for the additional image, stylesheet, and JavaScript resources.

在开始编码之前，我们可以粗略地作出我们应用的布局。打开任意你喜欢的文本编辑器，新建一个文件，并命名为 index.html 。这个文件将会包含我们整个应用的HTML模板并请求图片、样式表和Javascript资源。

To start, add the following text to index.html:

开始了，将下列文字加到 index.html 里：

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Ember.js • TodoMVC</title>
  6.     <link rel="stylesheet" href="style.css">
  7.   </head>
  8.   <body>
  9.     <section id="todoapp">
  10.       <header id="header">
  11.         <h1>todos</h1>
  12.         <input type="text" id="new-todo" placeholder="What needs to be done?" />
  13.       </header>
  15.       <section id="main">
  16.         <ul id="todo-list">
  17.           <li class="completed">
  18.             <input type="checkbox" class="toggle">
  19.             <label>Learn Ember.js</label><button class="destroy"></button>
  20.           </li>
  21.           <li>
  22.             <input type="checkbox" class="toggle">
  23.             <label>...</label><button class="destroy"></button>
  24.           </li>
  25.           <li>
  26.             <input type="checkbox" class="toggle">
  27.             <label>Profit!</label><button class="destroy"></button>
  28.           </li>
  29.         </ul>
  31.         <input type="checkbox" id="toggle-all">
  32.       </section>
  34.       <footer id="footer">
  35.         <span id="todo-count">
  36.           <strong>2</strong> todos left
  37.         </span>
  38.         <ul id="filters">
  39.           <li>
  40.             <a href="all" class="selected">All</a>
  41.           </li>
  42.           <li>
  43.             <a href="active">Active</a>
  44.           </li>
  45.           <li>
  46.             <a href="completed">Completed</a>
  47.           </li>
  48.         </ul>
  50.         <button id="clear-completed">
  51.           Clear completed (1)
  52.         </button>
  53.       </footer>
  54.     </section>
  56.     <footer id="info">
  57.       <p>Double-click to edit a todo</p>
  58.     </footer>
  59.   </body>
  60. </html>

The associated stylesheet and background image for this project should be downloaded and placed in the same directory as index.html

和这个页面相关的样式和背景图片要放在与 index.html 相同的目录下。

Open index.html in your web browser to ensure that all assets are loading correctly. You should see the TodoMVC application with three hard-coded <li> elements where the text of each todo will appear.

在浏览器中打开 index.html 以确保所有的 assets 正确加载。这时你应该能够看见TodoMVC应用已经有三条我们采用硬编码（hard-coded）方式写上去的 <li> ，每个 <li> 显示的就是这条todo的要显示的内容了。

Live Preview

在线演示

Ember.js • TodoMVC

Additional Resources

附加资源