Interneti është vërtetë një mjedis i bukur dhe që po tërheq në vete persona me profesione nga më të ndryshmet të cilët kanë vendosur të punojnë për të. Interesi i madh i bizneseve për të reklamuar produktet apo shërbimet e tyre, lindja e bizneseve që e bazojnë aktivitetin në internet dhe tranzicioni i shumë shërbimeve desktop në aplikacione web janë vetëm disa nga arsyet që e kanë bërë internetin të jetë kaq tërheqës si mjedis pune. Në këtë kategori hynë patjetër edhe grafistët të cilët duan të zgjerojnë gamën e shërbimeve dhe rrjedhimisht të sigurojnë më tepër të ardhura personale. Problemi i vetëm për grafistët është fakti se të ndërtosh një website të plotë duhen njohuri të mira teknike që kanë të bëjnë me shkrimin e kodit; dhe vetëm fjala “kod” për pjesën më të madhe është aq tabu sa nuk i hynë fare telasheve dhe vazhdojnë punën tradicionale.
Qëllimi i kësaj guide të gjatë është t’ju tregojë se të shkruani kod HTML dhe CSS për të vënë në “jetë” një website nuk është aspak si mund ta keni imagjinuar deri tani. Nuk ka nevojë të lexoni dhjetëra libra abstraktë, të mbani mend qindra funksione apo të planifikoni realizimin me orë të tëra. Absolutisht që jo! Çfarë ju duhet është një memorje modeste për të fiksuar disa tage HTML dhe veti CSS, pak aftësi analitike për të gjykuar cila zgjidhje është më e mira dhe një dozë e vogël durimi (fatkeqësisht doza të tilla nuk shiten në farmaci) për ta çuar gjithçka deri në fund. Mendoni se i përmbushni kërkesat? Nëse përgjigja është po (besoj se është), atëherë mund të bëheni një kodues i mirë në HTML dhe CSS. Më e bukura është se do keni një seri guidash të tilla në të ardhmen për të mësuar edhe më tepër nga skenarët reale dhe për të përftuar teknika e truke të ndryshme.
Dizenjo e përdorur në këtë guidë është vërtetë një punim i këndshëm nga Andi Gugu, të cilin e falenderoj për bujarinë në ofrimin e punimit edhe për shkarkim të lirë. Po, e kuptuat mirë! Jo vetëm që do të mësoni të kodoni një dizenjo në HTML dhe CSS, por edhe do të përfitoni skedarin origjinal PSD të dizenjos e ta përdorni për çfarë t’ju thotë mendja.
Dizenjo me të cilën do punojmë
Arsyeja që kam zgjedhur këtë dizenjo nuk vjen vetëm se është tërheqëse, por sepse përmban një nivel të mirë kompleksiteti. Mos u ankoni se s’do ju bëjë keq! Nëse do kisha zgjedhur një dizenjo të thjeshtë, do mbaroja punë edhe unë, edhe ju shumë më shpejt e në përfundim do kishit marrë vetëm bazat që vështirë se do ju çonin larg. Nisje e mbarë, gjysma e punës – thotë Populli, prandaj le ta kemi parasysh.
Parapërgatitje
Hapi i parë që çdo kodues i mirë bën është të vizualizojë një ndarje logjike të dizenjos. Çfarë dua të them është se para se të fusni duart në kod, duhet të ndani me mendje (apo me program – Photoshop) elementet kryesorë të dizenjos që do të përkthehen më pas në HTML. Ndani vizualisht kokën, menunë, përmbajten, footer-in, etj, dhe gjykoni përafërsisht si mund të stilohen më CSS: ku do të përdorni float, pozicionim absolut, marxhinat, etj, – për këto do flasim më poshtë, kështu që mos e vrisni shumë mendjen. Për t’ju treguar rastin tim (edhe po hapem pak meqë jam), duke qenë se kam punuar në dhjetëra faqe web, proçesi i ndarjes vizuale më vjen aq natyrshem sa më duhet më pak se 1 minutë që të analizoj një dizenjo të kompleksitetit normal. Dhe nuk është se unë jam më i zgjuari në botë, por eksperienca bën të vetën. Mos e anashkaloni këtë hap sepse ju siguroj që do t’ju lehtësojë punën.
Më poshtë ju kam treguar një ndarje fare të thjeshtë të imazhit në elementët kryesorë. Një ndarje logjike nga ato që i përpunon vetëm truri do e mbushte imazhin me shënime, prandaj më mirë e lëmë të thjeshtuar.
Ndarje vizuale e dizenjos
Hapi i dytë është të krijojmë skedarët dhe direktoritë me të cilat do të punojmë. Ju këshilloj të përdorni një editor që ka File Browser të integruar sepse vërtetë që do ju thjeshtësojë jetën. Unë përdor Dreamweaver dhe si plus ka ngjyrosje kodi, sygjerime dhe vetë-plotësim. E vërteta është që mund t’ja dilni edhe me Notepad, por do ishte si të kthehemi në shpella e të mburremi për shtëpinë e re. Përdorni mjetet që ju shkurtojnë kohë (sepse koha është flori!) dhe kushdo që ju thotë të kundërtën ja fut kot!
Skedarët dhe Direktoritë fillestare
Si e shikoni, kam krijuar 3 direktori dhe 2 skedarë për të krijuar një organizim të mirë dhe logjik. Tani do merremi me hapin e fundit të parapërgatitjes, ku do të fusim një kod shabllon në skedarin “index.html”. Skedarin “stilet.css” lereni absolutisht bosh.
Kodi në index.html
| HTML | | Kopjo Kodin | | ? |
| 01 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 02 | <html xmlns="http://www.w3.org/1999/xhtml"> |
| 03 | <head> |
| 04 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| 05 | <title>Eternal Music</title> |
| 06 | <link rel="stylesheet" type="text/css" href="css/stilet.css" /> |
| 07 | </head> |
| 08 | |
| 09 | <body> |
| 10 | </body> |
| 11 | </html> |
Kodi më sipër është baza absolute e një dokumenti të rregullt XHTML(HTML 4 e rishikuar sipas XML) dhe në këtë mënyrë do nisë çdo website që do kodoni. Për mos t’ju lënë edhe më tepër konfuz, 2 rreshtat e parë janë deklarimi i Doctype (në këtë rast Transitional sepse jam dembel) që tregon çfarë lloj dokumenti është (XHTML 1.0 Transitional) dhe hapja e tagut html ku drejtohet në namespace-in e duhur, sepse çdo dokument i vlefshëm i tipit-XML duhet të drejtojë në një Namespace të vlefshme.
Vini re që poshtë tagut title kam vënë deklarimin e dokumentit CSS që do të përdorim. Nga struktura e direktorive që ju tregova më sipër, dokumenti “stilet.css” ndodhet në direktorinë “css” dhe pikërisht në atë direktori do drejtohemi. Kini parasysh që skedarët e përfshirë (imazhe, css, javascript, etj) janë relativë ndaj dokumentit që po punojmë (“index.html”). Pikërisht në skedarin stilet.css do vendosim të gjitha kodet CSS të faqes, prandaj kur të shihni të shkruara më poshtë gjatë guidës kode CSS, automatikisht i përkasin atij skedari.
Të gjitha kodet HTML që do të shkruaj më poshtë gjatë guidës do të vendoset brenda tageve body. Dokumenti HTML ka një kokë (head) dhe një trup (body). Në kokë vendoset titulli dhe përfshirjet e skedarëve (apo kodit) CSS dhe JavaScript, ndërsa në trup vendoset kodi HTML që strukturon faqen. Pra, kur të shihni kod HTML më poshtë, automatikisht i përket pjesës së trupit. Këto janë gjëra totalisht fillestare, por guida është e shkruar për çfarëdo niveli, kështu që mos u mërzisni.
Stilet Bazë
Gjëja e parë që do të bëjmë është të shkruajmë disa rregulla CSS për tagun body.
| CSS | | Kopjo Kodin | | ? |
| 1 | body{ |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | background:#b0d434; |
| 5 | font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; |
| 6 | color:#434343; |
| 7 | } |
Margin dhe Padding heqin hapësirat bazë që body përmban sepse nuk na duhen. Background kujdeset për sfondin dhe në këtë rast i kemi vendosur një ngjyrë të shprehur në heksadecimal sipas formatit #rrggbb (r-kuqe, g-jeshile, b-blu). Me Font kam përcaktuar tipin bazë të tekstit dhe në pjesën më të madhe të teksteve në dizenjo kemi “Trebuchet MS” të madhësisë 12px. Tipet e tjera të teksteve që vijnë më pas (Arial, Helvetica, sans-serif) do të merren parasysh nga shfletuesi nëse teksti nuk gjendet i instaluar në kompjuter. Së fundmi me Color kam përcaktuar ngjyrën bazë të teksteve meqë pjesa më e madhe e tyre kanë një ngjyrë gri të errët.
Për ta nisur strukturën HTML të faqes do të krijojmë një element div bosh që do të jetë mbajtësi i faqes dhe nën të do futen të gjithë elementët e tjerë (pa përjashtim).
| HTML | | Kopjo Kodin | | ? |
| 1 | <div id="mbajtesi"> |
| 2 | </div> |
Besoj e vini re atributin “id” të elementit! Është pikërisht ky atribut që lejon thërritjen e vetëm atij elementi me CSS. Kini parasysh që një id e caktuar mund të përdoret vetëm një herë për një element, prandaj zgjidhini emrat me kujdes. Tani, ajo që duam është ta vendosim të gjithë përmbajtjen (që do shtohet më pas) në mes të faqes dhe këtë e realizojmë përmes rregullave CSS të mëposhtme.
| CSS | | Kopjo Kodin | | ? |
| 1 | #mbajtesi{ |
| 2 | width:842px; |
| 3 | margin:auto; |
| 4 | } |
Pjesa “#” quhet selektor i id-së në CSS sepse bën pikërisht atë: selektimin e një elementi me id-në e përcaktuar. Unë doja të zgjidhja elementin me id “mbajtesi” dhe shkruajta “#mbajtesi“. Më pas vendosa gjerësinë e faqes me Width, e cila është egzaktësisht (asnjë px më pak apo më shumë) 842 pixel. Së fundmi kam përdorur një truk të vogël me Margin që e vendos faqen në qendër. Duke përcaktuar vlerën auto për margin, shfletuesi e llogarit automatikisht distancën midis skajeve dhe e vendos elementin në qendër. Edhe nëse shfletuesi zvogëlohet në gjerësi, përsëri elementi do shfaqet në qendër.
Le të përcaktojmë gjithashtu disa rregulla të tjera CSS që do shërbejnë për bazën e dizenjos tonë.
| CSS | | Kopjo Kodin | | ? |
| 1 | h1, h2, h3, h4, h5, h6, p, ul{ |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | } |
Heqim hapësirat nga header-at (h1 deri në h6), paragrafet dhe listat e parenditura sepse nuk na interesojnë. Nëse do na duhen më pas, do i vendosim në mënyra specifike. Në CSS, presja ndan selektimin për elementë të ndryshëm.
| CSS | | Kopjo Kodin | | ? |
| 1 | a img{ |
| 2 | border:0; |
| 3 | } |
Imazhet që ndodhen brenda një tagu a (lidhje) marrin automatikisht një kontur të shëmtuar që nuk na duhet. Duke i ndarë elementët me hapësirë në CSS, përcaktojmë që elementi i dytë duhet të jetë brenda elementit të parë. Duke vendosur border:0 e heqim konturin.
| CSS | | Kopjo Kodin | | ? |
| 1 | a:link, a:visited{ |
| 2 | color:#9dc301; |
| 3 | text-decoration:none; |
| 4 | } |
| 5 | |
| 6 | a:hover, a:visited:hover{ |
| 7 | text-decoration:underline; |
| 8 | } |
Lidhjet janë ndër elementët më të rëndësishëm të faqes sepse e dërgojnë vizitorën aty ku duhet. Me pseudo-klasat :link (lidhje normale) dhe :visited (lidhje të vizituara) kam përcaktuar një ngjyrë të ndryshme nga pjesa tjetër e përmbajtjes (që të dallohen lidhjet) dhe ja kam hequr vizën poshtë. Ndërsa me pseudo-klasën :hover kam përcaktuar gjendjen e lidhjeve kur mouse-i vendoset mbi to, duke i vendosur vizën poshtë. Thjeshtë një mënyrë për të rritur interaktivitetin në faqe e për ti dhënë vizitorit një tregues vizual mbi lidhje.
| CSS | | Kopjo Kodin | | ? |
| 1 | div.clear{ |
| 2 | clear:both; |
| 3 | } |
Kur përdorim float për të pozicionuar elementet (më shumë për to më poshtë) nuk duam që efekti i float të vazhdojë edhe në elementet e tjerë e të prishë renditjen e faqes. Me clear:both pastrohet efekti i float, prandaj krijojmë një klasë të cilën do ta përdorim atëherë kur është e nevojshme.
Praktikisht kemi mbaruar me stilet bazë të faqes. Është e sigurtë që do të jetë një guidë masive sepse kam shkruar një mal me gjëra pa nisur akoma, prandaj mbahuni fort dhe merrni kohën tuaj.
Le të fillojmë tani të kodojmë elementët e veçantë të dizenjos duke filluar nga sipër -> poshtë. Shihni imazhin e “ndarjes vizuale të dizenjos” për të krijuar një ide rreth emrave që do përdor.
Paneli Sipër
Paneli Sipër është një element i thjeshtë që përmban një lidhje regjistrimi dhe disa ikona. Realizimi nuk do na marrë shumë punë, por para se të shkruaj kod më duhet të ndaj 3 imazhe të veçanta për sfondin e panelit. Një imazh për pjesën e rrumbullakët majtas, një për atë djathtas dhe një që do qëndrojë në sfond.
Tre imazhet që formojnë sfondin e panelit
Tani që kemi imazhet gati do shkruajmë kodin HTML që vendos në vend elementët e ndryshëm të panelit.
| HTML | | Kopjo Kodin | | ? |
| 01 | <div id="paneli-siper"> |
| 02 | <img src="imazhet/paneli-siper-majtas.png" /> |
| 03 | <p>Akoma s'jeni anetare? <a href="#">Regjistrohu</a> per te personalizuar profilin me muzike dhe kanale...</p> |
| 04 | <ul> |
| 05 | <li><a href="#" title="Home"><img src="imazhet/ikona-home.png" /></a></li> |
| 06 | <li><a href="#" title="Sitemap"><img src="imazhet/ikona-sitemap.png" /></a></li> |
| 07 | <li><a href="#" title="Mail"><img src="imazhet/ikona-mail.png" /></a></li> |
| 08 | </ul> |
| 09 | <img src="imazhet/paneli-siper-djathtas.png" id="paneli-siper-djathtas" /> |
| 10 | </div> |
Imazhet në fillim dhe fund janë skajet e rrumbullakëta të panelit. Paragrafi është thjeshtë një mbajtës i tekstit ndërsa listën ul e kam përdorur për të vendosur 3 ikonat e vogla. Më pëlqen që navigimin ta vendos në lista sepse kam kontroll të plotë mbi paraqitjen e distancat por nuk është e thënë ti pëlqeni si mua. Për momentin duket gjithçka jashtë vendit të vet por me disa rregulla CSS do i japim pamje.
| CSS | | Kopjo Kodin | | ? |
| 1 | #paneli-siper{ |
| 2 | position:relative; |
| 3 | height:19px; |
| 4 | background:url(../imazhet/paneli-siper-bkg.png) repeat-x; |
| 5 | padding:9px 15px; |
| 6 | } |
Për ta nisur punën mbarë, vendosa disa rregulla që i përkasin elementit mbajtës së panelit. Vendosa sfondin i cili përsëritet horizontalisht me repeat-x për tu shfaqur gjatë të gjithë gjerësisë së elementit. Kini parasysh që në CSS, vendodhja e imazheve duhet vendosur relative ndaj dokumentit CSS dhe jo ndaj dokumentit HTML. Me Padding krijova hapësirë të brendshme që elementet brenda #paneli-siper të jenë të baraz-larguar nga skajet. Forma “padding:9px 15px” është një mënyrë e shkurtuar ku 9px është padding lart dhe poshtë, ndërsa 15px është padding majtas dhe djathtas. Pozicioni relativ i vendosur me Position lejon që elementë brenda tij të pozicionohet në mënyrë absolute, gjë që do e shohim më tej.
Më duhet t’ju shpjegoj edhe diçka në lidhje me Height. Gjatësia e elementit (sipas dizenjos) është 37px, por mund ta vini re që unë e kam shkruar vetëm 19px. Ideja është kjo: Në Modelin Kuti (Box Model) gjerësia apo gjatësia e elementit është e barabartë me gjerësine apo gjatësine e vendosur plus padding. Pra: gjatësia reale = gjatësia e vendosur + padding. Në rastin tonë: gjatësia reale = 19px + 9px (padding lart) + 9px (padding poshtë) = 37px. Llogaritja është matematikë e klasës së parë, kështu që s’besoj të ndjeheni konfuz.
| CSS | | Kopjo Kodin | | ? |
| 01 | #paneli-siper>img:first-child{ |
| 02 | display:block; |
| 03 | position:absolute; |
| 04 | top:0; |
| 05 | left:0; |
| 06 | } |
| 07 | |
| 08 | #paneli-siper-djathtas{ |
| 09 | display:block; |
| 10 | position:absolute; |
| 11 | top:0; |
| 12 | right:0; |
| 13 | } |
Stilet e mësipërme pozicionojnë imazhet e skajeve (që ju tregova më sipër) në vendin e duhur. Selektimi #paneli-siper>img:first-child është një selektim paksa i avancuar në CSS kështu që po i kushtoj pak vëmendje. #paneli-siper>img selekton të gjithë elementët img që janë “fëmijë” direktë të elementit #paneli-siper. Nëse elementi img ndodhet brenda një elementi tjetër (i cili gjithashtu ndodhet brenda elementit #paneli-siper), selektimi nuk egzekutohet. Pjesa img:first-child zgjedh vetëm elementin e parë img brenda #paneli-siper. Formën mund ta kisha mënjanuar thjeshtë duke i dhënë një id imazhit (ashtu si kam bërë me imazhin tjetër) por doja t’ju tregoja paksa fuqinë e CSS. Rregullat për të dyja janë pothuajse të njëjta. I kam bërë imazhet të shfaqen si bllok për të mënjanuar ndonjë hapësirë të krijuar në Internet Explorer dhe i kam pozicionuar në mënyrë absolute. Me pozicionim absolut kam kontrollin mbi vendosjen e saktë të elementëve dhe në të dy kam top:0 (kordinata lart = 0), ndërsa tek njëri kam left:0 (kordinata majtas = 0), por tek tjetri right:0 (kordinata djathtas:0).
| CSS | | Kopjo Kodin | | ? |
| 01 | #paneli-siper a{ |
| 02 | font-weight:bold; |
| 03 | } |
| 04 | |
| 05 | #paneli-siper ul{ |
| 06 | position:absolute; |
| 07 | list-style-type:none; |
| 08 | top:7px; |
| 09 | right:20px; |
| 10 | } |
| 11 | |
| 12 | #paneli-siper ul li{ |
| 13 | display:inline; |
| 14 | margin-left:8px; |
| 15 | } |
Pjesa #paneli-siper a i drejtohet lidhjeve dhe i bën ato Bold, kështu që ska shumë për të folur. Stili i dytë merret me listën e ikonave, duke e pozicionuar atë në mënyrë absolute dhe duke ja hequr “bullets” me list-style-type:none. Së fundmi, kam selektuar vetëm elementë li të listës, i kam bërë të shfaqen horizontalisht me rreshtin “display:inline“, një truk i vogël që i shtron listat horizontalisht dhe i kam vendosur hapësirë majtas për tu ndarë nga njëri tjetri.
Koka
Koka është një pjesë që përmban një sfond, menunë dhe panelin e identifikimit. Duke qenë se imazhi është kompleks, s’na mbetet zgjidhje tjetër përveç se ta presim si një imazh të madh, ta vendosim në sfond e mbi të krijojmë elementët e tjerë.
Sfondi i Kokës
Fillimisht do ju tregoj strukturën HTML që kam shkruar për kokën.
| HTML | | Kopjo Kodin | | ? |
| 01 | <div id="koka"> |
| 02 | <div id="menu"> |
| 03 | <ul> |
| 04 | <li><a href="#" id="menu-ballina"></a></li> |
| 05 | <li><a href="#" id="menu-kanalet"></a></li> |
| 06 | <li><a href="#" id="menu-renditja"></a></li> |
| 07 | <li><a href="#" id="menu-albumet"></a></li> |
| 08 | <li><a href="#" id="menu-dyqani"></a></li> |
| 09 | <li><a href="#" id="menu-radio"></a></li> |
| 10 | </ul> |
| 11 | </div> |
| 12 | <div id="login"> |
| 13 | <form method="post"> |
| 14 | <input type="text" name="user" /> |
| 15 | <input type="password" name="pass" /> |
| 16 | <button type="submit"><img src="imazhet/butoni-hyr.png" /></button> |
| 17 | </form> |
| 18 | <a href="#">Harruat Fjalekalimin?</a> |
| 19 | </div> |
| 20 | </div> |
Ajo që kam bërë është një ndarje midis 2 elementeve kryesorë të kokës: menuja dhe logini. Në menu kam krijuar një listë me elementë a brenda ku do përdorim teknikën e Sprites, ndërsa në login kam vendosur një formë me 2 inpute dhe një buton. Kam përdorur button në vend të input submit sepse më pëlqen kontrolli që kam në të dhe fakti që të lejon të fusësh çfarëdo elementi brenda.
Më duhet t’ju paralajmëroj që koka është një ndër pjesët më të ndërlikuara të faqes, sidomos prej menusë, prandaj lexoni me kujdes sepse dhe kodi është paksa i gjatë.
| CSS | | Kopjo Kodin | | ? |
| 01 | #koka{ |
| 02 | position:relative; |
| 03 | height:202px; |
| 04 | background:url(../imazhet/koka-bkg.png) no-repeat; |
| 05 | margin-top:10px; |
| 06 | } |
| 07 | |
| 08 | #menu{ |
| 09 | position:absolute; |
| 10 | width:636px; |
| 11 | height:59px; |
| 12 | margin-top:149px; |
| 13 | } |
| 14 | |
| 15 | #login{ |
| 16 | float:right; |
| 17 | width:140px; |
| 18 | padding:70px 35px 0 30px; |
| 19 | text-align:right; |
| 20 | } |
Fillimisht kam përcaktuar stilet për tre elementët, mbajtësin e kokës, menunë dhe loginin. Tek #koka kam vendosur si sfond imazhin që preva pak më sipër, hapësirë sipër prej 10px me margin-top dhe pozicionim relativ që ti lejoj elementeve të tjerë të pozicionohen në mënyrë absolute. Menunë e kam pozicionuar në mënyrë absolute dhe kam vendosur hapësirë sipër që të pozicionet pak më jashtë ekstremit të poshtëm të #koka. Tek #login kam vendosur gjerësinë, padding që elementët brenda tij të shfaqen në pozicionin e duhur, float për ta çuar komplet në pjesën djathtas dhe drejtimin e tekstit (dhe çdo elementi tjetër) e kam vendosur djathtas që butoni dhe lidhja “harruar fjalekalimin” të drejtohet djathtas. Llogaritjet e madhësive dhe hapësirave i kam bërë duke eksperimentuar, prandaj mos mendoni se është shkencë egzakte.
Për të qenë i sinqertë, fillimisht kisha përdorur float për të pozicionuar elementët, por më dolën probleme në krijimin e JavaScript-it që do t’ju tregoj në seksionin tjetër dhe mu desh t’ju riktheja rregullave e të përdorja pozicionim absolut.
| CSS | | Kopjo Kodin | | ? |
| 1 | #login input{ |
| 2 | display:block; |
| 3 | width:130px; |
| 4 | border:2px solid #bababa; |
| 5 | padding:3px; |
| 6 | margin-bottom:8px; |
| 7 | background:#f4f3f3; |
| 8 | } |
Kam selektuar elementet input që ndodhen brenda#login për ti dhënë pamje grafike më të mirë se ato që shfaq shfletuesi automatikisht. I vetmi rregull i ri është border, i cili shfaq konturin rreth elementit. Unë kam shfaqur një kontur 2px të trashë me ngjyrë gri. Për të qenë i sinqertë, paraqitja që i kam dhënë inputeve është e ndryshme nga ato të dizenjos origjinale, por me arsye. Që ti bëja egzaktësisht si në dizenjo, do më duhej të përdorja një imazh fiks në sfond dhe nëse do na duhej ta zmadhonim inputin, do duhej ta zmadhonim gjithashtu edhe imazhin e sfondit. Kështu e mbajmë të thjeshtë e për mendimin tim personal, duket edhe më bukur.
| CSS | | Kopjo Kodin | | ? |
| 1 | #login button{ |
| 2 | width:53px; |
| 3 | height:18px; |
| 4 | background:none; |
| 5 | border:0; |
| 6 | cursor:pointer; |
| 7 | padding:0; |
| 8 | margin:0; |
| 9 | } |
Pak më sipër ju rrëfeva se më pëlqen të përdor button në vend të input submit sepse ofron më tepër fleksibilitet dhe [sikur] ka më tepër kuptim semantik. Sa i përket rregullave CSS, nuk kam bërë gjë tjetër përveç se i kam vënë përmasat e imazhit, kam hequr sfondin, konturin dhe hapësirat. Me cursor:pointer, kam përcaktuar që mouse-i të shndërrohet në “dora-me-gisht-tregues-të-ngritur” për ti dhënë vizitorit një tregues vizual që butoni klikohet.
| CSS | | Kopjo Kodin | | ? |
| 1 | #login a{ |
| 2 | font-size:11px; |
| 3 | font-weight:bold; |
| 4 | display:block; |
| 5 | color:#515463; |
| 6 | text-transform:uppercase; |
| 7 | margin-top:15px; |
| 8 | } |
E vetmja lidhje në #login është “harruat fjalekalimin”, prandaj me rregullin e mësipërm i drejtohemi direkt asaj. Stili i ri këtu është text-transform, me të cilin e kam kthyer të gjithë tekstin në gërma të mëdha. Dy opsione të tjera të text-transform janë capitalize (gërmat e para të mëdha) dhe lowercase (të gjitha gërmat e vogla).
| CSS | | Kopjo Kodin | | ? |
| 01 | #menu ul{ |
| 02 | margin-left:-4px; |
| 03 | list-style-type:none; |
| 04 | } |
| 05 | |
| 06 | #menu ul li{ |
| 07 | float:left; |
| 08 | margin-right:-34px; |
| 09 | } |
| 10 | |
| 11 | #menu a{ |
| 12 | width:136px; |
| 13 | height:59px; |
| 14 | display:block; |
| 15 | } |
Selektimi i parë zgjedh listën në #menu. Kam përcaktuar margin negative sepse menutë kanë një hije të vogël që del jashtë konturit të elementit mbajtës dhe ishte një detaj i vogël grafik që s’mund ta lija jashtë. Tek selektimi i dytë kam përdorur float sepse dua që të gjithë elementët e menusë të shfaqen në krah të njëri tjetrit. Duke qenë se i kam prerë të plota imazhet e menusë, duhej të përdorja një margin-right negative që imazhet tu mbivendosnin sipër njëra tjetrës për të krijuar efektin e menusë në dizenjo. Selektimi i tretë përcakton rregullat për elementet a brenda listës duke vendosur përmasat dhe e bën paraqitjen bllok. Gjerësia e vendosur është sa gjysma e gjerësisë së imazhit në mënyrë që të shfaqet vetëm njëra gjendje.
Ju këshilloj seriozisht të lexoni guidën time Sprites në CSS për të kuptuar si funksionojnë Sprites dhe për mos të mbetur me gojë hapur në kodin më poshtë. Nuk është aspak e vështirë të realizohet, por ju duhet pak teori.
| CSS | | Kopjo Kodin | | ? |
| 01 | #menu-ballina{ |
| 02 | background:url(../imazhet/menu-ballina.png) no-repeat 0 0; |
| 03 | } |
| 04 | |
| 05 | #menu-ballina:hover{ |
| 06 | background:url(../imazhet/menu-ballina.png) no-repeat -136px 0; |
| 07 | } |
| 08 | |
| 09 | #menu-kanalet{ |
| 10 | background:url(../imazhet/menu-kanalet.png) no-repeat 0 0; |
| 11 | } |
| 12 | |
| 13 | #menu-kanalet:hover{ |
| 14 | background:url(../imazhet/menu-kanalet.png) no-repeat -136px 0; |
| 15 | } |
| 16 | |
| 17 | #menu-renditja{ |
| 18 | background:url(../imazhet/menu-renditja.png) no-repeat 0 0; |
| 19 | } |
| 20 | |
| 21 | #menu-renditja:hover{ |
| 22 | background:url(../imazhet/menu-renditja.png) no-repeat -136px 0; |
| 23 | } |
| 24 | |
| 25 | #menu-albumet{ |
| 26 | background:url(../imazhet/menu-albumet.png) no-repeat 0 0; |
| 27 | } |
| 28 | |
| 29 | #menu-albumet:hover{ |
| 30 | background:url(../imazhet/menu-albumet.png) no-repeat -136px 0; |
| 31 | } |
| 32 | |
| 33 | #menu-dyqani{ |
| 34 | background:url(../imazhet/menu-dyqani.png) no-repeat 0 0; |
| 35 | } |
| 36 | |
| 37 | #menu-dyqani:hover{ |
| 38 | background:url(../imazhet/menu-dyqani.png) no-repeat -136px 0; |
| 39 | } |
| 40 | |
| 41 | #menu-radio{ |
| 42 | background:url(../imazhet/menu-radio.png) no-repeat 0 0; |
| 43 | } |
| 44 | |
| 45 | #menu-radio:hover{ |
| 46 | background:url(../imazhet/menu-radio.png) no-repeat -136px 0; |
| 47 | } |
I gjithë kodi i gjatë i shfaqur më sipër përcakton 2 gjendjet (normale dhe hover) për 6 menutë që kemi në faqe. Praktika është standarte për Sprites, prandaj nuk po zgjatem në këtë pjesë.
Progresi deri tani
Kemi mbaruar 2 nga 5 elementet kryesorë të faqes e na mbetet akoma goxha punë për të bërë. Megjithatë, kemi ecur mirë deri tani e nëse keni lexuar më vëmendje, jam i sigurt që hapat në vazhdim do të jenë më të lehtë për tu kaluar.
Albumet
Albumet në dizenjo paraqiten në një formë interaktive e cila do kërkonte një guidë të veçantë për tu krijuar në JavaScript. Për ta mbajtur të thjeshtë guidën, kam përdorur një imazh për albumet (pra statike dhe jo funksionale), por për ta bërë më interesante kam shkruajtur një kod JavaScript me librarinë JQuery për të vënë në punë butonin “Albumet Mbyll”. Kodi JavaScript do të hapë e do të mbyllë panelin kur butoni klikohet.
| HTML | | Kopjo Kodin | | ? |
| 1 | <div id="albumet"> |
| 2 | <div id="albumet-kopertinat"></div> |
| 3 | <a href="#" id="albumet-mbyll"><img src="imazhet/albumet-mbyll.png" alt="Mbyll Panelin e Albumeve" /></a> |
| 4 | </div> |
Imazhi i Albumeve
Imazhi i Mbylljes se Albumeve
Kodi HTML është totalisht minimal. Elementi #albumet-kopertinat do të jetë imazhi i albumeve ndërsa lidhja #albumet-mbyll do të hapë e do të mbyllë panelin. E vetmja arsye që kam përdorur id për elementët është sepse më duhet ti drejtohem me JavaScript dhe s’dua të përdor selektor kompleks në të për mos ta ndërlikuar guidën. Edhe kodi CSS është po ashtu minimal me vetëm 2 rregulla.
| CSS | | Kopjo Kodin | | ? |
| 1 | #albumet-kopertinat{ |
| 2 | height:232px; |
| 3 | background:url(../imazhet/albumet.png) no-repeat top center; |
| 4 | } |
| 5 | |
| 6 | #albumet-mbyll{ |
| 7 | display:block; |
| 8 | } |
Absolutisht asgjë e re. Thjeshtë sfondi dhe gjatësia e elementit, ndërsa lidhja vendoset në vendin e duhur automatikisht. Selektimin e dytë e kam bërë posaçërisht për Internet Explorer 7, i cili ndonjëherë ka probleme në llogaritjen e hapësirave të elementëve inline dhe shton më tepër se ç’duhet. Duke e bërë bllok, e eleminojmë problemin. Po kaloj në kodin JavaScript, meqë është pjesa e këtij seksioni që na intereson më tepër.
Shkarkojmë JQuery, e ri-emërojmë në “jquery.js” dhe e fusim në direktorinë “js”. Më pas e përfshijmë në faqe duke vendosur kodin e mëposhtëm brenda .
| HTML | | Kopjo Kodin | | ? |
| 1 | <script type="text/javascript" src="js/jquery.js"></script> |
Tani që libraria JQuery është gati, do shkruajmë vetëm disa rreshta kod për ta vënë në punë mbylljen/hapjen e panelit. Po brënda do të shkruajmë kodin më poshtë.
| Javascript | | Kopjo Kodin | | ? |
| 01 | <script type="text/javascript"> |
| 02 | /* |
| 03 | Funksioni .ready() pret qe elementi te ngarkohet. Ne kete |
| 04 | rast presim qe e gjithe faqja te ngarkohet, ne menyre qe |
| 05 | te punojme me elemente te krijuar. |
| 06 | */ |
| 07 | $(document).ready(function(){ |
| 08 | /* |
| 09 | Presim qe te klikohet butoni qe te egzekutojme kodin. |
| 10 | */ |
| 11 | $('#albumet-mbyll').click(function(){ |
| 12 | /* |
| 13 | Funksioni slideToggle() i JQuery animon hapjen dhe |
| 14 | mbylljen e elementit. Nese elementi eshte i shfaqur, |
| 15 | ai mbyllet dhe ne fund vendoset display:none. E kunderta |
| 16 | ndodh nese elementi eshte i zhdukur. Parametri 'slow' e ben |
| 17 | animacionin te ngadalte, por mund te percaktohet edhe vlere |
| 18 | ne milisekonda. |
| 19 | */ |
| 20 | $('#albumet-kopertinat').slideToggle('slow'); |
| 21 | /* |
| 22 | Duke kthyer return false; ne eventin klik, linku nuk kryen |
| 23 | asnje funksion. Teknikisht, heqim funksionin e atributit href. |
| 24 | */ |
| 25 | return false; |
| 26 | }); |
| 27 | }); |
| 28 | </script> |
Për ta thjeshtësuar leximin e kodit përfshiva komente më sipër për çdo rresht. Kodi është fare i thjeshtë sepse libraria JQuery ofron vërtetë shumë mundësi për të realizuar efekte, gjë që do ishte goxha e komplikuar me JavaScript puro.
Lajmet
Paneli i lajmeve është pak i komplikuar për të vetem arsye se përmban shumë elementë brenda, por realizimi është i thjeshtë. Po ju tregoj fillimisht strukturën HTML që krijon të gjithë pjesët.
| HTML | | Kopjo Kodin | | ? |
| 01 | <div id="lajmet"> |
| 02 | <div id="lajmet-titulli"> |
| 03 | <img src="imazhet/lajmet-titulli.png" alt="Lajmet" /> |
| 04 | </div> |
| 05 | <div> |
| 06 | <img src="imazhet/lajmet-ndarese.png" /> |
| 07 | <div><img src="imazhet/lajmi1.png" alt="Lajmi 1" /></div> |
| 08 | <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| 09 | <a href="#"><img src="imazhet/lajmi1-imazhi.png" alt="Lajmi 1" /></a> |
| 10 | </div> |
| 11 | <div> |
| 12 | <img src="imazhet/lajmet-ndarese.png" /> |
| 13 | <div><img src="imazhet/lajmi2.png" alt="Lajmi 2" /></div> |
| 14 | <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| 15 | <a href="#"><img src="imazhet/lajmi2-imazhi.png" alt="Lajmi 2" /></a> |
| 16 | </div> |
| 17 | <div> |
| 18 | <div><img src="imazhet/lajmi3.png" alt="Lajmi 3" /></div> |
| 19 | <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| 20 | <a href="#"><img src="imazhet/lajmi3-imazhi.png" alt="Lajmi 3" /></a> |
| 21 | </div> |
| 22 | <div class="clear"></div> |
| 23 | </div> |
Duket i gjatë e i komplikuar por ju siguroj që nuk është. Nëse e vini re, divi me klasën lajm është i përsëritur 3 herë sepse janë 3 lajme, por struktura është egzaktësisht e njëjtë. Më duket se kam harruar t’ju tregoj deri tani diferencën midis id dhe class, prandaj po shfrytëzoj nga rasti. Në fillim të guidës ju tregova se id përdoret vetëm për një element i cili nuk përsëritet herë të tjera në faqe. Ndërsa selektori class mund të përdoret për shumë elementë që duam ti vendosim rregulla CSS të njëjta. Pra: id=>1, class=>shumë. Kaq e thjeshtë. Le të kalojmë tani në kodin CSS që i vendos elementet në vendin e duhur.
| CSS | | Kopjo Kodin | | ? |
| 1 | #lajmet{ |
| 2 | border-left:1px solid #9b9b9b; |
| 3 | border-right:1px solid #9b9b9b; |
| 4 | background:#f4f8ed; |
| 5 | } |
Pjesa më e madhe e panelit të lajmeve ka ngjyrën #f4f8ed dhe ka anash (pra majtas dhe djathtas) një kontur gri të cilin e kam replikuar me border.
| CSS | | Kopjo Kodin | | ? |
| 1 | #lajmet-titulli{ |
| 2 | height:27px; |
| 3 | background:#a2a49d; |
| 4 | border-bottom:1px solid #9b9b9b; |
| 5 | border-top:1px solid #9b9b9b; |
| 6 | } |
Titulli i lajmeve është një shirit gri i errët në krye të lajmeve, i cili ka kontur lart dhe poshtë. Brenda divit #lajmet-titulli është një imazh që përmban titullin “Lajmet” dhe një ikonë të vogël. Imazhi nuk ka nevojë të pozicionohet me CSS sepse lartësia e tij është sa ajo e divit.
| CSS | | Kopjo Kodin | | ? |
| 1 | div.lajm{ |
| 2 | position:relative; |
| 3 | width:280px; |
| 4 | float:left; |
| 5 | } |
Klasa .lajm i vendoset 3 elementeve që mbajnë 3 lajmet e veçanta. Gjerësinë e kam llogaritur të jetë sa 1/3 e gjerësisë së faqes (e cila është 842px) në mënyrë që lajmi të zerë 1/3 e hapësirës. Pozicionimin relativ, ashtu si edhe në rastet e tjera e kam vendosur që të përdor pozicionim absolut për elementët e tjerë. Gjithashtu kam përdorur float për herë të tretë në këtë guidë (hera e parë ishte tek menutë dhe hera e dytë tek logini) dhe meqë përdorimi këtu është më i lehtë për tu kuptuar, po ju them disa fjalë rreth tij.
Sipas modelit kuti, elementet bllok (psh div) të njëpasnjëshëm vendoset sipër njëri tjetrit. Pra krijohet një element, vendoset hapësirë vertikale dhe më pas krijohet elementi tjetër. Duke i dhënë elementeve rregullin float, i bëjmë që të vendosen në krah të njëri tjetrit pa krijuar hapësira vertikale. Kjo është një teknikë praktikisht e domosdoshme për të pozicionuar elementet e për të replikuar dizenjot, kështu që mësojeni të përdorni mirë. Kini parasysh që elementet do të vendosen në krah vetëm nëse hapësira horizontale e lejon, përkundrazi do të ulen poshtë.
| CSS | | Kopjo Kodin | | ? |
| 1 | div.lajm-titull{ |
| 2 | background:#e2e5dd; |
| 3 | padding:20px 15px 5px 15px; |
| 4 | } |
Titulli i lajmeve përmban një imazh të cilin e vendosim në vendin e duhur përmes padding. Gjithashtu përcaktojmë një ngjyrë gri më të errët se ajo e pjesës tjetër.
| CSS | | Kopjo Kodin | | ? |
| 1 | div.lajm p{ |
| 2 | padding:15px; |
| 3 | text-align:justify; |
| 4 | } |
Paragrafi është përmbajtja e lajmit dhe i kam vendosur 15px padding nga të gjitha krahët për ta larguar nga skajet (sepse do ngjante shëmtuar) dhe e kam bërë justify. Këtë të fundit e bëra nga mendja sepse sipas dizenjos do ishte text-align:left, por po më duket më bukur justify.
| CSS | | Kopjo Kodin | | ? |
| 1 | div.lajm>img:first-child{ |
| 2 | position:absolute; |
| 3 | top:25px; |
| 4 | right:0; |
| 5 | } |
Të njëjtën mënyrë selektimi e kam përdorur edhe diku nga fillimi i guidës, por po ju them përsëri 2 fjalë dhe ndoshta kësaj rradhe e fiksoni 
. div.lajm>img selekton të gjitha imazhet që janë “fëmijë” direkt të div.lajm dhe jo imazhet që ndodhen brenda një elementi tjetër. Do të selektonte: <div class=”lajm”><img /></div>, por jo <div class=”lajm”><p><img /></p></div>. img:first-child selekton vetëm imazhin e parë të gjetur. Imazhi në fjalë është ndarësi i lajmeve dhe ajo që kam arritur me ato rregullat është pozicionimi i tij në skajin e djathtë të lajmit.
| CSS | | Kopjo Kodin | | ? |
| 1 | img.lajmi-imazhi{ |
| 2 | display:block; |
| 3 | width:277px; |
| 4 | margin:auto; |
| 5 | } |
Rregulla e fundit për panelin e lajmeve përcakton shfaqjen e imazhit të lajmit (ato kopertinat e lezetshme). Imazhet janë pak më të vogla në gjerësi se elementi mbajtës, prandaj doja që të qëndronin në mes për të krijuar pak hapësirë në skaje. E kam kthyer në bllok për të vetmen arsye që të funksionojë margin, sepse margin mund të marrin vetëm elementët bllok. Ashtu si kam vepruar në fillim të guidës për ta vendosur faqen në qendër, edhe këtu kam përdorur trukun e margin:auto për qendërzim.
Shpresoj mos të jeni lodhur aq sa të hiqni dorë, por po ju them që kemi mbaruar me 4 seksione dhe na kanë mbetur vetëm 3, të cilët ju siguroj që nuk kanë shumë punë. Kur të kem mbaruar edhe seksionin e ardhshëm, pjesa tjetër është një lojër fëmijësh.
Progresi deri tani
Hitet
Hitet janë ndoshta seksioni më i komplikuar e më i gjatë i kësaj guide, prandaj kushtojini pak rëndësi. Ndërtimi i tij është shumë i ngjashëm me lajmet, por ka më tepër elementë dhe disa gjëra që do i prekim për herë të parë. Po ju tregoj strukturën e gjatë HTML.
| HTML | | Kopjo Kodin | | ? |
| 01 | <div id="hitet"> |
| 02 | <div id="hitet-titull"> |
| 03 | <img src="imazhet/hitet-titulli.png" alt="Hitet" /> |
| 04 | </div> |
| 05 | <div> |
| 06 | <img src="imazhet/hitet-ndarese.png" /> |
| 07 | <div><img src="imazhet/hiti1-titulli.png" alt="Top 10 Girls Chart" /></div> |
| 08 | <ul> |
| 09 | <li><b>Leona Lewis</b>Better In Time</li> |
| 10 | <li><b>Madonna</b>Give it 2 Me</li> |
| 11 | <li><b>Sara Bareilles</b>Love song</li> |
| 12 | </ul> |
| 13 | <div><a href="#"><img src="imazhet/shiko-listen.png" alt="Shiko Listen" /></a></div> |
| 14 | </div> |
| 15 | <div> |
| 16 | <img src="imazhet/hitet-ndarese.png" /> |
| 17 | <div><img src="imazhet/hiti2-titulli.png" alt="Euro Top 20" /></div> |
| 18 | <ul> |
| 19 | <li><b>Rihanna</b>Take A Bow</li> |
| 20 | <li><b>Usher</b>Love In This Club</li> |
| 21 | <li><b>Madonna</b>4 Minutes</li> |
| 22 | </ul> |
| 23 | <div><a href="#"><img src="imazhet/shiko-listen.png" alt="Shiko Listen" /></a></div> |
| 24 | </div> |
| 25 | <div> |
| 26 | <img src="imazhet/hitet-ndarese.png" /> |
| 27 | <div><img src="imazhet/hiti3-titulli.png" alt="TRL Top 10" /></div> |
| 28 | <ul> |
| 29 | <li><b>Lost</b>Standby</li> |
| 30 | <li><b>Tokio Hotel</b>Der Letzte Tag</li> |
| 31 | <li><b>Marco Carta</b>Ti Rincontrero</li> |
| 32 | </ul> |
| 33 | <div><a href="#"><img src="imazhet/shiko-listen.png" alt="Shiko Listen" /></a></div> |
| 34 | </div> |
| 35 | <div> |
| 36 | <div><img src="imazhet/hiti4-titulli.png" alt="Top 10 DVD Chart" /></div> |
| 37 | <ul> |
| 38 | <li><b>Genesis</b>When In Rome</li> |
| 39 | <li><b>Coldplay</b>Live 2003</li> |
| 40 | <li><b>Vasco Rossi</b>Vasco@Olimpico 07</li> |
| 41 | </ul> |
| 42 | <div><a href="#"><img src="imazhet/shiko-listen.png" alt="Shiko Listen" /></a></div> |
| 43 | </div> |
| 44 | <div class="clear"></div> |
| 45 | </div> |
| 46 | <img src="imazhet/hitet-fundi.png" id="hitet-fundi" /> |
E di që është paksa e gjatë dhe e komplikuar, por kini parasysh që divi me klasën “hiti” përsëritet 4 herë, gjë që e zgjat më tepër strukturën. Tani ideja është e njëjtë si tek lajmet, ku kemi 4 elementë të veçantë e ku në secilin ka një titull, një listë me këngët dhe një buton “Shiko Listen”.
Diçka e re në kodin HTML është përdorimi i 2 klasave në një element. Psh, shikoni div. Kjo është një veçori e HTML-së që edhe pse gjen përdorim rrallë, atëherë kur duhet të “shpëton jetën”. Pra fiksojeni që një elementi mund ti vendoset më shumë se një klasë duke i ndarë me hapësirë.
Le të shikojmë tani kodin CSS sepse edhe ai është paksa i gjatë, por jam i sigurt që s’do keni shumë probleme ta kuptoni.
| CSS | | Kopjo Kodin | | ? |
| 1 | #hitet{ |
| 2 | position:relative; |
| 3 | border-left:1px solid #9b9b9b; |
| 4 | border-right:1px solid #9b9b9b; |
| 5 | background:#cad2c3; |
| 6 | } |
Divi #hitet është mbajtësi i të gjithë elementeve të tjerë dhe i kam vendosur ngjyrë sfondi e cila mbizotëron në këtë seksion. I kam vendosur gjithashtu kontur majtas dhe djathtas për të respektuar dizenjon. Të qenurit besnik ndaj dizenjos do na hapë pak punë në seksionin e hiteve sepse kemi kontur gri të jashtëm dhe kontur të bardhë të brendshëm që duhet ta replikoj me CSS.
| CSS | | Kopjo Kodin | | ? |
| 1 | #hitet-titull{ |
| 2 | height:26px; |
| 3 | background:#9ea19d; |
| 4 | border:1px solid white; |
| 5 | } |
Ky është titulli i seksionit dhe ndodhet në krye me një ngjyrë sfondi më të errët se pjesa tjetër. Konturi i bardhë edhe këtu shërben për të respektuar dizenjon e për të krijuar një pjesë të atij konturit të brendshëm që ju fola më sipër. Brenda #hitet-titulli ndodhet një imazh me shkrimin “Lista e Hiteve” së bashku me ikonën përkatëse.
| CSS | | Kopjo Kodin | | ? |
| 1 | div.hiti{ |
| 2 | width:210px; |
| 3 | float:left; |
| 4 | position:relative; |
| 5 | } |
Ashtu si tek lajmet, kam krijuar div-e të cilët i kam bërë float dhe i kam vendosur gjerësi sa 1/4 e faqes (pra 842/4 = ~210).
| CSS | | Kopjo Kodin | | ? |
| 1 | div.hiti>img:first-child{ |
| 2 | position:absolute; |
| 3 | right:0; |
| 4 | top:15px; |
| 5 | } |
Po bëhet i mërzitshëm ky lloj selektimi se është hera e tretë që e përdor. Spo e shpjegoj më si funksionon se duhet ta keni fiksuar tashmë, por po ju them thjeshtë që vendos imazhin ndarës në të djathtë të secilit element (përveç të fundit ku nuk e kam vendosur imazhin).
| CSS | | Kopjo Kodin | | ? |
| 1 | div.hiti-titulli{ |
| 2 | text-align:center; |
| 3 | padding:15px 0; |
| 4 | } |
Titujt e secilit seksion janë imazhe të vendosura në mes dhe më hapësirë sipër prej 15px;
| CSS | | Kopjo Kodin | | ? |
| 1 | .kontur-majtas{ |
| 2 | border-left:1px solid white; |
| 3 | } |
| 4 | |
| 5 | .kontur-djathtas{ |
| 6 | border-right:1px solid white; |
| 7 | } |
Dy klasa fare të thjeshta për të vendosur kontur majtas dhe kontur djathtas. Duke qenë se do i përdor disa herë konturet për të krijuar atë konturin e brendshëm që tashmë u bë i famshëm se e kam thënë 3 herë, ka sens që të krijoj 2 klasa e ti përdor kur duhen.
| CSS | | Kopjo Kodin | | ? |
| 01 | div.hiti ul{ |
| 02 | list-style-type:none; |
| 03 | } |
| 04 | |
| 05 | div.hiti li{ |
| 06 | background:url(../imazhet/ikona-play.png) no-repeat 180px center #babcb8; |
| 07 | padding:10px 0 10px 40px; |
| 08 | } |
| 09 | |
| 10 | div.hiti li:hover, div.hiti li.hiti-pa-sfond:hover{ |
| 11 | background-color:#979797; |
| 12 | color:white; |
| 13 | } |
Këngët shfaqen në lista, prandaj ja heq bullets me list-style-type. Selektimi i dytë përcakton imazhin e sfondit (ikonën Play) dhe ngjyrën e tij. Imazhin e sfondit e kam pozicionuar 180px horizontalisht (180px larg skajit të majtë) dhe në qendër vertikalisht. I kam vënë gjithashtu padding për ti vendosur hapësira e për ta bër të duket më mire. Selektimi i fundit me pseudo-klasën :hover aktivizohet kur vendosim mouse-in sipër një kënge, ku sfondi bëhet gri e errët dhe ngjyra e tekstit e bardhë. Kam selektuar edhe li-të normale, edhe ato me klasën .hiti-pa-sfond përndryshe nuk shfaqet mirë në Chrome dhe IE7. Nuk e kam respektuar dizenjon në pjesën :hover sepse do e ndërlikonte kodin edhe më tepër. Besoj se është një element grafik jo aq i rëndësishëm, prandaj më mirë e lemë të thjeshtë si kemi bërë deri tani.
| CSS | | Kopjo Kodin | | ? |
| 1 | div.hiti li b{ |
| 2 | display:block; |
| 3 | text-transform:uppercase; |
| 4 | font-size:13px; |
| 5 | } |
Artistit i kam vendosur një tag strong për ta diferencuar nga titulli e për ta stiluar më thjeshtë. E kam bërë bllok që titulli të zbresë një rresht më poshtë dhe e kam bërë madhësinë e shkronjës 13px. Me text-transform kam përcaktuar që teksti të transformohet në gërma të mëdha.
| CSS | | Kopjo Kodin | | ? |
| 1 | div.hiti li.hiti-pa-sfond{ |
| 2 | background-color:#cad2c3; |
| 3 | } |
Nëse shihni dizenjon, do vini re që ngjyra e sfondit të këngëve është e alternuar. Këtë e arrijmë thjeshtë duke krijuar një klasë dhe duke ja vendosur elementëve që duam t’ja ndryshojmë ngjyrën e sfondit.
| CSS | | Kopjo Kodin | | ? |
| 1 | div.shiko-listen{ |
| 2 | text-align:center; |
| 3 | padding:25px; |
| 4 | } |
Së fundmi kemi butonin “Shiko Listen” që vendoset në qendër dhe ka hapësira nga të gjitha anët.
Ju thashë që seksioni i hiteve është i gjatë e ndoshta më kompleksi në faqen, por ju thashë gjithashtu që s’do keni shumë probleme ta kuptoni. Për fat të mirë, kemi mbaruar pjesën më të madhe të faqes e na mbetet shumë pak punë. Seksionet në vazhdim janë 2 të fundit, respektivisht Kanalet dhe Footeri.
Kanalet
Kanalet është një seksion shumë i ngjashëm me atë të albumeve në strukturë dhe kod, me ndryshimin e vetëm që brënda përmban një listë me kanale. Ashtu si tek albumet, edhe këtu do të realizojmë me JQuery një hapje/mbyllje të panelit.
| HTML | | Kopjo Kodin | | ? |
| 01 | <div id="kanalet"> |
| 02 | <div id="kanalet-permbajtja"> |
| 03 | <ul> |
| 04 | <li><a href="#">+ Classic Rock</a></li> |
| 05 | <li><a href="#">+ Rock</a></li> |
| 06 | <li><a href="#">+ Dance</a></li> |
| 07 | <li><a href="#">+ Hip Hop</a></li> |
| 08 | </ul> |
| 09 | <ul> |
| 10 | <li><a href="#">+ Rap</a></li> |
| 11 | <li><a href="#">+ RnB</a></li> |
| 12 | <li><a href="#">+ Jazz</a></li> |
| 13 | <li><a href="#">+ Latino</a></li> |
| 14 | </ul> |
| 15 | <ul> |
| 16 | <li><a href="#">+ Pop</a></li> |
| 17 | <li><a href="#">+ Soul</a></li> |
| 18 | <li><a href="#">+ Reggae</a></li> |
| 19 | <li><a href="#">+ Folk</a></li> |
| 20 | </ul> |
| 21 | <ul> |
| 22 | <li><a href="#">+ Electric</a></li> |
| 23 | <li><a href="#">+ Country</a></li> |
| 24 | <li><a href="#">+ Rave</a></li> |
| 25 | <li><a href="#">+ Techno</a></li> |
| 26 | </ul> |
| 27 | <div class="clear"></div> |
| 28 | </div> |
| 29 | <a href="#" id="kanalet-mbyll"><img src="imazhet/kanalet-mbyll.png" alt="Mbyll Kanalet" /></a> |
| 30 | </div> |
Sfondi i Kanaleve
Butoni i Mbylljes së Kanaleve
Strukturë fare e thjeshtë HTML. Një div që mban listën e kanaleve dhe një buton që do hapë/mbyllë #kanalet-permbajtja. Po ju tregoj kodin CSS, i cili gjithashtu është shumë i thjeshtë.
| CSS | | Kopjo Kodin | | ? |
| 1 | #kanalet{ |
| 2 | text-align:center; |
| 3 | } |
Duke qenë se #kanalet është më i vogël në gjerësi se faqja, i qendërzojmë elementë brenda saj me text-align.
| CSS | | Kopjo Kodin | | ? |
| 1 | #kanalet-permbajtja{ |
| 2 | height:99px; |
| 3 | background:url(../imazhet/kanalet-bkg.png) no-repeat; |
| 4 | padding:25px 0 25px 70px; |
| 5 | } |
Divi që përmban kanalet ka në sfond një imazh. Duke qenë se imazhi është kompleks, nuk kemi alternativë tjetër përveç se ta vendosim të tërin. Më pas i kam vendosur padding për krijuar hapësira, ku hapësirën e djathtë e kam lënë 0 meqë do ja vendos elementeve li, të cilat i bëra float për tu vënë në krah të njëra tjetrës dhe i vendosa hapësirë djathtas prej 130px për ti larguar mjaftueshëm nga njëra tjetra. Kam përcaktuar edhe text-align:left sepse kjo veti “trashëgohet” nga elementi “mëmë” #kanalet, i cili e ka të vendosur text-align:center.
| CSS | | Kopjo Kodin | | ? |
| 01 | #kanalet-permbajtja li{ |
| 02 | margin-bottom:10px; |
| 03 | } |
| 04 | |
| 05 | #kanalet-permbajtja li a{ |
| 06 | font-size:13px; |
| 07 | color:#54607d; |
| 08 | } |
| 09 | |
| 10 | #kanalet-permbajtja li a:hover{ |
| 11 | color:#199cb8; |
| 12 | text-decoration:none; |
| 13 | } |
Selektimi i parë krijon hapësirë vertikale midis kanaleve me margin-bottom. Selektimi i dytë dhe i tretë vendosin mënyrën e shfaqjes së lidhjeve, të cilat janë më të mëdha se tekstet e tjera të faqes dhe kanë ngjyrë blu.
Së fundmi do të shkruajmë kodin JavaScript i cili hap/mbyll panelin. Është egzaktësisht i njëjtë me kodin JavaScript që shkruajta për panelin e albumeve, i cili vendoset në poshtë kodit të parë (brenda $(document).ready()).
| Javascript | | Kopjo Kodin | | ? |
| 1 | $('#kanalet-mbyll').click(function(){ |
| 2 | $('#kanalet-permbajtja').slideToggle('slow'); |
| 3 | return false; |
| 4 | }); |
Footer
Footer-i është egzaktësisht i njëjtë si “paneli sipër” me ndryshimin e vetëm që përmban lidhjet.
Imazhet e Footer
| HTML | | Kopjo Kodin | | ? |
| 1 | <div id="footer"> |
| 2 | <img src="imazhet/footer-majtas.png" /> |
| 3 | <a href="#">Rreth Nesh</a> | <a href="#">Kontakt</a> | <a href="#">Ndihme</a> | <a href="#">Reklamo</a> | <a href="#">Sherbimet</a> | <a href="#">Opsione per Webmastera</a> | <a href="#">Raporto Probleme</a> | <a href="#">Kushtet e Perdorimit</a> | <a href="#">Fshehtesia</a> |
| 4 | <img src="imazhet/footer-djathtas.png" id="footer-djathtas" /> |
| 5 | </div> |
Struktura HTML duhet të jetë e kuptueshme tashmë për të gjithë se nuk kemi bërë asgjë të re. Imazhet janë skajet e rrumbullakëta.
| CSS | | Kopjo Kodin | | ? |
| 1 | #footer{ |
| 2 | position:relative; |
| 3 | height:17px; |
| 4 | background:url(../imazhet/footer-bkg.png) repeat-x; |
| 5 | margin-top:20px; |
| 6 | padding:10px; |
| 7 | text-align:center; |
| 8 | } |
Divi që mban footer-in ka si sfond një imazh që përsëritet horizontalisht. Pastaj kam krijuar hapësirë lart për ta ndarë nga seksioni i kanaleve dhe hapësirë të brendshme me padding. I kam vendosur text-align:center për të qendërzuar lidhjet.
| CSS | | Kopjo Kodin | | ? |
| 01 | #footer>img:first-child{ |
| 02 | display:block; |
| 03 | position:absolute; |
| 04 | left:0; |
| 05 | top:0; |
| 06 | } |
| 07 | |
| 08 | #footer-djathtas{ |
| 09 | display:block; |
| 10 | position:absolute; |
| 11 | right:0; |
| 12 | top:0; |
| 13 | } |
Rregullat e mësipërme vendosin imazhet për skajet e rrumbullakëta me pozicionim absolut. Të njëjtën teknikë e kemi përdorur shumë herë deri tani, prandaj s’besoj të ketë nevojë për komente.
| CSS | | Kopjo Kodin | | ? |
| 1 | #footer a{ |
| 2 | color:#55617e; |
| 3 | } |
Një rregull i thjeshtë për të vendosur ngjyrën e lidhjeve.
Testimi në Shfletues të Ndryshëm
Për ta mbyllur guidën me stil, do testoj faqen në shfletuesit kryesorë: IE7, IE8, Firefox 3.6, Safari 4 dhe Chrome 4. Sipas testimeve të mia, rezultatet janë goxha të mira dhe dizenjo është konsistent në pothuajse të gjithë shfletuesit. I vetmi shfletues që ka një problem minimal është IE7 ku menuja spostohet rreth 5px djathtas, por është aq i vogël sa nuk ja vlen të merremi.
Kini parasysh që dizenjo të ndryshme kërkojnë teknika të ndryshme, të cilat mund të mos jenë konsistente në shfletuesit kryesorë. Megjithatë, nëse shkruani kod të rregullt, të jeni të sigurt që pjesën më të madhe të rasteve s’do keni probleme me shfletuesit. I vetmi shfletues që është ëndërr e keqe për koduesit është IE6, të cilin për këtë guidë nuk e kam suportuar, por për faqe reale duhet ti kushtoni pak rëndësi. Nuk po them ta suportoni plotësisht, por të paktën sigurohuni që informacioni të shfaqet.
Përfundimi
Nëse keni arritur deri këtu, atëherë vërtetë komplimenta sepse keni lexuar një informacion masiv. Guida ka qenë e lodhshme për të dyja palët, por shpresoj vërtetë që i gjithë informacioni t’ju ketë shërbyer për të nisur kodimin në HTML dhe CSS, për të shtuar njohuritë apo pse jo, për të përftuar ndonjë teknik nëse jeni kodues me eksperiencë.
Çfarë ju këshilloj të bëni tani është të mundoheni ta realizoni vetë dizenjon me ndihmën e guidës. Gjykoni gjithashtu edhe stilet që mund të shkurtoni, ndonjë klasë që shkurton kod, etj. Quajeni këtë të fundit një sfidë personale.
Për ta mbyllur, ju premtoj që guida të tilla do vijojnë në të ardhmen për t’ju ndihmuar edhe më tepër në skenarë realë dhe në një mjedis pune të vërtetë. Personalisht e shoh si mënyrën më të mirë për të mësuar, prandaj dhe do i kushtoj rëndësi maksimale që edhe ju ta keni të lehtë të futeni në botën e HTML dhe CSS
Mësim të mbarë.
Pasi e lexova guiden tani do te mundohem qe t’a kodoj vet kete dizajn
wow ! guide mbreselenese , me nevojitej kjo , shume shume flm staffit
Joni mund te them qe je i papare. Vetem te enderrosh te shkruash gjithe kete guide eshte e lodhshme e le me te spjegosh çdo gje hap pas hapi.
S’kam koment, do behemi te gjithe profesioniste ketu ne Feniksi.
Rinori
Flm per komentet cuna. Shpresoj vertete t’ju kem ndihmuar.
@Rinor Flm
. Me pune sigurisht qe po 
@Joni, nuk e di a ti a romeo keni thene se edhe anetaret e tjere do ta kene nje tutorial si te kodohet nje faqe por disa jave me vone .
@Xhuli0, Romeo e ka thene dhe ka folur pikerisht per kete guide: si kodohet nje faqe webi me HTML dhe CSS.
Guida te tilla do te vazhdojne sepse eshte nje teme qe ka shume interes.
Pershendetje Fadion
Fillova ta lexoj dhe kuptoja mir deri ketu
Ketu kam nje problem nuk po kuptoj aq mir , pe di dmthenjen po spe di nje gje
ja shiko aty tek login
#login{
float:right;
width:140px;
padding:70px 35px 0 30px;
text-align:right;
}
——————————-
padding:70px 35px 0 30px;
———————————
padding a do me then qe ben levizjen mbrenda ID , ?
Kurse margin jasht ID ?
Dhe aty qe ke ber 70px nuk ke spjeguar saksisht
dmthn 70 nga nalt i ke hequr posht ke lan 0px shmajt ke shtuar 35px djatht ke shtuar 30 px ?
Te lutem me trego se nuk po e kam te kjart 100%
me respket Taulant (ThE.LannTy)
Hi Taulant,
persa i perket Padding edhe Margin ja ke ketu nje shpjegim edhe me foto sepse eshte nje teme icik delikate ajo qe shume e ngaterrojne
http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/#CSS-Basics1
Persa i perket vlerave qe merr nje padding: 10px 7px 4px 2px
Keto jane te paracaktuara keshtu:
E para eshte per top
E dyta eshte per right
E treta per bottom
E katerta per left
Pra me pak fjale fillon nga lart edhe leviz si akrepat e ores qe ta mbash mend me thjeshte.
Ka edhe menyra te tjera te shkruari te padding. Psh nese ke vetem nje vlere ne te do te thote qe ne te gjitha drejtimet merr ate vlere..
Nese ke 2 vlera psh: padding: 10px 20px
Kjo do te thote qe vlera e pare eshte per top edhe bottom edhe vlera e dyte eshte per left edhe right
Keto 2 rastet e fundit jan shkurtimet qe keshillohet te perdoren nese ka vlera te njejta.
Shpresoj qe te jem shpjeguar e nese ke pyetje prap me thuaj.
Faliminderit shum Remeo per spjegim tani kuptova mir ,
tani jam tek #menu 
ende se kap lexuar krejt ndoshta do bej pytje hala
Me respekt Taulant
Asgje Taulant,
pikerisht per kete pune jemi ketu qe t’ju ndihmojme. Nese ke pyetje prap mos hezito te shkruash. Nese un do e dij pergjigjen ta them une nese jo ta thot Fadioni sepse ai e ka koduar edhe din me mire cfare ka ber aty
ooo djema me te vertet mesim i kompletuar, po kerkoja per nje kohe te gjate nje gje te tille …
flm
Lovin feniksi
sapo codova disajnin e par un me ket tutorial flm shum.
Ju lumt.
Seshte disajni kushedi se qfar mirpo e codova
Me behet qejfi qe te ka hyre ne pune Besart. Jam kurioz te shoh rezultatin e punes qe ke bere…
Ketu mesova dicka te re nga ana e css . Kur fillova te mesoja css dhe html kisha probleme masive me ie . Eshte teme me vete kjo . Block ne img eshte shume e mire . Ne ie me shfaqeshin hapesira . Kam ndenjur me dite te tera dhe me ne fund e mesova ketu .
IE s’mbahet si i zgjuar. S’ke ci ben
Faleminderit per punen dhe mundimin !! Bravo
Pune e shkelqyer !!!!
Shpresojme te kete te tilla postime te tjera ne te ardhmen.
Congratulations !