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

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

1. Необхідний інструментарій для веб-розробника

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

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

Отже, для повноцінної роботи веб-дизайнеру необхідно:

· HTML-редактор, рекомендується Adobe DreamWeaver.

· Графічні редактори:

o Редактор растрової графіки, рекомендується Adobe Photoshop.

o Редактор GIF-анімації, рекомендуються програми Adobe Photoshop та Image Ready.

o Редактор для створення анімованої графіки, рекомендується програма Adobe Flash.

· FTP-клієнт, рекомендується програма Smart FTP.

· Браузери Internet Explorer, Opera, Mozilla FireFox, Google Chrome.

HTML-редактор

Програми для створення сайтів є двох категорій - текстові та візуальні HTML-редактори.

Текстові HTML-редактори

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

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

Недоліки у текстових html-редакторів:

· Відсутність можливості бачити результат безпосередньо під час написання коду сторінки. Тоді, потрібно відкривати браузер і вже в ньому дивитися, як виглядає сайт на даному етапі.

· Обов'язкове знання мови HTML. Без попереднього вивчення HTML працювати буде врай складно. Тому, потрібно придбати підручник з мови HTML і лише після його прочитання приступати до створення сайту в текстовому редакторі.

Візуальні HTML-редактори

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

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

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

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

3.Графічні редактори

Графічні редактори - це спеціалізовані програми, що призначені для створення та обробки комп’ютерних зображень. Вони обов’язково мають бути в арсеналі веб дизайнерів. Растрові графічні редактори надають широкі можливості для створення чи редагування зображень і збереження їх в різних растрових форматах, зокрема, в основних веб-форматах JPEG, GIF і PNG.

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

· Adobe Photoshop.

· Adobe Fireworks.

· Corel Photo-Paint.

· Corel Paint Shop Pro.

· Corel Painter.

· Microsoft Paint у складі Windows.

· Microsoft Photo Editor.

Adobe Photoshop

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

Програми для створення GIF-анімацій

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

GIF-анімація використовує можливість формату GIF зберігати у файлі кілька зображень. Анімаційні GIF є серією кадрів, що швидко змінюють один одного, за рахунок чого і досягається анімаційний ефект. Вмістом кожного кадру є або незалежні зображення або окремі прошарки одного зображення, яке можна створити в будь-якому графічному пакеті — в Adobe Photoshop, Jasc Paint Shop Pro тощо. А ось перетворення їх в анімаційний GIF-файл, що містить не лише всі початкові зображення, але і дані про швидкість їх виводу на екран, застосовану палітру кольорів та інші можливості здійснюється вже за допомогою багатьох спеціальних програм.

Класифікація програм для GIF-анімації

Програми для створення анімаційних GIF можна поділити на три групи.

До першої групи належать популярні двовимірні графічні пакети, що орієнтовані в першу чергу для роботи з двохвимірною растровою графікою, але, додатково мають програми, що дозволяють створювати файли у форматі Animation GIF. Популярними з них є Adobe Photoshop з програмою ImageReady, Jasc Paint Shop Pro з програмою Animation Shop, і Ulead PhotoImpact з програмою GIF Animator.

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

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

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

Третю групу утворюють програми, що орієнтовані на створення 3D-графіки (наприклад, 3D Studio Max) і разом з тим дозволяють створювати анімацію у форматі Animation GIF (зазвичай за рахунок спеціального плагіну, що часто міститься у складі програми). Графічні 3D-програми не вимагають покадрового промальовування — зазвичай, для створення GIF-файлу буває достатньо задати об'єкту якусь циклічну дію, наприклад поворот навколо осі, записати отриману анімацію як серію кадрів і експортувати її в анімаційний GIF.

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

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

Програми для флеш-анімації

Для створення різноманітних анімованих веб-застосувань - заставок (інтро) до сайтів, банерів, рекламних роликів, інтерактивних презентацій, навчальних роликів, ігор та мультфільмів призначена програма Adobe Flash. Разом з нею існують і інші інструменти flash-платформи (Flash Platform): Adobe Flex Builder, Flash Development Tool (FDT) та інші.

До флеш-анімації в Інтернеті достатньо високі вимоги з боку відвідувачів, вони чекають від застосування флеш-технологій якихось нестандартних рішень і візуальних ефектів. Для створення інтерактивної анімації в Adobe Flash застосовується мова ActionScript. Це ефективна об'єктно-орієнтована мова створення сценаріїв, що заснована на стандартах ECМAScript. Користуватися ActionScript для створення анімації і ефектів зовсім необов'язково, багато ефектів можна застосувати інструментами самої програми Adobe Flash. Проте, при використанні ActionScript в флеш-файлах відкриваються широкі творчі і функціональні можливості.

4. FTP-клієнт

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

FTP-клієнт може використати:

· Розробник сайту для завантаження сторінок сайту з/на сервер.

· Звичайний користувач для завантаження музики, програм та інших файлів даних з/на сервер.

Програми, які реалізують функції FTP-клієнта:

· Інтернет браузери. Іноді працюють в режимі «тільки читання», тобто не дозволяють додавати файли на сервер.

· Багато файлових менеджерів, наприклад: Windows Explorer (Провідник), Total Commander, FAR.

· Спеціалізовані програми, наприклад: Smart FTP.

Завдяки поширеності протоколу FTP, функції FTP-клієнта втілено у всі популярні операційні системи. Проте, використання цих клієнтів вимагає знання команд служби FTP для спілкування з сервером. Так в Windows і в багатьох версіях Unix такою утилітою є ftp.exe.

Браузери

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

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

З огляду на велику кількість браузерів, вважається, що сайт повинен бути сумісним з браузером, якщо ним користується значна частина аудиторії, припустимо, 5% відвідувачів.

За статистикою, найпопулярнішими браузерами сьогодні є Internet Explorer, Mozilla Firefox, Opera та Google Chrome. Тому, розробник має мати в своєму арсеналі як мінімум ці браузери.

Завдання до лабораторної роботи

1. Ознайомлення з інтерфейсом програми Adobe DreamWeaver

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

· Перейти в режим перегляду коду і застосувати розмітку в коді.

2. Переглянути створену сторінку в різних браузерах.

3. Ознайомитися з інтерфейсом програми Adobe Photoshop.

· За допомогою інструментів програми створити нескладне зображення: логотип, банер, кнопку, тощо.

· Зберегти зображення в різних веб графічних форматах: jpg, gif, png.

· Вставити зображення у створену сторінку.

4. Зберегти створену сторінку.

Зміст звіту

1. Мета роботи.

2. Короткі теоретичні відомості.

3. Результати виконання завдання (print screen сторінки, html-код).

4. Висновки.

Контрольні запитання

1. Які редактори потрібні для веб-проектувальника? Їх спеціалізація, особливості, зручність користування.

2. Що таке HTML-документ?

3. Основні структурні ділянки сторінки <HEAD>, <BODY>. Їх основне призначення.

4. Види тегів в HTML.

5. Коментарі в HTML.

6. Оформлення тексту в HTML.

7. Основні графічні формати для Веб. Особливості уставляння зображень у HTML-документ. Тег <IMG> та його атрибути.

8. Чим пояснити відмінності у відображенні одної сторінки в різних браузерах.

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

Рекомендована література

1. Алексеев А. П. Введение в Web-дизайн. - Солон-Пресс, 2008. – 358с.

2. Едомский Ю. Е. Техника Web-дизайна для студента. – СПб.: БХВ-Петербург, 2005. – 392с.

3. Колин Смит, Кристал Уотерс. Web-дизайн: Photoshop & Dreamweaver. - КУДИЦ-ОБРАЗ, 2004. – 302с.

4. Мединов О. Dreamweaver. Мультимедийный курс. - СПб.: Питер, 2009. - 176 с.

5. Стив Круг. Веб-дизайн: книга Стива Круга, или «не заставляйте меня думать!». - Симбо, 2008. – 224с.

6. Туэмлоу Элис. Графический дизайн. Фирменный стиль, новейшие технологии и креативные идеи. What is Graphic Design for? Essential Design Handbooks. - Астрель, АСТ, 2006. - 256 с.

7. Cool webmaster. Онлайн журнал для дизайнеров и веб-разработчиков. – http://www.coolwebmasters.com/

8. Учебник CSS. - http://ru.html.net/tutorials/css/

9. CSS справочник. - http://css.manual.ru/

10. Учебник HTML. - http://ru.html.net/tutorials/html/

Не нашли, что искали? Воспользуйтесь поиском: