Pacote de software O DreamWeaver, como o FrontPage, se destina ao design de vários sites, incluindo os sites de editores, uma das tarefas das quais é a distribuição de publicações eletrônicas. É adequado para sites pequenos e muito grandes. No primeiro caso, o desenvolvimento é realizado por um único especialista - webmaster. No último caso, uma equipe inteira trabalha no projeto, incluindo o administrador do projeto, o web designer, o codificador HTML, o programador web, o revisor e o gerente da lista de discussão. Muitos especialistas argumentam que os designers da Web profissionais em seu trabalho costumam usar o Adobe PhotoShop para preparar gráficos e o Macromedia DreamWeaver para o design de páginas da Web individuais.

A familiaridade com este pacote mostra que esta declaração tem uma base sólida. Como já fizemos várias vezes, vamos começar a examinar o pacote a partir de sua interface.

6.2.1. Interface do pacote DreamWeaver

A interface do pacote DreamWeaver 4.0 é mostrada na Fig. 6,9. Além da barra de título, barra de menu, barra de ferramentas e janela de trabalho padrão do programa, notamos a presença de várias paletas, que, como nos editores gráficos, estão localizadas na janela de trabalho do programa. A propósito, os nomes das três paletas abertas “Objetos”, “Propriedades” e “Carregar” (Iniciador) correspondem aos três primeiros comandos da seção “Janela” do menu.

Este pacote está integrado do ponto de vista das tecnologias utilizadas ao conjunto de produtos de software da empresa Macromedia, que se destaca cada vez mais no mercado de ferramentas de webdesign. Outros programas neste grupo: Macromedia Director e Flash serão discutidos nos próximos parágrafos deste capítulo. Coletivamente, eles fornecem os principais fluxos de design da Web e cada um é especializado individualmente em uma direção específica.

Primeiro, vamos nos deter na paleta de objetos, cuja aparência é mostrada na Fig. 6,10. A aparência da paleta muda dependendo do tipo de objeto selecionado na caixa de listagem em sua parte superior, ou seja, a paleta pode ser chamada de adaptativa. Por padrão, a lista é definida como "Comum". Na fig. 6.10, esta opção é selecionada na lista aberta. Esta paleta, usando 18 ferramentas diferentes, permite incluir vários elementos na página, em particular (na ordem dos botões na paleta): gráficos (Imagem), um botão animado (Imagem Rollover), cuja aparência muda quando você move o cursor do mouse até ela, uma tabela (Tabela), uma tabela com os dados inseridos nela, preparada previamente em outro pacote de software (Dados Tabulares), uma Regra horizontal, uma Barra de Navegação com botões para navegar no site, um nova camada gráfica (camada de desenho), transferência suave (quebra de linha) em texto, link para endereço de e-mail(Link de e-mail), data atual (Oat.e), animação Flash e Shockwave, predefinição do gerador e objeto FireWorks, miniaplicativos Java e controles ActiveX, objetos reproduzíveis com plug-ins (Plag -ins) e um arquivo HTML externo ( SSI).

A paleta de caracteres permite adicionar um dos 12 caracteres especiais diferentes às suas páginas da web: nova linha, copyright (copyright), marca registrada, notas, incluindo libra esterlina, iene, euro, bem como aspas, travessões e outros sinais (ver Fig. 6.11).

A paleta de formulários, mostrada na Fig. 6.12, serve para criar formulários ( ver § 2.8) e contém os seguintes botões: o próprio formulário (Formulários), um campo de texto (Campo de texto), um botão (Botão), opções de Checkbox e Radio Batton, uma lista / menu (Lista / menu), um campo para transferência de arquivos ( Filefield) e imagens (Imagefield), um campo oculto e um ponteiro de hiperlink para saltar para outro site (menu Jump).

Observe que na parte inferior de todas as paletas no grupo Objeto, existem campos Layout e Visualização que permitem monitorar e controlar a colocação de objetos em uma página da web.

A paleta Frames, mostrada na Fig. 6.13, você permite usar o botão correspondente para selecionar um certo tipo de estrutura de quadro de página com dois, três e quatro quadros dispostos de forma diferente. O número total de opções é oito.

A paleta "Head" permite que você adicione tags e valores de parâmetro apropriados à parte do cabeçalho de um documento HTML, incluindo: tags de meta informações e palavras-chave, descrição do site, parâmetros de atualização do site, valor do link de base (links padrão), links para conexões.

A paleta Invisíveis, mostrada na Fig. 6.14, permite que você coloque favoritos na página (ver também § 4.2 e § 4.3), notas de rodapé e comentários ( ver § 2.5) e scripts Java ( ver § 2.9).

A última paleta na paleta de Objetos adaptativos complexos é chamada de Especial. Nele, conforme mostrado na Fig. 6.16, existem três ícones ou botões, ou seja, miniaplicativos, plug-ins e controles ActiveX.

Não é segredo que na competição entre a codificação manual e o uso dos serviços do Adobe Dreamweaver, o último há muito venceu. Este editor conveniente em todos os sentidos simplifica a vida de qualquer webmaster, economizando tempo e esforço. O que é escrito em um caderno normal em meia hora pode ser feito neste editor literalmente em cinco minutos. E, o mais importante, neste caso, esses erros ofensivos no código, que devem ser procurados e corrigidos, são completamente excluídos. Quer se trate de um layout de página simples ou programação PHP, o Dreamweaver sempre virá para o resgate. E, claro, não há dúvida de que o processo de trabalhar com ele será não apenas mais conveniente, mas também mais fácil. Na verdade, o Dreamweaver fará parte do trabalho para o usuário, liberando-o da necessidade de ter conhecimento em uma área específica das tecnologias da web. O que poderia ser mais fácil? O programa é compreensível para todos e pode ser dominado literalmente em semanas. Este artigo ajudará os usuários novatos a entender os fundamentos do trabalho com o Adobe Dreamweaver ainda mais rápido usando o exemplo do mais recente disponível em este momento versão 9.0. Deve-se observar imediatamente que o editor possui uma ajuda detalhada embutida em inglês, informando sobre todos os aspectos de seu uso. É claro que este artigo não pode, de forma alguma, afetar todos eles. Mas a ajuda tem uma grande desvantagem - uma abundância excessiva de informações. Para entender o básico, você precisa gastar um grande número de Tempo. Tentaremos corrigir essa falha.

Interface

A aparência do programa é bastante simples. Enquanto isso, o espaço de trabalho é organizado de forma muito criteriosa, o que garante seu uso eficiente. A interface do Adobe Dreamweaver consiste em vários elementos, que podem ser convencionalmente divididos em cinco grupos. O primeiro é o menu principal, localizado em um local fixo na parte superior da janela do programa. Inclui várias guias: Arquivo, Editar, Exibir, Inserir, Modificar, Texto, Comandos, Site, Janela e Ajuda. As mais importantes para o usuário são as guias "Arquivo" e "Editar", já que não são duplicadas por nenhum outro menu e são frequentemente utilizadas. Essas guias são típicas para todos os programas e, portanto, não vamos nos alongar sobre elas. O resto das guias no menu principal não são muito importantes, pois são parcial ou totalmente duplicadas por outros elementos da interface ou simplesmente raramente são usadas. O próximo grupo é o menu Inserir, que é essencialmente a barra de ferramentas do Dreamweaver. Ele pode ser movido para qualquer parte da janela do programa, mas é melhor deixá-lo em sua posição original no menu principal. Este elemento de interface pode ser reduzido para ampliar a área de trabalho. O painel Inserir possui várias guias, categorizadas por tipo de dados. A guia Geral contém os elementos usados ​​com mais frequência: hiperlinks, imagens, tabelas, etc. Esta guia é usada com mais frequência. Outras guias incluem o painel Layout (trabalhando com Spry, Tabelas e Quadros), Formas, Dados, Spry, Texto e Favoritos. A guia “Texto” é parcialmente duplicada por outros elementos da interface, e a guia “Favoritos” permite que o usuário crie seu próprio menu.

Um grupo muito útil de guias "Estilos CSS", em que você pode criar novos estilos e editar antigos

À direita da área de trabalho do programa há uma janela com vários grupos de painéis (pode haver quatro grupos no total). Ele não pode ser movido para outro local, mas pode ser escondido ou fechado. Cada grupo de marcadores neste painel pode ser reduzido ou fechado. Quando expandido, o painel é bastante pesado e reduz significativamente o tamanho da área de trabalho. Esta parte da interface é de natureza auxiliar e permite que você execute algumas ações sem abrir janelas adicionais. Por exemplo, o grupo de guias "Estilos CSS" é muito útil, no qual você pode criar novos estilos e editar os antigos, bem como gerenciar várias propriedades de estilos. Outro grupo de guias "Tag Inspector" permite que você gerencie a tag atualmente selecionada: veja suas propriedades e adicione novos ou altere parâmetros antigos. Os outros dois grupos "Arquivos" e "Histórico" são usados ​​com muito menos frequência. O primeiro é projetado para controlar o local e recursos de rede e outras operações, sendo que a segunda desempenha o papel de um registro das operações realizadas. Se desejar, o usuário pode desfazer as ações voltando a um ponto ou outro. Infelizmente, você não pode desfazer ações seletivamente.

Existe mais um grupo na área de trabalho - "Propriedades". Ele exibe todas as configurações disponíveis para elementos de design. Este painel também pode ser minimizado ou fechado, além disso, clicando duas vezes na zona livre do painel, pode ser reduzido (opções adicionais serão ocultadas). As "propriedades" duplicam as funções de outros elementos da interface e são muito importantes, pois permitem formatar vários elementos do site. O conteúdo deste painel muda dependendo do conteúdo selecionado. Em quase todos os casos, você pode especificar o alinhamento (três posições para tipos de dados que não sejam de texto e quatro para tipos de texto). Se você selecionar texto no painel Propriedades, poderá definir um estilo CSS (e criar um novo literalmente na hora), escolher um formato de texto, converter o texto em uma lista e inserir um link no local selecionado. Para gráficos, estão disponíveis configurações de tamanho, recuo, hiperlinks, bordas, etc. Ao trabalhar com tabelas, torna-se possível definir várias configurações o número de colunas e células, bordas, recuos e cores. Este painel também é usado ao trabalhar com muitos outros elementos do site.

O último grupo de componentes na interface do Dreamweaver é a área de trabalho. Ele também tem uma estrutura de favoritos. No programa, você pode abrir vários documentos ao mesmo tempo, entre os quais você pode mover-se livremente. A área de trabalho também inclui várias ferramentas. Painel superior"Documento" permite que você alterne entre vários modos: codificação e design. Além disso, permite controlar como o documento é visualizado no navegador, se possível. Se desejado, este painel pode ser movido para qualquer lugar na janela de trabalho do programa. O painel inferior permite alternar os modos do cursor e controlar o zoom. Além disso, contém informações sobre o documento (tamanho, resolução, etc.) e uma árvore da hierarquia de tags. O último é uma lista de todas as tags pai para aquele dado. Nesta lista, você pode navegar no nível acima até a tag do corpo.

Trabalhando com um documento.

No modo "código" está disponível a edição direta do documento, semelhante a trabalhar no "Bloco de notas".

Em primeiro lugar, para criar uma página, você precisa definir suas configurações básicas. Isso é feito através do menu "Alterar -> Propriedades da página" (tecla de atalho Ctrl + J) ou através do menu de contexto. Na janela que aparece, você pode definir a fonte padrão para texto e links, dar um título à página, definir sua codificação e definir uma imagem de fundo de rastreamento. A propósito, o nome do site também pode ser definido no painel "Documento". Você pode definir o restante dos parâmetros da página manualmente ou por meio do "Inspetor de tags", selecionando a tag do corpo. Freqüentemente, um webmaster novato só precisa dos parâmetros background e bgcolor (a imagem de fundo e a cor de fundo, respectivamente). Para criar metatags, você precisa alternar para o modo "Código" clicando na guia correspondente no painel "Documento". Neste modo, a edição direta do documento está disponível, semelhante a trabalhar no Bloco de notas. No entanto, o Dreamweaver também tem suas vantagens aqui. Por conveniência, todas as linhas do código são numeradas e as próprias tags são associadas a todos os painéis do programa, como no modo "Projeto" (também conhecido como Design). Dependendo do tipo de tags, elas são destacadas em cores diferentes, quebrando trechos monótonos de código, facilitando a identificação. Além disso, ao editar o código, um pequeno menu com uma lista aparece próximo ao cursor opções possíveis... Os itens da lista podem ser selecionados com o teclado ou mouse, após o que são automaticamente substituídos no código, o que acelera significativamente o layout do documento. Por exemplo, para inserir uma imagem em um documento, você só precisa digitar um colchete "angular" de abertura, selecionar a tag img da lista que aparece (para simplificar a pesquisa, você pode digitar a letra "i" - o programa irá filtrar automaticamente todas as outras tags que começam com esta letra), em seguida, coloque um espaço, selecione o parâmetro src no menu que aparece novamente e clique no botão de navegação que aparece, que abre uma janela para pesquisar a imagem desejada. No entanto, é muito mais fácil e rápido inserir imagens através do menu "Inserir". Isso também se aplica às tabelas. Quando você adiciona uma tabela a um documento através do menu, aparece uma janela com configurações para o número de colunas e células, espaçamento, margens, largura, etc. Todas essas configurações, bem como algumas outras, podem ser alteradas após a criação da tabela através do painel "Propriedades". Além disso, você também pode alterar os parâmetros das células selecionando-as na área de trabalho (no modo "Código", basta colocar o cursor no tag desejado). Igualmente útil é a função de redimensionar a tabela, colunas e células usando o mouse. Para fazer isso, mantenha o cursor pressionado na borda e arraste-o na direção desejada. Já agora, para eliminar um elemento do documento, basta selecioná-lo e premir a tecla delete do seu teclado. E para mover qualquer elemento (por exemplo, inserir texto em uma tabela), ele também deve ser selecionado e arrastado com o cursor pressionado.

Não menos ferramenta eficaz no Adobe Dreamweaver é o menu de contexto. Ele duplica os principais comandos e elementos de interface que, segundo os desenvolvedores, exigem acesso rápido... Aqui você pode definir as propriedades do elemento selecionado, incluindo CSS, configurações de alinhamento e formatação. Além disso, por meio do menu de contexto, você pode gerenciar tags, adicionar comentários (também conhecido como notas do desenvolvedor) e até mesmo ir para as configurações da página. A propósito, para alterar rapidamente o código do item selecionado, basta abrir o menu de contexto e selecionar o item Quick Tag Editor. Mas para inserir vários elementos, o painel "Inserir" e a guia do mesmo nome no menu principal são indispensáveis. Todos os itens disponíveis para inserção são classificados e divididos em grupos. Se o elemento requerido ainda não estiver na lista, você pode usar a função "Tag ..." (tecla de "atalho" Ctrl + E). Uma lista completa de tags disponíveis, dividida em grupos, aparecerá na janela que aparece. Além disso, não apenas tags HTML são possíveis, mas também ASP, PHP, etc.

A formatação de texto não é menos conveniente. Por meio de várias barras de ferramentas e menus, você pode alterar o alinhamento do texto, adicionar recuos, criar listas numeradas ou regulares, definir tamanhos, fonte e cor, etc. aparência texto vinculado a CSS. Ao alterar os parâmetros da fonte, o usuário cria novos Estilos CSS(o programa os grava automaticamente no documento). Isso, por um lado, é conveniente, pois dispensa a necessidade de realizar as mesmas ações todas as vezes com textos semelhantes, por outro lado, não é muito bom, pois o usuário pode se confundir na criação. estilos. No entanto, é claro, CSS é muito mais conveniente do que duplicar tags (como fonte), pois economiza o tempo do webmaster e reduz o tamanho final do documento.

Bagatela

Claro, todas as funções do editor acima são muito úteis, mas elas se relacionam principalmente ao layout da página HTML, ou seja, para criar os sites mais simples. Mas o Adobe Dreamweaver permite que você lide com outros tipos de documentos também. O programa suporta script de ação, script Java, XML, ASP.NET, JSP, PHP, scripts e até mesmo documentos de texto simples. É verdade que o objetivo deste último não é totalmente claro (nesse aspecto, o Dreamweaver é claramente inferior ao Bloco de notas em termos de recursos consumidos e velocidade de carregamento). Naturalmente, a marcação automática e a navegação visual estarão disponíveis apenas para documentos habilitados para HTML. Mas em qualquer tipo de documento, o destaque de código permanecerá.

Uma vantagem importante do programa são os layouts pré-preparados. Ao criar um novo documento, um conjunto de modelos também está disponível. Inclui várias páginas de molduras padrão a várias folhas de estilo e até mesmo layouts de design. Os autores do programa criaram várias dezenas de modelos diferentes que podem ser úteis em várias situações, por exemplo, para criar sites de apresentação com recursos e tempo limitados. Ao utilizar os recursos prontos, aparecerá a janela "Gerenciar Sites", onde você pode adicionar um novo site, editar, revisar, bem como importar e exportar um já existente. Ao criar um site, aparecerá um formulário com configurações, onde em várias etapas será necessário definir vários parâmetros: nome e endereço, configurações de conexão com servidor remoto e assim por diante. Este procedimento é parte de outra função útil (mas pouco exigida por usuários comuns) de local e controle remoto sites. Para tais operações, uma guia separada é selecionada no menu principal - "Site". Nele, você pode chamar a janela de gerenciamento do site, verificar links, realizar uma série de outras operações. O mais interessante para um usuário comum neste menu é a função "Relatórios". Ele permite que você verifique o site em busca de várias falhas. Os resultados da verificação são exibidos em painel separado com vários favoritos. Em um deles você pode verificar Links quebrados, no outro - erros de código. Então, por exemplo, em uma das páginas que peguei, encontrei muitos atributos alt ausentes e alguns elementos não totalmente corretos. Além disso, com a ajuda de "Relatórios" você pode verificar a compatibilidade do código com os navegadores. No entanto, se todo o código foi escrito inteiramente usando o Dreamweaver, as áreas problemáticas não serão encontradas, embora, na verdade, em casos raros, o código escrito pelo editor não se pareça exatamente como gostaríamos nos navegadores. Todos os resultados do teste podem ser salvos em um arquivo separado.

Assim, como podemos ver, Adobe Dreamweaver é uma ferramenta poderosa para criar, modificar e gerenciar sites, que é útil para um webmaster novato e usuário experiente programação em Java, PHP e assim por diante. Com o Dreamweaver, você pode realizar um grande número de operações que requerem vários programas sem este editor.

Enviar seu bom trabalho na base de conhecimento é simples. Use o formulário abaixo

Alunos, alunos de pós-graduação, jovens cientistas que usam a base de conhecimento em seus estudos e trabalho ficarão muito gratos a você.

Documentos semelhantes

Linguagem de marcação de hipertexto Páginas HTML... Tornar as páginas da Web acessíveis, apresentar textos e gráficos. Regras básicas e etapas de criação do site, escolha da estrutura da página. Avaliação da viabilidade econômica do uso de editores de HTML.

tese, adicionada em 25/03/2013


Capacidade de trabalhar com editores de texto apenas para a criação de pequenas páginas da WEB. Teoria do Web-design e sua história. Editor do DreamWeaver, seus recursos. Requisitos básicos para uma página da web. Antecedentes do DreamWeaver.

trabalho de conclusão de curso, adicionado em 12/06/2009


Visão geral teórica sobre o problema da criação de um site "Conflitos na organização". Análise de recursos e serviços de informação. Características dos métodos de pesquisa de conflitos nas organizações. Pacote de software Macromedia Dreamweaver para criação de sites.

tese, adicionada em 22/06/2015


Trabalhar com o editor de HTML Adobe Dreamweaver. Etapas e regras para construção da home page do site, formatação de páginas HTML, criação de links de hipertexto, criação e formatação de tabelas. A utilização de materiais gráficos no desenvolvimento do site.

manual, adicionado em 06/07/2011


características gerais Linguagem de marcação de hipertexto. A estrutura do documento HTML. Uma visão geral dos principais recursos do HTML. Os elementos design moderno Paginas web. Análise da aplicação prática do HTML (a exemplo de programas de treinamento).

trabalho de conclusão de curso adicionado em 24/11/2012


Revisão de programas de criação de páginas da Web; análise comparativa do Macromedia Dreamweaver e Front Page. O processo de criação de um site moderno; avaliação da viabilidade econômica do uso do computador. Proteção do trabalho do operador de digitação e layout do computador.

tese, adicionada em 07/07/2010


Dê uma olhada no editor visual de HTML do Dreamweaver. Determinação da estrutura do site da "Fast Studio" LLC. Conteúdo das páginas "Home", "Portfólio", "Contatos". Tags de formatação de texto e como estilizá-lo usando tabelas CSS conectáveis.

trabalho do termo, adicionado em 18/08/2013


Descrição dos recursos do editor DreamWeaver e Front Page. Recursos das linguagens de programação PHP e JavaScript. Requisitos básicos para uma página da web. Especificidade Programas pela sua criação e eficiência de uso.

trabalho do termo adicionado 02/03/2011

Acessibilidade refere-se à criação de sites e produtos da web que podem ser usados ​​por pessoas com deficiências visuais, auditivas, musculoesqueléticas e outras físicas.

Suporte de acessibilidade do sistema operacional

Dreamweaver oferece suporte à acessibilidade em salas de cirurgia Sistemas Windows e Macintosh. Por exemplo, na sala de cirurgia Sistema Macintosh você pode definir preferências visuais na caixa de diálogo Preferências de Acesso Universal (Apple> Preferências do Sistema). As configurações feitas são refletidas na área de trabalho do Dreamweaver.

A configuração de alto contraste disponível no Windows também é compatível. Esta opção pode ser habilitada no Painel de Controle do Windows. Para componentes do Dreamweaver, essa configuração tem o seguinte efeito.

Uso de caixas de diálogo e painéis configurações do sistema flores. Por exemplo, se você definir a cor como branco sobre preto, todas as caixas de diálogo e painéis do Dreamweaver terão texto branco e cores de fundo pretas.

A visualização de código usa a cor do texto do sistema e a cor do texto da janela. Por exemplo, se você definir a cor do sistema para branco sobre azul e alterar as cores do texto em Editar> Preferências> Codificação para colorir, o Dreamweaver não usará essas opções e exibirá o texto do código em caracteres brancos em um fundo preto.

A área Design usa as cores do texto e do plano de fundo definidas usando os comandos Modificar> Propriedades da página; assim, as cores nas páginas geradas serão exibidas da mesma forma que no navegador.

Otimizando o espaço de trabalho para projetar páginas acessíveis

Ao criar páginas acessíveis, você deve associar informações como rótulos e descrições a objetos na página para disponibilizar o conteúdo a todos os usuários.

Para fazer isso, ative a caixa de diálogo Acessibilidade para cada objeto e o Dreamweaver solicitará que você insira informações de acessibilidade ao inserir objetos. A caixa de diálogo pode ser ativada para qualquer objeto na categoria Acessibilidade da janela Configurações.

1. Escolha Editar> Preferências (Windows) ou Dreamweaver> Preferências (Macintosh).
2. Na lista Categoria à esquerda, selecione Acessibilidade, selecione um item, defina qualquer uma das seguintes opções e clique em OK. Mostrar atributos na pasta Selecione os objetos para os quais deseja ativar as caixas de diálogo de acessibilidade. Por exemplo, objetos de formulário, quadros, mídia e imagens. Mantenha o painel ativo quando aberto Permite que você mantenha a posição de foco no painel para permitir que o leitor de tela funcione. (Se esta opção não for selecionada, quando o painel for aberto, o foco estará na visualização Design ou Código.) Imagem fora da tela Selecione esta opção ao usar um leitor de tela.

   Observação. Os atributos de acessibilidade aparecem na caixa de diálogo Inserir Tabela quando você insere uma nova tabela.

Verificador de acessibilidade no Dreamweaver

A partir do Dreamweaver CS5, o verificador de acessibilidade do Dreamweaver foi descontinuado.

Navegue no Dreamweaver com seu teclado

Você pode usar o teclado para navegar pelos painéis, inspetores de propriedades, caixa de diálogo, frames e tabelas sem usar o mouse.

Observação. Você pode usar as teclas Tab e de seta apenas no sistema operacional Windows.

Painel de Navegação

1. Enquanto estiver na janela do documento, pressione as teclas “Ctrl” e “F6 ″ para mover o foco para o painel.

   Uma linha pontilhada ao redor do título do painel indica que o painel está em foco. O leitor de tela lê o título do painel em foco.

2. Pressione as teclas "Ctrl" e "F6" ao mesmo tempo até que o foco esteja no painel desejado. (Para mover entre os painéis em ordem reversa pressione as teclas "Ctrl", "Shift" e "F6" ao mesmo tempo.)
3. Se o painel que você deseja estiver fechado, use o atalho de teclado em menu do windows para exibir este painel e, em seguida, pressione Control e F6 ao mesmo tempo.

   Se o painel desejado estiver aberto, mas não expandido, mova o foco para o título do painel e pressione a barra de espaço. Para recolhê-lo, pressione a barra de espaço novamente.

4. Use a tecla Tab para navegar pelos controles do painel.
5. As teclas de seta são usadas nos seguintes casos.
   • Se o controle tiver opções, use as teclas de seta para mover entre as opções e use a barra de espaço para selecionar um valor.
   • Se um painel contém guias que abrem outros painéis, dê foco para aba aberta e pressione a tecla de seta para a esquerda ou seta para a direita para abrir a guia desejada. Depois de abrir uma guia, você pode navegar por seus controles usando a tecla Tab.

Navegação do inspetor de propriedades

1. Para exibir o inspetor de propriedades, pressione Ctrl + F3.
2. Pressione Ctrl + F6 (somente Windows) até que o foco esteja no Inspetor de propriedades.
3. Use a tecla Tab para navegar pelos controles no Inspetor de propriedades.
4. As teclas de seta são usadas para mover entre as opções.
5. Pressione Ctrl + Seta para baixo / Seta para cima (Windows) ou Command + Seta para baixo / Seta para cima (Macintosh) para abrir ou fechar a seção expandida do inspetor de propriedades conforme necessário ou mova a seta de expansão para o canto inferior direito e pressione a barra de espaço .

A figura abaixo mostra a interface do Adobe Dreamweaver. EM versões diferentes pode haver algumas diferenças.

1. Botão de seleção de layout
2. Botão de seleção de extensão
3. Botão do site
4. Botão de seleção de interface(alternador de espaço de trabalho - 11 opções para escolher). A figura mostra a interface clássica
5. Barra de menus (10 menus com listas de comandos suspensos)
6. Linha de guias (categorias) - 9 guias para tipos diferentes funciona
7. Barra de ferramentas... A barra de ferramentas muda dependendo da guia selecionada (na figura - a barra de ferramentas da guia Texto). A linha de guias (item 6) e barras de ferramentas (item 7) juntas formam o "Painel de Inserção"
8. Linha documentos abertos
9. Barra de ferramentas de código
10. Numeração de linhas de código
11. Seção de código (ao dividir a janela de edição em código e design)
12. Barra de status(tags aplicadas, velocidade de carregamento da página, codificação aplicada).
13. Grupo de painel de resultados(pesquisa, livro de referência, verificação de links, relatórios, etc.)
14. Painéis de encaixe- pode conter painéis Arquivos, Ativos, Fragmentos de código, Bancos de dados, Estilos, inspetor de tags, etc. Os painéis de encaixe podem ser abertos / removidos da janela do programa usando o menu Janela - Ocultar painéis / Mostrar painéis.
15. Seção de design (ao dividir a janela de edição em código e design)

Ao alterar o espaço de trabalho (botão 4), a interface do programa pode ser diferente daquela mostrada na figura acima (versão "Clássica" da interface).

Janela de edição (janela do documento)

A janela de edição é central para a janela do programa.
A página na janela de edição pode ser aberta no modo de código, no modo de divisão de código e no modo de edição visual, no modo Design ou no modo de visualização ao vivo (uma visão mais realista da página).


Visualização de código ao vivo Disponível apenas ao visualizar o documento na Exibição ao vivo e exibe o código real. A visualização Live Code não oferece suporte para edição.

Barras de Ferramentas :

Barra de ferramentas padrão(criar, abrir, salvar, inserir, etc.)

Componentes

Base de dados

Comportamentos de servidor

Quick Tag Editor - usado quando você precisa verificar, inserir ou alterar rapidamente Tags HTML sem fechar a visualização Design.

Barra de aplicação Na parte superior da janela do aplicativo está o alternador de espaço de trabalho, menus (somente Windows) e outros controles.

Seletor de tag colocado na barra de status. Mostra a hierarquia de tags.