- •Тема 5. Основи дизайну та принципи створення
- •Гармонія кольорів
- •Шрифт і текст
- •Поєднання і баланс. Контраст. Динаміка. Контраст
- •Динаміка
- •3.Типи сайтів.
- •4.Створення сайту. Формат сторінки. Заголовки. Навігація. Створення сайту
- •7. Доопрацювання за наслідками тестування. Формат сторінки
- •5. Блоки тексту.
- •6. Векторна і растрова графіка
- •7. Функції і призначення графіки (виставочна графіка, фон, банер, візуальна графіка)
- •Тема 6. Системи управління контентом План
- •Поняття cms
- •Способи роботи. Шаблони сайтів.
- •3 Статті сайту та їх ієрархія
- •1. Картинка до статті
- •2. Основний текст статті.
- •3. Приналежність до категорій.
- •4. Додаткові модулі
- •5 Особливості Joomla, osComerse, Drupal, Moodle
4.Створення сайту. Формат сторінки. Заголовки. Навігація. Створення сайту
1.Проектування сайту - розробка технічного завдання. Результатом цього етапу є розробка документа, що описує всі аспекти створюваного сайту: схему розташування елементів дизайну, структуру і особливості системи навігації, функціональність і особливості роботи кожного модуля.
2.Розробка і затвердження дизайну сайту. Дизайн сайту є зображенням зовнішнього вигляду web-сайту. Web-сайти можуть складатися з безліч сторінок, виконаних на основі одного макету дизайну. Сторінки такого сайту відрізняються один від одного заголовком і змістом області в якій розміщується текст сторінки. Також web-сайти можуть використовувати декілька варіантів оформлення тематичних розділів. При розробці сайту ми завжди пропонуємо декілька варіантів його можливого оформлення, надавши докладну інформацію про відмінності між ними, що дозволяє Замовнику підібрати варіант, що максимально задовольняє його.
3.HTML верстка сторінок веб-сайту. Верстка сайту - це розбиття макету сайту на графічні і текстові блоки, які повинні коректно відображатися в більшості браузерах. Блоки обрамляються тегами, спеціальними символами, інтерпретуючи які, браузери "розуміють", де текст, де графічний елемент, як правильно його оформити і розташувати. Докладніше про варіанти верстки...
4.Програмування. Практично жоден сучасний проект не обходиться без програмних засобів. Використання програмування дозволяє зробити сайт набагато привабливішим і цікавішим для відвідувача, забезпечуючи інтерактивність його роботи. Використання програмних засобів істотно знижує вартість подальшої підтримки розробленого сайту, дозволяючи власнику самостійно управляти його наповненням.
5.Компоновка і інформаційне наповнення сайту. Наповнення web-сайту інформацією є процедуру введення інформації в область контента дизайн-макету сайту. Ця операція є введенням заголовка, тексту, введенням графічних зображень і форматуванням таблиць. Ця процедура може бути здійснена клієнтом самостійно, завдяки системі управління сайтом CMS.
6. Тестування.
7. Доопрацювання за наслідками тестування. Формат сторінки
На сьогоднішній день існує два найбільш поширені формати інтернет сторінок, а саме HTML та XML в комбінації з CCS. Крім того на сторінку може бути додано графіку(.jpg, .png та інші формати зображень. Це може бути .gif або flash анімація.) та скрипти. Так як HTML не у всіх випадках працює на мобільних браузерах, вдаються до написання wap-сторінок(формат .wml). Існує досить багато сайтів на яких можна переключитися на перегляд контенту у режимі wap-сторінки. Wap-сторінки Як і в html основний код сторінки позначений тегом <html> і </ html>, ак і тут позначаємо основний код сторінки <wml> і </ wml>. <wml> </wml> Звичайно відкриття та закриття цього тегу відповідно повинне бути на початку і в кінці коду сторінки (спочатку тобто після кодів для кодувань). У тезі head, який тут також присутній, пишемо:
<head> <meta http-equiv="cache-control" content="no-cache" forua="true"/> </head>
Чимось на зразок тега body в *. wml є тег card. Саме в цьому теге пишеться зміст сторінки. Отже, ось як виглядає код для card:
<card id="index" title="Перша wap-строрінка"> </card>
Тут у полі «id» пишеться назва сторінки, а в «index» пишеться її заголовок. Між першою і другою строчкою коду вище звичайно пишеться код змісту сторінки. Зразок вирівнювання тексту:
<p align="center">
Після, в кінці закриємо тег «p». Тег «<br/>» для wap працює так само як і для HTML.
Посилання можна поставити таким кодом:
<a href="http://wap.site.ru/index.wml">Глоловна </a>
Поставити картинку можна кодом:
<img src="logohallo.gif" alt="wap.site.ru"/>
Приклад виділення тексту через рядок(текст потрібно ввести між тегами):
<p> </p>