Comment coder un Website Layout

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:

   
   
   
   
   
   
   

   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
   
   
   
   
   Côté info bar et menu principal.
   
   
   
   
   La page principale.
   
   
   
   
   Informations pied de page.
   
   
   
   
   
   
   

   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.

• 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.