Програмиране под Интернет

Програмиране под Интернет

Автор: Л. Парашкевова

Съдържание:

• Таблици или CSS;• XHTML - как да направим валидна страница;

• Трите XHTML DTD дефиниции;

• Basic CSS background;

• Тагът div;• Задачи;

Таблици или CSS Таблиците са въведени в HTML с едно-единствено предназначение: визу-ализиране на таблични данни. Атрибутът border="0" осигурява на дизайнерите една решетка, върху която да разполагат изображения и текст. Това все още е най - разпространеният начин за създаване на визуално богати уеб страници. Този метод пречи на изграждането на един по-добър, по-достъпен, гъвкав и функционален Уеб дизайн. От къде произлизат проблемите и как да се научим да създаваме хибридни или напълно без-таблични лейаути.

В началото Интернет беше среда, използвана предимно от учени. Както всяка нова среда, ранният Интернет беше доста ‘суров’ от естетическа гледна точка. През 1997 Дейвид Зийгъл публикува своят основополагащ труд, с който пред-ложи някои брилянтни workarounds за ограниченията на текущите браузъри и спецификациите на W3C /THE WEB STANDARDS /. Тези workarounds бяха толкова добри, че и до ден днешен те са най-разпространеният метод за създаване на уеб странициВместо да се влагат таблици в други таблици и да се пълнят празни клетки с интервали, може да се използва много по-прост код и CSS, за да изграждаме красиви сайтове, които се зареждат по-бързо, преправят се по-лесно и са по-достъпни за всички

Таблици или CSS

Каква е ползата от CSS?• страниците ви се зареждат по-бързо;

• ще понижите таксите за хостинг;

• ще направи всеки редизайн по-ефикасен;

• ще ви помогне да запазите постоянство във визуалното представяне на проектите ви;

• ще ви донесе по-добри позиции в търсачките;

• ще направи вашите сайтове по-достъпни за всички потребители и устройства.

XHTML - как да направим валидна страница

Голяма част от Web страниците имат некоректно написан код. В повечето случаи страниците с грешен код се виждат добре, защото браузърите правят всичко възможно да визуализират страницата въпреки грешките.

Първоначално html е бил проектиран да поделя технически писма между учени изследователи, които не са изисквали кой знае какво форматиране при показване на информацията. След появата на първият уеб браузър езика се променя драстично. Добавят се нови функционални възможности. Производителите на браузъри добавят нови тагове, които работят само чрез техните браузъри.

Решението xhtmlXHTML е специфична XML лексика, която се използва за високо структурирани уеб страници. XHTML налага структурата на XML в HTML. Едно от предимст-вата на XHTML / eXtensible HyperText Markup Language / документите, е че те могат да бъдат валидирани, което озна-чава, че могат да бъдат анализирани за коректност. Валидизираният XHTML код е изключително важен тъй като той облекчава браузърите от изпълнява-нето на сложен анализ на документи, за да определят как те би трябвало да бъдат показани.

XHTML - как да направим валидна страница

XHTML не е кой знае колко различен от html . Процесът на самото преобразуване предполага най-вече извършване на леки промени в кода. Ето и самия списък с основните изисквания, които трябва да бъдат взети под внимание.

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

Трите XHTML DTD дефиниции:

• Strict – няма никакви html елементи за представяне, такива като шрифтове таблици и др;

• Transitional – добавя към strict DTD и HTML елементи за представяне;

• Frameset – добавя поддръжка за фреймове

Трите XHTML DTD дефиниции предоставят различни нива на детайлност за xhtml документа. В резултат на което има три различни класификации на xhtml документите. Те предоставят гъвкавост при използването на различни xhtml функционални възможности.

Ето ги и трите дефиниции:

Transitional [træn'siʒənəl] - преходен, промеждутъчен, междинен


Декларация на strict dtd:

<DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “DTD/xhtml1-strict.dtd”>

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


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

Декларация на transitional dtd:

<DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “DTD/xhtml1-transitional.dtd”>


Най-пълно екипираната с възможности xhtml dtd е frameset dtd, която разширява transitional dtd с добавянето на поддръжка на фреймове.

Декларирането на xhtml dtd и именно пространство става много лесно и изисква въвеждането само на няколко реда стандартен код, които трябва да го зададете преди основния таг /елемент/ html.

Декларация на frameset dtd:

<DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “DTD/xhtml1-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; (използва се предимно за <table> и <div>, тази опция задава фон, като този който се намира под тага )

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 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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title> zad1 </title><meta name="Keywords" content="Your keywords here..."></head><body><div style ="background:red; font: italic 20pt Tahoma; width: 300px; float: left;"><h2>Червена секция</h2><p>Това е параграф 1</p><p>Това е параграф 2</p></div><div style ="background:#123456; float: left; width: 300px"><font color="#ffffff" ><h2>Синя секция</h2><p>Това е параграф 3</p><p>Това е параграф 4</p></font><img src="photo_1.gif" width="200" height="150"></div></body></html>

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title> zad2 </title><meta name="Generator" content="Alleycode HTML Editor"><style type="text/css">#d { background-color: #123456; color: white; font-weight: bold; width:300px; height:400px }#s1 { background-color: #FF8040; color: #80FF80 }#s2 { background-color: #FF80FF; color: purple }</style></head><body><div id="d"><p>Това е примерен <span id="s1">текст свързан </span> с прилагане <span id="s2">на стил върху част</span> от реда.</p></div></body></html>

Задача 2.За да сложите стил на част от реда ще трябва да използвате таговете <span> и </span>, като използвате атрибут id или class.За разлика от тага <div> тага <span> не се използва за позициониране, а за директно указване на характеристиките на кратки пасащи от текст.

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

Задача 3.Страницата е разделeна на три части: header, main и footer. Всички те са поставени в общ container. За всяка част има различни формати.

Общият вид на страницата прилича на таблица. Начинът, по който е деклариран xhtml позволява използването на традиционни тагове!

Задача 4.Да предположим, че имате купчина tumbnail /малки картинки/ изображения, които са връзка към по-големите версии на тези изображения - доста често срещан тип уеб страница.

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

Ако картинките са повече, то те ще се пренесат на следващия ред!

Задача 4.Сега, да предположим, че искате да покажете на вашия сайт повече от една категория thumbnails и искате да ги обедините визуално - с общ фон и/или оградени с линия.

Просто ги обединете в един общ DIV: div.container { border: 2px dashed #333333; background-color: #ffeffe; }

Когато обаче правим това, се сблъскваме с един проблем. Когато "залепяте" един елемент за друг, използвайки FLOAT, този елемент вече не заема никакво място, а фонът и ограждащата изображенията линия се показват върху тях вместо около тях. Затова трябва да добавим освен "залепените" една към друга DIV секции разделител. Например DIV като този:div.spacer { clear: both; }

По този начин се отделят картинките от контейнера и не се залепват за горния и долния край на секцията.

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

Задача 5.Често се случва малки изображения (thumbnails) във web-страница, които променят размера си при посочването им с курсора на мишката.

Общия вид на CSS кода е:

div.thumb{float:left;margin:.5em 0;margin-right:10px;border:1px solid #999;padding:2px;}

div.thumb a{display:block;float:left;width:100px;height:100px;line-height:100px;overflow:hidden;position:relative;z-index:1;}

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

Общия вид на HTML кода за едно изображение е:<div class="thumb"><a href="#"><img src="zad7/image.jpg"></a></div>

div.thumb a img{float:left;position:absolute;top:-45px;left:-50px;}

div.thumb a:hover{overflow:visible;z-index:1000;border:none;}

div.thumb a:hover img{border:1px solid #999;background:#fff;padding:2px;}

В някои случаи размерът на картинките не отговаря на размера на секцията. В частта main текстът може да е по-дълъг на някои страници. В този случай има 2 възможности. Текстът да се пренесе на няколко страници или в CSS файла да се използва техниката за повторение на картинката на фона.

Задача 6.Да се създаде страница, която е разделена на 4 логически секции: header, left, main и footer. Картинките в дясната част на слайда да бъдат поставени за фон /background/ на различните секции.

#main { background-image: url(img/main.jpg); background-position: left; background-repeat: repeat-y; float: left; width: 612px; height: 466px;}

#footer { background-image: url(img/bottom.jpg); background-position: bottom; background-repeat: repeat-x; float: left; width: 750px; height: 17px; text-align: right; padding-right: 9px; color: #fff; font-size: 10px;}

В секцията footer картинката за фона се разтяга по хоризонталата, а в секцията main – по вертикалата!

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

Задача 7.Div елементи с еднаква височина

За целта на обхващащия div таг се задава стойност display: table;, на вложения в него div елемент, задаваме стойност display: table-row;, а на вложените в него div елементи, съответно стойности display: table-cell;.

Създайте таблица, съдържаща 2 реда и две колони. В клетките е въведен текст и картинки. Една от клетките има за фон картинка.

Заключение

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

Documents

Програмиране под Интернет