Внимание! Сайт переехал на новый домен sayt-sozdat.ru. Пожалуйста, обновите страницы закладок с новыми URL
×
Закрытие
×

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

Начало оформления сайта с помощью стилей CSS

Начинаем оформлять сайт с помощью стилей CSS

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

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

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

Содержание


  • Установка параметров резиновой верстки
  • Создания файла фонового изображения для шапки сайта
  • Формирование области шапки
  • Формирование областей контента и футера
  • Исходные файлы сайта

Установка параметров резиновой верстки


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

Далее, будем продолжать эту таблицу c назначения стилей для блока "обвертки" с классом "wrapper", который был создан при составлении каркаса HTML-страницы.

  1. /*----------начало назначения стилей css----------*/

  2. .wrapper {

  3. max-width: 1600px;

  4. min-width: 1000px;

  5. margin: 0 auto;

  6. background: #f5f5f5;

  7. border: 1px solid #ccc;

  8. }

Рис.1

Сделаем некоторые пояснения свойствам, назначенным классу .wrapper (так обозначается класс в каскадной таблице стилей), которые определяют параметры резиновой верстки:

  • в строке 3 свойством max-width определяем верхний предел резиновой верстки при значении в 1600px;
  • в строке 4, аналогично, свойством min-width обозначаем нижний предел величиной 1000px;
  • для того, чтобы при разрешения экрана больше верхнего предела резиновой верстки страница отображалась по центру, а не была бы сдвинута к левому краю, в строке 5 свойству margin, определяемому внешние отступы, устанавливаем 0 auto, где "0" - означает нулевые отступы по вертикали и "auto" - выравнивание по центру по горизонтали;

Кроме того, этот элемент с классом .wrapper можно также использовать и для оформления внешнего вида страницы, так:

  • в строке 6 свойство background задаем основной фон для всей страницы, который в соответствии с дизайн-макетом должен иметь цвет в шестнадцатеричном коде, равный #f5f5f5;
  • Ниже на рис.2 показано как можно определить цвет фона на дизайн-макете, чтобы затем внести это значение в таблицу стилей.

    Оформление веб-страницы стилями CSS, картинка 1

    Рис.2

  • в строке 7 для обозначения границ страницы свойством border задаем бордюры по ее краям толщиной в 1px в виде сплошной линии светло-серого цвета, что соответствует значению 1px solid #ccc;;
  • Ниже, на скриншотах можно увидеть, что получилось после назначения данных стилей.

Вид веб-страницы после назначения параметров резиновой верстки

Оформление веб-страницы стилями CSS, картинка 2

Рис.3 При максимальном пределе резиновой верстки (разрешение 1600px)

Оформление веб-страницы стилями CSS, картинка 3

Рис.4 При разрешении более макс. предела резиновой верстки (1920px)

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

Создания файла фонового изображения для шапки сайта


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

  • После открытия файла дизайн-макета отключаем слои, которые располагаются сверху слоя композиции шапки, а именно: фавикон, наименование сайта, ключевую фразу и меню, как показано на скриншоте.
  • Оформление веб-страницы стилями CSS, картинка 2

    Рис.5

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

    Рис.6

  • Затем, через меню "Файл" выбираем режим сохранения для "Web".
  • Оформление веб-страницы стилями CSS, картинка 4

    Рис.7

  • После, выбираем формат и параметры сохранения, в нашем случае целесообразно использовать формат "JPEG", который позволяет значительно сжать изображение, и получить на выходе вместо 984 кбайт всего 49,9 кбайт, что, практически в 20 раз меньше первоначального объема. А, это очень важно для уменьшения времени загрузки веб-страницы.
    При этом, изменением уровня качества (в данном случае он установлен в пределах 75) можно настраивать баланс между качеством изображения и степенью сжатия (рис.8).
    В случае, если изображение нужно сохранить в растровом формате, использующим сжатие без потерь, можно при выборе экспорта, вместо "Сохранить для Web" перейти на "Быстрый экспорт в PNG" (рис.7). Либо при экспорте для Web вместо режима "JPEG" выбрать "PNG" (рис.8).
  • Оформление веб-страницы стилями CSS, картинка 5

    Рис.8

  • Ну, и наконец, сохраняем полученный файл в папку "images" нашего сайта.
  • Оформление веб-страницы стилями CSS, картинка 6

    Рис.9

  • Для того, чтобы вернуть наш дизайн-макет в первоначальное состояние, делаем один шаг назад, для чего одновременно нажимаем клавиши "Ctrl", "Alt" + "Z" (для шага "вперед" аналогично используется "Shift", "Ctrl", + "Z"). Можно также делать шаги "вперед/назад" через меню "Редактирование", как показано на следующем скриншоте.
  • Оформление веб-страницы стилями CSS, картинка 7

    Рис.10

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


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

Ниже, показано, какие необходимо для этого назначить свойства CSS для элемента <header>, в котором в соответствии с разметкой находится шапка сайта.

  1. /*----------начало назначения стилей css----------*/

  2. .wrapper {

  3. max-width: 1600px;

  4. min-width: 1000px;

  5. margin: 0 auto;

  6. background: #f5f5f5;

  7. border: 1px solid #ccc;

  8. }

  9. header {

  10. height: 210px;

  11. background: url("/images/header.jpg") no-repeat;

  12. background-size: 100% 100%;

  13. border-top: 1px solid #ddd;

  14. box-shadow: 0px 4px 5px 0px #aaa;

  15. }

Рис.11

Сделаем некоторые пояснения по данной таблице:

  • в строке 10 свойством height определяем вертикальный размер шапки, который в соответствии с дизайн-макетом, вместе с меню должен составлять 210px;
  • в строке 11 свойством background устанавливаем фоновое, не повторяющееся изображение, где указываем путь к файлу изображения url("/images/header.jpg") no-repeat. В данном случае файл находится в папке "images" корневого каталога.
  • в строке 12 свойством background-size задается размер для фонового изображения, в нашем случае он составляет 100% по вертикали и горизонтали;
  • в строке 13 свойство border-top создает верхний бордюр для шапки со значениями : 1px solid #ddd, где "1px" - толщина линии, "solid" - сплошная линия и "#ddd" - цвет;
  • в строке 14 свойством box-shadow задается дополнительная тень для шапки, придавая ему некую объемность. Значения 0px 4px 5px 0px определяет параметры тени. Более подробно о свойстве box-shadow можно посмотреть в справочнике Puzzleweb.скриншот 61

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

Оформление веб-страницы стилями CSS, картинка 8

Рис.12

Формирование областей контента и футера


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

Если посмотреть на HTML-сраницу, то после блока <header> ниже расположены следующие по порядку элементы:

  • <section> для размещения ротатора;
  • <main> для основного содержания;
  • <aside"> для сайдбара;
  • <footer> для подала;

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

Как определять размеры элементов дизай-макета, показано ниже на примере ротатора.

Оформление веб-страницы стилями CSS, картинка 9

Рис.13

Как видно из дизайн-макета, высота блока ротатора составляет 330px (570px - 240px). При этом, расстояние ротатора от шапки, как и для всех остальных блоков между собой имеет величину 30px. Таким образом, определим размеры по вертикали для следующих блоков:

  • <section> - 330px (570px - 240px);
  • <aside"> - 760px (1360px - 600px);
  • <footer> - 140px (1530px - 1390px).

Для блока <main> мы не будем задавать размеры по вертикали, так как это зависит от объема его содержания. В данном случае, для того, чтобы задать базовую высоту страницы, нам достаточно будет обозначить минимальную высоту блока <aside">.

С учетом полученных данных назначим соответствующие свойства вышеперечисленным элементам, причем каждому блоку добавим сверху отступ в размере 30px.

  1. /*----------начало назначения стилей css----------*/

  2. .wrapper {

  3. max-width: 1600px;

  4. min-width: 1000px;

  5. margin: 0 auto;

  6. background: #f5f5f5;

  7. border: 1px solid #ccc;

  8. }

  9. header {

  10. height: 210px;

  11. background: url("/images/header.jpg") no-repeat;

  12. background-size: 100% 100%;

  13. border-top: 1px solid #ddd;

  14. box-shadow: 0px 4px 5px 0px #aaa;

  15. }

  16. section {

  17. height: 330px;

  18. margin-top: 30px;

  19. background: #e7e7e7;

  20. }

  21. aside {

  22. height: 760px;

  23. margin-top: 30px;

  24. background: #e7e7e7;

  25. }

  26. footer {

  27. height: 140px;

  28. margin-top: 30px;

  29. background: #51878a;

  30. }

Рис.14

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

Также, для более хорошего восприятия блоков области контента, временно разместим их наименования в теги заголовков, например 2-го уровня, для чего внесем дополнения в существующий файл "index.html" как показано ниже.

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="utf-8" />

  5. <title>Заголовок страницы</title>

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

  7. </head>

  8. <body>

  9. <div class="wrapper">

  10. <header>

  11. ...

  12. </header>

  13. <section>Ротатор</section>

  14. <main><h2>Основное содержание</h2></main>

  15. <aside"><h2>Сайдбар</h2></aside>

  16. <footer>Подвал</footer>

  17. </div>

  18. </body>

  19. </html>

Рис.15

Если мы теперь обновим страницу, то увидим сформированную на этом этапе веб-страницу нашего сайта.

Оформление веб-страницы стилями CSS, картинка 10

Рис.16

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

Исходные файлы сайта


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

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

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

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

С уважением, Николай Гришин


Комментарии


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

Буду Вам за это очень признателен!