Основи Web дизайну 1 2 3 Базові концепції

Зарегистрируйтесь, чтобы просмотреть полный документ!

Основи Web дизайну 1. 2. 3. Базові концепції Web дизайну Процес створення Web сайту Коротка характеристика мови розмітки гіпертексту. Структура HTML документа.

Базові концепції Web дизайну Дизайн – намір, план, мета, творчий задум, проект, креслення, розрахунок, конструкція, мистецтво композиції, витвір мистецтва. У широкому розумінні – дизайн – це будь яке проектування, тобто процес створення нових предметів, інструментів, устаткування. У вузькому розумінні – це художнє конструювання. Його мета проектування предметів, форма яких відповідає їх призначенню. Одним з сучасних різновидів дизайну є Web дизайн – це вид проектної діяльності, заснований на застосуванні специфічних інструментів (комп'ютера і програмних редакторів), спеціальних мов програмування (HTML, Java. Script, Java, Perl, C++, PHP тощо) і мережевих технологій. Метою Web дизайну є проектування (створення) об'єктів (Web сторінок, банерів, аплетів, скриптів, окремих елементів Web сторінок), що розміщуються в мережі Інтернет.

Базові концепції Web дизайну Web сторінка – це звичайний тестовий файл у відповідному кодуванні з розширенням *. htm, *. html, *. shtml тощо, у якому описується вся сторінка за допомогою мови гіпертекстової розмітки – HTML (Hyper Text Markup Language). Web сторінка – інформаційна стаття, яка має певне призначення, зберігається в окремому файлі та пов'язана з іншими сторінками. Одним з базових понять Web проектування є Web вузол (Web сайт), що представляє собою спеціальну папку (каталог), де розміщенні файли, що містять текстову інформацію з будь якої теми, а також рисунки, графіки, фотографії, анімаційні зображення та звуковий супровід. Файли, що входять до цієї структури з розширенням *. htm або *. html містять описи Web сторінок, які створюють сайт на одній з мов розмітки гіпертексту.

Базові концепції Web дизайну Як правило, всі ці сторінки містять один домен і вони становлять загальний інформаційних простір (тобто присвячені одній або кільком пов'язаним між собою темам). Можна виділити 3 типи Web вузлів: o локальний (віртуальний) Web вузол, що знаходиться на жорсткому диску автономного ПК, не підєднаного до компютерної мережі; o корпоративний сайт в корпоративній мережі підприємства або організації на базі власного Web серверу; o сайт, розміщенний на Web сервері провайдера Інтернет.

Базові концепції Web дизайну ЗАГОЛОВОК Логотип Елем енти навіг ації Рекламний банер Текстове поле Лічильник Реквізити автора, адреса E-mail

Процес створення Web сайту Деревоподібна структура

Процес створення Web сайту Лінійна структура

Процес створення Web сайту Лінійна структура з альтернативами

Процес створення Web сайту Лінійна структура з переходами

Процес створення Web сайту Таблична структура

Коротка характеристика мови розмітки гіпертексту. Існує три мови гіпертекстової розмітки: 1. SGML (Standart Generalized Markup Language) – стандартна мова гіпертекстової розмітки; 2. HTML (Hyper Text Markup Language)– мова розмітки гіпертексту; 3. XML (e. Xtensible Markup Language)– розширювана мова розмітки

Коротка характеристика мови розмітки гіпертексту. На сьогоднішній день існує три основні способи розробки і тестування Web сторінок: 1. Підготовка HTML коду у будь якому текстовому редакторі з наступним переглядом готового матеріалу в Інтернет браузері; 2. Експорт документів, підготовлених за допомогою MS Office або його аналога в гіпертекстові формати (HTML або XML); 3. Підготовка HTML – сторінок за допомогою спеціального редактора HTML

Коротка характеристика мови розмітки гіпертексту. Мова розмітки гіпертексту HTML містить у своєму словнику певну множину команд дескипторів (тегів), інтерпретація яких Інтернет браузером призводить до візуалізації та наступної обробки Web документа. Дескриптори допомагають браузеру здійснити синтаксичний та семантичний аналіз документу – вказують на гіперпосилання, фрагменти тексту, що виділяються, графічні об'єкти тощо. З формальної точки зору дескриптори представляють собою певні ключові слова, що поміщені в кутові дужки < > для відмінності їх від іншого вмісту HTML документу. Враховуючи те, що Web документ – це впорядкований набір об'єктів, дескриптори задають місцерозташування об'єктів в документі, а також їх властивості та методи обробки.

Коротка характеристика мови розмітки гіпертексту. Мова HTML надає розробникам засоби для: o Публікації HTML документів з заголовками, текстом, таблицями, списками, рисунками і т. і. o Навігації по HTML документам за допомогою гіперпосилань. o Розробки форм для обміну даними з відділеними службами, що можуть бути використані при пошуку інформації, в електронній комерції і т. і. o Включення електронних таблиць, відео та аудіо кліпів та інших додатків безпосередньо в HTML документи.

Коротка характеристика мови розмітки гіпертексту. Текстовий HTML документ представляє собою звичайний текстовий файл з розширенням HTML або HTM. Відзначимо, що в назві файлу можливо використовувати тільки символи латинського алфавіту, арабські цифри, символи дефісу (" ") та підкреслення ("_"). В цьому документі може міститись інформація двох типів: звичайний текст та команди (теги) мови HTML.

Коротка характеристика мови розмітки гіпертексту. Всі теги мови HTML документу виділяються обмежуючими символами (< та >), між якими записується ідентифікатор (ім’я) тегу. Розрізняють одинарні та парні теги. Наведемо приклад одинарного тегу для відображення у вікні браузера горизонтальної лінії <hr>. На відміну від одинарного для визначення парного тегу (тегу-контейнеру) використовуються відкриваючий та закриваючий тег. Закриваючий тег відрізняється наявністю символу / перед іменем тегу. Наприклад: <td> Зміст тегу </td> Все, що записано між відкриваючим та закриваючим тегом називають змістом тегу. В деяких випадках закриваючий тег можливо не використовувати. Наприклад тег контейнер <li> можливо використовувати без закриваючого тегу </li>.

Коротка характеристика мови розмітки гіпертексту. Теги можуть мати параметри (атрибути). Наприклад, для визначення розміру тексту в тезі можливо використати атрибут size: Кількість та номенклатура параметрів індивідуальні для кожного тегу. Якщо параметрів декілька, то вони відокремлюються між собою за допомогою пробілів. Наприклад: Відзначимо, що як імена тегів, так і імена параметрів не чутливі до регістру символів, за допомогою яких вони визначені. Таким чином, визначення тегів та рівнозначне.

Коротка характеристика мови розмітки гіпертексту. Розрізняють параметри тегів, які потребують запису значення та параметри, які використовуються без значення. Якщо параметр тегу не потребує запису значення, то використовується тільки назва параметру. Наприклад: Якщо параметр тегу потребує запису значення, то воно вказується після назви параметру після символу "=". Значення параметру може записуватись як в одинарних або подвійних лапках, так і взагалі без лапок. Наприклад: <td align='left'> <td align="left"> <td align=left> Проте рекомендується записувати значення параметру в одинарних або подвійних лапках.

Коротка характеристика мови розмітки гіпертексту. Важливою особливістю мови HTML є те, що неправильно записані теги або параметри тегів ігноруються браузером. При цьому браузер не показує ніякого повідомлення та переходить до інтерпретації інших частин HTML документу. Мова HTML передбачає можливість використання кольорового форматування HTML документу. При цьому кольори визначаються або за допомогою англійських назв, або в форматі RGB (Red Green Blue). Приклади визначення кольорів за допомогою англійських назв: green – зелений. red – червоний. blue – синій. white – білий black – чорний.

Коротка характеристика мови розмітки гіпертексту. Хоча такий спосіб визначення кольору досить зручний, але він обмежений кількістю відповідних назв. Тому більш поширений є спосіб визначення кольорів у форматі RGB, який дозволяє використовувати більш ніж 1, 5 млн. кольорів. Передумовою використання формату RGB є те, що будь який колір можливо визначити за допомогою трьох кольорів: червоного (red), зеленого (green) та синього (blue). В форматі RGB кожному із цих кольорів може відповідати число від 0 до 256, записане в шістнадцятичному форматі. Відсутність даного кольору відповідає числу 0 (00), а максимальна насиченість числу 256 (ff). Синтаксис RGB передбачає використання знаку "#". Приклади визначення кольорів в форматі RGB: Червоний – #ff 0000. Зелений – #00 ff 00. Синій – #0000 ff. Чорний – #00000. Білий – #fffffff.

Коротка характеристика мови розмітки гіпертексту. Для створення HTML документу достатньо використовувати текстовий редактор, який не вставляє в текст документу власних команд. Прикладом може бути редактор "Блокнот", що входить в стандартну комплектацію операційної системи Windows. Технологія створення HTML документу в випадку застосування "Блокноту" полягає в тому, що Web програміст визначає текст HTML документу та теги, що в ньому використовуються. Після цього HTML документ зберігається у файлі формату html або htm та тестується за допомогою браузеру. Після виправлення помилок HTML документ може бути розміщений на Web сервері.

Коротка характеристика мови розмітки гіпертексту. HTML файли мають довільне компонування, що включає різноманітні елементи, але зазвичай містить 2 розділи: Розділ заголовку (HEAD) Тіло документа (BODY) Отже, загальна структура HTML-документа така: <HTML> – початок документа <HEAD> – заголовок документа (може бути відсутнім) </HEAD> – кінець заголовка документа <BODY> – тіло документа </BODY> </HTML> – кінець документа

Коротка характеристика мови розмітки гіпертексту. Першим тегом, з якого слід починати опис HTML-документу, є тег <html>. Він завжди повинен починати опис документу, а завершати опис повинен тег </html>. Тобто тег <html> є тегом контейнером для всієї HTMLсторінки. Сам документ є звичайним текстовим ASCIIфайлом і може складатися із двох розділів заголовка та змістовної частини. Розділ заголовка відкривається тегом <head> і закривається тегом </head>. Задачею заголовку є надання браузеру інформації, необхідної для коректного відображення HTML-сторінки. Теги, що знаходяться всередині розділу заголовку (крім назви документу), на екрані не відображаються. Назву документу визначають за допомогою тегу контейнеру <title>. Наприклад: <title> Назва HTML-сторінки </title>

Коротка характеристика мови розмітки гіпертексту. Змістовна частина документу, що не містить фреймів, визначається тегом контейнером <body>. Тобто весь текст та всі теги змістовної частини документу знаходиться між тегами <body> та </body>. Таким чином, для визначення простої HTML сторінки досить написати: <html> <head> <title> Заголовок моєї Web сторінки</title> </head> <body> Зміст Web сторінки </body> </html>

Коротка характеристика мови розмітки гіпертексту. Відзначимо, що в розділі заголовку досить часто використовується тег <meta>. За допомогою цього тегу вирішують деякі типові задачі: Визначення кодування тексту HTML сторінки. Наприклад, визначення того, що кодування тексту HTML сторінки, задане в найпоширенішому серед вітчизняних користувачів форматі windows 1251, можливо здійснити так: <META http equiv=Content Type content="text/html; charset=windows 1251"> Визначення ключових слів, що використовуються пошуковими системами. Наприклад, визначення ключових слів "економіка" та "торгівля" можливо здійснити так: <META name="keywords" content="економіка, торгівля"> Визначення опису HTML сторінки в пошуковій системі. <META name="description" content = "сайт, присвячений економіці та торгівлі "> Відображення в браузері визначеної HTML сторінки. Наприклад, для переходу на HTML сторінку 1. html через 20 секунд після відображення поточної HTML сторінки необхідно: <meta http equiv="refresh" content="20; URL=untitled 1. html">

Коротка характеристика мови розмітки гіпертексту. Також необхідно відзначити, що тег <body> може мати ряд необов’язкових параметрів, які визначають форматування всієї HTML сторінки. Параметр alink background bottommargin bgcolor bgproperties leftmargin link rightmargin Призначення Визначає колір активного гіперпосилання Вказує на адресу фонового зображення Визначає межу нижнього поля документу Визначає колір фону документу Дозволяє або забороняє прокрутку фонового зображення Визначає межу лівого поля документу Визначає колір не переглянутого гіперпосилання Визначає межу правого поля документу

Коротка характеристика мови розмітки гіпертексту. Параметр scroll text topmargin vlink Призначення Встановлює або забороняє смуги прокрутки вікна браузера Визначає колір тексту Визначає межу верхнього поля документу Визначає колір переглянутого гіперпосилання

Коротка характеристика мови розмітки гіпертексту. Елементи заголовку <h 1> Найбільший заголовок</h 1> <h 2>. . . </h 2> <h 3>. . . </h 3> <h 4>. . . </h 4> <h 5>. . . </h 5> <h 6>Найменший заголовок</h 6> Теги вирівнювання елементів на сторінці <CENTER> Вирівнювання до центру </CENTER> <LEFT> Вирівнювання до лівого краю </LEFT> <RIGHT> Вирівнювання до правого краю </RIGHT>

Коротка характеристика мови розмітки гіпертексту. Елементи тексту Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. На ступне післятега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка <hr> У рядку буде проведена горизонтальна лінія <pre>Вставка форматованого в текстовому редакторі фрагменту тексту </pre>

Коротка характеристика мови розмітки гіпертексту. Фізичні стилі Товстий шрифт тексту Шрифт курсив Підкреслений шрифт Нижній індекс. Наприклад, щоб отримати вираз Н 2 О, пишуть H2О Верхній індекс, наприклад, 1 а вулиця, а 2 <BIG> Великий шрифт</BIG> Малий шрифт

Коротка характеристика мови розмітки гіпертексту. Використання коментарів та спеціальних символів В деяких випадках необхідно не показувати у вікні браузера частину HTML коду сторінки, тобто "за коментувати" цей код. Д ля цього використовуються теги коментарів . Наприклад:  Як відомо, при створенні HTML сторінки повинні застосовуватись тільки символи, що входять до базової частини таблиці кодів ASCII. Проте деякі спеціальні символи( наприклад, пробіл ) не входять до цієї частини таблиці. В випадку використання вказаних спеціальних символів необхідно застосовувати спеціальні HTML коди

Коротка характеристика мови розмітки гіпертексту. Рисунки Для вставки рисунка в HTML сторінку використовується тег <img>. Основним параметром цього тегу є параметр src, за допомогою якого вказується адреса файлу, в якому і зберігається рисунок. Цей же тег також можливо використовувати для показу відео роликів. В цьому випадку використовується параметр dynsrc, за допомогою якого вказується адреса відео файлу. Найпоширенішими форматами файлів рисунків є формати jpg, gif, png, а відео файлів avi. Відзначимо, що адреса файлу рисунка може бути вказана в абсолютному та відносному форматі. При використані абсолютного формату в адресі повністю визначено комп’ютер, каталог та файл рисунку.

Коротка характеристика мови розмітки гіпертексту. Рисунки Наприклад, для вставки рисунка, що зберігається в файлі logo. gif за адресою www. picture. com. ua/picture необхідно: <img src=" www. picture. com. ua/picture/logo. gif"> При використанні відносного формату визначення місцезнаходження файлу рисунку відбувається з урахуванням місцезнаходження даної HTML сторінки. Наприклад, для вставки в HTML сторінку prim. html рисунка, який зберігається в файлі logo. gif, що знаходиться в одному каталозі з файлом prim. html необхідно: <img src="logo. gif"> Графічні файли зручно зберігати в окремому каталозі, наприклад, в каталозі з іменем img. В цьому випадку для вставки в HTML сторінку prim. html рисунка logo. gif необхідно: <img src="img/logo. gif"> Відзначимо, що каталог img та файл prim. html повинні знаходитись в одному каталозі. Крім обов’язкового параметру src тег <img> має декілька необов’язкових параметрів

Коротка характеристика мови розмітки гіпертексту. Гіперпосилання Як відомо, гіперпосилання призначені для зв’язування одного Web ресурсу з іншим. Гіперпосилання складається із двох частин. Перша частина – це об’єкт, який користувач бачить у вікні браузера, і вибір якого призводить до переходу на цільовий Web ресурс, URL адреса якого вказана в другій частині гіперпосилання. В якості цього об’єкту можуть бути текст або/та зображення. В залежності від цього класифікують текстові та графічні гіперпосилання. При типових настройках браузера гіперпосилання виділяються на HTML сторінці за допомогою кольору. Крім того текст гіперпосилання виділений за допомогою підкреслення. Для визначення гіперпосилання в коді HTML сторінки використовують парний тег <a>. Основним параметром цього тегу є параметр href, що задає URL адресу гіперпосилання. Синтаксис запису гіперпосилання такий: <a href=" URL-адресу "> Текстовий або графічний об’єкт </a> Приклади запису текстового та графічного гіперпосилання показані нижче: <a href="www. meta. ua"> Текстове гіперпосилання </a> <a href="www. meta. ua"> <img src="logo. gif"> </a>

Коротка характеристика мови розмітки гіпертексту. Гіперпосилання Вказана URL адреса може бути відносна або абсолютна. При використанні відносної адреси повний шлях до цільового ресурсу не заданий. В цьому випадку визначення місцезнаходження цільового ресурсу відбувається з урахуванням місцезнаходження HTML сторінки, в якій використане гіперпосилання. Наприклад, якщо в файлі 1. html визначене гіперпосилання: <a href="2. html "> Текстовий або графічний об’єкт </a> то мається на увазі, що цільова HTML сторінка 2. html знаходиться в тому ж каталозі того ж комп’ютера, в якому знаходиться і HTML сторінка 1. html. Абсолютною називається URL адреса, в якій повністю визначено комп’ютер, каталог та файл цільового ресурсу. Наприклад: <a href="www. example. com/html/3. html"> Абсолютне гіперпосилання</a>

Коротка характеристика мови розмітки гіпертексту. Списки широко розповсюджена форма показу даних як в електронних так і в друкованих документах. Мовою HTML передбачено використання трьох стандартних видів списків: маркірованого, нумерованого та списку визначень. Відзначимо, що від інших елементів на HTML сторінці стандартні списки відділяються порожніми рядками. Список може мати заголовок, який охоплюють тегами <LH>. . . </LH>, наприклад: <LH> Це заголовок списку </LН>. Ненумерований список утворюють за допомогою парного тега <UL> </UL> і одинарних тегів <LI>. Нумерований список створюють, використовуючи парний тег <OL>. . . </OL> з необов'язковим параметром TYPE і одинарний тег <LI>.

Коротка характеристика мови розмітки гіпертексту. Списки Список визначень використовують для пояснення термі нів, створення словників тощо. Його утворюють за допомогою парного тега <DL>. . . </DL> і двох одинарних тегів <DT> і <DD> так: <LH>3 aголовок</LH> <DL> <DT> термін <DD> тлумачення 1 <DD> тлумачення 2. . . </DL>

Коротка характеристика мови розмітки гіпертексту. Таблиці Особливість використання таблиць полягає в тому, що вони є основним засобом форматування HTML документів. Розміщення інформації в HTML документі, виконане за допомогою інших засобів (тегів), має або набагато менші можливості, або не однаково відображається браузерами різних типів. Для побудови таблиці необхідно використати теги контейнери: тег таблиці <table>, тег рядка <tr> та тег комірки даних <td> або тег комірки заголовка <th>. При цьому таблиця має бути розміщена в тілі HTML документу, будується вона рядками, причому кількість комірок в рядках повинна бути однакова. Таким чином одній таблиці відповідає один тег <table> та стільки тегів <tr>, скільки рядків має таблиця. Якщо в таблиці немає об’єднання комірок, то сумарна кількість тегів <td> та <th> дорівнює добутку кількості рядків на кількість колонок таблиці.

Коротка характеристика мови розмітки гіпертексту. Таблиці Різниця між тегами <td> та <th> полягає в форматуванні та вирівнюванні розміщеного в них тексту. В тезі <td> текст відображається стандартним шрифтом з горизонтальним вирівнюванням "по лівому краю". В тезі <th> текст відображається напівжирним шрифтом з горизонтальним вирівнюванням "по середині". Для розміщення інформації (тексту або графіки ) в середині таблиці необхідно помістити її в тег комірки. Таблиця може мати заголовок, якому відповідає парний тег <caption>, він має бути розміщений після тегу <table> до першого тегу <tr>.

Коротка характеристика мови розмітки гіпертексту. Фрейми Фреймова структура HTML-документу дозволяє розділити вікно браузера на декілька прямокутних областей (фреймів), в кожну із яких можливо завантажити окремий HTML документ. Між фреймами можливо організувати взаємодію. Сенс взаємодії між фреймами полягає в тому, що вибір посилання в одному із фреймів може призвести до завантаження вказаного HTML документу в інший фрейм. В основному фрейми застосовуються для організації управління завантаженням HTML документів в певну область вікна браузера при роботі користувача в іншій області, тобто для організації меню. Хоча на сьогодні фреймова структура досить широко застосовуються, але вона не відповідає сучасним тенденціям в галузі побудови Web сайтів. Особливістю HTML документу із фреймовою структурою є те, що кількість html файлів на одиницю більше від кількості фреймів. Причиною цього є необхідність використання окремого html файлу для визначення фреймової структури.

Коротка характеристика мови розмітки гіпертексту. Фреймова структура HTML документу визначається за допомогою тегу контейнеру <frameset>, що використовується замість тегу <body>. Тег <frameset> може мати параметри rows та cols, за допомогою яких визначається кількість та розміри областей, на які розділяється вікно браузера. За допомогою параметру rows вікно браузеру розділяється на горизонтальні області, а за допомогою параметру cols на вертикальні області. Синтаксис запису тегу: <frameset rows="висота_1, висота_2. . . " cols="ширина_1, ширина_1. . . "> <frameset cols="25%, 75%"> <frame src="page 1. htm"> <frame src="page 2. htm"> </frameset>

Скачать презентацию Основи Web дизайну 1 2 3 Базові концепції

Основи Web-дизайну.ppt

Количество слайдов: 41