- Вежба 1 -

Окружење Dreamweaver-a Дефинисање сајта Израда шаблона-template Рад са табелама

Окружење Dreaweavera MX

Dreamweaver је занимљив софтвер који се једноставно користи и представља једну од најбољих алатки WYSIWYG( What you see is what you get-оно што видиш то и добијеш) за уређивање Web страница.

Dreamweaver није само још једна од визуелних алатки за израду Web страница. Помоћу њега можете да радите као у најбољим програмима за уређивање: да правите табеле, уређујете кадрове и једноставно прелазите из приказа странице на приказ HTML кода.

Dreamweaver потпуно подржава Cascadng Style Sheets (CSS), као и слојеве и понашање у стилу језика JavaScript. Осим тога Dreamweaver има флексибилну подршку за управљање локацијама, укључујући и потуно развијеног FTP клијента уграђеног заједно са визуелним мапама локација.

Када први пут покренете Dreamweaver, видећете главни прозор, који се зове

Document, и неколико панела. (слика 7.1)

Користићете прозор Document без обзира да ли правите једноставну матичну страну или велику и сложену презентацију.

Слика 7.1.

Прозор је елеменат који стоји сам на екрану и који ће се појавити на Windosovoj стаусној линији. Прозор Document je jeдан пример таквог прозора. Он показује садашњи документ у истом тренутку кад се креира и едитује.

Палета алатки Insert садржи дугмиће за убацивање разних врста објеката-слика, табела и слојева у докуменaт-Web страницу. Сваки објекат је део HTML кода који омогућује да се створе разни атрибути док се уноси. На пример, може се унети табела притиском на дугме Табле у Insert палета алатки, а може и преко Insert менија.

Палета алатки Document садржи дугмиће која омогућавају избор опције за рад у различитим погледима у Document прозору (Design, Split, Code), различите опције погледа и неке обичне ствари као што је преглед у читачу (Browseru). Поглед Design је дизајнерско окружење за визуелни распоред стране, визуелно едитовање и брзи апликациони развој.У овом погледу, Dreamweaver показује пуну визуелну репрезентацију документа. Поглед Code је ручно кодирајуће окружење за писање и едитовање HTML-a, JavaScript-a, језика сервера и било ког другог кода. Поглед Split омогућава да се види и дизајн и код истог документа у истом прозору.

Property прозор допушта да се погледа и промени мноштво својстава за селектовани објекат или текст. Свака врста објекта има другачија својства.

Селектор тагова у статусној линији на дну прозора документа показује хијерархију тагова која окружује дату селекцију. Избором било ког таг-а у хијерархији, обележава се тај таг и све испод њега (слика 7.2).

Слика 7.2

Дефинисање сајта

Први корак при изради сајта је планирање саме презентације. Најбоље је дизајнирати и планирати структуру сајта пре самог почетка рада чак и на папиру. Следећи корак се односи на подешавање Dreamweaver-а, тј. на дефинисање сајта на локалном рачунару. При изради битна ствар јесте да организација једне Интернет презентације по директоријумима омогућава да се приликом постављања презентације на web сервер аутоматски подржавају сви линкови као и све релативне путање до одређених објеката.

Дефинисање презентације је изузетно битан корак. Не заборавите, празан прво направите директоријум на вашем локалном рачунару, која ће садржати комплетну структуру тј. све датотеке које се односе на презентацију. У прозору Site Definition бирате направљен директоријум за вашу локалну презентацију који постаје основни директоријум презентације. Dreamweaver MX 2004 користи локацију основног директоријума презентације да би кодирао релетивне везе, укључујући и путање до слика. Кодирање релативних путања (релативне везе или релативне URL адресе) изузетно је важно у Dreamweaver-у. Када на несачуваној страници убаците слику или везу (линк) ка некој другој локалној страници, појавиће се оквир за дијалог који ће вас обавстити да веза користи путању file:// све док не сачувате дату страницу. Када то урадите Dreamweaver ће променити путању у релативну.

Нпр. основа ваше локалне презентације је C:\MojSajt а ваш директоријум са сликама има путању C:\MojSajt\Slike. Када сачувате страницу на коју сте уметнули

слику из наведеног директоријума Слике, Dreamweaver ће направити релативну путању <img src=''\Slike\slika1.gif''>.

1. Планирање/организација презентације/сајта. Тема нашег сајта je Напредно коришћење интернета тако да ће се основни директоријум звати Интернет, који треба да направите (креирате) на свом home директоријуму или локалном диску рачунара. У оквиру овог основног директоријума направите и директоријум за слике (Images) које се користе на страницама нашег сајта.

2. Дефинисање сајта у Dreamweaver-u. Када смо организовали сајт прелазимо на следећи корак тј. дефинисање сајта у Dreamweaver-u.

2.1. Из линије менија изаберите Site/Manage Site (слика 7.3)

Слика 7.3

2.2. Отвориће се прозор Manage Sites (слика 7.4).

2.3. Изаберите опције New/Site (слика 7.4)

Слика 7.4

2.4. Отвариће се прозор за дефинисање сајтова у Dreamweaver-u под називим Site Definition (слика 7.5)

Слика 7.5

2.5. Прозор Site Definition (слика 7.5) има два залиска Basic и Advanced. Basic картица ради у режиму чаробњака тј. све подешавате избором опција. За наш рад користимо картицу Advanced.

2.6. Избором картице Advanced прозор Site Definition добија изглед као на слици (7.6)

Слика 7.6

2.7. Из листе Category изаберите опцију Local Info. На тај начин говоримо Dreamweaver-u где се налази презентација на којој радимо тј. проналазимо креиран директоријум Интернет помоћу опције Local Root Folder.

2.8. У поље Site name упишите назив (име) нашег сајта и то нека буде Интернет (исто као и ди ректоријум ради лакшег рада).

2.9. У поље Local Root Folder упишите путању до нашег креираног директоријума помоћу опције .

2.10. Поља Refresh Local File List и Enable Cash треба да остану потврђена.

2.11. Прозор Site Definition сада изгледа као на слици 7.7.

Слика 7.7

2.12. Притисните дугме OK.

2.13. Појавиће се поново прозор Manage Sites. Притисните дугме Done и процес дефинисања сајта ће се завршити.

Израда шаблона –template

Пре саме израде страница нашег сајта треба да се упознамо са основним правилима која треба имати на уму при изради Интернет презентације. Wеб је комуникациони медијум са јединственим својствима. Као и код осталих комуникационих медијума, важно је да се утврди циљ (која је намена ваше Интернет презентације), потенцијална публика (ко су они, шта знају, шта треба да знају) и тематика (које информације ће ваша презентација обухватити и како).

1. Планирање и дизајнирање садржаја

Садржај и дизајн се дефинишу заједно, али садржај одређује дизајн: ви треба да знате шта желите да саопштите пре него што пожелите то да представите. За одређивање садржаја можете да користите одређена питања и да одговорима одредите садржај своје презентације.

Која је намена ваше презентације? Ко чини вашу публику? Шта она зна? Шта она треба да зна? Коју врсту прикључка на интернет она поседује? Шта желите да публика сазна из ваше презентације? На које подобласти треба изделити садржај како би ток информација био јасан, логичан и користан за публику?

2. Планирање изгледа

Што се тиче ефикасног дизајна, основа доброг дизајна се огледа у јединствености, прегледност и управљивост.

Јединственост постоји када су елементи тако уклопљени да задовољавају општи комуникациони циљ.

Прегледност постоји када је садржај издељен на логичке подскупове. Управљивост постоји када корисници могу да предвиде где се налазе области

које њих интересују и када могу лако да стигну до њих.

Страница се састоји из три логичке целине и то су:

Заглавље странице Тело странице Дно странице

Заглавље странице углавном садржи компанијски лого и главну навигацију за сајт. Тело странице садржи главни садржај (текст и слике) а дно странице линкове за контакт, copyright изјаве и слично.

Основни циљ је да су заглавље и дно странице исти кроз цео сајт, док се тело страница мења у зависности од линка-везе коју изабере корисник.

На тај начин се успоставља једно од основних правила дизајна –јединственост односно конзистентност међу страницама а то можемо најлакше постићи користећи шаблоне.

У шаблонима Dreamweaver-а можете да дизајнирате страницу, а затим да одређени део странице дефинишете као променљив. Остатак странице је заштићен од евентуалних измена корисника. Ако дизајн шаблона ажурирате након његовог коришћења аутоматски можете да ажурирате све странице које користе тај шаблон.

На пример, пожелите да промените боју позадине страница, из наранџасте у плаву, потребно је да само промените једну датотеку тј. шаблон, а да затим ажурирате све остале странице које користе тај шаблон и промена ће се извршити на свим страницама без обзира колико их има. Након ажурирања страница, потребно је да ажуриране странице пребаците на Web сервер како би настале промене дошле до изражаја.Ако не користите шаблоне, морали би промену извршити на свакој страници посебно што у случају за сајт од десет и више страница може да буде дуг и мукотрпан посао. Шаблони се чувају у оквиру директоријума који смо направили за наш сајт а пре дефинисања истог и то у поддиректоријуму Templates.

3. Поступак израде шаблона

Приликом израде шаблона потребно је направити комплетно дизајнерско решење странице која ће се касније користити за израду осталих страница сајта. Шаблон се чува у поддиректоријуму Templates директоријума сајта, у нашем случају директоријума Интернет. На самом шаблону се дефинишу променљиве и непроменљиве области.

Креирајмо шаблон за сајт Интернет :

3.1. Из линије менија изаберите File/New. Отвориће се дијалог прозор New Document

3.2. Дијалог прозор New Document има две картице General и Templates. Ако није изабарана картица General изаберите је.

3.3. Из листе Category означите Template page.

3.4. Листа Basic page прелази у листу Template page у којој означите HTML template и притисните Create. (слика 7.8).

Слика 7.8

3.5. Отвара се празан документ тј. празна страница и аутоматски се формира поддиректоријум Templates. ( слика 7.9).

Слика 7.9

3.6. На картици Document прозора пише Untitled-1 а у насловној линији целог Dreamweaver-ovog прозора пише Macromedia Dreamweaver MX 2004-[<<Template>> (Untitled-1)].

Када корисници раде са страницама заснованим на шаблонима, не могу да мењају ни једно својство осим имена странице. Подешавање својства странице, у овом случају шаблона, ради се на следећи начин:

3.7. Из линије менија изаберите Modify/Page Properties. (слика 7.10).

Слика 7.10

3.8. Отвара се дијалог прозор Page Properties (слика 7.11).

Слика 7.11

3.9. Из листе Category, изабрати опцију Appearance.

3.10. У текст поља Left margin, Right margin, Top margin, Bottom margin уписати 0 (нула). Ова поља се користе за подешавање почетка странице тј. за позиционирање курсора у Document прозору. Како је по default-u курсор подешен на 10 pixela од врха односно леве стране прозора, стављамо све вредности на 0 како би нам курсор био у самом горњем левом углу прозора. Остала поља служе за форматирање текста и позадине али их нећемо попуњавати јер ћемо форматирање текста као и подешавање позадине радити другачије.

3.11. Из листе Category, изабрати опцију Title/Encoding. (слика 7.12)

Слика 7.12

3.12. Овом опцијом се омогућава давање наслова документу (страници)-Title које се појављује у плавој насловној линији. Ми радимо са шаблоном, а наслов-име- Title код страница креираних на основу шаблона, може се мењати од стране корисника тако да то нећемо уписати.Поред давања наслова страници, овом опцијом се одређује и кодни распоред стране тј. из падајуће листе Encoding бирамо кодни распоред. За кодни латинични распоред користимо Central European (Windows). Да смо хтели да подесимо кодни ћирилични распоред изабрали би Unicode (UTF-8).

3.13. Притисните OK.

3.14. Да би сачували и дали име нашем шаблону из линије менија изаберите опцију File/Save as Template.

3.15. Отвара се дијалог прозор Save as Template. (слика 7.13)

Слика 7.13

3.16. У текст поље Save as упишите име нашег шаблона и нека то буде osnovni.

3.17. Притисните Save.

3.18. На картици Document прозора као и у насловној линији целог прозора уместо Unitled-1 сада ће да стоји osnovni.dwt што значи да смо креирали наш први шаблон.

3.19. Након подешавања својства странице и давања имена шаблону, прелазимо на поделу странице тј. шаблона на логичке целине: заглавље, тело и дно странице а то ћемо постићи помоћу објекта званог табела-Table.

Рад са табелама

У почетку су табеле коришћене за једноставнији приказ табеларних података, као што су разни извештаји и слично, али су мудри дизајнери убрзо схватили да би табеле могли да искористе и за повећање могућности дизајнирања, како би се обезбедио већи степен контроле над распоређивањем елемената и размака међу њима . Дизајн комплетен странице мођете да направите кроз сложено табеларно уређење (tabel layout).Табеле су подељене на радеове, који пролазе хоризонтално кроз табелу и колоне, који се протежу вертикално кроз табелу.Прављење табела је процес из три дела и то:

1. Уметните табелу на страницу2. Пошто осмислите основну табелу, можете да мењате распоред својства табеле и

њених ћелија. Можете да мењате распоред, величину, размак, шему боја итд.3. Када табела буде готова, па чак и када њен распоред још није коначан. У табелу

можете да уметнете садржај, као што су текст и слике.

слика 7.14

1. Заглавље странице

1.1. Убацивање табеле за банер (режим Standard)

1.1.1 Притисните мишем у горњи леви угао Document прозора (0,0-кординатни почетак).

1.1.2 Из линије менија изаберите опцију Insert/Table (слика 7.15).

Слика 7.15

1.1.3 Појавиће се дијалог прозор Table који омогућава подешавање основних својстава табеле ( број редова, број колона, ширина табеле, ивице табеле, размак између ћелија, допуна ћелије)

1.1.4 У пољу за текст Rows (број редова) упишите 1 и у пољу за текст Columns (број колона) упишите 1.

1.1.5 У пољу за текст Table with (ширина табеле) упишите 780 а у падајућој листи поред изаберите меру у пикселима (pixels).

1.1.6 У пољу за текст Border thickness (дебљина ивица) упишите 0 (нула).

1.1.7 У пољу за текст Cell padding (допуна ћелије-количина простора између зида/ивице ћелије и садржаја унутар ћелије) упишите 0 (нула).

1.1.8 У пољу за текст Cell spacing (размак између ћелија-простора између ћелија унутар табеле) упишите 0 (нула).

1.1.9 Сада изглед треба да изгледа као слика 7.17. Притисните OK.

Слика 7.17

780

Објашњење:

Пратећи правила ефикасног и доброг дизајна, ми смо наш шаблон страницу поделили на логичке целине (слика 7.14). Прва табела коју правимо је табела у којој ће само да буде убачена слика која представља банер, те због тога ова табела има само један ред и једну колону. Ширина табеле је подешена на 780 из разлога што сви монитори сада имају резолуцију од 800x600 пиксела и више, а у пикселима је јер у том случају текст који убацујете у тако подешену табелу тј.њену ћелију аутоматски ће прећи у нови ред како би се сместио по задатој ширини. У овом случају у ову табелу тј. њену ћелију убације се слика (банер) који смо претходно направили и обрадили на жељену ширину. Висину ћелија немојте подешавити повлачењем ивица ћелија. Када се убаци објекат, као што је у овом случају банер, ћелија ће сама да подеси своју висину према висини тог објекта. Треба да имате на уму да заглавље странице не треба да има већу висину од неких 70 до 80 пиksела с тим да уз банер у заглавље странице иде и табела са горњом навигацијом тако да вам је банер углавном димензија 780x 60 a осталих 20 преостаје за табела са горњом навигацијом. О свему овоме морате да водите рачуна опет у циљу поштовања правила доброг дизајна а то је да страница треба да буде тако креирана да је корисник види у целости, тј. са што мање скроловања на доле.

Како се ради о табели за распоређивање елемената на страници остала својства табеле су подешена на нулу.

1.2 Убацивање табеле за горњу навигацију

1.2.1 Позиционирајте се испод табеле за банер тако што ћете прво да кликнете на празан простор Document прозора а онда да кликнете мишем уз сами десни крај табеле а изван ње. Када се појави курсор уз десну ивицу табеле за банер притисните Shift+Enter на тастатури. Ако се курсор помери даље од саме доње ивице табеле, са стрелицом на горе се позиционирате тачно испод табеле за банер коју смо направили.

1.2.2 Процес убацивања табеле за горњу навигацију је исти као и табеле за банер (својства табеле су иста као на слици 7.17).

1.2.3 Поновите поступак позиционирања испод табеле за горњу навигацију као што је описано у тачки 1.2.1. и тиме се позиционирате за убацивање табеле за леву навигацију и за садржај странице.

Слика 7.18

Одређивање променљивог дела странице (шаблона)

1. Поставите курсор миша у колону табеле за садржај (друга колона).

2. Из линије менија изаберите опцију Insert/Template Objects/Editable Region (слика 1.19).

Слика 7.19

3. Отвориће се дијалог прозор New Editable Region и у текст поље Name упишите promenljivi. ( слика 1.20)

Слика 1.20

4. Притисните OK.