Crear un nuevo sitio

del curso: Maquetación web

Comprar

¡Suscríbete ya!

Información sobre este video

Definición de la estructura lógica de la página web y creación del sitio para comenzar el desarrollo.

Comprar

¡Suscríbete ya!

Una lección de:

Maquetación web

USD 24.80

Cursos similares

Presentación de la formación y del formador.

Presentación

01:09
Vamos a empezar a conocer HTML, el lenguaje que Internet Explorer, Firefox, Safari y Chrome son capaces de interpretar para mostrar las páginas webs mas sofisticadas.

Qué es HTML: Pequeña introducción
- Historia del HTML: Características y ventajas del HTML, 5 Galerías de HTML 5 y w3cschools.com.
  
  Qué es HTML
  
  07:03
Qué decisiones tomamos al revisar la documentación recibida sobre la web a maquetar.

Cómo abordar una Web
- Analizamos el diseño gráfico estructurándolo en elementos comunes para empezar a obtener las imágenes. ¿Usamos Photoshop o Fireworks? Veremos en qué casos emplear uno u otro.
  
  Cómo abordar una WEB
  
  10:20
Una introducción al Dreamweaver como herramienta de maquetación y depuración de código.

Dreamweaver
- Un poco de historia y un vistazo por la interface del Dreamweaver y sus funciones más orientadas al maquetador.
  
  Funciones básicas y herramientas
  
  10:03
En este capítulo crearemos una web sencilla, nos familiarizaremos con la estructura de una página web y con las herramientas habituales para el desarrollo: microsite comercial de una aplicación para iPhone.

Esquema de plantilla: Ejercicio
- Definición de la estructura lógica de la página web y creación del sitio para comenzar el desarrollo.
  
  Crear un nuevo sitio
  
  02:25
- Creación del primer HTML y de las CCS básicas. Establecimiento del Background.
  
  Crear la página principal: index.html
  
  05:00
- Captura en FireWorks de las primeras imágenes. Organización de las capas: ¿cómo se solapan? Uso de imágenes en capas.
  
  Organización del cuerpo mediante capas I
  
  06:56
- Estilos anidados, imágenes con enlaces, uso de Repeat y para relleno de un fondo.
  
  Organización del cuerpo mediante capas II
  
  04:33
- Toma de medidas en Photoshop: estructurando el cuerpo.
  
  Cabecera I
  
  02:42
- Maquetamos ahora las capas donde aparecerán la columna de la izquierda y las cajas centrales de nuestra web.
  
  Cajas bajo la cabecera
  
  02:37
- Uso de Fireworks para obtener imágenes desde el PSD.
  
  Imagen iPhone
  
  00:43
- En la columna izquierda tenemos una imagen del iPhone y un botón, que maquetaremos a continuación.
  
  Columna izquierda
  
  02:21
- Utilización de clases múltiples. Construcción de cajas mediante listas. Las listas también fluyen. Identificación y corrección de errores de codificación.
  
  Maquetación del cuerpo I
  
  03:13
- Seguimos maquetando el cuerpo.
  
  Maquetación del cuerpo II
  
  02:16
- Finalizamos la maquetación de las cajas con el texto y las clases correspondientes.
  
  Completando el cuerpo
  
  02:31
- Entrada de datos: elemento input. CSS: estilos compartidos.
  
  Maquetación de la parte central inferior
  
  05:27
- Casos de errores de sintaxis típicos muy frecuentes y que no son fáciles de localizar.
  
  Maquetación del pie de página
  
  04:48
- Definición de capas dentro de capas con estilos marcados hasta en cuatro niveles de profundidad.
  
  Estilos recursivos
  
  04:36
- Uso de coordenadas negativas para realizar ajustes horizontales entre texto e imágenes.
  
  Ajustes horizontales vía CSS
  
  05:13
- Adaptación de Código HTML 5 CSS 3 para PopUp Lightbox.
  
  Búsqueda de código reutilizable en Internet
  
  06:24
En este capítulo desarrollaremos una web con un diseño más avanzado que requiere una utilización más compleja de CSS.

Website de una organización no gubernamental
- Creamos la estructura base del site y comenzamos a construir la página.
  
  Organización del Site
  
  06:33
- Análisis del diseño para definir la estructura de la página web.
  
  Estructura de la página
  
  03:46
- Utilización de elementos Id para ajustes de capas. Identificación y corrección de errores.
  
  Creando la cabecera
  
  02:38
- Utilización de listas para maquetar un menú horizontal.
  
  Diseño del menú
  
  02:49
- Maquetación del carrusel. Ejercicio con error provocado para ser solucionado por alumnos.
  
  Diseño del carrusel I
  
  06:02
- Maquetación del carrusel. Lista vertical con Width sin capa contenedora.
  
  Diseño de carrusel II
  
  03:52
- Compensación de márgenes con coordenadas negativas.
  
  Maquetación del cuerpo I
  
  06:30
- Ajustes de capas, localización de errores por cierres incompletos de capas. Ejercicios con errores provocados en el código.
  
  Maquetación del cuerpo II
  
  05:03
- Trabajando con Repeat-x implícito.
  
  Maquetando el pie
  
  04:09
- Incrustar vídeo con HTML 5.
  
  Incrustar vídeo
  
  03:54
- Crearemos la ventana flotante en la que aparecerán los datos de pago.
  
  Ventana flotante
  
  03:12
Despedida del curso.

Despedida
- Repaso de los contenidos y despedida del formador.
  
  Despedida
  
  00:41

Crear un nuevo sitio

del curso: Maquetación web

Información sobre este video

Una lección de:

Información sobre este video

Other sites. Andere Seiten. Autres sites.