Програмиране под Интернет Автор Л Парашкевова Съдържание

Скачать презентацию Програмиране под Интернет Автор Л Парашкевова Съдържание

dddf18bff7c6dec18b91ca26a6389259.ppt

Количество слайдов: 24

Програмиране под Интернет Автор: Л. Парашкевова

Съдържание: • Таблици или CSS; • XHTML - как да направим валидна страница; • Трите XHTML DTD дефиниции; • Basic CSS background; • Тагът div; • Задачи;

Таблици или CSS Таблиците са въведени в HTML с едно-единствено предназначение: визуализиране на таблични данни. Атрибутът border="0" осигурява на дизайнерите една решетка, върху която да разполагат изображения и текст. Това все още е най - разпространеният начин за създаване на визуално богати уеб страници. Този метод пречи на изграждането на един по-добър, по-достъпен, гъвкав и функционален Уеб дизайн. От къде произлизат проблемите и как да се научим да създаваме хибридни или напълно без-таблични лейаути. В началото Интернет беше среда, използвана предимно от учени. Както всяка нова среда, ранният Интернет беше доста ‘суров’ от естетическа гледна точка. През 1997 Дейвид Зийгъл публикува своят основополагащ труд, с който предложи някои брилянтни workarounds за ограниченията на текущите браузъри и спецификациите на W 3 C /THE WEB STANDARDS /. Тези workarounds бяха толкова добри, че и до ден днешен те са найразпространеният метод за създаване на уеб страници Вместо да се влагат таблици в други таблици и да се пълнят празни клетки с интервали, може да се използва много по-прост код и CSS, за да изграждаме красиви сайтове, които се зареждат по-бързо, преправят се по-лесно и са подостъпни за всички

Таблици или CSS Каква е ползата от CSS? • страниците ви се зареждат по-бързо; • ще понижите таксите за хостинг; • ще направи всеки редизайн по-ефикасен; • ще ви помогне да запазите постоянство във визуалното представяне на проектите ви; • ще ви донесе по-добри позиции в търсачките; • ще направи вашите сайтове по-достъпни за всички потребители и устройства.

XHTML - как да направим валидна страница Голяма част от Web страниците имат некоректно написан код. В повечето случаи страниците с грешен код се виждат добре, защото браузърите правят всичко възможно да визуализират страницата въпреки грешките. Първоначално html е бил проектиран да поделя технически писма между учени изследователи, които не са изисквали кой знае какво форматиране при показване на информацията. След появата на първият уеб браузър езика се променя драстично. Добавят се нови функционални възможности. Производителите на браузъри добавят нови тагове, които работят само чрез техните браузъри. Решението xhtml XHTML е специфична XML лексика, която се използва за високо структурирани уеб страници. XHTML налага структурата на XML в HTML. Едно от предимствата на XHTML / e. Xtensible Hyper. Text Markup Language / документите, е че те могат да бъдат валидирани, което озна-чава, че могат да бъдат анализирани за коректност. Валидизираният XHTML код е изключително важен тъй като той облекчава браузърите от изпълнява-нето на сложен анализ на документи, за да определят как те би трябвало да бъдат показани.

XHTML - как да направим валидна страница XHTML не е кой знае колко различен от html . Процесът на самото преобразуване предполага най-вече извършване на леки промени в кода. Ето и самия списък с основните изисквания, които трябва да бъдат взети под внимание. 1. Поставете декларацията за тип на документа в началото на страницата 2. Декларирайте XHTML DTD / Document Type Definition / в декларацията на документа 3. Декларирайте XHTML именно пространство в елемента html 4. Убедете се че елементите head и body присъстват 5. Направете елемента title първия елемент в елемента head 6. Направете така, че имената на елементите и атрибутите да са написани с малки букви 7. Убедете се, че не празните елементи имат завършени тагове 8. Присвойте стойности на атрибутите 9. Оградете стойностите на атрибутите в двойни кавички

Трите XHTML DTD дефиниции: Трите XHTML DTD дефиниции предоставят различни нива на детайлност за xhtml документа. В резултат на което има три различни класификации на xhtml документите. Те предоставят гъвкавост при използването на различни xhtml функционални възможности. Ето ги и трите дефиниции: • • • Strict – няма никакви html елементи за представяне, такива като шрифтове таблици и др; Transitional – добавя към strict DTD и HTML елементи за представяне; Frameset – добавя поддръжка за фреймове Transitional [træn'siʒənəl] - преходен, промеждутъчен, междинен

Трите XHTML DTD дефиниции: Дефиницията strict dtd е най-опростената от трите и предоставя минимален xhtml език за създаване на документи, без никакви елементи за представяне и визуализация. Това може да ви звучи ограничаващо, когато имате предвид, че xhtml документите обикновено се проектират за показване в уеб браузъри. Идеята е, че вие форматирате такива документи за показване, като използвате стилови таблици, вместо елементи за представяне. Не е изненадващо, че strict dtd е най-ефикасната и позволява найбързо валидизиране на xhtml документи. Декларация на strict dtd:

Трите XHTML DTD дефиниции: Дефиницията transitional dtd е като продължение на strict dtd, като добавя поддръжка за елементи за представяне. Вие знаете, че една от най -основните цели на xml е да отдели кода за представяне от съдържанието, което се нарушава от transitional dtd. Макар и това да е вярно, повечето уеб дизайнери скоро няма да се откажат от елементите за представяне в името на стиловите таблици, затова може да мислите за transitional dtd като за отстъпка, направена заради упоритите уеб дизайнери. Transitional dtd е полезна, като преобразувате html документи в xhtml, тъй като тя включва повечето html възможности, срещани в уеб страниците. Но тя не включва поддръжката за фреймове, които показват няколко уеб страници в един прозорец на браузъра. Декларация на transitional dtd:

Трите XHTML DTD дефиниции: Най-пълно екипираната с възможности xhtml dtd е frameset dtd, която разширява transitional dtd с добавянето на поддръжка на фреймове. Декларирането на xhtml dtd и именно пространство става много лесно и изисква въвеждането само на няколко реда стандартен код, които трябва да го зададете преди основния таг /елемент/ html. Декларация на frameset dtd:

Basic CSS background Нека разгледаме background-а в CSS файла. Много по - удачно е да се преработи background-а там, защото CSS дава по-голяма свобода за настройките. Най-често използваните настройки: 1. background-color: ( задава цвят ) 2. background-image: ( url на изображение ) 3. background-repeat: ( разтягане/повтаряне на изображението ) 4. background-position: ( позициониране на изображението ) 5. background-attachment: ( фиксирано позициониране на изображението )

Basic CSS background Настройки: 1. Background-color: #234567; ( задавате цвят на фона ) Background-color: transperant; (използва се предимно за

, тази опция задава фон, като този който се намира под тага ) 2. Background-image: none; ( Никакъв фон ) Background-image: url("линк към изображението. jpg"); 3. Background-repeat: no-repeat; ( изображението излиза в реалния си размер ) Background-repeat: repeat; ( повтаря изображението до безкрайност ) Background-repeat: repeat-x; ( повтаря изображението хоризонтално ) Background-repeat: repeat-y; ( повтаря изображението вертикално ) 4. Background-attachment: fixed ( позициониране точно в средата, в зависимост от размера на сайта ) Background-attachment: scroll ( повтаряне при скролиране )(препоръчва се за по-дълги страници )

Basic CSS background Настройки: 5. Background-position: absolute; Background-position: left; Background-position: right; Background-position: center; Background-position: top left; Background-position: top right; Background-position: top center; Background-position: center left; Background-position: center right; Background-position: center; Background-position: x( хоризонтал ), y( вертикал ) Background-position: x% ( проценти от оригиналния размер ), y% (проценти от оригиналния размер )

Тагът div Div тагът се използва за разделяне на страницата на секции (division). Блоков елемент е, може да съдържа както блокови така и не блокови елементи. Позволява на автора да отдели част от съдържанието на страницата и с употребата на CSS да го форматира/стилизира. Най често се употребява в комбинация с атрибутите class или id. Списък на атрибутите на div: id class width height title style dir lang xml: lang

Задача 1. Ето и един пример, в който ще разделим четири параграфа в две секции с помощта на тага div. С малко CSS за да поставим фон на двете секции: zad 1

Червена секция

Това е параграф 1

Това е параграф 2

Синя секция

Това е параграф 3

Това е параграф 4

Атрибутът float приема и стойности right и center. Тези стойности сменят позицията на секцията!

Задача 2. За да сложите стил на част от реда ще трябва да използвате таговете и , като използвате атрибут id или class. За разлика от тага

тага не се използва за позициониране, а за директно указване на характеристиките на кратки пасащи от текст. zad 2

Това е примерен текст свързан с прилагане на стил върху част от реда.

Задача 3. Страницата е разделeна на три части: header, main и footer. Всички те са поставени в общ container. За всяка част има различни формати. CSS файлът съдържа 7 основни обекта: 1. #container – обхваща всички елементи. Центрирането на обектите става с помощта на margin: 0 auto; . Работи при всички браузъри. 2. float: left; - с този атрибут се указва на елемента, който го съдържа „да се вмъкне” в родителският му елемент. С помощта на тази „настройка” можем да разположим няколко елемента в един главен, който играе ролята на таблица, а тези вътре на клетки от нея. За да работи това задължително трябва да укажете широчината на елемена т(width: ---px; ). 3. overflow: auto; - така указваме на елемента, че ако съдържанието му надвиши размера на зададения height: 500 px; автоматично да слага скролбар. По този начин страницата ще има един и същи размер независимо колко информация се показва. Атрибутът overflow: auto; работи само когато е зададена височина на елемента (height: 400 px; ) 4. div. row span. left; - създават се два класа row и left. С тъга div се използва класа row, а вътре в него чрез тага span се използва класа left. Общият вид на страницата прилича на таблица. Начинът, по който е деклариран xhtml позволява използването на традиционни тагове!

Задача 4. Да предположим, че имате купчина tumbnail /малки картинки/ изображения, които са връзка към по-големите версии на тези изображения - доста често срещан тип уеб страница. Да предположим още, че към всяко изображение има картко описание /текст/, което искате да бъде центрирано под самата картинка. За да използвате възможно най-голяма част от екрана на браузъра, искате тези двойки картинка -описание да са подредени в редове, толкова дълги, колкото е широчината на прозореца и автоматично да продължават на следващия ред. С последното изискване ние излезнахме от територията на TABLE - ците и навлезнахме в територията на CSS. Стъпка по стъпка Нека разгледаме този проблем стъпка по стъпка. Първото изискване е tumbnail-ите на изображенията да имат центрирани описания под тях. Използвайки TABLE-ци за оформление, всяка такава двойка щеше да отиде в отделна TD клетка. Изпозвайки CSS, ще трябва да ги поставим в отделни DIV. За да ги накараме да се подредят по хоризонталата и по ширината на целия прозорец, използваме FLOAT атрибута на CSS, който ще накара всеки от тези DIV да се "залепи" от лявата страна на предишния. Ако картинките са повече, то те ще се пренесат на следващия ред!

Задача 4. Сега, да предположим, че искате да покажете на вашия сайт повече от една категория thumbnails и искате да ги обедините визуално - с общ фон и/или оградени с линия. Просто ги обединете в един общ DIV: div. container { border: 2 px dashed #333333; background-color: #ffeffe; } Когато обаче правим това, се сблъскваме с един проблем. Когато "залепяте" един елемент за друг, използвайки FLOAT, този елемент вече не заема никакво място, а фонът и ограждащата изображенията линия се показват върху тях вместо около тях. Затова трябва да добавим освен "залепените" една към друга DIV секции разделител. Например DIV като този: div. spacer { clear: both; } По този начин се отделят картинките от контейнера и не се залепват за горния и долния край на секцията.

Задача 5. Често се случва малки изображения (thumbnails) във web-страница, които променят размера си при посочването им с курсора на мишката. Това, което ще направим е промяна на размера на видимата част от изображението. За целта ще използваме възможностите на свойството overflow (препълване). Това свойство определя как да се показва даден елемент, когато размера му надвишава размера на контейнера му. Контейнерът има фиксиран размер. Възможните стойности на overflow са: visible, hidden, scroll и auto. Чрез използване на комбинации от тези стойности, се реализира ефекта: нормално се вижда част от изображението, а когато курсора на мишката се намира върху тази част, се показва цялото изображение. Концепция Изображението се поставя в центъра на контейнера. Ще използваме изображението като линк и то трябва да е в таг „”. Задаваме необходимите размери (широчина и височина) и още задаваме свойството „position” на контейнера да бъде „relative”, а на изображението - „absolute”. Задаваме отрицателни стойности на top и left позициите на изображението за да го изместим наляво и нагоре. Когато overflow на контейнера е „hidden”, от изображението ще се вижда само частта попадаща в рамките на контейнера. Като зададем за a: hover стойността на overflow = „visible”, то при посочване на контейнера с курсора на мишката, цялото изображение ще се покаже.

Задача 5. Този механизъм се използва както за едно изображение, така и за няколко. Общия вид на HTML кода за едно изображение е:

Общия вид на CSS кода е: div. thumb{ float: left; margin: . 5 em 0; margin-right: 10 px; border: 1 px solid #999; padding: 2 px; } div. thumb a{ display: block; float: left; width: 100 px; height: 100 px; line-height: 100 px; overflow: hidden; position: relative; z-index: 1; } div. thumb a img{ float: left; position: absolute; top: -45 px; left: -50 px; } div. thumb a: hover{ overflow: visible; z-index: 1000; border: none; } div. thumb a: hover img{ border: 1 px solid #999; background: #fff; padding: 2 px; }

Задача 6. Да се създаде страница, която е разделена на 4 логически секции: header, left, main и footer. Картинките в дясната част на слайда да бъдат поставени за фон /background/ на различните секции. В някои случаи размерът на картинките не отговаря на размера на секцията. В частта main текстът може да е по-дълъг на някои страници. В този случай има 2 възможности. Текстът да се пренесе на няколко страници или в CSS файла да се използва техниката за повторение на картинката на фона. #footer { #main { background-image: url(img/bottom. jpg); background-image: url(img/main. jpg); background-position: bottom; background-position: left; background-repeat: repeat-x; background-repeat: repeat-y; float: left; width: 750 px; width: 612 px; height: 17 px; height: 466 px; } text-align: right; padding-right: 9 px; В секцията footer картинката за фона се разтяга по хоризонталата, а color: #fff; в секцията main – по вертикалата! font-size: 10 px; }

Задача 7. Div елементи с еднаква височина За разлика от табличното представяне на HTML елементите, при използването на div тага, се появяват някои усложнения. За преодоляването им се налага да се използват допълнителни техники. В случая ще покажем съседни блокови елементи с различно съдържание и на еднаква височина. Въпреки валидния XHTML/CSS код и правилното структуриране, разликата във височината на елементите променя цялата визия на HTML документа. Решението на този проблем е в използването на свойството display за блоковия елемент (div) и указването на стойности, които да го карат да се държи и изобразява от браузърите като таблица, а неговите вложени елементи да се идентифицират като редове и колони. За целта на обхващащия div таг се задава стойност display: table; , на вложения в него div елемент, задаваме стойност display: table-row; , а на вложените в него div елементи, съответно стойности display: table-cell; . Създайте таблица, съдържаща 2 реда и две колони. В клетките е въведен текст и картинки. Една от клетките има за фон картинка.

Заключение И така имаме купчина DIV вместени в друг DIV. С какво това е по-добро от употребата на таблици по същия начин? Отговорът се крие в начина, по който са били замилсени самите тагове. DIV правят групирането по логика, те са структурни елементи. Дори когато са един в друг те остават структурен код. В TABLE обаче се създава отношениемежду колоните и/или редовете, от една страна, и TABLE клетките от друга. Когато ги използваме за оформление, ние разрушаваме структурното значение на таблицата. И отново използваме структурни елементи за оформяне на външния вид. Това още повече усложнява проблема.