×
Закрытие
10
×

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

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Статья сборника Как установить графический редактор GIMP

Перейти к статье

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

Здравствуйте уважаемый посетитель!

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

В статье Устанавливаем бесплатный графический редактор GIMP речь пойдет о бесплатной программе GIMP, которая позволяет в полной мере решать вопросы по созданию элементов дизайна веб-страниц. И будет показано, как ее установить на локальный компьютер.

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

Для тех же, кто хочет заниматься дизайном на платном Adobe Photoshop (фотошоп), здесь также упомянут и такой вариант, основанный на использовании продления льготного бесплатного периода фотошопа на неопределенное время...

    Cайт на практическом примере

    Текущее состояние создаваемого сайта

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

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

    Вы здесь: Главная → Сборник статей → Верстка → Разметка шапки и футера HTML-страницы


    Автор: / Дата:

    Делаем разметку шапки и футера HTML-страницы

    Здравствуйте, уважаемый посетитель!

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

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

    Содержание


    • Разметка шапки
    • Разметка меню шапки
    • Разметка футера
    • Что такое фавикон и для чего он нужен
    • Исходные файлы сайта

    Разметка шапки


    Верстку нашего сайта будем делать в соответствии с ранее созданным дизайн-макетом.

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

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

    Делаем разметку шапки веб-страницы, картинка 1

    Рис.1 Дизайн-макет главной страницы

    Рис.2 Прототип сайта

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

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

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

    с атрибутом класса "hdr-block", а два фрагмента ключевой фразы разместим в блоки

    .

    Класс "hdr-block" здесь назван, как сокращенное от "header block", обозначающее блок заголовка. В дальнейшем, при присвоении атрибутов, всегда будут прописываться названия на английском языке (включая сокращенные) с учетом смыслового значения.

    Для того, чтобы различать блоки

    между собой (это необходимо для возможности в дальнейшим определить им разные смещения по горизонтали с левой стороны), присвоим им разные классы, соответственно "hdr-p1" и "hdr-p2".

    И все эти элементы, в свою очередь, объединим в общий блок

    с атрибутом класса "hdr-title", который будет являться составной частью шапки, наряду с блоком "меню."

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

    1. charset="utf-8" />

    2. <span class="black"><b>Заголовок страницы</b></span>

    3. name="Description" content="Краткое описание содержания страницы">

    4. "wrapper">

    5. class="hdr-title">

    6. class="hdr-block">

    7. src="images/logo.gif" alt="Фавикон"/>

    8. Название сайта

  • class="hdr-p1">Противоугонная маркировка стекол -

  • class="hdr-p2">надежная защита автомобиля от угона

  • Ротатор

  • Основное содержание

  • Сайдбар

  • Подвал

  • Рис.3

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

    Делаем разметку шапки веб-страницы, картинка 3

    Рис.4

    Что касается большого шрифта названия сайта, то это произошло от того, что данное словосочетание размещено в блоке <Η1>, являющимся заголовком 1-ого уровня. Поэтому, и увеличился размер шрифта в соответствии с установками браузера по умолчанию.

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

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

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

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

    Следует обратить внимание также на отображение фавикона. Сейчас, вместо изображения, можно увидеть только иконку предполагаемой картинки и слово "Фавикон".

    Это обусловлено тем, что на данный момент в каталоге сайта "www" пока еще нет папки "images" с картинкой "logo.jpg", которые прописаны в атрибуте тега в строке 13. И поэтому, вместо изображения можно увидеть только знак картинки с ее названием, присвоенным в атрибуте "alt" этого же тега.

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

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

    Если бы эта страница находилась бы в каком-нибудь дочернем каталоге, то для того, чтобы указать путь для этой картинки, в самом начале адреса нужно было бы добавить слеш "/" или использовать для этого другую символику. Более подробно о том как указывать относительные адреса в HTML-коде, можно посмотреть в разделе "HTML: Абсолютные и относительные ссылки справочника "Puzzleweb".

    скриншот 31

    Разметка меню


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

    Ниже показана страница, дополненная фрагментом HTML-кода, в части касающейся меню.

    1. charset="utf-8" />

    2. <span class="black"><b>Заголовок страницы</b></span>

    3. name="Description" content="Краткое описание содержания страницы">

    4. "wrapper">

    5. class="hdr-title">

    6. class="hdr-block">

    7. src="images/logo.gif" alt="Фавикон"/>

    8. Название сайта

  • class="hdr-p1">Противоугонная маркировка стекол -

  • class="hdr-p2">надежная защита автомобиля от угона

  • Ротатор

  • Основное содержание

  • Сайдбар

  • Подвал

  • Рис.5

    Элементу