第八章 设计用户界面 之 给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节点信息。
第八章 设计用户界面 之 给Web程序应用用户界面设计的更多相关文章
- Web UI 网站用户界面设计命名规范
Web UI 网站用户界面设计命名规范 WEB UI设计命名规范,也就是网站用户界面设计(网页设计)命名规范. 这套规范并非单纯的CSS.html或JavaScript命名规范,它涉及了很多使用Pho ...
- Web程序工作原理
1.Web程序工作原理 (1)Web一词的含义 Network:[计算机]电脑网络,网 Web:[计算机]万维网(World Wide Web),互联网(Internet) Web程序,顾名思义,即工 ...
- Swing程序最佳架构设计—以业务对象为中心的MVC模式(转)
前言: 我打算写一系列关于Swing程序开发的文章.这是由于最近我在做一个Swing产品的开发.长期做JavaEE程序,让我有些麻木了.Swing是设计模式的典范,是一件优雅的艺术品,是一件超越时代的 ...
- .NET WEB程序员需要掌握的技能
本来这个是我给我们公司入职的新人做一个参考,由于 @张善友 老师在他的微信号转了我的这篇文章<<.Net WEB 程序员需要掌握的技能>>,很多人觉得比较有用,说是看了后知道一 ...
- 大型web系统数据缓存设计
1. 前言 在高访问量的web系统中,缓存几乎是离不开的:但是一个适当.高效的缓存方案设计却并不容易:所以接下来将讨论一下应用系统缓存的设计方面应该注意哪些东西,包括缓存的选型.常见缓存系统的特点和数 ...
- 22套新鲜出炉的 Web & Mobile PSD 用户界面素材
在这篇文章中,我们展示的是自由和清新的 UI 设计素材套件.这些线框图和 UI 设计工具包让设计师在设计用户界面原型的时候能够非常便利. Web 用户界面,移动用户界面和线框套件对设计师很有用,因为这 ...
- SSM框架Web程序的流程(Spring SpringMVC Mybatis)
SSM框架的Web程序主要用到了三个技术: Spring:用到了注解和自动装配,就是Spring的两个精髓IOC(反向控制)和 AOP(面向切面编程). SpringMVC:用到了MVC模型,将逻辑代 ...
- Web程序员最常用的11款PHP框架
PHP框架是Web程序员和开发人员最为有用的工具. PHP框架可以帮助用户更快地开发项目. 今天我将为开发人员带来几款最好的PHP框架,希望能对你有用. 1.Agavi Agavi是一款强大的,可扩展 ...
- 基于Spring设计并实现RESTful Web Services(转)
基于Spring设计并实现RESTful Web Services 在本教程中,你将会使用Spring来创建一个具有生产力的RESTful网络服务. 为什么用RESTful网络服务? 从和Amazon ...
随机推荐
- 页面刷新 方法总结 JSP刷新[转]
1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔10秒刷新一次 2) < ...
- ietester
ietest 最好安装在默认的C 装在其他的地方会报错
- Ubuntu16.04 安装cuda9.0 cudnn 7.0.5
参考网址:https://blog.csdn.net/zhuangwu116/article/details/81063234 (1)下载安装文件: 下载cuda9.0 runfile 文件 下载地址 ...
- NOI 2012 魔幻棋盘 | 二维差分 + 二维线段树
题目:luogu 2086 二维线段树,按套路差分原矩阵,gcd( x1, x2, ……, xn ) = gcd( xi , x2 - x1 , ……, xn - xn-1 ),必须要有一个原数 xi ...
- 杂项:SVN 常用方法
ylbtech-杂项:SVN 1.返回顶部 1. bin obj *.suo*.user *.csproj.user *.o *.lo *.la *.al .libs *.so *.so.[0-9]* ...
- CodeForces 1111E. Tree
题目简述:给定$n \leq 10^5$个节点的无根树,以及$q \leq 10^5$个询问.每个询问给定$k \leq 10^5$个不同的节点$a_1, a_2, \dots, a_k$,以及参数$ ...
- HTML中 &emsp等空格的区别
HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器.其他几种空格( )在不同浏览器中宽度各异. ...
- cocos2dx 新手引导
static CCClippingNode* create(); //使用一个节点作为模版创建裁剪节点 static CCClippingNode* create(CCNode *pStencil); ...
- html css鼠标样式,鼠标形状
css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...
- c# 调用 webservices (转载)
.net 调用webservice 总结 最近做一个项目,由于是在别人框架里开发app,导致了很多限制,其中一个就是不能直接引用webservice . 我们都知道,调用webserivice 最简单 ...