:: Trang Chủ
» Lưu Bút
» Diễn Đàn
» Chơi games
» Nghe nhạc
» Xem phim
» Truyện tranh
» Avatars
» Phòng Tranh

Thơ Tình
Truyện Tình
Vườn tình yêu
Nghệ Thuật Sống
Danh ngôn tình yêu

Tin căn bản
Mẹo vặt
Đồ họa
Kho Download

Học tiếng Anh
Học tiếng Hàn
Học tiếng Hoa

T==============T
ID:  PASS:  
» Quên mật khẩu   » Đăng ký tài khoản mới
Hỏi và đáp
Hôm nay,  
TRANG CHỦ
Lưu bút
Tình yêu
Diễn đàn
Nghe nhạc
Xem phim
Chơi game
Phòng tranh
Quy định
Hỏi đáp
Tình Yêu
Thơ Tình
Truyện Tình
Nghệ Thuật Sống
Vườn Tình Yêu
Tâm Hồn Cao Thượng
Tin Học
Tin Căn Bản
Mẹo Vặt
Đồ Họa
Internet - Web
Kho Download
IT 360°
Giải Trí
Danh Ngôn
Thơ Thẩn
Truyện Cười
Truyện Ngắn
Truyện Ngụ Ngôn
Truyện Truyền Thuyết
Cổ tích - Sự tích
Thế giới games
Học Ngoại Ngữ
Tiếng Anh
Tiếng Hàn
Tiếng Hoa
English audio
English story
Học qua bài hát
Văn phạm tiếng Anh
Kỷ niệm áo trắng
Người thầy
Thơ áo trắng
Kỷ niệm không phai
LIÊN KẾT
Internet - Web

Cách căn giữa trang Web sử dụng CSS

       

Hầu hết các màn hình LCD phổ biến trên thị trường ngày nay là màn ảnh rộng. Tỷ lệ màn hình rộng này có thể gây ảnh hưởng tới các nhà thiết kế web và cách họ trình bày trang Web. Tuy nhiên, với một đoạn mã Cascading Style Sheet (CSS) ngắn gọn, bạn có thể điều chỉnh thiết kế trang Web vào vị trí trung tâm trên bất kỳ màn hình nào cho dù màn hình đó theo tỷ lệ nằm ngang hay thẳng đứng.

Nếu bạn bước vào cửa hàng để chọn mua màn hình máy tính thì hãy chú ý rằng tỷ lệ màn hình đang có xu hướng chuyển sang quy mô tỷ lệ co giãn tương tự các rạp chiếu phim (hình chữ nhật) hơn là tỷ lệ 4: 3 của vô tuyến (hình vuông), tỷ lệ màn hình càng to thì độ rộng của nó càng lớn.

Màn hình này rất thích hợp để xem phim, chơi trò chơi hay chạy các chương trình bảng màu nặng như Photoshop, nhưng còn vấn đề truy cập mạng thì sao? Các dòng văn bản và chữ đoạn chữ dài gây khó chịu và mỏi mắt người dùng, đó là lý do mà tại sao rất nhiều trang web sử dụng hình thức căn giữa trang. Điều này cho phép thiết lập cố định chiều rộng cho nội dung trang và hiển thị nó theo kiểu cách động phù hợp với chiều rộng cửa sổ trình duyệt người dùng.

Tất nhiên là bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.

Mở trình soạn thảo HTML và tạo một trang mới. Nhập đoạn mã bên dưới (Đoạn mã A) để bắt đầu.

Đoạn mã A













Đặt một số đoạn text bên trong thẻ Body của tài liệu HTML (Đoạn mã B), sau đó bạn có thể thấy ngay ảnh hưởng của đoạn mã CSS mà bạn vừa xây dựng.

Đoạn mã B











Hướng dẫn dàn trang căn giữa sử dụng CSS



Ngày 7 tháng 1 năm 2008



Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.



Lưu lại tài liệu HTML, sau đó xem thử tài liệu đó trên trình duyệt. Thay đổi độ rộng của cửa sổ trình duyệt để thấy rõ khi mở rộng hay co trang web lại thì nó có phù hợp với kích thước của vùng hiển thị.

Hãy bắt đầu bằng cách xây dựng thuần thục các đoạn mã CSS. Tạo ra các mã CSS đơn giản ở phần đầu của tài liệu (Đoạn mã C) thay vì liên kết tới một trang bên ngoài. Hãy đặt đoạn mã vào đúng vị trí ngay sau thẻ đóng .

Đoạn mã C













Hướng dẫn dàn trang căn giữa sử dụng CSS



Ngày 7 tháng 1 năm 2008



Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.



Hầu hết các nhà thiết kế Web khi khai báo một lớp CSS sẽ được sử dụng như là phần tử căn giữa, đặt tên cho lớp là “wrapper” hoặc “container”. Trong ví dụ này bạn sẽ sử dụng tên lớp là “wrapper”, chúng ta có mã CSS như sau (Đoạn mã D):

Đoạn mã D













Hướng dẫn dàn trang căn giữa sử dụng CSS



Ngày 7 tháng 1 năm 2008



Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.



Tiếp theo, bạn sẽ thiết lập độ rộng của “wrapper” là 720 pixels (Đoạn mã E), tỷ lệ này thích hợp với màn hình 800 x 600. Đương nhiên là bạn hoàn toàn có thể điều chỉnh chiều rộng dài hay ngắn tùy ý cho phù hợp với thiết kế của bạn.

Đoạn mã E













Hướng dẫn dàn trang căn giữa sử dụng CSS



Ngày 7 tháng 1 năm 2008



Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.



Bạn vừa thiết lập độ rộng cho nội dung nhưng làm cách nào để căn giữa nó? Hãy dùng thuộc tính căn chỉnh lề như trong Đoạn mã F với giá trị căn chỉnh tự động bằng 0, đặt tất cả nội dung vào trung tâm màn hình:

Đoạn mã F













Hướng dẫn dàn trang căn giữa sử dụng CSS



Ngày 7 tháng 1 năm 2008



Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.



Chỉ một đoạn mã ngắn gọn mà tương thích với hầu hết các trình duyệt hiện đại. Tuy nhiên đối với các phiên bản cũ hơn của IE và Netscape thì có nhiều phát sinh khi áp dụng CSS ví dụ như nó sẽ căn giữa văn bản trong khi cái mà bạn thực sự muốn là văn bản sẽ được căn lề về bên trái nhưng được hiển thị ở giữa cửa sổ màn hình. Bạn không phải lo lắng nhiều về vấn đề này, có một cách rất đơn giản để sửa lỗi do các trình duyệt đã quá cũ như sau:

Hãy thêm thuộc tính “text-align” tại thẻ của tài liệu HTML như minh họa bên dưới (Đoạn mã G). Bạn phải đặt đoạn mã này lên trước kiểu “wrapper” , hoặc nó sẽ không hoạt động phục thuộc vào sự sắp xếp tự nhiên của Cascading Style Sheets!

Đoạn mã G













Hướng dẫn dàn trang căn giữa sử dụng CSS



Ngày 7 tháng 1 năm 2008



Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.



Sau đó thêm thuộc tính “text-align” ở phía dưới lớp “wrapper” và thiết lập giá trị “left” như trong Đoạn mã H.

Đoạn mã H













Hướng dẫn dàn trang căn giữa sử dụng CSS



Ngày 7 tháng 1 năm 2008



Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.



Thêm một số dòng mã cần thiết được đưa vào trước khi bạn có thể kiểm tra công việc. “wrapper” sẽ bị phá vỡ trên Netscape 6 nếu như cửa sổ trình duyệt ngắn hơn độ dài của “wrapper”. Một thuộc tính (Đoạn mã I) trong thẻ body sẽ thực hiện điều này.

Đoạn mã I













Hướng dẫn dàn trang căn giữa sử dụng CSS



Ngày 7 tháng 1 năm 2008



Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.



Cuối cùng, áp dụng “wrapper” vào nội dung của tài liệu HTML bằng cách đặt thẻ

xung quanh tất cả đoạn văn bản như minh họa trong Đoạn mã J.

Đoạn mã J















Hướng dẫn dàn trang căn giữa sử dụng CSS



Ngày 7 tháng 1 năm 2008



Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.





Hãy kiểm tra trang web trên nhiều trình duyệt khác nhau để nhìn thấy kết quả như mong muốn, đó là văn bản được căn nằm về phía bên trái nhưng toàn bộ đoạn văn bản lại nằm chính giữa trình duyệt cho dù trình duyệt window lớn hay bé.

Mặc dù không dử dụng một bảng nào trong ví dụ này nhưng bạn vẫn có thể đặt bất kì nội dung mong muốn vào chính giữa thẻ

— các bảng bao gồm — và cấu trúc CSS sẽ giúp cho trang web được đặt vào chính xác vị trí trung tâm ở giữa.

Đã được xem 7710 lần
Sưu tầm bởi: Gõ Kiến - Techrepublic
Cập nhật ngày 17/01/2008


Bài mới hơn ...
 
Bài cũ hơn ...
TÌM KIẾM

Search
« Tìm nâng cao »
TIÊU ĐIỂM
Một số hiệu ứng trỏ chuột cho website
Thiết kế web cá nhân
Thủ thuật cho Yahoo! Messenger
Một số web site lưu trữ dữ liệu trực tuyến miễn phí
Cách căn giữa trang Web sử dụng CSS
Những cái chết lãng xẹt nhất thế giới
Cách đơn giản để tăng tốc mạng Internet
Thiết kế web dễ hơn soạn văn bản
Những nguyên tắc vàng khi sử dụng Email
20 mẹo thiết kế web hữu ích nhất
SÔI ĐỘNG NHẤT
Lần gặp đầu tiên
Lần gặp đầu tiên
Em mất anh, mãi mãi mất anh!
Ý nghĩa của hoa hồng xanh
Gửi Lại Chút Yêu Thương
Tự tình....
(^-^)+(^-^)...Nhớ Em...(^-^)+(^-^)
(^-^)+(^-^)...Nhớ Em...(^-^)+(^-^)
(^-^)+(^-^)...Nhớ Em...(^-^)+(^-^)
Mưa Trên Đảo Nhỏ
LIÊN KẾT WEB
Game Online
Học thiết kế web
Xem phim - Nghe nhạc
Nhạc Flash
Truyện Tranh
Avatars
Chat trên web
NHÀ TÀI TRỢ
 
Thung lũng Hoa Hồng - Mảnh đất của TÌNH YÊU - Diễn đàn TÌNH YÊU lớn nhất Việt Nam- Love Land - Informatics - Relax worlds
Tình Yêu | Tin Học | Giải Trí | Ngoại ngữ | Nghe nhạc | Xem phim | Flash games | Truyện tranh | Thế giới avatars | 15 phút chia sẻ | Lưu bút
Copyright © 2005 Thung Lũng Hoa Hồng. - All rights reserved. Designed and Coded by Thành Nha