Home-theater-designers
Vous avez toujours voulu faire un site web ? Peut-être avez-vous lu certains de nos HTML ( comprendre le HTML ) et des tutoriels CSS , mais je ne sais 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 être une tâche difficile, je vous guiderai à chaque étape du processus.
Vous produirez ce site Web en utilisant HTML, CSS et JavaScript avec une touche de jQuery (guide de jQuery). Tu ne feras rien vraiment à la pointe de la technologie, ce code devrait donc fonctionner assez bien dans la plupart des navigateurs modernes.
Si vous n'êtes pas sûr d'un CSS, jetez un œil à la Guide CSS à W3Schools.com .
La conception
Voici le design de ce site. Jetez un œil à une image haute résolution si vous voulez un meilleur look, ou encore mieux, téléchargez le projet complet ici .
J'ai conçu ce site Web pour une entreprise fictive en Adobe Photoshop 2017. Si vous êtes intéressé, 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 regroupés, nommés et codés par couleur :
Vous aurez besoin de quelques polices installées pour que les choses aient l'air correctes. Le premier est Police géniale , utilisé pour toutes les icônes. Les deux autres polices sont PT Serif et Myriad Pro (inclus avec Photoshop). Si vous ne savez pas comment installer les polices, lisez notre guide .
Ne vous inquiétez pas si vous n'avez pas Adobe Photoshop , vous n'en avez pas besoin pour continuer.
Code initial
Maintenant que le design est clair, commençons à coder ! Créez un nouveau fichier dans votre éditeur de texte préféré (j'utilise Texte sublime 3 ). Enregistrez ceci sous 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 connaître les détails, allez récupérer le code complet dans le 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 minimum requis.
- Définit un titre de page de 'Noise Media'
- Comprend jQuery hébergé sur Google CDN (qu'est-ce qu'un CDN).
- Comprend Font Awesome hébergé sur Google CDN.
- Définit un style tag pour écrire votre CSS.
- Définit un scénario tag pour écrire votre 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 encore à un site Web.
Remarquez comment le titre de la page est Médias de bruit . Ceci est défini par le texte à l'intérieur du Titre étiqueter. Cette a être à l'intérieur du diriger Mots clés.
Windows n'a pas pu détecter automatiquement les paramètres proxy de ce réseau Windows 10
L'en-tête
Créons l'en-tête. Voici à quoi cela ressemble :
Commençons par ce petit peu gris en haut. C'est un gris clair avec un léger gris foncé en dessous. Voici un gros plan :
Ajoutez ce code HTML dans le corps balise en haut :
Pendant que vous êtes ici, décomposons cela. UNE div est comme un conteneur pour mettre d'autres trucs. Ces « autres trucs » peuvent être plus des conteneurs, du texte, des images, n'importe quoi vraiment. Il y a quelques restrictions sur ce qui peut entrer dans certaines balises, mais les divs sont des choses assez génériques. Il a un identifiant de barre du haut . Cela sera utilisé pour le styler avec CSS, et le cibler avec JavaScript si nécessaire. Assurez-vous que vous n'avez qu'un seul élément avec un identifiant particulier - ils doivent être uniques. Si vous voulez que plusieurs éléments aient le même nom, utilisez un classer au lieu de cela - c'est pour cela qu'ils sont conçus ! Voici le CSS dont vous avez besoin pour le style (mis en haut à l'intérieur de votre style étiqueter):
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;
}Remarquez 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 point (.) à la place. Les html et corps les balises ont leur remplissage et leur marge mis à zéro. Cela évite tout problème d'espacement indésirable.
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 (afin que vous puissiez le réutiliser plus tard), et comme c'est ne pas un site Web réactif, 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 savoir 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. Police géniale est nécessaire pour l'icône elle-même. Font Awesome est un ensemble d'icônes regroupées sous forme de police vectorielle -- génial ! Le code initial ci-dessus a déjà configuré Font Awesome, donc tout est prêt !
Ajouter ce HTML à l'intérieur les enveloppe-normale div :
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 au design - vous les rangerez plus tard. Si vous souhaitez utiliser différentes icônes, rendez-vous sur le Polices géniales icônes page, puis modifiez fa-volume-bas au nom de l'icône que vous souhaitez utiliser.
En passant sur la barre de navigation, vous utiliserez une liste non ordonnée ( les ) pour ça. Ajouter ce HTML après les logo-conteneur (mais toujours à l'intérieur du enveloppe-normale ):
Les href est utilisé pour créer un lien vers d'autres pages. Ce site Web de tutoriel n'a pas d'autres pages, mais vous pouvez mettre le nom et le chemin du fichier (si nécessaire) ici, par ex. avis.html . Assurez-vous de mettre ceci entre les deux guillemets doubles.
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 par un liste non ordonnée . Il supprime ensuite les puces à l'aide list-style-type : aucun ; . Les liens sont légèrement espacés et se colorent lorsque vous passez votre souris dessus. Le petit diviseur gris est une bordure droite sur chaque élément, qui est ensuite supprimée pour le dernier élément à l'aide de la dernier lien classer. 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 enveloppe-normale :
Et voici le CSS :
#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}C'est la partie supérieure terminée. Voici à quoi cela ressemble - assez similaire à la conception, n'est-ce pas ?
Zone de contenu principale
Il est maintenant temps de passer à la zone de contenu principale - la soi-disant 'au-dessus de la ligne de flottaison'. Voici à quoi ressemble cette partie :
C'est une partie assez simple, du texte à gauche avec une image à droite. Cette zone sera librement divisé en tiers, approchant à peu près le Nombre d'or .
Vous aurez besoin de l'exemple d'image pour cette partie. Il est inclus dans le téléchargement. Cette image mesure 670 pixels de large et provient de notre examen Panasonic Lumix DMC-G80/G85.
Ajouter le HTML après les top-color-splash élément:
Welcome!
Noise Media is a technology company specialising in tech reviews.
We’re very good at what we do, but unfortunately, we are not a real company.
Make sure you visit makeuseof.com for the full tutorial on how to build this website.
comment mettre à jour les services google play
Alternatively, check out our review of the Panasonic G80 shown on the right!
Remarquez comment le enveloppe-normale élément est revenu (c'est la joie d'utiliser des classes). Vous vous demandez peut-être pourquoi l'image ( img ) la balise ne se ferme pas. Il s'agit d'une balise à fermeture automatique. La barre oblique ( /> ) l'indique, car cela n'a pas toujours de sens de devoir fermer une balise.
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 dimensionnement de la boîte : border-box ; . Cela garantit que les éléments auront toujours une largeur de 40% ou 60%. La valeur par défaut (sans cet attribut) est votre largeur spécifiée plus tout remplissage, marges et bordures. La classe d'images ( l'image sélectionnée ) a un 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 fond gris foncé, avec du texte centré en blanc.
Ajouter ce HTML après la précédente enveloppe-normale :
makeuseof is the best website ever
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 ne se passe pas grand-chose ici. Le dimensionnement est le principal ajustement nécessaire - taille de la police, espacement, etc. Voici à quoi ressemble le tout maintenant – ça commence à ressembler à un site Web !
Zone d'icône
Continuons d'avancer, c'est presque fini ! Voici la prochaine zone à créer :
Cette partie utilisera plusieurs classes. Les trois icônes sont pour la plupart les mêmes, à l'exception du contenu, il est donc logique d'utiliser des classes au lieu d'identifiants. Ajouter ce HTML après la précédente zone de devis :
YouTube
Checkout our YouTube channel for more tech reviews, tutorials and giveaways!
Reviews
If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.
Buying Guides
At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.
Ces trois icônes sont également Police-Génial . Le HTML utilise à nouveau le enveloppe-normale classer. 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 nouveautés dans le CSS. Les coins arrondis sont définis par rayon de bordure : 200 px ; . 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 un carré avec des coins arrondis. Remarquez comment les actions de survol sont appliquées aux divs - cela n'est pas limité 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 les zones d'icônes' enveloppe-normale :
Voici le CSS :
#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}Voir - des trucs vraiment simples.
Ajoutez du piquant
Ça y est, le codage est fait ! Vous pouvez absolument laisser les choses telles qu'elles sont, c'est une page Web terminée. Vous avez peut-être remarqué cependant, qu'il ne semble pas exactement comme la conception. La principale raison en est les polices utilisées. Réglons cela.
La police utilisée pour la plupart des titres est Myriade Pro . Cela vient avec Adobe Create Cloud, mais il n'est pas disponible en tant que police Web. La police actuellement utilisée sur la page Web est Helvetica . Cela semble ok, vous pouvez donc le laisser tel quel, cependant PT Sans est disponible en tant que police Web. La police utilisée pour tout le texte est PT Serif , qui est disponible en tant que police Web.
Les polices Web sont un processus simple. Tout comme pour charger une nouvelle police sur votre ordinateur, les pages Web peuvent charger des polices à la demande. L'un des meilleurs moyens d'y parvenir est de Polices Google .
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';
}Modifiez maintenant 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 - ce sera par défaut PT-Serif à la place de PT-Sans .
Pour finir, utilisons un peu de JavaScript pour faire défiler trois images différentes. Tu auras besoin de Image_2 et Image_3 pour cette partie, et encore une fois, c'est facultatif. Le site Web est complètement fonctionnel à ce stade sans cette fonctionnalité. Voici à quoi cela ressemblera (accéléré) :
Modifiez votre code HTML pour inclure trois images en vedette. Remarquez comment deux d'entre eux ont une classe CSS de caché . Chaque image a reçu un identifiant afin que JavaScript puisse cibler chacune d'elles indépendamment.
Voici le CSS nécessaire pour masquer les images supplémentaires :
.hidden {
display: none;
}Maintenant que le HTML et le CSS sont pris en charge, passons à JavaScript. Il est utile de comprendre le Document Object Model (DOM) pour cette partie, mais ce n'est pas une exigence.
Trouvez le scénario zone en bas de page :
/* JavaScript goes here, at the bottom of the page */
Ajoutez le JavaScript suivant dans le scénario étiqueter:
/* 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 se passe quelques choses ici. Le code est contenu à l'intérieur $(document).ready() . Cela signifie qu'il s'exécutera une fois que votre navigateur aura fini de rendre la page - c'est une bonne pratique. Les setInterval() La fonction est utilisée pour appeler le changeImage() fonctionner régulièrement à un intervalle prédéfini en millisecondes (1000 millisecondes = 1 seconde). Celui-ci est stocké dans le temps variable. Vous pouvez augmenter ou diminuer cette valeur pour accélérer ou ralentir le défilement. Enfin, une simple instruction case est utilisée pour afficher différentes images et garder une trace de l'image actuellement affichée.
Défi de codage
C'est ça! J'espère que vous avez beaucoup appris au cours du processus. Si vous avez envie de relever un défi et que vous souhaitez mettre vos nouvelles compétences à l'épreuve, 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 enveloppe-normale et un tiers/deux tiers Des classes.).
Améliorer le défilement des images : Modifiez le JavaScript pour animer les changements d'image (indice : regardez jQuery fondu et Animé ).
Implémentez plusieurs devis : Modifiez les guillemets pour passer de l'un à l'autre (indice : regardez le code de défilement de l'image pour un point de départ).
Configurer un serveur : Configurez un serveur et envoyez des données entre la page Web et le serveur (indice : lisez notre guide sur JSON et Python ).
transférer des fichiers de virtualbox vers l'hôte
Une fois que vous êtes à l'aise avec JavaScript ou si vous avez de l'expérience avec Ruby, vous pouvez vous essayer à la création d'un site Web avec un constructeur de site Web statique comme GatsbyJS ou Jekyll .
Partager Partager Tweeter E-mail Comment changer l'apparence de votre bureau Windows 10Vous voulez savoir comment améliorer l'apparence de Windows 10 ? Utilisez ces personnalisations simples pour vous approprier Windows 10.
Lire la suite Rubriques connexes- La programmation
- HTML
- Création de sites web
- CSS
Joe est diplômé en informatique de l'Université de Lincoln, au Royaume-Uni. C'est un développeur de logiciels professionnel, et lorsqu'il ne pilote pas de drones ou n'écrit pas de musique, on le trouve souvent en train de prendre des photos ou de produire des vidéos.
Plus de Joe CoburnAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner