Comment coder un Website Layout

Vous pouvez payer quelqu'un beaucoup d'argent pour concevoir une grande disposition pour votre site web, ou vous pouvez apprendre à faire vous-même et d'économiser tout cet argent! Une belle propre, mise en page web professionnel n'a pas à être graphique intense ou compliqué. Si vous prenez le temps d'apprendre à coder une mise en page de site Web, vous serez également plus riche dans le sens que vous souhaitez avoir une certaine connaissance précieuse que tout webmaster voudrait. Il ya des programmes qui font qu'il est plus facile de coder une mise en page web, mais vous pouvez aussi le faire à la main sans trop de difficulté.

Choses que vous devez

  • Programme d'édition graphique
  • programme de traitement de texte
  • accès Internet
  • répertoire de site Web

Instructions

  1. Utilisez Adobe Photoshop ou Microsoft Paint pour choisir les couleurs exactes que vous souhaitez utiliser. Création d'une maquette visuelle vous épargner la peine d'essais et d'erreur lorsque vous faites le codage réel et la conception. Regardez d'autres dispositions de site Web que vous aimez pour l'inspiration.

  2. Utilisez la forme de rectangle dans votre programme d'édition graphique et dessinez un rectangle qui est de 900 pixels de large et au moins 600 pixels de haut. Ce sera le "récipient" qui va contenir tous les autres éléments de votre mise en page. Lorsque vous codez la disposition que vous serez en mesure de centrer ce récipient dans le milieu de l'écran ou le garder plus à gauche.

  3. Tracer un rectangle horizontal qui traverse d'une extrémité de l'intérieur du récipient à l'autre. Ce rectangle représente votre tête. Dessiner une colonne sous l'en-tête, au moins 150 pixels de large, avec l'outil Rectangle. Cela représentera votre barre latérale. Dessinez un autre, plus grande colonne à côté de lui, ce qui représentera votre principale élément de contenu. Les largeurs de ces deux colonnes en plus un espace supplémentaire entre eux devraient s'élever à la largeur du conteneur. Dessinez un autre rectangle horizontal, dans les deux verticales pour représenter le pied de page.




  4. Ouvrez votre programme de traitement de texte. Ouvrez un document vierge et d'écrire ce code:



    Le titre de la page Web



    Enregistrez le document avec une extension de fichier .html ou .php, et que télécharger sur le répertoire de votre site web.

  5. Écrivez ce code dans entre le et tags:



    Votre Rédaction ou Titre



    La page principale.





    Chacun de vos rectangles représentent le "divs" ou des éléments séparés de la mise en page.

  6. Utilisez un .CSS (Cascading Style Sheet) déposer à concevoir chaque élément et leur assigner des dimensions. Reportez-vous à Ressource 1 comme un guide pour le codage d'un fichier .CSS. Utilisez le "compte-gouttes" ou de l'outil de sélection de couleur dans l'éditeur graphique pour obtenir les codes de couleur hexadécimal que vous avez utilisé dans votre maquette. Lorsque vous avez codé votre fichier .CSS, le télécharger sur le répertoire de votre site web. Mettez ce code quelque part entre le et Tags de la page que vous avez fait.

    Mettez le nom de fichier de votre fichier .CSS entre la dernière série de citations. Ce bout de code "appel" le fichier .CSS et donner à votre disposition le style.

Conseils & Avertissements

  • Si vous souhaitez contourner tout de l'écriture de code, suivez le lien dans la référence 2 et télécharger un modèle de mise en page libre à bricoler avec et à personnaliser.
» » » » Comment coder un Website Layout