Nesta lição, você aprenderá como adicionar ícones de mídia social SVG e criar links a partir desses gráficos. Para utilizar plenamente todos os recursos que o Dreamweaver tem a oferecer, vamos criar um site. Então vamos ao menu do site e vamos criar um novo site. Vamos chamar isso de Mídia Social. Vamos clicar no ícone da pasta para navegar para a pasta e vamos para onde quer que seja você tem os arquivos de lição para o módulo seis e lá há uma pasta chamada Social Media. Vamos selecionar essa pasta, então vamos para as configurações avançadas à esquerda. Vamos abrir nossas configurações avançadas e clique na categoria de informações locais. Para nossa pasta de imagens padrão vamos clicar nessa pasta procurar e vamos escolher a pasta de imagens nessa pasta e vamos clicar no botão Salvar. Então, em nosso painel de arquivos no canto superior direito, agora temos nosso site de mídia social. Agora os arquivos SVG são arquivos gráficos vetoriais escaláveis. Então, o que isso significa? Bem, ao contrário dos arquivos JPEG e PING, que são imagens criadas usando quadrados ou pixels de informações de cores, Os arquivos SVG usam informações vetoriais, assim pontos e segmentos para criar esses gráficos. A melhor coisa sobre SVGs é que eles são independentes de resolução. Então, o que isso significa? Bem, isso significa que você pode torná-los tão grandes quanto quiser ou tão pequeno quanto você quiser e eles nunca perdem a qualidade. Agora eu apenas pesquisei vetores gratuitos de mídia social no Google e eu descobri na web alguns gráficos vetoriais em preto e branco que eu abri no Illustrator e usei esse recurso de exportação de ativos e os salvei como SVGs depois de adicionar minhas próprias cores a esses gráficos. Assim, você pode obter arquivos SVG do Adobe Illustrator. Agora, de volta ao Dreamweaver, vamos abrir o arquivo de código simples. Nós vamos para a visualização ao vivo e quando vamos para a visualização ao vivo, este é um arquivo em que trabalhamos anteriormente, e vamos descer para depois que diz engrenagem, e vamos mudar para o modo Design. Então, lá no topo, vamos mudar de Live para Design, vamos rolar para baixo e depois da engrenagem, vamos apertar a tecla Enter e vamos digitar Siga-nos. E com o nosso cursor naquele Siga-nos, vamos descer ao nosso painel de propriedades e vamos mudar essa propriedade para um título também, para corresponder ao que os outros subtítulos estão em nossa página e então vamos apertar a tecla Enter. Se formos ao nosso painel de arquivos e clicamos na seta à esquerda das imagens, podemos ver que na nossa pasta de imagens temos uma pasta SVG e há nossos três ícones de mídia social lá. Você notará que há um ícone de código ao lado de cada um desses gráficos, não o ícone gráfico que estamos acostumados a ver. Portanto, não podemos clicar e arrastar em um desses ícones porque quando fazemos isso vem como um link para o código real que é esse arquivo SVG, então eu vou apagar isso. Temos que ir ao menu Inserir para inserir uma imagem. E verifique se você está na pasta de imagens e vamos entrar em nosso SVG e vamos selecionar nosso SVG do Facebook, o FB SVG e vamos clicar em Ok. Agora, quando fazemos isso e estamos no modo Design, recebemos este pequeno ícone estranho após o nosso Siga-nos, mas se formos para o modo Design e mudarmos para Live view, e rolamos para baixo, podemos ver que é bem grande. Então vamos clicar nele e para baixo em nosso painel de propriedades, temos as mesmas propriedades que temos para qualquer uma de nossas imagens. Então vamos colocar 50 pixels e clique na tecla Enter e isso o torna agradável e pequeno para o que precisamos. Agora com imagens baseadas em pixels, você realmente tem que se preocupar com o tamanho. Você deseja trazer essas imagens o mais próximo possível o tamanho que você vai usá-los quanto possível porque o navegador da Web precisa processar a imagem maior mesmo se você reduzi-lo no Dreamweaver. Então vamos subir para o menu Live e altere de volta para Design e vamos colocar nosso cursor logo após essa imagem e vamos clicar na barra de espaço. Nós vamos para o menu inserir a imagem e vamos entrar na nossa pasta SVG e vamos escolher twitter.svg, vamos clicar em Ok. Agora nossa imagem vem como aquele pequeno espaço reservado e antes mesmo de irmos para a visualização ao vivo, vamos colocar uma largura e uma altura de 50 pixels e quando vamos para a visualização ao vivo e rolamos para baixo, aqui estão nossas duas imagens para nossos botões de mídia social. Nós vamos para o nosso painel de arquivos e vamos clicar duas vezes em nosso índice e podemos ver na parte inferior do nosso documento, não temos ícones de mídia social, então vamos trabalhar com nossos ícones de mídia social. Agora, se clicarmos nesta barra verde escura, podemos ver que existe... Quando estamos na Visualização ao vivo, há um parágrafo, ele tem uma classe de ícone social aplicada a ele. Então, vamos mudar para a nossa visualização Design e com o nosso cursor ali, vamos ao nosso menu Inserir para inserir uma imagem, vamos pegar aquele SVG do Facebook e abrir. Agora, novamente, estamos recebendo o mesmo visual aqui. Se formos para Visualização ao vivo e rolar para baixo, nossa imagem é grande. Não é tão grande quanto a imagem no último documento, mas ainda é grande o suficiente para caber nessa área. Portanto, o contêiner desta imagem está definindo parcialmente quão grande é. Agora vamos aqui para a aula porque este documento já tem algum CSS embutido. Então, se clicarmos nesta classe e escolhemos a miniatura social para a classe, podemos ver como ele centraliza e se encaixa bem nessa área e podemos fazer isso na visualização ao vivo. Agora com as imagens do último documento e com esta imagem aqui agora, tudo o que eles estão fazendo é nos mostrar aquele ícone do Facebook, mas você pode fazer qualquer imagem em um link. Em nosso módulo cinco criando links, criamos links fora do texto, mas aqui vamos falar sobre como criar links a partir de um gráfico. Então, se tivermos essa imagem selecionada e podemos dizer aqui em nossa área de seleção, temos essa imagem selecionada. Logo abaixo da fonte da nossa imagem em nossa área de links, podemos simplesmente digitar... Faremos um link absoluto http://www.facebook.com e não temos uma página real no Facebook que vamos fazer, então vamos colocá-lo para fora O próprio Facebook e clicamos na tecla Enter e isso aplicará esse link à nossa imagem. Então, nesta lição, você aprendeu a adicionar Arquivos SVG como ícones de mídia social, como redimensioná-los e como criar links a partir deles.
