如何使用Visual Studio創(chuàng)建自己的課程網(wǎng)站

步驟1：創(chuàng)建項(xiàng)目

單擊文件，新建網(wǎng)站。然后選擇“ ASP.NET Web窗體站點(diǎn)”

現(xiàn)在，您已經(jīng)創(chuàng)建了項(xiàng)目。您會(huì)看到很多代碼。左下方有一個(gè)名為“設(shè)計(jì)”的按鈕。如果單擊它，則可以編輯一個(gè)網(wǎng)頁！下一步，您將學(xué)習(xí)如何進(jìn)行實(shí)際編輯。

步驟2：請(qǐng)參閱具有的Wich工具！

現(xiàn)在，如果單擊文本，則可以對(duì)其進(jìn)行編輯。您也可以通過單擊左側(cè)的工具箱來添加按鈕和文本。當(dāng)您單擊它時(shí)，將彈出一個(gè)屏幕。您還可以通過簡(jiǎn)單的拖放系統(tǒng)拖動(dòng)所有其他選項(xiàng)。例如，將項(xiàng)目符號(hào)列表拖到所需的位置。完成此操作后，您可以通過查看屬性標(biāo)簽（位于默認(rèn)情況下位于右下角）來對(duì)其進(jìn)行編輯。當(dāng)您向下滾動(dòng)到其他時(shí)。有一個(gè)叫做項(xiàng)的屬性。將鼠標(biāo)懸停在它上面時(shí)，您會(huì)看到一個(gè)帶有一些點(diǎn)的小按鈕。點(diǎn)擊它。將會(huì)彈出一個(gè)屏幕。在成員選項(xiàng)卡下，單擊添加按鈕。現(xiàn)在，您要添加列表項(xiàng)。您會(huì)看到一些啟用和選定的選項(xiàng)。只需根據(jù)需要對(duì)其進(jìn)行編輯。并添加任意數(shù)量的項(xiàng)。再次查看工具箱時(shí)，您還會(huì)看到您也可以選擇html按鈕或ajax擴(kuò)展名。

步驟3：創(chuàng)建有關(guān)您的網(wǎng)站！

現(xiàn)在，我們將創(chuàng)建一個(gè)有關(guān)您的網(wǎng)站。您可以使用工具箱，然后使用html表單或通過代碼來完成此操作。我現(xiàn)在將在代碼中執(zhí)行此操作，因?yàn)檫@要高級(jí)一些?，F(xiàn)在轉(zhuǎn)到您的解決方案資源管理器。然后右鍵單擊您的項(xiàng)目名稱。選擇添加選項(xiàng)，然后單擊添加新項(xiàng)。之后，選擇HtmlPage。注意：html頁面沒有“設(shè)計(jì)”按鈕，但是您仍然可以使用它的工具箱。

因此，我們首先添加樣式標(biāo)簽

在這些標(biāo)簽內(nèi)，您可以添加CSS代碼。您無需添加任何內(nèi)容。在標(biāo)題標(biāo)簽內(nèi)，您可以添加自己的標(biāo)題，例如

我自己的網(wǎng)站！

在body標(biāo)簽內(nèi)，您可以在其中添加按鈕，文本等?？梢蕴砑佑嘘P(guān)您自己的圖像。您可以通過添加img標(biāo)簽或使用工具箱來實(shí)現(xiàn)。定義夾層圖像，您將使用add src =“ ［您的鏈接在這里。］”。您還必須添加高度和寬度。您的標(biāo)簽應(yīng)該看起來像這樣

讓我們通過添加標(biāo)簽來添加一些文字

P 代表段落。只需在 P 標(biāo)簽內(nèi)添加一些內(nèi)容，頁面上就會(huì)顯示文本。完成此操作后，添加此代碼

此代碼將添加一個(gè)文本字段，該文本字段包含占位符電子郵件和一個(gè)按鈕，供看臺(tái)使用您自己的語言提交。

正確完成所有操作后，單擊綠色的播放按鈕應(yīng)該會(huì)顯示該網(wǎng)頁。 （查看最后一張圖片）。

您所看到的只是需要一些樣式。

好的，這就是html?，F(xiàn)在僅添加css：）

步驟4：添加樣式

css代表級(jí)聯(lián)樣式表。并且用于使您的網(wǎng)頁更具風(fēng)格。

有關(guān)CSS語法的一些信息。我將向您展示一個(gè)小的css代碼容器：

input { background-color： red;

padding： 12px;

font-size： 18px;

}

input意味著我們正在將這種樣式添加到帶有標(biāo)簽輸入的每個(gè)元素中。然后在大括號(hào)內(nèi)定義一些背景和邊框等內(nèi)容，也可以定義使用的字體。

所以現(xiàn)在我們將css添加到頁面中。為此，我們?cè)诓襟E3的開始創(chuàng)建的樣式標(biāo)簽中添加以下代碼。

body { text-align： center;

background： url（“http://bit.ly/19naIXk”）;

color:white;

font-family： Helvetica;

background-size： cover;

background-position： center center;

background-repeat： no-repeat;

background-attachment： fixed;

}

p {

font-size： 24px;

}

input {

border： 0;

padding： 12px;

font-size： 18px;

}

input［type=“submit”］ {

background： limegreen;

color： black;

}

在后臺(tái)使用自己的網(wǎng)址替換網(wǎng)址。

這是您的代碼的樣子：

Hi， My name is 。.. and i like 。.. and 。..

做得好！完成！

看看您的網(wǎng)站看起來多么美麗。您必須找到一個(gè)綠色的播放按鈕，然后單擊它旁邊的箭頭。然后選擇“頁面檢查器”以在Visual Studio中查看它，否則選擇您想要的瀏覽器。之后，只需按一下綠色的播放按鈕即可！

步驟5：自行創(chuàng)建

現(xiàn)在

請(qǐng)查看您在html代碼和css代碼中看到的所有鏈接（僅在主體容器內(nèi)）。您可以輕松查看它們的用途。更改您自己的圖片網(wǎng)址的網(wǎng)址。就是關(guān)于網(wǎng)址的。

您還可以在容器內(nèi)添加項(xiàng)目。例如，您希望文本更大，可以使用以下代碼：

p { font-size： 35px; }

因此，您將

font-size： 35px;

添加到p容器中。您還可以添加其他內(nèi)容，我將向您顯示文本自定義列表：

text-transform： lowercase;

text-decoration： underline;

text-align： right;

color： blue;

text-shadow： 2px 2px #ff0000;

font-family： “Times New Roman”， Times， serif;

font-style： italic;

font-weight： 900;

通過在P容器中添加一些內(nèi)容來嘗試它們。只是谷歌一些CSS代碼，你會(huì)得到很多行！

步驟6：添加社交媒體按鈕

我們將添加一些社交媒體按鈕，以便他們也可以通過社交媒體與您聯(lián)系。您可以選擇兩種樣式（查看圖片）。我添加了GIF，以便您可以看到它們之間的不同之處。將鼠標(biāo)懸停在上面可以查看其樣式。我最喜歡第一種風(fēng)格，但第二種也很漂亮。

所以讓我們添加它們。對(duì)于這兩個(gè)版本，您都必須添加相同的html代碼

，因此，請(qǐng)?jiān)谳斎霕?biāo)簽下將此代碼添加為‘submit’類型：

替換‘＃

現(xiàn)在，我們必須包含另一個(gè)css文件（社交媒體圖標(biāo)的字體），為此，我們需要在head標(biāo)簽中添加以下行：

在樣式標(biāo)簽中，我們必須添加以下代碼：

#social {

margin： 20px 10px;

text-align： center;

}

.smGlobalBtn { /* global button class */

display： inline-block;

position： relative;

cursor： pointer;

width： 50px;

height： 50px;

border:2px solid #ddd; /* add border to the buttons */

box-shadow： 0 3px 3px #999;

padding： 0px;

text-decoration： none;

text-align： center;

color： #fff;

font-size： 25px;

font-weight： normal;

line-height： 2em;

border-radius： 27px;

-moz-border-radius:27px;

-webkit-border-radius:27px;

} /* facebook button class*/

.facebookBtn{

background： #4060A5;

} .facebookBtn:before{ /* use ：before to add the relevant icons */

font-family： “FontAwesome”;

content： “ 09a”; /* add facebook icon */

} .facebookBtn:hover{

color： #4060A5;

background： #fff;

border-color： #4060A5; /* change the border color on mouse hover */

} /* twitter button class*/

.twitterBtn{

background： #00ABE3;

} .twitterBtn:before{

font-family： “FontAwesome”;

content： “ 099”; /* add twitter icon */

} .twitterBtn:hover{

color： #00ABE3;

background： #fff;

border-color： #00ABE3;

} /* google plus button class*/

.googleplusBtn{

background： #e64522;

} .googleplusBtn:before{

font-family： “FontAwesome”;

content： “ 0d5”; /* add googleplus icon */

} .googleplusBtn:hover{

color： #e64522;

background： #fff;

border-color： #e64522;

} /* linkedin button class*/

.linkedinBtn{

background： #0094BC;

} .linkedinBtn:before{

font-family： “FontAwesome”;

content： “ 0e1”; /* add linkedin icon */

} .linkedinBtn:hover{

color： #0094BC;

background： #fff;

border-color： #0094BC;

} /* pinterest button class*/

.pinterestBtn{

background： #cb2027;

} .pinterestBtn:before{

font-family： “FontAwesome”;

content： “ 0d2”; /* add pinterest icon */

} .pinterestBtn:hover{

color： #cb2027;

background： #fff;

border-color： #cb2027;

} /* tumblr button class*/

.tumblrBtn{

background： #3a5876;

} .tumblrBtn:before{

font-family： “FontAwesome”;

content： “ 173”; /* add tumblr icon */

} .tumblrBtn:hover{

color： #3a5876;

background： #fff;

border-color： #3a5876;

} /* rss button class*/

.rssBtn{

background： #e88845;

} .rssBtn:before{

font-family： “FontAwesome”;

content： “ 09e”; /* add rss icon */

} .rssBtn:hover{

color： #e88845;

background： #fff;

border-color： #e88845;

}

現(xiàn)在測(cè)試您的網(wǎng)站，您應(yīng)該在輸入表單下看到它們。在容器之后看到的’：hover‘意味著將鼠標(biāo)懸停在它上面時(shí)必須使用該代碼容器。

第7步：添加Java腳本（jQuery）

您可以通過使其具有交互性來使您的網(wǎng)站更加美觀。我們將通過添加Jquery來做到這一點(diǎn)。 jQuery不是一種語言，而是一種用Javascript編寫的庫。您可以通過單擊下面的鏈接訪問Jquery的官方網(wǎng)站。

Jquery

您無需下載它，因?yàn)槲覀兛梢允褂么a進(jìn)行鏈接。

讓我們開始向jquery添加一個(gè)cript鏈接。將此添加到我們上一步使用的鏈接標(biāo)簽下。

在這些標(biāo)簽內(nèi)我們將添加我們的JavaScript腳本。我們首先必須更新輸入類型：“提交”。我們必須添加類：“ inputMail”。因此，我們的標(biāo)簽應(yīng)如下所示：

現(xiàn)在，我們將在腳本標(biāo)簽內(nèi)添加javascript。我們首先將以下代碼添加到腳本標(biāo)簽中：

$（document）.ready（function（） {

}）;

這意味著它將在文檔完全加載后執(zhí)行該功能。 $（document）表示它搜索稱為document的東西，然后使用ready函數(shù)檢查文檔是否準(zhǔn)備就緒。在這些括號(hào)內(nèi)，我們放入了所有下一個(gè)Jquery代碼。因此，現(xiàn)在我們?cè)诜嚼ㄌ?hào)內(nèi)添加以下代碼：

$（’.inputMail‘）.click（function（） {

}）;

此代碼搜索名為inputMail的類（點(diǎn)表示它是我們要查找的類）。當(dāng)Jquery找到該對(duì)象時(shí)，它將檢查是否單擊了該對(duì)象。單擊它時(shí)，它將執(zhí)行該功能。因此，在該函數(shù)內(nèi)部，我們可以讓按鈕做一些技巧。因此，對(duì)于這個(gè)技巧，我們將在函數(shù)內(nèi)添加以下代碼：

$（’.inputMail‘）.animate（{height： ’+=100px‘， opacity： ’0.4‘}， “slow”）;

$（’.inputMail‘）.animate（{width： ’+=100px‘， opacity： ’1.0‘}， “slow”）;

$（’.inputMail‘）.animate（{height： ’-=100px‘， opacity： ’0.4‘}， “slow”）;

$（’.inputMail‘）.animate（{width： ’-=100px‘， opacity： ’1.0‘}， “slow”）;

現(xiàn)在，它還將查找類inputMail并運(yùn)行自定義動(dòng)畫。因此，讓我們看看吧！這就是您的腳本標(biāo)記的整體外觀：

就是這樣！太好了！下一步，我們將研究如何獲取html文件。

步驟8：獲取HTML文件

現(xiàn)在，我們將抓取html文件（您的網(wǎng)頁）并將其保存在硬盤上的某個(gè)位置。這并非難事，只需一分鐘。我們首先查看解決方案資源管理器，然后單擊default.aspx或項(xiàng)目名稱中的其他內(nèi)容。然后，您查看屬性選項(xiàng)卡并搜索一個(gè)稱為完整路徑的屬性，將其復(fù)制，最后一個(gè)文件名除外。將該路徑粘貼到文件資源管理器中，并搜索名為HtmlPage.html的文件或其他名稱（如果您為其指定了其他名稱）。復(fù)制文件并將其粘貼到硬盤驅(qū)動(dòng)器上的某個(gè)位置。打開文件，您應(yīng)該獲得完成的頁面。

責(zé)任編輯：wv

body{
text-align:center;
background:url("http://bit.ly/19naIXk");
color:white;
font-family:Helvetica;
background-size:cover;
background-position:centercenter;
background-repeat:no-repeat;
background-attachment:fixed;
}

p{
font-size:24px;
}

input{
border:0;
padding:12px;
font-size:18px;
}

input[type="submit"]{
background:limegreen;
color:black;
}