Viana do Castelo, 4 de Setembro de 2013
Venho por este meio comunicar que estou neste momento a criar um site e já estou numa fase adiantada, contudo há pequenos detalhes que preciso da vossa ajuda, pretendo com este site lembrar-me dos conceitos já aprendidos e também coloca-lo na Internet,
estou a fazer um esforço de pesquisa e estas linguagens de programação fazem parte dos meus interesses e posso futuramente obter ou não depende do meu esforço emprego ou estágio profissional nesta área. Neste sentido, tenho para já um objectivo terminar o site por isso considero a vossa ajuda fundamental, para esclarecer estas pequenas dúvidas que me apoquentam, assim agradecia imenso a vossa colaboração pois este site é o meu marketing pessoal que me poderá abrir a porta a emprego só necessito mesmo da sua ajuda para organiza-lo da melhor forma.
As duvidas são as seguintes:
- Como centralizar as "aplicações javascript" que estão abaixo no "menu de navegação"? Falta-me centrar apenas o quadro do tempo.
-Como colocar o quadro do "chat" no canto superior direito encostado ao "footer"? Conhece algum site com "chats" parecidos com o do Facebook?
-Como visualizar o site em toda a área do ecran do computador?
-Como criar uma margem entre cada um dos icones situados abaixo do "banner"?
<!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=utf-8" />
<title>Untitled Document</title>
<link href="site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.calendarTable {
background-color:#eee;
color:#333;
border: 1px solid #bbb;
width: 100px;
}
.calendarTable td {
text-align: center;
padding: 2px 1px 2px 1px;
}
.calendarTable td.monthHead {
font-weight: bold;
border: 1px solid #bbb;
background-color:#ddd;
}
.calendarTable td.weekDay {
font-weight: bold;
}
.calendarTable td.monthDay {
border: 1px solid #ddd;
}
.calendarTable td.currentDay {
font-weight: bold;
color:#ad5;
border: 1px solid #aaa;
}
</style>
<script type="text/javascript" language="javascript">
/** Function to display a Calendar based on javascript. **/
function calendar() {
// Get the current date parameters.
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var months = new Array('January','February','March','April','May',' June','July','August','September','October','Novem ber','December');
var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var weekDay = new Array('Mo','Tu','We','Th','Fr','Sa','Su');
var days_in_this_month = monthDays[month];
// Create the basic Calendar structure.
var calendar_html = '<table class="calendarTable">';
calendar_html += '<tr><td class="monthHead" colspan="7">' + months[month] + ' ' + year + '</td></tr>';
calendar_html += '<tr>';
var first_week_day = new Date(year, month, 1).getDay();
for(week_day= 0; week_day < 7; week_day++) {
calendar_html += '<td class="weekDay">' + weekDay[week_day] + '</td>';
}
calendar_html += '</tr><tr>';
// Fill the first week of the month with the appropriate number of blanks.
for(week_day = 0; week_day < first_week_day; week_day++) {
calendar_html += '<td> </td>';
}
week_day = first_week_day;
for(day_counter = 1; day_counter <= days_in_this_month; day_counter++) {
week_day %= 7;
if(week_day == 0)
calendar_html += '</tr><tr>';
// Do something different for the current day.
if(day == day_counter) {
calendar_html += '<td class="currentDay">' + day_counter + '</td>';
} else {
calendar_html += '<td class="monthDay"> ' + day_counter + ' </td>';
}
week_day++;
}
calendar_html += '</tr>';
calendar_html += '</table>';
// Display the calendar.
document.write(calendar_html);
}
</script>
<!-- This part can go in the head of the html file -->
<script language="JavaScript" type="text/javascript">
<!-- Copyright 2003, Sandeep Gangadharan -->
<!-- For more free scripts go to Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar... -->
<!--
function sivamtime() {
now=new Date();
hour=now.getHours();
min=now.getMinutes();
sec=now.getSeconds();
if (min<=9) { min="0"+min; }
if (sec<=9) { sec="0"+sec; }
if (hour>12) { hour=hour-12; add="pm"; }
else { hour=hour; add="am"; }
if (hour==12) { add="pm"; }
document.timeForm.field.value = ((hour<=9) ? "0"+hour : hour) + ":" + min + ":" + sec + " " + add;
setTimeout("sivamtime()", 1000);
}
window.onload = sivamtime;
</script>
</head>
<body>
<div id="layout">
<div id="topo"><img src="images/jose.jpg" width="960" height="100" alt="Jose Moreira" /></div>
<div id="bandeiras">
<div align="right"><img src="images/mapadosite.jpg" width="30" height="15" alt="mapa do site" /><img src="images/home.jpg" width="30" height="15" alt="home" /><img src="images/rss.jpg" width="30" height="15" alt="rss" /><img src="images/portugues.jpg" width="30" height="15" alt="português" /><img src="images/ingles.jpg" width="30" height="15" alt="inglês" /><a href="http://www.facebook.com"> src="images/facebook.jpg" width="30" height="15" alt="facebook" /></a><a href="http://www.linkedin.com"> src="images/linkedin.jpg" width="30" height="15" alt="linkedin" /></a><a href="https://twitter.com"> src="images/twiter.jpg" width="30" height="15" alt="twitter" /></a></div>
</div>
<div id="conteudo">
<h3>Apresentação</h3>
<p> Este site foi construído com o intuito de ser uma partilha para outras pessoas, sendo o meu marketing pessoal e considero também ser uma demonstração da minha aprendizagem de novos conhecimentos nas diferentes áreas de programação como HTML e Javascript, embora a minha formação de base seja uma Licenciatura em Sociologia. Contudo agradecia imenso as vossas sugestões e opiniões, pois há sempre aspectos a mudar se queremos progredir para melhoramos e aperfeiçoarmos as nossas competências. Assim, o vosso feedback é muito importante.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<!-- chat -->
<p><a id="ewclink" href="http://www.everywherechat.com/">>
<br />
<script src="http://www.everywherechat.com/e.php?defaultRoom=Lobby&roomList=true&fontSize=10& width=290&height=170&theme=night">>
</div>
<div id="menu_navegacao">
<p><a href="#">Introdução</a> <a href="#">Clientes</a> <a href="#">Novidades</a> <a href="#">Contato </a></p>
</div>
<!--calendar -->
<center><script type="text/javascript">calendar();</script></center>
<!-- clock-->
<p><center><form name="timeForm">
<input type=text" name="field" value="" size="10">
</form></center></p>
<!--Weather-->
<div align="center" id="cont_44195f23474f208a222d258bb1143f4d">
<span id="h_44195f23474f208a222d258bb1143f4d"><a id="a_44195f23474f208a222d258bb1143f4d" href="http://www.tempo.pt/" target="_blank" style="color:#808080;font-family:Times New Roman;font-size:14px;">Clima</a> Viana do Castelo</span><script type="text/javascript" src="http://www.tempo.pt/wid_loader/44195f23474f208a222d258bb1143f4d">>
</div>
<!--visits counter -->
<p><center><table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="13%" id="AutoNumber1" height="27">
<tr>
<td width="100%" height="27"><script language="javascript" src="http://www.countads.com/count.php?id=791&cmd=cookie">
</script>
<p align="center">
<img src="http://www.countads.com/count.php?id=791&cmd=img_only" border="0" width="151" height="21" ><br>
<span style="font-family: arial, verdana, sans-serif; font-size: 8pt">
<a href="http://www.ocio-full.blogspot.com">>
</tr>
</table></center></p>
<!--radio online -->
<div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.
<a href="http://www.shoutcheap.com/shoutcast/">shoutcheap shoutcast server hosting</a>
<a href="http://www.shoutcheap.com/icecast/">shoutcheap icecast server hosting</a></div>
<script type="text/javascript" src="http://www.shoutcheap.com/flashplayer/swfobject.js">>
<script type="text/javascript">
var s1 = new SWFObject("http://www.shoutcheap.com/flashplayer/player.swf",
"ply","190","20","9","#FFFFFF");
s1.addParam("allowfullscreen","true");
s1.addParam("allowscriptaccess","always");
s1.addParam("flashvars",
"file=http://ipaddressort/;stream.nsv&type=mp3&volume=50&autostart=true");
s1.write("container");
</script>
<!--footer -->
<div id="rodape"><p></p></div>
</body>
</html>
/* CSS Document */
#topo img {
height: 100px;
width: 960px;
}
#bandeiras {
background-color: #09F;
}
#menu_navegacao a:link {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-transform: capitalize;
color: #FFF;
text-decoration: none;
background-color: #09C;
display: block;
margin: 2px;
padding: 10px;
height: 20px;
width: 150px;
border: thin solid #999;
}
#menu_navegacao a:hover {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-transform: capitalize;
color: #000000;
text-decoration: none;
background-color: #A6E9FF;
display: block;
margin: 2px;
padding: 10px;
height: 20px;
width: 150px;
border: thin solid #999;
}
#conteudo {
background-color: #E6E6E6;
clear: right;
float: right;
height: 800px;
width: 750px;
text-align: left;
}
#rodape {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFF;
background-color: #000;
text-align: center;
height: 20px;
width: 960px;
clear: both;
display: block;
}
#layout {
height: 650px;
width: 960px;
overflow: auto;
z-index: auto;
}
#conteudo p #ewclink {
text-align: right;
}
#phead {
font-family: "Times New Roman", Times, serif;
font-size: 36px;
font-style: normal;
text-align: center;
}
#conteudo h3 {
text-align: center;
font-weight: bold;
font-style: italic;
font-size: 36px;
font-family: "Times New Roman", Times, serif;
}
#conteudo p {
text-align: justify;
position: static;
right: 30px;
letter-spacing: 3px;
font-weight: normal;
clear: none;
float: none;
margin-left: 25px;
margin-right: 25px;
color: #009;
font-size: 18px;
}
Assim gostaria sff que me indicassem no código do dreamweaver as alterações que tenho que efectuar, sublinhando a vermelho e colocando notas com as respectivas alterações a fazer. Aguardando uma resposta breve de vossa parte.
Melhores cumprimentos
José Moreira
Venho por este meio comunicar que estou neste momento a criar um site e já estou numa fase adiantada, contudo há pequenos detalhes que preciso da vossa ajuda, pretendo com este site lembrar-me dos conceitos já aprendidos e também coloca-lo na Internet,
estou a fazer um esforço de pesquisa e estas linguagens de programação fazem parte dos meus interesses e posso futuramente obter ou não depende do meu esforço emprego ou estágio profissional nesta área. Neste sentido, tenho para já um objectivo terminar o site por isso considero a vossa ajuda fundamental, para esclarecer estas pequenas dúvidas que me apoquentam, assim agradecia imenso a vossa colaboração pois este site é o meu marketing pessoal que me poderá abrir a porta a emprego só necessito mesmo da sua ajuda para organiza-lo da melhor forma.
As duvidas são as seguintes:
- Como centralizar as "aplicações javascript" que estão abaixo no "menu de navegação"? Falta-me centrar apenas o quadro do tempo.
-Como colocar o quadro do "chat" no canto superior direito encostado ao "footer"? Conhece algum site com "chats" parecidos com o do Facebook?
-Como visualizar o site em toda a área do ecran do computador?
-Como criar uma margem entre cada um dos icones situados abaixo do "banner"?
<!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=utf-8" />
<title>Untitled Document</title>
<link href="site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.calendarTable {
background-color:#eee;
color:#333;
border: 1px solid #bbb;
width: 100px;
}
.calendarTable td {
text-align: center;
padding: 2px 1px 2px 1px;
}
.calendarTable td.monthHead {
font-weight: bold;
border: 1px solid #bbb;
background-color:#ddd;
}
.calendarTable td.weekDay {
font-weight: bold;
}
.calendarTable td.monthDay {
border: 1px solid #ddd;
}
.calendarTable td.currentDay {
font-weight: bold;
color:#ad5;
border: 1px solid #aaa;
}
</style>
<script type="text/javascript" language="javascript">
/** Function to display a Calendar based on javascript. **/
function calendar() {
// Get the current date parameters.
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var months = new Array('January','February','March','April','May',' June','July','August','September','October','Novem ber','December');
var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var weekDay = new Array('Mo','Tu','We','Th','Fr','Sa','Su');
var days_in_this_month = monthDays[month];
// Create the basic Calendar structure.
var calendar_html = '<table class="calendarTable">';
calendar_html += '<tr><td class="monthHead" colspan="7">' + months[month] + ' ' + year + '</td></tr>';
calendar_html += '<tr>';
var first_week_day = new Date(year, month, 1).getDay();
for(week_day= 0; week_day < 7; week_day++) {
calendar_html += '<td class="weekDay">' + weekDay[week_day] + '</td>';
}
calendar_html += '</tr><tr>';
// Fill the first week of the month with the appropriate number of blanks.
for(week_day = 0; week_day < first_week_day; week_day++) {
calendar_html += '<td> </td>';
}
week_day = first_week_day;
for(day_counter = 1; day_counter <= days_in_this_month; day_counter++) {
week_day %= 7;
if(week_day == 0)
calendar_html += '</tr><tr>';
// Do something different for the current day.
if(day == day_counter) {
calendar_html += '<td class="currentDay">' + day_counter + '</td>';
} else {
calendar_html += '<td class="monthDay"> ' + day_counter + ' </td>';
}
week_day++;
}
calendar_html += '</tr>';
calendar_html += '</table>';
// Display the calendar.
document.write(calendar_html);
}
</script>
<!-- This part can go in the head of the html file -->
<script language="JavaScript" type="text/javascript">
<!-- Copyright 2003, Sandeep Gangadharan -->
<!-- For more free scripts go to Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar... -->
<!--
function sivamtime() {
now=new Date();
hour=now.getHours();
min=now.getMinutes();
sec=now.getSeconds();
if (min<=9) { min="0"+min; }
if (sec<=9) { sec="0"+sec; }
if (hour>12) { hour=hour-12; add="pm"; }
else { hour=hour; add="am"; }
if (hour==12) { add="pm"; }
document.timeForm.field.value = ((hour<=9) ? "0"+hour : hour) + ":" + min + ":" + sec + " " + add;
setTimeout("sivamtime()", 1000);
}
window.onload = sivamtime;
</script>
</head>
<body>
<div id="layout">
<div id="topo"><img src="images/jose.jpg" width="960" height="100" alt="Jose Moreira" /></div>
<div id="bandeiras">
<div align="right"><img src="images/mapadosite.jpg" width="30" height="15" alt="mapa do site" /><img src="images/home.jpg" width="30" height="15" alt="home" /><img src="images/rss.jpg" width="30" height="15" alt="rss" /><img src="images/portugues.jpg" width="30" height="15" alt="português" /><img src="images/ingles.jpg" width="30" height="15" alt="inglês" /><a href="http://www.facebook.com"> src="images/facebook.jpg" width="30" height="15" alt="facebook" /></a><a href="http://www.linkedin.com"> src="images/linkedin.jpg" width="30" height="15" alt="linkedin" /></a><a href="https://twitter.com"> src="images/twiter.jpg" width="30" height="15" alt="twitter" /></a></div>
</div>
<div id="conteudo">
<h3>Apresentação</h3>
<p> Este site foi construído com o intuito de ser uma partilha para outras pessoas, sendo o meu marketing pessoal e considero também ser uma demonstração da minha aprendizagem de novos conhecimentos nas diferentes áreas de programação como HTML e Javascript, embora a minha formação de base seja uma Licenciatura em Sociologia. Contudo agradecia imenso as vossas sugestões e opiniões, pois há sempre aspectos a mudar se queremos progredir para melhoramos e aperfeiçoarmos as nossas competências. Assim, o vosso feedback é muito importante.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<!-- chat -->
<p><a id="ewclink" href="http://www.everywherechat.com/">>
<br />
<script src="http://www.everywherechat.com/e.php?defaultRoom=Lobby&roomList=true&fontSize=10& width=290&height=170&theme=night">>
</div>
<div id="menu_navegacao">
<p><a href="#">Introdução</a> <a href="#">Clientes</a> <a href="#">Novidades</a> <a href="#">Contato </a></p>
</div>
<!--calendar -->
<center><script type="text/javascript">calendar();</script></center>
<!-- clock-->
<p><center><form name="timeForm">
<input type=text" name="field" value="" size="10">
</form></center></p>
<!--Weather-->
<div align="center" id="cont_44195f23474f208a222d258bb1143f4d">
<span id="h_44195f23474f208a222d258bb1143f4d"><a id="a_44195f23474f208a222d258bb1143f4d" href="http://www.tempo.pt/" target="_blank" style="color:#808080;font-family:Times New Roman;font-size:14px;">Clima</a> Viana do Castelo</span><script type="text/javascript" src="http://www.tempo.pt/wid_loader/44195f23474f208a222d258bb1143f4d">>
</div>
<!--visits counter -->
<p><center><table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="13%" id="AutoNumber1" height="27">
<tr>
<td width="100%" height="27"><script language="javascript" src="http://www.countads.com/count.php?id=791&cmd=cookie">
</script>
<p align="center">
<img src="http://www.countads.com/count.php?id=791&cmd=img_only" border="0" width="151" height="21" ><br>
<span style="font-family: arial, verdana, sans-serif; font-size: 8pt">
<a href="http://www.ocio-full.blogspot.com">>
</tr>
</table></center></p>
<!--radio online -->
<div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.
<a href="http://www.shoutcheap.com/shoutcast/">shoutcheap shoutcast server hosting</a>
<a href="http://www.shoutcheap.com/icecast/">shoutcheap icecast server hosting</a></div>
<script type="text/javascript" src="http://www.shoutcheap.com/flashplayer/swfobject.js">>
<script type="text/javascript">
var s1 = new SWFObject("http://www.shoutcheap.com/flashplayer/player.swf",
"ply","190","20","9","#FFFFFF");
s1.addParam("allowfullscreen","true");
s1.addParam("allowscriptaccess","always");
s1.addParam("flashvars",
"file=http://ipaddressort/;stream.nsv&type=mp3&volume=50&autostart=true");
s1.write("container");
</script>
<!--footer -->
<div id="rodape"><p></p></div>
</body>
</html>
/* CSS Document */
#topo img {
height: 100px;
width: 960px;
}
#bandeiras {
background-color: #09F;
}
#menu_navegacao a:link {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-transform: capitalize;
color: #FFF;
text-decoration: none;
background-color: #09C;
display: block;
margin: 2px;
padding: 10px;
height: 20px;
width: 150px;
border: thin solid #999;
}
#menu_navegacao a:hover {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-transform: capitalize;
color: #000000;
text-decoration: none;
background-color: #A6E9FF;
display: block;
margin: 2px;
padding: 10px;
height: 20px;
width: 150px;
border: thin solid #999;
}
#conteudo {
background-color: #E6E6E6;
clear: right;
float: right;
height: 800px;
width: 750px;
text-align: left;
}
#rodape {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFF;
background-color: #000;
text-align: center;
height: 20px;
width: 960px;
clear: both;
display: block;
}
#layout {
height: 650px;
width: 960px;
overflow: auto;
z-index: auto;
}
#conteudo p #ewclink {
text-align: right;
}
#phead {
font-family: "Times New Roman", Times, serif;
font-size: 36px;
font-style: normal;
text-align: center;
}
#conteudo h3 {
text-align: center;
font-weight: bold;
font-style: italic;
font-size: 36px;
font-family: "Times New Roman", Times, serif;
}
#conteudo p {
text-align: justify;
position: static;
right: 30px;
letter-spacing: 3px;
font-weight: normal;
clear: none;
float: none;
margin-left: 25px;
margin-right: 25px;
color: #009;
font-size: 18px;
}
Assim gostaria sff que me indicassem no código do dreamweaver as alterações que tenho que efectuar, sublinhando a vermelho e colocando notas com as respectivas alterações a fazer. Aguardando uma resposta breve de vossa parte.
Melhores cumprimentos
José Moreira