Download - Dreamweaver Cs6 Parte1
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
1
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
D R E A M W E A V E R C S 6
N D I C E D E T A L L A D O
UNIDAD 1. CONCEPTOS BSICOS DE DREAMWEAVER CS6
1.1. Qu es Dreamweaver CS6 1.2. Novedades de Dreamweaver CS6
HTML bsico 1.3. Editar pginas web 1.4. Cmo tener una pgina en Internet 1.5. Arrancar y cerrar Dreamweaver CS6 1.6. Abrir y guardar documentos
Compaginar dos sesiones 1.7. Mi primera pgina
UNIDAD 2. EL ENTORNO DE DREAMWEAVER CS6
2.1. La pantalla inicial 2.2. Las barras 2.3. Inspectores y paneles
Personalizar el rea de trabajo 2.4. Vistas de un documento 2.5. La ayuda
UNIDAD 3. CONFIGURAR UN SITIO LOCAL
3.1. Introduccin 3.2. Crear o editar un sitio web sin conexin a Internet 3.3. Abrir un sitio 3.4. Ver el sitio 3.5. Subir archivos al servidor 3.6. Propiedades del documento
Comprobar tamao para optimizar la carga 3.7. Los colores
UNIDAD 4. EL TEXTO: PROPIEDADES Y FORMATO
4.1. Caractersticas del texto 4.2. Listas 4.3. Caracteres especiales 4.4. Estilos CSS. Introduccin 4.5. Crear un estilo personalizado 4.6. Definir o editar un estilo
El Panel CSS 4.7. Aplicar un estilo 4.8. Hojas de estilos
UNIDAD 5. HIPERENLACES 5.1. Introduccin 5.2. Tipos de referencia 5.3. Crear enlaces
Configurar nuevos enlaces 5.4. Destino del enlace 5.5. Formato del enlace 5.6. Enlace a correo electrnico
Vnculos rotos
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
2
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
UNIDAD 6. IMGENES
6.1. Introduccin 6.2. Insertar una imagen
Formatos de imagen para web 6.3. Propiedades de una imagen
Mapas de imagen Cambiar formato y crear transparencias Programas de edicin de imgenes
6.4. Cambiar el tamao de una imagen 6.5. Imagen de sustitucin. Rollover 6.6. Barra de navegacin 6.7. Objetos inteligentes
Men CSS
UNIDAD 7. TABLAS
7.1. Introduccin 7.2. Insertar una tabla 7.3. Rellenar las celdas 7.4. Seleccionar elementos de una tabla 7.5. Formato de tabla 7.6. Formato CSS 7.7. Cambiar tamao de tabla y celdas 7.8. Aadir y eliminar filas y columnas 7.9. Anidar, dividir y combinar celdas 7.10. Modos de tabla 7.11. Adaptar webs a distintas resoluciones
UNIDAD 8. MARCOS
8.1. Introduccin 8.2. Crear marcos 8.3. Seleccionar marcos 8.4. Guardar 8.5. Configurar marcos 8.6. Contenido del marco
UNIDAD 9. FORMULARIOS
9.1. Introduccin 9.2. Elementos de formulario 9.3. Crear formularios 9.4. Validar formularios
UNIDAD 10. MULTIMEDIA
10.1. Pelculas Flash (SWF) 10.2. Sonido 10.3. Vdeos
UNIDAD 11. LAS PLANTILLAS
11.1. Introduccin 11.2. Crear plantillas 11.3. Establecer regiones editables en una plantilla 11.4. Basar pginas en una plantilla
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
3
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
UNIDAD 12. HTML DESDE DREAMWEAVER
12.1. Etiquetas 12.2. Entidades HTML
Listado de Entidades HTML 12.3. El inspector de cdigo 12.4. Completar las etiquetas 12.5. Contraer y expandir cdigo 12.6. Errores en el cdigo 12.7. Buscar y reemplazar
Expresiones Regulares Bsqueda en Etiquetas
UNIDAD 13. OTROS ELEMENTOS
13.1. Marquesinas 13.2. Fecha 13.3. Regla horizontal 13.4. Cdigo de otras pginas
UNIDAD 14. CAPAS
14.1. Introduccin 14.2. Insertar una capa 14.3. Formato de una capa 14.4. Capas prediseadas
UNIDAD 15. COMPORTAMIENTOS
15.1. Introduccin 15.2. Insertar un comportamiento 15.3. Mostrar-Ocultar elementos 15.4. Llamar JavaScript
Eventos
UNIDAD 16. COMPORTAMIENTOS AVANZADOS 16.1. Mensajes emergentes 16.2. Texto de la Barra de Estado 16.3. Carga Previa de Imgenes 16.4. Abrir Ventana del Navegador 16.5. Cambiar propiedades CSS 16.6. Comprobar Plug-ins 16.7. Mens de Salto
UNIDAD 17. ESTILOS CSS AVANZADOS
17.1. Aplicar estilos CSS 17.2. Sintaxis CSS 17.3. Selectores compuestos 17.4. Selectores de atributo 17.5. Pseudo-clases y Pseudo-elementos CSS 17.6. Orden de aplicacin de los estilos CSS 17.7. Controles de fuente 17.8. Espaciado y alineacin 17.9. Apariencia del texto 17.10. Controles de ratn 17.11. Controles de lista 17.12. Controles de fondo 17.13. Controles de margen interior y exterior
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
4
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
17.14. Bordes 17.15. Elementos flotantes 17.16. Controles de elementos de bloque y en lnea 17.17. Controles de posicin 17.18. Controles de visibilidad
UNIDAD 18. DISEO DE PGINA : MAQUETACIN WEB
18.1. Maquetar una pgina web 18.2. Tamao 18.3. Desbordamiento 18.4. Posicionamiento 18.5. Posicionamiento relativo 18.6. Posicionamiento absoluto 18.7. Posicionamiento flotante 18.8. Posicionamiento fijo 18.9. Ancho de la pgina, lquido o elstico 18.10. Maquetacin prediseada en Dreamweaver 18.11. Videotutoriales. Creando un sitio web completo
UNIDAD 19. SITIOS REMOTOS
19.1. Configurar un Sitio Remoto 19.2. El Panel Archivos 19.3. Sincronizar Sitios
UNIDAD 20. SERVIDOR DE PRUEBAS
20.1. Introduccin a PHP Bases de datos
20.2. Estructura PHP 20.3. Instalar un Servidor Local con WampServer 20.4. Configuracin inicial 20.5. Trabajar con un Servidor Local WampServer 20.6. Configurar un Servidor de Pruebas 20.7. Introduccin a phpMyAdmin 20.8. Crear una Base de Datos en phpMyAdmin 20.9. Crear una Tabla en phpMyAdmin 20.10. Insertar Datos en una Tabla 20.11. Modificar la estructura de la tabla 20.12. Modificar datos de una tabla 20.13. Establecer privilegios en phpMyAdmin
UNIDAD 21. PGINAS DINMICAS
21.1. Introduccin 21.2. Crear una conexin a la Base de Datos 21.3. Juegos de registros o RecordSets 21.4. Mostrar Datos Dinmicos 21.5. Repeticiones 21.6. Orden de Juegos de Registros 21.7. Filtrado de Juegos de Registros 21.8. Paginacin de Registros 21.9. Mostrar/Ocultar Regiones 21.10. Uso de Variables 21.11. Pginas Maestro-Detalle 21.12. Asistente de Insercin de Registros 21.13. Asistente de Actualizacin de Registros 21.14. Asistente de Eliminacin de Registros 21.15. Juegos de Registros Avanzados
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
5
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
UNIDAD 22. CMO CREAR UN BLOG
22.1. Introduccin 22.2. Estructura de datos 22.3. Interfaz pblica 22.4. Interfaz privada 22.5. Insertar nuevos elementos 22.6. Listado de elementos 22.7. Modificacin de elementos 22.8. Eliminacin de elementos 22.9. Restringir acceso
UNIDAD 23. XML Y RSS
23.1. Introduccin 23.2. Importar datos de un Archivo externo 23.3. Trabajar con elementos XML 23.4. Crear repeticiones 23.5. Ordenar elementos 23.6. Sentencias condicionales 23.7. Insertar un fragmento XSLT 23.8. Paso de Parmetros
UNIDAD 24. ACCESO A DATOS CON SPRY
24.1. Introduccin 24.2. Conjunto de datos XML 24.3. Crear una regin de Spry 24.4. Repeticin de Elementos 24.5. Listas de Repeticin 24.6. Mostrar Maestro - Detalle
UNIDAD 25. AJAX Y SPRY FRAMEWORK
25.1. Introduccin 25.2. Incluir Spry 25.3. Importar Datos 25.4. Definiendo regiones Spry 25.5. Mostrar informacin 25.6. Crear Repeticiones 25.7. Ordenar registros 25.8. Condicionales 25.9. Filtros 25.10. Eliminar filas repetidas 25.11. Actualizar la carga de un archivo XML 25.12. Modo Maestro/Detalle 25.13. Modo Maestro/Detalle con diferentes fuentes XML 25.14. Spry y estilos CSS 25.15. Importar Datos (II)
UNIDAD 26. SPRY Y FORMULARIOS
26.1. Introduccin 26.2. Validacin de campos de texto 26.3. Estados de validacin 26.4. Validacin de campos desplegables 26.5. Grupo de opciones 26.6. Casillas de verificacin
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
6
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
26.7. reas de texto 26.8. Contraseas 26.9. Campo de confirmacin
UNIDAD 27. CONTROLES SPRY AVANZADOS
27.1. Introduccin 27.2. Barra de mens 27.3. Navegacin por Fichas 27.4. Control Acorden 27.5. Panel con Contraccin 27.6. Cambiar Estilos CSS
Ejercicios paso a paso por Captulos
3. Crear un sitio web local 3. Crear nuevo documento y modificar sus propiedades 4. Insertar texto y modificar sus propiedades 4. Convertir texto en una lista 4. Redefinir el estilo de una etiqueta 4. Crear y aplicar una clase 4. Modificar el estilo de una lista 4. Exportar y vincular hojas de estilo 5. Crear un hiperenlace 5. Crear un vnculo de correo electrnico 6. Insertar una imagen 6. Crear Mapas de imagen 6. Crear Rollovers 7. Crear y rellenar una tabla 7. Modificar las propiedades de la tabla 7. Modificar el estilo de la tabla 7. Ajustar el tamao de la tabla 7. Combinar celdas 8. Crear y configurar marcos 9. Insertar elementos de formulario 10. Insertar un archivo de audio 11. Crear una plantilla 12. Buscar y reemplazar 13. Insertar la fecha de ltima actualizacin 14. Insertar una capa 15. Crear comportamiento 17. Crear una hoja de estilo CSS 17. Utilizando pseudo-elementos y clases 17. Controles de Fuente 17. Controles de Lista 17. Controles de Fondo 17. Controles de Mrgenes y Borde 17. Controles de Bloque 17. Controles de Posicin y visibilidad 20. Crear un alias en WampServer 20. Crear un Servidor de Prueba 20. Crear una Base de datos MySQL 20. Crear una tabla 20. Importar datos a una tabla 20. Asignar privilegios 21. Crear una conexin a base de datos 21. Crear un Recordset 21. Texto dinmico 21. Repeticin de texto dinmico 21. Ordenar un RecordSet 21. Filtrado de registros
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
7
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
21. Paginacin de registros 21. Recuento de registros 21. Ocultar/mostrar regiones 21. Enlaces con parmetros 21. Filtrar con parmetros 21. Insercin de registros 21. Utilizar sentencias SQL 22. Estructura de datos de un Blog 22. Interfaz Pblica 22. Creacin de un Men de Administracin 22. Insercin de elementos 22. Listado de elementos 22. Modificar elementos 22. Eliminar elementos 22. Restringir Acceso 23. Preparando el Servidor de Pruebas para XLS 23. Importar datos RSS 23. Enlaces con elementos 23. Repeticin de elementos 23. Ordenacin de elementos 23. Insertar XSLT en una pgina dinmica 23. Paso de parmetros 25. Crear un dataset 25. Crear una regin con informacin 25. Crear repeticiones de registros 25. Crear condiciones 25. Crear Filtros
Ejercicios propuestos por Captulos.
3. Configurar un sitio local 4. El texto: propiedades y formato 5. Hiperenlaces 6. Imgenes 7. Tablas 9. Formularios 10. Multimedia 11. Las plantillas 12. HTML desde Dreamweaver 13. Otros elementos 14. Capas 15. Comportamientos 16. Comportamientos avanzados 17. Estilos CSS Avanzados 18. Diseo de pgina. Maquetacin web 20. Servidor de Pruebas 21. Pginas dinmicas 22. Cmo crear un Blog 23. XML y RSS 24. Acceso a datos con Spry 25. AJAX y Spry Framework 26. Spry y Formularios 27. Controles Spry Avanzados
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
8
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Pruebas evaluativas por Captulos
1. Conceptos bsicos de Dreamweaver CS6
2. El entorno de Dreamweaver CS6
3. Configurar un sitio local
4. El texto: propiedades y formato
5. Hiperenlaces
6. Imgenes
7. Tablas
8. Marcos
9. Formularios
10. Multimedia
11. Las plantillas
12. HTML desde Dreamweaver
13. Otros elementos
14. Capas
15. Comportamientos
16. Comportamientos avanzados
17. Estilos CSS Avanzados
18. Diseo de pgina. Maquetacin web
19. Sitios remotos
20. Servidor de Pruebas
21. Pginas Dinmicas
22. Cmo crear un Blog
23. XML y RSS
24. Acceso a datos con Spry
25. AJAX y Spry Framework
26. Spry y Formularios
27. Controles Spry Avanzados
Videotutoriales por Captulos.
ndice de videotutoriales
1. Conceptos bsicos Ver en YouTube
2. El entorno de trabajo Ver en YouTube
2. Las vistas Ver en YouTube
2. La ayuda Ver en YouTube
3. Crear un sitio local Ver en YouTube
3. Las propiedades de la pgina Ver en YouTube
4. Estilo CSS de las etiquetas Ver en YouTube
4. Crear y aplicar clases CSS Ver en YouTube
5. Los hiperenlaces Ver en YouTube
6. Insertar una imagen Ver en YouTube
6. Objetos inteligentes Ver en YouTube
7. Insertar y modificar tablas Ver en YouTube
8. Insertar un marco Ver en YouTube
9. Crear formularios Ver en YouTube
10. Insertar elementos multimedia Ver en YouTube
11. Crear plantillas Ver en YouTube
12. HTML desde Dreamweaver Ver en YouTube
13. Insertar otros elementos Ver en YouTube
14. Insertar capas Ver en YouTube
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
9
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
15. Insertar comportamientos Ver en YouTube
16. Crear un men de salto Ver en YouTube
17. Estilos CSS Ver en YouTube
18. Maquetar una pgina web (1/2) Ver en YouTube
18. Maquetar una pgina web (2/2) Ver en YouTube
18. Crear un sitio web completo (1/4) Ver en YouTube
18. Crear un sitio web completo (2/4) Ver en YouTube
18. Crear un sitio web completo (3/4) Ver en YouTube
18. Crear un sitio web completo (4/4) Ver en YouTube
19. Configurar un sitio remoto Ver en YouTube
20. Crear una base de datos en phpMyAdmin Ver en YouTube
20. Editar registros con phpMyAdmin Ver en YouTube
21. Crear un juego de registros Ver en YouTube
21. Utilizar un juego de registros Ver en YouTube
21. Paginacin de registros Ver en YouTube
21. Insertar registros Ver en YouTube
21. Eliminar registros Ver en YouTube
22. Qu es un Blog? Ver en YouTube
23. Mostrar noticias de un RSS Ver en YouTube
24. Acceso a datos con Spry Ver en YouTube
25. Spry desde el cdigo Ver en YouTube
26. Validar formularios con Spry Ver en YouTube
27. Men y fichas con Spry Ver en YouTube
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
10
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
UNIDAD 1.
CONCEPTOS BSICOS DE DREAMWEAVER CS6
1.1. Qu es Dreamweaver CS6
Dreamweaver CS6 es un software fcil de usar que permite crear pginas web profesionales.
Las funciones de edicin visual de Dreamweaver CS6 permiten agregar rpidamente diseo y
funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc..,
de una forma muy sencilla y visual.
Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con
mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.
Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la pgina de
Adobe, la versin caduca al cabo de 30 das, pero seguro que te dar tiempo a entenderlo y decidir si
quieres adquirir la versin completa de este fantstico programa.
Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcas registradas
Dreamweaver y Adobe. aulaClic no tiene ninguna relacin con Adobe.
Las pginas web estn escritas en HTML. Si no conoces las caractersticas bsicas de HTML
puedes verlas aqu.
1.2. Novedades de Dreamweaver CS6
En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
11
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Compatibilidad con CMS integrada. Un sistema de gestin de contenidos (en ingls Content Management System, abreviado CMS) es in interfaz o programa que nos permite gestionar el contenido de un sitio web. Cada vez son ms usados, y ahora Dreamweaver integra con los principales, permitindonos crear nuestras pginas con la estructura adecuada.
Inspeccionar CSS. Ahora, con la opcin Inspeccionar, podemos ver claramente los mrgenes aplicados al elemento seleccionado, y qu propiedades le afectan, tanto si son propias, como heredadas de los elementos padre.
Integracin Adobe Browserlab. Adobe Browser Lab es un servicio en lnea de Adobe, que nos permite
comparar cmo se ve una misma pgina web en las distintas versiones de Internet Explorer, Firefox y Safari, bajo los sistemas operativos de Windows o Mac OS.
Este servicio es fcilmente accesible desde Dreamweaver, pero realmente cualquiera puede usarlo desde su pgina web.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
12
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Configuracin sencilla de sitios. Ahora resulta ms sencillo configurar nuestro sitio local y remoto.
Ya que se han simplificado las opciones esenciales, y distinguido ms las opciones avanzadas y poco importantes.
Sugerencias de cdigo. Ahora las sugerencias de cdigo incluyen nuestras clases personalizadas, y los comandos y funciones propios de los distintos CMS soportados.
Nueva interfaz de usuario. Dreamweaver CS6 presenta una nueva interfaz que permite cambiar
fcilmente de espacio de trabajo y adaptar los paneles de forma rpida y cmoda. Esta nueva interfaz
es muy parecida a los dems programas de Adobe, como Photoshop, Illustrator, etc. Existen distintos
espacios de trabajo adecuados para cada ocasin (clsico, programador, diseador, etc. ) pero
tambin tenemos la posibilidad de crear el nuestro propio de forma muy sencilla.
Vista en vivo. La Vista en vivo nos permite trabajar con una vista real, tal y como veramos la
pgina en un navegador. Si hemos incluido elementos interactivos en nuestra pgina, como mens
desplegables, mens tipo acorden, widgets, etc, podremos interactuar con ellos en la vista en vivo, de
la misma forma que lo haramos en un navegador.
Navegador de cdigo. La funcin de Navegador de cdigo muestra las fuentes de cdigo que
afectan a la seleccin que tengamos activa, pueden ser CSS (hojas de estilos en cascada), funciones
JavaScript externas, plantillas de Dreamweaver, archivos de origen de iFrame, etc.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
13
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
La nueva barra de Archivos relacionados muestra todos los archivos que de una forma u otra
contribuyen al diseo final de nuestra pgina, como hojas de estilo css, archivos javascript, etc.
Mediante esta nueva utilidad podemos pasar de un archivo a otro cmodamente y tener una visin
mucho ms clara de todos los archivos con los que estamos trabajando en nuestro sitio web.
Inspector de propiedades CSS. El hasta ahora Inspector de propiedades, queda dividido en
propiedades HTML (el que conocamos de otras versiones) y CSS. ste ltimo nos permite crear y
editar nuestros estilos de forma cmoda y sencilla.
Objetos inteligentes de imagen. Dreamweaver CS6 incluye la posibilidad de crear
objetos inteligentes de imagen. Ahora podemos incluir un archivo psd en las pginas web, de forma
que el archivo original de Photoshop y la imagen optimizada en Dreamweaver se mantienen
vinculados. Podemos redimensionar o cambiar caractersticas de los objetos inteligentes de imagen
directamente desde Dreamweaver.
Adobe InContext Editing. Mediante Adobe InContext Editing creamos regiones editables. De
esta forma los usuarios previamente habilitados podrn actualizar el contenido de estas regiones de la
pgina web directamente desde el navegador, sin necesidad de tener un editor de pginas web
instalado.
Software Subversion. Subversion es uno de los ms usados sistemas de control de versiones
para equipos de desarrollo. Dreamweaver CS6 es capaz de sincronizarse con el repositorio de
versiones, facilitando el trabajo a los profesionales que empleen este sistema.
Conjuntos de datos. Dreamweaver CS6 permite la creacin de pginas dinmicas de forma
sencilla, pudiendo utilizar tanto bases de datos como archivos XML, sin necesidad de conocer en
profundidad su funcionamiento. Resulta muy sencillo crear regiones dinmicas con la tecnologa Spry.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
14
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
1.3. Editar pginas web
Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los
documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML
deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo.
Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un editor
grfico. Al no utilizar un editor grfico cuesta mucho ms insertar cada uno de los elementos de la
pgina, al mismo tiempo que es ms complicado crear una apariencia profesional para la pgina, sobre
todo si no estamos demasiado familiarizados con el HTML. Aunque tambin es cierto que escribir el
cdigo nos da ms control sobre l, y sobre todo al principio, nos ayudar a aprenderlo rpidamente.
Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que
destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.
Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser
Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales
tienen la ventaja de ser gratuitos.
1.4. Cmo tener una pgina en Internet
Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con
servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del da. El precio por
disponer de espacio propio en el servidor depender de la empresa, del espacio en disco, volumen de
transferencia y otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio
de disco, lentitud y nombre de nuestra pgina precedido por el de la suya. Hay que tener tambin en
cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
15
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
espacios publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en
ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa,
aunque s es aceptable para una pgina personal, sobre todo al comienzo.
Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio,
tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en
registrar un nombre para nuestra pgina. Este nombre no puede estar repetido en Internet, ha de ser
nico, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con
distintas terminaciones, como por ejemplo, .net, .org, .es o .com.
En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra
pgina no ser ms que un archivo dentro de la de la empresa contratada.
A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero de
cuentas de correo electrnico propias que pueden habilitarse y si disponemos de una base de datos
para poder acceder a ella a travs de programacin va Web, aunque esto ltimo ser til slo para
usuarios avanzados.
Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com.
En cualquier caso, una vez que tengas tu espacio en Internet, darle contenido es muy
sencillo.
Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrs que
se encuentre a disposicin de todo el mundo en Internet.
Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu servidor
manteniendo la estructura del local. Es decir, debers subir todos los archivos tal y como aparecen
en tu disco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si no
lo haces de este modo, tu sitio experimentar fallos y enlaces que no funcionarn.
Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni
espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurars de que el
servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos que alojes en l.
Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los
nombres en minscula. Algunos servidores (los que utilizan linux) distinguen entre maysculas y
minsculas, por lo que si en tu pgina quieres mostrar la imagen foto1.jpg debers guardarla con ese
nombre y no como Foto1.jpg. Evitars horas perdidas buscando fallos.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
16
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
1.5. Arrancar y cerrar Dreamweaver CS6
Veamos las dos formas bsicas de arrancar Dreamweaver CS6.
Desde el botn Inicio (Windows Vista 7) situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men. Al colocar el cursor sobre Todos los programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Adobe Dreamweaver CS6 y haz clic sobre l para arrancar el programa.
Desde el icono de Dreamweaver CS6 del Escritorio .
Puedes arrancar Dreamweaver CS6 ahora para ir probando todo lo que te explicamos. Cuando
realices los ejercicios tambin puedes compaginar dos sesiones de la forma que puedas ver el tema
mientras utilizas Dreamweaver, como te explicamos aqu.
Para cerrar Dreamweaver CS6, podemos utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botn cerrar , en la esquina superior derecha, como en cualquier ventana de Windows.
Pulsar la combinacin de teclas Alt + F4.
Hacer clic sobre el men Archivo y elegir la opcin Salir.
Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te
pedir confirmacin para guardar o no cada uno de ellos.
1.6. Abrir y guardar documentos
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botn abrir de la barra de herramientas estndar (si est visible).
Pulsar la combinacin de teclas Ctrl + O.
Hacer clic sobre el men Archivo y elegir la opcin Abrir.
Hacer doble clic sobre el archivo en la ventana del sitio.
Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opcin Abrir con Adobe Dreamweaver CS6.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:
Hacer clic en el botn nuevo de la barra de herramientas estndar (si est visible).
Pulsar la combinacin de teclas Ctrl + N.
Hacer clic sobre el men Archivo y elegir la opcin Nuevo.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
17
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina en
blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos diseos ya creados que
podemos elegir, para nuestro primer ejemplo elegimos en Diseo ninguno. A continuacin pulsamos
el botn Crear.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botn Guardar de la barra de herramientas estndar.
Pulsar la combinacin de teclas Ctrl + S.
Hacer clic sobre el men Archivo y elegir la opcin Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente con varios
documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar
todo puedes realizar cualquiera de las siguientes operaciones.
Hacer clic en el botn Guardar todo de la barra de herramientas estndar.
Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.
Al tener varios documentos abiertos es fcil olvidarse de todas las modificaciones hechas en cada
uno de ellos. Debes tener mucho cuidado al utilizar la opcin guardar todo, ya que en ocasiones es
posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
18
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
que al principio no utilices esta opcin, al menos hasta que te hayas habituado a manejar el programa.
De todas formas, observa que cuando hay cambios sin guardar aparece un * tras el nombre del
documento .
1.7. Mi primera pgina
Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear una pgina
web sencilla, con varios estilos de texto, una imagen y un enlace a otra pgina. Crear esta pgina solo
te llevar unos pocos minutos, y sabrs cmo trabajar con los elementos bsicos con los que estn
hechas la mayora de las pginas web. Si nunca has hecho una pgina web, este es el momento para
descubrir lo fcil que es.
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior como
puede hacerse. Abre un documento nuevo y selecciona la Categora Pgina bsica, HTML, en la
columna Diseo dejamos la opcin por defecto: .
Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:
Una vez introducido el texto, vamos a modificar el ttulo y el color de fondo del documento.
Para ello podemos hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
19
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Entonces se abrir una ventana como la que aparece a continuacin:
En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color
azul.
Haz clic en Ttulo/Codificacin a la izquierda, y en el Ttulo escribe Mi primera pgina.
Para aplicar los cambios, pulsa sobre el botn Aceptar.
Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la carpeta donde
estamos creando nuestras pginas, habitualmente en una subcarpeta dedicada a las imgenes.
Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el
botn derecho del ratn sobre la imagen que queremos traer de Internet, se abre una ventana con una
opcin similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite
grabar dicha imagen en un fichero de nuestro disco duro. Ten en cuenta que si piensas publicar la
pgina en Internet, hay que respetar los derechos de autor de la imagen.
Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina web que
estamos creando. Gurdala en la carpeta dnde vas a guardar la pgina que acabas de crear.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
20
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Ahora vamos a insertar la imagen debajo de la segunda lnea de texto. En primer lugar, situamos el
cursor al final de la segunda lnea y creamos un salto de lnea (tecla Enter). Despus nos dirigimos al
men Insertar, opcin Imagen.
En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la que la habas
guardado, seleccionarla y pulsar Aceptar.
Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de
propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente
aspecto:
Si no te aparece, puedes mostrarlo a travs del men Ventana, opcin Propiedades.
Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es porque est contrado. Para
que te aparezca desplegado debes hacer doble clic en Propiedades.
Selecciona la primera lnea de texto. En el inspector de propiedades pulsa HTML y aplica el formato
Encabezado 1 (h1) seleccionando el valor Encabezado1 del cuadro Formato.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
21
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el icono CSS
a la izquierda.
Mediante el inspector de propiedades en Dreamweaver CS6 accedemos tanto a las propiedades de
CSS como a las propiedades de HTML.
Podemos decir que en una pgina web, HTML se encarga de estructurar el contenido, la
informacin, mientras que CSS se encarga de mostrar ese contenido con el formato adecuado.
Al utilizar el inspector de propiedades de CSS (Cascading Style Sheets), Dreamweaver aplica
formato al texto mediante estilo de hojas en cascada. Los estilos CSS ofrecen un mayor control sobre
el diseo de la pgina Web y reducen el tamao del archivo.
Selecciona la primera lnea. En Regla de destino selecciona Estilo en lnea, para aplicar el formato
solo al texto seleccionado. Tambin aplica el estilo de Fuente Arial, Helvetica, sans-serif, color azul
#009 y centra el texto, tal y como muestra la imagen siguiente:
Observa que hemos centrado el texto pulsando en el botn .
Selecciona la segunda lnea de texto, y seleccionando como antes < estilo en lnea >, marca los
botones para ponerlo en negrita y cursiva respectivamente.
Vamos a centrar tambin la imagen. Para ellos seleccinala. Lo que hay que centrar es el contenido
del prrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos
aparece la jerarqua de etiquetas. Haz clic sobre p.
Ahora, centra el prrafo como hemos visto hasta ahora, pulsando en .
Por ltimo vamos a crear el enlace. Selecciona el texto de la ltima lnea, y cambia el panel de
Propiedades a las propiedades de HTML.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
22
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
En el campo Vnculo, escribe la URL de la pgina a enlazar, como se ve en la imagen:
Por ltimo guarda el documento. Ya sabes
que puedes hacerlo a travs del men Archivo, desde la opcin Guardar.
Puedes llamar al documento como lo desees, pero la extensin ha de ser htm o html. Por ejemplo, lo
hemos llamado miprimerapagina.htm, y la hemos guardado en la misma carpeta que la imagen
descargada.
Ahora, puedes ver cmo se ve en tu navegador pulsando la tecla F12.
Si pulsas aqu podrs ver cmo debera haber quedado la pgina despus de haber seguido todos
los pasos anteriores. Compara esta pgina con la tuya, para ver si lo has hecho todo bien.
Prueba evaluativa de la Unidad 1
EJEMPLO DE DISEO
Esta es mi primera pgina.
Esta pgina nos servir para comprobar el funcionamiento de Dreamweaver.
A continuacin se muestra un enlace para acceder a otra web.
www.fiupla.edu.pe
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
23
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
UNIDAD 2.
EL ENTORNO DE DREAMWEAVER CS6
Vamos a ver cules son los elementos bsicos de Dreamweaver CS6, la pantalla, las barras, los
paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde
estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no sabemos
cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de empezar a crear
pginas web.
2.1. La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus componentes
fundamentales. As conoceremos los nombres de los diferentes elementos Y SERA mas fcil ententer
el resto del curso) puede no coninsidir con el ordenador ya que cad usuario puede decidir que
elementos quiere que se vean en cada momento y donde , como se vera mas adelante.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
24
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
2.2. Las barras
La barra de la aplicacin.
La barra la aplicacin es una novedad en Dreamweaver CS6. Si tenemos la ventana maximizada
veremos todos los elementos de la barra ocupando una sola lnea, si no, ocuparn dos lneas, como en
la imagen superior.
Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte inferior), varios
botones propios de la aplicacin, el conmutador de espacio de trabajo y una caja de bsquedas
para obtener ayuda on line.
Los botones propios de la aplicacin, que aparecen junto al icono, nos permiten (de derecha a
izquierda) cambiar entre la vista de diseo o cdigo, acceder a las extensiones que se pueden aadir,
o al administrador de sitios, que ya veremos.
Ms hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un
espacio de trabajo es la configuracin del entorno (paneles visibles y su disposicin) que podemos
guardar y cargar. Lo veremos ms adelante.
Los mens, estn agrupados en categoras.
Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes
elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son
accesibles a travs de los mens, aunque en ocasiones nos enven a los paneles.
Las pestaas de documento.
Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos permitir
cambiar de uno a otro fcilmente. Si junto al nombre aparece un *, indica que ese archivo tiene
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
25
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
cambios sin guardar. Podemos cerrar cada documento clicando en el aspa, o acceder a otras acciones
haciendo clic con el botn derecho, como Cerrar otros archivos.
Dreamweaver CS6 aade una novedad. Debajo de las pestaas encontramos los archivos a que
utiliza nuestra pgina, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con
un clic. Esto nos ahorrar bastante tiempo.
La barra de estado.
Esta barra la encontramos debajo de la ventana de documento, y nos da informacin sobre el
mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas.
Siguiendo hacia la derecha encontramos las herramientas de Seleccin, Mano (para desplazarse) y
Zoom. Y otros datos como el tamao de la ventana, el tamao de la pgina o su codificacin.
Hasta aqu las barras que siempre veremos en la aplicacin. A parte, existen otras que podemos ver
u ocultar desde el men Ver Barras de herramientas.
La barra de herramientas estndar.
La barra de herramientas estndar contiene iconos para realizar las acciones ms habituales del
men Archivo y Edicin. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge,
Guardar, Guardar todo, Imprimir el cdigo fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer.
La barra de herramientas de documento.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
26
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
La barra de herramientas de documento contiene iconos que nos permiten cambiar entre las
distintas vistas de edicin y la vista en vivo, acceder cmodamente al ttulo de la pgina, o realizar las
distintas opciones de validacin que nos ofrece el programa.
La barra de representacin de estilos.
Esta barra, mucho menos utilizada, nos permite ver la apariencia de nuestra web en distintos
dispositivos, si estamos utilizando hojas distintas que dependan del eso.
Como veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo
como otra barra de herramientas.
2.3. Inspectores y paneles
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen
como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y
opciones de un inspector cambian dependiendo del objeto seleccionado, mientras que el panel nos da
acceso a opciones generales.
A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los
paneles o inspectores. Vamos a ver los ms importantes.
El inspector de Propiedades
El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado,
permitindonos editarlas, por lo que se convierte en uno de los elementos ms utilizados en
Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrar su ubicacin,
dimensiones, peso, clase, etc...
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
27
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los
diferentes elementos de la pgina Web que estemos diseando.
El panel Insertar.
En el panel Insertar, encontramos todos los elementos que podemos encontrar en el men Insertar,
clasificados en categoras. Podemos emplearlo para insertar imgenes, enlaces, multimedia, tablas,
formularios... cualquier elemento que nuestra web necesite.
Como vemos en las imgenes, es posible configurar este panel para verlo como men, como panel
flotante o como una barra de herramientas integrada en la ventana de trabajo.
Personalizar el rea de trabajo es bastante intuitivo, pero si necesitas ayuda, te recomendamos este
avanzado .
2.4. Vistas de un documento
Podemos editar el documento con distintas vistas, que puedes cambiar travs de la barra de
documento:
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
28
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
La vista Diseo
La vista Diseo permite trabajar con el editor visual.
Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.
La vista Cdigo
La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo
fuente. No permite tener directamente una referencia visual de cmo va quedando el documento segn
se va modificando el cdigo.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
29
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseo.
La vista Dividir
La vista Dividir permite dividir la ventana en dos zonas: Cdigo y Diseo. La zona superior muestra
el cdigo fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este
cambio se aplica directamente sobre la otra.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
30
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
La vista en Vivo
La vista en Vivo es otra de las novedades que trae Dreamweaver CS6. Nos ofrece una vista del
resultado final no editable. A diferencia de la vista Diseo, que nos permite editar los elementos, esta
vista nos permite interactuar con ellos, tal como lo haramos con el navegador.
La funcin de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeos
cambios se previsualizan correctamente en el navegador.
No obstante, siempre hay que comprobar la pgina con los principales navegadores del mercado,
que sern los que emplearn nuestros visitantes. De hecho, a lo largo del curso vers cmo algunos
elementos se ven de forma muy distinta si los vemos en la vista de diseo, en la vista en vivo o en el
navegador.
La vista Cdigo en vivo
Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir,
pero sin que podamos editar el cdigo. Lo que hace es que al seleccionar partes de la web en la Vista
en vivo, se seleccione su correspondiente cdigo fuente.
2.5. La ayuda
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
31
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
A travs del men Ayuda puedes ir a varias opciones, veamos algunas de ellas:
Acceder al cuadro de dilogo de ayuda muy similar al de Windows donde puedes buscar por temas, por ndice o por contenido, si seleccionas la opcin Ayuda de Dreamweaver o simplemente pulsando F1.
Acceder a una Introduccin a InContext Editing de la pgina de Adobe, que muestra un resumen de esta herramienta.
Abrir el panel Referencia en el que encontrars la sintaxis y descripcin de las etiquetas HTML.
Acceder a Dreamweaver Support Center en la web.
Acceder al Foros en lnea de Adobe.
Adems, en la barra de aplicacin encontramos una caja de bsqueda. Al introducir los trminos de
la bsqueda y buscar, iremos a la ayuda online de Adobe.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
32
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
UNIDAD 3.
CONFIGURAR UN SITIO LOCAL
En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar las
propiedades de los documentos, como puede ser el color de fondo.
3.1. Introduccin
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo
similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas
que va a contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los
documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las
imgenes, las animaciones, archivos de tipos especfico, etc., se deben crear nuevas carpetas dentro
de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es
lo que se conoce como sitio local.
Despus se podrn copiar los archivos en un servidor web, en el denominado sitio remoto, lo
que equivale a publicar el sitio, de modo que la gente podr verlo en Internet.
Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del
sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto.
La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los
vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc.
La pgina inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando
se intenta acceder a una URL genrica, el servidor devuelve la pgina con ese nombre.
Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.es en el navegador, ste
intentara cargar la pgina http://www.aulaclic.com/index.htm, por lo que se producira un error en el
caso de que no existiera ninguna pgina con el nombre index.htm, y no se podra navegar por el sitio
a no ser que se escribiese exactamente http://www.aulaclic.es/nombrepagina.htm
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
33
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
3.2. Crear o editar un sitio web sin conexin a Internet
Una vez creadas las carpetas que formarn la estructura del sitio local, o por lo menos la carpeta
raz, ya es posible definir el nuevo sitio.
Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o directamente a Nuevo
sitio.
Recuerda que a travs del panel Archivos, se puede cambiar a cada uno de los sitios definidos.
Tambin podemos acceder desde el icono de acceso rpido de la barra de la aplicacin a la opcin
Administrar sitios o Nuevo sitio...
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
34
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene
la lista de sitios locales definidos con anterioridad.
Por supuesto, pueden existir varios sitios locales en un mismo ordenador.
Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la misma
ventana en la que definir o modificar las caractersticas del sitio.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
35
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Las opciones del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda.
Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo
clic en ella.
Vamos a ver los datos que hay que editar para la categora Datos locales, que ser lo nico que
empleemos de momento.
Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo en la lista de sitios.
La Carpeta raz local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no.
Estas dos caractersticas son las imprescindibles para definir un sitio local. El resto son opcionales, y
de momento no nos interesan.
Las dems opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y
no es necesario establecer los datos del servidor en el que estar el sitio remoto.
Aunque s destacaremos la opcin Usar vnculos de distincin entre maysculas y minsculas.
Ya comentamos, que aunque en nuestro equipo no por trabajar en Windows, muchos servidores
distinguen entre maysculas y minsculas. As Dreamweaver tambin lo har.
Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.
Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar la pestaa
Bsicas, en vez de la pestaa Avanzadas.
3.3. Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios....
seleccionar el sitio de la lista de sitios y pulsar sobre el botn Listo.
Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el men
desplegable Archivos.
Para practicar puedes realizar el Ejercicio paso a paso Crear un sitio web local.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
36
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Unidad 3.
Ejercicio paso a paso: Crear un sitio web local
Objetivo
Practicar las operaciones que hay que realizar para crear un sitio sin conexin a Internet.
En cada tema hay ejercicios paso a paso y ejercicios propuestos, en ambos casos es importante
que realices los ejercicios por orden, sin saltarte ninguno. Estos ejercicios estn diseados para ir
construyendo una pgina web completa y si intentas realizar un ejercicio sin haber hecho los anteriores
puede que no veas un resultado muy coherente o no puedas seguir el ejercicio.
Nota: Si es la primera vez que realizas los ejercicios, recuerda que encontrars todos los archivos
necesarios en la carpeta de ejercicios. Esta carpeta se incluye con los cursos de pago, pero tambin
puede ser descargada gratuitamente por cualquier usuario registrado en aulaClic.
Ejercicio
1. Crea una carpeta en tu disco duro, dentro de la carpeta ejercicios donde guardar los archivos de los distintos que vayamos creando. Llmala mis_sitios.
2. Copia a ella la carpeta cocina que encontrars en la carpeta ejercicios del curso.
3. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
4. Haz clic sobre el men Sitio.
5. Elige la opcin Administrar sitios. Se abrir una nueva ventana.
6. Selecciona el botn Nuevo..., y selecciona la opcin Sitio. Se abrir una nueva ventana.
7. Selecciona la pestaa Avanzadas de la nueva ventana.
8. Selecciona Datos locales en Categora.
9. En Nombre del sitio escribe Cocina.
10. En Carpeta raz local busca la carpeta cocina que acabas de copiar, y que se encuentra dentro de la carpeta mis_sitios. Seleccinala. Puedes hacerlo a travs del botn con forma de carpeta.
11. En Carpeta predeterminada de imgenes busca la carpeta imagenes, que se encuentra dentro de la carpeta cocina, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta.
12. Haz clic sobre el botn Aceptar y sobre el botn Listo.
A partir de este momento, realizando los ejercicios paso a paso, vamos a crear una pgina como la
que aparece si pulsas aqu.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
37
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
3.4. Ver el sitio
El panel Archivos (men Ventana Archivos o tecla F8) es uno de los paneles ms importantes
de Dreamweaver, ya que nos da acceso a los archivo del sito.
En este caso vemos todos los documentos creados en nuestro sitio buscar.htm, paraplantilla.htm,
platossemana.htm, postresemana.htm y las carpetas imagenes y varios.
Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una vista a
otra hay que pulsar sobre el botn que aparece en la parte superior del panel y de la ventana.
Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el del servidor),
y poder, por ejemplo, sincronizar los archivos, o compararlos. Tambin el servidor de pruebas o las
bases de datos.
En esta imagen, se visualiza el remoto (a la izquierda) todava vaco, y el sitio local (a la derecha)
con nuestros archivos.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
38
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Dreamweaver guarda la cach de nuestro sitio, cmo se organizan los archivos y se relacionan entre
ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde Dreamweaver,
automticamente actualizar todas las referencias a ese archivo (enlaces desde otras pginas,
origen de la imagen, etc).
En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las pginas no se mostrarn
correctamente: no aparecern imgenes, no funcionarn enlaces, etc, ya que Dreamweaver
simplemente no encontrar la pgina.
Al modificar algn objeto que es referenciado por algn otro documento, se muestra una ventana
similar a sta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser
actualizados para que no se produzcan los problemas antes mencionados.
Simplemente hay que pulsar sobre el botn Actualizar, aunque esto depender de si tenemos
configurada la opcin Mensaje al actualizar vnculos si movemos archivos. Lo cual podemos
establecer desde el men Edicin, opcin Preferencias, categora General.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
39
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
3.5. Subir archivos al servidor
Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) debers
subir los archivos al sitio que hayas contratado o conseguido gratuitamente.
Algunos sitios gratuitos slo permiten que subas archivos va web, por lo que debers ir subiendo
uno a uno cada archivo y creando las carpetas t mismo. Este proceso puede hacerse muy largo y
debes tener mucho cuidado en mantener la estructura tal y como se encuentra en tu carpeta del
disco duro. Si no los enlaces no funcionarn correctamente, y es posible que algunas imgenes no se
muestren.
Para subir los archivos va web debers seguir las instrucciones que te proporcionar tu servidor.
La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos
gratuitos. Esta forma es, de lejos, mucho mejor que la anterior.
Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que en el Explorador de
Windows) y, obviamente, nos es mucho ms til para subir los archivos.
Uno de los programas gratuitos ms utilizados es FileZilla, desde su pgina web podrs
descargarte el programa y su traduccin tu idioma.
Una vez instalado, abre el programa y haz clic en Archivo Gestor de sitios y luego en Nuevo
sitio para configurar un nuevo sitio FTP.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
40
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Aqu debers introducir los datos que te facilit el servidor dnde vas a alojar tus pginas: Servidor,
Usuario y Contrasea.
Rellena los campos y haz clic en Conectar. Se conectar automticamente y podrs ver una
carpeta donde podrs copiar los archivos que hayas creado.
La parte central de la pantalla estar dividida en dos columnas. A la izquierda, la marcada como
Sitio local, nos permite explorar la estructura de archivos y carpetas de nuestro sitio. A la derecha
encontramos Sitio remoto, con los archivos ubicados en el servidor FTP. Se puede usar el
FileZilla
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
41
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Ahora no tenemos ms que arrastrar los archivos del sitio local al remoto para subirlos, o del remoto
al local, para descargarlos al equipo.
Vers como el programa empieza a copiar la informacin de tu disco a Internet.
Cuando haya finalizado, slo tendrs que introducir tu direccin de Internet en la barra de
direcciones de tu navegador (Firefox, Internet Explorer...) y vers el sitio en Internet!
Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor.
Busca la carpeta public_html y sube tus archivos all.
3.6. Propiedades del documento
Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo formato,
es decir, que tengan el mismo color de fondo, de fuente, etc.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
42
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Puede definirse el formato de cada una de las pginas a travs del cuadro de dilogo Propiedades
de la pgina.
Este cuadro se puede abrir de tres modos diferentes:
Pulsar la combinacin de teclas Ctrl + J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del men contextual la opcin Propiedades de la pgina.
Se abrir el cuadro de dilogo siguiente:
Las propiedades estn organizadas en categoras.
En la categora Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades:
Fuente de pgina: es el tipo de letra que le aplicaremos al texto.
Tamao: es el tamao 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 segn 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.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
43
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita, seleccionamos la opcin no-repeat. Si queremos que se repita o dejamos la opcin en blanco o seleccionamos la opcin repeat. Si queremos que se repita solo en horizontal seleccionamos la opcin repeat-x y si queremos que se repita en vertical, entonces seleccionamos repeat-y.
Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la pgina y la ventana del navegador.
En la categora Apariencia (HTML), como vemos en la imagen siguiente, encontramos las
propiedades:
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 segn 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.
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.
Texto: es el color de la fuente.
Vnculos: es el color que mostrar el texto de los vnculos.
Vnculos visitados: es el color que mostrar el texto de los vnculos visitados.
Vnculos activos: es el color que mostrar el vnculo cuando el cursor del ratn hace clic sobre el mismo.
Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la pgina y la ventana del navegador.
Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que CSS
aplica nuestra configuracin utilizando reglas de estilo, mientras que HTML lo hace con atributos
HTML. Estos ltimos estn cayendo en desuso, ya que se tiende a limitar el HTML al contenido, y no al
diseo. Por eso, te desaconsejamos su uso.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
44
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
En la categora Vnculos (CSS) encontramos las propiedades:
Fuente de vnculo: es el tipo de letra que mostrar el texto del vnculo.
Tamao: es el tamao del texto de los vnculos.
Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y los vnculos que sirven de enlace a otras pginas.
Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos vnculos ya han sido visitados o no.
Vnculos de sustitucin: es el color del texto del vnculo cuando situamos el ratn encima del vnculo.
Vnculos activos: es el color de los vnculos activos.
Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado, con esta opcin podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.
En la categora Encabezados (CSS) encontramos la propiedad:
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
45
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
Fuente de encabezado: permite establece el tipo de fuente de los encabezados.
El resto propiedades hacen referencia al estilo cursiva o negrita, as como al tamao y color que
queremos aplicar a cada tipo de encabezado.
En la categora Ttulo/Codificacin encontramos la propiedad:
Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la ventana de documento de Dreamweaver
En la categora Imagen de rastreo encontramos las propiedades:
Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo se mostrar en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla grfica sobre la que crear el documento.
Transparencia: permite establecer la opacidad de la imagen de rastreo.
Hay que tener cuidado de no crear pginas que tarden mucho tiempo en cargarse en el navegador.
Para ver cmo comprobar el tamao de los documentos, pulsa aqu .
3.7. Los colores
Para asignar colores es posible desplegar una paleta de colores como sta. Al seleccionar un color
de estas paletas, se muestra el valor hexadecimal del color en la parte superior.
Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. stos
son los colores que se muestran de la misma forma en cualquier navegador bajo cualquier sistema
operativo.
Esto no quiere decir que slo podamos utilizar estos colores. Podemos personalizarlos a travs del
botn de la parte superior de la paleta.
Los colores pueden asignarse a travs de los botones: .
Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin en
algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o
tablas), como es el caso de la ventana de Propiedades de la pgina, que vimos en este tema.
-
Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8
46
Ing. CIP Herberth Aranda Rojas [email protected]
Porq
ue d
e T
al manera
Amo D
ios
al M
undo q
ue h
a d
ado a
su H
ijo U
nignito p
ara
que
Todo A
quel que
en E
l Cre
a N
o s
e P
ierd
a M
as
Tenga V
ida E
tern
a.
Jn.
3:1
6
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , lo que
hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el nmero
hexadecimal del color en el recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con
valor #39F, el botn quedara del siguiente modo: .
En la web, los colores se representan por la cantidad que contienen de los colores primarios aditivos
(Rojo, Verde y Azul).
Para indicar la cantidad de cada uno, se utilizan nmeros hexadecimales, que van del 0 a la F
(A=10, B=11, ..., F=16).
El valor mnimo (00) indica la ausencia total de ese color, y el mximo (FF) su intensidad total.
Para indicar que nos referimos a un color, utilizamos el smbolo # la principio del cdigo.
Por tanto, podemos definir un color como #F7F0E2 donde el primer par