Узнать, как создать быстрый и удивительный, отзывчивый веб-сайт на (SW3.CSS), который будет работать на всех устройствах, ПК, ноутбуке, планшете и телефоне.
Создать сайт с 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://schoolssw3.com/sw3css/3/sw3.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://schoolssw3.com/sw3css/3/sw3.css">
<body>
<!-- Контент будет здесь -->
</body>
</html>
Примечание: Если вы хотите создать сайт с нуля, без помощи CSS фреймворка, ознакомьтесь с нашим Как сделать сайт Учебник.
Создание содержимого страницы
Внутри элемента <body> нашего сайта мы будем использовать наш "Разметку фото" и создадим:
- Навигационная панель
- Слайд-шоу
- Заголовок
- Некоторые разделы и статьи
- Подвал
Семантические элементы
HTML5 ввел несколько новых семантических элементов. Семантические элементы важны для использования, поскольку они определяют структуру веб-страниц и помогают читателям экрана и поисковым системам правильно читать страницу.
Это некоторые из наиболее распространенных семантических элементов HTML:
Элемент <section> может использоваться для определения части веб-сайта с соответствующим контентом.
Элемент <article> может использоваться для определения отдельного элемента контента.
Элемент <header> может использоваться для определения заголовка (в документе, разделе или статье).
Элемент <footer> может использоваться для определения нижнего колонтитула (в документе, разделе или статье).
Элемент <nav> может использоваться для определения контейнера навигационных ссылок.
В этом уроке мы будем использовать семантические элементы.
Однако, это зависит от вас, если вы хотите использовать вместо этих элементов элементы <div>.
Навигационная панель
На нашем "Проекте макета" есть "Навигационная панель".
<!-- Навигация -->
<nav class="sw3-bar sw3-black">
<a href="#home" class="sw3-button sw3-bar-item">Главная</a>
<a href="#band" class="sw3-button sw3-bar-item">ГРУППА</a>
<a href="#tour" class="sw3-button sw3-bar-item">Тур</a>
<a href="#contact" class="sw3-button sw3-bar-item">Контакт</a>
</nav>
Мы можем использовать элемент <nav> или <div> в качестве контейнера для навигационных ссылок.
Класс sw3-bar это контейнер для навигационных ссылок.
Класс sw3-black класс определяет цвет панели навигации.
Класс sw3-bar-item и sw3-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="sw3-container sw3-center"
style="max-width:600px">
<h2 class="sw3-wide">THE
BAND</h2>
<p class="sw3-opacity"><i>Мы любим музыку</i></p>
</section>
Класс sw3-container заботится о стандартном отступе.
Класс sw3-center центр содержания.
Класс sw3-wide предоставляет более широкий заголовок.
Класс sw3-opacity обеспечивает прозрачность текста.
Стиль max-width задает максимальную ширину раздела описания канала.
Затем мы добавим параграф, описывающий группу:
<section class="sw3-container sw3-content sw3-center"
style="max-width:600px">
<p class="sw3-justify">
Мы создали вымышленный сайт группы. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
Класс sw3-justify выравнивает правое и левое поля текста.
Затем создайте элемент <section> или <div> с <article> или <div> о каждом участнике группы:
<section class="sw3-row-padding sw3-center sw3-light-grey">
<article class="sw3-third">
<p>John</p>
<img src="img_bandmember.jpg" alt="Случайное
Имя" style="width:100%">
</article>
<article class="sw3-third">
<p>Paul</p>
<img src="img_bandmember.jpg" alt="Случайное
Имя" style="width:100%">
</article>
<article class="sw3-third">
<p>Ringo</p>
<img src="img_bandmember.jpg" alt="Случайное
Имя" style="width:100%">
</article>
</section>
Подвал
Наконец, мы используем элемент <footer> или <div> чтобы создать нижний колонтитул:
<!-- Подвал -->
<footer class="sw3-container sw3-padding-64 sw3-center sw3-black
sw3-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="sw3-medium">
Работает на <a href="https://schoolsw3.com/sw3css/index.php"
target="_blank">sw3.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">
Чтобы узнать больше об использовании иконок, посетите наш сайт Иконки Учебник.