Основи web-дизайну. Графічні редактори

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

Комп'ютерні та телекомунікаційні технології проникають в науку, культуру, освіту, економіку і політику. Інтернет відображає різноманітність життя людства: дозвілля, спілкування, інформаційний сервіс і всі види професійної діяльності. Мережа стає потрібною всім - незалежно від професії і віку.

Інтернет упевнено завойовує собі права загальновизнаного засобу масової комунікації і надає поступово зростаючий вплив на формування світогляду суспільства. У мережі сьогодні вже так багато інформації, що практично можна отримати відповідь на будь-яке питання. Мережа сама по собі так влаштована, що в ній немає тих комунікаційних бар'єрів, з якими ми часто стикаємося в реальності. Саме тому вона придбала роль всесвітнього сховища інформації і перетворилася в засоби масової комунікації. Користувачі мережі не тільки беруть інформацію, а й постійно наповнюють її різними інформаційними ресурсами. Люди вважають нормальним віддати свої знання іншим. Прийшов час, коли вже немає сенсу таїти інформацію, - набагато корисніше і ефективніше вільно обмінюватися нею. На цьому новому стандарті людської взаємодії і побудовані безмежні інформаційні можливості Інтернету.

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

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

Візуалізація даних знаходить застосування в самих різних сферах людської діяльності. Для прикладу назвемо медицину (комп'ютерна томографія), наукові дослідження (візуалізація будови речовини, векторних полів і інших даних), моделювання тканин та одягу, дослідно-конструкторські розробки.
Залежно від способу формування зображень комп'ютерну графіку прийнято поділяти на растрову, векторну і фрактальну.

Окремим предметом вважається тривимірна (3D) графіка, що вивчає прийоми і методи побудови об'ємних моделей об'єктів у віртуальному просторі. Як правило, в ній поєднуються векторний і растровий способи формування зображень.

Особливості колірного охоплення характеризують такі поняття, як чорно-біла і кольорова графіка. На спеціалізацію в окремих областях вказують назви деяких розділів: інженерна графіка, наукова графіка, Web-графіка, комп'ютерна поліграфія та інші.

WEB дизайн, як основа створення сайту

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

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

В даний час послуги веб-дизайну надають як спеціальні компанії, так і приватні особи.
Складанням технічного завдання для фахівців займається менеджер проекту. Робота з замовником починається з заповнення брифу, в якому замовник викладає свої побажання щодо візуального представлення і структури сайту, вказує на помилки в старій версії сайту, наводить приклади сайтів конкурентів. Виходячи з брифа, менеджер складає технічне завдання, враховуючи можливості програмних і дизайнерських засобів. Етап закінчується після затвердження технічного завдання замовником. Важливо відразу зазначити, що етапи проектування вебсайтів залежать від багатьох факторів, таких як обсяг сайту, функціональність, завдання, які повинен виконувати майбутній ресурс і багато іншого. Однак, є кілька етапів, які в обов'язковому порядку присутні в плануванні будь-якого проекту.

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

Якщо ми говоримо про сайти, то не можемо не згадати про блоках. Саме слово «блок» має безліч значень. У середовищі веб-розробок блоки, в різному розумінні цього слова, зустрічаються і в програмуванні, і в верстці, і в дизайні. У загальних рисах блок - це елемент структури, як правило, складається з інших елементів. Стандартна сторінка в інтернеті складається з декількох блоків: це шапка сайту (header), вміст (content), підвал (footer), а також меню навігації.
Шапка - вважається візитною карткою сайту в зв'язку з чим, багато веб-майстри намагаються зробити її якомога більш виразною. Нерідко при цьому шапка виростає в височінь, а зображення притягнуті за вуха, тобто не відповідають тематиці сайту і вставляються виключно для краси.

Наскільки високою повинна бути шапка? Настільки, щоб розташованому в ній логотипу не було тісно і при цьому всі елементи логотипу можна було розглянути контент сторінки.

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

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

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

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

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

WEB-редактор, приклади

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

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

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

Сучасні редактори програмного коду, запозичили свій функціонал у візуальних текстових редакторів, а також у спеціалізованих засобів текстової розробки, які додаються до різних компіляторам. Від текстових редакторів і офісних пакетів сучасні засоби розробки сторінок інтернет, ввібрали все найкраще в області представлення текстової та графічної інформації на екрані комп'ютера. Від спеціалізованих редакторів, які додаються до компіляторам програм, як на мові Pascal або C, редактори коду сторінок інтернет ввібрали можливість підсвічування синтаксису і підставки елементів коду.

Запозичивши риси обох предків, редактори Web сторінок стали розвиватися, разом зі своїми батьками. Частина редакторів ввібрала в себе більше можливостей щодо графічного відображення інформації на екрані і маніпуляції з уже виконаним кодом. Інша ж частина ввібрала в себе велику кількість можливостей по підсвічуванню синтаксису, і підставки програмного коду на різних мовах у вигляді сирого тексту. У деяких додатках гармонійно поєднуються функції обох попередників.
Текстовими редакторами для Web розробки прийнято називати ті програми, які ввібрали в себе кращі якості роботи з кодом і підсвічуванням синтаксису на різних мовах.

Для програмування додатків в інтернет застосовуються спеціальні засоби розробників, які вміють працювати з даними HTML, CSS, PHP, JavaScript.
WYSIWYG (What You See Is What You Get) -від програм, що має справу з уявленнями результатів роботи програмного коду на екрані в графічному вигляді, який застосовується розробниками інтернет-додатків. Ці редактори дозволяють відображати результати роботи коду на екрані в зручному для користувачів вигляді.

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

Текстові редактори для розробки веб додатків

Вони пропонують більш гнучкі можливості і акуратні результати в порівнянні з візуальними редакторами і з'явилися дещо раніше, ніж другі, як інструмент Web розробника.
Notepad ++ (Windows, Linux, Mac).
Notepad ++ - це продукт створений програмістами для програмістів. Функціонал практично необмежений, але виробники скромно заявляють лише про частину найнеобхідніших для загального числа користувачів функціях програми.
PHPeditor.

Простенький продукт, для роботи з HTML і PHP.
Головним плюсом даної програми є потужна функція пошуку і заміни відразу по декількох файлах, яка працює дуже швидко;
Програма має можливість підсвічування синтаксису HTML, PHP;
Є інспектор коду HTML і PHP;
Включено вбудований сервер, для перевірки серверних додатків;
Багатовкладковий інтерфейс;
Функції вставки;
Підтримка макросів;
Запис шаблонів коду з невеликим початковим набором.

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

Стандартні засоби розробки для UNIX систем

Vim (Windows, Mac, Linux).
По суті - це дуже зручна програма для консолі linux, яка просто незамінна у системних адміністраторів. Основам володіння Vim вчать на спеціальних курсах. Так що тема обговорення цього редактора просто нескінченна. Це тема скоріше розробки самого додатка для розробки, ніж його функціоналу.
Fraise (Mac).
Простий у використанні і не переобтяжений функціоналом редактор для Mac Fraise, містить необхідні інструменти для простої розробки додатків для Web без додаткових плагінів:

Підсвічування синтаксису;
Зручна робота з блоками;
Пошук і заміна;
Блоки для швидкого введення тегів HTML і CSS;
Вбудований браузер з функцією автоматичного оновлення при заміні стилів;
Закриття тегів натисненням однієї кнопки;
Інспектор HTML.

Цей редактор створений спеціально для Mac і є гарною заміною стандартному текстового редактора. Він є додатком Smultron, з цієї причини він працює тільки в пізніших версіях ОС Mac, або, при встановленому Smultron.

Професійні середовища розробки та їх відгалуження

Komodo Edit (Windows, Linux, Mac).
Функціонал цієї програми запозичений в паралельному комерційному проекті і розширюється за допомогою додаткових плагінів, що робить його практично необмеженим. Тут є все необхідне для комфортної роботи з будь-яким програмним кодом. Виробники не передбачили можливість переглядати код відразу в двох вікнах. Це робить роботу з кодом не настільки комфортним
Можливості Komodo Edit обмежуються у вільній версії, досить скромним функціоналом в порівнянні з Komodo IDE, але що конкретного може запропонувати нам Komodo Edit:

Підтримка підсвічування синтаксису на більшості мов програмування для інтернету;
Заповнити форму і закриття тегів;
Файловий менеджер і менеджер проектів;
FTP - клієнт, який працює за різними протоколами;
Вбудований браузер для перегляду результатів роботи;
Функції пошуку і заміни з регулярними виразами;
Багатовіконний інтерфейс з вкладками;
Перевірка html коду tidy.

Функціонал цим далеко не обмежується, так що він задовольняє будь-яким потребам. Хоча, сама програма може здатися злегка громіздкою для користувачів Linux. Справа в тому, що вбудований браузер і клієнт ftp - це не зовсім те, що потрібно від текстового редактора. Є програми, які справляються з цими завданнями набагато краще інтегрованих рішень.

Bluefish Editor (Windows, Linux).
Bluefish Editor - можливо так само існує аналог для Mac. Мабуть єдине рішення для Linux в плані розробки, яке годиться для вирішення будь-яких завдань. В цілому функціонал програми аналогічний, функцій Aptana Studio. Ця програма для професіоналів. Весь її функціонал не перелічити. Тому настройка її вимагає певних навичок. Головним недоліком цього редактора, є, на мій погляд, повільність і неповороткість.

Візуальні редактори для розробників WEB

Перейдемо до освоєння найзручніших і корисних редакторів візуального типу. Це занадто велика сфера, щоб займатися додатковою рекламою платного програмного забезпечення. Ми зосередимося на безкоштовні програми даного типу, про яких не так багато відомо і сказано.

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

AdobeGolive і Adobe LiveMotion.
Необмежений функціонал при розробці, верстці, і нарізці сторінок. Багато хто вважає функціонал AdobeGolive недостатнім, але комплексне використання програмного забезпечення Adobe поза конкуренцією. Ця тема не для короткої статті, а для багатотомних праць з Adobe.

Microsoft Front Page.
Це зручна, проста у використанні, візуальне середовище розробки. Чи не відрізняється чистотою коду на виході. Але в той же час вона дозволяє працювати з різними мультимедійними даними і не вимагає знання особливих навичок, крім знання Ms Word. Може завантажувати готові сторінки по ftp, На даний момент Front Page в пакетах Microsoft Office замінений на Microsoft Expression Web і Microsoft Office SharePoint Designer.
Існує (1997 безкоштовна версія FrontPage Express, яка робить досить чистий код, який, втім, уже не відповідає стандартам HTML. Але якщо вам на швидку руку треба зверстати складну таблицю - це саме те, що вам треба. Дистрибутив у FrontPage Express немає, працює без установки.

WYSIWYG WEB Builder.
WYSIWYG WEB Builder - умовно безкоштовна програма, яка надає користувачам весь спектр можливостей для побудови сайтів, без знання спеціальних мов і кодів. Можна накидати готовий сайт в лічені хвилини, просто натискаючи мишкою на вподобаних елементах і перетягуючи їх на сторінку сайту. Проте в програмі присутні так само інструменти для створення складних форм, стилів і впровадження різних об'єктів з інтернету і проекту сайту.

Клієнтські мови

Як випливає з назви, програми на клієнтських мовах обробляються на стороні користувача як правило, їх виконує браузер. Це і створює головну проблему клієнтських мов - результат виконання програми (скрипту) залежить від браузера користувача. Тобто, якщо користувач заборонив виконувати клієнтські програми, то вони виконуватися не будуть, хоч би як бажав цього програміст. Крім того, може статися таке, що в різних браузерах або в різних версіях одного і того ж браузера один і той же скрипт буде виконуватися по-різному. З іншого боку, якщо програміст покладає надії на серверні програми, то він може спростити їх роботу і знизити навантаження на сервер за рахунок програм, виконуваних на стороні клієнта, оскільки вони не завжди вимагають перезавантаження (генерацію) сторінки. Найпоширенішими клієнтськими мовами програмування є:

JavaScript
VBScript
ActionScript
Java
CoffeeScript

Сервісні мови

Коли користувач дає запит на яку-небудь сторінку (переходить на неї по посиланню або вводить адресу в адресному рядку свого браузера), то викликана сторінка спочатку обробляється на сервері, тобто виконуються всі програми, пов'язані зі сторінкою, і тільки потім повертається до відвідувача по мережі у вигляді файлу. Цей файл може мати розширення: HTML, PHP, ASP, ASPX, Perl, SSI, XML, DHTML, XHTML.
Робота програм вже повністю залежна від сервера, на якому розташований сайт, і від того, яка версія тієї чи іншої мови підтримується. До серверним мов програмування можна віднести: PHP, Perl, Python, Ruby, будь .NET мову програмування (технологія ASP.NET), Java, Groovy.
Важливою стороною роботи серверних мов є можливість організації безпосередньої взаємодії з системою управління базами даних (або СУБД) - сервером, на якому впорядковано зберігається інформація, яка може бути викликана в будь-який момент. Популярними серед систем управління базами даних є:

Firebird
IBM DB2
IBM DB2 Express-C
Microsoft SQL Server
Microsoft SQL Server Express
mSQL
MySQL
Oracle
PostgreSQL
SQLite
Sybase Adaptive Server Enterprise

Створення сайту

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

Основи додатку

Усі теги HTML починаються з "<" (лівої кутової дужки) і закінчуються символом ">" (правої кутової дужки). Як правило, існує стартовий тег і завершальний тег. Для прикладу наведемо теги заголовка, що визначають текст, що знаходиться всередині стартового і завершального тега і описує заголовок документа:
<TITLE> Заголовок документа </ TITLE>
Завершальний тег виглядає також, як стартовий, і відрізняється від нього прямим слешем перед текстом всередині кутових дужок. В даному прикладі тег <TITLE> говорить WEB-браузеру про використання формату заголовка, а тег </ TITLE> - про завершення тексту заголовка.
Деякі теги, такі, як <P> (тег, що визначає абзац), не вимагають завершального тегу, але його використання надає початкового тексту документа поліпшену читаність і структуровані.
HTML не реагує на регістр символів, що описують тег, і наведений раніше приклад може виглядати наступним чином:
<Title> Заголовок документа </ title>
Додаткові пробіли, символи табуляції і повернення каретки, додані в вихідний текст HTML-документа для його кращої читання, будуть проігноровані WEB-браузером при інтерпретації документа. HTML-документ може включати вищеописані елементи, тільки якщо вони поміщені всередину тегів <PRE> і </ PRE>. Більш докладно про теги <PRE> буде написано нижче.

Структура документу

Коли WEB-браузер отримує документ, він визначає, як документ повинен бути інтерпретований. Найперший тег, який зустрічається в документі, повинен бути тегом <HTML>. Даний тег повідомляє WEB-браузеру, що ваш документ написаний з використанням HTML. Мінімальний HTML-документ буде виглядати так:
<HTML>
... тіло документа ...
</ HTML>
Заголовна частина документа <HEAD>. Тег заголовної частини документа повинен бути використаний відразу після тега <HTML> і більше ніде в тілі документа. Даний тег є загальний опис документа. Уникайте розміщувати будь-якої текст всередині тега <HEAD>. Стартовий тег <HEAD> поміщається безпосередньо перед тегом <TITLE> і іншими тегами, що описують документ, а завершальний тег </ HEAD> розміщується відразу після закінчення опису документа. наприклад:
<HTML>
<HEAD>
<TITLE> Список співробітників </ TITLE>
</ HEAD>
Технічно, стартові і завершальні теги типу <HTML>, <HEAD> і <BODY> необов'язкові. Але настійно рекомендується їх використовувати, оскільки використання даних тегів дозволяє WEB-браузеру впевнено розділити заголовну частину документа і безпосередньо смислове частина.
Заголовок документа <TITLE>. Більшість WEB-браузерів відображають вміст тега <TITLE> в заголовку вікна, що містить документ і у файлі закладок, якщо він підтримується WEB-браузером. Тема, обмежений тегами <TITLE> і </ TITLE>, розміщується всередині <HEAD> -тегов, як показано вище на прикладі. Заголовок документа не виникає при відображенні самого документа у вікні.
Коментарі. Як будь-яка мова, HTML дозволяє вставляти в тіло документа коментарі, які зберігаються при передачі документа по мережі, але не відображаються браузером. Синтаксис коментаря:
<! - Це коментар ->
Коментарі можуть зустрічатися в документі де завгодно і в будь-якій кількості.

Теги тіла документа

Теги тіла документа ідентифікують відображаються у вікні компоненти HTML-документа. Тіло документа може містити посилання на інші документи, текст і іншу форматований інформацію.
Тіло документа <BODY>. Тіло документа повинне перебувати між тегами <BODY> і </ BODY>. Це та частина документа, яка відображається як текстова та графічна (смислова) інформація вашого документа.
Рівні заголовків <Hx>. Коли пишеться HTML-документ, текст структурно ділиться на просто текст, заголовки частин тексту, заголовки більш високого рівня і т.д. Перший рівень заголовків (найбільший) позначається цифрою 1, наступний - 2, і т.д. Більшість браузерів підтримує інтерпретацію шести рівнів заголовків, визначаючи кожному з них власний стиль. Заголовки вище шостого рівня не є стандартом і можуть не підтримуватися браузером. Тема самого верхнього рівня має ознака "1". Синтаксис заголовка рівня 1 наступний:
<H1>
Тема першого рівня
</ H1>
Заголовки іншого рівня можуть бути представлені в загальному випадку так:
<Hx>
Тема x-го рівня
</ Hx>,
де x - цифра від 1 до 6, що визначає рівень заголовка.
Тег абзацу <P>.
На відміну від більшості текстових процесорів, в HTML-документі зазвичай ігноруються символи повернення каретки. Фізичний розрив абзацу може перебувати в будь-якому місці вихідного тексту документа (для зручності його читаності). Однак браузер розділяє абзаци тільки при наявності тега <P>. Якщо ви не розділите абзаци тегом <P>, ваш документ буде виглядати як один великий абзац.
Розширені можливості пошуку тега <P>:
<P ALIGN = left | center | right>, дозволяють вирівнювати абзац по лівому краю, центру і правого краю відповідно.
Центрування елементів документа. Ви можете центрувати всі елементи документа у вікні браузера. Для цього можна використовувати тег <CENTER>.
Всі елементи між тегами <CENTER> і </ CENTER> будуть перебувати в центрі вікна.
Тег преформатірованія <PRE>. Тег преформатірованія, <PRE>, дозволяє представляти текст зі специфічним форматуванням на екрані. Попередньо сформатував текст закінчується завершальним тегом </ PRE>. Усередині попередньо сформатував тексту дозволяється використовувати:
1) переклад рядка
2) символи табуляції (зрушення на 8 символів вправо)
3) непропорційний шрифт, встановлюваний браузером.
Використання тегів, що визначають формат абзацу, таких як <Hx> або <ADDRESS>, буде ігноруватися браузером при приміщенні їх між тегами <PRE> і </ PRE>.
Далі йде кілька більш докладний приклад, зібраний з попередніх:
<HTML>
<HEAD>
<TITLE> Список співробітників </ TITLE>
</ HEAD>
<BODY>
<H2> Список співробітників нашої фірми </ H2>
<H3> Складено: 31 серпня 2020 року </ H3>
Даний список містить прізвища, імена та по батькові
всіх співробітників нашої компанії. <P>
Список може бути використаний тільки в службових цілях. <P>
</ BODY>
</ HTML>
Ось, що ви побачите на екрані браузера:
Список співробітників нашої фірми
Складено: 31 серпня 2020 року
Даний список містить прізвища, імена та по батькові всіх співробітників нашої компанії.
Список може бути використаний тільки в службових цілях.
Тема "Список співробітників" не відображене браузером як частина документа. Він з'явиться в заголовку вікна браузера.
Розрив рядка <BR>. Тег <BR> сповіщає браузер про розрив рядка.

Найкращий приклад використання даного тега - форматований адресу або будь-яка інша послідовність рядків, де браузер повинен відображати їх одну під інший. наприклад:
Одарченко Роман <BR> Проспект Вільний, <BR> 82/6 <BR>
Додатковий параметр дозволяє розширити можливості тега <BR>.
<BR CLEAR=left|right|all>
Даний параметр дозволяє не просто виконати переклад рядка, а розмістити наступний рядок, починаючи з чистої лівої (left), правої (right) або обох (all) меж вікна браузера. Наприклад, якщо поруч з текстом зліва зустрічається малюнок, то можна використовувати тег <BR> для зміщення тексту нижче малюнка:
<P> Як ви можете бачити, дана схема демонструє зв'язок <BR CLEAR=left> <img src = "http://www.softexpress.com/images/schema1.gif" align = baseline> Майстер / Деталь </ p> .
Нерозривний рядок <NOBR>. Якщо ви не хочете, щоб браузер автоматично переносив рядок, то ви можете позначити її тегами <NOBR> і </ NOBR>. В цьому випадку браузер не переноситиме рядок навіть якщо вона виходить за нраніци екрану; замість цього браузер дозволить горизонтально прокручувати вікно. наприклад:
<NOBR> Цей рядок є найдовшою рядком документа, яка не допускає будь-якого розбиття, де б то не було </ NOBR>
Якщо ж ви хочете все ж дозволити розбиття цього рядка на дві, але в строго запланованому місці, то вставте тег <WBR> в це місце. наприклад:
<NOBR> Цей рядок є найдовшою рядком документа, <WBR> яка не допускає будь-якого розбиття, де б то не було </ NOBR>
Цей рядок є найдовшою рядком документа,
яка не допускає будь-якого розбиття, де б то не було.

Цитата <BLOCKQUOTE>. Даний тег призначений для позначення в документі цитати з іншого джерела. Текст, позначений тегом <BLOCKQUOTE>, відступає від лівого краю документа на 8 пробілів. наприклад:

На відкритті даної конференції глава представництва вимовив: <P> <BLOCKQUOTE> Сьогодні один з найбільших днів для нашої компанії. <BR> Ми відкрили нову технологію, що дозволяє нашим клієнтам підвищити продуктивність їх настільних систем в кілька разів. </ BLOCKQUOTE>
При відображенні браузером даний текст буде виглядати так:
На відкритті даної конференції глава представництва вимовив:

Сьогодні один з найбільших днів для нашої компанії. Ми відкрили нову технологію, що дозволяє нашим клієнтам підвищити продуктивність їх настільних систем в кілька разів.

Список базових тегів HTML

Стартовий	Заключний	Опис
<HTML>	</HTML>	Позначення HTML-документу
<HEAD>	</HEAD>	Заголовна частина документу
<TITLE>	</TITLE>	Заголовок документу
<BODY>	</BODY>	Тіло документа
<H1>	</H1>	Заголовок абзацу першого рівня
<H2>	</H2>	Заголовок абзацу другого рівня
<H3>	</H3>	Заголовок абзацу третього рівня
<H4>	</H4>	Заголовок абзацу четвертого рівня
<H5>	</H5>	Заголовок абзацу п'ятого рівня
<H6>	</H6>	Заголовок абзацу шостого рівня
<P>	</P>	Абзац
<PRE>	</PRE>	Форматований текст
<BR>		Перехід рядка без кінця абзацу
<BLOCKQUOTE>	</BLOCKQUOTE>	Цитата

Описані раніше теги - це все, що необхідно для того, щоб почати працювати з HTML.

Теги списків

Існує три основних види списків в HTML-документі:

пронумерований
непронумерованому
список описів

Ви можете створювати вкладені списки, використовуючи різні теги списків або повторюючи одні всередині інших. Для цього просто необхідно розмістити одну пару тегів (стартовий і завершальний) всередині іншої. Чи будуть елементи вкладеного списку мати ті ж маркери, які позначають елемент списку - залежить від браузера. Більше, перегляньте в розділі "Вкладені списки".
Пронумерованих списків. У пронумерованому списку браузер автоматично вставляє номери елементів по порядку. Це означає, що якщо ви видалите один або кілька елементів пронумерованого списку, то інші номери автоматично будуть перераховані.
Пронумерований список починається стартовим тегом <OL> і завершується тегом </ OL>. Кожен елемент списку починається з тега <LI>. наприклад:
<OL> <LI> Програмування <LI> Алгоритмізація <LI> Проектування </ OL>

Програмування
Алгоритмізація
Проектування

Тег <OL> може мати параметри:
<OL TYPE = A | a | I | i | 1 START = n>
де: TYPE - Вид лічильника:
A - великі латинські літери (A, B, C ...)
a - маленькі латинські літери (a, b, c ...)
I - великі римські цифри (I, II, III ...)
i - маленькі римські цифри (i, ii, iii ...)
1 - звичайні цифри (1,2,3 ...)
START = n
Число, з якого починається відлік
наприклад:
<OL TYPE = I START = 15> <LI> Програмування <LI> Алгоритмізація <LI> Проектування </ OL>
XV. програмування
XVI. Алгоритмізація
XVII. Проектування.
Непронумеровані списки. Для непронумерованих списків браузер зазвичай використовує маркери для позначки елемента списку. Вид маркера, як правило, налаштовує користувач браузера.
Пронумерований список починається стартовим тегом <UL> і завершується тегом </ UL>. Кожен елемент списку починається з тегу <LI>. наприклад:
<UL> <LI> Програмування <LI> Алгоритмізація <LI> Проектування </ UL>

програмування
алгоритмізація
проектування

Тег <UL> може мати параметр:
<UL TYPE = disc | circle | square>
Тип тегу <UL> визначає зовнішній вигляд маркера як вид за замовчуванням (disc), круглий (circle) або квадратний (square). наприклад:
<UL TYPE = square> <LI> Програмування <LI> Алгоритмізація <LI> Проектування </ UL>

програмування
Алгоритмізація
проектування

Вкладені списки. Дамо приклад вкладених списків:
<HTML> <HEAD> <TITLE> Список співробітників </ TITLE> </ HEAD> <BODY> <H2> Список співробітників нашої фірми </ H2> <H3> Складено: 31 серпня 2020 року </ H3> Даний список містить прізвища , імена та по батькові всіх співробітників нашої компанії. <P> Список може бути використаний тільки в службових цілях. <P> <OL> <LI> Дирекція <UL> <LI> Сидорчук І.І. <LI> Петренко К.В. </ UL> <LI> Відділ маркетингу <UL> <LI> Варшавська Е.Л. <LI> Василюк Д.М. </ UL> </ OL> </ BODY> </ HTML>
Ось, що ви побачите на екрані браузера:
Список співробітників нашої фірми
Складено: 31 липня 2020 року
Даний список містить прізвища, імена та по батькові всіх співробітників нашої компанії.
Список може бути використаний тільки в службових цілях.
1. Дирекція
Сидорчук І.І.
Петренко К.В.
2. Відділ маркетингу
Варшавська Е.Л.
Василюк Д.М.
Приклад <Li>.
Тег <LI> може мати параметри:
<OL TYPE = disc | circle | squade> або <OL TYPE = A | a | I | i | 1 VALUE = n>
в залежності від того, в списку якого виду знаходиться даний елемент.
TYPE
Вид маркера (див. <UL>) або лічильника (см.OL)
VALUE = n
Значення для елементу пронумерованого списку (номер його). Всі подальші номери елементів списку будуть відраховуватися від цього номера.
наприклад:
<OL TYPE = I START = 15> <LI> Програмування <LI TYPE = i VALUE = 25> Алгоритмізація <LI> Проектування </ OL>
XV. програмування
XVI. Алгоритмізація
проектування
Список визначень.
Список визначень починається з тегу <DL> і завершується тегом </ DL>. Даний список служить для створення списків типу "термін" - "опис". Кожен термін починається тегом <DT>, а опис - тегом <DD>. наприклад:
<DL> <DT> <B> Відділ маркетингу </ B> <DD> Даний відділ займається просуванням продуктів і послуг <DT> <B> Фінансовий відділ </ B> <DD> Даний відділ займається всіма фінансовими операціями <DT> < B> Відділ кадрів </ B> <DD> Даний відділ займається обліком і набором нових співробітників фірми, розподілом відпусток, відстеженням лікарняних листів і т.д. </ DL>
Відділ маркетингу
Даний відділ займається просуванням продуктів і послуг
Фінансовий відділ
Даний відділ займається всіма фінансовими операціями
Відділ кадрів
Даний відділ займається обліком і набором нових співробітників фірми, розподілом відпусток, відстеженням лікарняних листів і т.д.

Гіпертекстові посилання

Гіпертекстові посилання є ключовим компонентом, що робить WEB привабливим для користувачів. Додаючи гіпертекстові посилання (далі - посилання), ви робите набір документів пов'язаних і структурованим, що дозволяє користувачеві отримувати необхідну йому інформацію максимально швидко і зручно.

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

Увага! Ви можете використовувати посилання як для переміщення по документу, так і для переміщення від одного документа до іншого. Однак HTML не підтримує повернення на попереднє посилання, якщо переміщення відбувалося всередині документа. Якщо ви використовуєте посилання всередині документа, а потім натискаєте на клавішу Back, то ви не перейдете на попереднє посилання, а повернетеся на ту частину документа, яку ви переглядали до цього.

Графіка всередині документа

Одна з найбільш привабливих рис Web - можливість включення посилань на графічні та інші типи даних в HTML-документ. Робиться це за допомогою тега <IMG ... ISMAP>. Використання даного тега дозволяє значно поліпшити зовнішній вигляд і функціональність документів.

Існує два способи використання графіки в HTML-документах. Перший - це впровадження графічних образів в документ, що дозволяє користувачеві бачити зображення безпосередньо в контексті інших елементів документа. Це найбільш використовувана техніка при проектуванні документів, звана іноді "inline image". Синтаксис тега:

Наведемо елементи синтаксису тега:

URL:

Обов'язковий параметр, який має такий же синтаксис, як і стандартний URL. Даний URL указує браузеру де знаходиться малюнок. Малюнок повинен зберігатися в графічному форматі, підтримуваному браузером. На сьогоднішній день формати GIF і JPG підтримуються більшістю браузерів.

ALT = "text":

Даний необов'язковий елемент задає текст, який буде відображений браузером, що не підтримують відображення графіки або з відключеною підкачкою зображень. Зазвичай, цей короткий опис зображення, яке користувач міг би або зможе побачити на екрані. Якщо даний параметр відсутній, то на місці малюнка більшість браузерів виводить піктограму (іконку), активізувавши яку, користувач може побачити зображення. Тег ALT рекомендується, якщо ваші користувачі використовують браузер, який не підтримує графічний режим, наприклад Lynx.

HEIGTH = n1:

Даний необов'язковий параметр використовується для вказівки висоти малюнка в пікселях. Якщо даний параметр не вказано, то використовується оригінальна висота малюнка. Це параметр дозволяє стискати або розтягувати зображення по вертикалі, що дозволяє більш чітко визначати зовнішній вигляд документа. Однак, деякі браузери не підтримують цю можливість. З іншого боку, екранне дозвіл у вашого клієнта може відрізнятися від вашого, тому будьте уважні при завданні абсолютної величини графічного об'єкта.

WIDTH = n2:

Параметр також необов'язковий, як і попередній. Дозволяє задати абсолютну ширину малюнка в пікселях.
ALIGN:
Даний параметр використовується, щоб повідомити браузеру, куди помістити наступний блок тексту. Це дозволяє більш строго задати розташування елементів на екрані. Якщо даний параметр не використовується, то більшість браузерів розташовує зображення в лівій частині екрана, а текст праворуч від нього.
ISMAP:
Цей параметр повідомляє браузеру, що дане зображення дозволяє користувачеві виконувати будь-які дії, клацаючи мишею на певному місці зображення. Дана можливість є розширенням HTML і буде обговорена нами пізніше.
Наведемо приклад використання даного тегу:
<IMG SRC = "http://www.site.com/images/site.jpg" ALT = "Сайт лого" ALIGN = "top" ISMAP>
З версії HTML 2.0 у тегу <IMG> з'явилися додаткові параметри:
<IMG SRC = "URL" ALT = "text" HEIGHT = n1 WIDTH = n2 ALIGN = top | middle | bottom | texttop | absmiddle | baseline | absbottom BORDER = n3 VSPACE = n4 HSPACE = n5 ISMAP>
Нові параметри:
BORDER:
Даний параметр дозволяє автору визначити ширину рамки навколо малюнка.
VSPACE:
Дозволяє встановити розмір в пікселях порожнього простору над і під малюнком, щоб текст не наїжджав на малюнок. Особливо це важливо для динамічно сформованих зображень, коли не можна заздалегідь побачити документ.
HSPACE:
Те ж саме, що і VSPACE, але тільки по горизонталі.
Фонові малюнки. Більшість браузерів дозволяє включати в документ фоновий малюнок, який буде масштабуватися і відображатися на тлі всього документа. Деякі користувачі люблять фонову графіку, деякі ні. Ненав'язливий напівпрозорий малюнок (шпалери) зазвичай добре виглядає в якості фону для більшості документів.
Опис фонового малюнка включається в тег BODY і виглядає наступним чином:
<BODY BACKGROUND = "picture.gif">.
Завдання стандартних кольорів. Багато HTML-автори люблять використовувати заздалегідь визначені кольори фону документа, звичайного тексту і посилань. Щоб задати ці кольори, необхідно включити в тег <BODY> додаткові параметри:
<BODY BGCOLOR = "# XXXXXX" TEXT = "# XXXXXX" LINK = "# XXXXXX">
де кожен з параметрів визначає колір того чи іншого елемента. Наведемо ці параметри:
BGCOLOR:
Колір фону документа
TEXT:
Колір простого тексту документа
LINK:
Колір посилання. Колір задається шестизначним числом в шістнадцятковому форматі за схемою RGB (Red, Green, Blue). Колір # 000000 відповідає чорному, а колір #FFFFFF - білому. наприклад:
<BODY BGCOLOR = "# 000000" TEXT = "# FFFFFF" LINK = "# 9690CC">
Цей рядок визначає білий колір фону документа, чорний текст і сріблясті посилання.
Горизонтальна лінія. Використовуючи тег <HR>, ви можете розділити текст горизонтальною лінією.
Формат тегу:
<HR SIZE = number WIDTH = number | percent ALIGN = left | right | center NOSHADE>
Параметри тегу:
SIZE:
Товщина лінії в пікселях.
WIDTH:
Ширина лінії в пікселях або відсотках від ширини вікна браузера.
ALIGN:
Розташування на екрані (зліва | по центру | справа).
NOSHADE:
За замовчуванням лінія представлена в 3D вигляді з тінню. NOSHADE дозволяє представити лінію просто однотонною темною смужкою.

Таблиці

Таблиці в HTML організуються як набір стовпців і рядків. Стовпчики таблиці можуть містити будь-які HTML-елементи, такі, як заголовки, списки, абзаци, фігури, графіку, а також елементи форм.
Основні теги таблиці:
Таблиця: <TABLE> ... </ TABLE>:
Це основні теги, що описують таблицю. Всі елементи таблиці повинні знаходитися всередині цих двох тегів. За замовчуванням таблиця не має обрамлення і роздільників. Обрамлення додається атрибутом BORDER.
Рядок таблиці: <TR> ... </ TR>:
Кількість рядків таблиці визначається кількістю зустрічаються пар тегів <TR> .. </ TR>. Рядки можуть мати атрибути ALIGN і VALIGN, які описують візуальне положення вмісту рядків в таблиці.
Осередок таблиці: <TD> ... </ TD>:
Описує стандартну клітинку таблиці. Осередок таблиці може бути описана тільки всередині рядка таблиці. Кожна осередок має бути пронумерована номером колонки, для якої вона описується. Якщо в рядку відсутня одна або кілька осередків для деяких колонок, то браузер відображає порожню комірку. Розташування даних в осередку за замовчуванням визначається атрибутами ALIGN = left і VALIGN = middle. Дане розташування може бути виправлено як на рівні опису рядка, так і на рівні опису осередку.
Заголовок таблиці: <TH> ... </ TH>:
Осередок заголовка таблиці має ширину всієї таблиці; текст в даному осередку має атрибут BOLD і ALIGN = center.
Підпис: <CAPTION> ... </ CAPTION>:
Даний тег описує назва таблиці (підпис). Тег <CAPTION> повинен бути присутнім усередині <TABLE> ... </ TABLE>, але зовні опису якого-небудь рядка або комірки. За замовчуванням <CAPTION> має атрибут ALIGN = top, але може бути явно встановлений в ALIGN = bottom. ALIGN визначає, де - зверху чи знизу таблиці - буде поставлений підпис. Підпис завжди центрована в рамках ширини таблиці.
Основні атрибути таблиці:
BORDER:
Даний атрибут використовується в тезі TABLE. Якщо даний атрибут присутній, границя таблиці промальовується для всіх осередків і для таблиці в цілому. BORDER може приймати числове значення, що визначає ширину кордону, наприклад BORDER = 3.
ALIGN:
Якщо атрибут ALIGN присутній всередині тегів <CAPTION> і </ CAPTION>, то він визначає положення підпису для таблиці (зверху чи знизу). За замовчуванням ALIGN = top. Якщо атрибут ALIGN зустрічається всередині <TR>, <TH> або <TD>, він керує положенням даних в осередках по горизонталі. Може приймати значення left (ліворуч), right (праворуч) або center (по центру).

VALIGN:
Даний атрибут зустрічається всередині тегів <TR>, <TH> і <TD>. Він визначає вертикальне розміщення даних в осередках. Може приймати значення top (угорі), bottom (унизу), middle (по середині) і baseline (всі осередки рядка притиснуті догори).
NOWRAP:
Даний атрибут говорить про те, що дані в комірці не можуть логічно розбиватися на кілька рядків і повинні бути представлені одним рядком.
COLSPAN:
Вказує, яка кількість осередків буде об'єднано по горизонталі для зазначеної комірки. За замовчуванням - 1.
ROWSPAN:
Вказує, яка кількість осередків буде об'єднано по вертикалі для зазначеної комірки. За замовчуванням - 1.
COLSPEC:
Даний параметр дозволяє задавати фіксовану ширину колонок або в символах, або у відсотках, наприклад COLSPEC = "20%".

Оптимізація графіки для WEB

На даний момент в Web використовується два типи растрових файлів: у форматах JPEG і GIF.
JPEG-формат добре передає колірні і тонові гуркіт, розмиті межі (наприклад, фото). JPEG-файл добре масштабується в браузері. Погано передає рівні площини кольору, в компресії поступається GIF-формату. При збереженні в JPEG-форматі вибирайте якість "medium".
GIF-формат добре передає рівні площини кольору, жорсткі кордону (наприклад, векторну графіку, логотипи). Має максимальну компресію, допускає прозорий фон. Погано масштабується в браузері, спотворює колірні і тонові гуркіт. Використовуйте GIF-формат, якщо зображення без значних втрат переводиться в 128-колірну гамму з включеною опцією "dithering". В іншому випадку краще зберігати зображення в JPEG-форматі. Для експорту файлу в GIF-формат спочатку проіндексує його колірну палітру в Adobe Photoshop:

Підбирайте мінімальна кількість квітів вручну (для якісної передачі антіаліасного одноколірного зображення на одноколірному тлі досить 5-8 квітів, двох-триколірного зображення - 15-25 квітів) Якщо вихідне зображення Grayscale, перед індексацією переведіть його в RGB-гаму.
По можливості уникайте включення опції "dithering" - вона збільшує розмір файлу. Ця опція необхідна, тільки якщо в зображенні присутній колірної або тонової гуркіт (наприклад Тінь). Призначаючи прозорий фон, після застосування "dithering" переконайтеся, що фон не став "картатим".
У складних випадках перед індексуванням виділіть найбільш важливі елементи зображення. Кольори всередині виділеної області індексуються коректніше інших.

Основи CSS

Основним поняттям CSS є стиль - т. Е. Набір правил оформлення та форматування, який може бути застосований до різних елементів сторінки. У стандартному HTML для присвоєння якому-небудь елементу певних властивостей (таких, як колір, розмір, положення на сторінці і т. П.) Доводилося щоразу описувати ці властивості, навіть якщо на одній сторінці повинні розташовуватися 10 або 110 таких елементів, нітрохи не відрізняються один від іншого. Ви повинні були десять або сто десять разів вставити той же шматок HTML- коду в сторінку, збільшуючи розмір файлу і час завантаження на комп'ютер переглядає її користувача.
CSS діє іншим, більш зручним і економічним способом. Для присвоєння якому-небудь елементу певних характеристик ви повинні один раз описати цей елемент і визначити цей опис як стиль, а в подальшому просто вказувати, що елемент, який ви хочете оформити відповідним чином, повинен прийняти властивості стилю, описаного вами. Зручно, чи не так?

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

Крім того, CSS дозволяє працювати зі шрифтовим оформленням сторінок на набагато вищому рівні, ніж стандартний HTML, уникаючи зайвого обважнення сторінок графікою.
Давайте розглянемо, як ми можемо втілити настільки чудові можливості в життя.

Практичне освоєння CSS. Як вам уже відомо, інформація про стилі може розташовуватися або в окремому файлі, або безпосередньо в коді Web-сторінки. Розташування опису стилів в окремому файлі має сенс у випадку, якщо ви плануєте застосовувати ці стилі до більшого, ніж одна, кількості сторінок. Для цього потрібно створити звичайний текстовий файл, описати за допомогою мови CSS необхідні стилі, помістити цей файл на Web-сервері, а в коді Web-сторінок, які будуть використовувати стилі з цього файлу, потрібно буде зробити посилання на нього. Робиться це за допомогою тега <LINK>, розташованого усередині тегу <BODY> ваших сторінок:
<LINK REL = STYLESHEET TYPE = "text / css" HREF = "URL">

Перші два параметри цього тегу є зарезервованими іменами, що вимагаються для того, щоб повідомити браузеру, що на цій сторінці буде використовуватися CSS. Третій параметр - HREF = «URL» - вказує на файл, який містить опису стилів. Цей параметр повинен містити або відносний шлях до файлу - в разі, якщо він знаходиться на тому ж сервері, що і документ, з якого до нього звертаються - або повний URL ( «http: // ...») в разі, якщо файл стилів знаходиться на іншому сервері.

Другий варіант, при якому опис стилів розташовується в коді Web- сторінки, всередині тегу <BODY>, в тезі <STYLE type = "text / css"> ... </ STYLE>. В цьому випадку ви можете використовувати ці стилі для елементів, розташованих в межах сторінки. Параметр type = "text / css" є обов'язковим і служить для вказівки браузеру використовувати CSS.

І третій варіант, коли опис стилю розташовується безпосередньо всередині тегу елемента, який ви описуєте. Це робиться за допомогою параметра STYLE, використовуваного при застосуванні CSS з більшістю стандартних тегів HTML. Цей метод небажаний, і зрозуміло чому: він приводить до втрати одного з основних переваг

CSS - можливості відділення інформації від опису оформлення інформації. Втім, якщо необхідно описати лише один елемент, цей варіант розташування опису стилів також цілком можна застосувати.
Давайте розглянемо механізм, за допомогою якого стилі привласнюються елементам Web-сторінок. Найпростіший випадок присвоєння якому-небудь елементу певного стилю виглядає так:

НАЗВА_ЕЛЕМЕНТА {властивість: значення;},
Де НАЗВА_ЕЛЕМЕНТА - ім'я HTML теґи (H1, P, TD, A і т. Д.), А параметри у фігурних дужках - список властивостей елемента і привласнених їм значень. Більш докладно команди мови CSS ми розглянемо трохи пізніше.

приклад:
H1 {font-size: 30pt; color: blue;}
У цьому прикладі всім заголовкам на сторінці, оформленим тегом Н1, привласнюється розмір шрифту 30 пунктів і синій колір.
Також елементи сторінок, створені з використанням CSS, використовують механізм успадкування: т. Е. Якщо ви маєте в своєму розпорядженні зображення всередині тегу <P> ... </ P>, оформленого за допомогою CSS, з відступами, так, щоб параграф займав тільки певну частину ширини сторінки, зображення також успадкує значення відступів, зазначені для цього параграфа.
CSS реалізує можливість привласнювати стилі не всім однаковим елементам сторінки, а вибірково - для цього використовується параметр CLASS = "ім'я класу" або ідентифікатор ID = «ім'я елемента», присвоюється будь-якого елементу сторінки. Розглянемо ці можливості докладніше.
Параметр CLASS застосовується у разі, якщо необхідно створити однаковий стиль для декількох, але не всіх елементів сторінки (однакових або різних).
приклад:
.b-с {font-weight: bold; text-align: center}
- опис стилю для класу b-с
Всі елементи класу b-с будуть відображатися жирним шрифтом з вирівнюванням по центру сторінки (або осередку таблиці).
<P CLASS = "b-с"> Текст параграфа </ P>
- параграфу присвоєно стиль класу bс.
<TD CLASS = "b-c"> текст </ TD>
- осередку таблиці присвоєно стиль класу b-c.
Що міститься в осередку текст буде відображатися відповідно до опису класу.
Таким чином, ви можете привласнити описаний стиль будь-яким текстовим елементам сторінок. Зверніть увагу, що при написанні назви класів необхідно дотримуватися регістр символів, згідно з тим, як ви назвали клас в описі стилю!

Присвоєння стилів за допомогою ідентифікаторів застосовується в разі, якщо цим ідентифікатором відповідає тільки один елемент на сторінці. Якщо елементів, яким необхідно присвоїти такий стиль, кілька - це вже клас.
Властивості елементів, керованих за допомогою CSS. В даний час мова CSS налічує досить велику кількість властивостей елементів HTML, якими він може управляти. Але через те, що цей стандарт ще дуже молодий, у повному обсязі його поки не підтримують найбільш популярні браузери. Останні версії цих браузерів можуть працювати з досить великою кількістю команд CSS, а ось 3-и версії або зовсім не підтримують його , або підтримують, але лише частково. Більш того, оскільки розробники з цих компаній ніяк не можуть домовитися між собою, останні версії браузерів підтримують неоднаковий набір властивостей CSS. Все це робить малоприйнятною використання CSS в повному обсязі, так як, при використанні CSS для форматування елементів сторінки і перегляді її за допомогою браузера версії нижче 4 й, є велика ймовірність побачити щось таке, що вам не сподобається. Тому буде розумніше утриматися від використання CSS для форматування основної структури сторінок до загального переходу на останні версії браузерів. У той же час, застосовуючи «безпечні».

Сумісні з максимальною кількістю браузерів елементи CSS, ви можете сильно полегшити собі життя і зробити ваші Web-сторінки більш привабливими в плані шрифтового оформлення, а користувачі, які подорожують по Internet за допомогою застарілих браузерів, просто цього не побачать, але також вони не побачать і тих кошмарів, які з'являються при використанні CSS для верстки сторінок.

Отже, перейдемо до вивчення безпечних елементів CSS. Опис властивостей елементів в CSS складається з назви властивості з наступним присвоєнням йому певного значення. Назва властивості і його значення розділені двокрапкою.
Вказуючи абсолютні, а не відносні розміри шрифтів, ви позбавляєте людей, які переглядають ваші сторінки, можливості збільшувати або зменшувати розмір шрифтів за допомогою спеціальної кнопочки в браузері відповідно до дозволу їх дисплея і зором. Шрифти будуть відображатися тільки такого розміру, який ви вказали при написанні сторінки.
Тому, якщо використання абсолютних розмірів шрифту не обумовлено художнім задумом або підступним наміром, рекомендую вам використовувати для цих цілей вказівка розмірів у відсотках. У цьому випадку розмір шрифту буде менше (більше) на вказане вами кількість відсотків, ніж при оформленні його за допомогою стандартного HTML-тега.
Є ще одна невелика, але дуже корисна хитрість - це спосіб приховати від застарілих браузерів опису стилів, що розташовуються в тезі <STYLE>, усередині розділу <HEAD>. Оскільки браузер був написаний кілька років тому, коли ніякого CSS ще й у планах не було, він просто не зрозуміє, що це таке написано усередині <STYLE> ... </ STYLE>, і видасть всі описи стилів на сторінку, як звичайний текст. Для того щоб запобігти цьому, необхідно укласти описи стилів в тег коментарів. Робиться це дуже просто.
<HEAD>
<STYLE type = "text / css">
<! -
опису стилів
->
</ STYLE>
</ HEAD>
де
<! - - тег, що відкриває коментар, а> - закриває.
Застарілі браузери порахують все укладене між тегами коментарів не відображення інформацією, а нові й розумні браузери визначать, що це - опис стилів, і застосовують їх.
Ще один з цікавих варіантів застосування CSS ховається за, здавалося б, простий можливістю: ви можете вказувати значення відступів навколо об'єктів, як негативні величини! Це дозволяє накладати один шар тексту на інший і отримувати вельми цікаві і привабливі результати.
Домогтися такого ефекту не дуже складно, давайте спробуємо створити сторінку з заголовком, який буде виглядати тривимірним, але не буде використовувати графіку.
Створимо новий html-файл і складемо опис стилів для трьох об'єктів:
<HEAD>
<STYLE type = "text / css">
BODY {font-family: Verdana; font-size: 70pt; font-weight: bold;}
.z1 {color: silver; margin-top: 100px; margin-left: 70px;}
.z2 {color: navy; margin-top: -118px; margin-left: 68px;}
</ STYLE>
</ HEAD>

У цьому описі ми привласнили <BODY> (втім, це міг бути практично будь-який інший тег) розмір, шрифт і накреслення - в такому стилі будуть відображатися всі елементи сторінки. Це було зроблено лише заради прагнення зменшити розмір файлу сторінки, замість цього можна було описати ці параметри двічі: для кожного з класів z. Далі ми описуємо два стилі, які відрізняються кольором і розміром відступів навколо них: нижній шар описується стилем z1, а верхній - z2. Використовуючи негативні значення відступів і підбираючи потрібне значення, ми добиваємося того, що верхній шар як би наповзає на попередній ...
<BODY bgcolor = white>
<DIV class = "z1"> EC-NET </ DIV>
<DIV class = "z2"> EC-NET </ DIV>
</ BODY>
Відкриємо наш улюблений Web-редактор і створимо файл з майбутнім назвою styles.css (назва файлу може бути будь-яким). Опишемо в цьому файлі стиль параграфа <P>, який буде використовуватися на всіх сторінках нашого сайту:

P {
font-family: Times New Roman, serif;
color: # 000000;
margin-left: 15%;
margin-right: 15%;
margin-top: 1pt;
margin-bottom: 1pt;
text-indent: 1cm;
text-align: justify;
}

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

У цьому стилі ми задали, що параграфи <P> на всіх сторінках, які використовують цей опис, будуть відображатися шрифтом Times New Roman або в разі, якщо цей шрифт на машині не встановлено, іншим шрифтом, але з цього сімейства (serif). Колір шрифту ми встановили чорний, вирівнювання - повне (по обидва боки).
Також ми встановили для параграфа ряд значень відступів. Це було зроблено з наступною метою: за замовчуванням параграф в HTML відображається рівним практично 95% сторінки і з інтервалами між параграфами, рівними 180% міжрядкового інтервалу. Читати такі параграфи не дуже зручно, так як інтервали між ними занадто великі, а ширина параграфа занадто велика. Подивіться на журнал, який ви зараз тримаєте в руках: текст зверстаний у колонки для того, щоб його було зручніше читати. У стилі параграфа, який ми створили, встановлені бічні відступи в 15% ширини вікна і вертикальні відступи в 1 пункт - так текст статті буде набагато читабельнішим.
Давайте так само створимо стиль для заголовків статей:

H2 {
font-family: Verdana, Arial Cyr, Arial;
font-weight: bold;
font-size: 14pt;
color: black;
margin-left: 20%;
margin-top: 1cm;
text-align: left;
}

Всі заголовки наших сторінок, оформлені тегом <H2>, будуть відображатися жирним шрифтом Verdana або, якщо цей шрифт не встановлено, шрифтом Arial. Розмір заголовка ми встановимо рівним 14 пунктам, колір чорний, відступ зліва дорівнює 20% ширини сторінки, а відступ зверху - 1 см. Тема буде вирівнюватися щодо лівого краю сторінки.
Завдяки тому, що бічні відступи заголовка і параграфа встановлені нами у відсотках від ширини вікна браузера, при перегляді наших сторінок на комп'ютерах з різним дозволом дисплея пропорції і розташування заголовка, основного тексту і відступів будуть збережені.
Для того щоб «прив'язати» створені нами стилі до наших сторінках, в усі html-файли в розділі <HEAD> ми повинні помістити рядок з посиланням на файл стилів і з зазначенням про використання CSS:
<LINK REL = STYLESHEET TYPE = "text / css" HREF = "styles.css">
Оскільки файл зі стилями буде перебувати в тому ж каталозі сервера, що і інші сторінки, параметр HREF = "URL" в нашому випадку буде просто ім'ям нашого файлу стилів (styles.css).

Види комп'ютерної графіки

Растрова графіка

Растровий графічний редактор - спеціалізована програма, призначена для створення і обробки зображень. Подібні програмні продукти знайшли широке застосування в роботі художників-ілюстраторів, при підготовці зображень до друку друкарським способом або на фотопапері, публікації в інтернеті.
Растрові графічні редактори дозволяють користувачеві малювати і редагувати зображення на екрані комп'ютера, а також зберігати їх в різних растрових форматах, таких як, наприклад, JPEG і TIFF, що дозволяють зберігати растрову графіку з незначним зниженням якості за рахунок використання алгоритмів стиснення з втратами, PNG і GIF , що підтримують гарне стиснення без втрат, і BMP, також підтримує стиснення (RLE), але в загальному випадку представляє собою нестиснене «попіксельне» опис зображення.
На противагу векторних редакторів, растрові використовують для представлення зображень матрицю крапок (bitmap). Однак, більшість сучасних растрових редакторів містять векторні інструменти редагування як допоміжні.
Для растрових зображень, що складаються з точок, особливу важливість має поняття дозволу, що виражає кількість точок, що припадають на одиницю довжини. При цьому слід розрізняти:

дозвіл оригіналу;
дозвіл екранного зображення;
дозвіл друкованого зображення.

Розширення оригіналу

Розширення оригіналу вимірюється в точках на дюйм (dots per inch - dpi) і залежить від вимог до якості зображення і розміру файлу, способу оцифрування і створення початкової ілюстрації, вибраного формату файлу та іншим параметрам. У загальному випадку діє правило: чим вище вимога до якості, тим більша має бути розширення оригіналу.

Розширення екранного зображення

Для екранних копій зображення елементарну точку растра прийнято називати пікселем. Розмір пікселя варіюється в залежності від обраного екранного дозволу (з діапазону стандартних значень), дозвіл оригіналу і масштаб відображення.

Монітори для обробки зображень з діагоналлю 20-21 дюйм (професійного класу), як правило, забезпечують стандартні екранні дозволи 640х480, 800х600, 1024х768,1280х1024,1600х1200,1600х1280, 1920х1200, 1920х1600 точок. Відстань між сусідніми точками люмінофора у якісного монітора складає 0,22-0,25 мм.
Для екранної копії достатньо дозволу 72 dpi, для роздруківки на кольоровому або лазерному принтері 150-200 dpi, для виведення на фотоекспонометричному пристрої 200-300 dpi. Встановлено емпіричне правило, що при роздруківці величина дозволу оригіналу повинна бути в 1,5 рази більше, ніж снаходження ліній растра пристрою виведення. У разі, якщо тверда копія буде збільшена в порівнянні з оригіналом, ці величини слід помножити на коефіцієнт масштабування.

Розмір точки растрового зображення як на твердій копії (папір, плівка і т. Д.), Так і на екрані залежить від застосованого методу та параметрів растрування оригіналу. При раструванні на оригінал як би накладається сітка ліній, комірки якої утворюють елемент растра. Частота сітки растра вимірюється числом ліній на дюйм (lines per inch - Ipi) і називається ліниатурой.
Розмір точки растра розраховується для кожного елементу і залежить від інтенсивності тону в цій комірці. Чим більше інтенсивність, тим щільніше заповнюється елемент растра. Тобто, якщо в клітинку потрапив абсолютно чорний колір, розмір точки растра співпадає з розміром елементу растра. У цьому випадку говорять про 100% заповнюваності. Для абсолютно білого кольору значення заповнюваності складе 0%. На практиці заповнюваність елемента на відбитку зазвичай становить від 3 до 98%.

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

Інтенсивність тону (так звану світлин) прийнято поділяти на 256 рівнів. Більше число градацій не сприймається зором людини і є надлишковим. Менша кількість погіршує сприйняття зображення (мінімально допустимим для якісної напівтонової ілюстрації прийнято значення 150 рівнів). Неважко підрахувати, що для відтворення 256 рівнів тону достатньо мати розмір комірки растру 256 = 16 х 16 точок.

При виведенні копії зображення на принтері або поліграфічному обладнанні ліниатуру растра вибирають, виходячи з компромісу між необхідною якістю, можливостями апаратури і параметрами друкованих матеріалів. Для лазерних принтерів рекомендована линиатура становить 65-100 Ipi, для газетного виробництва - 65-85 lpi, для книжково-журнального - 85-133 lpi, для художніх і рекламних робіт - 133-300 lpi.

При друку зображень з накладенням растрів один на одного, наприклад багатобарвних, кожний наступний растр повертається на певний кут. Традиційними для кольорового друку вважаються кути повороту: 105 градусів для блакитний друкованої форми, 75 градусів для пурпурової, 90 градусів для жовтою і 45 градусів для чорної. При цьому осередок растра стає косокутній, і для відтворення 256 градацій тону з лініатурою 150 lpi вже недостатньо дозволу 16х150 = 2400 dpi. Тому для фотоекспонуючих пристроїв професійного класу прийнято мінімальне стандартне дозвіл 2540 dpi, що забезпечує якісне растрування при різних кутах повороту растра. Таким чином, коефіцієнт, що враховує поправку на кут повороту растра, для кольорових зображень складає 1,06.

Динамічний діапазон

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

Для оптичних середовищ, що пропускають світло, динамічний діапазон лежить в межах від 0 до 4. Для поверхонь, що відбивають світло, значення динамічного діапазону становить від 0 до 2. Чим вище динамічний діапазон, тим більше число півтонів присутня в зображенні і тим краще якість його сприйняття.

Adobe Photoshop

Adobe Photoshop - растровий графічний редактор, розроблений і поширюваний фірмою Adobe Systems. Цей продукт є лідером ринку в області комерційних засобів редагування растрових зображень, і найбільш відомим продуктом фірми Adobe. Часто цю програму називають просто Photoshop. В даний час Photoshop доступний на платформах Mac OS X / Mac OS і Microsoft Windows. Ранні версії редактора були перенести під SGI IRIX, але офіційна підтримка була припинена починаючи з третьої версії продукту. Незважаючи на те, що спочатку програма була розроблена для редагування зображень для друку на папері (перш за все, для поліграфії), в даний час вона широко використовується у веб-дизайні. У більш ранньої версії була включена спеціальна програма для цих цілей - Adobe ImageReady, яка була виключена з версії CS3 за рахунок інтеграції її функцій в самому Photoshop.
Photoshop тісно пов'язаний з іншими програмами для обробки медіафайлів, анімації та іншої творчості. Спільно з такими програмами, як Adobe ImageReady (програма скасована в версії CS3), Adobe Illustrator, Adobe Premiere, Adobe After Effects і Adobe Encore DVD, він може використовуватися для створення професійних DVD, забезпечує засоби нелінійного монтажу і створення таких спецефектів, як фони, текстури і т. д. для телебачення, кінематографа і всесвітньої павутини. Основний формат Photoshop, PSD, може бути експортований і імпортовано на весь ряд цих програмних продуктів. Photoshop CS підтримує створення меню для DVD. Спільно з Adobe Encore DVD, Photoshop дозволяє створювати меню або кнопки DVD. Photoshop CS3 у версії Extended підтримує також роботу з тривимірними шарами.
Photoshop підтримує наступні колірні моделі:
1) RGB
2) LAB
3) CMYK
4) Grayscale
5) BitMap
6) Duotone
Останні версії включають в себе Adobe Camera RAW - плагін, розроблений Томасом Кноллом, який дозволяє читати ряд RAW-форматів різних цифрових камер і імпортувати їх безпосередньо в Photoshop.
Підтримується обробка зображень, з глибиною кольору 8 біт (256 градацій на один канал), 16 біт (використовується 15 бітів плюс один рівень, тобто 32769 рівнів) і 32 біт (використовуються числа одинарної точності з плаваючою комою). Можливо збереження в файлі додаткових елементів, як то: напрямних (Guide), каналів (наприклад, каналу прозорості - Alpha channel), шляхів обтравки (Clipping path), шарів, що містять векторні і текстові об'єкти. Файл може включати колірні профілі (ICC), функції перетворення кольору (transfer functions).

GNU Image Manipulation Program або GIMP (Гімпу) - растровий графічний редактор, програма для створення і обробки растрової графіки. Частково підтримується векторна графіка. Проект заснований в 1995 році Спенсером Кімбелломі Пітером Маттісом як дипломний проект, в даний момент підтримується групою добровольців. Поширюється на умовах GNU General Public License.
Спочатку скорочення «GIMP» означало англ. General Image Manipulation Program, а в 1997 році повна назва була змінена на «GNU Image Manipulation Program», і програма офіційно стала частиною проекту GNU.
Типові завдання, які можна вирішувати за допомогою GIMP, включають в себе створення графіки і логотипів, масштабування і кадрування фотографій, розфарбовування, комбінування зображень з використанням шарів, ретушування і перетворення зображень в різні формати.
GIMP є одним з перших дійсно користувальницьких вільних додатків.
GIMP є високоякісним додатком для фоторетуші і дозволяє створення оригінальних зображень; високоякісним додатком для створення екранної і веб-графіки; є платформою для створення потужних і сучасних алгоритмів обробки графіки вченими і дизайнерами; дозволяє автоматизувати виконання повторюваних дій; легко розширюємо за рахунок простої установки доповнень.
У GIMP присутня досить непоганий набір інструментів корекції:

криві;
рівні;
мікшер каналів;
постеризація;
тон-насиченість;
баланс кольорів;
яскравість-контраст;
знебарвлення.

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

прибирати спотворення, що вносяться оптикою;
коригувати перспективу;
виконувати клонування об'єктів з урахуванням перспективи;
кадрувати фотографії;
видаляти дефекти на кшталт пилу на матриці (штамп, лікувальна кисть);
імітувати використання різних кольорових фільтрів;
«витягувати» втрачену деталізацію в тінях;
реалізовано управління кольором.

Малювання

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

Екранні фільтри

Додаткові можливості по корекції зображень протягом всієї роботи реалізовані у вигляді екранних фільтрів. До них відносяться: імітація різних типів дальтонізму (протанопія, дейтеронопія, трітанопія);

гамма-корекція;
корекція контрасту;
управління кольором.

Налаштовується

Плаваючі палітри легко групуються і перегрупуються;
можлива повна перенастроювання клавіатурних комбінацій, дій миші, а також пристроїв введення кшталт Griffin Powermate;
будь-яке меню можна перетворити у вільно переміщується вікно (GNU / Linux / UNIX).
Автоматизація.
Відсутність коштів автоматичного запису сценаріїв компенсується в GIMP великим числом мов, на яких можна писати сценарії:
- TinyScheme, інакше Script-Fu (в комплекті з програмою);
- Python (в комплекті з програмою);
- Ruby;
- Perl;
- Java (експериментально, частина проекту gimp-sharp);
- Tcl (в даний час не підтримується).
За допомогою цих інструментів можна писати як інтерактивні сценарії і модулі для GIMP, так і створювати зображення повністю автоматично, наприклад, генерувати «на льоту» зображення для веб-сторінок всередині програм CGI або виконувати пакетну корекцію і перетворення зображень. Слід зазначити, що для пакетної обробки зображень все ж краще підходять пакети на зразок ImageMagick.

Векторна графіка

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

Лінія - елементарний об'єкт векторної графіки. Як і будь-який об'єкт, лінія володіє властивостями: формою (пряма, крива), товщиною, кольором, шрифтом (суцільна, пунктирна). Замкнені лінії набувають властивість заповнення. Охоплюється ними простір може бути заповнений іншими об'єктами (текстури, карти) або вибраним кольором. Найпростіша незамкнута лінія обмежена двома точками, які називали вузлами. Вузли також мають властивості, параметри яких впливають на форму кінця лінії і характер сполучення з іншими об'єктами. Всі інші об'єкти векторної графіки складаються з ліній. Наприклад, куб можна скласти з шести пов'язаних прямокутників, кожен з яких, в свою чергу, утворений чотирма зв'язаними лініями. Можливо, представити куб і як дванадцять пов'язаних ліній, що утворюють ребра.

Adobe Illustrator

Adobe Illustrator - векторний графічний редактор, розроблений і поширюваний фірмою Adobe Systems.

Adobe Illustrator був задуманий як редактор векторної графіки, проте дизайнери використовують його в самих різних цілях. Він дуже зручний для швидкої розмітки сторінки з логотипом і графікою - простого односторінкового документа, що не містить текст.
Adobe Illustrator, спочатку розроблений для платформи Macintosh, - відома і широко використовувана програма дає змогу отримувати зображення. Існують версії для Macintosh, Microsoft windows і NeXT. Потужні можливості Adobe Illustrator обумовлені тим, що в якості графічних об'єктів тут реалізовані криві Безьє, а також наявністю простого призначеного для користувача інтерфейсу, який забезпечує точне позиціонування сплайнів графічних об'єктів. Використання кривих Безьє дає деякі переваги при моделюванні природних (а в певних випадках і штучних) об'єктів, файли Adobe Illustrator застосовуються для обміну графічними елементами.

Формат AI інкапсулює і формалізує в структурованому файлі підмножина мови опису сторінки (PDL) PostScript. Такі файли призначені для відображення на принтері PostScript, але можуть включати і растрову версію зображення, забезпечуючи тим самим його попередній перегляд. PostScript в повній реалізації являє собою потужний і складний мову і здатний визначати майже всі, що може бути відображено на двовимірному пристрої виведення, формат AI адаптований для зберігання традиційних графічних даних: малюнків, креслень і декоративних написів. Відзначимо все ж, що файли AI можуть бути дуже складними. Міць PostScript обумовлена в основному можливістю визначати послідовності операцій і потім об'єднувати їх простими синтаксичними засобами. Ця прихована складність в файлах Adobe Illustrator іноді (але не завжди) зводиться до мінімуму. Прості файли AI конструювати досить легко, і прикладна програма зможе створювати файли, які будуть прочитані будь-якою програмою читання AI і роздруковані на будь-якому PostScript-принтері. А ось читання файлів AI - зовсім інша справа. Деякі операції можуть виявитися занадто складними для реалізації і моделювання програмою візуалізації. Тому розробники часто вважають за краще не візуалізувати зображення з даних цього підмножини PostScript. Проте слід зазначити, що, як правило, майже всі зображення можна реконструювати простими операціями. Якщо хочете розробити програму читання файлів Adobe Illustrator, то рекомендуємо в якості підказки скористатися вихідними текстами системи GNU GhostScript, яка містить майже повну реалізацію мови PostScript.

PostScript, а, отже, і його підмножина AI, являє собою особливий мову зі своїми правилами. Тому, перш ніж почати працювати з AI-файлами і вивчати специфікацію і ознайомиться з документацією по PostScript.

CorelDRAW Graphics Suite X4 надає всі необхідні інструменти для продуктивної роботи сучасного дизайнера. Інтуїтивно зрозумілі інструменти для векторного ілюстрування та макетування сторінок дозволяють створювати чудові дизайнерські рішення. Професійне програмне забезпечення для редагування фотографій допомагає ретушувати і покращувати фотографії. Растрові зображення можна легко перетворити в редаговані і масштабовані векторні файли. Яким би не був ваш проект, CorelDRAW Graphics Suite X4 спростить робочий процес і надихне вас новими можливостями для творчості.

Уже багато років CorelDraw є основним робочим інструментом для більшості дизайнерів і художників, що працюють в середовищі Windows. Пакет програм CorelDraw 6 Suite для Power Macintosh, як і його родич для Windows, втілює філософію компанії Corel - "чим більше, тим краще". Набір містить вісім додатків і утиліт: нещодавно придбаний Corel текстовий процесор WordPerfect 3.5, CorelDream 3D 6 (моделювання і рендерінг), CorelArtisan 6 (малювання і редагування графіки), а також CorelTexture (генератор текстур), плюс до цього - 1000 шрифтів Type 1 і 1000 зображень у форматі Photo CD. Наш огляд присвячений, головним чином, модулю ілюстративної двомірної графіки CorelDraw.

Головне місце на робочому екрані CorelDraw займає настроюється панель інструментів. Стандартна панель інструментів дозволяє в більшості випадків одним клацанням отримати швидкий доступ до функцій меню File і Edit. Але за зовні простим інтерфейсом ховається безліч додаткових інструментальних панелей. Панель квітів дозволяє працювати з колірними просторами RGB, CMYK, HSV, HSB, LAB, YIQ і градаціями сірого. Можна також вибрати колірну палітру з восьми варіантів, в тому числі Pantone і Trumatch, або створити свою власну.

Інструменти CorelDraw сприяють ефективній роботі з мінімальними переміщеннями миші, а також дають можливість точного чисельного завдання параметрів. Багато потужні можливості, типу команди Blend, підтримують динамічне зв'язування. Ефект Blend застосуємо до об'єктів, для яких вироблено заповнення з поступовим переходом кольорів. Інструменти заповнення CorelDraw пропонують виняткову різноманітність типів заповнень: рівний колір, PostScript, векторні або растрові шаблони (включаючи 24-розрядні кольорові фотографії), фрактальні текстури і чотири типи заповнень з градаціями. Фрактальні заповнення створюють величезну різноманітність цікавих текстур і поверхонь, хоча побічним ефектом такої гнучкості при високій роздільній здатності може стати катастрофічне зниження продуктивності. Однак загальна кількість варіантів заповнення в CorelDraw дозволяє створювати унікальні шаблони і текстури, що неможливо ні в Illustrator, ні в FreeHand. Насправді, CorelDraw - єдиний з трьох пакетів, в якому можна вставити растрове зображення у векторний об'єкт і використовувати його як мозаїчний візерунок для заповнення.

До чудових можливостей CorelDraw відносяться його унікальні фільтри, які називаються Lens Effects. У ролі лінзи може виступити будь-яка векторна форма, включаючи текст. А сам ефект можна застосувати до будь-якого векторного або растровому об'єкту, який розташовується під лінзою. Об'єкти, розташовані під лінзою, можуть бути "заморожені". У цьому випадку створюється копія тільки тієї частини об'єкта, яка видима крізь лінзу. При цьому сам об'єкт залишається в початковому стані і може редагуватися.

І на закінчення.