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

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

Слой по центру веб-страницы	Фиксированная ширина, навигация слева	Фиксированная ширина, использование float
Фиксированная ширина, float плюс margin	Фиксированная ширина, позиционирование	Резиновая ширина, навигация слева
Фиксированный подвал	Фиксированная ширина, три колонки

 

 

 

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

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

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

• резиновые;

• эластичные;

• адаптивные;

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

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

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

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

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

 

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

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

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

Недостатки

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

Сайты

http://bash.org.ru

http://www.youtube.com

http://vkontakte.ru

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

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

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

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

 

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

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

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

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

Недостатки

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

Резиновые макеты сложнее верстать и отлаживать в разных браузерах.

Сайты

http://lenta.ru

http://yandex.ru

http://rutracker.org

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

Этот макет по своему виду может не отличаться от фиксированного или резинового макета. До тех пор, пока вы не измените размер шрифта в браузере, тогда вы заметите, что размер поменяли и элементы веб-страницы. Размер элементов задаётся не в пикселах и процентах, а в 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 должна открыться. Таким образом делаем все сылки сайта и наш сайт готов.

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

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

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

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