Візуальні ефекти в dhtml
Швидкість завантаження сторінок із сервера – важливий фактор юзабіліті сайту. Щоб забезпечити гарну швидкість завантаження, веб-дизайнери намагаються максимально зменшити використання «важкої» графіки в дизайні сайтів. Для цього графічні файли заміняють застосуванням спеціальних ефектів в DHTML. DHTML (Dynamic HTML) - дороблена динамічна версія HTML, що дозволяє створювати візуальні ефекти.
Які ж візуальні ефекти для дизайну сайтів доступні в dhtml?
До основних ефектів в DHTML відносять наступні:
переміщення елемента щодо сторінки сайту
вліт
виліт
спускати за словами
форматування елементів сторінки
зміна кольору рядка або абзацу
зміна фону
Використання DHTML для створення візуальних ефектів на сайті не впливає значно на завантаження сайту, пожвавлює зовнішній вигляд дизайну сайту, легко реалізується. Однак не всі браузери підтримують DHTML, тому в деяких з них візуальні ефекти DHTML відображатися не будуть.
Програми для створення сайтів. Html-редактори
Для створення веб-сайтів існує безліч різних програм. Одні з них є редакторами html, інші - редакторами серверних або клієнтських скриптів, а треті - редакторами таблиць css. Кожний веб-сайт складається з веб-сторінок, кожна з яких, у свою чергу, складається з коду мовою html, що відповідає за оформлення сторінки, і власне вмісту. Тому редактори html - програми, створення сайту без яких неможливо.
HTML-редактори можна розділити на дві умовні основні групи:
текстові;
візуальні.
Блокнот
Отже, самий вірний і надійний редактор - звичайний вбудований в ОС Windows текстовий редактор «Блокнот» (Notepad).
Notepad ++ - розширена версія звичайного блокнота, що поставляється окремо й зазвичай безкоштовна.
Microsoft FrontPage - html-редактор з пакета MS Office.
У режимі «HTML» користувач може переглядати й редагувати код створюваної веб-сторінки, а в режимі «Preview» може побачити як буде виглядати створювана веб-сторінка в браузері.
Macromedia HomeSite є одним з найбільш популярних html-редакторів. Цей редактор допомагає прискорити процес створення html-коду сторінок і сайту в цілому. Робочий простір ділиться на три частини.
У популярному візуальному редакторі Adobe Dreamweaver можна редагувати html-коди, причому робити це легко й невимушено.
Переваги й недоліки
До переваг текстових редакторів, таких як Блокнот і Notepad ++ відноситься їхня простота й доступність. Крім того, текстові html-редактори часто безкоштовні, не створюють «зайвого» коду, що дозволяє зменшити розмір веб-сторінки. Однак істотним недоліком таких редакторів є неможливість переглянути «на льоту» вид створюваної сторінки й необхідність гарного знання мови html.
До переваг візуальних редакторів відносять можливість відразу бачити, як буде виглядати веб-сторінка, наявність підказок і підсвічування тегів, можливість легкої й зручної вставки різних об'єктів у сторінку без знань мови html. Недоліком же візуальних редакторів є їхня вартість - гарні візуальні html-редактори платні. До того ж багато візуальних редакторів створюють «зайвий» код, що «поважчує» сторінку.
Серед клієнтських мов веб-програмування почесне місце заслужено займає Javascript. Мова Javascript була розроблена на початку 90-х років минулого століття фірмою Netscape. Спочатку ця мова розроблялася для взаємодії винятково із браузером Netscape Navigator.
Найпоширеніший приклад - заповнення реєстраційних форм. Клієнтський скрипт перевіряє дані у формі ще до відправлення на сервер і у випадку помилки вказує на неї. Інші дані при цьому зберігаються в динамічній пам'яті, і немає необхідності при помилці в одному полі введення ще раз повністю проходити процес заповнення. Інших подібних випадків, у яких застосування Javascript реалізує завдання, недоступні для статичних сторінок, ще безліч. Серед них: зміна вмісту сторінки у відповідь на дію користувача; створення спливаючих підказок; реагування на клацання миші, рух курсору.
Як додати javascript на веб-сторінку?
Існує два способи. Перший, як уже згадувалося, - це вставити програмний код javascript безпосередньо в html-код. Робиться це зазвичай в рамках тегу <head>, оскільки в цьому випадку сценарій javascript завантажується відразу, разом з усією сторінкою. Рядок вставки цього коду виглядає так:
<script type="text/javascript"> команди мовою javascript </script>
Другий спосіб - описати всі необхідні команди в окремому файлі й зберегти його з расширением .js. Тоді для підключення javascript до веб-сторінки потрібно буде вказати джерело з назвою файлу. Виглядає це так: