【硅谷创业公司CCO】教你一天之内搭建购物网站浏览页面
Eve
14人收藏 3975次学习

【硅谷创业公司CCO】教你一天之内搭建购物网站浏览页面

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 Wevsite

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 blog, 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 Blog" 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

 ​

  1. Copy all of the code and paste it between the <body></body> tags on line 11 in Sublime Text
  2. 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 blog!!
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. Add a photo of yourself and six product photos, like shoes or dresses, and save them in the "img" folder in "zurb-store". If you need some good free pictures, I recommend using stocksnap.io (https://stocksnap.io/search/shoes/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! 

Looking good! That means it's time for your first Challenge: Images. 

Part 1 Challenge 1- Images

Replace all the remaining images, including the "Site Owner" image using the technique you just learned.

You should have something like this: 

But why aren't the pictures all lined up nicely?

If your images aren't all exactly the same size, you probably will have the problem above. To fix that change each line of image code from this:

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

To this:

<img src="img/thumbnail1.png" style="width:100%">

Adding in style="width:80%" will make each of your images only take up 100% of the allowed space, so they'll fit easily. Don't worry too much about how that works for now, as it's something you'll be looking at more later.

For now, it's on to the next task: HTML! Challenge 1 Example Result: 

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:
Go to your browser. Right click and hit "Inspect Element" 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 just replace the text between the <h3> </h3> tags with your own words! 

To replace the rest of the text, you can either go through the code yourself and do it manually, or follow this same process using the web inspector. "Inspect Element" where you want to change some text and copy the code: 

Paste it into the Sublime Text Find tool: 

Replace the text with your own words, save, and refresh your browser: 

Part 1 Challenge 2- HTML text

Using what you just learned, change the title for the navigation bar, give each item a name, and set a unique price, and write up a description for yourself. Ignore the "Main Item" navbar links- we'll work on those in Part 2.

Here's what I got: 

Part 1 Final Challenge

Copy the code block for 1 item, like this:

<div class="large-4 small-6 columns"> <img src="img/thumbnail1.png" style="width:100%">

<div class="panel">
<h5>Amy actives</h5>
<h6 class="subheader">$50.00</h6>

</div> </div>

Go to the blank space after your third item (line 139), and paste the code 3 times to add 3 new items: 

Result in Sublime Text: 

Result in browser: 

For your final challenge, edit the pictures and text in these three new items. If you're feeling really adventurous, keep adding new items by copying and pasting the code block provided above.

Remember to upload a screenshot of your finished website to our WeChat (QR Code below) or QQ group: 151115091!!

Congratulations! Now you have a beautiful ecommerce framework! 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学员开放的私人俱乐部