Oldal 1 / 212»
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
bigblog
Nemzetközi fejlesztés
Üzenetek: 1643
Hírnév: 47

Üzenet # 1 | 15:15


  • Hogyan módosíthatom egy elem (kép/táblázat stb.) szélességét és magasságát?


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).


  • Hogyan módosíthatom a háttérképet?


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;
}

Ingyenes erőforrások uCoz-os honlapodra!

Weboldaladat itt mutathatod be! A túlzott spammolás a profil letiltását is eredményezheti.
bigblog
Nemzetközi fejlesztés
Üzenetek: 1643
Hírnév: 47

Üzenet # 2 | 16:25
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">

Ingyenes erőforrások uCoz-os honlapodra!

Weboldaladat itt mutathatod be! A túlzott spammolás a profil letiltását is eredményezheti.
bigblog
Nemzetközi fejlesztés
Üzenetek: 1643
Hírnév: 47

Üzenet # 3 | 17:12
  • Hogyan hozok létre egy linket?

    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>


  • Hogyan hozok létre egy mozgó csíkot (scrolling line)?

    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>


  • Hogyan illesztek be egy képet?

    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" />


  • Hogyan hozok létre egy olyan weboldalt, amely igazodik a képernyő felbontásához?

    Használj responsive külalakot.

  • Hogyan módosíthatom a betűszín?

    - 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;}


  • Módosítottam a honlap külalakját (nem automatikusan), de a fórum sablonja nem változott. Mit tehetek?

    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.

  • Beillesztettem a mini-chat kódját egy oldalra. Hogyan jeleníthetem meg azt minden oldalon?

    Használd a Szerkesztőt.

  • Letöltés szöveg helyett egy képet szeretnék tenni a letöltés linkjében. Hogyan tehetem?

    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>

    Ingyenes erőforrások uCoz-os honlapodra!

    Weboldaladat itt mutathatod be! A túlzott spammolás a profil letiltását is eredményezheti.
  • bigblog
    Nemzetközi fejlesztés
    Üzenetek: 1643
    Hírnév: 47

    Üzenet # 4 | 17:29
  • Flash óra elhelyezése a weboldalra

    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">


  • Flash telepítése

    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>

    Ingyenes erőforrások uCoz-os honlapodra!

    Weboldaladat itt mutathatod be! A túlzott spammolás a profil letiltását is eredményezheti.
  • bigblog
    Nemzetközi fejlesztés
    Üzenetek: 1643
    Hírnév: 47

    Üzenet # 5 | 17:43
  • Hogyan keressünk meg és módosítsunk egy CSS osztályt?

    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.
    Ingyenes erőforrások uCoz-os honlapodra!

    Weboldaladat itt mutathatod be! A túlzott spammolás a profil letiltását is eredményezheti.
  • webmester
    Üzenetek: 4
    Hírnév: 0

    Üzenet # 6 | 20:58
    Sziasztok,

    Kódok gyakorlása,tesztelése itt
    biggrin

    bigblog
    Nemzetközi fejlesztés
    Üzenetek: 1643
    Hírnév: 47

    Üzenet # 7 | 08:33
    webmester, remek smile up
    Ingyenes erőforrások uCoz-os honlapodra!

    Weboldaladat itt mutathatod be! A túlzott spammolás a profil letiltását is eredményezheti.
    KovJonas
    Lokalizációs menedzser
    Üzenetek: 396
    Hírnév: 29

    Üzenet # 8 | 19:58
    webmester, jó kis szerkesztő!
    Locky
    A fórum moderátora
    Üzenetek: 652
    Hírnév: 57

    Üzenet # 9 | 13:01
    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.
    bigblog
    Nemzetközi fejlesztés
    Üzenetek: 1643
    Hírnév: 47

    Üzenet # 10 | 13:37
    Locky, majd frissítem a témát, ha több időm lesz smile
    Ingyenes erőforrások uCoz-os honlapodra!

    Weboldaladat itt mutathatod be! A túlzott spammolás a profil letiltását is eredményezheti.
    Locky
    A fórum moderátora
    Üzenetek: 652
    Hírnév: 57

    Üzenet # 11 | 13:52
    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.
    bandee24
    Üzenetek: 26
    Hírnév: 2

    Üzenet # 12 | 17:48
    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! wacko

    Hozzáadva (21.10.2015, 09:43)
    ---------------------------------------------
    Addig eljutottam hogy csinálok egy táblázatot 490 sorral 2 oszloppal de hogy kerülnek bele az adatok? Az lenne a legjobb, ha a fileok közé feltöltöm a RateConfig.xls -t és abból automatikusan kitölti a táblázatot biggrin Ne akarjak sokat? biggrin :D biggrin

    Hozzáadva (21.10.2015, 16:48)
    ---------------------------------------------
    Valakinek valami ötlet? cry

    bigblog
    Nemzetközi fejlesztés
    Üzenetek: 1643
    Hírnév: 47

    Üzenet # 13 | 20:26
    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.)
    Ingyenes erőforrások uCoz-os honlapodra!

    Weboldaladat itt mutathatod be! A túlzott spammolás a profil letiltását is eredményezheti.
    bandee24
    Üzenetek: 26
    Hírnév: 2

    Üzenet # 14 | 08:58
    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.
    bigblog
    Nemzetközi fejlesztés
    Üzenetek: 1643
    Hírnév: 47

    Üzenet # 15 | 15:27
    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>

    Ingyenes erőforrások uCoz-os honlapodra!

    Weboldaladat itt mutathatod be! A túlzott spammolás a profil letiltását is eredményezheti.
    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
    Oldal 1 / 212»
    Keresés: