Проверка задания 9
На уроке 14 вы получили задание:
- Создать отдельную проектную папку "Project-One".
- Внутри данной проектной папки создать папки "resume" и "img".
- Переименовать наш новый html-файл "project16.html" в "main" и поместить в папку "resume".
- Разместить на странице текст резюме, разбив его внутри на логические абзацы (<p>) и выделив в тексте отдельные подзаголовки.
Вы создали проектную папку "Project-One", в которой, в свою очередь, создали две папки-раздела проекта - "resume" и "img":
Переименование html-файла в редакторе Sublime Text 3:
Размещение html-файла в необходимой папке, согласно заданию:
Как мы видим, сверху в редакторе указан весь путь расположения нового файла - в папке "main" внутри папки "resume" проектной папки "Project-One". Также у нас есть укомплектованные тег <meta>, что гарантирует прочтение контента всеми браузерами, и тег <link>, который гарантирует корректное прочтение браузерами наших стилей CSS.
Теперь рассмотрим, как необходимо было разместить текстовой контент задания в форме резюме.
1. Сначала необходимо вспомнить, что в виртуальной вёрстке действует принцип матрёшки, поэтому мы должны были создать между разделами <header> и <footer> "тела" html-страницы общий (генеральный) контейнер <div>, внутри которого будет размещён контент всей страницы.
2. Назначаем этому контейнеру класс и имя "resume", чтобы в дальнейшем оперировать уже только именем:
3. Согласно принципу матрёшки, раздвигаем теги <div>, поставив между ними курсор и кликнув на клавиатуре Enter. Мы получаем новую внутреннюю строку, сдвинутую вправо:
И такое смещение будет всегда, когда мы захотим внутри одного контейнера разместить другой или блок. Если же нам необходимо будет дополнить контент независимым контейнером ниже, то и создавать его мы будем также под данным контейнером на равных, как делали ранее.
4. Далее нам необходимо разделить текст резюме на логические блоки, чтобы не плодить для каждого предложения отдельные контейнеры, а ограничиться где-то внутренними блоками.
Логический блок 1:
Иванова Наталья Сергеевна
33 года (родилась 14 марта 1987), высшее образование, состоит в браке, есть дети
Место проживания: Москва, Преображенская площадь, д. 16.
Гражданство: Россия
Опыт работы: 10 лет и 3 месяца
Назовём логический контейнер <div> именем "general" и каждую информационную строку заключим в блок <p>:
Логический блок 2:
Стаж:
Май 2014 – работает сейчас, 5 лет и 11 месяцев
Делопроизводитель
ООО "Мир школьников", Москва
Один из самых крупных магазинов канцелярских товаров и школьных принадлежностей в Москве (500 кв. м.). Больше 10 000 клиентов в день. 150 сотрудников и более 47 тысяч наименований
Сентябрь 2005 – январь 2010
Оператор ПК
ГБОУ школа №1076, Москва
Средняя общеобразовательная школа, педагогический коллектив 25 человек, 600 учеников
Назовём логический контейнер <div> именем "work", подзаголовок и каждое место работы заключим в контейнеры <div> под порядковыми именами "work1", "work2" и "work3", а внутри каждую информационную строку заключим в блок <p>:
Логический блок 3:
Образование:
ВУЗ: Московский государственный гуманитарный университет имени М.А. Шолохова
Факультет: Документоведение и архивоведение
Специальность: Специалист по документообороту
Назовём логический контейнер <div> краткое именем "edu" (от англ. education - образование) внутри которого создадим два контейнера <div> с расширением имени "edu1" и "edu2", каждую информационную строку контейнера "edu2" заключим в блок <p>:
Логический блок 4:
Знания и навыки:
Профессиональные навыки:
Грамотная устная и письменная речь
Хорошее знание офисных программ: Word, Excel, 1С
Организаторские способности:
Навыки приёма входящих звонков, регистрации документов
Опыт работы с большим объемом документов - 150 ежедневно
Опыт работы в системе электронного документооборота, знание ЕМИАС
Знание стандартов делопроизводства и составления документов
Умение из большого объёма информации выделять главное
Здесь у нас явно прослеживается два логических подблока - "Профессиональные навыки" и "Организаторские способности", поэтому мы создадим общий контейнер <div> под именем "skills", а внутри разделим на три контейнера второго уровня <div> под именами "skills1" для заголовка, а также "skills2" и "skills3" для логических подблоков, где внутри каждый из элементов заключим в блок <p>:
Логический блок 5:
Дополнительные сведения:
Усидчивость, ответственность и внимательность позволяют мне качественно работать с документами любого объёма и содержания.
Последний логический блок контента достаточно простой по структуре, поэтому мы создадим контейнер <div> под именем "add" (от англ. additional - дополнительное), а внутри него два контейнера <div> второго уровня под именами "add1" и "add2". Этого будет достаточно:
Проверяем, что и как получилось в браузере Google Chrome. Убеждаемся, что весь контент чётко расположился согласно иерархии наших контейнеров и блоков. Естественно, мы не сверяем по контейнерам, а сравниваем с тем, что имеем в заготовке в файле Word или на листе бумаги.
5. Выделение заголовков и подзаголовков
Теперь можно при желании выделить основные части, обозначив жирным шрифтом заголовки и подзаголовки. Для этого можно использовать парный тег <b>, если выделяемый текст является частью контента одного контейнера или блока, или стиль CSS "font-weight" для текста, если мы выделяем весь контент контейнера или блока, что будет абсолютно корректным.
Где мы можем использовать стили CSS в данном коде html-страницы:
<p style="font-weight: bold;">Иванова Наталья Сергеевна</p>
<div class="work1" style="font-weight: bold;">Стаж:</div>
<div class="edu1" style="font-weight: bold;">Образование:</div>
<div class="skills1" style="font-weight: bold;">Знания и навыки:</div>
<p style="font-weight: bold;">Профессиональные навыки:</p>
<p style="font-weight: bold;">Организаторские способности:</p>
<div class="add1" style="font-weight: bold;">Дополнительные сведения:</div>
Где мы вынуждены использовать тег <b> в данном коде html-страницы:
<p><b>Место проживания:</b> Москва, Преображенская площадь, д. 6.</p>
<p><b>Гражданство:</b> Россия</p>
<p><b>Опыт работы:</b> 10 лет и 3 месяца</p>
<p><b>ВУЗ:</b> Московский государственный гуманитарный университет имени М.А. Шолохова</p>
<p><b>Факультет:</b> Документоведение и архивоведение</p>
<p><b>Специальность:</b> Специалист по документообороту</p>
<p><b>Хорошее знание офисных программ:</b> Word, Excel, 1С</p>
Таким образом, у нас получился следующий код html-страницы:
Мы получили новый результат в браузере:
6. Логические курсивные выделения контента
Размещая словесно-цифровой контент на странице сайта, не стоит увлекаться излишними акцентированными выделениями каких-либо его частей. Однако, иногда это требуется. В данном резюме мы можем выделить курсивом даты работы, чтобы тем самым отделить характеристики различных периодов трудового стажа. Так как мы предусмотрительно заключили все отдельные информационные элементы в отдельные блоки, то будем использовать селектор CSS "font-style" для этого:
<p style="font-style: italic;">Май 2014 – работает сейчас, 5 лет и 11 месяцев</p>
<p style="font-style: italic;">Сентябрь 2005 – январь 2010</p>
Таким образом, код внутри контейнеров "work2" и "work3" дополнится:
Следовательно, сохраняем добавления, обновляем затем браузер и проверяем изменения:
Мы корректно прописали стили курсива, поэтому в браузере он отразился правильно.
7. Пространственное выделение/разделение логических блоков
Мы поработали с внешним видом контента. Теперь необходимо выделить логические блоки визуально, потому что на данный момент вся информация у нас представлена схематично, строками с равными межстрочными диапазонами.
Рисовать рамки границ контейнеров и блоков - это нечастый случай. Обычно достаточно сделать акцентуированные межстрочные интервалы. Мы так и сделаем: отделим логические блоки в виде контейнеров <div> внешними нижними отступами, например, по 30 пикселей.
Запись селектора нижнего отступа в 30 пикселей:
style="margin-bottom: 30px;"
Пример записи селектора нижнего отступа в 30 пикселей в html-коде страницы резюме в контейнере "general":
Теперь также пишем для других контейнеров ТОЛЬКО логических блоков резюме - "work", "edu", "skills" и "add". Сохраняем, обновляем браузер и проверяем результат:
Логические блоки сдвинулись вниз, что говорит о корректном написании нами стилей CSS. В дальнейшем вы можете экспериментировать с межблочными расстояниями в своих проектах так, как вам будет представляться более красивым или эргономичным.
А теперь продвинемся дальше в наших умениях создавать веб-страницы.
1. Постановка иллюстрации на веб-страницу
Постановка файла иллюстрации - это давняя практика в веб-вёрстке. Ныне принято использовать формат .jpeg, так как данный формат очень компактный и реже иные форматы. Необходимо учитывать, что страницы сайта смотрят не только на компьютерах, но и планшетах, а также мобильных телефонах, поэтому не рекомендуется размещать крупные по размеру "тяжёлые" файлы, потому что они будут долго открываться. Рекомендуемый вес фотографии - от 100 до 250 Кб.
Чтобы установить иллюстрацию или фотографию на странице, необходимо первоначально её обработать в программе Photoshop или аналогичной ей. Мы скачиваем необходимую фотографию из интернета или копируем её в папку "img" внутри нашей проектной папки "Project-One", назвав её "photo1".
1. Подготовка фотографии к размещению в коде html-файла
1.1 Открываем файл, например, в программе Photoshop:
1.2 Проверяем размеры и вес файла:
Разрешение web-изображения не должно быть большим, если мы не хотим размещать какую-либо значимую иллюстрацию, поэтому 96 пикселей на дюйм - это как раз стандартная величина.
Ширина и высота изображения зависят от вашего макета страницы и целей самой фотографии. А вот пропорции ширины и высоты зависят от того, где и как в макете страницы вы хотите разместить фотографию:
- если изображение будет стоять отдельно от текста, то ширина обычно больше высоты в пропорции 3:2 или 16:9, т.е. имеет горизонтальную ориентацию;
- если изображение будет стоять слева или справа от текста, то ширина обычно меньше высоты в пропорции 2:3 или 9:16, т.е. имеет вертикальную ориентацию;
- если изображение изначально не соотнести с такими пропорциями или у вас нет на то желания, то оно может иметь равные пропорции ширины и высоты.
В моём случае, горизонтальную ориентацию сделать не удастся, поэтому я сохраню только два варианта: равную и вертикальную пропорцию сторон.
1.3 Редактируем файл в равной пропорции сторон:
Сохраняем копию под именем "photo2".
1.4 Редактируем изначальный файл в вертикальной пропорции сторон:
2. Установка фотографии в html-код веб-страницы
2.1 Выбираем место расположения изображения. Для начала установим её над текстом резюме. Для этого необходимо разместить новый контейнер <div>, например, под именем "photo" над верхним контейнером "general", т.е. всё же внутри общего контейнера "resume":
Почему я рекомендую располагать изображение внутри общего контейнера? Так будет удобнее перемещать и совмещать изображение с остальным текстом в будущем. Ваши планы могут поменяться, а переписывать и переставлять сто раз контейнер с изображением - дело крайнее.
2.2 Внутри контейнера "photo" устанавливаем тег <img>, который отвечает за местоположение изображения в коде HTML:
В итоге, мы получаем не только сам тег <img>, но и его селектор "src" (от англ. source - ресурс) с ячейкой для ввода значения, который укажет, откуда вызывается на экран данной html-страницы изображение.
2.3 Установка адреса изображения в проектной папке производится как раз внутри селектора "src". Вы помните, что в проектной папке мы создали две папки, и изображения разместили в папке "img". Это - корректная работа, т.к. рекомендуется страницы сайта размещать в одной папке, а изображения в другой по причине того, что их может быть не одно-два, а десятки и даже сотни. Стандартно, если изображение находится в той же папке, что и файл страницы, то запись пути производится так:
<img src="photo.jpg">
Однако, если же изображение находится в соседней папке проекта, то нам нужен путь туда:
<img src="../img/photo.jpg">
В данном случае, в пути указывается, что изображение размещено в папке "img", а самый первый выражен как "../", т.е.выше расположена общая для них папка проекта, которая не указывается уже.
Выбираем файл "photo2", которое мы сделали квадратным, и вставляем его:
<img src="../img/photo2.jpg">
В коде HTML это будет выглядеть так:
Сохранив дополнения и обновив браузер, мы получаем изображение:
2.4 Корректировка изображения. Мы увидели, что изображение слишком велико, т.к. оно установилось соизмеримо его начальным размерам 15*15 см. Чтобы откорректировать размер, необходимо установить свой размер, приемлемый для данной страницы в пикселях: ширину или длину, потому что второй параметр пропорционально изменится сам. Установим, например, размер ширины изображения в 300 пикселей.
Для этого необходимо вставить стили CSS внутри данного тега:
Затем в стилях ставим селектор ширины (width) и его значение 300px:
Изображение уменьшилось, но осталось слева в углу.
2.5 Центровка изображения. Чтобы поставить изображение по центру, то достаточно в его контейнере <div> указать центральное расположение текста! Почему текста, потому что браузер считает изображение внутри как всего лишь блок:
Практика
Задание 10.
- Создать свою отдельную проектную папку "my resume".
- Внутри данной проектной папки создать папки "resume" и "img".
- Создать собственную страницу резюме, используя знания данного урока.
На следующем уроке мы мы познакомимся с тем, как сделать контейнеры "плавающими" без фиксированного расположения.
Если вам понравилось, подписывайтесь на мой канал!
PhD Alexander G. Buychik, info@buychik.ru, +79217702472