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


От автора: приветствую дорогих читателей моего блога! Наверняка многие из вас уже слышали легенды о драконах, Санта-Клаусе и непонятном звере под названием резиновый веб-дизайн, который способен менять свою форму. О первом персонаже вам поведают рукописи Джона Толкина, о втором родители, а вот информацию о третьем я беру на себя. Как бы странно это не звучало, однако, в этой статье я постараюсь разжевать резиновый веб-дизайн и расскажу о его преимуществах и недостатках.

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

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

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

Зарождение резинового веб-дизайна

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

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

Резиновый и адаптивный веб-дизайн - это одно и то же?

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

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

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

Преимущества резинового веб-дизайна

Благодаря резиновому дизайну css у вас есть возможность разработки веб-страницы, которая бы заполняла все свободное пространство браузера вне зависимости от размеров экрана. Если произойдут какие-либо изменения параметров, связанные с разрешением, вся структура сайта вновь подстроится под обновленные условия. Чудеса и волшебство, не правда ли?

Подобная особенность гарантирует тот факт, что веб-страница полностью займет браузерное окно независимо от того, отображается картинка на малютке HTC или на 20-ти дюймовом широкоформатном мониторе. Именно это и можно отнести к основному преимуществу резинового дизайна.

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Недостатки резинового веб-дизайна

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

Еще одним недостатком подобной «резины» является тот факт, что загрузка страницы с ним может увеличиться в 2–3 раза по сравнению со стандартной длительностью. Случается это по причине придирчивости некоторых браузеров к макетам страниц данного формата. Они тяжело справляются с задачей отображения элементов переменной ширины, вследствие чего также повышается риск возникновения визуальных ошибок.

Примеры резинового и адаптивного веб-дизайна

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

1. http://www.simplebits.com/

Для начала рассмотрим резиновый сайт одного американского блогера, занимающегося параллельно веб-разработками. Полная версия сайта:

Мобильная версия сайта:

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

2. http://www.fork-cms.com/

Теперь же предлагаю ознакомиться с веб-сайтом, который адаптируется под определенное устройство и в зависимости от его размеров перестраивает полностью собственную структуру. Полная версия сайта:

Мобильная версия сайта:

Вот так-то. Надеюсь, сегодняшний материал был интересен, и вы не зря потратили свое время. Если это так, то оставляйте комментарии по этому поводу и делитесь собственным мнением. Мне приятны как позитивные отзывы, так и экспертные заключения мастеров веб-дизайна 2.0. Подписывайтесь на блог, чтобы не пропустить дальнейшую интересную и полезную информацию.

На этом у меня все, скоро увидимся!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Какой макет верстки (с использованием Каскадных Таблиц Стилей, 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 не приходилось прокручивать сайт по горизонтали для нормального чтения;
  • Обеспечьте сайт небольшими таблицами стилей для поддержки портативных небольших (портативных) устройств. Будет замечательно, если вы создадите также таблицы стилей для поддержки проекторов и телевизоров.

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

Этот блок имеет фиксированную ширину 500 пикселей. У него нельзя изменить размер, при увеличении текста, он будет заново разбиваться на строки внутри этого блока.

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

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

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

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

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

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

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

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

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

Это резиновый блок шириной в 74% от ширины внешнего (фиксированного) контейнера. У него нельзя изменить размер, так как размер его внешнего контейнера жестко закреплен. При увеличении текста, он будет заново разбиваться на строки внутри этого блока.

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

При использовании эластичного макета размер основного контейнера и других (важных) элементов задается в 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 с тем же условием. Как пример, можно посмотреть мою эластичную верстку сайта хостинга (ограниченный гибрид резинового и эластичного макета). Я планирую переверстать его в течение года, но и сейчас пример вполне рабочий.

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

Пару дней назад один посетитель данного сайта, Максим, попросил меня показать, как сверстан сайт сайт.

Максим, дело в том, что весь контент сайта (любой страницы) сформирован таким образом, что полностью разъезжается на всю ширину окна браузера, не зависимо от разрешения экрана и абсолютной ширины монитора.

Хотя сам я мало чего понимаю в html-верстке (профиль программера, а не верстальщика), но все же многолетняя совместная работа с верстальщиками не могла не сказаться положительно в плане моих познаний html/css.

Конечно, любой прогер ASP.NET обязан хотя бы владеть основами html/css, иначе ничего путнего с чистого ASP.NET по получиться.

Итак, смотри - вопрос заключается в следущих аспектах:

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

б) как заставить все блоки находиться в точно заданных позициях не накладываясь друг-на-друга и не съезжая при изменении внутри них контента.

Верстка основана на тегах .

Шапка левый блок правый блок центральная резина Вот имеем 5 блоков div. футер

Скажу, что в табличной верстке такое позиционирование задать проще простого. Одна таблица table, три строки tr и три столбца на каждую td. Верхняя и нижняя строки содержат по одному столбцу, colspan которых установлено в 3. Средняя строка имеет 3 столбца. Ширина таблицы 100%. Вот и имеем резиновую верстку с точно позиционируемыми блоками.

Почему я не использую табличную верстку сейчас объяснять не стану.

Гораздо более интереснее увидеть стили, которые позволяют выше описанным div-ам занять свое место на екране.

#header { width: 100%; margin: 0px; text-align: center; background-color:#ff9999; } #right { float: right; width: 200px; margin: 20px 0px 0px 0px; text-align: right; background-color:#99ff99; height: 400px; } #middle { margin: 20px 220px 10px 220px; background-color:#9999ff; height: 400px; text-align: center; } #footer { margin: 0; border: solid 1px Dark; background-color: #dbc1c1; font-size: 10px; text-align: center; clear:both; } #left { background-color:#fdff5e; margin: 20px 0px 0px 0px; width: 200px; float:left; height: 400px; }

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

#header { width: 100%; } #right { float: right; width: 200px; } #middle { margin: 20px 220px 10px 220px; } #footer { clear:both; } #left { width: 200px; float:left; }

Ключевым свойством является float. Благодаря ему мы указываем блоку как позиционировать себя относительно соседнего блока. Соседний считается предыдущий и следующий в html-разметке. Именно в том порядке, в котором мы их указали на странице.

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

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

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

А получиться должно следующее.

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

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

В видеоуроке я установил ширину блока в 100% от ширины окна браузера. Можно задавать и меньшее количество процентов, тогда сайт будет занимать лишь часть окна браузера.

Без определенных стилей выравнивания блока сайт съедит в левую часть окна. И это, на мой взгляд, некрасиво. Хочется выравнять сайт посередине. Вот и вопрос, «как же это сделать?». А вот и ответ.

Выравнивание блоков посередине в случае резиновой верстки на div-ах

Первое, что приходит в голову - это указать у элемента body свойство text-align:center . Казалось бы, все, включая текст на странице, должно выровняться по центру. А уж потом, для элемента wrapper поменять центровку на выравнивание по левому краю (text-align:left). Но это неверный подход (хотя все сработает в IE). В нормальных браузерах свойство text-align устанавливает выравнивание только для текста внутри блока, к которому применяется данное свойство.

Правильным будет указать равные левый и правый внешние отступы для элемента и значение их - auto . Если левый и правый отступы равны, то элемент выравнивается посередине.

CSS-инструкция для блока wrapper будет иметь такой вид:

Margin-left: auto; margin-right: auto;

Или в сокращенной форме:

Margin: 0 auto;

Именно таким принципом необходимо руководствоваться при необходимости выровнять блок по центру родителя.

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

Естественно, никакой центровки вы не добьетесь, т.к. границы центруемого блока уперлись в границы родителя. Ширина контейнера становится равной ширине содержимого только в случае задания этому контейнеру свойства float:left .

В случае директивы float:left ( или float:right) , опять-таки, никакого выравнивания при помощи вышеописанного способа вы не добьетесь. Блок, с данной директивой, прилипнет своим левым краем (или правым) к родителю, а все остальные блоки нормального потока будут обтекать его справа (или слева).

Поэтому ограничивайте ширину блока свойством width (либо фиксированная ширина в пикселах, либо проценты) и, для понимания происходящего на странице, обводите блок border-ом. Например вот так:

Border: 1px solid black;

В этом случае вы будите четко видеть границы верстаемого блока. Но помните, что в нормальных браузерах к размеру блока прибавится размер border-а (ненормальным оказывается браузер IE, в котором размер border-а не влияет на ширину блока). Это может привести к спрыгиванию обведенного блока с того места, которое он будет занимать без обводки.

А теперь переходите к просмотру видео.

О чем же пойдет речь в данном видеоуроке:

  • При помощи сайта http://csstemplater.com/ сформируем HTML-каркас верстки.
  • Детально рассмотрим свойства, обнуляющие параметры, заданные в браузере по умолчанию. Эти свойства носят подпольную кличку «ластик». Очень вам советую применять ластик во всех ваших проектах, чтобы не ломать голову вопросом «почему искажается верстка, если в HTML и CSS все задано правильно». В нашем случае ластик будет иметь весьма развитый вид.
  • Познакомимся с такими интересными свойствами CSS как outline и псевдокласс-модификатор :focus . Outline позволяет задать обводку блока без изменения его размеров. Псевдокласс :focus позволяет изменить внешний вид элемента, при передаче ему фокуса ввода. Жаль, но все эти замечательные свойства поддерживаются браузером IE начиная лишь с 8-й версии.
  • Детально обсудим один из способов прижатия футера к нижней части окна браузера.
  • Разберемся с принципами формирования основного содержимого сайта: установка левого и правого сайдбара, задание области основного содержимого сайта.

    • Видео с сервиса RuTube:

    Первая часть видео с сервиса YouTube:

    Вторая часть видео с сервиса YouTube:

    Третья часть видео с сервиса YouTube:

    Если хотите попрактиковаться, то можете скачать исходник верстки с Deposit Files (*.zip-архив 3.5 КБайт).

    Из-за алгоритмов сжатия сервиса RuTube серьезно страдает качество картинки. Если мелкие детали плохо видны, вы можете скачать видео с Deposit Files в лучшем качестве (*zip-архив с *wmv-файлом. Размер 53.9 МБайт).

    Приветствую Вас в очередном уроке, который будет посвящен сегодня языку CSS . И мы реализуем с Вами трехколоночный резиновый макет для сайта. В дальнейшем Вы просто можете копировать этот каркас и приступать к созданию сайта . Макет будет состоять из таких блоков как: шапка сайта, левый сайдбар, правый сайдбар, область контента и футер. Ничего сложного, обычный, довольно просто шаблон. Ну что же, пришло время его реализовать. Для начала напишем следующую структуру html кода :

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

    Вот мы и завершили написание стилей, давайте немного их разберем.
    За основу мы взяли блок, в котором размещаем все остальные блоки, и задали для него максимальную ширину, выравнивание по центру, а также ширину равную ста процентам (это не является обязательным, но и лишним не будет).
    В блок, отвечающий за шапку сайта, поместили заголовок, а самому блоку установили цвет фона, и выравнивание текста по центру. После этого мы приступили к самой важной части, к нашим резиновым колонкам.
    Для левого сайдбара установили цвет фона, фиксированную высоту, чтобы мы могли наглядно представить себе, как будет выглядеть сайт в дальнейшем. Установили ширину равную двадцати процентам, а также задали обтекание элементов слева.
    С правым сайдбаром аналогичная ситуация, только мы отправляем данный элемент в правую часть экрана, задавая обтекание элементов справа. После такого способа контент автоматически становится по центру экрана между этими двумя сайдбарами.
    Но для контента мы также задаем цвет фона, высоту, отступы с левого и правого края, которые равны 21 процент, и соответственно ширину в 58 процентов. У вас может возникнуть вопрос, почему именно 58 процентов. Исходя из ширины равной ста процентам, мы вычитаем отступы с левой и правой стороны, которые равны по 21 проценту, итого 100 — 21 — 21 = 58. Вот откуда данная цифра. Все, резиновые блоки готовы, осталось лишь реализовать футер.
    Он реализуется по принципу шапки сайта, тоже создаем блок, с заголовком внутри, задаем фон, цвет текста, а также выравнивание текста по центру.

    Посмотрев на результат, можно сказать, что все довольно просто, причем сайт будет сжиматься до предела, и растягиваться на максимальную ширину, заданную нами. Если хотите, Вы можете указать минимальную ширину, до которой будет сжиматься ваш сайт. Указывается данное свойство для блока с id container , т.к., он является родительским для остальных блоков. Вот мы с Вами и рассмотрели возможность создания трехколоночного резинового сайта, на этом я буду прощаться с Вами. Всего Вам доброго, успехов!

    Резиновая верстка сайта. Резиновый веб-дизайн. Что и куда будем растягивать?

    Особенности, преимущества и недостатки

    Один из самых популярных типов верстки сайта - резиновая верстка. Главной особенностью резиновой верстки является способность подстраиваться под различные разрешения экрана и размеры окна браузера.

    Из всех типов html верстки сайтов можно условно выделить три основных - фиксированная, резиновая и адаптивная.

    Особенности резиновой верстки

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

    Представьте себе такой простой пример - пользователь ехал в вагоне метро, возвращаясь домой с работы и зашел на ваш сайт с мобильного телефона, разрешение экрана которого 320х480 пикселей, потом уже дома он зашел со стационарного компьютера и просматривал ваш сайт на мониторе, диагональю 24″ и разрешением 1920х1200 пикселей (и это еще далеко не предел). Вопрос в том, как используя фиксированную верстку, добиться одинаковых результатов на смартфоне и на большом мониторе (если отбросить в сторону автоматическое масштабирование). Т.е., иными словами, нужно, чтобы в телефоне не появилась горизонтальная прокрутка и в то же время на мониторе сайт не смотрелся как несчастная узкая полосочка посередине белого пустого экрана. Ответ - никак.

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

    Преимущества и недостатки резиновой верстки

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

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

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

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

    HTML-верстка

    Пример — резина

    Cтраница 1

    Примеры резин с достаточно высоким сопротивлением многократному изгибу, содержащие дифенилгуа-нидин, приведены в табл. 4.15. При каждом значении модуля или степени поперечного сшивания у резин с ДФГ наблюдалось наибольшее сопротивление утомлению.  

    На примере резин для боковин шин показано, что методы ДСК и ДТГ при разложении образцов в среде азота дают наилучшие результаты при идентификации композиций НК, БСК, СКЭПТ и галобу-тилкаучука.

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

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

    В работе К. А. Керимова (1965) на примере резины и поливинила было показано, что динамические кривые напряжение — деформация, близкие к прямым, лежат выше статических, причем в области напряжений, близких к нулю, остаточные деформации от динамических нагрузок могут втрое превышать статические.  

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

    Адаптивная вёрстка сайта, урок первый. Вёрстка главной страницы

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

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

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

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

    Для увеличения стойкости полимеров к химически активным средам поперечные связи должны быть стойкими к этим средам. Наиболее стойкими из используемых в настоящее время являются поперечные связи типа С-С, как это показано на примере резин из фторкаучука и хлоропренового каучука (см. гл.  

    Важной характеристикой процесса износа резины, скользящей по металлической поверхности с большими скоростями, является критическая температура ее разрушения при трении. При скольжении резины по металлической поверхности в условиях высоких температур воздействия (200 — 400 С) возможны следующие основные виды ее разрушения: возникновение трещин на поверхности трения, образование на обоих контактирующих поверхностях пары трения слоев наволакивания резины и протекание процесса катастрофического износа. На примере резин на основе бу-тадиен-нитрильного и эти-лен-пропиленового каучуков разберем причины, вызывающие разрушение этих материалов.  

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

    Страницы:      1

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

    Чтобы сотворить своё чудо в интернете, можно конечно воспользоваться готовыми и бесплатными движками для сайтов и программами (конструкторами сайтов) с помощью которых, не имея даже элементарных познаний в html и css, вы за считанное время сможете сделать сайт с нуля на профессиональной основе с точки зрения оптимизации и SEO.

    А можно пойти и другим путём более правильным: изучить программный код html и стилевое оформление элементов на css. В этом направление вам под силу будет сделать сайт любой конструкции и придать ему неповторимый внешний вид.

    ОБУЧЕНИЕ HTML ОНЛАЙН

    Я вам настоятельно рекомендую потратить немного времени и начать с изучения азов html и css, потому как не зная этих вещей, вы никогда не сможете сами подкорректировать любой из фрагментов, так как вы бы этого хотели, и тем более добавить что-то новое в не рамках шаблона.

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

    И обучающих материалов по этой теме в интернете много.

    ЭЛЕМЕНТЫ ДЛЯ САЙТА

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

    Зачем же нужен адаптивный дизайн? Начну со статистики. Данные TNS за март 2013 года вы можете видеть на слайде ниже.


    Как Вы можете видеть, примерно треть аудитории заходит со смартфонов и планшетов. И это при условии того, что процент каждый месяц только растёт. Как Вы понимаете, лучше держать нос по ветру!)

    Как реализовать на своём сайте адаптивную вёрстку?

    Поскольку средствами одного CSS решить проблему явно недостаточно (менять надо не только стили, но и структуру и содержание блоков), то воспользуемся jQuery. Зачастую сайт состоит из нескольких блоков: главный и сайдбары. Если адаптировать сайт под мобильные устройства, то это не более 2-х блоков (слева и справа).

    Ниже привёл пример кода адаптивной вёрстки. В нём самые азы — остальное можете добавить на усмотрение. И не забудьте подключить библиотеку jQuery! (см. Как подключить библиотеку jQuery?)

    Код JS (jQuery)


    $(document).ready(function() {

    var w = $(window).width(); // Ширина окна
    var h = $(window).height(); // Высоту окна. Не используем. Для справки

    if (w





    

    2024 © gtavrl.ru.