Página principal



Formulario alineado

Descargar 40.7 Kb.
Ver original pdf

Formulario alineado





Descargar 40.7 Kb.
Ver original pdf
Fecha de conversión30.11.2017
Tamaño40.7 Kb.

Introducción al desarrollo web (iDESWEB)

Práctica 3: CSS, maquetación y estilos alternativos

1.

Objetivos

Aprender a maquetar una página web con CSS.

Aprender a emplear estilos alternativos en una página web.

Aprender a crear un estilo para la versión impresa de una página web.

2.

Recursos

¿Cómo se maqueta con CSS?

Porqué el diseñar con tablas es estúpido: problemas definidos, soluciones ofrecidas

1

:

explica porque no hay que diseñar con tablas y las ventajas de emplear CSS.

Simple 2 column CSS layout

2

: explica paso por paso cómo se crea una página web para que

tenga un diseño en 2 columnas.

CSS Layouts

3

: proporciona diferentes estilos de diseño (2 columnas, 3 columnas, fluido y otros).

CSS Layout Techniques: for Fun and Profit

4

: proporciona diferentes estilos de diseño.

Sample CSS Page Layouts

5

: explica paso a paso como lograr diferentes estilos de diseño.

¿Cómo se maqueta un formulario con CSS?

Accessible CSS Forms: Using CSS to Create a Two-Column Layout

6

: explica paso a paso

como maquetar un formulario con CSS.

How to Style Forms in CSS

7

: explica paso a paso como maquetar un formulario con CSS.

Practical CSS Layout Tips, Tricks, & Techniques

8

: algunos trucos de maquetación con CSS,

explica un método de alinear los controles de un formulario.

CSS-Only, Table-less Forms

9

: muestra un ejemplo muy completo de formulario, con todo lo que

puede tener, pero también es muy complejo.

¿Cómo se maqueta una tabla con CSS?

CSS Table Gallery

10

: plantillas para maquetar tablas con CSS.

¿Cómo puedo seleccionar un estilo alternativo?

1

http://www.effectivetranslations.com/stupidtables/everything_es.html

2

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

3

http://css-discuss.incutio.com/?page=CssLayouts

4

http://www.glish.com/css/

5

http://www.maxdesign.com.au/presentation/page_layouts/

6

http://www.websiteoptimization.com/speed/tweak/forms/

7

http://www.informit.com/articles/article.aspx?p=456144

8

http://www.alistapart.com/stories/practicalcss/

9

http://jeffhowden.com/code/css/forms/

10

http://icant.co.uk/csstablegallery/

1


Alternative Style: Working With Alternate Style Sheets

11

: no todos los navegadores poseen

una opción de menú que permite seleccionar un estilo alternativo, en esta página se explica cómo

hacerlo mediante JavaScript.

¿Cómo puedo hacer un estilo para que se use cuando se imprime una página web? ¿Qué cambios tengo

que realizar respecto a un estilo en pantalla?

What is a Printer-Friendly Web Page?

12

: proporciona algunos consejos para crear la versión

impresa de un sitio web.

CSS Media Types Create Print-Friendly Pages

13

: explica como implementar una hoja de

estilo CSS para la versión impresa de una página web.

CSS Design: Going to Print

14

: explica cómo crear una hoja de estilo CSS para la versión impresa

de un sitio web y ofrece algunos consejos.

¿Existe alguna herramienta que me pueda ayudar a escribir el código CSS necesario para maquetar

una página web?

CSS Layout Generator

15

: generador del código CSS para maquetar.

3.

¿Qué tengo que hacer?

Según el Diccionario de la Lengua Española

16

de la Real Academia Española, maquetar es “Hacer

la maqueta de una publicación que se va a imprimir”. Si buscamos maqueta, obtenemos varias acepciones y

una de ellas dice “Boceto previo de la composición de un texto que se va a publicar, usado para determinar

sus características definitivas”.

En el desarrollo de las páginas web, se entiende por maquetación a la acción de distribuir o posicionar

los distintos elementos que queremos que aparezcan en una página web.

En esta práctica tienes que crear un estilo alternativo al que creaste en la práctica anterior.

En este estilo tienes que maquetar la página web para que los elementos que contiene aparezcan en las

posiciones adecuadas. En especial, haz una correcta maquetación de los controles de los formularios para

que aparezcan alineados.

Intenta que el diseño sea fluido (evita trabajar con tamaños fijos) para que se adapte correctamente

a distintas resoluciones de pantalla.

Además, también tienes que lograr que el sitio web se imprima correctamente. Para ello no tienes que

crear una versión imprimible (una versión especial para que sea impresa), sino que tienes que crear una

hoja de estilo para que sea usada cuando se quiera imprimir el sitio web.

4.

¿Cómo lo hago?

Para indicar que se está usando un fichero CSS en una página web se emplea la etiqueta .

Es una misma página web se pueden indicar varios ficheros CSS que se combinan todos ellos o también se

puede indicar de forma que definan estilos alternativos. Los estilos alternativos se pueden definir para un

mismo dispositivo o se pueden definir para distintos dispositivos (ordenador, impresora, teléfono móvil y

otros). Para definir un dispositivo concreto se emplea el atributo media; si no se indica un dispositivo, el

estilo CSS se aplica a todos los dispositivos (equivale a media="all").

Por ejemplo, en el siguiente código se define un estilo CSS que se debe emplear cuando se imprima

una página web (media="print") y un estilo que se debe emplear cuando se visualiza en pantalla:

11

http://alistapart.com/stories/alternate/

12

http://webdesign.about.com/od/printerfriendly/a/aa041403a.htm

13

http://webdesign.about.com/cs/css/a/aa042103a.htm

14

http://alistapart.com/stories/goingtoprint/

15

http://csscreator.com/tools/layout

16

http://www.rae.es/

2


El navegador selecciona automáticamente el estilo definido para la impresora cuando mandamos a

imprimir una página web.

Cuando se definen estilos alternativos (rel="alternate stylesheet") para un mismo dispositivo,

es necesario indicar un nombre para cada estilo con el atributo title. Pueden existir varias hojas de

estilo con el mismo nombre, en cuyo caso se aplicarán todas ellas en conjunto al elegir el nombre que las

identifica. Por ejemplo:

title="Estilo de alto contraste" />

title="Estilo de tamaño grande" />

En la Figura 1 se muestra como seleccionar un estilo alternativo en Mozilla Firefox a través del menú

Ver, Estilo de página. No todos los navegadores ofrecen esta opción.

Figura 1: Selección de estilos alternativos en Mozilla Firefox

En CSS existen tres tipos de hojas de estilo:

Persistente: el atributo rel toma el valor stylesheet y el atributo title no tiene valor. La hoja

de estilo se aplica en todas las situaciones.

Preferida: el atributo rel toma el valor stylesheet y el atributo title tiene un valor. La hoja

de estilo se aplica a menos que el usuario elija una hoja de estilo alternativa.

Alternativa: el atributo rel toma el valor alternate stylesheet y el atributo title tiene un

valor. La hoja de estilo se aplica cuando el usuario la selecciona explícitamente; las hojas de estilo

alternativas son excluyentes entre sí: sólo se puede aplicar una.

Para maquetar con CSS un formulario existen varias técnicas. Una sencilla consiste en definir un

tamaño fijo para las etiquetas de los controles. Por ejemplo:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Formulario alineado


label {float: left; display: block; width: 100px;}

input {float: none; display: inline;}

.centrado {margin: 10px 100px;}

-->

Datos personales

Nombre:

Apellidos:



Similar:

Formulario alineado iconFormulario para registro de trabajo técnico f1
Título en ingléS, letra arial, tamañO 14, alineado al centro. Mayúsculas, negritas
Formulario alineado iconFormulario a
Formulario a: formulario solicitud de intervención o alteración excepcional del artículo 19 de la ley n° 20. 283
Formulario alineado iconFormulario de Información del Beneficiario pbgc formulario sp701
Instrucciones: Usted debe completar este formulario para continuar recibiendo pagos pensión. Si tiene
Formulario alineado icon1/2 Instructivo para completar formulario de Certificación de Servicios y Remuneraciones sujeto a aportes
Este formulario deberá estar acompañado del Formulario afectación de haberes oyM
Formulario alineado iconSoltaremos el Mouse y quedará creado el sub-formulario
Al tener las dos ventanas en vista vertical ampliamos un poco el Pie del formulario, que será donde se coloque el Sub-Formulario
Formulario alineado iconTipo de trámite Denominación del formulario Descripción del formulario Link para descargar el formulario / Portal de Trámites Ciudadanos



Descargar 40.7 Kb.
Ver original pdf