Макет сайта

Макет веб-страницы

Разработка макета

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

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

На первых занятиях вы начали создавать макет документа HTML в файле sample.htm. С каждой новой темой вы добавляли в него новые фрагменты кода, необходимые для любого создаваемого файла *.htm, чтобы не писать их заново. Так же можно поступить и с создаваемым сайтом – разработать единый макет для всех страниц сразу.

В разработке макета большого сайта участвует группа специалистов:

  • руководитель группы. Общается с заказчиком (куратором), знает его требования, описанные в техническом задании (ТЗ), тематику сайта и целевую аудиторию;
  • художник-дизайнер. Умеет формировать образы будущей страницы, изображая их на доске, бумаге и экране компьютера в графическом редакторе, в офисных приложениях для работы с текстом или презентациями и предлагать к обсуждению;
  • редактор. В рамках тематики сайта определяет количество разделов, содержание статей, необходимый для контента иллюстрационный материал.
  • В группу по разработке макета могут быть привлечены и другие творческие участники.

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

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

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

Эскизы макета

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

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

Четыре самых простых эскиза макетов. Два с вертикальным меню и два с горизонтальным.

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

  1. Расположение блоков. Какие свойства будут использоваться для расположения блоков по горизонтали: float или position?
  2. Тип дизайна. Каким будет тип дизайна будущего сайта?
    • Статичный – с неизменяемыми размерами блоков.
    • Резиновый (жидкий) – растягивающийся или сжимающийся под разные размеры мониторов.
    • Адаптивный – с макетом, меняющимся с учётом разных типов устройств и их размеров.

Ответы на эти вопросы вы уже в состоянии искать самостоятельно. А пока ещё примеры нескольких эскизов.

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

Ещё три несложных эскиза и один профессиональный макет.

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

Четвёртый макет взят из профессионального шаблона Solidarity для CMS Joomla. Можете прочесть о нём. Познакомьтесь поближе с шаблоном, щёлкнув оранжево-жёлтую кнопку Демо справа от «Описания».

В демонстрации уже не эскиз и даже не макет, а готовый шаблон сайта. Загляните в меню раздела Solidarity Features. По ссылке Template map можно рассмотреть макет в натуральную величину. На странице Module Styles представлены образцы модулей разных классов с указанием селекторов CSS для их применения. А на Typography – внешний вид абзацев с разными ролями от заголовков до списков с оригинальными маркерами и названия их стилей.

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

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

Копирование макета страницы

Построение структуры кода HTML

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

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

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

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

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

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

Создайте отдельную папку для эксперимента. В ней на основе шаблонов создайте файл index.htm и в папке CSS ещё один файл main.css. Подключите стилевой файл к файлу с документом HTML.

Второй этап

На странице пять обычных оформительских блочных элементов DIV в потоке один под другим. Запишите их в коде с соблюдением структуры.

Третий этап

В каждый из блоков самостоятельно добавьте семантические (смысловые) блочные элементы, соответствующие ролям: Шапка, Баннер, Дополнительная панель, Основной блок, Подвал. Они и станут основными модулями макета.

Каждый добавленный модуль имеет свою структуру. Исходя из описаний внутренних блоков модулей, добавьте в них по паре смысловых элементов HTML. А в Дополнительную панель сразу три.

Для выбора элементов, соответствующих ролям блоков, можете воспользоваться их названиями в рисунке для четвёртого этапа. А построить в коде HTML правильную древовидную структуру — придётся самостоятельно.

Четвёртый этап

Сохраните документ. Код HTML создаваемого макета готов.

В браузере ничего не отобразится, потому что все элементы пока пустые. По умолчанию пустые элементы выводятся на экран высотой height0. Далее дело за контентом в документе и кодом в файле main.css.

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

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

В модуль Шапка добавьте словосочетание, если название сайта ещё не окончательное. В модули Меню — по несколько (штук по 5) слов, имитирующих пункты меню. В Дополнительные блоки и в Статью — произвольный текст, который пока можно и не разбивать на абзацы. В Баннер поместите картинку-заглушку (как её создать?) и текст условной подписи под ней.

Разметка блоков страницы

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

  1. Вывод на экран. Для блочных элементов по умолчанию это свойство displayblock?. Его указывать не обязательно. А строчному элементу, если нужно регулировать его ширину и высоту, обязательно укажите displayinline-block.

    Если элемент удаляется из потока свойством float?, то указывать нужно обязательно. А для position? возможно понадобится указать ещё и смещение top, right, bottom, left.

  2. Размеры. Ширина width? важный размер, особенно для родительских элементов. Дочерние сами вытянутся на всю выделенную для них ширину. И явно заданная высота height? нужна не всем элементам. Многие автоматически меняют её в зависимости от размера контента.

    Поля padding? могут понадобиться, чтобы контент не «прилипал» к границам, а отступы margin? — нужны, чтобы отодвинуть блок от соседнего.

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

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

  3. Визуальное разграничение. Простой способ явного выделения блоков — фоновый цвет background-color?. Он позволяет увидеть и размеры блоков, и их положение на странице. Если в дизайне страницы цвет блоков не понадобится, то эти свойства можно легко удалить. Всегда проще нажать клавишу Delete, чем дописывать недостающее.

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

    А если хочется для разметки блоков использовать рамку, то лучшим вариантом будет свойство тени box-shadow0 0 2px 1px...?. Для этой цели её не стоит смещать, оставив тонкой границей вокруг элемента. Тень располагается за пределами потока и не влияет на размер элемента. Её тоже можно будет удалить.

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

  4. Размер шрифта?. И он влияет на высоту блоков с текстовым контентом и других, размеры которых заданы в эмах. Размер шрифта в свойстве font-size, записанный в правиле для BODY, считается базовым и наследуется всеми потомками. То есть для всех элементов страницы этот размер является величиной 1em.

    В некоторых модулях, исходя из дизайнерских решений, размер шрифта должен быть больше или меньше базового. Например, в Дополнительных панелях, в Подвале на 1-2 пункта меньше. Вычислять точно этот размер не обязательно, достаточно указать уменьшенное значение font-size.8em. Все потомки этого элемента наследуют эту уменьшенную величину. И для них 1emбудет равен 0,8 от базового размера.

Это необходимый набор правил для создания макета страницы. После согласования всех свойств, указанных в четырёх пунктах, когда на экране вы увидите желаемый внешний вид модулей будущей страницы — макет готов!

Но это пока теория.

Создание правил CSS

Селекторы

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

Мастерство разработчика заключается не в выборе и назначении элементам того или иного свойства. На эту тему написано множество статей, справочников, книг, как бумажных, так и электронных. Выбирай и применяй — это не сложно. А вот правильно спланировать селектор ? без захламления кода HTML и при этом не создавать проблем браузеру — это творчество.

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

Пять оформительских блоков

В макете определены 5 элементов DIV роль которых — создание разноцветного фона страницы. Можно каждому из них назначить индивидуальный идентификатор, например dividbg_?, записав вместо знака вопроса их порядковые номера. Для них создать пять отдельных правил и назначить каждому селектор идентификатора с очередным номером: bg_?....

В результате браузер должен будет пять раз пробежать по всему дереву кода HTML в поисках всех элементов с очередным идентификатором. Можно сократить поиск, добавив в селектор имя элемента divbg_?.... Это конечно сократит поиск — искать придётся только элементы DIV, но всё равно по всему дереву кода.

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

Когда все модули со своей внутренней структурой элементов будут добавлены в общее дерево кода, в нём могут оказаться другие div, у которых тоже придётся проверять значение атрибута class. Так что и этот селектор имеет свои минусы.

Оптимальным инструментом для точного выбора нужных элементов будет контекстный селектор. Таких селекторов в CSS несколько, но для данной задачи понадобится один body > div.... Угловая скобка (знак больше) > указывает только на те div, которые находятся непосредственно в body. На его «детей» а не «внуков-правнуков» где-то в структуре. Этот селектор сократит перебор элементов до пяти штук!

Для каждого из пяти div в body понадобится создать отдельное правило c фоновым цветом. А чтобы не лишиться удобства контекстного селектора, его нужно сделать Комбинированным — добавить к нему псевдокласс.

В стандарте CSS имеется ряд псевдоклассов, используя которые можно обращаться к элементам как с обычными назначенными классами. При этом в открывающий тег псевдокласс дописывать не нужно. Чтобы в селекторе записать имя обычного класса, перед ним нужно поставить точку. А для указания псевдокласса — двоеточие.

Добавим к селектору псевдокласс nth-child(), название которого обозначает «энный по счёту элемент». Браузер применит правило к элементам, порядковый номер которых совпадёт с числом, записанным в селекторе.

В итоге 5 правил для каждого оформительского блока будет выглядеть так: body > divnth-child(?).... Вместо знака вопроса записывайте порядковый номер нужного элемента. Селектор полученного правила можно прочитать за три приёма:

  • body > divnth-child(?)... — перебери все дочерние элементы в BODY...
  • body > divnth-child(?)... — примени правило, если на месте с номером ?
  • body > divnth-child(?)... — находится элемент DIV.

Код HTML остался «чистым» — не добавлены ни идентификаторы, ни классы. Создано пять правил, и браузер не станет перебирать лишние элементы.

Создание модулей

Макет почти готов. О каждом модуле уже известно:

  • место в структуре кода HTML, количество структурных отступов для его тегов и тегов его дочерних элементов.
  • его местоположение на экране, роль и размеры.
  • font-size? заданный в модульном блоке служит размером в 1em для дочерних элементов.

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

Теперь можно перейти к разработке каждого модуля и поручить это разным участникам для ускорения работы.

Селекторы в модулях

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

Различные Статьи могут размещаться на Странице в BODY и в блоке Основного контента MAIN, в Разделах SECTION и в Дополнительных панелях ASIDE. Да и самих Дополнительных панелей и Разделов может быть несколько штук в разных местах.

То же самое можно сказать и о других элементах. HEADER и FOOTER могут быть у страницы BODY, у статьи ARTICLE и у блочной цитаты BLOCKQUOTE и т. п.

Например, необходимо абзацам в подписи к Баннеру с тёмным фоном задать цвет светлый. Селектор может быть таким: p. Цвет текста поменяется во всех абзацах на странице. Можно уточнить, что это для абзацев только к изображениям: figcaption p. Теперь изменятся подписи ко всем изображениям и в Баннере, и в Контенте, и в Дополнительной панели.

Учитывая, что модули разрабатываются разными участниками, самый простой приём — задать всем модульным блоками идентификаторы. Например:

  • Шапка страницы — headeridroot_header,
  • figure — figureidbanner,
  • Анонс статей разделов — asideidnews,
  • Ссылки на родственные сайты — asideidsibling,
  • Контент — articleidcontent и так далее.

Имена идентификаторам и классам подбирайте осмысленно, чтобы даже при чтении кода HTML была понятна роль элемента, на которую указывает селектор: banner figcaption p. Такое правило легко прочесть даже не автору: для абзацев в подписях под изображениями в конкретном баннере. А если баннеров несколько, то идентификатор меняем на класс: banner figcaption p.

Такое же правило можно создать для подписей под рисунками в статье. Достаточно только заменить идентификатор модуля на content figcaption p.

Подготовка материала

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

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

Не забывайте. Новое незнакомое слово или словосочетание, требующее пояснения в контексте dfn, может быть написано в любом падеже и числе. В атрибуте title... оно должно быть записано только в именительном падеже единственного числа. titleАтрибут — существенное свойство объекта..

Аббревиатура abbr в title — должна быть расшифрована. «Я учусь в МОУСОШе». titleМуниципальное образовательное учреждение средняя
общеобразовательная школа.

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

Вёрстка модуля

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

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

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

Для сборки оформленных модулей создаётся общая копия оригинала макета. В элементе HEAD файла index.htm подключаются файлы css каждого модуля и заполняются постоянные для всех страницы модули: Шапка, Подвал, Дополнительная панель, Меню разделов, Меню текущего раздела, Общие изображения и т. п.

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

Модули, которые не нужны на конкретной странице можно не удалять, если они не имеют назначенных размеров: height, padding, border, margin и box-shaddow. Пустые элементы с высотой равной 0 не будут видны на странице. Если это не так, то их нужно удалить.

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