Création d'un site touristique pour Chongqing avec HTML, CSS et JavaScript

Conception du site web

Ce projet présente une implémentation front end complète pour un site touristique dédié à Chongqing. La structure combine HTML pour le contenu, CSS pour le style et JavaScript pour les interactions dynamiques.

Structure et fonctionnalités

Disposition responsiev avec mise en page flexbox
Carrousel d'images avec navigation manuelle/automatique
Barre de navigation fixe avec effets de survol
Sections thématiques organisées en grille
Optimisation pour différents navigateurs

Architecture des fichiesr

index.html
styles/
  └── principal.css
  └── carrousel.css
scripts/
  └── carrousel.js
images/
  └── banniere.jpg
  └── paysage1.png

Implémentation HTML


<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Tourisme Chongqing</title>
  <link rel="stylesheet" href="styles/principal.css">
  <link rel="stylesheet" href="styles/carrousel.css">
</head>
<body>
  <div class="conteneur">
    <div class="carrousel">
      <div class="arriere-plan"></div>
      <section>
        <div class="conteneur-image">
          <a href="#">
            <img src="images/banniere.jpg" alt="Vue de Chongqing">
          </a>
        </div>
        <div class="controles">
          <button class="prev">❮</button>
          <div class="points"></div>
          <button class="next">❯</button>
        </div>
      </section>
    </div>

    <nav>
      <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="cuisine.html">Gastronomie</a></li>
        <li><a href="lieux.html">Attractions</a></li>
      </ul>
    </nav>

    <div class="contenu">
      <h1>Découvrir Chongqing</h1>
      <div class="gauche">
        <img src="images/paysage1.png" alt="Pont de Chongqing">
      </div>
      <div class="droite">
        <!-- Contenu supplémentaire -->
      </div>
    </div>

    <footer>
      <p>&copy; 2023 Tourisme Chongqing</p>
    </footer>
  </div>
  <script src="scripts/carrousel.js"></script>
</body>
</html>

Feuille de style CSS

/* styles/principal.css */
body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  background: url('../images/fond.jpg');
}

.conteneur {
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255,255,255,0.8);
}

nav ul {
  display: flex;
  background: #4aa8d8;
  padding: 0;
}

nav li {
  margin: 0 20px;
}

nav a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

nav a:hover {
  color: #1a4f8a;
}

.contenu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

Logique JavaScript du carrousel

// scripts/carrousel.js
const diapos = [
  { image: 'images/banniere.jpg', lien: '#1' },
  { image: 'images/paysage2.jpg', lien: '#2' }
];

class Diaporama {
  constructor() {
    this.indexActuel = 0;
    this.timer = null;
    this.elements = {
      fond: document.querySelector('.arriere-plan'),
      image: document.querySelector('.conteneur-image img'),
      lien: document.querySelector('.conteneur-image a'),
      points: document.querySelector('.points')
    };
    this.initialiser();
  }

  initialiser() {
    diapos.forEach((_, i) => {
      const point = document.createElement('span');
      point.dataset.index = i;
      this.elements.points.appendChild(point);
    });
    this.afficher(0);
    this.demarrer();
    document.querySelector('.prev').addEventListener('click', () => this.precedent());
    document.querySelector('.next').addEventListener('click', () => this.suivant());
  }

  afficher(index) {
    this.indexActuel = index;
    const diapo = diapos[index];
    this.elements.fond.style.backgroundImage = `url(${diapo.image})`;
    this.elements.image.src = diapo.image;
    this.elements.lien.href = diapo.lien;
  }

  demarrer() {
    this.timer = setInterval(() => {
      let nouvelIndex = this.indexActuel + 1;
      if (nouvelIndex >= diapos.length) nouvelIndex = 0;
      this.afficher(nouvelIndex);
    }, 4000);
  }

  precedent() {
    let nouvelIndex = this.indexActuel - 1;
    if (nouvelIndex < 0) nouvelIndex = diapos.length - 1;
    this.afficher(nouvelIndex);
  }

  suivant() {
    let nouvelIndex = this.indexActuel + 1;
    if (nouvelIndex >= diapos.length) nouvelIndex = 0;
    this.afficher(nouvelIndex);
  }
}

document.addEventListener('DOMContentLoaded', () => new Diaporama());

Défis techniques résolus

Optimisation des images pour le web
Création d'effets de transition fluides
Adaptation responsive pour mobiles
Gestion des événements de navigation

Étiquettes: HTML5 CSS3 JavaScript frontend DéveloppementWeb

Publié le 12 juillet à 04h50

L'Atelier Monstre