Veidojot vietnes, jums bieži ir jāatrisina pamatjautājums: kāda būs lapas darbība, kad tā tiks atvērta ar atšķirīgu ekrāna izšķirtspēju? Šeit ir divas iespējas - "gumijas" (izstiepšanas) vietnes lapas vai statiskas. Pirmais variants tiks apspriests. Neatkarīgi no izkārtojuma izvēles, stieptā dizaina galvenais princips ir relatīvā mērogojamība.
Tas ir nepieciešams
- - zināšanas par HTML;
- - programma HTML koda rediģēšanai.
Instrukcijas
1. solis
Vietnes veidnei atlasiet galveno failu, kas atspoguļos galveno marķējumu. Tas var būt index.html vai index.php fails. Viena no labākajām vizuālo vietņu veidņu rediģēšanas programmatūrām ir Macromedia Dreamweawer. Nepieciešamā rediģēšana tiks veikta, pamatojoties uz šo programmu.
Atveriet veidnes failu vai izveidojiet jaunu, izmantojot komandu "Fails" - "Jauns", kategorija - "Bāzes lapa" - "HTML" vai kategorija "Dinamiskā lapa" - "PHP". Šeit mēs aplūkojam vispārīgo gadījumu, kad vietnes struktūra tiek ierakstīta tieši vienā no diviem failiem.
2. solis
Jau sen nav noslēpums, ka ir dažādi izkārtojumu veidi - uz tabulām, uz div blokiem un kombinēti (tabulas un bloki vienlaikus). HTML tabula ir atbildīga par tabulas izkārtojumu
Katram īpašumam norādiet procentus (100%). Tas ļaus automātiski štancēt galda šūnas uz jebkura ģeometrijas ekrāna. Tas var būt 19 collu monitors vai viedtālrunis - katrs no tiem pareizi atveidos saturu.
3. solis
Ja jums precīzi jānorāda atbilstība starp tabulas šūnām, izmantojiet šo piemēru:
| … … 1. šūnas saturs. … | … … 2. šūnas saturs. … |
Šeit jūs redzēsiet, ka viena no šūnām ir norādīta ar 30% platumu no visa, kas noteikts pašai tabulai. Vienkāršs aprēķins parāda, ka otrajai šūnai paliek 100% -30% = 70%. Atcerieties, ka šajā gadījumā vienai no tabulas šūnām nedrīkst būt iestatīts atribūts width. Pārlūks pats veiks visus aprēķinus un pareizi izstieps tabulu ar šūnām. Tabulās esošais saturs dažādos ekrānos arī pareizi izstiepsies un saruks.
4. solis
Situācijā ar div izkārtojumu tagu bloki pēc noklusējuma tiek izstiepti visā ekrāna platumā un seko viens otram no kreisās uz labo pusi, no augšas uz leju. Lai uzlabotu to ģeometriju, izveidojiet CCS klasi vai identifikatoru (ID), kurā norādiet, piemēram, atribūtus un / vai lodziņa (lodziņa) lieluma un pozīcijas kategoriju. Neaizmirstiet saistīt norādīto stilu ar vietnes marķēšanas failu un piesaistīt klasi (ID) vēlamajam tagam. Parasti tas tiek ievietots pašā skripta sākumā, nosakot visu turpmāko vietnes ģeometriju:
… … vietnes saturs. …
Vai arī šādi:
… … vietnes saturs. …
CSS kārtulas kods būs šāds:
… mana klase {
platums: 30%;
augstums: 50%;
}
#myID {
platums: 30%;
augstums: 50%;
}
