|
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! |
Dacă nu doriți să urmăriți întreaga temă, vă sfătuim să urmați link-urile de mai jos 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. 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.
|
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.
|
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> 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> 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"> Trebuie să specificați lățimea tabelelor, nefixate, de exemplu nu în pixeli ci doar în procente (width="100%") 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> Design-ul fiecărui modul este schimbat separat dacă funcția “aplicare la toate paginile” nu este activată. Puteți face acest lucru prin intermediul Constructorului de Șabloane. (Templates Builder) 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.
|
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"> 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.
|
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.
|
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.
|
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, 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.
|
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 |
Am facut doua sit-uri si as vre s asterg unu dintre ei.Cum da facut ?
Adăugat (27/10/2013, 11:21 AM) |
| |||
| |||