УРОКИ ВЕБ-ДИЗАЙНА САЙТА

Проверка задания 10 На уроке 15 вы получили задание: У вас должен получиться дизайн, идентичный тому, что мы уже имитировали с нашим проектом "Project-One". Мы продолжим работать в нём, а затем вы будете новые теги и селекторы применять в своём личном проекте. Сегодня мы научимся делать элементы страницы сайта "скользящими", т.е. гармонично стоящими там, где мы этого хотим, без искажения макета. 1. Флоутирование элемента Термин "флоутирование" происходит от английского глагола "float", т.е. "плыть/парить"...

Проверка задания 9 На уроке 14 вы получили задание: Вы создали проектную папку "Project-One", в которой, в свою очередь, создали две папки-раздела проекта - "resume" и "img": Переименование html-файла в редакторе Sublime Text 3: Размещение html-файла в необходимой папке, согласно заданию: Как мы видим, сверху в редакторе указан весь путь расположения нового файла - в папке "main" внутри папки "resume" проектной папки "Project-One". Также у нас есть укомплектованные тег <meta>, что гарантирует прочтение...

Проверка задания 8 На уроке 13 вы получили задание: В итоге, вы получили разнообразные варианты использования значений селекторов шрифта и цвета. На данном занятии мы научимся создавать полноформатные html-файлы, которые будут читаться в любом широко распространённом браузере одинаково. Для этого вспомним, что кроме Google Chrome мы часто используем Yandex, Internet Explorer, Mozilla Firefox, Microsoft Edge и Opera. Другие браузеры либо менее популярны, либо уже уже уходят в лета. Если мы откроем наш текущий проектный html-файл "project15...

Проверка задания 7 На уроке 12 вы получили задание: У меня получился такой результат в html-файле: На экране браузера у вас должен появиться схожий результат дизайна: У каждого получился свой дизайн, но основные принципы построения у всех сходятся, т.к. вы пользовались одними и тем же тегами и селекторами при одном плане работы. Как вы видите, я использовал принцип разбития контента не просто на два блока, а отдалив их друг от друга, чтобы контент каждого внутреннего контейнера объединялся, но не сливался в единый текст...

Проверка задания 6 На уроке 11 вы получили задание: У меня получился такой результат в html-файле: На экране браузера у вас должен появиться схожий результат дизайна: Как вы видите, у меня вторые блоки в парах, например, прижались к первым в контейнерах. Это можно легко поправить, или изменить, увеличив значение селектора left во вторых блоках <p> пар c 250 пикселей, например, на 270 пикселей. Тогда получится уже красивее: Также попробуйте сузить экран вашего браузера, и вы заметите, что внутренние контейнеры сохранили свои размеры, а вот общий контейнер "поплыл" вслед за вашим браузером...

Проверка задания 5 На уроке 10 вы получили задание: У меня получился такой результат в html-файле: На экране браузера у вас должен появиться схожий результат дизайна: Позиционирование внутренних блоков в контейнере Сегодня нашей первой задачей будет научиться упрощённо устанавливать блоки внутри контейнеров не просто вертикально друг за другом, а горизонтально как информационные блоки. Для этого наш первый контейнер <div> сделаем родственным блокам, которые помещены внутри него. Иначе браузер может воспринять блоки <p> как самостоятельные контейнеры...

Проверка задания 4 На уроке 9 вы получили задание: У меня получился такой результат в html-файле: На экране браузера у вас должен появиться схожий результат дизайна: При полном экране ваш результат будет выглядеть так: Однако важно то, что ваши теги и селекторы правильно расставлены и получили корректные характеристики. Программа Sublime Text показывает это, придавая определённые цвета каждой категории вёрстки. У меня, как вы заметили, теги HTML оцвечиваются в красный, селекторы CSS - в небесно-синий, числовые характеристики тегов и селекторов - в фиолетовый...

Проверка задания 3 На уроке 8 вы получили задание: Думаю, что это задание не вызвало у вас никаких проблем, т.к. оно практически на закрепление пройденного. А сегодня мы научимся эквилибрировать текстовым содержимым контейнеров, как самых <div>, так и внутри них <p> - абзацев. Для этого мы откроем наш html-файл "project6.html", уберём наш домашний дизайн текста, стерев поставленные теги, возвратим отступы в начальный вариант и переименуем в очередной по номеру "project7.html": Открываем новый html-файл...

Проверка задания 2 На уроке 7 вы получили своё второе задание: Я взял очередной отрывок, и вот что получилось: У вас должно быть то же самое, но со своим текстом, если вы не повторяли мой. Сегодня мы освоим первый и один из самых важных селекторов языка проектирования CSS3 - margin. Селектор отступа контейнера на экране браузера Для того, чтобы мы могли двигать созданные нами на предыдущих занятиях контейнеры <div>, используют очень простой селектор: margin - селектор CSS, который устанавливает величину отступа от каждого края контейнера...

Мы с вами создали первый информационный контейнер, используя парный тег <div>. Это начало пути! Давайте, теперь посмотрим, что можно делать с этим контейнером, используя самые простые элементы HTML. Простейшие теги HTML для дизайна текста 1. Парный тег <b> и </b> - придаёт буквам жирный шрифт. Выделим жирным шрифтом слово "первый" в нашем предложении. Заметьте, что, когда вы будете писать закрывающий тег </b> после слова, программа Sublime Text, вероятно, допишет его за вас, как только вы начнёте...

Проверка задания 1 На уроке 6 вы получили первое своём самостоятельное задание: И я привёл свой пример текста. Вот что получилось у меня: У вас должно быть то же самое, но со своим текстом, если вы не повторяли мой. Сегодня мы освоим два новых тега языка проектирования HTML5. Создание абзацев в HTML В одном контейнере <div> может быть большое количество слов, которые группируются не только в предложения, но и абзацы. Условно говоря, в одном контейнере <div> мы можем поместить даже том романа Льва...

Тег <div> - самый простой и часто употребимый блочный тег в веб-проектировании. Он и вправду самый удобный, потому что может заменить почти любой ныне и ранее использовавшийся блочный тег. Что такое блочный тег Блочный тег описывает (или формирует) некий массив информации - текст, изображение и прочее, - т.е. это своего рода контейнер для хранения информации, который можно ставить как угодно относительно других блоков, а также редактировать информацию внутри контейнера как угодно проектировщику сайта...