Modèle Pjblog créant un didacticiel hautement recommandé_Experience Exchange

Mise à jour le 30.1.2007...Réimprimé de http://www.dnxh.cn/blog/article.asp?id=155
La base d'utilisateurs de Pjblog est Devenant de plus en plus grand, un blog équivaut à la maison en ligne d'un blogueur. À l'ère actuelle de recherche de l'individualité, chacun souhaite créer un skin personnalisé pour son blog qui correspond à ses propres caractéristiques. Mais après tout, cela implique certaines connaissances et nous devons étudier dur pour réaliser nos souhaits. Je vais repartir de zéro, ce qui est probablement un processus comme celui-ci : Préparation → Concept de peau → Dessin → Découpage → Écriture CSS → Aperçu → Compatibilité de débogage → L'embellissement des détails est un processus cyclique . Je souhaite utiliser ce didacticiel pour aider tout le monde à comprendre comment créer un skin. Vous n'avez pas besoin d'utiliser un skin créé par d'autres. Vous pouvez compter sur vos propres efforts pour décorer votre blog avec beauté et personnalité. Très excitant, lisons la suite...
1. Préparation
1.1 Quelques bases nécessaires
Vous Il faut avoir le désir d'apprendre des connaissances, c'est la condition préalable à tout. Vous avez une certaine compréhension de l'utilisation de Pjblog (si vous ne savez pas ce qu'est Skin et comment l'installer, nous vous déconseillons de poursuivre votre lecture). Lorsqu’on fait Skin, il faut être prudent, strict avec soi-même et avoir un certain sens de l’esthétique. Il est préférable de se familiariser avec certains logiciels de dessin (Adobe Potoshop, Fireworks, etc.). Tomato a réalisé un très bon tutoriel sur CSS (inscription obligatoire).
2.2 Outils impliqués
Tout d'abord, il faut avoir un ordinateur, et la couleur de l'écran n'est pas très mauvaise (l'écran LCD de mon ordinateur portable fait moi abasourdi...) . Logiciels de dessin Adobe Potoshop, Fireworks et autres. Outil d'écriture CSS, vous pouvez bien sûr également utiliser le Bloc-notes pour écrire. Logiciel de correspondance des couleurs, logiciel de capture d'écran. Ceux-ci sont essentiellement disponibles en téléchargement sur ce site. Afin d'éviter que le site ne soit bloqué en raison d'un trafic excessif, je ne peux qu'augmenter le niveau de téléchargement et modifier aléatoirement l'adresse de téléchargement. Veuillez vous inscrire et télécharger, merci pour votre coopération !
Version chinoise simplifiée officielle de Macromedia Studio 8.0
Adresse de téléchargement d'Emule : http://lib.verycd.com/2005/10/14/0000069569.html
Page Web avec laquelle je suis d'accord Pour les logiciels de production, nous utilisons ici principalement Fireworks dans la suite (il est utilisé dans le tutoriel). Bien entendu, vous pouvez également utiliser Adobe Photoshop.
Outil d'écriture CSS EditPlus V2.1.2 Build 147 version chinoise
Adresse de téléchargement : Cliquez pour télécharger le fichier
Bien sûr, certaines personnes disent que ce n'est pas le cas Est-il préférable d'utiliser Dreamweaver ? Il n'est pas recommandé de l'utiliser ici. Il est plus facile de mémoriser la signification du code par écriture manuscrite. De plus, l'écriture visuelle CSS n'est pas très idéale. À l'origine, TopStyle3 est le meilleur outil pour écrire visuellement du CSS, mais le CSS entre Pjblog est divisé en plusieurs fichiers et l'effet n'est pas très évident lors de son utilisation.
Outil de correspondance des couleurs Color Schemer Studio1.5
Adresse de téléchargement : Cliquez pour télécharger le fichier
La correspondance des couleurs est la première étape pour concevoir Peau. Cet outil est plus professionnel dans la correspondance des couleurs.
Su Yu Style Sheet Chinese Manual 2.0 (ci-après dénommé « Manuel »)
Adresse de téléchargement : Cliquez pour télécharger le fichier
Logiciel de débogage Firefox
Adresse de téléchargement : Cliquez pour télécharger le fichier

94 % des personnes utilisent désormais IE, mais le nombre d'utilisateurs de Firefox augmente également. Je n’entrerai pas ici dans les détails sur la qualité de Firefox. Mais il doit y avoir des problèmes de compatibilité avec CSS entre les deux navigateurs.
Outil de capture d'écran HyperSnap5
Adresse de téléchargement : Cliquez pour télécharger le fichier
C'est aussi un logiciel de capture d'écran que je trouve relativement puissant après l'avoir utilisé .
Si vous vous êtes assoupi[79], reposez-vous...
2. Concevez votre peau
2.1 Correspondance des couleurs
2.1 Correspondance des couleurs 🎜>La première impression de votre blog est visuelle, la couleur est donc très importante.

Ici, nous utilisons du blanc, du gris et du rouge. Généralement, le gris est universel, tout comme le groupe sanguin O dans les groupes sanguins.
2.2 Mise en page

La mise en page n'est pas trop compliquée Une fois que vous avez compris la structure, vous pouvez utiliser votre imagination. Ce dont je veux parler ici, c'est du CSS (Cascading Style Sheets). Si nous disons que le design skin est du design graphique, je pense que c’est faux. Du point de vue de l'appréciation, il s'agit d'une œuvre en deux dimensions, mais du point de vue de la conception, elle est en trois dimensions. Sinon, comment pourrait-il y avoir un attribut comme z-index ? De plus, nous pouvons faire une comparaison. Les couches de CSS sont similaires aux couches de PS ou FW. La seule différence réside dans : l'ordre d'échange des couches - PS peut mais DIV+CSS ne peuvent pas ; (certains navigateurs le peuvent). Comme le montre l'image ci-dessus, nous pouvons voir la structure de Pjblog et l'ordre des DIV. Le premier couvre le second (bien sûr, il peut aussi être transparent). Ne soyons pas fantaisistes d’abord. La mise en page d’un blog est généralement comme ça.
L'en-tête ici est l'en-tête, qui contient le nom du blog, le sous-titre et le menu horizontal
Tbody est le contenu du milieu, qui contient le contenu principal (mainContent est le journal que nous écrivons, tout comme là où se trouve ce tutoriel ; ), barre latérale ;
le pied est en bas, qui contient certaines de nos informations sur les droits d'auteur, nos dépôts, etc.
Nous avons tellement parlé de la structure de Pjblog, c'est-à-dire que c'est dit. être la relation entre Box et Box. Et comment est composé Box ? L'expert Douglas a déjà réalisé ici des modèles Flash, qui expliquent clairement la marge, la couleur d'arrière-plan, l'image d'arrière-plan, le remplissage, la bordure et la relation entre eux.
Bien sûr, il s'agit de la partie principale de Pjblog Chaque partie contient également d'autres DIV, et ces détails (tels que le menu horizontal, le panneau de contenu de la barre latérale, le module de contenu principal, etc.) embellissent également notre. blog. Les points principaux, mais procédons lentement. Regardez d'abord le corps principal afin d'avoir une idée approximative de la peau dans votre esprit et d'être pleinement préparé pour notre prochain dessin.
J'ai réalisé un modèle structurel de Pjblog ci-dessous.
3. Dessin
3.1 Comprendre l'arrière-plan
Pourquoi y a-t-il une section spéciale sur l'arrière-plan ? Car les images utilisées en CSS existent toutes sous forme de fond. Nous ne devons jamais oublier ce point dans le processus de dessin et de découpe des images. Nous devons réduire la taille des images autant que possible (de nombreux skins simples n'utilisent désormais aucune image ou utilisent moins d'images), afin de réduire le nombre de téléchargements et de s'améliorer. Vitesse de navigation des pages.
Jetons ensuite un coup d'œil à background :
Ses attributs incluent
background-color color
background-image image
background-repeat Méthode de répétition
background-attachment S'il faut faire défiler
background-position Position
Et quand on dessine, on besoin Quels sont ceux auxquels vous prêtez attention ? Tout d’abord, examinons la relation entre la couleur et l’image. La couleur est toujours affichée en dessous et l’image est au-dessus. La fonction de ceci est que nous n'avons pas besoin d'utiliser l'image mais la couleur dans certaines grandes zones monochromes ; l'autre est la répétition, qui permet d'afficher l'image de manière répétée ou non en X ou Y. La fonction de ceci est que s'il y a une telle répétition dans un certain arrière-plan, lorsque nous coupons l'image, il suffit de couper la largeur (longueur) à 1 px, nous devons combiner la structure de Pjblog pour utiliser pleinement ces caractéristiques et cultiver notre propre pensée 3D.
3.2 Production du corps principal
Prenons la peau que j'utilise maintenant comme exemple pour décrire brièvement le processus de dessin.
Voyons d’abord quel genre de sujet nous voulons traiter (cela devrait déjà avoir été formé dans votre esprit, ou vous en avez peut-être une vague idée).

Le ton principal est blanc avec une petite ombre des deux côtés, et les côtés sont gris (#EEEEEE) de 230px de large.
Ouvrez Fireworks et créez un nouveau fichier de 1000px×768px avec un fond blanc (car l'arrière-plan principal de ce Skin est blanc). Assurez-vous que notre contenu principal a une largeur de 800 px, dessinez un rectangle d'une largeur de 800 px et d'une hauteur supérieure à celle du canevas, et ajoutez une bordure grise de 1 px de large (#999999). Utilisez la lueur du filtre pour ajouter des ombres. Les paramètres du filtre sont définis sur la largeur 5, l'adoucissement 10, la transparence 15, la couleur noire et le décalage 0.
Ajoutez une barre latérale et dessinez un rectangle d'une largeur de 230 px et d'une hauteur supérieure à la toile, et placez-le à gauche. Attention à ne pas supprimer la bordure de 1 px. De cette façon, notre partie principale est dessinée. À quoi devons-nous faire attention lors de la réalisation de la partie principale ?La principale chose que nous devons considérer est la hauteur de la page, car la hauteur de la page changera avec différents contenus, nous devons donc créer une hauteur flexible. Nous pouvons utiliser Background-repeat pour définir la valeur sur y. Ensuite, notre arrière-plan est répété verticalement.
3.2 Production de la tête
De même, jetons d'abord un coup d'oeil au type de Top que nous voulons fabriquer.

Ce que nous voyons, ce sont deux barres horizontales translucides texturées pressées contre le corps principal
Nous dessinons deux rectangles d'une largeur plus grande que la toile (car nous voulons ces deux largeurs adaptatives). Ajoutez de la texture au rectangle en ajustant le dégradé et ajustez la transparence à 80.

De cette façon, notre Top est prêt.
3.3 Réalisation du bas
La réalisation du bas est généralement relativement simple Ici, une barre horizontale est également ajoutée pour correspondre au Haut. largeur adaptative ici (bien sûr, cela peut aussi être fait, commençons simplement). Ci-dessous se trouve un rectangle gris avec une barre horizontale en haut.

À ce stade, notre diagramme a essentiellement été dessiné. Vous ne le verrez peut-être que pendant un certain temps, mais cela peut parfois nous prendre plusieurs jours entre la conception et la réalisation. Afin de faire correspondre l'effet, il est préférable d'ajouter du contenu. Jouez avec la couleur du lien et modifiez-la à plusieurs reprises pour obtenir le meilleur effet.
3.4 Découpage
Le soi-disant découpage, comme son nom l'indique, consiste à découper l'image finie en morceaux dont vous avez besoin. De nombreux amis sont coincés ici et ne savent pas comment le couper correctement. Ce que je veux dire ici, c'est qu'en partant du principe que cela peut montrer votre effet, plus l'image est petite, mieux c'est, et moins c'est mieux. Alors que faut-il couper ? Comment couper ? En fait, il est découpé selon vos besoins CSS. Vous pouvez d'abord ignorer cela. Après avoir appris CSS, lorsque vous souhaitez définir l'arrière-plan dans une certaine boîte, vous penserez aux images. Vous pourrez ensuite couper un morceau de l'image préparée et l'utiliser. Petit à petit, vous comprendrez comment découper l’image. L'image ci-dessous est une tranche de l'image d'arrière-plan de la tête. Nous pouvons également voir quel outil est utilisé pour couper l'image (je pense que Fireworks a une meilleure fonction de découpe d'image). Dans Fireworks, les tranches sont placées dans le calque de la page Web. Nous pouvons nommer les tranches, et lorsque nous voulons cette tranche, nous pouvons exporter l'image. Ce dont je veux parler ici, c'est du format de l'image exportée, qui correspond aux propriétés de la colonne d'optimisation. Personnellement, je préfère le format PNG32, qui supporte le canal Alpha (tendance future). Si vous souhaitez une image opaque, il est également bon de choisir JPG (sa taille est petite).

Le fichier global en couches PNG est fourni pour que tout le monde puisse l'étudier. Cliquez pour télécharger ce fichier
Nous pouvons le voir lorsque nous ouvrons ce fichier. Par exemple, la largeur de l'en-tête, de l'arrière-plan principal et du bas n'est pas de 800 pixels comme nous l'avons dit au début, car nous avons ajouté des ombres à l'extérieur. Assurez-vous de prendre en compte cette taille (c'est généralement obligatoire, mais il est facile de se tromper lorsque la couleur de l'ombre et de l'arrière-plan ne sont pas très différentes, alors soyez prudent). L'arrière-plan global n'a pas besoin d'être très haut, car nous pouvons utiliser CSS pour créer la couleur blanche ci-dessous. S'il est trop grand, il sera gaspillé. Il y a aussi l'image d'arrière-plan du bouton. Si vous disposez du mode contact de la souris, il est recommandé de ne pas la diviser en deux images. Nous allons la créer sur une seule image et contrôler la position de l'image via CSS pour obtenir des arrière-plans différents. j'attendrai que nous parlions de CSS Plus de détails.
4. Écriture du code
4.1 Style global
Enfin, nous sommes entrés dans la partie principale, nous allons utilisez CSS＋DIV embellissez notre blog. De nombreux amis posent toujours cette question : comment puis-je faire du skin ? Ce que je veux dire ici, c'est que vous devez d'abord comprendre la relation entre CSS et DIV. DIV est comme le squelette d'une maison (murs de briques, etc.), et CSS est la décoration intérieure et extérieure. Si vous ne comprenez pas comment est composé le squelette, comment pouvez-vous le décorer ? Un autre point important à mentionner est que l’une des caractéristiques du CSS est que ce qui est défini ultérieurement remplace ce qui a été défini auparavant. Par exemple, si je définis la couleur de la police comme étant rouge dans le style global et si je définis la couleur comme étant bleue dans le corps principal plus tard, alors ce que nous verrons sera bleu.
Allons droit au but, parlons d'abord des styles globaux (dans Pjblog se trouve le fichier global.css sous le dossier Skin). Ici, nous pouvons définir l'apparence de balises spécifiques tout au long de la page. Les balises spécifiques telles que body, img, select, th, etc. sont des balises intégrées. Le style ici est valable pour le contenu et le DIV à l'intérieur de .Lihat kod ( ialah kod CSS, dianggap sebagai reka letak DIV dan akan diwakili oleh kod boleh jalan ini dalam masa depan. Tiada ulangan lagi)

<style type="text/css"> <!-- body { font-family: Arial, Helvetica, sans-serif;/*设置字体*/ background-color: #FFFFFF;/*背景颜色*/ background-repeat: repeat-x;/*背景图像的重复方向*/ margin: 0px;/*边距为0*/ padding: 0px;/*补白为0，这里假如你不要边框和补白一般最好设置一下0值。就像做表格里的一样*/ background-image: url(skins/dnxh10/bg.jpg);/*背景图像位置*/ color: #888888;/*前景颜色*/ } img { max-width: 100%;height:auto;/*图片的宽度（max-width只对非IE核心浏览器有效）*/ border: none;/*无边框*/ } select { font-family: "Times New Roman", Times, serif; } --> </style>