Visual Studio Community 2015 : 사이트 설정

이 기사는 Microsoft가 후원했습니다. Sitepoint를 가능하게하는 스폰서를 지원해 주셔서 감사합니다. 이 일련의 기사의 경우 Bootstrap, Mailchimp 및 Adobe Kuler를 포함하여 친숙 할 수있는 유용한 도구와 함께 Microsoft의 Modern IDE : Visual Studio Community 2015를 사용할 것입니다. Visual Studio는 개발 도구로 가장 자주 사용됩니다. 그것은 확실히 그 역할을 수행합니다. 그러나 많은 사람들이 모르는 것은 그것이 디자인 도구라는 것입니다. CSS, AngularJS, JQuery 등과 같은 프론트 엔드 언어에 대한 전체 자동 완성 지원이 있습니다. 코드를 입력하는 긴 세션 후에는 코드 형식이 꺼져 있거나 약간의 정리를 사용할 수 있습니다. Visual Studio는 백엔드 또는 프론트 엔드 코드에 관계없이 깨끗하고 읽을 수있는 정렬로 코드를 들어 올리고 포맷 할 수 있습니다. (스타터 웹) 프로젝트에서 이미 다운로드 및 사용할 수있는 부트 스트랩 결합, Visual Studio의 IDE는 아름답고 전문적인 웹 사이트를 디자인하기위한 훌륭한 환경을 설정합니다. 키 테이크 아웃

Visual Studio Community 2015는 프론트 엔드 언어에 대한 자동 완성 지원과 깨끗하고 읽을 수있는 정렬을위한 코드를 포맷하는 능력을 갖춘 개발 및 설계 도구 역할을하는 현대적인 IDE입니다. Visual Studio 2015는 프로젝트 참조에서 DLLS의 Better of DLLS, WWWROT라는 정적 파일의 새로운 폴더 및 프로젝트를 다시 컴파일하지 않고도 코드를 변경하고 브라우저를 새로 고칠 수있는 기능을 소개합니다. 이 기사는 새로운 프로젝트 설정, 디자인 용 부트 스트랩 사용, 색 구성표 선택 및 글꼴 및 레이아웃 업데이트 등 Visual Studio 2015를 사용하여 웹 사이트를 만드는 자세한 연습을 제공합니다. 이 기사는 완성 된 웹 페이지의 요약으로 마무리되어 Visual Studio 2015 및 Bootstrap이 최소한의 노력으로 전문적인 웹 사이트를 만드는 데 어떻게 사용되었는지 강조합니다. 다음 단계에는 MailChimp 통합 및 새 페이지 추가가 포함됩니다.

Visual Studio 2015 기능 Visual Studio 2015는 우리의 개발에 도움이되는 몇 가지 새로운 기능을 소개합니다. 그 중 하나는 조직입니다. 더 이상 프로젝트 참조에 큰 일련의 DLL 목록이 없습니다. 해당 DLL은 모두 이제 그룹화되었습니다. 그룹을 확장하면 관련 DLL 및 NUGET 패키지와 같은 기타 관련 참조가 표시됩니다. 이것은 참조 섹션을 매우 간결하게 유지하고 다양한 참조 유형에 대해 다른 위치에서 검색하는 것을 방지합니다. 프로젝트에 포함 된 새로운 폴더도 있습니다. WWWROOT라고합니다. 이 폴더에는 정적 파일이 포함되어 동적 파일에서 분리됩니다. "이 두 유형의 차이점은 무엇입니까?" 정적 파일은 이미지, CSS 및 JavaScript이며 Bootstrap 및 JQuery와 같은 프레임 워크입니다. 동적 파일은 주로 CS 및 CSHTML - C ## 코드를 처리 할 수있는 파일입니다. Visual Studio Community 2015는 또한 개발자 작업 흐름에 효율성을 추가했습니다. 예를 들어 컨트롤러에서 코드를 변경하고 프로젝트를 다시 컴파일하지 않고도 브라우저를 새로 고치는 기능입니다. 페이지가 새로 고침되면 브라우저에서 변경 사항이 렌더링됩니다. 이로 인해 앱을 다시 컴파일하고 실행하는 것과 비교할 때 개발자가 몇 초 동안 절약 할 수 있습니다. 패키지 및 프레임 워크 다운로드는 Bower의 도입으로 단순화됩니다. 루트 프로젝트 폴더에는 bower.json이라는 파일이 있습니다. 이 파일에서는 프로젝트에 포함시 원하는 프레임 워크 및 버전을 구성 할 수 있습니다. 아래는 bower.json 파일의 코드 스 니펫입니다

jQuery가 포함되어 있고 사용되는 버전도 볼 수 있습니다. 프레임 워크 관리를위한 매우 쉽고 빠른 컨벤션입니다.

우리는이 기사의 나중에 위의 기능에 대해 자세히 설명합니다. 시작하려면 Andy를 만나자 /> 개발자/디자이너 Andy는 프리랜서 웹 디자이너입니다. 그의 새로운 고객은 그의 기타 레슨 과정을 위해 설계된 웹 사이트를 원합니다. Andy는 고객과 사이트의 모습을 논의했습니다. 기타의 나무에서 영감을 얻은 지상의 톤이있는 간단한 사이트가 될 것입니다. 사이트의 상단 부분에는 텍스트가있는 큰 이미지가 있습니다. 텍스트는 웹 사이트 이름과 태그 라인이 이어집니다.

중간 섹션에는 다른 컨텐츠를 특징으로하는 데 사용되는 3 개의 열이 포함됩니다. 예를 들어, 최신 블로그 게시물, 제품 미리보기 또는 짧은 뉴스의 요약. 사이트의 하단 부분에는 행복한 고객의 인용문이 포함됩니다. 고객은 사이트에서 자신의 코스 구매를 허용하려고합니다. 그는 또한 오른쪽 상단 섹션에서 이메일 가입 양식을 원합니다.

우리는 Andy가 고객 웹 사이트를 구축 할 때 따라갈 것입니다. 다루어야 할 것이 많으므로 시작해 보겠습니다.

부트 스트랩 Visual Studio는 MVC를 사용하여 훌륭한 애플리케이션 구조를 제공하지만 Bootstrap은 설계 프로세스 속도를 높이기에 좋습니다. 또한 완전히 반응합니다.

이 첫 번째 이정표 사이트는 다음과 같습니다

<span>{
</span><span>"name": "WebApplication",
</span><span>"private": true,
</span><span>"dependencies": {
</span>    <span>"bootstrap": "3.0.0",
</span>    <span>"jquery": "1.10.2",
</span>    <span>"jquery-validation": "1.11.1",
</span>    <span>"jquery-validation-unobtrusive": "3.2.2",
</span>    <span>"hammer.js": "2.0.4",
</span>    <span>"bootstrap-touch-carousel": "0.8.0"
</span><span>},</span>

웹 사이트에서 사용할 몇 가지 템플릿을 살펴 보겠습니다. 기본 부트 스트랩 사이트로 이동하여 맨 위에서 시작하는 것을 클릭하십시오. 예제에 도달 할 때까지 과거의 기본 템플릿을 아래로 스크롤하십시오 jumbotron은 웹 사이트의 상단 부분에 대한 우리의 요구 사항을 충족 할 것 같습니다. 는 상단에 넓은 회색 영역이있어 이미지로 교체 할 수 있습니다. 회색 영역 위에도 텍스트도 있습니다. 세 열도 있습니다. 훌륭합니다! <.> 이제 우리는 고객 따옴표를 위해 무언가를 찾아야합니다. 템플릿 예제를 살펴보면, 회전 목마가 우리가 원하는 것을하는 것처럼 보입니다.

썸네일에서 볼 수 있지만 클릭하면 전체 템플릿이 표시됩니다. 이 템플릿의 맨 아래로 스크롤하십시오. 더 큰 텍스트가있는 몇 개의 행이 따옴표에 적합합니다.

색 구성표 색 구성표의 경우 Adobe Kuler에 대한 몇 가지 인기있는 체계를 확인할 것입니다. https://color.adobe.com으로 가서 탐색을 클릭 한 다음 가장 인기가 있습니다. 우리는 좋은 지구 톤 기반 체계를 가진 무언가를 찾고 있습니다. 허니 팟은 법안에 맞는 것처럼 보입니다.

이 체계를 통해 마우스를 움직이면 힌트가 나타납니다. 편집을 클릭하십시오. 이를 통해 색 구성표의 세부 사항을 볼 수 있습니다. 더 밝은 노란색을 클릭하십시오. 이것은 점보트론의 타이틀 글꼴에 사용할 색상입니다.

새로운 프로젝트 시작 Andy는 Visual Studio 2015를 활용할 것입니다. 우리는 따라갈 것입니다. 따라서 Visual Studio 2015를 여기에서 다운로드하십시오. 시작하려면 Visual Studio에서 새 프로젝트를 시작하고 아래와 같이 ASP.NET 웹 응용 프로그램을 선택하십시오. 다음, Asp.net 미리보기 시작 웹 : 를 선택하십시오

프로젝트를 실행하는 경우 다음과 비슷한 웹 페이지가 표시되어야합니다.

위에서 설명한 부트 스트랩 템플릿의 부품을 사용 하여이 기본 사이트의 레이아웃을 수정합니다. 우리가하기 전에, 나는 Visual Studio 2015에서 몇 가지 새로운 기능을 지적하고 싶습니다. 아래는 애플리케이션 폴더 구조의 스크린 샷입니다. WWWROOT 폴더에 주목하십시오. 이 폴더에는 모든 정적 파일이 포함되어 있습니다. 여기에는 CSS, 이미지 및 JS 파일이 포함됩니다 wwwroot 폴더의 추론은 동적 코드를 정적 코드와 더 분리하는 것입니다. C ## (동적) 코드 파일은 여전히 ​​컨트롤러, 모델 및 뷰 폴더에 있습니다. 아래는 WWWROOT 폴더를 확장하여 내부 구조와 그 안에있는 내용을 더 잘 볼 수 있도록 확장했습니다. 변경된 또 다른 것은 DLL 및 기타 참조가 이제 어떻게 그룹화되는지입니다. 대규모 참조 목록이 아니라 확장 될 수있는 그룹이 있습니다. 아래의 통지 아래 DNX 4.5.1 및 DNX Core 5.0은 나열된 유일한 참조입니다.

DNX Core 5.0 참조를 확장하면 Nuget 패키지 및 DLL 목록이 표시됩니다.

이것은 필요할 때까지 알고 싶지 않은 정보로 개발 환경을 막지 않는 좋은 방법입니다.

사이트 개발 <.> ASP.NET 5 스타터 사이트에는 부트 스트랩이 포함되어 있습니다. 더 이상 부트 스트랩을 다운로드 할 필요가 없습니다. 이전 버전의 Visual Studio에서는 부트 스트랩을위한 Nuget 패키지가 필요하거나 Bootstrap 웹 사이트에서 다운로드하여 프로젝트에 추가해야합니다. 클라이언트 측 프레임 워크 관리를 돕기 위해 Visual Studio에는 이제 Bower가 포함되어 있습니다. 프로젝트의 루트를 보면 bower.json이 표시됩니다. 여기에는 특정 버전이있는 부트 스트랩에 대한 참조가 표시됩니다. 새로운 클라이언트 측 프레임 워크를 추가하면 해당 버전을 검색하여 프로젝트에 가져옵니다. 시작하려면 Bootstrap 웹 사이트에서 코드 예제를 다운로드하는 것입니다. GetBootstrap.com으로 이동하여 Bootstrap 다운로드를 클릭하십시오. 소스 코드에서 다운로드 소스를 클릭하십시오. 이 파일을 압축하고 문서> 예제> Jumbotron으로 이동하십시오. jumbotron.css 파일을 wwwroot> CSS 폴더로 드래그하십시오. index.html을 프로젝트의 루트로 드래그 할 수도 있습니다. MVC 사이트이므로 사이트가 시작될 때 표시되지 않습니다. 그러나 우리는 그것을 참조로 사용할 것입니다. 우리는 기본 사이트 레이아웃을 수정하여 시작할 것입니다. 솔루션 탐색기에서 Open Views> shared> _layout.cshtml. 이 파일의 맨 위에 다음 CSS 파일 참조가 표시됩니다.

Bootstrap-touch-carousel.css 라인을 제거하십시오. bootstrap.css 라인 아래에 새 라인을 만듭니다. jumbotron.css 파일을 드래그 하여이 새로운 라인에 놓습니다. 이제 다음과 같아야합니다.

views 폴더 내부의 홈 폴더를 엽니 다 다음 index.cshtml 파일을 엽니 다. 상단 부분을 제외한이 파일의 모든 것을 제거하십시오

<.> 이전에 드래그 한 index.html 부트 스트랩 파일을 엽니 다. Nav, div class = jumbotron 및 div class = 컨테이너 노드를 붕괴시켜 아래에 표시된 것처럼보기 쉽게 볼 수 있도록 쉽게 볼 수 있습니다.

두 div를 복사하여 index.cshtml 파일에 붙여 넣습니다. 이제 앱을 실행하십시오. 다음을 볼 수 있습니다 :

우리는 두 개의 바닥 글이 있음을 알 수 있습니다. index.cshtml의 하단에서 다음 코드를 제거하여 수정할 수 있습니다.

<span>{
</span><span>"name": "WebApplication",
</span><span>"private": true,
</span><span>"dependencies": {
</span>    <span>"bootstrap": "3.0.0",
</span>    <span>"jquery": "1.10.2",
</span>    <span>"jquery-validation": "1.11.1",
</span>    <span>"jquery-validation-unobtrusive": "3.2.2",
</span>    <span>"hammer.js": "2.0.4",
</span>    <span>"bootstrap-touch-carousel": "0.8.0"
</span><span>},</span>

이 같은 파일에서는 세 열에 더 의미있는 헤더를 추가 할 수 있습니다. 라인 바로 아래에 H2 태그에 다음 헤더를 추가하십시오. 앱을 실행하면 다음이 표시됩니다.

jumbotron 업데이트 이제 우리는 이제 이미지로 점보트론을 업데이트 할 수 있습니다. Jumbotron은 웹 페이지 상단에있는 큰 회색 상자입니다.

우리는이 이미지를 Jumbotron의 이미지로 사용합니다. 큰 버전을 다운로드하여 wwwroot> 이미지에 배치하십시오. wwwroot> css> site.css를 엽니 다. 이 파일의 맨 아래에 다음을 입력하십시오.

실제로 이미지를 드래그 할 수 있으며 Visual Studio는 필요한 배경 이미지 코드를 만듭니다. 색상 fffad5는 우리의 Adobe Kuler 색 구성표에서 나온 것입니다. 이제 우리는 이제 Jumbotron 텍스트를 업데이트 할 수 있습니다. index.cshtml로 돌아갑니다. Jumbotron 노드를 열고 다음을 교체하십시오

다음과 함께 <:>

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="~/lib/bootstrap/css/bootstrap.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> href<span>="~/css/site.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> href<span>="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css"</span> /></span></span></span></span></span>

앱을 실행하고 지금까지 무엇을 가지고 있는지 확인합시다. 페이지가 다음과 같아야합니다

보시다시피, 우리는 가까워지고 있습니다. Jumbotron은 가장자리까지 연장되어야합니다. 이것은 우리의 전반적인 디자인에 약간 더 깊이를 제공합니다. 이를 달성하려면 index.cshtml에서 @renderbody ()를 둘러싼 컨테이너 바디 컨텐츠 div를 제거하십시오.

이제 코드가 다음과 같아야합니다 폰트 업데이트 Jumbotron 내부에서는 다른 앞면을 원합니다. 더 비공식적 인 것. 우리는 이것을 위해 댄싱 스크립트라는 글꼴을 사용할 것입니다. Google 웹 글꼴은 글꼴을 얻는 데 도움이 될 것입니다.

왼쪽 상단에 춤을 추는 춤을 입력하여 춤추는 스크립트를 만들어 내야합니다. 컬렉션에 추가를 클릭 한 다음 사용을 클릭하십시오. 정상을 선택 취소하고 굵게 확인하십시오. 스크립트 링크를 하단에서 복사하십시오

이제 우리는 site.css에 새로운 클래스를 추가 할 것입니다. 이를 통해 글꼴을 특정 텍스트로 타겟팅 할 수 있습니다. Site.css에 다음을 추가하십시오

Jumbotron에서 다음과 같이 보이도록 H1 태그에 추가하십시오.

앱을 실행하고 Jumbotron 제목 글꼴을 확인하십시오. 이제 대본에 있어야합니다.

마무리 터치 디자인의 첫 번째 단계에 약간의 연마를 제공하기 위해 배경을 추가하고 현재 왼쪽으로 플러시되는 바닥 글에 약간의 조정을 할 것입니다. 우리는 배경에 이미지를 사용하고 우리의 흙과 일치하는 무언가를 사용합니다. "원활한 종이 텍스처"로 Hereand 유형을 다운로드하십시오. 이 텍스처를 다운로드하여 wwwroot> 이미지에 추가하십시오.

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="~/lib/bootstrap/css/bootstrap.css"</span> /></span>
</span><span><span><span><link> href<span>="~/wwwroot/css/jumbotron.css"</span> rel<span>="stylesheet"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> href<span>="~/css/site.css"</span> /></span></span></span></span></span>

Open site.css. 첫 번째 바디 태그 내에 새 라인을 추가하십시오. 그런 다음 종이 텍스처를 드래그하십시오. 다음과 같아야합니다.

우리가 여기있는 동안이 파일의 맨 아래에 다음을 추가하십시오.

<span>{
</span><span>"name": "WebApplication",
</span><span>"private": true,
</span><span>"dependencies": {
</span>    <span>"bootstrap": "3.0.0",
</span>    <span>"jquery": "1.10.2",
</span>    <span>"jquery-validation": "1.11.1",
</span>    <span>"jquery-validation-unobtrusive": "3.2.2",
</span>    <span>"hammer.js": "2.0.4",
</span>    <span>"bootstrap-touch-carousel": "0.8.0"
</span><span>},</span>

지금 앱을 실행하면 배경이 보이고 바닥 글이 가장자리에서 벗어나야합니다. 고객 따옴표

이제 우리는 인용문 섹션을 포맷 할 수 있습니다. 따옴표에 대한 코드는 동일한 부트 스트랩 예제 폴더에서 찾을 수 있습니다. 회전식 폴더를 열면 index.html 파일 이 주석에서 시작하는 Featurette 코드를 복사하십시오 그리고이 의견으로 끝나는 rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" /> rel="stylesheet" href="~/css/site.css" /> rel="stylesheet" href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css" />

이제이 코드를 index.cshtml 파일에 앞서 추가 한 세 열 바로 아래에 붙여 넣습니다. 당신은 다음과 같아야합니다 :

각 기능 DIV를 열고 다음 각 H2 태그간에 텍스트를 수정하여 사용자 정의 인용문을 추가 할 수 있습니다.

완성 된 웹 페이지는 다음과 비슷해 보일 것입니다

요약 Andy는 이제 고객을위한 완성 된 웹 페이지를 보유하고 있으며 고객이 직면 한 새로운 기타 레슨이 될 것입니다. Andy는 Visual Studio 2015 및 Bootstrap을 사용하여 약간의 노력으로 멋진 웹 사이트를 만들 수있었습니다. 다음에 MailChimp를 통합하여 Andy의 고객에게 고객에게 이메일 업데이트를 보낼 수있는 기능을 제공하는 방법을 살펴 보겠습니다. 이메일 목록 및 연락처 페이지에 가입하는 사람들을위한 감사 페이지와 같은 새 페이지 몇 개를 추가합니다.

위 내용은 Visual Studio Community 2015 : 사이트 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!