Au cours de l'' Episode 16 l'expérience de créer une page MySpace en direct n'a pas été un grand succès. Heureusement, il y avait de la musique pour nous sauver! (Soit dit en passant, si quelqu'un a entendu que cet épisode .. me donner une autre chance 
Choisissez vous-mêmes et un autre épisode à écouter. Beaucoup de bonne musique gratuite pour vous chaque semaine sur la section podcasts !).
Afin de ne pas repartir les mains vides, cependant, j'ai préparé ce tutoriel qui recueille toutes mes expériences dans la mise en œuvre de la page MySpace de la Nissardo, qui se trouve à www.myspace.com / ilnissardo .
Les exigences de base pour une page MySpace: la connaissance de HTML et CSS. Si vous ne les avez pas, ne vous découragez pas .. vous ne comprendrez pas tout de ce tutoriel mais vous pouvez suivre quelques liens qui vous permettront d'obtenir encore quelque chose de gentil.
Nous partons d'un concept que vous devez comprendre: la présentation d'une page MySpace est une des choses les plus difficiles à manipuler que j'ai jamais vu.
Si vous voulez essayer de faire une page MySpace dans un style Web2.0, bonne chance, je pense que c'est impossible.
La structure entière est basée sur des tableaux imbriqués, et presque aucun d'entre eux est un identifiant ou une classe. Le CSS à utiliser donc il doit travailler directement sur les éléments de niveau bloc (par exemple, table de table, etc.)
Cette approche est extrêmement rigide, car il est dit qu'une partie de la page peut être référencé de manière unique à l'aide de la syntaxe suivante: s'il ya deux imbriquée à l'intérieur de chaque table à une autre table, vous ne pourrez pas modifier l'apparence d'une préservation l'autre.
INTRODUCTION IMPORTANT: dans le code de cette page, j'ai ajouté des tags pour style de code CSS. comme < style> et < / style > évidemment lorsque vous les utilisez dans votre code, vous devez supprimer les espaces qui ne sont pas nécessaires.
Pour mieux comprendre la structure d'une page MySpace afin que nous puissions procéder:
- Créez votre compte (ATTENTION: Il existe deux types de comptes MySpace Si vous êtes un musicien, vous créez votre propre compte dans la section musique).
- Allez dans le Panneau de configuration et suivez le "Modifier mon profil"
- Sur la "About Me" (ou en anglais "About Me") copier ce code (aimablement pris par sous-entendus par conception )
< style>
table {
border: 0px;
}
tableau td {
border: 0px;
}
table table {
border: 0px;
}
table de ping td {
border: 0px;
}
table de ping-table {
border: 0px;
}
table de la table td {
border: 0px;
}
table de ping-pong de table {
border: 0px;
}
table de table de td {
border: 0px;
}
table de table de table de table {
border: 0px;
}
table de table de la table td {
border: 0px;
}
table de table de ping-pong de table {
border: 0px;
}
table de table de table de td {
border: 0px;
}
< / style >
- Enregistrées et affichées dans votre profil, vous verrez que peu ou pas de changement. C'est normal. Ce que nous avons fait, c'est mettre le bord à 0 pour tous les éléments.
- Maintenant vous commencez à choisir l'élément que vous souhaitez afficher, par exemple, nous voulons voir quels sont les éléments de la page identifiée par table de table de table de td, il suffit de modifier le code de la carte pour afficher:
table table table table table table td {
border:10px solid red;
}
- Le stockage et l'affichage du profil à nouveau vous pouvez voir quelles parties de la page sont contenus dans ce tableau (imbriqué dans six autres tables ... Je n'avais jamais vu une telle chose).
- Peut être amusé de voir toutes les tables avec des frontières et de couleurs différentes, mais vous verrez bientôt que de 3 ou 4 bords deviendra actif le tout un gâchis (je voulais faire une photo, mais j'ai levée.).
Si le code précédent ajouter également la partie relative au corps, vous êtes plus ou moins tous les éléments qui composent une page MySpace, et vous pouvez vous amuser à créer votre propre mise en page à partir de zéro (bonne chance!).
En fait, je ne suis pas vraiment tout .. ceux de MySpace ont eu la gentillesse de laisser aussi une certaine classe spécifique, en particulier pour certains éléments span, vous pouvez les trouver en allant à afficher le code source de la page avec firefox, vous trouverez des cours span.blacktext12 type span.whitetext12, ctl00_Header_Header1_Div1 (cela fait de moi fou! va bien tant pis ... Je ne veux pas paraître trop critique).
Plus d'aide qu'ils nous ont donné est l'identification de la table de contact avec la classe (ou l'identifiant ne me souviens pas). ContactTable.
Mais revenons au sérieux .. nul ne peut être imputée à gérer ces éléments 0, sauf si vous êtes un masochiste ou avoir beaucoup de temps à perdre.
Heureusement, il existe quelques sites qui aident à simplifier un peu de travail.
Vous pouvez choisir deux approches:
- Prenez une disposition déjà fait, en choisissant parmi quelques-uns disponibles sur le net.
- Utilisez l'une des nombreuses éditeur en ligne afin de créer une mise en page simple assez simple à utiliser.
Voici une liste des sites qui fournissent des profils, des générateurs de code et éditeur de profils. Il ya quelque chose pour tout le monde!
Personnellement, j'ai suivi la deuxième approche, en utilisant un éditeur en ligne, j'ai créé une sorte de chiffon et j'ai commencé à travailler sur cette changer certaines choses.
Nous passons maintenant à quelques notes sur la façon de changer ce que vous venez de créer (ce qui est une disposition déjà fait ou le résultat d'un éditeur).
Tout d'abord, armez-vous d'un bon éditeur de texte, je suis très heureux avec Notepad + + , et au lieu de coller immédiatement la mise en page que vous avez pris ou générés sur le profil MySpace, mis dans un fichier local.
Il sera d'autant plus facile de chercher des pièces de modifier et coller le nouveau code.
Comme il ya, armez-vous aussi Format View extension pour Firefox , il vous aidera beaucoup durant tout le processus!
En plus de sorte que vous pouvez enregistrer une copie locale de votre page, qui n'a jamais fait mal.
Prenez le temps de formater votre code introduit afin de comprendre facilement. Ceci est très important, ne pensez pas que vous perdez votre temps, le temps est tout ce que vous gagnerez à la suite! Maintenant, vous pouvez commencer à fixer les parties qui ne l'aime toujours pas. Une des premières choses que j'ai faite était de changer le rembourrage de certains tableaux car par défaut de l'éditeur que j'avais l'habitude de mettre le padding à 0.
Rappelez-vous toujours la règle pour trouver la partie que vous voulez éditer, utilisez le code que je vous ai montré au début de ce tutoriel et définir la couleur et l'épaisseur de la frontière.
Mais avouons-le, même si, tout le monde est capable d'ajouter ces belles choses que vous voyez sur de nombreuses pages Myspace, comme une bannière au-dessus de la publicité, ou de masquer certaines parties de la mise en page que nous ne voulons pas (comme «foo est sur le réseau étendue "): nous sommes encore dans l'aide d'applications en ligne qui génèrent le code dont nous avons besoin. Prenez une « regardez ici : vous pouvez trouver des générateurs de code pour presque tout ce que vous pouvez servir.
Prenons un peu de voir ce que génère: Hide réseau étendu .
Le résultat est quelque chose comme ceci:
< style>
.blacktext12 {display:none;}
td.text table, td.text td {border:0px; height:0px;}
div.layoutbutton {
width: 145px;
border: 1px solid blanc;
position: fixed;
_position: absolute;
top: 20px;
à droite: 5px;
}
div.layoutbutton à {
background-image: url (http://www.mywackospace.com/images/p.png);
width: 100%;
height: 21px;
color: rgb (255,255,255);
font: bold 11px arial, sans-serif;
display: block;
text-decoration: none;
line-height: 19px;
}
< / style >
AVERTISSEMENT! Tout ce que je vous écris un code pour vous débarrasser? Un peu d'exagération n'est-ce pas? En fait, une partie seulement vous avez vraiment besoin, l'initial:
.blacktext12 {display:none;}
td.text table, td.text td {border:0px; height:0px;}
tout le reste sont des bannières et des liens publicitaires ajoutées par l'application en ligne (je n'ai pas lu les conditions d'utilisation de ces sites depuis que je les ai utilisés seulement comme une référence, mais disons que tout le reste peut être retiré 
)
Maintenant, vous pouvez ajouter ce code à votre disposition toujours dans l'éditeur de texte. Où? où vous voulez. L'importance est enfermé entre deux balises de style. Vous pouvez simplement ajouter à la fin de la mise en page que vous avez déjà, juste avant la balise de style de fermeture (pour les non initiés est
Maintenant, vous aurez envie de tout essayer, non? Ok, il ya deux possibilités, la première est d'utiliser directement votre page MySpace: allez à votre panneau de contrôle et modifier le profil. Or, dans la "About Me" copier le contenu de votre éditeur et sauve.
Connectez-vous sur votre page pour voir les résultats de vos modifications.
Mais .. c'est un peu gênant, surtout si vous souhaitez apporter des modifications à une page qui est déjà en ligne pendant un certain temps et peut-être obtenir plusieurs visiteurs par jour .. vous ne voulez pas que vos visiteurs voient votre preuve non?
Il ya encore rencontrer une application web (toujours à partir du même site, mais il ya des milliards là-bas), qui n'est rien de plus qu'un Previewer Layout . Vous collez votre code et cliquez sur l'aperçu, si vous devez réaliser le résultat.
AVERTISSEMENT: Cette méthode n'est pas aussi fiable dans le cas de DIV pour vous d'entrer par la main, comme la visionneuse dans le cadre de son tour de la div pour la publicité. Mais il est très efficace pour tous les autres cas.
J'ai trouvé beaucoup de trucs, si vous naviguez sur le site, vous avez recommandé que, même si je n'ai pas écrit jusqu'à maintenant, ça s'appelle www.mywackospace.com , vous trouverez autant de générateurs de code pour vous faire les maux de tête .
Le code généré est presque toujours inséré dans la "About Me" profil, sauf pour quelques rares exceptions près, il faut donc toujours lire bien avant.
Je vous en supplie, ne travaille pas directement sur le profil MySpace, toujours utiliser un éditeur de mise en forme locale toujours bon d'ajouter le code, sinon après un moment vous allez perdre votre tête!
En ce qui concerne le contenu réel, c'est à dire le texte que vous avez décrit, il suffit de l'ajouter dans le fichier de profil, en faisant attention de ne pas le mettre dans le style de la balise. Il s'agit HTML, vous pouvez utiliser toutes les constructions que la langue vous fournit (pour ceux d'entre vous qui ne connaissent pas HTML, ne vous inquiétez pas, voir ci-dessous).
Permettez-moi de souligner un peu plus générateur qui peut être très utile:
- Top Image vous permet de mettre une image sur le dessus de la page MySpce, avant même la bannière publicitaire. AVERTISSEMENT: Il utilise la DIV afin souviens de ce que j'ai dit auparavant, l'aperçu ne dit pas la vérité dans cette affaire.
- Contacter le tableau vous permet de générer une table des contacts avec votre image (si je ne me trompe ici, vous devez également faire un tour pour se débarrasser du texte que MySpace puts par défaut. simplement ajouter quelque chose comme
.contacttable .text {font-size: 0px !important;} ) - Bannière de réseau étendu
- Et enfin, un petit éditeur de texte qui peuvent vous aider à générer le format de texte que vous voulez, même si vous ne connaissez pas un h de HTML et CSS
Une autre astuce, lorsque vous utilisez un générateur et non pas copié directement le résultat dans votre profil, ouvrez un autre fichier avec votre éditeur nous imiter dans le résultat et le format, donc essayer de comprendre. Une fois que vous avez éliminé toutes les choses que vous n'avez pas besoin (comme la publicité et des liens divers) faire un copier coller de l'autre fenêtre de l'éditeur où vous avez votre profil complet.
Si vous voulez ajouter du texte ou des objets incorporés (comme une carte pour les contacts que vous pouvez prendre ici , ou un RSS pour votre lecteur de podcast), vous pouvez simplement ajouter à votre profil (même fichier comme avant), mais sans le mettre entre les balises modèle, comme vous le feriez texte normal. Au bas étaient encore éditer une page HTML ....
Enfin, d'autres sites qui peuvent vous aider à changer votre mise en page:
En plus de la liste des sites qui offrent des profils, des générateurs de code et rédacteur en chef pour les profils que je l'ai souligné plus tôt.
Et s'il vous plaît .. lorsque vous avez terminé l'accomplissement de votre espace .. venez visiter , et (si vous voulez) vous ajoutez à mes amis!
AVERTISSEMENT: j'ai fermé les commentaires sur toutes les sections pour empêcher le blog myspace est devenu trop lourd à lire. Si vous avez des demandes, des préoccupations, des questions vous pouvez utiliser la section du forum MySpace . MERCI!
Tags: Code , épisode , musique , myspace , Podcast , programmation , tutoriel myspace Tags: Code , épisode , musique , myspace , Podcast , programmation , tutoriel myspace
Catégories:
184 commentaires »
Derniers Commentaires