Share
Bienvenue à Tuts + Town, où tout le monde aime le webdesign! Dans cette série, nous allons tout apprendre sur la conception et la construction d'un site Web. Pour nous aider, nous allons créer un site web ensemble.
Ces leçons (ou tutoriels) Vous donnera un guide étape par étape pour donner vie à un site Web. Tous les fichiers d'exercices seront inclus à la fin de chaque leçon afin que vous puissiez comparer votre propre travail au fur et à mesure..
Alors, s'il vous plaît entrez, installez-vous confortablement et créons quelque chose pour les gens de Tuts + Town!
Faisons un pas en arrière et réfléchissons au fonctionnement du Web.
Lorsque deux ordinateurs sont connectés à Internet (une ligne jaune apparaît dans l’illustration ci-dessous), ils peuvent se parler..
Un serveur (la boîte bleue) est un ordinateur spécial contenant des fichiers de page Web. Votre ordinateur à la maison ou à l’école n’est pas un serveur, car il n’est pas connecté directement à Internet. Nous nous connectons à Internet via un Fournisseur de services Internet (ISP).
Le contenu d'un site (tout ce dont parle un site Web) est organisé selon un ensemble spécial de règles que les ordinateurs comprennent. un peu comme parler dans une langue codée secrète, sauf que nous serons bientôt dans ce petit secret aussi!
Comment votre ordinateur se connecte au WebDans cette image le navigateur demande à voir www.tutsplus.com à partir du serveur où résident les fichiers du site. Le serveur renvoie les fichiers et le navigateur les traduit pour afficher une page à l'écran. Et ça arrive très rapidement!
C'est a propos de la communication et partage information.
A cause de tout cela, un site que vous écrivez localement (sur votre ordinateur) ne peut être vu par d’autres personnes sur un autre ordinateur tant que vous n'avez pas déplacé les fichiers sur un serveur. Nous verrons cela correctement plus tard.
Le travail d'un web designer est très important. Tout ce qui se passe dans l'image ci-dessus se produit pour une seule raison: afficher un site Web. Le rôle d'un concepteur de site Web consiste à décider de l'apparence et du fonctionnement de ce site Web, et même d'autres choses, comme de s'assurer que le site Web est utilisable par les visiteurs handicapés (de la même manière que vous êtes un visiteur à Tuts + maintenant).
Le métier de web designerDans cette série, nous allons créer un site Web pour Tuts + Town. La ville a besoin d'un lieu où les touristes peuvent obtenir des informations utiles sur la ville avant de se rendre.
Voici un aperçu du site:
Ce que nous allons construireCe site Web inclura tous les points de conception Web sur lesquels nous allons apprendre. Ce sera un premier projet de conception de sites Web vraiment intéressant!
Parlons maintenant un peu de ce dont nous avons besoin pour y arriver.
Dans un premier temps, nous allons élaborer notre site, puis inclure ce que nous voulons avoir sur la page dans un fichier spécial. Nous ajouterons également ici des liens pour que les visiteurs soient redirigés vers d’autres lieux, tels que les sites Web des magasins..
L'esquisse est importante!Après avoir rédigé et rédigé le fichier spécial de notre site Web, nous devrons lui donner une belle apparence. C’est la section où toutes nos idées de couleurs et de mise en page (décider de l’emplacement de tous ces éléments sur l’écran) prendront vie..
Comment pouvons-nous rendre notre site facile à utiliser? Quoi ressentir voulons-nous que nos couleurs donnent? Où tout doit-il être placé sur l'écran d'un smartphone? Qu'en est-il d'un écran d'ordinateur complet? Quoi Police de caractère aura l'air mieux? Ce sont toutes des choses auxquelles nous devrons penser, mais ne vous inquiétez pas, c'est un processus vraiment amusant et ces questions vous viendront naturellement à mesure que vous créerez plus de sites Web..
Ci-dessous est un complet feuille de route pour le voyage que nous allons faire pour créer notre site web. Chaque bloc contient une introduction au sujet et est ensuite divisé en éléments plus petits..
Notre feuille de routeVous pouvez voir par l'étoile rose que nous lisons le Intro en ce moment. Nous avons maintenant une idée de base du fonctionnement du Web, du travail d'un concepteur de site Web et avons atteint un sommet dans le projet que nous allons concevoir. et construire ensemble.
La prochaine partie est celle où nous inventons des idées et commençons à dessiner. L'esquisse est un moyen très amusant de rassembler vos idées sur un dessin avant de commencer à coder. Cela peut faire économiser beaucoup de temps et nous aider à rester sur la bonne voie.
Nous parlerons ensuite des fichiers et des outils nécessaires pour commencer à utiliser le codage une partie de notre site web.
Langage Signalétique Hyper Text (HTML) est ce langage secret (mais pas pour longtemps!) Utilisé pour organiser notre fichier texte dont nous avons parlé brièvement. Cette langue aide nos navigateurs à comprendre et à afficher les fichiers du site..
Tout ce qui se trouve sur notre site Web, et tous les sites Web d'ailleurs, sera hébergé au format HTML. éléments. Les éléments sont des fragments de ce langage qui ont un sens et aide décrire tout ce que nous plaçons sur la page.
Ne vous inquiétez pas de la signification actuelle de ce code, aussi longtemps que vous savez que chaque site Web est créé à partir d'un document écrit..
Feuilles de style en cascade, CSS, nous permet de définir le style (couleurs, polices, sens général) de notre site Web, en le rendant aussi attrayant que possible, ainsi que son utilisation, par ses visiteurs..
A quoi ressemble CSSCSS peut également nous aider à disposer de toutes nos pièces sur la page..
Au cours de cette partie du voyage, nous parlerons rapidement du type d’image qui sera incluse sur notre site et de la façon de le personnaliser. Il y aura quatre belles images ajoutées, que pensez-vous d'elles?
Dans cette partie, nous examinerons les «blocs de construction» de la conception Web. Nous voulons nous assurer de créer quelque chose que les gens utiliseront et pourront utiliser facilement, tout en veillant à ce qu'il soit beau.
Typographie est l'art de faire des arrangements et un excellent suivi de notre nouvelle leçon de design, car il peut grandement contribuer au succès de notre site Web.
Le premier exemple de typographie sur notre site se trouve tout en haut:
La couleur est très importante et très amusante. La couleur peut rendre un site joli, ainsi que sens, dont nous parlerons tout ici.
Nous terminerons cette série de leçons en apprenant à obtenir les fichiers de votre site Web sur l’un de ces ordinateurs spéciaux, un serveur, afin que tous vos amis et votre famille puissent le voir sur Internet. Nous discuterons également de l'endroit où vous pouvez mener vos études avec votre nouveau titre de "Web Designer for Tuts + Town"..
Mais ne nous inquiétons pas trop à ce sujet pour l'instant, nous venons tout juste d'arriver!
Dans la prochaine leçon, nous allons directement apprendre comment nous préparons la construction d’un site Web avec HTML. J'ai hâte de te voir en ville!
Accentsconagua