структура сайту
ТТехнологія створення сайту в системі UcoZ В Інтернет-браузері відкриваємо сторінку www.ucoz.ua. Натискаємо на кнопці Створити сайт. Потрапляємо на реєстраційну форму користувача, яку заповнюємо, відповідно до запропонованих запитань. Наступний крок — натиснути на кнопці Реєстрація. Після заповнення форми ви отримаєте глобальний профіль у системі uNet, що дасть вам можливість створювати будь-яку кількість сайтів у системі UcoZ. Якщо всі дані введено правильно, ви переходите до сторінки, яка вимагає підтвердження e-mail адреси (лист для підтвердження вам надіслано на вашу поштову скриньку, яку ви вказали під час реєстрації). Підтвердивши e-mail адресу, ви переходите до вікна, у якому потрібно ввести секретний реєстраційний код, зображений на картинці поряд. Наступний крок — заповнення веб-топа користувача. Спочатку ви повинні встановити окремий пароль для веб-топа, який знадобиться для додаткового захисту вашої інформації. На наступному кроці потрібно придумати та вписати адресу сайту, вибравши той хостинг, який пропонує UсоZ. До речі, він налічує 18 імен і містить українські домени. Усе, ваш сайт успішно створено, про що й повідомить система. Щоб створити розділ на Ucoz–сайті потрібно зайти під логіном і паролем адміністратора сайту. Обрати Пункт «Общее» - «Вход в панель управления». Потім в контекстному меню(рис.1) обрати пункт «Каталог статей» - «Управление категориями» - натиснути кнопку «Добавить категорию».
Після створення категорії обираємо її натискуванням і натискаємо кнопку «Добавить материал». Додавання статті. Післе натискування кнопки «Добавить материал» в відповідній категорії перед нами відкриється вікно(рис.2). Тут ми вносимо назву статті, короткий зміст і саму статтю.
Для форматування документа ми використовуємо значки : В –це жирность тексту, U – це підкреслювання, і – це курсив, вирівнювання, нумеровані списки і відступи. Натиснувши на цей значок ми відкриємо повну можливіть форматування тексту, вирівнювання тексту, межі і заливки тексту і таблиць, а натиснувши на ці кнопки в панелі ми змінимо шрифт тексту і розмір. Кнопки означають відповідно предпросмотр, вставку з буфера обміну, повернення чи повтор дії. Кнопки означають зміну кольору тексту і фону під текстом відповідно. Кнопки означають відповідно вставку гіперссилки, картинки, флеш і таблиці. Кнопки означають відповідно вставку символа з таблиці символів, вставку лінії, видалення текста, видалення форматування тексту, html – код документу.
Для додавання картинки в документ. натискаємо значок в панелі інструментів, обираємо у новому вікні (рис.4) значок папки після чого відкривається ще одне вікно окно(рис.5)
В даному вікні обираємо пункт «Выбирите файл» Після чого обираємо на комп’ютері картинку і натискаємо на кнопку «Загрузить файл». Після цих дій наша картинка з’являється в «Файлах форума.», де ми на неї натискаємо і переходимо знову на рис.4 (автоматно),
після чого ми натискаємо кнопку «Іnsert» і наша картинка автоматично вставляєтся там, де знаходиться ваш курсор. Для збереження документа натискаємо внизу сторінки кнопку «Добавить». Для додавання різних документів в формате word, pdf, exe натискаємо в меню сайта пункт «Общее» - «Главная страница», вводимо пароль і секретний код, і в меню рис. 6
обираємо пункт «Файловый менеджер», там обираємо кнопку «Выбрать файл» після чого обираємо файл на комп’ютері, натискаємо кнопку «Загрузить файл», після завантаження на сервер файлу ви можете створити в Каталозі файлів матеріал і додати ваш документ натиснувши кнопку (гіперпосилання), далі натиснувши на значок папки обрати потрібний файл і натиснути кнопку «Іnsert».
Редактор веб-сайтів з графічним інтерфейсом.
Найпоширенішими візуальними редакторами для створення сайтів є: Frontpage і Dreamweaver. Програма Frontpage компанії Microsoft, на мою думку, є кращою на сьогоднішній день. 80% сайтів в Інтернеті створено за допомогою цього пакету. Не дивлячись на те, що це наймогутніша програма, майже повна схожість її інтерфейсу з поширеним текстовим редактором Word дозволяє освоїти її легко і швидко. Редактор Frontpage містить великий набір шаблонів і майстрів для створення сайтів з різної тематики. Для форматування тексту можна використовувати всі можливості, передбачені в основному стандарті HTML, а так само застосовувати спеціальні динамічні ефекти і анімацію. Редактор має зручні інструменти для роботи з таблицями, вбудовані засоби для обробки зображень, дозволяє легко розміщувати на сторінках різні мультимедіа-об'єкти: малюнки, відеофільми, анімацію, звукові фрагменти. Тісна інтеграція з пакетом MS Office дозволяє відображати на сторінках документи MS Word, таблиці і графіки MS Excel, динамічно отримувати дані з MS Access, використовувати мову VBA, засоби перевірки орфографії і десятки готових тим для оформлення сторінок сайту. У програмі Frontpage реалізована підтримка сучасних Web-технологій, таких, як каскадні таблиці стилів (CSS), динамічні ефекти (DHTML), фрейми, активні сторінки (ASP), елементи ACTIVEX і Java-апплети. Якщо Web-сервер підтримує технології Frontpage і Sharepoint, то з'являються додаткові можливості при створенні сторінок - форми пошуку, лічильники відвідуваності, зміст сайту та інші. Програма Frontpage є не тільки редактором Web-сторінок, але і містить засоби управління створення сайту, такі, як схема навігації по сторінках, аналіз сайту за допомогою різних звітів, колективна розробка, настроювання на певні браузери, завантаження сайту на Web-сервер по протоколах НТТР і FTP. Всі ці можливості дозволяють створювати за допомогою Frontpage повноцінні Web-сайти, такі, наприклад, як електронні магазини або ігрові сайти. До недоліків редактора Frontpage можна віднести його переважну орієнтацію на браузер Internet Explorer, тому слід перевіряти роботу створеного сайту в інших браузерах. А також деяку надмірність готового коду HTML. Редактор відстежує зміни в коді сторінок і наполегливо відновлює теги, видалені Web-мастером. Вимоги до комп'ютера для установки і роботи редактора Frontpage такі ж, як у інших додатків MS Office. Для завантаження створеного сайту на Web-сервер знадобиться доступ в Інтернет і модем для передачі даних або мережева карта. Для перевірки сторінок, звук, що містять, або відео, буде потрібно звукову карту.
Відомі безкоштовні візуальні редактори для створення сайтів на сьогоднішній день:
Kompozer - редактор, який годиться як для початківців, так і для професіоналів. Існують його версії для Windows і Linux. Amaya - два в одному, редактор сторінок і одночасно браузер, який схвалений W3C, він правильно підтримує всі стандарти для html. SeaMonkey - набір програм для роботи в інтернеті, що включає браузер, поштову програму, IRC-чат і редактор сторінок. Створений на основі продуктів Mozilla. BlueGriffon - зовсім нова розробка, що з'явилася в 2010 році. Втім, вона вважається наступником редактора NVU, розвиток якого затихнув кілька років тому. Набор платних візуальних редакторів досить великий. Серед них можна виділити такі, як Editor, CoffeeCup HTML, RapidWeaver, Namo WebEditor, Web Builder і ін. Проте найбільш популярними вже довгий час є редактор Dreamweaver і лінійка редакторів від Microsoft. Dreamweaver - візуальний редактор, що багато років утримує заслужене лідерство серед програм для створення сайтів. Зараз Dreamweaver входить в набір продуктів Adobe Creative Suite, що представляє комплексне рішення для створення веб-сайтів. Довгий час багато вебмастерів користувалися для створення сайтів редактором FrontPage, але потім Microsoft припинила його підтримку, запропонувавши взамін дві нові програми - Microsoft Expression Web (вважається основним html-редактором від Microsoft) і Microsoft SharePoint Designer. Microsoft Expression Web є частиною Microsoft Expression Studio - комплексу програм для розробки сайтів. На сайті Microsoft можна викачати 60-денну пробну версію програми. Microsoft SharePoint Designer є частиною Microsoft SharePoint - комплексу програм для організації спільної роботи.
Крок 1. Реєстрація та вибір шаблону
Для того, щоб користуватися конструктором Wix.com потрібно пройти нескладну процедуру реєстрації, де вказати лише е-майл і пароль. Після цього користувач може відразу створювати сайт, вибравши відповідну тематику:
Сервіс Wix.com надає широкий вибір тем для оформлення: від фотографії, дизайну, арту до бізнесу, послуг і ресторанів. Кожна тема містить професійні шаблони, що розподілені по категоріях. Наприклад, в темі "Музика і розваги" розміщено шаблони сайтів для акторів, театру, кіно, танців, заходів, музикантів тощо. Часто шаблони між собою перетинаються в різних категоріях.
На цій же сторінці є можливості для впорядкування дизайнів окремо Flash і Html5, а також можливість переглянути новітні або найпопулярніші роботи. Біля кожного макета є кнопка "Перегляд" за допомогою якої можна побачити як виглядатиме майбутній Інтернет проект після завершення роботи.
У разі, якщо користувач хоче застосувати власний дизайн присутній варіант "Порожні", де можна вибрати структуру розташування елементів і меню на майбутньому сайті, решта елементів додається вручну.
КРОК 2. Редагування та налаштування шаблону
Після вибору базового макету для сайту, потрібно натиснути кнопку "Редагувати", щоб перейти до внесення власних змін у готовий дизайн. Конструктор переходить в режим редагування, де для користувача надано багато опцій і налаштувань.
Готовий шаблон можна змінити в один із способів:
- Клікнути по елементу, що потребує змін.
- Скористатися лівим бічним меню, що складається з чотирьох пунктів. Кожен пункт містить підменю, між якими можна перемикатися та редагувати.
Ліве бічне меню складається з чотирьох пунктів:
- Сторінки – опції призначені для роботи з сторінками сайту. Їх можна переміщати, редагувати, додавати і видаляти. Підтримується ієрархія сторінок у вигляді випадного меню. Також можна вказувати МЕТА дані для кожної зі сторінок сайту.
- Дизайн – опції дозволяють змінювати фон сайту, колірну гамму, а також шрифти.
- Додати - розділ з віджетами, які можна розмістити на веб-сторінці. Зокрема, це текст, фото, галерея, медіа, форми і лінії, кнопки і меню, соціальні мережі, Інтернет магазин і додатки.
- Налаштування – тут можна задати адресу сайту, додати фавіконки, встановити SEO-параметри для пошуковиків, налаштувати статистику.
Нижче наведено приклад, як в обраному шаблоні змінювати опції. Поступово відкривається відразу три різних вікна з параметрами - спочатку загальні, потім деталізовані.
Для уставляння віджетів не потрібні знання програмування, установка плагінів тощо. У відповідному пункті меню, слід вибрати відповідний віджет і простим перетягуванням розмістити елемент на сторінці. В залежності від налаштувань, віджет може відображатися на одній або на всіх сторінках сайтах.
Функції, яких немає в конструкторі, можна додати за допомогою HTML коду. Але навіть без цього є достатньо наявних елементів для стандартного повноцінного сайту. Всі елементи сторінки надаються до налаштувань за потребами користувача.
Крок 3. Фініш. Власний домен і преміум-тарифи
Праворуч зверху в редакторі Wix.com є кнопки для збереження змін і перегляду створених сторінок. Пункт "Публікація" дозволяє розмістити сайт на сервері і зробити його доступним для всіх користувачів Інтернету. Оскільки сервіс Wix.com є безкоштовним, тому, введено обмеження на доменну адресу, яка буде мати вигляд:
http://ваш_логин.wix.com/назва_сайту
Це, звичайно, не найкраще рішення, тому має сенс підключити свій домен для проекту. На жаль, для цього доведеться перейти від безкоштовного аккаунту до преміям-тарифів. В Wix.com є кілька варіантів платного пропозицій:
Переваги платного акаунту
- Отримання якісного дизайну, що повністю налаштовується.
- Додається адміністративна сторінка з налаштуваннями і можливістю змінювати вміст сайту легко, просто без специфічних знань.
- Присутня SEO функціональність і багато корисних віджетів.
- Підтримку сайту можна робити власноруч або звернутися в технічну підтримку Wix.com.
- Як бонус за преміум-тарифи, домен надається безкоштовно. Також надаються купони на рекламу в Google і Facebook - що є важливим для старту власного бізнесу в мережі.
Wix.com пропонує вигідні пропозиції для веб-розробників. Можна стати партнером і заробляти гроші за рахунок доходу отриманого з власного сайту. Для творчих людей пропонують роботу дизайнеру Wix.com. Вони отримують доступ до Каталогу Професіоналів (Wix Pro), куди адміністрація сервісу направляє клієнтів, які шукають виконавців.
Порядок роботи
- Ознайомитися з системою Wix.com. Для виконання роботи можна використати інший конструктор.
- Обрати відповідний до тематики шаблон і створити повноцінний сайт на 3-4 сторінки.
- Ознайомитися з адміністративною панеллю.
- Змінити тексти, картинки, заголовки, фон. Мова сайту - українська!
- Додати/забрати наявні сервіси до сайту.
- Опублікувати сайт в Інтернеті.
Практична робота № 10 «Автоматизоване створення веб-сайту»
Група 1 Завдання: Створити веб-сайт «Модного чоловічого одягу 2019»
Група 2 Завдання: Створити веб-сайт «Модного жіночого одягу 2019»
Група 3 Завдання: Створити веб-сайт «Футбольного клуба «Оріль»»
Група 4 Завдання: Створити веб-сайт «Елітного магазину біжутерії»
Немає коментарів:
Дописати коментар