MKA Web-Junior Urok 06 1592573363

Урок 6
Добавление
постов
Содержание
Добавление постов.................................................................. 3
Подбор бесплатных иконок и изображений............. 3
Создание иконки для сайта........................................... 3
Создание нескольких страниц...................................... 7
Материалы урока прикреплены к данному PDF-файлу. Для доступа

к ним, файл необходимо открыть в программе Adobe Acrobat Reader.
2
Добавление постов
Подбор бесплатных иконок и изображений
Иконки на сайте помогут оформить и преобразить
содержимое страницы. Изображения можно скачать
из интернета или же создать самостоятельно в графиче-
ском редакторе.
Существуют сервисы, которые позволяют скачать
иконки на разные тематики. Огромная подборка доступна
по ссылке: https://bit.ly/2VOMqDN. Пользователь может
отфильтровать и выбрать подходящий вариант, а также
скачать его в формате .svg (рис. 1).
Рисунок 1
Создание иконки для сайта

Второй вариант — нарисовать иконку самостоятель-
но. Это отличный способ проявить творческие способ-
3
Урок 6
ности и разработать уникальный дизайн. Такие иконки

будут выглядеть особенно круто и подчеркнуть уникаль-
ный стиль ресурса. На прошлом уроке был разработан
логотип (рис. 2), которым мы и воспользуемся.
Рисунок 2
Установим его в качестве иконки веб-сайта (favicon) —
значка, который отображается на вкладке возле заголов-
ка страницы (рис. 3).
Рисунок 3
Подобное изображение может быть представлено
в формате .ico, .png, .gif или .jpeg. Все зависит от операци-
онной системы и браузера, в котором открыт сайт. Рас-
смотрим стандартный способ, где favicon задается в фор-
мате .ico. Для начала такое изображение необходимо по-
лучить. Воспользуемся сервисом-конвертером: https://bit.
ly/3f4bzlG. Загрузим рисунок на сайт в формате .png. Для
этого нажимаем на область «Drag your file here or click here
to upload» и выбираем изображение (рис. 4).
4
Рисунок 4
В результате чего, сервис преобразует картинку в фор-
мат .ico. Чтобы его скачать, достаточно нажать кнопку
Download.
Чтобы изображение отображалось в браузере, нужно
добавить в файл HTML в тег <head> такой код:
<link rel=”icon” href=”img/favicon.ico” type=”image/x-icon”>
До этого мы не создавали тег <head>, поскольку поль-

зовались сервисом CodePen. В CodePen, вместо стандарт-
ной конструкции:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
5
Урок 6
Мы указываем только содержимое тега <body>. Сей-

час же мы создадим в одной папке два файла — index.html
и style.css. В style.css скопируйте таблицу стилей из по-
следнего проекта на CodePen. В index.html укажите путь
к созданному вами favicon, заголовок страницы и под-
ключите файл со стилями:
<!DOCTYPE HTML>
<html>
<head>
<link rel=”icon” href=”img/favicon.ico”
type=”image/x-icon”>
<link rel=”stylesheet” href=”style.css”>
<title>Lego Adventures</title>
</head>
<body>
</body>
</html>
А в тег <body> скопируйте содержимое HTML-кода

из вашего проекта на CodePen. Откройте index.html в бра-
узере. После проделанных действий иконка должна ото-
бразиться на вкладке в браузере (рис. 5):
Рисунок 5
6
Создание нескольких страниц

Продолжим работу над созданием собственного бло-
га! Поскольку главная страница уже была создана, ис-
пользуем ее в качестве шаблона. Создайте копию index.
html и переименуйте ее, например, в post.html. На страни-
це уже есть хедер, сайдбар и футер. Таким образом, нам
остается лишь изменить содержимое <main>, чтобы со-
здать еще одну страницу. Страница будет иметь следую-
щий вид (рис. 6):
Рисунок 6
Далее наполним этот блок текстом, при этом выделяя
каждый новый абзац с помощью тегов <p>…</p>. Изо-
бражения в тексте можем добавлять по мере необходи-
мости, например, до или после абзацев, или же внутри
них. Таким образом, содержимое <main> будет иметь
следующий вид в коде:
7
Урок 6
<div>
<div class=”post”>
<img height=”250” src=”https://res.cloudinary.com/
dfog0e294/image/upload/
v1547038234/webdev/Blog/
img01.png”
alt=”Card image cap”>
<div>
<h3>Lego Spider-Man</h3>
<h5 class=”post-info”>Created on 20.02.2020,
Author: Admin</h5>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Quis commodo odio aenean sed.
</p>
<p>
Quis commodo odio aenean sed. Lorem ipsum
dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Quis commodo odio
aenean sed. Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Quis commodo odio aenean sed.
</p>
<p>
Quis commodo odio aenean sed. Lorem ipsum
8
dolor sit amet, consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Quis commodo odio aenean
sed. Lorem ipsum dolor sit amet, consectetur
</p>
<p>
</p>
<p>
</p>
</div>
</div>
А в style.css добавится ещё один класс:

.post-info {
color: grey;
}
Теперь в index.html измените

<a href=”#”>Read more</a>
На
<a href=”post.html”>Read more</a>
9
Урок 6
Теперь вы можете перейти с главной страницы на стра-

ницу с постом. Создайте аналогичные страницы и для
других постов (рис. 7-8).
Рисунок 7
Рисунок 8
Страница достаточно пустая. Давайте разнообразим
ее, добавив блок с комментариями под постом. Посмо-
трим на примеры того, как веб-дизайнеры оформляют
блоки с комментариями (рис. 9-10).
10
Рисунок 9
Рисунок 10
11
Урок 6
Вдохновляясь этими примерами, вы можете подо-

брать дизайн для такого же блока вашего сайта. Сделаем
его, например, таким (рис. 11):
Рисунок 11
Создадим блок основного комментария <div class=
"comment"> и блок второго комментария <div class=
"comment" id="sub-comment">:
<h3>Comments (2):</h3>
<div class=”comment”>
<h4 class=”author”>John</h4>
12
<h5 class=”date”>at 19:30 20.02.2020</h5>

Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
<div class=”comment” id=”sub-comment”>

<h4 class=”author”>Jack</h4>
<h5 class=”date”>at 19:35 20.02.2020</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
И добавим стили для них:
.comment {
background-color: white;
padding: 20px;
border-radius: 10px;
margin-top: 10px;
}
.author {
margin-top: 0px;
margin-bottom: 10px;
}
.date {
color: silver;
margin-top: 0px;
margin-bottom: 10px;
}
13
Урок 6
#sub-comment {
margin-left: 40px;
}
Таких комментариев вы можете добавить сколько

угодно (рис. 12).
Рисунок 12
14
15
Урок 6
© Компьютерная Академия «Шаг»

www.itstep.org
Все права на охраняемые авторским правом фото-, аудио- и видеопро-

изведения, фрагменты которых использованы в материале, принадле-
жат их законным владельцам. Фрагменты произведений используются
в иллюстративных целях в объёме, оправданном поставленной задачей,
в рамках учебного процесса и в учебных целях, в соответствии со ст.
1274 ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське право і
суміжні права». Объём и способ цитируемых произведений соответству-
ет принятым нормам, не наносит ущерба нормальному использованию
объектов авторского права и не ущемляет законные интересы автора
и правообладателей. Цитируемые фрагменты произведений на момент
использования не могут быть заменены альтернативными, не охраня-
емыми авторским правом аналогами, и как таковые соответствуют
критериям добросовестного использования и честного использования.
Все права защищены. Полное или частичное копирование материалов
запрещено. Согласование использования произведений или их фраг-
ментов производится с авторами и правообладателями. Согласованное
использование материалов возможно только при указании источника.
Ответственность за несанкционированное копирование и коммерческое
использование материалов определяется действующим законодатель-
ством Украины.

MKA Web-Junior Urok 06 1592573363

Загружено:

Сведения о документе

Описание:

Оригинальное название

Авторское право

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Описание:

Авторское право:

MKA Web-Junior Urok 06 1592573363

Оригинальное название:

Загружено:

Описание:

Авторское право:

Урок 6

Материалы урока прикреплены к данному PDF-файлу. Для доступа

Создание иконки для сайта

ности и разработать уникальный дизайн. Такие иконки

До этого мы не создавали тег <head>, поскольку поль-

Мы указываем только содержимое тега <body>. Сей-

А в тег <body> скопируйте содержимое HTML-кода

Создание нескольких страниц

dolor sit amet, consectetur adipiscing elit,

А в style.css добавится ещё один класс:

Теперь в index.html измените

Теперь вы можете перейти с главной страницы на стра-

Вдохновляясь этими примерами, вы можете подо-

<h5 class=”date”>at 19:30 20.02.2020</h5>

<div class=”comment” id=”sub-comment”>

И добавим стили для них:

Таких комментариев вы можете добавить сколько

© Компьютерная Академия «Шаг»

Все права на охраняемые авторским правом фото-, аудио- и видеопро-

Похожие интересы

Вам также может понравиться