   | |
| A fórum moderátora: KovJonas |
| uCoz közösség » Webmester-részleg » A honlap külalakjának testreszabása » Leírások, kódok és ötletek a külalakot illetően |
| Leírások, kódok és ötletek a külalakot illetően |
Amennyiben nem szeretnéd a teljes témát végigkutatni, használd az alábbi tartalomjegyzéket:
A képek, táblázatok és egyéb elemek szélességét a width (szélesség) és height (magasság) attribútumok határozzák meg. Kód width="" height="" A méret lehet fix (pixelekben van kifejezve) vagy változó (százalékban van kifejezve).
Itt CSS-ben kell dolgozni. Pontosabban a következő kódot kell használni: Kód body { background: #SZÍNKÓD; } Ahol be kell helyettesíteni a SZÍNKÓD szöveget a kívánt szín hexadecimális értékével, mint ebben a példában: Kód body { background: #dddddd; } Amennyiben kép hátteret szeretnél, töltsd fel a képet a tárhelyedre, majd használd a következő kódot: Kód body { background: url('KÉP_URL'); } Ahol be kell helyettesíteni a KÉP_URL szöveget a feltöltött kép abszolút vagy relatív URL-címével, például: Kód body { background: url('http://www.ucoz.hu/image/1.jpg'); } Amennyiben fix hátteret szeretnél, add hozzá a fenti kódhoz a következő tulajdonságot: Kód background-attachment:fixed; ...tehát a kód így fog kinézni: Kód body { background: url('http://www.ucoz.hu/image/1.jpg'); background-attachment: fixed; } vagy csak egyszerűen így: Kód body { background: url('http://www.ucoz.hu/image/1.jpg') fixed; } |
Táblázatok
Vegyünk egy klasszikus 3x3-as táblázatot példaként. Kód <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="33%">Adat</td> <td width="33%">Adat</td> <td width="34%">Adat</td> </tr> <tr> <td width="33%">Adat</td> <td width="33%">Adat</td> <td width="34%">Adat</td> </tr> <tr> <td width="33%">Adat</td> <td width="33%">Adat</td> <td width="34%">Adat</td> </tr> </table> Van egy táblázatunk, ahol a 2.3-as cellát szeretnénk módosítani (2 - sorszám, 3 - oszlop száma). A 2.3-as cellát kell megtalálnunk. A sorokat a <tr> tag jelöli, az oszlopokat pedig a <td> tagok. A mi táblázatunkban van 3 pár <tr> és 9 pár <td> tag, ha pedig jól megnézzük, összesen 3 sorunk és 3 oszlopunk van. Nekünk most a 2.3-as cella kell, tehát ugorjuk át az első pár <tr> tagot, és az első 3 <td>-t. A középen levő pár lesz az a pár, amelyben dolgozunk: Kód <tr> <td width="33%">Adat</td> <td width="33%">Adat</td> <td width="34%">Adat</td> </tr> Itt nekünk a harmadik <td> kell (<td width="34%">Adat</td>). Megváltoztathatjuk a háttér színét a következő attribútummal: Kód bgcolor="#ff0000" Tehát a végleges kód így fog kinézni: Kód <td width="34%" bgcolor="#ff0000">Adat</td> Ugyanúgy beállíthatunk háttérképet is: Kód <td width="34%" background="KÉP_URL_CÍME">Adat</td> Példa: Kód <td width="34%" background="http://www.ucoz.hu/image/1.jpg">Adat</td> Amennyiben a teljes táblázat (az összes cella) hátterét szeretnéd módosítani, keresd meg a táblázat kódját: Kód <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="33%">Adat</td> <td width="33%">Adat</td> <td width="34%">Adat</td> </tr> <tr> <td width="33%">Adat</td> <td width="33%">Adat</td> <td width="34%">Adat</td> </tr> <tr> <td width="33%">Adat</td> <td width="33%">Adat</td> <td width="34%">Adat</td> </tr> </table> majd a következő attribútumot adjuk hozzá a <table> taghoz: Kód bgcolor="#008000" akárcsak ebben a példában: Kód <table border="1" cellpadding="0" cellspacing="0" width="100%" bgcolor="#008000"> Kép esetén a fent leírt módon kell eljárni: Kód <table border="1" cellpadding="0" cellspacing="0" width="100%" background="http://www.ucoz.hu/image/1.jpg"> |
A link tagja: Kód <a></a> A "href" attribútum felelős az URL-cím megjelöléséért. Kód <a href="http://ucoz.hu/">Hozd létre ingyenes weboldaladat!</a> A mozgó csík alatt a szöveg mozgását értjük egy egyenes síkon. A mozgó csík tagjai: Kód <marquee></marquee> Például: Kód <marquee>uCoz Weboldalszerkesztő</marquee> Léteznek különböző attribútumok is: - scrolldelay="" = késeltetés - direction="" - irány Kód <marquee scrolldelay="80" direction="left">uCoz Weboldalszerkesztő</marquee> Ha szeretnéd leállítani a mozgást amikor rámutatsz a szövegre, ezt a kódot kell használnod: Kód <marquee scrolldelay="80" direction="left" onmouseover="this.stop();" onmouseout="this.start();" >uCoz Weboldalszerkesztő</marquee> Használd az <img> tagot, melyben használhatsz szélesség/magasság attribútumokat. A kép URL-címét a src attribútumban kell elhelyezni. Kód <img src="http://ucoz.hu/image.jpg" width="200" height="450" /> Használj responsive külalakot. - Egy bizonyos szövegnél használj <font> tagot. Kód <font color="#ff0000">Szöveg</font> - Egy bizonyos elemnél (osztály, ID vagy tagnév alapján) CSS-ben kell dolgoznod a color: #FF0000; tulajdonsággal, például: Kód body {color:#FF0000;} Mindegyik modul külalakját külön kell beállítani, ha a Jelenlegi design használata minden alkalmazott modulban opció nincs engedélyezve. Használd a Szerkesztőt. Egyszerűen csak illeszd be a kép kódját (<img>) egy linkbe (<a></a>): Kód <a href="LINK"><img src="http://ucoz.hu/image.jpg" /></a> |
Ehhez egy speciális szolgáltatást kell használnod, mint például a ClockLink-et. Itt egy példa:  Ennek az órának a kódja (3 színt használtam példaként): Kék: Kód <embed src="http://www.clocklink.com/clocks/5010-blue.swf?TimeZone=GMT0300&" width="222" height="66" wmode="transparent" type="application/x-shockwave-flash"> Piros: Kód <embed src="http://www.clocklink.com/clocks/5010-red.swf?TimeZone=GMT0300&" width="222" height="66" wmode="transparent" type="application/x-shockwave-flash"> Zöld: Kód <embed src="http://www.clocklink.com/clocks/5010-green.swf?TimeZone=GMT0300&" width="222" height="66" wmode="transparent" type="application/x-shockwave-flash"> Természetesen használhatsz saját órát is: Kód <embed src="LINK TO THE CLOCK" width="222" height="66" wmode="transparent" type="application/x-shockwave-flash"> Alapkód: Kód <object type="application/x-shockwave-flash" data="flash.swf" width="300" height="100"> <param name="movie" value="FAJLNEVE.swf" /> <param name="quality" value="low" /> </object> A fenti kód komplexebb formája: Kód <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#3,0,0,0" width="100%" height="100%"><param name="SRC" value="filename.swf"><embed src="FAJLNEVE.swf" pluginspage="http://www.macromedia.com/shockwave/download/" type="application/x-shockwave-flash" width="100%" height="100%"></embed></object> |
1) Kattints jobb egérgombbal a kívánt elemre, majd kattints az Elem megtekintése/megvizsgálása elemre. 2) Másold ki az elem osztályát (class). 3) Menj a Vezérlőpult » Külalak vezérlése » Stílusok táblázata (CSS) oldalra 4) Keresd meg a kimásolt osztályt. 5) Végezd el a kívánt módosításokat. Amennyiben nincs hasonló elem a CSS-ben, illesz be a végére egy újat, mint például: Kód .osztaly {text-align:center;} Példa: Sokan szeretnék megváltoztatni a fórumüzenetek betűinek méretét. Ahhoz, hogy megtudd, melyik osztály tartozik hozzá, kattints jobb gombbal az üzenetre, majd válaszd az Elem megtekintése/megvizsgálása elemre. Nézd meg, mi az osztály neve, majd keresd meg a CSS-ben (a fórumüzenetek osztálya .postTdMessage). Keresd meg a .postTdMessage elemet, és végezd el a kívánt módosításokat. |
webmester, remek
 
|
Font tag kiüti a HTML 5-ös szabványt, mivel HTML 5-ben nem használunk font tagot. Helyette pedig:
<span style="color: SZÍNKÓD;"></span> Vagy akármilyen más dolognak is adhatunk stílust, ha már előre le van deklarálva, pl, egy táblázat cella esetében: <td style="color: SZÍNKÓD;"></span> Ez a megoldás a legtöbb dologgal müködik, lehet az címsor (h1,h2,h3) táblázat cella, egy div. De jómagam ezeket sem használom, hanem egy osztályt, vagy ID-t adok az adott taghoz, majd CSS-ben adok neki értéket (a tiszta kód érdeke miatt). Ezt a HTML-ben formázós dolgot igazából sosem értettem, maximum cikkekben van értelme. Előre megadott helyeken mint pl. Userbar, vagy ilyesmi, nincs értelme HTML-be beleágyazott formázást végrehajtani. Régen a uCoz témáinak is szokása volt teleírni a HTML-t formázással (sablon elemeknél), nem tudom ez mennyire változott. |
Locky, majd frissítem a témát, ha több időm lesz
|
Már kb 3x elakartam 1x el is kezdtem HTML oktatós weboldalt csinálni (videóval), de egyrészt annyira nem volt rá érdeklődés, másrészt pedig nehéz volt logikai sorrendet felállítani.
Ezt csak azért írtam ide, hogy ha valakinek fontos a szabvány akkor úgyis elolvassa. |
Sziasztok! Tudnátok segíteni abban hogy hogyan tudnám ezt valami jópofa táblázatba rendezni? És ha esetleg felette egy gyors keresőt létre lehetne hozni az még tutibb lenne!
http://www.myvoipworld.com/index/prices/0-12 itt az országok neve és mennyisége állandó, csak az árak változnak néha amit egy excelből másolok be... Köszi!  Hozzáadva (21.10.2015, 09:43) Hozzáadva (21.10.2015, 16:48) |
bandee24, milyen formátumú a táblázatod? (Személyes véleményem szerint nem lehetséges importálni egy táblázat értékeit, de ha megadod a formátumot, megkérdezem valakitől.)
|
bigblog, nincs semmi előre gyártott táblázatom. A weboldalról tudom exportálni a Percdíjakat pdf vagy xml file-ba. ebből tudnék dolgozni. egy export esetén kapok egy ilyen file-t: http://myvoipworld.com/Rate/RateConfig.xls
Ennyim van meg az elképzelés, hogy jó lenne valamilyen formát adni neki. Ha megnézed most ennyit tudok egyszerűen kihozni ami elég tré: http://www.myvoipworld.com/index/prices/0-12 Ha kimásolom az xml-ből a két oszlopot és beillesztem vizuális szerkesztővel akkor ugyan pofás lesz, de a html kódja a formázás miatt meg fogja haladni a 60.000-et így nem tudom elmenteni. |
bandee24, egy új HTML fájlba illesztheted a táblázatot, amit bárhogy formázhatsz, és IFRAME segítségével megjelenítheted azt a weboldalon:
Kód <iframe src="HTML FÁJL LINKJE" width="100%" height="MAGASSÁG" border="0" frameborder="0"></iframe> A magasságot átírod a neked tetsző értékre. A HTML fájlban használd ezt a struktúrát a stilizáláshoz: Kód <div style="font-size: 10pt; font-family: 'Segoe UI', sans-serif;"> TÁBLÁZAT KÓDJA </div> |
| |||