Bingkai - apakah itu? Struktur dan penciptaan bingkai

Isi kandungan:

Bingkai - apakah itu? Struktur dan penciptaan bingkai
Bingkai - apakah itu? Struktur dan penciptaan bingkai
Anonim

Bingkai ialah kawasan pada tapak (tetingkap) di mana halaman web lain kelihatan. Juruweb menggunakan peluang ini untuk mempamerkan halaman utama tapak rakan atau rakan kongsi mereka. Teknik yang sama digunakan untuk memaparkan borang carian dalam kotak dengan hasil di sebelahnya, dsb.

Tetapi kebanyakannya bingkai digunakan dalam penciptaan portal web yang besar, di mana sejumlah besar item menu dan submenu diperlukan. Mereka biasanya berkata tentang orang sedemikian: "laman web pada bingkai". Pengetahuan HTML yang baik diperlukan untuk mencipta sumber sedemikian.

Membuat bingkai dalam pembina tapak web

Sesetengah pembina tapak web menyediakan penjanaan automatik kod sedemikian. Biasanya butang tambah bingkai terletak dalam menu utama program. Mula-mula anda perlu meletakkan kursor di tempat yang betul pada halaman, kemudian klik butang, tetingkap akan dibuka (seperti yang ditunjukkan dalam tangkapan skrin). Di dalamnya, anda boleh menetapkan alamat halaman yang akan dibuka dalam bingkai dan melaraskan dimensi: lebar dan tinggi.

Tetapi kebanyakannya bingkai digunakan dalam penciptaan portal web yang besar, di mana sejumlah besar item menu dan submenu diperlukan. Mereka biasanya berkata tentang orang sedemikian: "laman web pada bingkai". Untuk mencipta sumber sedemikian memerlukan pengetahuan yang baikBahasa HTML.

mencipta bingkai
mencipta bingkai

Dengan bantuan "perkhidmatan" ini, anda boleh membuat beberapa bingkai pada halaman, tetapi anda tidak akan mendapat elemen yang saling berkaitan dengan cara ini.

Bingkai dalam CMS

Dalam banyak program untuk mencipta tapak web, adalah mungkin untuk memasang modul yang sepadan. Contohnya, untuk Joomla, bingkai ialah modul "Pembungkus".

bingkaikannya
bingkaikannya

Ia boleh ditemui dan dibuat dalam panel kawalan CMS Joomla: "Sambungan" - "Pengurus Modul" - "Buat" (butang bulat jingga dengan tanda tambah di dalamnya). Dalam tetingkap timbul, dalam senarai, anda akan melihat modul "Pembungkus".

Jika tiada di sini, ia tidak disertakan. Untuk menggunakannya, anda perlu mengaktifkannya terlebih dahulu di sini: tab "Sambungan", kemudian "Pengurus Sambungan", kemudian tab "Pengurusan". Dan kami sedang mencari dalam senarai yang terbuka, untuk carian pantas dalam medan "Penapis", masukkan perkataan: Wrapper. Di seberang modul ini harus ada ikon hijau dengan tanda semak di dalamnya. Bulatan merah dengan titik di dalamnya bermakna pemalam ini dilumpuhkan.

Selepas prosedur ini, anda boleh kembali ke "Pengurus Modul", buat bingkai dan tetapkan parameternya.

apa itu bingkai
apa itu bingkai

Seperti yang anda lihat dalam gambar, modul membolehkan anda menetapkan: tajuk di atas bingkai, kedudukan modul, pilih halaman tapak yang akan dipaparkan. Dan juga laraskan lebar, ketinggian; tambah bingkai dan sebenarnyapautan ke halaman web. Jika dalam bingkai anda ingin memaparkan halaman utama tapak dengan lebar penuh, maka 100%, ditetapkan secara lalai, tidak akan mencukupi. Anda boleh segera meletakkan 400% dengan selamat. Ketinggian 200 biasanya cukup untuk memaparkan menu teratas halaman. Semua kandungan lain akan kelihatan jika pengguna (pelawat tapak web) menggunakan bar skrol.

Berikut ialah contoh bingkai dalam Joomla.

contoh bingkai
contoh bingkai

Modul Jumla untuk mencipta bingkai adalah sangat mudah dan mudah digunakan. Walau bagaimanapun, keupayaannya adalah terhad, begitu juga dengan keupayaan pembina.

Sejarah dan realiti

Dalam amalan mencipta tapak daripada bingkai, teg ini (aplikasinya) telah lama pudar ke latar belakang. Ia dapat digantikan dengan modul, tetapan dalam program pembina yang menjana kod untuk halaman web tanpa penyertaan pembina tapak. Walau bagaimanapun, dalam beberapa kes ini tidak mencukupi. Contohnya, apabila bingkai ialah struktur kompleks holistik kawasan yang dipaparkan dalam penyemak imbas. Beginilah cara pemilik tapak berstruktur kompleks melihatnya. Penciptaannya hanya digunakan dalam kes yang melampau, kerana tapak bingkai dibuat secara eksklusif dengan bantuan teg khusus.

Tapak berstruktur yang rumit

Bagi mereka, mencipta beberapa bingkai yang saling berkaitan ialah penyelesaian terbaik untuk mengatur kandungan pada halaman sumber. Ini, sebagai peraturan, portal besar, berkembang lebih kukuh setiap tahun.

Bagaimana untuk mencapai hasil yang sama? Bagaimanakah struktur bingkai dibuat?

struktur rangka
struktur rangka

Bagaimanamasukkan bingkai ke dalam kod halaman

Bingkai dalam HTML ditambahkan menggunakan teg:

  • bingkai (untuk tetingkap berasingan);
  • frameset (menggunakannya untuk mencipta keseluruhan struktur);
  • iframe (bingkai "terapung");
  • noframes (sekiranya bingkai tidak dipaparkan dalam penyemak imbas pengguna).

Teg pertama yang ditentukan sentiasa muat dalam sepasang dan. Dan ia menggantikan dan. Dan dengan bantuan atribut yang sesuai, anda boleh melaraskan ciri setiap elemen: nama (nama=), saiz (cols=dan baris=), kehadiran sempadan (sempadan), penampilan bar skrol dan, sudah tentu, pautan ke halaman web untuk dipaparkan.

Variasi reka bentuk

Keseluruhan halaman tapak boleh dibahagikan kepada kawasan. Contohnya, seperti ini:

Kiri Bingkai atas
Betul

Struktur sedemikian (ia dipanggil bersarang) boleh diperoleh dengan menulis atribut cols di dalam teg, yang bermaksud lokasi bingkai secara mendatar dan baris - secara menegak. Seterusnya, tanda=diletakkan dan dimensi ditetapkan. Sebagai contoh, 60%, 40% - peratusan (satu tetingkap akan mengambil 60% daripada ruang pelayar, yang lain, masing-masing, 40%). Atau 100, 200 - nisbah bidang dalam piksel. Saiz salah satu bingkai tidak boleh ditetapkan sama sekali (ia akan ditetapkan secara lalai). Untuk melakukan ini, selepas atau sebelum koma, anda perlu menentukan simbol.

Bersarangsetiap kawasan baharu dilambangkan dengan set bingkai baharu.

Contoh kod:

Perhatikan bahawa dalam contoh kami, untuk bingkai kedua dan ketiga, saiz ditentukan sekali sahaja.

Banyak idea membolehkan anda melengkapkan bingkai. Contoh lokasi mereka dalam tetingkap penyemak imbas boleh diberikan tanpa henti (menukar kod dengan sewajarnya). Walau bagaimanapun, maklumat ini tidak menemui aplikasi praktikal untuk masa yang lama. Bingkai, jika digunakan hari ini semasa membuat tapak, hanya dalam bentuk modul dalam CMS percuma atau dalam bentuk iframe.

Bingkai terapung

tapak pada bingkai
tapak pada bingkai

Pelik kenapa ia mendapat nama sedemikian, perkataan "terbina dalam" lebih sesuai di sini. Bingkai ini dicipta untuk memaparkan kandungan fail. Anda memuat naik mana-mana dokumen atau fail ke pangkalan data, tulis laluan kepadanya menggunakan tag iframe - dan pelawat akan melihat teks fail (video atau imej). Malangnya, penyemak imbas tidak selalu memaparkan kandungan. Untuk melakukan ini, pembina web memasukkan frasa antara teg pembukaan dan penutup: "Penyemak imbas anda tidak memaparkan kandungan."

Sebagai contoh, SEOpult.ru ialah perkhidmatan yang terkenal untuk tuan promosi. Hanya bukan tapak utamanya, tetapi cermin I.seopult.pro, dicipta untuk pelanggan portal. Kod iframe ditulis di sini seperti berikut:

Arahan

. Di manakah tag

  • telah dibuat untuk menentukan item senarai. Disokong oleh semua penyemak imbas.

    Pada halaman cermin itu sendiri, anda boleh melihat perkataan "Arahan" dalam bentuk butang. Mengklik padanya di tengah tetingkap penyemak imbas membuka pembentangan.

    Semuanya besartapak untuk menonton filem dan siri dicipta menggunakan iframe (contohnya, "Imhonet"), serta rangkaian sosial. Malah halaman utama "Yandex" mengandungi teg ini dan lebih daripada satu pasangan.

    Cara menulis iframe

    Anda boleh memuat naik dokumen dalam bentuk tetingkap dengan bar skrol ke mana-mana tempat di tapak. Biasanya tag diletakkan di dalam badan. Melebihi standard

    and, seperti yang ditunjukkan dalam contoh di atas, teg senarai juga boleh digunakan -

    • Atribut ditambahkan pada iframe:

      • lebar (lebar) dan tinggi (tinggi=);
      • penjajaran tepi;
      • inden yang mungkin atau mungkin tidak ditentukan: nilai lalai ialah 6 - ini sudah cukup;
      • menggunakan allowtransparency, anda boleh menetapkan ketelusan kawasan bingkai supaya latar belakang halaman dapat dilihat;
      • serta scr biasa, nama, skrol, jidar.

      Menavigasi dengan iframe

      Kemahiran pembingkaian yang paling menarik ialah menulis kod yang membolehkan anda membuka kandungan dalam tetingkap melalui pautan, seperti yang dilakukan oleh pencipta cermin Seopult, hanya dengan beberapa pautan sekaligus (tersedia pada masa yang sama untuk pengguna pada halaman yang sama).

      Untuk ini, iframe diambil, nama itu juga ditulis di dalamnya melalui nama=. Sebagai contoh, pengepala. Selanjutnya, sebelum itu dalam teg dan pautan ditulis melalui HREF=dengan petunjuk wajib atribut selepasnya. Sebelum menggunakan teg penutup a, inskripsi ditunjukkan yang akan berfungsi sebagai butang pautan. Tag "a" pembukaan dan penutupdisertakan dalam tag p.

      Anda boleh menulis beberapa baris sedemikian dalam kod untuk akhirnya mendapatkan beberapa butang pautan dalam satu baris di tapak, dengan mengklik kandungan berbeza yang akan dipaparkan dalam tetingkap di bawah.

      Kod akan kelihatan seperti ini:

      Siarkan iklan

      Lihat Iklan

      Image
      Image

      Bagaimana ia akan kelihatan di tapak web:

      Cara memasukkan iframe ke dalam tapak Joomla

      Sebagai standard, panel kawalan Joomla mempunyai modul "HTML-code" yang didayakan (sedia untuk digunakan). Dengan itu, anda boleh memasukkan sebarang kod di mana-mana sahaja di tapak. Walau bagaimanapun, dia berdegil mengabaikan kod dengan tag iFrem. Oleh itu, kami akan menggunakan modul Jumi khas.

      Pertama sekali, anda perlu memuat turunnya dari Internet dan memasangnya melalui panel pentadbiran Joomla: "Sambungan" - "Pengurus Sambungan" - "Pilih Fail". Tentukan laluan ke arkib yang dimuat turun dan klik "Muat turun".

      Selepas pemasangan berjaya, pergi ke "Pengurus Modul" dan buat yang baharu. Pilih jenis Jumi. Dalam tetingkap yang terbuka, dalam medan "Kod Tersuai", masukkan iFrem yang disediakan, seperti yang ditunjukkan dalam perenggan sebelumnya artikel. Beri tajuk modul, nyatakan kedudukan penempatan dan halaman tapak. Klik simpan dan semaknya.

      Pelayar dan bingkai

      Semua penyemak imbas popular memaparkan kandungan tetingkap bingkai dengan baik: Chrome, Safari, Firefox, Android, iOS. Internet Explorer dan Opera mempunyai kadar yang sangat tinggi dalam hal ini. Namun tiada jaminanbahawa pelawat ke tapak anda akan melihat kandungan semua tetingkap. Dalam kes ini, anda harus meninggalkan mesej menggunakan tag noframe (pembukaan dan penutup). Anda boleh memasukkan yang berikut ke dalamnya: "Pelayar anda sudah lapuk. Kemas kini versi untuk memaparkan kandungan tapak." Jika penyemak imbas pengguna memaparkan bingkai dengan betul, mereka tidak akan melihat mesej ini.

      Jadi bingkai ialah kawasan atau tetingkap tapak yang mempunyai URLnya sendiri. Digunakan untuk memaparkan beberapa halaman web atau dokumen bebas dalam satu medan penyemak imbas sekaligus, juga mempunyai URL mereka sendiri. Walaupun fakta bahawa bingkai membolehkan anda mengatur tapak yang kompleks dengan baik, mereka tidak digunakan untuk masa yang lama, kecuali untuk iframe. Penggunaan teg ini masih relevan untuk memuatkan pembentangan, pemain video, dokumen teks dalam tetingkap tertentu. Ia digunakan secara aktif oleh sumber web yang besar dan terkenal.

Disyorkan: