A webdesign technológiái
Ebben a részben beszélgetünk a modern webes tervezés technikai és művészeti megoldásairól. Így kezdődhetünk talán a legfontosabb fogalmakkal, amelyek a száraz design nyelven szólnak
A webhely logikai és fizikai szerkezete
Ábra. 1. A helyszín logikai és fizikai szerkezete összehasonlítása
Nyilvánvaló, hogy a logikai és fizikai struktúrák nem egyezhetnek meg, mivel általában az erőforrás fizikai struktúráját a fájlok elhelyezése kényelmére alapítják. A logikai partíciók sorrendjének többé-kevésbé pontos megőrzése a webhely fizikai felépítésében lehetővé teszi az összetévesztés elkerülését a későbbi anyagok hozzáadásával és frissítésével.
TIPP Javasoljuk, hogy az összes olyan grafikus képet, amely a projekt elemei, egy külön mappába helyezi el, amely a webhely gyökérkönyvtárában található "Képek". Ez a megközelítés lehetővé teszi a más témakörökben tárolt HTML-dokumentumok frissítése grafikák nélkül, ugyanazon grafikus fájlok felhasználása a webhely minden szakaszában, és szükség esetén teljes könyvtárak törlése.
Minden linkeket a honlapon, vagy web-sayterabotali rendesen, minden dokumentumot megfelelően nyitja meg és a böngésző nem ad hibát, amikor hozzáférjen erőforrás szakaszt néhány egyszerű szabályt kell követni, amikor létrehozza a fizikai szerkezetét.
VIGYÁZAT A HTML-dokumentumok és grafikus fájlok neveinek és kiterjesztésének megadása csak latin betűkkel és csak kisbetűs formátumban. Próbáld meg megtartani az általad létrehozott fájlok és könyvtárak nevét akár nyolc karakter hosszúságig.
TIPP A fájlnevek HTML dokumentumokhoz való hozzárendelésekor győződjön meg róla, hogy ezek a nevek "szemantikaiak": akkor könnyen elfelejtheti bármely weboldal tartalmát és célját, ha a fájlnevek például l.htm, 2 néven szerepelnek. htm, 3.htm, stb.
Annak érdekében, hogy a folyamat frissítése a web-oldalak, add-szakaszok, illetve új fejezetek, kap egy eszköze dokumentálja a projekt - bármely táblázatkezelő létre, például a Microsoft Excel, vagy csak a zárható notebook, amelyben írni illő elemeket a fizikai struktúra a projekt, a logikai szerkezetét. Amíg a komponensek száma a honlapon fájlokat viszonylag kicsi, úgy tűnhet, felesleges, de mikor lesz az első két évtizedben a rengeteg html-dokumentumok, grafikák lesz könnyen összezavarodnak, különösen akkor, ha létre egyszerre több projektet. Az ilyen dokumentációs eszköz regisztrálásának egyik példája a táblázatban található. 2.
2. táblázat Példa a projektdokumentációs eszköz regisztrálására
Mindezektől fogva nyilvánvalóvá válik, hogy a webhely fizikai szerkezete rejtve van az erőforrás látogatóitól: csak a logikai struktúrát tudják megfigyelni, ahogyan a navigációs elemek is. Ebből következik egy teljesen logikus következtetés: a navigációs rendszer szerkezete, ha nem teljesen ismételni, legalább a maximálisnak felel meg az Ön által kifejlesztett webhely logikai felépítésének.
A címlap olyan html dokumentum, amely nem tartalmaz értelmes információkat és navigációs elemeket. A fejléc oldalfájl neve index.html, a kezdőlap különféleképpen hívható meg, és egy úgynevezett hiperhivatkozás megszervezése a főoldalról, amely a webhely első elérésekor töltődik be. A főoldal általában az erőforrás tulajdonosának logóját, a látogatószámlálót és a cirill kódolási opciót választja, vagy a webhely angol és orosz változatai közötti választást tartalmazza. Az ilyen oldalakkal ellátott webes erőforrásokra példaként az 1. ábrán látható. 2.
Ábra. 2. Példa egy honlapot tartalmazó honlapra
Amikor olyan oldalakhoz érkezik, amelyek nincsenek fejlécoldalon, először megjelenik az első dokumentum, amely tartalmazza az indító dokumentumot, amely tartalmazza a tartalom, navigációs elemek és esetenként az erőforrásokat alkotó tematikus címek bejelentését. Az 1. ábrán. A 3. ábra olyan webhelyet mutat be, amely nem tartalmaz fejlécoldalt.
Ábra. 3. Példa egy olyan webhelyre, amely nem rendelkezik otthoni oldallal
Ahhoz, hogy a fejlécoldalt használhassa vagy ne használja saját webes projekt létrehozásakor, minden webmester számára ízelítődik. Bármilyen átfogó ajánlás megfogalmazása ebben a kérdésben nehéz, mert a végső döntés elsősorban a művészi preferenciáitól függ, és néha attól a vágytól, hogy az ügyfelek fizetik munkájukat.
Dinamikus és statikus oldalak elrendezése
Egy másik megközelítés az, amikor egy weboldal töredékét tartalmazó láthatatlan táblázat szélessége az aktuális képernyő szélességének százalékában van beállítva. Ha a képernyőfelbontás megnövekedett, akkor a táblázat vízszintesen "nyújt", és a cellákba helyezett összes elem, amely középen vagy az oszlopok élein helyezkedik el, a megállapított algoritmus szerint eltolódik. Mivel a táblázat paraméterei a képernyő beállításaitól függően változnak, ezt a html dokumentum összekapcsolásának elve dinamikusnak mondható. Mindkét megközelítésnek az alább felsorolt előnyei és hátrányai vannak.
Statikus elrendezés
Méltóságát. A dokumentumelrendezési algoritmus egyszerűsége. Az oldal optimalizálása 640x480 képpont felbontású megjelenítés esetén biztos lehet benne, hogy a felhasználó képernyőbeállításainak módosításakor a tervezési elemek nem fognak "lebegni". Ezenkívül ez a változat a legtöbb esetben (bizonyos további feltételek mellett) összekapcsolja a HTML Internet Explorer és a Netscape Navigator böngészőben található html dokumentum megjelenítésének azonosságát.
Hátrányai. Ha a dokumentum nagy képernyőfelbontású számítógépen jelenik meg, észrevehető üres mező marad a képernyő szélein vagy a jobb oldalán.
Dinamikus oldalelrendezés
Méltóságát. A dokumentum a képernyő teljes szélességében húzódik, nincsenek használatlan üres mezők.
Hátrányai. Az oldal elrendezésének és hibakeresésének komplexitása gyakran az ilyen dokumentumoknak a Microsoft Internet Explorer és a Netscape Navigator böngészőben történő nem megfelelően történő megjelenítése.
MEGJEGYZÉS A HTML parancsokban használt képpontok (feltételes pontok) értékei a felhasználó képernyőpontjának fizikai méretét és a monitor típusától függenek.
A statikus és oldalelrendezésű végrehajtó helyek példáit az 1. ábrán mutatjuk be. 4 és 5. A képadatok 800x600 képpontos rögzített felbontásúak.
Ábra. 4. Minta oldal statikus oldalelrendezéssel
A weboldal következő kötelező eleme a navigációs elemek - hiperhivatkozások, amelyek ezt a dokumentumot a webhely más részeihez kapcsolják. navigációs elemek lehetnek szöveg formájában húrok, grafikus objektumok, azaz a gombok, vagy a hatóanyagokat például a Java-kisalkalmazások. Az utóbbi ugyanazokat a gombokat, hogy, ellentétben a „hagyományos” nővérek tudják, hogyan reagálnak az egér mozgását, amely megfelel, ha lebeg az egeret őket bármilyen egyszerű lépésben (bekapcsolja a háttérvilágítást, ami a hatását „rámenős”, megváltoztathatja alakját, és így tovább. d.). Mint már említettem a „Basic” tanait „web-design” helymeghatározó, navigációs elemek olyannak kell lennie, hogy azok mindig „szem előtt”, „kéznél van”, azaz úgy, hogy a felhasználónak nem kell „szél le” vissza oldal , ha a szövegmező több fizikai képernyőt foglal magába, akkor hosszabb időre kereshet más szakaszokra mutató linkeket. A leggyakoribb megközelítés a navigációs elemek elhelyezése az oldal bal szélén.
Így szétbontottuk a weboldal összes fő összetevőjét és lehetséges elhelyezkedését egymáshoz képest. A fentiekben ismertetett komponensek teljes készletét tartalmazó hely elrendezésének példája a 3. ábrán látható. 5. Kiválasztja a navigációs elemek elhelyezkedését a dokumentum bal szélén.
Ábra. 5. Példa egy weboldal elrendezésére a navigációs elemek bal pozícionálásával
A gyakorlatban gyakran vannak weboldalak, amelyek tervezésénél a navigációs elemek a képernyő jobb szélén helyezkednek el. Ebben az esetben a szövegmező balra tolódik, a dokumentum más elemei találhatók, a kombináció maximális esztétikájának elvéből kiindulva. Az ilyen helyszíni végrehajtás egyik példáját az 1. ábrán mutatjuk be. 6.
Ábra. 6. Példa egy weboldal összekötésére a navigációs elemek helyes pozícionálásával
A navigációs elemek nem csak az oldal jobb és bal szélén, hanem a dokumentum tetején is elhelyezhetők. Ez az elrendezés a legmegfelelőbb beállítást, véleményem, hogy hozzon létre honlapok, amely esetben az összes tárgyat oldalak harmónia „illik” a megadott szélessége a táblázat láthatatlan, míg a készítmény az asztal maga lényegesen egyszerűsödik. Az egyetlen hátránya ennek a megközelítésnek nem kell másolni a navigációs vezérlők alján a dokumentumot, mivel a függőleges görgetést oldalak eltűnnek az a képernyő felső részén, és hogy nekik, a felhasználó lesz a „szél le” képernyőn vissza, hogy egyet fog érteni, nagyon kellemetlen. A navigációs elemek legfelső helyével rendelkező oldal elrendezésének példája a 3. ábrán látható. 7.
Ábra. 7. Példa egy olyan weblap elrendezésére, amely a navigációs elemek legmagasabb pozícionálásával rendelkezik
Ábra. 8. Példa egy weboldal "vegyes" elrendezésére