3 : 作作看简单的网站

上章:Ruby on Rails 的基础

Header3

0 : 这个章的目的

 学习用HTML・Ruby on Rails作网站的方法、用Rails作作看网站。
到这里,作好了 Ruby on Rails 的环境,
咱們用Ruby on Rails作网路吧!

・・・是想现在就开始作网站,但是开始作网站之前先解释做网页的显示的时候要用的知识

 在这里想问一个问题。什么东西在显示网站呢?

第1章也有解释过了,叫做HTML文件的文件在决定怎么显示网页。 Fb code 这个是Facebook主页很长的HTML文件。这个文件在決定这么样显示网页。

虽然Facebook主页的HTML文件很长,但是更简单的网页的话可以更简单的作。
咱們先用HTML,作作看网页吧!


1 : HTML的基础

 ① : 用HTML作网页


事先,用Finder在Desktop里作「rails_project」的名字的文件夾吧。


 用 Windows 的话请参考这里

 完了之后按这里看下一个说明。



 从现在起,新做好的文件跟文件夾就保存在rails_project里吧。 Finder mkdir rails project
用上章安裝的Sublime Text,作HTML文件。
※ 如果不知道地方的话,按右上边放大鏡的标记,打入「Sublime Text」找找看吧。

用Sublime Text编辑HTML文件跟Ruby on Rails的设定文件等等,可以把网站设定的自己喜欢的样子


 如果使用Windows 的话,参考这里
保存叫做「sample.html」的HTML文件在「rails_project」文件夾。

 完了之后、按这边看下一个说明。


Sublime text new window 打开下面一样的图像了吗? Window sublime text 如果打开了的话,按「File > Save」Sublime text save 画面出来之后、像下面一样子保存文件。 Sublime text save after 从Finder的rails_project文件夾上确认的话,可以看到作好的sample.html文件。 Finder sample html

在刚才保存的「sample.html」上,打入下面的內容。(左边的数字是行数,不用管。)

设定的时候,汉文以外的地方请用半母字母数字打入
 sample.html(用半母字母数字打入)
※ 如果嫌麻烦,可以用复制跟粘贴。
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>你好</p>
</body>
</html>
Sublime text sample html1 打入完了之后,一起按「Command」跟「s」
这样可以保存文件的內容。



 使用Windows的话,一起按「ctrl」跟「s」。这样可以保存文件的內容。



用Finder打开rails_project的文件夾,之后按着下面的图像打开看看。 Window open with chrome 显示像下面的画面了嗎? Chrome sample html
应该浏览器上显示「你好」
虽然打入很长的內容,显示的只是这样的话有一点伤心哦...

其实说显示画面的只是「<body>」跟「</body>」围起來的「<p>你好</p>」的部分而已。

 sample.html(用半母字母数字打入)
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>你好</p>
</body>
</html>

画面上显示<p>」跟「</p>」围起來的地方
  • <p>的话,普通大小的文字
  • <h1>的话,大的文字
  • <h2>的话,有一点大的文字
  • <h3>的话,中的文字
  • <img>的话,显示图像
  • <br>的话,改行
等等很多显示的方法。
 <body>」跟「</body>」围起來的地方,打入网站上显示的文章跟图像。

 sample.html文件上,用<h1>显示內容!
如果关掉文件的话,参考打开文件的方法

※ 设定完了之后,一起按「Command」跟「s」保存文件的內容。
 使用Windows的话,一起按「ctrl」跟「s」保存文件的內容


 ② : 装饰网页


到这里解释了网页的显示的方法。
可是这个网页不好看,让您有一点失望。

这个也当然。
HTML只在显示文章画面等等的资料。这么样显示网页要用別的设定文件。
这个文件叫做CSS文件

那么咱們作CSS文件,装饰看网页吧!
事先「rails_project」的文件夾里保存「style.css」的名字的文件。
※ 用「style.css」这个名字的理由,只是很多人用这个名字而已。没有大的意思。
※ 如果不知道这么保存,请参考这里
 用Windows的保存,请参考这里


像下面一样显示了嗎? Window style css 在Finder的「rails_project」文件夾上有Style.css跟Sample.html,这个两个文件了吗? Finder rails project 文件保存之后,打入內容。
※ 打开文件的方法请参考这里
 style.css(用半母字母数字打入)
1
2
3
h1{
color:red;
}
Sublime text style css  sample.html(更改第5, 8行/用半母字母数字打入)
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>你好</h1>
</body>
</html>

內容改了之后,一起点击「Command」跟「s」保存文件。


 使用Windows的话,一起点击「ctrl」跟「s」保存內容



內容改了之后,参考下面的图像打开「sample.html」。 Window open with chrome 显示下面画面一样的显示了吗? Chrome sample html2 文字变成红色了吗?这个还是简单的设定。我們用CSS文件设定这样子的装饰。
那么,解释改变的內容把。
先解释改变的html文件

 sample.html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>你好</h1>
</body>
</html>

在这个一行決定,在这个网页上使用「style.css」名字的CSS文件。
里面应该可以看到「style.css」。在这里指定要用的CSS文件。使用的时候除了CSS文件以外的地方都可以用一样。这个要加在<head></head>围起來的地方设定
比如说要指定名字叫「style2.css」的CSS文件的话,把

1
<link rel="stylesheet" href="style2.css" type="text/css" />

上面的內容,加在<head></head>之间。

用CSS文件的时候,请不要忘记加这个一行在<head></head>之间。
那么,解释做装饰的CSS文件

 style.css
1
2
3
h1{
color:red;
}

做装饰的CSS文件是,
想装饰的地方的名字{
  装饰的方法
}
这么样设定。
颜色的设定是
color:顏色的名字;
这样子设定。

这个时候,

1
<h1>你好</h1>

的一行在指定<h1>跟</h1>之间,要改成红色。

 那么用別的顏色看看好了!

 style.css(用半母字母数字打入)
※ 內容打完之后,一起点击「Command」跟「s」保存內容。
 使用Windows的話,一起点击「ctrl」跟「s」保存內容。
1
2
3
h1{
color:blue;
}

完了之后,请重新载入网页。內容变了吗?
※ 用浏览器打开网页的方法请参考这里
到这边解释了顏色的装饰,但是装饰的方法不只是这个而已。
还有换文字大小的装饰设定,换背景色的装饰的方法等等。参考下面的內容,改设定。

 style.css(用半母字母数字打入)
※ 一起点击「Command」跟「s」保存內容。
 使用Windows的话、一起点击「ctrl」跟「s」保存內容。
1
2
3
4

5
h1{
color:blue;
font-size:50px;
background-color:yellow;
}

完了之后,请重新载入网页。显示像下面的图像的內容吗?
※ 用浏览器打开网页的方法请参考这里 Chrome sample html3 文字的大小用
font-size:文字的大小px;
这样设定。

px是电脑里的大小单位

背景色的设定是
background-color:顏色;

装饰还有很多种,如果有兴趣的话自己查查看吧。

到这边,解释了装饰网页的方法。

現在的方法也可以装饰,但是<h1>只能显示顏色是蓝色/文字的大小是50px/背景色是黄色的文字。
这样也可以装饰,可是不能有很多种装饰。

所以CSS文件可以取装饰的名字、然后跟html文件里装饰。
那么作作看吧!

打开「rails_projects」文件夾里的「sample.html」跟「style.css」
※ 打开文件夾的方法请参考这里

 sample.html(用半母字母数字打入)
※ 一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,一起点击「ctrl」跟「s」
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>你好</h1>
<h1 class="title">テスト</h1>
</body>
</html>

 style.css(用半母字母数字打入)
※ 一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,一起点击「ctrl」跟「s」
1
2
3
4

5
.title{
color:white;
font-size:30px;
background-color:black;
}


完了之后,请重新载入网页。显示像下面的图像的內容吗?
※ 用浏览器打开网页的方法请参考这里 Chrome sample html4 上面的画面是沒有装饰的<h1>、下面的画面是设定装饰的<h1>
CSS文件內打入
.名字{
  装饰的內容
}
可以用一個名字做几个装饰
这一次的名字是title,但是名字可以自己自由的选。

在html文件里的显示是,加
class="名前"
<h1>或者<p>等等里,可以设定。这里不用加「.」。
这里的名字跟在CSS文件里设定的名字是一样的时候,装饰会适用。

 改变沒有装饰的<h1>跟CSS文件,作作看装饰吧!
※ 不要忘记打入用半母字母数字,一起点击「Command」跟「s」保存內容。
 使用Windows的话,一起点击「ctrl」跟「s」保存內容。


 ③ : 总结


网页是,用显示文字跟画面的html文件跟装饰的CSS文件作。
  • html文件的话,基本上是<body></body>的內容
  • CSS的话,用{}围起來的地方
设定,网页跟装饰。


2 : 用Rails作作看网站

到这边,我們解释用html跟CSS显示网页的方法

网页显示的方法基本上是这样。更详细的方法,过一会儿解释。
从这里,我們用Ruby on Rails作網站。
基础编里作这样子的网站

Ruby on Rails是,事先作好的网站上设定网站里面的详细作网站。
在这个章做做看,用Ruby on Rails作刚开始的网站之后,打开看这个网站!
Ruby on Rails是用在上章使用的terminal,作刚开始的网站。
点击右上边放大镜,搜索「terminal」打开terminal。

 从这边是复习。事先在terminal上,移动到desktop的位置。
※ 不知道这么移动的话,请参考这里


 使用Windows移动的方法,请参考这里



移动到desktop的话,

terminal
 使用Windows的话、请使用「命令提示符」
1 cd rails_project

打入移动到「rails_project」吧。
※ 用半母之母数字打入


 ① : rails new


那麽,用Rails作作看刚开始的网页吧!
打入下面的命令吧!

Terminal(用半母字母数字打入)
1 rails new myapp -d mysql

 使用Windows的话,打入下面的命令。

 命令提示符(用半母之母数字打入)
1 rails new myapp

Rails new myapp 2 显示像下面的图像之后... Rails new myapp after 最后显示这样子的画面了吗?
这样,刚开始的简单的网站作好了!

作完的話,用Finder看看做好的「myapp」吧。 Finder myapp 「rails_project」里,找到myapp的名字的文件夾吗?

编辑这个「myapp」里的设定文件,作自己的网站。
那么,刚才的

terminal
1 rails new 网站的名字 -d mysql

在做什么呢?

这个是,
「用MySQL的资料库(-d mysql)作myapp的网站吧!(rails new myapp)」
的电脑的命令。


 使用Windows的话,后面不用加「-d mysql」就可以设定使用「Sqlite」的资料库。


刚开始作网站的时候,打入

 terminal(用半母之母数字打入)
1 rails new 网页的名字 -d mysql


 使用Windows的话,请打入下面的內容。

打入下面的命令。

 命令提示符(用半母之母数字打入)
1 rails new myapp

 刚开始作网站的时候、用Terminal(或者命令提示符)打入「rails new 网站的名字 -d mysql」。


 ② : 网站的各种设定


到这里,打入

 terminal
1 rails new 网站的名字 -d mysql

 命令提示符
1 rails new 网站的名字

作刚开始的网站。
可是,这样网站的设定还沒完成。
terminal(或者命令提示符)上,还必须做几个设定。

那个设定是
  • 为了作网站的时候需要的工具的导入跟设定
  • 准备资料库
的两个。

 在这里完成这些设定吧。


 ⑴ : 工具的设定跟导入

Rails on Rails上、使用在网路上公开的作网站的工具(叫做「gem」)作网站。

使用这些工具,可以作比如说用户管理或者图像的保存等等的机能。

 在这里做做看这个gem的设定跟导入。
事先用Sublime Text,打开刚才做的「myapp」吧。
※ 打开文件跟文件夾的方法,请参考这里
 用Windows打开文件跟文件夾的方法请参考这里


有出现下面一样的画面了吗? Window sublime text myapp 画面出来之后,打开「Gemfile」的文件。 显示下面一样的內容的话,OK! Sublime text open gemfile 用这个Gemfile」的文件,设定工具。
应为刚开始已经设定好需要的工具,所以文件里已经有內容。

看里面,会看到「gem '〜'」或者「gem '〜','〜'」样子的文字。

如果想用工具的话,在「Gemfile」里加上
gem '工具的名字'
的设定。(需要的话,加上「, '版本'」)
到这里解释了设定工具的「Gemfile」文件。

这样设定完成了。但是工具的设定还没做完。还没做好导入、所以还不能用工具。

 在这边,导入工具的设定。
工具的设定是编辑「Gemfile」的內容。但是工具的导入是用terminal(或者命令提示符)做。

首先,打开terminal(不知道的話,请参考这里)、移动到「rails_project」。

 用Windows移动到「rails_projects」的方法,请参考这里


 terminal
 使用Windows的话,请使用「命令提示符」。
1 2 cd Desktop cd rails_project

到这边、移動到刚才作好的「myapp」。

terminal
 使用Windows的话,请使用「命令提示符」。
1 cd myapp

Terminal cd myapp 那么,导入工具吧!请打入下面的文字。
※ 用半母字母数字打入。

terminal
 使用Windows的话,使用「命令提示符」
1 bundle install

 不会动的话,先删除在同样文件夾里的Gemfile.lock之后再试一次。 Terminal bundle install after 打入之后,有沒有显示这样的画面呢?
注意看、可以看到设定文件里的工具。

在「Gemfile」上加设定之后、在terminal上打入「bundle install」。

这样工具的导入完成了。
※ 在这边是说工具、正确是「gem」。


 使用 Windows的话,请作这样操作



 工具的设定是编辑「Gemfile」文件的內容,工具的导入是用terminal打入「bundle install」。


 ⑵ : 资料库的准备

到这边,我們解释设定Rails上的工具(gem)的方法跟导入的方法。
可是设定還有一個。那个是资料库的准备

在这里作,网站上保存资料的资料库的设定。
这个一下子就可以完成。开始吧!
事先,用terminal移动到「myapp」吧。
※ 如果不知道的话、请参考这里

完了之后,打入下面的命令。

terminal
 使用Windows的话,请使用「命令提示符」。
1 rake db:create

 如果不动的话,在前面加bundle exec,打入bundle exec rake db:create Terminal rake db create 这样资料库(空的Excel表)的准备好了!
这样是有一点伤心、看看真的资料库作好了沒。
用在上章安装的「Sequel Pro」,看看资料库!


  使用Windows的话,会使用SqliteBrowser的资料库。
 参考这里打开「db > development.sqlite3

 完了之后点击这里看下一个说明。


首先用右上边的放大镜打入「Sequel Pro」之后打开「Sequel Pro」!
打开之后,按着下面的画面点击「Connect」。 Sequel pro 显示下面一样的画面了吗? Sequel pro main page 做好了的话,选择左上边的「Choose Database」。 Sequel pro choose database 出來的列表框裡有「myapp_development」吗?
这个是在网站上保存资料的资料库。
※ 「网页的名字_development」是资料库的名字。 Sequel pro select myapp 这样就OK了!。
 资料库打入「rake db:create」可以作。


 ⑶ : 总结


打入
  • 在terminal上,「rails new 网页的名字 -d mysql
  • 在命令提示符上,「rails new 网页的名字
作完网页之后...
要做
  • 工具(gem)的设定跟导入
  •  terminal打入「bundle install」,可以导入工具(gem)。

     使用Windows的话,请作这里的操作


  • 资料库的准备
  •  打入「rake db:create」可以作资料库。


 ③ : 打开网站


这样子刚开始的网站是完成了,但是还不知道真的是做好沒有。
那么,咱們打开看做好的网站!
事先用terminal移动到「myapp」
※ 不知道的话,请参考这里

 使用Windows的话,请参考这里


完了之后,请打入下面的命令。

terminal(用半母之母数字打入)
1 rails s

显示像下面的画面了吗? Terminal rails s 这个「rails s」的命令,启动在电脑里的显示网页跟保存资料的机器(服务器)
※ 现在起動的服务器只是在电脑里动的东西、所以网站只能在自己的电脑里看。
这样子,可以显示网站了!
用浏览器,打开看看0.0.0.0:3000


 使用Windows的话,打开localhost:3000


Chrome localhost1 显示这样子的网页了吗?这个是用 Ruby on Rails 上作好的网站。
以后用Ruby on Rails作的网站、从0.0.0.0:3000打开。


 使用Windows的话,打开localhost:3000



那么,停止用「rails s」动的服务器吧。
之后打入「rails s」的terminal的画面上、请一起打入「Command」跟「c」。

 使用Windows的话,一起打入「ctrl」跟「c」


Terminal rails s finish 这样子停止在显示网页保存资料的服务器
再一次打开看看0.0.0.0:3000吧。


 使用Windows的话,打开看看localhost:3000


这一次沒有打开服务器,所以网站应该不会打开的
不用用Rails on Rails打开网站的话,一起点击「Command」跟「c」关掉服务器。沒有关掉的话,电源会白费。


 使用Windows的话,一起点击「ctrl」跟「c」



 设定完的网站、在terminal上打入「rails s」的状况,打开「0.0.0.0:3000」就可以在浏览器上看。


 使用Windows的话,打开localhost:3000



3 : 这个章的总结

在这个章学习了
  • 显示网页的设定文件html跟装饰的设定文件CSS
  • 使用Rails作刚开始的网站的方法跟打开的方法
在这里做简简单单的总结。
⑴ html跟CSS

html是在设定网页显示的文件,然后这个文件在Ruby on Rails上做网页的时候会用。
设定的方法差不多是下面的样子。

 sample.html(用半母字母数字打入)
※ 使用CSS的話,加上第5行
1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="要使用的CSS文件的名字" type="text/css" /> </head> <body> <p>内容</p> </body> </html>

CSS是装饰html文件的文件,用Ruby on Rails的时候这个也需要。
设定的方法差不多是下面的样子。

 style.css(用半母字母数字打入)
1 2 3 4 5 .title{ color:white; font-size:30px; background-color:black; }

⑵ 用Rails作网站的方法

用Ruby on Rails 做网站的话,要用terminal做。
事先作刚开始的网站,

 terminal
1 rails new 网页的名字 -d mysql

 使用Windows的话,打入

 命令提示符
1 rails new 网页的名字

之后,打入

 terminal
1 cd 网页的名字

移动到做好的网页,之后Rails上使用的工具・gem的导入

 terminal
1 bundle install

之后准备资料库

 terminal
1 rake db:create

这样子网站的设定完成了。打开网站的时候要打入

terminal
1 rails s

启动显示网页保存资料的服务器。
如果服务器在动的话、可以打开0.0.0.0:3000看网站。


 使用Windows的话,打开localhost:3000



要关服务器的话,在terminal上一起点击「Command」跟「c」
如果服务器一直开着的话、会白费电源。


 使用Windows的话,一起点击「ctrl」跟「c」



 到这里,解释好了用Ruby on Rails作网站的方法。
  下章,咱們学习网站上面保存资料的方法。