1.TÉCNICAS PARA A CONSTRUÇÃO DE LAYOUTS

O desenvolvimento de um site envolve a definição de um Layout, ou seja, pensar o site em termos globais ou de estrutura. Para isso devemos fazer um esboço ou esquema das páginas que vão integrar o site; organizar o site por
secções e definir as relações ou as ligações entre as páginas atendendo à estrutura hierárquica.
Os conteúdos devem ser distribuídos por páginas construídas com uma estrutura consistente, isto é, com regras de construção, organização e arrumação semelhantes, para que o acesso à informação seja fácil.

Imagem1 - Esquema que representa a estrutura de um site

+ informação em:
http://www.dteixeira.com/gui/tecnicas-de-layout.html
http://www.xbilidade.net/wp-content/uploads/2008/03/helder_robalo_tcc.pdf

Exercício 1:

Aponte num documento em formato PDF dez regras essenciais para o desenvolvimento de um LAYOUT.

2. Menus de Barras no DW cs3

Para adicionar um menu de barras numa página WEB desenvolvida em DW CS3 deve começar por criar a estrutura da página em termos de tabelas e células.

Seleccione a célula que vai conter o menu e aceda a INSERT + SPRY + SPRY MENU BAR

Imagem2 - Spry Menu Bar no DW

Edite o código da página e substitua os textos.

Para acrescentar uma linha copie a tag:

<li></li>

Note que o DW apresente um exemplo para cada tipo de menu e submenu.

Apague as tags que não vai utilizar.

Ao adicionar o menu o DW cria uma pasta designada por SpryAssets; nesta pasta encontra o ficheiro CSS com as formatações do menu.

Para configurar o menu em termos de cor, altura, bordo, etc, edite o CSS SpryMenuBarHorizontal.css.

+ informação em:
http://www.youtube.com/watch?v=Qs8MHKLzL_I

Exercício 2:

Observe a página e implemente num documento html um menu de barras com a mesma hierarquia de opções.

3. Iframe

Através do comando <iframe> podemos inserir outras páginas dentro dos nossos documentos HTML.

Nesse caso, devemos especificar o tamanho do espaço que deverá ser aberto no documento para apresentação da outra página.

Abaixo segue-se um exemplo retirado do site Ritacris.com.

<tr><td width="950" height="500" ><iframe src="home.html" name="pag" id="pag" width="950" height="100%" marginwidth="0" marginheight="0" align="top" scrolling="no" frameborder="0" onload='resize_iframe();'></iframe></td></tr>

resize_iframe() refere-se a uma função em javascript (colocada na tag HEAD) que torna a altura da iframe dinâmica; ou seja a altura da iframe vai depender do conteúdo da página que é aberta.

<script type="text/javascript">
<!--
function resize_iframe(){
document.getElementById("pag").height=""; // required for Moz, value can be "", null, or integer
document.getElementById('pag').height=window.frames["pag"].document.body.scrollHeight;
}
// -->
</script>

Exercício 3:

O layout que se segue representa a estrutura de uma página HTML com um menu de barras e uma iframe.

Implemente a situação em HTML considerando que ao clicar na opção azul é aberta uma página de fundo azul na iframe; ao clicar em vermelho é aberta na iframe uma página de fundo vermelho e ao clicar na opção rosa é aberta na iframe uma página de fundo rosa.

Note que a altura das páginas é diferente e a iframe deve-se ajustar à altura de cada uma.

4. DIV + AJAX

Os elementos <div> são usados para agrupar e estruturar um documento e são frequentemente usados em conjunto com os atributos class e id.

A tag DIV é muito utilizada nos códigos mais avançados.
A DIV não causa nenhuma diferença visual no código; é considerado um "container", ou seja, uma espécie de "caixa" não visual.
Através de script, pode-se alterar o conteúdo das DIV .
Também são usadas para aplicar um estilo (class/style) em todo o bloco HTML contido dentro da DIV.

O Parâmetro ID:

ID: nomeia o DIV para ser referenciada pelos scripts (JavaScript por exemplo)


Exemplos:

<DIV ID="bloco">Este texto está dentro de um DIV</DIV>

+ informação em:
http://www.webkrause.com/blog/

AJAX (acrônimo em língua inglesa de Asynchronous Javascript And XML) é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar as páginas Web mais interactivas com o utilizador.
AJAX não é somente um novo modelo, é também uma iniciativa na construção de aplicações Web mais dinâmicas e criativas.
AJAX não é uma tecnologia — trata-se de várias tecnologias agrupadas, que oferecem novas funcionalidades.

Segue-se um modelo de uma página criada com DIV's; para poder criar hiperligações que possibilitam a abertura de páginas dentro de uma DIV utilizaram-se dois scripts em java criados em página separadas:

ajax.js
arquivo onde fazemos uma solicitação ao browser, para saber se o navegador suporta ou não “Msxml2.XMLHTTP”

function GetXMLHttp() {
if(navigator.appName == "Microsoft Internet Explorer") {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}

var xmlRequest = GetXMLHttp();

abrir_pagina.js
página que contém as instruções para abrir uma página na DIV com id="div_conteudo"

function abrirPag(valor){
var url = valor;

xmlRequest.open("GET",url,true);
xmlRequest.onreadystatechange = mudancaEstado;
xmlRequest.send(null);

if (xmlRequest.readyState == 1) {
document.getElementById("div_conteudo").innerHTML = "<img src='loader.gif'>";
}

return url;
}

function mudancaEstado(){
if (xmlRequest.readyState == 4){
document.getElementById("div_conteudo").innerHTML = xmlRequest.responseText;
}
}

paginad.html
pagina com as div's e o menu

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carregar uma Página numa DIV com AJAX</title>
<script language="javascript" src="ajax.js"></script>
<script language="javascript" src="abrir_pagina.js"></script>

<!-- Estilos das DIV's
// -->
<style type="text/css">
#pagina
{
width:950px;
position: fixed;

left:50%;
top:0px;
margin-left:-475px;
background-color:#CCCCCC;

padding: 0;
z-index: 1;
bottom:0;
right:0;

}

/* for IE7 and IE8 (*) */
#pagina{
*position: absolute;
}

#menu
{
position:static;
width:950px;
background-color:#FFFF99;
margin-top:0px;

}
#cabecalho
{
position:static;
width:950px;
background-color: #666666;
color:#FFFFFF;
margin-top:0px;
height:100px;

}
#div_conteudo
{
position:static;
width:950px;
background-color: #CCCCCC;
color:#FFFFFF;
margin-top:0px;

}
body {
margin: 0;
background-color: #FFCCCC;

}
</style>
<!-- Estilos das DIV's
// -->

</head>
<body onLoad="abrirPag('homep.html');">
<div id="pagina">
<div id="cabecalho"></div>
<div id="menu"><a href="#" onClick="abrirPag('conteudo.html');">opção1</a> <a href="#" onClick="abrirPag('conteudo2.html');">Opção2</a></div>
<div id="div_conteudo">Início</div>
</div>
</body>
</html>

 

Implemente a situação explicada em cima. Note que deve criar também as páginas homep.html, conteudo.html e conteudo2.html.

Trabalho de Avaliação 1:

Com base no modelo criado desenvolva um site cujo layout é suportado por DIV's e o sistema de navegação consta de um SPRY MENU.

Note que para possibilitar a abertura de páginas na DIV a partir de um SPRY MENU deve aplicar o behavior onClick.

<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#" onClick="javascript:abrirPag('conteudo.html');">Item 1.1</a></li>
<li><a href="#" onClick="javascript:abrirPag('conteudo2.html');">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>

Objectivos

Desenvolver um Site que apresente uma explicação detalhada das tags html IFRAME e DIV.

Aspectos a considerar

O trabalho deve conter:

1. Home Page

2. Spry Menu

3. Apenas DIV's

4. Exemplos com CSS

5. Esboço do Layout (pode ser apresentado nume Hiperligação)

6. Mapa do Site

7. Bibliografia/SiteGrafia

O trabalho deve abordar:

a) O conceito de DIV

b) O conceito de IFRAME

c) A articulação CSS/DIV e CSS/IFRAME

Formato e entrega do Trabalho:

O trabalho tem que ser entregue em formato HTML.