Làm thế nào để tạo ra các vị trí tuyệt đối (AP) trong Adobe Dreamweaver CS6 - núm vú

Adobe Dreamweaver CS6 sử dụng các thùng chứa ảo được điều khiển bằng CSS, hoặc hộp, được tạo bởi thẻ DIV để tự do định vị nội dung trên một trang. Thẻ DIV là thẻ cơ bản được sử dụng để tạo các vùng cho nội dung trên trang của bạn.

Bạn có thể tạo thẻ DIV từ nhiều nơi trong Dreamweaver, bao gồm cả phần Giao diện của bảng chèn. Mỗi thẻ DIV có thể có một kiểu ID duy nhất được gán cho nó để kiểm soát vị trí, hình thức và kích thước của nó. Quá trình đặt nội dung thường đòi hỏi hai bước: tạo thẻ DIV và tạo kiểu tương ứng.

Dreamweaver làm cho công việc này dễ dàng với công cụ AP Div, cho phép bạn vẽ các ô một cách tự do trên trang và đặt nội dung bên trong.

CSS xử lý hầu hết các yếu tố vùng chứa trên một trang dưới dạng hộp ; cách tiếp cận này, được gọi là mô hình hộp CSS , cho phép các phần tử này chia sẻ các thuộc tính đồng nhất như padding, lề, chiều rộng, chiều cao và biên giới.

Mặc dù CSS có thể coi hầu hết bất kỳ phần tử nào chứa trong một trang như một hộp (như bảng hoặc một danh sách), các thẻ DIV thường được sử dụng để tạo các hộp ảo mà bạn có thể sử dụng để định vị văn bản, hình ảnh và thậm chí cả lồng nhau hộp.

Để tạo ra AP (Vị trí tuyệt đối), hãy làm theo các bước sau:

Tạo một trang mới hoặc mở một trang hiện có từ trang của bạn.

1. Trên bảng chèn, hãy chọn loại Giao diện.

2. Chọn công cụ Vẽ AP Div.

3. Con trỏ xuất hiện như một sợi tóc chéo khi bạn di chuyển nó trở lại trên trang.

   Nhấp vào bất kỳ nơi nào trên trang và kéo để vẽ một AP mới; nhả chuột.

4. Di chuyển con trỏ chuột qua cạnh hộp cho đến khi nó thay đổi thành một mũi tên 4 chiều; click một lần và tay cầm xuất hiện trên tất cả các mặt.

   

5. Nhấp và kéo bất kỳ các chốt này để định lại kích thước hộp theo chiều dọc hoặc chiều ngang.

6. Để di chuyển hộp, nhấp và kéo nó bằng tab nằm trên cạnh trên bên trái và đặt hộp nơi bạn muốn nó trên trang.

7. Hãy xem Inspector Property và bạn sẽ thấy tên cũng như nhiều thuộc tính DIV được liệt kê.

   Nếu bảng điều khiển kiểu CSS không mở, chọn Window → CSS Styles để mở nó; trong bảng điều khiển Tất cả, nhấp vào phía bên trái của trang tính () để mở rộng nó.

8. Bạn nhìn thấy một phong cách # apDiv1 mới được đính kèm với AP mới mà bạn đã tạo. Đối với mỗi DIV mới được tạo, Dreamweaver chỉ định apDiv với một số tương ứng theo thứ tự tạo.

   Nhấp vào bên trong hộp mới để nhập, dán hoặc chèn nội dung mới.

   

9. Khi bạn vẽ một Dạng AP trên trang, có hai sự việc xảy ra: Dreamweaver chèn một thẻ để tạo hộp và tạo một bộ chọn ID CSS để lưu vị trí, chiều rộng, chiều cao và các thuộc tính khác của DIV.

Sau khi bạn tạo một Dàn AP, bạn có thể nhập, dán hoặc chèn nội dung trực tiếp bên trong. Bạn cũng có thể chỉ định một quy tắc lớp cho bất kỳ DIV nào từ Thanh tra thuộc tính - thường xuyên nhất để xử lý định dạng nội dung, để lại bộ chọn ID để kiểm soát vị trí và kích thước.