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

    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.

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


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

Оживляем кнопки и проверяем сайт на валидность кода HTML и CSS

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

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

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

Содержание


  • Делаем кнопки объемными
  • Делаем кнопки интерактивными
  • Нужна ли валидация
  • Как проверять на валидность HTML-код
  • Как проверять на валидность CSS-код
  • Исходные файлы сайта

Делаем кнопки объемными


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

Ниже показан фрагмент сайдбара с такими кнопками.

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

Рис.1

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

Значения линейного градиента определим следующим образом:

1. Оттенки цветов будем задавать снизу в верх, начиная с более темного цвета по сравнению с основным цветом кнопки. Чтобы определить какой цвет использовать в начале градиента, используем инструмент графического редактора, в данном случае фотошоп.

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

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

Рис.2

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

3. И последнее, что нужно сделать для назначения свойств градиента, это определить более светлый цвет по сравнению с основным, который будет окрашивать кнопки в верхней части. Делается это аналогичным образом, как и при определении начального цвета градиента. В данном случае значение этого цвета примем за "b88686".

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

  1. input[type="submit"]:{

  2. height:30px;

  3. margin-bottom:10px;

  4. border-radius:5px;

  5. background:#a76d6d;

  6. text-align:center;

  7. font-weight:bold;

  8. color:#fff;

  9. float:right;

  10. background-image:linear-gradient(to top, #653939, #a76d6d 50%, #b88686);

  11. }

Рис.3

Можно отметить, что при определении крайних цветов здесь не указаны стоп-позиции, так как при значениях 0% и 100% это делать необязательно.

Теперь, обновим браузер и посмотрим на результат.

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

Рис.4

Как видно, кнопки приобрели небольшую выпуклость. Теперь можно приступить к их "оживлению".

Делаем кнопки интерактивными


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

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

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

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

CSS-код после соответствующих дополнений примет вид.

  1. input[type="submit"]:{

  2. height:30px;

  3. margin-bottom:10px;

  4. border-radius:5px;

  5. background:#a76d6d;

  6. text-align:center;

  7. font-weight:bold;

  8. color:#fff;

  9. float:right;

  10. background-image:linear-gradient(to top, #653939, #a76d6d 50%, #b88686);

  11. box-shadow:2px 2px 4px 0px #422a2a;

  12. border-width:2px;

  13. border-style:solid;

  14. border-color:#ddbebe #241616 #241616 #ddbebe;

  15. }

Рис.5

Здесь можно отметить, что бордюры представлены комбинацией свойств, определяющих толщину (border-width со значением 2px), стиль (border-style) со значением, определяющим сплошную рамку и цвета (border-color) по каждой из четырех сторон.

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

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

Рис.6

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

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

Код CSS для активного состояния кнопок примет следующий вид.

  1. input[type="submit"]:hover {

  2. box-shadow:none;

  3. border-color:#a76d6d #a76d6d #a76d6d #a76d6d;

  4. }

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

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

Код CSS для нажатого состояния будет следующим.

  1. input[type="submit"]:active {

  2. box-shadow:0px 0px 7px 2px #422a2a inset;

  3. border-color:#777 #fff #fff #777;

  4. }

Рис.7

Ниже для сравнения показана кнопка "Поиск", где хорошо видно, как она меняет свой вид в зависимости от состояния.

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

Рис.8 Пассивное состояние

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

Рис.9 Активное состояние (наведен курсор)

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

Рис.10 Нажатое состояние (нажата кнопка мышки при наведенном курсоре)

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

Нужна ли валидация


Валидация - это проверка кода на соответствие установленным стандартам. Различают валидацию на корректность кода HTML и CSS. При этом понятно, что в одном случае проверяется HTML-код, в другом код CSS.

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

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

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

А теперь перейдем к непосредственной проверке валидности кодов, сначала HTML, затем CSS.

Как проверять на валидность HTML-код


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

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

Для проверки кода HTML достаточно перейти по ссылке https://validator.w3.org/, где откроется страница с полем ввода адреса проверяемой страницы.

Перейдем по этой ссылке и введем адрес главной страницы нашего создаваемого сайта, которая размещена в интернете на поддомене сайта "rabota-vinete.ru" по адресу https://avtobezugona.rabota-vinete.ru/.

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

Рис.11

После нажатия кнопки "Check" получим результат проверки.

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

Рис.12

В данном случае код HTML валидный, но имеется рекомендация использовать атрибут lang со значением "ru", так как на странице используется русский язык.

Атрибут lang предназначен для правильного отображения браузерами некоторых символов, например кавычек, в зависимости от используемого языка. Поэтому, совсем нелишним будет нам его включить в код HTML. И сделаем это в теге html для того, чтобы этот атрибут смог действовать на весь документ.

Как сделать это дополнение, показано в следующей таблице.

  1. <!DOCTYPE html>

  2. <html lang="ru">

  3. • • • 

  4. </html>

Рис.13

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

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

Рис.14

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

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

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

Рис.15

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

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

Рис.16

Как проверять на валидность CSS-код


Мы рассмотрели проверку валидации HTML-кода. Проверка кода CSS проходит в точно таком же порядке. Только при этом нужно использовать другую страницу валидатора, которая для такого случая находится по адресу http://jigsaw.w3.org/css-validator/.

Откроем ее и также как в предыдущий раз введем адрес проверяемой страницы, после чего нажмем кнопку "Check".

Результат этой проверки приведен на скриншоте.

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

Рис.17

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

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

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

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

А, займемся мы этим сразу после Новогодних праздников.

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

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


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

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

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

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


Комментарии


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

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

comments powered by HyperComments