colegio agustiniano ciudad salitre area de tecnología e informatica

COLEGIO AGUSTINIANO CIUDAD SALITRE
AREA DE TECNOLOGÍA E INFORMATICA
GUIA DE APOYO SEGUNDO BIMESTRE 2015
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 y el editor gráfico Fireworks.
INDICADORES DE LOGRO
Reconoce el lenguaje de programación general para una página Web, HTML.
Identifica los tags principales y las propiedades de los mismos para definir los contenidos de una
página web.
Diseña una página Web sencilla, utilizando fondos, tablas, botones, texto e imágenes.
Ubica las herramientas del entorno de DreamWeaver.
Usa los diseños gráficos de la empresa, realizados en el primer bimestre.
Fomenta la importancia del buen comportamiento y uso de la sala de Informática y su desplazamiento
hacia la misma en orden.
Demuestra habilidad, orden y disciplina para seguir las instrucciones de un procedimiento.
Participa con responsabilidad en las actividades de informática.
Conoce las normas de la clase y las sigue responsablemente
CONTENIDOS:
HERRAMIENTAS PARA DISEÑAR WEBS
Creación de mi sitio Local
1. Tags de HTML y estructura de una página
2. Ventana y herramientas básicas de Dreamweaver
3. Propiedades de apariencia CSS
4. Inserción de contenidos
a) Creación de fondos y botones en Fireworks
b) Tablas
c) Texto
d) Imagen y/o archivos
e) Hyperlink
AYUDAS PEDAGÓGICAS
Guía de apoyo del bimestre
Software: Adobe Cs5 (Dreamweaver y Fireworks)
EVALUACION BIMESTRAL: El día asignado ´por la coordinación académica en la hora de la clase
El contenido de esta guía de apoyo ha sido extraído de los manuales que a continuación se
mencionan:
GUIA DE APOYO PARA EL ESTUDIANTE
COLEGIO AGUSTINIANO CIUDAD SALITRE
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.
Diseño
CREACIÓN DE MIS SITIO LOCAL
En Dreamweaver, el término “sitio” se emplea para referirse a una ubicación de almacenamiento local o
remota de los documentos que pertenecen a un sitio Web. Un sitio de Dreamweaver permite organizar y
administrar todos los documentos Web, cargar el sitio en un servidor Web, controlar y mantener vínculos y
administrar y compartir archivos. Para aprovechar al máximo las funciones de Dreamweaver, debe definir un
sitio.
1.
2.
3.
4.
5.
6.
Para poder administrar tu página web debes:
Ubica la carpeta de tu curso en la carpeta compartida.
Crea una nueva carpeta que se llame SEGUNDO PERIODO
Dentro de segundo periodo crea tres carpetas que se llamen: PÁGINAS, IMÁGENES Y VARIOS
En la carpeta IMÁGENES, guarda los archivos definitivos que realizaste el primer periodo por ejemplo:
Logo e imágenes relacionadas con el contenido, las imágenes en esta carpeta deben tener extensión jpg
o gif.
En la carpeta PÁGINAS guardarás todos los archivos de Dreamweaver y el SWF del banner.
En la carpeta VARIOS guardarás aquellos documentos o imágenes extra que necesites para tu página
web como los contenidos de los objetivos, misión y visión.
RECUERDA: Todo lo que trabajes en tu página web debe estar en
estas carpetas ya que Dreamweaver utilizará estas ubicaciones
para la correcta organización de los documentos web.
1. ESTRUCTURA DE UNA PÁGINA WEB
HTML: HyperTextMarkupLanguage (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.”
PÁGINA WEB: 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.
Las 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 estructura de 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.
TABLAS EN UNA PÁGINA WEB:
Etiqueta <table></table>
Señala el inicio y final de una tabla. Sus propiedades o atributos son:
• AlignEstablece la alineación de la tabla o texto mediante ALIGN=LEFT o ALIGN=RIGHT
• BgcolorEstablece el color de fondo de las celdas de la tabla
• BorderDetermina 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">
<center>
<table width="400" height="200">
<tr>
<td colspan="2" bgcolor="#33FF00">
<center><IMG SRC="">CONTENIDO</center>
</td>
</tr>
<tr>
<td bgcolor="#FFFF99">
MES
</td>
<td bgcolor="#FFCCFF">
AÑO
</td>
</tr>
<tr>
<td rowspan="2" bgcolor="#FF0099">
ALEX
</td>
<td bgcolor="#FFFF00">
CURSO
</td>
</tr>
<tr>
<td bgcolor="#00CCFF">
DIA
</td>
</tr>
</table>
</center>
</body>
</html>
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: <imgsrc= “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><imgsrc="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>
<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"><fontsize=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">
<imgsrc="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:[email protected]/">Envía comentarios <\a></body>
</html>
2. VENTANA Y HERRAMIENTAS BÁSICAS DE DREAMWEAVER

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.

La barra de herramientas estándar
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.
Se activa con la opción: Window + insert
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.
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.
3. PROPIEDADES DE APARIENCIA CSS
Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato, es
decir, que tengan el mismo color de fondo, de fuente, etc.
Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la
página.
Este cuadro se puede abrir de tres modos diferentes:
Pulsar la combinación de teclas Ctrl + J.
Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual
la opción Propiedades de la página.
En la categoría Apariencia (CSS), encontramos las
propiedades:
Fuente de página: es el tipo de letra que le
aplicaremos al texto.
Tamaño: es el tamaño de la fuente que
aplicaremos al texto.
Color del texto: es el color de la fuente.
Color del fondo: permite especificar un color de
fondo para el documento, pero dicho color solo se
mostrará en el caso de no haber establecido
ninguna imagen de fondo.
Imagen de fondo: permite especificar una imagen
de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de
fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores
para el texto, así como que no es conveniente tener un gif animado como fondo.
Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se
repita, seleccionamos la opción no-repeat.
Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el
contenido de la página y la ventana del navegador.
4.
INSERCIÓN DE CONTENIDOS
a. FONDOS Y BOTONES: Es importante seleccionar las imágenes adecuadas para el logo, los banner y
los fondos para el portal web.
Para página web, las imágenes deben ser livianas para facilitar que la pagina corra rápido, para ello puedes
editarlas en Fireworks que permite tener imágenes con el peso ideal.
La resolución ideal para una imagen, ya sea fondo o botón, que será utilizada en la web, puede ser de 72
(dpi) píxeles por pulgada. El tamaño dependerá de la necesidad y los formatos recomendados son JPEG y
GIF.
El fondo: Se refiere a un color o una imagen que se utilizan detrás de los contenidos de una Página Web.
Este armoniza y puede hacer más llamativa la página.
Es importante que el fondo contraste con los contenidos. Es decir, si se usa un fondo oscuro, el contenido ha
de ser claro para que se visualice, y viceversa. Se pueden utilizar imágenes de fondo pero estas deben ir en
“marca de agua” de tal forma que no obstruyan la lectura de los contenidos o quede muy pesada para la
vista.
La eficiencia de una página está en la velocidad a la que cargan los contenidos. Tener fondos muy pesados,
hace que se demore en abrir. Por esta razón es mejor diseñar fondos pequeños y livianos que cargan a
manera de mosaico en el <body> de la página, o en los <td> de las tablas.
Para nuestro caso los diseñaremos en Fireworks siguiendo algunos ejemplos vistos en clase:
Barra Degradé horizontal
Canvas color +
imagen dibujada
Cuadro color +
Textura
Logo
difuminado
Barra Degradé Vertical
El botón: Es un elementos que se presta a que el usuario lo presione, desencadenando una serie de
acciones. También es habitual ver como este tipo de elementos reaccionan cuando se les pasa el ratón por
encima o cuando se les está pulsando. Aporta la mayor parte de la interactividad de las películas Flash o de
las páginas web con aquel que la está visualizando.
Para crearlo es recomendable hacerlo en flash, de la misma forma que el fondo y usando los mismos
formatos, JPEG o GIF.
Para nuestro caso los diseñaremos en Fireworks siguiendo algunos ejemplos vistos en clase:
b. TABLAS: Las tablas presentan una serie de datos de forma
clara y organizada, dividiéndolos en filas y columnas.
Para insertar una tabla hay que dirigirse Insertar + Tabla.
En la nueva ventana habrá que especificar el número
de Filas y Columnas que tendrá la tabla, así como el Ancho de
la tabla.
El Ancho puede ser definido como Píxeles o como Porcentaje.
Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1). Si lo
ponemos a 0 o en blanco, la tabla no mostrará borde.
Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y los bordes de éstas.
Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.
También se puede establecer, si se quiere, un encabezado para la tabla, por ejemplo para indicar el
contenido de filas o columnas o crear menús.
En las propiedades de la tabla, puedes alinear la tabla, agregar filas y columnas y aumentar o disminuir el
borde. Al seleccionar ciertas filas y columnas puedes agregarle fondos y diseño a la tabla, en la opción New
Inlne Style y posteriormente en Edit Rule.
c. TEXTO: En la Vista DESING, pues
ubicarte en el lugar que desees y
agregar texto, lo uedes hacer
también dentro de las tablas.
El texto se puede modificar desde la ventana PAGE PROPIERTIES + APPARENCE CSS O en la barra de
propiedades, que se activa al seleccionar el texto, allí debes ubicar TARGETED RULES + INLINE STYLE
para que puedas darle tu apariencia deseada.
d. IMAGEN y/o ARCHIVOS
Para insertar una imagen hay que dirigirse al menú INSERT + IMAGE .o puedes usar también Ctrl + Alt + I
RECUERDA: Los formatos más utilizados para web son: el GIF y JPG, que a pesar de
ser imágenes de menor calidad que las imágenes BMP, son más recomendables
debido a que ocupan menos memoria.
ARCHIVOS FORMATO SWF: Utiliza Dreamweaver para añadir archivos SWF (Versión compilada del
archivo FLA (.fla) optimizada para la Web. Este archivo se puede reproducir en navegadores y ver en
Dreamweaver) También puedes establecer las propiedades de los archivos SWF en el inspector de
propiedades.
Para incluir un archivo SWF debes situarte en el lugar donde desea insertar el contenido y luego ve al panel
Insertar, selecciona Media y haga clic en el icono SWF
.
e. HYPERLINKS: 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.
Para insertarlos puedes ubicarte en un texto o una imagen.
Para texto: Se debe seleccionar el texto, ir a INSERT +
HYPERLINK, aparece la siguiente ventana:
Alli debes colocar el link al que quieres que se redireccione el
menú y en Target, como se explicó anteriormente el destino
del enlace.
Para imagen: Debes seleccionar la imagen y en las propiedades ubicar tu link en el respectivo cuadro:
ACTIVIDADES CREACIÓN DE PÁGINA WEB
1. CREACIÓN DE FONDOS
En Fireworks, abre un archivo con una medida pequeña, mínimo de 100px x 100px y máximo de 300px x
300px. En ese canvas, diseña de forma sencilla, el fondo que deseas, recuerda que cada menú de tu página
puede tener un fondo distinto. Cada fondo debe guardarse por separado (FILE + IMAGE PREVIEW +JPG)
RECUERDA GUARDARLA EN TU SITIO LOCAL, EN LA CARPETA IMÁGENES
Has mínimo 5 fondos para tu página web.
Puedes ir insertándolas en Dreamweaver desde Apariencia CSS (CTRL +J) background image
2. CREACIÓN DE MENÚS E INSERSIÓN DE TEXTO
Los menús son la manera de ayudar a usuarios a no perder de vista el contenido de una web; pueden
también ser utilizados con otras ayudas de la navegación, tales como barras de navegación.
Para insertarlo debes crear una tabla en Dreamweaver, con la cantidad de filas y columnas que requieras
para tu web. Debes incluirle fondos o dieños a tu tabla
Debes incluir textos y editarlos como se ha explicado anteriormente y que tenga coherencia de diseño y
color con tu fondo y tu micropempresa.
3.
CREACIÓN DE BOTONES
En Fireworks, abre un archivo con la medida exacta del botón que desees crear (debe ser una medida
pequeña). En ese canvas, diseña el botón que deseas, recuerda hacer varios botones para tu página web,
puedes además desde Fireworks, darle varios estilos a tus botones, desde WINDOW + STYLES (CTRL +
F11). Cada botón debe guardarse por separado (FILE + IMAGE PREVIEW +JPG)
RECUERDA GUARDARLA EN TU SITIO LOCAL, EN LA CARPETA IMÁGENES.
Has mínimo 5 botones para tu página web.
Puedes ir insertándolos en Dreamweaver desde: INSERT + IMAGE OBJECT + ROLLOVER IMAGE
4.
IMPORTAR IMÁGENES Y/O ARCHIVOS
Importa los trabajos realizados en el primer bimestre de Diseño de contenidos. Deben estar con anterioridad
ubicados en tu sitio local en la carpeta imágenes.
Debes importar: el Banner en SWF Logo en .JPG o GIF y texto de los objetivos, misión y visión para los
diferentes menús.
Para importar a Dreamweaver, revisa la sección de Inserción de contenido e imagen de la guía de
apoyo
5.
INSERTAR HYPERLINKS
A tus textos e imágenes inserta enlaces web o que direccionen a archivos de tu carpeta. Puedes incluir links
externos, por ejemplo, paginas que ya existen en la web o links que te lleven a contenido interno de tu
página, para ello, cada contenido de tu menú se debe crear como una página web nueva, es decir que
en tu carpeta PAGINA, debes tener varios archivos .html
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
http://www.aulaclic.es/dreamweaver-cs6/index.htm Curso de DreamWeaver
https://helpx.adobe.com/es/dreamweaver/using/dreamweaver-sites.html