- •Тема 1. Технології Internet та основи створення Web-вузлів
- •2, Загальні принципи створення комерційних Web-сайтів
- •3. Загальні принципи створення окремої сторінки Web-сайту "
- •4. Розміщення Web-вузла в Internet та вивір провайдера
- •Тема 2. Структура html-документа й елементи розмітки заголовка документа
- •1. Історія розвитку мови розмітки гіпертексту html
- •2. Принципи гіпертекстової розмітки. Структура html-документа
- •3. Тега, що визначають структуру документа
- •4. Призначення та основні контейнери заголовка
- •Тема 3. Мова розмітки гіпертексту html
- •5. Федорчук а. Как создаются Web-сайты: краткий курс- сПб: Питер, 2000.-224с: ил.
- •1. Теги управління розміткою
- •2. Теги керування відображенням символів
- •3. Організація тексту всередині документу
- •4. Засоби опису таблиць у html
- •Тема 4. Топологія Web-сайту. Навігація на Web-сайті. Створення гіпертекстових переходів засобами html
- •1. Топологія Web-сайту
- •2. Створення загальних посилань засобами html
- •3. Створення контекстних посилань засобами html
- •4. Створення гіперпосилань засобами html
- •5. Html форми
- •Тема 5. Основи Web-дизайну
- •2. Офермлеяня Web-сторінки. Типи фонів. Текстури. Правила
- •3. Логотип
- •4. Шрифт і текст у Web-дизайні
- •5. Кольорове коло. Системи представлення кольорів. Підбір
- •Тема 6. Кольорове оформлення сторінок засобами html. Web-графіка План лекції
- •1. Атрибути body для кольерового оформленим Web-сторінок
- •2. Оформлення таблиць
- •3. Використання графіки в html
- •Тема 7. Каскадні таблиці стилів css (Cascading Style Stoeets)
- •1. Основи css
- •1.1. Призначення css
- •1.2. Додавання стилів на web-сторінку
- •1.3. Присвоєння стилів
- •2. Властивості елементів, керованих за допомогою css
- •2.2. Текст
- •2.3. Шрифти
- •1. Пошук інформації у Internet Повнота, достовірність та швидкість пошуку
- •Тема 1. Технології Internet та основи створення Web-вузлів
Тема 6. Кольорове оформлення сторінок засобами html. Web-графіка План лекції
1. Атрибути BODY для кольорового оформлення Web-сторінок.
2. Оформлення таблиць.
3. Використання графіки в HTML.
Ключові слова: дизайн сторінки, атрибути тега <body>, атрибути тегу <table>, атрибути тегу <tr>, атрибути тегу <td>.
Список рекомендованої літератури
Вин Д. Искусство web-дизайна: Самоучитель.- СПб.: Питер, 2002.-
224с: ил. »
Гультяев А.К. WEB-дизайн от MACROMEDIA: Практическое
пособие.-СПб.: КОРОНА принт, 2001.-480с: ил.
Каллажан I. Ваша Web-страница. Проблемы и решения: Практ.
пособие.- Пер. с англ.- М: ЭКОМ, 2002.- 432с: ил.
Федэрчук А. Как создаются Web-сайты: краткий курс- СПб: Питер,' .
2000.-224с: ил. '
http://www.citforum.ru/internet/thml/colors.shtml/.
http://www.webmasterpro.com.ua/.
1. Атрибути body для кольерового оформленим Web-сторінок
Опис тегів тіла документа починається з тега BODY. На відміну від тегу HEAD, BODY має атрибути, за допомогою яких можна задавати колір фону, посилань, тексту.
Атрибут BACKGROUND визначає колір фонового рисунку, на якому відображається текст документа. Так, якщо джерелом для фону HfML- документа є графічний файл image.gif, то у відкриваючому тезі тіла BODY з'являється відповідний атрибут:
<BODY BACKGROUND="image.gif' >
Цей приклад показує, як значення даного атрибута використовується адреса в скороченій формі URL. В даному випадку це адреса локального файлу.
В таблиці 1 наведені наступні атрибути my BODY.
Таблиця 1
Атрибути тегу BODY
Атрибут Значення
BGCOLOR=#FFFFFF Колір тіла
TEXT=#0000FF Колір тексту
VLINK =#FF0000 Колір пройдених гіпертекстових посилань
LINK=#00FFOO Колір гіпертекстового посилання
В даній таблиці, рядок #ХХХХХХ визначає колір у термінах RGB у шістнадцятковому представленні. Також є можливість задавати кольори за назвою. Далі в таблиці 2 приведені назви кольорів, визначені в стандарті HTML 4 і відповідні їм RGB-коди. Багато сучасних оглядачів виходять за рамки стандартів і підтримують набагато більше назв кольорів.
Таблиця 2 Назви та шістнадцяткові коди кольорів
Назва Код Назва Код
Aqua #0OFFFF Navy #000080
Black #000000 Olive #808000
Blue #0O0OFF Purple #800080
Fuchsia #FF0OFF Red #FFO0OO
Gray #808080 Silver #C0C0CO
Green #008000 Teal #008080
Lime #00FF00 White #FFFFFF
Maroon #800000 Yellow #FFFF00
Так, значення атрибутів у таблиці 1 визначають колір тексту як синій, тіла - білий, пройденого посилання - червоний, а нового посилання - зелений.
У додатку 4 представлена таблиця з наборами RGB-кодів гармонійних кольорів різних відтінків.
Застосувуються також атрибути LEFTMARGIN=n і TOPMARGI=n у тегзі <ВООУ>. Атрибут LEFTMARGIN= задає ліве поле для всієї сторінки. TOPMARGI= визначає верхнє поле. Число п показує ширину полів в пікселах. Наприклад, тег <BODY LEFTMARGIN ="40"> створить на всій сторінці ліве поле шириною 40 пікселів. При п, рівному 0, ліве поле відсутнє.
2. Оформлення таблиць
Опис тегів таблиці починається з тега TABLE, який може мати атрибути, що будуть задавати параметри оформлення тблиці. У таблиці 3 наведені атрибути тегу TABLE.
Таблиця
Атрибут
Атрибути тегу TABLE
Значения
Примітка
Товщина рамки
таблиці
BORDER=I
Вимірюється у пікеелях. Якщо параметр не заданий або
дорівнює нулю, тоді створюється таблиця без ліні% але
простір під них буде відведено
Колір рамок таблиці
BORDERCOLOR=
#OOOOFF
В залежності від того, з яким тегом (TABLE, TR, TD) ВІН 1
застосовується, колір рамки може бути встановлений для
всієї таблиці, для комірок рядка або для окремої комірки.
Значенням даного атрибута є RGB-код або стандартна шпіш
кольору
BGCOLOR= #FFFFFF
Колір тіла таблиці
У залежності від того, з яким тегом (TABLE, TR, TD) він : застосовується, колір тіла може бути встановлений для всій таблиці, для рядка або для окремої комірки Значенням даного атрибуту є RGB-код або стандартна назва кольору,-
BACKGROUND
=image.gif
Фонове
зображення для таблиці
Застосовується до тегів TABLE і TD.
CELLSPACINGS
Ширина проміжків між комірками у пікеелях
Якщо цей атрибут не зазначений, за замовчуванням задається величина, що дорівнює 2 пікселям. За допомогою атрибуту CELLSPASING= можна розміщати текст і графіку там, де потрібно. Якщо потрібно залишити порожнє місце, можна вписати в комірку пробіл.
Використання таблиць у днзайні сторінки
Таблиці гарні тим, що при бажанні можна зробити їх границі невидимими. Це дозволяє за допомогою тега <TABLE> красиво розміщувати на сторінці текст і графіку. Поки тег <TABLE> залишається єдиним потужним засобом форматування в HTML. Дизайнери Web-сторінок зараз мають практично ту ж волю у відношенні використання "порожнього простору", що і творці друкованих сторінок. Таблиці найкраще допомагають відійти від ієрархічного розміщення тексту на-Web-сторінках.
Якщо браузер підтримує таблиці, він зазвичай правильно відображає найбільш цікаві ефекти, отримані з їх допомогою.