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

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

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

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

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

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

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

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

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

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

    1. Проверка при малых разрешениях экрана
    2. Проверка при больших разрешениях экрана
    3. Проверка на выделенном домене

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

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

    Для этого предусмотрена возможность оценивать его работу в двух вариантах: с использованием зеркала сайта на поддомене текущего ресурса и на реальном интернет-ресурсе, размещенном на выделенном домене "avtobezugona.ru.

    Следует отметить, что первый вариант, предусматривающий использование зеркала сайта, позволяет наглядно оценить его работу при различных разрешениях экрана в диапазоне от 320px до 1920px. Что очень удобно для проверки адаптации во всем допустимом диапазоне.

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

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

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

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

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

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


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

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

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

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

Содержание


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

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


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

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

  1. <div class="content-block">

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

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

  4. </div>

Рис.1

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

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

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

Как указывалось ранее при пояснении метода резиновой верстки в статье Делаем разметку области контента с использованием резиновой верстки, суть такого приема в том, что блоку основного содержания (<main>), имеющему переменную ширину будет отведена вся область контента за исключением той части, на которой будет находиться сайдбар (<aside>).

Поэтому, для того, чтобы это сделать, мы назначим блоку <main> внешний отступ вправо margin-right величиной в 280pх, где 240pх - ширина блока <aside>, 40pх - отступ между блоками.

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

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

  1. .content-block {

  2. width:83.33%;

  3. margin:30px auto 0 auto;

  4. }

  5. main {

  6. margin-right:280px;

  7. background:#fbfbfb;

  8. }

  9. aside {

  10. width:240px;

  11. }

Рис.2

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

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

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

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

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

Рис.4 Вид области контента после внесения изменений

Как видно, вся область контента расположилась по центру, а блок основного содержания за счет внешнего отступа освободил с правой стороны свободное место для сайдбара. Сайдбар пока на этом этапе по-прежнему располагается внизу, но все его содержимое теперь стало ограничиваться установленной шириной в 240px.

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

Следует отметить, что относительное позиционирование для контейнера <div> с классом content-block задается для того, чтобы привязать к нему блок <aside>. В противном случае при абсолютном позиционировании блок <aside> будет смещен не к верхнему правому углу родительского элемента, а к крайним границам веб-страницы.

Кроме этого, зададим контейнеру <div> с классом content-block минимальную высоту, равную высоте сайдбара в 760px. Это необходимо предусмотреть для того, чтобы исключить перекрытие футером сайдбара в тех случая, когда высота блока основного содержания может оказаться меньше высоты сайдбара.

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

  1. .content-block {

  2. min-height:760px;

  3. width:83.33%;

  4. margin:30px auto 0 auto;

  5. position:relative;

  6. }

  7. main {

  8. margin-right:280px;

  9. background:#fbfbfb;

  10. }

  11. aside {

  12. width:240px;

  13. position:absolute; top:0; right:0;

  14. }

Рис.5

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

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

Рис.6 Вид страницы при разрешении экрана в 1600pх

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

Рис.7 Вид страницы при разрешении экрана в 1000pх

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

После этого можем приступить к оформлению внешнего вида элементов контента.

Формирование внутренних элементов блока основного содержания


В соответствии с дизайн-макетом блок основного содержания состоит из текстовой части статьи, образованной блоком <div> с классом article и разделом комментариев - <div> с классом comments. Для того, чтобы их сформировать определим необходимые размеры отступов.

Сначала определим внутренние отступы padding для всего блока <main>:

  • отступы по вертикали - 10px;
  • отступы по горизонтали в процентном соотношении от ширины области контента составят 2% (20px / 1000 px * 100%)

Затем определим внешние отступы внутренних блоков, которые будут задавать расстояния между ними. Исходя из дизайн-макета они будут иметь значение margin-bottom для каждого по 20px .

Дополнительно к этому зададим им небольшую минимальную высоту в размере 100px. Это желательно сделать на случай отсутствия на какой-нибудь из страниц достаточного объема текста для этих элементов.

Также для сглаживания границ блока основного содержания <main> с общим фоном страницы назначим для него свойства тени и закругления углов таким же образом, как мы это делали при оформлении ротатора.

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

  1. .content-block {

  2. min-height:760px;

  3. width:83.33%;

  4. margin:30px auto 0 auto;

  5. position:relative;

  6. }

  7. main {

  8. margin-right:280px;

  9. background:#fbfbfb;

  10. padding:10px 2%;

  11. border-radius:0px 0px 60px 0px #fff;

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

  13. }

  14. .article, .comments {

  15. min-height:100px;

  16. margin-bottom:20px;

  17. }

  18. aside {

  19. width:240px;

  20. position:absolute; top:0; right:0;

  21. }

Рис.8

После обновления браузера можно увидеть соответствующие изменения в этой части страницы.

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

Рис.9

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

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


Сначала определим в соответствии с дизайн-макетом основные свойства текста.

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

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

  • шрифт "Arial" из семейства шрифтов без засечек;
  • стиль - стандартный (курсивный, жирный);
  • размер шрифта - 1.125em (18px);
  • цвет - "bd072e".

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

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

Для линий <hr> определим следующие свойства:

  • толщину - 1px;
  • цвет - "bd072e".
  • внешний отступ вверх - 5px, вниз - 10px.
Кроме этого, для сглаживания линии применим тень в небольшом размере, всего в 1px.

С учетом этого CSS-код примет следующий вид.

  1. .content-block {

  2. min-height:760px;

  3. width:83.33%;

  4. margin:30px auto 0 auto;

  5. position:relative;

  6. }

  7. main {

  8. margin-right:280px;

  9. background:#fbfbfb;

  10. padding:10px 2%;

  11. }

  12. .article, .comments {

  13. min-height:200px;

  14. margin-bottom:20px;

  15. }

  16. aside {

  17. width:240px;

  18. position:absolute; top:0; right:0;

  19. }

  20. main h1, main h2, main h3 {

  21. font-size:1.125em;

  22. font-weight:bold;

  23. font-style:italic;

  24. color:#bd072e;

  25. }

  26. main p {

  27. text-indent:2%;

  28. padding-top:0.5%;

  29. color:#2f2f49;

  30. }

  31. main hr {

  32. height:1px;

  33. background:#bd072e;

  34. margin:5px 0px 10px 0px;

  35. box-shadow:0px 0px 1px 0px #bd072e;

  36. }

  37. aside {

  38. width:240px;

  39. position:absolute; top:0; right:0;

  40. }

Рис.10

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

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

Рис.11

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

Оформление элементов сайдбара


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

В соответствии с дизайн-макетом сайдбар состоит из трех отдельных элементов <div> с классами: блок поиска с классом seach, блок подписки - subscribe и баннер - banner.

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

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

1. Для блоков поиска и подписки:

  • аналогично, как и ранее для ротатора, для придания элементам эффекта выпуклости назначаются свойства линейного градиента и бордюров;
  • для придания границ внутреннему содержимому назначаются свойства внутренних отступов с одинаковыми для всех значениями - 5px по вертикали, 20px по горизонтали;
  • одинаковый для всех элементов размер шрифта со значением 0.9375em (15px);
  • одинаковый для всех элементов цвет шрифта со значением "212a68";
  • одинаковый для всех элементов межстрочный интервал со значением 0.8;

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

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

Из индивидуальных параметров можно отметить блок баннера. Ввиду того, что в данном случае в качестве баннера используется простая картинка, то, для обеспечения его нужных размеров требуется назначения отдельных свойств для элемента <img> таких, как:

  • высота - 340px;
  • ширина - 240px;

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

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

  1. aside {

  2. width:240px;

  3. position:absolute; top:0; right:0;

  4. }

  5. .seach, .subscribe {

  6. background-image:linear-gradient(to top, #ccc 0%, #e9e9e9 6%, #eee 12%, #eee 88%, #f7f7f7 96%, #fafafa 100%);

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

  8. padding:5px 20px;

  9. font-size:0.9375em;

  10. color:#212a68;

  11. line-height:0.8;

  12. }

  13. .seach, .subscribe, .banner {

  14. border-radius:10px;

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

  16. }

  17. .subscribe, .banner {

  18. margin-top:15px;

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

  20. }

  21. .banner img {

  22. height:340px;

  23. width:240px;

  24. }

Рис.12

После обновления браузера можно увидеть как изменился вид элементов сайдбара.

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

Рис.13

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

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

Для всех элементов select и input высота составляет 30px.

Для элементов select, input[name="word"], input[name="mode"], input[name="name"], input[name="email"] такие одинаковые значения, как:

  • внешних и внутренних отступов;
  • фон полей ввода;
  • параметры бордюров и теней.

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

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

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

  1. select, input {

  2. height:30px;

  3. }

  4. select, input[name="word"], input[name="mode"], input[name="name"], input[name="email"] {

  5. margin:9px 0 10px 0;

  6. padding:5px 8px 0 8px;

  7. box-sizing:border-box;

  8. background:#fdfadc;

  9. box-shadow:3px 3px 5px 0px #8b8e8d inset;

  10. border-radius:5px;

  11. border-bottom:2px solid #fff;

  12. border-right:2px solid #fff;

  13. }

  14. input[name="word"], input[name="name"], input[name="email"] {

  15. width:200px;

  16. padding:5px 8px 0 8px;

  17. }

  18. select {

  19. width:125px;

  20. padding:5px 0 0 5px;

  21. }

  22. input[type="submit"] {

  23. height:30px;

  24. margin-bottom:10px;

  25. border-radius:5px;

  26. background:#a76d6d;

  27. text-align:center;

  28. font-weight:bold;

  29. color:#fff;

  30. }

  31. input[value="Поиск"] {

  32. width:60px;

  33. margin-top:9px;

  34. }

  35. input[value="Подписаться"] {

  36. width:120px;

  37. margin-top:5px;

  38. }

Рис.14

Здесь следует отметить свойство box-sizing, назначенное для элементов select и input в 7-ой строке.

Это свойство позволяет учитывать в заданных ширине и высоте элементов назначаемые внутренние отступы. И таким образом отпадает необходимость проводить вычисления области содержимого с учетом всех параметров. При назначении такого свойства надо только указать размеры элемента. Более подробно познакомиться с этим полезным свойством можно на странице справочника "Puzzleweb" по ссылке "http://www.puzzleweb.ru/css/pr_box-sizing.php".

Обновим страницу и посмотрим какие произошли изменения в формах сайдбара.

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

Рис.15

Из полученного результата можно отметить, что осталось устранить только три несоответствия, а именно:

  • Выравнить кнопку "Поиск" с ближайшим полем ввода и сместить ее к правому краю. Это можно достигнуть, присвоив этим элементам свойство float. Причем кнопку нужно сместить в правую сторону, а поле ввода направить в левую. Кроме этого в родительском элементе нудно назначить свойство overflow для того, чтобы плавающие элементы учитывались при вычислении его высоты.
  • Сместить к правому краю кнопку "Подписаться". Это решается аналогичным образом, как в предыдущем примере с кнопкой "Поиск".
  • Для заголовков сделать необходимые отступы, выравнить их и назначить соответствующие шрифты в соответствии с дизайн-макетом. Это делается аналогичным образом, как и в предыдущих случаях.

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

  1. .seach, .subscribe {

  2. background-image:linear-gradient(to top, #ccc 0%, #e9e9e9 6%, #eee 12%, #eee 88%, #f7f7f7 96%, #fafafa 100%);

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

  4. padding:5px 20px;

  5. font-size:0.9375em;

  6. color:#212a68;

  7. line-height:0.8;

  8. overflow:hidden;

  9. }

  10. aside h3 {

  11. text-align:center;

  12. font-size:1.125em;

  13. font-weight:bold;

  14. padding-top:10px;

  15. margin-bottom:15px;

  16. }

  17. select {

  18. width:125px;

  19. padding:5px 0 0 5px;

  20. float:letft;

  21. }

  22. input[type="submit"] {

  23. height:30px;

  24. margin-bottom:10px;

  25. border-radius:5px;

  26. background:#a76d6d;

  27. text-align:center;

  28. font-weight:bold;

  29. color:#fff;

  30. float:right;

  31. }

Рис.16

Последние изменения элементов сайдбара показаны на скриншоте ниже.

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

Рис.17

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

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

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

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


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

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

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

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


Комментарии


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

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

comments powered by HyperComments