Need help? Chat now!

Hostwinds Blog

Résultats de recherche pour:


Tutoriels Hostwinds: Comment créer un site Web de blog de base sans application de création de site Pt. 3 L'image sélectionnée

Tutoriels Hostwinds: Comment créer un site Web de blog de base sans application de création de site Pt. 3

par: Hostwinds Team  /  décembre 28, 2018


La partie 3 de la série de blogs codant Hostwinds est ici, les gens!Dans les parties 1 et 2, nous avons construit une page d'accueil pour notre site Web de blogging avec HTML et trois pages Web pour trois articles de blog hypothétiques à l'aide de HTML.Sur CSS!CSS est un langage de programmation qui fonctionne conjointement avec votre code HTML pour rendre votre site Web plus agréable et plus personnalisé.Nous avons tellement de choses à couvrir ici, alors accrochez-vous?Avant de commencer à créer notre premier document CSS, nous allons passer à la manière de relier notre document CSS sur nos documents HTML.C'est facile!

Oh et Avant que nous commencions Liaison de notre document CSS sur nos documents HTML, consultez ces liens ci-dessous à la partie 1 de cette série de blogs, la partie 2 de cette série de blogs et nos feuilles de triche sous la forme des poteaux de blog précédents intitulé "Hostwinds HTML HYPE PARTIE 2: TAGTalk "et" Hostwinds CSS Chat. "

Tutoriels Hostwinds: Comment créer un site Web de blog de base sans application de création de site Pt.1

Tutoriels Hostwinds: Comment créer un site Web de blog de base sans application de création de site Pt. 2

Hostwinds HTML Hype Partie 2: Tag Talk

Chat CSS Hostwinds

P.s.Pour réitérer cela, le site Web de blogging que nous créons est basique.L'espoir est que nous pourrons nous développer continuellement sur notre site Web et la rendre lentement plus belle / dynamique / blog magique Post par Blog Post.À toutes fins utiles, cette série de blog a été conçue pour vous fournir les principes fondamentaux du bâtiment du site Web.D'accord, plongons maintenant!

Première chose d'abord: relier votre document CSS à votre document HTML

Ajoutez cette ligne de code dans vos balises d'ouverture et de fermeture dans les quatre de vos documents HTML:

N'oubliez pas de pousser Save!Pour revoir, nos quatre documents HTML ressemblent donc à ce moment:

1. Page d'accueil du site Web:

Mon site Web de blogs

Mon site Web de blogs

Titre du billet de blog 1

Voici où vous pouvez placer un bref synopsis de votre article de blog si vous le souhaitez

Titre du billet de blog 2

Voici où vous pouvez placer un bref synopsis de votre article de blog si vous le souhaitez

Titre du billet de blog 3

Voici où vous pouvez placer un bref synopsis de votre article de blog si vous le souhaitez

Merci d'avoir visité ce site de blogs!

2. Page Web de l'article 1 du blog:

Mon site Web de blogs | Blog 1

Mon site Web de blogs

Titre du billet de blog 1

Voici où vous pouvez placer tout le texte que vous souhaitez ajouter à votre message de blog pour la journée.

Merci d'avoir visité ce site de blogs!

3. Page Web du billet de blog 2:

Mon site Web de blogs | Blog 2

Titre du billet de blog 2

Voici où vous pouvez placer tout le texte que vous souhaitez ajouter à votre message de blog pour la journée.

Merci d'avoir visité ce site de blogs!

4. Page Web du billet de blog 3:

Mon site Web de blogs | Blog 3

Titre du billet de blog 3

Voici où vous pouvez placer tout le texte que vous souhaitez ajouter à votre message de blog pour la journée.

Merci d'avoir visité ce site de blogs!

NOTIFICATION IMPORTANTE: Lorsque le morceau de code que j'insère dans ces articles de blog est trop long pour tenir dans la fenêtre, une petite barre de défilement apparaîtra tout en bas de ce code lorsque vous passez votre souris sur cette zone. Vous pouvez faire glisser la barre de défilement vers la droite pour afficher l'ensemble du code.

Nous allons maintenant prendre cette situation de CSS étape par étape.

Comment configurer initialement le document CSS

Étape 1: Créez un nouveau dossier dans le même dossier et le même éditeur de texte Vous êtes maintenant (le même dossier et le même éditeur de texte que vous mettez votre index.html dans la partie 1).Nommez le dossier "CSS".Ensuite, créez un nouveau fichier dans ce dossier et nommez le fichier "style.css" Votre document style.css modifiera tous vos documents HTML.

Étape 2: Maintenant, nous pouvons faire référence (ou "cible") toutes les balises que nous aimerions modifier comme si:

Body {} NAV {} h4 {} h3 {} img {} p {} bouton {} bouton: clocher {} pied de page {} div {} .ReadNext {} #thankyou {} #

Juste un rappel: Avant de passer à l'étape 3, veuillez consulter la publication du blog concernant les sélecteurs, les propriétés, les valeurs de propriété et la syntaxe générale si vous n'êtes pas encore bien versé dans cette arène.

Étape 3: Nous voulons que le fond de notre page d'accueil et de nos pages Web soit une image qui prend la page complète.Vous pouvez choisir une image de votre goût pour être votre arrière-plan, mais nous nommerons notre image de fond "Your_background_Image.png" pour ce tutoriel.De plus, nous ferons une belle image de nuages dans notre arrière-plan.Pour faire cette image nos arrière-plans de pages Web et le faire prendre toute la page dans chacune de nos pages Web, nous insérerons les propriétés "image de fond" et "taille de fond" dans le sélecteur "corporel" à la mêmehaut du document.

Remarque: Votre CSS (et HTML, d'ailleurs) doit être dans l'ordre à partir de quel élément apparaît sur la page en premier, puis en second, et ainsi de suite.

Une autre note: vous vous demandez peut-être: «Pourquoi y a-t-il deux périodes devant les" /images/your_background_image.jpg? "Bonne prise! Vous vous souviendrez peut-être de la discussion que nous avons eue concernant des chemins de fichiers relatifs dans la partie 1 de cette série de blogs.Nous n'avons utilisé qu'une seule période devant notre référence "/css/style.css" référence lorsque nous avons utilisé un chemin de fichier relatif pour appeler notre CSS au début de ce blog. En effet, le dossier "CSS" est dans le mêmedossier que notre fichier index.html. Il y a deux périodes devant "/images/your_background_image.jpg" car nous disons au navigateur de démarrer dans notre dossier "CSS" où notre document de style.css est, puis sortez de celaDossier "CSS", puis entrez dans un dossier différent nommé "images", puis saisissez le fichier image nommé "Your_background_Image.jpg".

Ensuite, nous voulons modifier la police du texte de lien ("Blog home") dans notre barre de navigation et rendez le texte de lien tout en majuscule.Par conséquent, le document devrait donc apparaître comme suit:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;}

Étape 4: Nous voulons changer les polices de tous nos en-têtes, mettre leurs textes en majuscules, centrer le texte des en-têtes et changer la couleur du texte en bleu foncé.

Ensuite, nous nous assurerons que les images sont toutes centrées, changent leurs largeurs, mettez des frontières autour d'eux et rendons leurs frontières arrondies sur les côtés.Avec ces ajouts inclus, le document ressemble à ceci:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;}

Étape 5: Déplacement droit!Modifions la police et la couleur de nos paragraphes tout en centralisons également les paragraphes du texte.

Après cela, nous allons modifier les boutons de la page d'accueil.Pour les centrer, nous utiliserons les propriétés suivantes:

display: block;margin-left: auto;margin-right: auto;

Pour changer la couleur d'arrière-plan, pour créer le texte majuscule, pour modifier la famille de polices et la taille de la police pour centrer le texte dans les boutons, ajouter de l'espace entre les côtés des boutons et le texte dans les boutons, pour donner aux boutons unBordure noire solide et autour des coins des boutons, nous générerons le code suivant:

background-color: #bee5eb;text-transform: uppercase;font: 27px 'Cinzel', serif;text-align: center;padding: 20px 30px;border: 3px solid black;border-radius: 25px;

Le document devrait maintenant apparaître comme ceci:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;}

Étape 6: Cette partie est cool!Pour changer les couleurs des boutons de la page d'accueil et les faire apparaître presque un peu à travers lorsque quelqu'un tire dessus avec leur souris, nous tapirons le code suivant:

button:hover { background-color: #00a1f5; opacity: .5;}

Maintenant, modifions notre pied de page et notre dernière balise div.Nous allons changer le texte du pied de page (AKA changer la famille de polices, la taille de la police, la couleur de la police et l'alignement du texte), la couleur de fond de la page de page et l'ajout de l'espace entre le pied de page et la zone au-dessus de celui-ci en tapant dans ce code CSS:

footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;}

Nous modifierons également la balise que nous avons créée dans la partie 1 pour comprendre mieux la façon dont les étiquettes fonctionnent.Nous allons faire l'arrière-plan du contenu entre les balises d'ouverture et de fermeture de notre page Index.html un gradient de trois couleurs.Cela nous permettra de voir ce que la nichement de notre morceau de code entre les balises d'ouverture et de fermeture.Ours avec moi ici, les gens, parce que cela n'écrira pas très super esthétiquement agréable sur notre page d'accueil.Nous allons ajouter le code CSS suivant au bas de notre document style.css afin que nous puissions créer ce fond dégradé:

div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);}

Étape 7: Jetez un œil à l'ensemble du document CSS et assurez-vous qu'il a l'air bien:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;} button:hover { background-color: #00a1f5; opacity: .5;} footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);}

Étape 8: Vous vous souviendrez peut-être de cela de la partie 2 de cette série de blogs, mais la seule différence (sauf pour les en-têtes et la partie du texte entre les balises d'ouverture et de fermeture disant "Blog Post 1" plutôt que "Blog Post 2" ou "Blog post3 ") Entre le blog Post une page Web et les pages Web pour les deux blog Putin 2 et 3 sont que ces dernières pages Web contiennent un lien qui permet aux utilisateurs de voir le prochain article de blog (la page Web pour le blog Publier unCe lien, tel qu'il est le blog le plus actuel).Dans la partie 2, nous avons ajouté la classe "README" à la balise dans le pied de page de nos articles de nos articles 2 et 3 HTML.Nous allons maintenant cibler cette classe dans ce document CSS pour rendre leur texte majuscule, ajouter de l'espace entre les lettres du lien "Lire le prochain Blog" Link "et faire le" Merci de visiter ce site de blogging! "flotter à côté du lien "Lire le prochain blog" Lien "plutôt que sous celui-ci (par défaut).

Pour atteindre ces modifications, nous ajouterons le morceau de code suivant au fond de notre document CSS:

#ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;}

Étape 9: N'oubliez pas que lorsque nous avons ajouté que l'ID à la balise imbriquée entre nos balises d'ouverture et de fermeture de notre document Index.html dans la partie 1?Nous avons fait cela afin que nous puissions mieux comprendre comment les identifiants fonctionnent et comment les cibler en CSS.Nous y voilà!Tout d'abord, tapissons le code suivant en bas de notre document de style.css:

#ThankYou { text-transform: uppercase; color: #0b053f;}

Maintenant, je vais expliquer.Tout d'abord, le hashtag devant "Merci" indique au navigateur c'est un identifiant.En donnant seulement le

Tag dans l'index.html L'ID "Merci" et ciblant cet identifiant dans CSS pour effectuer le texte de ce paragraphe spécifique, tous majuscules et bleu marine, nous veillons à ce que seul le paragraphe du pied de page de la page d'accueil soit modifié de cette manière.Les mêmes paragraphes des pieds de page des pages Web pour les poteaux de blogs 1, 2 et 3 ne seront pas majuscules et ne seront pas la couleur bleu marine.Allez-y et vérifiez vos pages Web pour voir cette distinction pour vous-même après avoir ajouté le code ci-dessus à votre page Style.css.

Notre document CSS ressemblera maintenant à ceci:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;} button:hover { background-color: #00a1f5; opacity: .5;} footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);} .ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;} #ThankYou { text-transform: uppercase; color: #0b053f;}

À l'étape 10!

Oh, attendez!Premièrement, un "P.S."

P.s.Je ne peux pas trop insister sur cette question: dans des sites Web plus complexes, des classes, des balises et des identifiants sont essentiels et sont très souvent utilisés.

D'accord, maintenant à l'étape 10!

Étape 10: Testez votre site Web mis à jour et vos pages Web!Accédez à votre fichier Explorer, cliquez avec le bouton droit sur le fichier "index.html", puis cliquez sur "Ouvrir avec".Ensuite, veuillez sélectionner votre navigateur Internet préféré (je recommande Google Chrome).Cliquez sur les boutons "Lire le blog post" et remarquez les modifications que nous avons apportées à nos pages Web avec CSS.

Page d'accueil

Article de blog 1 page Web

Page Web du billet de blog 2

Page Web du billet de blog 3

Toile colorée CSS

En terminant, CSS rend les sites Web plus esthétiques et dynamiques. Nous espérons que vous avez pu profiter de cette série de blogs de tutoriel jusqu'à présent, et nous espérons continuer à développer ce site Web dans les prochains postes de blog. Le plan consiste à rendre notre site Web plus interactif et plus chic à mesure que nous avançons. SPOILER ALERTE: Nous pouvons même jeter un petit JavaScript dans le mélange à un moment donné. Nous espérons que vous apprécierez le reste de votre semaine.

Écrit par Hostwinds Team  /  décembre 28, 2018