Resumen de las nuevas funciones Adobe Dreamweaver CC 2015, Parte - 2


Valor de punto de corte de 768 píxeles en modo de edición con un borde naranja

Visualización del número de línea en la opción Ir a código.
La opción Ir a código del menú contextual de la consulta de medios visuales ahora muestra el número de la línea de código, para facilitarle su relación con el código correspondiente .

Números de línea para el código correspondientes a la consulta de medios visuales

  • Compatibilidad con varias mesas de trabajo
  • Compatibilidad con la extracción de sombras paralelas
  • Sugerencias para trabajar con estilos de capas no compatibles

Ahora, puede abrir archivos PSD con varias mesas de trabajo en el panel Extract de Dreamweaver para extraer los activos. Cada mesa de trabajo se muestra en el panel Capas en forma de carpeta. Para ver el contenido, solo tiene que expandir o contraer la carpeta.

Para aumentar una mesa de trabajo específica, simplemente haga clic en el nombre de la misma.

Haga doble clic en "AJUSTAR”, que aparece en el encabezado del panel, para reducir la mesa de trabajo y ajustar el archivo PSD a la vista actual.

Ahora, al extraer CSS de un archivo PSD que tenga la propiedad Sombra paralela, la propiedad se extrae como box-shadow en CSS.

Sugerencias para trabajar con estilos de capas no compatibles


Hay muchas situaciones en las que se crean varios estilos de capa dentro de un archivo PSD que sí funcionan de forma individual, pero no en conjunto. Extract se encarga de comprobar tales casos y le proporciona sugerencias para trabajar con los estilos de capas que no sean compatibles.

Extract detecta los siguientes casos:

Situación 1: tenemos varias instancias de propiedades que corresponden a colores de fondo. Por ejemplo, en el archivo PSD se han definido dos superposiciones de colores o de degradados.
 
Situación 2: hemos colocado una superposición de color con una opacidad inferior al 100 % encima de una superposición de degradado, o hemos asignado un color de fondo a la capa. En este caso, es difícil determinar el color mezclado que resultará de tal combinación.
 
Situación 3: tenemos una superposición de degradado con una opacidad inferior al 100 % y hemos asignado un color de fondo a la capa. En este caso, también es difícil determinar el color mezclado que resultará de tal combinación.
  
 
Cuando Extract detecta estos casos, muestra un icono de advertencia en la miniatura de la capa incluida en el panel Extract. También muestra el siguiente mensaje en la ventana emergente de la miniatura de la capa y en el CSS de la capa:

"La capa contiene varios estilos de capa que no se pueden representar en CSS. Utilice el selector de color o extraiga la capa como una imagen.”

Asimismo, en los casos en los que un color de fondo semitransparente se superponga a otro color de fondo (situaciones 2 y 3 mencionadas anteriormente), los valores de todos los colores de fondo se muestran en el archivo CSS. Seguidamente, podrá extraer el valor que necesite.
   
  • Mejoras en la edición de una tabla
  • Inspector rápido de propiedades para texto
  • Cambios en el Inspector rápido de propiedades para imágenes

Selección de filas o columnas con un solo clic


Ahora es posible seleccionar filas y columnas de una tabla en la Vista en vivo con un solo clic. Se ha introducido un nuevo icono de flecha (similar al de la Vista de diseño) sobre el cual puede hacer clic para seleccionar una fila o una columna.

  • Seleccione la tabla para ver la Visualización de elementos con el icono de sándwich.
  • Haga clic en el icono de sándwich para entrar en el modo de formato de tabla.
  • Pase el ratón sobre la fila o columna que desea seleccionar. Coloque el ratón sobre el borde de la fila o columna para mostrar una flecha que le indicará que puede hacer clic para realizar la selección.
  • Haga clic para seleccionar la fila o la columna.
  • Selección de una fila de tabla en la Vista en vivo
  • Selección de una columna de tabla en la Vista en vivo
  • Continúe con la edición de la fila o la columna según sea necesario mediante el menú contextual.

Selección de varias celdas arrastrando


Ahora puede seleccionar varias celdas, filas o columnas mediante la operación de arrastrar. Haga clic en una celda y arrástrela a lo largo de varias celdas, filas o columnas para seleccionarlas.

  • Seleccione la tabla para ver la Visualización de elementos con el icono de sándwich.
  • Haga clic en el icono de sándwich para entrar en el modo de formato de tabla.
  • Arrastre y seleccione las filas y columnas necesarias.
  • Selección de varias celdas arrastrando
  • Continúe con la edición de la fila o la columna según sea necesario mediante el menú contextual.

Eliminación de filas o columnas mediante la tecla Eliminar

Ahora puede eliminar filas o columnas seleccionándolas y pulsando la tecla Eliminar/Retroceso.
   
Ahora puede utilizar el Inspector rápido de propiedades para texto en la Vista en vivo para dar formato y añadir sangrías e hipervínculos a su texto rápidamente. Se muestra al hacer clic en el icono de página intermediaria y le posibilita cambiar la etiqueta de los elementos de texto a una de las siguientes: h1-h6, pre y p.

Inspector rápido de propiedades para texto

  • La opción formato le permite cambiar la etiqueta del elemento de texto a una de estas: h1-h6, p, y pre. 
  • La opción vínculo le ayuda a crear un hipervínculo para el elemento de texto. 
  • Los iconos de negrita y cursiva le ayudan a añadir etiquetas <strong> y <em> al elemento de texto.
  • Los iconos de cita en bloque le ayudan a insertar sangría en el texto o a anularla. La etiqueta se inserta en el código o se elimina del mismo en concordancia.

En los documentos de Bootstrap, el Inspector rápido de propiedades para texto también le permite alinear y transformar los elementos de texto.

Seguir Leyendo