Створення простої сторінки

Базовий інструментарій

Для того, щоб розробник відчував себе максимально комфортно при розробці нового проекту, окрім робочого місця і персонального комп'ютера йому необхідно мати певний набір програмного забезпечення, базовий інструментарій, без якого розробнику сайту просто не обійтися. Розробнику-початківцю важко зорієнтуватися у всьому різноманітті найменувань існуючих програм, і навіть в списку мінімально необхідних для роботи застосувань.

Нижче запропоновано мінімальний перелік засобів, які повинні мати розробники в своєму розпорядженні перед тим, як братися за розробку Інтернет проекту. Дані програми розраховані на використання під управлінням операційної системи 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, більше годяться на роль довідників, а не підручників. В даній роботі не будемо вчити весь курс, обмежимося лише тією невеликою частиною, яка дозволить самостійно створювати сайти, які будуть працювати. Решта знань набуваються під час створення наступних, більш складних проектів.

Учим HTML за 1 Час! #От Профессионала
Учим CSS за 1 Час! #От Профессионала
Учим Photoshop за 1 Час! #От Профессионала

Порядок роботи

  1. Ознайомитися з наведеними редакторами. Обрати та встановити відповідний HTML-редактор.
  2. Згідно наведених відеоуроків створити сторінку.
  3. Розмістити тестову сторінку на хостингу. Результат виконання демонструвати в Інтернеті.

Зміст звіту

  1. Назва та мета виконання лабораторної роботи.
  2. Скріншоти послідовності роботи з коротким описом кожного з етапів.
  3. Зазначити Інтернет-адресу та скріншот створеної тестової сторінки.
  4. У висновку оцінити зручність використання та можливості редакторів.