Iniţiere în coding #2 – Formatarea header-ului

Dacă aţi pierdut începutul tutorialului de iniţiere în coding, duceţi-vă aici.

Sper că aţi ajuns cu toţii la forma finală a themei indicată în tutorial, nu? Dacă n-aţi reuşit, încă mai puteţi pune întrebări articolului în cauză. Vă voi răspunde cât de rapid pot.

Înainte de toate, trebuie să ştiţi că vă trebuie ceva mai mult decât Notepad pentru a putea coda. Bine, nu spune nimeni că e imposibil cu Notepad, dar pentru că majoritatea dintre voi sunteţi la început, vă trebuie ceva ajutător. Eu folosesc şi recomand Notepad++. Un freeware care vă va face munca mult mai uşoară. Dacă aveţi alte programe, gen Dreamweaver sau mai ştiu eu ce, le puteţi folosi.

Pentru început e bine de ştiut că fără un design lucrat în Photoshop nu puteţi continua crearea themei. Am downloadat de la ThemeTation un psd al unei theme şi l-am modificat astfel încât să fie cât mai uşor de codat. A ieşit asta (vă rog să downloadaţi arhiva şi să deschideţi .psd-ul – aveţi nevoie de Adobe Photoshop).

Metoda mea este următoarea: tai din documentul .psd imagini pe care le introduc în thema creată la partea #1 a seriei de tutoriale. Alţii folosesc „Slice Tool” şi împart thema în mai multe, după care o salvează drept HTML, apoi se pun pe modificat. Eu n-am încercat a doua metodă, deci să nu vă aşteptaţi să o explic îndeaproape.

Începem! În ediţia de astăzi a tutorialului ne vom lega exclusiv de header. Vom încerca să transpunem din Photosop în thema noastră, astfel încât headerele să arate la fel, sau aproape la fel.

Creaţi în folderul themei, un alt folder care să se numească „img” pentru a salva şi păstra imaginile.

Vom deschide psd-ul cu Photoshop şi vom tăia o liniuţă subţire din header, pentru a o putea folosi ca background în header-ul themei noastre. O vom salva sub format .gif şi o vom numi „headbg”, după care o vom pune în folderul „img” din thema.

Hint: Folosiţi funcţia Save For Web and Devices pentru a salva imaginile special pentru web, în format .gif.

Editarea codului se face pornind de la style.css, unde vom adăuga ca şi background imaginea tocmai tăiată şi vom stabili, pe lângă lăţimea exactă a header-ului şi lungimea acestuia, ca să ne apropiem cât mai mult de ce apare în Photoshop. Secţiunea de header din style.css-ul meu arată aşa acum:

#header{
	float: left;
	width: 750px;
	height: 108px;
	background: #7d9c1f url('img/headbg.gif') repeat-x;}

Ca să şi explic puţin: am pus culoarea aceea la background ca să poată fi afişată atunci când imaginea nu se încarcă sau, dacă sunt persoane cu viteza mai mică la internet, până apare imaginea să nu rămână totul alb acolo. „repeat-x” face ca liniuţa aia pe care tocmai am decupat-o să fie repetată pe toată lăţimea header-ului.

Acum sunt două lucruri care apar în Photoshop, iar la voi pe pagină nu.

În primul rând, culoarea textului din header. În tutorial e alb, aici nu. Va trebui să ne întoarcem la style.css şi să adăugăm noi facilităţi div-ului header. Acum, secţiunea de header a style.css arată aşa:

#header{
	float: left;
	width: 750px;
	height: 108px;
	background: #7d9c1f url('img/headbg.gif') repeat-x;
	color: #FFFFFF;
}

#header a{
color: #FFFFFF;
text-decoration: none;}

Observaţi că am setat culoarea link-urilor şi a textului din header.

Acum, a doua diferenţă ar fi backgroundul. Dacă aveţi rezoluţii mai mari de 800×600 s-ar putea ca, pe lângă template-ul afişat în Photoshop, dacă vă uitaţi la varianta online, să vedeţi un background alb pe care ar fi mai simplu să-l umplem cu ceva, nu? Am ales să pun o culoare uniformă, care să se potrivească celei din header. Asfel, am modificat background-ul div-ului body astfel încât style.css arată aşa, acum:

body{
	margin: 0;
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
	text-align: center;
	vertical-align: top;
	background: #d7d39a;
	color: #000000;
}

Pentru astăzi cred că e destul. N-am făcut multe, dar cu paşi mici se ajunge departe. Dacă aveţi întrebări, sugestii sau dacă pur şi simplu nu vă iese ceva, puteţi oricând lăsa un comentariu.

P.S.: Aici nu vă invăţ să faceţi o themă profesională pentru blog. Eu doar vă arat cum se ajunge de la un template în Photoshop la o thema WordPress.

    1. Pingback: Scurte de Luni #44 :) « ☺ Crok's Blog™ 28 decembrie, 2009
    2. A.Dragos luni, 28 decembrie 2009, 10:40
      • Grim_Cris luni, 28 decembrie 2009, 13:37
    3. Tudor luni, 28 decembrie 2009, 11:17
      • Grim_Cris luni, 28 decembrie 2009, 13:37
    4. PanTeraS luni, 28 decembrie 2009, 15:09
      • Grim_Cris luni, 28 decembrie 2009, 15:19
    5. PanTeraS luni, 28 decembrie 2009, 15:23
      • Grim_Cris luni, 28 decembrie 2009, 15:28
    6. Neamtu' luni, 28 decembrie 2009, 14:34
    7. BabBarDeL luni, 28 decembrie 2009, 15:41
      • Grim_Cris luni, 28 decembrie 2009, 18:59
    8. FLN luni, 28 decembrie 2009, 20:09
      • Grim_Cris luni, 28 decembrie 2009, 20:30
    9. FLN luni, 28 decembrie 2009, 20:56
      • Grim_Cris luni, 28 decembrie 2009, 21:16
    10. BabBarDeL luni, 28 decembrie 2009, 22:19
      • Grim_Cris marți, 29 decembrie 2009, 14:01
    11. PanTeraS marți, 29 decembrie 2009, 0:07
      • Grim_Cris marți, 29 decembrie 2009, 14:01

    Adaugă un comentariu