Bài viết hướng dẫn tạo bố cục trang thông tin có header, footer, sidebar bên phải, có menu trong header và web có khả năng responsive với php. Đây là một mẫu cơ bản của một trang web sử dụng HTML, CSS và PHP để tạo header, footer, sidebar và menu responsive. Để làm cho trang web có khả năng responsive, chúng ta sẽ sử dụng các kỹ thuật CSS như media queries.
Tạo bố cục không dùng style css tự tạo
Tạo trang index.php có nội dung như sau:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang Web Của Tôi</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<?php include 'header.php'; ?>
<div class="container">
<div class="content">
<h1>Nội dung trang web</h1>
<p>Đây là nội dung chính của trang web.</p>
</div>
<?php include 'sidebar.php'; ?>
</div>
<?php include 'footer.php'; ?>
</body>
</html>Tạo file header.php như sau:
<header>
<!-- Bạn có thể thay code của bạn trong mục này để hiển thị trên header -->
<nav class="navbar">
<ul>
<li><a href="#">Trang Chủ</a></li>
<li><a href="#">Giới Thiệu</a></li>
<li><a href="#">Dịch Vụ</a></li>
<li><a href="#">Liên Hệ</a></li>
</ul>
</nav>
</header>Tạo file footer.php có nội dung như sau:
<footer>
<p>Bản quyền © 2024 - Trang Web Của Tôi</p>
</footer>Tạo file sidebar.php có nội dung như sau:
<aside class="sidebar">
<h3>Sidebar</h3>
<p>Nội dung của sidebar ở đây.</p>
</aside>
Tạo thư mục css và tạo file style.css trong thư mục này, nội dung như sau:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {font-family: Arial, sans-serif;}
.container {display: flex;}
.content { flex: 1; padding: 20px;}
.sidebar { flex: 0 0 300px; padding: 20px; background: #f4f4f4;}
header { background: #333; color: #fff; padding: 10px 0; text-align: center;}
nav ul { list-style-type: none;}
nav ul li { display: inline;}
nav ul li a { color: #fff; text-decoration: none; padding: 10px;}
footer { background: #333; color: #fff; text-align: center; padding: 10px 0;}
/* Responsive */
@media (max-width: 768px) {
.container { flex-direction: column; }
.sidebar { flex-basis: 100%; }}/* Your code... */Kết quả có thể như sau:
Tạo bố cục sử dụng bootrapmin css
Khi tạo bố cục bằng bootrapmin css bạn sẽ không phải tạo lớp css riêng cho mình và cũng có thể khai thác các lớp của bootrapmin css cũng như thư viện java như jquery hoặc thư viện bootrapmin.js
Tạo trang index2.php như sau:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang Web Của Tôi</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
/* Your custom styles here */
</style>
</head>
<body>
<?php include 'header2.php'; ?>
<div class="container">
<div class="row">
<div class="col-sm-8">
<main>
<h1>Nội dung trang web</h1>
</main>
</div>
<div class="col-sm-4">
<?php include 'sidebar2.php'; ?>
</div>
</div>
</div>
<?php include 'footer2.php'; ?>
</body>
</html>Bạn có thể thay dòng css/bootstrap.min.css bằng link https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css hoặc lưu thư viện từ link này về thư mục css của mình thì vẫn giữ nguyên css/bootstrap.min.css
Tạo trạng header2.php như sau:
<header class="bg-dark text-light">
<div class="container">
Nội dung phần Header
</div>
</header>Tạo trang footer2.php như sau:
<footer class="bg-dark text-light text-center py-3">
<p>Bản quyền © 2024 - Trang Web Của Tôi</p>
</footer>Tạo trang sidebar2.php như sau:
<aside class="bg-info">
<h3>Sidebar</h3>
<p>Nội dung của sidebar ở đây.</p>
</aside>Kết quả có thể như sau:
Còn đây là hình ảnh khi xem trang ở thiết bị nhỏ hơn hoặc cửa sổ trình duyệt nhỏ hơn
Tạo bố cục sử dụng bootrapmin css có bổ sung menu desktop và responsive
Tạo trang index3.php có nội dung như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang Web Của Tôi</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<?php include 'header3.php'; ?>
<div class="container">
<div class="row">
<div class="col-lg-8">
<main>
<h1>Nội dung trang web</h1>
<p>Đây là nội dung chính của trang web.</p>
</main>
</div>
<div class="col-lg-4">
<?php include 'sidebar.php'; ?>
</div>
</div>
</div>
<?php include 'footer.php'; ?>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".menu-toggle").click(function(){
$("nav").toggleClass("active");
});
});
</script>
</body>
</html>
Tạo file header3.php có nội dung như sau:
<header class="bg-dark text-light">
<div class="container">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Trang Web Của Tôi</a>
<button class="navbar-toggler bg-light" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-caret-down"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Trang Chủ</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="#">Dịch Vụ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Liên Hệ</a>
</li>
</ul>
</div>
</nav>
</div>
</header>Kết quả phần này có thể như sau:
Sử dụng include trong PHP là một cách tiện lợi để tái sử dụng mã HTML hoặc PHP trong các tệp khác nhau. Khi sử dụng include, bạn có thể chia nhỏ mã của mình thành các phần nhỏ hơn và sau đó gộp chúng lại với nhau trong một tệp duy nhất.
Trong ví dụ của chúng ta, chúng ta đã sử dụng include để tách header, sidebar và footer thành các tệp riêng biệt (header.php, sidebar.php và footer.php). Điều này giúp mã của chúng ta trở nên dễ bảo trì hơn và giảm sự lặp lại.
Kết luận, việc tạo bố cục cho một trang web là một phần quan trọng của việc phát triển web. Bố cục giúp tổ chức nội dung của trang và cung cấp trải nghiệm người dùng tốt hơn. Trong ví dụ của chúng ta, chúng ta đã tạo bố cục sử dụng HTML, CSS và PHP, và đã thêm tính năng responsive bằng cách sử dụng Bootstrap. Bằng cách này, chúng ta có thể tạo ra một trang web hiện đại và dễ sử dụng trên nhiều thiết bị khác nhau.