久久乐国产精品亚洲综合,性开放的欧美大片,xxx性欧美69

アンディは、サイトがどのように見えるべきかをクライアントと話し合いました。ギターの木に觸発された、地上のトーンを備えたシンプルなサイトになります。サイトの上部には、その上にテキストが付いた大きな畫像があります。テキストはウェブサイト名に続いてキャッチフレーズに続きます。

ホームページ

テクノロジー周辺機(jī)器

IT業(yè)界

Visual Studio Community 2015：サイトのセットアップ

Lisa Kudrow

Feb 20, 2025 am 10:40 AM

Visual Studio Community 2015：サイトのセットアップ

この記事はMicrosoftが後援しました。 SitePointを可能にしてくれたスポンサーをサポートしてくれてありがとう。この一連の記事では、MicrosoftのModern IDE：Visual Studio Community 2015を使用します。また、Bootstrap、MailChimp、Adobe Kulerなど、おそらくおなじみの便利なツールの品揃えを使用します。 Visual Studioは、開発ツールとして最もよく使用されます。それは確かにその役割を果たします。しかし、多くの人が知らないかもしれないのは、それが設(shè)計ツールでもあるということです。 CSS、Angularjs、JQueryなどのフロントエンド言語に対して完全なオートコンプリートサポートがあります。

コードのタイピングの長いセッションの後、振り返って、コードのフォーマットがオフになっているか、少しクリーンアップを使用する可能性があります。 Visual Studioは、バックエンドであろうとフロントエンドコードであろうと、クリーンで読みやすいアライメントでコードを介入してフォーマットできます。 Visual StudioのIDEを使用して、既にダウンロードされ、（スターターWeb）プロジェクトで利用可能なBootstrapを組み合わせて、美しいプロフェッショナルなウェブサイトを設(shè)計するための素晴らしい環(huán)境を設(shè)定します。

キーテイクアウト

Visual Studio Community 2015は、開発および設(shè)計ツールの両方として機(jī)能する最新のIDEであり、フロントエンド言語のオートコンプリートサポートと、クリーンで読み取り可能なアライメントのコードをフォーマットする機(jī)能を備えています。 Visual Studio 2015では、プロジェクト參照のDLLのより良い組織化、wwwrootと呼ばれる靜的ファイルの新しいフォルダー、プロジェクトの再コンパイルを必要とせずにコードを変更してブラウザを更新する機(jī)能などの新機(jī)能を紹介します。

この記事では、Visual Studio 2015を使用してWebサイトを作成する詳細(xì)なウォークスルーを提供します。これには、新しいプロジェクトの設(shè)定、設(shè)計用のBootstrapの選択、配色の選択、フォントとレイアウトの更新などがあります。

この記事は、完成したWebページの要約で締めくくり、Visual Studio 2015とBootstrapが最小限の労力でプロフェッショナルなウェブサイトを作成する方法を強(qiáng)調(diào)しています。次のステップには、MailChimpの統(tǒng)合と新しいページの追加が含まれます。

Visual Studio 2015の機(jī)能

Visual Studio 2015は、開発の補佐官にいくつかの素晴らしい新機(jī)能を紹介しています。それらの1つは組織です。プロジェクトの參照には、DLLの大きなシリアルリストがもうありません。これらのすべてのDLLがグループ化されました。グループを拡張すると、関連するDLLやNugetパッケージなどのその他の関連する?yún)⒄栅鳏椁摔胜辘蓼?。これにより、參照セクションが非常に簡潔になり、さまざまな參照タイプをさまざまな場所で検索できません?p>プロジェクトに含まれる新しいフォルダーもあります。 wwwrootと呼ばれます。このフォルダーには靜的ファイルが含まれており、動的ファイルから分離します。「これらの2つのタイプの違いは何ですか？」靜的ファイルは、畫像、CSS、JavaScript、およびBootstrapやJQueryなどのフレームワークです。動的ファイルは主にCSおよびCSHTMLです - C ##コードを処理できるファイル。

Visual Studio Community 2015は、開発者のワークフローにいくつかの効率を追加しました。 1つは、たとえば、コントローラーでコードを変更し、プロジェクトを再度コンパイルする必要なくブラウザを更新する機(jī)能です。ページが更新されると、ブラウザで変更が表示されます。これにより、開発者はアプリを再コンパイルして再び実行するのに比べて數(shù)秒間節(jié)約できます。

パッケージとフレームワークのダウンロードは、Bowerの導(dǎo)入により簡素化されます。ルートプロジェクトフォルダーには、bower.jsonという名前のファイルがあります。このファイルでは、プロジェクトに含めたいフレームワークとそれらのバージョンを構(gòu)成できます。以下は、bower.jsonファイルからのコードスニペットです：

jQueryが含まれており、使用されているバージョンも含まれています。フレームワークを管理するための非常に簡単で高速なコンベンションです。

<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>

上記の機(jī)能については、記事の少し後で説明します。始めるために、アンディに會いましょう。

開発者/デザイナー

AndyはフリーランスのWebデザイナーです。彼の新しいクライアントは、彼のギターレッスンコース用に設(shè)計されたウェブサイトを望んでいます。

アンディは、サイトがどのように見えるべきかをクライアントと話し合いました。ギターの木に觸発された、地上のトーンを備えたシンプルなサイトになります。サイトの上部には、その上にテキストが付いた大きな畫像があります。テキストはウェブサイト名に続いてキャッチフレーズに続きます。

中央のセクションには、異なるコンテンツを備えた3つの列が含まれます。たとえば、最新のブログ投稿、製品プレビュー、または短いニュースの要約。

サイトの一番下の部分には、幸せな顧客からの引用が含まれます。クライアントは、サイトからのコースの購入を許可したいと考えています。彼はまた、右上のセクションに電子メールサインアップフォームを望んでいます。

アンディはクライアントのウェブサイトを構(gòu)築しているときにフォローします。カバーするものがたくさんあるので、始めましょう。

bootstrap

Visual StudioはMVCを使用して優(yōu)れたアプリケーション構(gòu)造を提供しますが、Bootstrapは設(shè)計プロセスを高速化するのに最適です。また、完全に応答します。

この最初のマイルストーンサイトは次のようになります：

Webサイトで使用するいくつかのテンプレートを見てみましょう。メインのブートストラップサイトに移動し、上部の開始をクリックします。例に到達(dá)するまで、基本テンプレートを通過して下にスクロールします。

ジャンボトロンは、ウェブサイトの上部の要件を満たしているように見えます。

Visual Studio Community 2015：サイトのセットアップ

上部に大きな灰色の領(lǐng)域があり、畫像に置き換えることができます?；疑晤I(lǐng)域の上にテキストもあります。 3つの列もあります。優(yōu)れた！

顧客の引用のために何かを見つける必要があります。テンプレートの例を見ると、カルーセルは私たちが望むことをするように見えます。

サムネイルで見ることができますが、クリックすると完全なテンプレートが表示されます。このテンプレートの下部に向かってスクロールします。見積もりに最適な大きなテキストのいくつかの行があります。

配色

配色では、Adobe Kulerでいくつかの人気のあるスキームをチェックします。 https://color.adobe.comにアクセスして、[Exploreをクリックしてから最も人気があります。私たちは良い地球のトーンベースのスキームを持つものを探しています - ハニーポットは法案に合うように見えます。

このスキームの上にマウスを移動すると、ヒントが表示されます。 [編集]をクリックします。これにより、配色の詳細(xì)を表示できます。明るい黃色をクリックします。これは、ジャンボトロンのタイトルフォントに使用する色です。

新しいプロジェクトの開始

AndyはVisual Studio 2015を利用する予定です。 Visual Studio Community 2015：サイトのセットアップ

開始するには、Visual Studioで新しいプロジェクトを開始し、以下に示すようにASP.NET Webアプリケーションを選択してください。

次に、asp.netプレビューを選択してくださいWeb：

を選択します

プロジェクトを?qū)g行する場合は、次のように見えるWebページを表示する必要があります。

上記のブートストラップテンプレートの部品を使用して、このベースサイトのレイアウトを変更します。

Visual Studio 2015にいくつかの新機(jī)能を指定したいと思います。以下は、アプリケーションフォルダー構(gòu)造のスクリーンショットです。 wwwrootフォルダーに注意してください。このフォルダーには、すべての靜的ファイルが含まれています。これらには、CSS、畫像、およびJSファイルが含まれます

wwwrootフォルダーの背後にある理由は、動的コードを靜的コードからさらに分離することです。 C ##（動的）コードファイルは、予想されるように、コントローラー、モデル、ビューフォルダーにまだあります。

以下では、wwwrootフォルダーを拡張して、その內(nèi)部構(gòu)造とその內(nèi)部をよりよく見ることができます。 Visual Studio Community 2015：サイトのセットアップ

変更されたもう1つのことは、DLLやその他の參照がどのようにグループ化されるかです。參照の大規(guī)模なリストではなく、拡張できるグループがあります。

DNX 4.5.1およびDNX Core 5.0の下にあるの唯一の參照がリストされている唯一の參照です。

DNX Core 5.0リファレンスを拡張した場合、NugetパッケージとDLLのリストが表示されます。 Visual Studio Community 2015：サイトのセットアップ

これは、必要なまで知りたくない情報で開発環(huán)境を詰まらないようにするための素晴らしい方法です。

サイト開発

ASP.NET 5スターターサイトにはブートストラップが含まれています。ブートストラップをもうダウンロードする必要はありません。 Visual Studioの以前のバージョンでは、Bootstrap用のNugetパッケージが必要であるか、Bootstrap Webサイトからダウンロードしてプロジェクトに追加する必要があります。クライアントサイドフレームワークの管理を支援するために、Visual StudioにはBowerが含まれるようになりました。プロジェクトのルートを見ると、bower.jsonが表示されます。ここでは、特定のバージョンを使用してBootstrapへの參照が表示されます。新しいクライアント側(cè)のフレームワークを追加すると、そのバージョンを取得してプロジェクトに持ち込みます。

開始するには、Bootstrap Webサイトからコード例をダウンロードすることです。 getBootStrap.comに移動し、[Bootstrapのダウンロード]をクリックします。ソースコードの下で、[ソースのダウンロード]をクリックします。このファイルを解凍して、ドキュメント>例に移動> Jumbotronに移動します。 jumbotron.cssファイルをwwwroot> cssフォルダーにドラッグします。 index.htmlをプロジェクトのルートにドラッグすることもできます。これはMVCサイトであるため、サイトが起動するときに表示されません。ただし、リファレンスとして使用します。

メインサイトレイアウトを変更することから始めます。ソリューションエクスプローラーでは、オープンビュー> shared> _layout.cshtml。このファイルの上部に次のCSSファイル?yún)⒄栅硎兢丹欷蓼埂?

bootstrap-touch-carousel.cssラインを削除します。 bootstrap.css行の下に新しい行を作成します。 Jumbotron.cssファイルをドラッグし、この新しい行に配置します。これで、次のようになります

ビューフォルダー內(nèi)のホームフォルダーを開き、index.cshtmlファイルを開きます。このファイルのすべてを削除してください

以前にドラッグしたindex.html bootstrapファイルを開きます。以下に示すように、nav、div class = jumbotronおよびdiv class = container nodesを崩壊させます。

2つのdivをコピーして、それらをindex.cshtmlファイルに貼り付けます。ここでアプリを?qū)g行します。次のことを確認(rèn)する必要があります。

<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>

2つのフッターがあることに気付くでしょう。これは、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>

この同じファイルでは、3つの列にもっと意味のあるヘッダーを追加できます。 3つの行のすぐ下のH2タグに次のヘッダーを追加します：

アプリを?qū)g行する場合は、次のことを確認(rèn)する必要があります。

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

Jumbotronの更新

Jumbotronを畫像で更新できるようになりました。ジャンボトロンは、ウェブページの上部にある大きな灰色の箱です。

この畫像をJumbotronの畫像として使用します。大型バージョンをダウンロードして、wwwroot>畫像に配置します。 wwwroot> css> site.cssを開きます。このファイルの下部に次のように入力してください。

実際に畫像でドラッグでき、ビジュアルスタジオは必要な背景イメージコードを作成します。

色fffad5はAdobe Kulerの配色からのものです。

Jumbotronテキストを更新できるようになりました。 index.cshtmlに戻ります。 Jumbotronノードを開き、置き換えます：

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

以下の場合：

アプリを?qū)g行して、これまでに持っているものを見てみましょう。あなたのページは次のように見えるはずです：

<span>@{
</span>    ViewBag.Title = <span>"Home Page";
</span><span>}</span>

ご覧のとおり、私たちは近づいています。ジャンボトロンはエッジまでずっと延長する必要があります。これにより、全體的なデザインがもう少し深さになります。これを達(dá)成するために、index.cshtmlで、@renderbodyを囲むコンテナボディコンテンツdivを削除します。

<span><span><span><hr</span>></span>
</span><span><span><span><footer</span>></span>
</span>    <span><span><span><p</span>></span>&copy; Company 2014<span><span></p</span>></span>
</span><span><span><span></footer</span>></span></span>

今、あなたのコードは次のように見えるはずです：

フォントの更新

ジャンボトロンの內(nèi)部では、別の前線が欲しいです。もっと非公式なもの。これには、ダンススクリプトと呼ばれるフォントを使用します。 Google Webフォントは、フォントを取得するのに役立ちます。 Visual Studio Community 2015：サイトのセットアップ

ここでナビゲートし、左上でダンスを入力します。これにより、ダンススクリプトが表示されます。 [コレクションに追加]をクリックして、[使用]をクリックします。通常のチェックを外し、太字を確認(rèn)します。下部にあるスクリプトリンクをコピーします。

_layout.cshtmlで、タイトルタグの下にスクリプトリンクを貼り付けます。次のように見えるはずです： Visual Studio Community 2015：サイトのセットアップ

ここで、新しいクラスをsite.cssに追加します。これにより、フォントを特定のテキストにターゲットにすることができます。 site.cssに次のものを追加します：

ジャンボトロンでは、H1タグに追加して、次のようになります。

アプリを?qū)g行して、Jumbotronタイトルフォントをチェックしてください。これでスクリプトに含まれるはずです。

仕上げの仕上げ

Latest Blog Post
New York, New York Workshop
Beginner 1 Lessons

デザインのこの第1フェーズに少し磨くために、背景を追加し、フッターに少し調(diào)整します。

背景に畫像を使用し、それが私たちの素樸なトーンに合うものを使用します。「シームレスペーパーテクスチャ」でhereand typeをダウンロードしてください。このテクスチャをダウンロードして、wwwroot>畫像に追加します。

open site.css。最初のボディタグ內(nèi)に新しい線を追加します。次に、紙のテクスチャをドラッグします。次のように見えるはずです：

<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>

ここにいる間に、このファイルの下部に次のことを追加します：

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

今すぐアプリを?qū)g行すると、背景が表示され、フッターが端から外れている必要があります。

顧客の引用

引用符をフォーマットできるようになりました。引用符のコードは、同じブートストラップ例フォルダーにあります。 Carouselフォルダーを開き、index.htmlファイルを開きます。

このコメントで始まるfeaturetteコードをコピー

このコメントで終了して

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

このコードをindex.cshtmlファイルに貼り付け、以前に追加した3列のすぐ下に貼り付けます。あなたは次のように見えるはずです：

<span>@{
</span>    ViewBag.Title = <span>"Home Page";
</span><span>}</span>

各featurette divを開き、次の各H2タグ間でテキストを変更することで、いくつかのカスタム引用を追加できます。

完成したWebページは、次のように見えるはずです： Visual Studio Community 2015：サイトのセットアップ

要約

<span><span><span><hr</span>></span>
</span><span><span><span><footer</span>></span>
</span>    <span><span><span><p</span>></span>&copy; Company 2014<span><span></p</span>></span>
</span><span><span><span></footer</span>></span></span>

Andyには、クライアント向けのWebページが完成しました。

Visual Studio 2015とBootstrapを使用することで、Andyはほとんど努力して見栄えの良いウェブサイトを作成することができました。 Visual Studio Community 2015：サイトのセットアップ