第八章 设计用户界面 之 给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节点信息。
优质内容筛选与推荐>>1、34-44节网络项目及规划
2、Head First Python学习笔记4——处理数据
3、Android开发技术周报 Issue#83
4、第十九章
5、华为机试题