ЯК СТВОРИТИ WEB-СТОРІНКУ
Найпростіший спосіб створити сторінку для розміщення в Інтернеті - скористатися інструментами пакета Microsoft Office. Останні версії цього пакета надають можливість перетворити звичайний документ у HTML-формат з непоганим якістю коду.
Можливості Word
Підготовлений у текстовому редакторі Word документ можна легко перетворити на web-сторінку. Однак вона буде виглядати не так привабливо, як хотілося б, якщо не вжити додаткові кроки. Розглянемо кілька прикладів.
Візьмемо деякий текст.
Перетворимо документ у web-сторінку за допомогою операції Зберегти як web-сторінку ... (викликається з головного меню - позиція Файл). Тоді html-подання документа буде мати вигляд:
Перше, що кидається в очі - текст займає все екранне простір. Довжина рядка занадто велика. Для комфортного читання на екрані число символів у рядку повинно бути в діапазоні 50-65.
Використання таблиці
Можна в цьому випадку вчинити зовсім просто: завести у вихідному документі таблицю і помістити в неї потрібний текст. У таблиці можна задати рамку. Тоді вид web-сторінки набагато покращиться, і в браузері сторінка буде виглядати привабливіше.
Фон і стиль
Можна піти далі - наприклад, змінити колір і фактуру фону, вигляд гіперпосилань, оформлення списків. Для зміни загального дизайну сторінки можна скористатися командою Тема з розділу головного меню Формат.
Бажано вибрати не надто яскравий фон, щоб на ньому добре читався текст. Таким фоном в запропонованому списку є, наприклад, Рисова папір. Вид сторінки помітно преобразився:
Вставка картинки
У документ можна додати картинку, взявши її, приміром, з колекції кліпів.
Потрібно правою кнопкою миші клацнути на картинку, виконати операцію копіювання, і далі в документі вказати місце для картинки і виконати операцію вставки скопійованого об'єкта.
Якщо ви вставляєте картинку всередину абзацу, то краще змінити властивості картинки, задавши обтікання тексту навколо картинки (потрібно вибрати позицію головного меню Формат і далі Малюнок):
У документі при цьому не буде створюватися зайвого пустого простору.
Нарешті, можна додати картинці рамку і тінь з допомогою кнопок на панелі Малювання - Тип лінії і Стиль тіні. Подібні нюанси помітно додають виразності сторінці.
Якщо панелі Малювання немає на сторінці, то потрібно встановити її, вибравши позицію головного меню Вид і далі Конфіденційність та Малювання.
Та, що біжить рядок
Word дозволяє внести на web-сторінку і інші оформлювальні елементи, наприклад "біжучий рядок". Щоб скористатися цією можливістю потрібно відкрити на екрані панель web-компонентів (з головного меню - позиція Вид, далі Конфіденційність та Веб-компоненти). Клацання по кнопці операції Біжучий рядок відкриває додаткове вікно для завдання тексту параметрів біжучого рядка.
Як завжди, в рядку можна поміняти шрифт і атрибути: розмір шрифту і колір символів. Web-сторінка буде виглядати на екрані таким чином:
Ми навели приклад лише дуже скромного набору дизайнерських прийомів, за допомогою яких можна оформити web-сторінку на основі наявного документа у форматі Word.
Використання шаблонів оформлення
Якщо ви починаєте створювати сторінку з нуля, то можна скористатися майстром веб-сторінок, який в діалозі буде допомагати формувати документ. Або ж можна використовувати готовий шаблон оформлення сторінки, вибравши його з досить представницького набору. Для цього потрібно в операції Створити вибрати режим Створення за допомогою шаблону і надалі Загальні шаблони. На екрані з'явиться форма, в якій потрібно вибрати закладку Веб-сторінки:
Далі в пропонованій заготівлі документа ви повинні ввести тексти та малюнки:
Кольорове і стильове рішення користувач може вибирати самостійно, наприклад, за допомогою настройок Формат - Тема.
Створення гіперпосилань і закладок
Останнє питання, яке ми плануємо розглянути в даному розділі - створення гіперпосилань у документі.
Якщо ми хочемо послатися в документі на інший документ чи інший сайт в Інтернеті, то таку гіперпосилання можна зробити так: виділити в документі фрагмент тексту (слово) і виконати операцію Вставка - Гіперпосилання ... На екрані з'явиться форма, в якій задається адреса гіперпосилання. Адреса можна ввести явно чи можна вибрати файл у вікні.
Тут слід пам'ятати, що адреса обраного файлу на вашому комп'ютері може змінитися, коли ви будете формувати свій сайт. Тому неявний спосіб завдання адреси підходить тільки в тому випадку, якщо структура вашої папки на комп'ютері та на сайті Інтернету збігаються.
Якщо гіперпосилання має посилатися на іншу частину цього ж документа, то попередньо потрібно вставити закладку на початку потрібного фрагмента. Потрібно виконати операцію Вставити - Закладка, і в що з'явилася на екрані формі ввести ім'я закладки.
Тоді при створенні гіперпосилання потрібно вказати цю закладку (кнопка Закладка ... розташована в правій частині форми), вибравши, наприклад, її зі списку у формі:
Веб-презентація в PowerPoint
Програма PowerPoint орієнтована на створення презентацій на комп'ютері. Однак у неї є функція перетворення підготовленої презентації у веб-формат.
Ви можете відкрити підготовлену презентацію та виконати операції (з головного меню) Файл - Зберегти як веб-сторінку. Як завжди потрібно задати ім'я веб-презентації у вікні,. В результаті виконання перетворення презентації буде створено файл із заданим ім'ям і розширенням. Htm і однойменна папка з додатковими матеріалами.
Якщо тепер з браузера викликати веб-презентацію, то на екрані можна побачити результат перетворення.
У нижній частині екрана створюється спеціальний рядок, де розташовуються кнопки переходу до слайдів та кнопки для завдання різних параметрів перегляду презентацій.
Презентацію можна переглядати з показом структури слайдів. Але якщо цю інформацію не представляє інтересу, то зарезервоване для показу структури поле на екрані можна прибрати (операція розгорнути / згорнути структуру в нижньому рядку).
За допомогою кнопки Показ слайд можна переглядати слайди на повному екрані.
Створення гіперпосилань
У презентації можна створити гіперпосилання, які пов'язують об'єкти на слайді, наприклад, з іншими слайдами. Тим самим можна створити структуру гіпермедіа, яка природним чином буде відповідати ідеології Інтернету. Пояснимо цей прийом на прикладі.
Нехай у нас є кілька заготовлених слайдів на тему рослинного світу Байкалу, складених з колекції фотографій. Створимо новий слайд - зміст колекції.
Якщо новий слайд вийшов не перший в послідовності, то потрібно вийти в режим сортувальника слайдів (з головного меню за допомогою операцій Вид - Сортувальник слайдів) і перетягнути новий слайд в початок колекції.
На новий слайд помістимо зменшені копії всіх фотографій. Найпростіше це зробити самим прямолінійним способом: на порожній слайд послідовно скопіювати всі фотографії колекції, зменшити їх розмір і розмістити, наприклад, у дві лінії. Картинки можна буде в подальшому оформити рамками з тінню. На слайд-зміст можна додати назву презентації. Вид презентації в режимі Сортувальник слайдів наведено нижче:
Перейдемо в звичайний режим перегляду слайдів (команди Вид і далі Звичайний). На слайді-змісті виділимо фотографію і виконаємо команду Вставка - Гіперпосилання. У вікні, задамо перехід за гіперпосиланням - номер слайда з великою фотографією, з якою був скопійований менший зразок для змісту.
Аналогічно зв'яжемо інші картинки на слайді-змісті з відповідними слайдами за оригіналами фотографій.
Якщо ми тепер запустимо нашу презентацію на виконання, то вона буде працювати як структура гіпермедіа: при клацанні по маленькій фотографії буде виконуватися перехід на слайд з фотографією в збільшеному розмірі.
Залишилося зовсім трохи вдосконалити нашу структуру. Додамо на кожен слайд з фотографією в його верхню ліву частину стрілку (Автофігура на панелі інструментів Малювання), і зробимо з цієї стрілки гіперпосилання, виконує перехід на слайд-зміст. Тепер рух по створеній нами структурі гіпермедіа стане "двостороннім": зі змісту можна перейти на слайди з фотографіями, і з будь-якого слайду повернутися на зміст.
Після виконання перетворення презентації у веб-формат наша перша сторінка буде мати вигляд:
Клацання по картинці з меню викличе перехід до слайда з великою фотографією, а щиглик по стрілці (у лівій верхній частині слайда) забезпечить перехід на сторінку зі змістом колекції.
Огляд редакторів для верстки веб-сторінок
Існує багато інструментів для верстки веб-сторінок, з яким з них будете працювати ви - вибирати вам же. Я рекомендую вам випробувати різні редактори, і тільки тоді вже вирішувати, з яким вам краще працювати.
У цій статті я дам короткий огляд по найбільш популярним редакторам, щоб допомогти вам зорієнтуватися. Крім того я наведу корисні посилання по кожній програмі: сайт розробника, де можна придбати / завантажити в інтернет цей редактор, посилання на навчальні програми та інструкції по роботі з редактором.
Редактори для верстки веб-сторінок буваю двох типів: візуальні і текстові.
Візуальні редактори не вимагають від вас знань html, css та інших технологій для розмітки сторінок. У візуальному редакторі ви маєте в своєму розпорядженні різні елементи вашого сайту, як ніби на аркуші паперу, а редактор пише за вас код самостійно. Саме тому візуальні редактори ще називають WYSIWYG-редакторами. Абревіатура WYSIWYG розшифровується як What You See Is What You Get - що бачиш, те й отримуєш.
Однак, слід зауважити, що жоден візуальний редактор не досконалий і всі вони так чи інакше обмежені у своїх можливостях, тому від професійних кодерів потрібне вміння писати код руками, саме тому професійним кодерам потрібні текстові редактори. У цих редакторах ви пишіть код своїми руками. У текстових редакторах, як правило, бувають різні функції полегшують кодеру написання коду, такі, як підсвічування коду (так легше бачити, де в коді вставлені стилі, або скрипти, а де просто текст), різні гарячі кнопки і клавіші, які вставляють вже готові конструкції (шматки коду, спецсимволи) в код, і т.д.
Якого ж типу вам слід заводити редактор? Якщо ви вивчаєте html, css або інші технології для розмітки сторінок, якщо ви хочете вміти створювати якісні сторінки і бути професійним кодером, то безумовно вам потрібен текстовий редактор. Якщо ж у вас немає часу на вивчення html, css та інших технологій, якщо перед вами не варто дуже складних завдань у виконанні сторінки, то сміливо заводите собі візуальний редактор і користуйтесь ним, він дуже економить час і сили. А краще всього мати у себе на комп'ютері і візуальний, і текстової редактори для різних потреб.
Візуальні редактори
Macromedia Dreamweaver MX
Професійний інструмент для створення web-сайтів і додатків. Мабуть, це найкраща програма з візуальних редакторів на даний момент, принаймні вона дуже улюблена багатьма користувачами, а раз люблять, значить є за що.
Розробники стверджують, що Macromedia Dreamweaver MX призначена для проектування, розробки та адміністрування професійних web-сайтів і додатків. Крім того Dreamweaver легко інтегрується з іншими програмами від Macromedia, наприклад, такими, як Flash. Тобто Dreamweaver набагато більше, ніж просто візуальний редактор, це досить потужний і складний інструмент, а кожен складний інструмент вимагає, щоб на його освоєння було витрачено якийсь час, перш, ніж користувач зможе працювати в ньому. Однак, я вважаю, що вас не повинно бентежити, що доведеться вивчати, як користуватися програмою, Dreamweaver варто того.
Adobe GoLive і LiveMotion
Можливо, Adobe GoLive сподобається тим, хто любить програми від Adobe, і багато з ними працював: знайома середа, досить легко розібратися, що до чого. Крім того, ще один плюс для любителів Adobe - всі програми від Adobe чудово взаємодіють один з одним і доповнюють один одного, GoLive не виняток, він чудово дружить з побратимами. Однак, GoLive не більше, ніж візуальний редактор для верстки веб-сторінок, більше ніж підтримки таких технологій, як Html, Dhtml, CSS, XML і декількох готових Javascript `ів не варто чекати від цієї програми. Однак, слід зазначити, що вбудований редактор коду (текстової) у цій програмі дуже хороший. Тобто можливо, GoLive оптимальне поєднання візуального і текстового редактора (два в одному).
Хочу також додати, що, ймовірно, варто використовувати з GoLive таку програму, як Adobe LiveMotion (у попередніх версіях вона називалося Image Styler). Хоча, за ідеєю, LiveMotion є графічним редактором, в якому ви можете створювати невигадливу, але якісну графіку для своїх веб-сайтів, ця програма також вміє верстати веб-сторінки, на основі того, що ви намалювали (не кращим чином, але досить пристойно , плюсом є те, що LiveMotion сам ріже готовий макет на багато картинок, які ви потім можете використовувати при верстці сайту в GoLive).
Microsoft FrontPage
Якщо вірити розробникам, то програма FrontPage дозволяє створювати веб-вузли, що володіють широкими можливостями, а також надає засоби управління ними. На ділі, FrontPage дружить з Html, Css, Dhtml, Javascript. Дає досить широкі можливості по управлінню зображеннями і flash-роллікамі. Крім того FrontPage дружить з такими технологіями, як ASP, XML, VBScript, XSL. Також розробники стверджувала, що в останній версії FrontPage тепер бореться за чистоту коду, що ж, залишається сподіватися, що це так, тому що раніше даний пункт був не на висоті (раніше FrontPage вставляв у код дуже багато непотрібних коментарів та іншої зайвої інформації, так що правильністю і чистотою коду сторінки, зроблені в цьому редакторі похвалитися не могли).
Hotdog
Програма має простий і зрозумілий користувачеві інтерфейс. Крім того, що Hotdog дружить з користувачем, ця програма дружить також з Flash, SQL, PHP, ASP, має працювати з GIF-зображеннями (оптимізація, анімація), включає в себе Html-компресор, може створювати файли довідки (CHM).
ТЕКСТОВІ РЕДАКТОРИ
Homesite
Цей редактор, мабуть, самий популярний і потужний серед текстових, і не дарма. Крім того, що в ньому досить легко працювати не тільки з Html-кодом (є все, від списку всіляких атрибутів до всіх тегам аж до перевірки коду (правильність перевіряється з точки зору W3C.org)), але також є підтримка XHTML, CSS- редактор, і так далі.
HTML Pad
Ця програма теж користується великою любов'ю користувачів. Крім усього стандартного HTMLPad підтримує JavaScript, VBScript, SSI, ASP і Perl, вміє створювати макроси (нападобіе Word `a і Excel'я), включає в себе купу різних довідкових матеріалів по CSS і Html, і багато іншого.
Notepad
Notepad він же Блокнот. У цій програмі немає ніяких функцій, які облечат ваше життя: ні підсвічування коду, ні вставки готових конструкція коду, нічого, але зате ця програма є в Стандартних на комп'ютері у кожного користувача. З неї ви можете почати свої перші кроки у написанні коду, а потім вже змінити на більш сподобався редактор. Всі ми колись починали з Блокнота:)
За сим все. Якщо у вас не дуже хороша і швидка зв'язок з інтернет, щоб завантажити редактори, то ви можете купити їх у магазині, де продаються програми для комп'ютера.
Якщо ви вважаєте, що якийсь редактор для верстки веб-сторінок був несправедливо упущений у цій статті, якщо ви знаєте цінний підручник або статтю по якому-небудь редактору, якщо ви вважаєте, що ми незаслужено насварили або похвалили той чи інший редактор, то повідомте нам про це на Форумі, або по Е-майл (admin@postroika.ru), ми обов'язково прислухаємося до вашої думки і постараємося виправитися.