Concevoir et coder votre premier site Web en 9 étapes faciles à comprendre

1. Modifiez le titre et l'en-tête

OKNO propose beaucoup de codes de conception HTML, mais nous travaillons sur le fichier index-onepage-Personal.html dans ce tutoriel. Il s'agit d'un modèle de code de conception de site Web simple sur lequel les débutants peuvent travailler. Ouvrez-le dans un texte sublime et votre navigateur après avoir extrait le dossier Zip OKNO. Le texte sublime vous permettra de modifier l'exemple de code HTML pour la conception du site Web, et votre navigateur vous permettra de voir les modifications en temps réel.

Dans le texte sublime, trouver le logo commentaire et modifier ces lignes de HTML Design Code:

    	<!-- Logo --><br>		<a class="logo-wrapper" href="index.html"><br>			<img class="logo logo-light lazy" src="/static/imghwm/default1.png" data-src="assets/img/logo-light.png" alt="Concevoir et coder votre premier site Web en 9 étapes faciles à comprendre"><br>			<img class="logo logo-dark lazy" src="/static/imghwm/default1.png" data-src="assets/img/logo-dark.png" alt="Concevoir et coder votre premier site Web en 9 étapes faciles à comprendre"><br>		</a><br>

Les deux lignes sont pour votre logo, mais pour différentes parties de votre page de code de conception Web. La ligne supérieure est pour un logo léger sur un fond sombre. L'essentiel est pour un logo sombre sur un fond léger. Il s'agit de vous assurer que votre marque est visible sur la page.

Placez des copies de votre logo dans le dossier IMG trouvé dans le dossier Assets . Modifiez les noms de fichiers dans le code de conception du site Web ( logo-light.png et logo-dark.png ) pour correspondre aux noms de fichiers de votre logo.

Votre logo doit être dans le format de fichier PNG avec un arrière-plan transparent

que les TAGS A sous la section / home commentaire. Qu'est-ce qui peut être changé ici? Nous pouvons remplacer l'image d'arrière-plan et l'avatar. Vous pourrez également ajouter votre nom, votre titre de travail, votre domaine d'expertise et d'autres informations.

Commençons par modifier les images. Vous pouvez modifier la photo d'arrière-plan à partir de la balise bg-image img dans le balise Container V-Center IMG lui-même via l'attribut source. L'attribut src pour la photo d'arrière-plan, nous pouvons voir où trouver l'image. Dans votre chercheur ou explorateur de fichiers, dirigez-vous vers Assets & gt;  img & gt;   Photos Pour trouver le fichier d'image vous-même.

Pour modifier l'image d'arrière-plan dans votre code HTML simple, préparez un JPG de remplacement avec les dimensions exactes du fichier d'origine. Donnez à votre photo un nom simple et placez-le dans le dossier Photos . Maintenant, modifiez le nom dans la balise H1 dans le commentaire COL-MD-9 Home . Ils sont définis par les balises DD dans chaque balise DT dans chaque attribut HREF avec Assets / cv / name-of-cv-file.extension . Pour rendre le CV téléchargeable, ajoutez l'attribut HREF . La ligne de votre exemple de code HTML pour la conception du site Web devrait maintenant ressembler à ceci:

    					<div class="col-sm-4"><a href="assets/cv/my-resume.docx" download class="btn btn-primary btn-filled btn-block">Download CV</a></div><br>

Enregistrez le code HTML pour ce projet de conception Web et testez-le dans votre navigateur. Notez que pour l'instant, vous ne pourrez ouvrir le fichier qu'à partir du bouton. Mais une fois votre site Web mis en ligne, les visiteurs pourront télécharger votre CV.

3. Section des services

Ajoutons les services que nous offrons à notre exemple de code HTML pour la conception du site Web. Si vous avez modifié le nom de cette section ou toute autre section, à l'étape 1, vous pouvez toujours suivre le reste du tutoriel. Assurez-vous simplement de changer la balise H5 . Cela peut être n'importe quel service que vous offrez. Sur la ligne suivante, donnez une brève description de votre service dans la balise i . Pour cet exemple, j'utiliserai la balise forte sous la div . Dans l'attribut Aria-Valuenow , ainsi que le div . La première ligne nous permet de modifier la date, la ligne suivante concerne le titre de votre expérience d'éducation ou de travail, et la ligne finale est pour l'emplacement. Donc, si je voulais partager mon cours de science des fusées de trois mois à la NASA, je modifierais le code pour ressembler à ceci:

    	<!-- Logo --><br>		<a class="logo-wrapper" href="index.html"><br>			<img class="logo logo-light lazy" src="/static/imghwm/default1.png" data-src="assets/img/logo-light.png" alt="Concevoir et coder votre premier site Web en 9 étapes faciles à comprendre"><br>			<img class="logo logo-dark lazy" src="/static/imghwm/default1.png" data-src="assets/img/logo-dark.png" alt="Concevoir et coder votre premier site Web en 9 étapes faciles à comprendre"><br>		</a><br>

Vous pouvez répéter ces étapes pour les deux autres Event section de classe / témoignages commentaire. Ces citations ont un formatage spécial que nous allons quitter comme elles le sont. Tout ce que nous allons faire est de modifier le texte trouvé dans la balise forte pour que des parties du témoignage se démarquent avec du texte audacieux.

Si vous avez une tête de tête de la personne qui fait le témoignage, ajoutez-le à la section / fonctionne commentaire, puis les commentaires de l'article . Nous pouvons changer notre photo avec une ligne de code familière. Si nous lisons cette ligne, nous pouvons voir que nous devons avoir nos photos dans le dossier Works , que l'on trouve dans le dossier IMG . Nous devrons également modifier le nom du fichier afin que notre site Web sache quelle photo utiliser. 

    					<div class="col-sm-4"><a href="assets/cv/my-resume.docx" download class="btn btn-primary btn-filled btn-block">Download CV</a></div><br>

Faisons ces modifications et enregistrons. Rafraîchissez votre navigateur pour voir votre photo.

Vous remarquerez peut-être que le survol de votre photo montre un effet spécial. Il semble que nous puissions laisser une brève description du projet indiqué sur l'image. Profitons pleinement de ce modèle de page Web HTML et ajoutons une brève description.

Backtrack à la balise A sous l'attribut HREF avec le lien vers la page Web avec votre projet. Essayez de vous lier à Google pour voir comment cela fonctionne.

Cette section vous permet de partager jusqu'à six projets. Suivez les étapes ci-dessus pour chaque travail que vous aimeriez partager.

8. La section de contact

est maintenant le temps de configurer les informations de contact dans le code HTML pour ce projet de conception Web. Il s'agit d'une étape facile à faire dans votre code de conception Web.

Nous commençons par ajouter votre tête dans la section / contenu commentaire. Cela suit le même processus dont nous avons parlé dans la deuxième étape de ce didacticiel de code de conception Web. 

Dans la section / contenu commentaire, nous ajouterons notre adresse, notre numéro de téléphone et notre adresse e-mail. N'hésitez pas à modifier le type d'informations de contact que vous partagez en modifiant ce qui se trouve dans les attributs d'espace réservé trouvé dans le bouton balise.

    	<!-- Logo --><br>		<a class="logo-wrapper" href="index.html"><br>			<img class="logo logo-light lazy" src="/static/imghwm/default1.png" data-src="assets/img/logo-light.png" alt="Concevoir et coder votre premier site Web en 9 étapes faciles à comprendre"><br>			<img class="logo logo-dark lazy" src="/static/imghwm/default1.png" data-src="assets/img/logo-dark.png" alt="Concevoir et coder votre premier site Web en 9 étapes faciles à comprendre"><br>		</a><br>

Mais notre formulaire de contact fonctionnera-t-il? Pas encore! Nous devons effectuer une modification très rapide à notre fichier PHP. Dans votre chercheur ou explorateur de fichiers, accédez à Assets & gt;  php dans le dossier OKNO. Ouvrez ensuite le fichier contact-form.php dans le texte sublime.

Dans ce fichier, vous verrez la ligne de code suivante:

    					<div class="col-sm-4"><a href="assets/cv/my-resume.docx" download class="btn btn-primary btn-filled btn-block">Download CV</a></div><br>

Remplacez l'exemple e-mail par votre propre adresse e-mail et enregistrez le fichier de code de conception Web. Maintenant, lorsqu'un visiteur remplit le formulaire de contact, vous recevrez un e-mail vous indiquant ce qu'ils ont dit.

9. Modifiez le pied de page

Il s'agit du dernier de nos étapes pour coder un site Web. Le pied de page de ce site Web d'une page propose un crédit de droit d'auteur aux créateurs du modèle Web OKNO et à trois liens. Vous pouvez supprimer complètement le pied de page, supprimer certains éléments ou modifier les liens. Si vous souhaitez modifier les liens, je vais vous guider à travers cela.

Sous l'attribut HREF , remplacez le symbole # par un lien vers un site Web que vous souhaitez partager. Cette modification permettra aux visiteurs d'aller sur ce site Web en cliquant sur Inscrivez-vous . Vous pouvez changer ce texte en tout ce que vous souhaitez. Répétez ce processus pour les deux éléments de liste suivants.

Nous avons terminé!

Félicitations, vous avez suivi avec succès les étapes pour coder un site Web avec un modèle Web! Ce processus vous fait gagner beaucoup de temps si vous créez un site pour vous-même ou un client. Et comme vous pouvez le voir, c'est l'un des moyens les plus simples de créer un site Web. 

Trouver des modèles de page Web HTML impressionnants à partir d'Envato Elements

Si vous avez aimé le modèle Web que nous avons utilisé dans ce tutoriel, vous pouvez trouver encore plus de variété sur les éléments Envato. Il y a une tonne de choix modernes pour vous, et vous pourrez les modifier tout aussi facilement qu'Concevoir et coder votre premier site Web en 9 étapes faciles à comprendre. Voici quelques options que vous pourriez essayer qui se trouvent sur les éléments Envato.

1. ASTER: Portfolio créatif et agence HTML Template

Si vous ne savez pas trop de codage pour la conception Web, Aster vous permettra toujours de créer un site Web étonnant. Ce modèle HTML est un excellent exemple de codage de conception Web. Il est conçu pour les portefeuilles numériques et les agences de création. Il y a plus de cinq échantillons de page d'accueil au choix, ainsi que plus de 17 pages intérieures. Le code est propre et commenté, faisant d'Aster l'une des façons les plus simples de coder un site Web. 

2. Appstorm: modèle de démarrage de l'APP

Codage d'apprentissage pour la conception Web? Voici le modèle de page Web HTML parfait pour une startup technologique. L'application est conçue en faisant l'objet d'un logiciel de promotion. La mise en page est incroyablement moderne et fonctionnelle, tout en étant faite pour le mobile. Choisissez parmi trois conceptions de page d'accueil différentes et options de personnalisation pour le look parfait. Appstorm est le moyen le plus simple de coder un site Web pour votre nouveau produit d'application ou SaaS.

3. JADUSONA: Template de Baby Shop Bootstrap4 de ECOMMERCE

Jadusona est un site Web de commerce électronique minimal et facile à utiliser. Vous aurez une variété de démos de pages à utiliser pour montrer vos produits pour bébé et enfant. Préparez votre boutique de bébé en ligne grâce aux fonctionnalités de Jadusona, comme:

• Design entièrement réactif
• Clean Code
• inclus des polices Google
• Ajax Contact Form

Essayez Jadusona si vous avez recherché des exemples de conception Web pour les débutants. Il s'agit d'un bon exemple de codage de conception Web pour démarrer votre site Web.

4. Erika: Portfolio, CV et CV Modèle HTML

Complétez votre CV physique ou votre CV avec Erika. Cette page de destination en ligne est l'endroit idéal pour dire aux visiteurs tout sur vous et vos compétences. Montrez vos services, votre portefeuille, et plus encore avec Erika. Il est prêt pour la rétine, compatible et réactif, afin que les visiteurs puissent parcourir n'importe quel appareil. Fondamentalement, Erika est tout ce dont vous aurez besoin d'un modèle de modèle Web personnel. Commencez à coder pour la conception Web en utilisant ce modèle! 

5. Emily: Modèle HTML Blog personnel

Donnez à votre contenu la plate-forme qu'il mérite avec Emily. Ce modèle de page Web HTML Blog personnel est livré avec plus de 14 pages HTML pour que vous puissiez créer votre site. Sa conception est entièrement réactive et compatible avec les navigateurs, afin que les visiteurs puissent profiter de votre blog sur n'importe quel appareil. Si vous souhaitez en savoir plus sur la conception de sites Web dans le code HTML, un projet comme Emily vous montrera comment il est fait.

Trouvez encore plus de modèles de page Web HTML

Si vous n'êtes toujours pas sûr de commencer à coder un site Web, avoir des options est un bon endroit pour commencer. Les modèles de conception Web présentés ci-dessus sont quelques-uns des meilleurs exemples de conception Web pour les débutants que vous pouvez trouver en ligne aujourd'hui. Si vous souhaitez consulter des options premium avec un code propre, consultez ces articles de l'équipe Envato TUTS.

En savoir plus sur le code avec des Tuts envato

Que vous soyez un débutant ou que vous soyez expérimenté avec du code, il y a toujours quelque chose de nouveau à apprendre. Si vous souhaitez trouver des tutoriels et des guides vidéo pour vous aider, consultez la chaîne YouTube Envato Tutts. Il existe des centaines de didacticiels vidéo disponibles, y compris pour le code. Consultez simplement notre liste de lecture du Guide vidéo de code. Voici un aperçu de ce que vous pouvez trouver:

Il existe également des guides et des cours de tutoriels écrits disponibles sur le site Web des TUTS envato. Vous trouverez ci-dessous quelques-uns avec lesquels vous pouvez commencer.

Continuez à explorer le monde du code!

Aujourd'hui, vous avez appris à commencer à coder un site Web avec un modèle Web et à consulter d'excellentes options de modèle. Les modèles de conception Web sont parfaits si vous voulez que HTML soit facilité ou conception Web rapide pour les débutants et les experts.

N'oubliez pas, vous pouvez trouver des modèles de conception Web plus utiles à partir d'Envato Elements avec votre abonnement. Il existe encore plus de modèles de page Web HTML de ThemeForest, que vous pouvez acheter sans abonnement.

Si vous êtes intéressé à concevoir plus de pages Web, vous pouvez trouver plus de tutoriels sur notre site et la chaîne YouTube.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!