Sablonok kezdőknek
A MaxSite CMS-ben csak egy követelmény van a sablonra: a file index.php kötelező jelenléte. A többit a webmester kapja meg. De a hagyományosan a MaxSite CMS sablonok az alapértelmezett sablonból a funkcionalitás egy részét használják. Először is az úgynevezett használatról van szó. típusú fájlokat (adatfájlokat). Vagyis a sablonban nincs szükség ezekre a fájlokra - a rendszer automatikusan kapcsolja őket alapértelmezettként.
A fő különbség az alapértelmezett sablon és más fejlesztések között az, hogy az oroszlánrész a programozásban, a funkcionalitás és az alaptervezés alapértelmezett sablonjainak átvételével foglalkozik. Ez azt jelenti, hogy a webmesternek kész és teljesen funkcionális keretet kínál a fejlesztéseihez.
Új sablonok keretrendszere
Az alapértelmezett sablon bármely új sablon számára lehet csontváz.
Először készítsen új könyvtárat a sablonhoz. Legyen ez egy "mytemplate". Másolja át az "alapértelmezett" tartalmát. Minden további munkát a "mytemplate" -on kell elvégezni.
Sablon kezdeti adatai
Nyissa meg az info.php fájlt, és adja meg a sablon adatait. A fájl tájékoztató jellegű, tehát nincs különbség, amit pontosan megadtál.
Menjen az admin panelre a Webhelysablon lap Alapbeállítások lapján. Aktiválja a sablont.
Most, amikor meglátogatja a webhelyet, megjelenik az új sablonunk.
Sablon összetevők
A webhely moduláris rácsa feltételezi, hogy főbb blokkjainak eltérő funkcionális tartalma lesz. Például a SHAPE blokk lehet egy webhely logója, neve, különböző ikonok és a vízszintes menü alatt.
Egy másik oldalon a SHAPKA ugyanazokat az elemeket tartalmazhatja, csak egy másik sorrendben. A harmadik - csak a menü és a hely neve.
Itt minden esetben a moduláris rács egységes, csak egy blokk töltőkomponensei változnak. És könnyű látni, hogy például a menü nem változik a webhelyről a webhelyre a funkcionális, csak a tervezési változások.
Így a sablon összetevői olyan kész készletfunkcióblokkok, amelyeket a sablonból a sablonhoz minimális változtatásokkal használnak.
Az összetevők az összetevők sablonkönyvtárában vannak. A MaxSite CMS-ben a következő összetevők találhatók:
Úgy gondolják, hogy az összetevők csak két blokkra vonatkoznak: a kupakok és az alagsor. Az összetevők kiválasztása a Sablon testreszabása során történik véletlenszerű sorrendben. A fejlécben és az alagsorban öt elem van.
Alaposan tanulmányozzuk a komponenseket egy kicsit később, amíg megtudjuk, hogy a SHAPE és a CELLS blokkok összetevők segítségével vannak konfigurálva.
CSS sablon stílusok
Ne feledje, hogy még nem írtunk egyetlen kódkódot vagy css-stílusokat, de a sablonunk helyesen jelenik meg. Ez azért van, mert sablonunk az alapértelmezett két stílusfájltól kölcsönöz:
A style-all-mini.css fájl olyan css-keret, amely már tartalmazza az összes olyan alapstílust, amelyet általában a sablonból a sablonhoz használnak minimális módosításokkal. Ezt a fájlt nem kell módosítani vagy másolni a sablonba. Automatikusan csatlakozik és azonnal használatra kész. Például minden css-segítő megtalálható ebben a fájlban. Vannak olyan stílusok is a MaxSite CMS plug-inekből, valamint a típusfájlok kimenetéből.
A var_style.css fájl. éppen ellenkezőleg, olyan stílusokat tartalmaz, amelyek általában változtatásokat igényelnek. Itt például a struktúra, a kapcsolatok színe stb.
Ott van a harmadik add_style.css fájl is. Ez olyan sablonokra vonatkozik, amelyek teljes mértékben használják az alapértelmezett sablon-stílusokat. Például, ha csak néhány elemet szeretnél megváltoztatni, anélkül, hogy átdolgoznod a struktúrát, akkor célszerű az add_style.css használatát.
Melyik css fájl lesz a legfontosabb?
A css-stílusok összekapcsolása nagyon egyszerű:
- A style-all-mini.css mindig kapcsolódik az alapértelmezett sablonhoz. Nem kell másolni.
- Ha a moduláris rács szerkezetének változtatása várható, akkor a var_style.css fájlt használjuk. amelyet az alapértelmezett sablonból kell átmásolni. A (z) add_style.css fájl nem használható (törölve).
- Ha a sablonszerkezet nem változik, és csak apróbb változások vannak, akkor sablonja add_style.css használható. A var_style.css fájl automatikusan az alapértelmezett sablonból kerül felhasználásra.
Ezenkívül egy összetettebb lehetőség is rendelkezésre áll: a var_style.css és add_style.css egyidejű használata a sablonban.
Vegye figyelembe, hogy az alapértelmezett sablon technológia, hogy a kódoló nem kell valahol megadni kapcsolat fájlokat: ha meg akarja használni egy fájlt, akkor egyszerűen helyezzük a sablont - a csatlakozás és a kialakulása helyes kód esik egyenesen a vállára a MaxSite CMS.
Végrehajtási profilok
A profilok olyan hagyományos css fájlok, amelyek a sablon css / profiles könyvtárában találhatók. A css fájlban néhány apró stílust definiálnak a terv módosítására vagy finomítására. Például a font-verdana.css profil teszi a Verdana betűtípust a legfontosabbnak a webhelyen. A paragraph-justify.css profil pedig a formátumhoz igazítja a fő szöveget.
Vannak bonyolultabb témaprofilek is. css. ami komolyan megváltoztatja a sablon kialakítását.
A profilok szelektíven csatlakoznak a sablonbeállításokhoz. Különösen alkalmasak sablonok esetén, amikor bizonyos elemekkel "játszik", vagy az ügyfél még nem döntött a végleges változat megválasztásáról.
Fájlok a sablonhoz való munkához
Ha a sablon megismételni fogja az alapértelmezett funkciókat, akkor minden változás csak a var_style.css (vagy add_style.css) fájlban történik meg.
Az alapértelmezett sablon technológia nagyon rugalmas. Lehetőség van arra, hogy szinte minden elemet megváltoztassunk, mind a helyettesítés, mind az alapértelmezett lehetőségek bővítése révén. Mindezeket a következő leckékben fogjuk megfontolni.
HTML sablon struktúra
Megjegyezzük, hogy a mai napig soha nem említettem a HTML-dokumentum szerkezetét. Ha megpróbálta megtanulni a HTML-t, akkor valószínűleg tudja, hogy bármely HTML a HEAD és a BODY szakaszból áll. A legtöbb CMS-ben a HEAD szakasz kézzel generálódik a webmester által. A MaxSite CMS-ben az alapértelmezett sablonban (és így velünk) a szakasz automatikusan létrejön. Ez garantálja a teljesen helyes html-kódot, ahol viszonylag összetett programkódot alkalmaznak stílusok, parancsfájlok, fájlok, opciók stb. Korábban a webmestereknek gyakran kellett frissíteniük a HEAD fájlokat az alapértelmezett sablonból. Most nem kell aggódnia.
Ezért a sablon teljes HTML szerkezete megtalálható a main.php fájlban. Ez egy PHP-program HTML-beillesztéssel. A PHP kód nem érdekli (még), de nem nehéz megérteni a HTML-címkéket. Egy kis egyszerűsítéssel idézem a teljes HTML-kódot:
Ez a struktúra nagyon hasonlít azokhoz a példákhoz, amelyeket a korábbi leckékben vettünk figyelembe. Ezek a css osztályok előre definiáltak a MaxSite CMS-hez (pontosabban az alapértelmezett sablonhoz), ami garantálja a különböző összetevők, profilok és egyéb css-stílusok közötti kompatibilitást.
Nem kell megváltoztatnod a main.php fájlt!
Ez fontos! Sok webmester hibát követ el a fájl szerkesztésében. Ugyanakkor határozottan kijelenthetjük, hogy ez a struktúra elegendő lesz a meglévő helyek 99% -ához. Figyeljen három pontra:
- A kupakot és a pincét a komponensek határozzák meg. Az összetevők külön könyvtárakban és fájlokban vannak. Ezért minden változtatás ott történik.
- A tartalom egy típusfájlban készült. Általában ezek előre definiált stílusok, osztályok, és a main.php-ben csak a már elkészített html-kód kimenete jelenik meg. A kimenet módosításai a beállítások vagy a típusfájlok (vagy type_foreach-fájlok) szintjén készülnek.
- Az oldalsáv kimenete külön funkció, teljesen automatikus.
Ezért nincs ok a main.php megváltoztatására. A wrap és a szülőblokkok miatt a webmester önkényesen megváltoztathatja a webhely designját css-stílusokkal.
Vegyünk néhány gyakorlati példát.
Módosítsa az oldalsávot
Módosítsuk a tartalomra és a sidebarra a sablonunkat. Mivel megváltoztatjuk a webhely struktúráját, érdemes használni a var_style.css fájlt. Másolja az alapértelmezett sablonról. Törölheti az add_style.css fájlt.
Nyissa meg ezt a fájlt, és keresse meg a tartalom és az oldalsáv megjelenítéséért felelős sorokat:
Az div.main blokk a div.content és a div.sidebar szülője. Itt az ideje, hogy felfrissítsük a korábbi órák ismeretét. A pozíció megváltoztatásához használjuk az egyszerű úszót: balra és úszóra: jobbra.
Oldalsáv és tartalomcsere helyek. Igaz oldalsáv "ragadt" a konténer széléhez. Ez nem meglepő, mert nem határoztuk meg a behúzódobozát. Helyes és kapja meg ezt a kódot:
Módosítsa a böngészõ hátterét
Nézzük meg kissé a böngésző háttérszínét. A BODY címke ennek felel.
Távolítsa el a konténer árnyékát és növelje a margókat
Az árnyékot div.all-wrap segítségével állítjuk be a box-shadow tulajdonság segítségével. Bizonyos böngészők kísérleti szinten támogatják azt, ezért számos előtag jelen van. Szintén adjunk hozzá egy kicsit több margót mindkét élről.
Állítsa be a menüt fekete háttérrel
A fájlnak menü-kérései vannak. A mi esetünkben csak az általános hátteret kell megváltoztatnunk. A div.MainMenu tartalmazza. Ezenkívül változtassa meg a kiemelt elem színét és az elemet lebegéskor (ez egy stílus). Ennek eredményeképpen:
Kép a sapkában
Másolja a image-rand.php összetevőt az alapértelmezett sablonból. A blokkokat a következőképpen építjük:
A képek / fejlécek sablonkönyvtárában több képet másol az alapértelmezett sablonból. Vagy feltöltheti a sajátját.
Ezután átválthat a webhelyre.
Adjon hozzá egy kockát a sapka képéhez
A image-rand.php összetevő megjeleníti a képet IMG-tagként az div.component_header_image blokkban. A keret az IMG számára készült. de a kép nem jön ki a blokkból (emlékezünk a blokk modellre!), csökkentjük a szélességet a szélesség szélén.
Emellett eltávolítjuk az alsó szegélyt a "border-bottom: none" segítségével.
Nézzük a pincét
Távolítsa el a hátteret, és adja hozzá a felső határt.
Adja hozzá a felső és alsó behúzást a böngészőből
A div.all-wrap-nak van egy margója: a 0 auto vízszintesen van középpontba állítva, és a nulla margók a tetején és az alján vannak. 20px-on:
Módosítsa a hivatkozások színét
Itt általában nincs jobb:
Az a kód: lebegés a kapcsolat stílusa lebegés közben.
Nézzük meg a fő betűtípust
Legyen Grúzia méret 12pt. Mivel ez a fő betűtípus, a BODY-ra állítjuk.
Javítsa ki az oldalsáv mezőt
Nem szeretem a bal oldali mezőt.
Korábban speciálisan tettük, de most már nyilvánvalóan felesleges. fix:
A rekordok fejlécei
És az utolsó érintés - megváltoztatja a felvételek címét. Legyen az Arial font. A rekordfejlécek H1.
Most hasonlítsa össze az eredményt a "Twenty Ten" sablondal. amelyet korábban a MaxSite CMS-hez továbbítottam. Száz százalékos véletlen egybeesés, persze nem, és ez a feladat nem állt meg, csak hasonlítsa össze az előző változat munkáját és ezzel.
Mivel a változások a var_style.css fájlban történtek. akkor nem fogom ki az egész sablont, de csak 14-re fogok korlátozni.