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做做看「用户管理」。

用户管理好了的话,网页也作的差不多了。
还有一点点,加油!