Что делать для того, чтобы сверстать сайт

Создать папку с содержимым верстки, назвать её по английски

Создать текстовый документ txt и перевести его в формат html (переименовав после точки): index.html

Создать текстовый документ txt: main.css

Создать папку с изображениями и назвать её «img» внутри папки содержимого верстки

В соблайн текст html:

Написать !+таб

В title написать название вкладки

В html lang написать язык страницы

Подключить css к html в head ввести link и пример:

<link rel="stylesheet" href="css/main.css">

Разбить Боди на блоки

Ввести в боди header+tab

Ввести в боди section+таб столько раз, сколько блоков кроме футера и хедера

Ввести footer+таб в конце

В section, в header и footer ввести div+таб и указать внутри div седующее class="container"

Вычеслить ширину неизменяемого контента через линию в фотошоп

В css-файле указать ширину получившийся линии, а так же центрировать контейнер по горизонтали, вот так:

.container {

width: 930px; - ширина

margin: 0 auto; - центрировать элемент по горизонтали (контейнер центрируется по горизонтали страницы)

}

В css body написать: - это уберет рамочку вокруг страницы, по сути боди – это страница

body {

padding: 0; - отступы внутрь элемента. количество пикселей внутрь элемента рамочкой за счет пикселей самого элемента (элемент не увеличивается)

margin: 0; - отступы наружу элемента}

Указать, в div css свойство 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 следующее:

.menu a {

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;}

Узнать: Указать в body css шрифты, а так же убрать стандартные паддинги у указать фоновый цвет

body {

font-family: Arial, sans-serif;

padding: 0;

margin: 0;

color: #222222;}

font-family: Arial, - запрашиваем на компьютере пользователя шрифт Ариал, если его нету, то будет использовано свойство:

sans-serif; - группа шрифтов без засечек (любой шрифт из этой группы)

Структурировать конспект

• Стандартные вводимые значения: сделать у боди морнинг 0 и паддинг 0 и т.п.

• Методы управления блоками и строками, ориентации элементов в пространстве

• Текстовые операторы

• Правила верстки в целом

• Операторы ссылок, кнопок и форм, списки. Специальные операторы.

• Операторы управления изображениями

• Подключение библиотек, шрифтов, языки – то что в хеад

• ДжаваСкрипт

• SEO - операторы