【硅谷创业公司CCO】教你用Zurb搭建网页相册 | 只需一天
Zurb
Eve
4人收藏 3366次学习

Part 1 Intro

 

Today you'll learn how to make your own blog using a tool called Zurb Foundations, which is very similar to Twitter Bootstrap! If you've never hear of Bootstrap before, you can check out our course on it here: http://1ke.co/course/1

Just like Twitter Bootstrap, Zurb will include many stylistic elements like color, column size, text size, buttons, and more so that it's much easier for us to easily create a website. Using Zurb we'll have to write only a very minimal amount of CSS.

Part 1 of this course is designed for complete beginners. Part 2 will introduce more functionality into the website and is better for those with some HTML & CSS experience. 

 

Part 1.1 What's in a Website?

If you're familiar with the basics of the web feel free to skip this!!

Websites can be divided function and design. The function of a website is usually built by programmers using Python, Ruby, NodeJS, or other tools. This functionality- such as providing data or performing analytics is divided into "back-end" and "front-end" code. All the raw data- such as WeChat messages, news articles, or even stock prices- is then displayed in our browser using HTML. Finally, CSS is used to make everything look beautiful and easy to use. HTML & CSS are considered the design elements of a website and they're what we'll focus on for this part of the lesson.

Let's take a look at some HTML & CSS code.

1. Open up your web inspector (Chrome or Firefox)

If you are using Safari, please look up an online tutorial for how to enable the web inspector

Open a webpage in your browser, for example: http://foundation.zurb.com/templates.html

Right-click anywhere on the page and then hit "Inspect Element" to open the web inspector 

There's lots of stuff going on in the web inspector, but for now you just need to know that the HTML code is on the left and the CSS code is on the right.

Try right clicking on some other parts of the website, like the buttons, and opening the web inspector so that different sections of code are highlighted.

Now try editing some text! Right click and "inspect element" over some words- like a title or paragraph. 

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. What's with all the tags?

  • Tags look like this: <div>, <h2>, <p>
  • They generally make a sandwich around a particular paragraph, image, or line of code like <strong> this </strong>
  • Different tags mean different things. For example, <h2> means a size 2 header, <img> means image, and <div> means a section (division).

3. Yourfirstcode!

Time to write some HTML code! Go to JS Fiddle (https://jsfiddle.net/) and enter in this code into the HTML & CSS sections. After, hit "Run" to see the result.

HTML

<h1>Hello World</h1>

CSS

.h1 { color: red; }

It's red, awesome! What happens if you change the color to green? Or blue? What if you change "color" to "background-color"?

For more HTML & CSS, check out W3 schools:

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

This will be a great resource if you ever get stuck! 

Part 1.2 Setup

To make our awesome photobook, we're going to need to do a little bit of set up:

Tools

  • Install Sublime Text 2. We also recommend you look at an online tutorial on how to use Sublime Text if you never have before.
  • Install Mozilla Firefox or Google Chrome. You can use Safari as well, but for this lesson it will be easier to follow along if you are using Chrome or Firefox
  • Download and extract the zurb package into a new folder and call it "zurb-photobook" http://foundation.zurb.com/cdn/releases/foundation-5.5.2.zip

Open index.html

  • In the browser. Just double click on "index.html" in your zurb-photobook folder to open it in your default browser. If your default browser is NOT Chrome or Firefox, then right-click on "index.html" and open it in Chrome or Firefox using the "Open With..." option
  • In Sublime Text 2. Just right click on "index.html" and choose "Open with Sublime Text 2" 

Remove the default code

  • Delete all of the HTML code between the <body></body> tags 

Using the Blog Template by Zurb

  1. Go to http://foundation.zurb.com/templates.html
  2. Click "HTML" under the Orbit Home template 
  3. Copy all of the code and paste it between the <body></body> tags on line 11 in Sublime Text
  4. Hit save and refresh "index.html" in your browser. If you followed the steps correctly, then it 

should look like this: 

YAY we're all set up and ready to start making our photobook!!
Before we start coding, I recommend taking a look at some of the tags using W3 schools and also

checking out the Zurb Foundations documentation here: http://foundation.zurb.com/docs/ 

Part 1.3 Images

First thing's first. Find some of your favourite wedding images and save them into the "img" folder in "zurb-photobook".
If you need some good free pictures, I recommend using stocksnap.io (https://stocksnap.io/search/wedding/sort/relevance/desc

Now we need to replace the image placeholders in our index.html file with our new pictures. Open the "Find" tool in Sublime Text: 

Type "img" into the Sublime Text Find bar and hit "Find": 

See how the <img> tag is highlighted?
An image tag will look something like this:

<img src="location" />

For an image that's online we'll use a website:

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

But for images we've saved, we need to specify the path name:

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

Create a logo in PhotoShop or paint and save it as "logo.png" in the "img" folder of zurb-photobook. Example: 

To have our logo show up on our website we just need to replace the path name. That means we need to replace what is in <img src=""> Delete everything between the quotation marks in <img src="">: 

Now let's type in the path name for logo.png. Remember, the path name is folder/imagename.ext: 

Save index.html and refresh the browser: 

Yay we've got a logo! Replacing the rest of the images will be almost the exact same. Go back to the "Find bar" in Sublime Text and hit "Find" again to go to the next image tag: 

Just like before, replace everything in <img src=""> with your new path name. For me this looks like: 

Save and refresh the browser! 

Don't worry about it being off centered for now, we'll fix that later. 

Part 1 Challenge 1

Replace all the remaining images using the technique you just learned. You should have something like this:
Replace the rest of the image placeholders the same way: 

On to the next part: HTML! 

Part 1.4 HTML Text

To replace the text in a website, you can either go through the index.html file yourself. But what if you're not sure which code you should change? An easy way to change our HTML is using the Web Inspector in your browser and the Sublime Text "Find" Feature.

To use the web inspector:
Right click over the text you want to change, it will highlight the matching line of code 

Copy this code and paste it into the "Find" bar in Sublime Text: 

Now all you need to do is replace the Words in between the <h4> tags: 

Hit "Find" again to go to the next header tags. Just like before, enter in your new text: 

 

Part 1 Challenge 2

Using what you just learned, replace the three paragraphs and the "Get In Touch" text. Here's what I got: 

 

Part 1.5 HTML Links

To complete Part 1, we now need to replace our links. We're going to use two types of links: simple links and email links.

Simple Links

Let's change the links for our four buttons at the top of the page: 

To do this, "Inspect Element" over Link 1: 

Now copy and paste this line of code into the find feature of Sublime Text: 

For each of these links we need to do two things: Replace where the link will go (the "href") and replace the text (called "inner HTML")

First replace the text for each link: 

Next, copy the URL of the four websites you want your user to go to. For instance:

Now replace the "#" in each link with your URLs: 

Save and refresh the browser, then try out your new links! 

Email Links

There's a special way we create links if we want to open up email.
Instead of using a URL, we're going to use "mailto". The code will look similar to this:

<a href="mailto:someone@example.com?Subject=Live%20Stream" target="_top"> Send Mail</a>

"Inspect Element" over the "Contact Us" button: 

Copy and paste the code into the Sublime Text "Find" tool: 

Now there a two things we need to do.

  1. Replace the "#" with the following (use your own email address of course!): mailto:someone@example.com?Subject=Live%20Stream
  2. Add a space between href="" and class="" and write the following: 
target="_top"

The result should look like this: 

Save, refresh the browser and try out your new email link! 

Part 1 Final Challenge

Use W3 Schools to find out how you can make the main image to fill up the whole area!! HINT:

style="width:100%" 

Congratulations! Now you have a beautiful wedding photo book! Remember to follow me on 1KE and check out our WeChat group to be the first to know about Part 2 and to also hear about any cool events or new things we're doing!

加入1KE学习俱乐部

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

ChaseFuture最早的前端框架就是用的Zurb