¿Qué es Adobe Dreamweaver CC ? Adobe® Dreamweaver CC es la aplicación que lidera el sector de la edición y creación de contenidos web. Proporciona funciones visuales y de nivel de código para crear diseños y sitios web basados en estándares para equipos de sobremesa, teléfonos inteligentes, tabletas y otros dispositivos.

Novedades En esta nueva versión Dreamweaver incorpora las siguientes novedades:

HTML5 y CSS3 Permite poder aplicar estilos con el panel CSS, actualizado para cumplir las nuevas

normas CSS3. Desde las vistas múltiples se pueden aplicar elementos de css media

query, que permite poder crear estilos de CSS según dimensiones de pantallas y de

esa forma poder adaptar un solo diseño a múltiples dispositivos, tales como télefonos

móviles, tablets o computadores de escritorio. También se puede incluir código

HTML5, ya que Dreamweaver viene preparado con sugerencias de código y

compatibilidad con la representación de la vista de diseño. Ahora, LiveView (vista de

prueba en Dreamweaver) es compatible con (QuickTime) y con etiquetas.

Integración de jQuery Dreamweaver permite poder añadir interactividad

avanzada con las sugerencias de código de jQuery y

JQuery Mobile. jQuery es una biblioteca de JavaScript

estándar, que simplifica la adición de una amplia

variedad de interactividades a las páginas web sin la

necesidad de utilizar Adobe Flash.

Aplicaciones nativas Android e iOS con PhoneGap

Integración con BrowserLab

BrowserLab, es un servicio de Adobe que permite poder previsualizar páginas web

dinámicas y contenido local a través de distinto navegadores web (browsers), teniendo así

una herramienta de diagnóstico y comparación entre ellos. Dreamweaver está integrado en

Adobe BrowserLab, servicio en línea de CS Live que prueba de forma rápida y precisa el

contenido web en diferentes exploradores web y sistemas operativos.

Iniciando el programa Para iniciar el trabajo con el programa de Adobe Dreamweaver CC2014, podemos usar cualquiera de las siguientes formas:

1era Forma

A través del Menú Inicio

2da Forma Desde el Menú de Inicio > Todos los Programas > Adobe Master Collection CC2014

Entorno de Trabajo

La ventana inicial de trabajo, no ha cambiado en nada, presentando las mismas

secciones que las versiones anteriores. O sea, Abrir un elemento reciente, Crear

nuevo, Elementos destacados y Recursos.

La variación del aspecto de la mesa de trabajo, ha cambiado ligeramente, pero aún se cuenta con las opciones que permiten modificarlo como una versión anterior.

1. Barra de Menú.

2. Barra Documento

3. Menú de Paneles

4. Documento

5. Panel de Propiedades

Aunque esta vista no es definitivo, ya que se puede elegir el área de trabajo según sea

requerido.

Configuración de un Sitio Local Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño

similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las

páginas que va a contener.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los

documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para

contener las imágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas

carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la

hora de trabajar. Esto es lo que se conoce como sitio local.

Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto,

lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.

La organización de los archivos en un sitio permite administrar y compartir archivos,

mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el

servidor, etc.

Es conveniente que la página inicial del sitio tenga el nombre index.htm o index.html, ya

que los navegadores buscan una página con ese nombre cuando se intenta acceder a una

URL genérica.

Por ejemplo, si escribiéramos la dirección genérica http://www.peru.com en el navegador,

éste intentaría cargar la página http://www.peru.com/index.htm, por lo que se produciría

un error en el caso de que no existiera ninguna página con el nombre index.htm.

Ejercicio 1: Creando el Sitio Web Instituto.

- Ir al Menú Sitio > Administrar Sitios. En esta ventana podrá eliminar o conservar aquellos Sitios que Ud. desee.

- De clic a Nuevo > Sitio. Escriba el nombre del sitio y elija la ubicación en donde guardar los archivos.

- Luego, pasaremos a configurar lo servidores de prueba, por lo pronto, gradamos los cambios.

- Si se muestra la ventana de Administración, de clic a Listo.

- Observe la Ventana Archivos (si esta oculta pulse F8).

- Desde esta ventana, puede realizar las mismas operaciones que podría hacerlas

desde Windows, obviamente con los archivos del sitio (copiar, pegar, eliminar, renombrar, mover, crear carpetas, etc.).

- La estructura del sitio, ubicación y contenido, pueden transportarse fácilmente a

través de un archivo que puede ser exportado e importado, para continuar un trabajo desde otro equipo.

Creación de Documentos HTML.

Las páginas que vemos en Internet están escritas utilizando el lenguaje HTML (Hyper Text

Markup Language). Este lenguaje está basado en etiquetas que marcan el inicio y fin de

cada elemento de la página Web.

Por ejemplo, el título de la página Web se escribe entre las etiquetas <title> y </title>. Como

ves, ambas etiquetas consisten en poner un mismo comando entre los símbolos "<" y ">". La

primera etiqueta indica inicio, y la segunda, que incluye el símbolo "/", indica final.

Las etiquetas disponen de atributos que permiten definir características del elemento sobre

el que actúan. Por ejemplo, <table border="1"> indica que la que se trata de una tabla, y que

tendrá un borde de grosor 1.

Una página HTML básica tendría el siguiente aspecto:

El ejemplo anterior mostraría una página con un sólo párrafo en el que parte del texto enlaza con la web del Instituto SISE. Puedes probarlo copiando el código y pegándolo en un archivo de texto, que debes guardar con la extensión .htm. Observa que cada etiqueta tiene una apertura y un cierre, y que están anidadas unas dentro de otras. Las etiquetas que se introducen en un documento HTML no son visibles cuando el documento se muestra en un navegador (IExplorer, Firefox, Opera, Chrome, etc). Cuando un usuario desde Internet solicita ver una página el servidor Web envía la página al navegador y este interpreta las etiquetas para dar la página correctamente formateada. Cuando utilizamos Dreamweaver para crear una página Web no tenemos que preocuparnos de todo esto. Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico. Esto nos facilita muchísimo el trabajo.

Ejercicio 2: Creando una página web HTML.

- Una vez configurado el Sitio, ir al menú Archivo > Nuevo, o simplemente pulsar CTRL+N para crear una nueva página,

- En la ventana NUEVO DOCUMENTO, elegir PAGINA EN BLANCO, tipo de página: HTML, Diseño: NINGUNO. Clic en CREAR.

- En la zona superior, si la vista (1) se halla el modo DISEÑADOR, tendrá la siguiente apariencia. Observe los botones CODIGO, DIVIDIR y DISEÑO (2), el cuadro en donde se puede insertar el TITULO DE LA PAGINA (3) y la DIRECCION (4, nueva característica).

- Activar el botón CODIGO, y escribir las siguientes etiquetas HTML. Podrá darse cuenta que a medida que escribe se muestra una ayuda inteligente que le permite completar las etiquetas.

- Debe quedar de la siguiente manera:

- Ir al Menú Archivo > Guardar, o simplemente pulse CTRL+S, y colocar por nombre inicio. Por defecto se guarda con extensión html.

- Active el botón DIVIDIR y DISEÑO, y observe la vista previa.

Establecer el navegador predeterminado El navegador web es un programa o aplicación que nos va a permitir movernos por internet y acceder al contenido de las webs, blogs, foros, galerías fotográficas, etc., de Internet. Posiblemente el navegador Internet Explorer sea el más conocido por todos al estar integrado en Windows, no obstante, también disponemos de otras alternativas como por ejemplo: Mozilla Firefox, Opera, Flock, Chrome, Maxthon, Avant Browser, Kmeleon, etc. En el Menú Archivo > Vista previa en el navegador, puede elegir mostrar su diseño en cualquier navegador instalado en su equipo, o Editar la lista de navegadores para seleccionar uno por defecto.

Formateando el Diseño de la Página

Modificando el Título de la página

En el ejemplo anterior pudo modificar el título del documento en el texto encerrado

entre las etiquetas <title> </title>. Esta misma característica se puede hacer

directamente desde el cuadro de título.

Aplicando propiedades al documento Desde el Panel de Propiedades se pueden modificar las propiedades del documento activo,

para esto de clic sobre el botón Propiedades de la página…

Al activar el botón EXAMINAR, en la imagen de fondo, le solicitará una confirmación para

copiar el archivo desde la ubicación elegida, hacia la carpeta de su sitio web.

Se sugiere que cree una carpeta en donde pueda almacenar las imágenes.

Al aceptar las modificaciones, se podrá observar algo como esto:

Esto puede cambiar si el valor de la propiedad repetir es distinto (no-repetir, repetir-x,

repetir-y).

Si activa la vista dividir o código, podrá notar la creación de estilos.

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

Formateando textos en el documento

Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del Panel de Propiedades, que están clasificadas en dos categorías HTML y CSS.

Modificando las propiedades HTML

Formato: Permite seleccionar un formato de párrafo ya definido para HTML, que

puede ser encabezado, párrafo o formato predeterminado. Los encabezados se

utilizan para establecer títulos dentro de un documento.

Negrita (B) y Cursiva (I): El botón B encierra el texto en una etiqueta

<strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra

entre <em></em>, que por defecto se ve en cursiva.

Listas: Estos botones permiten crear listas con viñetas o listas numeradas.

Sangrías: Estos dos botones permiten sangrar el texto y anular la sangría. La

sangría es una especie de margen que se establece a ambos lados del texto. En

este caso los botones se refieren a sangría a la izquierda del texto.

Ejercicio 3: Modificando las propiedades HTML.

- Crear un nuevo documento y escribir el siguiente texto:

- Seleccionar (1), y en Formato, elegir Encabezado 1.

- En (2), y aplicar B e I.

- En (3), y aumentar sangría una vez.

- En (4), aplicar en Formato, Encabezado 2, y activar I.

- En (5), aplicar Lista Numerada, y activar I.

- Una vez completado, la muestra debe quedar así:

- Guardar con el nombre de computacion.html

Modificando las Listas.

En el botón Elemento de Lista, se puede modificar el estilo de la numeración o viñeta usada en la creación de la lista.

Modificando las propiedades CSS

Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear

nuestra página y darle el diseño que queramos. Podemos cambiar desde propiedades

simples, como el color de fondo, hasta cosas más vistosas, como hacer que un bloque

se muestre en una posición determinada o que un elemento cambie al pasar el cursor

sobre él

Regla de destino: Las reglas CSS sirven para definir a qué elemento aplicamos el estilo, y cómo lo hacemos. Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto antes de acabar el tema.

Editar regla: Mediante este botón accedemos a las opciones para la creación o modificación de estilos CSS, de la regla seleccionada.

Panel CSS: Este botón abre el panel CSS si no lo tuviéramos abierto.

Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga 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 esta no existe se verá en Helvetica.

Estilo: Estos botones ponen el texto en negrita y cursiva respectivamente. Pero en este caso, generan un estilo css en línea.

Alineación: A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada. Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por ejemplo sobre un párrafo.

Tamaño: Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, porcentajes del tamaño base, etc.

Color: Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí, el color del texto por defecto será el negro.

Ejercicio 4: Modificando las propiedades CSS.

- En el documento computacion.html, modificar lo siguiente

- Seleccionar (1), y establezca una nueva regla con el nombre: Textos y modificar los siguientes valores: Categoría Tipo

Font-family: Verdana, Geneva, sans-serif Font-size: 12 px Font-style: italic Color: (azul)

- Verifique que el texto se encuentre seleccionado y la regla de destino indique .Textos

Hojas de Estilo Podemos exportar estilos que se encuentren incrustados en la página HTML a una nueva hoja de estilos haciendo clic derecho sobre el estilo en el Panel CSS y seleccionando Exportar. Se abrirá el cuadro de diálogo Exportar estilos como archivo CSS que te permitirá guardar todos los estilos incrustados en un nuevo archivo CSS. Esta opción es muy útil si tienes los estilos incrustados en una página y queremos utilizarlos en otras también. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la adjuntamos en cualquier página que queramos utilizarlos.

Ejercicio 5: Creando una hoja de estilos.

- Crear un nuevo documento html, y guardar con el nombre de pagina01.

- Como necesitamos un texto, usemos un texto aleatorio de los que podemos encontrar en diferentes web, como por ejemplo: http://www.lipsum.com/

- Establecer 5 párrafos, y clic en Generar Lorem Ipsum. Luego, copiar el texto mostrado en pagina01.html, y guardar los cambios.

- Ir al Menú Archivo > Guardar como, o pulsar CTRL+S, establecer el nombre pagina02.html.

- Realizar algunos cambios, para que los documentos sean diferentes.

- Pulsar CTRL+N para crear un nuevo documento Página en blanco > CSS, y guardar con el nombre de estilos.css

- Para adjuntar la hoja de estilos a la pagina01, solo se debe activar la opción Adjuntar hoja de estilos, del menú contextual Estilos CSS.

- Luego, en la ventana Vincular hoja de estilos externa, activar VINCULAR, y desde el botón Examinar elegir el archivo estilos.css.

- Se genera la etiqueta HTML <link..> que puede observar en el código.

- Crear una nueva regla llamada .Titulo con los siguiente valores.

- Aplicar la regla al título Pagina 1.

- Crear una nueva regla llamada .MiEstilo_1 con los siguientes valores: o En la Categoría Tipo

Font-family: Verdana, Geneva, sans-serif Font-size: 12 Color: azul

En la Categoría Bloque Text-align: center

- Aplicar al segundo párrafo de la página 1

- En la pagina02.html, adjuntar la hoja de estilos: estilos.css, y aplicar los estilos

creados.