Cur Sode Dreamweaver Cs 6

aulaClic. Curso de Curso Dreamweaver CS6. ndice

Cmo utilizar este curso.

1. Conceptos bsicos deDreamweaver CS6 10. Multimedia 19. Sitios remotos

2. El entorno de Dreamweaver CS5 11. Las plantillas 20. Servidor de Pruebas3. Configurar un sitio local 12. HTML desde Dreamweaver 21. Pginas dinmicas4. El texto: propiedades y formato 13. Otros elementos 22. Cmo crear un Blog5. Hiperenlaces 14. Capas 23. XML y RSS6. Imgenes 15. Comportamientos 24. Acceso a datos con Spry7. Tablas 16. Comportamientos avanzados 25. AJAX y Spry Framework8. Marcos 17. Estilos CSS Avanzados 26. Spry y Formularios

9. Formularios 18. Diseo de pgina. Maquetacinweb 27. Controles Spry Avanzados

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 CS61.2. Novedades de Dreamweaver CS61.3. Editar pginas web1.4. Cmo tener una pgina en Internet1.5. Arrancar y cerrar Dreamweaver CS51.6. Abrir y guardar documentos1.7. Mi primera pginaHTML bsicoCompaginar dos sesiones

Unidad 2. El entorno de Dreamweaver CS5

2.1. La pantalla inicial2.2. Las barras2.3. Inspectores y paneles2.4. Vistas de un documento2.5. La ayudaPersonalizar el rea de trabajo

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 2

Unidad 3. Configurar un sitio local

3.1. Introduccin3.2. Crear o editar un sitio web sin conexin a Internet3.3. Abrir un sitio3.4. Ver el sitio3.5. Subir archivos al servidor3.6. Propiedades del documento3.7. Los coloresComprobar tamao para optimizar la carga

Unidad 4. El texto: propiedades y formato

4.1. Caractersticas del texto4.2. Listas4.3. Caracteres especiales4.4. Estilos CSS. Introduccin4.5. Crear un estilo personalizado4.6. Definir o editar un estilo4.7. Aplicar un estilo4.8. Hojas de estilosEl panel Estilos CSS

Unidad 5. Hiperenlaces

5.1. Introduccin5.2. Tipos de referencia5.3. Crear enlaces5.4. Destino del enlace5.5. Formato del enlace5.6. Enlace a correo electrnicoConfigurar nuevos enlacesVnculos rotos

Unidad 6. Imgenes

6.1. Introduccin6.2. Insertar una imagen6.3. Propiedades de una imagen6.4. Cambiar el tamao de una imagen6.5. Imagen de sustitucin. Rollover6.6. Objetos inteligentesFormatos de imagen para webMapas de imagenCambiar formato y crear transparenciasProgramas de edicin de imgenesMen CSS


Unidad 7. Tablas

7.1. Introduccin7.2. Insertar una tabla7.3. Rellenar las celdas7.4. Seleccionar elementos de una tabla7.5. Formato de tabla7.6. Formato CSS7.7. Cambiar tamao de tabla y celdas7.8. Aadir y eliminar filas y columnas7.9. Anidar, dividir y combinar celdas7.10. Modos de tabla7.11. Adaptar webs a distintas resoluciones

Unidad 8. Marcos

8.1. Introduccin8.2. Crear marcos8.3. Seleccionar marcos8.4. Guardar8.5. Configurar marcos8.6. Contenido del marco

Unidad 9. Formularios

9.1. Introduccin9.2. Elementos de formulario9.3. Crear formularios9.4. Validar formularios

Unidad 10. Multimedia

10.1. Pelculas Flash (SWF)10.2. Sonido10.3. Vdeos

Unidad 11. Las plantillas

11.1. Introduccin11.2. Crear plantillas11.3. Establecer regiones editables en una plantilla11.4. Basar pginas en una plantilla


Unidad 12. HTML desde Dreamweaver

12.1. Etiquetas12.2. Entidades HTML12.3. El inspector de cdigo12.4. Completar las etiquetas12.5. Contraer y expandir cdigo12.6. Errores en el cdigo12.7. Buscar y reemplazarListado de Entidades HTMLExpresiones RegularesBsqueda en Etiquetas

Unidad 13. Otros elementos

13.1. Fuentes web13.2. Marquesinas13.3. Fecha13.4. Regla horizontal13.5. Cdigo de otras pginas

Unidad 14. Capas

14.1. Introduccin14.2. Insertar una capa14.3. Formato de una capa

Unidad 15. Comportamientos

15.1. Introduccin15.2. Insertar un comportamiento15.3. Mostrar-Ocultar elementos15.4. Llamar JavaScriptEventos

Unidad 16. Comportamientos avanzados

16.1. Mensajes emergentes16.2. Carga previa de imgenes16.3. Abrir nueva ventana del navegador16.4. Cambiar propiedades CSS16.5. Comprobar Plug-ins16.6. Mens de salto16.7. Transiciones


Unidad 17. Estilos CSS Avanzados

17.1. Aplicar estilos CSS17.2. Sintaxis CSS17.3. Selectores compuestos17.4. Selectores de atributo17.5. Pseudo-clases y Pseudo-elementos CSS17.6. Orden de aplicacin de los estilos CSS17.7. Controles de fuente17.8. Espaciado y alineacin17.9. Apariencia del texto17.10. Controles de ratn17.11. Controles de lista17.12. Controles de fondo17.13. Controles de margen interior y exterior17.14. Bordes17.15. Elementos flotantes17.16. Controles de elementos de bloque y en lnea17.17. Controles de posicin17.18. Controles de visibilidadInspeccin de CSS

Unidad 18. Diseo de pgina. Maquetacin web

18.1. Maquetar una pgina web18.2. Tamao18.3. Desbordamiento18.4. Posicionamiento18.5. Posicionamiento relativo18.6. Posicionamiento absoluto18.7. Posicionamiento flotante18.8. Posicionamiento fijo18.9. Ancho de la pgina, lquido o elstico18.10. Maquetacin prediseada en Dreamweaver18.11. Videotutoriales. Creando un sitio web completo18.12. Diseo de cuadrcula fluida con Dreamweaver

Unidad 19. Sitios remotos

19.1. Configurar un Sitio Remoto19.2. El panel Archivos19.3. Sincronizar Sitios


Unidad 20. Servidor de Pruebas

20.1. Introduccin a PHP20.2. Estructura PHP20.3. Instalar un servidor local con WampServer20.4. Configuracin inicial20.5. Trabajar con un servidor local WampServer20.6. Configurar un servidor de pruebas20.7. Introduccin a phpMyAdmin20.8. Crear una base de datos en phpMyAdmin20.9. Crear una tabla en phpMyAdmin20.10. Insertar datos en una tabla20.11. Modificar la estructura de la tabla20.12. Modificar datos de una tabla20.13. Establecer privilegios en phpMyAdminBases de datos

Unidad 21. Pginas dinmicas

21.1. Introduccin21.2. Crear una conexin a la base de datos21.3. Juegos de registros o RecordSets21.4. Mostrar datos dinmicos21.5. Repeticiones21.6. Orden de juegos de registros21.7. Filtrado de juegos de registros21.8. Paginacin de Registros21.9. Mostrar/Ocultar regiones21.10. Uso de variables21.11. Pginas Maestro-Detalle21.12. Asistente de insercin de registros21.13. Asistente de actualizacin de registros21.14. Asistente de eliminacin de registros21.15. Juegos de registros avanzados

Unidad 22. Cmo crear un Blog

22.1. Introduccin22.2. Estructura de datos22.3. Interfaz pblica22.4. Interfaz privada22.5. Insertar nuevos elementos22.6. Listado de elementos22.7. Modificacin de elementos22.8. Eliminacin de elementos22.9. Restringir acceso


Unidad 23. XML y RSS

23.1. Introduccin23.2. Importar datos de un archivo externo23.3. Trabajar con elementos XML23.4. Crear repeticiones23.5. Ordenar elementos23.6. Sentencias condicionales23.7. Insertar un fragmento XSLT23.8. Paso de parmetros

Unidad 24. Acceso a datos con Spry

24.1. Introduccin24.2. Conjunto de datos XML24.3. Crear una regin de Spry24.4. Repeticin de elementos24.5. Listas de repeticin24.6. Mostrar Maestro - Detalle

Unidad 25. AJAX y Spry Framework

25.1. Introduccin25.2. Incluir Spry25.3. Importar datos25.4. Definiendo regiones Spry25.5. Mostrar informacin25.6. Crear repeticiones25.7. Ordenar registros25.8. Condicionales25.9. Filtros25.10. Eliminar filas repetidas25.11. Actualizar la carga de un archivo XML25.12. Modo Maestro/Detalle25.13. Modo Maestro/Detalle con diferentes fuentes XML25.14. Spry y estilos CSS25.15. Importar datos (II)


Unidad 26. Spry y Formularios

26.1. Introduccin26.2. Validacin de campos de texto26.3. Estados de validacin26.4. Validacin de campos desplegables26.5. Grupo de opciones26.6. Casillas de verificacin26.7. reas de texto26.8. Contraseas26.9. Campo de confirmacin

Unidad 27. Controles Spry Avanzados

27.1. Introduccin27.2. Barra de mens27.3. Navegacin por Fichas27.4. Control Acorden27.5. Panel con Contraccin27.6. Cambiar Estilos CSS

Ejercicios paso a paso3. Crear un sitio web local3. Crear nuevo documento y modificar suspropiedades4. Insertar texto y modificar sus propiedades4. Convertir texto en una lista4. Redefinir el estilo de una etiqueta4. Crear y aplicar una clase4. Modificar el estilo de una lista4. Exportar y vincular hojas de estilo5. Crear un hiperenlace5. Crear un vnculo de correo electrnico6. Insertar una imagen6. Crear Mapas de imagen6. Crear Rollovers7. Crear y rellenar una tabla7. Modificar las propiedades de la tabla7. Modificar el estilo de la tabla7. Ajustar el tamao de la tabla7. Combinar celdas8. Crear y configurar marcos9. Insertar elementos de formulario10. Insertar un archivo de audio

20. Crear una tabla20. Importar datos a una tabla20. Asignar privilegios21. Crear una conexin a base de datos21. Crear un Recordset21. Texto dinmico21. Repeticin de texto dinmico21. Ordenar un RecordSet21. Filtrado de registros21. Paginacin de registros21. Recuento de registros21. Ocultar/mostrar regiones21. Enlaces con parmetros21. Filtrar con parmetros21. Insercin de registros21. Utilizar sentencias SQL22. Estructura de datos de un Blog22. Interfaz Pblica22. Creacin de un Men de Administracin22. Insercin de elementos22. Listado de elementos


11. Crear una plantilla12. Buscar y reemplazar13. Insertar la fecha de ltima actualizacin14. Insertar una capa15. Crear comportamiento17. Crear una hoja de estilo CSS17. Utilizando pseudo-elementos y clases17. Controles de Fuente17. Controles de Lista17. Controles de Fondo17. Controles de Mrgenes y Borde17. Controles de Bloque17. Controles de Posicin y visibilidad20. Crear un alias en WampServer20. Crear un Servidor de Prueba20. Crear una Base de datos MySQL

22. Modificar elementos22. Eliminar elementos22. Restringir Acceso23. Preparando el Servidor de Pruebas paraXLS23. Importar datos RSS23. Enlaces con elementos23. Repeticin de elementos23. Ordenacin de elementos23. Insertar XSLT en una pgina dinmica23. Paso de parmetros25. Crear un dataset25. Crear una regin con informacin25. Crear repeticiones de registros25. Crear condiciones25. Crear Filtros

Ejercicios propuestos Pruebas evaluativas

3. Configurar un sitio local4. El texto: propiedades y formato5. Hiperenlaces6. Imgenes7. Tablas9. Formularios10. Multimedia11. Las plantillas12. HTML desde Dreamweaver13. Otros elementos14. Capas15. Comportamientos16. Comportamientos avanzados17. Estilos CSS Avanzados18. Diseo de pgina. Maquetacin web20. Servidor de Pruebas21. Pginas dinmicas22. Cmo crear un Blog23. XML y RSS24. Acceso a datos con Spry25. AJAX y Spry Framework26. Spry y Formularios27. Controles Spry Avanzados

1. Conceptos bsicos de Dreamweaver CS62. El entorno de Dreamweaver CS53. Configurar un sitio local4. El texto: propiedades y formato5. Hiperenlaces6. Imgenes7. Tablas8. Marcos9. Formularios10. Multimedia11. Las plantillas12. HTML desde Dreamweaver13. Otros elementos14. Capas15. Comportamientos16. Comportamientos avanzados17. Estilos CSS Avanzados18. Diseo de pgina. Maquetacin web19. Sitios remotos20. Servidor de Pruebas21. Pginas dinmicas22. Cmo crear un Blog23. XML y RSS24. Acceso a datos con Spry25. AJAX y Spry Framework26. Spry y Formularios27. Controles Spry Avanzados


Cmo utilizar este curso

Todos los cursos de aulaClic siguen la misma didctica, si ya has realizado alguno de nuestros cursos en pdfpuedes saltarte esta pgina. Si no, es conveniente que leas estas instrucciones antes de empezar el curso.

Navegacin

Si pretendes seguir el curso visualizndolo por pantalla, el curso incluye enlaces y marcadores que permitenmoverte ms cmodamente por el texto.

Al principio del curso tienes el ndice detallado donde encontrars todos las unidades con sus apartados,todos los ejercicios y todas las evaluaciones, haciendo clic sobre el apartado que quieras te desplazars almismo. En medio del texto tambin tienes enlaces tal como te describimos ms adelante.

Y finalmente puedes utilizar los marcadores. En el panel de marcadores,situado normalmente a la izquierda, aparecen enlaces a los distintos temas ybloques que forman el curso. Cada uno de ellos se puede expandir pulsandoen +, mostrando ms marcadores, correspondientes a apartados de lasunidades o secciones concretas.

Estructura del curso

Al seguir manuales de informtica cada lector va saltndose los prrafos que no le interesan porque esinformacin muy compleja para su nivel o porque son cosas demasiado bsicas para su nivel. Este curso tratade aliviar este problema organizando los contenidos por niveles. Hemos establecido tres niveles: bsico,medio y avanzado.

Cmo se navega por estos niveles? El curso tiene una estructura troncal que es el nivel medio, pero en lospuntos que se ha considerado oportuno tenemos una referencia a una pgina de otro nivel que se puedeconsultar o no segn criterio del lector.

En un apartado del nivel medio te puedes encontrar en algunos casos con este icono que te indica queen este punto puedes consultar una pgina de nivel bsico donde se te explicarn conceptos ms sencillosrelacionados con el tema. En otras ocasiones puedes encontrar este icono para ir al nivel avanzado,donde se te explicarn opciones ms avanzadas.

Las pginas bsicas y avanzadas las tienes en los bloques "Pginas bsicas" y "Pginas avanzadas"despus del bloque principal.

Adems, en cada una de estas pginas tienes un enlace para volver al punto del nivel medio del que se parti.

Los rtulos de las pginas aparecen de un color u otro dependiendo del nivel, estos son los colores:

Nivel bsico Nivel medio Nivel avanzado


As sabrs en todo momento en qu nivel te encuentras.

Si es la primera vez que utilizas el programa del que trata el curso, te aconsejamos dejar los nivelesavanzados para una segunda lectura.

Nomenclatura.

De este color se pondrn los comandos que el usuario puede ejecutar y los nombres de las opciones;as el texto o lo que hay que escribir en los comandos, as los conceptos ms importantes, y finalmentelos nombres de ventanas o apartados tendrn este aspecto.

Ejercicios y evaluaciones

En las unidades encontrars dos tipos de ejercicios:

Ejercicios paso a paso, los vers sealados con esta imagen , son ejercicios que te permiten practicarlos conceptos que se acaban de explicar. En estos ejercicios te explicamos paso a paso lo que tienes quehacer y slo tienes que seguir las indicaciones. Te aconsejamos realizarlo en cuanto te lo encuentres. Estosejercicios los tienes agrupados en el bloque "Ejercicios paso a paso".

Ejercicios propuestos, los vers sealados con esta imagen , son ejercicios que aparecen al final de launidad y permiten recordar lo estudiado a lo largo de la unidad. En estos ejercicios te planteamos el ejercicio sindecirte cmo lo tienes que resolver. Tienes que intentar resolverlo recordando lo que has estudiado en la unidady consultando la teora. Si no sabes cmo resolverlo, al final del ejercicio encontrars un enlace a una pginacon la solucin o indicaciones sobre cmo resolverlo. Estos ejercicios los tienes agrupados en el bloque"Ejercicios propuestos" y las soluciones en el bloque "Ayuda a los ejercicios propuestos".

Es importante realizar los ejercicios en el mismo orden que aparecen en el curso ya que algunos utilizanarchivos que se crean en ejercicios anteriores. Otros archivos, te los proporcionamos nosotros, en la carpetaejercicios como te indicaremos en los primeros temas del curso.

Pruebas evaluativas consisten en un formulario de tipo test sobre el contenido de la unidad. Al final de lapgina encontrars un enlace a una pgina con la solucin. Estas pruebas las tienes agrupadas en el bloque"Pruebas evaluativas" y las soluciones en el bloque "Pruebas evaluativas. Soluciones."

Preguntas.

Este curso est extrado de la pgina web www.aulaclic.es. Si tienes alguna duda o pregunta puedesplantearla en el foro de aulaClic.

NOTA: Debido a las caractersticas del formato PDF algunas representaciones de estilos, comportamienteos,audio y vdeo no se mostrarn igual que en el formato original de pgina web.

Por otro lado os agradeceremos que nos ayudis a mejorar este curso con vuestras crticas y comentarios;por favor, escribidnos a travs de nuestra pgina de contacto.


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 rpidamentediseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigoHTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientosJavaScript, etc.., de una forma muy sencilla y visual.

Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapasvisuales 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, laversin caduca al cabo de 30 das, pero seguro que te dar tiempo a entenderlo y decidir si quieres adquirir laversin completa de este fantstico programa.

Nota: Esta versin estar disponible hasta que Adobe lance la nueva versin del programa.

Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcas registradas Dreamweaver yAdobe. aulaClic no tiene ninguna relacin con Adobe.

Las pginas web estn escritas en HTML. Si no conoces las caractersticas bsicas de HTML puedes verlasaqu.

1.2. Novedades de Dreamweaver CS6

En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior.

Plantillas diseo fluido. El acceso a la web a travs de todo tipo de dispositivos est experimentandoun aumento importante. Ahora es habitual acceder a internet desde el telfono mvil y desde las tabletas. Estocomplica el diseo de los sitios web porque los dispositivos son de diferentes dimensiones.

Una forma de afrontar este problema es utilizando el diseo fluido, este tipo de diseo hace que la pgina seadapte automticamente a las dimensiones del dispositivo. Este tipo de diseo utiliza HTML 5 por los que losnavegadores antiguos no son capaces de representarlo correctamente. Sin embargo, existen librerias deJavascript que solucionan este inconveniente.

Dreamweaver incorpora estas soluciones en sus nuevas plantillas de diseo fluido que veremos en la unidad18.

1. Conceptos bsicos.


Fuentes Web. Existen sitios web con multitud de nuevas fuentes que pueden dar un aire distinto anuestros diseos de pginas web. En esta versin, Dreamweaver permite incorporar los archivos de nuevasfuentes de forma sencilla.

Intergracin con PhoneGap mejorada. PhoneGap es un servicio para generar aplicaciones paratelfonos mviles en las plataformas ms utilizadas (Android, Apple, ...) ahora se ha mejorado la compatibildadcon PhoneGap desde Dreamweaver .

Funciones exclusivas para Creative Cloud. Creative Cloud es la nueva forma de adquirir productosAdobe, como Dreamweaver, mediante suscripcin mensual o anual, de esta forma se tiene acceso ms rapidoa las actualizaciones y se puede disponer de los archivos de trabajo en cualquier ubicacin con acceso ainternet.

Adems hay funciones que slo estan disponibles para los suscriptores de Cloud, como la insercin deetiquetas HTML 5 desde el panel Insertar, la compatibilidad con Edge Animate o la bsqueda dinmica en Mac.



1.3. Editar pginas web

Cualquier editor de textopermite crear pginas web. Paraello slo es necesario crear losdocumentos con la extensinHTML o HTM, e incluir comocontenido del documento elcdigo HTML deseado. Puedeutilizarse incluso el Bloc de notasincluido en Windows para hacerlo.

Pero crear pginas webmediante el cdigo HTML es mslaborioso que hacerlo utilizando uneditor grfico. Al no utilizar uneditor grfico cuesta mucho ms insertar cada uno de los elementos de la pgina, al mismo tiempo que es mscomplicado crear una apariencia profesional para la pgina, sobre todo si no estamos demasiado familiarizadoscon el HTML. Aunque tambin es cierto que escribir el cdigo nos da ms control sobre l, y sobre todo alprincipio, nos ayudar a entender lo que estamos haciendo y podremos aprender HTML rpidamente.

Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que destacapor 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 MicrosoftExpresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales tienen la ventaja deser 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 quepueda alojarla y hacerla accesible desde Internet las 24 horas del da. El precio por disponer de espacio propioen el servidor depender de la empresa, del espacio en disco, volumen de transferencia y otras opciones quepodamos 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 estasempresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentrode 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 esaceptable para una pgina personal, sobre todo al comienzo.

Por otro lado, hay grandes empresas de Internet que ofrecen otras alternativas para publicar en Intenet deforma gratuita en forma de blog. Como por ejemplo, Blogger de Google o MySpace de Microsoft. Un blog tieneuna estructura definida y no ofrece tanta libertad como una pgina web a la hora del diseo.

Tambin tenemos Google Sites que permite modificar directamente el cdigo HTML.



En el resto del curso nos referiremos preferentemente a pginas web creadas desde cero por el usuario, sinrestircciones de diseo.

Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de laque se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombrepara nuestra pgina. Este nombre no puede estar repetido en Internet, ha de ser nico, al igual que ocurre conlos nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como porejemplo, .net, .org, .es o .com. La terminacin hace referencia al pais (.es para Espaa, .com.mx para Mxico,.pe para Per, ...) o al tipo de pgina (.com para comerciales, .org para organizaciones, .mobi para telfonosmviles o celulares, ...)

En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra pgina noser 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 decorreo electrnico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder aella a travs de programacin va Web.

Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com.

En cualquier caso, una vez 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 seencuentre 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 servidormanteniendo la estructura del local. Es decir, debers subir todos los archivos tal y como aparecen en tudisco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si no lo haces deeste 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 enblanco en los nombres de archivos o carpetas. De esta forma te asegurars de que el servidor puedereconocer 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, losnombres 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 comoFoto1.jpg. Evitars horas perdidas buscando fallos.



1.5. Arrancar y cerrar Dreamweaver CS5

Veamos las dos formas bsicas de arrancar Dreamweaver CS5.

Desde el botn Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla.

Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men. Puedes comenzar a escribir elnombre del programa, y aparecer directamente. O puedes pulsar en Todos los programas y buscarlo enla lista con los programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS6 y hazclic sobre l para arrancar el programa.

Desde el icono de Dreamweaver CS6 del Escritorio, si lo tienes .

Puedes arrancar Dreamweaver CS6 ahora para ir probando todo lo que te explicamos. Cuando realices losejercicios tambin puedes compaginar dos sesiones de la forma que puedas ver el tema mientras utilizasDreamweaver, 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 pedirconfirmacin 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 clic sobre el men Archivo y elegir la opcin Abrir reciente. Muestra los ltimos archivos abiertos.

Hacer clic sobre el men Archivo y elegir la opcin Examinar en Brigde. Se abrir el programa Brigdeque muestra las carpetas y archivos de forma grfica.

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.

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 quepodemos elegir, para nuestro primer ejemplo elegimos en Diseo ninguno. A continuacin pulsamos el botnCrear.

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 variosdocumentos, 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 deellos. Debes tener mucho cuidado al utilizar la opcin guardar todo, ya que en ocasiones es posible nodesear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio noutilices esta opcin, al menos hasta que te hayas habituado a manejar el programa. De todas formas, observaque 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 websencilla, con varios estilos de texto, una imagen y un enlace a otra pgina. Crear esta pgina solo te llevarunos pocos minutos, y sabrs cmo trabajar con los elementos bsicos con los que estn hechas la mayorade 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 puedehacerse. Abre un documento nuevo y selecciona la Categora Pgina bsica, HTML, en la columna Diseodejamos 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.

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 estamoscreando 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 botnderecho del ratn sobre la imagen que queremos traer de Internet, se abre una ventana con una opcin similar aGuardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en unfichero de nuestro disco duro. Ten en cuenta que si piensas publicar la pgina en Internet, hay que respetar losderechos de autor de la imagen.

Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina web que estamoscreando. Gurdala en la carpeta donde vas a guardar la pgina que acabas de crear.

Ahora vamos a insertar la imagen debajo de la segunda lnea de texto. En primer lugar, situamos el cursor alfinal 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 propiedadesque se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto:

Si no te aparece, puedes mostrarlo a travs delmen Ventana, opcin Propiedades.

Si lo que te ocurre es que nicamente teaparece el ttulo del panel, es porque estcontrado. Para que te aparezca desplegadodebes hacer doble clic en Propiedades.

Selecciona la primera lnea de texto. En el inspector de propiedades pulsa HTML y aplica el formatoEncabezado 1 (h1) seleccionando el valor Encabezado1 del cuadro Formato.

Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el icono CSS a laizquierda.

Mediante el inspector de propiedades en Dreamweaver CS6 accedemos tanto a las propiedades de CSScomo 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, Dreamweaver aplica formato al texto mediante hojas deestilos en cascada. Los estilos CSS ofrecen un mayor control sobre el diseo de la pgina Web y reducen eltamao del archivo.

Selecciona la primera lnea. En Regla de destino selecciona , para aplicar elformato solo al texto seleccionado. Tambin aplica el estilo de Fuente Arial, Helvetica, sans-serif, color azul#009 y centra el texto con el segundo botn de la parte derecha , tal y como muestra la imagen siguiente:

Selecciona la segunda lnea de texto, y seleccionando como antes , marca losbotones para ponerlo en negrita y cursiva respectivamente.

Vamos a centrar tambin la imagen. Para ellos seleccinala. Lo que hay que centrar es el contenido delprrafo 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, en Regla de destino selecciona y centra el prrafo como hemos vistohasta ahora, pulsando en .

Por ltimo vamos a crear el enlace. Selecciona el texto de la ltima lnea, y cambia el panel dePropiedades a las propiedades de HTML.

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 quepuedes hacerlo a travs del men Archivo, desdela opcin Guardar.

Puedes llamar al documento como lo desees,pero la extensin ha de ser htm o html. Porejemplo, lo hemos llamado miprimerapagina.htm,y la hemos guardado en la misma carpeta que laimagen descargada.

Ahora, puedes ver cmo se ve en tu navegadorpulsando la tecla F12.

Prueba evaluativa de la Unidad 1



Unidad 2. El entorno de Dreamweaver CS5

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 qusirven. 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 componentesfundamentales. As conoceremos los nombres de los diferentes elementos y ser ms fcil entender el restodel curso. La pantalla que se muestra a continuacin (y en general todas las de este curso) puede no coincidirexactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qu elementos quiere que sevean en cada momento y dnde, como veremos ms adelante.

En el resto de esta unidad vamos a ir describiendo los puntos ms importantes sealados en esta imagenpor los nmeros en azul del 1 al 9.

1.- Las barras.

2.- Las pestaas de documentos.

3.- La barra de estado.

4.- El panel de propiedades.

2. El entorno de Dreamweaver CS6


5.- rea de paneles.

6.- Paneles y ventanas.

7.- Lnea inferior de pestaas.

8.- Vista diseo del documento.

9.- Vista cdigo del documento.

2.2. Las barras

1.- La barra de la aplicacin.

La barra la aplicacin se incorpor en la versin anterior de Dreamweaver. Si tenemos la ventana maximizadaveremos todos los elementos de la barra ocupando una sola lnea, si no, ocuparn dos lneas, como en laimagen superior.

Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte inferior), varios botonespropios de la aplicacin, el conmutador de espacio de trabajo y una caja de bsquedas para obtenerayuda on line.

Los botones propios de la aplicacin, que aparecen junto al icono, nospermiten (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 undesplegable. Un espacio de trabajo es la configuracin del entorno (paneles visibles y sudisposicin) 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 elementosque se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a travs de losmens, aunque en ocasiones nos enven a los paneles.

2.- 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 cambios sin guardar.Podemos cerrar cada documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo cliccon el botn derecho, como Cerrar otros archivos.

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.

3.- 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 tenemos las herramientas de Seleccin, Mano (para desplazarse) y Zoom. Ms a laderecha encontramos tres iconos para ver la pgina en tres tamaos de pantalla: mvil, tableta y PCescritorio.Y al final hay 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 uocultar 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 menArchivo y Edicin. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardartodo, Imprimir el cdigo fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. Esta barra puede ser muy til, peroen realidad casi todo el mundo usa esos comandos directamente con el teclado (Ctrl + G para guardar, Ctrl +C para copiar, etc.)

La barra de herramientas de documento.



La contiene iconos que nos permiten cambiar entre las distintas vistas de edicin y la vista en vivo, vistasprevia en multipantalla, acceder cmodamente al ttulo de la pgina, o realizar las distintas opciones devalidacin que nos ofrece el programa.

La barra de representacin de estilos.

Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, siestamos utilizando hojas distintas que dependan del eso. Hay varias opciones, como las de ver los estilos quedependen de pseudo clases activas, como cuando el cursor est sobre un elemento.

La barra de navegacin con navegador.

Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las pginas de nuestrositio, aunque slo tiene sentido con la Vista en vivo, como ya veremos.

Como tambin veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlocomo otra barra de herramientas.

2.3. Inspectores y paneles

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen comopaneles (ventanas) o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia yopciones de un inspector cambian dependiendo del objeto seleccionado, mientras que el panel nos da accesoa opciones generales fijas.

A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneleso inspectores. A continuacin vamos a ver el inspector de Propiedades y ms adelante veremos el panelInsertar.

4.- El inspector de Propiedades

El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitindonoseditarlas, por lo que se convierte en uno de los elementos ms utilizados en Dreamweaver. Por ejemplo,cuando el elemento seleccionado sea una imagen, como sucede en la imagen que puedes ver, mostrar su



ubicacin, dimensiones, peso, clase, etc...

En otros elementos, como prrafos y estilos, este panel puede mostrar dos tipos de propiedades, HTML yCSS, que podemos aplicar a los diferentes elementos de la pgina Web que estemos diseando.

5.- rea de paneles.

En la parte derecha de la pantalla tenemos el rea o pila de paneles.

Inicialmente, el rea de paneles contiene unos determinados elementos, pero podemos quitar y poner loselementos que queramos. Para quitar un elemento del rea de paneles basta hacer clic con el botn derechosobre su nombre para que aparezca un men con la opcin Cerrar. Para aadir un elemento al rea de paneleshay que ir al men Ventana y hacer clic en el elemento que queramos aadir, si el elemento se abre en unaventana flotante, bastar arrastrarlo al rea de paneles.

6.- Paneles.

Una vez tenemos el ea de paneles con los elementos que ms nos interesen, podemos abrirlos odesplegarlos de tres formas.

1. Abrir el panel dentro del rea de paneles. Para ello primero hay que expandir el rea de panelespulsando el botn de la parte superior derecha , a continuacin, basta hacer clic en cada panel para que seabra dentro del rea de paneles. Para cerrar el panel hacer doble clic.

Por ejemplo, en la siguiente imagen vemos el panel Archivos abierto dentro del rea de paneles. Se puedenabrir varios paneles a la vez y ajustar sus tamaos colocando el cursor en el borde inferior y arrastrndolo.



2. Abrir el panel al lado del rea de paneles. Para ello hay que partir del rea de paneles sin expandir, yal pulsar en un panel, este se abrir pegado al lado, como vemos en la siguiente figura.



3. Abrir como panel flotante . Para ello hay que pinchar en el ttulo del panel y arrastar el panel fuera delrea de paneles, el panel se puede colocar en cualquier zona de la pantalla, incluso fuera de la pantalla deDreamweaver. Al hacer doble clic en el ttulo del panel, este se contrae pero sigue flotando en la mismaposicin. Para expandirlo, volver a hacer doble clic. En al siguiente imagen vemos el panel Archivos flotando yepandido.



Hemos visto un inspector y ahora vamos a ver un panel, el panel Insertar.

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 (imagen anterior),como panel flotante o como una barra de herramientas integrada en la ventana de trabajo (imagen siguiente)



.Personalizar el rea de trabajo es bastante intuitivo, pero si necesitas ayuda, te recomendamos esteavanzado .

7. Lnea inferior de pestaas.

En al parte inferior de la pantalla tenemos una lnea que contiene varias pestaas (Buscar, Validacin , ... )

Para abrir una pestaa basta hacer clic sobre ella, para cerrarla hacer doble clic en su ttulo.

Estas pestaas se pueden configurar de forma similar a como acabamos de ver con el rea de paneles. Esdecir, se pueden aadir y quitar, convertir en flotantes, etc.

2.4. Vistas de un documento

Podemos editar el documento con distintas vistas, que puedes cambiar travs de la barra de documento:

8.- La vista Diseo

La vista Diseo permite trabajar con el editor visual.



Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.

9.- La vista Cdigo

La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo fuente. Nopermite tener directamente una referencia visual de cmo va quedando el documento segn se va modificandoel cdigo.



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 izquierda muestra el cdigofuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio seaplica directamente sobre la otra.

- La Vista en vivo

La vista en Vivo es una mejora reciente de Dreamweaver. Nos ofrece una vista del resultado final noeditable. A diferencia de la vista Diseo, que nos permite editar los elementos, esta vista nos permiteinteractuar 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 seprevisualizan correctamente en el navegador.

No obstante, siempre hay que comprobar la pgina con los principales navegadores del mercado que sernlos que emplearn nuestros visitantes. De hecho, a lo largo del curso vers cmo algunos elementos se ven deforma muy distinta si los vemos en la vista de diseo, en la vista en vivo o en el navegador. Tambin esconveniente comprobar la pgina con los distintos tamaos de pantalla, telfono mvil, tablet y PC.

- La vista Cdigo en vivo

Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir, pero sin quepodamos 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 y refleja los cambios dinmicamente al interactuar con la pgina.

Si adems pulsamos el botn podremos ver los estilos asociados a cada elemento. Por ejemplo,al colocar el cursor sobre un prrafo podemos ver sus mrgenes, como se aprecia en la siguiente imagen.

2.5. La ayuda

A travs del men Ayuda puedes ira varias opciones, veamos algunas deellas:

Si seleccionas la opcin Ayuda deDreamweaver o simplementepulsando F1 se accede a la ayudaen lnea de Adobe CommunityHelp donde puedes buscar portemas o por bsqueda de palabrasclave, .

Ayuda de Business Catalyst quees un sistema de alojamiento depginas web con funcionesadicionales. Es de Adobe y haydiferentes opciones de pago almes.

Ayuda de Spry Framework.Veremos Spry Framework a partirde la unidad 14.



Referencia abre un panel en el que encontrars la sintaxis y descripcin de las etiquetas HTML.

Acceder al Centro de soporte de Dreamweaver en la web.

Dreamweaver Exchange es un sistema para compartir extensiones.

Acceder al Foros en lnea de Adobe.

Adems, en la barra de aplicacin encontramos una caja de bsqueda. Al introducir los trminos de labsqueda y buscar, iremos a la ayuda online de Adobe.

Prueba evaluativa de la Unidad 2



Unidad 3. Configurar un sitio local

En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar laspropiedades 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 unobjetivo 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 HTMLnormalmente 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 unamejor 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 apublicar 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 sitiocon 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 deforma 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 intentaacceder 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 intentaracargar la pgina http://www.aulaclic.com/index.htm, por lo que se producira un error en el caso de que noexistiera ninguna pgina con el nombre index.htm, y no se podra navegar por el sitio a no ser que seescribiese exactamente http://www.aulaclic.es/nombrepagina.htm

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 , yaes posible definir el nuevo sitio.

Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o directamente a Nuevo sitio.

3. Configurar un sitio local.


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 opcinAdministrar sitios o Nuevo sitio...

En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene la lista desitios locales definidos



Por supuesto, pueden existir varios sitios locales en un mismo ordenador, como podemos ver en la imagen.

Desde esta ventana podemos realizar varias acciones. Debajo de la lista de sitios tenemos cuatro botones

que nos permiten borrar un sitio, editarlo, duplicarlo y exportarlo.

A continuacin tenemos otros cuatro botones:

- Importar sitio. Si previamente lo hemos exportado, normalmente, desde otro ordenador.

- Importar sitio de Business Catlyst. Catalyst es un sitstema de hospedaje de pago de Adobe.

- Nuevo sitio. A continuacin explicaremos esta opcin.

- Nuevo sitio de Business Catlyst.

En la parte inferior derecha tenemos el botn Listo que nos abrir el sitio seleccionado.

Tanto si se pulsa el botn Nuevo sitio, como si se elige el botn Editar, se mostrar la misma ventana en laque definir o modificar las caractersticas del sitio.



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 enella.

Las dos nicas opciones imprescindibles son las que encontramos en la categora Sitio, y de momento sonlas nicas que cambiaremos:

Vamos a ver los datos que hay que editar para la categora Datos locales, que ser lo nico que empleemosde momento:

Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo en la lista de sitios.

La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco duro local. La carpetapuede contener ya archivos o no.

Estas dos caractersticas son las imprescindibles para definir un sitio local. El resto son opcionales, y demomento no nos interesan.

Las dems opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no esnecesario establecer los datos del servidor en el que estar el sitio remoto.

Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.



3.3. Abrir un sitio

Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios.... seleccionarel sitio de la lista de sitios y pulsar sobre el botn Listo.

Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abriren el men desplegable Archivos.

Para practicar realiza el Ejercicio paso a paso Crear un sitio web local. En esteejercicio, configuraremos un sitio que iremos completando ms adelante.

3.4. Ver el sitio

El panel Archivos (men Ventana Archivos o tecla F8) es uno de los paneles ms importantes deDreamweaver, ya que nos da acceso a los archivos del sitio.

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 hayque 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) connuestros archivos.



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, automticamenteactualizar 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 mostrarncorrectamente: no aparecern imgenes, no funcionarn enlaces, etc, ya que Dreamweaver simplemente noencontrar la pgina.

Al modificar algn objeto que es referenciado por algn otro documento, se muestra una ventana similar asta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para queno se produzcan los problemas antes mencionados.

Simplemente hay que pulsar sobre el botn Actualizar, aunque esto depender de si tenemos configuradala opcin Mensaje al actualizar vnculos si movemos archivos. Lo cual podemos establecer desde el menEdicin, opcin Preferencias, categora General.

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 auno cada archivo y creando las carpetas t mismo. Este proceso puede hacerse muy largo y debes tenermucho cuidado en mantener la estructura tal y como se encuentra en tu carpeta del disco duro. Si nolos 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. Estaforma 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 deWindows) 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 elprograma.

Una vez instalado, abre el programa y haz clic en Archivo Gestor de sitios y luego en Nuevo sitio paraconfigurar un nuevo sitio FTP.

Aqu debers introducir los datos que te facilit el servidor donde vas a alojar tus pginas: Servidor, Usuarioy 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 Sitioremoto, con los archivos ubicados en el servidor FTP.

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 tunavegador (Firefox, Internet Explorer...) y vers el sitio en Internet!

Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Buscala carpeta html, public_html o httpdocs 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, esdecir, que tengan el mismo color de fondo, de fuente, etc.

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 contextualla 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 semostrar 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 muestraen mosaico. Es importante al elegir una imagen de fondo tener en cuenta que segn los colores de laimagen ser necesario establecer unos u otros colores para el texto, as como que no es conveniente tenerun gif animado como fondo.

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 oseleccionamos la opcin repeat. Si queremos que se repita solo en horizontal seleccionamos la opcinrepeat-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 elcontenido 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 muestraen mosaico. Es importante al elegir una imagen de fondo tener en cuenta que segn los colores de laimagen ser necesario establecer unos u otros colores para el texto, as como que no es conveniente tenerun gif animado como fondo.

Fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrar en elcaso 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 elcontenido de la pgina y la ventana del navegador.

Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que CSS aplicanuestra configuracin utilizando reglas de estilo, mientras que HTML lo hace con atributos HTML. Estos ltimosestn cayendo en desuso, ya que se tiende a limitar el HTML al contenido, y no al diseo. Por eso, tedesaconsejamos su uso.



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 losvnculos que sirven de enlace a otras pginas.

Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos vnculosya 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 aparecesubrayado, con esta opcin podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.

En la categora Encabezados (CSS) encontramos la propiedad:



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 queremosaplicar 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 dedocumento 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 mostraren la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza comoplantilla 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 vercmo comprobar el tamao de los documentos, pulsa aqu .

3.7. Los colores

Para asignar colores es posible desplegar una paleta de colorescomo sta. Al seleccionar un color de estas paletas, se muestra el valorhexadecimal del color en la parte superior.

Las paletas de colores de Dreamweaver utilizan la paleta de 216colores seguros para web. stos son los colores que se muestran de lamisma 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 algunasventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es elcaso de la ventana de Propiedades de la pgina, que vimos en este tema.

El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , lo que haceque se despliegue la paleta de colores. El otro modo es introduciendo directamente el nmero hexadecimaldel 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 corresponde al rojo, el segundo alazul y el ltimo al verde.

En Dreamweaver observars muchas veces que se emplean slo tres valores. En este caso, se interpretaque los valores de los pares estn repetidos. Es decir, los colores #FF22AA y #F2A son el mismo.

Para practicar puedes realizar el Ejercicio paso a paso Crear nuevo documento y modificar sus propiedades.

Ejercicio propuesto de la Unidad 3 Prueba evaluativa de la Unidad 3



Unidad 4. El texto: propiedades y formato

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, quepermiten asignar al texto clases y estilos creados por nosotros mismos, no predefinidos.

4.1. Caractersticas del texto

Las caractersticas del texto seleccionado pueden ser definidas a travs del men Formato, y a travs delinspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector depropiedades, que estn clasificadas en dos categoras HTML y CSS.

Comenzamos viendo las propiedades HTML

Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero alfinal, podremos personalizarlas con CSS para que se vean exactamente como queramos.

Formato:

Permite seleccionar un formato de prrafo ya definido para HTML, que puedeser encabezado, prrafo o formato predeterminado. Los encabezados seutilizan para establecer ttulos dentro de un documento. El formatopredeterminado sirve para que el texto aparezca tal cual ha sido escrito, porejemplo, si entre dos palabras se introducen varios espacios solo seconsidera uno, pero al establecer el formato predeterminado se respetar quehayan varios espacios en lugar de solo uno. El texto normal, debera irsiempre en prrafos, salvo que est en otros elementos, como tablas o listas.

Es importante emplear correctamente los encabezados, ya que se organizar mejor el contenido de nuestraweb, y es importante de cara a buscadores y visitantes. No te preocupes por cmo se muestran esosencabezados, recuerda que siempre podremos personalizarlo.

Estilo:

El botn B encierra el texto en una etiqueta , que por defecto se muestra en negrita.El botn I, lo encierra entre , que por defecto se ve en cursiva.

Estas son las etiquetas de resaltado ms habituales, pero existen otras que encontramos a travs del menTexto. Por ejemplo, subrayar el texto. Esta opcin no aparece en el panel de Propiedades ya que denormal no suele utilizarse, debido a que los vnculos aparecen subrayados y el subrayar texto normal podrahacer que el usuario pensara que se trata de un vnculo. Adems, emplea etiquetas que estn en desuso.

Lista:

4. El texto:propiedades.


Estos botones permiten crear listas con vietas o listas numeradas. Veremos qu son las listas en elsiguiente apartado.

Sangra:

Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de margen quese establece a ambos lados del texto. En este caso los botones se refieren a sangra a la izquierda deltexto.

Si lo aplicamos sobre texto normal, lo encerrar en una etiqueta , que

por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, crear unasublista dentro de sta.

Accediendo a las propiedades CSS.

Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra pgina ydarle el diseo que queramos. Podemos cambiar desde propiedades simples, como el color de fondo, hastacosas ms vistosas, como hacer que un bloque se muestre en una posicin determinada o que un elementocambie al pasar el cursor sobre l. Profundizaremos en esto ms adelante, por ser una parte fundamental en lacreacin de pginas web.

Tenemos ms posibilidades a la hora de aplicar formatos. Dreamweaver CS6 nos proporciona numerosasfunciones para la creacin de estilos mediante hojas de estilos en cascada .

Regla de destino:

Las reglas CSS sirven para definir a qu elemento aplicamos el estilo, ycmo lo hacemos.

Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremosesto antes de acabar el tema.

Editar regla:

Mediante este botn accedemos a las opciones para la creacin o modificacin de estilos CSS, de la reglaseleccionada.

Panel CSS:

Este botn abre el panel CSS si no lo tuviramos abierto.



Fuente: Permite seleccionar un conjunto defuentes. Aparecen conjuntos de fuentes en lugarde una sola, ya que es posible que al estableceruna nica fuente el usuario no la tenga en suordenador. El seleccionar un conjunto de fuentesposibilita que en el caso de que el usuario notenga una fuente se aplique otra del conjunto.Por ejemplo, si seleccionamos Arial, Helvetica, sans-serif, el texto se ver con la fuente Arial, pero si estano existe se ver en Helvetica.

Estilo:

Estos botones ponen el texto en negrita y cursiva respectivamente. Pero en este caso, generan un estilocss en lnea.

Alineacin:

A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formasdistintas: izquierda, centrada, derecha y justificada.

Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por ejemplo sobre unprrafo.

Tamao:

Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles,porcentajes del tamao base, etc...

Color:

Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de lapgina. Si no se ha establecido ningn color en las propiedades de la pgina ni aqu, el color del texto pordefecto ser el negro.

Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus propiedades.

4.2. Listas

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con vietas.

Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hayque seleccionarlo y pulsar sobre la opcin de lista correspondiente, ya sea a travs del inspector depropiedades, o a travs del men Formato.

La lista con vietas (sin ordenar) se selecciona a travs del botn , mientras que la lista numerada(ordenada) se selecciona a travs del botn .

Ejemplo de lista numerada (ordenada):

Preparar la mochilaSacar los libros de ese da1.

2.

1.

2.



1.

Introducir los libros del da siguiente2.

1.

Ponerme el pijama2.

Lavarme los dientes3.

Poner el despertador4.

Ejemplo de lista con vietas (sin ordenar):

Perro

Gato

AvesCanario

Loro

Hmster

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario aadir unasangra en los elementos de la lista que se desee que pasen a formar parte de la lista anidada.

A travs del men Formato, opcin Lista, es posible acceder a las propiedades de la lista seleccionada. Sedebe seleccionar el texto de la lista previamente o tener el cursor en algn lugar de la lista para que se activeeste submen.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con vietas), el tipode nmeros o vietas que se utilizarn (en la propiedad Estilo:), y en el caso de las listas ordenadas, el nmeropor el que comenzar el recuento.

Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista.

4.3. Caracteres especiales

A veces necesitars introducir caracteres especiales en tus pginas. Debido al modo editor de Diseo deDreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como , , , , ..



de forma rpida. Pero si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver nolos crear, debers introducirlo dos veces utilizando la opcin que vamos a ver a continuacin. Lo mismoocurrir con los caracteres que no tenemos en el teclado.

Haz clic en el men Insertar y selecciona la opcin HTML vers el desplegable de la imagen inferior.

Slo coloca el cursor del ratn sobre Caracteres especiales y vers una lista rpida de los caracteres msutilizados que no pueden ser introducidos mediante teclado.

Para introducir alguno de estos caracteres en tus textos slo seleccinalo en la lista y aparecer en la vistade Diseo.

Si el carcter que buscas no se encontrase all, haz clic en Otro... y se abrir una ventana desde dondepodrs seleccionar caracteres entre una lista bastante ms amplia:



4.4. Estilos CSS. Introduccin

Los estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser el color o eltamao, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir laasignacin de esos mismos valores a otras partes del texto.

Tambin permiten, como veremos ms adelante, definir prcticamente cualquier propiedad de los elementosque contendrn nuestra web.

Podemos definir los estilos para determinadas etiquetas, como encabezados (, ...), prrafos(), enlaces (), etc... lo que formatear todas las apariciones de esta etiqueta en el mbito del estilo.

Tambin podemos crear clases. Algo as como definir un estilo y darle un alias. El estilo afectar a todos loselementos a los que apliquemos esa clase.

Por otro lado, al crear el estilo, podemos definirlo como un estilo en lnea (afectar slo al elementoseleccionado) o crear una regla, que puede afectar a toda la pgina, o a todo el sitio si la guardamos en unarchivo CSS.

Un estilo CSS no es ms que un conjunto de reglas de formato que controlan el aspecto del contenido deuna pgina Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en unapgina, desde la posicin precisa de elementos hasta el diseo de fuentes y estilos concretos.

Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple deactualizacin; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo seactualiza automticamente.

4.5. Crear un estilo personalizado



Con Dreamweaver CS6, las caractersticas que apliquemos a un texto a travs del Inspector depropiedades CSS crearn automticamente estilos CSS. Aunque tenemos que decidir a qu elementosafecta.

Vemoslo:

Crear un estilo en lnea.

Por ejemplo, si queremos que un determinado estilo afecte a un nico elemento y en un caso puntual,podemos crearlo como un estilo en lnea. Esto incrustar el estilo en la propia etiqueta HTML, por lo que sialguna vez queremos modificarlo, deberemos de ir al elemento.

En el Inspector de propiedades CSS, en Regla de destino, seleccionamos .

A continuacin, definimos las propiedades del estilo.

Insistimos que esta opcin es la menos flexible y debe empelarse slo en casos concretos, cuando el estilono se repita, y no tenga sentido mantenerlo si borramos esa etiqueta concreta.

Crear una regla de estilo:

Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, slo a las que estn contenidas endeterminados elementos o una clase.

Para ello, En el Inspector de propiedades CSS, en Regla de destino, seleccionamos .

Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En cualquier caso nos aparecerla siguiente ventana:



Tipo de selector: el tipo de selector es fundamental, ya que determina a qu elementos afectar el estilo.

Podemos elegir entre cuatro tipos de selector:

Clase. Es el alias que tomar el estilo, y para que afectea un elemento, debemos de aplicarle esa clase.El nombre de la clase va precedido por un punto, y si nolo ponemos lo har Dreamweaver.

ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de forma nica yconcreta. Por tanto, el estilo slo puede afectar a un elemento en cada pgina, al que tenga ese ID. En elselector, se escribe precedido por #.

Etiqueta. El estilo afectar a todas las apariciones de la etiqueta HTML indicada.

Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta nicamente a los prrafoscon la clase resaltado, pero no a los encabezados con esa clase. Tambin se pueden anidar. Por ejemploul#menu li p afecta slo a los prrafos que estn dentro de un elemento de una lista con el id menu.

Nombre del selector: esta opcin permite asignar un nombre al selector.

Depende ntimamente del tipo de selector, pues aqu introduciremos el nombre de la clase, id, etiqueta, etc...



Por defecto, indicar el elemento seleccionado, pero podemos escribir el que queramos.

Definicin de regla: esta opcin nos permite guardar el estilo en el documento actual o en un nuevo archivo.css.

Si elegimos (Slo este documento) la definicin del estilo se guardar en la cabecera de la pgina, por loque slo estar disponible dentro de sta.

Si elegimos (Nueva hoja de estilo) se crear un archivo CSS. Podremos emplear estos estilos en cualquierpgina del sitio slo con vincular la hoja de estilos. Deberemos de indicar dnde guardar el archivo css quecontendr los estilos. Normalmente en la misma carpeta que las pginas.

Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aqu y los estilos se aadirn ella.

4.6. Definir o editar un estilo

Una vez creado, tenemos que definir las propiedades que formarn el estilo.

Para ello, encontramos las opciones bsicas en el Inspector de propiedades CSS.

Observa que la regla que estamos editando es la que aparece en Regla de destino. Si queremos editar otraregla, hacemos clic en el desplegable y la seleccionamos, ya que una vez creadas se van aadiendo a la lista.

Si queremos acceder a todas las propiedades, podemos pulsar en el botn Editar regla. Se abrir laventana Definicin de regla.



Aqu encontramos todas las propiedades CSS agrupadas por Categoras. Las veremos ms adelante.

Esta ventana es la opcin ms cmoda nada ms crear el estilo, cuando tenemos que cambiar variaspropiedades.

Para pequeos cambios que no podamos hacer desde el Inspector de propiedades y otras funciones extras,disponemos del panel Estilos CSS. Podemos acceder a l desde el men Ventanas o pulsando en el botnPanel CSS.

En la parte superior vemos las propiedades que afectan al elemento, en medio las reglas aplicadas, y en laparte inferior las propiedades del estilo actual.



Tambin se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique aqu tipo de texto se va a aplicar. Para ello accedemos al panel Estilos, hacemos clic con el botn derechosobre el estilo y seleccionamos la opcin Cambiar nombre... Aparecer un cuadro de dilogo para queintroduzcamos el nuevo nombre como la imagen inferior.

Si quieres aprender ms sobre el panel Estilos CSS, puedes hacerlo aqu .

Nota: En los primeros ejercicios del curso iremos aplicando propiedades sin haber explicado previamentecada una. Ms adelante detallaremos qu hacen las propiedades existentes. No obstante, sabiendo un poco deingls resultan muy intuitivas.

Para practicar lo que hemos visto, puedes realizar el Ejercicio paso a paso Redefinir el estilo de unaetiqueta.

4.7. Aplicar un estilo

En el caso de haber creado una regla para una etiqueta, no ser necesario aplicarla, ya que directamenteafecta a todas las etiquetas de ese tipo.

Por tanto lo que tendremos que aplicar sern los estilos que definamos como clases. Veamos cmo hacerlo:

En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el punto deinsercin, pero sin seleccionar, el estilo se aplicar a la primera etiqueta que contenga el texto (por ejemplo elprrafo).

En el inspector de Propiedades seleccionamos la opcin CSS y seleccionamos el estilo creado pornosotros de la lista que aparece al desplegar el cuadro Regla de Destino. Desde las propiedades HTMLtambin podemos hacerlo, utilizando el desplegable Clase.



Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella en la barra de estado,y seleccionar la clase deseada del men Establecer clase.

Todas las reglas disponibles estan accesibles desde el men Formato Estilos CSS.

Observa que existe una clase llamada ninguna. Lo que hace esta opcin es quitar la clase al elemento.

La barra de estado nos ayudar a saber qu clase tiene aplicada un elemento. La clase aparecer junto alnombre de la etiqueta, separada por un punto.

Para practicar puedes realizar el Ejercicio paso a paso Crear y aplicar una clase y el ejercicio paso apaso Modificar el estilo de una lista.

4.8. Hojas de estilos

Exportar estilos

Es frecuente que comencemos creando los estilos en la propia pgina, y despus al ver que losnecesitaremos en otras pginas del sitio, los pasemos a una hoja de estilo. Dreamweaver nos permite exportarestos estilos fcilmente.

Utilizamos el panel Estilos CSS (Mays + F11). En este caso nos ser ms til la vista Todo. Agrupados en encontramos los estilos creados en la pgina.



Seleccionamos las reglas que queramos exportar, y en las propiedades del panel (el icono de la esquinasuperior derecha) seleccionamos Mover Reglas CSS....

Nos aparecer la siguiente ventana:

Encontramos dos opciones para ubicar los estilos:

Hoja de estilos nos permite seleccionar una hoja ya existente. Las reglas se aadirn a ella.

Una nueva hoja de estilos... crear una hoja nueva para las reglas exportadas. Deberemos de indicardnde queremos guardar el archivo, normalmente en la misma carpeta que las pginas.

Los estilos seleccionados se quitarn de la pgina actual, y se vincular con la hoja de estilos.

Vincular una hoja de estilos.

Si queremos utilizar una hoja de estilos ya existente en nuestra pgina, debemos vincularla.

Podemos hacerlo desde el men Formato Estilos CSS Adjuntar hoja de estilos... o desde el panelEstilos CSS. Lo nico que tendremos que hacer es seleccionar el archivo a vincular. Las hojas de estilo tienenla extensin .css.

Recuerda, que aunque en principio Dreamweaver nos permite elegir cualquier archivo del equipo, todos los



archivos que utilicemos deben de estar dentro del sitio.

Para practicar lo que acabamos de ver, puedes seguir el Ejercicio paso a paso Exportar y vincular hojasde estilo.

Ejercicio propuesto de la Unidad 4 Prueba evaluativa de la Unidad 4



Unidad 5. Hiperenlaces

Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento esencialpara cualquier pgina web.

5.1. Introduccin

Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina oarchivo a otra pgina o archivo.

Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.

Cuando creemos un enlace, lo que realmente haremos ser crear una etiqueta que es la que en

HTML se encarga de definir los enlaces. Esto podrs observarlo en la barra de estado:

5.2. Tipos de referencia

Existen diferentes clases de rutas de acceso a la hora de definir los vnculos. Estas referencias no se limitana los enlaces, se comportarn igual cuando indiquemos la ubicacin de una imagen, de un archivo Flash, de lahoja de estilo, etc.

Referencia absoluta:

Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo elprotocolo http://.

Por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/seccion2/pagina1.html.

La referencia absoluta es independiente de la ubicacin de la pgina que contiene el en

Cur Sode Dreamweaver Cs 6

Documents

Transcript of Cur Sode Dreamweaver Cs 6