39 lines
2.3 KiB
Markdown
39 lines
2.3 KiB
Markdown
# Phân tích Cấu trúc Giao diện: sisvietnam.vn
|
|
|
|
Báo cáo chi tiết số lượng và loại thành phần giao diện (UI Components) đang được sử dụng trên trang web Bệnh viện Đa khoa Quốc tế S.I.S Cần Thơ (`https://sisvietnam.vn/`).
|
|
|
|
## 1. Bố cục khung (Layout Structure)
|
|
Trang web sử dụng hệ thống chia cột dạng Grid (khả năng cao là Bootstrap) để dàn trang.
|
|
|
|
* **`<header>` (Đầu trang):** 1 thẻ
|
|
* **`.header` (Lớp giao diện đầu trang):** 2 class
|
|
* **`<footer>` (Chân trang):** 1 thẻ
|
|
* **`.footer` (Lớp giao diện chân trang):** 21 class (Footer được chia làm rất nhiều cột nhỏ)
|
|
* **`<section>` (Phân khu):** 1 thẻ
|
|
* **`.container` (Vỏ bọc nội dung):** 18 class
|
|
* **`.row` (Hàng):** 15 class
|
|
* **`.col` (Cột):** 47 class
|
|
|
|
## 2. Các thành phần tương tác (UI Components)
|
|
* **`.slider` & `.carousel` (Trình chiếu ảnh trượt):** 13 class `.slider` và 5 class `.carousel` (Sử dụng thư viện Owl Carousel).
|
|
* **`<img>` (Hình ảnh):** 46 thẻ
|
|
* **`.banner` (Biểu ngữ quảng cáo):** 2 class
|
|
* **`.menu` (Thanh điều hướng):** 32 class
|
|
* **`<a>` (Đường liên kết):** 66 thẻ
|
|
* **`<ul>` / `<li>` (Danh sách):** 7 danh sách (`<ul>`) với 36 mục (`<li>`)
|
|
* **`.btn` (Nút bấm):** 10 class
|
|
* **`<form>` (Biểu mẫu):** 3 thẻ (Sử dụng plugin Contact Form 7)
|
|
* **`.widget` (Khối tiện ích):** 3 class
|
|
* **`<iframe>` (Bản đồ / Nhúng ngoại vi):** 1 thẻ
|
|
|
|
## 3. Phân tích kỹ thuật (Technical Tags)
|
|
* **`<div>` (Thẻ khối cơ bản):** 190 thẻ
|
|
* **`<h2>` & `<h3>` (Thẻ tiêu đề):** 3 thẻ `<h2>` và 7 thẻ `<h3>`
|
|
* **`<script>` (Mã Javascript):** 58 thẻ (Google Analytics, Tag Manager, Facebook Pixel...)
|
|
* **`<style>` (CSS Nội tuyến):** 10 thẻ
|
|
|
|
> [!TIP]
|
|
> **Đánh giá Kiến trúc:**
|
|
> Trang web được xây dựng bằng **WordPress**, sử dụng hệ thống **Grid** để cấu trúc bố cục tĩnh, kết hợp với các **Carousel/Slider** để làm sinh động giao diện. Phần thu thập dữ liệu khách hàng được xử lý qua các **Form**.
|
|
> Nếu bạn dùng các công cụ như Pinegrow hoặc Webflow, kiến trúc này có thể dễ dàng sao chép bằng cách sử dụng cấu trúc `Container -> Row -> Column`.
|