Fortima és Optuna (minta)
Kategória: web - emelt szint
Feladat leírása
Egy Opus és Froster (fiktív) autó márkákkal foglalkozó autókereskedő számára külön
weblapokat készítünk típusonként. Szeretnénk, ha az oldalak szerkezete alapvetően
megegyezne, megjelenése viszont lényegesen eltérő lenne, jellegzetes arculatot adva az egyes
márkáknak.
Az Opus kereskedéshez tartozó oldal már
elkészült, míg a Froster oldalának csak a
formai jellemzőit (froster/css/base.css)
rögzítették, így a formai beállításokkal
(színek, keretek, méretek...) nem kell
vesződnie, legfeljebb apró módosításokat kell
benne végeznie.
Készítse el a meglévő oldal alapján a Froster
kereskedés honlapját is! Kiindulásként
másolja át a forrásadatokból a feladathoz tartozó opus és froster mappákat a saját
mappájába, eredeti formájukban, majd e másolatokban kövesse az alábbi leírás lépéseit!
Részfeladatok
1. Másolja át az opus/index.html állományt a froster könyvtárba!
2. A stílusleíró állomány az új oldalon a css alkönyvtárba került. Módosítsa a base.css hivatkozást ennek megfelelően css/base.css-re.
3. Az opus-logo.png hivatkozást cserélje le az img/froster-logo.png-re (ne felejtkezzen el a rövid, helyettesítő szöveg módosításáról sem)!
4. Az oldal címét javítsa át „Opus Fortima” szövegről „Froster Optuna” feliratra!
5. Az eredeti oldalon látható 10 kicsi kép helyett (menu_[1-10].jpg) illessze az oldalba a froster/img könyvtárban található 12 kicsi képet (auto_[1-12].jpg)!
6. Az oldal összes „Opus” szavát cserélje le „Froster”-re (természetesen a szót megelőző az névelő is cserélendő a-ra)!
7. Szúrjon be egy – a napi nyitvatartási időket tartalmazó – táblázatot az „Ez az Froster!” bekezdés elé!
a) A táblázat fejlécében szerepeljen egy összevont cellában a „Nyitvatartás” felirat!
b) A fejléc következő sorának cellái a „Nap”, „Kereskedés”, „Szerviz”, „Pénztár” szövegeket tartalmazzák!
c) A táblázat láblécébe, összevont fejléccellába kerüljön a „Bankkártyás fizetésre hétköznap 15:30-ig van lehetőség!” szöveg!
d) A táblázat törzse tartalmazza soronként egy-egy napra az adatokat (ezek szövegét megtalálja a források között a nyitvatartas.txt tabulátorral tagolt állományban), a napok elnevezését fejléccellákban helyezze el:
e) Az időpontokban a perc kerüljön felső-indexbe; az óra és perc közé így nem kell kettőspont.
8. Az oldal tetejére (a fejléc elé), külön bekezdésbe készítsen relatív hivatkozást az eredeti oldalra (../opus/index.html) „Társoldalunk →” felirattal!
Készítse el ugyanezt a hivatkozást visszafele is, az Opus oldalról a Froster oldalra!9. Az „Új autók” pont alá készítsen felsorolást az egyes (fiktív) autótípusokról (a típusneveket megtalálja a források között a tipusok.txt állományban):
10. A „Mafira” pontot alakítsa a mafira.html-re mutató linké!
11. A froster/index.html oldalt másolja le mafira.html néven.
12. Az oldal tartalmát adó kis képeket és szövegeket törölje, de az ezeket tároló, fehér háttérszínű konténer elemet (<div class="lap">) hagyja meg.
13. A törölt elemek helyére illessze be az img/mafira.jpg képet. A kép alternatív szövege legyen „Froster Mafira”. A kép után szúrja be a „Froster Mafira” első fokozatú címsort és a „Luxus elérhető áron!” szövegű bekezdést! A fejlécet és menüt hagyja meg eredeti formájában!
14. Az elkészült mafira.html lapon a „Társoldalunk →” linket javítsa át az index.htmlre mutató „Vissza →” feliratú hivatkozássá!
15. A base.css állományban keresse meg a span elemekre vonatkozó beállításokat, és módosítsa azokat úgy, hogy a kiemelt szövegek félkövérek és RGB(255,100,0) kódú, narancs színűek legyenek.
