Página 1 de 11
Moderador del foro: ZorG 
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Dreamweaver (algunos momentos)
Dreamweaver
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 6:22 PM
Crear, abrir y guardar documentos HTML

Macromedia Dreamweaver ofrece diversas formas de crear un documento. Puede crear documentos HTML nuevos y vacíos; abrir un documento HTML existente, aunque no haya sido creado con Dreamweaver; o bien crear un nuevo documento basado en una plantilla.

También puede abrir archivos de texto no HTML, como archivos JavaScript, archivos de correo electrónico de texto normal o archivos de texto guardados con procesadores de texto o editores de texto. No podrá utilizar todas las herramientas de edición de documentos de Dreamweaver en un documento de texto normal, pero sí podrá utilizar funciones básicas de edición de texto. Entre las posibles razones para abrir un documento de texto figuran editar y depurar código JavaScript, consultar el contenido del archivo de configuración de Dreamweaver o abrir un correo electrónico que contiene un fragmento de código HTML para copiar el código y pegarlo en otro documento.

Para crear un documento HTML vacío en una nueva ventana de documento, realice una de estas operaciones:
• En Windows, elija Archivo > Nuevo desde una ventana de documento existente o elija Archivo > Nueva ventana desde la ventana Sitio.
Si abre la vista de Código (en la ventana de documento) o el inspector de código, podrá ver que el nuevo documento no está totalmente vacío, pues contiene etiquetas html, head y body para que pueda comenzar a trabajar. Mientras escriba en la vista de Diseño de la ventana de documento o inserte objetos tales como tablas e imágenes, podrá dejar abierto un editor de código y observar cómo se crea el código HTML.
Para abrir un archivo HTML existente, lleve a cabo una de estas operaciones:
• Seleccione Archivo > Abrir.
• Si el archivo se ha creado con Microsoft Word, elija Archivo > Importar > Importar HTML de Word.

Si elige Importar HTML de Word, Dreamweaver abre el archivo y le permite especificar opciones para eliminar código ajeno a HTML generado por Word. (Microsoft Word 97 y las versiones posteriores cuentan con el comando Guardar como HTML, que añade código HTML innecesario al convertir un documento a este formato.)

Nota: No se puede importar directamente un archivo de Microsoft Word (.doc) a Dreamweaver. Si desea importar el contenido de un archivo de Word, inicie Word y guarde el archivo como HTML antes de importar el archivo HTML resultante a Dreamweaver.


Establecer el espaciado vertical y horizontal de una serie de imágenes

1. Comience con un documento en el que cada línea contenga una pequeña imagen (por ejemplo, una viñeta gráfica o un icono) seguida de texto. El objetivo es separar las imágenes del texto y de otras imágenes situadas por encima y por debajo de ellas.
2. Seleccione la primera imagen.
3. En el inspector de propiedades, haga clic en el botón de ampliación (la flecha de la esquina inferior derecha) si es necesario para ver todas las propiedades de la imagen.
4. Introduzca números en los cuadros de texto Espacio V y Espacio H para definir el espaciado de la imagen.
5. Haga clic en la barra de título de la ventana de documento (en lugar de hacerlo dentro de la ventana de documento) para que se encuentre activa la ventana de documento sin mover el punto de inserción.
6. Presione la tecla Flecha izquierda para mover el punto de inserción a la izquierda de la imagen. A continuación, presione la tecla Flechaabajo para mover el punto de inserción una línea hacia abajo, dejándolo justo a la izquierda de la segunda imagen de la serie. Seguidamente, presione Mayús+Flecha derecha para seleccionar esa segunda imagen.
Nota: No seleccione la imagen haciendo clic en ella. De lo contrario, no podrá reproducir todos los pasos.
7. Seleccione en el panel Historial los pasos correspondientes al cambio de espaciado de la imagen y la selección de la imagen siguiente. Haga clic en el botón Reproducir para reproducir esos pasos.

El espaciado de la imagen actual cambiará y se seleccionará la imagen siguiente.

8. Siga haciendo clic en Reproducir hasta que haya establecido correctamente el espaciado de todas las imágenes.


Editar un sitio web existente

Puede utilizar Dreamweaver para editar un sitio existente en su disco local, aunque no se haya utilizado Dreamweaver para crear el sitio original.
1. Elija Sitio > Definir sitio y haga clic en Nuevo, o bien elija Sitio > Abrir sitio > Definir sitio. En el cuadro de diálogo Definición de sitio que aparece estará seleccionada la categoría Datos locales.

2. Introduzca las opciones siguientes:
• En el campo Nombre del sitio, introduzca un nombre para el sitio. El nombre del sitio aparece en la ventana Sitio y en el submenú Sitio > Abrir sitio. Utilice el nombre que desee, ya que no aparecerá en el navegador y sólo le servirá de referencia.
• En el campo Carpeta raíz local, especifique la carpeta del disco duro en la que se desea almacenar los archivos, las plantillas y los elementos de biblioteca existentes del sitio. Haga clic en el icono de carpeta para examinar y seleccionar la carpeta o introduzca una ruta y un nombre de carpeta en el campo de texto.
• En la opción Actualizar lista archivos locales autom., indique si desea actualizar automáticamente la lista de archivos locales cada vez que copie archivos en el sitio local. Si desactiva esta opción, mejorará la velocidad de Dreamweaver a la hora de copiar esos archivos, pero el panel Local de la ventana Sitio no se actualizará automáticamente. Para actualizar manualmente la ventana Sitio, haga clic en el botón Actualizar de dicha ventana. Para actualizar manualmente sólo el panel Local, elija Ver >Actualizar local en la ventana Sitio (Windows) o Sitio > Ver archivos del sitio > Actualizar local (Macintosh).
• En el campo Dirección HTTP, introduce el URL de la página definitiva, para que Dreamweaver pueda verificar los vínculos del sitio que utilicen URL absolutos. Por ejemplo, la dirección HTTP absoluta del sitio Web de la Universidad de Navarra es http://www.unav.es
• En la opción Caché, indique si desea crear un caché local para mejorar la velocidad de las tareas de administración de vínculos y sitios. Si no selecciona esta opción, Dreamweaver volverá a preguntarle si desea utilizar un caché antes de crear el sitio. Es recomendable seleccionar esta opción porque el panel Activos sólo funciona cuando se ha creado un caché.

3. Haga clic en Aceptar.

Se abrirá la ventana Archivos del sitio.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 2 | 1:37 PM
Utilizar la barra de herramientas y menús contextuales

La barra de herramientas de Dreamweaver
La barra de herramientas de Dreamweaver contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: Código, Diseño y una tercera vista que combina las vistas de Código y de Diseño. La barra de herramientas contiene algunos comandos comunes relacionados con la selección de vistas y el estado del documento. Los elementos del menú Opciones (botón situado a la derecha) cambia en función de la vista que seleccione.

• Para ver u ocultar la barra de herramientas, elija Ver > Barra de herramientas.
• Para ver código sólo en la ventana de documento, haga clic en el botón Mostrar vista de código.
• Para ver una vista que contenga las vistas de Código y de Diseño, haga clic en el botón Mostrar vistas de código y diseño. Cuando seleccione esta vista, se encontrará disponible la opción Vista de diseño arriba del menú Ver. Utilice esta opción para especificar qué vista debe aparecer en la parte superior de la ventana de documento.
• Para ver sólo la vista de Diseño, haga clic en el botón Mostrar vista de diseño.
• También puede obtener acceso a estas vistas a través del menú Ver.
• Para introducir un título para el documento, utilice el campo Título. Si el documento ya tiene título, éste aparecerá en dicho campo.
• Para ver el menú emergente Estado de archivo, haga clic en el botón de menú de estado de archivo.
• Para previsualizar o depurar un documento en un navegador, haga clic en Vista previa/depurar en navegador y elija uno de los navegadores enumerados en el menú emergente.
• Para agregar o cambiar los navegadores enumerados en el menú, elija Editar lista de navegadores.
• Para actualizar la vista de Diseño, haga clic en el botón Actualizar vista de diseño.
• Para obtener acceso al panel Referencia, haga clic en el botón Referencia.

El panel Referencia contiene información de referencia sobre código HTML, CSS y JavaScript.

• Para desplazarse por el código, haga clic en el botón Navegación por el código.
• Para obtener acceso al menú Opciones, haga clic en el botón de menú Opciones.

En el menú Opciones se enumeran distintas opciones para cada vista. Para obtener más información sobre las opciones de vista de Diseño, consulte Introducción a la disposición.

Nota: Cuando la ventana de documento muestre ambas vistas, dispondrá de acceso al menú Opciones de cada una de las vistas haciendo clic en la vista deseada y luego en el menú Opciones.

Utilizar menús contextuales
Dreamweaver emplea de forma extensiva los menús contextuales, que proporcionan un método para acceder rápidamente a los comandos y las propiedades más útiles relacionados con la ventana o el objeto con el que esté trabajando. En los menús contextuales sólo aparecen los comandos pertinentes para la selección actual.

Para utilizar un menú contextual:
1. Haga clic con el botón derecho del ratón (Windows) o haga clic mientras presiona la tecla Control (Macintosh) en el objeto o ventana. Aparecerá el menú contextual para el objeto o la ventana seleccionados.
2. Seleccione el comando del menú contextual y libere el botón del ratón.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 3 | 1:16 PM
Configuración básica de una página web con Adobe Dreamweaver CS4

En este post daremos a conocer varias herramientas de Adobe Dreamweaver CS4 mediante su uso en la creación de una página web sencilla. Probablemente el resultado diste mucho de una página web profesional, pero para comprender algunas funciones avanzadas de este programa, debemos en primer lugar conocer los procedimientos básicos.

El primer paso es la creación de los archivos correspondientes. Para ello, seleccionamos “Archivo/Nuevo…”. En el cuadro que se abre, seleccionamos “HTML” y “dos columnas fijas, barra lateral izquierda, encabezado y pie” en cada uno de los cuadros correspondientes. Luego, en la columna derecha del cuadro, seleccionamos “XHTML 1.1” en “Tipo de documento” y “Crear nuevo archivo” en “Diseño CSS en:”.

Luego hacemos clic en “Crear”, tras lo cual se abre un cuadro para guardar el archivo CSS que deseamos crear. Seleccionamos “Crear nueva carpeta”, le damos el nombre “archivos” a la carpeta creada, hacemos doble clic en ella y en la parte inferior del cuadro colocamos el nombre del archivo CSS, que será “estilos” (la extensión del archivo se creará automáticamente), tras lo cual haremos clic en “Guardar”.

Una vez guardado el archivo CSS, se abrirán los archivos html y CSS. Ahora guardaremos el archivo html haciendo clic en “Archivo/Guardar como…”. Seleccionamos el directorio raíz (en el mismo que hemos creado la carpeta “archivos”) y le damos nombre al archivo, en este caso, “ejemplo” (nuevamente, la extensión se creará automáticamente si no la colocamos).

Veremos a continuación que tenemos una página elemental en la vista de diseño y los códigos correspondientes en la vista de código. Para trabajar más cómodos, sin tener que estar cambiando las vistas a cada momento, colocaremos la vista dividida.

Establecer valores básicos del diseño
Si hemos mantenido la vista que Adobe Dreamweaver tiene por defecto, en la parte inferior de la ventana hay un panel llamado “Propiedades”. En caso de haber modificado la vista por defecto, podremos restablecerla seleccionando “Ventana/Diseño del espacio de trabajo/Clásico”. Si deseamos mantener la configuración del espacio de trabajo en la forma que la hemos personalizado, para abrir el panel “Propiedades” seleccionaremos “Ventana/Propiedades”.

Arrastraremos este panel hacia arriba, para tener una vista completa del mismo, y en la parte inferior del mismo aparecerá un botón “Propiedades de la página”, que abrirá un cuadro del mismo nombre. En este cuadro estableceremos las propiedades que serán comunes a toda la página, con excepción de aquello que modifiquemos en el archivo CSS con posterioridad.

A la izquierda se encuentra un campo en el cual seleccionaremos cada uno de los tipos de parámetros, propiedades y atributos que podemos modificar.

Modificación de la fuente por defecto
Seleccionaremos en primer lugar “Apariencia (CSS)”. A la derecha de este cuadro, en primer lugar modificaremos las fuentes que la página tendrá por defecto. Esto quiere decir que todo elemento cuyos atributo de fuente no sea marcado tendrá esta característica.

En el campo desplegable de “Fuente de la página” veremos que Dreamweaver nos muestra una lista de combinaciones de fuentes. Estas combinaciones ya están estudiadas, son correctamente visualizadas por todos los navegadores y sistemas operativos, por lo que es conveniente que empleemos alguna de ellas, aunque el programa habilita (ver al final de la lista) la posibilidad de modificar el listado de fuentes.

A la derecha del campo mencionado, hay dos íconos para alternar entre fuentes “normales” y los valores “bold” e “italic”. Es recomendable que las fuentes tengan estos dos valores en “normal” (sin seleccionar nada) para una correcta visualización de los textos de la página y manejar correctamente los contrastes.

Para el ejemplo, seleccionaremos “Verdana, Arial, Helvetica, sans-serif”, con un tamaño de 12px. El color de la fuente lo podemos establecer mediante el tecleado del valor correspondiente en unidades hexadecimales, o empleando la paleta de colores básicos o de un selector de colores estilo Windows. Para el ejemplo, seleccionaremos el color “#006”.

Modificación del fondo de la página
En esta misma ventana podremos modificar otros valores de la página, como el fondo, sea este establecido mediante color, imagen o ambas a la vez.
En el mismo lugar donde hemos modificado las fuentes, podremos modificar los valores de los atributos de fondo. Inmediatamente debajo del campo del color de las fuentes, aparece el campo del color de fondo. En él podremos utilizar la paleta de colores del programa o colocar el valor numérico del color en unidades hexadecimales, que para el caso del ejemplo es lo que haremos, tecleando “#f84”, que nos dará un naranja claro.

A continuación haremos un efecto bastante frecuente en las páginas web, que consiste en establecer un degradado de dos colores en la parte superior del fondo de la página. Para ello utilizaremos una imagen que guardaremos en un directorio llamado “imagenes” que colocaremos en la raíz del sitio. Esta imagen, para el ejemplo, se encuentra en la carpeta comprimida que han descargado.

En primer lugar, deberán seleccionar la imagen examinando en su disco o indicar la ruta de la misma en el campo “Imagen de fondo”. Una vez que han establecido cual es la imagen que utilizarán (para el ejemplo “fondo.jpg” que tiene una ruta “imágenes/fondo.jpg”). Luego estableceremos el tipo de repetición que tendrá, seleccionando uno de los valores de la propiedad “background-repeat” que se encuentra debajo. En el caso del ejemplo que estamos llevando adelante, utilizaremos “repeat-x”.

En esta misma ventana se pueden establecer los márgenes de todo el diseño respecto de la ventana del navegador. En este caso, simplemente daremos un valor de 10px al margen superior, para que el encabezado aparezca algo despegado.
Estos mismos parámetros que hemos modificado, pueden ser establecidos en el HTML (práctica no recomendada) mediante la selección en “Apariencia (HTML)”.

Formato general de los vínculos
En la misma ventana de Propiedades de la Página, se pueden establecer los valores básicos (que tendrán todos aquellos elementos que no tengan valores definidos en forma separada en el archivo CSS) de los vínculos. Para ello se debe seleccionar “Vínculos (CSS)” a la izquierda.

Al igual que todas las demás fuentes de la página, los vínculos pueden ser modificados en todos sus valores. De todas formas cabe recordar que en muy pocos casos se establecen variaciones del tipo de fuente respecto de la fuente principal, por lo que la modificación de este valor muy rara vez la utilizaremos.

Debajo del campo donde se establece el tipo de fuente, aparecen las modificaciones de color para vínculos (general), vínculos de sustitución (establece el valor de “a:hover”), vínculos visitados (“a:visited”) y vínculos activos (“a:active”), por separado, pudiendo optarse por seleccionar un color de la paleta de colores presentada o colocar un valor en RGB.

Más abajo, aparece la configuración del subrayado, algo típico en los vínculos. En este caso se puede elegir entre que los vínculos permanezcan subrayados siempre, no subrayar nunca, mostrar el subrayado cuando se posa el cursor encima, o que siempre permanezca subrayado excepto cuando el puntero se posa encima del vínculo.

Para el ejemplo en el que estamos trabajando, dejaremos el tipo de fuente con su valor por defecto y tampoco modificaremos el tamaño. Para poder visualizar como quedan los vínculos y teniendo en cuenta que el ejemplo con el que viene la plantilla inicial, deberemos crear un vínculo en un sitio cualquiera de la página (por ejemplo, seleccionar algunas palabras e insertarle un vínculo vacío mediante “Insertar/Hipervínculo” y colocar el valor “#” en el campo vínculo. Para poder ver como funcionan los vínculos deberemos poner el área de trabajo en “Vista en Vivo”.

Los colores que utilizaremos serán los siguientes: color de vínculo #900, vínculo de sustitución #f00, vínculos visitados #00C y vínculos activos #f00. El subrayado lo colocaremos en “Ocultar el subrayado al situar cursos encima”.

Formato de los encabezados
Cambiando en el cuadro a “Encabezados (CSS)”, podremos modificar los encabezados de títulos y subtítulos (h1 a h6). Tengamos en cuenta que en Dreamweaver solo se puede establecer un único grupo de fuentes para todos los encabezados. Si se desea establecer fuentes diferentes para distintos encabezados, debe recurrirse a la modificación del archivo CSS directamente. Siguiendo con el ejemplo, estableceremos el tipo de fuente como “Palatino Linotype, Book Antiqua, Palatino, serif”.

Más abajo se puede establecer el tamaño y el color de cada uno de los encabezados. Para el ejemplo solo estableceremos tres niveles de encabezados (h1, h2 y h3) que tendrán todos el mismo color (#a60) y los tamaños serán de 24, 18 y 14 píxeles respectivamente.

Título y codificación
Esto es algo que hemos definido desde el inicio de la creación de la página de ejemplo, pero que en ocasiones puede ser útil cuando estamos trabajando, no tenemos mucha idea de que tipo de codificación va a llevar, o cuando queremos hacer modificaciones del título.

En título deberemos colocar “Ejemplo” para la página que estamos creando. Luego podremos seleccionar el tipo de documento (DTD) de la lista desplegable. Recuerden que siempre es conveniente utilizar lo más avanzado en lenguajes. Debajo del DTD encontraremos la codificación de caracteres. De la lista que trae Dreamweaver, la que nos puede resultar útil es la que tiene por defecto (UTF-8). Para los caracteres en español (el idioma español tiene caracteres que son especiales, como por ejemplo la “ñ” y el tilde), hay otras codificaciones que pueden ser utilizadas, aunque no se encuentran en la lista de Dreamweaver, por lo que solo utilizaremos la ya dicha.

Formulario de normas Unicode y firma Unicode (BOM)
Estos dos parámetros son de programación avanzada. A todos los principiantes les conviene dejar todo esto con los valores que tiene por defecto. Si se activan o modifican estos valores, a lo sumo podrán aparecer algunos caracteres “extraños” en la esquina superior izquierda, y en el caso del BOM, no nos permitirá validar la página.

Solo a los efectos de que tengan una idea de que se trata, daré una breve descripción. En primer lugar, cabe destacar que estos parámetros solo se definen si la codificación de caracteres seleccionada es (UTF-8). Los formularios de normas Unicode es la forma en que algunos caracteres se almacenan. Dos caracteres iguales visualmente, pueden almacenarse en forma diferente, y es con los formularios de normas Unicode que se define esto.
Existen cuatro formularios de normas Unicode, de las cuales la más utilizada, y la que deberemos dejar en nuestra página, es C (Descomposición de compatibilidad).

La firma Unicode BOM, está relacionada con el sentido de lectura del documento. Si esta opción, tal como aparece en Dreamweaver por defecto, se deja desactivada, no sucede nada y el documento puede verse perfectamente y se validará (si el código es válido, claro) en W3C. Los problemas pueden suceder por su activación.

Imagen de rastreo
La imagen de rastreo es una herramienta muy útil que posee Adobe Dreamweaver. Imaginemos que queremos elaborar la página tal como se ve en un layout en psd que hemos hecho antes. Dreamweaver ofrece la posibilidad de colocar esta imagen como fondo mientras encima se va diseñando la nueva página, de forma tal que tendremos siempre la referencia exacta de la imagen.

En el cuadro, cuando seleccionamos esta sección, nos permite abrir una imagen para esta utilidad, y se abrirá un cuadro para su configuración. Este es un tema bastante complejo y que trataremos en otro artículo.

Finalización del ejemplo
Una vez que hemos terminado con este último paso, procederemos a hacer clic en “Aplicar”, para que el resultado se vea en la vista de diseño (esto pueden hacerlo durante el proceso, ya que el cuadro no se cerrará). Luego cerraremos el cuadro “Propiedades de la página”. Para poder ver este trabajo en un navegador, deberemos guardar la página mediante “Archivo/Guardar”. Luego abrimos el navegador y podremos ver la página de ejemplo. El resultado debería ser el siguiente:


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 4 | 11:37 AM
Como editar y crear propiedades CSS con Adobe Dreamweaver

Las facilidades de trabajo que ofrece Adobe Dreamweaver incluyen la edición y creación de reglas y propiedades CSS. Cuando nos encontramos realizando un diseño, necesitaremos inevitablemente generar nuevas reglas en la medida que se vayan introduciendo nuevos elementos dentro del mismo.

No tendría ningún sentido contar con un programa WYSIWYG para la creación de páginas web, si necesitáramos crear todo o buena parte de los códigos de los archivos CSS en forma manual. Adobe Dreamweaver brinda la posibilidad de realizar el ingreso de nuevas reglas y propiedades CSS y su posterior edición, sin necesidad de salir de la ventana de edición.

A continuación, explicaremos como utilizar esta herramienta. Para ejemplificar cada uno de los pasos que daremos, tomaremos la misma página de ejemplo que hemos utilizado para el artículo anterior. En caso de no haberlo leído, es conveniente que sigan los pasos allí descritos, para lo cual deberán acceder al artículo desde aquí.

Ubicación de las herramientas
Cuando nos encontremos diseñando una página, es conveniente que el cuadro de “Estilos CSS” se encuentre abierto, ya que desde allí podremos crear y modificar todos los estilos, mientras estamos visualizando los resultados.

Para abrir el cuadro, debemos hacerlo desde el menú “Ventana / Estilos CSS” o con el método abreviado “Mayús+F11”. De inmediato, en la columna izquierda de la ventana del programa, donde seguramente ya se encontrarán otros cuadros, se abrirá el cuadro de edición CSS.

Para desplegar dicho cuadro, tal como se realiza con otros cuadros, basta con hacer clic en la pestaña correspondiente, desplegándose el cuadro en la misma columna. Para retirarlo de la ventana y trasladarlo a otra parte de la página, se hace mediante el método de arrastrar desde la propia pestaña.
El cuadro aparece dividido en tres secciones, cuyos tamaños pueden modificarse desde la ventana que encabeza cada una de estas secciones. La posición del cuadro dentro de la columna que contiene los cuadros puede modificarse también arrastrando con el puntero.

Edición de reglas CSS existentes
Esto se aplica a los elementos del diseño que ya han sido creados y que tienen sus reglas y propiedades definidas.

Selección del elementos cuyas reglas y propiedades van a modificarse
Para seleccionar las reglas CSS a editarse, hay dos métodos que se pueden emplear. El primero es seleccionar el elemento cuyas propiedades se van a editar desde la vista de diseño. Si el elemento es texto o imagen, basta con hacer clic en cualquier parte de los mismos. De inmediato aparecerán las reglas y propiedades que definen al elemento en el cuadro.

Si el elemento es una capa (div) o una tabla (table), se debe hacer clic en el borde del elemento. En este caso, aparecerán las reglas que definen a la capa o la tabla, así como las de todos los elementos padre del mismo. Por ejemplo, para editar las reglas y propiedades del encabezado (nos referimos a la capa encabezado), haremos clic en el borde del mismo. El resultado es igual al que se muestra en la imagen anterior.

Modificación e introducción de propiedades
En la parte superior del cuadro, hay dos pestañas que permiten seleccionar entre ver todas las reblas o la actual (seleccionada). Al seleccionar la última, aparecen tres divisiones iguales a las que se muestran en la imagen. En la división superior aparecen todas las propiedades del elemento, aún aquellas que no están especificadas y tienen valores por defecto.

En la división del centro, se muestran la regla involucrada y todos sus padres, hasta llegar a “body”. En la división inferior aparecen las propiedades que figuran en el archivo CSS a la izquierda, mientras que los valores respectivos aparecen a la derecha. Esta sección es editable, bastando para ello hacer clic en la celda que se pretende editar e introducir los nuevos valores.

En la última fila aparece una celda a la izquierda que dice “Añadir Propiedad”. Haciendo clic en ella es posible introducir una nueva propiedad, escribiendo su nombre o seleccionándola del menú desplegable que aparece allí. Hagamos una prueba de ejemplo. Seleccionaremos la capa del encabezado de la página, haciendo clic en el borde. Luego, en la sección inferior haremos clic en “Añadir Propiedad” y buscaremos las propiedades de borde.

Seleccionaremos “border-color” y seleccionaremos el color de borde de la paleta de colores que aparece. Para el ejemplo, utilizaremos uno de los colores que ya nos encontramos empleando, que es el azul “#00C”. Luego introduciremos la propiedad “border-width” a la que le daremos 1px, y la propiedad “border-style”, introduciendo “solid”. Luego de finalizada esta introducción de propiedades, un borde azul debe aparecer alrededor de la cabecera.

Introducción de nuevas reglas
Para introducir una nueva regla, en el ejemplo deberemos crear un elemento nuevo, ya que todos los elementos que se encuentran en la página actual tienen definidas sus reglas y propiedades.

Introduciremos una nueva capa, que será el inicio de un menú sencillo. Haremos un menú horizontal debajo de la cabecera. Para ello deberemos colocar una nueva capa. En la vista de código, haremos clic a continuación de la etiqueta de cierre de la capa del encabezado. Luego daremos “enter” para que se genere una nueva línea en el código, donde introduciremos el nuevo elemento.

Luego haremos clic en “Insertar / Objetos de diseño / Etiqueta div”, abriéndose un nuevo cuadro flotante donde deberemos indicar el lugar donde colocaremos la etiqueta, el nombre de la clase y el Id (o uno solo de los dos, según sea el caso).

Luego de haber rellenado los datos, haremos clic en “Crear nueva regla”, tras lo cual aparece otro cuadro, donde en primera instancia seleccionaremos el tipo de selector que se trata (class, id, una etiqueta html o un selector compuesto) y el lugar donde va a quedar definida la nueva regla.

Tras hacer clic en “Aceptar”, se abrirá el cuadro donde se definen las propiedades de la nueva regla, en el cual colocaremos todas las propiedades que definan a la nueva regla. En este cuadro hay una columna izquierda, donde seleccionaremos la categoría de propiedades que introduciremos. Al hacer clic en ellas, aparecen las distintas propiedades a las cuales podremos ir dando los diferentes valores.

Para el ejemplo, definiremos las siguientes propiedades con los respectivos valores:
Font-family: Arial, helvética, sans-serif
Font-size: 12px
Font-style: normal
Line-height: 20px
Font-weight: bold
Font-variant: normal
Text-transform: none
Text-decoration: underline
Color: #FFF

Luego seleccionaremos “Fondo” a la izquierda e introduciremos el siguiente valor y dejando el resto en blanco:

Background-color: #06F

Luego iremos a cuadro, donde introduciremos el ancho de la nueva capa (la altura está dada por la propiedad “line-height”) en 99% para que junto al 1% del relleno derecho e izquierdo ocupen todo el ancho del diseño.

El resto de las categorías de propiedades y sus valores los dejaremos en blanco, ya que no serán necesarios para establecer la capa que albergue un menú. Al hacer clic en “Aceptar” volveremos al primer cuadro de creación de nuevas reglas, donde haremos clic en “Aceptar”. De esta forma quedará conformada la nueva capa, que aparecerá con un texto indicándonos que deberemos introducir un contenido.

Una vez que abramos el ejemplo en el navegador, deberemos ver la siguiente imagen:

Ahora que conocemos como introducir capas, agregar y modificar reglas y propiedades, en adelante veremos la construcción de algunos elementos, como un menú y como darle formato al encabezado, para poco a poco ir dándole forma al nuevo diseño.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 5 | 12:32 PM
Novedades de Adobe Dreamweaver CS5

Durante el mes de mayo pasado, se produjo el lanzamiento de la versión estable de Adobe Dreamweaver CS5. Como es de suponerse, antes de realizar la compra del nuevo producto (o la actualización desde la versión CS4 o CS3, que también se deben pagar) se debe contar con la información, a fin de evaluar si es conveniente o no realizar la inversión.

Para ello, deberemos analizar las novedades que trae Adobe Dreamweaver CS5 respecto de sus predecesores, comparar las prestaciones y evaluar si las novedades se adaptan a nuestras necesidades o no son suficientemente buenas como para realizar el gasto.

Por ello, hemos decidido realizar una introducción a los elementos incorporados por Adobe en esta nueva versión del más potente editor de páginas web.

Requisitos del sistema
Respecto de Dreamweaver CS4, la nueva versión no necesita de muchos recursos más. Lo único que se modifica es el tamaño de los archivos que se deben descargar. Los requerimientos son los siguientes:

Para Windows
• Procesador Intel Pentium IV o AMD Athlon de 64 bits
• Microsoft Windows XP con Service Pack 2 (aunque se recomienda Service Pack 3 por parte de los desarrolladores); Windows Vista Home Premium, Business, Ultimate o Enterprise con Service Pack 1; o Windows 7
• 512 MB de memoria RAM
• 1 GB de espacio disponible en el disco duro (para la instalación); se necesita espacio libre adicional durante el proceso de instalación (no se puede instalar en dispositivos de almacenamiento extraíbles basados en flash)
• Resolución de pantalla de 1.280 × 800 con una tarjeta de vídeo de 16 bits
• Unidad de DVD-ROM
• Para los servicios en línea, es necesario que se cuente con una conexión de banda ancha.

Para Mac OS
• Procesador Intel multinúcleo
• Mac OS X v10.5.7 o v10.6
• 512 MB de memoria RAM
• 1,8 GB de espacio disponible en el disco duro para su instalación; se necesita espacio libre adicional durante el proceso de instalación (no se puede instalar en un volumen que utilice un sistema de archivos con distinción entre mayúsculas y minúsculas, ni en dispositivos de almacenamiento extraíbles basados en flash)
• Resolución de pantalla de 1.280 × 800 con tarjeta de vídeo de 16 bits
• Unidad de DVD-ROM
• Para los servicios en línea, es necesario que se cuente con una conexión de banda ancha.

Tal como se dijo, los requisitos del sistema son casi idénticos. El tamaño de los archivos descargables es de 458.9 MB en la versión para Windows y de 821.1MB para la versión para Mac OS. Como siempre sucede con los productos, Adobe Dreamweaver CS5 se distribuye en versiones en varios idiomas, entre los que se encuentra el Español.

Lo nuevo
Dado que los requerimientos del sistema son muy similares a la versión anterior, daría la impresión que los cambios realizados a la nueva versión no son muchos. Sin embargo, esto no es así, como veremos.

Compatibilidad integrada con gestores de contenidos (CMS)
Esta es sin lugar a dudas, una de las mejoras sustantivas de la nueva versión de este editor. Se trata de la compatibilidad en la creación y la comprobación con los gestores de contenidos, entre los que se encuentran WordPress, Joomla! y Drupal.

Se trata de una nueva función de archivos relacionados dinámicamente, que permite acceder directamente a los archivos relacionados con una página web, aún en el caso de páginas dinámicas, como es el caso de los gestores de contenidos.

También se cuenta entre las mejoras la posibilidad de la vista en vivo de las páginas dinámicas con mucha precisión, algo que resulta imprescindible para el trabajo sobre este tipo de aplicaciones.

Inspector de CSS
El inspector de CSS ya estaba presente en versiones anteriores, pero en el caso de Adobe Dreamweaver CS5, el mismo permite ver las etiquetas CSS sin tener que leer el código ni utilizar funciones adicionales. Para inspeccionar el CSS en esta nueva versión, basta con colocar el cursor sobre el bloque que se desea inspeccionar, con lo que se abre un pequeño menú que contiene las etiquetas CSS con los valores asignados a las mismas.

Integración con Adobe BrowserLab
Esta es una nueva y poderosa herramienta en línea, que permite previsualizar las páginas web, tanto estáticas como dinámicas, tal como se verá en distintos navegadores y sistemas operativos. Este servicio estará disponible en forma gratuita solo por unos meses, tras lo cual comenzará a ser un servicio pago, tal como lo ha anunciado la compañía. Con esto, se evita tener que recurrir a alguno de los servicios en línea disponibles, con lo que no es necesario salir de Dreamweaver para realizar este tipo de comprobaciones.

Habilitación y deshabilitacion de propiedades CSS
Esta herramienta, que se encuentra en el panel de estilos CSS, permite activar o desactivar los estilos CSS, algo que ya era ofrecido por algunas aplicaciones, como algunas extensiones de los navegadores Mozilla-Firefox e Internet Explorer 8. Nuevamente Adobe pretende dar el máximo de herramientas posibles, a fin de que los usuarios no deban abandonar el programa para realizar algunas comprobaciones.

Sugerencias de código PHP personalizadas

Esta herramienta muestra la sintaxis más apropiada para funciones en PHP previamente personalizadas, con lo que se consigue escribir un código más preciso y en forma más rápida. Se trata de una herramienta bastante avanzada, y que otorga notables beneficios en ahorro de tiempo para aquellos que programan páginas web dinámicas.

Estas sugerencias de código también se extienden a bibliotecas PHP de los CMS, como WordPress, Joomla y Drupal, así como otras bibliotecas PHP no relacionadas con los gestores de contenidos.

Código en vivo y vista en vivo
En las versiones anteriores, cuando se selecciona una sección del código en la vista de código, en la vista de diseño se puede ver un destaque del diseño seleccionado. En Adobe Dreamweaver CS5, basta con pasar el puntero por una sección de código para que en la vista en vivo se marque el elemento, con lo que se tiene una idea clara en forma muy rápida de las diferentes secciones del código.

Mejoras en el manejo de imágenes
La nueva integración con Adobe Photoshop y con Illustrator permite un sencillo, rápido y eficaz manejo de las imágenes, que incluye la edición de las mismas. Esta integración hace que no sea necesario salir del programa para abrir algunos de los software de imágenes, así como tampoco es necesario buscar la imagen a editar, ya que todo se hace en forma automática.

Conclusión
Adobe Dreamweaver CS5 realmente cuenta con mejoras. La más importante, sin lugar a dudas, es la integración con los gestores de contenidos, una herramienta que permite un trabajo más cómodo a quienes utilizan este editor. Una vez que los diseñadores se familiaricen con esta novedad, contarán con un poderoso aliado.

En el resto, se trata de la mejora de algunas herramientas existentes, y en algunos casos, la incorporación de algunas aplicaciones que ya están en uso en plugins de navegadores.

Por supuesto que, a partir de estas mejoras, habrá algunos que entenderán que el gasto en este software o en su actualización desde versiones anteriores es justificado, mientras que habrá otros que preferirán otras opciones, pensando que son pocas las mejoras para realizar la compra del nuevo software.

Como siempre, en este tipo de decisiones solo quien va a emplear la aplicación puede saber que es lo que más le conviene. Mi recomendación es que se descarguen la versión de prueba y hagan su propio análisis antes de tomar una decisión definitiva.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
k4non114
Mensajes: 83
Reputación: 7
Mensaje Nº 6 | 7:48 AM
Una pregunta, Al momento de crear mi propia plantilla con dreamweaver, Ya sea con mi plantilla formato css, Puedo agregarla a mi sitio ucoz y utilizar todos los modulos como lo hago normalmente?.

Si puedes cheka este tuto :) http://foro.ucoz.es/forum/8-809-1
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 7 | 1:57 PM
Claro que puedes tanto crear como editar las plantillas con dreamweaver. Eso sí es posible.
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
k4non114
Mensajes: 83
Reputación: 7
Mensaje Nº 8 | 6:00 PM
a orales muchas gracias por la info :D.

Si puedes cheka este tuto :) http://foro.ucoz.es/forum/8-809-1
Clark-CLK
Mensajes: 55
Reputación: 0
Mensaje Nº 9 | 5:57 PM
Una pregunta, esoy usando el Dreamweaver con un amigo para cambiar el diseño de mi sitio,
me gustaria saber como cambiar las CSS de las plantillas para cuando lo tengamos.
Usamos el dreamweaver V8

Gracias.

Wong Wong!!
http://ahoperpg-maker.ucoz.es
Post editado por Clark-CLK - Martes, 2012-01-03, 5:59 PM
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 10 | 7:02 PM
CSS es una sola cosa y está en el Panel de Control de la web: Diseño –> Gestión de diseño (CSS).
Antes de editar o eliminar algunas cosas, trata de guardar CSS en algún lugar: es que CSS no forma parte del backup (copia de reserva).

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Dreamweaver (algunos momentos)
Página 1 de 11
Búscar: