|
HỒ LÔ BIẾN |
|
Cho trang web xuất
hiện chính giữa màn hình với Dreamweaver MX
Hoàng Nghĩa Hạnh (Hà Nội)
|
|
Một vấn đề đặt ra cho bất cứ người thiết kế
web nào đó là trang web họ thiết kế ra sẽ
hiển thị chuẩn xác cho dù xem bằng loại
trình duyệt nào. Ở đây tôi chỉ trình bày một
khía cạnh rất nhỏ trong thiết kế layout: làm
sao để toàn bộ nội dung và hình ảnh trên một
trang web luôn hiển thị chính giữa màn hình
trong mọi loại trình duyệt phổ biến hiện nay.
Mọi thao tác dưới đây đều thực hiện trong
Dreamweaver MX. |
|
Các bước thực hiện |
|
- Mở chương trình Dreamweaver, tạo một văn bản
mới và ghi lại trên ổ cứng. |
 |
|
- Nhấp chuột phải chọn Page Properties. Một
cửa sổ popup sẽ hiện lên như hình 1. |
|
- Thiết lập các thông số Left/Top/Width/Height
Margin với giá trị 0. |
|
- Chọn OK. |
|
 -
Chuyển qua chế độ Code and Design View, thêm
thuộc tính Right Margin và Bottom Margin vào
thẻ body (vì DW không hoàn toàn hỗ trợ CSS). |
|
Trước: <body
bgcolor="#FFFFFF" text="#000000" leftmargin="0"
topmargin="0" marginwidth="0" marginheight="0"> |
|
Sau: <body
bgcolor="#FFFFFF" text="#000000" leftmargin="0"
rightmargin=”0” topmargin="0" bottommargin=”0”
marginwidth="0" marginheight="0"> |
|
- Lưu trang web (Save) |
|
 Để
bố trí các thành phần trên trang web, người ta
thường sử dụng bảng (table). Để tạo ra một
bảng mới, chọn Insert-Table, thiết lập thông
số cho bảng trên cửa sổ popup la |
|
Rows: 1, cellpading: 0, columns: 1, cell spacing: 0,
width: 100 percent, border: 0. |
|
 Chú
ý: Vào bảng Properties trên màn hình làm việc
của DW hay chọn Window-Properties), thiết lập
thông số H(height) với giá trị 100%.
Nhấp trỏ chuột trong vùng table, vẫn trên bảng
Properties, thiết lập thông số
Horizontal: center, Vertical:
middle |
|
Thử gõ một đoạn văn bản, chẳng hạn: center
your layout, để kiểm tra xem thành quả của
mình. |
|
- Nếu dùng các chương trình khác để làm web,
bạn có thể dán trực tiếp đoạn mã sau vào
mã nguồn trang web của bạn. |
|
<html>
<head>
<title>center your layout</title>
</head>
<body bgcolor="#FFFFFF" text="#000000"
leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
<table width="100%" height="100%" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"> center your
layout </td>
</tr>
</table>
</body>
</html> |
|
Bây giờ bạn có thể bắt tay vào trình
bày bố cục và nội dung cho trang web của mình
mà không lo tới việc khách thăm trang web của
bạn sẽ “đỏ con mắt” vì trang web bị lệch sang
trái hay phải nữa. |
|
|
