Adobe Muse CC — crie e lance sites sem precisar saber codificar. Aprenda web design.

1. Visão geral de vídeo e curso: E se eu dissesse que você pode projetar e lançar sites sem ter que saber qualquer código mas realmente projetar e redimensionar imagens e mover lança ao redor para criar nossos próprios sites originais novamente sem ter que saber qualquer código? Neste curso, você aprenderá a usar o Adobe Muse. Adobe Muse é um programa poderoso que pode ser usado para criar sites responsivos que ficam bem em diferentes tipos de telas de computador e dispositivos móveis. Você aprenderá considerações de imagem de formatação de texto eficazes, como adicionar layouts dinâmicos e elementos de navegação e muito, muito mais. Se você seguir junto com o meu exemplo usando os arquivos de suporte incluídos neste curso, este é o site será projetar e construir, independentemente de você usar os arquivos de suporte ou construir um site usando suas próprias fotos e texto. Este curso irá ajudá-lo a aprender como adicionar menus para dispositivos móveis. Adicione imagens consistentes de espaçamento e formato de layout para a Web, um texto simples usando design responsivo e muito, muito mais. Eu sou Chad Newman e eu tenho desenhado incluindo sites desde os anos 90, quando eu estava no ensino médio no início da faculdade. Trabalhei como diretor de desenvolvimento de Internet em uma empresa de design de publicidade como Web master, em um jornal regional e em um sistema de biblioteca e como editor gerenciador de revistas de design gráfico também criaram sites codificados para clientes, incluindo fotógrafos, organizações sem fins lucrativos e empresas. De um surf na loja de skate para um campo de golfe, Adobe Muse é um programa incrível, e estou ansioso para a oportunidade de guiá-lo e teve efetivamente usar este programa no papel. Avise-me se tiver alguma pergunta de novo. O curso vem de arquivos de suporte e instruções de alta qualidade para que você possa começar a projetar e lançar sites usando o Adobe Muse, um programa incrível e financeiro. 2. 1.1- introdução ao curso: Ei aí. Bem-vindo ao curso de Dhobi Muse. Neste curso, você aprenderá a projetar e lançar sites sem ter que conhecer nenhum código. Adobe Muse é um programa poderoso que pode ser usado para criar sites responsivos que ficam bem em diferentes tipos de telas de computador e dispositivos móveis. Você aprenderá considerações de imagem de formatação de texto eficazes, como adicionar layouts dinâmicos e elementos de navegação e muito, muito mais. Se você seguir junto com o meu exemplo usando os arquivos de suporte incluídos neste curso, este é o site será projetar e construir, independentemente de você usar os arquivos de suporte ou construir um site usando suas próprias fotos e texto. Este curso irá ajudá-lo a aprender como adicionar menus para dispositivos móveis. Adicione espaçamento consistente e imagens de formato de layout para a Web. Um texto justo usando design responsivo e muito, muito mais. Sou o Chad Newman e tenho desenhado websites desde os anos 90, quando andava no liceu, depois no início da faculdade. Trabalhei como diretor de desenvolvimento da Internet em uma empresa de design publicitário como Web master, em um jornal regional e em um sistema de biblioteca e como editor-gerente de revistas de design gráfico . Também criei sites codificados para clientes, incluindo fotógrafos, organizações sem fins lucrativos e empresas. De um surf na loja de skate para um campo de golfe, Adobe Muse é um programa incrível, e estou ansioso para a oportunidade de guiá-lo e tinha efetivamente usado este programa . Obrigado novamente por se inscrever. Vamos começar. 3. Atualização de instalação do Adobe Muse: A Adobe anunciou recentemente que está interrompendo o suporte e a atualização do Muse Creative Cloud. Acho que muitas pessoas estão usando sites de terceiros. Talvez o WordPress e outros sites como esse, talvez o squarespace, e eles apenas descobrem que não tantas pessoas estão usando este programa, mesmo que muitas pessoas vão continuar a usá-lo porque eles gostam dele. Eles gostam que você pode apenas clicar e arrastar elementos diferentes para o espaço de trabalho e adicionar links facilmente Então ele está disponível, mas eles simplesmente não estão indo toe atualizá-lo. Então é bom saber isso. Mas se você vai para a sua Adobe Creative Cloud e você não vê-lo listado aqui para ter o ah aberto , você não vê, ouça aqui mesmo para instalá-lo ou atualizá-lo no canto superior direito aqui, vá em frente e clique em que e, em seguida, vá para Preferências. Isso está no aplicativo da Creative Cloud e, em seguida, na guia Creative Cloud aqui, certifique-se de mostrar que o APS mais antigo está marcado porque uma vez marcada, ele mostrará o Adobe musa lá e, em seguida, podemos instalá-lo para que você possa acompanhar nesta classe adobe Muse Então, é frustrante às vezes quando as empresas descontinuar o software que você ainda deseja usar. Isso é compreensível, mas pelo menos eles não estão removendo completamente a assinatura da Adobe Creative Cloud onde você não pode usá-la. Você ainda pode usá-lo. Só não será atualizado. Então isso é apenas, você sabe, um aviso de isenção para que eles não vão atualizá-lo como eles fazem com a loja de fotos em design. Illustrator Aftereffects, premier e assim por diante. Então é assim que listamos isso aqui para que possamos instalá-lo no programa de software Adobe Creative Cloud APP. Tudo bem, obrigado. 4. 1.2 - fazendo o download e usando os arquivos de suporte: depois de baixar o suporte para este curso, você pode fazer é certo. Clique nele no PC e vá para extrair tudo no Mac. Você pode apenas clicar duas vezes sobre ele, e ele será extraído para a mesma pasta em que você está, por exemplo, a área de trabalho. E uma vez que você extraia, você deve ter uma pasta chamada Arquivos de suporte. E então a partir daí temos balões e Beyond Website, que é o site final se você acompanhar exatamente comigo, que você provavelmente vai usar diferentes fotos ou textos diferentes. Mas isso é apenas para mostrar o site final que eu crio neste curso enquanto você assiste e aprende os princípios e práticas do Adobe Muse. E também há o arquivo do Muse. E então há também fotos e textos de fotos e texto é a pasta onde teremos , por exemplo, as fotos de alta resolução serão redimensionando algumas dessas fotos de baixo risco que foram dadas a mim desta empresa, e você pode acompanhar junto com essas fotos, as fotos inferiores e os documentos que tem o texto em formato de documento Word. E no caso de você não ter esse formato de rich text, que é mais universal, mas para fazer upload deste lado. Obviamente, nós não queremos usar ah, aqueles que estão em baixa rez na verdade da empresa e, em seguida, documenta isso apenas para prática Para este curso. Se você quiser fazer upload do site realmente para um servidor ou catalisador de negócios para a Adobe. Você deseja usar seu próprio conteúdo ou conteúdo de um cliente com o qual está trabalhando. Isto é só para praticar. Para o site agora sob branding, também há arquivo ilustrador. Apenas um logotipo rápido feito quatro lâminas e além e, em seguida, para favorecer con imagens Então vamos estar cobrindo que neste curso será copiar e colar o texto para três das páginas desta área também será digitando em algum texto curto em algumas das páginas. 5. 1.3- Como usar o espaço de trabalho e um exercício rápido: vá em frente e abra flores de arquivo musa e além dos arquivos de suporte, e nós temos o que é chamado de modo de plano bem aqui. Você pode ter um ar que não há links faltando, então se você for para os ativos e bem aqui, pode haver um ar. Se você clicar com o botão direito sobre isso, você pode ir para re link e, em seguida, encontrar na pasta de arquivo esporte onde essa imagem específica é. Isso não é necessário agora, no entanto, porque você verá uma pré-visualização das imagens. E isso é basicamente apenas para mostrar o arquivo musa e apenas o espaço de trabalho. Então vá em frente e clique duas vezes na página inicial aqui e você vai notar que temos aqui um painel de ferramentas . Se você não tiver isso, você pode ir para janela e, em seguida, barra de ferramentas. Certifique-se de que está verificado. Há também painel de controle para cima. Nós queremos que eles sempre verificados, porque dependendo da ferramenta que selecionamos ou do elemento que selecionamos, as opções vão mudar aqui em cima. E então usamos muitas dessas ferramentas ao longo do curso e durante todo o curso. Usando adobe Muse é bem agora sobre no lado direito são alguns atalhos para diferentes painéis e estes ar todos também para cima sob a janela. Então, se você não vir um ali, você pode clicar na janela, e eles estão todos listados aqui. Então, se você obter um painel de redefinição, ele irá redefini-lo para o padrão. E então você deve se parecer com isso. Temos amostras de texto, que são efeitos de rolagem do estado da biblioteca, camadas e assim por diante. Bibliotecas Sisi, ativos e transformar painel estes ar novamente por aqui, bem, mas, em seguida, há alguns outros para selecionar a partir de dois. Então, para mover para cima e para baixo a página, tudo o que fazemos é clicar e arrastar para cima e para baixo a barra de rolagem. Tudo bem, isso é diferente deste controle responsivo aqui que define pontos de quebra, que será entrar em então para mover para cima e para baixo. Podemos usar isso. Também podemos usar a ferramenta manual no painel de ferramentas. Se você simplesmente clicar e arrastar, você pode se mover pelo espaço de trabalho assim se você tiver outra ferramenta exceto a ferramenta de texto, e nós temos um cursor e em algum lugar, se você tiver, digamos, por exemplo, a ferramenta de seleção, esta seta superior e você pressionar a barra de espaço, ele irá alternar para a ferramenta de mão para que possamos mover e, em seguida, soltar a barra de espaço. E então voltamos a usar a seleção. A ferramenta diz que isto é um atalho. Falando em atalhos, temos a ferramenta de zoom aqui. Podemos clicar e arrastar para ampliar áreas. O que eu gosto de fazer é pressionar o controle no PC ou comando no Mac e pressionar, mais ou menos em metal. Amplie e diminua o zoom. Agora, se eu pressionar o controle ou o comando zero, ele vai apenas configurá-lo. Então tudo está na tela aqui, esses atalhos de ar que você pode ver onde você vai para ver e, em seguida, aqui mesmo, zoom in, zoom out ajuste janela página e, em seguida, tamanhos reais, controle ou comando. Um é o tamanho real. Agora a ferramenta de seleção. Aqui, podemos usá-lo para selecionar objetos como esse. Podemos clicar e arrastar o canto para redimensionar uma imagem como esta. Nós também podemos mover coisas ao redor como este vai parecer um pouco diferente. Este apenas redimensionar é que é uma imagem colocada estará colocando, e este o fundo é definido para uma imagem tão excelente que de forma diferente. Temos caixas de texto aqui, Então, se você quiser sempre selecionar texto ou queremos adicionar uma nova caixa de texto, podemos selecionar a ferramenta de texto e clique e, em seguida, digite. E há algumas opções aqui no topo, como estilo de parágrafo divertido, que seria passar por cima e, em seguida, mudar o tamanho e diferentes opções de formatação se você clicar e segurar. Há também uma ferramenta de texto vertical, mas a maior parte do tempo estará usando a ferramenta de texto. Há também um retângulo e uma ferramenta de lábios. Então, se você quiser clicar e arrastar e adicionar algumas formas e mudar a cor do Phil e do traçado, por exemplo, enfraquecer, defina isso. E também há quadros, que são como espaços reservados. Se você queria inserir imagens como parte do Phil para esse retângulo, e então finalmente há âncoras será passando por cima que como definir âncoras em uma página para que possamos vincular a partes de uma página e não apenas vincular duas páginas si e quando estamos indo sobre design responsivo mais tarde será passando sobre formatação de texto e, em seguida, formatação de texto. Apenas nesse ponto de interrupção para que, à medida que você redimensionar, por exemplo, isso sobre Paige em uma janela do navegador ou dispositivo móvel, o texto pode realmente ficar menor ou maior também. Você vai notar lá em cima. Há alguns modos diferentes. O modo planejado é exatamente aqui, onde é um blueprint do nosso site e páginas diferentes, páginas de nível difícil, páginas filho e, em seguida, a página-mestre. Se você obter uma pré-visualização que irá pré V este site e, em seguida, nós também podemos publicar diferentes maneiras aqui, nós estaremos passando por cima. Você também pode publicar a partir do menu de arquivo, e cada vez que trabalhamos e fazer algumas alterações significativas, Eu sugiro salvar como um novo arquivo lado seguro s Então temos os outros arquivos é backup. Ou, se você continuar salvando, é o mesmo arquivo pelo menos fazer backup desse arquivo em um dispositivo diferente, como uma unidade flash ou on-line. Então, para mostrar como é fácil mudar o conteúdo, vamos em frente e adicionar uma imagem aqui. Basta adicionar um pouco de interesse. Então, basta ir para o local do arquivo, navegar para os arquivos de suporte e ir para fotos e texto. E então vamos para fotos baixa rez. Vamos como Balão nove, clique em abrir e clicar como Ir, e podemos redimensionar isso. Nós queremos redimensionar e loja de fotos, geralmente se nós, você sabe, tê-lo em um tamanho diferente para começar. Mas para isso, apenas praticar é bom. Selecione este retângulo aqui e clique e arraste-o para baixo. Esta é apenas uma área de conteúdo vai estar passando por cima que vamos para o lugar em outro lugar final . Há apenas uma vitória rápida, apenas uma prática para se acostumar com o espaço de trabalho aqui. E assim eu vou fazer isso o mesmo. A altura exata é a outra. Só estou usando a ferramenta de seleção aqui, a seta. Assim que adicionarmos essas fotos para algum interesse visual, vá para o navegador de avistamento anterior e navegue até o link de mídia social aqui embaixo. E aí vamos nós. Adicionamos algumas fotos à página Mídia Social para algum interesse visual. Esta é apenas uma vitória rápida, apenas uma prática rápida para mostrar como é fácil adicionar elementos como fotos e fazer alterações em páginas da Web no Adobe Muse. Se você tem o ar desaparecido, isso não é grande coisa. Não vamos usar este arquivo de musa além desta lição. Você vai criar este site do zero. Você pode acompanhar o meu exemplo, ou você pode usar seus próprios arquivos de suporte. Só depende se você quer usar esta oportunidade para criar seu próprio portfólio ou um site para um cliente ou uma organização ou indivíduo, ou você quer criar este blends e além do site. Independentemente disso, o objetivo é que você aprenda os princípios e as práticas do Web design especificamente no Adobe Muse. Então, obrigado e vamos começar a próxima lição. 6. 2.1 - Como criar um novo site no Adobe Muse: Vamos criar um novo site no Adobe Muse, Ir para arquivo novo site ou pressione o controle e no PC ou comando e no Mac que traz esse diálogo para cima. A primeira configuração é fluida com versus fixa com um fluido com a da área de conteúdo da página da Web será redimensionada à medida que os tamanhos do navegador, ajustados com um fixo com o chicote de página, permanecem os mesmos independentemente do tamanho do navegador. O conteúdo com permanece em nove, seus 60 pixels ou qualquer tamanho que temos definido para este projeto, nós queremos definir o dedo fluido com. Como também vamos adicionar elementos de design responsivos ao site, queremos que a página da Web seja dinâmica e não estática, de modo que o conteúdo será redimensionado conforme necessário ao redimensionar o navegador para este projeto. Minha tela tem nove maiores 60 pixels como a página padrão Max com, mas a maioria das telas tem resolução um pouco maior do que essa hoje em dia, então vamos defini-la para 1000 pixels para este projeto. Para colunas, vamos definir para 12 centavos. Ter três ou quatro colunas. Layouts Inn pode ser esteticamente agradável em ter 12 vai nos dar uma grade para trabalhar com vez que podemos então layout. Por exemplo, três colunas de textos ou quatro vem de fotos em uma grade que tem 12. No geral, esses caras não aparecerão no site final. Eles são apenas para nós usarmos como guias e musa. Vamos definir as colunas para 12 e, em seguida, a calha é o espaço entre as colunas e 20 é bom para isso. Se estivéssemos apenas projetando algo para um dispositivo móvel como um telefone, então poderíamos usar menos colunas. Mas este site será feito para vários tipos de telas. Vamos clicar na seta ao lado das configurações avançadas para exibir mais algumas opções. Ah, altura mínima não precisa ser ajustada a partir dos 500 pixels padrão para este projeto. Teremos conteúdo. Mova-se bem além disso de qualquer maneira. E 500 pixels nos dá algum espaço inicial para trabalhar no mínimo com vamos mantê-lo no padrão 320 pixels. Isso deve ser bom para dispositivos menores de navegação na Web, como telefones, bem como telas maiores . Nós não precisamos ir menor do que isso para um mínimo com se você está familiarizado com design editorial ou programas como adobe in design, então você deve estar familiarizado com as margens. Se você não está familiarizado com isso, não é grande coisa. As margens são apenas guias dentro da área de conteúdo do site. Eles agem como um guia para o Web designer para mostrar onde precisamos manter o conteúdo, por exemplo, longe da borda do site para ter algum espaço para respirar. O preenchimento é um preenchimento extra ou espaço fora do espaço em que estamos trabalhando para este projeto. Vamos definir ambos para zero, já que não precisaremos de margens ou preenchimento imediatamente. E podemos ajustar o espaçamento de outras maneiras, que vai passar por cima notar que quando mudamos a configuração superior das margens, o que significa que o espaço na parte superior da página é, ele muda os outros três também. Isso é porque eles estão vinculados por padrão. Se quiséssemos apenas as margens em apenas um lado das páginas, poderíamos desativar isso para que pudéssemos ajustar apenas um. Finalmente, vamos certificar-nos de que isto está definido para o centro. Ele deve ser por padrão sob que é Resolução. Padrão significa que as imagens na página do site estarão no padrão 72 PP I ou pixels por polegada, independentemente de os usuários que navegam no site estarem usando uma tela padrão ou um olho DP alto ou tela retina. Se selecionarmos alto D P I, podemos usar versões de maior resolução das imagens para aqueles com telas de alta resolução , mas isso aumenta o tempo que leva para baixar páginas. Uma vez que as imagens são muito maiores como indicado por este diálogo, vamos manter a opção de resolução definida como Rodapé Adesivo padrão apenas significa que o conteúdo no Rodapé Em outras palavras, o conteúdo comum visto em todo o site no parte inferior das páginas será exibida na parte inferior das páginas da Web, mesmo que o conteúdo do resto da página seja mais curto do que a janela do navegador. Se desmarcarmos rodapé fixo, o rodapé estará logo abaixo do conteúdo da página da Web e não necessariamente na parte inferior da janela do navegador da Web. Então vamos manter isso verificado para este projeto. Agora vamos clicar. OK, nós temos o arquivo da musa configurado para que possamos começar a construir nosso site. Vamos em frente e dizer isso como um arquivo. Estou chamando de balões de arquivo Muse e mais além. Nós não teremos os arquivos separados, como páginas HTML, imagens incorporadas e outros conteúdos até mais tarde, que vai passar sobre o clique salvar e, em seguida, eu vou salvar nosso site até agora, Obrigado e eu vou ver na próxima lição. 7. 2.2 - Como adicionar páginas e planeje o site: Tudo bem. Agora que temos divertido arquivo configurado, podemos começar a adicionar páginas para o site por padrão estavam no modo planejado que é indicado no topo. Esta é uma espécie de mapa de todas as páginas do site. Idealmente, teríamos as páginas do site planejadas antes mesmo antes de iniciar o Muse. E muitas dessas informações resultariam para se reunir com o cliente ou se for seu próprio site, você gostaria de decidir quais seriam as áreas primárias ou páginas de nível superior no site. Ainda podemos planejar o site e musa, embora seja qual for a necessidade de adicionar páginas nesta área. Podemos fazer isso clicando no sinal de adição ao lado da página inicial. Isso irá adicionar uma página irmão, que é outra página de nível superior no site. Vamos dar um nome a isto. Clique no sinal de adição novamente e nós selecionamos outra página chamada Perguntas e, finalmente, clique no dedo do sinal de mais. Adicione outra página e vamos chamá-la de contato. Poderíamos adicionar o que são chamados de páginas filho abaixo dessas páginas irmãos. Isso, então, se tornaria sub-páginas abaixo de páginas de nível superior e as páginas filhas estão em menus suspensos quando criamos um menu mais tarde. Por exemplo, vamos criar uma página filho abaixo da página de contato e chamá-la de mídia social. Vamos criar uma página filho abaixo sobre e colocar direções lá. Há outra maneira de adicionar páginas. Podemos clicar na página sobre o menu e clique em adicionar nova página de nível superior. Podemos também clicar com o botão direito do mouse no PC ou controle. Clique no Mac na parte superior de uma página e clique em Nova página de irmãos ou nova página filho. Também podemos duplicar a página, excluir a página, que também podemos fazer clicando no X no canto superior direito de uma página, renomeado para a página e abrir a página, que apenas abre no modo de design. Também podemos ajustar as propriedades da página de uma página específica, mas vamos analisar como ajustar as propriedades do site em um pouco, que irá apenas propriedades de todas as páginas do site, que é melhor para consistência. A menos que queiramos ajustar as propriedades de uma página específica, também podemos ajustar se uma página está ou não incluída nos menus que criamos, que fará algum sentido mais tarde uma vez que configuramos um menu. Finalmente, também podemos ajustar qual página-mestre das páginas vinculadas se tivermos mais de uma página-mestre . Vamos configurar o conteúdo para a página-mestre mais tarde, então não precisamos ajustar isso agora. Como há apenas uma página-mestre por padrão, podemos clicar e arrastar as páginas no modo planejado e alterar páginas filho para páginas irmãos de nível superior , por exemplo, e vice-versa. Se você está seguindo o meu exemplo, então temos nossas páginas configuradas até agora no modo planejado. Se você tiver mais páginas para adicionar ou menos porque está projetando e iniciando um site diferente do nosso exemplo, ajuste as páginas nesse modo conforme necessário. Certifique-se de ir para o arquivo salvar o site para salvar as alterações. Da próxima vez que salvarmos as alterações, sugiro que você use um nome diferente para que possamos salvar o site da próxima vez. Isso é apenas no caso de o arquivo original ficar corrompido. Temos backups cada vez que fazemos um monte de mudanças. Isso não é obrigatório, mas práticas recomendadas, ou pelo menos certifique-se de ter um backup do arquivo em uma unidade diferente ou on-line. Obrigado. E vejo-te na próxima lição. 8. 3.1 usando páginas principais para elementos comuns: Nesta lição, você aprenderá sobre a importância e a utilidade das páginas-mestre ao projetar páginas da Web e adicionar conteúdo como fotos, ilustrações de texto ou vídeos. Esses elementos são muitas vezes apenas nessa página específica ou colocando-os em. Por exemplo, a página de direções para uma empresa pode ser a única página que tem um mapa nele, e uma página de biografia pode ser a única página que tem informações sobre os fundadores de uma empresa. Mas algum conteúdo deve estar em todas as páginas de um site, como uma navegação consistente na parte superior. Ah, rodapé na parte inferior com informações de contato ou links de mídia social ou uma cor de fundo específica em todo o site. E queremos ser capazes de mudar esse conteúdo sem ter que alterá-lo em todas as páginas uma das vezes, se o site tem cinco ou 500 páginas. É por isso que temos páginas-mestre. Se você estiver familiarizado com a Adobe e projetado, o conceito de páginas-mestre deve ser familiar para você. Se você não estiver familiarizado com ele, não há preocupações sobre como usá-los de forma eficaz e musa para que tenhamos elementos de design consistentes e funcionalidades em todo o site. Então, vamos começar. Adicionando elementos comuns. Clique duas vezes na página-mestre chamada Master Down aqui que traz a página-mestre no modo de design. Os guias não aparecerão no site. Eles são apenas caras para nós passar como nós projetamos, estes guias verticais ar a partir das colunas enquanto as guias horizontais ar para o cabeçalho e eles são áreas de rodapé e também para ajustar margens. O espaço vertical disponível é baseado na altura mínima inicial que dissemos anteriormente, podemos clicar e arrastar a seta interna aqui dedo do pé ADM. Ou espaço entre a parte inferior do navegador na parte inferior da página, que é controlado por esta seta para este projeto. Eu quero que a letra seja nivelada com a parte inferior da janela do navegador, no entanto, vamos mover isso de volta para cima. Nós também pode ajustar a altura do cabeçalho e rodapé e adicionar algum espaçamento acima do cabeçalho. Se necessário, clique e arraste a seta superior no dedo do pé da ordem. Adicione algum espaçamento entre a parte superior da página e a parte superior do navegador. Isso realmente depende do seu projeto, pois algumas navegações podem ser niveladas com a parte superior do navegador, enquanto outras não. Para este exemplo, vamos definir isso como 10 pixels para um pouco de espaço de respiração acima do cabeçalho e a página enquanto eu clicar e arrastá-la indica a distância entre o topo da página e o topo do navegador aqui. Em seguida, vamos clicar e arrastar esta seta para 75 pixels, então está 75 pixels abaixo da parte superior da página, que está a 10 pixels da parte superior do navegador. Então, realmente, nós temos 85 pixels de espaço aqui em cima trabalhar com incluindo o espaçamento extra de 10 pixels para algum espaço de respiração. Vamos no topo do rodapé, dois antigos de 50 pixels, uma vez que isso irá colocá-lo em 50 pixels acima da parte inferior da página aqui, já que nossa altura mínima inicial é definida para 500 pixels. Em seguida, vamos adicionar algum conteúdo na parte superior, a fim de delinear o cabeçalho do resto da página. Uma opção seria adicionar uma linha aqui entre o cabeçalho e o resto da página. Se estivéssemos cobrindo isso, poderíamos apenas adicionar um cavalo em uma linha no código, mas no Muse, podemos adicionar um retângulo e depois ter um lado dele. Faça com que uma linha clique na ferramenta de retângulo no painel de ferramentas e, em seguida, clique e arraste pela parte superior. Aqui disse que a parte inferior do retângulo é ao longo da parte inferior da área de cabeçalho. Clique para cima no traçado na parte superior e defina-o como uma cor para este exemplo. Eu só vou colocá-lo para você preto. Isso controla a espessura do curso ou borda, e eu vou mantê-lo definido no dedo do pé um. Poderíamos curvar os cantos adicionando um raio de canto ou alguns deles aqui, mas não vou acrescentar isso neste exemplo. Também podemos adicionar efeitos como sombra, chanfro ou brilho. Mas muitas vezes não parece profissional, mas às vezes pode ser relevante ou profissional e depende da marca do cliente e como o efeito é feito. Também podemos ajustar a opacidade de uma forma selecionada para torná-la menos opaca e mais transparente. Se quisermos aqui, volta aqui no acidente vascular cerebral, vamos clicar na palavra traço. Vamos nos certificar de que o traçado está alinhado com o interior da forma para este exemplo, e, em seguida, também vamos clicar neste Então estes ar não todos ligados para ser o mesmo. Então faça o derrame. Aguarde o canto superior esquerdo e direito definido como zero. Teremos uma fila no fundo. Podemos visualizar o que isso parece indo para pré-visualizar na parte superior. Sabe que a linha não atravessa todo o caminho. Isso é porque eu intencionalmente não defini o emaranhado certo para ir para 100% com mais cedo, apenas para mostrar o que ele faz. Isso é mais relevante para corrigir com sites de layout, embora algumas formas e fotos possam ser um chicote fixo, mesmo em fluído com sites. Mas para este exemplo, queremos que o link percorra todo o caminho, independentemente de quão maior é a janela do navegador. Assim, com a ferramenta de seleção selecionada, Clique e arraste a forma para que ele se encaixa na borda e diz 100% para W ou com certifique-se que você selecionar a forma e não a barra que define os pontos de quebra, que irá passar mais tarde. Lá vamos nós agora, vá para a pré-visualização e vamos ver a diferença. É assim que adicionamos uma linha que atravessa toda a janela, independentemente de quão grande ou pequena é a janela do navegador para este projeto. Eu não quero uma linha, mas eu queria te mostrar como adicionar facilmente uma. Vou adicionar um retângulo que tenha um preenchimento. Como isso é para um cliente que dá passeios de balão de caçador, queremos que as cores sejam brilhantes e ensolaradas. Vou excluir a forma que acabamos de projetar para a linha, e eu vou criar um retângulo na parte superior para o fundo do cabeçalho. E eu vou definir o preenchimento para um pouco azul claro, como o céu, mas ainda um azul forte. Eu vou usar os seis dígitos ou um código decimal Hexi para nove um B E para e, em seguida, entrar. Você pode usar isso ou selecionar uma cor diferente. Agora vamos adicionar uma cor de fundo para a área de rodapé desenhando outro retângulo sobre essa área com os traços que para nenhum para este também. Vamos mudar o Phil para uma cor que não é super brilhante. Isso poderia facilmente distrair do conteúdo na página, como as fotos que eventualmente colocarão aqui. Vou configurá-lo para C 69 C 6 D, que é uma cor mais silenciosa, mas ainda relevante. Poderíamos torná-lo mais de uma cor laranja se quiséssemos criar um esquema de cores complementar com o azul. Mas vamos rever temas de cores mais tarde e como configurar isso? O legal é que poderemos fazer isso mais tarde se precisarmos, e isso refletirá nas páginas. Como isso está em uma página-mestre, certifique-se de que a borda vai para 100% enquanto você desenha esses retângulos. Se precisarmos ajustar o tamanho depois que inicialmente rasado, podemos usar a ferramenta de seleção e clicar e arrastar o lado superior ou os cantos ou o lado esquerdo ou direito . Agora temos os conceitos básicos da página-mestre configurados. O conteúdo reflete em todo o site. Quaisquer alterações feitas na página-mestre serão refletidas nas páginas. Agora vamos dizer que queríamos certas páginas dedos têm uma cor ligeiramente diferente na parte superior ou um rodapé de tamanho diferente ou qualquer outra coisa. Podemos adicionar uma nova página-mestre aqui em baixo apenas em uma página clicando no sinal de adição por padrão. Chama-se “Ser Mestre”. Eu vou rapidamente apenas adicionar algum conteúdo a ele para este exemplo. Que tal um círculo? E vamos adicionar alguma cor e notar que nenhuma das páginas tem esse conteúdo. Isso ocorre porque todos eles estão associados a um mestre, o que é indicado abaixo de cada página para alterar isso. Basta a direita, clique no PC ou controle, clique no Mac e vá para mestres e depois seja mestre. Agora, esta página específica tem o conteúdo da nova página-mestre. Quando ele apenas uma página-mestre para este projeto, no entanto. Então eu vou definir isso de volta para uma página-mestre e excluir ser página-mestre. Agora certifique-se de salvar seu trabalho, de preferência com um novo nome. Então temos um arquivo de backup Orly. Salve outra instância dela em algum lugar. Obrigado. E vejo-te na próxima lição. 9. 3.2 - como alterar as propriedades de fundo de todas as páginas ou uma página: para este projeto. Estou mantendo a cor de fundo definida para o branco padrão. No entanto, às vezes podemos querer mudar o plano de fundo para você outra cor ou até mesmo uma imagem. Veja como fazer isso. Clique duas vezes em uma página para abri-la no modo de design e, em seguida, clique no navegador. Opção de preenchimento na parte superior. Podemos definir a parte de trás para uma cor, um Grady Int ou até mesmo uma imagem. Podemos ter uma pequena imagem que se repete em todo o fundo do padrão anterior, e podemos ajustar se ou não a imagem de fundo rola com a página ou uma estática ou não se movendo enquanto rolamos. Para este exemplo, vamos apenas mudar o plano de fundo para uma cor. Eu acabei de dizer isso para Blue, e isso não parece bom neste exemplo, mas eu estou apenas mostrando como mudá-lo. Gostaríamos de ter certeza de que a cor de fundo ficava boa na página. Claro, algo mais sutil para isso Então feche essa página, e agora há uma cor de fundo para essa página. Mas e se quiséssemos mantê-lo consistente, que é a melhor prática para uma página de negócios como esta? Vamos clicar duas vezes na página-mestre A para alterar a cor do plano de fundo de todas as páginas do site, e eu mudarei para uma espécie de cor verde. E agora podemos ver que todas as páginas têm verde, exceto a página que já tínhamos mudado para essa página. Essa cor de fundo está substituindo as configurações da página-mestre. Como mudar isso? Bem, podemos apenas clicar com o botão direito do mouse no PC ou controle, clicar no Mac sobre essa página e modo de plano e clicar em um mestre para que possamos aplicar as configurações retas em massa novamente a esta página. Claro, eu quero mudar este dedo do pé branco para este exemplo, então vamos para a página-mestre e defini-la para branco. Uma dica rápida. O Código Decimal Hexi para branco é F F F F F F F f, e o código decimal Hexi para preto é 000000 Você não precisa memorizar aqueles ao usar um programa como uma musa, já que podemos apenas configurá-lo aqui. Mas ajuda saber que, no caso de trabalharmos no código mais tarde ou quisermos definir rapidamente um dedo do pé de cor, uma dessas configurações. Então vamos fechar a página-mestre e, em seguida, podemos salvar o arquivo, se necessário. Mas nós não fizemos nenhuma mudança, realmente. Nesta lição, eu queria mostrar-lhe como alterar a cor de fundo da página individual ou do site inteiro se necessário. Obrigado, e verei na próxima lição. 10. 3.3- como ajustar as propriedades do site: recurso útil do Muse é que podemos ajustar as propriedades de um site mesmo depois de começarmos a trabalhar nele. Ir para as propriedades do site de arquivo e as configurações sob layout são as mesmas opções de configuração que tínhamos anteriormente ao criar um novo arquivo de site no Muse, por exemplo, se o site tem um fluido ou corrige com o tamanho das margens e preenchimento e assim , podemos ajustar isso mesmo depois de configurá-lo inicialmente. Ao criar um novo site, vamos clicar no conteúdo por padrão. Os navegadores da Web terão certos estilos para hiperlinks. Por exemplo, os links geralmente são azuis com um subjacente, a fim de diferenciá-los do texto normal. Então os usuários da Web não, eles são links que podem ser clicados para este projeto. Vamos personalizar estes. A primeira configuração é para hiperlinks normais, seja, hiperlinks, que não têm um cursor pairando sobre eles e para páginas que não foram visitadas. Mas os links padrão são azuis e sublinhado indicou aqui com a verificação, marca notou o hífen ou traço aqui. Isso significa apenas que a configuração usará o estilo local em vez de substituí-lo. O que isso significa é que o texto do hiperlink será sublinhado, mas eles só serão negrito ou itálico se já estiverem estilizados. Desta forma, poderíamos fazer todos os links em negrito ou em itálico, mas isso é apenas mantê-lo para os padrões da configuração local é usado, mas vamos mudar a cor ligeiramente. Vamos clicar no azul aqui, e eu estou mudando para três d 94 Se f você pode ajustá-lo para qualquer cor que você gosta quando mouse sobre os links, vamos mudar a cor para uma cor complementar que é um pouco laranja. Eu estou usando FF C 34 F Desta forma, ele vai torná-lo ainda mais óbvio que o texto Sublinhado é um link como ele reage mudando a cor para contraste na cor para visitar um links ativos, eu vou mudar a mesma cor. O azul três D 94 ff cor. Eu não estou preocupado em indicar que uma página já foi visitada mudando de cor, e isso deve ser óbvio, pois não há tantas páginas neste site. De qualquer forma, Ativo só significa que se houver um link de texto em uma página que o usuário da Web já está, eu não acho que isso vai acontecer com este site, pelo menos com o link de texto, mas ele mudou para a cor azul também. Sugiro deixar verticais e horizontais para barras de rolagem do navegador para automáticas, já que você não quer que as barras de rolagem apareçam se não forem necessárias. Em outras palavras, se todo o conteúdo estiver se encaixando na janela do navegador, então não precisamos de barras de rolagem para este projeto sob imagens que tem a opção de converter arquivos PNG. T.J. T.J. Peg, vou desmarcar isso porque se tivermos um arquivo PNG que é parcialmente transparente para que o fundo mostre através de parte dele, então se convertemos JPEG, Peg, vou desmarcar isso porque se tivermos um arquivo PNG que é parcialmente transparente para que o fundo mostre através de parte dele, então se convertemos JPEG, perderá a transparência. Poderíamos combinar esses arquivos em blisters de loja de fotos, ter feito verificações porque vamos aprender um pouco mais sobre arquivos PNG mais tarde. Os arquivos PNG têm compactação sem perdas, enquanto J. Peg às vezes pode ter uma qualidade ligeiramente menor, se não for salvo com as configurações de qualidade mais altas possíveis. Mas J picks pode ser arquivos menores do que arquivos PNG, daí o raciocínio para convertê-los para J Pegs. Mas vamos querer manter arquivos PNG nesse formato neste projeto, então vamos desmarcar que bem projetado um favor. Imagem comum posteriormente, que é a imagem na barra do navegador ou favoritos, e o navegador da Web que acompanha um site. Isso não é obrigatório para um site, mas pode ser útil para branding, então não se preocupe com isso. Por enquanto, vamos clicar na área avançada vai passar por cima na edição do navegador mais tarde, mas isso apenas controla se na edição do navegador ativar ou não texto sincronizado. Passaremos na edição do navegador mais tarde à medida que exportamos e no site sob texto. Isso significa apenas se os links âncora, que são hiperlinks para partes específicas de uma página chamada Âncoras seguem ou não o estilo do estado ativo . Eu desmarquei isso, mas para este projeto, não importa, já que definimos a cor para ser a mesma que um hiperlink normal. De qualquer forma, a rodada que leva a uma opção de número inteiro controla se deixar qual é o espaçamento vertical entre linhas de texto, é arredondado para o número inteiro. Em outras palavras, se a entrelinha automática para um determinado tamanho seguido com 16.8, ele iria alterá-lo para 17 pontos número buraco, deixando leva a olhar mais consistente entre os navegadores. Então eu disse, apenas mantendo isso verificado com a versão mais recente do Muse. O texto usa as mesmas métricas de fonte que os aplicativos populares do navegador da Web, para que o texto pareça mais consistente e preciso. Mas se você quiser usar posições de linha de base mais antigas, que é como a corrida inferior da maioria das letras da linha de base, então você iria verificar isso para torná-lo mais compatível com versões anteriores do Muse. Isso é apenas manter isso desmarcado a menos que você tenha um arquivo projetado na versão mais antiga do Muse, e ele não está parecendo certo e você só quer usar As configurações mais antigas estarão passando por links da Web mais tarde. Mas essa configuração significa apenas que o subconjunto padrão de caracteres em uma fonte são usados. Queremos mudar tudo isso. Se houver algum brilho ou caracteres especiais que quiséssemos usar que não estamos aparecendo por padrão. Sugiro mantê-lo definido como subconjunto padrão, e podemos alterá-lo mais tarde se houver um caractere específico que não mostre as páginas de carregamento mais rápido. Usando opções de fundos fallback só significa que uma página da Web será carregada com um fundo de backup em vez de um novo vínculo Web baixado, que pode demorar um pouco mais tempo eu disse, apenas mantendo isso desmarcado para que a página não carregue até que a diversão correta é carregada, mesmo que possa demorar um pequeno segundo ou mais tempo se o fundo ainda não foi baixado, Queremos que a página pareça correta. Finalmente, vamos manter os homens. Se eu CSS trekked. Isso só significa que torna o código CSS mais compacto para que as páginas sejam carregadas mais rapidamente. CCS significa folhas de estilo em cascata e é uma linguagem de codificação que permite o estilo, izing e formatação de elementos e páginas e funciona com codificação HTML. Clique em OK e vamos salvar este arquivo Na próxima seção será adicionar conteúdo, incluindo imagens duas páginas que eu vou ver na próxima lição. 11. 4.1 - como usar camadas para a organização e a pedido: assim como outros programas de design gráfico da Adobe, incluindo Photoshopped in Design e ilustrador Muse tem um painel de camadas, que pode ajudar a organizar um conteúdo de ordem. O painel Camadas e o Muse funcionam de forma um pouco diferente do painel Camadas no Photoshopped, embora esteja mais próximo da funcionalidade do no designer ou ilustrador. Mas mesmo que você não tenha usado esses programas, não é grande coisa, pois é muito simples de entender e usar. Clique duas vezes na página-mestre e vamos clicar no painel Camadas à direita. Se isso não está lá por algum motivo, ou apenas para saber outra maneira de encontrá-lo, podemos ir camadas de janela do dedo do pé por padrão. Nós apenas temos uma camada, que é chamada Camada um Clique Duplo que e vamos chamá-lo de conteúdo primário. A cor não tem nada a ver com o conteúdo. Nessa camada é apenas uma maneira de diferenciar entre as camadas, que se tornará evidente em um pouco, então eu vou mantê-lo azul claro e clique em OK. Em seguida, clique no ícone Adicionar nova camada na parte inferior do painel de camadas. Clique duas vezes nisso e vamos chamá-lo de cabeçalho. Vamos adicionar 1/3 camada e nomeá-lo rodapé. Vamos encomendar estes da mesma forma que eles estão na página para mantê-lo ordenado. Então clique e arraste a camada de rodapé e traga-a para a parte inferior das camadas, e devemos ter o cabeçalho na parte superior e o conteúdo primário no meio. Observe que há uma seta ao lado da camada de conteúdo principal. Isso ocorre porque há conteúdo nesta camada, e podemos clicar nisso para mostrar os objetos nesta camada. Estes são os dois retângulos que já criamos, o cabeçalho superior e as formas de fundo do rodapé inferior. Queremos que eles estejam em suas limpas de crack. Mas primeiro, vamos renomeá-los Clique na caixa para direcionar o objeto. Isso deve selecioná-lo e mostrar qual é o retângulo no painel Camadas. Qual retângulo na página da Web observe que este está selecionado. Então, agora vamos à direita. Clique no PC ou controle. Clique no Mac nessas camadas e clique em renomear. Vamos renomeá-los rodapé, plano de fundo e fundo do cabeçalho. Nós podemos ordenar estes dentro da camada atual se eles estavam sobrepostos na página da Web e nós queríamos um para estar no topo, mas nós precisamos mover esses dedos outras camadas, então clique e arraste o fundo do rodapé para baixo para a camada mais ajustada. Podemos fazer isso clicando e arrastando sobre o nome em si outras maneiras de clicar na caixa para direcioná-lo. Isso é útil para quando alguns objetos podem estar abaixo de outros, e queremos selecioná-lo. Clique e arraste na área da caixa de para a cabeça anteriormente. Observe que a cor da camada no painel Camadas corresponde às linhas de seleção ao redor dos objetos selecionados. Na verdade, a página da Web não terá essas cores delineadas. É só para nós sermos capazes de dizer qual mais tarde estamos em qual objeto é selecionado. Agora temos o ícone de lixo na parte inferior do painel de camadas, e podemos clicar nisso quando um objeto de camada é selecionado em ordem. Apagá-lo. Também podemos clicar e arrastar camadas ou objetos para o ícone da lixeira. O outro botão é o ícone de localizar objeto. Se selecionarmos um objeto na página da Web com a ferramenta de seleção, compactamos esse ícone, que se parece com uma lupa na parte inferior do painel de camadas para encontrá-lo no painel de camadas. Isso é particularmente útil para arquivos que têm muitas camadas e objetos neles. Se você está me acompanhando, então este ar todas as camadas precisarão por enquanto. Então vá em frente e clique. A seta voltada para a direita está lá para fechar o painel. Esperemos que agora você entenda como as camadas funcionam e por que as usamos no Muse. Isso se tornará ainda mais evidente à medida que adicionamos objetos, já que se alguns objetos estiverem em cima um do outro, é fácil reorganizá-los no painel de camadas para que certos objetos fiquem no topo invisíveis. Verei na próxima lição. 12. 4.2 - Como configurar áreas de elementos para organização e estética: antes de adicionar imagens e, em seguida, texto o layout das páginas que é costurado algumas áreas de elementos ou áreas que vão espaçamento para ter algum conteúdo. Algumas dessas áreas incluirão imagens, texto, imagens e texto. Além de ajudar no layout e planejamento de um design de uma página da Web, permite adicionar a cor de fundo de áreas específicas também. Então, clique duas vezes na página inicial para que ela se abra no modo de design. Certifique-se de que estamos trabalhando na camada de conteúdo principal no painel de camadas e, novamente, se você não tiver isso, certifique-se de clicar em camadas aqui à direita ou ir para as camadas da janela do dedo do pé. Selecione a ferramenta de retângulo e clique e arraste na borda abaixo do cabeçalho. Vamos configurá-lo para cerca de 200 pixels de altura e defini-lo para 100% para a largura. Claro, alguns sites têm um fixo com quatro elementos e que encontramos também. Mas para este projeto, queremos que ele se espalhe pela página. Isso vai apresentar um gráfico de introdução. Então, no painel Camadas, vamos nomeá-lo clicando duas vezes nele e digitando Introdução gráfico Ray abaixo dessa área. Vamos criar outro retângulo e configurá-lo para 400 pixels de altura e 100% com. Aqui vamos nós e em cima. Se você vir esta opção de redimensionamento aqui, se você clicar que você também pode redimensionar manualmente. Se você estiver tendo dificuldade em definir a altura para algo específico com o mouse, você pode digitá-la lá. E também, se você clicar no ar para baixo aqui, também podemos configurá-lo para Responsive com Responsive dentro de altura ou estiramento para navegar com. Este é um que temos até agora porque temos que definir 100%. Vamos deixar isso aí por enquanto. Ele vai passar por cima do design responsivo mais tarde no curso. Vamos renomeá-lo texto de introdução. Isso irá abaixo do gráfico de introdução na página e no painel Camadas. Mesmo que não se sobreponham. Observe como ele empurra a área do rodapé para baixo como nós desenhamos. Isso ajuda, já que queremos adicionar esse conteúdo acima do rodapé. Próxima vontade em uma área para uma chamada à ação irá incluir um botão aqui mais tarde que irá apontá-los para uma página com mais informações no caso de eles querem enviá-lo para o passeio de balão sabe que não há espaço acima do rodapé, entanto. Nós não queremos clicar e arrastar um novo retângulo em cima do rodapé ou do cabeçalho, para que o assunto, porque então ele iria colocá-lo em cima do rodapé ou cabeçalho. Então clique e arraste acima dessa área assim. Em seguida, podemos redimensioná-lo com a ferramenta de seleção. Para o meu exemplo, vou defini-lo para 100 pixels de altura em 100% com e novamente se pudermos. E novamente podemos redimensioná-lo aqui ou após redimensionar. Basta clicar nisso e tudo, digite 100 e, em seguida, digite ou retorne. Isso vai redimensioná-lo para nós. Vamos chamar esse texto de chamada à ação agora. Não precisamos adicionar essas áreas de elementos, mas pode ser útil quando precisamos mudar o plano de fundo de uma área, e isso nos ajuda a planejar o conteúdo do layout das páginas. Vamos fechar esta página e, em seguida, salvar as alterações no arquivo. Verei na próxima lição onde começaremos a adicionar imagens ao site 13. 4.3- Como adicionar imagens ao seu site: nesta lição, você aprenderá de algumas maneiras diferentes. Toe adicionar imagens ao seu site. Adicionaremos uma imagem como plano de fundo ao retângulo e, em seguida, também colocaremos algumas imagens. Se ainda não estiver aberto, abra os balões e além do arquivo Muse que temos trabalhado e clique duas vezes no dedo da página inicial aberto no modo de design com a ferramenta de seleção, Clique no gráfico de introdução do retângulo. Clique na palavra preencher na parte superior e, em seguida, clique em Adicionar imagem. Idealmente, poderíamos mover todas as fotos ou outras imagens que estamos usando em um site para uma pasta Imagens ao lado do arquivo divertido para mantê-lo organizado, mesmo que quando exportamos o site mais tarde para HTML, ele irá organizar arquivos para nós, desde que o suporte pilhas ar não movido ou excluído como trabalhamos no site e Muse ainda pode encontrá-los, então não precisamos necessariamente colocá-los em uma pasta de imagens. Primeiro, podemos simplesmente inseri-los na pasta Arquivos de suporte. Selecione o gráfico de introdução do arquivo Home e clique em. O encaixe aberto pode ser ajustado para o tamanho original. Este é um arquivo de imagem muito grande, então só vemos parte do céu com essas configurações, já que a foto é muito maior do que a área do retângulo que desenhamos no menu do filme muda ajustada à escala para caber. Isso altera o ajuste da imagem para que todas as imagens sejam vistas, mesmo que haja espaço em branco nas laterais. Neste exemplo, o retângulo é muito maior do que a foto, que não é bem um quadrado, mas não é muito largo em comparação com sua altura em comparação com o quadro. Se a foto tivesse uma orientação mais ampla do que o retângulo, então haveria espaço vazio na parte inferior. , não queremos este espaço vazio, No entanto, não queremos este espaço vazio, então mude o ajuste para escala para preenchimento. O que isso faz é preencher a forma do retângulo com a foto, mas recorta a área superior e inferior para que ela se ajuste à forma. Ajuste a configuração de posição para alinhar a foto ao meio, à parte superior ou inferior neste exemplo. Se ajustarmos para a esquerda ou para a direita, isso não afetará com este exemplo, porque a foto já está dimensionada para preencher a área longitudinalmente. Para este exemplo, vamos ajustar a posição para uma das posições superiores. Isso nos dará uma boa foto da área do balão de ar quente para gráfico de introdução. Agora vamos dizer que queremos que esta área gráfica ocupe um pouco mais de espaço vertical. Poderíamos clicar e arrastar a borda do retângulo, mas então ela se sobrepõe à outra área que desenhamos para o texto de introdução. Então precisamos redimensionar esta forma e mover esta para baixo. Então, em vez disso vamos clicar em, arrastar para o lado aqui e selecionar as duas formas Introdução Tech Shen e chamado um texto de ação. Claro, nós também poderíamos pressionar shift e clicar em ambos no painel de camadas. Clique e arraste os dois para baixo um pouco para que tenhamos mais espaço para esta área gráfica superior. Em seguida, clique e arraste a borda inferior do retângulo gráfico de introdução para que ele se encaixe no abaixo. É assim que fazemos isso. É assim que adicionar uma imagem a uma página da Web, adicionando-a como a forma seguinte, vamos e três imagens colocando-as, vá para o local do arquivo e selecione algumas imagens da pasta Fotos Low Rez. Mantenha o controle no PC ou comando no Mac e clique em três Para selecionar, estou selecionando Balão um, Balão 16 e Balão 18. Clique em Abrir, e nosso cursor se transforma em uma pequena visualização das imagens que irá colocar podemos pressionar esquerda e direita no teclado para percorrer as imagens selecionadas em ordem, colocar uma que queremos. Primeiro, vamos colocar três imagens nesta área, que anteriormente chamamos de texto de introdução. Teremos texto nesta área, mas eu quero adicionar três imagens na parte inferior dela. Para manter o site visualmente interessante, basta clicar na área, e isso irá colocar a imagem no tamanho original. Eu não quero que seja em grande parte neste exemplo. Então eu vou pressionar o controle Z para desfazer, e no Mac será Command Z. Eu vou clicar e arrastar para colocar as fotos, notar o número à direita do mouse enquanto clicamos e arrastamos. Esse é o tamanho percentual da imagem original para que possamos torná-la menor, já que os programas da Adobe fazem um bom trabalho de redimensionar imagens para serem menores, mas não queremos colocar em um filho maior, é do que a imagem original, por isso certifique-se de que o número não está acima de 100%. Estou clicando e arrastando essas fotos para colocá-las. Podemos então usar a seleção disse a ela, redimensioná-los para que eles estejam alinhados na parte superior e inferior. Eles são diferentes com proporções de altura do dedo do pé, então eles não serão os mesmos neste exemplo. Mas eles podem ter espaçamento consistente entre eles altura consistente, bem como alinhados ao longo da parte superior da parte inferior. Estamos aplicando alguns princípios de design, nomeadamente alinhamento e consistência, incluindo espaçamento consistente ou proximidade. Veja as guias que aparecem na parte superior da parte inferior. Quando eu mover e redimensionar essas fotos, elas nos ajudam a ter certeza que as fotos são as mesmas. Altura e música alinhada também adicionarão esses guias entre as fotos. Nesse caso, o espaçamento entre cada um é um certo número de pixels. Uma vez que eles têm um espaçamento consistente entre eles, mantenha a tecla shift e clique em todas as três fotos em ordem. Selecione-os. Em seguida, podemos clicar e arrastar o grupo de fotos até que o guia central apareça e as próximas lições vão passar por mais algumas considerações ao gerenciar imagens e musa também irá redimensionar algumas na foto foto primeiro, porque isso é idealmente o que fazemos antes de inseri-los na musa. Obrigado. 14. 4.4 - Como ajustar e usar os ativos no Musa: Nesta lição, você aprende como usar o painel de ativos para gerenciar ativos usados, como imagens, e editar ou adicionar atributos a eles. Então, quando colocamos ativos como estas imagens J peg aqui, eles devem aparecer no painel de ativos. É ao lado do painel de camadas aqui, ou podemos ir os ativos da janela que lista são imagens que usamos até agora três colocadas na página inicial e uma adicionada como plano de fundo na página inicial. Se uma foto for apagada ou movida, então pegamos um ar aqui. Nós, então, precisa re ligá-lo para que possamos clicar com o botão direito no PC ou controle. Clique no Mac e clique no link Re e diga ao Muse para onde a foto foi movida. Se ele foi excluído, precisamos encontrar outra cópia ou baixado novamente. Este painel também nos informa se os ativos são alterados e precisam ser atualizados, caso em que esse ponto de exclamação aparecerá e nos dirá que um ativo foi atualizado. Vou te mostrar o que quero dizer. Aqui eu tenho balão um ponto jpeg aberto para o pequeno Photoshopped a partir da pasta rez baixa. Eu só vou afiar um pouco. Portanto, há uma alteração no arquivo usando um efeito de máscara descarregada. Muito bem, agora, vamos guardar isto como o mesmo nome final. Claro que sim. Agora volta e musa, há este alerta ao lado do balão um ponto j Peg e painel Ativos. Esta imagem foi atualizada em outro programa, para que possamos clicar com o botão direito no PC ou controle, clicar no Mac e, em seguida, clicar em Atualizar ativo. Agora, esta imagem reflete as mudanças que fizemos na loja de fotos. Agora repare. Sob essas opções, também temos algo chamado Coletar ativos. Temos aqui para coletar um ativo individual ou para baixo no canto inferior esquerdo do painel de ativos. Podemos recolher todos os bens. O que isso significa é que poderíamos fazer cópias de todas as fotos e outros ativos estavam usando e colocá-los em uma pasta que pode realmente ajudar com a organização, especialmente se as imagens colocadas ou ilustrações estão em todo o lugar. Mas não precisamos fazer isso porque iremos exportar o site mais tarde, e teremos arquivos HTML. Arquivos de imagem. Atmore, tudo organizado em várias pastas, passará por cima de bibliotecas cc e um pouco, mas logo abaixo está uma opção útil chamada Ir para ativo. Se víssemos um ativo no painel de ativos, mas não pudéssemos encontrá-lo facilmente no espaço de trabalho, poderíamos clicar nele e ele foi destacado para nós. Isso é especialmente útil quando temos um monte de imagens e outros ativos em várias páginas em um site, em Bed link Opções em camas, o arquivo vinculado no arquivo mews. Então, se estamos compartilhando eles úteis com outras pessoas, não teremos cuidados com Link perdidos, por exemplo. Mas não temos tantas opções aqui depois de incorporá-lo. Nós não queremos fazer isso aqui porque temos as fotos originais, e novamente estaremos exportando mais tarde no Original nos permitiria editar rapidamente um ativo em outro programa. precisamos ter certeza de que o tipo de arquivo está associado a um programa de software de edição de imagem entanto,precisamos ter certeza de que o tipo de arquivo está associado a um programa de software de edição de imagem , , em vez de apenas um programa de software de visualização de imagem. Então, se J pegs ar definido para abrir pelo Adobe Photoshopped por padrão, então isso funcionaria. Se ele apenas abre uma visualização, apenas essa associação em seu sistema operacional é um painel de controle, ou apenas abrir Photoshopped primeiro e abri-lo a partir daí, revelar no Explorer apenas abre a pasta em que o ativo vinculado neste caso, uma imagem está localizada. Isto é para o caso de descobrirmos onde está a foto no computador. Semelhante a isso é a opção Copiar caminho completo que copia o caminho no computador para o arquivo para a área de transferência. É só mais uma maneira de ver onde os bens estão localizados. Por enquanto, como trabalhamos no site e musa Agora, antes de passar por cima da opção Editar propriedades da imagem, eu quero explicar rapidamente essa opção. Otimize o tamanho do ativo. Esta opção não aparecerá a menos que tenhamos feito que a imagem inserida seja menor que o tamanho original . Então, para estas fotos estavam aqui eu coloquei nós redimensioná-los para ser menor. Fim da musa. Então, temos essa opção. Esta é apenas uma maneira conveniente de re amostra das imagens para este novo tamanho menor para que eles não são maiores e tamanho do arquivo do que o necessário. Agora é melhor prática usar um programa de software de edição de imagens como o Adobe Photoshop para editar os lados das imagens primeiro antes de usá-las e musa. Mas eu queria mostrar-lhe esta opção será re dimensionar algumas imagens e loja de eleitores na próxima lição e, em seguida, reinserir essas imagens aqui. Mas esta é uma maneira rápida de otimizar as imagens no Muse se não tivéssemos acesso à loja de fotos . Finalmente, a Editar Propriedades da Imagem nos permite adicionar dicas de ferramentas, que aparecerão quando passarmos o mouse sobre uma imagem. Por exemplo, o texto alternativo será carregado em navegadores da Web como leitores de tela para deficientes visuais . Isso é importante dedo adicionar porque, em seguida, as pessoas com deficiência visual será capaz de ouvir o que as fotos são como sua leitura para eles a partir do leitor de tela. Então, para este, poderíamos adicionar Ah, balão de ar quente em Kissimmee. Seja qual for o conteúdo da foto, a dica da ferramenta poderia ser algo semelhante ou apenas mais informações sobre o ativo se quiséssemos que algo aparecesse quando passássemos o mouse sobre ele. Agora que colocamos algumas imagens e saber como otimizar e ajustá-las e musa na próxima lição fará algum corte predefinido para imagens no Photoshop para que sua otimizada e redimensionada em um programa de edição de imagem que é muito bom em re amostragem para alta qualidade e melhor tamanho de arquivo 15. 4.5 - de corte e redimensione fotos para consistência no Photoshop: Nesta aula, você vai aprender como redimensionar e cortar fotos de forma eficaz no Photoshopped para que elas tenham o tamanho correto e relação com a altura quando as usamos no Muse. Se você tem a Creative Cloud ou se comprou um pacote de software da Adobe e, portanto tem o Muse e o Photoshopped, vá em frente e abra a loja de eleitores se você não tiver acesso à loja de fotos. Eu não redimensionei, isso e incluí-los nos arquivos de suporte também. Existem algumas opções gratuitas para programas de software de dimensionamento de imagens, mas a loja de fotos é realmente o padrão da indústria. Quando se trata de edição de fotos e imagens. Ir para arquivo aberto e abrir as três imagens que colocamos em Muse Balloon um ponto j peg balão, 16 ponto jpeg e balão 18 ponto jp. Poderíamos ir até você imagem, tamanho da imagem e alterar a largura ou altura, mas isso manteria a taxa de altura chicoteada a mesma. Ou seja, a menos que desmarque a opção de restrição de proporção. Mas então iria distorcer a foto. Precisamos ter as três imagens têm um consistente com e altura quando colocá-los na página Web quando rodapés têm diferentes com duas proporções de altura. Por exemplo, alguns têm mais orientação de retrato, e outros têm mais orientação de paisagem. Precisamos usar um corte predefinido. Isso irá cortar parte da foto, mas podemos cortar as fotos para composição efetiva e dimensões consistentes. Se olharmos para trás na página inicial, acenou musa. Em vez de ter três imagens com três chicotes diferentes, embora com a altura e alinhamento consistentes, precisamos ter três imagens aqui com a mesma largura e altura. A página com é 1000 pixels e levando em consideração o espaçamento entre as imagens, vamos fazer cada imagem 300 pixels de largura porque então podemos ter 25 pixels nos espaços entre as imagens que somarão até 1000 pixels. Exatamente de volta na loja de fotos. Selecione a ferramenta de corte. Se você não vir isso, vá para as ferramentas da janela para se certificar de que o painel Ferramentas esteja visível. Em seguida, no topo. Precisamos definir um tamanho de corte predefinido. Vamos torná-lo 300 p x por 300 p x e 72 p p i ou pixels por polegada. Certifique-se de colocar P X. Caso contrário, ele pode adicionar eu terminar por polegadas e que criar um arquivo enorme. Se você não tiver essas opções, certifique-se de que ela esteja definida como W ex H resolução, que significa que com por altura por resolução, observe que a área de corte é um quadrado. Isso é o que queremos. Para este exemplo, eu não vou centralizar o balão como eu acho que ele fica melhor usando a regra de terços para composição. Basta clicar dentro da área aqui e, em seguida, clicar e arrastar para mover a área de corte ao redor. Também podemos clicar e arrastar o canto para ajustá-lo. Notei o tamanho e pixels para o lado lá pela seta. Queremos ter certeza de que não vai abaixo de 300 pixels, porque então ele está tornando a imagem maior do que a área original, o que pode causar picaretas. Exaltação. Não queremos fazer imagens maiores do que o original, apenas menores se necessário. Então algo assim, e podemos clicar duas vezes dentro desta área para aplicar a colheita. Oregon Pressione enter no PC um retorno no Mac ou pressione a marca de verificação na parte superior. Então agora temos nossa imagem redimensionada e cortada. Precisamos salvá-lo como um novo nome de arquivo. Então eu vou dizer isso como um balão de página inicial um ponto j. Peg só tem um arquivo salvar como em vez de apenas salvar, então nós salvá-lo como um novo arquivo. Queremos repetir esse processo para as outras duas imagens. Vou fazer isso um pouco mais rápido. Já que é o mesmo processo, vamos garantir que a composição seja eficaz. Vamos salvar isso como balão de página inicial para Nós sempre queremos usar hífens ou sob marcadores em vez de espaços e nomes de arquivos e Web design e codificação. Nós não queremos usar espaços independentemente de se tratar de um arquivo HTML no arquivo de imagem ou mesmo de um diretório. Em vez disso, use hífens ou sublinhados. E a terceira foto, Let's Crop. Definitivamente queremos que esta área esteja na imagem e, em seguida, salve como balão de página inicial. Três. Tudo bem, lá vamos nós. Agora vamos colocar o do no site para que tenhamos imagens consistentemente dimensionadas, abra o arquivo Muse e clique duas vezes na página inicial. Em seguida, vamos selecionar essas três imagens, mas eu primeiro clicando fora para o lado para ter certeza de que nada mais está selecionado, em seguida, clicando nessas três imagens enquanto mantém a tecla shift, basta excluir ou retrocesso no teclado. Agora vamos para o local do arquivo e colocar as três imagens, como anteriormente, podemos usar a tecla de controle ou comando novamente, ou, ou, neste caso, mudar, uma vez que eles estão próximos um do outro. Ou podemos simplesmente clicar e arrastar para selecionar todos os três cliques abertos. E sabemos que estes são o tamanho correto para começar, então não precisamos clicar e arrastar, Mas basta clicar, em seguida, usando a ferramenta de seleção. Vamos alinhá-los com o espaçamento consistente entre eles e notar. Temos 24 pixels entre cada um deles agora, mas não corresponde aos das bordas. Então, o que poderíamos fazer é clicar em um desses e aparecer era o seu redimensionamento. Temos a largura e altura onde podemos apenas digitar. Também podemos afetar o eixo X e y. Na verdade, é onde é colocado, certo? Então, antes dissemos que teríamos 25 25 25 25 25 e então cada um seria 300 porque isso é 900, então mais 4 20 5 é 1000 Exatamente. Então vamos colocar este um 25 e entrar e, em seguida, clique neste. Então, se tivermos 25 e depois três, e isso é 3 25, então mais outro, não são 3 50, certo? Então é clique redimensionar apenas isso por dois pixels. É um pouco fora e, em seguida, 3 50 mais este aqui vai ser 6 50 mais outro 25 que B 6 75 Então vamos em frente e certifique-se de que você clicar sobre este e ir para 6 75 Enter. Lá vamos nós. Então, se clicarmos neste, vemos que são 25 pixels da borda lá, o eixo X. Nós clicamos neste que era de 350 e clicamos neste. Isso é 6 25 Isso é se os guias inteligentes não são automaticamente fazê-lo com tudo o mesmo. Nós também podemos ir para uma linha e, em seguida, distribuir uniformemente bem, e vamos rever isso um pouco mais tarde. Mas para este, só quero mostrar-te a movimentação manual. Aqueles com a opção de redimensionamento aparecem não apenas redimensioná-lo. Também podemos ajustá-los. Nós também podemos girá-los também Nós vamos refixar mais tarde no curso para e sob o redimensionamento aqui que diz, Responsive dentro da altura. Então você vai notar se eu for pré-visualizar enquanto eu redimensioná-lo. Muda o tamanho dessas fotos, certo? Então, abordaremos mais sobre design responsivo mais tarde no curso. Obrigado, e verei na próxima lição. 16. 4.6 - Como adicionar imagens usando bibliotecas do CC e Duplicação: outra maneira de adicionar imagens a um site e musas para usar bibliotecas da Creative Cloud. A coisa legal sobre bibliotecas é que podemos usá-los em vários programas adobe. Podemos adicionar elementos como imagens, pincéis, cores e mawr e depois usá-los em vários programas. Podemos adicionar uma foto da loja de fotos e usar e musa, e podemos adicionar uma imagem do ilustrador e usando um Photoshopped. Muitas vezes, é mais conveniente do que copiar e colar ou colocar. Por exemplo, eu tenho os balões de arquivo, hífen em camadas PST aqui, abertos nas bibliotecas de janelas Goto do Photoshop para exibir esse painel. Eu tenho alguns itens aqui do projeto, algumas cores e um tema de cores. Por exemplo. Vamos criar uma biblioteca especificamente para este projeto, então clique aqui onde diz minha biblioteca e clique em Criar nova biblioteca. Vamos chamar isso de balões e site Beyond, e podemos arrastar e soltar ativos, como fotos, ilustrações e assim por diante. Ou podemos usar botões na parte inferior do painel da biblioteca com a camada superior selecionada no painel de camadas. E se você não tem isso, só tem camadas de janela. Clique no sinal de adição na parte inferior esquerda do painel da biblioteca, e precisamos desmarcar a cor do primeiro plano porque neste exemplo, nós só queríamos adicionar um gráfico. Então deixe gráfico marcado e clique em adicionar, e agora temos nosso primeiro item na biblioteca e imagem. Vamos repetir isso para as outras duas camadas. Selecione a camada jpeg de nove pontos de balão e renomeei essas camadas para corresponder ao arquivo de imagem de onde elas são. Clique no sinal de adição novamente e indique que estamos adicionando o gráfico. Se quisermos ver essa camada enfraquecer, alterne o ícone I no painel de camadas da camada acima dela, e adicionaremos a terceira camada como um gráfico também. Agora que adicionamos três imagens raster ou fotos à biblioteca, vamos colocá-las em nosso site e musa. Clique duas vezes na página sobre. Vamos ter um retângulo para esta área e configurá-lo para cerca de 1000 pixels de altura em 100% com Nós vamos ter três imagens no lado direito aqui e um livro didático aqui à esquerda. Mais tarde, neste painel de bibliotecas cc, há nossa biblioteca. Criamos balões e website Beyond. Se clicarmos com o botão direito do mouse no PC ou clicar no Mac, ele nos dá algumas opções, como renomear ele nos dá algumas opções, , duplicar ou excluí-lo da biblioteca. Mas precisamos adicioná-los a este layout, então clique no lugar vinculado que irá transformar o triturador em uma visualização da imagem. E para este layout, vamos colocar a imagem está alinhada uma com a outra e no lado direito, não o espaçamento para ser consistente e para ter certeza de que eles estão alinhados e você verá que precisamos trazer isso um pouco para baixo. Então vamos trazer este retângulo para baixo como tão passado 1000 apenas para que estes se encaixem lá, e nós também precisamos fazer com que eles tenham algum espaçamento consistente. Lá vamos nós, e isso é importante. Vamos certificar-nos de que essas imagens estão localizadas na camada correta. Caso contrário, clique e arraste-os para a camada de conteúdo principal. Também adicionaremos cores à nossa biblioteca na seção sobre cores efetivas em Web design. Agora, antes de passarmos para a próxima lição, outra maneira de reutilizar ativos, como imagens e musa, é duplicá-los. Por exemplo, podemos ir para a página inicial e manter a tecla Shift e clique em cada uma dessas imagens aqui podemos, em seguida ir dedo do pé editar cópia, que é o controle C no PC ou comando. Veja no Mac para que o conteúdo esteja na área de transferência. Em seguida, podemos navegar para a página de contato. Vamos desenhar duas áreas de elementos ou áreas de conteúdo com a ferramenta de retângulo. A parte superior é onde vamos colocar o conteúdo do texto mais tarde com as informações de contato . Os retângulos inferiores. Onde vai acompanhar essas três imagens? Então vamos fazer o topo com cerca de 300 pixels de altura em 100% para a largura e o retângulo inferior. 330 pixels tom e 100% para a largura. Então vamos editar colar e então vamos ajustar. Disseram lá. Há alguma consistência no espaçamento aqui, e lá vamos nós. Poderíamos ajustar isso manualmente também. Mas acho que parece divertido. E vamos navegar até o painel de camadas e verificar se esses objetos estão no conteúdo principal posteriormente. Esperemos que, agora você entenda as várias maneiras de adicionar imagens ao seu site, incluindo a definição de um fundo de uma forma colocando arquivos adicionando imagens a uma biblioteca e, em seguida, adicionando-as ao seu site e duplicando. Uma vez que adicionamos um grande número de imagens ao site até agora, vamos pré-visualizar e certificar-nos de que tudo parece certo. Até agora, a idade em casa parece boa. Até agora, a página sobre parece boa. Observe que a cor na parte superior e inferior passa por todo o caminho. Isso é o que queremos para este projeto, e a página de conteúdo parece boa. Adicionaremos hiperlinks e navegação mais tarde e testaremos isso visualizando o site em um navegador da Web também. Obrigado, e verei na próxima lição. 17. 4.7 - Como criar e adicionar imagens de PNG transparentes: Nesta aula, você vai aprender como criar uma imagem parcialmente transparente caso queira colocar algum elemento em cima de outro elemento em uma página da Web. Ter o plano de fundo mostrar em parte da imagem para que possamos usar um GIF para uma imagem parcial e transparente. Mas essas só têm duas ou 56 cores disponíveis, então essas são melhores para dizer GIF animado como um gráfico de cinema. Algum tipo de animação é preferível usar PNG, porque esse é outro formato de imagem que podemos usar o design online para a tela que não se limita a 256 cores. Então vá em frente e abra a loja de fotos e abriu um dos arquivos de suporte na pasta de alta resolução , e vamos criar rapidamente um PNG transparente aqui. Então, se você fizer a ferramenta de seleção rápida, basta selecionar aqui no painel de ferramentas, e nós temos o pincel aqui. Se você ver apenas o sinal de adição, pressione o cap lock para se certificar de que é uma pré-visualização do pincel e pressione o suporte do lado direito no teclado. Ou você pode ajustar o tamanho aqui em cima também. Mas, independentemente, quer um bom tamanho de escova. Na maior parte, queremos selecionar este objeto aqui. Tudo bem, alguém um clique e arraste tem uma borda muito definida, então isso é muito bem, há muitas maneiras diferentes de selecionar as coisas no Photoshopped. Estou pressionando o suporte esquerdo para torná-lo menor, direita, destruí-lo para torná-lo maior. Então, isso é provavelmente bom o suficiente para este propósito deste tutorial. Vou segurar no PC ou escolher o Mac e isso vai subtrair. E se quisermos ser muito exigente, temos zoom no controle ou entrar mais e menos e realmente ajustar isso, por exemplo, por exemplo, eu poderia usar a ferramenta de laço e Ault clique e arraste opção mais antiga e, em seguida, se você segurar shift, sua vantagem, então adicione a ele para que possamos usar as diferentes ferramentas de seleção em conjunto uns com os outros para obter uma seleção realmente relevante lá. Tudo bem, então isso é muito bom quando um zoom out e então nós temos Ah, a vantagem aqui no que nós faríamos realmente vai e isso um pouco mais. Lá vamos nós. Ok. Não queremos excluir pixels. Queremos usar uma máscara, que é edição não destrutiva. Então o que, nós podemos dio Nós poderíamos realmente pressionar o controle J ou o comando J no Mac. E acrescentaria que em uma nova camada enfraquecer tuggle a visibilidade lá. Mas outra maneira é apenas adicionar uma máscara na parte inferior do painel de camadas. Suprime isso e isso adiciona uma máscara. E basicamente, se eu pintei, digamos, preto, ele apaga. Certo, vou controlar ou comandar Z para desfazer isso. Se eu pintar de branco, ele traz o conteúdo da foto original que a camada de volta. Certo, mas o padrão quando tínhamos a máscara é bom. Então agora temos uma imagem parcialmente transparente. Se dissermos isso como um J peg, vai achatá-lo, e vai adicionar uma cor de fundo. Então isso não seria parcialmente transparente se salvarmos como um JPEG, não queremos dizer que é o J peg. Queremos definitivamente dizer que como um PNG então arquivo salvar como, em seguida, mudá-lo para P e G. E eu vou salvar isso em fotos alta rez. Eu ia chamá-lo de transparente para pessoal transparente me perguntando ponto PNG e depois o padrão aqui. Isto é divertido. Certo, agora de volta, Muse, não vou incluir isso no site final, mas só quero mostrar o que pode. Dio vai para a página inicial e se eu tiver um arquivo e então há transparente e aberto e eu posso clicar e soltar, eu vou redimensioná-lo para que possamos ver melhor aqui novamente. Não quero redimensioná-lo na loja de fotos. Nós vamos torná-lo um tamanho diferente porque loja rodapé é muito eficaz em re amostragem. Mas só estou mostrando isso como um exemplo. Então isso é provavelmente transparente para que possamos ver o fundo, certo? Para que possamos colocá-la em qualquer lugar. Então eu só queria mostrar que no caso de você ter em seu projeto, você quer uma imagem parcialmente transparente novamente. Basta mascarar esses pixels, salvá-lo como um PNG, e então podemos colocá-lo em nosso site 18. 5.1 - Harmonia de cores no design na web: em Web design. Assim como em qualquer área de design gráfico, cor é muito importante. Podemos alterar a cor de fundo de toda a página ou páginas. Também podemos ajustar a cor de áreas específicas do site, incluindo o texto de navegação e outras áreas, como bordas em fotos. Queremos que essas cores correspondam à marca do cliente, e também queremos obter cores que se harmonizem e fiquem bem umas com as outras. Para consistência de design e branding em todas as páginas. E para a estética, precisamos formular um esquema de cores. Existem muitos tipos de esquemas de cores, mas duas maneiras principais de harmonizar a cor é criar um esquema de cores complementar ou um esquema de cores análogo. As cores complementares são opostas nas rodas de cores, e as cores análogas estão próximas umas das outras nas rodas de cores. Vamos rever algumas maneiras de criar esquemas de cores, mas uma maneira realmente eficaz é usar a cor adobe. Basta navegar para colorir dot adobe dot com. Este é um esquema de cores análogo, que significa que as cores estão próximas umas das outras na roda de cores. Aqui podemos clicar e arrastar a cor base aqui ao redor da roda de cores para ajustá-la. Também podemos clicar e arrastar cores específicas para ajustá-lo ligeiramente ou clicando e arrastando os níveis para baixo. Aqui. Podemos ajustar os níveis vermelho, verde e azul aqui, bem como quão escuro e quão claro é a cor. Esta lista os níveis RGB ou vermelho verde azul aqui. E este é o nosso código de cor decimal Hexi na parte superior, onde diz regra de cor. Vamos mudar isso para complementar. Essas cores são opostas na roda de cores, e podemos ajustá-las também. Há também algumas outras opções, tais como tons monocromáticos compostos e personalizados, que podemos realmente personalizar agora. E se já tivermos uma cor que gostamos e quisermos basear um tema de cores nela? Bem, volta e musa com a página principal aberta, eu selecionei a forma superior aqui em cima. Em seguida, se clicarmos na opção de preenchimento, podemos destacar, clicar e arrastar sobre isso e copiar o código e, em seguida, colar de volta na cor adobe para a cor base . Excluir que colá-lo e, em seguida, digite ou retornar, e isso é definido é cor baseada. Se você clicar em Os outros que definirão os outros serão a base. Se formos análogas mostrar o que quero dizer, se eu mover estes em torno da cor base permanece a mesma. Mas se eu definir esta é a cor base e se moveu ao redor. Os outros vão se mover com ele. Então eu colado São Hexi código de cor decimal aqui. Defina de volta para complementar. Certificar-se de que este é o conjunto da cor base análoga é muito bom para este esquema de cores. Mas vamos usar complementar para isso é que parece muito bom também. Se nós apenas os níveis RGB, isso vai mudar nossa cor base. Então não queremos fazer isso. Eu só quero deixar este um pouco mais brilhante. Então, em vez de mover os níveis de RGB, na verdade, eu vou apenas definir isso de volta para o nosso original e, em seguida, apenas ajustar o brilho aqui. Só quero tornar isto um pouco mais brilhante. Agora temos um esquema de cores que queremos teve para o site. Poderíamos copiar e colar os códigos de cor decimal Hexi das cinco cores aqui em um documento para trazê-los mais de 10 programa Adobe. Poderíamos tê-los para amostras e programas muito sadiq. Mas é mais fácil e conveniente para as bibliotecas UCC, assim como adicionamos alguns gráficos a uma biblioteca anteriormente. podemos adicionar cores, Tambémpodemos adicionar cores, portanto, certifique-se de que você está conectado à Creative Cloud. Se não apenas se inscrever aqui agora. Uma vez que temos o esquema de cores, como nós gostamos, vamos salvar vamos chamá-lo de cores primárias do site e salvá-lo em nossos balões e biblioteca do site Beyond. Podemos adicionar tags, por exemplo, azul, laranja, céu complementar brilhante e assim por diante. E se publicarmos este tema para explorar permite que outros designers gráficos e Web designers para encontrá-lo. Clique. Salvar agora significa que podemos ir para as bibliotecas CC janela e vê-lo. Se você não estiver conectado, certifique-se de fazer login na Creative Cloud que o programa Adobe APS. Também podemos procurar esquemas de cores na cor adobe. Clique em Explorer na parte superior, e podemos digitar palavras-chave como direita, azul alegre, laranja e assim por diante. Se quiséssemos adicionar alguns deles a uma biblioteca, nós simplesmente clicaríamos, salvaríamos e adicionaríamos a uma biblioteca. Então, isso torna realmente conveniente e útil para gerenciar cores e harmonizar cores em programas adobe, incluindo eu usar e a próxima lição irá aplicar essas cores em seu site. 19. 5.2 - como aplicar temas de cores no uso de bibliotecas do CC: Agora que temos um esquema de cores, vamos aplicá-lo ao nosso site no Muse. Vamos navegar até a página-mestre e para baixo na parte inferior. Vamos ajustar essa cor na parte inferior com a ferramenta de seleção. Basta clicar no retângulo. Em seguida, no painel Bibliotecas da CC, clique na cor para a qual queremos alterá-la. É assim tão fácil. Eu acho que a cor azul ligeiramente mais escura é mais sutil e menos distrativa do que as cores laranja aqui. E, claro, quando voltamos ao modo de planejamento, podemos ver que todas as páginas agora refletem essa mudança. Vamos analisar algumas outras maneiras de aplicar cores navegue até a página de contato. Vamos selecionar o retângulo aqui que configuramos sem traçado e sem Phil, uma NFL que altera a cor de fundo de uma seção da página da Web. Outra maneira de adicionar cor é adicionar bordas às fotos. Vamos navegar até a página sobre usando a ferramenta de seleção. Vamos clicar nas imagens aqui segurando o turno. Se ele não selecionar, vá para o painel de camadas e apenas direcione e clique nas caixas ao lado das imagens, podemos alterar a cor do traçado aqui, mas precisamos alterá-lo para uma cor específica do tema de cores. Então vamos abrir o painel de bibliotecas CC com as três fotos ainda selecionadas. Aviso. Se eu clicar em uma dessas cores, são apenas as configurações de preenchimento por padrão. Então vamos à direita. Clique no PC ou controle. Clique no Mac na cor definida do traçado. Agora vamos torná-lo maior e mais perceptível clicando no ar aparecem para aumentar o número. Esta é apenas mais uma idéia para adicionar cor a um site e, finalmente, na página inicial. Eu vou ajustar esta área inferior aqui para a laranja mais brilhante, já que eles terão um texto de chamada à ação e eu quero chamar os olhos para ele. Vamos ajustar a cor mais tarde também, mas eu queria rever brevemente algumas maneiras de adicionar a cor ao nosso site usando o tema de cores que criamos nas bibliotecas C C. Na próxima lição, você aprende mais algumas maneiras de formular temas de cores, e nós adicionaremos o logotipo ao site enquanto adicionamos cores a partir dele à nossa biblioteca 20. 5.3- outras maneiras de Formular temas de cores para sites: Nesta aula, você aprenderá mais algumas maneiras de adicionar cores a temas de cores ou bibliotecas em programas adobe. Uma maneira é usar cores de uma foto. Abra esta foto da pasta de alto risco no Photoshop. Se gostarmos desta foto e a estivermos usando de forma proeminente na primeira página, por exemplo, ou for um plano de fundo para várias páginas da Web, podemos adicionar cores a partir dela ao layout. Verifique se o painel de ferramentas está visível. Se não tiver ferramentas de janela, clique na ferramenta conta-gotas. Podemos clicar em uma área na foto, e ele irá amostrar esse pixel ou área de pixels, dependendo de nossas configurações aqui para que possamos obter uma média de cor ou apenas uma cor específica no ponto em que clicamos. Isso mudará a cor do primeiro plano na parte inferior das ferramentas de pagamento para a cor que clicamos . Ou podemos clicar na cor do primeiro plano no painel de ferramentas e, em seguida, passar o mouse sobre a foto para selecionar uma cor. Uma vez que uma cor, queremos usar este conjunto para a cor do primeiro plano. Acabamos de clicar no sinal de adição no painel da biblioteca e certifique-se de que a cor do primeiro plano esteja marcada e clique em. Adicionar Agora Poderíamos usar esta cor em nosso site e musa. Ou podemos usar como uma cor base na cor adobe usando o código decimal Hexi, assim como fizemos anteriormente. E cor adobe com o código de cor da área superior do site. Podemos, é claro, adicionar várias cores de uma foto para garantir que elas fiquem bem juntas. Claro, poderíamos apenas mudar a cor do primeiro plano e depois adicioná-la à biblioteca. Outra maneira de harmonizar a cor é usar o painel Guia de cores do Adobe Illustrator também irá adicionar uma cor do logotipo da pasta de identidade visual dos arquivos de suporte, abrir balões e além do logotipo dot ai, um ilustrador e, em seguida, ir para a janela guia de cores. Se ele ainda não estiver aberto, colete a ferramenta de seleção no painel Ferramentas e clique na forma do balão. Clique na cor no canto superior do painel guia de cores para definir a cor base para a cor atual selecionada. Em seguida, clique na seta para baixo aqui à direita, e um monte de temas de cores diferentes são listados com base nessa cor. Há cortesia, análogo e assim por diante. Se fizermos outra forma, podemos adicionar uma cor que corresponda a este tema de cores. E, claro, podemos adicionar essas cores à biblioteca para o nosso projeto. Usando o painel da biblioteca, podemos até adicionar outros tipos de elementos, como estilos de caracteres, estilos de parágrafo e pincéis, etc. Mas não precisamos fazer isso para este projeto. Por enquanto, estamos nos concentrando em gráficos e cores. Falando nisso, vamos em frente e adicionar outro gráfico à biblioteca. Poderíamos copiar e colar ou colocar este ilustrador arquivando-os. Use navegadores da Web não exibem um arquivos de saída, que é o formato de arquivo padrão para ilustrador, mas poderíamos convertê-lo em Raster ou pixel baseado aqui ou na loja de fotos, ou colocando-o em musa. Mas outra maneira de fazer é adicioná-lo à biblioteca, especialmente um gráfico como um logotipo, que pode ser usado mais de uma vez em um projeto de site. Vamos selecionar tudo isso clicando e arrastando ao redor das formas e do texto, e então vamos clicar e arrastá-lo para a biblioteca. Chama-se Artwork 1. Então, vamos clicar duas vezes nele e nomeá-lo logo, em seguida, no Muse, vamos navegar para a página-mestre e, em seguida, vamos para a direita. Clique em PC ou Controle. Clique no Mac e clique em Colocar vinculado. Vamos clicar aqui e redimensioná-lo, e vamos certificar-nos de que está na camada correta. Nós, é claro, também poderíamos redimensioná-lo na loja de fotos se quiséssemos. Mas isso é bom para este exemplo. E vamos pré-visualizar isso em um arquivo de navegador. Página de visualização no navegador. Esta é a página-mestre , é claro, então nós não temos os outros elementos ou páginas aqui, e nós ainda não adicionamos a navegação ou notar que o redimensionamento da imagem é, mas então ele também muda de estar perto do borda e não tão perto da borda. Podemos resolver isso também quando fixamos em imagens de posição e ajustar a capacidade de resposta do site, também. Obrigado, e eu vou ver na próxima lição 21. 5.4 - como usar gradiente e outros efeitos: até agora, quando adicionamos cores, adicionamos cores sólidas. Às vezes, um Grady int pode parecer agradável, mas é um dos efeitos que também pode parecer um pouco pouco pouco profissional. Nesta aula, você vai aprender como adicionar e ajustar Grady INTs e alguns outros efeitos para que pareçam profissionais. Vamos navegar para a página de direções e desenhar um retângulo para o nosso conteúdo aqui para que possamos adicionar um fundo Grady int para o conteúdo irá adicionar mais tarde. E, claro, queremos ter certeza de que estamos na camada de conteúdo principal. Vou definir isso para você 500 pixels de altura por agora e 100% com cima no topo onde temos Phil . Vamos clicar na palavra Phil. Então, temos este menu. Vamos chamá-lo de Grady Int. Ingredientes podem parecer um pouco pouco pouco profissionais e não tão esteticamente agradáveis. Ele pode ajudar a ajustar as duas cores que ele usa para ser cores análogas ou cores que estão próximas umas das outras apenas para a transparência ou opacidade. Será que você apenas os números aqui e este controla se o int Grady é ou não horizontal ou vertical, Então, neste exemplo, nós poderíamos ter um nascer do sol ou algum tipo de efeito que se parece com o céu, e isso controla o ponto focal. Se você ir embora para a esquerda, em seguida, mawr desta cores visíveis e figura um caminho para a direita e mais de que cores visíveis. Então, por padrão, está em 50%. Isso é apenas manter o tamanho que automático que poderíamos fazer fixo e ajustá-lo de maneiras diferentes , mas isso vai dedo quase tem o mesmo efeito que o ponto focal, onde você tem mais de uma cor em oposição à outra cor. Então faça automático. Não seja distribuído uniformemente. Vamos rever brevemente mais alguns efeitos. Navegue até a página inicial e, com a ferramenta de seleção, clique em uma das imagens com a parte superior. Podemos ajustar a opacidade, ou como fotos opacas ou não transparentes e outros gráficos são. Basta clicar e arrastar isso para um número para ajustar a capacidade. Vou voltar a 100% porque não queremos que estes eleitores sejam parcialmente transparentes. Clique em efeitos ao lado do controle de opacidade. Aqui temos três efeitos. Sombra, bisel e brilho. O efeito de sombra, ou às vezes chamado de sombra, pode parecer um pouco pouco pouco profissional, se não for feito de forma sutil. Reduzir a distância e o borrão pode ajudar a torná-lo mais sutil e eficaz se quisermos que uma foto se destaque do fundo, mas não pareça pouco profissional. O efeito de bisel também pode parecer pouco profissional, embora existam alguns clientes onde seria relevante para a sua marca. Nós apenas não queremos exagerar, e brilho é semelhante e então ele pode parecer pouco profissional, mas pode ser relevante para algumas marcas. Podemos ajustar a cor e torná-la um brilho interno, e é apenas o passe A, iti e borrão do efeito também. Espero que você tenha aprendido muito até agora sobre a adição de cores que parecem boas para um site, e a próxima seção irá adicionar a cópia ou texto ao site. Depois disso, irá adicionar a navegação e, em seguida, adicionar alguma capacidade de resposta a ele. Portanto, parece bom e é legível em vários dispositivos e de vários tamanhos. Obrigado, e eu vou ver na próxima lição 22. 6.1 - Como adicionar texto ao seu site no Adobe Muse: agora precisamos adicionar o texto ao nosso site, abrir o documento de texto chamado Introdução, e eu incluí tanto um documento do Word quanto um arquivo RTF. No caso de alguns alunos não terem acesso a uma palavra, vamos copiar a primeira frase dos textos para que ela fique na área de transferência no Muse. Abra a página inicial e selecione a ferramenta de texto. Clique e arraste uma caixa de texto na área aqui e certifique-se de que ela está definida para 100% com por enquanto, mesmo que possamos ajustá-la mais tarde, dependendo do layout dela. Agora vamos colar o texto. Podemos ajustar o tamanho do tipo até o topo, e você também pode centralizá-lo. Se a sua janela é um pouco maior, só depende de quão grande é a nossa janela musa. Se essas opções não estiverem lá, como a esquerda direita, centro de justificação completa, você também pode ir para a janela e, em seguida, texto. E há mais algumas opções aqui, mesmo se tivéssemos maximizado para toda a tela. Isso tem algumas das mesmas opções acima do topo no painel de controle, mas alguns Maura bem e será formatar o texto na próxima lição para. Mas por agora, vamos apenas centralizar isso e nós também vamos Teoh pressione Return ou enter e digite. Saiba mais, e isso será um link mais tarde para a página sobre. Em seguida, copie todo o texto no arquivo de introdução e adicione uma caixa de texto na página sobre. É bom ter espaço negativo, especialmente nos lados dos projetos, em vez de espaço negativo preso. Mas vamos reduzir um pouco esse texto, tornando-o um pouco maior. Claro, vamos garantir que as fotos retangulares da área de conteúdo e o ar da caixa de texto na camada de conteúdo principal . Em seguida, vamos adicionar uma área de elemento para o conteúdo na página de perguntas. Certifique-se de que vai para 100% com vamos precisar de um pouco de espaço para as perguntas. Então vamos arrastar isso um pouco. Claro que sim. Verifique se ele está na camada de conteúdo principal da caixa de texto. Vamos usar a ferramenta de texto e configurá-lo para ir do meio desta coluna aqui em outra coluna copiar e colar. As perguntas mais frequentes. Vamos ajustar o espaço abaixo, Tudo bem, Não se preocupe com a formatação já que vamos fazer isso. Em seguida, será adicionar estilos ao texto para hierarquia e diferenciar parte do conteúdo. Vamos navegar até a página de contato. Copie e cole. As informações de contato serão formadas mais tarde, mas por enquanto, licious certifique-se de que o texto está lá. Ainda precisamos adicionar algum texto do Tipo dois, como títulos ou cópia para a página Direções. Mas todo o texto dos arquivos de suporte foi colocado. Na próxima lição, você aprenderá como formatar o texto para obter legibilidade e design efetivos. 23. 6.2 - formatação no site no Adobe Muse: agora que jogamos parte do texto no site, vamos em frente e formatá-lo. Clique duas vezes na página inicial para abri-la no modo de design, selecione a ferramenta de texto e destaque este texto. Aqui Temos algumas opções de estilo na parte superior do painel de controle, como ajustar a fonte, o tamanho, a cor e outras opções, como tornar o texto em negrito, itálico ou sublinhado ir para janela texto. Podemos deixar um centro de linha, escrever uma linha ou justificar texto completo. Rastreamento é o espaçamento horizontal entre letras e uma frase de palavra ou parágrafo, e deixar é o espaçamento vertical entre linhas de texto. O recuo da primeira linha pode ser ajustado aqui de volta no painel de controle. Nós também podemos apenas listar opções em estilos de parágrafo aplicados, que irá passar mais tarde. Mais algumas opções no painel apertado incluem definir o texto como maiúsculas e minúsculas, adicionar sobrescrito ou subscript e também adicionar margens para espaçamento à esquerda ou à direita do adicionar sobrescrito ou subscript e também adicionar margens para espaçamento à esquerda ou à direita do texto, espaçamento antes ou depois de parágrafos em para diferenciar entre os parágrafos. Se não houver espaçamento no estilo, então não precisa ser inserido manualmente espaço com retornos após cada parágrafo adicionado com a tecla de retorno ou enter ou uma primeira linha em den com a linha destacada, Vamos mudá-lo dedo do pé todas as tampas para o texto para ser maior. Vamos mudar o tamanho para 24. Vamos fazer backup do texto aprender mais, não haja uma linha completa de espaço entre ele e o texto acima dele. Basta pressionar, excluir ou retroceder com o cursor lá. Isso é um pouco perto do texto acima dele, entretanto, então vamos ajustar a deixar esta linha com a linha aprender mais selecionada ou o cursor piscando na linha em algum lugar, vamos aumentar a liderança de seus 20 por cento para 180% que no pouco espaço lá sem adicionar um retorno completo. Finalmente, vamos ajustar ligeiramente o rastreamento neste texto. Com o Senado selecionado, vamos aumentar o rastreamento de 0 para 1. Então vamos trocá-lo de volta. Eu só quero te mostrar o que isso faz coração. Vamos fechar essa página do modo de design e clicar duas vezes na página sobre para abri-la no modo de design. Vamos mudar este texto para o tamanho 12 por enquanto, que possamos ver tudo na tela. Este texto tem espaços manuais entre os parágrafos. Mas e se quiséssemos ajustar esse espaçamento teria que entrar e ajustar manualmente a esquerda ou o tamanho entre os parágrafos, que pode ser bastante pesado. Podemos adicionar espaçamento entre parágrafos e depois ajustá-lo mais tarde facilmente, o que é muito mais fácil e economiza tempo. Vamos remover manualmente essas quebras de linha para que os parágrafos não tenham espaço manual entre elas . Então vamos selecionar esses parágrafos e em um espaço após os parágrafos, então espaço depois. Vamos levar isso para 12 agora. Se quiséssemos ajustar o espaçamento e enfraquecer, basta selecioná-lo novamente e ajustá-lo. Vamos ajustar o tamanho do dedo 18 novamente e aumentar o espaço entre parágrafos também. Se tivermos um cursor na caixa de texto, podemos pressionar controle um no PC ou comandando no Mac para selecionar todo o texto. Eu vou apenas as primeiras palavras 224 para que eles chamem a atenção. Agora vamos ajustar um pouco do texto sobre as perguntas. Page sabe que as perguntas aqui não se diferenciam das respostas. Vamos ajustar as perguntas para que fiquem em negrito, apenas realce as perguntas e pressione o botão negrito. Claro, nós também poderíamos itálico ou sublinhado as perguntas, mas eu acho que puxá-los é bom para esta página que levou um pouco de tempo para jogar boliche. Apenas as perguntas, em um pouco vai realmente adicionar estilos de parágrafo para que possamos atribuir estilos. Dois textos diferentes na próxima lição serão sobre como mudar fontes e como adicionar Web bonds Obrigado. 24. 6.3- como alterar fontes e adicionar fontes na web: uma parte dos textos de estilo é mudar a fonte. A fonte certa pode ajudar a tornar um site mais profissional e ajudar com a legibilidade na página inicial. Eu tenho antena por padrão, como podemos ver no painel de controle no painel de texto. Se clicarmos nisso com algum texto destacado, ele irá trazer uma lista de fontes. Observe que há outros fundos listados ao lado desses nomes de fonte. Estes eram os fundos de reserva associados a esses fundos padrão. Se um navegador não tem antena do que poderia ter, Helvetica Carol é um reembolso sansei Sayings é francês para Sem o de, fundos não têm esses enfeites nas extremidades chamados servos. Podemos mudar esta frase duas vezes, o que é divertido da Sarah. Este fundo e fundos de contingência associados, como Times New Roman e Georgia, são todos fundos Sarah. Estas famílias de fontes de ar basicamente, várias fontes que parecem muito semelhantes ao dizer Sir fundos são muitas vezes usados para barras laterais, títulos e áreas de texto curto. Podemos usar parágrafos de surfista de areia e Web design. Mas para a página sobre, vamos tentar a família de fontes serif que tem vezes como a diversão padrão. É seguro supor que a maioria dos navegadores terá pelo menos um desses fundos nessas famílias de fontes . Então, é encontrar um design e lançar sites que usam Ariel, por exemplo, com fundos associados Fallback. Mas há outra maneira de usar fontes no Web design. Podemos adicionar fontes personalizadas a um site, e o Muse irá codificar as páginas para nós, que a fonte seja incluída. Os prós e contras para três maneiras diferentes de incluir ligações molhadas específicas serão incluídos nesta lição. Vamos destacar o texto na caixa de texto. Na página sobre, basta clicar na área com a ferramenta de texto e, em seguida, pressionar o controle e o comando PCR no Mac aviso no painel de texto que há uma opção aqui chamada fontes Web. Temos os telefones padrão que devem estar nos computadores dos navegadores. Estas são fontes muito comuns. Em seguida, há fundos específicos que não são tão comuns, então eles são exportados como imagens de uso. Quando exportamos o site, esses fundos aéreos no seu computador que provavelmente não estão no computador de todos, então a Web se liga aqui. Se clicarmos, adicionar títulos da Web ou se obtivermos um arquivo adicionar remover fontes da Web. Vai para o mesmo menu. Existem três tipos de fontes da Web que podemos usar. Amusse auto-hospedado links Web só significa que podemos usar os arquivos de fonte do nosso computador no design e adicioná-los ao site. Isto é, se você comprou um fundo para este uso em um site de fontes. Por exemplo, as fontes da Web do Edge podem ser usadas da Adobe mesmo sem uma assinatura da Creative Cloud. Mas precisamos de nuvem criativa, pelo menos para esta versão do Muse e, em seguida, digite kit. As fontes da Web exigem a assinatura da Creative Cloud Clique em começar. E se tivéssemos um arquivo de fonte, poderíamos carregá-lo aqui com uma aba auto-hospedada selecionada. Mas vamos usar uma fonte do kit de tipos. Se percorrermos aqui, ele lista todas as fontes, mas vamos clicar em Filtro passar o mouse sobre elas, e ele deve trazer dicas de ferramentas. Tal mostrando que estes ar areia surf estes serif laje serif ar script preto letra mono espaçado, que apresenta um fixo com de caracteres escritos à mão ou feitos à mão, bem como decorativos. Ele também delineia entre fontes recomendadas para parágrafos ou títulos, bem como algumas outras opções aqui em baixo, Então eu vou selecionar recomendado para parágrafos, areia, surf e peso regular. Alguns deles enfraquecem selecionar mais de um, e podemos clicar neles novamente para alterná-los. Em seguida, podemos percorrer eles com as opções de filtro. Queremos a diversão para combinar com a marca do cliente para que alguns desses não façam sentido. Vamos selecionar este Latour Lotto, o que quer que seja e clique em OK, Isso traz a caixa de diálogo adicionando fontes da Web. Agora que ele foi adicionado, podemos alterar o texto realçado e vamos escolher o meio. Usar famílias de fontes padrão é bom, mas usar fontes personalizadas como aquelas do kit de tipos é útil porque então incorporamos fontes específicas no site. Não precisamos converter fontes personalizadas em imagens. Podemos usá-los como parte do texto do site porque a fonte é parte da codificação do site . No entanto, com o tipo obter fundos, há uma consideração de visualização de página para olhar. Se o seu site se tornou viral ou teve um monte de hits, então isso poderia levar a mais cobranças no licenciamento, acordo com este site no adobe dot com, sua visualização de página. Os limites no kit de tipo variam de acordo com o plano. Se você exceder as visualizações de página para seu nível de plano, você pode ser responsável pelos custos médios, isso é importante verificar isso antes da publicação e da música. Então, se tivermos Creative Cloud como parte disso, obtemos um monte de fundos diferentes sob kit tipo. Mas há uma página de seu limite. Então, se você tiver mais do que esse número de uso, então há possíveis cobranças. Fontes da Web servidas pelo Adobe Type Kit Usage Rights Limited e clique em Saiba mais e você tem o contrato. Então eu sugiro usar as fontes padrão, como o sansei aéreo, nossa família ou as vezes sua família. E se usarmos fontes personalizadas, comprá-los por uma taxa única de um site de fontes e no licenciamento, certifique-se de que você pode usar a fonte em um site, e ele não tem uma restrição em um número de visualizações de páginas da Web por mês. Isso seria semelhante ao uso de uma foto stock que compramos em um site que criamos, ou poderíamos usar telefones que não exigem uma assinatura. Mas as fontes ainda estão hospedadas em outro lugar. Então, enquanto eu acho que fontes da Web podem ser úteis, como no tipo portão ou borda fundos da Web, sua melhor prática para usar uma fonte comprada ou livre que tem uma licença com ele que nos permite usar esse site interno do fundo e é realmente hospedado no servidor que estamos usando. E não há limitações de licença como faras. Se você receber um certo número de hits você realmente tem que pagar e, em seguida, ele não é hospedado em outro lugar, também. E falaremos sobre hospedar e ter os arquivos em nosso servidor mais tarde no curso novamente. Não temos de usar isto. Podemos usar os fundos padrão padrão, certo? Então eu poderia usar apenas Ariel nesta página e na página de perguntas, mesma coisa. Já o tenho na Ariel e na primeira página. Esta é a família Times e Ariel aqui embaixo. Eu só queria mostrar-lhe como usar fundos que ar a partir de adobes kit tipo e os fundos Web Edge , e é uma opção para usá-los. Mas, novamente, queremos verificar o licenciamento. Então, se não usarmos esses fundos padrão aqui que as pessoas que navegam no site devem ter em seu computador. Precisamos incluir esse arquivo de fonte no servidor que estamos usando se nós carregamos como um vínculo Web em vez de ter que usar kit tipo. Mas isso depende de você. Obrigado, e verei na próxima lição. 25. 6.4 - como usar estilos para consistência e Facile: Nós adicionamos muito do texto em nosso site até agora e pode parecer um pouco de um problema manter o controle de todas as mudanças. Precisamos de consistência no site para que, por exemplo, corpo copiar o texto que compõe os parágrafos seja consistente em todo o site. As manchetes devem ser consistentes, assim como outros tipos de texto. Consistência é um princípio de design eficaz, uma vez que parece melhor dedo do pé tem estilo consistente e formatação de texto em todo o site. Muitos sites e publicações têm guias de estilo que dão orientação não apenas em termos de consistência de escrita, mas consistências de layout e formatação, como o uso de uma fonte específica e tamanho para histórias sobre uma maneira eficaz de adicionar consistência para sites, é usar estilos de parágrafo, navegar para a página de perguntas e musa, e isso tem alguma formatação padrão do Ariel. Mas vamos em frente e ajustar isso para Helvetica ou podemos tentar vezes seus tempos romanos dela , eu acho, realmente seria realmente apenas disse isso. A antena deve estar bem em vez de 14. E vamos apenas fazer este 18 para o tamanho e vamos deixar o outro como padrão. Nós não queremos que este itálico em negrito, pelo menos queremos que o negrito para as perguntas e a cópia corporal das respostas sejam normais. Então, vamos selecionar isso. E enquanto este texto é selecionado aqui, clique em criar um novo estilo no botão de atributos aplicados e a formatação está aqui . É um estilo de parágrafo, e a fonte é Ariel, e o tamanho é 18. Agora podemos alterá-lo, dizer 12 e, em seguida, clicar nele e, em seguida, aplicá-lo. Então é assim que funciona. Uma vez que definimos nossos estilos e enfraquecemos, defina-o no dedo do pé. Ter certa formatação como negrito itálico sublinhar determinado tamanho, fundos diferentes. E depois há consistência. Então precisamos fazer um para cabeçalhos ou manchetes. Subheds. Possivelmente corpo cópia e sempre que o texto vai ser diferente do padrão e outras variações, como talvez um diferente para a pergunta. Como o presidente responde agora, se você não tem uma esquerda aqui, se você clicar nisso, saiba que não é se você passar o mouse lá, a ferramenta de texto que ele não tem esquerda. O que poderíamos fazer é dizer, Teoh, Teoh, trazer para cima no painel de texto aqui que poderíamos fazer é centralizá-lo e, em seguida, esquerda. Alinhe-o e ele o aplica. Tem essa vantagem. Então, se eu clicar com o botão direito para cima e colocar estilo redefinido que o redefine para este mais novo. Então, se eu selecioná-lo e eu tenho uma linha esquerda 18 d para parágrafo e, em seguida, Ariel para o fundo, então, se queremos que outro texto seja da mesma maneira, vamos dizer isso aqui em baixo. Waas Courier New e era 12 até mesmo uma cor diferente. Agora, se eu clicar no estilo de parágrafo, ele o torna exatamente assim para que não tenhamos que mudar. Após as alterações, Alteração de tamanho, Uma alteração à esquerda da formatação de alteração de cor. É tudo coletado em um estilo. Vamos clicar duas vezes nele e renomeá-lo corpo de cópia. Podemos ver a formatação há uma linha esquerda tamanho 18 estilo parágrafo nos fundos Ariel. E o legal é que não temos que deixar agora uma mudança de linha de mudanças divertidas, tamanho e qualquer outra formatação em etapas separadas para outros parágrafos. Queremos que o dedo do pé pareça igual. Podemos apenas selecionar um parágrafo e, em seguida, clique em corpo cópia no painel estilos de parágrafo. Então, se eu clicar nisso, eu posso aplicá-lo a todos esses. Para aplicar esse estilo, selecionei cada resposta com a ferramenta de texto. Mas e se não estivéssemos nos candidatando a toda a caixa de texto? Poderíamos selecionar todo o texto com a ferramenta de texto, ou poderíamos selecionar a caixa de texto com a ferramenta de seleção, em seguida, aplicar aviso que ele altera as perguntas também. Vamos consertar isso agora. Destaque a primeira pergunta e, em seguida, vamos torná-la em negrito. Bem é itálico. Ted é mais estiloso. Isso adiciona um sinal de mais ao lado do estilo no painel Estilos de parágrafo, indicando que uma alteração foi feita no texto realçado. Podemos clicar com o botão direito do mouse no PC ou Control Click no Mac. E além de algumas outras opções aqui podemos clicar em Redefinir estilo. Isso adicionaria essas mudanças que acabamos de fazer ao estilo, que mudaria todo o outro texto que tem um estilo vinculado a ele, que não queremos. Então eu vou desfazer isso com editar desfazer, e nós só precisamos pressionar o botão novo estilo novamente, que irá criar um novo estilo baseado no original. Mas com os ajustes quando eu clico na primeira pergunta, o novo estilo é destacado no painel de estilos de parágrafo, e quando eu clico na resposta, o estilo original é destacado no painel Estilos de parágrafo. Vamos renomear este novo clicando duas vezes sobre ele. Vamos chamá-lo de perguntas, e podemos selecionar as outras perguntas com a ferramenta de texto e alterá-las para o estilo de parágrafo perguntas . Agora, e se quisermos mudar todas essas perguntas para um tamanho maior, como 24? Bem, podemos alterar um deles manualmente e, em seguida, clique direito no PC ou Controle. Clique no maníaco aqui no estilo Pergunta e clique em Aviso de estilo redefinido que altera todas as outras perguntas também, pois todas elas estão ligadas ao estilo de parágrafo perguntas. Além da consistência, é aqui que estilos de parágrafo podem ser úteis. Podemos redefinir um estilo, e as alterações serão aplicadas em vários parágrafos ou páginas, o que economizaria muito tempo na página inicial. Podemos definir este título aqui como um estilo chamado título, e em vez de um estilo de parágrafo, vamos torná-lo uma manchete. Um. Uma vez que é uma manchete, se você estiver familiarizado com codificação HTML, você saberá que H um é o maior texto na faixa de H um a H seis h um sendo o título em H dois. Ao longo dos seis anos, os bancos tiveram, com seis anos sendo o menor. Isso é bom para um CEO em que estamos mostrando que essas manchetes aéreas principais idéias em uma página da Web . Vamos ajustar o texto para aprender mais assinando-o como um estilo chamado chamada à ação, com a fonte sendo Genebra e negrito. Vamos redefinir esse aviso que temos sua linha pontilhada inferior aqui recentemente apenas que é apenas o conteúdo está empurrando para fora daquela caixa original. Eu vou clicar e arrastar isso um pouco para baixo, então a caixa de texto tem espaço suficiente e eu também vou Teoh, dar a isso um pouco mais de espaço também. Apenas leve isso para baixo. Lá vamos nós, sobre a página sobre. Vamos fazer isso um pouco maior apenas para consistência. 24 pontos e vamos chamar este corpo de cópia promocional. Então, se tivéssemos outras páginas semelhantes, se expandirmos este site, poderíamos usar um estilo consistente, texto grande e agradável que é muito legível. Clique em OK e, na página de contato, vamos fazer a correspondência com a cópia do corpo promocional. Mas não queremos esse espaçamento extra entre parágrafos ou retornos, vez que cada linha aqui rua como um parágrafo por causa do retorno. Então vamos apenas ajustar isso no painel de texto e, em seguida, defini-lo como um novo corpo promocional de estilo . Copiar espaçamento zero. E vamos adicionar rapidamente alguns títulos às páginas e manter a consistência em todo o site . Então, vamos adicionar perguntas frequentemente vestidas. Vamos fazer isso com base na chamada à ação parágrafo stop. As balas ajustam o tamanho para ser 36 deixando Teoh 20% e vamos deixar uma linha. Se pressionarmos tudo no PC ou opção no Mac enquanto clicamos em criar um botão novo estilo, ele vai permite renomeá-lo imediatamente. Vamos nomear este título de página e vamos mover isso um pouco para cima. América. E na página sobre, vamos adicionar sobre nós na página de contato que nos contatar, e nós realmente queremos ter certeza de que há todo o espaço consistente no eixo X e Y Nós poderíamos olhar ou apenas ver e garantir que ele está bem no meio. Eu gostaria de olhar para o espaçamento vertical, mas isso parece bom. Bom título da página. Apenas entre as páginas, Quero dizer ter espaçamento consistente e colocação dos títulos e na página de direções. Certifique-se de que temos um retângulo aqui para a área de conteúdo. E vamos adicionar uma caixa de texto. Vamos ter direções e finalmente, na página das redes sociais. Certifique-se de que há uma caixa aqui para o conteúdo, e nós podemos torná-lo assim. Os títulos são consistentes em todo o site, alinhando-o com uma coluna ou guia, e falaremos sobre pintar objetos e posicionar objetos também mais tarde. Mas, por enquanto, acho que isto parece bom. Estilos de parágrafo realmente ajudar com consistência e manter o controle da formatação de vários elementos de tipo em um site. Eles fazem isso para que possamos fazer uma mudança no estilo, e então ele reflete em uma página ou em um site inteiro em várias páginas, e podemos fazer muitas mudanças no texto muito rapidamente. Uma vez que tenhamos configurado esses estilos, Obrigado e eu vou ver na próxima lição 26. 6.5 - Como adicionar e personalizar listas: Nesta lição rápida, você aprende como adicionar listas ao seu site. Podemos usar listas nas primeiras páginas de sites para mostrar quais serviços ou produtos existem de uma empresa. Poderíamos usá-lo na página de contato ou em outras páginas, mas neste projeto, vamos usá-lo na página de mídia social, que é uma página filho da página de contato. Então, clique duas vezes nele. No plano, Moto abriu a página de mídia social no modo de design. Como de costume, vamos adicionar um retângulo sem criminoso, sem traço a esta área, caso queiramos apenas definir, como cor de fundo apenas para esta área. Se você ainda não tiver um retângulo lá e com a ferramenta de texto, vamos clicar e arrastar uma área aqui. Verifique se eles estão no conteúdo principal posteriormente. Certo, vamos clicar aqui e digitar o texto. Conecte-se conosco. Então vamos digitar alguns sites de mídia social, que seriam links externos para páginas ou perfis da marca. Seja qual for o que acrescentarmos, não importa é apenas um exemplo. Vamos selecionar conectar com a gente e configurá-lo para um estilo de parágrafo de título, em seguida, para o texto aqui, vamos destacá-lo. E, em seguida, no painel de controle, podemos adicionar uma nova lista de pedidos ou ordenou Lis. Vamos selecionar o Lis ordenado para este exemplo. Vamos aumentar o tamanho para 24. Tudo bem, podemos adicionar isso como um estilo, digamos listas. Poderíamos ajustar a liderança acima dele com o texto do cabeçalho ou entre a Índia. Item na lista. Mas acho que isso parece divertido. Adicione outra lista que corresponda ao estilo. Poderíamos repetir todo esse processo, mas um atalho que está em muitos programas Dobie é duplicá-lo. Poderíamos copiar e colar, mas melhor ainda delicioso. Use a ferramenta de seleção e segure tudo no PC ou opção o mackin clique e arraste, e você pode segurar shift se você quiser mantê-lo alinhado, e podemos abordar o posicionamento tem necessário se pressionarmos shift e, em seguida, mudar e movê-los ao redor . Se você quisesse enviá-lo, por exemplo, assim seria divertido, então podemos ajustar o texto na nova caixa aqui. Foto e vídeo como essa área. M e o YouTube instagram de modo que é assim que adicionamos listas no Muse e novamente podemos fazê-los ordenados com números ou un ordenado. Se você olhar para o lado direito, trabalhar, diz balas, se você clicar que, que traz outro painel também. E estas são as mesmas opções aqui, um Nord e listas ordenadas que você também pode ver no painel de controle. Mas se eu clicar nisso, você vai notar que ele o move sobre em hierarquia diferente, diferentes níveis s para que possamos ter várias camadas em uma lista se quisermos com este recuo aqui, e você também pode apenas algumas outras configurações . Se eu reduzir isso, você pode ver que o texto se aproxima. O ponto da bala. Você pode trazê-lo de volta, e então a coisa toda se move se nós apenas isso. Então, se você puder dar a ela o padrão aqui seis e 28 então se quisermos consistente, ajuste isso. Isso só afeta se a aliança é ou não uma mudança vertical. Se eu pressionar para baixo, foram para cima, ele vai movê-los para cima ou para baixo em relação, então eu vou manter isso para o padrão para este exemplo, porque ele deve ser uma linha lá com o texto. Obrigado, e eu vou ver na próxima lição 27. 6.6 — envolvendo texto em torno de imagens: Se você usou em design ou até mesmo alguns programas de processamento de texto, talvez esteja familiarizado com a quebra de texto em torno de imagens no layout. Há uma maneira de fazer isso no Web design também. Até agora, colocamos ou duplicamos imagens ou as trouxemos do painel de bibliotecas da CC e colocamos ao lado de caixas de texto ou em suas próprias áreas abaixo ou acima do texto. Nesta aula, você aprende como adicionar imagens a uma caixa de texto e como envolver efetivamente o texto em torno das imagens no Photoshop que eu redimensionei das imagens de balão na pasta alta Res balão um ponto j balão pagão para ponto jpeg nos mews arquivo. Vamos abrir a página de perguntas no modo de design. Vamos adicionar algum interesse visual a esta página adicionando essas duas fotos a ela. Se queremos realmente controlar onde eles estão localizados na página gostaria de simplesmente colocá-los , por exemplo, por exemplo, se quiséssemos que eles aprendessem para a parte superior e inferior desta caixa de texto e uma coluna à esquerda da caixa de texto. Mas se queremos que o texto AC de uma forma mais fluida em relação às fotos para que o texto raps e flua em torno das fotos, podemos copiá-los e colá-los na caixa de texto si mesmos. Uma maneira de fazer isso é copiá-los e colá-los depois de colocá-los. Então Goto arquivo lugar selecionado Balão um aberto e eu vou apenas clicar porque ele já está no tamanho que queríamos estar, que é 400 pixels de largura. Observe que ele flutua aqui, embora possamos colocar fotos em cima de ataques e texto em cima de fotos ou ao lado. Mas, a fim de adicioná-lo a uma caixa de texto para que ele flua ao redor da foto, vamos copiá-lo e colá-lo na caixa de texto. Então, vá editar e copiar. Em seguida, podemos excluí-lo com as ferramentas de seleção ainda selecionadas. Enfraquecer clique duas vezes na caixa de texto aqui, ou apenas usar a ferramenta de texto. Ele irá mudar para o Type 12 3 Clique duplo com a ferramenta de seleção. Vamos clicar para colocar o cursor aqui, onde queremos que esta imagem esteja em relação ao texto. Então vamos dizer que o início desta linha ir para editar colar podemos excluir e, por padrão, o texto começa na linha de base desta imagem. Nós podemos obter a textura envoltório em torno dele melhor, entanto, então clique no painel rap aqui à direita ou simplesmente vá para a janela e depois embrulhe. Se selecionarmos com a ferramenta de seleção esta imagem aqui, você notou que existem três opções. Este 1º 1 é a posição padrão Objeto em linha com o texto. Então isso está agindo como um caractere, como uma letra ou número, por exemplo, apenas na linha do texto. Se clicarmos na próxima posição, objetivar os ataques à esquerda, então ele o envolve. Se clicarmos no 3º 1, então ele se envolve em torno dele. Mas é uma linha à direita. As imagens observam que não há espaçamento entre o texto e a imagem. Precisamos de melhor proximidade ou espaçamento, que é um princípio de design que eles têm em mente. Então vamos adicionar um pouco de espaçamento aqui. Podemos aumentar para 10. Para este exemplo, no entanto, eles estão todos presos juntos. Então, o espaço do anúncio no lado direito, no lado esquerdo, no topo da parte inferior. Se quisermos apenas espaço de um lado, precisamos desembaraçar esta corrente aqui e depois trazê-los de volta para o zero padrão e manter o lado direito em 10 lá. Agora, se isso fosse sobre a direita e fosse o oposto, poderíamos adicionar espaço no lado esquerdo em vez disso. Se isso foi um problema com o espaçamento, lá vamos nós. Vamos repetir rapidamente esse processo para inserir balão para se esquivar de uma cavilha. Se já estivesse na área de transferência de outro programa, poderíamos simplesmente colá-lo. Mas esta é uma forma de o fazer. Podemos apenas colocá-lo e, em seguida, editar cópia. Isso quer dizer que tínhamos o nosso cristão bem aqui. Então, quando ele ficar bom nisso, vamos alinhar isso à direita e depois adicionar algum espaçamento no lado esquerdo. Tudo bem, lá vamos nós. Vamos pré-visualizar. Isto parece muito bom até agora. Então é assim que envolvemos texto em torno de imagens e musa. Quando as imagens estão dentro de uma caixa de texto, muitas vezes colocamos imagens em seu próprio quadro de imagem e não como parte de uma caixa de texto. Mas é bom saber como fazer isso, caso queiramos ter algumas imagens dentro da área de cópia de alguém. O Tad. Algum apelo visual para um layout que eu vou ver na próxima lição 28. 6.7 - como usar a verificação de feitiço: Nesta lição rápida, você aprenderá sobre a verificação ortográfica no Adobe Muse agora. Esperemos a cópia que seu cliente envia para você ser o texto para os vários sites já tenha sido copiada. No entanto, se você estiver escrevendo a cópia para seu próprio site ou se você quiser ajudar a garantir que não há erros ortográficos no site do seu cliente, isso pode ajudar a ter a verificação ortográfica ativada. No Muse, semelhante a alguns programas de processamento de texto, Muse adiciona uma linha vermelha curva abaixo de todas as palavras que ele acha que estão erradas. Claro, muitas palavras são nomes próprios ou não estão mal escritas. Então, nesses casos, podemos adicioná-los ao dicionário para que não tenhamos esse ar. Observe que alguns destes têm a linha abaixo deles. Vá editar a ortografia e verifique se a ortografia dinâmica está marcada para ativar esse recurso. Se navegarmos para o dicionário do usuário, então podemos adicionar palavras aqui, outras maneiras de clicar com o botão direito do mouse no PC ou controle. Clique no médico no texto com a ferramenta de texto, e ele mostra o que Muse acha que essa palavra deve ser. Também podemos adicionar ao dicionário lá para que a linha não indique erros ortográficos essas linhas vermelhas não aparecerão no site. Independentemente disso, porém, quando exportamos e enviamos e eles não aparecem mesmo quando estamos visualizando e musa ou em um navegador da Web, é apenas para nos indicar que o Muse acha que as palavras estão erradas. Se não queremos essas linhas vermelhas e sabemos que todas as palavras estão escritas corretamente, ou se temos um editor de cópias verificando o texto ou verificando o texto para precisão manualmente, podemos desmarcar a ortografia dinâmica e isso removerá as linhas vermelhas. Eu sugiro verificar a cópia para precisão ortográfica, uma vez que palavras com erros ortográficos ou gramática incorreta ou pontuação também pode fazer um site parecer um pouco pouco pouco profissional. Obrigado, e eu vi a próxima lição. 29. 7.1 - Como adicionar de de: Agora que temos a maior parte do conteúdo nas páginas da Web, precisamos adicionar alguma interatividade a elas. Vamos ter alguns links para páginas internas e páginas externas ou sites para que as pessoas possam navegar pelos sites e páginas específicas na página inicial. Vamos usar a ferramenta de texto e destacar as palavras. Saiba mais. Podemos adicionar um link para uma página facilmente. Basta clicar em cima ao lado de hiperlinks o ar para baixo lá. Vamos selecionar sobre a página sobre. Também podemos vincular a um arquivo, por exemplo, se quisermos vincular a um arquivo PDF para download, caso em que clicaríamos aqui. São práticas recomendadas ter esse PDF e outras finais em uma pasta local já para mantê-lo organizado e para ter certeza de que está incluído quando carregarmos o site mais sobre isso mais tarde quando falamos sobre organização e exportação do nosso site. Mas para este exemplo, estamos apenas vinculando a uma página da Web interna que faz parte deste site. Quando as pessoas clicam em MAWR aprendido, elas navegarão até a página sobre a página sobre. O que está em um link de texto na parte inferior aqui. Digite tem alguma dúvida. Deixei com a ferramenta de texto. E então vamos fazer disso um link para perguntas. Vamos também adicionar um link para a página de instruções dentro do parágrafo na página de perguntas. Vamos adicionar algum texto na parte inferior que apontará para a página de contato. Preciso mover isso. Vê isto? Moldura de texto aqui. Definitivamente precisamos derrubar isso. É esse texto que passa por cima? OK, lá vamos nós. Se trouxermos isso aqui um pouco e este retângulo, vou trazer isso abaixo do quadro de texto. Lá vamos nós. Certifique-se de que isso é 100% com o texto empurrou o quadro de texto para baixo. Então nós só queremos organizar isso corretamente. Então temos a forma de retângulo e, em seguida, temos o quadro de texto a caixa de texto. Há então vamos adicionar algum texto na parte inferior que irá apontar para a página de contato. Finalmente, na página de contato, vamos adicionar links para a página de mídia social, bem como a página de instruções e tornar este um link de e-mail clicável. Basta realçar o endereço de e-mail e digitar macho para dois pontos palavra e, em seguida, o endereço de e-mail . Agora que temos algumas ligações internas. Vamos fazer com que alguns links externos naveguem até a página de mídia social. Links externos são links para páginas da Web ou sites que não fazem parte deste site que estamos projetando. Tínhamos esses links praticamente da mesma maneira. Exceto que nós digitamos o URL aqui em http dois-pontos barra, barra e, em seguida, o endereço. Para este exemplo, é Facebook dot com para barra e seria o Ural desta página marcas, em seguida, apertaria enter, em seguida, se tivéssemos um euro específico para este. Para uma imagem para digitalizar sendo isso é apenas não examinado toda a mesma coisa aqui. Eu, uh, este seria o perfil da veia media. Então, o que quer que você é tudo seria Amal coletado este homem sob, Entre em contato conosco se eu fizer pré-visualização e clique Isso foi tudo abrir um e-mail quando eu estou digitando isso . Eu não coloquei correspondência também, você sabe, e então inferir que essa é a maneira de revestir normalmente. Agora, se eu remover isso e apenas pressionar Enter, ele faz isso para mim. Tudo bem, então adicione esse moinho também. Uma maneira de garantir que o link é preciso é copiá-lo e colá-lo da barra de endereços do navegador da Web. E então, quando você está inserindo aqui, você pode simplesmente colá-lo. E em vez de digitar novamente, isso é se foi a página da marca real, claro, e é um mais longo seu URL enfraquecer. Basta acelerá-lo e depois isso. Certifique-se de que é preciso. Há outro tipo de link que podemos adicionar às páginas da Web. Podemos adicionar links para partes específicas de uma página e não apenas a própria página. Por exemplo, poderíamos ter todas essas perguntas no topo, e então se clicássemos nelas, isso nos levaria a essa pergunta específica. Responda na página. Não precisamos adicionar âncoras a este site, já que as páginas não são muito longas, mas é importante saber como fazer isso. E o que fazemos é clicar neste link âncora no painel de ferramentas. Então você clica nele e então nós navegamos. Então diga, você precisa de uma licença de piloto? Loira caçadora de moscas Então estas são todas as perguntas. Se o tivéssemos lá em cima hipoteticamente e depois clicássemos aqui, chamaríamos de pergunta de licença de piloto. Então, clique em OK. E agora se eu destacar isso para torná-lo um hiperlink em vez de vincular a uma página interna no site ou um site externo ou página, podemos realmente vincular Teoh. Está bem aqui em outras questões. Esta âncora e o que é necessário é que você pode realmente vincular a uma âncora em uma página da Web de outra página da Web para que possamos estar, digamos,em digamos, casa. E, você sabe, se eles têm uma pergunta específica, eles poderiam clicar sobre isso e ele iria carregar esta página para cima e rolar todo o caminho até essa pergunta. Então vou te mostrar o que quero dizer. Vou só fazer uma prévia. Não, meu clique Isso navega até aquela área que iria mais para baixo, mas não temos nenhum conteúdo. Aqui está então isso seria gentil no topo da página aqui normalmente, tudo bem, tudo bem, então isso é adicionar âncoras e revesti-los por apenas inserir seus links regulares. Mas em vez de uma página ou um site, é para um ponto de ancoragem. Então, é apenas ancora nossos pontos em uma página locais em uma página que podemos navegar Teoh. Então eu não vou salvar isso nesta página da Web. Eu só queria mostrar como fazer isso. Crianças que tinham um documento muito longo aqui e queremos que Teoh mostre como Teoh conseguiu isso. Então, como deletamos isso? Você sabe, você só clica lá, vê? Agora eu tenho. Podemos movê-lo também. Essa é a âncora na próxima lição irá adicionar um botão de rollover ou botão de estado dedo do pé. Adicione um efeito interessante a um link. Obrigado. 30. 7.2 - Como selecionar o conteúdo de forma eficaz, como adicionar de estado e alinhe os objetos: quando você toma conta ao tentar selecionar objetos e musa e vamos usar o botão de estado como um exemplo. O que é isso? Um botão aqui na parte inferior da página inicial que irá vincular à página de contato. Poderíamos colocar botões ou texto, por isso, em cima das imagens. Mas vamos manter esta página como está, mas em um botão na parte inferior do que estamos chamando de Área de Ação. Como temos este botão, bem como uma barra de navegação na parte superior e alguns links na parte inferior, descobrimos que às vezes temos que clicar mais de uma vez para selecionar um objeto que faz parte de um widget. Por exemplo, vou mostrar-lhe o que quero dizer. Clique na biblioteca de widgets ou vá para uma janela e, em seguida, widgets. Widgets de biblioteca são elementos pré feitos úteis que podemos adicionar a páginas da Web. Abra a pasta Botões clicando nela. Em seguida, vamos clicar e arrastar o botão de estado para esta área, e vamos certificar-nos de que estamos na camada de conteúdo principal. Bom. Se eu clicar no botão de estado, posso ajustar a cor de preenchimento e outras configurações da forma. Se eu clicar novamente, posso ajustar o texto, como a cor de preenchimento e assim por diante. Se eu clicar duas vezes nele, posso ajustar a fonte em outras configurações. Então, se você achar que você deseja ajustar esta fonte e você clicar e ela não está funcionando, basta clicar novamente. Clique novamente e, em seguida, clique duas vezes para que Às vezes você tem que clicar mais de uma vez quando é um elemento como um botão. Usaremos essa técnica ao ajustar a barra de navegação e a próxima lição também. Vamos personalizar este botão para torná-lo um link. Depois de estilizá-lo, vamos remover o ícone aqui. Basta clicar nele com a ferramenta de seleção. Impressionou um líder no backspace. Vamos adicionar e abordar esta tecnologia. Então vamos redimensionar esse botão para que ele seja centralizado na página e na linha para essas colunas. Lá, ajuste o texto para ler. Entre em contato conosco para reservar uma viagem aqui, certifique-se de que o texto está em uma linha e centrado. Os guias inteligentes podem nos ajudar com isso e alterar o texto para o título da página. Sim, eu acho que é um fundo proeminente e relevante e tamanho para isso. Traga isso para ocupar um pouco mais. Mas ainda centrado . Finalmente, vamos mudar o preenchimento da forma. Podemos aplicar uma cor clicando aqui acima, mas vamos selecionar uma cor das bibliotecas CC do nosso tema de cores que temos. E eu vou mudá-lo para esta laranja aqui para que ele se destaque exatamente como a área ao redor dele. Ou poderíamos usar este outro, que todos parecem melhores. Ele pode combinar este tema ou algo ligeiramente diferente em um centro vertical que 27 pixels acima e abaixo. Para este exemplo, quando eu clico nesta nota que diz Normal aqui em cima, isso significa que esta cor é aplicada quando o botão não está sendo clicado e quando o mouse não está pairando sobre ele, é a cor padrão Clique rolar, e podemos mudar o preenchimento para este azul. É quando as massas pairam sobre o botão. Então vamos ajustar a massa para a mesma cor azul. É quando o usuário clica no carneiro. Finalmente, vamos mudar ativo para a cor laranja. Mas para este exemplo, isso não aparecerá porque esse botão não está na mesma página para a qual está sendo vinculado. Serão relevantes quando adicionarmos uma barra de navegação. Vamos também garantir que o Texas set toe branco para todos os estados deve selecioná-lo e selecionar branco e vamos ver Active Normal Now que mudou o estilo de parágrafo , é claro, e teremos uma ciência plus. Se tivermos uma janela e, em seguida, estilos de parágrafo, é aqui em cima. Não queremos alterar todas as outras instâncias do estilo de parágrafo do título da página, portanto, não queremos clicar com o botão direito do mouse e você redefine o estilo. O que queremos fazer é um novo estilo de parágrafo. Muito bem, então vamos mudar o nome da chamada para Action Link, bem no topo. Quando eu tenho este aviso selecionado, nós temos alguns chamado transição aqui. Se adicionarmos um desvanecimento de transição, podemos ajustar a animação basicamente para a rollover. Então, por exemplo, quando adicionamos um 0.2 2º atraso e, em seguida, dizer duração do ponto para, e então podemos facilitar e aliviar para que ele apenas ajustá-lo ligeiramente. Então é mais um efeito sutil. Se você já projetou um site antes e um programa de software tinha referências para rolar imagens , esta é a mesma idéia, mas é chamado estados como em estado de rollover, estado normal e assim por diante. Finalmente, vamos fazer disso um link para a página de contato. Então, se eu clicar aqui para o lado e clicar em contra, Eu estou preso no todo, mas lá dentro e, em seguida, no topo aqui, entrar em contato. Centralizamos isso manualmente na página usando colunas e guias inteligentes, mas há outra maneira de contornar objetos. Se isso não foi centralizado na página como esta com você, vá para uma linha no painel de controle ou obtenha uma janela uma linha. Vamos olhar a linha para a área de conteúdo e, em seguida, clique no alinhar objetos para o centro horizontal. E lá vamos nós as linhas dos pés para nós. Além de alinhar imagens à esquerda, direita ou centro de uma seleção de área de conteúdo ou um objeto chave, que indicaríamos clicando, também podemos distribuir objetos. Mova as três imagens aqui com a ferramenta de seleção um pouco ao redor, e então podemos alinhá-las para que elas tenham o mesmo tamanho. Então eu vou selecionar um shopping segurando o turno e clicando em todos eles com a ferramenta de seleção e se formos para uma linha e há também distribuir. Então, se forrarmos os joelhos desta forma ao longo da parte superior ao longo da parte inferior ou no meio desta área de conteúdo , vão se alinhar uns com os outros, e eles têm a mesma largura e altura. Então, se os alinharmos no fundo do meio superior, eles estarão alinhados na parte superior e inferior das imagens também. Então, se formos para a esquerda, eles vão todos para a esquerda. Então nós não vamos querer fazer isso ou o meio para a direita porque eles estão todos na mesma área. Então, se eu mover aqueles ao redor assim, você sabe, novo selecionar um shopping e, em seguida, obter uma linha à esquerda, então todos eles se moveram para a esquerda de seu flush ou seu centrado ou direita diz. E eu posso ajustar movê-los para cima e para baixo como estes fariam. Você também pode distribuir os objetos uniformemente. Então, se eu mover estes ao redor assim e não há, eles não são completamente distribuídos uniformemente, você pode selecioná-los todos clique de deslocamento assim e, em seguida, uma linha, e então nós temos distribuir a partir da borda esquerda ou do meio da direita. Vai ser o mesmo para isso porque eles são os mesmos com, ou também distribuir pelas bordas superiores, centros verticais, bordas inferiores, e então você também pode adicionar espaçamento específico. Então, se fizermos espaço horizontal e, em seguida, alinhar Teoh, se você fez objeto chave, você poderia selecionar qual deles você deseja definir como os objetos-chave do resto irá alinhar para ele. Mas para esta alfabetização para a área de conteúdo, distribuir pelo centro horizontal. Também queremos o dedo do pé, alinhá-los pelo meio, distribuir uniformemente, e eles estão nivelados na borda. Isso é certo porque é pela área de conteúdo. Então, por que ele os distribuiria por essa seleção? Bem, se movermos estes um pouco para dentro e eu ainda gosto deles e, em seguida, uma linha uma linha para você alinhou uma seleção, esta será a borda. Basicamente, ele não vai ser não vai para a borda da página. Então, agora, se eu distribuí-lo e, em seguida, também uma linha, hum, verticalmente. E aí vamos nós. Então, é um pouco diferente de alinhar para você a área de Contin em vez de um forro para a seleção. E então eu tenho mais selecionado e eu vou apenas centrá-lo visualmente bem aqui. Lá vamos nós. Vamos rever a fixação nas imagens de posicionamento também. Mais tarde. Eu só queria mostrar como alinhar rapidamente e também distribuir imagens se precisássemos fazer isso. Outra maneira de fazer isso, além de usar guias e colunas e guias inteligentes, e a próxima lição irá adicionar navegação consistente na parte superior e adicionar alguns links ao longo da parte inferior também. 31. 7.3- Como adicionar a navegação de superior e navegação manual: Miss Listen irá adicionar a nossa barra de navegação ao site. Agora. Eu tenho codificado e desenhado sites desde os anos 90, quando eu estava no ensino médio e na faculdade e de uma das barras de navegação de imagem de crédito. Tivemos que criar imagens fora das áreas dizendo loja de fotos ou algum tipo de programa semelhante e, em seguida, inseri-los manualmente e adicionar um hiper levando a cada um dos botões de imagem. E a menos que estejamos usando mais tarde em um PHP em conjunto com HTML e CSS ou de alguma forma adicionando navegação comum, como com quadros de volta no dia, teríamos que alterar manualmente a navegação em cada página se fizéssemos uma alteração em um página. Em outras palavras, se eu removi um link ou ajustado um link em uma página de um link de imagem e a página, você sabe, é uma de, digamos, 40 páginas em um site, bem, que não muda em todos os outros. Então nós teríamos que passar manualmente e alterá-los todos agora com PHP e C s diz. Isso está fora do contexto deste curso, realmente, mas você pode mudá-lo com algumas dessas tecnologias. Algumas dessas linguagens de codificação em toda a placa usando métodos diferentes. Mas eu costumava ter que passar e principalmente mudar cada um antes que aparecesse. Agora não precisamos saber codificação como CSS e PHP Teoh apenas uma barra de navegação em toda a placa, em todas as páginas no Muse. Muse torna muito mais fácil criar uma barra de navegação, e se fizermos uma alteração nela na página-mestre, ela se reflete em todo o site, para que não tenhamos que voltar e fazer a alteração em cada página. Separadamente, podemos. Adam criou manualmente a navegação de imagem na parte superior da página-mestre. Mas o Muse também tem o que são chamados widgets, incluindo um widget de menu, que pode ser realmente útil. Abra a Biblioteca de Widgets. Você pode obter uma janela que biblioteca bruxas e vamos navegar para a pasta Menus, e temos horizontal e vertical. Vamos clicar e arrastar o cavalo em um menu até a página-mestre. Verifique se isso está na camada de cabeçalho. Veja como não podemos ver. Isso porque precisamos ir até o painel de camadas, e ele está no conteúdo principal. Então vamos apenas clicar e arrastar na caixa lá, até o cabeçalho, e agora eu posso ver tudo bem, e podemos fechar a biblioteca de bruxas. Por agora. Temos algumas opções para o menu. Nós podemos movê-lo ao redor, e nós também podemos clicar nesse círculo azul clicando fora aqui. Basta clicar nele. Então a coisa toda selecionada e, em seguida, clique neste círculo azul com a seta branca dentro dele . Ele traz as opções, e mesmo depois que mudamos o menu Irã, podemos continuar personalizando-o pressionando isso. Vamos redimensionar o menu aqui um pouco e, em seguida, ajustar as opções. Eu vou colocá-lo junto, lavar o fundo da cabeça ou lá e fazer com que ele flashes de uma das colunas, e eu vou trazer para fora um pouco assim. Mas vamos apenas sugerir que as configurações um pouco mais sobre iria realmente mover o servidor. Ela pode ver. As opções aqui CEO diz páginas de nível superior. Se você clicar nisso e fazer todas as páginas, ele incluirá páginas filhas como parte dos menus suspensos. Eu vou te mostrar o que quero dizer, então se eu clicar e arrastar isso até aqui eu estava fazendo algo assim e eu tenho uma prévia, tudo bem. E agora, se eu clicar em quem há a página inicial clicando sobre, ele vai sobre perguntas, vai para perguntas em contato. Tem contato. Agora veja os menus suspensos de para essas páginas filhas. Então, se eu for para direções, ele irá para a página de direções e, em seguida, mídia social. Então, é realmente até você se você quiser incluir os sub-menus lá. Se você clicar nas opções lá que é controlado ali estavam, diz que todas as páginas. Então nós só queremos páginas de nível superior e, em seguida, que nós podemos ir para as páginas filho dentro da navegação você sabe, no texto, ir duas direções porque ele está ligado em algumas das páginas. De qualquer forma funciona. Então, vamos clicar nisso novamente e ir para as opções e você verá horizontal do que vertical novamente. Queremos horizontais, para este exemplo. Editar juntos significa que se editarmos uma configuração de coisa, digamos cor de preenchimento para um estado do que isso afetará todos eles juntos. Então, se você não quer isso, nós não verificamos. Vou manter o cheque para este exemplo e depois o tamanho uniforme. Basicamente, se você tem ah, espaçamento ou tamanho, qual é a diferença? Bem, se eu mover isso para cá, vai mostrar a diferença. Clique neste espaçamento uniforme. Vai ter o mesmo espaçamento entre as palavras. Então as perguntas serão realmente maiores, tanto quanto o botão geral, então sobre porque tem mais letras, eu diria tamanhos uniformes melhor porque então há tamanho consistente dos botões lá. Nós não queremos mostrar ícone esquerdo para este exemplo alguém desmarque que queremos mostrar rótulo causa caso contrário com o texto em sua automaticamente. E então estamos dizendo Mostrar ícone direito. Isso se você tiver um submenu. Estamos incluindo todas as páginas como esta. E então teremos aquele pequeno ícone direito para indicar que há mais na área do menu , e então isso afeta a linha. Se você alinhá-lo acima, aliar na parte superior do botão e assim por diante. Então, para isso, devo dizer horizontalmente e, em seguida, centralizado. Nós vamos personalizar e estilizar isso em um pouco. Mas primeiro, vamos adicionar outro menu, e este será um menu realmente personalizado que não usa páginas de nível superior por padrão, por exemplo, Então vamos para a biblioteca Widgets novamente e ir para o clique horizontal e arrastá-lo aqui fora. E depois para as opções. Vamos para o manual em vez de páginas de nível superior ou todas as páginas. E se clicarmos nele com a ferramenta de seleção e, em seguida, clicar nele novamente, obtemos esses sinais de mais quase como se estivéssemos no modo de plano e essas páginas web de ar para que possamos adicionar outro botão ali clicando nesse filho mais. Isto é apenas para adicionar itens de menu. Para este exemplo, podemos adicionar links externos, como links para perfis de mídia social para o cliente ou para sites sociais, ou para informações de contato. Mas vamos fazer esses links para páginas internas que não estão incluídas no topo. Vamos que um botão de menu clicando no sinal de mais. O que é ajustar o tamanho Apenas arrastando um pouco assim. Vamos ter certeza que isso está na camada de rodapé Civic. Ele vai camada e é aquele menu lá. Então vamos dirigir por mais de dois rodapés. Tudo bem, você pode ver o verde por aí. Indica que estamos no rodapé, apenas os guias lá. Vamos adicionar títulos para esses links. Vou clicar nele e clicar duas vezes, clicar duas vezes novamente, e vou digitar as direções. E para este tipo nas mídias sociais. Então o que, este selecionado? Clique nele e, em seguida, clique nele contra. Nós temos direções aqui apenas selecionados, e nós vamos adicionar que é um hiperlink para direções e, em seguida, clique neste e, em seguida, clique nele novamente. Só para que este botão seja selecionado e vamos adicionar um link para as redes sociais. Agora clique na palavra hiperlinks aqui e podemos adicioná-lo para que ele abra em uma nova janela ou guia. Isso geralmente acontece se estivermos vinculando a algo que está fora do nosso site, e queremos que ele esteja em uma nova guia. Mas para este, é um elo interno. Muitas vezes não queremos que ele abra uma nova aba ou janela de qualquer maneira, porque o navegador pode bloqueá-lo ou as pessoas simplesmente não gostam disso. Eles querem ser capazes de apenas clicar e ficar na mesma janela. Mas, independentemente disso, nós temos essa opção alguns de clique fora lá e apenas torná-lo para que ele apenas permanece na mesma janela na próxima lição irá personalizar e estilizar ainda mais esta navegação, e nós vamos realmente clientes as cores, o rolar e redimensioná-lo um pouco tão realmente estilo. Combina com esta marca neste cliente e parece esteticamente agradável. 32. 7.4 - estilo e personalização de navegação: nesta lição irá personalizar e estilizar ainda mais a nossa navegação. Em vez de ter a altura padrão aqui, eu vou clicar e arrastar a parte superior e inferior para obtê-lo nivelado aqui com as bordas. Alguns primeiro vão on-line para aquela coluna e depois arrastá-lo para cima como assim o topo da cabeça ou ali, bem ao longo daquele guia. Agora podemos definir o preenchido nenhum. Então, se eu cliquei, um desses foi para preencher nenhum ali, seria transparente, então o botão inteiro ainda seria clicável. Mas nós realmente queremos cor aqui para destacá-la. Para tornar óbvio que isso é um botão. Mas só para mostrar que isso é possível, que se nós só quiséssemos texto lá que é clicável em um estilo de botão, nós poderíamos fazer isso. Eu quero fazer isso. Obviamente, essas áreas clicáveis no ar não só têm o texto lá, então vamos ter uma cor para o Phil. Não conseguimos clicar aqui ou ajustar os níveis aqui, mas vamos usar a cor do tema de cores dela. Abra o painel de bibliotecas CC, e eu vou ajustá-lo para que fique um pouco diferente azul no fundo Este limite azul claro. Assim, a navegação parece agradável, já que suas cores de ar ligeiramente diferente no fundo se destaca. Mas não é distração. Vamos pré-visualizar até agora, tudo bem, então vamos adicionar alguns estados a isso para que possamos realmente personalizar os efeitos lá. Então, se clicarmos aqui e há Click This novamente para que eles sejam todos selecionados e, em seguida, clique novamente. Então estamos neste botão inicial aqui ou diz Normal. Vamos rolar e voltar para nossas bibliotecas C C C e para rolar. Se formos apenas um desses, eu vou apenas todos eles desde que verificamos isso mais cedo. Então, novamente, normal é apenas quando ele é exibido lá. Não estamos pairando sobre ele com o cursor ou clicando nele. Podemos ajustar os textos com essas mudanças, mas vamos mudar isso mais tarde. Para análise focada na mudança na seleção de cor rolar, e nós poderíamos ajustar isso para complementar ou cor. Mas se isso se destaca demais, podemos ajustar esse outro tipo de azul. Neste exemplo, este corresponde ao rodapé também. É tudo selecionar aquele, e se selecionarmos o mouse para baixo, Vamos configurá-lo para a mesma cor. É quando estamos clicando nele. E, finalmente, vamos abordar o estado ativo para a mesma cor. estado ativo novamente é apenas quando estamos na mesma página para a qual ele está vinculando. Se o definirmos para uma cor diferente do estado normal , isso indicará em que página estamos. E se clicarmos nos outros, isso indica que mudamos também. Mas vamos ver novamente. Vou mostrar-lhe o que quero dizer sobre quem perguntas contato. Eu clico em casa e agora casa é destacada. Clique no contato e agora contatos com luz alta. Tudo bem. Agora vamos ajustar a navegação inferior, que aponta para as páginas filho thes ar ligado de outro lugar no site também. Mas ajuda a ter outra maneira de as pessoas se conectarem com a empresa, tornando mais fácil para os usuários encontrar direções e links de mídia social. Neste exemplo, qual é o endereço? O tamanho deste também. Dentro do rodapé e enfraquecer definir os quatro estados para as mesmas cores como acima. Qual é o tamanho da justiça deste também, e uma linha bem ali, por enquanto. E se eu clicar em um desses e depois clicar nele novamente, vamos mudar o estado de alguém votou normal. Tenho bibliotecas RCC. Traga isso aqui e para o rolo para este. Para o normal para este, ele vai combinar com o topo lá e, em seguida, rolar em vez de ser aquela causa azul mais escura então que vai realmente coincidir com o que está por trás dele. Vou mudar para este, então é um pouco diferente, e podemos adicionar uma transição. Desvanecer para isso. Então vamos definir o atraso 2.2 e a duração do ponto para que pudéssemos experimentar. Veja qual funciona melhor, mas eu entendo essas configurações para este. Isso também é apenas os que aqui em cima, também, em um desvanecimento e, hum, fazer apontar para 0,4. Ele está e está fora. E então vamos visualizar que apenas para mostrar o que isso parece até agora casa Nestle Animation onde apenas ligeiramente muda e, em seguida, a mesma coisa na parte inferior. Então, se eu clicar neste bem indicar agora que estamos na página inicial agora. Uma nota rápida sobre a edição do texto Se eu clicar e, em seguida, clique e, em seguida, clique duas vezes. Eu posso, é claro, mudar o fundo assim. Mas você também pode simplesmente clicar em toda a caixa assim, e nós não estamos abaixo do nível de seleção do texto ainda. Mas podemos clicar no texto aqui no painel de controle ou ir para a janela e depois texto, e se ficarmos aqui, ele já vai ajustá-lo sem que aconteça com você. Clique em e, em seguida, clique duas vezes para ir até esse menu. Então estes eram manuais aqui em baixo. Se queremos ajustar aqueles e clique que e alterá-lo também. Claro, também podemos clicar duas vezes e digitar algo diferente e mudar o euro porque é um menu manual. Então, se eu mudar isso, salvar de volta para 14 e, em seguida, mudar estes mantendo uma equipe, digamos, em vez de Georgia, você Ariel e a mesma coisa para este aqui, ou nós podemos, é claro, ir aos nossos estilos de parágrafo. E então, a partir daí, você pode mudá-lo. Claro, alguns deles não vão funcionar. Você só quer ver se alguns deles estão bem. Mas para este realmente quero fazer isso. Não vou fazer nada. E eu vou dar Teoh Ariel e depois para a cor. Você acabou de dizer que é branco, e nós também podemos centrar lá também que realmente mover isso um pouco para baixo. Não queremos que isso aconteça. Então, recuem e tornem-no um pouco menor do que lá. Vamos para não mudarmos o texto aqui. Realmente? Porque é automático. São apenas todas as páginas de nível superior por padrão e os links que já estão lá. Então, se você realmente quer personalizar esse estilo enfraquecê-lo e mudar o fundo tudo isso. Mas se você quiser uma navegação manual personalizada, basta criar uma como fizemos no rodapé lá. Vamos visualizar o site até agora, certo? Ali está a casa. Isso seria o índice, tudo bem, e então se você clicar nisso, ele irá para você, entrar em contato bem sobre e clique nele no texto, link lá e ir para perguntas. E lá vamos nós parece bom até agora antes de trabalhar para tornar este site responsivo, precisamos adicionar mais alguns elementos interativos a este site. Precisamos adicionar a página de direções, por exemplo. Obrigado e verei na próxima lição 33. 8.1 - Como adicionar conteúdo de HTML em: bem, você não precisa conhecer nenhuma codificação HTML ou CSS para projetar e lançar sites usando o Muse. Pode haver momentos em que você queira adicionar algum HTML personalizado ao seu site, como um vídeo incorporado do YouTube ou um Google Maps incorporado. Eu não tenho o endereço para este negócio para este exemplo, então eu só tenho a cidade aqui no Google Maps. Então você apenas digitar em mapas dot google dot com Onde quer que o endereço do negócio que você está criando seu site para e nós podemos clicar em compartilhar e, em seguida, este é um link é se estivéssemos tendo um link de texto ou um link de imagem para este mapa aqui do que nós usaríamos que você está bem aí. Mas também podemos incorporar o mapa em um site. Nós simplesmente copiar e colar este código em um site. É bem simples, certo? Clique no PC ou controle, Clique no Mac e clique em Copiar, em seguida, no Muse nas direções. Página poderia editar e, em seguida, colar, e podemos movê-lo ao redor da página usando esta ferramenta de seleção. Nenhum clique no site, e eu realmente tenho essa área de conteúdo lá. Nós não queremos que alguns vai camadas conteúdo primário e clique em Rodapé e ver os moinhos H incorporados e rodapé. Nós não queremos isso. Quero isso no conteúdo primário. Um pouco clique e arraste isso para cima. Dois. Conteúdo primário. Tudo bem, lá vamos nós. Então eu só clique nisso. Posso movê-lo com a ferramenta de seleção. Então, se quiséssemos uma linha assim, não podemos redimensioná-la . Como se eu clicar e arrastar assim, não vai funcionar, tudo bem, eu vou ter espaço em branco lá. Então, o que poderíamos fazer, no entanto, é certo. Clique sobre ele e vá dedo do pé editar HTML ou clique Controle no Mac. Então temos o HTML aqui, e isso é o que copiamos anteriormente. E assim o que poderíamos fazer, por exemplo, com 600 nós poderíamos ajustar que poderíamos dizer com 400 altura para o nosso vamos apenas deixar isso para 50 e clique em OK, e ele vai apenas a sagacidade lá. O quadro para o quadro retangular está um pouco fora. Então, o que podemos Dio é direito Clique nele bom em html. Então isso é 404 50. Então nós poderíamos fazer é clicar e arrastar até que ele é 400 para a largura e, em seguida, 4 50 para as alturas que combinam assim, onde nós também poderíamos ir para redimensionar e, em seguida, mudar a largura e altura lá. Esta altura realmente precisa ser de 450 Lá vamos nós. Então isso é um pouco mais magro para este exemplo. Mas não é responsivo. Vamos rever o design responsivo mais tarde. Por isto. Vou ter o código normal que tínhamos originalmente. Então não temos um costume com sua altura comparada aqui em cima. E muitas vezes eles não têm isso enviado para responsivo. Alguns sites fazem outros não, mas vamos repassar isso agora com direções. Eu só vou digitar em direções iria aqui, e é onde a cópia para as direções iria didio. E é a mesma coisa no YouTube se você quiser Teoh ah, compartilhar um vídeo e incorporado em um site, você só vai compartilhar e depois na cama. E então você pode personalizar este. Por exemplo, se você mostrar mais e, em seguida, você pode fazer um tamanho personalizado imediatamente onde você pode fazer uma predefinição como esta e, em seguida, uma vez que você tem largura e altura, como queremos, e, em seguida, outras opções novamente quando basta copiar e Cole isso. Agora, se essa pessoa remover esse vídeo ou não permitir incorporação, então ele não iria aparecer, claro, mas este é apenas mais um exemplo de incorporar html personalizado no site divertido para que eu pudesse clique nisso e reproduza-o. By the way, usamos alguns widgets até agora, como o botão de estado e o menu de navegação. Mas se você procurar o diretório Adobe Muse Witches, eles são alguns widgets gratuitos e pagos, e alguns deles você dá mais algumas opções para personalizar o HTML que você traz de um site. Digamos, por exemplo, YouTube ou Google maps. Vou adicionar este link e recurso adicional é se você estiver interessado. Mas já que estamos cobrindo alguns personalizados, HTML. Esta é apenas outra maneira de adicionar conteúdo usando um widget em vez de apenas colá-lo. Obrigado, e eu vou ver na próxima lista 34. 8.2 - Como adicionar um formulário de contato: Nesta lição, você aprende a adicionar um formulário de contato, navegue até a página de contato, a menos que ajuste este texto um pouco passe por cima assim, certo? E precisamos de um pouco de espaço para trabalhar, para começar aqui. Então eu vou segurar Shift e selecionar alguns destes e apenas movê-lo para baixo um pouco . Podemos ajustá-lo um pouco com isso. Eles estão bem. Então, mantemos esse formato de grade que estamos trabalhando com Clique na Biblioteca de Widgets e clique na pasta Formulários. Então, nós adicionamos botões com botão de estado sempre menus para verticais horizontais, tanto personalizados e pré-fabricados menus, e que ainda podemos personalizar até certo ponto agora, sob formulários. Há detalhes em contato. Então, este ar apenas formulários de contato. E se eu clicar e arrastar o detalhado até aqui e eu vou te mostrar o que ele tem Ah, um monte de coisas diferentes, certo? Empresa, trabalho, endereço, cidade, estado, CEP e assim por diante. Então, se quisermos uma mais simples, eu iria clicar nisso se eu apertasse deletar. Apague uma dessas coisas. Se eu clicar, essa coisa toda tinha deletar novamente lá vamos nós. Se queremos um páginas de contato mais simples, selecione o contato simples clique e arraste isso para fora. E então ainda temos opções, no entanto, para adicionar outras áreas. Então, como um número de celular. E clique nisso e alterne isso e assim por diante. Agora, se não queremos que eles enfraqueçam, desmarque. O problema é notado que a parte inferior aqui empurrou que maneira para baixo os formulários enviar caminho lá para baixo onde podemos usar Clique que e também mantenha o deslocamento e clique nesta área aqui e basta mover que de volta para cima. Sopre isso. Tudo bem, então agora se eu clicar nele, esta é a área inteira, certo? Então, se eu clicar nas opções laterais e isso é chamado de formulário de contato, mas podemos mudar isso se quisermos ser um nome personalizado, digamos, página de contato. Eu fui do que você quiser chamá-lo e, em seguida, ele enviará e-mails para você por padrão para seu associado de e-mail com a assinatura da Creative Cloud, que você possa alterá-lo se quiser. Então, depois de enviar isso, ele fica na reunião de página atual? Ele só vai ter este texto aqui dizendo informações enviadas. Obrigado ou ele vai para uma nova página para que você possa criar outra página? Por exemplo, assim como a página de contato. Basta adicionar um. Digamos que poderíamos adicionar uma página filho à página de contato que diz Obrigado. Sabe, obrigado por enviar informações. Agora volte para a página de contato da home page ou qualquer outra coisa, ou podemos mantê-lo mais simples e apenas ter algum texto do fundo aqui que irá indicar que eles enviam as informações. Então isso é bastante auto-explicativo. Quais critérios queremos incluir se eles colocam seu nome, e-mail e mensagem e o ponto de ter páginas de contato é algo que eu não quero colocar seus e-mails na página da Web. Eles têm medo de serem apanhados por remetentes de spam. Mas muitos clientes de e-mail e nossos dias fazem um bom trabalho com Phil transformando que se tivéssemos a página de contato aqui, não precisaríamos disso aqui. Podemos mantê-lo lá de qualquer maneira, bem aqui. A captura Isso é para evitar que bots enviem informações spam usando este formulário para que possamos receber os e-mails de pessoas que precisamos para receber e-mails e endereçar spam e bots. Então, se clicarmos nisso e irmos para recapturar 2.0, ele irá adicionar isso aqui em baixo. E você precisa clicar sobre isso onde diz aprender mais, a fim de se inscrever para uma chave, a fim de usar isso. Mas você não pode personalizar isso, por exemplo, fundo diferente, e você pode ter uma imagem ou áudio. E então que tipo de tamanho evitamos que os bots enviem muita informação. Então, se você quiser isso, podemos adicionar isso. Se não, você pode definir. Não de qualquer maneira. Agora podemos personalizar isso um pouco. Sabe como isso diz por misericórdia. Há uma mensagem ali. Há também texto e enviar nome de e-mail da mensagem e para que possamos usar nossos estilos de parágrafo. Ou você pode simplesmente mudar isso manualmente para um fundo diferente. Por exemplo, se você quiser gostar disso, você pode torná-lo maior e o que não, Então isso pode ser personalizado conforme necessário. Você precisaria configurar o formulário com seu provedor de hospedagem na Web para garantir que ele funcione com esse servidor. Ele deveria. Examinaremos a exportação e também o upload e o teste de sites mais tarde. Então, se você acabou de passar agora, não vai funcionar. Provavelmente porque ele não tem um servidor que está enviando esse e-mail para o e-mail do destinatário porque ele é um site off-line. Neste momento , serão arquivos HTML locais. Por exemplo, uma vez que exportá-lo agora, compartilha arquivo divertido e algumas imagens incorporadas e assim por diante, que é apenas mais um widget para verificar. Se você quiser adicionar um formulário de contato em seu site, analisaremos as considerações de testá-lo mais tarde quando exportarmos o site e carregarmos Obrigado. 35. 9.1 - Como adicionar pontos de quebra para a responsabilidade da: arte nesta seção. Vamos adicionar capacidade de resposta ao site, e por que queremos adicionar responsividade? O que é a capacidade de resposta? Bem, medida que você redimensiona o navegador ou você está olhando para um site em telas diferentes, por exemplo, dispositivo móvel, um tablet comparado a uma tela mais ampla, computador ou TV muitas vezes vai parecer diferente. Queremos que seja assim. O site responde ao redimensionamento da janela ou as telas diferentes suspiros para que possamos ver o conteúdo no site. E, por exemplo, a navegação não sai da borda da janela porque não redimensionamos. Então, a chave aqui com capacidade de resposta é reposicionar elementos e redimensionar elementos. Então, antes de adicionar alguma capacidade de resposta, eu quero apenas visualizar o site até agora. Se você receber um arquivo e, em seguida, visualizar o site e o navegador em um almoço em uma janela do navegador, e eu vou trazer isso aqui e assim nós temos o site aqui. Se eu clicar e arrastar e ficar maior do que a foto aqui, e se quisermos esse efeito, tudo bem. Mas eu acho que eu vou realmente ajustar isso para que ele não fique maior do que um certo tamanho vai sobre como fazer isso e a mesma coisa para esta caixa de texto aqui. Mas tudo o resto parece bom para a maior parte, mas você vai notar como nós ficamos menores. O texto aqui corre sobre as fotos e a navegação da estrutura superior correndo um pouco perto um do outro. E então também, aquele logotipo lá em cima fica muito pequeno. Então, quando ele ajusta se alguns deles redimensionam ou não e também precisamos reposicionar algumas dessas coisas, tudo o resto parece bem. Na maior parte, acho que parece bem. Se você apenas imaginar que este é um telefone e você está rolando. Temos um espaço vazio aqui. Ponha isso correndo sobre ele e muito espaço aqui. Então essa página precisa de um pouco de trabalho. Se você obter um sobre e nós re dimensioná-lo, que parece muito bom. Exceto que quando chegarmos a isso, , novo, a navegação vai ser a mesma e depois perguntas que parecem OK, exceto aqui onde recebemos texto bem ali. É meio espremido em uma ou duas cartas em uma linha não é bom, mas uma vez que chegamos lá. Isso realmente parece muito bom. Provavelmente é o mais próximo. Então, o que queremos além da navegação, tanto quanto ser responsivo e se ele fica maior em uma TV de tela larga. Obviamente isso é apenas ser cor de fundo ou fundo aqui, mas estamos pensando em quando ele fica menor. O que é que parece? Ele, mas o tamanho do Mac aqui temos definido para 1000 pixels de largura, e então este. Este widget aqui para contato não é responsivo, está longe com tamanho Guv. E então vamos querer ajustar isso também. E depois a Mídia Social. Poderíamos adicionar as imagens. Este é apenas um exemplo, claro, mas , uh, talvez realinhar um pouco disso, mas como primeiro redimensioná-lo, realmente estraga tudo por lá. Então ele está procurando direções de onde isso não é responsivo tanto quanto o tamanho, para que possamos adicionar um mapa diferente do mesmo mapa. Isso é menor em um certo ponto, mas vamos verificar isso. Então essa é a prévia até agora. Como é que fazemos isso? O site parece diferente em tamanhos diferentes. Em vez de fugir da página. Bem, nós adicionamos o que são chamados de pontos de quebra. Se você vai para o mestre A e você apoiar diz 1000 são fluido ponto de ruptura Presidente, temos 3 20 do menor e ver como a navegação fica um pouco esmagar lá e em seguida, 1000 como o máximo severo nunca lá e você clica em um reset 2000. E assim que apenas pré-visualiza o navegador com alterá-lo. Como as coisas vão reagir? Então a primeira coisa que queremos fazer é adicionar um ponto de quebra aqui na página-mestre, então clique e arraste isso um pouco, e uma vez que ele fica um pouco perto, pode haver uma corrida aqui. Isto é cerca de seis, talvez 680 por lá. Tudo bem. E se isso não é exatamente no 6 80 você pode você pode clicar duas vezes nele e, em seguida, digitá-lo lá 6 80 se quisermos que e clique. OK. E então, naquele ponto passado lá, a navegação realmente estraga tudo. E, claro, você sabe que fica ainda pior lá embaixo. Então, o que vai querer didio é em 6 80 Você sabe, uma vez que você ficar menor que isso, vamos precisar refazer esta navegação e reconfigurá-lo. Então, à direita, clique sobre ele. Vamos apenas clicar fora aqui. Basta clicar no objeto inteiro aqui. Direita, Clique no controle do PC, Clique em americano. Queremos nos esconder no ponto de ruptura. E agora ele não vai aparecer em 320 ou 680 e então ele reaparece aqui. Tudo bem. E teremos uma navegação. Temos que refazer o dedo. Uma vez que estamos abaixo de 6 80 é provavelmente um dispositivo móvel. Talvez alguns comprimidos, por exemplo, sejam menores. Agora isso aqui que o logotipo re tamanhos e nós realmente não queremos isso. Queríamos continuar iguais. Então, se você clicar nele e eu rezo no topo, primeiro de tudo, podemos fixar itens uma caneta e objetos que sempre são exibidos e um local no navegador. Veja, nós poderíamos usar essas opções ou você pode ligar depender do centro esquerdo, direita da página ou contêiner. Então, vou fixar isto à esquerda. Isso significa que ele apenas irá manter esta distância da esquerda independentemente, em vez de apenas se mover em relação ao centro e ao lado esquerdo e direito. E nós também sob redimensionar não queremos fazer nada. Então, se eu apertar a pré-visualização o que isso vai fazer. Clique e arraste. Você vai ver. Agora ele fica. Ele está ficando a mesma distância não da borda do navegador, mas da borda do contêiner, tudo bem, e então ele permanece o mesmo agora. Uma vez que ficar menor, porém, ele faz re tamanhos que você pode ver, então precisamos corrigir isso. Vamos voltar. E uma vez que eles ficam menores, então eles ficam menores, vamos clicar nisso, clicar nele e, em seguida, redimensionar nenhum. Portanto, é um pouco menor em um em comparação com o outro. Se você não quer isso, se você quer o mesmo, o que você pode fazer é ir. Estou clicando aqui no ponto de quebra normal 1000 e sob redimensionamento. Basta clicar que veremos 167 por 70. Então, se voltarmos aqui, clique nisso e vamos 167 por 70. Isso se quisermos exatamente o mesmo. É agora que se eu ficar entre estes dois , continua o mesmo. Então essa é a preferência pessoal. Se você quiser que ele seja menor no tamanho de tela menor e janela menor do navegador ou se você quiser que o logotipo seja consistente. De qualquer forma, agora também queremos fixar esta navegação sobre o topo. Então clique nisso e temos aqui 10 à direita. Então, quando eu clicar nisso e com isso selecionado ainda e eu fixá-lo no lado direito agora, se você clicar nisso, nós queremos responder com para esta navegação. Então, agora, se você tiver uma prévia, é apenas um pouco diferente, tudo bem, então ele tem esse espaçamento consistente do lado do contêiner. Tudo bem. Uma vez que ele se aproxima demais, no entanto, ele desaparece e não reduz a navegação. Portanto, é um pouco diferente, e a próxima lição continuará adicionando alguma capacidade de resposta ao nosso site. 36. 9.2 - redimensione e de Resizing um design de responsabilidade para design: Agora, vamos fechar a página-mestre A e ir para a home page e você notará que há erros aqui para o ponto de quebra da página-mestre. Agora, nós realmente não afetamos esses pontos de vista. Pensamos em enfraquecer, saltar para eles aqui. Mas podemos criar pontos de interrupção apenas para esta página. Tudo bem, então a primeira coisa nesta página que o que eu quero é que se você notar isso, ele fica maior e maior para a borda da página. Nós não queremos isso. Isso é realmente fazer isso não 100% no com. Então, o que? Nós canoas, Você faz isso apenas um pouco menor do que a largura aqui. Talvez 95, na verdade. Traga isso um pouco para o lado direito, também. Algo assim. E eu vou trazer este tipo de linhas com os guias inteligentes vão encaixar nele. E agora, quando visualizamos, ele fica menor. Certo? Mas uma vez que você tem um certo ponto, ele não fica maior. E eu acho que fica melhor com o texto do texto. Não atravessa todo o caminho ou alguém linha. E então essa imagem do balão não pega tarde, onde ele só fica cada vez maior com telas maiores. E você poderia ajustar o ajuste lá dentro se você quisesse, ou você poderia mantê-lo assim. Depende do quê? Olhe trabalho, tentando conseguir isso. A grande coisa é que queremos toda a informação aqui e ser legível. Então, queremos consertar isso. Tudo bem, então feche isso. E vamos simular a mudança do navegador com e isso realmente depende de quando as coisas começam a bagunçar tanto. Parece um 20 na verdade cerca de 772 Então eu vou te fazer cerca de 800 na verdade, neste, adicionar um ponto de ruptura em um duplo clique sobre ele, ter certeza que é apenas 100. Exactamente. E depois, quando ficarmos menores, ver como ficar pequenos assim. O que precisamos para diligir é clicado. Saltou um ponto de ruptura. Vou abaixar isso só um pouquinho. Mova isto para baixo também. Vamos ver como isso se parece. Um clique e arraste. Dá-lhe um pouco mais de espaço para respirar. E nós poderíamos, na verdade, em outro ponto de ruptura aqui. Estamos apenas a ver como reage. Isso realmente sai da cultura sobre lá bem ali. E podemos mudar isso para você. Vamos em frente e realmente fazer isso. Eu vou clicar para saltar para este ponto de ruptura, certo sobre o desafio Vamos em um ponto de pausa. Onde foi isso? 6 14 Vamos fazer isso 6 15 E com a ferramenta de seleção isso eu vou trazer isso até lá em cima. Tudo bem? E se você não está satisfeito como, digamos que você quer que isso é no meio, nós já alinhados no meio. Mas se você quiser se certificar de que permanece no meio, você também pode clicar nele. Vamos apenas clicar neste aqui e colocar no meio bem ali. E eu já o alinhei, mas isso ajuda. Mantenha-o no centro. Mas então, quando eu estava olhando OK, agora isso ver onde ele chega a cerca de 500 ou mais. Mesmo antes disso, vamos fazer provavelmente cerca de 5 20 tudo bem, depois que realmente estraga tudo. Então o que podemos fazer é fazer isso tomar este texto é outra técnica. Apenas aprendendo as técnicas aqui e se você ver onde diz formatar texto através, pontos de quebra, Clique no outro, o outro t lá onde ele diz formato texto Tente obter a dica ferramenta aqui formatar texto na quebra atual ponto. Então o que isso significa é que vamos formatá-lo Onley neste ponto de ruptura, então vamos torná-lo menor. Então ele se encaixa um pouco melhor neste ponto de ruptura. Talvez não tão pequeno. Tudo bem, então quando está aqui em cima, é um fundo maior. E então uma vez que você fica menor, fica menor também que o tipo fica menor assim maneira para a bomba em 320 realmente bagunça seu eso. O que você pode fazer é redimensioná-lo novamente. Então aqui, podemos redimensionar isso como para ver como ele reage. Mova isto para baixo, está bem? E então, na verdade, vou adicionar um ponto de pausa antes disso. E aqui, vamos andando. Lá em cima um pouco. É tudo sobre responder ao tamanho e ao espaço que temos, então podemos realmente mover isso para cima. Tudo bem, então estará lá. Ali. Ponto de quebra inferior. Vamos para o menor ponto de ruptura. Todos os direitos. Isso parece muito bom. Isso precisa ser um pouco agora. Tudo bem, então tudo é legível. Acho que isto aqui em cima. Nós podemos nos ajustar ao longo , , então vamos apenas trazer isso para cima. Só parece melhor, eu acho que onde não é super grande. Sim, vamos trazer tudo isso à tona. Vamos ver como isso reage. Tudo bem, então espero que entenda o ponto. Você iria apenas repetir isso com todas as páginas diferentes e apenas reposicionar e redimensionar elementos em diferentes pontos de quebra. Agora, se olharmos para trás em um mestre também, em um certo ponto, provavelmente queremos fazer deste um, uh, ree Justus. Bem, então clique com o botão direito neste ponto de esconder e quebrar. Muito bem, vamos ter um menu diferente daqui a pouco. Mas, por enquanto, isso parece bom. E a próxima lição continuará. Uma fumaça ou técnicas aqui ajustando as poucas páginas para torná-lo responsivo. Fique melhor em tamanhos diferentes. Obrigado 37. 9.3 - Como adicionar mais design de design, de testes e resolução e de problemas: Tudo bem, bem-vindo de volta. Vamos continuar adicionando capacidade de resposta a este site. Vá em frente e clique duas vezes sobre. E vamos ver como este reage que podemos fazer é tornar essa tecnologia menor. Certo? E se eu achar que as imagens parecem boas, elas já estão responsivas dentro da altura. Nós definitivamente queremos isso porque queremos que eles fiquem menores à medida que o navegador muda de tamanho. Mas este Texas, a maior coisa aqui, e espero que isso seja eficaz dedo do pé aprender, porque este exemplo é muito fácil. O que enfraquece Dio? Vamos ver onde fica. Realmente? Eu não veria sobre o seu Vamos adicionar um lá, 5 60 Então vamos apenas selecionar todo este texto aqui, e vamos fazer isso para o título é, bem, apenas um diferente. E nós poderíamos adicionar estilos de parágrafo para isso também. Mas eu ia mudar de fundo. Então, novamente, o texto em formato T grande no ponto de quebra atual, e nós vamos apenas fazer um pouco menor. Talvez não tão pequeno. Está bem? Algo como 18 por isso. E depois por esta. O que diz 24? Tudo bem, então o que isso parece? Bem, começa muito grande, legível, e então em um certo ponto eu fico menor. Isso vai ficar assim até o menor intervalo 0,3 20 e você pode notar todo esse espaço em branco na parte inferior. Precisamos consertar isso. Então este está no 5 60. Então vamos trazer isso para cima apenas clicando e arrastando para lá. Mais alguma coisa para ver um quadro de texto aqui? Então traga essa liberdade de texto para cima, uma onda que pode ter alguns retornos lá. Isso é bom. Exclua aqueles que não têm essa linha pontilhada. Certo, então há esse exemplo que fica assim na tela pequena. Então você está no tablet do telefone e depois no computador. Tudo bem, vamos adicionar novamente. Vamos consertar a navegação um pouco. Tudo bem, agora vamos, Teoh, vá Teoh, para casa. Vamos para perguntas difíceis na página de perguntas. Acabei de mover estes sobre ágil querer arquivar lugar em vez de tê-los como em linha com o texto. Eu só queria mostrar-lhe como envolver texto em torno de imagens se você quisesse na lição anterior . Pode ficar assim, se quiser. Se você gosta do tamanho das fotos, mesmo no menor, ele preenche a tela, e então você a torna maior em um pouco menor. Se você quer fotos responsivas, no entanto, vamos apenas para o local de arquivo e você complacente sobre o lado direito e apenas certifique-se aqui em cima, ele diz, responsivo dentro de altura. E neste podemos alternar as fotos para que elas não apareçam nas mais baixas. E nós realmente tornamos o texto menor à medida que o tornamos menor, como um dispositivo móvel, um tablet e, em seguida, tela ou TV. Então eles estão ficando menores e, em seguida, eventualmente, nós apenas temos o texto lá. Então cabe a você como configurar isso, mas eu não vou passar por isso porque temos passado por isso em lições anteriores apenas anteriormente. Só mais uma vez. Você deseja usar a ferramenta de texto que está formatando texto somente no ponto de interrupção atual antes de tornar a detecção menor. E então você pode clicar com o botão direito sobre elementos não apenas a navegação, mas também fotos ou outras coisas para esconder isso em certos pontos de quebra e na página de contato o que podemos fazer se você clicar e arrastá-lo sobre um determinado, digamos cerca de 500. Basta fazer o texto menor, e isso deve ficar bem. Cabe a você como você deseja configurá-lo agora com o formulário de contato aqui. Se você quiser fazer isso desapareceu um certo com dizer, bem ali, podemos realmente clicar nele direito Clique Ocultando ponto de quebra. Então, teremos apenas as informações de contato regulares quando for menor, a menos que precisemos também nos esconder neste batendo naquele também. Agora, quando lançarmos nosso site, vamos ver como testar isso. Então eu vou mantê-lo neste exemplo. Mas você pode ver que não é responsivo. Há widgets que têm formas responsivas como essa. Mas, Mas, neste exemplo, apenas o padrão não é responsivo. Isso está incluído na musa aqui, para que possamos personalizá-lo na codificação. Mas novamente, você não precisa de um não codificação para fazer sites e musa. Mas precisamos ajustar isso. Então só temos as informações de contato em tamanhos menores. Se você quiser, nós podemos realmente ser Pegue isso e movê-lo assim. Isso seria realmente melhor, e nós podemos mover isso para cima assim e então aqui nós podemos realmente a mesma coisa. Eu posso apenas levá-lo até lá de cima e rapidamente mover isso para cima. Então este é o padrão e, em seguida, eventualmente, torna-se assim quando ele vem assim. Então, novamente, nesta capacidade de resposta, você pode ter, digamos, algumas imagens que atravessam o topo de 45 imagens como essa, e então dizer, em vez de ter uma grade de quatro por um como 1234 talvez você tenha que comprar dois. Em um ponto, você pode ter apenas as fotos em uma única linha. Apenas 1234 e muito rapidamente as direções. Claro, isso não vai redimensionar. Não é responsivo que o Google map, é claro, mas o que queremos nos preocupar é com esse texto. Então, uma vez que chega a cerca de lá um em um ponto de ruptura e apenas fazer direções menores e talvez haja bem, há um exemplo realmente simples de que um pouco menor 14. Certo, lá vamos nós, então a direção fica em uma linha. É em 14 pontos, então fica maior lá e depois maior. Lá era realmente um mapa justo, por exemplo. Assim que chegarmos a este suspiro, talvez queiras um mapa mais pequeno aqui em baixo. Então, o que podemos fazer? Temos isso apenas ir para uma cópia que podemos fazer é neste ponto de ruptura 5 55. Vamos em frente e clique com o botão direito sobre isso. Vá se esconder no ponto de ruptura e então não teremos até sair para este tamanho real. Ainda vejo parte dela lá. Mas então aqui, vamos dizer que as direções estão aqui do outro lado do topo, e então nós temos aqui embaixo. Então o que podemos fazer é e ele colar, vamos clicar com o botão direito sobre ele para editar HTML. E eu vou fazer a largura aqui só que é um 500. Está bem? E tem um espaço extra nas laterais. O que podemos fazer, vai redimensionar. Veja, que está definido para quatro 54. Na verdade, são quatro pixels a mais do que o original. Então, para isso em que fizemos cinco centenas e listamos cinco antes, eu acho que está adicionando alguns de lá na borda, então isso deve caber perfeitamente, tudo bem. E então precisamos dar espaço para as direções, é claro. Então, quando eu mover isso para baixo e, em seguida, as direções estariam lá. Certo, então vamos testar isso para o começo. É aqui fora e então você tem em um pouco menor lá. Certo, essa é uma maneira de fazer isso. Por baixo, você faz algo assim. E assim sobre o padrão. É para o lado. Mas então, você não chegaria a um certo ponto? Acabou, sabe? Temos de esconder este, é claro. Então, quando um clique com o botão direito ocultar um ponto de interrupção. Então está aqui, então está abaixo dele. Mesmo tamanho, porém, e a partir daqui, é na verdade abaixo dele. Então, apenas um tamanho ligeiramente diferente. E nas redes sociais, acrescentei. Só um par de pontos de ruptura, apenas alinhá-lo. Ele está alinhado e bem aqui com o quadro de texto. Você pode realmente apenas arrastar isso para fora classificações em uma linha, se você quiser. Na verdade, cabe a você. Mostre-me outro exemplo. Poderíamos adicionar imagens lá, mas não quero perder tempo revisando tudo isso porque já passamos por cima das práticas e princípios disso. Por isso, já devíamos saber como fazer isso. Eu vou fechar isso e realmente anterior na visualização do navegador, o site e navegador tudo bem. Então temos em casa sobre perguntas, entre em contato com tudo parece bom, pode arrastá-lo, começa a redimensionar. Tudo ainda é clicável. Nada se sobrepõe. Tudo bem. Sobre a mesma coisa. Essas imagens ficam menores do que o texto fica menor, que tivemos perguntas de ajuste manual. Mas as fotos para o lado. Eu notei isso aqui e ver que nós temos o rodapé realmente sobrepondo-o. Então vamos consertar isso. Isso faz parte dos Web designers, você sabe, verificando as coisas duas vezes. Então essa é a página de perguntas. Tudo bem, isso parece bom. E então, finalmente, direções que em um certo ponto, ele vai para o fundo lá. Tudo bem, isso vai sair um pouco no menor, porque nós colocamos isso em 500, mas vamos começar a mídia social. Tudo bem, lá vamos nós. E isso precisaria de mais fotos. Ok, então eu quero chamar atenção, adicionar interesse visual para que pudéssemos adicionar algumas fotos. Bem, vamos para a página de perguntas. Esse foi um que estava bagunçando um pouco. Vês? Mas isso parece ótimo. Isso parece bem também. Tudo bem, então o que precisamos fazer é ter certeza de ver essa pequena caixa de texto aqui. Mas depois há o conteúdo. Há outro quadro de texto bem ali. Vês? Bem ali. Então essa é a causa de perguntas. Então eu vou movê-lo para cima. Eu poderia estar na mesma, se quiséssemos. Vá em frente e faça isso. Então, vê este conteúdo daqui? Vamos trazer isso para baixo. Dê-nos mais espaço. Vamos voltar a este. Mesma coisa, aquele retângulo de área de conteúdo. Não foi longe o suficiente. Acho que deve ser divertido. Parece e truque duplo. Há alguém que dê um pouco mais de espaço a isto. Ok, foi testado de novo. Arquivo do navegador Sign anterior. Tudo bem, as perguntas parecem boas. Ainda parece bom. E isso parece muito bom. Então você quer apenas ter certeza de que ele fica bem no navegador com a capacidade de resposta. Tente me dar um pouco mais de espaço para respirar se ele está fazendo algo assim, e nós também podemos verificar o tamanho dos quadros de texto, certificar-se de que o retângulo da área de conteúdo é menor do que o quadro de texto que temos, e ele deve funcionar para fora. Obrigado, e eu vou ver na próxima lição 38. 9.4 - Como adicionar um menu em celular usando design de responsivo: são. Você sabe, nós temos passado muito tempo em design responsivo, e nesta lição, eu acho que vai ser muito divertido porque ele vai mostrar outro exemplo de usar um widget . Esses elementos muito feitos, personalizáveis onde podemos adicionar outra barra de navegação que s'mais propícia a um dispositivo móvel, por exemplo, um tablet ou telefone. Então vá em frente e navegue até a página-mestre e você notará que a navegação desaparece quando fica um pouco apertada demais no topo. Porque eu quero estar funcionando, as palavras começam a se esbarrar. Então, o que podemos fazer? Poderíamos fazer um menu menor aqui, pegamos imagens de inserção e tornamos links de imagem para todas as páginas que pudermos em outro widget e apenas redimensioná-lo, torná-lo menor. Mas se é responsivo, ainda vai ficar um pouco menor como nós torná-lo muito pequeno lá, certo? A menos que o comecemos pequeno assim, é outra opção é realmente adicionar um menu pull down que terá o logotipo no topo e, em seguida, ter links para as páginas que podemos alternar. Então eu mostro-te o que quero dizer. Então, quando estamos na página-mestre, temos o cabeçalho, esse rodapé, a área de conteúdo principal. Pegamos o logotipo aqui. Isso é praticamente tudo o que está na página-mestre neste tamanho, o que podemos fazer é ir para você os painéis de widgets para obter uma janela, que é biblioteca, e nós queremos ir para painéis e, em seguida, acordeão. Então clique e arraste isso aqui para cima do topo. Vamos nos certificar que diz que pode fechar. Tudo o que isso vai fazer é torná-lo para que possamos clicar e expandir e fechá-lo. Mas não precisamos desses três . Isto é apenas se você tinha alguns títulos em uma página e você pode clicar e ele dá mais informações, mas podemos usá-lo para uma navegação também. Então o que queremos fazer é mover isso primeiro, ter certeza de que estamos na camada certa. Então, estamos no cabeçalho. É um bom acordeão. Podemos ver. E então o que queremos fazer é que não precisamos deste aqui, então eu apenas clique nele e vejo como ele está realçado. Alguns em uma imprensa, backspace ou delete. Vou clicar neste backspace ou apagar e, em seguida, clicar neste. Este é o que vamos usar. Tudo bem, então o que vamos fazer é primeiro eu vou copiar isso aqui. Então eu vou editar a cópia, e então eu vou para Teoh, certo? Clique sobre isso e dizer escondendo ponto de ruptura para que isso está fora do caminho. Então ele vai desaparecer lá. Vamos reinseri-lo em outro lugar. Queremos que Teoh duplo-clique aqui para que tenhamos apenas este título aqui. Então é um cursor e, em seguida, basta ir para editar colar e que irá colar o logotipo lá. Queremos centralizá-lo para que possamos ir para a janela e, em seguida, texto e, em seguida, centralizá-lo ali mesmo porque esta atuação é parte do texto Lá, ele está na linha e alguém fechar isso para voltar para a ferramenta de seleção. E nós realmente não precisamos disso aqui. Então, se eu clicar nele novamente e clicar 1/3 tempo, selecionamos esta seção de texto aqui. Não precisamos disso. Então pressione backspace ou delete e, em seguida, esta área nenhum sinal. Clique nele e ele alterna, ele abre, ele fecha. O que precisamos para dio é ir para o menu vertical na biblioteca de widgets e clique e arraste para que ele é e ver como ele tipo de destaca ele. Deseja certificar-se de que ele está lá dentro e testar se você pode clicar e certificar-se de que ele aparece e reaparece. Tudo bem, se não acontecer, apenas tente reinseri-lo e certifique-se de que estamos dentro desta área aqui. Certo, então o que Enfraquecer Dio é clicar e arrastar isso para ocupar todo esse espaço aqui. Tudo bem. Disse que você tem uma idéia do que vamos inserir aqui e vamos clicar e arrastá-lo para cima demais e, em seguida, certificar-se que ele vai todo o caminho através. Eu quero que isso fique 100% certo. A mesma coisa para isto. Clique nisso uma vez, clique nele novamente. Poderia arrastá-lo mais de 200%. Tudo bem, agora precisamos personalizá-lo um pouco. Então vamos trazê-lo para cima. Bibliotecas RCC. E eu vou clicar neste para que vejamos o item de menu normal, e eu vou mudá-lo para esta cor e eles são todos editados juntos de nossas opções anteriores . Aqui, você pode ver essa edição juntos e clicar nela novamente e, em seguida, rolar. Vamos torná-lo tipo de rato de cor complementar para baixo. Mesma coisa, estado ativo, mesma coisa. E podemos adicionar uma transição se quisermos esta. Eu só vou ter mudança imediata, então não há atraso, e vamos adiar isso. Vamos em frente e voltar para aqui. Certifica-te de que ainda temos o outro e reparamos de volta. Aqui temos isto. Isso ainda está aqui em todas as outras páginas do lado maior, então não queremos isso. Então o que faríamos é ou neste, clicamos com o botão direito do mouse ocultar e quebrar ponto. Ou se acabarmos neste, temos um clique direito sobre ele e dizemos Esconda-se em outros pontos de quebra”. Então, de qualquer maneira, então eu volto aqui ou eu vou apenas clicar com o botão direito. Certifica-te de que esta coisa toda está seleccionada. Lá vamos nós. Certo. Consumidores, temos que selecioná-lo primeiro. Então estamos presos em todo o objeto e nos escondemos no ponto de ruptura. Tudo bem, então vamos testar isso. navegação fica muito pequena. Então vai mudar para isto. E precisamos que isso seja fechado por padrão. Então feche isso e vamos para Small. Maior. E lá vamos nós. OK, isso vai tentar isso. Arquivo navegador de avistamento anterior. Tudo bem, então vamos redimensionar isso. E uma vez que chega a um certo ponto onde a navegação fica um pouco apertada e também mais perto do tamanho dos tablets, lá vamos nós e também telefones celulares. Então, se eu clicar nisso, vai derrubar isso. Eu posso navegar, navegar por aqui em um telefone ou tablet, Clique aqui e assim por diante para que você possa personalizar o fundo do que também. Podemos personalizar. Se você fez um menu manual, nós poderíamos incluir os outros dois links também. Depende do que você quer para essa alternativa. Muitos lá. Então, só para mostrar outro exemplo de capacidade de resposta, obrigado e eu vou ver na próxima lição 39. 10.1- Como projetar e adicionar uma imagem a: no início do curso, falamos sobre um favor. Imagem de Con. É esse ícone favorito que se você adicionar uma página da Web a uma lista de favoritos ou quando estamos realmente no site, no topo da barra de título verá uma imagem minúscula, e ela varia de acordo com o tamanho em telas diferentes de dispositivos diferentes. Mas o legal do Adobe Muse é que podemos escolher uma imagem mesmo que ela não esteja no tamanho correto. Enquanto for um quadrado, podemos adicionar isso como uma imagem de favor. Então, se você está no Muse e você tem que arquivo e, em seguida, as propriedades do site e aqui abaixo sob conteúdo favor con imagem, você clica nessa pasta e seleciona um arquivo. E assim normalmente teríamos favorecido a conduta I c. O no diretório raiz. No entanto, é um pouco mais complicado do que isso agora, com diferentes dispositivos e tamanhos de imagem diferentes. Mas com musa, enfraquecer, selecionar ainda um arquivo maior e musa irá redimensioná-lo e adicioná-lo para nós. Então abra a loja de fotos. Se você tem a Creative Cloud, você deve ter acesso a isso. Se você tiver toda a Creative Cloud. Se você tem musa através disso, e há duas maneiras de criar. Se quisermos apenas criar o tamanho padrão, você iria para o arquivo novo e, em seguida, 32 pixels por 32 pixels a 72 pixels por polegada. Algo rápido criar, e então você abre uma das imagens que você deseja usar para que você possa ir para a alta rez ou você pode ir para a baixa rez de qualquer maneira, por exemplo, se vamos usar esta imagem aqui, nós poderíamos tirar isso da aba lá, usar o movimento para no painel de ferramentas e, em seguida, clicar e arrastar isso para aqui. Vai ser muito maior, , então podemos segurar, deslocar e clicar e arrastar o canto para manter a proporção correta. E então nós só queremos olhar para a composição e para isso, como queremos, em seguida, bater, entrar ou retornar em um controle de imprensa mais, e então aqui vemos os pixels reais 32 pixels por 30 pixels de disparo. E então você diria que como um PNG é bom, então arquivo salvar como e, em seguida, PNG e eu realmente tenho um nos arquivos de suporte con favor con isso. Aquele ali está? Eu tenho outro que é maior do que porque eu vou te mostrar outra maneira de criar um favor. A imagem não tem que ser tão pequena para começar. Então eu vou para o arquivo aberto e das imagens de alta resolução. Basta selecionar um. Temos este aqui. E se formos para a imagem e um tamanho de imagem que nos mostre a resolução atual, é uma resolução muito alta. 12 70 pixels por polegada. Podemos redimensioná-lo com o corte predefinido. Lembre-se, queremos ter a mesma largura e altura porque isso precisa ser um quadrado. Se tentarmos adicionar um favor, imagem con e usar. E não é um quadrado, ele vai dizer, Ei, Ei, eu preciso de uma imagem quadrada. Então eu tenho este 1000 pixels por 1000 pixels e, em seguida, 72 pixels por polegada. Nós só queremos trabalhar na composição aqui. Podemos olhar para ele 100% em um pouco. Tudo bem, clique duas vezes, depois controle ou comando. Além disso, tudo bem. Parece bom. E você pode dizer isso como um PNG no seu computador. Agora eu tenho que e eles já são favor con lá e, em seguida, favor con grande e assim em Muse. Uma vez que queremos adicionar esse bom de propriedades do site de arquivo e, em seguida, ir para favorecer imagem con, abrir que favor con grande, em seguida, ok, e agora quando você vai para o site de visualização de arquivo e navegador e, em seguida, você pode ver lá em cima no canto superior direito ao lado do título da página, temos que favor con imagem. Então, se adicionarmos aos favoritos em alguns dispositivos móveis, na imagem será o ícone. Se salvarmos uma página da Web como um atalho, por exemplo. Então, é assim que podemos adicioná-lo facilmente no Adobe MEES Obrigado, e eu vou ver na próxima lição. 40. 10.2 - Verificar a consistência, facilidade de uso e como adicionar títulos: estamos prestes a exportar e/ou fazer upload do nosso site. Agora, certifique-se de que sua página da Web parece consistente em toda a linha. Então, o que eu gosto de fazer antes de um lançamento, um site é apenas passar e ter certeza de que há consistência. Certifique-se de que os links funcionem e tudo isso. Agora, neste, eu fiz muitos tipos diferentes de lança apenas para dar exemplos diferentes com os quais você pode trabalhar, como listas HTML incorporadas, colocando texto dentro de caixas de texto específicas, ar que flui para o lado. Então não vai haver muita consistência além da barra de navegação. Ou talvez onde estão os títulos. Mas vamos passar e você pode olhar para isso, é claro, no navegador. Mas eu também olho para ele em thes páginas da Web, e eu percebo, por exemplo, este aqui onde diz sobre nós se eu ir Teoh são estilos de parágrafo tem título de página agora na outra página. Quando tínhamos consertado mais cedo, você notou no maior? Eu preciso de uma correção deste título página. Lá vamos nós, e isso estava em perguntas freqüentes sobre os pontos de quebra padrão de 1000 pixels, então conserte isso e quando eu ficar menor, é claro, você mudaria o tamanho do fundo certo? E depois contacte-nos. Você poderia apenas ter certeza que este ar está todo alinhado bem no meio desta coluna aqui. Veja esse guia inteligente aqui e o que mais para ir redimensionar e, em seguida, olhar para o acesso X e Y . Se avançarmos isso, veremos que mudará 32 permanecerão os mesmos 91. Então, se você quiser digitar isso em ST 90 e, em seguida, ir para os outros, digamos, por exemplo, este redimensionar, e então por que acessar 90? Ele só vai movê-lo para cima, então está exatamente no mesmo lugar. Há apenas um exemplo de busca de consistência e, finalmente, finalmente, redimensionar as mídias sociais. Então, se formos para a pré-visualização aqui no Muse, saberemos onde isso é. Dúvidas contato. Portanto, é alinhamento consistente e posicionamento consistente e estilo de fonte de todos os títulos na página. Isso é apenas um exemplo. Também precisamos adicionar títulos se você notar que não apenas o título da parte superior da página com o título literal da página é se estamos visualizando esses títulos. Era apenas o nome da página que não é bom para a otimização do motor de busca Seo. E nós realmente precisamos do título personalizado de Ada lá. Então, em cada uma das páginas e títulos, assim você pode simplesmente ir para a página e, em seguida, as propriedades da página e em opções. Aqui está o nome da página. E então o quê? Podemos dio desmarcar o mesmo nome da página e manter o nome da página. Eles são a mesma causa que é o nome nesta navegação e o título da página vai ser diferente. Então, o que dizer e, em seguida, sobre Paige Paige Propriedades e, em seguida, desmarque dizer HMAS nome da página . E então este será misturado e além sobre nós apenas acrescentando que o nome da empresa são. Então eu continuei na frente e fizemos isso para todas as páginas. Mesma técnica. Então agora esqueça um arquivo anterior avistamento navegador mais difícil do que você pode ver. Os balões superiores e além foram adicionados ao título da página e, em seguida, início para Clique em Sobre . Tem sobre perguntas. Contato que também direções nas mídias sociais é É assim que adicionamos títulos a cada página. Se não quisermos que ele seja o mesmo nome exato que os nomes das páginas aqui 41. 11.1 - upload de Adobe Business Catalyst: Uma vez que temos o nosso site como queremos, podemos ir em frente e realmente exportá-lo e ou carregado. Então, uma maneira de fazer isso é usar o Catalyst negócio adobes. Então, se você vai para o arquivo e, em seguida, publicou um catalisador de negócios e ele está pedindo um nome de site e essa palavra ou palavras irá para aqui, então será o seu nome de site dot business catalyst dot com. Isso não será seu próprio ponto com. Vamos ver como fazer isso. Mas para este, é bom testar. E você também pode usar planos de hospedagem adobes. Custa mais. Se quiser usar isso. No entanto, vou apenas mostrar como usar o Catalyst de negócios, que vem com a Creative Cloud que não custa mais. E você tem opções aqui, publicou um novo site, e então você pode personalizar o euro. Então eu vou chamá-lo de mistura e além do site de teste, e eu encorajo você a mudar alguns do texto e, ah, você sabe as informações de contato porque nós não queremos realmente publicar esses balões e além do site, Sabe, esta é uma empresa de verdade que me deu permissão para usar suas fotos e textos para o projeto da turma. Mas você quer publicar seu próprio site. Então, seja lá o que você tem trabalhado, se você está trabalhando nisso exatamente, basta mudar o texto e as fotos um pouco. de Osdealta resolução são bons para usar. Os de baixa resolução são transmitidos por eles e você pode, você sabe, mudar os nomes que são mais baixos aqui, e você pode então ir em frente e publicá-lo como um teste, se quiser. Hum, você provavelmente tem criado seu próprio lado, mas se você foi ao telefone comigo, tudo bem também. Então eu quero colocar Bloom para estar no local de teste e, em seguida, para o euro. Vidas têm misturas e além, você sabe, clique. OK. E então ele está exportando todas as páginas que cada equipe l as imagens CSS e qualquer outro conteúdo, e é realmente revesti-lo para nós e, em seguida, enviá-lo para que possamos visualizar este site. Tudo bem. Então publicado, completo. E agora eu estou na internet aqui balões e além do ponto de negócios catalisador dot com forte barra índice dot html, que é o nome do arquivo padrão que começamos. Então essa é a nossa página inicial. E assim podemos passar por isso e clicar. E este site agora está online, e nós contestamos. Certifique-se de que tudo pareça certo. E novamente podemos redimensioná-lo. Obter esse dispositivo móvel legal amigável, muitos lá também. Tudo bem. E depois direcções. Os terceiros conectam aqui o mapa incorporado do Google e, em seguida, as redes sociais. Tudo bem, vamos entrar em contato e contestar isso, mas em meu nome Olá. Ameaças no site. Tudo bem, clique em enviar. Diz formulário recebido. E eu estou no meu Gmail em outra janela e eu recebi o e-mail. Então isso funciona. Já está configurado com um catalisador de negócios. Agora isso não faz. Claro, eu pareço profissional dele comparado com você sabe o seu próprio ponto com. Agora, como você faz isso? Você pode enviá-lo para a hospedagem da Adobe, e ele se integrará com catalisadores de negócios. E você só tem seu próprio ponto com. Você pode se registrar. Só custa mais. O que? Vamos ver como você pode se inscrever em outras empresas de hospedagem e registro e realmente exportar ou usar o upload de FTP e a musa adobe na próxima lição. 42. 11.2 - Como exportar HTML e CSS de upload e usando: parte da lição anterior. Nós carregamos o site para que pudéssemos testá-lo no business catalyst dot com incluído na assinatura da Creative Cloud da Adobe. Agora, se você quiser usá-lo sobre hospedagem, basta clicar neste link aqui, atribuir um nome de domínio. Será cobrada uma taxa extra, e você pode se inscrever pela Adobe para obter seu ponto com real. Agora você não tem que fazer isso. Você pode usar outras empresas também, então vamos rever algumas opções diferentes agora se você vai para o arquivo e, em seguida, fazer upload para o host FTP agora. Isto é, se você primeiro obter um domínio registrado, e há muitas, muitas empresas diferentes que eu uso Go Daddy dot com, e você pode se inscrever para o seu próprio ponto com como eu tenho boa academia criativa dot com, chad newman dot com E isso é muito barato Agora a hospedagem não é muito ruim também, mas é um pouco mais geralmente, então você precisa registrar seu ponto com e você também pode hospedar seu site através da mesma empresa. Muitas empresas de hospedagem também se registram e vice-versa. Muitas empresas de registro também hospedam, mas eu uso uma empresa diferente para hospedagem. Eu uso sonho host dot com lá muitas empresas diferentes que você se inscrever para, embora, ea empresa de hospedagem é o computador, basicamente o servidor que armazena suas imagens HTML CSS. JavaScript arquiva todos os arquivos que fazem parte do seu site em seu servidor e, em seguida, sua empresa de registro diz para ele ir para esse servidor específico. As instruções serão diferentes, dependendo da empresa de registro, mas você basicamente vai querer entrar em sua empresa de registro e mudar os servidores de nome para apontar para as empresas de hospedagem para que eles terão instruções para preencher isso. E eles têm representantes de atendimento ao cliente que podem ajudar é, bem, maioria das empresas tem isso. Agora, quando você está conectado à sua empresa de hospedagem, eles lhe darão um endereço de servidor FTP para usar, bem como um nome de usuário e senha. O que você estará fazendo, basicamente, basicamente, com esta opção é fazer o upload do seu site do Adobe Muse, usando o nome dos anos, senha e o servidor FTP que nos foram dados da empresa de hospedagem. E então ele vai carregá-lo para que possamos fazer alterações e, em seguida, salvar essas alterações e, em seguida, carregá-lo para o servidor FTP. Isso realmente depende de qual empresa de hospedagem você vai com. E então, é claro, seu nome de usuário e senha. Então isso vai ser diferente. Eu não posso dizer isso, obviamente, porque ah, isso seria através da sua empresa de hospedagem e eu vou ter mais algumas informações no recurso adicional agora é o outro caminho. Teoh, fazer upload do seu site é ir para arquivo e, em seguida, exportar como HTML e o que isso vai fazer. Só vou dar um nome a ela. Mudança de localização, dois balões e além do site. Então, como pasta. E agora eu vou seguir em frente e pressionar OK. Oh, e eu tenho que dar um nome a ele. Então você não pode simplesmente colocar um nome. Isto é um ponto com falso. Obviamente, Obviamente, eu só vou pressionar, ok, ok, ele só quer um ponto com nesse espaço, e isso é exportar todos os arquivos de cada equipe. Não está carregando. Ele está colocando no formato apropriado. Arquivos HTML CSS e JavaScript e imagens em nosso disco rígido local. Agora isso é um aviso só porque nosso formulário de página de contato não corresponde agora novamente, a página de contato que é a única coisa que você também vai querer que Teoh configure com sua empresa de hospedagem. Eles terão instruções específicas para isso. Tudo bem, alguns acertos. Certo, então vou mostrar os arquivos que temos. Então é isso aqui, alguém clique duas vezes sobre isso. E agora vamos dar uma olhada nisso. Temos 1234 56 arquivos html. Chegou a documentos XML, que é a linguagem de marcação lá. E, em seguida, a pasta CSS. Algumas folhas de estilo, imagens. Há imagens de rolo no tamanho correto que queremos e, em seguida, scripts. arquivos PHP, arquivos JavaScript. Então não precisamos saber codificação. Agora você pode abrir esse arquivo HTML, por exemplo, em um bloco de notas ou Dreamweaver e realmente olhar para a codificação. Mas esta não é uma aula de codificação. Nós não precisamos saber codificação, e aqueles de nós que sabem codificação isso é realmente bastante conveniente usar o Muse, e então podemos personalizá-lo mais tarde, se quisermos. Então o que você faria com isso é que você iria pegar todos esses arquivos e você iria carregá-lo para o diretório em vez de usar o upload de FTP do adobe muses. Você usaria um programa gratuito, como o File Zillah, e você usaria suas credenciais de nome de usuário e senha do FTP. Faça login, e você pode realmente apenas clicar e arrastá-los dedo do pé. Carregue-o para o ponto com que você registrou. Então, uma vez que você entrar no registro ponto com e, em seguida, aponte o seu registro o seu ponto com para o seu site de hospedagem. E então você entra em seu site de hospedagem através do servidor FTP usando um FTP Explorer como File Zilla e o que quer que você faça uma alteração. Então você fez isso mudar. Você pode clicar e arrastar isso para cima para substituir o arquivo e, em seguida, as alterações serão aplicadas no site. Outra maneira de atualizar seu site é usar as musas da Adobe e a edição do navegador e A Z desde que você tenha criado o site com o Muse, você pode colocar seu próprio ponto com aqui, e então você clicar em próximo e colocar as credenciais para o upload de FTP e curto de ar do FDP para protocolo de transferência de arquivos. Você só está carregando. Há arquivos HTML, que são as páginas da Web onde devem ser baixadas para o software do navegador, é claro. E assim você não precisa ter Adobe Muse. Você pode realmente entrar em qualquer edição de navegador e clicar em imagens e alterar diferentes aspectos sobre ele. Altere as informações, alterou o texto na página e salve as alterações. Além disso, o Adobe Muse e a edição do navegador estão logados no FDP. E por isso é uma maneira fácil de atualizar o site. Basta clicar em imagens, formato alterado e clicar na formatação de alteração de texto e, em seguida, salvar as alterações. É só mais uma opção. Teoh atualize o site. O que eu faço. O meu método favorito de atualizar sites é realmente apenas exportar os arquivos. Então eu tenho os arquivos. Eu tenho H arquivos humanos e todos os outros tipos de arquivos CSS imagens, JavaScript e assim por diante. E quando eu faço uma mudança de um deles, então eu posso apenas clicar e arrastá-lo para cima e atualizar o site usando meu FTP Explorer. Agora você pode preferir usar apenas musa e fazer alterações lá dentro, e nós ainda podemos fazer isso, e então você pode exportá-lo novamente. Ou você pode simplesmente usar o upload do host FTP no Adobe Muse, literalmente apenas preferência pessoal. Está fazendo a mesma coisa. É carregar as novas imagens, as alterações que fizemos para que o site seja atualizado sempre que fizermos alterações 43. 11.3 - conclusão do curso: obrigado novamente por se inscrever neste curso. Avise-me se tiver alguma dúvida. Esperemos que você tenha aprendido muito sobre os princípios e práticas de design de sites da Web e lançamento sites. Sinta-se livre para postar seu site na área de projetos para feedback e apenas para nos mostrar o que você projetou. Obrigado.