Base d'un site perso

[YannH76]

Pour l'élaboration de ce petit tutoriel servant pour la conception de la base d'un site internet, nous allons nous servir du logiciel Dreamweaver de Macromedia (mais cela peut aussi s'appliquer aux autres éditerus HTML, mais en passant par d'autre menus).

Avant de commencer :
Il faut avoir une petite idée de son site à la base. Certains passe directement à l'élaboration sur le logiciel, tandis que d'autres préfèrent passer par la phase papier.
Sur la feuille, vous pouvez déjà dessiner un peu le style que vous désirez, et dans l'exemple de ce tutoriel, nous allon partir sur une base d'un site comportant 2 cadres (aussi appelé "frame"), dont celui de gauche contiendra le menu, et la page de droite affichera les différentes pages.

Dreamweaver :
Voici déjà l'essentiel du logiciel

Tous les éléments nécessaire pour la conception d'un site web se trouve ici !
L'essentiel est que le logiciel est en Français (beaucoup plus pratique qu'une interface Anglais), et pour connaître la fonction d'une icône, il suffit comme presque tous les logiciels, de se positionner sur celle-ci et une "info-bulle" vous renseignera sur la fonction.

Pour commencer, nous allons ouvrir un nouveau document
--> Fichier --> Nouveau --> Page de base --> HTML --> Créer
On va obtenir une page blanche qui va servir de point de départ.
On va tout de suite renseigner les informations de cette page, afin de ne pas y revenir par la suite :
--> Modifier --> Propriétés de la page

En titre, vous indiquez le nom de votre site et OK (c'est aussi aussi que vous pouvez paramétrer la couleur général du texte de votre site, insérer une image de fond, choisir la couleur de fond de votre page...)

On va passer maintenant passer par l'onglet "cadres" afin de créer nos 2 cadres

Dans le cas de notre site en exemple, c'est le modèle complètement à droite de la barre de menu qui nous intéresse :

Il suffit de cliquer dessus pour que les 2 cadres se positionnent automatiquement dans la page de travail.
On se retrouve donc maintenant avec nos 2 pages HTML dans une page HTML !! (pas compliqué!!)
Ce qui donne cela au final:

Pour mieux se repérer, j'ai déjà écrit "Menu" et "Page Principale".
Pour modifier la largeur de la colonne, on peut le faire de façon visuel en se positionnant sur la barre de séparation (encadré en rouge) :

ou bien, de façon plus précise en indiquant la largeur en pixel, dans la fenêtre d'en bas :

On va se positionner sur la cadre où "Menu" est écrit et sauvegarder cette page en passant par --> Fichier --> Enregistrer le cadre sous... --> menu.htm
On opère de la même façon pour l'autre cadre, on se met dessus --> Fichier --> Enregistrer le cadre sous... --> edito.htm
Pour éviter toute erreur dans la gestion des différents cadres, on va sauvegarder tout de suite cet ensemble. Donc il faut cliquer sur la grosse bordure (comme indiquer en rouge) :

Et ensuite, lorsque l'on va opérer la sauvegarde, on aura un nouvel intitulé (fort logique même le nom) --> Fichier --> Enregistrer le jeu de cadres sous --> index.html
Et voilà, on a déjà la base du site !

On va maintenant faire un lien de base pour monter la procédure, qui sera toujours la même selon la complexité du site !

Création d'un lien :
Toujours sur la base de notre exemple, nous allons créer un lien qui pointera vers une page du site.
Donc, on recrée une page vierge avec une couleur bleu en fond.

Et on met un texte en rouge

que l'on sauvegardera sous le nom "page_test.htm"

On ouvre de nouveau notre page "index.html" et on se met dans le cadre de gauche (Menu) et on écrit "Lien 1", texte que l'on va sélectionner avec la souris comme sur la capture :

Ensuite, on va aller dans le panneau de propriétés (tout en bas de la page)
et cliquer sur le petit dossier en face de "Lien" afin d'ouvrir l'explorateur, et de sélectionner notre fichier "page_test.htm"

et de façon a obtenir cela

A ce stade, le lien est créer, mais il ne s'afichera pas à l'endroit que l'on souhaite, car par défaut, il va s'afficher dans la même fenêtre où se trouve le lien !! Or, on veut qu'il s'affiche dans la partie droite du site, donc dans la partie propriété, on va sélectionner "Mainframe" dans l'option cible !

De cette façon, lorsque va cliquer sur le lien, il s'affichera dans la partie gauche !


Voilà déjà les bases pour concevoir un site perso simple, et fonctionnel !
_________________
DVD : 1107 / HD-DVD : 74 / Blu-ray : 176

[Snake Plissken ©]

bravo yannh,je garde l'adresse du post.super bien vulgarisé,meme anakin devrait comprendre
_________________

You gonna kill me Snake?I'm too tired,maybe later!

[YannH76]

Merci Snake, car ce n'est pas du tout évident de trouver les phrases par moment, et j'ais essayer de faire simple, sans trop rentrer dans les détails pour le début.
Mais ce post va évoluer au fur et à mesure, et j'y posterais aussi quelques petits logos qui pourrait peaufiner certaines pages de sites...
_________________
DVD : 1107 / HD-DVD : 74 / Blu-ray : 176

[Mikes]

Si je vois que l'interface principale de Dreamweaver a bien changée, les fenêtre et autres menus sont les même qu'à la version 2

Sinon par ex j'ai réalisé ça avec Dreamweaver (seule la partie photo est à jour )
_________________

TV Sony 40W4000 / Blu-ray Sony S550 / PS4 / PS3 / XBox360S / Wii / Ampli Onkyo TX-NR515 / Numericable | Chambre: TV Sony 26V4500 et PS3 Slim

[YannH76]

Hé oui, on ne change pas une formule qui marche !
La différence entre Dreamweaver 4 et la version MX se situe surtout au niveau de l'interface graphique, et j'ai eu du mal au début avec la MX, mais maintenant, je trouve qu'elle beaucoup plus fonctionnel, et sur toute la gamme de logiciel Macromedia, l'interface est la même.
_________________
DVD : 1107 / HD-DVD : 74 / Blu-ray : 176

[Mikes]

Et sinon il parait que cette version MX permet de faire du php?

C'est vraiment vrai, ou mieux vaut ne pas compter dessus?
_________________

TV Sony 40W4000 / Blu-ray Sony S550 / PS4 / PS3 / XBox360S / Wii / Ampli Onkyo TX-NR515 / Numericable | Chambre: TV Sony 26V4500 et PS3 Slim

[YannH76]

Oulla, je ne suis qu'un amateur dans l'utilisation de Dreamweaver, et je n'ais presque aucune connaissance du PHP, mais je sais qu'il est possible de sauvegarder directement en extension .php !
Mais je ne pourrais pas t'en dire plus sur ces capacités...
_________________
DVD : 1107 / HD-DVD : 74 / Blu-ray : 176

[loulaipoupi]

Sympa ton tuto YannH76
c'est cool d'en avoir fait un pour tout le monde
_________________
SONY KDL-40W4500 - Sony BDP-S470B - Pioneer DV-585A - PS3 - Denon AVR-2804 - JMLAB chorus Technic

[YannH76]

Cela pourra peut-être pousser certaines personnes à se lancer aussi dans l'aventure de la création d'un site perso !

C'est aussi l'endroit où les gens pourront poser des questions sur leur problème ou pour une demande d'aide !
_________________
DVD : 1107 / HD-DVD : 74 / Blu-ray : 176

[Bruno77]

Excellente idée. Félicitations : c'est très clair.
Par rapport à la version 6.0, il y a qq changements dans l'interfaçage, mais les fonctionnalités existaient.
Merci.

[anakin®]

J'ai presque rien compris(qu'est ce que j'te disais Yann ),il faut acheter le logiciel dreamweaver?
_________________

[Mikes]

[max zorin]

Chouette, justement le post dont j'avais besoin en ce moment!
Je vais commencer la lecture! Merci Yann!
_________________
And did we tell you the name of the game, boy?

[max zorin]

Bon, bah c'est bon, demain je recommence mon site en suivant ta procédure Yann.
_________________
And did we tell you the name of the game, boy?

[anakin®]

[max zorin]

J'ai installé le logiciel sharware qui est valable 30 jours. Il suffit de faire vite et de réaliser son site sous 30 jours.
_________________
And did we tell you the name of the game, boy?

[anakin®]

Oh le malin,il est téléchargeable où et c'est facile à installer?
Et pour les mises à jour par la suite,tu peux la retelecharger en shareware?
_________________

[ViperTheSniper]

[anakin®]

[ViperTheSniper]