Share
Parfois, il semble y avoir autant de produits CMS que de développeurs Web. Dans ce tutoriel, nous allons créer un site simple d'une page puis, en moins de 5 minutes, configurez-le avec un flux Twitter pour les mises à jour quotidiennes et CushyCMS pour le contenu général. Si vous ne l'avez pas vu, Cushy est totalement gratuit et extrêmement produit simple à utiliser mis sur le marché récemment.
Récemment, j'ai réalisé que je devais vraiment avoir un site personnel. Je ne prends pas de travail de design, mais c'est bien d'avoir un endroit où se référer quand j'écris des bio, etc. De plus, il y a environ un mois, j'ai commencé à utiliser Twitter pour exposer mes réflexions quotidiennes sur les affaires, le Web et d'autres choses. Cela semblait être une chose logique de coller sur ma page personnelle. De plus, il est important que le site soit facile à gérer afin que je ne le laisse pas sortir de la date actuelle. Donc, vous pourriez dire que c'était mon mémoire.
Avant d’arriver à la construction, j’ai passé quelques heures dans Photoshop à essayer quelques idées. J'ai besoin de quelque chose de simple - je n'ai pas le temps de faire autre chose, professionnel - qui sait qui va visiter et qui est beau - je prétends être un concepteur de droit?
Quoi qu'il en soit, voici ma conception. J'ai utilisé une jolie illustration vectorielle d'iStock - toujours utile pour faire quelque chose de rapide et qui a l'air génial! J'ai utilisé une police vraiment agréable et gratuite - Colaborate Thin. Et enfin une belle palette de couleurs bleu orangé qui, par un coup de chance, a été assortie à ma photo orange!
Donc, je ne m'attarderai pas trop sur le design. Si vous cliquez sur l'image ci-dessous, vous pouvez obtenir une version plus grande du fichier JPG au cas où vous souhaiteriez suivre.
En regardant la conception dans Photoshop, il est clair que je vais avoir besoin d'un tas d'images. Si cette conception était plus complexe, j'utiliserais l'outil Slice de Photoshop, mais c'est assez simple. Je vais donc rogner le fichier et créer un tas d'images - une pour la table, une pour tous les titres, une pour le "suis-moi" bulle, une pour l'image des nettuts et une pour la photo de mon front géant! Voici les images que j'ai faites:
Notez que je n’ai montré qu’un titre, mais bien sûr j’en ai fait beaucoup..
Ensuite, nous planifions notre mise en page HTML. Très volontairement, ce site sera extrêmement facile à construire. C'est simplement une séquence de blocs. Auparavant, j'ai déjà expliqué comment nous positionner de manière absolue pour créer une mise en page. Cette fois, nous allons utiliser la méthode la plus simple. Positionnement relatif.
Comme vous vous en souviendrez, lorsque vous placez des éléments sur une page, ils occupent un emplacement naturel, par rapport aux éléments précédents. Parce que nous n'utilisons pas de colonnes ou vraiment quelque chose d'extraordinaire dans cette conception, il sera parfait pour utiliser ce positionnement régulier.
En règle générale, chaque fois que vous voulez vous simplifier la vie en HTML, il est préférable de faire les choses dans des blocs disposés horizontalement. C’est le moyen le plus simple de travailler avec CSS et ne nécessite pas beaucoup de manipulations pour la compatibilité du navigateur. Dès que vous commencez à mettre en page des dispositions en colonnes, les choses deviennent un peu plus compliquées. Donc, nous allons enregistrer cela pour un autre tutoriel, sur un autre projet.
De toute façon, la mise en page que nous allons utiliser ressemble à ceci:
En-tête de section En-tête de section Div Bloc de contenu En-tête de section Div Bloc de contenu En-tête de section Div Bloc de contenu… et ainsi de suite…
La meilleure chose à propos de ce plan est que plus tard, si nous allons soudainement "hé, j'aimerais avoir un bloc supplémentaire pour mes images préférées", ce n'est pas un problème! Il suffit de l'insérer, d'utiliser les mêmes classes CSS et tout. C'est vraiment la mise en page la plus simple qui soit, et avec un beau design, elle peut quand même être vraiment cool!
OK Créez un fichier index.html et voici mon premier essai avec le code HTML. Ce n'est pas parfait et il manque le bit Twitter, mais c'est un bon point de départ et nous pouvons faire quelques ajustements plus tard au fur et à mesure:
Collis Ta'eed - Un peu de moi Salut je suis Collis, entrepreneur, blogueur et designer.
En avril, Eden a lancé un site soeur pour PSDTUTS sur lequel je travaillais déjà. Le site héberge des didacticiels sur le développement Web et la conception Web..
Quelques liens vers des sites que j'ai sous la main:
- FlashDen - Notre projet principal Eden
- Comment devenir un pigiste Rockstar - Un livre que je co-écrit avec ma charmante épouse
- FreelanceSwitch - Le très réussi blog sur la pige
- PSDTUTS - Le meilleur blog photoshop autour!
- Blog Action Day - Un événement annuel à but non lucratif
Je suis le premier à admettre que je ne suis pas très doué pour répondre à tous mes courriels, mais je fais de mon mieux et si vous en avez besoin, vous pouvez m'envoyer un e-mail..
Choses à noter:
Nous allons maintenant ajouter un petit peu de CSS pour que la page ressemble un peu plus à l’endroit où elle va aboutir. Créez votre fichier 'style.css' et placez ces deux définitions dans:
corps background-color: # 191e25; marge: 0; rembourrage: 0; couleur: # 5f6874; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Sans-serif; taille de police: 13px; hauteur de ligne: 21px; #container width: 900px; rembourrage: 50px; rembourrage en haut: 30px; background-image: url (images / Computer.jpg); répétition de fond: non répétée; position de fond: en haut à droite;
Quelques choses à noter:
Et voici à quoi ressemble notre page:
Maintenant, nous ajoutons le contenu de Twitter. C'est un excellent moyen de rendre la page vraiment dynamique car je mets à jour mon flux Twitter presque tous les jours. En outre, ce sera un moyen de motiver les gens à m'ajouter à leurs réseaux Twitter, puis à l'avenir, lorsque je lancerai de nouveaux sites, je pourrais générer du trafic vers de nouveaux endroits. Donc vraiment tout cela fait partie de mon plan pas particulièrement sournois.
Twitter a donc rendu la capture de leur flux très facile pour nous, procédez comme suit:
Voici le processus en images!
Et voici le code que Twitter nous donne:
Remarque j'ai supprimé le
Donc, en regardant le HTML qu'ils nous ont donné, on peut deviner que le Javascript va probablement remplir cela
À ce stade, je vais également ajouter du code Javascript pour relier mon site à Google Analytics. Je pense que la plupart des développeurs Web ont entendu parler d’Analytics, mais si par hasard vous vivez sous un rocher, je vous recommande vivement de l’essayer. C'est gratuit et c'est un moyen puissant de surveiller votre trafic. Lorsque vous avez un compte, vous simple Créer un nouveau profil de site Web, entrez un nom de domaine et vous obtiendrez en échange du code Javascript à coller dans vos documents HTML. Peasy facile!
Nous ajouterons ensuite quelques autres styles qui nous rapprocheront encore plus de notre produit final. Elles sont:
a img border: 0 a color: # cc5630; texte-décoration: aucun; a: hover color: #ffffff; .content_box width: 590px; marge supérieure: 15 px; marge inférieure: 30 px;
Nous supprimons ici les bordures des images liées (c’est-à-dire le lien vers NETTUTS et la photo de moi qui renverra vers une version plus grande), nous définissons également la couleur de nos liens sur la page. Enfin, avec le style content_box, nous définissons une largeur pour nos blobs de contenu et les séparons par des marges supérieure et inférieure sur la page. Voici à quoi ressemble notre page:
La prochaine chose à faire est d’obtenir du texte enveloppant autour de nos deux images. La première chose à faire est d’ajouter une classe aux images que nous voulons envelopper (la photo et l’image nettuts). Je n'avais pas pensé à le faire plus tôt, mais je vois que je dois le faire maintenant. Nous changeons donc les images pour avoir:
Ensuite, nous ajoutons un style rapide pour que le flottant se trouve à gauche avec un peu de marge, comme ceci:
img.photo float: left; marge droite: 20px;
Malheureusement, même si elle est simple et agréable, cette solution n’est pas tout à fait satisfaisante, car mon bloc de texte est trop long. Qu'à cela ne tienne, facile à réparer. Nous allons placer ce texte dans son propre bloc et le faire flotter aussi.
Nous allons donc ajuster cette content_box pour que le code HTML soit maintenant:
Après avoir travaillé comme concepteur de sites Web - en tant qu'employé et en tant qu'indépendant - j'ai fondé une start-up avec quelques amis en 2006. Notre société, Eden, a depuis grandi et j'ai eu la chance de travailler sur de nombreux projets très excitants et intéressants, de FlashDen à la journée d'action sur le blog.
Grâce à la nature brillante du Web, je vis et travaille actuellement à Hong Kong et parcourt le monde. Vous pouvez me trouver en ligne sur Twitter où je poste des pensées aléatoires, ou vous pouvez m'envoyer un email à partir du formulaire au bas de cette page. Merci pour votre visite!
Donc, vous pouvez voir que j'ai enveloppé le texte dans un
puis ajouté un au fond. Cet extra.about_text float: left; largeur: 380px; .clear clear: les deux;
Nous devons donner une largeur à notre bloc about_text afin qu’il flotte à côté de la photo. Maintenant, cela résout bien notre problème. Cependant, si vous regardez l'image ci-dessous, il semblerait qu'il y ait un fossé étrange entre le haut de notre bloc de texte et l'image..
Les lacunes étranges sont les pire à trouver, car il peut être très difficile de comprendre ce qui les cause. Dans notre cas ici même si je me souviens que le
tag a une marge supérieure par défaut qui, si nous nous en débarrassons, résoudra probablement notre problème. Voici le code pour résoudre ce problème:
p margin: 0px; marge inférieure: 20 px;
Alors maintenant, chaque paragraphe n'aura aucune marge sauf 20px en dessous (espacement de l'élément de paragraphe suivant).
Comme je l'ai mentionné plus tôt, nous allons utiliser un peu de CSS pour remplacer notre
Donc, tout ce que nous allons faire est d'utiliser le balise que nous avons si judicieusement placée auparavant pour définir l’affichage du texte sur none - le rendant ainsi masqué. Ensuite, nous donnerons le une hauteur afin que l’image d’arrière-plan ne soit pas tronquée, et finalement nous allons définir l’image pour qu’elle apparaisse. Voici le code CSS dont nous avons besoin pour que cela se produise:
h1 background-image: url (images / title_main.jpg); répétition de fond: non répétée; hauteur: 60px; marge inférieure: 50 px; h1 span display: none;
Ensuite, nous appelons notre boîte Twitter. Mais avant cela, je réalisais que j'avais totalement oublié de placer mon image "Follow Me on Twitter" sur la page (Collis idiot!). Peu importe, je vais l'ajouter maintenant, voici le code HTML résultant pour la zone où nous travaillent sur:
Notez que l'image apparaît à l'intérieur le twitter_div. Nous allons utiliser l’un des grands avantages du style CSS pour le positionner de manière à ce qu’il reste en dehors de la boîte. Si c’était le bon vieux temps et que je réalisais cette mise en page avec un
Accentsconagua
