Свали CD папка, за да преминат през курса "уроците на HTML и CSS» (141 MB)
Таблично оформление - често срещано явление днес метод оформление.
Ако една маса се използва за оформление на страницата и проектиране на дизайна, той се нарича създаване на прототипи.
Фигура 1 показва външния вид на сайта, на фигура 2 - отбелязва се в зелено маса, която е в основата на оформлението на този сайт. За решетка развитие не се виждаше, използвайте таблица с невидима граница. За тази "0" Гранична = атрибут в таблицата с маркер.
Фигура 1. Външен вид на сайта
Фигура 2. маса, която лежи в основата на структурата на сайта
Всички разнообразие от дизайн маси средство може да бъде намален на три вида:
"Фиксиран" (твърд)
"Каучук" дизайн и
Комбинация от първите две.
1. "Fixed" дизайн на маса (оформление) на сайта
В "фиксирана" оформлението на страницата Дизайнът е създаден на базата на определена ширина на таблицата, като оформление ширина маса 1000px
.
Пример 1. "Fixed" уеб дизайн. Фигура 3 е пример за код на фиксирана (твърд) дизайн на базата на ширина 1000px оформление маса. Фигура 4 - появата на оформлението.
Изборът на ширината на масата зависи от ориентацията на определени потребители разрешаване на монитори. По този начин, за хоризонтална резолюция 1024 пиксела - необходимо да се вземат на ширината на таблиците за създаване на прототипи 960-980 пиксела за ширина ekrana1280px - ширината на таблицата може да отнеме прототипи 1200-1220px т.н.
В този случай, на сайта ще бъдат показани на цялата ширина на екрана на монитора по-високи резолюции от двете страни на оформлението на сайта ще остане празно място на монитори с по-ниска разделителна способност на екрана ще се появи в долната част на лентата с хоризонтална превъртане.
1. Изпълнение на уеб-страницата на базата на фигури 3 и 4. Запазете файла.
2. Промяна на размера на браузъра, да анализира поведението на оформлението.
2. "Каучук" дизайн на маса (оформление) на сайта
За "гума обект" се характеризира с използването на таблици ширина определя като процент от ширината на браузъра. В този случай, на страницата ще pereverstyvatsya в зависимост от ширината на браузъра.
Пример 2: "Каучук" уеб дизайн. Фигура 5 е пример за код "гума" дизайн на базата на оформление маса 100% от ширината на екрана. Фигура 6 - появата на оформлението.
1. Изпълнение на уеб-страницата на базата на фигури 5 и 6. Запазете файла.
2. Промяна на размера на браузъра, да анализира поведението на оформлението.
3. Комбиниран дизайн на сайта
Може да се направи комбиниран гъвкава структура на обекта (Фигура 7) -. Комбинация от "фиксирана" и "гума" дизайн. когато ширината на някои от клетките на таблицата се определя от абсолютната стойност (в пиксели), и тези клетки, които са свързани с каучук, са определени като процент на ширината на таблицата за разпределение, или (широчина) широчина параметър не е посочено изобщо. Например:
В горния пример, клетка ширина "гума" не е посочено и ще варира в зависимост от оставащото свободно пространство екран.
Така, ако ширината на екрана е 1600 пиксела, широчина "гума" клетка ще 1600-100-50-150 = 1300 пиксела.
Ако ширината на екрана 1280, широчина "гума" клетка ще 1280-100-50-150 = 980 пиксела.
Ако ширината на екрана на 1024 пиксела широчина "гума клетка" ще 1024-100-50-150 = 724 пиксела.
Пример 3: комбинация от "фиксирана" и "гума" дизайн. Фигура 8 показва пример на комбиниран код дизайн, въз основа на оформление маса 100% от ширината на екрана. Фигура 9 - появата на оформлението.
1. Изпълнение на уеб-страницата на базата на фигури 8 и 9. Запазване на файла.
2. Промяна на размера на браузъра, да анализира поведението на оформлението.
Най-често макет компонент не се състои от една таблица, а по определен начин от няколко вложени една в друга. Това ви позволява да разширите възможностите за създаване сложен дизайн. Тя ви позволява да създадете макет решетка сложна структура.
Пример 4. каучук сайт с вложени таблици
1. Изпълнение на уеб-страницата на базата на цифрите 10 и 11. запишете файла.
2. Промяна на размера на браузъра, да анализира поведението на оформлението.
1. С помощта на елементите MyHouse.ru сайт, създайте две уеб-страница с маса оформление комбинира сайт.
2. В горната част на сайта публикувате превъртане.
3. В лявата част на сайта - меню от дясната страна - съдържанието на уеб страницата.
4. Всеки уеб-страница хипервръзка, която води към друга, можете да създадете страница. Хиперлинкът трябва да е взаимно, т.е. На първата страница трябва да бъде да се премине към втората страница и на втората страница, съответно, на първата страница.
