Dreamweaver CS5 Méd. |DREAMWEAVER CSS - MOD | nn nescaneennenmnaesesanssercceaEnnRenmannseneenensan=cacasef OS Objetivos da Aula... Conhecendoa Web... Aprendendo sobre sites... . O que vamos fazer... : Abrindo um Arquivo ‘lternador da Area de Trabalho... Viewalizar/Depurar no Navegador “Objetivos daaula.. Conhecendo as Janelas Codigo, Dividire Design. Formatando paginas... CSS. . Entendendo as Tags. O que vamos fazer Alinhando o Texto... Inserindo datas wom Inserindo Imagens as suas paginas. Objetivos da Aula. se Iniciando a Pagina do Site wn Inserino Tabelas.. Inserindo imagem dentro de uma tabela.- Trabando com tabelas dentro de outa... Mudando as propriedades do botao usando urna nova regra de estilo. Finalizando 0s Botées do Menu... Qual é 0 tamanho correto de um sit Organizando os arquives.... Um pouco sobre imagen: Caixa atributos de acesso a Tag de imagem. (0 que vamos fazer .. Criando uma Regra de Estilo... Definindo espagamento em relayao a borda.. Criando um Rodapé wm Criando pardgrafo com ‘espagamento me Objetivos da Aula... ‘Na aula interativa. (O que sao Links e seus tipos.. Conhecendo a Caixa Hiperlink.. Definindo os destinos das paginas no navegador Importando arquivos elaborados em outro programa, Salvando as paginas criadas... O que vamos fazer Criando Links. Configurando os Links. eg Contnurande olnternet ExplorerTA : \ DREAMWEAVER CS5 - MOD I “AULA 06 - CRIANDO UM TEMPLATE SEM 0 USO DE TABELAS | Objetivos da Aula [| Configurando um Site.. Salvando um arquivo como model0 nmr = |] Criando um fotha de Estilo ¢8s ace BP que vamos 2 nen Trabalhando com Tag Div Analisando 0s Codigo um Objet Ut At nn Configurando Tag Divs. Oque vamos fazer... Inserindo Regides Editaveis. Criando paginas baseadas em um modelo. ‘AULA 08: APLICANDO REGRA CSS A CABECALHOS ..... Objetivos da AUIA anv Criando regra CSS para cabecalhos... Formatando Imagens a Criando a segunda pagina do Site... O que vamos fazer. Aplicagao de Regras CSSa elementos HTML. AULA 09- APRENDENDO A INSERIR ANCORAS even a Inserindo Ancoras. Criando Links através das Ancoras.-- AUIAI0= Diletivas daa - Validagao dos Campos. - AULA 11 -TORNANDO SEU SITE MAIS SITES: Objetivosda AU conc Inserindo AnimagbeS SWF ecroanmn Criando e Configuranda umn iframe. 0 que vamos fazer.. Anexando a folha de estilos CSS enn CCriando uma Lista nao-ordenada.. Criando Links para a exibigao das paginas no Iframe.o- nn sees WNDO COM UM SERVIDO DN ED RON HI Ale RIBDREAMWEAVER CS5 - MOD I ees Sa Na aula interativa, Inserindo um video do Youtube. Aprendendo sobre Direitos Autorais.. ‘A Seguranga oferecida pelo Navegador.. Ultimos Ajustes.. - Conhecende a Estrutura do Site... ‘Analisando 0s Codigos Htmal. : Reconhecendo um elemento da janela Design nos Cédigos. Na Aula Interativa... Revisando conceitos sobre Tags Div. Conhecendo o Painel Esti... Criando e Aplicando Classes... ‘Aprendendo a alterar regras CSS... Visualizando os Cdigos... Definindo a Pasta local. Elaborando a Pagina Index. Preparando o Layout do Site. Criando uma regra CSS de composigao... Elaborando uma div para corrigir o posi Um lembrete Objetivas da Aula © que vamos fae = Aprendendo niovos recursos de visualizagio... "AULA Objetivos da Aula. Criando as Piginas do Menu. Validando os Campos do Formulario Preparandoa area que receber as Paginas Elaborando a drea do E-mail da Empresa... que vamos faze wn Propriedades dos Links.. Objetivos da Aula, Criando o Rodapé.. ‘Ajustes Finais.. ~ _— Configurando 0 Espagamento da Altura do Paragrafo.. (© que vamos fazer... Cadastro da Conta no Servider ‘ocontedo deste método foi produido pela eauipe de desenvolimenta da detentra dos direitos autora 2 quem so reservads todos os cries. Nenu oor erica pode car teprod.ida Gu ansfia,cjam qu forem os mete empregedos erica, mecicos, fotogrfics_ sem euterzapo Fo ee ae mesa pullcenemes comarca mara repistradas de podutcspertencenes 9 dvrsas comparhis, sormente par ns eras, cree cota ccmbenefio das oropretarios da mares, sem nenhusma inencao de ana scws dts. Fale conosco! Sugestes, supsto eros ou divas referents ao conte dest posta Gevero ser encainhados pa oral saBersinoiteatvocom by, junamente = Soro numero. seguir VOL OREAMWEAVERCSS- M60 -LOTE-009603-37/1072013 ae 3fi DREAMWEAVER CSS - MOD Bem-vindo! Agradecemos o seu interesse em nosso curso. Sabemos que o mundo est cada vez mais competitive e es- pperamos que, 20 final deste curso, voc8 cresca profissionalmente e intelectualmente. Durante a realizagao do mesmo, Aula 01 - Introducao ao Dreamweaver CS5 teremos a oportunidade de trabalhar com um software fantastico, capaz de criar websites de alta, afinal, vocé ja deve ter notado que o uso da internet tem se tornado algo muito frequente no mercado de trabalho, concorda? Dw-Dreamweaver CS5 i Dw} OBJETIVOS DA AULA CONHECENDO A WEB A World Wide Web (teia mundial) é conhecida como WWW, uma nova estrutura de navegacao pelos diver- sos itens de dados em varios computadores diferentes. 0 modelo WWW, por padrao, trata todos os dados da Internet como hipertexto, isto é vinculagdes entre as diferentes partes do documento para permitir que as informagdes sejam exploradas interativamente ¢ nao apenas de uma forma linear. Programas como Microsoft Internet Explorer, conhe- cidos como navegadores Web, permitem que os usu rios visitem contetidos elaborados em qualquer parte do mundo e, também, em qualquer idioma. E taram muito a popularidade da Internete gracas.is suas potencialidades, atualmente, podemos visualizar docu- 's aumen= Reforgar o conceito de abrir arquivos; Aprendera alternar a Area de Trabalho; Testar um projeto no navegador. No decorrer de nossas aulas, aprenderemos vdrios recursos e ferramentas deste progra- ma, agregando a vocé um maior aprendi- zado e, também, mais conhecimento, Além disso, é muito importante que vocé tenha sua apostila sempre em mios, pois, nela, inserimosinformagdes complementares,re- forgando ainda mais os assuntos abordados em cadaatividade, ‘Temos certeza de que, com seu empenho e criatividade, belos projetos sero desenvol- vidos. Bem, como este é nosso primeiro en- contro, revisaremos os principals conceitos vvistos durante a interagao e, assim, veremos um pouco mais da praticidade com a qual este programa trabalha. Sendo assim, tena ‘uma boa aula! mentos formatados (cores, efeitos, etc), escutar miisica, assistira videos e muito mais. Enfim, a Web é a interface gréfica da Internet, pois podemos acessar a Internet, transferir arquivos (pro- cesso que chamamos de Upload) ¢ realizar outras ope- ragdes bisicas Para concluir, sé estamos, de fato, usando a Web quando estamos navegando, fazendo uso das paginas Web para acessar um site. E importante lembrar que todas as paginas de um site, individualmente, possuem um cédiigo fonte. Este, € responsavel por apresentar a pagina tal como foi pensada e elaborada por seu cria- dor Paraa Web, a linguagem padrao, compreendida por todos os navegadores dispontveis é chamada de HTML.‘Dw APRENDENDO SOBRE SITES. Um site é um conjunto de paginas Web, isto é, de hi- pertextos acessiveis geralmente pelo protocolo HTTP na Internet. 0 conjunto de todos os sites piiblicos exis- tentes compoe a World Wide Web. As paginas em um site so organizadas a partir de um URL basico. Mas 0 ‘que seria um URL? Bem, esta éa sigla para Uniform Re- source Locator que, em portugués, quer dizer Localiza- dor Padrao de Recursos. Basicamente, ele € « enderego de um arquivo ou documento disponivel em uma rede, na qual fica a pagina principal e, geralmente, residem no mesmo diretério de um servidor. & © QUE VAMOS FAZER Muito bem! Nesta aula apostilada faremos uma revi- so dos conceitos vistos na atividade interativa, refor ‘gando ainda mais nosso aprendizado. Para isso, voc® abrir mais alguns arquivos e, em seguida, ira testé-los, utilizando 0 navegador. Além disso, também iremos conhecer uma opso muito interessante, na qual con- seguimos alterar a area de trabalho. No final, vocé vera que serao exercicios muito titeis. |ATENGAO! Esta apostlla é incerativa. Entdo, para aces- | sarmas nossa aula, primeiramente clique no botdo Int | clar que se encontra na barra de tarefas. : e Me ee 4 | Na lista que é apresentada, clique na oped Sistema In- | terativo de Ensino, Assim, acessaremos nossa apostila | simulada e comecaremos a aula. § Dw] “ABRINDO UM ARQUIVO ‘Temos duas maneiras de carregar umarquivo no pro- grama, sendo pelo botao Abrir da tela de boas vindas e pela opgio Abrir do menu Arquivo, Podemos dizer que 0s conceitos sao os mesmos, a tinica coisa que mucia Eo local onde eles se encontram. J4 aprendemos as duas, formas na aula interativa, a partir de agora, revisare- mos para reforgar ainda mais nosso aprendizado. 01- Primeiramente, ahriremas oaplicativo. Paraisso. clique sobre o menu Iniciar e, em seguida, clique em To- dos os Programas. ST DREAMWEAVER CSS - MOD | ‘ a i 02 - Feito isso, dé um clique em Adobe Master Col- lection CSS e, dentre as opgdes, escolha Adobe Drea- mweaver CSS. 03 - Assim, surge a tela de boas vindas, Como voce ja a comhece, clique no botdo Abrir, localizado na area Abrir um item recente. 04- Devemos procurar onde est nossoarquivo, Para issn, dé um duplo clique em Disco Local (C2) e, depois, tum duplo clique sobre Documentos. 05 - Note que temos trés pastas, a Site_12, Site 13 € Site_16, Dé um duplo clique sobre a Site_12 e, em seg da, um duplo clique em index. 06 - Este site serd eriado para uma empresa de ras- | treamento de veiculos, chamada Global. Agora, carrega- remos outro site. Ento, clique sobre o menu Arquivo e, | Jogo apés, clique em Abrir. a (07- Com isso, uma janela surgena tela, Nela,cliquenobo- | to Um Nivel Acima para voltarmos as opgdes das pastas, 08 - Desse modo, dé um duplo clique em Site 13 e, depois, abra o arquivo index localizado nesta pasta. | 09 - Agora é com vocé! Clique no menu Arquivo e, em seguida, clique em Abrir. Na janela que se abre, volte para as pastas, dé um duplo clique em Site_16 e, nova- mente, dé um duplo clique no arquivo index. Muito bem! Como podemos ver, é muito simples rea- lizar os passos feitos até aqui. A partir deste momento, conheceremos um botdo chamado Alternador da Area de Trabalho. iDw] ALTERNADOR DA AREA DE TRABALHO Podemos dizer que nem todos os tsudrios gostam de trabalhar com a area de trabalho do programa da mes- ma forma, &ry | DREAMWEAVER CS5 - MOD I t | Isso no é problema, pois pociemos visualizar a mesma, da maneira que for necessdrio. Com a opgo Alternador da Area de Trabalho, ficou muito facil realizar essa configura- 60. Veremos como funciona na pratica esse conceit. Como vocé pode perceber, estamos visualizando a Janela do documento no modo Designer. Dessa maneira, po- demos ver além da Area de Trabalho, a Barra de Ferramentas de Document, o Inspetor de Propriedades e os || Painéis, © Does fe eosaneieaee ene betp-enueve Home emia ~ Inspetor de Propriedades So MinhaEmpresa Planeje suas viagens 790 Empresa Sericos 10 - Vamos mudar 0 modo de visualizagao dessa janela, Pportanto, clique sobre o botao Alternador da Area de Tra- balho e escolha a opc4o Classico. rae wearers Perceba que nossa janela do documento se modificou, aparecendo na parte superior, uma barra com varias ferramentas divididas em guias. = :11-- Alteraremos mais uma vez. Entdo, clique novamen- te no botdo Alternador da Aréa de Trabalho e defina 0 modo Codificador. Desenveledor de apeatwoe Desenevedor de alesis mangas | Reina‘! Nove renders sa Senigos Sobre 12 Repare que, assim, os painéis passam a ser mos- trados a0 lado esquerdo. Agora que ja aprendemos a configurar esse recurso, de acordo com seus conheci- mentos, volte para a visualizagéo Designer. Sabemos que a Janela do documento do aplicativo pos- sui uma opeéio que nos permite trabalhar com a parte vi- sual do site. Porém, muitas vezes nao conseguimos ver 0 projeto inteiro e nem funcionando como sea estivesse na internet. Pensando nisso, o Dreamweaver nos possibilita visualizarmos nosso site em tm navegador, fazendo com {que possamos clicar nos menus e acessar todos os seus contetidos. Preste atengao nos préximos pasos! DREAMWEAVER CS5 - MODI im a | 13 - Veremos nossos sites através do navegador. Sen- do assim, dé um clique sobre o botdo Visualizar/depu- rar no navegador e, dentre as opsdes que aparecem, escolha Visualizar emlExplore. aus envi Cota rer. Comprovaremos seas paginas estao realmente fun- 14- Com isso, nosso site é aberto no Internet Explo- I cionando. Para isso, dé um clique no menu Empresa. | 15 - Perceba que 0 contetido apresentado no momen- to é0 do menu escolhido. Mais uma vez, clique sobre o menu Servigos. i 16 - Muito bem! Encerre o navegador, clicando no botdo fechar que se encontra no canto superior direito da tela. Em seguida, feche também aba index que sera indicada [Dw om @- ay | Arquivo: Editar Exibir Inserir_ Modificer _Fosmater index ht Nace na — 17 - Dessa maneira,ficamos com os sites Light Club © Global abertos em nosso programa, Testaremos 0 Li- ghrClub. Portanto, clique no boto Visualizar/depurar no navegador e, depois, clique em Visualizar emlExplore. er TES 18 - Como podemos ver, est muito bonito esse site. ‘Agora, com seus conhecimentos, feche o Internet Explorer, 19- Como nao alteramos nada, nao precisamos salvar 0s trabalhos. Sendo assim, apenas encerre o Dreamwe- aver CSS, clicando no botdo fechar do canto superior direito do mesmo. E assim terminamos nossa atividade, a qual garan mos que foi muito titil em seu aprendizado, Lembre-se {que estamos no comeco do curso, entéo, sera muito in portante que vocé mantenha-se atento. Assim, ficara muito mais facil aprender todos os conceitos que veremos durante nossos encontros. Bem, antes de pasar‘ para a préxima aula, respondaas avaliagdes que ajudarao ainda maisa reforgar o contetide ensinado hoje. Até mais! | aA DREAMWEAVER CSS - MOD I Dw Aula 02 - Construindo o Primeiro trabalho Bem-vindo! Pronto para nossa atividade apostilada? Durante nosso contetido interativo, tivemos um contato mais aprofundado com programa e construimos uma pagina simples. 7 ‘Agora, daremas cantinuiidade ao trabalho anterior, deixando-o com um | visual mais agradavel, utilizando, para isso, diversos recursos que nos S40 oferecidos por este excelente software. ‘Assim, poderemos conhecer mais sobre as principais ferramentas deste pro- grama. Dedique-se ao maximo a este contetido, que foi feito especialmente para vocé e tenha uma boa aula! Dw] OBJETIVOS DA AULA + Formatar e alinhar textos; + Aprender a inserir marcadores de Data e Hora; * Inserir Imagem. CONHECENDO AS JANELAS CODIGO, quando fazemos alterac4o em uma, 0 mesmo acontece com ‘a + outra, Ao inserirmos, por exemplos, o texto na janela Cédi- DIVIDIR.E.DESIGNESisesioe 120, ele é mostralo também na Design e vice ¢ versa. i Formatamos nossa pagina, mudando, antes de tudo, acor de fundo da mesma, através da opcao Proprieda- des da pagina, na categoria Aparéncia HTML, Na mes- ma janela, editamos também a cor do texto. Dw} FORMATANDO PAGINAS... Relembraremos um pouco do que fizemos durante aula a interativa, Nela criamos uma nova paginana qual inserimos tum pequeno texto que utilizamos como teste para alter- _Concluidle este paso, dligitamos um novo texto, po~ narmos as janelas Codigo, Dividir e Design para, assim, po- _dendo, assim, notar que ele jé esta com a cor que defi- aaa dermos observar a interagao entre elas, ou seja, vimos que, nimos. Porém, além de colori-lo, também alteramos 0 Zz A erseu formato, Fizemos isso através da opedo Formato, do Inspetor de propriedades. Ela nos permite escolher dife- rentes formatagdes pré-definidas. Dw css CSS é a sigla de "Cascading Style Sheets” que, em por- tugués, significa Folhas de Estilo em Cascata. Essas folhas so um conjunto de regras de formatagao e servem para controlar a aparéncia de um contetido em paginas da we, Veja bem, tudo que é mostrado em uma pagina, ouseja, todo seu conteitdo, reside em um cédigo HTML e quan- do utilizamos a CSS, separamos o mesmo da apresenta- ‘40, ou seja, o contetido se mantém no arquivo HTML, enquanto a formatacao, a aparéncia da pagina reside em uma folha de estilo externa, Mas vocé deve estar se per- guntando: “Mas por que separar a formataco do contet- do?” A,resposta é simples e clara. Imagine $6, se constru- mos um site em que existem 15 paginas, Nele, todas as paginas mantém o mesmo estilo de fonte, cor, etc. Porém, precisamos alterar a cor das fontes. Teriamos que seguir alterando pagina por pagina. Seria muito trabalhoso, no 6 mesmo? Agora, se usdssemos a CSS, apenas fariamos a alteracdo na folha externa e, entdo, as 15 paginas seriam redefinidas. Bem melhor assim, concorda? Além disso, dessa forma, deixamos 0 cédigo HTML mais simples ¢ limpo, facilitando e agilizando o carregamento da pagi- na. A CSS nos oferece dtima flexibilidade e controle sobre a aparéncia da pagina. Com ela, podemos ajustar varias propriedades de texto e muito mais! [ER entenoenooastacs Ein inglés, “Tag” quer representa etiqueta. E este é um home bem sugestivo, uma vez que é assim que ela funcio- na, como uma etiqueta. A tag 6 utilizada para intitular e or- ganizar os cédigos. E como uma marcacdo, que mostra 20 programa onde se encontra determinado elemento. Quando um navegador vai fazer a leitura dos cédigos, le utiliza as Tags para localizar os elementos de forma correta. Quando, por exemplo, fazemos uma pequisa em tum site de busca, o buscador procura pelas tags referentes as nossas pesquisa, pois elas permitem que os arquivos e paginas sejam organizados por assuntos e temas. Para en- nnder melhor, imagine s6 um grande Hipermercado. Nele, vendido de tudo, deste legumes a Televisores de il"ima geragZo. Voce entra nele e deseja encontrar tum aparelho desom, Para facilitar sua busca, vocé vai ao departamento de eletronicos, La, voce vai ao subdepartamento de audio e, entao, encontra o produto esperado. As tags funcionam, ‘como 0s departamentos, é como se vocé tivesse ido procu- rarna tag Eletrénicos e assim por diante. i a | DREAMWEAVER CSS - MOD | Hoje em dia temos, na internet, as tags relacionadas a todo tipo de contetido, que varia desde paginas, aimagens postagens. [sso mantem tudo sempre muito organizado, facilitancioa busca dos mesmos, E paraentender um pouco da estrutura das Tags, acompanhe o esquema a seguir Aqui, temos uma Tag que representa o titulo do decu- mento. Vamos compreendé-la? (05st indica ono 8 Tg title> Nome do Documento&/titles———— —a sine ‘Crna ao termina Tog) Exceto algumas excegées, toda Tag tem seu inicio e fim, que s40 marcados como mostrados acima. 0 conte ido entre estes sinais é 0 que sera mostrado na pagina. No exemplo, utilizamos a Tag Title (Titulo em inglés), mas saiba que essa escolha foi unicamente didatica, ou seja, poderiamos também ter escolhido qualquer outra Dw} © QUE VAMOS FAZER Durante esta atividade, daremos continuidade ao traba- Iho que iniciamos na aula interativa, na qual fizemos nossa primeira pigina. Adicionaremos datas ao site, além de uma imagem para ilustré-lo. Assim, aprenderemos novos concei- tos, aprimorando ainda mais nosso conhecimento, No final daatividade, o resultado sera como 0 mastradoa seguir: Rey ATENCAO; Esta apastila é interativa. Entio, para aces- sarmos nossa aula, primetramente, clique no botdo In!- lar que se encontra na barra de tarefas: Na lista que é apresentada, clique na opgéo Sistema In- terativo de Ensino. Assim, acessaremos nossa apostila simulada e comegaremos a aula. esDREAMWEAVER CS5 - MOD | 01 - Para comecarmos, vamos abrir o programa. Para isso, clique sobre o menu Iniciar e, em seguida, em To- dos os Programas. 02 - Dentreas opgdes mostradas, clique sobre a suite de aplicativos Adobe Master Collection CSS, e entio, sobre Adobe Dreamweaver CSS. 03 - Abriremos o arquivo que salvamos na atividade |) anterior. Desse modo, na tela de boas vindas, clique so bre o icone Abrir, do campo Abrir um item recente. 04 - Na janela mostrada, com um duplo clique, acesse a pasta Documentos, selecione o arquivo Meu prime ro site.html e clique em Abrir. 05 - Pronto! Ai est o nosso trabalho, do jeito que o deixamos. Mas vamos deixé-lo ainda mais agradavel! Comegaremos posicionando o texto no centro da pi na, a0 invés de deixd-lo no canto esquerdo. Para tanto, & necessario té-lo selecionado. Vamos la! Para isso, clique no inicio da frase e, sem soltar 0 clique, arraste até seu final, como mostra a imagem a segutr: feu primeiro trabalho no Dreamweaver CSS} 06 - Agora, para reposicionésto, clique em Formatar, localizado na Barra de aplicativos, na parte superior do programa. 07 - Leve 0 cursor até a opso Alinhar e, dentr alternativas mostradas, clique sobre Centralizar. as iDw ALINHANDO 0 TEXTO Assim como nos editores de Texto, no Dreamweaver podemos alterar 0 alinhamento do texto, definindo suas linhas e parégrafos &direita, centro ou a esquerda. Além disso, também ha a op¢do justificar, que alinhao textoa pagina, ou seja, ele ocupa na linha um espago que vai de uma margem a outra 08 - Simples, nao é mesmo? Saiba que, através desses passos, podemos alinhar o texto ndo s6 para o centro, mas também para a direita, esquerda ou justificar. Mas veremos isso melhor no decorrer das nossas aulas, pois, neste momento, continuaremas com nossa atividade. Posicione o ponteiro do mouse no final do texto, pres- sionando a tecla End. & INSERINDO DATAS Com o Dreamweaver, poclemos adicionar aos nossos sites uma datagao, que mostra ao usuario a data atu: alizada no momento de acesso. Além disso, podemos definir, também, para que seja mostrada, a hora, como se nossa pagina houvesse um relégio, Todas essas infor- mages sao definidas. 09 - Inseriremos no nosso trabatho, logo abaixo do texto, uma datagao, ou seja, sera exibida a data atual sempre que a pagina for carregada, Portanto, va para a inha de baixo com o auxilio da tecla Enter. 10- Depois, clique sobre a op¢io Inserir, da Barra de aplicativos e, dentre as alternativas mostradas, eli que sobre Data. & }11-Noteque éabertauumaccaixade diélogo que nos mostra exemplos de dia da semana, datas-e horas para que possamas escolher de que maneira essas informagdes serao expostas no nosso site. Comegaremos escolhendo o formato em que 0 diaserd exibido, Clique sobre a pequena seta da caixa Forma- to de dia eselecione a opeao indicada na imagem: 12 - No formato de data, clique sobre a opgio 03/07/1974. Em Formato de hora, ndo precisaremos alterat, pois nao o utilizaremos. Veja, também, que h4 uma opsao: Atualizar automaticamente ao salvar, que faz. com que, assim que salvarmos as configuracdes, a hora ja seja atualizada. No nosso caso, nao a marcare- mos, portanto, apenas clique em Ok para confirmar. 13 - Note que é exibida na pagina a data atual e que, ‘a mesma foi disposta da maneira que escolhemos. Tire a selegaio dos dados que acabamos de inserir e deixe 0 cursor de digitag3o no final dos mesmos, pressionando atecia End 14 - Para seguirmos com nossa atividade, va para a proxima linha com o auxilio da tecla Enter. Com 0 DreamWeaver podemos adicionar nas nossas eiginas diversas imagens, dos mais diferentes tipos. Por exemplo: inserit em um cabesalho, uma imagem que con- tenha o logotipo da empresa que o site trata e, ainda, um texto customizado sobre a mesma ou, simplesmente, ima- gens que ilustram determinados assuntos abordados no ‘mesmo. Ele aceita os principais formatos de imagens uti lizados atualmente, ou sea, ele aceita os formatos: Gif, PG, JPEG, PNG e PSD e isso nos abre um grande leque de pos- lidades, deixando, assim, nossa criatividade ilimitada! 15 - Muito bem! Estamos quase terminando este tra- balho, Mas antes de encerrarmos, adicionaremos uma ilustracao a ele. Para isso, clique sobre a opcao Inserir ¢,em seguida, Imagem. 16 - Com isso, uma nova janela ¢ aberta. Como 0 ar- quivo que queremos est na pasta Documentos, dé um, duplo clique sobre ela, 17 - Clique sobre a imagem www para selecioné-lo e, depois, clique em Ok, 18 - Uma nova caixa de didlogo ¢ exibida. Nela, po- demos inserir um texto alternativo que seré mostrado caso a imagem nao carregue. Mas nao a utilizaremos por enquanto. Desse mado, apenas clique em OK. 19 - Com isso, terminamos nosso projeto! Vamos sal- vé-lo para, depois, vermos como ficou. Para isso, clique ho menu Arquivo e, em seguida, em Salvar. 20 - Para testélo, clique sobre o botdo Visualizar/ depurar no navegador e, dentre as alternativas mos- tradas, selecione Visualizar emlExplore. Weasisw emibpion ne — 21- Assim, podemos visualizar nosso trabalho. Ficou muito interessante, nao é mesmo? Agora, saia do Inter net Explorer através do botao Fechar, no canto superior direito da tela 22 - Como ja salvamos ¢ ja testamos nossa pagina, podemos encerrar nossa atividade de hoje. Sendo assim, saia do Dreamweaver CSS clicando no botao Fechar. Assim chegamos ao final de mais uma aula. Esperamos {que tenha gostado,afinal, vocé se saiti muito bem! Lembre-se de fazer a avaliagao, pois ea ajudard a aprimorar ainda mais, seus conhecimentas, permitindo que teste seu aprendizado! Esperamos vé-lo em breve. Boa sorte eatéa préximal=r 4 DREAMWEAVER CS5- MOD! Dw Aula 03 - Criando um site através de tabelas 4, aluno! Bem-vindo a mais uma aula deste curso. Esperamos que esteja animado para darmos continuidade ao nosso aprendizado. Afinal, na interagao, comega | mosa criago da pagina principal do site de uma empresa de financiamento, utlizando tabelas para organizar | _ealinhar os componentes do layout. Agora, daremos continuidade a esse trabalho, onde elaboraremos 0 corpo do site, que nada mais é do que a Area destinada ao conteiido da pagina. Também faremos 0 rodapé, localizado na parte inferior da pagina, cujo objetivo é informar quem fez 0 site, o ano ou outras informacdes que julgamos necessarias. Porém, antes, deixaremos alguns assuntos importantes relacionados aos sites, conforme avisamos | na intaraciin para serem consultados sempre que achar necessario. Recomendamos que leia antes de comegar- ‘mos nossa atividade. Temos certeza que ajudard a entender mais sobre os assuntos que abordaremos. Deseja: ‘mos uma 6tima aula! Criamos uma tabela com 3 linhas, onde a primeira recebeu uma imagem que serviu para 0 topo. oe OBJETIVOS DA AULA Y Aprendera definir espagamento em relacao a ¥ Saber qual é0 tamanho correto de um site; borda da tabela; Y Criar um rodapé; Conhecer os tipos de imagens; Y Aprender como criar um paragrafo com Y Criarregra de estilo; espagamento menor 0 EEL NTS SET <=-—_—e had ——, 2.ic_7—— FE Dw} INICIANDO A PAGINA DO SITE Primeiramente criamos um navo documento HTMLe alteramos a cor de fundo dele para preto. Para isso, cli ‘camps no menu Modificar e, depois, em Propriedades da pagina. Na caixa de didlogo que abriu, clicamos na caixa Cor de fund e escolhemos a cor preta. ce INSERINDO TARELAS Em seguida, adicionamos uma tabela para que ela ser ‘como estrutura para organizarmos e alinharmos os componentes do site. Entao, criamos uma tabela com trés linhas. A primeira recebeu uma imagem que serviu para © topo; a segunda recebeu os botdes do menu ea drea destinada ao contetido da pagina. Na iiltima linha ficou destinada a0 rodapé. Para inseri-la, clicamos no menu. Inserir escolhemos a opcao Tabela. Na caixa Tabela definimos que ela teria Trés linhas, Uma coluna e 955 pi xels de largura. Depois, fizemos com que ela ficasse cen- tralizada, selecionando a sua borda e fomos ao inspetor de propriedades, clicando na caixa Alinhar e escolhemos a opcio Centro. Lembre-se que fizemos isso, pois inde- pendentemente do tamanho do monitor do usuario, seja grande ou pequeno, o site sera visto no centro do navega- or, ficando como mostra imagem a seguir: INSERINDO IMAGEM DENTRO DE UMA TABELA Nosso préximo passo foi colocar a imagem que con- tém o nome da empresa, na primeira linha, Para isso, demos um clique sobre esta. Depois, clicamos no menu Inserir e, dentre as opgdes, escolhemos Imagen... Em seguida, fomos buscé-la na pasta img que se encontra dentra da pasta Documentos. No final. ficou como mos tra.a imagem exposta: 13 ve DREAMWEAVER CS5 - MOD | ‘TRABALHANDO COM TABELAS DENTRO DE OUTRA Um recurso muito comum quando estamos traba: Ihando com tabelas, afim de organizar a estrutura de um site, é utilizar mais de uma tabela, inserindo, inclu sive, uma dentro da outra. E a solugao para deixarmos ‘os botdes do menu alinhados do lado esquerdo e 0 con- tetido do lado direito foi criarmos outra tabela dentro da segunda linha da principal, com 1 linha e 2 colunas. Também ajustamos a primeira coluna para a esquerd deixando-a com 205 pixels de largura, ficando como mostra a imagem a seguir: Feito isso, criamos uma outra tabela com 01 linha, 01 coluna e 190 pixels de largura dentro dessa coluna que diminuimos o tamanho para receber os botdes do ment MUDANDO AS PROPRIEDADES DO BOTAO USANDO UMA NOVA REGRA DE ESTILO Nessa iiltima tabela criada, configuramos com seria o botdo do menu, Para isso, nés a deixamos selecionada depois, clicamos na seta do campo Regra-alvo, locali zada no inspetor de propriedades e escolhemus a opyau aDREAMWEAVER CS5 - MODI . Logo apés, clicamos no botao Editar regra, como podemos observar na ima- gem exposta: rea cov [regesko ctovoesto heaps... > | gee Ea] eatarrega_J|_Feraic Tamer Lona Hore Li So 2 vet(ll =) Na caixa de didlogo que foi aberta, fizemos as seguin tes configuragées e, por fim, clicamos no botao OK: - Categoria Tipo: *Font-family = Arial, Helvetica, sans-serif = Categoria Fundo: *Background-color = cinza - Categoria Bloco: “Textalign = center & FINALIZANDO OS BOTOES DO MENU Por fim, digitamos 0 nome desse botio, que foi HOME. E para fazermos o restante dos botdes do menu, pres J sionamos a tecla Tab, a qual criou novas linhas com a [| mesma formatacao da anterior e demos os nomes para eles de EMPRESA, PRODUTOS, HISTORIA e CONTATO. Eles ficaram como mostra a imagem a seguir EMPRESA PRODUTOS CONTATO ‘QUAL £ 0 TAMANHO CORRETO DE UM SITE? A primeira coisa que nos vem cabega, quando vamos construir um site, é 0 tamanho que ele terd, concorda? Para que vocé entenda sobre esse assunto, troque a palavra tamanho por resolugdo. Isso mesmo, pois a preocupacao que devemos ter, quanto a visuali- zacao do site, para diversidade de usuarios que pode- rao acessi-lo na web, éa resolueao dos monitores de- les. Mas afinal, o que seria isso? Saiba que a resolucao do monitor indica quantos pontos ou pixels compoem imagem que, aparece na tela. A resolucio que a maio- ria dos desenvolvedores utilizam como padrao ¢ a de 1024 por 768 pixels, ou seja, mostra 1024 pontos em cada uma das 768 linhas do monitor, resultando, no to- tal, 786.432 pontos. Devemos tomar cuidado na escolha da largura do site, pois esta diretamente ligado a resolugao dos mot tores. Imagine que vocé tem um monitor, cuja resolugio maxima é de 1024x768, e ao navegar pela internet, en- tra em um site no qual precisa usar a barra de rolagem horizontal para poder visualizar o restante dele, em re- lacdo a sua largura. Se isso acontecer, pode ter certeza que o site fot criado com uma resolugao maior e que sera melhor visto em monitores maiores que, consequente- mente possuem resolugdes maiores. Pois lembre-se, 0 tamanho adotado para o site deve levar em considera- 50 0 perfil da maioria dos usuarios que terao interesse pelos assuntos abordados nele, concorda? Resumindo, ndo existe um tamanho correto, mas sim uma anilise do piblico-alvo para evitar que a maioria dos usuarios nao vejam a largura inteira do site. Fique sabendo: Vamos supor que escolha a resolu a0 de 1024 por 768 para o site que desenvolvera, Voce deve estar pensando que deverd colocar a largura dele de 1024, certo? A resposta é ndo, pois repare que quan- do estamos com o navegador aberto, ele possui, na par- te superior, a 4rea destinada as URLs ¢ alguns possuem até abas das paginas abertas. Além disso, devemos in- luir o espago para as barras de rolagens. Enfim, temos que descontar essas dreas que acabam diminuindo avi sualizago das paginas e, por esse motivo, fot adotado como padr3o para essa resolucao 960 por 600. Logo, a largura correta para um site criado nessa resolugio & de 960 pixels.Dw] ORGANIZANDO OS ARQUIVOS Vimos na interacao a importancia de criar pastas, para que cada tipo de arquivo seja armazenado orga- nizadamente. Dentro da pasta Documentos deixamos a pasta Site, a qual conters todos’os arquivos que o site possuird, E dentro dela jé deixamos criado uma chama- da img, destinada a receber as imagens dele e que pos- suia a imagem do topo do site. A imagem a seguir mas- tra essa organizacao, incluindo a pagina que criamos, que ficard solta dentro da pasta Site. Documentos Site img 2 index ‘Dw UM POUCO SOBRE IMAGENS - [As imagens so componentes visuais muito iteis. $6 que elas costumam ser as vilas em relagdo ao tamanho final dos arquivos, onde quanto maior seu tamanho, mais tempo demora para fazer 0 download, ou seja, a apari¢ao completa da pagina. Com isso, a compressao de Imagens é muito importante para melhorarmos o tem- po de carregamento de um site. Existem varios forma- tos, porém os mais usados nas paginas da web sto os seguintes JPEG (Joint Photographic Experts Group): é 0 formato preferido para quando vamos colocar imagens fotogra- ficas ou ricas em cores, pois os arquivos em JPEG podem conter milhdes de cores. Saiba que & medida que a qua- lidade da imagem aumenta, ocorre isso no tamanho do arquivo e, por conseguinte, no tempo de download. Mas fique tranquil, pois é possivel conseguir um equilibrio entre a qualidade da imagem e o tamanho do arquivo, quando compactamos nesse formato, sendo este um dos motivos de ser muito utilizado para web, GIE (Graphic interchange Format): é 0 formato que post no maximo 256 cores e é indicado para imagens que possuem poucas cores, como, por exemplo, betses, icones, logomarcas, ou outras imagens com cores ¢ tons uniformes. Aceita, também, imagens com transparéncia, PNG (Portable Network Graphics): é usado para a ‘compactagao sem perdlas e para a exibicao de imagens & web. Ao contrario do GIF, esse formato oferece suporte hy DREAMWEAVER CSS - MOD | & para imagens de 24 bits (16,8 milhdes de cores) e gera transferéncias de plano de fundo sem arestas irregula res, Entretanto, nem todos os navegadores de internet io compativeis com esse tipo de arquivo. CAIXA ATRIBUTOS DE ACESSO A ‘TAG DE IMAGEM. Voeé deve se recordar que na aula interativa, quando inserimos a imagem do topo dosite, apareceu uma caixa denominada Atributos de acesso a tag de imagem, nao & mesmo? E aqui deixaremos a explicagao dela,a qual pos sui duas principais fungdes em relagao ao campo Texto alternativo: * Quando ocorre algum erro no carregamento da pi- gina e as imagens ndo aparecem ao usuario, em seu lu- gar fica uma caixa com um xis (x). E se tivéssemos digi tado algum nome no campo Texto alternativo, junto do xis seria mostrado, também, esse texto. [sso seria uma forma de dizer do que se trata aquela imagem. + Outra curiosidade é em relagao a acessibilidade aos deficientes visuais, onde eles conseguem acessar as p ginas da internet através de programas especificos, que fazem a leitura da tela, reconhecem o que foi escrito no campo Texto alternativo e fazem a leitura desse texto, E fantastico vermos como esse programa foi desenvol- vido pensando em todas as necessidades voltadas & in- ternet e juntos ainda desvendaremos muitos recursos interessantes, tenha a certeza disso. J4 0 campo Descrigo longa serve para colocarmos uma descrigdo mais detalhada sobre a imagem. Ao cl: car sobre ela, somos é levados para uma outra pagina oxplicativa, Saiba que, por padrao, essa caixa é aberta toda a vez que formos inserir imagens em nossas paginas e que & opcional o preenchimento desses campos, sendo que se no quisermos dar nenhuma indicagao, bastava clicar: & srsccemamanecom varDREAMWEAVER CS5 - MOD I mos no botao OK dessa caixa que nao iria interferir em nada. Porém, conforme vimos, se pelo menos. preencher- mos 0 campo Texto alternativo, temos duas vantagens. oe (0 QUE VAMOS FAZER Nesta aula, daremos continuidade pagina principal do site da empresa NativaCRED, no qual trabalharemos com 0 texto do contetido dessa paigitna e também com 0 rodapé. No final, ficaré como est sendo mostrado na imagem a seguir: ATENGAO: Esta apostila é interativa, Entdo, para aces- ‘sarmos nossa aula, primeiramente, clique no botdo Ini- ‘iar que se encontra na barra de tarefas. Na lista que €apresentada, clique na opefo Sistema In- terativo de Ensino. Assim, acessaremos nossa apostiia simulada e comecaremos a aula. 01 - Primeiramente, abriremos © programa Drea mweaver. Para isso, clique no botao Iniciar e clique em ‘Todos os programas. Em seguida, clique na pasta Ado- be Master Collection CS5_e dentre as opgies, escolha || Adobe Dreamweaver CSS. 02 - Feito isso, abriremos o arquivo que fizemos na aula interativa. Portanto, na janela de boas-vindas, cli- {que no {cone Abrir, E como a pagina index esta salva na pasta Site, dentro da pasta Documentos, no Disco Local (C:), dé um duplo clique nos locais mencionados, rama paraabri-la 03. E como continyaremos trabalhando a parte vi- sual dessa pagina, delxaremos a viswalizagao somente para o documento. Sendo assim, clique no botao Design. Dw} (CRIANDO UMA REGRA DE ESTILO Vocé deve se recordar que, na aula interativa, ap: camos aos botdes do menu uma regra de estilo, onde escolhemos como seria 0 texto e a cor de fundo, E ser exatamente isso 0 que faremos agora. Indicaremos ‘como queremos que o texto fique na drea destinada conteiido da pagina. Acompanhe os passosa seguir ere~ Jembre como esta tarefa é simples! 20 04 - Antes de mais nada, temos que selecionar a area que iremos aplicar a regra de estilo. No caso, é a parte que esta sendo mostrada na imagem a seguir, portanto, dé um clique sobre esse local Ty Lis (05 - Agora, iremos aplicar uma regra de estilo para definirmos como sera o texto ea cor de fundo. Portanto, ‘va no inspetor de propriedades e clique na seta da caixa Regra-alvo e dentre as upyies escolha , como mostra a imagem exposta: | Tenesho He 06 - Feito isso, comecaremos a realizar as alteracdes necessérias, Para isso, clique no botio Editar regra, lo- calizado no inspetor de propriedades. 07 - Na caixa de didlogo que se abre, escolha as op- goes de acordo comas indicagbes a seguir. No final, fica- ra como mostra a imagem exposta: i? a= ee See: cs 2 in lies _ JE. oe kU = a 16 Li SACategoria: Tipo Font_famil Fontsize Caixa Color = preto Verdana, Geneva, sans-serif im & 10 - Repare que o texto esta localizado no centro dessa drea destinada ao contetido da pagina. Porém, ‘como temos mais texto a digitar, o melhor é ele iniciar na parte superior, concorda? E é muito facil fazermos isso. V4 no inspetor de propriedades e clique na caixa Vert, que é responsavel pelo sentido vertical, e esco- ha Superior. DREAMWEAVER CSS - MOD | | nee 4A a) eee) Ca 08 - Ainda est faltando colocarmos uma cor de fun- do para essa area, Entao, clique na Categoria Fundo e, depois, clique na caixa Background-color e escolha a cor branca. Logo apés, conlirme essas mudancas cli- cando no botdo OK dessa janela. 09 - Agora comecaremos a digitar o contetido de apresentago dessa pagina principal. E ndo precisamos selecionar nenhuma ferramenta. Sendo assim, digite Crédito facil, répido e sem complicacdes. Tudo isso com apenas trés anos. 4 11 - Muito bem, agora continuaremos a digitar, Para isso, pressione Enter duas vezes para pularmos uma liv nha e, depois, digite o que esté na caixa de texto a seguir: Apesar de atuar ha pouco tempo no mercado fi- nanceiro, uma coisa que valorizamos em nossa corganizagaio é a confianga, a verdade e o respei to. Com esses trés valores como pilares de nos- sa organiza¢io, a NativaCRED ver se destacan- do cada vez mais no nicho de Crédito Pessoal, como uma empresa de alta credibilidade. Sabemos que um cliente satisfeito ¢ a nossa me- Ihor propaganda, por isso, temos um diferencial no atendimento e na concessao de crédito pes: soal. Entdo, mesmo que vocé acredite que ja se esgotaram todas as possibilidades em outras instituigdes, saiba que a NativaCRED estara sempre do seu lado para oferecer crédito répi- doe sem burocracia, nto, conhega, agora, nossos produtos e saiba mais sobre nossa empresa. Depois, caso tenha diividas ou precise da nossa orientacdo, entre em contato. 12 - Nosso préximo passo sera fazer mais alguns ajustes necessarios a esse texto. E para podermos Visu- alizé-lo por inteiro, clique no local indicado pela imagem para quea Barra de rolagem horizontal vé totalmente para a direita, BY} |essa questo, primeiramente, temos que selecioné-lo por completo. Portanto, dé um clique no comego dele e, sem soltar, arraste até o seu final. Feito isso, clique duas vezes no boto Justificar, localizado no inspetor de propriedades, | 14- Repare que, tanto do lado direito quanto do es- J querdo, 0 texto esté bem préximo ao limite da tabela e |) seria interessante que ficassem com uma pequena dis- J tancia, nao é mesmo? Dessa forma, precisamos entrar {) novamente em Editar regra, Faca isso, clicando no re- ferido botao. A categoria que encontramos as definigdes de espa ssemrelacdoa DEFININDO ESPACAMENTO EM RELACAO A BORDA . Logo apés, clique no botao Editar regra, ambos localizados no inspetor de propriedades. cbodi> crble> <> (cz>) 19 - Uma caixa de didlogo é aberta novamente. De acordo com os seus conhecimentas, faga as alteracoes conforme est sendo indicado a seguir e, quando termi- nar clique no botao OK. Categoria: Tipo Font family = Arial, Helvetica, sans-serif Fontsize = 10 Font-weight = bold Caixa Color Categoria: Bloco Textalign 20 - Agora digite Direitos reservados NativaCRED. 21.- Opal Note que esquecemos de dar a mesma dis Lancia, em relacdo 4 borda do lado direito para o roda- pé. Mas para resolvermos isso ¢ muito simples. Clique novamente no botao Editar regra e clique na categoria Caixa. Em seguida, desmarque a caixa Igual para tudo da drea Padding, Clique na caixa Righte digite 10. Fina- lize, clicando no botdo OK. raeDREAMWEAVER CS5- MOD! 22- Otimo! Assim, deixamos orodapé comamesmacon- figuragaodoccorpodo texto. Agora pressione Enter para pu laruma linha econtinuarmos colocando mais informagao, 6 que tem mais um problema, repare que o espaga- mento do pardgrafo é muito grande e gostariamos que ficasse menor, isto 6, mais préximo um do outro. E nosso proximo passo sera solucionar isso, 4 CRIANDO PARAGRAFO COM. ESPACAMENTO MENOR Entraremos em um assunto novo e importante, Re- pare onde o cursor de digitagao est depois de termos pressionado Enter. Est muito longe! Como queremos um pardgrafo perto do outro, é muito simples. Primei- ramente, iremos desfazer o passo de incluir o Enter e, depois, aprenderemos como podemos fazer para ter- | mos a distancia dos pardgrafos menores. Entéo, vamos 14! Acompanhe os préximos exercicios. 23 - Para desfazermos, clique no menu Editar e, de- pois, escolha Desfazer Novo paragrafo. 24-- Para criarmos um paragrafo com 0 espago me- nor, mantenha a tecla Shift pressionada e, sem soltar, pressione Enter: Logo depois, digite Copyright 2011. 25 - Novamente pressione Shift e, depois, pressione Enter para pularmos outra linha e digite Melhor visu- alizado em 1024x768. 26 - Muito bem, para finalizarmos s6 esta faltando mais um pequeno detalhe, que esta relacionado com os botdes do menu. E, para visualizé-los melhor, clique no local indicado na Barra de rolagem horizontal 27+ Repare que a tabcla, conforme fomos acrescentan- doo texto, ela foi se movendo para o centro. Mas ndoé esse ‘© nosso desejo. Queremas que Fique sempre para cima. Para solucionarms isso, 6 necessario selecionar a tabela, ou methor,adrea unde ela esta. Entao, dé um clique bem no meio dela e da érea do texto, assim como mostra imagem a seguir. Note que o cursor de digitagdo esta piscando. Ago- ra, pressione tecla direcional para a esquerda. reco tcl, rbpido & sem compleacces, ete i a ana ne eS ee ee eS sate sansa frais dae 35 possbIiades em Outras TSI ara oferecer credo rapide e sem Burort to, conhesa agora nossos produto itv i prerise do noaze onentaese, entre a tabelas 28 Fizemos isso para deixar o cursor de digitagio do lado esquerdo. Dessa forma, va na caixa Vert, localizada no inspetor de propriedades e escolha a opcao Superior. Senantes inde omer cmeate 29 - Nossa pagina ficou étima, parabéns. Ent, va- mos salvé+la. Portanto, clique no menu Arquivo, ¢ de- pois, clique em Salvar. 30 - Agora, visualizaremos como ela sera’ mostrada no navegador. Sendo assim, clique no botao Visualizar/ depurar no navegador c, dentre as opcoes, escolha vI- sualizar emlExplore. Quando terminar de ver, clique no botio Fechar do navegador. >esorar [©] Regi Tee: Ooamerio sen tho —— enlglore cH erence Gm Cir AFD Viuslzer emAdebe Bp sera CilshfteFi2 Eedtar lite de nevegadots. ie 31- Por fim, saia também do Dreamweaver, clicando no botao Fechar dele. Assim, chegamos ao final de mais uma aula e espe~ ramos que tenha gostado dle aprender como podemos criar paginas, utilizando tabelas para organizar a es trutura do Layout. Saiba que nosso trabalho seré conti nuado na préxima atividade, pois faremos esse site por completo, Mas lembre-se que, para finalizar, voe@ tera que responder & avaliac3o. Entio, boa sorte e até mais! a a © We 20 i= DREAMWEAVER CS5 - MODI [Dw Aula 04 - Aprendendo a criar links 14! Bem-vindo a mais uma aula deste curso! Esperamos que esteja animado, pois daremos continuidade ao que comegamos na interact. Como deve se recordar, criamos as outras paginas do site da empresa NativaCRED e realizamos as ligagBes delas com os seus ks. respectivos botoes, isto ¢, elaboramos como dissemos, deixamos a tiltima pagina referente ao botio Contato para finalizarmos em nossa aula apostilada. Assim, reforcaremos essa importante aprendizagem, re~ vendo como ¢ facil as varias maneiras para criar links. Saiba que deixaremos em seu material apostilaco a parte teorica de maior importancia relacionada a esse assunto, para poder consultar sempre que sentir necessidade. Sem mais demora, vamos comegar! Dw} OBJETIVOS DA AULA + Aprender sobre o que sao links e seus tipos; * Conhecer a caixa Hiperlink e seus campos; + Entender as opedes de destinos das paginas em relacdo ao navegador; + Importar arquivos elaborados no Word; * Conhecer como salvar as paginas criadas; * Criar links e configuré-los; + Aprender a configurar o navegador Internet Explorer; Dw} NA AULA INTERATIVA... demos continuidade ao site ca empresa NativaCRED, que comegamos na aula passada, na qual criamos as ou tras piginas e também as interligamos com seus respec tivos botdes. Para isso, seguimos os passos a seguir ‘A Abrimos o arquivo index.html, usando-o como base para a préxima pégina, a qual terd o mesmo layout, mudando apenas o contetido do texto. Entao, 0 apaga- 21 mos e digitamos o texto que se refere ao botdio Empresa Depois disso, salvamos esse arquivo, utilizando a opcao Salvar Como, dentro da pasta Site, com 0 mesmo nome do link que a chamar4, isto é, empresa.html. B- Para a proxima pagina, utilizando como base esta que acabamos de criar, apagamos o seu texto eaprende- ‘mos como importar arquivos criados em um editor de | texto muito conhecido, o Word. Bastou clicar no menu & atse mL MLO TRY — A aL iy DREAMWEAVER CS5- MODI Arquivo e, depois posicionar 0 ponteiro do mouse so- bre Importar e escolher a op¢do Documento do Word, sendo este um recurso muito pratico e rapido. C- Foi realizado 0 mesmo procedimento para as ou- tras duas paginas e jd iniciamos uma outra etapa muito importante, que foi criar os links dos botdes com suas respectivas paginas. Primeiramente, selecionamos oat quivo index.ktml e, em seguida, selecionamos o texto do botao Home, clicamos no menu Inserir ¢ escolhie- mosa opedo Hiperlink. D- Com isso, fol aberta a caixa de dilogo Hiperlink, com alguns campos para definirmos como sera essa gacdo. Escolhemos as configuragdes mostradas na ima- gema segui Texto: HOME: Link: Index htm! Destino: new Titulo Home, E: Para o préximo botdo, aprendemos outra op¢ao que ‘programa nos oferece e que facilita acriacao dos links, que éatravés de campos que estado presentes no Inspetor de propriedades. Clicamos no {cone chamado Procurar arquivo para localizarmos a pagina de ligacao para 0 bo- to Empresa, além de preenchemos os campos Titulo & Destino, conforme mostra.a imagem a seguir: [Sar gone Case Nerhuwis) == B Bos 1 ernaa)* Unk eveesa ir = tenn) oy BT ek ernest sem gna Farto T tengo: Esses campos sempre estarao presentes na opcdo HTMLe nao do CSS, no Inspetor de propriedades. F - Em seguida, utilizamos uma outra maneira de criarmos links rapidamente, que foi usar o icone Apon- tar para 0 arquivo, no qual clicamos, e sem soltar, ar~ rastamos até a pdgina produtos.html, mostrada no painel Arquivos, como mostra a imagem exposta G-E utilizando esse mesmo recurso, fizemos as liga- ses dos outros dois botdes. E, depois, passamos para outra tarefa, que foi realizar a formatacao dos links. Para isso, clicamos no menu Modificar e escolhemos a opcdo Propriedades da pagina. Em seguida, clicamos na categoria Links (CSS) e fizemos as alterages, como mostra a imagem a seguir: wea Re | some | | | H- Por fim, visualizamos no navegador 0 nosso traba- tho que, por sinal, ficou muito bom e os links funcionan- do perfeitamente. [ERY ave sko winks eseustipos Link vem da palavra Hyperlink, que provém do inglés € traduzindo significa hiperligagao. Eles servem para ligar um botao, imagem ou texto para outro site, docu: env uu até mesmo uma determinada parte da pagina, Sao eles que tornam a internet bem interativa, de modo que, ao clicé-los, somos levados para algum lugar. Pode- mos dizer que eles criam um elo com outro documento‘ou Imagem, e dessa forma, nos disponibiliza elaborar Indmeras paginas dentro do site, que podem ser aces- sadas com extrema facilidade pelo visitante. Quando navegamos pela internet, sabemos 0 que sdo links atra~ vvés do ponteiro do mouse, que se transforma em uma pequena mao com o dedo indicador apontando. Saiba que hd dois tipos de links, classificados em rela- ‘¢40 ao caminho de ligacao deles: Links Absolutos: so aqueles que precisamos infor- mar a URL dele completa, ou seja, todo 0 seu caminho na rede, Normalmente, esses links esto fora da pasta do site, pertencendo a outro lugar. Vamos supor que um link deverd levar para a pagina do Google. 0 caminho dele deverd ser este: http://www.google.com.br. Links Relativos: sao aqueles que fazem a ligagio para arquivos locais. Em nossa aula, utilizamos esse tipo de link, onde interligamos os botdes com as respec- tivas paginas, usando para o caminho apenas o nome do arquivo, seguido do tipo dele, por exemplo: index.html, [ER coNneCeNDo A CAIxAHIPERLINK Ao clicar no menu Inserir e escolher a opcao Hiper- link, ¢ aberta uma caixa de didlogo com alguns campos que podemos configurar. Conhega 0 que cada um fav, acompanhando a imagem exposta like indo hind 7° A- Texto: serve para colocarmos o texto do link Como vitios na pratica, quando selecionamos o texto que se tornaré um link, esse campo ja vem preenchido B- Link: nesse campo informamos o arquivo que fara a ligagao e podemos fazer de duas maneiras: digitando 0 nome dele ou clicando no icone Procurar para encontré-lo. G- Destino: definimos como os links serao mostrados no navegador: Vocé tera maiores informacdes a seguir. D- Titulo: serve para darmos um nome para esse link. Quando posicionamos 0 mouse sobre ele, uma pe- DREAMWEAVER CS5 - MOD | quena caixa de texto aparece embaixo do ponteiro do mouse, com 0 que escrevemos nesse campo. Esse titulo pode conter o mesmo nome do link ou alguma informa- do pequena do que ele fara. DEFININDO OS DESTINOS DAS PAGINAS NO NAVEGADOR Vimos que, ao criar links, podemos definir, também, como essas ligaoes serao mostradas no navegador, através da caixa Destino. Deixaremos as opgdes que podemos escolher, assim como as diferencas entre cada uma delas, acompanhe: pete +_blank: sempre carregara o link em uma nova guia ou pagina do navegador; mew: carrega em uma nova guia ou pagina, porém toda a vez que clicarmos nos links do site, serao mos- tradas somente nesta que foi aberta, evitando ter uma grande quantidade de guias abertas, dependendo dos links visitados. F esta foi a opco que escolhemos para o site que criamos. + parent: essa opso carrega o link na mesma janela. Ela é muito sitil quando a pagina possui quadros e o car regamento do link deverd aparecer em uma drea espect- fica, de modo que o restante da pagina continuaa mesma, +-self: carrega 0 arquivo vinculado na mesma janela do link. O programa tem essa opcao como padrao, caso do especificarmos como vamos querer o destino. top: abriré na mesma janela ou guia, removendo os quadros da pagina. IMPORTANDO ARQUIVOSELABORADOS. EM O UTRO PROGRAMA, Vimos, na aula interativa a facilidade que foi trazer arquivos prontos, elaborados no editor de textos muito conhecido, 0 Microsoft Word. E foi muito simples! Pri- & 23 ESaa eer im DREAMWEAVER CS5- MOD! ‘meiramente, selecionamos 0 local para colocé-lo. Em seguida, clicamos no menu Arquivo ¢ posicionando 0 ponteiro do mouse sobre a op¢ao Importar no menu de opgdes, escolhemos Documento do Word, como mos- traa imagem a seguir: Dw my oO Ay Assim, é aberto uma janela para procurarmos 0 ar- quivo que desejamos importar no Dreamweaver. Saiba ‘que podemos escolher a formatayau du texto na caixa Formatacao dessa janela, conforme esta sendo mostra- dana imagem exposta: + Apenas texto: o texto é inserido sem nenhuma for- matagao. Caso 0 original possuia formatagao (Fonte, ta- manho, dentre outras), ela sera removida nessa opeao. + Texto com estrutura: traz apenas a estrutura do texto, ou seja, pardgrafos, istas, tabelas, mas ndo a formatagao. + Texto, estrutura, formatacao basica: essa op¢a0 traz.o texto com sua estrutura e formatagao e 0 pro- _grama as deixa come pada quando importamos ar quivos do Word + Texto, estrutura, formatagao completa: 0 texto 6 inserido com sua estrutura, formatagao ¢ também com seus estilos, que nada mais so do que um con- junto de caracteristicas aplicadas ao texto, que tanto © editor de texto fornece, como pode ser criado um personalizado. Como podemos ver, podemos escolher como vamos trazer esses arquivos para o programa. Saiba que essas opcdes so iguais para arquivos trazidos do Microsoft Excel, programa dedicado as planilhas eletrénicas. | DEY saivanooas Na aula interativa, aprendemos a usar uma pagina pronta como base, deixando 0 layout sem mexer, alte- rando apenas o contetido do texto de cada uma. E na hora de salvar devemos nos lembrar de utilizar a op¢ao Salvar como. Outro detalhe, caso nao tenha percebido, 6 que no campo Nome, além de darmos 0 nome para a nova pagina, também definimos 0 tipo dela, como por cexemplo empresa.html. Mas saiba que isso ¢ opcional, pois como padriio, o Dreamweaver jé salva nesse tipo de ‘arquivo. Isso significa que se tivéssemos salvo o arquivo apenas com 0 nome, também estaria certo, porque ele \GINAS CRIADAS seria salvo em HTML. aE re 7 & pee “| = zh Dw} (© QUE VAMOS FAZER oe Conforme dissemos antes, s6 esta faltando elaborar as ligacdes dos botdes da pagina Contato. E esta seré a nossa tarefa. Com isso, relembraremos as varias manei- ras de se criar links, também, como formaté-los. Temos, certeza que ajudara a reforcar essa importante aprendi- zagem. E, entao, preparado para comecar? No final, os, links ficardio como esto sendo mostrados a seguir:i i 25 ae DREAMWEAVER CS5 - MODI | a “Sem formatagao” Documentos, no Disco Local (C3, através de duplos cli- ques nos locais mencionados. = 03 - Note que temos as pastas img e Textos e também as cinco paginas que compdem o site. 0 que faremos ser4 abrir apenas que trabalharemos. Sendo assim, dé um duplo clique em contato, 2 Nene => ins oa a @ empresa fe hisora [ER crianpouines A partir de agora, veremos como é facil crid-los e as varias maneiras que esse maravilhoso programa nos proporciona em relagdo a isso. Acompanhe os pasos a seguir: rine SSeS G4 - Comegaremos selecionando a palavra do botao Home. Sendo assim, dé um duplo clique em cima dele. ATENCAO: Esta apostila interativa. Entdo, para aces- | ‘sarmos nossa aula, primeiramente, clique no botda Ini- | lar que se encontra na barra de tarefes. | ‘Na lista que é apresentada, clique na opgdo Sistema In- 7 terativo de Ensino. Assim, acessaremos nossa apostila simulada e comecaremos a aula. 05 - Depois, clique no menu Inserir e, dentre as op: oes, escolha Hiperlink. 01 - Primeiramente, abra 0 Adobe Dreamweaver cases tonienies 06 - Na caixa de didlogo que aparece, iremos configu- raralguns campos. Repare que o primeiro, que se refere a0 Texto, est com o mesmo nome do botdo. Nao iremos mudar isso. 4 no préximo, chamado Link, clique no ico- ne Procurar ¢ note que jé estamos dentro da pasta Site. Ento, dé um duplo clique em index. a 02 - Como iremos terminar o site da empresa Nati- vaCRED, clique no icone Abrir, na tela de boas-vindas, e, depois, vi até a pasta Site que esta dentro da pasta7 ee I" DREAMWEAVER CS5 - MOD! 07 - Nosso préximo passo sera dar um destino para esse link, ou seja, como ele serd mostrado no navegador. Assim como fizemos na interagao, clique na seta da cai- xa Destino e selecione a op¢do _new. 08 - Para o campo Titulo, que é destinado a dar um nome para oink, dé um clique nele e digite Home. Logo apés, clique no botdo OK. 09 - Agora, criaremos 0 link do préximo botao, s6 que de uma maneira diferente, sem utilizar 0 menu. Como vocé deve se recordar, o Inspetor de propriedades tam- bém possui uma Area dedicada as ligagoes e a utilizare- mos. Primeiramente, pressione Tab para selecionarmos 0 bot3o Empresa. Feito isso, clique no icone Procurar arquivo e escolhia a pagina empresa, dando um duplo clique sobre ela. 10- Complete esse link, clicando no campo Titulo. Digite Empresae, depois,cliquena seta dacaixaDestinoeescolha a opgaio new, ficando como mostra a imagem a seguir f oT 5 Unicede (UTF-) Titulo Empre Destine EES (Procnedades di 11 - Muito bem, agora selecionaremos 0 outro botao. Sendo assim, dé um duplo clique em cima da palavra Produtos. 12 - Criaremos o link desse botdo de uma outra ma- neira. Estamos nos referindo ao fcone Apontar para 0 ‘aquivo, lembra-se dele? E a primeira coisa que deverios fazer 6 verificar se 0 painel Arquivos est dentro do Disco Local (C3. No nosso caso esté, s6 que precisamos fazer aparecer as paginas que estao dentra da pasta Site. Sendo assim, clique no sinal de Adi¢ao (+) tanto da pasta Documentos quanto da Site, deixando como mostraa imagem a seguir: 13 - Agora sim, clique no icone Apontar para 0 ar- quivo e sem soltar, arraste até a pagina produtos, loca- lizada no painel Arquivos. 14 Clique no campo Titulo e digite Produtos. Na caixa Destino, clique na seta dela e escolha new. 15 - Feito isso, iremos realizar esses mesmos passos para os dois botdes restantes. E lembre-se que primeira- mente devemos selecionar o texto do botao, dando um duplo clique em cima dele e, em seguida, fazer as seguin- tes alteragbes para cada um, seguindo a tabela a seguir Boto [Unk Tule esting HISTORIA | historia html Histeria _ew ConTATO _[ contata hunt Contato _newNosso préximo passo serd realizar a formatacaio dos links, ou seja, definiremos como eles aparecerao, se mu- dard a cor quando o mouse passar em cima deles ou ao liar ¢ até mesmo quando ja tiverem sido visitados. Por padrao, o programa os deixa na cor azul ecom um subli- nhado, mas podemos adaptar as nossas necessidades. F como vocé deve se recordar, essa é uma tarefa muito simples e répida. E, assim, como fizemos na aula intera- tiva, aplicaremos as mesmas configuragdes para esses links. Portanto, siga os exercfcios a seguir: 16 - Como estamos com 0 botao Contato selecionado, icar e, em seguida, clique em Pro- priedades da pagina. Na caixa de didlogo que aparece, clique na categoria Link (CSS), conforme esta sendo mostrado na imagem a seguir: tment tareaibndesirs coon 1 Com issn, avessamas as prapriedades dos links. Para que tenha um melhor entendimento sobre 0 que cada campo determina, deixamos a explicagao deles a seguir, acompanhe: @ Fetes (aoa bone cr) Je Care = oz Oma Oinevenson Ps) © wis aos 7 Ce | ul A. Fonte do link: escolhemosa familia da fonte que 0 link tera. Por padrdo, o programa deixa a fonte idéntica autilizada na pagina. B- Tamanho: selecionamos 0 tamanho da fonte que o link tors C- Cor do link: especificamos a cor que tera o texto CBE coiink q ri D- Links visitados: escolhemos a cor que ser apli- & i DREAMWEAVER CS5 - MODI cada aos links que jé foram visitados, diferenciando-os os que ainda nao foram vistos. E- Links de ou Links de sobreposicao: seleciona- mos a cor a ser aplicada quando 0 ponteiro do mouse se posicionar em cima do link, chamando a atengao do ustrio que ali contém uma ligagao. F- Links ativos: especificamosa cor que o link ficara, rapidamente, quando for clicado pelo mouse, G- Estilo sublinhado: escolhemos o estilo do subli- nhado nos links. Por padrao, o Dreamweaver detxaa op- 40 Sempre sublinhado. 17 - Nos campos Fonte do link e Tamanho nao mexe- remos. Ento, comegaremos com o campo Cor do link. No caso, queremos que ele possua a mesma cor de antes de receber os links. Sendo assim, clique na caixa desse i a campo e escolha a cor preta (#000), indicada pela ima- gem a seguir: 18 - Agora, clique na caixa do campo Links visitados e, assim como fizemos na interagao, escolheremos uma cor personalizada. Portanto, clique no Seletor de cores, conforme esta sendo indicado pela imagem exposta. 4 19 - Com isso, a caixa de didlogo Cor é aberta. Para chegarmos no tom de verde igual ao que usamos nos ou- tros links, clique na seta da barra vertical ¢ arraste-a até 0 local indicado pela imagem a seguir. Em seguida, clique dentro da caixa para selecionar a cor. Por fim, cli- que no botdo OK para confirmar. 27i or Podemos cheger nessa coratravésdessestréscamp0S— 4 _ par, finalizar as configuraydes dos links, est dedicados i cores primarias,deixando ovalor 62 para gm 10 trarrroe o trace deles Pare iso, clique na ,82 parao Verde e 61 para o Azul. 8 Tha a opeao N campo Vermelho, 82 para o Verde e 61 para o Azul caixa Estilo sublinhado e escolha a op¢3o Nunca su- blinhado, Depois, clique no bot’o OK dessa caixa para confirmarmos as alteragées. fe g i Femmaa? aaa 7T mEeaaa 23 - Muito bem, chegou 0 momento de visualizarmos no navegador para vermos como ficou 0 nosso trabalho. Mas, antes, salvaremos essa pagina. Portanto, clique no menu Arquivo e em seguida clique em Salvar. Depois, clique no botao Visualizar/depurar no navegador ¢ escolha Visualizar emlExplore, 20 = 0 préxima passa sera esrolher uma cor para quando 0 mouse passar em cima do link. Para isso, cl que na caixa Links de e, no menu de cores que aparece, WonntaerenDace cotal Gira Gy ounlcremAsebe Browerieb — CwisShiteF12 = reseecdo Eitri ote. clo Gites) 24 - Agora, clique no primeiro botdo, ou seja, em Home. HOME: EMPRESA PRODUTOS | HISTORIA | 21-|é para o campo Links Ativos, que serve para de finir uma cor para quando 0 mouse clicar sobre o link, clique em sua caixa e escolha a cor branca (#FFF) como est sendo mostrado na imagem: LTTECONFIGURANDO'O INTERNET EXPLORER setadails Note que o navegador abriu a referida pagina em ou- tra janela que se sobrep6s a primeira. Salba que isso & pacino desse navegador. Ento, o que faremos ser rea- lizarmos uma pequena configuracdo no Internet Explo- rer, pois queremos que 0s links sejam mostrados como na aula interativa, ou seja, que sejam visualizados em uma nova guia. Aprenderemos a fazer essa mudanca juntos e veremos como ¢ facil e répido. Basta seguir os préximos passos 25 - Primeiramente, saia da janela que se abriu, cli cando no botao Fechar dela. Com a primeira pagina do navegador sendo mostrada, clique em Ferramentas, no local indicado pela imagem exposta, ¢ escolha Opgdes da Internet. Imprimir Arquivo , Zoom (100%) , Sequranes » itr downtoads Gerenciar Complems Ferramentas pared Wyolvedores F12 Irpara sites foes ‘critica Sobre ntemet Bprorer ‘e-mail: faleconosco@nativacréd.com. br 8:00h as 18:00h e aos sdbados das 8:00h 3s 26 - Com isso, é aberta uma janela. Nela, clique no bo- tao Configuragses, da area Guias, conforme est sendo mostrado, se mate toes Tait} DREAMWEAVER CS5 - MOD | figuragdes de Navegagao com Guias. Na area “Quan- do um pop-up for encontrado,’, clique na op¢a0 Sempre abrir pop-ups em uma nova guia. Feito isso, clique nos botdes OK dessa janela e, também, ca primeira, pois acabamos de configurar o navegador. Tei Fo vegale com Gams (eg encase eee Ui avesrne 20 fecha vita dae rao Gas Rédas™ Zebitar rooe de catee® brink de outosrogamas em: Umno jane 9 Ura ova rasan ata Eva em vi adi erin do Intemet apres 28 - Agora podemos testar os links. Entdo comece clicando no primeiro botéo novamente, o Home e ob- serve as mudancas de cores ao posicionar © mouse em cima e ao clicar. E mais, note, também, como fol aberto no navegador, que agora se encontra em uma nova guia. Quando terminar de testar os cinco links do botdes, saia do navegador, clicando no botao Fechar. 29 - Perfeito! Nosso trabalho foi concluido com éxito, parabéns! Entdo, saia desse maravilhoso programa, cli- cando no botao Fechar dele. Finalizamos, assim, 0 nosso projeto que iniciamos na aula passada, Certamente esse trabalho nos trouxe mui- tos ensinamentos importantes sobre como utilizarmos tabelas ¢ elaborar links, vendo na pratica como é facil utilizar esse fabuloso programa destinado a criagio de sites, Saiba que foi apenas o comeco, pois aprenderemos muito no decorrer deste curso. B, para encerrarmos essa aula, lembre-se de responder & avaliacao. Entao, boa sorte e até a préxima!DREAMWEAVER CS5 - MOD I Aula 05 - Revisando conceitos importantes Old! Bem-vindo & quinta aula deste curso. Durante a aula interativa, nés revimos os principais conceitos apren- didos até aqui. Nos exercicios a seguir, continuaremos nossa revisao, aperfeigoando nosso aprendizado, Voce | ira continuar 0 site que iniciamos anteriormente, realizando o “acabamento” do mesmo. E muito importante \ ‘que preste bastante atencao e que se dedique ao maximo aos exercicios propostos aqui para obter os melhores resultados, boa sorte! : Nesta aula da apostila, daremos continuidade ao tra- Dw OBJETIVOS DA AULA balho jé iniciado na atividade interativa, criando novas paginas e adicionando os links As mesmas. No final da + Inserir links; aula, nosso trabalho ficara como mostrado a seguir: + Trabalhar com tabelas; * Inseririmagens; ATENGAO: Esta apostila € interativa. Entdo, para aces- | + Importar um texto pagina. Sarmos nossa aula, primetramente cigie no botdo Ink ‘clar que se encontra na barra de tarefas. ‘Na lista que € apresentada, clique na opedo Sistema In- terativo de Ensino, Assim, acessaremos nossa apastila simulada e comesaremos a aula. Dw} © QUE VAMOS FAZER, 01 - Com aso nos seus conhecimentos, abra o progra- ma Dreamweaver CSS ¢, na janela de boas vindas, clique sobre 0 icone Abrir, do campo Abrir umitem recente Na janela mostrada, dé um duplo clique.na pasta Documentos. Em seguida, da mesma maneffayabra a pasta Site, selecione o arquivo Index.html e clique em Abrir. 02 - Temos a primeira pagina do site pronta. O que fa- remos agora é criar a outras a partir desta, Basicamen- te, basta alterarmos titulo, o contetido e salvé-la como uma nova pagina, Comegaremos pela pagina do campo~ “ DREAMWEAVER CS5- MOD | Empresa. Portanto, dé um duplo clique na opeao Titu- 06 - Agora, vamos inserir 0 novo contetido da pagina. Jo, para selecionar seu contetido e digite: Empresa Para tanto, ainda na coluna da esquerda, clique sobre o menu Arquivo. Em seguida, clique em Importar e en- to, em Documento do Word. Na janela mostrada, abra a pasta Texto que se encontra na pasta Site e, entio, se- lecione o texto com 0 nome da pagina, ou soja, Empresa e clique em Abrir. 07 - Muito bem! Com isso, temos a pagina da empre- sa pronta, basta salvé-la. Sendo assim, no menu Arqui- vo, clique em Salvar como, pois nao queremos que ela sobrescreva a pagina anterior. Com seus conhecimen- to, salve-a com o nome Empresa.html na pasta Site. 03 - Agora, retiraremos 0 contedido presente nesta para adicionarmos oda nova pagina. Desse modo, clique 8 - Agora & com vocé! Baseado nos exercicios an- nos locais mostrados na imagem para ajustarmos nossa teriores, faga as paginas restantes, ou seja, as pagi- visualizagio, nas, Servigos, Produtos e Contatos. Lembre-se que 6 necessario, renomear, apagar o contetido presente, adicionar o texto, que tem 0 mesmo nome da pagina e, em seguida, salva-las com 0 nome referente a seus contetidos. Caso tenha duvida, nao exite em olhar os passos anteriores. Atengao: Nao esqueca de nomear a pagina Servicos sema cedilha ou seja, Servicos. ee (09 - Muito bem! Agora que temos todas as paginas inseridas, podemos comegar a adicionar os hiperlinks, ‘que, como voc jé sabe. nada mais sdo que uma ligacao entre um determinado elemento da pagina a outro. En- to, vamos la! Abraa pagina Index.html clicando no local ‘mostrado na imagem a seguir. Comecaremos pelo Home. Desse modo, dé um duplo clique sobre essa palavra no . nosso menu para selecioné-la. Depois, clique sobre 0 ico- 04 - Feito isso, selecione a tabela do depoimento,como ne Procurar arquivo, do campo Link, abra na pasta Site ‘mostrado na imagem edelete-a pressionando Delete. _, com um duplo clique, selecione o arquivo Index html. eee Dw Arquivo Editar Exibir _Inserir Modificar For arraste até sau Tndexhinl | ain [oeson] cidgo ato Ts, ake © Q trier: P 05 -Poraapagaro texto, ao lado esquerdoterenos anaemia que seleciond-lo. Para isso, com um clique atras do tlti- mo ponte final, depois da palavra trabalhadores, deixe 0 10 - Agora, dé um duplo clique sobre a palavra Em- cursor de digitagao no final do mesmo ¢, ento, pressio- —_ presa, do menu, e, entdo, no icone Procurar arquivo. ne as tecla Ctrl+Shift+Home. Depois, pressione a tecla.__ No campo Link, selecione Empresa.html, também com Delete. um duplo clique.iA | DREAMWEAVER CS5- MOD! 11 = Muito bem! Com seus conhecimentos, aplique 0s links nos demais botdes desta pagina e, da mesma maneira, também nos botdes das paginas restantes, de forma que todas fiquem interligadas. Lembre-se: caso tenha alguma diivida, basta ter como base os exercicios anteriores. 12- Agora que temos todos os links adicionados, po- demos visualizar o resultado final. Porém, note que, er algumas paginas, existe um pequeno asterisco ao lado || dotitulo, como podemos ver na imagem a seguit. Quan ‘| do ha essa marcagao, significa que a pagina ainda ndo | oi salva. Mas nao se preocupe em salvé-la agora, pois para testarmos, seremos perguntados se desejamos | fazer isso, comprove: Clique sobre o botdo Visualizar/ | depurar no navegador. Depois em visualizar em IEX- plore, ¢ logo em seguida, uma pequena caixa de diélogo 6 mostrada. Salve as alteragdes com um clique em Sim. : Indexhtmi x igo | Ove Faymatae Comandos ‘édoo ame | Ef | Vewluarde dnc MM coRP RAN eee 13 - Para vermos que realmente funcionou, clique so- bre 0 botdo Servigos e note que a pagina ¢ mostrada, Podemos fazer isso com qualquer opsao que queiramos ver, mas como ja sabemos que est funcionando, saia do navegador clicando no botdo Fechar, no canto superior direito da janela. fears 14 - Terminamos nosso trabalho! Dé um clique no botdo Fechar. E, ao surgir uma janela nos perguntando se desejamos salvar os demais arquivos, clique em sim para encerrarmos o aplicativo. E assim encerramos nossa aula. Garantimos que fol uma atividade muito itil em seu aprendizado. Mas no pense que acabou, antes de passar para a seguinte, res- ponda & avaliago que ajudara ainda mais a reforgar os conceitos ensinados hoje. Atéa préximal ——= } nh ii ta fi lee 7. ai ==t 4 ul j 4 Ssiscs be | Aula 06 - Criando um te O14! Bem-vindo a sexta atividade apostilada do nosso curso. Na aula interativa, iniciamos a criagao deum templar | te, um modelo que ser’ utilizado para criar um site. Para isso, configuramos o mesmo, trabalhamos com Tagdivs |) e inserimos imagens. Esperamos que vocé esteja animado para essa aula que comecar a partir de agora. Nela, reforgaremos os principais conceitos vistos na interacao, vamos la Peel Eee (Ant loth Ocho + Trabalhar com a Tag div; + Adicionar imagens. 1 Dw} CONFIGURANDO UM SITE Relembraremos, agora, os principais conceitos abar- dados durante a interagao. Nela, iniciamos a criagao do site da empresa Global, no qual, na caixa de didlogo refe- Fontes configurasao do mesino, definimos oseunome e também sua pasta local no computador. 33.ij RENT ERE Re me DREAMWEAVER CSS - MODI Na sequéncia, criamos duas pastas que armazena- riam 0s arquivos do site. Uma delas referia-se is ima- gens. Porém, precisamos definila como padrao para este tipo de arquivo e, dessa forma, acionamos nova- mente a caixa de didlogo de configuragdes do site e, ra- pidamente, finalizamos esta etapa do projeto. wuando nossa atividade, criamos um novo docu- mento, o qual seria um template para a construcao das paginas do site da Empresa Global. Ou seja, ele nos ser- 4 de modelo, facilitando a edigao do site sempre que adicionarmos uma nova pagina. Para isso, utilizamos um documento em branco no formato HTML e, com ele sendo exibido na janela do documento, salvamos o mes- mo como modelo, através do menu Arquivo. ‘Salar come modelo q me Ste: [abba z ‘Saver cancelar Sava como: Modelo Ao fazermos isso, automaticamente sio inseridas tags na cor verde ma janela Ue COUigos, isso porque es- sas linhas referem-se a0 novo modo editavel do docu- mento, que passa a ser 0 de um template. 1 SeePacep-egteetcncentige content Afolha de estilos CSS nada mais é que um arquivo que armazena todas as regras CSS definidas para as Tags div durante a construgao de um site. Basicamente, podemos dizer que essas regras consis- tem em varias propriedades, que nos permitem editar a aparéncia de cada pagina. Para que vocé possa ter uma ideia de como isso torna nosso trabalho muito mais interessante, saiba que atra- vés das configuragdes em CSS, podemos inserir uma imagem como plano de fundo da div, alterar sua largura e altura, definir tipo e tamanho de uma fonte, além de trabalharmos também com bordas, margens, entre ou- tras propriedades bem produtivas. Apés inserirmos uma Inserir Tag div (menu Inserir/ Objetos de layout / Tag div), demos um nome mesma atraves do campo ID e clicamos sobre 0 botao Nova re~ gra CSS, no qual criamos um Novo arquivo de folha de estilos e o salvamos dentro da pasta estilos.DREAMWEAVER CS5- MOD | se cs SS eet aeenenssemsamessssasanmsesiS ‘Elks eroteimenerenin) Na aula de hoje reforcaremos os conceitos aprendidos durante a aula interativa,e assim, criaremos o menu do site. Para isso, utilizaremos uma Tag div e, também, varias imagens, cada uma delas representando um bot. 'No final, onosso trabalho ficara como mostra imagem: 01 - Utilizando seus conhecimentos, entre no Adobe Dreaweaver CSS através do menu Iniciar. 02 - Agora, abriremos o trabalho que desenvolvemos na aula interativa. Sendo assim, na tela de Boas vindas, clique na op¢ao Abrir. 03 - Na janela que surge na tela, dé um duplo clique sobre a pasta Documentos e, em seguida, repitaa mes- ma ago sobre a pasta Global. 04 - Feito isso, utilize novamente o duplo clique para acessar o contetido da pasta Templates. Depois, sele- cione o arquivo Modelo.dwt e clique no botao Abrir. ‘Até esta etapa, desenvolvemos sites apenas utilizando as tabelas, uma ferramenta muito interessante, concorda? Apartir desta aula, utilizaremos um novo recurso do Drea- mweaver, as Tags div. Basicamente, elas trabalham de ma- neira semelhante as tabelas, ou seja, através delas, criamos varias caixas, onde a finalidade é construirolayoutdeuma pagina. O que torna esse recurso ainda mais pratico éama- nipulagdo das divs, a qual é feita com as regras CSS. Dessa forma, podemos adicionar e também posicionar imagens, textos e varias outros objetos em uma pagina, deixando-a com um visual bematraente e agradvel. 05 - Com 0 documento sendo exibido na tela, cria- remos, agora, uma Tag div, a qual seré utilizada como menu do nosso site. E como 0 mesmo deverd estar logo abaixo do topo, dentro do conteiner da pagina, dé um clique no local indicado e pressione a tecla Enter, nee “ Cesta gel yeqg0:nnnsnmamrrassoniate sola’ i) alm i i DREAMWEAVER CS5 - MODI 2: suo eee sansmnenascoosscencassef Ye 06 - A partir de agora, utilizaremos o modo Design. Sendo assim, dé um clique sobre o respectivo botao. Em seguida, clique no menu Inserir, posicione o ponteiro do mouse em Objetos de layout e, por fim, escolha Tag div. 11-Parafinalizar a edicao desta Tag div, definiremoso seu tamanho, mas, para isso, selecione a categoria Caixa, ee 07 - Coma caixa de didlogo da mesma aberta, utili- zaremos 0 campo ID para nomear esta Tag div. Sendo assim, clique sobre ele e digite menu. Depois, boto Nova regra CSS. end 08 - Na janela seguinte, perceba que na Area Defini- do da regra, a folha de estilos do nosso site, chamada estilo.css, encontra-se selecionada. E como sera exata- mente ela que usaremos, avance clicando em OK. 09 - Pronto! Nosso préximo passo ser configurar 0 layout da Tag div menu, a qual estamos desenvolvendo, Ento, clique na categoria Fundo, 10 - Agora, aplicaremos uma cor de fundo mes- ma, Portanto, clique no pequeno quadro da opgao Ba- ckground-color e, dentre as opsies, escolha Branco, ‘como mostradoa seguir: isso, clique no campo Width, referente 4 te 800 e, em seguida, va até o campo Hel- ght, o qual corresponde & altura, einsira o valor 25. 13 - Apés realizarmos essas alteracdes, confirme cli- cando no botio OK e, na caixa de dialogo seguinte, repi- taamesma ago. 14 Muito bem! Como vooé pode ver, a Tag div foi corre- tamente inserida em nossa pagina, mas perceba que uma ‘mensagem indicando que todo o contetiio da mesma seré exibido dentro do espaco delimitado pelas linhas pontilha- das também ¢ exibida. Bla nao fara parte do nosso traba- Iho, portanto, pressione a tecla Delete para apagéla, Global , a 15 - Agora, adicionaremos as imagens que iro com- por 0 menu do site dentro da Tag div que criamos. Para isso, clique no menu Inserir e, dentre as opsdes, selecio- ne Imagem, como indicado a seguir: te‘betes deiragere 16 - Os arquivos que utilizaremos se encontram na pasta Documentos ¢, para podermos acessé-la, clique no boto Um nivel acima, de acordo com a imagem: = alee a= 17 - Feito isso, dé um duplo clique sobre 0 arquivo ‘menut_home.jpg para abri-lo. 18 - Na caixa de didlogo Atributos de acesso a tag de imagem, temos o campo Texto Alternativo, 0 qual nos permite dar um nome ao arquivo para que, caso facamos ‘uma pesquisa num site de buseas, poderemos localizar a imagem inserida. Como o campo mencionado ja esta se- lecionado, digite home e confirme clicando no botao OK. Ths de cea a diane | order “ sevstete eal pererrceeterans sameen eo toes, 19 - Muito bem! Continuando nossa atividade, adi- cionaremos mais uma imagem. Sendo assim, clique no menu Inserir e escolha a op¢ao Imagem, 20- Perceba quea janela jé se abre dentro da pasta Do- cumentos. Entéo, insira 0 arquivo menu2_servicos. jpg dando um duplo clique sobre ele. Na caixa de didlo- go Atributos de acesso & tag de imagem, digite servigos. E, clique em ok. 21- Como voce pode ver, as imagens se encontram com retamente posicionadas dentro da Tag div. Agora, utilize seus conhecimentos ¢ insira os arquivos menu3_pro- dutos.jpg, menut_empresajpg ¢ menuS_contato,jpg, exatamente nessa ordem, E, na caixa de dialogo Atributos de acesso & tag de imagem, digite: produtos, empresa e contato, respectivamente. Ao final, nosso trabalho ficard igual ao mostradoa seguir: crn RAARORE NAL OLR anaiisanooe ‘A seguir, faremos uma breve andlise na composigao dos cédigos correspondentesa insergao.domenuao documento. 22 - Primeiro, clique no botdo Dividir para mudar- mosa visualizacao da janela do documento. Esta éa sequéncia de cédigos responsavveis por todas as alterages realizadas na pagina modelo que criamos. AS ‘tags que estado na janela Cédigo serao interpretadas pelo navegador, resultando no trabalho que se encontra na ja~ nela Design, que é exatamente a parte que visualizamos na internet. Como voc® pode ver, 0s cédigos referentes a0 ‘menu foram inseridos depois dos cédigos corresponden- tes ao topo. Além disso, perceba que as medidas de largura (Width) e altura (Height) de cada imagem foram inseridas automaticamente, afinal, vocé deve se lembrar que em ne~ hum momento especificamos 0 tamanho dos arquivos. 16 dav aaerpenascing sr00 ‘/ing/senui_nowe.jpg7 widthe"#S" height fs ale="hone™ />ciny 2rc= *../sma/nenul_enpzesa.3pg7 vidtb="110" peignt="25" alestexprese™ /> oe = | os & | wee va) ow e | eon i Baden Diasec Clear + Utilizando esta propriedade, especificamos ‘em qual dos lacins de uma Tag div nde poderemos inse- rir outros objetos. fest 0 (DE) cauevaniosmaznremm Na aula apostilada de hoje, daremos continuidade ao trabalho que iniciamos na interaco. Sendo assim, adi- cionaremos o rodapé e também criaremos a primeira pagina do site, onde inseriremos alguns textos referen- tes a empresa Global. Para isso, utilizaremos as Tags div ¢, também, algamas imagens No final, nosso trabalho estard semelhrante.ao da imagem exposta: DREAMWEAVER CSS - MOD | of} 01 - Utilizando seus conhecimentos, entre no Adobe Dreamweaver CSS. 02 - Como daremos continuidade ao trabalho da aula interativa, clique na op¢do Abrir da tela de Boas vindas do aplicativo. Através do duplo clique, abra o arquivo Modelo.dwt que se encontra dentro da pasta Templa- tes que, por sua vez, esta em Global. 03 - Primeiramente, alteraremos 0 posicionamento do cursor de digitacdo da dea de cédigos. Isso porque queremos que o rodapé seja exibido na parte inferior da pagina, Portanto, des¢a a Barra de rolagem clicando no local indicado, Em seguida, clique no final da Tag div meio e pressione Enter, conforme indicado na imagem: alae aa 4 noe 04- Feito isso, criaremos uma nova Tag div. Sendo as- sim, clique no menu Inserir, va até Objetos de layout e, por fim, escolha Tag div. 05 - Na caixa de didlogo que se abre, clique no campo ID e digite rodape, sem utilizar acentos. Depois, clique no botao Nova regra CSS, ~ sij DREAMWEAVER CSS - MODI 06 - Com a opsiio estilos.css selecionada na drea De- finigao da regra, clique em OK para que possamos con- figurar esta Div. 07 - Primeiramente, indicaremos uma imagem para ser exibida no rodapé do site e, para isso, acesse a cate~ goria undo, Em seguida, clique sobre 0 botao Procu- rar da propriedade Background-image. 08- A imagem que utilizaremos se encontra na pasta Documentos. Portanto, para voltarmos a exibila, cli que no botdo Um nivel acima. Em seguida, dé um du- plo clique sobre o arquivo rodape.pg para abri-lo. 09 - Pronto! Para que a imagem nao se repita, alte- raremos a propriedade Background-repeat. Sendo as- sim, clique na pequena seta do mesmo e, depois, sele- cione no-repeat, que quer dizer, sem repetigées. ey) Background-mage: fle://fC|Documentos/clab. > Backaround repeat | sedorouratacment Background position QO: 40 SASS . cosmo ER 10- Continuando, utilizaremos.a op¢ao Background- position (¥), referente ao posicionamento vertical do objeto para colocar 2 imagem no topo da div rodape. Portanto, clique no local indicado e escotha Top. Redgroninege ec Roamenetiah = “4 sco 0: | exagoncssosat eagrouespacmnt saapend coat a | es 11 - Bem, nosso préximo passo sera definir 0 tama- nho do rodapé e, para isso, acesse a categoria Caixa, Na sequéncia, insira os valores 800 no campo Width e 35 em Height, como mostrado a seguir: [ Det deregr CSS de Hrodape mera eons 12 - Através da propriedade Clear, especificaremos que nao havera nenhum objeto ao lado do rodapé. Sen- do assim, clique na pequena seta da mesma e, dentre as opgbes, selecione both que, traduzindo, significa ambos. | | | f 13 - Para finalizar a edigao da Tag div rodape, altere 0s campos das propriedades Padding e Margin, res- pectivamente, de acordo com as informagies exibidas hha imagem: I(Ot - Na propredade Poddina] Sesmargue 2 0p¢20 igual (8 Depo devmarana omo sao Igual pre tte rota Ln Mont, eth rahe ne Dltowsinare ao Ope Jigs para tudo Y wie np "> bees) be nee 5 > fa} | pote = ix Bottom o ug o D2 Em sequids,clque no campo Top e dete 10 i= eno, nara 6 valor 10 erm Top eO nos demais campos 14- A imagem que adicionamos ao rodapé da pagina ainda nao possui nenhum texto ou informacao, porém, -2p6s finalizarmos as configuracdes da mesma, escreve- remos algo nela. Para que possamos formatar a fonte, acesse a categoria Tipo, como mostrado a seguir: [| | @. oem Tao 18 - Feito isso, confitme as alteragdes feitas clicando em OK e, na caixa de didlogo seguinte, repita essa mes- ma agao. 19 - Como vocé pode ver, 0 rodapé foi corretamen- te inserido na parte inferior da pagina. Agora, como a mensagem padro do Dreamweaver, que nos informa sobre o contetido da div, encontra-se selecionada, pres- sione a tecla Delete para apagi-la. 20 - Muito bem! Para que possamos visualizar me- Ihor a aparéncia do site, mude a exibigio da janela do documento para Design. SEE VT ESTE ET 21 - Em seguida, adicionaremos um texto no rodapé | do site, Sendo assim, pressione a tecla Alt e, sem soltd- la, digite 0169 no teclado numérico para adicionarmos ‘© simbolo dos direitos autorais, denominado Copyr- ‘ght (©). Prosseguindo, pressione a Barra de espago e continue inserindo as seguinte informagées: Empresa. Todos os Direitos Reservados. Ao final, seu trabalho i deverd estar semelhante ao mostrado na imagem: ance aanatl a0 TA 4 ~BreE er ante ia, en sorssenf tote He Dw} INSERINDO REGIOES EDITAVEIS Voce deve estar se perguntando qual a finalidade des- te recursu, nav mes? Bein, um arquivo modelo nada mais é que apenas um molde e ndo podemos visualizé-lo ‘em um navegador. Para construirmos paginas baseadas esse modelo, precisamos definir quais 4reas poderao . aess ae ser editaveis. E j4 que, no nosso caso, as paginas possui- ao assuntos diferentes, faremos com que o submenu eo contetido possam ser editaveis. Assim, poderemos inse- riras informagies referentes a cada pagina do site, 22 - Agora que encerramos a criagdo do rodapé, in seriremos uma regido editavel na div submenu do site, Para isso, dé um clique sobre a linha tracejada que in- dicao contorno da mesma. BA he 23- Em seguida, clique no menu Inserir, va até a opgao Objetos de modelo e, depois, clique em Regiao editavel. 24 - Na caixa de dilogo que se abre, observe que contetido do campo Nome jé se encontra selecionado, Sendo assim, digite submenu ¢ clique em OK. repos eaeaton f Sere mae, aoa ceomsscscsac Como vocé pode ver, um quadro azul passa a con- tornar a Div submenu. Além disso, na parte superior do mesmo, encontramos um tipo de etiqueta que possui 0 nome dado a regiao editvel que, nesse caso, é submenu Global 25 - Perfeito! Agora, repetiremos os tiltimos passos realizados e adicionaremos uma regiao editavel na div conteudo. Entdo, dé um clique sobre a linha tracejada que indica o contorno da mesma para selecioné-la. 26 - Depois, clique no menu Inserir, vé até Objetos de modelo e, por fim, escolha Regiao editavel 27-- Na caixa de didlogo que se abre, digite conteido e,em seguida, confirme clicando em OK, 28 - Pronto! Dessa forma, encerramos a criacio do tem- plate, porém, ainda temos que salvévlo, Dessa vez, além do nosso trabalho, salvaremos também as alteragoes que fi: zemos na folha de estilos, afinal, criamos outra regra CSS, a do rodape, lembra-se? Para isso, dé um clique no menu Arquivo e, depois, selecione a opcao Salvar tudo, Como vocé péde perceber até aqui, o Dreamweaver 6 um software que nos permite criar sites a partir de documentos em branco e, assim, adicionarmos as ima ‘CRIANDO PAGINAS BASEADAS EM UM MODELO ee e \= ah DREAMWEAVER CS5 - MODI oneness nse raneeseceteseasenssnnes gens, os textos, entre outros objetos conforme vamos desenvolvendo o projeto. Mas, além disso, esse fantas- tico software nos permite construir trabalhos baseados em modelos, facilitando e muito o trabalho do web de- signer, ja que parte do layout ja esta pronta, restando a ele apenas inserir 0 contetido que cada pagina iré exibir. 29 - Continuando esta atividade, nosso préximo pas- so seré utilizar o template que criamos para desenvol- ver a primeira pagina do site da empresa Global. Para isso, abriremos um novo documento. Entao, clique no- vamente no menu Arquivo e, desta vez, escolha Novo. 30 - Perceba que, na caixa de didlogo que se abre, en- contramos cinco opgées ao lado esquerdo. Dentre elas, clique sobre Modelos, bE 31-A seguir, observe que, na drea Site, o arquivo Glo- bal, o qual acabamos de finalizar, é exibido. Dé um du- plo clique sobre ele para abriclo. 32 - Perceba que um novo documento foi criado com ‘0 mesmo layout do modelo, Agora, testaremos a regitio editavel contetido inserindo algumas informagées so- bre a empresa. Sendo assim, clique sobre ela e digite 0 texto indicado a seguir: AEmpresa ‘A Global 6 uma empresa especializada na prestacao de servigos de rastreamento, controle e localizacao de veicu- Jos que conta com a comunicagio de dados de alta perfor- mance. Sempre utilizando equipamentos madernas, afe- recemos seguranga complementar ao seguro do veiculo, cobrindo o que existe de mais importante, tanto para pes- soas, como empresas, que € vida do passageiroea carga. Sobre Rastreamento Investir em seguranga nunca é demais, pois mesmo tendo um bom seguro, muita gente acha que o seu bem est fora de perigo, mas nem sempre oassalto tem como objetivo o bem assegurado. £ ai que entra o nosso servi- go de monitoramento e rastreamento via satélite. Monitoramento de veiculos pela internet Em casa, no escritério e até mesmo em uma viagem de férias, vocé consulta seu veiculo ou sua frota para sa- ber se esto no local onde deveriam estar. Com esse sis- tema, pode ser monitorada, também, a velocidade que seus fills estdo dirigindo ou se os motoristas da sua ‘empresa esto utilizando o veiculo corretamente, Versatilidade e Precisao ‘Os VTMz2600 representam o que ha de mais moder- no no segmento de rastreamento, Portétets e multifun- ionais, eles sao utilizados no monitoramento de pesso- as, cargas e bagagens, com exatidao de dados e grande autonomia de uso. Recebem sinais via satélite pelo re indicando diregao e ve- locidade exata. Conta com grande autonomia em Stand By e éacionado automaticamente em caso de movimen- tagdo. E resistente a Agua, envia e recebe informacées utilizando rede GSM/GPRS e pode receber comandos via DTMF ou SMS. Area de abrangéncia 0 nosso rastreamento veicular possui a mais ampla abrangéncia e pode rastrear veiculos em todos os Estados. = Fi DREAMWEAVER CSS - MOD I do Brasil e, ainda, nos principais paises da América do Sul | Ao final, seu trabalho deverd estar semelhante ao || mostrado a seguir: ji Sec cpa ee pe mm nm bom ie mi gt a [evteorel tack pie manu one mmo come eve bem epee ‘Mecham en pet pone 33 - Para comprovarmos a eficiéncia deste recurso, visualizaremos esta pagina em um navegador, mas pr meiramente, iremos salvé-la. Ento, clique no menu Ar~ quivo e, em seguida, escolha Salvar. 34. Perceba que a caixa de dialogo se abre exibindo o contetido da pasta Documentos. Nosso site ficaré salvo dentro da pasta Global, afinal, todos os arquivos rela- cionados do site se encontram la. Sendo assim, d@ um duplo clique sobre ela para abri-la. 35 - Esta sera a pagina inicial do site Global. Portan- to, clique no campo Nome e digite index.html. Ao final, confirme dando um clique no botao Salvar. 36 - Agora, para mostrarmos a pagina em um na- vegador Web, clique no botio Visualizar/depurar no navegador e. dentre as opcdes, escolha Visualizar em TExplore, conforme mostrado na imagem: maaan ae aR A Vauatzar emDevice Centar Viuazr emAdobe Broweab 2 F _edtariste de ravegadores, a coranmcyny ar nc mn jeanARNC Jecemos seguranca complementar 20 seguro do ~ je. tanto para pessoas. como empresas, que & a 37 - Como vocé pode ver, nés obtivemos um dtimo re- sultado, concorda? Agora, desea a Barra de rolagem, licando no local indicado para exibirmos o final da pa- gina. ‘ei at i an cman a epee Set Paredes sep enpenprspenrrenreteey eerrerea at de et aise Kw | 38 - Dessa forma, chegamos ao fim de nossa ativida- de, entao, feche a janela do Internet Explorer e, em se- guida, encerre o Adobe Dreamweaver CSS. E assim terminamos nossa aula, Garantimos que foi uma atividade muito itil em seu aprendizado, Lembre- seainda, que vacé tem que responder a avaliacao. Entao, boa sorte e até a proximalBem-vindo! Nesta atividade apostilada reforcaremos os rmataremos 0 submenu das paginas index e servigos do E importante que vocé preste bastante atencao e se dedique ao maximo para alcancar os melhores resultados, (ovens + Aprender conceitos sobre as tags de cabegalhos; * Criar e aplicar regras CSS para elementos do HTML. f NOOREGRE — i RANDOREGRN CSS AA 4 SECABECALHOS sco catas aul ‘Vamos relembrar um pouco do que fizemos durante a aula interativa, Primeiramente, abrimos a pagina ini- cial do nosso site, onde criamos uma regra CSS para os titulos dos paragrafos, os quais definimos como cabe- galhos do tipo 1. Dessa forma, toda vez que definirmos um texto como Cabegalho 1, essas formatagées serdo aplicadas, o que nos poupa muito tempo, nao é mesmo? ‘Algo interessante sobre esse assunto & que 0 texto que definimos como Cabesaiho 1 ficam entre as tags chi> e , as quais sao identificadas por navegado- res, leitores de tela e servigos de busca como o de mais ee DREAMWEAVER CS5- MODI 7Aplicande regra C83 cabecalhos a] conceitos vistos na aula interativa, Com base nela, for- site que estamos desenvolvendo para a empresa Global. importancia entre todo o contetido, 0 que certamente facilita a interpretagao correta da pagina para esses programas. [EXD roRwaranboiimacens Para deixar a nossa pagina mais agradavel visual- mente, inserimos imagens e aprendemos a formaté-las, redimensionando e alinhando as mesmas para que fi- due proprconata conte, 45wa , j DREAMWEAVER CSS - MODI Dw} CRIANDO A SEGUNDA PAGINA DO SITE ‘Também construimos a segunda pagina do nosso site, Como ela aborda os servicos da empresa, importa- ‘mos um texto referente a este contetido e aplicamos os mesmos conceitos aprendidos sobre cabecalhos e for- matagdo de imagers. Motoramenic Ferien lian [ER cue varios racer Durante esta aula daremos continuidade 4 constru- so do site da empresa Global. Assim como fizemos na aula interativa, criaremos e aplicaremos Regras CSS para um elemento do HTML, mas, dessa vez, sera 0 ca- begalho do tipo 2 e iremos utilizé-1o no submenu das pa- ginas. Ao final, nosso trabalho ficard semelhante ao que estd sendo exibido na imagem a seguir: | ey \ ‘sarmos nossa aula, primeiramente, clique no botio Ini- | Glar que se encontra a barra de tarefas. Srokscomereata ai 01 - Primeiramente, com seus conhecimentos, entre no aplicative Adobe Dreamweaver CSS. 02 - Como daremos continuidade ao trabalho iniciado durante a aula interativa, precisaremos abrir o mesmo, sendo assim, na tela de boas-vindas, clique sobre o icone Abrir. Na janela que surge, acesse, através do duplo cli- que, a pasta Documentos e, logo depois, a Global. 03 - Agora, dé um duplo clique sobre a pagina index. tml para que possamos abri-la e, logo depois, clique so- bre o botdo Design, para visu: trabalho, Argue Re ELEMI Assim como fizemos na aula interativa, criaremos uma regra CSS para um elemento do HTML, mas, nes- se caso, utilizaremos o cabecalho do tipo 2. Assim como acontece com 0 cabegalho do tipo 1, 0 texto definido com este formato fica entre as tags e é identificado por navegadores, leitores de tela e servicos, de busca como o de segunda maior importancia entre todo 0 contetido, ou seja,

& o cabegalho principal. Logo depois dele est o

e assim por diante, o que certamente facilita a interpretagao correta da pagina para esses programas. Apenas para que vocé saiba,a tag,

também vem da palavra inglesa header, que signi- fica cabecalho. &, para melhorar a aparéncia do mesmo, criaremos.uma Regra CSS. Dessa forma, as formatacées definidas para esse elemento sero aplicadas sempre ‘que especificarmos um texto como Cabegalho 2. 46 Sic(04-Comecaremos definindo a formatagao do subme- nu através de uma regra CSS. Sendo assim, no Inspetor de propriedades, clique no botao CSS e, dando um cli- que na seta da caixa Regra-alvo escolha a opcao Nova regra CSS. Por fim, clique em Editar regra, 05 - Iremos criar uma regra CSS para que a forma- tagdo que definirmos agora seja aplicada toda vez que utilizarmos 0 Cabecalho 2. Portanto, na tela que se abre, clique sobre a seta do campo Tipo de seletor e escolha a opcao Tag (redefine um elemento HTML). enn | ane maaan | Cements) i ‘iss ua anne cove DIM A ee Seema at <

You might also like

• The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good Life

  

  From Everand

  The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good Life

  Mark Manson

  Rating: 4 out of 5 stars

  4/5 (5807)
• The 7 Habits of Highly Effective People

  

  From Everand

  The 7 Habits of Highly Effective People

  Stephen R Covey

  Rating: 4 out of 5 stars

  4/5 (353)
• The Art of War: A New Translation

  

  From Everand

  The Art of War: A New Translation

  Sun Tzu

  Rating: 4 out of 5 stars

  4/5 (3044)
• • Magazines
  • Podcasts
  • Sheet music
• The Odyssey: (The Stephen Mitchell Translation)

  

  From Everand

  The Odyssey: (The Stephen Mitchell Translation)

  Stephen Mitchell

  Rating: 4 out of 5 stars

  4/5 (7771)
• The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good Life

  

  From Everand

  The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good Life

  Mark Manson

  Rating: 4.5 out of 5 stars

  4.5/5 (20047)
• The Handmaid's Tale

  

  From Everand

  The Handmaid's Tale

  Margaret Atwood

  Rating: 4 out of 5 stars

  4/5 (13227)
• Pride and Prejudice: Bestsellers and famous Books

  

  From Everand

  Pride and Prejudice: Bestsellers and famous Books

  Jane Austen

  Rating: 4.5 out of 5 stars

  4.5/5 (20479)
• Never Split the Difference: Negotiating As If Your Life Depended On It

  

  From Everand

  Never Split the Difference: Negotiating As If Your Life Depended On It

  Chris Voss

  Rating: 4.5 out of 5 stars

  4.5/5 (3285)
• Oscar Wilde: The Unrepentant Years

  

  From Everand

  Oscar Wilde: The Unrepentant Years

  Nicholas Frankel

  Rating: 4 out of 5 stars

  4/5 (10242)
• Wuthering Heights Complete Text with Extras

  

  From Everand

  Wuthering Heights Complete Text with Extras

  Emily Bronte

  Rating: 4 out of 5 stars

  4/5 (9955)
• The Picture of Dorian Gray (The Original 1890 Uncensored Edition + The Expanded and Revised 1891 Edition)

  

  From Everand

  The Picture of Dorian Gray (The Original 1890 Uncensored Edition + The Expanded and Revised 1891 Edition)

  Oscar Wilde

  Rating: 4 out of 5 stars

  4/5 (9054)
• Art of War: The Definitive Interpretation of Sun Tzu's Classic Book of Strategy

  

  From Everand

  Art of War: The Definitive Interpretation of Sun Tzu's Classic Book of Strategy

  Stephen F. Kaufman

  Rating: 4 out of 5 stars

  4/5 (3321)
• Ilíada: A ira de Aquiles

  

  From Everand

  Ilíada: A ira de Aquiles

  Homero

  Rating: 4 out of 5 stars

  4/5 (5336)
• Anna Karenina: Bestsellers and famous Books

  

  From Everand

  Anna Karenina: Bestsellers and famous Books

  Leo Tolstoy

  Rating: 4 out of 5 stars

  4/5 (7503)
• Freakonomics Rev Ed

  

  From Everand

  Freakonomics Rev Ed

  Steven D. Levitt

  Rating: 4 out of 5 stars

  4/5 (7865)
• The Hobbit

  

  From Everand

  The Hobbit

  J.R.R. Tolkien

  Rating: 4.5 out of 5 stars

  4.5/5 (24728)
• Habit 1 Be Proactive: The Habit of Choice

  

  From Everand

  Habit 1 Be Proactive: The Habit of Choice

  Stephen R Covey

  Rating: 4 out of 5 stars

  4/5 (2556)
• The 7 Habits of Highly Effective People: The Infographics Edition

  

  From Everand

  The 7 Habits of Highly Effective People: The Infographics Edition

  Stephen R Covey

  Rating: 4 out of 5 stars

  4/5 (2484)
• Habit 3 Put First Things First: The Habit of Integrity and Execution

  

  From Everand

  Habit 3 Put First Things First: The Habit of Integrity and Execution

  Stephen R Covey

  Rating: 4 out of 5 stars

  4/5 (2507)
• American Gods: The Tenth Anniversary Edition

  

  From Everand

  American Gods: The Tenth Anniversary Edition

  Neil Gaiman

  Rating: 4 out of 5 stars

  4/5 (12949)
• Wuthering Heights (Seasons Edition -- Winter)

  

  From Everand

  Wuthering Heights (Seasons Edition -- Winter)

  Emily Bronte

  Rating: 4 out of 5 stars

  4/5 (9486)
• Habit 6 Synergize: The Habit of Creative Cooperation

  

  From Everand

  Habit 6 Synergize: The Habit of Creative Cooperation

  Stephen R Covey

  Rating: 4 out of 5 stars

  4/5 (2499)
• The Iliad: A New Translation by Caroline Alexander

  

  From Everand

  The Iliad: A New Translation by Caroline Alexander

  Homer

  Rating: 4 out of 5 stars

  4/5 (5719)
• The 7 Habits of Highly Effective People

  

  From Everand

  The 7 Habits of Highly Effective People

  Stephen R Covey

  Rating: 4 out of 5 stars

  4/5 (2568)
• Life of Pi: A Novel

  

  From Everand

  Life of Pi: A Novel

  Yann Martel

  Rating: 4 out of 5 stars

  4/5 (13473)
• How To Win Friends And Influence People

  

  From Everand

  How To Win Friends And Influence People

  Dale Carnegie

  Rating: 4.5 out of 5 stars

  4.5/5 (6529)
• The Picture of Dorian Gray: Classic Tales Edition

  

  From Everand

  The Picture of Dorian Gray: Classic Tales Edition

  Oscar Wilde

  Rating: 4 out of 5 stars

  4/5 (9758)
• Stardust

  

  From Everand

  Stardust

  Neil Gaiman

  Rating: 4 out of 5 stars

  4/5 (8139)