Tạo CSS layout trang trưng bày ảnh đơn giản

Đăng bởi Neo trong mục Hướng dẫn vào 18 tháng 4, 2010 | Comments
Xem Demo

Bài viết sẽ hướng dẫn bạn cách tạo 1 layout đơn giản với CSS & HTML

Bước 1: Chọn layout

Layout sẽ dựng như sau:

Thật ra tôi định hướng dẫn các bạn dựng layout trên bằng photoshop trước, sau đó mới chuyển qua làm HTML & CSS, nhưng thấy layout trên quá đơn giản nên tôi hướng dẫn luôn để các bạn có hình dung cơ bản về dựng layout HTML & CSS.

Có rất nhiều phần mềm bạn có thể dùng để viết mã HTML & CSS như notepad++, HTMLpad, Dreamweaver. Trong bài hướng dẫn, tôi dùng Dreamweaver.

Bước 2: Dựng bố cục

Khi cắt CSS, tôi thường chia làm 3 phần chính: header, container & footer. Hình dưới đây thể hiện các phần chính của layout này:

Cấu trúc các file HTML, CSS và file ảnh như sau:

Trước tiên là mã HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Van Simple Gallery</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="pagewrap">
	<div id="header">
		<div id="logo"><h1><a href="#">Van Simple Gallery</a></h1></div>
	</div><!-- // header -->
	<div id="container">

	</div><!-- // container  -->
</div><!-- // pagewrap -->
<div id="footer">
	<div class="pagewrap">
		
	</div>
</div><!-- // footer -->
</body>
</html>

Phần #logo tôi để như vậy lý do là thẻ h1 & text cho SEO, thẻ a cho việc tiện lợi khi bạn click vào logo có thể về trang chủ.

Mở layout bằng photoshop, chọn vùng rộng 1px, cao 130px như hình dưới, tiếp theo ấn ctrl + shift + c để copy, và tạo mới ctrl + n, paste phần vừa copy vào, cuối cùng bạn ấn ctrl + alt + shift + s để lưu cho web, chọn PNG-24, đặt tên file là bg.png

Và mã CSS trong bước 2 này sẽ như sau:

* {margin: 0; padding: 0;} /* reset CSS */
body {background: url(../images/bg.png) #37322d repeat-x left top;}
.pagewrap {width: 920px; margin: 0 auto} /* đoạn margin: 0 auto sẽ giúp trang web luôn ở giữa màn hình*/
#header {height: 125px; position: relative}
	#logo {position: absolute; left: 10px; top: 35px;}
	#logo h1 {background: url(../images/logo.png) no-repeat left top; }
	#logo a {display: block; width: 239px; height: 49px; text-indent: -5000em;} /* ẩn text trong thẻ a đi */

#container {}
#footer {background: #211e1b}

Bạn có thể tạo file để reset css như bài hướng dẫn. Ở đây tôi dùng * {margin: 0; padding: 0;}

Bước 3: Style Container

Phần header đã được style ngay trong bước 2, tiếp theo chúng ta dựng phần container. Như bạn thấy, phần container chỉ gồm có các ảnh kích thước 200x250px và phần viền xung quanh là 5px, cách nhau 20px

Mã HTML:

<div id="container">
    <a href="#"><img src="images/demo1.jpg" width="200" height="250" /></a>
    <a href="#"><img src="images/demo2.jpg" width="200" height="250" /></a>
    <a href="#"><img src="images/demo3.jpg" width="200" height="250" /></a>
    <a href="#"><img src="images/demo2.jpg" width="200" height="250" /></a>
</div><!-- // container  -->

Và mã CSS:

#container {}
	.item {margin: 10px; width: 210px; float: left}
    .item a img {padding: 5px; background: #FFF; border: none}
	.item a:hover img {background: #ccc}

Bước 4: Style footer

Phần footer cũng khá đơn giản:

<div id="footer">
	<div class="pagewrap">
		&copy; 2010 VANSimpleGallery. All Rights Reserved.
	</div>
</div><!-- // footer -->

#footer {background: #211e1b; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #ccc; padding: 15px 0}

Bấm preview, và...bạn sẽ thấy lỗi, sử dụng firebug tìm phần #container bạn sẽ không thấy nó đâu. Đây là lỗi float của Firefox, để sửa bạn chỉ cần cho thêm đoạn HTML sau vào trước thẻ đóng của #container

<div class="clear"></div>

Và mã CSS

.clear {clear: both}

Kết quả

Bài sau tôi sẽ hướng dẫn các bạn cách sửa lỗi png ở IE6, thêm hiệu ứng với jQuery và tạo trang trưng bày ảnh đơn giản với php.

Tải về file psd và demo tại đây

html, gallery, css

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter