Ce projet vise à concevoir et réaliser une page web dédiée aux fêtes traditionnelles, incluant le Nouvel An chinois, Noël, la Fête de la Mi-Automne et la Fête des Bateaux-Dragons. L'objectif est de présenter des informations sur l'histoire, les coutumes, les célébrations et les spécificités régionales de ces événements.

La page est développée avec une structure DIV+CSS, mettant l'accent sur une présentation claire et concise. Elle couvre des aspects tels que la présentation de la fête, son évolution historique, les traditions associées, et les particularités locales. Les fonctionnalités de base incluent la personnalisation des couleurs de fond, des polices, l'utilisation de liens hypertextes, l'intégration d'images et de textes, ainsi qu'un menu de navigation et une bannière principale.

Éléments clés d'une conception web de qualité :

• Structure en quatre parties : en-tête, menu de navigation (avec possibilité de sous-menus), section de contenu, et pied de page.
• Navigation fluide entre les pages, permettant d'atteindre des pages de troisième niveau, avec un total de 5 à 10 pages.
• Cohérence stylistique et affichage correct sur les navigateurs, utilisant la technologie Div+CSS.
• Menu attrayant et clair, avec des sous-menus fonctionnels.
• Intégration d'effets JavaScript, tels que des carrousels d'images à défilement automatique ou manuel.
• Utilisation d'éléments multimédias (GIFs, vidéos, audio) et de formulaires.
• Design épuré, esthétique et original.
• Présentation du contenu demandée, tout en assurant une bonne mise en page, une interface agréable, des couleurs harmonieuses et des formats variés.

Structure et programmation :

La mise en page utilisera la structure de disposition flottante, compatible avec les principaux navigateurs. Le développement reposera sur les technologies web modernes : HTML5, CSS3 et JavaScript, garantissant une compatibilité optimale.

Ressources :

Une sélection rigoureuse d'images sera effectuée parmi diverses plateformes pour correspondre au style du site. Ces images seront optimisées pour le web à l'aide de Photoshop.

Fichiers du projet :

Le projet comprendra des fichiers HTML pour la structure, des fichiers CSS pour le style, des fichiers JavaScript pour les interactions dynamiques, et un dossier images pour les ressources graphiques.

Édition des fichiers :

Le code source est conçu pour être simple et accessible avec n'importe quel éditeur HTML (Dreamweaver, VS Code, Sublime Text, etc.).

• Fichiers HTML : index.html pour la page d'accueil, d'autres fichiers HTML pour les sous-pages.
• Fichiers CSS : Ils contiendront tous les styles de la page, y compris les effets de texte et d'image.
• Fichiers JS : Utilisation du JavaScript pour les carrousels, la validation de formulaires et les événements interactifs.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Origine de la Fête</title>
<link rel="stylesheet" type="text/css" href="../css/fete_origine.css">
</head>
<body>
<div>
 <div class="header-top">
    <p class="welcome-message">Bienvenue !</p>
     <input type="text" placeholder="Rechercher...">
     <a href="login.html" class="login-link">Connexion</a>
     <a href="register.html" class="register-link">Inscription</a>
 </div>
 <nav class="main-nav">
  <a class="nav-item" href="homepage.html">Accueil</a>
  <a class="nav-item" href="origin.html">Origine de la Fête</a>
  <a class="nav-item" href="customs.html">Coutumes</a>
  <a class="nav-item" href="quyuan_bio.html">Biographie de Qu Yuan</a>
  <a class="nav-item" href="culture.html">Culture et Histoire</a>
  <span><select><option>Plus</option><option>Histoires courtes sur la Fête</option><option>Vidéos sur la Fête</option></select></span>
 </nav>
 <div class="main-content">
   <div class="content-left">
     <h2><span>Fête des Bateaux-Dragons</span> (Une des quatre fêtes traditionnelles chinoises)</h2>
      <p>La Fête des Bateaux-Dragons, aussi connue sous le nom de Duanwu, est une célébration ancestrale...</p>
      <p>Selon la légende, le poète Qu Yuan de l'État de Chu pendant la période des Royaumes combattants s'est jeté dans la rivière Miluo le cinquième jour du cinquième mois lunaire...</p>
      <p>Cette fête, aux côtés du Nouvel An chinois, de Qingming et de la Fête de la Mi-Automne, constitue les quatre grandes fêtes traditionnelles chinoises...</p>
      <p>En 2006, elle a été inscrite sur la première liste du patrimoine culturel immatériel national...</p>
     <table border="0">
     <tr>
       <td>Nom chinois</td>
       <td>端午节</td>
       <td>Activités</td>
       <td>Courses de bateaux-dragons, cerfs-volants, suspension d'armoise et de calamus...</td>
     </tr>
     <tr>
       <td>Nom étranger</td>
       <td>Dragon Boat Festival</td>
       <td>Cuisine</td>
       <td>Zongzi, Cinq Jaunes, Œufs de cane salés, Gâteaux de haricots mungo...</td>
     </tr>
      <tr>
       <td>Autres noms</td>
       <td>Duan Yang, Fête du Dragon, Fête du Zheng Yang, Fête des Bateaux-Dragons, Fête Céleste du Centre...</td>
       <td>Signification</td>
       <td>Transmission et promotion du patrimoine culturel immatériel</td>
     </tr>
     <tr>
       <td>Date</td>
       <td>Cinquième jour du cinquième mois lunaire</td>
       <td>Période d'origine</td>
       <td>Antiquité</td>
     </tr>
      <tr>
       <td>Type</td>
       <td>Une des quatre fêtes traditionnelles chinoises</td>
       <td>Personnages commémorés</td>
       <td>Qu Yuan, Wu Zixu, Cao E, Jie Zitui...</td>
     </tr>
   </table>
    <h3>Autres noms de la Fête des Bateaux-Dragons</h3>
    <ul>
    <li>Fête de Duan Yang</li>
    <p>Les anciens utilisaient le système des tiges célestes et des branches terrestres pour le calendrier...</p>
    <li>Fête Céleste du Centre</li>
    <p>Au solstice d'été, les sept demeures du Dragon Azur se trouvent au zénith sud...</p>
    <li>Fête du Double Wu</li>
    <p>Dans l'ancien calendrier chinois basé sur les tiges célestes et les branches terrestres, le cinquième mois lunaire...</p>
    <li>Fête des Bateaux-Dragons</li>
    <p>Les anciens peuples Baiyue considéraient le dragon comme leur totem...</p>
    <li>Fête des Herbes Médicinales</li>
    <p>Le jour de la Fête des Bateaux-Dragons est considéré comme le jour où la puissance des herbes est la plus forte...</p>
    <li>Fête du Dragon</li>
    <p>Les anciens ancêtres Baiyue effectuaient des rituels de culte du dragon à la Fête des Bateaux-Dragons...</p>
    <li>Fête du Bain d'Orchidée</li>
    <p>Il existe une coutume populaire consistant à cueillir des herbes médicinales pour se baigner...</p>
    <li>Jour Supérieur</li>
    <p>Dans certaines régions, la Fête des Bateaux-Dragons est appelée "Jour Supérieur", signifiant "jour des dieux"...</p>
    <li>Fête du Calamus, Fête de l'Armoise</li>
    <p>Les anciens croyaient que le calamus et l'armoise avaient le pouvoir de repousser les mauvais esprits...</p>
    <li>Dang Wu Xun</li>
    <p>Dans certaines zones rurales de Shanghai, près de la côte nord de la baie de Hangzhou...</p>
    <li>Fête pour Éviter le Wu</li>
    <p>Dans l'Antiquité, les coutumes du nord et du sud différaient...</p>
    <li>Fête Céleste de la Terre</li>
    <p>Le taoïsme divise l'année en cinq "la"...</p>
    </ul>
   </div>
   <aside class="content-right">
   <p class="related-news-title">Actualités liées</p>
   <img class="news-img-1" src="../images/news_image1.jpg" alt="Actualité 1">
   <p class="news-link-1"><a href="#">À propos de la Fête des Bateaux-Dragons, il y a aussi l'histoire de la Dame au Serpent Blanc</a></p>
   <img class="news-img-2" src="../images/news_image2.gif" alt="Actualité 2">
   <p class="news-link-2"><a href="#">Parfum de Zongzi, la Fête des Bateaux-Dragons réchauffe le village</a></p>
   <img class="news-img-3" src="../images/news_image3.jpg" alt="Actualité 3">
   <p class="news-link-3"><a href="#">Les vacances de la Fête des Bateaux-Dragons touchent à leur fin, préparez-vous au retour</a></p>
   <img class="news-img-4" src="../images/news_image4.png" alt="Actualité 4">
   <p class="news-link-4"><a href="#">Lei Jun joue avec les mots : appelle les fans de Mi "petits Zongzi" car les Zongzi ont "MI dans le cœur"</a></p>
   <p class="separator">..........................................................................................</p>
   <h5><a href="#">À propos de Qu Yuan</a></h5>
   <img class="quyuan-img" src="../images/quyuan_portrait.jfif" alt="Portrait de Qu Yuan">
   <div class="quyuan-bio">
   <p>
   Qu Yuan (environ 278 av. J.-C.), poète et homme politique de l'État de Chu pendant la période des Royaumes combattants... Il est considéré comme le fondateur de la poésie romantique chinoise... Il a créé et représenté le "Chu Ci"... L'apparition de Qu Yuan marque le début d'une nouvelle ère dans la poésie chinoise, passant du chant collectif à la création individuelle. Il est surnommé "l'âme de la poésie". Ses œuvres principales incluent "Li Sao", "Jiu Ge", "Jiu Zhang", "Tian Wen", etc.
   </p>
   </div>
   </aside>
 </div>
 <footer class="page-footer" align="center">Copyright © 2023 - Tous droits réservés</footer>
</div>
</body>
</html>
     

@charset "utf-8";

body {
 margin: 0;
 padding: 0;
 font-family: 'Arial', sans-serif;
 background-color: #e0f7fa; /* Bleu ciel clair */
 text-align: center;
}

.main-container {
 width: 1200px; /* Ajusté pour une meilleure lisibilité */
 margin: 10px auto;
 background-color: #ffffff;
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px 20px;
 height: 50px;
 background-color: #f0f0f0;
 border-bottom: 1px solid #ddd;
}

.welcome-message {
 font-size: 1.4em;
 color: #333;
 font-weight: bold;
}

.header-top input[type="text"] {
 padding: 8px;
 border: 1px solid #ccc;
 border-radius: 4px;
 width: 200px;
}

.login-link, .register-link {
 text-decoration: none;
 color: #007bff;
 margin-left: 15px;
 font-weight: bold;
}

.main-nav {
 background-color: #0056b3; /* Bleu foncé pour la navigation */
 padding: 15px 0;
}

.nav-item {
 color: #ffffff;
 text-decoration: none;
 margin: 0 15px;
 font-size: 1.1em;
 padding: 10px 15px;
 border-radius: 5px;
 transition: background-color 0.3s ease;
}

.nav-item:hover {
 background-color: #007bff; /* Bleu plus clair au survol */
}

.main-content {
 display: flex;
 padding: 20px;
}

.content-left {
 flex: 2; /* Prend 2/3 de l'espace */
 padding-right: 20px;
 text-align: left;
}

.content-left h2 {
 color: #0056b3;
 border-bottom: 2px solid #007bff;
 padding-bottom: 10px;
 margin-bottom: 20px;
}

.content-left span {
 font-size: 1.5em;
 font-weight: bold;
 color: #007bff;
}

.content-left p {
 line-height: 1.6;
 color: #555;
 margin-bottom: 15px;
}

.content-left table {
 width: 100%;
 border-collapse: collapse;
 margin-top: 20px;
}

.content-left table, th, td {
 border: 1px solid #ddd;
}

.content-left th, .content-left td {
 padding: 10px;
 text-align: left;
}

.content-left th {
 background-color: #f2f2f2;
}

.content-left h3 {
 margin-top: 30px;
 color: #0056b3;
}

.content-left ul {
 list-style-type: disc;
 padding-left: 20px;
}

.content-left li {
 margin-bottom: 10px;
 color: #555;
}

.content-right {
 flex: 1; /* Prend 1/3 de l'espace */
 padding-left: 20px;
 border-left: 1px solid #eee;
}

.related-news-title {
 font-size: 1.2em;
 font-weight: bold;
 color: #0056b3;
 margin-bottom: 15px;
}

.news-img-1, .news-img-2, .news-img-3, .news-img-4 {
 width: 100%;
 max-width: 280px; /* Limite la largeur des images */
 height: auto;
 margin-bottom: 10px;
 border-radius: 5px;
}

.news-link-1, .news-link-2, .news-link-3, .news-link-4 {
 display: block;
 margin-bottom: 15px;
 color: #007bff;
 text-decoration: none;
}

.news-link-1:hover, .news-link-2:hover, .news-link-3:hover, .news-link-4:hover {
 text-decoration: underline;
}

.separator {
 color: #ccc;
 font-weight: bold;
 margin: 20px 0;
}

.content-right h5 {
 margin-top: 25px;
 margin-bottom: 10px;
}

.content-right h5 a {
 color: #007bff;
 text-decoration: none;
 font-size: 1.1em;
}

.content-right h5 a:hover {
 text-decoration: underline;
}

.quyuan-img {
 width: 100%;
 max-width: 280px;
 height: auto;
 margin-bottom: 15px;
 border-radius: 5px;
 display: block; /* Pour que margin: auto fonctionne */
 margin-left: auto;
 margin-right: auto;
}

.quyuan-bio {
 background-color: #fff9c4; /* Jaune pâle */
 padding: 15px;
 border-radius: 5px;
 border-left: 5px solid #fbc02d; /* Bordure jaune plus foncée */
}

.quyuan-bio p {
 line-height: 1.6;
 color: #444;
}

.page-footer {
 width: 100%;
 height: 60px;
 line-height: 60px;
 background-color: #333;
 color: #ccc;
 margin-top: 20px; /* Espace avant le footer */
}