Блочная верстка — Создаем двухколоночный, трехколоночный и резиновый макеты для сайта


Содержание материала:

Резиновый дизайн. Двухколонный макет

«Резиновым дизайном» будем называть структуру web-страницы, которая автоматически приспосабливается под определенную ширину окна браузера пользователя. Такой макет имеет несколько преимуществ:

  • используется все доступное пространство браузера;
  • у пользователей с «маленькими» мониторами не возникает горизонтальных полос прокрутки;
  • пользователи «больших» мониторов могут порадоваться, как эффективно используется вся площадь экрана, а значит деньги на монитор были потрачены не зря;
  • web-страницы удобно печатаются на бумаге любого формата.

Среди недочетов можно отметить придирчивость разных браузеров к «резиновому» макету и большая вероятность появления Errors. В связи с чем повышается сложность верстки web-страниц.

При верстке web-страниц наиболее популярным является двухколонный макет, при этом одна колонка содержит набор ссылок для навигации по сайту, а вторая, более широкая — контент. Впрочем, хотя такая схема и представляет собой устоявшуюся традицию, это не значит, что обязательно ее следует придерживаться. Использование всей ширины окна позволяет более эффективно задействовать площадь web-страницы. Так что можно добавляем три, и даже четыре колонки. Это зависит исключительно от имеющегося объема информации. Учтите и обратный эффект — чем больше материала, тем больше рассеивается внимание посетителя, и ему сложнее становится ориентироваться на сайте.

На рис. 1 приведены типичные схемы размещения колонок. Красным цветом выделен заголовок страницы, светло-серым — область для навигации, рекламы, небольших контентовых вставок и т.д., а белым цветом — место для основного контента. Нижняя часть страницы, как правило, отводится для контактной информации, баннеров, кнопочек и других не самых существенных элементов.

а. две колонки б. три колонки в. четыре колонки

Рис. 1. Варианты размещения колонок

Для разработки двухколонного макета применяется два способа. Первый подход использует параметр float , позволяющий состыковывать один слой с другим по горизонтали, а второй основан на задании положения слоев через позиционирование. Несмотря на некоторые недочеты, оба подхода имеют место быть в арсенале верстальщика и их надо знать для лучшего понимания принципов работы со слоями.

Использование плавающих элементов

Термин «плавающий элемент» не очень удачен, тем не менее, порой встречается в литературе. Надо понимать, что никто никуда не плавает, так называют элемент, обтекаемый с разных сторон контентом или другими объектами web-страницы. Параметр float добавляемый к слою определяет, по какой стороне будет выравниваться слой, при этом остальные элементы будут обтекать его с других сторон.

просмотрим вариант, когда левая колонка имеет определенный размер, а ширина правой колонки устанавливается автоматически, исходя из ширины окна браузера. При этом ширина левой колонки может задаваться в пикселах или процентах. В табл. 1 приведены основные стилевые параметры для формирования двух колонок.

Для левого слоя шириной 20%
Слой 1

float: left
width: 20%

Слой 2

margin-left: 21%

Для левого слоя шириной 200px
Слой 1

float: left
width: 200px

Слой 2

margin-left: 210px

Для первого слоя требуется всего два параметра: float — заставляет второй слой располагаться рядом по горизонтали с первым слоем и width , который устанавливает ширину колонки. Вторая колонка будет занимать все оставшееся место, поэтому для нее атрибут width не требуется.

Правый слой характеризуется лишь одним параметром — margin-left , он смещает левый край колонки на ширину левого слоя, плюс задает отступ между колонками. Поэтому величина этого свойства в табл. 1 указана 21%, где 20% сама ширина первого слоя, а на один процент приходится расстояние между колонками. В случае задания ширины одной из колонок в пикселах, код останется прежним, но поменяются единицы измерения.

В примере 1 приводится код web-страницы, на которой содержится: заголовок, две колонки и контактная информация. Ширина первой колонки с именем menu фиксирована и установлена как 100 пикселов, оставшееся пространство занято колонкой с именем content.

Пример 1. Код для разработки двух колонок

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla
facilisi.

Двухколоночный резиновый макет

05.12.2014, 16:48

Двухколоночный резиновый сайт
Столкнулась с тем, что не могу сверстать двухколоночную сетку. Сначала была проблема с тем, что.

Двухколоночный макет.
Необходимо создать двухколоночный макет страницы, выглядит так: и отвечает таким требованиям: .

Резиновый макет.
Доброе время суток всем. Есть один впросс!! Подскажите где можно скачать макет РЕЗИНАВОГО сайта.

Резиновый макет
Может кто обьъснить,как делаются резиновые макеты,и размещение ссылок на резиновом меню. за ранние.

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

CSS урок 16. Блочная верстка сайта: резиновый дизайн

Резиновый дизайн и необходимые свойства CSS

Резиновый дизайн сайта означает, что при изменении размеров окна браузера все слои масштабируются согласно текущей ширине. Это и есть основное преимущество резинового дизайна: независимо от размеров экрана, вся его область будет занята, при этом не возникают лишние полосы прокрутки при использовании «маленького» монитора.

«Резиновость» достигается за счет того, что определенные слои макета не имеют фиксированную ширину, приспосабливая свои размеры под размеры окна браузера.

Минусом данного типа дизайна являются «разногласия» между браузерами, необходимость применять «хитрости» css-стилей, для того чтобы достичь необходимой кроссбраузерности.

Две колонки в резиновой дизайне

Дизайн CSS две колонки, пожалуй, самый популярный. Создать страницу с таким расположением колонок можно двумя способами, рассмотрим каждый отдельно.

Свойство float для создания эффекта плавающего элемента

Рассмотрим пример, в котором присутствуют следующие блоки, изображенные на рис. 1: шапка (бордовый), меню (светло-серый), контент (белый), подвал (темно-серый).

Рис. 1. Резиновый дизайн сайта в две колонки

Левую колонку выполним с фиксированным размером, а правая колонка будет занимать остальную ширину окна, что и обеспечит «резиновость» дизайна.

1. «Разбиваем» все основные элементы страницы на блоки следующим образом:

Заголовок

Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

2. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
1 вариант:

3. Для правой колонки обязательным является свойство, определяющее внешний отступ от левого края окна браузера ( margin-left ). Этот отступ должен соответствовать ширине левой колонки + 1px или 1%:
1 вариант:

Все остальные свойства зависят от оформления сайта.

Весь код CSS будет выглядеть так:

Результат:

Рис. 2. Левая колонка с фиксированной шириной в резиновом дизайне

Рассмотрим пример, когда фиксированной шириной обладает не левая, а правая колонка.

Код html-структуры остается прежним, меняются лишь CSS-свойства.

1. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
1 вариант:

2. Для правой колонки задаем свойство, определяющее внешний отступ от правого края окна браузера ( margin-right ). Этот отступ должен соответствовать ширине левой колонки + 1px или 1%:
1 вариант:

Результат:

Рис. 3. Правая колонка с фиксированной шириной в резиновом дизайне

Применение позиционирования в резиновом дизайне

При использовании данного варианта дизайна для левой или правой колонки устанавливается абсолютное позиционирование с заданием координат.
Например:
Левая колонка:

position:absolute; width: . px; left: . px; top: . px;

Правая колонка:

margin-left: . px; /* отступ слева, равный ширине первой колонки */

«Резиновость» достигается в данном случае за счет правой колонки, у которой нет определенной ширины.

Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4

Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

Результат:

Рис. 4. Резиновый дизайн сайта с позиционированием

Одинаковая высота колонок

На рис. 4 результат показывает, что колонки имеют неодинаковую высоту. Для того, чтобы колонки приобрели одинаковую высоту есть несколько вариантов использования дополнительных свойств, одним из которых является добавление границы ( border ).

Ссылка 1
Ссылка 2
Ссылка 3

Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

Верстка макета (блочная верстка)

Дата публикации: 2013-08-16

От автора: в предыдущем уроке мы с Вами сверстали макет, удовлетворяющий двум необходимым требованиям – колонки должны иметь одинаковую высоту и футер должен быть прижат к низу, если на странице мало контента.

Шаблон мы сверстали, используя возможности табличной верстки. В этом уроке мы сверстаем абсолютно идентичный шаблон, но уже с использованием блочной верстки.

По итогам обоих уроков Вы можете сравнить обе верстки и оценить каждую из них. Посмотрев видео версию урока, Вы увидите процесс верстки шаблона шаг за шагом. Здесь же мы просто приведем итоговый код.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

CSS макеты: фиксированные, резиновые, эластичные

Какой макет верстки (с использованием Каскадных Таблиц Стилей, CSS) можно считать наилучшим? Каждый из них имеет свои хаки (quirks) и свои уникальные плюсы и минусы. Будет ли один из них более удобен для пользователя, чем все остальные? Насколько просто им будет пользоваться? Какие есть у каждого из них проблемы, и как их обходить? Верстается ли один из них проще всех остальных? Есть ли среди них какой-либо ущербный, совершенно непригодный? Скорее всего, многие однозначно ответят на эти вопросы, но я не буду так торопиться.

Каждый из этих макетов мне нравится, и каждый применим в том или ином случае, если делать это с умом и внимательно проверять простоту использования и одинаковую доступность для всех категорий пользователей. Все они являются частью уровня представления (presentational layer) для вебсайта, поэтому большинство вопросов по доступности вытекают из корректного использования семантики и общих правил верстки. Далее я опишу свой взгляд на жестко фиксированный (rigid fixed), адаптивный резиновый (adaptable fluid) и расширяемый эластичный (expandable elastic) макеты.

Макеты с фиксированной шириной

Макет сайта с фиксированной шириной отличается основной областью для содержания (wrapper), ширина которой выставлена в неизменное значение, не зависящее от разрешения экрана пользовательского агента. Наиболее распространенной и разумной считается ширина в 760 пикселей — размер, при котором пользователи мониторов с разрешением 800;600 увидят основное содержание сайта практически во всю ширину экрана, не прибегая к дополнительной горизонтальной прокрутке.

Авторский блог является примером такой верстки, хотя его можно легко привести к резиновому или эластичному макету без изменения текущих картинок.

Плюсы такого макета

  • Контейнер для основного содержания сайта жестко зафиксирован, для него не нужно выставлять максимальную или минимальную ширину (у которой нет, на самом деле, кросс-броузерной поддержки на текущий момент);
  • В некоторых случаях использовать макеты с фиксированной шириной проще для создания определенных эффектов или дизайнерских решений (например, для позиционирования выпадающего меню или всплывающих подсказок к полям формы). Некоторые макеты дизайна разумно верстаются только с использованием фиксированной ширины основного контейнера;
  • Макет, основанный на заявленной выше ширине основного поля — 760 пикселях — что является типичной шириной для такого рода макетов, является, в моем представлении, оптимальным для максимальной читаемости текста (частично соглашусь с автором статьи, в таком случае еще около 200 пикселей можно отвести на боковое меню, и сайт будет помещаться в 1024;768 по ширине, однако, тогда, скорее, будет иметься в виду ширина основного поля в 1000 пикселей).
  • Заявленная «оптимальная для максимальной читаемости текста» ширина не может адекватно выполнять свою роль, если текст на сайте был значительно увеличен при неизменном отношении высоты строки текста к его размеру (в данном случае получается, что текст «разреживается», и его очень трудно воспринимать). Однако, стоит заметить, что при наличии хорошего дизайна эта проблема возникает только при очень сильном увеличении текста;
  • У пользователей с небольшими мониторами (640;480 пикселей, также стоит не забывать про мобильные устройства) возникнет горизонтальная полоса прокрутки на сайте шириной в 760 пикселей. Хотя и это очень нечастая проблема;
  • Сайт, шириной в 760 пикселей может смотреться довольно неприглядно (слишком узко) на мониторах с большим разрешением экрана;
  • Небольшая ширина основного контейнера может ограничивать разумное количество столбцов при верстке, но это может быть также и плюсом, потому что заставляет создавать сайт, учитывая такие жесткие рамки (т.е. особо много излишеств и дизайнерских приемов нельзя будет применить, потому что таковы наложенные ограничения).

Советы по макету с фиксированной шириной:

  • Располагайте основное содержание страниц сайта слева, чтобы пользователям с мониторами 640;480 не приходилось прокручивать сайт по горизонтали для нормального чтения;
  • Обеспечьте сайт небольшими таблицами стилей для поддержки портативных небольших (портативных) устройств. Будет замечательно, если вы создадите также таблицы стилей для поддержки проекторов и телевизоров.

Пример блока фиксированной ширины

Все примеры «вживую» можно посмотреть в авторской статье.

Резиновые макеты

Резиновый макет получается, если у основного контейнера не задавать ширину вообще (по умолчанию будет 100%) или задать ширину в процентах. Другими словами, не учитывая границы и отступы, сайт, имеющий ширину 100% будет занимать всю видимую часть экрана, не создавая горизонтальной полосы прокрутки.

Примером такого макета можут служить GrayBit.com. Он уменьшается по ширине до 755 пикселей до того, как появляется горизонтальная полоса прокрутки, но и при этом она не требуется для просмотра основного содержимого страниц. Фактически, сайт замечательно смотрится вплоть до ширины в 560 пикселей, дальше элементы дизайна уже начинают перекрываться, пропадать или сваливаться вниз. Большинство резиновых макетов имеют такие ограничения и, как я видел, некорректно ведут себя на мобильных устройствах, пока не отключены стили вообще или не применена специальная таблица стилей для мобильных устройств.
Плюсы резинового макета

  • При грамотной верстке резиновый макет позволяет достичь большой универсальности в отображении, независимо от ширины окна пользовательского клиента. На практике это встречается довольно редко, но, теоретически, если все делать правильно, то такое возможно;
  • Резиновый макет совпадает с макетом, применяемым броузером по умолчанию, то позволяет считать его «идеологически правильным». Но можно ли считать желание разработчика сделать «идеологически правильный» сайт плюсом относительно удобства его использования? Я думаю, что можно;
  • Резиновый макет сайта позволяет использовать доступное разрешение экрана по максимуму. Большая часть содержания страницы будет «над линией сгиба» (т.е. видимой без дополнительной прокрутки страницы). Однако…

Рассмотрим минусы такого макета

  • Слишком много доступного для чтения текста страницы и его острое желание заполнить всю доступное место может служить во вред удобству пользователей. Слишком много текста может «давить» на пользователя и делать сайт перегруженным или хаотичным. Существует выражение: «Пустое пространство продает» (“White space sells”, не знаю русского эквивалента этого выражения, имеется в виду, что пустое пространство нужно для увеличения акцента на содержании), и оно справедливо даже применительно к вебсайтам;
  • Если для ограничения ширины макета использовать CSS свойство max-width (которое не поддерживается Internet Explorer (IE) 6 версии и раньше, короче говоря, вообще (плохо) поддерживается) и быть просто гуру верстки можно в результате стремления к «правильной идеологии» получить, в лучшем случае, сайт, которым будет тяжело пользоваться. Представьте себе, что нужно прочитать строку длиной более 1000 пикселей, и вы осознаете проблему.

Некоторые советы по использованию этого макета

  • Используйте резиновый макет строго по назначению. Не позволяйте своим стремлениям сделать все «идеологически правильно» возобладать над здравым смыслом. Должны быть какая-то достаточно веская причина, чтобы использовать эту разновидность макета. Если вы все же решили использовать именно ее, убедитесь, что резиновый макет вашего сайта нормально смотрится на большинстве экранных разрешений. Иначе оставьте это, игра не стоит свеч;
  • Если при использовании резинового макета у вас есть области с фиксированной шириной, значит, на самом деле, вы получили гибрид резинового и фиксированного макета, и его минимальная ширина будет определена шириной фиксированных блоков или самого большого из объектов (картинок, например). Будьте осторожны. Если вы хотите бесплатно создать сайт именно с резиновым макетом, оно так и должно быть на самом деле, а не только на словах;
  • Если вы все же сделали гибрид резинового и фиксированного макета (как, например, изображено в моем CSS руководстве, убедитесь, что он нормально смотрится на разрешении 800;600.

И, собственно, пример:

Эластичный макет

При использовании эластичного макета размер основного контейнера и других (важных) элементов задается в em. Em прямо пропорциональны размеру текста или шрифта. Следовательно, при увеличении размера текста на странице, размеры разделов, заданные в em, увеличатся пропорционально.

Пример эластичного макета можно посмотреть в моем представлении CSS Zen Garden (ограниченный гибрид эластичного и резинового макета). Насколько я знаю, это единственное представление CSS Zen Garden, которое является эластичным и доступно настолько, насколько это вообще возможно при нередактируемой (изначально заданной) разметке страницы. Я очень горжусь этим фактом (действительно, очень хороший пример, но у меня в Opera 9.22 при ширине меньше 150 пикселей блоки «наезжают» друг на друга, этот эффект описан выше в минусах резинового макета).

Плюсы эластичного макета

  • Если все сделано правильно, то это очень стабильная верстка, потому все изменяет размер пропорционально. В результате при любом изменении размеров все по-прежнему хорошо;
  • Эластичный макет довольно сложная вещь, это неимоверно круто и каждый раз это вызов самому себе прежде всего. Первое мое знакомство с ним было на сайте Tommy Olsson (который, по видимому, является хорошим примером того, как следует делать эластичные сайты). Он поразил меня, заставил улыбнуться и глубоко задуматься о том, как я мало знаю (impressed the hell out of me). Лучшим примером может быть увеличение текста на сайтах с эластичным макетом: достаточно зажать ctrl и покрутить колесо мыши… Я уже слышу, как вы говорите «Вау»

Минусы эластичного макета

  • Несмотря на его привлекательность и элегантность, я не знаю действительно хорошего его применения, это заставляет задуматься, зачем же он вообще нужен?
  • Если не ограничить размеры внешнего контейнера, то этот макет может быть настоящим бедствием для пользователя: он будет растягиваться шире, и шире, и шире — безо всяких видимых преимуществ.

Немного советов по эластичному макету

  • Если вы собираетесь верстать, используя эластичный макет, убедитесь, то он работает на маленьких мониторах. Иначе, зачем он вообще нужен?
  • Ограничьте размеры эластичного блока, определив размеры внешнего контейнера (используя резиновую или фиксированную ширину, т.е. создав гибридный макет). Например, #wrapper < width:60em; max-width:98%; >. Последователи «правильной идеологии» могут возразить, что это уже не будет истинно эластичным макетом, что он при этом ограничен или гибридизирован, но в ответ я спрошу: а какая разница? Да, «правильная идеология» замечательна и прекрасна, но только не тогда, когда речь заходит о пользовательском удобстве (золотые слова!);
  • Помните, что IE 6 и меньше не поддерживают свойство max-width, убедитесь, что при задании максимально большого текст в IE не появляется горизонтальной полосы прокрутки на разрешении 1024;768. В любом случае, можете посмотреть мое решение для CSS Zen Garden. Следующим шагом может стать верстка уже для разрешения 800;600 с тем же условием. Как пример, можно посмотреть мою эластичную верстку сайта хостинга (ограниченный гибрид резинового и эластичного макета). Я планирую переверстать его в течение года, но и сейчас пример вполне рабочий.

Пример эластичной верстки:

В заключении

Как вы можете видеть, у каждой из описанных разновидностей макетов есть свои плюсы и минусы (может быть, вы знаете и другие?). И я не могу с уверенностью сказать, какой же из них лучше. Это просто уровень представления сайта, как я заметил в самом начале, поэтому с большой ответственностью и не меньшей уверенностью я могу заявить, что любой из этих макетов может быть применим для верстки доступных, удобных для пользователей, сайтов. Таким образом, я предлагаю не вставать не тропу приверженцев «идеологической правоты», делая что-то только потому, что она «правильно», в ущерб доступности или удобству. Я не пытаюсь их критиковать, ибо они заставляют нас размышлять над каждым шагом и являются источником вдохновения, но если вы следуете по их пути, делайте это с опаской. Пусть у вас будет цель и будет план. «Просто потому что» не является достаточной причиной — так я говорю своим детям.

Урок 7. Блочная верстка web-сайта. Часть 1

Наиболее популярной является блочная верстка сайта или div верстка. Наш урок блочной верстки сайта поможет начинающим освоить основные приемы div верстки.

1. Основные понятия

Многие web-дизайнеры отдают предпочтение блочной верстке сайта, которая осуществляется с помощью тега

Блок – это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы (рис. 1). Содержимым блока может быть что угодно – текст, картинки, списки, формы для заполнения, меню навигации и т.п.

Рамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.

Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.


Блочная верстка сайта включает в себя блоки. Блоки, как и таблицы – это элементы, всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задается такой параметр как «обтекание» (float). Но об этом чуть позже.

В данной работе мы создадим web-страничку из блоков. Сначала создадим контейнер, в который, как в коробку сложим наши блоки. Для наглядности каждый блок будет иметь свой цвет. Конечный результат должен быть таким как на рис. 2.

Контейнер будет содержать в себе пять блоков:

TOP – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию;

LEFT и RIGHT – левая и правая колонки, обычно содержат рекламу, навигацию, рассылку, новости и т. д.:

CENTER – содержит основной текст страницы;

FOOTER – подвал сайта, содержащий копирайты и другие сведения о сайте, возможно, дублировать навигацию, что является признаком хорошего тона.

Для теста нашего сайта нам понадобятся как минимум три самых популярных браузера – Opera, Fire Fox, Internet Explorer.

Описание web-страницы в основном делается в CSS документе.

2. «Фиксированный» дизайн методом блочной верстки

1. Создайте в блокноте новый документ с расширением css и сохраните его под именем mystyle.css.

2. Создайте HTML-документ и сохраните его в той же папке.

3. В самом начале HTML-документа впишите следующую строку:

Определяет тип нашего документа. Любая грамотно сверстанная страница должна в самом начале содержать так называемый DOCTYPE. Нужен он для всевозможных устройств вывода информации и браузеров в том числе. Пока что все ныне существующие браузеры прекрасно обходятся и без указания DOCTYPE. Но уже грядут те времена, когда страница сайта, сразу начинающаяся с тэга , просто не будет прочитана, потому как стандарты становятся жестче.

Мы определили нашу страничку в соответствии с DOCTYPE под названием Strict 1.0.

Требования здесь весьма строгие – все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой. Но вот ведь сам DOCTYPE тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам этих строгих правил. Но это единственный случай, где правило не работает.

4. Одной строкой между тегами и присоедините документ mystyle.css к документу HTML (рисунок 3).

5. В таблице стилей наберите код как на рисунке 4.

# этот знак говорит, что элемент является уникальным атрибутом и используется в HTML документе в теге div один раз.

6. Добавьте в mystyle.css шапку сайта (рисунок 5).

7. Добавим HTML документ следующий код между тегами body (рисунок 6).

И у Вас должно получиться следующее (рис. 7).

Следующим этапом блочной верстки сайта является расположение трех блоков последовательно по горизонтали, для этого в блочной верстке, как правило, используется элемент float. Он позволит обтекать другим элементам наш блок справа или слева.

8. Откройте css-документ и добавьте следующий код (рисунок 8).

Каждая строка кода имеет комментарий, заключенный в скобки /* комментарий */, который не отображается в браузере. Напомню, элементы со знаком # используются в теге div >

9. Сразу после закрывающегося тега

10. Откройте HTML-документ в браузере. Должно получиться такая div верстка (рисунок 10).

11. Теперь добавьте блок footer самостоятельно. Браузер должен показать такую блочную верстку сайта (рисунок 11).

Рассмотрим атрибуты relative и absolute.

Иногда бывает необходимо разместить какой-то блок в строго заданном положении относительно родительского.

Рассмотрим простейший код.

  1. Создайте html-документ, в теле которого разместите код, как на рисунке 12.

Предположим, мы хотим разместить дочерний блок в 20 пикселях левее и ниже верхнего левого угла родительского блока.

Попробуем сделать так (т.е. абсолютно позиционируем дочерний блок относительно родительского).

2. Создайте таблицу стилей, в которой наберите код из листинга на рисунке 13.

3. Проверьте web-страничку в браузере. Вот что получилось (рисунок 14). Это не то, что мы хотим, не так ли? Наш дочерний элемент ушел не к маме, а к дедушке (т.е. BODY)!

Проблема решается довольно просто: родителю дополнительно задаётся position: relative;

4. Измените код своей таблицы стилей в соответствии с рисунком 15.

5. Проверьте web-страничку в браузере. Результат на рисунке 16. Оцените разницу.

Создать web-страницу, внешний вид которой изображен ниже на рисунке 17

3. «Резиновый» сайт методом блочной верстки

В заданиях 1 и 2 мы рассмотрели «фиксированный» дизайн методом блочной верстки, т.к. все блоки имели точное значение по ширине и высоте в пикселах.

В случае «резинового» дизайна размеры блоков задаются в процентах от ширины экрана. По высоте размер блока может определяться содержимым блока.

Задание 3. Создадим «резиновый» блочный макет как на рисунке 18.

1. Создайте HTML-документ с кодом, как на рисунке 19. Сохраните документ.

2. Создайте таблицу стилей как на рисунке 20. Сохраните документ. Вы должны получить результат ка на рисунке 18.

3. Изменяя размеры браузера, проанализируйте поведение макета.

4. Комбинированная блочная верстка

Комбинированная блочная верстка (div верстка) включает как блоки фиксированной ширины, так и блоки в процентном отношении к ширине экрана.

Задание 4. Создадим комбинированный блочный макет как на рисунке 21.

1. Создайте HTML-документ с кодом, как на рисунке 22.

2. Создайте таблицу стилей как на рисунке 23. Сохраните документ. Вы должны получить результат ка на рисунке 21.

3. Изменяя размеры браузера, проанализируйте поведение макета.

Методом блочной верстки создайте web-страницу для сайта архитектурных проектов коттеджей так, как изображено на рис. 24. Изображение для шапки сайта (shapka_div.jpg).

Требования к макету:

  • В HTML-коде не должно быть локального форматирования элементов, все оформление должно быть сделано через внешнюю таблицу стилей;
  • При наведении на ссылку «Проекты таунхаусов и блокированных домов» гиперссылка должна менять цвет (рис. 24);
  • При нажатии на гиперссылку «Проекты таунхаусов и блокированных домов» должна загружаться страница о проектах, внешний вид которой изображен на рис. 25.
  • При нажатии на логотип должна загружаться главная страница сайта (рис. 24).

Свойство CSS max-width. Создаем 1 колоночный макет мобильного шаблона.

Для того, чтобы адаптировать сайт под мобильные устройства его блоки должны иметь резиновую ширину, которая изменяется в зависимости от размера экрана. Такая «резиновость» достигается за счет задания относительных единиц измерения, например процентов.

К примеру, имеем блок div с шириной 90% от ширины экрана.

Он замечательно растягивается по размерам, в зависимости от ширины экрана монитора. Но, бывают ситуации, что слишком сильное растягивание блока, может навредить элементам верстки сайта.

Например, если наш блок div будет содержать в себе текст, то при слишком сильном растягивании, этот текст может стать совершенно нечитаемым на больших мониторах. Читать очень длинную строку текста очень не приятно, правда?

Для того, чтобы ограничить пределы, до которых может растянуться блок с относительной шириной, используют свойство CSS max-width.

С его помощью вы можете указать значение в абсолютных единицах измерения, до которого максимально будет растягиваться блок.

Посмотрите на видео демонстрацию, как это происходит:

Нижний блок со свойством max-width останавливает свое растяжение после того, как он достигает ширины 900px.

Свойство max-width — это одно из тех свойств CSS, на которых основывается вся мобильная верстка.

Посмотрите пример кода, как можно с помощью свойства max-width создать простой одноколоночный макет сайта.

Таким образом, мы можем очень просто создавать какие-либо одноколоночные шаблоны веб-страниц, которые будут адаптироваться под ширину устройства, на котором они будут просматриваться.

Резиновый двухколоночный макет

Двухколоночный резиновый макет позволяет эффективно использовать площадь браузера, и вместе с тем достаточно удобен для самого широкого круга задач. Кроме того, такой макет не требует сложной работы над собой и его можно использовать на многих сайтах, комбинируя ширину колонок в пикселах и процентах. Примером такого макета служит сайт Хабрахабр (рис. 5.14), ширина колонок у него задана в процентах.

Рис. 5.14. Резиновый двухколоночный макет

Опять же, существует несколько подходов к формированию такого макета, но самый простой и удобный заключается в сочетании свойств float и margin .

Рассмотрим вариант, когда левая колонка имеет определенный размер, а ширина правой колонки устанавливается автоматически, исходя из ширины окна браузера. При этом ширина левой колонки может задаваться в пикселах или процентах. В табл. 5.1 приведены основные стилевые свойства для формирования двух колонок.

Для левого слоя шириной 20%
Левая колонка Правая колонка
Для левого слоя шириной 200px

Для левой колонки требуется всего два свойства: float — заставляет вторую колонку располагаться рядом по горизонтали с первой и width , которое устанавливает ширину колонки. Вторая колонка будет занимать всё оставшееся место, поэтому для нее указывать width не нужно.

Правая колонка характеризуется лишь одним свойством — margin-left , оно смещает левый край колонки на ширину левого слоя, плюс задает отступ между колонками. Поэтому величина этого свойства в табл. 5.1 указана 21%, где 20% сама ширина колонки, а на один процент приходится расстояние между колонками. В случае задания ширины одной из колонок в пикселах, код останется прежним, но поменяются единицы измерения.

В примере 5.11 приводится код веб-страницы, на которой содержится: заголовок, две колонки и контактная информация. Ширина первой колонки с именем sidebar фиксирована и установлена как 120 пикселов, оставшееся пространство занято колонкой с именем content .

Из-за того, что мы имеем дело с резиновым макетом, который может занимать всю ширину окна браузера и уменьшаться до какого-то предела, имеет смысл сделать ограничения. Свойство min-width для слоя layout устанавливает минимальную ширину, если окно браузера будет меньше этого значения, появится горизонтальная полоса прокрутки. Свойство max-width , наоборот, задаёт максимальную ширину, которая не будет превышена.

Пример 5.11. Навигация слева

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Вид страницы при ширине окна меньше значения min-width продемонстрирован на рис. 5.15, та же самая страница, но в окне, превышающим значение max-width показана на рис. 5.16.

Рис. 5.15. Влияние свойства min-width

Рис. 5.16. Влияние свойства max-width

Для формирования колонки заданной ширины справа, а не слева, код незначительно модифицируется. В табл. 5.2 показаны стилевые параметры, которые требуются для этого случая.

Для правого слоя шириной 20%
Правая колонка Левая колонка
Для правого слоя шириной 200px

Расположение слоев в коде остается прежним, но значение свойства float меняется на right , а отступ на margin-right . Более никаких изменений не предполагается, поэтому пример 5.11 останется прежним и в нем только следует заменить стиль слоев sidebar и content на тот, что показан в примере 5.12.

Пример 5.12. Стиль для добавления меню справа

Заметьте, что положение слоев в коде HTML не меняется, вначале идет слой с именем sidebar , а потом уже content . Причём это правило действует всегда, независимо от того, как будут отображаться на веб-странице колонки — меню слева от контента или наоборот, справа. В любом случае модифицируется только код CSS.

Принципы резиновой верстки сайта

Резиновый веб-дизайн с HTML5 и CSS3 позволяет нам создавать веб-страницы, которые способны адаптироваться согласно ширины окна браузера. HTML5, CSS3, JS позволяет более быстро превратить ваш сайт в резиновую модель.

Для создания резиновых веб-страниц, мы должны знать, как работать с: резиновым макетом, резиновой шириной, резиновыми: текст и изображения, видео и ифреймы, резиновые: margin и padding, таблицы и формы, адаптивное меню.

Методы верстки резиновых веб-страниц.

Основной идеей для создания резинового макета с HTML5 и CSS3 является определение размеров элементов страницы в процентах или EMs, что позволяет элементам веб-сайта атоматически изменять размер в соответствии с размером окна браузера.

Для создания резинового макета используется формула: target ÷ context = result

  • target — размер шрифта(или ширины) которые мы имеем в пикселях(ширина рассчитывается в % и размер в em)
  • context — размер шрифта, если он не задан для body то можно к примеру использовать тот который установлен по умолчанию(для Mozilla это 16px).
  • result — результат который мы получим в em или %

В общем, преобразования размера элемента с пикселей в проценты или EMs делается относительно его родительского элемента, смотрите примеры:

В данном примере видим что при условии если мы хотим сделать размер текста для header h1 font-size: 18px; и line-height: 20px; нам необходимо расчитать размер в EM согласно его родительского элемента, то есть body: font-size: 13px; line-height: 18px; в резултате получаем font-size:1.384615384615385em; и line-height:1.111111111111111em;

Резиновые: макет, ширина, margin и padding.

Создаём section, где мы расположим два asides:

В этом примере вы видите, что у нас есть section с максимальной шириной: 83em эквивалентной 1328px и внутри мы имеем два блока каждый с шириной: 47%, и если мы изменяем размер экрана браузера наши внутренние блоки всегда будут иметь ширину: 47% и padding: 1%

Текст и изображения в резиновой верстке

Этот метод CSS позволяет изменять размер изображения автоматически в соответствии с размером экрана, текст каждого элемента на веб-сайте может быть задан персонально, так как для всего документа задан размер шрифта font-size:100%.

Резиновый дизайн: формы, таблицы, меню

Пример адаптивной контактной формы.

Для создания таблиц и меню у нас есть две возможности: первая заключается в использовании JS(JQuery), и вторая с помощью Media Queries заточить свой сайт под свои нужды.

Создать резиновую таблицу можно следующим способом:

В случае, если некоторые элементы страницы не имеют размер в процентах, то есть имеют фиксированный размер: списки или боковая навигация. В этом случае для избежания того чтобы сайт не предстал в неприглядном виде на экранах с большим и малым разрешениями, в этих случаях задаётсяmax-width и min-width, чтобы вашим сайтом могли пользоваться пользователи без каких-либо проблем.

С HTML5 и CSS3 мы имеем больше шансов для создания резиновых веб-страниц. Использование Media Queries которые поддерживаются всеми новыми браузерами и если мы хотим чтобы IE 6-8 также мог поддерживать Media Queries мы можем добавить js-скрипт respond.js для Drupal(работает только при включенной опции Объединение и сжатие файлов CSS) или загрузить с GitHub для использования с различными CMS respond.js. Медиа-запросы позволяют при помощи простых деклараций CSS в таблице стилей определить, какой размер будет иметь элемент страницы в зависимости с изменением окна браузера, например:

Эта декларация определяет, что при уменьшении экрана браузера менее 600px DIV с ID#art_gallery эквивалентен ширине 100%.

Кроссбраузерность резинового(отзывчивого) веб-дизайна

Позиционирование элементов для Internet Explorer, Google Chrome, Mozilla Firefox, Opera, Safari

При позиционировании элементов веб-сайта мы можем заметить разницу в 1px в различных браузерах, но так как принято в большинстве случаев для отзывчивого дизайна задавать размер в условных единицах EMs то решением для коректного позиционирования элементов веб-страницы является использование десятых и сотых долей единиц измерения.

Пример 1: значение margin-top: 2.01em; для какого либо элемента веб-страницы будет отображать данный элемент одинаково во всех браузерах, но если задать margin-top: 2em; то в Mozilla Firefox мы увидим что позиционирование отличается от того как будет расположен данный элемент в Internet Explorer, Google Chrome, Opera, Safari

Пример 2: значение line-height: 27.3px; для шрифта кнопок во всех браузерах отображается одинаково, но если задать line-height: 27px; то в Internet Explorer мы увидим незначительную разницу с тем как данное значение срабатывает в Google Chrome, Mozilla Firefox, Opera, Safari

Шрифты для стандартного отображения в различных браузерах

Для всех версий браузера Internet Explorer от компании Microsoft можно использовать следующие шрифты семейства Sans-serif: Calibri, Candara, Corbel, Cambria, Constantia.

Для Mac OS и её предшественников наиболее совместимы Monaco, Geneva, Myriad, Skia, но последняя версия Safari поддерживает практически все шрифты

Для unix/linux могут быть использованны DejaVu Sans, DejaVu Serif, DejaVu Sans Mono, Garuda, но не стоит забывать что все браузеры любой операционной системы поддерживают все стандартные шрифты как: Arial, Verdana, Tahoma и т.д

Оптимальный размер шрифта может быть задан между 93% и 97%

Резиновая верстка div 3 колонки (HTML)

Резиновый макет HTML-страницы из трех колонок лучше делать, при помощи див слоев (Страница загружается быстрей, поисковые системы довольны и это круче верстки таблицами).

Пример

Например нужно сделать макет из трех колонок, левая и правая колонки должны быть фиксированной ширины, а центральная резиновой.

Обратите внимание на код! Центральный див слой (

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

В правой колонке часто размещают новости, форму авторизации, поиска, ссылки, спонсоры и так далее.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Топ-пост этого месяца:  Как написать кейс, который будет продвигать бизнес
Добавить комментарий