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>
●Морамо дефинисати
тип стране (XHTML)
●приказ текста да
буде UTF-8
●Празан садржај..

Садржај..
●Добродошли на
страницу
●о мени омиљеним
●пићима и јелима
●... Ајд мало да то
“зачинимо”...
●Мењамо фонт, боју
променимо,
размакнемо лево и
десно, а ставимо
слике код јела и
пића..

Уређивање позадине и
маргина..
●<body>
●<p>Добродошли на
страницу </p>
●<p>о мени
омиљеним </p>
●<p>пићима и јелима
</p>
●</body>

Уређивање позадине и
маргина..
●<body> је исти, али
мењамо <head>:
●<style type="text/css">
●
●</style>

Објашњење..
●<style type="text/css">
●<!--
●body {
●font-family: Arial,
Helvetica, sans-serif;
●color: #000000;
●background-color:
#FFFFFF;
●margin: 0px 0px 0px
0px;}
●Дефинишемо стил типа
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 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

Сајт је глуп без линкова..
●Креирамо посебне
стране са пићима, и
са јелима..
●Креирамо 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
●Ово ћемо да
повежемо да не
бисмо на свим
странама имали тај
садржај...

Измене у коду
Систематизација, други део
вежби из израде сајта..
(вежба 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>

Дељење садржаја - табеле
●Користи се за дефинисање целина у
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>

●<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% од
елемента у коме је,
и да му је ивица

●<div
width:79%;">Десно</
div>
не врши, да му је
ширина 79% од
елемента у коме је

●Изглед екрана: ●Керирали смо
целине, сад садржај
ту убацимо..

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

●Није тако једноставно због коришћења
CSS-а
●Треба користити јер омогућава
раздвајање садржаја (који не мора бити
таблични), и презентације (све се
дефинише стилом)

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

Дефинисање стилова
●Сваки елемент може
уместо дефиниције
стила “на лицу
места”, да има
дефинисану неку
класу
●Та класа мора бити
дефинисана у
<style> елементу..
width:100%;">Горе</div>
●Заменимо са:<div
class=“gore”>Горе</d
iv>
●А у <style>:.gore{
display:block;
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;backgroun
d-image:url(slika.jpg);}
body { color:black;}
●Текст ће бити црн,
имаће слику slika.jpg
назад, позадина ће

Правила везана за класе у
CSS-у
●Сваки елемент
описан са <element
class=“ime_klase”…>
ће се понашати исто
на сајту (сагласно са
дефиницијом
описаном у CSS-у)
●Класе могу да се
“преплићу” у CSS
дефиницији
●Класе нису
јединстване на
страници (може бити
више елемената
истe класe)
●Све класе се исто
понашају, и
наслеђују особине
елемента у којем су
(<div class=“1”> <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:nikola.reljin@ict.edu.rs
●На сајту школе, информације о
предмету:http://www.ict.edu.rs/studiranje/predmet
i/internet
●На фајл серверу Школе:fileserverinternet

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

More Related Content

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

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

Editor's Notes