Visual Studio Community 2015 : 이메일 및 연락처 페이지 추가-IT산업-php.cn

Visual Studio Community 2015 : 이메일 및 연락처 페이지 추가 키 테이크 아웃

Visual Studio Community 2015를 사용하면 사용자가 이메일 가입 양식, 연락처 및 사이트에 대한 페이지를 구현할 수 있습니다. 이메일 로그업 양식은 MailChimp의 양식을 사용하여 홈페이지에 배치 할 수 있습니다. 부트 스트랩을 사용하여 UI를 연마하여 양식을 포맷하고 모든 것을 올바르게 정렬 할 수 있습니다. 거대하지, 투명한 백지 및 소프트 국경-방사기와 같은 맞춤형 클래스는 Site.css에서 만들어 양식의 모양을 수정할 수 있습니다. '감사합니다'페이지 및 '연락처'페이지와 같은 추가 페이지를 작성하여 사용자 상호 작용을 개선 할 수 있습니다. 이 페이지는 홈페이지의 색 구성표와 테마와 일치하도록 설계되어 사이트 전체에서 일관된 사용자 경험을 제공합니다.

이 기사는 Microsoft가 후원했습니다. Sitepoint를 가능하게하는 스폰서를 지원해 주셔서 감사합니다. Microsoft의 Modern IDE : Visual Studio Community 2015를 사용하여 고객을위한 매력적이고 기능적인 사이트를 신속하게 설계하고 구축하는 일련의 기사를 환영합니다. 마지막 작품을 놓친 경우 여기에서 확인하십시오.

이제 Andy는 웹 사이트 첫 페이지를 사용할 수있게되었으므로 사이트를 조금 더 구축하기 시작할 수 있습니다. 여기에는 이메일 가입 양식과 연락처 및 페이지를 구현하는 것이 포함됩니다.

우리는 이메일 로그업 양식으로 시작한 다음 추가 페이지를 만듭니다. 이메일 가입 양식은 홈페이지의 전면 및 중심입니다. 빈 공간이있는 점보트론의 오른쪽에 배치됩니다. 이메일 가입 양식의 경우 MailChimp의 양식을 사용합니다. Andy는 고객의 MailChimp 계정을 사용하고 있으며 홈페이지에 기존 목록을 사용할 것입니다. 홈페이지에 가입 한 모든 사람은이 목록에 들어갑니다.

mailchimp 에서 코드 받기 일단 MailChimp에 로그인하면 사람들이 추가 할 목록을 선택하십시오. 가입 양식을 클릭합니다. 임베디드 양식을 클릭합니다. 클래식 스타일은 괜찮습니다. 고객은 이름과 이메일 주소를 캡처하려고합니다. MailChimp는 실제로 이것들을 기본값으로 가지고 있으므로 우리는 물건을 그대로 남겨 둘 수 있습니다.

MailChimp의 화면은 다음과 같아야합니다

HTML을 복사하십시오. 이것이 우리가 점보트론에 붙여 넣을 것입니다. 이 라인 아래의 Jumbotron에서 :

MailChimp 양식 코드를 추가하십시오. 앱을 실행하면 다음과 같아야합니다. 분명히 이것은 우리가 원하는 모습이 아니지만 이것은 좋은 출발점입니다. 여기에서 Bootstrap을 사용하여 양식을 포맷하고 모든 것을 올바르게 정렬합니다. 부트 스트랩으로 가입 양식을 수정합니다

현재 형식으로 반응 형 디자인을 잃었습니다. 가입 양식이 오른쪽으로 이동하는 동안 사이트 제목을 남겨 두어야합니다. 그들은 또한 같은 줄에 있어야합니다. Bootstrap은 순서대로 일을 되 찾는 데 도움이됩니다 우리는 두 개의 열을 추가 할 수 있습니다. Jumbotron을
로 둘러싸고 Mailchimp 코드를 a. 이 형식은 사이트 제목 텍스트가 점보트론의 2/3을 차지하는 반면 가입 형식은 1/3을 차지한다는 것을 의미합니다.
코드는 다음과 같아야합니다
Bootstrap은 12 그리드 시스템을 사용하고 있습니다. 8 4 = 12 그리고이 숫자에서 2/3과 1/3을 얻는 방법을 알 수 있습니다. 사이트를 실행하면 두 개의 열이 있고 반응 형 웹 디자인이 다시 돌아옵니다.

다음으로, 우리는 가입 양식 UI를 연마하기 시작하여 사이트와 더 잘 혼합됩니다. ui 연마
작은 단계를 많이 겪기보다는 완성 된 MailChimp 수정이 어떻게 보일지 더 쉽게 표시하는 것이 더 쉬울 것입니다. 그런 다음 우리는 통과 할 수 있습니다. 현재 MailChimp 코드를 다음으로 바꾸십시오
코드에 몇 줄의 공간을 추가하여 토론 양식을 더 잘 해제하는 데 도움이됩니다. 우리가 만들 수있는 몇 가지 사용자 정의 클래스가 있습니다.이 클래스는 볼드, 투명한 백지 및 소프트 국경-반드시를 포함하여 몇 가지 커스텀 클래스가 있습니다. 우리는이 클래스를 site.css. 에서 정의합니다 대부분의 MailChimp 코드는 MailChimp에서 복사 한 것과 동일하기 때문에 이러한 사용자 정의 클래스에서 무슨 일이 일어나고 있는지 논의 해 봅시다.
. 볼드되지 않은 것은 다음과 같이 정의됩니다
단순히 대담한 글자를 제거합니다. 이것은 Form Field Labels를 강조하지 않는 데 사용됩니다. 우리의 행동 요청은 대담합니다. 양식 필드 레이블이 굵게 표시되면 눈은 어디에 집중 해야하는지 알아 내기 위해 조금 어려움을 겪게됩니다. 더 나쁜 사례 시나리오 : 사람들은 단순히 우리의 가입 양식을 포기하고 우회합니다.
아래의 스크린 샷은 .not-bold 의 사용을 보여줍니다
투명 백은 배경 및 입력 필드에 반 투명성을 제공하여 설계에 약간 더 깊이를 제공합니다. 다음과 같이 정의됩니다
RGBA는 단순히 빨간색, 녹색, 파란색 및 알파를 의미합니다. 알파는 불투명도를 설정합니다. 이 값이 낮을수록 투명합니다. 값은 0에서 1 사이의 범위입니다 Soft Border-Radius는 우리의 형태와 입력 필드가 둥근 모서리로 약간 우아한 디테일을 표현합니다. 이 클래스는 다음과 같이 정의됩니다
마지막으로, 우리는 전체 너비 파란색 버튼이 있습니다. .max-width는 여기서 우리를 도와줍니다. 파란색은 큰 대비를 제공 할뿐만 아니라 눈을 올바르게 가져옵니다. 큰 크기로 인해 클릭 할 수 없습니다. .max-width는 다음과 같이 정의됩니다
&lt;p&gt;&lt;a class=&quot;btn btn-primary btn-lg&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
로그인 후 복사
로그인 후 복사
위의 클래스를 Site.css에 추가하고 위의 양식 코드로 붙여 넣으면 위와 같은 가입 양식이 생겨납니다. 감사합니다 사용자가 가입 할 때 일반적으로 확인 페이지를 제공하여 모든 것이 잘 알려진 것을 알리는 것이 좋습니다. 상상할 수없는 감사 페이지로 인사하기 위해 누군가의 목록에 몇 번이나 가입 했습니까?
Andy는 그의 의뢰인이 진정한 예술가이며 여분의 마일을 원한다는 것을 알고 있습니다. 이것은 일부 주식 감사 페이지를 사용하여 삐걱 거리는 것을 의미합니다. 그러나 홈페이지에서 동일한 색 구성표와 테마를 사용하여 일관성을 유지합니다. 감사 페이지를 만들려면 컨트롤러 열기/homecontroller.cs. 다음을 추가하십시오 :
이것은 MVC 앱이기 때문에 누군가가 /home /thankyou를 입력 할 때 위의 방법에 영향을 미칩니다. 물론, 우리는 고객의 이메일 목록에 가입함으로써 확인으로 작성되기 때문에 감사 페이지를 입력 할 것으로 기대하지 않습니다.
. 우리는이 방법에 대한 견해가 필요합니다. 보기/홈 폴더를 열고 contact.cshtml의 사본을 만드십시오. 복사 된 파일의 이름을 감사합니다 우리의 감사 페이지는 기본적으로 홈페이지의 점보트론이 될 것입니다. Thankyou.cshtml에서 코드를 지우고 뷰 백 코드 만 맨 위에 남겨 둡니다. 다음에 붙여 넣으십시오.
연락처 페이지의 사본을 만들면 기존 페이지 구조를 최대한 활용할 수 있습니다. 우리는 아무것도 할 필요없이 친숙한 탐색과 바닥 글을 가질 것입니다.
당신은 아마도 클래스 점보트론이 눈에 띄는 것을 보았을 것입니다. 이것은 새로운 클래스로, 감사 페이지에 약간의 높이를 더합니다. 그렇지 않으면, 우리는 상당히 짧은 스트립이 상단을 가로 질러 달려 있습니다. 너무 인상적이지 않았을 것입니다.
더 큰 이미지는 멋지게 보이고 아티스트 (예 : 클라이언트)에게 추가 방송 시간을 제공합니다. Jumbotron-Tall은 다음과 같이 정의됩니다
최종 감사 페이지는 다음과 같아야합니다.

연락처 페이지 우리는 잠재 고객에게 그의 사이트를 통해 직접 고객에게 연락 할 수있는 기회를 제공하고자합니다. 연락처 페이지가 오는 곳입니다. 연락처 페이지를 만들려면 위와 같은 기본 개요를 따릅니다. 우리의 마지막 페이지는 다음과 같습니다.

&lt;!-- Begin MailChimp Signup Form --&gt; &lt;link href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; &lt;div id=&quot;mc_embed_signup&quot; class=&quot;transparent-background soft-border-radius&quot;&gt; &lt;form action=&quot;#&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate&gt; &lt;div id=&quot;mc_embed_signup_scroll&quot;&gt; &lt;h3&gt;Enter your name and email for&lt;br /&gt; your first FREE lesson!&lt;/h3&gt; &lt;div class=&quot;mc-field-group&quot;&gt; &lt;label for=&quot;mce-FNAME&quot; class=&quot;not-bold&quot;&gt;First Name &lt;/label&gt; &lt;input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;transparent-background soft-border-radius&quot; id=&quot;mce-FNAME&quot;&gt; &lt;/div&gt; &lt;div class=&quot;mc-field-group&quot;&gt; &lt;label for=&quot;mce-EMAIL&quot; class=&quot;not-bold&quot;&gt;Email &lt;/label&gt; &lt;input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email transparent-background soft-border-radius&quot; id=&quot;mce-EMAIL&quot;&gt; &lt;/div&gt; &lt;div id=&quot;mce-responses&quot; class=&quot;clear&quot;&gt; &lt;div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; &lt;div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&gt; &lt;div style=&quot;position: absolute; left: -5000px;&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&quot; tabindex=&quot;-1&quot; value=&quot;&quot;&gt;&lt;/div&gt; &lt;input type=&quot;submit&quot; class=&quot;btn btn-primary btn-lg&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; /&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;!--End mc_embed_signup--&gt;
로그인 후 복사
로그인 후 복사
/> 열린보기/홈은 이미 Contact.cshtml이 있음을 알 수 있습니다. 감사 페이지와 함께 이전과 마찬가지로 Top Viewbag 코드를 제외한 모든 것을 지우십시오. 우리는 다시 Jumbotron을 사용할 것입니다. 오른쪽이 비어있는 것을 제외하고는 이전과 같이 두 개의 열을 사용합니다. 이것은 우리의 접촉 양식이 왼쪽에 더 정렬 될 수있게합니다.
우리가 소개 할 새로운 CSS 클래스가 몇 개 있습니다. 첫 번째 수업은 다음과 같습니다
&lt;p&gt;&lt;a class=&quot;btn btn-primary btn-lg&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
로그인 후 복사
로그인 후 복사
이것은 특히 양식 하단의 파란색 버튼 용입니다. 이 클래스를 추가하면 더 넓은 버튼이 생성되고 댓글 상자의 버튼 상단과 하단 사이에 약간의 공간이 추가됩니다. 우리는 또한이 수업을 홈페이지 버튼에 적용 할 수 있습니다.
다음은 기존 클래스에 대한 수정입니다
이 양식의 경우 MailChimp 양식 코드와 유사한 구조를 사용합니다. 그러나 우리는 가입 양식을 사용하지 않기 때문에 MailChimp의 CSS를 사용하지 않을 것입니다. MailChimp CSS가 제공 한 한 가지는 입력 필드 주변의 어두운 경계였습니다. 이제 사라졌습니다. 보상하기 위해, 우리는 소프트 국경 래디 우스 내부에 테두리를 추가하고 있습니다. 연락처 양식에서 댓글 텍스트 상자를 추가했습니다. 이 상자에는 스크롤 바가있을 수 있으며 기본적으로 기본적으로 흰색입니다. 이 밝은 색상은 어두운 색상과 큰 대비를 만듭니다. 스크롤 바가 더 잘 조화를 이루기 위해서는 TextRea를 수정해야합니다.
FFFAD5의 색상을 확인하십시오.이 댓글 필드 텍스트를 검은 색에서 밝은 노란색으로 변경하십시오. 입력 필드에 대해서도 똑같이 수행하고 있습니다 :
위의 모든 CSS 클래스는 Site.css 이제 우리는 양식 코드로 넘어갈 수 있습니다.
&lt;!-- Begin MailChimp Signup Form --&gt; &lt;link href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; &lt;div id=&quot;mc_embed_signup&quot; class=&quot;transparent-background soft-border-radius&quot;&gt; &lt;form action=&quot;#&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate&gt; &lt;div id=&quot;mc_embed_signup_scroll&quot;&gt; &lt;h3&gt;Enter your name and email for&lt;br /&gt; your first FREE lesson!&lt;/h3&gt; &lt;div class=&quot;mc-field-group&quot;&gt; &lt;label for=&quot;mce-FNAME&quot; class=&quot;not-bold&quot;&gt;First Name &lt;/label&gt; &lt;input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;transparent-background soft-border-radius&quot; id=&quot;mce-FNAME&quot;&gt; &lt;/div&gt; &lt;div class=&quot;mc-field-group&quot;&gt; &lt;label for=&quot;mce-EMAIL&quot; class=&quot;not-bold&quot;&gt;Email &lt;/label&gt; &lt;input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email transparent-background soft-border-radius&quot; id=&quot;mce-EMAIL&quot;&gt; &lt;/div&gt; &lt;div id=&quot;mce-responses&quot; class=&quot;clear&quot;&gt; &lt;div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; &lt;div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&gt; &lt;div style=&quot;position: absolute; left: -5000px;&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&quot; tabindex=&quot;-1&quot; value=&quot;&quot;&gt;&lt;/div&gt; &lt;input type=&quot;submit&quot; class=&quot;btn btn-primary btn-lg&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; /&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;!--End mc_embed_signup--&gt;
로그인 후 복사
로그인 후 복사
MailChimp 양식과 약간의 유사점을 알 수 있습니다. 이것은 실제로 해당 양식의 수정 된 버전입니다. 접촉 양식은 왼쪽 열에 있으며 COL-MD-8 너비입니다. 오른쪽 열이 col-MD-4이기 때문에 2/3 너비의 열을 만듭니다. 8 4 = 12, 이것은 부트 스트랩에서 12 열 그리드를 구성하는 열의 수입니다.
요약 Andy의 고객은 이제 가입을 유치 할 수있는 멋진 가입 양식을 보유하고 있습니다. 또한 사이트의 전반적인 테마와 잘 어울리는 연락처 양식을 추가했습니다. 이 시점에서 Andy의 고객은 큰 출발을 시작했습니다.
다음에 올라 오면 고객이 수업을 구매할 수있는 방법을 추가하겠습니다. Andy의 고객은 Mobile이 현재 웹의 많은 부분임을 인식하고 있습니다. 그는 모바일 사이트가 훌륭한 사용자 경험을 제공하기를 원합니다. 이 중 일부는 새로운 수업을 사용할 수 있으면 알림을 보내는 것입니다.
Andy는 웹 사이트를위한 몇 가지 흥미로운 기능을 가지고 있습니다. 우리는 모든 것이 함께 오면서 그의 어깨 너머로 계속 지켜보고 있습니다.