Вопрос масштабируемости сайта актуален для каждого веб-дизайнера. Согласитесь, создавая авторский визуальный продукт, хочется, чтобы он оставался одинаково красивым и удобным для пользователей любых устройств. Вариант неприемлем, когда блог или сайт смотрится отлично на экране с разрешением 1920х1080px и совершенно не читабелен на экране смартфона с параметрами 240х320px.
10-15 лет назад не было такого разнообразия и количества мониторов. Поэтому разрабатывать дизайн для сайтов было просто. Создаёшь обычный статический дизайн под фиксированную ширину экрана и можешь не сомневаться - большинство пользователей увидит сайт так, как и задумано.
Сегодня же у пользователей не только мониторы с самым разным разрешением, 3,5 миллиарда человек заходят в интернет с мобильных устройств - нетбуков, планшетов, смартфонов и т.д. Создавать сайты, используя старые методы, уже не комильфо.
Первое решение, которое пришло в голову многим и разработчикам - создать просто отдельную "лёгкую" версию сайта для мобильных устройств. Так поступили многие крупные порталы. Однако за последние годы количество различных видов и подвидов устройств, с которых пользователи выходят в сеть, выросло просто невероятными темпами. А ещё надо учитывать, что владельцы планшетов или смартфонов также просмотривают полноценную версию сайта. Поэтому в конце концов веб-дизайнеры и разработчики пришли к идее "адаптивного" дизайна.
До сих пор можно столкнуться с несколькими версиями того, как понимают "адаптивный дизайн" разные IT-специалисты. Попробуем же разобраться, какие есть варианты разработки дизайна сайта.
"Статичным" или "статическим" называется сайт, который состоит из неизменяемых HTML-страниц. Такой сайт подразумевает наличие закрепленной темы с фиксированной шириной и чаще всего содержит одну или буквально несколько страниц. Чтобы отобразить такой сайт по центру экрана достаточно 1000 px. Контент всегда будет выравниваться строго по центру.
Также стоит учесть, что обновить статический сайт может только человек, обладающий хорошим опытом веб-разработки. В нём нет админпанели, поэтому все изменения нужно делать через исходный код.
Преимущества статического дизайна:
Недостатки статического дизайна:
Статичных сайтов раньше было намного больше – появление и развитие CMS способствовало сокращению их количества в пользу динамических. Примеры статических сайтов:
"Адаптивный дизайн - одна из самых актуальных тенденций в разработке сайтов, пришедшая всерьез и надолго" - такими заголовками сейчас пестрит практически любой сайт, посвященный веб-разработке и . Узнать о том, что это такое, не составит труда. Однако есть некоторые тонкости, которые касаются понимания и восприятия такого дизайна. Посмотрим на них.
Основная особенность такого дизайна в том, что ширина колонок задаётся в процентах, а не в пикселях. Поэтому "резиновый" дизайн при любом разрешении монитора растягивается на всю ширину экрана. Сделать такой дизайн, особенно при использовании блочной вёрстки несколько сложнее, чем фиксированный, зато пользователь не будет видеть пустых полей на странице. Примечательно, что резиновый дизайн изначально довольно широко стал использоваться в рунете, в то время как на Западе разработчики очень долго сохраняли приверженность статическому дизайну.
Тем не менее, у простого резинового дизайна есть определённые ограничения и недостатки. При том большом разбросе размеров экрана, который есть у современных устройств, сложно реализовать резиновый дизайн так, чтобы при любом разрешении всё одинаково хорошо выглядело, чтобы дизайн не "разъезжался", чтобы картинки и видео не вылезали за границы блоков и т. п. По этой причине для создания действительно универсального сайта потребовались другие решения.
Чтобы сайт одинаково хорошо выглядел и на мобильном телефоне и на большом мониторе, разработчики некоторых сайтов пошли по пути разработки нескольких, по сути, независимых, вариантов дизайна для разных устройств. Когда пользователь заходил на сайт, сервер определял тип устройства и разрешение экрана и "отдавал" ту или иную версию сайта. При этом каждая версия была заранее оптимизирована под разные разрешения. Для версий под экраны с маленьким разрешением использовались уменьшенные изображения, а некоторые элементы вообще убирались. Сама компоновка блоков также отличалась от "большой" версии.
Адаптивный дизайн оправдан при создании масштабных проектов: информационных порталов, интернет-магазинов, форумов, корпоративных сайтов и других подобных им ресурсов. Особенно эффектно он смотрится на мониторах с диагональю не менее 15,6’’.
Принцип адаптивности строится на создании одного URL, который подстраивает контент под различные форматы экранов. Примеры:
Посмотрите, как меняется расположение текста и картинок на различных экранах. Почему это круто? Одна из причин - Google отдаёт предпочтение таким ресурсам в поисковой выдаче. Другая причина - такие сайты легче проектировать и поддерживать, а это упрощает работу многих людей.
Последним методом, к которому пришли веб-дизайнеры, стал "отзывчивый" дизайн (англ. responsive design), который противопоставили обычному "адаптивному" дизайну (англ. adaptive design), хотя до настоящего времени эти термины часто путают и употребляют в похожем смысле. "Отзывчивый" дизайн соединяет в себе черты адаптивного и "резинового" дизайнов. Он автоматически подстраивается под любую ширину экрана, как и резиновый. При этом в процессе подстраивания может меняться расположение блоков, размер картинок. Также могут появляться, пропадать или изменяться некоторые элементы. Например, обычное горизонтальное меню может поменяться на выпадающее.
Ещё более важный момент - места, из которых люди будут приходить на ваш сайт. Поэтому очень важно учитывать любую скорость интернета, ведь огромное количество людей живут в отдалённых районах, где скорость интернета даже не 1 мб/с. Существует исследование, согласно которому, 57% пользователей уйдут с вашего сайта, если он загружается дольше нескольких секунд. Не так давно Google начал учитывать скорость при ранжировании сайтов. Она не оказывает большое влияние на позицию сайтов со средней скоростью загрузки, но если страница не загружается за определённое время, то поисковый алгоритм применяет к такому сайту штрафные санкции.
Всё это заставляет нас внимательнее взглянуть на скорость интернета и предоставить пользователю возможность загрузить контент достаточно быстро на самых малых скоростях. То есть "отзывчивый" дизайн - это уже не только история про размеры экранов, но различные сценарии, решения для которых должны быть гибкими и продуманными "от и до".
В веб-дизайне новые тенденции появляются постоянно. Какие-то из них впоследствии начинают доминировать, другие со временем выходят из моды. Всего несколько лет назад сайты с бесконечным скроллингом считались экзотикой, а сегодня это один из главных трендов. Широкое распространение мобильных устройств также сделало популярным так называемый плиточный или блочный дизайн и, по всей видимости, мы имеем дело с долгосрочным трендом.
Самым популярным сайтом с плиточным дизайном является Pinterest, однако можно заметить, что сайтов, построенных на основе блоков, с каждым днем становится все больше. Дизайнеры используют плитки-карточки в первую очередь потому, что такой подход позволяет создать удобный интерфейс, очень дружественный по отношению к пользователю. Когда посетитель попадает на подобный сайт, он сразу же понимает, как все устроено – карточки дают всю необходимую первичную информацию.
CARD-BASED DESIGN
Если посмотреть на любой сайт, созданный на основе плиток, то в первую очередь станет заметна сетка, являющаяся основой дизайна. Плитки имеют одинаковый размер, в результате чего становятся легко различимыми столбцы и строки – а это признак хорошо организованной системы. Плиточный дизайн никак нельзя назвать аморфным – он предельно строг и лаконичен.
С помощью блоков гораздо легче создать информационную архитектуру сайта. Информационная архитектура – это упорядоченный интеллектуальный поток, попадая в который, посетители гораздо легче усваивают информацию и быстрее перемещаются между страницами, открывая те из них, которые кажутся пользователям наиболее интересными.
Чем хорош card-based design так это тем, что он в полной мере позволяет использовать визуальную иерархию. Так как каждая карточка является частью столбца или строки, дизайнеры могут управлять движением глаз посетителя, размещая информацию по степени ее важности. То есть, яркая плитка, расположенная слева в первом верхнем ряду, гарантированно будет восприниматься пользователем, как наиболее интересная.
Если посмотреть на дизайн сайта, представленного выше, то становится более понятно, как все это работает. Даже одного взгляда достаточно, чтобы разобраться в информационной иерархии. Самые новые статьи и прочий контент расположены в верхней строке, а страницы с ранее опубликованными материалами находятся ниже. Пользователь понимает, что новизна является критерием важности в дизайне и в дальнейшем, заходя на сайт, в первую очередь будет просматривать веб страницы из первого ряда.
ЗНАЧЕНИЕ ИЗОБРАЖЕНИЙ
О том, что человек усваивает визуальную информацию гораздо лучше, говорилось столько раз, что это набило оскомину. Да, большинство людей является визуалами и эту их особенность стоит обязательно учитывать при создании сайта. Сайт с плиточным дизайном использует изображения с максимальной эффективностью: практически любой текст, сопровождающий картинку-плитку, является вторичным по отношению к изображению.
В наше время, когда доступ к широкополосному интернету открыт для большого числа пользователей, значение изображений, используемых на сайте, резко возрастает. Дизайнеры все чаще стали использовать качественные фотографии в высоком разрешении, так как они делают сайт более привлекательным и при этом почти не влияют на скорость открытия веб-страницы. Проведенные исследования подтверждают, что качественные изображения, в частности фото, на которых изображены улыбающиеся люди, способны влиять на коэффициент конверсии.
Следовательно, делая акцент на использовании изображений, дизайнер может создать сайт, который с большой вероятностью будет отвечать потребностям посетителей. Что и доказывает пример Pinterest, который в рейтинге Alexa находится на пятнадцатом по популярности месте в США.
ОПЫТ ВЗАИМОДЕЙСТВИЯ
Любой дизайнер знает, что пользовательский опыт – это самое главное. Это основа, поэтому об UX нужно помнить на всех этапах проектирования. Причина, по которой сайты с плиточным дизайном появляются все чаще, состоит в том, что такая подача контента способствует улучшению пользовательского опыта. Посетителям интересно, они не испытывают трудностей при взаимодействии с сайтом, поэтому они будут и дальше посещать веб-ресурс, так как они получили положительный опыт.
В качестве примера можно привести сайт Dribbble – его создатели использовали карточки для того, чтобы улучшить опыт взаимодействия. В случае с Dribbble это было самое логичное решение, так как в этом сообществе пользователи делятся друг с другом плодами своего творчества.
Для людей, которые хотят посмотреть фотографии, иллюстрации и другие изображения, плиточный дизайн является идеальным способом подачи контента. Так как визуальная информация воспринимается мозгом очень быстро, то опыт пользовательского взаимодействия оказывается положительным – посетители сайта могут быстро просмотреть плитки и понять, что им наиболее интересно. Как только они найдут то, что представляет интерес, они могут кликнуть по картинке и более подробно изучить представленную на веб-странице информацию.
БУДУЩЕЕ ПЛИТОЧНОГО ДИЗАЙНА
В последнее время много говорится о том, что пользователей мобильных устройств становится все больше. Во многих развитых странах мобильные гаджеты уверенно теснят настольные компьютеры. Плиточный дизайн прекрасно вписывается в этот тренд – ведь подобные сайты очень легко адаптируются для показа на планшетах или смартфонах. Карточки позволяют расположить контент таким образом, что он будет прекрасно восприниматься на устройствах с любым размером дисплея. Разумеется, card-based design можно использовать далеко не везде, во многих случаях плитки не смогут помочь в решении поставленной перед дизайнером задачи. Тем не менее, тренд на блочный дизайн является долгосрочным, так как он является следствием увеличивающегося количества пользователей мобильных устройств.
Исследуя просторы сети, многие наверняка замечают, что большинство сайтов построены на основе сетки. Элементы или блоки в таких сайтах расположены на странице не хаотично, как это было несколько лет назад, а в определенной последовательности и структурированы (порой это бывает незаметно при первом взгляде). Такие сайты хорошо сбалансированы и, как правило, выглядят чисто и опрятно. Большая заслуга этой опрятности принадлежит сетке , лежащей в основе дизайна и предоставляющей пользователю понятную, неискаженную структуру сайта.
Несмотря на то, что сетки, как правило, представляют простые пересечения горизонтальных и вертикальных линий с заданным интервалом, многие дизайнеры используют их в качестве украшения и подчеркивания очевидных геометрических фигур и визуальных путей. Мы можем увидеть эти пути и фигуры в сайтах-портфолио, галереях, блогах и других творческих проектах. Это и не удивительно, так как сетка обладает рядом полезных свойств и преимуществ, например, таких как:
Ну и, конечно же, сетка как нельзя лучше подходит для демонстрации красоты прямых линий (за далеко ходить не придется). Ниже мы подготовили сайты, в которых сетка является больше, чем просто основой дизайна.
Как уже было сказано, сетка является неотъемлемой частью дизайна и легко превращает хаос в порядок, а в дизайне сайта, как нигде более, эта возможность действительно важна. Большинство пользователей хотят получить информацию быстро и просто, и нет лучшего способа, чем представить им понятную и хорошо организованную структуру.
Нет, это вовсе не означает, что внешний вид сайта должен быть линейным и простым. Порой, даже простые геометрические фигуры, умело «разбавленные» цветами, изображениями и графикой (вспомните ), могут быть по-настоящему привлекательными. Как считаете? Разве такое явное разделение на блоки не выглядит привлекательным?
Цель урока: Знакомство с блочной версткой CSS. Получение навыков использования блочной верстки сайта
Допустим, необходимо создать шаблон страницы с «шапкой», «подвалом» и двумя колонками.
Отличия:
Рис.1. Пример фиксированного дизайна
Пример: создать фиксированный дизайн сайта на основе представленного выше изображения
Схематично изобразим расположение блоков:
<body > <div id = "shapka" > 1</ div > <div id = "container" > <div id = "menu" > 2</ div > <div id = "content" > 3</ div > </ div > <div id = "bottom" > 4</ div > </ body > |
1. Задаем свойства «шапки» (блок 1)
margin-right: auto; margin-left: auto;
например:
padding-top : 15px ; padding-bottom : 15px ; |
padding-top: 15px; padding-bottom: 15px;
Весь код для шапки:
#shapka{ text-align: left; /* Выравнивание внутреннего контента по левому краю */ width: 750px; /* Ширина блока и общая ширина*/ background: #900000; /* Цвет фона */ height: 50px; /* Высота блока */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ padding: 10px; }
2. Создаем свойства контейнера
#container { width: 770px; /* Ширина слоя или (ширина макета+20) */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ }
3. Создаем свойства для блока 2 — меню
#menu { width: 200px; /* Ширина слоя */ float: left; color: white; /* Цвет текста */ background: #008080; /* Цвет фона */ padding: 10px; /* Внутренние поля вокруг содержимого */ }
4. Создаем свойства для блока 3 — контент
#content { /* Правая колонка*/ width: 550px; /* Ширина слоя */ float: left; /* Обтекание с соседним слоем */ padding: 10px; /* Внутренние поля вокруг содержимого */ background: #e0e0e0; /* Цвет заднего фона */ }
5. Создаем свойства для блока 4 — «подвал»
#bottom{ width:750px; /* Ширина слоя */ clear:left; /* возвращаем блочность и располагаем слой слева */ padding: 10px; /* Внутренние поля вокруг содержимого */ background:#444; /* фон */ color:#fff; /* цвет текста */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ }
Итоговый код: всё вместе
<style type = "text/css" > |
/* для блока 1 - шапка */ #shapka { text-align : left ; /* Выравнивание внутреннего контента по левому краю */ width : 750px ; /* Ширина блока и общая ширина*/ background : #900000 ; /* Цвет фона */ height : 50px ; /* Высота блока */ margin-right : auto ; /* Авто-отступ справа */ margin-left : auto ; /* Авто-отступ слева */ padding : 10px ; /* Внутренние поля вокруг содержимого */ } /* для контейнера */ #container { width : 770px ; /* Ширина слоя или ширина макета+20px */ margin-right : auto ; /* Авто-отступ справа */ margin-left : auto ; /* Авто-отступ слева */ } /* для блока 2 - меню */ #menu { width : 200px ; /* Ширина слоя */ float : left ; /* Обтекание с соседним слоем */ color : white ; /* Цвет текста */ background : #008080 ; /* Цвет фона */ padding : 10px ; /* Внутренние поля вокруг содержимого */ } /* для блока 3 - контент */ #content { /* Правая колонка*/ width : 530px ; /* Ширина слоя */ float : left ; /* Обтекание с соседним слоем */ padding : 10px ; /* Внутренние поля вокруг содержимого */ background : #e0e0e0 ; /* Цвет заднего фона */ } /* для блока 4 - подвал */ #bottom { width : 750px ; /* Ширина слоя */ clear : left ; /* возвращаем блочность и располагаем слой слева */ padding : 10px ; /* Внутренние поля вокруг содержимого */ background : #444 ; color : #fff ; margin-right : auto ; /* Авто-отступ справа */ margin-left : auto ; /* Авто-отступ слева */ } |
/* для блока 1 - шапка */ #shapka{ text-align: left; /* Выравнивание внутреннего контента по левому краю */ width: 750px; /* Ширина блока и общая ширина*/ background: #900000; /* Цвет фона */ height: 50px; /* Высота блока */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ padding: 10px; /* Внутренние поля вокруг содержимого */ } /* для контейнера */ #container { width: 770px; /* Ширина слоя или ширина макета+20px */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ } /* для блока 2 - меню */ #menu { width: 200px; /* Ширина слоя */ float: left; /* Обтекание с соседним слоем */ color: white; /* Цвет текста */ background: #008080; /* Цвет фона */ padding: 10px; /* Внутренние поля вокруг содержимого */ } /* для блока 3 - контент */ #content { /* Правая колонка*/ width: 530px; /* Ширина слоя */ float: left; /* Обтекание с соседним слоем */ padding: 10px; /* Внутренние поля вокруг содержимого */ background: #e0e0e0; /* Цвет заднего фона */ } /* для блока 4 - подвал */ #bottom{ width:750px; /* Ширина слоя */ clear:left; /* возвращаем блочность и располагаем слой слева */ padding: 10px; /* Внутренние поля вокруг содержимого */ background:#444; color:#fff; margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ }
</ style > </ head > <body > <div id = "shapka" > 1</ div > <div id = "container" > <div id = "menu" > 2</ div > <div id = "content" > 3</ div > </ div > <div id = "bottom" > 4</ div > </ body > |
Результат:
Рис.2. Жесткая блочная верстка из двух колонок
При фиксированном дизайне для макета из трех колонок можно выделить два основных подхода построения модульной сетки:
Рассмотрим первый случай.
На рис. 3
— результат использования свойства для трехколонного макета. На самом деле используется 6 слоев — отдельно для заголовков колонок и отдельно для самих колонок.
Рис. 3. Фиксированный дизайн в три колонки
Пример: создать веб-страницу с макетом из трех колонок, изображенную на рис. 3 . Использовать приемы фиксированного блочного макетирования
Получим следующую html-структуру:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <body > <div class = "container" > <div id = "header1" > Евгений Евтушенко</ div > <div id = "header2" > Валерий Брюсов</ div > <div id = "header3" > Эдуард Асадов</ div > </ div > <div class = "container" > <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 > </ body > |
2. Добавление стилей для заголовков (селектор header...) и колонок (селектор col...)
#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ }
#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ }
#header1, #header2, #header3, #col1, #col2, #col3 { ... float: left; }
#header1, #header2, #header3, #col1, #col2, #col3 { ... border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }
Получим код:
#header1 , #header2 , #header3 , #col1 , #col2 , #col3 { width : 250px ; /* Ширина колонок */ padding : 5px ; /* Поля вокруг текста */ /* Отступ сверху */ float : left ; /* Состыковка колонок по горизонтали */ /* Рамка вокруг слоя */ /* Не серифный или рубленый шрифт */ font-weight : bold ; /* Жирное начертание текста заголовка */ font-size : 80% ; /* Размер шрифта */ color : white ; /* Цвет текста заголовка */ } |
#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ margin-top: 2px; /* Отступ сверху */ float: left; /* Состыковка колонок по горизонтали */ border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }
#header1 { background : #B38541 ; } #header2 { background : #008159 ; } #header3 { background : #006077 ; } #col1 { background : #EBE0C5 ; } #col2 { background : #BBE1C4 ; } #col3 { background : #ADD0D9 ; } |
#header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; }
Смотрим промежуточный результат:
Рис. 4. Промежуточный результат
3. Задание стиля для контейнеров
.container { clear : both ; /* Отменяет действие обтекания float */ } |
Container { clear: both; /* Отменяет действие обтекания float */ }
#col1, #col2, #col3 { font-family: "Times New Roman", Times, serif; /* Шрифт серифный или с засечками */ font-size: 100%; /* Размер шрифта */ font-weight: normal; /* Нормальное начертание */ color: black; /* Цвет текста */ }
Итоговый код: всё вместе
<style type = "text/css" > |
/* для колонок и их заголовков */ #header1 , #header2 , #header3 , #col1 , #col2 , #col3 { width : 250px ; /* Ширина колонок */ padding : 5px ; /* Поля вокруг текста */ margin-left : 5px ; /* Отступ слева */ margin-top : 2px ; /* Отступ сверху */ float : left ; /* Состыковка колонок по горизонтали */ border : 1px solid black ; /* Рамка вокруг слоя */ font-family : Verdana, Arial, sans-serif ; /* Рубленый шрифт */ font-weight : bold ; /* Жирное начертание текста заголовка */ font-size : 80% ; /* Размер шрифта */ color : white ; /* Цвет текста заголовка */ } /* для колонок */ #col1 , #col2 , #col3 { font-family : "Times New Roman" , Times, serif ; /* Шрифт с засечками */ font-size : 100% ; /* Размер шрифта */ font-weight : normal ; /* Нормальное начертание */ color : black ; /* Цвет текста */ } /* Цвет фона каждого слоя */ #header1 { background : #B38541 ; } #header2 { background : #008159 ; } #header3 { background : #006077 ; } #col1 { background : #EBE0C5 ; } #col2 { background : #BBE1C4 ; } #col3 { background : #ADD0D9 ; } .container { clear : both ; /* Отменяет действие float */ } |
/* для колонок и их заголовков */ #header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ margin-top: 2px; /* Отступ сверху */ float: left; /* Состыковка колонок по горизонтали */ border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ } /* для колонок */ #col1, #col2, #col3 { font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */ font-size: 100%; /* Размер шрифта */ font-weight: normal; /* Нормальное начертание */ color: black; /* Цвет текста */ } /* Цвет фона каждого слоя */ #header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; } .container { clear: both; /* Отменяет действие float */ }
</ style > </ head > <body > <div class = "container" > <div id = "header1" > Евгений Евтушенко</ div > <div id = "header2" > Валерий Брюсов</ div > <div id = "header3" > Эдуард Асадов</ div > </ div > <div class = "container" > <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 > </ body > |
Результат:
Рис. 5. Результат
Возьмем в качестве примера макет, состоящий из трех колонок разграниченных разделительной линией (рис. 6).
Рис. 6. Позиционирование слоев для макета в три колонки с разделителем
Пример: создать веб-страницу с макетом из трех колонок с разделительной линией, изображенную на рис. 6 . Использовать приемы фиксированного макетирования с позиционированием слоев
1. Создание структуры html-кода
Поэтому структура будет простой:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <body > <div id = "col1" > Иван Бунин</ br ></ br > </ br > </ br > </ br > </ div > <div id = "col2" > </ br > Золотится отблеском окно. </ br > </ br > Белым снегом всё запушено. </ div > <div id = "col3" > И всё утро яркие и чистые</ br > </ br > </ br > Хризантемы на моём окне.</ br ></ br > 1903 </ div > </ body > |
2. Добавление стилей для колонок
#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; }
#col1 , #col2 , #col3 { width : 250px ; /* Ширина колонок */ padding : 0 6px ; /* Поля по вертикали и горизонтали */ float : left ; /* Обтекание слоев */ } |
#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ float: left; /* Обтекание слоев */ }
#col1 , #col2 { border-right : 1px solid #000 ; /* Поля по вертикали и горизонтали */ float : left ; /* Обтекание слоев */ } #col1 , #col2 { border-right : 1px solid #000 ; /* Параметры линии справа от текста */ } |
#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ float: left; /* Обтекание слоев */ } #col1, #col2 { border-right: 1px solid #000; /* Параметры линии справа от текста */ }
</ style > </ head > <body > <div id = "col1" > Иван Бунин</ br ></ br > На окне, серебряном от инея,</ br > За ночь хризантемы расцвели.</ br > В верхних стёклах - небо ярко-синее</ br > И застреха в снеговой пыли. </ div > <div id = "col2" > Всходит солнце, бодрое от холода, </ br > Золотится отблеском окно. </ br > Утро тихо, радостно и молодо. </ br > Белым снегом всё запушено. </ div > <div id = "col3" > И всё утро яркие и чистые</ br > Буду видеть краски в вышине, </ br > И до полдня будут серебристые </ br > Хризантемы на моём окне.</ br ></ br > 1903 </ div > </ body > |
Дизайн в три колонки готов!
Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.
Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:
Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html
кода и таблиц css
скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.
В процессе верстки кодом html происходит разбивка «скелета » сайта на части. А с помощью css (каскадных таблиц стилей ) задаются размеры его «костей », цвет и расположение.
Различают несколько видов верстки:
I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег