Tippek kezdő honlapkészítőknek

Már kezdő honlapkészítő koromban is mindig szerettem a külsőre adni, és azt vallottam/vallom azóta is, hogy az első, amit bárki meglát, ha egy honlapra kattint, az a kinézet, az elrendezés, a színek. Ahogy a régi mondás tartja:

Külső megfog, belső megtart.

Szerintem nem vagyok egyedül, ha azt mondom, hogy amikor betévedek egy olyan oldalra, ahol rikító sárga, meg neon színek villognak, akkor azonnal megnyomom felül az X gombot, amilyen gyorsan csak lehet. És lehet, hogy annak az oldalnak a tartalma nagyon szép volt, terjedelmes, hasznos, rendezett, már sose fogom megtudni, mert nem bírtam ottmaradni még egy percre sem, hogy körbenézzek, annyira bántotta a szememet az egész.

Úgyhogy én nagyon ki vagyok élezve a honlapok külsejére, és hát csak remélni tudom, hogy lesz aki olvassa ezt a cikket és hasznosítja az itt olvasottakat 😀

Ha egy weboldal betöltése 15mp-ig is eltart, az emberek többsége elhagyja az oldalt.

Nos igen, a designolás egyik alapja, hogy amit alkotsz, azt gyorsan is töltse be. Nagyon sok, főleg G-portal-os oldalon szoktam látni azt a fajta megoldást, hogy nem tudják ugye használni a kódokat, de azért mégiscsak jó lenne, ha csúcsmodern hipi szupi trendeknek megfelelően nézne ki az oldal, és ne úgy, ahogy a gportal “alapja”, ezért rászerkesztenek mindent EGY NAGY KÉPRE, de tényleg szó szerint mindent, a fejlécen lévő szövegtől, képekkel együtt MINDENT, és úgy feltöltik az egészet. A legjobb, mikor ezt az egészet .png képformátumban teszik meg. Nem akarok senkit megbántani, de ez egyrészről nagyon csúnya (nem alkalmazkodik a képernyő átméretezéséhez), másrészről mire ez a nagy kép betöltődik, lehet sokan elhagyják az oldalt inkább. Erre a problémára részmegoldásnak érzem azt, amit anno jónéhány éve külföldi honlapkészítős oldalakon láttam, hogy egy pl 800px széles fejléc képet szétvagdostak 8*100px széles képekre, és úgy rakták be őket. Végül is nem az egész 800px széles képet kellett megvárni hogy betöltsön, hanem egyenként a 100px széles képkockákat. Részmegoldás.

A kevesebb néha több.

Nem mindenkinek ugyanolyan az ízlése, ez tény. De abban megegyezhetünk, hogy sokkal mutatósabb egy oldal, ha nem neon, szinte világító színekkel van kiszínezve, hanem mondjuk pasztell színekkel. Kellemesebb a szemnek, és az sem előny ha minden képpel telerakjuk, hogy már több a kép, mint a szöveg. Persze itt nem az alapból portfólió, vagy képek feltöltésével foglalkozó oldalakra gondolok, hanem olyan esetekre, amikor annyira ki van cicomázva az oldal képekkel mindenhol, hogy a fejléc, a lábléc, a modul háttere, stb. Személyes tapasztalat, mikor olyan oldalon voltam, ahol szép volt minden, szép képekkel, grafikai elemekkel volt kidíszítve az oldal, (nem voltak neonszínek! :D), tényleg kellemes volt a szemnek, csak amikor el akarta olvasni a szöveget, egyszerűen alig bírtam a sok cikormányos hátterektől, képektől. Körbe lehet nézni ipari honlapoknál, vagy akár fizetős honlap templateknél, hogy milyen az összkép. Alap színek használata, minimális képhasználat, és ezek megfelelő elrendezése, kombinációja, és kész is a szembarát, gyors honlap design-unk.

Őszintén, én nagyon szeretem a kihívásokat, ezért szoktam azt csinálni, hogy előveszek régi képeket régi html-es oldalaim kinézetéről, és akkor leülök, hogy ezt megcsinálom G-portal-ra. Párom sokszor mondta már rám, hogy mazochista vagyok 🙂 Szeretem feszegetni a G-portal határait, és azért ha körbenéztek a G-portal-os sablonok között, rengeteg féle kinézetet lehet csinálni neki, és én nem kép formában oldom meg, hanem kóddal mindent. Van amikor trükközni kell ugyan, meg áldozatokat hozni, de tényleg sok mindent meg lehet csinálni kóddal és egy kis ésszel!

Íme néhány példa rá, mikor html-re szabott designt átalakítottam Gportal-ra:

Amit tudok tanácsolni mindenkinek, hogy ha már fel szeretné turbózni az oldalát, akkor nézzen utána néhány kódnak legalább, vagy ha minden kötél szakad, két e-mail címem is meg van adva a Kapcsolat-nál, írjatok bátran, ha tudok, még aznap válaszolok.

4. Táblázatok

Html-ben a táblázatok három elemből épülnek fel: table (maga a tábla), tr (sorok), td (oszlopok).

Táblázat használata az oldalon előnyös rendezés szempontjából, vagy akármire amit táblázat szerűen szeretnénk megjeleníteni.

Alapvetően így épül fel:

<table>

<tr>

<td>

</td>

</tr>

</table>

Ez egy egy sorral és egy oszloppal rendelkező táblázat. Attól függően hogy mennyi sort vagy oszlopot szeretnénk, annyival kell megtoldani a kódot.

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

Ez a táblázat egy sorral, és három oszloppal rendelkezik.

<table>

<tr>

<td></td><td></td>

</tr>

<tr>

<td></td><td></td>

</tr>

</table>

Ennek a táblázatnak két sora és két oszlopa van.

Táblázatnak ugyanúgy lehet kinézetet adni mint egy div-nek, vagy p-tag-nek. Vagy a html kódban manuálisan írunk bele mindent az adott helyre style=”” megoldással, vagy adunk neki egy class elnevezést, és majd később a css kódban adjuk meg a kinézetét. Utóbbit ajánlanám, az a legegyszerűbb ha mindennek aminek stílust akarunk adni, annak adunk egy id-t vagy egy class-t, mert ha később ugyanazt a stílust át szeretnénk vinni jelen esetben pl egy másik táblázatra, akkor nem kell az egész style=”” részt kimásolni, ami ha már csak egy háttérszínt, betűméretet, betűszínt teszünk bele szép hosszú lesz, és ezt másolgatni minden táblázatba a megfelelő helyre, hanem csak a class/id nevét kell beírni oda, ahol azt a kinézetet szeretnénk használni.

Erre a hosszú-rövid módszerre példa:

Hosszú verzió:

<table style=”background-color:#cdcdcd; font-size:15px; color:#000000; font-family: times new roman;”>

<tr>

<td></td>

</tr>

</table>

Rövid verzió:

<table class=”tablazat”>

<tr>

<td></td>

</tr>

</table>

css oldala:

.tablazat{

background-color:#cdcdcd;

font-size:15px;

color:#000000;

font-family: times new roman;

}

Utóbbinál .tablazat {} segítségével tudjuk a css kódban ugyanaz megadni neki, amit fent a hosszabb módszernél, viszont itt akármelyik táblázatnál akarjuk használni ezt a stílust nem azt a hosszú kódot kell másolgatni a html fájlunkban, hanem csak a class=”tablazat” részt.

Megjegyzés: szabadság az egészben, hogy stílust tudsz adni az egész táblázatra vonatkozóan ha a table tag-be szúrod be, tudsz egyenként minden sorra külön kinézetet szabni ha a tr tag-be szúrod be, és oszloponként is ha a td tag-be szúrod be. Csili-vili, minden sor és oszlop különböző színűre beállítását is meg lehet csinálni 🙂

<table border=1 width=100 height=100>
<tr>
<td style=”background:#85E456;”></td><td style=”background:#569FE4;”></td><td style=”background:#E456C4;”></td>
</tr>
<tr>
<td style=”background:#E4565D;”></td><td style=”background:#56E4C8;”></td><td style=”background:#E4DF56;”></td>
</tr>
<tr>
<td style=”background:#56E485;”></td><td style=”background:#E47756;”></td><td style=”background:#6A56E4;”></td>
</tr>
</table>

Ha minden igaz ilyen végeredményt kellett kapnotok:

kocka

És talán a legjobb példa a táblázatra, egy órarend 🙂

<table border=1>
<tr>
<td></td><td>Hétfő</td><td>Kedd</td><td>Szerda</td><td>Csütörtök</td><td>Péntek</td>
</tr>
<tr>
<td>1. óra</td><td>Matematika</td><td>Történelem</td><td>-</td><td>Testnevelés</td><td>Osztályfőnöki</td>
</tr>
<tr>
<td>2. óra</td><td>Nyelvtan</td><td>Rajz</td><td>Irodalom</td><td>Angol</td><td>Német</td>
</tr>
<tr>
<td>3. óra</td><td>Irodalom</td><td>Informatika</td><td>Nyelvtan</td><td>Matematika</td><td>Irodalom</td>
</tr>
<tr>
<td>4. óra</td><td>-</td><td>Földrajz</td><td>Ének</td><td>Történelem</td><td>Nyelvtan</td>
</tr>
<tr>
<td>5. óra</td><td>Testnevelés</td><td>Angol</td><td>Matematika</td><td>-</td><td>Angol</td>
</tr>
</table>

orarend

3.2 Minta oldal és css magyarázat

Minta oldal letöltése

style.css online megnyitása

Kezdjük rögtön az első elemmel!

body{

}

Amit ide írsz az az egész oldalra érvényes lesz! Megadhatsz betűtípust, betűszínt, oldal háttérszínt stb…

#tartalom{

}

A html fájlban a legnagyobb doboznak nevezett div tag stílusa. Mivel ebben van benne a másik három doboz, ennek a stílusa érvényes lesz a másik háromra is, mivel ez a szülő!

#tartalom .fejlec{

}

#tartalom .szoveg{

}

#tartalom .lablec{

}

Ezek a három kisebb doboz stílusát változtatják, lehet velük játszadozni, átírkálni a dolgokat, pl színeket, betűméretet, és megnézni az eredményt!

h1{

}

A címsorokról tudni kell, hogy van alapértelmezett beállításuk. Tehát ha te nem nyúlsz hozzá css-ben a h1 tag-hez, vagyis ezt a részt kitörlöd a css fájlból, a címsor akkor sem fog visszaváltozni sima egyszerű szöveggé! Lehet nekik plusz elemeket adni, mint ahogy én is tettem a példában, pl minden betű nagybetű legyen (uppercase), vagy a betűtípusa különbözzön a body részben megadotthoz képest!

Egy-két stíluselem magyarázat:

text-align:justify;

A szöveget amit írsz sorkizárttá teszi, kb mint MS Word-ben.

margin:0px;

padding:0px;

A margin és padding is távolság adásra jó. A kettő között a különbséget úgy tudnám legegyszerűbben leírni, hogy a margin külső távolság, a padding pedig belső. Ha dobozba gondolkodunk akkor a margin a doboz alja és a föld között ad távolságot (jelen esetben másik doboztól való távolságot), míg a padding a doboz alja és a doboz belsejében lévő dolgok között ad távolságot (pl szöveget bentebb helyezi a szélétől). A példában sok helyen használtam mindkettő megoldást, ezekkel is el lehet játszani, átírni a számokat kisebbre nagyobbra, és nézni mi a végeredmény.

3.1 Minta oldal és html magyarázat

Minta weboldal letöltése

index.html megtekintése

A zip fájl kicsomagolása után két fájlt láttok: index.html és style.css.

Ebben a leckében a html oldalát magyarázom el sorról sorra, mi mit csinál, szóval nyissátok meg az index.html fájlt Notepad++-ban!

A <head> tag-ben leírtak benne vannak az első leckében arra nem térnék ki megint, a fontosabb dolgok a <body> részben vannak!

Először is, én 4 “részre” osztottam a honlapot, nevezzük őket dobozoknak! Első dobozom a <div id=”tartalom”> kóddal kezdődik, ha ráálltok az egérrel, akkor mutatni fogja hogy melyik a bezáró tag-je ennek a résznek, az alján található, ez a legnagyobb doboz, ebbe pakoltam bele minden mást. Ebben található három másik doboz, amik egyenrangúak, tehát egymás “mellett” vannak, egyik sincs benne a másikban.

Ez a három doboz a fejlec, szoveg, lablec neveket kapták. A fejlec dobozban csak egy 1-es szintű címsor van, az üdvözlő szöveg. A szoveg dobozban van maga az oldalnak a szövege, és a lablec dobozban az oldal néhány szavas infoja, copyright, honlap készítője, stb.

Remélem jól látható a dobozok felépítése az alábbi minta oldalon, ezekkel sokat lehet variálni, de egy a lényeg, az alárendelt doboz mindig örökli a szülő doboz stílus-beállításait! Ha ezt nem szeretnénk akkor mindent külön dobozba pakoljunk, és az egyik záró tagje a másik doboz nyitó tagje előtt legyen! Ne csússzanak egybe!

2. Linkek, egyszerűbb tag-ek, egyszerű stíluselemek

Az előző leckében eddig jutottunk, ez van jelenleg az index.html fájlunkban:

<html>

 

<head>
<title>Első honlapom</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″>
</head>

 

<body>
Helló világ! Ez az én első honlapom!
</body>

 

</html>

Legegyszerűbb tag szerintem a <p></p> nyitó-záró páros, ez egy egyszerű paragrafus tag, vagyis bekezdés, minden <p></p> tag közé írt szöveget új bekezdésben fog megjeleníteni, nagyjából mind MS Word-ben.

Adjuk hozzá a <p> taget a meglévő kódunkhoz, és toldjuk meg még egy kis szöveggel!

<html>

 

<head>
<title>Első honlapom</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″>
</head>

 

<body>
<p>Helló világ! Ez az én első honlapom!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</body>

 

</html>

Stílust is tudunk hozzáadni, például legyen az alsó szöveg dőlt és legyen a betűszíne piros!

<html>

 

<head>
<title>Első honlapom</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″>
</head>

 

<body>
<p>Helló világ! Ez az én első honlapom!</p>
<p style=”font-style:italic; color:red;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</body>

 

</html>

Megjegyzés: alap színeket lehet szöveggel kiírni mint piros=red; de komolyabb színeknél ajánlatos színkódot használni, ami egy 6 jegyű szám # jellel az elején, pl fehér = #FFFFFF; fekete = #000000;

Csináljunk egy egyszerű linket az oldalra!
Alap link elhelyezése az oldalon : <a href=”link url-je, elérhetősége, fájl neve“>Link neve</a>

<html>

 

<head>
<title>Első honlapom</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″>
</head>

 

<body>
<p>Helló világ! Ez az én első honlapom!</p>
<p style=”font-style:italic; color:red;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<a href=”elso.html”>Első oldal</a>
</body>

 

</html>

Ha most csinálunk egy új üres lapot Notepad-ban, és felírjuk az alap tag-eket amit az első leckében kezdetnek írtam, és elmentjük ugyanabba a mappába elso.html néven, ahol az index.html fájlunk is van, akkor ha megnyitjuk böngészőben az index.html fájlt, majd rákattintunk a linkünkre, akkor az az elso.html fájlt nyitja meg 🙂
Fontos! Minden honlaphoz tartozó elem ugyanabban a mappában legyen, minden fájl, ami kapcsolódik a honlaphoz, képek, aloldalak, mind egy mappában legyenek! Ha mappán belül másik mappában vannak akkor a következőképpen kell a linket módosítani: <a href=”mappaneve/elso.html“>Első oldal</a>

Adjunk a linknek is egy kis stílust! Legyen minden betűje a link nevének nagybetű, és legyen félkövér!

<html>

 

<head>
<title>Első honlapom</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″>
</head>

 

<body>
<p>Helló világ! Ez az én első honlapom!</p>
<p style=”font-style:italic; color:red;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p style=”font-weight:bold; text-transform:uppercase;”><a href=”elso.html”>Első oldal</a></p>
</body>

 

</html>

Mint a MS Word-ben itt is vannak címsorok, amiket <h1> től <h6> tag-ig terjed, és alapértelmezett stílussal rendelkeznek, tehát ha css-ben nem is adsz meg hozzájuk semmit, a header tag-ek akkor is másképp fognak megjelenni a sima szövegtől. Nagyobb betűméret, félkövér betűstílus, ezek változnak attól függően hogy hányas szintű header tag-et használunk, <h1> a legmagasabb 1. szintű címsor, innen csökken le <h6>-ig.

Ennyit az alap dolgokról, következő leckében a div tag-ról fogok írni, és végigvezetem a dolgot egy egyszerű honlapon keresztül!

1. Kezdetek kezdete

Kezdeném teljesen a 0-ról 🙂
Egy nagyon kezdetleges honlap két fájlból is állhat: egy index.html és egy style.css fájlból. Természetesen ezeket máshogy is elnevezhetjük a lényeg a kiterjesztés legyen megfelelő. A főoldalunknak célszerű az index elnevezést adni, mert a böngészők ezt veszik alapértelmezett főoldalnak.

Az html fájlban lesz a honlapnak a váza, a css pedig a kinézetet szolgálja. Megmutatom majd, hogy lehet html fájlba is css kódot tenni, de az átlátható kód a jó kód, ezért legyen meg mindennek a saját helye, és a saját fájlja.

Nyissunk meg jegyzettömböt, vagy inkább egy Notepad ++-t. Én utóbbit ajánlanám, szépen színez és tagol mindent.

Írjuk fel a következőket:

<html>

 

<head>
</head>

 

<body>
</body>

 

</html>

Csináljunk valahol egy üres mappát neki, és mentsük bele a fájlt index.html néven. Ha most megnyitjátok a mappát ahova mentettétek, látni fogjátok benne a fájlt, és az ikonja olyan lesz mint az alapértelmezett böngészőtöké. Ez bizony már egy weboldal, amit ha rákattintasz megnyitja a böngésződbe 🙂 Persze teljesen fehér, üres oldalt fogtok kapni, de ettől még ezt már lehet weboldalnak hívni.

Ezeket a formulákat: <html>,<head>,<body>   tag-eknek hívják (ejtsd: teg), mindennek van nyitó és záró tag-je. Fontos, hogy mindig minden tag le legyen zárva, ami meg van nyitva, különben összefolynak a dolgok!

Töltsük fel adatokkal!

Nyissuk meg az index.html fájlunkat Notepad-ban, és adjunk a honlapunknak címet! Egészítsük ki a következőkkel:

<html>

 

<head>
<title>Első honlapom</title>
</head>

 

<body>
</body>

 

</html>

Mivel magyarok vagyunk, és használunk ékezetes betűket, ezért, hogy ne jelenjenek meg kriksz-kraksz betűk az ékezetes helyett, tegyük bele a következő kódot is!

<html>

 

<head>
<title>Első honlapom</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″>
</head>

 

<body>
</body>

 

</html>

Most ha nyomtok egy mentést, és megnyitjátok a fájlt, a böngészőtökben felül kiírja hogy “Első honlapom”. Ha még mindig nem alakítja át megfelelő magyar betűkre a karaktereket, akkor Notepad++-ban felül Kódolás–>Átalakítás UTF-8-ra, majd mentsétek el újra, és így próbáljátok újra megnyitni az index.html fájlt, vagy ha megvan nyitva, akkor nyomjatok egy frissítést.

Töltsük fel egy kis szöveggel! A body tag-ek közé írjatok be valamilyen szöveget!

<html>

 

<head>
<title>Első honlapom</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″>
</head>

 

<body>

Helló világ! Ez az én első honlapom!
</body>

 

</html>

Mentsük el és gyönyörködjünk az eredményben, ez már egy html-ben kódolt weboldal!

A 2. leckében kicsit belelendülünk a dolgokba, csinálunk linkeket, megmutatom miket lehet egyszerű paragrafusban csinálni, és hogy lehet html-be beépíteni stíluselemeket!

Használati útmutató

A letöltött .zip fájlokban különböző .txt szöveges fájlokat találtok, olyan megnevezéssel ami tükrözi mi található benne, gondolok itt arra hogy pl “css”, vagy “linkek kódja”. De ha megnyitjátok és azzal kezdődik hogy “<style type=”text/css”>”, akkor abban a fájlban css kód található.

Lesz olyan design-csomag ahova írtam külön fájlba infokat, mit hogyan hova kell tenni, ez főleg a régebben készítettem gportalos designokra jellemző, utóbbi időben ezzel már nem nagyon foglalkozom, csak beillesztek minden kódot egy-egy szöveges fájlba és csókolom, ezért gondoltam hogy írok egy összefoglalót, ha valaki mégis elakadna.

1.lépés (Css kód beillesztés)

Csináljatok módulkezelőben egy egyszerű modult, amit jobbra vagy balra helyeztek. Nyissátok meg szerkesztőben (kis ceruza ikon), vegyétek ki a pipát a “Modulfejléc megjelenítve” és “Modulkeret és -háttér megjelenítve” mellől. Váltsatok át Forráskód nézetre, amit többféleképpen is megtehettek, vagy felül rákattintotok a Forráskód nevű gombra, vagy felül a Szövegszerkesztő melletti legördülő menüben kiválasztjátok a a “htmlarea” vagy “kódnézet” . Ezután másoljátok be ide a kódot, az egészet, nehogy lemaradjon a végéről a “</style>” , mert akkor bekavarodik az egész.

Van, hogy több css kódot tartalmazó fájl is van, (általában kettő), ez azért van mert az oldal stílusát én személy szerint szeretem különválasztani a linkek stílusától, átláthatóbb lesz az egész, ha később bele akarunk nyúlni. Ugyanígy kell a többinél is eljárni, új egyszerű modul létrehozása, majd kódnézetben beilleszteni a kód egészét amit a szöveges fájlban találtok.

2. lépés (Linkek beillesztése)

Találtok olyan fájlt mint pl “fejlécen lévő linkek”, ebben nem css kód van, ebben a linkek kódja van, div-es elhelyezéssel együtt, nem különbözik az eljárás a css beillesztésétől, egyszerű modul készítése modulkezelőben, majd modulfejléc/háttér kivétel, majd kódnézetben kód teljes egésze beillesztése. Ne maradjon le a kódokból akár egy kacsacsőr, vagy pontosvessző sem! 🙂 Töltöttem már órákat azzal, hogy kerestem a hibát a kódomban hogy miért nem működik, és kiderült hogy egy nyavalyás “;” jelet elfelejtettem tenni valahova.

 

 

Css alapok/stílusok

A css-t lehet megadni az index fájlodban is, de jobb, ha külön style.css fájlt hozol létre, és abban csinálod! Én most így fogom elmagyarázni.

Először is, hogy az oldaladon megjelenjenek azok a kódok, amiket a stílusban adsz meg, az index-ed <head> tagjába be kell ezt tenned:

<link rel=”StyleSheet” type=”text/css” href=”style.css”>

És most nyissunk egy új lapot jegyzettömben. Elmenti style.css néven kelle majd a végén. A stílusban, aminek stílust akarsz adni, aztúgy lehet megcsinálni, hogy írsz egy nevet, majd egy { jelet, ezután beírod a stíliusokat, majd lezárod egy } jellel.

Kezdjük a legegyszerűbbel, maga az egész oldal stílusával:

body, table, td, tr {
font-family: arial;
color: #E6E6E6;
font-size: 10px;
font-weight: bold;
text-align: justify;
cursor: default;}

Az egész oldal stílusa azt jelenti, hogy amit a body részbe írsz sima szöveget, vagyis nem linket, nem félkövér/dőlt/aláhúzott szöveget, csak sima szöveget, annak határozhatod meg a betűméretét, betűtípusát, betűszínét.

Nézzük részenként:

font-family: arial; –> Oldalon a szöveg betűtípusa, előnyös olyat megadni, ami miden gépen alapjáraton megvan, mint a times new, roman, arial, arial black, verdana, georgia.

color: #e6e6e6; –> Oldalon a szöveg betűszíne, ide egy színkód kell, ezt találsz az oldalamon is, vagy képszerkesztő programokban is keverhetsz színt, mint photoshop, vagy photofiltreben.

font-size: 10px; –> Oldalon a szöveg betűmérete.

font-wegiht: bold; –>Itt adhatod meg hogy az oldalon a betű félkövér legyen, dőlt, vagy aláhúzott, vagy sima. A félkövér: bold, dőlt: italic, aláhúzott: underline, sima: normal.

text-align: justify: –>Szöveg elrendezése, a justify sorkizártat jelent.

cursor: default; –> kurzor, itt az általános nyíl van beállítva, de írhatsz ide crosshair, vagy ne-resize, stb… Én ezt a hármat szoktam használni de sok fajta van még, de azoknak a nevét nem tudom kívűlről xD

Most jöjjön az egyszerű link:

A:link { color:#273242; font-family: arial; font-weight:normal; text-decoration:none; }
A:visited { color:#273242; font-family: arial; font-weight:normal; ;text-decoration:none; }
A:active { color:#273242; font-family: arial; font-weight:normal; text-decoration:none; }
A:hover { color:#E19CAC; font-family: arial; font-weight:normal; text-decoration:none; }

Az egyszerű link alatt azt a linket értem, amit csak simán így kódolsz:
<a href=”http://valami.hu”>Valami.hu</a>

Ezt azért fontos elmondani, mert majd lesz később egy másik fajta linkelés is, amiről majd írni fogok.

Most nézzük az egyeszerű linkelést: a “link/visited/active” ez a három jelenti voltaképpen a linket alaphelyzetben, a hover pedig mikor ráviszed az egeret a linkre.

A color-nál értelemszerűen a linkek színét tudod beállítani, a font-family a betűtípust, a font-weight hogy félkövér legyen, dőlt, aláhúzott vagy sima, a text-decoration pedig, hogy legyen-e “dekorálva” valamivel, én itt eddig mé egyet használtam az underline-t xD.
Persze még itt is betudsz tenni mást is, nem csak ezeket amiket írtam, ha nem szeretnéd hogy olyan legyen a betűmérete, mint az oldalon a szövegnek akkor be tudod tenni azt is, csak beírod még oda a végére, persze még a } jel elé, hogy font-size: 12px.

Az oldalon be tudod állítani a stílus segítségével, hogy a félkövér, dőlt, illetve aláhúzott szövegnek milyen legyen a színe, háttérszíne, betűmérete, stb..

A következőképpen:

b { color:#1F1724; bakcground-color:#000000; font-size: 9px; }i { color:#1F1724; border-bottom: 2px solid #121212; font-size: 9px }

u { color:#1F1724; font-size: 9px }

 

Kezdjük is: color: szín, background-color: háttérszín, font-size: betűméret.
És egy kicsit kitérnék erre a keretre is, mert itt aztán nagyon lehet variálni 🙂

border: 1px solid #44FFF4; —>

Szöveg

border-bottom: 2px solid #7FFFA3; —>

Szöveg

border-bottom: 1px dotted #FB3FAE; —>

Szöveg

border-bottom: 2px dotted #FFFE96; border-top:1px solid #00FE48; —>

Szöveg

border-left: 10px solid #EB67FF; —>

Szöveg

border-left: 10px solid #EB67FF; border-bottom:2px solid #EB67FF; —>

Szöveg

 

 

Zizegős menü készítése

Most ezt a menüt fogjuk elkészíteni:

1.Új dokumentum –> állítsd be ezeket a paramétereket:

 

2. Text tool –> válassz egy betűtípust, állítsd be a betűméretet és a szöveg színét.

 

3. Írd a képre a legelső menüd nevét.

 

4. Katt a szövegre –> F8–> Movie clip, és legyen a neve “home_mc” .

 

5. Alul is írd át “home_mc”-re!

 

6. Katt kétszer a szövegre. Ezután ctrl+x , majd csinálj egy új layert és azon “ctrl+shift+v”.

 

7. A layer1-re katt –> brush tool –> a ceruza legyen áthúzva kis piros vonallal, a háttérszín pedig legyen pl bordó.

 

8. Én az ecset nagyságának felülről a 4.-et választottam. Rajzolj a szöveg alá ilyen firkát.

 

9. Katt a layer1-re így kijelölöd a “firkát” majd F8 –>movie clip és itt már mindegy milyen nevet adsz neki.

 

10. Alul “Filters” –> a + jelre kattints –> Blur –> 10-es értéket adj meg.

 

11. Felül a frameknél kb a 8-as framenél nyomj F6-ot.

 

12. Katt vissza a legelső frame-re. Katt a firkára –> Properties panel –> Color –> Aplha –> 0%.

 

13. Az első és nyolcas frame közé kattints jobb egérgombbal –> Create motion tween.

 

14. Layer2 –> nyolcas frame-en F6 –> Katt a szövegre –> F8 –> movie clip. Ezután nyomj négyszer F6-ot, hogy legyen a nyolcas után még négy framed.

 

15.A kilences frame-re katt majd a szövegre –> alul filters –> + jel –> Blur –> 5-ös érték.Így fog kinézni a szöveg:

 

16. Majd kihagyjuk a tizes frame-t, és a tizenegyesen megint katt a szövegre –> Filters –> Blur –> 5. Menjünk vissza a Scene1-re.

 

17. Innentől már csak az Invisible button-t kell megcsinálni, az action layer-t, és kész is. Vagyis ami ezután jön az teljesen megegyezik a Flash menü 1 25. lépés utáni résszel, valamint a Flash menü 2 17. lépése utáni résszel.

Ha le szeretnéd tölteni a mintát, mert valamit nem értettél, akkor: Katt ide!