Maintenant, l'ensemble du site se compose d'une seule page - indice. Mais votre site ne se composera pas d'une seule page, n'est-ce pas ? Passons ensuite à la création du reste des pages.

Il est entendu que vous devriez déjà avoir en tête une image du contenu approximatif du reste des pages de votre site. Si vous ne l'avez pas encore, je vous conseille de construire cette image dans votre tête, puisqu'en la poursuite des travaux il va beaucoup aider.

En général, avez-vous les noms des sections et des sous-sections ? Il est logique de commencer par leur création.

Commencez par ouvrir la page d'index dans Dreamweaver. Maintenant, enregistrez-le en exécutant la commande Fichier (Fichier) | Enregistrer sous (Enregistrer sous), mais sous un nom différent. Supposons que votre deuxième page s'appelle États(des articles). Enregistrez donc la page d'index en tant qu'états.

Vous avez maintenant deux pages jumelles identiques avec des noms différents. Mais pourquoi avez-vous besoin de deux pages complètement identiques sur le site, quoique sous des noms différents ? Je pense absolument rien.

Par conséquent, sans fermer Dreamweaver, modifiez votre nouvelle page, que j'appellerai par défaut États. Insérez toutes les images, écrivez le texte... Concrétisez vos idées sur cette page. Bien sûr, au début, il peut n'y avoir que quelques paragraphes, mais ce n'est que la première option ?

Prêt? Ensuite on va à Propriétés de la page. Vous souvenez-vous encore comment c'est fait ? Commande de menus Modifier | Propriétés de la page ou raccourci clavier +. Suivant dans la liste à gauche Catégorie (Catégorie) sélectionnez l'élément Titre/Encodage.

à côté de l'inscription Titreécrivez le titre de votre page. Dans ce cas, les articles. Vous pouvez aussi écrire « le nom de votre site > articles » ou inversement « articles > le nom de votre site ».

D'ailleurs, pour page d'accueil avez-vous un titre? Qu'est-ce qu'un titre de toute façon? C'est ce qui s'affiche tout en haut de la fenêtre de votre navigateur lorsque vous consultez une page.

Ça y est, la deuxième page est créée. Avant de passer à la création de toutes les autres pages, je vais vous montrer comment connecter deux pages déjà créées (index et états) avec des hyperliens.

En tant qu'internaute, vous avez certainement rencontré plus d'une fois des liens. Tout Internet en est fait ! Il est difficile d'imaginer son existence sans les liens que l'on trouve sur presque toutes les pages.

Vos visiteurs devront également se déplacer d'une manière ou d'une autre d'une section à l'autre. Et comment pouvez-vous le faire sans liens?

Vous pouvez maintenant exécuter la commande de menu Modifier | Créer un lien (Créer un lien)(une boîte de dialogue s'ouvrira) ou accédez à notre panneau Propriétés préféré.
Si vous avez choisi la deuxième option, faites attention au champ Lien (Lien). Sur la droite, nous trouvons un bouton avec une image de dossier Rechercher un fichier et cliquez dessus.

Une boîte de dialogue s'ouvrira Choisir le dossier, où vous devez sélectionner le fichier auquel le lien mènera.

Cliquez sur OK, enregistrez la page et ouvrez-la dans un navigateur. Vérifions comment le lien fonctionne. Si vous avez tout fait correctement, après avoir cliqué, vous serez redirigé vers page souhaitée. Dans ce cas, de la page principale à la page Articles. C'est comme ça? Donc, vous avez terminé la tâche avec succès !

Les hyperliens peuvent également être créés à partir de rien, sans avoir préalablement sélectionné un mot ou une phrase. Ouvrir un onglet Commun barre d'outils Insérer. Le premier bouton est Lien hypertexte (lien hypertexte).

Cliquer dessus ouvre une boîte de dialogue Lien hypertexte (lien hypertexte).

Champ Lien (Lien) vous le savez déjà, cela devrait être l'URL de la page vers laquelle vous créez un lien. En cliquant sur le bouton à droite Parcourir avec l'image du dossier, une fenêtre s'ouvrira Choisir le dossier.

Attention au champ de saisie Titre. Ici, vous pouvez saisir un texte explicatif qui s'affichera lorsque vous survolerez le lien. Ce champ est assez volumineux, il est possible de saisir plusieurs phrases.

Pour modifier l'adresse du lien créé, vous pouvez la sélectionner et corriger la valeur saisie dans le champ Lien panneaux Propriétés. Ou exécutez la commande de menu Modifier | Changer le lien qui ouvre une fenêtre Choisir le dossier, dans lequel vous devez sélectionner un nouveau fichier contenant la page requise.

En plus des liens texte simples, vous pouvez également créer un lien e-mail dans Dreamweaver. Un lien de messagerie est un lien hypertexte qui crée une transition non pas vers une autre page ou un autre site, mais vers l'adresse spécifiée E-mail. En règle générale, ces liens sont utilisés sur les sites Web pour créer retour d'information avec les visiteurs.

Les deux méthodes ouvrent une boîte de dialogue Lien e-mail (Lien e-mail).

Cliquez sur OK et voyez ce qui se passe.

Sur la page, à l'endroit où se trouvait le curseur de texte, le texte saisi dans le champ Texte apparaîtra. Cela ressemblera à un lien texte normal. Ouvrez la page dans un navigateur et cliquez sur le lien. Une fenêtre de programme de messagerie standard devrait s'ouvrir.

Pour créer des modèles de page dans Dreamweaver, vous devez utiliser le menu Fichier -> Enregistrer comme modèle. Commençons à les créer. Commençons par créer un modèle pour la page principale du futur site. Pour ce faire, sélectionnez le signet avec le fichier index.html ouvert dans Dreamweaver. Ensuite, dans le menu principal du programme, sélectionnez Fichier -> Enregistrer comme modèle .. (enregistrer en tant que modèle). À la suite de ces actions, le panneau illustré dans la figure ci-dessous apparaîtra.

Ensuite, il ne reste plus qu'à appuyer sur le bouton Enregistrer, un panneau apparaîtra avec la question "Mettre à jour les liens?" auquel vous devez répondre "Oui". À la suite de cela, un autre dossier appelé "Modèles" apparaîtra dans le dossier avec notre projet, et dans celui-ci un fichier appelé index.dwt. Il s'agit du véritable modèle de la page principale du site. Comme ce fichier est déjà ouvert dans la fenêtre de travail de Dreamweaver, vous pouvez visualiser son code et découvrir en quoi il diffère du code du fichier index.html. Après tout, extérieurement, ces fichiers ouverts dans le navigateur ne sont pas différents. Alors, quel est l'objectif ? Et le truc c'est qu'entre les balises et il y a des inscriptions surlignées en vert.

Ce sont les régions dites modifiables. Qu'est-ce que ça veut dire? Cela signifie que si la page du site est liée à fichier donné modèle, les modifications de la page ne peuvent être effectuées qu'à ces emplacements. Le reste d'une telle page sera fermé pour modification.

Ici, nous avons terminé notre troisième site Web. Tout fonctionne, toutes les pages se chargent normalement et s'affichent dans un navigateur Web. Il semblerait qu'il n'y ait pas lieu de s'inquiéter.

Non, mais seulement pour le moment.

Imaginons une telle situation. Nous avons soudainement décidé d'ajouter une nouvelle page à notre site. Pour ce faire, nous devons changer la barre de navigation dans toutes les pages, et pour ce faire, nous devrons ouvrir chacune d'elles dans une fenêtre de document, ajouter un lien et enregistrer la page. Notre site est de petite taille et nous ferons le travail assez rapidement. Et s'il était génial ?

Bien sûr, nous pouvons utiliser les outils intégrés de Dreamweaver. Par exemple, appelez une boîte de dialogue Trouver et remplacer- est extrêmement puissant. (Voir le chapitre 2 pour les capacités de recherche et de remplacement de sous-chaînes.) Ou démarrez le remplacement de lien hypertexte en appelant item Modifier le lien sur tout le site menu Placer panneaux Placer(voir chapitre 6). Dans de nombreux cas, cela nous aidera à remplacer rapidement des fragments entiers du contenu d'une page ou de son code HTML. La bibliothèque de ressources et d'éléments, également décrite au chapitre 6, peut nous être d'une grande aide.

Mais que se passe-t-il si nous voulons apporter des modifications importantes, par exemple, changer radicalement la structure de la table de balisage ? Il est peu probable que la recherche et le remplacement nous aident, et encore plus le remplacement automatique des hyperliens. Même les actifs avec la bibliothèque ne nous aideront pas dans ce cas. Faut-il vraiment refaire toutes les pages ?!

Si vous ne travailliez pas dans Dreamweaver, c'est probablement ce que vous auriez à faire. Mais nous avons eu de la chance. Dreamweaver prend en charge un outil aussi puissant que les modèles. Ils ont déjà été mentionnés au chapitre 3. Nous allons maintenant les examiner plus en détail.

Goûter- c'est une sorte d'échantillon, le "squelette" d'une page Web, contenant des éléments communs à toutes les pages. Lorsque vous créez une nouvelle page basée sur un modèle, il vous suffit de saisir le contenu unique de cette page aux bons endroits et de l'enregistrer. Vous pouvez modifier le modèle ultérieurement et Dreamweaver mettra à jour toutes les pages basées sur celui-ci.

En ce sens, les modèles sont similaires aux éléments de bibliothèque (voir chapitre 6). La différence est que le modèle est vierge pour toute la page et que la bibliothèque ne stocke que ses éléments individuels. Cependant, les développeurs de Dreamweaver pensent que les modèles sont ce qui se rapproche le plus des actifs (voir chapitre 6) et ont placé une liste de modèles dans le des atouts.

Initialement, le modèle ne peut pas être modifié, c'est-à-dire que lorsque vous créez une page basée sur celui-ci, vous ne pouvez placer du contenu que dans des endroits spécialement désignés pour cela - des zones modifiables. Vous ne pouvez pas modifier les éléments du modèle lui-même, car ce sont des zones invariables. Si vous souhaitez corriger quelque chose, vous devrez ouvrir le modèle lui-même dans la fenêtre du document. De cette manière, Dreamweaver vous évite de modifier par erreur le modèle et, par conséquent, de déformer les pages Web créées à partir de celui-ci.

Nous pouvons dire que les modèles sont des pages Web ordinaires. Lors de l'édition, vous pouvez traiter les modèles comme des pages Web normales et utiliser les mêmes outils. Vous pouvez également définir les paramètres de la page qui sera créée à partir de ce modèle (titre, couleur de fond, texte et hyperliens). Cependant, Dreamweaver utilise un grand nombre de ses propres balises et attributs lors de la création du code HTML pour les modèles, il n'est donc pas tout à fait correct de dire qu'un modèle est une page Web ordinaire.

Les modèles sont enregistrés en tant que fichiers .dwt dans le dossier Modèles situé dans le dossier racine de la copie locale du site. Il en découle que les templates font partie intégrante de votre site, au même titre qu'une bibliothèque. Pour utiliser un modèle sur un autre site, vous devrez le copier sur ce site en utilisant signifie standard Dreamweaver (voir Chapitre 6). Plusieurs modèles peuvent être utilisés sur un même site.

Les modèles vous seront plus utiles si vous créez des pages basées sur une conception de tableau. Ces pages contiennent presque toujours beaucoup d'éléments répétitifs, qui sont extrêmement longs à mettre à jour manuellement. Mais vous pouvez également préparer des modèles pour les pages "normales". Cela peut être nécessaire, par exemple, si vous créez des pages avec le même design pour un grand site d'entreprise.

Dreamweaver est livré avec un certain nombre de modèles créés par des concepteurs Web professionnels. Vous pouvez utiliser ces modèles pour créer vos propres pages ; comment faire cela a été couvert au chapitre 3. Essayez-le - vous trouverez peut-être quelque chose qui fonctionne pour vous.

Nous avons préparé la page pour en faire un modèle dans le programme pour Dreamweaver.

Rappelons un peu ce que j'ai déjà écrit sur le modèle dans Dreamweaver. Lorsque vous ajoutez le nième nombre de pages au modèle créé, puis que vous le modifiez, toutes les pages changeront après le modèle !

Le seul endroit qui ne changera pas est la zone modifiable ! Il peut y avoir du texte original ou toute autre information unique.

Comment créer une zone modifiable dans Dreamweaver.

Le nombre de zones modifiables est illimité et vous pouvez définir ces zones n'importe où.

Nous allons créer une zone modifiable dans la zone où nous aurons le texte principal !

Ouvrir préparé dans Dreamweaver.

Si vous n'avez pas de texte, passez simplement votre souris sur l'endroit où vous aurez une zone modifiable. J'ai du texte, je le sélectionne. Appuyez sur , - suivant - modèles - une nouvelle zone modifiable.

Dans la nouvelle fenêtre, nommez votre zone modifiable. Je n'utilise pas de texte pour cela, mais mets simplement un nombre. Pour le texte sur tous les sites, le nombre est 2. Et pour le titre, je crée une zone éditable séparée n° 1 - pourquoi ? Je ne sais pas, ça s'est passé comme ça au début.

En principe, le titre et le texte peuvent être créés dans une seule zone modifiable !

Voyons ce que nous avons.

Ici, nous voyons qu'il y a du texte dans la zone éditable que nous avons créée n° 2. Cette zone éditable n'est visible que dans le programme, elle n'est pas visible dans le navigateur !

Lorsque vous enregistrez le premier modèle, un dossier de stockage des modèles est automatiquement créé, qui s'appellera Modèles.

Une nouvelle fenêtre s'ouvre où :

Site-site

Modèles existants - J'ai déjà des modèles, et vous en avez, s'il s'agit du premier modèle, la fenêtre sera vide.

Description - toujours laissé vide.

Comment nommer un modèle dans Dreamweaver ?

Pourquoi une telle question s'est-elle posée ? Si vous allez créer un site sur divers sujets, ou si vous aurez des sous-titres différents, alors les modèles seront probablement différents. J'ai beaucoup de thèmes - donc beaucoup de modèles. Chaque modèle diffère de son homologue dans la ligne du haut, la première ligne de la page indiquant où vous vous trouvez.

Chacun des modèles doit être nommé d'une manière ou d'une autre. Le nom du modèle sera affiché dans le code. Il est difficile de dire comment ce nom affectera l'optimisation de votre page, mais il me semble que si nous nommons le modèle en fonction du sujet que vous allez développer, alors ce sera mieux que de nommer le modèle avec un numéro ou un mot sans visage.

Prenons un exemple, si vous appuyez maintenant sur la combinaison de touches ctrl + U, vous verrez le code.

C'est la deuxième ligne, et nous voyons que notre modèle s'appelle - "Tout sur Dreamweaver.dwt"