Ce site a été créé avec l'éditeur HTML Webexpert. Vous pourrez en trouver une version de démonstration à l'adresse suivante : http://www.visic.com/webexpert/index.html
Même si vous désirez créer vos pages avec un éditeur, n'hésitez pas à vous plonger dans le code HTML, vous pourrez ainsi mieux comprendre la structure de vos pages ce qui vous permettra de "bidouiller" le code si besoin est pour améliorer la présentation.
Dans cette optique n'hésitez pas à consulter la page du développeur, vous y trouverez de nombreuses astuces et liens concernant la construction de pages Web.
- Vous trouverez en bas de cette page des liens avec des sites dédiés à la conception de pages web.
Utiliser Java
En ce qui concerne l'ajout de scripts Java, il faudra vous attacher plus longement à la programmation qui n'est d'ailleurs pas excessivement compliquée. Si vous désirez utiliser celles qui sont sur ce site je vous donne ici le code et l'explication rapide des éléments principaux :
Nous allons prendre l'exemple du sous menu Me myself and I. Il affiche une page qui s'appelle cv.html.
Nous avons l'imageA qui est affichée lorsque la souris n'est pas sur la zone, l'imageB qui est affichée lorsque la souris passe sur le menu (le point passe au jaune), l'imageC qui s'affiche dans la zone d'explication à droite du menu aussi lorsque la souris passe sur le menu. Enfin l'imageChez qui est l'image affichée dans la zone d'explication lorsque la souris n'est sur aucun menu. Le code est le suivant :
<SCRIPT LANGUAGE="JavaScript">
Ensuite dans le corps du code <BODY></BODY> pour chaque menu vous affichez le code suivant :
<A HREF="cv.html" TARGET="affiche" onmouseover="if (navigator.appVersion.indexOf('2.0')<0)
- On observe ici que le paramètre TARGET qui renseigne sur la FRAME à utiliser pour afficher la page a pour valeur "affiche", c'est la fenêtre centrale sur mon site. Attention de le changer pour qu'elle corresponde au votre ou de l'enlever si vous n'utilisez pas de FRAMES.
On peut multiplier le nombre d'images modifiées par le passage sur une zone sensible il suffit de rajouter dans le code le nom des images qui doivent être modifiées et leur index. Dernier conseil, uitlisez des images de petites taille pour que le chargement soit rapide et qu'il n'y ai pas trop d'attente à l'affichage.
PETIT ASTUCE : Pour que vos images du menu soient bien collées les unes aux autres, le code de chaque menu doit être lui rigoutreusement collé (Pour plus de précision allez voir le code de la page du menu)
<SCRIPT LANGUAGE="javascript">
La fenêtre s'ouvrira avec le code de la page infos.html
grâce à la fonction open_infos. Vous pouvez observer que l'on peut entrer la taille en pixel de la fenêtre ainsi que son (INFOS) et bien sur préciser s'il elle modifiable en taille (reziseable=1).
<A HREF="javascript:open_infos()"> <IMG SRC="image">BORDER=0
<SCRIPT LANGUAGE="JavaScript" >
La fonction goForit récupère le code d'accès (password) qui est en faite le nom de la page, y ajoute l'extension html ou htm suivant l'extension de votre page, ferme la fenêtre ou vous avez saisi le code et ouvre la fenêtre protégée.
Dans la partie <BODY></BODY>, vous ajoutez un lien avec le code suivant :
<FORM target=Affiche NAME="testform" >
J'ai pris ici l'exemple d'une zone de saisie (inputbox) et d'un bouton (button) qui vous permettent d'entrer le code d'accès et de le transmettre à la fonction goForit (onClick="goForit(this.form)">)
Le menu avec modification des images
Ce menu permet, lorsque l'on passe sur une zone active, de modifier l'image qui s'y trouve (ici le point sur le menu passe au jaune) et pourquoi pas de modifier une image à un autre endroit. Ce qu'il faut savoir, c'est que lorsque vous afficher des images elles sont stockées dans un index à la suite les unes des autres. Cet index commence à 0 et est incémenté de 1 à chaque image affichée. La deuxième chose à connaître ce sont les évenements gérés par le navigateur. Ici nous utilisons ceux qui scrutent la position et le passage de la souris sur une zone, en l'occurence l'image.
Pour le menu de ce site nous avons eu besoin de trois images par sous menu (Me myself and I - recherches - coups de gueules - Il y a t'il un ailleurs meilleur - secret - web) soit au total 18 images plus une qui s'affiche dans la zone d'explication lorsque la souris n'est pas sur une zone sensible. Les évenements que nous avons utilisés sont les suivants : onmouseover (la souris passe sur l'image) onmouseout (la souris n'est plus sur l'image).
Vous devez déclarer la fonction qui s'appelle menus de la manière suivante dans la partie <HEAD></HEAD> du code :
<!--
function menus(index,src) {
if (navigator.appVersion.indexOf("2.0")<0) {document.images[index+1].src = src;}
}
-- -->
</SCRIPT>
{document.images[6].src ='ImageC'; document.images[0].src = 'ImageB'; return true}"
onmouseout="if (navigator.appVersion.indexOf('2.0')<0) {document.images[6].src ='ImageChez';
document.images[0].src = 'menu1.gif'}"><IMG SRC="ImageA" BORDER=0 WIDTH=65
HEIGHT=80></A>
- Deuxième remarque l'imageChez qui est située dans la zone d'explication doit être affichée ici en dernier après vos menus pour qu'elle soit visible avant que la souris ne passe sur le menu.
- Enfin on voit ici que les index utilisés sont 0 et 6, 0 parce que c'est la première image affichée le second menu devra intégré l'index 1, le troisième 2.... L'index 6 correspond à l'image de la zone d'explication (ImageChez) cet index ne change pas car cette image est toujours la dernière (dans cet exemple en tout cas), il y a 6 menus plus l'image de la zone d'explication donc la dernière à l'index 6.Ouvrir une fenêtre
Ouvrir une fenêtre d'une taille particulières pour afficher des informations particulière peut être intéressant (voir l'exemple de la page à accès restrient (Menu SECRET).
Le code est simple de la même manière que pour le menu vous devez inscrire le code de la fonction dans la partie <HEAD></HEAD> :
<!--- Hide from tired old browsers
// var window_infos = null;
function open_infos()
{
window_infos = window.open('infos.html', 'INFOS',
'width=440,height=550,resizable=1');
}
// End hiding --->
</SCRIPT>
Pour que la fenêtre s'ouvre, il faut bien entendu solliciter un lien sous forme de texte, de bouton ou d'image par exemple (image) et ajouter le code suivant dans la partie <BODY></BODY> :
WIDTH=46 HEIGHT=80 > </A>Protéger l'accès à une page
Voici une manière très simple de protéger l'accès à une page, évidemment ce n'est un moyen très sur, mes il peut être utile de n'autoriser l'accès à certaines pages qu'a un nombre restreint de personnes qui auront le code d'accès. Ouvrez une fenêtre avec la méthode précédente avec une page appelée par exemple Secret.html En fait ici, c'est le nom de la page à accéder qui est le code d'accès. Le code pour la partie <HEAD></HEAD> dans la page Secret est la suivante :
<!--- Hiding //
function goForit() {
var location;
var password;
password=this.document.testform.inputbox.value
location = password + ".html"
fetch(location)
theKeeper=window.close()
}
function fetch(location) {
var root;
root=window.open(location, '',
'width=340,height=550,resizable=1');
}
// End hiding --->
</SCRIPT>
<INPUT TYPE="Password" NAME="inputbox" VALUE="" size=20>
<INPUT TYPE="button" NAME="button" Value="Entrez le code"
onClick="goForit(this.form)">
</FORM>
Si vous désirez voir l'effet allez dans le menu SECRET, bien entendu je ne vous donne pas le code d'accès mais vous pourrez observer le fonctionnement de cette fonction.
- La page de Laurent Seguin, vous y trouverez des scripts intéressants.
- Le site de Gamelan ou vous trouverez de nombreux exemples d'applets et de scripts
- Une autre page sur les applets Java - Indispensable -
- Pour être hébergé gratuitement vous avez le choix il y a les sites Chez, Geocities, Mygale et bien d'autres que vous pourrez découvrir par vous même en fonction de vos besoins.
- Pour en savoir plus sur le language HTML et sur bien d'autres choses le site TechnoSphère vous comblera.
- Pour créé des documents 3Dvous trouverez tout ce qu'il vous faut