Apostila Desenvolvimento Web com HTML CSS e JavaScript

Online. 

Só clicar.

Dá para imprimir.

https://www.caelum.com.br/apostila-html-css-javascript/

;)

Apostila Dreamweaver Creative Cloud - em português

Baixar e ler, grátis!Apostila Dreamweaver Creative Cloud 
http://www.4shared.com/zip/g6cAk9ujce/dreamweaver_creative_cloud.html

Site para cliente

Site criado para cliente.

O que é a Dreamweaver® CC e para quem ela foi desenvolvida?

A Dreamweaver CC é a principal ferramenta do setor para a Web, pois fornece uma solução robusta e integrada para a criação, o desenvolvimento e a publicação de projetos para telas de qualquer tamanho. Com recursos como o novo CSS Designer, o Adobe® Edge Web Fonts (alimentado pelo Adobe Typekit®), os widgets de interface jQuery, a inserção facilitada de áudio e vídeo em HTML5 e uma interface aprimorada do layout de grade fluido, desenvolvedores e Web designers podem criar conteúdo para a Web e para dispositivos móveis com rapidez inédita.

Planejamento defende ou embasa a criação?

Bom, existem os dois momentos da agência, onde podemos dividir em “ideal e diário”. O ideal, é quando o planejamento embasa a criação, ou seja, o planejamento analisa o brief, faz as suas pesquisas em diversas fontes como ferramentas de pesquisa (Marplan, ComScore, Ibope, Hitwise), analisa dados do cliente, vai para a rua conversar com as pessoas; depois esse material serve de embasamento estratégico onde o planejamento vai traçar o pensamento que vai ajudar a marca a conquistar seu objetivo.

Após esse momento, o planejamento, passa o caminho estratégico para a criação fazer, como dizemos na agência, “pirar”. A criação precisa de um embasamento para não sair criando qualquer coisa, ela precisa de um caminho para que a criação seja mais efetiva, que conquiste o objetivo de marketing do cliente.

Esse processo acima é o que chamamos de ideal, pois é dessa forma que a “roda gira” e que seria o trabalho do planejamento aliado à criação, aliás, quando os times se unem e se entrosam, os resultados são sensacionais! O Brasil é uma das maiores potênciais mundiais na propaganda. E não é por acaso, somos, naturalmente, pessoas criativas e isso reflete na comunicação. Planejamento também precisa exercer a criatividade e a criação seu lado estratégico com foco no negócio do cliente.

Mas infelizmente, o que temos visto ultimamente não é o ideal e sim o diário, ou seja, a criação cria e o planejamento defende o que foi criado. É o usual, é diário, é por falta de tempo, é por ter muito job na agência, é por que a conta não é estratégica, por que a mesma equipe atende 4 contas ao mesmo tempo e uma sempre é o “patinho feio”, enfim, justificativas são várias, mas todas caminham para o mesmo ponto. Estão erradas!

Quando o planejamento defende a criação, e não a embasa, parece quase que uma desculpa sobre algo que foi feito. O cliente, as vezes, nem pediu o que foi feito. Ok, a criação lê o brief, entende, mas as visões frente ao planejamento são, obviamente, diferentes. Aliás, essas visões se complementam no trabalho final. O cliente as vezes precisa apenas de uma ação no Facebook e a agência lhe apresenta um hotsite com uma promoção por que entende que aquilo é bom para ele, porém, se o planejamento tivesse visto antes, poderia ver que o problema do cliente é o relacionamento dos consumidores com a marca e que sim, o Facebook, seria a melhor opção.

Planejamento e criação devem sempre trabalhar juntos. Lado a lado, trocando experiências, visões e conceitos. Devem fazer parte de toda a construção do planejamento essas conversas, aliás, o planejamento tem que conversar com todas as áreas, do cliente, ao consumidor final, passando por áreas da agência, mas as coisas devem ter uma metodologia, um cronograma. Sair (criação) fazendo para depois (planejamento) tentar defender o que foi feito, nem sempre, dá certo.

Site de cliente

Quisque do Mané

Design, layout, criação, programação e publicação HTML5

Ana Fernandes

Apostila Dreamweaver CS6 em Português

Aproveitem!

É só clicar e baixar:

http://www.4shared.com/zip/_vyRWB2g/dreamweaver-cs6.html

bjus!!!

Desenho de páginas web usando um layout de grade fluido no Dreamweaver CS6

Figura 1
Nos exercícios a seguir, você vai trabalhar em duas páginas de um site protótipo em Adobe Dreamweaver. Você vai aprender como criar rapidamente um layout de página web que se adapta a diferentes tamanhos de tela e visualizar o projeto em um navegador da web.

1. Iniciar o Dreamweaver, e na tela de layout clique Bem-vindo Grade Fluid. 
2. Na caixa de diálogo Novo documento, o número dentro de cada gráfico de tela de tamanho é o número de colunas através do desenho, e a percentagem inferior de cada gráfico representa a percentagem da largura da tela usada para o corpo da página.
Agora você vai salvar a página pela primeira vez. Isso acontece em duas etapas: Salvando um arquivo CSS e, em seguida, um arquivo HTML. O arquivo CSS define estilos da página e layout, enquanto o arquivo HTML descreve o que está incluído no arquivo.Em outras palavras, para uma página web, CSS e HTML define forma define o conteúdo.

3. Deixe os padrões e clique em Criar.
4. Na folha de estilo Salvar como caixa de diálogo que aparecer, navegue para selecionar a pasta CSS dentro da pasta Lesson05. Com a subpasta CSS selecionado, o nome do arquivo do CSS fluid.css , e clique em Salvar.
5. Escolha Arquivo> Salvar. Nomeie o arquivo fluid.html , e salve o arquivo novo HTML5.Certifique-se de salvá-lo no nível superior de Lesson05 pasta, juntamente com a subpasta CSS.
6. Na caixa de diálogo Copiar arquivos dependentes que aparece, clique em Copiar para salvar os dois arquivos listados (que são obrigatórios) automaticamente para a subpasta apropriada dentro de sua pasta Lesson05.

Como criar sites

A internet oferece diversas formas de se criar um site grátis, que dependendo do seu caso, pode ser mais interessante ou não para você. Se você estiver a procura de um serviço assim, confira as dicas abaixo em que eu mostro as melhores opções para você criar seu site sem pagar nada.

Com Construtores de sites Grátis

Os construtores de sites permitem que você crie seu site com maior facilidade através de um painel de controle online onde você poderá administrar o site, criar e editar as páginas, adicionar imagens, links, arquivos para download entre outras coisas.

Algumas das melhores opções são:
Wix – Permite criar sites profissionais feitos em Flash e HTML5 que é a nova tendência;
Webnode – Este é o mais completo e fácil de mexer;
Google sites – Oferecido pela empresa Google, possibilita desenvolver sites simples;
Weebly – Permite criar um site profissional com facilidade
Yola – Permite criar um site profissional com extrema facilidade;

Site de Aluno

Cléber como você gostou desta página que construímos hoje usando o Dreamweaver, então estou publicando no meu blog. Ok!

Espero que você goste! ; )

Obrigada!

Spry Menu Bar

Em Introdução ao Spry framework para Ajax, conhecemos o Spry e sua integração junto a interface do Dreamweaver CS3. Neste artigo, falaremos sobre o Spry Menu bar – um dos recursos oferecidos por esse framework.

O Spry Menu Bar é utilizado para criar menus drop-down horizontais ou verticais de até três níveis, com o Dreamweaver CS3 é muito simples criar menus desse estilo com tal recurso. Veremos nesse artigo todo o procedimento de criação.

O recurso Spry Menu Bar está localizado em duas abas na Insert bar, na aba Layout e Spry. Observe:

Spry Menu Bar na aba Layout

Spry Menu Bar na aba Spry

Coloque o ponto de inserção no local em que se deseja criar o Spry Menu Bar, em seguida, clique sobre o ícone do recurso demonstrado acima. Feito isso, será exibido o painel Spry Menu Bar; nele, você escolherá uma dentre as duas opções de layout: horizontal ou vertical. Observe:

Exemplo do painel Spry Menu Bar

CSS - Box com cantos arredondados

Estudo de uma técnica

A construção de boxes com cantos arredondados é uma técnica CSS que apresenta muitas variações e cujo assunto tem sido objeto de inúmeros tutoriais publicados na Web. Uma busca no Google por "CSS rounded corners" (cantos arredondados com CSS) retorna mais de 5 milhões de páginas. 
Recentemente Ryan Thrash publicou matéria mostrando um aperfeiçoamento da técnica de construção de boxes com cantos arredondados por ele inventada em novembro de 2003. Àquela época, a técnica teve o reconhecimento dos 'experts', tendo sido citada no Blog do Dave Shea criador do CSS Zen Garden e em comentários abonadores de Eric Meyer na lista de discussão CSS-D. A técnica é comprovadamente atual, tanto que mereceu um aperfeiçoamento. Contudo como já citado existem muitas técnicas para obter o efeito de cantos arredondados com CSS e a opção pelo uso desta ou daquela cabe exclusivamente à você. Eu, considero esta técnica muito interessante e não faço qualquer restrição ao seu uso. 
Este tutorial não é uma tradução do original, visto que o original não detalha a construção dos boxes e aqui farei um estudo de como obter o efeito.

A teoria

Tal como a maioria das técnicas para construção de cantos arredondados, esta também utiliza imagens de fundo para simular os cantos.
As CSS2.1 estabelecem que somente uma imagem pode ser definida como fundo de um elemento HTML. Baseado nestas premissas a solução mais simplista, é a de construir um retângulo com bordas arredondadas e colocá-lo como imagem de fundo de um elemento nível de bloco, como por exemplo, uma DIV. Esta solução fixa as dimensões do box e qualquer redimensionamento de texto arruina o layout. É uma solução restrita a condições muito específicas e seu valor prático é muito baixo.
No outro extremo, surge a solução de se usar 4 elementos nível de bloco, cada um deles tendo como imagem de fundo um dos cantos do box convenientemente posicionado. 
Foi baseado nesta teoria que surgiu a técnica aqui mostrada. A versão inicial utiliza uma imagem constituida de um retângulo com bordas arredondadas para fundo dos 4 elementos. Na recente versão o autor dividiu ('fatiou') a imagem inicial em 4, e usa uma para cada elemento.
Existem duas abordagens de construção do box neste tutorial, a primeira especifica uma largura em unidades CSS em e a outra uma largura em percentagem. Na primeira o box permanece com a mesma largura qualquer que seja a resolução, contudo 'cresce' e 'encolhe' com o redimensionamento do texto (não ocorre ruina do layout) e na segunda o box 'cresce' e 'encolhe' tanto com o redimensionamento do texto como com a resolução.

As 4 imagens usadas

- imagem do canto superior esquerdo - 80 x 203px

- imagem do canto superior direito - 960 x 203px

- imagem do canto inferior esquerdo - 80 x 429px

- imagem do canto inferior direito - 960 x 429px

Notar que a soma das larguras das imagens é igual a 80px + 960px = 1040px. Essa é a maior largura total do box. Se você pretende que o box cresça para larguras maiores, aumente a largura das imagens para os cantos superior direito e inferior direito.

A marcação estrutural

O box tem um título e um texto. Para marcar o título usei neste tutorial o nível seis de cabeçalhos

. Não estranhe, assim fiz para evitar interferência dos estilos do site no título uma vez que não uso o nível 6 no site e assim ele não está estilizado nas folhas do site. Você pode usar o nível que quiser e estilizar como bem entender.
A marcação é a mesma para as duas abordagens de construção. Mudei apenas a classe da DIV mais externa, usando class="fixo" para o box com largura em em e class="elastico" para o box com a largura em percentagem. Isto possibilitou mostrar os dois boxes em uma mesma página (obrigado aos seletores descententes por possibilitar isto):

 

   

Escreva certo


  O verbo haver quando empregado 
com o sentido de existir, é invariável.


  Exemplos:
 
   Havia muitos e-mails

   Houve muitas páginas

   Pode haver outras DIVs
    


 


 

   

Escreva certo


  Use ao invés de para 
significar ao contrário, 
ou seja, com idéia de oposição. 


  Exemplos: 

    Pefiro usar preto ao invés de branco.

    Ao invés de chorar ela sorriu.


  Use em vez de para significar 
em lugar de, ou seja, não há idéia de oposição.


  Exemplos:

    Pefiro usar uma DIV em vez de uma tabela.


 


<

A folha de estilos

#boxes {
 font: 0.9em Arial, Helvetica, sans-serif;
 width:100%;
 color:#333; 
 margin: 0;
 }
.fixo {
 margin: 0 auto;
 width: 25em;
 background: url(canto-inf-dir.jpg) no-repeat 100% 100%;
 font-size: 100%;
 }
.titulo {
 background: url(canto-sup-dir.jpg) no-repeat 100% 0;
 margin: 0;
 padding: 0;
 text-align: center;
 }
.titulo h6 { 
 background: url(canto-sup-esq.jpg) no-repeat 0 0;
 margin: 0;
 padding: 45px 20px 5px;
 color: #333; 
 font-weight: bold; 
 font-size: 1.4em; 
 line-height: 1.0em;
 }
* html .titulo h6 {height: 1%;} /* Hack para IE5 PC */
.conteudo {
 background: url(canto-inf-esq.jpg) no-repeat  0 100%;
 color:#fff;
 margin: 0;
 padding: 5px 35px 45px;
 }
#boxes .conteudo p {
 margin:0.7em;
 line-height:1.2em;
 }
.elastico {
 width:100%;
 background: url(canto-inf-dir.jpg) no-repeat 100% 100%;
 font-size: 100%;
  }

Resultado Final

Teste você mesmo

Redimensione a janela do seu navegador e observe o comportamento dos dois boxes.
Agora aumente e diminua o tamanho da fonte no navegador e observe o comportamento dos dois boxes.

Tabela com bordas arredondadas

Corpo da tabela. Podemos colocar o texto que desejarmos, que a tabela crescerá em altura suficiente para contê-lo. 

Nesta artigo prático de HTML vamos criar uma tabela com as esquinas arredondadas, que poderá servir para destacar alguma informação no texto ou criar uma barra de links lateral um pouco mais vistosa. Abaixo aparece uma tabela como a que pretendemos conseguir. 

O exemplo não é nada complexo. Simplesmente cria-se uma tabela normal, na qual colocamos em cada uma de suas esquinas um gráfico que faz a forma arredondada. Os gráficos que utilizamos nesta ocasião têm uma parte com cor e outra transparente. A parte com cor é a que desenha a borda arredondada e a parte transparente deixa ver a cor de fundo que tivermos colocado na tabela. As imagens podem ser vistas em seguida. Para salvá-las utilize o botão direito do mouse em cima da imagem e selecione a opção que põe "Salvar imagem como..." ou algo parecido. 


Em nosso exemplo, criamos imagens que têm a parte não transparente de cor branca, que corresponde com a cor de fundo da página onde queremos colocar a tabela. Se quisermos colocar uma tabela como esta sobre um fundo diferente do branco, deveríamos criar uns gráficos que tenham a mesma cor que o fundo, no lugar do branco. 


Tabela com esquinas arredondadas 

Esta tabela tem outra cor de fundo, mas foi criada com as mesmas imagens que a tabela anterior. 

O bom de que a outra cor utilizada na imagem seja transparente é que a tabela que criamos pode ter a cor de fundo que desejarmos. Esta outra tabela abaixo foi criada com as mesmas imagens do exemplo e, como se pode ver, tem outra cor de fundo que a anterior. 

Criação da tabela 

Agora vamos estudar o código HTML que precisamos para criar esta tabela com esquinas arredondadas. Provavelmente com outro código HTML mais simples também se poderia construir. 

A tabela que utilizamos contem várias células dispostas em duas filas e três colunas. Nas células das esquinas da tabela colocamos as quatro imagens que fazem o efeito das bordas arredondadas. Para certificarmos de que a colocação das imagens é a correta -procurando que as imagens fiquem coladas nas esquinas da tabela-, utilizamos os atributos que servem para alinhar o conteúdo da célula: align para o alinhamento horizontal e valign para o vertical. 

Na célula do centro é onde colocamos o corpo da tabela, com todo o texto que queremos que vá dentro, suas imagens, etc. O único detalhe a assinalar é que expandimos a célula central para que ocupe duas filas

Dreamweaver CS5 em Português do Brasil

Para conseguir uma versão do Dreamweaver em português não é tão simples assim. Por isso, quero compartilhar este link com vocês.
http://www.webdesigngrafico.com.br/2011/03/traduzindo-dreamweaver-cs5-para.html
Além de conhecer mais um blog de webdesign, lá estarão arquivos para transformar o seu Dreamweaver CS5 en_US em pt_BR.
Ok!!
;)

Adobe Dreamweaver CS6

Adobe Dreamweaver CS6 fornece uma interface visual intuitiva para criar e editar sites e aplicativos móveis. Para criar páginas, use o layout de grade fluida desenvolvido para oferecer compatibilidade com várias plataformas. Reveja designs com a visualização de várias telas antes de publicar. Criedesigns da Web compatíveis com diferentes navegadores e plataformas usando o sistema de layout de grade fluida baseado em CSS3. Trabalhe com mais rapidez e eficiência, desenvolvendo projetos com códigos limpos e padrões do setor para uma ampla variedade de dispositivos e computadores. Crie visualmente designs da Web e layouts de página complexos sem perder tempo com códigos. Ganhe tempo fazendo upload de grandes arquivos com a ferramenta de transferência FTP multithread reprojetada. Faça upload de arquivos de sites com mais rapidez e eficiência para acelerar o tempo de produção. Use o painel integrado do Adobe Business Catalyst no Dreamweaver para conectar e editar sites que você cria no Adobe Business Catalyst (disponível separadamente). Crie sites de comércio eletrônico com a solução hospedada e  muito mais…

Galeria Lightbox Sem PHP

! DICA PARA VISUALIZAÇÃO DAS IMAGENS DESTE POST: CLIQUE NAS IMAGENS PARA VER MAIOR !

Você provavelmente já viu o efeito Lightbox no trabalho durante as suas viagens na web, embora você pode não ter sabido que era chamado Lightbox. Essencialmente, o visitante clica em uma miniatura da galeria de imagens, e uma versão maior aparece no topo da página, escurendo fora o conteúdo da página por trás dele. Este efeito amplamente utilizado faz uso de jQuery e foi originalmente de autoria de Leandro Vieira Pinho. O efeito Lightbox real será desencadeada por hyperlinks que estabelecemos em nossa página. Eles são muito úteis, e neste tutorial, você vai aprender a construir um em Dreamweaver !  

Passo 1

Primeiro, certifique-se e baixar os arquivos do projeto para este tutorial aqui Descompacte o arquivo e armazene os arquivos do projeto em um local que você vai se lembrar, como o seu desktop. Dentro da pasta lightbox você vai encontrar 4 pastas: css, imagens do site, images e scripts. Elas contêm todos os componentes que você precisa.

Passo 2

Agora, vá em frente e lance no Dreamweaver escolha site>novo site.

Passo 3

Em seguida, abra a página LightBox Gallery.html no seu Dreamweaver.

Esta exibirá o código que contém os links para os arquivos JavaScript externo e CSS que nossa página terá, também, algumas funcionalidades adicionais. Certifique-se de salvar o arquivo para a pasta que você definiu como um site acima. 

Passo 4

Agora estamos prontos para ver a estrutura da página, ou seja, a estrutura que vai segurar nossas miniaturas. Vá em frente e cole mais linhas iguais a estas para aumentar a sua galeria.

Passo 5

Depois é só ir na pasta de images e trocar as miniaturas (src) e as fotos grandes (links).

Passo 6

Com as nossas miniaturas e fotos grande  no lugar, agora é hora de acrescentar as imagens da pasta imagens do site e ver o Lightbox acontecendo. Onde diz LAYOUT DO SITE, vc vai inserir o cabeçalho e abaixo onde está vazio, vc vai inserir o rodapé.

Deve ficar assim:

Passo 7

Logo em seguida vamos em Modify>Page Properties> Background Color e escolheremos a cor preta para combinar com os outros elementos da página.

O resultado no navegador deve ser este:

Quero dedicar este post ao meu aluno André.

André, este post é pra você!

DREAMWEAVER CS5.5 + crack FUNFA MESMO! ;-)

O Dreamweaver traz novos recursos e ferramentas adaptadas para qualquer tipo de usuário.

O Adobe Dreamweaver é um programa para modelar páginas da internet, contando tanto com recursos para programadores (com base em sintaxe e codificação) quanto para designers, com a parte visual largamente desenvolvida e aperfeiçoada. Este programa é pesado e requer bastante dos recursos de seu computador para o funcionamento apropriado.

Além disso, ele é um programa um pouco mais avançado, sendo necessário ter certa experiência com as ferramentas disponíveis e as funções do programa. Para enriquecer ainda mais o uso, é ideal ter conhecimento de todas as possibilidades disponibilizadas pelo aplicativo.


Recursos do programa

Logo ao executar o programa pela primeira vez, ele solicita que você defina as linguagens de programação para as quais ele passará a ser o editor principal. Estão disponíveis para a escolha ASP, JSP, ColdFusion, ASP.NET, PHP, JavaScript, CSS, XML e XSL (XSLT). Para a seleção, basta marcar a caixa ao lado de cada uma das opções.

A interface do programa é muito elegante, nos moldes de uma IDE. Além disso, o fato de se parecer com outros editores avançados facilita a utilização para quem já conhece esse tipo de ferramenta. O programa também permite trabalhar utilizando várias guias abertas, o que possibilita lidar com mais do que um arquivo por vez e alternar a leitura entre eles apenas trocando de aba.

Além de uma grande variedade de ferramentas, para auxiliar na visualização, o editor conta com indentação automática e destaque para diferentes termos da sintaxe, conforme a linguagem. Vale lembrar que isso é aplicado apenas ao código de uma linguagem suportada pelo programa.

Trazendo um suporte completo a várias linguagens, o Dreamweaver incorpora diversas facilidades, com uma atenção especial no quesito de criação de sites que se utilizam Javascript e Ajax. Além destas implementações, há ainda novas opções para a navegação de código, que mostra detalhadamente a alteração na tela no objeto selecionado.

Assim como nos outros produtos da empresa, a Adobe procura fazer uma integração entre seus programas, e agora chegou a vez do Photoshop ter uma ponte direta com o Dreamweaver. Basta arrastar um arquivo PSD (Photoshop Document) para dentro de uma página do Dreamweaver que o programa se encarrega de criar um Smart Object (Objeto Inteligente).

Um dos principais destaques, sem dúvida, vai para design remodelado do Adobe Dreamweaver , que além de não mostrar mais a famosa barra do Windows, ainda traz atalhos bem posicionados para você trabalhar com maior facilidade. Existe também um menu no topo do programa onde você escolhe o tipo de usuário, que ao ser selecionado muda a disposição das janelas interiores de acordo com o seu perfil.

Interessante também a opção de divisão de tela, recurso este que ajuda muito quem possui monitores Widescreen, pois agora é possível dividir as áreas de código e visual na vertical. Você também pode escolher o que é visualizado na janela, com a possibilidade de abrir a parte gráfica e de codificação lado a lado.

Vale ressaltar ainda uma das praticidades que o editor de páginas web trouxe desta vez. A era dos vídeos online, não há quem não queira fazer uma página que reproduza vídeos em Flash. Portanto, o Dreamweaver vem com um recurso pré-programado para inserção destes vídeos, assim como players, que têm modelos prontos a sua disposição.



Como instalar e liberar:

1- Instale o software clicando em setup.exe
2- Quando pedir a serial, execute o arquivo keygen.exe e selecione a opção Adobe Dreamweaver CS5.5 v11.5x
3- Ao concluir a instalação, vá em C->Windows->system32->drivers->etc->hosts e adicione o seguinte codigo ao final do arquivo (abra-o com o bloco de notas):

127.0.0.1 crl.verisign.net CRL.VERISIGN.NET ood.opsource.net
127.0.0.1 activate.adobe.com
127.0.0.1 activate-sea.adobe.com
127.0.0.1 practivate.adobe
127.0.0.1 practivate.adobe.com
127.0.0.1 practivate.adobe.newoa
127.0.0.1 practivate.adobe.ntp
127.0.0.1 practivate.adobe.ipp
127.0.0.1 adobeereg.com
127.0.0.1 activate.wip1.adobe.com
127.0.0.1 activate.wip2.adobe.com
127.0.0.1 activate.wip3.adobe.com
127.0.0.1 activate.wip4.adobe.com
127.0.0.1 www.adobeereg.com
127.0.0.1 hl2rcv.adobe.com
127.0.0.1 wip.adobe.com
127.0.0.1 wip1.aobe.com
127.0.0.1 wip2.adobe.com
127.0.0.1 wip3.adobe.com
127.0.0.1 wip4.adobe.com
127.0.0.1 www.wip.adobe.com
127.0.0.1 www.wip1.adobe.com
127.0.0.1 www.wip2.adobe.com
127.0.0.1 www.wip3.adobe.com
127.0.0.1 www.wip4.adobe.com
127.0.0.1 3dns.adobe.com
127.0.0.1 3dns-1.adobe.com
127.0.0.1 3dns-2.adobe.com
127.0.0.1 3dns-3.adobe.com
127.0.0.1 3dns-4.adobe.com
127.0.0.1 adobe-dns.adobe.com
127.0.0.1 adobe-dns-1.adobe.com
127.0.0.1 adobe-dns-2.adobe.com
127.0.0.1 adobe-dns-3.adobe.com
127.0.0.1 adobe-dns-4.adobe.com
127.0.0.1 ereg.adobe.com
127.0.0.1 ereg.wip.adobe.com
127.0.0.1 ereg.wip1.adobe.com
127.0.0.1 ereg.wip2.adobe.com
127.0.0.1 ereg.wip3.adobe.com
127.0.0.1 ereg.wip4.adobe.com
127.0.0.1 wwis-dubc1-vip60.adobe.com
127.0.0.1 activate-sjc0.adobe.com

4- Copie o arquivo CORE10K e cole na pasta C->Program Files->Adobe->Adobe Dreamweaver CS5.5
5- Dê um duplo clique neste arquivo e aperte start, depois F1 e depois F4

Dreamweaver CS5 - O que há de novo

O que há de novo
Adicionar comentário e classificação
Comentários (0)Classificações:0
A seguir apresentamos uma lista dos novos recursos principais do Adobe® Dreamweaver® CS5.

Adobe BrowserLab
O Dreamweaver CS5 integra com o Adobe BrowserLab, um dos novos serviços on-line, o CS Live, que oferece uma solução rápida e precisa para teste de compatibilidade de vários navegadores. Com o BrowserLab é possível visualizar páginas da Web e conteúdo local usando múltiplas visualizações e ferramentas para comparação. Consulte BrowserLab.

Integração do Business Catalyst
O Adobe Business Catalyst é um aplicativo de hospedagem que substitui ferramentas tradicionais da área de trabalho por uma plataforma central para designers da Web. O aplicativo funciona em conjunto com o Dreamweaver e permite que você construa tudo, desde sites básicos controlados por dados até poderosas lojas on-line. Consulte http://www.adobe.com/go/business_catalyst_get_extension_br.

Desativar/Ativar CSS
O recurso Ativar/desativar CSS permite que você desative ou reative as propriedades do CSS diretamente no painel Estilos CSS. A desativação de uma propriedade CSS faz com que simplesmente não haja comentários sobre a propriedade específica sem ter que excluí-la. Consulte Desativar/Ativar CSS.

Inspeção do CSS
O modo Inspeção permite que você exiba visualmente as propriedades de modelo de caixa do CSS—incluindo preenchimento, borda e margem—com detalhes, sem leitura de código ou necessidade um utilitário separado de outros fabricantes como o Firebug. Consulte Inspecionar CSS na visualização ativa.

Layouts iniciais de CSS
O Dreamweaver CS5 inclui layouts iniciais de CSS simplificados e atuais. Os complexos seletores descendentes dos layouts do CS4 foram retirados e substituídos por outros mais simples e fáceis de entender. Consulte Criar uma página com um layout CSS

Arquivos rel. dinamicamente
O recurso Arquivos rel. dinamicamente permite que você identifique tudo nos arquivos e scripts externos necessários para montar páginas de Sistema de gerenciamento de conteúdo (CMS) com base em PHP além de exibir os nomes dos arquivos na barra de ferramentas Arquivos relacionados. Por padrão, o Dreamweaver oferece suporte para identificação de arquivos em estruturas CMS do WordPress, Drupal e Joomla! Estruturas CMS. Consulte Abrir Arquivos rel. dinamicamente.

Navegação de vis. Dinâmica
A Navegação de vis. Dinâmica ativa links em Visualização dinâmica, permitindo que você interaja com aplicativos do servidor e dados dinâmicos. O recurso permite que você digite um URL para inspecionar páginas servidas por um servidor dinâmico da Web e editar páginas navegadas para verificar se elas existem em um dos sites locais definidos. Consulte Visualização de páginas no Dreamweaver.

Dicas de código de classe personalizada PHP
As dicas de código de classe personalizada PHP exibe a sintaxe apropriada para funções objetos e constantes de PHP, ajudando-o a digitar um código mais preciso. As dicas de código também funcionam com suas próprias funções e classes padrão; bem como estruturas de terceiros como a da Zend.

Configuração de sites simplificada
A nova caixa de diálogo redesenhada Definição de sites (que agora é a caixa de diálogo Configuração de sites) torna mais fácil configurar um site local do Dreamweaver para que você possa iniciar a construção de páginas da Web imediatamente. A categoria de servidor remoto permite que você especifique seus servidores remoto e de teste em uma só visualização. Consulte Configurar um novo site.

Dicas de código específicas do site
O recurso Dicas de código específicas do site permite a personalização do seu ambiente de código quando você estiver trabalhando com bibliotecas PHP e estruturas CMS de terceiros, tais como WordPress, Drupal,Joomla! ou outras estruturas. Os arquivos de tema para blogs e outros arquivos padrão PHP e diretórios podem ser incluídos ou excluídos como fontes para dicas de código. Consulte Dicas de código específicas do site.

Aprimoramentos de suporte do Subversion
O Dreamweaver CS5 aumentou o suporte para o Subversion, permitindo que você mova, copie e exclua arquivos localmente, e em seguida sincronize alterações com seu repositório remoto SVN. O novo comando Reverter permite que você corrija rapidamente conflitos de árvore ou reverta uma versão anterior de um arquivo. Além disso, uma nova extensão permite especificar a versão do Subversion com a qual você deseja trabalhar em um determinado projeto. Consulte Usar o SVN (Subversion) para obter e devolver arquivos.

Recursos obsoletos
Os seguintes recursos se tornaram obsoletos no Dreamweaver CS5:

■Relatório de validação de acessibilidade

■Comportamentos de servidor ASP/JavaScript

■Verificar navegador, comportamento JavaScript

■Conectar-se a um servidor FTP/RDS sem definir um site

■Controlar Shockwave ou SWF, comportamento JavaScript

■Criar álbum de fotografias na Web

■Ocultar menu pop-up, comportamento JavaScript

■O InContext Editing gerencia classes de CSS disponíveis

■Inserir FlashPaper

■Inserir/Remover marca da Web

■Integração do Microsoft Visual Sourcesafe

■Barras de navegação

■Tocar som, comportamento JavaScript

■Menu Mostrar eventos (painel Comportamentos)

■Mostrar menu pop-up, comportamento JavaScript

■Linha do tempo, comportamentos JavaScript

■Validar tags

■Visualização Live Data

Banner Flutuante no Dreamweaver

Video aula para dreamweaver ensinando a fazer um banner flutuante

Trabalhando com templates no Dreamweaver

Fazendo um site com templates prontos no Dreamweaver

Um template é um modelo de página que poder ser comprado ou baixado gratuitamente na Internet, este pacote vem com todos os arquivos editáveis para que você o modifique de acordo com sua necessidade.

A primeira providência, é óbvio, é conseguir o seu template, existem varias empresas que comercializam com preços na faixa de 50 dólares e algumas que fornecem gratuitamente templates de uma qualidade menor, usando programas como e-mule ou torrent podemos baixar templates de qualidade gratuitamente, procure no seu e-mule ou torrent templates da série monster, são muito bons.

Vamos usar neste exemplo o templates abaixo. Este foi baixado do site www.myfreetemplates.com.

É importante escolher um template que tenha o mesmo número de links do seu site, pode ser desastroso visualmente, acrescentarmos ou tirarmos um link do template. Dê também preferência a templates, que como o que estou usando agora, forneça o arquivo .PSD para que possamos editá-lo no Photoshop.



Começando

1. Abra o arquivo .PSD do seu template no Photoshop.

2. Vamos alterar as cores do template para isso procure na paleta Layers, a layer que contém o fundo do site, dê um clique nela.

3. Clique no menu Image/Adjustmentes/Hue Saturation.

4. Ligue a opção “Colorize” e mova os controles para procurar a cor desejada para seu site, a opção Hue é a cor, Saturation é a quantidade desta cor e Lightness é o brilho que se vai aplicar.

5. Resultado

6. Perceba que o logotipo da empresa, manteve a cor original, isto aconteceu porque ele está em uma camada diferente, para alterar sua cor devemos repetir o procedimento, isto é, procurar sua layer, selecioná-la e alterar sua cor com o controle Hue/Saturation.

7. Vamos alterar o nome da empresa, selecione a ferramenta texto e marque o texto “Your Company”, altere para o home que quiser e escreva o nome que quiser como título do seu site.

8. Altere, usando a ferramenta texto os 5 links para Empresa, Portfolio, Serviços, Endereço, Contato e Principal.

9. Vamos agora retirar o texto que está na área de conteúdo do site, devemos procurá-lo na paleta Layers e deletar a layer.

10. Vamos usar o comando Save for web do menu File para salvar exportar o arquivo no formato .JPG para que possa ser fatiado no Fireworks.

11. Clique no botão Save e dê o nome de index.jpg ao arquivo.

12. Salve o arquivo PSD, para que se for caso, possa ser modificado em outras ocasiões.

13. Feche o Photoshop.

14. Abra no Fireworks o arquivo index.jpg.

15. Selecione a ferramenta Slice (fatia).

16. Vamos fatiar o site agora, o importante é criar uma fatia para cada link e uma fatia grande para a área de conteúdo, o resto das áreas do site podem ser fatiados da maneira que você quiser, abaixo, o resultado do meu fatiamento.

17. Vamos agora gerar o arquivo HTML, clique no menu File/Export Preview e clique clique no botão “Export”.

18. Nós acabamos de gerar um arquivo HTML, vamos fechar o Fireworks e abrir o arquivo index.htm no Dreamweaver.

19. Dê um clique na fatia grande, a fatia de conteúdo do site e anote a largura, altura e o nome da imagem.

20. Depois de anotar o nome e o tamanho da imagem, apague esta fatia.

21. Clique no “buraco” da fatia.

22. Acesse o modo de código do Dreamweaver e apague a tag de espaço ( ).

23. No lugar da tag de espaço escreva a tab IFRAME, tenha em mãos a anotação da largura e da altura da página, para configurar corretamente os valores width e height.

24. Salve o arquivo e peça um novo, vamos criar o arquivo principal.htm.

25. Neste novo arquivo, clique com o botão direito do mouse no meio da página e escolha a opção “Page Properties”.

26. Clique no botão Browse e procure na pasta Images a imagem que você anotou o nome a pouco junto com a largura e a altura.

27. Clique em OK e escreva na página “Bem-vindo ao site fulano de tal” , formate como quiser.

28. Salve o arquivo como principal.htm e feche-o.

29. Crie um novo arquivo.

30. Repita o item 26 para este novo arquivo.

31. Escreva “Portfolio” e formate como quiser. Salve o arquivo como portfolio.htm.

32. Para efeito deste exercício só teremos o link para o arquivo portfolio.htm, em sua casa você pode criar os outros arquivos e os links para estes arquivos.

33. Feche o arquivo portfolio.htm e retorne ao arquivo index.htm.

34. Pressione a tecla F12 para ver que o principal já aparece na área de conteúdo do site.

35. Retorne ao Dreamweaver.

36. Dê o clique na palavra Portfolio em seu site.

37. Use a paleta Properties para configurar a página que será vinculada a este link e o target.

38. Salve e teste seu arquivo com F12.