20. Weblapkészítés-4. Weblapok elemei - Háttér és szöveg, formázások

AZ INDEX.HTM OLDAL FORMÁZÁSA

Nyissuk meg az elmúlt órán elmentett webhelyünket továbbszerkesztésre!
Ehhez indítsuk el a
FrontPage programot! A jobb oldalon található Munkaablak Megnyitás részében a legutoljára szerkesztett néhány webhely, illetve weblap listája található. Kattintsunk az Egyéb... pontra, majd a megjelenő ablakban tallózzuk ki a Dokumentumok mappába elmentett Saját webhelyek / Gyakorlás dokumentumát! Ez a Megnyitás gombra kattintva megnyitható.

A hely tartalmának megtekintéséhez kattintsunk a Gyakorlás mappa előtti + jelre, majd a szerkesztéshez duplán az index.htm fájlnévre! A jobb oldali szerkesztő mezőben megnyílik a három keretből álló címoldalunk.

Szerkesszük meg a Banner mezőt!
Ebben a fejlécbe írjuk be a honlap nevét! A szövegbevitel és formázás hasonló a Word szövegszerkesztőben tanultakhoz. A betűméret azonban nem állítható folyamatosan, hanem előre megadott méretek szerepelnek. A címet igazítsuk középre, válasszunk neki valamilyen feltűnő színt. A betűtípusoknál arra ügyeljünk, hogy a régebbi böngészők nem tudnak akármilyen betűtípust hiánytalanul megjeleníteni, és egyes betűtípusok nem tartalmaznak ékezetes karaktereket. Különleges speciális karaktereket tartalmazó bannert ne szövegként, hanem képként illesszünk be, mert az korrekten fog megjelenni majd.

A banner hátterének beállításához kattintsunk a keretben a jobb egérgombbal, és a helyi menüből válasszuk a Lap tulajdonságai menüpontot! A megjelenő ablakban a Formázás fülecskére kattintva beállíthatjuk az oldal színét vagy háttérképét, a szöveg és a hivatkozások színét.

Állítsuk a banner hátterét kellemes, a felirattól elütő színűre!

 

Adalék:
Ha a háttérre képet akarunk beszúrni, tegyünk pipát a
Háttérkép jelölőnégyzetbe, majd tallózással válasszuk ki a megfelelő képet. A kisebb képeket a program tapétaként alkalmazza. Ha a Vízjellé alakítás jelölőnégyzetet bejelöljük, az oldal görgetésekor a háttérkép nem gördül, hanem helyén marad.

 

Ezután a bal oldalon levő keret kitöltése következik. Ez a webhely tartalomjegyzéke. Ide a webhelyet alkotó oldalakra mutató hivatkozások kerülnek. Egy személyes webhelyen általában a következő fő oldalak találhatók: (kép). Ezeket a szövegeket megformázhatjuk, ugyanúgy, mint az oldal hátterét, majd az egyes sorok kijelölése után hivatkozást illesztünk be hozzá a Hivatkozás beszúrása nyomógombbal:
Ahhoz, hogy a hivatkozás a megfelelő oldalra mutathasson, létre kell hoznunk ezeket az oldalakat.

 

 

ÚJ OLDALAK LÉTREHOZÁSA

Lépjünk át a szerkesztő mező bal oldalán lévő Mappalistába!
Jelöljük ki a
Gyakorlás webhelyet, majd válasszuk a Mappalista fejlécének jobb oldalán levő Új lap beszúrása ikont! A megjelenő új_lap_1.htm oldalt nevezzük át célunknak megfelelően!
Fontos!: Az oldalnevek ne tartalmazzanak ékezetes karaktereket, mert felöltéskor a szerver hibásan fogja azokat kezelni. Ez érvényes minden fájlnévre is!

 

A leírtakhoz hasonlóan hozzuk létre webhelyünk további oldalait is! Ügyeljünk arra, hogy az oldalak nevének kiterjesztése .htm legyen.

 

 

 

 

 

 

 

 

A MAPPASZERKEZET MEGVÁLTOZTATÁSA

Az áttekinthetőség kedvéért jó, ha a webhelyünk összetartozó fájljait egy egy közös mappába gyűjtjük. Pl.: a képeket és a kepek.htm oldalt a kepek mappa tartalmazza majd. Mivel a program eleve fölajánlott két mappát (_private és images), ezeket átnevezzük, illetve a többit újonnan létrehozzuk.

Kattintsunk az átnevezendő mappa nevén jobb gombbal, majd a helyi menüből válasszuk az Átnevezés pontot!
Az
images mappa nevét írjuk át kepek-re, a _private mappa nevét változtassuk rolam-ra.

Hozzunk létre további új mappákat filmek, hivatkozasok, bejegyzesek néven!
Ezután a megfelelő
.htm lapokat helyezzük át a mappákba!

 

 

 

 

Az átalakítás után webhelyünk mappaszerkezete a következőképpen néz ki:

 

 

 

 

 

 

 

 

 

A MENÜ HIVATKOZÁSAINAK ELKÉSZÍTÉSE

Most már elkészíthetjük a hivatkozásokat a megfelelő lapok megjelenítéséhez.

Jelöljük ki azt a szövegrészt, amelyhez a hivatkozást be akarjuk illeszteni!
Kattintsunk az
eszköztár Hivatkozás beszúrása gombjára!
A megjelenő ablakban tallózással válasszuk ki webhelyünknek azt a lapját, amelyre a hivatkozás mutat!
A felső mezőben látjuk a szöveget, amelyhez a hivatkozást csatoljuk. Alatta a hivatkozás mappahelye, a nagy ablakban a mappában levő fájlok, amelyek közül kattintással kijelöljük a megfelelőt. A webhelyen belüli hivatkozás címe az alsó mezőben látható.

A megfelelő működéshez azt is meg kell adnunk, hogy a megjelenítendő oldal a webhely melyik keretében tűnjön elő. Ehhez kattintsunk az ablak jobb oldalán a Megjelenítési hely (keret)... nyomógombra!

A bal oldali ábra megfelelő helyére kattintva választjuk ki az új lap megjelenítési helyét (főkeret).

Hasonlóképpen adjuk meg a menü többi pontjának megjelenítési helyét is.

 

 

 

A hivatkozások elkészülte után a menüoszlop az alábbiak szerint néz ki:

Ha az egeret a linkelt szövegrész fölé visszük, a FrontPage-ablak alsó állapotsorában a bal oldalon megjelenik a hivatkozás útvonala.

A CTRL gomb lenyomva tartása mellett a hivatkozás működése ellenőrizhető (a jobb oldali fő keretben megnyílnak, a most még üres lapok).

 

 

 

 

 

 

 

NYOMÓGOMBOK BEILLESZTÉSE

Elegánsabb megjelenést adhatunk tartalomjegyzékünknek, ha nyomógombokat illesztünk be.

Ehhez kattintsunk a felső menüsor Beszúrás / Interaktív gombok menüpontjára. A megjelenő ablakban több beállított gombtipusból választhatunk, amelynek feliratát és hivatkozását az alsó mezőkben adhatjuk meg. Az ablak egyéb fülecskéin a betűtípust és a gomb méreteit állíthatjuk be (Kép).

Minden gomb három képből áll (alapállapot, kiválasztott állapot és benyomott állapot képe). Így az oldal mentésekor egy gomb három darab button.gif képformátumban mentődik el.

 

 

 

A menükeret elkészítését a háttér színének megadásával fejezzük be.

A főkeretbe a következő alkalommal egyetlen képet illesztünk be, amely azonban a következő leckénk anyaga lesz.

Munkánk végén ne feledjünk menteni a változásokat (a Fájl menü Mentés pontjára, vagy az Eszköztár lemez-ikonjára kattintva). Az aktuális oldal mentését úgy is végezhetjük, hogy a szerkesztő mező megfelelő fülecskéjére jobb egérgombbal kattintva a helyi menüből a Mentés gombot választjuk. Ha az oldalt a változtatások után még nem mentettük el, az oldal neve mellett a fülecskén kis csillagot láthatunk.