CEGEP- Centro Guaçuano de Educação Profissional “Governador Mário Covas” Curso Técnico em Informática – 3º módulo A WEBSITE-IGREJA VIDA Mogi Guaçu –SP Novembro DE 2009
Mar 11, 2016
CEGEP- Centro Guaçuano de Educação Profissional
“Governador Mário Covas”
Curso Técnico em Informática – 3º módulo A
WEBSITE-IGREJA VIDA
Mogi Guaçu –SP
Novembro DE 2009
David Willian da Costa, nº 01
Marcel N. B. Sugimoto, nº 05
WEBSITE-IGREJA VIDA
Trabalho realizado para
conclusão do curso técnico em
Informática, sob orientação do
professor João Paulo Barbosa.
Mogi Guaçu –SP
Novembro DE 2009
FOLHA DE APROVAÇÃO
_______________________
João Paulo Barbosa
_______________________
José Luiz Kemp
_______________________
Iohanny Fernanda Ricardo
_______________________
Valéria Cristina de Morais Gotti
Aos nossos professores Iohanny, Kemp, Márcia e Elias, pela dedicação e
sabedoria que nos foram passadas neste período do 3º Módulo de Informática.
Além é claro, de todos nossos colegas que estiveram conosco durante essa
fase de nossas vidas, e todos os outros professores dos outros módulos, que foram
essenciais para nosso aprendizado.
Em especial, agradecemos ao professor João Paulo Barbosa, que, com
paciência e dedicação nos orientou para o desenvolvimento deste trabalho.
Obrigado!
Dedico primeiramente a Deus que sempre foi meu incentivo e minha razão de
viver, a minha noiva Évelin que sempre esteve ao meu lado “pegando no meu pé”
pra que este trabalho fosse realizado.
Aos meus chefes Valdir e João que me deram férias para realizar este
trabalho.
A todos os amigos que direta ou indiretamente contribuíram para conclusão
deste Trabalho.
Muito Obrigado. David W. da Costa
Dedico este trabalho a todos aqueles que estiveram sempre ao meu lado
durante a realização deste, ao meu parceiro David, que permitiu que eu conhecesse
um pouco mais sobre esta entidade tão querida por ele e a nossos professores, que
mais do que apenas professores, são companheiros.
Com carinho, Marcel N. B. Sugimoto
“Porque melhor é a sabedoria do que as jóias, e de tudo o que se deseja nada se
pode comparar com ela.”
Provérbios 8:11
SUMÁRIO
Introdução ........................................................................................................... 01
1 - Materiais e Métodos ....................................................................................... 02
1.1 - Linguagens Utilizadas ................................................................................. 02
1.1.1 - HTML ....................................................................................................... 02
1.1.1.1 - Características do HTML ....................................................................... 03
1.1.1.2 - Estrutura Básica do HTML .................................................................... 03
2 - Tags e Seus Significados ............................................................................... 05
2.1 - Tags <html> e </html> ................................................................................ 05
2.2 - Tags <head> e </head> .............................................................................. 05
2.3 - Tags <title> e </title> ................................................................................... 06
2.4 - Tags <body> e </body> .............................................................................. 06
2.5 - Tags <table> e </table> .............................................................................. 06
2.6 - Outras tags de formatação .......................................................................... 07
2.7 - Comandos complementares de algumas tags: ........................................... 07
3 - JavaScript ...................................................................................................... 08
4 - CSS ................................................................................................................ 09
5 - Ferramentas utilizadas para criação do WebSite ............................................ 10
5.1 - Bloco de Notas ............................................................................................. 10
5.2 - Macromedia Dreamweaver 8 ....................................................................... 11
5.3 - Xara Webstyle 3.0 ....................................................................................... 13
5.4 - Adobe PhotoShop CS4 ................................................................................ 14
5.5 - Corel Draw X4 .............................................................................................. 15
5.6 - Adobe Flash CS4 ......................................................................................... 16
6 - Documentação ................................................................................................ 17
7 - Codificação do Site ......................................................................................... 18
8 - Mapa do Site ................................................................................................... 26
Conclusão ........................................................................................................... 30
Referências Bibliográficas ................................................................................... 31
LISTA DE FIGURAS
Figura 1 - Bloco de Notas .................................................................................... 09
Figura 2 - DreamWeaver ..................................................................................... 10
Figura 3 - Xara WebsTyle ................................................................................... 11
Figura 4 - PhotoShop ........................................................................................... 12
Figura 5 - Corel Draw ........................................................................................... 13
Figura 6 - Flash .................................................................................................... 14
Figura 7 - Página Inicial ........................................................................................ 16
Figura 8 - Página Home ....................................................................................... 18
Figura 9 - Página Inicial ........................................................................................ 24
Figura 10 – Home ................................................................................................. 24
Figura 11 - Conheça os Pastores ......................................................................... 25
Figura 12 - Bíblia Online ....................................................................................... 25
Figura 13 - Orações ............................................................................................. 26
Figura 14 - Downloads ......................................................................................... 26
Figura 15 - Wallpapers ......................................................................................... 27
Figura 16 - Estudos .............................................................................................. 27
Introdução
O trabalho a ser apresentado é um website que foi desenvolvido com o intuito
de levar o usuário cristão e não cristão a ter um vasto conhecimento sobre a Igreja
Vida, podendo o mesmo estudar e ter acesso a conteúdos diretamente da Internet.
Sabendo que uma entidade, organização e uma empresa necessitam para
sua divulgação de um site, resolvemos criar para a Igreja Vida a sua própria página
de internet, com relatos, idéias, estudos, arquivos e conhecimentos.
Partindo do principio de que a tecnologia avança com grande intensidade em
um espaço de tempo pequeno, não poderíamos deixar de utilizar tal recurso de
divulgação da informação, para melhor amplitude do conhecimento da igreja, ou
seja, independentemente do local onde estiver.
Para que acontecesse tudo isso, procuramos pesquisar na internet e através
de livros, recursos e informações onde pudéssemos divulgar por intermédio do site
da igreja vida, links de outros sites correlatos.
O site da igreja vida foi desenvolvido através das seguintes linguagens de
programação:
HTML;
JavaScript;
CSS.
E as seguintes ferramentas:
Macromedia Dreamweaver 8;
Bloco de notas;
Xara Webstyle 3.0;
Adobe PhotoShop CS4;
Corel Draw X4;
Flash CS4;
1 - Materiais e Métodos
As linguagens base utilizadas neste website foram HTML e Java Script, com
ênfase em HTML sendo que o mesmo foi utilizado para a escrita e formatação da
página em web, e o Java Script utilizado para criar interação com o usuário.
Em seguida analisaremos informações sobre linguagens de programação
utilizadas, e alguns aplicativos para o desenvolvimento do website.
1.1 - Linguagens Utilizadas
1.1.1 - HTML
O HTML (Hyper Text Markup Language) é uma linguagem de elaboração de
documentos com hipertextos, funcionando como se fosse sinais enviados para uma
página da Web, cuja função é enviar para o navegador instalado (Internet Explorer,
Netscape, Firefox, etc.) comandos de formatação que informe ao navegador qual é o
tipo de informação como textos, imagens, tabelas, etc. que deverão ser exibidas na
tela.
Para efetuar uma escrita em HTML você pode utilizar de qualquer editor de
texto, desde que ao salvar um documento, este seja salvo em HTML.
HTML é uma linguagem com a qual se
definem as páginas web. Basicamente
trata-se de um conjunto de etiquetas
(tags) que servem para definir a forma na
qual se apresentará o texto e outros
elementos da página (ALVAREZ, Miguel
Ângelo,2009).
Você pode também utilizar de editores HTML, que facilitam o
desenvolvimento de web site, no caso deste website foram utilizados:
Macromedia Dreamweaver 8;
Bloco de notas;
Notepad ++.
1.1.1.1 - Características do HTML
Documentos HTML são arquivos escritos em ASCII – texto;
Podem ser criados em qualquer editor de texto;
A unidade mínima de informação é a “página”;
É uma linguagem de marcação e não de programação.
Seus comandos recebem o nome de tags (tags são rótulos usados
para informar ao navegados como deve apresentar um website).
A maioria dessas tags aparece em pares, uma iniciando e outra
terminando o mesmo bloco.
Exemplo:
<HEAD>e</HEAD>, <BODY>e</BODY>
As tags estão sempre contidas entre sinais de menor que e maior que
“<” ”>”.
As tags podem ser escritas com letras maiúsculas e minúsculas.
Exemplo:
<BODY>, <body>, <Body>, <BoDy>.
1.1.1.2 - Estrutura básica do HTML
Todo documento HTML inicia-se por uma tag <HTML> e se encerra por uma
tag </HTML>.
O documento HTML consiste em duas partes (cabeçalho e corpo). O
cabeçalho contém informações a respeito do documento como, o título. O corpo
contém o documento propriamente dito. Assim sendo, um documento escrito em
HTML deverá ter, no mínimo, a seguinte estrutura:
<html>
<head>
<title>Igreja Vida </title>
</head>
<body>
2 - Tags e seus significados
São estruturas de linguagem de marcação que consistem em breves
instruções, tendo uma marca de início e outra de fim. Há uma tendência nos dias
atuais para se usar as tags apenas como delimitadores de estilo e/ou conteúdo,
tanto em HTML quanto em XML.
2.1 - Tags <html> e </html>
Esta tag tem por função indicar ao navegador que o documento que está
sendo lido é na linguagem HTML, o que as tornam as mais importantes tags de uma
página.
Elas têm por obrigação iniciar e encerrar uma página, e todo conteúdo da
página deve estar dentro destas tags.
Exemplo:
<html>
...página a ser exibida
</html>
2.2 - Tags <head> e </head>
Indicam quais os comandos que deverão ser lidos pelo browser antes que a
página seja carregada, servindo de cabeçalho para a página, como títulos a ser
inseridos na janela do navegador. Na ordem da linguagem HTML, a tag <head>
vem logo abaixo da tag <html>.
Exemplo:
<head>
...cabeçalho
</head>
2.3 - Tags <title> e </title>
A tag title indica que o assunto abordado aparecerá na barra de título do
browser. Estas tags sempre estarão contidas na tag <head>.
Exemplo:
<title>...texto do título... </title>
2.4 - Tags <body> e </body>
Contém todo o restante de uma página escrita em HTML, contendo todo o
corpo do documento. Hierarquicamente ela vem logo após a tag <head> e de
finalização vem anteriormente a tag </html>.
Exemplo:
<body>
...conteúdo da página
</body>
2.5 - Tags <table> e </table>
As tabelas são ferramentas poderosas para a apresentação de dados
tabulares e para a definição do layout de textos e gráficos em uma página HTML.
Uma tabela consiste em uma ou mais linhas, sendo que cada linha é formada
por uma ou mais células. Embora normalmente as colunas não sejam especificadas
de forma explícita no código HTML, permite-se a manipulação delas, bem como
linhas e células.
Além disso, as tabelas são muito importantes para o design de uma home-
page, pois por elas podem ser feitos alinhamentos que dificilmente seriam possíveis
com simples comandos.
As tabelas são descritas por linhas da esquerda para a direita. Cada uma
dessas linhas será definida por outro par de tags: <tr> e </tr>.
Ainda dentro de cada linha, haverá diferentes colunas que serão definida por
outro par de tags: <td> e </td>. Dentro desta tag será onde colocaremos nosso
conteúdo.
Exemplo:
<table>
<tr>
<td>Célula 1-1 </td>
<td>Célula 1-2 </td>
</tr>
<tr>
<td>Célula 2-1 </td>
<td>Célula 2-2 </td>
</tr>
</table>
2.6 - Outras tags de formatação
<A href= “...” > </a> - link.
<br> - quebra de linha.
<p> - parágrafo.
<i> </i> - itálico.
<b> </b> - negrito.
2.7 - Comandos complementares de algumas tags:
Border: Borda do objeto.
Height: Altura do objeto.
Width: Comprimento do objeto.
Backgroud: Controla o fundo do documento.
Bgcolor: Altera a cor do plano de fundo.
Scrolling: Controla o aparecimento da barra de rolagem.
3 - JavaScript
O JavaScript é uma linguagem de programação baseada na linguagem JAVA.
É destinada para o uso em páginas Web(client-side) ou em servidores web (server-
side),a Netscape foi a primeira a introduzir o JavaScript em seu browser na versão
2.0. Já a Microsoft passou a incorporar alguns recursos apenas no Internet Explorer
3.0.
Esta linguagem de programação permite ao programador ter acesso a
elementos de uma página web, como imagens, elementos de um formulário links
etc.
Estes objetos podem ser manipulados ou mudados via programação, pois o
JavaScript permite também ao programador capturar eventos, como um click do
mouse ou uma tecla pressionada de seu teclado, isto lhe dá a capacidade de poder
criar ações baseadas nas ações do usuário.
O JavaScript é em si, uma grande linguagem de programação, que oferece ao
programador web muitas recursos, os quais podem ser executados facilmente.
Ao decorrer do tempo outros browsers também incorporaram o JavaScript, e
esta linguagem foi crescendo cada vez mais e estendendo seu suporte. Logo os
fabricantes de browsers também deveriam ir se atualizando, mas a Microsoft para
não ficar para trás inventou o JScript, que na verdade é a mesma linguagem que o
JavaScript, porém com alguns recursos adicionais, o que gerou incompatibilidade da
linguagem entre os browsers, como por exemplo a propriedade document.all, que
traz grandes problemas para programadores em JavaScript, porque ela não existe
no Netscape, somente no Internet Explorer.
4 - CSS
CSS (Cascading Style Sheets / Folha de Estilos em Cascata) é uma
linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS
controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo,
posicionamentos e muito mais.
A Cascading Style Sheet (CSS) é uma ferramenta utilizada para a construção da aparência de páginas para Web. Permite o uso de uma técnica diferente da convencional (HTML puro), possibilitando uma considerável redução no tempo de trabalho.(PAULO, Vandré, 2009).
O HTML pode ser usado para definir o layout de websites. Contudo CSS
proporciona mais opções e é mais preciso e sofisticado. O CSS é suportado por
todos os navegadores atuais.
Os benefícios da utilização do CSS são:
Controle do layout de vários documentos a partir de uma simples folha de
estilos;
Maior precisão no controle do layout;
Aplicação de diferentes layouts para servir diferentes mídias (tela, impressora,
etc.);
Emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.
5 - Ferramentas utilizadas para criação do WebSite
Foram utilizadas as seguintes ferramentas para a criação do webSite:
Bloco de Notas: Foi utilizado para realizar algumas alterações de códigos na
ausência de outras ferramentas que pudessem ser utilizadas.
Macromedia Dreamweaver 8: Este foi o principal aplicativo para a criação do
WebSite, desde a formatação de um simples texto até a utilização de arquivos
mais complexos como incorporação de tabelas em JavaScript e CSS.
Xara Webstyle 3.0: A finalidade desta ferramenta no projeto foi de criar
botões e banners com animações em gifs.
Adobe PhotoShop CS4: Esta ferramenta foi de grande importância para
alterações de logotipos, melhorar a qualidade da imagem, tirar o fundo da
imagem, enfim, manipulação de imagens em geral.
Corel Draw X4: Quase toda parte de logotipos, banners e alguns botões
foram criados com esta ferramenta.
Adobe Flash CS4: Foi utilizado na criação da animação inicial “cruz”.
5.1 - Bloco de Notas
Figura 1. Bloco de Notas
O Bloco de Notas é um editor de textos simples que foi incluído em todas as
versões Microsoft Windows desde a versão 1.0 em 1985, ele é utilizado para criar
documentos simples, seu uso mais comum é para edição de arquivos de texto (.txt).
Como o Bloco de Notas oferece suporte apenas para formatações básicas,
não é possível salvar acidentalmente uma formatação especial em documentos que
devem permanecer como texto puro. Isso é especialmente útil ao criar documentos
HTML para uma página da Web, uma vez que caracteres especiais ou outra
formatação não podem aparecer na página da Web publicada, pois podem causar
erros.
5.2 - Macromedia Dreamweaver 8
Figura 2. DreamWeaver
O Macromedia Dreamweaver 8 é um editor de HTML profissional para
desenhar, codificar e desenvolver sites, páginas e aplicativos para a Web. Ele
permite trabalhar com codificação manual HTML, e também com ambiente de edição
visual.
O Dreamweaver fornece ferramentas úteis para aprimorar a sua experiência
de criação para Web. Os recursos de edição visual do Dreamweaver permitem criar
páginas, de modo rápido, sem que seja necessário escrever uma única linha de
código. É possível visualizar todos os elementos ou propriedades do site e arrastá-
los de um painel fácil de usar diretamente para um documento.
O Dreamweaver 8 um poderoso ambiente de desenvolvimento
para a construção de sites dinâmicos que fazem o uso de
bancos de dados, scripts executados no cliente e tecnologia de
servidor, como ASP (Active dinamic Server Pages), Cold
Fusion e JSP (Java Server Pages). eEainda ele suporta os
mais recentes padrões adotados na web, tais como XHTML e
CSS. (LEVY, Roberto, 2009).
Permite também a dinâmica de desenvolvimento de sites criando e editando
as imagens no Fireworks da Macromedia ou em outro aplicativo gráfico e,
posteriormente, importando-as diretamente para o Dreamweaver ou incluindo
objetos do Flash da Macromedia.
O Dreamweaver também fornece um ambiente de codificação completo que
inclui ferramentas de edição de códigos (como codificação por cores e
preenchimento de tags) e material de referência de linguagens sobre CSS,
JavaScript e ColdFusion Markup Language (CFML), entre outros.
A tecnologia HTML do Macromedia Roundtrip permite importar documentos
HTML codificados manualmente sem reformatar o código. Ele também permite criar
aplicativos dinâmicos e com suporte de banco de dados para a Web, utilizando
tecnologia de servidor como CFML, ASP.NET, ASP, JSP e PHP.
5.3 - Xara Webstyle 3.0
Figura 3. Xara WebStyle
É um editor gráfico onde é possível a criação de banners, menus, botões,
imagens, logos, textos, bullets, entre outros. Ele fornece as bases e você modifica a
formatação do conteúdo de modo fácil e rápido, deixando o site com uma melhor
aparência.
5.4 - Adobe PhotoShop CS4
Figura 4. PhotoShop
O PhotoShop CS4 é uma das ferramentas mais utilizadas no tratamento e
criação de imagens, ele permite desde pequenos ajustes nas imagens até desenhos
em 3D.
Neste WebSite ele foi utilizado para ajustar algumas imagens e criação de
alguns logotipos juntamente com o CorelDraw.
5.5 - Corel Draw X4
Figura 5. Corel Draw
O Corel Draw é um dos programas de edição gráfica mais utilizados no
mundo, ele permite a criação de logotipos, ajustes em imagens, vetorização, criação
de banners, impressões de imagens, entre outros.
Esta versão foi criada visando o aperfeiçoamento dos layouts, melhorias para
texto, novos recursos em design, nova interface de usuário e fluxo de trabalho
aperfeiçoado.
Neste projeto a maioria dos banners foram criados através deste programa,
pois além de facilitar a criação dos banners ele tem o recurso de converter em .jpg
todas os banners criados, além disso alguns botões como o de avançar foram
criados no Corel Draw.
5.6 - Adobe Flash CS4
Figura 6. Flash
É uma ferramenta de autoria e edição de imagens vetoriais com animação,
som e interatividade. Baseada em imagens vetoriais, possibilita a criação de efeitos
avançados em arquivos bastante pequenos.
Além de imagens vetoriais, ao conteúdo Flash pode ser acrescentado
arquivos bitmaps, sons, vídeos, etc.
As imagens vetoriais não são geradas por meio da combinação de pontos de
imagem, e sim criadas a partir de cálculos matemáticos executados pelo
computador. Isto significa que os arquivos que contém essas imagens armazenam
somente as fórmulas matemáticas que representam formas, curvas e cores, e,
portanto são muito pequenos.
Assim, um arquivo que contenha o desenho de um círculo com 1 centímetro
de diâmetro terá exatamente o mesmo tamanho se o círculo tiver 20 centímetros.
Outra vantagem é que, ao serem ampliadas, não perdem absolutamente nada
em qualidade. A desvantagem das imagens vetoriais é a impossibilidade de
representar imagens mais complexas e realistas com qualidade fotográfica.
Podemos criar desde simples faixas animadas com anúncios para páginas da
WEB, menus interativos, desenhos animados, arquivos executáveis, gifs animados,
etc.
O Flash foi utilizado neste projeto para a criação da cruz na página inicial.
6 - Documentação
Levantamento de Dados
Foi analisada primeiramente a necessidade por parte da Igreja Vida de
divulgar o trabalho que vem sendo feito, e mais do que isso a necessidade de
propagar a Palavra de Deus.
E não existe meio melhor para isto que utilizar da Internet como meio de
propagação, foi daí que surgiu a idéia de criarmos um site que será colocado logo
em uso.
Este WebSite diferencia dos outro pela grande quantidade de
entretenimentos, desde estudos bíblicos até download de músicas.
Este projeto foi testado em seis navegadores (Mozzila Firefox, Netscape-
Navigator 9.0.0.6 e o Internet Explore 8, Avant Browser, Opera e Safári) onde, de
todos estes o único que obteve diferença foi o Safári.
7 - Codificação do site
O desenvolvimento do site foi inteiramente feito por tabelas e CSS.
A única página que não foi utilizado CSS foi a página inicial, pois foi utilizado
uma apresentação em Flash. Iríamos primeiramente utilizar Frames, mas
verificamos que além de dificultar o trabalho não sanaria o problema.
Daí veio à idéia das tabelas que além de organizar alguns itens iria modificar
na aparência do site. Mas não adiantaria utilizar apenas tabelas quando a nossa
necessidade seria de modificar vários objetos do lugar, para isso utilizamos o CSS.
Nosso site está composto da seguinte forma:
Página Inicial
Figura 7. Página Inicial
APRESENTAÇÃO
EM
FLASH
LOGO
HOME
Inicio do Código
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TELA INICIAL</title>
<style type="text/css">
Plano de Fundo
<body bgcolor="White" background="Inicio.jpg";white: 800;HEIGHT:600;>
Comando para inserir música no site <embed src = “...”>
<div align="right">
<embed src="03__You_Are_My_World.mp3" width="1" height="1"></embed>
<br>
</div>
</div>
Flash
<CENTER>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.c
ab#version=7,0,19,0" width="550" height="400" align="absmiddle"
title="INICIO">
<param name="movie" value="Inicial.swf" />
<param name="quality" value="high" />
<embed src="Inicial.swf" width="550" height="400" align="absmiddle"
quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>
</object>
</CENTER>
</head>
Inicio do Corpo da Página <body>
<br>
Comando para inserir uma imagem <IMG SRC= “...>
<div align= "center">
<img src="Logos/Logo Igreja.jpg" alt="Iniciar" width="100" border="0" />
LOGO
MENUS
CORPO
CS
S -
FU
ND
O
CS
S -
FU
ND
O
</div>
<div align="center">
<h3 class="style3">
Comando para abrir um link < a href="…”> ... </a>
<a href="HOME.HTML" class="style2"> Home</a> </h3>
</div>
</body>
</html>
Página Home
Figura 8. Home
Será feita uma divisão do código fonte para melhor visualização:
Início do Código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HOME</title>
<!--A CSS começa aqui-->
<style type="text/css">
<!--
.style12 {color: #FFFFFF}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
//-->
</script>
</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IGREJA VIDA</title>
</head>
<style type="text/css">
<!--
Definição da Cor de Fundo
body {
background-color:#000066;
}
element.style {
padding-bottom:0;
padding-left:34px;
padding-right:0;
padding-top:1px;
}
.link {
color:#DDDDDD;
font-size:11px;
font-family:Verdana;
text-decoration:underline;
}
Box
#box_main {
background:#FFFFFF;
display:block;
height:600px;
margin:0 50px;
}
Localização dos objetos na página
.dealer {
font-family:Verdana;
font-size:12px;
font-weight:normal;
padding:0 10px;
position:absolute;
text-align: justify;
top:178px;
width:370px;
left: 148px;
height: 160px;
line-height:16px;
}
.dealer1{
font-weight:normal;
padding:0 10px;
position:absolute;
text-align: justify;
top:182px;
width:370px;
left: 530px;
height: 293px;
}
.dealer2{
font-weight:normal;
padding:0 10px;
position:absolute;
text-align: justify;
top:550px;
width:800px;
left: 100px;
height: 0px;
font-family:Verdana; font-size: 12px;}
}
-->
; left: 97px;
height: 153px;
.style5 {
color: #0000FF;
font-weight: bold;
font-size: 13px;
}
.style6 {
color: #be1a19;
font-weight: bold;
font-size: 14px;
}
.style11 {font-family:Verdana; text-decoration:underline; font-size: 11px;}
</style>
Menu
<div id="box_main">
<table width="830" border="0" align="center" cellspacing="0"
bordercolor="#B2B4BF">
<tbody>
<div id="img"><center><img src="Top1.jpg" width="730" height="130"
border="1" /></center></div>
<tr><br>
<td width="900" height="15" bordercolor= "00FFFFF"
bgcolor="#00FFFF" class="style12">
<div style="padding: 1px 0pt 0pt 34px;">
<span class="head4"><a href="HOME.html"
class="style11">HOME</a></span>
<img align="botton.gif" style="margin-left: 16px;
margin-right: 7px;" src="q6.jpg"/>
<span class="head4"><a href="CONHEÇA OS PASTORES.html"
class="style11">CONHEÇA OS PASTORES</a></span>
<img align="botton.gif"
style="margin-left: 16px; margin-right: 11px;" src="q6.jpg"/>
<span class="head4"><a href="Biblia.html"
class="style11">BÍBLIA ON-LINE</a></span>
<img align="botton.gif" style="margin-left: 16px;
margin-right: 19px;" src="q6.jpg"/>
<span class="head4"><a href="ORAÇÕES.html"
class="style11">ORAÇÕES</a></span>
<img align="botton.gif" style="margin-left: 16px;
margin-right: 19px;" src="q6.jpg"/>
<span class="head4"><a href="DOWNLOAD.html"
class="style11">DOWNLOAD</a></span>
<img align="botton.gif" style="margin-left: 16px;
margin-right: 19px;" src="q6.jpg"/>
<span class="head4"><a href="WALLPAPERS.html"
class="style11">WALLPAPERS</a></span> <img
align="botton.gif" style="margin-left: 16px; margin-right: 19px;"
src="q6.jpg"/>
<span class="head4 "><a href="ESTUDOS.html"
class="style11">ESTUDOS</a></span>
</span> </div>
<!--Fecha a box--> </td>
</tr>
</tbody>
</table>
Corpo
<div class="dealer">
<div align="justify">
<br>
<br>
<span class="style5"><span class="style6"><marquee>IGREJA-
VIDA</marquee></span><br /><br /></span><br /><br />
<!--A escrita começa aqui-->
A Igreja Vida nasceu no dia 15 de Janeiro de 2001, na garagem de nossa casa
"do missionário R. A. Lima e da missionária Michele ", em Mogi Mirim, lugar
o qual, Deus nos permitiu ver muitos e maravilhosos milagres, abrimos a
porta do nosso lar, para que Jesus fizesse a vontade Dele, e em Mogi Guaçú
ela nasceu no dia 25 de abril de 2001.
<p align="right">
<a href="HISTÓRIA DA IGREJA VIDA.html" class="style11"><br>
<br>
<br>
<br>
<br>
<br>
CONHEÇA MAIS A IGREJA VIDA </a> </div>
</div>
<div align="right"><br>
<br>
<br>
<div class="dealer1"><br>
<br>
Imagem da Igreja Vida
<a href="Vida/A serviço do Rei/7.jpg"><img src="Vida/A serviço
do Rei/7.jpg" alt="Igreja Vida" width="376" align="right" height="287"
border = "2"/></a> </div>
</div>
</div>
Tabela Final
<center><table width="830" border="0" class="dealer2">
<tr>
<td><center>ENDEREÇO:Av. Mogi Mirim, 899 - Itacolomy - Mogi Guaçú - SP /
(pra baixo da Germânica, perto da Cotoca Calçados)</center></td>
</tr>
<tr>
<td><Center>Cultos: Terça-feira – 19:30h. - Culto da Vitória<br>
Quinta-feira - 19:30h. - Culto de Libertação
Domingo - 19:00h. - Culto de Prosperidade e Família<br></Center>
</td>
</tr>
</table>
</center>
Fim do Código
</body>
</html>
8 - Mapa do Site
O site foi organizado da seguinte forma:
A página Inicial que contém uma apresentação em Flash e um link para o
Home.
Figura 9. Página Inicial
A página home contém todos os menus do site, o endereço da igreja, o
banner com o logo e consta também parte da história da igreja sendo ela a página
principal
Figura 10. Home
Esta página contém a história dos pastores R.A. Lima, pastora Michele e
Pastor Marcelo Sanches fazendo citação da introdução do livro “Falsos Profetas:
Conscientes ou Enganados?" escrito pelo pastor Lima.
Figura 11. Conheça os Pastores
No menu Bíblia On-line contém links que facilitam ao usuário a navegação
pelo site www.bibliaonline.com.br fazendo assim a leitura da bíblia diretamente da
internet.
Figura 12. Bíblia Online
No menu orações, o usuário poderá mandar seu pedido de oração para a
igreja.
Este pedido é enviado diretamente para o e-mail da igreja.
Figura 13. Orações
Na página download, foram colocados arquivos para download,
apresentações em PPT, programas evangélicos, bíblia para download e um link de
músicas onde pode-se baixar arquivos em outros servidores ou diretamente do
WebSite.
Figura 14. Downloads
No menu wallpapers, foram utilizados imagens de diversos temas desde
infantis até mensagens de edificação, são dezenas de imagens que podem ser
salvas diretamente do servidor ou colocadas diretamente como wallpapers.
Figura 15. Wallpapers
No menu estudos, contém vários estudos e livros cristãos onde é possível
baixa-los em PDF ou então em .DOC, alguns estudos como “Games, RPGs, etc” e
“Dez mandamentos do namoro”, abrem uma nova página de estudos e você pode
imprimir diretamente do site.
Estes menus e links serão alterados e atualizados conforme a necessidade do
cliente.
Figura 16. Estudos
Conclusão
Concluímos que com todo o avanço tecnológico e o aumento do conforto e
comodidade foi preciso criar um site destinado à igreja vida, para melhor atender os
fiéis, tendo estes, os recursos e todas as facilidades que a internet proporciona.
O site foi bem aceito por todos os fiéis, que há tempos já estavam
desejando tal ferramenta de comunicação e pesquisa de informações pertinentes à
igreja vida.
Com o desenvolvimento deste projeto aprendemos a criar websites, com
diversas variações de linguagens de programação para tal. Aprendemos ainda a
utilizar alguns programas para manipulação de imagem e a postar/hospedar sites na
internet.
Durante o tempo de desenvolvimento, aprendemos o quanto é importante
valorizar o trabalho em equipe, valorizar os professores e os conhecimentos por eles
passados, desenvolver pesquisas em sites de internet e livros, além de aprender a
trabalhar sobre pressão e com prazo de entrega.
As principais desvantagens foram o curto prazo para desenvolvimento do
projeto e o reduzido número de aulas que foram causados por fatores externos, e
que dificultaram imensamente o trabalho dos professores quanto aos dos alunos.
Este trabalho foi muito prazeroso e proveitoso, onde todo o tempo dedicado
foi de extremo aprendizado e dedicação.
Referências Bibliográficas
Apresenta um artigo sobre o que é HTML, suas funções e como utiliza-lo. Disponível
em: http://www.criarweb.com/artigos/7.php ; acessado em 4 de novembro de
2009;
Revista PHP. Apresenta um artigo sobre CSS e suas funções. Disponível em:
http://www.revistaphp.com.br/artigo.php?id=119; acessado em 4 de novembro
de 2009;
Apresenta um artigo sobre o software Dreamweaver, suas funções e requisitos
mínimos do sistema operacional para utiliza-lo com sucesso. Disponível em:
http://www.htmlstaff.org/ver.php?id=988; acessado em 13 de novembro de 2009;
SILVA, JOEL JOÃO DA; RAMOS, RICARDO. Php para profissionais. São Paulo:
Digerati Books, 2007. 144p
AMARAL, LUIS GUSTAVO. Css - Cascading Style Sheets - Guia de Consulta
Rápida. São Paulo: Novatec.
PEREIRA, DOMÊNICO TURIM; PAULA, EVERALDO ANTÔNIO DE. Dreamweaver
8 - O Melhor e Mais Completo Editor de Html. São Paulo: Viena, 2007. 172p