Обучаемся.com

Руководство по компьютеру, работа с Windows, разработка и продвижение сайтов…

Автор:

Псевдоклассы и псевдоэлементы, практическая верстка, Занятие 9

На предыдущих занятиях мы с вами уже разбирали понятие псевдоэлементов и псевдоклассов, но на практике редко использовали. Чтобы вам лучше это запомнить и понять, я записал небольшое видео описывающее на практике их возможности и значения.

Видео пояснение псевдокласс и псевдоэлемент

Подробнее >>

Автор:

Создание веб форм, Занятие 8

Пришло время поговорить о понятии веб форм, разобраться для чего они нужны, где используются и какими элементами задаются на странице верстки. Данные, которые мы вносим в форму в последствии отправляются для обрабатывания на сервер. Наша задача научиться и понять какие данные и куда можно отправлять и для чего.

Первый элемент, парный тег, который указывает браузеру на дальнейшее использование форм и пишется он вот так:

<form>
Элементы формы
</form>

Это основной элемент имеющий один обязательный атрибут и несколько не обязательных. Обязательным атрибутом есть:

  • action=“http://site.ru/handler/” (обязательный)
  • method=“GET”
  • enctype=“application/x-www-form-urlencoded”
  • target=“_blank”

В атрибуте action указываем, куда отправляются данные с нашей формы, другими словами указываем адрес обработчика. Атрибут method указывает каким методом можно отправить форму, их есть два get и post. От методов зависит то, где будут передаваться данные. Атрибут enctype говорит, что за данные отправляются. Ну и target, который говорит, что после отправленной формы откроется новое какое-то окно. Подробнее >>

Автор:

Применение js на простом примере, Занятие 7/2

Как я и говорил в первой части седьмого занятия, мы подключим с вами нашему документу javascript и с его помощью сделаем примитивное слайдшоу. Расписывать весь процесс у меня ушло бы очень много времени и с целью его экономии, а также доступности повторения я записал видео ролик, где все подробно разъяснил и показал на примере.

Этапы правильного использования js у себя в документе

  1. Внимательно просмотреть код оригинала/примера с которым будем работать
  2. Разобраться, что подключается в служебном теге head
  3. Посмотреть стили, не потеряются ли пути заданные там
  4. Переносить все с примера с пониманием для чего оно нужно
  5. Проверять себя на каждом этапе переноса и сохранения кода
  6. Убедиться, что все работает и наслаждаться своими способностями

Подробнее >>

Автор:

Свойства box-sizing, visibility, hidden, Занятие 7/1

Хочу еще обратить ваше внимание на такие моменты, которые возникают при работе с margin или padding при работе с вложенными элементами. Итак разберем две ситуации, когда вложенные элементы имеют width: auto и 100%.

Если ширина вложенного элемента задана auto (значение по умолчанию), тогда при заданном margin либо padding сожмется сам вложенный элемент на размер заданные этими свойствами. Но если ширина задана 100%, то произойдет выползание области элемента за родителя, а это весьма неприятная ситуация.Ширина элемента и отступы

Из-за такой особенности было внедрено еще одно свойство box-sizing: border-box | content-box (значение по умолчанию). Подробнее >>

Автор:

Работа с элементами margin, padding, border, Занятие 6

Мы уже знаем, что страница html документа состоит с элементов. Каждый элемент имеет в себе какое-то содержание. Каждый элемент имеет свою границу, по умолчанию эта граница не видимая для пользователя. Также элементы могут иметь внутренний отступ и внешний.

Помимо этих возможностей в элементов есть стороны: верх, правая сторона, низ и левая сторона. К этим сторонам мы можем задавать жесткую привязку любого с элементов, но об этом чуть позже.

Границы элементов

Разберем значение границы области любого с элементов на странице, которое задается свойством border и должно в себе содержать три значения:

  • величина — px или %
  • тип — none | solid | dotted | dashed | double | groove | ridge | inset | outset
  • цвет — любой цвет

Все это записывается одной строкой вот такого вида border: 1px solid black; здесь мы указали рамку вокруг элемента в 1 пиксель, задали ей тип сплошной линии и черный цвет. Подробнее >>

Автор:

Верстка простого сайта на практике, Занятие 5

Сегодня мы вместо обычного обучения новых элементов и свойств html верстки, попробуем с вами вместе сверстать простой макет страницы сайта. Я посмотрел в сети примеры psd макетов и нашел один очень простой и как раз для нашего уровня знаний. Вот его скриншот, а наша задача сверстать все в html и css.Шаблон сайта для верстки Подробнее >>

Автор:

Разбор селекторов, псевдоклассы и псевдоелементы, Занятие 4

Группировка селекторов

Группировку селекторов производят чисто из-за удобства, то есть без нее можно обойтись, но иногда она упрощает нам жизнь, вот простой пример группировки:

h1, h2, h3{ background: yellow }
h1 { color: red }
h2 { color: green }
h3 { color: blue }
em, i, cite { background: #CCC }
* { color: #000 }

Значение * обозначает правило для всех элементов страницы, то есть в данном случае любой цвет на странице будет черный. Подробнее >>