Utasítás, hogy hozzon létre egy honlapot MODx
Ez a honlap célja elsősorban azok számára, akik szeretnének webdesign. Akkor megismerkedhetnek az anyagok a helyszínen épület, a tervezéstől a tervezés, szerkezet, és befejezve a promóciós kész oldalakat. Hamarosan a helyén kell lennie egy nagy gyűjtemény a hasznos ötleteket, tippeket, órák, szolgáltatások, és link segítségével, mint egy tapasztalt web-fejlesztők és a kezdő mesterek.
Olvassa részletesen, hogy mi ez a blog
Hamarosan a blog lesz a cikksorozat létrehozása „oldalon a semmiből”, „Tedd a rugalmas, funkcionális blog”, „Internet-üzlet a CMS / CMF MODx» és még sok más. Stay tuned.
Szóljatok, ha új cikkek az oldalon. RSS Feed.
Nos, most már fokozatosan lépni több érdekes dolgot, mégpedig tervezés integrált MODx CMS. Telepítette és beállította a tartalomkezelő rendszer, és most itt az ideje, hogy megtalálja a megfelelő tervezés a jövőben a helyszínen. Annak érdekében, hogy Ön a feladatot, csináltam egy válogatást az erőforrások ingyenes sablonokat. ahol akkor biztos, hogy ki lehet választani valamit a maguk számára.
Tehát nem vesztegeti az idejét keres kész sablonok modeks, írtam egy jegyzetet 100.000 sablonokat MODx. amellyel akkor is olvasni, ha még nem tette meg.
Ahogy megállapodás kezdődik munkánk MODx, akkor hozzon létre egy kis weboldalt. Találok egy megfelelő sablont, ami számunkra megfelelő elvégzéséhez a feladat. Ez lesz a minta OS-templates.com. Nagyon aranyos, friss sablon nyugati stílusban. Azt szervezett különféle oldalak:
- Kezdőlap jQuery galéria
- belső oldalon két oszlopban további navigációs
- oldal egyik oszlop a teljes minta szélessége
A letöltött archív 3 mappák és 3 HTML-fájlt.
A mappában «képek» képeket tartalmaz használt design a helyén, a «script» mappát -script csatlakoztatott jQuery galéria a honlapon, és a «stílus» mappa tartalmazza a CSS-fájlok, amelyek meghatározzák a megjelenése a sablont.
HTML-fájlok az archívumban ez semmi, mint a HTML jelölést mindhárom típusú oldalak: index.html - Home, stílus-demo.html - belső oldal két oszlopban további navigáció, teljes width.html - oldalt az egyik oszlop teljes szélességében a minta. Aki elfelejtette, hogy hogyan néz ki ezeket az oldalakat, gyorsan megy a demo oldalon a sablon és a felső menüben, először kattintson az elemre «Style-demo», majd rákattint az elemre «teljes szélességű».
Minden sablon által használt fájlokat a rendszer tárolja a mappa: eszközök / sablonokat. A helyi tárhely a teljes elérési utat ebben a mappában van egy: z: \ home \ helyén \ www \ eszközök \ sablonokat. Már három mappa, akkor nem kell hozzányúlni csak a mappát «menedzser», amelyben a rendszer sablonok vannak tárolva. A többi lehet távolítani. És hozzon létre egy mappát sablont jövőnk, például - «hely», amely kivonat tartalmát letöltött archív a sablont.
Az admin felületen kövesse a lapok: Elements → Vezérlő elemek → sablonok. Itt fogunk, hogy új vagy meglévő sablonokat. Látni fogja, hogy a két sablon már létre. Demo sablon «MODxhost» kiveheti, így nem szálka, és fogunk foglalkozni változás «Minimal Sablon» Template, amely, mint te is emlékszel a leckét A rendszer létrehozása, hoztunk létre, mint az alapértelmezett sablon.
Törléséhez vagy szerkesztéséhez először rá kell kattintani a linkre, hogy a sablon nevét. Eltávolítása után a bemutató minta szerkesztésének megkezdéséhez «Minimal Sablon».
Nézzük először hozzunk létre egy sablont a honlap, a honlapon jQuery galéria. Ehhez adja meg a sablon nevét, amikor szerkeszti a sablont a „Template Name” és a „Leírás” mezőben - egy rövid leírást, a félreértések elkerülése végett, ha nem lesz sok sablonokat. A „sablon kód (HTML)» kell beszúrni HTML-elrendezés a honlap, már ezt a jelölést jelzi az index.html fájlt, amit csak a közelmúltban hozott a mappában eszközök / templates / oldalon. Ezért egyszerűen másolja ezen a területen az összes tartalom az index.html fájl megfosztották minden volt ott. Az alábbi képen látható, hogy betöltöttem ezeken a területeken, akkor nem pontosan ugyanaz. Kitöltése után kattintson a „Mentés” gombra az oldal tetején.
Bár ez nem tűnik nagyon meggyőző, mert van, hogy megtörje egészen include fájlokat stílusok, képek és írások így vagyunk Nézzük kijavítani őket. Felhívjuk figyelmét, hogy az egér kurzort a legtetején a lap már megjelenített oldal vezérlőpulton fogok összpontosítani, hogy később, de most az a fontos, hogy jót sablon feltérképezése, amit újra követi a sablon szerkesztése oldal: Elements → Elemek kezelése → Sablonok → Home.
Elkezdjük megváltoztatni a fájlok és képek a sablonban.
Kezdetben felírni alap URL honlapunkon, hogy figyelmeztesse a helytelen felismerés relatív útvonallal. Ebből a célból a címke
előírja a következőket:Mivel almappákat változott tervezési integráció a rendszer, minden szempontból meg kell adni az alábbi konstrukciót.
Óvatosan adjunk hozzá, ne hagyja ki semmit, hogy ne menjen vissza, hogy újra és újra meg kell változtatni a módot, ahogyan vannak stílusok, szkriptek és képek.
Például itt van, hogy az út néz összekötő CSS stílusokat az eredeti:
De már a változás után:
Kiváló, azzal a feladattal, amit megbirkózott kitűnően. Ha valami nem működik, nem tudok letölteni a módosított fájlt, és másolja a tartalmát „sablon kód (HTML)» szerkesztése közben a honlapon sablon.
Ebben az integráció a honlap kialakítása befejeződött, már csak további konfigurációt. Mondd, Ismer rendszer, amelyben a minta megtestesül olyan gyorsan? Én egy ilyen CMS még nem teljesült.
A következő leckében megtanuljuk, hogyan kell létrehozni a dinamikus menük, és megismerkedhetnek az alapelveket design MODx. Most megtudhatod, milyen darabokat, és hogyan kell dolgozni velük. Addig azt javaslom nézni a következő video a mai leckét.
Méret: 3.3 MB. Idő: 2 perc.