Beruflich Dokumente
Kultur Dokumente
Bem-vindo(a) ao curso de Webmaster do Cursos 24 Horas. O objetivo desse curso ensinar ao aluno todas as etapas do desenvolvimento de websites, desde o seu planejamento at o envio dos arquivos para o servidor web, utilizando o aplicativo Dreamweaver CS6. Nesse curso, iremos desenvolver um site de uma empresa fictcia, chamada Brasil Agricultura, do comeo ao fim. Antes de iniciar o uso do Dreamweaver, importante projetar o desenvolvimento do site. Uma das etapas de desenvolvimento do site a criao de um do layout do site.
1.1. Layout
Layout um esboo em que mostrada a distribuio fsica do website, juntamente com os tamanhos de elementos que sero utilizados nele,, como imagens, animaes e textos. Veja o exemplo do layout criado para a pgina inicial do site que ser desenvolvido nesse curso:
Nesse layout, observe que est indicada a localizao dos principais componentes do site, como, por exemplo, a barra de menu, o logotipo, o texto principal, as notcias, o rodap do site etc. Para o desenho desse layout, foi utilizado o programa Adobe Photoshop. Caso voc no tenha o domnio da ferramenta Adobe Photoshop, um layout pode ser tambm criado em outros programas, como o Corel Draw, o Adobe Illustrator, Gimp, entre outros. Esse mesmo layout tambm pode ser desenhado mo livre como o exemplo abaixo:
Pode-se criar o layout de todas as pginas que sero utilizadas no site, veja o exemplo da pgina Quem Somos dele:
No entanto, para que sejam criados todos os layouts do site, necessrio antes conhecer quais pginas o website ir conter, por isso, preciso criar um roteiro de navegao do site.
Essa ser a forma que o usurio navegar pelo site. Agora, com a navegao definida, importante saber o que cada pgina ir conter.
Observe que em cada uma das caixas (divs) estar uma determinada rea do website. Observe tambm que todas as divs esto posicionadas dentro de uma caixa principal, chamada de Container.
Iremos, portanto, distribuir a altura e a largura dos wireframes dentro dessa resoluo, veja como:
As medidas indicadas na imagem indicam primeiro a largura e posteriormente a altura de cada wireframe.
HTML (HYPERTEXT MARKUP LANGUAGE) O HTML a linguagem padro das pginas da internet. uma linguagem de marcao que interpretada pelo browser para dar formatao e posicionamento ao contedo do site. As instrues e atributos da linguagem HTML so declarados em forma de TAGS, iniciados e finalizados pelas TAGS <comando> e </comando> como, por exemplo: <title> Minha primeira pgina </title>.
At o lanamento deste curso, a verso em portugus do software Adobe Dreamweaver CS6 somente est disponvel dentro de pacotes de programas Creative Suite 6 Design & Web, Creative Suite Master Collection ou Adobe Cloud. Nesse exemplo, iremos baixar e instalar o pacote Creative Suite 6 Design & Web. Localize o pacote Creative Suite 6 Design & Web e d um clique no link Testar (localizado no lado direito da pgina):
10
Observe que ser exibida uma mensagem de confirmao de download. Clique no boto Executar.
Aguarde a janela do assistente de download ser exibida. Quando a janela do assistente de download for exibida, deixe as configuraes padro dela e clique no boto Continuar.
11
Para realizar o download de qualquer programa da Adobe, necessrio ter um conta chamada de Adobe ID. Caso voc no tenha essa conta d um clique no boto Criar uma ID da adobe.
Obs.: Caso voc j tenha uma ID da Adobe, digite o seu e-mail e senha e clique no boto Conectar-se. Na janela que ser exibida, preencha os dados pedidos e crie uma senha para ter acesso ao Adobe ID:
12
Aps voc preencher os dados, d um clique no boto Criar. Observe que agora ser pedido para que voc selecione uma pasta para onde os arquivos de instalao sero copiados. Selecione a pasta rea de Trabalho e clique no boto OK.
13
Aps o trmino do download, os arquivos sero descompactados e a instalao ser iniciada. Caso a instalao no seja iniciada automaticamente, execute o arquivo Set-up da pasta no local onde os arquivos de instalao foram descompactados:
14
Um Contrato de utilizao ser exibido. Clique no boto Aceitar para dar inicio a instalao. Selecione quais programas sero instalados. Nesse exemplo, selecionamos apenas o software Adobe Dreamweaver CS6.
15
Clique sobre o boto Pgina em branco e selecione HTML, na coluna Tipo da pgina, e <nenhum(a)>, na coluna Layout.
16
Clique no boto Criar. Observe que a rea de trabalho do Dreamweaver ser exibida.
Barra de Ferramentas documento Logo abaixo da barra de menu, encontra-se a barra de ferramentas Documento. Essa barra de ferramentas ser utilizada para navegar entre os diferentes tipos de visualizao do arquivo e outras operaes comuns em um documento.
Painis Os painis do Dreamweaver so utilizados para facilitar a utilizao das ferramentas de criao e edio de um documento. O painel Inserir, apresentado na imagem abaixo, possui as principais ferramentas de edio e criao de layout. Durante esse curso, utilizaremos uma srie de painis.
17
Barra de Propriedades A barra de Propriedades exibe as opes da ferramenta ativa. Essa barra sempre ser modificada, dependendo da ferramenta de edio que est ativa no momento.
Agora que j conhecemos os principais elementos da rea de trabalho do Dreamweaver, vamos criar uma pasta padro para todos os arquivos que sero utilizados no website que ser desenvolvido.
Observe que uma nova janela ser aberta. Nesta primeira etapa da definio do novo site, vamos indicar o nome do site e a pasta onde sero salvos e editados os arquivos.
18
Agora, vamos indicar a pasta onde sero salvos os arquivos. Iremos criar uma pasta com o nome de site dentro da pasta Meus Documentos. D um clique no boto Localizar Pasta do item Pasta do site local:
19
Vamos agora criar uma nova pasta com o nome de Site. D um clique no boto Criar nova pasta.
Quando for exibida a nova pasta, digite o nome Site e pressione a tecla ENTER.
D um clique duplo sobre a pasta Site para selecion-la. Clique no boto Salvar, para selecionar essa pasta para os arquivos do site. Desta forma, definimos o nome do site e o local onde os arquivos sero salvos. Clique no boto Salvar.
20
Observe que a janela Salvar foi aberta j indicando a pasta de trabalho Site:
Obs.: importante que a primeira pgina do site tenha o nome de index.html, pois, aps enviar esse arquivo para um servidor na internet, esta ser a primeira pgina exibida do site. Clique no boto Salvar. No prximo captulo, vamos dar incio construo do layout da pgina.
21
Clique no boto Concludo. No painel Arquivos, d um clique duplo sobre o arquivo index.php,, como indicado na figura abaixo:
22
Observe que o cdigo HTML do documento foi exibido. Modo Dividir O Modo Dividir divide a tela em duas janelas, mostrando na janela da esquerda o cdigo HTML e na janela da direita a visualizao da pgina. Clique no boto Dividir:
Como ainda temos um documento em branco, na janela da direita ser exibida uma tela em branco. Modo Dinmica
23
Para criar as divises sem o uso de tabelas iremos utilizar a TAG <DIV>.
24
<div id="container"> Essa tag ser fechada com a tag </div>, somente depois de inseridas as demais divs, que sero criadas dentro deste container. Vamos agora criar as demais divs. Digite o cdigo abaixo no local indicado na imagem:
<div id="logotipo">Logotipo</div> <div id="menu">Menu</div> <div id="imagem">Imagem</div> <div id="principal">Principal</div> <div id="noticias">Noticias</div> <div id="rodape">rodape</div> </div>
25
Observe que os wireframes foram criados, mas a posio deles, bem como o tamanho, no foi definida:
26
Iremos definir a posio e o tamanho de cada wireframe, utilizando o cdigo CSS. Esse assunto ser melhor explorado no prximo captulo. Agora, vamos salvar esse arquivo. Pressione o comando CTRL+S para salvar as alteraes no arquivo index.html.
27
Clique no boto Concludo. No painel Arquivos, d um clique duplo sobre o arquivo index.html, como indicado na figura abaixo:
Vamos agora criar o arquivo CSS, que ir indicar o tamanho e a posio de cada um dos wireframes criados.
28
Clique na guia Pgina em branco e posteriormente clique sobre a opo CSS da coluna Topo de pgina, como indicado na imagem:
D um clique no boto Criar. Observe que uma nova aba foi aberta para a edio do arquivo CSS:
29
Iremos agora criar um cdigo CSS, que ir indicar uma cor para o fundo do site. Iremos utilizar essa cor provisoriamente, pois futuramente essa cor ser substituda por uma imagem. Digite o cdigo abaixo no local indicado na figura: body {
30
Observe que uma janela de seleo de cor ser aberta. Clique na cor Cinza (#CCC), indicada na imagem:
Imagem49.jpg Finalize a edio do atributo de cor de fundo, utilizando o ponto-e-vrgula (;) para indicar o final de uma instruo, e feche o colchete, indicando o final da atribuio do seletor body:
31
Vamos agora salvar este arquivo e vincular o arquivo index.html a esse arquivo de estilos. Pressione o comando CTRL+S, para salvar esse arquivo. Em seguida, vamos criar uma pasta com o nome de CSS dentro da pasta site. Clique no boto Criar nova pasta na janela Salvar Como....
D um clique duplo na pasta CSS para abri-la. Digite estilos.css na caixa Nome:
Clique no boto Salvar. Vamos agora vincular o arquivo estilo.css ao arquivo index.html . Clique na guia do arquivo index.html , para que seja exibido o seu contedo:
32
D um clique na aba do painel Estilos CSS, para que seja exibido o seu contedo. (O painel est posicionado do lado direito da tela).
Quando a nova janela for exibida, d um clique no boto Procurar, para selecionarmos o arquivo de estilo:
33
D um clique duplo na pasta css para abri-la. D um clique no arquivo estilos.css, para selecion-lo. Clique no boto OK. Certifique-se de que a opo Link esteja selecionada:
Clique no boto OK. Observe que a cor de fundo do site foi alterada. Vamos agora visualizar o cdigo que est vinculando o arquivo estilos.css ao arquivo index.html D um clique no boto Cdigo.
Observe que uma nova linha de cdigo, vinculando o arquivo estilo.css, foi inserida no cdigo:
Clique no boto Design para voltarmos visualizao do site. Iremos agora criar o cdigo para indicar o tamanho e as posies do wireframe container.
34
Vamos criar uma classe com o nome de cada uma das divs indicando os seguintes atributos: width: Atributo utilizado para indicar a largura do wireframe. Height: Atributo utilizado para indicar a altura do wireframe. z-index: Atributo utilizado para indicar a posio do wireframe em relao aos outros wireframes no eixo Z, indicando um valor para a sua posio. Veja a imagem abaixo como exemplo:
float:
35
clear: O atributo clear indica quais dos lados do wireframe no podero ter outros elementos, como, por exemplo, outro wireframe.
Para iniciar o cdigo, iremos criar uma classe de estilo com o nome de container, que indicar o tamanho e a posio do wireframe com esse nome. As classes de estilo devem sempre se iniciar por um ponto (.). Lembre que esse wireframe ter a largura de 960px por 1000px de altura. Para que voc possa identificar o wireframe container, vamos indicar tambm uma cor provisria para ele. Digite o cdigo abaixo no local indicado na imagem.
36
Utilize o comando CTRL+S para salvar as alteraes no arquivo. Vamos agora vincular esse estilo ao wireframe container. Clique na guia do arquivo index.html , para que seja exibido o seu contedo.
Clique no boto Cdigo para que seja exibido o cdigo HTML do site. A classe ser vinculada ao wireframe atravs do atributo class dentro da tag div. Digite a linha de comando class=container no local indicado na imagem:
37
Utilize o comando CTRL+S, para salvar as alteraes no arquivo HTML; Pressione a tecla F12, para testar o funcionamento do cdigo diretamente no browser padro; Observe que o wireframe container ser exibido, mas repare que est posicionado do lado esquerdo do browser:
O alinhamento do wireframe realizado atravs do atributo margin. Para centralizar um wireframe, tanto a margem esquerda quanto a margem direita devem ser indicadas com valor auto. Feche a janela do Browser. D um clique na guia do arquivo estilos.css, para que seja exibido o seu contedo. Digite os comandos abaixo, definindo os atributos de margem esquerda e direita:
38
Pressione o comando CTRL+S, para salvar as alteraes. Clique na guia do arquivo index.html, para que seja exibido o seu contedo. Pressione a tecla F12, para testar o site. Observe que agora o wireframe est centralizado no browser:
No prximo captulo, iremos criar as demais classes utilizadas nos wireframes, que esto posicionados dentro do wireframe container. Feche a janela do browser.
39
Clique no boto Concludo. No painel Arquivos, d um clique duplo sobre o arquivo index.html, como indicado na figura abaixo:
40
Agora, vamos criar as classes CSS de cada um dos wireframes do site. Como o arquivo de estilos j est vinculado ao arquivo HTML, selecione-o clicando sobre o arquivo estilos.css, conforme indicado na imagem abaixo:
D um clique no boto Cdigo, para que seja exibido somente o cdigo CSS. Iremos agora criar as classes do wireframe logotipo e do wireframe menu. Lembre-se que j sabemos os tamanhos que cada um desses wireframe dever possuir e o seu posicionamento dentro do wireframe container.
41
Observe que no cdigo acima indicamos o valor 2, para a propriedade z-index, e a posio esquerda (left), pelo atributo float, para o wireframe. Vamos agora criar a classe do wireframe menu. Digite o cdigo abaixo:
Observe que no atributo float foi indicada a posio right (direita). Vamos agora criar a classe do wireframe imagem.
42
.imagem { z-index:2; width:960px; height:265px; clear:both; } Observe que nessa classe foi utilizado o atributo clear:both, para indicar que esse wireframe no poder ter wireframes a sua esquerda ou a direita. Desta forma, o wireframe imagem ficar posicionado no local indicado, ou seja, abaixo dos wireframes logotipo e menu, conforme podemos observar na imagem acima. Agora vamos criar as classes dos wireframes principal e noticias.
.principal {
43
Vamos agora ao cdigo HTML, para indicar as classes de cada um dos wireframes. D um clique no boto Cdigo-fonte, para que seja exibido o cdigo HTML do site.
44
Indique agora nas tags div cada uma das classes dos wireframes:
Pressione o comando CTRL+S, para salvar as alteraes. Pressione a tecla F12, para visualizar o resultado. Observe que cada um dos wireframes est posicionado em seu local definitivo:
Utilizando a barra de rolagem do browser, possvel visualizar o wireframe rodap. No prximo captulo, iremos inserir os primeiros elementos grficos do site em construo.
45
Realize o download do arquivo acima e o descompacte-o dentro da pasta sites (onde o arquivo index.html est salvo). Voc ir observar que as pastas imgs e flash sero criadas. Em cada uma dessas pastas, esto os arquivos que iremos utilizar no desenvolvimento deste projeto.
46
Clique no boto Concludo. No painel Arquivos, d um clique duplo sobre o arquivo index.html, como indicado na figura abaixo:
Observe que o arquivo index.html foi aberto. D um clique no boto Design, para visualizar o site.
Com o texto excludo, vamos agora inserir a imagem. D um clique no menu Inserir:
47
Clique no arquivo logotipo.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida.
48
Nessa janela pode-se atribuir um texto alternativo para a imagem que ser exibida. Esse texto ser exibido quando o ponteiro do mouse estiver posicionado sobre a imagem. O texto alternativo tambm utilizado para que programas de leitura de sites para portadores de deficincia visual consigam identificar o contedo da imagem inserida e possam narrar para o deficiente visual o que est inserido no site.
49
Com o texto excludo, vamos agora inserir a animao. D um clique no menu Inserir:
50
Clique no arquivo imagens.swf, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida.
Nessa janela, vamos atribuir um ttulo para a animao que ser inserida. Vamos cham-la de imagens. D um clique na caixa de texto do item Ttulo e digite imagens, como indicado na imagem abaixo:
Clique no boto OK. Observe que a animao flash foi inserida no wireframe:
51
Em seguida, vamos inserir uma imagem no wireframe rodape. Posicione o cursor no wireframe rodape e apague o texto presente nele.
52
Clique no arquivo rodape.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida.
Digite, na caixa de texto do item Texto alternativo, o texto Telefone para Contato (99) 99999999.
53
Agora, vamos salvar as alteraes no site. Pressione o comando CTRL+S, para salvar as alteraes. Pressione a tecla F12, para visualizar o resultado. Observe que agora o site j est tomando forma. No prximo captulo, iremos dar continuidade edio do site.
54
Clique no boto Concludo. No painel Arquivos, d um clique duplo sobre o arquivo index.html, como indicado na figura abaixo:
55
D um clique no boto Cdigo, para que seja exibido somente o cdigo CSS. Iremos alterar o atributo background-color do seletor body para background-image, onde podemos selecionar qual imagem ser utilizada como fundo do site.
Apague o atributo {background-color:#CCC;, deixando somente o seletor body. Digite novamente o colchete ( { ) e selecione o atributo background-imagem.
56
Clique no boto OK. Vamos digitar o cdigo que ir posicionar a imagem de fundo no centro do browser. Tambm vamos digitar um cdigo que ir indicar que esta imagem no dever se repetir no fundo. Digite o cdigo abaixo: background-position:center; background-repeat:no-repeat;
57
Vamos agora salvar as alteraes no cdigo e visualizar o resultado. Pressione o comando CTRL+S, para salvar as alteraes. D um clique no boto Cdigo-fonte, para que seja exibido o cdigo HTML do site.
Pressione a tecla F12, para testar o site diretamente no browser. Observe que a imagem de fundo passou a ser exibida. Depois, iremos substituir a cor branca do wireframe container, para que as partes em branco do site fiquem transparentes:
Feche o browser, clicando no boto fechar. No Dreamweaver, d um clique sobre o arquivo estilos.css, como indicado na imagem abaixo:
58
Pressione a tecla DELETE, para excluir esta linha de cdigo. Pressione o comando CTRL+S para salvar as alteraes. D um clique no boto Cdigo-fonte, para que seja exibido o cdigo HTML do site.
Pressione a tecla F12, para testar o site diretamente no browser. Observe que os wireframes ficaram transparentes:
59
Agora, vamos inserir as imagens que sero utilizadas como ttulo no wireframe Principal e no wireframe Notcias. Feche o browser, clicando no boto fechar. No Dreamweaver, d um clique no boto Design, para visualizar o layout do site:
60
Clique no arquivo titulo_principal.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida.
61
Vamos agora inserir a imagem que ser utilizada no wireframe Notcias. Posicione o cursor no wireframe Notcias e apague o texto presente nele.
62
Clique no arquivo titulo_noticias.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Notcias.
63
64
Clique no boto Concludo. No painel Arquivos, d um clique duplo sobre o arquivo index.html, como indicado na figura abaixo:
Observe que o arquivo index.html foi aberto. D um clique sobre o arquivo estilos.css, conforme indicado na imagem abaixo:
65
D um clique no boto Cdigo, para que seja exibido somente o cdigo CSS. D um clique no final da ltima linha do cdigo CSS:
Pressione a tecla ENTER, para criar uma nova linha. Vamos agora criar uma classe com o nome de .imgs, para indicar as posies das imagens no wireframe. Digite o cdigo abaixo: .imgs { float:left; margin-right:4px; }
66
No cdigo CSS acima, indicamos que as imagens que indicarem essa classe (ver .imgs na figura acima) estaro posicionadas esquerda do texto com uma margem de 4px de distncia do lado direito. Em seguida, crie a classe do texto. Pressione a tecla ENTER e digite o cdigo abaixo:
67
No cdigo acima, indicamos que o texto que possuir essa classe ter a fonte Tahoma. Tambm indicamos que, caso o computador utilizado no tenha a fonte Tahoma, ser utilizada a fonte Geneva, e assim por diante. A fonte utilizada ter o tamanho de 13px na cor preta (#000). e o alinhamento do pargrafo ser justificado. Com as classes criadas, agora ser inserida a imagem e o texto. Pressione o comando CTRL+S, para salvar as alteraes no cdigo. D um clique no boto Cdigo-fonte, para que seja exibido o cdigo HTML do site.
Iremos inserir uma nova imagem, abaixo da imagem Tecnologia de ponta. Desta forma, devemos posicionar o cursor abaixo da mesma. Clique sobre a imagem indicada abaixo para selecion-la:
68
Pressione a seta para direita do teclado ( ), para que o cursor fique posicionado direita da imagem. Para criar uma quebra de linha, pressione o comando SHIFT+ENTER, para que a imagem seja inserida abaixo da j existente. Vamos agora inserir a imagem que ser utilizada. D um clique no menu Inserir: Selecione a opo Imagem.
Clique no arquivo milho.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Milho. Clique no boto OK. Observe que a imagem foi inserida no wireframe:
69
Vamos agora selecionar a classe CSS, que ser utiliza nesta imagem. Na barra de Propriedades, d um clique na guia de seleo do item Classe.
Digite o texto que ficar ao lado direito da imagem. D um clique do lado direito da imagem, para posicionar o cursor:
70
Digite o texto abaixo: O milho (Zea mays), tambm chamado abati, auati e avati, um conhecido cereal, cultivado em grande parte do mundo. O milho extensivamente utilizado como alimento humano ou rao animal, devido s suas qualidades nutricionais. Todas as evidncias cientficas levam a crer que seja uma planta de origem americana, j que a era cultivada desde o perodo pr-colombiano. (fonte:
http://pt.wikipedia.org/wiki/Milho)
Selecione o texto digitado, para que possamos aplicar a classe CSS. Selecione todo o texto digitado:
71
Observe que a formatao foi aplicada. Vamos agora inserir uma imagem abaixo deste texto, que futuramente ser utilizada como link. D um clique no final do texto digitado para posicionar o cursor:
Pressione o comando SHIFT+ENTER para criar uma quebra de linha. Vamos agora inserir a imagem. D um clique no menu Inserir: Selecione a opo Imagem.
72
Clique no arquivo leia_mais.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Leia Mais. Clique no boto OK. Observe que a imagem foi inserida abaixo do texto.
Vamos repetir esse processo com outra imagem e outro pargrafo de texto. D um clique do lado direito da imagem Leia Mais, para posicionar o cursor:
73
Utilize o comando SHIFT+ENTER trs vezes, para que sejam criadas 3 quebras de linhas. Vamos agora inserir a imagem. D um clique no menu Inserir: Selecione a opo Imagem.
Clique no arquivo laranja.png para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Laranja. Clique no boto OK. Observe que a imagem foi inserida no wireframe:
74
Vamos agora digitar o texto que ficar ao lado direito da imagem. D um clique do lado direito da imagem para posicionar o cursor:
Digite o texto abaixo: A laranja o fruto produzido pela laranjeira (Citrus x sinensis), uma rvore da famlia Rutaceae. A laranja um fruto hbrido, criado na antiguidade a partir do cruzamento do pomelo com a tangerina. O sabor
75
Vamos agora selecionar o texto digitado para que possamos aplicar a classe CSS. Selecione todo o texto digitado. Na barra de Propriedades clique no boto CSS:
Observe que a formatao foi aplicada. Vamos agora inserir uma imagem abaixo deste texto que futuramente ser utilizada como link. D um clique no final do texto digitado para posicionar o cursor:
76
Pressione o comando SHIFT+ENTER para criar uma quebra de linha. Vamos agora inserir a imagem. D um clique no menu Inserir: Selecione a opo Imagem.
Clique no arquivo leia_mais.png, para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Leia Mais. Clique no boto OK. Observe que a imagem foi inserida abaixo do texto.
77
Pressione a seta para direita do teclado ( ), para que o cursor fique posicionado direita da imagem. Pressione o comando SHIFT+ENTER, para criar uma nova quebra de linha. Adicione mais uma quebra de linha para aumentar o espao. Pressione o comando CTRL+S, para salvar as alteraes. Pressione a tecla F12, para testar o site diretamente no Browser.
78
Iremos utilizar as classes CSS j criadas, para alinhar a imagem e formatar o texto desse wireframe. Inicie o Adobe Dreamweaver CS6. Clique sobre o menu Site e selecione a opo Gerenciar sites....
Clique no boto Concludo. No painel Arquivos, d um clique duplo sobre o arquivo index.html, conforme indicado na figura abaixo:
79
Observe que o arquivo index.html foi aberto. D um clique no boto Design, para visualizar o layout do site:
Iremos inserir uma nova imagem abaixo da imagem Notcias. Sendo assim, devemos posicionar o cursor abaixo dela. Clique sobre a imagem indicada abaixo para selecion-la:
Pressione a seta para direita do teclado ( ), para que o cursor fique posicionado a direita da imagem. Pressione o comando SHIFT+ENTER, para criar uma quebra de linha. Pressione esse mesmo comando (SHIFT+ENTER) mais 2 vezes, para criar mais 2 quebras de linhas. Vamos agora inserir a imagem que ser utilizada. D um clique no menu Inserir: Selecione a opo Imagem.
80
Clique no arquivo dia_29_mar.png para selecion-lo. Clique no boto OK. Observe que uma nova janela ser exibida. Digite, na caixa de texto do item Texto alternativo, o texto Dia 29 de Maro. Clique no boto OK. Observe que a imagem foi inserida no wireframe:
Vamos agora selecionar a classe CSS que ser utiliza nesta imagem. Na barra de Propriedades d um clique na guia de seleo do item Classe.
81
Digite o texto que ficar ao lado direito da imagem. D um clique do lado direito da imagem, para posicionar o cursor:
Digite o texto abaixo: Pesquisa com caf contribui para a sustentabilidade da produo Agora selecione o texto digitado para que possamos aplicar a classe CSS. Selecione todo o texto digitado:
82
Utilizando esse mesmo processo, insira as imagens dia_28_mar.png e dia_27_mar.png e os textos indicados abaixo:
83
Pressione o comando CTRL+S. Pressione a tecla F12 para testar o site diretamente no Browser. No prximo captulo iremos criar o menu que estar posicionado no wireframe Menu.
84