Bekezdések, felsorolások, címsorok

A forráskód használatáról bővebben a Bootstrap és használata részben lesz szó. A bold, dőlt, aláhúzás, áthúzás nem igényel különösebb magyarázatot. Az alábbiakban a szövegek elrendezését és a címfokozatok használatát mutatom be „vakszövegen”.

Alapértelmezett formázás a bekezdés. Címsorokat a felső ikonsor végén látható lehulló menüből lehet beállítani. Elég a sorba beleállni a kurzorral, nem kell kijelölni a szöveget. Fontos, hogy a címsor sortöréssel (enter) záródjon, ellenkező esetben több sor is címmé alakul. A preformatted használata nagyon idegen az oldal arculatától, ne használd! Sehol ne legyen sorkizárt szöveg, mert a különböző eszközökön az oldal átrendeződik, és elég csúnya eredményt adhat.

Megjegyzés:    A H1-es címet ne használd! A termékek neve és a cikkek címének fokozata. A Google az oldal feltérképezésekor a címfokozatokat is figyelembe veszi, a H1, H2 kiemelt jelentőségű, a kisebb fokozatokat kevésbé fontosnak értékeli.

Előre zárt szöveg

A leggyakoribb szövegformázás
Ez egy régóta elfogadott tény, miszerint egy olvasót zavarja az olvasható szöveg miközben a szöveg elrendezését nézi. A Lorem Ipsum használatának lényege, hogy többé-kevésbé rendezettebb betûket tartalmaz, ellentétben a Tartalom helye, Tartalom helye-féle megoldással. Sok desktop szerkesztõ és weboldal szerkesztõ használja a Lorem Ipsum-ot mint alapbeállítású szövegmodellt, és egy keresés a lorem ipsum-ra sok félkész weboldalt fog eredményezni.

Középre zárt szöveg

Idegen az oldaltól, csak táblázatban használd!
Ez egy régóta elfogadott tény, miszerint egy olvasót zavarja az olvasható szöveg miközben a szöveg elrendezését nézi. A Lorem Ipsum használatának lényege, hogy többé-kevésbé rendezettebb betûket tartalmaz, ellentétben a Tartalom helye, Tartalom helye-féle megoldással. Sok desktop szerkesztõ és weboldal szerkesztõ használja a Lorem Ipsum-ot mint alapbeállítású szövegmodellt, és egy keresés a lorem ipsum-ra sok félkész weboldalt fog eredményezni.

Hátra zárt szöveg

Ez az elrendezés is kerülendő, csak táblázatban használd!
Ez egy régóta elfogadott tény, miszerint egy olvasót zavarja az olvasható szöveg miközben a szöveg elrendezését nézi. A Lorem Ipsum használatának lényege, hogy többé-kevésbé rendezettebb betûket tartalmaz, ellentétben a Tartalom helye, Tartalom helye-féle megoldással. Sok desktop szerkesztõ és weboldal szerkesztõ használja a Lorem Ipsum-ot mint alapbeállítású szövegmodellt, és egy keresés a lorem ipsum-ra sok félkész weboldalt fog eredményezni.

Sorkizárt szöveg

Ne használd, mert ilyen csúnya nagy szóközök lehetnek!
Ez egy régóta elfogadott tény, miszerint egy olvasót zavarja az olvasható szöveg miközben a szöveg elrendezését nézi. A Lorem Ipsum használatának lényege, hogy többé-kevésbé rendezettebb betûket tartalmaz, ellentétben a Tartalom helye, Tartalom helye-féle megoldással. Sok desktop szerkesztõ és weboldal szerkesztõ használja a Lorem Ipsum-ot mint alapbeállítású szövegmodellt, és egy keresés a lorem ipsum-ra sok félkész weboldalt fog eredményezni.

H1 fokozatú minta címsor

H2 fokozatú minta címsor

H3 fokozatú minta címsor

H4 fokozatú minta címsor

H5 fokozatú minta címsor

H6 fokozatú minta címsor

Bal oldalon láthatóak a címfokozatok, ahogyan az a jelenlegi stíluslapon meg lett határozva. Mint már említettük, a H1 kiemelt jelentőségű főcím a Google-nál, de mégse használd, mert az oldal a termékek nevéhez és a cikkek címéhez rendeli hozzá. Egy oldalon belül nem szerencsés több főcímet használni, azok nem egymástól független írások. A legerősebb cím a termékleírásokban, cikkek szövegében a H2 címfokozat legyen. A H3-H5 lehet alcím. Meglepő lehet, hogy a H6 nagyobb, mint H5. Egy feledésbe merült felhasználáshoz lett nagyobbra meghatározva. Rendesen egészen apró lenne (Talán a „doboz”-hoz készül [bővebben a Bootstrap részben lesz róla szó])

Színek

Ha kijelölsz egy szövegrészletet, akkor az A ikonra kattintva meg tudod változtatni a betűnek és/vagy hátterének színét. Ki tudod választani a színes rész használatával, a felső kis négyzetre bökéssel, vagy hexadecimális, illetve RGB értéket megadva. Ha a betűt színeznéd át akkor a Text Colorra kattintva teheted meg, a háttérhez a Back(ground) colort.

Megjegyzés:    Nem tesz jót az összképnek a használata, visszafogottan alkalmazd! A  háttérszín megváltoztatása csúnya , nincs semmi margó.

Szövegrészlethez (de képhez is) hozzá lehet kapcsolni más helyre mutató linket. Szöveg esetében ki kell jelölni a kívánt részt, majd a Link ikonra kattintás után ez az ablak ugrik fel. A Text do display mezőben már szerepel a szöveg. A Rel alapértelmezetten none. A nofollowra állításával megtiltjuk a Google-nak (és más keresőmotoroknak is) hogy feltérképezze az oldalt. A Target alapértelmezetten none, ami annyit jelent, hogy a linkre kattintva az új oldal lecseréli a jelenlegit. New window választásban új ablakban fog megjelenni. A button style alapértelmezett értéke none, eredményeként csak sima kattintható szöveg marad a link, a button választásával gombbá alakul, ami az oldalunkon egy bekeretezett szöveg lesz. Ha képre szeretnél linket, akkor annak kijelölése után kattint a Link ikonra. A Text to display természetesen üres marad.

Táblázat szerkesztéséhez előbb létre kell hozni azt. Egyszerű módja a táblázat ikonra kattintás után húzással kijelölni a kívánt oszlopok és sorok számát. Később hozzá lehet adni újabbakat, illetve törölni.

Az alábbi montázs bal szélén látható a kapott eredmény. Az az üres táblázat, dolgozni nem lehet vele. Egy kis trükk: A Table properties menüpontban a szélesség legyen 100% cell padding olyan 5-10 körül már jó. Ezeket majd töröljük.

A termék leírásokba, cikkekbe illesztendő képet előbb fel kell tölteni a szerverre, utána lehet elhelyezni a szövegben. Tekintve, hogy az oldalnak minden eszközöl jól kell kinéznie, nem mindegy, hogyan oldjuk meg. Nem elég egyszerűen behívni a szövegszerkesztőbe, és „majd csak történik vele valami”. Monitoron elképzelhető, hogy mindent rendben valónak találunk, de tabletten, okos telefonon már furcsa lesz a kinézete.

Ha nem így teszünk, a jobb oldalon láthatóhoz hasonló lehet pl. telefonon.

A termék leírásokba, cikkekbe illesztendő képet előbb fel kell tölteni a szerverre, utána lehet elhelyezni a szövegben. Tekintve, hogy az oldalnak minden eszközöl jól kell kinéznie, nem mindeg

Ez a kódja

<div class="row">

<div class="col-md-6"> bala hasáb szövege itt</div>

<div class="col-md-6"> jobb hasáb szövege itt</div>

</div>

class="row", azaz új sor

class="col-md-6", 6 oszlop szélességű hasáb

Ez a kódja

<div class="row">

<div class="col-md-4"> bala hasáb szövege itt</div>

<div class="col-md-4"> középső hasáb szövege itt</div>

<div class="col-md-4"> jobb hasáb szövege itt</div>

</div>

class="row", azaz új sor

class="col-md-4", 4 oszlop szélességű hasáb

Ez a kódja

<div class="row">

<div class="col-md-8"> bala hasáb szövege itt</div>

<div class="col-md-4"> jobb hasáb szövege itt</div>

</div>

class="row", azaz új sor

class="col-md-8", 8 oszlop szélességű hasáb

class="col-md-4", 4 oszlop szélességű hasáb

Mind a három megoldásnál, ha a Firefoxban a CTRL+Shift+M billentyűk egyidejű lenyomásával átváltasz alkalmazkodó nézetre, láthatod, hogy a hasábok egymás alá rendeződnek. Az egy oszlopban lévő szöveg és kép is kitölti a képernyő szélességét.

A rossz megoldás

<div class="row"> <div class="col-md-6"> <p> Első bekezdés </p> <p> Második bekezdés </p> <p> Harmadik bekezdés </p> </div> <div class="col-md-6"> <p> Negyedik bekezdés </p> <p> Ötödik bekezdés </p> <p> Hatodik bekezdés </p> </div> </div>

A bal oldali mintában, egyetlen sor (row) van, két oszlopra (col) osztva. Egy oszlopban 3-3 elem található. A helyes megoldásban három sorban egyenként két oszlop van, és abban egy-egy elem.

További eltérés, hogy az egyes sorok elválasztásához be lett szúrva üres rész:
<div class="row" style="padding-top:2em;">

A leírtak nem jelentik azt, hogy egy sorban (row) nem lehet több elem egymás alatt, csupán azt, hogy lehetőleg férjenek ki egy alacsonyabb monitoron is, hogy ne kelljen görgetni sokat.

A helyes

<div class="row"> <div class="col-md-6"> <p> Első bekezdés </p> </div> <div class="col-md-6"> <p> Második bekezdés </p> </div> </div> <div class="row" style="padding-top:2em;"> <div class="col-md-6"> <p> Harmadik bekezdés </p> </div> <div class="col-md-6"> <p> Negyedik bekezdés </p> </div> </div> <div class="row" style="padding-top:2em;"> <div class="col-md-6"> <p> Ötödik bekezdés </p> </div> <div class="col-md-6"> <p> hatodik bekezdés </p> </div> </div>

A színes háttérhez

<div style="background-color: #efe2ab; margin: auto; padding: 15px;"> <p>A hiedelemmel ellentétben a Lorem Ipsum nem véletlenszerû szöveg. Gyökerei egy Kr. E. 45-ös latin irodalmi klasszikushoz nyúlnak. Richarrd McClintock a virginiai Hampden-Sydney egyetem professzora kikereste az ismeretlenebb latin</p></div>

A lényeg az első sorban van. A style utáni értékek sorban: a háttér színe (#efe2ab), margó (auto), elemen beüli távolság (15px). Természetesen más szín és más padding értékek is megadhatók!

A dobozhoz

<div class="doboz"> <h4 class="doboz-header">címsor</h4> <p class="doboz-body">szöveg</p></div>

Az oldal szélessége 1200 pixel. Két oldalt 15 képpontnyi margó van, így a teljes megjelenő szélesség 1170 képpont (Kivétel a címlapi vetítés, ott nincs margó, a kép szélessége 1200 pixel). Nagyobb felbontású képet felesleges feltölteni, mert csak foglalja a helyet, lassítja a betöltődést. Viszont túl kicsi sem jó, 600 pixelnél keskenyebb akkor se legyen, ha hat oszlopos elrendezésű oldal egy oszlopába kerülne.

Megjegyzés:    Nem kell többféle méretű képeket feltölteni, a rendszer nem is kínál fel ilyen lehetőséget. A termékképeknél a 800×800 képekből a Prestashop elkészíti magának a kicsiket, ami pl. a katalógusnézethez szükséges. Az egyéb képek meg röptében, a böngészőbe letöltődés közben méreteződik át.

Lehetőleg nem más helyről legyen belinkelve, mert nem biztos, hogy ott változótlanul megmarad. Egyedül a Garmin termékképek lehetnek kivételek (bővebben a Garmin termékek szerkesztése részben).

A képet fel kell tölteni a szövegszerkesztőben, a kép ikonra (Insert/edit image) kattintásva.

A képeket mappába kell rendezni (elsődleges) felhasználás szerint. Kétségtelen, lehetne átgondoltabb, feszesebb a jelenleginél, de azért teljes káosz sincs. Termék leírásába tartozó képek helye: termekbe mappa, és az alatt márkák szerint, azon belül típus szerint.

A cikkekhez tartozó képek a CMS mappában, a blog képei a news mappában találhatók.

A műveleteknél a jobb oldali ikonra kattintva lehet új mappát létrehozni. Csak angol betűk legyenek a nevében, ékezetes és írásjelek ne! Valamiért az Új mappa szöveg nem tűnik el, mint illene, így ezt ki kell törölni. A már meglévő vagy az újonnan létrehozott mappába új képet a bal oldali ikonra kattintva lehet.

Sajnos egy bosszantó hibával kell itt szembesülni, ami akkor jelentkezik, hogy egymás után több képpel is dolgozol. Feltölteni egyszerre többet is lehet, de elhelyezni csak egyenként. És itt jön a hiba: miután belementél a mappában lévő almappának az almappájába, a következőnél esélyes, hogy „kiugrik”. Azaz megint végig kell kattintgatni, mire ugyanoda eljutsz. Általában az első néhány képnél még nincs ilyen, de 4-5 után már szinte 100%.

A kis ikonra kattintva az itt balra látható ablak ugrik fel, csak üres adatmezőkkel. A kis szem ikonra kattintással lehet eljutni a fent bemutatott mappákhoz. A kép kiválasztása után már hasonlóan már ott lesz a kép elérési útvonala (Source), és a mérete (Dimensions). Utóbbi ugyan átírható de felesleges. Akkor lehet csak szükség rá, ha egy oszlopon belül tennénk szöveg mellé, ami a fentebb már vázolt okból nagyon nem szerencsés.

A kép leírása (Image description) bár nem jelenik meg az oldalon, de a forrásában igen. A Google szereti, ha ki van töltve rendesen. A helyezés szempontjából nem a legfontosabb, de azért számít. Ha a kép valamiért nem töltődik be a böngészőbe, ez a szöveg lesz látható helyette, és a gyengén látókat segítő felolvasó is ki tudja mondani.

Ha más helyről linkelsz be képet, akkor elég a felugró ablak Source mezőjébe beilleszteni a kép URL-jét.

Kattintható kép

Link nem csak szöveg lehet, hanem kép is. Jelöld ki a képet, majd a kis link ikonra kattintva illeszt be az elérési útvonalat.

A sorok és oszlopok szerkezete az alábbi

kódja

Egy kis kitérő – mi az a jumbotron?

Egy videó oldalba illesztéséhez kattints az Insert/Edit video ikonra. A bal oldalon látható felugró ablak fogad. Több videómegosztóról lehetséges átvenni filmet, de hogy az összes használható-e, nem biztos. A termékeinkkel kapcsolatos felvételek a többsége a Youtube és a Vimeo oldalán található, az eredeti termékleírásba is onnan lett beágyazva. Elvileg bármelyik videómegosztó használható, hacsak nincs korlátozás.

Megjegyzés:   Sajnos itt is a Prestashop rendszer hibájába ütközünk. A General/Source mezőbe beírt elérési útvonal használhatatlan. Front Office-ban egy nagy méretű fehérség jelenik meg csak, fekete kerettel. Így ez nem használható. A hiba akkor is jelentkezik, ha rövidített URL-t használsz (mint itt az ábrán is), és akkor is, ha a teljeset. Az Alternative source egy másik elérési út megadását tenné lehetővé, de ez sem működik. A Poster sem működik

A beillesztéshez a Embed fülön iframe-be helyezve lehet jól beilleszteni. A kód megtalálható a Youtube és a Vimeo oldalán is.

A beillesztendő videó alatt, jobbra lent a Megosztásra kattintva válasszuk a Beágyazás lehetőséget. A Lejátszásvezérlők megjelenítése maradhat bejelölve. Pipáljuk be a Fokozott adatvédelmi mód bekapcsolása jelölőnégyzetet, majd kattintsunk a másolás gombra.

Az Insert/edit video Embed mezőjébe illesszük be a vágólapon lévő kódot, a fenti módon. Az OK gombra kattintva a film beágyazásra kerül. A Youtube alapértelmezés szerint 560×315 képponttal adja a kódot, amit át lehet írni. Ha teljes oldalszélességet szeretnél, akkor a dimenzió 1170×680 képpont.

A beillesztendő videó alatt a Share gombra kattintva válasszuk az Embed lehetőséget. A Lejátszásvezérlők megjelenítése maradhat bejelölve. Pipáljuk be a Fokozott adatvédelmi mód bekapcsolása jelölőnégyzetet, majd kattintsunk a másolás gombra.

A beillesztendő videó alatt a Share gombra kattintva válasszuk az Embed lehetőséget. A felugró ablakban a Show Options-ra kattintás után vegyük ki a pipát minden jelölőnégyzetből. A Fixed Size szükség szerint átírható, de utóbb is lehet módosítani. Ha teljes oldalszélességet szeretnél, akkor a szélesség 1170 képpont

Az Embed ablakból másoljuk ki annak teljes tartalmát. Az Insert/edit video Embed mezőjébe illesszük be a vágólapon lévő kódot, a fenti módon. Az OK gombra kattintva a film beágyazásra kerül.

A videóknál (és a máshonnan belinkelt képeknél is) előfordulhat, hogy idővel nem lesz elérhető. Ezt megelőzni nem lehet. Egy biztos módszer van csak: saját szerverre feltölteni, de ez rengeteg helyet elfoglalna. A Haladó beállítások/Teljesítmény oldalon a Média szerver (csak CCC-vel használható) részben lehetne beírni az url-t.

A törött linkek keresésére vannak weboldalak, de mindegyik fizetős és/vagy erősen korlátozott.

Szinte az összes óránál, GPS-nél megtalálható ez a rész. Az egy sorban lévő elemek száma változó. A mi oldalunkon egy sorban egyenlő szélességű oszlop csak 2, 4 vagy 6 lehet. Itt egy oszlop szélessége 2 egység (6×2=12).

Egy oszlop tartalma

• ikon, svg formátum, eredeti helyéről linkelve
• rövidke szöveg

Megjegyzés:    a Garmin termékoldalon kivételesen nem minden szöveg előre (balra) zárt. Az ikonokat tartalmazó oszlopokon belül minden középre zárt (ikon és szöveg)

Az ikon alatti szöveg hozzáragadna, ami nem szép, ezért egy kis távolságot állítunk be ezzel a kóddal: <p style="padding-top: 1em; text-align: center;">

Tehát a bekezdést jelölő taget (az a <p> kell lecserélni/kiegészíteni a style="padding-top:1em" résszel. Itt a pirossal jelölt kódban középre igazítás is szerepel