Jinsi Ya Kutengeneza Tovuti Ya Kunyoosha

Orodha ya maudhui:

Jinsi Ya Kutengeneza Tovuti Ya Kunyoosha
Jinsi Ya Kutengeneza Tovuti Ya Kunyoosha

Video: Jinsi Ya Kutengeneza Tovuti Ya Kunyoosha

Video: Jinsi Ya Kutengeneza Tovuti Ya Kunyoosha
Video: Jinsi ya Kutengeneza Tovuti (Website) S01 2024, Aprili
Anonim

Wakati wa kubuni tovuti, mara nyingi lazima utatue swali la kimsingi: ukurasa utakuwa tabia gani wakati inafunguliwa na maazimio tofauti ya skrini? Kuna chaguzi mbili hapa - "mpira" (kunyoosha) kurasa za tovuti au tuli. Chaguo la kwanza litajadiliwa. Chochote upendacho kwa mpangilio, msingi kuu wa muundo wa kunyoosha ni usawa wa jamaa.

Jinsi ya kutengeneza tovuti ya kunyoosha
Jinsi ya kutengeneza tovuti ya kunyoosha

Ni muhimu

  • - ujuzi wa HTML;
  • - mpango wa kuhariri html-code.

Maagizo

Hatua ya 1

Chagua faili kuu ya templeti ya tovuti yako, ambayo itaonyesha alama kuu. Inaweza kuwa index.html au index.php file. Moja ya programu bora ya kuhariri templeti ya tovuti inayoonekana ni Macromedia Dreamweawer. Uhariri muhimu utafanywa kwa msingi wa programu hii.

Fungua faili ya templeti au unda mpya kwa amri "Faili" - "Mpya", kitengo - "Ukurasa wa Msingi" - "HTML" au kitengo "Ukurasa wa Dynamic" - "PHP". Hapa tunazingatia kesi ya jumla wakati muundo wa tovuti umerekodiwa katika mojawapo ya faili mbili.

Hatua ya 2

Imekuwa sio siri kwa muda mrefu kuwa kuna aina tofauti za mpangilio - kwenye meza, kwenye div-block na pamoja (meza na vitalu kwa wakati mmoja). Lebo ya html inawajibika kwa mpangilio wa meza

… Katika programu hiyo, imeteuliwa kama "Jedwali" na iko kwenye tabo za fomu za kuona. Kuna mali anuwai katika muundo wa lebo hii. Kwa kunyoosha unahitaji "upana" na "urefu" ("upana" na "urefu" mtawaliwa). Nambari ya meza kuu, ambayo itakuwa msingi wa tovuti ya kunyoosha, imedhamiriwa na usemi:

… … hapa ni muundo wa meza na yaliyomo kwenye wavuti. …

Taja asilimia (100%) kwa kila mali. Hii itafikia athari ya kunyoosha kiotomatiki seli za meza kwenye skrini na jiometri yoyote. Inaweza kuwa mfuatiliaji wa inchi 19 au smartphone - kila mmoja wao atazalisha yaliyomo kwa usahihi.

Hatua ya 3

Ikiwa unahitaji kutaja mawasiliano kati ya seli za meza, kisha tumia mfano ufuatao:

… … yaliyomo kwenye seli 1. … … … yaliyomo kwenye seli 2. …

Hapa utaona kuwa moja ya seli imeainishwa na upana wa 30% ya kila kitu ambacho kimefafanuliwa kwa meza yenyewe. Hesabu rahisi inaonyesha kuwa 100% -30% = 70% imebaki kwa seli ya pili. Kumbuka kwamba katika kesi hii moja ya seli za meza haipaswi kuwa na sifa ya upana iliyowekwa. Kivinjari kitafanya mahesabu yote peke yake na itanyoosha meza kwa seli. Yaliyomo ndani ya meza pia yatanyoosha na kupungua kwa usahihi kwenye skrini tofauti.

Hatua ya 4

Katika hali na mpangilio wa div, vizuizi vya vitambulisho vimenyooshwa kwa upana kwa upana kamili wa skrini na kufuata moja baada ya nyingine kutoka kushoto kwenda kulia, kutoka juu hadi chini. Ili kuboresha jiometri yao, tengeneza darasa la kitambulisho cha CCS au kitambulisho (ID), ambacho unabainisha, kwa mfano, sifa na / au kwa jamii ya saizi na nafasi ya sanduku (Sanduku). Usisahau kuunganisha mtindo uliowekwa na faili ya markup ya tovuti na kumfunga darasa (ID) kwa lebo unayotaka. Kawaida huwekwa mwanzoni mwa hati, ikifafanua jiometri yote ya wavuti ya baadaye:

… … yaliyomo kwenye wavuti. …

Au kama hii:

… … yaliyomo kwenye wavuti. …

Nambari ya sheria ya CSS itakuwa kama ifuatavyo:

… darasa langu {

upana: 30%;

urefu: 50%;

}

#myID {

upana: 30%;

urefu: 50%;

}

Ilipendekeza: