2

МІНІСТЕРСТВО ОСВІТИ І НАУКИ, МОЛОДІ ТА СПОРТУ УКРАЇНИ

Київський національний університет будівництва і архітектури

О. Ю. Філімонова, Г. Л. Васильєва, Ю. І. Мінаєва

Web-дизайн

Конспект лекцій

Зміст

Вступ ............................................................................................................... 4 Лекція 1. HTML-документ ............................................................................ 5 1.1. Гіпертекстовий документ ................................................................... 5 1.2. Мова HTML .......................................................................................... 6 1.3. Структура HTML-документа .............................................................. 7 Лекція 2. Посилання і форми у HTML-документі .................................... 12 2.1. Посилання. Розмітка зв’язків ........................................................... 12 2.2. Вбудовані зображення ...................................................................... 13 2.3. Загальний шлюзовий інтерфейс і форми HTML ............................ 14 Лекція 3. Фрейми і таблиці у HTML-документі ....................................... 16 3.1. Фрейми................................................................................................ 16 3.2. Дизайн Web-сторінок з використанням таблиць ........................... 16 3.3. Таблиці і графіка ................................................................................ 20 Лекція 4. Створення Web-сторінок у Microsoft Office SharePoint

Designer ......................................................................................................... 21 4.1. Інтерфейс Microsoft SharePoint Designer 2010 ................................ 22 4.2. Запуск SharePoint Designer 2010 ...................................................... 23 4.3. Основи настройки сайтів у SharePoint Designer 2010 .................... 25 4.4. Управління бізнес-процесами .......................................................... 30 4.5. Розгортання налаштовуваних рішень SharePoint ........................... 34 4.6. Відкриття і збереження сайтів SharePoint ....................................... 35 4.7. Створення списків, бібліотек і підключень до джерел даних ...... 36 4.8. Створення представлень і форм, що налаштовуються .................. 37 4.9. Створення робочих процесів, що налаштовуються ....................... 38 4.10. Розробка сторінок сайту, головних сторінок і макетів сторінок .. 39

3

4.11. Додавання сторінок на сайт SharePoint ........................................... 40 4.12. Створення сторінок Web-частин ...................................................... 41 4.13. Створення сторінки на основі головної сторінки .......................... 42 4.14. Створення окремих сторінок ASPX і HTML .................................. 43 Лекція 5. Поради по роботі з власною Web-сторінкою ........................... 45 5.1. Безкоштовне розміщення Web-сторінки ......................................... 45 5.2. Ваш власний універсальний локатор ресурсу ................................ 47 5.3. Безкоштовна реєстрація вашої Web-сторінки у пошукових

машинах Internet .......................................................................................... 47 5.4. Web-сервер ......................................................................................... 48 5.5. Зручна навігація ................................................................................. 49 5.6. Дизайн першої сторінки .................................................................... 49 5.7. Графічні формати Web-дизайну ...................................................... 50 Додаток 1. Розкладка кольорової гами по RGB-складовим ................... 56 Додаток 2. Основні теги мови HTML (HyperText Markup Language) ... 60 Додаток 3. Типи файлів, які можна зустріти в Internet ........................... 68 Додаток 4. Тлумачний словник ................................................................. 72

4

Вступ

Подорожуючи по мережі Internet, ви, напевно, звернули увагу на

різний вигляд Web-сторінок. Деякі сторінки виглядають красиво і

повністю заповнені потрібною вам інформацією. Інші – неестетичні і

заповнені, як правило, всілякою нісенітницею. Розробкою і тих, і інших

сторінок займаються користувачі, що називають себе Web-дизайнерами

або Web-майстрами. Зрозуміло, що хороший вигляд Web-сторінки

безпосередньо залежить від того, як користувач володіє інтелектуальною

дисципліною, що має назву Web-дизайн.

Web-дизайн – це далеко не коди HTML! Саме на цих самих кодах

зациклюються багато програмістів, забуваючи про головне – красивий

дизайн, функціональність і зміст. Професійний дизайн Web-сторінок і

серверів WWW може бути виконаний і не програмістом.

Вважається, що графічне наповнення Web-сторінки повинне бути

виконано в єдиному стилі. Ця обставина, зокрема, і характеризує

професійне створення Web–сторінки. Далі вже йдуть засоби того, як це

втілити в мережі Internet. Перш за все потрібно розглянути колір, шапку,

меню, таблиці і посилання. Зокрема, колір в Web-дизайні підкоряється тим

самим законам, що і в препрес-дизайні. Наприклад, пастельні кольори і

яскраві кольори вважаються єдиними стильовими елементами, а холодні

сірі пролонгують фіолетову колірну гаму і найближчий до неї спектр.

Web-сторінки можна створювати декількома способами – з нуля або

на основі існуючого шаблону. Якщо трапляються проблеми при тестуванні

створеного документа, то вирішити цю проблему може вже не редактор, а

звичайний браузер – оглядач WWW. Якщо у вас є колекція картинок,

фонів, маркерів і роздільників, то створення Web-сторінок – захоплююче

заняття. Крім всього цього, пам'ятайте, що вам обов'язково знадобиться

програмне забезпечення для перетворення звичайних текстових файлів у

файли формату HyperText Markup Language.

Хороший редактор Web-сторінок повинен, з одного боку, дозволяти

редагувати код HTML, а з іншого – переглядати зроблені таким чином

зміни в режимі безпосереднього перегляду.

5

Лекція 1. HTML-ДОКУМЕНТ

1.1. Гіпертекстовий документ

Всесвітня павутина (WWW – World Wide Web) складається з html-

документів – текстових документів, розмічених за допомогою мови HTML.

Під гіпертекстовим документом розуміють документ, що містить

посилання на інший документ. Реалізовано це через протокол передачі

гіпертексту HTTP (HyperText Transfer Protocol). Html-документ – це

звичайний текстовий документ, до якого внесена розмітка

(гіперпосилання). Кожен елемент має ім'я, і може мати атрибути, які

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

Інформація в Web-документах може бути знайдена за ключовими

словами. Кожен оглядач World Wide Web містить гіперпосилання, через

які утворюються так звані гіперзв'язки, що дозволяють мільйонам

користувачів Internet вести пошук інформації по всьому світу. Web-

документи можуть відкривати доступ до інших ресурсів Internet,

наприклад, до електронної пошти, FTP, Gopher, WAIS або конференціям

Usenet. Одним з таких засобів переміщення по мережі Internet є

вбудований у Windows браузер Microsoft Internet Explorer.

Пошук документу в Internet проводиться за адресою URL (Uniform

Resource Locator), синтаксис якої такий: protocol://hostport/path, де hostport

– адреса сервера з відповідним номером порта, яка відображає так звану

машинну адресацію: числову або літерну; path - шлях.

Замість аргументу protocol може стояти: http – протокол передачі

гіпертекстової інформації, ftp – протокол передачі файлів, telnet –

термінальний доступ, gopher – попередник WWW, afs – файлова система

Internet, news – конференції Usenet, wais - система баз даних Internet.

Домени Internet. Всі вузли World Wide Web класифіковані

Міжнародним центром мережевої інформації (NIC) на шість доменів

першого рівня: com – комерційні підприємства, наприклад, провайдери

Internet; edu – освітні установи, коледжі і університети, наприклад,

www.knuba.edu.ua; net – діючі мережі, наприклад, Network Information

Center; org – непрофесійні організації; mil – військові мережі; gov – урядові

установи, наприклад, whitehouse.gov.

Окрім цього, існують географічні домени першого рівня, наприклад,

домени ua, uk, jp, us, ru представляють відповідно Україну,

Великобританію, Японію, США та Росію.

6

Web-сторінки (гіпертекстові документи) – це файли, які мають

унікальну адресу і відображуються браузерами.

Web-сторінки можуть бути:

статичними;

динамічними;

інтерактивними.

Статичні Web-сторінки – це статичні файли (набір тексту, таблиць,

малюнків тощо), які створюється за допомогою мови розмітки HTML і

мають розширення .html або .htm.

Динамічні Web-сторінки – це сторінки, що згенеровані або

сформовані в процесі виконання запиту користувача. Ці сторінки пишуться

мовою PHP, ASP тощо і мають відповідні розширення .php, .aspx.

Динамічні сторінки створюються так званим движком (Content Managment

System – Система Управління Контентом) або спеціальною програмою на

сервері, яка по запитах користувачів формує Web-сторінку з даних, що

зберігаються на сервері в базі даних.

Інтерактивні Web-сторінки – це сторінки, які включають форми

(створені на мовах PHP, JavaScript і VbScript тощо), за допомогою яких

відбувається обмін даними між користувачем і сервером.

Web-сторінки створюються за допомогою різних html-редакторів:

Microsoft Frontpage, Macromedia Dreamweaver тощо. Для того, щоб

навчитися створювати Web-сторінки і сайти, доцільно використовувати

редактор Frontpage 2003. У редакторі Frontpage існують майстри, що

містять розмітку (структуру) і дизайн, необхідні для швидкого створення

Web-сторінок.

Створювати Web-сторінки можна не лише за допомогою звичайного

текстового редактора, вставляючи досить прості команди в текст

документа. Існує безліч html-редакторів: Corelwebdesinger, Frontpage

Express, Microsoft Word.

1.2. Мова HTML

В даний час існує маса редакторів Web-сторінок, які не вимагають

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

готувати гіпертекстові документи, потрібно знати їх внутрішню будову,

тобто код документа HTML. HTML дозволяє формувати різну

гіпертекстову інформацію на основі структурованих документів. Оглядач

визначає сформовані посилання і через протокол передачі гіпертексту

7

HTTP, відкриває доступ до документа іншим користувачам Internet.

Зрозуміло, для успішної реалізації цього необхідний програмний продукт,

повністю сумісний з WWW і підтримуючий HTML.

Гіпертекстові документи створюються на базі мови HTML

(HyperText Markup Language). Ця мова проста, управляючі коди, які,

власне, і компілюються оглядачем для відображення на екрані,

складаються з тексту ASCII. Посилання, списки, заголовки, картинки і

форми називаються елементами мови HTML.

HTML-документ – це звичайний текстовий файл. Використовуючи,

наприклад, оглядач Netscape Navigator, можна проглянути результат

роботи, просто завантаживши в нього створений на основі синтаксису

HTML текстовий файл.

Гіпертекстова мова надає лише інформацію для читання. Це означає,

що редагувати Web-сторінки може лише той, хто їх створив, а не простий

користувач мережі Internet. Втім, можна сказати, що використовуючи

загальний шлюзовий інтерфейс (CGI), можна додавати деякі оператори

HTML у згенеровану сторінку.

1.3. Структура HTML-документа

Теги. Команди мови HTML задаються між спеціальними символами

– кутовими дужками < ... >, і називаються тегами (tag). Теги дозволяють

управляти представленням інформації на екрані у процесі відображення

html-документів спеціальними програмами – браузерами, наприклад,

Microsoft Internet Explorer або Netscape Navigator.

Теги можуть бути двох видів:

одноелементний тег: <...>; його достатньо вставити в текст для

виконання якоїсь дії;

парний тег: <...>...</...>; він впливає на текст, з того місця, де

вказаний, до того місця, де вказана ознака закінчення його дії. Ознакою

завершення команди служить той самий тег, тільки перед ним додається

символ " / " (слеш): <...> - тег, що відкривається, </...> - тег, що

закривається.

<HTML>...</HTML> – границі HTML-програми

Будь-який html-документ повинен починатися (і закінчуватися)

тегом <HTML>...</HTML>. Цей тег вказує на те, що даний документ

містить в собі html-текст.

Web-документ розбивається на дві логічні частини: заголовок і

основний зміст.

8

<HEAD> ... </HEAD> – заголовок HTML-програми

Заголовок також називають головою програми, він містить службову

інформацію, яка не відображається браузером, а також назву документа.

В голові програми звичайно пишеться ім'я вікна, що містить сторінку

(не більше 64 символів) за допомогою парного тегу < TITLE > ... </

TITLE >.

<BODY> ... </BODY> – основний зміст HTML-програми

Основний зміст або тіло програми вміщується в тег <BODY> ...

</BODY>. HTML не чутливий до регістра, тобто все одно якими буквами

писати: прописними або рядковими (наприклад BODY еквівалентно body

або Body).

Фон сторінки. Значення кольору в атрибутах HTML-мови може

задаватися кількома способами: назвою, наприклад "red"; кодом RGB,

наприклад "#FFFFFF"; в десятковому вигляді, наприклад "255, 0, 0" ; у

відсотках, наприклад "30%, 40%, 30%".

Код RGB – це три шістнадцятерічних числа в діапазоні 00 – FF:

відповідно, кількість червоного, зеленого і синього тонів у кольорі.

Наприклад, #000000 - це чорний колір (відсутність кольору), #FF0000 –

яскраво-червоний, #00FF00 – яскраво-зелений, #0000FF – яскраво-синій, а

#FFFFFF – білий (всі кольори присутні повністю). У десятковому вигляді і

у відсотках також задаються інтенсивності червоної, зеленої і синьої

складових у результуючому кольорі.

Таблиці 16 стандартних і додаткових кольорів наведені у Додатку 1.

Колір фону задає слово BGCOLOR.

Приклад:

<HTML>

<HEAD>

<TITLE>Дистанційне навчання в Internet</TITLE>

</HEAD>

<BODY BGCOLOR= #FFFBF0> Сайт присвячений дистанційному

навчанню в мережі Internet. Теми навчання: Web-дизайн, комп’ютерні

мережі, інформаційні системи в менеджменті.

</HTML></BODY>

Фонова картинка. Фоном також можна зробити картинку.

Командне слово BACKGROUND підключає картинку як фон і вказує

шлях до картинки. (Як фонову картинку можна використати будь-який

файл з розширенням GIF або JPG.)

9

Теги виділення фрагментів тексту. Теги виділення фрагментів

тексту дозволяють управляти відображенням окремих символів і слів.

I пише текст курсивом, B - напівжирний шрифт, U – підкреслений

шрифт, SUP

– верхній індекс, SUB – нижній індекс. Можливе використання

комбінованих виділень.

Розмір тексту. Існує два способи управління розміром тексту:

використання стилів заголовка і завдання розміру шрифту основного

документа або розміру поточного шрифту.

Рівні заголовків <Hx>. Перший рівень заголовків (найбільший)

позначається цифрою 1, наступний – 2 і так далі. Більшість браузерів

підтримують інтерпретацію шести рівнів заголовків, визначаючи кожному

з них власний стиль. Зазвичай браузер виділяє заголовки жирним

шрифтом. Заголовки вище за шостий рівень не є стандартом і можуть не

підтримуватися браузером.

<Hx> Заголовок x-го рівня </Hx>

x – цифра від 1 до 6, що визначає рівень заголовка, чим більше цифра

тим менше розмір.

Приклад:

<HTML>

<HEAD>

<TITLE> Дистанційне навчання в Internet </TITLE>

</HEAD>

<BODY BACKGROUND="папка\1.jpg" BGPROPERTIES=FIXED>

<P><H2><I> Сайт, присвячений дистанційному навчанню в мережі

Internet.</I></H2>

<P><H3> Теми навчання: <BR>

Web-дизайн, комп’ютерні мережі, інформаційні системи в

менеджменті. </H3>

</BODY>

</HTML>

Атрибут SIZE у тезі BASEFONT задає базовий (основний) розмір

шрифту Web-документу. Величина атрибуту може лежати в межах від 1 до 7.

За умовчанням використовується величина 3.

Тег FONT дозволяє задавати розмір поточного шрифту в окремих

місцях тексту в діапазоні від 1 до 7, для цього також використовується

атрибут SIZE. Шрифти можуть бути задані відносно базового: size=+число

size=-число.

10

Колір і вирівнювання тексту. За колір всього тексту відповідає

атрибут TEXT в тезі BODY.

Команда ALIGN розташовує текст справа (RIGHT), зліва (LEFT) і по

центру (CENTER). За умовчанням текст вирівнюється по лівому краю і має

нерівне праве поле.

Приклад:

<HTML>

<HEAD>

<TITLE> Дистанційне навчання в Internet </TITLE>

</HEAD>

<BODY BACKGROUND="папка\1.jpg" TEXT = blue

BGPROPERTIES=FIXED>

<BASEFONT SIZE = 4>

<P ALIGN=CENTER><Font size=+2 COLOR=#FF0000

FACE="Arial"><I> Сайт, присвячений дистанційному навчанню в мережі

Internet.</I></Font>

<P> <BIG> Теми навчання: </BIG> <BR>

Web-дизайн, комп’ютерні мережі, інформаційні системи в

менеджменті.

</BODY>

</HTML>

Розміщення графіки. Тег HR малює горизонтальну лінію, не

вимагає закриваючого тегу.

Команда SIZE – управляє товщиною лінії, а команда WIDTH –

довжиною. Довжину можна задавати як в пікселях, так і у відсотках

відносно ширини вікна, наприклад <HR SIZE=1 WIDTH=50%>. За

умовчанням, товщина лінії становить 2 пікселі і довжина дорівнює ширині

вікна.

Використання малюнків робить сторінки цікавішими. Як ми вже

говорили, картинка – це файл з розширенням GIF або JPG (JPEG). Кожна

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

тому не варто включати в документ велику кількість ілюстрацій або

ілюстрації великого розміру.

Вставити картинку можна за допомогою тегу IMG. Тег IMG є

одноелементним. У ньому використовується команда SRC – це ім'я файлу

картинки, наприклад <P><IMG SRC="Зима.jpg" >.

11

Списки. Списки поділяються на ненумеровані (<ul> <li> Елемент

списку </ul>), нумеровані (<ol> <li> Елемент списку </ol>), з описами

(<DL> <DT> Собака (елемент) <DD> Друг людини (опис елементу) </DL>)

і вкладені (<UL> <LI> Миша <OL> <LI> Оптична <LI> Механічна</OL>

<LI> Клавіатура <OL> <LI> Механічна <LI> Мембранна </UL>).

Виділення тексту. Текст в документі HTML може бути виділений

одним з таких способів:

<cite> – цитата </cite>;

<code> – програмний код </code>;

<dfn> – визначення </dfn>;

<em> – логічний акцент </em>;

<kbd> – введення з клавіатури </kbd>;

<samp> – повідомлення комп’ютеру </samp>;

<strong> – сильний акцент </strong>;

<var> – змінні </var>.

Запитання для самоконтролю

1. Що являє собою Глобальна мережа, всесвітня павутина?

2. Що таке Web-сайт, Web-сторінка, Web-сервер, гіпертекстовий і

гіпермедіа-документ?

3. Назвіть основні (стандартні) елементи Web-сторінки, їх

функціональне призначення.

4. Що таке HTML-програма?

5. Хто виконує HTML-програму?

6. Опишіть призначення мови розмітки гіпертексту (теги,

атрибути, конструкція HTML-документа).

7. Які теги використовуються для форматування тексту?

8. Записуючи абзац, між двома сусідніми словами ви поставили 5

пробілів: скільки пробілів ви побачите в браузері?

9. Які теги здатні змінити фон документа?

10. Які команди здатні змінити колір шрифту?

11. Які теги формують список?

12. Назвіть тег для вставки зображення на web-сторінку.

13. Назвіть ім'я атрибуту для завдання способу вирівнювання.

14. Як задається значення розміру шрифту в атрибуті size?

12

Лекція 2. ПОСИЛАННЯ І ФОРМИ У HTML-ДОКУМЕНТІ

2.1. Посилання. Розмітка зв’язків

HTML дозволяє зв’язати текст або картинку з іншими

гіпертекстовими документами. Текст, як правило, виділяється кольором

або оформляється підкресленням. Для цього використовується тег <A>.

Пам'ятайте, що після букви A повинен бути пробіл.

Один з варіантів гіпертекстового посилання може виглядати так:

<A HREF="TextFile.html">Text</A>

Тут слово Text посилається на документ TextFile.html, утворюючи

гіпертекстове посилання. Якщо документ, що формує посилання,

знаходиться в іншій папці, то подібне посилання називається відносним.

Посилання можна формувати на основі універсального локатора

ресурсу URL, тобто використовуючи синтаксис: protocol: //hostport/path.

Приклад:

<HTML>

<HEAD>

<TITLE>Дистанційне навчання в Internet</TITLE>

</HEAD>

<BODY>

<H1>Це документ №1</H1>

Далі йде:

<A HREF="Папка/2.html">Зв'язок з другим документом</A>

<P>

А другий абзац вказує на:

<A HREF="http://www.microsoft.com">Microsoft</A>

</BODY>

</HTML>

Попереднє форматування тексту. Тег <PRE> дозволяє формувати

текст, оформлений моноширинним шрифтом. Використовуйте цей тег для

оформлення листингів програм.

Розширені цитати. Тег <BLOCKQUOTE> дозволяє вам включити

цитату у відокремлений об'єкт.

Адреса. Тег <ADDRESS> дозволяє сформувати інформацію про

автора документа HTML.

13

2.2. Вбудовані зображення

Символи, які не можуть бути введені в текст документа

безпосередньо через клавіатуру називаються спеціальними символами. Для

таких символів існують особливі теги.

Чотири символи – знак менше <, знак більше >, амперсанд & і

подвійні лапки " мають спеціальне значення в HTML і не можуть бути

використані в тексті в своєму звичайному значенні.

Кутові дужки використовуються для позначення початку і кінця

HTML тегів, а амперсанд використовується для позначення так званої

escape-послідовності: в XML (в тому числі HTML) конструкція вигляду

&xxxx, де xxxx – число, дозволяє вивести символ з кодом XXXX із юнікод-

простору, у лапках вводиться значення, що надається рядковій або

символьній змінній.

Звуковідтворення. Для вставки у сторінку звукового файла,

наприклад, midi-файла, використовується така конструкція:

<EMBED SRC="bob1.mid" WIDTH="140" HEIGHT="50"

ALIGN="MIDDLE" BORDER="0" AUTOSTART=TRUE>,

де WIDTH - параметр, що задає ширину midi-плеєру, HEIGHT –

параметр, що визначає висоту midi-плеєру, BORDER – ширина рамки midi-

плеєру, AUTOSTART – запуск midi-плеєру відразу після завантаження

документу HTML.

Розподіл посилань по картинці. Використовуючи технологію

розподілу посилань по картинці, можна, наприклад, створити графічне

меню з однієї великої картинки так, щоб кожен елемент системи меню

містив певний URL. Розподіл посилань по картинці описується в тезі IMG

таким параметром: <IMG SRC="url" USEMAP="url#map_name">, де

аргумент USEMAP задає розташування схеми розподілення map_name в

URL. Якщо URL не вказаний, то пошук схеми map_name проводиться у

поточному документі.

Код схеми може виглядати так:

<MAP NAME="map_name">

<AREA [SHAPE=" shape "] COORDS="x,y,..." [HREF=" reference "]

[NOHREF]>

</MAP>

Тут були використані такі теги:

<AREA> – визначити для даного URL ділянку на картинці за

допомогою параметрів SHAPE і COORDS.

14

SHAPE – форма ділянки. Можливо виділити ділянку на картинці так:

n default – стандартна форма;

n rect – прямокутник;

n circle – коло;

n poly – багатокутник довільної форми.

COORDS – координати ділянки, задаються в пікселях. Відлік

починається з нуля. Круг має три координати, прямокутник – чотири, а для

багатокутника потрібно описати кожен його кут в двох координатах.

Наприклад, ділянка, що має розміри 50 на 50 пікселів, описується так:

<AREA COORDS="0,0,54,54" ...>

HREF="url" – визначити посилання на схемі.

NOHREF – вказати, що в даній ділянці картинки відсутнє посилання.

Цей параметр працює завжди, коли не визначений параметр HREF.

</MAP> – завершити опис схеми розподілення посилань по картинці.

2.3. Загальний шлюзовий інтерфейс і форми HTML

Загальний шлюзовий інтерфейс (Common Gateway Interface - CGI)

дозволяє працювати з даними сервера Web в інтерактивному режимі.

Сервер Web через CGI запускає пошукову програму і пересилає оброблені

дані назад. Сама програма CGI зберігається в каталозі CGI-BIN. Якщо CGI-

програма, наприклад, взаємодіє з системою управління базою даних, то

користувач може отримувати деяку інформацію, що цікавить його, в

інтерактивному режимі.

Передача даних від сервера до програми CGI здійснюється сервером

через командний рядок і змінні оточення. Таким чином, сервер через

загальний шлюзовий інтерфейс запускає програму CGI і пересилає їй дані,

що вводяться користувачем. Самі дані вводяться через так звані форми

HTML.

Форма є гіпертекстовою сторінкою з одним або декількома полями

даних і спеціальною кнопкою для передачі введеної інформації. Код

форми починається з тегу:

<FORM ACTION = /SGI-BIN/EXAMPLE.PL METHOD=GET>

і завершується тегом </FORM>.

Аргумент ACTION – це URL програми CGI, METHOD – параметр,

що задає режим передачі даних з форми в програму CGI.

Основні режими передачі – GET, HEAD і POST. Програма CGI

повинна підтримувати один з цих режимів, інакше обробка даних не

відбудеться.

15

У режимі GET дані входять через URL в рядок запиту. Програми CGI

отримують дані від змінних оточення і посилають вихідні дані через

загальний шлюзовий інтерфейс назад користувачеві. Наприклад, після

введення тегу <A HREF=EXAMPLE.HTML> на сервер піде запит GET

/EXAMPLE.HTML. Заголовок GET визначає здобуття документа

EXAMPLE.HTML у кореневому каталозі сервера.

INPUT TYPE=TEXT – вмістити в форму текстове поле даних.

NAME=NAME – визначити ім’я текстового поля даних NAME.

MXLENGTH=NUMBER – розмір текстового поля даних. NUMBER –

ціле число.

RADIO – визначити кнопку переключення.

NAME=PRODTYPE – визначити логічне поле PRODTYPE.

INPUT TYPE=CHECKBOX – визначити прапорець для протоколу

передачі.

ACCEPT – метод, який використовується для інтерпретації файлів,

що пересилаються. Файли можуть пересилатися у вигляді ASCII або

HTML.

Кількість заголовків ACCEPT відповідає типам даних MIME

(Multipurpose Internet Mail Extensions). Заголовок ACCEPT:

TYPE/SUBTYPE {parameters} пересилається як значення параметра

ACCEPT. Кожен тип даних має власний параметр ACCEPT.

Запитання для самоконтролю

1. Опишіть основи Web-дизайну (академічний стиль, шрифт, колір,

контраст, графіка, анімація).

2. Як розміщується графіка на Web-сторінці?

3. Яким чином виконується побудова гіпертекстових зв'язків

(внутрішні і зовнішні гіперпосилання)?

4. Що таке відносне посилання?

5. Як включається цитата у відокремлений об’єкт?

6. Як формується інформація про автора документа HTML?

7. Для чого використовуються спеціальні символи HTML?

8. Як виконується вставка у сторінку звукового файла?

9. Опишіть розподіл посилань по картинці.

10. Як задається форма і координати ділянки?

11. Охарактеризуйте загальний шлюзовий інтерфейс.

12. Назвіть теги і параметри коду форми.

16

Лекція 3. ФРЕЙМИ І ТАБЛИЦІ У HTML-ДОКУМЕНТІ

3.1. Фрейми

Технологія фреймування у HTML дозволяє переглядати в одному

вікні оглядача декілька гіпертекстових документів. Один фрейм

відображує лише один гіпертекстовий документ.

Створення фрейму. Створення фрейму здійснюється через тег

<FRAMESET>. Тег <BODY> в цьому випадку не використовується. Тег

</FRAMESET > закінчує виконання коду після тегу <FRAMESET>.

Тег <FRAME SRC="Name1"> дозволяє описати перший фрейм, тобто

задати ім'я гіпертекстового документа. Другий фрейм описується тегом

<FRAME SRC="Name2" NAME="Main">.

Якщо браузер не підтримує фрейми, то між тегом <NOFRAMES> і

тегом </NOFRAMES> вводиться текст, який розпізнає браузер.

Властивості фреймів. Тег <FRAMESET COL="N1, N2,..> дозволяє

визначити кількість фреймів і задати розмір фреймів у відсотках від

розміру вікна браузера або зафіксувати ці розміри в пікселях.

Тег <FRAME> дозволяє налаштувати властивості фрейму, атрибути:

NAME= ім'я фрейму;

MARGINWIDTH= горизонтальний відступ (від 1 до 6) між фреймом

і його рамкою;

MARGINHEIGHT= вертикальний відступ (від 1 до 6) між фреймом і

його рамкою;

SCROLLING= прокрутка фрейму, підатрибут SCROLLING=YES

дозволяє створити лінійки прокрутки, SCROLLING=NO – вказує, що

лінійки прокрутки відсутні в даному фреймі, а підатрибут

SCROLLING=AUTO дозволяє відображати лінійки прокрутки залежно від

властивостей браузеру;

NORESIZE – фіксований розмір фрейму;

SRC= задати гіпертекстовий документ для цього фрейму;

TARGET=Name – відкрити посилання у фреймі з ім’ям Name.

3.2. Дизайн Web-сторінок з використанням таблиць

Потужний засіб HTML - таблиці – дозволяють створювати досить

складний дизайн Web-сторінки, наприклад, можна розташувати текст

документа в кількох колонках. Таблиці в HTML організуються як набір

стовпців і рядків. Клітинки таблиці можуть вміщувати такі HTML-

елементи, як заголовки, списки, абзаци, фігури, графіка, а також елементи

17

форм. Крім того, клітинка таблиці може вміщувати іншу таблицю. Спершу

створюється каркас таблиці.

<TABLE>...</TABLE> – тег таблиці. Всі елементи таблиці повинні

знаходитися всередині. Параметри тегу ALIGN, BORDER, CELLSPACING,

CELLPADDING, WIDTH відповідають за вирівнювання таблиці відносно

вікна браузеру, за наявність рамки в таблиці, за відстань між клітинками

таблиці і відступи у клітинках, за ширину таблиці (як у відсотках, так і у

пікселях).

<TR>...</TR> – тег рядка таблиці. Стандартними параметрами для рядка є

ALIGN і VALIGN, що відповідають за вирівнювання клітинок рядка по

горизонталі і по вертикалі.

Рядки містять клітинки, які створюються тегом <TD>...</TD> з тими

ж параметрами, що і в рядка.

Крім того, існують ще і теги, що дозволяють в самому коді ділити

таблицю на заголовок, тіло і висновок: THEAD, TBODY і TFOOT. Тег ТН

містить в собі форматування, що дозволяє виділяти жирним і вирівнювати

по центру текст заголовка таблиці. Правда, все це має сенс, якщо таблиця

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

найпростішому варіанті (з урахуванням всіх вищезгаданих тегів)

табличний код виглядає так:

<TABLE ALIGN=left BORDER=1 CELLSPACING=0

CELLPADDING=4 WIDTH=100%>

<THEAD>

<TR ALIGN=center VALIGN=top>

<TH VALIGN=top COLSPAN=3>Заголовок</TH>

</TR>

</THEAD>

<TBODY>

<TR ALIGN=center VALIGN=top>

<TD ALIGN=center VALIGN=top>Клітинка 1</TD>

<TD ALIGN=center VALIGN=top> Клітинка 2</TD>

<TD ALIGN=center VALIGN=top> Клітинка 3</TD>

</TR>

</TBODY>

<TFOOT>

<TR ALIGN=center VALIGN=top>

<TD ALIGN=center VALIGN=top COLSPAN=3>Висновок</TD>

18

</TR >

</TFOOT>

</TABLE>.

Створюючи таблицю, необхідно вказати ширину самої таблиці (а

інколи і висоту), ширину рядка і клітинок, горизонтальне вирівнювання

таблиці і клітинки, а також відстань між клітинками таблиці і відступи у

клітинках. При цьому ширина кожної клітинки в рядку, якщо їх декілька,

має бути указана так, щоб їх сума відповідала ширині рядка. Проте, якщо

вказати ширину клітинок, але опустити ширину рядка, то може з'явитися

неприємний ефект – "з'їдання" об'єктів (наприклад, кнопок HTML),

розташованих у клітинках.

Параметр COLSPAN у клітинках заголовка і висновку таблиці

застосовується, коли клітинок в рядках більше однієї і вказує, на ширину

скількох колонок розтягнеться дана клітинка. Аналогічний параметр, що

вказує кількість рядків, які "перекриваються", називається ROWSPAN.

Крім основних параметрів, в табличних тегах можуть

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

форматування таблиці. Це стандартні HTML-параметри фонового кольору,

кольору рамки (основної, "світлої" і "темної"), параметри STYLE і CLASS

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

кольорів і стилів, щоб таблиця виглядала гармонійно і не колола ока

строкатістю і неохайністю дизайну. Також, потрібно враховувати, що

Netscape Navigator за умовчанням використовує для оформлення рамки

таблиці об'ємну лінію. Він може частково "пофарбувати" її у вказаний

вами колір, але не визнає "ясно-темного" варіанту. По-друге, небезпека

ховається в самих таблицях. Нерідко, створюючи дизайн сторінки за

допомогою таблиці, ми забуваємо, що клітинки зв'язані одна з одною.

Навіть COLSPAN/ROWSPAN не дозволяють нам звільнитися повністю від

рамок стовпців і рядків таблиці. Адже дизайн вимагає, найчастіше,

"вільного" розташування елементів на сторінці. В цьому випадку

необхідно вдатися до "методу Матрьошки", при якому основна таблиця є

лише носієм інших, функціонально значущих таблиць, в яких і

розташовуються елементи дизайну. На прикладі це виглядає таким чином:

<TABLE ALIGN=center BORDER=1 CELLSPACING=0 CELLPADDING=0

WIDTH=100%>

<TR ALIGN=center VALIGN=top WIDTH=100%>

<TD VALIGN=top COLSPAN=3>

19

<!-- Заголовок -->

<TABLE ALIGN=center BORDER=1 bordercolor=red CELLSPACING=0

CELLPADDING=0 WIDTH=90%>

<TR ALIGN=center VALIGN=top WIDTH=100%>

<TD ALIGN=center VALIGN=top WIDTH=100%>Таблиця в заголовку

</TD></TR>

</TABLE>

<!-- Кінець Заголовку -->

</TD>

</TR>

<TR ALIGN=center VALIGN=top WIDTH=100%>

<TD ALIGN=center VALIGN=top WIDTH=33%>

<!-- Клітинка 1 -->

<TABLE ALIGN=center BORDER=1 bordercolor=blue CELLSPACING=0

CELLPADDING=0 WIDTH=90%>

<TR ALIGN=center VALIGN=top WIDTH=100%>

<TD ALIGN=center VALIGN=top WIDTH=100%> Таблиця в середній

частині</TD></TR>

</TABLE>

<!-- Кінець Клітинки 1 -->

</TD>

<TD ALIGN=center VALIGN=top WIDTH=34%>Клітинка 2</TD>

<TD ALIGN=center VALIGN=top WIDTH=33%>Клітинка 3</TD>

</TR>

<TR ALIGN=center VALIGN=top>

<TD VALIGN=top COLSPAN=3>

<!-- Висновок -->

<TABLE ALIGN=center BORDER=1 bordercolor=green CELLSPACING=0

CELLPADDING=0 WIDTH=90%>

<TR ALIGN=center VALIGN=top WIDTH=100%>

<TD ALIGN=center VALIGN=top WIDTH=100%>Таблиця в кінці</TD>

</TR>

</TABLE>

<!-- Кінець Висновку -->

</TD>

</TR>

</TABLE>

20

Такий спосіб позиціонування елементів на Web-сторінці дозволяє

розміщувати об'єкти відносно довільно, оскільки функціональні таблиці

"прив'язані" лише до розміру і формату клітинок, в яких вони знаходяться,

але не залежать від розміру і формату основної таблиці в цілому. Тому,

при такому позиціонуванні не з'являється ефекту розтягування, наприклад,

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

Web-сторінки при вставці в останню тексту великого розміру.

3.3. Таблиці і графіка

Таблиці є незамінним інструментом будь-якого Web-дизайнера для

розміщення графіки на сторінці. Це вже аксіома. Так, використовуючи

таблицю, можна згрупувати окремі графічні файли, що виконують

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

розміщення графіки в елементах таблиці теж може супроводжуватися

помилками.

Однією з найпоширеніших помилок є вставка малюнка в елемент

таблиці без використання параметра вирівнювання тегу <IMG>. Власне,

коли малюнок розташований у клітинці один і не супроводжується ні

текстом, ні якимись іншими об'єктами, це не важливо. Інакше відсутність

вирівнювання стає помітною і може зіпсувати весь дизайн. Річ у тому, що

тег малюнка (зображення) не успадковує параметрів вирівнювання

клітинки, він лише підкоряється їм, як будь-який інший об'єкт у клітинці.

Тому, наприклад, при будь-якому вирівнюванні у клітинці, текст

обов'язково "піде" під зображення. Але ви ж хочете, щоб текст його

"обтікав"? В даному випадку, необхідно вказати в тезі IMG параметр

вирівнювання ALIGN = LEFT або RIGHT. Тоді зображення буде м'яко

"оточено" текстом.

Також має сенс вказати параметри вертикального і горизонтального

відступів від зображення VSPACE і HSPACE, оскільки відступи, задані

для клітинки, також не успадковуються. В деяких випадках, необхідно,

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

нього. При цьому, "водорозділ" має бути дуже добре помітним.

У цьому випадку, використовуються два варіанти. Перший варіант: в

тезі <BR> використовується параметр CLEAR=LEFT або

CLEAR=RIGHT відповідно, і в цьому випадку частина тексту після тегу

<BR> піде під зображення, а у вирівнюванні останнього можна

використовувати властивість MIDDLE. Другий варіант: використовуючи

клітинки таблиці, помістити зображення в одну, "боковий" текст в

21

сусідню, а "нижній" – відповідно, у клітинку, розташовану в нижньому

рядку і розгорнуту на весь цей рядок (COLSPAN=2). Зрозуміло, що

останній спосіб громіздкий, зате гарантовано, що подібне розміщення

правильно інтерпретує будь-який браузер, що розуміє таблиці.

Другою поширеною помилкою є невідповідність розмірів клітинок з

розмірами зображення, що вставляється. Це небезпечно, коли розміри

зображення перевищують розміри клітинки. В цьому випадку клітинка

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

елементів на сторінці. Наприклад, використання графічної лінії як

роздільної лінії замість <BR>, без узгодження з розмірами клітинки-

"носія", може призвести до спотворення розмірів всієї таблиці. Уникнути

цього, звичайно ж, можна лише узгодженням розмірів.

Основні теги мови HTML (HyperText Markup Language) наведені у

Додатку 2.

Запитання для самоконтролю

1. Яким чином виконується вставка таблиць на Web-сторінці?

2. Коли використовується табличний дизайн?

3. Яке призначення фреймової структури?

4. Як здійснюється створення фрейму?

5. Які теги задають властивості фреймів?

6. Як створюються заголовок, тіло і висновок таблиці?

7. Як задається горизонтальне і вертикальне вирівнювання у

клітинках таблиці?

8. Яким чином виконується об’єднання клітин по горизонталі і

вертикалі?

9. Яким чином вставляються окремі таблиці у клітинки основної

таблиці?

10. Опишіть вставку зображення у елемент таблиці.

Лекція 4. СТВОРЕННЯ WEB-СТОРІНОК У MICROSOFT

OFFICE SHAREPOINT DESIGNER

В состав пакету додатків Microsoft Office версій до 2003 входить

FrontPage – WYSIWYG-редактор HTML. Програма при розробці сторінок

Web-вузла користується движком Internet Explorer (Trident). У браузерах,

що використовують інші движки (наприклад, Gecko), сторінки, створені за

допомогою Frontpage можуть відображуватися інакше. Програма має

широкий спектр можливостей, зокрема, може автоматично відправляти

22

зміни, внесені розробником сайту у вихідні тексти, в режимі реального

часу.

У Microsoft Office 2007 програма FrontPage замінена на Microsoft

Expression Web. У Microsoft Office 2010 програма FrontPage замінена на

Microsoft Office SharePoint Designer.

Microsoft Office SharePoint Designer – WYSIWYG HTML-редактор і

програма для Web-дизайну від компанії Microsoft, заміна для Microsoft

Office FrontPage, частина сімейства SharePoint. Програма є одним з

компонентів пакету Microsoft Office 2010, проте не включена ні в один з

комплектів пакету (встановлюється окремо). Перехід в назві від FrontPage

до SharePoint Designer пов'язаний з призначенням: створенням і дизайном

Web-сайтів Microsoft Sharepoint. Sharepoint Designer має той самий движок

HTML, що і Microsoft Expression Web і не спирається на движок Trident

браузера Internet Explorer.

Аналог SharePoint Designer, Microsoft Expression Web, дуже схожий

на нього і призначений для загальної Web-розробки.

У 2009 році Microsoft Office SharePoint Designer 2007 став

поширюватися безкоштовно для всіх бажаючих на офіційному сайті

Microsoft Office.

Microsoft SharePoint Designer 2010 – це програма для Web-дизайну і

розробки додатків, яка використовується для створення і налаштування

сайтів і додатків Sharepoint. Sharepoint Designer 2010 дозволяє створювати

Web-сторінки для роботи з даними і ефективні рішення на основі робочих

процесів, а також розробляти оформлення і вигляд сайту. У цьому

середовищі можна створювати як сайти невеликих проектних груп, так і

крупні портали з безліччю панелей моніторингу для цілого підприємства.

Додаток Sharepoint Designer 2010 надає унікальний інтерфейс для

створення сайтів і служить єдиним середовищем для розробки сайту,

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

процесу і розгортання сайту у вигляді пакетного рішення. Все це можна

зробити без написання програмного коду.

4.1. Інтерфейс Microsoft SharePoint Designer 2010

Сайти Sharepoint стають все більш складними, оскільки повинні

відповідати вимогам організацій всіх видів і розмірів. З баз даних

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

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

23

Конструктору сайту при цьому доводиться вникати не лише у

вимоги бізнесу, але і в суть самого середовища SharePoint і всіх частин

одного з її сайтів. Особливо важливо розуміти зв'язки між динамічними

компонентами сайту і мати можливість централізовано управляти ними.

SharePoint Designer 2010 є середовищем, в якому можна працювати

над сайтом, його списками і бібліотеками, сторінками, джерелами даних,

робочими процесами, дозволами і багато чим іншим. При цьому видно не

лише всі ці ключові компоненти сайту, але і взаємозв'язки між ними.

Робоче середовище є платформою, на основі якої розробляються і

створюються бізнес-рішення. Воно дозволяє підключатися до джерел

даних усередині і зовні SharePoint, представляти відомості користувачам і

отримувати дані від них за допомогою самого сайту SharePoint або

клієнтського додатка Office, створювати робочі процеси для автоматизації

бізнес-процесів і змінювати вигляд і оформлення сайту за допомогою

фірмової символіки організації.

Оскільки всі ці завдання виконуються в межах одного середовища, у

розробників залишається більше часу на проектування, створення і

налаштування рішень, і вони витрачають менше часу на пошук і оновлення

різних компонентів сайту за допомогою різних засобів.

4.2. Запуск SharePoint Designer 2010

SharePoint Designer 2010 – це клієнтський додаток, який

встановлюється на локальному комп'ютері. Програма тісно інтегрована з

середовищем Sharepoint. Таким чином, її можна запускати безпосередньо з

комп'ютера за допомогою меню Пуск системи Windows і з різних місць в

SharePoint (наприклад, меню Действия сайта).

Додаток SharePoint Designer 2010 можна відкрити під час виконання

різних операцій, наприклад при налаштуванні списків, представлень,

робочих процесів і головних сторінок. Якщо додаток не встановлений, то

при першому його запуску з SharePoint буде запропоновано завантажити і

встановити програму з мережі Internet. При наступному запуску SharePoint

Designer 2010 відкриється відразу.

Запуск додатку SharePoint Designer 2010 і його окремих функцій

може бути обмежений або заборонений за допомогою сторінки Настройка

SharePoint Designer. Якщо вам не удається виконати описані завдання,

можливо, причина в цьому.

24

Додаток SharePoint Designer 2010 призначений для роботи з сайтами

SharePoint 2010. Відкривати і налаштовувати сайти в ранніх версіях

Sharepoint за його допомогою не можна.

Вкладка Файл прикладної програми SharePoint Designer 2010.

При запуску додатку SharePoint Designer 2010 з меню Пуск системи

Windows з’являється вкладка Файл. На цьому екрані можна налаштувати

існуючий сайт або створити новий.

Якщо потрібно внести зміни до існуючого сайту, можна перейти

безпосередньо до нього, налаштувати сайт Мой сайт або вибрати один з

останніх відкритих в SharePoint Designer 2010 сайтів.

Створити сайт можна на основі порожнього шаблону, одного з

шаблонів в списку або одного з популярних шаблонів. При цьому

необхідно всього лише вказати сервер і ім'я сайту, після чого сайт буде

створений і відкритий в SharePoint Designer 2010.

Інтерфейс SharePoint Designer 2010. SharePoint Designer 2010

служить єдиним середовищем для створення, налаштування і розгортання

сайтів і рішень Sharepoint. Ці завдання виконуються за допомогою

інтерфейсу користувача, в якому відображуються всі компоненти сайту і

взаємозв'язки між ними.

При першому відкритті сайту виводяться зведені відомості про

нього, включаючи назву, опис, поточні дозволи і вкладені сайти.

Інтерфейс з трьох частин: засоби навігації, зведені дані і стрічка.

Інтерфейс Sharepoint Designer 2010, в якому проектуються і створюються

сайти, складається з трьох частин:

Область навігації використовується для навігації з основних

частин (компонентах) сайту.

На сторінках колекції і зведених даних представлені списки

компонентів всіх типів і зведені дані про конкретні компоненти.

Стрічка дозволяє виконувати дії з вибраним компонентом.

В області навігації представлені різні компоненти сайту: списки,

бібліотеки, типи контента, джерела даних, робочі процеси тощо. Щоб

внести до цих компонентів (наприклад, до списку повідомлень) зміни,

необхідно відкрити розділ Списки и библиотеки, після чого виконується

перехід на сторінку колекції, на якій доступні всі списки і бібліотеки.

Звідси можна відкрити список Извещения, внаслідок чого відкриється

сторінка зведення для даного списку. На сторінці зведення відображуються

25

пов'язані з цим об'єктом представлення, форми, робочі процеси і інші

компоненти. Щоб змінити одно з представлень, просто відкрийте його з

цієї сторінки. Під час відкриття представлення стрічка змінюється і на ній

з'являються стандартні команди, часто використовувані в поточному

контексті редагування представлень. Користувачі, знайомі зі стрічкою по

додатках Microsoft Office, знають, що вона істотно спрощує створення і

редагування документів. Завершивши редагування, натискайте кнопку

Назад або скористайтеся навігаційними посиланнями у верхній частині

сторінки, щоб повернутися на зведену сторінку сайту.

Інтерфейс SharePoint Designer 2010 дозволяє легко знайти потрібні

компоненти сайту, відкрити і змінити будь-який з них, а потім повернутися

в основне представлення сайту.

Відкриття вкладки Файл. Окрім роботи з різними об'єктами сайту,

в додатку SharePoint Designer 2010 можна переглядати параметри сайту

або додатку більш високого рівня і працювати з ними. Доступні команди

включають відкриття іншого сайту, додавання сторінок, імпорт файлів і

зміна параметрів додатку SharePoint Designer 2010. Всі ці завдання

виконуються на вкладці Файл – першому екрані, який з'являється відразу

ж під час запуску додатку SharePoint Designer 2010 з меню Пуск системи

Windows або за допомогою ярлика на робочому столі.

Щоб перейти в це представлення, відкрийте вкладку Файл в лівому

верхньому кутку. Натисніть кнопку Назад, щоб повернутися в інтерфейс

SharePoint Designer 2010.

4.3. Основи настройки сайтів у SharePoint Designer 2010

Додаток SharePoint Designer 2010 можна використовувати для

створення і налаштування сайтів і рішень, які містять логіку додатка, але

не вимагають написання коду. За його допомогою можна додавати і

змінювати джерела даних, набудовувати представлення списків і даних,

створювати і розгортати робочі процеси, розробляти фірмову символіку

компанії і виконувати інші операції. Проте всю повноту функцій і

можливостей Sharepoint Designer 2010 можна оцінити у процесі

перетворення готового сайту в справжнє бізнес-рішення для организації.

Підключення до даних усередині і зовні SharePoint. SharePoint

Designer 2010 дозволяє підключатися до різних джерел даних і інтегрувати

ці дані в сайт і клієнтські додатки Office. Завдяки цьому, користувачі

дістають можливість переглядати бізнес-дані і взаємодіяти з ними

безпосередньо на сайті і в певних програмах, замість того щоб

26

підключатися окремо до відповідних джерел. Безпосередньо зі стрічки

можна підключитися до зовнішньої бази даних, служби SOAP, служби

REST і інших джерел.

Можливість підключення до джерел даних є важливою функцією

SharePoint Designer 2010, що дозволяє забезпечити користувачам доступ до

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

одне ціле списки і бібліотеки, зовнішні бази і джерела даних, Web-служби і

інші компоненти.

Джерела даних, до яких можна підключатися за допомогою

SharePoint Designer 2010:

Списки і бібліотеки. Списки і бібліотеки — це стандартні джерела

даних сайту. Їх особливість порівняно з іншими джерелами даних полягає

в тому, що вони вже є частиною середовища SharePoint і використовують

ті ж бази даних, що і саме середовище. Виконувати додаткові дії для

створення підключень до цих джерел не потрібно: їх можна просто додати

з колекції Списки и библиотеки в додатку Sharepoint Designer 2010 або

через браузер. Створивши список або бібліотеку, можна налаштувати

пов'язані з ними стовпці, типи контенту і інші атрибути схеми.

Зовнішні бізнес-дані. Business Connectivity Services (BCS) – це

платформа на основі SharePoint, яка забезпечує стандартизовані

інтерфейси для існуючих бізнес-даних і бізнес-процесів. Служби BCS

дозволяють підключити зовнішні джерела бізнес-даних, такі як SQL Server,

SAP, Siebel, Web-служби і користувацькі додатки, до сайтів SharePoint і

додатків Office.

У SharePoint Designer 2010 підключення до зовнішніх даних

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

представляють дані в зовнішніх джерелах і містять детальні відомості про

підключення і опис об'єктів, які використовуються в бізнес-додатку,

способи створення, читання, оновлення і видалення даних, а також дії, які

користувачі можуть самостійно виконувати з відповідними об'єктами.

Зовнішні типи контенту зберігаються в каталозі бізнес-даних. Після

створення зовнішнього типа контенту користувачі організації можуть

легко створювати на його основі списки SharePoint, форми і робочі

процеси і навіть інтегрувати його з клієнтськими додатками Office.

Зовнішні дані стають частиною середовища SharePoint нарівні з іншими

компонентами, завдяки чому можна створювати призначені для

користувача інтерфейси для доступу до цих зовнішніх джерел даних.

27

Зовнішні бази даних. Додавши як джерело іншу базу даних, можна

інтегрувати її дані в сайт. Можна підключитися до сервера Microsoft SQL

Server, СУБД Oracle і будь-якої іншої бази даних, яка підтримує протоколи

OLE DB і ODBC. Необхідно лише знати ім'я сервера, на якому знаходиться

база, постачальника даних і тип перевірки достовірності, що

використовується. Додавши і налаштувавши базу даних як джерело, можна

створювати представлення і форми, що дозволяють користувачам читати

дані з джерела і записувати їх до нього, не покидаючи сайт SharePoint.

Web-служби XML, що працюють через SOAP. SOAP – це

протокол для обміну повідомленнями на основі XML, який дозволяє

підключатися до різних джерел даних за допомогою Web-служби XML. У

SharePoint Designer 2010 за його допомогою можна підключитися до

джерела даних на іншому сайті організації або до сайту в Internet

незалежно від використовуваних на ньому технологій, мови

програмування і платформи. За допомогою Web-служби XML можна

вивести на сайт конвертер валют, біржові котирування, калькулятор або

службу погоди.

Серверні скрипти, що працюють через REST. REST – це

архітектурна платформа мережевого програмного забезпечення, яка

використовує технології і протоколи Internet, але не є лише одним зі

способів створення Web-служб. За її допомогою можна отримувати дані з

сайту, зчитуючи спеціальний серверний скрипт, який описує відповідний

контент. Як і під час роботи за протоколом SOAP, за допомогою цієї

платформи можна підключатися в додатку SharePoint Designer 2010 до

джерел даних на інших сайтах і виводити на екран, наприклад, конвертер

валют, біржові котирування, калькулятор або службу погоди. Цей тип

підключення до даних простіше, ніж протокол SOAP, для реалізації, однак

працює лише за протоколом HTTP.

XML-файли джерел. Якщо дані в організації зберігаються в XML-

файлах, в додатку SharePoint Designer 2010 до таких файлів можна

підключатися як до джерел даних. При цьому XML-файлі можна створити

безпосередньо в SharePoint Designer 2010, імпортувати з комп'ютера або з

мережі або підключитися до них в зовнішньому розташуванні.

Створення інтерфейсів для роботи з даними. Встановивши

підключення до відповідних джерел даних, можна приступити до

створення інтерфейсів, за допомогою яких користувачі працюватимуть з

джерелами. Додаток SharePoint Designer 2010 дозволяє створювати

28

ефективні і динамічні призначені для користувача інтерфейси для доступу

до різних джерел з цілого ряду місць, включаючи сайт SharePoint, вікна,

області і поля в бізнес-додатках Office.

До числа елементів інтерфейсу, які можна створити, входять

представлення, форми, Web-частини, засоби навігації, а також вікна і

області завдань для клієнтських додатків Office. Така гнучкість дозволяє

розробляти призначені інтерфейси користувача для доступу до бізнес-

даних. Можна навіть об'єднувати в одному представленні декілька джерел

даних, створювати панелі моніторингу зі зв'язаними представленнями

елементів, розробляти форми для певних ролей користувача, а також

налаштовувати наявні панелі інструментів і команди стрічки, пов'язані з

даними.

Способи настройки інтерфейсів користувача, пов’язаних з

даними, у прикладній програмі SharePoint Designer 2010:

Представлення

Представлення дозволяють переглядати дані різними способами. За

допомогою представлень користувачі можуть переглядати потрібні

відомості в списках і бібліотеках або в зовнішніх джерелах. У SharePoint

Designer 2010 всі створювані представлення є представленнями даних, які

відображуються з використанням стилів XSLT і задіюють можливості

технології Microsoft ASP.NET. У представленні можна показувати і

приховувати поля, сортувати, фільтрувати і обчислювати дані,

застосовувати умовне форматування і виконувати інші операції. Доступні

декілька стилів представлень, що допомагають швидко приступити до

роботи. Будь-яке представлення можна створити і налаштувати відповідно

до використовуваної моделі даних і вимог користувачів і організації.

Форми

Для збору відомостей від користувачів створюються форми. Web-

форми, що гнучко налаштовуються, дозволяють користувачам легко

записувати дані в джерело. Аналогічно представленням, вигляд полів на

формі можна налаштувати залежно від стану даних, ролі користувача

тощо. За допомогою форм можна відображувати, редагувати і створювати

дані, а розробляються вони за допомогою вбудованого редактора форм

SharePoint Designer 2010 (для ASPX-файлів) або додатків Microsoft InfoPath

(для XSN-файлів).

Форми можна створювати і налаштовувати для роботи з певними

джерелами даних (наприклад, списками завдань). Крім того, вони

29

допомагають організувати збір призначених для користувача даних в

рамках робочого процесу, як буде описано далі.

Дії, що налаштовуються

За допомогою будівника дій, що налаштовуються, в додатку

SharePoint Designer 2010 можна створювати дії, що налаштовуються, такі

як посилання, значки і скрипти, які пов'язуються із стрічкою Sharepoint,

панелями інструментів і меню елементів списку.

У процесі додавання на сайт нових функцій можна спростити для

користувачів їх пошук і роботу з ними за допомогою меню SharePoint.

Крім того, за допомогою таких дій можна запропонувати користувачеві

виконати з об'єктом певний набір завдань (наприклад, почати робочий

процес для списку).

Web-частини

Web-частини – це модульні інформаційні компоненти (самодостатні

дані або функції), що додаються на сторінки SharePoint. Описані вище

представлення і форми зберігаються у Web-частинах, проте можна

додавати і Web-частини, що реалізовують додаткові функції і способи

взаємодії з даними. Користувачі можуть виконувати подальше

налаштування Web-частин в браузері, якщо ці Web-частини додані в зону

Web-частин в додатку Sharepoint Designer 2010. Web-частини і сторінки

Web-частин забезпечують ефективний спосіб налаштування Web-

інтерфейсів відповідно до вимог користувачів SharePoint.

Інтеграція з клієнтськими програмами

Відомості із зовнішніх джерел даних, що використовують зовнішні

типи контента, можна відображувати в клієнтських додатках, таких як

Microsoft Outlook 2010 і SharePoint Workspaces. За допомогою областей,

клієнтських форм і областей завдань можна створити інтерфейс, що

дозволяє користувачам читати, редагувати і видаляти зовнішні бізнес-дані

так, якби вони були частиною додатку. Завдяки цьому, користувачі можуть

працювати з бізнес-даними на вже знайомих і освоєних ними сайтах і в

додатках Office.

Навігація

Засоби навігації є найважливішим елементом створюваних для

користувачів інтерфейсів, і ними можна управляти у всьому середовищі

SharePoint, а не лише в додатку SharePoint Designer 2010. Наприклад,

можна налаштувати навігаційні посилання в представленні даних або у

30

формі, у Web-частині, робочому процесі або на рівні сайту (на верхній

панелі посилань або панелі швидкого запуску). Сайт і всі його компоненти

повинні відповідати добре продуманій моделі навігації, яка буде зручною

для користувачів.

4.4. Управління бізнес-процесами

Будь-який бізнес-процес в організації складається з набору дій, що

об'єднані в рамках досягнення загальної бізнес-цілі. Саме на такій моделі

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

При цьому створюється і виконується набір дій, що відповідає певній

послідовності умов і дій реального робочого процесу.

Всі робочі процеси в організації (від простих до найскладніших)

можна створювати в додатку SharePoint Designer 2010. Робочі процеси

дозволяють автоматизувати як бізнес-процеси, так і процеси роботи

співробітників. В рамках робочих процесів, що відповідають бізнес-

процесам, одне джерело даних може оновлюватися під час виникнення

змін в іншому. У робочих процесах, що описують взаємодію працівників,

співробітник може, наприклад, відправити документ на затвердження

своєму керівникові.

Робочий процес SharePoint дозволяє описати логіку бізнес-процеса,

не створюючи жодного рядка програмного коду, за допомогою

функціонального і в той же час інтуїтивно зрозумілого редактора робочих

процесів SharePoint Designer 2010, в якому можна створювати вкладені

логічні структури, вкладені дії і інші об'єкти. Крім того, робочі процеси

можна розробляти і публікувати за допомогою додатка Microsoft Visio,

шаблони блок-схем якого можна експортувати в SharePoint Designer 2010.

Стандартні блоки робочого процесу SharePoint Designer 2010:

Події

Подія починає або запускає робочий процес. Однією з можливих

подій є зміна в джерелі даних (наприклад, створення нового елементу або

зміна того, що існує). Крім того, подія може бути ініційована користувачем

- учасником робочого процесу. Робочі процеси, які запускаються під час

зміни джерела даних, як правило, входять до складу орієнтованого на

бізнес-додаток робочого процесу, що автоматизує певний бізнес-процес

(наприклад, копіювання файлів, виходячи із стану даних). Робочі процеси,

що запускаються користувачами, зазвичай входять до складу робочого

процесу, що реалізовує взаємодію співробітників (наприклад, ланцюжок

31

затвердження контента). Робочі процеси можуть розпізнавати події обох

цих видів і базуються на їх поєднаннях.

Умови

Умови визначають, коли саме робочий процес запускається або

виконує ту або іншу дію. Оскільки робочі процеси пов'язані з джерелами

даних, в умовах визначаються зміни в цих джерелах, під час виникнення

яких запускаються відповідні процеси. Як правило, умови починаються з

виразу "якщо значення поля дорівнює певному значенню". Одна умова

може бути пов’язана з кількома діями; так само з однією дією може бути

пов'язано декілька умов. Правила пов'язують умови з одним або

декількома діями, які виконуються за ситуації, коли умова виявляється

істинною.

Дії

Дії – це основні робочі елементи робочого процесу. Під час

створення процесу визначається необхідна послідовність дій, яка потім

задається в конструкторі робочих процесів. Дії можуть виконуватися

послідовно або одночасно (паралельно). Робочий процес може містити

будь-яку кількість дій, що виконуються як самим процесом, так і його

учасниками. До складу SharePoint Designer 2010 входить безліч готових дій

для багатократного використання, за допомогою яких робочі процеси

можуть, наприклад, відправляти електронну пошту, витягувати елементи зі

списку і повертати їх, виконувати обчислення та інші операції.

Серед цих дій можна виділити особливу групу дій із завданнями,

такими як Начать процесс утверждения і Начать процесс сбора

отзывов. Дії із завданнями містять окремий редактор робочих процесів,

призначений спеціально для обробки процесів в організації, що

виконуються людьми. За допомогою цих дій можна створювати і

налаштовувати складні робочі процеси для управління практично будь-

яким бізнес-процесом.

Кроки

Робочі процеси складаються з одного або декількох кроків і

вкладених кроків. Кроки дозволяють групувати умови і дії, щоб один набір

правил можна було перевірити і виконати перед другим. Кожен крок може

містити будь-яку кількість умов і дій. Робочі процеси можна створювати

як послідовності дій в рамках кроків і вкладених кроків. Правила в одному

кроці обробляються для здобуття результату до переходу до наступного

32

кроку, тому рекомендується об'єднувати в одному кроці всі правила,

необхідні для виконання певних дій. За допомогою кроків можна

формувати структуру робочого процесу, особливо за наявності великої

кількості дій і малого набору умов.

Форми

Робочі процеси часто містять форми, що дозволяють організувати

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

дозволяють учасникам взаємодіяти із завданнями, які пов'язані з даним

процесом. В рамках робочого процесу можна створювати форми запуску

для збору відомостей під час запуску користувачами даного процесу,

форми зв'язку, які пов'язують робочий процес із списком або типом

контента, а також форми призначених для користувача завдань, пов'язані із

списком завдань.

При проектуванні форм можна використовувати вбудовані форми на

базі ASP.NET (ASPX-сторінки) у SharePoint Designer 2010 і призначені для

користувача форми (XSN-сторінки), розроблені в додатку Microsoft

InfoPath 2010. Додаток InfoPath надає набагато ширші можливості для

налаштування форм робочих процесів і додавання в них фірмової

символіки.

Змінні

Змінна призначена для зберігання або кешування даних усередині

робочого процесу. За допомогою змінних можна зберігати в робочому

процесі дані різних типів, які використовуватимуться на його подальших

етапах. У робочому процесі доступні змінні різних типів. Наприклад,

можна використовувати змінні, створені на основі параметрів форми

запуску, а також локальні змінні, які містять дані, пов'язані з поточним

робочим процесом. Локальна змінна може мати будь-який з цілого ряду

типів даних, таких як логічний, дата-час, ідентифікатор елементу списку,

число або рядок. Після створення змінної і надання їй значення її можна

використовувати в умові або дії робочого процесу.

Оформлення і фірмова символіка

Останнім етапом налаштування сайту в додатку SharePoint Designer

2010 є розробка оформлення і фірмової символіки, тобто застосування до

сайту SharePoint корпоративного дизайну. На сайт можна вставити

емблему компанії, колірну схему, верхні і нижні колонтитули, допоміжні

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

33

результаті всі сторінки сайту виглядатимуть як частини крупного

корпоративного порталу. У SharePoint Designer 2010 оформлення і фірмова

символіка на сайтах SharePoint налаштовуються за допомогою головних

сторінок, макетів сторінок і каскадних таблиць стилів.

Застосування до сайту оформлення і фірмової символіки

відрізняється від інших базових завдань, пов'язаних з його налаштуванням

і орієнтованих на створення бізнес-рішення. Додавання фірмової

символіки, як правило, виконується рідше і на верхньому рівні сімейства

сайтів (наприклад, на порталі, що пов'язує сайт з інтрамережею або

мережею Internet). Ця символіка успадковується всіма вкладеними

сайтами, що створюються на нижчих рівнях. Крім того, додавання

фірмової символіки зазвичай виконується Web-дизайнером, а не творцем

рішення. З цих причин головні сторінки, макети сторінок і каскадні

таблиці стилів зазвичай за умовчанням відключені для всіх користувачів,

окрім адміністраторів сімейств. Таким чином, доступ до цих

функціональних, але чутливих до змін, файлів є лише у осіб, що

відповідають за фірмову символіку сайту. Зрозуміло, доступ до них можна

включити і для інших користувачів.

Головні сторінки

Головні сторінки є однією з можливостей технології ASP.NET і

входять до складу середовища SharePoint як засіб централізованої

розробки макету сайту, який потім можна повторно використовувати як

шаблон на інших сторінках. При перегляді будь-якої сторінки на сайті

SharePoint користувач насправді переглядає поєднання двох сторінок:

головної сторінки і сторінки контента. Головна сторінка визначає

загальний макет і систему навігації (як правило, відповідні елементи

розташовуються в лівій, верхній і нижній частинах сторінки). Сторінка

контента містить зміст даної конкретної сторінки. До складу Sharepoint

Designer 2010 входить широкий набір інструментів редагування сторінок,

за допомогою яких можна налаштовувати головні сторінки і

використовувати їх спільно з іншими користувачами.

Макети сторінок

При роботі з сайтом, призначеним для публікації, його вигляд і макет

визначаються за допомогою макетів сторінок. Макети сторінок служать

шаблонами для всіх публікованих сторінок, які створюються

користувачами організації. У поєднанні з головними сторінками вони

дозволяють виконати точне налаштування і задати структуру публікованої

34

сторінки (наприклад, визначити місце розташування на ній заголовка,

основного тексту і графічних елементів). Публіковані сторінки

використовують інфраструктуру публікації SharePoint і допомогають

оптимізувати створення і публікацію контенту за допомогою браузера,

значно спрощуючи цей процес.

Каскадні таблиці стилів

Як і на більшості Web-сайтів і Web-додатків, в SharePoint для

застосування до сторінок сайту кольорів, графічних елементів і

розташування на них різних об'єктів використовуються каскадні таблиці

стилів (CSS). Часто до сторінки застосовується відразу декілька таких

таблиць. Набудувати відповідні стилі можна безпосередньо на головній

сторінці, в макеті сторінки або на сторінці сайту, а також в самому CSS-

файлі, пов'язаному зі сторінкою. Зробити це можна за допомогою

ефективних засобів редагування коду CSS, доступних в складі програми

SharePoint Designer 2010. Після цього можна застосувати створені CSS-

файли до тем SharePoint. Налаштування CSS-файлів дозволяє задати

вигляд (оформлення) сайту SharePoint і привести його у відповідність до

корпоративного стилю.

4.5. Розгортання налаштовуваних рішень SharePoint

До цього моменту були розглянуті способи створення реальних

бізнес-рішень в додатку SharePoint Designer 2010, як підключатися до

даних у середовищі SharePoint і за його межами, інтегрувати їх в додатки,

створювати ефективні інтерфейси користувача для доступу до цих даних,

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

застосовувати до сайтів фірмову символіку відповідно до корпоративного

стилю.

Проте тепер з рішенням, що вийшло, необхідне щось зробити –

наприклад, розгорнути його на іншому сервері або на всьому підприємстві,

відкрити в середовищі Visual Studio для додаткового налаштування або

зберегти в автономному режимі. Рішення необхідно перетворити на пакет,

і для цього призначена команда Сохранить как шаблон. Можливість

зберегти рішення у вигляді шаблону буває дуже корисною. Шаблон

зберігається у вигляді пакету Web-рішення (Wsp-файлу), до складу якого

входить весь контент сайта, включаючи джерела даних і структуру,

представлення і форми, робочі процеси і Web-частини.

Шаблони також мають модульну структуру і дозволяють працювати

з певними елементами сайта, такими як список, представлення або

35

робочий процес. Ці елементи можна зберігати як окремі шаблони, що

надає абсолютно нові можливості спільної розробки рішень.

Завершення циклу створення бізнес-рішення у середовищі

SharePoint. У міру роботи в додатку SharePoint Designer 2010 ви швидко

зрозумієте, що доступні функції не обмежуються основними засобами

налаштування сайта. За його допомогою можна створювати реальні бізнес-

рішення, що містять підключення до даних, призначені для користувача

інтерфейси для роботи з даними, робочі процеси і повні набори фірмової

символіки сайтів. Всі ці завдання можна виконувати в середовищі

SharePoint в рамках загального циклу розробки додатка, результатом якого

стає рішення, готове до розгортання.

4.6. Відкриття і збереження сайтів SharePoint

В програмі SharePoint Designer 2010 можна відкривати сайти

SharePoint, що існують на сервері, і налаштовувати їх, а також створювати

нові на основі шаблонів SharePoint або нові порожні сайти, щоб розробити

їх з нуля.

Відкриття сайтів. Щоб відкрити існуючий сайт, клацніть вкладку

Файл, виберіть команду Сайты, а потім виконайте одну з наведених

нижче дій:

Щоб проглянути доступні сайти на даному сервері, виберіть команду

Открыть сайт.

Клацніть елемент Настроить мой сайт, щоб відкрити і налаштувати

свій сайт.

У меню Последние сайты виберіть сайт, над яким раніше вже

виконувалася робота.

Створення сайтів. Щоб створити сайт, клацніть вкладку Файл,

оберіть елемент Сайты, а потім виконайте одну з перелічених дій.

Щоб створити пустий сайт SharePoint, оберіть команду Новый

пустой веб-сайт.

Щоб створити сайт у складі вже існуючого, оберіть команду

Добавить дочерний сайт на мой сайт.

В розділі Шаблоны сайтов оберіть шаблон SharePoint, на основі

якого потрібно створити сайт.

Відкрити і створити сайт можна не тільки у програмі SharePoint

Designer 2010, але і у браузері, а потім відкрити його у SharePoint Designer

36

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

стрічці, а також за допомогою інших інструментів SharePoint.

4.7. Створення списків, бібліотек і підключень до джерел даних

У програмі SharePoint Designer 2010 можна створювати списки і

бібліотеки, які є джерелами даних для сайтів SharePoint. Крім того, можна

створювати підключення до XML-файлів, зовнішніх баз даних і Web-

служб.

Списки і бібліотеки SharePoint. Щоб створити список або

бібліотеку SharePoint, клацніть на панелі Навигация елемент Списки и

библиотеки, а потім оберіть один з перелічених нижче параметрів:

Щоб з нуля створити пустий список, оберіть команду

Настраиваемый список.

Щоб створити список на основі шаблону списку SharePoint, оберіть

команду Список SharePoint.

Щоб створити бібліотеку на основі шаблону бібліотеки SharePoint,

оберіть команду Библиотека документов.

Щоб створити зовнішній список на основі зовнішнього типу

контента, оберіть команду Внешний список.

Щоб створити список на основі імпортованої електронної таблиці,

оберіть команду Список из электронной таблицы.

Підключення до джерела даних. Щоб створити підключення до

джерела даних, клацніть на панелі Навигация елемент Источники

данных, а потім оберіть один з перелічених нижче параметрів.

Щоб створити підключення до кількох джерел даних, оберіть

команду Связанный источник данных.

Щоб створити підключення до бази даних, що підтримує протокол

OLE DB або ODBC, оберіть команду Подключение к базе данных.

Щоб створити підключення до Web-служби XML за допомогою

протоколу SOAP, оберіть команду Подключение службы SOAP.

Щоб створити підключення до серверного скрипту за допомогою

служби REST, оберіть команду Подключение к службе REST.

Щоб створити підключення до XML-файлу джерела, оберіть команду

Подключение к XML-файлу.

Зовнішні типи контенту. За допомогою зовнішніх типів контенту

можна підключитися до зовнішніх джерел бізнес-даних і інтегрувати ці

джерела з сайтом SharePoint і підтримуваними клієнтськими прикладними

37

програмами. Після створення зовнішнього типу контента можна створити

зовнішні списки, що дозволяють користувачам працювати з даними так,

якби це був список або бібліотека SharePoint.

Щоб створити зовнішій тип контенту, виконайте такі дії:

На панелі Навигация клацніть елемент Внешние типы контента.

На вкладці Внешние типы контента клацніть елемент Внешний

тип контента, а потім створіть для цього зовнішнього типу контенту

операції, поля тощо.

4.8. Створення представлень і форм, що налаштовуються

В програмі SharePoint Designer 2010 для джерел даних можна

створювати представлення і форми, що виконують функції інтерфейсу для

читання і запису даних в них.

Представлення. Представлення є відображенням джерела даних, що

динамічно набудовується, яке можна додати на будь-яку сторінку

SharePoint. У програмі SharePoint Designer 2010 можна створювати

представлення списків (представлення списку XSLT, що використовують

Web-частину) і представлення даних (форми даних, що використовують

Web-частину). Щоб створити представлення списку або даних, виконайте

одну з наведених нижче дій:

На панелі Навигация клацніть елемент Списки и библиотеки,

оберіть список, для якого потрібно створити представлення, а потім на

вкладці Параметры списка клацніть елемент Представление списка.

Буде створено представлення, пов'язане зі списком або бібліотекою.

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

налаштовувати його за допомогою групи елементів Управление

представлениями на стрічці SharePoint.

На панелі Навигация клацніть елемент Страницы сайта, змініть

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

Вставка, оберіть команду Представление данных, а потім виберіть

список або бібліотеку SharePoint, яка буде використана для створення

цього представлення.

Форми. Форма є відображенням джерела даних, що набудовується,

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

джерело даних. У програмі SharePoint Designer 2010 можна створювати

форми списків і форми даних (і ті, і інші використовують Web-частину

38

форми даних). Щоб створити форму списку або даних, виконайте одну з

наведених нижче дій:

На панелі Навигация виберіть команду Списки и библиотеки,

виберіть список, для якого потрібно створити форму, а потім на вкладці

Параметры списка клацніть елемент Форма списка.

На панелі Навигация клацніть елемент Страницы сайта, змініть

сторінку, на якій потрібно створити форму, клацніть вкладку Вставка,

оберіть команду Создать форму элемента, Изменить форму элемента

або Отобразить форму элемента, а потім оберіть джерело даних, яке буде

використане для створення форми.

Крім інструментів конструктора форм, доступних в програмі

SharePoint Designer 2010, для створення і налаштування форм SharePoint

можна використовувати програму Microsoft Infopath 2010.

4.9. Створення робочих процесів, що налаштовуються

У програмі SharePoint Designer 2010 можна управляти бізнес-

процесами за допомогою робочих процесів з широкими можливостями для

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

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

час створення робочих процесів доступний ряд параметрів.

Створення робочих процесів у SharePoint Designer 2010. Робочий

процес можна створити на основі списку або бібліотеки SharePoint; можна

створити робочий процес з можливістю повторного використання і

застосовувати його до будь-яких списків або бібліотек. Крім того, можна

створити робочий процес сайту, який працюватиме на рівні сайту.

Щоб створити такі робочі процеси, клацніть на панелі Навигация

елемент Рабочие процессы, а потім виконайте одну з наведених нижче

дій:

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

потрібно пов’язати робочий процес.

Щоб створити робочий процес з можливістю повторного

використання, який можна пов'язати з будь-яким списком або бібліотекою,

оберіть команду Рабочий процесс для повторного использования.

Щоб створити робочий процес, який може використовуватися на

рівні сайта, оберіть команду Рабочий процесс сайта.

Після створення робочого процесу структуруйте в ньому умови, дії і

кроки за допомогою конструктора робочих процесів.

39

Імпорт робочих процесів з програми Microsoft Visio 2010. На

додаток до створення робочих процесів в SharePoint Designer 2010 можна

імпортувати робочий процес, створений в програмі Microsoft Visio 2010 за

допомогою наявних в ній шаблонів і наборів елементів.

Щоб імпортувати робочий процес, клацніть на панелі Навигация

елемент Рабочие процессы, а потім виконайте наведені нижче дії:

Оберіть команду Импорт з Visio, потім знайдіть потрібну файлову

систему або бібліотеку документів SharePoint для файла Visio Workflow

Interchange (VWI).

Пов’яжіть робочий процес зі списком або зробіть його процесом з

можливістю повторного використання і натисніть кнопку Готово.

Починайте настройку робочого процесу у SharePoint Designer.

4.10. Розробка сторінок сайту, головних сторінок і макетів

сторінок

У програмі SharePoint Designer 2010 можна створювати і

налаштовувати сторінки сайтів, головні сторінки і макети сторінок. Не

дивлячись на те, що кожен з цих видів сторінок призначений для певної

мети, способи їх редагування загальні. Можна додавати і видаляти текст,

зображення, посилання, таблиці, Web-частини, елементи управління

сервером тощо. Для головних сторінок і макетів сторінок можна

застосовувати визначення і таблиці стилів з метою налаштування

зовнішнього вигляду і забезпечення зручності використання сайту або

додати фірмову символіку, щоб привести його у відповідність до

корпоративного стилю.

Сторінки сайта. Щоб створити сторінку сайту, клацніть на панелі

Навигация елемент Страницы сайта, а потім виконайте одну з наведених

нижче дій:

Оберіть команду Страница «Веб-части», щоб створити сторінку, що

має Web-частини заголовка і основної зони і, крім того, пов'язану з

головною сторінкою сайту.

Щоб створити порожню сторінку сайту, не пов'язану з головною

сторінкою, виберіть команду Страница, а потім – пункт ASPX або HTML.

Головні сторінки. На панелі Навигация клацніть елемент Главные

страницы, а потім Пустая главная страница.

40

Макети сторінок. На панелі Навигация клацніть елемент Макеты

страниц, а потім Новый макет страницы і оберіть групу типів контента і

ім'я, на основі яких буде створений макет сторінки.

За умовчанням головні сторінки і макети сторінок відключені для

всіх користувачів, окрім адміністраторів сімейства сайтів. Якщо в програмі

SharePoint Designer 2010 недоступний параметр для перегляду або зміни

головних сторінок або макетів сторінок, зверніться до адміністратора сайту

з проханням про включення цих параметрів.

Збереження об'єкту як шаблону. Після закінчення налаштування

сайту можна зберегти сайт або його параметри як шаблон за допомогою

команди Сохранить как шаблон, щоб інші співробітники організації

могли використовувати цей шаблон для створення списків, представлень,

робочих процесів, сторінок сайтів тощо.

Крім того, шаблон можна використовувати в майбутньому для

налаштування сайту в іншому середовищі або за допомогою інших

користувачів, наприклад, в браузері або в програмі Microsoft Visual Studio.

4.11. Додавання сторінок на сайт SharePoint

Програма Microsoft SharePoint Designer 2010 дозволяє легко і швидко

додавати сторінки на сайт SharePoint, а потім налаштовувати їх у браузері

або в самій програмі. При цьому можна обрати типи створюваної сторінки:

сторінка Web-частин, ASPX або HTML.

Існує ще один тип сторінок – сторінки публікації. Вони часто

використовуються на сайтах публікації, підтримуваних сервером Microsoft

SharePoint Server 2010.

Типи сторінок, які можна додати на сайт. У міру роботи над

сайтом в програмі SharePoint Designer 2010 часто доводиться додавати

сторінки, які покращують його оформлення або розширюють

функціональні можливості. В більшості випадків вони потрібні для того,

щоб розташувати на них представлення, що налаштовуються, або форми.

У зв'язку з цим кожного разу під час створення представлення або форми

для списку або бібліотеки зі сторінки зведення за допомогою SharePoint

Designer 2010 для них автоматично додаються сторінки сайту. (Вони також

називаються сторінками представлення списку або форми списку.)

Крім того, сторінки часто додаються і в інших цілях. Наприклад,

потрібно створити представлення або форму для додаткових джерел даних

або призначення сторінки, за допомогою якої користувачі могли б

додавати або налаштовувати Web-частини. У подібних випадках за

41

допомогою SharePoint Designer 2010 на сайт можна додати один з трьох

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

Сторінка Web-частин

Сторінка ASPX із зонами, в які розробник або користувачі можуть

додавати Web-частини через браузер. Нова сторінка має те ж оформлення і

інтерфейс, що і сайт. Наприклад, її кордони і елементи навігації

автоматично зіставляються з головною сторінкою сайту. У процесі

створення сторінки Web-частини можна вибрати з кількох шаблонів з

різними макетами зон.

Сторінка ASPX

Порожня сторінка ASPX або ASP.NET. Щоб вона працювала

належним чином, на неї потрібно додати необхідні зони Web-частин і інші

елементи. Якщо вона створюється за допомогою розділу Страницы сайта

в SharePoint Designer, то не підключається до головної і, таким чином,

може мати оформлення, інтерфейс, кордони і елементи навігації, відмінні

від сайту.

Сторінка HTML

Порожня сторінка HTML. Вона не може бути проглянута

безпосередньо на сайті SharePoint, оскільки в ній не використовується

необхідний для цього програмний код ASP. Проте її можна

використовувати для зберігання на сайті документів HTML.

Microsoft SharePoint Server 2010 і Microsoft SharePoint Foundation

2010, на відміну, наприклад, від статичних сайтів HTML, завдяки

технології Microsoft ASP.NET дозволяють використовувати інтерактивний

контент, що підтримує функції спільної роботи. У зв'язку з цим на сайти

SharePoint у більшості випадків додаються саме сторінки Web-частин або

ASPX. Вони базуються на технології ASP.NET, яка дозволяє реалізувати

весь спектр функціональних можливостей SharePoint.

4.12. Створення сторінок Web-частин

Сторінка Web-частин є сторінкою ASPX з однією або кількома

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

можна налаштовувати для зміни впорядкування і формату Web-частин. У

SharePoint Designer 2010 передбачено декілька макетів для даного типу

сторінок. При цьому після їх створення можна змінювати розташування

зон, додавати інші Web-частини, представлення або форми даних тощо.

42

Крім того, користувачі можуть самі додавати або видаляти Web-частини,

якщо у них є дозвіл на зміну сайту.

Сторінка Web-частин зіставляється з головною сторінкою і,

відповідно, має те ж оформлення, кордони, навігацію і загальні елементи,

що і сайт. Додати сторінку на сайт SharePoint можуть лише учасники групи

сайту з дозволом на додавання і налаштування сторінок. Він, за

умовчанням, міститься в таких рівнях дозволів, як Полный доступ і

Конструктор.

Щоб створити сторінку Web-частин, відкрийте сайт в програмі

SharePoint Designer 2010 і виконайте вказані нижче дії:

В області навігації виберіть пункт Страницы сайта.

У групі Создание на вкладці Страницы оберіть елемент Страница

Web-частей.

Виберіть макет сторінки Web-частин з пропонованих зразків.

Сторінка Web-частин буде додана в колекцію сторінок сайту.

За необхідності клацніть ім'я сторінки, щоб змінити його (сайт за

умовчанням використовується Untitled_1.aspx).

Щоб змінити сторінку, клацніть її повторно, після чого на сторінці

зведення, що відкрилася, виберіть команду Изменить файл.

Сторінка відкриється в редакторі сторінок SharePoint Designer 2010,

в якому на неї можна додавати представлення, форми і інші Web-частини.

4.13. Створення сторінки на основі головної сторінки

SharePoint Designer 2010 дозволяє створювати сторінки ASPX на

основі головних. При цьому доводиться виконувати ряд додаткових дій,

щоб додати на них необхідний контент. Наприклад, для цього потрібно

знайти на сторінці основний заповнювач. Після цього необхідно додати і

відповідним чином налаштувати макет для зон Web-частин.

Для виконання цих дій, можливо, потрібно буде звернутися до

адміністратора сайту, щоб він дозволив зміну головної сторінки. Крім того,

подібні сторінки не дублюють головну, що може бути небажаним з

технічної точки зору.

Щоб створити сторінку на основі головної, відкрийте сайт в програмі

SharePoint Designer 2010 і виконайте вказані нижче дії:

В області навігації виберіть пункт Главные страницы.

Виділите головну сторінку, на основі якої буде створена нова.

43

У групі Создание на вкладці Главные страницы виберіть команду

Создать страницу из главной.

Також можна клацнути правою кнопкою миші головну сторінку і в

контекстному меню або на вкладці Файл обрати команду Создать

страницу из главной.

У діалоговому вікні Выбор главной страницы виберіть один з

вказаних нижче параметрів:

o Главная страница по умолчанию – використовуватиметься

сторінка, яка вказана на сайті як головна за умовчанням.

o Настраиваемая главная страница – використовуватиметься

сторінка, яка вказана на сайті як головна, що налаштовується.

o Особая главная страница – використовуватиметься вибрана

головна сторінка, відмінна від перших двох. Щоб знайти її,

натискайте кнопку Обзор. (Головна сторінка повинна

знаходитися в тому ж сімействі, що і використовуваний сайт.)

По завершенні натисніть кнопку ОК.

У діалоговому вікні Создание страницы Web-частей введіть ім'я

сторінки і виберіть для неї розташування.

Щоб відкрити сторінку в розширеному режимі, натискайте кнопку Да.

Сторінка відкриється в редакторі SharePoint Designer 2010, за

допомогою якого на неї можна додати представлення, форми та інші Web-

частини.

Знайдіть заповнювач контента, в який потрібно помістити

призначений для користувача контент.

Для додавання Web-частин на основну частину сторінки зазвичай

використовується заповнювач контента PlaceHolderMain. Щоб додати в

нього контент, клацніть стрілку праворуч від елементу PlaceHolderMain

(головна сторінка) і оберіть команду Создание пользовательского

контента.

Область контента стає доступною для редагування, про що говорить

текст (користувацький) поруч із заповнювачем.

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

представлення, форми, Web-частини і їх зони.

4.14. Створення окремих сторінок ASPX і HTML

В деяких випадках потрібно створити окрему сторінку ASPX або

HTML, що не є сторінкою Web-частин і не пов'язана з головною.

44

Наприклад, може бути необхідно додати сторінку ASPX, що виступає як

спливаюче вікно або є допоміжною для іншої сторінки сайту. Крім того,

інколи доводиться створювати сторінки HTML, щоб їх можна було

завантажити з сайту.

Щоб створити окрему сторінку ASPX або HTML, відкрийте сайт в

програмі SharePoint Designer 2010 і виконайте вказані нижче дії:

В області навигації оберіть пункт Страницы сайта.

В групі Создание на вкладці Страницы клацніть елемент Страница

і оберіть один із вказаних нижче параметрів:

o ASPX – на сайті буде створена окрема сторінка ASPX.

o HTML – на сайті буде створена окрема сторінка HTML.

Оскільки у сторінках HTML не використовується технологія

ASP.NET, що необхідна для роботи з SharePoint, вони можуть невірно

відображатися на сайті.

Сторінка буде додана у колекцію сторінок сайту:

За необхідності клацніть назву сторінки, щоб змінити її.

Щоб змінити сторінку, клацніть її повторно, після чого на сторінці

зведення оберіть команду Изменить файл.

Щоб відкрити сторінку в розширеному режимі, натискайте кнопку Да.

Розширений режим редагування в SharePoint Designer 2010 дозволяє

змінити весь контент сторінки так, щоб зробити її відмінною від колекції

сайту.

Сторінка відкриється в редакторі сторінок SharePoint Designer 2010, в

якому на неї можна додати текст, зображення і посилання, а у випадку зі

сторінками ASPX – також представлення, форми та інші Web-частини.

Подібні сторінки можна використовувати окремо або прикріпити їх

(лише ASPX) до головної сторінки.

На сайт SharePoint можна додати скільки завгодно сторінок. Їх

можна використовувати для розміщення представлень, що

налаштовуються, форм і інших Web-частин, використовуваних

відвідувачами. Для їх створення допускається використовувати різні

головні сторінки.

Крім додавання сторінок, на сайті також можна налаштувати

можливість публікації. При цьому користувачі можуть на основі

заздалегідь розроблених макетів або головних сторінок створювати

45

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

Microsoft SharePoint Server 2010.

Запитання для самоконтролю

1. Опишіть інтерфейс Sharepoint Designer 2010.

2. До яких джерел даних можна підключатися за допомогою

Sharepoint Designer 2010?

3. Які є способи настройки інтерфейсів користувача, пов’язаних з

даними, у прикладній програмі SharePoint Designer 2010?

4. Що таке Web-частини?

5. Назвіть стандартні блоки робочого процесу.

6. Як створюються списки і бібліотеки у середовищі SharePoint

Designer 2010?

7. Як виконується підключення до джерела даних у SharePoint

Designer 2010?

8. Опишіть створення представлень і форм.

9. Опишіть створення робочих процесів у SharePoint Designer 2010.

10. Як виконується імпорт робочих процесів з програми Microsoft

Visio 2010?

11. Охарактеризуйте розробку сторінок сайту, головних сторінок і

макетів сторінок у SharePoint Designer 2010.

12. Як виконується додавання сторінок на сайт SharePoint?

13. Опишіть створення сторінок Web-частин.

14. Як виконується створення сторінки на основі головної сторінки?

15. Опишіть створення окремих сторінок ASPX і HTML у SharePoint

Designer 2010.

Лекція 5. Поради по роботі з власною Web-сторінкою

5.1. Безкоштовне розміщення Web-сторінки

Ви можете безкоштовно розмістити свою Web-сторінку і e-mail

адресу на сервері Geocities www.geocities.com. Ця компанія вважає, що

кожна людина має право розмістити в кіберпросторі власну домашню

сторінку. Програма підтримки безкоштовних Home Page створена для

представлення індивідуальних проектів у World Wide Web. Ця програма

підтримується спонсорами, які мають постійні комерційні Web-сторінки.

Вам достатньо виконати всі вказівки Main Homesteading Page. Якщо

ваша адреса електронної пошти дійсно існує, то на неї прийде лист з

інформацією відносно використання вашої Web-сторінки.

46

Geocities розробила унікальний Home Page Editor, за допомогою

якого можна створити персональну Web-сторінку, тема сторінки

обирається у спеціальній секції Neighborhoods:

Capecanaveral. Наука і технології. Інженерія, математика, авіація

тощо.

CapitolHill. Політика, держава і національні інтереси.

Collegepark. Відчуйте смак університетського життя!

Colosseum або Colosseum/field. Олімпійські ігри, професійний спорт

тощо.

Hollywood або Hollywood/hills. Кінематограф, телебачення.

Hotsprings. Центр вашого здоров'я і професійної придатності.

Правильна їжа, медичні проблеми, лікувальні курорти.

Motorcity. Сайт автомобільних фанатів.

Rainforest. Збереження довкілля.

Вам потрібно зробити лише три кроки для того, щоб ваша Home Page

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

Neighborhood Directory і виберіть тему для своєї сторінки. Будьте упевнені

в тому, що обрана тема відповідає вашій сторінці. Знайдіть незайняту

адресу у відповідній секції Neighborhood. Для цього існує декілька

способів. Вибравши з секції Neighborhood опцію Main page, ви можете

вести пошук через пронумеровані блоки адрес вже існуючих сторінок до

тих пір, поки не знайдете вільне місце. Ви можете також просто клацнути

на слові Join і слідувати запропонованим інструкціям. Вибравши Yes на

наступній сторінці, ви зможете автоматично знайти вільне місце за

допомогою поля даних Vacancy Locator. Клацніть на Apply for this

address для резервування місця під свою сторінку. Після цього ви

автоматично переміститеся на сторінку з реєстраційною формою. Тут

потрібно ввести свої персональні дані. Особливо важливо правильно

вказати адресу електронної пошти. Саме за цією адресою буде висланий

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

Якщо ви правильно заповнили реєстраційну форму, то ви отримаєте

так зване підтвердження реєстрації. Вас привітають, повідомлять обрану

рубрику і вкажуть електронну адресу, за якою буде вислана додаткова

інформація. Якщо вам відомий пароль, то ви можете змінити свою адресу

електронної пошти за допомогою Personal Profile Editor.

47

5.2. Ваш власний універсальний локатор ресурсу

Кожен зареєстрований користувач отримує власний унікальний URL.

Цей локатор ви можете повідомляти всім пошуковим службам Internet.

Ваш URL завжди починатиметься з http://www.geocities.com і

закінчуватиметься обраною рубрикою і отриманим номером вашої адреси.

Наприклад, якщо ваша адреса є 2090 і знаходиться в Motorcity

Neighborhood, то ваш URL виглядатиме так: http://www.geocities.com/

Motorcity/2090/.

Попередній перегляд, оновлення і видалення. Ваші файли будуть

автоматично переміщені за допомогою FTP у ваш поточний каталог. Ви

можете проглянути свою сторінку, обравши в рубриці Neighborhood

відповідний каталог і свою адресу. Крім цього, ви можете оновлювати ваш

гіпертекстовий документ за допомогою звичайної пересилки файлів через

FTP у ваш поточний каталог. Ви можете так само видалити всі передані

файли, використовуючи утиліту Personal Profile Deletion Utility. Вам не

потрібно видаляти старі файли перед тим, як передавати нові. Коли ви

передаватимете файли, то у вашому каталозі файл з колишнім ім'ям просто

автоматично перезапишеться.

Сервери, що абсолютно безкоштовно пропонують Web-простір для

вашої Web-сторінки: http://www.geocities.com, www.ukrbiz.net,

www.xoom.com, www.hypermart.net, www.angelfire.com,

www.fortunecity.com, www.fsn.net, www.easyspace.com, www.cynetcity.com,

www.royaltystudios.com, www.internet-club.com, www.cybercity.hko.net,

www.nettaxi.com, www.yi.com, www.cqws.com/rates.html, www.home.ch,

www.freenation.com.

5.3. Безкоштовна реєстрація вашої Web-сторінки у пошукових

машинах Internet

Якщо ви хочете безкоштовно зареєструвати вашу Web-сторінку в

пошукових механізмах Internet, просто зверніться до одного з нижче-

наведених серверів:

Register's Cool Site Award. http://www.123register.com/award.html.

Mockingbird Lane FFA Link Page.

http://1313mockingbirdlane.com/links/links.htm.

FFA Link Page. http://www.4u2.de/.

Free Banner Exchange. http://1-2-free.com/.

Banners. http://www.123banners.com/.

48

AmericaMall. http://www.1second.com/1america.htm.

StopBiz. http://www.1stopbiz.com/.

FFA Link Page. http://212.net/.

BuySell. http://www.2buysell.com/.

Cool Web Coolest Site. http://www.serverconcepts.com/.

Hand Internet Market. http://www.2him.com/.

5.4. Web-сервер

Web-сервер починається зі створення і розмітки гіпертекстових

документів. Далі створюється концепція розвитку Web-сервера. До цього

необхідно знайти різні публікації, скомпонуват їх, виписати ключові слова

і правильно оформити заголовки. Web-сервер повинен мати зручний

навігаційний інтерфейс.

Прописка Web-сервера. Перше, що потрібно зробити – правильно

сформувати назву вашого Web-сервера, наприклад, "Дизайн, реклама і

літературна творчість Бориса Леонченка".

Далі, необхідно знайти 10 ключових слів і записати їх, розділяючи

пропуском: "Дизайн, реклама, Web-сторінка, переддрукарська підготовка,

комп'ютерна графіка, маркетинг, advertising art-director".

Після цього йде опис Web-сервера, наприклад, він може бути таким:

"Персональна сторінка київського письменника, дизайнера і фахівця з

реклами і маркетингу Бориса Леонченка та його дизайн-студії M&C. Тут

ви знайдете тексти книг Бориса Леонченка з комп'ютерної тематики, а

також деякі роботи по дизайну і комп'ютерній графіці. Високоякісний

дизайн. Дизайн Web-сайтів. Послуги з виготовлення реклами. Послуги з

виготовлення Web-сторінок високої якості. Переддрукарська підготовка

будь-якої поліграфії".

Тепер вкажіть інформацію, за допомогою якої з вами можна

зв'язатися:

Boris Leonchenko

Design Studio M&C

12, Vyshgorodska str., Kyiv, Ukraine

mobile tel.: (067) 681 0085

e-mail: bobleon@uniinc.com

Якщо ви хочете прописати свій Web-сервер у україномовних та

російськомовних пошукових системах, то просто додайте свій ресурс через

посилання Add URL, Submit your site або Добавить сайт, звернувшись до

49

наступних систем і каталогів: UAPoisk, Meta, UAInfo, Top100Site, Altavista,

Rambler, Апорт!, Yandex, Yahoo! Search, Weblist.

Концепція Web-сервера. Концепція (зручна навігація, легкість

модифікації) Web-сервера починається з організації його структури.

Найпростіша структура Web-сервера називається повнозв'язною

структурою. Web-сервер з такою структурою складається з головної

сторінки, на якій розміщені всі наявні посилання. Стара і давно забута

послідовна організація Web-сервера грунтується на послідовно (вперед і

назад) перехідних посиланнях. Складна деревовидна структура Web-

сервера використовується багатьма корпоративними вузлами. Комбінована

структура поєднує в собі всі вищезазначені.

Як швидко і правильно побудувати Web-сервер. Спершу створіть

так звану домашню сторінку, тобто документ HTML, з якого, власне, і

починається ваш Web. Не забивайте цю сторінку графікою. Просто

повідомте відвідувача про те, яку інформацію він може знайти.

5.5. Зручна навігація

Схема, по якій відвідувач Web-сервера переглядає гіпертекстові

документи, називається навігацією. Зрозуміло, що навігація має бути

зручною, зрозумілою і продуманою.

При побудові навігаційної схеми використовуйте таку колірну гаму,

яка не зможе відвернути відвідувача від основної теми вашого Web-

сервера.

Основний навігаційний елемент, наприклад, шапка, розташовується,

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

місцях, але є єдиними дизайнерськими рішеннями.

5.6. Дизайн першої сторінки

Дизайн першої сторінки вашого документа повинен відрізнятися від

дизайну інших сторінок.

Перш ніж почати створення документу, проведіть передпроектне

дослідження, тобто з'ясуйте, для кого буде призначена публікована

інформація.

Якщо ваш документ не має назви, то такий документ вважається

непрофесійно підготовленим. Всі Web-сторінки повинні мати заголовок.

Це допомагає користувачам розуміти тему вашого документа.

Сторінка повинна вміщуватися на екрані користувача. Не

заставляйте користувачів прокручувати вашу Web-сторінку. Хай вони

побачать її повністю відразу після завантаження.

50

Позбавляйтеся від горизонтальних прокруток. Пам'ятайте, що

горизонтальні прокрутки знижують сприйняття інформації. Якщо ваш

документ дуже громіздкий, розбийте його на декілька частин, кожній з

яких привласніть окреме посилання. Не забувайте про колір фону

посилань, бо може статися так, що ваше посилання стане невидимим.

Оновлюйте свій сайт. Інформація швидко застаріває, тому вона

повинна оновлюватися.

Час завантаження вашого сайту має бути не більше 10 секунд. Не

випробовуйте терпіння користувачів.

Виключення графічних зображень під час відображення

сторінок. Якщо ви хочете прискорити виведення сторінок Internet, зніміть

всі прапорці в розділі Мультимедиа вкладки Дополнительно діалогового

вікна Свойства обозревателя.

Включення фонового кольору і картинок в роздруковувану Web-

сторінку. Ви можете включити фонові кольори і картинки в

роздруковувану Web-сторінку. Для цього активізуйте опцію Печатать

цвета и рисунки фона в розділі Печать.

5.7. Графічні формати Web-дизайну

Не дивлячись на те, що графічних форматів дуже багато, лише три з

них прийняті як стандартні для використання в Internet. Це Compuserve

Graphic Interchange Format, або, просто, GIF, формат JPEG (названий за

ім'ям групи творців — Joint Picture Expert Group) і порівняно новий формат

PNG (Portable Network Graphics). Крім того, на стандартизацію

претендують формати DjVu (цей формат оптимізований для представлення

документів, що містять одночасно текст і графіку) і LuRaTech Wavelet

(LWF) - формат, що відрізняється можливістю високого ступеня стиснення

при досить високій якості. Під час стиснення можна заздалегідь

встановити розмір майбутнього файлу.

Проте автору Web-сторінок краще орієнтуватися лише на два

найбільш поширених в Internet формати – GIF і JPEG. Вони підтримуються

всіма браузерами і не вимагають додаткових модулів для відображення.

Обидва ці формати були створені для зберігання графіки в стисненому

вигляді. Формат JPEG при цьому використовує метод "стиснення з

втратами", тобто при стисненні частина інформації безповоротно

втрачається. Це, безумовно, впливає на якість зображення, але втрату

якості можна зробити настільки малопомітною, що нею можна знехтувати.

51

Формат GIF. Формат GIF призначений в основному для

"мальованих" зображень: креслень, графіків тощо. В ньому

використовується так звана індексована колірна палітра. Максимальна

кількість кольорів в ній – 256. Отже не варто зберігати у форматі GIF,

наприклад, багатоколірні фотографії - розмір файлу залишиться досить

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

кількості кольорів. Зате файли, що містять багато однобарвних крапок,

розташованих поруч, стискаються за допомогою формату GIF до

невеликих розмірів. Крім того, формат GIF має ще ряд переваг.

По-перше, GIF-малюнок може бути прозорим. Тобто, можна один

колір видалити з палітри GIF, визначивши його як прозорий. Тоді при

відображенні, крізь крапки, забарвлені в цей колір, на малюнку буде видно

фон Web-сторінки. Це дуже допомагає під час створення малюнків

фігурної форми. Наприклад, цим прийомом можна помістити на Web-

сторінку круглу фотографію. Насправді вона, звичайно, прямокутна,

просто краї її зроблені прозорими.

Справа тут не в HTML-коді, а в GIF-файлі. Колір в його кутах

оголошений як прозорий, і в результаті ми можемо бачити крізь нього фон

сторінки, так що створюється враження, що фотографія дійсно кругла. Цим

прийомом інколи оживляють "прямокутний" світ комп'ютерних вікон.

Інша перевага GIF-малюнків – можливість завантажувати їх

черезрядковим методом. Якщо графічний файл має великий розмір і

завантажується з Internet довго, користувач побачить спочатку нечіткі

контури майбутнього малюнка, у міру завантаження зображення малюнок

поступово проявлятиметься, що досягається дуже простим прийомом –

зміною порядку завантаження рядків зображення. Для цього необхідно під

час збереження GIF-файлу не забути включити режим Interlaced

(Черезрядковий).

І, нарешті, ще одна перевага GIF-файлів – вони можуть містити не

лише статичні малюнки, але й цілі анімаційні фрагменти. Насправді цими

фрагментами є послідовності декількох статичних кадрів, а також

інформація про те, скільки часу кожен кадр повинен затримуватися на

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

наприклад, WWW GIF Animator. У таку програму можна завантажити

декілька графічних файлів підряд, а також використовувати деякі

вбудовані ефекти. Проте пам'ятайте, що кожен зайвий кадр веде до

52

збільшення розміру файлу, і якщо зробити анімований GIF-файл,

наприклад, з 500 кадрів, мало хто зможе дочекатися його завантаження.

Формат JPEG. Інший поширений графічний формат – JPEG (файли

цього формату можуть мати розширення як .jpeg, так і .jpg). На відміну від

GIF, цей формат призначений для зображень типу фотографій. Файли

цього формату не обмежені палітрою з 256 кольорів, вони можуть

вміщувати до 16 777 216 (тобто 224

) кольорів.

Процес стиснення за схемою JPEG складається з кількох кроків. На

першому кроці виконується перетворення зображення з колірного

простору RGB в простір YUV, що базується на характеристиках яскравості

і колірності. Що ж такого незвичайного в YUV представленні кольору в

порівнянні з RGB? А то, що воно найбільш близьке до "природного", яке

неусвідомлено виконує людина. Y-компонента, або яскравість, тісно

пов'язана з якістю картинки. Точніше сказати, Y – це і є картинка, лише

чорно-біла. Компоненти U і V містять інформацію про колір і дозволяють

нам розфарбовувати Y-картінку.

На наступному, після перетворення, кроці зображення розділяється

на квадратні ділянки розміром 8х8 пікселів. Після цього над кожною

ділянкою виконується так зване дискретне косинус-перетворення (ДКП).

При цьому виконується аналіз кожного блоку, розкладання його на

складові кольори і підрахунок частоти появи кожного кольору.

Людське око найбільш чутливе до складової яскравості зображення

(Y-компонента) і найменш – до колірних складових. Чутливість людського

ока до різних кольорів теж величина непостійна. Зіниця чутливіша до

нижньої частини колірного спектру, ніж до верхньої. Формат JPEG якраз і

враховує ці особливості. Аналізуючи частотну інформацію про появу

кольорів, вдається позбавитися від частини інформації вже в процесі

квантування. При цьому кольори у верхній частині спектру виключаються,

що практично не позначається на зоровому сприйнятті образу. Також

виключається частина інформації яскравості. Грубо кажучи, JPEG просто

відкидає від складової яскравості половину корисного сигналу, а від

колірної – 3/4. Це, звичайно приблизно, оскільки існують градації і

складніші схеми стиснення.

Кількість інформації, що виключається при стисненні, залежить від

потрібної якості зображення. При максимально-високих рівнях стиснення

деталі повністю стираються, і блок стає сірим. При середніх і низьких

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

53

ділянки. На відміну від звичайних форматів, що зберігають зображення

поточково, JPEG зберігає зразкові кольори. JPEG використовує для

збереження ряди Фур'є і при великих ступенях стиснення просто відкидає

члени ряду вищого порядку. І кожного разу під час відтворення

зображення на екрані комп'ютер виконує синтез. Причому досить

ресурсоємний і помітний на повільних комп'ютерах. З цього випливає одне

зауваження – якщо Ви зберегли якийсь малюнок у форматі JPEG, то

відновити його назад до останнього пікселя неможливо! Саме через це

формат називається "форматом з втратами", і саме тому не рекомендовано

перестискати jpeg-зображення, оскільки воно обов'язково стане гірше.

Інформація про яскравість і колір потім кодується так, що

зберігаються лише відмінності між сусідніми блоками. В результаті блоки

представляються рядками чисел, які можна стискати далі. Оскільки в

результаті обробки блоки містять багато нулів, остання стадія кодування

(виконувана по алгоритму Хаффмана – подібного до того, що

застосовується в архіваторах) дає добрі результати. Звідси ще невелике

зауваження – стискати jpeg-файл архіватором не має жодного сенсу, адже

він вже стиснений. Отриманий архів буде більший за розміром, ніж

вихідна фотографія.

Таким чином, первинні 24 біта на елемент зображення або 1536 біт

(192 байти) на блок перетворюються на невелику кількість біт, які

описують зорові характеристики всієї ділянки зображення.

Під час збереження jpeg-файлу будь-яка графічна програма просить

вказати ступінь стиснення, який зазвичай вимірюють в умовних одиницях

від 1 до 100 (інколи від 1 до 10). При цьому більше число відповідає

меншому ступеню стиснення, але кращій якості. І тут важливо знайти

хороший баланс. В більшості випадків стиснення порядку 30-40% дає

якісний результат.

Отже, намагайтеся у всіх випадках обходитися цими двома

форматами. Якщо ж виникла необхідність скористатися іншим форматом,

з'ясуйте, які браузери здатні його відображувати і які додаткові модулі для

цього потрібні. Повідомте про це на своїй сторінці поряд з файлом

"екзотичного" формату і поставте гіперпосилання на сайти, звідки можна

ці додаткові засоби завантажити. А ще краще вмістити альтернативний

варіант зображення у форматі GIF або JPEG.

Формат PNG. Якщо запитати Web-дизайнера-початківця про те,

графічні файли яких форматів використовуються для підготовки Web-

54

сторінок, він відповість, що є два таких формати: GIF і JPEG. Більш-менш

досвічений фахівець додасть до них ще один: PNG. PNG (вимовляється як

"пінг") – абревіатура словосполучення Portable Network Graphics. Як видно

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

мережі.

Неофіційно PNG розшифровують як "PNG’s Not GIF" – "PNG - це не

GIF". Створений він був спеціальним комітетом, що складався з 23 людей,

очолював який Томас Бутелл. Розробники, серед яких були багато ідейних

ворогів GIF, ставили за мету створити новий графічний формат, який

включав би все краще формату GIF, був би позбавлений його недоліків і

міг би повністю витіснити його з місця основного формату графіки для

WWW.

Специфікація 1.0 формату PNG виглядає вражаюче: як і GIF, новий

формат підтримує стиснення без втрат (тобто без втрати якості

зображення), черезрядковість (interlacing), прозорість кольору

(transparency), зберігання призначених для користувача даних (наприклад,

коментарів). Але, на відміну від GIF, він може зберігати truecolor-

зображення з глибиною кольору до 48 біт на піксель (GIF обмежений 8

бітами на піксель), зображення в шкалі сірого кольору з глибиною до 16

біт на піксель, підтримує альфа-канал і гамма-індикатор. Крім того, PNG

може використовуватися абсолютно безкоштовно, а ось розробники

програм, що використовують формат GIF (читають і записують файли в

цьому форматі), повинні заплатити за ліцензію фірми Unisys, що володіє

правами на алгоритм стиснення LZW, застосований в GIF.

Правда, PNG 1.0 не може зберігати декілька зображень в одному

файлі і, отже, анімація, одна з найпривабливіших рис формату GIF, в PNG

досі не доступна. Але PNG – дуже перспективний формат (приблизно як

Linux – дуже перспективна операційна система), і тому в майбутньому

недоліки PNG обов'язково будуть усунені.

В даний час відображення картинок у форматі PNG підтримують

браузери з числа лідерів ринку, наприклад MS Internet Explorer, Netscape

Navigator і Opera. Читати і зберігати png-файли уміють всі більш-менш

нормальні графічні редактори.

Таким чином, оголошувати PNG повноцінною заміною GIF

передчасно: GIF краще, ніж PNG при роботі з реальними зображеннями, і,

крім того, він підтримує анімацію. Що стосується повнокольорових

зображень, то тут альтернативи формату JPEG, як і раніше, немає.

55

Запитання для самоконтролю

1. На яких серверах можна безкоштовно розмістити Web-сторінку?

2. Як можна безкоштовно зареєструвати Web-сторінку в

пошукових механізмах Internet?

3. На яких україномовних і російськомовних пошукових

механізмах і каталогах можна безкоштовно зареєструвати свій

Web-сайт?

4. Які графічні формати використовуються у Web-дизайні?

5. Охарактеризуйте графічний формат GIF.

6. Які переваги формату GIF?

7. Охарактеризуйте графічний формат JPEG.

8. Яке представлення кольору використовується у форматі JPEG?

9. Як виконується стиснення зображення у форматі JPEG?

10. Охарактеризуйте графічний формат PNG.

56

СПИСОК ЛІТЕРАТУРИ:

1. Богданов А.Г. 47 готових рішень для створення Web-сайту /А. Г.

Богданов, Ю. Ю. Замятін, М. О. Горін, та ін. – Москва, Тріумф, 2009 р. –

272 с.

2. Черніков С. В. Dreamweaver CS3. Будуємо Web-сайти (+ CD-ROM): /

С. В. Черніков, Ф. А. Резніков. – Санкт-Петербург, 100 книг, Тріумф,

2008 р. – 256 с.

3. Дронов В. HTML 5, CSS 3 та Web 2.0. Розробка сучасних Web-сайтів:/

В. Дронов – Москва, БХВ-Петербург, 2011 р. – 416 с.

6. Смирнова І. Є. Початок Web-дизайну (+ CD-ROM):/ І. Є. Смирнова –

Санкт-Петербург, БХВ-Петербург, 2005 р. – 256 с.

9. Скотт Мітчелл. Секрети Web-дизайну: /– Санкт-Петербург, НТ Пресс,

2007 р. – 224 с.

10. Нолан Хестер. Створення Web-сторінок в Dreamweaver: / – Москва, НТ

Пресс, 2005 р. – 152 с.

12. Бабушкін М.А. / Як правильно організувати свій Web-сервер.»/ М. А.

Бубушкін., В. А. Коростельов – Мир Internet. – 1997 р.

15. Дуванов А.А. Web-конструювання. HTML./ А. А. Дуванов – СПб: БХВ

Петербург, 2003 р.

16. Дунаєв В. Web – графіка/ СПб / В. Дунаєв – БХВ-Петербург 2006 р.

17. МакВейд Д. Дизайн сторінок/ Серія Before & After – Російська Редакція

2006 р.

18. Моллі Хольцшлаг «250 порад HTML і WEB-дизайну/ НТ Прес 2006 р.

19. Початок WEB-дизайну. / Поради щодо створення сайту. Довідник з

HTML. / Розміщений у розділі: Підручники і посібники з веб-

дізайну.Адрес (Url): http://web-desing1.narod.ru/desing.htm

20. HTML для початківців або електронний довідник по HTML.: /

підручник по HTML. Електронний довідник по HTML./ Розміщений у

розділі: підручники і посібники з веб-дізайнуАдрес (Url):

http://htmlhelp1.narod.ru/

57

Додаток 1

Розкладка кольорової гами по RGB-складовим

16 стандартних кольорів

Назва Код RGB Ім’я Назва Код RGB Ім’я

чорний #000000 black срібний #C0C0C0 silver

темно-бордовий #800000 maroon червоний #FF0000 red

зелений #008000 green лимонний #00FF00 lime

оливковий #808000 olive жовтий #FFFF00 yellow

темно-синій #000080 navy синій #0000FF blue

фіолетовий #800080 purple фуксія #FF00FF fuchsia

чирок #008080 teal аква #00FFFF aqua

сірий #808080 gray білий #FFFFFF white

Додаткові кольори

Назва Код RGB Ім’я Назва Код RGB Ім’я

білосніжний #FFFAFA snow примарно-

білий

#F8F8FF ghost

white

білий антік #FAEBD7 antique

white

кремовий #FFFBF0 cream

персиковий #FFDAB9 peachpuff білий навахо #FFDEAD navajo

white

шовковий

відтінок

#FFF8DC cornsilk слонова

кістка

FFFFF0 ivory

лимонний #FFFACD lemon

chiffon

морська

раковина

#FFF5EE seashell

медовий #F0FFF0 honeydew лазурний #F0FFFF azure

блідо-

лиловий

#E6E6FA lavender блакитний з

червоним

#FFF0F5 lavender

blush

туманно-

рожевий

#FFE4E1 misty

rose

синювато-

сірий

#708090 slate gray

грифельно-

сірий

#778899 light

slate gray

світло-сірий #BEBEBE light gray

сірий

нейтральни

й

#A0A0A4 medium

gray

північно-

синій

#191970 midnight

blue

темно-синій #000080 dark blue волошковий #6495ED cornflower

грифельно-

синій

#6A5ACD slate blue світлий

грифельно-

синій

#8470FF light slate

blue

блакитний

королівський

#4169E1 royal

blue

небесно-

блакитний

#87CEEB sky blue

світлий

небесно-

блакитний

#87CEFA light sky

blue

синій зі

сталевим

відтінком

#4682B4 steel blue

58

Продовження дод. 1

блакитний

зі сталевим

відтінком

#B0C4DE light

steel blue

світло-синій #A6CAF0 light blue

синій з

пороховим

відтінком

#B0E0E6 powder

blue

блідо-

бірюзовий

#AFEEEE pale

turquoise

бірюзовий #40E0D0 turquoise світла аква #E0FFFF light aqua

сіро-синій #5F9EA0 cadet

blue

аквамарин #7FFFD4 aquamarine

колір

морської

хвилі

#54FF9F seagreen світла

морська

хвиля

#20B2AA light

seagreen

блідо-

зелений

#98FB98 pale

green

весняний

зелений

#00FF7F spring

green

зелений

лужок

#7CFC00 lawn

green

нейтральний

зелений

#C0DCC0 medium

green

зеленувато-

жовтий

#7FFF00 chartreuse зелено-

жовтий

#ADFF2F green

yellow

лимонно-

зелений

#32CD32 lime

green

жовто-

зелений

#9ACD32 yellow

green

зелений

лісний

#228B22 forest

green

блідо-

золотистий

березовий

#EEE8AA pale

goldenrod

світло-

жовтий

золотистий

#FAFAD2 light

goldenrod

yellow

світло-

жовтий

#FFFFE0 light

yellow

золотий #FFD700 gold світло-

золотистий

#FFEC8B light

goldenrod

золотисто-

березовий

#DAA520 goldenrod легкий

жовтий

#DEB887 burly

wood

рожево-

коричневий

#BC8F8F rosy

brown

шкіряно-

коричневий

#8B4513 saddle

brown

охра #A0522D sienna бежевий #F5F5DC beige

пшеничний #F5DEB3 wheat рудувато-

коричневий

#D2B48C tan

шоколадний #D2691E chocolate цегляний #B22222 firebrick

коричневий #A52A2A brown лосось #FA8072 salmon

світлий

лосось

#FFA07A light

salmon

помаранчевий #FFA500 orange

кораловий #FF7F50 coral кораловий

світлий

#F08080 light coral

59

Закінчення дод. 1

помаранчево

-червоний

#FF4500 orange

red

теплий

рожевий

#FF69B4 hot pink

рожевий #FFC0CB pink світло-

рожевий

#FFB6C1 light pink

червоно-

фіолетовий

блідий

#DB7093 pale

violet red

темно-

бордовий

#B03060 maroon

червоно-

фіолетовий

#D02090 violet red фіалковий #EE82EE violet

темно-

фіолетовий

#DDA0DD plum орхідея #DA70D6 orchid

фіолетово-

синій

#8A2BE2 blue

violet

пурпурний #A020F0 purple

60

Додаток 2

Основні теги мови HTML (HyperText Markup Language)

Базисні елементи

N Назва елемента Теги Примітки

1 Тип документа <HTML> </HTML> початок і кінець файлу

2 Ім'я документа <TITLE> </TITLE> повинно бути в

заголовку

3 Заголовок <HEAD> </HEAD> опис документа,

наприклад його ім'я

4 Тіло <BODY> </BODY> основний зміст сторінки

Визначення структури

N Назва елемента Теги Примітки

1 Заголовок <H?> </H?> стандарт визначає 6

рівнів

2 З вирівнюванням <H? ALIGN=LEFT|

CENTER| RIGHT> </H?>

3 Секція <DIV></DIV>

4 З вирівнюванням <DIV ALIGN=LEFT|

RIGHT|CENTER></DIV>

5 Цитата <BLOCKQUOTE>

</BLOCKQUOTE>

звичайно виділяється

відступом

6 Виділення <EM> </EM> звичайно зображується

курсивом

7 Додаткове

виділення

<STRONG> </STRONG> звичайно

зображується жирним

шрифтом

8 Посилання,

цитата

<CITE> </CITE> звичайно курсив

9 Код <CODE> </CODE> для листингів коду

10 Приклад

висновку

<SAMP> </SAMP>

11 Введення з

клавіатури

<KBD> </KBD>

12 Змінна <VAR> </VAR>

13 Визначення <DFN> </DFN> часто не підтримується

14 Адреса автора <ADDRESS></ADDRESS>

15 Великий шрифт <BIG> </BIG>

16 Маленький

шрифт

<SMALL> </SMALL>

Зовнішній вигляд

N Назва елемента Теги Примітки

1 Жирний <B> </B>

61

Продовження дод. 2

2 Курсив <I> </I>

3 Підкреслений <U> </U> часто не підтримується

4 Перекреслений <STRIKE> </STRIKE> часто не

підтримується

5 Перекреслений <S> </S> часто не

підтримується

6 Верхній індекс <SUB> </SUB>

7 Нижній індекс <SUP> </SUP>

8 Друкарська

машинка

<TT> </TT> виводиться як шрифт

фіксованої ширини

9 Форматований <PRE> </PRE> зберегти формат

тексту як є

10 Ширина <PRE WIDTH=?> </PRE> у символах

11 Центрувати <CENTER> </CENTER> як текст, так і графіка

12 Миготливий <BLINK> </BLINK> найбільш осміяний

елемент

13 Розмір шрифту <FONT SIZE=?> </FONT> від 1 до 7

14 Змінити розмір

шрифту

<FONT SIZE="+|-?">

</FONT>

15 Базовий розмір

шрифту

<BASEFONT SIZE=?> від 1 до 7; за

умовчанням 3

16 Колір шрифту <FONTCOLOR="#$$$$$$">

</FONT>

17 Вибір шрифту <FONT FACE="***">

</FONT>

18 Багатоколон-

ковий текст

<MULTICOL COLS=?>

</MULTICOL>

19 Пробіл між

колонками

<MULTICOL GUTTER=?>

</MULTICOL>

за умовчанням 10

пікселів

20 Ширина

стовпчика

<MULTICOL WIDTH=?>

</MULTICOL>

21 Порожній блок <SPACER> одноелементний тег

22 Тип порожньо-

го блоку

<SPACER TYPE=

horizontal| vertical|block>

одноелементний тег

23 Розмір порож-

нього блоку

<SPACER SIZE=?> одноелементний тег

24 Розміри порож-

нього блоку

<SPACER WIDTH=?

HEIGHT=?>

одноелементний тег

25 Вирівнювання <SPACER

ALIGN=left|right|center>

одноелементний тег

Посилання і графіка

62

Продовження дод. 2

N Назва

елемента

Теги Примітки

1 Посилання <A HREF="URL"> </A>

2 Посилання на

закладку

<A HREF="URL#***"> </A> в іншому файлі

<A HREF="#***"> </A> у документі

3 На інше вікно <A HREF="URL" TARGET="***|

|_blank|_self|_parent|_top"></A>

4 Визначити

закладку

<A NAME="***"> </A>

5 Відношення <A REL="***"> </A> часто не

підтримується

6 Зворотне

відношення

<A REV="***"> </A> часто не

підтримується

7 Графіка <IMG SRC="URL"> одноелементний

тег

8 Вирівнювання <IMG SRC="URL" ALIGN=

TEXTTOP|ABSMIDDLE|BASELINE|

ABSBOTTOM>

одноелементний

тег

9 Альтернатива <IMG SRC="URL" ALT="***"> виводиться,

якщо картинка

не зображується

10. Карта <IMG SRC="URL" ISMAP> потрібна

програма

11 Локальна

карта

<IMG SRC="URL"

USEMAP="URL">

одноелементний

тег

12 Визначення

карти

<MAP NAME="***"> </MAP>

13 Області карти <AREA SHAPE="RECT"

COORDS=",,,"

HREF="URL"|NOHREF>

одноелементний

тег

14 Розміри <IMG SRC="URL" WIDTH=?

HEIGHT=?>

у пікселях

15 Окантовка <IMG SRC="URL" BORDER=?> у пікселях

16 Відступ <IMG SRC="URL" HSPACE=?

VSPACE=?>

у пікселях

17 Замінник у

низькому

дозволі

<IMG SRC="URL"

LOWSRC="URL">

18 Оновити <META HTTP-EQUIV="Refresh"

CONTENT="?; URL=URL">

19 Включити

об'єкт

<EMBED SRC="URL"> вставити об'єкт

у сторінку

63

Продовження дод. 2

20 Розмір

об'єкта

<EMBED SRC="URL" WIDTH=?

HEIGHT=?>

Роздільники

N Назва елемента Теги Примітки

1 Новий абзац <P> одноелементний тег

2 Вирівнювання

нового абзацу

<P ALIGN=LEFT|

CENTER| RIGHT>

одноелементний тег

3 Новий рядок <BR> одноелементний тег

4 Прибрати

вирівнювання

<BR CLEAR=LEFT|

RIGHT| ALL>

одноелементний тег

5 Горизонтальний

роздільник

<HR> одноелементний тег

6 Вирівнювання

роздільника

<HR ALIGN=LEFT|

RIGHT| CENTER>

одноелементний тег

7 Товщина <HR SIZE=?> у пікселях

8 Ширина <HR WIDTH=?> у пікселях

9 Ширина у

відсотках

<HR WIDTH="%"> у відсотках від

ширини сторінки

10 Суцільна лінія <HR NOSHADE> без тривимірних

ефектів

11 Нарозбивки <NOBR> </NOBR> забороняє переклад

рядка

12 Перенос <WBR> місце переносу при

необхідності

Списки

N Назва елемента Теги Примітки

1 Компактний

маркерований

<UL COMPACT> </UL>

2 Тип маркеру

списку

<UL TYPE=DISC|CIRCLE|

SQUARE>

для всього списку

<LI TYPE=DISC|CIRCLE|

SQUARE>

цей і наступні

3 Нумерований <OL> <LI> </OL> <LI> перед кожним

елементом

4 Компактний

нумерований

<OL COMPACT></OL>

5 Тип нумерації <OL TYPE=A|a|I|i|1> для всього списку

<LI TYPE=A|a|I|i|1> цей і наступні

6 Перший номер <OL START=?> для всього списку

<LI VALUE=?> цей і наступні

7 Список визначень <DL> <DT> <DD> </DL> <DT>=термін,

<DD>=визначення

64

Продовження дод. 2

8 Компактний

список визначень

<DL COMPACT> </DL>

9 Меню <MENU> <LI> </MENU> <LI> перед кожним

елементом

10 Компактне меню <MENU COMPACT>

</MENU>

11 Каталог <DIR> <LI> </DIR> <LI>перед кожним

елементом

12 Компактний

каталог

<DIR COMPACT> </DIR>

Тіло і кольори

N Назва елемента Теги Примітки

1 Фонова

картинка

<BODY

BACKGROUND="URL">

2 Колір тіла <BODY

BGCOLOR="#$$$$$$">

порядок:

червоний/зелений/

синій

3 Колір тексту <BODY TEXT="#$$$$$$">

4 Колір

посилання

<BODY LINK="#$$$$$$">

5 Пройдене

посилання

<BODY VLINK="#$$$$$$">

6 Активне

посилання

<BODY ALINK="#$$$$$$">

Форми

N Назва елемента Теги Примітки

1 Визначити

форму

<FORM ACTION="URL"

METHOD=GET|POST></FORM>

2 Посилка файлу <FORM ENCTYPE= "multipart/form-

data"></FORM>

3 Поле введення <INPUT TYPE="TEXT|PASSWORD|

CHECKBOX|RADIO|IMAGE|

HIDDEN| SUBMIT|RESET">

4 Ім'я поля <INPUT NAME="***">

5 Значення поля <INPUT VALUE="***">

6 Відзначений

перемикач

<INPUT CHECKED> checkboxes,

radio boxes

7 Розмір поля <INPUT SIZE=?> у символах

8 Максимальна

довжина

<INPUT MAXLENGTH=?> у символах

9 Список варіантів <SELECT> </SELECT>

65

Продовження дод. 2

10 Ім'я списку <SELECT NAME="***">

</SELECT>

11 Число варіантів <SELECT SIZE=?> </SELECT>

12 Вибір прапорця <SELECT MULTIPLE> більше

одного

13 Опція <OPTION> елемент

вибору

14 Опція за

умовчанням

<OPTION SELECTED>

15 Введення

тексту, розмір

<TEXTAREA ROWS=? COLS=?>

</TEXTAREA>

16 Ім'я тексту <TEXTAREA NAME="***">

</TEXTAREA>

17 Розбивка на

рядки

<TEXTAREAWRAP=OFF|VIRTUAL|

PHYSICAL></TEXTAREA>

Таблиці

N Назва елемента Теги Примітки

1 Визначити таблицю <TABLE> </TABLE>

2 Окантовка таблиці <table border=?> </TABLE>

3 Відстань між

клітинками

<TABLE CELLSPACING=?>

4 Доповнення клітинок <TABLE CELLPADDING=?>

5 Бажана ширина <TABLE WIDTH=?> у пікселях

6 Ширина у відсотках <TABLE WIDTH="%"> відсотки від

ширини

сторінки

7 Рядок таблиці <TR> </TR>

8 Вирівнювання <TR ALIGN=LEFT|RIGHT|

CENTER|MIDDLE|BOTTOM>

9 Клітинка таблиці <TD> </TD> повинна бути

всередині

рядка

10 Вирівнювання <TD ALIGN=LEFT|RIGHT|

CENTER|MIDDLE|BOTTOM>

11 Без переводу рядка <TD NOWRAP>

12 Розтягування по

стовпцю

<TD COLSPAN=?>

13 Розтягування по

рядку

<TD ROWSPAN=?>

14 Бажана ширина <TD WIDTH=?> у пікселях

66

Продовження дод. 2

15 Ширина у відсотках <TD WIDTH="%"> відсотки від

ширини

сторінки

16 Колір клітинки <TD BGCOLOR="#$$$$$$">

17 Заголовок таблиці <TH> </TH> як дані, але

жирний

шрифт і

центрування

18 Вирівнювання

заголовку

<TH ALIGN=LEFT|RIGHT|

CENTER|MIDDLE|BOTTOM>

19 Заголовок без

переводу рядка

<TH NOWRAP>

20 Розтягування по

стовпцю

<TH COLSPAN=?>

21 Розтягування по

рядку

<TH ROWSPAN=?>

22 Бажана ширина <TH WIDTH=?> у пікселях

23 Ширина у відсотках <TH WIDTH="%"> відсотки

ширини

таблиці

24 Колір клітинки <TH BGCOLOR="#$$$$$$">

25 Заголовок таблиці <CAPTION> </CAPTION>

26 Вирівнювання <CAPTION ALIGN=TOP

|BOTTOM>

зверху/знизу

таблиці 27.

Фрейми 130.

N Назва елемента Теги Примітки

1 Документ із

фреймами

<FRAMESET> </FRAMESET> замість

<BODY>

2 Висота рядків <FRAMESET ROWS=,,,>

</FRAMESET>

3 Ширина стовпців <FRAMESET COLS=,,,>

</FRAMESET>

4 Ширина окантовки <FRAMESET BORDER=?>

5 Окантовка <FRAMESET

FRAMEBORDER="yes|no">

6 Колір окантовки <FRAMESET

BORDERCOLOR="#$$$$$$">

7 Визначити фрейм <FRAME> зміст окремого

фрейму

8 Документ <FRAME SRC="URL">

67

Закінчення дод. 2

9 Ім'я фрейму <FRAME NAME="***"|

_blank|_self| _parent|_top>

10 Ширина границі <FRAME MARGINWIDTH=?> права і ліва

границі

11 Висота границі <FRAME

MARGINHEIGHT=?>

верхня і

нижня границі

12 Скролінг <FRAME SCROLLING=

"YES|NO|AUTO">

13 Постійний розмір <FRAME NORESIZE>

14 Окантовка <FRAME

FRAMEBORDER="yes|no">

15 Колір окантовки <FRAME

BORDERCOLOR="#$$$$$$">

68

Додаток 3

Типи файлів, які можна зустріти в Internet

Розширення/тип

файлу

Зміст файлу

.a Бібліотека відкомпільованих процедур

.afm Adobe Font Metrics – метрики символів шрифту PostScript

.ai Файл PostScript

.aif, .aifc, .aiff Audio-дані

.ar Архів програми ar

.arc Архів програми arc, pkarc або arcа/arcb

.arj Архів програми arj

.asm Вихідний текст програми на Асемблері

.au Формат зберігання звуку

.avi Формат зберігання відеозображення

.b Вбудований редактор

.bak Стара версія певного файла

.bas Вихідний текст програми на мові Basic (GWBasic,

TurboBasic, QuickBasic)

.bat Набір команд

.bgi Borland Graphics Interface – Динамічно підвантажувана

бібліотека графічних програм-драйверів, що залежать від

типу відеоадаптера

.bmp Растровий графічний формат

.C В Unix архів програми compact

.c Вихідний текст програми на мові C

.cfg Конфігураційний файл програми

.cgi WWW-сервер під Unix. Програма, що працює за

протоколом Common Gatеway Interface (вхідні дані – у

змінній оточення QUERY_STRING у методі GET або у

стандартному введенні stdin у методі POST). Може бути

будь-яким виконуваним файлом

.clo, .cls Опис класів документів і макровизначень TEX

.com Виконуваний двоїчний файл

.cpp Вихідний текст програми на мові C++

.cpt Архів програми CompactPro (Macintosh)

.def Опис шрифтів TEX без накреслень кожного символу

.dir Файл папки редактора MicroMir або NanoMir

.diz Файл з коротким описом продукту або змісту

диска/архиву для піратських програмних продуктів

.dll Dynamic Linked Library – у Windows динамічно

приєднувана бібліотека

.doc Документ редактора Microsoft Word для Windows

.dot Шаблон документа редактора Microsoft Word для

Windows

69

Продовження дод. 3 .dp Digital Paper – Аналог .PDF файлу фірми Common Ground

Software

.evy Envoy – Аналог .PDF файлу фірми Novell

.exe Виконуваний бінарний файл

.f В Unix вихідний текст програми на мові Fortran

.fd Опис шрифтів TEX без накреслень кожного символу

.fon Шрифт

.for Вихідний текст програми на мові Fortran

.fot Шрифт

.gif Graphics Interchange Format – Растровий графічний

формат фирми CompuServe

.gz Архів, створений програмою gzip (Unix) і

розархівовуючий gunzip или gzip

.h В мові C header-файл, що містить опис заголовків

процедур

.hqx Файл програми BinHex (Macintosh). Призначений для

передачі без змін бінарних файлів через Internet

.htm, .html Текст на Hyper Text Markup Language. Містить команди

(tags) у кутових дужках (<команда>), інше

інтерпретуеться як текст

.ice Архів програми ice

.iff Формат зберігання звуку, розроблений для комп’ютерів

Amiga

.ini Файл з установками певної програми

.jfif, .jpeg, .jpg Растровий графічний формат JPEG збереження файлів з

втратою інформації без істотної втрати якості

.l3 MPEG-1: звук тільки Layer-3

.latex, .ltx Одно з розширень TEX

.lha, .lzh Архів програми lzh

.lib Бібліотека процедур

.m1s MPEG-1: системний потік

.m2a MPEG-2: тільки звук

.m2s MPEG-2: системний потік

.m2v MPEG-2: тільки відео

.man Файл у форматі TROFF (Typesetting Run OFF)

.me Файл редактора MultiEdit або файл read.me

.mf MetaFont. Програма, що представляє шрифт для TEX у

вигляді матричних і растрових комбінацій

.mia MPEG-1: тільки звук

.mid MIDI. Звуковий файл

.mim Файл редактора MicroMir

.miv MPEG-1: тільки відео

.mod Формат зберігання звуку

.mov, .moov Формат зберігання відео і аудіо

70

Продовження дод. 3 .mpg MPEG. Формат зберігання відео і звуку з компресією і

втратою даних

.mps MPEG-1

.nfo Короткий опис змісту папки або диска

.o В Unix відкомпільований, але не зібраний для виконання

код-програм

.obj Відкомпільований, але не зібраний для виконання код

програм

.ovl OverLay. Динамічно підвантажуваний модуль програми

.p В Unix вихідний текст програми на мові Pascal

.pas Вихідний текст програми на мові Pascal

.pbm Portable BitMap. Простий формат зберігання чорно-білих

картинок

.pcx Растровий графічний формат, який підтримують

більшість редакторів

.pdf Portable Document Format

.pfm PostScript Font Metrics. Метрики символів у шрифті

PostScript

.pgm Portable GrayMap. Простий формат зберігання

полутонових картинок

.pict Формат зберігання графічних зображень в буфері обміну

на комп’ютерах Macintosh

.pk Растровий шрифт для TEX

.pl Файл на мові Perl

.pl Опис шрифтів TEX без накреслень кожного символу

.pnm Простий формат зберігання картинок, що об’єднує .pbm,

.pgm і .ppm

.pop В Unix тимчасовий файл POP3 – сервера в тій самій папці,

що і поштові скриньки користувачів

.ppd PostScript Printer Description. Опис принтера для

друкуючої програми

.ppm Portable PixelMap. Простий формат зберігання кольорових

картинок

.ppt Презентація, створена в програмі Microsoft PowerPoint

.ps Векторний графічний формат PostScript

.rar Архів програми Winrar

.rpm RedHat Packing Manager. Формат зберігання

дистрибутивів у RedHat Linux

.rtf Rich Text Format

.sea Архів програми stuff (Macintosh)

.sgm, .sgml Standard Generalized Markup Language. Мова розмітки, для

управління великими підбірками документів. Окремим

випадком SGML є HTML

.sh Виконуваний пакетний файл на мові shell

.so Динамічно приєднувана бібліотека

71

Закінчення дод. 3 .snd Звуковий файл

.spl Future Splash Player

.sty Опис класів документів і макровизначень TEX

.swf ShockWare Flash

.swp Файл підкачки

.tar Архив програми tar (Unix) без компресії

.tfm Опис шрифтів TEX без накреслень кожного символу

.tif, .tiff Tagged Image File Format, растровий графічний формат

.ttf TrueType Font

.uc, .uc2 Архів програми uc (UltraCompressоr)

.vp, .vpl Файли віртуальних шрифтів для TEX

.vrml Virtual Reality Modeling Language

.xx, .xxe Файл, що створений програмою xxencode і розкривається

програмою xxdecode

.Z Архів програми compress або pack

.zip Архів програми pkzip або WinZip

.zoo Архів програми zoo

72

Додаток 4.

Тлумачний словник

Active Channel. Вузол Web, що автоматично поставляється на

робочий стіл користувача.

Active Desktop. Інтерфейс, інтегрований з робочим столом Windows

і оглядачем Microsoft Internet Explorer.

ActiveMovie. Технологія цифрового відео, що дозволяє через Web

переглядати файли AVI, QuickTime або MPEG.

ActiveX. Термін програмного інтерфейсу технології Microsoft, що

дозволяє розробникам створювати інтерактивний вміст для WWW, а також

для компонентів програмного забезпечення, написаних різними мовами.

Основні елементи технології ActiveX - COM і DCOM.

Address. Унікальний код з інформацією, що знаходиться у файлі

конкретної мережі.

Anchor. Те, що власне і утворює гіпертекстове посилання.

Anonymous. Один з методів отримання доступу до тієї чи іншої

інформації. Ви можете лише копіювати файли, передавати свої – ні.

ANSI. American National Standards Institute.

Authorization. Право, яке дається користувачеві на той чи інший

ресурс комп'ютерної системи.

BBS. Bulletin Board System. Тип комп’ютерного сервису. Юзери

можуть читати і публікувати різні повідомлення, передавати або

викачувати файли.

Bookmark. Закладка. Файл Gopher або WWW. Інформація в цьому

файлі розміщена так, що отримати доступ до бажаної сторінки можна без

додаткового серфінгу.

Browser. Програма для переміщення по мережі.

Bullet. Маркер. Елемент оформлення тексту. Наприклад, маленький

круг, квадрат, зірочка.

Character Set. Символи, об'єднані в певну групу. Наприклад, ASCII.

Character. Будь-який символ, введений з клавіатури в комп'ютер.

Chart. Діаграма. Малюнок, що показує взаємодію тих або інших

даних.

Check Box. Прапорець у вигляді хрестика. Один з чисельних

елементів графічної операційної системи. Дозволяє включати або

відключати незалежні опції.

CompuServe. Комерційна комп’ютерна мережа США.

Cookies. Технологія, що дозволяє зберігати суто індивідуальну

інформацію про користувача мережі.

73

Cracker. Хакер, який ламає все і вся.

Cybermall. Електронний магазин.

Cyberpunk. Хакер, що самостверджується.

DejaNews. Шукаємо новини в конференціях Usenet за ключовим

словом, автором статті або за адресою. Доступ через

http://www.dejanews.com.

DNS. Domain Name System. Доменна система адресації.

Domain Name Server. Ім’я сервера домена. Кожен підрозділ Internet

має два домени. Основний DNS зазвичай розташовується на мережевій

машині. DNS-сервера використовують в своїх зверненнях до видалених

вузлів 32-бітові адреси IP, мнемонічно вміщені в чотирирозрядну літерну

комбінацію. Будь-який хост може отримати відповідний DNS у

найближчого інформаційного сервера DNS за відомою системою Domain

Name Server через мережевий протокол DNS. Просто хост посилає запит на

відому IP-адресу DNS –сервера: свою IP-адресу і ім'я сервера. Сервер DNS

вивчає власну базу даних, знаходить IP-адресу і відправляє на хост

відповідну відповідь DNS. Якщо ж сервер DNS не знаходить шукану

літерну комбінацію, то він посилає запит на так званий кореневий сервер,

який, у свою чергу, звіряє інформацію з файлом налаштувань root.cache.

Так відбувається до тих пір, поки ім'я хоста не буде знайдено в Internet.

Domain. Підрозділ Internet. В кожного домена є своя мітка.

Наприклад, мітки .com, .net, .mil, .org означають, що це, відповідно домен

комерційної, мережевої, військової і суспільної організації.

Download. Закачування програмного забезпечення з іншого

комп'ютера на власний жорсткий диск.

Ethernet. Один з видів мережі з високою пропускною спроможністю.

Пакетна технологія передачі даних переважно локальних комп'ютерних

мереж. Досить часто комп'ютери, що використовують протоколи TCP/IP,

під'єднуються до Internet через Ethernet.

Font. Шрифт або сімейство знаків з індивідуальним стилем.

Freeware. Безкоштовне програмне забезпечення.

FTP. File Transfer Protocol. Метод пересилання файлів по мережі.

FTP-client. Програма, що дозволяє приєднатися до сервера FTP.

FTP-команди. Команди з синтаксисом FTP.

FTP-mail. Технологія отримання файлів з серверів FTP по

електронній пошті.

FTP-server. Сервер, що підтримує протокол FTP.

GIF. Graphic Interchange Format. Один із стандартних графічних

форматів WWW.

74

Hacker. Дуже розумна людина. Той, хто зламує мережі. Цей

«розумник» може проникнути в будь-яку мережу. Робиться це різними

способами. Наприклад, через порт терміналу або порт електронної пошти.

Вибравши жертву, хакер перш за все визначає, чи є на сервері погані

паролі, погано налагоджений софтвер або зіпсована операційна система.

Потім вибирає метод власної безпеки.

HTML. HyperText Markup Language. Мова розмітки гіпертексту, що

лежить в основі формування документов World Wide Web.

HTTP. HyperText Transport Protocol. Правила передачі документів

HTML по World Wide Web.

Hypermedia. Гіперсередовище. Через певні посилання зв'язується

текст, графіка, звук, відео і картинки.

Hypertext. Текст, що містить гіперпосилання на різні документи

Internet.

Internet. Світова з англомовним нахилом вільна конфедерація

комп'ютерних мереж, що об'єднує понад 12 тисяч локальних мереж, понад

за один мільйон комп'ютерів і близько 30 мільйонів юзерів.

IP Address. Тридцятидвобітова адреса протоколу Internet, що

включає номер вузла і мережі.

IP. Найважливіший з усіх протоколів, на якому базується мережа

Internet. Через цей протокол здійснюється пряме підключення до Internet.

IRC. Internet Relay Chat. IRC чимось нагадує роботу в конференціях

Usenet. Але якщо там ви спілкуєтеся не в реальному часі, то тут може

вестися жива розмова. Хіба що – вас ніхто не чує. Вас можуть прочитати.

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

дисплей. Різні групи її бачать, якщо цікаво – відповідають.

JPEG. Joint Photographic Experts Group. Графічний формат,

прийнятий всіма як стандартний формат при оформленні Web-сторінок.

Lamer. Юзер-ідіот. Термін, придуманий американськими

системними адміністраторами.

Login. Реєстраційне ім’я користувача.

Lurk. Пасивні спостерігачі. Наприклад, ті, хто лише читає новини

конференцій Usenet або повідомлення, що проходять по каналах IRC.

Mail server. Поштовий сервер. Комп’ютер, що обробляє електронну

пошту.

Mail. Обмін приватними текстовими повідомленнями в Internet або в

іншій комп'ютерній мережі.

Mailing list. Cписок розсилки електронних поштових повідомлень,

класифікованих по певних темах. Своєрідна підписка.

Marquee. Рядок, що біжить, в документі HTML.

75

Microsoft FrontPage Express. Редактор Web-сторінок. Засіб для

створення і оформлення документів HTML в режимі безпосереднього

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

MIME. Multipurpose Internet Mail Extensions. Протокол передачі

звуку, графіки й інших двійкових даних. Застосовується у процесі передачі

поштових повідомлень.

Mosaic. Браузер – графічний інтерфейс користувача, що дозволяє

переглядати World Wide Web. Існують версії для X-Window, Windows і

Macintosh.

MPEG. Moving Pictures Expert Group. Протокол упаковки

відеозапису.

Netscape Communicator. Ще один браузер – графічний інтерфейс

користувача, що дозволяє переглядати World Wide Web. Існують версії для

X-Window, Windows і Macintosh.

Newsgroup. Область повідомлень в конференціях Usenet.

NNTP. Мережевий протокол, за допомогою якого весь світ

користується конференціями Usenet.

Offline. Автономний режим роботи комп’ютера.

Online. Інтерактивний режим роботи мережевого комп’ютера.

Page. Сторінка. Документ World Wide Web.

Prompt. Поле даних віддаленого терминалу.

Protocol. Метод, за допомогою якого передається інформація від

хоста до юзера.

Provider. Постачальник послуг Internet.

76

Навчальне видання

Філімонова Оксана Юріївна

Васильєва Ганна Леонідівна

Мінаєва Юлія Іванівна

Web-дизайн

Конспект лекцій

для студентів, які навчаються за напрямами підготовки:

6.030601 «Менеджмент», 6.060101 «Будівництво», 6.080101

«Геодезія, картографія та землеустрій»

Редагування та коректура А. О. Бакієвої

Комп’ютерне верстання А.П Морозюк

Підписано до друку 2011. Формат 60х84

Ум. друк. арк. 4,42. Обл..-вид. арк. 4,75,

Тираж 50 прим. Вид. № 30/I-11 Зам. №

КНУБА, Повітрофлотський проспект, 31, Київ, Україна, 03680

E-mai: red_isdat@ua fm

Видруковано в редакційно-видавничому відділі

Київського національного університету будівництва і архітектури

Свідоцтво про внесення до Державного реєстру суб’єктів видавничої справи

ДК № 808 від 13.02.2002р.