Вход / Регистрация
Вход
Урок 7: Типы верстки: табличная, блочная и адаптивная
План:
- Изучаем современные типы верстки
- Рассматриваем причину устаревания табличной верстки
- Прогнозируем и готовимся к будущему верстки
Домашка:
Необходимо сверстать шаблон http://www.templatemonster.com/ru/demo/42835.html в блочном верстке. Графику скачать можно тут: http://school-php.com/t2.rar.
Из templatemonster обязательно надо своровать цвет текста через HTML-инспектор в браузере, при этом ни одно свойство другое воровать нельзя, всё надо применить из того, что изучили в течении всего курса.
В дополнении к уроку я обозначил самые частые и популярные ошибки. Поэтому обязательно их прочитать. Особенно советую сделать перед тем, как готовую верстку решите отправить на проверку на почту. Все заметки были в курсе.
И ещё, не переживайте по поводу сложности домашки или объема ошибок, Вы должны понимать, что никто с первого раза обработав так много информации как Вы не сможет сделать всё идеально, опыт надо набивать практикой, и где-то с 5-6 верстки уже почти без ошибок будете верстать.
Из templatemonster обязательно надо своровать цвет текста через HTML-инспектор в браузере, при этом ни одно свойство другое воровать нельзя, всё надо применить из того, что изучили в течении всего курса.
В дополнении к уроку я обозначил самые частые и популярные ошибки. Поэтому обязательно их прочитать. Особенно советую сделать перед тем, как готовую верстку решите отправить на проверку на почту. Все заметки были в курсе.
И ещё, не переживайте по поводу сложности домашки или объема ошибок, Вы должны понимать, что никто с первого раза обработав так много информации как Вы не сможет сделать всё идеально, опыт надо набивать практикой, и где-то с 5-6 верстки уже почти без ошибок будете верстать.
Дополнение к уроку:
Удобный генератор спрайтов. Пользуйтесь на здоровье в домашке.
1) Навигация:
Пояснения:
- ссылка на корень сайта (логотип и пункт home) должны быть href="/". Остальные ссылки пишутся как href="#", это стандартная практика указывать так ссылки на страницы, которые ещё не созданы или не готовы к использованию.
- class="active" указан для активного пункта меню, то есть того, в разделе которого находится сейчас пользователь! Обычно выделяется отдельным стилем на многих сайтах, включая данный.
- Я применил display:inline-block для того. чтобы пункты меню выставить по центру, указал отступ сверху, чтобы вынести пункт меню выше блока, в котором он находится для достижения эффекта, как на сайте!
- Выпадающий список давайте сразу же научимся делать. Обратите внимание на синтаксис span:hover .drop-menu, перевожу на понятный язык: при наведении на span, на элемент с классом .drop-menu лежащей внутри него применим указанное свойство.
- Позиционирование применил position:absolute, так как выпадающий список может быть длинным и он должен располагаться поверх других всех элементов и не двигать их.
- Для активного пункта меню я указал .main-menu > .active, а не сразу .active, дело в том, что если мы указываем свойства через вложенность, а именно ".main-menu > a", то чтобы перебить эти свойства мы вынуждены для active указывать такой же путь вложенности, то есть начиная с .main-menu.
- Часто делают сайты так, что родитель для выпадающего списка не кликабельный, а кликабельные только пункты из выпадающего списка. Если же необходимо сделать так же кликабельным и родителя, тогда мы указываем ссылку для этого пункта. Хочу заметить, что общий родительский блок нельзя заменять на тег A по той причине, что внутри тега A не может быть другого тега A. В общем, решение такое:
2) Когда используем колонки, в данном случае у нас 3 колонки, то не забываем колонки размещать в контейнер родителя и применять clearfix обязательно в связке с float:left
Хочу заметить очень важный момент, делайте грубую связку между clearfix и float, чтобы у clearfix были дочерние элементы с float. Таким образом никогда не будет у Вас ошибок. Давайте детально разберём правильные и неправильные решения и постараемся запомнить:
Это ОЧЕНЬ ВАЖНО! И ещё, не забывайте взять из прошлых уроков запись на cSS для clearfix.
Альтернативный синтаксис:
При альтернативном синтаксисе обязательно float и clear:both должны лежать на одном уровне вложенности. Недопустимо помещать внутрь других элементов.
И ещё, если у Вас идёт разбитие на 2 колонки, и в одной из колонок ещё раз на 2 колонки, то Вы внутри колонки вновь создаёте блок с clearfix, а внутри него float. Это очень важная вещь в структуре, чтобы не иметь ошибок в будущем.
3) Когда Вы видите тонкую линию разделительную, не обязательно использовать отдельный неудобный тег HR, лучше применять border в данном случае.
1) span - это слово в предложении, буква в слове, span применяется для выделения части строки, а не всю строку. То есть ошибкой будет:
Правильно писать так:
2) Не используйте в верстке ID за исключением, когда Вам потребуются якоря. В данной домашке Вы вряд ли будете ими пользоваться, поэтому и ID тут не нужны.
3) Имена файлам создаём по правилам: никаких пробелов, нижних подчёркиваний, верхнего регистра. Пробел заменяем на дефис. То есть вместо "My Photo_1.jpg" пишем "my-photo-1.jpg".
4) Придерживаемся чётких правил в именовании классов и id, даём чёткое название, по которому сможем определить что находится внутри элемента, то есть:
class="nav" - навигация
class="photogallery" - фотогалерея, блок с фотками
class="aside-nav" или class="aside-menu" - боковое меню.
Когда название состоит из двух слов, то пишем дефис.
Предлагаю напомнить себе и закрепить ещё раз именование блоков сайта: именование классов.
5) Если Вы видите, что кнопка или ссылка блочная, то используйте тег "a", но укажите ему display:block. Писать так будет ошибкой:
Есть смысл использовать блок внутри ссылки в том случае, если ссылка указана как блочная, но при этом сама ссылка состоит из нескольких элементов. Такое часто бывает, когда мы используем кликабельную картинку, где при наведении размещаем какую-то определённую картинку:
6) Почти все ученики путаются в понятии слоёв (position:absolute) и не знают где применить. Помимо урока я уточняю ещё раз. Существую на странице 3 слоя:
Базовый по умолчанию (центральный, в нём располагается сайт)
нижний - background,
верхний - position:absolute (или fixed).
Вы работаете в центральном слое, если надо какой-то цвет или картинку разместить ниже, то применяется нижний слой - background. Если надо любой тег разместить поверх уже имеющегося контента верхним слоем - position. Запомните, сам по себе position не используется, только поверх чего-либо. Теперь осталось разобраться как объединить 2 картинки, когда одна идёт поверх другой. Если нижняя картинка - графический интерфейс, не участвующий в SEO сайта, то есть не представляющий продукт самого сайта, то примеряйте background для данной картинки, а для второй, которая располагается выше - центральный контент. Если эта картинка является товаром, то вставляйте через центральный слой: img, и поверх неё уже размещайте вторую картинку через position.
7) Спрайты - это не объединение по смыслу не важных для SEO элементов, это объединение всех не важных для SEO элементов! То есть будь-то иконка сверху в виде телефона, а снизу в виде значка фейсбука или вконтакте - мы используем одну общую картинку. Для примера смотрим: спрайты на данном сайте
8) И самая популярная ошибка. Для блочных элементов не надо писать display:block или width:100%. Знаете, компьютер не тупой, он не забывает это :) Так что значения по умолчанию повторно писать не надо, особенно такие простые. И сюда же, свойства дублировать нет смысла, то есть дважды писать одно свойство в разных классах, или при эффекте :hover ещё раз уточнять свойство, которое было у элемента до наведения. Старое свойство до наведения не стирается, поэтому дублировать его не надо.
9) Не используйте height для блоков. Текст, картинка или другой абсолютно любой контент сам расширит высоту блока до нужных ему размеров. Если уж сильно надо минимальную высоту указать для размера по умолчанию, то пишите min-height без height. Высота может потребоваться для трёх одинаковых колонок при условии, что в них мы прописываем фон (иначе фон будет не равномерным). Если фон не используется, то и высота не нужна.
Вы верстаете впервые, поэтому даю советы по верстке с упором на данный шаблон:
1) Навигация:
<nav class="main-menu">
<a href="/" class="active">home</a>
<div>
services
<div class="drop-menu">
<a href="#">пункт 1</a>
<a href="#">пункт 2</a>
</div>
</div>
<a href="#">about us</a>
</nav>
CSS:
.main-menu {
text-align:center;
}
.main-menu > a, .main-menu > div {
display: inline-block;
margin: -10px 0 0 -4px; /* TOP -10, left: -4px */
padding: 20px 10px;
position:relative;
}
.main-menu > .active {
background-color:orange;
}
.main-menu .drop-menu {
display:none;
position:absolute;
left:0;
top:20px;
}
.main-menu > div:hover .drop-menu {
display:block;
}Пояснения:
- ссылка на корень сайта (логотип и пункт home) должны быть href="/". Остальные ссылки пишутся как href="#", это стандартная практика указывать так ссылки на страницы, которые ещё не созданы или не готовы к использованию.
- class="active" указан для активного пункта меню, то есть того, в разделе которого находится сейчас пользователь! Обычно выделяется отдельным стилем на многих сайтах, включая данный.
- Я применил display:inline-block для того. чтобы пункты меню выставить по центру, указал отступ сверху, чтобы вынести пункт меню выше блока, в котором он находится для достижения эффекта, как на сайте!
- Выпадающий список давайте сразу же научимся делать. Обратите внимание на синтаксис span:hover .drop-menu, перевожу на понятный язык: при наведении на span, на элемент с классом .drop-menu лежащей внутри него применим указанное свойство.
- Позиционирование применил position:absolute, так как выпадающий список может быть длинным и он должен располагаться поверх других всех элементов и не двигать их.
- Для активного пункта меню я указал .main-menu > .active, а не сразу .active, дело в том, что если мы указываем свойства через вложенность, а именно ".main-menu > a", то чтобы перебить эти свойства мы вынуждены для active указывать такой же путь вложенности, то есть начиная с .main-menu.
- Часто делают сайты так, что родитель для выпадающего списка не кликабельный, а кликабельные только пункты из выпадающего списка. Если же необходимо сделать так же кликабельным и родителя, тогда мы указываем ссылку для этого пункта. Хочу заметить, что общий родительский блок нельзя заменять на тег A по той причине, что внутри тега A не может быть другого тега A. В общем, решение такое:
<div>
<a href="#">services</a>
<div class="drop-menu">
<a href="#">пункт 1</a>
<a href="#">пункт 2</a>
</div>
</div>2) Когда используем колонки, в данном случае у нас 3 колонки, то не забываем колонки размещать в контейнер родителя и применять clearfix обязательно в связке с float:left
<div class="clearfix">
<div class="col-3"></div>
<div class="col-3 col-center"></div>
<div class="col-3"></div>
</div>
CSS:
.col-3 {
float:left;
}Хочу заметить очень важный момент, делайте грубую связку между clearfix и float, чтобы у clearfix были дочерние элементы с float. Таким образом никогда не будет у Вас ошибок. Давайте детально разберём правильные и неправильные решения и постараемся запомнить:
<div class="clearfix">
<div class="col-3">правильно</div>
<div>
<div class="col-3">неправильно</div>
</div>
<a>
<img class="col-3"> - так же неправильно
</a>
<a class="col-3">
<img> - правильно!
</a>
</div>Это ОЧЕНЬ ВАЖНО! И ещё, не забывайте взять из прошлых уроков запись на cSS для clearfix.
Альтернативный синтаксис:
<div>
<div class="col-3"></div>
<div class="col-3 col-center"></div>
<div class="col-3"></div>
<div class="clearboth"></div>
</div>
CSS:
.col-3 {
float:left;
}
.clearboth {
clear:both;
}При альтернативном синтаксисе обязательно float и clear:both должны лежать на одном уровне вложенности. Недопустимо помещать внутрь других элементов.
И ещё, если у Вас идёт разбитие на 2 колонки, и в одной из колонок ещё раз на 2 колонки, то Вы внутри колонки вновь создаёте блок с clearfix, а внутри него float. Это очень важная вещь в структуре, чтобы не иметь ошибок в будущем.
3) Когда Вы видите тонкую линию разделительную, не обязательно использовать отдельный неудобный тег HR, лучше применять border в данном случае.
Распространённые ошибки при верстке:
1) span - это слово в предложении, буква в слове, span применяется для выделения части строки, а не всю строку. То есть ошибкой будет:
<p><span class="my-text">text</span></p>Правильно писать так:
<p class="my-text">text</p>2) Не используйте в верстке ID за исключением, когда Вам потребуются якоря. В данной домашке Вы вряд ли будете ими пользоваться, поэтому и ID тут не нужны.
3) Имена файлам создаём по правилам: никаких пробелов, нижних подчёркиваний, верхнего регистра. Пробел заменяем на дефис. То есть вместо "My Photo_1.jpg" пишем "my-photo-1.jpg".
4) Придерживаемся чётких правил в именовании классов и id, даём чёткое название, по которому сможем определить что находится внутри элемента, то есть:
class="nav" - навигация
class="photogallery" - фотогалерея, блок с фотками
class="aside-nav" или class="aside-menu" - боковое меню.
Когда название состоит из двух слов, то пишем дефис.
Предлагаю напомнить себе и закрепить ещё раз именование блоков сайта: именование классов.
5) Если Вы видите, что кнопка или ссылка блочная, то используйте тег "a", но укажите ему display:block. Писать так будет ошибкой:
<div><a></a></div>
или
<a><div></div></a>Есть смысл использовать блок внутри ссылки в том случае, если ссылка указана как блочная, но при этом сама ссылка состоит из нескольких элементов. Такое часто бывает, когда мы используем кликабельную картинку, где при наведении размещаем какую-то определённую картинку:
<a>
<div style="position:absolute;">картинка поверх картинки</div>
<img>
</a>6) Почти все ученики путаются в понятии слоёв (position:absolute) и не знают где применить. Помимо урока я уточняю ещё раз. Существую на странице 3 слоя:
Базовый по умолчанию (центральный, в нём располагается сайт)
нижний - background,
верхний - position:absolute (или fixed).
Вы работаете в центральном слое, если надо какой-то цвет или картинку разместить ниже, то применяется нижний слой - background. Если надо любой тег разместить поверх уже имеющегося контента верхним слоем - position. Запомните, сам по себе position не используется, только поверх чего-либо. Теперь осталось разобраться как объединить 2 картинки, когда одна идёт поверх другой. Если нижняя картинка - графический интерфейс, не участвующий в SEO сайта, то есть не представляющий продукт самого сайта, то примеряйте background для данной картинки, а для второй, которая располагается выше - центральный контент. Если эта картинка является товаром, то вставляйте через центральный слой: img, и поверх неё уже размещайте вторую картинку через position.
Подчёркиваю ещё раз, центральный контент сайта (header, footer, main) - это и не position, и не background! Центральный контент = центральный слой (базовый, по умолчанию). А вот относительно него размещается дополнительный контент через верхний и нижний слои.
7) Спрайты - это не объединение по смыслу не важных для SEO элементов, это объединение всех не важных для SEO элементов! То есть будь-то иконка сверху в виде телефона, а снизу в виде значка фейсбука или вконтакте - мы используем одну общую картинку. Для примера смотрим: спрайты на данном сайте
8) И самая популярная ошибка. Для блочных элементов не надо писать display:block или width:100%. Знаете, компьютер не тупой, он не забывает это :) Так что значения по умолчанию повторно писать не надо, особенно такие простые. И сюда же, свойства дублировать нет смысла, то есть дважды писать одно свойство в разных классах, или при эффекте :hover ещё раз уточнять свойство, которое было у элемента до наведения. Старое свойство до наведения не стирается, поэтому дублировать его не надо.
9) Не используйте height для блоков. Текст, картинка или другой абсолютно любой контент сам расширит высоту блока до нужных ему размеров. Если уж сильно надо минимальную высоту указать для размера по умолчанию, то пишите min-height без height. Высота может потребоваться для трёх одинаковых колонок при условии, что в них мы прописываем фон (иначе фон будет не равномерным). Если фон не используется, то и высота не нужна.
|
|