Разбить Боди на блоки
Ввести в бодиheader+tab
Ввести в бодиsection+таб столько раз, сколько блоков кроме футера и хедера
Ввести footer+таб в конце
В section, в header и footer ввести div+таб и указать внутри divседующееclass="container"
Вычеслить ширину неизменяемого контента через линию в фотошоп
В css-файле указать ширину получившийся линии, а так же центрировать контейнер по горизонтали, вот так:
.container {
width: 930px; - ширина
margin: 0 auto; - центрировать элемент по горизонтали (контейнер центрируется по горизонтали страницы)
}
Вcssbody написать: - это уберет рамочку вокруг страницы, по сути боди – это страница
body {
padding: 0; - отступы внутрь элемента. количество пикселей внутрь элемента рамочкой за счет пикселей самого элемента (элемент не увеличивается)
margin: 0; - отступы наружу элемента }
Указать, в divcss свойство box-sizing: border-box; - применяется чтобы коммандыпаддинг и маргинне расширяли элемент настолько, насколько должны забрать пикселей.
Например я указываю высоту и ширину в 500 пикселей, если я делаю паддинг или марджин на 10 пикселей, то блок автоматически увеличится, игнорируя заданную высоту и длину на 10 пикселей, если не применить это свойство.
Сделать фоновую картинку на первом экране и сам первый экран
Вsection, вheaderиfooterввестифоновые картинки или цвета. Для этого в css файле указать
header {background: url(../img/first-bg.jpg) no-repeat center top / cover;}
то же самое для футера, а в каждом section указать classв html иcss. И каждому классу так же как и в хедере добавить фоновую картинку.
Расшировка:
no-repeat - не повторять картинку при уменьшении масштаба в браузере (т.е. не замощать)
center - положение картинки по горизонтали по центру
top - положение картинки по вериткали (прикрепить к верхнему краю)
cover - чтобы картинка расширялась на всю ширину экрана, растягивалась
! Из заотсутсвия контента (высоты) фоновая картика не будет отображаться
Для того, чтобы сделать высоту фоновой картинки на весь экран нужно написать в css:
height: 100vh; - обращаю внимание на vh! (по сути это процент области экрана по высоте)
Пример:
header {
background: url(../img/first-bg.jpg) no-repeat center top / cover;
height: 100vh;
}
Так же можно в ручную задать количество пикселей, той же коммандой, только использовать не vh, а px
Заполнение блоков
Разбить на крупные элементы – строки и блоки
Логотип и меню – как правило в одну строку, их оба стоит написать внутри одного div
nav - тег меню (обычно внутри хедера и див), внутри него уже открывается список.
в нем всегда есть стандартные паддинги (рамки), которые нужно обнулить
для создания пунктов меню:
ul– список, врнутри него пункты – li
a – ссылки, если не знаю адресс ссылки, пишу #
Пример:
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">services</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
display: inline; – преобразует блочный элемент в строчный, так можно пункты меню преобразовать в строку
Для этого это свойство нужно применить ко все li в ul
Так же для того, чтобы убрать подчеркивания ссылоки придать нужные свойства тексту меню в css ввести применительно к ссылкам aследующее:
.menua {
color: #fff; - задает цвет отображаемой ссылки в данном случае указан белый цвет
text-decoration: none; - убирает подчеркивания в меню (при строке)
text-transform: uppercase; - делаеттекстбольшимибуквами
font-size: 14px; - указывает размер шрифта}
Для того, чтобы слделать в меню отступы нужного размера между словами используется команда в css для li
margin-right: 41px; - отступы справа между каждым пунктом списка (в данном случае строки меню)
Для того, чтобы выровнять текстовый блок по центру используется команда cssвнутри div
text-align: center; - выравнивание текста по центру
Так же для того, чтобы сделать полноценную строку или блок, в котором будет только его содержимое, и следующие элементы вне этого блока из за расположения контента блока справа и слева не будут заполнять пустое пространстов по центру или где нибудь еще в блоке.
.clearfix:after { - для этого блоку задать еще один класс clearfix (через пробел) или logomenu_clearfix, обязательно написать вдоеточие и афтер и то, что написано ниже
content:'';
display: table;
width: 100%;
clear: both;}
Разместить меню и логотип в одну строку и правильно выровнять их внутри блока
Узнать предназначение:
.clearfix:after { - что такое клеарфикс понятно – для него это меню и логотип, но что такое after?
content:''; - особенно что это такое
display: table;
width: 100%; - видимо это ширина 100% от экрана
clear: both;}
Узнать: Указать в bodycssшрифты, а так же убрать стандартные паддинги у указать фоновый цвет
body {
font-family: Arial, sans-serif;
padding: 0;
margin: 0;
color: #222222;}
font-family: Arial, - запрашиваем на компьютере пользователя шрифт Ариал, если его нету, то будет использовано свойство:
sans-serif; - группа шрифтов без засечек (любой шрифт из этой группы)
Структурировать конспект
· Стандартные вводимые значения: сделать у бодиморнинг 0 и паддинг 0 и т.п.
· Методы управления блоками и строками, ориентации элементов в пространстве
· Текстовые операторы
· Правила верстки в целом
· Операторы ссылок, кнопок и форм, списки.Специальные операторы.
· Операторы управления изображениями
· Подключение библиотек, шрифтов, языки – то что в хеад
· ДжаваСкрипт
· SEO - операторы
Правила верстки в целом
· Там, где используется float лучше всего обарачивать в общий контейнер и присваивать ему класс clearfix
· Можно в css писать в классах конкретные элементы к котрорым применяется правило, не обязательно указывая всю последовательность вложенности, например.menuli
· Принцип наследования – дочерние элементы (не все и не всегда) присваивают свойства тех, в которые они вложены. Это позволяет сильно упрощать код.
· Можно очень быстро задать класс для тега вот так: имятега.класстега
· Порядок верстки. От больших элементов к их деталям. Сверху-вниз, слева-направо.
· Обрати внимание на то, какой цвет текста и шрифт преобладает (и другие свойства текста) на сайте, затем опиши эти свойства в body
· Не нужно задавать блокам с разным содержимым но одинаковыми стилевыми свойствами разные классы (классы мы указываем для стилей а не по смыслу)
· Можно задать несколько классов одному тегу, для этого нужно указать их через пробел в одном class
· Нужно разбивать однотипные элементы на блоки
· Лучше сразу в боди прописать наиболее распрастраненный цвет текста, размер шрифта и другие текстовые параметры
Операторы ссылок, кнопок и форм, списки.
Специальные операторы.
· Все меню всегда делаются тегом списков – так принято. Так же принято всегда окружать список ul тегом nav, обозначающим меню.
· Уul и liпо-умолчаниюdisplay: list; Чтобы не было проблем со свойствами, нужно превратить их в блок, применяется display: block; А затем, чтобы сделать элемент строчным применяется float: left; (или right).
· Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>.При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.
· list-style-type изменяет вид маркера для каждого элемента списка.
Маркированный список – свойства:
circle Маркер в виде кружка.
disc Маркер в виде точки.
square Маркер в виде квадрата.
Нумерованный список – свойства:
armenian Традиционная армянская нумерация.
decimal Арабскиечисла (1, 2, 3, 4,...).
decimal-leading-zero Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...).
georgian Традиционная грузинская нумерация.
lower-alpha Строчные латинские буквы (a, b, c, d,...).
lower-greek Строчные греческие буквы (α, β, γ, δ,...).
lower-latin Это значение аналогично lower-alpha.
lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v,...).
upper-alpha Заглавные латинские буквы (A, B, C, D,...).
upper-latin Это значение аналогично upper-alpha.
upper -roman Римские числа в верхнем регистре (I, II, III, IV, V,...).
Общие свойства:
none Отменяет маркеры для списка.
Inherit Наследует значение родителя.
· Для создания форм пишется тег form в html, внутри него помещаются теги input,
Операторы управления изображениями
· background:
#fff – можно указать цветбекграунда без свойства коллор