Upload
others
View
12
Download
0
Embed Size (px)
Citation preview
¿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.