Publicité

Avez-vous toujours voulu faire un site web? Peut-être avez-vous lu certains de nos HTML (comprendre HTML 5 étapes pour comprendre le code HTML de base 5 étapes pour comprendre le code HTML de base Lire la suite) et CSS tutoriels 5 étapes pour apprendre CSS et devenir un Kick-Ass CSS Sorcerer Apprendre le CSS et devenir un Kick-Ass CSS Sorcerer CSS est le changement le plus important que les pages Web ont vu dans la dernière décennie, et il a ouvert la voie à la séparation du style et du contenu. De manière moderne, XHTML définit la structure sémantique ... Lire la suite, mais ne sait pas comment utiliser ces langages sur un projet plus important.

Aujourd'hui, je vais vous guider à travers le processus de création d'un site Web complet à partir de zéro. Ne vous inquiétez pas si cela semble une tâche difficile, je vais vous guider à travers chaque étape du chemin.

Vous produirez ce site en utilisant HTML, CSS et JavaScript avec une touche de jQuery (guide de jQuery Un guide de base pour JQuery pour les programmeurs Javascript Un guide de base pour JQuery pour les programmeurs Javascript Si vous êtes un programmeur Javascript, ce guide de JQuery vous aidera vous commencez à coder comme un ninja. Vous ne serez pas en train de faire quelque chose de vraiment saignant, donc ce code devrait fonctionner assez bien dans la plupart des navigateurs modernes.

Si vous n'êtes pas sûr de tout CSS, jetez un coup d'œil au guide CSS sur W3Schools.com.

La conception

Voici la conception de ce site Web. Jetez un oeil à une image haute résolution si vous voulez un meilleur look, ou mieux, téléchargez le projet complet ici.

J'ai conçu ce site Web pour une société fictive dans Adobe Photoshop CC 2017. Si cela vous intéresse, assurez-vous de récupérer le fichier .PSD à partir du téléchargement du bundle. Voici ce que vous obtenez dans le fichier photoshop:

À l'intérieur du PSD, vous trouverez tous les calques groupés, nommés et codés en couleur:

Vous aurez besoin de quelques polices installées pour que les choses semblent correctes. Le premier est Font Awesome, utilisé pour toutes les icônes. Les deux autres fontes sont PT Serif et Myriad Pro (inclus avec Photoshop). Si vous n'êtes pas sûr de savoir comment installer les polices, lisez notre guide Comment installer les polices sur Windows, Mac et Linux Comment installer les polices sur Windows, Mac et Linux En savoir plus.

Ne vous inquiétez pas si vous n'avez pas Photoshop, vous n'en avez pas besoin pour continuer.

Code initial

Maintenant que le design est clair, commençons le codage! Créez un nouveau fichier dans votre éditeur de texte préféré (j'utilise Sublime Text 3). Sauvegardez ceci comme index.html . Vous pouvez appeler cela comme vous voulez, la raison pour laquelle de nombreuses pages sont appelées index est due au fonctionnement des serveurs Web. La configuration par défaut pour la majorité des serveurs est de servir la page index.html si aucune page n'est spécifiée.

Si vous ne voulez pas apprendre les détails, allez chercher le code complet du téléchargement.

Voici le code dont vous avez besoin:

Noise Media /* CSS goes here, at the top of the page */ /* JavaScript goes here, at the bottom of the page */ 

Cela fait plusieurs choses:

• Définit le code HTML minimal requis.
• Définit le titre d'une page de "Noise Media"
• Comprend jQuery hébergé sur Google CDN (Qu'est-ce qu'un CDN?) Ce que sont les CDN et pourquoi le stockage n'est plus un problème Les CDNs et pourquoi le stockage n'est plus un problème Les CDN rendent Internet rapide et les sites Web abordables même lorsque vous atteignez des millions d'utilisateurs., la bande passante coûte de l'argent, ceux d'entre nous sur des contrats limités savent que trop bien ... Lire la suite).
• Inclut Font Awesome hébergé sur Google CDN.
• Définit une balise de style pour écrire votre CSS dedans.
• Définit une balise de script pour écrire votre code JavaScript.

Enregistrez à nouveau votre fichier et ouvrez-le dans votre navigateur Web. Vous ne remarquerez probablement pas grand-chose, et cela ne ressemblera certainement pas à un site web pour le moment.

Notez comment le titre de la page est Noise Media . Ceci est défini par le texte à l'intérieur de la balise de titre . Cela doit être à l'intérieur des balises de tête .

L'en-tête

Créons l'en-tête. Voici à quoi cela ressemble:

Commençons par ce petit bout gris en haut. C'est un gris clair avec un léger gris foncé dessous. Voici un gros plan:

Ajoutez ce code HTML dans la balise body en haut:

Pendant que vous êtes ici, décomposons cela. Une div est comme un conteneur pour mettre d'autres choses. Cette "autre chose" peut être plus de conteneurs, de texte, d'images, de tout. Il y a certaines restrictions sur ce qui peut entrer dans certains tags, mais les divs sont des choses assez génériques. Il a un ID de barre supérieure . Cela sera utilisé pour le style avec CSS, et le cibler avec JavaScript si nécessaire. Assurez-vous que vous avez seulement un élément avec un identifiant particulier - ils doivent être uniques. Si vous voulez que plusieurs éléments aient le même nom, utilisez plutôt une classe - c'est pour ça qu'ils sont conçus! Voici le CSS dont vous avez besoin pour le styler (mettez en haut à l'intérieur de votre balise de style ):

 html, body { margin: 0; padding: 0; font-family: 'Helvetica', 'Arial'; /* initial fonts */ } #top-bar { width: 100%; background: #F1F1F1; /* light gray */ border-bottom: 1px solid #D4D4D4; /* dark gray "underline" */ height: 25px; } 

Notez comment le signe dièse (#, hashtag, dièse) est utilisé avant le nom. Cela signifie que l'élément est un ID. Si vous utilisiez une classe, vous utiliseriez un arrêt complet (.) À la place. Les balises html et body ont leur padding et leur marge à zéro. Cela empêche les problèmes d'espacement indésirables.

Il est temps de passer au logo et à la barre de navigation. Avant de commencer, vous avez besoin d'un conteneur pour mettre ce contenu. Faisons-en une classe (pour que vous puissiez la réutiliser plus tard), et comme ce site n'est pas responsive, faites-en 900 pixels de large.

HTML:

CSS:

 .normal-wrapper { width: 900px; margin: 0 auto; padding: 15px 40px; background: red; overflow: auto; } 

Il peut être difficile de dire ce qui se passe jusqu'à ce que vous ayez terminé le code, il peut donc être utile d'ajouter un arrière-plan coloré (temporaire) pour voir ce qui se passe:

 background: red; 

Il est temps de créer le logo maintenant. Font Awesome est nécessaire pour l'icône elle-même. Font Awesome est un ensemble d'icônes emballées comme une police de vecteur - génial! Le code initial ci-dessus déjà configuré Font Awesome, donc tout est prêt à partir!

Ajoutez ce code HTML dans le div normal-wrapper :

  
 Bruit Media 

CSS:

 .logo-icon { color: #000000; font-size: 60pt; float: left; } h1 { float: left; margin: 21px 0 0 25px; } 

Ne vous inquiétez pas des autres polices qui ne correspondent pas à la conception - vous rangerez cela plus tard. Si vous souhaitez utiliser différentes icônes, dirigez-vous vers la page Font Awesome Icons, puis changez fa-volume-down jusqu'au nom de l'icône que vous souhaitez utiliser.

En passant sur la barre de navigation, vous utiliserez une liste non ordonnée ( UL ) pour cela. Ajoutez ce code HTML après le logo-container (mais toujours dans le normal-wrapper ):

Accueil
Sur
Avis
Contact

Le href est utilisé pour créer un lien vers d'autres pages. Ce site Web didacticiel ne contient aucune autre page, mais vous pouvez indiquer le nom et le chemin du fichier (si nécessaire) ici, par exemple reviews.html . Assurez-vous de mettre cela à l'intérieur des deux guillemets.

Voici le CSS:

 #navbar { list-style-type: none; /* remove bullet points */ margin: 29px 0 0 0; padding: 0; float: right; font-size: 16pt; } #navbar li { display: inline; /* make items horizontal */ } #navbar li a:link, #navbar li a:visited, #navbar li a:active { text-decoration: none; /* remove underline */ color: #000000; padding: 0 16px 0 10px; /* space links apart */ margin: 0; border-right: 2px solid #B4B4B4; /* divider */ } #navbar li a:link.last-link { /* remove divider */ border-right: 0px; } #navbar li a:hover { /* change color on hover (mouseover) */ color: #EB6361; } 

Ce CSS commence avec une liste non ordonnée . Il supprime ensuite les points de la puce en utilisant list-style-type: none; . Les liens sont espacés un peu, et donné une couleur lorsque vous passez votre souris sur eux. Le petit diviseur gris est une bordure droite sur chaque élément, qui est ensuite supprimé pour le dernier élément en utilisant la classe du dernier lien . Voici à quoi cela ressemble:

Tout ce qui reste pour cette section est la surbrillance de couleur horizontale rouge. Ajoutez ce code HTML après le normal-wrapper :

Et voici le CSS:

 #top-color-splash { width: 100%; height: 4px; background: #EB6361; } 

C'est la partie supérieure faite. Voici à quoi il ressemble - assez similaire à la conception droite?

Zone de contenu principal

Il est maintenant temps de se déplacer sur la zone de contenu principal - le soi-disant "au-dessus du pli". Voici à quoi ressemble cette partie:

C'est une partie assez simple, du texte de gauche avec une image sur la droite. Cette zone sera divisée en trois parties, ce qui équivaut approximativement au ratio d'or en utilisant le taux d'or dans la photographie pour une meilleure composition en utilisant le taux d'or en photographie pour une meilleure composition Avez-vous du mal avec la composition photo? Voici deux techniques basées sur le ratio d'or qui améliorera considérablement vos tirs avec peu d'effort de votre part. Lire la suite .

Vous aurez besoin de l'image échantillon pour cette partie. C'est inclus dans le téléchargement. Cette image est de 670px de large, et est de notre examen Panasonic Lumix DMC-G80 / G85 Revue de Panasonic Lumix DMC-G80 / G85 Revue de Panasonic Lumix DMC-G80 / G85 Le Lumix G85 est le dernier appareil photo sans miroir de Panasonic, et il emballe un sérieux coup de poing le service vidéo, avec sortie HDMI et enregistrement 4K - le tout pour 1000 $! Lire la suite .

Ajoutez le code HTML après l'élément top-color-splash :

Bienvenue! 
Noise Media est une société de technologie spécialisée dans les critiques techniques.
Nous sommes très bons dans ce que nous faisons, mais malheureusement, nous ne sommes pas une vraie compagnie.
Assurez-vous de visiter makeuseof.com pour le tutoriel complet sur la façon de construire ce site.
Alternativement, consultez notre examen du Panasonic G80 montré sur la droite!

Notez comment l'élément normal-wrapper est retourné (c'est la joie d'utiliser des classes). Vous vous demandez peut-être pourquoi l'image ( img ) ne se ferme pas. Ceci est une étiquette à fermeture automatique. La barre oblique ( /> ) indique ceci, car il n'est pas toujours logique de devoir fermer une étiquette.

CSS:

 .one-third { width: 40%; float: left; box-sizing: border-box; /* ensure padding and borders do not increase the size */ margin-top: 20px; } .two-third { width: 60%; float: left; box-sizing: border-box; /* ensure padding and borders do not increase the size */ padding-left: 40px; text-align: right; margin-top: 20px; } .featured-image { max-width: 500px; /* reduce image size while maintaining aspect ratio */ } .no-margin-top { margin-top: 0; /* remove margin on things like headers */ } 

L'attribut le plus important ici est la taille de la boîte: border-box; . Cela garantit que les éléments seront toujours de 40% ou 60% de largeur. La valeur par défaut (sans cet attribut) correspond à la largeur spécifiée plus tout remplissage, marge et bordure. La classe d'image ( featured-image ) a une largeur maximale de 500px . Si vous ne spécifiez qu'une dimension (une largeur ou une hauteur) et laissez l'autre vide, css redimensionnera l'image tout en conservant ses proportions.

Zone de devis

Créons la zone de devis. Voici à quoi cela ressemble:

C'est un autre domaine simple. Il contient un arrière-plan gris foncé avec un texte centré en blanc.

Ajoutez ce code HTML après le précédent normal-wrapper :

"Makeuseof est le meilleur site de tous les temps" 
Joe Coburn 

Et puis ce CSS:

 #quote-area { background: #363636; color: #FFFFFF; text-align: center; padding: 15px 0; } h3 { font-weight: normal; font-size: 20pt; margin-top: 0px; } h4 { font-weight: normal; font-size: 16pt; margin-bottom: 0; } 

Il n'y a pas beaucoup de choses ici. Le dimensionnement est le principal ajustement nécessaire - taille de la police, espacement, etc. Voici à quoi tout cela ressemble maintenant - ça commence à ressembler à un site web!

Zone de l'icône

Continuons à appuyer sur - c'est presque fini! Voici le prochain domaine à créer:

Cette partie utilisera plusieurs classes. Les trois icônes sont la plupart du temps identiques, à l'exception du contenu. Il est donc logique d'utiliser des classes plutôt que des identifiants. Ajoutez ce code HTML après la zone de devis précédente:

  
 Youtube 
Consultez notre chaîne YouTube pour plus d'avis techniques, de tutoriels et de cadeaux!
 Avis 
Si vous envisagez d'acheter un nouveau gadget, vérifiez d'abord ici. Nous vous donnerons des commentaires approfondis sur les derniers appareils.
 Guides d'achat 
Aux guides d'achat, nous nous efforçons de fournir aux lecteurs les outils pour obtenir les meilleures choses pour le moins d'argent possible.

Ces trois icônes sont aussi Font-Awesome. Le HTML utilise à nouveau la classe normal-wrapper . Voici le CSS:

 .icon-outer { box-sizing: border-box; /* ensure padding and borders do not increase the size */ float: left; width: 33.33%; padding: 25px; margin: 0; text-align: center; } .icon-circle { background: #EEEEEE; color: #B4B4B4; width: 200px; height: 200px; border-radius: 200px; /* make rounded corners */ margin: 0 auto; border: 2px solid #D6D6D6; box-sizing: border-box; /* ensure padding and borders do not increase the size */ font-size: 75pt; padding: 30px 0 0 0; cursor: pointer; } .icon-circle:hover { /* change color on hover (mouseover) */ color: #FFFFFF; background: #EB6361; } h5 { margin: 15px 0 10px 0; font-size: 20pt; } 

Il y a quelques nouvelles choses dans le CSS. Les coins arrondis sont définis par border-radius: 200px; . Définir cette valeur de la même manière que la largeur donne un cercle parfait. Vous pouvez réduire cela si vous préférez plus d'un carré avec des coins arrondis. Remarquez comment les actions hover sont appliquées aux divs - elles ne sont pas limitées aux liens uniquement. Voici à quoi ressemble cette section maintenant:

Le pied de page

La dernière chose à faire est le pied de page! C'est vraiment simple, car c'est juste une zone grise sans texte. Ajoutez ce code HTML après l' enveloppe normale des zones d'icônes:

Voici le CSS:

 #footer { width: 100%; background: #F1F1F1; /* light gray */ border-top: 1px solid #D4D4D4; /* dark gray "topline" */ height: 150px; } 

Voir - des choses vraiment simples.

Ajouter du Pizzazz

Voilà, le codage est fait! Vous pouvez absolument laisser les choses telles qu'elles sont, c'est une page web finie. Vous avez peut-être remarqué, cependant, que cela ne ressemble pas exactement à la conception. La raison principale de ceci est les polices utilisées. Réglons cela.

La police utilisée pour la plupart des titres est Myriad Pro . Cela vient avec Adobe Create Cloud, mais il n'est pas disponible en tant que webfont. La police actuellement utilisée sur la page Web est Helvetica . Cela semble correct, donc vous pouvez le laisser tel quel, cependant PT Sans est disponible en tant que webfont. La police utilisée pour tout le texte est PT Serif, disponible en tant que webfont.

Les polices Web sont un processus simple. Tout comme le chargement d'une nouvelle police sur votre ordinateur, les pages Web peuvent charger des polices à la demande. L'un des meilleurs moyens de le faire est à travers Google Fonts.

Ajoutez ce CSS pour passer aux meilleures polices:

 @import url('https://fonts.googleapis.com/css?family=PT+Sans'); @import url('https://fonts.googleapis.com/css?family=PT+Serif'); h1, h2, h4, h5, h6 { font-family: 'PT Sans', 'Helvetica', 'Arial'; } 

Maintenant, modifiez vos éléments html et body pour utiliser les nouvelles polices:

 font-family: 'PT Serif', 'Helvetica', 'Arial'; 

Remarquez comment l'élément h3 n'est pas inclus dans la liste - ceci sera par défaut PT-Serif au lieu de PT-Sans .

Pour finir, utilisons JavaScript pour faire défiler trois images différentes. Vous aurez besoin de Image_2 et Image_3 pour cette partie, et encore une fois, c'est facultatif. Le site est complètement fonctionnel à ce stade sans cette fonctionnalité. Voici à quoi cela ressemblera (accéléré):

Modifiez votre HTML pour inclure trois images en vedette. Remarquez comment deux d'entre eux ont une classe CSS de hidden . Chaque image a reçu un identifiant afin que le JavaScript puisse cibler chacun d'entre eux indépendamment.

Voici le CSS nécessaire pour masquer les images supplémentaires:

 .hidden { display: none; } 

Maintenant que le HTML et CSS sont pris en compte, passons à JavaScript. Il est utile de comprendre le modèle d'objet Document JavaScript et le développement Web: Utilisation du modèle d'objet Document JavaScript et le développement Web: Utilisation du modèle d'objet Document Cet article vous présente le squelette de document avec lequel JavaScript fonctionne. Ayant une connaissance pratique de ce modèle d'objet de document abstrait, vous pouvez écrire du JavaScript qui fonctionne sur n'importe quelle page Web. Lire la suite (DOM) pour cette partie, mais ce n'est pas une exigence.

Trouvez la zone de script en bas de la page:

 /* JavaScript goes here, at the bottom of the page */ 

Ajoutez le code JavaScript suivant dans la balise de script :

 /* JavaScript goes here, at the bottom of the page */ $(document).ready(function() { // run once the page is ready var time = 2500; // get the image containers $im1 = $('#f-image-1'); $im2 = $('#f-image-2'); $im3 = $('#f-image-3'); setInterval(function(){ // call function every x milliseconds (defined in time variable above) changeImage(); }, time); var currentImage = 1; function changeImage(){ switch(currentImage) { case 1: // show image 2 $im1.hide(); $im2.show(); $im3.hide(); currentImage = 2; break; case 2: // show image 3 $im1.hide(); $im2.hide(); $im3.show(); currentImage = 3; break; default: // show image 1 $im1.show(); $im2.hide(); $im3.hide(); currentImage = 1; } } }); 

Il y a quelques choses qui se passent ici. Le code est contenu dans $ (document) .ready () . Cela signifie qu'il fonctionnera une fois que votre navigateur aura fini de rendre la page - c'est une bonne pratique. La fonction setInterval () est utilisée pour appeler la fonction changeImage () régulièrement à un intervalle prédéfini en millisecondes (1000 millisecondes = 1 seconde). Ceci est stocké dans la variable de temps . Vous pouvez augmenter ou diminuer ceci pour accélérer ou ralentir le défilement. Enfin, une simple déclaration de cas est utilisée pour montrer différentes images, et garder une trace de l'image actuellement affichée.

Défi de codage

C'est tout! J'espère que vous avez beaucoup appris pendant le processus. Si vous avez envie de relever un défi et que vous voulez tester vos nouvelles compétences, pourquoi ne pas essayer d'implémenter ces modifications:

Ajouter un pied de page: Ajoutez du texte dans le pied de page (indice: vous pouvez réutiliser le wrapper normal et un tiers / deux tiers .).
Améliorer le défilement de l'image: Modifiez le JavaScript pour animer les changements d'image (indice: regardez jQuery fadein et animez).
Implémenter plusieurs guillemets: Modifiez les guillemets pour changer entre plusieurs guillemets différents (indice: regardez le code de défilement de l'image pour un point de départ).
Configurer un serveur: Configurer un serveur et envoyer des données entre la page Web et le serveur (indice: lire notre guide sur JSON et Python Comment obtenir Python et JavaScript pour communiquer avec JSON Comment obtenir Python et JavaScript pour communiquer avec JSON Aujourd'hui je vais Je vais vous montrer comment utiliser JSON pour envoyer des données de JavaScript à Python.Je vais couvrir la façon de configurer un serveur web, avec tout le code dont vous avez besoin.

Avez-vous appris de nouvelles compétences aujourd'hui? Comment vous êtes-vous mis au défi du codage? Quelles modifications avez-vous apportées pour personnaliser ce site? Faites-nous savoir dans les commentaires ci-dessous, nous aimerions savoir!