В статье «Этапы создания макета сайта. Часть 3. Работа над «шапкой» (хедером) сайта» мы остановились на четвертом этапе создания хедера для макета сайта. Сегодня мы продолжим создавать макет сайта, а конкретно хедер. И так наполнение хедера запланированными дополнительными модулями.
Хочу сразу остановиться на таком моменте, как функциональность сайта и хедера в частности. Дело в том, что в последнее время основное направление в сайтостроении – это компактность и многофункциональность сайтов. Разработчики стремятся сделать сайт небольшим по габаритным размерам, но при этом предоставить посетителю как можно больше информации. Именно поэтому в хедер включаются дополнительные элементы, которые и повышают его функциональность.
Одним из таких дополнительных элементов может служить слайдер с автоматической прокруткой слайдов. Такое дополнение сделает хедер сайта не только красивым, но и многофункциональным. Представьте себе, что вы получаете ни одно фоновое изображение с названием и слоганом сайта, а сразу несколько, которые показываются посетителю сайта через определенное время. Объем информации в связи с этим увеличивается в разы.
Хедер сайта
Еще одним функциональным решением для вашего хедера будет решение разместить на нем ссылки на определенные формы или страницы. Так вы наверно нередко встречали такое решение, когда на хедере размещают форму авторизации или обратной связи. Нередко это тяжелое сооружение лишь загромождает хедер. Правильней будет разместить на хедере ссылки на такие формы, а сами формы разместить на отдельной странице. Ссылки можно оформить в виде кнопок, в виде текстовых ссылок или в виде изображений (иконок).
Вообще использование иконок в виде ссылок это очень распространенная в последнее время практика. Так на хедере многих сайтов часто встречаются иконки популярных социальных сетей и закладок, новостных лент сайта и RSS лент. В общем, дополнительные элементы в виде иконок со ссылками станут для хедера вашего сайта еще одной фишкой, которая придаст ему наполненность и функциональность.
Продолжаем дальше. И так мы рассмотрели четыре шага создания ярко выраженного хедера сайта, который имеет свой фон и свою общую структуру. Однако не редко встречаются сайты, на которых мы не наблюдаем ярко выраженного хедера. За частую, это варианты, когда фон хедера совпадает с общим фоном макета. Таким образом, получается эффект, что элементы хедера якобы подвешены в неограниченном пространстве.
Хедер сайта
Такой способ очень хорошо использовать при создании макета сайта любого вида, будь то макет для сайта с фиксированной шириной или для резинового макета сайта. В конечном итоге все равно мы получаем эффект, что сайт якобы подстраивается под ширину окна браузера, хотя в случае с сайтом с фиксированной шириной такого не происходит.
И последнее на чем я хотел бы остановиться это подготовка изображения, которое вы решили использовать в качестве фона для вашего хедера. И так если в качестве фона для хедера сайта, который меняет свои размеры (ширину) в зависимости от разрешения экрана монитора, будет использоваться изображение, то в таком случае это изображение необходимо подготовить. Способов подготовки изображений достаточно много, но я остановлюсь лишь на нескольких.
Способ №1. В качестве фона вы подбираете изображение достаточно больших размеров, то есть ширина его должна быть не менее 2000рх. Вырезав из этого изображения необходимый по высоте элемент, вы получаете фон хедера. Замечание! При верстке сайта именно этот элемент будет использован в качестве фона, поэтому стоит его сохранить отдельным файлом. Итог! При увеличении ширины сайта вы наблюдаете, части фона, которые до этого были скрыты благодаря определенным правилам CSS.
Способ №2. В качестве фона вы подбираете изображение, которое хорошо тиражируется. То есть при повторении данного изображения по горизонтали, мы наблюдаем единую картинку. Вариантов предостаточно. Это кусок неба, газон, кусок помещения, любой абстрактный коллаж и многое другое.
Фон хедера сайта
Способ №3. В качестве фона подбирается изображение по ширине соответствующее минимальной ширине хедера. Края данного изображения растушевываются. Под изображением размещается фон в виде цвета растушевки. Таким образом, мы получаем при изменении ширины хедера плавный переход изображения в фоновый цвет, а как итог ширина фона хедера соответствует ширине всего сайта.
И на этом на сегодня все. Мы рассмотрели с вами принципы и порядок создания хедера сайта, и я думаю, вы уже получили те знания, которые помогут создать хедер для вашего будущего сайта.
Этапы создания макета сайта. Часть 6. Создаем навигационное меню.
Продолжаем рассмотрение темы «Этапы создания макета сайта». А так же продолжаем создавать свой макет для будущего сайта. В предыдущих статьях мы определись с:
• Размерами будущего макета сайта;
• Основным фоном для макета сайта.
• Разметкой макета сайта.
• Хедером для макета сайта.
Сегодня мы будем создавать навигационное меню сайта. Даже если в вашем макете не предусмотрено горизонтальное навигационное меню, то все равно данная статья для вас будет полезна, потому что поможет в создании вертикального меню, которое, как правило, создается при разработке основной части макета.
Как я уже отметил выше, сегодня мы создаем горизонтальное навигационное меню сайта. Для начала несколько слов о меню. Навигационное меню сайта – это инструмент, позволяющий комфортно перемещаться по всем страницам сайта. По своей функциональности меню делятся на одноуровневые и многоуровневые меню.
Создаем навигационное меню
Одноуровневое меню – это простейший вид меню, где названия ссылок располагаются друг за другом в горизонтальной или вертикальной последовательности. Многоуровневое меню – это сложный вид меню, где имеется несколько уровней ссылок на страницы сайта. То есть если одна из ссылок первого уровня имеет подменю, ссылки связанные между собой определенной тематикой, то это уже многоуровневое меню.
В современном сайтостроении тенденция идет к тому, что на сайтах появляется несколько меню, что позволяет в конечном итоге избежать наличия на сайте сложных меню. Стремление логически понятно. Чем проще навигация по сайту, тем удобней сайт для посетителя. На этом, пожалуй, закончим с теорией и перейдем к созданию непосредственно меню.
Шаг №1. Выбираем место для горизонтального навигационного меню на макете сайта. Если горизонтальное меню предусмотрено на макете, то оно может размещаться в трех местах макета. Это над хедером, то есть сверху шапки, внутри хедера и под хедером. При этом если меню располагается по вашей задумке вне хедера, то расположение может быть, как логическое продолжение хедера или же, как отдельный модуль, отделенный от хедера и основной части небольшим расстоянием.
Шаг №2. Определяем размеры навигационного меню. Непосредственно от той информации, которую должно нести в себе навигационное меню, зависят и размеры этого самого меню. Соответственно, чем больше ссылок, тем больше должен быть размер меню. И так ширина меню, которое выступает отдельным модулем или является продолжением хедера, как правило, равняется ширине хедера или макета в целом.
В случаях, когда навигационное меню по задумке располагается внутри хедера, то его размеры зависят от размеров предоставленного участка в хедере. Ну а высота меню подбирается в зависимости от размера шрифта ссылок и соответствующих отступов от текста.
Создаем навигационное меню
Шаг №3. Определяем цветовое решение меню. Цветовое решение меню – это в первую очередь цвет фона меню, цвет разделителей между ссылками, а так же некоторые эффекты, которые сделают меню более привлекательным. И так, цвет фона меню должен находиться в приделах цветовой схемы созданной при разработке web-дизайна сайта. Как правило, фон меню, это однотонный цвет или градиент, позволяющий придать меню некий объем.
Разделитель – это однотонная полоса или полоса из двух цветов, которая, как и градиент придает разделителю объемность. Для большей реалистичности при создании меню довольно часто разработчики используют такие стилистические эффекты, как тень, свечение, тиснение, глянец и наложение узора. Все это придает меню свою индивидуальность и неповторимость.
В случаях, когда меню располагается внутри хедера, его цветовое решение полностью совпадает с цветовыми параметрами хедера и поэтому данный шаг не выполняется.
Шаг №4. Работа над текстовой составляющей навигационного меню. Ссылки на навигационном меню должны четко выделяться и быть заметными для пользователя сайта. Поэтому, как правило, для ссылок определяется отличный от всего сайта вид шрифта и соответственно его размеры. Есть одно замечание. Не стоит злоупотреблять шрифтом и делать его вызывающим в случаях, когда ваше меню является частью хедера или служит его продолжением. В этих случаях достаточно сделать шрифт лишь на один порядок выше основного шрифта используемого в хедере.
Так же обратите особое внимание на цвет шрифта в навигационном меню. Опять я возвращаюсь к цветовой схеме сайта, которую вы должны разработать до начала работ по созданию макета сайта. Цвет шрифта так же должен быть в пределах данной схемы, однако может иметь более основательный оттенок, что бы подчеркнуть значимость меню.
Так же хочу обратить ваше внимание, что все пункты меню должны иметь одинаковые отступы от текста до верхней и нижней части меню и соответственно до разделителей.
Этапы создания макета сайта. Часть 7. Создаем навигационное меню (продолжение).
В статье «Этапы создания макета сайта. Часть 5. Создаем навигационное меню» мы остановились на четвертом этапе создания навигационного меню для макета сайта. Сегодня мы продолжим создавать макет сайта, а конкретно навигационное меню. И так:
Шаг №5. Работа над визуальной привлекательностью навигационного меню. Что здесь имеется ввиду? Каждый из нас, посещая различные сайты в интернет, мог наблюдать, такие визуальные эффектны. Когда, при наведении указателя мыши на один из пунктов навигационного меню, фон области этого пункта меняет свой цвет, иногда цвет может менять и шрифт данного пункта меню. В общем, мы наблюдаем реакцию меню на определенные действия посетителя.
Достигается присутствие такого эффекта относительно не сложно, но не на стадии создания макета сайта, а непосредственно уже на стадии верстки. Однако обозначить присутствие вашей задумки необходимо именно при создании макета сайта. Достигается это так же довольно просто. На стадии прорисовки навигационного меню необходимо один из его пунктов сделать активным. То есть вы прорисовываете данный пункт меню в цветах, которые будут появляться при активных действиях посетителя именно с этим пунктом меню.
Создаем навигационное меню
Таким образом, вы получаете все данные, которые понадобятся вам уже на стадии верстки макета сайта. Кстати, как правило, активным делается первый пункт навигационного меню, который соответствует странице, разрабатываемой вами на данном этапе.
Шаг №6. Работа над многоуровневым меню. Если на вашем сайте предусмотрено многоуровневое меню, то на стадии разработки макета сайта это также стоит обозначить. Лучше всего это сделать в отдельном файле, где вы прорисовываете еще раз непосредственно меню, которое у вас получилось в основном макете и плюс к этому в реальных размерах стоит прорисовать несколько уровней предполагаемого навигационного меню.
Для чего это делается? Ну, во-первых, вы получаете визуальный прототип всего того, что будет происходить непосредственно на сайте при обращении с многоуровневым меню. Так же вы получаете реальный дизайн и размеры низших уровней меню, которых не видно на разрабатываемом макете. Ну и последнее верстальщику, если в конечном итоге им будете не вы, будет намного проще понять, а соответственно выплатить в жизнь все ваши задумки.
Таким образом, мы вкратце рассмотрели порядок создания навигационного меню для макета сайта. Ознакомившись с этим материалом, я думаю у вас получиться создать интересное навигационное меню для макета сайта. Ну, а если все же для вас покажется сложным процесс создания навигационного меню самостоятельно, то в таком случае на помощь вам должен прейти интернет.
Создаем навигационное меню
Дело в том, что кроме способа самостоятельного создания навигационного меню существует еще два способа, как создать меню для сайта. Здесь уже речь не идет о макете сайта, потому что мы получаем готовое меню для сайта.
И так первый способ – это найти готовое навигационное меню для сайта и на стадии верстки встроить его уже непосредственно в созданную структуру будущего сайта. Найти готовые образцы навигационного меню, я думаю, для вас не составит большого труда. Загвоздка может возникнуть лишь с тем, что бы дизайн меню адаптировать под дизайн сайта. Если вы сможете это сделать, то результат в конечном итоге должен порадовать вас.
Еще один способ получить уже готовое меню для сайта – это возможность воспользоваться услугами программы, которая при наличии определенного перечня исходных данных способна создать для вас уже готовое меню с вашими параметрами.
Для того, что бы воспользоваться таким сервисом, достаточно в поисковике забить для поиска фразу «онлайн генератор меню для сайта». Результаты поиска удивят вас. В настоящее время таких сервисов на просторах интернет огромное количество, так что выбирайте на свой вкус и создавайте себе меню по желанию.
Создаем навигационное меню
Таким образом, мы рассмотрели полностью тему «Создаем навигационное меню». В конце хотелось бы обратить ваше внимание на следующее. Создавая свой сайт пытайтесь, как больше делать своими руками. Пусть на первых этапах у вас что то не будет получаться, пусть вы будете допускать ошибки, но вы будите учиться, будите постигать правила сайтостроения, и в конце концов будите набираться опыта. И еще, сайт, созданный своими руками, в любом случае будет дорог для вас.
Этапы создания макета сайта. Часть 8. Создаем подвал (футер) макета сайта.
Продолжаем рассмотрение темы «Этапы создания макета сайта». А так же продолжаем создавать свой макет для будущего сайта. В предыдущих статьях мы определись с:
• Размерами будущего макета сайта;
• Основным фоном для макета сайта.
• Разметкой макета сайта.
• Хедером для макета сайта.
• Навигационным меню макета сайта.
Сегодня мы будем создавать подвал (футер) сайта. Сразу же возникает логический вопрос, а почему после меню идет футер макета, ведь по логике вещей на очереди основная часть, а футер потом. Дело в том, что принцип любой работы, я считаю, идти от простого к сложному. Именно поэтому после верхней части макета, мы переходим к его нижней части. А поспособствует нам в этом имеющаяся разметка макета сайта.
Еще одним положительным моментом, в представленной мною очередности, является тот факт, что после создания футера вы получаете приближенную реалистическую картинку будущего макета и уже сможете оценить, насколько удачен вами разработанный дизайн.
Создаем футер макета сайта
Прежде, чем приступить к непосредственному созданию футера для макета сайта, я хотел бы вам посоветовать прочитать мою статью «Создание внешней структуры сайта. Часть 4. Подведение итогов». В этой статье вы познакомитесь с порядком и принципами комплектования футера сайта. Эта статья поможет составить список элементов, которые сделают ваш футер функциональным и в тоже время привлекательным.
И так приступаем, к созданию футера сайта:
Шаг №1. Определение фона футера макета сайта. Как и в предыдущих статьях, где мы подбирали фон для макета, хедера и навигационного меню, фон для футера может быть в виде простого цветового фона, текстурного фона, фона с использованием полногабаритного изображения, а так же комбинированного фона.
Однако при всем этом многообразии есть единственное, но очень важное правило. Фон хедера должен соответствовать самому темному цвету из цветовой схемы web-дизайна сайта. То есть по отношению к иным фоновым решениям макета, футер должен быть темнее, что создает необходимый контраст и подчеркивает некую завершенность общей картины.
Вид фона футера во многом зависит от размеров этого самого футера. Не правда ли будет смотреться, как то неуклюже фон с использованием полногабаритного изображения в однострочном футере. Поэтому сопоставляйте размеры футера с видом фона.
Шаг №2. Разметка футера макета сайта. После того, как вы создали фон для футера необходимо произвести разметку для того, что бы дальнейшее размещение модулей футера не стало хаотическим, а имело определенную структуру. Что бы все модули были выровнены по горизонтали и имели одинаковые отступы от краев футера и между собой.
Создаем футер макета сайта
Разметка футера проводится в тех случаях, если предполагаемый футер имеет сложную структуру и в конечном итоге на нем будет размещено большое количество отдельных модулей. В случае создания сложного футера, а это в современном сайтостроении является некой модой, его необходимо разделить на несколько колонок. Число колонок полностью зависит от объема информации, которую вам необходимо разместить в футере. Как правило, это 3 — 4 колонки, которые могут быть одинаковыми или различными по ширине.
Шаг №3. Вставка в футер отдельных графических элементов. После разметки футера пришла очередь подчеркнуть и в этом основном модуле макета тематику сайта. Такими графическими элементами, как правило, являются логотип сайта или графическое изображение, которое было использовано в хедере данного макета.
Но при этом стоит помнить, что футер по своей направленности является неким графическим и тематическим окончанием страницы, поэтому графика, которая размещается в футере так, же должна быть своего рода затухающей и иметь приглушенные цвета. Особенно это касается графических элементов, которые до этого использовались в хедере. Данные элементы во первых должны иметь меньшие размеры ну соответственно цветовую гамму, как минимум на порядок ниже той, которая использовалась в хедере.
Очень часто можно наблюдать, что логотип сайта в футере отображается вообще в черно-белом формате в виде водяного знака. Таким образом, убиваем сразу два зайца одним выстрелом. Мы обозначаем тематику сайта в футере, но при этом не делаем футер броским, на который отвлекается внимание посетителя.
