Web应用培训（二）

李维强-15级 · 发表于 2018-12-31 04:12:35

Web 应用培训（二）
内容描述
在这一讲里面，我们先从前端入手，也就是上一期内提到的HTML + CSS + JavaScript 。当然，在学校图书馆内，我们同样可以看到很多讲网页制作的书，例如用类似Dreamweaver或FrontPage的软件来拖拽类似按钮控件的东西生成网页，这样也可以实现。毕竟这些软件的作用就是把用户拖拽的控件自动转化成代码，但是现在已经是2018年了，前端技术已经飞速的发展，以上提到的软件早已过时近20年了，已经基本上没有人用了，那么拖拽的方法远远不能满足现在我们制作网页的需要，就像10年前桌面应用程序的winform已经逐步被WPF取代一样，所以我们需要做的前端网页，就是完完全全的手写代码来完成，现在所有的培训教程，企业应用都是手写网页，直接把代码撸出来，这也是本文的方向。
下面我们首先制作一个登陆界面为目的，来给大家讲述下写个网页大概是怎么回事。
登陆页面地址如下：http://www.shecheng365.com/BC/BCCommon/Login
同样的，我们可以用浏览器的F12查看源代码，下面我直接给出源代码

[HTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>后台管理</title>
    <link href="~/Content/css/login.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="login_box">
        <div class="login_l_img"><img src="~/Content/image/login-img.png" /></div>
        <div class="login">
            <div class="login_logo"><a href="#"><img src="~/Content/image/login_logo.png" /></a></div>
            <div class="login_name">
                <p>后台管理系统</p>
            </div>
            <form method="post" action="/BC/BCCommon/LoginValidate">
                @Html.AntiForgeryToken()
                <input name="UserName" type="text" value="用户名" onfocus="this.value=''" onblur="if(this.value==''){this.value='用户名'}">
                <span id="password_text" onclick="this.style.display='none';document.getElementById('password').style.display='block';document.getElementById('password').focus().select();">密码</span>
                <input name="PassWord" type="password" id="password" style="display:none;" onblur="if(this.value==''){document.getElementById('password_text').style.display='block';this.style.display='none'};" />
                <input value="登录" style="width:100%;" type="submit">
            </form>
            <div style="font-size:16px;font-weight:900;color:red;">@ViewBag.Msg</div>
        </div>
        <div class="copyright">至专科技有限公司 版权所有©2018-2019 技术支持微信（同电话）：15923051435</div>
    </div>
</body>
</html>

通过上面的源代码，我们需要看下代码的以下几点
1） HTML的格式是类似<XXXX>xxxx</XXXX>这样的标签包裹
2）一个网页总是分为几层以<!DOCTYPE HTML> 开始，然后整个被包裹在 <HTML></HTML>以内，然后内部总体分为<HEAD>标签和<BODY>标签。
3）解释下各个标签的意义，
4）解释下提交form表单到后台并判断的流程
通过以上环节，就大概了解了一个网页是什么样子了。
下面就讲解下如何在VS里面生成一个空的网页工程，用于写网页代码。
1）新建HTML文件
2）拷贝代码，运行
3）把需要的图片CSS等逐一搬运进来，复原之前网站shecheng365的登陆页面效果。
通过以上操作，大概了解下怎么在VS里面写代码，并且也可以看到VS这个IDE的自动代码提示功能。但是以上只是一个大概了解。下面的任务需要自己去补充HTML CSS的相关知识，这里我就不详细讲解了，因为太多的经典教程有讲。
本期任务
1）推荐两本电子书《Head First HTML与CSS、XHTML(中文版)》和《CSS网站布局实录（第二版）》，抓紧时间看，先看head first这本，花一周时间，能看多少看多少，我记得当时我是5天啃完的，每天看16个小时左右。
2）自己复原下刚才我制作登陆页面的操作。

培训任务二.rar (16.12 KB, 下载次数: 9)

		自动登录	找回密码
密码			立即注册