Javasolt megoldás:

Megoldási terv:

Ahogy látjuk a feladat szövegében is, bizonyos beállításokat nekünk kell kitalálunk a minta alapján.

Láthatjuk, hogy több tulajdonság az összes oldalra vonatkozik: például az oldal felépítését segítendő táblázat. Érdemes egy oldalt megcsinálni, elmenteni, majd abból kialakítani az összes oldalt (Mentés másként paranccsal ezen könnyedén segíthetünk).

Készítsük el legelőször az index.html állományt (Kezdőoldal), mentsük el, majd abból az oldalból alakítsuk ki a többi oldalt is!

Felhasználandó eszközök:

• táblázat beszúrása, szerkesztés
• kép beszúrása és linkké alakítása
• szöveg formázása (címsor, és színek)
• szöveges link kialakítása
• háttérkép beállítása

Javasolt megoldás lépései:

Kezdőlap (index.html) elkészítése

• A Formátum → Oldal címe és tulajdonságai menüben állítsuk be az oldal címét (Kezdőoldal)!
• A Formátum → Oldal színei és háttere menüben tallózzuk ki a megfelelő háttérképet (honlaphatter.png)! Erről a feladat külön nem szól: ezt a háttérbeállítást a mintából láthatjuk – a háttér ismétlődését nem kell beállítanunk: a KompoZer alapértelmezettként olyanná csinálja.
  Itt tudjuk beállítani a linkek színeit is: ne felejtsük el bekapcsolni az Egyéni színek opciót! A színeknél a megjelenő, színválasztó párbeszédablakba másoljuk be a feladatban megadott HTML formátumú színkódot!
• Szúrjunk be egy 1x3-as táblázatot, ahogy a feladat kéri, majd végezzük el a különböző sorokra a kért beállításokat – az első cellába szúrjuk be a honlapfejlec_minta.jpg állományt, mivel az eredetit nekünk kellene elkészíteni, ezért ezzel most nem foglalkozunk! Dolgozhatunk úgy is, hogy nem kapcsoljuk még ki a táblázat szegélyét (azaz nem állítjuk a táblázat szegélyt 0 képpontosra), hisz így jobban tudunk tájékozódni. Megjegyzendő, hogy ha ki is kapcsoljuk a táblázat szegélyét, a szerkesztő program vékony, szaggatott piros vonallal jelzi a cellák határvonalait (A lépés).
  A feladatban kért cellamargó tulajdonságot a Táblázat tulajdonságai ablakban Helykitöltés néven találjuk meg.
• A második sorba másoljuk bele a forrásfájlba megadott szövegeket! Ezzel a tartalommal fogunk majd navigálni. Ami a mintán látszik: itt mindhárom szöveg félkövér. A Zárvatermők, és az Ajánlott oldalak feliratokat alakítsuk linkké! Nem baj, ha még azok az oldalak nincsenek készen, amikre hivatkozunk. A linkek mutassanak (rendre) a kért zarvatermok.html és linkek.html lapokra!
• A tartalom részre is másoljuk be a forrásfájlból az ide tartozó szövegeket! Ne feledjük: az első bekezdés címsor 1 stílusú, és #008000 színű.
• Az utolsó bekezdés alá szúrjuk be a kért (nemzetiparkok.jpg) képet, és igazítsuk középre (jelöljük ki, majd a bekezdéseknél látható Középre igazítás ikonra kattintsunk)!
• Végül alakítsuk ki a kért linket a képen! Egy baj van: kép esetén nem tudjuk beállítani, hogy linkként új oldalon nyíljon meg a cél.
  Ha beállítottuk a linket, váltsunk az alul látható fülek közül Felosztás nézetre, és kattintsunk a nemzetiparkok.jpg képet közrefogó, szaggatott, piros kereten belülre! Ekkor az alsó ablakban megjelenik a linkhez tartozó HTML kód (B lépés). Balról az első > jel elé (a link url-je után) írjuk oda: target=”_blank”, majd mentsük munkánkat! Ezzel elérjük, hogy a képre kattintva a hivatkozás tartalma új ablakban nyíljon meg. Megjegyzendő, hogy „rendes”, szöveges link esetén van rá beállítási mód, hogy a link tartalma új ablakban nyíljon meg. Valamiért a képeknél ezt nem tették lehetővé, ezért kellett „kézzel” belenyúlni.

Zárvatermők (zarvatermok.html) elkészítése

• Mentsük el másként az előbb elkészült, index.html állományt (a fájl neve legyen a kért zarvatermok.html! Ezt fogjuk átalakítani a honlap második lapjává.
• Formátum → Oldal címe és tulajdonságai menüben állítsuk be az oldal címét (Zárvatermők)!
• Töröljük a felesleges tartalmakat: a harmadik sor tartalmát (képet, és a szöveget)!
• A tartalmi részt egy táblázat rendezi el. A feladat szövege csak annyit közöl, hogy ez a táblázat 600 px (képpont) széles. A mintán látható: ennek a táblázatnak 2 oszlopa, és 3 sora van. Szúrjunk be egy ilyen táblázatot a honlap tartalmi részébe (harmadik sorába, C lépés), ahonnan korábban töröltük a Magyarország nemzeti parkjait ábrázoló képet, és szöveget!
• Ne felejtsünk beállítani a táblázatba 10 px-es cellamargót (KompoZerben: Helykitöltés), és tüntessük el a táblázat szegélyt (szegély vastagság: 0 képpont)!
• Alakítsuk ki a táblázat tartalmát a mintán látható módon: minden sorban egy szöveges tartalom (az egyes virágnevek nagyobb betűkkel vannak szedve, és félkövérek), és egy kép szerepel egy-egy cellában! Az egyes, képeket tartalmazó cellákra állítsuk be a kért, #E6FFE6 színkódú háttérszínt (C lépés).
• A második sorban állítsuk át a navigáló sávot: alakítsunk ki linket a Kezdőoldalra, és szüntessük meg a Zárvatermőkre mutató linket!

Ajánlott oldalak (linkek.html) elkészítése

• Mentsük ismét másként az index.html állományunkat, most linkek.html néven!
• Állítsuk át az oldal címét megfelelőre a Formátum → Oldal címe és tulajdonságai menüben (Ajánlott oldalak)!
• A második sorban szereplő navigációs sávot alakítsuk át: vegyük le a linket az Ajánlott oldalakról, és hozzuk létre egyet a Kezdőlap feliratra (ez mutasson az index.html-re, D lépés)!
• A weblap tartalmi elrendezését adó harmadik sorból töröljük ismét a honlap tartalmi részét, majd másoljuk be a szöveges forrásállományban megadott szövegeket! Alakítsuk ki az első bekezdést címsor 1 formátumúra, és állítsunk be neki a kért betűszínt!
• Jelöljük ki a cím után szereplő, három bekezdést, és úgy alakítsuk felsorolássá!
• A felsorolásban szereplő szövegeket alakítsuk át linkké (a linkek címei szintén a forrásfájlban találhatóak, ezeket csak másoljuk át a link beállításakor)!