• Pagina 1 din 1
  • 1
Comunitatea uCoz » Configurări ale sistemului uCoz » Configurarea design-ului » Instrucțiuni, coduri și sfaturi legate de Design! (Imagini de fundal, culori, ceas flash, imagini, tabele, etc)
Instrucțiuni, coduri și sfaturi legate de Design!
Raver
Postări: 1227
Reputație: 70
Mesaj # 1 | 7:17 PM 02/05/2012


  • Cum să schimb dimensiunea unei poze\tabel\alte obiecte?


    • Dimensiunea imaginilor, tabelelor, șamd, poate fi schimbată prin intermediul atributelor
    Cod
    width="" height=""

    O dimensiune poate fi fixă, specificată în pixeli, sau variabilă, în procente.


  • Cum să modific imaginea de fundal?


    • Puteți schimba imaginea de fundal a paginii, celulelor tabelului și a întregului tabel.

    Pentru a schimba culoarea paginii întregi găsiți tag-ul < body >,
    alegeți culoarea dorită și adăugați această secvența body

    Cod
    <body bgcolor="Color number">


    ca în acest exemplu:

    Cod
    <body bgcolor="#008000">


    Dacă doriți să plasați o imagine ca și imagine de fundal, găsiți din nou tag-ul < body >,
    Alegeți imaginea necesară, încărcați-o în server și adăugați această secvență

    Cod
    <body background="link to the file">


    ca în acest exemplu:

    Cod
    <body background="http://www.ucoz.com/image/1.jpeg">


    Atunci când utilizați o imagine ca și backround (imagine de fundal), există o metodă numită "substrate" a unui background (fixation)
    Pentru a fixa imaginea de fundal (background-ul), adăugați următoarea secvență

    Cod
    bgproperties="fixed"


    ca în acest exemplu:

    Cod
    <body background="http://www.ucoz.com/image/1.jpeg" bgproperties="fixed">
    Be the change you want to see in the world. M Gandhi.
    Raver
    Postări: 1227
    Reputație: 70
    Mesaj # 2 | 9:06 PM 03/05/2012
    Tabele

    Să luăm exemplul clasic al unui tabel 3х3.

    Code
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
             <tr>
              <td width="33%">Data</td>
              <td width="33%">Data</td>
              <td width="34%">Data</td>
             </tr>
             <tr>
              <td width="33%">Data</td>
              <td width="33%">Data</td>
              <td width="34%">Data</td>
             </tr>
             <tr>
              <td width="33%">Data</td>
              <td width="33%">Data</td>
              <td width="34%">Data</td>
             </tr>
    </table>


    Avem un tabel la care dorim să schimbăm, de exemplu, celula 2.3 (2-rândul, 3-căsuța)
    Trebuie să găsim căsuțele 2.3. Știm că rândurile sunt indicate de tag-urile <tr>,
    și coloanele de tagurile - by <td>, astfel că, în tabelul nostru avem 3 perechi <tr></tr> și 9 perechi <td><td> și când ne uităm la cod putem spune că avem 3 rânduri cu 3 coloane (căsuțe) fiecare, vom modifica 2.3, ceea ce înseamnă că vom sări peste prima pereche <tr></tr> și 3 perechi <td><td> și vom merge spre cea de-a doua pereche <tr></tr> unde toate acțiunile noastre vor avea loc. Aceasta este perechea:

    Code
    <tr>
              <td width="33%">Data</td>
              <td width="33%">Data</td>
              <td width="34%">Data</td>
             </tr>


    Aici, luăm celula 3 (<td width="34%">Data</td>) și schimbăm, imaginea de fundal (background-ul) din aceasta, așa cum am făcut-o în body – alegem culoarea și adăugăm următoarea secvență:

    Code
    bgcolor="#FF0000"


    Ca în acest examplu:

    Code
    <td width="34%" bgcolor="#FF0000">Data</td>


    la fel cu imaginea

    Code
    <td width="34%" background="link to the file">Data</td>


    ca în acest exemplu:

    Code
    <td width="34%" background="http://www.ucoz.com/image/1.jpeg">Data</td>


    Dacă doriți să schimbați culoarea întregului table și fiecare celulă, ar trebui să procedăm astfel:

    Găsim tabelul:

    Code
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
             <tr>
              <td width="33%">Data</td>
              <td width="33%">Data</td>
              <td width="34%">Data</td>
             </tr>
             <tr>
              <td width="33%">Data</td>
              <td width="33%">Data</td>
              <td width="34%">Data</td>
             </tr>
             <tr>
              <td width="33%">Data</td>
              <td width="33%">Data</td>
              <td width="34%">Data</td>
             </tr>
    </table>


    și să adăugăm următorul tag la tabel <table>

    Code
    bgcolor="#008000"


    ca în acest exemplu:

    Code
    <table border="1" cellpadding="0" cellspacing="0" width="100%" bgcolor="#008000">


    Pentru a stabili o imagine ca și background (imagine fundal) vedeți exemplele de mai sus.

    Code
    <table border="1" cellpadding="0" cellspacing="0" width="100%" background="http://www.ucoz.com/image/1.jpeg">
    Be the change you want to see in the world. M Gandhi.
    Raver
    Postări: 1227
    Reputație: 70
    Mesaj # 3 | 9:23 PM 03/05/2012
  • Cum să creez un link?

    Tag-ul unui link:
    Code
    <a></a>

    atributul “href” este răspunzător cu adresa link-ului

    Code
    <a href="http://ucoz.ru/">Creează propriul website</a>


  • Cum să fac o linie de derulare (scrolling line)?

    O linie de tip derulare, este adăugată prin intermediul tag-urilor
    Code
    <marquee></marquee>


    Exemplu:
    Code
    <marquee>uCoz Servicii Web</marquee>


    Exsită astfel de atribute precum:
    scrolldelay="" – întârziere (delay)
    direction="" – direcția mișcării

    Code
    <marquee scrolldelay="80" direction="left">uCoz Servicii Web</marquee>


    Dacă doriți să o stopați atunci când indicăm prin intermediul cursorulul, atungi adăugați:

    Code
    <marquee scrolldelay="80" direction="left" onmouseover='this.stop()' onmouseout='this.start()' >uCoz Web Service</marquee>


  • Cum să introduc o imagine?

    Utilizați tag-ul <img> care are atributele de dimensiune (vedeți mai sus) și un atribut pentru link-ul imaginii

    Code
    <img src="http://ucoz.ru/image.jpg" width="775" height="328">


  • Cum să creez o pagină pentru diferitele rezoluții ale ecranului?

    Trebuie să specificați lățimea tabelelor, nefixate, de exemplu nu în pixeli ci doar în procente (width="100%")

  • Cum pot modifica culoarea font-ului?

    Există două modalități - fie prin CSS sau tag-ul <font>

    - prin intermediul CSS-ului

    Code
    body {color:#FFFFFF}


    - prin intermediul tag-ului FONT

    Code
    <font color="#FF0000">Text</font>


  • Am schimbat șablonul (template-ul) website-ului (nu în mod automat), dar design-ul forum-ului nu s-a schimbat. Cum pot remedia situația?

    Design-ul fiecărui modul este schimbat separat dacă funcția “aplicare la toate paginile” nu este activată.

  • Am introdus Panoul de tag-uri (MiniChat) în pagina principală, cum aș putea să îl adaug la toate celelalte pagini fără să introduc codul pe fiecare pagină în mod separat

    Puteți face acest lucru prin intermediul Constructorului de Șabloane. (Templates Builder)

  • Cum pot face o imagine în loc de “Download/Descărcare”?

    Trebuie să folosiți tag-ul <img> tag în interiorul tag-ului pentru link <a></a>
    ca în acest exemplu
    Code
    <a href="Link"><img src="http://ucoz.com/image.jpg" width="775" height="328"></a>
    Be the change you want to see in the world. M Gandhi.
    • Raver
    Postări: 1227
    Reputație: 70
    Mesaj # 4 | 4:51 PM 04/05/2012
  • Cum să pun pe website un ceas Flash?

    Pentru aceasta puteți utiliza un serviciu special: http://www.clocklink.com/

    Aici avem un exemplu:



    Codul pentru instalarea ceasului este (Am utilizat 3 culori pentru exemplificare):

    Albastru

    Code
    <embed src="http://www.clocklink.com/clocks/5010-blue.swf?TimeZone=GMT0300&"  width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">


    Roșu

    Code
    <embed src="http://www.clocklink.com/clocks/5010-red.swf?TimeZone=GMT0300&"  width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">


    Verde

    Code
    <embed src="http://www.clocklink.com/clocks/5010-green.swf?TimeZone=GMT0300&" width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">


    Puteți, de asemenea instala propriul ceas flash.

    Code
    <embed src="LINK TO THE CLOCK"  width="222" height="66" wmode="transparent" type="application/x-shockwave-flash">


  • Cum să instalăm flash-ul

    Codul de bază:

    Code
    <object type="application/x-shockwave-flash"
    data="flash.swf" width="300" height="100">
    <param name="movie" value="flash.swf" />
    <param name="quality" value="low" />
    </object>


    Și o variantă mai completă:

    Code

    <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="filename.swf" pluginspage="http://www.macromedia.com/      shockwave/download/" type="application/x-shockwave-flash"       width="100%" height="100%"></embed></object>
    Be the change you want to see in the world. M Gandhi.
    • Raver
    Postări: 1227
    Reputație: 70
    Mesaj # 5 | 8:12 PM 04/05/2012
  • Cum să îmbinăm tranziția dintre pagini?

    Prin intermediul meta tag-urilor. Adăugați meta tag-urile din lista de mai jos la un șablon (template):

    Code
    <META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (efect la intrarea pe o pagină)      
    <META HTTP-EQUIV="Page-Exit" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (efect la părăsirea unei pagini)      
    <META HTTP-EQUIV="Site-Enter" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (efect la intrarea pe un website)      
    <META HTTP-EQUIV="Site-Exit" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (effect la ieșirea de pe un website)


    Duration stabilește timpul în secunde, Transition – numărului unui efect

    Lista efectelor:

    0 - Box in (Căsuța interioară)
    1 - Box out (Căsuță exterioară)
    2 - Circle in (Circular interior)
    3 - Circle out (Circular exterior)
    4 - Wipe up (Șterge în sus)
    5 - Wipe down (Șterge în jos)
    6 - Wipe right (Șterge în dreapta)
    7 - Wipe left (Șterge în stânga)
    8 - Vertical blinds (Flash vertical)
    9 - Horizontal blinds (Flash orizontal)
    10 - Checkboard across (Tablă de șah peste)
    11 - Checkboard down (Tablă de șah în jos)
    12 - Random dissolve (Dizolvare aleatoare)
    13 - Split vertical in (Separare verticală în interior)
    14 - Split vertical out (Separare verticală în exterior)
    15 - Split horizontal in (Separare orizontală în interior)
    16 - Split horizontal out (Separare orizontală în exterior)
    17 - Strips left down (Dungi în stânga jos)
    18 - Strips left up (Dungi în stânga sus)
    19 - Strips right down (Dungi în dreapta jos)
    20 - Strips right up (Dungi în dreapta sus)
    21 - Random bars horizontal (Bare aleatoare orizontale)
    22 - Random bars vertical (Bare aleatoare verticale)
    23 - Random (Aleator)

    P.S. Din cunoștințele pe care le avem funcționează doar în Internet Explorer.
    Be the change you want to see in the world. M Gandhi.
    • Raver
    Postări: 1227
    Reputație: 70
    Mesaj # 6 | 8:24 PM 04/05/2012
  • Cum să găsim și să edităm o clasă CSS

    1) În Browser apăsați pe Vizualizare -> Sursa ( Cum văd codul sursă a unei pagini web (in browsere diferite)?.
    2) Gasiți elementul pe care doriți să-l schimbăm și vedeți ce clasă are acesta.
    3) Copiați numele clasei respective.
    4) Deschideți Open Style Sheets (CSS) din Panoul de Control -> Administrarea Design-ului
    5) Găsiți clasa respectivă în CSS.
    4) Modificați parametrii după cum doriți.

    Dacă nu există o clasă separată pentru element, atunci adăugați-l la șablon (template) (prin Panoul de Control) și la CSS-ul cu parametrii necesari.

    Exemplu:
    De multe ori dorim să schimbăm dimensiunea caracterelor din postările de pe forum. Deschideți orice temă (thread) nouă și copiați o parte din text. Deschideți Vizualizare -> Sursă și găsiți această parte. Vedeți ce clasă are – postați textul are clasa ="posttdmessage".

    Deschideți CSS-ul din forum și găsiți "posttdmessage" în secțiunea /* Vizualizările Postărilor*/.

    Cod
    .posttdmessage {padding:5px;font-size:8pt;}


    Putem vedea că doar completarea (padding-ul) și dimensiunea caracterelor (font size) sunt specificate. Putem schimba dimensiunea și adăuga culoarea, iar clasa va arăta în felul următor:

    Cod
    .posttdmessage {padding:5px;font-size:10pt;color:#CCCCCC;}
    Be the change you want to see in the world. M Gandhi.
    • Raver
    Postări: 1227
    Reputație: 70
    Mesaj # 7 | 8:52 PM 04/05/2012
  • Cum să facem o nouă căsuță (box) precum calendar, sondaj etc. ?

    Panoul de Control -> Administrarea Design-ului -> Editor pagini (Paginile Site-ului).

    1. Găsiți codul 'News Calendars' (Calendarul Știrilor). Acesta va include $NEWS_CALENDAR$. (Poate fi codul oricărui modul)
    2. Copiere din <!-- --> în <!--/-->. Codul va arăta astfel:

    Quote
    <!-- -->
    <?if($NEWS_CALENDAR$)?>
    <table border="0" cellpadding="0" cellspacing="0" width="202">
    <tr><td height="21" align="center" style="background:url('http://src.ucoz.net/t/771/18.gif') #59B9FF;color:#000000;"><b>News calendar</b></td></tr>
    <tr><td align="center" style="background:url('http://src.ucoz.net/t/771/19.gif') #F1F1F1;padding:5px;">$NEWS_CALENDAR$</td></tr>
    <tr><td><img src="http://src.ucoz.net/t/771/20.gif" border="0"></td></tr>
    </table><br>
    <?endif?>
    <!--/-->


    3. Alegeți unde să lipiți (paste) codul. Sub care modul: Sondaje, Mini-chat, etc.
    4. Lipiți-l după <!--/--> al modulului selectat. (Exemplu, Sondaje - $POLL$)
    5. Ștergeți <?if($NEWS_CALENDAR$)?> & <?endif?> din cod.

    6. Gsăți 'News calendar'. Este titlul unei căsuțe. Puteți să-ș înlocuiți cu titlul dvs.
    7. Găsiți $NEWS_CALENDAR$ & și ștergeți-l. Acela este conținutul căsuței dvs.
    8. În locul unde a fost $NEWS_CALENDAR$, plasați conținutul propriu.

    Exemplu:
    (Roșu - Conținutul noii 'căsuțe', Albastru - Titlul noii 'căsuțe', Violet - Sub care noua 'căsuță' este plasată)

    Quote
    <!-- -->
    <?if($LOGIN_FORM$)?>
    <table border="0" cellpadding="0" cellspacing="0" width="202">
    <tr><td height="21" align="center" style="background:url('http://src.ucoz.net/t/771/21.gif') #59B9FF;color:#000000;"><b>Login form</b></td></tr>
    <tr><td align="center" style="background:url('http://src.ucoz.net/t/771/19.gif') #F1F1F1;padding:5px;">$LOGIN_FORM$</td></tr>
    <tr><td><img src="http://src.ucoz.net/t/771/20.gif" border="0"></td></tr>
    </table><br>
    <?endif?>
    <!--/-->

    <!-- -->
    <table border="0" cellpadding="0" cellspacing="0" width="202">
    <tr><td height="21" align="center" style="background:url('http://src.ucoz.net/t/771/18.gif') #59B9FF;color:#000000;"><b>Titlul Dorit</b></td></tr>
    <tr><td align="center" style="background:url('http://src.ucoz.net/t/771/19.gif') #F1F1F1;padding:5px;">Place Your Content Here</td></tr>
    <tr><td><img src="http://src.ucoz.net/t/771/20.gif" border="0"></td></tr>
    </table><br>
    <!--/-->
    Be the change you want to see in the world. M Gandhi.
    • Denisa
    Postări: 71
    Reputație: 0
    Mesaj # 8 | 6:13 PM 07/02/2013
    As dori niste sfaturi,ce elemente interesante se pot adauga in site? cum se creeaza un site dinamic de succes?
    Material modificat de Denisa - Joi, 07/02/2013, 8:27 PM
    Raver
    Postări: 1227
    Reputație: 70
    Mesaj # 9 | 9:52 PM 07/02/2013
    Denisa, găsești niște sfaturi generale pe blogul ucoz despre ce trebuie ținut cont înainte de a lansa un website, precum și cele 5 elemente de bază în crearea site-ului.
    Be the change you want to see in the world. M Gandhi.
    Denisa
    Postări: 71
    Reputație: 0
    Mesaj # 10 | 2:05 AM 08/02/2013
    Raver Ok multumesc.
    [GM]xIceCube
    Postări: 1
    Reputație: 0
    Mesaj # 11 | 4:20 PM 15/02/2013
    Publică text
    Cod
    <br>                        <br><br><br><p><br></p><p><br></p><br><div style="text-align: center;"><b style="color: rgb(30, 144, 255);"><span style="font-size: 8pt; font-family: 'Monotype Corsiva'; text-align: right;"><font size="6"><a href="http://www.darklegion-mt2.ucoz.com">Principală</a> <a href="http://www.darklegion-mt2.ucoz.com/forum">Forum </a> </font></span><a href="$PERSONAL_PAGE_LINK$" title="Profilul meu" style="font-family: 'Monotype Corsiva'; font-size: xx-large; text-align: right;">Profilul meu</a><span style="font-family: 'Monotype Corsiva'; font-size: xx-large; text-align: right;">  </span><a href="$REGISTER_LINK$" title="Înregistrare" style="font-family: 'Monotype Corsiva'; font-size: xx-large; text-align: right;">Înregistrare</a><span style="font-family: 'Monotype Corsiva'; font-size: xx-large; text-align: right;">  </span><a href="$LOGOUT_LINK$" title="Deconectare" style="font-family: 'Monotype Corsiva'; font-size: xx-large; text-align: right;">Deconectare</a><span style="font-family: 'Monotype Corsiva'; font-size: xx-large; text-align: right;">  </span><a href="$LOGIN_LINK$" title="Autentificare" style="font-family: 'Monotype Corsiva'; font-size: xx-large; text-align: right;">Autentificare</a><span style="font-size: 8pt; text-align: center; font-family: 'Monotype Corsiva';">       </span></b><b style="color: rgb(30, 144, 255);"><span style="font-size: 8pt; text-align: center; font-family: 'Monotype Corsiva';">  </span></b><img src="/ccink_facebook.png"></div><table cellpadding="0" cellspacing="0" border="0" width="100%" height="23" style="text-align: right; border: 1px solid rgb(53, 46, 44);" 50%"="" align="left" class="topLink">  
    <tbody><tr><td width="50%" align="right" style="padding-right: 10px;" class="topLink"><h1><font style="font-size: 12pt;><<span style=" color:="" rgb(0,="" 0,="" 205);"=""><span style="color: rgb(0, 0, 205);"> <b><a href="$PERSONAL_PAGE_LINK$" title="Profilul meu">$USERNAME$</a> ,</b></span><span style="color: rgb(255, 165, 0);"> </span><span style="color: rgb(0, 0, 128);">Bine ați venit pe Forum </span><a href="http://www.darklegion-mt2.com" style="color: rgb(255, 165, 0); ">DarkLegion-Metin2</a> <b><font color="#ffa500">!</font></b></font></h1></td>
    </tr>
    </tbody></table>


    Cine ma poate ajuta si pe mine cum sa schimb culoarea scrisurilor " Forum", "Profilul meu " si acestea?! care au deja hydelink in ele ?

    Multumesc anticipat
    DJ_maximum
    Postări: 8
    Reputație: 0
    Mesaj # 12 | 12:21 PM 27/10/2013
    Am facut doua sit-uri si as vre s asterg unu dintre ei.Cum da facut ?

    Adăugat (27/10/2013, 11:21 AM)
    ---------------------------------------------
    mai am o intrebare unde de cautat <body> ca io il caut pe css si nu il gasesc!!
    sad

    ShoWoow
    Postări: 48
    Reputație: 0
    Mesaj # 13 | 2:08 PM 27/10/2013
    DJ_maximum, Intra in Panoul de Control si-ai sa gasesti acolo scris Sterge web site-u .
    Da cumva l-ai cautat si-n Partea Superioara a site-ului ca s-ar putea si acolo sa fie .. acum depinde daca vrei sa schimbi aceea imagine .
    ñ¡¢ø£åë
    Postări: 13
    Reputație: 0
    Mesaj # 14 | 1:40 AM 05/11/2013
    scuzatima dar eu nu inteleg cum sa fac un radio prin ucoz cine ar putea sa-mi explice asa ceva ,am incercat de multe ori dar tot nu inteleg nimik,
    Comunitatea uCoz » Configurări ale sistemului uCoz » Configurarea design-ului » Instrucțiuni, coduri și sfaturi legate de Design! (Imagini de fundal, culori, ceas flash, imagini, tabele, etc)
    • Pagina 1 din 1
    • 1
    Căutare: