Дизайн на плочки. Мащабируемост и видове уеб дизайн Как работи блоковото оформление

Цел на урока:Въведение в блоково CSS оформление. Придобиване на умения за използване на блоково оформление на уебсайт

• При работа със слоеве или, с други думи, блокове и div елементи, основната тежест пада върху CSS, т.к. Без свойства слоевете са практически нищо.
• За съжаление все още има проблем със съвместимостта на различни браузъри при работа с блокове. Тези. едни и същи свойства дават различни резултати различни браузъри. За борба с подобни проблеми има така наречените хакове. хакване- това е набор от техники, когато на отделни браузъри се доставя код, който се разбира само от този браузър и се игнорира от другите.

Отличителни черти от оформлението на таблицата

Да приемем, че трябва да създадете шаблон на страница с горен, долен колонтитул и две колони.
Разлики:

Фиксиран дизайн или
твърдо блоково оформление (две колони)

• Фиксираното оформление включва използването на слоеве с дадена ширина, която се определя от разделителната способност на монитора на потребителя.
• Тъй като най-популярната резолюция на монитора сред мрежовите потребители е 1024 × 768, препоръчително е да се съсредоточите върху нея. Общата ширина на блоковете в този случай е 900–1000 пиксела (малка част от пикселите са необходими за ленти за превъртане и граници на прозореца на браузъра).
• Основният блок със съдържание е поставен в центъра, тогава „свободните“ полета около краищата изглеждат добре дори с висока резолюциямонитор.

Фиг.1. Пример за фиксиран дизайн

Общата ширина може да бъде избрана от дизайнера, което се нарича „на око“ или след събиране на допълнителна информация.

Пример:създайте фиксиран дизайн на уебсайт въз основа на горното изображение

Изпълнение:

• „Разделяме“ всички основни елементи на страницата на блокове, както следва:
  • блок 1— първи слой (id="shapka"),
  • блок 2 и 3се съдържат в един блок (id="контейнер"),
  • блок 2— слой с меню (id="menu"),
  • блок 3— слой със съдържание (id="content"),
  • блок 4— слой с id="bottom" .

Нека изобразим схематично подреждането на блоковете:

<тяло > <div id = "shapka" > 1</div> <div id = "контейнер" > <div id = "меню" > 2</div> <div id = "съдържание" > 3</div> </div> <div id = "bottom" > 4</div> </тяло>

1. Задайте свойствата на „заглавката“ (блок 1)

• Избираме общата ширина на слоевете „на око“ - 750 пиксела.

margin-right: автоматично; margin-left: автоматично;

• или задайте височината с помощта на отстъп

Например:

подложка-отгоре: 15px;

подложка-отгоре: 15px;

padding-bottom: 15px;

Целият код за заглавката:

#shapka( text-align: left; /* Подравняване на вътрешното съдържание вляво */ width: 750px; /* Ширина на блока и обща ширина */ фон: #900000; /* Цвят на фона */ височина: 50px; /* Височина block */ margin-right: auto; /* Автоматичен отстъп отдясно */ margin-left: auto /* Автоматичен отстъп отляво: 10px )

• 2. Създайте свойства на контейнера
• Задайте ширината на контейнера: тя трябва да бъде 750px + 20px (обща ширина на оформлението + подложка в общата ширина на оформлението). Тези. контейнерът няма подложка, така че увеличете ширината му с 10 пиксела отляво и 10 пиксела отдясно

Ако оформлението трябва да се побере в лявата част на екрана, браузърът ще направи това автоматично. В нашия случай ще центрираме контейнерния блок

#container ( ширина: 770px; /* Ширина на слоя или (ширина на оформление+20) */ margin-right: auto; /* Автоматичен отстъп отдясно */ margin-left: auto; /* Автоматичен отстъп отляво */ )

• 3. Създайте свойства за блок 2 - меню
• Слой номер 2 с ширина 200 пиксела (ширина)
• За същия слой (меню) задаваме потока около съседния блок, т.е. свойство float: ляво
• Задаваме вътрешни полета, така че текстът да не „залепва“ към ръба на слоя (свойство за подложка)

Задайте цвета на текста и фона (фон, цвят)

#menu ( ширина: 200px; /* Ширина на слоя */ float: ляво; цвят: бяло; /* Цвят на текста */ фон: #008080; /* Цвят на фона */ подложка: 10px; /* Вътрешни полета около съдържанието */ )

• 4. Създайте свойства за блок 3 - съдържание Задайте ширината на слоя в размер на 770px - 200px = 570px,Но!
• Тъй като сме задали подложка и в двата блока 2 и 3, трябва да извадим още 40 пиксела: 20 за подложката на кутията на менюто и 20 за подложката на кутията със съдържание. Нека вземем ширината на слоя 770px - 200px - 40px = 530px Настроихме обвивката да плава: ляво, елиминирайки грешкатаИнтернет браузър
• Explorer: ако не зададете свойството, ще има празнина между слоевете. Освен това, ако не зададете това свойство, блокът ще се появи зад блока на менюто и само неговото съдържание (текст) ще тече около блока на менюто вдясно.

Задайте цвета на фона (background) и вътрешните полета (padding)

#content ( /* Дясна колона */ ширина: 550px; /* Ширина на слоя */ float: ляво; /* Обвиване със съседния слой */ padding: 10px; /* Вътрешни полета около съдържанието */ фон: #e0e0e0; /* Цвят на фона */ )

• 5. Създаване на свойства за блок 4 - “сутерен”
• Задайте ширината на слоя на 750 пиксела
• Задаване на вътрешни полета за подпълване
• Задайте цвета на фона (background) и текста (color)
• Центрирайте блока (поле-дясно и поле-ляво)

#bottom( width:750px; /* Ширина на слоя */ clear:left; /* върне блокирането и поставете слоя отляво */ padding: 10px; /* Вътрешни полета около съдържанието */ background:#444; /* фон */ цвят :#fff; /* маржин-дясно: авто;/авт.

Краен код: всички заедно

<style type = "text/css" >

1
2
3
4

Резултат:



Фиг.2. Твърдо блоково оформление с две колони

Фиксиран дизайн за три колони

При фиксиран дизайн за оформление с три колони има два основни подхода за конструиране на модулна мрежа:

1. Използване на свойството за позициониране на колони една до друга.
2. Използване на набор от тези CSS свойства, които са предназначени за позициониране на слоеве.

Да разгледаме първия случай.

Използване на свойството float за оформление с три колони

включено ориз. 3— резултатът от използването на свойството за оформление с три колони. Всъщност се използват 6 слоя - отделно за заглавките на колоните и отделно за самите колони.

ориз. 3. Фиксиран дизайн с три колони

Пример:създайте уеб страница с оформлението с три колони, показано в ориз. 3. Използвайте техники за оформление на фиксирани блокове

Изпълнение:

• Нека дефинираме три слоя за заглавките (#header...) и три слоя за колоните (#col...).
• Тъй като колоните и техните заглавки са разположени на два различни реда, ще ги комбинираме в контейнери (class="container").
• Получаваме схематично представяне на подреждането на блоковете:

Получаваме следната html структура:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<тяло > <div клас = "контейнер" > <div id = "header1" >Евгений Евтушенко</div> <div id = "header2" >Валерий Брюсов</div> <div id = "header3" >Едуард Асадов</div> </div> <div клас = "контейнер" > <div id = "col1" >Мечтая за стар приятел<br/>който стана враг<br/>но не мечтая за враг,<br/>но от същия приятел.<br/>Той не е с мен<br/>но сега той е навсякъде<br/>и главата отива<br/>от мечтите навсякъде.</div> <div id = "col2" >Великото е неуловимо близо,<br/>Само от разстояние е тържествено,<br/><br/> </div> <div id = "col3" ><br/><br/><br/> </div> </div> </тяло>

2. Добавяне на стилове за заглавки (заглавие... селектор) и колони (кола... селектор)

• Ще направим ширината на колоните и заглавията еднаква за всички. Тъй като има 3 колони и средната ширина на страницата трябва да бъде приблизително 700-900 пиксела, ще зададем ширината на колоната на 250 пиксела.

#header1, #header2, #header3, #col1, #col2, #col3 (ширина: 250px; /* Ширина на колона */)

• Нека добавим вътрешни полета (отстъпи от съдържанието на текста) - padding и външни отстъпи, за да осигурим място между колоните. Тъй като свойствата са зададени за всички колони наведнъж, а самото оформление не е центрирано, а подравнено вляво, ще зададем отстъпа само от едната страна - отляво - за всички колони едновременно (margin-left ).

#header1, #header2, #header3, #col1, #col2, #col3 (ширина: 250px; /* Ширина на колоната */ подложка: 5px; /* Полета около текста */ margin-left: 5px; /* Ляво поле * / )

• Ще добавим и външно поле в горната част, осигуряващо вертикално разстояние между заглавията и колоните, както и поле за заглавията от горната част на страницата (margin-top).

#header1, #header2, #header3, #col1, #col2, #col3 ( ... float: ляво; )

• Добавете рамка за блоковете и задайте параметрите на шрифта (семейство шрифтове, тегло на шрифта, размер на шрифта, цвят).

#header1, #header2, #header3, #col1, #col2, #col3 ( ... граница: 1px плътно черно; /* Граница около слоя */ font-family: Verdana, Arial, sans-serif; /* Не serif или нарязан шрифт */ font-weight: bold; font-size: 80% /* Размер на шрифта */ цвят: /* Цвят на текста на заглавието */ )

Получаваме кода:

#header1, #header2, #header3, #col1, #col2, #col3 (ширина: 250px; /* Ширина на колоната */подложка: 5px; /* Полета около текст */ /* Горна подложка */поплавък: наляво; /* Свързване на колони хоризонтално */ /* Граница около слоя */ /* Несериен или sans serif шрифт */тегло на шрифта: удебелен; /* Удебелен текст на заглавието */размер на шрифта: 80%; /* Размер на шрифта */цвят : бял ; /* Цвят на текста на заглавието */ }

#header1, #header2, #header3, #col1, #col2, #col3 (ширина: 250px; /* Ширина на колоната */ подложка: 5px; /* Полета около текста */ margin-left: 5px; /* Ляво поле * / margin-top: 2px; /* Top margin */ float: ляво; /* Шрифт без серифи */ тегло на шрифта: удебелен; /* Размер на шрифта */ размер на шрифта: бял; /* Цвят на текста на заглавието */ )

• Да инсталираме фонотделно за всеки селектор.

#header1 (фон: #B38541;) #header2 (фон: #008159;) #header3 (фон: #006077;) #col1 (фон: #EBE0C5;) #col2 (фон: #BBE1C4;) #col3 (фон: #ADD0D9 ;)

#header1 (фон: #B38541;) #header2 (фон: #008159;) #header3 (фон: #006077;) #col1 (фон: #EBE0C5;) #col2 (фон: #BBE1C4;) #col3 (фон: #ADD0D9;

Нека да разгледаме междинния резултат:

ориз. 4. Междинен резултат

3. Задаване на стил за контейнери

• Сега трябва да комбинирате заглавките и колоните в отделни слоеве на контейнери и да им дадете подходящия стил - отмяна на обвиването (изчистване)

.контейнер (ясно: и двете; /* Отменя float wrapping */ }

Контейнер (изчистване: и двете; /* Отменя float wrapping */)

• Сега всичко, което остава, е да промените шрифта на текста в колоните, като промените неговия размер, стил и цвят.

#col1, #col2, #col3 ( семейство шрифтове: "Times New Roman", Times, сериф; /* Серифен или серифен шрифт */ размер на шрифта: 100%; /* Размер на шрифта */ тегло на шрифта: нормално ; /* Нормален стил */ цвят: черен; /* Цвят на текста */ )

Краен код: всички заедно

<style type = "text/css" >

Резултат:

ориз. 5. Резултат

Използване на позициониране на слоя за оформление с три колони

Да вземем за пример оформление, състоящо се от три колони, разделени разделителна линия(фиг. 6).

ориз. 6. Позициониране на слоеве за оформление с три колони с разделител

Пример:създайте уеб страница с оформление в три колони с разделителна линия, показано в ориз. 6. Използвайте техники за фиксирано оформление с позициониране на слоя

Изпълнение:

1. Създаване на структурата на HTML кода

• За това оформление е достатъчно да създадете три слоя div за всяка колона.

Следователно структурата ще бъде проста:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<тяло> <див id= "col1"> Иван Бунин </ бр></ бр> </ бр> </ бр> </ бр> </ див> <див id= "col2"> </ бр> Прозорецът свети златисто. </ бр> </ бр> Всичко е покрито с бял сняг. </ див> <див id= "col3"> И всички сутрини са светли и чисти </ бр> </ бр> </ бр> Хризантеми на моя прозорец. </ бр></ бр> 1903 </ див> </ тяло>

2. Добавяне на стилове за колони

• Нека зададем еднаква ширина на колоните (width) и вътрешни полета вертикално и хоризонтално (padding).

#col1, #col2, #col3 (ширина: 250px; /* Ширина на колона */ подложка: 0 6px; )

• За да премахнете блоковостта на слоевете, т.е. за да ги позиционирате един до друг хоризонтално, трябва да зададете свойството css float.

#col1, #col2, #col3 { ширина: 250 пиксела; /* Ширина на колоната */ подплата: 0 6px; /* Полета вертикално и хоризонтално */ плавам: наляво; /* Обвиване на слоеве */ }

#col1, #col2, #col3 (ширина: 250px; /* Ширина на колона */ padding: 0 6px; /* Вертикални и хоризонтални полета */ float: ляво; /* Обвиване на слоеве */ )

• Тъй като разделителната граница трябва да присъства само от вътрешната страна на слоевете, трябва да се добави рамка само към два слоя от едната страна (граница).

#col1, #col2 { граница-дясна: 1px твърдо #000 ; /* Полета вертикално и хоризонтално */ плавам: наляво; /* Обвиване на слоеве */ } #col1, #col2 { граница-дясна: 1px твърдо #000 ; /* Параметри на реда вдясно от текста */ }

#col1, #col2, #col3 (ширина: 250px; /* Ширина на колона */ подложка: 0 6px; /* Вертикални и хоризонтални полета */ float: ляво; /* Обвиване на слоеве */ ) #col1, #col2 ( граница -вдясно: 1px solid #000; /* Опции за линия вдясно от текста */ )

</ стил> </ главата> <тяло> <див id= "col1"> Иван Бунин </ бр></ бр> На прозорец, сребрист от скреж, </ бр> Хризантемите цъфнаха за една нощ. </ бр> В горните прозорци - небето е ярко синьо </ бр> И засядане в снежния прах. </ див> <див id= "col2"> Слънцето изгрява весело от студа, </ бр> Прозорецът свети златисто. </ бр> Утрото е тихо, радостно и младо. </ бр> Всичко е покрито с бял сняг. </ див> <див id= "col3"> И всички сутрини са светли и чисти </ бр> Ще видя цветове отгоре, </ бр> И до обяд ще бъдат сребърни </ бр> Хризантеми на моя прозорец. </ бр></ бр> 1903 </ див> </ тяло>

Дизайнът с три колони е готов!

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

Разлики между блоково оформление и таблично оформление

Ако оформлението на таблицата предполага, че съдържанието на страницата е вътре в етикета

, тогава концепцията за блоково оформление се основава на активното използване на универсални тагове е таблица, която трябва да се използва за показване на таблични данни и нищо повече.

Единственият забележим недостатък на блоковото оформление е, че сайтовете, направени на него, могат да се показват по различен начин в браузърите. За да избегнете това, трябва да направите оформлението „кръстосано браузърно“, тоест да се показва еднакво от всеки браузър.

Същността на блоковото оформление

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

Всяка част от страницата е поставена в отделен блок