Резиновая ширина, навигация слева


Содержание

Трехколоночные резиновые макеты

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

При верстке макетов не забывайте о том, что добавление каким-то HTML-элементам рамок (свойство CSS border), внешних полей (свойство CSS margin) или внутренних отступов (свойство CSS padding) увеличивает их размер, и он становится больше указанных в width (ширина) и height (высота). Если этого не учесть, то верстка макетов может «поехать» или произойдет наложение некоторых элементов HTML друг на друга. В подобных ситуациях необходимо уменьшить ширину и высоту элементов до необходимых размеров.

Три колонки резиновые

Пример HTML и CSS: верстка макета с тремя резиновыми колонками

Описание макета

  1. Каждой колонке этого трехколоночного макета была задана процентная ширина с помощью CSS w >id «menu» и id «sidebar» , у нее были указаны боковые внешние поля (CSS margin) равные ширине этих боковых колонок.
  2. Чтобы блок с футером не обтекал колонки, когда какая-то из них будет выше других, у id «footer» было создано прерывание обтекания (CSS clear:both).

Центральная резиновая, боковые колонки фиксированные

Пример HTML и CSS: верстка макета с центральной резиновой и боковыми фиксированными колонками

Описание макета

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

Левая резиновая, колонки справа фиксированные

Пример HTML и CSS: верстка макета с левой резиновой и правыми фиксированными колонками

Описание макета

  1. Меню и сайдбару было задано всплытие вправо (CSS float), чтобы колонка контента могла их обтечь и подняться на один с ними уровень.
  2. У колонки с > «content» было указано внешнее правое поле (CSS margin-right) равное суммарной ширине меню и сайдбара, чтобы она не заплывала под них.
  3. Чтобы футер ни при каких условиях не обтекал колонки, ему было задано свойство CSS clear:both для прерывания этого обтекания.

Три колонки с резиновым контентом впереди

Пример HTML и CSS: верстка макета с резиновой колонкой контента впереди

Проектирование и верстка макета сайта рок-группы на языке HTML

Проектирование макета сайта рок-группы с разработкой элементов фирменного стиля.docx

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

Слой по центру веб-страницы

Фиксированная ширина, навигация слева

Фиксированная ширина, использование float

Фиксированная ширина, float плюс margin

Фиксированная ширина, позиционирование

Резиновая ширина, навигация слева

Фиксированная ширина, три колонки

Макеты по ширине

Различают пять типов макетов, связанных с шириной:

фиксированные;

резиновые;

эластичные;

адаптивные;

комбинированные.

Фиксированный макет

Альтернативные названия: фикс (жарг.), fixed (англ.), фиксированный дизайн.


Макет обычно располагается по центру окна браузера, а его ширина ограничивается заданными размерами в пикселах (рис).

Рис. Фиксированный макет в браузере

Преимущества

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

Браузеры, как правило, лояльнее относятся к таким макетам, поэтому на вёрстку и отладку уходит меньше времени.

Недостатки

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

Сайты

http://bash.org.ru

http://www.youtube.com

http://vkontakte.ru

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

Альтернативные названия: резина (жарг.), liquid (англ.), резиновый дизайн.

Ширина колонок задаётся в процентах или сочетаются проценты и пикселы таким образом, что макет занимает всю свободную ширину окна браузера. При изменении размеров окна или другом разрешении монитора макет подстраивается под них (рис.).

Рис. Резиновый макет в браузере

Преимущества

Используется вся эффективная область страницы.

Веб-страницы удобно печатаются на бумаге любого формата.

Веб-страницы хорошо смотрятся на разных устройствах от iPhone до ноутбука.

Недостатки

На мониторах с высоким разрешением сайт плохо читается из-за чрезмерного удлинения строк текста. Здесь помогает ограничение ширины контента с помощью свойства max-w >Этот макет по своему виду может не отличаться от фиксированного или резинового макета. До тех пор, пока вы не измените размер шрифта в браузере, тогда вы заметите, что размер поменяли и элементы веб-страницы. Размер элементов задаётся не в пикселах и процентах, а в em, привязанному к размеру шрифта. Значение em можно использовать не для всех элементов, оставляя ширину некоторых фиксированной.

Преимущества

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

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

Недостатки

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

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

В действительности сфера применения этого макета очень ограниченна.

http://www.csszengarden.com/? cssfile=http://green-beast. com/portfolio/zen/css/zen.css

Адаптивный макет

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

Илон Маск рекомендует:  Mpeg для чайников

Преимущества

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

Макет комфортно можно смотреть на любом устройстве.

Недостатки

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

За счёт универсальности макет сложно проверять на разные условия, которые возможны у пользователей.

Вид сайта http://www.w3.org показа н на рис.. При уменьшении ширины окна до 500 пикселов и менее, дизайн сайта сменится (рис).

Рис Сайт W3C при обычной ширине

Рис. Сайт W3C при узкой ширине

Комбинированный макет

Альтернативные названия: гибрид, hybrid (англ.).


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

Рис. 5.5. Комбинированный макет

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

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

http://lionindesert.ru

Макеты по колонкам

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

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

2.3 Описание создания и верстки макета сайта рок- группы

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

    1. Содержать 3 фрейма (заголовок сайта, блок меню с правой стороны и само тело страницы. 3 фрейма чтоб написать на одном логотип и название (в самом верху сайта и так как он будет содержать картинку в виде логотипа группы то надо чтоб она как можно реже перезагружалась, что оптимизирует и ускорит загрузку сайта. 2 фрем, будет отвечать за меню, его тоже не будем перезагружать каждый раз, и последний фрейм он будет отвечать вернее выводить наши страници с информацией.
    2. Будет выполнен в темных тонах. Кодировка HTML.
    3. Содержать всего страницы: «Главная» на которой будут основные новости, «новинки», «о нас», «Как с нами связаться» Для начала нам этого хватит.

Писать будем наш сайт в программе Namo WebEditor 2006 так как это очень удобный и многофункциональный редактор. О нем подробно написано в справке по этому я не стану углубляться во все тонкости написания кода, а буду только показывать основные моменты.

Так как мы создали документ надо его сохранить. А с учетом того что у нас фреймы, а это по своей сути 3 разных документа то сохраняем их все.

Так выглядит рабочая область программы

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

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

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

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

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

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

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

Порядок форматирования ссылок

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

Выбор положения открытия фрейма.

В появившемся окне выбираем где та страница которую мы указали в шаге 1 должна открыться. Таким образом делаем все сылки сайта и наш сайт готов.

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

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

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

ДА и чтоб изменить что то на таком сайте не надо менять весь макет сайта. Достаточно изменить то что именно требует корректировок.

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

Резиновый веб-дизайн с 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 в таблице стилей определить, какой размер будет иметь элемент страницы в зависимости с изменением окна браузера, например:

Илон Маск рекомендует:  Что такое код createpopupmenu

Эта декларация определяет, что при уменьшении экрана браузера менее 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%

Резиновое меню

Задача

Сделать резиновое меню, которое занимает всю доступную ширину родителя. При этом первый пункт располагается у левого края, последний — у правого и расстояния между пунктами одинаковые.

Требования

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

Проблема

Задача казалось бы несложная, но для ее решения обычно применяется таблица или javascript. Проэмулировать для этой задачи таблицу с помощью display: table/table-cell не выходит, по крайней мере кроссбраузерно. Вот и имеем 21 век на дворе, HTML5, CSS3, а такое меню реализовываем «костылями». Но решение все-таки нашлось.

Решение

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

Для IE6 и 7 потребуется дополнительный код:

Резиновая верстка 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.

Отзывчивая навигация на CSS, число пунктов неизвестно

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

Размышляя наперед, я пришел к выводу, что было бы непрактично изменять CSS каждый раз, когда потребуется добавить или удалить пункт меню. Также в идеале решение должно быть без javascript.

Используем проценты для ширины

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

Итак, чтобы растянуть пункты на всю ширину нам потребуются проценты.

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

Например, рассмотрим следующую HTML-разметку:

И следующий CSS:

  • Элементу nav задана 100% ширина, чтобы заполнить все возможное пространство элемента-родителя.
  • У элемента li задано два свойства с шириной — width: calc(100% / 6); и width: 16.6667%; . Этим мы размещаем пункты меню в элементе nav, как шесть равных блоков. Свойства width важно установить в правильном порядке, чтобы те браузеры, которые поддерживают calc() могли его использовать. Я предпочитаю использовать calc() с процентами это повышает читаемость кода и позволяет браузеру использовать оптимальный вариант.
  • box-sizing: border-box; задана у элементов li. В этом случае в ширину включаются border-left и border-right . Без использования этого объявления, элементы li не впишутся внутри элемента nav и последний li сместится на новую строку вниз.

Результат от используемых стилей можно увидеть ниже:

Откройте код в новом окне и протестируйте его на отзывчивость. Желаемый вид достигнут плюс меню отзывчиво.

Что если мы удалим или добавим пункты в меню?

Во что будет, если мы удалим один пункт меню из навигации:

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

Что будет, если добавить один пункт меню?

Сейчас последний пункт меню переместился на вторую строку.

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

Это означает, что вышеприведенный html-код может быть использован со следующим CSS:

Настройки свойства display позволяют элементу na vбыть таблицей, элементу ul — строкой, li – ячейкой таблицы. Отметьте включение объявления table-layout: fixed , благодаря которому пункты меню принимают равную ширину. Его можно удалить, но колебания длины текста может нарушить внешний вид таблицы, поэтому подойдите к этому с осторожностью.

Взгляните на demo, с помощью кнопок добавьте или удалите элементы у навигационной панели.

Будущее: flexbox

Flexbox является основным кандидатом на замену вышеприведенного метода. Особенно с учетом вывода из обращения старых версий браузера IE и всевозрастающей поддержкой flexbox в современных браузерах. Если вы не знакомы с flexbox, то можете почитать следующие материалы:

Главная задумка flex-вёрстки в наделении контейнера способностью изменять ширину/высоту (и порядок) своих элементов для наилучшего заполнения пространства (в большинстве случаев — для поддержки всех видов дисплеев и размеров экранов).

Звучит идеально для решения моей проблемы.

Снова воспользуемся нашим HTML и создадим CSS-стили на основе flexbox.

  • display: flex; применяется к элементу ul и позволяет подключить гибкую среду для его детей.
  • flex-direction: row; применяется к элементу ul и тем самым позиционирует его детей в формате слева направо (определяя направление для flex-элементов). Это значение по умолчанию, так что обозначать его явно необходимости нет.
  • flex-grow: 1; это магия, которая делает дочерние элементы тега ul равными по ширине. Если вы укажете конкретному li значение 2, то этот элемент будет увеличен ровно в 2 раза относительно других элементов.

Flexbox имеет множество интересных особенностей, которые могут быть уместны в зависимости от ситуаций.

Ниже финальный пример построенный на использовании flexbox.

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

Если у вас есть свое решение для создания отзывчивой навигации оставляйте комментарии.

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

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


При использовании свойства float следует помнить о нескольких вещах:
— флоатные элементы должны знать, какую ширину им следует занимать;
— блок-контейнер, содержащий флоатные блоки, имеет свойство схлопываться, так как они выпадают из потока;
— для нижележащих нефлоатных элементов следует сбрасывать обтекание.

Проектирование и верстка макета сайта рок-группы на языке HTML

Проектирование макета сайта рок-группы с разработкой элементов фирменного стиля.docx

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

Слой по центру веб-страницы

Фиксированная ширина, навигация слева

Фиксированная ширина, использование float

Фиксированная ширина, float плюс margin

Фиксированная ширина, позиционирование

Резиновая ширина, навигация слева

Фиксированная ширина, три колонки

Макеты по ширине

Различают пять типов макетов, связанных с шириной:

фиксированные;

резиновые;

эластичные;

адаптивные;

комбинированные.

Фиксированный макет

Альтернативные названия: фикс (жарг.), fixed (англ.), фиксированный дизайн.

Макет обычно располагается по центру окна браузера, а его ширина ограничивается заданными размерами в пикселах (рис).

Рис. Фиксированный макет в браузере

Преимущества

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

Браузеры, как правило, лояльнее относятся к таким макетам, поэтому на вёрстку и отладку уходит меньше времени.

Недостатки

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

Сайты

http://bash.org.ru

http://www.youtube.com

http://vkontakte.ru

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

Альтернативные названия: резина (жарг.), liquid (англ.), резиновый дизайн.

Ширина колонок задаётся в процентах или сочетаются проценты и пикселы таким образом, что макет занимает всю свободную ширину окна браузера. При изменении размеров окна или другом разрешении монитора макет подстраивается под них (рис.).

Рис. Резиновый макет в браузере

Илон Маск рекомендует:  Что такое код natsort

Преимущества

Используется вся эффективная область страницы.

Веб-страницы удобно печатаются на бумаге любого формата.

Веб-страницы хорошо смотрятся на разных устройствах от iPhone до ноутбука.

Недостатки

На мониторах с высоким разрешением сайт плохо читается из-за чрезмерного удлинения строк текста. Здесь помогает ограничение ширины контента с помощью свойства max-w >Этот макет по своему виду может не отличаться от фиксированного или резинового макета. До тех пор, пока вы не измените размер шрифта в браузере, тогда вы заметите, что размер поменяли и элементы веб-страницы. Размер элементов задаётся не в пикселах и процентах, а в em, привязанному к размеру шрифта. Значение em можно использовать не для всех элементов, оставляя ширину некоторых фиксированной.

Преимущества


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

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

Недостатки

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

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

В действительности сфера применения этого макета очень ограниченна.

http://www.csszengarden.com/? cssfile=http://green-beast. com/portfolio/zen/css/zen.css

Адаптивный макет

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

Преимущества

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

Макет комфортно можно смотреть на любом устройстве.

Недостатки

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

За счёт универсальности макет сложно проверять на разные условия, которые возможны у пользователей.

Вид сайта http://www.w3.org показа н на рис.. При уменьшении ширины окна до 500 пикселов и менее, дизайн сайта сменится (рис).

Рис Сайт W3C при обычной ширине

Рис. Сайт W3C при узкой ширине

Комбинированный макет

Альтернативные названия: гибрид, hybrid (англ.).

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

Рис. 5.5. Комбинированный макет

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

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

http://lionindesert.ru

Макеты по колонкам

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

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

2.3 Описание создания и верстки макета сайта рок- группы

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

    1. Содержать 3 фрейма (заголовок сайта, блок меню с правой стороны и само тело страницы. 3 фрейма чтоб написать на одном логотип и название (в самом верху сайта и так как он будет содержать картинку в виде логотипа группы то надо чтоб она как можно реже перезагружалась, что оптимизирует и ускорит загрузку сайта. 2 фрем, будет отвечать за меню, его тоже не будем перезагружать каждый раз, и последний фрейм он будет отвечать вернее выводить наши страници с информацией.
    2. Будет выполнен в темных тонах. Кодировка HTML.
    3. Содержать всего страницы: «Главная» на которой будут основные новости, «новинки», «о нас», «Как с нами связаться» Для начала нам этого хватит.

Писать будем наш сайт в программе Namo WebEditor 2006 так как это очень удобный и многофункциональный редактор. О нем подробно написано в справке по этому я не стану углубляться во все тонкости написания кода, а буду только показывать основные моменты.

Так как мы создали документ надо его сохранить. А с учетом того что у нас фреймы, а это по своей сути 3 разных документа то сохраняем их все.

Так выглядит рабочая область программы

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

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

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

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

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

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

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

Порядок форматирования ссылок

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

Выбор положения открытия фрейма.

В появившемся окне выбираем где та страница которую мы указали в шаге 1 должна открыться. Таким образом делаем все сылки сайта и наш сайт готов.

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

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

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

ДА и чтоб изменить что то на таком сайте не надо менять весь макет сайта. Достаточно изменить то что именно требует корректировок.

Резиновая ширина, навигация слева

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

Рис. 1. Макет с двумя колонками

Создание двух колонок происходит с помощью стилевого свойства float со значением left , которое применяется для левой колонки. При этом одновременно следует установить отступ слева для правой колонки через margin-left , значение которого равно ширине левой колонки плюс расстояние между ними (пример 1).

Пример 1. Создание двух колонок

Чтобы макет располагался по центру веб-страницы, добавим слой с именем container и колонки расположим внутри него. Для самого container необходимо установить ширину ( width ) и выравнивание по центру ( margin: 0 auto ), как показано в примере 2.

Резиновая ширина, навигация слева

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

Рис. 1. Макет с резиновой шириной

Создание двух колонок происходит с помощью стилевого свойства float со значением left, которое применяется для левой колонки. При этом одновременно следует установить отступ слева для правой колонки через margin-left, значение которого равно ширине левой колонки плюс расстояние между ними (пример 1).

Дата добавления: 2015-08-20 ; просмотров: 49 | Нарушение авторских прав

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL
Читайте также:
  1. Gastroenterostomia retrocolica posterior (операция Гаккера в модификации Петерсена). Подшивание анастомоза к краям разреза брыжейки поперечной ободочной кишки слева.
  2. В отражении РОТОР – справа, и слева тоже – РОТОР.
  3. Взаимное расположение большой подкожной вены и одноименного нерва на голени (слева). Взаимное расположение малой подкожной вены и сурального нерва на голени (справа).
  4. Вишеград. Третий слева — казачий командир Геннадий Котов.
  5. Внутриотраслевая конкуренция и ее интенсивность.
  6. Год. 1 класс. Учительница Головачева. Старостин Иван Алексеевич стоит 3 в 3-ем ряду слева.
  7. Должников А.И (слева) с товарищами, лето 1945 г. Берлин