Internet, Desain web

Pigura iku apa? Struktur lan nggawe pigura

Pigura minangka area ing situs (jendhela) ing kaca web liyane sing katon. Webmaster nggunakake kesempatan iki kanggo nuduhaké kaca utama situs kanca utawa mitra. Tèks sing padha digunakake kanggo nampilake wangun golèk ing jendhela lan asilé, lan sateruse.

Nanging pancene bingkai digunakake kanggo nggawe portal web gedhe, ing ngendi akeh item menu lan submenu sing dibutuhake. Bab iki biasane ngomong: "Situs ing bingkai." Kanggo nggawe sumber kasebut mbutuhake kawruh sing apik babagan basa HTML.

Nggawe pigura ing situs kasebut

Sawetara perancang situs nyedhiyani generasi otomatis kodhe kasebut. Biasane tombol kanggo nambah pigura ing menu utama program. Pisanan sampeyan kudu nglebokake kursor ing panggonan sing bener ing kaca, banjur klik tombol, jendhela bakal mbukak (kaya sing katon ing gambar). Ing kono, sampeyan bisa nyetel alamat kaca sing bakal mbukak ing pigura, lan nyetel dimensi: lebar lan dhuwur.

Nanging pancene bingkai digunakake kanggo nggawe portal web gedhe, ing ngendi akeh item menu lan submenu sing dibutuhake. Bab iki biasane ngomong: "Situs ing bingkai." Kanggo nggawe sumber kasebut mbutuhake kawruh sing apik babagan basa HTML.

Kanthi bantuan "layanan" iki, sampeyan bisa nggawe sawetara pigura ing kaca, mung unsur sing sambungake supaya sampeyan ora bisa.

Bingkai ing CMS

Ing pirang-pirang program kanggo nggawe situs, sampeyan bisa nginstal modul sing cocog. Contone, kanggo pigura Joomla, iki minangka modul "Wrapper".

Bisa ditemokake lan digawe ing panel kontrol CMS Jumla: "Ekstensi" - "Modul Manager" - "Nggawe" (tombol babak werna oranye kanthi tandha plus ing jero). Ing jendela pop-up, ing dhaptar, sampeyan bakal weruh modul "pambungkus".

Yen ora ana ing kene, ora kalebu. Kanggo nggunakake, sampeyan kudu ngaktifake dhisik ing kene: tab "Ekstensi", banjur "Pengelola Tambahan", banjur tab "Ngatur". Lan katon ing dhaptar sing mbukak, sampeyan bisa ngetik tembung: Wrapper kanggo panelusuran cepet ing "Filter" lapangan. Nganggo modul iki kudu dadi lambang ijo kanthi jero tik. Bunder abang karo titik sing bakal nuduhake plugin iki mati.

Sawise prosedur iki, sampeyan bisa bali menyang "Manager Module", nggawe pigura lan atur parameter.

Minangka sampeyan bisa ndeleng ing gambar, modul iki ngidini sampeyan nyetel: header ndhuwur pigura, posisi modul, pilih kaca situs sing bakal ditampilake. Lan uga nyetel jembar, dhuwur; Nambah pigura lan tautan nyata menyang kaca web. Yen sampeyan pengin nampilake kaca utama situs kanthi jembaré kanthi cepet, banjur 100%, kanthi standar, ora cukup. Sampeyan bisa langsung nyelehake kanthi aman 400%. Altitud 200 biasane cukup kanggo nampilake menu ndhuwur kaca. Kabeh isi liyane bakal katon yen pangguna (pengunjung situs) nggunakake garis gulung.

Punika conto apa pigura ing Jumla.

Modul Jumla kanggo nggawe pigura iku trep banget lan gampang digunakake. Nanging, kemampuane diwatesi, kaya kemampuan desainer.

Sejarah lan kasunyatan

Ing laku nggawe situs saka bingkai, tag iki (aplikasi) wis suwe diisi menyang latar mburi. Padha bisa ngganti modul, setelan ing program konstruktor sing nggawe kode kanggo kaca web tanpa partisipasi saka site builder. Nanging, ing sawetara kasus iki ora cukup. Contone, nalika pigura minangka struktur kompleks integral ing area sing ditampilake ing browser. Iki minangka pamilike sing ndeleng kompleksitas situs sing wis kabentuk. Ing panemuné mung ana ing kasus sing ekstrem, amarga situs-situs Framey digawe sacara eksklusif karo bantuan tag khusus.

Situs rumit sing rumit

Kanggo wong-wong mau, nggawe pirang-pirang pigura sing saling gegandhèngan minangka solusi optimal kanggo ngatur isi ing kaca sumber kasebut. Iki, minangka aturan, portal gedhe, tambah saben taun luwih lan akeh.

Carane entuk asil sing padha? Carane nggawe struktur pigura?

Cara nulis pigura menyang kode kaca

Bingkai ing HTML ditambahake nggunakake tag:

  • Frame (kanggo jendhela siji);
  • Frameset (kanthi bantuan sawijining struktur kabeh digawe);
  • Iframe (pigura "ngambang");
  • Noframes (senadyan pigura ora ditampilake ing browser pangguna).

Tag sing kasebut sing sepisanan mesthi cocog karo pasangan lan . Lan ngganteni lan . Lan kanthi bantuan atribut sing tepat, sampeyan bisa nyetel ciri-ciri saben unsur: jeneng (jeneng =), ukuran (cols = lan = row), wates (wates), garis gulir lan, mesthi, pranala menyang kaca web kanggo nampilake.

Variasi Desain

Kaca sakabèhé situs bisa dipérang dadi wilayah. Contone, iki:

Ngiwa

Pigura ndhuwur

Tengen

Struktur iki (kasebut diarani nested) bisa diduweni kanthi nyetel atribut cols ing tag kasebut, nuduhake posisi horizontal frame, lan baris - vertikal. Sabanjure yaiku = tanda lan dimensi ditulis. Contone, 60%, 40% - persentasi (siji jendhela bakal njupuk 60% saka papan browser, sing liyane, 40%). Utawa 100, 200 - ukuran ukuran ing piksel. Ukuran siji pigura ora bisa disetel ing kabeh (bakal diinstal kanthi gawan). Kanggo nindakake iki, sampeyan kudu nemtokake * sawise koma utawa sawise koma.

Ing pasangan iki, frameset nyathet saben pigura kanthi paramèter: src = http: // site / article / 143778 /% 2C, banjur ing quotes a link diwenehi menyang kaca web lan jeneng = mawa header (contone, Frame 1).

Sasi saben area anyar diarani frameset anyar.

Conto kode:

Wigati yèn ing conto kita, kanggo pigura 2 lan 3, ukuran ditulis mung sapisan.

Akeh zadumok ngijini sampeyan ngeksekusi frame. Conto lokasi ing jendhela browser bisa digawa tanpa henti (ngganti kode sing sesuai). Nanging, informasi iki durung digunakake ing wektu sing suwe. Bingkai, yen digunakake saiki nalika nggawe situs, banjur mung minangka modul ing CMS gratis utawa ing wangun iframe.

Pigura ngambang

Iku aneh, yen dheweke duwe jenenge, tembung "built-in" luwih cocok karo kene. Pigura iki digawe kanggo nampilake isi file. Sampeyan ngemot menyang database apa wae document utawa file, nggunakake tag saka ayframe kanggo ndhaftar path kasebut - lan pengunjung bakal ndeleng teks file (video utawa gambar). Sayange, browser ora tansah nampilake isi kasebut. Kanggo nindakake iki, panuntun web bakal nglebokake tembung antarane tag pambuka lan tutup: "Browser sampeyan ora nampilake isi."

Contone, Seopult.ru minangka layanan sing kondhang kanggo master promosi. Ora ana situs utama, nanging cithak I.seopult.pro, digawe kanggo klien portal. Kodhe ing ayframe ditulis ing kene:

  • Pandhuan . Endi tag
  • digawé kanggo netepake item dhaptar. Didhukung dening kabeh browser.

    Ing kaca pangilon dhewe sampeyan bisa ndeleng tembung "Instruction" ing wangun tombol. Nalika sampeyan ngeklik, sawijining presentation mbukak ing tengah jendhela browser.

    Kabeh situs utama kanggo nonton film lan serial digawe kanthi bantuan ayframes (umpamane, "Imhonet"), uga jaringan sosial. Malah kaca utama "Yandex" ngandhut label iki, lan ora ana siji wae.

    Cara prescribe iframe

    Ngunggah menyang situs dhokumèn kanthi wangun jendela kanthi baris gulung bisa ana ing ngendi waé. Biasane tag dicithak ing jero awak. Saliyane standar

    lan , kaya sing katon ing conto ing ndhuwur, tag dhaptar

  • uga bisa digunakake.

    Atribut ditambahake menyang atribut:

    • Jembar (jembar) lan dhuwur (dhuwur =);
    • Sejajang ing align pinggiran;
    • Indentasi, sing ora bisa diresepake: Nilai standar 6 - cukup cukup;
    • Kanthi allowtransparency, sampeyan bisa nyetel transparansi area pigura supaya latar mburi kaca katon;
    • Ditambah maneh, jeneng, nggulung, tapel wates.

    Navigasi karo bantuan saka pesawat udara

    Ketrampilan paling menarik ing nggawe pigura yaiku nulis kode sing ngidini sampeyan mbukak isi ing jendhela kanthi referensi, soko sing digawe saka pangilon Seopult, mung adoh karo sawetara tautan (bebarengan karo pangguna ing siji kaca).

    Kanggo maksud iki, ayframe dijupuk, jeneng kasebut liwat jeneng = uga ditambahake. Contone, zagolovok. Sabanjure sadurunge ana ing label lan ditulis nganggo HREF = http: // site / article / 143778 /% D1% 81 dening diwajibake sawise padha atribut target = zagolovok. Sadurunge nggunakake tag tutup, prasasti bakal dituduhake, sing bakal dadi tombol link. Tag "a" dibukak lan ditutup ing tag p.

    Ana sawetara baris ing kode sing bisa digunakake kanggo njupuk sawetara tombol ing baris ing situs, ngeklik ing macem-macem isi bakal ditampilake ing jendhela ngisor.

    Kode bakal katon kaya iki:

    Kirim iklan panjenengan

    Ndeleng iklan