Пошук по сайту

Iнформатика  лекції  Курсова робота  Рефераты  

Тема: Основи веб-дизайну

Тема: Основи веб-дизайну





Дисципліна:Інформатика

Заняття

Тема:Основи веб-дизайну.

Мета:ознайомити основними поняттями мови HTML, тег, гіперсилок, розглянути структуру веб-сайтів, призначенням та огляд середовища редактора сайтів, формувати студентів до аналізу та синтезу, виховувати важність, акуратність, логічно вмотивовану послідовність дій.

Вид заняття:інтерактивналекція.

Тип уроку: засвоєння нових знань.

Базові поняття: мови HTML, тег, гіперсилки, веб-сайти, веб-сторінки.

Методи: демонстрацій,доміно, експрес-опитування, мозковий штурм, робота в парах, акваріум, незакінчені речення «Я довідався, Я використав, Я навчився.., Я думаю».

Форми роботи: індивідуальна робота, парна робота за комп’ютером, фронтальна.

Дидактичні засоби:карточки, презентація.

Обладнання:мультимедійний комплекс, презентація, картки з тестами.

Література:

1) О.Ю. Гаєвський, "Інформатика, 7-11" , Київ, "А.С.К." , 2005. Глава 14. Створення WEB-сторінок та WEB-сайтів, Ст.376-406.

2) В.Д.Руденко, О.М. Макарчук, М.О. Патланжоглу "Базовий курс інформатики", Книга 2. Інформаційні технології, 8-11. Київ, видавнича група BHV. Частина 3. Основи веб-дизайну.Ст.216-307.

3) Я.М.Глинський, "Інформатика, 10-11.Інформаційні технології". Львів, 2008, Розділ 5. Глобальна мережа Інтернет.§ 5-7.Ст.243-261.
……………………………Структура заняття ……………………….………
І. Організаційна частина заняття. …………………….…..….…………..1-2 хв.

ІІ. Актуалізація опорних знань.…………….…..….……………………3 хв.

ІІІ. Мотивація навчальної діяльності студента……………….…..….……4 хв.

ІV. Оголошення теми, мети, плану заняття.…………….….…………...1-2 хв.

V. Вивчення нового матеріалу. …………………………..….……………45 хв.

VІ. Осмислення знань …………..….…….….….………….……..….….…10 хв.

VІІ. Узагальнення і систематизація знань. …..….…………………….....15 хв.

VIІІ. Підведення підсумків заняття …………….….….….….…….….…...3 хв.

ІХ. Домашнє завдання. . ………………………….….….….….……....……2 хв.

……………………………. Хід заняття ……………………………………….
І. Організаційна частина заняття. Привітання. Підготовка аудиторії до заняття. Перевірка студентів.
ІІ. Актуалізація опорних знань.

Технологія «Експрес - опитування».

Дає можливість перевірити знання студентів попередньо-вивченого матеріалу.
Вправа «Запитання-Відповідь».

1. Що ви знаєте про службу WWW?

2. Для чого потрібна служба WWW?

3. Що, по-вашому, необхідно для створення веб-сторінок?

4. За допомогою чого можна створювати веб-сторінки.
ІІІ. Мотивація навчальної діяльності студента.

Ви хочете йти в ногу з часом, мати свою сторінку в Інтернеті, рекламувати свої можливості широкій аудиторії?

Просто бажаєте знайти нових друзів і заявити на весь світ про себе?

Цікавитеся послугами з веб-дизайну та створення веб-сайтів?

На заняттях під час вивчення цієї теми ви зробите свій перший крок до створення сайту.
ІV. Оголошення теми, мети, плану заняття.

Тема, яку ми починаємо вивчати, має назву «Основи веб-дизайну».
V. Вивчення нового матеріалу.

Технологія «Демонстрація».

Навчання засноване на наочному пред'явленні навчаються динамічних зображень (на відміну від методу ілюстрацій, при використанні якого наочність статична): сюжетів, подій і явищ в цілому, у тому числі наукових процесів, дії систем і механізмів, а також окремих предметів - з метою їх вивчення, детального розгляду та обговорення.
Що таке Інтернет?

Інтернет це глобальна мережа, яка об’єднує комп’ютерні мережі.

InterNet:

  • inter – "між"

  • net, network – "мережа"

Як виник Інтернет?

1958 - Створення ARPA (Advanced Research Project Agency) в США.

1960-ті- Проект комп’ютерної мережі ARPANet

    • в мережі немає єдиного центру;

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

    • зв’язок між мережами через спеціальні вузли
      шлюзи;

    • пакетний обмін даними;

1968 - Перша мережа нового типу з 4-х комп’ютерів.

1972 - В мережі – 50 університетів і лабораторій.

1974 - Розробка протоколу обміну даними TCP/IP

Перші служби:

    • TelNet – віддалене керування комп’ютером в режимі командного рядка

    • FTP (File Transfer Protocol) – прийом і передача файлів

    • Електронна пошта (e-mail, electronic mail) – обмін повідомленнями

1982 - Європейська UNIX-мережа (до того – США, Канада,
Англія)

1983 - Мережа розділена на дві частини:

    • MilNet – для воєнних цілей США

    • Internet – загальнодоступна мережа

1984 - Система доменних імен (DNS)
(адреси виду www.mail.ru)

1989 - В Інтернеті 100 000 комп’ютерів.

1991 - Розробка WWW (WorldWideWeb) – Т. Бернес-Лі, обмін інформацією в вигляді гіпертексту

1991- Росія підключилась до Інтернету.

1994 - Перші Інтернет-магазини.

2000 - Більше 20 млн. сайтів.
Технологія «Мозковий штурм»

Колективне обговорення, пошук рішень шляхом вільного висловлювання думок цих учасників.
Можливості Інтернету (служби, сервіси)

  • WWW (WorldWideWeb) – гіпертекстові документи

Гіпертекст – це текст, в якому слово або словосполучення може бути активним посиланням на інший документ

Гіпермедіа– документи з активними посиланнями, які містять текст, малюнки, звук, відео.

  • Електронна пошта (e-mail)

  • FTP (обмін файлами)

  • Форуми (групи новин, конференції, телеконференції)

  • Підписка на новини

  • Пошукові системи

  • Чати (chat– базікання)

  • Приватне спілкування в реальному часі

    • ICQ (ISeekYou) – розмова 1-1, в групі, обмін файлами

  • Інтернет-телефон

    • Skype + колонки + мікрофон


Протоколи Інтернету

Протокол– це набір домовленостей і правил, які визначають порядок обміну інформацією в комп’ютерній мережі.

  • Протокол TCP/IP (1974)

    • TCP (TransmissionControlProtocol)

      • файл ділиться на пакети розміром не більше 1,5 Кб

      • пакети передаються незалежно один від одного

      • в місці призначення пакети збираються в один файл

    • IP (Internet Protocol)

      • визначає найкращий маршрут руху пакетів



  • HTTP (HyperText Transfer Protocol) – служба WWW

  • FTP (File Transfer Protocol) – служба FTP

  • SMTP (Simple Mail Transfer Protocol) – відправка повідомлень електронної пошти

  • POP3 (Post Office Protocol) – отримання повідомлень електронної пошти (потрібен пароль)



WorldWideWeb дослівно ця назва перекладається як "Павутиння , шириною на весь світ", але її як правило називають Всесвітнім павутинням, або Web - ситемою, або WWW.
Для пропозиції своїх ресурсів досить великій аудіторії користувачів мережа Web спирається на такі механізми:

  • Єдина система найменувань, за якими ресурси можуть бути знайдені в мережі, основана на так званих адресах URL (UniformResourceLocator - уніфікований показник інформаційного ресурсу);



  • Протокол для організації доступу до іменованих ресурсів за допомогою мережі, в якості якого виступає протокол НТТР (HyperTextTransferProtocol - протокол передачі гіпертекстових файлів);

  • Доменні адреси. Домен– це група комп’ютерів, об’єднаних за деякою ознакою.



  • Перетворення адресів. DNS(DomainNameService)– служба доменних імен, які перетворюють доменне ім’я в IP-адресу.запит сервера DNS для одержання IP-адреси сайту www.google.com

      • очікування відповіді

      • запит Web-сторінки по отриманому IP-адресу: 66.102.9.47

  • Гіпертекст, який полегшує навігацію по ресурсах, для створення якого використовується мова HTML (HyperTextMarkupLanguage - мова розмітки гіпертексту).


Розвиток WWW останнім часом значним чином здійснюється шляхом активного впровадження нових принципів та технологій, які отримали спільну назву Веб 2.0. Сам термін Веб 2.0 вперше з'явився в 2004 році та покликаний ілюструвати якісні зміни в WWW на 2-му десятилітті його існування. Веб 2.0 є логічним вдосконаленням Веб. Головною особливістю Веб 2.0 є покращення та пришвидшення взаємодії веб-сайтів з користувачами, що призвело до стрімкого зростання активності користувачів. Це проявилось у:

  • участі в Інтернет-спільнотах (зокрема, в форумах);

  • розміщенні коментарів на сайтах;

  • ведення персональних журналів (блогів);

  • розміщення посилань у WWW.

  • Веб 2.0 запровадив активний обмін даними, зокрема:

  • експорт новин між сайтами;

  • активна агрегація інформації зі сайтів.

  • використання API для відокремлення даних сайту від самого сайту

З точки зору реалізації сайтів Веб 2.0 підвищує вимоги до простоти та зручності сайтів для звичайних користувачів та націлений на стрімке падіння кваліфікації користувачів у близькому майбутньому.

Мові HTML притаманні перелічені нижче характеристики:

- Простота. Так як мова SGML(StandartGeneralizedMarkupLanguage - стандартна узагальнена мова розмітки), на базі котрої була створена HTML, відрізнялася великою складністю. Частково велика швидкість розвитку Web була обумовлена простотою HTML, що дозволяло достатньо швидко створювати документи та розташовувати їх на серверах.

- Універсальність. HTML та мови, створені на його основі, можуть відібражатись практично на будь-якому комп'ютері, а також на багатьох спеціалізованих пристроях.

- Сумісність знизу. Розробляючи просту систему для використання в Internet, Бернерс-Лі усвідомлював, що з часом будуть здійснені спроби розширення мови HTML. Щоб забеспечити умови вільного росту системи, він сформулював наступне правило: "Нові версії мови не повинні суперечити його попереднім реалізаціям". У зв'язку з цим ріст WorldWideWeb не передбачав обов'язкові оновлення цієї системи. Нові версії HTML були лише розширеннями старих версій.

Мова HTML виникла в результаті тривалого процесу розвитку гіперстекстових інформаційних систем. Ідея цих систем була запропонована В.Бушем в пропозиції по створенню електормеханічної інформаційної системи Memex.

Ідея гіпертекстової інформаційної системи складається з того, що користувач має можливість продивлятися документи (сторінки тексту) у тому порядку, який йому більш подобається, а не послідовно, як це робиться при читанні книг.

Тому термін "гіпертекст" можна визначити як нелінійний текст. Це досягається шляхом створення спеціального механізму для зв'язку з різноманітними сторінками тексту за допомогою гіпертектового посилання, тобто в звичайному тексті є "лінійні" посилання по типу "наступний-попередній", а у гіпертексті можна побудувати скільки завгодно інших посилань. Прикладами гіпертексту є енциклопедії, в яких текст кожної статті вміщує в собі посилання на інші статті, а ті, в свою чергу, на якісь інші.

Гіпертекстові системи являють собою дуже зручні засоби зберігання та зв'язку різної інформаціі, яка використовується на багатьох комп'ютерах, з'єднаних у мережу.

Посилання бувають

  • статистичними,

  • дінамічними,

  • асоційованими,

Подальший розвиток цього підходу веде до розширення поняття гіпертексту за рахунок включення в нього інших інформаційних ресурсів, наприклад, графікі, аудіо- та відеоінформації - до понять гіпермедіа.
Серед нововведень можна назвати такі, як:

  • Інтернаціоналізація. Документи можливо було створювати на будь-якій мові і легко передавати по всьому світові. Нині HTML надає підтримку різних мов в документі.

  • Таблиці. У документах дається більший контроль над структурою і версткою таблиць. Web-дизайнери зможуть вказати ту ширину колонки, яка потрібна, що дозволить браузерам відображати дані частково (як вони поступають), замість того, щоб чекати, поки вся таблиця буде завантажена для подальшого огляду.

  • Складені документи. Пропонує стандартний механізм для внесення в документи зображення, відео, звука, математичних формул, спеціалізованих програмних доповнень та інших об'єктів.

  • Таблиці стилів. Таблиці стилів спрощують розмітку HTML-документів і дають як авторам, так і користувачам можливість керувати оформленням документів.

Сценарії. Використовуючи сценарії, автори мають можливість створювати "інтелектуальні Web-сторінки", які реагують на інформацію, що додає користувач, змінюючи вигляд і вміст HTML-документа. Сценарії дозволяють створювати динамічні сторінки, а також використовувати HTML як засіб для побудови мережевих додатків.

Веб-сторінка(англ. Web-page) — інформаційний ресурс, доступний у мережі WorldWideWeb, який можна переглянути у веб-браузері. Інформація

записана у форматі HTML або XHTML і може містити гіпертекст із навігаційними гіперпосиланнями на інші веб-сторінки.

Веб-сайт (англ. website, місце, майданчик в Інтернеті), також сайт (англ. site, місце, майданчик) — сукупність веб-сторінок, доступних в Інтернеті, які об’єднані як за змістом, так і навігаційно. Фізично сайт може розміщуватися як на одному, так і на кількох серверах.



Прикладивеб-сторінок:



Як створити веб-сайт?

Створення веб-сайту починається зі створення інформаційної моделі сайту.

Будь-яку веб-сторінку можна оцінити за двома параметрами:

  • зміст ,

  • зовнішній вигляд.

Спочатку потрібно вирішити, яку інформацію потрібно на ній розмістити. Необхідно детально проаналізувати, скільки і якої інформації потрібно подати на веб-сторінці.Створюючи проект сайту, потрібно добре продумати його загальну структуру, зміст інформації та посилання.

Вибір структури визначається особливостями завдань, що розв’язують за допомогою веб-сайту.

Етапи створення сайту

Створення сайту умовно можна поділити на такі етапи:

  • попередній етап розроблення сайту: на цьому етапі розв’язують питання загального характеру. Обговорюють загальну концепцію сайту, формулюють та фіксують цілі створення сайту;

  • етап проектування сайту визначення структури сайту: меню, посилання, розміщення модулів, побудова списку компонентів, що підключаються, тощо;

  • етап розроблення і тестування сайту;

  • розміщення сайту;

  • розвиток ресурсу.

Схеми структур сайтів:

  • Стандартна. Основна веб-сторінка містить посилання на інші документи веб-сайту, а документи містять посилання, відповідно, на основну веб-сторінку.



  • Каскад. Відвідувачі сайту можуть переміщуватись тільки в одному з напрямків, вперед або назад.



  • Хмарочос. У цій моделі відвідувачі можуть опинитися на деяких сторінках, тільки якщо вони йдуть правильним шляхом. Це нагадує підйом до потрібної кімнати у великому хмарочосі.



  • Павутина. У цьому випадку всі сторінки веб-сайту містять посилання на інші сторінки, і користувач може легко перейти з будь-якої сторінки практично на будь-яку іншу.



Основою мови HTML є команди-дескриптори (теги), вказуючи правила форматування документа.

Атрибут – це компонент тегу, що містить команду про те, як браузер повинен зрозуміти і обробити тег.

Теги: одиночні і парні.

Структура html-файлу:





</b>НазваWeb-сторінки<b>





Зміст сторінки: текст, графіка, посилання,..


поділитися в соціальних мережах



Схожі:

Програма курсу за вибором “основи веб-дизайну” Для організації профільного...
Завданнями курсу є формування в учнів розуміння принципів організації веб-ресурсів, формування й розвинення навиків роботи з сучасними...

До Запрошення до участі в тендері
Створення ефективного та зручного у користуванні дизайну веб-сайту для пат «кредобанк». Корпоративний дизайн повинен бути впроваджений...

Програма курсу за вибором «Інструменти для веб-дизайну»
Розділ Програми допрофільних, профільних, спеціалізованих курсів, курсів за вибором з інформатики

Веб-сторінки та гіперпосилання
Мета. Формувати уявлення учнів про веб-сторінки, адресу веб-сторінки, гіперпосилання, сайт, вміння користуватися гіперпосиланнями;...

Урок 3 Тема: Веб-енциклопедії. Дистанційне навчання. Електронні словники...
Навчальна мета: Познайомити учнів з основами роботи із веб-енциклопедіями, електронними словниками й програмами-перекладачами, поняттям...

Конспект уроку Урок№19 4) Тема уроку
Протоколи Інтернету. Адресація в Інтернеті, поняття ip-адреси, доменного імені та url-адреси. Способи підключення до Інтернету, функції...

Тема уроку
Дати уявлення про служби Інтернету. Сформувати поняття гіпертекстового документа, гіперпосилання, веб-сторінки та веб-сайта. Дати...

«Робота з електронною поштою через веб-інтерфейс. Практична робота...
Тема: «Робота з електронною поштою через веб-інтерфейс. Практична робота № Електронне листування через веб-інтерфейс»

Програма призначена для розвитку та виховання творчих, інтелектуальних,...
України, всесвітня історія, основи правознавства, основи економіки І підприємництва, основи філософських знань, громадянська освіта...

Програма курсу за вибором «основи інтернету»
Мета курсу досягається через практич­не оволодіння учнями навичками роботи в світовому інформаційному веб-просторі, використання...



База даних захищена авторським правом © 2017
звернутися до адміністрації




info.ocvita.com.ua
Головна сторінка