Учебное пособие: Глобальні інформаційні мережі
1. Високий
рівень - створення документу звичайними засобами з наступною його
конвертацією в HTML,
2. Середній
рівень - створення Web-сторінки в спеціалізованому HTML-редакторі,
3. Низький
рівень - створення Web-сторінки безпосередньо в HTML-кодах.
Перший підхід не вимагає жодних знань мови HTML. Документ
створюється в довільному текстовому редакторі у форматі, в якому він буде
відображатись у Web-браузері. Після створення документ конвертується у
HTML-код. Наприклад, Microsoft Word дозволяє зберегти відкритий документ у
форматі HTML. Але цей підхід має суттєві недоліки: по-перше, код, що отримано в
результаті конвертації є досить громіздким і незручним для подальшого
редагування, а по-друге, можливості Web-сторінки, що отримана таким шляхом,
досить обмежені, оскільки від початку створюється не HTML-документ, а,
наприклад, Word-документ.
Другий підхід є найзручнішим з точки зору співвідношення часу, що
витрачається на створення Web-сторінки, та можливостей цієї сторінки, отриманих
за допомогою спеціалізованого HTML-редактора. Такі HTML-редактори, як правило,
дозволяють створювати Web-сторінки подібно, як створюються документи у
текстових процесорах, із форматуванням тексту, графіки, таблиць та інших
елементів сторінки за принципом WYSIWYG (What You See Is What You Get -
"що бачиш, те і отримаєш"), при цьому сам документ зберігається
відразу у HTML-коді. Крім того, такі HTML-редактори дозволяють безпосередньо
редагувати HTML-код. Ефективність отриманого коду при цьому підході залежить
від ефективності та можливостей вибраного редактора.
Третій підхід вимагає глибокого знання мови HTML. Редагування
Web-сторінок відбувається у форматі, дещо незручному для сприйняття
початківцем. Однак при такому підході можна створити дуже ефективний HTML-код,
що забезпечить максимальну інформативність сторінки при її мінімальному об'ємі.
Крім того, в такому випадку Web-дизайнеру доступні всі можливості мови HTML,
які можуть не бути реалізовані у спеціалізованих HTML-редакторах.
ОГЛЯД РЕДАКТОРІВ ДЛЯ ВЕРСТКИ ВЕБ-СТОРІНОК
Існує багато інструментів для верстання веб-сторінок, варто
випробувати різні редактори, і лише тоді вже вирішувати, з яким краще
працювати.
Редактори для верстання веб-сторінок є двох типів: візуальні і текстові.
Візуальні редактори не вимагають знань 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. Подальша
підтримка і оновлення
Перші п'ять етапів відносяться безпосередньо до створення сайту,
останні потрібні для подальшого існування сайту.
ІДЕЯ
Перш, ніж приступити до роботи над сайтом, потрібно чітко уявляти,
що в результаті має бути, а також перспективи розвитку сайту.
Страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27 |