Comment sélectionner les plats en première page. Menu déroulant simple. Création d'un menu déroulant simple

Dans les chapitres précédents, nous avons envisagé de créer un site contenant une page. Mais, en règle générale, un site se compose de plusieurs pages. Pour ajouter des pages nouvelles ou créées précédemment au site, utilisez les commandes de menu, les combinaisons de touches et le bouton Nouveau de la barre d'outils standard.

Pour vous déplacer dans une page Web, comme dans n'importe quel traitement de texte, vous pouvez utiliser les barres de défilement, les touches fléchées de votre clavier et les raccourcis clavier. Ainsi, par exemple, pour aller en haut de la page, utilisez la combinaison de touches +, à la fin de la page - +. Clés ET Vous permet de déplacer respectivement un écran vers le haut ou vers le bas.

Le déplacement entre les pages du site s'effectue à l'aide de liens hypertextes, de signets et de barres de liens qui s'y trouvent. Vous apprendrez ce que sont les hyperliens et de quels types ils sont, ce qu'est une barre de liens et ce que vous devez faire pour la créer en lisant ce chapitre.

Fenêtre de dialogue Modèles de sites Web(Modèles de sites Web), qui s'ouvre lors de la création d'un nouveau site, contient des modèles suggérant de créer un site vierge ou d'une page. Vous ajoutez vous-même le nombre de pages nécessaires pour publier vous-même des informations sur le site. Il peut s'agir de nouvelles pages sur lesquelles vous publierez ultérieurement des informations ou de pages Web que vous avez créées précédemment à l'aide de FrontPage ou d'un autre logiciel.

Commentaire

Les questions d'importation de fichiers ne seront pas abordées dans cette leçon, puisqu'une leçon distincte y sera consacrée.

Il existe plusieurs façons d'ajouter une nouvelle page à votre site. Vous pouvez utiliser n'importe laquelle d'entre elles en fonction de la méthode qui vous semble la plus pratique, ainsi que du modèle que vous souhaitez utiliser lors de la création d'une nouvelle page. Pour ajouter une nouvelle page à votre site, vous pouvez utiliser :

  • bouton Créer(Nouveau) sur la barre d'outils standard
  • Équipe Créer(Nouveau) menu Déposer(Fichier), qui place un panneau dans la fenêtre du programme FrontPage Créer une page Web ou un site(Nouvelle page ou site Web)
  • Combinaison de touches +

Lorsque vous utilisez une combinaison de touches ou appuyez sur un bouton Créer(Nouveau) sur la barre d'outils standard, une page vierge créée à l'aide du modèle est ajoutée au site par défaut Page régulière(Page normale).

Dans le cas où lors de la création d'une nouvelle page, vous souhaitez utiliser un autre modèle, vous devez ouvrir la boîte de dialogue Modèles de pages(Modèles de page) (Fig. 16.1), contenant une liste de modèles de page proposés par le programme FrontPage. Pour ouvrir cette fenêtre, effectuez l'une des opérations suivantes :

  • Dans les boutons du menu Créer(Nouvelle) commande de sélection de barre d'outils standard Page(Page)
  • au menu Déposer(Fichier) commande de sélection Créer(Nouveau), puis depuis le sous-menu qui s'ouvre - l'option Page ou site Web(Page ou Web). Un panneau apparaît dans la fenêtre du programme FrontPage Créer une page Web ou un site(Nouvelle page ou Web), sur laquelle sélectionner la commande Modèles de pages(Modèles de pages)

Riz. 16.1. Boîte de dialogue de sélection d'un modèle pour la page à créer

Fenêtre de dialogue Modèles de pages(Modèles de page) contient une liste de modèles. Sélectionnez le modèle que vous souhaitez utiliser lors de la création d'une nouvelle page. Zone d'utilisation Échantillon(Aperçu), voyez à quoi cela ressemblera. Cliquez sur le bouton D'ACCORD pour fermer la fenêtre et placer le modèle de page sur le site.

Suite à l'ajout d'une nouvelle page au site, une page vierge avec le nom newjage_l.htm(Fig. 16.2). Ce nom indique que cette page est la première que vous créez depuis le démarrage du programme. Au fur et à mesure que vous créez des pages suivantes, FrontPage leur attribue des noms avec des numéros croissants : new_page_2.htm, newjage_3.htm etc.

Riz. 16.2. Une nouvelle page a été ajoutée au site, créée à l'aide du modèle "Page régulière".

Menu déroulant horizontal utilisé pour organiser la structure de navigation du site. Le nombre optimal de niveaux d'imbrication est de un ou deux. Moins il y a de niveaux de pièces jointes, plus il est facile pour un visiteur du site de trouver les informations dont il a besoin. Comment créer un menu horizontal régulier est décrit en détail dans.

Comment créer un menu déroulant horizontal

1. Balisage HTML et styles de base pour un menu déroulant avec un niveau d'imbrication

Le balisage HTML d'un menu déroulant horizontal diffère d'un menu standard en ce sens qu'il renvoie à l'élément de liste souhaité.

  • une liste imbriquée est ajoutée
      ou<оl> .

      Pour positionner le sous-menu par rapport au menu principal, les styles suivants sont déclarés :
      — pour un élément de liste dans lequel une liste déroulante est imbriquée : li (position : relative;) ;
      — pour le menu déroulant ul (position : absolue ;) , ainsi que les valeurs de gauche et du haut.

      Pour plus de clarté et de facilité de formatage, ajoutons le menu principal de la classe au menu principal et le sous-menu au menu déroulant.

      Il existe plusieurs manières de masquer un menu déroulant :
      1) affichage : aucun ;
      2) visibilité : cachée ;
      3) opacité : 0 ;
      4) transformation : scaleY(0);
      5) en utilisant la bibliothèque jQuery.

      Méthode 1. (affichage : aucun ;)

      Le menu déroulant est masqué à l'aide de .submenu (display: none;) , au survol, il est affiché à l'aide de .topmenu li:hover .submenu (display: block;) .

      Méthode 2. (visibilité : cachée ;)

      Le menu est masqué à l'aide de .submenu (visibilité : caché ;) et affiché à l'aide de .topmenu li:hover .submenu (visibilité : visible ;) .

      Méthode 3. (opacité : 0 ;)

      Le menu est masqué à l'aide de .submenu (opacité : 0;) et affiché à l'aide de .topmenu li:hover .submenu (opacité : 1;) . Pour éviter que le menu n'apparaisse lorsque vous survolez la zone où il se trouve, ajoutez une visibilité : caché ; , et au survol, changez-le en visibilité: visible; .

      Méthode 4. (transformation : scaleY(0);)

      Le menu est masqué à l'aide de .submenu (transform: scaleY(0);) et affiché à l'aide de .topmenu li:hover .submenu (transform: scaleY(1);) . Étant donné que la transformation de l'élément par défaut se produit à partir du centre, vous devez ajouter for .submenu (transform-origin: 0 0;) , c'est-à-dire du coin supérieur gauche.

      Méthode 5 : Utiliser jQuery

      $(".cinq li ul").hide(); // masque le menu déroulant $(".five li:has(".submenu")").hover(function())( $(".five li ul").stop().fadeToggle(300) ;) /* sélectionnez un élément de liste qui contient un élément avec la classe .submenu et ajoutez-y une fonction de survol qui affiche et masque le menu déroulant */);

      2. Menu déroulant 3D

      Des effets intéressants peuvent être créés à l’aide de transformations CSS3, par exemple en faisant apparaître un menu depuis les profondeurs de l’écran.

      * ( dimensionnement de la boîte : border-box ; ) corps ( marge : 0 ; arrière-plan : dégradé radial (#BFD6E2 1px, rgba(255,255,255,0) 2px) ; taille d'arrière-plan : 10px 10px ; ) nav ul ( style de liste : aucun ; marge : 0 ; remplissage : 0 ; ) nav a ( affichage : bloc ; décoration de texte : aucun ; contour : aucun ; transition : facilité d'entrée-sortie de .4s ; ) .topmenu ( visibilité arrière : caché ; arrière-plan : rgba(255,255,255,.8); ) .topmenu > li ( affichage : bloc en ligne ; position : relative ; ) .topmenu > li > a ( famille de polices : "Exo 2", sans empattement ; hauteur : 70px ; hauteur de ligne : 70 px ; remplissage : 0 30 px ; poids de la police : gras ; couleur : #003559 ; transformation du texte : majuscule ; ) .down:after ( contenu : "\f107" ; marge gauche : 8 px ; famille de polices : FontAwesome; ) .topmenu li a:hover ( couleur : #E6855F ; ) .submenu ( arrière-plan : blanc ; bordure : 2px solide #003559 ; position : absolue ; gauche : 0 ; visibilité : cachée ; opacité : 0 ; z-index : 5 ; largeur : 150 px ; transformation : perspective (600 px) rotateX (-90deg); transformation-origine : 0 % 0 % ; transition : facilité d'entrée-sortie de 0,6 s ; ) .topmenu > li:hover .submenu( visibilité : visible; opacité : 1 ; transformation : perspective(600px) rotateX(0deg); ) .submenu li a ( couleur : #7f7f7f ; taille de police : 13px ; hauteur de ligne : 36px ; remplissage : 0 25px ; famille de police : "Kurale", serif; )

      3. Menu déroulant extensible avec logo

      Dans cet exemple, la section supérieure de la page contient le logo et la navigation sur le site. Le logo peut être une image ou un texte. Le menu déroulant s'étend progressivement sous l'élément supérieur de la liste à l'aide de la fonction de transformation CSS3.

      Logo
      * ( dimensionnement de la boîte : border-box ; ) corps ( marge : 0 ; arrière-plan : #f2f2f2 ; ) en-tête ( arrière-plan : blanc ; alignement du texte : centre ; ) en-tête a ( décoration du texte : aucun ; contour : aucun ; affichage : bloc ; transition : facilité d'entrée-sortie .3s ; ) .logo ( couleur : #D5B45B ; famille de polices : "Playfair Display", serif ; taille de police : 2,5em ; remplissage : 20px 0 ; ) nav ( affichage : table; margin: 0 auto; ) nav ul ( style de liste: aucun; margin: 0; padding: 0; ) .topmenu:after ( content: ""; display: table; clear: les deux; ) .topmenu > li ( largeur : 25 % ; flotteur : gauche ; position : relative ; famille de polices : "Open Sans", sans-serif ; ) .topmenu > li > a ( transformation de texte : majuscule ; taille de police : 14 px ; poids de police : gras ; couleur : #404040 ; remplissage : 15px 30px ; ) .topmenu li a:hover ( couleur : #D5B45B ; ) .submenu-link:after ( contenu : "\f107" ; famille de polices : "FontAwesome" ; couleur : hériter ; marge gauche : 10 px ; ) .submenu ( arrière-plan : #273037 ; position : absolue ; gauche : 0 ; haut : 100 % ; z-index : 5 ; largeur : 180 px ; opacité : 0 ; transformation : scaleY(0) ; origine de transformation : 0 0 ; transition : facilité d'entrée et de sortie de 0,5 s ; ) .submenu a ( couleur : blanc ; alignement du texte : gauche ; remplissage : 12px 15px ; taille de police : 13px ; bordure inférieure : 1px solid rgba(255,255,255,.1); ) .submenu li:dernier-enfant a ( border-bottom: none; ) .topmenu > li:hover .submenu ( opacité : 1 ; transformation : scaleY(1); )

      4. Menu déroulant en expansion

      Un autre exemple de menu déroulant. L'effet d'agrandissement lorsque le menu apparaît est réalisé en réduisant la taille initiale.submenu (transform: scale(.8);) , au survol, la taille augmente à.topmenu > li:hover .submenu (transform: scale(1);) .

      * ( dimensionnement de la boîte : border-box ; ) corps ( marge : 0 ; arrière-plan : url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( arrière-plan : blanc ; ) nav ul ( style de liste : aucun ; marge : 0 ; remplissage : 0 ; ) nav a ( décoration de texte : aucun ; contour : aucun ; affichage : bloc ; transition : facilité d'entrée-sortie de .4s ; ) .topmenu ( text-align: center; padding: 10px 0; ) .topmenu > li ( affichage : inline-block ; position : relative ; ) .topmenu > li:after ( contenu : " " ; position : absolue ; droite : 0 ; largeur : 1px; hauteur: 12px; arrière-plan: #d2d2d2; haut: 16px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); ) .topmenu > li:last-child:after ( arrière-plan : aucun ; boîte -shadow : aucun ; ) .topmenu > li > a ( remplissage : 12px 26px ; couleur : #767676 ; transformation du texte : majuscules ; poids de la police : gras ; espacement des lettres : 1px ; famille de polices : "Exo 2", sans-serif; ) .topmenu li a:hover ( couleur : #c0a97a ; ) .submenu ( position : absolue ; gauche : 50 % ; haut : 100 % ; largeur : 210 px ; marge gauche : -105 px ; arrière-plan : #fafafa ; bordure : 1px solide #ededed ; indice z : 5 ; visibilité : cachée ; opacité : 0 ; transformer : échelle (.8) ; transition : .4s facilité d'entrée et de sortie ; ) .submenu li a ( remplissage : 10px 0 ; marge : 0 10px ; bordure inférieure : 1px solid #efefef ; taille de police : 12px ; couleur : #484848 ; famille de polices : "Kurale", serif ; ) .topmenu > li:hover .submenu ( visibilité : visible ; opacité : 1 ; transformation : scale(1); )

      5. Menu déroulant

      Menu horizontal avec mini-animation : lorsque vous survolez les liens du menu supérieur, un petit cercle apparaît, qui accompagne également l'apparence du menu déroulant.

      @import url("https://fonts.googleapis.com/css?.jpg); position d'arrière-plan : centre centre ; répétition d'arrière-plan : pas de répétition ; taille d'arrière-plan : couverture ; hauteur : 100vh ; position : relative ; ) corps : avant ( contenu : " " ; position : absolue ; gauche : 0 ; bas : 0 ; hauteur : 100 % ; largeur : 100 % ; arrière-plan : dégradé linéaire (45 degrés, rgba (0,0,0,0) , rgba(255,255,255,.8)); ) nav ( text-align: center; padding: 40px 0 0; ) nav ul ( list-style: none; margin: 0; padding: 0; ) nav a ( text-decoration : aucun ; affichage : bloc ; couleur : #222 ; ) .topmenu > li ( affichage : bloc en ligne ; position : relative ; ) .topmenu > li > a ( position : relative ; remplissage : 10px 15px ; font-family : " Kaushan Script", cursive ; taille de police : 1,5em ; hauteur de ligne : 1 ; espacement des lettres : 3px; ) .topmenu > li > a:before ( contenu : " ; position : absolue ; z-index : 5 ; gauche : 50 % ; haut : 100 % ; largeur : 10 px ; hauteur : 10 px ; arrière-plan : blanc ; rayon de bordure : 50 % ; transformation : traduire (-50 %, 20 px); opacité : 0 ; transition : 0,3 s ; ) .topmenu li:survolez a:avant ( transform:translate(-50%, 0); opacité : 1 ; ) .submenu ( position : absolue ; z-index : 4 ; gauche : 50 % ; haut : 100 % ; largeur : 150 px ; remplissage : 15 px 0 15 px ; marge supérieure : 5 px ; arrière-plan : blanc ; rayon de bordure : 5 px ; box-shadow : 0 0 30px rgba(0,0,0,.2); box-sizing : border-box ; visibilité : masqué ; opacité : 0 ; transformation : traduire (-50 %, 20px); transition : 0,3 s ; ) .topmenu > li:hover .submenu ( visibilité : visible ; opacité : 1 ; transformation : traduire (-50%, 0); ) .submenu a ( famille de polices : "Libre Baskerville", serif ; taille de police : 11px ; espacement des lettres : 1px ; remplissage : 5px 10px ; transition : .3s linéaire ; ) .submenu a:hover (arrière-plan : #e8e8e8 ;)

      Peut être créé sans JavaScript et/ou jQuery. Pour le créer, utilisez les propriétés CSS display, padding, pseudo-class:hover. Un menu fonctionnel est possible (Cliquez sur « Fork » si vous souhaitez concevoir le menu HTML à votre manière). Durée de la vidéo ~12 min. La note est destinée aux concepteurs de mise en page et aux développeurs Web débutants qui font leurs premiers pas dans l'apprentissage des bases du HTML et du CSS ; pour ceux qui ont suivi le cours « Bases de HTML5 et CSS3 ».

      Création d'un menu déroulant simple

      Pour créer un menu le site utilise généralement une structure de blocs Élément de navigation HTML Et liste non numérotée. Dans l'un des éléments de la liste, une autre liste est intégrée afin qu'elle ne soit pas incluse dans le lien hypertexte. Il serait possible de placer ul à l'intérieur de a, mais à mon avis ce n'est pas une très bonne idée, car la pseudo-class:hover fonctionne aussi avec les éléments li !

      Dans notre cas, nous ne considérons pas l'option lorsque la liste déroulante Il existe également des listes imbriquées - cette tâche n'est pas difficile en soi, mais elle posera des difficultés à un maquettiste novice. Notez également que la construction d'un menu peut être effectuée en recherchant ou en écrivant le code JavaScript approprié.

      Pour la commodité de travailler avec le balisage (nous rencontrerons soudain un autre système de navigation), nous ajouterons une classe CSS à notre élément de navigation structurel ; Nous créerons des talons d'hyperliens, mais vous pouvez écrire http://site au lieu de # :)

      Balisage HTML pour un menu avec un sous-menu déroulant

      L'essentiel en CSS : effacer les valeurs par défaut des éléments HTML inclus dans le menu ; masquer la future sous-liste déroulante ( sous-menu) et son affichage au survol de l'élément HTML parent - en utilisant la pseudo-classe:hover

      Règles CSS pour un menu déroulant.menu ul li( padding: 10px; ) .menu ul > li:hover( background-color: #f96; ) .menu ul ul > li:hover( background-color: #69e; ) . menu ul li, .menu ul( display: inline-block; ) .menu ul( position: relative; margin: 0; padding: 0; background-color: #f63; ) .menu ul ul( display: none; position: absolu ; couleur d'arrière-plan : #369 ; marge supérieure : 10 px ; marge gauche : -10px ; ) .menu ul a( couleur : #fff ; décoration de texte : aucune; ) .menu ul a( couleur : #fff ; décoration de texte : aucun ; ) .menu li:hover ul( affichage : bloc ; ) .menu li:hover li( affichage : bloc ; )

      Le menu créé n'est pas parfait et peut être amélioré (réfléchissez à comment). Bonne chance dans votre développement et que la création de tels menus ne soit jamais difficile !

      Création d'une nouvelle page Web vierge

      Si lors de l'ouverture d'une fenêtre de programme Page de garde il affiche une page blanche, puis le développement d'une page web peut être réalisé à partir de cette page. Si à l'ouverture de l'éditeur Page de garde, une fenêtre principale vierge s'affiche, puis pour créer une nouvelle page vierge vous devez exécuter la commande Fichier/Nouveau et sélectionnez dans le volet des tâches Vide page. Une page vierge apparaîtra dans la fenêtre de l'application. Ensuite, vous devez développer la page, c'est-à-dire effectuer la mise en page (structure), saisir du texte, des images, etc.

      Création d'une page Web basée sur des modèles FrontPage

      Vous pouvez également créer une nouvelle page basée sur l'un des modèles. Pour ce faire, vous devez sélectionner la commande "Autre modèles pages" dans la zone de tâches. La boîte de dialogue Modèles de page s'affichera à l'écran, qui présente différents modèles de page par catégorie.

      Création d'une page Web basée sur des pages Web existantes sur votre PC

      Vous pouvez également créer une page Web basée sur des pages Web existantes sur votre ordinateur. Pour ce faire, sélectionnez la commande dans la zone des tâches "Depuis disponible pages" et sélectionnez la page requise dans la boîte de dialogue qui apparaît. Vous pouvez ensuite apporter les modifications nécessaires à la page et l'enregistrer sous un autre nom.

      Formation à la création de pages Web

      Création d'une nouvelle page Web vierge

      Si lors de l'ouverture d'une fenêtre d'application Page de garde il affiche une nouvelle page vierge, puis le développement d'une page web peut être réalisé à partir de cette page. Si, lors de l'ouverture de l'éditeur, une fenêtre principale vierge s'affiche, alors pour créer une nouvelle page vierge, vous devez exécuter la commande Fichier/Nouveau et sélectionnez dans le volet des tâches "Vide page".

      Essayons de créer la page d'accueil de notre site Web !

      Une nouvelle page vierge apparaîtra dans la fenêtre de l'application. On sauvegarde la page, mais avant de sauvegarder la page dans la fenêtre "Sauvegarder" créer un serveur de dossiersDossiers personnelsNomNomSite « Dinas », dans lequel nous créons un sous-dossier Dessins pour les dessins, puis enregistrons la page dans le dossier Site « Dinas ». Nous attribuons le nom de la page - index, ce qui signifie page d'accueil ou page principale. L'éditeur enregistre la page avec l'extension .htm. Ainsi, dans le dossier Dynas Site, il y aura un sous-dossier Images et un fichier index.htm.


      Les dessins de la page Web doivent être préparés à l'avance et insérés dans le dossier Dessins. Copions l'image du bureau Dinas LLC dans le dossier Dessins pour créer une page Web dédiée à Dinas LLC.

      Pour vous assurer que le document que vous avez créé est correctement identifié partout comme étant rédigé en russe, procédez comme suit :

      Sélectionnez Propriétés du fichier. La boîte de dialogue Propriétés de la page s'ouvrira.

      Sur l'onglet Langue dans le menu déroulant Drapeau actuel document, indiquant : groupes de paramètres Langueélément de sélection de page russe. Dans le menu déroulant Sauvegarder document, en utilisant groupes de paramètres Trousse panneaux sélectionner un article cyrillique. D'ACCORD!

      Fond de page

      Pour rendre la page plus colorée, essayons d'ajouter à notre page Arrière-plan,. Vous pouvez le faire de deux manières :

      1. Accédez au menu Format de l'arrière-plan et dans la fenêtre Propriétés de la page, sélectionnez l'image requise à l'aide du bouton Parcourir.


      En conséquence, notre page ressemblera à ceci :


      Essayez ceci, mais une fois terminé Annuler c'est de l'action !

      2. Vous pouvez utiliser des thèmes prêts à l'emploi comme arrière-plan de notre page. Accédez au menu Format du thème. Double-cliquez sur le thème Wave.

      Tableau comme cadre de page Web

      Ensuite, vous devez développer la page. Le développement d'une page commence par sa mise en page. Les tableaux sont utilisés pour mettre en page la page. Peut être appliqué Mises en page pages, qui se trouvent sur la barre des tâches "Mises en page les tables Et cellules" dans la zone de tâches. Pour ce faire, vous devez aller dans le menu les tables Planche à pain les tables Et cellules. Ainsi, nous avons une excellente opportunité de choisir des dispositions de table toutes faites, mais il peut arriver que ces dispositions ne répondent pas à nos exigences. Nous examinerons donc de plus près l'utilisation les tables comme cadre de notre page.

      Sélectionnez Tableau Insérer un tableau. Une boîte de dialogue apparaîtra Insérer les tables, qui permet de configurer les paramètres de la table créée. (Fig.10)

      џ Dans les champs de saisie avec un compteur Lignes Et Stolbtsov groupes d'éléments de paramètres Taille le nombre de lignes et de colonnes que contiendra le tableau est spécifié.

      џ Position contient des contrôles pour la position du tableau sur la page et la position du contenu des cellules dans le tableau.

      џ Dans la liste déroulante Alignement Vous pouvez choisir comment aligner le contenu des cellules. Par la suite, pour chaque cellule spécifique, vous pouvez configurer séparément les paramètres d'alignement de son contenu.

      џ Liste Circuler spécifie la manière dont le texte et les autres éléments de la page s'enroulent autour du tableau.

      џ Champ de saisie avec compteur Des champs cellules définit la distance entre les bordures des cellules et leur contenu.

      џ Dans le champ de saisie avec un compteur Intervalle cellules définit la distance entre les cellules adjacentes du tableau.

      џ En cochant la case Ensemble largeur, Vous pouvez le faire dans le champ juste en dessous.

      џ Champ Ensemble hauteur semblable au précédent.

      Dans le groupe témoin Les frontières Contient les paramètres liés à l’affichage des limites du tableau.

      џ Champ de saisie avec compteur Taille définit l'épaisseur de la bordure du tableau en pixels.

      џ Liste déroulante Couleur permet de sélectionner la couleur qui sera utilisée pour afficher la bordure.

      џ Si vous cochez la case Effondrement frontière les tables, alors la bordure sera affichée sur une seule ligne, sinon elle prendra une apparence de pseudo-volume.

      En groupe Arrière-planéléments collectés qui contrôlent l’image d’arrière-plan du tableau.

      џ Liste Couleur permet de sélectionner la couleur de fond du tableau.

      џ Si la case est cochée Utiliser arrière-plan dessin, vous pouvez alors définir le tableau comme image d'arrière-plan.

      Si vous cochez la case Par défaut pour les nouvelles tables de groupes d'éléments Par défaut, tous les paramètres que vous définissez pour cette table deviendront les paramètres par défaut pour toutes les tables suivantes.

      Par la suite, si vous devez modifier les paramètres d'un tableau déjà créé, cliquez à l'intérieur - un menu contextuel apparaîtra dans lequel vous devrez sélectionner l'élément Propriétés les tables.

      Il est possible de modifier les paramètres d'une seule cellule ou de plusieurs cellules à la fois. Pour ce faire, vous devez sélectionner une ou plusieurs cellules, appeler le menu contextuel et sélectionner l'élément qu'il contient Propriétés cellules.

      Dans le groupe témoin Position contient des contrôles pour l’emplacement du contenu des cellules.

      • · Dans les listes déroulantes Aligner Par horizontal Et Par verticale, vous pouvez choisir comment aligner le contenu de la cellule.
      • · Dans le groupe de contrôles Les frontières, il existe des paramètres liés à l'affichage des bordures du tableau. Liste Couleur vous permet de sélectionner la couleur de la bordure de la cellule.
      • · En groupe Arrière-plan les éléments qui contrôlent l'image d'arrière-plan de la cellule sont collectés. Liste Couleur sélectionne sa couleur de fond. Case à cocher Utiliser arrière-plan dessin définit une image comme arrière-plan.

      Il existe également des options supplémentaires : ajouter Et supprimer Colonnes, fracasser Et combiner cellules. Toutes ces commandes se retrouvent également dans le menu contextuel lors de la sélection de cellules. Vous avez déjà rencontré des commandes similaires dans Word et Excel, cela ne sert donc à rien de les décrire.

      En utilisant le matériel théorique obtenu ci-dessus, essayez de créer deux tableaux.

      Ça devrait ressembler a quelque chose comme ca!

      Il est temps d'écrire sur notre site Internet le nom de l'entreprise qui en est propriétaire. Mais nous ne le ferons pas sous forme de texte normal, mais en utilisant un objet WordArt (Nous espérons que vous savez comment faire cela !) Insérez le mot de la même manière Promotion dans la troisième cellule du tableau inférieur et Poste vacant dans la première cellule. Séparez maintenant le nom de l'entreprise Horizontal doubler: Insérer une ligne horizontale.


      Conception du texte du site

      Il existe de nombreuses options pour formater le texte des pages Web. L'utilisation du potentiel du formatage du texte vous permet de rendre les textes plus agréables visuellement, de les concevoir conformément aux idées de votre auteur et de mettre clairement en valeur les mots et les pensées importants.

      Puisque vous avez décidé d'étudier un produit aussi complexe que la création de sites Web, nous sommes simplement convaincus que vous savez comment le texte est formaté, par exemple dans un programme tel que Microsoft Word. Voici donc l'édition de texte dans le programme Page de garde similaire à celui-ci, donc, naturellement, nous ne nous attarderons pas non plus sur ce point.

      Disons simplement que pour cela vous utilisez le panneau de formatage ou la barre de menu Formater le paragraphe de police.

      Saisissez vous-même tout le texte que vous voyez dans la figure 15. Lorsque vous le modifiez, vous pouvez faire preuve d'un peu de créativité. MAIS Pas exagérer!!!


      Insérer des illustrations

      Il est impossible d'imaginer une page HTML sans éléments graphiques, dessins, etc. Des graphiques savamment sélectionnés attireront l'attention des visiteurs sur la page, concentrant leur attention sur certains points de notre page. Cela aidera à mettre en évidence les sous-sections logiques et à donner à notre page un caractère unique, mais lors de la sélection des images, les points suivants doivent être pris en compte. Premièrement, vous ne devez pas utiliser une image comme arrière-plan qui rendrait le texte du document difficile à lire. Par exemple, trop coloré, lumineux, etc. Il n’est pas nécessaire d’utiliser de grandes images, dont le chargement prendra une éternité. Si vous devez toujours insérer une image sur la page, il est préférable d'en créer une petite copie, puis d'attribuer un lien vers la page avec la grande image originale, afin que l'utilisateur puisse décider lui-même s'il le souhaite vraiment. pour télécharger l'image dans sa forme originale. La taille d’un fichier image ne doit donc pas dépasser 20 à 25 Ko. Les pages Web contiennent généralement des images dans deux formats : GIF et JPG. Ces images s'affichent correctement dans tous les navigateurs prenant en charge les graphiques. Bien sûr, vous pouvez insérer des fichiers avec d'autres formats, par exemple BMP, TIF, mais vous devez en tenir compte lors de l'écriture sur le disque Page de garde les convertira automatiquement dans l'un des deux formats de base.

      Examinons les avantages et les inconvénients de ces formats. GIF est un format standard pour les petites images graphiques telles que les boutons et les icônes. Il ne prend pas en charge les ombres ni les tons moyens et est basé sur une palette de 256 couleurs. JPG, par rapport au GIF, prend en charge beaucoup plus de couleurs - plus de 16 millions, ce qui le rend particulièrement avantageux pour l'affichage d'images graphiques avec des transitions de demi-teintes fluides. De plus, la taille d'un fichier JPG peut être réduite avec différents degrés de compression, mais il faut se rappeler que contrairement aux fichiers GIF, les fichiers JPG sont compressés avec une perte de qualité. Plus la compression est importante, plus la perte est importante, mais il faut tenir compte du fait que JPG est un assez bon format : il donne un degré de compression élevé avec des pertes assez faibles, presque invisibles à l'œil nu.

      Nous examinerons tout ce qui concerne les graphiques plus en détail un peu plus loin, pour l'instant nous dirons seulement que vous pouvez à nouveau insérer une image de la même manière que dans d'autres programmes.

      Essayons d'insérer une photo dans la page Catalogue du dossier des dessins.

      Préparation de graphiques à l'aide d'Adobe PhotoShop et Adobe ImageReady

      L’apparence et l’attractivité d’un site dépendent en grande partie des graphismes qui le remplissent. Les graphiques sont un moyen visuel de souligner et de mettre en valeur les informations révélées par le texte d’une page Web, sans pour autant détourner l’attention du visiteur du texte lui-même. Par conséquent, la préparation des graphiques doit faire l’objet de la plus grande attention.

      Parmi les programmes de préparation professionnelle d'images raster, il n'y a peut-être pas de programme plus avancé et plus populaire qu'Adobe PhotoShop.

      Adobe PhotoShop et Adobe ImageReady se complètent bien. Adobe PhotoShop traite les photographies et crée des boutons graphiques, des bannières et d'autres images pour un site Web. Et dans ImageReady, les images obtenues sont optimisées, découpées en fragments, etc.

      Thème 3.4 : Application d'Internet à l'économie et à la protection de l'information

      Programmes de création de sites Web

      3.3. Programmes d'application pour la création de sites Web

      3.3.4. Création d'un site Web et de pages Web dans FrontPage

      Planification du site

      La planification d'un site Web est l'une des tâches les plus difficiles. Comment disposer correctement les informations dont vous disposez sur les pages de votre futur site internet ? Quelle doit être la structure du site ? Quelles pages le site doit-il contenir ? Quelle conception doivent avoir les pages du site Web ? À quoi doit ressembler la navigation sur le site ?

      Ces problèmes et bien d’autres associés au développement de sites Web doivent être résolus avant d’utiliser des programmes d’application pour le développement de sites Web.

      Disons que nous avons décidé de développer un site Web qui présentera des informations sur l'entreprise EN101, nous pouvons présenter ces informations dont nous disposons sur quatre pages :

      1. maison
      2. À propos de la société
      3. Présentation commerciale du projet
      4. méthodes de payement

      Nous choisissons un nom de site en fonction du type d'activité, par exemple : cours-en101.

      Attribuez des noms aux pages :

      • index – Accueil ;
      • info - À propos de l'entreprise ;
      • entreprise- Revue commerciale du projet ;
      • payer - Modes de paiement.

      Nous utilisons la page Web d'accueil (index) créée précédemment comme page principale. Nous créons la structure du site, illustrée sur la figure.


      Riz. 1.

      Nous préparerons le texte dans l'éditeur Word pour chaque page et les dessins dans Adobe Photoshop aux formats GIF, JPEG ou PNG avec une résolution de 72 pixels/pouce ; de plus, vous pourrez utiliser des scripts.

      Ensuite, vous pouvez enregistrer un domaine de deuxième niveau dans l'une des zones (ua, ru, com, net, info, etc.) et après avoir développé le site, choisir un hébergement payant adapté à la rapidité d'accès et fournissant les services nécessaires pour le fonctionnement efficace du site. Si nous hébergeons le site sur un hébergement gratuit, nous pouvons alors choisir, par exemple, l'hébergement sur le serveur narod.ru. Pour ce faire, vous devrez vous inscrire sur le serveur et bénéficier d'un hébergement gratuit. Dans ce cas, vous disposerez d'un domaine de troisième niveau, par exemple : leçons-en101.narod.ru.

      Créer un site Web à l'aide de FrontPage

      1. Pour créer un site Web à l'aide de l'application FrontPage, vous devez ouvrir la fenêtre de l'application de l'une des manières suivantes. Après quoi, la fenêtre de l'application ou l'interface graphique FrontPage s'affichera à l'écran, qui affichera le site ou la page précédente. Pour quitter un site ou une page précédente dans FrontPage, vous devez exécuter la commande « Fichier/Fermer » ou « Fichier/Fermer le nœud », ou les deux si le nœud et la page étaient ouverts.

      Exécutez ensuite la commande Fichier / Nouveau et dans la zone de tâches « Création » qui s'ouvre, cliquez sur « Autres modèles de sites Web » dans la section « Créer un site Web ». La boîte de dialogue « Modèles de sites Web » s'ouvrira, dans laquelle vous devrez sélectionner « Site Web vierge », puis spécifier l'emplacement du nouveau site Web (par exemple, D:\Documents and Settings\TBA\Mes documents\Mon site Web). Sites\lessons- en101) et cliquez sur OK. La figure montre un fragment de la fenêtre de dialogue « Modèles de sites Web », dans laquelle l'adresse du nouveau site est indiquée.


      Riz. 2.

      Après avoir enregistré le site, la fenêtre de l'application FrontPage affichera le nouveau site dans la vue des dossiers.



      Riz. 3.

      2. Créez une page d'accueil pour un nouveau site dans FrontPage. La création d'une page d'accueil dans FrontPage peut se faire de différentes manières. Par exemple, vous pouvez cliquer sur le bouton Nouvelle page dans le panneau Contenu, ce qui ajoutera la page index.htm à la fenêtre du site Web, illustrée dans la figure.



      Riz. 4.

      3. Copiez ensuite le contenu du dossier EN101 créé précédemment, qui contient le dossier images et la page d'index (le dossier _vti_cnf est créé automatiquement lors de la création de la page web). Le contenu du dossier EN101 est illustré dans la figure.


      Riz. 5.

      Nous collons le contenu enregistré du dossier EN101 du presse-papiers dans le dossier nouvellement créé du site Web leçons-en101, illustré sur la figure.


      Riz. 6.



      Riz. 7.

      Ainsi, la page index.htm (anglais sur Internet) créée précédemment est utilisée comme page d'accueil du nouveau site. Vous pouvez créer une page d'accueil d'autres manières, comme décrit dans la section 3.3.2. Introduction à FrontPage.

      5. Créez la structure du site dans l'éditeur FrontPage, c'est-à-dire Nous ajouterons trois pages supplémentaires à la page principale : info - À propos de l'entreprise ; entreprise - Aperçu commercial du projet ; payer - Modes de paiement. Pour ce faire, vous devez passer en mode Transitions en exécutant la commande Vue/Transitions. Ensuite, vous devez sélectionner la page d'accueil et cliquer sur le bouton Nouvelle page dans le panneau Transitions ou utiliser le menu contextuel, la nouvelle page 1 sera ajoutée. De même, ajoutez deux nouvelles pages supplémentaires. La structure du site est représentée sur la figure.



      Riz. 8.

      6. Renommer de nouvelles pages dans FrontPage. Nous passons en mode dossier et utilisons le menu contextuel pour changer les noms Nouvelle page 1 en Info, Nouvelle page 2 sur entreprise, Nouvelle page 3 sur payer.


      Riz. 9.

      7. Dans un souci d'unité dans la conception des pages du site, nous copions le contenu de la page principale dans les pages d'informations, commerciales et payantes créées. Pour ce faire, ouvrez la page principale en mode Page et exécutez la commande « Modifier / Sélectionner tout », puis cliquez sur le bouton Copier de la barre d'outils. Allez en mode Dossiers et double-cliquez sur la page d'informations, elle s'ouvrira en mode Page, puis cliquez sur le bouton Insérer. Le contenu de la page principale sera copié sur la page d'informations, et de la même manière, le contenu de la page principale sera copié sur les deux autres pages.

      • Maison;
      • À propos de la société;
      • Revue commerciale du projet ;
      • Méthodes de payement.

      Par exemple, sélectionnez l'élément de navigation « Aperçu commercial du projet » et utilisez le menu contextuel pour ouvrir la boîte de dialogue Ajouter un lien hypertexte, dans laquelle nous sélectionnons business.htm et cliquons sur OK. De même, nous créons des hyperliens pour tous les points de navigation sur toutes les pages. La figure montre un fragment de la boîte de dialogue Ajouter un lien hypertexte.



      Riz. dix.

      10. Ajoutez et remplissez les balises méta (entre les balises Et) sur les pages : « A propos de l'entreprise » ; « Revue commerciale du projet » ; "Modes de paiement" en mode Code.

      Par exemple, pour la page « A propos de l'entreprise », les balises sont renseignées comme suit :

      • À propos de l'En101

      11. Renommer les titres des pages en mode Transitions. Sélectionnez la page et utilisez le menu contextuel pour la renommer :

      • renommez la nouvelle page 1 en « À propos de l'entreprise ».
      • renommer la nouvelle page 2 en « Revue commerciale du projet ».
      • renommez la nouvelle page 3 en « Modes de paiement ».

      Grâce au développement, nous obtenons un site composé de quatre pages Web. Ce site, créé à l'aide de FrontPage sur un système de fichiers PC, peut être hébergé sur un serveur Web sur Internet ou Intranet.

      Pour développer votre propre site Web dans FrontPage, téléchargez.