Your browser does not support CSS. If images appear below, please disregard them.
Connexion

iWeb Beginner Forum Iweb Beginner : Forum d'assistance sur Apple iWeb

FAQ Membres>M’enregistrer

  • Publicité

Bibliothèque de Code HTML pour iWeb

Pour aller plus loin avec iWeb

Modérateurs: les9viesduchat, mutru, zepatente

Re: Bibliothèque de Code HTML pour iWeb

Messagepar philippe » Jeu 9 Avr 2009 05:00

Nom de la fonction : Faire un lien avec un effet sonore

Quel est son but : Comme son nom l'indique, il sert à faire un lien vers une page de site ou tout autre document, avec un effet sonore au survol du lien.

Source du code : http://www.creation-de-site.net

Code :
Code: Tout sélectionner
<head>

<script type="text/javascript">

<!-- script créé par le webmaster de : -->
<!-- www.creation-de-site.net -->
<!-- vous y trouverez des javascripts, des images, des tutoriaux et des ressources gratuites. -->
<!--
var son = new Array();
son[0]='<embed src="http://www.monsite.com/monson.swf" hidden=true autostart=false loop=-0">';
<!-- vous pouvez ajouter ou supprimer des sons. -->
function music(n)
{ fond_musical.innerHTML=son[n]; }
//-->

</script>

</head>

<body>
   <a href="http://www.monsite.com/accueil.html" onMouseOver="music(0);">
   <img src="http://www.monsite.com/monimage.png" width="80px" height="110px" border="0px"></a>

</body>

   <div id="fond_musical"></div>


Mise en place du code : Placez ce code dans un Fragment HTML.

Explication du code :
Dans cette ligne, l'adresse du son :
son[0]='<embed src="http://www.monsite.com/monson.swf" hidden=true autostart=false loop=-0">';

Dans cette ligne, l'adresse du lien à ouvrir :
<a href="http://www.monsite.com/accueil.html" onMouseOver="music(0);">

Dans cette ligne, l'adresse de l'image sur laquelle le son se déclanche et qui sert de lien :
<img src="http://www.monsite.com/monimage.png" width="80px" height="110px" border="0px"></a>
Vous pouvez aussi paramétrer la largeur (width), la hauteur (height) et la bordure de l'image.


Liens vers http://www.iwebeginner.com : oui - non -
http://www.iwebeginner.com/forum/topic1052.html
" il n'y a pas de problèmes, il n'y a que des solutions. (André Gide) "
http://www.studiovega.fr
Avatar de l’utilisateur
philippe
Confirmé
Confirmé
 
Messages: 187
Inscription: Ven 13 Mar 2009 13:56
Localisation: Bayonne / France
Votre version d'iWeb: iWeb 08
Votre hébergement: FTP

Publicité

Re: Bibliothèque de Code HTML pour iWeb

Messagepar Caribou » Sam 2 Mai 2009 12:31

Nom de la fonction : Texte clignotant avec multiple couleur

Quel est son but : Tout est dans le titre

Code :

Code: Tout sélectionner
<html>
<body>
<b>
<font size="5">
<script>

var text="METTRE VOTRE TEXTE ICI"
var speed=82 // La vitesse
if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>
</font></b>
 </body>
 </html>
Mise en place du code : le code sera à copier puis coller dans un fragment html

Option du code :
➡speed: Vitesse
➡bgcolor: Couleur.
Dernière édition par Caribou le Dim 3 Mai 2009 12:14, édité 1 fois.
Avatar de l’utilisateur
Caribou
Génius
Génius
 
Messages: 4584
Inscription: Lun 14 Avr 2008 11:31
Localisation: Sud
Votre OS: Lion
Votre version d'iWeb: IWeb 3.0.4
Votre hébergement: FTP

Re: Bibliothèque de Code HTML pour iWeb

Messagepar Caribou » Dim 3 Mai 2009 06:26

Nom de la fonction : Horloge

Quel est son but : Une horloge s'affiche sur la barre de tâche.
Code :
Code: Tout sélectionner

<html>
<head>
<script language="javascript">
 function horloge()
{
dte=new Date();
H=dte.getHours();
M=dte.getMinutes();
S=dte.getSeconds();
setTimeout("horloge()",1000);
if(M<10) M="0"+M;
if(S<10) S="0"+S;
status=H+":"+M+":"+S;
}
</script>
</head>
<body onLoad="horloge()">
</body>
</html>

Mise en place du code : le code sera à copier puis coller dans un fragment html

Option du code :
➡ Pas d'option. Attention cette horloge est celle du système du client.
Dernière édition par Caribou le Ven 23 Sep 2011 10:56, édité 7 fois.
Avatar de l’utilisateur
Caribou
Génius
Génius
 
Messages: 4584
Inscription: Lun 14 Avr 2008 11:31
Localisation: Sud
Votre OS: Lion
Votre version d'iWeb: IWeb 3.0.4
Votre hébergement: FTP

Re: Bibliothèque de Code HTML pour iWeb

Messagepar Caribou » Jeu 1 Sep 2011 08:02

Nom de la fonction : Raccourcir l'adresse de votre site

Quel est son but : Avoir une adresse plus courte sur votre navigateur.


Exemple:

"http://www.votresite.fr/iWeb/blablabla.html" va devenir "http://www.votresite.fr"
Code: Tout sélectionner
<html>
<head>
</head>
<frameset rows="100%,*" frameborder="0" border="0"
framespacing="0"><frame name="1mainforwardframe1"
src="http://www.votresite.fr/iWeb/blablabla.html"
frameborder="0" marginwidth="0" marginheight="0"
leftmargin="0" topmargin="0" scrolling="auto"><frame
name="1forwardbottomframe1" src="about:blank" noresize="noresize"
scrolling="no"></frameset>
<noframes><META HTTP-EQUIV="Refresh"
CONTENT="0;http://www.votresite.fr/iWeb/blablabla.html">
</noframes>
</html>

Mise en place du code :

Copier-Coller les lignes de code dans Sumltron "Enregistrer-sous" avec comme nom de fichier " index.html ".

Téléchargement direct de Sumltron ici.

Remplacer le fichier "index.html" créé par iWeb à la racine de votre espace d'hébergement par celui que vous venez de créer après avoir modifié les 2 lignes qui contiennent "http://www.votresite.fr/iWeb/blablabla.html" par l'adresse de votre site.

Cette opération nécessite d'avoir un logiciel FTP, Cyberduck, Transmit, etc..
Avatar de l’utilisateur
Caribou
Génius
Génius
 
Messages: 4584
Inscription: Lun 14 Avr 2008 11:31
Localisation: Sud
Votre OS: Lion
Votre version d'iWeb: IWeb 3.0.4
Votre hébergement: FTP

Re: Bibliothèque de Code HTML pour iWeb

Messagepar Caribou » Lun 5 Déc 2011 13:40

Nom de la fonction : Rendre invisible les infos bulles

Quel est son but : Rendre le site plus agréable.

Code :
Code: Tout sélectionner
<html>
<script type='text/javascript'>
function clearTooltip() {
_links = parent.document.links;
for (i=0; i<_links.length; i++) {
    _links[i].setAttribute('title', '');
}
}
chkFooter = setInterval('checkFooter()', 100);

function checkFooter() {
    if (parent.document.getElementById('footer_layer') != null) {
        clearTooltip();
        clearInterval(chkFooter);
    }
}
</script>  </html>

Mise en place du code : Placez ce code dans un Fragment HTML.
Avatar de l’utilisateur
Caribou
Génius
Génius
 
Messages: 4584
Inscription: Lun 14 Avr 2008 11:31
Localisation: Sud
Votre OS: Lion
Votre version d'iWeb: IWeb 3.0.4
Votre hébergement: FTP

Re: Bibliothèque de Code HTML pour iWeb

Messagepar glisda » Jeu 22 Déc 2011 07:49

Nom de la fonction : faire une newsletter

Quel est son but : faire une newsletter présentable à insérer dans votre communication par par mail.

Voici un modèle de newsletter que vous pouvez intégrer à votre mailling.
J'en ajouterai d'autres si vous en avez besoin!
Vous pouvez y intégrer une bannière et une image, et vous disposez de deux blocs texte.
Il vous faudra toutefois disposer de:
- Soit un dossier newsletter à la racine de votre site.
- Soit avoir un éditeur de newsletter en ligne (option plus simple que j'ai choisi, gratuit et concluant).
Pour utiliser cet éditeur en ligne:
http://www.ymlp.com

Voici le code à intégrer dans votre éditeur html
(en le faisant avec smultron, vous disposez de l'option Menu--> Apperçu pour le voir en ligne).
Code: Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Newsletter</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" bgcolor="#f2f2f2">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f2f2f2">
   <tr>
      <td valign="top" align="center">
         <table width="551" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td align="left" style="padding:10px 0 10px 10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#888888;">
                  Images not displaying properly? Add <a href="mailto:info@yourcompany.com" style="color:#545454;">info@yourcompany.com</a> to your address book now<br>
                  or <a href="[SHOWEMAIL]" style="color:#545454;">view the online version here</a>.
               </td>
            </tr>
            <tr>
               <td align="left" bgcolor="#ffffff" style="border:1px solid #9c9c9c; padding:5px;">
                  <div style="border:7px solid #424242;">
                     <table width="525" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                           <td style="padding:25px 20px 20px 20px;">
                              <table width="485" border="0" cellspacing="0" cellpadding="0">
                                 <tr>
                                    <td><img src="http://www.servecake.com/newsletters/b5/i/logo.gif" alt="Yout Company Name" width="155" height="29"></td>
                                    <td align="right" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#acabab;">MMMM DD, YYYY</td>
                                 </tr>
                              </table>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <div style="border-bottom:1px solid #d6d6d6; border-top:1px solid #d6d6d6; padding-bottom:3px; padding-top:3px;">
                                 <div style="background-color:#424242;">
                                    <table height="39" border="0" cellspacing="0" cellpadding="0">
                                       <tr>
                                          <td style="border-right:1px solid #797979; padding:0 20px 0 20px; font-family:Arial, Helvetica, sans-serif; font-size:11px;"><a href="[SUBSCRIBE]" style="color:#e4e4e4;">Subscribe</a></td>
                                          <td style="border-right:1px solid #797979; padding:0 20px 0 20px; font-family:Arial, Helvetica, sans-serif; font-size:11px;"><a href="[UNSUBSCRIBE]" style="color:#e4e4e4;">Unsubscribe</a></td>
                                          <td style="border-right:1px solid #797979; padding:0 20px 0 20px; font-family:Arial, Helvetica, sans-serif; font-size:11px;"><a href="[FORWARD]" style="color:#e4e4e4;">Forward to a friend</a></td>
                                          <td>&nbsp;</td>
                                       </tr>
                                    </table>
                                 </div>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <table width="525" border="0" cellspacing="0" cellpadding="0">
                                 <tr>
                                    <td valign="top">
                                       <table width="337" border="0" cellspacing="0" cellpadding="0">
                                          <tr>
                                             <td style="padding:1px;"><img src="http://www.servecake.com/newsletters/b5/i/postcard.gif" width="335" height="269" alt=""></td>
                                          </tr>
                                          <tr>
                                             <td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; padding:20px; line-height:20px;">
                                                <p style="margin:0 0 10px 0; font-size:18px; color:#0165ab;"><a href="#" style="color:#0165ab;">Lorem ipsum dolor sit amet</a></p>
                                                <p style="margin:0 0 25px 0;">
                                                   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
                                                   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                                                   voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
                                                   kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                                                   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
                                                   eirmod tempor.
                                                </p>
                                             </td>
                                          </tr>
                                       </table>
                                    </td>
                                    <td width="148" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666; padding:30px 20px 0 20px; border-left:1px solid #afafaf; line-height:17px;" valign="top" bgcolor="#f6f6f6">
                                       <p style="font-size:13px; margin:0 0 8px 0; color:#555555;"><b>Ut wisi enim ad minim</b></p>
                                       <p style="margin:0 0 20px 0;">
                                          Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
                                          suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
                                          eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
                                          vel illum dolore eu feugiat.
                                       </p>
                                       <p style="font-size:13px; margin:0 0 8px 0; color:#555555;"><b>Nam liber tempor</b></p>
                                       <p style="margin:0 0 20px 0;">
                                          Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
                                          doming id quod mazim placerat facer possim assum. Lorem ipsum dolor
                                          sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                                          tincidunt ut laoreet dolore magna aliquam erat volutpat.
                                       </p>
                                    </td>
                                 </tr>
                              </table>
                           </td>
                        </tr>
                        <tr>
                           <td style="border-top:1px solid #d6d6d6; background-color:#f6f6f6; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666; line-height:17px;  padding:15px 0 15px 20px;">
                              <b>Your Company Name</b><br>
                              123 Your Address, Your City, State, Zip<br>
                              <a href="mailto:info@yourcompany.com" style="color:#4089bb;">info@yourcompany.com</a><br>
                              <a href="http://www.yourcompany.com" style="color:#4089bb;">www.yourcompany.com</a>
                           </td>
                        </tr>
                     </table>

                  </div>
               </td>
            </tr>
            <tr>
               <td align="left" style="padding:20px 0 10px 10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#888888;">
                  To ensure our newsletter always reaches your inbox, please add <a href="mailto:info@yourcompany.com" style="color:#545454;">info@yourcompany.com</a> to your<br>
                  address book. If you prefer not to receive news from Your Company Name in the future, you can<br>
                  <a href="[UNSUBSCRIBE]" style="color:#545454;">unsubscribe here</a>.
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

</body>
</html>


Et voici à quoi ressemblera votre newsletter:
Image

Bien sûr, les champs personnalisés sont à modifier par vos soins (liens img et lien sites, email etc...)
Vous pouvez également modifier les couleurs et les dimensions des éléments, mais uniquement si vous êtes certain de votre manip! ;)
Image
Avatar de l’utilisateur
glisda
Expert
Expert
 
Messages: 465
Inscription: Dim 9 Jan 2011 17:29
Localisation: Boulogne
Votre version d'iWeb: iWeb 09
Votre hébergement: FTP

Précédente

Retourner vers Code HTML

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 5 invités