Allant de tableaux à . (Partie 1 - Création de votre mise en page) Octobre 24, 2008 par Brady Feiereisel · 3 Commentaires 
Buzz This Post 
Digg This Post 
Reddit 
Stumble This Post
OK, ce que nous allons accomplir ici est de prendre votre mise en page Photoshop et cartographie le avec CSS - tableaux div, au lieu de HTML par défaut de Photoshop -. Afin de réussir dans ce tutoriel, vous devez connaître déjà 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 pour tenir nos images de fond pour former la mise en page, nous allons utiliser <div> 's qui peut agir de la même manière, mais sont beaucoup plus faciles à éditer et formater pour chaque <div> nous attacherons un identifiant à elle, de sorte qu'ils site sait comment mettre en forme la cellule. Ainsi le format du codage HTML est désormais id="idname <div 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>.
A partir it off, j'ai mis la couleur de fond et l'image. Pour celle-ci j'ai décidé d'utiliser
qui est situé au http://urbanm.net/blog/bg.jpg, le codage CSS pour cela est
body (
background-image: url (http://urbanm.net/blog/bg.jpg);
background-repeat: repeat-x;
background-color: # 010066;
)
Ce que ce fait met tout aspect HTML qui a été codé avec <body> pour avoir l'image d'arrière-plan répéter auto horizontalement jusqu'à ce qu'il remplisse le navigateur entier, et l'image de fond pour correspondre au bas de la pente que nous mettons dans notre image, de sorte qu'elle ait un transfert en douceur.
Vous devriez avoir quelque chose comme PRÉSENT
Maintenant, nous avons à vous soucier du contenu réel du site. Je continue normalement centre tout aligné, donc vous devez aligner au centre tout au sein de votre <body> élément. Vous pouvez ajouter <center> après la balise. Alors maintenant, votre corps HTML doit ressembler à suivre:
<body>
<center>
</ center>
</ body>
Le temps de mettre notre bannière sur le site. Nous devons créer la cellule qui tiendra la bannière, entre ur <center> tags laisse entrer dans notre première cellule en plaçant un <div id="banner"> </ div> there. Sans fixer les paramètres à l'id étiqueté "banner" rien ne s'affiche, il nous faut donc définir le paramètre de cette cellule avec les CSS. Je vais utiliser l'image suivante comme ma bannière.
# banner (
background-image: url (http://urbanm.net/blog/banner.png);
height: 200px;
width: 800px;
)
Qu'est ce qui précède est dit, c'est que tous les objets HTML qui possède 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 la bannière qui se trouvent être 200px par 800px. Notre site se redresse maintenant, il devrait maintenant ressembler à quelque chose comme PRÉSENT.
Maintenant, je mettrait normalement la barre de navigation, mais je vais discuter de cette étape dans la partie 2 du tutoriel.
Skipping la barre de navigation, nous nous déplaçons sur le contenu des boîtes qui contiendront 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'épissure 2 Vous aurez sera l'image de contenu qui va se répéter verticalement afin de remplir l'espace que vous avez rempli toutes vos informations sur. L'épissure 3ème est le pied de page, encore une fois je suis fan de bords arrondis. Voici les trois images que j'ai utilisé pour cette partie. Header - Contenu Repeater - Pied de page.
Quand il est mis tous ensemble qu'il forme cette case. Maintenant, nous devons mettre en place le codage HTML pour qu'elle permet pour les images pour former la boîte correctement. Nous allons utiliser quatre cellules au total pour former notre boîte de contenu. Le premier des quatre va tenir les cellules de trois autres à l'intérieur. Le but de cette cellule, vous comprendrez plus tard avec le plus de compréhension, mais ce ne sera pas radicalement vous permettent de changer les styles de texte sur les différentes pages vous allez prendre, si nécessaire. Laisse ainsi démarrer le HTML, c'est le nouveau HTML.
<body>
<center>
id="banner"> <div </ div>
<div id="indexcontent">
id="header"> <div </ div>
id="contentrepeater"> <div </ div>
id="footer"> <div </ div>
</ div>
</ center>
</ body>
Maintenant, nous avons mis en place des cellules, comme nous voulons, mais nous devons maintenant établir les paramètres d'identification pour chaque étiquette. Cela devrait ressembler à quelque chose comme ça.
# indexcontent (
display: block;
width: 600px;
)
# header indexcontent # (
height: 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;
height: 150px;
width: 600px;
)
# footer indexcontent # (
background-image: url (http://urbanm.net/blog/footer.png);
background-repeat: no-repeat;
height: 37px;
width: 600px;
)
Whoa - qu'il ya beaucoup à faire dans le droit une seule étape? Permettez-moi de l'expliquer pour vous et pour vous aider Out.
À partir du # indexcontent, nous fixons la largeur de celui-ci à 600px qui est ce que mes images sont Contenu de la boîte. Nous ne fixons pas de la hauteur, de sorte 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 en bloc, de sorte que la cellule sera élargi pour la bonne quantité de pixels sur sa hauteur.
Suivant nous avons obtenu le indexcontent # # header, les dimensions sont fixés pour correspondre à la taille de l'image et nous avons l'image de fond définie sur l'emplacement correct.
Que nous n'en avons indexcontent # # contentbg, nous avons sélectionné l'image correcte que notre image de fond, et nous avons besoin de la mettre en repeat-y, de sorte qu'elle se répète verticalement pour s'adapter à la taille des cellules. J'ai choisi 150px par sa hauteur, juste pour vous les gars pouvez voir l'effet de répéter, vous ne changerait cela pour convenir à tous les contenus que vous avez en son sein.
Enfin, nous avons footer indexcontent # #, qui est exactement la même que l'en-tête.
A présent, vous devriez avoir votre disposition de base mis en place pour vous de finir!
Restez à l'écoute pour la partie 2, pour expliquer comment faire la barre de navigation.
Commentaires
3 Responses to "allant de tableaux à . (Partie 1 - Création de votre mise en page) "
Octobre 24, 2008 par Brady Feiereisel · 3 Commentaires Buzz This Post Digg This Post Reddit Stumble This Post
OK, ce que nous allons accomplir ici est de prendre votre mise en page Photoshop et cartographie le avec CSS - tableaux div, au lieu de HTML par défaut de Photoshop -. Afin de réussir dans ce tutoriel, vous devez connaître déjà 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 pour tenir nos images de fond pour former la mise en page, nous allons utiliser <div> 's qui peut agir de la même manière, mais sont beaucoup plus faciles à éditer et formater pour chaque <div> nous attacherons un identifiant à elle, de sorte qu'ils site sait comment mettre en forme la cellule. Ainsi le format du codage HTML est désormais id="idname <div 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>.
A partir it off, j'ai mis la couleur de fond et l'image. Pour celle-ci j'ai décidé d'utiliser
qui est situé au http://urbanm.net/blog/bg.jpg, le codage CSS pour cela est
body (
background-image: url (http://urbanm.net/blog/bg.jpg);
background-repeat: repeat-x;
background-color: # 010066;
)
Ce que ce fait met tout aspect HTML qui a été codé avec <body> pour avoir l'image d'arrière-plan répéter auto horizontalement jusqu'à ce qu'il remplisse le navigateur entier, et l'image de fond pour correspondre au bas de la pente que nous mettons dans notre image, de sorte qu'elle ait un transfert en douceur.
Vous devriez avoir quelque chose comme PRÉSENT
Maintenant, nous avons à vous soucier du contenu réel du site. Je continue normalement centre tout aligné, donc vous devez aligner au centre tout au sein de votre <body> élément. Vous pouvez ajouter <center> après la balise. Alors maintenant, votre corps HTML doit ressembler à suivre:
<body>
<center>
</ center>
</ body>
Le temps de mettre notre bannière sur le site. Nous devons créer la cellule qui tiendra la bannière, entre ur <center> tags laisse entrer dans notre première cellule en plaçant un <div id="banner"> </ div> there. Sans fixer les paramètres à l'id étiqueté "banner" rien ne s'affiche, il nous faut donc définir le paramètre de cette cellule avec les CSS. Je vais utiliser l'image suivante comme ma bannière.
# banner (
background-image: url (http://urbanm.net/blog/banner.png);
height: 200px;
width: 800px;
)
Qu'est ce qui précède est dit, c'est que tous les objets HTML qui possède 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 la bannière qui se trouvent être 200px par 800px. Notre site se redresse maintenant, il devrait maintenant ressembler à quelque chose comme PRÉSENT.
Maintenant, je mettrait normalement la barre de navigation, mais je vais discuter de cette étape dans la partie 2 du tutoriel.
Skipping la barre de navigation, nous nous déplaçons sur le contenu des boîtes qui contiendront 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'épissure 2 Vous aurez sera l'image de contenu qui va se répéter verticalement afin de remplir l'espace que vous avez rempli toutes vos informations sur. L'épissure 3ème est le pied de page, encore une fois je suis fan de bords arrondis. Voici les trois images que j'ai utilisé pour cette partie. Header - Contenu Repeater - Pied de page.
Quand il est mis tous ensemble qu'il forme cette case. Maintenant, nous devons mettre en place le codage HTML pour qu'elle permet pour les images pour former la boîte correctement. Nous allons utiliser quatre cellules au total pour former notre boîte de contenu. Le premier des quatre va tenir les cellules de trois autres à l'intérieur. Le but de cette cellule, vous comprendrez plus tard avec le plus de compréhension, mais ce ne sera pas radicalement vous permettent de changer les styles de texte sur les différentes pages vous allez prendre, si nécessaire. Laisse ainsi démarrer le HTML, c'est le nouveau HTML.
<body>
<center>
id="banner"> <div </ div>
<div id="indexcontent">
id="header"> <div </ div>
id="contentrepeater"> <div </ div>
id="footer"> <div </ div>
</ div>
</ center>
</ body>
Maintenant, nous avons mis en place des cellules, comme nous voulons, mais nous devons maintenant établir les paramètres d'identification pour chaque étiquette. Cela devrait ressembler à quelque chose comme ça.
# indexcontent (
display: block;
width: 600px;
)
# header indexcontent # (
height: 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;
height: 150px;
width: 600px;
)
# footer indexcontent # (
background-image: url (http://urbanm.net/blog/footer.png);
background-repeat: no-repeat;
height: 37px;
width: 600px;
)
Whoa - qu'il ya beaucoup à faire dans le droit une seule étape? Permettez-moi de l'expliquer pour vous et pour vous aider Out.
À partir du # indexcontent, nous fixons la largeur de celui-ci à 600px qui est ce que mes images sont Contenu de la boîte. Nous ne fixons pas de la hauteur, de sorte 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 en bloc, de sorte que la cellule sera élargi pour la bonne quantité de pixels sur sa hauteur.
Suivant nous avons obtenu le indexcontent # # header, les dimensions sont fixés pour correspondre à la taille de l'image et nous avons l'image de fond définie sur l'emplacement correct.
Que nous n'en avons indexcontent # # contentbg, nous avons sélectionné l'image correcte que notre image de fond, et nous avons besoin de la mettre en repeat-y, de sorte qu'elle se répète verticalement pour s'adapter à la taille des cellules. J'ai choisi 150px par sa hauteur, juste pour vous les gars pouvez voir l'effet de répéter, vous ne changerait cela pour convenir à tous les contenus que vous avez en son sein.
Enfin, nous avons footer indexcontent # #, qui est exactement la même que l'en-tête.
A présent, vous devriez avoir votre disposition de base mis en place pour vous de finir!
Restez à l'écoute pour la partie 2, pour expliquer comment faire la barre de navigation.
Les gens continuent d'utiliser l'étiquette? Pourquoi ne pas utiliser les CSS pour centrer le contenu?
^ Cela devrait être le tag centre.
Le poste vraiment de sens pour moi ... mais si vous essayez de vérifier certaines de mes tutoriels vidéo dans le cadre de la présente CSS ... c'est sûr que vous en apprendrez plus ... hors de lui ...