Incorporar vídeos e conteúdo HTML ao Adobe Muse

O HTML incorporado se refere ao código-fonte gerado por um site de terceiros, como Google, YouTube, Flickr ou Picasa. Você pode configurar uma conta com esses sites, fazer login e copiar o código incorporado de seu site e adicioná-lo ao seu site.

Quando você cola HTML incorporado em uma página, é como colocar uma janela em uma página no seu site que exibe o conteúdo de um site de terceiros.

O HTML incorporado é uma ótima maneira de adicionar informações complexas (como mapas, previsões de tempo, cotações de mercado), bem como rich media (como vídeos digitais, apresentações de slides e arquivos de áudio), de forma rápida e fácil. Essa estratégia tem a vantagem adicional de permitir o uso de um site de terceiros como um serviço de hospedagem e interface de carregamento. Por exemplo, se você criar uma conta gratuita no YouTube, poderá criar seu próprio canal do YouTube e carregar conteúdo de vídeo em seu site. O YouTube inclui uma página da Web que simplifica o processo de carregamento e hospeda os arquivos de vídeo no seu site. Quando quiser atualizar seu site, basta adicionar mais vídeos ao canal do YouTube, copiar o código incorporado e colá-lo em uma página para adicionar novos vídeos ao site do Muse.

Nesta seção, você copiará o código-fonte do Tumblr. Este é um serviço on-line gratuito que requer a criação e conexão a uma conta e depois a postagem de entradas de blog publicamente disponíveis. Os blogs são fáceis de usar e especialmente úteis quando você deseja facilitar para alguém que não está tecnicamente inclinado a atualizar seu próprio site. A maioria dos sites de blog inclui uma interface on-line, portanto, você pode usar qualquer navegador para fazer logon na sua conta e publicar novas entradas, sem nenhum conhecimento de HTML ou software adicional.

Nota: os visitantes que visualizam seu site não precisam ter uma conta do Tumblr para exibir o blog que você incorpora na página. Por ser o projetista do site, a conta é necessária apenas a você para poder criar um blog personalizado e gerar o código incorporado que será adicionado ao site.

1. Neste tutorial, não é necessário criar uma conta do Tumblr para continuar. Simplesmente copie o código abaixo que foi gerado pelo site do Tumblr depois de criar um blog gratuito:

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

2. No modo de exibição Plano, clique duas vezes na miniatura de página eventos para abrir a página e editá-la no modo de exibição Design.
3. Clique no meio da página vazia e use um dos métodos seguintes para incorporar o código HTML:

• Escolha Editar > Colar ou use o atalho de teclado (Command+V para Mac ou Control+V para Windows) para colar o código diretamente na página.
• Escolha Objeto > Inserir HTML. Clique no campo da janela Editar HTML exibida e cole o conteúdo. Clique em OK para fechar a janela Editar HTML.

Nota: na maioria dos casos, o Muse reconhecerá o código HTML e incorporará automaticamente o HTML colado diretamente na página. Entretanto, se você visualizar o código na página, em vez de conteúdo do site de terceiros, tente escolher Objeto > Inserir HTML >.

Após a incorporação do código HTML, você visualizará uma caixa delimitadora azul com alças em torno das postagens do blog que foram inseridas para a conta de Tumblr Katie's Cafe.

4. Use a ferramenta Seleção para arrastar as alças para redimensionar o conteúdo do blog, que mede aproximadamente 80% de largura da página. Centralize o conteúdo do blog na página, para permitir que o gráfico de fundo lado a lado a ser exibido à esquerda e à direita. Os retângulos de medição azul exibem a distância de outros objetos. Uma guia de alinhamento vermelha aparece para indicar quando o objeto selecionado está centralizado verticalmente.

Isso é tudo o que é necessário para incorporar HTML nas páginas do Muse. Para nunca ter que editar o código HTML, clique com o botão direito do mouse em um elemento HTML incorporado e escolha Editar HTML no menu de contexto exibido. Isso abre a janela Editar HTML para que você possa acessa o código que colou anteriormente.

Agora é hora de examinar as alterações feitas na página eventos:

5. Escolha Arquivo > Visualizar página no navegador para ver a exibição da página eventos em uma nova janela do navegador.

Observe que, à medida que você percorre a lista de entradas de blog, o cabeçalho é exibido sobre o conteúdo da outra página. Esse comportamento ocorre porque a página eventos usa a página-mestre de primeiro plano, e o conteúdo de cabeçalho da página-mestre é definido para exibição em primeiro plano.

A página eventos está concluída. Na próxima seção, você aprenderá a colar o conteúdo HTML incorporado em um widget, para controlar o modo como o conteúdo de terceiros será exibido com base na interação do usuário.

Incorporar um vídeo dentro do site do Muse

Atualmente, o contêiner de destino é preenchido com uma cor cinza de preenchimento. Entretanto, você pode colocar todos os tipos de conteúdo no contêiner de destino, incluindo arquivos de imagem diferentes, retângulos preenchidos, texto ou HTML incorporado copiado de outro site.

Neste exemplo, será colado o código HTML incorporado que foi gerado pelo YouTube.

Imagine que você visitou uma página no YouTube.com para assistir a um vídeo carregado com sua conta. Se você clicar no botão Compartilhar e depois em Incorporar, poderá acessar e copiar o código incorporado para o vídeo.

Neste vídeo, o código incorporado de Katie's Cafe já copiou o site, portanto, você não precisa visitar o YouTube. Copie o código incorporado abaixo para salvá-lo na área de transferência:

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

O código acima usa marcas do iFrame ao redor do link para o arquivo de vídeo postado no YouTube. Um iFrame é um contêiner HTML que permite exibir o conteúdo em uma "janela" quando adicionada a uma página da Web.

Após copiar o código acima, volte para o Muse.

1. Use a ferramenta Seleção para clicar na borda cinza na página, para que o Indicador de seleção no canto superior esquerdo exibe a palavra Página. Isso significa que a página inteira está selecionada.
2. Clique no contêiner de destino maior com a cor de preenchimento cinza. O Indicador de seleção no canto superior esquerdo indica a palavra: Composição. Clique no contêiner de destino cinza novamente, para que o Indicador de seleção exiba a palavra: Contêiner. Clique nele novamente (ele diz Destino) e mais uma vez, quando o Indicador de Seleção lista as palavras: Quadro de imagem. Pressione a tecla Backspace (Windows) ou Delete (Mac) para remover o quadro de imagem do contêiner de destino.

Com o contêiner interno de destino ainda selecionado, o trecho a seguir envolve colar o código HTML copiado acima no contêiner de destino.

Nota: assim como você fez experiências ao colar a imagem principal no contêiner de disparo, colar código em um contêiner de destino pode ser um pouco complexo, porque o objetivo é colar código DENTRO do contêiner de destino do widget. É possível (dependendo do elemento selecionado atualmente) colar o código de vídeo fora do widget, para que ele seja incorporado diretamente na página. Então prossiga cuidadosamente… se você testar o negatoscópio clicando em Visualizar e verificar que o vídeo é exibido, mesmo que ainda não tenha clicado na imagem principal, isso significa que o código de vídeo não foi colado corretamente no contêiner, por isso que ele é exibido imediatamente. O vídeo somente deverá ser exibido depois que você clica na imagem principal.

Siga estas etapas para colar o código de vídeo no contêiner de destino (quando o Indicador de seleção exibir a palavra: Contêiner).

3. Escolha Objeto > Inserir HTML. Na janela exibida, selecione o texto de espaço reservado padrão e pressione Delete (Mac) ou Backspace (Windows) para removê-lo. Escolha Editar > Colar para colar o código do YouTube copiado acima no campo Código HTML. Clique em OK para fechar a janela Código HTML.

Nota: em muitos casos, o Muse detectará automaticamente quando você colar código HTML e entenderá que isso é HTML, em vez de apenas texto sem formatação. Assim, se preferir, em vez de escolher Objeto > Inserir HTML para abrir a janela HTML, você também poderá clicar com o botão direito do mouse (ou clicar com a tecla Control pressionada) com o contêiner de destino interno selecionado e escolher Colar no menu de contexto exibido. (Ou escolha Editar > Colar ou use o atalho de teclado para colar o código-fonte no contêiner de destino). O Muse oferece vários métodos para o alcance do mesmo objetivo de colar o código de vídeo no contêiner de destino.

Depois de colar o código no contêiner de destino, você verá o primeiro quadro de vídeo exibido (uma xícara de café). Esse primeiro quadro de vídeo indica que você colou o código HTML incorporado com sucesso. O vídeo não será reproduzido enquanto você estiver editando a página no modo de exibição Design. Ele somente será reproduzido depois que você clicar no botão Visualizar no painel de controle ou visualizar a página em um navegador.

4. Use a ferramenta Seleção para redimensionar o contêiner de destino, se necessário, para expandir as dimensões de acordo com o tamanho do conteúdo de vídeo HTML incorporado. A largura deve ser de aproximadamente 670 pixels e altura deve ser de aproximadamente 415 pixels. Quando o vídeo for selecionado, o Indicador de seleção exibirá as palavras Item HTML.
5. Com o contêiner de destino selecionado, pressione Escape uma vez para selecionar o contêiner externo. Ou, se preferir, clique fora para desmarcar o widget exibição de negatoscópio e clique nele duas vezes: uma para selecionar a Composição e depois novamente para selecionar o contêiner maior. Use a ferramenta Seleção para arrastar as alças de contêiner, para que o contêiner de destino seja centralizado nele. Redimensionar as dimensões do contêiner com uma largura de 710 pixels e a altura de 460 pixels.
6. Use o menu Preenchimento para definir a cor de preenchimento do contêiner como marrom (#63301B) e ajustar a opacidade da cor de preenchimento para 100.

7. Selecione o quadro de texto na parte inferior do contêiner e pressione Delete (Mac) ou Backspace (Windows) para removê-lo. O quadro de texto pode ser preenchido com uma legenda para o conteúdo de destino, mas neste projeto, isso não é usado.
8. Selecione a caixa Fechar (com um X) localizada no canto superior direito do contêiner. Clique na caixa Fechar para selecionar seu rótulo e excluí-lo. Use o menu Preenchimento para definir a cor de preenchimento como Nenhuma. Clique no ícone de pasta próximo à seção Imagem no menu Preenchimento e navegue para selecionar o arquivo denominado icon-close.png. Use a ferramenta Seleção para redimensionar a caixa Fechar para que a imagem do ícone fechar seja totalmente exibida.
9. Use a ferramenta Seleção para reposicionar o contêiner de destino e os contêineres de disparo, para movê-los para o local onde deseja exibi-los na página.
10. Com a composição selecionada, clique no botão de seta para abrir o painel de opções. Neste exemplo, use as seguintes configurações:
    • Posição: negatoscópio
    • Transição: Desvanecimento
    • Execução automática: Desativada
    • Shuffle: Desativado
    • Ocultar tudo inicialmente: Desativado
    • Ativar Arrastar o dedo: Ativado
    • Disparadores acima: Desativado
    • Botão Fechar: Ativado
    • Mostrar partes da negatoscópio ao editar: Ativado
    • Mostrar tudo no modo de design: Ativado

Clique em qualquer lugar fora no menu Opções para fechá-lo. Neste ponto, o widget está configurado e pronto para ser testado.

Antes deste tutorial, você aprendeu a incorporar HTML em páginas para adicionar um blog do Tumblr à página eventos. Você também viu como colar HTML incorporado em um widget composição de negatoscópio para exibir um vídeo no YouTube em uma negatoscópio quando o visitante clica em um botão. Nesta seção, você explorará um ou mais tipos de HTML incorporado fornecido pelo site Google Maps. Siga estas etapas:

1. Se a página de visita ainda não estiver aberta no modo de exibição Design, clique em Plano e clique duas vezes na miniatura da página visitas para editá-la.

Esse código-fonte foi copiado do site maps.google.com. Você pode criar um mapa personalizado para um endereço (ou, nesse caso, vários locais). Esse é um serviço gratuito: você simplesmente fornece o endereço (ou endereços) e clica no botão Criar mapa.

Após a criação de um mapa, a interface do Google Mapas permite especificar um título e uma descrição. Em seguida, clique no botão Link para acessar o código. Selecione o código HTML fornecido no campo rotulado: Colar HTML no site incorporado e você estará pronto para retornar ao Muse e incorporar o HTML em uma página.

Neste tutorial, não é necessário criar um novo mapa. Se quiser testá-lo, insira um endereço, crie um mapa e copie o código. Entretanto, se preferir testar apenas seu funcionamento, você poderá trabalhar com algum código HTML predefinido.

2. Copie o código-fonte a seguir:

<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. Cole o código na parte superior da página visitas. Use a ferramenta Seleção para posicionar o HTML incorporado no centro vertical da página, perto da parte superior, para que um quarto de mapa se sobreponha à área de título. Não se esqueça de deixar algum espaço entre o mapa e o gráfico de flor sob ele, para que seja possível adicionar uma descrição de texto.
4. Use a ferramenta Texto para arrastar um quadro de texto abaixo do mapa incorporado. Copie o seguinte texto e cole-o em um quadro de texto:

Embora todas as padarias incorporem os atributos exclusivos de seus vizinhos, elas são associadas pela atenção impecável de Katie aos detalhes, o compromisso com o atendimento e, acima de tudo, o oferecimento de boa comida.

5. Use o painel Texto para aplicar as seguintes configurações de formatação ao estilo de texto:
   • Fonte: Droid Serif (ou qualquer fonte com serifa)
   • Tamanho da fonte: 14
   • Cor da fonte: #222222
   • Alinhamento de fonte: Esquerdo
   • Entrelinha: 120%

Após a adição da descrição ao mapa, a página visitas estará concluída.

6. Escolha Arquivo > Visualizar página no navegador para verificar como a página visitas aparece em um navegador.

Observe que o mapa do Google com HTML incorporado é interativo. Clique nas setas para aplicar uma panorâmica no mapa em sua janela; você pode também clicar nos botões + e - para aumentar ou diminuir o zoom.

O design do site está concluído agora para todas as páginas. Nas seções restantes deste tutorial, você verá como dar os toques finais e publicar o site como a versão de avaliação gratuita.

 Incorporar HTML nas páginas do Adobe Muse

Você pode incorporar código HTML nas páginas do site para adicionar recursos complexos que aparecem dinamicamente a partir de um servidor da Web de terceiros. Esses blocos de código podem ser copiados de diversos provedores de serviços da Web, como Google, Yahoo!, YouTube, entre outros, e colados convenientemente nas páginas do Muse. Nesta seção, você observará dois exemplos diferentes de HTML incorporado e verá como é possível adicionar rapidamente conteúdo de mídia social e um mapa interativo do Google ao site criado no Muse.

Começaremos finalizando o conteúdo da página Início. Se você estava acompanhando o nosso percurso, a página Início deve estar aberta no modo de exibição Design. Caso contrário, clique duas vezes na miniatura da página Início no modo de exibição Plano para abri-la para edição no modo de exibiçãoDesign. Você adicionará o HTML incorporado na parte superior da apresentação de slides adicionada anteriormente na página Início.

Adicionar um Feed do Twitter com HTML incorporado para exibição de publicações mais recentes

Você pode configurar uma conta gratuita com vários serviços da Web diferentes, incluindo o Twitter, que permitirá que você publique mensagens exibidas no site. Entretanto, além da exibição de informações no Twitter.com, você pode usar sua conta para fazer login e copiar o código incorporado para exibir as mesmas mensagens no seu site.

Neste exemplo, uma conta fictícia foi configurada para o Kevin's Koffee Kart. Isso envolve fazer o login no Twitter como um novo usuário e completar o formulário de registro. Depois disso, você pode usar a interface do site para publicar mensagens e copiar o código incorporado que permite a exibição em qualquer lugar na Web. Esse é o mesmo processo que você usaria para compartilhar posts de blog, conteúdo de vídeo, Feeds RSS, informações de ações, previsão do tempo, pontuação em jogos e muitos outros tipos de dados dinâmicos. Se estiver criando um site para um cliente, pergunte a ele se já usa esses serviços para auxiliar o compartilhamento de informações. Em muitos casos, você pode usar as informações de conta dele para fazer login, obter o código incorporado e exibir os dados que quiser.

Para eliminar a necessidade de fazer login no Twitter para criar sua própria conta, veja a seguir o código incorporado copiado do Twitter referente à conta do Kevin's Koffee Kart:

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

<div id="twitFeed">Espaço de texto opcional</div>

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

A página Início está quase pronta. Há apenas um último elemento para adicionar à página.

Quando terminar de verificar a página Início, clique no link Plano para voltar ao modo de exibição Plano.

Em seguida, você adicionará outro tipo de HTML incorporado à página KART MAP.

Usar HTML incorporado para inserir mapa do Google na página da Web do Muse

Tutorial de vídeo

Nesta seção, você adicionará conteúdo à página KART MAP, adicionando HTML incorporado que carregue um mapa gerado pelo Google Maps. Esse é apenas outro pequeno exemplo das possibilidades de uso de HTML incorporado no seu site. Você pode incorporar conteúdo de muitos outros sites de terceiros, como YouTube, Flickr ou Picasa, e também adicionar formulários, blogs e outros recursos de site complexos, que você pode controlar acessando sua conta e postando conteúdo nos sites correspondentes.

Adicionar iframes ao seu site para exibir outras páginas do site com HTML incorporado

Além de usar HTML incorporado para inserir o código colado de um site de terceiros, você também pode incorporar uma página da Web inteira em um iframe usando o mesmo método. Por exemplo, você pode digitar um fragmento de código como este:

<iframe title="A Title for this Content" src="http://yoururlhere.com" width="900" height="500" style="border: 0;"></iframe>

No código anterior, substitua o texto no title="" e url="" pelo título e URL da página da Web externa desejados. Você também pode personalizar a largura e a altura da janela do iframe com os valores desejados, de acordo com o design do site.

Opcionalmente, você também pode adicionar um atributo para garantir que o iframe não exiba uma barra de rolagem, adicionando isso à tag do iframe de abertura:

scrolling="no"

Escolhendo Objeto > Inserir HTML, você pode abrir uma nova janela Código HTML e incorporar um iframe em qualquer lugar no site, e definir qualquer URL (endereço do site, como www.google.com) para exibir um site que esteja ao vivo na Internet, dentro dele.

Você também pode usar um iframe para incorporar animações, como animações HTML5 criadas no Adobe Edge. Localize o nome do arquivo HTML criado pelo Adobe Edge e use esse nome de arquivo no atributo URL do iframe:

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

</iframe>

Em seguida, você precisará carregar o arquivo HTML do Adobe Edge (e os arquivos dependentes) no mesmo servidor de host, ao longo dos arquivos do site do Muse. Se estiver exportando o site para FTP, você pode copiar o arquivo HTML na pasta gerada pelo Muse durante o processo de exportação. Se publicar diretamente no servidor de hospedagem do Adobe Business Catalyst®, clicando no link Publicar no Muse, você pode usar o software Adobe Dreamweaver® ou qualquer cliente de FTP para carregar os arquivos. Para saber mais sobre como carregar arquivos via FTP para os servidores de hospedagem do Business Catalyst, consulte sites de publicação.

Formatar os elementos de um formulário de contato

Usando algumas regras de CSS padrão, você poderá formatar os elementos do formulário de contato criado na interface Console de Administração do Business Catalyst. Você pode ajusta o modo como o formulário e os elementos são exibidos a fim de corresponder ao projeto da página.

Depois que você colar o código-fonte do formulário do Console de administração na página no Muse, o formulário será exibido com os estilos padrão.

Assim como qualquer outro elemento, use as alças laterais para redimensionar o formulário e movê-lo na página para o local desejado.

Clique com o botão direito do mouse (ou clique pressionando a tecla Control) no formulário e escolha HTML na lista exibida.

A janela Código HTML é exibida. Isso indica o código que você colou do Console de administração na página. Posicione o cursor na parte superior, antes da primeira linha de código e pressione Enter (Windows) ou Return (Mac) algumas vezes, para mover o código de formulário para baixo e faça espaço para adicionar estilos.

Essa área acima do código de formulário é o local onde você pode colar ou digitar regras de CSS que afetarão a aparência dos elementos de formulário.

Para ver como isso funciona, copie o código a seguir:

<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>

Cole o código na parte superior da janela HTML, acima do formulário.

Clique em OK para fechar a janela HTML. Observe que a aparência do formulário foi atualizada com a nova formatação. Clique em Visualizar ou escolha Arquivo > Visualizar página no navegador para verificar como ele será exibido no site publicado.

Use essa mesma estratégia para controlar muitos dos diferentes elementos de formulário inclusos quando você adiciona o código do formulário de contato copiado do Business Catalyst.

Analise o código que você colou na parte superior da janela. Observe as duas tags de estilo na parte superior e inferior das regras de CSS que ao redor delas. Isso é importante; sem as tags de estilo de abertura e fechamento, as regras de CSS não funcionarão. Veja as duas tags de estilo, exibidas de modo independente:

<style type="text/css">

</style>

Essas tags de estilo de abertura e fechamento indicam ao navegador que o interior de código contém regras de formatação de CSS. Sempre verifiquem se essas tags existem na parte superior da janela, antes de colar as regras de CSS.

Quando você quiser alterar os elementos do formulário para atualizar sua aparência, chame a “class” (o nome atribuído aos vários elementos do formulário), especifique a propriedade que deseja atualizar e defina seus atributos.

Considere a linha de código a seguir:

input.textarea {

background-color: #fff;

}

A palavra input.textarea é o nome atribuído a um tipo de campo de texto (sua “class "). Em seguida, a próxima linha chama a propriedade que você deseja alterar. Nesse caso, background-color se refere à cor de fundo do campo de texto. E depois do ponto-e-vírgula, o #fff é uma forma prática no código CSS de escrever #ffffff (que é o valor de cor hexadecimal que especifica a cor branca).

Em português, a regra acima significa: defina a cor de fundo desse tipo de campo de texto como branco.

Para atualizar o formulário, atribua a cor de fundo do campo de texto a um valor comum de cor da Web: red. O código abaixo define a cor de fundo do tipo de campo de texto como vermelho:

input.textarea {

background-color: red;

}

As regras de CSS são escritas em sua própria linguagem. Assim como ocorre com o aprendizado de qualquer linguagem nova, é necessária alguma prática para se tornar fluente nela. Para obter mais informações sobre a nova sintaxe (a gramática usada para escrever essas regras) leia os excelentes tutoriais e guias de referência de CSS fornecidos on-line gratuitamente pela W3Schools.

Quando você estiver pronto para começar a editar seus próprios formulários de contato, use a lista abaixo para identificar o nome da classe e as propriedades associadas que você pode ajustar para cada elemento do formulário.

<style type="text/css">

</style>

Remover os elementos padrão da parte superior do formulário de contato

Por padrão, quando você cola o formulário na página, essa operação começará com os dois elementos a seguir.

Se você quiser remover um ou ambos esses elementos, abra a janela HTML e procure o código-fonte que você colou (diretamente abaixo da tag de estilos de CSS que você acabou de adicionar).

Para remover a linha *Required, localize esta linha de código e exclua-a:

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

Para remover o rótulo e o menu Title, localize estas linhas de código e exclua-as:

<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 classes e propriedades para adicionar regras de CSS e formatar formulários de contato

Quando você atribuir valores de cor, receberá uma variedade muito maior de cores usando uma ferramenta on-line, como kuler, ou um programa de edição de imagem (Photoshop ou Fireworks), para criar valores de cor hexadecimais. Os valores de cor hexadecimais sempre começam com o símbolo #, seguido por uma combinação de 3 ou 6 caracteres alfanuméricos (0-9 e A-F).

Talvez seja mais fácil usar a ferramenta Conta-gotas no Muse para selecionar as cores do projeto existente. Você pode copiar os valores de cor hexadecimais no campo no Seletor de cor e colá-los no código. Entretanto, as 16 cores da Web a seguir podem ser especificadas pelo nome. Talvez seja muito útil usá-las quando você quiser testar uma regra:

Verde-água, Preto, Azul, Fúcsia, Cinza, Verde, Verde-limão, Marrom, Azul-marinho, Verde-oliva, Violeta, Vermelho, Prata, Azul-petróleo, Branco e Amarelo

Quando você especificar as cores pelo nome, não inclua o símbolo # antes da cor.

A lista a seguir não está completa, há muitas outras combinações (e muitas outras propriedades que você pode usar) para afetar os elementos. Use estas sugestões para começar. Clique duas vezes para selecionar um fragmento de código e copiá-lo na sua área de transferência.

Para obter mais dicas sobre como trabalhar com o Muse, visite a página Ajuda e tutoriais do Muse ou a página Eventos do Muse para ver webinars ao vivo e gravados.