---

Segítség a weboldalak kezeléséhez

weboldal méreteinek módosítása

• Ctrl + plusz - oldal nagyítása
• Ctrl + mínusz - oldal kicsinyítése
• Ctrl + 0 - oldal eredeti méretre visszaállítás

keresés az aktuális oldalon

• Ctrl + F billentyűkombinációval vagy F3 billentyűvel kezdeményezhető
• a lenn megjelenő ablakba gépeljük be a keresett szót vagy szótöredéket

a forrásfálj megtekintése

• Ctrl+U billentyűkombináció
• benn szöveg / kép kereshető (most is használható a Ctrl+F)
• kiemelt dolgokra (link / kép / css fájl) kattinthatunk

weboldal és összetevőinek mentése

weboldal mentése

• Ctrl+S (a teljes oldal képestől mindenestől / vagy csak az eredeti html fájl)

szöveg mentése

• szöveg kijelölése, majd
• Ctrl+C (a számítógép megjegyzi a kijelölt szöveget)
• a szövegszerkesztőben vagy a levelezőben
• Ctrl+V

kép mentése

• jobb egérgombbal katt a képre, majd
• az úszómenüből "Kép mentése más néven ..." vagy "Kép mentése másként ..."

---

↑ Vissza a help menüre ↑

---

A weboldal könyvtárai, fájljai

A könyvtárrendszer

Gyökérkönyvtár, itt minden fájl tabu !!!

• index.php – főprogram, ez vezérli az egész rendszert (fejrész, menü, változó törzsrész, lábrész), használata: index.php
• zbox.php – képkezelő program (képek megjelenítése, képaláírások kezelése), használata (...-az album neve): zbox.php?dir=...
• help.php – a Help oldalak menüjét indítja

Az alábbi könyvtárak fájljait lehetőleg ne módosítsuk !!!

• assets – megjelenést/formázást beállító (css) és javascript (js) vezérlő programok, stb.
• incl – PHP alprogramok és HTML betétprogramok
• help – itt a (most is nézegetett) help/segítség anyagai
• imgs – a weboldalak rendszerképei

A következő könyvtárak fájljait módosíthatjuk, sőt erre lettek létrehozva!

• album – itt a fényképgalériák képei
•     album/epkmoso – az épülő kamionmosó képei
•     album/epthely – az épülő telephely képei
•     album/vegyes – vegyes képek
•     album/humor – humoros képek

Adatkönyvtárak főbb alkönyvtárai, fájljai

  data0 / adatfájlok

• about.txt – a Rólunk menü magyar szövege
• mtars.txt – a Munkatársak menü magyar szövege
• szolg.txt – a Szolgáltatások menü magyar szövege
• cegdat.txt – a Kapcsolat menü magyar szövege (cégadatok)

  data1 / adatfájlok

• a fentihez hasonlóan az angol szövegek

  data2 / adatfájlok

• a fentihez hasonlóan a német szövegek

---

  data / általános adatfájlok

• bolcs.txt – bölcsességek szövege
• nevtar.txt – névnapok listája a jelentéssel
• linkek.txt – a lábrészben lévő hasznos weboldalak/linkek adatai

Képkönyvtárak főbb alkönyvtárai, fájljai

  imgs / alkönyvtárak

• about – a Rólunk menü képei
• mtars – a Munkatársak menü képei
• szolg – a Szolgáltatások képei

---

↑ Vissza a help menüre ↑

---

Fényképalbum kezelése

A használt fogalmak

• album - a programban szükséges képkönyvtárak gyűjtőhelye (ez a főkönyvtár)
• album/alkönyvtár - egy esemény/dolog képei ebben vannak összegyűjtve (képkönyvtár)

A könyvtárak/képkönyvtárak felépítése

• a képkönyvtár képei .jpg fájlok (pl. borbely_sz.jpg, csallo_r.jpg, ..., vagy egyszerűen 01.jpg, 02.jpg, ... )
• méreteiket célszerű max. 1200px szélesre vagy magasra csökkenteni (letöltési sebesség csökkentése!)
• készül egy 00.txt szövegfájl is a képaláírásokhoz (ez kötelező!)

A 00.txt felépítése, használata

• könyvtár_főcíme | könyvtár_alcíme | fényképész_neve vagy kép_származási_helye
• kép_neve1 | képaláírás1 (az első kép, a Képnévnél a "jpg"-t nem írjuk ki!)
• kép_neve2 | képaláírás2 (a második kép)
• ...
• stb.
• a képek megjelenési sorrendjét a 00.txt fájlbeli sorrendjük adja

A kép nevében ne használjunk space-t és ne használjunk ékezetes karakterek-et!
(A képaláírásban természetesen szabad!)

Képmegjelenítő program (a képre kattintva indul)

• a kép az zbox.php hívását mutatja; az "album" a főkönyvtár, a "humor" a benne lévő alkönyvtár

Bélyegképes nézet

• a könyvtárban lévő képek kicsinyítve jelennek meg (bélyegképek)
• a bélyegképre téve az egérkurzort, megjelenik a képaláírás (ha van!) vagy a kép neve
• a képre rákattintva az megjelenik nagyban (lásd Nagyképes nézet!)

Nagyképes nézet

• az alul látható miniképre kattintva azt nagyban láthatjuk
• az itt lévő kis nyilakra kattintva kaphatjuk az előző illetve a következő nagy képet
• a nagykép alatt látható a kép neve, felette a kép sorszáma (a / után az össz-darabszám)
• a nagykép jobboldalán a kék ikonokkal nagyítható illetve kicsinyíthető a nagykép
• a bal felső nyíl ikon elindítja a vetítés módot (a helyette megjelenő ikon leállítja)
• a jobb felső X ikon visszaállítja a bélyegképes nézetet

---

↑ Vissza a help menüre ↑

---

Röviden a bootstrap-ról

Aktuális verzió

A weboldalon használt bootstrap verzió: 4.5.0 (ez nem a legújabb!)

Meggyőződhetünk erről, ha: megnyomjunk a Ctrl+U-t, megkeressük a forrásprogramban fenn a "bootstrap.min.css" vagy lenn a "bootstrap.min.js" fált, és rákattintunk valamelyikükre.

Lényege

A Bootstrap keretrendszer 12 hasábos, responsive rácsrendszert használ (responsive - az oldal tartalma az éppen aktuális képernyőfelbontásnak megfelelően jelenik meg).

Három fő szerkezeti egység van:

• a fő befoglaló elem a .container osztály
• a .container elemen belül sorokat hozhatunk létre a .row osztály kijelölő segítségével
• A .row elemen belül a .col-xs- (<768px), .col-sm- (>=768px), .col-md- (>=992px), .col-lg- (>=1200px) prefixek segítségével adhatunk meg oszlopokat

Az egyes .row elemeken belüli oszlopok összegének összesen 12-nek kell lennie! Az oszlopok mindkét oldalán 15px köz van.

Néhány példa

Két egyforma oszlop

Három különböző oszlop

A fentiek kódja (asztali számítógépre, vázlatosan)

A Bootstrap különböző eszközökön

eszköz típusa	extra kicsi (extra small) mobil (<768px)	kicsi (small) tablet (≥768px)	közepes (medium) desktop (≥992px)	nagy (large) desktop (≥1200px)
class előtag	col-xs-	col-sm-	col-md-	col-lg-
container szélessége	automatikus	750px	970px	1170px
oszlopok szélessége	automatikus	~62px	~81px	~97px

Néhány Bootsrap link

Megjegyzés: Ezen oldal forrásában is felfedezhető jó néhány Bootsrap elem (célszerű először a forrásprogram legalján szemlélődni!).

---

↑ Vissza a help menüre ↑

---

"Jumbotron" típusú lapok kezelése

Példa

	<div class='jumbotron bg-warning'>
		<h1>Rólunk</h1>
		<p>Cégünk tizenöt éves múltra tekint vissza a nemzetközi fuvarozás terén.</p>
		<p>1993-ban kezdte meg működését, 2 db 3, 5 tonnás gépjárművel.</p>
		<a class='btn btn-success btn-lg' href='#'>Astor Konzorcium</a>
	</div>

Rövid magyarázat:

• bg-warning   a lap háttérszíne sárga
• btn-success   a gomb háttérszíne zöld
• btn-lg   a gomb nagy legyen

A többi könnyen használható szín az "Alert típusú lapok"-nál található.

---

↑ Vissza a help menüre ↑

---

"Alert" típusú lapok kezelése

Két példa

	<div class='alert alert-info'>
		<h3>Astor Konzorcium</h3>
		<h4>Fuvarozás</h4>
		<p>Vállalkozásunk tevékenységében kiemelt szerepet tölt be a szállítmányozás. Megbízóink rendelkezésére állunk a szállítmányozás minden 
		   területén, közúti, tengerentúli és légi forgalomban egyaránt.</p>
		<a class="btn btn-info btn-lg" href="#">Astor Konzorcium</a>
	</div>

	<div class='alert alert-danger'>
		<h3>Astor Konzorcium</h3>
		<h4>Fuvarozás</h4>
		<p>Vállalkozásunk tevékenységében kiemelt szerepet tölt be a szállítmányozás. Megbízóink rendelkezésére állunk a szállítmányozás minden 
		   területén, közúti, tengerentúli és légi forgalomban egyaránt.</p>
		<a class="btn btn-danger btn-lg" href="#">Astor Konzorcium</a>
	</div>

Ajánlott variációk (zárójelben a színben illő "gomb-variáció"):

• alert-success   (btn-success) – zöld
• alert-info   (btn-info) – halv.kék
• alert-warning   (btn-warning) – sárga
• alert-danger   (btn-danger) – vörös
• alert-primary   (btn-primary) – kék
• alert-light   (btn-light) – világos
• alert-secondary   (btn-secondary) – szürke
• alert-dark   (btn-dark) – sötétszürke

---

↑ Vissza a help menüre ↑

---

Füles lapok (tab)

A modern weboldalakon helytakarékosság megoldásként használhatunk füles- (tab) illetve redőnyszerű (accordion) lapokat. Ezen típusok többrétegű lapnak tekinthetők, mindig csak a teljes tartalom egy választott része jelenik meg.

Egy megvalósítás a kezdőoldalról

Az előbbi weboldalrész vázlatos kódja (a kód részletesebb magyarázattal)

	<div class='row'>
		<div class='col-lg-2'>
			<ul class='nav nav-tabs flex-column'>
			<li class='nav-item'><a data-toggle='tab' href='#tab-1' class='nav-link active show'>Fuvarozás</a></li>
			<li class='nav-item'><a data-toggle='tab' href='#tab-2' class='nav-link'>Raktározás</a></li>
			<li class='nav-item'><a data-toggle='tab' href='#tab-3' class='nav-link'>Ládamosás</a></li>
			</ul>
		</div>
		<div class='col-lg-10'>
			<div class='tab-content'>
				<div id='tab-1' class='tab-pane active show'>
					<p>Az <b>Astor Konzorcium</b> szolgáltatásai nem csupán .....</p>
					<p>.....</p>
				</div>
				<div id='tab-2' class='tab-pane'>
					<p>2008-ban kedvező közlekedési kapcsolatokkal megépült Ajka ipari övezetében .....</p>
					<p>.....</p>
				</div>
				<div id='tab-3' class='tab-pane'>
					<p>Vállalkozásunk rendelkezik egy komplex ipari ládamosó .....</p>
					<p>.....</p>
				</div>
			</div>
		</div>
	</div>

A fenti kód "működés közben"

---

↑ Vissza a help menüre ↑

---

Még nem készült el!!!

---

↑ Vissza a help menüre ↑