Резиновый css. Резиновый веб-дизайн

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

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

Хотя сам я мало чего понимаю в 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-разметке. Именно в том порядке, в котором мы их указали на странице.

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

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

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

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

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

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

Приветствую Вас в очередном уроке, который будет посвящен сегодня языку 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