Share
Bienvenue à la deuxième leçon de notre série Web Design for Kids!
Dans cette leçon, nous apprendrons tout ce que nous devons faire et les outils nécessaires avant de commencer à écrire le code pour notre site Web Tuts + Town; nous y arrivons, je le promets! De plus, n'oubliez pas de poser des questions dans la zone de commentaires au bas de cette page..
Mais d'abord, voyons de plus près ce que nous allons créer ensemble.!
Il est extrêmement utile de dessiner toutes les idées que nous avons dans la tête avant de commencer à les construire. C'est un exercice qui peut nous faire gagner beaucoup de temps lorsque nous arrivons à la partie codage.
Peut-être que ce qui est dans nos têtes ne semble pas juste une fois que c'est sur le papier? Peut-être que de nouveaux problèmes et questions se posent dans notre croquis? Peut-être que notre design est trop occupé? Beaucoup de ces problèmes se manifesteront dans nos sketches.
Ses D'accord ne pas aimer nos esquisses au début, c'est exactement ce que nous voulons arriver! Nous voulons d'abord que tout cela soit réglé sur papier.
Nous avons besoin d’un site Web que les touristes peuvent visiter et se renseigner sur les magasins et les entreprises de notre ville. Nous regrouperons ces entreprises de manière logique, telles que les «hôtels» au sein d'un groupe et les «restaurants» dans un autre. Nous voudrons avoir des liens vers les sites Web de l'entreprise afin que nos visiteurs puissent cliquer dessus pour obtenir plus de détails..
Nous utiliserons également certaines images pour donner une impression de bienvenue à la ville..
Voici un aperçu du croquis qui a conduit à l’aperçu entièrement conçu et coloré du site:
Ceci est le site exact que nous allons créer à partir de rien! Génial.
Pour écrire du code HTML (tout ce que le langage secret dont nous avons parlé dans la première leçon), il nous faut un éditeur de texte taper dedans.
Il est préférable de ne pas utiliser quelque chose comme Microsoft Word pour cela. code éditeur de texte va rendre notre travail beaucoup plus facile. UNE éditeur de code comprendra ce que nous sommes en train de taper et fera en sorte que tout le code ait les bonnes couleurs, alors que Microsoft Word est meilleur pour la rédaction de rapports scolaires, par exemple.
Il existe plusieurs bons éditeurs de code gratuits que vous pouvez télécharger sur le Web. Si vous ne savez pas comment télécharger quelque chose, ou si vous devez le faire, il est toujours préférable de demander à un adulte.
Bluefish convient parfaitement aux ordinateurs fonctionnant sous Windows, tandis qu'Atom conviendra parfaitement à un Mac..
Nous allons passer à la signification de ce texte dans le prochain cours, mais voici un aperçu de ce à quoi vous pouvez vous attendre en tapant.
Comme nous en avons déjà parlé, un site Web ne représente que quelques fichiers. Ces fichiers doivent tous résider dans le même dossier pour que le navigateur puisse les récupérer..
Le site Web Tuts + Town aura un fichier HTML (enregistré avec un .html extension de fichier à la fin), un fichier CSS (enregistré avec un .extension de fichier css à la fin) et quatre images qui seront sauvegardées dans un dossier nommé «images». Le dossier images vivra dans le même dossier principal que les fichiers HTML et CSS.
UNE extension de fichier est le groupe de lettres qui suit le point dans un nom de fichier, nous indiquant de quel type de fichier il s’agit:
Comme mentionné, nos images seront enregistrées dans un dossier nommé "images" dans notre dossier de site principal, comme ceci:
Dans l’image ci-dessus, nous avons une image nommée town.svg (la .svg extension est juste une sorte d'image) que nous avons mis dans un dossier supplémentaire appelé "images". Faire cela aide à garder les choses en ordre:
Ces deux façons de faire sont correctes, mais nous allons utiliser des dossiers supplémentaires, comme sur l'image de droite..
Nous verrons notre travail directement dans le navigateur, comme celui que vous utilisez maintenant pour afficher cette page Tuts +!
Il existe plusieurs navigateurs disponibles en téléchargement gratuit si vous n'en avez pas déjà, tels que Google Chrome et Firefox. Si vous utilisez un ordinateur Mac, Safari sera déjà installé sur votre ordinateur.!
Nous allons construire notre site directement sur nos ordinateurs et ne pas l'Internet. Si vous vous en souvenez dans notre première leçon, nous avons expliqué que nous ne pouvons pas voir un site Web sur Internet s'il ne se trouve pas sur un serveur..
L'image ci-dessous montre ce à quoi un site Web fini ressemblerait s'il était regardé localement (pas sur Internet) dans un navigateur. Au lieu de voir une adresse Web telle que www.tutsplus.com, nous voyons le site local adresse, qui est un peu différente:
Dans cette leçon, nous avons examiné des éléments importants qui nous aideront à nous préparer à écrire le code de notre site Web. Nous avons examiné comment préparer des fichiers et des outils comme un éditeur de texte et un navigateur.
Dans notre prochaine leçon, nous allons passer directement à la partie codage de notre site Web! Nous allons organiser (je sais, tellement organiser!) Et ajouter du code à notre fichier HTML. C'est là que commence le plaisir!
On se voit en ville!
Accentsconagua