10.4.1 Perbedaan antara frameset dan bingkai
Pertama, mari kita jelaskan perbedaan antara frameset dan bingkai.
<fameset> </fameset> digunakan untuk membagi bingkai, setiap bingkai ditandai oleh <pangka> </fame>. <pangka> </fame> harus digunakan di dalam <fameset> </fameset>, kodenya adalah sebagai berikut:
<Border frameset = 1 framespacing = 1 bordercolor =#47478d baris =* cols = 180,*>
<Frame src = "inc/admin_left.htm" name = gulir kiri = tidak ada id = "kiri">
<Frame src = "inc/admin_center.htm" name = Main scrolling = "no">
</fameset>
Dalam contoh di atas, <fameset> </frameset> membagi halaman menjadi dua bagian, halaman di bingkai kiri adalah admin_left.htm, dan halaman di bingkai kanan adalah admin_center.htm.
CATATAN: Urutan bingkai <pangka> </fame> tag dibiarkan ke kanan atau atas ke bawah.
Perbedaan antara keduanya adalah sebagai berikut:
● <fameset> adalah tag bingkai, menunjukkan bahwa dokumen halaman web terdiri dari bingkai, dan mengatur tata letak bingkai yang membentuk bingkai yang diatur dalam dokumen.
● <pangka> digunakan untuk mengatur properti dari setiap bingkai yang merupakan bingkai.
10.4.2 Pengaturan Parameter Frameset
<fameset> perlu mengatur beberapa parameter spesifik, yang secara langsung menentukan tata letak seluruh halaman. Kodenya adalah sebagai berikut:
<Border frameset = 1 framespacing = 1 bordercolor =#47478d baris =* cols = 180,*>
Pengaturan parameter dan makna kode sebelumnya ditunjukkan pada Tabel 10.3.
Tabel 10.3 Parameter Frameset
parameter | menjelaskan |
Berbatasan | Atur ketebalan bingkai dalam piksel |
Frameborder | Setel apakah akan menampilkan batas bingkai, 0 tidak ditampilkan, 1 ditampilkan |
Framespacing | Menunjukkan jarak antara bingkai |
BorderColor | Atur warna bingkai batas |
Baris | Bagilah dokumen menjadi bingkai atas dan bawah. Nilai setelah baris dapat berupa nilai atau persentase numerik. * berarti bahwa ruang yang tersisa ditempati. Jumlah nilai numerik mewakili jumlah bingkai yang dibagi secara horizontal. Misalnya, baris = "210,*, 10%", yang berarti halaman dibagi menjadi tiga halaman bingkai atas, tengah dan bawah. Bingkai atas menempati 210px, bingkai bawah menempati 10% dari seluruh dokumen, dan ruang yang tersisa ditempati oleh bingkai tengah. * adalah konsep relatif, seperti baris =*, yang berarti bahwa tidak ada struktur atas dan bawah di halaman. |
Cols | Atur sama seperti baris |
Mengenai pengaturan parameter bingkai, kode ini adalah sebagai berikut:
Seperti yang ditunjukkan pada Tabel 10.4.
Tabel 10.4 Parameter Frame
parameter | menjelaskan |
Nama | Nama kerangka pengaturan harus dalam bahasa Inggris |
SRC | Atur jalur dan nama halaman yang ditampilkan dalam bingkai, yang dapat berupa jalur relatif atau absolut. |
Marginwidth | Menunjukkan jarak dari tepi kiri dan kanan bingkai |
Marginheight | Menunjukkan jarak dari tepi atas dan bawah bingkai |
Menggulir | Tetapkan apakah akan menampilkan bilah gulir dalam bingkai, ya ditampilkan, tidak, tidak ditampilkan, otomatis berarti bahwa bilah gulir ditampilkan secara otomatis ketika konten di halaman bingkai melebihi ukuran bingkai. |
Frameborder | Tetapkan apakah akan menampilkan batas bingkai, 0 tidak ditampilkan, dan 1 ditampilkan |
Noresize | Tetapkan apakah pengguna dapat mengubah ukuran bingkai ini. Tanpa mengatur item ini, penampil dapat menarik bingkai sesuka hati dan mengubah ukuran bingkai. |
Framespacing | Menunjukkan jarak antara bingkai |
BorderColor | Atur warna bingkai batas |
Bingkai dan iframe pada dasarnya dapat mencapai fungsi yang sama, tetapi iframe memiliki lebih banyak fleksibilitas daripada bingkai.
Tag iframe juga disebut tag bingkai mengambang. Mereka dapat digunakan untuk menyematkan dokumen HTML dalam layar HTML. Perbedaan terbesar antara itu dan tag bingkai adalah bahwa konten yang terkandung dalam <Frame> </Frame> yang tertanam di halaman web adalah keseluruhan dengan seluruh halaman, sedangkan konten yang terkandung dalam <pangka> </fame> adalah individu yang independen dan dapat ditampilkan secara independen. Selain itu, aplikasi iframe juga dapat menampilkan konten yang sama beberapa kali pada halaman yang sama tanpa harus mengulangi kode konten ini.
Halaman yang ditunjukkan pada Gambar 10.21 adalah menggunakan iframe untuk membuat tautan paging di bagian atas dan bawah halaman. Kode di bagian atas dan bawahnya sama. Anda hanya perlu menyematkan file yang sama di halaman web, dan tidak perlu menulis kode berulang kali. Untuk efek aktual dari kasus ini, silakan merujuk ke case /frame/iframe/see_infomore_iframe.htm di buku-aksor CD-ROM.
IFRAME memiliki keuntungan lain yang lebih besar, yaitu dapat mengatur bingkai menjadi transparan sehingga latar belakang dalam bingkai sama dengan latar belakang halaman utama. Dalam contoh operasi di atas, pembaca yang cermat akan menemukan masalah ini. Mari kita jelaskan secara rinci cara mengatur transparansi iframe. Langkah operasi spesifik adalah sebagai berikut:
(1) Buka casing/frame/iframe/See_infomore_iframe1.htm di CD alokasi buku.
(2) Jelajahi file di halaman ini di browser dan temukan bahwa latar belakang sel asli ditimpa di area di mana iframe dimasukkan, yang bukan efek yang diinginkan.
(3) Buka halaman Page.htm, beralih ke tampilan kode, dan masukkan kode ke dalam tag <body> sebagai berikut:
<body style = "latar belakang-warna = transparan">
Gambar 10.21 Menggunakan IFRAME untuk membuat Page Turn
(4) Beralih See_infomore_iframe1.htm ke Tampilan Kode dan lihat kode untuk memasukkan sel iframe pada halaman sebagai berikut:
<td colspan = "4">
<iframe name = "main" frameborder = "0" border = 0 scrolling = "no" marginwidth = "0" marginheight = "0" src = "page.htm"> </iframe>
</td>
(5) Di tag <frame>,
<frame name = "kiri" src = "index_manager/admin_left.htm" marginwidth = "1" marginheight = "1" scrolling = "no" frameborder = "1" noresize framespacing = "2" bordercolor = "#cc0000">
Pengaturan parameter dan makna kode sebelumnya
Allowtransparency = "true"
(6) Kode sel untuk memasukkan iframe saat ini adalah sebagai berikut:
<td colspan = "4">
<iframe name = "main" frameborder = "0" border = 0 scrolling = "no" marginwidth = "0" marginheight = "0" src = "page.htm" Allowtransparency = "true"> </iframe> </td>
(7) Simpan dua halaman halaman.htm dan See_infomore_iframe1.htm untuk menelusuri efek di browser.