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. 页面刷新 方法总结 JSP刷新[转]

    1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔10秒刷新一次 2) < ...

  2. ietester

    ietest 最好安装在默认的C 装在其他的地方会报错

  3. Ubuntu16.04 安装cuda9.0 cudnn 7.0.5

    参考网址:https://blog.csdn.net/zhuangwu116/article/details/81063234 (1)下载安装文件: 下载cuda9.0 runfile 文件 下载地址 ...

  4. NOI 2012 魔幻棋盘 | 二维差分 + 二维线段树

    题目:luogu 2086 二维线段树,按套路差分原矩阵,gcd( x1, x2, ……, xn ) = gcd( xi , x2 - x1 , ……, xn - xn-1 ),必须要有一个原数 xi ...

  5. 杂项：SVN 常用方法

    ylbtech-杂项:SVN 1.返回顶部 1. bin obj *.suo*.user *.csproj.user *.o *.lo *.la *.al .libs *.so *.so.[0-9]* ...

  6. CodeForces 1111E. Tree

    题目简述:给定$n \leq 10^5$个节点的无根树,以及$q \leq 10^5$个询问.每个询问给定$k \leq 10^5$个不同的节点$a_1, a_2, \dots, a_k$,以及参数$ ...

  7. HTML中&nbsp;&emsp等空格的区别

    HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器.其他几种空格(       ‌‍)在不同浏览器中宽度各异.     ...

  8. cocos2dx 新手引导

    static CCClippingNode* create(); //使用一个节点作为模版创建裁剪节点 static CCClippingNode* create(CCNode *pStencil); ...

  9. html css鼠标样式，鼠标形状

    css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...

  10. c# 调用 webservices (转载)

    .net 调用webservice 总结 最近做一个项目,由于是在别人框架里开发app,导致了很多限制,其中一个就是不能直接引用webservice . 我们都知道,调用webserivice 最简单 ...