Tìm hiểu một số bố cục trang web đơn giản

254 lượt xem 
 Cập nhật lần cuối: 28/05/2018 lúc 19:43:11
Thể loại: Thiết kế Web 

Khi học thiết kế giao diện Web bằng HTML, chắc chắn là bất kỳ ai cũng luôn hăm hở muốn tạo ra một giao diện web của riêng mình để chứng tỏ bản thân, chiêm ngưỡng sản phẩm mình làm ra và giới thiệu bạn bè. Tuy nhiên, do không nắm được quy tắc sắp xếp bố cục website, không ít bạn đã tạo ra trang web có bố cục thiếu logic, không triển khai và áp dụng được trong các dự án thực tế. Bài viết này chỉ ra cho các bạn mới bắt đầu học web một số giao diện cơ bản.

1. Giao diện đơn giản: Layout 1

Trong giao diện này, bạn có các phần nội dung: phần tiêu đề (header) và phần nội dung gồm 3 cột: trái, giữa, phải.

Xem: Demo

Trang common.css

body {
	margin: 0;
	padding: 20px;
	color: #333;
	background-color: #efefef;
	font: 87.5%/1.4 HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

img {
	max-width: 100%;
	display: block;
	height: auto;
}

figure {
	margin: 0;
	padding: 0;
}

figcaption {
	font-family: "Georgia","Times New Roman",serif;
	text-align: center;
	padding: 0.5em 0 1em 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Georgia","Times New Roman",serif;
    font-weight: normal;
    padding: 0;
    margin: 0;
}

h1 {
    font-size: 328.571%;
    margin-bottom: 0.2em;
}

h1.title {
	text-align: center;
}

h2 {
    font-size: 250%;
    margin-bottom: 0.2em;
}

h3 {
    font-size: 150%;
    margin-bottom: 0.2em;
}

p {
	margin:0;
	padding: 0 0 1em 0;
}

.wrapper {
	background-color: #fff;
	color: #444; 
	padding: 1em 3% 1em 3%;
	margin: 0 auto 1em auto;

}

.mainnav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 120%;
}

.mainnav a:link, .mainnav a:visited {
	text-decoration: none;
	color: #444;
}

.quote {
	font: 150%/1.4 "Georgia","Times New Roman",serif;
	padding: 0;
	margin: 0;
}

Nội dung Layout1.html

Phần tiêu đề chính là nội dung nằm trong thẻ h1. Phần nội dung sử dụng phần tử article, trong đó chứa phần nav (thanh menu), nội dung là phần tử div với lớp content và phần tử blockquote được xem là cột trái. Tất cả phong cách đều được định nghĩa chính ở common.css và phần tử style đầu trang.

<!DOCTYPE html>

<html lang="en" >
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<title>Layout 1</title>
		<link rel="stylesheet" type="text/css" href="common.css">
		<style>
			.wrapper {
				width: 960px;
				padding: 1em 3% 1em 3%;
				margin: 0 auto 1em auto;
				display: grid;
				grid-template-columns: 200px 40px auto 40px 200px;
				grid-template-rows: auto ;
			}

			.content {
				grid-column-start: 3;
				grid-column-end: 4;
				grid-row-start: 2;
				grid-row-end: 3;
			}

			.mainnav {
				grid-column-start: 1;
				grid-column-end: 2;
				grid-row-start: 2;
				grid-row-end: 3;
			}

			.subhead {
				grid-row-start: 1;
				grid-row-end:2;
				grid-column-start: 3;
				grid-column-end: 4;
			}

			.quote {
				grid-column-start: 5;
				grid-column-end: 6;
				grid-row-start: 2;
				grid-row-end: 3;
			}
			
		</style>
	</head>
	<body data-gr-c-s-loaded="true">
	<h1 class="title">Đây là tiêu đề của giao diện website 1</h1>
	
	<article class="wrapper">
	
	<nav class="mainnav">
		<ul>
			<li><a href="http://www.dammio.com">Giới thiệu</a></li>
			<li><a href="http://www.dammio.com">Cuộc sống</a></li>
			<li><a href="http://www.dammio.com">Nghệ thuật</a></li>
			<li><a href="http://www.dammio.com">Du lịch</a></li>
			<li><a href="http://www.dammio.com">Gia đình</a></li>
		</ul>
	</nav>
	<h2 class="subhead">Nghệ thuật biểu diễn</h2>
	<div class="content">
	
	<p>Nghệ thuật biểu diễn là những hình thức nghệ thuật khác với nghệ thuật tạo hình trước đây: nghệ thuật biểu diễn sử dụng cơ thể, 
	tiếng nói và sự có mặt của chính nghệ sĩ làm phương tiện trình diễn trước công chúng, 
	trong khi nghệ thuật thị giác sử dụng các vật liệu như đất sét, kim loại hoặc sơn có thể được đúc hoặc biến đổi để tạo 
	ra một số đối tượng vật chất cho nghệ thuật. </p>
	<p>Thuật ngữ "nghệ thuật biểu diễn" đầu tiên xuất hiện trong tiếng Anh vào năm 1711.</p>

	<blockquote><p>Nghệ thuật biểu diễn có thể bao gồm múa, nhạc, kịch, Opera, Nhạc kịch, ảo thuật, ảo tưởng, kịch câm, múa rối, nghệ thuật xiếc, ngâm thơ và nói trước công chúng.</p></blockquote>

	
	</div>

	<blockquote class="quote">
		<p>Các nghệ sĩ tham gia biểu diễn nghệ thuật trước khán giả được gọi là nghệ sĩ biểu diễn. Nó bao gồm các diễn viên, diễn viên hài, diễn viên múa, ảo thuật, nghệ sĩ xiếc, nhạc sĩ, và các ca sĩ.</p>
	</blockquote>
	
	</article>
	
</body></html>

2. Giao diện Resposive đơn giản: Layout 2

Với mục tiêu tạo trang web đáp ứng, tức hiển thị trên nhiều màn hình khác nhau, việc bạn cần là thay đổi một số phong cách để thực hiện điều đó.

Xem: Demo

Ở giao diện này, bạn chỉ cần thay một đoạn phong cách trong phần tử style đầu trang ở tập tin Layout1.html là trở thành Layout2.html với nội dung:

<style>
			@media only screen and (min-width: 460px) {
				.wrapper {
					display: grid;
					width: 90%;
					grid-template-columns: auto ;
					grid-template-rows: auto ;
				}

				.mainnav {
					grid-row: 1 / 2;
				}

				.subhead {
					grid-row: 2 / 3;
				}

				.quote {
					grid-row: 3 / 4;
				}

				.content {
					grid-row: 4 / 5;
				}

				
			}

			@media only screen and (min-width: 700px) {
				.wrapper {
					grid-template-columns: 20% 5% auto ;
					grid-template-rows: auto ;
				}

				.mainnav {
					grid-column: 1 / 2;
					grid-row: 2 / 3;
				}

				.subhead {
					grid-row: 1 / 2;
					grid-column: 3 / 4;
				}

				.content {
					grid-column: 3 / 4;
					grid-row: 3 / 4;
				}

				.quote {
					grid-column: 3 / 4;
					grid-row: 2 / 3;
				}
			}

			@media only screen and (min-width: 980px) {
				.wrapper {
					grid-template-columns: 200px 40px auto 40px 200px;
					grid-template-rows: auto ;
					max-width: 960px;
				}

				.mainnav {
					grid-column: 1 / 2;
					grid-row: 2 / 3;
				}

				.subhead {
					grid-row: 1 / 2;
					grid-column: 3 / 4;
				}

				.content {
					grid-column: 3 / 4;
					grid-row: 2 / 3;
				}

				.quote {
					grid-column: 5 / 6;
					grid-row: 2 / 3;
				}

			}		
			
		</style>

Trong phong cách Layout 2, chúng ta thấy sự xuất hiện của đoạn mã @media only screen and (min-width: 460px)@media only screen and (min-width: 700px). Đây là 2 đoạn mã ám chỉ kích thước màn hình tối thiểu 460px và 700px, tùy theo kích thước màn hình khác nhau thì bố cục website khác nhau, người ta gọi đây là web đáp ứng (tức là đáp ứng theo kích thước màn hình). Phong cách ở mỗi vùng có kích thước đều theo tỉ lệ phân số. Ví dụ: grid-column: 1/2, tức cột định nghĩa là 50% độ rộng màn hình.

Các bố cục khác

Khi nắm được cách thiết kế bố cục web, bạn có thể tìm hiểu các dạng bố cục sau đây:

  • Hai cột đáp ứng với phần chân trang: Demo
  • Lưới 16 cột: Demo
  • Bố cục web đơn giản với 3 cột nội dung, phần đầu trang và phần cuối trang: Demo
  • Hệ thống lưới của framework Skeleton: Demo
  • Giao diện đơn giản với 2 cột: nội dung và thanh bên dùng Skeleton: Demo

Bình luận Facebook

Để lại bình luận

avatar
1000
  Subscribe  
Notify of