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. hdu-5665 Lucky(水题)

    题目链接: Lucky Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 65536/65536 K (Java/Others) Pro ...

  2. 使用cygwin注意事项二

    使用cygwin时,一定要区分当前运行的是cygwin下的进程还是windows下的进程,如:使用vim, 假如cygwin下没安装vim, windows下安装了,那么你运行的就是windows下的 ...

  3. css 内容超出宽度自动换行

    1. word-break:break-all;只对英文起作用,以字母作为换行依据2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 PS:要设定宽度!

  4. C++模板之typename和class关键字的区别

    我们都知道,在STL中基本上都使用了模板类的声明,即template.在模板类的声明中,我们有两种方式: template <class T> template <typename ...

  5. C/C++的const区别

    1.const基础知识(用法.含义.好处) int main() { const int a; //a为const,常数型数 int const b; //b为const,常数型数 const int ...

  6. 回味经典——uboot1.1.6 之 第一阶段

    转自:http://blog.csdn.net/lizuobin2/article/details/52054293 最近打算移植一个比较新的 uboot 到开发板,回想起来上一次移植 uboot1. ...

  7. [小记]Windows下配置环境变量和需不需要重启问题

    经常看到一些软件的安装说明上写着,修改Windows的环境变量,然后重新启动计算机.这让人不禁产生疑问,修改环境变量之后真的要重启吗? 其实只要理解了环境变量的原理就可以做出正确的判断.环境变量是一些 ...

  8. PHP文件操作功能函数大全

    PHP文件操作功能函数大全 <?php /* 转换字节大小 */ function transByte($size){ $arr=array("B","KB&quo ...

  9. HDU 2586 How far away ？ (LCA，Tarjan， spfa)

    题意:给定N个节点一棵树,现在要求询问任意两点之间的简单路径的距离,其实也就是最短路径距离. 析:用LCA问题的Tarjan算法,利用并查集的优越性,产生把所有的点都储存下来,然后把所有的询问也储存下 ...

  10. ASP.NET Core编程实现基本身份认证

    概览 在HTTP中,基本认证(Basic access authentication,简称BA认证)是一种用来允许网页浏览器或其他客户端程序在请求资源时提供用户名和口令形式的身份凭证的一种登录验证方式 ...