2018-06-22
2018-06-22 本文已影响0人
李竺芹
开发阶段智能大棚管理系统网站总结
一、开发工程师的具体职责
智能大棚管理系统网站的系统设计和制作
二、该网站的开发使用了哪些技术，分别有什么用
1、HTML的基本语法
作用：
- HTML(Hyper Text Mark-up Language 超文本标记语言）的缩写，标记：就是用来描述网页内容的一些特定符号。
- HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、什么大小来显示，这些都是利用HTML标记来实现的。
- HTML文档的创建方式：用HTML语言创建的文档手工直接编写（例如记事本）
通过图形化的HTML开发软件自动生成代码，如VS2012, Dreamweaver
由Web服务器上的动态网页程序生成
2、CSS层叠样式表
作用：
- CSS可以改变HTML的基本特性， CSS不仅允许你指定单个网页的外观，还可以被用来为网站提供一致的界面。
- CSS样式也可以以<style>标签的形式写在网页文件的<head>标签中，或是直接将CSS语句书写在某个元素标签的属性部分。
3、ASP.NET技术
作用：
- ASP.Net是一种动态网页技术，在服务器端运行.Net代码，动态生成HTML。
- 很多工作无法在浏览器端完成，比如存储数据、访问数据库、复杂的业务逻辑运算、安全性要求高的逻辑运算等。
- 服务端控件和HTML控件的生成关系：�在aspx页面中可以使用服务端控件，简化开发。但浏览器只认html，因此在包含服务端控件的页面被请求时,页面中的服务器端控件会组装成对应的HTML控件代码字符串，如：TextBox→<input type=“text”/>。
- 服务器控件不是新的控件，在浏览器端仍然是生成html标签。服务端控件虽然好用，但是也有缺点，并不是什么地方用服务器端控件都好
三、网站的开发过程
1、在GitHub上寻找满意的项目，基于自己的需求修改（找到一个开源的项目）
【项目地址】： https://github.com/nauvalazhar/my-login
开源登录界面.png
2、根据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
经过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动态网页技术，在服务器端运行.Net代码，动态生成HTML。
流程.png
