Manual Do Adobe Muse CC 2016

ADOBE MUSE
Criando seu primeiro site

Sumrio
Captulo 1
Instalar o software e configurar o projeto de amostra
Criar um mapa do site
Editar a pgina A-mestre
Definir a paleta de cores e renomear amostras no painel Amostras
Trabalhar com elementos com largura de 100%
Trabalhar com botes de estado e botes do Photoshop inseridos
Definir as opes de traado de um retngulo para criar linhas
Neste tutorial, voc se familiarizar com o espao de trabalho do Adobe Muse e aprender como criar um site completo sem escrever nenhum
cdigo. A Parte 1 de Criando seu primeiro site com o Adobe Muse inclui instrues para ajud-lo a comear com o Muse. Voc aprender como
trabalhar com pginas-mestre, widgets, imagens inseridas e links. Ao trabalhar neste tutorial, voc poder ver qual ser a aparncia final do site a
qualquer momento examinando o site dinmico Katie's Cafe.
Para o incio
Instalar o software e configurar o projeto de amostra
1. Baixe e instale a verso mais recente do Adobe Muse CC.

2. Baixe os arquivos de amostra (ZIP, 78 MB).
3. Descompacte o arquivo ZIP e salve a pasta denominada Katies Caf Building v3 no seu computador.
4. Inicie o Muse. A tela de Boas-vindas exibida. Escolha Arquivo > Novo site.
5. Escolha Adobe Muse CC > Preferncias. Na seo Geral, selecione o tema de cores desejado para a rea de trabalho e clique em OK
(ver Figura 1).
Figura 1. Clique em uma das amostras de cor cinza para definir o tema de cores do Adobe Muse.
A caixa de dilogo Novo site exibida. Voc usar essa interface para editar as configuraes aplicadas a todo o site.
6. Defina o nmero de Colunas como 9. Na seo Margens, defina as margens superior e inferior como 0 quando os campos no estiverem
vinculados. Defina as margens esquerda e direita como 4. Na seo Preenchimento, defina o preenchimento superior e inferior como 0.
Defina a Largura da pgina como 960 e a Altura mnima como 872 (ver Figura 2).
1
Figura 2. Atualize o nmero de colunas na caixa de dilogo Novo site.
Observao: Use o menu Resoluo para escolher entre as opes Padro e HiDPI (2x). Essa configurao permite definir a qualidade de sada
dos ativos quando voc publica ou exporta um site do Muse. Para obter mais informaes, consulte Criar sites de alta resoluo.
Neste tutorial, voc aprender a criar seu primeiro site no Muse para computadores desktop. Mantenha o menu Layout inicial definido como
Computador, que o padro. Observe que se voc quiser criar um site com layouts alternativos para smartphones e tablets, use esse menu para
escolher qual layout deseja projetar primeiro.
A opo marcada Rodaps adesivos ativada por padro. Ela faz com que o rodap continue no local desejado, mesmo se a janela do
navegador for significativamente maior que o design de pgina da Web, porque est em uma tela de cinema da Apple (ver Figura 3).
Figura 3. A opo Rodaps adesivos est ativada por padro.
Quando a opo Rodaps adesivos estiver ativada, o contedo do rodap permanecer alinhado com a parte inferior da janela do navegador,
independentemente da resoluo e das dimenses do monitor do computador do visitante (ver Figura 4).
2
Figura 4. Um site ativo reduzido com a opo Rodaps adesivos ativada ( esquerda) comparado a um site sem esse recurso ativado ( direita).
Para esse projeto de site de exemplo e, na maioria dos casos, voc manter a opo Rodaps adesivos ativada na caixa de dilogo Novo site.
Nota: a pasta de arquivos de exemplo do katiesCafe contm uma verso concluda do projeto de exemplo chamada katiescafe-final.muse. Se
quiser, clique duas vezes na verso final do arquivo .muse para abri-la depois de salvar sua verso do projeto como katiesCafe.muse. O Adobe
Muse permite abrir vrios projetos de site ao mesmo tempo, para que voc possa examinar o arquivo katiescafe-final e us-lo como uma
referncia medida que seguir essas instrues.
Na prxima seo, voc comear a adicionar novas pginas ao site.
7. Clique em OK para salvar as alteraes e fechar a caixa de dilogo Novo site.
8. Escolha Arquivo > Salvar site. Na caixa de dilogo Salvar arquivo do Adobe Muse como, digite um nome para o site: katiesCafe.muse.
Navegue at o local em que voc deseja salvar esse projeto de exemplo (como a pasta katiesCafe na sua rea de trabalho) e clique em
Salvar.
Para o incio
Criar um mapa do site
Um mapa do site uma lista estruturada das pginas que existem na hierarquia de um site. Voc pode criar pginas que estejam no mesmo
nvel (sem subpginas) ou pode criar mapas de site que contenham nveis diferentes de pginas. (Por exemplo, um site maior poderia ter uma
pgina Sobre com duas subpginas chamadas Nossa misso e Nossa equipe.) O Muse facilita a criao e a reorganizao das pginas em
qualquer ordem de sua preferncia e voc nunca ter que se preocupar com links quebrados. No entanto, importante dedicar algum tempo
organizao do contedo de um novo site, definir quais pginas so necessrias e decidir como apresentar as informaes do site. Em um
projeto real, faz parte da fase de pr-planejamento finalizar as diferentes sees do site e escolher a ordem das pginas. Para obter mais
informaes, consulte Criar um mapa do site.
Depois de fechar a caixa de dilogo Novo site, voc ser redirecionado automaticamente para o modo de exibio Plano no Muse. Por padro,
todos os novos sites contm uma pgina da Web (denominada Incio) vinculada a uma pgina-mestre (denominada Mestre A). Voc pode
renomear ambas as pginas, conforme desejar.
Para criar uma experincia consistente, voc colocar itens de site repetidos, como o cabealho, o rodap e a navegao do site, em pginas-
mestre. Com essa estratgia, voc s precisar adicionar o contedo exclusivo s pginas individuais, medida que criar o design do site.
Esse projeto de exemplo um site menor que contm um total de cinco pginas, incluindo a pgina Incio. Siga as etapas abaixo para adicionar
novas pginas:
Quando voc clica no cone do sinal de adio (+) abaixo de uma miniatura de pgina, cria uma pgina de subnvel para expandir uma seo
com pginas relacionadas a um tpico especfico.
Nesse ponto, o mapa do site tem um total de cinco pginas chamadas Incio, alimentos, eventos, sobre e visitas (ver Figura 5).
1. Passe o mouse sobre a miniatura da pgina Incio e clique no cone de adio (+) direita da miniatura da pgina Incio para criar outra
pgina no mesmo nvel da primeira. Clique no campo Rtulo abaixo da nova pgina e denomine-a: alimentos.
2. Clique no cone do sinal de adio (+) direita da miniatura da pgina de alimentos para criar outra pgina. Clique no rtulo e renomeie a
pgina: eventos. Clique no cone do sinal de adio (+) direita da miniatura da pgina de eventos para criar uma nova pgina. Denomine
a nova pgina como: sobre. Repita essa operao para criar mais uma nova pgina no mesmo nvel da pgina Incio e denomine-a como:
visitas.
3
Figura 5. Crie um total de cinco pginas no mapa do site.
Observao: Este site de exemplo contm cinco pginas no mesmo nvel. Entretanto, possvel criar pginas de subnvel para organizar as
pginas conforme desejado. As pginas de subnvel so normalmente usadas para criar diferentes sees do site. Se voc criar mais de uma
pgina-mestre, clique com o boto direito do mouse (ou clique com a tecla Control pressionada) nas miniaturas de pginas no modo Plano para
vincul-las a uma pgina-mestre especfica. Quando voc cria um novo site, as pginas so vinculadas automaticamente pgina-mestre Mestre
A.
O modo Plano fornece as ferramentas para estruturar um site e criar o mapa do site. Se quiser alterar a organizao do site, voc poder definir a
disposio das pginas arrastando as miniaturas de pgina no mapa do site.
3. Passe o mouse sobre a miniatura de pgina GALERIA e clique no sinal de adio (+) abaixo dela. Clique no campo da nova pgina filha e
nomeie-a: Galeria - tela cheia (ver Figura 6).
Clique no campo de nova pgina filho e nomeie-a: Galeria- tela cheia (figura 6).
Figura 6. Adicionar uma nova pgina de subnvel ao mapa do site da seo Galeria.
Aps a realizao dessas alteraes, o mapa do site estar completo.

Na parte superior da interface de exibio Plano, observe que h trs botes de layout para Desktop, Tablet e Telefone. Neste projeto de
exemplo, voc s criar um design de desktop para mostrar o site nas telas de computadores. Os layouts Tablet e Telefone tm um sinal de
adio (+) ao lado de seus nomes, indicando que ainda no foram criados (ver Figura 7).
Figura 7. Os botes Layout permitem criar e alternar entre os trs layouts alternativos do site.
Alm de clicar em um boto de layout para alternar entre os layouts de site, voc tambm pode usar atalhos de teclado para alternar entre os
planos de site, quando houver mais de um layout:
Pressione Command+7 (Mac) ou Control+7 (Windows) para alternar para o mapa do site Desktop.
Pressione Command+8 (Mac) ou Control+8 (Windows) para alternar para o mapa do site Tablet.
Pressione Command+9 (Mac) ou Control+9 (Windows) para alternar para o mapa do site Telefone.
Esses atalhos de teclado somente esto ativos em projetos de site que contm pelo menos dois layouts Desktop, Tablet e/ou Telefone.
Voc continuar criando o layout Computador ao seguir junto com o restante deste artigo. Para saber mais sobre o desenvolvimento de sites para
tablets e dispositivos mveis, leia Criar designs de layout mvel no Muse.
4
Na prxima seo, voc aprender como editar a pgina A-mestre para adicionar elementos compartilhados do site, incluindo o contedo do
rodap.
Para o incio
Editar a pgina A-mestre
Comece desenvolvendo a primeira pgina-mestre para o site adicionando a arte que ser exibida em todas as pginas vinculadas no site.
Embora voc possa usar o Muse como uma ferramenta de design, ele gera HTML padro do setor, JavaScript e CSS em segundo plano para
criar pginas da Web. Quando voc optar por aplicar estilos (como cantos arredondados e cores de preenchimento de gradiente), o Muse no
criar uma forma vetorial, nem uma grade de pixels. O projeto .muse publicado um site totalmente funcional. Voc iniciar a atualizao da cor
de fundo da pgina-mestre.
1. No modo Plano, clique duas vezes no campo abaixo da miniatura de pgina A-mestre e renomeie a pgina mestre: Rodap de pgina. No
modo Plano, clique duas vezes no campo abaixo da miniatura de pgina A-mestre e renomeie a pgina mestre: Rodap de pgina. A
pgina-mestre aberta em sua prpria guia na parte superior da rea de trabalho (ver Figura 8).
Figura 8. A pgina A-mestre est pronta para edio no Modo de design.
O Indicador de seleo est localizado no canto superior esquerdo do painel Controle. Quando no h nenhum item selecionado, o Indicador de
seleo exibe a palavra Pgina, indicando que apenas a prpria pgina est selecionada. Se voc selecionar um objeto na pgina, como um
retngulo, o termo Retngulo ser exibido.
Durante o seu trabalho, preste ateno no Indicador de seleo para verificar se voc selecionou o elemento que deseja editar. Se houver outros
elementos de pgina selecionados, voc sempre poder selecionar a pgina inteira novamente clicando na rea cinza em qualquer um dos lados
da pgina.
Com a pgina selecionada, possvel usar os menus no painel Controle para atualizar a cor de preenchimento e as configuraes de traado.
Em seguida, clique duas vezes na miniatura de pgina A-mestre para abri-la no Modo de design. Para esse design, mantenha as configuraes
padro.
2. Clique no link Preenchimento do navegador para definir a cor do fundo ou a imagem da janela do navegador que exibida fora da rea da
pgina.
3. Para esse design de pgina, defina a cor de preenchimento do navegador como uma cor especfica, inserindo o valor hexadecimal no
campo: #F5F1EE (ver Figura 9).
5
Figura 9. Atualize a amostra de cor no menu Preenchimento do navegador.
4. Clique em qualquer lugar fora do menu Preenchimento do navegador para fech-lo.
Para o incio
Definir a paleta de cores e renomear amostras no painel Amostras
Para facilitar a aplicao da mesma cor depois em outros elementos do site, voc poder adicionar e renomear as amostras de cor. Isso tambm
permite alterar uma amostra nomeada de cor para atualizar todas as ocorrncias dessa cor usada no site.
1. Abra o painel Amostras (Janela > Amostras).
2. Escolha Arquivo > Inserir. Procure e selecione o arquivo chamado color-palette.png na pasta de arquivos de exemplo. Clique uma vez em
qualquer local na pgina para inserir a imagem.
3. Clique com o boto direito do mouse no painel Amostras e escolha Excluir todas no usadas (ver Figura 10)
Figura 10. Selecione a opo para excluir todas as cores no usadas no site.
Renomear cores
As cores usadas principalmente no design do site so exibidas agora, juntamente com as amostras genricas de cores 50% cinza, branco e
preto. Em seguida, voc renomear as cores.
1. Clique duas vezes na amostra de tons de marrom na extremidade direita. A caixa de dilogo Opes de amostras aberta para exibir os
atributos da cor. Alm de especificar um valor diferente de cor para a amostra, voc pode atualizar as Opes de amostra para nomear a
cor de amostra de forma descritiva.
2. Desmarque a caixa de seleo Nome com valor de cor e digite um novo nome no campo Nome da amostra: Marrom escuro (ver Figura
11).
6
Figura 11. Atribua um nome descritivo para a amostra de cor.
3. Clique em OK para fechar a caixa de dilogo Opes de amostras.

4. Repita as etapas 1-3 para renomear a segunda amostra de cor direita. Nomeie-a como: Off-white.
5. Renomeie as duas cores restantes, movendo da direita para a esquerda: Marrom claro e Marrom.
6. Selecione a imagem inserida (color-palette.png) e pressione Delete/Backspace para exclu-la.
Em seguida, voc criar o rodap que aparecer em todas as pginas.
Para o incio
Trabalhar com elementos com largura de 100%
Os itens definidos com a largura de 100% preenchem o navegador horizontalmente, qualquer que seja o redimensionamento da janela do
navegador do visitante. Se voc definir um elemento de pgina para se alinhar tambm com as bordas superior e inferior da janela do navegador,
um objeto preenchido com uma cor slida ou ativo lado a lado tambm ser expandido para se ajustar ao espao disponvel.
1. Desenhe um retngulo com a ferramenta Retngulo que inclua toda a largura da pgina e tenha cerca de 250 pixels de altura, perto da
parte inferior da pgina.
2. Enquanto o retngulo est selecionado, use o menu Preenchimento para definir a cor de preenchimento do retngulo como Marrom escuro
e defina a largura do traado do retngulo como 0. Voc pode ver quando o retngulo est selecionado, porque uma caixa delimitadora azul
com alas aparece ao redor de suas bordas e o Indicador de seleo no canto superior esquerdo exibe a palavra Retngulo (ver Figura 12).
7
Figura 12. Arraste as alas nas laterais do retngulo para dimension-lo.
3. Use a ferramenta Seleo para mover o retngulo para a posio. Voc deve ver brevemente uma borda vermelha realando os lados
esquerdo, inferior e direito da janela do navegador. Essa borda vermelha indica que o retngulo est definido para exibir na largura de
100%.
Observao: Se preferir, voc tambm poder abrir o painel Transformar em (Janela > Transformar) e clicar no boto 100% de largura.
4. Se voc quiser ver o design do site sem a sobreposio de guias, escolha Exibir > Ocultar guias. Voc tambm pode usar o menu Opes
de exibio no painel Controle para ocultar e mostrar as guias.
Para o incio
Trabalhar com botes de estado e botes do Photoshop inseridos
Botes de estado so elementos da pgina que voc pode arrastar e soltar da Biblioteca de widgets. Eles fornecem um continer conveniente
para criar botes de rolagem. A vantagem de usar esses tipos de botes que todos os elementos internos tero seus estados alterados ao
mesmo tempo, com base na interao do visitante. Adicione quadros de texto, imagens, retngulos, grficos inseridos e botes do Photoshop
para criar botes personalizados que correspondam ao design de um site.
O Boto de estado contm um ponto cinza e um quadro de texto com as palavras Lorem Ipsum como contedo de espao reservado. Embora
cada um desses elementos tenha seus prprios estados, eles respondem em sintonia quando voc rola o Boto de estado ou clica nele. Se voc
cria manualmente um boto que contm elementos diferentes, apenas o texto ou apenas o ponto cinza pode responder aos movimentos do
mouse do visitante, dependendo onde o visitante posiciona o cursor.
1. Abra a Biblioteca de widgets (Janela > Biblioteca de widgets). Clique na categoria Botes para expandi-la.
2. Selecione o widget Boto de estado e arraste-o at a pgina.
3. Clique em Visualizao para ver uma visualizao da pgina. Use o cursor para rolar e clique no boto padro.
1. Clique em Design para continuar a editar a pgina.
2. Selecione o ponto cinza esquerda do texto de espao reservado e pressione Delete/Backspace para exclu-lo.
3. Escolha Arquivo > Inserir boto do Photoshop e procure e selecione o arquivo banner.psd na pasta Itens. Mantenha todas as configuraes
padro que aparecem na caixa de dilogo Importar opes do Photoshop e clique em OK (ver Figura 13).
8
Figura 13. A caixa de dilogo exibir as camadas do arquivo do Photoshop e os menus Estado permitem que voc escolha qual camada ser
exibida para cada estado do boto.
7. Clique uma vez dentro do Boto de estado para inserir o arquivo do Photoshop.
8. Enquanto o grfico inserido ainda est selecionado, clique com o boto direito do mouse e escolha Organizar > Enviar para o pano de
fundo (ver Figura 14).
Figura 14. Reorganizar a imagem de banner do Photoshop para exibir atrs do quadro de texto.
9. Selecione o texto do espao reservado Lorem Ipsum com a Ferramenta texto e digite: MENU DOWNLOAD.
10. Enquanto o texto est selecionado, atualize a cor do texto no painel Controle ou no painel Texto como Off-white. Use o menu Fonte para
escolher a primeira opo: Adicionar fontes da web. Na interface exibida, pesquise e escolha Open Sans Condensed Bold para formatar o
texto.
Observao: Observao: Open Sans Condensed Bold uma fonte da web que voc pode fazer download escolhendo Adicionar fontes da web
no menu Fonte. Observao: Open Sans Condensed Bold uma fonte da web que voc pode fazer download escolhendo Adicionar fontes da
web no menu Fonte. Para saber mais sobre como trabalhar com fontes da Web, leia Tipografia no Muse: usando fontes da Web, fontes seguras
da Web e fontes de sistema.
11. Defina o tamanho da fonte como 15 e escolha o alinhamento centralizado. Ajuste o tracking como 0 e o entrelinhamento como 24 pixels.
Deixe o estilo do link padro. No menu Marca de nvel de pargrafo, escolha Subttulo (h2) para melhorar a otimizao do mecanismo de
pesquisa do site (ver Figura 15).
9
Figura 15. Atualize os estilos de formatao com as opes no painel Texto.
Verifique no painel Estados se os quatro estados do quadro de texto so idnticos. Esta a aparncia deste design. Entretanto, voc pode
atualizar as cores do texto para estados diferentes, se desejar.
12. Use a ferramenta Seleo para arrastar as alas laterais do quadro de texto para torn-lo mais largo, de modo que o texto no quebre
linhas. Arraste o quadro de texto na horizontal at que esteja centralizado no Boto de estado. Uma guia vertical azul-escuro exibida
brevemente quando o quadro de texto est centralizado no Boto de estado.
z
13. Pressione Escape depois de selecionar o Boto de estado inteiro.
14. Abra o painel Estados (Janela > Estados) para ver a aparncia dos quatro estados: Normal, Em cima, Pressionamento do boto do mouse
e Ativo. O estado Normal selecionado. Esse painel permite editar as vrias maneiras de exibio do grfico do boto, dependendo da
atividade do cursor do visitante.
15. Use o menu Preenchimento para definir a cor de preenchimento do Boto de estado como nenhuma.
16. Repita as etapas 14-15 para definir a cor de preenchimento de todos os estados como nenhuma.
17. Use a ferramenta Seleo para posicionar o Boto de estado na parte superior do retngulo marrom, usando as guias de alinhamento para
centraliz-lo verticalmente na pgina (ver Figura 16).
Figura 16. Centralizar o Boto de estado personalizado na parte superior da rea de rodap.
Para o incio
Definir as opes de traado de um retngulo para criar linhas
Para adicionar alguns detalhes visuais, voc criar uma linha e uma duplicata dela.
1. Use a ferramenta Retngulo para desenhar um retngulo esquerda do Boto de estado que aproximadamente 377 pixels de largura e
15 pixels de altura. Uma dica de ferramenta exibe as dimenses do retngulo medida que voc o desenha.
2. Defina a cor de preenchimento como nenhuma e a cor do traado como Off-white.
3. Clique na palavra Traado no painel Controle para abrir as Opes de traado.
4. Mantenha a configurao de alinhamento padro: Centralizar traado. Clique no cone Link para permitir larguras de traado diferentes para
10
cada lado do retngulo. Defina as larguras do traado inferior, esquerdo e direito como 0, de forma que apenas a parte superior tenha uma
largura de traado igual a 1 (ver Figura 17).
Figura 17. Atualize as configuraes de opo de traado para exibir somente um traado na parte superior do retngulo.
5. Clique em qualquer outro lugar da pgina para fechar a caixa de dilogo Opes de traado.
6. Use a ferramenta Seleo para posicionar o retngulo de modo que haja esquerda do Boto de estado e a borda superior centralizada
horizontalmente.
7. Arraste o retngulo pressionando Option/Alt para duplicar o retngulo. Posicione-o no lado direito do Boto de estado (ver Figura 18).
Figura 18. Alinhe horizontalmente os dois retngulos e o Boto de estado.
Continue lendo este tutorial. No prximo captulo, voc aprender como trabalhar com widgets de Menu. Os widgets permitem adicionar
rapidamente funes avanadas a pginas sem escrever nenhum cdigo. Voc ver como editar o comportamento e a aparncia de widgets para
personalizar o modo como so exibidos no design do site.
As publicaes do Twitter e do Facebook no so cobertas pelos termos do Creative Commons.
Avisos legais | Poltica de privacidade on-line
11
Captulo 2
Trabalhar com widgets de menu
Criar e aplicar estilos de pargrafo
Adicionar cones da marca Font Awesome a uma pgina
Adicionar links a arquivos para download
Adicionar links a sites externos
Criar links de email
Usar guias para definir as regies de cabealho e rodap de uma pgina
Definir elementos de pgina como itens de rodap
Adicionar uma ncora parte superior da pgina
No captulo 1 de Criando seu primeiro site com o Muse, voc criou um novo site, utilizou o modo Plano para criar as pginas do site e editou a
pgina-mestre no modo Design para adicionar elementos de pgina ao rodap. Nesta parte, voc aprender como adicionar e personalizar os
widgets. O primeiro tipo de widget que voc adicionar denominado Menu, que ajuda os visitantes a navegarem para pginas no site. Voc
tambm aprender sobre os diferentes tipos de links que pode adicionar no Adobe Muse.
Para o incio
Trabalhar com widgets de menu
O rodap das pginas-mestre geralmente inclui a navegao do site, portanto voc adicionar o prximo.
1. Abra a Biblioteca de widgets selecionando Janela > Biblioteca de widgets.

2. Na Biblioteca de widgets, clique na seo Menus para expandi-la. Selecione o widget Horizontal e arraste-o do painel para a rea de
rodap da pgina A-mestre (ver Figura 19).
Figura 19. O widget Horizontal exibe o estilo padro quando voc o arrasta para uma pgina.
O painel preto que aparece sempre que voc arrasta um widget da Biblioteca de widgets chamado painel Opes. Clique fora do painel para
fech-lo. Clique no boto de seta sempre que deseja acess-lo novamente.
O menu exibe automaticamente os nomes das pginas criadas, na mesma ordem em que aparecem no mapa do site. Os nomes das pginas so
12
automaticamente vinculados s pginas e so atualizados dinamicamente. Se voc depois renomear ou mover as pginas no modo Plano, os
widgets de Menu atualizam e os links de menu continuam funcionando como esperado.
Embora cada tipo de widget fornea uma funcionalidade diferente, muitos dos conceitos que voc usar ao trabalhar com widgets so iguais.
Encontre o widget que voc deseja usar na Biblioteca de widgets e arraste-o para a pgina. Cada widget contm uma hierarquia de elementos de
widget aninhados. Depois de clicar em um widget, voc pode continuar clicando para detalhar seus subelementos. medida que voc seleciona
os subelementos, o Indicador de seleo no canto superior esquerdo exibe o nome do elemento selecionado atualmente.
Por exemplo, quando voc clicar no widget pela primeira vez, ele ser selecionado. Se voc clicar de novo, poder selecionar um subelemento,
como um continer, e depois clicar mais uma vez para selecionar o quadro de texto dentro de um continer. Para voltar ao subelemento
selecionado, pressione a tecla Escape. Voc tambm pode clicar na pgina fora da rea do widget para desmarc-lo.
Quando todo o widget est selecionado, voc pode reposicion-lo. Voc tambm pode arrastar suas alas de transformao para dimensionar ou
redimensionar as dimenses de todo o widget. possvel definir a cor de preenchimento e do traado, bem como aplicar estilos para controlar a
aparncia de todo o widget.
3. Use a ferramenta Seleo para posicionar o widget Menu abaixo do Boto de estado, centralizado verticalmente.
Configurar e personalizar widgets
Para configurar widgets, atualize as configuraes no painel Opes. O painel Opes contextual e permite aplicar alteraes nas
configuraes de atualizao especficas ao widget inteiro, ou ao subelemento selecionado do widget. Alguns widgets tm mais opes do que
outros. O painel Opes permite controlar como os widgets se comportam e tambm como o contedo deles exibido.
Enquanto um elemento de continer est selecionado, como um item de menu, voc pode criar o estilo do widget definindo as opes de
Preenchimento e Traado. Quando rtulos de texto so selecionados, possvel usar o painel Texto ou as opes de texto no painel Controle
para aplicar estilo ao texto. s vezes, voc editar os rtulos de texto nos widgets (a menos que defina widgets de Menu para o Tipo de menu
manual, os nomes de pginas j estaro configurados com base nas pginas do mapa do site).
1. Clique uma vez no widget de Menu e observe que o Indicador de seleo exibe a palavra: Menu. Clique no boto de seta azul para acessar
o painel Opes (ver Figura 20).
Figura 20. Abrir o painel Opes para definir as configuraes de widget.
Verifique se as seguintes opes padro esto definidas, conforme mostrado na Figura 22:
Tipo de menu: Pginas de nvel superior
Direo: Horizontal
Edio conjunta: Ativada
Tamanho do item: Tamanho uniforme
Mostrar cone esquerda: Desativado
Mostrar rtulo: Ativado
Mostrar cone direita: Submenus somente
Posicionamento das partes: Horizontal; Alinhamento central
As configuraes do menu Opes permitem a voc configurar o comportamento do menu.

Em seguida, voc aprender a editar a aparncia dos botes do menu e a controlar a formatao do texto para corresponder ao design do site.
2. Clique em qualquer outro lugar da pgina para fechar o menu Opes.
13
Entender estados do boto
1. Escolha Visualizar > Visualizar site no navegador para visualizar o site e testar o widget Menu.
2. Examine os botes no menu quando a pgina for carregada pela primeira vez (o estado chamado Normal). Passe o cursor sobre os
botes para ver o estado Em cima aparecer. Quando voc clica em um boto, a pgina correspondente carregada e o boto exibido
com uma cor cinza mais escura, que o estado Ativo padro. O estado Ativo indica a pgina selecionada no momento conforme os
visitantes navegam em um site.
Observao: Se voc clicar e mantiver o boto do mouse pressionado, haver um estado adicional, Pressionamento do boto do mouse, o qual
exibe uma aparncia personalizada quando o visitante clica no boto.
Editar estados do boto
Em seguida, voc ver como editar os estados de um boto.

1. Feche o navegador e volte para o Adobe Muse.
2. Clique no widget uma vez para selecionar o menu inteiro. Clique no boto de alimentos novamente, para selecionar o item de menu
alimentos (ver Figura 23). Se voc clicar acidentalmente uma terceira vez e o Indicador de seleo exibir a palavra Rtulo, pressione
Escape mais uma vez para saltar um nvel na hierarquia, para que o termo Item de menu seja exibido.
Observao: Se voc clicar acidentalmente uma terceira vez e o Indicador de seleo exibir a palavra Rtulo, pressione Escape mais uma vez
para saltar um nvel na hierarquia, para que o Indicador de seleo exiba o termo Item de menu novamente.
Como a opo Editar junto est ativada no painel Opes, todas as alteraes feitas na aparncia de um item de menu so aplicadas aos outros
botes no widget de Menu. Isso torna a edio mais rpida. A menos que voc precise aplicar um estilo diferente a cada boto, mantenha a
opo Editar junto ativada.
Os botes cinzas definem a aparncia de cada estado (ver Figura 21).
3. Abra o painel Estados selecionando sua guia ou escolhendo Janela > Estados.
Figura 21. Use o painel Estados para escolher os diferentes estados e editar a aparncia correspondente.
4. No painel Estados, clique em cada item na lista: Normal, Em cima, Pressionamento do boto do mouse e Ativo. Observe que, medida que
voc clicar em cada estado no painel, o widget Menu na pgina ser atualizado para exibir a aparncia do estado.
5. Clique no estado Normal. Quando o item de menu INCIO estiver selecionado, use o menu Preenchimento para definir a cor de
preenchimento como nenhuma. Quando voc definir a cor de preenchimento para o boto HOME, todos os itens de menu atualizaro seu
estado Normal, pois a opo Editar junto estar ativada.
6. Clique no estado Em cima no painel Estados e defina a Cor de preenchimento como nenhuma. Repita esse processo mais duas vezes para
definir a cor de preenchimento dos estados Pressionamento do boto do mouse e Ativo como nenhum. Isso remove a cor de fundo para
criar botes transparentes.
Posteriormente, quando voc criar seus prprios sites, poder fazer experincias com a definio de uma cor de preenchimento para todo o
widget e depois o ajuste de uma cor de preenchimento diferente para os itens de menu. Voc tambm pode adicionar imagens de fundo para
preencher os itens de menu.
Em seguida, voc atualizar a aparncia dos rtulos de boto usando um processo de edio semelhante.
Editar rtulos de um widget de Menu
14
Siga estas etapas para atualizar a formatao dos rtulos de texto que exibem os nomes de pgina em cada item de menu.
Para saber mais sobre como trabalhar com fontes da Web, leia Tipografia no Muse: usando fontes da Web, fontes seguras da Web e fontes de
sistema.
1. Enquanto o item de menu INCIO est selecionado, clique no boto novamente para selecionar o texto dentro do boto. A palavra Rtulo
exibida no Indicador de seleo.
2. No painel Estados, verifique se o estado Normal est selecionado.
3. Abra o painel Texto clicando em sua guia ou escolhendo Janela > Texto.
4. Atualize o texto usando o menu Texto no painel Controle ou no painel Texto. Defina a cor como Off-white. No menu Fonte, escolha a
primeira opo: Adicionar fontes da web. Na interface exibida, procure e selecione a fonte da web Open Sans para adicion-la. Em seguida,
selecione-a na lista de fontes para aplic-la.
5. Defina o tamanho da fonte como 12 e use o alinhamento centralizado. Ajuste o tracking para 1 e o entrelinhamento para 120% (ver Figura
22):
Figura 22. Definir as opes no painel Texto para atualizar a aparncia do rtulo do menu.
Para o incio
Criar e aplicar estilos de pargrafo
1. Abra o painel Estilos de pargrafo clicando em sua guia ou escolhendo Janela > Estilos de pargrafo.
2. Clique no boto Novo estilo (cone de pgina) na parte inferior do painel para salvar esse grupo de estilos de fonte, facilitando a aplicao
das fontes a outros elementos de texto posteriormente.
3. Clique duas vezes no novo estilo recm-criado no painel Estilos de pargrafo, que recebeu o nome padro de Estilo de pargrafo.
Renomeie-o para rodap de menu (ver Figura 23).
Figura 23. Clique no Novo estilo (cone de pgina) para adicionar um novo estilo de pargrafo. Em seguida, clique duas vezes no novo estilo e
insira um nome descritivo no campo Estilo de nome.
Observao: Clique com o boto direito do mouse (ou com a tecla Control pressionada) no nome de um estilo no painel Estilos de pargrafo
15
para ver um menu que permite duplicar, excluir ou desvincular estilos. Voc tambm pode escolher Opes de estilo no menu, em vez de clicar
duas vezes no nome do estilo para acessar as Opes de estilo de pargrafo.
Observe que a janela Opes de estilo inclui a capacidade de aplicar um estilo a uma marca HTML especfica.
Se voc examinar o painel Estados, observar que todos os estados: Normal, Em cima, Pressionamento do boto do mouse e Ativo usam a
mesma formatao de fonte dos rtulos de itens de menu.
1. Clique em Visualizar para visualizar como o design ser exibido em um navegador. O Muse usa uma verso do Webkit para exibir a
pgina, utilizada com vrios navegadores modernos da Web. medida que interagir com o menu, observe que os botes exibem somente
seus rtulos (os contineres de itens de menu so transparentes). Observe que os rtulos no so alteradas quando voc passa o cursor
ou clica nos botes no menu.
2. Depois de testar o menu, clique em Design para continuar editando a pgina A-mestre.
Para o incio
Adicionar cones da marca Font Awesome a uma pgina
Em vez de adicionar imagens inseridas que levam mais tempo para carregar e so mais demoradas para criar e editar, possvel arrastar e
soltar elementos Font Awesome na pgina. Esses elementos so semelhantes s fontes da Web. Voc adiciona elementos de fonte, que incluem
muitos cones comuns. Para atualiz-los, use as configuraes no painel Controle ou Texto da mesma forma que voc cria o estilo dos quadros
de texto.
1. Em um navegador, visite Font Awesome widget na Biblioteca complementar do Adobe Muse.
2. Clique no boto Download para fazer download da extenso da Font Awesome compactada (na extenso de arquivo .mulib) para o seu
computador. No expanda o arquivo baixado.
3. Abra o painel Biblioteca (Janela > Biblioteca).
4. Clique no boto Importar e navegue para selecionar o arquivo .mulib que voc baixou na etapa 2.
5. O item Biblioteca FontAwesome (cones) listado no painel Biblioteca (ver Figura 24).
Figura 24. Depois de importar os itens da Biblioteca, eles so listados no painel, prontos para uso.
6. Clique na seta para expandir a pasta de cones FontAwesome.

7. Arraste um item cones de marca para a pgina na rea do rodap.
8. Clique no boto de seta azul para abrir o painel Opes e escolha a opo Facebook no menu.
possvel exibir uma barra de progresso medida que o cone carrega na visualizao de Design. Isso ocorre porque os cones so hospedados
em um servidor diferente, como fontes da Web.
9. No painel Controle, defina a cor de preenchimento como Marrom. No painel Texto, defina a cor da fonte como Off-white (ver Figura 25).
16
Figura 25. Atualizar a aparncia do cone do Facebook definindo a cor de preenchimento e do texto.
10. Repita as etapas 7-9 para criar mais quatro cones para Google+, Tumblr e Twitter. Use a ferramenta Seleo para alinh-los na horizontal
(ver Figura 26).
Figura 26. Alinhe o conjunto de quatro cones de rede social em uma linha, usando as guias inteligentes para que sejam exibidos com o mesmo
espaamento.
11. Selecione todos os cones de rede social e escolha Objeto > Grupo para agrup-los em um conjunto. Arraste o grupo na pgina at que
esteja centralizado na vertical, abaixo do boto Menu Download e do widget Menu.
Para o incio
Adicionar links a arquivos para download
Muitos sites de restaurante postam o menu online em formato PDF para que os visitantes possam salvar uma cpia em seus computadores ou
imprimi-lo.
1. Selecione o widget Boto de estado.
2. Use o menu Hiperlinks no painel Controle para selecionar o item na seo Arquivos na parte inferior do menu Vincular ao arquivo. Na caixa
de dilogo Importar exibida, navegue para selecionar o arquivo denominado Katie's Cafe Menu.pdf na pasta de arquivos de amostra. Clique
em Abrir para selecion-lo (ver Figura 27).
Figura 27. Navegue para selecionar a verso PDF do menu.
17
Quando voc usa o recurso Vincular ao arquivo, o arquivo carregado quando o site publicado ou includo na pasta do site quando o site
exportado. uma prtica recomendada copiar todos os arquivos para o site, na pasta local correspondente.
Se voc observar o painel Itens, ver que o arquivo KatiesCafeMenu.pdf aparece agora como um dos itens do site.
Dependendo do navegador utilizado, alguns navegadores exibiro o PDF na janela do navegador quando outros faro download apenas do
arquivo PDF para seu computador.
3. Escolha Arquivo > Visualizar pgina no navegador.
4. Clique no link Menu download e veja como o arquivo PDF vinculado exibido.
Para o incio
Adicionar links a sites externos
Voc pode adicionar links absolutos a outras pginas da Web fora do site. Siga estas etapas para adicionar links externos para cada um dos
cones de rede social.
1. Selecione o cone do Facebook e digite (ou copie/cole) o link na pgina do Facebook do Katie's Cafe no campo do menu Hiperlink:
http://www.facebook.com/KatiesCafeSF
2. Selecione o cone do Google+ e digite o link para a pgina do Katie's Cafe no Google+:
https://plus.google.com/u/1/117800212967830061444/posts
3. Selecione o cone do Tumblr e digite o link para o blog do Katie's Cafe no Tumblr: http://katiessf.tumblr.com
4. Selecione o cone do Twitter e digite o link para a pgina do Katie's Cafe no Twitter: http://twitter.com/katiescafesf
5. Clique no cone do Facebook novamente para selecion-lo. Clique nos hiperlinks das palavras sublinhadas em azul no painel Controle. Na
caixa de dilogo exibida, marque a opo: Abrir link em uma nova janela ou guia. Tambm digite uma dica de ferramenta no campo Dica
de ferramenta (ver Figura 28).
Figura 28. Ativar a caixa de seleo para abrir o link em uma nova janela ou guia.
6. Repita a etapa 5 para definir os links do Google+, Tumblr e Twitter para abrir em uma nova janela do navegador. Insira dicas de
ferramentas para cada link (que aparecem quando um visitante passa o mouse sobre os botes de cones de rede social).
Essa uma conveno de design comum na Web: links que vo para outras pginas do mesmo site so abertos na mesma janela do navegador
(o que acontece por padro no Adobe Muse) e links para pginas em outros sites externos geralmente so abertos em uma nova janela ou guia
do navegador.
Para o incio
Criar links de email
Este site de amostra usa o widget Formulrio de contato simples para que os visitantes enviem as mensagens. Posteriormente neste artigo, voc
aprender como adicionar um formulrio de contato pgina Contato.
Se desejar, voc pode adicionar links de email (que, quando clicados, abrem o cliente de email do visitante com uma nova mensagem que exibe
o endereo de email no campo Para).
Digite o endereo de email com o prefixo mailto: no menu Hiperlink, como este:
18
mailto:email@address.com
s vezes, a lista de links no menu Hiperlinks pode se tornar longa em sites maiores. Para localizar uma pgina especfica, o link de ancoragem, o
arquivo vinculado ou o URL externo, voc pode filtrar rapidamente a lista digitando as primeiras letras do link no campo do menu Links para ver a
exibio dos itens correspondentes.
Para o incio
Usar guias para definir as regies de cabealho e rodap de uma pgina
Quando voc desenvolve pginas individuais, geralmente elas tm alturas variveis, com base no contedo adicionado a cada pgina. O Muse
permite configurar regies para que o contedo do cabealho seja exibido na parte superior e o contedo do rodap seja exibido diretamente
abaixo do contedo da pgina, independentemente da altura de cada pgina.
Siga estas etapas para mostrar as guias e configurar as reas da pgina:
1. Para exibir as guias de cabealho e rodap, escolha Exibir > Mostrar cabealho e rodap. Como alternativa, voc pode usar o menu Exibir
no painel Controle para ativar as guias Cabealho e Rodap. Quando esto sendo mostrados, uma caixa de seleo exibida ao lado do
item Cabealho e Rodap (ver Figura 29).
Figura 29. Verifique se as guias Cabealho e Rodap esto em exibio.
Se preferir, voc tambm pode clicar com o boto direito do mouse no lado esquerdo da rea de trabalho, fora da rea da janela do navegador e
escolha a opo para Mostrar cabealho e rodap no menu exibido.
As rguas tambm devem estar sendo mostradas para reposicionar as guias de cabealho e rodap, para que voc defina as guias como uma
posio especfica em pixels.
Cinco guias horizontais azuis abrangem a largura da pgina. Comeando na parte superior, essas cinco guias so usadas para definir a parte
superior da pgina, a parte inferior do cabealho, a parte superior do rodap, a parte inferior da pgina da Web e a parte inferior da janela do
navegador. Quando voc arrasta as guias para definir essas reas, uma dica de ferramenta descreve cada guia e exibe seu local atual. Voc
pode aumentar a ampliao da pgina, aumentar o zoom para posicionar as guias com preciso.
Observao: A parte inferior da guia da janela do navegador define a menor parte da exibio mostrada para os visitantes. Dependendo do
design, voc pode definir uma cor de preenchimento ou imagem de fundo para preencher o navegador e definir a guia da parte inferior da pgina
acima da parte inferior da guia do navegador, se quiser que o contedo de preenchimento do navegador seja mostrando abaixo do contedo de
cada pgina.
Neste projeto de exemplo, o preenchimento do navegador no exibido abaixo do contedo da pgina.

2. Arraste tanto a guia da Parte inferior da pgina quanto a guia da Parte inferior do navegador para o mesmo local na parte inferior da pgina,
logo abaixo do retngulo do rodap, conforme mostrado na Figura 30.
19
Figura 30. Quando as guias da Parte inferior da pgina e da Parte inferior do navegador existem no mesmo local, o contedo do preenchimento
do navegador no exibido abaixo da parte inferior da pgina.
As trs guias superiores definem regies para o contedo exibido no cabealho, rodap e o contedo exclusivo da pgina; a rea central
expandida para ajustar a altura dos elementos adicionados a cada pgina.
Depois de fazer essas alteraes, a seo do rodap estar completa.
3. Arraste a guia Rodap at que fique um pouco acima da parte superior do retngulo de rodap, em torno de 620px.
4. Deixe a guia Parte superior da pgina na extremidade superior (no local Y: 0 px). Arraste a guia Cabealho at 0px tambm.
Para o incio
Definir elementos de pgina como itens de rodap
Certifique-se de definir os elementos na regio de rodap como itens de rodap. Isso garante que o rodap sempre seja exibido abaixo do
contedo exclusivo da pgina em cada pgina. Siga estas etapas:
1. Use a ferramenta Seleo para selecionar todo o contedo da pgina Rodap. Voc pode clicar e arrastar os itens no rodap ou escolher
Editar > Selecionar tudo.
2. Clique com o boto direito do mouse nos itens e verifique se a opo Item de rodap est marcada no menu que exibido. Como
alternativa, confirme se a caixa de seleo Rodap no painel Controle est ativada (ver Figura 31).
Figura 31. Verifique se os elementos do rodap selecionados esto definidos como itens de rodap.
Para o incio
Adicionar uma ncora parte superior da pgina
O contedo da pgina mestre Rodap exibido em todas outras pginas no site. um bom local para adicionar a ncora que permitir que os
20
visitantes voltem ao incio das pginas mais longas.
1. Clique no boto ncora no painel Controle para carregar uma ncora no Place Gun.
2. Nomeie a parte superior da ncora e posicione-a na parte mais superior da pgina (ver Figura 32).
Figura 32. Criar uma ncora com nome na parte superior e mov-la para a parte superior da rea da pgina.
Continue com o captulo 3 de Criando seu primeiro site, no qual voc aprender sobre as pginas-mestre hierrquicas e como aplicar as pginas-
mestre a pginas individuais. Voc tambm ver como criar itens reutilizveis do site e armazen-los no painel Biblioteca.
21
Captulo 3
Trabalhar com pginas-mestres hierrquicas
Criao do cabealho da pgina-mestre Interior
Criar um cabealho para a pgina-mestre de destino
Aplicar pginas-mestre a pginas no projeto
Preenchimento de um retngulo com uma imagem de fundo
Formatao e estilo do contedo de texto
Criar um separador decorativo de pgina com elementos agrupados
Criar um item reutilizvel de biblioteca
Alinhar elementos de pgina usando as guias de grade da pgina
Criao de estilos de diferentes linhas de texto dentro do mesmo quadro de texto
Preenchimento do restante da pgina inicial
No captulo 2 de Criar seu primeiro site com o Adobe Muse, voc criou novas pginas-mestre e adicionou navegao do site usando um widget
de menu. Voc aprendeu a detalhar os subelementos de widgets, selecion-los e editar a aparncia dos estados e rtulos usando o painel
Estados. Voc tambm explorou como adicionar contedo e estilo de texto usando estilos de pargrafo e viu como usar um arquivo de biblioteca
do Muse para adicionar a biblioteca impressionante de fontes com cones de pginas de carregamento rpido. Nesta seo, voc ver como criar
seus prprios itens de biblioteca e reutiliz-los nas pginas.
Para o incio
Trabalhar com pginas-mestres hierrquicas
Clique no link Plano ou clique na guia katiesCafe para retornar ao modo Plano
.
Observe que todas as miniaturas de pgina no site agora exibem os elementos de design que voc adicionou pgina-mestre Rodap vinculada
(ver Figura 33).
Figura 33. O design da pgina-mestre Rodap exibido em todas as miniaturas de pginas vinculadas no modo de exibio Plano.
Ao criar um site, as alteraes feitas na pgina-mestre atualizam automaticamente as pginas vinculadas. As pginas-mestre facilitam a
atualizao ou a manuteno de um site, pois voc pode atualizar uma pgina-mestre para alterar a aparncia do site.
Voc pode aplicar pginas-mestre a outras pginas-mestre. Uma pgina-mestre pode conter elementos compartilhados que so exibidos em uma
pgina-mestre diferente (como a rodap descrita nas sees anteriores), e voc pode criar pginas-mestres que herdam todos os elementos
daquela pgina-mestre, alm de todos os elementos que so exclusivos para uma seo do site.
22
Voc tambm pode mover elementos copiados entre as pginas-mestre escolhendo Editar > Colar no local.
Observe que, ao passar o mouse sobre o nome de uma pgina ou pgina-mestre, uma dica de ferramenta exibe a hierarquia das pginas-mestre
aplicadas a essa pgina ou pgina-mestre.
Siga estas etapas para criar uma nova pgina-mestre que herda o contedo da pgina-mestre rodap:
1. No modo Plano, passe o mouse sobre a miniatura da pgina Rodap e clique no sinal de adio (+) no lado direito criar uma nova pgina-
mestre.
2. Uma nova pgina-mestre aparece direita de Rodap, denominada B-Master. Renomeie a pgina-mestre: pgina de destino.
3. Clique com o boto direito na miniatura da pgina-mestre Rodap e escolha Pginas-mestre > Rodap no menu de contexto. Observe isto
far com que a tag [Footer] seja exibida abaixo da miniatura, indicando que a pgina-mestre de destino est herdando o contedo da
pgina-mestre Rodap (ver Figura 34).
Figura 34. Defina a pgina-mestre de destino para herdar o contedo da pgina-mestre Rodap.
uma importante distino que a pgina-mestre de destino no contm realmente elementos da pgina-mestre Rodap no possvel
simplesmente duplicar a pgina-mestre Rodap (A-Master). Em vez disso, voc aplicou a pgina-mestre Rodap na pgina-mestre de destino, o
que significa que qualquer contedo que voc adicionar a pgina-mestre Rodap tambm aparecer automaticamente na pgina-mestre de
destino. Se precisar editar o contedo de rodap, clique duas vezes na miniatura da pgina-mestre rodap para abri-la diretamente.
Aps adicionar elementos de design nas pginas-mestres de destino e interior, voc aplicar as pginas-mestre s pginas no mapa do site.
Nesse projeto, a pgina inicial usa a pgina-mestre de destino, e todas as demais pginas do site tm a pgina-mestre Interior dentro.
Se voc pairar sobre as miniaturas das pginas-mestre Destino ou Interior, uma dica de ferramenta aparecer dizendo: Pgina-mestre aplicada:
Rodap.
Neste exemplo do site, a hierarquia da pgina-mestre apenas um nvel de profundidade. Entretanto, voc pode criar uma cadeia de pginas-
mestre, em que uma pgina-mestre que herda toda uma pgina-mestre pode ser aplicada a uma terceira pgina-mestre, para criar profundos
nveis de herana em vrios nveis. Compartimentalizar elementos de design semelhante a criar smbolos. uma prtica recomendada criar
pginas-mestre separadas para diferentes sees de um site.
4. Passe o mouse sobre a miniatura de pgina-mestre de destino e clique no sinal de adio (+) no lado direito para criar uma terceira
pgina-mestre. Renomeie-a Interior.
5. Clique e arraste a miniatura da pgina-mestre Rodap para a nova miniatura da pgina-mestre Interior. Observe que, medida que voc
arrasta e solta a pgina-mestre Rodap para a miniatura da pgina Interior, o texto azul abaixo da miniatura da pgina Interior atualizado
de [No Master] para [Footer].
Para o incio
Criao do cabealho da pgina-mestre Interior
A pgina-mestre Interior definir a aparncia da maioria das pginas do site.

1. Clique duas vezes na miniatura da pgina-mestre Interior para abri-la no modo de design.
2. Desenhe um retngulo de aproximadamente 90 pixels de altura que abranja toda a parte superior da janela do navegador. Arraste as alas
laterais at definir a largura de 100%. Alinhe a parte superior do retngulo com a parte superior da pgina.
3. Defina a cor de preenchimento do retngulo como marrom e defina a largura do traado em 0.
4. Volte ao modo Plano e clique duas vezes na miniatura da pgina-mestre Rodap para abri-la no modo de design. Selecione todo o widget
de menu e copie-o.
5. Retorne para a pgina-mestre Interior e cole o widget de menu. Use a ferramenta Seleo para arrastar at o lado direito do cabealho
marrom.
23
6. Clique no boto HOME duas vezes para selecionar o item de menu. Aplique as configuraes a seguir usando o painel de texto ou o menu
Texto no painel Controle:
Fonte da Web: Open Sans Condensed Bold

Tamanho da fonte: 20
Cor: Marrom-claro
Alinhamento: esquerda
Tracking: 0
Entrelinha: 24px
Espao aps: 24
Marca de nvel de pargrafo: Subttulo (h2)
Observe que todos os itens de menu so atualizados para usar o mesmo formato.
7. No painel "Estilos de pargrafo", crie um novo estilo de pargrafo e nomeie-o: subttulo.

8. No painel Estados, selecione o estado de Rolagem. Defina a cor do texto para Marrom na Sobreposio, Mouse para baixo e Estados
ativos (ver Figura 35).
Figura 35. Defina o restante dos estados de itens de menu para usar a cor do texto Marrom.
H apenas um item restante a adicionar ao cabealho da pgina-mestre interior.

Neste ponto, a navegao de alto nvel do site na pgina-mestre Interior est concluda.
1. Escolha Arquivo > Inserir (ou use Command+D no Mac ou Control+D no Windows) para abrir a caixa de dilogo Importar. Procure para
selecionar o arquivo na pasta arquivos de amostra denominada logo-interior.png e clique em OK.
2. Clique uma vez no lado esquerdo do cabealho para inserir a imagem do logotipo na pgina. Use a ferramenta Seleo para reposicionar o
grfico para que seja centralizado com o widget de menu, no centro vertical do retngulo marrom.
3. Clique em Exibir para exibir a pgina-mestre renderizada no Muse (ver Figura 36).
Figura 36. O cabealho concludo ser exibido na pgina-mestre Interior.
4. Clique em Design para continuar a editar as pginas-mestre.
Para o incio
Criar um cabealho para a pgina-mestre de destino
24
Em seguida, voc povoar a pgina-mestre de destino, que define o cabealho da pgina inicial. Esse cabealho muito semelhante,mas no
inclui um retngulo marrom.
Neste ponto, a navegao de alto nvel do site na pgina-mestre Interior tambm est concluda.
1. No modo Design, copie o widget menu para a pgina Interior.
2. Abra a pgina-mestre de destino no modo Design e escolha Editar > Colar no local.
3. Enquanto o menu ainda selecionado, pressione e segure a tecla Shift enquanto pressiona a seta para baixo quatro vezes, mova o menu
aproximadamente 40 pixels abaixo da parte superior da pgina.
4. Escolha Arquivo > Inserir e navegue para selecionar o arquivo na pasta de arquivos de amostra denominada logo-landing.png e clique em
OK.
5. Clique uma vez no lado esquerdo do cabealho para inserir a imagem do logo transparente na pgina. Use a ferramenta Seleo e as guias
inteligentes para posicionar o grfico para que fique centralizado com o widget de Menu.
Para o incio
Aplicar pginas-mestre a pginas no projeto
Se desejar, voc pode clicar com o boto direito em cada miniatura de pgina e escolher o nome da pgina-mestre que deseja aplicar a cada
pgina. Mas costuma ser mais rpido somente arrastar e soltar as pginas-mestre:
Clique e arraste a miniatura da pgina-mestre Interior para todas as pginas restantes do mapa do site. Observe que as miniaturas dos designs
so atualizadas medida que cada pgina-mestre aplicada.
1. Clique e arraste a miniatura de pgina-mestre de destino miniatura de pgina INICIAL para aplic-la. O texto azul abaixo das de
miniaturas da pgina INICIAL atualizado de [nenhuma pgina-mestre] para [de destino].
Para o incio
Preenchimento de um retngulo com uma imagem de fundo
1. No modo Plano, clique duas vezes na miniatura da pgina INICIAL para abri-la no modo de exibio Design.
Observe que no possvel selecionar elementos de cabealho e rodap na pgina. Eles esto nas pginas-mestre (de destino e rodap) e
podem ser editados somente nessas pginas.
2. Desenhe um retngulo que se estenda pela parte superior da pgina, configurado na largura de 100%.
3. Use o menu Preenchimento para clicar no cone de pasta prximo seo da imagem. Na caixa de dilogo Importar exibida, navegue para
selecionar o arquivo na pasta de arquivos de amostra denominada img-salad-darker.png, e clique em Abrir (ver Figura 37).
Figura 37. Definir a imagem de preenchimento do plano de fundo do retngulo.
4. Defina o menu de ajuste como Dimens. p/ preencher e clique na posio direita superior na seo Posio para alinhar a imagem no canto
superior direito da pgina.
25
5. Clique em qualquer outro lugar da pgina para fechar o menu Preenchimento.
6. Use a ferramenta Seleo para arrastar as alas e redimensionar o retngulo conforme necessrio. Use guias inteligentes para posicionar o
grfico para que seja centralizado e alinhe a borda superior da imagem parte superior da janela do navegador.
Para o incio
Formatao e estilo do contedo de texto
Em seguida, voc adicionar alguns quadros de texto e estabelecer estilos de pargrafo para controlar a aparncia do texto.
Fonte da Web: Open Sans Condensed Bold
Cor da fonte: Marrom
Alinhamento: Centralizado
Tracking: 1
Entrelinha: 48px
Marca de nvel de pargrafo: Ttulo (h1)
Fonte da Web: Gentium Book Basic Bold Italic
Cor da fonte: Marrom-claro
Alinhamento: esquerda
Tracking: 1
Entrelinha: 24px
Marca de nvel de pargrafo: Subttulo (h3)
1. Use a ferramenta Texto para desenhar um quadro de texto que seja centralizado abaixo do retngulo criado na rea de cabealho.
2. Digite as palavras: BEM-VINDO AO KATIE'S CAF. Use o painel de texto ou no menu Texto no painel Controle para definir os seguintes
atributos:
3. Crie um novo estilo de pargrafo e nomeie-o: ttulo

4. Crie um segundo quadro de texto abaixo do ttulo e digite: Uma pequena cadeia de cafs em So Francisco.
5. Defina os seguintes atributos:
6. Crie um novo estilo de pargrafo e nomeie-o: Subhead serif
Geralmente, o texto do subttulo ser alinhado esquerda. Mas para esta instncia especfica na pgina inicial, voc ir alinh-lo com o
centro.
7. Com o texto ainda selecionado, defina o alinhamento como centralizado.
Observe que o painel Estilos de Pargrafos indica agora um sinal de adio (+) prximo ao nome do estilo de pargrafo. Isso indica que o
texto selecionado tem um estilo de pargrafo aplicado, mas que pelo menos um atributo do estilo foi alterado.
8. Passe o mouse sobre o nome do estilo de pargrafo para que seja exibida uma dica de ferramenta com as configuraes de texto. Todos
os atributos que forem diferentes dos atributos do estilo original esto listados abaixo da linha. Nesse caso, o item abaixo da linha diz:
alinhar: centro (ver Figura 38).
26
Figura 38. Um sinal de adio indica que o texto formatao diferente e a dica de ferramenta especifica o que diferente entre o texto
selecionado e o estilo de pargrafo.
Para o incio
Criar um separador decorativo de pgina com elementos agrupados
Abaixo de dois quadros de texto, voc adicionar um separador decorativo de pgina.

No h necessidade de definir uma marca de nvel de pargrafo para esse quadro de texto decorativo.
1. Mostre as guias selecionando Exibir > Mostrar guias.

2. Use a ferramenta Retngulo para desenhar um retngulo com 445 pixels de pixels de largura por 20 pixels de altura. Posicione-o de modo
que se estenda pela metade esquerda da pgina (alinhado com o lado esquerdo da grade de 9 colunas) at o centro da pgina.
3. Defina a cor de preenchimento de pgina como nenhum. Defina a cor do traado para Marrom-claro. Nas Opes de traado, desvincule os
campos. Defina a largura do traado superior como 2 e todas as demais como 0, da mesma maneira que voc criou uma linha para o
design de rodap.
4. Pressione Option/Alt e use a ferramenta Seleo para arrastar horizontalmente uma cpia do retngulo, para que fique alinhado ao primeiro
retngulo e sua extremidade alinhe com o lado direito da grade da pgina.
5. Use a ferramenta Texto para criar um campo pequeno de texto entre os dois retngulos, no centro da pgina.
6. Fora do Muse, abra o Visualizador de caracteres para inserir um caractere especial. Procure o termo: Estrela branca de quatro pontas e
insira o item duas vezes, para criar duas estrelas.
7. No painel Texto, aplique as seguintes configuraes:
Fonte da Web: Gentium Book Basic

Cor: Marrom-claro
Alinhamento: Centro
Tracking: 3
Entrelinha: 24px
8. Selecione os dois retngulos e o quadro de texto e escolha Objeto > Grupo.
Para o incio
Criar um item reutilizvel de biblioteca
1. Abra o painel Biblioteca, selecionando Janela > Biblioteca.

2. Clique no cone de pasta no lado direito inferior do painel Biblioteca para criar uma nova pasta.
3. Clique no campo da nova pasta e nomeie-a: Designs de pgina.
27
4. Selecione o grupo que voc criou na seo anterior. Clique no boto Adicionar item selecionado (cone de virada de pgina) para adicionar
o conjunto de elementos para a pasta. Renomeie o item de biblioteca: Separador de pgina separador (ver Figura 39).
Figura 39. Criar e nomear um novo item na pasta do painel Biblioteca.
Observe que uma exibio do grupo mostrada na biblioteca para ajudar a identificar elementos.
Nas sees futuras deste artigo, voc clicar na pasta Designs de pgina no painel Biblioteca para expandi-la e arraste uma cpia do Separador
de pginas at as pginas.
Para o incio
Alinhar elementos de pgina usando as guias de grade da pgina
Em seguida, voc desenhar trs retngulos, usar as grades de coluna na pgina para alinh-las, e as preencher em imagens de fundo.
1. Use a ferramenta Retngulo para desenhar um retngulo de aproximadamente 304 x 304 pixels.
2. Use a ferramenta Seleo para alinhar o lado esquerdo do retngulo com o lado esquerdo da pgina.
3. Pressione e segure Option/Alt e arraste uma cpia do retngulo at o centro da pgina com um pequeno espao entre ele. Clique em
Option/Alt e arraste o retngulo central, e posicionar a segunda cpia para se alinhar ao lado direito da pgina.
4. Selecione o primeiro retngulo esquerdo novamente. Use o menu Preenchimento para definir a imagem de fundo para usar o arquivo
denominado img-coffee.jpg. Defina o menu apropriado em Dimensionar para preencher, depois clique no ponto central na seo Posio.
Clique fora para fechar o menu Preenchimento.
5. Repita a etapa 4 para definir o preenchimento do plano de fundo do retngulo central e os retngulos que usam as mesmas configuraes.
Exceto definir o preenchimento do retngulo central para usar img-baking.jpg e o retngulo direito para usar a imagem de img-dinner.jpg
(ver Figura img-baking.jpg).
28
Figura 40. Alinhar os trs retngulos preenchidos usando as guias da pgina.
Para o incio
Criao de estilos de diferentes linhas de texto dentro do mesmo quadro de texto
Abaixo de trs retngulos preenchidos, voc criar trs quadros de texto com estilo aplicado.
1. Desenhe um quadro de texto que abranja as mesmas trs primeiras colunas abaixo do retngulo alinhado esquerda da pgina. Digite o
seguinte texto, pressionando as teclas Return/ Enter para criar uma quebra entre a primeira linha do texto e o restante de ela:
Os melhores cafs e chs
Servimos apenas cafs torrados de qualidade premium de todo o mundo; oferecemos um caf fresquinho para cada cliente. Tambm
oferecemos uma seleo de chs soltos, desde os sabores exticos at os clssicos.
2. Use a ferramenta Seleo para selecionar apenas a primeira expresso. Clique com o boto direito no texto e selecione Alterar caixa
alta/baixa > MAISCULAS para destacar o cabealho do quadro de texto.
3. Abra o painel Estilos de pargrafo e aplique um estilo no subttulo.

4. Selecione o texto restante no quadro de texto. Use o painel de texto para aplicar essas configuraes:
Fonte: Gentium Book Basic

Cor: Marrom
Alinhamento: Esquerda
Tracking: 0
Entrelinha: 24px
Espao aps: 24
Marca de nvel de pargrafo: Padro (p)
5. Voc reutilizar este estilo frequentemente; crie um novo estilo de pargrafo denominado: corpo.
6. Crie um segundo quadro de texto que abranja as trs colunas centrais da grade da pgina, abaixo do retngulo central. Digite o seguinte:
Deliciosa panificao caseira
Servimos um menu completo de pes e bolos, baseados nas consagradas receitas originais da Katie. Esses itens so assados toda manh
para garantir que voc tenha sempre a melhor qualidade.
7. Altere a instncia do cabealho para maisculas. Aplique os estilos de pargrafo de subttulo e do corpo.
8. Crie um terceiro quadro de texto abaixo do retngulo direito. Crie um estilo para o texto como os outros dois quadros de texto aps a
digitao:
Refeies fresquinhas e saudveis
Com um amplo menu de caf da manh, almoo e jantar, ns fazemos mais do que um caf tradicional. Todas as nossas refeies so
feitas na hora e trazem apenas os ingredientes mais frescos.
9. Use a ferramenta Texto para criar um novo campo de texto abaixo dos outros trs campos de texto que se estendem pelas primeiras 4
colunas no lado esquerdo da pgina. Digite:
Apresentamos o nosso cupcake da estao
Por um tempo limitado, voc pode comprar nossos Cupcakes de Nozes com Bordo. Com base nos mesmos ingredientes que deixam
nossos cupcakes to gostosos, alm dos ricos e clssicos sabores de bordo e de nozes, voc no vai deixar essa estao passar em
branco.
Katie Ricks
10. Defina a ocorrncia de cabealho em maisculas e aplique o estilo de pargrafo: subttulo.

11. Selecione as duas sentenas centrais e aplique o estilo de pargrafo corpo.
12. Selecione o nome Katie Ricks. Use o painel de texto para aplicar as seguintes configuraes:
29
Fonte da Web: La Belle Aurore
Cor: Marrom
Alinhamento: direita
Tracking: 0
Entrelinha: 24px
Espao aps: 6
Este formato de fonte cria a iluso de uma assinatura.

13. Use a ferramenta Seleo para selecionar todo o quadro de texto. No menu Preenchimento, defina a cor de preenchimento branco e defina
o seletor Opacidade a 77.
Para o incio
Preenchimento do restante da pgina inicial
Siga estas etapas para adicionar contedo parte inferior da pgina inicial.
Em seguida, voc redefinir os elementos que criou anteriormente, copiando-os.
NOSSA HISTRIA
O Katie's Caf uma pequena cadeia familiar de cafs em So Francisco, Califrnia, EUA. O local original do Katie's, em Noe Valley, abriu suas
portas no vero de 2006 depois que a fundadora Katie Ricks decidiu espalhar seu amor pelas delcias de forno e por um caf de alta qualidade
pela vizinhana onde morava.
Em Noe, o Katie's expandiu o menu para incluir refeies completas alm dos produtos de forno em 2007. Logo posteriormente, na primavera de
2008, o Katie's abriu um novo local em Laurel Heights, bem ao norte da Universidade de San Francisco. Uma terceira filial foi aberta em Cole
Valley, no inverno de 2011.
Cada item fornecido no Katie's Caf criado a partir das prprias receitas de Katie, cuidadosamente aprimoradas ao longo de anos cozinhando
para amigos e familiares.
E finalmente, voc adicionar mais um conjunto de retngulo preenchido e quadros de texto na parte inferior.
PRMIOS
O Katie's Caf ganhou vrios prmios na competio anual Best of SF, do jornal San Francisco Times, com destaque para o Caf of the Year, em
2010.
O Katie's tambm apareceu recentemente em um episdio da srie No Fear: The Culinary Travels of Andrew Bourdin; Andrew considerou o bolo
Abomination Unto the Lord "um divisor de guas que me deixou sem jeito para qualquer outro bolo.
Em seguida, voc criar um retngulo preenchido.
1. Desenhe um retngulo que abranja a pgina abaixo dos trs quadros de texto, defina na largura de 100%.
2. Use o menu Preenchimento para o retngulo com uma imagem de fundo chamada img-cupcakes.jpg. Defina o menu de ajuste como
Dimens. p/ preencher e clique na posio esquerda superior na seo Posio para alinhar a imagem no canto superior esquerdo da
pgina.
3. Clique em qualquer outro lugar da pgina para fechar o menu Preenchimento.
4. Use a ferramenta Seleo para arrastar as alas e redimensionar o retngulo conforme necessrio. Ela deve ser centralizada, exibida como
100%, e alinhar a borda superior do retngulo em aproximadamente 1214 pixels desde a parte superior da pgina.
5. Clique com o boto direito no retngulo e escolha Organizar > Enviar para trs. O quadro de texto com a assinatura que voc criou
anteriormente deve ser exibido na parte superior e o plano semi-transparente permite que a imagem do cupcake seja mostrada.
1. Role para cima e selecione o quadro de texto do cabealho: BEM-VINDO AO KATIE'S CAF.
2. Pressione a Option/Alt e arraste para baixo abaixo do retngulo preenchido com os queques. Use a ferramenta texto para digitar sobre o
cabealho e substitua o texto por: SOBRE O KATIE'S CAF.
3. Abra o painel Biblioteca. Expanda a pasta Designs de pgina e arraste uma cpia do Separador de pginas para a pgina abaixo do
quadro de texto. Centralize ambos os elementos da pgina.
4. Desenhe um retngulo com aproximadamente 450 pixels de largura por 300 pixels de altura. Preencha o retngulo usando a imagem de
fundo denominada img-cookie.jpg. Defina o plano de fundo como Dimensionar para preencher e clique na posio central.
5. Alinhe o retngulo com o lado esquerdo da pgina.
30
6. Desenhe um quadro de texto direita do retngulo de cookie, aproximadamente 450 pixels de largura. Digite ou cole o seguinte texto:
1. Aplique o estilo de subttulo ao cabealho e o estilo de corpo ao restante do quadro de texto.
2. Alinhe a borda direita do quadro de texto com o lado direito das guias da pgina.
1. Role para baixo e desenhe um quadro de texto abaixo do retngulo do cookie, com aproximadamente 450 pixels de largura. Digite ou cole
o seguinte texto:
1. Aplique o estilo de subttulo ao cabealho e o estilo de corpo ao restante do quadro de texto.
2. Alinhe a borda esquerda do quadro de texto com o lado esquerdo das guias da pgina.
1. Desenhe um retngulo com aproximadamente 450 pixels de largura.
2. Defina a cor de preenchimento e o traado do retngulo como Nenhum. Ajuste o preenchimento de plano de fundo para usar a imagem
img-breakfast.jpg, com o ajuste definido como Dimensionar para preencher e a posio definida no canto superior esquerdo.
3. Alinhe o retngulo pelo lado direito das guias de pgina, abaixo do quadro de texto Nossa Histria.
4. Abra o painel Biblioteca e expanda a pasta FontAwesome. Arraste o item cones direcionais at a parte inferior direita da pgina, pouco
acima das guias de rodap e alinhado com o lado direito da pgina.
5. Clique no boto de seta azul para abrir o menu Opes. Selecione a opo Seta do crculo para cima no menu. Defina a cor do texto como
marrom (ver Figura 41).
Figura 41. Configure o cone da fonte Awesome e defina o estilo para corresponder ao design do site.
6. Quando a seta acima do cone ainda est selecionada, use o menu de hiperlinks para selecionar o link de ancoragem nomeada superior
(ver Figura 42).
Figura 42. Defina o link para que aponte para a ncora denominada superior criada na pgina-mestre.
7. Escolha Arquivo > Visualizar pgina no navegador. Role at a pgina para exibir o contedo da pgina. Clique no cone de seta para cima
31
e veja como a pgina leva de volta parte superior.
8. Clique em Design para continuar a editar a pgina inicial. Se desejar, escolha Exibir > Ocultar guias para ocultar as guias na pgina.
Na seo seguinte deste tutorial o Captulo 4, voc ver como aplicar efeitos de rolagem para controlar o movimento e criar um efeito interativo
na pgina inicial. Voc tambm ver como criar um widget de menu manual para criar subnavegao para a pgina de menu. Depois, voc
aplicar ncoras na pgina e vincular os itens de menu s ncoras, antes de adicionar um segundo menu oculto que aparea quando o
usurio rola a pgina.
32
Captulo 4
Aplicar efeitos de rolagem a retngulos preenchidos com imagens de fundo
Criar a pgina Menu
Configurar um widget Menu manual
Trabalhar com regies de marca de ancoragem e estados ativos
Adicionar links de ancoragem aos itens de menu
Adicionar as cinco sees pgina Menu
Inserir contedo de texto para preencher o contedo do menu para cada seo
Adicionar efeitos de rolagem aos cabealhos de seo na pgina Menu
Adicionar um menu fixo ao cabealho usando efeitos de rolagem
No captulo 3 de Criando seu primeiro site com o Muse, voc adicionou e editou a pgina mestre para adicionar a navegao do site usando um
widget Menu horizontal. Voc aprendeu a aplicar estilos aos itens de menu de aparncia e rtulos usando o painel Estados. Tambm aprendeu
como trabalhar com itens de Biblioteca e como criar elementos reutilizveis que voc pode arrastar e soltar nas pginas.
Para o incio
Aplicar efeitos de rolagem a retngulos preenchidos com imagens de fundo
H muitos tipos de efeitos de rolagem que podem ser aplicados no Muse, inclusive movimento, opacidade, apresentao de slides e Edge
Animate. Voc pode aplicar efeitos de rolagem usando o painel Efeitos de rolagem e tambm pode controlar o movimento usando a guia Rolagem
do menu Preenchimento.
1. Role para cima e selecione o retngulo grande alinhado parte superior da pgina.
2. Selecione Janela > Efeitos de rolagem. No painel Efeitos de rolagem, digite as seguintes configuraes (ver Figura 43).
Ative a caixa de seleo Movimento

Deixe os dois campos na seo Movimento inicial definidos como 0
Defina a posio chave (o campo central) como 0px
Ative a direo Para cima na seo Movimento final e defina-a como 0,5
Deixe a direo horizontal definida como 0
Figura 43. Aplique as configuraes de movimento do efeito de rolagem ao retngulo no cabealho da pgina.
Essas configuraes indicam que, depois que a pgina rolou alm da posio chave (0 pixels, a parte mais superior da pgina), o retngulo deve
rolar para cima a uma taxa de 0,5 vezes a taxa que o restante da pgina rola.
Ative a caixa de seleo Movimento
33
Defina a posio chave (o campo central) como 1114px
3. Escolha Arquivo > Visualizar pgina no navegador. Role a pgina para baixo e observe que o retngulo superior no cabealho movido
parcialmente to rapidamente quanto os outros elementos da pgina.
4. Retorne ao Muse e role para baixo para selecionar o retngulo grande preenchido com a imagem de cupcakes.
5. Abra o painel Efeitos de rolagem (Janela > Efeitos de rolagem) e digite o seguinte (ver Figura 44).
Figura 44. Aplique os efeitos de rolagem para controlar o movimento do retngulo medida que a pgina rola.
6. Escolha Arquivo > Visualizar pgina no navegador novamente. Role a pgina para baixo e observe que os dois retngulos com 100% de
largura so movidos parcialmente para cima to rapidamente quanto os outros elementos da pgina.
7. Retorne ao Muse. Clique no X para fechar a guia da pgina Incio no modo Design.
Para o incio
Criar a pgina Menu
A pgina do menu apresenta uma srie de itens disponveis para caf da manh, almoo, jantar e sobremesa, bem como bebidas. Para navegar
na pgina, os visitantes usam uma barra de menus com links de ancoragem que saltam para cada seo.
1. Abra a pgina Menu no modo Design. Mostre as guias para ajud-lo a definir o layout da pgina.
2. Use a ferramenta Texto para desenhar um quadro de texto centralizado abaixo da rea de cabealho.
3. Digite as palavras: INGREDIENTES LOCAIS FRESCOS E RECEITAS INOVADORAS
4. Aplique o estilo de pargrafo: ttulo.
5. Use a ferramenta Seleo para redimensionar o quadro de texto, de modo que abranja a pgina inteira. No site de exemplo, h quebra de
linha no texto aps o "e" comercial para uma segunda linha.
6. Arraste uma cpia do Separador de pgina do painel Biblioteca e centralize-a abaixo do texto.
Para o incio
Configurar um widget Menu manual
Ao projetar a pgina mestre Rodap, voc adicionou um widget Menu que vinculou a todas as pginas do site. Em seguida, voc adicionar um
widget Menu manual que vincula a diferentes sees da mesma pgina.
Tipo de menu: Manual
Direo: Horizontal
Editar junto: Ativado
Tamanho do item: Espaamento uniforme
Mostrar cone esquerda: Desativado
Mostrar rtulo: Ativado
Mostrar cone direita: Somente submenus
34
Posicionamento das partes: Horizontalmente, centralizado
1. Na Biblioteca de widgets, expanda a seo Menus e arraste um widget Menu horizontal para a pgina.
2. Use a ferramenta Seleo para redimensionar a largura do menu inteiro, de forma que ela expanda as cinco colunas centrais das guias de
grade.
3. Clique no boto de seta azul para abrir o painel Opes. Aplique as configuraes a seguir (ver Figura 45):
Figura 45. Defina Tipo de menu como Manual no painel Opes.
4. Clique para fechar o painel Opes e observe as atualizaes de menu para um nico item de menu com o rtulo: [Nome]
5. Clique duas vezes no item de menu, uma vez para selecionar widget Menu inteiro e novamente para selecionar o item de menu. Use a
ferramenta Texto para selecionar o rtulo de espao reservado e digite: CAF DA MANH.
6. Alterne para a ferramenta Seleo e passe o mouse sobre o item de menu. Clique no sinal de adio (+) que aparece direita do item de
menu CAF DA MANH para criar um novo item de menu. Use a ferramenta Texto para renomear o novo boto: ALMOO.
7. Repita a etapa 6 para adicionar um total de mais trs itens de menu e renomeie-os: JANTAR, SOBREMESA e BEBIDAS.
8. Enquanto um dos itens de menu estiver selecionado, abra o painel Estados. Selecione o estado Normal e defina a cor de preenchimento do
item de menu como nenhuma. Em seguida, clique em cada um dos estados restantes Em cima, Pressionamento do boto do mouse e
Ativo e ajuste a cor de preenchimento para nenhuma.
9. Selecione o estado Normal e defina a cor de traado como Marrom claro. Nas opes de Traado, desvincule os quatro campos e
configure todos como 0, com exceo de definir o traado do lado direito como 2. Isso cria separadores entre cada item de menu.
10. No painel Opes, desmarque a opo: Editar junto. Selecione o item de menu BEBIDA e o estado Normal e defina a cor do traado como
nenhuma. Repita essa etapa para o estado Ativo. Em seguida, reative a opo Editar junto.
11. Selecione o estado Normal novamente. Aplique o estilo de pargrafo do subttulo. Use o painel Texto para efetuar as seguintes alteraes
adicionais formatao de texto:
Fonte: Open Sans
Tamanho: 16
Alinhamento: Centralizado
Espao posterior: 0
O estilo de subttulo agora exibe um sinal de adio (+) ao lado dele, indicando que foi alterado. Se quiser, voc poder criar um novo
estilo de pargrafo, mas o ideal ser deixar apenas como est.
12. Os estados Em cima e Pressionamento do boto do mouse atualizam automaticamente. Repita a etapa 9 para aplicar a mesma formatao
ao estado Ativo.
13. Use a ferramenta Seleo para alinhar o menu de modo que seja centralizado verticalmente e aproximadamente 52 pixels abaixo do
separador de pgina.
No momento, o menu no tem links. Os widgets Menu manual devem ser configurados para usar os links desejados, porque eles no herdam os
links de pgina do modo Plano.
Para o incio
Trabalhar com regies de marca de ancoragem e estados ativos
35
A pgina Menu conter um total de cinco sees diferentes com itens de comida e bebida, separados por retngulos grandes de 100% de
largura. Como resultado, todo o contedo da pgina no pode ser exibido sem rolar para baixo. Este um aspecto importante do trabalho com
marcas de ancoragem e efeitos de rolagem. Os dois recursos do site parecero no funcionar se a pgina no for longa o suficiente para que o
visitante role-a para baixo.
Imagine que quando voc adiciona marcas de ancoragem como se estivesse colocando um marcador em qualquer lugar de uma pgina.
Quando os visitantes clicam em um link para essa ncora, o link rola para baixo para onde o marcador est localizado.
Voc comear a criar cinco ncoras chamadas: caf da manh, almoo, jantar, sobremesa e bebidas que correspondem a cada uma das cinco
regies da pgina. Siga estas etapas:
1. Clique no boto ncora no painel Controle para carregar a ferramenta ncora (ver Figura 46).
Figura 46. Carregue o Place Gun da primeira ncora clicando no boto ncora.
2. Clique uma vez perto da parte superior esquerda da pgina, logo abaixo do separador de pgina, para colocar a ncora.
3. Na caixa de dilogo Renomear uma ncora exibida, insira o nome da ncora: caf da manh. Use a ferramenta Seleo para mov-la para
aproximadamente 303 pixels da parte superior da pgina (ver Figura 47).
Figura 47. Nomeie a ncora do menu caf da manh prximo parte superior da pgina.
4. Repita essas etapas. Dessa vez, clique no boto ncora quatro vezes e, em seguida, clique na pgina para inserir as ncoras nomeadas
nas seguintes posies na pgina:
almoo: 1255px
jantar: 1731px
sobremesa: 2798px
bebidas: 3200px
Se desejar, voc pode usar o painel Transformar para selecionar cada ncora e definir seu valor Y.
Observao: A quantidade de espao entre a primeira ncora e a primeira instncia do contedo vinculado (o widget Menu manual) define a
rea ativa que faz com que o estado ativo seja alterado em cada regio. Por exemplo, se a primeira ncora for posicionada 100 pixels acima do
menu, o estado ativo dos itens de menu para cada 100 pixels de atualizao da regio antes do menu exibido conforme o visitante rola a
pgina.
Em seguida, voc vincular os itens de menu s marcas de ancoragem para criar a navegao, de forma que os visitantes possam pular na
pgina para ler cada menu.
36
Para o incio
Adicionar links de ancoragem aos itens de menu
1. Clique no item de menu CAF DA MANH duas vezes para selecion-lo. O Indicador de seleo exibe as palavras: Item de menu.
2. Use o menu Hiperlinks para selecionar a marca de ncora de caf da manh na pgina Menu (ver Figura 48).
Figura 48. Definir o link do boto CAF DA MANH para a marca de ncora de caf da manh.
3. Repita a etapa 2 para adicionar as ncoras aos quatro itens de menu restantes.
4. Escolha Arquivo > Visualizar pgina no navegador para testar o menu e veja como ele pula para baixo para cada seo da pgina. Role de
volta para cima para clicar em cada um dos botes.
um pouco cansativo ficar rolando manualmente a pgina para cima, ento, posteriormente, voc adicionar os botes Voltar ao topo e um
menu oculto com efeitos de rolagem que permitiro que um segundo widget Menu permanea na rea de cabealho.
5. Retorne ao Muse para continuar editando a pgina Menu.
Para o incio
Adicionar as cinco sees pgina Menu
Essa pgina usa um design semelhante pgina Incio, com retngulos definidos como 100% da largura que tm efeitos de rolagem e quadros
de texto estilizados.
Os ttulos de seo agora esto completos. Se desejado, clique em Visualizar para testar como voc pode clicar nos botes de seta de voltar ao
topo para pular para cima na pgina depois de visitar cada seo.
1. Arraste um retngulo que expande a largura da janela do navegador inteira, aproximadamente 52 pixels abaixo do widget Menu.
2. Define a cor de preenchimento e do traado como nenhuma. Defina a imagem do fundo do retngulo para usar o arquivo denominado img-
breakfast.jpg. Defina a imagem como Dimensionar para preencher e defina sua posio no ponto do centro esquerda.
3. Redimensione o retngulo arrastando suas alas at que as bordas fiquem alinhadas nos dois lados, indicando que ser exibido na largura
de 100%. Defina a altura do retngulo como 267 pixels.
4. Crie um quadro de texto e digite: CAF DA MANH.
5. No painel Biblioteca, expanda a pasta do cone FontAwesome e arraste um cone Direcional para a pgina. Use o painel Opes para
selecionar o cone Crculo com seta para cima. Defina a cor do texto como Marrom claro.
6. Recorte o cone Crculo com seta para cima e use a ferramenta Texto para clicar imediatamente na frente do B no quadro de texto: CAF
DA MANH. Cole o cone Crculo com seta para cima dentro do quadro de texto CAF DA MANH.
7. Defina o link para o cone Crculo com seta para cima como o link de ancoragem superior na pgina Menu.
8. Selecione o texto CAF DA MANH e aplique o estilo de ttulo. Em seguida, edite os atributos de fonte definindo a cor da fonte como Off-
37
white e o alinhamento como Esquerda.
9. Posicione o quadro de texto CAF DA MANH a 600 pixels da parte superior (Y) e a 4 pixels do lado esquerdo da pgina (X). Voc pode
usar o painel de transformao ou as dicas de ferramentas para ajud-lo a posicion-lo.
10. Selecione o quadro de texto CAF DA MANH, pressione e segure a tecla Shift e selecione o retngulo preenchido com a imagem do caf
da manh. Solte a tecla Shift e pressione e segure a tecla Option/Alt para arrastar uma cpia duplicada dos dois elementos para baixo na
pgina, mantendo o novo conjunto alinhado ao centro. Essa cpia se tornar a seo almoo.
11. Posicione Almoo definido como 1205 pixels a partir da parte superior da pgina. Use a ferramenta Texto para selecionar a palavra CAF
DA MANH e digite ALMOO. No menu Preenchimento, ajuste a imagem do fundo para usar o arquivo img-lunch.jpg. Mantenha a
configurao Dimensionar para preencher e defina a posio como centro direita.
12. Repita as etapas 10 e 11 para duplicar a seo Almoo. Posicione Jantar definido como 1977 pixels a partir da parte superior da pgina.
Renomeie o quadro de texto JANTAR. Defina a imagem de fundo para usar img-dinner.jpg. Use as mesmas configuraes de Ajuste e
Posio.
13. Repita as etapas 10 e 11 para criar a seo Sobremesa. Defina o preenchimento do retngulo da sobremesa para usar a imagem do fundo
img-dessert.jpg, com sua posio definida como centro esquerda. Atualize o quadro de texto para informar SOBREMESA e posicione a
borda superior do retngulo de sobremesa em um valor Y de 2748.
14. Duplique o grupo de sobremesa para criar a seo de bebidas. Digite em cima do quadro de texto para renome-lo para BEBIDAS. Defina
a imagem do fundo do retngulo como img-drinks.jpg, usando a posio superior esquerdo. Ajuste a borda superior do retngulo de bebidas
como um valor Y de 3446.
Para o incio
Inserir contedo de texto para preencher o contedo do menu para cada seo
Em seguida, voc adicionar dois quadros de texto nos espaos entre as sees para exibir as selees correspondentes de alimentos para cada
categoria.
Espiga US$ 9
Caf da manh: burrito com ovos, feijo preto, guacamole, cebola, coentro, salsa de tomate de chipotle e
uma opo de batata, frango ou carne
O Dazzler US$ 7
Batatas picadas e fritas com ovos mexidos e bacon fornecido localmente

O Nessie US$ 8
Duas panquecas de leite desnatado saudveis com uma opo de flocos de chocolate ou blueberries
1. Escolha Arquivo > Local e procure para selecionar o arquivo de texto denominado breakfast1.txt na subpasta de menu da pasta Itens.
Clique em Abrir para fechar a caixa de dilogo Importar.
2. Clique uma vez na pgina abaixo do cabealho Caf da manh para inserir o arquivo de texto com o seguinte contedo:
3. Selecione cada um dos nomes de itens (com preos) e aplique o estilo de pargrafo serif ao subttulo. Em seguida, selecione as descries
de item abaixo de cada um e aplique o estilo de pargrafo corpo.
4. Alinhe o lado esquerdo do quadro de texto ao lado esquerdo da pgina. Redimensione o quadro de texto para centralizar verticalmente os
cabealhos Caf da manh e Almoo. Expanda a largura do quadro de texto para expandir as quatro primeiras colunas.
5. Repita as etapas 1 a 4 para inserir o arquivo de texto denominado breakfast2.txt. Aplique estilo ao texto e posicione o quadro de texto para
alinhar ao lado direito da pgina, expandindo as ltimas quatro colunas.
6. Continue este processo para preencher cada uma das sees de menu, inserindo o contedo de lunch1.txt e lunch2.txt e definindo o estilo
dos dois quadros de texto. Em seguida, repita estas etapas para adicionar dois quadros de texto com as opes de comidas para as
sees de jantar, sobremesa e bebidas.
7. Salve o site e visualize a pgina. Parece completo, mas voc adicionar os toques finais aplicando alguns efeitos de rolagem na prxima
seo.
Para o incio
Adicionar efeitos de rolagem aos cabealhos de seo na pgina Menu
Esta parte muito semelhante aos efeitos de rolagem que voc adicionou na pgina Incio. Lembre-se que, ao adicionar as imagens do fundo
para retngulos de 100% de largura, voc atribuiu uma variao de alinhamento selecionando o posicionamento diferente no menu
Preenchimento. Observe que cada retngulo tem apenas 267 pixels de altura, mas as imagens de origem do fundo tm mais de 1300 pixels de
altura e so definidas como Dimensionar para preencher. Essas configuraes afetaro como os efeitos de rolagem so exibidos quando
visualizados em um navegador.
38
1. Selecione o retngulo na seo Caf da manh. Abra o painel Efeitos de rolagem (Janela > Efeitos de rolagem), selecione a caixa se
seleo Movimento e digite os seguintes atributos para controlar o movimento do contedo de preenchimento (ver Figura 49).
Na seo Movimento inicial, defina a direo Para cima para rolar a uma taxa de 0,5x
Deixe a direo horizontal definida como 0x.
Defina a posio-chave como 440px (Voc tambm pode arrastar a ala T na pgina para definir isso)
Na seo Movimento final, defina a direo Para cima para rolar a uma taxa de 0,5x
Deixe a direo horizontal definida como 0x.
Figura 49. Ative a caixa de seleo Movimento e aplique as configuraes de efeito de rolagem.
2. Selecione o retngulo Almoo. No painel Efeitos de rolagem, defina a posio-chave para 1205px. Defina as direes Para cima para as
sees Movimento inicial e Movimento final como 0,5x. Deixe as direes horizontais definidas como 0x.
3. Repita a etapa 2 para aplicar efeitos de rolagem ao retngulo Jantar. Use as mesmas configuraes, mas defina sua posio-chave como
1977px.
4. Continue repetindo esta operao mais duas vezes. Defina o retngulo Sobremesa para usar uma posio-chave de 2748px. Defina o
retngulo Bebidas para usar uma posio-chave de 3446.
5. Escolha Arquivo > Visualizar pgina no navegador para ver o efeito de rolagem na ao. Clique no item de menu Sobremesa e veja os
cabealhos do retngulo se moverem conforme a pgina pula para a seo Sobremesa. Clique no cone de Seta para cima para pular de
volta at a parte superior da pgina.
Quando terminar o teste, feche o navegador e retorne ao Adobe Muse.
Para o incio
Adicionar um menu fixo ao cabealho usando efeitos de rolagem
A pgina Menu est quase completa, mas ainda um pouco mais difcil para navegar. Talvez fosse mais fcil se houvesse um widget Menu que
aparecesse acima de cada seo na pgina, para que voc pudesse pular facilmente para cada seo sem voltar primeiro para a parte superior
da pgina. Esta uma tcnica que voc pode usar para fazer o widget Menu aparecer para rolar para cima e, em seguida, ficar "preso" na parte
superior da pgina.
Posio de atenuao 1: 5px a 0%
Posio chave: 252px a 0%
1. Selecione o widget Menu na parte superior da pgina.
2. Pressione e segure a tecla Option/Alt enquanto arrasta uma cpia duplicada dela para cima, em direo ao cabealho. Conforme voc
arrasta, verifique se mantm a duplicata alinhada verticalmente ao original e ao centro da pgina, usando as guias inteligentes que
aparecem.
3. Posicione o cabealho duplicado logo abaixo do retngulo de cabealho marrom, com uma posio Y de 92 pixels.
4. Abra o painel Efeitos de rolagem. Clique na guia Opacidade (segunda esquerda) para ver as configuraes de opacidade dos efeitos de
rolagem.
5. Ative a caixa de seleo Opacidade e aplique as configuraes a seguir (ver Figura 50).
39
Figura 50. Ajuste as configuraes para controlar a transparncia do widget Menu.
Observao: Tambm possvel definir os valores de Posio de atenuao 1, Posio chave e Posio de atenuao 2 arrastando as partes
correspondentes da Ala T que aparece acima do menu depois que voc ativa os efeitos de rolagem.
As configuraes acima significam que o menu permanecer completamente transparente (0% opaco) at que o visitante role a pgina para baixo
at 252 pixels da parte superior. Quando isso ocorre, tambm ocorre que o primeiro widget Menu (visvel) movido exatamente para o mesmo
local.
Para suavizar a transio quando o menu duplicado mostrado e o menu original rolado para cima e para longe, voc adicionar um retngulo
slido que tem a mesma cor de preenchimento que o fundo da pgina. Dessa forma, o retngulo (que desenhado acima do menu duplicado)
tambm pode usar os efeitos de rolagem para que impea o momento quando o menu exibido com mais negrito (conforme os menus so
exibidos uns sobre os outros).
6. Desenhe um retngulo diretamente abaixo do cabealho marrom. Use o painel Transformar para aplicar os seguintes valores (ver Figura
51):
Altura: 45 pixels
Largura: 1160 pixels
X: -100 pixels
Y: 87 pixels
Defina para exibir na largura de 100%
Figura 51. Defina o retngulo que cobre o menu duplicado para exibir a largura de 100%.
1. Na guia Opacidade do painel Efeitos de rolagem, digite os seguintes valores:

Posio chave: 252px a 0%
As configuraes acima garantem que o retngulo acima do menu duplicado oculte-o at a direita, quando o menu original rola acima dele,
criando uma transio contnua.
2. Escolha Arquivo > Visualizar pgina no navegador para rolar a pgina para baixo. Role lentamente e veja o primeiro menu rolar para cima,
e o menu duplicado (transparente) aparecer direita conforme o documento original rola para fora da exibio. Os efeitos de rolagem
tambm controlam o movimento do menu duplicado, fazendo com que ele permanea no lugar conforme voc continua rolando para baixo
na pgina.
No prximo captulo de Criando seu primeiro site com o Adobe Muse, voc ver como redimensionar e cortar os arquivos de imagens inseridos e
40
alinh-los nas colunas da grade. Voc tambm adicionar um widget Apresentao de slides de tela inteira e o configurar para exibir a galeria
de imagens. Em seguida, voc aprender como incorporar o contedo de sites de terceiros incorporando o HTML na pgina Blog.
41
Captulo 5
Formatar texto na parte superior da pgina Galeria
Inserindo vrias imagens redimensionadas usando o Place Gun
Cortar imagens inseridas
Aplicar links a quadros de texto e definir o estilo de link padro
Adicionar e configurar um widget Apresentao em tela inteira
Formatar texto na parte superior da pgina Blog
Usar HTML incorporado para exibir um blog em um site do Muse
No captulo 4 de Criando seu primeiro site com o Muse, voc adicionou efeitos de rolagem para criar efeitos interativos de movimento na pgina
Incio. Voc tambm criou a pgina Menu e um menu manual que vinculou a ncoras diferentes na pgina. No Captulo 5, voc ver como editar
imagens inseridas redimensionando-as e cortando-as dentro do espao de trabalho do Muse. Voc tambm explorar o trabalho com HTML
incorporado para adicionar um blog do Tumblr pgina Blog.
Para o incio
Formatar texto na parte superior da pgina Galeria
A pgina Galeria inclui uma srie de imagens que so alinhadas usando as guias da pgina.
1. Abra a pgina Galeria no modo Design.
2. Se as guias no estiverem aparecendo, escolha Exibir > Mostrar guias.
3. Crie um quadro de texto e digite: GALERIA. Aplique o estilo de pargrafo do cabealho.
4. Crie um segundo quadro de texto que esteja alinhado ao lado esquerdo da pgina. Digite:
Desde que o Katies Caf foi inaugurado em 2006, dedicamo-nos a fornecer ingredientes locais frescos e
produtos finais de qualidade a nossos clientes. A Fundadora, Katie Ricks,
e aplique o estilo de pargrafo do corpo.
5. Crie um terceiro quadro de texto que ser alinhado do lado direito da pgina. Digite:
apaixonada pelo servio de refeies e pelo atendimento ao cliente. Essa paixo o que inspira cada
item de menu e estamos orgulhosos dos itens clssicos, bem como dos novos itens que servimos.
Novamente, aplique o estilo de pargrafo de corpo.
6. Use a ferramenta Seleo para selecionar os pargrafos esquerdo e direito e escolha Objeto > Grupo.
7. Arraste uma cpia do Separador de pgina do painel Biblioteca.
8. Use a ferramenta Seleo para centralizar os trs elementos (texto de cabealho, grupo de duas colunas de texto e grfico do separador de
pgina) para alinh-los verticalmente na pgina.
Figura 52. Posicione os quadros de texto e o separador de pgina para ajustar abaixo do contedo de cabealho.
42
Para o incio
Inserindo vrias imagens redimensionadas usando o Place Gun
1. Escolha Arquivo > Inserir e navegue para selecionar os arquivos na pasta Itens denominados gallery-1.jpg, gallery-2.jpg, gallery-3.jpg e
gallery-9.jpg. Clique em Abrir para selecion-los e feche a caixa de dilogo Importar.
Observe que o Place Gun exibe o nmero 4, indicando que foram carregadas 4 imagens.
2. Clique e arraste o cursor no lado esquerdo da pgina. Uma dica de ferramenta exibe temporariamente uma porcentagem para que voc
saiba a escala da primeira imagem que voc est inserindo. Solte o boto do mouse quando a imagem estiver dimensionada em
aproximadamente 16%, para que as dimenses da imagem sejam de 330 pixels de largura por 220 pixels de altura.
3. Repita a etapa 2 para inserir outras trs imagens na mesma escala.
No se preocupe com o alinhamento ainda. Primeiro, voc editar as imagens no Muse.
Para o incio
Cortar imagens inseridas
Em seguida, voc cortar cada um dos quatro arquivos de imagem, para que sejam todos os pixels quadrados (220 x 220).
1. Use a ferramenta Corte demarcado para selecionar a imagem gallery-1.jpg.
2. Clique uma vez no centro para criar um cone de crculo preto. A borda em torno da imagem fica azul e o cursor de mo aberta exibido.
Arraste a imagem dentro do quadro de imagem esquerda, at que o lado esquerdo da borda seja cortado e exiba a rea semiopaca.
3. Clique na imagem novamente com a ferramenta Corte demarcado. O cone de crculo central desaparece e a borda em torno do quadro de
imagem fica cor de laranja. Arraste a ala central direita em direo ao meio para redimensionar a largura da imagem para 220 pixels (ver
Figura 53). Voc pode observar no painel Transformar para verificar as dimenses.
Figura 53. Cortar os lados da imagem inserida usando a ferramenta Corte demarcado.
4. Repita as etapas 1-2 para cortar as imagens gallery-2.jpg, gallery-3.jpg e gallery-9.jpg, para que sejam todos os 200 pixels de largura.
5. Use a ferramenta Seleo para alinhar quatro imagens ao longo da largura da pgina (ver Figura 54).
43
Figura 54. Alinhe os quatro quadros de imagem cortados nas colunas criadas pelos guias de pgina.
O restante da pgina Galeria consiste em imagens e quadros de texto redimensionados.

1. Insira a imagem chamada gallery-4.jpg e clique e arraste para coloc-la em 38%. Use a ferramenta Corte demarcado para recortar a borda
esquerda e reduza a largura do quadro de imagem, at que suas dimenses sejam 464 x 512 pixels. Use a ferramenta Seleo para alinhar
a borda esquerda do lado esquerdo da pgina.
2. Coloque a imagem denominada gallery-5.jpg direita da imagem maior que voc acabou de cortar. Clique na imagem e arraste-a
aproximadamente 24%. Use a mesma tcnica que antes, deslizando a imagem sobre a parte interna do quadro de imagem para centraliz-
lo. Dessa vez, arraste a ala inferior para cima e a ala do lado direito em direo ao centro para cort-la a 264 x 246 pixels. Alinhe a borda
direita do lado direito das guias de pgina, e alinhe a borda inferior com a parte inferior da imagem gallery-4.jpg.
3. Insira gallery-6.jpg e clique nele e arraste-o para 50%. Esta imagem expandir a pgina inteira. Centralize a imagem no quadro e corte-a
para ficar com 953 x 516 pixels. Alinhe-a verticalmente na pgina.
4. Insira gallery-7.jpg e clique nele e arraste-o para 23% no lado esquerdo da pgina. Corte a imagem para ficar com 464 x 342 pixels e
alinhe-a com o lado esquerdo da pgina.
5. Insira gallery-8.jpg e clique nele e arraste-o para 23% no lado direito da pgina. Corte a imagem para ficar com 464 x 310 pixels e alinhe-a
com o lado direito da pgina. Use a ferramenta Seleo e as guias inteligentes para garantir que as imagens fiquem todas alinhadas com as
guias de pgina e entre si (ver Figura 55).
44
Figura 55. Organize as imagens cortadas da galeria em um padro de mosaico na pgina.
H um ponto vazio acima da imagem dos cupcakes (gallery-5.jpg). Voc o encher com um quadro de texto.
Para o incio
Aplicar links a quadros de texto e definir o estilo de link padro
Voc adicionar um boto que permite ao visitante visualizar a apresentao de tela cheia.
1. Desenhe um quadro de texto acima da imagem dos cupcakes. Redimensione-o para 464 x 242 pixels e alinhe-o com o lado direito da
pgina. Defina a cor de preenchimento do quadro de texto como Marrom claro.
2. Digite: EXIBIR TELA INTEIRA DA GALERIA
3. Aplique o estilo de pargrafo do ttulo. Em seguida, defina a cor como Off-white e o alinhamento a Esquerda. O texto quebrar para duas
linhas.
4. Quando o quadro de texto est selecionado, use o menu Hiperlinks para aplicar um link pgina Galeria - tela cheia (ver Figura 56).
45
Figura 56. Configure o quadro de texto como um link para a pgina que exibe a apresentao da galeria.
5. Clique no texto dos Hiperlinks esquerda do menu Hiperlinks para ver as opes disponveis. Na caixa de dilogo exibida, observe que o
texto est definido para usar o estilo do link padro.
6. Clique no boto Editar estilos de link para abrir a guia Layout da caixa de dilogo Propriedades do site.
7. Use esta interface para especificar como links de texto sero exibidos no site. Para este projeto do site, os estados dos links so definidos
para herdar todos os estilos Negrito ou Itlico aplicados ao texto, mas nunca sero sublinhados em nenhum dos estados. As cores de texto
so definidas para cada estado:
Normal: Marrom claro
Em foco: Marrom
Visitado: Marrom claro
Ativo: Marrom
Observao: Use o menu Resoluo para escolher entre a sada para Padro e HiDPI (2x) - para definir a qualidade das imagens publicadas ou
exportadas do site. A configurao HiDPI exige que voc insira as imagens duas vezes nas dimenses, mas exibida de forma ideal nas
exibies de retina e em outras telas de alta resoluo.
8. Clique em OK para fechar a caixa de dilogo Propriedades do site.

9. Salve o site e feche a pgina Galeria no modo de exibio Design.
Para o incio
Adicionar e configurar um widget Apresentao em tela inteira
A pgina Galeria - tela inteira contm um widget Apresentao em tela inteira que carregar quando o visitante clicar no link da pgina principal
Galeria.
Observe que o widget expande imediatamente para preencher 100% da largura da pgina.
Nova principal: Preencher quadro proporcionalmente
Nova miniatura: Preencher quadro proporcionalmente
Transio: Atenuar
Velocidade de transio: 0,5 segundo
Reproduo automtica ativada, defina para comear a reproduzir em 3 segundos
Continuar aps: Desativado
Executar uma vez: Desativado
Ordem aleatria: Desativado
Permitir deslizar: Ativado
46
Layout
Negatoscpio: Desativado
Miniaturas de forma livre: Desativadas
Tela inteira: Desativada
Partes
Primeiro: Desativado
Prximo: Ativado
Anterior: Ativado
ltima: Desativada
Legendas: Ativada
Contador: Desativado
Boto Fechar: Desativado
Miniaturas: Desativadas
Editando
Mostrar partes do negatoscpio ao editar: Ativado
Editar junto: Ativado
1. Abra a pgina Galeria - tela inteira no modo de exibio Design.

2. Escolha Exibir > Ocultar guias se desejar.
3. Abra a Biblioteca de widgets e expanda a seo Apresentaes de slides. Arraste uma Apresentao de slides de tela inteira para a pgina.
4. Enquanto a apresentao de slides est selecionada, posicione a borda superior ao longo da borda inferior do cabealho, de forma que
nenhuma cor de preenchimento de plano de fundo do navegador mostre completamente. Nesse design, a apresentao de slides no exibe
um boto de fechamento os visitantes clicam em um dos links no menu superior para saltar para a nova pgina e sair da apresentao
de slides.
5. Clique no boto de seta azul para abrir o painel Opes e aplicar as seguintes configuraes (ver Figura 58):
Figura 58. Atualize as configuraes para definir a apresentao de slides no painel Opes.
47
6. Clique na pasta Adicionar imagens. Na caixa de dilogo Importar exibida, selecione os seguintes arquivos: gallery-1.jpg, gallery-2.jpg,
gallery-3.jpg, gallery-4.jpg, gallery-5.jpg, gallery-6.jpg, gallery-7.jpg e gallery-8.jpg. Clique em Abrir para importar os oito arquivos de
imagem e feche a caixa de dilogo Importar.
7. Clique em qualquer outro lugar da pgina para fechar o painel Opes.
8. Clique em Visualizao para ver a janela em andamento. As 8 imagens adicionadas so exibidas quando voc clica nos botes Prximo ou
Anterior. Alm disso, se voc esperar 3 segundos, o recurso de reproduo automtica comea a reproduzir a apresentao de slides e
continua o loop. Observe que a imagem da apresentao de slides padro foi removido automaticamente.
9. Clique em Design para continuar editando o widget Apresentao de slides de tela inteira.
10. Selecione o boto de seta Anterior e posicione-o no lado esquerdo central da pgina. Arraste o boto de seta Prximo para o lado direito
central da pgina, alinhado horizontalmente com o boto Anterior. E, em seguida, arraste a janela Legenda para baixo at a parte inferior,
de forma que fique centralizada e aproximadamente 40 pixels de borda inferior.
Observao: Se voc estiver tendo dificuldades para ver a pgina inteira, defina o Nvel de zoom como 75%, para que voc possa exibir a
apresentao de slides inteira no modo Design.
1. Defina a cor de preenchimento dos botes Prximo e Anterior como Marrom claro.
2. Use a ferramenta Texto para selecionar as setas dentro dos botes Prximo e Anterior. Aplique o estilo de subttulo e defina o alinhamento
para centralizar, direita para 100%, Espao posterior como 0 e cor como Branco.
3. Deixe a cor de preenchimento da Legenda como Branco, mas diminua a opacidade para 77. Selecione a legenda de texto do espao
reservado e aplique o estilo do subttulo. Em seguida, defina o Espao posterior como 0.
4. A primeira legenda exibe o texto de espao reservado enquanto a xcara de caf exibida. Clique na legenda novamente para selecionar o
texto dentro dela. Substitua o texto da legenda de espao reservado com:
Latt com caf expresso fresco coberto com creme de chocolate especial
5. Clique no boto Prximo para exibir o prximo slide com a limonada e a bacia de limes. Substitua o texto da legenda por:
A Senhora Rosa com limonada espremida fresca e suco de oxicoco

6. Atualize as legendas restantes usando as descries correspondentes:
Canudinhos de chocolate recobertos com canela disponveis para todas as bebidas quentes
Barras crocantes de marshmallow e barras folheadas de milho feitas fresquinhas todas as manhs
Cupcakes de noz de bordo da estao
Torta merengue de limo com suco de limo fresco e sabor de limo
O Katie's Caf usa os mais frescos ingredientes orgnicos que so comprados diariamente
Queijo grelhado com po de centeio acompanha nosso gazpacho caseiro
7. Escolha Arquivo > Visualizar site no navegador para ver a apresentao de slides concluda. Assista reproduo automtica ou use os
botes de navegao para ir para a imagem posterior ou anterior, ao mesmo tempo que so exibidas legendas descritivas em cada slide
(ver Figura 59).
48
Figura 59. O widget Apresentao de slides de tela inteira exibido nas bordas da janela do navegador.
18. Clique no item de menu Galeria para visitar a pgina Galeria. Lembre-se de sempre oferecer aos visitantes uma maneira de sair do widget
Apresentao de slides de tela inteira quando eles quiserem retornar ao restante do site. Role no link: EXIBIR TELA INTEIRA DA GALERIA
e veja como a cor muda em Em foco e Pressionamento do boto do mouse, com base nas configuraes de estilo do link padro.
19. Retorne ao Adobe Muse e feche a pgina Tela inteira da galeria no modo Design.
Para o incio
Formatar texto na parte superior da pgina Blog
A pgina Blog exibe um cabealho descritivo acima de uma pgina Blog do Tumblr incorporada.
1. Abra a pgina Blog no modo Design.
2. Se as guias no estiverem aparecendo, escolha guias Exibir > Mostrar.
3. Crie um quadro de texto e digite: BLOG DE KATIE. Aplique o estilo de pargrafo do cabealho.
5. Use a ferramenta Seleo para centralizar os dois elementos verticalmente na pgina (ver Figura 60).
Figura 60. Centralize o ttulo da pgina e o separador de pgina na pgina abaixo do cabealho.
Para o incio
Usar HTML incorporado para exibir um blog em um site do Muse
O HTML incorporado refere-se ao cdigo-fonte gerado por um site de terceiros, como Google Maps, YouTube, SoundCloud, Flickr ou Picasa.
Voc pode configurar contas com esses sites, fazer logon e copiar o cdigo incorporado de seu site e adicion-lo ao seu site.
Quando voc cola HTML incorporado em uma pgina, como colocar uma janela em uma pgina no seu site que exibe o contedo de um site de
terceiros.
O HTML incorporado uma tima maneira de adicionar informaes complexas (como mapas, previses de tempo, cotaes de mercado), bem
como rich media (como vdeos digitais, apresentaes de slides e arquivos de udio), de forma rpida e fcil.
49
Para adicionar um blog pgina Blog, copie o cdigo-fonte gerado por Tumblr.com. O servio online gratuito permite fazer logon e postar
entradas do blog que esto publicamente disponveis. Os blogs so fceis de usar e teis quando voc deseja facilitar para algum que no est
tecnicamente inclinado a atualizar seu prprio site. A maioria dos sites de blog inclui uma interface online, portanto, voc pode usar qualquer
navegador para fazer logon na sua conta e publicar novas entradas, sem nenhum conhecimento de HTML ou software adicional.
Observao: Os visitantes no tm uma conta do Tumblr para ver os blogs incorporados em uma pgina. necessrio ter uma conta para gerar
o cdigo ao projetar o site, e necessrio fazer logon para adicionar posts de blog.
1. No necessrio criar uma conta do Tumblr para continuar. Copie o cdigo abaixo (gerado pelo site do Tumblr depois de criar um blog
gratuito):
<iframe src="http://katiessf.tumblr.com/" width="916" height="3500" marginwidth="0" marginheight="0" frameborder="no" scrolling="no"

style="border:0px;"></iframe>
2. No modo Plano, clique duas vezes na miniatura da pgina Blog para abri-la no modo Design.
3. Clique no meio da pgina Blog vazia e selecione Objeto > Inserir HTML. Clique no campo da janela Editar HTML exibida e cole o
contedo. Clique em OK para fechar a janela Editar HTML.
Aps a incorporao do cdigo HTML, voc visualizar uma caixa delimitadora azul com alas em torno das postagens do blog que foram
inseridas para a conta de Tumblr Katie's Cafe.
4. Use a ferramenta Seleo para arrastar as alas para centralizar o contedo do blog na pgina. Uma guia de alinhamento azul escuro
exibida quando o objeto selecionado est centralizado verticalmente (ver Figura 61).
Figura 61. Posicione o blog do Tumblr para centraliz-lo na pgina Blog.
Isso tudo o que necessrio para incorporar HTML nas pginas do Muse. Para nunca ter que editar o cdigo HTML, clique com o boto 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 acessar o cdigo que colou anteriormente (ver Figura 62).
50
Figura 62. Para acessar e editar o cdigo-fonte incorporado, abra a janela Editar HTML.
6. Escolha Arquivo > Visualizar pgina no navegador para ver a exibio da pgina Blog em uma nova janela do navegador.
Observe que, medida que voc percorre a lista de entradas de blog, o cabealho marrom exibido sobre o contedo da pgina do blog. Este
comportamento ocorre porque o cabealho est na pgina mestre Interior, e o contedo nas pginas-mestre exibido na frente por padro.
Agora que voc explorou como adicionar um HTML incorporado para exibir um blog Tumblr, continue no captulo 6 para aprender como adicionar
um Google Map interativo pgina Contato. Depois de adicionar um widget Formulrio de contato pgina Contato, voc ver como adicionar
um favicon e publicar o site de avaliao.
51
Captulo 6
Usar HTML incorporado para exibir um mapa do Google
Adicionar e configurar um widget de formulrio de contato simples
Definir as configuraes para todo o widget Formulrio de contato simples
Definir as configuraes para elementos de formulrio individuais
Estilizar a aparncia dos campos de formulrio Contato
Estilizar a aparncia do boto Enviar
Testar formulrio e recuperar as mensagens enviadas
Definir o estilo dos endereos listados na pgina Contato
Usar o Corretor ortogrfico incorporado e atualizar o dicionrio
Adicionar um cone de favorito no painel Propriedades do site
Criar uma avaliao gratuita para publicar o site
No captulo 5 de Criando seu primeiro site com o Muse, voc aprendeu como possvel vincular as marcas de ancoragem para alternar entre as
sees de uma pgina longa. Voc tambm criou e estilizou um widget de Apresentao de tela inteira. Nesta prxima parte, voc ver como
adicionar um Google Maps interativo usando HTML incorporado. Em seguida, voc trabalhar com um widget Formulrio de contato para criar a
pgina Contato. E, finalmente, voc aplicar os toques de acabamento adicionando um favicon e, em seguida, publicar o site de teste concludo.
Para o incio
Usar HTML incorporado para exibir um mapa do Google
O Google Maps um servio gratuito. Basta voc fornecer o endereo (ou endereos) e clicar no boto Criar mapa depois que fizer logon em
sua conta. Digite um ttulo e uma descrio e clique no boto Incorporar. Copie o cdigo HTML fornecido no campo marcado: Colar HTML a ser
incorporado no site.
1. No modo Plano, clique duas vezes na miniatura da pgina Contato para abri-la no modo Design.
2. Copie o cdigo-fonte abaixo, que foi gerado pelo site do Google Maps:
<iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?

ie=UTF8&hl=en&msa=0&msid=218302982680021663941.00049fcd9cf93276f540e&ll=37.7737,-
122.43782&spn=0.067844,0.098877&z=12&output=embed">
</iframe>
Voc pode criar um mapa personalizado para um ou mais endereos. Neste exemplo, o mapa exibe ponteiros para cada um dos trs locais do
Katies Caf em So Francisco.
3. Cole o cdigo prximo da parte superior da pgina Contato. Use a ferramenta Seleo para posicionar o HTML incorporado e centraliz-lo
na pgina, de forma que a parte superior do mapa seja exibida abaixo da rea de cabealho (ver Figura 63).
Figura 63. Colar o cdigo incorporado do Google Maps e posicion-lo na pgina abaixo do cabealho.
52
4. Use a ferramenta Texto para arrastar um quadro de texto abaixo do mapa incorporado e digite Contato.
5. Aplique o estilo de ttulo ao quadro de texto.
6. Crie outro quadro de texto abaixo do ttulo da pgina. Copie o seguinte texto e cole-o em um quadro de texto:
Embora todas as padarias incorporem os atributos exclusivos de seus vizinhos, elas so associadas pela ateno impecvel de Katie aos
detalhes, o compromisso com o atendimento e, acima de tudo, o oferecimento de boa comida.
7. Aplique o estilo do corpo e alinhe o quadro de texto no lado esquerdo da pgina.
8. Pressione Option/Alt para arrastar uma cpia do quadro de texto e alinha-lo do lado direito da pgina. Selecione o texto e substitua-o pelo
contedo: ateno aos detalhes, compromisso com o atendimento e, acima de tudo, o oferecimento de boa comida.
9. Use a ferramenta Seleo para selecionar os pargrafos esquerdo e direito e escolha Objeto > Grupo.
11. Use a ferramenta Seleo para centralizar os trs elementos (texto de cabealho, grupo de duas colunas de texto e grfico do separador de
pgina) para alinh-los verticalmente na pgina.
12. Escolha Arquivo > Visualizar pgina no navegador para ver como a pgina Contato em andamento exibida em um navegador (consulte a
Figura 64).
Figura 64. A pgina Contato concluda inclui um mapa do Google totalmente funcional.
O mapa do Google com HTML incorporado interativo. Clique nas setas para deslocar o mapa e clique nos botes de sinal de adio (+) e de
subtrao (-) para aumentar e diminuir o zoom.
13. Feche o navegador e volte para o Muse para continuar a editar a pgina.
As apresentaes de slides tambm podem ser adicionadas diretamente s pginas, mas neste exemplo, voc aninhar um widget de
Apresentao de slides em miniatura dentro da rea de contedo de um widget de Painel com guias. Siga estas etapas:
1. Durante a edio da pgina sobre no modo de exibio Design, clique na guia Galeria para visualizar o continer da rea de contedo com
o contedo de espao reservado exibido sob ele.
2. Selecione o contedo de espao reservado (o quadro de imagem e o quadro de texto dentro da rea de contedo) e exclua-o.
3. Abra a Biblioteca de widgets e expanda a seo Apresentaes de slides. Selecione o widget Apresentao de slides em miniatura na lista
e arraste uma cpia dele para a pgina (ver Figura 59).
Para o incio
Adicionar e configurar um widget de formulrio de contato simples
Em seguida, voc adicionar um formulrio de contato pgina Contato para tornar fcil para os visitantes o envio de mensagens usando o site.
53
1. Continue editando a pgina Contato no modo Design.
2. Na Biblioteca de widgets, expanda a seo Formulrios. Selecione o widget Formulrio de contato simples e arraste-o para o lado direito da
pgina Contato, abaixo do separador de pginas (ver Figura 65).
Figura 65. Arrastar o formulrio Contato simples para a pgina.
3. Use a ferramenta Seleo para posicionar o formulrio no lado direito da pgina.
Para o incio
Definir as configuraes para todo o widget Formulrio de contato simples
Atualize as configuraes do widget Formulrio de contato para controlar como ele funciona.
Normal
Enviando
Envio com xito
Enviar o erro
1. Quando o formulrio inteiro selecionado, o Indicador de seleo exibe a palavra: Formulrio e indica que o formulrio est exibindo
atualmente seu estado Normal.
2. O link Normal um menu com quatro estados possveis, assim como itens de menu ou botes (ver Figura 66):
Figura 66. O menu Estados exibe os estados para o formulrio inteiro.
54
Quando voc quiser ajustar o formulrio medida que ele aparecer em vrios estados, selecione o nome de estado correspondente neste menu
ou no painel Estados.
Por exemplo, se selecionar o estado Enviar o erro, voc ver a atualizao do formulrio para exibir a mensagem de erro. Quando o estado
Enviar o erro est selecionado, voc pode ajustar a aparncia da mensagem de erro. Por exemplo, voc poderia alterar o contedo do texto ou
alternar a cor do texto de erro de vermelho para azul.
3. Com todo o Formulrio ainda selecionado no estado Normal, clique na seta azul para acessar o menu Opes. No campo Email para,
digite o endereo de email. Mantenha todas as outras opes padro (ver Figura 67).
Figura 67. O menu Opes exibe as configuraes para todo o formulrio de contato.
Separe um tempo para se familiarizar com as opes disponveis
Observao: Se voc quiser que os envios de formulrio sejam encaminhados a vrios endereos de email, insira os endereos de email
(separados por ponto e vrgulas) no campo Email para.
No menu Aps o envio, voc pode escolher entre duas opes:

Permanecer na pgina atual (o comportamento padro)
Escolher uma pgina diferente (ou um arquivo vinculado) para exibir aps o envio de formulrio
O site de exemplo usa apenas os trs campos de formulrio padro, mas note que voc pode adicionar outros campos ativando-os no painel
Opes.
A lista de outros campos padro inclui:
Nmero de telefone celular
Nmero de telefone residencial
Endereo residencial
BC CAPTCHA
Empresa
Nmero de telefone do endereo comercial
Endereo
Site
Para adicionar um desses campos, simplesmente marque a caixa de seleo.
Tambm possvel adicionar campos personalizados com as opes Texto com uma nica linha e Texto com vrias linhas.
Clique no boto de adio (+) ao lado do campo personalizado que voc deseja adicionar e insira o rtulo no modo de exibio Design para
descrever o novo elemento de campo de formulrio que est sendo adicionado ao formulrio.
Para o incio
Definir as configuraes para elementos de formulrio individuais
Quando voc selecionar elementos de formulrio, o Indicador de seleo exibir o nome do elemento, como Rtulo, Entrada de texto ou Enviar.
Verifique o Indicador de seleo com frequncia para ver qual elemento aninhado no formulrio est selecionado atualmente.
55
1. Clique em todo o formulrio uma vez para selecion-lo e depois clique no campo Nome novamente. Primeiro, o Indicador de seleo exibe
Formulrio e, em seguida, Campo de formulrio.
2. Quando um elemento de formulrio Campo de formulrio, Rtulo ou Entrada de texto selecionado e voc clica no boto de seta azul para
acessar o menu Opes, as opes fornecidas oferecem configuraes especificamente relacionadas a esse elemento. Para este site,
verifique se as opes Entrada obrigatrio e Mostrar texto do prompt quando estiver vazio esto ativadas e desative as opes Rtulo e
Texto da mensagem (ver Figura 68).
Figura 68. O menu Opes exibe um conjunto contextual de opes para o elemento de formulrio selecionado.
Observao: Entrada obrigatria significa que uma mensagem de erro ser exibida e o formulrio no ser enviado se o visitante tentar enviar o
formulrio sem inserir contedo no campo.
3. Repita a etapa 2 para configurar o campo de formulrio Email da mesma maneira que o campo Nome.
4. Atualize o campo de formulrio Mensagem. Neste momento, a nica opo que deve ser ativada Mostrar texto do prompt quando estiver
vazio.
Aps fazer essas alteraes, os rtulos de texto acima de cada campo no so mais exibidos.
Para o incio
Estilizar a aparncia dos campos de formulrio Contato
Com um elemento de formulrio e um estado especfico selecionados, voc pode usar o painel Preenchimento ou o painel Controle para ajustar
sua aparncia.
Os estados dos campos de formulrio so:
Vazio
No vazio
Em cima
Foco
Erro
1. Selecione o campo de formulrio Nome e clique no menu Estados prximo ao Indicador de seleo (ver Figura 69).
56
Figura 69. Acesse a lista de estados disponveis para cada elemento de formulrio.
2. Clique no campo novamente para selecionar a Entrada de texto (isso se refere ao tipo de campo). Com o estado Vazio selecionado, defina
a cor de preenchimento do campo como nenhum, a cor de traado como Marrom e a espessura do traado como 1.
3. Clique novamente dentro do campo Nome para selecionar o texto. Use a ferramenta Texto para substituir o texto padro Inserir nome por:
NOME.
4. Aplique o estilo de pargrafo serif do subttulo e redefina a fonte para Gentium Book Basic e defina o valor de livro de Gentium bsico e
definir o valor de Recuo esquerda como 7.
5. Repita as etapas 2-4 para estilizar o estado Vazio para os campos de formulrio Email e Mensagem.
6. Selecione o campo Nome novamente. Dessa vez, escolha o estado No vazio. Defina a cor de preenchimento do campo como branco e
observe que os outros estados atualizam automaticamente.
7. Repita a etapa 6 para estilizar o campo No vazio para campos de formulrio Email e Mensagem.
8. Atualize o texto do campo Email para EMAIL e atualizar o texto da mensagem para: COMO PODEMOS AJUD-LO?
Para o incio
Estilizar a aparncia do boto Enviar
Em seguida, voc ver as opes de preenchimento e de formatao de texto para o boto Enviar.
Normal
Em cima
Pressionamento do boto do mouse
Enviando
Neste exemplo, todos os estados do boto Enviar exibem texto branco, mas observe que voc poder escolher um estado diferente enquanto o
boto Enviar selecionado para aplicar um estilo diferente.
O widget Formulrio de contato agora est concludo.
1. Selecione o boto Enviar e escolha o estado Normal no menu Estados. Os estados de um boto Enviar so exibidos quando esse boto
est selecionado. Os estados de um boto Enviar so:
2. Quando o estado Normal selecionado, defina a cor de preenchimento do boto como Marrom-claro.
3. Selecione o estado Em cima e defina a cor de preenchimento como Marrom. Observe que todos os outros estados atualizam
automaticamente.
4. Escolha o estado Normal novamente para o boto Enviar. Use a ferramenta Texto para selecionar o texto e atualize-o para: ENVIAR A
MENSAGEM. possvel redimensionar a largura do boto conforme necessrio.
5. Aplique o estilo de subttulo e defina o alinhamento para centralizar, defina Espao posterior como 0 e defina a cor como Branco. Observe
que todos os outros estados so atualizados para usar a mesma formatao para o texto.
Para o incio
Testar formulrio e recuperar as mensagens enviadas
57
Depois de configurar e estilizar o formulrio, salve o site. Posteriormente, quando voc publicar o site, poder testar o formulrio em um
navegador para verificar se est funcionando corretamente.
1. Acesse a pgina com o formulrio de contato e interaja com ele no site dinmico. Tente enviar o formulrio sem digitar contedo nos
campos obrigatrios. Teste como o formulrio funciona e preste muita ateno no modo como ele exibe mensagens de erro.
2. Depois de determinar que o formulrio funciona e exibido conforme esperado, tente envi-lo com uma mensagem de teste. Verifique sua
conta de email e se voc recebeu a mensagem na sua caixa de entrada.
Para o incio
Definir o estilo dos endereos listados na pgina Contato
Siga estas etapas para adicionar os trs endereos do Katies Caf esquerda do formulrio de contato.
1. Use a ferramenta Texto para desenhar um quadro de texto no lado direito da pgina. Copie e cole (ou digite) o seguinte:
KATIE'S CAFE NOE VALLEY

123 ELIZABETH STREET
Segunda - Sexta 06:00 - 22:00

Sbado - Domingo 07:00 - 22:00
2. Selecione as duas linhas superiores e aplique o estilo de subttulo. Em seguida, ajuste o tamanho para 16 e Espao posterior para 0.
3. Selecione o texto restante (dias e horas) e aplique o estilo do corpo.
4. Pressione Option/Alt e arraste uma cpia do pargrafo para baixo. Substitua o contedo de texto por este:
KATIE'S CAFE COLE VALLEY

301 CARMEL STREET

5. Duplique o segundo quadro de texto para criar um terceiro endereo. Substitua o contedo de texto com o seguinte:
KATIE'S CAFE LAUREL HIEGHTS

800 SPRUCE STREET

6. Use a ferramenta Seleo para alinhar os trs quadros de texto do lado esquerdo da pgina, e posicione-os de modo que haja um espao
igual (aproximadamente 30 pixels) entre cada um.
Para o incio
Usar o Corretor ortogrfico incorporado e atualizar o dicionrio
O Adobe Muse tem um Corretor ortogrfico que facilita a localizao e a resoluo de erros ortogrficos em quadros de texto. O Corretor
ortogrfico sempre est ativado. Ele exibe um sublinhado em vermelho em todas as palavras no encontradas no dicionrio. Por exemplo, a
palavra com erro ortogrfico HIEGHTS enfatizada no terceiro quadro de texto (ver Figura 70).
58
Figura 70. As palavras com possveis erros de ortografia so sublinhadas em vermelho.
1. Para corrigir o erro ortogrfico, use a ferramenta Texto para selecionar a palavra (clique duas vezes para selecion-la) e depois clique com
o boto direito do mouse para ver uma lista de palavras sugeridas exibidas.
2. Se uma das palavras sugeridas estiver correta, pressione a Seta para baixo ou clique na palavra sugerida que voc deseja usar e pressione
Return/Enter para aplic-la. Se voc cometer um erro e selecionar a palavra incorreta, apenas desfaa a alterao (Editar > Desfazer) e
escolha uma palavra sugerida diferente ou edite a palavra usando a ferramenta Texto. Nesse caso, escolha a ortografia correta: HEIGHTS.
Se a palavra sinalizada como um erro tipogrfico for usada apenas uma vez (como um nome de uma pessoa ou local) e voc souber que ela foi
digitada corretamente, no ser necessrio corrigi-la. O sublinhado em vermelho observado no modo Design no exibido quando voc
visualiza, publica ou exporta um site.
Ao trabalhar com palavras usadas com frequncia, como nomes ou endereos comerciais, voc pode adicionar as palavras ao dicionrio do
Corretor ortogrfico para que no sejam marcadas como erros ortogrficos.
Use a ferramenta Texto para clicar com o boto direito do mouse em uma palavra a ser adicionada ao dicionrio e escolha a opo Adicionar ao
dicionrio no menu contextual exibido.
possvel definir o idioma desejado (o que, por sua vez, define o idioma do dicionrio do Corretor ortogrfico) para todo o site e para quadros de
texto individuais.
Para definir o dicionrio do Corretor ortogrfico para todo o site, selecione Arquivo > Propriedades do site. Clique na guia Contedo, escolha o
idioma desejado no menu Idioma e clique em OK (ver Figura 71).
59
Figura 71. Definir o idioma para todo o site na caixa de dilogo Propriedades do site.
s vezes, os projetos de site requerem o fornecimento de texto em vrios idiomas. Nesses casos, voc pode definir o idioma padro (usado mais
frequentemente) nas Propriedades do site e defina o idioma do Corretor ortogrfico para quadros de texto especficos que exibem o texto em um
idioma diferente.
Para definir o dicionrio do Corretor ortogrfico de um quadro de texto, selecione um quadro de texto com a ferramenta Seleo. Clique com o
boto direito do mouse e escolha Idioma > (escolha o idioma desejado) no menu contextual exibido (ver Figura 72).
Figura 72. Definir o idioma de um quadro de texto selecionado no menu contextual.
60
O design do site est concludo agora para todas as pginas. Nas sees restantes deste tutorial, voc ver como dar os toques finais e publicar
o site como a verso de avaliao gratuita.
Para o incio
Adicionar um cone de favorito no painel Propriedades do site
Um favicon uma pequena imagem quadrada que voc cria, adiciona a um site e carrega para personalizar marcadores e URLs. O favicon
geralmente exibido na barra de endereo do navegador. Em muitos navegadores, ele tambm exibido ao lado do nome de uma pgina
quando ela est marcada como favorita ou em uma guia que contm uma pgina de site carregada. Use qualquer programa de edio de
imagem, como Photoshop ou Ilustrador, para criar um arquivo de imagem quadrado (de propores uniformes) para usar como um arquivo
favicon.
Siga estas etapas para adicionar um favicon ao site:

1. Escolha Arquivo > Propriedades do site. O painel Propriedades do site exibido.
2. Na guia Layout, clique no cone de pasta direita da seo Favicon. Use a caixa de dilogo Escolher imagem de favicon exibida para
navegar para a pasta de arquivos de exemplo e selecione o arquivo chamado favicon.png (ver Figura 73).
Figura 73. Defina o arquivo favicon.png nas Propriedades do site.
3. Clique em Abrir para selecionar o arquivo e feche a caixa de dilogo Escolher imagem de favicon. Em seguida, clique em OK para fechar a
caixa de dilogo Propriedades do site.
4. Escolha Arquivo > Visualizar site no navegador. Observe a parte superior da janela do navegador para ver o favicon exibido na barra de
endereos. Se o site estiver carregado em uma guia, voc tambm poder exibi-lo nela. Teste a marcao de pginas para saber como o
cone pode ser exibido ao lado do nome da pgina na lista de indicadores.
Agora que o site foi concludo, a prxima etapa envolve carregar o site nos servidores de host do Adobe.
Para o incio
Criar uma avaliao gratuita para publicar o site
Quando voc terminar de criar o site, a prxima etapa ser public-lo. Quando voc iniciou o Muse pela primeira vez, digitou uma ID da Adobe
para fazer login. Use o mesmo nome de usurio e senha para publicar todos os sites do Muse.
1. Clique no link Publicar na parte superior do painel Controle. O painel Publicar exibido e permite inserir um nome de site e escolher a URL
temporria (ver Figura 74).
61
Figura 74. Digite o nome do site e a URL que voc deseja usar no site de avaliao.
2. Clique em OK para iniciar o processo de publicao.

O carregamento dos arquivos no servidor remoto pode demorar alguns minutos. Quando o carregamento do site terminar, a pgina inicial do site
ser exibida em uma nova janela do navegador.
3. Clique nos links na navegao de site de nvel superior para visitar as pginas e interagir com os widgets. Revise todas as pginas e
verifique se os elementos so exibidos conforme esperado. Anote os problemas que devem ser corrigidos.
4. Quando terminar, feche o navegador e retorne ao Muse.
O painel Publicar foi atualizado para exibir um boto OK e um link Gerenciar, no qual voc poder clicar quando estiver pronto para publicar o
site ao vivo (que envolve iniciar o plano de pagamento de hospedagem, configurar um nome de domnio personalizado para acessar o site e
adicionar usurios).
O site publicado usar uma URL semelhante mostrada abaixo. Voc usar esse endereo para acessar as pginas em um navegador e
compartilhar o site ao vivo com os outros:
http://my-new-website.businesscatalyst.com
Aps a publicao do site de avaliao, copie a URL na barra de endereo e envie o link a seus clientes para que eles possam examinar a
verso ao vivo do site. Os clientes podem verificar o design, testar os recursos interativos em um navegador e aprovar o exemplo de uso de
pginas.
Depois que seus clientes ou colegas examinarem o site de avaliao, eles podero solicitar alteraes.
Para atualizar um site de avaliao existente, voc poder abrir o arquivo .muse e continuar editando as pginas. Quando as atualizaes forem
concludas, clique em Publicar novamente.
Dessa vez, se voc quiser substituir o site de avaliao existente pelas novas alteraes, escolha: Carregar: Apenas arquivos modificados.
Se escolher atualizar o novo contedo, visite sempre o site ativo atualizado e verifique duas vezes se as alteraes feitas funcionam e so
exibidas conforme esperado.
Para saber mais sobre publicao do site de avaliao, consulte Sites de publicao.
Aonde ir agora?
Ajuda do Adobe Muse
Aprendizagem e suporte do Adobe Muse
Introduo ao Adobe Muse
62

Manual Do Adobe Muse CC 2016

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Manual Do Adobe Muse CC 2016

Diunggah oleh

Hak Cipta:

Format Tersedia

ADOBE MUSE

Criando seu primeiro site

Instalar o software e configurar o projeto de amostra

1. Baixe e instale a verso mais recente do Adobe Muse CC.

Figura 3. A opo Rodaps adesivos est ativada por padro.

Criar um mapa do site

Aps a realizao dessas alteraes, o mapa do site estar completo.

Editar a pgina A-mestre

Figura 8. A pgina A-mestre est pronta para edio no Modo de design.

4. Clique em qualquer lugar fora do menu Preenchimento do navegador para fech-lo.

Definir a paleta de cores e renomear amostras no painel Amostras

3. Clique em OK para fechar a caixa de dilogo Opes de amostras.

Trabalhar com elementos com largura de 100%

Trabalhar com botes de estado e botes do Photoshop inseridos

Definir as opes de traado de um retngulo para criar linhas

Figura 18. Alinhe horizontalmente os dois retngulos e o Boto de estado.

As publicaes do Twitter e do Facebook no so cobertas pelos termos do Creative Commons.

Avisos legais | Poltica de privacidade on-line

Trabalhar com widgets de menu

1. Abra a Biblioteca de widgets selecionando Janela > Biblioteca de widgets.

Configurar e personalizar widgets

Figura 20. Abrir o painel Opes para definir as configuraes de widget.

As configuraes do menu Opes permitem a voc configurar o comportamento do menu.

Editar estados do boto

Em seguida, voc ver como editar os estados de um boto.

Editar rtulos de um widget de Menu

Criar e aplicar estilos de pargrafo

Adicionar cones da marca Font Awesome a uma pgina

6. Clique na seta para expandir a pasta de cones FontAwesome.

Adicionar links a arquivos para download

Figura 27. Navegue para selecionar a verso PDF do menu.

Adicionar links a sites externos

Criar links de email

Usar guias para definir as regies de cabealho e rodap de uma pgina

Figura 29. Verifique se as guias Cabealho e Rodap esto em exibio.

Neste projeto de exemplo, o preenchimento do navegador no exibido abaixo do contedo da pgina.

Definir elementos de pgina como itens de rodap

Adicionar uma ncora parte superior da pgina

As publicaes do Twitter e do Facebook no so cobertas pelos termos do Creative Commons.

Avisos legais | Poltica de privacidade on-line

Trabalhar com pginas-mestres hierrquicas

Criao do cabealho da pgina-mestre Interior

A pgina-mestre Interior definir a aparncia da maioria das pginas do site.

Fonte da Web: Open Sans Condensed Bold

7. No painel "Estilos de pargrafo", crie um novo estilo de pargrafo e nomeie-o: subttulo.

H apenas um item restante a adicionar ao cabealho da pgina-mestre interior.

Figura 36. O cabealho concludo ser exibido na pgina-mestre Interior.

4. Clique em Design para continuar a editar as pginas-mestre.

Criar um cabealho para a pgina-mestre de destino

Aplicar pginas-mestre a pginas no projeto

Preenchimento de um retngulo com uma imagem de fundo

Figura 37. Definir a imagem de preenchimento do plano de fundo do retngulo.

Formatao e estilo do contedo de texto

3. Crie um novo estilo de pargrafo e nomeie-o: ttulo

7. Com o texto ainda selecionado, defina o alinhamento como centralizado.

Criar um separador decorativo de pgina com elementos agrupados

Abaixo de dois quadros de texto, voc adicionar um separador decorativo de pgina.

1. Mostre as guias selecionando Exibir > Mostrar guias.

Fonte da Web: Gentium Book Basic

Criar um item reutilizvel de biblioteca

1. Abra o painel Biblioteca, selecionando Janela > Biblioteca.

Figura 39. Criar e nomear um novo item na pasta do painel Biblioteca.

Alinhar elementos de pgina usando as guias de grade da pgina