Лабораторна робота №3. Створення простої веб-сторінки
Завдання для практичного виконання
- Ознайомитися з наведеними редакторами. Обрати та встановити відповідний HTML-редактор.
- Згідно наведених МВ та відеоуроків створити веб-сайт з 4-5 сторінок.
- Розмістити веб-сайт на хостингу. Результат виконання демонструвати в Інтернеті.
Базовий інструментарій
Для того, щоб розробник відчував себе максимально комфортно при розробці нового проекту, окрім робочого місця і персонального комп'ютера йому необхідно мати певний набір програмного забезпечення, базовий інструментарій, без якого розробнику сайту просто не обійтися. Розробнику-початківцю важко зорієнтуватися у всьому різноманітті найменувань існуючих програм, і навіть в списку мінімально необхідних для роботи застосувань.
Нижче запропоновано мінімальний перелік засобів, які повинні мати розробники в своєму розпорядженні перед тим, як братися за розробку Інтернет проекту. Дані програми розраховані на використання під управлінням операційної системи Windows.
Для повноцінної роботи веб-дизайнеру необхідно:
- HTML-редактор, рекомендується Adobe DreamWeaver.
- Графічні редактори:
- Редактор растрової графіки та GIF-анімації, рекомендується Adobe Photoshop.
- Редактор для створення анімованої графіки, рекомендується програма Adobe Flash.
Ці редактори розроблено професійними компаніями і за їх використання розробник має заплатити чималу ціну. Але, популярною альтернативою є безкоштовні редактори, які, можливо, і мають меншу функціональність, але є цілком придатними для роботи над веб проектом.
Десктопні HTML редактори
Програми для створення сайтів є двох категорій - текстові та візуальні HTML-редактори.
Текстові HTML-редактори
Створення сайту в текстових редакторах є доцільним, якщо розробник знайомий з мовою HTML і володіє нею на належному рівні. Є достатньо велика кількість текстових HTML-редакторів, що використовуються розробниками різного рівня фаховості, втім, написати код можна і в звичайному блокноті, який є на кожному комп'ютері.
До позитивних особливостей текстових редакторів потрібно віднести те, що розробник власноруч пише код всіх сторінок майбутнього сайту. Звичайно, в багатьох текстових редакторах є і підсвічування синтаксису, і уставляння стандартних фрагментів коду, і багато інших корисних функцій, але редактор не додасть жодного рядка без відома розробника, на відміну від візуальних редакторів. Тому, код сайту буде зрозумілим і позбавлений надлишковості. Розробник точно буде знати призначення того чи іншого фрагмента html-коду і за потреби, може легко внести зміни.
Недоліки у текстових html-редакторів:
- Відсутність можливості бачити результат безпосередньо під час написання коду сторінки. Тоді, потрібно відкривати браузер і вже в ньому дивитися, як виглядає сайт на даному етапі.
- Обов'язкове знання мови HTML. Без попереднього вивчення HTML працювати буде врай складно. Тому, потрібно придбати підручник з мови HTML і лише після його прочитання приступати до створення сайту в текстовому редакторі.
Візуальні HTML-редактори
Для розробника початківця самим кращим варіантом буде застосування візуальних HTML-редакторів. Вони лояльно відносяться до незнання мови HTML і сприяють її вивченню, полегшують процес створення сайту і надають можливість миттєвого перегляду результату дій.
Визнаним лідером серед візуальних HTML-редакторів є Adobe Dreamweaver, завдяки дружньому інтерфейсу, генерації мінімально надлишкового коду, автоматичній генерації скриптів і багатьох зручностей. Втім, в якій програмі створювати сайт, вирішує розробник: можна скористатися безкоштовними офлайн та онлайн програмами.
Adobe Dreamweaver - потужне програмне забезпечення для веб-дизайну і створення візуальних проектів. Програма Adobe Dreamweaver допомагає розробляти реалістичну середу для інтерактивного перегляду, управляти проектами на рівні пікселів або за допомогою спеціально створеного коду. Вбудовані підказки в Adobe Dreamweaver дозволяють більш точно створювати код в HTML, JavaScript, Ajax, Spry, jQuery і Prototype.
Adobe Dreamweaver пропонує «гумові» макети і панель «багатоекранної перегляд» в цілях одночасного створення проектів для телефонів, планшетних пристроїв і комп'ютерів. Dreamweaver повністю підтримує HTML5, а це дає нові можливості у використанні онлайн-відео, анімації, що, у свою чергу, додасть унікальність будь-якому сайту. До програми приєднано jQuery, отже користувач з легкістю може використовувати Java-скрипти при створенні веб-сторінки.
Для початківців Dreamweaver - просто знахідка! При створенні перших сайтів він здатний значно полегшити навчання. Є сервіс підказок і пристойну кількість шаблонів, елементів оформлення, скриптів - за допомогою всього цього легко, як кажуть, «набити руку». Дуже прості сторінки не заберуть у користувача багато часу і сил.
Досвідчені веб-розробники, використовуючи Dreamweaver, мають значно більше можливостей. Розширена підтримка jQuery Mobile і Adobe PhoneGap дозволяє розробляти сторінки під різні операційні системи (iOS і Android) і додатки. Є унікальна панель «багатоекранного перегляду», за допомогою якої можливо оптимізувати сайт під різні пристрої, не залежно від розмірів їх екранів (аж до мобільних телефонів) і при цьому сайт буде виглядати так, як потрібно.
Dreamweaver підтримує відомі движки, такі як WordPress і Joomla. Зміни можна вносити безпосередньо в код сайту, що покращує оптимізацію.
Створення простої сторінки
Секрет швидкого навчання полягає в тому, що немає необхідності вивчати весь HTML. Щоб створити достатньо функціональний сайт, не треба знати весь HTML - там багато нюансів, які ускладнюють життя і їх можна опустити. Якщо знати хоча б 20% зі всього HTML, то можна використовувати його, як використовують 80% розробників сайтів. Решта 20% можна залишити програмістам і професіоналам.
Більшість книг по створенню сайтів своїми руками з гучними назвами і об'ємними томами, де розписано весь курс HTML, більше годяться на роль довідників, а не підручників. В даній роботі не будемо вчити весь курс, обмежимося лише тією невеликою частиною, яка дозволить самостійно створювати сайти, які будуть працювати. Решта знань набуваються під час створення наступних, більш складних проектів.