Cara Membuat Permintaan Media Custom di Dreamweaver - dummies

Apabila anda membuat halaman menggunakan ciri susun atur grid bendalir, Dreamweaver secara automatik mencipta pertanyaan media yang sesuai untuk anda, tetapi anda boleh membuat pertanyaan media peribadi anda sendiri dan menggunakannya untuk mensasarkan peraturan CSS anda sendiri.

Pertanyaan media telah digunakan di web lebih dari satu dekad untuk penggunaan lain, seperti membuat reka bentuk halaman alternatif yang dioptimumkan untuk dicetak. Permintaan media terdiri daripada jenis media, seperti skrin atau cetakan (kedua paling biasa), dan ungkapan pilihan yang memeriksa ciri-ciri tertentu, seperti ketinggian atau lebar. Jenis media yang paling biasa digunakan ialah

• semua: Sesuai untuk semua peranti

• cetak: Direka untuk pratonton cetak dan untuk paparan apabila halaman dicetak

• skrin: Untuk kandungan yang dipaparkan pada mana-mana skrin

hampir tidak pernah digunakan lagi dan hanya digunakan untuk telefon bimbit dan peranti lain dengan skrin kecil, jalur lebar terhad, dan paparan monokrom yang hanya menyokong grafik bitmapped. Peranti iOS dan kebanyakan telefon pintar dikategorikan sebagai jenis media skrin.

Cara memohon gaya ke reka bentuk halaman Dreamweaver anda

Anda boleh menggunakan helaian gaya sebagai fail luaran dengan menghubungkannya atau mengimportnya, atau anda boleh memasukkannya sebagai gaya dalaman di kawasan kepala anda kod HTML halaman. Anda juga boleh menyasarkan peranti menggunakan gaya inline - pilihan yang berguna jika anda mahu menggunakan peraturan tertentu hanya untuk peranti tertentu.

Anda boleh menggunakan gabungan pilihan ini, dan anda boleh mengimport, atau memaut, beberapa helaian gaya luaran ke halaman web yang sama. Selepas anda menentukan jenis media dengan ciri media yang ingin anda sasarkan, anda menentukan bagaimana gaya harus diterapkan pada halaman.

Cara menggunakan pertanyaan media dalam helaian gaya luar di Dreamweaver

Anda boleh menggunakan pertanyaan media dengan helaian gaya luaran dalam dua cara. Pilihan pertama ialah untuk memaut ke satu helaian gaya luaran dengan pelbagai set gaya yang dipisahkan oleh pertanyaan media. Itulah cara Dreamweaver menghubungkan gaya apabila anda membuat susun atur grid bendalir.

Opsyen kedua ialah untuk menghubungkan dua atau lebih helaian gaya luaran berasingan ke setiap halaman HTML dan masukkan pertanyaan media dalam setiap helaian gaya. Sama ada cara, kod untuk CSS dan HTML disimpan dalam fail berasingan, dan tag itu menghubungkannya.

Sama ada anda menyimpan semua pertanyaan media dan gaya berkaitan dalam satu fail atau dalam fail CSS berasingan, anda boleh memautkan helaian gaya tambahan ke mana-mana halaman HTML juga. Sebagai contoh, anda boleh menyertakan set gaya berasingan dalam lembaran gaya yang berasingan yang direka bentuk untuk memformat halaman apabila ia dihantar ke pencetak.

Cara membuat pertanyaan media di Dreamweaver

Anda boleh membuat banyak pertanyaan media yang anda suka dalam Dreamweaver dan anda boleh memasukkannya dalam satu fail CSS atau banyak. Untuk membuat pertanyaan media baru dalam Dreamweaver, ikuti langkah berikut:

1. Buka panel Designer CSS dengan memilih Window → CSS Styles.

2. Pilih helaian gaya yang ada dalam panel Sumber, atau buat yang baharu dengan mengklik tanda tambah (+) dalam panel Sumber.

   

3. Klik tanda tambah (+) dalam panel @Media dalam panel Designer CSS.

   Kotak dialog Takrif Media Menentukan dibuka.

4. Pilih Media dari senarai jatuh turun pertama dan Skrin dari senarai juntai bawah kedua.

   

5. Gerakkan kursor anda di sebelah kanan setiap senarai juntai bawah untuk membuat tanda tambah muncul, dan kemudian klik tanda tambah untuk menambah medan baru.

   Bidang baru muncul dalam kotak dialog Media Queries supaya anda dapat menentukan orientasi. Bidang ini adalah pilihan tetapi biasanya digunakan jika anda ingin membuat reka bentuk yang berbeza untuk pemandangan landskap dan potret pada tablet atau telefon pintar. Jika anda tidak mahu membuat susun atur tambahan berdasarkan orientasi, anda boleh mengalih keluar medan ini dengan mengklik tanda tolak.

   Nota: Tanda tambah dan tolak menjadi hanya dapat dilihat apabila anda melancarkan kursor anda di sebelah kanan kotak dialog.

6. Gerakkan kursor anda di sebelah kanan senarai lungsur, klik tanda tambah untuk kali kedua untuk menambah medan, dan masukkan syarat lebar minimum.

   Medan Min-Lebar muncul dalam kotak dialog Media Queries supaya anda dapat menentukan lebar minimum yang anda ingin gunakan untuk menargetkan pertanyaan. Lebar minimum adalah penting kerana pertanyaan media mensasarkan gaya berdasarkan minimum ke julat lebar maksimum yang anda tentukan, dilindungi dalam langkah seterusnya.

7. Gerakkan kursor anda di sebelah kanan senarai lungsur turun, klik tanda tambah buat kali ketiga untuk menambah medan, dan masukkan syarat lebar maksimum.

   Bidang Max-Width muncul dalam kotak dialog supaya anda boleh menentukan lebar maksimum yang anda mahu gunakan untuk menargetkan pertanyaan.

8. Klik OK.

   Kotak dialog Pertanyaan Media ditutup dan pertanyaan media dijana dan ditambah pada helaian gaya yang anda pilih dalam panel Sumber dalam panel Designer CSS.

9. Untuk menambah pertanyaan media tambahan ke mana-mana helaian gaya yang dipilih, ulang Langkah 3-8. Untuk menambah pertanyaan media pada helaian gaya yang berbeza, ulang Langkah 2-8.

Walaupun anda boleh menyimpan pertanyaan media dalam banyak gaya helaian yang anda inginkan, menyimpannya dalam satu helaian gaya luaran adalah lebih cekap kerana setiap helaian gaya mesti dimuat turun dari pelayan secara berasingan, memerlukan lebih lebar jalur. Mengunduh satu helaian gaya panjang dengan banyak pertanyaan media adalah lebih berkesan daripada memuat turun pelbagai helaian gaya.