Si vous travaillez souvent sous MS Word, enregistrer un document comme modèle vous intéressera probablement. Ainsi, disposer d'un fichier modèle avec le formatage, les champs et autres paramètres que vous définissez peut considérablement simplifier et accélérer le flux de travail.
Un modèle créé dans Word est enregistré aux formats DOT, DOTX ou DOTM. Ce dernier permet de travailler avec des macros.
Échantillon est un type particulier de document : lorsqu'il est ouvert puis modifié, une copie du fichier est créée. Le document original (modèle) reste inchangé, tout comme son emplacement sur le disque.
À titre d'exemple de ce que peut être un modèle de document et pourquoi il est nécessaire, vous pouvez donner un plan d'affaires. Les documents de ce type sont assez souvent créés dans Word, ils sont donc également utilisés assez souvent.
Ainsi, au lieu de recréer la structure du document à chaque fois, en choisissant les polices, les styles de conception et en définissant les tailles de marge appropriés, vous pouvez simplement utiliser un modèle avec une mise en page standard. D'accord, cette approche du travail est beaucoup plus rationnelle.
Un document enregistré comme modèle peut être ouvert et rempli avec les données et le texte nécessaires. En même temps, l'enregistrer en standard pour Word Formats DOC et DOCX, le document original (le modèle créé), restera inchangé comme indiqué ci-dessus.
La plupart des modèles dont vous pourriez avoir besoin pour travailler avec des documents dans Word se trouvent sur le site officiel (). De plus, le programme peut créer modèles personnalisés, ainsi que modifier ceux existants.
Note: Certains modèles sont déjà intégrés au programme, mais certains d'entre eux, bien qu'affichés dans la liste, se trouvent en réalité sur le site Web Office.com. Après avoir cliqué sur un tel modèle, il sera instantanément téléchargé depuis le site et disponible pour utilisation.
Créez votre propre modèle
La façon la plus simple de commencer à créer un modèle est de document vierge, qui peut être ouvert simplement en lançant Word.
Si vous utilisez l'une des dernières versions de MS Word, lorsque vous ouvrirez le programme, vous serez accueilli avec page de démarrage, où vous pouvez sélectionner l'un des modèles disponibles. Ce qui est particulièrement agréable, c’est qu’ils sont tous classés en catégories thématiques.
Toutefois, si vous souhaitez créer vous-même un modèle, choisissez “nouveau document” . Sera ouvert document standard avec les paramètres par défaut définis. Ces paramètres peuvent être soit programmatiques (définis par les développeurs), soit créés par vous (si vous avez préalablement enregistré certaines valeurs comme valeurs par défaut).
Grâce à nos enseignements, contribuez Les changements nécessaires dans un document qui sera ensuite utilisé comme modèle.
En plus d'effectuer les étapes ci-dessus, vous pouvez également ajouter un filigrane, des filigranes ou tout autre graphique comme paramètres par défaut pour le document à utiliser comme modèle. Tout ce que vous modifiez, ajoutez et enregistrez à l'avenir sera présent dans chaque document créé sur la base de votre modèle.
Leçons sur le travail avec Word :
Après avoir apporté les modifications nécessaires, défini les paramètres par défaut du futur modèle, vous devez l'enregistrer.
1. Cliquez sur le bouton "Déposer"(ou "MS Office", si tu utilises ancienne version Mot).
3. Dans le menu déroulant "Type de fichier" sélectionner type approprié modèle:
- Modèle Word (*.dotx) : un modèle standard, compatible avec toutes les versions de Word antérieures à 2003 ;
- Modèle Word avec prise en charge des macros (*.dotm) : comme son nom l'indique, ce type les modèles prennent en charge l'utilisation de macros ;
- Modèle Word 97 - 2003 (*.dot) : compatible avec les anciennes versions de Word 1997 - 2003.
4. Définissez le nom du fichier, spécifiez le chemin pour l'enregistrer et cliquez sur "Sauvegarder".
5. Le fichier que vous avez créé et configuré sera enregistré en tant que modèle au format que vous avez spécifié. Vous pouvez maintenant le fermer.
Créer un modèle à partir d'un document existant ou d'un modèle standard
1. Ouvrez un document MS Word vierge, accédez à l'onglet "Déposer" et sélectionnez "Créer".
Note: DANS dernières versions Dans Word, lors de l'ouverture d'un document vide, l'utilisateur se voit immédiatement proposer une liste de modèles de mise en page, sur la base desquels un futur document peut être créé. Si vous souhaitez accéder à tous les modèles, sélectionnez lors de l'ouverture "Nouveau document", puis suivez les étapes décrites au point 1.
2. Sélectionnez le modèle approprié dans la section « Modèles disponibles ».
Note: Dans les dernières versions de Word, vous n'avez rien à sélectionner ; une liste des modèles disponibles apparaît immédiatement après avoir cliqué sur le bouton "Créer", directement au-dessus des modèles se trouve une liste des catégories disponibles.
3. Apportez les modifications nécessaires au document en utilisant nos conseils et instructions présentés dans la section précédente de l'article (Créer votre propre modèle).
Note: Pour différents modèles styles de texte disponibles par défaut et présentés dans l'onglet "Maison" en groupe "Modes", peuvent être différents et sensiblement différents de ceux que vous avez l'habitude de voir dans un document standard.
- Conseil: Profitez des styles disponibles pour rendre votre futur modèle vraiment unique, contrairement aux autres documents. Bien entendu, ne le faites que si vous n’êtes pas limité par les exigences en matière de documents.
4. Après avoir apporté les modifications nécessaires au document, effectuez tous les réglages que vous jugez nécessaires, enregistrez le fichier. Pour cela, cliquez sur l'onglet "Déposer" et sélectionnez "Enregistrer sous".
5. En coupe "Type de fichier" sélectionnez le type de modèle approprié.
6. Définissez un nom pour le modèle, spécifiez via "Conducteur" ("Revoir") chemin pour l'enregistrer, cliquez sur le bouton "Sauvegarder".
7. Le modèle que vous créez sur la base de celui existant sera enregistré avec toutes les modifications que vous avez apportées. Ce dossier peut maintenant être fermé.
Ajout de blocs de construction à un modèle
Les blocs de construction sont les éléments réutilisables contenus dans un document, ainsi que les composants du document stockés dans une collection et disponibles pour une utilisation à tout moment. Vous pouvez stocker et distribuer des blocs de construction à l'aide de modèles.
Ainsi, à l'aide de blocs standard, vous pouvez créer un modèle de rapport qui contiendra des lettres d'accompagnement de deux types ou plus. En même temps, créer un nouveau rapport basé sur de ce modèle, les autres utilisateurs pourront sélectionner n'importe lequel des types disponibles.
1. Créez, enregistrez et fermez le modèle que vous avez créé en tenant compte de toutes les exigences. C'est à ce fichier que seront ajoutés les blocs standards, qui seront ensuite disponibles pour les autres utilisateurs du modèle que vous avez créé.
2. Ouvrez le document modèle auquel vous souhaitez ajouter des blocs de construction.
3. Créez les éléments de base nécessaires, qui seront ensuite disponibles pour les autres utilisateurs.
Note: Lors de la saisie d'informations dans la boîte de dialogue "Créer une nouvelle brique" entrez dans la ligne "Enregistrer dans" le nom du modèle auquel ils doivent être ajoutés (il s'agit du fichier que vous avez créé, enregistré et fermé selon le premier point cette section des articles).
Le modèle que vous avez créé, contenant les éléments de base, peut désormais être partagé avec d'autres utilisateurs. Les blocs eux-mêmes, enregistrés avec celui-ci, seront disponibles dans les collections spécifiées.
Ajout de contrôles de contenu à un modèle
Dans certaines situations, vous souhaitez donner une certaine flexibilité à votre modèle et à l'ensemble de son contenu. Par exemple, un modèle peut contenir une liste déroulante créée par l'auteur. Pour une raison ou une autre, cette liste peut ne pas convenir à un autre utilisateur qui travaille avec elle.
Si un tel modèle contient des contrôles de contenu, le deuxième utilisateur pourra ajuster la liste à sa convenance, la laissant inchangée dans le modèle lui-même. Pour ajouter des contrôles de contenu à votre modèle, vous devez activer l'onglet "Développeur" dans MS Word.
1. Ouvrez le menu "Déposer"(ou "MS Office" en plus versions précédentes programmes).
2. Ouvrez la rubrique "Options" et sélectionnez l'élément ici « Personnaliser le ruban ».
3. Dans la rubrique "Onglets principaux" cochez la case à côté de l'article "Développeur". Pour fermer la fenêtre, cliquez sur "D'ACCORD".
4. Onglet "Développeur" apparaîtra sur le panneau de configuration Word.
Ajout de contrôles de contenu
1. Dans l'onglet "Développeur" cliquez sur le bouton « Mode conception » situé dans le groupe "Contrôles”.
Insérez les contrôles nécessaires dans le document en les sélectionnant parmi ceux présentés dans le groupe du même nom :
- Texte riche;
- Texte brut ;
- Dessin;
- Collection de blocs de construction ;
- Boîte combo;
- La liste déroulante;
- Sélection des dates ;
- Case à cocher ;
- Section répétitive.
Ajouter un texte explicatif à un modèle
Vous pouvez rendre le modèle plus convivial en ajoutant un texte explicatif au document. Si nécessaire, le texte explicatif par défaut peut toujours être modifié dans le contrôle de contenu. Pour définir le texte explicatif par défaut pour les utilisateurs qui utiliseront le modèle, procédez comme suit :
1. Allumez « Mode conception »(languette "Développeur", groupe "Contrôles").
2. Cliquez sur le contrôle de contenu dans lequel vous souhaitez ajouter ou modifier un texte explicatif.
Note: Texte explicatif par défaut, c'est en petits blocs. Si « Mode conception » désactivée, ces blocs ne sont pas affichés.
3. Modifiez, formatez le texte alternatif.
4. Désactiver « Mode conception » en appuyant à nouveau sur ce bouton du panneau de commande.
5. Le texte explicatif sera enregistré pour le modèle actuel.
Nous terminerons ici, grâce à cet article, vous avez appris ce que contiennent les modèles Microsoft Word, comment les créer et les modifier, ainsi que tout ce que vous pouvez en faire. C'est vraiment fonctionnalité utile un programme qui simplifie grandement son utilisation, surtout s'il n'y a pas un seul, mais que plusieurs utilisateurs travaillent sur des documents à la fois, sans parler des grandes entreprises.
Je vais maintenant vous expliquer comment créer un thème WordPress à partir d'un simple modèle HTML en utilisant l'exemple de conception de cet article.
Vous devrez peut-être adapter un design pour WordPress pour de nombreuses raisons, par exemple, vous transférez votre site Web autrefois statique vers un CMS, ou vous avez aimé un design qui ne fait pas encore partie de la collection WordPress, ou vous souhaitez simplement comprendre comment les thèmes de ce CMS fonctionne de l’intérieur.
Alors, commençons.
Distribution du code dans des fichiers
1. Téléchargez le modèle et extrayez-le dans un dossier avec Thèmes WordPress(adresse comme blog_address_wordpress/wp-content/themes/). Si vous le souhaitez, renommez le dossier du thème à votre guise. Par exemple, mon modèle se trouve à blog_address_wordpress/wp-content/themes/MyTheme/.
2. Renommez le fichier styles.css V style.css.
3. Ouvrir style.css dans un éditeur de code (comme Notepad++) et au tout début, collez les lignes suivantes :
/* Nom du thème : MyTheme URI du thème : http://test1.ru Auteur : NoName URI de l'auteur : http://test1.ru Description : Exemple de test Version : 1.0.0 Licence : GNU General Public License v2 ou version ultérieure URI de la licence : http://www.gnu.org/licenses/gpl-2.0.html */
Comme vous l'avez peut-être deviné, il s'agit d'informations de service sur le thème de conception : titre, auteur, description, licence, version, etc. Vous pouvez remplacer les bonnes parties des lignes par les vôtres, c'est-à-dire définir votre paternité, votre version, votre description. et d'autres données.
4. Créer des fichiers en-tête.php, index.php, barre latérale.php, pied de page.php et distribuez le code d'eux entre eux index.html.
4.1. DANS en-tête.php copier le code ligne par ligne , puisque ce fichier est responsable du haut du site. styles.css remplacer dans le code par style.css- nouveau nom de fichier correct.
4.2. DANS index.php collez le code du bloc principal (à partir de la ligne ligne par ligne ).
4.3. DANS barre latérale.php copie le code menu latéral(Avec Par ).
4.4. DANS pied de page.php collez les lignes restantes (avec jusqu'à la fin du document index.html).
5. Supprimer index.html.
6. Accédez au panneau d'administration et assurez-vous que le modèle MyTheme apparaît dans la section Apparence-> Thèmes. Vous pouvez même essayer de le visualiser ou de l’activer, mais rien de bon n’en sortira pour l’instant, car nous n’avons pas encore intégré le modèle à WordPress.
Adaptation de l'en-tête
Nous allons maintenant commencer à créer un thème dynamique à partir d’un modèle statique dans lequel les données et paramètres WordPress seront chargés.
Le modèle contiendra des inserts PHP. Ce code commence par. Entre eux se trouve le code PHP qui appelle le plus souvent les fonctions CMS
1. Ouvrez le fichier header.php et remplacez le code qu'il contient jusqu'au bloc
au suivant :
>
"> "> " type="text/css" media="écran" />Nous avons rendu le bloc dynamique
Le code appelle une fonction qui renvoie les attributs du langage au conteneur.
">
Au lieu de spécifier l'encodage comme constante, nous avons appelé une fonction qui prend la valeur des paramètres du CMS et l'insère automatiquement dans le code, c'est-à-dire que pour modifier l'encodage, vous n'avez plus besoin de modifier le fichier de thème.
Une fonction importante qui garantit que les styles, plugins et scripts fonctionnent sur la page.
2. Procédez à la modification du fichier index.php. Au tout début, écrivez
,
Les lignes appellent les fichiers d'en-tête, de barre latérale et de pied de page du site.
Vous pouvez désormais visualiser ou même activer MyTheme. En conséquence, le navigateur affichera un modèle familier avec un menu statique et une seule page. Pour que le menu devienne dynamique et personnalisable, et au lieu d'une seule page pour afficher tous les documents placés sur le site, vous devez transformer davantage le modèle.
Rendre le menu supérieur dynamique
Pour l'instant, nous avons un thème de conception complètement statique, dont un avec un menu supérieur horizontal inchangé. Bien qu'il ne puisse pas être configuré depuis le panneau d'administration, et si vous laissez le code dans sa forme actuelle, alors pour insérer/supprimer/déplacer des éléments, vous devrez modifier le fichier à chaque fois. en-tête.php, ce qui est extrêmement gênant.
Afin de ne pas philosopher et de ne pas plonger dans les abysses du monde fascinant de la programmation, nous donnerons un nom statique au menu dynamique. Au lieu du tableau de menu horizontal, collez le code
pour que ça ressemble à ça :
Pour que le menu s'affiche, dans le panneau de configuration du site, ouvrez Apparence -> Personnaliser -> Menu et soit renommez le menu déjà créé en menu, soit créez un menu et personnalisez-le à votre guise, mais assurez-vous de le nommer menu.
L'essence de l'action est que le fichier en-tête.php fonction wp_nav_menu("menu=menu"); ouvre un menu appelé menu, qui doit être correctement nommé et configuré dans le panneau d'administration WordPress pour apparaître. Nom menu vous pouvez le remplacer par n'importe quel autre, l'essentiel est que le nom corresponde à la fois dans les paramètres du site et dans le code en-tête.php.
La navigation mène clairement quelque part, même si elle en fait un bel escalier. Cela se produit parce que le menu de notre modèle a été imprudemment implémenté à l'intérieur du tableau, alors qu'il aurait dû être formaté sous forme de liste. Vous pouvez corriger partiellement la situation en ajoutant au dossier style.css le code suivant :
#menu ul ( margin: 0; /* Réinitialiser la valeur de remplissage */ padding: 4px; /* Valeur de la marge */ font-size: 18px; ) #menu ul li ( display: inline; /* Afficher en tant qu'élément en ligne * / margin -right : 5px; /* Remplissage gauche */ padding : 3px; /* Marges autour du texte */ )
Puisqu’il est commenté, des explications supplémentaires ne sont guère nécessaires. Il ne reste plus qu'à rafraîchir la page et constater que la liste est enfin devenue horizontale.
Le menu, bien sûr, peut être rendu plus fluide et plus beau, mais cette action n'a rien à voir avec l'adaptation du modèle, mais est étroitement liée au CSS, que vous pouvez étudier en détail.
Finir le « chapeau »
Les seuls éléments du dossier en-tête.php, restant statique - le nom et la description du site. Pour qu'ils soient issus des paramètres spécifiés dans le panneau d'administration, remplacez le code chargé d'afficher le texte dans l'en-tête par les lignes suivantes :
Actualisez la page - le résultat ne se fait pas attendre.
Travailler avec un fichier en-tête.php C’est complet, au final il a le code suivant :
>
"> "> " type="text/css" media="écran" />Nous affichons les messages
Passons à la partie contenant le contenu principal de la page - le fichier sera édité index.php.
Supprimer le contenu du bloc droite et collez à la place le code pour afficher dynamiquement les publications. Vous pouvez également supprimer tout le code du fichier et insérer ce qui suit :
">
/ /Mais il n'y a rien ici :(404
Le début d'une boucle qui amènera la page à continuer de publier des articles jusqu'à ce qu'ils soient épuisés.
">
Affiche le titre du message.
/ /
Date au format jour, mois (abrégé), année. Tags, commentaires.
Conclusion du post.
La fin du cycle, à condition qu'il y ait des records.
S'il n'y a pas de matériel, affichez l'inscription appropriée à ce sujet et quittez le cycle.
Affichage des pages de navigation à condition qu'elles ne tiennent pas sur une seule page.
Le code apparemment simple a changé la page globalement - le blog est devenu véritablement dynamique. Chaque article peut être consulté, les liens fonctionnent.
La conception ultérieure et le placement des éléments ne dépendent que de votre imagination et de vos compétences en mise en page - vous pouvez faire ce que vous voulez avec l'affichage des données, mais le travail sur le modèle n'est pas encore terminé.
Ajout de widgets
À gauche du contenu principal du modèle se trouve un panneau, sur lequel se trouve un bloc d'informations (une sorte de widget) et un menu latéral. Le bloc d'informations ne doit pas être statique, et comme il rappelle beaucoup un widget, je suggère d'en faire un widget. Pour ce faire, vous avez besoin de :
- enregistrer un bloc de widget ;
- amenez-le au bon endroit.
Maintenant plus de détails.
1. Dans votre répertoire de thème, créez un fichier function.php. Il stocke les fonctions qui font fonctionner le modèle. Il peut également contenir d'autres procédures personnalisées.
2. Ajoutez le code suivant :
"MySidebar", "before_widget" => "", "after_widget" => "", "before_title" => "
", "après_titre" => "
",)); ?>Ce code enregistre un bloc de widget. Au lieu de MySidebar, vous pouvez saisir n'importe quel autre nom. Vous pouvez enregistrer un menu dans à peu près la même fonction dans ce fichier, mais j'ai décidé de me contenter de peu de dépenses et de ne pas le faire, afin de minimiser le contact avec PHP, et en même temps de montrer deux approches différentes pour résoudre un problème. .
3. Au dossier barre latérale.php effacer les lignes :
Information
Plus loin...
et écris à la place :
Le bloc Informations, comme prévu, a disparu, ne laissant qu'un menu statique sur le côté.
4. Mais des changements pour le mieux ont eu lieu dans le panneau d'administration - section Apparence j'ai des sous-éléments Widgets Et Menu. Allez au premier. Ouvrez-le et regardez : l'intérieur apparaît enregistré dans le fichier fonctions.php block (pour moi c’est MySidebar).
5. Pour recréer le bloc d'informations, faites glisser le widget vers la barre latérale Texte, dans le champ Titre entrer Information, dans le champ Texte-code
Nous vous proposons des réductions pour les vacances. Plus loin...
6. Actualisez la page du blog - le bloc a été recréé presque à l'identique (de petites nuances changent dans le fichier style.css et je ne m'attarderai pas sur eux).
Adaptation du menu
La deuxième partie de la barre latérale est le menu vertical. Il doit également être converti de statique en dynamique, afin qu'il puisse ensuite être modifié directement à partir du panneau d'administration.
1. Supprimez l'énorme liste de menus imbriqués dans le fichier barre latérale.php et entrez le code à la place :
2. Dans votre tableau de bord WordPress, ouvrez Apparence -> Personnaliser -> Menu, cliquez sur le bouton de menu Ajouter, nommez-le de manière à ce que le nom dans le panneau d'administration corresponde au nom dans le code de la page barre latérale.php(J'ai ceci menu_gauche) et ajoutez tous les éléments nécessaires.
3. Enregistrez les modifications, actualisez la page et assurez-vous que le menu dynamique sur le côté gauche du site fonctionne et s'affiche correctement.
Code des pages barre latérale.php par rapport à celui d'origine, il a considérablement diminué et est finalement devenu comme ceci :
Menu
En fait, seule l'inscription est restée statique Menu. Et c'est parce qu'il est peu probable qu'il change, même s'il peut facilement être « revitalisé », par exemple en implémentant ce bloc sous la forme d'une autre zone de widget et en y ajoutant un bloc de menu personnalisé, mais si vous lisez attentivement l'article, vous pouvez désormais le faire facilement vous-même.
Travailler avec le fichier footer.php
Avant de créer un modèle de site Web en HTML/CSS, vous devez le travailler. Le dessin est généralement dessiné dans Photoshop. La mise en page terminée est enregistrée dans un format de fichier .PSD.
À titre d'exemple, créons la conception du site Web dans la figure ci-dessous.
1. Ouvrez Photoshop et créez-y un nouveau document ( Fichier -> Nouveau ou Ctrl+N).
2. Définissez les paramètres initiaux. En pratique, il est presque impossible de concevoir un design avec une précision au pixel près - pendant le processus de mise en page, quelque chose devra certainement être modifié, déplacé ou refait. Par conséquent, les dimensions peuvent être définies de manière approximative, et il est conseillé de spécifier la largeur et la hauteur du document évidemment supérieures aux dimensions prévues du site, afin que tous les éléments s'intègrent exactement dans la mise en page. Faisons en sorte que notre document ait une largeur de 1 000 pixels et une hauteur de 1 500 pixels. Attention : pixels, pas centimètres. Vous n'êtes pas obligé de toucher à d'autres paramètres.
3. Allumez les règles. Vous en aurez besoin pendant le travail, car les règles permettent de mesurer les distances de manière très précise. Vérifiez si vos règles sont allumées. Si oui, vous verrez des échelles à côté de la gauche et en dessous de la barre d'outils supérieure.
S'il n'y a pas de règles, activez-les ( Vue -> Règles ou Ctrl+R).
Les règles doivent afficher la valeur en pixels. Pour y accéder à partir d'une autre mesure de longueur, faites un clic droit sur la règle et cochez la case correspondante dans le menu qui s'ouvre.
4. Vérifiez que la taille de la police est spécifiée en pixels et non en points. Si la configuration est incorrecte, accédez à Édition -> Paramètres -> Général, dans la fenêtre qui apparaît, allez dans l'onglet Unités de mesure et règles, dans la liste déroulante Texte choisir Pixels et appuyez sur D'ACCORD.
5. Nous créons immédiatement un arrière-plan pour le site. Ici, nous avons un remplissage dégradé d'orange se transformant en jaune. Sélectionnez un outil dans le panneau de gauche Pente.
Sur le panneau qui apparaît en haut, cliquez sur le bouton Dégradé miroir, sélectionnez une couleur dans la palette de gauche.
Utiliser les outils de la fenêtre qui s'ouvre Éditeur de dégradé, sélectionnez les couleurs souhaitées. Pour définir la couleur exacte d'un point de contrôle, cliquez dessus, appuyez sur le bouton Couleur et dans la fenêtre du sélecteur de couleurs, spécifiez-le en RVB, HSB, CSS ou tout autre format disponible.
À la suite des manipulations, le dégradé s'est avéré comme suit.
Pour appliquer un dégradé au calque actuel, déplacez le pointeur dessus tout en maintenant enfoncé le bouton gauche de la souris.
6. Enregistrez l'arrière-plan dans un fichier. Ce que nous avons fait doit être affiché sous la page principale et occuper toute la fenêtre du navigateur - une sorte d'arrière-plan. Par exemple, la largeur du site est de 800 pixels et la résolution de l’écran de l’utilisateur est beaucoup plus élevée. L'espace restant (tous sauf les 800 pixels qui seront occupés par le bloc de page) sera rempli d'un arrière-plan dégradé.
Étant donné que la résolution de l'écran ne peut pas être prédite, vous pouvez découper une bande d'un pixel de l'arrière-plan créé et l'enregistrer sous forme d'image. Le navigateur en remplira l’arrière-plan sur toute la largeur.
6.1. Choisir un outil Zone rectangulaire.
6.2. Sélectionnez une bande de largeur arbitraire, mais sur toute la longueur du calque.
6.3. Copiez la zone sélectionnée ( Ctrl+C).
6.4. Créer un nouveau document ( Ctrl+N), définissez sa largeur sur 1 pixel et collez le copié ( Ctrl+V).
6.5. Enregistrez le fichier dans JPG-format
7. Créez l'arrière-plan de la page. Le fond sera blanc uni. Choisir un outil Rectangle et dans la fenêtre des propriétés, définissez les paramètres nécessaires. Nous avons un rectangle de 800x1100 pixels dont le coin supérieur gauche se situe au point 100,0.
8. Création de l'arrière-plan de l'en-tête. Un remplissage dégradé similaire à un cache, de taille 780 x 80 px.
Nous l'enregistrons dans un fichier graphique séparé d'une largeur de 1 pixel, comme nous l'avons fait pour l'arrière-plan.
9. Créez un menu supérieur. À l'aide de l'outil Texte horizontal, ajoutez le premier élément de menu à la mise en page - maison. Le calque sera créé et même renommé automatiquement, vous n'aurez donc rien à faire avec.
Il est important ici que tous les points soient répartis uniformément, il est donc fortement recommandé d'utiliser des règles. Pour tracer une ligne verticale, faites glisser le pointeur tout en maintenant enfoncé le bouton de la souris de gauche à droite. Utilisez des règles pour mesurer la distance, en tenant compte du fait que chaque élément de menu doit occuper 120 pixels dans notre cas.
10. De même, insérez les éléments de menu restants.
11. Ajoutez un logo. Nous l'avons déjà prêt, il ne reste plus qu'à l'insérer soigneusement dans la mise en page. Pour ce faire, cliquez sur Fichier -> Ouvrir, puis cliquez sur l'image et, tout en maintenant le bouton de la souris enfoncé, déplacez-la vers le titre du document modèle ; une fois ouvert, faites glisser l'image à l'emplacement souhaité sur la mise en page et relâchez le bouton de la souris.
12. Nous écrivons le nom et le slogan du site. Avec l'outil que nous connaissons déjà, nous complétons le logo presque créé par des inscriptions.
13. Accédez à la barre latérale. Tout d'abord, créons et enregistrons un remplissage dégradé pour ses en-têtes dans un fichier séparé. Vous connaissez les outils, aucune explication n'est nécessaire.
14. Ajoutez le texte du titre du bloc d'informations au dégradé nouvellement créé.
15. Dessinez le cadre de la zone. Pour ce faire, utilisez simplement un rectangle transparent avec des lignes de contour noires. Sélectionnez l'outil Rectangle, définissez le type de remplissage de la forme sur Aucune couleur, cliquez sur l'icône Définir le type de trait de forme et sélectionnez la couleur noire, sinon il n'y aura pas de lignes. Si le contour est trop épais, définissez la largeur du trait sur 0,5 pt.
16. Ci-dessous, nous ajoutons un titre de bloc avec un remplissage dégradé, comme aux étapes 12 et 13.
17. Créez un bloc de menu pour le panneau de gauche. Ajoutez un rectangle orange de 100 px de large avec un contour jaune de 0,2 pt.
18. Ajoutez-y du texte.
19. En dupliquant les calques et les règles, nous créons cinq éléments de menu supplémentaires dans le panneau de gauche.
20. Nous écrivons le texte dans la partie principale de la page, en utilisant le même outil.
21. Ajoutez une photo dans la partie principale de la page, comme nous l'avons fait avec le logo. Pour copier une image, il suffit de la déplacer avec la souris tout en maintenant la touche enfoncée Alt. Si soudainement l'image ne correspond plus à la taille, utilisez l'outil de transformation ( Ctrl+T).
22. Dessinez l'arrière-plan du bas du site - un dégradé orange de 64 pixels de long.
23. Enregistrez la bande de l'arrière-plan inférieur d'une largeur de 1 pixel dans un fichier graphique séparé.
24. Réduisez la hauteur de la page. Il s'est avéré que tous les éléments ont déjà été dessinés, mais il reste encore de l'espace supplémentaire. C'est là que les noms de calques significatifs s'avèrent utiles. Entre autres, sélectionnez le calque d'arrière-plan (nous l'appelons « Arrière-plan ») et à l'aide de l'outil Transformation, réduisez la hauteur de notre rectangle blanc jusqu'au bord inférieur du pied de page.
25. Enregistrez le modèle dans un format de fichier .PSD (Fichier -> Enregistrer).
26. Le résultat de cette action a été un modèle de site Web simple, mais déjà d'apparence normale.
Il ne reste plus qu'à créer un modèle de site Web à partir de la mise en page PSD en utilisant HTML/CSS, mais j'en parlerai dans le prochain article.
Gardez simplement à l’esprit que WordPress génère certaines classes qui doivent être présentes dans la feuille de style. Par exemple des cours aligncenter, alignleft et alignright servent à aligner les images et les éléments de bloc, et ils doivent être inclus dans votre feuille de style (peuvent être copiés à partir de la feuille de style du thème par défaut) :
.aligncenter,
div.aligncenter(
bloc de visualisation;
marge gauche : auto ;
marge droite : auto ;
}
.alignez à gauche(
flotteur : gauche ;
}
.alignright (
Flotter à droite;
}
Les classes suivantes sont utilisées pour aligner les images qui ont des légendes (peuvent être copiées à partir du thème par défaut, corrigées ultérieurement si nécessaire) :
.wp-légende (
bordure : 1px solide #ddd ;
alignement du texte : centre ;
couleur d'arrière-plan : #f3f3f3 ;
rembourrage supérieur : 4 px ;
marge : 10px ;
/*paramètres facultatifs qui créeront des coins arrondis dans les navigateurs pris en charge*/
-moz-border-radius : 3px ;
-khtml-border-radius : 3px ;
-webkit-border-radius : 3px ;
rayon de bordure : 3 px ;
}
.wp-caption img (
marge : 0 ;
remplissage : 0 ;
frontière : 0 aucun ;
}
.wp-caption p.wp-caption-text (
taille de police : 11 px ;
hauteur de ligne : 17 px ;
remplissage : 0 4px 5px ;
marge : 0 ;
}
De plus, il existe plusieurs autres classes WordPress qui n'ont pas besoin d'être décrites dans la feuille de style, mais parce que... WordPress génère des pages en les utilisant et vous pouvez les styliser :
.catégories(...)
.cat-item /* Cette classe est affectée à toutes les catégories */)
.current-cat (/* style de catégorie actuel */)
.current-cat-parent (/* style pour le(s) ancêtre(s) de la catégorie actuelle */)
.children (/* classe pour enfant */)
.pagenav (/* navigation dans les pages */)
.page_item (/* n'importe quel élément de liste */)
.current_page_item (/* cette classe est affectée dans la liste des pages à la page active actuelle */)
.current_page_parent (/*classe pour la page parent par rapport à celle actuelle */)
.current_page_ancestor (/* n'importe quelle page des niveaux supérieurs par rapport à celle-ci */)
.widget (/* tous les widgets sont enveloppés dans cette classe */)
Pendant le processus de mise en page, utilisez des blocs et des styles, tels que définis dans les captures d'écran au début de l'article. Ce n’est pas nécessaire, mais c’est très souhaitable.
Par exemple, à l'avenir, nous connecterons un formulaire de recherche au site via un service spécial. balise wordpress , à la suite de quoi WordPress affichera le formulaire suivant :
C’est pourquoi nous en tenons compte lors de la conception du thème.
Et la dernière chose que vous devez ajouter à style.css sont des informations sur vous-même et sur le thème créé. L'information est placée en début de fichier dans les commentaires :
/*Nom du thème : créez un nom de thème unique
URI du thème : http://link-to-theme-homepage
Description : Description du sujet
Auteur : Auteur du sujet
URI de l'auteur : http://link-to-author-page
Modèle : nom du thème de l'ancêtre
Tags : balises de thème - uniquement dans la liste proposée par wordpress.org
Version : version
Eh bien, voici le texte de la licence
*/
N'oubliez pas non plus de faire capture d'écran.png et placez-le dans le dossier contenant le modèle (à la racine). Les informations ainsi placées dans la feuille de style seront affichées dans le panneau d'administration dans la section Gestion "Thème". Nous testons le modèle conçu dans les navigateurs, si tout va bien, vous pouvez continuer.
Je ne fournirai pas le code des pages du modèle conçu, car... c'est assez gros, il suffit de le télécharger, et ensuite nous travaillerons avec.
Comment fonctionne un thème wp:
Si vous ouvrez le dossier de thème par défaut (wp-content/themes/default), vous verrez de nombreux fichiers PHP (fichiers de thème) et un fichier style.css. Lorsque nous consultons un blog, WP inclut les fichiers de thème (index.php< À ce stade, la préparation préliminaire est terminée et nous pouvons passer à la création d’un thème à partir du matériel source disponible. Étape 1: Maintenant, nos fichiers modèles doivent être « coupés », c'est-à-dire extrayez le pied de page, la barre latérale et l’en-tête dans des fichiers séparés. Le diagramme montre une vue simplifiée du fichier index.php avec des marques selon lesquelles nous le découperons : Étape 2 - En-tête.php Allez maintenant dans le dossier avec le thème par défaut, ouvrez en-tête.php et copiez les balises à partir de là Puis toutes les balises
En conséquence nous obtenons :
Étape 3 - Barre latérale.php
Tout d’abord, dans le répertoire des thèmes WordPress (wp-content/themes), créez un dossier avec le nom de notre thème. Qu'il en soit ainsi ruseller_lessons. Ensuite, à partir du dossier de thème par défaut (wp-content/themes/default), copiez les fichiers commentaires.php, search.php Et 404.phpà notre dossier thématique. Ces fichiers sont responsables des commentaires et de la recherche sur le blog. Puis dans ruseller_lessons copier la feuille de style style.css notre modèle, capture d'écran.png (300x225) et dossier images.
Ouverture index.html et j'ai tout coupé avant le commentaire, créez un nouveau fichier en-tête.php et collez-y le code coupé, enregistrez-le dans le répertoire de notre thème ruseller_lessons:
Mon blog
, et
" type="text/css" media="écran" />
" />
/">
Revenons au fichier index.htm. Tout d’abord, supprimez l’intégralité du formulaire de recherche, puis découpez tout