Створення WEB-сайту компанії (на прикладі сайту для СТО)

---

Завдання 1 Створення html розмітки сайту

1. Для виконання практичної роботи відобразити розширення файлів (відображення/приховування розширень в ОС Windows7)
2. Створити нову папку, та назвати її site. У цій папці будуть лежати файли сайту.
3. В папці site створити файл з назвою index.html (рекомендовано спершу створити файл index.txt, та змінити розширення файлу txt на html).
   Цей файл буде містити html теги, що описують основну структуру сайту.
4. Відкрити в браузері файл index.html, для перегляду внесених змін.
5. Відкрити файл index.html в текстовому редакторі (ПКМ – Відкрити з допомогою – Блокнот++ , або перетягнути файл index.html в робочу область програми).

Примітка: Звернути увагу на кодування файлу, бажано, щоб було використано UTF-8, інакше можуть виникнути проблеми з відображенням літер кирилиці.


6. Вказати тип документу за допомогою тегу < ! DOCTYPE>, в нашому випадку використовується html, так що достатньо написати < ! DOCTYPE html PUBLIC >.
7. Записати відкриваючий тег < html>, який вкаже браузеру, що тепер йому доведеться мати справу з html кодом, та закрити тег в самому кінці, вказуючи, що html код завершено.
8. В області дії тегу < html> написати теги - < head> < /head>, в зоні дії яких буде:
   • ім'я сторінки (< title> STO!!! < /title>), що відображається в заголовку браузера;
   • мета-описи: автор сайту, ключові слова, опис сайту.
     Отримати:
     
     (для збільшення зображення, натиснути на ньому ЛКМ)
   
   Примітка: Пізніше в область дії тегу < html> допишемо також: шляхи до css, скриптів, стрічок новин і т. д.
   
   
9. Зберегти зміни внесені у файл текстовим редактором (Блокнот, Блокнот++), та перейти до вікна браузера.
   Оновити вміст сторінки (натиснути клавішу F5).
   
   Поки нічого цікавого не видно, але, якщо бути уважнішим, видно, що у вкладці браузера відображається вказаний нами текст ( STO!!!). Якщо літери кирилиці все-таки відображаються «криво», потрібно перевірити, чи зберегли ви файл в кодуванні UTF-8.
   
   (для збільшення зображення, натиснути на ньому ЛКМ)


10. Продовжити редагувати файл index.html, та перейти до видимої частини сторінки.
    Вона починається з тегу < body>, який закривається, відповідно після того, як видима частина сторінки закінчиться. Часто це буває відразу перед закриває тегом < /html>.
    Отримати:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


11. Використати теги < div>, які дозволяють виділяти блоки і розділи в структурі html сторінки. Оперуючи тегами < div>, можна присвоювати їм імена – (id) айді (сленг АЙДИ), які дозволять краще орієнтуватися в структурі сторінки, а також використовувати каскадні таблиці стилів в майбутньому.
    Id тегу div присвоюється наступним синтаксисом: < div id ='Ім''я'>, а закривається тег ось так - < /div>
    
    Поділити головну сторінку сайту на частини, виділивши:
    • шапку сайту (розміщують інформацію про сайт, наприклад, його назва, логотип, ...)
    • меню (кнопки, завдяки яким здійснюється навігація між головними сторінками сайту)
    • блок контенту (виводиться ГОЛОВНА інформація)
    • футер сайту (нижня частина сайту, в ньому може бути як просто картинка чи поточна дата, так і будь-яка інша більш складна інформація)
    
    
    Примітка. Тексти потрібно вказати СВОЇ. Нижче буде показано тексти для сайту СТО
    
    Отримати:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


12. Зберегти файл index.html і переглянути результат у вікні браузера (перейти до програми браузера, та натиснути F5)
    Переконатися, що виведені один під одним в заданому порядку шапка, меню, контент і футер сторінки.
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


13. Повідомити викладача про виконання html розмітки, необхідної для подальшої роботи з сайтом

---

 

Завдання 2 Підлючення CSS файлу до сторінки

1. Відкрити папку site, та створити файл з назвою style.css (можна спершу створити файл style.txt, та змінити розширення файлу).
2. Підключити css-файл в основному файлі index.html.
   Підключення css-файлів відбувається в зоні дії тегу < head>.
   Написати між тегами < head> < /head> наступний рядок:
   < Link rel = "stylesheet" href = "style.css">
   
   Розділ тепер буде виглядати так:
   
   (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка 1.Такий шлях буде працювати тільки якщо файл стилів знаходиться в папці разом з файлом index.html.
Якщо ж він є в іншій папці, то в посиланні треба буде вказати повний шлях до нього.

Примітка 2.Зеленим кольором показано підказки


3. Зберегти зміни внесені у файл index.html.
4. Відкрити файл style.css в Блокнот++
5. Прописати у файлі ВСІ блоки, згадані в файлі index.html (пункт 11, завдання 1) , з дотриманням правил синтаксису.
   Отримати:
   
   (для збільшення зображення, натиснути на ньому ЛКМ)


ПриміткаЗеленим кольором бачимо пояснення до команд у файлі.
Вони не впливають на файл style.css, лише допомагають зрозуміти запис.


6. Зберегти зміни внесені у файл, та повідомити викладача

---

 

Завдання 3 Оформлення сторінки з використанням CSS-файлу

Налаштування блоку header сторінки

1. Відкрити в Блокнот++ файл style.css, та задати властивості для блоку header (запис зеленого кольору можна не робити):
   
   (для збільшення зображення, натиснути на ньому ЛКМ)



2. Зберегти зміни в файлі style.css, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5)
   
   (для збільшення зображення, натиснути на ньому ЛКМ)


Примітка Видно, як файл style.css додав змін в index.html.

В шапці сайту є текст. Задати оформлення для тексту створивши додатковий блок headertext.

3. Відкрити файл index.html, та «вкласти» блок headertext в header. Отримати:
   
   (для збільшення зображення, натиснути на ньому ЛКМ)


Примітка Зеленим кольором знову ж є підказки (правда відображення для файлів *.html. ці підказки записуються не так як для файлів *.css) index.html. Тепер блок headertext підпорядковується блоку header , та ще й буде мати свої власні властивості, які будуть прописані в style.css


4. Зберегти зміни внесені у файл index.html.
5. Перейти до файлу style.css, де задати властивості для блоку headertext (запис зеленого кольору можна не робити):
   (для збільшення зображення, натиснути на ньому ЛКМ)



6. Зберегти зміни в файлі style.css, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5)
   
   (для збільшення зображення, натиснути на ньому ЛКМ)


Примітка Видно знову, як файл style.css додав змін в index.html.

Зробити шапку сайту «клікабельною», тобто, кожного разу при натиску на ній ЛКМ, відвідувач сайту буде переходити на головну сторінку.
7. Відкрити файл index.html, та пропиcати < a href="index.html"> (в зоні дії тегу < div id = 'header'> ). Як видно цей тег зробить весь блок headertext гіперпосиланням:
   
   (для збільшення зображення, натиснути на ньому ЛКМ)



8. Зберегти зміни внесені у файл index.html.
9. Перейти до файлу style.css , де задати змін для блоку headertext , а саме, відмінити підкреслення гіперпосилань в шапці сайту. Отримати (звернути увагу на header A):
   
   (для збільшення зображення, натиснути на ньому ЛКМ)



10. Зберегти зміни в файлі style.css, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5)
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка Налаштування ШАПКИ сайту закінчено. Ці ж налаштування автоматично будуть задаватися ВСІМ сторінкам сайту.


---


Налаштування блоку menu
11. Відкрити файл index.html, та здійснити відповідні зміни в ньому. Отримати:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка Для кожної сторінки записати її адресу (фіолетовий колір) , з гіперпосиланням. Головна сторінка гіперпосилання не має!!


12. Задати колір шрифту для головна, відмінний від всіх інших. А саме:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка Саме тег < font>, з атрибутом color, та значенням #D3D3D3 в зоні дії задав колір для шрифту


13. Зберегти зміни внесені у файл index.html.
14. Відкрити файл style.css, де задати змін для блоку menu. Отримати:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка Щоб пришвидшити процес, можна копіювати подібні властивості з попередніх блоків.
Наприклад, box-shadow (тінь для блоку)


15. Зберегти зміни в файлі style.css, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5)
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


16. Відкрити файл style.css, та:
    • змінити колір тексту в меню;
    • відмінити підкреслення гіперпосилань;
    • задати властивість, за якої, при наведенні курсору миші на текст меню, він буде змінювати колір. Отримати:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)
    
17. Зберегти зміни в файлі style.css, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5)
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка . Налаштування МЕНЮ сайту закінчено.
Ці ж налаштування автоматично будуть задаватися ВСІМ сторінкам сайту.


---


Налаштування блоку content
18. Перейти до файлу index.html, та здійснити відповідні зміни в ньому для блоку content. Отримати:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка . Чорним кольором видно текст який видимий у браузері. Цей текст повинен бути унікальним (не повторюватись з іншими!!!)


19. Зберегти зміни внесені у файл index.html.
20. Перейти до файлу style.css , та задати властивості для блоку content (запис зеленого кольору можна не робити):
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка . Звернути увагу, що багато властивостей попередніх блоків дублюються в блоці content !


21. Зберегти зміни в файлі style.css, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5)
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка . Налаштування КОНТЕНТ сайту закінчено.
Ці ж налаштування автоматично будуть задаватися ВСІМ сторінкам сайту.


---


Налаштування блоку footer
22. Відкрити файл index.html, та здійснити відповідні зміни в ньому для блоку footer. Отримати:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка . Звернути увагу на підказки (зелений колір)

23. Зберегти зміни внесені у файл index.html.
24. Перейти до файлу style.css , та задати властивості для блоку footer (запис зеленого кольору можна не робити):
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка . Звернути увагу, що багато властивостей попередніх блоків дублюються в блоці footer!
В "підвалі" сайту є текст.
Задати оформлення для тексту створивши додатковий блок footertext.

25. Перейти до файлу index.html, та «вкласти» блок footertext в footer. Отримати:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


26. Зберегти зміни внесені у файл index.html.
27. Перейти до файлу style.css , та задати властивості для блоку footertext (запис зеленого кольору можна не робити):
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


28. Зберегти зміни в файлі style.css, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5)
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка . Налаштування блоку ПІДВАЛ (ФУТЕР) закінчено.
Ці ж налаштування автоматично будуть задаватися ВСІМ сторінкам сайту.
Сторінка сайту майже готова.
Залишилось лише налаштувати картинку (її збільшення, та переміщення в центр робочої області браузера)

---

 

Завдання 4 Налаштування графічного файлу (картинки) з використанням CSS-файлу

1. Відкрити файл index.html, та здійснити відповідні зміни (тільки для картинки) в ньому для блоку content. Отримати:
   
   (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка 1 . Модальне вікно – вікно, що блокує роботу користувача з батьківським (головним) застосунком доти, доки користувач це вікно не закриє.
Примітка 2 Сірий фон вказує на вже ІСНУЮЧУ картинку. Над ним і під ним показано зміни


2. Створити файл styleImg.css (можна спершу створити файл styleImg.txt, та змінити розширення файлу). Цей файл буде відповідати на динамічні дії з картинкою.
3. Підключити css файл в основному файлі index.html.
   
   (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка. Зеленим кольором текст можна не друкувати, це є пояснення для користувача


4. Зберегти зміни внесені у файл index.html.

Створення ефектів процес не простий, та займає багато терпіння та часу.
Для однієї, здавалося б, картинки витрата часу буде більше ніж для всього сайту. Отже:


5. Відкрити файл styleImg.css в програмі Блокнот++, та здійснити базові записи. Отримати:
   
   
   
   (для збільшення зображення, натиснути на ньому ЛКМ)


6. Зберегти зміни в файлі style.css, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5)
   Отримати, після натиску ЛКМ на картинці:
   
   (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка. Для виходу з режиму перегляду потрібно здійснити крок назад (Alt+←)

---


Картинка відкривається, але закривати її незручно.
Додати до картинки кнопку "Закрити"
7. Відкрити файл styleImg.css в програмі Блокнот++, та записати:
   
   (для збільшення зображення, натиснути на ньому ЛКМ)


8. Зберегти зміни в файлі style.css, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5)
   Отримати, після натиску ЛКМ на картинці:
   
   (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка.Кнопка "Закрити" додана, та працює.
Налаштування картинки (ВСІХ картинок, цей же ефект буде застосовано і до картинок сторінки ГАЛЕРЕЯ) закінчено.

---

 

Завдання 4 Налаштування сторінок сайту

Налаштування сторінки ПОСЛУГИ

1. Перейти в папку site
2. Зробити копію сторінки index.html (спосіб створення копії обрати самостійно)
3. Перейменувати скопійовану сторінку на services.html (важливо правильне перейменування, так як на сторінці вже задано ці імена)
4. Відкрити сторінку в services.html Блокнот++

Редагування блоку меню сторінки сторінки ПОСЛУГИ

5. В блоці div id='menu' змінити адреси, та кольори для сторінок головна і послуги
   
   
   
   (для збільшення зображення, натиснути на ньому ЛКМ)


6. Зберегти зміни в файлі services.html, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5). Отримати:
   
   (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка.Тепер на сторінці ПОСЛУГИ відповідна кнопка ледве помітна, а кнопка головна така ж як і всі


---


Редагування блоку контент сторінки ПОСЛУГИ
7. В блоці div id='content' змінити ВСЕ (інформація зовсім інша, та ще й для зручності розмістити її в таблицю), саме тому, вділити, та знищити весь вміст блоку
   
   (для збільшення зображення, натиснути на ньому ЛКМ)


8. Створити таблицю за зразком (записи зеленого кольору не робити):
   
   (для збільшення зображення, натиснути на ньому ЛКМ)


9. В зоні дії відповідних тегів вписати відповідну інформацію. Отримати:
   
   (для збільшення зображення, натиснути на ньому ЛКМ)


10. Зберегти зміни в файлі services.html, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5). Отримати:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка.Текстову інформацію писати ВЛАСНУ.
Картинки використовувати ВЛАСНІ, обробивши їх у графічних редакторах


11. В файлі services.html самостійно зробити зміни, щоб таблиця мала НЕ МЕНШЕ 4-5 послуг. В кінці останньої послуги НЕ ПОВИННО буди горизонтального розділювача. Отримати:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Налаштування сторінки ПОСЛУГИ закінчено.


---


Налаштування сторінки КОЛЕКТИВ

12. Перейти в папку site
13. Зробити копію сторінки services.html (спосіб створення копії обрати самостійно)
14. Перейменувати скопійовану сторінку на about.html (важливо правильне перейменування, так як на сторінці вже задано ці імена)
15. Відкрити сторінку about.html в Блокнот++
16. Виконуючи дії, описані више, налаштувати САМОСТІЙНО сторінку
17. Зберегти зміни в файлі about.html, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5).
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка. Як видно, сторінка КОЛЕКТИВ точна копія сторінки ПОСЛУГИ

Налаштування сторінки КОЛЕКТИВ закінчено.


---


Налаштування сторінки ГАЛЕРЕЯ
Редагування блок меню сторінки ГАЛЕРЕЯ

18. Перейти в папку site
19. Зробити копію сторінки services.html (спосіб створення копії обрати самостійно)
20. Перейменувати скопійовану сторінку на galery.html (важливо правильне перейменування, так як на сторінці вже задано ці імена)
21. Відкрити сторінку galery.html в Блокнот++
22. Самостійно налаштувати блок МЕНЮ (аналогічно до сторінок ПОСЛУГИ та КОЛЕКТИВ).
23. Зберегти зміни в файлі galery.html, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5).
    
    (для збільшення зображення, натиснути на ньому ЛКМ)



---


Редагування блоку контенту сторінкиГАЛЕРЕЯ

24. Очистити область дії тегу table
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


25. Створити в області дії тегу table ТРИ комірки (комірки в яких будуть відображено зображення) в одному рядку:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


26. Відкрити сторінку index.html в Блокнот++, та скопіювати ВСЮ інформацію щодо ЗАПУСКУ, та ВИРІВНЮВАННЯ модального вікна
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


27. Відкрити в Блокнот++ до сторінки galery.html, та вставити ВСЮ скопійовану інформацію в зону дії тегу td. Отримати:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


28. Додати цю ж інформацію в інші (дві) комірки.


29. В першій комірці змінити імена (адреси) зображень, що будуть відкриватися
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка. В другій, та ВСІХ наступних комірках файли ІНШІ (gall_02.png, gall_03.png, gall_04.png, …)
Файл gall_01.png обробити (створити) в растровому графічному редакторі (розмір, тип, …)


30. В ДУГІЙ комірці змінити посилання для запуску, та вирівнювання картинки
    
    (для збільшення зображення, натиснути на ньому ЛКМ)

Примітка. Для кожної наступної комірки це посилання різне (третьої - #win3, четвертої - #win4, … )

31. Переконатися, що в третій комірці записана інформація про картинку.


32. Зберегти зміни в файлі galery.html, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5).
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


33. Додати підписи картинкам (кожен запис провести під конкретною коміркою).
    Для цього, перейти в Блокнот++ до сторінки galery.html, та створити РЯДОК таблиці з ТРЬОМА комірками (під існуючими). Отримати:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


34. В зоні дії тегу вписати інформацію про відповідні картинки:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


35. Зменшити шрифт для коментарів, використовуючи тег small
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


36. Зберегти зміни в файлі galery.html, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5).
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


37. Додати горизонтальний розділювач під коментарі картинок.
    Для цього, перейти в Блокнот++ до сторінки galery.html, та створити РЯДОК таблиці з трьома ОБ’ЄДНАНИМИ комірками (під існуючими). Отримати:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


38. Записати в зону дії тегу інформацію про горизонтальний розділювач ширина якого становить 60% ширини комірки в якій він знаходиться, та вирівняти розділювач по центру:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


39. Зберегти зміни в файлі galery.html, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5).
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


40. Додати ще ТРИ картинки (в один рядок), та здійснити підписи під ними (без горизонтального розділювача)
41. Зберегти зміни в файлі galery.html, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5).
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


42. Перевірити правильність відкривання картинок:
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


В разі успіху – висновок, сторінку ГАЛЕРЕЯ налаштовано.

---


Налаштування сторінки КОНТАКТИ
Редагування блок меню сторінки КОНТАКТИ

43. Перейти в папку site
44. Зробити копію сторінки services.html (спосіб створення копії обрати самостійно)
45. Перейменувати скопійовану сторінку на cont.html (важливо правильне перейменування, так як на сторінці вже задано ці імена)
46. Відкрити сторінку cont.html в Блокнот++
47. Самостійно налаштувати блок МЕНЮ (аналогічно до сторінок ПОСЛУГИ, КОЛЕКТИВ, ГАЛЕРЕЯ, ...).
48. Зберегти зміни в файлі cont.html, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5).
    
    (для збільшення зображення, натиснути на ньому ЛКМ)



---


Редагування блоку контенту КОНТАКТИ
В блоці сторінки буде таблиця такої структури:

(для збільшення зображення, натиснути на ньому ЛКМ)

49. Перейти в Блокнот++ до сторінки cont.html, та самостійно створити таблицю заданої структури
50. Вставити інформацію в блоки зазначені на схемі

Примітка. Переглянути як створити, та додати google-форму на сайт можна тут.
Щоб додати google-карту, натиснути тут


51. Зберегти зміни в файлі cont.html, та переглянути ці ж зміни в браузері (перед переглядом, в браузері натиснути F5).
    
    (для збільшення зображення, натиснути на ньому ЛКМ)


Сторінка КОНТАКТИ, а разом з нею ВЕСЬ сайт налаштовано.

Продемонструвати роботу викладачу

---

 

Домашнє завдання:

• ...