使用 HTML & CSS 設計頁面

Created by Alex Liao, @alexliao

Translation by JuanitoFatas, @JuanitoFatas

現在 app 執行的很好，但看起來仍像是用 Scaffold 產生出來的。讓我們加點設計到 app，讓它看起來像專業的網站吧。當妳完成本教學時，妳的 app 看起來會像這樣。

##1.調整應用的版面

開啟 app/assets/stylesheets/application.css，把這行

body { padding-top: 100px; }

換成

body { padding-top: 60px; }

最後，刪除這個檔案 app/assets/stylesheets/scaffolds.css.scss 因為我們不需要 Rails 幫我們產生的預設樣式。

現在重新整理這個頁面 http://localhost:3000/ideas。妳目前看不到什麼變化，但這對接下來的步驟很有用。

##2.調整選單

考量到 “idea” 是 app 裡最重要的東西，我們把 “New idea” 按鈕放到選單吧，讓人馬上可以找到。

打開 app/views/layouts/application.html.erb，在這行下面

<li class="active"><a href="/ideas">Ideas</a></li>

加入

<li ><%= link_to 'New Idea', new_idea_path %></li>

##3.設計 idea 清單

現在是時候讓我們的 idea 清單，看起來專業點了。我們要把版面從表格換到 div。

教練： 講一下表格與 div 的差別。

用編輯器打開 app/views/ideas/index.html.erb，把整個檔案換成下面這段程式碼：

<h1>Listing ideas</h1>

<% @ideas.in_groups_of(3) do |group| %>
  <div class="row">
    <% group.compact.each do |idea| %>
      <div class="col-md-4">
        <%= image_tag idea.picture_url, width: '100%' if idea.picture.present?%>
        <h4><%= link_to idea.name, idea %></h4>
        <%= idea.description %>
      </div>
    <% end %>
  </div>
<% end %>

教練： 逐行解釋這段新的程式，並講講什麼是 Bootstrap 的 12 網格版面。

重新整理看看！idea 清單變可愛了呢。按下 “New Idea” 按鈕，用真實的文字與漂亮的圖片加入更多想法吧！─ 網頁有越多內容，看起就會更好。現代網頁設計原理之一：內容是網頁最好的裝飾品。

##4.設計 idea 的細節頁面

按下 idea 的標題，網頁會跳到 idea 的細節頁面。現在看起來仍然是用 Rails Scaffold 產生的，讓我們來把它變得更好吧。

用編輯器打開 app/views/ideas/show.html.erb 把整個檔案的內容換成下面的程式碼：

<p id="notice"><%= notice %></p>

<div class="row">
  <div class="col-md-9">
    <%= image_tag(@idea.picture_url, width: "100%") if @idea.picture.present? %>
  </div>

  <div class="col-md-3">
    <p><b>Name: </b><%= @idea.name %></p>
    <p><b>Description: </b><%= @idea.description %></p>
    <p>
      <%= link_to 'Edit', edit_idea_path(@idea) %> |
      <%= link_to 'Destroy', @idea, data: { confirm: 'Are you sure?' }, method: :delete %> |
      <%= link_to 'Back', ideas_path %>
    </p>
  </div>
</div>

教練： 逐行解釋這段新的程式碼。

下一步？