CLASE 4: SLICES Y DISEÑO Tutorial de práctica. Ejercicio – Clase 4  Puntos importantes: 1. Evaluar el contenido 2. La navegación (menú) 3. Elementos.

Presentación del tema: "CLASE 4: SLICES Y DISEÑO Tutorial de práctica. Ejercicio – Clase 4  Puntos importantes: 1. Evaluar el contenido 2. La navegación (menú) 3. Elementos."— Transcripción de la presentación:

1 CLASE 4: SLICES Y DISEÑO Tutorial de práctica

2 Ejercicio – Clase 4  Puntos importantes: 1. Evaluar el contenido 2. La navegación (menú) 3. Elementos gráficos (imágenes)  Para los diseños web se va a trabajar: 1. Ancho: 960 px 2. Alto: 640 px 3. Resolución 72dpi 4. Configuración de color RGB

3 Ejercicio - Clase 4 [IMG] TÍTULO [IMG] Home | pagina 1 | pagina 2 | pagina 3 [IMG] Estructura de diseño básico

4 Ejercicio - Clase 4 1. Dibujar una imagen. 2. Trazar líneas guías 3. Cortar con las líneas guías 4. Salvar optimizado 5. Nuevo documento de Dreamweaver 6. Insertar tabla contenedor 1x1 7. Insertar tablas dentro de otras tablas 8. Insertar imágenes dentro de tabla

5 Ejercicio - Clase 4 1.Dibujar una imagen.

6 Recordatorio 2. Trazar líneas guías

7 Recordatorio 3. Cortar con las líneas guías  OJO: no deben quedar “sectores” o “Slices” grises, si aparecen significa que el cortado esta mal hecho.

8 Recordatorio 4. Salvar optimizado

9 Recordatorio 4. Salvar imagen optimizada

10 Recordatorio 5. Abrir Dreamweaver  Crear sitio nuevo  Abrir documento hecho en Photoshop  Crear documento nuevo (html)

11 Recordatorio 5. Insertar tabla contenedor1x1  Los anchos de las tablas deberán ir acorde al ancho del diseño a insertar  (OJO) Fijar ancho (herramienta de PX)

12 Recordatorio 6. Insertar tablas dentro de otras tablas según lo necesiten  Repetir el proceso de fijar el ancho en cada tabla insertada  Recordar que las tablas externas nos sirven de contenedores de las tablas internas.

13 Recordatorio 7. Insertar imágenes dentro de tabla

14 Recordatorio El trabajo final se debe de ver como el diseño de fotoshop