Gjithsej janë 36 ore mësimi nga 45 minuta.
Linja 1: Hyrje në WEBPAGE DESIGN
Ora 1: Hyrje ne realizimin e Faqeve te Internetit (Webpage Design)
Gjithmonë duhet te dihet parimi i funksionimit të botës WEB dhe komunikimit me faqet Web.
Në esencë gjithmonë komunikimi nëpërmjet makinave kompjuterike është “Klient – Server”,
natyrisht duke pasur një adresë dhe protokoll të caktuar në të cilën kalon kjo adresë e makinës
“Klient” apo “Server”. Ndërtimi i Faqeve të Internetit, Aplikacioneve Onlinë ose Multimedial
për në Web, do të kenë nevojën e përdorimit të disa disiplinave siç janë, Animacione Grafike,
Dizenjimi Grafik, Komunikimet Interaktive, Arkitektura e Informacionit, Marketing, Fotografi,
Motora Kërkimi, Formularë Aplikimi, Dërgime Poste Elektronike etj.
Që të gjitha këto të vendosen në funksion, kanë nevojën e :
·
·
·
·
·
·
Gjuhe Programimi (Markup Language) të koduar për ndërtim strukture (si HTML, XML etj)
Gjuhë Grafike (Style Sheet) që shërben për formatimet e tekstit (si CSS dhe XSL)
Skripte të Lexuesit siç janë Javascript ose VBScript.
Skripte të Serverit për funksionimin automatik siç janë PHP ose ASP.
Teknologji Databazesh siç janë MySQL apo PostgreSQL
Module të Multimedias siç janë Flash apo Silverlight.
Faqet e Internetit mund të jenë statike ose dinamike në mënyrë që tu përshtaten paraqitjes, që
varen nga faktorë të ndryshëm. Nga specializimi i fushave të grafikës së telekomunikacionit dhe
Teknologjisë së informacionit është ndërtuar një vijë ndarëse midis Dizenjimeve Web qe është
specifike për ndërtimin e faqeve të internetit dhe Zhvillimit te Aplikacioneve të Web-it që është
specifike për anën logjistike të ndërtimit të informacionit.
Stadet që nga Konceptimi deri tek Përditësimi i faqeve web, duhet te ndiqen në mënyre rigoroze
që të arrihet synimi sa më funksional i faqes që keni për të ndërtuar.
·
Aksesi i Faqeve të Internetit
Që të jetë e lexueshme faqja e internetit duhet të jetë komform me principet e Aksesit.
- Faqja duhet të jetë ndërtuar ose programuar në strukturë të tillë, që të njihet nga shërbimet e
tjera web. Kjo gjuhë programimi është lëshuar nga IEEE (Instituti i Inxhinierëve Elektrik dhe
Elektronik) dhe është gjuhë internacionale për ndërtimin e faqeve web.
- Gjuha e kodimit duhet te përshtatet me strukturën që njihet në web, sic janë HTML, XML,
XHTML, MXML etj.
- Duhet të përdorni hiperlidhje që do ti quajmë “Link”, për të kaluar nga një faqe në një tjetër.
- Përdorimi i CSS pra formateve të Tekstit, Ngjyrave, Fonteve, pozicionit në Paragrafë, etj.
Sot për sot po fillojnë te zbatohen Sistemet me Përmbajtje të Menaxhueshme (CMS), qe i kanë
të gatshme CSS, gjuhën e përdorur, hiperlidhjet, ikonat etj. Puna juaj do te ishte vetëm shtimi,
modifikimi dhe përditësimi i teksteve, imazheve apo linkeve.
Ora 2: Planifikimi i Faqes se Internetit
Në planifikimin e faqeve web duhet të kihen parasysh disa pika reference, në mënyrë që të keni
rezultatin maksimal në përfundimin e projektit tuaj.
·
Konceptimi i Faqes së Internetit
Konceptimi i një faqeje web është kompleks, por është e rëndësishme që të gjeni kohën për
planifikimin e faqes së internetit, se çfarë nevojitet në një faqe web.
Jashtezakonisht thelbesore është të dihet se për kë audience klientele apo audiencë marketingu
doni juve të tërhiqni vëmendjen me këtë faqe interneti dhe çfarë përmbajtje do të ketë kjo faqe.
·
Konteksti
Ndërtimi i një faqe web duke pare ngjashmërinë me mënyrën tradicionale te prezantimit ne letër,
njësoj si një katalog vepron ne gjuhe programimi te koduar ne strukture. Prezantimi sot per sot
në teknologjinë e informacionit është forma më komplekse dhe më e softistikuar që vazhdon të
rritet me hapa të mëdhenj në këtë fushë.
·
Qëllimi
Është e rëndësishme të përcaktohet qëllimi i ndërtimit të një faqeje web, kështu përcaktojmë
edhe një hap tjetër në planifikimin e faqes se internetit. Qëllimi duhet te jete i fokusuar se çfarë
do të dali nga faqa web pasi është përfunduar dhe çfarë informacioni do të përfitoje lexuesi nga
kjo faqe web. Qëllimi i përcaktuar qarte se çfarë duhet të nxirret ne pah, ndihmon në zhvillimin e
permbajtjes se faqs web.
·
Audienca
Percaktimi se kush do te jete audienca ashtu si qellimi, eshte hapi kyc ne ndertimin e faqeve web.
Audienca eshte nje grup njerezish qe juve prisni qe ata te vizitojne faqen tuaj te internetit. Ky
grup njerezish e viziton faqen web per nje arsye specifike qe atyre u nevojitet dhe eshte shume e
rendesishme te kuptohet se cfare ata jane duke kerkuar ne sitin qe keni ndertuar. Pasi keni
percaktuar qellimin dhe tipin e audiences, duhet te merrni parasysh qe ky grup cfare
karakteristikash ka:
- Karakteristikat e Audiences ku perfshihen shkollimi, njohurite, mosha, buxheti etj
- Preferencat e Informacionit duhet tu paraqiten thjeshte pa komplikime
- Specifikimet e kompjuterit qe mund te kene apo mund te huazojne
- Eksperienca qe kane ne lidhje me Web-in apo Internetin ne perdorim apo zoterimin e tyre.
Keshtu juve vendosni nje baze te forte dhe te suksesshme ne ndertimin e faqes tuaj.
·
Permbajtja
Organizimi i permbatjes dhe menyra e te shpreburit te saj, duke ditur qe duhet te arrijme qellimin
e faqes web, duhet tu pershtatet karakteristikave te audiences. Eshte mire te krijohet idea, qe
gjate punes tu prezantohet afersisht nje grupi njerezish qe kane karakteristikat e ngjashme me ate
qe ju po krijoni. Keshtu Ju do te keni rezultatet e para se si do te pritet informacioni qe do te
publikoni ne faqen tuaj ne internet. Me pas behet ndarja dhe kategorizimi i informacionit sipas
nevojave te ketij grupi audience. Emrat e kategorive duhet te jene te qarte, konciz dhe tu
vendosen linke, ne menyre qe te drejtojne lexuesin direkte dhe shpejt atje ku ai synon.
Ora 3: Menyrat per dizenjimin e Faqeve WEB
Per te realizuar ndertimin dhe funksionimin e efekteshem te faqeve web ka disa menyra qe varen
posacerisht nga njohurite dhe eksperienca juaj ne kete fushe.
·
·
·
Menyra e pare per ndertimin e faqeve web ne menyre perfekte, duhet te keni njohuri te
mjaftueshme per skripte dhe gjuhe programimi sic jane HTML, JAVA, PHP, ASP etj.
Pra ju duhet te zgjidhni gjuhen qe keni me shume njohuri, ne menyre qe te komandoni te
gjitha pjeset e faqes tuaj te internetit, si modulet po ashtu edhe skriptet qe instaloni.
Keshtu ju keni mundesine per testimin, perditesimin(Update) e faqes web ne cdo moment
qe do tju duhet te nderhyni. Nje faqe te tille kerkon njohuri te thelle te gjuhes qe perdorni.
Per ndertimin e faqeve web me gjuhe programimi kerkon shume kohe dhe durim.
Menyra e dyte per dizenjimin e faqeve web, eshte perdorimi i programeve ndihmese qe
jane te bazuar ne gjuhet e programimit te faqeve web sic jane: Dreamweaver, Frontpage.
Per gjuhe programimi me te avancuara ndertohen me programet Adobe Flash dhe Adobe
Flex qe krijojne mardhenie interaktive me shqisat qe zoteron trupi i njeriut apo me
kompjuterin local, ku lexuesi tenton te marre informacion qe kerkon. Kjo menyre ndiqet
nga shumica e dizenjuesve te faqeve web, per efekt lehtesie ne punim. Keto programe
realizojne ne menyre automatike shkrimin e sintaksave te shume gjuheve te programimit.
Menyra e trete eshte perdorimi i Shablloneve (Template) te gatshem, faqe web qe jane
realizuar nga eksperte dhe shkarkohen lehtesisht nga Interneti. Puna e dizenjuesit eshte
vetem te gjeje se cfare shablloni i pershtatet. Per shembull, ne ngjyra apo funksionalitetin
qe ka realizohet faqja e internetit, ne shume pak kohe dhe ndryshimet e vetme per tu
modifikuar jane: Logo, Baneri, Tekstet, Imazhet dhe Linket qe jane per tu perditesuar.
Sot per sot kane marre zhvillim te madh ndertimi i faqeve web me Permbatje te
Menaxhueshme, sic jane Joomla, e-Commerce, Wordpress, Web2.0, Drupal etj. Ku
gjithcka kontrollohet dhe monitorohet nga Paneli i Administratorit.
Ora4: Problematikat ne Ndertimin e Faqeve Web.
Nuk mund te perjashtojme ne asnje menyre problemet qe kane Faqet Web. Ndertimi i faqeve
Web shfaq Problematika dhe Gabime te shumta si ne strukture ashtu edhe ne permbajtje.
Disa nga problemet me ndertimin e faqeve web jane evidente qe ne pamje te pare pasi keni
mbaruar websitin pra faqen tuaj te internetit.
·
·
·
Probleme Sintaksore shfaqen ne kompilimin e faqes web, ku mund te mungojne fjale,
shprehje, imazhe, multimedia etj. Pra sintaksat e programimit duhet te jene te
strukturuara sakte dhe pa gabime.
Probleme te Hiperlidhjeve(Link) dallohen gjate kompilimit te faqes web, kur nuk jepen
sakte adresat si Absolute dhe ato Relative. Kalimi nga nje faqe web ne nje tjeter, kerkon
adresen e sakte te pozicionit se ku ndodhet faqja pasardhese qe do te vije tek lexuesi.
Mos Organizimi i Direktorive eshte nje nga problemet me madhore nga dizenjuesit e
faqeve web. Faqa web eshte e ndertuar brenda nje direktorie, ku te gjitha programimet,
tekstet, imazhet, video dhe audio jane te renditura brenda kesaj direktorie rrenje(root).
Gabimet qe shfaqen gjate ndertimit te faqes web kane lidhje me gjetjen e Audiences, qe eshte
celesi kryesor i suksesit te faqes web.
·
·
·
·
·
Ne faqen web duhet te keni te shprehura qarte se cfare po reklamoni, me emra te shkruar
qarte. Nese ka produkte apo sherbime duhen shkruar qarte dhe kuptueshem emrat e tyre
sipas kategorive qe ndahen, ne menyre qe lexuesi apo motorat e kerkimit ti gjejne dhe te
drejtohen menjehere atje ku audienca tenton te shkoje.
Nuk duhen ndryshuar ngjyrat e linkeve te vizituara me pare nga laxuesi. Zakonisht kur
klikohet mbi nje link ai merr ngjyre te murrme, qe tregon qe i vizitua njehere. Mirepo
lexuesi duke klikuar ne shume linke harron se per cfare ka ardhur dhe hutohet nga
ndryshimi i ngjyres se linkeve duke menduar qe e ka vizituar me pare dhe largohet nga
faqa web duke treguar qe ai informacion qe kerkonte nuk ekzistonte ne faqen web.
Nuk duhen vendosur tekste apo imazhe me cilesi te dobet ne faqen web, sepse lexuesi
sidomos mbi moshen 40 vjec, lodhen nga dallimi i stergjatshem i karaktereve apo
imazheve me cilesi te dobet.
Duhen menjanuar cdo pamje si Reklama, Pop-up, iFrame apo Flash animacionet, te cilat
jo vetem e lodhin lexuesin te kuptoje se cfare jane, por edhe e hutojne duke e larguar nga
informacioni qe i duhet. Faqja duhet te jete sa me e thjeshte dhe te drejtoje lexuesin
direkte atje ku ai kerkon te shkoje.
Krijimet e linkeve me hapje ne Dritare ne re(Open in New Window). Duhen menjanuar
sa me shume keto dritare ne menyre qe lexuesi te qendroje vetem brenda faqes aktuale,
perndryshe ai do te largohet nga faqja juaj shume kollaj.
Ora5: Konceptet per Hyrje ne WEB
Interneti eshte rrjeti me i madh qe ka mbuluar boten elektronike, me lidhjen e shume rrjetave
kompjuterik me njeri-tjetrin. Ky u quajt World Wide Web dhe u vendos protokolli “www”.
Kurse WEB mori emrin shkurt e World Wide Web. Me WEB do te kuptojme rrjeten e gjere
elektronike te shkebimit te informacionit. Ky shkembim informacioni perseri bazohet ne parimin
“Klient – Server”.
Parimi “Klient-Server” funksionon ne baze te Adresave dhe Protokolleve ne te cilen adresat jane
te lexueshme per destinacion. Cdo makine kompjuterike ka nje adrese qe quhet IP(Internet
Protocol) dhe dy makina qe te komunikojne me njera tjetren nepermjet adresave te tyre kane
nevoje per protokollin qe mund te jete TCP/IP (Transmission Control Protocol/Internet Protocol)
ose UDP (User Datagram Protocol).
Ne kete moment njeri nga kompjuterat do te quhet Server, sepse transmeton informacion dhe
tjetri quhet Klient sespe merr informacionin dhe anasjellas.
Nese lidhen me shume kompjutera me njeri-tjetrin do te lindi nevoja per pajisje ndihmese si
Switch, Hub, Router, Access Point etj, por protokolli nuk ndryshon nga sa thame me lart.
Komunikimi i nje kompjuteri lokal, me nje kompjuter ne Web mund te komunikoje ne dy
protokolle FTP (File Transfer Protocol) dhe HTTP (HyperText Trasfer Protocol). Me FTP na
jepet mundesia e transferimit te skedareve qe kemi ndertuar faqen web nga kompjuteri
lokal(Klient) ku ndodhen keto skedare, ne kompjuterin ne Web, qe do ta quajme Web Server.
Kurse me HTTP na behet e mundur leximi ose kompilimi i permbajtjes se ketyre skedareve qe
kompjuam ne Web Server.
Programet ose Web Browser-at qe na japin mundesine e leximit te permbajtjes se faqeve Web,
jane Internet Explorer, Mozilla Firefox, Opera, Google Chrome etj. Quhet Web Browser-a sepse
jane programe qe perdorin gjuhet e programimit te mesiperme per kompilimin e faqeve web.
Ora6: Publikimi i Domain-it dhe Host-it
Qe te publikohet materiali jone, pra faqja web, duhet te hidhnim te gjithe skedaret ne web server,
pra ne kompjuterin tone Server. kalimi do te beheshe me protokollin FTP. Qe audienca te kete
mundesi te lexoje permbajtjen e faqes tuaj, i duhet nje adrese ne web ku te kene mundesine te
navigojne. Eshte shume e rendesishme qe kjo te kuptohet. Meqe ne i kemi tashme materialet ne
Web Server, pra ne kompjuterin tone Server, automatikisht ky server do te kete nje adrese IP, sic
cdo makine kompjuterike ne internet. Kjo adrese IP eshte konvertuar ne fjale dhe numra te
kuptueshem nga lexuesi dhe quhet DOMAIN. E gjithe hapsira e memorjes e lejuar nga ky web
server, quhet HOST. Hedhja e informacionit ne Host per tu lexuar quhet Website Hosting.
Domain-i ka formen “emrikompanise.niveli“, nje shembull konkret eshte “google.com”.
Nje domain mund te prezantoje shume adresa te tjera IP ose Domaine te tjere.
Per shembull, microsoft.com, prezanton shume kompani te tjera qe lidhen me aktivitetin e
Microsoftit.
Mbrapashtesa “.niveli”, quhet Top Level Domain (TLD), nuk eshte vetem per te shprehur tipin e
nivelit qe perfaqeson, por ndihmon adresen IP qe te jete e sakte, se
sepse
pse mban pergjegjesine per
Domain Name System (DNS). Tipet e niveleve (TLD) jane te limituar si domaine:
·
·
·
·
·
·
gov – Perdoret per te treguar qe jane faqe per Administraten Shterore ((Government
Government)
edu – Tregon nivele edukimi apo Trajnimesh. ((Education)
org – Perfaqeson organizata joftimim prurese ((Organization)
mil – Niveli ushtarak i perdorimit te faqe
faqeve web (Military)
com – Biznese private me tregti fitimprurese ((Commercial)
net – Organizata me rrjet te perbashket ((Network)
Fig.6.1: Ilustrim i Webserver, Proto
Protokolleve, Domain dhe Host:
Ora7: Kontroll Njohurish per kapitullin 1.
Linja 2: Ndertimi i Faqes se Internetit me Tekst Editor.
Ora1: Rregullat Baze te Strukturimit
Per te ndertuar faqen e internetit perdoren shume programe qe bejne te mundur automatikisht,
drejtshkrimin e sintaksave gjate programimit, sic jane Dreamweaver Fr
Frontpage,
ontpage, Office etj.
Baza e te gjithe editoreve eshte gjuha e programimit HTML (Hyper Tekst Markup Language) , si
gjuha e pare dhe me e perdorur nga Web Browser
Browser-at, Internet Explorer apo Mozilla. Cdo gjuhe
programimi ka tipin dhe sintaksen e vet te program
programimit,
imit, ne menyre qe te kete funksion ajo qe po
ndertojme. Nese e gjithe sintaksa dhe informacioni shkruhen sipas rregullave te gjuhen HTML,
kur te kompilohet pra te publikohet nuk do te dalin gabime. Por nese ka mosperputhje te
sintakses ne kompilim do te kemi
emi gabime. Perpara se te fillojme me prezantimin e kompandave
duhen parasysh disa rregulla shkrimi:
Programi me i thjeshte i mundshem i mundesuar nga kompania Microsoft, eshte NOTEPAD.
Pra eshte tekst editori qe ndodhet ne tere kompjuterat, te cilin do te perdorim ne kete kapitull.
Sistemi i Operimit qe do te trajtojme ne kete kapitull eshte Windows VISTA (32bit).
Krijoni nje direktori emrin “faqeweb
faqeweb”,
”, vendi se ku e krijoni nuk ka shume rendesi per faqen web.
Shpjegim i ndertimit te struktures brenda ddirektorise
irektorise baze (root).
(
Duhet te dihen me saktesi nivelet e direktorive qe po krijoni.
Kjo arsye sherben per rregullimin e materialeve dhe sistemimin ekzakt
te informacionit brenda direktorise baze (root) dhe te krijojme
adresimin e informacionit qe quhen Link. Do ta trajtojme ne hapat e
metejshme kete adrese
adrese. Shikoni fig.1.1.
Nga ana llogjike duhet te dihet kjo menyre e te kaluarit te infomacionit.
Nga folderi faqeweb per te kaluar tek reviste,, eshte kjo sintakse:
P.sh: foto/broshura/reviste me vone do ti trajtojme Linket Relative
Nga folderi aktivitete per te kaluar tek baner,, eshte kjo sintakse:
P.sh: ../imazhe/baner
../imazhe
me vone do ti trajtojme Linket Relative
Pra: karakteri / (slash) na jep mundesine te kalojme nga niveli rrenje
0(root) ne nivelet e tjer
tjera Niveli1, Niveli2 etj.
Karakteri .. (dot dot) kalon nga Nivelet me te largeta drejt nivelit 0.
Ora2: Editori Notepad dhe Sintaksa HTML
Klikoni START > Run . Shkruani notepad dhe shtypni Enter.
Ilustrimi
> Enter Duhet te hapet dr
dritarja:
I gjithe informacioni sintaksor do te ruhet ne kete
tekst editor. Strukturimi i sintaksave do te behet njesoj
si nivelet e direktorise qe permendem me lart.
Kjo per arsye lexueshmerie te qarte te sintaksave.
Gjuha HTML fillon dhe mbyllet me sintaksa qe quhen Tag, kane pamje te tille < >(hapese) ose
</ > (mbyllese), ku brenda cdo tag ka karaktere qe jane njesoj si ne hapje dhe mbyllje.
Nje faqe interneti normalisht behet sipas kesaj
llogjike, ne fillim vendoset nje Baner ku duhet te
jete montuar
tuar nje Logo dhe Slogani i aktivitetit.
Vendoset shiriti i butonave te menuse.
Ne cdo nderfaqe nuk ndryshojne baneri dhe
butonat e menuse.
Vendoset dhe permbajtja qe cdo nderfaqe do te
kete permbajtje te ndryshme.
Permasat e punes jane ne Pixel shkurt px.
Zakonisht vegla grafike ndihmese eshte
Photoshop per editimin e imazheve grafike.
Ne notepad do te punojme gjithmone ne kete rruge:
<html>
<head>
<title> ……Informacioni i faqes…..</title>
</head>
<body>
………Informacioni per lexuesin……………..
</body>
</html>
Ora3:: Krijimi dhe ruajtja e faqeve Web.
Ne fushen e Notepadit qe kemi hapur, shkruani:
<html>
<head>
<title> Gjimnazi Qemal Stafa</title>
</head>
<body>
Mire se erdhet ne gjimnazin tone.
</body>
</html>
Sapo krijuam faqen e pare me te thjeshte ne HTML.
Per ta ruajtur dhe per ta shikuar ne Internet Explorer, ndjekim kete rruge:
Tek Notepad shkojme
hkojme tek menu File >
Save as...
... dhe ne direktorine faqeweb, e
ruajme me emrin “index.html
index.html” dhe tek
Save as Type (tipi i skedarit)
darit)
zgjidhni “All files”, jepini Save.
I jepet emri index.html sepse eshte
skedari qe njihet i pari automatikisht nga
te gjithe web browser-at
at si Internet
Explorer etj.
Shkojme ne folderin faqeweb dhe
shikojme qe ikona e skedarit index.html eshte kthyer ne ikonen e Internet Eplorer--it. Jepini
thjesht dopio klikim dhe do te shikoni rezultatin qe kemi arritur deri tani.
Ngjitur me ikonen e browserit eshte titulli qe ne
shkruajtem tek sintaksa <title>......
...... </title>.
Dhe me poshte kemi tekstin qe shkruajtem
uajtem tek
<body>......</body>.
Le te japim disa sintaksa per rregullimin e ngjyrave,
tipit te shkrimit dhe madhesise se shkrimit.
Qe ta editojme skedarin index.html duhet te
klikojme me te djathten dhe Open with... >
Notepad .
Ora4: Bazat e HTML.
Po japim ne fillim disa komanda qe kane lidhje direkte me parametrat e tekstit, qe shkruhen
brenda stantaksave <body> .... </body>:
Sintaksa (Tag)
<html>
<body>
<body bgcolor="yellow">
<h1> deri <h6>
<p>
<b>
<i>
<u>
<hr />
<br />
<img src=”emer.skedar”>
<a href="url" >
<!-- koment --!>
Përshkrimi
Aktivizon gjuhën HTML
Trupi i përmbajtjes
Ngjyra e Sfondit te faqes web
Përcakton titujt nga <h1> deri <h6>
Është për krijimin e paragrafëve
Ben tekstin te theksuar (Bold)
Ben tekstin te pjerrezuar (Italic)
Ben tekstin te nënvizuar (Underline)
Përcakton një vijë horizontale
Kalon në një rresht te ri
Thërret një imazh grafik
Kjo është sintaksa për linke
Përcakton një koment ne burim dhe
jo ne faqen e lexuesit
Karakteret
Përshkrimi
&euml;
&ccedil;
Aktivizon shkronjën “ë”
Aktivizon shkronjën “ç”
Ngjyrat ne Hekzadecimal
#000000 - #ffffff
Këtu është demonstrimi për te provuar disa sintaksa baze te gjuhës HTML.
Duhet të kihen parasysh mënyrat e shkrimit të
sintaksave qe nga fillimi deri në fund sipas
rradhës. Shikoni ndryshimin kur vendosim
shkronjën “ë”, se si dallohet nga Web
Browser-at.
Ora5: Përdorimi i Klasave dhe Ndërtimi i CSS.
Me klasa do të kuptojmë te gjitha veçoritë (Atributet) e grumbulluara, i përkasin një ose më
shumë elementeve të një faqeje Web. Pra bëhet ndarja e elementeve sipas tipareve të tyre.
Klasat do të përmbahen brenda skedarit index.html, në këtë kapitull.
Por ndërtimi i klasave do te shoqërohet me skedarë të formatit CSS (Cascading Style Sheets), ku
këta skedarë CSS u prezantohen gjuhës HTML gjatë kompilimit të faqes web. Me skedarët CSS
do të merremi në kapitullin pasardhës. Të provojmë të përdorimin e klasave për tekstet tona.
E shkruajmë edhe njëherë kodin me programin Notepad, tek skedari index.html, por të
ndryshuar me disa kode shtesë që i përkasin klasave.
Pra ilustrimi se si do të shfaqet në web browser
Pra në burimin e skedarit duhet te shkruhet kodi:
<html>
<head>
<title> Gjimnazi Qemal Stafa</title>
<!-- Ngjyra e Kuqe per Titullin h1-->
<!-- Ngjyra Jeshile dhe Pjerrezim per Titullin h3-->
<!-- Japim Theksimin Titullit h6-->
<!-- Paragrafi ka madhesine e shkrimit 14-->
<style type="text/css">
<!-.h1_kuqe {
color: #F00;
}
.h3_jeshile {
color: #0F0;
font-style: italic;
}
.h6_theksuar {
font-weight: bold;
}
.paragrafi_faqeinterneti {
font-size: 14px;
}
-->
</style>
</head>
<body bgcolor="yellow">
<!-- Japim titujt e Permbajtjes-->
<!-- Japim ngjyren e Kuqe Titullit h1-->
<h1 class="h1_kuqe">P&euml;rsh&euml;ndetje</h1>
<!-- Japim ngjyren e Jeshile Titullit h3-->
<h3
class="h3_jeshile">P&euml;rsh&euml;ndetje</h3>
<!-- Japim Theksimin Titullit h6-->
<h6
class="h6_theksuar">P&euml;rsh&euml;ndetje</h6>
<!-- Krijojme Paragraf dhe madhesia e shkrimit 14-->
<p class="paragrafi_faqeinterneti">Faqe
Interneti</p>
<!-- Stile Teksti-->
<b>Tekst i theksuar</b><br>
<i>Tekst i pjerr&euml;zuar</i>
<!-- Vijes horizontale i japim klasen e njejte me
h1_kuqe-->
<hr class="h1_kuqe">
<u>Tekst i n&euml;nvizuar</u><br>
<!-- Mbaron demonstrimi-->
</body>
</html>
Ora6: Linket,, Adresat(url) dhe Burimi i te dhenave(src).
Këtu po japim tabelën e sintaksave ne HTML qe do te duhen për insertimin e imazheve dhe
linkeve.
Sintaksa (Tag)
<img src="url">
<img src="url" alt="Tregues">
<body background="url">
<img src="url" align="rrjeshtimet">
<a href="link"> Ky eshte link </a>
<a href="link"> <img src="url"> </a>
Përshkrimi
Thërret imazhin ne faqen HTML.
Treguesi i imazhit
Imazh ne Sfondin e faqes web
Rreshtimet e Imazheve sipas teksteve
Jep link për Tekstet
Jep link për Imazhet
Është shume e rëndësishme te dihen se cfare eshte nje link, url apo src. Këto tre sintaksa e bëjnë
jeten e faqes web funksionale.
- Link (ose HyperLink) do te thote lidhje(adresim)
lidhje
e selektueshme nga një Tekst, Imazh apo
Objekt multimedial ne një tjetër.. Ne ueb, forma me e përdorshme e linkut është një fjale e
nënvijëzuar apo nje imazh te klikueshem nga përdoruesi.
- URL (Uniform Resource Locator) është një adrese unike për një skedar qe është i shikueshëm
ne internet. Për shembull nje url mund te gjendet: http://www.google.com/index.html .
- SRC (Source) është një burim ose vend nga ku merren te dhënat qe te transmetohen online.
Te kujtojme edhe njehere menyren e marrjes dhe drejtimit te informacionit
me linke, src
rc dhe linke. Linket jane dy tipesh:
- Relative ku adresa shprehet duke i bazuar ne direktorine burim:
“imazhe/baner.png
imazhe/baner.png”
- Absolute ku adresa shprehet duke u bazuar direktorine baze te domainit:
“http://www.google.com/index/html
://www.google.com/index/html”
Direktoria faqeweb eshte burimi (root), linket dhe src nuk duhet te kalojne
përtej burimit, por duhen vetem brenda këtij folderi.
Ne direktorine faqeweb ne nivelin 0,, rekomandohet qe mundësisht te gjithe
skedaret e tipit html te ruhen ne nivelin 0, pra ne te njëjtin nivel me burimin,
kjo per thjeshtësi dhe shpejtësi te hapjes se faqes web online.
P.sh: qe ne permbatjen e faqes index.html, te shfaqet imazhi aktivitete.jpg,
qe eshte brenda direktorise foto, duhet te shkruajme sintaksen
intaksen me Notepad,
tek burimi i skedarit index.html:
<img src="foto/aktivitete.jpg" alt="Aktivitete Tona">
Kurse tek kontakt.html, duhet te shkruanim per te patur foton kontakt.gif, kete sintakse: <img
src="imazhe/permbajtja/kontakt.gif" alt="Na Kontakt
Kontaktoni">
Nese rreth_nesh.html,, do te ndodheshe brenda direktorise broshura,atehere
,atehere adresimi qe
skedari rreth_nesh.gif, te shfaqet ne përmbajtjen e rreth_nesh.html, do te ishte:
<img src="../../imazhe/permbajtja/rreth_nesh.gif" alt="
alt="Rreth Nesh">
Pra e rendesishme
ishme per tu kuptuar dhe mbajtur mend, qe faqja juaj te jete funksionale: Karakteri / (slash) na
jep mundesine te kalojme nga niveli rrenje 0(root) ne nivelet e tjera Niveli1, Niveli2 etj.
Karakteri .. (dot dot) kalon nga Nivelet me te largeta drejt nivel
nivelit 0.
Ora7: Insertimi i Imazheve dhe linket.
linket
E krijojme nje faqe web, me 4 nderfaqe, pra: index.html, rreth_nesh.html, galeria.html,
kontakt.html.
Tek folderi “faqeweb”,
”, do te krijojme direktorine ““imazhe”,
”, ku do te hedhim tere imazhet qe do
te na sherbejnee per ndertimin e faqes, po ashtu edhe te butonave.
Krijojme keto imazhe me veglat si Photoshop apo Paint te Windows
Windows-it,, qe si shembull do te
marrim gjimnazin “Qemal Stafa”:
baner.jpg me përmasa width=800px dhe heigh=120px dhe sfondi.jpg me W=18 dhe H=
H=23.
Imazhet per butonat index.jpg, rreth_nesh.jpg, galeria.jpg, kontakt.jpg te gjitha me përmasa
width=200px dhe heigh=21px.
Ndertimin grafikk e realizojme me veglat ndihmese Photoshop ose Paint i Windows
Windows-it.
Hapim skedarin index.html me Notepad dhe fillojme te shkruajme sipas rradhes, ne fillim
banerin, butonat e menuse me linket perkatese dhe ne fund përmbajtja. Duhet te kuptojme qe
baneri dhe butonat e menuse, nuk ndryshojne per cdo nenfaqe qe do te krijohet.
Kodi qe duhet shkruar ne Notepad, tek skedari index.html.
Ruajeni me komanden “SAVE” tek menuja “File” e Notepad
Notepad-it, skedarin index.html.
Klikoni tek ikona e sapo ndryshuar e index.html dhe do te merrni pamjen e mëposhtme.
Per cdo imazh qe i perket butonave te menuse
menuse, kemi shkruar sintaksen e linkeve dhe “src” e imazheve,
qe perfaqesojne butonat e menuse ne kete moment .
<!--Insertojme
Insertojme imazhet e butonave dhe linket perkatese
perkatese-->
<a href="index.html"><img src="imazhe/index.jpg" border="0"></a>
<a href="rreth_nesh.html"><img src="imazhe/rreth_ne
src="imazhe/rreth_nesh.jpg" border="0"></a>
<a href="galeria.html"><img src="imazhe/galeria.jpg" border="0"></a>
<a href="kontakt.html"><img src="imazhe/kontakt.jpg" border="0"></a>
<hr>
Kemi përdorur per imazhet atributin (border=”0”), sepse gjate shfaqjes ne web browser, nuk do te duket
korniza e linkut qe ka imazhi, pra për thjeshtësi ne elegance.
Deri këtu nuk kemi përdorur “Klasa”, për ndryshimin e atributeve te teksteve,, qe te mos e rendojmë
sintaksën por te kuptojmë funksionalitetin e faqes web.
Ora8: Krijimi i Nenfaqeve.
Duke ditur qe baneri dhe butonat e menuse do te mbeten njesoj ne edhe ne nenfaqet e tjera, e
kemi shume te thjeshte te krijojme disa nenfaqe sipas skemes:
E keshtu me rradhe faqe ne menyre te pafundme.
Do te veprojme ne menyre “Copy” & “Paste”, qe te keni shpejtesi ne veprime.
Skedarit index.html, jepini komanden “Copy” dhe jepni komanden “Paste” ne te njejten direktori me
skedarin index.html. Deri sa te marri formen e meposhteme.
Tashme ajo qe ngelet per te bere eshte riemertimi i skedareve qe kopjuat, ne emrat perkates te tyre
sipas linkeve qe kemi vene tek skedari index.html. Riemertimi duhet te jete:
rreth_nesh.html, galleria.html, kontakt.html. Pasi keni perfunduar emertimin, klikoni me dopio klik tek
nje nga skedaret e sapo krijuar, dhe keni keshtu nje faqe te kompletuar ne shume pak kohe.
ajo qe ngelet eshte plotesimi I permbajtjeve perkatese te cdo nenfaqeje.
Ora9: Insertimi i Tabelave dhe skedarëve Audio.
Per cdo nga nenfaqet qe kemi krijuar do ta na duhet ta mbushim me informacionin perkates.
Per shembull, permbatja qe i perket index.html, duhet te kete nje informacion prezantues per
shkollen Qemal Stafa. Tek nenfaqja rreth_nesh.html, duhet te kete historikun ne lidhje me
shkollen dhe tek kontakt.html, duhet te kete informacionin per kontakt ne lidhje me drejtuesit e
shkolles, etj. Kur lexuesi te hapi faqen index.html, do te vendosim nje skedar audio, qe do te jete
Himni i Flamurit dhe skedarin do ta quajme himni_flamurit.mp3. Skedaret multimedial qe
mund te shikohen apo degjohen online, jane te disa tipeve: avi, flv, mp4, mov, swf, mid, mp3, etj.
Per te insertuar skedare multimedial, ka shume metoda. Ne librin tone eshte trajtuar metoda me e
suksesshme per insertimin e skedarëve audio.
Me pare do te na duhet te insertojme nje tabele, qe do te permbaje ne qelizat e saj.
Sintaksat qe do na duhen:
<table border="0">…… </table>
<embed src="url" autostart=true loop=false
height=62 width=144 controls="console">
Behet insertimi i tabelave
Insertimi i skedarëve Audio
Rregulli per te insertuar tabela ne HTML, ka nje llogjike te tille:
Si do te duket ne Web browser:
rresht 1, koll 1 rresht 1, koll 2
rresht 2, koll 1 rresht 2, koll 2
Atehere fillojme te editojme, permbajtjen e index.html, duke vendosur tabela dhe ne fund skedarin audio
te Himnit te flamurit. Kur te hapet faqja ne web browser, do te hapet automatikisht edhe Himni i Flamurit.
Krijojme nje direktori te re audio, ne nivelin 0, pra paralelisht me index.html dhe kopjojme brenda ketsaj
direktorie skedarin himni_flamurit.mp3. Ne qelizen e pare (R1, K1) dhe ne (R2,K1) do te shkruajme
tekst, kurse ne qelizen (R1,K2) do te vendosim nje foto(imazhe/qemal_stafa.jpg) me permasa
width=300px dhe heigh=200px. Ne 2 qelizat e para do te shkruajme pershkrim te shkolles qemal Stafa.
Tabela dhe skedari audio do te vendosen ne vend te fjalise “Permbajtja e faqes se indeksit”.
Teksti qe eshte perdorur eshte thjesht demonstrativ. Do te perdorim gjithashtu disa atribute ose tipare te
tabelave, sic jane:
- border=”0”, qe sherben per ti dhene kornizes trashesi 0, te padukshme.
- align=”left” “center” “right”, qe rreshtojne tekstet apo imazhet grafike majtas, qender apo djathtas.
- valign=”top” “middle” “bottom”, qe pozicionojne tekstet apo imazhet lart, ne mes apo poshte.
Ora10: Plotesimi i përmbajtjeve te përsëritura
përsëritura.
Duke mbështetur ne mesimin e meparshem, vazhdimi do te ishte si me poshte.
Permbajtja e skedarit index.html, do te shkruheshe:
Per Irisoftin qe do ti duhet ne Formatim:
<html>
<head>
<title> Gjimnazi Qemal Stafa</title>
</head>
<!-- Japim imazhin e Sfondit-->
<body background="imazhe/sfondi.jpg">
<!-- Krijojme Banerin-->
<img src="imazhe/baner.jpg" border
border="0">
<!--kalojme ne rresht te ri-->
<br/>
<!--Insertojme
Insertojme imazhet e butonave dhe linket perkatese
perkatese-->
<a href="index.html"><img src="imazhe/index.jpg" border="0"></a>
<a href="rreth_nesh.html"><img src="imazhe/rreth_nesh.jpg" border="0"></a>
<a href="galeria.html"><img src="imazhe/galeria.jpg" border="0"></a>
<a href="kontakt.html"><img src="imazhe/kontakt.jpg" border="0"></a>
<hr>
<!-- Japim titujt e Permbajtjes-->
<h1>P&euml;rsh&euml;ndetje</h1> <br>
<!-- Fillon permbatja e Tabeles-->
<table width="800" border="0">
<tr>
<td align="left" valign="top">Shkolla, q&euml; prej dy vjet&euml;sh renditet n&euml;
m&euml; t&euml; mirat e Republik&euml;s. Gjithmon&euml; m&euml; t&euml; mir&euml;t!
Ky &euml;sht&euml; slogani kryesor i nx&euml;n&euml;sve t&euml; &ldquo;Qemal
Staf&euml;s&rdquo;, t&euml; cil&euml;t pranojn&euml;, jo pa krenari, se jan&euml; m&euml;
t&euml; mir&euml;t e kryeqytetit. Jan&euml; t&euml; shumt&euml; ata q&euml; jan&euml;
nderuar me medalje t&euml; art&euml;,<span id="more-5487"> </span>
ve&ccedil;an&euml;risht n&euml; olimpiada komb&euml;tare, por, pas k&euml;tij suksesi
renditen me radh&euml; edhe &ccedil;mime t&euml; tjera, po kaq t&euml;
r&euml;nd&euml;sishme. Ve&ccedil; k&euml;tij fakti, q&euml; jan&euml; m&euml; t&euml;
mir&euml;t, k&euml;t&euml; e konfirmojn&euml; edhe rezultatet e tyre semestrale.
Kalueshm&euml;ria e k&euml;tij gjimnazi, p&euml;r semestrin q&euml; kaloi, ishte 77
p&euml;r qind, nd&euml;rsa nota mesatare llogaritet 7. L&euml;nda e matematik&euml;s ka
nj&euml; kalueshm&euml;ri prej 80 p&euml;r qind, me nj&euml; mesatare prej 6,4 p&euml;r
qind, nd&euml;rsa fizika me nj&euml; kalueshm&euml;ri prej 87 p&euml;r qind dhe mesatare
6,7.</td>
<td width="302" align="right" valign="top"><img src="imazhe/qemal_stafa.jpg"
width="300" height="201"></td>
</tr>
<tr>
<td width="475">Midis tyre, dallohen edhe nj&euml; pjes&euml; m&euml;suesish q&euml;
kan&euml; marr&euml; vler&euml;sime si m&euml; t&euml; mir&euml;t e Republik&euml;s,
gj&euml; q&euml; ia shton edhe m&euml; shum&euml; vlerat shkoll&euml;s &ldquo;Qemal
Stafa&rdquo;.</td>
<td align="right"><embed src="audio/himni_flamurit.mp3" autostart=true loop=false
height=62 width=144 controls="console"></td>
</tr>
</table>
<!-- Mbaron permbatja e Tabeles-->
</body>
</html>
Pas kompilimit do te përftonim nje pamje te tille ne web browser:
Kete përmbajtje, qe shkruajtem tek index.html, me Notepad te ndertuar nga tabela, e kopjojme
me komanden “Copy” dhe hapim skedarin rreth_nesh.html,, me Notepad. Ne vend te shprehjes
“Permbatja e faqes se indeksit...”,
”, jepini komanden ““Paste”,
”, ne mënyre qe te hedhim te njejten
përmbajtje si tek index.html.. Te njejten rruge ndjekim edhe per dy nenfaqet e tjera
tjera, galeria.html
dhe kontakt.html.. Pra ajo qe ngelet per tu bere, esht
eshtee vetem editimi i tekstit dhe fotove qe
ndodhen ne cdo tabele te cdo skedari qe krijoni.Per shembull tek kontakt.html,, do te ndertojme
formulare kontakti, brenda tabeles qe kemi krijuar.
Ora11: Ndertimi i Formulareve “Forms”.
Ne permbatjen e kontakt.html, do te na duhet te vendosim ne përmbajtje, fomulare kontakti qe
duhen plotësuar nga Lexuesi i faqes, kur ai hyn ne kete përmbajtje.
Japim tabelen e sintaksave qe do te duhen per te ndertuar formularin.
<form>…Jep Elementet…</form>
Tekst:<input type="text" name="teksti" />
<input type="radio" name="kategoria"
value="tekst" /> tekst
Tekst:
<input type="checkbox" name="kategoria"
value="tekst" />
<select name="kategoria">
<option value="tekst1">TEKST1</option>
Aktivizohen komandat e formularit
Fushe Teksti (Text Field) qe permban vetem
nje rresht per te shkruar dhe eshte i limituar.
Inserton Radio Butonat nese duhet te zgjedhi
nje opsion nga te mundshmet.
Kuti plotesimi ku lexuesi mund te zgjedhe
nje ose disa opsione nga te mundshmet.
<textarea rows="10" cols="30"> Koment
</textarea>
Liste e Selektueshme opsionesh (Drop Down
Box)
Zone Teksti (Text Area) per te lene komentet
e nevojshme sepse po kontakton.
<input type="submit" value="Dergo">
Buton konfirmimi te dergimit te te dhenave
Te ndertojme me keto sintaksa nje formular kontaktimi dhe me pas kur te klikojme ne butonin e
konfirmimit “Dergo”, te shkoje ne adresen e-mail “info@qemalstafa.com”. Duhet patur parasysh qe
formularet ne HTML per dergimin e e-maileve, mundësohet nga programi klient qe keni te instaluar dhe
konfiguruar ne kompjuterin tuaj, sic eshte Outlook Express, Outlook Office etj. Vete gjuha HTML, nuk
mundëson dergimin e e-maileve pa ndihmen e programeve shtese ose gjuhëve te tjera te programimit
sic jane php ose asp. Hapim kontakt.html, me Notepad.
Ne vend te tabeles, do te vendosim sipas rradhes pjeset e formularit.
Shkrimi i sintaksave ne Notepad
Pamja ne Web Browser
Per Irisoftin, ne formatin nese i duhet kodi
<html>
<head>
<title> Gjimnazi Qemal Stafa</title>
</head>
<!-- Japim imazhin e Sfondit-->
<body background="imazhe/sfondi.jpg">
<!-- Krijojme Banerin-->
<img src="imazhe/baner.jpg" border="0">
<!--kalojme ne rresht te ri-->
<br/>
<!--Insertojme imazhet e butonave dhe linket perkatese-->
<a href="index.html"><img src="imazhe/index.jpg" border="0"></a>
<a href="rreth_nesh.html"><img src="imazhe/rreth_nesh.jpg" border="0"></a>
<a href="galeria.html"><img src="imazhe/galeria.jpg" border="0"></a>
<a href="kontakt.html"><img src="imazhe/kontakt.jpg" border="0"></a>
<hr>
<!-- Fillon permbatja e Formularit-->
<form action="MAILTO:info@qemalstafa.com" method="post" enctype="text/plain">
<h4>Ky formular dergon E-mail shkolles Qemal Stafa.</h4>
Emri: <input type="text" name="emri" value="emrijuaj" size="20"><br>
Mashkull: <input type="radio" name="Seksi" value="Mashkull" checked="checked"><br>
Femer: <input type="radio" name="Seksi" value="Femer"><br>
E-mail: <input type="text" name="email" value="emailijuaj" size="20"><br>
Nxenes: <input type="checkbox" name="nxenes" value="nxenes" checked="checked" /><br />
Mesues: <input type="checkbox" name="mesues" value="Mesues" /> <br />
Gjuha: <select name="Gjuha">
<option value="anglisht">Anglisht</option>
<option value="frengjisht">Frengjisht</option>
<option value="italisht">Italisht</option>
<option value="shqip" selected="selected">Shqip</option>
</select><br>
Komenti:<br><textarea rows="10" cols="30"> Jepni komentin tuaj. </textarea>
<br><br>
<input type="submit" value="Dergo">
<input type="reset" value="Pastro">
</form><!-- Mbaron permbatja e Formularit-->
</body>
</html>
Ora12: Insertimi i Frame-ve.
Shpesh na lind nevoja qe dy ose me shume ffaqe interneti, ti insertojme ne faqe te vetme.
Lexuesit ne te vërtet i duket vetëm një faqe web. Për ketë do te përdorim sintaksen FRAME.
Një Frame (Hapësire)) konsiderohet edhe vete një skedar i ndërtuar ne HTML.
Pra me Frame, mund te insertojme me shume se një faqe web, ne nje dritare te web browser-it.
browser
Çdo Frame është e pavarur nga njëra
njëra-tjetra. Framet nese kane korniza te dukshme, mund te
zmadhohen ose zvogëlohen nga vete lexuesi i faqes web.
Sintaksa
<frameset rresht/kollone>
<frame src=”skedar.html”>
<noframes>
<iframe>
Pershkrimi
Percakton nje bashkesi me Frame(kombinim hapsirash)
Percakton nje nendritare ose nje hapsire
Percakton nje hapsire ne faqe, per browserat qe nuk njohin Frame
Percakton nje nenhapsire te brendashkruar faqes web.
Kete mesim e kemi lene ne fund per vete faktin qe te kuptohet qe nje fra
frame
me perdoret vetem
atehere kur eshte mbaruar faqja web ose te pakten permbajtja e saj. Prandaj per ilustrim, krijojme
tre faqe me ngjyrat e sfondeve te ndryshme, te Kuqe, te Verdhe dhe Blu, perkatesisht vendosim
emertimet, frame_a.html, frame_b.html
b.html, frame_c.html. Krijoni dhe nje skedar index.html.
Do ta ndajme faqen web ne 3 kollona ku do te vendosen te tr
treja dritaret pra Frame--t.
Shkruajme kodin si me poshte, tek skedari index.html:
Frameset, qe perdorem te parin ishte midis ndarja 50% me 50% e hhapësirave
apësirave sipas horizontales,
pra rreshtave. Kurse frameset-in
in e dyte ishte ndarja 25% me 75% sipas vertikales, pra kollonave.
Po te shikoni me vëmendje ne browser
browser-in
in tuaj, jane ne kornizat e hapësirave jane te dukshme me
ngjyre gri. Lexuesi shume kollaj mund te ti levize sipas deshires ato korniza.
Ne te vertet lëvizja e kornizave nga lexuesi nuk eshte e këshillueshme, prandaj i bejme ato te
palëvizshme dhe te padukshme nga lexuesi. Kjo arrihet duke modifikuar sintaksen e mesiperme :
<frameset rows="50%,50%"
0%" border="0" noresize="noresize">.
Po ashtu mund te vendosni faqet te gatshme si Frame, ne vend te frame_a.html, frame_b.html,
frame_c.html, vendosni perkatesisht http://www.google.com, http://www.yahoo.com dhe
http://www.mozilla.com.. Keshtu do te perftojme:
Nga ana teknike eshte nuk jane shume te rekomandueshme përdorimi i Frame
Frame-ve
ve apo te
ngjashme, per vete faktin qe vonojne hapje te për
përmbajtjes,
mbajtjes, nuk mund te kapen nga motoret e
kërkimit dhe ju kufizon azhornimin e faqes ne te ardhmen deri ne ate pike qe do te jete
detyrueshme rindërtimi nga e para e faqes se internetit.
Ora13: Permbledhje
Linja 3: Perdorimi i CSS
Ora 1: Rendesia e CSS
Ne teknologjite moderne përdorimi i CSS, eshte shume i përhapur.
CSS eshte shkurtimi i Cascade Slyle Sheet, qe do the thote nje pjese e skedarit HTML apo nje
skedar ku mund te përcaktoni pamjen qe duhet te kete nje faqe web.
ne te shumten e rasteve do te përdorim sintaksa te CSS, brenda nje skedari html.
Rendesia e përdorimit te CSS, eshte shume e theksuar ne përdorimin e sotshem te faqeve web.
Avantazhet qe na jep përdormi i CSS-ve eshte shume i madh. E rekomandueshme eshte qe
sintaksat CSS te mbahen ne nje skedar me vehte, ne menyre qe te jeni te shpejt ne ndertimet dhe
modifikimet e faqeve web.
Perdorimi i CSS ka arritur qe dizenjuesit e faqeve web, te menjanojne tabelat e shumta,
shpejtësia e faqeve te jete me e madhe, hapësira ne host, te jete me vogel, modifikimet jane te
shpejta, ridizenjimet jane me te thjeshta, motoret e kërkimit do te drejtohen me shume drejt faqes
web qe krijohet me CSS, etj.
Pra ne thelb CSS permban te gjitha atributet ose tiparet qe duhet te kete nje faqe web, duke
filluar nga Stili i shkrimit(Fontit), pozicionimi i tekstit, ngjyrat, paraqitja, madhesia, konturet,
kufizimet, shtrirja e faqes web etj.
Vendosja e CSS qe te behet aktive per nje faqe web, aplikohet ne 3 menyra:
1.Ne rresht (In Line), ku sintaksa e CSS pozicionohet direkte ne vijen ku jepni sintaksen e
funksionit ne html.
2. E brendshme (Internal), ku sintaksa e CSS vendoset midis tageve <head> ...</head>, te nje
skedari html.
3. E jashtme(External), ku sintaksat e CSS ruhen ne nje skedar css, dhe ky skedar eshte per te
gjitha faqet e tjera web qe e shoqerojne.
Sintaksa e shkrimit te CSS, eshte mjaft e thjeshte:
Tag-u {atributi:vlera} ne te vertet duhet ti shkruajme ne Anglisht qe te njihen
selector {property:value} .
Pra tag-u eshte sintakse e HTML qe do te shprehet ne dokumentin HTML. Atributi qe do ti
përshtatet Tag-ut dhe çdo atribut do te ketë një vlere te caktuar.
Duhet te jeni shume te qarte ne lidhje sintaksa qe do te shtroni ne menyre, qe faqja te mos kete
mangësi ne paraqitje. Shtrimi i sintaksave duhet te jete ne forme te strukturuar, qe ne cdo rast si
modifikim apo azhurnim te faqes web, te jete sa me i lexueshem kodi CSS qe eshte shkruar.
Ora 2: Rregullat e përdorimit te CSS
CSS-ve.
Duhet te kihen parasysh rregullat e shtrimit, te sintaks
sintaksave
ave sic cdo gjuhe, si e folur apo dhe
programimi. Po ilustrojmë me shembuj:
1. Me e thjeshta, mënyra e te shkruarit i përshtatet si me sipër: body {color:black}.
{color:black}
2. Nese vlera ka disa fjale, duhet te shkruajmë ne thonjëza: p {font-family:"sans
family:"sans serif"}
3. Nese doni te specifikoni me shume se një atribut duhet te shkruajmë te ndare me pikëpresje
pikëpresje:
p {text-align:center;color:red} ose me per te qene me lexueshme e transformojme ne:
Një strukturim i tille është shume i domosdoshëm,
domosdoshëm jo vetëm
për leximin e thjeshte
eshte te sintaksave, por do te shikoni te
perfeksionuar idenë tuaj ne ndërtimin e faqes web.
Radhitja e atributeve behet per cdo Tag, qe juve do te
deklaroni ne dokumentin html.
4. Gruponi Tag-et
et duke i ndare me presje, nëse këto kane atribut te njëjtë, për shembull:
5. Zgjedhesi i Klasave “class”.
Nese per cdo element te gjuhet HTML, doni ti jepni stile te ndryshme, atehere do te veproni:
Ky fragment shkruhet ne skedarin “.css”.
”.
Kemi tag-un
un e paragrafit qe teksti do te pozicionohet
djathtas dhe ne qender.
Nee dokumentin e html do te shkruhet:
6. Zgjedhesi “id”, do te perdoret per te lidhur elementet e html me atributin “id” dhe me vleren
Simboli i “id”, eshte #.
Shembulli i meposhtem do te lidhi elementin “p”, qe ka nje id me vleren e “para1”
Eshte e këshillueshme qe emertimet te fillojne me shkronja dhe jo me
numra sepse web browserat si Mozilla Firefox, nuk i njohin sintaksa
sintaksat dhe
faqja do te shfaqet me mangësi ne stilim.
Keto rregulla duhet te ndiqen me rigorozitet.
Ora 3: Zbatimi i sintaksave te CSS-ve.
CSS
Ne kete tekst do te trajtojme, përdorimin e sintaksave te CSS
CSS-ve
ve brenda dokumentit html. Per
kete midis tageve <head>...</head>,
<head>...</head> do te shkruajme <style type="text/css">, Hapni nje
direktori te re, me emrin “css”.
”. Brenda kësaj direktorie krijoni nje skedar te ri Tekst te Notepad
Notepad-it.
Do ti trajtojme sipas rradhes sintaksat te ilustruar me shembuj.
- Per stilimet e fonteve do te përdorim keto sintaksa:
-
Ne sfond do te vendosim nje imazh me përmasa W=
W=300px me H=201px
px dhe do ta
emertojme “peme.png”.
”. Do ta ruajme tek direktoria “css/imazhe”. Do ti vendosim edhe
atribute per pozicionimin (Margin) ne faqen web. Shkruajme sintaksa:
Ora 4: Kombinimi i sintaksave CSS
CSS-ve.
Taget me te rendesishme jane <div
<div>
> dhe <span>, qe shume dizenjatore gabohen
per funksionimin e tyre.Nuk duhen perdorur per efekte visuale.
Tagu <div> perdoret per te ndare dokumentin html ne seksione.
Tagu <span> ka te njejten llogjike si me siper por mund te perdoret edhe ne
vazhdim
m te rreshtave, fjalive, shprehjeve etj.
Pra <div> dhe <span> nuk kane shume ndryshim, por përdorimi i tyre eshte shume
i domosdoshem. Po te rendesishme jane dhe përdorimi i kornizave, si me poshte:
Ora 5: Permbledhje.
DREAMWEAVER
Ora 1: Hyrje ne Dreamweaver.
Dreamweaver eshte programi me profesional ne lidhje me dizenjimin e faqeve web.
Ekzistojne edhe programe te tjera te ngjashme me Dreamweaver
Dreamweaver-in,
in, si MS Frontpage, Serif WebPlus etj,
por qe nuk arrijne ne statusin e Dreamweaver
eamweaver-it. Me kete program te mundësuar nga kompania Adobe,
mund te realizojme faqe web profesionale, ti mirembajme dhe ti azhornojme me kalimin e kohes.
Ky program na mundëson gjithashtu, jo vetem ndertimin e faqeve web, por edhe kalimin e te gjithe
direktorive
rektorive apo skedarëve nga kompjuteri Klient ne Server. Po ashtu edhe menaxhimin e skedarëve sipas
direktoriv. Ky program mundëson programimin jo vetem ne gjuhen html, por edhe ne shume gjuhe te
tjera si Cold Fusion, PHP, ASP, XSLT, CSS, Javascript, XML. Ne kete tekst do te trajtojme versionin me
te fundit te kompanise Adobe, Dreamweaver CS4. Eshte shume modern dhe komod ne si nga ana grafike
dhe programuese.
Logo e Dreamweaver CS4.
Pasi eshte instaluar ky program ne kompjuterin tuaj, do te shfaqet kjo ikone ne “Desktop”, te kompjuterit
tuaj. E hapim kete soft duke klikuar ne kete ikone 2 here. Dhe do te shfaqet:
Ne kete dritare, ne cepin e poshtem majtas ndodhet
opsioni “Don’t show again”. Klikojeni ne menyre
qe te mos shfaqet heren tjeter, kur ju do te hapni
programin. Po te shikoni ne karhun e majte
ndodhen dokumentet qe jane punuar kohet e fundit,
ne kompjuterin qe eshte instaluar programi. Ne
kollonen e mesit jane te rreshtuara gjuhet qe mund
te filloni te programoni. Pasi klikojme ne opsionin
qe kjo dritare te mos shfaqet me,, programi do te
shfaqet me figuren e mëposhtme.
Para se te fillojme te programojme ose te
dizenjojme me programin dreamweaver, duhet ta
konfigurojme qe te kemi lehtësi ne punim. Si cdo
program tjeter, ne pjesen e siperme
me keni menune,
qe ka te gjitha komandat qe disponon ky program.
Poshte menuse ndodhen butonat e menuve
perkatese por me ikona, per lehtësi te përdoruesit.
Pjese e rendesishme eshte pjesa e djathte e dritares,
ku ndodhen komandat per optimizmin dhe
menaxhimin
min e skedarëve skedarëve qe punohen ne
kete soft. Ne pjesen fundore ndodhen opsionet
gjenerale, per te gjithe elementet e gjuhëve qe do te
zhvillohen. Klikoni “Files”.
Ora 2: Menaxhimi i Skedareve Klient – Server.
Nje nga problemet me te medha te dizen
dizenjuesve
juesve te faqeve web, ka qene kuptimi se si
komunikojne kompjuterat me njeri tjetrin.
Pra kuptimi i parimit “Klient – Server”, duhet te jete shume i qarte.
Per kete arsye Qendra e Trajnimeve Profesionale “IRISOFT”, ka krijuar nje hapësire (Host), ne
internet
net posacerisht per te gjithe studentet qe deshirojne te praktikojne ndertimin e faqeve web.
Po japim disa te dhena ne lidhje me kete “Host”.
Emri i Domaini-t: www.domainijuaj.com
Perdoruesi ID:
perdoruesi
Fjalekalimi:
kodkalimi
Hapsira (Host): Hapsira ne MB
B
Porta Hosti-t:
21, 25, 26 etj
Keto te dhena do te përdorim per te
krijuar faqen tone online, direkte nga
programi dreamweaver.
Ne kete menyre realizojme krijimin,
modifikimin dhe azhornimin
imin e faqes
web, online.
Duhet patur parasysh qe, leximi i faqes
behet nga web browser-at
at si Mozilla,
Internet Explorer etj, dhe kalimi i
skedarëve dhe direktorive behet me ane
te protokollit FTP.
Klikojme tek “Files”” si ne figure.
figure
Do te krijojme nje direktori
ektori dhe emrin e
faqes “faqeweb2”.
Ketu do te percaktojme emrin dhe adresen se ku
do te shikohet faqja qe ne krijojme me programin
dreamweaver. Eshte e mundur qe qe kjo adrese te
shikohet nga te gjithe lexuesit apo përdoruesit e
internetit. Ate adresee lexuesit duhet ta shkruajne
ne “Address Bar” te cdo web browser
browser-i, si Internet
Explorer, Mozilla, etj.
Ora 3: Lidhja me Serverin.
Pasi klikuat tek “Next”, do te shfaqet dritarja e dyte, ku duhet te zgjidhni opsionin:
“No, I don’t fant to use a server technology
technology”, jepini perseri “Next”.
Ne dritaren e trete, jepni opsionet:
Ky opsion sherben per te punuar me skedaret ne
kompjuterin(lokal) personal dhe pas përfundimit
ti hedhim skedaret ne server online, qe te
shikohen nga lexuesi. Ky opsion eshte
esht me i mire
sepse nese ndodh dicka me serverin, keni nje
kopje ne kompjuterin personal dhe anasjellas.
Ne kete dritare japim te dhenat qe i duhen
Dreamweaver-it,
it, per tu lidhur me serverin:
1-Tipi
Tipi i lidhjes FTP, qe te trasferojme skedaret
2-Domaini: www.domainijuaj.com
3-Direktoria ku do hedhim faqen: faqeweb2
4-Emri i Perdoruesit: perdoruesi
5-Fjalekalimi: kodkalimi (Tregohet me Yje)
6-Jepim “Test Connection”
7-Lidhja duhet te jete e suksesshme.
Qe te kalojme ne dritaren passardhese duhet te
japim “Next”.
Ne dritaren pasardhese zgjidhni opsionin e meposhtem dhe jepni “Next”:
Ketu përfundon konfigurimi i
lidhjes me serverin. Kemi
krijuar nje lidhje Klient Server duke përdorur
Dreamweaver-in.
in.
Tek tabelat pasardhëse jepni vetem “Done”.
Do te shiko
shikoni
ni kete pamje kur te keni perfunduar me tabelat.
1- Emri i polderit jeni pozicionuar
2- Lidhja me serverin qe te hidhni skedaret
3- Rrenja (root) ku do te ruhen te gjithe skedaret.
4- Opsionet e pamjeve, Local view qe te shikoni skedaret
ne kompjuterin tuaj. Dhe Remot
Remotee view per te pare skedaret qe
keni ne server aktualisht.
Ketu mbaron procesi i lidhjes dhe menaxhimit te skedarëve ne
kompjuterin tuaj dhe ne server. Gjithcka mbas këtij procesi do te
jete vetem ndertim faqe web.
Ora 4: Krijimi i faqeve web me Dreamweave
Dreamweaver.
Klikojme tek programi dreamweaver, tek menuja ““File”, me pas tek “New...”.. Zgjidhni opsionin
e pare “HTML”, qe te krijojme skedare ne html.
html.Jepni
Jepni Save as tek direktoria faqeweb2/index.html.
Kjo eshte dritarja
ritarja qe shfaqet nga
versioni CS4 i Dreamweaverit.
Dreamweaveri
Para se te filloje faqa, duhet te
dihen pjeset perberese qe na
ndihmojne ne krijimin e faqes.
1_Shiriti i Menuve
2_Ikonat ndihmese
3_Butoni “Split” na ndihmon per
te pare 2 pamje Burim dhe
Dizenjim.
4_Titulli qe do te kete faqja web.
5_Burimi (Source) i faqes web
6_Fusha (Body) ku dizenjohet
7_Ketu jane atributet e elementeve
Duhet patur parasysh qe fusha e
dizenjimit ka te beje vetem me ate
qe lexuesi do te shikoje.
Pra eshte vetem pjese midis tag-ve
tag
<body>...</body>. Logjika per ndertimin e faqeve web eshte njësoj si tek kapitujt e mesiperm, pra kemi
3 pjese perberese, Baner ku përfshihet logo dhe slogani, shiriti i butonave standart dhe permbajtja.
Ne fillim insertojme nje tabele, me përmasa W=800px,
00px, me 3
rreshta dhe 1 kollone. Tek ikonat ndihmese klikojme tek ikona
Table.. Japim numrin e rreshtave dhe te kollonave, po ashtu dhe
permasen e gjeresise 800px.
00px. Japim Ok. Ne fushen e dizenjimit do
te shfaqet tabela sipas kërkesave tona dhe eshte e selektuar.
Ne kete moment tek pjesa e atributeve, zgjedhi
zgjedhim
opsionin Align=Center,, ne menyre qe te
rreshtohet ne mes te faqes.
Po keshtu duhet te shikoni qe eshte dhe komanda
border qe ka vleren 0.
Tregon qe korniza e tabeles eshte e padukshme per lexuesin.
Nga kapitujt e kaluar krijojme nje imazh me përmasa W=8
W=800px
00px me H=138px dhe do ta quajme baner.jpg.
Krijojme po ashtu edhe nje imazh per sfondin e faqes web me përmasa 18x23px, me emertimin
sfondi.jpg .
Te gjitha keto imazhe do ti hedhim ne
direktorine “faqeweb2”,, ne nje folder
“imazhe”.
”. Klikojme brenda qeliz
qelizes se pare
dhe shikoni qe rreh kursori. Klikoni tek
menuja Insert, Image.
Zgjidhni tek direktoria “imazhe
imazhe”, skedarin
“baner.jpg” dhe jepni OK.
Ora 5: Krijimi i Efekteve me linke.
Krijojme 4 butona qe do ti kemi si imazhe me përmasa 200x81px, me emrat iindex.jpg,
galeria.jpg ,rreth_nesh.jpg, kontakt.jpg. Per te krijuar nje efekt “Rollover”, tek butonat e menuse, duhen
perseri 4 imazhe te tjera te ngjashme me butonat 200x81px, por vetem te keni ndyshuar ngjyren e tyre.
Emertimet e ketyre kater imazheve qe do te perdoren per kete efekt jane index1.jpg, galeria1.jpg,
rreth_nesh.jpg, kontakt1.jpg.
Te gjitha keto imazhe do ti hedhim ne
direktorine “faqeweb2”,, ne nje folder
“imazhe”. Klikojme brenda qelizes se
dyte dhe shikoni qe rreh kursori. Klikoni
tek menuja Insert, Image Objects,
Rollover Image.
Ne menyree qe te dali tabela per imazhet:
Ky proces duhet te ndiqet me rigorozitet
per te 3 butonat e tjere.
Pra kemi dhene linket ketyre 4 butonave perkatesisht index.html, rreth_nesh.html, galeria.html
dhe kontakt.html.
t.html. I japim faqes sfondin qe kemi krijuar me emrin imazhe/sfondi.jpg
imazhe/sfondi.jpg. Ne fund te
dritares, ndodhet butoni “Page
Page properties
properties”
.
Tek dritarja zgjidhni imazhin
me ermin “sfondi.jpg
sfondi.jpg” dhe
jepni Ok.
Pamja qe kemi krijuar deri tani eshte:
Tek menuja “File” japim “Save”.
”. Ne menyre qe te ruajme se cfare kemi ndertuar deri tani.
Qe te shikojme ne internet Explorer se cfare kemi ndertuar japim nga tastiera tasten F12.
Te gjitha faqet kane te perbashket banerin dhe butonat qe kemi ndertuar, ajo qe ndryshon eeshte
vetem pjesa e trete, përmbajtja. Qe te krijojme faqet pasaerdhese, duhet te japim komanden
“Save as...”,
”, me emer te ndryshem sipas butonave qe kemi ndertuar. Pra File, Save as...,
as
rreth_nesh.html,, OK. E njëjta rruge per galerine dhe kontaktin. File, Save as..., galeria.html,
galeria
OK. File, Save as..., kontakt.html,, OK.
Shikoni perseri ne internet Explorer, qe butonat funksion
funksionojne,
e, sipas klikimeve qe keni vendosur.
Kjo qe kemi krijuar deri tani quhet ““navagation bar”.
”. Pra butonat e menuse se faqes kryesore.
kryesore
Duhet kuptuar koncepti, qe bejme vetem kopjim te faqes kryesore index.html, por me emra te
ndryshem sipas deshires.
Ora 6: Insertimi i Teksteve dhe linkeve.
linkeve
Rreshtin e trete te tabeles qe kemi te instertuar, e kemi lene posacerisht per te hedhur përmb
përmbajtjen
per secilen faqe. Ne përmbajtjen e ““index.html”,
”, do te hedhim nje animacion flash dhe tekst per
përshkrimin e shkolles Qemal Stafa.
Dreamweaveri e ka shume te thjeshte logjiken e insertimit te teksteve. Njesoj ne përdorimin e
programit MS Word, duhett te pozicionojme kursorin ne rreshtin qe deshirojme te shkruajme.
Para se te fillojme te shkruajme, duhet te krijojme nje
ndarje te rreshtit te trete te tabeles ne 2 kollona. Klikojme
ne rreshtin trete me te djathten e mousit, shkojme tek
“Table”, pastaj tek “Split cell...”. Jepni 2 dhe OK.
Kjo per arsye qe te ndajme përmbajtjen ne 2 kolona.
Ne njeren kolone do te vendosim tekstin dhe tjetren
animacion flash.
Ne kolonen e majte fillojme te shkruajme tekst per shkollen Qemal Stafa. Kur shkruajme ne
Dreamweaver,
weaver, kalimi ne rresht te ri me tasten ““Enter”, ka hapsiren “Normal”, per te krijuar
hapësire me te vogel pra pa hapësire, duhet te shtypim ““Alt + Enter”” per te kaluar ne rresht te ri.
Per te insertuar linket, duhet te kemi parasysh logjiken qe kemi përd
përdorur
orur ne shpjegimin e linkeve
tek HTML.
Duhet te keni parasysh qe veprimet
per te dhene linket duhet te jene
sipas rradhes:
1_Selektohet teksti qe do ti jepet
linku.
2. Tek paneli i atributeve ne fund te
dritares se dreamweaverit, tek
opsioni link shkruani linkun “kontakt.html
kontakt.html” dhe tek opsioni “Target” duhet te selektoni “_self”.
“
Ky tip linku
ku qe krijuam eshte i brendshem, qe do te thote ky link eshte relativ. Per baze si pike
referimi merret index.html.
Nese do te jepnim link absolut te jashtem duhet te nd
ndiqnim keto hapa:
1. Selektoheshe teksti qe do ti jepnim linkun
2. Tek opsioni “Link”,
”, do te shkruajme http://www.google.com
3. Tek opsioni Target perseri do te selektonim ““_self”.
Nese do te jepnim nje link, per adrese email, ku lexuesi te na kontaktoje vetem duke klikuar ne
linkun tone, atehere do te ndiqnim kete procedure:
1. Selektoheshe teksti qe do ti jepnim linkun
2. Tek opsioni “Link”,
”, do te shkruajme “MAILTO:info@qemalstafa.com”
3. Tek opsioni Target perseri do te selektonim ““_self”.
Ora 7: Krijimi i Templateve.
Template nuk eshte gje tjeter vetem se nje faqe e gatshme shabllon, per te krijuar faqe te tjera te
ngjashme qe mund te kene ndryshime te pakta ne përmbajtje. Hapim faqen index.html
index.html, me
Dreamweaver dhe shkojme tek File
ile, Save as Template.
Shkruajme ne emrin qe duan te ruajme kete
template. Japim “Save”,, kur te dale nje tabele
per azhornomim e linkeve duhet te jepni
“Yes”. Ky opsion sherben per te krijuar zona
qe na duhet ti ndryshojme dhe te mbajme
pjesen tjeter te pa ndryshuar.
Qe te bejme nje zone te editueshme, ne fillim
e selektojme ate pjese dhe klikojme tek ikonat
ndihmese opsionin “Templates”.
Zgjedhim opsionin, “Editable Region”.
Dhe na del tabela, ku mund te vendosim emrin e
zones qe deshirojme te modifikojme
ikojme dhe japim OK.
Nese krijojme nje faqe te re, me menune File, Page from Template, Emrin e Templatit.
Templatit
Do te hapet faqja qe ruajtem si template dhe mund te modifikohet vetem pjesa qe selektuam.
Kur e ruajme ate skedar duhet ta ruajme me emer tjeter nnga temlpate qe kemi.
Krijimi i templateve eshte i
domosdoshem, sidomos ne
rastet kur dizenjimi i faqes
nuk ndryshon . Jepini
“Create” dhe ne
dreamweaver do te shfaqet
faqja qe kishit dhe po ashtu
menaxhimi eshte i
konfiguruar sipas vlerave qe
juve dhate ne dokumentin
origjinal nga i cili u krijua
ky template.
Ora 8: Krijimi i Shtresave dhe Frame-ve.
Frame
Hapim index.html me Dreamweaver dhe shpesh pozicionimi i elementeve ne faqen e
dreamweaverit kërkon saktësi qe ne fillimin e ndertimit te faqes. Per kete na vijne ne ndihme
shtresat (Layer). Ne versionet e reja sic eshte CS4, eshte shndërruar termi “Layer” me “AP Div”.
Ne te vertet ka te njejtin funksion. Ky funksion ben te mundur qe te insertojme nje grup me
tekste, imazhe grafike apo multimedia dhe ti pozic
pozicionojme sipas preferencave ne faqen web.
Do te insertojme nje foto, ne faqen web duke përdorur ““AP Div”.
”. Shkojme tek menuja Insert,
Layout Objects, AP Div. Shfaqet nje kornize blu ne faqen web. Klikojme brenda asaj kornize
dhe shtojme nje imazh, me komande
komanden image tek ikonat ndihmese. Dhe marrim pamjem:
Brenda nje shtrese mund te insertohet edhe nje multimedia flash apo video.
Hapim nje dokument te ri, ne nje polder te ri dhe te shikojme se si mund te krijojme Frame.
Do te praktikojme te realizojme frame ddhe butona navigimi.
Tek dokumenti i ri shkruajme tre fjale Google, Yahoo dhe Hotmail. Kur te klikojme tek secili
nga linket te hapet ne frame me vehte. Para se tu japim linke ketyre tre fjaleve, duhet te
insertojme nje frame. Shkojme tek menuja Insert, HTML, Frames, Bottom.
Pasi u krijua nje frame ne pjesen e poshtme, japim linket sipas radhes, tre fjaleve qe krijuam.
Google-it
it i japim linkun perkates dhe tek opsioni ““Target”,
”, duhet te zgjidhni frame qe do hapet.
Duke krijuar frame mund tee kombinojme nje pafundesi faqesh web. Gjithmone duhet te keni
parasysh qe te funksionojne sa me mire frame duhet ti keni te ndertuara me përpara dokumentet
ne html.
Ora 9: Navigation Menu dhe Krijimi i Klasave.
Eshte e nevojshme qe ndonjehere te krijoj
krijojme
me edhe menu te cilat kane shume nënkategori apo
nenmenu qe duhet te rradhiten ne shiritin e menuve kryesore.
Per te ilustruar kete shembull, hapim index.html, te shkolles Qemal Stafa, qe krijuam me efektin
Rollover. Fshijini ato butona te krijuara me kete efekte. Do te krijojme “navigation
navigation menu”,
menu me
Dreamweaver CS4. Poziciononi mousin tek rreshti i butonave ku do te insertojme, “navigation
menu”. Klikoni menune Insert,, Spry, Spry Menu Bar
Bar.. Automatikisht do te krijohet nje menu
me shume nenmenu te tjera. Ajo
jo qe ngelet eshte te jepni emrat e butonave te menuve dhe linket e
tyre.
Modifikimi i kësaj menuje
eshte shume i thjeshte dhe
i lehte ne përdorim. Kjo
menu ka krijuar
automatikisht 2 skedare
per te cilet ka nevoje qe te
aktivizohet kur lexuesi
shikon ketee faqe interneti
qe ka kete tip menuje.
Keta dy skedare jane sprymenubar.js (Javascript) dhe sprymenubarhorizontal.css eshte klasa qe
krijohet posacerisht per kete tip menuje. Me kete klase na jepet mundesia e krijimit, modifikimit
apo azhornimit te metejshem
hem te menuse qe kemi krijuar.Ne shembulli jepet si ndryshohet ngjyra.
Shvillimi i metejshem i klasave ne dreamweaver, kërkon njohuri te mira ne gjuhen CSS. Ky soft
na jep mundesine e ndërthurjes se klasave qe krijohen ne css me elementet qe përdorim per te
ndertuar faqen web.
Eshte e rendesishme te dihet qe ne
teknologjine e sotshme, klasat po behen te
përdorshme ne mase, per efektet qe ato
krijojne ne shume pak kohe dhe pa shume
mundim per përdoruesit jo programator.
Te shikojme se si do te duket ne internet
i
Explorer ky modul qe sapo krijuam.
Shtypim F12 per te pare ne “preview” ne
Internet Explorer.
Navigation menu me ndihmen e klasave
arrihet te ndryshohet ne kohe shume te
shkrurter dhe te marrim rezultat ne krijimin
e faqes tone.
Ora 10: Insertimi
timi i Skedarëve Multimedial Flash .
Per te insertuar skedaret flash ne dreamweaver na duhet krijimi i nje dokumenti te tille.
Ndertimi i dokumentave flash te animuara nuk krijohen me programin dreamweaver, por me
programin Adobe Flash CS4. Skedaret multi
multimedial
medial me Dreamweaver, thjesht montohen ne faqen
qe po ndertohet. Si skedare audio apo edhe video. Marrim nje skedar flash, ne formatin swf, me
përmasa w=400px me H=308px. E kopjojme ne nje direktori te re me emrin ““flash”
flash”.
E insertojme ne faqen web kete skedar duke
shkuar tek menuja Insert, Media, SWF.
SWF
Selektojme skedarin qe e kemi te ruajtur tek
direktoria “flash”. Japim Ok dhe do te shikoni
qe ky skedar do te pozicionohet pikërisht atje
ku ne kemi pozicionuar kursorin e mousit.
Eshte e rendesishme te kuptohet
ptohet qe ne
montimin e dokumentave flash, skedaret e tjere jo flash, jane gjithmonë mbrapa skedarit flash.
Pra kur lexuesi shikon mbivendosjen e nje skedari flash me nje imazh, shfaqet vetem skedari
flash perballe me lexuesin, kurse fotoja humbet dhe qend
qendron
ron mbrapa skedarin flash.
Prandaj rekomandohet qe përdoruesit e programave flash, te bejne sfondin transparent gjate
eksportimit te animacioneve qe ata krijojne. Keshtu do te shikohet se cfare ka mbsa dokumentit
flash.
Me butonat “Play” dhe “Stop”
eshte e mundur qe te shikohet
animacioni brenda programit te
dreamweaverit. Nese duam te
editojme kete skedar nuk eshte e
mundur brenda fushes se
dreamweaverit edhe pse eshte
komanda “Edit”,
”, e Adobe
Flashit. Kjo per arsye se, Adobe
flash nuk editon dot skedaret e
kompresuar ne formatin swf, por
modifikon vetem skedaret ““fla”.
Pra me komanden “Edit”, na hapet nje dritare ku na kërkon te gjejme skedarin burim qe ka
krijuar skedarin swf. Shikojme se si do te duket faqja web ne Internet Explorer.
Ne shumicen e rasteve
ve nuk eshte e
këshillueshme përdorimi i aplikacioneve
ne formation SWF. Ka disa arsye:
1_Ndikojne ne shpejtesine e hapjese se
faqe web.
2_Internet Explorer apo browsera te
tjere kerkojne instalimin e Adobe Flash
Player, pra modul plus .
3_Kane kosto per tu
u ndertuar dhe
kerkojne kohe per tu realizuar.
4_Ndikojne ne shumicen e rasteve ne
moskombinimin e elementeve te tjere
grafike si foto, teksteve, etj. Por keto
aplikacione jane shume terheqese nga ana grafike po ashtu nga ana funksionale.
Ora 11: Permbledhje .