Існує багато інструментів для верстання веб-сторінок, варто випробувати різні редактори, і лише тоді вже вирішувати, з яким краще працювати.
Редактори для верстання веб-сторінок є двох типів: візуальні і текстові.
Візуальні редактори не вимагають знань html, css та інших технологій для розмітки сторінок. У візуальному редакторі різні елементи сайту розташовуються, неначе на листі паперу, а редактор пише код самостійно. Саме тому візуальні редактори ще називають WYSIWYG-редакторами.
Проте, жоден візуальний редактор не є досконалим і всі вони так чи інакше є обмеженими за своїми можливостями, тому від професійних кодерів потрібне уміння писати код руками, саме тому професійним кодерам потрібні текстові редактори. У цих редакторах пишуть код своїми руками. У текстових редакторах, як правило, бувають різні функції що полегшують кодеру написання коду, такі, як підсвічування коду (так легше бачити, де в коді вставлені стилі, або скрипти, а де просто текст), різні гарячі кнопки і клавіші, які вставляють вже готові конструкції (фрагменти коду, спецсимволи) в код, і т.п.
Якого ж типу обрати редактор? Якщо за мету ставиться вивчення html, css або інших технологій для розмітки сторінок, якщо потрібно навчитися створювати якісні сторінки і бути професійним кодером, то безумовно потрібний текстовий редактор. Якщо ж таких завдань не ставиться, то звісно кращим вибором буде візуальний редактор, бо він економить час і сили. А краще всього мати у себе на комп'ютері і візуальний, і текстовий редактори для різних потреб.
ВІЗУАЛЬНІ РЕДАКТОРИ
MACROMEDIA DREAMWEAVER MX
Професійний інструмент для створення web-сайтів і додатків. Мабуть, це сама краща програма з візуальних редакторів на даний момент, принаймні вона є у пошані у багатьох користувачів.
Розробники стверджують, що Macromedia Dreamweaver MX призначена для проектування, розробки і адміністрування професійних web-сайтів і додатків. Окрім того Dreamweaver легко інтегрується з іншими програмами від Macromedia, наприклад, такими, як Flash. Dreamweaver є значно більшим, ніж просто візуальний редактор, це достатньо могутній і складний інструмент, а всякий складний інструмент вимагає, щоб на його освоєння було витрачено якийсь час, перш, ніж користувач зможе працювати в нім.
· Офіційна сторінка та опис програми Dreamweaver
· Завантажити Dreamweaver (48,2 Мб)
· Підручник Dreamweaver 4
· Підручник DreamWeaver MX
· Підручник Macromedia Flash & Dreamweaver
ADOBE GOLIVE І LIVEMOTION
Можливо, Adobe GoLive сподобається тим, хто любить програми від Adobe, і багато з ними працюває: знайоме середовище, в якому легко розібратися. Всі програми від Adobe є сумісними між собою і доповнюють один одного. GoLive є лише візуальним редактором для верстання веб-сторінок і підтримує технологій Html, Dhtml, CSS, XML та декілька готових Javascript’ів. Вбудований редактор коду (текстовий) в цій програмі є добрим. GoLive це є оптимальне поєднання візуального і текстового редактора (два в одному).
Варто використовувати з GoLive таку програму, як Adobe LiveMotion (в попередніх версіях вона називалося Image Styler). Хоча, LiveMotion є графічним редактором, в якому можна створювати нескладну, але якісну графіку для своїх веб-сайтів, він також вміє верстати веб-сторінки, на основі того, що намальовано. LiveMotion сам розподіляє готовий макет на багато картинок, які потім можна використати при верстанні сайту в GoLive.
· Офіційна сторінка та опис програми Golive
· Завантажити Golive (106 Мб)
· Огляд-підручник GoLive
· Підручник: інтеграція шаблонів Golive
· Офіційна сторінка та опис програми LiveMotion
· Завантажити LiveMotion (65,5 Мб)
· Завантажити Image Styler (попередня версія LiveMotion) (15 Мб)
· Навчання роботі з Image Styler
MICROSOFT FRONTPAGE
Програма FrontPage дозволяє створювати веб-сторінки у форматах Html, Css, Dhtml, Javascript. Надає широкі можливості по управлінню зображеннями і flash-роликами. FrontPage сумісний з технологіями ASP, XML, VBScript, XSL. В останній версії FrontPage створює більш чистий код (раніше FrontPage вставляв в код багато непотрібних коментарів та іншої зайвої інформації).
· Офіційна сторінка та опис програми FrontPage
· FrontPage 98 - Підручник
· Основи роботи з FrontPage 2000
HOTDOG
Програма має простій і зрозумілий користувачеві інтерфейс. Hotdog є дружнім до користувача, сумісним з Flash, SQL, PHP, ASP, може працювати з GIF-зображеннями (оптимізація, анімація), містить Html-компресор, може створювати файли довідки (CHM).
· Офіційна сторінка та опис програми Hotdog
· Завантажити Hotdog (11,3 Мб)
ТЕКСТОВІ РЕДАКТОРИ
HOMESITE
Цей редактор, мабуть, найпопулярніший і могутніший серед текстових редакторів. В ньому легко працювати не лише з Html-кодом. Користувачеві надається широка допомога: перелік різних атрибутів до всіх тегів, перевірка коду (правильність перевіряється за вимогами W3C.org), підтримка XHTML, CSS-редактор, тощо.
· Офіційна сторінка та опис програми Homesite
· Завантажити Homesite (11,3 Мб)
· Все про html-редактор Homesite 4.5
HTML PAD
HTMLPad підтримує JavaScript, VBScript, SSI, ASP і Perl, вміє створювати макроси (на подобі Word’a і Excel'а), містить довідкові матеріали по CSS і Html, і багато іншого.
· Офіційна сторінка та опис програми HTML Pad
· Завантажити HTML Pad (3 Мб)
· Як працювати з HtmlPad
NOTEPAD
Notepad він же Блокнот. У цій програмі немає жодних функцій, які полегшують роботу: ні підсвічування коду, ні вставляння готових конструкцій коду, нічого, проте ця програма є в Стандартних на комп'ютері у кожного користувача. З неї можна почати свої перші кроки в написанні коду, а потім вже змінити на більш досконалий редактор.
ПОРЯДОК РОБОТИ
1. Запустити програму DreamWeaver (Start -> Programs -> Macromedia -> Macromedia Dreamweaver MX.
2. Відкрити підручник з DreamWeaver.
3. Вивчити методику створення Web-сайту за допомогою MacroMedia DreamWeaver.
4. Створити фрагмент у візуальному режимі, перейти у текстовий режим і проаналізувати створене.
5. Зробити виправлення у текстовому режимі, перейти у візуальний режим і проаналізувати результат
6. Дослідити можливості у створенні таблиць
7. Додати до створеної сторінки стилі
ЗМІСТ ЗВІТУ
1. Назва та мета виконання лабораторної роботи.
2. Порівняльний аналіз популярних редакторів.
3. Характеристика та основні можливості по створенню Web-сторінок за допомогою DreamWeaver.
4. Додати скрін створеного фрагменту та його код.
5. Висновки.
СТВОРЕННЯ ВЕБ САЙТУ
Створення сайту завжди починається з ідеї. Але до її реалізації існують усталені етапи для того, щоб створити працездатний якісний сайт.
1. Ідея
2. Розробка структури сайту
3. Розробка оформлення сайту
4. Кодинг, програмування
5. Тестування і доопрацювання
6. Просування, реклама
7. Подальша підтримка і оновлення
Перші п'ять етапів відносяться безпосередньо до створення сайту, останні потрібні для подальшого існування сайту.
ІДЕЯ
Перш, ніж приступити до роботи над сайтом, потрібно чітко уявляти, що в результаті має бути, а також перспективи розвитку сайту.
Отже, потрібно вирішити:
· Навіщо створювати сайт (чи потрібно це взагалі)
· Про що буде сайт (тематика)
· Що це буде (домашня сторінка, портал, або щось ще)
· Відмінність від сайтів з такою ж тематикою (якщо це не домашня сторінка)
· Яка буде аудиторія сайту (стать, вік, інтереси і т.д.)
· Якого роду сервіси будуть присутні на сайті (форум, каталог, пошта і т.д.)
· Плани на найближче майбутнє
· Плани подальшого розвитку (перспективи)
та багато інших подібних питань які слід вирішити перш, ніж братися за реалізацію. Продумування: що, як навіщо і чому - найважливіший етап в створенні сайту. Головним тут є хороша ідея, а інше додається під час роботи.
Тільки після того, як в думці, а краще і на папері, оформиться чіткий образ того, яким повинен бути сайт, можна приступати до інших етапів. Певні етапи розробки сайту можуть проводитися паралельно (особливо, якщо працює над створенням сайту не одна людина, а команда в декілька чоловік).
РОЗРОБКА СТРУКТУРИ
Щоб створити сайт потрібний план. Чітко розписаний, що, де буде розташовано. План цей малюється на папері, і називається це розробка структури сайту.
Структуру сайту можна умовно розділити на зовнішню і внутрішню.
ВНУТРІШНЯ СТРУКТУРА САЙТУ
Залежить від того, яка інформація буде розміщена, які є матеріали. Слід вирішити, які будуть на сайті розділи, підрозділи, тобто скласти дерево сайту.
Розглянемо розробку внутрішньої структури на прикладі домашньої сторінки. Яку інформацію можна на ній розмістити? Розповідь про себе (на головній сторінці), свої фотографії, контактну інформацію - це як мінімум. Отже, внутрішня структура домашньої сторіночки буде такою:
|
| - Головна сторінка (розповідь про себе) |
| - Фотографії | |
| - Контактна інформацію (e-mail) |
Можна створити складнішу внутрішню структуру. Нехай в розробника є багато фотографій, тому має сенс розгалузити розділ Фотографії на декілька підрозділів. Також якщо важливо отримувати відгуки від відвідувачів, тому передбачається наявність гостьової книги. Крім того, якщо розробник є людиною творчою, тому на сайті може додатися розділ Моя Творчість.
| - Головна сторінка (розповідь про себе) | ||||||
| - Фотографії |
| |||||
| - Моя Творчість |
| |||||
| - Гостьова книга | ||||||
| - Контактна інформацію (e-mail) | ||||||
Коли перед очима такий план внутрішньої структури, можна сміливо продовжувати роботу над сайтом, не боячись чогось забути або упустити.
ЗОВНІШНЯ СТРУКТУРА
Це розташування основних важливих елементів на кожній сторінці. Треба вирішити, де і як буде розташовано меню, можливо, пошук, основний зміст, певні анонси про нові розділи сайту, оновлення, лічильник та банери, якщо вони передбачені на сайті. Для прикладу візьмемо типову зовнішню структуру сайту:
Шапка сайту
Меню
Основний текст
При розробці зовнішньої і внутрішньої структури орієнтуються на те, щоб в майбутньому відвідувачеві було легко орієнтуватися на сайті, щоб легко знаходилася важлива і потрібна інформація. Тому, перш ніж братися за розробку структури сайту, потрібно вивчити ресурси з подібною тематикою і подивитися, як вирішено це завдання там.
ОФОРМЛЕННЯ САЙТУ
Оформлення або дизайн – це зовнішній вигляд сайту. Перше враження від сайту є дуже важливим, бо від нього залежить чи залишиться відвідувач, чи знайомитиметься з інформацією, яку йому пропонують, або закриє вікно з цим сайтом і назавжди забуде про його існування.
Оформлення сайту підказує відвідувачеві, куди він потрапив: чи це є корпоративний сайт певної компанії, або інформаційний портал, або літературний сайт, або щось ще. Оформлення допомагає відвідувачеві орієнтуватися по сайту, а може, і навпаки, збити відвідувача так, що навіть при добре розробленій структурі відвідувачеві важко буде зорієнтуватися. Від оформлення залежить багато що - візуальна інформація є не менш важливою, ніж текстова, яка потім наповнить сайт.
Не вірте, що дизайн – це справа смаку: що хочу, то і зроблю. Це не правда. Дизайн – це ціла наука. Щоб опанувати їй, доведеться ознайомитися з такими поняттями, як колористика (теорія кольору), композиція, шрифт, і багатьма іншими. Дизайн підпорядкований усталеним законам і правилам, і дизайн сайту - не виключення.
Крім теорії потрібно буде також опанувати багатьма програмами, для втілення задумок в життя. Оформлення сайтів на перевірку виявляється складною наукою: багато чого треба вміти і багато чого знати, щоб створити якісний дизайн для сайту.
КОДИНГ І ПРОГРАМУВАННЯ
Тепер маємо оболонку (макет зовнішнього вигляду сайту) і план дій (структуру). Але, що стоїть за оболонкою? А за оболонкою знаходиться каркас, на якому ця оболонка тримається, це є код сторінки. Він відповідає за те, як в певній послідовності на сторінці відображається текст і картинки.
Як правило, код пишеться на мові розмітки текстових документів HTML. HTML достатньо простий, і практично кожен користувач може освоїти його, щоб створювати свої не дуже складні веб-сайти. Також не є складними для вивчення таблиці каскадних стилів – CSS – додатковий засіб, за допомогою якого можна керувати вмістом сторінок. CSS, по суті, доповнює HTML, розширюючи його можливості.
Але HTML і CSS відповідають лише за розмітку зовнішнього вигляду документа (сторінки), а для того, щоб реалізувати складніші речі, наприклад, на зразок гостьової книги, або пошуку по сайту, або форуму, потрібні вже інші засоби. Потрібно знати мови програмування для веб – PERL, PHP, ASP або інші.
За допомогою мов веб-програмування пишуться програми – скрипти. Скрипти є певним послідовним набором команд, для виконання певних дій або операцій (наприклад, щоб запис, що введений відвідувачем, додався у гостьову книгу).
Отже, якщо HTML і CSS - це каркас на якому все тримається, то програми-скрипти (на PERL, PHP, ASP) - це механізм, розташований усередині цього каркаса. Веб-програмування вже складніший для освоєння предмет, ніж HTML або CSS, проте, тут знову ж таки немає нічого складного, адже є готові рішення, так звані готові програми-скрипти, які розповсюджуються в Інтернет, як на безкоштовній, так і платній основі.
Кодинг і програмування є також достатньо складним етапом в створенні сайту. Від того, хто розробляє програмну начинку сайту, і пише код сайту, також як від дизайнера, потрібні хороші, тверді знання і досвід, для створення якісного комерційного і серйозного проекту. Проте, якщо йдеться про любительські проекти і домашні сторінки, то вимоги тут пом’якшуються.
ТЕСТУВАННЯ І ДООПРАЦЮВАННЯ
Коли сайт готовий, його викладають в мережу (Інтернет). Для цього потрібно зареєструвати для сайту доменне ім'я (адреса), і визначитися з хостингом (місце на сервері провайдера, де буде знаходитися сторінка). Процедура розміщення сайту в Інтернет не дуже складна, дізнатися все про це можна в Інтернеті.
Коли сайт розміщено в Інтернеті, то перш, ніж його просувати і рекламувати, слід перевірити сайт на працездатність. Можливо, якісь скрипти виконуються з помилками. Можливо, десь пропущена важлива і цінна інформація або потрібна картинка.
Після того, як протестовано і вивірено сайт на працездатність, слід попросити людей, що не брали участь в розробці, ще раз протестувати і оглянути ваш сайт. Можливо, що не помічено певних недоліків, які може побачити свіжим поглядом, людина, що не брала участь в розробці. Також можна провести дослідження за допомогою опитування: що подобається або не подобається відвідувачам на сайті, чи зручна навігація і т.д.
Даний пункт в житті сайту достатньо важливий: здавалося б, подумаєш – дрібниці. Проте коли таких дрібниць накопичується багато - це дуже погано. Що зробить відвідувач, якщо не зможе додати запис у форум, або якщо стаття, що цікавить його, буде не доступна, внаслідок того, що до неї неправильно прописали шлях? Правильно, він може піти і більше не повернутися.
ПРОСУВАННЯ, РЕКЛАМА
Цей етап доведеться виконувати з певною періодичністю, щоб на сайт приходили нові відвідувачі. Кількість і постійний потік відвідувачів на сайт не залежить цілком від реклами, основну роль все ж таки грає наявність цікавої для певної групи людей інформації, заради якої вони і відвідуватимуть ресурс.
Перш, ніж зайнятися рекламою сайту, варто подумати – а чи потрібно це? Якщо потрібно, то навіщо. Що зміниться від того, що на сайті стане десятком відвідувачів більше?
Якщо це все-таки потрібно, слід продумати, яка аудиторія зацікавлена у ресурсі (вік, стать, професійна зайнятість цієї аудиторії – наприклад, програмісти вони або вчителі, люди похилого віку або діти). Після визначення аудиторії, треба з’ясувати її уподобання: які сайти відвідує, які журнали читає, і т.д. Там слід розставити посилання: розмістити рекламу в журналі або газеті, на потрібних сайтах. Краще всього дослідження аудиторії і рекламу сайту довірити професіоналам, які ретельно продумають рекламну кампанію, і в них краще вийде виконати поставлене завдання в рамках бюджету. Адже реклама теж вимагає певних знань і грошових вкладень, це не такий вже простий етап, як може показатися спочатку.
З безкоштовних шляхів рекламування ресурсу: каталоги, пошукові системи, банерообмінні мережі, а також схвальні відгуки про сайт на сторінках інших людей. На жаль, безкоштовно розкрутити свій ресурс дещо важко, але все-таки можна, головне запастися терпінням, адже на безкоштовне просування ресурсу знадобиться дуже багато часу і сил.
Природно, є і інші безкоштовні технології просування сайту, як спам або накрутка – але хотілося б застерегти від використання даних методів. Ефект від них тимчасовий, дані способи є чорними, тобто такі способи не вітаються рейтинговими і пошуковими системами і можуть спричинити виключення сайту з рейтингів і блокування в пошукових системах.
Докладніше про методи просування і реклами сайту можна прочитати в Інтернет.
Дата: 2019-05-28, просмотров: 353.
