Javasolt megoldás:

Megoldási terv:

Ahogy eddig is: elkészítjük azon részeket, amik az összes oldalon egyezőek. Elmentjük őket már az elején a megfelelő nevekkel, és majd utólag alakítjuk ki az egyes oldalakra vonatkozó egyedi tartalmakat.

A felhasználandó eszközök:

• kép beszúrása, szerkesztése, linkké alakítása
• szöveg formázások (címsorok, színek, méret, betűtípus és –stílus)
• táblázat beszúrása, formázása
• szöveges linkek készítése
• képtérkép készítése és beszúrása, flash animáció beszúrása
• űrlap készítése

Javasolt megoldás lépései:

Általános külalak elkészítése

• A Formátum → Oldal címe és tulajdonságai menüben állítsuk be az oldal címét (Érdekességek Kínáról - Bevezető), majd a Formátum → Oldal színei és háttere menüben állítsuk be a kért hátteret, és a linkek színeit!
• Olvassuk el figyelmesen a feladat szövegét, és a forrásokban látható mintát! A feladat itt is csak egy ”950 képpont széles blokk”-ról beszél. Világos, hogy ez egy táblázat, de a mintán láthatjuk: az egyik bemutatott példával ellentétben ez nem csak egy táblázat cellából álló blokk! Ez egy olyan táblázat, aminek 3 oszlopa, és 2 sora van. Az első sorban lesz a fejléc, a második sorban lesz (ebben a sorrendben, balról jobbra) a navigációs menü, a tartalom, és a kínai zászlót, címert tartalmazó rész.
• Szúrjunk be tehát egy 3x2-es táblázatot! A táblázat teljes szélességét állítsuk 950 képpontosra, az első és az utolsó oszlop szélességét pedig (ez most ránézésre állapítsuk meg) 150 képpontosra! Így a tartalmi részre jut 650 képpont.
• Vonjuk össze az első sor celláit, majd gépeljük be a kért „Érdekességek Kínáról” feliratot (A lépés)! A feliratot tegyük – a mintán látható módon – nagyobbá, tegyük félkövérré, és állítsuk be a kért színt!
• Most jön a cseles rész: az első cella hátterének képet kellene beállítani. A KompoZer az „alap” táblázat beállításoknál ilyenre nem ad lehetőséget, máshol viszont igen! Az ablak bal oldalán váltsunk DOM Explorer nézetre: ez a nézet egy fastruktúrából áll, és egy alatta lévő ablakból. Az alsó ablakban kattintsunk a CSS fülre, majd kattintsunk a szerkesztő felületen a táblázat első sorába (aminek be akarjuk állítani a hátterét)! Ezután a CSS fülön lévő felületen kattintsunk duplán az inline style feliratra: egy párbeszédablak jelenik meg: nagyon hasonló ahhoz, amelyet a KompoZer CSS beállításainál láthattunk. Válasszuk ki ebben az ablakban a Háttér fület! Itt már értelemszerűen kitallózható a cellának szánt háttérkép (nagy_fal_fejlec.jpg) (B lépés, C lépés).
• Készítsük el a táblázat kért, külső szegélyét! Használjuk ismét a korábban említett, DOM Exploreren keresztüli, CSS szerkesztést! A megjelenő ablakban válasszuk a Szegélyek fület, majd állítsunk be a kért színnel, és vastagsággal külső szegélyt! A „hagyományos”, Táblázat tulajdonságai ablakban kapcsoljuk ki a tartalmazó táblázat cellavastagságát, azaz állítsuk 0-ra! A Cellatávolságot, és a Helykitöltést is vegyük le 0-ra!
• A beállított háttérkép magasabb, mint az őt tartalmazó cella: állítsuk át az első sor magasságát 217 képpontosra (ekkora a háttérkép magassága)! Ezzel kész a fejléc.
• Az első oszlopba készítsük el a navigációs menüt! Csak másoljuk be a forrásfájlban található szövegeket, alakítsuk őket felsorolássá, majd alakítsuk ki a kért linkeket!
• Az utolsó sorba kell elkészítenünk a kínai címert, és zászlót tartalmazó táblázatot. Ehhez talán jó megoldás egy egyoszlopos táblázat beszúrása, melyen 5 sora van: minden sorban (cellában) szerepel egy-egy tartalom.
• Ha beszúrtuk a táblázatot, szúrjuk be az egyes cellákba a megfelelő elemeket, végül alakítsuk ki a kért linket a „Wikipedia” szövegre!
• Most nézzük a tartalmi részt, azaz a második sor második (középső) celláját: itt is kénytelenek vagyunk egy extra, egycellás táblázatot beszúrni, méghozzá a cím alatt látható szegély miatt. Ez egy egycellás táblázat alsó szegélye. Mielőtt beszúrnánk ezt az egycellás táblázatot, üssünk két bekezdést a honlap tartalmi részébe, és a felsőbe szúrjuk be a táblázatot! Sajnos a szegélyeket külön nem lehet formázni az „alap” táblázat tulajdonságokat tartalmazó ablakban. Használjuk ismét a korábban említett, DOM Exploreren keresztüli, CSS szerkesztést! A megjelenő ablakban válasszuk a Szegélyek fület, majd pipáljuk ki a Mind a négy oldalon azonos szegélystílus opciót! Ekkor már értelemszerűen szerkeszthetőek a szegélyek, külön-külön; készítsünk 1 pt vastag, alsó szegélyt a kért színnel! Az egy cellás táblázatba írjuk, azt hogy „Cím”.
• Ezzel kész az általános weblap külső (D lépés). Mentsük el háromszor, a következő nevekkel: index.html, animacio.html, linkek.html és teszt.html!