Bingkai - apa itu? Struktur dan pembuatan bingkai

Daftar Isi:

Bingkai - apa itu? Struktur dan pembuatan bingkai
Bingkai - apa itu? Struktur dan pembuatan bingkai
Anonim

Bingkai adalah area di situs (jendela) di mana halaman web lain terlihat. Webmaster menggunakan kesempatan ini untuk menampilkan halaman beranda situs teman atau mitra mereka. Teknik yang sama digunakan untuk menampilkan formulir pencarian di kotak dengan hasil di sebelahnya, dll.

Tetapi kebanyakan frame digunakan dalam pembuatan portal web besar, di mana banyak item menu dan submenu diperlukan. Mereka biasanya mengatakan tentang orang-orang seperti itu: "situs web di bingkai". Pengetahuan yang baik tentang HTML diperlukan untuk membuat sumber daya seperti itu.

Membuat bingkai di pembuat situs web

Beberapa pembuat situs web menyediakan pembuatan kode semacam itu secara otomatis. Biasanya tombol tambah bingkai terletak di menu utama program. Pertama, Anda perlu meletakkan kursor di tempat yang tepat di halaman, lalu klik tombolnya, sebuah jendela akan terbuka (seperti yang ditunjukkan pada tangkapan layar). Di dalamnya, Anda dapat mengatur alamat halaman yang akan terbuka di bingkai, dan menyesuaikan dimensi: lebar dan tinggi.

Tetapi kebanyakan frame digunakan dalam pembuatan portal web besar, di mana banyak item menu dan submenu diperlukan. Mereka biasanya mengatakan tentang orang-orang seperti itu: "situs web di bingkai". Untuk membuat sumber daya seperti itu membutuhkan pengetahuan yang baikBahasa HTML.

membuat bingkai
membuat bingkai

Dengan bantuan "layanan" ini, dimungkinkan untuk membuat beberapa bingkai pada halaman, tetapi Anda tidak akan mendapatkan elemen yang saling berhubungan dengan cara ini.

Frame di CMS

Dalam banyak program untuk membuat situs web, dimungkinkan untuk menginstal modul yang sesuai. Misalnya, untuk Joomla, sebuah frame adalah modul "Wrapper".

membingkainya
membingkainya

Itu dapat ditemukan dan dibuat di panel kontrol CMS Joomla: "Ekstensi" - "Manajer Modul" - "Buat" (tombol bulat oranye dengan tanda plus di dalamnya). Di jendela pop-up, dalam daftar, Anda akan melihat modul "Wrapper".

Jika tidak ada di sini, tidak disertakan. Untuk menggunakannya, Anda harus mengaktifkannya terlebih dahulu di sini: tab "Ekstensi", lalu "Manajer Ekstensi", lalu tab "Manajemen". Dan kami mencari di daftar yang terbuka, untuk pencarian cepat di bidang "Filter", masukkan kata: Wrapper. Di seberang modul ini harus ada ikon hijau dengan tanda centang di dalamnya. Lingkaran merah dengan titik di dalamnya berarti plugin ini dinonaktifkan.

Setelah prosedur ini, Anda dapat kembali ke "Module Manager", buat bingkai dan atur parameternya.

apa itu bingkai?
apa itu bingkai?

Seperti yang Anda lihat pada gambar, modul memungkinkan Anda untuk mengatur: judul di atas bingkai, posisi modul, pilih halaman situs yang akan ditampilkan. Dan juga sesuaikan lebar, tinggi; tambahkan bingkai dan sebenarnyatautan ke halaman web. Jika dalam bingkai Anda ingin menampilkan halaman utama situs dengan lebar penuh, maka 100%, yang disetel secara default, tidak akan cukup. Anda dapat segera menempatkan 400% dengan aman. Ketinggian 200 biasanya cukup untuk menampilkan menu teratas halaman. Semua konten lain akan terlihat jika pengguna (pengunjung situs) menggunakan scrollbar.

Berikut adalah contoh dari apa itu frame di Joomla.

contoh bingkai
contoh bingkai

Modul Jumla untuk membuat bingkai sangat nyaman dan mudah digunakan. Namun, kemampuannya terbatas, begitu pula kemampuan konstruktornya.

Sejarah dan kenyataan

Dalam praktik membuat situs dari bingkai, tag ini (aplikasinya) telah lama memudar ke latar belakang. Mereka dapat digantikan oleh modul, pengaturan dalam program konstruktor yang menghasilkan kode untuk halaman web tanpa partisipasi pembuat situs. Namun, dalam beberapa kasus ini tidak cukup. Misalnya, ketika bingkai adalah struktur kompleks holistik dari area yang ditampilkan di browser. Beginilah cara pemilik situs yang terstruktur secara kompleks melihatnya. Pembuatannya hanya digunakan dalam kasus ekstrim, karena situs bingkai dibuat secara eksklusif dengan bantuan tag khusus.

Situs yang terstruktur secara kompleks

Bagi mereka, membuat beberapa bingkai yang saling berhubungan adalah solusi terbaik untuk mengatur konten di halaman sumber daya. Biasanya, ini adalah portal besar, yang semakin kuat setiap tahun.

Bagaimana mencapai hasil yang sama? Bagaimana struktur bingkai dibuat?

Struktur rangka
Struktur rangka

Bagaimanamasukkan bingkai ke dalam kode halaman

Frame dalam HTML ditambahkan menggunakan tag:

  • frame (untuk jendela terpisah);
  • frameset (menggunakannya untuk membuat keseluruhan struktur);
  • iframe (bingkai "mengambang");
  • noframes (jika frame tidak ditampilkan di browser pengguna).

Tag yang ditentukan pertama selalu cocok dengan sepasang dan. Dan itu menggantikan dan. Dan dengan bantuan atribut yang sesuai, Anda dapat menyesuaikan karakteristik setiap elemen: nama (nama=), ukuran (cols=dan baris=), keberadaan batas (border), tampilan bilah gulir dan, tentu saja, tautan ke halaman web untuk ditampilkan.

Variasi desain

Seluruh halaman situs dapat dibagi menjadi beberapa area. Misalnya seperti ini:

Kiri Bingkai atas
Kanan

Struktur seperti itu (disebut bersarang) dapat diperoleh dengan menulis atribut cols di dalam tag, yang berarti lokasi bingkai secara horizontal, dan baris - secara vertikal. Selanjutnya, tanda=diletakkan dan dimensi ditentukan. Misalnya, 60%, 40% - persentase (satu jendela akan mengambil 60% dari ruang browser, yang lain, masing-masing, 40%). Atau 100, 200 - rasio aspek dalam piksel. Ukuran salah satu frame tidak dapat diatur sama sekali (akan diatur secara default). Untuk melakukan ini, setelah atau sebelum koma, Anda perlu menentukan simbol.

Bersarangsetiap area baru dilambangkan dengan frameset baru.

Contoh kode:

Perhatikan bahwa dalam contoh kita, untuk frame kedua dan ketiga, ukurannya hanya ditentukan sekali.

Banyak ide memungkinkan Anda menyelesaikan bingkai. Contoh lokasi mereka di jendela browser dapat diberikan tanpa henti (mengubah kode yang sesuai). Namun, informasi ini belum menemukan aplikasi praktis untuk waktu yang lama. Frame, jika digunakan saat ini saat membuat situs, hanya berupa modul dalam CMS gratis atau dalam bentuk iframe.

Bingkai mengambang

situs di bingkai
situs di bingkai

Aneh kenapa mendapat nama seperti itu, kata "built-in" lebih cocok di sini. Frame ini dibuat untuk menampilkan isi dari sebuah file. Anda mengunggah dokumen atau file apa pun ke database, menulis jalurnya menggunakan tag iframe - dan pengunjung akan melihat teks file (video atau gambar). Sayangnya, browser tidak selalu merender konten. Untuk melakukan ini, pembuat web memasukkan frasa di antara tag pembuka dan penutup: "Browser Anda tidak menampilkan konten."

Misalnya, Seopult.ru adalah layanan terkenal untuk master promosi. Hanya bukan situs utamanya, tetapi cermin I.seopult.pro, yang dibuat untuk klien portal. Kode iframe ditulis di sini sebagai berikut:

Petunjuk

. Dimana tag

  • dibuat untuk mendefinisikan item daftar. Didukung oleh semua browser.

    Di halaman cermin itu sendiri, Anda dapat melihat kata "Instruksi" dalam bentuk tombol. Mengkliknya di tengah jendela browser akan membuka presentasi.

    Semua besarsitus untuk menonton film dan serial dibuat menggunakan iframe (misalnya, "Imhonet"), serta jejaring sosial. Bahkan halaman utama "Yandex" berisi tag ini, dan lebih dari satu pasang.

    Cara menulis iframe

    Anda dapat mengunggah dokumen dalam bentuk jendela dengan bilah gulir ke tempat mana pun di situs. Biasanya tag ditempatkan di dalam tubuh. Di luar standar

    dan, seperti yang ditunjukkan pada contoh di atas, tag daftar juga dapat digunakan -

    • Atribut ditambahkan ke iframe:

      • lebar (lebar) dan tinggi (tinggi=);
      • perataan tepi align;
      • indentasi yang mungkin atau mungkin tidak ditentukan: nilai default adalah 6 - ini cukup;
      • menggunakan allowtransparency, Anda dapat mengatur transparansi area bingkai sehingga latar belakang halaman dapat terlihat;
      • plus scr yang sudah dikenal, nama, scrolling, border.

      Navigasi dengan iframe

      Keahlian pembingkaian yang paling menarik adalah menulis kode yang memungkinkan Anda membuka konten di jendela melalui tautan, yang dilakukan oleh pembuat cermin Seopult, hanya dengan beberapa tautan sekaligus (tersedia secara bersamaan untuk pengguna di halaman yang sama).

      Untuk ini, iframe diambil, nama juga ditulis di dalamnya melalui name=. Misalnya, tajuk. Selanjutnya, sebelum tag dan tautan ditulis melalui HREF=dengan indikasi wajib atribut setelahnya. Sebelum menggunakan tag penutup a, sebuah prasasti ditunjukkan yang akan berfungsi sebagai tombol tautan. Tag "a" pembukaan dan penutupanterlampir dalam tag p.

      Anda dapat menulis beberapa baris seperti itu dalam kode untuk mendapatkan beberapa tombol tautan dalam satu baris di situs, dengan mengklik konten yang berbeda yang akan ditampilkan di jendela di bawah.

      Kodenya akan terlihat seperti ini:

      Posting iklan

      Lihat Iklan

      Image
      Image

      Bagaimana tampilannya di situs web:

      Cara menyisipkan iframe ke situs Joomla

      Sebagai standar, panel kontrol Joomla memiliki modul "kode-HTML" yang diaktifkan (siap digunakan). Dengan itu, Anda dapat memasukkan kode apa pun di mana saja di situs. Namun, dia dengan keras kepala mengabaikan kode dengan tag iFrem. Oleh karena itu, kita akan menggunakan modul Jumi khusus.

      Pertama-tama, Anda perlu mengunduhnya dari Internet dan menginstalnya melalui panel administratif Joomla: "Ekstensi" - "Manajer Ekstensi" - "Pilih File". Tentukan jalur ke arsip yang diunduh dan klik "Unduh".

      Setelah instalasi berhasil, buka "Module Manager" dan buat yang baru. Pilih jenis Jumi. Di jendela yang terbuka, di bidang "Kode Kustom", masukkan iFrem yang disiapkan, seperti yang ditunjukkan pada paragraf artikel sebelumnya. Beri judul modul, tentukan posisi penempatan dan halaman situs. Klik simpan dan periksa.

      Browser dan bingkai

      Semua browser populer menampilkan konten jendela bingkai dengan baik: Chrome, Safari, Firefox, Android, iOS. Internet Explorer dan Opera memiliki tingkat yang sangat tinggi dalam hal ini. Namun tidak ada jaminanbahwa pengunjung situs Anda akan melihat isi semua jendela. Dalam hal ini, Anda harus meninggalkan pesan menggunakan tag noframe (membuka dan menutup). Anda dapat memasukkan yang berikut ke dalamnya: "Peramban Anda kedaluwarsa. Perbarui versi untuk menampilkan konten situs." Jika browser pengguna merender frame dengan benar, mereka tidak akan melihat pesan ini.

      Jadi bingkai adalah area atau jendela situs yang memiliki URL sendiri. Digunakan untuk menampilkan beberapa halaman web atau dokumen independen dalam satu bidang browser sekaligus, juga memiliki URL sendiri. Terlepas dari kenyataan bahwa bingkai memungkinkan Anda untuk mengatur situs yang kompleks dengan baik, mereka sudah lama tidak digunakan, kecuali untuk iframe. Penggunaan tag ini masih relevan untuk memuat presentasi, pemutar video, dokumen teks di jendela tertentu. Ini secara aktif digunakan oleh sumber daya web yang besar dan terkenal.

Direkomendasikan: