Web készségek leckék
Hozzon létre első weboldalt
- Ebben a leckében egy konkrét példát teremt vizsgálati helyszín alapján egy oldalt, amely már példaként az 5. osztályba (lásd. „PC World”, №5 / 04) a tanulmány CSS (1.).
- Készítünk egy fájlstruktúrát ehhez.
- Tervezzünk minden oldalt egyetlen stílusban: egy navigációt, az elemek helyét a képernyőn, az oldal címét, az oldal tartalmát. Ehhez hozzon létre egy oldalsablont.
- Egyetlen stílustáblát használunk a webhely létrehozásához (lásd a "PC World" leckét, No. 5/04).
- Megtanuljuk, hogyan csatlakoztassuk a navigációt és az összes ismétlődő elemet az SSI technológiával és az irányelv tartalmazza.
- Állítsa be a webszervert.
A helyszín kialakításának alapjai
Ha már létrehozta az oldalt az első szakaszban, akkor azonnal több feladat lesz. Néhányat felsorolunk:
1. Gondold át a webhely logikai felépítését - annak tartalmát, szakaszát, navigációs rendszerét. Ne tegye szükségtelen - "átmenő" oldalakat.
Egy illetékes struktúra, egy érthető navigációs rendszer lehetővé teszi a látogatók számára, hogy gyorsan megkapják a szolgáltatott információkat.
A gyakorlatban ez csak az egyik legnehezebb feladat, különösen a meglehetősen nagy helyek esetében. Rendszerint a világháló felhasználója információra van szüksége, nem gyönyörű képekről, és minél előbb, annál jobb. Az idő pénz! Mind szó szerint, mind figuratív értelemben. Végül is sokan használják az internetet a saját zsebükből.
Ha sikerült ezt megtennie, akkor a látogató a tiéd lesz. Visszatér a webhelyére többször, és talán ajánl egy erőforrást valamelyik barátjának vagy kollégájának.
2. Hozzon létre egy érdekes tervet. A jó design egyáltalán nem szép kép. A webhely szinte grafikus képek nélkül is elkészíthető.
Ez először az információ kényelmes elhelyezkedését és a navigációt az oldalon. Másodszor, a színek kiválasztása a helyszín tervezéséhez. Ne válasszon élénk színeket - lehetetlen ilyen oldalakat hosszú ideig megnézni. Ugyanezen okból ne használjon sok animált képet. Harmadszor, válasszon ki egy könnyen olvasható betűtípust a képernyőn, ne használjon sok különböző betűtípust az oldalon, egy vagy kettő elég. Kerülje az egzotikus betűtípusokat, valószínűleg a felhasználónak nincsen a számítógépen. Negyedszer, ne töltsön túl oldalakat képekkel, a feladata olyan oldalak létrehozása, amelyeket a felhasználó a lehető leggyorsabban lát. Kövesse a mottót: minél jobb az oldal, annál jobb! (Nem javasoljuk, hogy az oldalak több mint 50 KB-t tartalmazzanak a grafikával együtt.) Természetesen az egyedi oldalakon kivételek is lehetségesek.) Mint tudják, a legtöbb "oldal súlyt" a képek adják. Ne feledje, hogy látogatta meg ezeket vagy más forrásokat. Kattintson a linkre és a. Várjon hosszan, amikor megjelenik az oldal vagy a kép tartalma. És mi volt a reakciód? Valószínűleg irritáció.
Természetesen technikailag lehetséges mindezt megvalósítani.
4. Ha lehetséges, minimalizálja a webhely létrehozását és további támogatását. Nagyon fontos, hogy később könnyű új szakaszokat felvenni és feltölteni a meglévőket. A kezdeti szakaszban olyan technológiát kell kifejleszteni, amely lehetővé teszi a webhely létrehozását és további támogatását. Természetesen az összes pillanatban egyszerre nem számolunk, mint általában, tapasztalattal jön. De ezen a leckében néhányat nézünk rájuk.
Az 1. ábra a weboldalt mutatja. Tegyük fel, hogy ez egy cég weboldalának "vázlata". Amint az 1. ábrából látható. 1, csak a jobb oldali rész változik meg, ahol az oldal tartalma kerül. A többi - a felső, a bal (navigáció) és az alsó - változatlanok maradnak, ugyanolyanok a webhely összes oldalán.
Ez az elrendezés kényelmes a látogatók számára. A bal oldali navigációs rész segítségével navigálhat az oldalakon, míg a navigáció mindig ugyanazon a helyen marad - a bal oldalon.
Ezen az oldalon létrehozunk egy sablont, és innen fogjuk létrehozni az oldal többi oldalát: a jobb oldali rész megváltoztatása (az oldal tartalmának elhelyezése ott), a fájlt különböző nevekkel és különböző könyvtárakban tároljuk. De először létrehozunk egy fájlstruktúrát webhelyünkre.
A webhely fájlszerkezete
A webhely fájlszerkezetének megfelelő és átgondolt szervezése időt takarít meg további támogatására és karbantartására. Ezenkívül könnyebben navigálhat a weboldalt létrehozó fájlok nagy számában. Ez különösen fontos a nagy webhelyeken, vagy ha a webhely nem nagyon nagy (mint például a mi példánkban), de azt tervezi, hogy tovább fejleszti és új szakaszokat ad hozzá.
- A webhely első (kezdő) oldala rendszerint a név: index.html (az Apache webszerverhez); default.htm (a Microsoft IIS-hez).
- A többi fájl véletlenszerűen van megadva, de ajánlott ezt a dokumentum céljának vagy tartalmának, például aboutme céljának megfelelően. html és mycat.html. Adja meg a mappákat és fájlokat az értelmes neveknek (ne adjon olyan nevet, mint a 12345.html).
- A könyvtárak és fájlok megnevezése csak a fő angol kódolásban megengedett.
- A képek jobban elhelyezhetők egy külön könyvtárban (/ képek / vagy / images /). Ha sok a grafika, hozzon létre alkönyvtárakat ebben a könyvtárban.
A weboldal esetfájlszerkezetére javasolt, az 1. ábrán látható. 2.
Ábra. 2. A webhely fájlszerkezete
Nézzük meg közelebbről:
És még néhány ajánlást a könyvtárak és fájlok megnevezésére.
- A fájlok és könyvtárak elnevezése kisbetűs.
Ezek a különbségek a különböző operációs rendszerű fájlok elnevezésekor. Például a Unix esetében a fájlok és a könyvtárak megkülönböztetik a kis- és nagybetűket. A Windows rendszerben a regiszter nem számít (kb. Html és about.html - a Windows esetében ugyanaz a fájl, a Unix esetében pedig két különböző fájl).
A gyakorlatban gyakran fordulnak elő olyan hibák, amikor a helyi számítógépen lévő fájlokat áthelyezik a szerverre, ahol a Unix telepítve van.
Tegyük fel, hogy a cég székhelye a szolgáltatónál található. Rendszerint (a leggyakoribb opció) van telepítve a Unix OS és az Apache webszerver.
A számítógépén van egy másolata a webhelyről. Valószínűleg van Windows. Miután végrehajtotta a szükséges változtatásokat és kiegészítéseket a helyi verzióhoz, a fájlokat áthelyezi a működő weboldalra - a szolgáltatóhoz. Itt veszélyben vagy. Úgy tűnik, hogy minden működik. Mindent ellenőriztél és teszteltél. Miért, miután a fájlok áthelyezése a webhelyen nem lát néhány képet, a linkek nem működnek?
Most, ha egy új profilt, hozzon létre egy külön könyvtárat a rész nevét, angol (vagy átírás - orosz szavakat latin betűkkel), nyissa meg a sablont, helyezze azt a tartalmát, és mentse a fájlt a lemezre egy előre létrehozott könyvtárba.
A kiszolgáló gyökér és a kezdőlap fogalma
Mielőtt tanulmányoznánk az SSI technológiát, megismerjük két nagyon fontos koncepciót: a kiszolgáló gyökerét és a kezdő oldalt.
A gyökérkönyvtár vagy a kiszolgáló gyökere. Jelölve: / (perjel, elülső perjel). Ez a könyvtár a számítógép merevlemezén, amelynek belsejében van a webhely teljes tartalma - a fájl struktúrája.
Miután megkapta ezt a kérést, a gyökérkönyvtárban lévő kiszolgáló megkeresi a webschool könyvtárat, és benne van a webschool.htm fájl.
A gyökérkönyvtár a kiszolgáló beállításaiban van megadva. Alapértelmezésben az IIS C: Inetpubwwwroot, Apache, ha beállít egy alapértelmezett, - C: Program FilesApache GroupApachehtdocs (Windows).
A kiszolgáló gyökerét a lemezen lévő bármelyik könyvtárra konfigurálhatja, természetesen, feltéve, hogy rendszergazdai jogosultságai vannak rajta.
Melyik oldalt definiálja a kiszolgáló beállításai?
Az IIS alapértelmezés szerint ez az alapértelmezett.htm, az Apache - index.html. Ezt a fájlt gyakran indexnek hívják.
A fentiek alapján azt javaslom, hogy nevezze el a bemeneti fájlt a könyvtárban az indexfájl nevével. Ha például a webhelynek van egy szakasza a cégről, akkor az IIS esetében logikus, hogy az Apache és az alapértelmezett.htm esetében a címtár / company_company / és a szakasz kezdõoldalát - index.html nevezze.
Szerver oldali zárványok. Vegye bele az irányelvet, és hozzon létre egy oldalsablont
Kezdjük tanulmányozni a Server Side Includes (SSI) technológiát. Az SSI az egyik első szervertechnológia. Az 1. leckében ismerkedtünk meg egy statikus és dinamikus oldal fogalmával. A statikus oldal "tiszta" html-kódokból áll. Már megtanultuk, hogyan hozzunk létre ilyen oldalakat.
Az irányelvek bárhol megtalálhatók az oldalon. És az asztalcellában és a szakaszban
és másokban. Ennek megfelelően az irányelv helyén a kiszolgáló a végrehajtás eredményét beszúrja.
Mielőtt megkezdené az SSI-technológia szintaxisának megfontolását, konfiguráljuk webszerverünket:
1) a kiszolgáló gyökere;
2) SSI támogatás az .html és .htm kiterjesztésekhez. Ez azt jelenti, hogy a kiszolgálónak ezeket a bővítményeket tartalmazó fájlokat az ügyfélnek történő elküldés előtt ellenőrizni fogja a szerver által végrehajtott utasítások (irányelvek).
Az Apache kiszolgáló konfigurálása
Hol található a httpd.conf fájl?
- Ha telepítette az alapértelmezett kiszolgálót, akkor a C: Program FilesApache mappában található a GroupApacheconf httpd.conf. Megnyithatja közvetlenül a Jegyzettömbben.
- Ha elfelejti a telepítés helyének elérési útját, használja a StartoSearchoFor Files vagy Folders keresést. A keresősávban írja be a httpd.conf parancsot.
- Ezt a fájlt a Windows főmenüjében szerkesztjük. StartoProgramsoApache HTTP Servero Konfigurálja az Apache ServeroEdit Az Apache httpd.conf konfigurációs fájlt (5. ábra)
A httpd.conf konfigurációs fájlban a .html és .htm kiterjesztésekkel rendelkező fájlok konfigurációját konfiguráljuk a webhely gyökereinek és a kiszolgálói záróelemek támogatásának (6. ábra).
Ábra. 6. A kiszolgáló gyökér és SSI támogatásának konfigurálása az Apache httpd.conf konfigurációs fájlban
A csomópont gyökérkönyvtárának konfigurálása (/)
Jegyezd meg a közvetlen sávokat (ellentétben a Windows ellentétes sávjaival).
A szerverbeállításokban megadott könyvtárban létrehozza a webhely fájlszerkezetét.
Az SSI támogatás beállítása
- Keresse meg a sorokat:
- Ezek után hozzá kell adni (# nélkül):
Az SSI támogatása a kiterjesztésekkel rendelkező fájlokhoz van telepítve
.html és .htm. Hozzáadta a dokumentum típusát AddType szöveg / html .html (htm). Az AddHandler irányelv aktiválja a kiszolgáló által kiszámított szerveroldali kiszolgálót.
És még egy csípés. Keresse meg a sort:
Opciók indexek KövetésMindenlinkekMultiViews
Az Opciók mappában adjon hozzá egy szóközt. Az így kapott vonalnak így kell kinéznie:
Opciók indexek KövetésMindenlink MultiViews Tartalmazza
Fontos! A változtatások érvénybe lépéséhez a szervert újra kell indítani.
Ehhez a Windows főmenüjében válassza a következőt: Start? Programok? Apache HTTP Server? Ellenőrzés Apache Server? Restart.
Ha mindent helyesen csináltál, akkor a kiszolgáló sikeresen meghiúsul. Hibák esetén ellenőrizze a szintaxist, győződjön meg róla, hogy a gyökérkönyvtár megfelelően van megadva. Talán elfelejtette létrehozni a lemezen először.
Most a szerverünk készen áll a kiszolgáló befogadására.
Ha az IIS-t munkaszervernek választja, a cikk végén olvassa el a telepítési és konfigurálási folyamatot az 1. függelékben.
SSI szintaxis
Néhány megjegyzés a szintaxisról:
Ez fontos az Apache kiszolgáló számára (például az IIS-kiszolgáló egyaránt működik együtt egy térrel és anélkül is).
Alapvető SSI irányelvek: tartalmazza az irányelveket
A legáltalánosabb irányelv magában foglalja - egy dokumentum tartalmát egy másikba helyezi be.
Ide tartozik: az irányelv neve; virtuális - az attribútum neve; /ssi/top.html - a fájl elérési útját a gyökér a szerver, amelynek tartalmát helyezünk a html-oldalt.
Az irányelv tartalmazhat fájl vagy virtuális attribútumokat. Ebben a példában a dokumentum, amelynek tartalmaznia irányelv egészül top.html tartalmát a fájl, amely az SSI mappában. Ha a virtuális attribútumot használja, az értéke a fájl elérési útja a kiszolgálóról. A szerver gyökér elérési útvonala gyakran előnyösebb (lásd a "Path Definition" oldalsávot.)
Az irányelvek tartalmazhatnak több dokumentumot is.
Az 1. ábrán. A 7. ábra példát mutat arra, hogy az irányelv tartalmaz egy dokumentum sablont. Az eredeti oldal a 3. ábrán látható. 1.
Mint fent említettük, a webhely összes oldala egyetlen formában van. Ennek megfelelően egy oldalsablon létrehozásához csak egyedi elemeket hagyunk el: oldalnév