Biznesi dhe Interneti dhe interneti 05.pdfModeli kuti (box) i CSS-së •Çdo element HTML, çoftë...

Biznesi dhe Interneti

Pjesa 5

Prof. Ass. Dr. Ermir Rogova

Objektivat

•Modeli kuti i CSS

• Faqim i thjeshtë CSS me elementepluskuese “floating”

• Resetimi CSS

• Stilizimi i websajtit Nature’s Source me CSS

• Një njoftim i shkurtër me dizajnin e reagueshëm (responsive)

2

Modeli kuti (box) i CSS-së

• Çdo element HTML, çoftë bllok ose inline, i cili paraqitet në web faqe, trajtoet si një “kuti”.

• Kjo kuti ka një fushë për pëmbajtje në qendër të sa, dhe mundet, të ketë një apo më shumë nga këto:

• padding - që rrethon përmbajtjen

• border - që rrethon padding

• margin - që rrethon border

• Bile edhe elementet e zbrazta në HTML mund të kenë strukturë të këtillë.

• Shembull: elementi img.

• Padding, border dhe/ose margin mund të paraqitet në të gjitha anët, në disa nga anët apo në asnjërën anë të përmbajtjes.

• Sllajdi në vijim na jep një shembull të detalizuar të modelit kuti dhe duhet të studiohet me kujdes. Por... Kërkoni në internet frazën “CSS box model images” dhe studioni edhe disa nga shembujt që paraqiten aty, derisa të jeni komod me këtë koncept.

3

Diagrami i modelit kuti në CSS

Figure 4.11 graphics/ch04/BoxModel.jpg.4

Tri kuti njëra brenda tjetrës boxmodel.html

Figure 4.12 graphics/ch04/displayBoxmodelHtml.jpg.5

Tri kuti njëra brenda tjetrës boxmodel.html

<!DOCTYPE html>



<html lang="en">

<head>

<meta charset="utf-8">

<title>CSS Box Model</title>

<link rel="stylesheet" href="css/boxmodel.css">

</head>

<body>

<div id='outerBox'>

<div id='middleBox'>

<div id='innerBox'>

This figure illustrates the CSS "box model". You are looking at

three nested boxes: an outer box, a middle box, and an inner box.

All boxes ...

</div>

</div>

</div>

</body>

</html>

6

Tri kuti brenda njëra-tjetrës boxmodel.css

/* boxmodel.css for boxmodel.html */

body {

padding: 0;

margin: 0;

}

div#outerBox {

border: 10px solid black; /* Shorthand for styling a border */

background-color: yellow;

}

div#middleBox {

padding: 20px;

border: 20px dashed silver;

margin: 20px;

background-color: maroon;

}

div#innerBox { background-color: #fff; }

7

Sitilimi për Padding dhe Margin

• Për padding

• Shembull 1: Specifikimi i të njëjtës sasi për të gjitha anëtpadding: 10px;

• Shembull 2: Specifikimi eksplilcit për të gjitha anët (rënditja është lart, djathtas, poshtë, majtas)padding: 10px 20px 30px 40px;

• Shembull 3: Specifikimi lartë/poshtë dhe majtas/djathtaspadding: 10px 20px;

• Për margin, shembujt janë analog me këta dhe aplikohen në të njëjtën mënyrë.

8

Stilizimi për Border dhe Font

• Për border

• Shembull (sintaksa)border: gjërësia stili ngjyra;

• Shembull (specifik)border: 1px solid black;

• Për font

• Shembull (sintaksa)font: stili pesha madhësia familja;

• Shembull (specifik)font: italic bold 16px Arial, sans-serif;

9

Elementet e reja semantike në HTML5

• Përdorimi i tabelave për strukturimin e faqes nuk është praktikë e mirë.

• Preferohet përdorimi i elementeve të rinjë semantic të HTML5.

• P.sh.: main, header, footer, nav , article, section, aside etj…

• Pastaj bëhet pozicionimi i këtyre elementeve si duhet në web faqe duke përdorur CSS.

• Dy gjëra që duhen mbajtur mend gjatë strukturimit të faqes janë:

• Rënditja (nga lartë – poshtë, nga majtas - djathtas) në të cilën duhet të paraqiten elementet e ndryshme, dhe

• A ka elemente të cilat duhet të vendosen Brenda elementeve të tjera (nesting).

• Secili element duhet të ketë një tipar id për ta identifikuar dhe stilizuar atë në fletën stilizuese dhe/ose një tipar class nëse duam ta stilizojnë përmes klasave.

10

Elementi div ende i dobishëm

• Elementet e reja semantike në HTML5 duhet të përdoren për të përmbajtur ato pjesë të web faqes që kanë kuptim semantic, p.sh. header, pjesa kryesore e faqes dhe footer.

• Por... ndonjëherë, një pjesë e faqes duhet të konsiderohet si grup, por për këtë nuk ka ndonjë element semantic që mund të aplikohet direkt.

• Aty, për grupim përdoret elementi div.

• Këtij elementi div i japim një id dhe/ose class sipas nevojës.

11

Pozicionimi në CSS me float dhe clear

• Pasi që elementet e resa semantike të HTML5 dhe elementet div janë elemente bllok, automatikisht ato renditen vertikalisht njëra pas tjetrës.

• Me përdorimin e float: left në secilin nga elementet, shkakton atë të pluskojë lartë dhe majtas, dhe elementet e tjera ta rrethojnë atë nga ana e majtë, nëse ka hapsire.

• Elementeve të këtilla “pluskuese” duhet të ju specifikojmë gjërësinë.

• Secili element që përmban ato, duhet të jetë mjaftueshëm i gjërë për të pëmbajtur të gjitha elementet pluskuese që duhet të paraqiten krah për krahu brenda tij.

• Elementet poashtu mund ti pluskojmë në anën e djathtë në mënyrë të njëjtë.

• Secili element i stiluar me rregullën clear: left nuk do të pluskojë lartë dhe majtas edhe nëse ka hapsirë (njëjtë vlen edhe për clear: right ). Poashtu egziston rregulla clear: both.

12

Shembull i thjesht i pluskimit float.html

Figure 4.15 graphics/ch04/displayFloatHtml.jpg.13

<!DOCTYPE html>



<html lang="en">

<head>


<title>CSS Float Example</title>

<link rel="stylesheet" href="css/float.css">

</head>

<body>

<div id="page">

<div id="header">

Your company name and/or logo could go into this header div.

</div>

<div id="menu">

Your menu could go here in this div element, which has been

"floated" left.

</div>

<div id="content">

This could be your main content area div, which has also been

"floated" left.

</div>

<div id="footer">

Your company copyright information could go into this "footer" div,

which has been "cleared" to make sure that it does not try to

"float" upward and sit alongside the two preceding elements.

</div>

</div>

</body>

</html>

14

/* float.css for float.html */

body { font-size: 1.5em; }

div#page {

width: 650px;

background-color: silver;

}

div#header {

width: 100%;

background-color: aqua;

}

div#menu {

float: left;

width: 35%;

background-color: lime;

}

div#content {

float: left;

width: 65%;

}

div#footer {

clear: left;

width: 100%;

background-color: yellow;

}

15

Shembull i thjesht i pluskimitfloatHTML5.html

Figure 4.18 graphics/ch04/displayFloatHTML5Html.jpg.16

<!DOCTYPE html>



<html lang="en">

<head>


<title>CSS Float Example Using HTML 5 Elements</title>

<link rel="stylesheet" href="css/floatHTML5.css">

</head>

<body>

<main>

<header>

Your company name and/or logo could go into this header element.

</header>

<nav>

Your menu could go here in this nav element, which has been

"floated" left.

</nav>

<article>

This article element, which has also been "floated" left, could

hold your content.

</article>

<footer>

Your company copyright information could go into this footer

element, which has been "cleared" to make sure that it does

not try to "float" upward and sit alongside the two preceding

elements.

</footer>

</main>

</body>

</html>

17

/* floatHTML5.css for floatHTML5.html */

body { font-size: 1.5em; }

main {

width: 650px;

background-color: silver;}

header {

width: 100%;

background-color: aqua;}

nav {

float: left;

width: 35%;

background-color: lime;}

article {

float: left;

width: 65%;}

footer {

clear: left;

width: 100%;

background-color: yellow;}

18

Tipare të tjera pozicionuese

• Janë edhe disa tipare të tjera që përdoren për pozicionim të elementeve që janë shumë të dobishme.

• Vlerat e tiparit position:

• position: static (kjo është e parazgjedhur)

• position: fixed (në relacion me dritaren e shfletuesit)

• position: absolute (pozicionim absolut në relacion me elementin prind)

• position: relative (relativ me pozitën ku nomalisht do të gjendej)

• Poashtu, tipari z-index mund të përdoret për të krijuar një efekt 3D të shtresuar.

• Vizitoni sajtin w3schools.com për shembuj të mire.

19

CSS Reset (1)

• Në mungesë të udhëzimeve, shfletuesit do të përdorin vlerat e tyre të parazgjedhura për paraqitjen e elementeve nbë web faqe.

• Mënyra e vendosjes dhe paraqitjes së elementeve përmes CSS-it mund të kontrollohet.

• Problemi: Jo të gjithë shfletuesit përdorin të njëjtat vlera të parazgjedhura, pra nuk mund të jemi të sigurt që gjërat të cilat nuk i kemi stilizuar në mënyrë explicite do të paraqiten njëjtë në të gjithë shfletuesit.

• Zgjidhja: Në fillim të fletës stilizuese, resetojmë “gjithqka” në një nivel bazë (p.sh. padding dhe margin në zero), dhe pastaj caktojmë të gjitha vlerat sipas preferencave tona.

• Shembull: * { padding: 0; margin: 0; }

• Vini re që * është selektori univerzal. Dmth. ai “selekton gjithqka”, nëse implementohet si duhet në shfletues.

• Kjo teknikë është pak ekstreme, por është baza e asaj që quhet CSS Reset, dhe përdoret prej shumë zhvilluesëve. 20

CSS Reset (2)

• Jo të gjithë zhvilluesit pajtohen saktësisht për mënyrën se si duhet të bëhet CSS Reset.

• Eric Meyer është një web-zhvillues i njohur dhe me autoritet dhe mendimet e tij për këtë çështje mund ti gjeni në këtë adresë: http://meyerweb.com/eric/tools/css/reset/

• Kërkoni në Google frazën “CSS reset” dhe mund të gjeni linqe për mendime të tjera për këtë çështje.

21

nature1/index.html

Figure 4.21 graphics/ch04/nature1/displayIndexHtml.jpg.22

<!DOCTYPE html>



<html lang="en">

<head>


<title>Nature's Source - Canada's largest specialty vitamin store</title>

<link rel="stylesheet" href="css/default.css">

</head>

<body>

<header>

<div id="logo">

<img src="images/naturelogo.gif" alt="Nature's Source Logo"

width="608" height="90">

</div>

<div id="address">

5029 Hurontario Street Unit 2<br>

Mississauga, ON L4Z 3X7<br>

Tel: 905.502.6789<br>

Fax: 905.890.8305

</div>

</header>

nature1/index.html (1)

23

<main>

<article>

<div id="text">

<h4>Welcome to Nature's Source - Protecting your health

naturally!</h4>

<p>Founded in 1998, Nature's Source was created ...</p>

</div>

<div id="image">

<img src="images/outdoor4.jpg" alt="Eternal peace"

width="256" height="256">

</div>

</article>

</main>

</body>

</html>

nature1/index.html (2)

24

nature1/css/default.css (1)

/* default.css for ch04/nature1/index.html */

* {

padding: 0;

margin: 0;}

/* The following line may be redundant, but does no harm. */

main, header, article {display: block;}

body {

width: 900px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 1em;}

main, header {

margin: 10px;

width: 880px;}

div#logo {

float: left;

margin: 10px 0;

}

25

nature1/css/default.css (2)

div#address {

float: right;

margin-top: 20px;

text-align: right;

}

div#text {

float: left;

width: 570px;

margin-top: 20px;

}

div#text p {

margin: 1em .2em .7em 0;

}

div#image {

float: left;

width: 310px;

margin-top: 20px;

text-align: right;

}26

Sllajdet në vijim• Fillimisht paraqitet faqja e parë (home) e secilës nga tri versionet e

mbetura të web-sajtit Nature’s Sourcenature2/index.html, nature3/index.html and

nature4/index.html

• Në faqet e para nature2 and nature3, vërehet një ri-dizajnim i vogël në nature3, që është një dukje e përmirësuar, e arritur me pak CSS3.

• Paraqiten edhe disa faqe të websajtit nature3, të cilat mund të krahasohen me faqet korresponduese nga nature2.

• Vëreni që sajti nature4 është plotësisht i njëjtë me nature3, përveq që imazhin në faqen kryesore e ka zëvendësuar një video.

• Në fund versionet e sajtit nature3 dhe nature4 ilustrojnë një dizajn të thjeshtë të reagueshëm “responsive design”, pra paraqitet faqja e parë e nature3 në “tablet view” dhe diskutojmë si është arritur kjo.

27

nature2/index.html

(vëreni menyja dhe footer e stilizuar me CSS)


nature3/index.html

(vëreni menynë dhe footerin e ri-dizajnuar dhekufizimin e zi në “desktop view”)

Figure 4.29 graphics/ch04/nature3/desktopIndexHtml.jpg.29

nature3/pages/estore.html

(faqe në “desktop view” pa linqe nën-meny)

Figure 4.30 graphics/ch04/nature3/desktopEstoreHtml.jpg.30

nature3/pages/products.html

(faqe në “desktop view” me disa linqe nën-meny)

Figure 4.31 graphics/ch04/nature3/desktopProductsHtml.jpg.31

nature3/index.html

(në “tablet view”)

Figure 4.32 graphics/ch04/nature3/tabletIndexHtml.jpg.32

nature3/pages/estore.html

(faqe në “tablet view” pa linqe nën-meny

Figure 4.33 graphics/ch04/nature3/tabletEstoreHtml.jpg.33

nature3/pages/products.html

(faqe në “tablet view” me disa linqe nën-meny)

Figure 4.34 graphics/ch04/nature3/tabletProductsHtml.jpg.34

Dizajni i reagueshëm (responsive)

• Web faqet i dizajnojmë ashtu që të mud të shihen nëshumë paisje (desktop PC, tablet, smart phones, …)

• Kjo ide ilustrohet duke kaluar ndërmjet “desktop view” dhe “tablet view”.

• Për ta bërë këtë përdorim vetëm CSS.

• Përdorim dy fajlla stilizues—desktop.css dhetablet.css—dhe përdorim media query për tëvendosur se cila prej tyre do të jetë në efekt.

35

Media Queriesch04/nature3/document_head.html

<!DOCTYPE html>



<html lang="en">

<head>


<meta name="viewport" content="width=device-width">

<base href="http://cs.smu.ca/webbook2e/ch04/nature3/">

<link rel="stylesheet" href="css/desktop.css">

<link rel="stylesheet" href="css/tablet.css"

media="screen and (max-width: 900px)">

<title>Nature's Source - Canada's largest specialty vitamin store</title>

</head>

• Vëreni elementin e ri meta, i cili faktikisht thotë: “përdore gjërësinë e paisjes kur vjen te kjo faqe”. Kjo dmth që “tablet view” do të përdoret menjëherë nëse arrini te kjo faqe me tablet.

• Vëreni atributin media te elementi link i cili i referencohet tablet.css. Kjo dmth: “Përdor tablet.css kur gjërësia ësht nën 900px.”

36

nature4/index.html(njëjtë sikur nature3/index.html përveq që video zëvendëson imazhin)


Pyetje ???

38

Biznesi dhe Interneti dhe interneti 05.pdfModeli kuti (box) i CSS-së •Çdo element HTML, çoftë...

Documents

Transcript of Biznesi dhe Interneti dhe interneti 05.pdfModeli kuti (box) i CSS-së •Çdo element HTML, çoftë...