Am vazut multe  intrebari pe aici despre cum iti editezi un template luat free de pe net Hai sa editam un template fara cunostinte xhtml fara cunostinte css fara cunostinte dreamweaver ....aaaa fara nici un fel de cunostinte....asta-i varianta pentru lenesi ).

Avem nevoie de :  bugzilla , notepad ++ , un template , si ceva poze personale pe care am vrea sa le introducem in templateul respectiv.

   http://www.freelayouts.com/templates/Unk...eview=true

Asta e templetul pe care il vom folosi. Nu stiu sigur la ce se refera "a edita un template"  dar in continuare noi vom schimba backgroundul, poza , textul, vom face linkurile catre ce vrem noi..adica vom schimba templateul asa cum dorim.

Pasul 1 : descarcam templateul si il dezarhivam
Observam imediat ca avem un folder numit "unknown"  , il deschidem si vedem inauntru 3 fisiere si un folder: un fisier cu extensia ".html"
  altul cu extensia ".css" , un folder denumit "images" unde sunt pozele siteului respectiv. Si mai e un fisier cu extensia ".txt" in care regasim licenta si drepturile de modificare si distribuire a templateului respectiv.

Pasul 2: lansam templetul in browser.
Pe fisierul cu extensia " .html " dam click pentru a deschide templatul cu browserul nostru (lectia de azi se va desfasura cu mozzila firefox..si toate explicatii vor fi bazate pe mozzila...deci daca nu folositi mozzila acum e timpul sa o faceti)...si tadam..iata templetul nostru deschis de browser dintr-un fisier ce exista in propriul nostru calculator...eu il am pe desktop...

Pasul 3 : pasul asta poate va sperie dar ...hmmm nu e deloc asa..e simplu ca buna ziua  ...deschidem fiserele cu extensia ".html" si cel cu extensia ".css" cu notepad++... daca dati click dreapta pe ele va apare o lista de unde alegeti "edit with notepad++"  foarte simplu.
In notepad++ acum tre sa aveti deschise doua documente..unul cu extensia ".html" si unul cu extensia " .css"  .Ceea ce vedeti voi in notepad++ sa nu va sperie deloc..ca oricum nu prea ne intereseaza...alea sunt codurile pentru siteul nostru.

Pasul 4: deschidem bugzilla.
Mergem pe templatul deschis de noi cu firefox si acolo deschidem bugzilla....
Bugzilla este un fel de...dar presupun ca stiti cu toti ce este bugzilla...preventiv am sa si spun totusi.
Bugzilla este un add-on al firefox (pentru ie este "dom inspector")
care desface pur si simplu o pagina web in toate codurile sale, in toate divurile, in toate elementele css-ului adica iti arata mura in gura orice element de pe pagina ta carei linii de cod ii corepunde.
Daca nu-l aveti ..descarcati-l....e gratuit....nu trebuie instalat nu nimic...il descarci , inchizi browserul si il deschizi iar si gata...devii coder ) .

Pasul 5.  pai la pasul 5 hai sa incepem sa schimbam chestii in siteul nostru. Pentru inceput sa schimbam ceva usor de tot ca sa nu ne incurcam la chestii putintel mai grele.
Deci vom face schimbari in pagina de html in pagina css si in pozele din template.  
Mergem la template....dupa cum spuneam si deschidem bugzilla.
Puteti sa va "jucati" cu bugzilla pe orice site online ce nu este facut in flash. Pana una alta avem nevoie de cateva butoane in bugzilla ce ne vor ajuta pe noi.
Cam asa va arata template-ul cu bugzilla deschis.

http://img140.imageshack.us/img140/7199/bugzillaox1.png

     Inspect: iti arata un patrat pe templatul nostru ce reprezinta un div...nu prea conteaza ce e ala div....e o bucata din site ce poate fi o poza ,un text,  un background etc. Divurile mari cuprind divuri mai mici...adica....adica veti vedea voi imediat.

      Html si css iti arata paginile html si css.

     Layout iti arata dimensiunile bucatilor din template.

     Style iti arata pagina de css in totalitatea ei.

Sa spunem ca vrem sa schimbam titlul. Momentan este UNKNOWN.
Daca apasam buton "inspect" si tinem cursorul pe portiunea pe care vrem sa o modificam (adica pe titlul UNKNOWN  de pe templateul nostru) observam ca in pagina de html ce bugzilla ne-o arata apare un dreptunghi colorat puternic.Acolo este codul ce "da nastere" ca sa zic asa titlului de pe template-ul nostru.
Asta e imaginea ce ne apare in bugzilla cand tinem cursorul pe titlu:


http://img112.imageshack.us/img112/7194/...tielo7.png

Memoram cateva indicatii despre locul pe care il indica bugzilla, asta ca sa nu schimbam altceva , si mergem la pagina html deschisa  cu notepad++ .Adica aveam ceva cu h1 , a href...si apoi "unknown" in bugzilla deci la pagina mea html din notepad++ caut exact acelas lucru....ceva cu h1, a href..aaa am gasit "UNKNOWN" ..sterg titlul ala si pun ce vreau eu..."TUTORIAL"  sa zicem. Apoi dau in notepad ++    file -save si ma duc la template-ul meu si dau reload la browser.....si voila..avem un titlu.
Hai sa schimbam din template-ul nostru acolo unde scrie
    
            About this template.

Deci mergem la templateul nostru unde e deschis si bugzilla , avem grija ca butonul inspect sa fie apasat ca bugzila sa ne arate exact unde se afla in cod ceea ce noi vrem sa schimbam....tinem cursorul pe "About this template" si dreptunghiul colorat puternic ne indica exact locul unde trebuie sa cautam in pagina html din notepad++ ...mergem acolo si scriem ce dorim noi. Salvam imediat schimbarea facuta mergem inapoi la template dam reload la browser si.....voila...gata schimbarea...Eu am scris " Template pentru webmaster forum".
Incet incet schimbam tot continutul , ce tine de text...foarte usor...si scriem ceea ce dorim noi.

Atentie...exact ce se vede in template exact aia schimbati..daca in template NU se vad niste ghilimele de exemplu si voi in cod le stergeti....naspa treaba..se strica totul...dar dati undo in notepad si totul revine la normal. Simplu nu!!!!!

Daca priviti codul in notepad++  veti observa si acolo ca sunt folosite diverse culori pentru codul respectiv ,ce e cu negru e ceea ce puteti schimba....mai simplu de atat.....
Bun ...acum hai sa punem ceva linkuri pe siteul nostru.

Din partea dreapta a siteului sub titlul "Categorii" avem o gramada de linkuri...cand tinem cursorul pe ele ne apare manuta deci stim ca acolo e link. buuuunnnn La fel facem si la linkuri ,apasam inspect din bugzilla mergem pe linkul respectiv si tinem cursorul pe el...in bugzilla ne apare ceva ce forma asta
(eu am tinut cursorul pe primul lunk de sub titlul "Categorii" si bugzilla mi-a aratat chestia asta:

<a href="#">Aliquam libero</a>


Acum observam "#"  si vedem ca e pus in ghilimele. Trebuie sa va spun ca absolut toate templateurile au la linkurile care nu duc nicaieri  semnul # deci aici sau in alt template , nu conteaza procedeul e la fel.
Mergem in notepad++ si cautam exact ceea ce ne-a aratat bugzilla la linkul pe care noi vrem sa-l modificam..adica chestia de mai sus. Identic modificam textul "Aliqua libero " cu descrierea unde vrem sa duca linkul sa zicem " webmaster net" .In notepad era scris cu negru deci avem voie sa modificam...dupa cum am spus...ce este cu negru...modifici fara grija. Apoi in loc de # scriem adresa unde ne duce linkul adica in cazul nostru adresa webmaster forum. Ghilimelele le lasam...doar #-ul il stergem si in locul lui scriem adresa :
           http://www.invatam.net/
Dam save ...mergem pa template-ul nostru dam reload si gata..avem un link pe template ce ne duce la forumul invatam.net
Ceea ce am facut acum este chiar o schimbare in codul efectiv html...deci cu prudenta  ..dar nu e grav..daca se intampla sa gresiti dati undo in notepad si o luati de unde ati ramas.
Acum haideti sa schimbam un link de pe template-ul nostru ce efectiv duce undeva.....


Dar despre asta maine seara...ca m-am plictisit teribil.
Maine discutam si despre poze..cum sa le inlocuim in template si despre backgrounduri si culorile din template.

si un post edit sa vedem ce am facut pana acum:
http://img84.imageshack.us/img84/3329/finalxy8.png

This post was last modified: 06-05-2008 05:20 PM by DarK4EveR.

*Pasul 1: Descarcam template-ul si dezarhivam continutul acestuia.

Observam imediat ca avem un "FOLDER" sau "DOSAR" sau "DIRECTOR" .  Vezi aici .

IDEM si pentru "inca un fisier denumit "images" "

* Si mai e unu cu extensia ".txt" care nu ne intereseaza...putem sa-l stergem.

CARE NE INTERESEAZA!!! Template-ul respectiv este FREE si poate fi folosit in anumite conditii. "license.txt" ne spune care sunt drepturile noastre asupra template-ului pe care tocmai l-am descarcat si pe care il vom folosi partial sau integral pentru a realiza un website.

Voi reveni cu comentarii dupa ce termini articolul/tutorialul.

am vrut sa editez ca sa corectez greselile dar nu pot....
cer doua lucruri....:
1 . sa corectezi tu  acolo unde ai specificat in postul tau
2 de ce nu pot sa-mi editez postul?!!!!
  testam sa vad daca pe asta il pot edita )
la templateuri te pricepi vad....ai citit pana si chestia aia pe care nu o citeste nimeni )

This post was last modified: 06-05-2008 05:28 AM by comosicus22.

A fost o perioada cand foloseam template-uri free de pe net pentru a experimenta si pentru a intelege mai bine cu ce se mananca xhtml+css, tableless designs, etc.

Si da, am "prostul" obicei de a citi tot! TOS-uri, License-uri, Privacy Policy, ETC. NU conteaza cat de lung e textul, daca ma intereseaza "chestia" respectiva, imi pierd, 5-10-15 minute pentru a citi totul cu atentie.

Orice post poate fi editat in maxim 60 de minute dupa ce ai dat "Post Reply".
Dupa 60 de minute, dreptul de editare iti este revocat. ( Asa sunt facute setarile la forumul asta de catre Dojo. )

comosicus22

nu mai avem continuare la ce ai inceput? este foarte educativ si merita mers mai departe

aaaaa
scuze...chiar credeam ca nu il citeste nimeni....ca e cam lung si se sperie lumea...
vroiam sa nu il mai termin.....dar promit ca am s-o fac
nu in seara asta insa..dar maine seara voi continua....

multumim mult e f educativ
daca ne arati si cum sa punem un script de forum ar fi ideal

Sa continuam...

Vom mai schimba cateva linkuri.......pe templateul respectiv avem si niste linkuri care duc undeva...adica duc la siteul de unde provine template-ul , la alte siteuri pe unde se gaseste templateul asta etc....
Sa revenim la situatia noastra....deci avem templateul la noi in calculator, fisierele siteului deschise cu notepad++ (cel cu extensia .html si cel cu extensia .css ) , mai avem deschis fisierul cu extensia .html cu browserul mozilla si bugzilla deschis.
Exact ca la schimbarea linkurilor de mai devreme procedam la schimbarea tuturor linkurilor....cand am schimbat un link ce nu ducea nicaieri am sters # dintre ghilimele si am scris in locul lui adresa ce o dorim....cand schimbam un link ce duce undeva , acum , in loc de # avem o intreaga adresa....stergem adresa si scriem alta pe care o dorim.

Sa mai facem un exercitiu....mergeti pe un lik la alegere in template-ul deschis cu mozilla...aveti grija ca butonul inspect de la bugzilla sa fie apasat si apoi tineti cursorul pe acel link ales...in acest moment observam ca bugzilla ne indica un dreptunghi colorat diferit ca contine un cod(codul din pagina html ce ii corespunde linkul respectiv)...nu ne intereseaza.
Mergem apoi in notepad++ la fisierul .html si cautam exact ceea ce ne indica bugzilla in dreptunghiul colorat diferit atunci cand tineam cursorul pe linkul ales.Si apoi stergem tot, tot ce ne arata bugzilla....si uite asa am sters de tot un link...dupa cum vedem pe templateul asta sunt destul de multe linkuri si in modul asta mai scapam de ele....
Folosind exact cele de mai sus am facut cateva modificari in template si acum arata asa( modificarile sunt subliniate):

http://img73.imageshack.us/img73/1730/jumate1zg3.jpg

si a doua jumatate:

http://img74.imageshack.us/img74/4855/jumate2ur5.jpg

(n-am stiut cum se le pun altfel....)
Hai sa schimbam acum poza aceea. Pai e simplu de tot...Mergem ...la folderul
templateului nostru (acolo unde sunt fisierele .html , .css  etc...) acolo vedem un alt folder care se numeste "images" . Acolo sunt imaginile ce le vedem noi pe template...cautam imaginea pe care vrem sa o inlocuim , si tinem minte dimensiunile pe care le are...(eu am tinut cursorul pe imaginea aia cu stanca si am observat ca are dimensiunile 466 pe 152 apoi am sters-o din folderul ala) .Apoi copiem o alta imagine pe care o dorim noi in acelas  folder dar atentie.....imaginea noastra trebuie sa aiba dimensiunile pe care le-a avut imaginea anterioara...in cazul nostru 466 pe 152 .(eu am inlocuit imaginea cu stanca cu o alta poza de dimensiuni identice pe care am denumit-o   bufnitaforum.jpg  )
Atat in ceea ce priveste noutatea...de aici mai departe e identic cu ce am facut pana acum...mergem la templateul nostru, avem grija ca butonul inspect sa fie apasat si tinem cursorul pe imaginea ce vrem sa o schimbam, bugzilla ne indica intr-un dreptunghi colorat puternic exact codul ce il are imaginea...observam in acel dreptunghi si dimensiunile noastre si denumirea pozei , ceva in genul :   images/img08.jpg  
Images e folderul unde am schimbat noi poza putin mai devreme, img08 e denumirea data pozei cu stanca de cei ce au facut templateul...noua nu ne ramane decat sa inlocuim denumirea veche cu numele pozei noastre ce am introdus-o mai devreme in folderul images. Deci mergem la fisierul html din notepad++ cautam exact ceea ce ne arata bugzilla , schimbam denumirea pozei vechi (adica img08.jpg) cu numele pozei noastre ,in cazul de fata cu bufnitaforum.jpg, salvam schimbarea facuta in notepad++ , mergem la templateul nostru si dam reload la browser...si gata..avem o noua imagine.

http://img73.imageshack.us/img73/1610/po...rumhy0.jpg


Daca ne uitam prin folderul images observam sa sunt si niste imagini ce reprezinta doar niste dungi....fiecare imagine are o denumire img01, img02, img03 etc....unele din aceste imagini(in special cele ce sunt "ca niste dungi"  si cele ce au doar culori , precum img04.jpg, img05.jpg ,img06.jpg , nu le gasim in fisierul .html din notepad++ ci le gasim in fisierul .css din notepad++ prin urmare acolo trebuie sa facem modificarile.
Haideti sa schimbam img04.jpg...procedeul e identic numai ca schimbarea o vom face in css de data asta...(in folderul images "studiem" poza ce vrem sa o schimbam si observam ...in cazul nostru ca are dimensiunile 540 pe 506).
Procuram o poza de aceleasi dimensiuni si o introducem in folderul images.
Mergem la templateul nostru..tinem cursorul intr-o zona ce nu ne va indica un text sau un cuvant (tinem cursorul pe culoarea ce poza pe care vrem sa o schimbam o are) bugzilla ne indica acum in jumatatea din dreapta codul css ce "da viata" imaginii noastre...mergem la fisierul .css de data aceasta din notepad++ si modificarile se fac in acelas fel ca mai inainte cand am modificat in html....adica in loc de denumirea imaginii vechi, img04.jpg, scriem denumirea imaginii noastre .Eu am facut o imagine de aceleasi dimensiuni si am denumit-o fond.jpg. Apoi am mers la fisierul css din notepad si unde scria img04.jpg ,am sters si am scris fond.jpg.
Aici aveti exact o poza cu indicatiile necesare :
http://img77.imageshack.us/img77/685/fondforumbh2.jpg

si aici dupa cateva modificari:

http://img71.imageshack.us/img71/1426/finalforumlg4.jpg

Pai..daca ar mai fi ceva....dati de stire.

                De retinut.

Orice poza de pe un template se combina cu graficul dupa o anumita regula ce tine de teoria culorilor.Incercati sa pastrati aceeasi tonalitate in toate pozelel schimbate astfel incat sa nu stricati aspectul.

Nu orice schimbare pe care o faceti este si functionala in template...depinde de marimea textului (de exemplu daca vreti sa inlocuiti un cuvant cu un roman de dragoste e posibil sa se modifice templateul naspa ) ) de tipul de layout, si nu mai stiu acum dar mai sunt... )

Daca vreti schimbari majore intr-un template e bine sa invatati ceea ce trebuie...metoda asta este una ce limiteaza dorintele voastre creative )

Sunt multe lucruri pe care ar trebui sa le schimbati intr-un template si fiecare necesita destule cunostinte. Este nevoie de a schimba date in head-ul documentului html , de a lega diferite pagini intre ele, de a modifica textul (culoare lui, tipul de font) si altele...dar asta inseamna sa stii html si css deci nu are sens sa visati la modificari radicale fara cunostinte solide.Si cand o sa aveti cunostintele necesare nu o sa mai aveti nevoie de templateuri pentru ca veti fi capabili sa faceti voi cum doriti )

(greseli sau completari ,observatii sau injuraturi...dati de stire)

This post was last modified: 06-11-2008 05:33 AM by comosicus22.

eu tot cu un template free o sa incep
ca sa faci de la zero e destul de greu si tb timp

Ca sa faci de la zero, ai nevoie de un singur lucru DETERMINARE . In momentul in care faci tu de la zero, indiferent cat de urat este layout-ul, indiferent cat de respingator este, va fi facut de tine, si vei sti cum ai facut fiecare bucatica din el. Vei invata ceva si incet incet, vei vedea ca nu ai nevoie de foarte mult timp pentru a face un site.

Faza cu template-urile, merge daca vrei sa inveti html mai repede, si anume, vezi  codul sursa, il stergi, si verifici ce a disparut din site, sau faci modificari, si apoi observi ce s-a modificat, astfel vei intelege ca un <img src"" /> introduce o poza, ca un <a href="" ></a> creeaza un link, si multe altele.

Bafta!
Oricum, dragut tutorialul, desi eu unul, nu m-as obosi cu bugzilla si ce ai mai zis tu pe acolo ( sunt subiectiv pt ca detest firefoxul si tot ce se termina in *zilla", mai putin Godzilla - The Movie ).

Eu cand am inceput, am folosit 1stpage2000, un editor text cu posibilitatea de preview si cu o tona de javascripts usor de adaugat si modificat.