Después de crear una nueva página con un diseño CSS en Dreamweaver, tiene un número aparentemente infinito de opciones para editarla, pero primero debe determinar qué estilos de la hoja de estilo corresponden a los elementos que desea editar.
Como probablemente pueda imaginar, puede editar los estilos en un diseño CSS de muchas formas para crear sus propios diseños.
Después de ajustar los estilos existentes para obtener el diseño de página básico de la forma que desee, puede crear tantos estilos adicionales como desee.
Puede utilizar estas mismas instrucciones básicas con cualquier diseño CSS incluido en Dreamweaver. Para editar estilos en un diseño CSS, siga estos pasos:
Abra un archivo de página basado en un diseño CSS de Dreamweaver y elija Ventana → Estilos CSS (o haga clic en la pestaña Diseñador de CSS para expandir el panel).
El panel Diseñador de CSS se abre o se expande.
Haga clic para seleccionar el nombre de la hoja de estilo en el panel Fuentes en la parte superior del Diseñador CSS.
Todos los estilos asociados con la nueva página se enumeran en el panel de selectores.
Seleccione el nombre de cualquier estilo que aparezca en el panel de selectores del diseñador CSS.
Las reglas CSS correspondientes definidas para el estilo se muestran en el panel Propiedades, en la parte inferior del panel Diseñador CSS. Hacer clic en la lista de estilos y revisar sus reglas correspondientes es una buena manera de obtener una descripción general rápida del diseño y ver dónde se almacenan las distintas opciones de formato de página.
Las etiquetas HTML5 de encabezado, .nav y pie de página controlan las secciones principales de la página. Por ejemplo, el estilo del encabezado incluye una regla que hace que el color de fondo sea verde. Por lo tanto, para cambiar el color del área del encabezado en la parte superior de la página, cambia la configuración del color de fondo en la regla del encabezado.
Para editar la configuración de toda la página, como el color de fondo de la página o la fuente principal, el tamaño y el color del texto utilizado en la página, siga estos pasos:
En el panel de selectores del diseñador CSS, seleccione el estilo denominado cuerpo.
Las propiedades definidas en la regla de estilo seleccionada se muestran en el panel Propiedades.
Haga clic en el icono T en la parte superior del panel Propiedades y cambie o agregue la fuente deseada y otras configuraciones de texto.
Puede cambiar el tipo, el tamaño, el estilo y el peso de la fuente. Para cambiar el espacio entre líneas de texto, cambie la altura de la línea.
Desplácese hacia abajo hasta el área Fondo del panel Propiedades y use la paleta de colores en el campo Color de fondo para especificar un color para todo el fondo de la página.
Alternativamente, puede ingresar cualquier código de color hexadecimal en el campo Color de fondo o usar el cuentagotas para probar cualquier color. Para agregar una imagen de fondo, haga clic en el campo URL en la sección Fondo y luego haga clic en el botón Examinar que aparece y seleccione la imagen que desea que sirva como fondo. Utilice los iconos Fondo-Repetir para especificar cómo debe repetirse la imagen de fondo en la página.
Realice otros cambios o adiciones a la regla de estilo.
Los cambios en las reglas de estilo en el panel Propiedades se guardan automáticamente y se aplican al contenido formateado con la regla.
Para cambiar el ancho u otras configuraciones de las áreas de contenido principal, que controlan el tamaño general de la página y el encabezado, pie de página y barra lateral, siga estos pasos:
Para cambiar el ancho de toda el área de diseño principal:
Haga clic en el estilo .container en el panel Selectores del panel Diseñador CSS.
Las propiedades de la regla de estilo .container se muestran en el panel Propiedades, donde también puede editar el estilo.
Cambie el tamaño en el campo Ancho o escriba un nuevo número para el ancho de página deseado.
El ancho del diseño de la página se cambia automáticamente según el tamaño que ingresó. Cuando modifica el ancho del estilo .container, cambia el ancho de todo el diseño porque todos los
etiquetas y otros elementos están contenidos en el
formateados con el estilo .container, y todos están configurados para expandirse para llenar el .container
.
Para modificar el tamaño del área de contenido de la página, seleccione el estilo llamado .content y especifique el tamaño y otras opciones que desee en el panel Propiedades.
Si cambia el ancho del área de contenido en un diseño que incluye una barra lateral, también debe cambiar el ancho de la barra lateral.
Para cambiar el color de fondo de cualquier estilo en la página, haga clic en el nombre del estilo correspondiente y cambie la configuración en la sección Fondo del panel Propiedades.
Por ejemplo, en los diseños CSS de Dreamweaver, la barra lateral se define en un estilo llamado .sidebar1. Por lo tanto, para cambiar el color de fondo, debe hacer clic en .sidebar1 en el panel Selectores, seleccionar la categoría Fondo en el panel Propiedades y seleccionar el color que desee. De manera similar, para cambiar el color de fondo del encabezado, seleccione el estilo llamado encabezado en el panel Selectores y use la paleta de colores.
Para agregar una imagen al encabezado:
Seleccione la imagen de marcador de posición etiquetada Insertar logotipo y presione la tecla Eliminar o Retroceso.
Elija Insertar → Imagen → Imagen y seleccione una imagen usando el cuadro de diálogo Seleccionar fuente de imagen.
Reemplaza texto e inserta imágenes en la barra lateral y las áreas de contenido principal.
Puede agregar o reemplazar texto e insertar imágenes en cualquier página creada a partir de un diseño CSS, tal como lo haría en cualquier otra página web.
Elija Archivo → Guardar todo para guardar la página y los estilos.
Puede utilizar la herramienta Instantánea en Adobe Acrobat CS5 para seleccionar tanto texto como imágenes y crear una imagen de un área determinada dentro de un archivo PDF. El resultado se conoce comúnmente como una captura de pantalla de una sección dentro de un archivo PDF. El resultado es una imagen y su texto no es […]
Diseñado para investigadores y científicos, las capacidades de medición en Photoshop CC son bastante poderosas. Puede medir casi cualquier cosa y contar el número de lo que sea en una imagen técnica, tal vez desde un microscopio o telescopio. Si conoce el tamaño exacto de cualquier elemento en una imagen, puede descubrir casi cualquier cosa […]
Cuando utiliza las herramientas Licuar en Adobe Creative Suite 5 (Adobe CS5) Illustrator, puede doblar objetos (hacerlos ondulados, pegajosos o puntiagudos) creando distorsiones simples o complejas. Las herramientas Licuar pueden lograr todo tipo de distorsiones creativas o extravagantes (dependiendo de cómo se mire) en sus objetos. Usted […]
Cuando tenga texto en su proyecto de Adobe XD, puede comenzar a cambiar las propiedades del texto. Estas propiedades incluyen Familia de fuentes, Tamaño de fuente, Grosor de fuente, Alineación, Espaciado de caracteres (interletraje y seguimiento), Interlineado (interlineado), Relleno, Borde (trazo), Sombra (sombra paralela) y Desenfoque de fondo. Así que revisemos cómo se aplican esas propiedades. Acerca de la legibilidad y la fuente […]
Puede utilizar InDesign para crear y modificar gráficos de códigos QR. Los códigos QR son una forma de código de barras que puede almacenar información como palabras, números, URL u otras formas de datos. El usuario escanea el código QR usando su cámara y software en un dispositivo, como un teléfono inteligente, y el software hace uso […]
Al igual que en Adobe Illustrator, las mesas de trabajo de Photoshop brindan la capacidad de crear páginas o pantallas separadas dentro de un documento. Esto puede resultar especialmente útil si está creando pantallas para una aplicación móvil o un folleto pequeño. Puede pensar en una mesa de trabajo como un tipo especial de grupo de capas creado mediante el panel Capas. Su […]
Envolver texto en Adobe Illustrator CC no es lo mismo que envolver un regalo, ¡es más fácil! Un ajuste de texto obliga al texto a ajustarse a un gráfico, como se muestra en esta figura. Esta característica puede agregar un poco de creatividad a cualquier pieza. El gráfico está obligando al texto a envolverlo. Primero, crea […]
Al diseñar en Adobe Illustrator CC, a menudo necesita que una forma tenga un tamaño exacto (por ejemplo, 2 x 3 pulgadas). Después de crear una forma, la mejor manera de cambiar su tamaño a medidas exactas es usar el panel Transformar, que se muestra en esta figura. Seleccione el objeto y luego elija Ventana → Transformar a […]
Aprenda a aplicar transparencia a gráficos SVG en Illustrator. Explore cómo generar archivos SVG con fondos transparentes y aplicar efectos de transparencia.
Una vez que ha importado sus imágenes a Adobe XD, no tiene mucho control de edición, pero puede cambiar el tamaño y rotar las imágenes como lo haría con cualquier otra forma. También puede redondear fácilmente las esquinas de una imagen importada utilizando los widgets de esquina. Enmascarar sus imágenes mediante la definición de una forma cerrada […]
