A tartalom
lecke Nehézség: Közepes
Ma ismét beszélni a szerkesztését a standard Joomla sablon. Az előző leckében beszéltünk, hogyan kell dolgozni kódlapot és stíluslapok. valamint létrehozott egy kalap honlapunkon. Ma elemzik ugyanilyen fontos kérdés - hogyan lehet díszíteni a tartalmát az oldal (fejezetek, bekezdések, képek). Megtanulják, hogyan kell dolgozni betűtípusok és válasszon egy szép betűtípust oldalunkat.
Így a képeket az oldalon
Először is nézzük foglalkozik a képeket az oldalon, és indítsa el a teljes szöveget az anyag képet.
Alapértelmezésben a teljes szöveg az anyag kép jeleníthető meg a bal vagy a jobb szélén, de mi van, ha volt egy vágy, hogy azt pontosan a közepén? Ezt meg kell írni a saját CSS stílusokat képek feldolgozása.
Nincs nagy dolog, azt látjuk, az egység, amelyben találjuk a képet úgy kell meghatározni, hogy ez a szükséges osztályokat és az írás stílus. A Protostar sablon kép teljes szövegét az anyag a blokk
Ahhoz, hogy megfelelően gondoskodjon pontosan ezt a képet anélkül, hogy ez befolyásolná a többi kell működni a fentiekben felsorolt osztályok valamelyikébe. Ahhoz, hogy keresse meg a teljes szöveg az anyag kép közepén az oldalt írni a következő stílusok a CSS fájlban:
Most, ha a változások mentéséhez és látni az eredményeket, azt látjuk, hogy a kép az oldal közepére.
így miniatűrök
A következő lépés az, hogy gondoskodjon kis képek, melyeket a plugin által Mavik Miniatűrök (ha használja azt, és ha nem, akkor én nagyon ajánlom). Őszintén problémák szinte nem fordul elő, de miért ez a Protostar sablon egy adott kijelző kisméretű kép a mobileszközökön - megjelenésükkor kívül a tartalom területen. Annak érdekében, hogy megszabaduljon ez a probléma vonatkozik rájuk a következő stílusokat:
Felhívtuk a figyelmet arra, hogy a szélessége a keret, amely egy miniatűr a kép nem lehet nagyobb, mint a szélessége a tartalom területen. A keret célja a hivatkozások formájában osztályok «áttekintő» és «ZoomIn». Ezután elmondja a böngészőnek, hogy a magassága a kép automatikusan beállítható, hogy elkerüljék a nem kívánt változásokat a kép arányait.
Media kérés @media (max-width: 420px) azt jelzi, hogy a beágyazott ott stílusok kizárólag készülékekhez szélessége 420 pixel, és a képernyőn kevesebb.
Ennek eredményeképpen kapunk itt az eredménye:
formázott szöveget
A fő összetevője olyan hely, többek között a szöveg és a képek képekkel rájöttek Most regisztráció a szöveget az oldalon.
Meg lehet érteni, mint a változás a paramétereket, mint például a méret, szín alatt a design a szöveg, igazítás, stb és a változó a font. Kezdésként nézzük meg a betűtípust.
A betűtípus módosításához a honlapon egy adott CSS tulajdonság:
Betűtípusok lehet egy vesszővel elválasztott listáját, így ha a felhasználó nem állítja be az első font, amelyeket használni fognak, miután a következő, és így tovább.
Ez a megközelítés a saját jó, de lehet menni a másik irányba - a betűtípusok letölthetők az online szolgáltatás (CDN-hosting). Ebben az esetben, akkor biztos lehet benne, hogy ezt a betűtípust fog működni bármilyen számítógépen. Mindössze annyit kell tennie, hogy csatlakoztassa a kedvenc betűtípus és használja a saját, de itt meg kell, hogy legyen óvatos, hogy ne töltse túl sok betűtípus, ez hatással lehet az oldal betöltése sebesség.
Az egyik ilyen online szolgáltatások ingyenes betűtípusok Google Web Fonts. Szolgáltatás betűtípusok a Google jó, hogy tisztán látni a rendelkezésre álló betűtípusok, válaszd ki a kedvenc és a terhelés őket a helyszínen. Minden egyszerű, megy a Google Web Fonts oldal, és keresse meg a betűtípus, amit szeretnék:
A Google Web Fonts oldal lehetővé teszi a testre a kijelző a rendelkezésre álló betűtípusok a saját, például választani csak orosz betűtípusokat, család stb Is, akkor látható, hogy egy font fog kinézni a rá vonatkozó különféle stílusok, mint a méret, stílus, és így tovább.
Miután a betűtípus dönt, kattintson az ikonra, „+” (ugyanúgy több betűkészletet lehet kiválasztani). Alján a pop-up ablak jelenik meg az oldalt, ami egy kis kód szükséges, hogy a kiválasztott betűtípus az oldalon:
Ebben a szakaszban, mi érdekli két sornyi kód, amely a Google nyújtotta, ezek befolyásolhatják a kiválasztott betűtípusok. Az első sor van beillesztve az index sablon fájl címkék között
. Az én esetemben ez így néz ki:index.php állítólag hasonlít a következő:
A második sorban van behelyezve a stíluslap. vagy a teljes dokumentumot (oldal), vagy az egyes tételek külön-külön (cím, bekezdés, lista, stb.) Például, én választottam mindössze három font Alice. Homár (kurzív) és az Open Sans és ezeket alkalmazta a különböző elemek.
Kezdetben a teljes szövegét Alice választottam font, és elrendelte az alábbiak szerint:
Ezután külön alkalmazott címei más betűtípus:
Stílusok a CSS fájlban bárhol elhelyezhető tetszik, ha meg szeretné adni a kiemelt egy adott stílus, akkor meg kell adni egy paramétert a szimbólum «fontos!» «;».
Így csatlakozhat a gyönyörű betűtípusok anélkül, hogy aggódnia, hogy nem lehet a látogató.
Más a szöveg tulajdonságai
Most pedig írjon néhány több stílus a szöveg honlapunkon, ezáltal vonzóbbá és olvasható.
Kezdeni a szöveg méretének növekedése 16 pixel bekezdések és listák. Ehhez mi írjuk a következőket:
Felhívjuk figyelmét, hogy a lista a stílust kell alkalmazni, hogy ne az összes, hanem csak azokra, amelyek a tartalom területen (.item oldalas), akkor készült, hogy ezeket a stílusokat alkalmazni a menü a honlapon, és zsemlemorzsa, ami viszont épül alapján a lista.
Most add bekezdések és listák behúzva alá, és az összehangolás a szöveg az oldalon szélesség:
Most már tudja menteni a változtatásokat, és látni, mi van. És mi van a következő - Oldal szöveg vonzóbbá és könnyebben olvasható, és összeköti azonnal látható.
Ennek eredményeként a CSS fájlban kódot kapom a következő:
Természetesen ez nem egy teljes listát az összes stílust, amelyet alkalmazni lehet a szöveget az oldalon, de ez is elég.
Ennél a lecke véget ért, és a következő leckében fogunk beszélni, hogy hogyan tudod a design a jobb oldali menüben és a honlap navigációs (zsemlemorzsa), valamint, hogy egy aranyos gomb „Up”, ami a lap tetején.