Daftar Isi:
- Cara membuat style sheet internal dalam Dreamweaver
- Cara membuat lembaran gaya eksternal di Dreamweaver
Video: Tutorial CSS ke 2-Cara menggunakan CSS Eksternal 2024
Bila Anda membuat gaya baru di Dreamweaver, Anda perlu memutuskan apakah akan menyimpan gaya dalam lembar gaya internal atau eksternal. Dalam style sheet internal , aturan gaya disimpan di bagian atas dokumen HTML tempat Anda ingin menerapkan gayanya. Dalam style sheet eksternal , gaya baru disimpan dalam dokumen terpisah yang dapat dilampirkan ke file manapun di situs Anda.
Lembar gaya eksternal menawarkan keuntungan terbesar karena menggunakan satu rangkaian gaya di banyak halaman lebih efisien daripada menciptakan gaya untuk setiap halaman di situs Anda. Konon, terkadang lembaran gaya internal adalah pilihan yang tepat, seperti saat Anda sedang menciptakan gaya yang hanya akan berlaku untuk elemen pada satu halaman.
Cara membuat style sheet internal dalam Dreamweaver
Lembar gaya internal disimpan dalam file HTML yang sama dengan tempat aplikasi tersebut diterapkan. Dengan demikian, Anda tidak membuat file saat membuat lembar gaya internal, seperti yang Anda lakukan saat membuat lembar eksternal.
Sebagai gantinya, saat membuat lembar gaya internal, Anda cukup menambahkan tag di tag di bagian atas file HTML yang telah Anda buka di Dreamweaver. Kemudian, saat Anda membuat gaya, Anda akan menyimpan definisi aturan gaya baru dalam tag di file Anda.
Membuat style internal baru dalam Dreamweaver hanya membutuhkan dua langkah. Pertama, klik ikon plus (+) di panel Sumber di bagian atas panel Perancang CSS. Kemudian pilih Define in Page dari daftar drop-down. Kamu sudah selesai. Dreamweaver memasukkan tag ke dalam kode di file Anda, dan mencantumkan lembar gaya internal di panel Sumber dengan tag.
Cara membuat lembaran gaya eksternal di Dreamweaver
Di bagian paling atas panel Perancang CSS, Anda akan menemukan panel Sumber. Panel ini menampilkan nama atau nama dari setiap style sheet yang tersedia pada halaman yang terbuka. Panel yang sama digunakan untuk membuat atau menautkan ke lembar gaya saat Anda membuat atau menerapkan gaya.
Untuk membuat style sheet eksternal, pertama buat dan simpan file HTML baru atau buka file yang ada di Dreamweaver, kemudian ikuti petunjuk berikut:
-
Klik ikon plus (+) pada panel Sumber di bagian atas panel Perancang CSS.
Daftar drop-down dibuka dengan tiga pilihan: Buat File CSS Baru, Lampirkan File CSS yang ada, dan Tentukan di Halaman.
-
Pilih opsi Create a New CSS File dari daftar drop-down.
Kotak dialog Create New CSS File akan terbuka.
-
Masukkan nama untuk file sheet style baru Anda.
Anda bisa memberi nama style sheet apapun yang Anda suka, asalkan Anda tidak memasukkan spasi atau karakter khusus selain tanda hubung (-) atau garis bawah (_).
-
Pilih opsi Link.
Tautan dianggap sebagai praktik terbaik dalam kebanyakan kasus dan dipilih secara default di Dreamweaver.
Untuk sebagian besar, opsi Impor hanya digunakan bila ingin menerapkan beberapa lembar gaya eksternal ke halaman namun hanya ingin menautkan ke satu lembar gaya. Jika demikian, Anda dapat menggunakan opsi Impor untuk mengaitkan beberapa lembar gaya dengan satu.
-
Klik tanda panah di sebelah Penggunaan Bersyarat untuk melihat pengaturan tambahan.
Setelan Penggunaan Bersyarat digunakan untuk menyiapkan kueri media untuk style sheet.
-
Klik OK.
Lembar gaya disimpan dan ditautkan ke halaman HTML yang telah Anda buka di Dreamweaver. Catatan: Jika Anda mengerjakan halaman HTML baru, pastikan Anda telah menyimpan halaman; Jika tidak, Anda tidak dapat membuat dan menautkan file CSS baru.
Setelah membuat lembar gaya eksternal, Anda dapat menautkan style sheet yang sama ke halaman sebanyak yang Anda suka dengan mengikuti langkah-langkah dalam latihan yang segera diikuti. Anda juga dapat menambahkan aturan gaya sebanyak yang Anda mau ke style sheet eksternal, yang tercakup dalam berbagai latihan yang mengikuti pembuatan kelas, tag, dan jenis gaya lainnya.