slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Програмиране под Интернет PowerPoint Presentation
Download Presentation
Програмиране под Интернет

Loading in 2 Seconds...

play fullscreen
1 / 24

Програмиране под Интернет - PowerPoint PPT Presentation


  • 133 Views
  • Uploaded on

Форматиране с div. Програмиране под Интернет. Автор: Л. Парашкевова. Съдържание:. Таблици или CSS ; XHTML - как да направим валидна страница ; Трите XHTML DTD дефиниции ; Basic CSS background ; Тагът div ; Задачи;. Таблици или CSS.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Програмиране под Интернет' - ziven


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

Форматиране с div

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

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

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

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

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

Тези workarounds бяха толкова добри, че и до ден днешен те са най-разпространеният метод за създаване на уеб страници

Вместо да се влагат таблици в други таблици и да се пълнят празни клетки с интервали, може да се използва много по-прост код и CSS, за да изграждаме красиви сайтове, които се зареждат по-бързо, преправят се по-лесно и са по-достъпни за всички

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

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

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

Решението xhtml

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

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

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

1. Поставете декларацията за тип на документа в началото на страницата2. Декларирайте XHTML DTD / Document Type Definition / в декларацията на документа

3. Декларирайте XHTML именно пространство в елемента html4. Убедете се че елементите head иbody присъстват 5. Направете елемента title първия елемент в елемента head

6. Направете така, че имената на елементите и атрибутите да са написани с малки букви7. Убедете се, че не празните елементи имат завършени тагове8. Присвойте стойности на атрибутите9. Оградете стойностите на атрибутите в двойни кавички

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

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

  • Strict – няма никакви html елементи за представяне, такива като шрифтове таблици и др;
  • Transitional – добавя към strictDTD и HTML елементи за представяне;
  • Frameset – добавя поддръжка за фреймове

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

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

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

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

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

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

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

Дефиницията 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 dtd3
Трите XHTML 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
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 background1
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 background2
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% (проценти от оригиналния размер )

slide14
Тагът div

Div тагът се използва за разделяне на страницата на секции(division). Блоков елемент е, може да съдържа както блокови така и не блокови елементи. Позволява на автора да отдели част от съдържанието на страницата и с употребата на CSS да го форматира/стилизира.

Най често се употребява в комбинация с атрибутите class или id.

Списък на атрибутите на div:

id

class

width

height

title

style

dir

lang

xml:lang

slide15

Задача

Задача 1.

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

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

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

slide16

Задача

Задача 2.

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

За разлика от тага <div>тага <span> не се използва за позициониране, а за директно указване на характеристиките на кратки пасащи от текст.

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

slide17

Задача

Задача 3.

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

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.

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

slide18

Задача

Задача 4.

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

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

Стъпка по стъпка

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

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

slide19

Задача

Задача 4.

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

Просто ги обединете в един общ DIV:

div.container

{ border: 2px dashed #333333; background-color: #ffeffe; }

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

div.spacer

{ clear: both; }

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

slide20
Задача 5.

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

Това, което ще направим е промяна на размера на видимата част от изображението. За целта ще използваме възможностите на свойството overflow (препълване). Това свойство определя как да се показва даден елемент, когато размера му надвишава размера на контейнера му. Контейнерът има фиксиран размер.

Възможните стойности на overflow са: visible, hidden, scroll и auto.

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

Концепция

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

slide21

Задача

Задача

Задача 5.

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

Общия вид на HTML кода за едно изображение е:

<div class="thumb"><a href="#"><img src="zad7/image.jpg"></a></div>

Общия вид на 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;

}

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;

}

slide22

Задача

Задача 6.

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

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

#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;}

#main {

background-image: url(img/main.jpg);

background-position: left;

background-repeat: repeat-y;

float: left;

width: 612px;

height: 466px;}

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

slide23

Задача

Задача 7.

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

За разлика от табличното представяне на HTML елементите, при използването на div тага, се появяват някои усложнения. За преодо-ляването им се налага да се използват допълнителни техники. В случая ще покажем съседни блокови елементи с различно съдържание и на еднаква височина.

Въпреки валидния XHTML/CSS код и правилното структуриране, разликата във височината на елементите променя цялата визия на HTML документа.

Решението на този проблем е в използването на свойството display за блоковия елемент (div) и указването на стойности, които да го карат да се държи и изобразява от браузърите като таблица, а неговите вложени елементи да се идентифицират като редове и колони.

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

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

slide24
Заключение

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

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