11 Programación Web con .NET y C#

Post on 12-Jan-2017

155 views 0 download

Transcript of 11 Programación Web con .NET y C#

PLANTILLASASP.NET

Guido Ticona Hurtadoguidoti@gmail.com

Plantillas Layouts RenderBody RenderSection RenderPage

Estructura de una página

Pasos para Ver una Comprobante/Index Llamada a la página Index.cshtml Verifica _ViewStart.cshtml en el directorio /Views Verifica _ViewStart.cshtml en el directorio

Comprobante Verifica si tiene especificado variable Layout Renderiza Layout Renderiza la Pagina Index.cshtml

Secciones Visualizar partes dinamicas Configuracion de Estilos Configuración de Scripts

Secciones RenderSection Section IsSectionDefined

CSS Cascading Style Sheets Separar presentación de contenido Mayor flexibilidad, escalabilidad, y

posibilidades en la presentación de contenidos web

Dinamismo Correctamente utilizado reduce el peso

de las páginas

Sintaxis Básica

Selector { propiedad: valor; ...}

Declaración

H1 {color:#CC9900;}Ejemplo:

Como se usa CSS En la Cabecera (<HEAD>)<STYLE TYPE="text/css"> P {text-align:right}</STYLE>

Estilo como atributo<P STYLE="text-align: right">Estilo

propio</P> Hoja de estilo externa<LINK REL="stylesheet" TYPE="text/css"

HREF="estilo.css">

Selectores ElementosH1 {font-family: Arial, Helvetica, sans-

serif; font size: 10pt; font-style: italic;}

Elementos agrupadosH1, P, B {font-color: blue;} Clases para elementosP.enfatizada {font-weight: bold;} Clases generales.enfatizada {font-weight: bold;} Selectores ID#enfatizada {font-weight: bold;}

Pseudo Selectores Pseudo-Elementos:first-line Se aplica a la primera línea del elemento

:first-letter Se aplica a la primera letra del elemento

Pseudo-Clases:first-child Se aplica al primer hijo del elemento

:link Enlace (ej. A:link {...}):visited Enlace visitado:hover Enlace sobrevolado

Cajas

Vestibulum convallis dignissim diam. Sed et ligula. Proin ullamcorper odio eu mi. Aliquam erat volutpat. Nunc ac leo sed erat commodo ornare. Duis urna. Nunc ac justo a risus dictum scelerisque. Curabitur felis augue, rutrum eu, sollicitudin ac, auctor non, dolor.

Margin

Padding

Border