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

    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 и выполним следующие действия по формированию веб-страницы: установку параметры резиновой верстки, назначение основного фона страницы, формирования шапки сайта и размещения в ней фонового изображения, формирования областей контента и футера в соответствии с размерами разработанного дизайн-макета.

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

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

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

Содержание


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

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


В предыдущей статье мы создали таблицу стилей и назначили их для сброса свойств 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 определяет параметры тени. Более подробно о них можно посмотреть в справочнике Puzzleweb по ссылке "http://www.puzzleweb.ru/css/pr_box-shadow.php".

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

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

Рис.12

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


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

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

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

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Оформление веб-страницы стилями CSS, картинка 9

Рис.12

Как видно из дизайн-макета, высота блока ротатора составляет 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. }

Рис.13

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

Также, для более хорошего восприятия блоков области контента, временно разместим их наименования в теги заголовков, например 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><Η2>Основное содержание</Η2></main>

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

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

  17. </div>

  18. </body>

  19. </html>

Рис.14

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

Для увеличения / уменьшения размера изображения кликните по картинке
Оформление веб-страницы стилями CSS, картинка 10

Рис.15

Временное размещение сайта в сети интернет


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

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

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

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

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


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

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

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

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


Комментарии


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

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

comments powered by HyperComments