【硅谷创业公司CCO】教你用Zurb搭建博客 | 只需一天
Zurb
Eve
15人收藏 3414次学习

【硅谷创业公司CCO】教你用Zurb搭建博客 | 只需一天

Intro

今天,你将学习到如何使用一种称为Zurb Foundations的工具来建立自己的博客,这与Twitter Bootstrap非常相似!如果你之前从来没有听说过Bootstrap,你可以看看我们这里的课程:http://1ke.co/course/1

就像Twitter Bootstrap,Zurb将包括许多风格的元素,像颜色、列大小、文字大小、按钮以及其它的东西,使得我们能更轻松地创建一个网站。使用Zurb,我们只需写一段很短的CSS。

本课程的第一部分是提供给之前从未使用过HTML或CSS的初学者。第二部分将是给那些已经较会使用HTML和CSS,以及想要在他们的网站上添加更多功能的人。

 

Part 1.1 What's in a Website?

网站可分为功能和设计。一个网站的功能通常是由使用Python,Ruby,NodeJS,或其他工具的程序员建设的。这功能性——如提供数据或执行分析,被分为“后端”和“前端”的代码。所有的原始数据——如微信消息、新闻文章,甚至股票价格,就显示在使用HTML的浏览器上。最后,CSS使一切看起来更美观,且使用方便。 HTML和CSS被认为是一个网站的设计元素,本节课程我们将专注于说明它们到底是什么。

让我们来看看一些HTML和CSS代码。

1.打开你的网页检查器(Chrome或Firefox)

如果你使用的是Safari,请找一个在线教程关于如何启用网页检查器。

在浏览器中打开一个网页,例如:http://foundation.zurb.com/templates.html

用鼠标右键单击在页面上的任意位置,然后点击“检查元素”来打开网页检查器。

在网上检查器上可以看到很多的东西,但现在你只需要知道,HTML的代码在左边,CSS的代码在右边。

试着右击网站上的其他一些地方,如按钮,打开Web检查,使不同的代码段突出显示。

现在,试着编辑一些文字!右键单击,并且“检查元素”一些文字,像一个标题或段落。

Then, just double click on the line of text between the <h2></h2> tags, write your own words, and hit enter! The text will have changed on the webpage!

2.标签的含义是什么?

标签是这样的: <div>, <h2>, <p>

他们一般在特定段落、图像或像<strong>这</ STRONG>的代码线周围,将它们围成“三明治”。

不同的标签意味着不同的东西。例如,<h2>表示字号大小为2的标题,<img>表示图像,<div>表示部分(分部)。

3.你的第一个代码!

到时候来写一些HTML代码了!去JS Fiddle(https://jsfiddle.net/),并将此代码输入到HTML和CSS部分。之后,点击“运行”看看结果。

HTML

<h1>Hello World</h1>

CSS

.h1 { color: red; }

它是红色的,真棒!如果你改变颜色为绿色,会发生什么?或蓝色?如果你改变 “背景色”会发生什么?

欲了解更多HTML和CSS,可以查看W3学校:

http://www.w3schools.com/tags/default.asp

在你遇到困难时,这将是一个很好的资源!

Part 1.2 Setup

为了使我们的博客看起来更棒,我们将安装一些执行程序:

工具

安装Sublime Text 2,我们还建议你看一下关于如何使用Sublime Text的在线教程,如果你之前从未使用过它的话。

安装Mozilla Firefox或Google Chrome。你也可以使用Safari浏览器,但如果你使用的是Chrome或Firefox,这个课程学习起来将更加容易。

下载并解压缩包zurb到一个新的文件夹,并将其命名为“Zurb Blog”http://foundation.zurb.com/cdn/releases/foundation-5.5.2.zip

打开index.html

在浏览器中,双击zurb-photobook中的“index.html”,在默认浏览器中打开它。如果你的默认浏览器不是Chrome或Firefox,右键“index.html”,并使用“打开方式...”选项在Chrome或Firefox打开它。

在Sublime Text 2,只需右键点击“index.html”,并选择“打开Sublime Text 2.”

删除默认代码。

删除所有<body> </ body>标记之间的HTML代码。

用Zurb使用博客模板

  1. 进入 http://foundation.zurb.com/templates.html
  2. 在Orbit Home 模板下,单击“HTML”

  3.复制全部的代码,并将其粘贴在Sublime Text 11行的<body></ body>标签之间。

 4.点击保存并在浏览器中刷新“index.html”。如果你正确地遵循了这些步骤,那么它应该看起来像这个样子:

 

YAY我们现在都安装好了,开始制作我们的博客!

在我们开始编码之前,我建议看看一些使用W3学校的标签,并且在这儿查看Zurb Foundations:http://foundation.zurb.com/docs/

 

Part 1.3 HTML

 让我们以改变使用HTML的博客的文字来作为开始。要做到这一点,让我们在网络检查器中,使用Sublime Text的特点“查找”。

为了改变文本:

右击你想要改变的文本。

现在,我们需要用我们的新图片来替换index.html文件中的图像占位符。在Sublime Text中打开“查找”工具:

在Sublime Text的“查找”一栏中输入“img”,并点击“查找”。

请看<img>标签是如何突出显示的?
图像标签是像这个样子的:

<img src="location" />

对于在线上的图像,我们会使用一个网站:

<img src="http://somewebsite.com" />

但是对于我们已经保存的图片,我们需要指定路径名:

<img src="img/someimg.png" />

在Photoshop或画图中设计一个logo,以“logo.png”命名,保存在zurb-photobook的“img”文件夹中,例如:

为了让我们的标志显示在网站上,我们只需要更换路径名。这意味着我们需要更换<img src="">里的东西,删除<img src="">引号之间的一切:

现在,让我们输入logo.png路径名。请记住,路径名是folder/imagename.ext:

保存index.html并 刷新浏览器:

耶,我们已经有了一个logo!替换其余的图像几乎是完全一样的。回到Sublime Text中的“查找栏”,然后再次点击“查找”,进入下一个图像标签:

就像之前一样,用新路径名替代 <img src="">中的所有东西,对于我来说这看起来是这个样子的:

保存并刷新浏览器!

 

不要担心它偏离了中心,我们将在以后解决。

Part 1.4 First Challenge: Text

检查元素>复制>粘贴到Sublime Text的“查找”>替换词>保存

用你自己的替换博客占位符!不要担心链接和图片,我们将在之后解决这个问题。

这是一个制作你想要的博客的机会!无论你想要多么有创意、多么疯狂。

这是我的:

Part 1.5 Images

让我们使我们的博客看起来更性感。

找到两张你喜欢的图像,将它们保存在"zurb-blog" 的“img”文件夹。我推荐这个有着很多很棒图片的网站:http://bootstrapbay.com/blog/free-stock-photos/

在Sublime Text查找栏键入“img”:

现在我们可以找到我们的标签。

一个图像标签应该看起来像这样:

<img src="location" />

对于网络上的图像,我们使用一个网站:

<img src="http://somewebsite.com" /> 

但是对于我们保存的图像,我们需要指定路径名:

<img src="img/someimg.png" />

用 "img/yourimagename.png"代替网址(把你的图像也改成这个名字)

我有:

其他的图像也这么做,保存,并刷新你的浏览器!

Part 1.6 Links

现在,我们有两篇很棒的文章,我们将这两个链接收在按钮中,放置在我们页面的最顶端。我选择了我的社交媒体链接,你也可以使用任何你喜欢的链接!

使用网站检查器来复制代码段:

把它粘贴入sublime text来突出显示它:

复制你想要使用者进入哪里的链接,并且加入“#”:

保存,刷新你的浏览器,并且单击进入你的新链接,看看会发生什么!

Part 1.7 Challenge 2

替换为四个你自己的按钮链接!它们可以是社交媒体、你发现的其他的酷炫的博客或者是任何你喜欢的东西!

这里是我的:

Part 1 Final Challenge

你最后的挑战就是,你需要为你的博客创建一篇或两篇新的文章。

为了做到这个,找到我们在第一部分中所说的标签,复制标签中的所有东西:

<article>

<h3><a href="#">Why I hate Cheese but love Pizza</a></h3> <h6>Written by <a href="#">Eve Olynyk</a> on May 11, 2015.</h6>

<div class="row">
<div class="large-6 columns">

<p>It's a little-known fact, but I actualy LOVE Cheese and HATE pizza. See what I did there, confusing you with my interesting title?</p>

<p>Here are some things I learned from Wikipedia about Cheese: it's delicious, it's been around for a really long time, and it has run for Prime Minister at least twice. </p>

</div> <div class="large-6 columns">

<img src="img/cheese.png"/> </div>

</div>

<p>奶酪(英文: cheese),又名干酪、乳酪,音譯稱芝士、起司、起士,是多種乳製芝士的通 稱,有各式各樣的味道、口感和形式。乾酪以奶類為原料,含有豐富的蛋白質和脂質,乳源包括家牛、水牛、家 山羊或綿羊等。製作過程中通常加入凝乳酶,造成其中的酪蛋白凝結,使乳品酸化,再將固體分離、壓製為成品 [1]。有的乾酪在表面或內部布有黴菌,而大部分的乾酪製品在室内做飯時易融化。

奶酪可以分為上百種,乳源(產乳動物所吃的食物也有差異),是否使用巴斯德消毒法,乳脂含 量,細菌和霉,處理方法和發酵決定了他們的形狀,口感,及味道。奶酪可以用香草,香料,或者煙燻來調味。 奶酪中的黃色和紅色,例如紅萊斯特奶酪,是由於添加了胭脂樹的种子。</p>

<p>少數乳酪中牛奶是通過加入醋,檸檬汁,或者其他的酸來凝固的,而大部份的乳酪是通過細 菌輕微酸化,將乳糖變為乳酸,然後加入凝乳酶使之完全凝固。凝乳酶可由小牛的胃中取出,也可以採用細菌培 養或被其他物質代替。大多數素食奶酪是由真菌米黑毛霉發酵製成,但也有一部份是由菜薊屬的不同種類提取出 的。</p>

</article> 

现在,在你原始的两篇文章上方新起一行(举例:37),然后粘贴:

最后,重新写所有的文本,给其他两篇文章添加入新的图片。

最后的最后,把你最终完成的博客截图,发在我们的QQ群中:151115091

记得在微信上关注我们, http://1ke.co将会是个第一个知道Part 2的人!

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
课程交流
freestyle21
2015-05-14

love it