×

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

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

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

  • Рубрики
  • Слайдер
  • Сайдбар
  • Подписка
  • Вниз
  • Вверх
×
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

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

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

Самописный сайт своими руками!

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

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

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

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


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

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

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

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

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

Содержание


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

Назначение размеров и размещение блока ротатора


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

  1. <section>

  2. <div class="rtr-block1">

  3. <div class="rtr-screen">

  4. <img src="images/photo_1.jpg" alt="Маркировка автомобиля, картинка 1">

  5. </div>

  6. </div>

  7. <div class="rtr-block2">

  8. <div class="rtr-text">

  9. <Η2>Хотите защитить автомобиль от угона?</Η2>

  10. <p class="hdr-p1">Не многие знают, что самый простой и эффективный способ ... </p>

  11. </div>

  12. </div>

  13. </section>

Рис.1

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

Сначала рассчитаем в процентном соотношении ширину блока ротатора <section>.

Определение его размеров выполняется аналогично тому, как это проводилось при формировании меню в статье Создаем меню сайта с помощью стилей CSS, и рассчитывается следующим образом: 1200px - 2 * 100px / 1200px * 100% = 83.33%

Следующим шагом будет рассчет блока основного содержания.

В соответствии с дизайн-макетом он имеет ширину разметкой HTML-страницы, контейнер <section> состоит из двух блоков "обверток" <div>, один с классом rtr-block1, другой с rtr-block2. Ширину каждого из них можно определить аналогичным образом:

  • для блока с классом rtr-block1 ширина - 58% ((680px - 100px) / 1000 px * 100%);
  • для блока с rtr-block2 ширина - 42% ((1100px - 680px) / 1000px * 100%);

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

Исходя из полученных значений установим ширину ротатора и отцентруем его по ширине с помощью соответствующих свойства CSS.

  1. section {

  2. width:83.33%;

  3. margin:30px auto 0 auto;

  4. background-color:#eee;

  5. }

  6. .rtr-block1 {

  7. width:58%;

  8. }

  9. .rtr-block2 {

  10. width:42%;

  11. }

Рис.2

В CSS-коде можно увидеть, что расположение блока ротатора по центру страницы выполнено с использованием свойства margin со значением auto с правой и левой стороны. Этим же свойством ротатор смещен вниз от меню на 30px.

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Оформление блока ротатора, картинка 1

Рис.3 Вид блока ротатора в предыдущем состоянии

Для увеличения / уменьшения размера изображения кликните по картинке
Оформление блока ротатора, картинка 2

Рис.4 Вид ротатора посе внесения изменений в CSS-код

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

Теперь расположим блоки "обвертки" в один ряд. Сделаем это, назначив им свойство display со значением table-cell.

В результате код примет следующий вид.

  1. section {

  2. width:83.33%;

  3. margin:30px auto 0 auto;

  4. background-color:#eee;

  5. }

  6. .rtr-block1 {

  7. width:58%;

  8. display:table-cell;

  9. }

  10. .rtr-block2 {

  11. width:42%;

  12. display:table-cell;

  13. }

Рис.5

Обновив страницу можно увидеть ее измененный вид.

Для увеличения / уменьшения размера изображения кликните по картинке
Оформление блока ротатора, картинка 3

Рис.6

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

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

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

Размещение внутренних элементов


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

Для этого рассчитаем их параметры, причем размеры для блока с классом rtr-screen определим по отношению к родительскому элементу блока "обвертки" с шириной в 580px, а для rtr-text - 420px.

Параметры блока с классом rtr-img:

  • ширина - 86.21% ((640px - 140px) / 580 px * 100%);
  • внутренний отступ (padding) влево - 6.89% (40px / 580px * 100%);
  • padding вправо - 6.89% (40px / 580px * 100%);
  • padding вверх - 6.89% (40px / 580px * 100%);
  • padding вниз - 6.89% (40px / 580px * 100%);

Параметры блока с классом rtr-text:

  • padding) влево - 0;
  • padding вправо - 7.14% (30px / 420px * 100%);
  • padding вверх - 4.76% (20px / 420px * 100%);
  • padding вниз - 4.76% (20px / 420px * 100%);

Исходя из полученных значений назначим соответствующие свойства CSS.

  1. section {

  2. width:83.33%;

  3. margin:30px auto 0 auto;

  4. background-color:#eee;

  5. }

  6. .rtr-block1 {

  7. width:58%;

  8. display:table-cell;

  9. vertical-align:middle;

  10. }

  11. .rtr-screen {

  12. margin:6.89% 6.89% 6.89% 6.89%;

  13. }

  14. .rtr-screen img {

  15. width:100%;

  16. }

  17. .rtr-block2 {

  18. width:42%;

  19. display:table-cell;

  20. vertical-align:middle;

  21. }

  22. .rtr-text {

  23. margin:6.89% 7.14% 6.89% 6.89%;

  24. }

Рис.7

Кроме свойств внешних отступов (padding) здесь также можно увидеть свойство, примененное к блокам "обверток" vertical-align со значением middle.

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

Кроме того, нужно обратить внимание на свойство width со значением 100%, присвоенное элементу картинки ротатора img. Ширина его в 100% к размеру блока div с классом rtr-screen будет обеспечивать изменение экрана ротатора пропорционально ширине веб-страницы.

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

Для увеличения / уменьшения размера изображения кликните по картинке
Оформление блока ротатора, картинка 4

Рис.8

Оформление текстового рекламного блока


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

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

Для заголовка <Η2>:

  • шрифт "Arial" из семейства шрифтов без засечек;
  • стиль - стандартный (не курсивный, нежирный);
  • размер - 1.25em (20px);
  • цвет - "ee1414".
  • внутренний отступ (padding) вверх - 1.19% (5px / 420 px * 100%).
  • padding вниз - 2.38% (10px / 420 px * 100%).

Для абзаца <p>:

  • шрифт "Arial" из семейства шрифтов без засечек;
  • стиль - стандартный (не курсивный, нежирный);
  • размер - 1.0em (16px);
  • цвет - "2f2f49".
  • padding вверх - 2.38% (10px / 420 px * 100%).

На рис.9 показан CSS-код, на рис.10 - вид ротатора после внесенных изменений.

  1. section {

  2. width:83.33%;

  3. margin:30px auto 0 auto;

  4. background-color:#eee;

  5. }

  6. .rtr-block1 {

  7. width:58%;

  8. display:table-cell;

  9. vertical-align:middle;

  10. }

  11. .rtr-screen {

  12. margin:6.89% 6.89% 6.89% 6.89%;

  13. }

  14. .rtr-screen img {

  15. width:100%;

  16. }

  17. .rtr-block2 {

  18. width:42%;

  19. display:table-cell;

  20. vertical-align:middle;

  21. }

  22. .rtr-text {

  23. margin:6.89% 7.14% 6.89% 6.89%;

  24. }

  25. .rtr-text h2 {

  26. text-align:center;

  27. font-size:1.25em;

  28. color:#ee1414;

  29. padding: 1.19% 0 2.38% 0;

  30. }

  31. .rtr-text p {

  32. text-indent:4.76%;

  33. color:#2f2f49;

  34. padding-top: 2.38%;

  35. }

Рис.9

Для увеличения / уменьшения размера изображения кликните по картинке
Оформление блока ротатора, картинка 5

Рис.10

Как видно, теперь текст рекламного блока приобрел вид по образцу дизайн-макета.

Оформление общего внешнего вида ротатора


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

Как получить с дизайн-макета данные о тенях также показывалось в предыдущих статьях, поэтому сформулируем полученные значения в следующем порядке:

  • смещение тени по горизонтали - 6px;
  • смещение тени по вертикали - 6px;
  • размытость тени - 6px;
  • цвет тени - "888888".

Кроме того, экран ротатора в соответствии с дизайн-макетом имеет радиус закругления размером в 10px.

Используя эти значения создадим у блока экрана с классом rtr-screen четыре бордюра толщиной в 6px, два из которых (левый, верхний) примут цвета тени, а правому и нижнему будет назначен белый цвет.

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

  1. .rtr-screen {

  2. margin:6.89% 6.89% 6.89% 6.89%;

  3. border-top:6px solid #888;

  4. border-left:6px solid #888;

  5. border-bottom:6px solid #fff;

  6. border-right:6px solid #fff;

  7. }

Рис.11

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

После сделанных дополнений экран ротатора несколько преобразится.

Для увеличения / уменьшения размера изображения кликните по картинке
Оформление блока ротатора, картинка 6

Рис.12

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

На дизайн-макете угловые закругления имеют значение 10px, поэтому в таблице стилей CSS мы также назначим это значение.

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

Учитывая эти особенности наш CSS-код в части элемента section примет следующий вариант.

  1. section {

  2. width:83.33%;

  3. margin:30px auto 0 auto;

  4. background-color:#eee;

  5. border-radius:10px;

  6. box-shadow:0px 0px 60px 0px #fff;

  7. }

Рис.13

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

Для увеличения / уменьшения размера изображения кликните по картинке
Оформление блока ротатора, картинка 7

Рис.14

И последнее.

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

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

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

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

Если кому интересно, и кто хочет поближе познакомиться с этим инструментом, можно перейти на соответствующую страницу справочника "Puzzleweb" по ссылке "http://www.puzzleweb.ru/css/all_properties.php".

И так, в нашем случае мы создадим линейный градиент от нижней до верхней границы области ротатора. При этом в нижней части на расстоянии от 0% до 1.5%, а затем от 1.5% до 3% по отношению к высоте блока назначим более темные цвета. В верхней же части, в обратном порядке - более светлые.

Кроме этого, для небольшой окантовки в верхней части добавим бордюр толщиной всего в 1px, назначив свойство border-top со значением :1px solid #dedede;

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

  1. section {

  2. width:83.33%;

  3. margin:30px auto 0 auto;

  4. background-color:#eee;

  5. border-radius:10px;

  6. box-shadow:0px 0px 60px 0px #fff;

  7. background-image:linear-gradient(to top, #ccc 0%, #e9e9e9 1.5%, #eee 3%, #eee 97%, #f7f7f7 99.3%, #fafafa 100%);

  8. border-top:1px solid #dedede;

  9. }

Рис.15

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

Для увеличения / уменьшения размера изображения кликните по картинке
Оформление блока ротатора, картинка 8

Рис.14

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

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

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

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


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

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

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

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

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


Комментарии


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

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

comments powered by HyperComments