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节点信息。

第八章 设计用户界面 之 给Web程序应用用户界面设计的更多相关文章

  1. Web UI 网站用户界面设计命名规范

    Web UI 网站用户界面设计命名规范 WEB UI设计命名规范,也就是网站用户界面设计(网页设计)命名规范. 这套规范并非单纯的CSS.html或JavaScript命名规范,它涉及了很多使用Pho ...

  2. Web程序工作原理

    1.Web程序工作原理 (1)Web一词的含义 Network:[计算机]电脑网络,网 Web:[计算机]万维网(World Wide Web),互联网(Internet) Web程序,顾名思义,即工 ...

  3. Swing程序最佳架构设计—以业务对象为中心的MVC模式(转)

    前言: 我打算写一系列关于Swing程序开发的文章.这是由于最近我在做一个Swing产品的开发.长期做JavaEE程序,让我有些麻木了.Swing是设计模式的典范,是一件优雅的艺术品,是一件超越时代的 ...

  4. .NET WEB程序员需要掌握的技能

    本来这个是我给我们公司入职的新人做一个参考,由于 @张善友 老师在他的微信号转了我的这篇文章<<.Net WEB 程序员需要掌握的技能>>,很多人觉得比较有用,说是看了后知道一 ...

  5. 大型web系统数据缓存设计

    1. 前言 在高访问量的web系统中,缓存几乎是离不开的:但是一个适当.高效的缓存方案设计却并不容易:所以接下来将讨论一下应用系统缓存的设计方面应该注意哪些东西,包括缓存的选型.常见缓存系统的特点和数 ...

  6. 22套新鲜出炉的 Web & Mobile PSD 用户界面素材

    在这篇文章中,我们展示的是自由和清新的 UI 设计素材套件.这些线框图和 UI 设计工具包让设计师在设计用户界面原型的时候能够非常便利. Web 用户界面,移动用户界面和线框套件对设计师很有用,因为这 ...

  7. SSM框架Web程序的流程（Spring SpringMVC Mybatis）

    SSM框架的Web程序主要用到了三个技术: Spring:用到了注解和自动装配,就是Spring的两个精髓IOC(反向控制)和 AOP(面向切面编程). SpringMVC:用到了MVC模型,将逻辑代 ...

  8. Web程序员最常用的11款PHP框架

    PHP框架是Web程序员和开发人员最为有用的工具. PHP框架可以帮助用户更快地开发项目. 今天我将为开发人员带来几款最好的PHP框架,希望能对你有用. 1.Agavi Agavi是一款强大的,可扩展 ...

  9. 基于Spring设计并实现RESTful Web Services(转)

    基于Spring设计并实现RESTful Web Services 在本教程中,你将会使用Spring来创建一个具有生产力的RESTful网络服务. 为什么用RESTful网络服务? 从和Amazon ...

随机推荐

  1. 「CQOI2007」「BZOJ1260」涂色paint （区间dp

    1260: [CQOI2007]涂色paint Time Limit: 30 Sec  Memory Limit: 64 MBSubmit: 2057  Solved: 1267[Submit][St ...

  2. HUD1686(KMP入门题)

    Oulipo Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  3. js格式

    /** * Created by admin on 2017/9/22. */ // 分号后不要再有多余的空格 var name = "North"; var name = &qu ...

  4. TypeScript完全解读(26课时)_4.TypeScript完全解读-接口

    4.TypeScript完全解读-接口 初始化tslint tslint --init:初始化完成后会生成tslint.json的文件 如果我们涉及到一些规则都会在这个rules里面进行配置 安装ts ...

  5. SqlServer2012——快照

    1.数据库快照 优点: 维护历史数据以生成报表.由于数据库快照可提供数据库的静态视图,因而可以通过快照访问特定时间点的数据. 将查询实施在数据库的快照上,可以释放主体数据库上的资源. 数据库快照的限制 ...

  6. js对象 数组Array详解 （参照MDN官网：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find）

    一:数组的创建方式: 1.采用直接量创建 var arr = [];//创建一个空数组 var arr2 = [1,2,3];//创建一个有三个元素的数组 2.采用构造函数创建 a.var arr1 ...

  7. perl 处理特殊字符

    如果大家想使用perl 来处理一些特殊字符,例如"del"这种字符,就需要使用到chr() 函数了 例如大家如果向一个文本中写入以下内容 aaaa0x1270x1bccccc 这时 ...

  8. 五粮液【线段树】By cellur925

    题目传送门 考场上感觉的确是线段树,还要维护区间最值...最值怎么维护?还要区间修改?\(update\)的时候加一下就好了吧...之后怎么搞啊?\(qwqwq\)之后好像不太会了...果断删除几乎快 ...

  9. LVS-DR VIP和RIP不同网段的配置方法

    http://blog.itpub.net/25723371/viewspace-1446935/

  10. 使用MethodSwizzle导致按home app进入后台或者app间切换发生crash的解决方法

    参考文章: 1.http://blog.csdn.net/alincexiaohao/article/details/45913857 2.http://www.cocoachina.com/ios/ ...