Sergio Cubero

Introducción a las Páginas Web

Sesión 3Sesión 3

12:00-12:30:

12:30-13:00:

13:00-13:30: 12:00-13:30:

13:30-14:00:

14:00-14:30:

Tablas

Formularios

Plantillas del Frontpage

Crear una sección de descarga.

Utilidades

¿Sabes crear un nuevo sitio web y conectarte a él?

¿Sabes crear o modificar enlaces a páginas, correos o archivos?

¿Sabes trabajar con las plantillas de la UV?

¿Sabes añadir/borrar nuevas páginas?

¿Sabes añadir imagenes?

¿Sabes añadir/cambiar secciones de texto en las plantillas?

¿Sabes añadir/cambiar el título a la página web?

Encuesta:

Creamos nueva carpeta en el “SITE”

Importar Archivo al Web

Creamos un nuevo vinculo pero esta vez nos llevará a un archivo a descargar

Enlace

Resultado

Creación y edición de Tablas

Sirven para organizar el contenido en sentido horizontal

Controlan con precisión el diseño de la páginaCrea una cuadrícula donde colocar los diferentes elementos de la web (texto, imagénes…)

Es importante preparar en papel el diseño previo de la web a construir con tablas.

Casi siempre trataremos de que los bordes de la tabla no se vea por lo que los pondremos a 0

Bordes de las Tablas

Desde Menú “Tabla” Desde el botón derecho del ratón “Propiedades de la tabla”

Las tablas centradas en la página y con un ancho de 728 px.

Autoformato de Tablas

Una vez creada la tabla la seleccionamos toda con el ratón y ….

Convertir texto en Tablas

Eliminar Tablas

La seleccionamos con el cursor del ratón y mediante el botón derecho “Eliminar celdas”

Insertar Filas

Insertar Columnas

Eliminar Celdas

Combinar celdas

Dividir celdas

Trabajar con tablas

Anidar Tablas

Trabajar con el espacio

Crear nuestro sitio WebCrear nuestro sitio Web

Creación de páginas con plantillas del Frontpage

Conjunto Web

Aplicar Temas

Propiedades de la Barra de Vínculos

Menú de exploración

Formularios “FormMail”Formularios “FormMail”http://www.uv.es/ciuv/cas/web/htmlgen.html

<FORM ACTION="/cgi-bin/FormMail.pl" METHOD=POST>

<!-- En la variable "recipient" pon la direccion de destino del mensaje -->

<INPUT TYPE="hidden" NAME="recipient" VALUE="quien.sea@a.donde.sea">

<!-- En la variable "subject" pon el asunto que quieres que aparezca en el mensaje -->

<INPUT TYPE="hidden" NAME="subject" VALUE="Formulario de prueba">

<!-- Aqui ya puedes incluir tus campos del formulario que desees -->

<!-- Si una de las variables se llama "email", el mensaje llegara con esa direccion de remite -->

Qui&eacute;n env&iacute;a el mensaje:<br> <INPUT TYPE="text" NAME="email" VALUE="alguien@desde.algun.lug"><p>

<!-- Si una de las variables se llama "realname", el mensaje llegara con esa nombre de remitente --> Nombre de qui&eacute;n env&iacute;a el mensaje:<br> <INPUT TYPE="text" NAME="realname" VALUE="MiNombre Apell1 Apell2"><p> Un campo de texto sencillo:<br> <INPUT TYPE="text" NAME="text1" VALUE="Algo interesante"><p>

<INPUT TYPE="reset" VALUE="Borrar"><INPUT TYPE="submit" VALUE="Enviar">

</FORM>

Barra de formato

Salto de línea

Parrafos

Justificado

Insertar Imagen de FondoInsertar Imagen de Fondo

Sustituir Texto web (Buscar/Reemplazar)

A veces en nuestro sitio web necesitaremos buscar y reemplazar alguna palabra porque ha cambiado

Estilo dentro de la página web

Hoja de estilo ubicada dentro de la página web

Lugar para modificar las reglas CSS

Vincular la página o páginas a otra hoja de estilos

Insertar Fecha y hora

Insertar componentes dinámicos

Añadir lineas Horizontales con Frontpage

Utilizadas para la separación de los contenidos

Propiedades de la línea Horizontal (Botón derecho)

AGRADECIMIENTOS AGRADECIMIENTOS

RUEGOS Y PREGUNTASRUEGOS Y PREGUNTAS