Allant de tableaux à . (Partie 1 - Créer votre mise en page) 24 octobre 2008 par · Feiereisel Brady 3 Commentaires 
OK, ce que nous allons accomplir ici est de prendre votre mise en page Photoshop et la cartographie avec CSS - div, au lieu de HTML par défaut de Photoshop - tables. Afin de réussir dans ce tutoriel, vous devez déjà connaître le codage HTML, CSS et une certaine expérience est utile aussi bien.
Permet de commencer avec les bases. Au lieu d'utiliser HTML et en utilisant des cellules de tableau de tenir nos images de fond pour former la mise en page, nous allons utiliser l <div> »qui peut agir de la même façon mais sont plus faciles à modifier et le format pour chaque <div> nous serons attachés une pièce d'identité à elle, de sorte qu'ils site sait comment mettre en forme la cellule. Ainsi, le format du code HTML est maintenant> <div id="idname ici"> </ div. Maintenant, nous sommes arrivés à définir les paramètres de la cellule qui correspond à ce nom id, cela va à l'intérieur de la balise <head>.
il de commencer, j'ai mis la couleur de fond et l'image. Pour celui-ci j'ai décidé d'utiliser
qui se trouve à http://urbanm.net/blog/bg.jpg, le CSS est codant pour cette
body (
background-image: url (http://urbanm.net/blog/bg.jpg);
background-repeat: repeat-x;
background-color: # 010066;
)
Que ce fait est en train tout aspect HTML qui a été codé avec <body> d'avoir l'image de fond de soi le répète horizontalement jusqu'à ce qu'il remplisse le navigateur ensemble, et l'image de fond pour correspondre au bas de la pente que nous mettons à notre image, de sorte qu'il a un transfert en douceur.
Vous devriez avoir quelque chose comme PRÉSENT
Maintenant, nous avons à vous soucier de la teneur réelle du site. Je normalement de maintenir le centre tout aligné, si vous avez au centre aligner tout ce qui est votre élément body. Vous pouvez ajouter <center> après la balise. Alors maintenant, votre corps HTML devrait ressembler à la suite:
<body>
<center>
</ Center>
</ Body>
Le temps de mettre notre bannière sur le site. Nous devons créer la cellule qui contiendra la bannière, entre ur <center> tags permet de saisir notre première cellule en plaçant un> <div id="banner"> </ div il. Sans le réglage des paramètres de l'id étiquetés "banner" rien ne s'affiche, nous devons donc définir le paramètre de cette cellule avec CSS. Je vais utiliser l'image suivante que ma bannière.
banner # (
background-image: url (http://urbanm.net/blog/banner.png);
Hauteur: 200px;
largeur: 800px;
)
Qu'est-ce qui précède est dit, c'est que n'importe quel objet html qui a l'étiquette d'identification de la bannière sera l'image de fond ci-dessus, et elle aura aussi la hauteur et la largeur de l'image de bannière qui se trouvent être 200px par 800px. Notre site est maintenant ramasser, il devrait maintenant ressembler à quelque chose comme PRÉSENT .
Maintenant, je devrais normalement mettre la barre de navigation, mais je vais discuter de cette étape dans la partie 2 de ce tutoriel.
Sauter la barre de navigation, nous nous déplaçons sur les boîtes de contenu qui contiendra toutes nos informations. Lors de votre image, n'oubliez pas que votre volonté que ce soit d'épissage en 3 endroits différents, la partie supérieure, qui contient l'en-tête, pour moi, je suis un fan de bords arrondis. L'épissage deuxième vous aurez sera le contenu de l'image qui se répète verticalement afin de remplir l'espace que vous avez rempli toutes vos informations sur le. L'épissage 3ème est le pied de page, une fois de plus je suis un fan des bords arrondis. Voici les trois images que j'ai utilisé pour cette partie. Header - Contenu Repeater - Pied de page .
Quand tout est mis en place il fait cette case. Maintenant, nous devons mettre en place le codage HTML de sorte qu'il permet pour les images pour former la boîte correctement. Nous allons utiliser quatre cellules total pour former notre boîte de contenu. Le premier des quatre va tenir les trois autres cellules à l'intérieur de celui-ci. Le but de cette cellule, vous comprendrez plus tard avec plus de compréhension, mais ce sera essentiellement vous permettre de changer les styles de texte sur les différentes pages vous allez faire si nécessaire. commençons donc le code HTML, c'est le nouveau code HTML.
<body>
<center>
> <div Id="banner"> </ div>
id="indexcontent"> <div
> <div Id="header"> </ div>
> <div Id="contentrepeater"> </ div>
> <div Id="footer"> </ div>
</ Div>
</ Center>
</ Body>
Maintenant, nous avons mis en place des cellules que nous voulons, mais nous devons maintenant définir les paramètres d'identification de chaque étiquette. Cela devrait ressembler à ceci.
indexcontent # (
display: block;
width: 600px;
)
# # Header (indexcontent
Hauteur: 35px;
width: 600px;
background-image: url (http://urbanm.net/blog/header.png);
background-repeat: no-repeat;
)
# # Indexcontent contentbg (
background-image: url (http://urbanm.net/blog/content.png);
background-repeat: repeat-y;
Hauteur: 150px;
width: 600px;
)
# # Footer (indexcontent
background-image: url (http://urbanm.net/blog/footer.png);
background-repeat: no-repeat;
Hauteur: 37px;
width: 600px;
)
Whoa - qui est beaucoup à faire en une seule étape à droite? Permettez-moi de l'expliquer pour vous et pour vous aider.
A partir de indexcontent #, nous avons mis la largeur de celui-ci à 600px qui est ce que mes images boîte de contenu. Nous ne fixons pas la hauteur, afin qu'il puisse développer et réduire en fonction de la quantité de contenu que vous avez dans vos cellules à l'intérieur de celui-ci. Nous avons mis l'affichage de bloquer, de sorte que la cellule se développera pour le montant exact de pixels sur sa hauteur.
Suivant nous avons obtenu le indexcontent # # header, les dimensions sont définies pour correspondre à la taille de l'image et nous avons l'image de fond mis à l'emplacement correct.
Que nous avons # # indexcontent contentbg, nous avons la bonne image choisie comme image de fond, et nous avons besoin de la mettre en repeat-y, de sorte qu'il se répète verticalement pour s'adapter à la taille des cellules. J'ai choisi 150px pour sa hauteur, juste pour vous les gars pouvez voir l'effet de répéter, vous modifier ce pour s'adapter à tous les contenus que vous avez en son sein.
Enfin, nous avons indexcontent # # footer, ce qui est tout de même que l'en-tête.
A présent, vous devriez avoir votre structure de base mis en place pour vous finir!
Restez à l'écoute de la partie 2, pour expliquer comment faire la barre de navigation.
Commentaires
3 réponses à "Le passage de tableaux à . (Partie 1 - Créer votre mise en page) "
-
24 octobre 2008 par · Feiereisel Brady 3 Commentaires
OK, ce que nous allons accomplir ici est de prendre votre mise en page Photoshop et la cartographie avec CSS - div, au lieu de HTML par défaut de Photoshop - tables. Afin de réussir dans ce tutoriel, vous devez déjà connaître le codage HTML, CSS et une certaine expérience est utile aussi bien.
Permet de commencer avec les bases. Au lieu d'utiliser HTML et en utilisant des cellules de tableau de tenir nos images de fond pour former la mise en page, nous allons utiliser l <div> »qui peut agir de la même façon mais sont plus faciles à modifier et le format pour chaque <div> nous serons attachés une pièce d'identité à elle, de sorte qu'ils site sait comment mettre en forme la cellule. Ainsi, le format du code HTML est maintenant> <div id="idname ici"> </ div. Maintenant, nous sommes arrivés à définir les paramètres de la cellule qui correspond à ce nom id, cela va à l'intérieur de la balise <head>.
il de commencer, j'ai mis la couleur de fond et l'image. Pour celui-ci j'ai décidé d'utiliser
qui se trouve à http://urbanm.net/blog/bg.jpg, le CSS est codant pour cette
body (
background-image: url (http://urbanm.net/blog/bg.jpg);
background-repeat: repeat-x;
background-color: # 010066;
)
Que ce fait est en train tout aspect HTML qui a été codé avec <body> d'avoir l'image de fond de soi le répète horizontalement jusqu'à ce qu'il remplisse le navigateur ensemble, et l'image de fond pour correspondre au bas de la pente que nous mettons à notre image, de sorte qu'il a un transfert en douceur.
Vous devriez avoir quelque chose comme PRÉSENT
Maintenant, nous avons à vous soucier de la teneur réelle du site. Je normalement de maintenir le centre tout aligné, si vous avez au centre aligner tout ce qui est votre élément body. Vous pouvez ajouter <center> après la balise. Alors maintenant, votre corps HTML devrait ressembler à la suite:
<body>
<center>
</ Center>
</ Body>
Le temps de mettre notre bannière sur le site. Nous devons créer la cellule qui contiendra la bannière, entre ur <center> tags permet de saisir notre première cellule en plaçant un> <div id="banner"> </ div il. Sans le réglage des paramètres de l'id étiquetés "banner" rien ne s'affiche, nous devons donc définir le paramètre de cette cellule avec CSS. Je vais utiliser l'image suivante que ma bannière.
banner # (
background-image: url (http://urbanm.net/blog/banner.png);
Hauteur: 200px;
largeur: 800px;
)
Qu'est-ce qui précède est dit, c'est que n'importe quel objet html qui a l'étiquette d'identification de la bannière sera l'image de fond ci-dessus, et elle aura aussi la hauteur et la largeur de l'image de bannière qui se trouvent être 200px par 800px. Notre site est maintenant ramasser, il devrait maintenant ressembler à quelque chose comme PRÉSENT .
Maintenant, je devrais normalement mettre la barre de navigation, mais je vais discuter de cette étape dans la partie 2 de ce tutoriel.
Sauter la barre de navigation, nous nous déplaçons sur les boîtes de contenu qui contiendra toutes nos informations. Lors de votre image, n'oubliez pas que votre volonté que ce soit d'épissage en 3 endroits différents, la partie supérieure, qui contient l'en-tête, pour moi, je suis un fan de bords arrondis. L'épissage deuxième vous aurez sera le contenu de l'image qui se répète verticalement afin de remplir l'espace que vous avez rempli toutes vos informations sur le. L'épissage 3ème est le pied de page, une fois de plus je suis un fan des bords arrondis. Voici les trois images que j'ai utilisé pour cette partie. Header - Contenu Repeater - Pied de page .
Quand tout est mis en place il fait cette case. Maintenant, nous devons mettre en place le codage HTML de sorte qu'il permet pour les images pour former la boîte correctement. Nous allons utiliser quatre cellules total pour former notre boîte de contenu. Le premier des quatre va tenir les trois autres cellules à l'intérieur de celui-ci. Le but de cette cellule, vous comprendrez plus tard avec plus de compréhension, mais ce sera essentiellement vous permettre de changer les styles de texte sur les différentes pages vous allez faire si nécessaire. commençons donc le code HTML, c'est le nouveau code HTML.
<body>
<center>
> <div Id="banner"> </ div>
id="indexcontent"> <div
> <div Id="header"> </ div>
> <div Id="contentrepeater"> </ div>
> <div Id="footer"> </ div>
</ Div>
</ Center>
</ Body>
Maintenant, nous avons mis en place des cellules que nous voulons, mais nous devons maintenant définir les paramètres d'identification de chaque étiquette. Cela devrait ressembler à ceci.
indexcontent # (
display: block;
width: 600px;
)
# # Header (indexcontent
Hauteur: 35px;
width: 600px;
background-image: url (http://urbanm.net/blog/header.png);
background-repeat: no-repeat;
)
# # Indexcontent contentbg (
background-image: url (http://urbanm.net/blog/content.png);
background-repeat: repeat-y;
Hauteur: 150px;
width: 600px;
)
# # Footer (indexcontent
background-image: url (http://urbanm.net/blog/footer.png);
background-repeat: no-repeat;
Hauteur: 37px;
width: 600px;
)
Whoa - qui est beaucoup à faire en une seule étape à droite? Permettez-moi de l'expliquer pour vous et pour vous aider.
A partir de indexcontent #, nous avons mis la largeur de celui-ci à 600px qui est ce que mes images boîte de contenu. Nous ne fixons pas la hauteur, afin qu'il puisse développer et réduire en fonction de la quantité de contenu que vous avez dans vos cellules à l'intérieur de celui-ci. Nous avons mis l'affichage de bloquer, de sorte que la cellule se développera pour le montant exact de pixels sur sa hauteur.
Suivant nous avons obtenu le indexcontent # # header, les dimensions sont définies pour correspondre à la taille de l'image et nous avons l'image de fond mis à l'emplacement correct.
Que nous avons # # indexcontent contentbg, nous avons la bonne image choisie comme image de fond, et nous avons besoin de la mettre en repeat-y, de sorte qu'il se répète verticalement pour s'adapter à la taille des cellules. J'ai choisi 150px pour sa hauteur, juste pour vous les gars pouvez voir l'effet de répéter, vous modifier ce pour s'adapter à tous les contenus que vous avez en son sein.
Enfin, nous avons indexcontent # # footer, ce qui est tout de même que l'en-tête.
A présent, vous devriez avoir votre structure de base mis en place pour vous finir!
Restez à l'écoute de la partie 2, pour expliquer comment faire la barre de navigation.
Commentaires
3 réponses à "Le passage de tableaux à
Les gens continuent d'utiliser la balise? Pourquoi ne pas utiliser les CSS pour centrer le contenu?
^ Cela devrait être le centre de tag.
Le poste vraiment de sens pour moi ... mais si vous essayez de vérifier certains de mes tutoriaux vidéo dans le cadre de la présente CSS ... pour sûr que vous en savoir plus ... hors de lui ...