 |
Façon « débrouille » de faire un site avec « dreamweaver » ***** Avant toute chose préparez un dossier au nom du site. Puis vous créerez des sous dossiesr pour chaque page du site. dans lequels vous placerez TOUT… images… gifs…tuiles de fond de page.. bloc note. (pour noter la taille, le choix de police.. la couleur..) Au fur et à mesure du montage des pages vous irez chercher le "matériel" dans la page pour laquelle vous travaillez, il faut que la source soit la même. En revanche, j'ai préféré enregistrer les différentes page htlm dans le dossier principal. Trois affichages possibles Création…comme son nom l’indique vous ne verrez que la création. Code et Création…L'écran est divisé en 2 parties : Une partie code..Une partie Création Pratique pour vérifier l’emplacement des éléments.. placez le curseur sur un élément dans la page, et vous verrez exactement où il se situe dans l’espace code.. Code… Il n'y a que les codes.. pratique pour repérer une erreur ou faire un changement…. *** Pour se simplifier les manipulations on va créer une page type. que l'on renomera à chaque fois. Il suffira ensuite d'adapter les couleurs de la scrollbar, du fond de page et éventuellement ajouter un arrière-plan. Fichier – nouveau – cochez « page de base » et en bas à droite « créer » Enregistrez de suite - Fichier enregistrer sous : modèle.htm allez dans "affichage - cochez "code" et supprimer tout ce qui ce trouve ici. Copiez à la place ce petit script. <TITLE></TITLE> < META name="description" content=""> < META name="keywords" content=""> < META name="generator" content="CuteHTML">
</HEAD> <!--Code generated by Cool Web Scrollbars from Harmony Hollow Software--> <!--http://www.harmonyhollow.net--> <STYLE type="text/css"> <!-- BODY { scrollbar-face-color:# FEF7CB; scrollbar-highlight-color:#A32300; scrollbar-3dlight-color:#A32300; scrollbar-darkshadow-color:#A32300; scrollbar-shadow-color:#A32300; scrollbar-arrow-color:#A32300; scrollbar-track-color:# FEF7CB; *** Pour ne pas commettre d'erreur - Fermez tout. Il est fortement recommandé de faire une copie de cette page que vous aller appeler, par exemple " modèle1.htm" *** On va faire la 1ere page du site. Ouvrez à nouveau cette page "modele.htm" Enregistrer sous "index.htm" (La 1ere page du site doit impérativement se nommer « index.htm ») Allez dans "Modifier" - "Propriété de la page" A vous de faire vos choix de police, couleurs etc...
Affichage - code - repérez les codes couleurs de la scrollar (ascenceur de droite)
A vous de les assortir à l'ensemble de votre page. **** A chaque fois que vous voudrez créer une page il faudra ouvir la page "modèle.htm" l'enregistrer sous un nom qui vous permettra de la reconnaitre vous pouvez les appeler tintin.htm, .toto.htm, comme vous voulez mais attention ..pas de chiffre, pas d'accent...et pas d’espace On ne met pas « les enfants » mais « lesenfants » et toujours .htm Une fois votre page enregistrée vous pouvez commencer à travailler. Enregistrez souvent cela évite les mauvaises surprises.
Vous pouvez vérifier l’effet que donnera votre page en allant à Fichier – aperçu dans le navigateur. Vous pouvez maintenant ajouter une bannière pour le titre, une image…. Insertion – image – vous les avez classées dans le dossier du site….. dans le sous dossier "index" pour cette page ci. Pour la position de l’image on va à Texte - aligner – et centrer, gauche, droite etc. Pour le texte, vous avez en principe, fait votre choix au début dans « modifier – propriétés de la page » Vous pouvez encore changer, vous sélectionnez le texte et modifier – propriétés de la sélection. Pour les images, j ’ai eu un mal fou à les placer cote à cote séparées par un espace bien précis. Le langage HTLM n'accepte qu'un espace … Il y a bien entendu la possibilité d'en créer d'autres.. Sélectionnez la 1ere image - modifier - propiétés de la sélection Dans l'onglet "espace H" mettez la valeur que vous voulez, puis faites"entrée" insérez ensuite la 2eme image.
une autre astuce … créer dans psp une image transparente de la largeur égale à l’écart que vous désirez.. enregistrez en gif ..et l’intercalez entre vos images…. L'autre façon facile est d'ajouter un calque - Insertion - Objet de mise en forme - Calque.
Vous aurez ceci insérez l'image dans le calque et déplacez où vous voulez
Enregistrez souvent.. Les liens Vous voulez faire un lien..c'est à dire un passage à la page suivante…c’est un jeu d’enfant.. Vous avez ..admettons, mis un gif ou un mot,
j'ai décidé que cette flèche serait le départ du lien.. clic droit sur le gif – créer un lien - cette fenêtre s’ouvre – allez chercher la page vers laquelle vous voulez que le lien vous amène.
le lien est crée….re clic droit sur la flèche qui nous a servi à créer le lien... ….ouvrir la page liée…. Vous allez ainsi vérifier que le lien fonctionne.. Enregistrez il faut penser que lorque l'on est sur une page, il faut en sortir… on crée de la même façon un autre lien qui …souvent ramène à la page principale… Pour créer un lien vers un autre site : Vous sélectionner le mot ou l'image du départ du lien, puis Modifier - Propriétés de la sélection
Vous notez ici les renseignements comme ceci
Pour un téléchargement il faut tout d'abord compresser le fichier : clic droit sur le fichier.. puis "envoyer vers"...puis "dossier compressé".
Vous ajoutez ce zip dans le dossier du site Et vous faites le lien de la même façon que pour les autres cas. **** Passons à l’insertion d’un tableau.. Insertion tableau
Voila un tableau une colonne..
avec les poignées vous pourrez modifier la largeur du tableau .. on ne s’occupe pas de la hauteur.. elle va se créer par des "entrées" successives dans l'espace du tableau. Pour le positionner sur la page vous faites « texte – aligner »..et votre choix Pour aménager le centre du tableau clic droit à l'intérieur du tableau
Propriétés vous aurez ceci….à vous de faire vos choix
Pour l'encadrement du tableau...sélectionnez le tableau..clic droit..propriétés
Pour Créer un tableau à plusieurs colonnes.
On peut avoir plusieurs cellules à l'interieur du tableau
On peut les coloriser indiférement comme expliqué ci dessus .. Vous pouvez comme cela créer des pages autant que vous avez d’espace libre.. Il est possible aussi d'ajouter des colonnes et des lignes à un tableau déjà enregistré. Il suffit de se positionner dans une cellule du tableau et de faire :
******* Sur la page index il faut insérer les "métabalises" Ouvrir la page « index » affichage – afficher les codes Copier/coller ces codes entre les balises <head> et </head> remplacez par vos références <head> <TITLE>.......le nom du site................... </TITLE> <META NAME="keywords" CONTENT="ICI LES ACTIVITES DU SITE."> <META NAME="description" CONTENT="DESCRIPTION DU SITE"> <META NAME="robots" CONTENT="index"> <META HTTP-EQUIV="Content-language" CONTENT="fr"> <META NAME="REVISIT-AFTER" CONTENT="7 days"> <META NAME="distribution" CONTENT="Global"> <meta http-equiv=Content-Type content="text/html; charset=windows-1252"> <META NAME="author" CONTENT="VOTRE NOM"> </head> Ces balises servent à référencer votre site dans les moteurs de recherche, vous pouvez les insérer, à chaque page si vous avez des thèmes différents. Maintenant que vous avez bien avancé vous allez publier… Vous avez un espace réservé sur x ou y…. Il y a 2 façons de transférer votre site : 1ere Passer par "Favoris réseau" Allez sur votre poste de travail Dans la barre de navigation taper l’adresse de votre hébergeur Soit pour moi : ftp://ftpperso.free.fr/
Faire « entrée » Apparaît ce message faire « ok »
Sur la page blanche qui s’ouvre faire un clic droit et choisir
Dans cette fenêtre entrez les identifiants - Ouvrez une cession
Il ne vous reste plus qu'à copier/coller les différents éléments de votre dossier site sur cette page.
2eme Le FTP... File Transfert Protocol. (Protocole Internet par lequel on peut envoyer ou recevoir des fichiers.) J’ai pris Filezilla.. C’est gratuit et tenez-vous bien …en français… Filezilla est installé ?? Ouvrir – fichier – gestionnaire des sites...vous avez ça… à vous de jouer
Ouvrir à nouveau filezilla – fichier – reconnecter
et voilà la nouvelle fenêtre
Pour passer les éléments de la gauche vers la droite vous pouvez soit, faire un "glisser/déposer", soit "double cliquer" sur l'élément à héberger. Attention à ne pas oublier le moindre élément... les dossiers doivent être transférés entier ainsi on ne risque pas d'en perdre. Si vous n’importez pas tout vous aurez les emplacements vides avec des croix rouges !!!
|
|---|
