使用 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>
教練: 逐行解釋這段新的程式碼。
下一步?
- 使用新學的知識來設計新的想法
- 妳想要的話,可以加入更多設計哦
- 閱讀其它指南學習更多 Rails