САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

КАК СДЕЛАТЬ

Главная

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

КНОПКИ

Кнопки оповещенияКонтур кнопокКнопка с разделениемАнимированные кнопкиИзменяющиеся кнопкиКнопка на изображенииКнопки социальных сетейКнопки читать больше/меньшеКнопки загрузокКнопка скачатьКнопка таблеткаКнопка уведомленияКнопки значкиКнопки вперед и назадДополнительная кнопкаКнопка блокКнопка текстКруглые кнопкиКнопка прокрутки вверх

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

ФИЛЬТРЫ

Фильтр спискаФильтр таблицыФильтр элементовФильтр выпадающего спискаСортировка спискаСортировка таблицы

ТАБЛИЦЫ

Полосатая таблицаОтзывчивая таблицаТаблица сравнения

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

ВЕБ САЙТ

Сделать сайтСделать сайт (W3.CSS)Сделать сайт (BS3)Сделать сайт (BS4)Страница по центруРаздел контактаБольшой заголовокПример сайта

СЕТКА

2 Колонки макета3 Колонки макета4 Колонки макетаСетка расширяющаясяВид сетки и спискаСмешанные столбцы макетаСтолбцы карточекЗигзагообразный макетМакет блога

GOOGLE

Google графикGoogle шрифты

КОНВЕРТОРЫ

Конвертер массыКонвертер температурыКонвертер длиныКонвертер скорости

PYTHON

Удалить список дубликатовРеверс строки

Как сделать - Создать свой сайт



Узнать, как создать быстрый и удивительный, отзывчивый веб-сайт, который будет работать на всех устройствах, ПК, ноутбуке, планшете и телефоне.


Создать сайт с CSS фреймворк


"Проект макета"

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

Наличие "макета проекта" значительно облегчит создание веб-сайта:

Навигационная панель

Слайд-шоу

ГРУППА

Описание группы

Описание группы

Описание группы


Статья

Статья

Статья


Подвал


Doctype, теги meta и CSS

Doctype должен определять страницу как документ HTML5:

<!DOCTYPE html>

Тег meta должен определять набор символов как UTF-8:

<meta charset="UTF-8">

Тег meta видового экрана должен заставить веб-сайт работать на всех устройствах и разрешениях экрана:

<meta name="viewport" content="width=device-width, initial-scale=1">

W3.CSS должен позаботиться обо всех наших потребностях в стилизации и всех различиях между устройствами и браузерами:

<link rel="stylesheet" href="https://schoolsw3.com/w3css/3/w3.css">

Чтобы узнать больше о стилизации с помощью W3.CSS, пожалуйста, посетите наш W3.CSS Учебник.

Наша первая пустая веб-страница будет выглядеть примерно так:

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://schoolsw3.com/w3css/3/w3.css">
<body>

<!-- Контент будет здесь -->

</body>
</html>

Примечание: Если вы хотите создать сайт с нуля, без помощи CSS фреймворка, ознакомьтесь с нашим Как сделать сайт Учебник.


Создание содержимого страницы

Внутри элемента <body> нашего сайта мы будем использовать наш "Разметку фото" и создадим:

  • Навигационная панель
  • Слайд-шоу
  • Заголовок
  • Некоторые разделы и статьи
  • Подвал

Семантические элементы

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

Это некоторые из наиболее распространенных семантических элементов HTML:

Элемент <section> может использоваться для определения части веб-сайта с соответствующим контентом.

Элемент <article> может использоваться для определения отдельного элемента контента.

Элемент <header> может использоваться для определения заголовка (в документе, разделе или статье).

Элемент <footer> может использоваться для определения нижнего колонтитула (в документе, разделе или статье).

Элемент <nav> может использоваться для определения контейнера навигационных ссылок.

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

Однако, это зависит от вас, если вы хотите использовать вместо этих элементов элементы <div>.


Навигационная панель

На нашем "Проекте макета" есть "Навигационная панель".

<!-- Навигация -->
<nav class="w3-bar w3-black">
  <a href="#home" class="w3-button w3-bar-item">Главная</a>
  <a href="#band" class="w3-button w3-bar-item">ГРУППА</a>
  <a href="#tour" class="w3-button w3-bar-item">Тур</a>
  <a href="#contact" class="w3-button w3-bar-item">Контакт</a>
</nav>

Редактор кода »

Мы можем использовать элемент <nav> или <div> в качестве контейнера для навигационных ссылок.

Класс w3-bar это контейнер для навигационных ссылок.

Класс w3-black класс определяет цвет панели навигации.

Класс w3-bar-item и w3-button стилизует ссылки навигации внутри панели.



Слайд-шоу

На "Проекте макета" у нас есть "Слайд-шоу".

Для слайд-шоу мы можем использовать элемент <section> или <div> в виде графического контейнера:

<!-- Слайд-шоу -->
<section>
  <img class="mySlides" src="img_la.jpg" style="width:100%">
  <img class="mySlides" src="img_ny.jpg" style="width:100%">
  <img class="mySlides" src="img_chicago.jpg" style="width:100%">
</section>

Редактор кода »

Нам нужно добавить немного JavaScript, чтобы менять изображения каждые 3 секунды:

// Автоматическое слайд-шоу-изменение изображения каждые 3 секунды
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}
  x[myIndex-1].style.display = "block";
  setTimeout(carousel, 3000);
}

Редактор кода »


Разделы и статьи

Глядя на "Проект макета", мы видим, что следующим шагом является создание статей.

Сначала мы создадим элемент <section> или <div> содержащий информацию о полосе частот:

<section class="w3-container w3-center" style="max-width:600px">
  <h2 class="w3-wide">THE BAND</h2>
  <p class="w3-opacity"><i>Мы любим музыку</i></p>
</section>

Редактор кода »

Класс w3-container заботится о стандартном отступе.

Класс w3-center центр содержания.

Класс w3-wide предоставляет более широкий заголовок.

Класс w3-opacity обеспечивает прозрачность текста.

Стиль max-width задает максимальную ширину раздела описания канала.

Затем мы добавим параграф, описывающий группу:

<section class="w3-container w3-content w3-center" style="max-width:600px">
<p class="w3-justify">
Мы создали вымышленный сайт группы. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>

Редактор кода »

Класс w3-justify выравнивает правое и левое поля текста.

Затем создайте элемент <section> или <div> с <article> или <div> о каждом участнике группы:

<section class="w3-row-padding w3-center w3-light-grey">
  <article class="w3-third">
    <p>John</p>
    <img src="img_bandmember.jpg" alt="Случайное Имя" style="width:100%">
  </article>
  <article class="w3-third">
    <p>Paul</p>
    <img src="img_bandmember.jpg" alt="Случайное Имя" style="width:100%">
  </article>
  <article class="w3-third">
    <p>Ringo</p>
    <img src="img_bandmember.jpg" alt="Случайное Имя" style="width:100%">
  </article>
</section>

Редактор кода »


Подвал

Наконец, мы используем элемент <footer> или <div> чтобы создать нижний колонтитул:

<!-- Подвал -->
<footer class="w3-container w3-padding-64 w3-center w3-black w3-xlarge">
  <a href="#"><i class="fa fa-facebook-official"></i></a>
  <a href="#"><i class="fa fa-pinterest-p"></i></a>
  <a href="#"><i class="fa fa-twitter"></i></a>
  <a href="#"><i class="fa fa-flickr"></i></a>
  <a href="#"><i class="fa fa-linkedin"></i></a>
  <p class="w3-medium">
    Работает на <a href="https://schoolsw3.com/w3css/index.php" target="_blank">w3.css</a>
  </p>
</footer>

Редактор кода »

Классы fa fa являются классами шрифтов и значков.

Для использования этих классов необходимо создать ссылку на библиотеку шрифтов Awesome:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

Чтобы узнать больше об использовании иконок, посетите наш сайт Иконки Учебник.