Tutorial per orologi e calendari

« Older   Newer »
  Share  
view post Posted on 7/7/2011, 16:35     +1   -1
Avatar

Senior Member

Group:
Administrator
Posts:
22,129
Reputation:
0
Location:
Tortuga... XD

Status:


trovato un po' di tempo fa on line... (non ricordo quale sito era D:)

1° parte (vale sia per i calendari che per gli orologi):

Apri front page (va bene anche dreamweaver) e posizionati su "normale", fai "inserisci--->livello"... vai ora in "codice", clicca col mouse prima del tag e fai, dalla barra in alto "inserisci--->immagine---da file", cerca nel tuo pc l'immagine da inserire e clicca ok.

Ora vai su "normale", clicca sul bordino dell'immagine in modo che il livello dell'immagine sia selezionato (facendo modo,quindi, che il nuovo livello che ora creeremo resti inglobato a quello creato prima) e fai nuovamente "inserisci--->livello"


Ti ritroverai un quadratino dai bordini azzurri nel riquadro del programma è il nuovo livello creato). Premi il tasto del mouse sul riquadro in alto a sinistra, dove vedi sritto "livello 1" per spostarlo nella posizione dove piu' ti piace sull'immagine, cosi'


Ora torna su "codice" e sei pronta per inserire il codice.
Per poter essere visualizzato in linea, l'immagine deve essere hostata su un servizio di hosting free, carica quindi l'immagine che hai usato direttamente nel tuo spazio web, oppure usa servizi come "imageshack", in modo da avere l'url da inserire al posto del percorso interno al tuo pc messo dal programma al momento dell'inserimento immagine


2° parte (orologio)

Vai in "codice" e ti ritroverai il
appena creato sottolineato di azzurro


Clicca con il mouse subito prima del tag di chiusura

Ora copia tutto questo codice

CODICE
<script language="JavaScript">
function tS(){ x=new Date(); x.setTime(x.getTime()); return x; }
function lZ(x){ return (x>9)?x:'0'+x; }
function tH(x){ if(x==0){ x=24; } return (x>24)?x-=24:x; }
function dT(){ if(fr==0){ fr=1; document.write('<font size=2 font color=#f74208 face=Tahoma><b><span id="tP">'+eval(oT)+'</b></span></font>'); } tP.innerText=eval(oT); setTimeout('dT()',1000); }
var fr=0,oT="lZ(tH(tS().getHours()))+':'+lZ(tS().getMinutes())+':'+lZ(tS().getSeconds())";
</script>
<script language="JavaScript">dT();</script>


ed incollalo dove avevi cliccato prima, prima del tag

L'unica parte che puoi modificare, per pesonalizzare ed adattare alla tua immagine, è quella relativa al font

CODICE
<font size=2 font color=#f74208 face=Tahoma>


puoi quindi, rispettivamente, variare la grandezza, il colore e tipo di font

Se ora vai su anteprima potrai vedere il tuo orologio in funzione, se la posizione non è perfetta, torna su "normale" e sposta il livello.


Quando è tutto a posto copia il codice e incollalo in una nuova pagina web (o al massimo in un foglio del blocco note, non salvare MAI direttamente da front page)

2° parte (calendario)

Vai in "codice" e ti ritroverai il
appena creato sottolineato di azzurro


Clicca con il mouse subito prima del tag di chiusura


ora copia tutto questo codice

CODICE
<script language=javascript>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!--//Begin
monthnames = new Array(
"Gennaio",
"Febbraio",
"Marzo",
"Aprile",
"Maggio",
"Giugno",
"Luglio",
"Agosto",
"Settembre",
"Ottobre",
"Novembre",
"Dicembre");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<FONT face='Arial'>");<!--Font Face-->
document.write("<table border=0 " );<!--Border size-->
document.write("bordercolor=#ffffff style='font-size : 8px; color : #ff2f87;' cellpadding=0 cellspacing=1>");<!--Border color, font size, cell padding, cellspacing and font color-->

document.write("<tr><td colspan=7><center><strong>"
+ monthnames[thismonth] + " " + thisyear
+ "</strong></center></td></tr>");
document.write("<tr>");
document.write("<td align=center><font color=#ffffff>D</td>");<!--The color here and below are for each week day-->
document.write("<td align=center><font color=#ffffff>L</td>");
document.write("<td align=center><font color=#ffffff>M</td>");
document.write("<td align=center><font color=#ffffff>M</td>");
document.write("<td align=center><font color=#ffffff>G</td>");
document.write("<td align=center><font color=#ffffff>V</td>");
document.write("<td align=center><font color=#ffffff>S</font></td>");<!--Last color chage here-->
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td>-</td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='#ffffff'>");<!--todays date color-->
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
document.write("</FONT>");
               </script>

incollalo dove avevi cliccato prima, prima del tag

L'unica parte che puoi modificare, per pesonalizzare ed adattare alla tua immagine, è quella relativa al font, che vedrai, in front page, colorata di verde chiaro
Se ora vai su anteprima potrai vedere il tuo calendario in funzione, se la posizione non è perfetta, torna su "normale" e sposta il livello.

Quando è tutto a posto copia il codice e incollalo in una nuova pagina web (o al massimo in un foglio del blocco note, non salvare MAI direttamente da front page)

Per l'inserimento in spazi web come blog o pagine internet bisognera' creare il frame

3° parte (creazione frame)

La creazione del frame è necessaria per l'inserimento in blog, siti o forum del nostro lavoro, ed è molto semplice

Innanzitutto va messo on line il codice che abbiamo creato prima, in modo da poter assegnare un url da visualizzare all'interno del nostro frame, è sufficente avere un account in servizi di web space gratuiti, come altervista, e caricare il codice generato nei tutorial precedenti, creandone la pagina web
Apri una nuova pagina in front page, posizionati cliccando con il mouse, tra i tag <body> e </body>
inserici questa striscia

CODICE
<iframe name="l1" src=URL DELL'OROLOGIO/DATARIO/CALENDARIO frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>


Al posto di URL DELL'OROLOGIO/DATARIO/CALENDARIO metti l'indirizzo web della pagina in cui hai caricato il codice creato prima

Ora vai su "normale" e vedrai un riquadro la cui misura non corrispondera' all'immagine da te inserita, clicca quindi in un angolo di questa finestra in modo da far comparire dei quadratini neri che la contornino tutta


spostali in modo da contornare perfettamente la tua immagine


automaticamente ti verranno inseriti dal programma i valori di width ed height
Avrai quindi questo codice

CODICE
<iframe name="l1" src=http://giulyalbascura.altervista.org/tutorial/datario_tutorial.html frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" width="226" height="191"></iframe>


che è il codice da usare per inserire il tuo lavoro nei codici dei blog e siti web , oppure per farlo visualizzare nei post dei forum

Capita, a volte, che il livello, durante la creazione del frame, si sposti di qualche millimetro...in questo caso basta modificare il codice creato nella prima fase spostando manualmente (vai su "normale" e muovi il quadratino azzuro dopo averlo selezionato) il livello che contiene il codice inserito (ad esempio, se noti che ti viene spostato un po a destra, tu posizionalo un po a sinistra, per compensare).Ovviamente questa modifica dovra' essere fatta nella pagina on line (recuperi il codice che hai messo on line, lo incolli in front page e sposti il livello come detto, poi lo reincolli modificato nella tua pagina web SENZA PERO' MODIFICARNE IL TITOLO)

spero vi sia utile :happy:
 
Web  Top
Sehnsucht.
view post Posted on 18/7/2011, 17:54     +1   -1




...mi sono super persa.
ma lo terrò d'acconto per il prossimo cliente che mi chiede cose simili xDDD
che voi sappiate esiste un metodo simile anche per i countdown?
 
Top
view post Posted on 23/7/2011, 23:50     +1   -1
Avatar

Senior Member

Group:
Administrator
Posts:
22,129
Reputation:
0
Location:
Tortuga... XD

Status:


Ste---> anche io all'inizio ho avuto qualche difficolta, ma leggendo e provando ci si arriva :sisi:

secondo me si. Di sicuro sarà con un codice javascript, non credo sia tanto diverso da questo metodo...
cercherò e magari posto! ^^




 
Web  Top
2 replies since 7/7/2011, 16:35   262 views
  Share