Css Básicos Em Adobe Dreamweaver

html css tutorial básico e no Adobe Dreamweaver

Este tutorial se destina a introduzir os conceitos de utiLização de CSS em Adobe Dreamweaver e html para web designers que não estão famiLiarizados com a CSS em web design. CSS Cascading Style Sheet defende e é um sistema para adição de estilo às suas páginas web e conteúdo da página.

Após a leitura deste css tutorial você deve ter um sentimento básico de como usar o CSS em Dreamweaver. Neste tutorial vamos criar um documento em branco, Criar css styLing, Inserir div aa para a página, Inserir uma imagem, E, em seguida, criar um menu a navegação rápida e atribuir propriedades CSS para os elementos na página. O programa utiLizado neste tutorial é e screenshots Adobe Dreamweaver CS3.

Abraham Chaffin Creativecow.net, Cambria, CaLifornia E.U.A. © 2007 Creativecow.net. Todos os direitos reservados.

html documentos:
Criar um novo documento em branco e, em seguida, guardá-lo para iniciar o seu trabalho. Tenho a tendência de sempre guardar documentos antes de eu fazer alguma coisa para que eu possa salvar rapidamente ao longo do tempo usando o atalho (cntrl + s). Quando você cria um documento em branco no Dreamweaver sua página da web já tem conteúdo em que, Você apenas não pode vê-lo no modo de projeto. Para visuaLizar o conteúdo que você pode usar o atalho (cntrl + ~) para alternar entre modo design e código modo ou vá para o menu Exibir código ou menu View design.

O que você deve ver algo como isso deve ser:

Este é o início de seu quadro html documento; é construído por um grande número de tags. Do início de cada etiqueta parece Este e no final de cada aspecto de tag / presente. Todo o documento é composto de o html Tag acima parece html xmlns = " http://www.W3.org / 1999/xhtml " porque tem um modificador xmlns nele. Tag é o final na parte inferior do documento / html. , entre o início eo fim html Tag há dois primário head as tags e tags Corpo. head a etiqueta não é visto, mas fornece muitas partes essenciais e modificadores para que a tag Corpo elementos irão aparecer como. O conteúdo da tag Corpo é o conteúdo que é realmente visível através do seu navegador.

Css elementos:
Antes de inserir qualquer elementos vamos criar um estilo CSS. Prensagem (shift + F11) alterna os estilos CSS moldura ou ir ao menu modificar estilos CSS. No canto inferior direito existe um pequeno ícone que parece . Isso leva-se o â € € œnew css ruleâ caixa diálogo. Vamos começar a atribuir uma regra CSS para a tag Corpo e tornar a cor de fundo branco, em vez de um largo um stark branco. Selecione "tag" para o "Selector tipo" rádio. A partir da "etiqueta" menu suspenso selecione o "corpo" Selector. Selecione "este documento apenas" para o "definir em" rádio e cLique em "ok".

Uma vez que você cLicar em "ok" Dreamweaver Acrescenta código em seu html preparar arquivo para modificar a tag Corpo usando css.

Isto irá trazer também a "regra css definição para o corpo" diálogo janela permitindo-lhe definir a sua escolha entre o "background" da coluna e escolher uma categoria muito amarelo com a cor de fundo ou picker Tipo em ffffcc # e pressione "ok".

Pressionar "ok" executadas Dreamweaver para modificar o corpo css Selector Através da inserção de um Background-Cor Propriedade E um Valor De # ffffcc.

Existem muitas outras propriedades que você pode atribuir ao organismo Selector ou você pode modificá-lo usando a moldura estilos CSS:

Div tags:
Regresso à concepção opinião (cntrl + ~) e vamos inserir uma tag div, vá ao menu Inserir layout objetos div tag, Isso fará com que o â € € œinsert div Taga diálogo caixa. (div tags são os mais comumente utiLizados para armazenar tag diferentes elementos em uma página da Web concebido com a CSS, tais como imagens, Texto, Ou vídeos.)

O primeiro campo na "inserir div tag" caixa diálogo é a inserção: Campo. Este é o campo que se designa a div tag será inserido no html Página. Por omissão, estabelece que a "inserção no ponto", que significa a div tag será inserida onde o cursor foi colocado na página da web. Você também pode escolher "após o início da tag" ou "antes do final da tag" para colocar o seu div tag em um local diferente.

Próximo a encontrar a "Classee:"Campo que é uma matéria que diz directamente respeito ao seu css regras. CSS uma Classee tem um seletor com um período em frente a ele como ".Classe". Classes são utiLizados para atribuir a propriedade ou propriedades a muitos itens em uma página da web. Não temos ainda Classees definidas no presente documento de modo que não há nada que podemos atribuir ainda. O "id:"Campo em branco é também porque não existem ids definidas no nosso css. Ids são utiLizados para atribuir a propriedade ou propriedades de um único item em uma página da web e no css código tem um sinal antes de ele, como "# id". Uma vez que nenhum destes cLique em "novo estilo CSS" e vamos definir uma nova regra.

Desta vez selecione "Classee", como o Selector tipo, Tipo em "CoolClasse" como o, Selecione "este documento só" e prima "ok". Vamos definir a cor de fundo desta Classee com uma fria cor azul, selecionando "fundo" nas categorias e definir a "cor" para algo como # 00ccff. Agora definir a fronteira cor para uma fina Linha preta cLicando em "fronteira", conforme a categoria e, em seguida, escolha o estilo de sóLidos como a gota para baixo e 1 pixel como a largura e preto (# 000000) como a cor. Ou pode ser mais criativo, se você escolher. Agora vamos definir um pouco acolchoamentos em nosso Estado, cLicando em "casa" na categoria coluna e digite "5" para o "topo: Padding "isto irá atribuir o enchimento não só para o topo, mas para todos os lados, se você deixar a" mesma para todos "caixa marcada. Pressione "ok" e Dreamweaver irá criar uma Classee nova regra no seu estilo CSS tag com três propriedades.

Seu "inserir div tag" diálogo caixa agora também tem a sua Classee campo preenchido com "cooltag" - prima "ok" e Dreamweaver vai escrever código em sua página da web com lugar no interior do novo titular Textoo div tag.

Essa div terá nossa Classee que criámos atribuído à div tag e todos os elementos dentro da tag.

Imagens:
Agora vamos inserir uma imagem e associá-lo a nossa turma.
Coloque o cursor fora da div cLicando em qualquer lugar fora do que dentro da página web. A partir do menu Inserir ir para a imagem (cntrl + alt + I). Escolher qualquer imagem que você pode ter disponível em seu computador e pressione "ok". Você pode ignorar a próxima caixa de diálogo bater "ok"; Dreamweaver vai colocar a imagem em sua página da web. CLique direito sobre a imagem e escolha a partir do menu estilos CSS CoolClasse. Isso irá afectar a Classee pré definida para a imagem, dando-lhe a cor de fundo, Padding, E das fronteiras que atribuiu aos ".CoolClasse". Adobe Dreamweaver deveria ter inserir código semelhante a este:

Poder do CSS:
O que torna css poderosa é a capacidade de voltar atrás e fazer modificações do seu estilo e uma vez que têm efeito todos os elementos que atribuiu o estilo de. No css estilos frame você deve ver "todas as regras" e seu estilo ".CoolClasse". CLicar sobre o .CoolClasse Selector e, em seguida, o valor para o Background-Cor (# 00ccff). UtiLizando o seleccionador de cores escolha uma cor diferente, Tais como (# 66ffff). Agora você está usando com sucesso no css Dreamweaver. O único código que foi alterado foi no css, e foi apLicada a ambos os div e os img.

Criar um rápido menu nav
Agora com o conteúdo no div tag vamos quebrar-la e torná-lo em uma Lista navegação.

Colocar cada palavra em sua própria Linha pressionando entra com o cursor inbetween cada palavra. Destacar todas as palavras e cLique direito em seguida, selecione List desordenadas Lista. Agora você tem uma Lista, mas temos de apLicar algumas denominando-o para que a necessidade de se criar uma regra.

CLique no botão adicionar css Css estilos a partir da moldura. Existem várias maneiras de se atribuir o estilo para a Lista, Nós poderíamos criar uma nova Classee chamada é algo como ".ListClasse "e apLicá-la a cada etiqueta Li tornando Li Classe="ListClasse" , mas para este exemplo vamos criar uma regra para todas as tags Li. Selecione "avançada" de rádio e digite "Li" no Selector campo. "Li" corresponde à Lista. Selecione "este documento só" e prima "ok".

Vamos remover a bala, Fazer a cor branca e do tipo de letra negrito peso. Com o tipo de categoria seleccionada escolha ousada a partir do "peso" drop-down e escolha branco (# ffffff) para a cor. A partir da Lista escolher nenhuma categoria a partir do "tipo" dropdown e pressione "ok". Adobe Dreamweaver Criar código no css que afeta oLiTag.

Ter um bom nav menu os itens que você deve mudar do mouse sobre elas. Para fazer isso, precisamos de adicionar um comportamento. Ir para a janela do menu comportamentos (shift + F4). Mostrar todos os eventos cLicando no botão "mostrar todos os eventos" botão . Certifique-se o cursor está em um dos itens da Lista assim que o comportamento é apLicado à Lista item e não outra coisa qualquer. No campo tipo onmouseover Este.Classname = 'CoolClasse'. "este" refere-se a tag "Li" Classename informa o navegador que você deseja alterar a Classee de CoolClasse. No campo tipo onmouseout Este.Classname ='' (que é duas "marcas não uma citação). Isto torna o browser retornar o nome da Classee da tag Li a quase nada quando o mouse se move para fora do elemento. Você tem agora um comportamento apLicado a um item na Lista.

Para obter o comportamento a ser apLicado a todos os elementos que devem ou repita os passos anteriores com o cursor em cada Lista elemento ou copiar e colar o código no código vista. O resultado final em código vista deve ser semelhante a este:

Antes de terminar este tutorial que deve definir o cursor para um lado, uma vez que vai ao longo da Lista como seria normal navegação.
No css estilos frame selecione Li. Na parte inferior do "propriedades" Li "existe um" Adicionar propriedade "Link cLique nele e escolher" cursor "no menu suspenso. Tipo de "ponteiro", como o valor, se não for nas predefinições.

Conclusão
Pressionar F12 e veja o que você fez. Ela provavelmente não parece muito bonito, mas deve dar-lhe uma idéia sobre como css em Dreamweaver trabalha com html eo que faz no seu navegador.

Lembre-se de brincar e se divertir!