Tartalomjegyzék

Mindet ÖsszecsukjaMindet Kinyitja Összecsuk/Kinyit Tartalomjegyzék

EDIT and Note Teszt magyar

Létrehozás üres lapból.


A fájl különböző módon való mentése.
A már mentett dokumentum szerkesztése.
Navigációs teszt,
Bezárás, újratöltés teszt
 
Amennyiben használ Dictionary switcher kiegészítőt az automatikus nyelvfelismeréshez adja meg a
 <html lang="hu"> 
<meta http-equiv="Content-Language" content="hu">


Mivel egy teljesen üres lapból indultunk valószínűleg egy lap feliratot is szeretne megadni.
Írja be a
<title>az ön lapfejlécét</title>
valamilyen külső html szerkesztő alkalmazást használva. Mentse a dokumentumot a külső alkalmazásban, majd töltse újra a lapot.

wyswyg szerkesztés teszt 11

ez egy bekezdés

ez egy division

fontkészlet fontformázás

ez Arial betűtípus
ez Tmes roman betűtípus
ez Curier betűtípus
ez Verdana betűtípus
ez Tahoma betűtípus
ez Comic sans MS

betűméret 1
betűméret 2
betűméret 3
betűméret 4
betűméret 5
betűméret 6
betűméret 7
ez egy kiemelt szöveg ez egy dőtl szöveg ez egy aláhúzott szöveg ez egy áthúzott szöveg ez egy alulírott szöveg ez egy felüliírott szöveg (+formázás eltávolítás)

szövegkiemelés háttér szövegkiemelés betűszín mindkettő

bekezdés formázás

bekezdés bal behúzás bekezdés bal behúzás bekezdés bal behúzás

bekezdés jobbra bekezdés jobbra bekezdés jobbra bekezdés jobbra

bekezdés középre  bekezdés középre bekezdés középre bekezdés középre

bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt bekezdés sorkizárt

bekezdés növelése bekezdés növelése behúzása bekezdés növelése bekezdés növelése bekezdés növelése bekezdés növelése bekezdés növelése bekezdés növelése bekezdés növelése bekezdés növelése bekezdés növelése bekezdés növelése bekezdés növelése bekezdés növelése bekezdés növelése

bekezdés csökkentése bekezdés csökkentése bekezdés csökkentése bekezdés csökkentése bekezdés csökkentése bekezdés csökkentése bekezdés csökkentése bekezdés csökkentése bekezdés csökkentése bekezdés csökkentése bekezdés csökkentése bekezdés csökkentése bekezdés csökkentése bekezdés csökkentése bekezdés

  1. sorszámozott lista
  2. sorszámozott lista
  3. sorszámozott lista
  4. sorszámozott lista
  • felsorolás lista
  • felsorolás lista

táblázat beillesztés

tábla felirat fent fejlécek nincsenek max méret 100%
ide írjonide írjon
ide írjonide írjon


tábla felirat lent, fejlécek balra, méret 400 px keret nincs
fejléc1ide írjon
fejléc1ide írjon


tábla felirat bal fejléc fent 800px padding nincs space nincs keret 2
fejléc1fejléc2
ide írjonide írjon
tábla felirat jobb fejléc mindkettő 50%
fejléc1fejléc2
fejléc2ide írjon


formázott táblázat az Elem attribútum beillesztés segítségével

Adjunk a táblánknak egy id-t pl. table 1 (a szóköz mentéskor automatikusan javítva lesz az id-ben)

formázott tábla max méret 50% megadva  módosítva 80%-ra
ez a cella 30%
ez a cella 70%
ide írjonide írjon

Vízszintes vonal beszúrás 


közbenső mentés csak a szöveg (Mentés ahonnan megnyitotta komponensek nélkül ) ITT

Visszatérés: táblázat szerkesztés folytatása

horgony könyvjelző beszúrás

kijelölt szöveg az én könyvjelző szövegem a kijelölést lecserélve könyvjelző a sor végén

nincs megadva kijelölt szöveg saját könyvjelző beillesztése

Ellenőrizze a beszúrt könyvjelzőket az Oldalsáv panel könyvjelző nézet panelén.

kép beillesztése

kép beillesztés URL címet adva

(nyissuk meg előbb egy új lapfülön azt  az URl-t amit be akarunk szúrni, másoljuk a linket a vágólapra) beszúrás itt kicsinyítsük le a képet, jelöljük ki majd az Elem attribútum beszúrással adjuk meg a kép a width height értékeit. FONTOS hogy a képet egy bekezdésbe illesszük különben nem tudjuk kijelölni!

Mentsük a fájlt itt a Mentés ahonnan megnyitotta komponensek ugyanabba a könyvtárba paranccsal és nézzük a linket

A fájl elmentése után a kép elmentésre kerül a lokális könyvtárba!


kép beillesztés a helyi fájl rendszerről

1. Nézzük hogy az előzőleg elmentett kép tényleg megvan-e szúrjuk be itt. Ha a kép beillesztése párbeszéd ablakban a Mégsem gombot választja egy Fájl kiválasztás párbeszéd ablak jelenik meg. válassza ki innen a kívánt fájlt  a megfelelő helyről. checkmark.png Mint, láthatjuk a kép meg van! Mégpedig az eredeti mérettel. Adjunk neki egy title és egy alt attribútumot a Elem Attribútum beszúrása paranccsal. ( * A firefoxban a title attribútum a kép feliratának a megjelenítésére, az alt attribútum arra szolgál, hogyha a képek megjelenítése le van tiltva a böngészőben.  az alt attribútumban megadott képfelirat jelenik meg helyette).

2. Próbáljunk valami más képet beilleszteni a lokális fájlrendszerről, ami már eddig is megvolt, de ne arról a helyről válasszunk ahova  a jelenleg szerkesztett weblap eredetileg mentve volt. 

A képeket általában a

c:\Documents and Settings\felhasználónév\Dokumentumok\Képek\ könyvtárban tároljuk.

 A helyköz karakterekkel nem is olyan nagy a baj,  pl. c:\Documents and Settings\felhasználonev\Dokumentumok\Smiley\ ez még működik DE!

Sajnos az ékezetes karakterekkel elnevezett könyvtárakkal itt egy kis bajunk lesz a képek beillesztésekor. Próbáljuk ki ,mint látjuk sajnos az ékezetes könyvtárnév miatt a kép nem fog megjelenni. 

Nevezzük át a könyvtárat c:\Documents and Settings\felhasználonev\Dokumentumok\Kepek\ ( ez egy korlátozás, de megoldja a problémánkat)

Próbáljuk újra: így működik!

3. Hogyan illesszünk be úgynevezett klikkelhető kép hivatkozásokat.

Illesszük be először a képet jelöljük ki, majd nyomjuk meg a  Hivatkozás beillesztése gombot.és írjuk be a link URL-jét, vagy egy helyi fájl URL-jét. Ha elrontottuk az url-t vagy mégsem adtunk meg semmit, jelöljük ki a képet még egyszer nyomjuk meg a Hivatkozás eltávolítása gombot, majd adjuk meg újra. A klikkelhető képen megjelenő keretet egy stíluslap hivatkozással tudjuk megadni (pl, a img {border 0;}  az összes klikkelhető kép linkről el fogja távolítani a keretet), vagy egyedileg is eltávolíthatjuk. Kattintsunk a képre és az Elem Attribútum beszúrása parancsnál válasszuk a inline style megadását és írjuk be hogy  border: 0.

4. Képek beillesztése táblázat cellába

Hozzunk létre egy egyszerű táblázatot

ide írjonide írjon
ide írjonide illeszük a képeterre a képre is írhatunk title elemet


Linkek beillesztése

1. Link beillesztése a link párbeszéd panelen keresztül

1.a. Válasszuk ki előbb egy külön megnyitott lapfülön azt az URL-t amire hivatkozni akarunk, vagy másoljuk ki a hivatkozást a könyvjelző listáról a Tulajdonságok paranccsal, jelöljük ki a hivatkozás szövegét, majd nyissuk meg a Hivatkozás beillesztése párbeszéd ablakot, és másoljuk be a vágólapon levő URL-t.

1.b. 1. Hivatkozzunk a párbeszéd panelen való megadással egy olyan könyvjelző linkre, ami ebben a dokumentumban van a teljes URL megadásával. Ennek inkább akkor van értelme, ha egy másik fájlban levő könyvjelzőre hivatkozunk, de a példaképpen nézzük most ezt itt!
(Tipp.Nézzük meg ennek a dokumentumnak a könyvjelzőit, az oldalsávon, navigáljunk a kívánt helyre, másoljuk le az URL-t a vágólapra. Írjuk be majd jelöljük ki a hivatkozás szöveget, majd nyomjuk meg a Hivatkozás beillesztés gombot, szedjük fel az URL-t a vágólapról.
file:///C:/Edit_and_Note/mentes_1/magyar.htm#az_én_könyvjelző_szövegem_a_kijelölést_lecserélve

1.b.2 Hivatkozzunk ugyanebben a dokumentumban csak a könyvjelzőre
#tábla_id ahol megadtuk
#az_én_könyvjelző_szövegem_a_kijelölést_lecserélve

#tabla_1 amit korábban megadtunk

próbáljuk ki a linkekett. (Kapcsoljuk ki átmenetileg a szerkesztőt.)
  Figyeljük meg, hogy az ékezetes betűknél sajnos a könyvjelzős linkek esetén is baj van! Míg a fenti teljes URL megadásban az URL-hez illesztett könyvjelző link ékezetes formában is működik, ugyanúgy az oldalsávból is, azonban a csak könyvjelzőként megadott link esetén az ékezetek nem fognak működni!
(*Technikai magyarázat:. Az ékezetes hibák mind a linkek, mind a képek beillesztése esetén  feltehetőleg a beépített parancs escape/unescape illetve az URl helyes encoding/decoding problémáiból adódhatnak amit nem sikerült megoldanom tökéletesen 

execCommand createLink

execCommand insertimage

lásd: Editor parancsok http://www.mozilla.org/editor/midas-spec.html)

ÁLTALÁBAN NE HASZNÁLJUNK TEHÁT olyan könyvtárat AMINEK A NEVE ÉKEZETEKET TARTALMAZ, ÉS LEHETŐLEG HELYETTESÍTSÜK A HELYKÖZ KARAKTERT pl. _ karakterrel!

1.c javascript link beillesztése: javascript


Speciális elemek beillesztése

Bulletek Stickik

Helyezzük a kurzort a beillesztési pontra és nyomjuk meg a Bullet (például ide)

1
beillesztése gombot. A dokumentációban részletezettek szerint a Bulettek nem a kijelölési pontnál fognak megjelenni, hanem azt az elemet követőn, ami a kijelölési pontot tartalmazta, Tehát sem a bullet sem a sticki nem a szövegen belüli kijelölési pontnál jelenik meg. Húzzuk utána amegfelelő helyre.

ezt a Bulettet nem húztam el sehová technikailag ott van ahová be lett szúrva a szövegbe. Szúrjunk itt be egy másik bulletet és vigyük a címsor elé.
2
 Mielőtt a helyére húznánk, változtassuk meg a színét. mondjuk kékre. Kapcsoljuk ki az szerkesztőlécet, majd kattintsunk a pipettán, és válasszunk egy színt. Kapcsoljuk ki a színkiválasztót, utána kapcsoljuk vissza a szerkesztőt, és húzzuk a helyére a bulletet.

Stickik beillesztése esetén ugyanez a helyzet. Helyezzük ide a kurzort, és illesszünk be egy stickit. Ha akarunk adunk fejlécet a stickinek ami megjelenik az oldalsávon, ha nem akarunk nem adunk. 
1
Editable sticky text

Ezzel a sticikivel nem csináltam seemit ott hagytam ahol elhelyezkedik a dokumentumban. 




Lehetőség van arra, hogy a stickit összecsukjuk, s az átlátszóságát megváltoztatva ráhúzzuk a szöveg azon részére  ahol valami megjegyzést fűztünk a szöveghez. Hasonlón a bullethez megváltoztathatjuk a színét (ehhez nem kell kikapcsolni a szerkesztőt) az átlátszóság megváltoztatásához viszont igen. Amikor a sticki törzsszövegét szerkeszteni akarjuk ügyeljünk a megjelenő mozgató/méretező keretre, és lehetőség szerint ezt egyáltalán NE HASZNÁLJUK! A stickik WSYWYG szerkeszthetők. Lehetőség van csak a sticki szerkesztőt bekapcsolni a szerkesztés indításakor ekkor csak a sticky törzse szerkeszthető. Ügyeljünk arra, hogyha teljes szerkesztő módban vagyunk a sticky fejléce és a dátum is átírató, de a az oldalsávon az eredeti fejléc és dátum fog ,megjelenni. Ugyanúgy a navigációs eszköztáron is, ha valaki ezt is használja. Ez pl. arra is jó, ,hogyha továbbküldtük a dokumentumot valakinek, a fogadó fél vagy (akár magunk is)  akár rendelkezik a teljes Edit and Note kiegészítővel, akár a jobb sarokban elhelyezkedő efitor eszköztárról bekapcsolja a teljes szerkesztő módot, a stickik fejlécét dátumát átírhatja, további megjegyzést fűzve ahhoz, de a dokumentumban megmarad a sticky eredeti fejléce és dátuma. Hozzunk létre egy ilyen mondjuk zöld színű stickit. itt. Változtassuk meg a színét, írjuk be a szöveget, méretezzük az alsó kis méretező ikonon húzva a kurzort akkorára hogy a fejléc szöveg egy sorban látszódjon. Ha a sticky törzsbe kattintunk a méretező/húzó keret megjelenik. Ezzel ne csináljunk semmit írjuk a szöveget a stickibe.
2
Ügyeljünk arra hogyha egy összecsukott sticki letakarja a szöveget, akkor oda nem tudunk beilleszteni semmit. Húzzuk el a stickit előbb, aztán vissza az eredeti helyére.

kérdés válasz szekciók   beillesztése

Q1 Kérdés felirata...
a Kérdés Válasz szekciókra példákat a dokumentációban láthattunk.

A1 Válasz felirata...


formázott könyvjelző beillesztése

Ez egy szövegrészlet amibe könyvjelzőt szeretnék illeszteni hogy később amikor olvasom a dokumentumot  ide tudjak ugrani. (Ebben az esetben, helyezzük a kurzort valahová a szövegben és ne jelöljünk ki semmit. )

Ez egy olyan szövegrészlet amiben van egy kulcsszó  ami azonosítja a szövegrészletet és később amikor újraolvasom a szöveget kulcsszó szerint ide szeretnék majd még visszatérni. (Ebben az esetben, jelöljük ki a kulcsszót és helyezzük el a könyvjelzőt)

Ez egy olyan szövegrészlet amiben van egy kulcs gondolat amihez egy könyvjelzős megjegyzést szeretnék fűzni. (Ebben az esetben, jelöljük ki a kulcs szót és helyezzük el a könyvjelzőt, adjuk meg a saját megjegyzésünket)

Ellenőrizzük a könyvjelzőket amiket beillesztettünk az oldalsávon. Szerencsére itt nem lesz gondunk az ékezetes linkekkel, mivel a könyvjelzők belső id-je szerint fogunk navigálni. #Bn

Jegyzet hivatkozás beillesztése

Számtalanszor előfordul hogy a szövegben "...egy bizonyos idézetre..." [1]

vagy szövegrészletre vonatkozó hivatkozásokat [2]szeretnénk elhelyezni.

Az első esetben helyezzük a kurzort közvetlenül az idézet szövege mögé, a , marker elé majd nyomjuk meg a Jegyzet hivatkozás gombot és töltsük ki az idézet mire vonatkozik.

A második esetben jelöljük ki azt a részletet, amire a lábjegyzet hivatkozás vonatkozik nyomjuk meg a Jegyzet hivatkozás gombot és töltsük ki az idézet mire vonatkozik.

Tartalomjegyzék létrehozása

Ellenőrizzük a linkeket. Kapcsoljuk ki átmenetileg a szerkesztő eszköztárt. Az ékezetes linkek itt helyesen működnek. A stickiket és a bulleteket nézzük át hogy jó helyen vannak-e  a tartalomjegyzék beillesztést követően és húzzuk őket a megfelelő helyre.

Jelen esetben csak Vissza/előre navigációt helyezünk erre az oldalra, alulra és felülre is.

Miután ezt a Címsor bekezdést a tartalom jegyzék generálása után hoztuk létre törölnünk kell a tartalomjegyzéket a tartalom jegyzék ikonra kattintással. A vázlat nézetet is újra kell generálnunk. A navigációt nem kell törölnünk.



[1] idézet:  Figyelmesen olvassa el a sticky 1-ben foglaltakat
[2] szövegrészletre vonatkozó hivatkozás:  lásd - dokumentáció jegyzet hivatkozások