Incrustación de vídeos y contenido HTML en Adobe Muse

El formato HTML incrustado hace referencia al código fuente generado por un sitio web de terceros, como Google, YouTube, Flickr o Picasa. Puede configurar una cuenta con estos sitios web, iniciar sesión y, a continuación, copiar el código incorporado de estos sitios y agregarlo a su sitio.

Pegar HTML incrustado en una página, es como poner una ventana dentro de una página en su sitio que muestra el contenido de un sitio de un tercero dentro de ella.

HTML incrustado es un método excelente para añadir información compleja (como, por ejemplo, mapas, previsiones meteorológicas, cotizaciones en bolsa), además de contenido multimedia (como vídeos digitales, proyecciones de diapositivas y archivos de audio) de forma rápida y sencilla. Esta estrategia tiene la ventaja añadida de que permite utilizar un sitio de terceros como un servicio de alojamiento e interfaz de carga. Por ejemplo, si crea una cuenta gratuita en YouTube, puede crear su propio canal de YouTube y cargar el contenido de vídeo para su sitio. YouTube incluye una página web que simplifica el proceso de carga y aloja los archivos de vídeo en su sitio. Si desea actualizar el sitio, basta con añadir más vídeos en su canal de YouTube, copiar el código incorporado y, a continuación, pegarlo en una página para añadir nuevos vídeos a su sitio de Muse.

En esta sección, deberá copiar el código fuente de Tumblr. Se trata de un servicio en línea gratuito que requiere crear una cuenta e iniciar sesión y, a continuación, publicar entradas de blog que están a disposición del público. Los blogs son fáciles de utilizar y son especialmente útiles cuando desea que sea más fácil para alguien que no tiene muchos conocimientos técnicos actualizar su propio sitio. La mayoría de sitios de blogs incluyen una interfaz en línea, por lo que se puede utilizar cualquier navegador para iniciar sesión en su cuenta y publicar nuevas entradas, sin necesidad de tener conocimientos sobre HTML o software adicional.

Nota: no es necesario que los usuarios que visiten su sitio web tengan una cuenta de Tumblr para ver el blog que haya incrustado en la página. La única persona que necesitará tener una cuenta es usted, y la usará durante la fase de diseño para crear un blog personalizado y generar el código de incrustación que añadirá al sitio web.

1. En este tutorial no es necesario crear una cuenta en Tumblr para continuar. Simplemente copie el código que aparece debajo y que generó el sitio web de Tumblr al crear un blog gratis:

<iframe src="http://katiescafe.tumblr.com/" width="910" height="1400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>

2. En la vista Plan, haga doble clic en la miniatura de página de eventos para abrir la página y editarla en la vista Diseño.
3. Haga clic en medio de la página vacía y use uno de los siguientes métodos para incorporar el código HTML.

• Elija Edición > Pegar o use el método abreviado de teclado (Comando+V para Mac o Control+V para Windows) para pegar el código directamente en la página.
• Elija Objeto > Insertar HTML. Haga clic dentro del campo de la ventana Editar HTML que aparece y pegue el contenido. Haga clic en OK para cerrar la ventana Editar HTML.

Nota: en la mayoría de los casos, Muse reconocerá código HTML y se incorporará automáticamente el HTML que pegue directamente en la página. Sin embargo, si aparece el código de la página, en lugar del contenido de la página web de terceros, a continuación, intente seleccionar Objeto > Insertar HTML en su lugar.

Después de incorporar el código HTML, verá un cuadro delimitador de color azul con manejadores alrededor de las publicaciones del blog que se incluyeron para la cuenta de Tumblr de Katie's Café.

4. Utilice la herramienta Selección para arrastrar los manejadores y cambiar el tamaño del contenido del blog, para que abarque aproximadamente el 80% de la anchura de la página. Centre el contenido del blog en la página, para permitir que el gráfico de fondo de mosaico se muestre a través de los laterales izquierdo y derecho. Los rectángulos de medición azules muestra la distancia de otros objetos. Una guía roja de alineación aparece brevemente para indicar cuando está centrado verticalmente el objeto seleccionado.

Eso es todo lo que se necesita para incorporar código HTML en las páginas de Muse. Si alguna vez desea editar el código HTML, puede hacer clic con el botón derecho en un elemento HTML incrustado y elegir Editar HTML en el menú contextual que aparece. De este modo, se abre la ventana Editar HTML para que pueda acceder al código pegado anteriormente.

Ahora es el momento de revisar los cambios realizados en la página de eventos:

5. Seleccione Archivo > Vista previa de página en navegador para ver la pantalla de la página de eventos en una nueva ventana del navegador.

Tenga en cuenta que cuando se desplaza hacia abajo por la lista de entradas del blog, el encabezado aparece en la parte superior del contenido de otra página. Este comportamiento se debe a que la página de eventos utiliza la página maestra Foreground, y el contenido del encabezado de dicha página maestra está configurado para mostrarse en primer plano.

La página de eventos ya está completa. En la siguiente sección, aprenderá a pegar contenido HTML incrustado dentro de un widget, para controlar el modo en el que el contenido de terceros se muestra en función de la interacción del usuario.

Incrustación de un vídeo en el sitio web de Muse

Actualmente el contenedor de destino se rellena con un color de relleno gris. Sin embargo, puede colocar todos los tipos de contenido que se encuentran en el contenedor de destino, incluyendo diferentes archivos de imagen, rectángulos rellenos, texto o HTML incrustado que ha copiado de otro sitio web.

Para este ejemplo, pegará HTML incrustado que fue generado por YouTube.

Supongamos que ha visitado una página en YouTube.com para ver un video que cargó con su cuenta. Si hace clic en el botón Compartir y, a continuación, hace clic en Insertar, puede acceder y copiar el código incrustado del vídeo.

Para este vídeo, el código de incorporación del vídeo de Katie's Café ya se ha copiado en su sitio, por lo que no tiene que visitar YouTube. Copie el código incorporado que se muestra a continuación para guardarlo en el portapapeles:

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen></iframe>

El código anterior utiliza etiquetas de iFrame para rodear el vínculo al archivo de vídeo publicado en YouTube. Un iFrame es un contenedor HTML que permite visualizar contenido dentro de una "ventana" cuando lo añade a la página web.

Después de copiar el código anterior, vuelva a Muse.

1. Utilice la herramienta Selección para hacer clic en el borde de color gris de la página, de modo que el indicador de selección de la esquina superior izquierda muestre la palabra Página. Esto significa que toda la página está seleccionada.
2. Haga clic en el contenedor más grande de destino con el color de relleno gris. El indicador de selección de la esquina superior izquierda muestra la palabra: Composición. Haga clic de nuevo en el contenedor de destino gris, para que el indicador de selección muestre la palabra: Contenedor. Vuelva a hacer clic en él (Destino) y, a continuación, una vez más, hasta que el indicador de selección muestre la palabra: Marco de imagen. Pulse la tecla Retroceso (Windows) o para eliminar (Mac) para eliminar el marco de la imagen desde el contenedor de destino.

Mientras el contenedor interior de destino esté aún seleccionado, a continuación se debe pegar el código HTML que ha copiado anteriormente en el contenedor de destino.

Nota: tal y como pudo observar al pegar la imagen principal en el contenedor de desencadenante, pegar el código dentro de un contenedor de destino puede ser un poco difícil porque el objetivo es pegar el código DENTRO del contenedor de destino del widget. Es posible (en función del elemento seleccionado actualmente) pegar el código de vídeo fuera del widget, por lo que está incorporado directamente en la página. Continúe con cuidado... si prueba la caja de iluminación haciendo clic en Vista previa y ve que el vídeo se muestra aunque todavía no haya hecho clic en la imagen principal, significa que el código de vídeo no se pegó correctamente en el contenedor, que es la razón por la que aparece de forma inmediata. El vídeo solo se debe mostrar después de hacer clic en la imagen principal.

Siga estos pasos para pegar el código de vídeo en el contenedor de destino (mientras el indicador de selección muestra la palabra: Contenedor).

3. Elija Objeto > Insertar HTML. En la ventana que aparece, seleccione el texto falso y pulse la tecla para eliminar (Mac) o Retroceso (Windows) para quitarlo. Elija Edición > Pegar para pegar el código de YouTube que ha copiado anteriormente en el campo del código HTML. Haga clic en OK para cerrar la ventana de código HTML.

Nota: en la mayoría de los casos, Muse detecta de forma automática cuando se pega código HTML, y reconoce que es HTML, en lugar de texto sin formato. Por lo tanto, si lo prefiere, en lugar de elegir Objeto > Insertar HTML para abrir la ventana HTML, también puede hacer clic con el botón derecho del ratón (o mantener pulsada la tecla Control y hacer clic) mientras que el contenedor de destino interior esté seleccionado y elegir Pegar en el menú contextual que aparece. (O elija Editar > Pegar o utilice el método abreviado de teclado para pegar el código fuente en el contenedor de destino). Muse ofrece varios métodos para lograr el mismo objetivo de pegar el código de vídeo en el contenedor de destino.

Después de pegar el código en el contenedor de destino, verá que se muestra el primer fotograma del vídeo (una taza de café). El primer fotograma del vídeo indica que se ha pegado el código incorporado HTML correctamente. El vídeo no se reproduce mientras se edita la página en la vista Diseño. Solo se reproducirá después de hacer clic en el botón Vista previa en el panel de control o previsualizar la página en un navegador.

4. Utilice la herramienta Selección para cambiar el tamaño del contenedor de destino, si es necesario, para ampliar las dimensiones y que se ajuste al tamaño del contenido de vídeo incorporado de HTML. La anchura debe ser de aproximadamente 670 píxeles y la altura de aproximadamente 415 píxeles. Mientras el vídeo esté seleccionado, el indicador de selección muestra la palabra Elemento HTML.
5. Mientras el contenedor de destino esté seleccionado, pulse Esc para seleccionar el contenedor exterior. O si lo prefiere, haga clic fuera para eliminar la selección del widget de la pantalla de caja de iluminación y, a continuación, haga clic en ella dos veces: una vez para seleccionar la composición y, a continuación, nuevamente para seleccionar el contenedor más grande. Utilice la herramienta de selección para arrastrar los manejadores del contenedor, de forma que el contenedor de destino quede centrado dentro. Cambie el tamaño de las dimensiones del contenedor a una anchura de 710 píxeles y una altura de 460 píxeles.
6. Utilice el menú de relleno para establecer el color de relleno del contenedor en un color marrón (#63301B) y establecer la opacidad del color de relleno en 100.

7. Seleccione el marco de texto en la parte inferior del contenedor y pulse la tecla para eliminar (Mac) o Retroceso (Windows) para quitarlo. El marco de texto se puede rellenar con una leyenda para el contenido de destino, pero en este proyecto, no se usa.
8. Seleccione el cuadro de cierre (con una X) de la esquina superior derecha del contenedor. Haga clic dentro del cuadro de cierre para seleccionar su etiqueta y eliminarlo. Utilice el menú Relleno para establecer el color de relleno en ninguno. Haga clic en el icono de la carpeta situado junto a la sección de imagen del menú de relleno y busque y seleccione el archivo llamado icon-close.png. Utilice la herramienta de selección para cambiar el tamaño del cuadro de cierre, a fin de que la imagen del icono de cierre se muestre.
9. Utilice la herramienta de selección para volver a colocar el contenedor de destino y los contenedores de desencadenante, para moverlos a la ubicación en la que desea que aparezcan en la página.
10. Mientras que la composición está seleccionada, haga clic en el botón de flecha azul para abrir el panel Opciones. Para este ejemplo, utilice los siguientes ajustes:
    • Posición: caja de iluminación
    • Transición: atenuación
    • Reproducción automática: desactivado
    • Reorganizar: desactivado
    • Ocultar todo al inicio: desactivado
    • Activar barrido: activado
    • Activar encima: desactivado
    • Botón Cerrar: activado
    • Mostrar partes de la caja de iluminación al editar: activado
    • Mostrar todo en modo de diseño: activado

Haga clic en cualquier lugar fuera del menú Opciones para cerrarlo. Llegados a este punto, el widget está ahora configurado y listo para ser probado.

Anteriormente en este tutorial, ha aprendido cómo incorporar código HTML en las páginas para añadir un blog de Tumblr en la página de eventos. También ha visto cómo pegar HTML incrustado dentro de un widget de composición de caja de iluminación, para mostrar un vídeo de YouTube en una ventana de caja de iluminación cuando el visitante hace clic en un botón. En esta sección, usted analizará un tipo más de HTML incrustado proporcionado por el sitio de Google Maps. Siga estos pasos:

1. Si la página de visitas no está abierta en la vista Diseño, haga clic en Plan y, a continuación, haga doble clic en la miniatura de la página de visitas para editarla.

Este código fuente se ha copiado desde el sitio de maps.google.com. Puede crear un mapa personalizado para una dirección (o en este caso, varias ubicaciones). Es un servicio gratuito, solo tiene que proporcionar la dirección (o direcciones) y hacer clic en el botón de creación de mapas.

Después de crear un mapa, la interfaz de Google Maps permite introducir un título y una descripción. A continuación, puede hacer clic en el botón de vínculo para acceder al código. Seleccione el código HTML correspondiente en el campo con una etiqueta de pegar HTML para incrustarlo en el sitio web, y estará listo para volver a Muse e incrustar el HTML en la página.

Para este tutorial, no es necesario que cree un nuevo mapa usted mismo. Si prefiere probarlo, pruebe a escribir cualquier dirección, crear un mapa y copiar el código. Sin embargo, si prefiere simplemente probar cómo funciona, puede trabajar con algunos códigos HTML generados previamente.

2. Copie el siguiente código fuente:

<iframe width="887" height="298" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=218302982680021663941.00049fcd9cf93276f540e&amp;ll=37.7737,-122.43782&amp;spn=0.067844,0.098877&amp;z=12&amp;output=embed"> </iframe>

3. Pegue el código en la parte superior de la página de visitas. Utilice la herramienta Selección para colocar el HTML incrustado en el centro vertical de la página, cerca de la parte superior, de forma que aproximadamente un cuarto del mapa se superponga con el área del encabezado. Asegúrese de dejar algo de espacio entre el mapa y el gráfico de flor debajo de él para que se pueda añadir una descripción de texto.
4. Utilice la herramienta Texto para arrastrar un marco de texto debajo del mapa incorporado. Copie el siguiente texto y péguelo en el marco de texto:

While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie's impeccable attention to detail, commitment to service, and, above all, enjoyment of good food.

5. En el panel de texto, aplique la siguiente configuración para dar estilo al texto:
   • Fuente: Droid Serif (o cualquier fuente serif)
   • Tamaño de fuente: 14
   • Color de fuente: #222222
   • Alineación de fuente: izquierda
   • Interlineado: 120%

Después de añadir la descripción al mapa, la página de visitas ya se ha completado.

6. Seleccione Archivo > Vista previa de página en navegador para ver cómo la página de visitas aparece en un navegador.

Debe tenerse en cuenta que el mapa de Google HTML incrustado es interactivo. Puede hacer clic en las flechas para desplazarse por el mapa en su ventana, y también puede hacer clic en los botones + y - para acercar y alejar.

El diseño del sitio está ahora terminado en todas las páginas. En las siguientes secciones de este tutorial, verá cómo dar los toques finales y publicar el sitio como una versión de prueba gratuita.

 Incrustación de código HTML en las páginas de Adobe Muse

Puede incrustar código HTML en las páginas de su sitio para añadir funciones complejas de sitio que se muestran dinámicamente desde un servidor web de terceros. Estos fragmentos de código se pueden copiar desde distintos proveedores de servicios web, como Google, Yahoo!, YouTube y muchos otros, y después pegarse según convenga en las páginas de Muse. En esta sección podrá ver dos ejemplos distintos de HTML y la forma de añadir rápidamente contenido de medios sociales, así como un mapa interactivo de Google, en un sitio web creado en Muse.

Para empezar, termine con el contenido de la página principal. Si ha seguido todos los pasos, la página principal ya podría estar abierta en la vista Diseño. Si no es así, haga doble clic en la miniatura de la página principal en la vista Plan para abrirla y editarla en la vista Diseño. Deberá añadir el código HTML incrustado encima de la proyección de diapositivas que añadió anteriormente a la página principal.

Adición de un canal de Twitter con HTML incrustado para mostrar los posts más recientes

Puede configurar una cuenta gratuita con muchos servicios diferentes de Internet, incluido Twitter, que le permitirá publicar mensajes que aparezcan en su página web. Sin embargo, además de mostrar la información en Twitter.com, puede utilizar su cuenta para iniciar sesión, copiar el código incorporado y mostrar los mismos mensajes en un sitio web de su creación.

En este ejemplo, se ha configurado una cuenta ficticia para Kevin's Koffee Kart. Esto implica iniciar sesión en Twitter como usuario nuevo y completar el formulario de registro. Después de eso, puede utilizar la interfaz del sitio para publicar mensajes y copiar el código incorporado que permita visualizarlos en cualquier otro lugar en la red. Este es el mismo proceso que va a utilizar para compartir contenido de vídeo, blogs, canales RSS, información de valores bursátiles, pronósticos del tiempo, resultados de partidos y muchos otros tipos de datos dinámicos. Si va a crear un sitio para un cliente, pregúntele si ya usa estos servicios que ayudan a compartir información con los clientes. En muchos casos, puede utilizar su información de cuenta para iniciar sesión y, después, obtener el código de incorporación de los datos que quiere mostrar.

Para evitar que tenga que iniciar sesión en Twitter y crear su propia cuenta de usuario, a continuación se ofrece el código de incrustación copiado de Twitter para la cuenta de Kevin's Koffee Kart:

<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>

<div id="twitFeed">Optional Placeholder Text</div>

<script type="text/javascript">twitter2id("twitFeed");</script>

La página principal está casi completa. Solo queda un último elemento que agregar a la página.

Cuando haya terminado de revisar la página principal, haga clic en el vínculo Plan para volver a la vista Plan.

A continuación, deberá añadir un tipo diferente de HTML incrustado a la página KART MAP.

Uso de HTML incrustado para insertar un mapa de Google en una página web de Muse

Tutorial en vídeo

En esta sección, podrá añadir contenido a la página KART MAP añadiendo HTML incrustado que carga un mapa generado por Google Maps. Es solo otro pequeño ejemplo de las posibilidades de uso de HTML incrustado en su sitio. Se puede incorporar contenido de muchos otros sitios de terceros como, por ejemplo, YouTube, Flickr o Picasa, así como formularios, blogs y otras funciones complejas de sitio que se pueden controlar accediendo a la cuenta y enviando contenido a los sitios correspondientes.

Adición de iframes en su sitio para mostrar otras páginas del sitio con HTML incrustado

Además de utilizar HTML incrustado para insertar código que ha pegado desde un sitio web de terceros, también puede usar el mismo método para incrustar toda una página web en un iframe. Por ejemplo, puede escribir un fragmento de código como este:

<iframe title="Un título para este contenido" src="http://aquisuurl.com" width="900" height="500" style="border: 0;"></iframe>

En el código anterior, sustituya el texto de title="" and url="" por el título y dirección URL de la página web externa deseada. También puede personalizar los valores de anchura y altura de la ventana del iframe para que se adapten al diseño de su sitio.

Opcionalmente, puede añadir un atributo que garantice que el iframe no mostrará una barra de desplazamiento al añadir este código a la etiqueta iframe de apertura:

scrolling="no"

Al seleccionar Objeto > Insertar HTML, puede abrir una nueva ventana de Código HTML e incrustar un iframe en cualquier parte del sitio y, a continuación, definir cualquier dirección URL (dirección del sitio, como www.google.com) para mostrar un sitio que esté activo en Internet en su interior.

También puede utilizar un iframe para incrustar animación, como las animaciones HTML5 creadas en Adobe Edge. Busque el nombre del archivo HTML creado por Adobe Edge y utilice ese nombre de archivo en el atributo URL del iframe:

<iframe src="Project-Header-r1v1.html" width="100%" height="100%" scrolling="no">

</iframe>

A continuación, deberá cargar el archivo HTML de Adobe Edge (y archivos dependientes) en un mismo servidor host, junto con los archivos del sitio Muse. Si va a exportar su sitio a FTP, puede copiar el archivo HTML en la carpeta generada por Muse durante el proceso de exportación. Si publica directamente en los servidores de alojamiento de Adobe Business Catalyst® haciendo clic en el vínculo Publicar de Muse, puede utilizar el software Adobe Dreamweaver® o cualquier cliente FTP para cargar los archivos. Para obtener más información sobre cómo cargar archivos por FTP a los servidores de alojamiento de Business Catalyst, consulte Publicación de sitios web.

Aplicación de formato a los elementos de un formulario de contacto

Si utiliza algunas reglas de CSS estándar, podrá aplicar formato a los elementos del formulario de contacto que creó en la interfaz de la consola de administración de Business Catalyst. Puede ajustar el aspecto que tendrá el formulario y sus elementos, de modo que se adapten al diseño de la página.

Después de pegar el código fuente del formulario desde la consola de administración a la página en Muse, aparecerá el formulario con sus estilos predeterminados.

Al igual que cualquier otro elemento, se pueden utilizar los controles laterales para cambiar las dimensiones del formulario y moverlo en la página a la ubicación deseada.

Haga clic con el botón derecho del ratón (o pulse la tecla Control y haga clic) en el formulario y elija HTML en la lista que aparece.

Aparece la ventana de código HTML. Esta muestra el código que ha pegado desde la consola de administración en la página. Sitúe el cursor en la parte superior, antes de la primera línea de código, y pulse Intro (Windows) o Retorno (Mac) unas cuantas veces para bajar el código del formulario y dejar algo de espacio para agregar los estilos.

Esta área encima del código del formulario es donde se pueden pegar o escribir las reglas CSS que afectan a la apariencia de los elementos del formulario.

Para ver cómo funciona, copie el código que aparece debajo:

<style type="text/css">

input.cat_textbox, textarea { background-color: #fff; border: 1px solid #cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia, Times, serif; }

input.cat_textbox { height: 16px; }

input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sans-serif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight: bold; text-transform: uppercase; }

.form label, .webform label { font: 14px Georgia, Times, serif; }

table.webform td { padding: 0; }

</style>

Pegue el código en la parte superior de la ventana de HTML, encima del formulario.

Haga clic en OK para cerrar la ventana de código HTML. Observe que la apariencia del formulario se ha actualizado con el nuevo formato. Haga clic en Vista previa o elija Archivo > Vista previa de página en navegador para ver cómo se verá en el sitio publicado.

Puede utilizar esta misma estrategia para controlar muchos de los distintos elementos del formulario que se incluyen al agregar el código del formulario de contacto que copió de Business Catalyst.

Dedique unos minutos a revisar el código que pegó en la parte superior de la ventana. Fíjese en las dos etiquetas de estilo, en la parte superior e inferior de las reglas CSS que las rodean. Esto es importante: sin las etiquetas de apertura y cierre de estilo, las reglas CSS no funcionan. A continuación puede encontrar las dos etiquetas de estilo:

<style type="text/css">

</style>

Estas etiquetas de apertura y cierre de estilo le dicen al navegador que el código de su interior contiene reglas de formato de código CSS. Asegúrese siempre de que estas etiquetas estén en la parte superior de la ventana antes de pegar las reglas CSS dentro.

Si desea realizar cambios en los elementos del formulario para actualizar su apariencia, realice una llamada a la "clase" (que es el nombre asignado a los distintos elementos del formulario), especificando la propiedad que desea actualizar y, a continuación, defina sus atributos.

Tenga en cuenta la siguiente línea de código:

input.textarea {

background-color: #fff;

}

La palabra input.textarea es el nombre asignado a un tipo de campo de texto (su "clase"). A continuación, la siguiente línea realiza la llamada a la propiedad que desea cambiar. En este caso background-color se refiere al color del fondo del campo de texto. Después de los dos puntos, #fff es un atajo en el código CSS para escribir #ffffff (que es el valor hexadecimal de color que especifica el color blanco).

En lenguaje normal, la regla anterior dice: defina el color de fondo de este tipo de campo de texto en blanco.

Para actualizar el formulario, también puede asignarle el color de fondo de un campo de texto a un valor común de color web: rojo. El código siguiente define el color de fondo de ese tipo de campo de texto en rojo:

input.textarea {

background-color: red;

}

Las reglas CSS se escriben con su idioma propio. Igual que ocurre cuando se aprende un nuevo idioma, se necesita algo de práctica para hablarlo con fluidez. Para obtener más información sobre la sintaxis (la gramática utilizada para escribir estas reglas), lea los excelentes tutoriales y guías de referencia de CSS que ofrece en línea de forma gratuita W3Schools.

Una vez listo para comenzar a editar sus propios formularios de contacto, puede utilizar la lista que sigue para identificar el nombre de la clase y las propiedades asociadas que se pueden ajustar para cada elemento del formulario.

<style type="text/css">

</style>

Eliminación de los elementos predeterminados de la parte superior del formulario de contacto

De forma predeterminada, cuando se pega el formulario en la página se comenzará con los dos elementos siguientes.

Si desea eliminar uno o ambos elementos, abra la ventana HTML y mire el código fuente que pegó (directamente debajo de la etiqueta de estilos CSS que puede haber agregado).

Para eliminar la línea *Obligatorio, encuentre esta línea de código y bórrela:

<span class="req">*</span> Required

Para eliminar la etiqueta y el menú Título, encuentre estas líneas de código y bórrelas:

<td><label for="Title">Title</label><br /><select name="Title" id="Title" class="cat_dropdown_smaller"><option value="301457">DR</option><option value="301456">MISS</option><option value="301453" selected="selected">MR</option><option value="301454">MRS</option><option value="301455">MS</option></select></td>

Lista de clases y propiedades para añadir reglas CSS y aplicar formato a los formularios de contacto

Cuando asigne valores de color, obtendrá una variedad de colores mucho mayor utilizando una herramienta en línea, como, por ejemplo, kuler, o un programa de edición de imágenes (Photoshop o Fireworks), para crear valores hexadecimales de color. Los valores hexadecimales de color siempre comienzan con el símbolo #, seguido por una combinación de 3 o 6 caracteres alfanuméricos (entre 0-9 y A-F).

Puede resultarle más fácil utilizar la herramienta Cuentagotas de Muse para seleccionar los colores de su diseño previo. Puede copiar los valores hexadecimales de color desde el campo en el Selector de color y pegarlos en el código. Sin embargo, los 16 colores web siguientes se pueden especificar por su nombre. Su uso puede resultar de mucha utilidad cuando se desea probar una regla:

agua, negro, azul, fucsia, gris, verde, verde lima, rojo oscuro, azul marino, verde oliva, púrpura, rojo, plata, verde azulado, blanco y amarillo

Al especificar los colores por el nombre, no incluya el símbolo # antes del color.

La siguiente lista no es exhaustiva, ya que hay muchas combinaciones diferentes (y muchas otras propiedades que puede utilizar) que afectan a los elementos. Utilice estas sugerencias para comenzar. Haga doble clic para seleccionar un fragmento de código, luego cópielo en su portapapeles.

Para leer más sugerencias sobre el uso de Muse, visite la página Ayuda y tutoriales de Muse; o bien la página de Muse Events (Eventos de Muse), donde encontrará diversos seminarios web, tanto en directo como grabados.