Web дизајн (it), део 3, школска 2010 11, триместар 3

Web Дизајн (Internet)

студијски програм Интернет

Технологије

Никола Рељин – Интернет, Висока ICT Школа

HTML

Нешто конкретно

Никола Рељин – Интернет, Висока ИКТ Школа, 2008-2009.

Пројекат-Практични пример

●Желимо да креирамо сајт на коме ћемо

презентовати наша омиљена јела и

пића

●Желимо да све буде лепо

представљено, и да се лепо приказују

сва слова..

●Желимо разне боје, слике, фонт, ....

Идеја

●Прво се осмисли садржај генерално, и

шта ће бити на сајту..

●Затим се одређује циљна публика

(морамо да водимо рачуна о начину

представљања)

●Затим одређујемо категорију сајта (блог,

дискусије, или каталози..)

●Затим се усресредимо на технологије

Наш сајт

●Наш сајт ће бити у виду личног

представљања нама омиљених ствари,

статички, са контакт страном и

могућности коментарисања

●Почињемо са главном страном на којој

ће бити сви линкови

Главна страна

●Опис, линкови, слика (па ћемо полако

повећавати..)

●Страна се стави у UTF-8, а користићемо

XHTML 1.0 Transitional тип..

Конкретно

●<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DT

D/xhtml1-transitional.dtd">

●<html

xmlns="http://www.w3.org/1999/xh

tml">

●<head>

●<meta http-equiv="Content-Type"

content="text/html; charset=utf-

8" />

●<title>Моје омиљене..</title>

●</head>

●<body>

●</body>

●</html>

●Морамо дефинисати

тип стране (XHTML)

●приказ текста да

буде UTF-8

●Празан садржај..

Садржај..

●Добродошли на

страницу

●о мени омиљеним

●пићима и јелима

●... Ајд мало да то

“зачинимо”...

●Мењамо фонт, боју

променимо,

размакнемо лево и

десно, а ставимо

слике код јела и

пића..

Уређивање позадине и

маргина..●<body>

●<p>Добродошли на

страницу </p>

●<p>о мени

омиљеним </p>

●<p>пићима и јелима

</p>

●</body>

Уређивање позадине и

маргина..●<body> је исти, али

мењамо <head>:●<style type="text/css">

●

●</style>

Објашњење..●<style type="text/css">

● </style>

●Дефинишемо стил типа

CSS

●Коментар за старе

browser-е

●Body ће имати приказ

са фонтом Arial или

Helvetica или sans-serif

●Боја ће бити црна

(текст)

●Позадина ће бити бела

●Без маргина

Сређивање текста

●Мало уредимо

изглед, да буде

“необичнији”, јер сад

имамо само текст

<h1 align="center">Добродошли </h1>

<h1 align="left">на страницу </h1>

<h1 align="right">о мени омиљеним </h1>

<h1 align="center">пићима и јелима </h1>


●Додајемо распевани

изглед...


<h1 align="left">на страницу </h1>

<h1 align="right">о мени омиљеним </h1>

<h1 align="center"><img src="drunk.gif" alt="пићаааа"

width="58" height="30" />пићима и <img

src="essen.gif" alt="клопа!!" width="31" height="26"

/>јелима </h1>


●Мењамо боју

текста..


<h1 align="left" style="color:#999999">на страницу </h1>

<h1 align="right" style="color:#999999">о мени омиљеним

</h1>

<h1 align="center"><img src="drunk.gif" alt="пићаааа"

width="58" height="30" />пићима <span

style="color:#999999">и</span> <img src="essen.gif"

alt="клопа!!" width="31" height="26" />јелима </h1>

Сајт је глуп без линкова..

●Креирамо посебне

стране са пићима, и

са јелима..

●Креирамо 2 стране,

које ће имати исте

садржаје у <head>-у

●<h1 align="center"><img

src="slike/drunk.gif"

alt="пићаааа" width="58"

height="30" />пићима

<span

style="color:#999999">и<

/span> <a

href="jela.html"><img

src="essen.gif"

alt="клопа!!" width="31"

height="26" />јелима</a>

</h1>

Страна са линковима

●Мало нам се не

свиђа овакав линк...

Изменићемо!

<h1 align="center"><img src="slike/drunk.gif" alt="пићаааа"

width="58" height="30" />пићима <span

style="color:#999999">и</span> <a href="jela.html"><img

src="slike/essen.gif" alt="клопа!!" width="31" height="26"

border="0" />јелима</a> </h1>

Страна са јелима

●<h1 align="center"><img src="slike/PH02829J.JPG" alt="slika koja

ce biti pozicionirana desno od teksta.." width="504" height="390"

align="right" /><img src="slike/essen.gif" alt="клопа!!" width="31"

height="26" />Ал се некад добро јело..</h1>

●<h3 align="center" class="style1">баш</h3>

●<p>Јела која волим су много лепа, сласна, и немасна.. </p>

Заједнички елемент на свим

странама●<style

type="text/css">

<!—

body {

font-family: Arial,

Helvetica, sans-serif;

color: #000000;

background-color:

#FFFFFF;

margin: 0px 0px 0px

0px;}

--> </style>

●Ово ћемо да

повежемо да не

бисмо на свим

странама имали тај

садржај...

Измене у коду

Систематизација, други део

вежби из израде сајта..

(вежба 4)

Мењамо приказ на странама

●Позиционирање садржаја преко табела,

frame-οва, или div-ова

●Испробајмо све, да видимо како то

ради..

Дељење садржаја - табеле

●3 целине: top, left,

centre

●Најпре пробајмо

табеле..

●<table width="99%" border="1"

cellspacing="1"

cellpadding="1">

●<tr>

●<th colspan="2"

scope="col"><div

align="left">горњи

мени</div></th>

●</tr>

●<tr>

●<td width="20%">лево</td>

●<td>корисни садржај..</td>

●</tr>

●</table>

Дељење садржаја - табеле

●Користи се за дефинисање целина у

HTML-у, мада не треба практиковати

●Једноставно је

●Не треба велико знање CSS-a

Дељење садржаја - фрејмови

●3 фрејма..

●Почетна дефиниција

иде иза <head>-a..

●<frameset>

дефинише све

целине у којима се

даље налазе други

фрејмови

●Сваки фрејм је

посебна HTML

страна

●<frameset rows=“XX,*”

cols=“*”

framespacing=“XX”

frameborders=“yes|no”

border=“XX”

bordercolor=“#YYYYYY”

title=“naziv”>

●<frame

src=“strana.html”

name=“ime frejma”>…

</frameset>

Дељење садржаја –

фрејмови..●<frameset rows="61,*" cols="*" framespacing="1"

frameborder="yes" border="1" bordercolor="#FF0000"

title="Frejmovi">

<frame src="top.html" name="topFrame" scrolling="No"

noresize="noresize" id="topFrame" title="gornji frejm" /><frameset

rows="*" cols="142,*" framespacing="1" frameborder="yes"

border="1" bordercolor="#0000FF">

<frame src="left.htm" name="leftFrame" scrolling="No"

noresize="noresize" id="leftFrame" title="levi frejm" />

<frame src="index.html" name="mainFrame" id="mainFrame"

title="glavni frejm" /></frameset></frameset>

<noframes><body> садржај кад није дозвољено коришћење

фрејмова у датом browser-у

●</body>

Дељење садржаја –

фрејмови..●користиЛО се, због убрзања учитавања

садржаја (менији се учитају једном,

само се садржај стране мења..)

●Могућности грешке (треба уочити шта је

у примеру лоше..)

●Може се користити за учитавање

садржаја са спољног сајта

●Не практиковати (може све то без

фрејмова)

Дељење садржаја – DIV

●<div> је елемент којим можемо делити

све целине на страни

●Користи се са CSS-ом, и преко њега се

све “подешава”

●Лако се може мењати – само CSS, не и

садржај

●Могуће је дати дизајнеру да уради

изглед, програмер ради израду сајта


●Делимо на целине,

све се налази унутар

<div> (више њих

једно у другом..)

●<div style="display:block;

float:left; clear:both;

width:100%;">Горе</div>



width:99%; border:1px solid

gray;">


float:left; clear:none;

width:20%; border:dashed

gray; border-width:0 1px 0

0;">Леви мени</div>



width:78%;">Десно</div>

●</div>


●<div

style="display:block;


width:100%;">Горе</

div>

●Дефинишемо да се

<div> приказује као

блок, целина, да се

иза њега врши

прелом (као <br/>), и

да му је ширина

100% од могуће

ширине прозора


●<div



width:99%;

border:1px solid

gray;">



блок, да се иза њега

врши прелом, и да

му је ширина 99% од

могуће ширине

прозора, и да има

ивица пуна линија

(solid), ширине 1px,

сиве боје.

●Ту ће се наћи лево и

централни део..


●<div



width:20%;

border:dashed gray;

border-width:0 1px 0

0;">Леви мени</div>




не врши прелом (већ

се други <div>

надовезује), да му је

ширина 20% од


елемента у коме је,

и да му је ивица

испрекидана

(dashed), 1px лево


●<div



width:79%;">Десно</

div>




не врши, да му је

ширина 79% од


елемента у коме је


●Изглед екрана: ●Керирали смо

целине, сад садржај

ту убацимо..


●Изглед екрана: ●Све смо подесили

CSS-ом !


●Није тако једноставно због коришћења

CSS-а

●Треба користити јер омогућава

раздвајање садржаја (који не мора бити

таблични), и презентације (све се

дефинише стилом)

Дефинисање класа

Класе стилова

Дефинисање стилова

●Сваки елемент може

уместо дефиниције

стила “на лицу

места”, да има

дефинисану неку

класу

●Та класа мора бити

дефинисана у

<style> елементу..



width:100%;">Горе</div>

●Заменимо са:<div

class=“gore”>Горе</d

iv>

●А у

<style>:.gore{ display:

block; float:left;

clear:both;

width:100%; }

Дефиниције од значаја

●<style

type=“text/css”>

●body{ ….}

●.gore{ ….}

●…

●</style>

●</head>

●<body>

●….

●<div

class=“gore”>горњи

садржај</div>

Правила за CSS

●Елементе који

постоје у HTML-у

(body, p, table, th,

form,…)

дефинишемо само

именом тог

елемента:

●body{ … }

●Класе које ми

креирамо,

дефинишемо са

тачком испред

назива који смо

смислили:

●.gore{ … }

●( <div class=“gore”>

… </div>)

Правила за CSS

●Ако више пута

наведемо исто име

елемента или класе,

на пример body, и

сваки пут променимо

CSS дефиницију

неке особине, она

последња “важи”,

као и све које су

једном дефинисане

●body { color:red;

background-

color:gray;}

body

{ color:white;backgrou

nd-

image:url(slika.jpg);}

body { color:black;}

●Текст ће бити црн,

имаће слику slika.jpg

назад, позадина ће

бити сива

Правила везана за класе у

CSS-у●Сваки елемент

описан са <element

class=“ime_klase”…>

ће се понашати исто

на сајту (сагласно са

дефиницијом

описаном у CSS-у)

●Класе могу да се

“преплићу” у CSS

дефиницији

●Класе нису

јединстване на

страници (може бити

више елемената

истe класe)

●Све класе се исто

понашају, и

наслеђују особине

елемента у којем су

(<div class=“1”> <div

class=“2”></div>

</div>)

Дефинисање динамике са

линковима - a, a:link,…●Можемо дефинисати

линкове на страни

преко CSS-a тако да

се при преласку

мишем изнад линка,

боја линка и

“подвученост”

промени

●a, a:link,

a:visited{ text-

decoration:none;

color: blue;}неподвучени,

плави текст

●a:hover { text-

decoration: underline;

color: red; }подвучени,

црвени текст

●a:visited{ color:

purple; } (неподвучени),

пурпурни (љубичанствени)

текст

Нека правила

●Целине стављати у <div>

●Боје текста, и промене на тексту унутар

<span>

●Користити CSS дефиниције центрирања

свугде, осим рецимо код <div

align=“center”>..</div>

Спољни CSS

Дефинисање линкова

Спољашњи CSS фајлови

●Дефиниције изгледа странице можемо

дефинисати преко спољних CSS

дефиниција

●Свака страна на сајту линкује дати CSS,

и сајт изгледа униформно

●Линкови се дефинишу унутар <head>

елемента

Линковање CSS-a

●Ископирамо цео

садржај елемента

<style> у спољни

фајл нпр. “stil.css”

●Унутар <head>-а

свих докумената

наводимо:

●<link rel="stylesheet"

type="text/css" href="

stil.css " />

●На овај начин, на

свим странама

треба да линкујемо

један једини фајл, и

кад га мењамо,

мењамо изглед

целог сајта

Измене над страницама

●Над креираним

страницама

извршићемо “крајња

прилагођења” у

CSS-у

●Сав CSS смо прво

пребацили из

директних

дефиниција, у

<style>

●Сада смо <style>

пребацили у спољни

CSS фајл, и све

странице позивају

тај фајл

●На крају, цео сајт

изгледа исто!

●Извршити те измене

на вашим

страницама!

Питања и материјали

●Користити email:[email protected]

●На сајту школе, информације о предмету:http://www.ict.edu.rs/studiranje/predmeti/internet

●На фајл серверу Школе:\\fileserver\internet

mailto:[email protected]

http://www.ict.edu.rs/studiranje/predmeti/internet

Web дизајн (it), део 3, школска 2010 11, триместар 3

Presentations & Public Speaking

Transcript of Web дизајн (it), део 3, школска 2010 11, триместар 3