Construindo um site de uma página para pequenas empresas com o Adobe Muse

O Adobe Muse é uma ferramenta poderosa que tornou o design da Web surpreendentemente mais fácil e interessante. Mais fácil em termos de nenhum requisito de código para criar sites profissionais e interessante em termos de controle total sobre o design, ao contrário de outros aplicativos de arrastar e soltar.

Uma das características mais impressionantes deste aplicativo WYSIWYG (o que você vê é o que você obtém) é que ele fornece um fluxo de trabalho adequado para auxiliar o designer no desenvolvimento passo a passo do site.

Depois de terminar este tutorial, você irá:

• Tenha uma compreensão clara de todos os aspectos técnicos e de design do Muse.
• Saiba como projetar profissionalmente em menos tempo.
• Conheça alguns recursos gratuitos onde você pode encontrar gráficos impressionantes para o seu site.
• Crie um site de uma página totalmente funcional rapidamente.

Requisitos deste tutorial

Você precisará baixar algumas imagens, vetores e fontes para criar este site. Mas você ainda pode acompanhar sem esses recursos. Para organizar o conteúdo adequadamente, crie uma pasta separada para o seu site.

• Acesse pexels.com e baixe:

  • 4 imagens de tamanho 1160 x 480 para apresentação de slides. Aqui está uma captura de tela do pexels. Você pode colocar esse tamanho na caixa ‘tamanho personalizado’ neste site.

  • 6 imagens de tamanho 271 x 208 para a seção ‘serviços’.

  • 1 imagem de tamanho 1160 x 692 para a seção ‘Fale Conosco’.

• Acesse freepik.com e baixe:

  • Um ícone de cruz (você pode editar este ícone no illustrator ou apenas baixar o arquivo png do feepik).
  • 6 imagens de rosto para a seção ‘Testemunhos’.

• Vá para sutilpatterns.com e baixe o padrão ‘brickwall’ para a seção ‘Testemunhos’.

• À medida que você prosseguir com este tutorial, eu lhe direi como baixar as fontes necessárias (isso pode ser feito dentro do Muse).

• Use o texto fictício de lipsum.com.

VAMOS COMEÇAR!

Preparando o espaço de trabalho e configurando o cabeçalho

1 Crie um novo site indo em File > New Site (Ctrl+N) e coloque os valores conforme mostrado abaixo. Não se esqueça de marcar a caixa de seleção que diz ‘Rodapé fixo’. Clique em OK e você terá o modo PLAN. Clique duas vezes em A-Master localizado na parte inferior em uma área cinza. Você criará tudo nesta página mestra.

2 Escolha a ferramenta de texto na caixa de ferramentas localizada no lado esquerdo da janela do aplicativo. Clique e arraste na tela ou página para criar uma caixa de texto. Vá para o painel de texto (Ctrl+T), no menu suspenso de fontes, procure Web Fonts e escolha ‘Adicionar fontes da web’ e baixe as seguintes fontes:

• Rametto Um
• pedaço
• Questão
• Estrada de ferro
• Nobre
• PT Sem
• ubuntu
• Lagosta

Depois de baixar essas fontes, exclua esta caixa de texto.

3 Vá para o painel Layers localizado no lado direito da janela do aplicativo. Se não estiver lá, vá para o menu Janela > Camadas. Você verá uma camada chamada Layer 1 (cor azul). Esta é a camada padrão e tudo o que você cria ou coloca na tela vai para lá. Clique duas vezes nesta camada e nomeie-a como ‘Cabeçalho’.

4 Dentro do painel de camadas, clique no pequeno ícone de papel com borda dobrada localizado no canto inferior direito. Clicar aqui criará uma nova camada com a cor vermelha. Novamente, clique duas vezes nesta camada e renomeie-a para ‘Conteúdo’.

5 Clique e arraste esta camada de conteúdo e coloque-a abaixo da camada de cabeçalho. Fizemos isso porque queremos que nosso cabeçalho esteja no topo de tudo.

6 Selecione a camada de cabeçalho e recolha o painel de camadas.

7 Selecione a ferramenta retângulo na caixa de ferramentas ou pressione ‘m’ no teclado.

8 Desenhe um pequeno retângulo na tela e verifique se a cor da borda é azul, o que indica que esse objeto está dentro da camada de cabeçalho.

9 Vá para o painel Transform localizado no canto superior direito da janela do aplicativo. Deixe a largura (W) e coloque 50 dentro do campo altura (H) e pressione enter. (Não se preocupe com os valores X e Y.)

10 No topo da página, você verá duas linhas de cor azul (mostradas na captura de tela abaixo). Estes são chamados de ‘guias’. Quando você passa o mouse sobre o primeiro guia, ele diz ‘Topo da página, arraste para ajustar o preenchimento acima da página’ e o outro diz ‘Cabeçalho, arraste para ajustar a posição’. Configurar esses guias no começo é muito importante.

11 Agora, como criamos um retângulo de H=50, clique, segure e arraste a guia ‘topo da página’ até que a caixa que aparecerá abaixo quando você começar a arrastar diga Y=50.

12 Da mesma forma, arraste a guia de cabeçalho acima para a parte superior da guia de página até que apareça Y=0. Fizemos isso para configurar nossa área de cabeçalho. (Você pode querer experimentar colocar essas guias em posições diferentes para obter resultados diferentes, mas é bom por enquanto.)

13 Selecione o retângulo que acabamos de criar, arraste-o para a área do cabeçalho para que se encaixe corretamente.

14 Agora, temos que aumentar a largura do retângulo e torná-la 100% para que o cabeçalho fique perfeito em todos os tamanhos de tela. Expanda o retângulo para ambas as bordas e verifique se ele se encaixa nas bordas. Uma guia laranja aparecerá, garantindo que o objeto foi encaixado. Conforme você aumenta a largura do retângulo, o pop-up dirá W=100% ou W=1160 quando você atingir a borda.

15 Mantenha o retângulo selecionado, clique na palavra Preenchimento abaixo do menu do aplicativo e defina as opções conforme a seguir. Escolha a primeira cor como Preto e a segunda cor: R=37, G=37, B=37.

16 Vá para Arquivo > Salvar site. Salve seu site sempre que fizer uma alteração.

17 Crie uma caixa de texto e digite – ‘example.com’ e altere sua formatação conforme mostrado abaixo.

18 Ajuste o tamanho da caixa de texto para que todo o texto apareça em uma linha. Selecione esta caixa de texto e arraste-a sobre o retângulo preto. Alinhe-o ao centro vertical do retângulo (uma linha azul indicará quando ele está centralizado) e encaixe-o na borda esquerda, conforme mostrado abaixo.

19 Crie uma caixa de texto e digite – ‘Home’. Altere sua formatação da seguinte maneira. Ajuste a largura e a altura da caixa de texto de acordo. Você também pode fazer isso no painel de transformação. O meu é W=52, H=17.

20 Copie e cole esta caixa de texto e digite ‘Serviços’ na nova. Ajuste a largura. Arraste e coloque esta caixa de texto ao lado de casa com uma diferença muito menor entre os dois. Mais uma vez, os guias irão ajudá-lo no alinhamento adequado.

21 Copie e cole esta caixa de texto por mais quatro vezes e digite – Por que Nós, Depoimentos, Fale Conosco e Newsletter. Coloque essas caixas de texto uma a uma em espaçamento igual ao lado de ‘serviços’.

22 Com a ferramenta de seleção selecionada e a tecla shift pressionada, selecione todas essas caixas de texto uma a uma. Vá para o painel de texto, mude a cor para branco. Escolha o grupo dessas caixas e coloque-o sobre o retângulo do cabeçalho. (Centralizado verticalmente e alinhado com a borda da página do lado direito). Este é o nosso Menu.

23 Novamente, com a ferramenta de seleção selecionada e a tecla shift pressionada, selecione essas caixas de texto, o retângulo e a caixa de texto example.com. No canto superior direito, você verá uma opção chamada Pin. Clique na caixa central superior para fixar esses itens. Isso significa que, quando o usuário rolar pelo seu site, esse cabeçalho ficará fixo no topo. É muito útil, pois o usuário não terá que rolar até o fim para escolher outra opção.

24 Vá para o painel Layers e bloqueie a camada de cabeçalho. Isso pode ser feito clicando dentro da caixa à esquerda do nome da camada. Quando você bloqueia uma camada ou qualquer objeto, isso não afeta sua aparência, mas você não poderá selecionar esses itens, a menos que desbloqueie. Fizemos isso para eliminar completamente as chances de mover acidentalmente os itens.

25 Selecione a camada de conteúdo e recolha o painel de camadas.

Estabelecendo apresentação de slides

26 Vá para a biblioteca de widgets localizada no lado direito da janela do aplicativo. Se não estiver lá, vá para o menu Janela > escolha Biblioteca de widgets. Expanda a seção ‘apresentações de slides’ e selecione ‘Em branco’. Clique e arraste este objeto para a tela. Uma janela preta com opções de apresentação de slides aparecerá.

27 Certifique-se de que as opções estejam definidas conforme mostrado na imagem abaixo. Na seção de partes na parte inferior, desmarque as caixas de seleção que dizem Anterior, Próximo, Legendas e Contador. Não precisamos de nada disso.

28 Clique em qualquer lugar na tela para fazer esse pop-up desaparecer. Agora, clique com cuidado dentro da apresentação de slides. Ao clicar uma vez, você verá que ‘Apresentação de slides’ foi escrito em ‘o tipo de área de seleção atual’. Ele está localizado no canto superior esquerdo abaixo do menu do aplicativo. Esta área permite que você veja o que você selecionou. É um recurso muito útil quando o layout fica complicado. Clique novamente e você notará que a descrição diz ‘Hero Image’.

29 Aumente a largura da imagem do herói manualmente, expandindo-a a partir do meio. Encaixe-o nas bordas da página (para torná-la 100% de largura) e na parte inferior do retângulo do cabeçalho, conforme mostrado abaixo.

30 Vá para transformar o painel e coloque H=500.

31 Abra as opções de apresentação de slides novamente clicando no pequeno círculo azul com retângulo branco dentro dele (localizado no canto superior direito da apresentação de slides).

32 Clique no ícone da pasta ao lado da opção ‘Adicionar imagens…’, procure as imagens que baixamos para a apresentação de slides. Selecione todos os quatro e clique em abrir.

33 Vá para Arquivo > escolha ‘Visualizar página no navegador’ ou Ctrl+Shift+E e veja como sua apresentação de slides funcionará quando o site estiver no ar. Eu recomendo que você memorize os atalhos de teclado que estou usando neste tutorial. Isso ajudará você a acelerar seu processo de design.

Criando a seção ‘Serviços’

34 Agora que configuramos nosso cabeçalho e apresentação de slides, é hora de criar seções para cada item que adicionamos ao nosso menu. Vamos começar com ‘serviços’. Crie uma caixa de texto e digite serviços nela (todas as letras minúsculas) e altere sua formatação da seguinte maneira.

35 Clique duas vezes dentro desta caixa de texto e selecione apenas a letra ‘I’. Mude sua fonte para ‘Chunk’ e deixe tudo igual. Ajuste a altura desta caixa de texto. Quando você diminuir sua altura, uma linha tracejada aparecerá em um determinado ponto e a caixa não ficará mais curta. Não reduza o tamanho depois disso. Esta é a menor altura possível com este tamanho de fonte.

36 Com a caixa de texto selecionada, vá para transformar o painel e defina o ângulo de rotação para -90 graus (90 graus negativos).

37 Mova a caixa de texto para o lado esquerdo da tela, conforme mostrado abaixo.

38 Você pode diminuir um pouco o zoom para ver todo o conteúdo de uma vez ou para ajustar os objetos adequadamente. Para fazer isso, tente digitar valores diferentes (menos de 100%) na seção de nível de zoom na parte superior. Depois de digitar o valor, pressione enter.

39 Vá para Arquivo > escolha ‘Colocar’. Selecione a primeira imagem que baixamos para nossa seção de serviços. Clique em abrir.

40 O cursor mudará sua aparência para um marcador carregado com uma imagem. Clique na tela para colocá-la. Mova e posicione-o de forma que fique alinhado com a parte superior da caixa de texto ‘serviços’.

41 Copie esta imagem e cole-a duas vezes. Selecione essas imagens coladas uma a uma e alinhe-as em espaçamento igual à primeira imagem.

42 Selecione a segunda imagem, clique com o botão direito e escolha ‘replace image’ (é a última opção). Procure a segunda imagem e clique em abrir. Substitua a terceira imagem também.

43 Crie caixas de texto para as informações sobre serviços e aplique a formatação de títulos e parágrafos conforme abaixo. As guias irão ajudá-lo a alinhá-los corretamente.

• Para cabeçalhos: Fonte: Raleway Bold, Tamanho=20, Cor: Preto, alinhamento à esquerda e 100% entrelinha.
• Para parágrafos: Fonte: Questrial, Tamanho=15, Cor: R=67 G=67 B=67, Alinhado à esquerda e 120% entrelinha.

44 Coloque mais três imagens como fizemos nas etapas anteriores e crie um texto de descrição semelhante para elas. Você deve ter o seguinte resultado.

Resultado Final da Seção ‘Serviços’

Criando a seção ‘Por que nós’

45 Em seguida, vem a seção ‘Por que nós’. Este é um pouco complicado. Tenha cuidado ao selecionar os objetos. Em primeiro lugar, crie um retângulo de 100% de largura e H=996. Preencha com uma cor (R=47, G=48, B=55). Clique com o botão direito neste retângulo > Organizar > escolha ‘enviar para trás’ (não enviar para trás).

46 Expanda sua área de trabalho clicando e arrastando a guia ‘bottom of page’ para que você tenha espaço suficiente para criar o conteúdo que será colocado neste retângulo que acabamos de criar.

47 Role para baixo até o espaço vazio em branco e faça outro retângulo de W=351 e H=351. Preencha com a cor branca e sem traço.

48 Vá para a opção ‘corner radius’ (localizada ao lado do traço abaixo do menu do aplicativo). Clique em todos os cantos para torná-los redondos e coloque 500 na caixa ao lado.

49 Você terá um círculo. Arraste este círculo para o retângulo e ajuste-o da seguinte maneira. Ao lado do raio do canto, existe uma opção chamada ‘Opacidade’. Com o círculo selecionado, coloque 14 nesta caixa.

50 Crie uma caixa de texto e digite – por que nós (todos pequenos). Altere sua fonte para Rammetto One, tamanho=100, Cor R=241 G=244 B=247, entrelinha 100% e alinhe ao centro. Coloque esta caixa de texto dentro do círculo e alinhe-o corretamente.

51 Agora vamos criar as linhas tracejadas. Faça um retângulo de W=9 e H=9, sem preenchimento. Clique na palavra ‘traço’ ao lado de preencher. Escolha a cor R=241 G=244 B=247. Clique no ícone da corrente para quebrá-la e coloque ‘1’ na espessura do traçado inferior.

52 Copie este retângulo de traço de um lado e cole-o várias vezes. Organize-os em uma linha (amplie um pouco com a ferramenta de zoom se estiver achando difícil ver esses retângulos). Depois de obter o comprimento desejado da linha tracejada, selecione todos esses retângulos, clique com o botão direito do mouse e escolha ‘Grupo’. Copie e cole este grupo para outras linhas tracejadas.

53 Para linhas tracejadas inclinadas, tente colocar diferentes ângulos de rotação no painel de transformação. Eu usei 150 e 30 graus. Você terá que deletar alguns retângulos deste grupo para ter comprimentos menores. Ajuste essas linhas perto do círculo como mostrado abaixo.

54 Agora adicionaremos mais texto para números, cabeçalhos e descrições. Use as seguintes configurações para cada um deles e ajuste essas caixas de texto conforme mostrado abaixo.

• Para números: Fonte=Rammetto One, Cor: R=196 G=214 B=193, alinhado ao centro e 100% à esquerda, tamanho: 200 (para o número ‘1’), 160 (para os números ‘2’ e ‘3’) e 120 (para os números ‘4’ e ‘5’).
• Para cabeçalhos: Fonte=Ralway Bold, Tamanho=18, Cor:Branco, Alinhado ao centro e 100% entrelinha.
• Para parágrafos: Fonte=Questrial, Tamanho=16, Cor: R=241 G=244 B=247, Alinhado ao centro e 120% entrelinha.

Resultado final da seção ‘Por que nós’

Criando a seção ‘Testemunhos’

55 Novamente, crie algum espaço para trabalhar arrastando para baixo a guia da página. Faça um retângulo de 100% de largura e H=486.

56 Com o retângulo selecionado, clique na palavra ‘Preencher’ e clique em ‘Adicionar imagem’ ao lado da opção de imagem. Procure a imagem do padrão brickwall que baixamos. Na opção Fitting, escolha ‘Tile’ para preencher todo o retângulo com esta textura.

57 Role para baixo até o espaço vazio e crie uma caixa de texto de tamanho W=406, H=289 com a ajuda do painel de transformação. Digite – ‘o que os outros têm a dizer’ (todos pequenos). Altere a fonte para Rammetto One, tamanho=70, alinhamento à esquerda, valores de cor R=37 G=37 B=37 e entrelinha=100%.

58 Com esta caixa de texto selecionada, clique no traço da palavra, aplique o traço direito de peso um e de cor preta a ele. Arraste esta caixa de texto e coloque-a sobre o retângulo com padrão brickwall.

59 O próximo passo é adicionar depoimentos de clientes. Para isso, usaremos as imagens vetoriais de rosto redondo que baixamos de freepik.com. Mais uma vez, desça para o espaço vazio em branco para que você possa personalizar sua composição adequadamente.

60 Vá para a biblioteca Widgets e arraste ‘Blank’ da seção de composições para a tela. Clique no sinal de mais para adicionar mais três gatilhos. Selecione cuidadosamente o primeiro gatilho e garanta sua seleção com a ajuda da área de seleção atual que diz gatilho. E logo ao lado, há uma opção chamada ‘Ativo’. Clique aqui para expandir. Selecione o estado ‘Normal’ e escolha ‘sem preenchimento’ e ‘sem traçado’ para este estado. Repita isso para cada estado que for Rollover, Mouse Down e Active. Vá para o painel de transformação com o primeiro gatilho selecionado e coloque W=10, H=10.

61 Repita o passo anterior para cada gatilho que temos. Isso significa aplicar sem preenchimento e sem traçado para cada estado e transformar os gatilhos em tamanho 10 x 10. Aproxime os gatilhos um do outro.

62 Agora. Personalizaremos os alvos para cada um desses gatilhos. O grande retângulo que você está vendo é o alvo. Selecione o primeiro gatilho e selecione seu estado normal no painel de estados. Depois disso, selecione o alvo para este gatilho e não aplique nenhum preenchimento e nenhum traçado para cada estado. Em seguida, vá para o painel de transformação e faça o alvo de W=360, H=370.

63 Repita a etapa anterior para cada alvo. Apenas certifique-se de selecionar primeiro o gatilho, colocá-lo no estado normal e, em seguida, selecionar o respectivo alvo com o estado normal e, em seguida, não aplicar nenhum preenchimento e nenhum traçado. Você não precisará alterar o tamanho de cada alvo. Basta fazê-lo para um e será aplicado a todos.

64 Agora, vamos começar a adicionar conteúdo a esta composição. Vá para Arquivo > Colocar e abra a primeira imagem de rosto e coloque-a fora da composição. Arraste esta imagem e coloque-a dentro da composição agora. Você verá que um círculo azul aparecerá no canto superior direito, indicando que esta imagem agora faz parte da composição.

65 Crie três caixas de texto – uma para o nome da pessoa, uma para sua designação e uma para a declaração ou revisão. Aplique a formatação conforme abaixo e coloque essas caixas de texto dentro da composição. Apenas certifique-se de que cada um deles tenha um círculo azul no canto.

• Para o nome da pessoa: Fonte: Nobile Medium Italic, tamanho=18, Cor: R=37 G=37 B=37, alinhamento ao centro e 100% entrelinha.
• Para designação: Fonte: Nobile, tamanho=15, Cor: R=37 G=37 B=37, alinhamento ao centro e 100% entrelinha.
• Para Declarações (com vírgulas): Fonte: PT Sans Italic, tamanho=18, cor: R=69 G=64 B=68, alinhamento ao centro e 100% entrelinha.

66 Com a imagem do rosto selecionada, aplique pincelada de peso 4 em cada lado, cor: branco, arredonde todos os cantos e aumente o raio até envolver a imagem. Eu usei 100 como raios de canto.

67 Vá para ‘Efeitos’ (localizado ao lado da opção de cantos arredondados) e marque a caixa de seleção ‘sombra’. Coloque os valores como; Cor=Preto, Opacidade=37%, Desfoque=12, Ângulo=78 e Distância=5.

68 Repita as etapas anteriores (de 64 a 67) para adicionar conteúdo a cada destino e salve as alterações (Ctrl+S). Coloque esta composição sobre o retângulo com padrão brickwall.

69 Agora, selecione toda a composição (certifique-se com a área de seleção atual) e expanda suas opções clicando no pequeno círculo azul. Defina as opções conforme mostrado abaixo. Pressione Ctrl+Shift+E e veja se está funcionando bem.

70 Você deve ter o seguinte resultado.

Resultado Final da Seção ‘Testemunhos’

Criando a seção ‘Fale conosco’

71 A próxima seção é Contate-nos. Adicionaremos uma imagem de plano de fundo, um formulário e algumas caixas de texto nesta seção. Em primeiro lugar, faça um retângulo de 100% de largura e H=692. Preencha-o com uma imagem que baixamos para esta seção e escolha ‘dimensionar para preencher’ em Ajuste. Altere sua opacidade para 72%.

72 Faça outro retângulo da mesma largura e altura e preencha-o com um gradiente. Coloque os valores do gradiente como; Opacidade=90% a 46%, Cor: Preto a R=69 G=64 B=68, Ponto focal=66%, Direção: Horizontal e Tamanho: automático. Coloque este retângulo sobre a imagem e verifique se ele se encaixa em todas as bordas.

73 Vá para a biblioteca de widgets. Em formulários, selecione ‘contato simples’ e arraste-o na tela. Uma janela com opções de formulário irá aparecer. Colocar nome do formulário: Formulário de contato, Email para: coloque seu endereço de email no qual deseja receber as informações inseridas pelos visitantes, Após o envio: selecione ‘permanecer na página atual’. A última opção é ‘Editar juntos’. Certifique-se de que está marcado. Desta forma, você terá que fazer alterações apenas em um campo e elas serão aplicadas a todos. Clique em qualquer lugar na tela para fazer a caixa de opções desaparecer.

74 Selecione o formulário. Clique no rótulo ‘Nome’ e clique nele novamente até ver ‘Rótulo’ escrito na área de seleção atual. Clique em deletar. Repita isso para rótulos de e-mail e mensagem e exclua-os.

75 Selecione o formulário novamente e selecione o primeiro campo do formulário que diz ‘Digite o nome’ até ver ‘Entrada de texto’ na área de seleção atual. Não aplique preenchimento e traço inferior (peso um e cor branca) para cada estado, de Vazio a Foco. Para o estado de erro, selecione sem preenchimento e traço inferior de cor vermelha com peso 1.

76 Depois disso, com o campo de email selecionado > escolha seu estado vazio novamente e personalize a fonte e a cor do texto para cada estado conforme escrito abaixo.

• Para estado vazio, não vazio e foco: Fonte: Questrial, tamanho=14, cor: branco, alinhamento à esquerda, 100% entrelinha e sem itálico.
• Para o estado de rolagem: basta alterar a cor do texto para R=196 G=196 B=196 e sem itálico.
• Para estado de erro: altere a cor do texto para vermelho e sem itálico.

77 Clique e selecione o botão Enviar. Escolha seu estado normal, arredonde todos os cantos com 40 raios e aumente sua largura conforme mostrado na captura de tela abaixo. Altere sua fonte para Raleway Bold, tamanho=20, alinhamento ao centro, cor: R=241 G=244 B=247, entrelinha: ajuste o texto ‘enviar’ no centro do botão aumentando este valor (usei 130%) .

78 Para os estados de rolagem e mouse pressionado, altere a cor do traço e a cor do texto para cinza (R=127 G=127 B=127). Por fim, para o estado ‘enviar em andamento’, altere a cor do traço e do texto para azul celeste (R=41 G=171 B=226).

79 Ao selecionar o estado ‘enviar em andamento’ para este botão de envio, você verá que há outra caixa de texto que diz ‘enviando formulário…’. Selecione esta caixa e escolha o estado ‘enviar em andamento’. Altere a fonte para Questrial, tamanho=14, cor: cinza, alinhamento ao centro e sem itálico. Escolha o estado ‘enviar com sucesso’ e altere a cor do texto para azul celeste (sem itálico). Escolha o estado ‘enviar erro’ e altere a cor do texto para vermelho (sem itálico). O formulário de contato está pronto.

80 Faça duas caixas de texto. Digite – entre em contato conosco e na segunda linha, digite ‘todos os campos são obrigatórios’. Para o texto de contato, use a fonte: Rammetto One, tamanho=60, cor: R=241 G=244 B=247, entrelinha=100% e alinhamento à esquerda. Para o texto ‘todos os campos são obrigatórios’, use a fonte: Nobile itálico, tamanho=26, cor: R=241 G=244 B=247, entrelinha=100% e alinhamento à esquerda. Para esta caixa de texto, aplique o traço inferior de peso 1 e cor branca.

81 Digite algum parágrafo na segunda caixa de texto que criamos. Use fonte: PT Sans Italic, tamanho=14, cor: R=241 G=244 B=247, entrelinha=120%, alinhamento à esquerda e espaço anterior=15.

82 Coloque essas caixas de texto e o formulário na imagem que colocamos. Ajuste-os da seguinte forma.

83 Crie mais uma caixa de texto para algumas informações de contato, como endereço do escritório, e-mail e números de telefone. Coloque esta caixa de texto na imagem. Você deve ter o seguinte resultado.

Resultado Final da Seção ‘Fale Conosco’

Criando Rodapé

84 A última seção é o rodapé. Existem três guias na parte inferior, a saber – parte inferior da página, rodapé e parte inferior do navegador. O que você precisa fazer agora é certificar-se de que a guia ‘parte inferior da página’ se encaixe na parte inferior da seção de contato e a guia ‘rodapé’ coincida com a guia ‘parte inferior da página’. Depois disso, você pode arrastar o guia ‘parte inferior do navegador’ para baixo para ajustar o espaço necessário para o rodapé.

85 Crie dois retângulos de 100% de largura e H=168 para o primeiro e H=37 para o outro. Altere a cor de preenchimento do retângulo grande para branco e use R=47, G=48, B=55 para um menor.

86 Selecione o primeiro retângulo e tente colocá-lo na área do rodapé. Não vai lá. Em vez disso, a parte inferior da guia da página começará a se expandir para baixo. Para tornar este retângulo um item de rodapé, marque a caixa de seleção ‘Rodapé’ localizada na área superior direita da janela do aplicativo. Faça isso para o segundo retângulo também.

87 Agora coloque esses retângulos na área do rodapé e certifique-se de que o retângulo grande esteja um pouco acima da guia do rodapé. A parte inferior do retângulo colorido deve encaixar na parte inferior da guia do navegador. Caso contrário, você verá uma pequena lacuna branca após o rodapé que não parece agradável.

88 Crie caixas de texto para o rodapé e digite o que quiser. Basta marcar a caixa de seleção ‘rodapé’ para as caixas de texto que você adicionará. Eu adicionei algum texto contendo Isenção de responsabilidade e informações de direitos autorais.

89 O selo ‘Feito com Adobe Muse CC’ pode ser adicionado da biblioteca de widgets na seção social. Você também pode adicionar links à sua página do Facebook, Twitter, Google+, LinkedIn, Pinterest, canal do YouTube ou link do vimeo.

90 O símbolo de direitos autorais e muitos outros símbolos que você vê ao lado do texto Todos os direitos reservados podem ser adicionados no painel ‘Glifos’ localizado no lado direito da janela do aplicativo. Se não estiver lá, vá para o menu Janela > escolha Glifos.

Criando a seção ‘Newsletter’

91 Até agora, criamos seções para todos os itens de menu, exceto um, que é o ‘Newsletter’. Vamos fazer algo interessante com ele. Lembre-se do símbolo da cruz que baixamos, ele será usado aqui (tudo bem se você não baixou, você ainda pode acompanhar). Em primeiro lugar, selecione a caixa de texto Newsletter e anote sua largura e altura no painel de transformação. O meu é 81 x 17.

92 Agora, abra a biblioteca de widgets e arraste ‘Lightbox Display’ da seção de composições. Exclua os dois primeiros gatilhos (localizados na parte superior) e exclua todas as legendas (localizadas na parte inferior). Torne o tamanho do terceiro acionador igual ao da caixa de texto do boletim informativo, que é 81 x 17. Altere o preenchimento e o traçado para nenhum em todos os estados.

93 Arraste a caixa de texto do boletim informativo e coloque-a dentro desse acionador de forma que todas as bordas da caixa de texto coincidam com as bordas do acionador. Agora arraste este grupo e coloque-o novamente no menu onde foi colocado anteriormente. O que fizemos foi aplicar um link para a caixa de texto da Newsletter. Quando o usuário clicar nele, o site desaparecerá e o alvo aparecerá.

94 O próximo passo é customizar nosso alvo. Selecione a área cinza e assegure-se de que a área de seleção atual diga ‘Destino’. Você terá que clicar três vezes para selecioná-lo. Altere o preenchimento e o traçado para nenhum em todos os seus estados.

95 Adicione duas caixas de texto e um formulário de contato simples (exclua seus campos de nome e mensagem e mantenha apenas o campo de e-mail). Arraste-os para dentro desta composição e certifique-se de que todos eles tenham um círculo azul em seus cantos.

96 Personalize o formulário como fizemos na seção de contato. Você deve ter o seguinte resultado. Para o campo de texto ‘Mantenha contato’, use a fonte: Lagosta, tamanho=40, cor:branco, alinhamento ao centro e entrelinha 100%. Para o texto descritivo abaixo, use a fonte: Ubuntu Light Italic, tamanho=14, cor: branco, alinhamento ao centro e 120% entrelinha. Altere o texto do botão de envio para ‘Inscrever-se’.

97 Agora selecione o botão Fechar, mova-o e coloque-o no canto superior direito desta exibição lightbox como mostrado abaixo. Clique dentro dele até ver ‘Rótulo’ escrito na área de seleção atual. Exclua o rótulo.

98 Altere o preenchimento e o traçado deste botão Fechar para nenhum em todos os estados e torne seu W=40 e H=40. Vá para Preencher > adicionar imagem e procure a imagem cruzada. Escolha ‘dimensionar para caber’ na opção de ajuste.

99 Clique em Newsletter e você verá um círculo azul em seu canto. Clique nele e verifique se as opções estão definidas da seguinte maneira.

Resultado Final da Seção ‘Newsletter’

Criando hiperlinks

100 A tarefa final restante é aplicar links a cada seção. Para fazer isso, escolha a opção ‘link âncora’ localizada na área central superior ou pressione a letra ‘a’ em seu teclado. Você verá que o cursor muda sua aparência para uma arma posicional carregada com uma âncora de link.

101 Quando você clicar na tela para colocá-la, uma caixa de diálogo será exibida, permitindo que você renomeie uma âncora.

102 Criar âncoras de link para cada seção que criamos, ou seja, Home, Serviços, Por que Nós, Depoimentos e Fale Conosco. Coloque as âncoras no topo de cada seção. A âncora inicial é mostrada abaixo como um exemplo. A colocação dessas âncoras é uma etapa importante e deve ser feita com cuidado. Quando o usuário clicar em um link específico, o site rolará para a posição onde a âncora foi colocada.

103 Agora vamos aplicar os links. Para fazer isso, selecione a caixa de texto ‘Home’. Vá para a opção ‘Hiperlinks’ (localizada na parte superior), clique na pequena seta para baixo para expandir a lista. Aqui você pode ver todas as âncoras que acabamos de colocar. Vincule-o à âncora ‘Home’. Repita esta etapa para outras caixas de texto, exceto Newsletter, pois aplicamos uma exibição lightbox a ela.

Resultado final após a criação de hiperlinks

Toques Finais – Mudando as Propriedades da Página e Adicionando Favicon

104 Dentro do Modo Plano, clique com o botão direito do mouse na página inicial e escolha ‘Propriedades da página’. Uma caixa de diálogo aparecerá. Escolha a guia ‘Opções’ e, sob o nome da página, coloque – ‘Bem-vindo a example.com’ e clique em OK. Este é o texto que aparecerá na parte superior da janela do navegador.

105 Vá para Arquivo > Propriedades do site. Na guia Layout, a última opção é ‘Favicon’. Ao passar o mouse sobre ele, aparecerá um pop-up descrevendo o que é um favicon e qual deve ser o tamanho ideal. É bom adicionar um favicon, pois ajuda a destacar sua marca e também serve para ajudar os usuários a identificar facilmente seu site, caso o tenham marcado.

Testando e exportando

106 Teste seu site acessando Arquivo > Visualizar site no navegador ou Ctrl+Alt+E. Não escolha ‘Visualizar página no navegador’ desta vez, pois os links não funcionam na visualização da página. Você pode tentar colocar as âncoras em pontos diferentes para garantir que, quando o usuário clicar em um link, o site role para a seção correta e para a posição correta.

107 Por fim, vá em Arquivo > Exportar como HTML (Ctrl+E). No URL do site, coloque qualquer nome como ‘example.com’ e escolha o local. Clique OK. O site está pronto.

Resultado Final de Cada Página

Primeira página

Seção ‘Serviços’

Seção ‘Por que nós’

Seção ‘Depoimentos’

Seção ‘Fale Conosco’

Seção Rodapé

Seção ‘Newsletter’

CONCLUSÃO

Tenho certeza de que você conseguiu tudo o que prometi depois de seguir este tutorial. Este é apenas um exemplo. Brinque um pouco com esta ferramenta incrível e crie sites impressionantes e profissionais enquanto explora infinitas possibilidades criativas no caminho. Obrigada.