Разметка HTML страницы сайта на основе блоков div и CSS свойства float
В этом видео уроке рассказывается о том, как выполняется разметка HTML страницы сайта на основе блоков div и CSS свойства float. Для того чтобы сделать каркас сайта на основе плавающих элементов нам понадобятся несколько блоков div, которые будут играть роль шапки сайта, сайдбаров (боковые части), основного блока с контентом, и нижней части сайта. Далее, при помощи стилей CSS и свойства float мы будем определять внешний вид этих блоков, их размеры и положение на HTML странице. Каждому тегу div необходимо присвоить идентификаторы через атрибут id. Это нужно для того, чтобы была возможность задавать определенные свойства конкретным блокам HTML страницы через стили CSS. В нашем случае получилось четыре блока div с идентификаторами header, sidebar, content и footer. Также для удобства можно обернуть все блоки в ещё один тег div и идентификатором wrapper. Ширину сайта и расположение по центру страницы можно сразу определить при помощи CSS свойств для блока wrapper, указав свойство width и margin с требуемыми значениями… Видео урок «Разметка HTML страницы сайта на основе блоков div и CSS свойства float» вы можете смотреть онлайн в любое время совершенно бесплатно. Удачи Вам!
Особенности использование float в CSS, отмена обтекания. Свойство clear Видео «Особенности использование float в CSS, отмена обтекания. Свойство clear» посвящено вопросу об основных моментах, на которые стоит обратить внимание при работе с плавающими элементами и как сделать очистку свойства float. Первая особенность использования float заключается в том, что для создания плавающего элемента необходимо обязательно указать его ширину в свойстве width. Иначе он будет занимать всё предоставленное ему пространство по ширине и не даст себя обтекать. При использовании каркаса сайта на основе плавающих блоков могут возникать некоторые проблемы, от которых нужно уметь избавляться. Так, при наполнении сайта контентом, блоки начинают увеличиваться по высоте и может возникнуть ситуация когда свойство float будет оказывать влияние на нижестоящие блоки. В результате некоторые блоки могут отображаться неправильно, залезая друг на друга. Чтобы этого не произошло, необходимо выполнить отмену обтекания, т.е. сброс свойства float, начиная с определенного места HTML страницы сайта. Сделать это можно, создав в требуемом месте страницы дополнительный тег div, и в CSS прописать для него свойство clear со значением both… Видео урок «Особенности использование float в CSS, отмена обтекания. Свойство clear» вы можете смотреть онлайн в любое время абсолютно бесплатно. Успехов!
Выравнивание блоков div по высоте (одинаковые колонки сайта) с помощью jQuery
В этом онлайн уроке рассказывается о том, как сделать выравнивание блоков div по высоте. Это часто требуется в том случае, если на сайте имеется несколько блоков div, каждый из которых может меняться по высоте в зависимости от размещённого в нём текста или другого контента. Например, это могут быть боковые части сайта (сайдбары) и блок с основным контентом. Для того чтобы колонки сайта были одинаковые по высоте необходимо воспользоваться одним из вариантов решения данной проблемы. В интернете сейчас можно найти достаточно много способов выравнивания блоков по высоте. Каждый из них имеет свои преимущества и недостатки. Один из самых популярных методов является использование специальной JavaScript библиотеки - jQuery. Все необходимые файлы для работы с jQuery Вы можете скачать в дополнительных материалах, которые приложены к первому видео уроку данного курса по CSS. Чтобы подключить jQuery к сайту, нужно в блоке head добавить новый тег script с атрибутом src в значение которого прописать путь к файлу библиотеки… Видео урок «Выравнивание блоков div по высоте (одинаковые колонки сайта) с помощью jQuery» вы можете смотреть онлайн в любое удобное время совершенно бесплатно. Успехов!
Позиционирование блоков и элементов. CSS свойство position Урок «Позиционирование блоков и элементов. CSS свойство position» посвящен вопросу о том, как при помощи стилей CSS можно поместить картинку, блок или другой элемент HTML страницы в какое-либо место на сайте. Позиционирование очень часто используется при верстке сайтов, особенно в проектах со сложным дизайном. За позиционирование объектов отвечает свойство position, которое может принимать значения: absolute, relative, fixed и static. По умолчанию все элементы HTML страницы имеют свойство position в значении static, т.е. они отображаются как обычно. Значение absolute позволяет задавать элементу произвольное положение на странице сайта, через свойства left, top, right и bottom. При этом первоначальное место положения такого элемента становится свободным и может быть занято другими объектами. Значение fixed в отличие от absolute привязывается к указанным в свойствах координатам на экране и не меняет положения при прокрутке страницы. Значение relative – резервирует исходное место расположения элемента, а свойства left, top, right и bottom позволяют сдвигать элемент в ту или иную сторону. Видео урок «Позиционирование блоков и элементов. CSS свойство position» вы можете смотреть онлайн в любое удобное время абсолютно бесплатно. Удачи Вам!
Абсолютное позиционирование в CSS. Свойство position со значением absolute
В этом видео рассказывается о том, что такое абсолютное позиционирование элементов в CSS, для чего оно нужно и как с ним работать. Чтобы абсолютно позиционировать какой-либо элемент HTML страницы сайта, необходимо в CSS прописать для него свойство position со значением absolute. В этом случае этот блок, картинка или другой элемент будет отделен от всего остального контента страницы и приподнимется над ним. Таким образом, первоначальное место расположения объекта станет свободно, и его смогут занять другие элементы страницы. Новое положение абсолютно позиционированного элемента задается при помощи свойств left, top, right и bottom, в значения которых можно задать расстояние от того или иного края браузера, либо от края блока, содержащего данный элемент, в том случае, если этот блок относительно позиционирован, т.е. его свойство position имеет значение relative. Изучать абсолютное позиционирование будем на примере размещения картинки в левом верхнем углу браузера. Для этого достаточно данному изображению при помощи CSS присвоить свойство position со значением absolute и задать новое положение свойствами left и top со значением 0… Видео урок «Абсолютное позиционирование в CSS. Свойство position со значением absolute» вы можете смотреть онлайн абсолютно бесплатно в любое удобное время. Успехов!
Относительное позиционирование в CSS. Свойство position со значением relative
Здесь рассказывается о том, как выполняется относительное позиционирование в CSS и в каких случаях это можно использовать. Для того чтобы сделать относительное позиционирование элемента на HTML странице сайта, необходимо в CSS прописать для него свойство position и присвоить ему значение relative. Особенностью относительного позиционирования является то, что браузер резервирует место, в котором должен находиться этот объект, и не позволяет занимать это место другим элементам. А сам относительно позиционированный элемент можно сдвинуть с первоначального места при помощи свойств left, top, right и bottom, в значения которых указывается расстояние от той или иной границы. Кроме того, если в такой блок поместить абсолютно позиционированный объект, то для такого объекта значения свойств left, top, right и bottom будут означать расстояния не от края браузера, а от края блока, в котором он находится. Эту особенность достаточно часто используют веб-мастера при верстке сайтов. Изучать значение relative мы будем на примере размещения картинки относительно блока div… Видео урок «Относительное позиционирование в CSS. Свойство position со значением relative» вы можете смотреть онлайн абсолютно бесплатно в любое время. Успехов!
Фиксированное позиционирование в CSS. Свойство position со значением fixed
Видео урок «Фиксированное позиционирование в CSS. Свойство position со значением fixed» посвящен вопросу о том, как можно зафиксировать положение какого-либо элемента на HTML странице сайта. Для фиксации блока, картинки или другого элемента, в CSS предусмотрено свойство position, которому необходимо установить значение fixed. В этом случае браузер не будет прокручивать данный объект вместе с остальным контентом страницы сайта, а оставит его на той позиции, которую мы зададим в свойствах left, top, right и bottom. Значения расстояний в данном случае задаются от соответствующих сторон браузера. Фиксированное позиционирование часто используют для создания блоков с контактными данными, либо ссылками на социальные сети и т.д. Такие блоки обычно располагают слева или справа от содержимого сайта и пользователь всегда его видит. Изучать фиксированное позиционирование в CSS мы будем на примере создания блока с картинкой и ссылкой на страницу оператора службы поддержки сайта. Данный блок будет располагаться с левой стороны сайта… Бесплатный видео урок «Фиксированное позиционирование в CSS. Свойство position со значением fixed» вы можете смотреть онлайн в любое время. Удачи Вам!
Порядок отображения элементов - Z-индексы в CSS. Свойство z-index
В этом онлайн уроке рассказывается о том, как что такое z-индексы в CSS и в каких случаях их необходимо использовать. Все дело в том, что любые позиционированные элементы на HTML странице сайта могут накладываться друг на друга. Т.е. каждый из них может находиться либо выше, либо ниже других объектов. Иногда они располагаются в нужном порядке, а в некоторых случаях их положение не такое как требуется. Чтобы точно определить порядок положения позиционированных объектов относительно друг друга, используют так называемые z-индексы. В CSS они задаются при помощи свойства z-index, в значение которого указывается число. Такой z-индекс задается для объектов, которые накладываются друг на друга. Чем больше значение свойства z-index у элемента, тем он будет выше располагаться на оси Z. Изучать Z-индексы мы будем на конкретном примере, в котором одна абсолютно позиционированная картинка будет накладываться на другую. И при помощи свойства z-index нам нужно будет настроить правильный порядок отображения картинок… Видео урок «Порядок отображения элементов - Z-индексы в CSS. Свойство z-index » вы можете смотреть онлайн совершенно бесплатно в любое время. Успехов!
Как скрыть элемент, отключить видимость в CSS. Свойства display и visibility
Это видео посвящено вопросу о том, как скрыть текст, картинку, блок или другой элемент на HTML странице сайта при помощи CSS стилей. Первый способ, который мы рассмотрим, позволяет скрыть элемент, отключив его видимость. Т.е. объект становится невидимым, а его место остается занятым. Второй способ позволяет полностью отключить элемент, т.е. удалить его и освободить место, которое он занимал. Для отключения видимости элемента в CSS предназначено свойство visibility, которое может иметь два основных значения, это visible (видимый) и hidden (невидимый, т.е. полностью прозрачный). Таким образом, для того, чтобы спрятать какой-то элемент на странице сайта, нужно с помощью CSS присвоить свойству visibility значение hidden. Объект в этом случае станет полностью прозрачным, а его место останется пустым, т.е. другие элементы не смогут его занять. Для того чтобы полностью удалить объект с освобождением занимаемого им места, используется CSS свойство display со значением none. Т.е. в этом случае элемент полностью исчезнет со страницы сайта, как будто его там и не было… Видео урок «Как скрыть элемент, отключить видимость в CSS. Свойства display и visibility» вы можете смотреть онлайн совершенно бесплатно. Удачи Вам!
Максимальная и минимальная ширина блока в CSS - max и min
Онлайн урок «Максимальная и минимальная ширина блока в CSS - max и min» посвящен вопросу о том, как при помощи стилей CSS ограничить максимальные и минимальные значения ширины блоков на HTML странице сайта. Ограничение ширины используется достаточно часто на сайтах со 100 процентной шириной, когда браузеры растягивают или сужают сайт в зависимости от разрешения экрана компьютера пользователя. Т.е. если разрешение экрана посетителя такого сайта слишком большое, то сайт в его браузере может отображаться не очень красиво и лучше в этом случае поставить ограничение по максимальной ширине. Аналогичная ситуация может возникнуть и при слишком маленьком разрешении экрана компьютера, когда блоки будут располагаться слишком близко друг к другу. В этом случае поможет ограничение по минимальной ширине сайта. Ограничение предельных размеров блока задаются при помощи специальных CSS свойств. Для ограничения максимальной и минимальной ширины блока используют свойства соответственно max-width и min-width… Видео урок «Максимальная и минимальная ширина блока в CSS - max и min» вы можете смотреть онлайн абсолютно бесплатно. Успехов!
В этом видео уроке рассказывается о том, какие проблемы могут возникнуть при отображении страницы сайта в разных браузерах и как это проверить. Дело в том, что сайты в интернете предусмотрены для показа информации для большого количества людей с разными компьютерами. У каждого компьютера имеется экран с определенным разрешением, своя операционная система и браузер. И Вам, как разработчику сайтов, нужно проверять то, как отображается Ваш сайт в других браузерах. Конечно, не обязательно проверять сайт во всех существующих браузерах. Достаточно выбрать наиболее популярные, а их не так уж и много. Для того чтобы определить какие браузеры популярны, можно просмотреть статистику посещений Вашего сайта, или публичную статистику другого сайта если она у Вас есть. Сейчас популярностью пользуются такие браузеры как Opera, Firefox, Google Chrome, и Internet Explorer. Последний популярен в основном из-за того, что он предустановлен в операционную систему Windows, и желательно тестировать свой сайт и в различных версиях этого браузера. Для тестирования Вам потребуется установить самые популярные браузеры и проверить отображение сайта в каждом… Видео урок «Проверка отображения сайта в разных браузерах» вы можете смотреть онлайн в любое время совершенно бесплатно. Удачи Вам!
Решение проблем с отображением сайта в браузере Internet Explorer 6 (IE6)
Видео «Решение проблем с отображением сайта в браузере Internet Explorer 6 (IE6)» посвящено вопросу о том, какие проблемы могут возникнуть при отображении Вашего сайта в IE6 и как их решить. Существует несколько способов решения проблем с браузером Internet Explorer 6. Некоторые ставят специальные заглушки на сайт. В этом случае, пользователи не смогут просматривать контент на IE6, а видят на экране сообщение о том, что их браузер устарел и требует обновления. Второй способ решения данной проблемы, это подключение разных таблиц стилей для сайта. Одни файлы CSS подключаются для браузеров IE6, а другие – во всех остальных случаях. Кроме того подключаются дополнительные файлы javascript для того, чтобы IE6 начал понимать современные веб-стандарты, позиционирование элементов, прозрачность картинок png и т.д. Некоторые веб-мастера вообще никак не пытаются подстроиться под браузер Internet Explorer 6 в связи с тем, что он считается устаревшим, и им пользуются все меньше и меньше людей... Видео урок «Решение проблем с отображением сайта в браузере Internet Explorer 6 (IE6)» вы можете смотреть онлайн в любое время абсолютно бесплатно. Успехов!
Способы подключения таблицы стилей и файла CSS к HTML странице сайта
В этом онлайн уроке рассказывается о том, как подключить файл таблицы стилей CSS к HTML странице сайта. Существует несколько способов подключения CSS стилей к странице сайта. Самый распространенный из них, это подключение файла CSS через тег link. Также часто используют написание свойств для конкретного тега напрямую, используя атрибут style. Следующий способ подключения стилей заключается в написании их в самом HTML коде в теге style, который обычно указывают в блоке head, хотя работает он и в блоке с содержимым страницы - body. Но данный способ подключения стилей используется достаточно редко, т.к. он требует написания стилей на каждой странице сайта и увеличивает вес каждого HTML файла. Кроме того исправление стилей на каждой странице будет занимать много времени. Гораздо проще работать с подключением отдельного файла CSS первым способом, используя тег link. А предыдущий способ можно использовать в том случае, если требуется добавить дополнительные стили, которые будут использоваться только на одной страницы сайта. Также можно подключить одну таблицу стилей из другой через команду import… Видео урок «Способы подключения таблицы стилей и файла CSS к HTML странице сайта» вы можете смотреть онлайн в любое удобное время совершенно бесплатно. Успехов!
Свойства стилей CSS, которые не наследуются. Значение inherit
Урок «Свойства стилей CSS, которые не наследуются. Значение inherit» посвящен вопросу о том, какие свойства являются ненаследуемыми, и как сделать так, чтобы они наследовались от своего родителя. Дело в том, что большинство свойств в CSS не наследуются от родителей, но при этом многие из них могут иметь значение inherit. При помощи inherit, можно указать браузеру на то, что значение данного свойство нужно брать от его родителя. Таким образом, мы можем сделать из ненаследуемого свойства – наследуемое. Такой метод можно использовать в тех случаях, когда значение ненаследуемого свойства, установленное у родителя, многократно используется для вложенных элементов страницы. И затем, меняя значение свойства у родителя в одном месте, мы можем сразу влиять на все остальные элементы HTML страницы сайта. Определить какое свойство CSS является наследуемым а какое нет можно по многочисленным справочникам в интернете либо по официальной спецификации CSS. Там же можно выяснить может ли конкретное свойство иметь значение inherit… Видео урок «Свойства стилей CSS, которые не наследуются» вы можете смотреть онлайн в любое удобное время абсолютно бесплатно. Удачи Вам!
Завершение теоретической части обучающего курса по CSS
Это заключительный видео урок бесплатного курса по CSS. Теперь Вы наверняка уже понимаете всю мощь этой технологии. Использование CSS в связке с HTHL позволяет создавать интересные и красивые сайты, которые в свою очередь достаточно легки, быстро загружаются и обрабатываются браузерами. Кроме того CSS позволяет легко и быстро менять дизайн сайта. Ведь, если все грамотно сделать, то для этого понадобится всего лишь заменить старый CSS файл на новый и при необходимости, загрузить новые фоновые картинки. Благодаря возможностям CSS по позиционированию элементов, изменению фоновых картинок, работе с текстом и изменению других свойств HTML объектов, можно практически полностью преобразовать внешний вид своего сайта, не изменив при этом ни одной строчки HTML кода… Видео урок «Завершение теоретической части обучающего курса по CSS» вы можете смотреть онлайн абсолютно бесплатно в любое удобное время. Успехов!
Вся информация предоставленная на данном сайте взята из открытых источников и носит информационный характер,для ознакомления и тестирования данного материала. Администрация данного ресурса не несет ответственности за содержание материалов,всю предоставленную информацию взятую с данного сайта Вы используете на свой страх и риск. Если Вы являетесь правообладателем материала выставленного на сайте,форуме без Вашего ведома,обратитесь к администратору и материал будет немедленно удален.
