開發(fā)文檔的具體要求
1.開發(fā)工程師的具體職責
在完成產品的基本設計或詳細設計后,為實現(xiàn)產品的功能,需要進行網站界面的設計與制作。
2.該網站的開發(fā)運用的技術和作用
1.HTML
作用:是一種描述性的標記語言,就是用來描述網頁內容的一些特定符號;用于描述網頁中內容的顯示方式,比如文字以什么顏色、什么大小來顯示。
2.CSS
作用:可以改變HTML的基本特性,從而控制傳統(tǒng)網頁上的元素,諸如精確的空白、段落縮進、文本的外觀和鏈接的狀態(tài)等等。這樣,你就可以實現(xiàn)對網頁元素的格式控制。 CSS不僅允許你指定單個網頁的外觀,還可以被用來為網站提供一致的界面。
3.Bootstrap
作用:用于快速開發(fā) Web 應用程序和網站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的前端框架,采用它來設計頁面常見的控件,完成頁面的自適應布局
4.ASP.NET
作用:是一種動態(tài)網頁技術,在服務器端運行.Net代碼,動態(tài)生成HTML。
3.該網站的開發(fā)過程(重點描述用戶登錄相關的功能實現(xiàn))
1.根據(jù)參考項目,修改成如下的登錄頁面
QQ圖片20180622165330.png

QQ圖片20180622165330.png

QQ圖片20180622165337.png
2.為網站網頁編輯HTML文檔基本結構

QQ圖片20180622170413.png
3.采用標識符,為網站網頁登陸界面設置控件,用于收集用戶信息

QQ圖片20180622170817.png

QQ圖片20180622170821.png
4.完成網頁用戶登錄界面功能

QQ圖片20180622170827.png
4.重要功能貼入圖片,貼入代碼片段
1.GIF圖

66.gif
2.重要代碼
<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>