网页制作
by Divya Mistry
通过Divya Mistry
网页 (MePage)
Web上的单页目标 (A Single-page Destination on the Web)
After going through some front-end development tutorials on Free Code Camp, I decided to try my hands at this simple Zipline challenge of creating a portfolio page. I’ll refer to this single-page destination as a MePage for the purpose of this post.
在Free Code Camp上学习了一些前端开发教程之后，我决定尝试创建Zipline这个简单的挑战 ，即创建一个投资组合页面。 出于本文的目的，我将此单页目标称为MePage 。
We’ll do this as a two-step process. First we’ll create a page using CodePen to iterate our design and the code, and then optionally we’ll push it to Github Pages when we are satisfied with the results. Do keep in mind that all of this can be done independent of Codepen and Github Pages.
我们将分两个步骤进行。 首先，我们将使用CodePen创建页面以迭代我们的设计和代码，然后在对结果满意的情况下有选择地将其推送到Github Pages 。 请记住，所有这些都可以独立于Codepen和Github Pages完成。
With that in mind, here we go.
考虑到这一点，我们开始。
密码笔 (CodePen)
CodePen provides an easy way to test your front-end development ideas. You can create a set of web pages to learn and/or show-off your web development skills there, and share it with the world. We’ll use it to build a single-page personal site (i.e. a MePage) where the visitor can learn about you, your social media presence, and get your contact information.
CodePen提供了一种简便的方法来测试您的前端开发思想。 您可以创建一组网页来在那里学习和/或炫耀您的Web开发技能，并与世界分享。 我们将使用它来构建一个单页个人网站(即MePage )，访问者可以在其中了解您，您的社交媒体状态以及获取您的联系信息。
Step 1: Create a +New Pen.
第1步：创建+新笔 。
Step 2: In the HTML box, write the following. This shows the general structure of the MePage.
步骤2：在HTML框中，编写以下内容。 这显示了MePage的一般结构。
<body> <!-- navigation bar --> <!-- header text --> <!-- social icons --> <!-- inspirational quote --> <!-- about me --> <!-- contact me --></body>Step 3: We’ll utilize Bootstrap for our site. Let’s include that for our use. Click on the gear icon on the top-left corner of the CSS block. In the CSS settings window, click on the Quick-add drop-down menu, and select Bootstrap.
步骤3：我们将在网站上使用Bootstrap。 让我们将其包括在内。 单击CSS块左上角的齿轮图标。 在CSS设置窗口中，单击“快速添加”下拉菜单，然后选择Bootstrap。
While we are at it, let’s also add jQuery and Bootstrap JavaScript libraries to help with interactivity of the menu based navbar. To do this, go to the JavaScript settings page, and Quick-add the jQuery and Bootstrap libraries.
在此同时，我们还添加jQuery和Bootstrap JavaScript库，以帮助实现基于菜单的导航栏的交互性。 为此，请转到JavaScript设置页面，然后快速添加jQuery和Bootstrap库。
Now we start filling in the various parts of the page.
现在，我们开始填写页面的各个部分。
Step 4: Let’s first create the navigation bar. We’ll utilize the Bootstrap’s fixed-top navigation bar for this.
步骤4：首先创建导航栏。 为此，我们将利用Bootstrap的固定顶部导航栏。
Although not necessary, you can read the nitty-gritty details about Bootstrap navbar here. This will help you customize the navbar later on.
尽管不是必需的，但是您可以在此处阅读有关Bootstrap navbar的详细信息。 这将帮助您稍后自定义导航栏。
- Create a <nav> element and a container <div> in the <body>. This is where the navbar contents will go. 在<body>中创建一个<nav>元素和一个容器<div>。 这是导航栏内容所在的位置。
<!-- navigation bar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- contents of navigation --> <!-- Add the next bit of code here --> </div> </nav>- We can also utilize the responsive design for navigation menu when the web page is being viewed on smaller screens. The following code will show the contents of navigation items in a collapsible menu on smaller screens. We’ll also show a Brand Name or a Logo as well. I have chosen to keep my own name as a brand name here. 当在较小的屏幕上查看网页时，我们还可以将响应设计用于导航菜单。 以下代码将在较小的屏幕上的可折叠菜单中显示导航项的内容。 我们还将显示一个品牌名称或徽标。 我选择在这里保留自己的名字作为品牌名称。
<div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><!-- add the toggle button with 3 horizontal lines/bars --> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Divya Mistry</a></div><!-- Add the next bit of code here -->Next we pick the navigation items for the navbar. For this exercise, we’ll create a Home link to go jump to the default view, an About link to jump to the “about me” section, and a Contact link to jump to thecontact information. These could all be different pages; however, we’ll use the magic of in-page bookmarks and Bootstrap to keep everything in a single-page and jump around the relevant sections. Add the following code where indicated in the previous code chunk.
接下来，我们为导航栏选择导航项。 在本练习中，我们将创建一个“ 主页”链接以跳至默认视图，创建一个“ 关于”链接以跳至“关于我”部分，并创建一个“ 联系人”链接以跳至联系信息。 这些可能都是不同的页面； 但是，我们将使用页内书签和Bootstrap的魔力将所有内容保留在单个页面中，并跳转到相关部分。 在前一个代码块中指示的位置添加以下代码。
<div class="navbar-collapse collapse" id="navbar"> <!-- add items to the nav bar --> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#about-me">About</a></li> <li><a href="#contact-me">Contact</a></li> </ul></div><!-- Add the next bit of code here -->We are done with the navigation bar now. You’ll notice that we have anchored the About and Contact links to #about-me and #contact-me references, but they do nothing if you click on the link. Let’s create those along with some basic structure of our page.
现在，导航栏已完成。 您会注意到，我们已经将About和Contact链接锚定到＃about-me和＃contact-me引用，但是如果您单击链接，它们将不起作用。 让我们将其与页面的一些基本结构一起创建。
<div class="container"> <div class="row text-center"> <!-- header text --> <!-- ADD the header text bit of code HERE --> <!-- social icons --> <!-- ADD the Social buttons bit of code HERE --> <!-- inspirational quote --> <!-- ADD the inspirational quote bit of code HERE --> </div> <div class="row text-center" id="about-me"> <!-- about me --> <!-- ADD the About text bit of code HERE --> </div> <div class="row text-center" id="contact-me"> <!-- contact me --> <!-- ADD the Contact text bit of code HERE --> </div></div>Let’s start filling in the various sections. Add the following lines of code where indicated with <!-- ADD the … HERE --> comments in HTML code above.
让我们开始填写各个部分。 在<！ -在上面HTML代码中添加…这里-- >注释。
- Header text 标题文本
<div class="col-xs-12"> <!-- name title --> <h1>Divya Mistry</h1> <h4>I *will* bioinformatics you</h1> <hr></div>- Social icons 社会图标
<div class="col-xs-12"> <!-- social buttons --> <a class="btn btn-default" href="https://twitter.com/divyamistry" target="_blank">Twitter</a> <a class="btn btn-default" href="https://linkedin.com/in/divyamistry" target="_blank">LinkedIn</a> <a class="btn btn-default" href="https://github.com/divyamistry" target="_blank">Github</a></div>- Inspirational quote 励志报价
<div class="col-xs-12"> <blockquote class="blockquote-reverse my-quote"> <p>The fool doth think he is wise, but the wise man knows himself to be a fool.</p> <footer>William Shakespeare in <cite title="India">As You Like It</cite></footer> </blockquote></div>You’ll notice that a part of the title is cutoff, and the quote doesn’t look quite prominent or aligned. We’ll fix that in a minute. Let’s continue adding the details to remaining sections of the page.
您会注意到标题的一部分已被截断，并且引号看起来并不十分突出或对齐。 我们将在一分钟内解决此问题。 让我们继续将详细信息添加到页面的其余部分。
- About me section. We’ll add a description on left side, and a photograph on the right. 关于我的部分。 我们将在左侧添加说明，在右侧添加照片。
<div class="col-xs-6"> <!-- About me - description --> <p class="lead">Consumer and Producer of Sciencey S#!t.</p> <p>I am a student of Bioinformatics and Computational Biology. I like making science easier to use and understand. When I'm not in lab/office, I am at home listening to Bollywood tunes.</p></div><div class="col-xs-6"> <!-- About me - photo --> <img class="img-rounded" height="250px" alt="Divya's face" src="https://lh3.googleusercontent.com/kQABk1XZ1HLRrtfkZA9tZH8WDmLgDqWIG44v-IVASL65N1hWX30"></div>- Contact me 联络我
<div class="col-xs-6"> <!-- contact me photo --> <img class="img-rounded" src="https://openclipart.org/image/150px/svg_to_png/98293/1290715998.png" alt="Contact Me"></div><div class="col-xs-6"> <!-- contact me text --> <address> <strong>Divya Mistry</strong><br> My Street Address<br> Unit 001<br> Ames, IA 50011<br> <abbr title="Phone number">515-555-0144</abbr> </address></div>Footer. Ah! I leave this for your exercise. Try to read the Bootstrap documentation and create your own footer. Here’s one idea: add a simple <div> element and provide your own copyright note.
页脚。 啊! 我把这个留给你练习。 尝试阅读Bootstrap文档并创建自己的页脚。 这是一个想法：添加一个简单的 <d iv>元素并提供您自己的版权说明。
Step 5: Let’s modify the spacing and some look-and-feel to make the page look cleaner. We’ll jump into the CSS now.
步骤5：让我们修改间距和一些外观，以使页面看起来更整洁。 我们现在将进入CSS。
Lower the body such that the contents are not hidden behind the navigation bar. Bootstrap recommends around 70px for this. I like using the em units for various reasons.
放低机身，使内容不隐藏在导航栏的后面。 Bootstrap 建议为此设置70px左右 。 我出于各种原因喜欢使用em单元。
/* Lower the main text below the navigation bar */body { padding-top: 3em; }- Right now, all the sections are too close together. Let’s separate them to give plenty of spacing in between. You can play around with this padding to your liking. I prefer around a typical laptop screen vertical size of 768px. 现在，所有部分都太靠近了。 让我们将它们分开以在两者之间留出足够的间隔。 您可以根据自己的喜好使用这种填充物。 我更喜欢典型的笔记本电脑屏幕垂直尺寸为768px。
/* each row should be a big screen in itself */.row { height: 768px; }- Let’s make the Shakespeare quote a lot more prominent on the screen. 让我们在屏幕上突出莎士比亚的名言。
/* Spacing above quote */.my-quote { margin-top: 5em; }/* Quote text font, size, and color */.my-quote>p { font-family: "Lora", serif; font-size: 3em; color: #aaa;}/* Quote attribution font size and color */.my-quote>footer { font-size: 1em; color: #bbb; }You’ll notice that I have chosen the Lora font-family for my quote. This font is available via Google Fonts. To use it, all you have to do is go to your HTML settings (click on the gear icon on top-left corner of the HTML editor), and add the following line in the Stuff for <head> text box.
您会注意到，我选择了Lora字体家族作为我的报价。 可通过Google字体使用此字体。 要使用它，只需要做HTML设置(单击HTML编辑器左上角的齿轮图标)，然后在<st ad>的内容文本框中添加以下行。
<link href='https://fonts.googleapis.com/css?family=Lora:400italic' rel='stylesheet' type='text/css'>- Finally, let’s give both information sections some padding space at the top so that when we jump to them, the navigation bar does not hide the content. 最后，让我们在两个信息部分的顶部留出一些填充空间，以便当我们跳转到它们时，导航栏不会隐藏内容。
/* for each of the sections of the page */#about-me { padding-top: 6em; }#contact-me { padding-top: 6em; }Note that this padding is necessary in spite of the padding of the <body> element, because the in-line bookmark anchors are referenced to the top of the browser window view port where <body> starts, and not relative to where the content inside the body section starts.
请注意，尽管填充了<body>元素，但还是需要这种填充，因为行内书签锚点是引用到<body>开始的浏览器窗口视图端口的顶部，而不是相对于内部内容的位置身体部分开始。
Step 6: Make any CSS modifications you would like for the footer. I decided to present a slightly smaller text.
第6步：对页脚进行任何CSS修改。 我决定介绍一个较小的文本。
Here is my resulting CodePen based on this exercise. You can add background images to the body and all the sections to give it a nice visual effect.
这是根据此练习得出的我的CodePen 。 您可以将背景图像添加到主体和所有部分以使其具有良好的视觉效果 。
Github页面 (Github Pages)
Github provides a great way to host static pages for yourself and for your projects. I decided to create a Github user Page using the results of this exercise. The code is available in this repository. Feel free to fork the repository.
Github提供了一种很棒的方式来为您自己和您的项目托管静态页面 。 我决定使用此练习的结果创建一个Github用户页面 。 该代码在此存储库中可用。 随意分叉存储库。
There are several good tutorials to teach you how Github works. If you are unfamiliar with git and Github, give them a go. It’s a skill worth learning.
有一些很好的教程可以教您如何使用Github。 如果您不熟悉git和Github ，请尝试一下。 这是一项值得学习的技能。
最后的话 (Final words)
Hope you liked this exercise, and were able to make your own MePage. Comment here with your CodePen or Github URL to show your results. If you ended up modifying this, and made your own version of an awesome MePage, please share that too. I would love to see that. And finally, if you want to stay in touch, @divyamistry is a great way to holler.
希望您喜欢这个练习，并能够制作自己的MePage。 在此处用您的CodePen或Github URL评论以显示您的结果。 如果您最终修改了它，并制作了自己的真棒MePage版本，请也分享一下。 我很乐意看到这一点。 最后，如果您想保持联系， @ divyamistry是个好方法。
翻译自: https://www.freecodecamp.org/news/mepage-8b10e260d73/
网页制作
