Làm thế nào để tạo Truy vấn Truyền thông Tùy chỉnh trong Dreamweaver - núm vú

Khi bạn tạo các trang sử dụng các tính năng bố trí lưới lỏng, Dreamweaver tự động tạo các truy vấn media tương ứng cho bạn, nhưng bạn có thể tạo truy vấn phương tiện tùy chỉnh của riêng bạn và sử dụng chúng để nhắm mục tiêu các quy tắc CSS của riêng bạn.

Các truy vấn truyền thông đã được sử dụng trên web trong hơn mười năm cho các mục đích sử dụng khác, chẳng hạn như tạo ra một thiết kế trang thay thế được tối ưu hóa để in. Truy vấn phương tiện được tạo thành từ loại phương tiện, chẳng hạn như màn hình hoặc bản in (hai phổ biến nhất) và một biểu thức tùy chọn để kiểm tra các tính năng cụ thể, chẳng hạn như chiều cao hoặc chiều rộng. Các loại phương tiện thông dụng nhất được sử dụng là

in: Được thiết kế để xem trước khi in và để hiển thị khi màn hình được in

: Đối với nội dung hiển thị trên màn hình bất kỳ

Loại phương tiện cầm tay hầu như không bao giờ được sử dụng nữa và chỉ được sử dụng tốt nhất cho điện thoại di động và các thiết bị khác với màn hình nhỏ, băng thông hạn chế và màn hình đơn sắc chỉ hỗ trợ đồ họa bitmap. thiết bị iOS và hầu hết các điện thoại thông minh được phân loại là loại phương tiện màn hình.

Cách áp dụng phong cách cho các thiết kế trang của Dreamweaver

Bạn có thể áp dụng các trang định kiểu như các tệp bên ngoài bằng cách liên kết chúng hoặc nhập chúng, hoặc có thể bao gồm chúng dưới dạng các kiểu nội bộ trong vùng đầu của trang của mã HTML. Bạn thậm chí có thể nhắm mục tiêu thiết bị bằng cách sử dụng kiểu nội tuyến - một tùy chọn tiện dụng nếu bạn chỉ muốn áp dụng một quy tắc cụ thể cho các thiết bị nhất định.

Bạn có thể sử dụng kết hợp các tùy chọn này, và bạn có thể nhập, hoặc liên kết, nhiều trang tính bên ngoài vào cùng một trang web. Sau khi bạn đã xác định loại phương tiện truyền thông với các tính năng phương tiện mà bạn muốn nhắm mục tiêu, bạn chỉ định cách áp dụng các kiểu cho trang.

Cách sử dụng truy vấn media trong các trang định kiểu ngoài trong Dreamweaver

Bạn có thể sử dụng các truy vấn phương tiện với các tờ kiểu ngoài theo hai cách. Tùy chọn đầu tiên là liên kết đến một trang kiểu ngoài với nhiều bộ kiểu được phân tách bằng truy vấn phương tiện truyền thông. Đó là cách Dreamweaver liên kết các phong cách khi bạn tạo bố cục lưới lỏng.

Tùy chọn thứ hai là để liên kết hai hoặc nhiều trang phong cách riêng biệt bên ngoài cho mỗi trang HTML và bao gồm các truy vấn phương tiện truyền thông trong mỗi bảng kiểu. Dù bằng cách nào, mã cho CSS và HTML được lưu trong các tệp riêng biệt và thẻ kết nối chúng.

Cho dù bạn lưu tất cả các truy vấn phương tiện truyền thông và phong cách liên quan trong một tệp hoặc trong các tệp CSS riêng biệt, bạn cũng có thể liên kết các trang định kiểu bổ sung với bất kỳ trang HTML nào. Ví dụ: bạn có thể bao gồm một bộ phong cách riêng biệt trong một trang tính riêng biệt được thiết kế để định dạng trang khi nó được gửi đến máy in.

Cách tạo truy vấn phương tiện truyền thông trong Dreamweaver

Bạn có thể tạo nhiều truy vấn phương tiện như bạn muốn trong Dreamweaver và bạn có thể đưa chúng vào một tệp CSS hoặc nhiều tệp. Để tạo truy vấn phương tiện mới trong Dreamweaver, hãy làm theo các bước sau:

Mở bảng điều khiển Nhà thiết kế CSS bằng cách chọn Window → CSS Styles.

1. Chọn một bảng định dạng hiện có trong bảng Nguồn hoặc tạo một bảng mới bằng cách nhấp vào dấu cộng (+) trong bảng Nguồn.

2. Nhấp vào dấu cộng (+) trong phần @Media trong bảng điều khiển Nhà thiết kế CSS.

   

3. Hộp thoại Define Media Queries mở ra.

   Chọn Phương tiện từ danh sách thả xuống đầu tiên và Màn hình từ danh sách thả xuống thứ hai.

4. Di chuyển con trỏ của bạn ở bên phải mỗi danh sách thả xuống để tạo dấu cộng, sau đó nhấp vào dấu cộng để thêm một trường mới.

   

5. Một trường mới xuất hiện trong hộp thoại Truy vấn Truyền thông để bạn có thể chỉ định hướng. Trường này là tùy chọn nhưng thường được sử dụng nếu bạn muốn tạo các thiết kế khác nhau cho chế độ xem phong cảnh và chân dung trên máy tính bảng hoặc điện thoại thông minh. Nếu bạn không muốn tạo thêm bố cục dựa trên hướng, bạn có thể xóa trường này bằng cách nhấp vào dấu trừ.

   Lưu ý:

   Các dấu cộng và trừ chỉ hiển thị khi bạn cuộn con trỏ qua phía bên phải hộp thoại. Di chuyển con trỏ của bạn sang phải của danh sách thả xuống, nhấp vào dấu cộng để thêm một trường và nhập một điều kiện chiều rộng nhỏ nhất.

6. Trường Min-Width xuất hiện trong hộp thoại Truy vấn Truyền thông để bạn có thể chỉ định chiều rộng tối thiểu mà bạn muốn sử dụng để nhắm mục tiêu truy vấn. Chiều rộng tối thiểu là quan trọng bởi vì truy vấn phương tiện nhắm mục tiêu các kiểu dựa trên chiều rộng tối thiểu đến chiều rộng tối đa mà bạn chỉ định, được bao gồm trong bước tiếp theo.

   Di chuyển con trỏ của bạn sang phải của danh sách thả xuống, nhấp vào dấu cộng cộng một lần thứ ba để thêm một trường và nhập điều kiện chiều rộng tối đa.

7. Trường Max-Width xuất hiện trong hộp thoại để bạn có thể chỉ định chiều rộng tối đa mà bạn muốn sử dụng để nhắm mục tiêu truy vấn.

   Nhấp vào OK.

8. Hộp thoại Truy vấn Truyền thông đóng lại và truy vấn phương tiện được tạo và thêm vào bảng phong cách bạn đã chọn trong bảng Sources trong bảng điều khiển Nhà thiết kế CSS.

   Để thêm truy vấn media bổ sung vào bất kỳ trang tính nào đã chọn, hãy lặp lại các bước 3-8. Để thêm truy vấn media vào một trang tính khác, hãy lặp lại các bước 2-8.

9. Mặc dù bạn có thể lưu các truy vấn phương tiện trong nhiều kiểu trang khác nhau nhưng bạn có thể lưu tất cả chúng trong một trang định kiểu ngoài vì hiệu quả hơn vì mỗi tờ kiểu này phải được tải về từ máy chủ riêng, đòi hỏi nhiều băng thông hơn. Tải xuống một trang kiểu dài với nhiều truy vấn truyền thông hiệu quả hơn nhiều so với việc tải nhiều trang tính.