Webhelyek tervezésénél gyakran meg kell oldania egy alapvető kérdést: milyen lesz az oldal viselkedése, amikor különböző képernyőfelbontásokkal nyitják meg? Két lehetőség van itt: "gumi" (nyújtó) oldalak vagy statikus. Az első lehetőséget megvitatják. Bármi is legyen az elrendezés preferenciája, a nyújtás fő tétele a relatív méretezhetőség.
Szükséges
- - a HTML ismerete;
- - program a html-kód szerkesztésére.
Utasítás
1. lépés
Válassza ki a webhelysablon fő fájlját, amely tükrözi a fő jelölést. Lehet index.html vagy index.php fájl. Az egyik legjobb vizuális webhelysablon-szerkesztő szoftver a Macromedia Dreamweawer. A szükséges szerkesztés a program alapján történik.
Nyissa meg a sablonfájlt, vagy hozzon létre egy újat a "Fájl" - "Új", kategória - "Alapoldal" - "HTML" vagy "Dinamikus oldal" - "PHP" paranccsal. Itt azt az általános esetet vesszük figyelembe, amikor a webhely felépítését pontosan a két fájl egyikében rögzítik.
2. lépés
Régóta nem titok, hogy különböző típusú elrendezések léteznek - táblákon, div-blokkon és kombináltan (táblák és blokkok egyszerre). A html címke felelős a táblázat elrendezéséért
Adjon meg minden tulajdonsághoz százalékot (100%). Ez el fogja érni azt a hatást, hogy az asztalcellákat automatikusan kinyújtja bármilyen geometriájú képernyőn. Ez lehet 19 hüvelykes monitor vagy okostelefon - mindegyikük megfelelően reprodukálja a tartalmat.
3. lépés
Ha pontosan meg kell adnia a táblázatcellák közötti megfelelést, akkor használja a következő példát:
| … … az 1. cella tartalma. … | … … a 2. cella tartalma. … |
Itt látni fogja, hogy az egyik cella meg van adva 30% szélességgel mindannak, ami magának a táblának van megadva. Egy egyszerű számítás azt mutatja, hogy 100% -30% = 70% marad a második cellában. Ne feledje, hogy ebben az esetben az egyik tábla cellában nem lehet beállítani a width attribútumot. A böngésző minden számítást elvégez, és helyesen nyújtja az asztalt cellákkal. A táblázatokon belüli tartalom megfelelő módon megnyúlik és zsugorodik a különböző képernyőkön.
4. lépés
Div elrendezésű helyzetekben a címke blokkok alapértelmezés szerint a képernyő teljes szélességére megnyúlnak, és egymást követik balról jobbra, fentről lefelé. Geometriájuk finomítása érdekében hozzon létre egy CCS osztályt vagy azonosítót (ID), amelyben megadja például az attribútumokat és / vagy a doboz (Box) méret- és pozíciókategóriáját. Ne felejtse el összekapcsolni a megadott stílust a helyjelölõ fájllal, és az osztályt (ID) a kívánt címkéhez kötni. Általában a szkript legelején helyezkedik el, meghatározva az összes jövőbeni webhely geometriáját:
… … webhely tartalma. …
Vagy így:
… … webhely tartalma. …
A CSS-szabály kódja a következő lesz:
… az osztályom {
szélesség: 30%;
magasság: 50%;
}
#az én személyi azonosítóm {
szélesség: 30%;
magasság: 50%;
}
