This article was sponsored by Microsoft. Thank you for supporting the sponsors who make SitePoint possible.
本文由Microsoft赞助。 感谢您支持使SitePoint成为可能的赞助商。
For this series of articles, we’re going to use Microsoft’s modern IDE: Visual Studio Community 2015, along with an assortment of useful tools that will probably be familiar, including Bootstrap, MailChimp and Adobe Kuler.
在本系列文章中，我们将使用Microsoft的现代IDE：Visual Studio Community 2015，以及可能会熟悉的各种有用工具，包括Bootstrap，MailChimp和Adobe Kuler。
Visual Studio is most often used as a development tool. It certainly fulfills that role. But what many people may not know is that it is also a design tool. It has full autocomplete support for front end languages such as CSS, AngularJS, jQuery and more.
Visual Studio最常用作开发工具。 它当然履行了这一职责。 但是很多人可能不知道这也是一种设计工具。 它对前端语言(例如CSS，AngularJS，jQuery等)具有完全自动完成功能的支持。
After a long session of typing in code, you might look back and see your code formatting is off or could use a little cleaning up. Visual Studio can step in and format your code with clean, readable alignment, whether it is back-end or front-end code.
长时间输入代码后，您可能会回头查看代码格式已关闭或可能需要进行一些清理。 无论是后端代码还是前端代码，Visual Studio都可以采用清晰易读的对齐方式介入并设置代码格式。
Combining Bootstrap, which is already downloaded and available in your (Starter Web) project, with Visual Studio’s IDE sets up a great environment for designing a beautiful, professional looking website.
将已经下载并在您的(Starter Web)项目中可用的Bootstrap与Visual Studio的IDE结合起来，可以为设计美观，专业的网站提供一个绝佳的环境。
Visual Studio 2015功能 (Visual Studio 2015 Features)
Visual Studio 2015 introduces some great new features to aide in our development. One of those is organization. No longer is there a large serial list of DLLs in our project References. All of those DLLs are now grouped. Expanding a group reveals the related DLLs and other associated references, such as NuGet packages. This keeps the References section very concise and keeps you from searching in different locations for various reference types.
Visual Studio 2015引入了一些很棒的新功能来辅助我们的开发。 其中之一就是组织。 在我们的项目参考中不再有DLL的大序列列表。 所有这些DLL现在都已分组。 展开一个组将显示相关的DLL和其他相关的引用，例如NuGet程序包。 这样可以使“参考”部分非常简洁，并避免您在不同位置搜索各种参考类型。
There is also a new folder included with projects. It’s called wwwroot. This folder contains static files, separating them out from dynamic files. You might be wondering, “what’s the difference between these two types?” Static files are images, CSS, and Javascript, and frameworks like Bootstrap and jQuery. Dynamic files are mainly CS and CSHTML — files that are able to process C## code.
项目中还包含一个新文件夹。 它称为wwwroot 。 此文件夹包含静态文件，将它们与动态文件分开。 您可能想知道，“这两种类型之间有什么区别？” 静态文件是图像，CSS和Javascript，以及诸如Bootstrap和jQuery之类的框架。 动态文件主要是CS和CSHTML-能够处理C ##代码的文件。
Visual Studio Community 2015 has also added some efficiencies in developer work flow. One being the ability to change code in a controller, for example, and refresh the browser without needing to compile the project again. Your changes will render in the browser once the page is refreshed. This saves developers a few seconds of time compared to recompiling and running the app all over again.
Visual Studio Community 2015还提高了开发人员工作流程的效率。 一种是例如在控制器中更改代码并刷新浏览器而无需再次编译项目的能力。 页面刷新后，您的更改将在浏览器中呈现。 与重新编译和重新运行应用程序相比，这可以节省开发人员几秒钟的时间。
Downloading packages and frameworks is simplified with the introduction of Bower. In the root project folder is a file named bower.json. In this file, you can configure frameworks and versions of them you’d like included in the project. Below is a code snippet from the bower.json file:
Bower的引入简化了软件包和框架的下载。 在根项目文件夹中，有一个名为bower.json的文件。 在此文件中，您可以配置要包含在项目中的框架和版本。 下面是bower.json文件的代码片段：
{
"name": "WebApplication",
"private": true,
"dependencies": {
"bootstrap": "3.0.0",
"jquery": "1.10.2",
"jquery-validation": "1.11.1",
"jquery-validation-unobtrusive": "3.2.2",
"hammer.js": "2.0.4",
"bootstrap-touch-carousel": "0.8.0"
},You can see jQuery is included and also the version being used. It’s a very easy and fast convention for managing frameworks.
您可以看到包含了jQuery以及正在使用的版本。 这是管理框架的非常简单快捷的约定。
We’ll discuss the above features in detail a little later in the article. To get started, let’s meet Andy.
我们将在本文稍后部分详细讨论上述功能。 首先，让我们认识Andy。
开发人员/设计师 (The Developer/Designer)
Andy is a freelance web designer. His new client wants a website designed for his guitar lessons courses.
Andy是一位自由网页设计师。 他的新客户想要一个专门为他的吉他课程设计的网站。
Andy has discussed with his client what the site should look like. It will be a simple site with earthly tones, inspired by the wood in a guitar. The top part of the site will have a large image with text on top of it. The text will be the website name followed by a tagline.
安迪(Andy)与他的客户讨论了该网站的外观。 这将是一个简单的站点，它具有大地色系，并受到吉他中木头的启发。 该网站的顶部将有一个较大的图像，顶部带有文本。 文字将是网站名称，后跟标语。
The middle section will contain three columns, used to feature different content. For example, a summary of the latest blog post, a product preview, or a short piece of news.
中间部分将包含三列，用于显示不同的内容。 例如，最新博客文章的摘要，产品预览或一小段新闻。
The bottom part of the site will contain quotes from happy customers. The client wants to allow purchases of his courses from the site. He also wants an email signup form in the top-right section.
该网站的底部将包含来自满意客户的报价。 客户希望允许从站点购买其课程。 他还希望在右上角有一个电子邮件注册表格。
We’re going to follow along with Andy as he builds a client website. There’s a lot to cover so let’s get started.
我们将与Andy一起建立他的客户网站。 有很多要讲的内容，所以让我们开始吧。
引导程序 (Bootstrap)
While Visual Studio will provide a great application structure using MVC, Bootstrap is great for speeding up the design process. It’s also fully responsive.
虽然Visual Studio将使用MVC提供出色的应用程序结构，但是Bootstrap对于加快设计过程非常有用。 它也完全响应。
This first milestone site will look like this:
第一个里程碑站点将如下所示：
Let’s look at a few templates we’ll use in the website. Go to the main Bootstrap site and click Getting Started at the top. Scroll down past Basic template until you reach Examples.
让我们看一下我们将在网站中使用的一些模板。 转到Bootstrap主站点 ，然后单击顶部的“入门”。 向下滚动到“基本”模板，直到到达“示例”。
The jumbotron looks like it will meet our requirements for the top part of the website.
巨无霸看起来将满足我们对网站顶部的要求。
It has a large grey area at the top that we can replace with our image. There is also text on top of the gray area. The three columns are there as well. Excellent!
它的顶部有一个很大的灰色区域，可以用图像替换。 在灰色区域的顶部也有文本。 三列也在那里。 优秀的！
Now we need to find something for the customer quotes. Looking at the template examples, it looks as though Carousel will do what we want.
现在我们需要为客户报价找到一些东西。 查看模板示例，看起来Carousel会做我们想要的。
You can see it in the thumbnail but if you click it, it will display the full template. Scroll toward the bottom of this template. There are several rows with larger text that would work great for quotes.
您可以在缩略图中看到它，但是如果单击它，它将显示完整的模板。 滚动到此模板的底部。 有几行带有较大的文本，很适合用作引号。
配色方案 (Color Scheme)
For a color scheme, we’re going to check out some popular schemes on Adobe Kuler. Head over to https://color.adobe.com and click Explore, then Most Popular. We’re looking for something with a good earth tone based scheme — HoneyPot looks like it will fit the bill.
对于配色方案，我们将在Adobe Kuler上查看一些流行的方案。 转到https://color.adobe.com ，然后单击“浏览”，然后单击“最受欢迎”。 我们正在寻找一种基于良好的大地色调方案的产品-HoneyPot看起来很合适。
If you move your mouse over this scheme, a hint will appear. Click edit. This lets you view the details of the color scheme. Click the brighter yellow. This is the color we’ll use for our title font in the jumbotron.
如果将鼠标移到该方案上，将出现提示。 单击编辑。 这使您可以查看配色方案的详细信息。 单击较亮的黄色。 这是我们将在超大tron中用于标题字体的颜色。
开始一个新项目 (Starting A New Project)
Andy is going to take advantage of Visual Studio 2015. We’re going to follow along, so download Visual Studio 2015 here.
Andy将利用Visual Studio2015。我们将继续学习，因此请在此处下载Visual Studio 2015。
To begin, start a new project in Visual Studio and choose ASP.NET Web Application as shown below.
首先，在Visual Studio中启动一个新项目，然后选择ASP.NET Web应用程序，如下所示。
Next, choose ASP.NET Preview Start Web:
接下来，选择ASP.NET Preview Start Web：
If you run the project, it should display a webpage that looks similar to the following:
如果您运行该项目，它将显示一个类似于以下内容的网页：
We’re going to modify the layout of this base site using parts from the Bootstrap templates described above.
我们将使用上述Bootstrap模板中的部分来修改此基础站点的布局。
Before we do, I’d like to point a few new features in Visual Studio 2015. Below is a screenshot of the application folder structure. Notice the wwwroot folder. This folder contains all of our static files. These include css, images, and js files.
在开始之前，我想指出Visual Studio 2015中的一些新功能。下面是应用程序文件夹结构的屏幕截图。 注意wwwroot文件夹。 此文件夹包含我们所有的静态文件。 这些包括CSS，图像和js文件。
The reasoning behind the wwwroot folder is to further separate dynamic code from static code. C## (dynamic) code files are still in the Controllers, Models, and Views folders, as you’d expect them to be.
wwwroot文件夹背后的原因是进一步将动态代码与静态代码分开。 正如您期望的那样，C ##(动态)代码文件仍位于Controllers，Models和Views文件夹中。
Below I’ve expanded the wwwroot folder to provide a better look at its internal structure and what’s inside of it.
下面，我扩展了wwwroot文件夹，以更好地了解其内部结构及其内部内容。
One other thing that has changed is how DLL and other references are now grouped. Rather than a large listing of references, we have a group, which can be expanded.
已经改变的另一件事是现在如何对DLL和其他引用进行分组。 除了有大量参考文献外，我们还有一个可以扩展的小组。
Notice below the DNX 4.5.1 and DNX Core 5.0 are the only references listed.
请注意，下面仅列出了DNX 4.5.1和DNX Core 5.0。
If I expanded the DNX Core 5.0 reference, I see a listing of Nuget packages and DLLs.
如果扩展了DNX Core 5.0参考，则会看到Nuget软件包和DLL的列表。
This is just a great way to not clog up the development environment with information you may not want to know until you need to.
这是不使用您可能不想知道的信息阻塞开发环境的好方法。
网站开发 (Site Development)
Our ASP.NET 5 Starter site includes Bootstrap. There is no need to download Bootstrap anymore. In previous versions of Visual Studio, we would need a Nuget package for Bootstrap or download it from the Bootstrap website and add it to our project.
我们的ASP.NET 5 Starter网站包括Bootstrap。 不再需要下载Bootstrap。 在Visual Studio的早期版本中，我们需要一个用于Bootstrap的Nuget程序包，或者从Bootstrap网站下载它，然后将其添加到我们的项目中。
To help manage client side frameworks, Visual Studio now includes Bower. If you look in the root of the project, you’ll see bower.json. In here, you’ll see references to Bootstrap with specific versions. Adding a new client-side framework will retrieve that version and bring it into the project.
为了帮助管理客户端框架，Visual Studio现在包括Bower。 如果查看项目的根目录，将看到bower.json 。 在这里，您会看到对具有特定版本的Bootstrap的引用。 添加新的客户端框架将检索该版本并将其引入项目。
To get started, we want to do is download the code examples from the bootstrap website. Go to getbootstrap.com and click Download Bootstrap. Under Source Code, click Download source. Unzip this file and go to docs > examples > jumbotron. Drag the jumbotron.css file into the wwwroot > css folder. You can also drag the index.html into the root of the project. It won’t display when the site starts, since this is an MVC site. But we’ll use it as a reference.
首先，我们要从bootstrap网站下载代码示例。 转到getbootstrap.com，然后单击“下载Bootstrap”。 在“源代码”下，单击“下载源”。 解压缩该文件，然后转到docs > examples > jumbotron 。 将jumbotron.css文件拖到wwwroot > css文件夹中。 您也可以将index.html拖到项目的根目录中。 该站点启动时将不会显示，因为这是MVC网站。 但是我们将其用作参考。
We’re going to start by modifying the main site layout. In the Solution Explorer, open Views > Shared > _Layout.cshtml. You’ll see the following CSS file references at the top of this file:
我们将从修改主站点布局开始。 在解决方案资源管理器中，打开“ Views > Shared > _Layout.cshtml 。 您将在此文件顶部看到以下CSS文件引用：
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css" />Remove the bootstrap-touch-carousel.css line. Create a new line under the bootstrap.css line. Drag the jumbotron.css file and place it on this new line. It should now look like the following:
删除bootstrap-touch-carousel.css行。 在bootstrap.css行下创建新行。 拖动jumbotron.css文件并将其放在此新行上。 现在看起来应该如下所示：
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
<link href="~/wwwroot/css/jumbotron.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/site.css" />Open the Home folder inside the Views folder then open the Index.cshtml file. Remove everything in this file except the top part:
打开Views文件夹内的Home文件夹，然后打开Index.cshtml文件。 删除此文件中除顶部以外的所有内容：
@{
ViewBag.Title = "Home Page";
}Open the index.html Bootstrap file that we dragged in earlier. Collapse the nav, div class=jumbotron and div class=container nodes so they are easier to see, as shown below:
打开我们之前拖动的index.html Bootstrap文件。 折叠nav ， div class=jumbotron和div class=container节点，以便于查看，如下所示：
Copy the two divs and paste them into the Index.cshtml file. Now run the app. You should see the following:
复制两个div并将其粘贴到Index.cshtml文件中。 现在运行该应用程序。 您应该看到以下内容：
You’ll notice we have two footers. This can be fixed by removing the following code at the bottom of Index.cshtml:
您会注意到我们有两个页脚。 可以通过删除Index.cshtml底部的以下代码来解决此问题：
<hr>
<footer>
<p>© Company 2014</p>
</footer>In this same file, we can add some more meaningful headers to the three columns. Add the following headers in the H2 tags just under the three
在同一文件中，我们可以向三列添加一些更有意义的标题。 在以下三个标题的H2标签中添加以下标头
lines:
行数：
Latest Blog Post
New York, New York Workshop
Beginner 1 LessonsIf you run the app, you should see the following:
如果运行该应用程序，则应看到以下内容：
更新巨无霸 (Updating The Jumbotron)
We can now update our jumbotron with an image. The jumbotron is the large gray box at the top of the webpage.
现在，我们可以使用图像更新巨型飞船。 巨无霸是网页顶部的大灰色框。
We’ll use this image as the jumbotron’s image. Download the large version and place it in wwwroot > images. Open wwwroot > css > site.css. Type in the following at the bottom of this file:
我们将使用此图像作为超大型飞机的图像。 下载大版本并将其放在wwwroot > images 。 打开wwwroot > css > site.css 。 在此文件底部键入以下内容：
.jumbotron {
background-image: url('../images/musician-349790_1920.jpg');
background-size:cover;
color:#fffad5;
}You can actually drag in the image and Visual Studio will create the necessary background-image code.
您实际上可以拖动图像，Visual Studio将创建必要的background-image代码。
The color fffad5 is from our Adobe Kuler color scheme.
颜色fffad5来自我们的Adobe Kuler配色方案。
We can now update the jumbotron text. Go back into Index.cshtml. Open the jumbotron node and replace:
现在，我们可以更新巨型文本。 返回Index.cshtml 。 打开jumbotron节点并替换：
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>with the following:
具有以下内容：
<div class="container">
<h1 class="scriptfont">Rockstar Guitar Lessons!</h1>
<p>Become an expert one step at a time.</p>Let’s run the app and see what we have so far. Your page should look like the following:
让我们运行该应用程序，看看目前为止。 您的页面应如下所示：
As you can see, we’re getting close. The jumbotron should extend all the way to edges. This gives our overall design a little more depth. To accomplish this, in Index.cshtml, remove the container body-content div surrounding @Renderbody().
如您所见，我们正在接近。 巨无霸应该一直延伸到边缘。 这使我们的总体设计更深入。 为此，请在Index.cshtml ，删除@Renderbody()周围的container body-content div。
Now your code should look like the following:
现在，您的代码应如下所示：
更新字体 (Updating Fonts)
Inside the jumbotron, we want a different front. Something more informal. We’re going to use a font called Dancing Script for this. Google Web Fonts is going to help us in getting the font.
在超大型飞机内部，我们需要一个不同的战线。 一些非正式的东西。 为此，我们将使用一种名为“跳舞脚本”的字体。 Google Web字体将帮助我们获取字体。
Navigate here, in the top left, type in dancing, which should bring up Dancing Script. Click Add To Collection then click Use. Uncheck Normal and check Bold. Copy the script link at the bottom.
在此处导航，在左上角，输入跳舞，这将弹出跳舞脚本。 单击添加到集合，然后单击使用。 取消选中正常，然后选中粗体。 复制底部的脚本链接。
In _Layout.cshtml, paste the script link under the title tag. It should look like the following:
在_Layout.cshtml ，将脚本链接粘贴在title标签下。 它应如下所示：
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script:700' rel='stylesheet' type='text/css'>Now we’re going to add a new class to site.css. This will allow us to target the font to specific text. Add the following to site.css:
现在，我们要向site.css添加一个新类。 这将使我们能够将字体定位到特定的文本。 将以下内容添加到site.css ：
.scriptfont {
font-family: 'Dancing Script', cursive;
}In the jumbotron, add class="scriptfont" to the H1 tag so it looks like the following:
在巨无霸中，将class="scriptfont"添加到H1标签中，使其类似于以下内容：
<h1 class="scriptfont">Rockstar Guitar Lessons!</h1>Run the app and check out the jumbotron title font. It should now be in script.
运行该应用程序，然后检查jumbotron标题字体。 现在应该在脚本中。
画龙点睛 (Finishing Touches)
To provide a little polishing to this first phase of our design, we’re going to add a background and do a little adjusting to the footer, which is currently flush left.
为了在设计的第一阶段提供一些改进，我们将添加背景并对页脚进行一些调整，该页脚当前处于齐平状态。
We’ll use an image for the background and something to that matches our Earthy tones. Download it hereand type in “seamless paper texture”. Download this texture and add it to wwwroot > images.
我们将使用图像作为背景，并使用一些与我们的泥土色调匹配的图像。 在这里下载并输入“ seamless paper texture”。 下载此纹理并将其添加到wwwroot > images 。
Open site.css. Add a new line within the first body tag. Then drag the paper texture into it. It should look like the following:
打开site.css 。 在第一个body标签内添加新行。 然后将纸张纹理拖入其中。 它应如下所示：
body {
padding-top: 50px;
padding-bottom: 20px;
background-image: url('../images/seamless_paper_texture.png');
}While we’re here, add the following at the bottom of this file:
当我们在这里时，在此文件的底部添加以下内容：
footer {
margin-left:15px;
}If you run the app now, the background should be visible and the footer off the edge.
如果立即运行该应用程序，则背景应该可见，页脚不在边缘。
客户报价 (Customer Quotes)
We can now format our quotes section. Code for the quotes can be found in the same Bootstrap examples folder. Open the Carousel folder then the index.html file.
现在，我们可以格式化报价部分。 引号的代码可以在同一Bootstrap示例文件夹中找到。 打开Carousel文件夹，然后打开index.html文件。
Copy the featurette code starting at this comment
从此注释开始复制功能代码
<!-- START THE FEATURETTES -->and ending with this comment
并以此评论结尾
<!-- /END THE FEATURETTES -->Now paste this code into the index.cshtml file just below the three columns we added earlier. Your should look like the following:
现在，将此代码粘贴到我们前面添加的三列下方的index.cshtml文件中。 您应该如下所示：
You can add some custom quotes by opening each featurette div and modifying the text between each of the following H2 tags:
您可以通过打开每个Featurette div并修改以下每个H2标签之间的文本来添加一些自定义引号：
<h2 class="featurette-heading">Your finished webpage should look similar to the following:
完成的网页应类似于以下内容：
摘要 (Summary)
Andy now has a completed webpage for his client that will be the new guitar lessons customer facing site.
Andy现在为他的客户提供了一个完整的网页，它将成为面向客户的新吉他课程。
By using Visual Studio 2015 and Bootstrap, Andy was able to create a great looking website with little effort.
通过使用Visual Studio 2015和Bootstrap，Andy可以轻松创建漂亮的网站。
Next time, we’ll look at how to integrate MailChimp to give Andy’s client the ability to send email updates to the customers. We’ll add a couple of new pages, such as a thank you page for people signing up to the email list and a contact page.
下次，我们将研究如何集成MailChimp，以使Andy的客户能够向客户发送电子邮件更新。 我们将添加几个新页面，例如，感谢您注册电子邮件列表的人员的感谢页面和联系页面。
翻译自: https://www.sitepoint.com/design-develop-microsoft-community-2015-setting-up-site/
