重工电子论坛

标题: Web应用培训（二） [打印本页]
作者: 李维强-15级    时间: 2018-12-31 04:12
标题: Web应用培训（二）
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)




欢迎光临 重工电子论坛 (http://cqutlab.cn/) Powered by Discuz! X3.1