1. Основни понятия
Много уеб-дизайнери предпочитат модулна структура на сайта. който се осъществява с помощта на маркер
Устройството - това е обща правоъгълна площ с редица свойства, като конструкция, поле и подложка (Фигура 1.). блок съдържание може да бъде всичко - текст, изображения, списъци, формуляри за попълване, навигационно меню и т.н.
Frame (граница) - това е една линия, за които е възможно да се уточни характеристики като дебелина, цвят и тип (пунктирана, твърди, пунктирана).
Полета (уплътнение) - разделяне на съдържанието на блока от нейното приложно поле на текста, например, не е "задника" на стените на блока.
Тиретата (марж) - е празно пространство между различните единици, което позволява на предварително определено разстояние на позиция две единици една спрямо друга.
Блокове, както и маса - това е елементи са винаги разположени на страницата вертикално. Това означава, че ако в кодовата страница на записани две последователни блокове, те ще бъдат показани в браузъра с друг. Ако трябва да поставите на няколко пресечки хоризонтално, в техните свойства се дава от параметър, наречен "увийте» (поплавък). Но по-късно по този въпрос.
В тази статия, ние ще се създаде уеб-страница на блоковете. Първо, създаване на контейнер, в който, в нашите кутии подредени блокове. За по-голяма яснота, всяка единица ще има свой собствен цвят. Крайният резултат трябва да бъде такава, както е показано на фиг. 2.
Контейнер ще съдържа пет модула:
ТОП - капачка сайт, обикновено съдържа логото на фирмата, име, заглавия и лозунги, търсене, навигация;
ЦЕНТЪР - съдържа в основния текст на страницата;
Footer - изба сайт с авторски права и друга информация за обекта може да се дублира навигацията, която е признак на добър вкус.
За изпитването на нашия уебсайт, ние се нуждаем най-малко три от най-популярните браузъри - Opera, Fire Fox, Internet Explorer.
Описание уеб-страница се прави най-вече в документа за CSS.
2. "фиксирана" дизайн от блок оформление
1. Създаване на нов документ в Notepad с CSS разширение и го запазете като mystyle.css.
2. Създаване на HTML-документ и да го запазите в същата папка.
Ние определено нашия уебсайт в съответствие с DOCTYPE нарича Стриктно 1.0.
Изискванията са много строги - всички етикети, които нямат затварящ двойка трябва да завършва с пространство с наклонена черта / преди ъгловата скоба затваряне. Но след това, той също прилича на DOCTYPE етикет! Защо е, че той не разполага с тази празнина с наклонена черта? А просто! Исках така че разработчиците на тези строги правила. Но това е единственият случай, когато правилото не работи.
4. Една линия между тагове
и mystyle.css прикачите документ към HTML документ (Фигура 3).5. кода, както е показано на фигура 4 в стилове.
# Този знак се казва, че елементът е уникален атрибут и се използва в HTML документ в DIV тагове веднъж.
6. Добавете mystyle.css капачка място (фигура 5).
7. добавите HTML документ следния код между тялото на етикет (Фигура 6).
И вие трябва да има следното (фиг. 7).
Следващата стъпка е устройството за оформление сайт на трите блока последователно хоризонтално в този блок кодиране, обикновено се използват елемент поплавък. Тя ще позволи на други елементи, за да се увиват около нашия блок наляво или надясно.
8. Отваряне на CSS-документ и добавете следния код (Фигура 8).
9. Веднага след затварящия маркер
поставете следния код (Фигура 9).10. Отворете HTML-документа в браузър. Той трябва да изглежда по следния начин (фигура 10).
11. Сега добавете блок долен колонтитул себе си. Браузърът трябва да показва по следния начин (фигура 11).
Помислете за атрибутите на абсолютни и относителни.
Понякога е необходимо да се постави някакъв блок в строго определена позиция, съответстваща на родителя.
Помислете за най-простия код.
- Създаване на HTML-документ, в организма, което поставя код, както е показано на Фигура 12.
Да предположим, че искате да поставите детето в блок 20 пиксела наляво и под горния ляв ъгъл на родителското устройство.
Нека се опитаме да го направят (т.е. детето е абсолютно позициониране единица спрямо майка).
2. Създаване на стилове, кой тип код в списъка на фигура 13.
3. Проверка на уеб-страницата в браузъра. Ето какво се е случило (фигура 14). Това не е това, което искаме, нали? Детето ни елемент не отишъл при майка ми и дядо ми (т.е. тяло)!
Проблемът е решен просто, майка се дава допълнителна позиция: относителна;
4. Промяна на кода на вашите стилове в съответствие с фигура 15.
5. Проверка на уеб-страницата в браузъра. Резултатите на Фигура 16. Оценка разлика.
Създаване на уеб-страница, появата на която е показано по-долу на фигура 17
3. "Каучук" блок оформление saytmetodom
В задачи 1 и 2, ние разгледа "фиксирана" дизайн от оформлението на блок, като Всички стаи и апартаменти разполагат с точна стойност за ширина и височина в пиксели.
В случая с "гумени" дизайн блокови размери са дадени като процент от ширината на екрана. размер Височина блок може да се определя от съдържанието на блока.
Задача 3. Създаване на "гума" блок оформление, както е показано на Фигура 18.
1. Създаване на HTML-кодиран документ, както е показано на фигура 19. Запазване на документа.
2. Създайте лист със стилове, както е показано на фигура 20. Запазване на документа. Трябва да се получи в резултат на фигура 18 ка.
3. Промяна на размера на браузъра, да анализира поведението на оформлението.
4. Комбиниран блок оформление
Комбиниран оформление блок включва както фиксирана ширина блокове и блокове процент от ширината на екрана.
Задача 4. Създаване на комбиниран оформление блок, както е показано на Фигура 21.
1. Създаване на HTML кодирани документ, както е показано на Фигура 22.
2. Създайте лист със стилове, както е показано на фигура 23. Запазване на документа. Трябва да се получи в резултат на фигура 21 ка.
3. Промяна на размера на браузъра, да анализира поведението на оформлението.
изискванията за оформление:
Свързани статии