[Digite texto] Montando um layout em Adobe Dreamweaver Primeiras consideraes 1. Crie uma pasta para reunir os arquivos do site.

Todo site surge de uma pasta raiz que ser enviada ao ar atravs de um servidor FTP.

2. Primeira coisa a decorar: Esta pasta dever ser carregada no Adobe Dreamweaver sempre que o programa for aberto, para melhor vinculao dos arquivos do site e tambm mais praticidade no programa. Para carregar a pasta do site vamos ao menu Site Gerenciar Sites Novo Site

Abrir a seguinte caixa de dilogo onde devemos clicar em Novo...

[Digite texto] Surge a caixa de dilogo abaixo, onde em nome do site devemos atribuir um nome de identificao e em pasta do site devemos colocar nossa pasta raiz, clicando na pasta cinza at estarmos dentro da pasta do nosso site. Clicarmos em salvar, confirmamos se em pasta do site consta o caminho de nossa pasta, clicamos em salvar novamente.

Vemos a caixa de dilogo a seguir onde devemos clicar em concludo.

Repare no painel direito do Dreamweaver chamado Arquivos. Ele deve estar com o nome de nossa pasta raiz como abaixo. Ao posicionar o cursor sobre a pasta Uma legenda azul identifica o caminho da pasta, como na segunda imagem ao lado.

[Digite texto] Pronto, agora temos o Dreamweaver como nosso maior auxiliar na criao de web pginas, que sero construdas em HTML, mas com o recurso de Design do programa. Alterando o layout para Ferramentas Grficas Prximo ao canto superior direito da tela do Dreamweaver, existe um menu separado chamado geralmente de Designer. Diz respeito ao modo de utilizao do programa. Clique em designer e mude para Clssico. Assim teremos ferramentas visuais e prticas para gerarmos as pginas.

3. Essa ser a rotina de todo dia de trabalho no Dreamweaver. Sempre devemos carregar a pasta que ser enriquecida cada novo detalhe criado. Faa a cpia desse trabalho na rede da escola e tambm em uma mdia segura prpria. Um web site constitudo de arquivos importantes que devem ser mantidos em segurana e com backup contnuo. Criando a primeira pgina Com a sua pasta devidamente carregada no Adobe Dreamweaver, clique em Arquivo, Novo... (.) Com o abaixo, clique em HTML em Tipo da pgina e depois em criar, no canto inferior direito da tela.

[Digite texto] Surge a seguinte tela

Ao lado esquerdo da tela visualizaremos Untitled, que em portugus significa sem ttulo, abaixo vemos trs botes: Design, Dividir e Cdigo. Em dividir, visualizamos o HTML esquerda e o design do site direita. Se clicarmos em cdigo, apenas trabalharemos com o cdigo Html da pgina. Ao clicarmos em Design, apenas veremos a interface visual de nossa pgina. Pouco a frente dos trs, temos um espao onde est escrito ttulo e aparece o texto Documento sem ttulo. Atribua um ttulo para a pgina. Exemplo: Tudo em mang.com Repare abaixo que no cdigo HTML voc ver a TAG Title com o mesmo ttulo que voc digitou. Esse ttulo, online, aparecer na aba do Navegador.

Com o cursor na rea de Design, vamos inserir linhas divisrias que delimitaro o layout da pgina. A primeira linha divisria daremos o nome de base. Na guia Comum, clicaremos em Layout. Aps isso clicamos em inserir Tag Div.

[Digite texto] Surge a caixa de dilogo abaixo

Em id, digite a palavra base. Isso ser importante para identificar ao cdigo de formatao CSS os parmetros do layout da estrutura da pagina. Clique em ok

Perceba que ele delimita um retngulo com o dizer O contedo de id "base" inserido aqui e que isso corresponde no cdigo com a TAG <div id="base">O contedo de id "base" inserido aqui</div>.

[Digite texto] Na rea do design, apague o texto O contedo de id "base" inserido aqui e aperte 5 vezes a tecla Enter. Aps isso clique na primeira linha da caixa da Div como abaixo.

Obs: Cada enter gerou uma Tag <p></p>, que referem-se a pargrafos. Apagaremos cada tag <P>, que apenas sero usadas oportunamente para no confundirmos a criao das prximas div tags, que sero as verdadeiras divisrias da nossa pgina. Com o cursor ainda na primeira linha de nossa div tag, em layout clique de novo em Inserir Tag Div. Agora digite em id a palavra cabecalho (evite cedilhas ,acentos e pontuao em nome das Ids). Clique em ok, voc perceber que na primeira linha ficar uma diviso como abaixo, com o texto O contedo de id "cabecalho" inserido aqui, o qual mantemos a critrio de identificao e delimitao de espao. Clique na segunda linha, onde o cursor aparecer piscando, como abaixo.

Voc ir inserir uma prxima Tag Div com a ID Menu. Aps isso, basta clicar na linha abaixo e criar a nova Div com o nome de conteudo. Sempre com o cuidado de ir para prxima linha a cada div, crie tambm as Ids publicidade e rodape. Obs: o detalhe de clicar em cada linha evita que uma div tag esteja dentro da outra inadequadamente. A inteno dividir a Tag base em outras divises, sendo a base diviso maior, como um grande terreno e as divs tags os cmodos construdos nesse terreno. Observe abaixo se o cdigo ficou semelhante. No cdigo, como abaixo selecione as Tags <p> e pressione delete.

[Digite texto] O cdigo ficar assim:

Perceba pelo alinhamento que as demais Divs esto a direita da Div com o id =base. Isso significa que esto dentro da id =base. Perceba o Id </div> que fecha id =base. Ele est no mesmo alinhamento da id =base, portanto desalinhado dos demais ids. V ao menu arquivo, salvar como. Nomeie o arquivo como index.html. Perceba que o Dreamweaver j indica a pasta do seu site para salvar o arquivo Detalhe: toda a primeira pgina, identificada em um servidor, tem o nome de index.html, portanto atribua esse nome sempre em sua home page ou pgina inicial. Formatando as Div Tags atravs do Cdigo CSS gerado no Dreamweaver Para facilitar sua interao ao formatar a pgina inicial, clique no boto design para visualizar somente o visual de sua pgina. No painel direita do Dreamweaver, existe um painel denominado Estilos CSS. Nesse painel clique em Tudo. O painel ficar como abaixo. Nesse painel, repare o boto Nova regra CSS. Surgir a tela a Nova Regra CSS. Nessa tela, em Seletor selecione a opo Tag, em Nome do Seletor selecione a tag body, em Definio da Regra, selecione Novo arquivo de folha de estilos, para que possamos aplicar esse arquivo a outras pginas de nosso site. A tela ficar como a seguir:

[Digite texto]

Clique em ok. O Dreamweaver pedir para salvarmos o arquivo de folha de estilos. Nomeie o arquivo para formatos.css, e clique em salvar.

[Digite texto] Surgir uma segunda tela, clique em ok direto, pois ela no tem disponvel todas as ferramentas que precisamos para configurar os cdigo que precisamos.

Onde est escrito Adicionar propriedade, clique e digite background-color, e ,na coluna ao lado,digite o cdigo de uma cor ou escolha. Ex: #09F. Prossiga digitando as propriedades como se segue. background-color: cor de plano de fundo. Como aplicamos background color a tag body, voc perceber que ao aplica-lo a cor automaticamente preenche o corpo da pgina. Font-family: em CSS recomenda-se escolher uma famlia de fontes. Isso porque, ao redor do mundo, diversos tipos de fontes existem. possvel que determinado computador no tenha arial, por exemplo, ento em seu PC, a fonte do site ser substituda por uma fonte da famlia escolhida. Lembre-se, um site um objeto internacional. Font-size: Tamanho em pixels da fonte (px). Margin-top: delimitamos a margem do topo da pgina a estar em 0px, pois se ela for calculada automaticamente, em determinados navegadores de internet , o site apresentar um deslocamento na parte superior que pode comprometer a aparncia do site. Text-align: Aplicamos center a tag body para que as div tags se centralizem. Ainda no ser visualmente percebido, pois precisamos configurar as div tags em outra regra CSS. Aps isso clique em arquivo salvar tudo. Tal ao salva o arquivo CSS e o HTML juntos.

[Digite texto] Criando as regras para a base Clique no boto Nova regra CSS. Configure como abaixo:

Agora atuaremos no ID base, ou #base (jogo da velha identifica Ids na linguagem CSS). Perceba que o local onde a regra ser definida o arquivo formatos.css, definido anteriormente caso isso no esteja acertado, o cdigo ser criado fora do arquivo e pode ser perdido. Clique em ok. Clique em ok na segunda tela. Perceba que as propriedades da ID base devem estar selecionadas como abaixo. Adicione as propriedades como na figura abaixo:

[Digite texto] Width: corresponde largura dos elementos. Para uma estrutura de 1024x768 (resoluo padro atual), convencionou-se a medida 955px para a boa distribuio espacial de elementos em web pginas na maioria dos navegadores. Margin: Quando usamos o comando margin sem especificar as suas posies (bottom, top, left, right) determinamos medida uniforme a todas as posies. O Comando auto diz ao cdigo que as margens se adequaro automaticamente ao Layout. A opo auto no foi utilizada sem propsito: especificamos na tag body a regra text-align center (ver regra anterior), que obriga as div tags se centralizarem. Aps colocar Margin auto, perceba no Design que a base se centralizou a margem automtica obedeceu as regras aplicadas na tag body. Background-color: Aplicado orientada a #base, estamos afetando o espao da div tag com essa id. Escolhi a cor branca para o fundo, embora outras cores possam ser aplicadas. Text-align: Dentro da div #base, escolhemos o comando left, para que os textos dentro da estrutura fiquem alinhados esquerda. Caso isso no fosse feito, a programao do text-align realizada na regra anterior (tag body) manteria os textos da pgina centralizados junto s divs.

Exerccio
Aplique as seguintes configuraes as divs que delimitam o cenrio da pgina inicial. Todas devem ser criadas no arquivo formatos.css anteriormente criado.

[Digite texto] Como resultado final, voc ver seu layout como abaixo. Clique em Arquivo-Salvar tudo, para salvar tanto o arquivo CSS como tambm o html. Voc ter uma tela como abaixo, note que j foi digitado o rodap. Pressione a tecla F12 para visualizar a pgina no navegador.

Perceba a centralidade da pgina. Agora iremos preencher a pgina com seus elementos, para depois, atravs do recurso de templates (modelos), gerarmos todas as pginas.

Aula 2 Exerccios.
1. Elabore o banner da fachada do site. Suas medidas sero em 955 px de largura por 175 px de altura. Exporte o arquivo swf na pasta do site e grave o arquivo fla para sua segurana, pois assim poder alterar o arquivo quando necessrio. Nomeie os arquivos de banner.swf e banner.fla. 2. Abra o fireworks e crie um menu de largura de 165 px e altura(sugesto) 465px. A altura pode variar tendo em conta a quantidade de botes para seu site. Caso sejam botes tradicionais (45px de altura), planeje a quantas pginas seu menu remeter e multiplique pelo tamanho do boto. Exemplo: 10 botes vezes 45 px, 450 pixels de altura para o menu. Exporte o arquivo html para a pasta do site, sem esquecer de salvar o arquivo png tambm, por segurana. 3. No photoshop, crie um banner vertical com uma publicidade que desejar. Tamanho: 125px pela altura de 465 px.

Importando o arquivo SWF do Flash para a pgina html

Agora vamos preencher o layout com suas produes. Clique no espao do Cabealho e apague o texto O contedo de id "cabecalho" inserido aqui. Deixe o cursor posicionado no local. V a barra de opes Comum e clique no boto Mdia , escolhendo a opo SWF.

Escolha o arquivo banner.swf, e clique em ok. Sua pgina ficar como abaixo:

[Digite texto] Selecione o objeto cinza que est no cabealho, na paleta propriedades, abaixo no programa, clique em Executar, como abaixo:

Voc visualizar o banner na pgina criada. Clique em arquivo Salvar ou Ctrl-S. Aparecer uma caixa avisando que ser gerado um arquivo javascript, confirme sua criao. Tal arquivos, caso o internauta no possua o flash player instalado em sua mquina, solicitar a instalao do programa do site da Adobe.

Importando o menu para a pgina principal

Selecione o texto O contedo de id menu inserido aqui e apague. Deixe o cursor neste espao. Na guia Comum, clique no boto imagem Fireworks. Surge a caixa de dilogo abaixo: e escolha a opo HTML do

Clique em procurar, selecione o arquivo menu.html. Clique em abrir, a caixa ficar como abaixo.

[Digite texto] Antes de clicar em OK, note ,que a caixa de verificao Excluir arquivo aps a insero deve estar desmarcada. Tecle F12 e visualize no navegador.

Problemas possveis
No sempre, mas pode acontecer de a pgina no executar os efeitos de estados do boto do menu ao importa-lo . Ocasionalmente, o Dreamweaver deixar de incorporar o javascript responsvel pelos estados do boto ao cdigo. Como solucionar esse problema? No painel Files, clique duas vezes no arquivo menu.html, e visualize o menu em cdigo. Dentro da tag <head> , selecione todo a tag script. Exemplo: <script language="JavaScript1.2" type="text/javascript"> <!-function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_nbGroup(event, grpName) { //v6.0 var i,img,nbArr,args=MM_nbGroup.arguments; if (event == "init" && args.length > 2) { if ((img = MM_findObj(args[2])) != null && !img.MM_init) { img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src; if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array(); nbArr[nbArr.length] = img; for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = img.MM_dn = args[i+1]; nbArr[nbArr.length] = img; }} } else if (event == "over") { document.MM_nbOver = nbArr = new Array(); for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up); nbArr[nbArr.length] = img; } } else if (event == "out" ) { for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; } } else if (event == "down") { nbArr = document[grpName]; if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; } document[grpName] = nbArr = new Array(); for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src;

[Digite texto] img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up; nbArr[nbArr.length] = img; }} } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } //--> </script> Copie esse cdigo com CTRL e C, v at o cdigo do index.html. Posicione o cursor antes da tag </head>. Tecle Crtl e V. Pressione F12 e verifique se os botes do menu funcionam. Importante. A pgina ficar como a abaixo:

Inserindo imagens. Na div publicidade, apague o texto O contedo de id "publicidade" inserido aqui. Clique na guia Comum, no boto imagem e selecione imagem. Encontre a imagem que voc criou para a publicidade e clique em abrir. Sua pgina ficara como abaixo:

[Digite texto]

Bem, eis o significado de Dreamweaver, Tecelo dos sonhos. Elaboramos o site como que o tecssemos em uma colcha de retalhos.

Aula 3 Gerando o template

Template ou modelos um recurso do Adobe Dreamweaver em que se estabelece um layout padro do site. Desse padro, todas as demais pginas so geradas, como se procedessem de um DNA. A vantagem de se criar um template que, ao alterar um template que gerou, por exemplo, 500 pginas, todas as pginas podem ser atualizadas, acelerando um processo de atualizao que antes poderia ser penoso. Criando a regio editvel Clique na div contedo e apague o texto O contedo de id "conteudo" inserido aqui. Na Guia Comum, clique no boto modelos e escolha a opo Regio Editvel. Surgir a caixa Nova Regio Editvel. Em nome, d o nome de contedo. A pgina ficar como abaixo:

Ainda estamos no arquivo index.htm, mas agora precisamos salvar esse arquivo como um template. Templates ou modelos so arquivos do tipo .DWT (DreamWeaverTemplate). Para gera-los vamos em Arquivo, Salvar como modelo. Surge uma caixa de dilogo como abaixo:

[Digite texto]

Em salvar como, nomeie o arquivo como modelo. Note no painel Arquivos que surge a pasta templates, com o arquivo modelo.dwt ali. Detalhe: esse arquivo a base das demais imagens, somente o altere quando quiser afetar todo o site. Quando for preciso alter-lo, feche as pginas htmls para que sofram as alteraes.Feche o arquivo modelo.DWT.

Criando uma pgina a partir de um template. Todo o site ser gerado a partir do modelo. Inclusive, sobrescreveremos o arquivo index.html para que ele siga o template. Para criar uma pgina a partir do modelo, vamos em Arquivo, Novo. Surge a caixa de dilogo Novo Documento. Na rea esquerda, clique em modelos, na rea central, perceba que esta o nome que atribumos o site ao gerenci-lo no incio e na direita perceba que vemos o nome de nosso modelo. No canto inferior clique em criar. Veremos a nova pgina com todo seu contedo lateral. Perceba que a nica coisa que podemos editar a div contedo, que nos passos anteriores definimos como regio editvel. Para editar qualquer coisa fora a regio editvel, ser necessrio abrir o arquivo modelo.dwt, na pasta templates. Salve o arquivo como index.html e sobregrave o arquivo. Criando tabelas Agora tempo de preencher o contedo de sua pgina principal, a index. Html. Para isso, criaremos uma estrutura em html para abarcar o contedo que ser elaborado: Importante: esboce a pgina como quer, para saber como dimensionar os elementos que pretende inserir. A pgina inicial o carto e visitas do site e deve ser convidativa s demais pginas, com chamadas e links para todas elas.

[Digite texto]

Para criar uma tabela, clique na guia comum, comando tabela abaixo.

. Surgir a caixa de dilogo

Com o acima devemos determinar o nmero de linhas e colunas. A tabela serve para alocar os espaos onde os elementos sero visualmente dispostos, portanto deve estar na medida correta. Especificou-se a largura de 645 pixels (levou-se em considerao o tamanho reservado ao menu e a publicidade). Espessura da borda 0 pixel, pois no inteno que aparea. Preenchimento da clula 5 pixels, para o texto no ficar colado nas bordas. Espacamento de clula foi especificado 0 pixels. A pgina ficar como abaixo.

Mesclando clulas Selecione as trs clulas da primeira linha como abaixo, usando o clique com arrasto.

Na barra de propriedades, clique no boto Mesclar clulas abaixo.

. Sua imagem ficar como

[Digite texto]

Nessa primeira tela, como sugesto vamos criar um texto de boas vindas e apresentao , como abaixo.

Criando as classes de formatao CSS. Classes so formataes predefinidas que usaremos em nosso site. No painel estilos CSS clique no boto Nova regra CSS . Surgir a caixa de dilogo que preencheremos como abaixo.

Definimos a regra no arquivo Formatos.CSS. Repare que digitamos .titulo. O ponto determina que trata-se de uma classe de formatao. Clicamos em ok e confirmamos a segunda tela. Devemos configurar a classe .titulo como abaixo.

[Digite texto]

Determinados em font-family o tipo de fonte, em font-size o tamanho da fonte e em fontweight a espessura bold, que quer dizer negrito. Selecione o ttulo Seja bem-vindo. Em propriedades , na opo classe, selecione titulo como abaixo:

O ttulo ficar como abaixo.

Exerccio.
Crie a formatao para o texto comum da pgina e dos subttulos como abaixo;

[Digite texto]

Aplique no texto geral da pgina. Usando os recursos j aprendidos, vamos configurar a pgina, aplicar as classes para ter um resultado semelhante ao abaixo. As classes, sendo gravadas em formatos.css sempre estaro disponveis para as demais pginas, portanto, definimos as formataes necessrias nessa etapa quanto ao texto.

Para a segunda linha da tabela ficar com o aspecto flexvel como acima, mesclei as colunas da segunda linha e nessa linha inseri uma tabela como abaixo.

[Digite texto]

Criando hiperlinks.
Selecione a linha veja mais>> do item origens do mang. Na barra de propriedade link, coloque origens.html como abaixo:

Exerccio
Crie links que levaro as pginas do site. Padronizando formatos dos hiperlinks Para uniformidade dos links, vamos criar uma formatao CSS para a tag a, como abaixo.

[Digite texto]

O grifado desaparecer dos links e eles ficaro com a cor desejada. Exercicio Crie a regra CSS para o estado over dos hiperlinks, ou seja a:hover. Configure como abaixo:

Pressione F12 e veja como esta sua pgina no navegador.

Criando as outras pginas atravs do template.

Agora vamos criar as outras pgina do site. Para isso, aproveitaremos o template criado em aulas anteriores. Clique em Arquivo Novo. Na rea a esquerda da Caixa de dilogo Novo Documento, clique em Modelos, selecionando as opes como abaixo:

Clique em criar, teremos um template vazio para preenchermos com tabelas e informaes dessa nova pgina. No site exemplo, observe a pgina origens, formulada abaixo. Agora contamos com as formataes CSS j elaboradas, usando somente as classes de formatao na barra de propriedades.

Exerccio

[Digite texto] Crie a pgina origens (2 pgina), usando o recurso aprendido de tabelas.

Salve o arquivo conforme o link de menu. Ex: origens.html Crie as demais pginas do seu site (a pgina de vdeos criaremos juntos em outras aulas).

Criando a pgina de com vdeos

[Digite texto] Para a elaborao de vdeos Crie atravs do template a pgina vdeos . html Acesse o youtube.com Procure um vdeo da sua preferncia. Como abaixo, clique em compartilhar

Aps isso clique em incorporar. Surgira o cdigo html para criao de um frame. Copie o.

[Digite texto]

No dreamweaver, dentro de uma tabela, incorpore o cdigo. Para isso, clique em dividir, para ver o cdigo e cole o cdigo como abaixo. Pressione F12 e visualize no navegador.

Inserindo html do fireworks