Depois de criar uma nova página com um layout CSS no Dreamweaver, você tem um número aparentemente infinito de opções para editá-la, mas primeiro precisa determinar quais estilos na folha de estilo correspondem aos elementos que deseja editar.
Como você provavelmente pode imaginar, você pode editar os estilos em um layout CSS de várias maneiras para criar seus próprios designs.
Depois de ajustar os estilos existentes para obter o design básico da página da maneira desejada, você pode criar quantos estilos adicionais desejar.
Você pode usar essas mesmas instruções básicas com qualquer layout CSS incluído no Dreamweaver. Para editar estilos em um layout CSS, siga estas etapas:
Abra um arquivo de página baseado em um layout CSS do Dreamweaver e escolha Janela → Estilos CSS (ou clique na guia CSS Designer para expandir o painel).
O painel CSS Designer é aberto ou expandido.
Clique para selecionar o nome da folha de estilo no painel Origens na parte superior do CSS Designer.
Todos os estilos associados à nova página são listados no painel Seletores.
Selecione o nome de qualquer estilo listado no painel Seletores do CSS Designer.
As regras CSS correspondentes definidas para o estilo são exibidas no painel Propriedades, na parte inferior do painel CSS Designer. Clicar na lista de estilos e revisar suas regras correspondentes é uma boa maneira de obter uma visão geral rápida do design e ver onde as várias opções de formatação de página estão armazenadas.
As tags HTML5 de cabeçalho, .nav e rodapé controlam as seções principais da página. Por exemplo, o estilo do cabeçalho inclui uma regra que torna a cor de fundo verde. Portanto, para alterar a cor da área do cabeçalho na parte superior da página, você altera a configuração da cor de fundo na regra do cabeçalho.
Para editar as configurações de toda a página - como a cor de fundo da página ou a fonte principal, tamanho e cor do texto usado em toda a página - siga estas etapas:
No painel Seletores do CSS Designer, selecione o estilo denominado body.
As propriedades definidas na regra de estilo selecionada são exibidas no painel Propriedades.
Clique no ícone T na parte superior do painel Propriedades e altere ou adicione a fonte desejada e outras configurações de texto.
Você pode alterar a face, o tamanho, o estilo e a espessura da fonte. Para alterar o espaço entre as linhas de texto, altere a altura da linha.
Role para baixo até a área Plano de fundo do painel Propriedades e use a cor bem no campo Cor do plano de fundo para especificar uma cor para todo o plano de fundo da página.
Como alternativa, você pode inserir qualquer código de cor hexadecimal no campo Cor de fundo ou usar o conta-gotas para obter uma amostra de qualquer cor. Para adicionar uma imagem de plano de fundo, clique no campo URL na seção Plano de fundo e, em seguida, clique no botão Procurar que aparece e selecione a imagem que deseja servir como plano de fundo. Use os ícones de repetição de plano de fundo para especificar como a imagem de plano de fundo deve se repetir na página.
Faça quaisquer outras alterações ou acréscimos à regra de estilo.
As alterações nas regras de estilo no painel Propriedades são salvas automaticamente e aplicadas ao conteúdo formatado com a regra.
Para alterar a largura ou outras configurações das áreas de conteúdo principal, que controlam o tamanho geral da página e o cabeçalho, rodapé e barra lateral, siga estas etapas:
Para alterar a largura de toda a área de design principal:
Clique no estilo .container no painel Seletores do painel CSS Designer.
As propriedades da regra de estilo .container são exibidas no painel Propriedades, onde você também pode editar o estilo.
Altere o tamanho no campo Largura ou digite um novo número para a largura de página desejada.
A largura do design da página é alterada automaticamente com base no tamanho que você inseriu. Quando você altera a largura do estilo .container, você altera a largura de todo o design porque todos os
tags e outros elementos estão contidos no
formatados com o estilo .container - e estão todos configurados para expandir para preencher o .container
.
Para alterar o tamanho da área de conteúdo da página, selecione o estilo denominado .content e especifique o tamanho e outras opções desejadas no painel Propriedades.
Se você alterar a largura da área de conteúdo em um layout que inclui uma barra lateral, deverá alterar a largura da barra lateral também.
Para alterar a cor do plano de fundo de qualquer estilo da página, clique no nome do estilo correspondente e altere as configurações na seção Plano de fundo do painel Propriedades.
Por exemplo, nos layouts CSS do Dreamweaver, a barra lateral é definida em um estilo denominado .sidebar1. Portanto, para alterar a cor do plano de fundo, clique em .sidebar1 no painel Seletores, selecione a categoria Plano de fundo no painel Propriedades e selecione a cor desejada. Da mesma forma, para alterar a cor de fundo do cabeçalho, selecione o estilo denominado cabeçalho no painel Seletores e use a cor também.
Para adicionar uma imagem ao cabeçalho:
Selecione a imagem de espaço reservado denominada Inserir logotipo e pressione a tecla Delete ou Backspace.
Escolha Inserir → Imagem → Imagem e selecione uma imagem usando a caixa de diálogo Selecionar fonte da imagem.
Substitua o texto e insira imagens na barra lateral e nas áreas de conteúdo principal.
Você pode adicionar ou substituir texto e inserir imagens em qualquer página criada a partir de um layout CSS, assim como faria em qualquer outra página da web.
Escolha Arquivo → Salvar tudo para salvar a página e os estilos.
Você pode usar a ferramenta Snapshot no Adobe Acrobat CS5 para selecionar texto e imagens e criar uma imagem de uma determinada área em um arquivo PDF. O resultado é comumente referido como uma captura de tela de uma seção em um arquivo PDF. O resultado é uma imagem, e seu texto não é [...]
Projetado para pesquisadores e cientistas, os recursos de medição do Photoshop CC são bastante poderosos. Você pode medir qualquer coisa e contar o número de qualquer coisa em uma imagem técnica, talvez de um microscópio ou telescópio. Se você sabe o tamanho exato de qualquer elemento em uma imagem, você pode descobrir quase tudo [...]
Ao usar as ferramentas Liquify no Adobe Creative Suite 5 (Adobe CS5) Illustrator, você pode dobrar objetos - torná-los ondulados, pegajosos ou pontiagudos - criando distorções simples a complexas. As ferramentas Liquify podem realizar todos os tipos de distorções criativas ou malucas (dependendo de como você as encara) em seus objetos. Vocês […]
Quando você tem texto em seu projeto Adobe XD, pode começar a alterar as propriedades do texto. Essas propriedades incluem Família da fonte, Tamanho da fonte, Peso da fonte, Alinhamento, Espaçamento entre caracteres (kerning e rastreamento), Espaçamento entre linhas (entrelinha), Preenchimento, Borda (traço), Sombra (sombra) e Desfoque de fundo. Então, vamos revisar como essas propriedades são aplicadas. Sobre legibilidade e fonte [...]
Você pode usar o InDesign para criar e modificar gráficos de código QR. Os códigos QR são uma forma de código de barras que pode armazenar informações como palavras, números, URLs ou outras formas de dados. A usuária escaneia o código QR usando sua câmera e software em um dispositivo, como um smartphone, e o software faz uso [...]
Assim como no Adobe Illustrator, as pranchetas do Photoshop oferecem a capacidade de criar páginas ou telas separadas em um documento. Isso pode ser especialmente útil se você estiver criando telas para um aplicativo móvel ou um pequeno folheto. Você pode pensar em uma prancheta como um tipo especial de grupo de camadas criado com o painel Camadas. Seu […]
Empacotar texto no Adobe Illustrator CC não é exatamente o mesmo que embrulhar um presente - é mais fácil! Uma quebra automática de texto força o texto a envolver um gráfico, conforme mostrado nesta figura. Esse recurso pode adicionar um pouco de criatividade a qualquer peça. O gráfico está forçando o texto a envolvê-lo. Primeiro, crie [...]
Ao projetar no Adobe Illustrator CC, geralmente você precisa que uma forma tenha um tamanho exato (por exemplo, 2 x 3 polegadas). Depois de criar uma forma, a melhor maneira de redimensioná-la para medidas exatas é usar o painel Transformar, mostrado nesta figura. Selecione o objeto e escolha Janela → Transformar para […]
Aprenda como aplicar transparência a gráficos SVG no Illustrator. Explore como gerar SVGs com fundos transparentes e aplicar efeitos de transparência.
Depois de importar suas imagens para o Adobe XD, você não tem muito controle de edição, mas pode redimensionar e girar as imagens como faria com qualquer outra forma. Você também pode arredondar facilmente os cantos de uma imagem importada usando os widgets de canto. Mascarando suas imagens, definindo uma forma fechada [...]
