×
Ви дійсно бажаєте відкрити доступ до тестування за курсом HTML & CSS на 40 днів?
ВІДЕОУРОК № 9. Верстка веб-страницы
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:02:09
Просмотр готового сайта
0:03:47
Элемент DOCTYPE
0:06:26
Метатег и его кодировка
0:08:57
Стиль для тега body
0:12:00
Стиль с помощью идентификатора
0:15:41
Вложенный стиль
0:17:42
Позиционирование с помощью класса
0:19:19
Новый слой со списком
0:24:17
Стиль для списка
0:32:27
Стиль для панели меню
0:34:26
Добавление разделов
0:36:28
Стиль к разделам
0:41:21
Стиль для заголовка
0:46:35
Стиль правой панели
0:58:13
Нижняя панель
ПОКАЗАТИ ВСЕ
Рекомендована література
Титри відеоуроку
Восьмой урок, и в нем мы с вами будем делать сайт используя новые страницы и уже существующие для сайта Aquatic. Давайте разберем на данном уроке как же мы будем создавать самую главную страницу. Итак, для начала посмотрим что у нас есть в описании данного урока. У нас есть описании есть текст по созданию сайт и макет. Мы видим что нам нужно создать сайт, добавить новую страницу к существующим страницам сайта и есть резюме по тому что стоит делать. Итак, давайте перейдем к студии, посмотрим что у нас в есть наш с вами пример index.html, это уже за нас свёрстаная страничка. В принципе рекомендовано делать следующим образом. Изначально запуститься, просмотреть страницу, увидеть то как она сверстана, попытаться её самому переверстать, то есть использовать данную страничку как макет того что вам стоит сделать. Итак, посмотрим что нас тут есть в данном index.html. Вернемся в студию и видим что у нас есть текстовое содержимое и есть файл, который мы отдельно подключаем на седьмой строке, это наши с вами стили. И в данных стилях мы будем задавать тот как нужно отображать наш сайт. Давайте зайдем в стили и посмотрим, у нас их здесь достаточно, их здесь 250 строк. Сейчас мы попробуем их всех перебрать. Давайте посмотрим как создавалась наша страница. Для начала у нас есть тег <Body> . то есть начнем просмотр визуальной части, не будем рассматривать заголовок и метатеги, здесь и так все понятно. Просто задали кодировку и задали заголовок страницы. Итак, в теге <Body> мы указали внутренние и внешние отступы. Давайте что бы для наглядности работать с данным примером сделаем следующее: создадим новый файл .css вот таким вот образом с помощью студии, назвав его stylesheet.css и в него перенесем все правила поочередно переподключив в файле index.htm наш с вами стиль. Мы с вами ссылались на style.css stylesheet.css; вот мы добавляем этот файли на седьмой строке удаляем старую ссылку. Как только запустимся и видим что наш сайт «разъехался» потому что осталась только структура а наши с вами стили пусты. И давайте посмотрим что же мы использовали в style.css. В стилях мы указали что отступы мы обнуляем для Body. Давайте посмотрим, запустимся и видим что у нас есть небольшие отступы у элементов от верха и левого края страницы и мы делаем следующее: мы в Body пишем что padding:0px; margin:0px; Итак, после этого мы видим что используем фон, а точнее в виде фона мы используем картинку, это просто градиентная полоска, которая из белого цвета к низу переходит к голубому. Давайте и мы её будем использовать для нашего с вами решения. Вот мы используем соответствующую полочку, говорим что она у нас будет отступать сверху и слева по 0рх, повторяться будет по Х и часть оставшейся заливки, которой не зальет наш элемент будет белым. Итак, давайте тогда еще укажем цвет текста для нашего с вами случая для сайта AQUATIC. И этот цвет текста будет для всех элементов в теге <body>, которые мы не переопределим к другому цвету. То есть цвет будет вот такой вот серый, студия нам подсказывает что это будет за hex-код и сімейство шрифтов у него будет arial, а если arial не будет найден то helvetica или sans-serif; Давайте это продублируем в наших с вами стилях и посмотрим какие изменения. Вот мы запустились и видим что вот уже есть фон для нашего body и вот таким вот образом мы еще указали цвет шрифта, вот он стал серым, для всего тега body. Давайте продолжим строить наш и посмотрим что было дальше. После этого мы создали универсальный селектор для множества элементов на странице: для div, p, ul, h1, h2, h3, h4, h5, img и для них мы сбросили отступы, есть более универсальный способ это сделать, мы можем просто поставить звездочку «*» и соответственно после * написать эти правила. Звездочка применит для всего на странице эти правила. Так что можно использовать такой вариант вместо того, который представлен у нас в примерах. После этого что мы делаем? После этого мы для Ul расбрасываем margin-ы. Маркеров в подстановке у нас не будет. Давайте и это продублируем. Пишем: Ul и для него указываем: margin:0px; padding:0px; После этого мы будем создавать класс, который будет растягивать наш текст по ширине, это класс .justify . Очень удобная практика, когда вам нужно выравнивать текст по ширине, по высоте, по какому либо краю, задавать цвет, например создать класс .blue, который будет задавать цвет для вашего текста, и вам будет достаточно добавить класс для любого элемента, даже если у этого элемента уже есть классы, и он применит соответствующие стили, по этому давайте создадим класс .justify и зададим для него выравнивание текста по ширине. После этого мы будем размечать области наших элементов, то есть раньше мы задавали общие правила для элементов тегов а теперь мы уже будем их именовать и указывать как же они должны себя вести более индивидуально. То есть они будут не такие абстрактные. Итак, мы с вами будем обращаться к #topPan. Top pan (верхняя панель) – скорей всего это имел ввиду автор когда создавал этот ID. И на 11й строке мы с вами видим наш #topPan, он начинается на 11й и заканчивается на 15й, в нем у нас есть ссылка, картинка логотип и класс .caption, но мы пока что разговариваем о #topPan. Итак, что мы делаем? Мы задаем ему размеры: 778рх х 65рх, задаем ему фон (видим какой) и так же указываем цвет шрифта, позиционирование и говорим что он у нас будет отступать от левого и правого края по автомату, то есть будет находиться по центру. Давайте данное свойство перезапишем в stylesheet.css и посмотрим что же произойдет. Итак, мы обращаемся к элементу по #topPan. Кстати, при обращении к ID очень важно соблюдать реестр. Указываем ширину 778рх и ширину 65рх. После этого будем задавать background, давайте посмотрим что же у нас за файл отвечает за фон. Это файл topbg.jpg, давайте найдем этот файл. Мы видим файл topbg.jpg и нам с вами нужно его добавить в наш с вами background. Мы его перетягиваем, видим что студия сама генерирует наш тег, нам не нужно писать то что я до этого писал. Единственное что нам нужно уточнить: мы говорим что это изображение не нужно повторять и заполнять ту часть, которую не залил фон представить белым. Итак, после этого мы должны будем указать цвет. Цвет будет со значениями : #828282, это будет сероватый цвет, близкий к серому, давайте его продублируем. Вот студия нам показывает какой это цвет будет. После этого мы используем position:relative; margin: 0 auto; Поскольку ноль является значением, которое понятно интерпретатору и пикселями или без, так что приставку рх вы можете не писать. Итак, запустимся и посмотрим что получилось. Напоминаю, что запускаться нужно с файла index.htm, если мы запустимся из файла .css то мы увидим что у нас просто будет лист наших с вами элементов. Запускаемся и видим, что наш с вами сайт начинает обретать какие то черты, то есть по тихоньку видим как он меняется и как работают те свойства, которые мы применяем. Возвращаемся к файлу со стилями и смотрим что же в нем мы делали дальше. Мы обращались к картинке с классом #logo, давайте посмотрим есть ли у нас эта картинка. Да, есть у нас такая картинка на 13й строке, у нее класс #logo, есть ссылка на изображение logo.gif, сейчас мы найдем его у нас в папке, это файл Aquatic. И задаем alt width height для данной картинки, то есть если мы здесь использовали атрибуты то можем не обращаться к нашим с вами стилям. По этому переписуя данный пример мы можем просто указать позицию absolute и отступы по верхнему и левому краю (12рх 235рх). Мы пишем для нашего #topPan , я пишу что хочу обратится к картинке с классом (которого пока что нету) .logo. Потом обращаемся к классу .logo и в этом классе задаем position: absolute; и отступ сверху top:12px и слева left:235px. Давайте запустимся и посмотрим получилось ли у нас обратится к изображению. И мы видим, что действительно его сдвинули на 235рх от левого края. Давайте посмотрим что мы делали дальше. Дальше в наших стилях мы с вами обращались к параграфу с классом .caption. Давайте посмотрим есть ли у нас такой параграф. Конечно есть, он находится на строке 14, в нем находиться текстовое поле. И что же мы для него делали? Мы задали для него ширину 200 пикселей, задали фон белый, задали цвет шрифта, позиционирование абсолют и задали отступы (сверху рх и слева 235рх). Давайте продублируем это в наших стилях. И делаем следующее: мы указываем #topPan, обращаемся к параграфу с классом .caption и соответственно в этом классе мы будем делать следующее: будем задавать ширину (width:200px), фон (background:white;) далее помним что задавали position:absolute и отступы сверху top:43px; и слева 235px; Итак, что еще стоит ответить, мы использовали не только те свойства которые написали но еще и цве шрифта. Важно что бы текст был такой же как указано цветом на 23й строке и указываем его #828282 . Итак, после этого мы обращаемся к #headerPan. Давайте посмотрим где оно у нас в верстке. Мы видим что в верстке этот элемент находиться на 16й строке, так же в нем есть список с классом .leftmenu , это наш немаркированный список, так же в нем есть класс .clients для последнего li и в нем мы указываем ссылку якорь которой ведет на перезагрухку данной страницы для всех страничек кроме странички home.,то есь нашего элемента списка. Итак, давайте к стилям, так же для #headerPan мы задаем ширину и высоту, так же задаем фон, вот такой вот интересный, так же используем positiob:relative, margin и padding . Давайте это все продублируем для нашего #headerPan. Итак, мы с вами обращаемся к id, обязательно нужно указывать решетку и пишем headerPan, после этого мы должны задать ширину для данного элемента и высоту. Давайте посмотрим какая ширина и высота (686 на 153)рх. После этого мы задаем фон, поскольку фон мы уже задавали способами студии и просматривали как это делается поэтому просто скопируем отступы. Обратно таки они по умолчанию, мы используем отступы по центру (0 auto) и padding-и. Padding-и более пользовательские в настройке мы можем изменить на несколько пикселей и посмотреть что у нас особо ничего не поменялось за счет того, что мы добавили по высоте или снизу нашего элемента небольшой отступ расширив его. Итак, давайте запустим наш пример и посмотрим появились ли какие то изменения. Действительно, мы видим, появились изменения появились, то есть наш список принял позицию, которую и должен был принимать, так же мы видим что применился background, который изменил нашу страничку. Итак, что мы будем дальше делать в наших стилях. Будем описывать класс .leftmenu поскольку он у нас есть. И так же мы будем обращаться к классу .clients и прочим элементам. Давайте посмотрим что мы здесь делаем. Давайте зададим ширину .leftmenu. Итак, давайте это сделаем и обсудим почему мы ее задаем так же как задавали в наших примерах. Итак мы обращаемся к ul, в нашем #headerPan, который на странице может быть только один мы ищем ul мало того, не какой то простой ul а с классом, имя класса .leftmenu. #headerpan ul.leftmenu . Что нам дает такое подход. Если бы мы написали просто leftmenu, то оно бы применилось ко всем leftmenu на странице, а вот с такой вот записью как на 63 строке мы ограничили наш поиск #headerPan и именно к ul мы обращаемся и задаем ширину для данного класса (width: 87px;) Итак, что мы делаем дальше. Мы будем задавать ширину и высоту для Li и приманять к ним рамку, давайте это сделаем. Итак, мы обращаемся к #headerPan, обращаемся к ul, к leftmenu и к li в нем. Width:87px, heught:22px. После этого мы указываем рамочку border: 1px solid, так же нужно посмотреть какой у нас здесь код цвета, мы его скопируем и будем использовть данный цвет. Видим что мы задали то как должен выглядеть наш список, ширину и высоту и рамки для элементов списка. Вот мы увидели то как должны выглядеть наши рамки, но опять-таки, если вернуть к изначальному макету мы видим что они были не такими. Поэтому давайте вернемся к нашему коду. Мы указали border, а нам нужна рамка для низа элемента, по этому border-bottom. Давайте так же изменим форму нашей рамки, мы писали solid а нам была представлена dashed, Давайте посмотрим что получилось. И мы видим что таким образом у нас получилось отобразить наше меню так, как было в макете. Итак, давайте посмотрим что мы дальше использовали. В стилях на 73й строке обращение к селекторам с ссылками, которые находятся в li в классе .leftmenu для ul, который в свою очередь находиться в #headerPan. То есть, таким образом мы очень точно задали селектор, конкретно для этих селекторов. Давайте посмотрим что мы здесь будем делать. Сначала обратимся к #headerPan, к ul, к .leftmenu, к li и к ссылке, то есть вот такой вот длинный селектор : #headerPan ul.leftmenu li a. Но он хорош тем что мы можем очень точно задать элемент, котору мы применяем эти стили и точно применятся эти свойства, которые мы задали этим элементам, то есть уточнить выборку нашу. Итак, что мы здесь делаем, мы задаем ширину и высоту (72 и 22)рх. После этого мы смотрим, что мы задавали не только высоту и ширину а еще и фон и использовали свойство display:block; После того как задавали высоту и ширину задаем display:block;. Итак, мы задали фон, как раз как вы понимаете, если посмотреть на макет то мы сейчас будем пытаться задать для наших ссылок фон, который будет выглядеть в виде квадрата и видим что это вот действительно квадрат. Что же мы здесь будем делать? Итак, смотрите. Давайте запустимся и посмотрим что у нас здесь получилось. У нас получилось что наши элементы все равно с маркером и фон налез на наш текст. Почему же это произошло? Потому что наш элемент ссылка воспринимается как строчный элемент, то есть как элемент типа <span> , в котором мы не могли указывать высоту и ширину, также у нас были проблемы с margin и так далее. Мы бы хотели что бы ссылка вела себя как <Div>, как блочный элемент, поэтому мы используем свойство display, которое еще не было рассмотрено, но которое будет рассмотрено на курсе java script advanced и ему указываем display:block; Давайте посмотрим какие изменения произошли. Пока что ничего не произошло. Но как только мы применим все наши стили, используя свойство line-height Давайте сделаем это, зададим наш цвет для текста. Цвет у нас был следующий, копируем его, вставляем; Так же мы будем использовать здесь свойство text-decoration; для того что бы убрать у ссылок нижнее подчеркивание. Давайте это проверим. Видим что у ссылок пропало нижнее подчеркивание. Так же нам еще стоит задать внутренние свойства и задать значения, которые будут в примере. Запускаемся и видим как у нас изменились значения. Что еще стоит сделать? Мы научились задавать ширину и высоту элемента и использовать её и так же можем использовать свойтсво line-height; Оно измеряет высоту блока, берет значение которое используем мы и выравнивает текст по высоте значения, которое указано в свойстве line-height То есть если мы укажем значение line-height равным значению нашего height, свойства нашей высоты то такой текст будет выровнен по центру, давайте попробуем это сделать и посмотрим зачем мы все таки использовали display:block; Указываем значения line-height: 22рх; Вот таким образом мы перебрали наши стили, давайте запустимся и посмотрим что же у нас произошло и видим что текст выровнялся по центру блока. Видим что у нас есть маркеры, маркеры мы не убрали у нас на строке 12. Для Ul мы должны указать list-style-type:none; И таким образом мы убираем маркеры которые были здесь лишними. Итак, давайте посмотрим на каком этапе у нас готовоность сайта. Мы видим, что если вернуться к примеру, который был изначально, то мы практически сделали header. А сейчас давайте сделаем пункт меню. Итак, мы видим что для пункта меню мы будем использовать другую картинку, которая будет подменять наш с вами маркер и будем обращаться к свойству hover, то есть наш псевдокласс. Это hover который мы с вами проходили и как же мы будем обращаться к нему. Итак, как же будет выглядеть наш селектор. Итак, мы обращаемся к #headerPan ul.leftmenu li a:hover и для данного псевдокласса мы укажем свойства. Итак, как вы видите мы используем практически те же свойства, которые у нас были, только добавляем другую ссылку для background. Итак, копируем ссылку и переносим те свойства, которые нам нужны для работы hover-а. И давайте запустимся и посмотрим получилось ли у нас это воссоздать. Видим что получилось и у нас меню работает так же само как и в нашем примере изначально. Вот если к нему перейти то мы видим что так же само работало меня. Когда возвращаемся к верстке то видим, что мы еще не писали класс .clients. Что же для данного класса мы будем указывать. Мы будем указывать что у него нету рамки. Для чего это нужно? Давайте запустимся и посмотрим как выглядит наш шаблон. Мы видим что у нас нижнее подчеркивание для ссылки about us, но опять таки если просмотреть наш с вами макет, то у нас его нету. То есть если нам нужно работать по макету и дизайнер представил такой вот макет то нам нужно убрать нижнюю рамку. Как же это сделать? Очень просто. Мы обращаемся к нашему классу .clients и не задам ему рамки, давайте это сделаем. Итак, мы обращаемся к #headerPan ul.leftmenu li.clients и указываем что нам не нужны нижняя рамка. И давайте запустися и посмотрим что нижняя рамка пропала. Итак, давайте вернемся к нашим стилям и увидим что у нас теперь есть возможность обращаться к div-у с #bodyPan. Мы видим что к #bodyPan мы создаем div c #leftPan, далее создаем заголовок на 26й строке H2, создаем список с ссылками, которые будут вести нас на различные рыбы, так же после этого мы создаем еще один заголовок и еще один список, это все будет в левой панеле. Далее мы создаем div с #rightPan, создаем параграф с классом more и ссылку. Далее будем использовать параграф с классом .justify, то есть текст в нем будет выровнен по ширине, так же мы создаем картинку, которую будем выравнивать по левому краю и задаем ей alt и title . Далее мы создаем еще несколько параграфов с классом more и с классом justify размещая их в правом блоке и после этого мы дойдем к div-у с id=”footermainPan”. Итак, давайте на этом диве остановимся и разберем все таки какие классы и какие ID мы применяли. Начем с #bodyPan. #bodyPan это тело нашего с вами сайта, то есть до этого у нас с вами был заголовок а сейчас будет тело сайта. Итак, что мы будем делать с данным дивом. Мы будем задавать ему ширину, фон, position: relative, указывать то, что он будет находиться по центру и будем задавать внутренние отступы. Итак, давайте зададим эти свойства. Итак, мы с вами обращаемся к #bodyPan и зададим наши свойства. Мы изначально задавали ширину. Ширина данного элемента будет 686рх. После этого мы использовали background, давайте его скопируем, указывали position: relative, давайте его скопируем, указывали что данный элемент будет выровнен по центру по горизонтали и задавали внутренние отступы. Отступы были следующие : 22рх это внутренний сверху, справа и снизу не будет а слева будет 92рх. Итак, давайте запустимся и посмотрим что у нас произойдет. Мы видим что наши с вами элементы приняли соответствующую позицию, были заданы внутренние отступы. И давайте вернемся к верстке. Мы видим что у нас есть блок с #leftPan, вот мы его с вами и будем изменять. Видим что у него есть 114рх ширины и отступ по левому краю, так и пишем соответственно для нашего #leftPan и задаем ширину 114рх и говорим что он будет обтекаем по левому краю, то есть к нему по левому краю будут прижиматься элементы, то есть наша правая часть странички. Давайте вернемся и увидим что действительно это же у нас и произошло. Сейчас давайте напомним себе каким же образом должна выглядеть наша страничка, просмотрим изначальный макет и видим что у нас все таки у нас здесь должен быть список красивый. Этого мы сейчас и будем добиваться. Итак, возвращаемся к нашей с вами верстке. Видим список и явно будем менять список и заголовки, которые у нас есть. Начнем конечно с заголовка. Вот у нас есть здесь H2, мы для него будем задавать ширину высоту, фон, цвет текста, будем использовать высоту нашего текста 18рх и line-height, в которую будем вписывать этот H2, она как раз совпадает со всей высотой блока, то есть в эту высоту 34рх будут вписаны буквы размером 18рх, такими, который создают визуальные впечатления будто элемент находиться по центру по вертикали. Давайте зададим для нашего H2 стили, пишем таким вот образом leftPan h2. Мы задали для него ширину и высоту (114*34)рх. Далее указываем фон и цвет шрифта, давайте скопируем эти значения что бы не запоминать hex коды. Для фона конечно легко заполнить background:#fff; что равно белому цвету а вот для цвета текста не так просто и давайте зададим размер шрифта, после которого зададим ширину линии в которую нужно вписать этот шрифт размер которого будет 18рх, а высота блока будет равна высоте в которую нужно будет вписать текст. Давайте запустимся и посмотрим что же у нас изменилось. Видим что таким образом наш текст принял более интересное форматирование, видим что Fishes, Plants это наш H2. Итак, давайте посмотрим что же мы будем применять для нашего ul и li. Для ul и li мы будем задавать ширину и восоту, сделаем это следующим образом. Мы напишем что #leftPan ul { у нас будет шириной 114рх а #leftPan li, то есть элементы которые находятся в нашем немаркированном списке шириной будут 114рх и высотой 34рх. Давайте запустим данный пример и увидим что обратно-таки применились наши стили для ul и li. Мы еще можем обратится к нашей ссылке. К ссылке мы можем обращаться как к ul или меню левее, то есть то что у нас было заранее. Мы задавали для нее background в качестве маркера. Подстановка таким образом не для элемента списка а для ссылки. Будем задавать ширину, высоту и прочие свойства. Давайте начнем. Для начала будем обращаться к селектору #leftPan ul li a и будем указывать следующие атрибуты. Ширина будет 102рх и высоту 24рх. Так же нужно на секундочку остановиться и сказать что если вам нужно измерять какую то ширину или высоту то вы это можете сделать с помощью средств которые есть в Mozilla. Допустим вы можете выбрать в средствах которые есть для веб-разработчиков, например линейка, которая измеряет размеры элементов, можно посмотреть какие вам нужны отступы и какие нужно использовать значения. Можно так же использовать стандартные средство для разработчиков, ним можно рассматривать шрифты, все стили, которые применяются и отдельные правила те которые мы применяли, так же их можно отменить. Отменив парочку можно увидеть что мало что меняется для наших ссылок. Окей, давайте тогда обратно перейдем к верстке и посмотрим что же мы должны задать после этого. После этого мы должны задать фон, это будет картинка, которая будет находиться рядом с текстом и после картинки мы обязательно указываем что будем использовать display: block; для элемента. И так же указываем что будем использовать цвет шрифта, который мы уже использовали выше на 106 строке. И далее мы задаем следующие настройки. Мы убираем подчеркивание у ссылок, задаем высоту линий в которых будет вписан текст и внутренние отступы. Давайте это сделаем. Убирать подчеркивание можно с помощью text-decoration: none; еще задаем внутренние отступы: 0 0 0 12рх. И давайте запустимся и посмотрим что у нас получилось. У нас получился список, примерно такой же как в нашем макете. Давайте вспомним что так что не так, давайте вспомним какие то свойства. Видим что в принципе у нас все получилось. Единственное что отличается это наше с вами наведение. То есть когда мы наводимся на элементы то не видим изменения квадратов слева от текста. Как мы уже знает это делает свойство hover. Так что можем смело обращаться к нашему свойству hover. Пишем hover и таким вот образом будем работать на наведение. Нам нужно будет скопировать их кода в файле style.css и посмотреть какой стиль нужно примеменять к ссылкам и давайте запустимся и посмотрим. Вот мы указали его и видим что он очень хорошо работает, единственное что мы можем указать как мы это и делали в примере что у нас не должно быть подчеркивания текста и цвет текста должен быть таким же как указано выше. Но мы этого можем и не делать но код все равно у нас должен отработать. Итак, переходим дальше и будем говорить о правой панеле, то есть это #rightPan, к которому мы обращаемся и соответственно к этому id мы будем применять следующие свойства. Мы с вами сказали что ширина у него будет 500рх, так же после этого мы укажем обтекание по левому краю. Еще в стилях видим что мы будем задавать рамку (скопируем ее). То есть эта рамка будет полем по левому краю, она будет цельной 1рх. Эта рамка есть у нас в дизайне, давайте посмотрим. Видим что дана рамка есть в макете и выглядит таким образом мы добились ее у себя в стилях. И еще мы задаем внутренние и внешние отступы. Давайте из зададим. У нас внешние отступы задаются с помощью margin, указываем 28рх 0 0; Внутренние отступы с помощью padding: 30px 0; Далее мы будем для параграфов, которые в #rightPan , они отступают снизу по внутреннему отступу 10рх. Итак, далее мы будем обращаться к #rightPan .more. Это картинка, которая у нас меняется, такая себе анимация. Изначально мы задаем для данного класса наши с вами размеры. Как видите, вы очень часто будете обращаться к записи width и height, то есть будете задавать ширину и высоту, ее приходится задавать практически для всего. Итак, после того как вы зададите ширину и высоту а они у нас (582рх на 25рх) вы можете задать следующее, вы можете задать картинку, то есть фон. Мы ее копируем, вставляем и говорим что каждый такой элемент так же у нас будет обтекаем по левому краю. И последнее что нам осталось указать это внутренние отступы (0 0 0 20рх 0). Итак, давайте запустимся и посмотрим что у нас на данный момент готово. Мы видим что у нас появились наши параграфы, так же появились некие картинки, которые здесь присутствовали. Что еще стоит указать? То что мы с вами обратились всего то пока что только к нашему классу .more в #rightPan-e, он у нас еще и менялся этот класс .more на другую картинку, у нас был hover, мы будем переключать. И кроме hover-а мы еще обращались к ссылке. Давайте посмотрим на свойства, которые задавали ссылкам и на сами ссылки. Итак, мы делаем следующее, обращаемся к нашей ссылке #rightPan p.more a { . Мы щем ссылку в параграфе с классом .more. Далее указываем ширину и высоту (92х21)рх. После этого указываем то какого фона у нас должен быть элемент, наша ссылка. Так же указываем что ссылка должна вести себя как блочный элемент, например как Div. Мы можем обратится к ширине, высоте, задать выравнивание и самое главное мы можем задать line-height, так же задаем цвет шрифта, который находиться в данной ссылке и как мы говорили будем задавать высоту линии. Высота линии это достаточно простое значение, будет задавать значение высоты нашего элемента, нашей ссылки. После этого мы так же скажем что весь текст, который находиться у нас в ссылке будет большим, то есть используем свойство text-transforms и задаем ему значение uppercase и уберем подчеркивание в ссылке text-decoration:none; Что мы еще с вами будем делать? Мы будем задавать отступы, давайте их скопируем, внутренние и внешние отступы. Ширина высота и отступы это наверное три основные блока, которые вы будете использовать при построении. Так же будет работать с hover который будет выступать в роле фонового изображения для нашей с вами ссылки, для нашего параграфа с классом .more.
Что мы здесь будем делать? Мы будем работать на событие hover, пишем псевдокласс hover и в нем будем обращаться как раз к background. И видим что при таком вот обращении мы с вами можем менять изображение. И давайте запустимся и псомтотрим что же у нас получилось. Мы видим что у нас получились соответствующие блоки с линей и анимацией изменяющихся кнопок. И давайте вернемся к нашому примеру и вернемся к тому на чем мы остановились, на #footermailPan, это подвал. У нас был заголовок, тело а теперь нижняя часть - подвал. У нас есть #footermailPan и класс .copyright, который будет нести в себе копирайт нашего сайта и давайте же посмотрим какие стили мы для данных элементов заданы. Итак, для #footermailPan мы задали следующие стили. Давайте сначала обратимся к этому Id=”footermailPan” и в нем мы зададим высоту элемента (как вы видите высота у нас 103рх) и заодно скопируем фон. После этого мы должны задать цвет шрифта, как вы видите за это отвечает свойство color. После этого мы должны задать семейство шрифта и размер шрифта. И после мы указываем position: relative , выравниваем по центру наш элемент, очищам его от выравниваний, что бы он не притягивался блоку справа. То есть мы сделали left bar, right bar. Float: left мы очищаем. Итак, давайте зададим оставшиеся свойства: position: relative, после укажем что мы хотим избавиться от float-ов. Так же укажем что мы хотим распологать по центру наши элементы и последний момент который нам осталось добавить это внутренние отступы. Давайте посмотрим что у нас получилось. Мы видим что footer у нас уже внизу, а не как до этого он находился справа и прижимался к элементам. То есть практически мы сделали то что было в нашем с вами макете. Единственное что осталось это красиво выровнять список и поставить копирайт. Давайте этим займемся. Нам нужно обратится к #footerPan и задать ширину и выравнивание по центру. Итак, давайте обратимся к этому элементу и укажем ширину и так же укажем что он у нас выровнен по центру. Обновляемся в нашем примере. И видим что таким образом мы уже прижали наши элементы ближе к центру. То есть мы можем увеличить/уменьшить картинку и увидеть что изображение стало более похоже на наш дизайн. Элементы находятся в тех местах, в которых должны быть. Так же укажем : position: relative, данный элемент не будет изменять верстку и соответственно находиться на новом слое. Он будет наследовать верстку в предыдущем слое, то есть слои не разъедутся. После того как мы задали #footerPan мы будем задавть стили для нашего ul который в нем находиться. Давайте обратимся к ul, который находится в footerPan. Это происходит следующим образом: мы просто пишем перед ul - #footerPan и задаем ему ширину 608рх, указываем позицию по центру. И так же говорим что наш с вами элемент будет высотой 20рх, position: relative; Запускаемся и видим что текс выровнен как раз по линии, на которой находится начало контента сайта. Итак, давайте вернемся к нашему с вами примеру и посмотрим что же мы делали дальше. А дальше обращались к li и говорили что они выровнены по левому краю. выставим их в ряд. Запускаемся и видим что теперь наши элементы красиво находятся друг за другом. Что будем делать после этого? После этого будем обращаться к ссылкам. Будем задавать для них цвет и фон. Давайте сразу скопируем эти два стиля и обратимся к нашим #footerPan li a и зададим стили, цвет и фон. Далее мы еще должны указать внутренние отступы. Указываем 0 10рх 0. Далее мы работает со следующими значениями. Мы указываем размер шрифта 13рх и указываем то что у нас данные ссылки не будут подчеркнуты. Далее, указываем следующие: при наведении на hover событие у нас ссылки будут подчеркиваться. Давайте это укажем. Обращаемся к #footerPan li a и в этой ссылке работаем на событие hover и используем text-decoration: under-line; Давайте запустимся и увидим что нам осталось сделать всего то наш copyright, сделать так что бы он быглядел так же как в нашем примере с которого мы начинали. Вот видим «copyright», он выглядит красиво. А у нас он немного съехал. Давайте исправим это. Давайте посмотрим как это делали в стилях. Мы обращались к параграфу с классом .copyright в наших стилях. Обращаемся к #footerPan p.copuright и таким образом задаем ширину и внутренние отступы. Ширина как мы видим у него будет 250рх а внешние отступы будут 10рх 0 0 93рх. Итак, давайте запустимся и посмотрим что наш макет в принципе готов. Мы видим что таким образом отображается макет, который мы с вами создали и вот исходный вариант данного макета. Итак, это все по данному уроку. Предлогаю вам, если вы смотрели этот урок и одновременно перебирали стили, создать парочку страничек, заполнить наши пункты меню или создать еще одну страничку. На этом данный урок можно считать законченным.
Студенти також дивляться
HTML5 & CSS3 Поглибленний
HTML5 і CSS3 Базовий
HTML5 та CSS3 Стартовий (2018)
коментарі та обговорення