Từ layout được sử dụng trong nhiều lĩnh vực như thiết kế sách, báo, tạp chí,… Layout ở đây có nghĩa là bố cục, cách sắp xếp, trình bày các bộ phận, chi tiết nằm trong bản thiết kế đó bao gồm việc căn chỉnh tỷ lệ, khoảng cách và lựa chọn vị trí cho các thành phần.Tương tự như vậy, trong thiết kế web, layout chính là cách dàn trang, sắp xếp các yếu tố sẽ được hiển thị trên website. Chẳng hạn bạn cần thiết kế một trang có giao diện được thiết kế với layout như sau:
I. Các kỹ thuật xây dựng layout:
1. Xây dựng layout với table:
Cách đơn giản nhất để tạo ra các layout là sử dụng thẻ trong HTML. Những bảng này sắp xếp các dữ liệu vào các cột và hàng, vì thế bạn có thể lợi dụng hay sử dụng những hàng và cột này theo cách bạn muốn mà không cần sử dụng quá nhiều css.Bạn có thể thiết kế trang của bạn thành nhiều cột với các phần nội dung khác nhau. Bạn có thể giữ nội dung chính trong cột giữa và cột trái làm cột chứa menu, và cột phải dùng để đặt các quảng cáo. Loại layout này tương tự như cách chúng tôi bố trí trang web hiện tại.
Bạn đang xem: Chia bố cục web html
Ví dụ :Tuy nhiên table lại bộc lộ khá nhiều nhược điểm khi sử dụng làm layout cho một trang web có cấu trúc như trên. Các nhược điểm có thể gặp phải với table với những dạng layout này là chậm, khó tùy chỉnh và khó kết hợp với CSSJavascript để tạo lên sự linh hoạt cho trang web.
2. Xây dựng layout với div + css:
* Sử dụng float và clear:
Việc chia cột trong CSS là việc bạn thiết lập những phần tử con trong một phần tử mẹ nằm trên cùng một hàng.
Ví dụ, mình muốn phần nội dung website của mình có hai cột thì mình sẽ tạo ra 3 cái
còn lại mình gọi là column [cột].Vậy bây giờ nhiệm vụ của chúng ta là làm thế nào để các phần tử con có thể được chia thành 2 cột như vậy.
Các bước chia cột:
Các cột phải luôn có một container, tức là phần tử mẹ bao bọc nó.Thiết lập chiều rộng cho container.Thiết lập chiều rộng cho hai cột, tổng chiều rộng trong hai cột phải luôn bằng hoặc ít hơn chiều rộng của container.Nên sử dụng box-sizing: border-box để tính toán kích thước chính xác.Sử dụng thuộc tính float với giá trị left và right để đẩy phần tử về sang trái hoặc phải.Tiến hành clear float.Ví dụ :
header> div id="head"> div class="logo">logodiv> div class="banner">bannerdiv> div> div id="head-link">head-linkdiv>header>section class="content"> div id="left">leftdiv> div id="content">contentdiv> div id="right">rightdiv>section>footer>footerfooter>#head { width: 100%; overflow: auto;}.logo { width: 20%; background-color: aquamarine; float: left; box-sizing: border-box; padding: 30px;}.banner { width: 80%; background-color: aqua; float: right; box-sizing: border-box; padding: 30px;}#head-link { background-color: blue; padding: 10px;}.content::after { content: ""; clear: both; display: table;}#left, #content, #right { width: 15%; float: left; box-sizing: border-box; padding: 150px 30px; background-color: antiquewhite;}#content { width: 70%; background-color: aliceblue;}#right { background-color: wheat;}footer { padding: 30px; background-color: brown;}Kết quả sau thực chạy code như sau:
Nguyên lý hoạt động của thuộc tính float:
Lưu ý: Nếu một phần tử được thiết lập thuộc tính float mà trong khi phần tử đứng trước nó không được thiết lập thuộc tính float, thì mặc định nó được bắt đầu ở hàng mới.
Khi hàng không đủ chỗ chứa phần tử thì phần tử phải bắt đầu ở hàng mới. Tuy nhiên, cách bắt đầu như thế nào mới là quan trọng. Khi trên một hàng có nhiều phần tử được thiết lập thuộc tính float và mỗi phần tử có chiều cao khác nhau, nếu hàng không đủ chỗ chứa phần tử thì phần tử sẽ bắt đầu bên cạnh phần tử có chiều cao thấp nhất và còn đủ khoảng trống để chứa nó.* Sử dụng Flex-box:
Flexbox là một kiểu dàn trang [layout mode] mà nó sẽ tự cân đối kích thước của các phần tử bên trong để hiển thị trên mọi thiết bị. Nói theo cách khác, bạn không cần thiết lập kích thước của phần tử, không cần cho nó float, chỉ cần thiết lập nó hiển thị chiều ngang hay chiều dọc, lúc đó các phần tử bên trong có thể hiển thị theo ý muốn.
Thành phần quan trọng nhất của Flexbox là:
container: là thành phần lớn bao quanh các phần tử bên trong, các item bên trong sẽ hiển thị dựa trên thiết lập của container này.item: là phần tử con của container, bạn có thể thiết lập nó sẽ sử dụng bao nhiêu cột trong một container, hoặc thiết lập thứ tự hiển thị của nó.Một số thuộc tính cơ bản:
Dùng display: flex; để tạo ra một flex container.Dùng justify-content để căn ngang các items.Dùng align-items để căn dọc các items.Dùng flex-direction nếu muốn các items theo hướng chiều dọc chứ không phải ngang.Dùng row-reverse hoặc column-reverse để đảo ngược thứ tự mặc định.Dùng order để tùy chỉnh thứ tự một item cụ thể.Dùng align-self để căn dọc một item cụ thể.Dùng flex để tạo ra một flexible boxes có thể stretch và shrink.Ví dụ :
div class="wrapper"> header class="header-flex-2">Headerheader> article class="main"> p>Mô-đun Flexbox Layout [Flexible Box] [Theo khuyến nghị của W3C kể từ tháng 10 năm 2017] nhằm mục đích cung cấp một cách bố trí, sắp xếp và phân phối không gian hiệu quả hơn các item trong trong một container, ngay cả khi kích thước của chúng không xác định hoặc động [ Do đó có từ "flex"].p> article> aside class="aside aside-1">Aside 1aside> aside class="aside aside-2">Aside 2aside> footer class="footer-flex-2">Footerfooter> div>.wrapper { display: flex; /* kich hoat flex box */ flex-flow: row wrap; font-weight: bold; text-align: center;}.wrapper > * { padding: 10px; flex: 1 100%; /*cho tất cả phần tử bên trong có độ dài 100% và tỉ lệ chiếm không gian trống là như nhau*/}.header-flex-2 { background: tomato;}.footer-flex-2 { background: lightgreen; order: 4;}.main { text-align: left; background: deepskyblue; height: 400px; flex: 3 0px; /* cho phần nội dung main ở giữa chiếm 3 phần không gian trống so với 2 phần aside bên cạnh */ order: 2;}.aside { flex: 1 0 0; } /* 2 phần aside sẽ chỉ chiếm 1 phần không gian */.aside-1 { background: gold; height: 400px; order: 1;}.aside-2 { background: hotpink; height: 400px; order: 3;}Kết quả khi thực hiện :
Hiện nay, theo lời khuyên từ Mozilla thì chúng ta sử dụng Flexbox để thiết lập bố cục trong phạm vi nhỏ [ví dụ như những khung trong website] và khi thiết lập bố cục ở phạm vi lớn hơn [như chia cột website] thì vẫn nên sử dụng kiểu thông thường là dàn trang theo dạng lưới [grid layout].
* Sử dụng Grid:
Grid là một module tạo bố cục website trong CSS bằng cách hỗ trợ hệ thống bố cục theo dạng lưới 2 chiều, gồm hàng và cột. Trước khi có Grid, bạn có thể tạo giao diện website theo nhiều kiểu khác nhau như sử dụng thẻ div, sử dụng bảng biểu [table].
Grid ra đời nhằm đơn giản hóa việc xây dựng giao diện website và hoạt động rất tốt với Flexbox. Flexbox cũng là 1 module hỗ trợ xây dựng bố cục nhưng áp dụng với các bố cục một chiều đơn giản. Khi Grid và Flexbox kết hợp với nhau, lập trình viên có thể tạo ra nhiều bố cục website phức tạp và đa dạng hơn.
Xem thêm: How Wtfast - Thanks For Downloading
Grid cho phép bạn tạo một ma trận bố cục 2 chiều gồm các dòng và các cột. Ở mỗi dòng, cột và mỗi phần tử trong Grid bạn có thể chỉnh sửa style vì vậy Grid cũng rất thích hợp để tạo bố cục trang Web. Ngoài ra, các bảng biểu, các trò chơi có dạng bàn cờ như ca rô, cờ vua,… để rất thích hợp dùng Grid để xây dựng giao diện.
Bốn bước cơ bản để tạo layout bằng grid:
Ví dụ :
div class="grid-container"> div class="grid-item header"> h3>Phần Header h3> div> div class="grid-item sidebar-1"> Phần Sidebar 1 -br /> Phần Sidebar 1 -br /> Phần Sidebar 1 -br /> Phần Sidebar 1 -br /> div> div class="grid-item content"> Phần nội dung Web br /> Phần nội dung Web br /> Phần nội dung Web br /> Phần nội dung Web br /> Phần nội dung Web br /> Phần nội dung Web br /> Phần nội dung Web br /> Phần nội dung Web br /> Phần nội dung Web br /> div> div class="grid-item sidebar-2">Phần Siderbar 2div> div class="grid-item footer">Phần Footerdiv>div>.grid-container { display: grid; grid-template-areas: "header header header header header" "sidebar-1 content content content sidebar-2" "footer footer footer footer footer"; text-align: center; } .header { padding: 5px; grid-area: header; width: 100%; height: 70px; background-color: yellow; box-sizing: border-box; } .sidebar-1 { padding: 5px; grid-area: sidebar-1; background-color: pink; } .sidebar-2 { padding: 5px; grid-area: sidebar-2; background-color: lightgreen; } .content { padding: 5px; grid-area: content; background-color: #BB8FCE; } .footer { padding: 5px; grid-area: footer; border: 1px dashed #AAA; }Kết quả thực hiện được :
Để tìm hiểu kỹ hơn về grid layout thì các bạn có thể tham khảo thêm tại đây.
* Sử dụng Framework [Bootstrap]:
Bootstrap là một framework HTML, CSS, và JavaScript cho phép thiết kế phát triên responsive web mobile. Bootstrap là một framework cho phép thiết kế website reponsive nhanh hơn và dễ dàng hơn Bootstrap là bao gồm các HTML templates, CSS templates và Javascript tao ra những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác. Trong bootstrap có thêm các plugin Javascript trong nó. Giúp cho việc thiết kế reponsive của bạn dễ dàng hơn và nhanh chóng hơn.
Để sử dụng được bootstrap thì làm thế nào ?
Có 2 cách để bạn có thể sử dụng Bootstrap trên web của bạn.
Download Bootstrap từ getbootstrap.com
Thêm Bootstrap từ CDN
Một số lưu ý khi sử dụng Bootstrap:
Class container: được fix sẵn độ rộng tuỳ theo độ phân giải, padding sang 2 bên 15px, thẻ này bọc hầu hết tất cả thẻ div ở sau.Class container-fluid: giống như thẻ container nhưng độ rộng của nó là full màn hình.Class row: thẻ này có margin là -15px nếu bạn muốn thẻ nào đó sát lề 2 bên của container.Giao diện của bootstrap là một dạng lưới được chia làm 12 cột và được đặt trong một class row.Trong đó các col- sẽ được hiểu như sau:
Ví dụ :
Chúng ta có thể thấy được việc sử dụng bootstrap tiết kiệm được rất nhiều thời gian để tạo ra 1 layout đơn giản như vậy.
3. So sánh giữa các kĩ thuật :
Giữa việc dùng table và div thì cách nào tiện hơn ?
Thẻ table/bảng : Là thẻ giúp chúng ta tạo nên một khu vực thuộc dạng bảng tính, kích thước về chiều ngang thường luôn cố định, cấu trức vững chắc nhưng khó tùy biến, khó kết hợp với các thẻ cấu trúc hoặc các thẻ table khác. Tốn nhiều dung lượng khi load trang. Vì table khi tải xong sẽ tự tính, nên quá trình các nội dung chưa tải về thì giao diện sẽ hiển thị khác [ví dụ như dùng Ajax tải nội dung chẳng hạn] còn khi nội dung tải về và được hiển thị, giao diện lại “nhảy nhảy” khác, làm cho user khó chịu.
Thẻ Div[divison]/Khu vực: Là thẻ giúp chúng ta tạo nên một khu vực dạng block, kích thước không cố định khi chưa thiết lập thông số, cấu trúc mềm dẻo, dễ dàng tùy biến, dễ dàng kết hợp với các thẻ khác. Tốn ít dung lượng khi load trang. Chỉ cần style để div có hình dạng, sau khi dữ liệu đổ về, thì nó chỉ đổ vào chỗ developer quy định chứ không nhảy lung tung như table.
Grid
Với Grid, nó dễ dàng thiết lập toàn bộ hệ thống thiết kế bố trí cho trang web của bạn. Grid còn có thể lồng layout này trong các layout khác và grid cũng cho phép bạn tạo các sắp xếp cực kỳ phức tạp với độ chính xác. Tuy nhiên grid không phải là tốt nhất để căn giữa nhanh hoặc đặt một hình ảnh trong một bài viết văn bản lớn hơn. Những kiểu bố trí này được xử lý tốt nhất thông qua các phương pháp khác.
Flex
Flex bao gồm nhiều thuộc tính phụ có thể đặc biệt hữu ích. Ví dụ, flex-grow và flex-shrink cho phép các cột thay đổi chiều rộng và tỷ lệ tùy thuộc vào chế độ xem của người dùng. justify-content cho phép các mục cách đều nhau hoặc căn giữa một cách hoàn hảo. Đây là một công cụ tuyệt vời để cho phép các thành phần UI nhỏ hơn trông đẹp nhất trên mọi thiết bị. Tuy nhiên, thật không may nếu bạn muốn bố trí các phần tử lớn hơn trên trang, có lẽ bạn sẽ muốn thêm lề và sau đó thực hiện một phép toán nhỏ để đảm bảo nó trông giống như bạn muốn. Điều đó có thể mất thời gian. Ngoài ra, mỗi phần trong thiết kế của bạn phải là một hàng có thẻ flex riêng biệt trên đó.
Float
Float & Clear là quá quen thuộc rồi. Đây là một cách tuyệt vời để đặt một hình ảnh trong một bài viết văn bản lớn hơn.
Tuy nhiên, nó không phải là một cách rất thiết thực để thiết lập toàn bộ bố cục trang web. Nếu bạn không cẩn thận, nó có thể gặp lỗi khá nhanh, và nó có một chút lộn xộn khi cố gắng dọn dẹp nó. Phương thức bố trí này không có nhiều thuộc tính tích hợp như Grid hoặc Flex và không thể tạo bố cục phức tạp.