8 : 作作看主頁!

上章:把網頁設定的更方便吧!

Header8

0 : 這個章的目的

學習在「0.0.0.0:3000」上設定主頁的方法跟用CSS設定圖像的方法。
到這裡作的網頁都是,在瀏覽器上打入「0.0.0.0:3000/posts」或者「0.0.0.0:3000/posts/1」等等很長的url才可以打開的網頁。

可是在這個網站上,作網頁的主頁「0.0.0.0:3000」要怎麼設定好呢?
這一次設定用「0.0.0.0:3000」的url,顯示下面圖像一樣的網頁吧。
※ 還沒設定好主頁,現在打開「0.0.0.0:3000」也只能看到剛開始用Ruby on Rails作的主頁 Chrome posts root 出現這樣子的主頁的話,比較像網站吧?
那麽開始作吧!


1 : 作主頁

 ① : 設定網頁!


首先打開「rails s」之後,打開「0.0.0.0:3000」吧!
 使用Windows的話,打開「localhost:3000」吧。

有沒有顯示下面一樣子的畫面嗎? Chrome localhost1 這個是剛開始打入rails new的時候作的網頁。
在這個網頁上,設定主頁的內容。
要設定網頁的時候,需要打入什麼樣的設定呢?
  • 使用哪一個網頁的設定
  • 操作資料的設定
  • 顯示網頁的設定
這個三個設定對吧。

這一次是主頁所以設定「不要操作資料」的網頁。

到這裡只作操作資料的網頁,可是也可以作不要操作資料的網頁。
不要操作資料的網頁上,不用作資料庫(作Excel的表)操作資料。

不要操作資料的網頁從index」網頁設定。
那麽做做看吧。
首先在terminal上移動到myapp吧。


 使用Windows移動的方法請參考這裡


 terminal
1 2 3 cd Desktop cd rails_project cd myapp

移動之後打入下面的命令。

terminal
 使用Windows的話,請使用「命令提示符」吧。
1 rails g controller welcome

有沒有顯示下面圖像一樣的畫面嗎? Rails g controller welcome 這個
rails g controller 資料庫的名字
的打入是按照資料庫的內容,作操作資料跟顯示網頁的設定文件的命令。

這一次沒有這個welcome的資料庫。
像這一次一樣不要操作資料,只想顯示網頁的時候,在terminal上打入
rails g controller 名字(單數)
作「controller」的設定文件跟顯示網頁的設定文件。

這一次不用做「welcome」資料庫的資料操作,所以為了網頁的設定打入這個內容。
※ 如果在這個網頁上顯示保存的投稿資料的話,在作好的「controller」文件上追加「@posts」等等的設定。

這是例外,可是記住吧。

  • rails g controller 名字(複數)
  • 設定用資料庫的網頁。(詳細請參考這裡
  • rails g controller 名字(單數)
  • 設定不要用資料庫的網頁。

首先從「用哪一個網頁」的設定開始做吧。
用Sublime Text打開myapp之後,打開「config > routes.rb」文件吧。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


在這個routes.rb」文件上追加設定。

 先從複習開始吧。使用「welcome」的「index」的網頁的時候,要設定怎麼樣的內容好呢?
(不知道的話請參考這裡



 routes.rb
1 resources :welcome, :only => [:index]

routes.rb上,追加這個一行吧!
追加上面的一行之後,在routes.rb上面設定下面的內容吧。

 routes.rb(追加第4行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 5 6 7 8 9 ... 58 59 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] resources :welcome, :only => [:index] root "welcome#index" # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 # end end

這個
root "要顯示網頁的設定文件夾#顯示的網頁"
在指定顯示「0.0.0.0:3000」的網頁。

在這裡設定,主頁「0.0.0.0:3000」上顯示「views > welcome」的「index.html.erb」的設定文件

如果用「posts」資料庫的「index」的網頁設定主頁的時候,

1 root "posts#index"

要這樣設定。

這樣子在「0.0.0.0:3000」上顯示網頁的時候,
root "顯示的網頁的設定文件夾#顯示的網頁"
這樣子設定內容。

 在主頁「0.0.0.0:3000」上顯示「views > top」裡的「index.html.erb」的話,在「routes.rb」裡要設定怎麼樣的內容好呢?


 routes.rb
1 root "top#index"

指定好使用的網頁,接着做操作資料的設定。
但是在這裡不用操作資料,設定簡單的內容就OK。

首先打開app > controllers > welcome_controller.rb吧!
這個是在「rails g controller welcome」的打入作的文件,在這裡設定各個網頁上的操作資料的內容。
編輯這個文件的內容吧!

 welcome_controller.rb(追加第2、3行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 class WelcomeController < ApplicationController def index end end

應為在「welcome」上只使用index的網頁,所以設定這樣子的內容。

這一次不用顯示資料所以裡面不用設定內容,但是如果像顯示「post」資料庫的資料的話,

1 @posts = Post.all

像這樣子設定「@posts」的標記之後、在顯示網頁的設定文件上顯示內容。
最後做網頁的設定吧!
首先,「app > views > welcome」裡保存「index.html.erb」的文件吧!
※ 保存文件的方法,請參考這裡

這個「index.html.erb」文件是顯示網頁的設定文件。

在「0.0.0.0:3000」上,顯示看看網頁吧!
剛開始參考下面的內容,編輯文件的內容。

 index.html.erb(welcome文件夾裡)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 <h1>歡迎光臨</h1> <br> <a href="/posts" class="btn btn-primary">看投稿一覽</a>

內容應該沒問題吧?
Bootstrapの「btn」「/posts」的連結呢。

那麽開開看這個文件吧!
※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


打開看0.0.0.0:3000吧!
 使用Windows的話,打開「localhost:3000」吧。 Chrome posts root before 有沒有顯示上面圖像一樣的畫面嗎?
到這裡做好了,移動到0.0.0.0:3000的設定了吧。
接着在這個網頁上追加設定,顯示下面圖像一樣的畫面吧! Chrome posts root


 ② : 作網頁


在這裡,設定好的0.0.0.0:3000上顯示看圖像吧。
首先把圖像文件保存在 Ruby on Rails 的設定文件夾裡吧。

這裡有圖像文件,下載這個文件之後,
「app > assets > images」裡,保存圖像的文件吧。 Chrome image save assets1 Chrome image save assets2 用Sublime Text打開myapp之後,打開看「app > assets > images > header12.jpg」吧。
有沒有顯示下面圖像一樣的畫面嗎? Sublime text header12 在網頁上顯示看這個圖像文件吧。
首先編輯index.html.erb吧。

 index.html.erb(第1、3行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 <div class="header-image"> <h1歡迎光臨</h1> </div> <br> <a href="/posts" class="btn btn-primary">看投稿一覽</a>

現在打開網頁,應該還看不到圖像吧。
在這個header-image上面追加,顯示圖像的style.scss的設定。

 style.scss(追加第7〜15行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


7 8 9 10 11 12 13 14 .header-image{ background-image: url(/assets/header12.jpg); height:400px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }

※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


做完了之後,打開「0.0.0.0:3000」吧!
 使用Windows的話,打開「localhost:3000」吧。

有沒有顯示下面圖像一樣的畫面嗎? Chrome posts root image
解釋裡面的內容吧。
首先,

8 background-image: url(/assets/header12.jpg);

在這裡,設定header-image的背景要使用header12.jpg的圖像。

如果要用header.jpg的話,設定

8 background-image: url(/assets/header.jpg);

這樣子的內容。
9 height:400px;

在這裡設定,圖像的上下高度。
長度是電腦在設定,但是如果想自己設定的話,
width:自己喜歡的長度px(或者%)
這樣設定也OK。
最後的4行。
10 11 12 13 -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover;

這裡是,瀏覽器的大小有變化的時候、隨着瀏覽器的大小自動改變圖像的大小的設定。

這樣子設定有很多種。到習慣用這些設定為止,自己試試看看吧。
現在的狀態,文字顯示在左邊有一點不好看。最後吧這個文字顯示在中央吧。

首先像上面的圖像一樣,置中對齊文字吧。 Chrome posts root text center 這個也可以用Bootstrap設定。

 index.html.erb(編輯第2行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 <div class="header-image"> <h1 class="text-center"><strong>歡迎光臨</strong></h1> </div> <br> <a href="/posts" class="btn btn-primary">看投稿一覽</a>

※ 「<strong>」跟「</strong>」圍起來的地方會強調文字。
※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。



 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


做完了之後,打開「0.0.0.0:3000」吧!
 使用Windows的話,打開「localhost:3000」吧。

文字有沒有置中對齊了嗎? Chrome posts root text center 這樣子用Bootstrap置中對齊文字的時候,在class裡設定
text-center
的內容。

1 <h1 class="text-center"><strong>歡迎光臨</strong></h1>

如果想靠右對齊的話使用「text-right」,想靠左對齊的話使用「text-left」。
這樣設定置中對齊文字了。但是文字的位置還是有一點奇怪。
接着修這個內容吧。

首先在「<h1>」class裡設定「header-content」吧。

 index.html.erb
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


2 <h1 class="text-center header-content"><strong>歡迎光臨</strong></h1>

在這個style.scss裡,設定header-content的裝飾的內容。

 首先設定看,在「header-content」的class裡設定75px的大小的文字 吧。

文字的大小,用
font-size:文字的大小px;
設定。


 style.scss
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


16 17 18 .header-content{ font-size:75px; }

那麽接着在這個header-content裡,追加把文字的位置移動到下面的設定吧。

移動文字的位置的話,可以使用作空白
margin-top:150px
這樣子設定嗎?

試試看吧。 Chrome posts root margin 結果是這樣,上面顯示空白了。
這是應為,這個「margin」是在內容的外面作空格的設定,所以像這一次一樣在內容的(<div>)裡面作空格的時候不能使用。

像這一次一樣,在內容的(<div>)裡面作空格的時候,使用「padding」的設定。
那麽使用這個padding設定內容吧。

 style.scss(追加第18行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


16 17 18 19 .header-content{ font-size:75px; padding-top:150px; }

※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


編輯完了之後,打開「0.0.0.0:3000」吧!
 使用Windows的話,打開「localhost:3000」吧。

有沒有顯示下面一樣子的顯示嗎? Chrome posts root 在這裡學的設定有一點難懂。到習慣用這些設定為止,自己複習看看吧!


 ③ : 總結


在這個章解釋了
  • 不要操作資料的網頁
  • 0.0.0.0:3000」上的網頁的顯示
  • 用CSS的顯示圖像的設定跟Padding
這個三個設定。

設定的內容請參考這裡
不要操作資料的網頁

要設定不要用指定的資料庫操作資料的網頁的時候,使用index的網頁。
設定網頁的時候,使用

 terminal
1 rails g controller 網頁的名字(單數)

作設定的文件跟文件夾view跟controller

做完這個之後,不要操作資料也要做三個設定

  • 使用哪一個網頁的設定

  • 應為不要操作資料,在config > routes.rb上設定index

     routes.rb
    1 resources :welcome, :only => [:index]

  • 操作資料的設定

  • 不要操作資料也要,在app > controllers > 名字_controller.rb文件裡設定def index的內容。

     welcome_controller.rb
    1 2 3 4 class WelcomeController < ApplicationController def index end end

  • 網頁的設定

  • app > views > 名字的文件夾裡,保存index.html.erb之後設定網頁的顯示。

     index.html.erb
    1 2 3 4 5 <div class="header-image"> <h1 class="text-center"><strong>歡迎光臨</strong></h1> </div> <br> <a href="/posts" class="btn btn-primary">看投稿一覽</a>

0.0.0.0:3000」上的網頁顯示

在「0.0.0.0:3000」上設定網頁的話,在config > routes.rb裡設定

 routes.rb
1 root "使用的view文件夾的名字#網頁的名字"

這個內容。
CSS的設定(圖像的設定跟Padding)

  • CSS上的圖像的顯示

  • 適用CSS的html設定「<div>」的class上,顯示圖像的話

     style.scss
    7 8 9 10 11 12 13 14 .header-image{ background-image: url(/assets/header12.jpg); height:400px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }

    這樣子設定。
  • Padding

  • 内容外面的空格使用「margin」設定,內容裡面的空格使用padding設定。

     style.css
    1 2 3 .example{ padding:150px; }

    這邊就自己試試怎麼作吧!

    設定的內容請參考這裡


在下章,用「devise」的gem做做看「用戶管理」。

用戶管理好了的話,網頁也作得差不多了。
還有一點點,加油!