×
Закрытие
5
×

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Вы здесь: Главная → Сборник статей → Верстка → Оформление контента сайта с помощью стилей CSS


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

    Оформляем область контента с помощью стилей CSS

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

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

    Содержание


    • Размещение блоков основного содержания и сайдбара
    • Формирование внутренних элементов блока основного содержания
    • Оформление текста блока основного содержания
    • Оформление элементов сайдбара
    • Исходные файлы сайта

    Размещение блоков основного содержания и сайдбара


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

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

    с классом content-block.

    1. class="content-block">

    2. Основное содержание

    3. Сайдбар

    Рис.1

    В первую очередь определим ширину области контента и ее основных элементов. Эти размеры рассчитаем в процентном соотношении к родительским элементам. Что касается сайдбара, то в соответствии с установленными требованиями он имеет фиксированные размеры (ширина 240pх, высота 760pх).

    Расчет области контента выполним аналогично расчету блока ротатора следующим образом: 1200px - 2 * 100px / 1200px * 100% = 83.33%

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

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

    ), имеющему переменную ширину будет отведена вся область контента за исключением той части, на которой будет находиться сайдбар (