Video
Thống kê lượt truy cập
Thiết kế trang web bằng bootstrap 5
Website được cấu tạo bởi nhiều thành phần nội dung, dưới đây lớp học bình dân trình bày thiết kế trang web về giới thiệu tổ chức giáo dục. Lớp học bình dân chia trang web thành các thành phần nội dung sau:
+ Phần đầu trang
+ Phần menu (Thanh điều hướng)
+ Slide bài viết
+ Giới thiệu mục tiêu
+ Tìm kiếm nội dung
+ Giới thiệu về tổ chức
+ Giới thiệu về các sự kiện
+ Video giới thiệu
+ Phần chân trang
+ Phần cấu trúc tổng thể
Dưới đây là các hướng dẫn làm từng thành phần nội dung của trang chủ
1. Cách tạo phần đầu trang
Banner là thành phần trên cùng của mỗi trang web, là thành phần giới thiệu tóm tắt về website thông qua hình ảnh hoặc chữ viết nổi bật
Dưới đây là 1 ví dụ về banner:
Phân tích về banner này chúng ta thấy có 3 thành phần:
+ Thành phần 1: hàng đầu tiên - màu xanh, gồm 2 nút bên trái và 2 nút < và > bên phải
+ Thành phần 2: hàng thứ 2 - chứa thông tin ngày tháng năm và các nút để vào các chức năng bên trái và 3 icon bên phải
+ Thành phần 3: hàng thứ 3 – gồm 4 thông tin về website
Áp dụng các thẻ html, các thư viện có sẵn của bootstrap 5.3 ta có phần trình bày banner như sau:
<!-- Top Bar -->
<div class="bg-light p-2 text-center d-flex justify-content-between">
<div>
<span>Welcome, Guest! | <a href="#">Login</a> / <a href="#">Register</a></span>
</div>
<div>
<span id="current-time">10:20</span> | <span id="current-weather">Sunny, 25°C</span>
</div>
<div>
<span>System Notifications: <a href="#">View All</a></span>
</div>
</div>2. Cách tạo Menu
Menu là thành phần thể hiện các chức năng chính của website, có nhiều loại menu, menu 1 cấp, menu 2 cấp hoặc nhiều hơn. Trong bài này chúng ta cùng làm menu 2 cấp
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">LOPHOCBINHDAN</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Trang chủ</a></li>
<li class="nav-item"><a class="nav-link" href="#">Khoá học</a></li>
<li class="nav-item"><a class="nav-link" href="#">Sự kiện</a></li>
<li class="nav-item"><a class="nav-link" href="#">Giới thiệu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Liên hệ</a></li>
</ul>
</div>
</div>
</nav>3. Cách tạo Slide bài viết
Dưới đây là 1 dạng slide bài viết, dạng này chỉ có 1 bài viết và trong đó có mô tả, tiêu đề, phía dưới là các mô tả được định dạng nổi bật làm nổi bật thông tin.
<!-- Slide Section -->
<section class="hero d-flex justify-content-center align-items-center">
<div class="container">
<h1>Innovazione Sociale per il Patrimonio Culturale</h1>
<p>Providing free tuition, skilled lecturers, and open library access.</p>
<a href="#" class="btn btn-primary">Primary Button</a>
<a href="#" class="btn btn-secondary">Secondary Button</a>
</div>
</section>
<!-- Features -->
<div class="container mt-4">
<div class="row">
<div class="col-md-4">
<div class="feature-box feature-yellow text-center">Skilled Lecturers</div>
</div>
<div class="col-md-4">
<div class="feature-box feature-red text-center">Free Tuition</div>
</div>
<div class="col-md-4">
<div class="feature-box feature-blue text-center">Open Library</div>
</div>
</div>
</div> Sau đây là cách thiết kế slide bài viết như hình trên
+ Đầu tiên ta sẽ thiết kế 1 thẻ div chứa 1 hình ảnh và 1 bài viết, thẻ div này ta cài đặt position là relative
- Hình ảnh ta sẽ chọn ảnh có thiết kế tỉ lệ 16:7
- Bài viết ta sẽ có 3 thành phần:
* Tiêu đề
* Nội dung
* 2 nút liên kế để dẫn tới trang mong muốn
Bài viết sẽ có nền trắng và độ mờ 0.5, ta sẽ cài đặt position là absolute, right là 10%, top 10%
4. Cách thiết kế mục giới thiệu mục tiêu
<!-- University Notice -->
<div class="container mt-5 university-note">
<h3>University Notice</h3>
<div class="row text-center">
<div class="col-md-3">
<img src="/images/note1.webp" alt="College Schedule">
<p>College Schedule</p>
</div>
<div class="col-md-3">
<img src="/images/note2.webp" alt="Newly Published Books">
<p>Newly Published Books</p>
</div>
<div class="col-md-3">
<img src="/images/note3.webp" alt="Exam Routine">
<p>Exam Routine</p>
</div>
<div class="col-md-3">
<img src="/images/note4.webp" alt="Event Notices">
<p>Event Notices</p>
</div>
</div>
</div>5. Cách thiết kế hộp tìm kiếm nội dung
<!-- Search Courses -->
<div class="container-fluid search-section text-center">
<div class="container search-content">
<h3>Search Courses</h3>
<div class="input-group">
<select class="form-control rounded-4">
<option value="">Tất cả các khoá học</option>
</select>
<input type="text" class="form-control ms-2 rounded-4" placeholder="Tên khoá học...">
<button type="button" class="btn btn-primary rounded-2">Tìm kiếm</button>
</div>
</div>
</div>6. Cách thiết kế phần giới thiệu
<!-- About Us -->
<div class="container mt-5">
<div class="row align-items-center">
<div class="col-md-6">
<h3>About Us</h3>
<p>We are dedicated to providing high-quality education with free tuition, skilled lecturers, and an open library.</p>
<a href="#" class="btn btn-primary">Xem thêm</a>
<a href="#" class="btn btn-secondary">Xem khóa học</a>
</div>
<div class="col-md-6">
<img src="/images/aboutus.webp" alt="About Us" class="about-img">
</div>
</div>
</div>7. Cách thiết kế phần danh mục sự kiện
<!-- Upcoming Events -->
<div class="container mt-5">
<h3>Upcoming Events</h3>
<div class="row mb-3">
<div class="col-md-2">
<img src="/images/event.webp" alt="Event 1" class="event-img">
</div>
<div class="col-md-10">
<h5>Meeting to change education system</h5>
<p>Join us to discuss improvements in the education system. Date: July 6, 2025</p>
</div>
</div>
<div class="row mb-3">
<div class="col-md-2">
<img src="/images/event2.webp" alt="Event 2" class="event-img">
</div>
<div class="col-md-10">
<h5>Women education empowerment</h5>
<p>Empowering women through education and skills development. Date: August 1, 2025</p>
</div>
</div>
</div>8. Cách thiết kế phần Video giới thiệu
<!-- Learning Online -->
<div class="learning-online">
<div class="container learning-content">
<h2>Learn Anytime, Anywhere</h2>
<p>Explore our wide range of online courses and expand your knowledge from the comfort of your home.</p>
<button class="btn btn-primary">Explore Courses</button>
</div>
</div>
9. Các thiết kế phần chân trang
<!-- Footer -->
<footer class="bg-dark text-white text-center p-3 mt-4">
<div class="row">
<div class="col-md-4">
<p>© 2025 HamroClass. All Rights Reserved.</p>
</div>
<div class="col-md-4">
<div class="social-links mt-2">
<a href="#" class="text-white me-3">YouTube</a>
<a href="#" class="text-white me-3">TikTok</a>
<a href="#" class="text-white me-3">Zalo</a>
<a href="#" class="text-white">Facebook</a>
</div>
</div>
<div class="col-md-4">
<div class="friend-links mt-2">
<a href="#" class="text-white me-3">Partner 1</a>
<a href="#" class="text-white me-3">Partner 2</a>
<a href="#" class="text-white">Partner 3</a>
</div>
</div>
</div>10. Phần tổng thể trang
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HamroClass - Education Website</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.hero {
background: url('/images/lophocbinhdan.webp') center/cover no-repeat;
height: 60vh;
display: flex;
align-items: center;
color: white;
text-align: center;
}
.search-section {
background: url('/images/vui-choi.webp') center/cover no-repeat;
background-size: cover;
position: relative;
padding: 160px 0;
color: white;
}
.search-section .search-content {
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.feature-box {
padding: 20px;
color: white;
}
.feature-yellow { background-color: #f1c40f; }
.feature-red { background-color: #e74c3c; }
.feature-blue { background-color: #3498db; }
.event-img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
}
.university-note img {
width: 100%;
height: auto;
border-radius: 10px;
}
.about-img{
width: 400px;
}
.learning-online {
background: url('/images/learnin-online.webp') center/cover no-repeat;
background-size: cover;
padding: 80px 0;
text-align: center;
color: white;
position: relative;
}
.learning-online::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.learning-content {
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<!-- Top Bar -->
<!-- Header -->
<!-- Slide Section -->
<!-- University Notice -->
<!-- Search Courses -->
<!-- About Us -->
<!-- Upcoming Events -->
<!-- Learning Online -->
<!-- Footer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Các thành phần được mã hoá thành ghi chú. Sau khi tìm hiểu xong các mục thì ghép vào đúng vị trí. Các vị trí được lắp ráp vào sẽ được 1 trang hoàn chỉnh.
Trong phần tổng thể: Các thư viện của bootstrap chưa thể đáp ứng được hết các yêu cầu mô tả nội dung trang web, lớp học bình dân đã thiết kế một số mẫu css bổ sung để mô tả nội dung trang web được như mong muốn.