第一个Landing Page的制作方法（Ruby on Rails 開發秘籍 | Ruby on Rails 快速入門）

Posted 2021-04-28 人才研习社

今年是肖威陪伴你的第4年

加入人研习社，成就卓越梦想 来自人才研习社 00:00 00:37

Ruby on Rails 開發秘籍 | Ruby on Rails 快速入門

第一个Landing Page的制作方法

学习任何一门技能最关键的要素不是在于完成基本功的打造，而是需要最快速的完成整个行业的基础架构和技能架构，才可以有知识地图的形式完成知识体系的快速的学习和掌握。

第一步我们已经教授给大家完成一个welcome的hallo world的网页的制作，同时完成了我们的网页的服务器heroku的上传和GitHub的代码的远程管理，同时在这个过程中完成了我们第一个web app的网页的制作，接下来我们需要去做的事情是需要了解我们网页处理的三个核心的部分。

分别是：前端页面设计+终端数据库处理+后端功能开发

我们现在首先处理的是前端页面的设计，其中会运用的我们的html、css、js的语言代码，在这个时候，难度系数来看js＞css＞html的学习的机结构。

在本次的课程中，我们先不去谈关于js的处理的方法和js的各种类库的处理方法，仅仅在于完成第一个welcome的landing page的引导页的制作，方便大家可以快速的学习引导页的制作的方法；

---

想要快速的完成引导页的学习，最快速的速度就是海量的观摩最优秀的东西，然后大量的模仿，不断的解构和重构的过程中，完成自己对于设计的理解，对于前端的布局和样式的布局，从而快速的完成网页的图片到可动的网页的国度。

第一步：进入我们所构建的web app的原型demo里面，开始完成landing page的制作；

（1）点击右侧放大镜，选择t，调出终端；

cd demo   解释：进入demo app原型

atom .       解释：打开demo的代码视图

rails s        解释：本地启动服务器模拟

http://localhost:3000  解释：点击网页查阅效果

第一步：Bootstrap，挂上 bootstrap-sass 这个 gem

（1）control+c回到终端控制器

（2）在atom里面的Gemfile里面添加

    gem 'bootstrap-sass'

（3）在终端

   执行 bundle install

（4）在app/assets/stylesheets/application.css重命名css成为application.scss，添加

 @import "bootstrap-sprockets";

 @import "bootstrap";

第二步：修改welcome的landing page的引导页

（1）将引导页的图片1-4放入img里面（5备用）

（2）修改views/welcome/index.html.erb

   将<h1>hallo world</h1>改为

<div class="navbar-0 bg-color1">

    <a class="navbar-1" href="/"><img src='<%= image_url '1.png' %>' ></a>

    <a class="navbar-2" href="/"><img src='<%= image_url '2.png' %>' ></a>

    <a class="navbar-3" href="/"><img src='<%= image_url '3.png' %>' ></a>

    <a class="navbar-4" href="/"><img src='<%= image_url '4.png' %>' ></a>

</div>

（3）在welcome.scss里面添加welcome指定元素的代码

.navbar-0{

  margin-top:0px;

  width:100%;

  height: 60px;

  padding:0px;

  border:0px;

  font-size: 0px;

}

.navbar-1{

  margin-top: 0px;

  width: 100%;

}

.navbar-1 img{

  margin: 0px;

  width:100%;

  padding:0px;

  border:0px;

  font-size: 0px;

}

.navbar-2 img{

  margin-top: 0px;

  width:100%;

  font-size: 0px;

}

.navbar-3 img{

  margin-top: 0px;

  width:100%

}

.navbar-4 img{

  margin-top: 0px;

  width:100%

}

（4）在终端跑rails s

（5）打开http://localhost:3000可以看到最后的landing page引导页面的效果

（6）将最新的web app 推送到GitHub和Heroku上完成代码的修改；

6-0 先保存修改的web app到本地的git仓库

git add .

git commit -m "add img & add bootstrap"

6-1 GitHub推送方法

https://github.com/shenzhoudance/demo

终端完成：push -u origin master

6-2 heroku推送方法

https://demo919.herokuapp.com

终端完成：git push heroku master

最大的问题在于本地的图片在后期会消失，同时图片的展示非常的慢，所以我们在上传图片的时候应该使用网页的图片，而不是直接在本地完成图片的上传。

课后学习：

1、html的<div>的包含关系和class的CSS的定义关系；

2、CSS的盒子的模型解读；

4、GitHub的使用方法

5、Heroku的使用方法