Share
Maintenant que nous avons un cadre de base (voir les parties 1 et 2 de cette série), nous pouvons commencer à penser à intégrer des designs avec notre framework PHP. Pour le moment, nous allons nous concentrer sur la conception du front-end, y compris sur la manière dont nous pouvons faciliter la tâche de «personnaliser» notre nouveau cadre..
Jusqu'à présent, nous avons nos fichiers de base, dans une structure logique et un ensemble d'objets de base auxquels notre registre a accès. L'un de ces objets est notre gestionnaire de modèles, ce qui nous permet de générer et générer facilement une sortie HTML. La sortie est construite à partir d’une série de fichiers comprenant des images, des css et des modèles qui constituent «la peau»..
Il peut être difficile de concevoir correctement les conceptions frontales génériques du modèle. Cela est utile si le modèle HTML de base de la conception contient tout ce qu'un site Web que vous êtes susceptible de créer à l'aide de la structure. Le minimum que je considère est:
#contenu
.
#contenu
.
.Nous allons commencer par créer une structure XHTML de base pour nos pages. Nous commencerons par la section d'abord:
titre de la page
Vous pouvez modifier le type de document afin qu'il corresponde, ou même prendre des dispositions pour pouvoir le définir dans les paramètres de chaque site Web créé avec votre infrastructure. Il serait également utile de pouvoir modifier le type de site.
lang
. Il serait utile de définir également la feuille de style en tant que paramètre, que nous couvrirons dans les prochains tutoriels..
De plus, les attributs de méta description et de méta-clé peuvent être codés en dur dans l’habillage de chaque site Web que vous créez, mais il est conseillé de: donner à chaque page une description différente et un ensemble de mots-clés à empêcher les pages d'apparaître dans l'index supplémentaire de Google.
L'espace réservé pagetitle sera utilisé pour insérer le titre de la page en cours dans le modèle..
Nous pouvons maintenant passer au corps de notre fichier de modèle XHTML pour une conception frontale générique de notre framework. Pour le moment, la présentation reste simple, en supposant que la plupart des sites Web que nous créerons avec le cadre utilisent les schémas traditionnels d'en-tête, de contenu, de colonnes et de pied de page..
Comme promis, nous allons compléter un contenu de base afin de pouvoir indiquer au moins la plupart des balises susceptibles de figurer dans une page prête à l'emploi:
titre de la page Nom du site
titre de la page
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque urna augue, fringilla quis, pulvinar non, feugiat in, pede. Curabitur vitae pede. Cras vehicula varius tellus. Sed conséquat, enim tristique euismod volutpat, tellus magna aliquet risus, id aliquet eros metus chez purus.
Rubrique secondaire
Aliquam dictum, nibh eget ullamcorper condimentum, magna turpis placerat pede, tempor facilisis tortor urna commodo turpis. Classe aptent taciti sociosqu ad litora torquent par conubia nostra, par inceptos himenaeos. Cras luctus cursus velit. Nullam imperdiet turpis.
Rubrique tertiaire
Titre Les données Titre Les données
- Élément de liste
- Élément de liste
- Élément de liste
- Élément de liste
- Élément de liste
- Élément de liste
- Élément de liste
© Nom du site, 2008.
Le contenu est maintenant prêt pour un style simple.
Nous allons commencer par réinitialiser la marge et le remplissage des éléments dans notre document XHTML avec CSS:
corps, * marge: 0; rembourrage 0;
Nous prendrons un peu de temps pour attribuer un style à l'élément body et nous assurerons que les liens dans le document sont mis en évidence de manière appropriée:
body background: #FFF; couleur: # 000; font-family: "helvetica", "arial", "verdana", sans-serif; taille de police: 62,5%; a, a: actif, a: link color: # 1A64AC; texte-décoration: souligné; a: visité color: # 0D2F4F;
Ensuite, nous allons centrer notre conception dans la division #wrapper et attribuer une bordure pâle à chacune des divisions afin que nous puissions les voir au fur et à mesure que nous stylons..
#wrapper margin: 0 auto; largeur: 950px;
#wrapper, #header, #content, #column, #footer border: 1px #DDD solid;
Bien que le CSS ci-dessus ne centre pas cette conception dans Internet Explorer 6, le CSS a été maintenu de base pour permettre une flexibilité maximale. Avec un peu plus de CSS, nous avons presque un complet conception squelette pour le front-end de notre cadre - il ne reste qu'un peu de positionnement simple:
#column, #content float: left; taille de police: 125%; rembourrage: 5px; #column width: 200px; #content margin-left 5px; largeur: 725px; #header, #footer clear: both;
Il ne reste plus que des images à styler pour nous maintenant:
#column img, #content img border: 2px #DDD solid; float: gauche; marge: 0 5 px 0 10 px; img.photo background: #DDD; float: droit! important; rembourrage: 25px 2px;
Ce qui nous reste à ce stade est une simple mise en page de site Web que nous pouvons utiliser comme base du front-end de notre framework PHP:
Bien sûr, pour plus de flexibilité, il peut s'avérer utile d'autoriser 2 colonnes de contenu par défaut, ce qui peut être fait avec l'ajout d'un peu plus de XHTML et de CSS..
La prochaine étape consiste à transférer le XHTML, le CSS et les images vers un skin adapté à notre framework PHP. Pour ce faire, nous devons scinder le XHTML en trois modèles: en-tête, principal et pied de page. En raison de la structure du système de modèles, une page peut être générée à partir d’un nombre quelconque de modèles. Toutefois, au moins un en-tête, un pied de page et un modèle principal sont recommandés. En d'autres termes, nous ne devrions en principe que copier et modifier. le fichier de modèle principal si nous devions créer une nouvelle page ayant une structure légèrement différente.
Le modèle d’en-tête du framework PHP doit contenir la section de notre XHTML, ainsi que le
titre de la page Nom du site
Modèle principal du framework PHP (skins / default / templates / main.tpl.php)
Le modèle principal doit inclure les divs qui contiendront à la fois le contenu principal et tout contenu dans les colonnes. Plutôt que de copier le texte factice utilisé pour styliser des éléments tels que des paragraphes, des listes ordonnées et des tableaux, nous pouvons maintenant insérer des espaces réservés pour ce contenu, qui sera mis à jour en fonction de l'emplacement du contenu..
Le contenu de l'espace réservé est:
- pagetitle le titre de la page.
- maincontent le contenu principal de la page.
- btitle et bcontent en-tête et contenu pour des blocs de contenu. Ceci est inclus dans une boucle rcolumn afin que plusieurs blocs puissent être placés dans la colonne.
titre de la page
contenu principalbtitle
bcontentModèle de pied de page pour le framework PHP (skins / default / templates / footer.tpl.php)
Enfin, le XHTML restant est placé dans le fichier de pied de page, qui ferme le document XHTML et la section body. Nous l'utilisons généralement pour inclure un avis de droit d'auteur et un lien "Web Design by" sur nos sites Web..
© Nom du site, 2008.
Toutes nos excuses pour la rupture de PHP dans notre série, mais il est important de construire les modèles pertinents au format skin pour notre framework et les applications qui l'utilisent. Partie 4 de cette Développement du framework PHP5 La série couvrira des considérations de base en matière de sécurité et un gestionnaire d’authentification de base, avant de passer à la création de notre modèle de gestion de contenu et à la manière dont les modèles s’assemblent dans la cinquième partie. des événements utilisateurs de manière innovante.
Accentsconagua