Kapag nagdidisenyo ng mga site, madalas mong malutas ang isang pangunahing tanong: ano ang magiging pag-uugali ng pahina kapag binuksan ito ng iba't ibang mga resolusyon sa screen? Mayroong dalawang mga pagpipilian dito - "goma" (lumalawak) na mga pahina ng site o static. Tatalakayin ang unang pagpipilian. Anuman ang iyong kagustuhan para sa layout, ang pangunahing prinsipyo ng disenyo ng kahabaan ay kaugnay sa kakayahang sumukat.
Kailangan iyon
- - kaalaman sa HTML;
- - programa para sa pag-edit ng html-code.
Panuto
Hakbang 1
Piliin ang pangunahing file para sa template ng iyong site, na magpapakita ng pangunahing markup. Maaari itong index.html o index.php file. Ang isa sa pinakamahusay na software sa pag-edit ng template ng visual site ay ang Macromedia Dreamweawer. Ang kinakailangang pag-edit ay gagawin batay sa programang ito.
Buksan ang template file o lumikha ng bago sa pamamagitan ng utos na "File" - "Bago", kategorya - "Base page" - "HTML" o kategorya na "Dynamic na pahina" - "PHP". Isinasaalang-alang namin dito ang pangkalahatang kaso kapag ang istraktura ng site ay naitala sa eksaktong isa sa dalawang mga file.
Hakbang 2
Matagal nang hindi lihim na mayroong iba't ibang mga uri ng layout - sa mga talahanayan, sa mga div-block at pinagsama (mga talahanayan at bloke nang sabay). Mananagot ang tag na html para sa layout ng talahanayan
Tumukoy ng isang porsyento (100%) para sa bawat pag-aari. Makakamit nito ang epekto ng awtomatikong pag-uunat ng mga cell ng talahanayan sa mga screen na may anumang geometry. Maaari itong isang 19-pulgada na monitor o isang smartphone - bawat isa sa kanila ay tamang gagawa ng nilalaman.
Hakbang 3
Kung kailangan mong tukuyin nang eksakto ang pagkakasulat sa pagitan ng mga cell ng talahanayan, pagkatapos ay gamitin ang sumusunod na halimbawa:
| … … ang nilalaman ng cell 1. … | … … ang nilalaman ng cell 2. … |
Makikita mo rito na ang isa sa mga cell ay tinukoy na may lapad na 30% ng lahat na tinukoy para sa mesa mismo. Ipinapakita ng isang simpleng pagkalkula na 100% -30% = 70% ay mananatili para sa ikalawang cell. Tandaan na sa kasong ito ang isa sa mga cell ng talahanayan ay hindi dapat magkaroon ng itinakdang lapad na katangian. Gagawa ng browser ang lahat ng mga kalkulasyon sa sarili nitong at iunat nang tama ang talahanayan gamit ang mga cell. Ang nilalaman sa loob ng mga talahanayan ay mag-iunat din at mag-urong nang tama sa iba't ibang mga screen.
Hakbang 4
Sa isang sitwasyon na may layout ng div, ang mga bloke ng tag ay nakaunat sa pamamagitan ng default sa buong lapad ng screen at sundin ang isa pagkatapos ng isa pa mula kaliwa hanggang kanan, mula sa itaas hanggang sa ibaba. Upang pinuhin ang kanilang geometry, lumikha ng isang klase ng CCS o identifier (ID), kung saan tinukoy mo, halimbawa, ang mga katangian at / o para sa kategorya ng laki at posisyon ng kahon (Kahon). Huwag kalimutang i-link ang tinukoy na istilo sa markup file ng site at igapos ang klase (ID) sa nais na tag. Kadalasan inilalagay ito sa pinakadulo simula ng script, na tumutukoy sa lahat ng geometry ng hinaharap na site:
… … nilalaman ng site. …
O tulad nito:
… … nilalaman ng site. …
Ang code para sa panuntunan sa CSS ay ang mga sumusunod:
… myclass {
lapad: 30%;
taas: 50%;
}
#myID {
lapad: 30%;
taas: 50%;
}
