Khi thiết kế các trang web, bạn thường phải giải quyết một câu hỏi cơ bản: hành vi của trang sẽ như thế nào khi nó được mở với các độ phân giải màn hình khác nhau? Có hai tùy chọn ở đây - trang web "cao su" (kéo dài) hoặc tĩnh. Lựa chọn đầu tiên sẽ được thảo luận. Dù sở thích của bạn về bố cục là gì, nguyên lý chính của thiết kế căng là khả năng mở rộng tương đối.
Nó là cần thiết
- - kiến thức về HTML;
- - chương trình chỉnh sửa mã html.
Hướng dẫn
Bước 1
Chọn tệp chính cho mẫu trang web của bạn, tệp này sẽ phản ánh đánh dấu chính. Nó có thể là tệp index.html hoặc index.php. Một trong những phần mềm chỉnh sửa mẫu trang web trực quan tốt nhất là Macromedia Dreamweawer. Các chỉnh sửa cần thiết sẽ được thực hiện trên cơ sở của chương trình này.
Mở tệp mẫu hoặc tạo tệp mới bằng lệnh "Tệp" - "Mới", danh mục - "Trang cơ sở" - "HTML" hoặc danh mục "Trang động" - "PHP". Ở đây chúng ta xem xét trường hợp chung khi cấu trúc trang web được ghi lại chính xác trong một trong hai tệp.
Bước 2
Từ lâu, không có gì bí mật khi có nhiều kiểu bố trí khác nhau - trên bảng, trên khối div và kết hợp (bảng và khối cùng một lúc). Thẻ html chịu trách nhiệm về bố cục bảng
Chỉ định tỷ lệ phần trăm (100%) cho mỗi thuộc tính. Điều này sẽ đạt được hiệu ứng tự động kéo dài các ô bảng trên màn hình với bất kỳ hình học nào. Đó có thể là màn hình 19 inch hoặc điện thoại thông minh - mỗi màn hình sẽ tái tạo chính xác nội dung.
Bước 3
Nếu bạn cần chỉ định chính xác sự tương ứng giữa các ô trong bảng, hãy sử dụng ví dụ sau:
| … … nội dung của ô 1. … | … … nội dung của ô 2. … |
Ở đây bạn sẽ thấy rằng một trong các ô được chỉ định với chiều rộng bằng 30% của mọi thứ được xác định cho chính bảng đó. Một phép tính đơn giản cho thấy rằng 100% -30% = 70% còn lại cho ô thứ hai. Hãy nhớ rằng trong trường hợp này, một trong các ô của bảng không được đặt thuộc tính width. Trình duyệt sẽ tự thực hiện tất cả các phép tính và sẽ kéo dài bảng một cách chính xác với các ô. Nội dung bên trong các bảng cũng sẽ kéo dài và thu nhỏ một cách chính xác trên các màn hình khác nhau.
Bước 4
Trong tình huống có bố cục div, các khối thẻ được kéo dài theo mặc định bằng toàn bộ chiều rộng của màn hình và nối tiếp nhau từ trái sang phải, từ trên xuống dưới. Để tinh chỉnh hình dạng của chúng, hãy tạo một lớp CCS hoặc mã định danh (ID), trong đó bạn chỉ định, chẳng hạn như các thuộc tính và / hoặc cho loại kích thước và vị trí của hộp (Box). Đừng quên liên kết kiểu được chỉ định với tệp đánh dấu trang web và liên kết lớp (ID) với thẻ mong muốn. Thông thường, nó được đặt ở đầu tập lệnh, xác định tất cả hình dạng trang web trong tương lai:
… … Nội dung trang web. …
Hoặc như thế này:
… … Nội dung trang web. …
Mã cho quy tắc CSS sẽ như sau:
… lớp học của tôi {
chiều rộng: 30%;
chiều cao: 50%;
}
#mã số của tôi {
chiều rộng: 30%;
chiều cao: 50%;
}
