16.09.2021-23.09.2021. Текстове наповнення веб-сторінки

 16.09.2021-23.09.2021

Тема: Шрифтове оформлення текстових блоків веб-сайту.

Створення текстових блоків на веб-сторінці.

 

Теоретична частина

 Запитання: Що означає створення сайту?

Відповідь: Створення сайтів включає наступні етапи: 

    • розробка технічного завдання та його узгодження; 

   • реєстрація доменного імені; 

   • створення макета сайту; 

   • розробка дизайну сайту; 

   • верстка дизайн-макетів головної і внутрішніх сторінок сайту, програмування; 

   • тестування сайту; 

   • наповнення та оптимізація сайту відповідно до вимог пошукових систем; 

   • наповнення сайту: написання статей, копірайтинг; 

   • підключення системи управління сайтом; 

   • технічна підтримка сайту.

ДОВІДКА щодо наповнення сайту: 

Копіпаст: акуратне, категоризовати і відформатироване розміщення на сайті матеріалів з ​​наданих замовником джерел (каталоги, сайти, електронні листи копірайтеру) 

Рерайт: Унікалізація (перепис) тексту з джерела, наданого замовником (електронні листи копірайтеру, посилання на Інтернет-ресурси, наповнення по тематиках на розсуд копірайтера і т. д.) 


Копірайт: авторський унікальний текст (новина, інтерв'ю, стаття і т. п.)

* Хостинг надається за тарифними планами хостингу, в залежності від потреби Вашого ресурсу 

 

Запитання. Як можна виділяти окремі частини тексту на веб-сторінці?

Відповідь:  Для виділення окремих частин тексту можна скористатися наступними стилями:

Y - жирний (Bold);

I - курсив (Italic);

U - з підкресленням (Underline);

S - з перекресленням (STRIKE);

Нижче наведена таблиця команд виділення тексту.

Текст, що відображається

Зразок запису в форматі HTML

Виділення тексту жирним шрифтом

Виділення <b> тексту </b> жирним шрифтом

Виділення тексту курсивом

Виділення <i> тексту </i> курсивом

Виділення тексту підкресленням

Виділення <u> тексту </u> підкресленням

Виділення тексту перекресленням

Виділення <strike> тексту </strike> перекресленням

Для зміни розміру текстових символів скористайтеся командами:

<FONT SIZE = +-i > </FONT>, де i в межах від 1 до 7 відносно початкового розміру букв.

Крім того, можна збільшити або зменшити висоту шрифту за допомогою команд <BIG> і <SMALL>. Ці команди використовуються в парі з командами </BIG> і </SMALL>.

Ще дві пари команд:

<SUB> і </SUB> - підрядковий індекс, наприклад, H₂SO₄.

<SUP> і </SUP> - надрядковий індекс, наприклад, (a² - b²) = (а - b)(а + b).

Всі вищенаведені команди визначають фізичне форматування символів. Ви задаєте конкретну зміну характеристик символів.

Крім того, є логічне форматування символів - Ви даєте опис, а броузер вирішує як змінювати характеристики. Загалом, хто довіряє броузеру - користуйтеся цими командами. Вони виглядають таким чином:

<CITE>Цитата</CITE>

<EM>Особливо важливий текст</EM>

<STRONG>Сильне виділення тексту</STRONG>

<KBD>Текст, введений користувачем</KBD>

<CODE>Лістинг програми</CODE>

<SAMP>Послідовність літералів</SAMP>

<VAR>Ім’я змінної</VAR>

Броузер користувача сам вибирає шрифт, якщо Ви його конкретно не задали в описі сторінки. Якщо в сторінці заданий шрифт, якого немає у користувача, то Ви можете задати список, що складається з декількох шрифтів, і броузер вибере самий лівий, а якщо його в системі немає, то наступний і т. д. Якщо жодного з шрифтів немає, броузер вибирає свій шрифт.

Шрифт задається за допомогою команди: FONT FACE

 

Запитання 2. Як опрацьовувати межі таблиці?

Відповідь:      Таблиця з нестандартними відстанями між осередками і кордоном.

Отримавши певні навички роботи з кордоном таблиці, ви можете приступати до управління її відображенням. За допомогою атрибута frame будемо керувати відображенням зовнішнього кордону, а за допомогою атрибуту rules – внутрішніми кордонами таблиці.

Атрибут frame може приймати такі значення:

above – відображається тільки верхня лінія кордону;
below – видно тільки нижня лінія кордону;
box – відображається зовнішній кордон таблиці;
border – видно зовнішня межа таблиці (аналогічно box);
hsides – відображаються тільки горизонтальні лінії кордону;
lhs – видно тільки ліва лінія кордону;
rhs – відображається тільки права лінія кордону;
void – зовнішня межа таблиці не відображається;
vsides – видно лише вертикальні лінії кордону.

Frame і rules – це нові атрибути в HTML, вони підтримуються тільки останьними версіями браузерів.

Атрибут rules може приймати такі значення:

all – кордон відображається навколо кожної клітинки;
cols – видно лише вертикальні кордону між стовпцями;
groups – відображаються тільки вертикальні межі між групами стовпців або горизонтальні межі між групами рядків;
none – межі між осередками не відображаються;
rows – видно тільки горизонтальні межі між групами рядків.

 

Запитання 3. Як вбудовуються зображення на веб-сторінку?

Відповідь. Для вбудовування зображень в HTML-документ застосовується елемент IMG. Він має обов’язковий атрибут src, значенням якого має бути адреса вбудованого зображення.
Найпростіший варіант запису для включення картинки: <IMG src=”image.jpg”>. При такому запису розмір картинки на екрані буде відповідати її реальному розміру.

У лістингу продемонстрований найпростіший варіант вбудовування картинки.
<html>

<head>

<title>Вбудовування зображення</title>

</head>

<body>

<img src=”image.jpg”/>

</body>

</html>

Запитання 4. Як вбудовується гіперпосилання на веб-сторінку?

Відповідь: Між тегами <A> і </ A> розташовується саме текст посилання.
Адреса документа для переходу записується в елементі A як значення атрибута href. Таким чином, переміщення по сайту стає зручним, легким і прозорим для користувача. Йому абсолютно все одно, де знаходиться документ, на який вказує посилання, він бачить тільки текст опису. У лістингу представлений приклад створення посилання на HTML-сторінку і малюнок.

<html>
<head>
<title> Посилання </title>
<body>
<a href=”aboutme.html”> Про мене </ a> <br />
<a href=”myfoto.jpg”> Моє фото </ a>
</body>
</html>

 

 

Практична частина

 

Практична робота. 

 

Мова розмітки HTML для кодування таблиці.

Приклад кодування властивостей  таблиці

на веб-сторінці

 мовою розмітки HTML

 

Завдання 1. Набрати в текстовому редакторі Блокнот наступний текст html-кодів і зберегти його у файл з розширенням html.

 

 Скопіювати HTML-кодування веб-сторінки у цьому завданні 1.

4) Відкрити текстовий редактор Блокнот. І вставити на сторінку коди.

5)Зберегти даний документ під Іменем index1.html на Робочий стіл.

6) Відкрити даний документ у веб-браузері. Протестувати активні слова на веб-сторінці

7) надіслати скріншот утвореної веб-сторінки на e-mail:  vinnser@gmail.com

 

 

Кодування простої HTML-таблиці розміром 3х3,

яка складається з трьох стовпців і трьох рядків

<html>

<head>

<title> Проста HTML-таблиця </title>

</head>

<BODY bgcolr=”#00bb99” text=”#00000g” link=”#222222” vlink=”#444444” alink=”#111111” background=”bg.jpg”>

<p><Font size="50" color=”#gggggg” face=”Arial, Times New Roman, Serif”> Зразок таблиці</font>.

<P><Font size=40" color=”#000000” face=”Arial, Times New Roman, Serif”>Заповніть таблицю числами і змініть колір тла комірок в таблиці</font>

<P><Font size="15" color=”#000000” face=”Arial, Times New Roman, Serif”>

<table border="3" align=”left” cellspacing=”2”  cellpading=”1” widht=”500”>

<caption  align=”midlle”>   Це заголовок таблиці </caption>

<tr>

 <td  align=”midlle”  valign=”top” ” widht=”150"  bgcolor="60ff00" height="97"> Заголовок 1 </td>

 <td align=”left”  valign=”bottom” ” widht=”125"  bgcolor="11ff00" height="87">Заголовок 2 </td>

 <td align=”right”  valign=””midlle” ” widht=”105" bgcolor="ddff00" height="77">Заголовок 3</td>

 </tr>

<tr>

<td bgcolor="55ff00" height="57"> Осередок 2×1 </td>

<td bgcolor="eeee00" height="87"> Осередок 2×2 </td>

<td bgcolor="bbbb00" height="97"> Осередок 2×3 </td>

 </ tr>

<tr>

<td  bgcolor="55fab0" height="77"> Осередок 3×1 </td>

 <td  bgcolor="00ff99" height="67"> Осередок 3×2 </td>

<td  bgcolor="ggff00" height="57"> Осередок 3×3 </td>

 </tr>

 </table>

 </body>

</html>

 

Завдання 2. Завантажте програму-браузер файл з текстом завдання 1. Створена веб-сторінка повинна мати напрочуд файний вигляд. Якщо наявні помилки, то виправте їх в кодуванні. Перевірте виправлення. Закодуйте в кожну комірку таблиці гіперпосилання на навчальні та освітні сайти.

 

Результат виконаної практичної роботи це файли( із результатами виконання програм) надіслати вашому учителю на електронну скриньку: 
vinnser@gmail.com (Сергій Петрович)
ktdfz@i.ua (Юрій Васильович)

09.09.2021 Поняття про веб-дизайн.

 

09.09.2021-16.09.2021

Тема: Дизайн як феномен візуальної культури. Поняття про веб-дизайн.

Теоретична частина

Повторення.

Самоперевірка залишкових знань

Тестове завдання «Операційна система Windows».

 

 

1. Виклик довідки в Проводнику відбувається при натисненні функціональної клавіші:

                a) F2; b) F4; c) F1; d) F3.

 

2. Перехід між вікнами Проводника здійснюється за допомогою клавіші:

          a) Ctrl; b) Tab; c) Alt; d) Shift.

 

3. Технологія drang-and-drop – це:

a) переміщення папки в файл;

b)  спосіб роботи з об’єктами, при якому можна взяти об’єкт мишкою і перетягнути в інше місце;

c)  пересилка документа в Корзину;

d)  суміщення двох папок в одну.

 

4. Виклик контекстного меню здійснюється:

a)  клацанням на об’єкті лівою кнопкою мишки;

b)  клацанням на об’єкті правою кнопкою мишки;

c)  подвійним клацанням на об’єкті лівою кнопкою мишки;

d)  утримуванням курсора мишки над об’єктом протягом двох

секунд.

 

5.У Кошику  знаходяться файли:

a) видалені з жорсткого диска.
b) видалені з флешки.
c) тимчасові файли.
d) копії файлів, з якими в даний момент працює користувач.

 

6.Вікно нормального розміру якщо воно:

a) розгорнуте на весь екран.
b) згорнуте до піктограми на панелі задач.

 c) займає частину екрана.
d) закрите.

 

7.Жорсткий диск належить до:

a) зовнішньої пам’яті. b) оперативної пам’яті. c) постійної пам’яті.
d) кеш-пам’яті.

 

8. Пошук файлів можна виконувати:

a) за іменем автора;
b) за кількістю символів;
c) за іменем, типом, датою створення, розміром;
d) жодне з наведених тверджень не відповідає істині.

 

9. Щоб файл при видаленні не потрапив до корзини, слід утримувати натиснутою клавішу:

a) CTRL. b) ALT. c) ESC. d) SHIFT.

 

10. Щоб виділити об’єкти, які розташовані не поряд, слід утримува- ти натиснутою клавішу:

a) CTRL.  b) ALT. c) ESC. d) SHIFT.

 

11. Ярлик – це:

a) вигляд значка файлу;
b) файл, призначений для виклику програми чи документа;

c) інформація про розмір файла;
d) короткий зміст файла.

 

12.Ємність жорсткого диска вимірюється в:

a) Метрах. b) Гігабайтах. c) Бітах. d) Кг.

 

13.Панель задач на Робочому столі ОС Windows може бути розташована:

a) Зліва від панелі «Microsoft Office».

b) З будь якої сторони екрану.

c) Виключно знизу екрана.
d) Виключно під значками піктограми на Робочому столі.

 

14.Перерахуйте можливі стани активного вікна ОС Windows.

 

a)  Згорнуте у вигляді кнопки на Панелі завдань, частково за- крите іншими вікнами.

b)  Розташоване зверху інших вікон, які розташовані на Робо- чому столі у вигляді піктограм.

c)  Закрите іншими вікнами, розташоване зверху інших вікон.

d)  Згорнуте, нормальне і розгорнуте.

 

15.Коли з'являється смуга прокрутки у вікні ОС Windows?

a)  Якщо включено відповідну установку в «Панелі керування».

b)  Якщо включено відповідну кнопку на Панелі інструментів.

c)  Якщо включено відповідну команду з меню «Вид».

d)  Якщо площа основного робочого простору вікна недостатня

для відображення даних.

 

16.Об'єкти заголовка вікна –

a)  Назва вікна, головне меню, три кнопки управління вікном.

b)  Назва вікна, головне меню, системне меню.

c)  Кнопка системного меню, назва вікна, кнопки для управлін-

ня вікном.

d)  Назва вікна, системне меню, рамка заголовка вікна.

 

17.Тека (папка, каталог), в якій тимчасово потрапляють видалені об’єкти, називається ...

a) Корзина. b) Оперативна пам’ять. c) Портфель. d) Блокнот.

 

18. Активний диск – це...

a) диск, з яким користувач працює в даний момент часу;

 b) CD-ROM;
c) жорсткий диск;
d) диск, в якому зберігається операційна система.

 

19.Технологія Plug and Play:

a)  дозволяє синхронізувати роботу комп’ютера і пристрою;

b)  дозволяє новим пристроям автоматично настроюватися під

конфігурацію даного комп’ютера;

c)  використовується замість зовнішніх пристроїв.

 

20.До функціональних можливостей ОС Windows не відноситься:

a) підтримка мультимедіа;
b) технологія Plug and Play;
c) багатозадачність;
d) підтримка імен файлів лише формату 8.3

 

21.Що не записується в повному імені файла?

a) Ім’я файла.
b) Розширення.
c) Імена папок.
d) Ім’я комп’ютера.

 

22.Вказати неправильне твердження:

a)  Апаратні засоби управляють програмним забезпеченням.

b)  Програмне забезпечення управляє апаратними засобами.

c)  Програмне забезпечення – це інформація, що записана на дисках.

d)  Апаратні засоби – це обладнання у складі ПК.

 

23.Що таке драйвер?

a)  Системне програмне забезпечення, яке призначене для вико- нання допоміжних функцій.

b)  Текстовий редактор.

c)  Системне програмне забезпечення, яке призначене для роботи з конкретним зовнішнім пристроєм комп'ютера.

d) Системне програмне забезпечення, яке призначене для управління роботою комп’ютера.

 

24. Під час виконання прикладна програма зберігається:

a) у відеопам’яті;
b) в процесорі;
c) в оперативній пам’яті;

d) в ПЗП. 

Інформація про веб-дизайн

 

Практична частина

Практична робота  «Основні принципи дизайнера»

Завдання. Самостійно створити презентацію згідно сценарію.

СЦЕНАРІЙ УЧНІВСЬКОЇ  ПРЕЗЕНТАЦІЇ  «Основні принципи дизайнера»

Слайд 1(застосувати до слайдів довільний стиль фону ). Заголовок(розмір: 47 пт): Принципи дизайну видання (анімований). Підзаголовок(розмір: 35 пт): П.І.Б учня, котрий створює презентацію, клас, дата створення. Ілюстрації: фото або відео, що містить сучасного  видання. Анімація для переходу на другий слайд.

Слайд 2. Заголовок: Що означає термін «Дизайнерська модель»? Текст(розмір: 24 пт): Дизайнерська модель - це об'єкт довільної природи, що відображає найважливіші, з погляду розв'язуваного завдання, властивості об'єкта моделювання.  Ілюстрації:  фото дизайнерських рішень (без анімації). Анімація для переходу на третій слайд.

Слайд 3. Заголовок: Що  означає термін «функції дизайнерської моделі»? Текст: Головні функції дизайнерської моделі видання - це спрощення одержання інформації про властивості об'єкта заради передавання інформації та знань, для керування й оптимізація об'єктами та процесами; для прогнозування; для діагностики поведінки об’єкта. Ілюстрації:  скріншоти сторінок Інтернет-видання. Анімація для переходу на четвертий слайд.

Слайд 4. Заголовок: Які три елементи виділяють в процесі моделювання? Текст: Процес дизайнерського моделювання має три елементи: 1) суб'єкти (дизайнер-дослідник); 2) об'єкти дослідження (можливості графічного матеріалу);  3) ідеальна модель, що визначає відносини суб'єктів і досліджуваних об'єктів. Ілюстрації:  дизайн буклету для виставки. Анімація для переходу на 5 слайд.

Слайд 5. Заголовок: Що означає термін «Модульна сітка видання»? Текст: Модульна сітка - це невидимий кістяк дизайну видання, система горизонтальних і вертикальних (а часом ще й діагональних та дугових) напрямних, що допомагають зорієнтувати й погодити між собою окремі елементи композиції; вона наводить у дизайні лад, робить його цілісним і пов'язує між собою всі його частини, дозволяє раціонально організувати будь-який графічний простір, будь-то бланк, візитка, плакат, книга, сайт, інтер'єр, зберігаючи в усіх його елементах єдність стилю.   Ілюстрації:  зразки модульних сіток для дизайну видання. Анімація для переходу на 6 слайд.

Слайд 6. Заголовок:   Що означає термін «Істотні риси видання»?  Текст: Істотні риси дизайнерського наповнення видання складають: 1) оформлення і зміст обкладинки (обкладинка - обличчя видання, перший дієвий засіб привернути увагу читача); 2) рубрикація та заголовковий комплекс; 3) використання модульних сіток; 4) ілюстрування та інфографіка; 5) використання «білого» простору; 6) декоративні елементи; 7) використання фактури, палітри та членування (дизайнерові не зайве якомога більше знати про форму, пропорції, колір, контраст та ритм то що); 8) типографіка. Ілюстрації:  обкладинки видань. Анімація для переходу на 7 слайд.

Слайд 7. Заголовок: Що означає термін «Перший етап роботи над дизайнерською моделлю»?  Текст: Це будування моделі. Під час цього процесу відбувається накопичення знань про об'єкт-оригінал. Пізнавальні можливості моделі зумовлюються тим, що модель відображає (відтворює, імітує) якісь істотні риси об'єкта-оригіналу. Фатальною може бути орієнтація на суто мистецьке спрямування оформлення без урахування виробничо-матеріальних аспектів. Але й надмірна «приземленість» дизайну журналу не підвищить попиту на нього. Ілюстрації:  начиння для заголовкого комплексу видання. Анімація для переходу на 8 слайд.

Слайд 8. Заголовок(з анімацією):  Приклад дизайнерської моделі видання. Текст:  Для прикладу наведемо № 6 за 2010 рік харківського журналу «Паліндром». До його істотних рис композиційно-графічного наповнення, показових для процесу моделювання, відносимо: 1) використання при оформленні обкладинки нейтральних градієнтних тонових кольорів, вертикальної симетрії анонсування та перпендикулярної до них назви журналу; 2) наявний зміст видання, оформлений двома вертикальними паралельними блоками (текстовим та ілюстративним), спостерігається складна горизонтальна рубрикація з різноколірними за головками переважно синього кольору на білому; 3) відчувається використання модульних сіток (шпальта ділиться вертикальними та горизонтальними лініями на одинакові прямокутники); 4) широко використовується ілюстрування (близько 70 % від загальної площі видання); майже всі ілюстрації розміщенні у прямокутних фреймах; 5) спостерігаємо велику кількість білого простору (близько 25 % від загальної площі видання), що забезпечує підкреслену стабільність композиції та графіки; 6) не використовуються декоративні елементи, створюючи враження концептуальної строгості, але не можна сказати, що це позитивна риса в композиції молодіжного журналу; 7) у виданні наявна звична для українського журналу проста суцільна біла фактура, типова палітра в блакитних та синіх тонах; 8) набір та верстка, графічне оформлення видання зреалізовано з дотриманням національних норм та правил, хоч трапляються огріхи на восьмій, одинадцятій та чотирнадцятій сторінках.  Ілюстрації: обкладинка журналу «Паліндром». Анімація для переходу на 9 слайд.

Слайд 9. Заголовок(з анімацією):  Як може дизайнер передавати духовну, пізнавальну, емоційну інформацію? Текст: Через призначення  знаків-сигналів, образів, колористики, що сприймають сигнали(інформацію) і обробляють їх. Ілюстрації: анімоване фото сучасного видання. Анімація для переходу на 10 слайд.

Слайд 10. Заголовок(з анімацією):  Декілька «спеціалізованих» моделей видання?   Текст: Так, для журналу «Паліндром» можна вибудувати такі дизайнерські моделі заради деталізації: а) палітри кольору, ритму тону та фактури; б) симетрії композиції; в) модульну модель; г) ілюстрування та інфографіку, д) шрифтову модель тощо. Ілюстрації:  скріншоти модельних палітр для видання. Анімація для переходу на 11 слайд.

Слайд 11. Заголовок: Другий етап роботи над дизайнерською моделлю видання? Текст: На 2-ому етапі композиційно-графічна модель журналу виступає як самостійний об'єкт дослідження, однією з форм якого є проведення «модельних» експериментів, під час яких свідомо змінюються умови функціонування моделі й систематизуються дані про її «поводження». Остаточним підсумком цього етапу маємо безліч (сукупність) знань про модель. Ілюстрації: деякі варіанти експериментів з шрифтами для заголовка. Анімація для переходу на 12 слайд.

Слайд 12. Заголовок(з анімацією): Що означає термін «зона можливостей моделі»? Текст: Для прикладу. Якщо провести ряд експериментів над шрифтовою моделлю молодіжного журналу «Стіна», а саме: 1) змінити звичну для цього видання рубану гарнітуру для основного тексту на шрифт із за січками; 2) змінити гарнітуру в заголовках та зробити їх кольоровими; 3) використати більшу кількість шрифтів. То, порівнюючи шрифтову модель з оригіналом, на базі отриманих знань можемо дійти висновку про її достовірність та доцільність, систематизувати дані щодо «поводження» моделі, коли змінити умови функціонування. Це і є зона можливостей моделі. Ілюстрації: фото  альбоми . Анімація для переходу на 13 слайд.

Слайд 13. Заголовок(з анімацією): Третій етап роботи над дизайнерською моделлю видання. Текст: На 3-ому етапі відбувається перенесення знань із композиційно-графічної моделі на оригінал, тобто на журнал як вид видання періодичного друку. Одночасно відбувається перехід з мови моделі на мову оригіналу. Процес перенесення знань виконується за певними правилами. Знання про модель повинні бути скориговані з урахуванням тих властивостей об'єкта-оригіналу, які не знайшли відображення чи були змінені при створенні моделі. Ілюстрації: фото галереї.

Слайд 14. Заголовок(з анімацією): Четвертий етап роботи над дизайнерською моделлю видання.Текст: Це практична перевірка одержуваних знань за допомогою композиційно графічних моделей та їх використання для побудови узагальнюючої теорії  про увесь об'єкт, його перетворення або керування ним. Моделювання – це циклічний процес. Це означає, що за першим циклом може втілюватися другий, третій і т. д. При цьому знання про журнал розширюються та уточнюються, а вихідна модель поступово удосконалюється. Недоліки, виявлені після першого циклу моделювання, викликані малим знанням об'єкта чи помилками в будові моделі, - їх можна ви правити в наступних циклах. Помилки моделювання можуть спричинятися варіаціями оформлення композиції в різних номерах одного й того самого журналу. Ілюстрації: схема дизайнерської взаємодії в Інтернет-середовищі. Анімація для переходу на 15 слайд.

Слайд 15. Заголовок(з анімацією): Що означає термін «цінності моделі»?  Текст: На мою думку, вибудовуючи модель, треба мати на увазі особливості використання цінностей в композиційно-графічного моделюванні видання, а саме: 1) істотність відображення рис об'єкта-оригіналу в моделі; 2) достатню міру подібності оригіналу й моделі; 3) використання модельних експериментів; 4) систематизацію даних про поводження моделі; 5) перенесення знань із моделі на оригінал; 6) скоригованість моделі; 7) узагальнювальні теорії об'єкта; 8) допустиму керованість моделлю. . Ілюстрації:  сайти дизайнерів.

 

 

 

 

Результати виконання практичної роботи надіслати на електронну адресу: vinnser@gmail.com