Cara Membuat Query Media Kustom di Dreamweaver - dummies

Saat membuat halaman yang menggunakan fitur tata letak kotak fluida, Dreamweaver secara otomatis membuat kueri media yang sesuai untuk Anda, namun Anda dapat membuat kueri media khusus Anda sendiri dan menggunakannya untuk menargetkan aturan CSS Anda sendiri.

Permintaan media telah digunakan di web selama lebih dari satu dekade untuk kegunaan lain, seperti membuat desain halaman alternatif yang dioptimalkan untuk dicetak. Permintaan media terdiri dari jenis media, seperti layar atau cetak (dua paling umum), dan ekspresi opsional yang memeriksa fitur tertentu, seperti tinggi atau lebar. Jenis media yang paling sering digunakan adalah

semua: Cocok untuk semua perangkat
cetak: Dirancang untuk pratinjau cetak dan untuk tampilan saat layar dicetak
: Untuk konten yang ditampilkan di layar mana pun

Jenis media genggam hampir tidak pernah digunakan lagi dan paling baik digunakan hanya untuk ponsel dan perangkat lain dengan layar kecil, bandwidth terbatas, dan display monokrom yang hanya mendukung grafis bitmap. Perangkat iOS dan kebanyakan ponsel cerdas dikategorikan sebagai jenis media layar.

Bagaimana cara menerapkan gaya pada desain halaman Dreamweaver

Anda dapat menerapkan lembar gaya sebagai file eksternal dengan menghubungkannya atau mengimpornya, atau Anda dapat memasukkannya ke dalam gaya internal di wilayah kepala Anda. kode HTML halaman Anda bahkan dapat menargetkan perangkat yang menggunakan gaya sebaris - opsi praktis jika Anda ingin menerapkan aturan tertentu hanya ke perangkat tertentu.

Anda dapat menggunakan kombinasi dari opsi ini, dan Anda dapat mengimpor, atau menautkan, beberapa lembar gaya eksternal ke halaman web yang sama. Setelah Anda menentukan jenis media dengan fitur media yang ingin Anda targetkan, Anda menentukan bagaimana gaya harus diterapkan ke halaman.

Cara menggunakan kueri media dalam lembaran gaya eksternal di Dreamweaver

Anda dapat menggunakan kueri media dengan lembaran gaya eksternal dengan dua cara. Pilihan pertama adalah menautkan ke satu lembar gaya eksternal dengan beberapa rangkaian gaya yang dipisahkan oleh kueri media. Begitulah cara Dreamweaver menghubungkan gaya saat Anda membuat layout grid cair.

Pilihan kedua adalah menghubungkan dua atau lebih lembar gaya eksternal terpisah ke setiap halaman HTML dan menyertakan kueri media di setiap lembar gaya. Either way, kode untuk CSS dan HTML disimpan dalam file terpisah, dan tag menghubungkannya.

Apakah Anda menyimpan semua kueri media dan gaya terkait dalam satu file atau dalam file CSS terpisah, Anda dapat menautkan lembar gaya tambahan ke halaman HTML juga. Misalnya, Anda dapat menyertakan rangkaian gaya terpisah dalam lembar gaya terpisah yang dirancang untuk memformat halaman saat dikirim ke printer.

Cara membuat kueri media di Dreamweaver

Anda dapat membuat sebanyak mungkin kueri media yang Anda suka di Dreamweaver dan Anda dapat memasukkannya ke dalam satu file CSS atau banyak. Untuk membuat kueri media baru di Dreamweaver, ikuti langkah-langkah ini:

Buka panel Perancang CSS dengan memilih Window → CSS Styles.
Pilih lembar gaya yang ada di panel Sumber, atau buat yang baru dengan mengklik tanda tambah (+) di panel Sumber.
Klik tanda tambah (+) di panel @Media di panel Perancang CSS.

Kotak dialog Query Define Media terbuka.
Pilih Media dari daftar drop-down pertama dan Screen dari daftar drop-down kedua.
Pindahkan kursor ke kanan setiap daftar drop-down untuk membuat tanda tambah muncul, lalu klik tanda tambah untuk menambahkan kolom baru.

Field baru muncul di kotak dialog Media Queries sehingga Anda dapat menentukan orientasi. Bidang ini bersifat opsional namun biasanya digunakan jika Anda ingin membuat desain yang berbeda untuk tampilan lansekap dan potret pada tablet atau smartphone. Jika Anda tidak ingin membuat layout tambahan berdasarkan orientasi, Anda dapat menghapus bidang ini dengan mengklik tanda minus.

Catatan: Tanda plus dan minus terlihat hanya saat Anda memutar kursor di sisi kanan kotak dialog.
Pindahkan kursor Anda ke kanan daftar drop-down, klik tanda plus untuk kedua kalinya untuk menambahkan field, dan masukkan kondisi lebar minimum.

Lebar Min-Width muncul di kotak dialog Media Queries sehingga Anda dapat menentukan lebar minimum yang ingin Anda gunakan untuk menargetkan kueri. Lebar minimum penting karena kueri media menargetkan gaya berdasarkan rentang lebar maksimum hingga maksimum yang Anda tentukan, yang dibahas pada langkah berikutnya.
Pindahkan kursor Anda ke kanan daftar drop-down, klik tanda plus untuk ketiga kalinya untuk menambahkan field, dan masukkan kondisi lebar maksimum.

Field Max-Width muncul di kotak dialog sehingga Anda dapat menentukan lebar maksimum yang ingin Anda gunakan untuk menargetkan kueri.
Klik OK.

Kotak dialog Kueri Media ditutup dan kueri media dihasilkan dan ditambahkan ke style sheet yang Anda pilih di panel Sumber di panel Perancang CSS.
Untuk menambahkan kueri media tambahan ke lembar gaya yang dipilih, ulangi Langkah 3-8. Untuk menambahkan kueri media ke style sheet yang berbeda, ulangi Langkah 2-8.

Meskipun Anda dapat menyimpan kueri media dalam berbagai gaya berbeda sesuai keinginan, menyimpan semuanya dalam satu lembar gaya eksternal lebih efisien karena setiap lembar gaya harus diunduh dari server secara terpisah, membutuhkan lebih banyak bandwidth. Mengunduh satu lembar gaya panjang dengan beberapa kueri media sedikit lebih efisien daripada mengunduh beberapa lembar gaya.