Làm thế nào để Căn chỉnh các yếu tố với nổi trong Dreamweaver - núm vú

Các nhà thiết kế thường sắp xếp một hình ảnh, một thẻ, hoặc một phần tử khác ở bên trái hoặc bên phải trang web trong Dreamweaver và sau đó quấn bất kỳ văn bản hoặc nội dung khác xung quanh phần tử đó. Hình ảnh được căn chỉnh ở bên phải cột để văn bản kết thúc tốt đẹp bên cạnh nó ở bên trái. Trong các bước tiếp theo, bạn tìm hiểu cách tạo kiểu như kiểu này.

tín dụng: Hình ảnh từ istockphoto. com

CSS cung cấp nhiều lợi thế khi sắp xếp các yếu tố như thế này, nhưng cách bạn thiết lập các kiểu này không rõ ràng như bạn mong đợi lúc đầu bởi vì bạn sử dụng tùy chọn float.

Sau khi bạn hiểu rằng bạn có thể thả các phần tử, chẳng hạn như hình ảnh, sang trái hoặc phải của trang, bạn sẽ dễ dàng tạo các kiểu hoàn thành mục tiêu này. Trong bài tập này, bạn học cách tạo ra hai phong cách lý tưởng để sắp xếp các hình ảnh ở bên trái và bên phải của một trang, hoàn chỉnh với một chút lề khi bạn cần nó.

Các bố cục CSS trong Dreamweaver CC đã có các kiểu thả nổi mà bạn có thể sử dụng để căn chỉnh các phần tử sang phải và trái. Các kiểu lớp này được đặt tên. fltlft (cho, bạn đoán nó, phao trái) và. fltrt (cho float phải).

Để tạo hai kiểu lớp mà bạn có thể sử dụng để căn chỉnh hình ảnh và các phần tử khác ở bên trái và bên phải của một trang, hãy làm theo các bước sau:

1. Nhấp vào dấu cộng trong bảng chọn Các Nhà thiết kế CSS.

   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. Nhấp đúp vào tên mới và chỉnh sửa nó như mong muốn.

   Mặc dù bạn có thể đặt tên cho các kiểu này bất cứ điều gì bạn thích, nhưng các kiểu sắp xếp thường được đặt tên với fltrt và fltlft được viết tắt, có thể là float right và float left tương ứng.

   Ví dụ: nếu bạn tạo một kiểu để sắp xếp các phần tử ở bên trái, bạn sẽ đặt tên nó. fltlft.

4. Trong bảng điều khiển Thuộc tính, nhấp vào biểu tượng đặt Phao sang Trái.

   

5. Sử dụng cài đặt Margin trong bảng thuộc tính để tạo khoảng lề xung quanh phần tử được thả nổi.

   Thực tiễn tốt để thêm khoảng trống vào phía đối diện từ cài đặt phao. Nếu bạn đang tạo một phong cách để phao một hình ảnh sang trái, hãy thêm 5 hoặc 10 pixel của không gian vào trường Lề phải.Khi bạn căn chỉnh một hình ảnh ở bên trái của trang, một lề sẽ được tạo ra giữa hình ảnh và bất kỳ phần tử nào khác kết hợp với hình ảnh.

6. Chọn hình ảnh hoặc phần tử khác mà bạn muốn căn chỉnh trong trang.

7. Chọn tên của kiểu bạn đã tạo từ trình đơn thả xuống Lớp trong Trình kiểm tra thuộc tính.

   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. Nếu bạn đã chọn một hình ảnh trong một trang văn bản, hình ảnh sẽ di chuyển sang bên trái của trang và văn bản sẽ quấn quanh nó với một lề giữa hình ảnh và văn bản.

8. Lặp lại các bước 1-7, một lần với thả nổi lên phải và 5 đến 10 pixel của khoảng lề trong trường Lề trái trong mục Hộp, và một lần nữa với các thiết lập Float còn lại và 5 đến 10 pixel của khoảng cách lề trong trường Lề phải trong danh mục Hộp.