A XX. századi technikai fejlődés egyik mozgatója és ugyanakkor eredménye a nagyfokú motorizáció. A folyamat – mennyiségileg – akkor lépett nagyot előre, amikor megjelentek
a népautók. Bár neve alapján valójában csak a német Volkswagen „bogár” volt az, de
a francia Citroën „kacsa” és az olasz Fiat 500 ugyanolyan fontos lépcső volt az autózás
mindennapossá válásában.
Az Ön feladata, hogy a minta és a leírás alapján a képszerkesztési feladatokat elvégezze, és
a népautókat bemutató weboldalak végleges formáját elkészítse.
A forrás mappában található állományok és mappák: - nepautoforras.txt, index.html és nepautok.html (a dokumentumok
szövege és félkész állapota UTF-8 kódolással),
- citroen mappa: citroen_2cv-1a.jpg, citroen_2cv-1b.jpg,
citroen-2.jpg, citroen-3.jpg, citroen-e.png, citroen200.jpg
- vw mappa: vw-1.jpg, vw-2.jpg, vw-3.jpg, vw-e.png, vw200.jpg
- fiat mappa: fiat-1.jpg, fiat-2.jpg, fiat-3.jpg, fiat-e.png,
fiat200.jpg
A következő leírás alapján alakítsa át a nepautok.html oldalt, mindeközben fokozott
figyelmet fordítson a mintára! (A minta – a könnyebb áttekinthetőség miatt – a valósnál
kevesebb szöveget tartalmaz, ezért az oldalról ne töröljön semmit!) Feladatok- A böngésző címsorában megjelenő cím szövege „Három igazi népautó” legyen!
- Az oldal jellemzőinél állítsa be, hogy a háttérszín szürke (#C0C0C0 kódú szín) legyen!
A szöveg színét pedig állítsa feketére! A linkek színe minden állapotban fehér legyen!
- Az oldal – jelenleg – egy három sorból és négy oszlopból álló táblázatot tartalmaz.
A táblázatot az alábbiaknak megfelelően módosítsa:
a. A táblázat legyen középre igazított és 1000 képpont szélességű!
b. A szegélyt 0, a cellamargók értékét 10, a cellaközt 6 képpontosra állítsa be!
c. Szúrja be a forrásba a következő sort a táblázat tetejére:
<tr><td></td><td colspan="2"></td><td></td></tr>
d. Az első sor két szélső cellájának szélességét állítsa be 200 pontosra!
e. A táblázat háttérszíne fehér, cellái az oldal hátterével azonos szürke hátterűek
legyenek!
- Az első sor egyesített cellájába gépelje be a címet!
- Az autók leírásában a cím alatt helyezzen el egy 700 pont széles, vízszintes vonalat!
- A táblázat tartalmát formázza az alábbi leírásoknak – és a mintának – megfelelően:
a. A képet tartalmazó cellák tartalma függőlegesen fentre, vízszintesen középre
igazított legyen!
b. A folyó szövegnél nagyobb betűméretű bekezdéseket egyes, kettes, hármas
címsorokkal formázza – méretüknek megfelelően! A bekezdéseket a minta
alapján igazítsa!
c. A Volkswagennél Barényi Béla nevét emelje ki félkövér karakterekkel!
d. A Citroën leírásának végén található forrást alakítsa hivatkozássá!
e. Az autók leírása végén található forrásmegjelöléseket formázza dőlten és
igazítsa a táblázat külső szegélyéhez!
A következő leírás alapján alakítsa át az index.html oldalt, mindeközben fokozott
figyelmet fordítson a mintára!
- A táblázatot igazítsa középre, a cellaközt pedig állítsa 6 pontosra!
- A táblázat forrásába – soronként a megfelelő helyekre – szúrja be a következő kódot
a mintán látható táblaszerkezet kialakításához:
<td colspan="2"></td>
- Az egyesített cellákban szereplő szövegeket gépelje be, vagy másolja be
a nepautoforras.txt fájlból! Formázza őket egyes szintű címsorként, igazításukat
pedig állítsa be a minta alapján!
- A táblázat celláinak háttérszínét állítsa be az oldal háttérszínével egyezőre!
- Készítse el a Citroën „kacsa” hiányzó képét a forras/citroen mappa megfelelő
képéből! A képből a második sor képeivel egyező méretű részt vágjon ki! A kép tartalma
hasonlítson a mintához (látható legyen az első lámpa és a Citroën-embléma)! A képet
citroen-1.jpg néven mentse a citroen mappájába, és illessze be a weboldalba!
- Az első sorbeli emblémákat igazítsa vízszintesen a cella közepére!
- Az első sorbeli Citroën-emblémát alakítsa át a fájl nevének és formátumának
megváltoztatása nélkül a minta és az alábbi feltétel alapján: a képen látható fehér színű
háttér a weboldalon úgy jelenjen meg, hogy az megegyezzen a háttér szürkéjével!
- Készítsen hivatkozást a Citroën-emblémára, amely mutasson a nepautok.html fájl
Citroënt ábrázoló képére!
Minta |
|
2004-2016 BDG algoritmus szakkör