開發(fā)階段智能大棚管理系統(tǒng)網(wǎng)站總結
一、開發(fā)工程師的具體職責
智能大棚管理系統(tǒng)網(wǎng)站的系統(tǒng)設計和制作
二耘成、該網(wǎng)站的開發(fā)使用了哪些技術瘪菌，分別有什么用
1、HTML的基本語法
作用：
- HTML(Hyper Text Mark-up Language 超文本標記語言）的縮寫诵肛，標記：就是用來描述網(wǎng)頁內容的一些特定符號默穴。
- HTML不是編程語言，而是一種描述性的標記語言珠洗，用于描述網(wǎng)頁中內容的顯示方式，比如文字以什么顏色蝴猪、什么大小來顯示膊爪，這些都是利用HTML標記來實現(xiàn)的。
- HTML文檔的創(chuàng)建方式：用HTML語言創(chuàng)建的文檔手工直接編寫（例如記事本）
通過圖形化的HTML開發(fā)軟件自動生成代碼沛豌，如VS2012, Dreamweaver
由Web服務器上的動態(tài)網(wǎng)頁程序生成
2加派、CSS層疊樣式表
作用：
- CSS可以改變HTML的基本特性跳芳， CSS不僅允許你指定單個網(wǎng)頁的外觀飞盆，還可以被用來為網(wǎng)站提供一致的界面。
- CSS樣式也可以以<style>標簽的形式寫在網(wǎng)頁文件的<head>標簽中孽水，或是直接將CSS語句書寫在某個元素標簽的屬性部分城看。
3析命、ASP.NET技術
作用：
- ASP.Net是一種動態(tài)網(wǎng)頁技術，在服務器端運行.Net代碼簇搅，動態(tài)生成HTML软吐。
- 很多工作無法在瀏覽器端完成，比如存儲數(shù)據(jù)姿现、訪問數(shù)據(jù)庫备典、復雜的業(yè)務邏輯運算、安全性要求高的邏輯運算等吮蛹。
- 服務端控件和HTML控件的生成關系：?在aspx頁面中可以使用服務端控件潮针，簡化開發(fā)倚喂。但瀏覽器只認html，因此在包含服務端控件的頁面被請求時,頁面中的服務器端控件會組裝成對應的HTML控件代碼字符串焦读，如：TextBox→<input type=“text”/>。
- 服務器控件不是新的控件刚照，在瀏覽器端仍然是生成html標簽无畔。服務端控件雖然好用，但是也有缺點恭理，并不是什么地方用服務器端控件都好
三颜价、網(wǎng)站的開發(fā)過程
1诉濒、在GitHub上尋找滿意的項目，基于自己的需求修改（找到一個開源的項目）
【項目地址】： https://github.com/nauvalazhar/my-login
開源登錄界面.png
2、根據(jù)HTML的基本語法寨腔、CSS層疊樣式表、ASP.NET技術對開源項目進行修改
-
將開源的項目的代碼拷出來倚搬，再打開visual studio 2012軟件中用HTML的基本語法進行修改
image.png
源代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="Content/my-login.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body class="my-login-page">
<section class="h-100">
<div class="container h-100">
<div class="row justify-content-md-center h-100">
<div class="card-wrapper">
<div class="brand">
<img src="Images/logo.png" />
</div>
<div class="card fat">
<div class="card-body">
<h4 class="card-title">登錄</h4>
<form method="POST">
<div class="form-group">
<label for="email">郵件地址</label>
<input id="email" type="email" class="form-control" name="email" value="" required autofocus>
</div>
<div class="form-group">
<label for="password">
密碼
</label>
<input id="password" type="password" class="form-control" name="password" required data-eye>
</div>
<div class="form-group">
<label>
<input type="checkbox" name="remember"> 記住我
<a href="forgot.html" class="float-right">
忘記密碼?
</a>
</label>
</div>
<div class="form-group no-margin">
<!--<button type="submit" class="btn btn-primary btn-block">
登錄
</button>-->
<input type="submit" class="btn btn-primary btn-block" value="登錄" />
</div>
<div class="margin-top20 text-center">
沒有賬戶? <a href="register.html">注冊</a>
</div>
</form>
</div>
</div>
<div class="footer">
Copyright © 2018 — CQCET-IOT
</div>
</div>
</div>
</div>
</section>
</body>
</html>
-
使用Chrome瀏覽器幻捏，在線修改頁面布局
原登錄界面
image.png
經(jīng)過CSS美化
源代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登錄</title>
<link href="Content/my-login.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body class="my-login-page">
<form id="form1" runat="server">
<section class="h-100">
<div class="container h-100">
<div class="row justify-content-md-center h-100">
<div class="card-wrapper">
<div class="brand">
<img src="Images/logo.png" />
</div>
<div class="card fat">
<div class="card-body">
<h4 class="card-title">登錄</h4>
<div class="form-group">
<label for="email">郵件地址</label>
<input id="email" type="email" class="form-control" name="email" value="" required autofocus runat="server"/>
</div>
<div class="form-group">
<label for="password">
密碼
</label>
<input id="password" type="password" class="form-control" name="password" required data-eye runat="server"/>
</div>
<div class="form-group">
<label>
<input type="checkbox" name="remember" />
記住我
<a href="forgot.aspx" class="float-right">忘記密碼?
</a>
</label>
</div>
<div class="form-group no-margin">
<asp:Button ID="bt_Login" runat="server" Text="登錄" CssClass="btn btn-primary btn-block" OnClick="bt_Login_Click"/>
</div>
<div class="margin-top20 text-center">
沒有賬戶? <a href="register.aspx">注冊</a>
</div>
</div>
</div>
<div class="footer">
Copyright © 2018 — CQCET-IOT
</div>
</div>
</div>
</div>
</section>
</form>
</body>
</html>
image.png
-
使用ASP.Net動態(tài)網(wǎng)頁技術榛臼，在服務器端運行.Net代碼，動態(tài)生成HTML航揉。
流程.png
