Vous serez certainement amenés à créer de nouvelles pages dans votre site. Supposons que vous vouliez mettre à disposition des élèves des éléments de cours, de TD… Tout d'abord, créez un nouveau dossier où vous mettrez tous les documents que vous voulez mettre en ligne : Faites un clic droit sur monlycee, puis nouveau dossier. Nommez-le (par exemple doc cours).

Pour l'exemple, je place dans ce dossier un document de TD de terminale sur le communautarisme.

Maintenant, je peux créer la nouvelle page. Cliquez sur Fichier puis nouveau. Dans l'onglet General choisissez la catégorie Page de base. Dans la liste de Page de base choisissez HTML. Maintenant vous pouvez cliquer sur le bouton Créer.

Vous pouvez maintenant modifier les propriétés de la page, comme nous l'avons déjà vu : donner un titre au document, définir la couleur ou l'image d'arrière-plan… Puis l'enregistrer (nom non accentué).

Dans le kit, une page de style a été créée : styleses.css. Une feuille de style est un ensemble d'éléments de mise en forme, les styles, qui contrôlent le formatage d'un document. Ainsi une feuille de style permet de mémoriser toute la mise en forme de votre site. Il n'est pas utile de refaire à chaque nouveau document la mise en forme. De plus, si vous voulez modifier la mise en forme, il suffit de modifier la feuille de style et toutes les pages de votre site faisant appel à cette feuille de style seront modifiées en même temps. Si vous voulez utiliser la feuille de style présente ici :

Cliquez dans la fenêtre de propriétés sur CSS.

La fenêtre de styles css s'ouvre. Cliquez sur le bouton Attacher une feuille de style.

Une fenêtre s'ouvre. Vous ajoutez le fichier

styleses.css sous lien. OK. Vous retrouvez le fond défini dans la feuille de style. Vous pouvez voir les autres éléments de la mise en forme : cliquez sur tous.

Vous pouvez si vous le voulez modifier ces styles. Si vous faites un clic droit sur body puis modifier, vous pourrez modifier la couleur d'arrière plan (et donc toutes les pages utilisant ce style seront modifiées). Idem pour le paragraphe p, a :link le style de la police des liens, a :visited le style de la police des liens déjà visités, a :hover l'apparence des liens lorsque le pointeur est sur le lien, et .titre le style du titre.

Nous allons maintenant insérer un tableau dans la page web. Nous allons utiliser les cellules du tableau pour positionner les éléments de la mise en page en fusionnant, si nécessaire, les cellules pour centrer du texte ou des images.

Pour insérer un tableau placez votre curseur à l'endroit souhaité (dans notre exemple il est placé en haut de la page). Puis cliquez sur le bouton insérer un tableau.

Choisissez le nombre de lignes et de colonnes.

Vous pouvez spécifier la largeur du tableau : en pixels, la largeur sera fixe quelle que soit la fenêtre du navigateur, ou en %, la largeur sera alors proportionnelle à la fenêtre du navigateur (70% = 70% de la largeur de la fenêtre)… Pour notre exemple nous allons choisir un tableau de 3 colonnes et 4 lignes.

Vous pouvez modifier les caractéristiques du tableau dans la fenêtre propriétés. Nous allons notamment enlever les bordures de façons à ce qu'elles ne soient pas visibles dans le navigateur : dans la case Bordure tapez 0.

Placez votre curseur dans la 1ère cellule, choisissez Titre dans le panneau propriétés, Style. (vous n'aurez titre que si vous avez importé la feuille de style : voir plus haut), ou bien choisissez vous-mêmes la police, sa taille…

Tapez le texte accueil. Puis sélectionnez le texte. Nous allons créer un lien vers la page d'accueil du site. Allez sur le bouton Pointer vers un fichier, et tout en maintenant le clic gauche, pointer vers la page sesindex.html. Relâcher, le lien est créé.

Dans la 2ème cellule, taper (ou copiez-collez à partir de la page sesindex.html) .. au lycée du bac à 100%.. au format Titre et centrez le texte. Dans la 3ème cellule, vous pouvez placer le logo du lycée, si vous voulez. (insérer image).

Fusionnez les cellules de la 2ème ligne. Sélectionnez la ligne (ou les 3 cellules), puis clic droit, tableau, fusionner les cellules.

Tapez le texte Cours et TD, en centrant, et style Titre. Ouvrez la page sesindex.html, sélectionnez le texte de la colonne de gauche, puis copier. Fermez la page, puis revenez à la page cours.

Placez votre curseur dans la 1ère cellule de la dernière ligne. Faites un clic droit, choisissez collage spécial.

Puis choisissez Texte structuré avec formatage complet. OK. Vous remarquerez que tous les liens ont été copiés.

Fusionnez les 2 dernières cellules de la dernière ligne. Tapez TD de terminale sur le communautarisme, en choisissant votre police, couleur… Sélectionnez le texte. Utilisez le pointeur de fichier ou bien Recherchez le fichier, sélectionnez le fichier 12 communautarisme…. OK. Vous avez créé un lien vers ce fichier. Enregistrez, faites F12 pour vérifier dans le navigateur.

Il vous faudra maintenant modifier votre page d'accueil afin de mettre un lien vers la page que vous venez de créer.