• 第八章 设计用户界面 之 给Web程序应用用户界面设计


    1. 概述

      本章内容包括: 使用CSS创建和应用样式、使用HTML构架用户界面的层次 以及 根据需求实现动态页面内容。

    2. 主要内容

      2.1 使用CSS创建和应用样式

        Razor程序的模板是_Layout.cshtml,ASPX程序的模板是Site.Master.

        使用Razor视图引擎时,可将css文件引用到<head>节点中;使用ASPX试图引擎时,可使用styles.Render方法引用。

        internet项目中,_Layout.cshtml文件中的Razor和HTML代码:

    <!DOCTYPE html> 
    <html lang="en"> 
        <head> 
            <meta charset="utf-8" /> 
            <title>@ViewBag.Title - My ASP.NET MVC Application</title> 
            <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
            <meta name="viewport" content="width=device-width" /> 
            @Styles.Render("~/Content/css") 
            @Scripts.Render("~/bundles/modernizr") 
        </head> 
        <body> 
            <header> 
                <div class="content-wrapper"> 
                    <div class="float-left"> 
                        <p class="site-title"> 
                            @Html.ActionLink("your logo here", "Index", "Home") 
                        </p> 
                    </div> 
                    <div class="float-right"> 
                        <section id="login"> 
                            @Html.Partial("_LoginPartial") 
                        </section> 
                        <nav> 
                            <ul id="menu"> 
                                <li>@Html.ActionLink("Home", "Index", "Home")</li> 
                                <li>@Html.ActionLink("About", "About", "Home")</li> 
                                <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
                            </ul> 
                        </nav> 
                    </div> 
                </div> 
            </header>

      2.2 使用HTML构架用户界面的层次

        HTML定义结构,CSS描述样式。

        <html><head><body>是三个必要标记:

        <html>标记文档类型以便浏览器识别,<head>用于保存元数据信息(外部css、javascript等),<body>内是实际需要显示给用户的信息。

        其他常用的HTML标记:

        一些HTML5新加的布局元素:

      2.3 根据需求实现动态页面内容

        ASP.NET MVC4 使用HTML Helpers 来管理动态内容。@Html.ActionLink("About", "About")

        常用的HTML Helpers:

        一些常用的扩展方法:

        可以实现一些验证

    @Html.Label("First name ")<br /> 
    @Html.TextBoxFor(m => m.FirstName, new { @placeholder = "First name"}) 
    <br /> 
    @Html.Label("Last name ")<br /> 
    @Html.TextBoxFor(m => m.LastName, new { @placeholder = "Last name"}) 
    <br />

    3. 总结

      ① HTML提供了许多页面布局方式,CSS可以提供样式控制。

      ② 动态页面内容是使用ASP.NET MVC4的主要原因。可以根据不同的情况显示不同的内容。

      ③ ASP.NET MVC 使用Helpers来输出HTML信息。比如@Html.TextBox。开发人员可以方便的使用一行代码来生成一套完整的HTML节点信息。

  • 相关阅读:
    几何服务,cut功能,输入要素target(修改后)内容。
    几何服务,cut功能,输入要素target(修改前)内容。
    ArcGIS Server,rest路径输入要素json 格式描述
    window对象的screen详解
    window对象的inner/outer/page/screen详解
    js的scroll详解
    js的client详解
    自己封装的操作DOM方法
    js模拟高级语言的重载
    charCode与keyCode的区别
  • 原文地址:https://www.cnblogs.com/stone_lv/p/5036489.html
Copyright © 2020-2023  润新知