使用 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>

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

下一步?