Blog pour le BTS SIO

Plan réseau

Je disposais d’un plan réseau datant de 2012  devenu obsolète (notamment avec l’agrandissement de la société) fait avec le logiciel Microsoft Visio. Ainsi qu’un site internet contenant le plan réseau mais impossible à modifier car il était trop compliqué (Utilisation de JavaScript et de php).

Après avoir modifié le plan réseau, j’ai décidé de faire une page HTML simple contenant un menu ou l’on peut voir le plan réseau de chaque site séparément ou bien la totalité du réseau.

>Lien vers Visio<

https://www.dropbox.com/s/5gjm99blxyhc2aw/Hasler2014.pdf?m=

>Lien vers page HTML<

https://www.dropbox.com/s/xzga8ylil03oh8t/index.html

Code HTML de la page :

<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »&gt;
<html xmlns= »http://www.w3.org/1999/xhtml &raquo; xml:lang= »fr » >

<head>
<!– Titre de la page qui s’affiche dans l’onglet –>
<title>Plan réseau du Groupe Hasler International</title>
<!– balises qui contiennent les normes d’encodage du texte –>
<meta http-equiv= »Content-Type » content= »text/html; charset=iso-8859-1″ />

<!– Le code CSS (ce qui permet de définir le style graphique etc) –>
<style type= »text/css »>

/* style de la liste à puce (puces invisibles, bordures bleu, dimensionnement) */
#sous_menu{
list-style-type:none;
margin: 0;
padding:0;
width: 20%;
border : solid 1px #a3c0d5;
width: 180px;
border-bottom: none;
float: left;
}

/*puces de la liste (separateur du bas, positionnement) */
#sous_menu li{
margin: 0;
padding: 0;
border-bottom: 1px solid #a3c0d5;
}

/* texte de la puce (couleur, suppression barre de soulignement des liens) */
#sous_menu a{
text-decoration:none;
color:#5d90b5;
display:block;
padding-left:1.5em;
}

/* survol des liens (couleur) */
#sous_menu a:hover{
background-color:#e9eefb;
color:#294f79;
}

/* image de la page (reglage de l’image) */
#imageMenu{
float: left;
margin-left: 5%;
margin-right: 2%;
}

</style>

</head>

<body>

<!– Carré bleu « plan réseau » –>
<table style= »margin-bottom: 2%; background-color: #81BEF7; width:190px;
border: 1px solid grey; border-radius: 1px; »>
<tr>
<td style= »text-align: center; »>Plan réseau</td>
</tr>
</table>

<!– Le code du menu (liens) –>
<ul id= »sous_menu »>
<li>
<a href= »# » onclick= »afficherImage(‘images/vueglob.bmp’) »>Vue Globale</a></a>
</li>
<li>
<a href= »# » onclick= »afficherImage(‘images/ipsec.bmp’) »>Ipsec</a>
</li>
<li>
<a href= »# » onclick= »afficherImage(‘images/ponteveque.bmp’) »>Pont Evêque</a></a>
</li>
<li>
<a href= »# » onclick= »afficherImage(‘images/brignais.bmp’) »>Brignais</a>
</li>
<li>
<a href= »# » onclick= »afficherImage(‘images/neuchatel.bmp’) »>Neuchatel</a>
</li>
<li>
<a href= »# » onclick= »afficherImage(‘images/lengerich.bmp’) »>Lengerich</a>
</li>
<li>
<a href= »# » onclick= »afficherImage(‘images/shanghai.bmp’) »>Shanghai</a>
</li>
<li>
<a href= »# » onclick= »afficherImage(‘images/reseauentier.bmp’) »>Tout le réseau</a>
</li>
<li>
<a href= »# »> – </a>
</li>
<li>
<a href= »# » onclick= »afficherImage(‘images/nanterrelemele.bmp’) »>Nanterre – LeMele</a>
</li>
<li>
<a href= »# »> – </a>
</li>
<li>
<a href= »# » onclick= »afficherImage(‘images/activedirectory.bmp’) »> Active Directory </a>
</li>
</ul>

<!– L’image qui sera affichée –>
<img id= »imageMenu »></img>

</body>
<script>

function afficherImage(image)
{
//Met à jour l’attribut src de la balise img pour lui donner le nouveau chemin de l’image à afficher
document.getElementById(« imageMenu »).src = image;
}

</script>

</html>

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Nuage de Tags

%d blogueurs aiment cette page :