Làm thế nào để Trung tâm một Page Layout với CSS Margins trong Dreamweaver - núm vú

Dreamweaver cho phép bạn bố trí trung tâm bằng cách sử dụng lề CSS. Nhiều thiết kế trang web được đặt trung tâm trên trang để chúng có vẻ nổi giữa các cạnh của cửa sổ trình duyệt bất kể cửa sổ rộng và thu hẹp. Điều này giúp tạo ra ảo giác rằng thiết kế lấp đầy trang, ngay cả khi cửa sổ trình duyệt rộng hơn nhiều so với thiết kế trang.

Hầu hết các thiết kế trang web được tạo bằng CSS đều đạt được hiệu quả này bằng cách tạo một thẻ bao quanh tất cả nội dung trang và sau đó áp dụng một phong cách cho thẻ đó bao gồm một quy tắc phong cách tập trung vào thẻ đó. Khi bạn khám phá các hướng dẫn từng bước dưới đây, việc tạo một phong cách để canh giữa thẻ không rõ ràng như bạn tưởng tượng nhưng dễ thực hiện.

Thực tiễn chung là sử dụng kiểu ID cho thẻ nhắm mục tiêu thiết kế của bạn và đặt tên cho nó là #wrapper hoặc #container.

Nếu trang của bạn chưa được thiết lập với một thẻ xung quanh nội dung của bạn, đây là mẹo để thêm một trang. Nhấp chuột đầu tiên và kéo để chọn tất cả các văn bản, hình ảnh, và các nội dung khác trên trang. Sau đó chọn Insert → Layout Objects → Div Tag. Trong hộp thoại Insert Div Tag, chắc chắn rằng tùy chọn Wrap around Selection được chọn từ danh sách Insert thả xuống.

Để phần còn lại của các trường trống và nhấp vào OK để thêm một thẻ xung quanh tất cả các nội dung của trang của bạn, và bạn đã sẵn sàng cho các bước tiếp theo.

Để căn giữa một thiết kế trang toàn bộ, đảm bảo rằng một thẻ bao quanh tất cả nội dung của trang và làm theo các bước sau:

1. Nhấp vào dấu cộng trong bảng chọn CSS Designer.

   Tùy thuộc vào nội dung trên trang, tên kiểu mới hoặc trường trống nơi bạn có thể nhập tên kiểu được thêm vào bảng Chọn.

2. Nhấp đúp để chọn tên mà Dreamweaver đã thêm vào bảng điều khiển và thay đổi nó thành tên bạn muốn cho kiểu mới của bạn, hoặc nhấn để chọn trường trống và nhập tên.

   Nếu không có tên nào được thêm vào, hãy nhập tên bạn muốn vào trường trống. Bạn có thể đặt tên cho phong cách bất cứ điều gì bạn thích, nhưng hãy chắc chắn để nhập một khoảng thời gian trước tên nếu bạn tạo một phong cách lớp, hoặc một dấu # cho một phong cách ID.

3. Trong bảng thuộc tính, chỉ định chiều rộng, lề và các cài đặt định dạng khác mà bạn muốn xác định.

   Chiều rộng của thẻ chứa được đặt là 980 pixel. Đây là mẹo để căn giữa một thẻ như sau: Đặt lề trái và phải sang Tự động. Bằng cách đó, trình duyệt sẽ tự động thêm một khoảng không gian lề bằng nhau cho mỗi bên của thẻ, hiệu quả làm trung tâm nó trên trang.

   

4. Chọn ID bao quanh tất cả nội dung trên trang.

   Để đảm bảo bạn đã chọn đúng thẻ, hãy nhấp để đặt con trỏ ở bất kỳ vị trí nào trong phần chính của trang và sau đó nhấp vào thẻ được liệt kê ở cuối xa nhất trong Trình chọn thẻ Nhanh ở cuối không gian làm việc.

5. Với thẻ đã chọn, chọn tên của kiểu bạn đã tạo từ danh sách thả xuống ID trong trình kiểm tra Tài sản.

   Các quy tắc về phong cách bạn đã xác định khi tạo kiểu được tự động áp dụng cho thẻ. Trong ví dụ này, kết quả là kích thước của thẻ được thay đổi thành 980 pixel và thẻ và tất cả nội dung của nó được căn giữa trên trang.

Không phải tất cả các tính năng đều hoạt động khi Dreamweaver được thiết lập để xem trực tiếp. Mặc dù chế độ xem trực tiếp là một cách tuyệt vời để xem trước cách các thiết kế trang của bạn sẽ tìm kiếm trong hầu hết các trình duyệt web hiện đại, việc sử dụng tính năng Xem trực tiếp làm cho nhiều công cụ chỉnh sửa của Dreamweaver không sử dụng được. Ví dụ: nếu thanh tra thuộc tính xuất hiện mờ đi khi bạn muốn sử dụng nó, đảm bảo rằng nút Live sẽ không được chọn.