1.1. Qué es Dreamweaver CC
Dreamweaver CC (Creative Cloud) es un software fácil de usar que permite crear páginas web profesionales.
Las funciones de edición visual de Dreamweaver CC permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.
Además 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 versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa.
1.2. Editar páginas web
Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos en texto simple, con la extensión HTML o HTM e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo.
Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos en texto simple, con la extensión HTML o HTM e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo.
Pero crear páginas web mediante el código HTML es más laborioso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML. Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al principio, nos ayudará a entender lo que estamos haciendo y podremos aprender HTML rápidamente.
Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.
Además de Dreamweaver, existen otra serie de buenos editores de páginas 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.3. Abrir y guardar documentos
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:- Hacer clic en el botón abrir
de la barra de herramientas estándar (si está visible). - Pulsar la combinación de teclas Ctrl + O.
- Hacer clic sobre el menú Archivo y elegir la opción Abrir....
- Hacer clic sobre el menú Archivo y elegir la opción Abrir reciente. Muestra los últimos archivos abiertos.
- 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 opción Abrir con → Adobe Dreamweaver CC.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:- Hacer clic en el botón nuevo
de la barra de herramientas estándar (si está visible).
- Pulsar la combinación de teclas Ctrl + N.
- Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
- Hacer clic en el botón Guardar
de la barra de herramientas estándar.
- Pulsar la combinación de teclas Ctrl + S.
- Hacer clic sobre el menú Archivo y elegir la opción Guardar.
- Hacer clic en el botón Guardar todo
de la Barra de herramientas estándar.
- Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.
2.1. La pantalla inicial
1.7. Mi primera página desde Dreanweaver
Unidad 1. Conceptos básicos de Dreamweaver CC (V)
Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco.
En la segunda columna seleccionamos HTML, observamos que hay un par de diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuación pulsamos el botón Crear.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente 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.
Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opción, 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 
.
.Nota: Con la idea de resaltar una de las nuevas características de Dreamweaver, la primera vez que se abre el programa, presenta el panel Extract, que sirve para obtener recursos de archivos PSD de Photoshop. La pantalla tiene la siguiente apariencia.
Sin embargo, a menos de que el trabajo con Dreamweaver esté centrado en composiciones de páginas hechas con Photoshop, lo más probable es que sólo usemos eventualmente este panel. Además, con la idea de estudiar adecuadamente el entorno de trabajo del programa y sus elementos más comunes, debemos cambiar al espacio de trabajo denominado Diseño. Para ello, utilizamos el botón Espacios de trabajo, que se encuentra en la esquina superior derecha de la ventana de Dreamweaver. Al pulsarlo, se despliega la lista de espacios de trabajo, en donde debemos cambiar de Extract a Diseño, como en la siguiente imagen.
En las siguientes ocasiones que abramos el programa, ya no será necesario conmutar otra vez de espacio de trabajo. Dreamweaver presenta los elementos de la pantalla tal y como se utilizaron la última vez.
En la pantalla del espacio de trabajo Diseño, podremos ver sus componentes fundamentales. Es importante estudiar los nombres de los diferentes elementos para que sea más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento y dónde, como veremos más adelante.
En el resto de esta unidad vamos a ir describiendo los puntos más importantes señalados en esta imagen por los números en rojo del 1 al 9.
1.- Las barras.
2.- Las pestañas de documentos.
3.- La barra de estado.
4.- El panel de propiedades.
5.- Área de paneles.
6.- Paneles y ventanas.
7.- Línea inferior de pestañas.
8.- Vista diseño del documento.
9.- Vista código del documento.
Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para descubrir lo fácil que es.
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como puede hacerse. Abre un documento nuevo y selecciona la Categoría Página básica, HTML, en la columna Diseño dejamos la opción por defecto: <ninguno>.
Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:
Una vez introducido el texto, vamos a modificar el título y el color de fondo del documento.
Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
Entonces se abrirá una ventana como la que aparece a continuación:
En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser de color azul.
Haz clic en Título/Codificación a la izquierda, y en el Título escribe Mi primera página.
Para aplicar los cambios, pulsa sobre el botón Aceptar.
Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la carpeta donde estamos creando nuestras páginas, habitualmente en una subcarpeta dedicada a las imágenes.
Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre una ventana con una opción 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 página en Internet, hay que respetar los derechos de autor de la imagen.
Copia la imagen que aparece a continuación, para luego poder insertarla en la página web que estamos creando. Guárdala en la carpeta donde vas a guardar la página que acabas de crear.
Ahora vamos a insertar la imagen debajo de la segunda línea de texto. En primer lugar, situamos el cursor al final de la segunda línea y creamos un salto de línea (tecla Enter). Después nos dirigimos al menú Insertar, opción Imagen y dentro de ésta Imagen otra vez.
En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías 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 través del menú Ventana, opción Propiedades.
Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraído. Para que te aparezca desplegado debes hacer doble clic en Propiedades.
Selecciona la primera línea de texto. En el inspector de propiedades pulsa HTML y aplica el formato Encabezado 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 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 página web, HTML se encarga de estructurar el contenido, la información, mientras que CSS se encarga de mostrar ese contenido con el formato adecuado.
Dreamweaver CC y CSS
Al utilizar el inspector de propiedades de CSS*, Dreamweaver aplica formato al texto mediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre el diseño de la página Web y reducen el tamaño del archivo.
* El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML.
Selecciona la primera línea. En Regla de destino selecciona <Nuevo estilo en línea>, para aplicar el formato solo al texto seleccionado. También aplica el estilo de Fuente Ghotam, Helvetica Neue, Helvetica, Arial, sans-serif, , color azul #009 y centra el texto con el segundo botón de la parte derecha 
, tal y como muestra la imagen siguiente:
, tal y como muestra la imagen siguiente:
Selecciona la segunda línea de texto, y seleccionando como antes <Nuevo estilo en línea>, selecciona de las listas desplegables que están a la derecha de Fuente 
para ponerlo en cursiva y negrita respectivamente.
para ponerlo en cursiva y negrita respectivamente.
Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrar es el contenido del párrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos aparece la jerarquía de etiquetas. Haz clic sobre p. 
Ahora, en Regla de destino selecciona <Nuevo estilo en línea> y centra el párrafo como hemos visto hasta ahora, pulsando en .
.
Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambia el panel de Propiedades a las propiedades de HTML.
En el campo Vínculo, escribe la URL de la página a enlazar, como se ve en la imagen:
Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo, desde la opción Guardar.
Puedes llamar al documento como lo desees, pero la extensión 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 cómo se ve en tu navegador pulsando la tecla F12.
Créditos: Aula Clic
Comentarios
Publicar un comentario