CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB

Loading....

Loading....

Loading....

Loading....

Loading....

Texto completo

(1)

COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GUIA DE APOYO PRIMER BIMESTRE

GRADO UNDECIMO CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB

UNIDAD TEMÁTICA: INICIANDO CON HTML Y DREAMWEAVER

LOGRO: Diseña y crea una página web sencilla basado en el lenguaje de programación básico HTML con el apoyo del editor de páginas DreamWeaver.

INDICADORES Saber Saber

a. Reconoce el lenguaje de programación general para una página Web, HTML.

b. Identifica los tags principales y las propiedades de los mismos para definir los contenidos de una

página web.

Saber Hacer

a. Crea contenidos multimedia para una página web a través del uso de las herramientas básicas

del programa flash.

b. Diseña una página Web sencilla utilizando los tags principales de Html y el editor DreamWeaver

c. Ubica las herramientas del entorno de Dream Weaver.

Saber Ser

a. Fomenta la importancia del buen comportamiento y uso de la sala de Informática y su

desplazamiento hacia la misma en orden

b. Demuestra habilidad, orden y disciplina para seguir las instrucciones de un procedimiento

c. Participa con responsabilidad en las actividades de informática.

d. Conoce las normas de la clase y las sigue responsablemente

TEMAS Y SUBTEMAS:

1. Generalidades Flash CS5

a. Generalidades para la www

i. Contenidos básicos en una Página: Texto - Imágenes – Links ii. Lenguaje básico de Páginas Web

iii. Editores para diseñar páginas web: DreamWeaver

El contenido de esta guía de apoyo ha sido extraído de los manuales que a continuación se mencionan:

WEBGRAFIA

http://usuarios.multimania.es/cursonvu/descargas/manualhtml.pdf MANUAL BASICO DE HTML http://www.jorgesanchez.net/web/html.pdf HTML GUIA RAPIDA DE REFERENCIA

(2)

1. Lenguaje Básico de Páginas Web a. Ergonomía de una página Web:

HTML: HyperText Markup Language (Lenguaje de Marcado de Hipertexto),Es el lenguaje de programación básico para la creación de Páginas Web. “Es un conjunto o serie de etiquetas incluidas en archivos de texto que definen la estructura de un documento WWW y sus vínculos con otros documentos.

Los navegadores WWW leen estos archivos de texto e interpretan esas etiquetas para determinar cómo desplegar la página Web.”

ESTRUCTURA DE UNA PÁGINA

Una página web está compuesta de 2 partes: el encabezamiento y el cuerpo de la página. Existen tres etiquetas fundamentales, que deben estar incluidas en el archivo HTML de manera obligatoria.

Estas tres etiquetas fundamentales son:

<html> </html> Indica al navegador que el documento texto que está leyendo es un documento HTML. Esta etiqueta se abre al inicio del archivo y se cierra al final del mismo.

<head> </head> Acá se detalla el encabezado de la página WEB. Se abre enseguida de <html>.

<body> </body> Cuerpo de la página donde se despliega el contenido global. Esta etiqueta se abre luego de cerrar el encabezamiento con </head> y se extiende hasta el final de la página, cerrándose antes de </HTML>.

Ejemplo : <html>

<head>

<title>CURSO BASICO DE DREAMWEAVER</title> </head>

<body>

Bienvenidos a este curso </body>

</html

El archivo HTML que se quiere presentar como Página de Inicio se debe guardar con el nombre index.html

La Ergonomía en una página Web, hace referencia a la adaptación de los espacios, las tareas, las herramientas y el entorno en general que va a tener una página de acuerdo con sus

contenidos; ofreciendo interactividad eficiente, proporcionando una información eficaz, rápida y un servicio agradable que brinda bienestar al usuario.

Una de las estructuras que se utilizan para lograr una buena ergonomía, son las tablas: estas permiten una mejor distribución de la información y un mejor aprovechamiento del espacio. Veamos cómo funcionan las tablas básicas con HTML.

(3)

b. Tablas en una página Web: Etiqueta <table></table>

Señala el inicio y final de una tabla. Sus propiedades o atributos son:

• Align Establece la alineación de la tabla o texto mediante ALIGN=LEFT o ALIGN=RIGHT • Bgcolor Establece el color de fondo de las celdas de la tabla

• Border Determina el ancho del borde en pixeles • BorderColor Asigna un color al borde

• BorderDark Determina el color de la parte oscura de un borde de 3 dimensiones • BorderLight Asigna el color de la parte clara de un borde de 3 dimensiones • Caption Especifica el titulo para la tabla

• Cellpadding Establece la cantidad de espacio libre junto al contenido de una celda • Cellspacing Asigna la cantidad de espacio entre las celdas de una tabla

• Width Determina el ancho de la tabla en pixeles o en un porcentaje

Etiqueta <th> </th>

Indica al navegador que exhiba el texto como un encabezado en la primera fila de una tabla. Etiqueta <tr> </tr>

Indica al navegador que exhiba el texto dentro de una fila; puede también interpretarse como la etiqueta que define filas.

Etiqueta <td> </td>

La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas específicas de una tabla. Su principales atributos son:

• Align: Alineación del texto/objeto de la celda • Bgcolor: Color de fondo de la celda

• Background: imagen de fondo de una celda

• Width: Ancho de la celda/columna con respecto al ancho de la tabla • Colspan: Combina dos o más columnas en una tabla

• Rowspan: Combina dos o más filas de una tabla

Recuerda que dentro de una celda, se puede insertar textos, gráficos, links y tablas enteras. Ejemplo.

<html> <head>

<title>Curso de HTML</title> </head>

<body bgcolor="#C0D9D9" text="#000000"> <table width="350" height="200">

<tr>

<td colspan="2" bgcolor="#33FF00"><center>TITULO</center></td> </tr>

<tr>

<td rowspan="2" bgcolor="#FF0099"> ALEX </td> <td bgcolor="#FFFF00"> CURSO </td>

</tr> <tr>

<td bgcolor="#3300CC" colspan="1"> DIA </td> </tr>

</table> </body> </html>

(4)

Ese código da como resultado esta tabla:

TITULO

ALEX CURSO

DIA

c. Tags principales IMAGENES Etiqueta <img>

Se trata de una etiqueta especial, pues no necesita de etiqueta de cierre.

Esta etiqueta instruye al navegador para que exhiba la imagen especificada. El formato básico para incluir un gráfico es: <img src= “carpeta/imagen.ext”>, es decir ubica la carpeta donde está la imagen, su nombre y su extensión. Sus atributos son:

• Src: Aquí se especifica la ubicación de la imagen.

• Height: Redimensiona la altura de la imagen (en pixeles o en porcentaje) • Width: Redimensiona el ancho de la imagen (en pixeles o en porcentaje)

A la imagen se le puede aplicar un borde que se hace notorio especialmente cuando se trata de una imagen que además es un hipervínculo:

• Border: Definido en pixels

La imagen también puede alinearse con respecto al texto:

• ALIGN: Alineación, puede ser: TOP, MIDDLE, BOTTOM, LEFT y RIGHT

En caso de que la imagen se quiera identificar, se puede desplegar un texto a su lado: • ALT: Especifica el texto alterno

Ejemplo:

<center><img src="imágenes/foto.jpg" border="1" alt="Foto de Claudia" width="200px"></center>

TEXTO Etiqueta <font> </font>

Esta etiqueta proporciona al autor un medio de personalizar el texto con respecto al tipo de fuente, tamaño y color. Atributos:

• Color: determina el color que se aplica al texto

• Size: determina el tamaño relativo del texto. Los tamaños válidos son del 1 al 7, siendo el predeterminado el 3 y el más grande el 1.

• Face: asigna una fuente o tipo de letra. Ejemplo:

<html>

<head>

<title>Curso de HTML</title> </head>

(5)

<body bgcolor="#C0D9D9" text="#000000">

<h1 align="center"> EL TEXTO EN HTML</h1><br> <hr align=center width=50%><br>

<hr align=left width=25% size=5><br>

Este es un ejemplo de PÁGINA WEB <b><i>:)</i></b><br> <b>Este texto está con negrillas</b><br>

<u>Este texto está con subrayado</u><br> <i>Este texto está con inclinación itálica</i><br>

Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br> <font color="red"><font size=7>B</font>o</font><font color="yellow"> li</font><font color="green">via, tiene alineación</font><br>

</body> </html>

LINK O HIPERVINCULOS Etiqueta <A> </A>

Un vínculo hipertextual es un texto, botón o imagen que al seleccionar nos lleva a otra dirección URL, página WEB o recurso. Permite vincularse a otra ubicación dentro del mismo documento HTML, a otro sitio WEB, a un servidor FTP, enlace de correo electrónico. Atributos:

• HREF Recurso al cual se hace referencia el hipervínculo es la dirección / ubicación del vínculo

• NAME Especifica el nombre de la posición a donde apuntar

• TARGET Destino del enlace (generalmente para páginas con Frames:) _Parent. En la ventana actual

_Top: En toda la ventana

_Self: Se abre la ventana donde se encuentra el enlace _Blank: Una nueva ventana

Ejemplo: <html>

<head> <title>Enlaces</title> </head>

<body bgcolor="#C0D9D9" text="#000000" link="#000080" vlink="magenta" alink="black">

<img src="foto.jpg" alt="Foto de la universidad"><br>

<a href="http://uniagustiniana.edu.co/">Página de la universidad<\a><br> <a href="ftp://ftp.microsoft.com/pub/">FTP de Microsoft</a><br>

<a href="mailto:secretaria@uniagustiniana.edu.co/">Envía comentarios <\a> </body>

(6)

2. Entorno general de DreamWeaver:

Dreamweaver es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Sin embargo, es importante tener un conocimiento básico de este lenguaje, lo cual hará más fácil el diseño

Ventana Principal

La barra de la aplicación

Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line.

La barra de menús

Contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles.

(7)

Contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales: Nuevo, Abrir…

La barra herramientas de documento

Contiene iconos para ejecutar de forma inmediata otras operaciones habituales como el cambio de vista del documento, vista previa, etc.

El inspector de Propiedades

El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc. Lo mismo sucederá con las imágenes como se muestra en la gráfica.

Pulsando sobre el botón se despliega para mostrar más opciones.

La barra de herramientas Insertar o panel de objetos:

Permite insertar elementos en un documento. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, botones y objetos flash que sirven para insertar en las páginas.

Es posible configurar este panel para verlo como menú, como panel flotante o como una barra de herramientas integrada en la ventana de trabajo

La vista Diseño Permite trabajar con el editor visual. Aquí se ubican los textos, objetos y archivos verificando cómo quedan en la página.

(8)

La vista Código Se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. No permite tener directamente una referencia visual de

cómo va quedando el documento. Sin embargo, desde allí podemos realizar modificaciones y correcciones sobre el documento.

La vista Código y Diseño

Permite dividir la ventana en dos zonas y cuando se modifica una, repercute en la otra.

Figure

Actualización...

Related subjects :