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. MongoDB 项目集成 mongo-driver 3.4.2

    第一次写技术!大白话讲讲.拿着用就可以了 本人是,NET的技术人员,会点JAVA所以很多不专业,见谅哈 刚刚开始使用mongo 整整搞了两天我才搞个半桶水,还是将就着用吧 随便把mongo在win的搭 ...

  2. Java 高阶 —— 相等性比较

    1. 包装类 所有的相同类型的包装类对象之间的值的比较,全部使用 equals 方法: 对于 Integer a = ?,在 -128 到 127 范围内的赋值,Integer 对象是在 Intege ...

  3. 使用weui

    1 在https://github.com/weui/weui-wxss/下载项目,得到weui.wxss文件 2 把文件放在小程序项目的根目录下 3 在app.wxss中引用weui.wxss文件 ...

  4. zookeeper分布式安装

    1.先把zookeeper-3.5.2-alpha.tar上传解压到/usr/local/下重命名为zookeeper ############# zookeeper env ############ ...

  5. wampServer 设置

    设置端口 打开 C:\wamp\bin\apache\apache2.4.9\conf\httpd.conf 文件 找到“Listen 80”和“ServerName localhost:80”,紧接 ...

  6. 怎样通过计算机ip地址访问sql server 2008数据库

      在设置外网访问SQL2008数据库之前,首先必须保证局域网内访问SQL2008没有问题 .那么,我们先来看看局域网内访问SQL2008数据库需要哪些步骤和设置,才能做到在局域网内任何一台机器上输入 ...

  7. 搭建Linux的VMware Workstation Pro

    搭建准备环境: 1.win10操作系统: 2.VMware Workstation Pro12: 下载地址   http://www.vmware.com/products/workstation/w ...

  8. 5、overflow、hover

    一.overflow 1.属性介绍 说明: 这个属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制.因此,有可能即使元素框中可以放下所有内容也会 ...

  9. C#读写Access数据库、表格datagridview窗体显示代码实例

    C#读写Access数据库.表格datagridview窗体显示代码实例 最近项目中用到C#对于Access数据库表读写.mdb操作,学习了下相关的东西,这里先整理C#对于Access数据库的操作,对 ...

  10. Laravel中的模板引擎Blade

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...