![Page 1: 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](https://reader035.vdocuments.co/reader035/viewer/2022070304/54dcd25b4979599e0a8b5a79/html5/thumbnails/1.jpg)
CLASE 4: SLICES Y DISEÑO
Tutorial de práctica
![Page 2: 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](https://reader035.vdocuments.co/reader035/viewer/2022070304/54dcd25b4979599e0a8b5a79/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader035.vdocuments.co/reader035/viewer/2022070304/54dcd25b4979599e0a8b5a79/html5/thumbnails/3.jpg)
Ejercicio - Clase 4
[IMG] TÍTULO [IMG]
Home | pagina 1 | pagina 2 | pagina 3
[IMG]
Estructura de diseño básico
![Page 4: 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](https://reader035.vdocuments.co/reader035/viewer/2022070304/54dcd25b4979599e0a8b5a79/html5/thumbnails/4.jpg)
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 1x17. Insertar tablas dentro de otras tablas
8. Insertar imágenes dentro de tabla
![Page 5: 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](https://reader035.vdocuments.co/reader035/viewer/2022070304/54dcd25b4979599e0a8b5a79/html5/thumbnails/5.jpg)
Ejercicio - Clase 4
1. Dibujar una imagen.
![Page 6: 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](https://reader035.vdocuments.co/reader035/viewer/2022070304/54dcd25b4979599e0a8b5a79/html5/thumbnails/6.jpg)
Recordatorio
2. Trazar líneas guías
![Page 7: 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](https://reader035.vdocuments.co/reader035/viewer/2022070304/54dcd25b4979599e0a8b5a79/html5/thumbnails/7.jpg)
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.
![Page 8: 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](https://reader035.vdocuments.co/reader035/viewer/2022070304/54dcd25b4979599e0a8b5a79/html5/thumbnails/8.jpg)
Recordatorio
4. Salvar optimizado
![Page 9: 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](https://reader035.vdocuments.co/reader035/viewer/2022070304/54dcd25b4979599e0a8b5a79/html5/thumbnails/9.jpg)
Recordatorio
4. Salvar imagen optimizada
![Page 10: 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](https://reader035.vdocuments.co/reader035/viewer/2022070304/54dcd25b4979599e0a8b5a79/html5/thumbnails/10.jpg)
Recordatorio
5. Abrir Dreamweaver Crear sitio nuevo Abrir documento hecho en Photoshop Crear documento nuevo (html)
![Page 11: 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](https://reader035.vdocuments.co/reader035/viewer/2022070304/54dcd25b4979599e0a8b5a79/html5/thumbnails/11.jpg)
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)
![Page 12: 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](https://reader035.vdocuments.co/reader035/viewer/2022070304/54dcd25b4979599e0a8b5a79/html5/thumbnails/12.jpg)
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.
![Page 13: 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](https://reader035.vdocuments.co/reader035/viewer/2022070304/54dcd25b4979599e0a8b5a79/html5/thumbnails/13.jpg)
Recordatorio
7. Insertar imágenes dentro de tabla
![Page 14: 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](https://reader035.vdocuments.co/reader035/viewer/2022070304/54dcd25b4979599e0a8b5a79/html5/thumbnails/14.jpg)
Recordatorio
El trabajo final se debe de ver como el diseño de fotoshop