Blog Dicas de Web Design

Dreamweaver - Os segredos para você aproveitar melhor os softwares que usa.

Uma série de artigos que vão ajudar qualquer designer a ter mais tempo para ser criativo.

01 – Troque o editor

Pressione Ctrl/Cmd+U para abrir Preferences e deixe o Photoshop como o editor principal na seção File Types/Editors.

02 – Formate mais rápido

Quando for editar textos no Dreamweaver, circule pelos estilos de parágrafo selecionando o conteúdo e pressionando Ctrl/Cmd e um número de 0 a 6.

03 – Confira seus links

Certifique-se de que não há links ‘órfãos’ em seu site em Sites>CheckLinks>Sitewide. Na paleta Results, clique com o botão direito nos arquivos para checar páginas e links em separado. Você pode conferir Validation e Browser.

04 – Tenha controle sobre arquivos de suporte

Em Code View, clique com o botão direito em paths de arquivos locais e abra seus conteúdos no Dreamweaver. Isso é útil quando se trabalha em arquivos externos de CSS.

05 – Crie links rapidamente

Use a paleta Sites para criar links de páginas existentes no Dreamweaver. Selecione o texto que você deseja usar e segure Shift. Arraste e solte a seleção até o nome do arquivo.

06 – Crie snippets

Snippets são blocos de códigos – em HTML, JavaScript ou CSS. Para construir uma biblioteca, selecione trechos de códigos, clique com o botão direito e escolha Create New Snippet.

07 – Atualize e substitua

É possível mudar conteúdos, parâmetros e até tags de templates e sites com a propriedade Find and Replace. Dê Cmd/Ctrl+F e selecione Entire Current Local Site do menu Find In. Escolha o conteúdo ou o código a partir do drop-drown Search. Copie o drop-down Action e faça suas alterações.

08 – Edite CSSs rapidamente

Clique com o botão direito em um elemento na Tag Selector e um menu aparecerá. Utilize-o para adicionar classes de CSS ou parâmetros ID a objetos HTML.

09 – Comece de novo

Layouts criados no Dreamweaver podem ‘quebrar’ por razões difíceis de descobrir. Preserve seus atributos -body-, as definições de -head- e os estilos selecionando a tag -body- a partir do Tag Selector e pressionando Delete. Uma tela em branco aparecerá com todas as preferências de página intactas.

10 – Mova estilos

Para mover estilos, selecione-os em Code View, clique com o botão direito e escolha Move Styles. Será preciso escolher a folha de estilo na qual o código será adicionado.

11 – Redimensione imagens a jato

A integração do Dreamweaver com o Fireworks torna possível o redimensionamento dos elementos e dos objetos das páginas. Selecione uma imagem e arraste os quadrados de seleção. Quando a figura estiver do tamanho desejado, escolha Commands>OptimizeImage ou clique com o botão direito e selecione Optimize. A imagem será atualizada com a ferramenta do Fireworks e a versão otimizada será exibida no Dreamweaver.

Fonte: Revista Computer Arts Brasil, edição 21, pg. 45

Posts Relacionados

  • 30 bibliotecas jQuery de efeitos de texto que você precisa conhecer

    Que tal ter uma enorme biblioteca de efeitos de texto jQuery que você pode facilmente inserir na sua página principal? Aqui estão 30 efeitos de texto jQuery que você pode usar para estilizar, animar, e basicamente mudar as regras de texto na web, mesmo sem ter que escrever uma linha de CSS.

  • Sites otimizados para smartphones e tablets. O que é um site responsivo?

    Muitos dispositivos habilitados para navegar na internet exibem o site completo em sua pequena tela. Usuários dão zoom e voltam para ler partes do site. Embora essa seja uma solução impressionante do ponto de vista dos fabricantes, para os clientes pode ser uma experiência frustrante. Hoje é possível resolver estas questões de interface facilmente graças aos avanços na área de web design. Enquanto, no passado, era necessário ter uma versão móvel do site, agora é fácil manter um site que serve a todos os dispositivos. A solução é um site responsivo.

© 2017 iDesigns Studio. Todos Direitos Reservados.
Design Gráfico e Web Design - Centro, Vitória, ES