AnGeL_oF_dArKnEs
05-11-2007, 09:41
Dreamweaver 4
I. Прозорци и подредба
Стартирайте програмата, като щракнете един (два) пъти върху иконката й. Когато се зареди, натиснете менюто window, за да изкарате нужните ни прозорци. Те са: Insert, Properties, Assets, Behavoirs. Натиснете малката стрелкичка долу вдясно на прозореца Properties, за да се разтвори целият.
Можете да местите прозорците като натиснете с курсора синята лента отгоре, задържите бутона на мишката и влачите. Размерите се променят както и на прозорците в Windows.
Препоръчвам ви да ги подредите заедно с прозореца Insert на удобно място, защото ще ги използвате много често.
Също така може и да създавате свои собствени менюта, като влачите определени части от едни прозорци и ги пускате върху други.
Трябва да настроите работния екран - той трябва да бъде съобразен и с хората, с по - малки монитори. За да направите това, щракнете върху стрелкичката а window size долу на работния ви екран и изберете 760 X 420 (800 X 600 maximized).
Забележка: За да получите HTML кода в комбинация със страницата натиснете средния от трите бутона под главните менюта.
II. Мястото на вашият сайт
Следващото нещо, което трябва да направите е да създадете нова папка за вашият сайт (например my_site). Там ще се съдържат всички компоненти от вашата страница. В тази папка създайте още 2 папки - images (изображения) и аrchive (архив). Препоръчвам ви да задавате имената, които ви посочвам, защото те се използват под подразбиране и са въведени като стандарт. В папката my_site ще се съдържат всички документи, създадени впоследствие. В images ще поставяме изображенията, използвани в сайта. Добре е да архивирате документите си от време на време, за да можете да възстановите страниците до предишното им състояние, ако има нужда от това.
III. Дефиниране на сайт
Много важно и удобно е да дефинирате сайта си. От този прозорец може да отваряте страниците, може да ги преименувате без да се разкъсват връзките, да ги триете и др. За да направите това, отворете менюто Site, и изберете Site files или натиснете F8. В отворилия се прозорец в падащото меню Site изберете Define sites ще се отвори нов малък прозорец за дефинираните вече сайтове. Можете да изтриете сайтовете, дефинирани от Macromedia, като ги маркирате и натиснете бутона Delete. След това натиснете бутона New, за да създадете вашия site map. Въведете данните, както е показано на картинката по - долу. Отметнете полетата Refresh local site files automatically и Enable cachse и натиснете ок. Ще бъдете уведомени за създаването на кеш и след като натиснете ок всичко е готово.Можете да отваряте страниците от сайта си като натискате два пъти имената им. Можете да ги преименувате, като дадете десен бутон върху името и натиснете rename от падащото меню. След като въведете новото име и натиснете enter ще се появи съобщение, което ви пита дали да запази линковете към тази страница. Можете да натиснете yes или no.
IV. Имената на страниците
Препоръки:
• Не назовавайте страниците на кирилица
• Не използвайте главни букви в имената на страниците
• Старайте се да използвате къси имена
• Вместо интервали използвайте долни тирета
• Не използвайте непозволени знаци
• Не може да има две страници с еднакви имена
V. Първа страница
Стартирайте Dreamweaver. Както виждате, няма нужда да давате нова страница, защото тя вече е пред вас. Първо трябва да запазите страницата си. Отворете менюто file и натиснете save as или control+shift+s. Ще се появи прозорец като показания отстрани. Във полето за текст file name напишете името на страницата, щракнете save и готово! Следващият път, когато искате да запазите промените на тази страница достатъчно е да натиснете control+s. Ако използвате фреймове (фреймовете са обяснени в някои от следващите уроци) се налага по - различен начин на запазване. Примерно, създали сте страница с главен фрейм и ляв фрейм. Щраквате с левия бутон някъде във левия фрейм, след това давате file, save frame as и за име пишете примерно left. По същия начин щраквате и във главния фрейм и го запазвате под името main. След като запазите всички фреймове поотделно е време да запазите цялата страница. Отворете менюто file, дайте върху save all frames и напишете името index (ако страницата е главна). След това запазете промените. Следващият път, когато искате да запазите промените във всички фреймове, дайте само save all frames.
VI. Работа с текст
Едно от предимствата на тази програма е това, че можете да въвеждате текста направо в прозореца, без да е необходимо друга намеса на менюта и прозорци. Просто щраквате с мишката реда, на който искате да въведете текста и вече сте готови да пишете. Ако искате да пишете на кирилица обаче, трябва да смените document encoding, което се прави по следния начин: десен бутон в празна област от пространството на страницата, page properties и в полето document encoding избирате Cyrilic (Windows - 1251). По подразбиране document encoding е Western (Latin 1) и ако не възнамерявате да въвеждате текст на кирилица не го променяйте.
След като сте въвели някакъв текст е време да промените някои от параметрите му. Това става чрез прозореца Properties. За да изпълните даден ефект върху текст вие трябва да маркирате този текст и след това да задавате промените. Ще опиша поред функциите на прозореца Properties при маркиран текст.
От падащото меню format може да изберете някои готови ефекти за текст. От менюто до него пък избирате шрифта. В полето линк може да напишете адреса към друга страница или да натиснете жълтата папчица за да покажете файла ръчно (ако той се намира на вашият твърд диск, а не е страница в Интернет или пощенски адрес). В полето size може да въведете исканата от вас големина или да я изберете от падащото меню. Бутонът B служи за удебеляване на текста, а I за накланянето му. Трите бутона до тях служат за центриране на текста спрямо лявата, средната или дясната част на страницата. Отдолу има два бутона - един с цифрички и един с точки. Те служат да т. нар. bullets and numbering. Бутоните до тях служат за изместване на текста една позиция наляво или надясно.
Отметката в полето no wrap оставя текста да си върви безкрайно в един ред, а header го центрира и удебелява. Може да изберете картинка за фон на таблицата, като въведете адреса й в полето Bg. Може и да изберете цвят на рамките от полето Brdr. За да смените цвета на цялата таблица използвайте полето Bg, намиращо се до полето Header.
VII. Работа с изображения
Вмъкването и използването на изображения също е много лесно в Dreamweaver. Достатъчно е да цъкнете някъде в листа и да натиснете бутона insert image от прозореца objects. След това е необходимо да посочите картинката, която желаете да вмъкнете в документа. Важно!: ако преместите изображението в друга папка Dreamweaver няма да може да го намери сам, и на негово място ще се появи какртинка на скъсано листче със сив фон. За да му покажете, къде се намира изображението, цъкнете два пъти върху него и го изберете. Това е! Изображенията могат да се центрират по същия начин, както и текста. В менюто Properties може да задавате отстояния около картинките - това става в полето V Space & H Space. В полето Alt може да зададете текст, който ще се появи, когато потребителят посочи картинката.
VIII. Дефиниране на друг браузър
Хубаво е да дефинирате допълнителен браузър, за да можете да действате, как ще изглежда вашия сайт при потребителите, които го ползват. Това става много просто: от менюто File избирате Preview in Browser и Edit Browser List. По подразбиране би трябвало да имате Internet Explorer като Primary Browser. За да добавите друг, натиснете бутона с плюсчето отгоре. Отметнете полето Secondary Browser и натиснете бутона Browse, за да покажете на Dreamwever, къде е инсталиран вашия браузър. Това е. Можете да видите как изглежда сайта ви във Primary Browser (като натиснете F12) или във Secondary (като натиснете ctrl+F12).
Така например, някои java скриптове или други подобни не са съвместими с някои браузъри - това е начина да проверите дали използваните от вас кодове работят правилно.
IX. Работа с таблици
Бутонът за вмъкване на таблици се намира в панела Objects, точно под бутона за изображения. Когато го натиснете се появява прозорец, в който може да зададете някои от характеристиките на таблицата, която вмъквате.
• Rows - броя на редовете в таблицата
• Columns - броя на колоните в таблицата
• Width - широчина на таблицата (по подразбиране е в проценти от широчината на прозореца, може и в пиксели)
• Border - дебелината на рамката на таблицата в пиксели
• Cell Padding & Cell Spacing - разстоянията между отделните клетки на таблицата (може да го настроите после)
След като натиснете ОК таблицата ще се появи в страницата. Ще ви опиша как изглежда прозореца Properties при селектирана таблица.
Можете да промените броя на редовете или колоните като напишете други числа в полетата Rows (редове) или Cols (колони). Също така може да промените и широчината и височината на таблицата, като въведете съответните числа в полетета W (широчина) и H (височина). От падащите менюта до тях можете да изберете, дали да бъде в пиксели, или в проценти от големината на прозореца. В полетата Cell Pad и Cell Space можете да въведете отстоянието на клетките в таблицата една от друга. От падащото меню Align може да изберете центрирането на таблицата. Бутоните Clear Cell Rows и Clear Cell Highs служат за изчистване на празното пространство около съдържанието на таблицата. Бутоните под тях обръщат стойностите за големината на таблицата от пиксели в проценти и обратно. От падащото поле Bg Color може да изберете цвета на пространството в таблицата, а от Brdr Color - цвета на рамката. В полето Bg Image можете да въведете адреса (или да посочите, като цъкнете върху жълтата папка) на файл, който да бъде като background на таблицата.
Можете да създавате различни по форма таблици.
За да съедините няколко клетки, маркирайте ги, като цъкнете в едната и влачите нагоре или надолу, наляво или надясно. След това натиснете бутона Merge selected cells using spams, който се намира в прозореца Properties.
За да разцепите една клетка на повече, маркирайте я и натиснете бутона, който се намира до гореописания. Въведете броя на колоните или редовете (в зависимост от това, кое поле е маркирано) и готово!
X. Работа с фреймове
Не търсете бутон Insert Frame в менюто Objects, просто защото няма да го намерите. Фреймовете се слагат от менюто Insert. От там избирате Frames, и след това вида на фрейма.
Изброени са 8 вида възможни фреймове и комбинации. Можете да оцветявате всеки фрейм по ваше желание, както оцветявате и обикновена страница. Всъщност, представете си, че един фрейм просто разделя страницата на две независими една от друга страници, които могат да бъдат с различни имена, цветове и съдържание.
XI. Работа с прозореца (менюто) Insert
След прозореца Properties, това е най - използваното меню в тази програма, особено второто му състояние. Това меню има общо 7 различни състояние, които се променят от падащото меню в горната му част. По подразбиране обикновено е видимо второто му състояние - common. Но аз ще започна описанието си от първото му състояние.
1. Characters - при това състояние на менюто можете да въвеждате някои видове знаци, недостъпни за писане от клавиатурата. По ред на разположение те са: copyright, registered trademark, trademark, Pound, Yen, Euro, Left & Right Quote, Em - Dash, а последния бутон служи за отваряне на прозорец, в който имате още по - голям избор на знаци. Този бутон служи за преместване на следващия ред, но не е еквивалентно на натискането на бутона Enter. като се прескача не един, а половин ред. Другия бутон служи горе - долу като Tab.
2. Common - това е най - използваното състояние на този прозорец. В него има 16 бутона. Бутона insert image е ясно за какво служи, но за тези, които са пропуснали предишните статии ще кажа, че той се използва за вмъкване на изображения. Бутона до него служи за вмъкване на т.нар. rollover изображения, които се променят, когато ги посочите. Следващият бутон, insert table служи за вмъкване на таблици и е обяснен в предишните статии. Insert tabular data служи за insertva - не на данни в таблица. Бутона Draw layer служи за рисуване на слоеве (layers), а с помощта на бутона до него може да създадете цяло меню с rollover изображения за бутони. Insert horizontal rule вмъква хоризонтална черта, като може да регулирате дължината й от прозореца Properties. Ако искате да сложите e - mail адрес във вашия сайт, бутона insert e - mail link ще ви помогне за това . Insert date ще слага автоматично датата и часа на последна промяна на документа. До него седи бутона insert server - side include, който служи за вмъкване на управление от страна на сървъра. Insert fireworks html служи за вмъкване на html файл, който е създаден от програмата Fireworks. Бутона пък до него служи за вмъкване на Flash клип (съдържание). Insert Flash button служи за директно вмъкване на Flash бутон, а с бутона до него можете да пишете Flash текст директно в документа. Insert Shockwave служи за вмъкване на съответната медия , а insert Generator служи за вмъкване на файлове на Generator.
3. Forms - тази позиция съдържа 10 бутона с различни функции. Бутона insert form служи за вмъкване на форма. Бутона Insert text field слага поле за въвеждане на текст, което автоматично се разполага във форма. Insert button е ясен - слага бутон. Insert checkbox слага кутия за отмятане, която също се разполага автоматично във форма. Insert radio button е същото като горното, но бутона е кръгъл. Insert list/menu създава падащо меню, а insert file field дава възможност да се вмъкне поле, в което може да бъде посочен файл. Следващия бутон създава поле - изображение, а бутона на следващия ред задава скрита информация. Последния бутон създава падащо меню.
4. Frames - От тук можете да слагате рамки (фреймове) във вашия документ.
5. Head - В това състояние са достъпни 6 бутона: insert meta, insert keywords, insert description, insert refresh, insert base и insert link.
6. Invisibles - Тук можете да видите 3 бутона: insert named anchor, insert script, insert comment. Първият служи за поставяне на котви, които са много полезни, втория служи за вмъкване на скриптове, а третия - за слагане на коментари в кода на страницата.
7. Special - Tук отново има 3 бутона: insert applet, insert plugin, insert activeX. Първият вмъква посочения от вас аплет в документа. Следващия служи за добавяне на plug - in към вашия браузър, най - често за Netscape (които между другото се отказаха от разработките на браузъри). Третия служи за добавяне на Microsoft ActiveX приложения.
Отдолу на менюто (във всяко негово състояние) има още 4 бутона. С бутона View можете да сменяте начина на изглед на таблиците, което доста затормозява системата. Затова по - добре използвайте стандартния изглед.
XII. Работа с форми
Обикновено формите се използват за събиране на информация от потребителя. Там можете да въведете името си, местоживеене и др. Например, когато регистрирате e - mail вие попълвате такава форма. Данните, които вие попълвате в тази форма се изпращат към програма за обработка на форми - обикновено GGI скрипт. Формите са достъпни от прозореца Insert на Dreamweaver, раздел Forms. За да създадете форма, просто трябва да натиснете бутона Insert form. Формата, която създавате, по подразбиране е 100% от широчината на страницата и изглежда като правоъгълник с прекъснати червени контури. Добавяне на обекти във формата - останалите 5 бутона от прозореца Insert са обекти за добавяне във формата:
1. Текстови полета - могат да бъдат едноредови или многоредови. Ако текста е голям, по - добре използвайте многоредови полета.
За да въведете текстово поле, натиснете бутон Text Field. Ще се появи едноредово текстово поле. За да промените размерите му, въведете число в полето Char Width в прозореца Properties. Moжете да зададете информацията в полето да изглежда като парола (тоест като звездички, вместо като текст), като го маркирате и в прозореца Properties отметнете радиобутона Password. Ако искате полето да е многоредово, изберете бутона Multi Line. Можете да зададете някакъв текст, който винаги да се зарежда в полето, като го впишете в полето Init Val.
2. Button – бутони - мисля, че всеки знае за какво служат те.
3. Checkbox – Полета за маркиране - позволяват на потребителя да избира няколко бутона от цялата група. За да вмъкнете поле за маркиране, трябва да натиснете бутон Checkbox. Трябва да зададете име и стойност на всяко едно поле.
Това става в прозореца Properties. В полето Checked value въведете текста, който искате да използвате, ако потребителя маркира полето. В полето checkbox може да напишете име на полето за маркиране. Имената и стойностите трябва да са различни.
4. Radio Button – Радиобутони - винаги се използват в група. Потребителя може да избере само едни бутон от цялата група. Те се вмъкват с бутона. Името на всички бутони от една група трябва да е едно и също. Името за групата радиобутони се въвежда в текстовото поле Radio Button.Стойността на избрания бутон се въвежда в полето Checked Value. Стойностите за всеки бутон трябва да са различни!
5. List/Menu – Списъци и менюта - менютата се наричат още и падащи менюта. Добър избор за страници с малко място на разположение и много неща за избиране. В някои случаи може да бъде избран повече от един елемент. Вмъкват се с бутона Insert List/Menu. За да запълните менюто с елемнти направете следното: След като сте избрали менюто, в прозореца properties щракнете бутона List Values. Там можете да въведете текста, който да се съдържа в менюто. Ако искате, можете вместо падащо меню да направите скролиращо се. За целта в прозореца Properties трябва да отметнете полето лист. Ако отметнете и полето Selections - Allow multiple, потребителя ще може да избира повече от един брой данни.
6. File field – Файлови показатели - от тук потребителя може да задава адреси до определен файл. За да добавите тази възможност, натиснете бутона Insert file field.
7. Hidden Field – Скрити форми - Помагат за предаване на скрита информация.
8. Jump menu – Създават се от бутона Insert jump menu. Те директно препращат към адреса, на който съответства избора.
XIII. Работа със стилови множества ( CSS )
Стиловите множества (CSS - Cascade Style Sheets) се използват преди всичко за форматиране на текст, въпреки, че накои атрибути се използват за форматиране на изображения и други обекти. Съществуват четири вида стилове, които можете да използвате:
1. Предефиниране на HTML документ - Елементът, който предефинирате се нарича селектор. Характеристиките и атрибутите на стила, намиращи се между {вълнообразните скоби} се наричат стилови дефиниции.
2. Клас - В този случай дефинирането се използва върху текстов блок.
Можете да съхраните Вашите CSS като HTML код. От менюто File изберете Convert - > 3.0 Browser Compatible. Маркирайте бутона CSS Styles to HTML Markup. След като щракнете върху ОК, Dreamweaver ще отвори страницата в нов прозорец. Третият и четвъртият стилове на т.нар. свързани или внесени стилови множества, което представлява отделен документ, описващ вашите стилове.
Създаване на стилове – меню Behaviors, New Style. За тези действия ще трябва задължително да преминете през един от двата прозореца: Edit Style Sheet или New Style Sheet. И така, има осем категории стилове, които можете да приложите към текст.
• Печатни - служат за форматирането на текста, настройка на вида на шрифта, големината му, цвета, стила му.
• Фонови - могат да се приложат както към текстов блок, така и към цялата страница. Те са например фонов цвят, изображение и др.
• Блокови - те контролират положението на текста - подравняване, отместване и др.
• Рамкови - прилагат се към "рамката", която обгражда блоков елемент.
• Гранични - дават възможност рамката около блоковия лемент да се изобразява нормално.
• Списъчни - управляват форматирането на текстове, в които са използвани например bullets.
• Позициониращи - позволяват да определите положението на елементите върху страницата.
• Разширения - засега те не се поддържат от текущите браузъри.
Повече за печатните атрибути на CSS
Oт падащото меню Font в раздела Type на прозореца Style definition можете да изберете шрифта на текста. От полето Size избирате големината, а в Style можете да изберете, дали върху текста ще се прилагат ефекти (болд, наклонен). От полето Line height можете да променяте височината на всеки ред от текстовия блок. Стандартната височина на реда при размер на шрифта 12 точки е 16 точки. От полетата за отмятане можете да контролирате други ефекти за текста - според реда на разположение: подчертаване, надчертаване, зачертаване, мигане и без ефект. От Weight фактически можете да контролирате дебелината на болд - а. От Case можете да зададете, дали текста да е с малки, големи или комбинирани букви. Мисля, че на всеки е ясно за какво се използва color?
Повече за фоновите атрибути на CSS
С помощта на фоновите атрибути можете да променяте фоновия цвят на текстов блок, или да използвате готово изображение. Това става от първите два реда на прозореца Style definition - Background color и Background Image.Когато прилагате такъв ефект към текстов блок, неговия Background ще бъде с един "слой" по - напред от цвета/изображението, т.е. той ще закрива част от задния "слой" (който е работил с програми за графика ще ме разбере най - добре по въпроса за слоевете smile. От падащото меню Repeat можете да зададете дали изображението (ако има такова) да се повтаря и как точно:
• No - repeat - не позволява на изображението да се изрисува повече от един път.
• Repeat - ще повтаря изображението, за да попълни цялата страница.
• Repeat - X - повтаря изображението по оста X (хоризонтално).
• Repeat - Y - повтаря изображението по оста Y (вертикално).
• Attachment - закотвя неподвижно фоновото изображение, така, че като превъртате страницата, съдържанието й ще "плува" над фона.
• Horizontal & Vertical position - можете да позиционирате фоновото изображение според някакъв обект.
Повече за блоковите атрибути на CSS
Както бе споменато, блоковите атрибути контролират положението на текста - подравняване, отместване и др. Te включват: Word spacing - можете да променяте разстоянието между думите, като въвеждате положителни или отрицателни стойности. Letter Spacing е същото, но важи за отделните букви. От падащите менюта да тях можете да сменяте мерните единици. Vertical Alignment позиционира маркираното съдържание по вертикалната ос Y. Text Align позволява да подравнявате текста по нормалния начин (ляво, дясно, среда) или и от двете страни. Text Indient действа подобно на клавиша Tab от клавиатурата. Whitespace контролира използването на space между думите и буквите в текста:
• Normal - игнорира допълнителните интервали
• Pre - запазва употребата на интервали и текстово базирани прекъсвания
• Nowrap - позволява на реда да се прекъсне само ако е използван елемента
Повече за рамковите атрибути на CSS
От полетата Height и Width можете да контролирате съответно широчината и височината на рамката, като от падащите менюта отстрани можете да изберете желаната мерна единица. Float поставя селекцията в съответно дясната или лявата част. Clear определя поведението на другите елементи спрямо селекцията. От падащото меню можете да изберете: both - обектите не могат да се разполагат около границите на селекцията; none - може да се заемат границите; left и right забранява разполагането в съответната граница. Padding е като при таблиците - разстоянието между селекцията и неговата рамка, като можете да задавате това разстояние за всяка страна поотделно. И Margins задава местоположението на границите около рамката.
Повече за списъчните атрибути на CSS
От падащото меню Type можете да изберете доста видове списъци, които идват по подразбиране с Dreamweaver. От падащото меню bullet image пък можете да изберете предлаганите от програмата "куршумчета" или да използвате свои. И последното падащо меню контролира положението на текста при пренасяне на нов ред.
Повече за разширенията на CSS
Първото разширение ви позволява да слагате край и начало на страницата, за да може тя да се отпечатва нормално на принтер. Cursor - можете да настройвате как да изглежда курсора, когято се намира над различни стилове. Filter можете да избирате различни филтри, стига те да се поддържат от браузърите.
HTML Tагове
Създава коментар в страницата който може да се вижда само в HTML кода
<a> Създава линк към друга страница, елемент, или към част от страницата
<a> Създава линк към някоя точка от същата страница
<address> Определя сигнатура или адрес в страница
<applet> Начало на java аплет
<area> Дефинира петно от карта на изображение, което служи като препратка.
<audioscope> Дефинира визия за графично представяне за звук когато се гледа телевизия през интернет
Кара текста в тага да е с удебелен шрифт
<base> Дефинира базовия URL адрес вътре в кода на страницата
<basefont> Дефинира размер, цвят и font за цялата страница. Базов шрифт
<bgsound> Добавя фонова музика на страница, записана, примерно в midi или wav файл.
<big> Кара текста да стане по-голям от базовият с една единица.
<blackface> Увеличава текста двойно за телевизия по интернет.
<blink> Кара текста който е в тага да премигва.
<blockquote> Отмества надясно блок от текст.
<body> Дефинира фон на страницата, размер и цвят на текст,линк, посетен линк. Общото предназначение е да дефинира тялото "<body>" на страницата, в което е това което трябва да се вижда.
<bq> Отмества блок от текст надясно, но се ползва само във WebTV.
Прекъсва текущия ред. Текста или картинките, примерно, се показват на следващия.
<caption> Създава заглавие на таблица.
<center> Центрира група от текст или графики.
<cite> Прави пасаж от текст на курсив.
<code> Форматира текст със шрифт с фиксирано разстояние между символите.
<comment> Слага коментари в HTML страница и ги скрива.
<dd> Отмества текста навътре ако е изплозван в <dl> таг.
<dfn> Дефинира термин(тема).
<dir> Създава малък списък от неща в единична колона.
<div> Представя различни секции от текст. Контейнер за други HTML елементи. Дефинира слой в зависимост от стиловото му поле.
<dl> Показва списък от термини и дефиниции.
<dt> Дефинира термин(тема) в <dl> списък.
[i] Показва пасаж текст с курсив(наклонен обикновено).
<embed> Вмъква обект в страницата. Примерно звуков файл или .AVI филмче.
<fn> Създава именувано място в страницата или линк както прави <a> тага.
<font> Сменя големината, цветя и шрифта за заградения текст. Дефинира атрибути на шрифта.
<form> Дефинира страница или пасаж текст, които ще бъдат форма за въвеждане на данни.
<frame> Дефинира фрейм <frameset> таг.
<frameset> Дефинира атрибути на страница, която ще използва фреймове.
<h1> ... <h6> Показва текста като заглавие с по-големи букви .
<head> Дефинира заглавната част на документ.
<hr> Създава хоризонтална линия.
<html> Специфицира че документа съдържа HTML.
Показва текста в курсив (наклонен надясно).
<img> Вмъква изображение, изображение карта или анимация.
<input> Дефинира входно поле във форма.
<isindex> Създава заявка за индексиране.
<kbd> Показва текста с шрифт с фиксирана ширина.
Създава подточка или нова линия, когато се използва в <dir>, <menu>, [list=1] и <ul> таговете.
<limittext> Указва максималната ширина на текста, когато се ползва за WebTV.
<link> Създва организация за навигация на серия документи . Вмъква скрипт файлове или стилови полета.
<listing> Преформатира блоковете текст в листинг, за да бъдат показани с шрифт с фиксирана ширина.
<map> Дефинира карта за изображение, която работи от страната на клиента.
<marquee> Създава линия скролиращ текст, ако се гледа с MS Internet Explorer.
<menu> Създава списък.
<nobr> Предотвратява прекъсването на редовете в текст или серия картинки.
<noframes> Дефинира съдържание, което ще се види, ако потребителя има браузър, който не поддържа фреймове.
[list=1] Дефинира начало и край на списък. Подреден.
<option> Създава списък от точки, които потребителя може да избира.
Дефинира началото и края на параграф.
<plaintext> Показва текст с шрифт с фиксирана ширина.
Преформатира блокове текст с шрифт с фиксирана ширина. .
<s> Показва текста задраскан с линия в средата.
<samp> Показва текст с шрифт с фиксирана ширина.
<script> Дефинира началото и края на скрипт (JavaScript ili VBScript).
<select> Създава списък от точки, които потребителя може да избира.
<server> Друг начин за правене на анимация от сървъра.
<small> Показва текста с 1 по малък от този по подразбиране.
<strike> Показва текста задраскан с линия в средата.
[b] Показва текста с удебелен шрифт.
<sub> Показва текста в субскрипт. (умален и долу, като индекс)
<sup> Показва текста в суперскрипт.(умален и горе, като степен)
<table> Създава таблица.
<td> Дефинира клетка в таблица.
<textarea> Създава текстово поле.
<th> Дефинира заглавие на таблица.
<title> Дефинира заглавие на страница.
<tr> Дефинира ред в таблица.
<tt> Показва текст с шрифт с фиксирана ширина.
Пказва текста подчертан
<ul> Показва неномериран списък
<var> Показва текста в курсив(наклонене надясно).
<xmp> Показва текст с шрифт с фиксирана ширина.
Основни принципи при изграждането на Web сайт.
Въвеждане, оформяне на текста, хипервръзки, картинки
Създаването на сайт с програмата Macromedia Dreamweaver далеч не започва със стартирането й. Преди да преминете към обработката на информацията с Dreamweaver, трябва първо да я създадете с помощта на други програми и средства.
Първият етап от създаването на сайт протича "на белия лист". Нарисувайте с молив схематичен образ на бъдещия сайт. Преценете кой шрифт ще използвате, какви картинки; в каква форма ще бъдат връзките (текстови или с картинки) към отделните страници. Ако възнамерявате да използвате готови елементи от друг сайт, свържете се със създателя на сайта го помолете за разрешение. Направете една папка (директория) и в нея записвайте файловете на бъдещия сайт. За предпочитане е всички файлове, който ще използвате да са в една папка.
Добре е да разполагате със скенер, особено ако имате дарба да рисувате. Така ще можете да си нарисувате логото на сайта, картинката за фон и дори отделните бутони. След като сканирате необходимите елементи, обработете ги малко с любимата си програма за редактиране на изображения. Добър избор е Adobe Photoshop (www.adobe.com). Средството Paint Shop Pro (www.jasc.com) също препоръчвам на сега започващите. Аз дори ползвам и Microsoft Paintbrush от стария Windows 3.1...
Не прекалявайте с картинките и ефектите, те ще размият акцента в сайта. Използвайте горните програми, за да намалите обема на изображенията до минимум. Ако възнамерявате да си сложите снимката, използвайте формата JPEG (.jpg). JPEG форматът е подходящ за изображения, които си служат с много цветове. За отделните бутончета вършат работа форматите GIF или PNG. (.gif, .png). Тях използвайте и за изображения, които съдържат малък брой цветове - например ако правите screenshot на диалогов прозорец в Windows. Форматът PNG изготвя по-малки файлове от GIF, но понякога има несъвместимости между PNG и отделните браузъри. Но какъвто и да е форматът на файла, стремете се да намалите големината му колкото се може повече.
Не използвайте много различни шрифтове в сайта. Изберете си една комбинация между шрифт, стил и големина и я използвайте във всяка една от страниците. Съчетайте добре и цветовете. Можете да въведете текста на отделните страници първо в Word и след като разучите Macromedia Dreamweaver, да създадете HTML файловете. ЗАБЕЛЕЖКА: Word също има възможности за запазване в HTML формат, но НИКОГА не ги използвайте. Тази възможност в Word е направена така, че полученият HTML файл става много голям и пълен с различни ненужни инструкции, само и само да стане максимално несъвместим с другите браузъри освен Internet Explorer.
<file> Въвеждането и форматирането на текст в Dreamweaver има своите особености, с които трябва да се съобразите за пълноценна работа.
Уверете се, че т.нар. "Property Inspector" е видим във всеки един момент от работата. Ако не е, включете го, като от менюто "Window" изберете "Properties". Това е лента с инструменти, която променя своето съдържание в зависимост от това какъв вид обект е избран. Докато въвеждате и форматирате текст, би следвало тази лента да изглежда по показания на картинката начин. На нея е показано и какво правят съответните елементи. За да приложите форматиране върху част от текста, първо я маркирайте. Маркирането става по стандартните начини, както в Word. А ако се опитате да изберете форматиране, когато не е маркирана никаква част от текста, промяната ще бъде в сила, когато започнете да въвеждате нов текст на същото място.
В компютъра може да има много инсталирани шрифтове, които без проблем ползваме в обикновени текстови редактори. Но в Dreamweaver не е така... Натиснете стрелкичката вдясно от полето за избор на шрифт, за да отворите списъка. Виждат се само 7 шрифтови фамилии - Arial, Helvetica, Sans Serif; Times New Roman, Times, serif; Courier New, Courier, Mono; Georgia, Times New Roman, Times, Serif; Verdana, Arial, Helvetica, Sans-Serif; Geneva, Arial, Helvetica и MS Sans Serif. Броят им е ограничен, за да може да се постигне максимум съвместимост на сайта с други компютри и браузъри. В това поле можете спокойно да напишете името на любимия си шрифт - Impact, например. На вашия компютър всичко ще изглежда добре, но какво ще стане, ако отидете у свой приятел, който няма този шрифт инсталиран??? Много просто - браузърът му ще изобрази желания текст с този, който ползва по подразбиране. А ако се ограничите до горните шрифтови фамилии, няма да имате никакви проблеми, тъй като това са системни шрифтове, които се инсталират заедно с Windows.
Следващите възможности, които предлага Property Inspector, са за избор на големина на шрифта и цвят. Важно е да се отбележи, че големините на шрифта се задават по мерки, различни от тези в Word и другите текстообработващи програми. Цвят можете да изберете по два начина. Единият е, като натиснете малкото квадратче, което е оградено на картинката. Тогава програмата изобразява палитра с цветове, от които можете да изберете някой чрез мишока. Вторият начин е по-лесен, ако вече знаете кода на желания от вас цвят. Тогава просто го написвате в текстовото поле вдясно от посоченото малко квадратче. Ако изберете цвят по първия начин, в текстовото поле програмата изобразява неговия код.
Възможности като Bold, Italic и подравняване на текст са на разположение и в Dreamweaver. Чрез бутончетата "B" и "I" можете да изберете допълнително почерняне на текста и курсив. Имате избор между ляво, центрирано и дясно подравнение чрез натискане на съответните бутони.
Особеност при въвеждането на текста в Dreamweaver е, че натискането на "Enter" премества маркера надолу през една линия, а не на следващата. Ако искате да започнете нов ред, без да има дупка между стария и новия ред, натиснете SHIFT+ENTER. И още - не можете да имате повече от един последователен интервал на едно място. А ако все пак обичате да започвате новите мисли няколко знака навътре, трябва да натиснете и задържите SHIFT+CTRL и тогава да натискате клавиша за интервал.
Хипервръзките или линковете, както още се назовават, са онези думички, върху които, като натиснете, отивате на друг HTML файл (друга страница). Връзки като "Цени", "Услуги", "Поддръжка" и т.н. най-вероятно фигурират на сайта на вашия доставчик. Те се създават много лесно - трябва само да маркирате с мишката думата или думите, които искате да станат връзки, да цъкнете веднъж в полето "Link" на "Property Inspector" и там да уточните къде искате посетителят да отиде, като натисне новата връзка. ВАЖНО! Ако искате да създадете връзка към вече съществуващ сайт в Интернет, а не към една от вашите HTML страници, трябва да укажете пълният адрес. Пример: www.pc-help.hit.bg е ГРЕШНО. Вярно е http://www.pc-help.hit.bg. Друг пример: ftp.microsoft.com е ГРЕШНО. Вярно е ftp://ftp.microsoft.com. Вдясно от полето "Link" виждате падащо меню "Target". То става активно, когато отидете върху някоя връзка, и указва къде ще се отвори тя при натискане. Възможен избор е _blank, _parent, _self, _top. Ако изберете _blank, тогава браузърът ще отвори нов прозорец, в който ще се зареди желаната връзка. _parent означава, че връзката ще се отвори в същия прозорец, в който е текущият документ. Другите правят почти същото, но при _parent, ако имате някакви фреймове, те биват заместени. Всъщност ако имате фреймове и създадете връзка в някой от тях, без да попълвате полето "Target", при натискане на връзката желаната страница ще замести само съответния фрейм. При _parent връзката се отваря, но преди това биват затворени всички фреймове и новият документ има на разположение целия прозорец на браузъра. В полето "Target" не винаги има тези четири възможности - там се изобразяват и имената на фреймовете, ако имате такива - примерно leftFrame, mainFrame и т.н. По този начин можете да зададете връзка, която е в левия ви фрейм, да се отвори в десния.
Май доста внимание отделих на фреймовете. За тях пак ще стане дума в следващите броеве... А сега идва ред на картинките. Ако вече сте ги подготвили, пристъпете към вмъкването им във вашия HTML документ. С мишката цъкнете на мястото, където желаете да се появи картинка. От менюто "Insert" изберете "Image" и от списъка с файлове, който се появява, цъкнете на желаната картинка два пъти... и хоп! тя бива вкарана в документа! Ако не харесвате мястото, където се е появила картинката, можете лесно да го смените, като хванете картинката с мишката и я провлачите някъде. Лесно е... <file>
На картинката е показана помощната лента "Property Inspector", когато сте маркирали някакво изображение. Повечето от полетата са незадължителни, но могат да послужат за по-прецизно определяне на заеманото от изображението място. В лявата част са полетата W и H, съответно съкращения от английските "Width" и "Height", в които можете да зададете заеманата от картинката големина в пиксели. Не е задължително тези стойности да са идентични с атрибутите на съответното изображение. Това позволява една съвсем малка по размер картинка да заеме по-голяма площ, като бъде разтеглена от Web браузъра след зареждане. Също можете да направите така, че картинка, която стандартно заема целия екран, да бъде изобразена в съвсем малък формат. Можете да ползвате тази възможност, ако правите фото архив, при който първо нужните снимки се показват в размер, по-малък от оригиналния, а при цъкане да се отваря същата картинка, но в по-голям размер. Вдясно от тези полета са на разположение още две - "Src" и "Link". В полето "Src" програмата автоматично попълва името на файла на съответната картинка, в някои случаи с нужната пътека до него. Трябва да се уверите, че пътеката (ако картинката не е в същата папка като HTML файла) е изписана спрямо местоположението на файла на Web страницата. Например, ако на desktop имате папка "sait", в която има папка "kartinki" и HTML файловете се помещават в папката "sait", вярната пътека до kartinka.gif в папката "kartinki" е "images/kartinka.gif". Грешен вариант е да зададете пътя до картинката така: "C:WindowsDesktopsaitkartinkikartinka.gif" - защото файлът "kartinka.gif" съществува на вашия компютър, но не и в този на посетителя.
Можете да създавате връзки под формата на картинки. Това позволява да си нарисувате бутончета, на които посетителят да цъка и да отива някъде - точно както при обикновените текстови връзки. За това служи полето "Link" в "Property Inspector" - след като вмъкнете картинка на страницата и я маркирате, ако искате тя да стане връзка към друга страница или сайт, просто попълвате желания адрес (или име на файл на HTML файл) в същото поле.
Понякога е удобно да разположите текста на страницата около картинка. Това е лесно и се постига, като изберете нужното подравнение за картинката в полето "Align" горе в дясно на "Property Inspector". Ако искате картинката да заеме дясната част на страницата, а текстът да е от лявата, изберете "Right". Ако предпочитате картинката да е от лявата страна, а текстът от дясната, изберете "Left". След като направите желаното подравнение за картинката, може да е нужно да я разместите (това е описано по-горе). Последното важи главно за големи по размер изображения като снимки, screenshot -ове и т.н. В полето "Alt", което е точно под "Align", напишете описание за картинката. То е съвсем произволно и се появява, когато посетителят задържи за малко мишката върху вашата картинка.
Сега ще обърнем внимание на елементите в долната част на "Property Inspector". Ако не ги виждате, натиснете малката стрелкичка долу в дясно (на "Property Inspector"). Първото, което ви отнема вниманието, е полето "Map" и отдолу три светлосини фигури. Тази рядко използвана възможност позволява на отделните части от една картинка да се зададат връзки към няколко HTML документа или външни сървъри. Често Web разработчиците слагат всичките си връзки в една голяма картинка и задават отделни връзки на нужните места на картинката. В зависимост от това дали искате да маркирате правоъгълник, кръг или произволен многоъгълник, цъкнете веднъж съответния инструмент в "Property Inspector" и задайте с мишката нужните координати на картинката.
Може би искате да има малко място между различните картинки и текста на страницата, ако често го разполагате около тях. За целта попълнете необходимите стойности в полетата "V Space" и "H Space". "V" означава "Vertical" и задава празно поле по вертикал, а "H" идва от "Horizontal" и определя празно поле по хоризонтална линия. В тези полета са позволени цели положителни числа, като "0" означава, че не желаете никакви полета.
Вдясно от тези две полета са разположени други две - "Target" и "Low src". "Target" е валидно само ако сте задали картинката да е връзка към друг документ или сървър и указва къде ще се отвори той. Функциите на това поле са разяснени малко по-горе, в частта за създаване на обикновени връзки.
Ако искате да сложите някаква голяма картинка в HTML документ, тя със сигурност би отнела доста време за зареждане при стандартни DIAL-UP условия. Това донякъде се улеснява от предлаганата възможност "Low src". Тук въвеждате името на файла (адреса) на малка по размер картинка, която се зарежда от браузъра преди основното изображение. Тази картинка може да бъде същата като основната, но с влошено качество за бързо зареждане или просто може да съдържа едно изречение от рода на "Картинката се зарежда, моля изчакайте".
Последната възможност, които предлага "Property Inspector" в най-десния долен край, е тази за задаване на дебелината на рамката около картинката. Тук задавате дебелината на рамката в числа, от които 1 е най-тънката възможна, а 0 означава отсъствие на такава. Бутонът "Edit", който се намира точно под полето за рамката, позволява бързо стартиране на вашия редактор на изображения, а "Reset size" възвръща оригиналната големина, която картинката заема в страницата. Това е особено полезно, ако сте опитвали да променяте големината на картинката чрез полетата "W" и "H" в горната лява част на "Property Inspector".
Щом вече сте стигнали дотук, трябва да можете да правите доста неща на Dreamweaver:
- да въвеждате текст;
- да прилагате големина и цвят на шрифта;
- да правите хипервръзки към други документи;
- да вмъквате картинки, да правите от картинките връзки .
100 WEB Съвета
01 Поставете линкове към любимите си сайтове
02 Поставете брояч, за да виждате броя на посещенията
03 Оптимизирайте графиките си за по-голяма скорост
04 Помислете за добавяне не звукови ефекти
05 Регистрирайте търсеща машина-това е безплатно!
06 Обмислете варианти на страницата на друг език
07 Не използвайте ненужни графики-те само забавят връзката
08 Обновявайте страницата си по-често
09 Проведете тестове за скорост, удобство и производителност
10 Бъдете възможно най-обективни в представянето на информация
11 Избягвайте мигащите изображения
12 Използвайте с мярка Java Script и други ефекти
13 Използвайте слоеве, те облекчават вашата страница
14 Разгледайте добрите web сайтове, поучете се от тях!
15 Не препълвайте сайта си с реклами
16 Обмислете структурата на менютата
17 Не разкарвайте потребителя по цялата страница за едно нещо
18 Фреймовете-преценете дали сте за или против
19 Следвайте правилата на общоприетия интерфейс
20 Не запълвайте страницата с ненужен текст
21 Използвайте рационално пространството си
22 Не забравяйте принципите на добрия дизайн
23 Използвайте алтернативния текст за повече ясност
24 Задължително тествайте с няколко различни браузъра
25 Обезателно използвайте таблици за форматиране
26 Обърнете внимание на разделителната способност
27 Оразмерете таблиците, или ги оставете да "плуват"
28 Оставете цветовете на връзките по подразбиране
29 Опитайте се да отпечатате страниците си
30 Помислете за потребителите с други операционни системи
31 Внимавайте с размерите и вида на шрифтовете
32 В никакъв случай не правете сайта да се скролира водоравно
33 Използвайте cascading style sheets (ccs)
34 Разрешете използването на различни стилове
35 Избягвайте многоцветните фонове
36 Внимавайте при използването на специфични ccs
37 Не правете изскачащи прозорци-те приличат на реклами
38 Не отваряйте в нови прозорци всяка страница
39 Направете заглавен екран (може би с избор на език)
40 Опитайте се да намерите по-бърз сървър за вашия сайт
41 Проверете ширината на вашата частотна лента
42 Почистете вашия HTML код-понякога има излишни тагове
43 Не включвайте лична информация в сайта си
44 Създайте интелигентни съобщения за грешка
45 В никакъв случай не местете страницата си на друг адрес
46 Определете размера на изображенията
47 Опитайте се да избегнете правописни грешки
48 Не използвайте "изглаждане" на шрифтове с размер <10
49 Цветовете на фона намаляват читаемостта
50 Не използвайте автоматично обновяване на страницата
51 Премахнете рамките на таблиците
52 Не използвайте излишен HTML код
53 Поддържайте имената на файловете си кратки
54 Внимавайте с кирилицата-понякога тя не се чете
55 Поставяйте copyrights на всяка ваша страница
56 Поставяйте коментари в HTML кода на страницата
57 Внимавайте с форматите на графиките
58 Сведете до минимум използването на кавички в HTML кода
59 Използвайте кратките версии на HTML командите
60 Използвайте отместване на параграф
61 Защо да не добавите интерактивно съдържание спомощтана Flash?
62 Под всеки линк, който води към голяма страница, сложете големината й
63 Не използвайте видео клипове в страницата си, освен на Flash
64 Купете си книги, свързани с web и компютрите
65 Не се доверявайте на реклами от рода на "сложете този банер на сайта си и ще получите 10 $"
66 Опитайте се да убедите потребителя, че вашата страница е за неговите нужди
67 Не използвайте огромни и трудни менюта
68 Обмислете точно съдържанието на страницата
69 Не използвайте чужди думи, без да напишете обяснението им
70 Подредете изображенията с таблици
71 Не оставяйте интерфейса на страницата ви скучен
72 Добавяйте нови, интересни неща по-често
73 Помислете и за потребителите, които са начинаещи
74 Внимавайте и проверявайте линковете си
75 Използвайте таблици за оцветяване на отделни части
76 Внимавайте със запазените фирмени имена и правата за използването им
77 За обработка на изображенията използвайте Photoshop
78 Не пишете с огромни или с много малки букви
79 Внимавайте с шрифтовете, предназначени за кирилица
80 Не поставяйте ярки цветове за фон
81 Предупреждавайте при преместване на нов адрес
82 Възползвайте се от възможностите на HTML редакторите
83 Внимавайте с цветовете и цветовата схема
84 Използвайте т.нар." web-safe" цветове
85 Не слагайте много информация на една страница
86 Разделете страниците си тематично
87 Отваряйте връзките към другите сайтове в същата страница
88 Внимавайте със специалните знаци и международните означения
89 Не задавайте дълги имена на директориите си
90 Не използвайте други символи освен цифри и букви в имената на файловете си
91 Регистрирайте страницата си в търсещите машини
92 Сложете линкове към най-известните сайтове в бранша
93 Слагайте своя е-mail адрес на всички copyrights
94 Не използвайте бутони с много позиции
95 Пробвайте различни разположения на информацията в страницата
96 Попитайте вашите приятели за мнението им
97 Консултирайте се с хора, занимаващи се по темата
98 Гледайте адреса на страницата ви да не е много дълъг и труден за запомняне
99 Използвайте SSI (server side includes)
100 KISS (Keep It Simple Stupid) придържайте се към простото и глупавото
Малко думи за XML
С тази статия ще се помъча да обясня простичко важността на езика, неговите недостатъци, връзката му със SGML и какво XML добавя към SGML и HTML.
Какво е XML?
XML беше създаден, за да може структурирани елементи да бъдат видими през Интернет. Дотогава съществуващите езици SGML и HTML не бяха полезни за такива цели.
А именно какви са недостатъците на HTML в горната ситуация.
HTML е дизайниран за показване на текст във браузер. Той е "прост" език, базиран на определени елементи, наречени тагове:
Например:
<html>
<head>
</head>
<body>
</body>
</html>
Toчно тази му леснота го направи толкова популярен и то за доста кратко време. HTML-таговете са предварително дефинирани и не можете да напишете собствени тагове или да предефинирате някои от вече създадените. Друг недостатък е, че в езика няма никаква Обектна ориентираност, например, ако сменим някой файл трябва да минаваме по целия код и да оправяме всички връзки (links), които водят към него.
SGML
SGML(Standard Generalized Markup Language), от който всъщност е създаден XML, е "роден" от нуждата да има някакъв контейнер за данни, напълно независим от софтуер или производител. SGML също е Meta език; можете спокойно да направите извода, че SGML е език за дефиниране на други Markup езици, той е много мощен, но е комерсиален и доста скъп.
Защо XML трябва да се използва?
Ето няколко основни качества на езика :
1. XML може да бъде използван с вече съществуващите интернет-протоколи
2. Поддържа се от много приложения
3. Съвместим е с SGML и повечето SGML приложения могат да бъдат конвертирани до XML.
4. XML е лесен и за хора, които не се занимават с програмиране, лесен за създаване и разлика от HTML не трябва да учиш тагове, а можеш да си създаваш свои собствени.
Ето, сега да се захващаме да създадем един XML файл. Отворете любимия си текстов редактор и напишете следното:
<xml>
<home>
<head>
<title>
WebDevMagazine Home Page
</title>
</head>
<body>
<main>
Welcome to WebDevMagazine
</main>
<imptext>
<text>
<para>
XML Tutorial
</para>
</text>
</body>
<home>
Вече създадохте първия си XML документ, но нека да видим елементите му и да ги обясним .
[1] <xml>, е XML декларация, която определя, че ще следва XML код, не е задължителна, но е добре ако я има във вашите документи.
[2] <home> e началото на главния елемент. Всеки XML документ трябва да има един главен елемент documents. Елементът </home> определя края на главния елемент. Много е важно отварящият таг и затварящият да са със едно и също име
<home>
.....
</home>
а не
<homepage>
...
</home>
[3] <imptext> е празен елемент и използва специален таг, наречен празен (empty), като синтаксисът му трябва да е с "/>" накрая и да изглежда така:
<imptext> а не <imptext>
Такъв таг няма нужда от затварящ елемент:
Това е грешно:
<imptext>
...
</imptext>
[4] <banner> е също вид празен елемент, но е със атрибут, който сочи към някакъв външен файл, което в случая е графика.
Могат да се ползват и двата варианта:
<banner> или
<banner></banner>
[5] <head>, <title> и т.н са с атрибути със синтаксис, като са дефинирани
<element>
Един атрибут може да бъде определен само в един таг
<medicine>
Въпреки привидната свобода, която ви дава синтаксисът на езика, трябва да се спазват някои правила:
• В главата на документа се намира декларация на XML, в която се указва езикът, версията му и друга допълнителна информация.
• Всеки отварящ таг, определящ някаква област, задължително трябва да има затварящ (вижте и нещата, описани по-горе за самия синтаксис).
• Всички значения на атрибутите трябва да са в кавички.
• Трябва да се следи за последователността на отварящите и затварящите тагове.
• Всяка информация между начален и краен таг се приема като данни и се вземат под внимание всички символи на форматирането (т.е. паузи, пренос на нов ред, табулации...) и все пак има начин, заключеното между два тага, да се приема само като текст - за това служи : CDATA
CDATA
За да се зададе област от документа, която при обработката на XML документа, ще бъде разглеждана като обикновен текст, игнорирайки всякакви инструкции и специални символи, е необходимо да се използва тага CDATA <CDATA>. Вътре в него можете да пишете всичко, дори и JavaScript, но е важно да се забележи че краят на тага е "]]".
Разбира се че, ако искате да се занимавате по-подробно с езика, ще ви е нужна много повече информация за него, синтаксиса му както и много други неща.
I. Прозорци и подредба
Стартирайте програмата, като щракнете един (два) пъти върху иконката й. Когато се зареди, натиснете менюто window, за да изкарате нужните ни прозорци. Те са: Insert, Properties, Assets, Behavoirs. Натиснете малката стрелкичка долу вдясно на прозореца Properties, за да се разтвори целият.
Можете да местите прозорците като натиснете с курсора синята лента отгоре, задържите бутона на мишката и влачите. Размерите се променят както и на прозорците в Windows.
Препоръчвам ви да ги подредите заедно с прозореца Insert на удобно място, защото ще ги използвате много често.
Също така може и да създавате свои собствени менюта, като влачите определени части от едни прозорци и ги пускате върху други.
Трябва да настроите работния екран - той трябва да бъде съобразен и с хората, с по - малки монитори. За да направите това, щракнете върху стрелкичката а window size долу на работния ви екран и изберете 760 X 420 (800 X 600 maximized).
Забележка: За да получите HTML кода в комбинация със страницата натиснете средния от трите бутона под главните менюта.
II. Мястото на вашият сайт
Следващото нещо, което трябва да направите е да създадете нова папка за вашият сайт (например my_site). Там ще се съдържат всички компоненти от вашата страница. В тази папка създайте още 2 папки - images (изображения) и аrchive (архив). Препоръчвам ви да задавате имената, които ви посочвам, защото те се използват под подразбиране и са въведени като стандарт. В папката my_site ще се съдържат всички документи, създадени впоследствие. В images ще поставяме изображенията, използвани в сайта. Добре е да архивирате документите си от време на време, за да можете да възстановите страниците до предишното им състояние, ако има нужда от това.
III. Дефиниране на сайт
Много важно и удобно е да дефинирате сайта си. От този прозорец може да отваряте страниците, може да ги преименувате без да се разкъсват връзките, да ги триете и др. За да направите това, отворете менюто Site, и изберете Site files или натиснете F8. В отворилия се прозорец в падащото меню Site изберете Define sites ще се отвори нов малък прозорец за дефинираните вече сайтове. Можете да изтриете сайтовете, дефинирани от Macromedia, като ги маркирате и натиснете бутона Delete. След това натиснете бутона New, за да създадете вашия site map. Въведете данните, както е показано на картинката по - долу. Отметнете полетата Refresh local site files automatically и Enable cachse и натиснете ок. Ще бъдете уведомени за създаването на кеш и след като натиснете ок всичко е готово.Можете да отваряте страниците от сайта си като натискате два пъти имената им. Можете да ги преименувате, като дадете десен бутон върху името и натиснете rename от падащото меню. След като въведете новото име и натиснете enter ще се появи съобщение, което ви пита дали да запази линковете към тази страница. Можете да натиснете yes или no.
IV. Имената на страниците
Препоръки:
• Не назовавайте страниците на кирилица
• Не използвайте главни букви в имената на страниците
• Старайте се да използвате къси имена
• Вместо интервали използвайте долни тирета
• Не използвайте непозволени знаци
• Не може да има две страници с еднакви имена
V. Първа страница
Стартирайте Dreamweaver. Както виждате, няма нужда да давате нова страница, защото тя вече е пред вас. Първо трябва да запазите страницата си. Отворете менюто file и натиснете save as или control+shift+s. Ще се появи прозорец като показания отстрани. Във полето за текст file name напишете името на страницата, щракнете save и готово! Следващият път, когато искате да запазите промените на тази страница достатъчно е да натиснете control+s. Ако използвате фреймове (фреймовете са обяснени в някои от следващите уроци) се налага по - различен начин на запазване. Примерно, създали сте страница с главен фрейм и ляв фрейм. Щраквате с левия бутон някъде във левия фрейм, след това давате file, save frame as и за име пишете примерно left. По същия начин щраквате и във главния фрейм и го запазвате под името main. След като запазите всички фреймове поотделно е време да запазите цялата страница. Отворете менюто file, дайте върху save all frames и напишете името index (ако страницата е главна). След това запазете промените. Следващият път, когато искате да запазите промените във всички фреймове, дайте само save all frames.
VI. Работа с текст
Едно от предимствата на тази програма е това, че можете да въвеждате текста направо в прозореца, без да е необходимо друга намеса на менюта и прозорци. Просто щраквате с мишката реда, на който искате да въведете текста и вече сте готови да пишете. Ако искате да пишете на кирилица обаче, трябва да смените document encoding, което се прави по следния начин: десен бутон в празна област от пространството на страницата, page properties и в полето document encoding избирате Cyrilic (Windows - 1251). По подразбиране document encoding е Western (Latin 1) и ако не възнамерявате да въвеждате текст на кирилица не го променяйте.
След като сте въвели някакъв текст е време да промените някои от параметрите му. Това става чрез прозореца Properties. За да изпълните даден ефект върху текст вие трябва да маркирате този текст и след това да задавате промените. Ще опиша поред функциите на прозореца Properties при маркиран текст.
От падащото меню format може да изберете някои готови ефекти за текст. От менюто до него пък избирате шрифта. В полето линк може да напишете адреса към друга страница или да натиснете жълтата папчица за да покажете файла ръчно (ако той се намира на вашият твърд диск, а не е страница в Интернет или пощенски адрес). В полето size може да въведете исканата от вас големина или да я изберете от падащото меню. Бутонът B служи за удебеляване на текста, а I за накланянето му. Трите бутона до тях служат за центриране на текста спрямо лявата, средната или дясната част на страницата. Отдолу има два бутона - един с цифрички и един с точки. Те служат да т. нар. bullets and numbering. Бутоните до тях служат за изместване на текста една позиция наляво или надясно.
Отметката в полето no wrap оставя текста да си върви безкрайно в един ред, а header го центрира и удебелява. Може да изберете картинка за фон на таблицата, като въведете адреса й в полето Bg. Може и да изберете цвят на рамките от полето Brdr. За да смените цвета на цялата таблица използвайте полето Bg, намиращо се до полето Header.
VII. Работа с изображения
Вмъкването и използването на изображения също е много лесно в Dreamweaver. Достатъчно е да цъкнете някъде в листа и да натиснете бутона insert image от прозореца objects. След това е необходимо да посочите картинката, която желаете да вмъкнете в документа. Важно!: ако преместите изображението в друга папка Dreamweaver няма да може да го намери сам, и на негово място ще се появи какртинка на скъсано листче със сив фон. За да му покажете, къде се намира изображението, цъкнете два пъти върху него и го изберете. Това е! Изображенията могат да се центрират по същия начин, както и текста. В менюто Properties може да задавате отстояния около картинките - това става в полето V Space & H Space. В полето Alt може да зададете текст, който ще се появи, когато потребителят посочи картинката.
VIII. Дефиниране на друг браузър
Хубаво е да дефинирате допълнителен браузър, за да можете да действате, как ще изглежда вашия сайт при потребителите, които го ползват. Това става много просто: от менюто File избирате Preview in Browser и Edit Browser List. По подразбиране би трябвало да имате Internet Explorer като Primary Browser. За да добавите друг, натиснете бутона с плюсчето отгоре. Отметнете полето Secondary Browser и натиснете бутона Browse, за да покажете на Dreamwever, къде е инсталиран вашия браузър. Това е. Можете да видите как изглежда сайта ви във Primary Browser (като натиснете F12) или във Secondary (като натиснете ctrl+F12).
Така например, някои java скриптове или други подобни не са съвместими с някои браузъри - това е начина да проверите дали използваните от вас кодове работят правилно.
IX. Работа с таблици
Бутонът за вмъкване на таблици се намира в панела Objects, точно под бутона за изображения. Когато го натиснете се появява прозорец, в който може да зададете някои от характеристиките на таблицата, която вмъквате.
• Rows - броя на редовете в таблицата
• Columns - броя на колоните в таблицата
• Width - широчина на таблицата (по подразбиране е в проценти от широчината на прозореца, може и в пиксели)
• Border - дебелината на рамката на таблицата в пиксели
• Cell Padding & Cell Spacing - разстоянията между отделните клетки на таблицата (може да го настроите после)
След като натиснете ОК таблицата ще се появи в страницата. Ще ви опиша как изглежда прозореца Properties при селектирана таблица.
Можете да промените броя на редовете или колоните като напишете други числа в полетата Rows (редове) или Cols (колони). Също така може да промените и широчината и височината на таблицата, като въведете съответните числа в полетета W (широчина) и H (височина). От падащите менюта до тях можете да изберете, дали да бъде в пиксели, или в проценти от големината на прозореца. В полетата Cell Pad и Cell Space можете да въведете отстоянието на клетките в таблицата една от друга. От падащото меню Align може да изберете центрирането на таблицата. Бутоните Clear Cell Rows и Clear Cell Highs служат за изчистване на празното пространство около съдържанието на таблицата. Бутоните под тях обръщат стойностите за големината на таблицата от пиксели в проценти и обратно. От падащото поле Bg Color може да изберете цвета на пространството в таблицата, а от Brdr Color - цвета на рамката. В полето Bg Image можете да въведете адреса (или да посочите, като цъкнете върху жълтата папка) на файл, който да бъде като background на таблицата.
Можете да създавате различни по форма таблици.
За да съедините няколко клетки, маркирайте ги, като цъкнете в едната и влачите нагоре или надолу, наляво или надясно. След това натиснете бутона Merge selected cells using spams, който се намира в прозореца Properties.
За да разцепите една клетка на повече, маркирайте я и натиснете бутона, който се намира до гореописания. Въведете броя на колоните или редовете (в зависимост от това, кое поле е маркирано) и готово!
X. Работа с фреймове
Не търсете бутон Insert Frame в менюто Objects, просто защото няма да го намерите. Фреймовете се слагат от менюто Insert. От там избирате Frames, и след това вида на фрейма.
Изброени са 8 вида възможни фреймове и комбинации. Можете да оцветявате всеки фрейм по ваше желание, както оцветявате и обикновена страница. Всъщност, представете си, че един фрейм просто разделя страницата на две независими една от друга страници, които могат да бъдат с различни имена, цветове и съдържание.
XI. Работа с прозореца (менюто) Insert
След прозореца Properties, това е най - използваното меню в тази програма, особено второто му състояние. Това меню има общо 7 различни състояние, които се променят от падащото меню в горната му част. По подразбиране обикновено е видимо второто му състояние - common. Но аз ще започна описанието си от първото му състояние.
1. Characters - при това състояние на менюто можете да въвеждате някои видове знаци, недостъпни за писане от клавиатурата. По ред на разположение те са: copyright, registered trademark, trademark, Pound, Yen, Euro, Left & Right Quote, Em - Dash, а последния бутон служи за отваряне на прозорец, в който имате още по - голям избор на знаци. Този бутон служи за преместване на следващия ред, но не е еквивалентно на натискането на бутона Enter. като се прескача не един, а половин ред. Другия бутон служи горе - долу като Tab.
2. Common - това е най - използваното състояние на този прозорец. В него има 16 бутона. Бутона insert image е ясно за какво служи, но за тези, които са пропуснали предишните статии ще кажа, че той се използва за вмъкване на изображения. Бутона до него служи за вмъкване на т.нар. rollover изображения, които се променят, когато ги посочите. Следващият бутон, insert table служи за вмъкване на таблици и е обяснен в предишните статии. Insert tabular data служи за insertva - не на данни в таблица. Бутона Draw layer служи за рисуване на слоеве (layers), а с помощта на бутона до него може да създадете цяло меню с rollover изображения за бутони. Insert horizontal rule вмъква хоризонтална черта, като може да регулирате дължината й от прозореца Properties. Ако искате да сложите e - mail адрес във вашия сайт, бутона insert e - mail link ще ви помогне за това . Insert date ще слага автоматично датата и часа на последна промяна на документа. До него седи бутона insert server - side include, който служи за вмъкване на управление от страна на сървъра. Insert fireworks html служи за вмъкване на html файл, който е създаден от програмата Fireworks. Бутона пък до него служи за вмъкване на Flash клип (съдържание). Insert Flash button служи за директно вмъкване на Flash бутон, а с бутона до него можете да пишете Flash текст директно в документа. Insert Shockwave служи за вмъкване на съответната медия , а insert Generator служи за вмъкване на файлове на Generator.
3. Forms - тази позиция съдържа 10 бутона с различни функции. Бутона insert form служи за вмъкване на форма. Бутона Insert text field слага поле за въвеждане на текст, което автоматично се разполага във форма. Insert button е ясен - слага бутон. Insert checkbox слага кутия за отмятане, която също се разполага автоматично във форма. Insert radio button е същото като горното, но бутона е кръгъл. Insert list/menu създава падащо меню, а insert file field дава възможност да се вмъкне поле, в което може да бъде посочен файл. Следващия бутон създава поле - изображение, а бутона на следващия ред задава скрита информация. Последния бутон създава падащо меню.
4. Frames - От тук можете да слагате рамки (фреймове) във вашия документ.
5. Head - В това състояние са достъпни 6 бутона: insert meta, insert keywords, insert description, insert refresh, insert base и insert link.
6. Invisibles - Тук можете да видите 3 бутона: insert named anchor, insert script, insert comment. Първият служи за поставяне на котви, които са много полезни, втория служи за вмъкване на скриптове, а третия - за слагане на коментари в кода на страницата.
7. Special - Tук отново има 3 бутона: insert applet, insert plugin, insert activeX. Първият вмъква посочения от вас аплет в документа. Следващия служи за добавяне на plug - in към вашия браузър, най - често за Netscape (които между другото се отказаха от разработките на браузъри). Третия служи за добавяне на Microsoft ActiveX приложения.
Отдолу на менюто (във всяко негово състояние) има още 4 бутона. С бутона View можете да сменяте начина на изглед на таблиците, което доста затормозява системата. Затова по - добре използвайте стандартния изглед.
XII. Работа с форми
Обикновено формите се използват за събиране на информация от потребителя. Там можете да въведете името си, местоживеене и др. Например, когато регистрирате e - mail вие попълвате такава форма. Данните, които вие попълвате в тази форма се изпращат към програма за обработка на форми - обикновено GGI скрипт. Формите са достъпни от прозореца Insert на Dreamweaver, раздел Forms. За да създадете форма, просто трябва да натиснете бутона Insert form. Формата, която създавате, по подразбиране е 100% от широчината на страницата и изглежда като правоъгълник с прекъснати червени контури. Добавяне на обекти във формата - останалите 5 бутона от прозореца Insert са обекти за добавяне във формата:
1. Текстови полета - могат да бъдат едноредови или многоредови. Ако текста е голям, по - добре използвайте многоредови полета.
За да въведете текстово поле, натиснете бутон Text Field. Ще се появи едноредово текстово поле. За да промените размерите му, въведете число в полето Char Width в прозореца Properties. Moжете да зададете информацията в полето да изглежда като парола (тоест като звездички, вместо като текст), като го маркирате и в прозореца Properties отметнете радиобутона Password. Ако искате полето да е многоредово, изберете бутона Multi Line. Можете да зададете някакъв текст, който винаги да се зарежда в полето, като го впишете в полето Init Val.
2. Button – бутони - мисля, че всеки знае за какво служат те.
3. Checkbox – Полета за маркиране - позволяват на потребителя да избира няколко бутона от цялата група. За да вмъкнете поле за маркиране, трябва да натиснете бутон Checkbox. Трябва да зададете име и стойност на всяко едно поле.
Това става в прозореца Properties. В полето Checked value въведете текста, който искате да използвате, ако потребителя маркира полето. В полето checkbox може да напишете име на полето за маркиране. Имената и стойностите трябва да са различни.
4. Radio Button – Радиобутони - винаги се използват в група. Потребителя може да избере само едни бутон от цялата група. Те се вмъкват с бутона. Името на всички бутони от една група трябва да е едно и също. Името за групата радиобутони се въвежда в текстовото поле Radio Button.Стойността на избрания бутон се въвежда в полето Checked Value. Стойностите за всеки бутон трябва да са различни!
5. List/Menu – Списъци и менюта - менютата се наричат още и падащи менюта. Добър избор за страници с малко място на разположение и много неща за избиране. В някои случаи може да бъде избран повече от един елемент. Вмъкват се с бутона Insert List/Menu. За да запълните менюто с елемнти направете следното: След като сте избрали менюто, в прозореца properties щракнете бутона List Values. Там можете да въведете текста, който да се съдържа в менюто. Ако искате, можете вместо падащо меню да направите скролиращо се. За целта в прозореца Properties трябва да отметнете полето лист. Ако отметнете и полето Selections - Allow multiple, потребителя ще може да избира повече от един брой данни.
6. File field – Файлови показатели - от тук потребителя може да задава адреси до определен файл. За да добавите тази възможност, натиснете бутона Insert file field.
7. Hidden Field – Скрити форми - Помагат за предаване на скрита информация.
8. Jump menu – Създават се от бутона Insert jump menu. Те директно препращат към адреса, на който съответства избора.
XIII. Работа със стилови множества ( CSS )
Стиловите множества (CSS - Cascade Style Sheets) се използват преди всичко за форматиране на текст, въпреки, че накои атрибути се използват за форматиране на изображения и други обекти. Съществуват четири вида стилове, които можете да използвате:
1. Предефиниране на HTML документ - Елементът, който предефинирате се нарича селектор. Характеристиките и атрибутите на стила, намиращи се между {вълнообразните скоби} се наричат стилови дефиниции.
2. Клас - В този случай дефинирането се използва върху текстов блок.
Можете да съхраните Вашите CSS като HTML код. От менюто File изберете Convert - > 3.0 Browser Compatible. Маркирайте бутона CSS Styles to HTML Markup. След като щракнете върху ОК, Dreamweaver ще отвори страницата в нов прозорец. Третият и четвъртият стилове на т.нар. свързани или внесени стилови множества, което представлява отделен документ, описващ вашите стилове.
Създаване на стилове – меню Behaviors, New Style. За тези действия ще трябва задължително да преминете през един от двата прозореца: Edit Style Sheet или New Style Sheet. И така, има осем категории стилове, които можете да приложите към текст.
• Печатни - служат за форматирането на текста, настройка на вида на шрифта, големината му, цвета, стила му.
• Фонови - могат да се приложат както към текстов блок, така и към цялата страница. Те са например фонов цвят, изображение и др.
• Блокови - те контролират положението на текста - подравняване, отместване и др.
• Рамкови - прилагат се към "рамката", която обгражда блоков елемент.
• Гранични - дават възможност рамката около блоковия лемент да се изобразява нормално.
• Списъчни - управляват форматирането на текстове, в които са използвани например bullets.
• Позициониращи - позволяват да определите положението на елементите върху страницата.
• Разширения - засега те не се поддържат от текущите браузъри.
Повече за печатните атрибути на CSS
Oт падащото меню Font в раздела Type на прозореца Style definition можете да изберете шрифта на текста. От полето Size избирате големината, а в Style можете да изберете, дали върху текста ще се прилагат ефекти (болд, наклонен). От полето Line height можете да променяте височината на всеки ред от текстовия блок. Стандартната височина на реда при размер на шрифта 12 точки е 16 точки. От полетата за отмятане можете да контролирате други ефекти за текста - според реда на разположение: подчертаване, надчертаване, зачертаване, мигане и без ефект. От Weight фактически можете да контролирате дебелината на болд - а. От Case можете да зададете, дали текста да е с малки, големи или комбинирани букви. Мисля, че на всеки е ясно за какво се използва color?
Повече за фоновите атрибути на CSS
С помощта на фоновите атрибути можете да променяте фоновия цвят на текстов блок, или да използвате готово изображение. Това става от първите два реда на прозореца Style definition - Background color и Background Image.Когато прилагате такъв ефект към текстов блок, неговия Background ще бъде с един "слой" по - напред от цвета/изображението, т.е. той ще закрива част от задния "слой" (който е работил с програми за графика ще ме разбере най - добре по въпроса за слоевете smile. От падащото меню Repeat можете да зададете дали изображението (ако има такова) да се повтаря и как точно:
• No - repeat - не позволява на изображението да се изрисува повече от един път.
• Repeat - ще повтаря изображението, за да попълни цялата страница.
• Repeat - X - повтаря изображението по оста X (хоризонтално).
• Repeat - Y - повтаря изображението по оста Y (вертикално).
• Attachment - закотвя неподвижно фоновото изображение, така, че като превъртате страницата, съдържанието й ще "плува" над фона.
• Horizontal & Vertical position - можете да позиционирате фоновото изображение според някакъв обект.
Повече за блоковите атрибути на CSS
Както бе споменато, блоковите атрибути контролират положението на текста - подравняване, отместване и др. Te включват: Word spacing - можете да променяте разстоянието между думите, като въвеждате положителни или отрицателни стойности. Letter Spacing е същото, но важи за отделните букви. От падащите менюта да тях можете да сменяте мерните единици. Vertical Alignment позиционира маркираното съдържание по вертикалната ос Y. Text Align позволява да подравнявате текста по нормалния начин (ляво, дясно, среда) или и от двете страни. Text Indient действа подобно на клавиша Tab от клавиатурата. Whitespace контролира използването на space между думите и буквите в текста:
• Normal - игнорира допълнителните интервали
• Pre - запазва употребата на интервали и текстово базирани прекъсвания
• Nowrap - позволява на реда да се прекъсне само ако е използван елемента
Повече за рамковите атрибути на CSS
От полетата Height и Width можете да контролирате съответно широчината и височината на рамката, като от падащите менюта отстрани можете да изберете желаната мерна единица. Float поставя селекцията в съответно дясната или лявата част. Clear определя поведението на другите елементи спрямо селекцията. От падащото меню можете да изберете: both - обектите не могат да се разполагат около границите на селекцията; none - може да се заемат границите; left и right забранява разполагането в съответната граница. Padding е като при таблиците - разстоянието между селекцията и неговата рамка, като можете да задавате това разстояние за всяка страна поотделно. И Margins задава местоположението на границите около рамката.
Повече за списъчните атрибути на CSS
От падащото меню Type можете да изберете доста видове списъци, които идват по подразбиране с Dreamweaver. От падащото меню bullet image пък можете да изберете предлаганите от програмата "куршумчета" или да използвате свои. И последното падащо меню контролира положението на текста при пренасяне на нов ред.
Повече за разширенията на CSS
Първото разширение ви позволява да слагате край и начало на страницата, за да може тя да се отпечатва нормално на принтер. Cursor - можете да настройвате как да изглежда курсора, когято се намира над различни стилове. Filter можете да избирате различни филтри, стига те да се поддържат от браузърите.
HTML Tагове
Създава коментар в страницата който може да се вижда само в HTML кода
<a> Създава линк към друга страница, елемент, или към част от страницата
<a> Създава линк към някоя точка от същата страница
<address> Определя сигнатура или адрес в страница
<applet> Начало на java аплет
<area> Дефинира петно от карта на изображение, което служи като препратка.
<audioscope> Дефинира визия за графично представяне за звук когато се гледа телевизия през интернет
Кара текста в тага да е с удебелен шрифт
<base> Дефинира базовия URL адрес вътре в кода на страницата
<basefont> Дефинира размер, цвят и font за цялата страница. Базов шрифт
<bgsound> Добавя фонова музика на страница, записана, примерно в midi или wav файл.
<big> Кара текста да стане по-голям от базовият с една единица.
<blackface> Увеличава текста двойно за телевизия по интернет.
<blink> Кара текста който е в тага да премигва.
<blockquote> Отмества надясно блок от текст.
<body> Дефинира фон на страницата, размер и цвят на текст,линк, посетен линк. Общото предназначение е да дефинира тялото "<body>" на страницата, в което е това което трябва да се вижда.
<bq> Отмества блок от текст надясно, но се ползва само във WebTV.
Прекъсва текущия ред. Текста или картинките, примерно, се показват на следващия.
<caption> Създава заглавие на таблица.
<center> Центрира група от текст или графики.
<cite> Прави пасаж от текст на курсив.
<code> Форматира текст със шрифт с фиксирано разстояние между символите.
<comment> Слага коментари в HTML страница и ги скрива.
<dd> Отмества текста навътре ако е изплозван в <dl> таг.
<dfn> Дефинира термин(тема).
<dir> Създава малък списък от неща в единична колона.
<div> Представя различни секции от текст. Контейнер за други HTML елементи. Дефинира слой в зависимост от стиловото му поле.
<dl> Показва списък от термини и дефиниции.
<dt> Дефинира термин(тема) в <dl> списък.
[i] Показва пасаж текст с курсив(наклонен обикновено).
<embed> Вмъква обект в страницата. Примерно звуков файл или .AVI филмче.
<fn> Създава именувано място в страницата или линк както прави <a> тага.
<font> Сменя големината, цветя и шрифта за заградения текст. Дефинира атрибути на шрифта.
<form> Дефинира страница или пасаж текст, които ще бъдат форма за въвеждане на данни.
<frame> Дефинира фрейм <frameset> таг.
<frameset> Дефинира атрибути на страница, която ще използва фреймове.
<h1> ... <h6> Показва текста като заглавие с по-големи букви .
<head> Дефинира заглавната част на документ.
<hr> Създава хоризонтална линия.
<html> Специфицира че документа съдържа HTML.
Показва текста в курсив (наклонен надясно).
<img> Вмъква изображение, изображение карта или анимация.
<input> Дефинира входно поле във форма.
<isindex> Създава заявка за индексиране.
<kbd> Показва текста с шрифт с фиксирана ширина.
Създава подточка или нова линия, когато се използва в <dir>, <menu>, [list=1] и <ul> таговете.
<limittext> Указва максималната ширина на текста, когато се ползва за WebTV.
<link> Създва организация за навигация на серия документи . Вмъква скрипт файлове или стилови полета.
<listing> Преформатира блоковете текст в листинг, за да бъдат показани с шрифт с фиксирана ширина.
<map> Дефинира карта за изображение, която работи от страната на клиента.
<marquee> Създава линия скролиращ текст, ако се гледа с MS Internet Explorer.
<menu> Създава списък.
<nobr> Предотвратява прекъсването на редовете в текст или серия картинки.
<noframes> Дефинира съдържание, което ще се види, ако потребителя има браузър, който не поддържа фреймове.
[list=1] Дефинира начало и край на списък. Подреден.
<option> Създава списък от точки, които потребителя може да избира.
Дефинира началото и края на параграф.
<plaintext> Показва текст с шрифт с фиксирана ширина.
Преформатира блокове текст с шрифт с фиксирана ширина. .
<s> Показва текста задраскан с линия в средата.
<samp> Показва текст с шрифт с фиксирана ширина.
<script> Дефинира началото и края на скрипт (JavaScript ili VBScript).
<select> Създава списък от точки, които потребителя може да избира.
<server> Друг начин за правене на анимация от сървъра.
<small> Показва текста с 1 по малък от този по подразбиране.
<strike> Показва текста задраскан с линия в средата.
[b] Показва текста с удебелен шрифт.
<sub> Показва текста в субскрипт. (умален и долу, като индекс)
<sup> Показва текста в суперскрипт.(умален и горе, като степен)
<table> Създава таблица.
<td> Дефинира клетка в таблица.
<textarea> Създава текстово поле.
<th> Дефинира заглавие на таблица.
<title> Дефинира заглавие на страница.
<tr> Дефинира ред в таблица.
<tt> Показва текст с шрифт с фиксирана ширина.
Пказва текста подчертан
<ul> Показва неномериран списък
<var> Показва текста в курсив(наклонене надясно).
<xmp> Показва текст с шрифт с фиксирана ширина.
Основни принципи при изграждането на Web сайт.
Въвеждане, оформяне на текста, хипервръзки, картинки
Създаването на сайт с програмата Macromedia Dreamweaver далеч не започва със стартирането й. Преди да преминете към обработката на информацията с Dreamweaver, трябва първо да я създадете с помощта на други програми и средства.
Първият етап от създаването на сайт протича "на белия лист". Нарисувайте с молив схематичен образ на бъдещия сайт. Преценете кой шрифт ще използвате, какви картинки; в каква форма ще бъдат връзките (текстови или с картинки) към отделните страници. Ако възнамерявате да използвате готови елементи от друг сайт, свържете се със създателя на сайта го помолете за разрешение. Направете една папка (директория) и в нея записвайте файловете на бъдещия сайт. За предпочитане е всички файлове, който ще използвате да са в една папка.
Добре е да разполагате със скенер, особено ако имате дарба да рисувате. Така ще можете да си нарисувате логото на сайта, картинката за фон и дори отделните бутони. След като сканирате необходимите елементи, обработете ги малко с любимата си програма за редактиране на изображения. Добър избор е Adobe Photoshop (www.adobe.com). Средството Paint Shop Pro (www.jasc.com) също препоръчвам на сега започващите. Аз дори ползвам и Microsoft Paintbrush от стария Windows 3.1...
Не прекалявайте с картинките и ефектите, те ще размият акцента в сайта. Използвайте горните програми, за да намалите обема на изображенията до минимум. Ако възнамерявате да си сложите снимката, използвайте формата JPEG (.jpg). JPEG форматът е подходящ за изображения, които си служат с много цветове. За отделните бутончета вършат работа форматите GIF или PNG. (.gif, .png). Тях използвайте и за изображения, които съдържат малък брой цветове - например ако правите screenshot на диалогов прозорец в Windows. Форматът PNG изготвя по-малки файлове от GIF, но понякога има несъвместимости между PNG и отделните браузъри. Но какъвто и да е форматът на файла, стремете се да намалите големината му колкото се може повече.
Не използвайте много различни шрифтове в сайта. Изберете си една комбинация между шрифт, стил и големина и я използвайте във всяка една от страниците. Съчетайте добре и цветовете. Можете да въведете текста на отделните страници първо в Word и след като разучите Macromedia Dreamweaver, да създадете HTML файловете. ЗАБЕЛЕЖКА: Word също има възможности за запазване в HTML формат, но НИКОГА не ги използвайте. Тази възможност в Word е направена така, че полученият HTML файл става много голям и пълен с различни ненужни инструкции, само и само да стане максимално несъвместим с другите браузъри освен Internet Explorer.
<file> Въвеждането и форматирането на текст в Dreamweaver има своите особености, с които трябва да се съобразите за пълноценна работа.
Уверете се, че т.нар. "Property Inspector" е видим във всеки един момент от работата. Ако не е, включете го, като от менюто "Window" изберете "Properties". Това е лента с инструменти, която променя своето съдържание в зависимост от това какъв вид обект е избран. Докато въвеждате и форматирате текст, би следвало тази лента да изглежда по показания на картинката начин. На нея е показано и какво правят съответните елементи. За да приложите форматиране върху част от текста, първо я маркирайте. Маркирането става по стандартните начини, както в Word. А ако се опитате да изберете форматиране, когато не е маркирана никаква част от текста, промяната ще бъде в сила, когато започнете да въвеждате нов текст на същото място.
В компютъра може да има много инсталирани шрифтове, които без проблем ползваме в обикновени текстови редактори. Но в Dreamweaver не е така... Натиснете стрелкичката вдясно от полето за избор на шрифт, за да отворите списъка. Виждат се само 7 шрифтови фамилии - Arial, Helvetica, Sans Serif; Times New Roman, Times, serif; Courier New, Courier, Mono; Georgia, Times New Roman, Times, Serif; Verdana, Arial, Helvetica, Sans-Serif; Geneva, Arial, Helvetica и MS Sans Serif. Броят им е ограничен, за да може да се постигне максимум съвместимост на сайта с други компютри и браузъри. В това поле можете спокойно да напишете името на любимия си шрифт - Impact, например. На вашия компютър всичко ще изглежда добре, но какво ще стане, ако отидете у свой приятел, който няма този шрифт инсталиран??? Много просто - браузърът му ще изобрази желания текст с този, който ползва по подразбиране. А ако се ограничите до горните шрифтови фамилии, няма да имате никакви проблеми, тъй като това са системни шрифтове, които се инсталират заедно с Windows.
Следващите възможности, които предлага Property Inspector, са за избор на големина на шрифта и цвят. Важно е да се отбележи, че големините на шрифта се задават по мерки, различни от тези в Word и другите текстообработващи програми. Цвят можете да изберете по два начина. Единият е, като натиснете малкото квадратче, което е оградено на картинката. Тогава програмата изобразява палитра с цветове, от които можете да изберете някой чрез мишока. Вторият начин е по-лесен, ако вече знаете кода на желания от вас цвят. Тогава просто го написвате в текстовото поле вдясно от посоченото малко квадратче. Ако изберете цвят по първия начин, в текстовото поле програмата изобразява неговия код.
Възможности като Bold, Italic и подравняване на текст са на разположение и в Dreamweaver. Чрез бутончетата "B" и "I" можете да изберете допълнително почерняне на текста и курсив. Имате избор между ляво, центрирано и дясно подравнение чрез натискане на съответните бутони.
Особеност при въвеждането на текста в Dreamweaver е, че натискането на "Enter" премества маркера надолу през една линия, а не на следващата. Ако искате да започнете нов ред, без да има дупка между стария и новия ред, натиснете SHIFT+ENTER. И още - не можете да имате повече от един последователен интервал на едно място. А ако все пак обичате да започвате новите мисли няколко знака навътре, трябва да натиснете и задържите SHIFT+CTRL и тогава да натискате клавиша за интервал.
Хипервръзките или линковете, както още се назовават, са онези думички, върху които, като натиснете, отивате на друг HTML файл (друга страница). Връзки като "Цени", "Услуги", "Поддръжка" и т.н. най-вероятно фигурират на сайта на вашия доставчик. Те се създават много лесно - трябва само да маркирате с мишката думата или думите, които искате да станат връзки, да цъкнете веднъж в полето "Link" на "Property Inspector" и там да уточните къде искате посетителят да отиде, като натисне новата връзка. ВАЖНО! Ако искате да създадете връзка към вече съществуващ сайт в Интернет, а не към една от вашите HTML страници, трябва да укажете пълният адрес. Пример: www.pc-help.hit.bg е ГРЕШНО. Вярно е http://www.pc-help.hit.bg. Друг пример: ftp.microsoft.com е ГРЕШНО. Вярно е ftp://ftp.microsoft.com. Вдясно от полето "Link" виждате падащо меню "Target". То става активно, когато отидете върху някоя връзка, и указва къде ще се отвори тя при натискане. Възможен избор е _blank, _parent, _self, _top. Ако изберете _blank, тогава браузърът ще отвори нов прозорец, в който ще се зареди желаната връзка. _parent означава, че връзката ще се отвори в същия прозорец, в който е текущият документ. Другите правят почти същото, но при _parent, ако имате някакви фреймове, те биват заместени. Всъщност ако имате фреймове и създадете връзка в някой от тях, без да попълвате полето "Target", при натискане на връзката желаната страница ще замести само съответния фрейм. При _parent връзката се отваря, но преди това биват затворени всички фреймове и новият документ има на разположение целия прозорец на браузъра. В полето "Target" не винаги има тези четири възможности - там се изобразяват и имената на фреймовете, ако имате такива - примерно leftFrame, mainFrame и т.н. По този начин можете да зададете връзка, която е в левия ви фрейм, да се отвори в десния.
Май доста внимание отделих на фреймовете. За тях пак ще стане дума в следващите броеве... А сега идва ред на картинките. Ако вече сте ги подготвили, пристъпете към вмъкването им във вашия HTML документ. С мишката цъкнете на мястото, където желаете да се появи картинка. От менюто "Insert" изберете "Image" и от списъка с файлове, който се появява, цъкнете на желаната картинка два пъти... и хоп! тя бива вкарана в документа! Ако не харесвате мястото, където се е появила картинката, можете лесно да го смените, като хванете картинката с мишката и я провлачите някъде. Лесно е... <file>
На картинката е показана помощната лента "Property Inspector", когато сте маркирали някакво изображение. Повечето от полетата са незадължителни, но могат да послужат за по-прецизно определяне на заеманото от изображението място. В лявата част са полетата W и H, съответно съкращения от английските "Width" и "Height", в които можете да зададете заеманата от картинката големина в пиксели. Не е задължително тези стойности да са идентични с атрибутите на съответното изображение. Това позволява една съвсем малка по размер картинка да заеме по-голяма площ, като бъде разтеглена от Web браузъра след зареждане. Също можете да направите така, че картинка, която стандартно заема целия екран, да бъде изобразена в съвсем малък формат. Можете да ползвате тази възможност, ако правите фото архив, при който първо нужните снимки се показват в размер, по-малък от оригиналния, а при цъкане да се отваря същата картинка, но в по-голям размер. Вдясно от тези полета са на разположение още две - "Src" и "Link". В полето "Src" програмата автоматично попълва името на файла на съответната картинка, в някои случаи с нужната пътека до него. Трябва да се уверите, че пътеката (ако картинката не е в същата папка като HTML файла) е изписана спрямо местоположението на файла на Web страницата. Например, ако на desktop имате папка "sait", в която има папка "kartinki" и HTML файловете се помещават в папката "sait", вярната пътека до kartinka.gif в папката "kartinki" е "images/kartinka.gif". Грешен вариант е да зададете пътя до картинката така: "C:WindowsDesktopsaitkartinkikartinka.gif" - защото файлът "kartinka.gif" съществува на вашия компютър, но не и в този на посетителя.
Можете да създавате връзки под формата на картинки. Това позволява да си нарисувате бутончета, на които посетителят да цъка и да отива някъде - точно както при обикновените текстови връзки. За това служи полето "Link" в "Property Inspector" - след като вмъкнете картинка на страницата и я маркирате, ако искате тя да стане връзка към друга страница или сайт, просто попълвате желания адрес (или име на файл на HTML файл) в същото поле.
Понякога е удобно да разположите текста на страницата около картинка. Това е лесно и се постига, като изберете нужното подравнение за картинката в полето "Align" горе в дясно на "Property Inspector". Ако искате картинката да заеме дясната част на страницата, а текстът да е от лявата, изберете "Right". Ако предпочитате картинката да е от лявата страна, а текстът от дясната, изберете "Left". След като направите желаното подравнение за картинката, може да е нужно да я разместите (това е описано по-горе). Последното важи главно за големи по размер изображения като снимки, screenshot -ове и т.н. В полето "Alt", което е точно под "Align", напишете описание за картинката. То е съвсем произволно и се появява, когато посетителят задържи за малко мишката върху вашата картинка.
Сега ще обърнем внимание на елементите в долната част на "Property Inspector". Ако не ги виждате, натиснете малката стрелкичка долу в дясно (на "Property Inspector"). Първото, което ви отнема вниманието, е полето "Map" и отдолу три светлосини фигури. Тази рядко използвана възможност позволява на отделните части от една картинка да се зададат връзки към няколко HTML документа или външни сървъри. Често Web разработчиците слагат всичките си връзки в една голяма картинка и задават отделни връзки на нужните места на картинката. В зависимост от това дали искате да маркирате правоъгълник, кръг или произволен многоъгълник, цъкнете веднъж съответния инструмент в "Property Inspector" и задайте с мишката нужните координати на картинката.
Може би искате да има малко място между различните картинки и текста на страницата, ако често го разполагате около тях. За целта попълнете необходимите стойности в полетата "V Space" и "H Space". "V" означава "Vertical" и задава празно поле по вертикал, а "H" идва от "Horizontal" и определя празно поле по хоризонтална линия. В тези полета са позволени цели положителни числа, като "0" означава, че не желаете никакви полета.
Вдясно от тези две полета са разположени други две - "Target" и "Low src". "Target" е валидно само ако сте задали картинката да е връзка към друг документ или сървър и указва къде ще се отвори той. Функциите на това поле са разяснени малко по-горе, в частта за създаване на обикновени връзки.
Ако искате да сложите някаква голяма картинка в HTML документ, тя със сигурност би отнела доста време за зареждане при стандартни DIAL-UP условия. Това донякъде се улеснява от предлаганата възможност "Low src". Тук въвеждате името на файла (адреса) на малка по размер картинка, която се зарежда от браузъра преди основното изображение. Тази картинка може да бъде същата като основната, но с влошено качество за бързо зареждане или просто може да съдържа едно изречение от рода на "Картинката се зарежда, моля изчакайте".
Последната възможност, които предлага "Property Inspector" в най-десния долен край, е тази за задаване на дебелината на рамката около картинката. Тук задавате дебелината на рамката в числа, от които 1 е най-тънката възможна, а 0 означава отсъствие на такава. Бутонът "Edit", който се намира точно под полето за рамката, позволява бързо стартиране на вашия редактор на изображения, а "Reset size" възвръща оригиналната големина, която картинката заема в страницата. Това е особено полезно, ако сте опитвали да променяте големината на картинката чрез полетата "W" и "H" в горната лява част на "Property Inspector".
Щом вече сте стигнали дотук, трябва да можете да правите доста неща на Dreamweaver:
- да въвеждате текст;
- да прилагате големина и цвят на шрифта;
- да правите хипервръзки към други документи;
- да вмъквате картинки, да правите от картинките връзки .
100 WEB Съвета
01 Поставете линкове към любимите си сайтове
02 Поставете брояч, за да виждате броя на посещенията
03 Оптимизирайте графиките си за по-голяма скорост
04 Помислете за добавяне не звукови ефекти
05 Регистрирайте търсеща машина-това е безплатно!
06 Обмислете варианти на страницата на друг език
07 Не използвайте ненужни графики-те само забавят връзката
08 Обновявайте страницата си по-често
09 Проведете тестове за скорост, удобство и производителност
10 Бъдете възможно най-обективни в представянето на информация
11 Избягвайте мигащите изображения
12 Използвайте с мярка Java Script и други ефекти
13 Използвайте слоеве, те облекчават вашата страница
14 Разгледайте добрите web сайтове, поучете се от тях!
15 Не препълвайте сайта си с реклами
16 Обмислете структурата на менютата
17 Не разкарвайте потребителя по цялата страница за едно нещо
18 Фреймовете-преценете дали сте за или против
19 Следвайте правилата на общоприетия интерфейс
20 Не запълвайте страницата с ненужен текст
21 Използвайте рационално пространството си
22 Не забравяйте принципите на добрия дизайн
23 Използвайте алтернативния текст за повече ясност
24 Задължително тествайте с няколко различни браузъра
25 Обезателно използвайте таблици за форматиране
26 Обърнете внимание на разделителната способност
27 Оразмерете таблиците, или ги оставете да "плуват"
28 Оставете цветовете на връзките по подразбиране
29 Опитайте се да отпечатате страниците си
30 Помислете за потребителите с други операционни системи
31 Внимавайте с размерите и вида на шрифтовете
32 В никакъв случай не правете сайта да се скролира водоравно
33 Използвайте cascading style sheets (ccs)
34 Разрешете използването на различни стилове
35 Избягвайте многоцветните фонове
36 Внимавайте при използването на специфични ccs
37 Не правете изскачащи прозорци-те приличат на реклами
38 Не отваряйте в нови прозорци всяка страница
39 Направете заглавен екран (може би с избор на език)
40 Опитайте се да намерите по-бърз сървър за вашия сайт
41 Проверете ширината на вашата частотна лента
42 Почистете вашия HTML код-понякога има излишни тагове
43 Не включвайте лична информация в сайта си
44 Създайте интелигентни съобщения за грешка
45 В никакъв случай не местете страницата си на друг адрес
46 Определете размера на изображенията
47 Опитайте се да избегнете правописни грешки
48 Не използвайте "изглаждане" на шрифтове с размер <10
49 Цветовете на фона намаляват читаемостта
50 Не използвайте автоматично обновяване на страницата
51 Премахнете рамките на таблиците
52 Не използвайте излишен HTML код
53 Поддържайте имената на файловете си кратки
54 Внимавайте с кирилицата-понякога тя не се чете
55 Поставяйте copyrights на всяка ваша страница
56 Поставяйте коментари в HTML кода на страницата
57 Внимавайте с форматите на графиките
58 Сведете до минимум използването на кавички в HTML кода
59 Използвайте кратките версии на HTML командите
60 Използвайте отместване на параграф
61 Защо да не добавите интерактивно съдържание спомощтана Flash?
62 Под всеки линк, който води към голяма страница, сложете големината й
63 Не използвайте видео клипове в страницата си, освен на Flash
64 Купете си книги, свързани с web и компютрите
65 Не се доверявайте на реклами от рода на "сложете този банер на сайта си и ще получите 10 $"
66 Опитайте се да убедите потребителя, че вашата страница е за неговите нужди
67 Не използвайте огромни и трудни менюта
68 Обмислете точно съдържанието на страницата
69 Не използвайте чужди думи, без да напишете обяснението им
70 Подредете изображенията с таблици
71 Не оставяйте интерфейса на страницата ви скучен
72 Добавяйте нови, интересни неща по-често
73 Помислете и за потребителите, които са начинаещи
74 Внимавайте и проверявайте линковете си
75 Използвайте таблици за оцветяване на отделни части
76 Внимавайте със запазените фирмени имена и правата за използването им
77 За обработка на изображенията използвайте Photoshop
78 Не пишете с огромни или с много малки букви
79 Внимавайте с шрифтовете, предназначени за кирилица
80 Не поставяйте ярки цветове за фон
81 Предупреждавайте при преместване на нов адрес
82 Възползвайте се от възможностите на HTML редакторите
83 Внимавайте с цветовете и цветовата схема
84 Използвайте т.нар." web-safe" цветове
85 Не слагайте много информация на една страница
86 Разделете страниците си тематично
87 Отваряйте връзките към другите сайтове в същата страница
88 Внимавайте със специалните знаци и международните означения
89 Не задавайте дълги имена на директориите си
90 Не използвайте други символи освен цифри и букви в имената на файловете си
91 Регистрирайте страницата си в търсещите машини
92 Сложете линкове към най-известните сайтове в бранша
93 Слагайте своя е-mail адрес на всички copyrights
94 Не използвайте бутони с много позиции
95 Пробвайте различни разположения на информацията в страницата
96 Попитайте вашите приятели за мнението им
97 Консултирайте се с хора, занимаващи се по темата
98 Гледайте адреса на страницата ви да не е много дълъг и труден за запомняне
99 Използвайте SSI (server side includes)
100 KISS (Keep It Simple Stupid) придържайте се към простото и глупавото
Малко думи за XML
С тази статия ще се помъча да обясня простичко важността на езика, неговите недостатъци, връзката му със SGML и какво XML добавя към SGML и HTML.
Какво е XML?
XML беше създаден, за да може структурирани елементи да бъдат видими през Интернет. Дотогава съществуващите езици SGML и HTML не бяха полезни за такива цели.
А именно какви са недостатъците на HTML в горната ситуация.
HTML е дизайниран за показване на текст във браузер. Той е "прост" език, базиран на определени елементи, наречени тагове:
Например:
<html>
<head>
</head>
<body>
</body>
</html>
Toчно тази му леснота го направи толкова популярен и то за доста кратко време. HTML-таговете са предварително дефинирани и не можете да напишете собствени тагове или да предефинирате някои от вече създадените. Друг недостатък е, че в езика няма никаква Обектна ориентираност, например, ако сменим някой файл трябва да минаваме по целия код и да оправяме всички връзки (links), които водят към него.
SGML
SGML(Standard Generalized Markup Language), от който всъщност е създаден XML, е "роден" от нуждата да има някакъв контейнер за данни, напълно независим от софтуер или производител. SGML също е Meta език; можете спокойно да направите извода, че SGML е език за дефиниране на други Markup езици, той е много мощен, но е комерсиален и доста скъп.
Защо XML трябва да се използва?
Ето няколко основни качества на езика :
1. XML може да бъде използван с вече съществуващите интернет-протоколи
2. Поддържа се от много приложения
3. Съвместим е с SGML и повечето SGML приложения могат да бъдат конвертирани до XML.
4. XML е лесен и за хора, които не се занимават с програмиране, лесен за създаване и разлика от HTML не трябва да учиш тагове, а можеш да си създаваш свои собствени.
Ето, сега да се захващаме да създадем един XML файл. Отворете любимия си текстов редактор и напишете следното:
<xml>
<home>
<head>
<title>
WebDevMagazine Home Page
</title>
</head>
<body>
<main>
Welcome to WebDevMagazine
</main>
<imptext>
<text>
<para>
XML Tutorial
</para>
</text>
</body>
<home>
Вече създадохте първия си XML документ, но нека да видим елементите му и да ги обясним .
[1] <xml>, е XML декларация, която определя, че ще следва XML код, не е задължителна, но е добре ако я има във вашите документи.
[2] <home> e началото на главния елемент. Всеки XML документ трябва да има един главен елемент documents. Елементът </home> определя края на главния елемент. Много е важно отварящият таг и затварящият да са със едно и също име
<home>
.....
</home>
а не
<homepage>
...
</home>
[3] <imptext> е празен елемент и използва специален таг, наречен празен (empty), като синтаксисът му трябва да е с "/>" накрая и да изглежда така:
<imptext> а не <imptext>
Такъв таг няма нужда от затварящ елемент:
Това е грешно:
<imptext>
...
</imptext>
[4] <banner> е също вид празен елемент, но е със атрибут, който сочи към някакъв външен файл, което в случая е графика.
Могат да се ползват и двата варианта:
<banner> или
<banner></banner>
[5] <head>, <title> и т.н са с атрибути със синтаксис, като са дефинирани
<element>
Един атрибут може да бъде определен само в един таг
<medicine>
Въпреки привидната свобода, която ви дава синтаксисът на езика, трябва да се спазват някои правила:
• В главата на документа се намира декларация на XML, в която се указва езикът, версията му и друга допълнителна информация.
• Всеки отварящ таг, определящ някаква област, задължително трябва да има затварящ (вижте и нещата, описани по-горе за самия синтаксис).
• Всички значения на атрибутите трябва да са в кавички.
• Трябва да се следи за последователността на отварящите и затварящите тагове.
• Всяка информация между начален и краен таг се приема като данни и се вземат под внимание всички символи на форматирането (т.е. паузи, пренос на нов ред, табулации...) и все пак има начин, заключеното между два тага, да се приема само като текст - за това служи : CDATA
CDATA
За да се зададе област от документа, която при обработката на XML документа, ще бъде разглеждана като обикновен текст, игнорирайки всякакви инструкции и специални символи, е необходимо да се използва тага CDATA <CDATA>. Вътре в него можете да пишете всичко, дори и JavaScript, но е важно да се забележи че краят на тага е "]]".
Разбира се че, ако искате да се занимавате по-подробно с езика, ще ви е нужна много повече информация за него, синтаксиса му както и много други неща.