×
Ви дійсно бажаєте відкрити доступ до тестування за курсом HTML & CSS на 40 днів?
ВІДЕОУРОК № 7. Метатеги и верстка страниц
HTML&CSS — это “must have” для каждого, кто хочет стать веб-разработчиком и создавать сайты и веб-приложения. На курсе вы получите исчерпывающие знания по верстке страниц на языке разметки HTML (основные теги, работа с изображениями, файлами, таблицами), по работе с каскадными таблицами стилей CSS (выравнивание, шрифты, фоны, цвета и многое другое). А так же сможете применить полученные знания на практике.
Читати далі...
Изучив данный видео курс, вы получите исчерпывающие знания по верстке страниц на языке разметки HTML (основные теги, работа с изображениями, списками, таблицами) и по работе с каскадными таблицами стилей CSS (выравнивание, шрифты, фоны, цвета, селекторы и многое другое). На последнем уроке будет наглядно продемонстрирован поэтапный процесс верстки веб-страницы. Успешно обработав и усвоив все обучающие материалы, вы будете владеть базовым инструментарием создания сайтов, который станет отличным фундаментом для дальнейшего продвижения в сфере веб-разработки.
Читати далі...
В этом видео уроке рассматриваются особенности работы с изображениями в языке HTML. На уроке будет подробно рассмотрена процедура вставки изображения в разметку с помощью тега img, а также атрибуты этого тега. Будут рассмотрены основные форматы изображений, которые поддерживаются современными браузерами, а также возможность добавления анимации на страницу. Вы научитесь создавать подсказки пользователю при наведении на конкретное изображение, а также научитесь задавать размеры изображений, создавать карты изображений и многое другое. После просмотра видео урока Вы сможете уверенно управлять изображениями на Ваших страницах.
Читати далі...
На этом видео уроке Вы познакомитесь с HTML тегами, способными размещать таблицы и списки на Ваших страницах. На уроке будет подробно рассмотрен тег table. Вы разберетесь с особенностями его применения, научитесь создавать таблицы с различной размерностью и разнообразным содержимым, научитесь задавать фон и размер отдельно взятых ячеек. Вторая часть урока будет посвящена спискам. Вы узнаете, как создавать упорядоченные списки, неупорядоченные списки, вложенные списки и списки определений. Видео урок имеет большое количество практических примеров, изучив которые вы сможете уверенно работать со списками и таблицами, разрабатывая Ваши собственные сайты.
Читати далі...
На этом видео уроке Вы познакомитесь с понятием слоя в языке HTML, научитесь создавать слои с помощью тега div, после чего научитесь переопределять их размеры, создавать сложенные вложенные слои, позиционировать их, задавать им обтекание и различные отступы. Все это богатство возможностей будет рассмотрено в контексте атрибутов тега div. Кроме того, в уроке будут рассмотрены особенности применения тега span для форматирования и создания уникального стиля для любого фрагмента текста на странице. Видео урок, в простой и доступной форме, познакомит Вас с основой современной верстки страниц, что поможет Вам тут же начать делать первые самостоятельные шаги на этом поле.
Читати далі...
На этом видео уроке Вы познакомитесь со специальным языком для описания внешнего вида веб-страницы - CSS (Cascading Style Sheets). На уроке будут рассмотрены основные способы интеграции CSS в создаваемую веб-страницу, а также семантика CSS и особенности применения стилей. На практических примерах будут продемонстрированы наиболее часто используемые селекторы для задания стиля определенным частям документа, продемонстрирован приоритет между различными подходами при задании стилей и многое другое. Этот урок позволит наполнить Вашу страницу красками и придать ей желаемого Вами вида.
Читати далі...
На этом видео уроке Вы познакомитесь с понятием метатегов, рассмотрите их типы и предназначение. Познакомитесь с тегом meta и его атрибутами. Значительная часть времени урока будет уделена верстке. Вы рассмотрите понятие «резиновой», фиксированной и смешанной верстки. На примерах рассмотрите тему позиционирования элементов, познакомившись с таким свойством как position и его параметрами. Посмотрите как можно задавать уровень прозрачности элементам и задавать скругление для углов рамки элементов. Данный видео урок, позволит Вам расширить Ваши познания в верстке веб-страниц и вывести их на качественно новый уровень.
Читати далі...
На данном видео уроке Вы познакомитесь с формами в HTML и рассмотрите особенности применения тега form. Рассмотрите и сравните методы запроса к серверу, научитесь создавать элементы формы: различные кнопки, поля для ввода информации, выпадающие списки. Научитесь группировать и создавать скрытые и многострочные поля. Познакомитесь с уже устаревшими атрибутами; атрибутами, что позволяют задавать состояние элемента, деактивировать элементы, делать их недоступными для записи. Все этот будет представлено Вам в виде примеров с детальным пояснением каждой строки в разметке. Этот урок дополнит копилку Ваших знаний, после чего Вам будет по силам самостоятельная верстка полноценной веб-страницы.
Читати далі...
На данном видео уроке Вы познакомитесь с алгоритмом создания веб-страницы. Вам будет дан ответ на «вечный» вопрос, с чего же начать создание веб-страницы? Пошагово будет продемонстрировано ее создание, рассказана каждая строчка кода и продемонстрирована ее работа в браузере. Этот урок представляет собой консолидацию всего материала, который был изложен Вам в предыдущих семи уроках. Прослушав урок и взяв его пример за основу, Вы смело можете начать делать свои собственные веб-сайты.
Читати далі...
ПОКАЗАТИ ВСЕ
Поділіться цим відео в соцмережах
основні теми, що розглядаються на уроці
0:00:00
Вступление. Метатеги
0:01:32
Типы метатегов, примеры
0:20:54
Типы верстки
0:46:00
Свойство position
1:03:40
CSS 3.Свойство Opacity
1:06:26
CSS 3. Свойство Border – radius
1:18:08
Пример opacity
1:22:35
Пример favicon
ПОКАЗАТИ ВСЕ
Рекомендована література
Титри відеоуроку
Сегодня мы с вами поговорим о метатегах и узнаем что метатеги это теги языка HTML, которые содержат в себе служебную информацию. Так же узнаем как создавать метатеги и каких типов они бывают. Сразу можно сказать, что метатеги бывают трех типов. Первый тип это метатеги, которые содержат управляющие команды для браузера, второй тип – содержащие и управляющие команды для поисковых систем и третий – содержащие информацию о странице и ее авторе. В примерах мы подробней рассмотрим каждый тип метатегов, команды для браузера, информацию о странице, которые в себе несут, а так же о ее автореавторе и управляющие команды для поисковых систем. Еще сегодня мы поговорим о процентной верстке. Основная идея которой состоит в использовании вместо единиц измерения – проценты. Так же мы с вами поговорим о фиксированной верстке, ее плюсах и минусах. Также свойстве блочных элементов Position, о том как оно меняет подход к верстанию и мы подробно рассмотрим каждое значение, которое может получать данное свойство. Так же рассмотрим Absolute, relative, fixed и о том как использовать данное свойство Position. Итак, давайте перейдем к примерам и начнем с метатегов. Итак, напоминаю, что Html-страница обязательно состоит из тегов: <Html>, <Head> и <Body>. Так вот, мы с вами работали с <Body>, смотрели какие теги можно использовать внутри Body, но никогда до этого не сталкивались с работой в <Head>-e потому, что на изображение информации он не влияет, единственное что можно подключить стили. То есть манипуляции с данными через этот тег нету. Мы только можем подключить какой то файл и сменить поведение. Итак, напоминаю, что вся информация которая находится в <Head>-e не отображается на прямую. Только через информационные панели и меню. Напоминаем, что существует три группы метатегов, это теги, которые содержат управляющую информацию для браузеров, те которые содержат информацию для поисковых систем и те, которые содержат информацию о ее авторе. Итак, давайте посмотрим какие у нас есть теги. На 32й строке есть первый метатег, видим что у него есть Description (описание), так же есть ключевые слова и тег <Body>. Но это пример, на самом деле Description Keyword таким образом не используют, но мы когда будем говорить о SEO то мы более подробно поговорим о данных свойствах. А теперь давайте запустимся в Firefox и увидим что данные свойства пользователю не отобразились и так же посмотрим с помощью каких информационных панелей их видно. Итак, мы видим что у нас здесь появился текст, но не описание, не ключевые слова у нас не появились. В Firefox достаточно клацнуть по пустому месту на странице пкм и выбрать «Информация о странице» и посмотреть что у данной страницы есть и Description и Keywords которые мы задавали, так же есть Title. О всех этих трех значениях мы поговорим чуть позже, когда будем говорить о SEO. Метатеги существуют для того что бы передавать информацию каким то поисковым ботам, или передавать информацию о авторе или же содержать управляющие команды. Итак, на этом все по данному примеру, давайте посмотрим пример №2, как раз здесь у нас будет идти речь о управляющих командах для браузера, таких тегов немного, просмотрим их на примерах, здесь у нас их 4. И мы видим, что первый из них будет менять кодировку на windows-1251. Итак, давайте сначала разберем синтаксис. Эти два тега создаются следующим образом: они у нас не парные, так же мы указывает два атрибута: http-equiv и content. http будет выступать как ключ, как атрибут а content как значение этого атрибута. Итак, на 20й строке мы как раз разбираемся с кодировкой. В данном случае мы задаем кодировку windows-1251, но такое задание кодировки не поменяет расположения нашего текста потому что у нас есть кодировка самого файла htm (мы его можем открыть даже в блокноте и поменять кодировку на ANSI или UTF-8) так же мы можем на сервере настроить отображение кодировки по этому данный атрибут будет срабатывать только тогда, когда у нас не явно заданный тип кодировки, тогда она будет браться с сервера. По этому не очень часто указывают данный метатег, он упразнен с помощью Html5. На курсе Html5 данный метатег будет разбираться. Далее, 25я строка – мы указываем на каком языке будет содержимое нашей страницы, мы указываем Ru , русский язык допустим. Но в наше время браузеры умеют различать языки, которые он использует, потому данный метатег не часто используется. Он и так может понять что у нас текст русский, украинский или любой другой язык. Строка 22. Тут мы будем говорить о кэшировании страницы, видим что мы используем в атрибуте content значение no-cache. Зачем использовать данный метатег. Представим, что у вас достаточно тяжелая страница, вы разместили на ней много информации, которую браузер каждый раз пытается прокэшировать. И вы не хотите что бы браузер тратил на это свои ресурсы, страничка итак долго грузится а браузер еще и пытается поместить в кэш всю эту информацию и таким образом вы пытаетесь оптимизировать процесс загрузки страницы и указываете pragma no cache и таким образом вы кэшируете вашу страницу. Обратно-таки, современные браузеры достаточно быстро работают и у людей уже достаточно неплохие машины для пользования интернетом и можно спокойно загружать страницы, то есть это уже вопрос оптимизации использовать данный метатег или нет. Далее, на 23й строке мы используем метатег Redirect для перенаправления пользователя на другую страничку. Допустим мы хотим перенаправить пользователя со странички с которой запустимся на наш сайт, и желаем мы это за 3 секунды. Вот так вот мы запускаемся, проходит 3 секунды и мы переходим на наш сайт. Где это можно использовать? Допустим вы создали страничку 404 по ошибке страничку не найдено и в ней указали метатег и таким образом вы хотите перенаправлять пользователя на другую страничку вашего сайти если он обратился к страничке которой не существует. Или же другой вариант, ваш сайт переехал, сменил домен, и вы хотите что бы человек заходил на страницу, читал информацию об этом и перенаправлялся на ваш новый домен. Но здесь есть один Seo нюанс. Таким образом люди часто создавали схожие сайты по тематике, они были созданы что бы перенаправлять массу людей с сайтов на которые эта аудитория зашла и перенавправяет на сайт, который является сборщиком всей аудитории, которая перешла по тематическим сайтам. И собирая всех людей на себя имеет самый высокий рейтинг, по этому такая техника считается техникой черного seo и потому все системы попытаются с ней бороться. По этому если вы не хотите что бы на ваш домен пало подозрение то лучше так это не реализовывать. В данном случае будет умесней создать страничку, в которой разместить ссылку с текстовым описанием, и разместить ссылку на ваш сайт, такая страница будет иметь выше seo значение, чем Redirect. Итак, на этом все по поводу информации, которую браузер может передать с помощью метатегов, давайте рассмотрим 3й пример о авторе. В данном примере мы видим что можем использовать следующие метатеги. Если в прошлом примере мы указывали http-equiv, который используется один раз, то в данном случае мы будем использовать данный атрибут с именем name и значением Generators, Site-creator, Author, Copyright, Reply-to, Owner, Adress. Что касается http-equiv мы будем использовать дату в описании нашего сайта. Давайте посмотрим какие у нас есть значения в наших атрибутах. Для метатега со значнием Generatot у нас есть Visual Studiо. Что будет означать данный метатег? Данный метатег зачастую используется в CMS, в системах, которые практически генерируют контент и создатели данных систем используют данный тег что бы указать что информация которая была сгенерирована на странице была изменена с помощью например Joomla, Wordpress и т.д. И таким образом разработчики указывают людям, которые следят за метатегами что именно они являются генераторами данного контента. Далее, метатег Site-created рассказывает о том, когда был создан сайт, можно использовать для того что бы указывать дату создания сайта или блога и пользователи, которые просматривают вашу страницу могли знать когда была создана эта страница. Далее, Http-equiv = «expires» - очень специфический метатег, очень редко его используют. Далее, 21я строка, в которой вы указываете автора страницы. Если ее создали и сверстали вы то вы являетесь автором данной страницы и указываете свое имя. Далее, «Copyright». Если вы хотите каким-то образом защитить свои права то указывайте в Copyright-е ваше имя. Далее, Reply-to, вы указываете e-mail адрес, на который нужно обращатся по возникшем у вас вопросам. Тоже этот метатег очень редко используется потому, что теперь можно создать красивую форму обратной связи или использовать mail to для отправки писем на электронный адрес. Далее, Owner. Это используется если, например, вы являетесь автором данной странички, но владельцем, тем кто ее заказал является другой человек. Ну и последний Address, вы указываете адрес если хотите что бы с вами связались. То есть если вы хотите что бы вас нашли то вы можете использовать этот Address. Итак, запустимся и посмотрим как же мы можем увидеть данную информацию. Итак, видим что у нас с вами появилось текстовое содержимое на белом фоне. И никаких метатегов у нас не появилось. Давайте посмотрим информацию о странице и заметим что те поля, которые мы заполняли содержатся тут в информации о странице. Итак, давайте перейдем к примеру №4 и посмотрим какие нужны метатеги что бы поисковые системы удачно индексировали наш сайт. Мы видим что существует 5 метатегов, важно сказать что есть еще <Title> который является заголовком страницы. Он должен быть достаточно лаконичным и своим текстовым содержимым показывать что содержится на странице. Далее мы видим, что мы создаем наши метатеги: <Description>, <Keywords>, <Robots>,<Revisit>, <Revisit-after>. <Description> находится на ровне с тегом <Title> по значению для индексации. Давайте еще поговорим о <Description>, где еще мы можем его видеть. Например по поисковой выдане. Напишем какой то запрос, например Text Decorated Blink и увидим что у нас с вами есть поисковая выдача, ссылка основная и описание. Так вот часто Google берет описание ниже ссылок с нашего <Description>-а. Так же <Title> выступает в роле главной ссылки, потому <Description> и <Title> нужны для удачного продвижения. Так же что еще сказать, <Decoration> как и <Title> должен быть достаточно лаконичным, не нужно использовать длинные фразы, например: «Купить ноутбук в Киеве по самой низкой цене и так далее» Такие вещи для <Title> не подходят, больше подходят для <Description>, у которого в свою очередь рекомендуемое ограничение количества символов до 255, так что не перестарайтесь. Большинство SEO контор присылают вам задание оптимизациии вам нужно будет указать <Title> и <Description>. Ключевые слова потеряли свою важность. Мы переходим к 23й строке и поговорим, использовались они ранее, тогда можно было указать громадный массив тегов (слов) по которым вас могли бы найти. Если вы застали ту эпоху, когда вы заходите в гугл, прописываете например «детское питание» и вас выносит на другой сайт, где совсем не детское питание. Тогда вот такой был подход к Seo, забивались ключевые слова и люди несовсем по тематике попадали в поисковую выдачу. Такие слова уже особого значения не представляют, единственное что они могут использоваться для каких то Аппи, например существуют всякие Аппи позволяющие работать с Facebook-ом, вы интегрируете туда целые странички, привязываете их к ключевым словам. Так что все таки желательно их заполнить. Далее, роботы <Robots>. Правила поведения для поисковых роботов. Давайте просмотрим в комментариях, например значение index noindex позволит индексировать и не индексировать данную страничку, идти или не идти по ссылкам на эту страницу. Есть еще значение all и none , follow nofollow. Далее, думаю нужно прислушиваться разработчиков, которые и будут решать будет тут использоваться данный метатег или не будет. Давайте рассмотрим пример на 25й и 26й строке. Давайте это сейчас сделаем, у нас здесь имеются теги revisit, который указывает поисковым роботам с какой частотой нужно просматривать их странички. Давайте я объясню, раньше поисковая выдача не могла формироваться чаще чем раз в неделю, например нужна была неделя для того что бы гугл обновила свою выдачу. Таким образом когда объявили о данном метатеге то большинство поисковых систем выступило с заявлением что данный метатег поддерживаться не будет потому что понятно что каждый пользователь захочет что бы каждый день робот каждый день заходил и обновлял поисковую выдачу, таким образом машины не могли каждый день формировать поисковую выдачу. Сайчас поисковая выдача формируется раз в 4 дня, и я думаю всем понятно что не получится реализовать данный метатег в ближайшем будущем у роботов. С Keywords тоже сомнительный вариант. Если вы, например, не хотите что бы роботы заходили на вашу страничку, в случае если у вас есть какой то дублирующийся контент на страницах (а поисковый робот очень плохо к этому относится и понижает выдачу для таких страниц). Так что вы можете указать на страничке копии что вход на нее запрещен для роботов, сделать это можно прописав ip-адреса роботов (которые часто обновляются, их можно найти в сети) и таким вот образом закрывают доступ к вашим страницам. Итак, мы разобрали все метатеги по поводу Seo, обратите внимание, из полезных и те которые вы будете использовать это <Description>; <Keywords> - это просто дань старине, его использование по умолчанию, возможно для аппи. Все остальные – очень специфические метатеги и использовать их нужно будет по ситуации. Давайте перейдем к следующей папке, пример №1 – Proc Layout (Процентная верстка). Ее так часто и называют : процентная, резиновая, тянучая верстка. Давайте разберемся что у нас здесь есть. Для <Body> здесь мы убираем отступы, избавляемся от елевидимого отступа сверху, который присутствует на всех страницах. Далее для параграфа используем класс white, где цвет текста белый а отступы отсутствуют. Так же указываем что все Div-ы на странице высотой 100рх и шириной 100%, тянущаясь. Далее указываем hight auto, то есть автоматическое растягивание по высоте. Это у нас основной контейнер, далее создаем Div, фон у которого будет синим, создаем параграф с классом .White, после этого создаем Div, в котором размещаем 2 Div-а с фонами: серый и белый, вісота у них будет 30%, ширина- 70%, после этого создаем еще один Div, фон у которого будет темно-зеленый, в нем будет находится параграф с текстом Footer, получается мы создали заголовок сайта, тело и подвал. Давайте запустимся и посмотрим как у нас получился тянущийся сайт. Сейчас вы поймете почему именно тянущийся. Как вы видите, как мы не изменим размер экрана по ширине, изображение не изменится, верстка под него подстраивается, за счет использования процентов. На данный момент данные цвета занимают по 100 % ширины окна браузера. Казалось бы все просто, можно захватить всю верстку, создавть таким образом страницы, которые удачно будут открываться на устройствах с разным разрешением. Это не является правдой, потому что очень сложно сверстать сайт с графическими элементами, которые будут одинаково выглядеть и на разрешении 1920 пикселей и на разрешении 1024*768 или 800*600. Так же сейчас появилось много устройств с соотношением сторон и (3 к 4) и (4 к 3). По этому будет достаточно сложно создать сайт, который действительно сможет себя процентной изменять под любое соотношение сторон и процентной верстки. Потому в последнее время от процентной верстки по немного начали отказываться, так как лет пять назад это было очень распостранено, когда было не так уж много устройств с разными разрешениями так что можно было обходится процентной версткой. Давайте посмотрим пример №2. Статическая верстка. И в нем мы видим что береться самый большой блок, самый большой графический элемент с текстовой информацией и мы используем этот блок, как статический блок, в котором буду находится все другие или они будут занимать место не больше ширины данного блока. Очень часто для такого блока используют ширину 1024х768, поскольку это являться минимальным разрешением современных мониторов ПК и ноутбуков и следовательно, таким образом, пользовательно даже с маленьким экраном может увидеть весь блок без каких либо скроллов. Далее, что важно понимать в статической верстке, важно понимать нужно очень четко задавать ширину вашего блока, что бы ничто никуда не девалось и строго оставалось в вашем блоке. Итак, давайте посмотрим стили, <Body> такой же как и в прошлом примере только мы здесь сбрасываем margin и padding. Далее есть класс .white, так же правило для всех Div-ов на странице, они будут по высоте 100 пикселей, по ширине 800 пикселей, так же они будут выровнены и центрированы. После этого создаем основной блок Div, как и в прошлом примере, Div с параграфом <Title>, в котором будет хранится текст со значением Title. Создаем Main Content блок, в котором будет основное соержимое. А здесь уже указываем размеры в числовом размере 300*500. После этого создаем Div, который у нас будет Footer-ом. Давайте запустимся и посмотрим. И мы видим, когда уже запустились, наши блоки не подтягиваются, к разрешению окна браузера добавляется скролл и часть информации остается вне поля видимости. Такая верстка действительно хорошо, когда у нашего пользователя разрешение больше 1024*968 и он может просмотреть наш сайт в таком виде, у нас не появляется огромного скролла, он есть не н велик. Таким образом человек может смотреть на сайт, но если мы начинаем менять наше разрешение, то появляеться проблема, информация ховается, приходится пользоватся скроллами, прокручивать страничку что бы увидеть всю информацию. Такой подход не является оптимальным. Давайте посмотрим что же пришло им обоим на смену. Пришла им на смену смешенная верстка, но она еще не является верхом эволюции, о том что является поговорим позже. Смешанная имеет элементы статической и процентной верстки. Смотрите, здесь мы делаем следующее. Стили практически такие же как и в примере, единственное у нас отличаются от всех Div-ов на странице. И в этих стилях мы первый раз сталкиваемся со свойством max-width. Зачем нужно свойство max-width ? Есть еще и Min width, max-height, min-height. Они задают максимальные и минимальные значения высоты и ширины блока. Допустим в каких случаях это стоит использовать? Допустим вы осуществляете верстку процентную, для менеджера, контент-менеджера пустое место. И допустим вы не уверены что менеджер заполнит все пустое место информацией. Может менеджер попадется ленивый и заполнит всего лишь 5-6 строчек из 20-ти. И возникнет ситуация, что ваш блок станет меньше чем вы указывали в %, и таким образом вы указываете что данный блок занимает 600рх по высоте и не важно сколько текста будет в данном блоке. Итак, давайте посмотрим что у нас в данном примере, у нас есть параграф, который будет Title-ом в данном примере в Div-е, цвет которого-navy, так же у нас будет Div, в котором присутствует часть верстки которая была еще в первом примере. Это два блока обтекаемы друг другу, белый и серый фон. Так же у нас есть фон, который является FOOTER-ом. Наши блоки изменяют ширину и высоту в процентах при данной верстке, но сам блок статичен, он занимает место по центру странички и у него есть какая то максимальная ширина. Мы с вами поговорили о популярных шаблонах и способах, но сейчас есть актуальная тема : Адаптичный дизайн. Давайте зайдем на сайт газеты bostoneglobe.com и посмотрим о чем я говорю. Итак, сначала давайте просто рассмотрим верстку, у нас здесь есть три блока: центральный, левый и правый, теперь мы будем менять наш масштаб окна и таким образом менять разрешение. Пока что работает в Opera, Google Chrome, IE, Mozilla Firefox. В данном слечае при нажатии Ctrl + Ctrl – вы можете просто зуммировать ваш сайт, так что будуту внимательны если вы таким образом будете проверять разрешение окна. Итак, сейчас будем нажимать комбинацию клавиш Ctrl + и таким образом увеличивать размер нашего окна. Итак, нажимает Ctrl + и видим что у нас пропал третий блок. Но на самом деле он у нас не пропал, а находится чуть ниже. Таким образом и работает адаптивный дизайн. Сейчас мы можем обратится к разрешению экрана, посмотреть какое сейчас. Мы видим что у нас 743 х 418 стало при изменении масштаба. И таким образом мы показываем как нам нужно сайт изменить. Таким образом мы выбираем разрешение и размещаем два блока, а третий под ними. Это позволяет сделать или Java Script, то есть нужно к библиотекам Java Script-а обратится или CSS3. Это уже тема адаптивного дизайна, давайте изменим наше разрешение и мы увидим что наш сайт превратился в один блок, который идет один за другим. Из трех блоков мы подошли к одному. Данный дизайн отлично подходит для реализации верстки под мобильные устройства, планшеты, ноутбуки. Итак, давайте тогда закончим с этой папкой Layout Paterns . И переходим к Div position. Позиционирование. В данной папке мы поговорим о свойстве «position» и его значении absolute, relative и fixed. Начнем с absolute. Как мы видим absolute соответствует абсолютному позиционированию нашего элемента, сразу стоит сказать, что до этого мы с вами использовали Position static, то есть наши с вами элементы находились на одной плоскости, статично и если у них были какие то конфликты связаные с ихним местоположением на странице. Они решались следующим образом, либо сдвигались, либо непоместившиеся элеметы пропадали, но в данных значениях absolute, relative или fixed избегать таких случаев. Либо будем переносить ниже элемент или задавать ему фиксированую позицию. Итак, мы видим что у нашего absolute-а появляются новые свойства как только мы применяем его к нашему объекту, такие свойства как left, right, bottom с помощью которых мы можем задавать поведение элемента на новой плоскости. Так же у него появляется индекс, который указывает на какой именно плоскости он будет находится, первый, второй, третий и вплоть до десятитысячного и так же можно указывать значения в минус. Что еще стоит указать? Что если у элемента позиция указана статическая, то отчет координат ведется от края окна браузера, если же у «родителя» значение указано как fixed, relative или absolut (те значения с которыми мы сейчас ознакомимся) то отчёт ведется от края родительского элемента. Давайте же просмотрим нашу верстку. Начнем со стилей как всегда, у нас здесь правило для всех Div-ов на странице, они будут с рамкой 150*150 пикселей по ширине и высоте, и будут присутствовать внешние отступы по 15 пикселей от краев; видим что мы здесь используем position: absolute. После этого мы создаем три элемента: #Greenblock, #Redblock, #Yellowblock. После этого мы для # Greenblock задаем z-index:3; отступ сверху :50 пикселей, слева 30. Если бы мы указали здесь bottom, то наш элемент прижимался к низу, right- к правому краю. Далее, для #Redblock мы указываем z-index указываем : 2, топ и left позиции по 20 пикселей и фон – зеленый. Z-index для #Yellowblock будет :1 и фон – желтый. Мы создаем три элемента #Greenblock, #Redblock и #Yellowblock и когда мы запускаемся видим такое-себе 3D изображение в котором будет желтый красный и зеленый элементы. Как вы понимаете, мы достигли данного результата с помощью плоскости, по скольку зеленый у нас нахожиться на третей плоскости. И еще что стоит указать, мы с вами достигли позиционирования, я говорил какое место должен занимать данный элемент в верстке. Допустим, давайте мы укажем bottom здесь (50рх) и посмотрим как поведет себя нижний Div, мы видим что он прижался к нижнему краю и если бы мы указали вместо left –right, наш елемент пошел бы вправо и отступил 30рх. Таким образом мы видим что Div position: absolute, который мы применяем позволяет нам получить универсальный инструмент для позиционировании на странице, мы можем отправлять Div влево, вправо, вверх и вниз, Очень важно понимать что Right, Top, Left Bottom это отступы от правого, верхнего, левого, нижнего края это как раз и отступ и позиционирование по этим краям. Хотелось бы еще поговорить как себя будет вести Div с позицией: absolute, который будет находится в верстке со множеством Div-ов у которых будет позиция : static. Для этого давайте закомментируем на 23й строке позицию:absolute и запустимся посмотрим что же у нас получится. Видим что у нас получилось следующее: 3 Div-a которые находятся друг под другом. А теперь давайте сделаем следующее: для Div-a, который у нас красный присвоим позицию : absolute и посмотрим что у нас произойдет в таком слечае. Наш красный Div сместился влево и сверху по заданным значениям которые мы указали (20/20). Если мы эти значения уберем, то можно понять куда стремится этот Div то мы увидим куда бы стремился элемент при своем значении static, но он не участвует в формировании верстки, в той плоскости в которой находятся все элементы. То есть грубоговоря наша верстка без него разъехалась. Зеленый и желтый Div-ы не знают о существовании красного, а красный находится в другой плоскости и занимает место которое он занимал. Вот в этом есть опаска при использовании Position: absolute, когда вы выносите какой то блок, который у вас в центре верстки и за счет этого у вас съежается верстка. Решение такой проблемы существует, она представлена в следующем примере №2 Div position: relative. Relative является аналогом absolutе-а с единственным исправлением. В отличии от absolutе С сохраняет все взаимоотношения с прошлой версткой, он переходит в новую плоскость и при этом верстка не разъезжается, то есть этот элемент является одним целым с той же плоскостью на которой он до этого находился. Давайте рассмотрим данный пример, что мы здесь делаем? Создаем правила для Div-ов, говорим что текст будет по центру, ширина и выота по 150 пикселей, позиция: Relative. Создаем три блока: #Greenblock, #Redblock, #Yellowblock. Указываем для них фон, рамку и для красного и зеленого указываем блок и отступы. Еще создали два класса .whiteblock и .blueblock. Для .whiteblock у нас есть черная рамка с внешними отступами по 15 рх и есть .blueblock (размеры 150х150) и фон голубой. Итак, что мы тут делаем. Создаем Div-ы, заполняем текстовыми значениями и смотрим что же у нас здесь получилось. И мы видим, наша верстка не разъехалась, элементы находятся в тех позициях, в которых и должна находится. Давайте посмотрим по какой стороне код наш и мы видим, что блок сохраняет взаимоотношения блокох с которыми находился, взаимоотношения не меняются при использовании Div-позиции: Relative. Как мы обратили внимание у Relative есть такая же возможность обращения к Top-у, выравнивает блоки она таким же образом для левого и правого края. На этом все с Div position: Relative, давайте посмотрим Div position: Fixed. Сейчас можно запустится и вы увидите где очень часто использование Fixed, например при создании баннеров, вот видите, сколько мы не будем скроллить наш баннер будет оставаться в том месте, в котором задан. Часто интерактивным образом, оставляют кнопки в правом нижнем углу (как например на нашем сайте). Вот мы начнем скроллить и увидим данную кнопку в левом нижнем углу. Итак, давайте рассмотрим нашу верстку и увидим с помощью чего мы это добились. Все достаточно просто. Мы создали Div, задали ему ширину и высоту, указали выравнивание по центру, цвет шрифта, размер шрифта, рамку, фон – синий, отступ по правому краю и от левого. Так же мы с помощью этих свойств мы выровняли наш Div по левому в верхнему краю, сказали что он прижимается к ним. В свою очередь как мы видим у Position: fixed тоже есть возможность обращения к Top, Left. Видим что у нас есть Div id=”fixedDiv” и стих. Мы можм запустится и видеть наш баннер и весь наш стишок. Как видите баннер всегда находиться в одной и той же позиции и положение не меняет. Итак, это все что касается Position: absolute, fixed и relative. Будьте внимательны, хорошо понимайте разницу между absolute и relative, єто часто спрашивают на и в различных подобных организациях где занимаются трудоустройством с собеседованием. Итак, давайте посмотрим следующую папку. В ней мы рассмотрим плюсы CSS3, более подробно о них будет рассказываться на курсах CSS3, но мы рассмотрим одно из свойств это закругленные углы Border radius и тут стоит сделать лирическое отклонение. Как же раньше использовали скругление углов. Вообще раньше это был тренд, когда было модно скруглять углы везде, будь то мобильные устройство, ноутбуки, столы или дизайнерские решения. Таким образом и до Web-а добралось желание скруглить углы и дизайнеры сталкивались с проблемой решения этой задачи так как не было решения, не было тега который бы позволял это сделать. Были различные техники, мы их рассмотрим во втором и третьем приемере, но на помощь дизайнерам пришло свойство Border radius, которое позволяет закруглить углы у любого элемента, будь-то картинка, Div, параграф и т.д. Давайте посмотрим как это работает: Мы указываем фон для всех Div-ов на странице, указываем рамку, говорим что она будет толщиной 2рх, solid и цвет. После этого мы указываем Padding-и Margin-ы (Напоминаю, это внутрние и внешние отступы). Margin top – это верхний внешний отступ, указываем размер ширину и высоту и радиус для нашего элемента. Так же мы здесь используем префиксы для Webkit-a и для Mozilla а Visual Studio подсказывает что они уже не актуальны, их уже можно не использовать, оба браузера принимают свойства border radius. Запускаемся и смотрим что же у нас получается, мы видим у нас получился Div с скругленными углами, давайте посмотрим второй пример. Согласитесь, достаточно все просто сейчас, вы просто одним свойством скругляете углы. Если задать достаточно большое значение и запустится то можно увидить что ваш элемент уже немного похож на круг даже. Итак, давайте посмотрим наш пример №2 Border rounder. Итак как же это делали в html2. Есть два подхода. Это верстка слоями, так называемая, когда нарезается изображение, которое является левым, правым и верхним углами и левым, правым верхними углами изображения которое нужно закруглить, они выставляются background-ом и таким образом создается иллюзия для человека который просматривает страницу, что для него создали закругленный элемент. Как мы видим верстка не проста в данном случае, вложенность огромная, мы вкладываем 5 Div-ов друг в друга. Давайте запустимся и посмотрим что же у нас получилось, в принципе такое же самое скругление. Но опять-таки если вам нужно быстро подредактировать, заказчика не устраивает такое скругление, то вам предстоит очень кропотливая работа и скорей всего вы будете очень много времени проводить в фотошопе. Итак, давайте посмотрим третий пример, в котором мы используем *.png в котором есть альфаканал и можно реализововать прозрачность. И просто подставляем background-ом закругленное изображение, где еглы квадрата просто затерты. Но таким образом мы сталкиваемся с проблемой, если нам нужно что бы изображение масштабировалось то у нас будет проблема с тем что изображение будет очень терять в радиусе, чего не будет происходить при border: radius . Еще нужно понимать что если вы ставите фон какой то который будет меняться, тянуться с помощью того что мы сегодня прошли (процентная верстка), мы указываем ширину 100% и она растягивается в окне обозревателя. Итак, давай запустим данный пример и посмотрим что у нас получилось. Мы видим что у нас есть достаточно большое изображение и увидим что в таком вот виде изображение выглядит нормально но как только мы начинаем увеличивать масштаб у нас появляются пиксели, которые делают достаточно нелицеприятный вид нашему элементу. Нпример на мобильном устройстве Div выглядел бы достаточно некрасиво. Итак, делаем вывод что лучше использовать border: radius, старые примеры лучше забыть. Перейдем к последнему примеру предпоследней папки и поговорим о подключении favicon. Учитывая кроссбраузерность его лучше подключать таким вот образом: мы с помощью того, что подключаем .ico файл и .png и это ведет к тому что браузер который не умеет работать с .ico то он выбирает .png и наоборот. Таким образом у нас будет кроссбраузерная реализация Favicon. Давайте еще объясним для тех, кто не знает что такое Favicon. Перейдем в браузер, зайдем на сайт и увидим что в левом углу находится такая вот иконка, которая называется Favicon, и мы в принципе разобрали как ее задавать. Достаточно в теге link указать путь к файлу, указать что это иконка и указать ее тип. А также же очень важно сказать что *.png очень удобный формат для работы с Favicon, потому что очень сложно рисовать в .ico. Можем задать запрос, найти генератор ico, которые будут создавать ваши Favicon и как видите нам неудобно их рисовать и создать свою Favicon в этом формате сложно. Другое дело создать ее в формате *.png в фотошопе, добавив тени, цвета и т.д. Иногда создают Favicon в *.png, форматируют ее в *.ico на тот случай если браузер не поддерживает формат *.png. На том все, на следующем уроке мы познакомимся с формами.
Студенти також дивляться
HTML5 & CSS3 Поглибленний
HTML5 і CSS3 Базовий
HTML5 та CSS3 Стартовий (2018)
коментарі та обговорення