Programa de clases

Creación de un sitio web básico utilizando Adobe Dreamweaver

Duración: 8 clases

Objetivos de este curso

• Iniciar en la comprensión de la tecnología web y sus funciones internas.

• Enseñar técnicas aplicables a los problemas más comunes en la realización de páginas webs.

• Proponer una metodología de trabajo aplicada al ámbito laboral.

A quiénes va dirigido

Este curso está hecho para aprender a producir técnicamente un sitio web completo desde cero, teniendo
apenas una idea vaga de lo que implica. O si ya hiciste previamente un sitio web, pero sentís que no lográs
comprender del todo la técnica, este curso también te sirve. Si estás ya en el tema, pero no contás con una
metodología sólida de trabajo que te permita insertarte en el mercado, esta es tu oportunidad de aprenderla.

1. Presentación, problemática, modus operandi, introducción a lenguajes.

• Presentación del curso

• Filosofía y modus operandis del curso.
• Planteo de la problemática de la arquitectura del sitio web.
• 960.gs.
• Firebug.
• Firesizer.
• HTML, CSS y PHP.
• Estructura de árboles en HTML. Capas
• CSS. Zen garden (con estilo y sin estilo)
• 3 modos de trabajo: código / diseño / ambos.
• Crear por primera vez un documento HTML.
• Descripción de las etiquetas más utilizadas (div, span,h1,p,a,ul,li, img,form,label,input).
• Herramientas de insertar: común y texto (div, span,h1,p,a,ul,li,img,form,label,input).
• Formatear código fuente.
• Atributos de las tags.
• CSS. Definición de estilos para cada tag.
• CSS. Vinculaciones: externa, en documento, sobre tag.
• CSS. Selectores: ID, clases, tag.
• PHP.

2. CSS.
 • CSS. Definición de estilos para cada tag.
• CSS. Vinculaciones: externa, en documento, sobre tag.
• CSS. Selectores: ID, clases, tag.
• Ventana de CSS.
• Características de 960.gs.
• Propiedades generales para las selecciones.
• Creación de las primeras tags.
• Vista previa en navegador (F12).

• Analizar los sitios webs.

3. Primeras prácticas con con HTML y CSS usando 960.gs.

• Ejercicio libre de experimentación con las tags y CSS.

• Estructura de los archivos y carpetas (css, img, js).
• Crear un archivo HTML y vincular los archivos CSS correspondientes.
• Ver el modelo mock up a maquetarse: Header, content/wrapper, footer.
• Establecer una estrategia de maquetación: de arriba hacia abajo, y de derecha a izquierda
• Revisar el modelo final con Firebug.

4. Construyendo la página de 'Inicio' - parte I

• Establecer el fondo
• Establecer el contenedor a 16 columnas.
• Establecer las grillas.
• Setear las clases Alpha y Omega.
• Crear el link para el logo (a).
• Construir el menú (ul, li).
• Crear el cuerpo de inicio.
• Insertamos la primer imagen (img)
• Título (h1).
• Párrafo (p).

5. Construyendo la página de 'Inicio' - parte II

• Crear el cuerpo de inicio.

• Imagen de fondo del footer.
• Menú de footer
• Separador de créditos
• Créditos

Construyendo la sección 'Nosotros'

• Colocar fondo.
• Crear título (h1).
• Crear párrafo (p).
6. Construyendo la galería de imágenes I

• Copiar el index.html y borrar en content.

• Crear el contenedor de los items (ul).
• Crear el envoltorio de los items (li).
• El link (a).
• La imagen (img).
• El párrafo (p).

• Implementar Shadow-box

• La barra de navegación de páginas.

7. Construyendo la sección 'Contacto' I

• Crear título.
• Crear párrafo.
• Crear formulario.
• Crear label.
• Crear campo.

8. Construyendo la sección 'Contacto' II

• Crear botón enviar.

• Asignar un formulario de envío con PHP.

• Crear botón enviar.