II. Розробка макета головної сторінки лабораторного проекту

Зарезервувати для свого сайту головну сторінку з ім’ям іndex.htm:

У вікні збереження файла ввести ім’я файла:

Збережена сторінка з’явиться у папці сайту:

Настроїти параметри головної сторінки: назва, кодировка, фон, колір та ін. Для цього виконати команду Modify (Изменение) – Page Properties… (Свойства страницы…):

Відкриється вікно властивостей сторінки, в якому необхідно встановити її параметри, наприклад, заголовок сторінки, колір фону:

Після натискання кнопки ОК сторінка відобразиться із зміненим кольором фону та новим заголовком:

Наступний крок – встановлення для головної сторінки сайту meta-тегів, призначених для обробки пошуковими системами. На основі інформації, що розміщена в meta-тегах опису сторінки та набору ключових слів, пошукові системи визначають зміст сайту і заносять цю інформацію у свою базу даних.

3.1. Для встановлення на сторінці meta-тегу, що містить її опис, необхідно виконати команди Insert(Вставка) – Head Tags (Теги Head) – Description (Описание):

У діалоговому вікні Description (Описание) ввести опис доку­мента, наприклад:

Текст опису сторінки вводиться в область редагування Descrip­tion. Після натискання кнопки ОК готовий meta-тег опису сторінки відобразиться на панелі заголовка позначкою . Для включення або відключення панелі заголовка необхідно виконати команди View (Вид)-Head Content (Содержимое раздела Head). Не рекомендується створювати занадто великий опис сторінки, тому що багато пошуко­вих машин обмежують довжину опису двомастами символів. Якщо вибрати на панелі заголовка meta-тег опису сторінки, відкриється вікно редактора властивостей, в якому можна змінити опис сторінки в області редагування Description:

3.2. Для розміщення на сторінці meta-тегу, що містить набір ключових слів, необхідно виберіть пункт Keywords (Ключевые слова) у підменю Head Tags (Теги Head) меню Insert (Вставка):

На екрані з’явиться діалогове вікно Keywords, в якому в області редагування Keywords вводяться ключові слова, розділені комами:

Тут так само, як і при описі сторінки не варто створювати надто великий набор ключових слів. Доцільно обмежитися тільки тими ключовими словами, що максимально повно описують вашу сторінку. На довжину набору ключових слів також існує обмеження в 200 сим­волів. Після натискання кнопки ОК, створений meta-тег ключових слів відображається на панелі заголовка позначкою . Якщо вибрати на панелі заголовка meta-тег набору ключових слів, відкриється редак­тор властивостей, в якому можна змінювати набір ключових слів в області редагування Keywords.

4. За допомогою таблиці виконати розмітку сторінки: виділити місце для банера, герба, назви проекта, головного меню та персональ­них даних.

Табличний дизайн – це один із засобів створення складних web-сторінок з використанням таблиць мови HTML. Основний принцип табличного дизайну полягає в тому, що весь текст і вся графіка розмі­щуються в комірках таблиці. Як правило, такі таблиці називають таблицями розмітки. Вони мають невидимі границі, а лінійки ство­рюються за допомогою дуже тонких комірок з фоновим заповненням. Таблиці розмітки можуть бути досить складними: з використанням різного форматування, багаторазового об’єднання комірок та вкладе­них таблиць.

Для створення головної сторінки лабораторного проекту слід використовувати таблицю розмітки, інформація в які має буди розмі­щена таким чином:

Місце для банера
Назва роботи
Назва дисципліни
Персональні данні про студента	Місце для герба	Головне меню
Корисні посилання	Посилання на сайт КНТЕУ	Посилання на сторінку кафедри ЕКІС сайта КНТЕУ

4.1. У Dreamweaver для створення таблиці необхідно виконати команди Insert (Вставка) –Table (Таблица):

Відкриється діалогове вікно, в якому слід встановити параметри таблиці:

Після натискання кнопки ОК відобразиться пуста таблиця:

4.2. Виконати редагування параметрів таблиці відповідно до вище зазначеної структури. У нашому прикладі в перших трьох ряд­ках таблиці повинна бути одна колонка замість трьох. Для виконання цієї операції необхідно виділити спочатку перший рядок таблиці та виконати команду Modify(Редактирование) – Table (Таблица) – Merge Cells (Соединение ячеек):

Ті ж самі дії необхідно виконати для 2 та 3 рядків таблиці:

4.3. Виділити таблицю та у вікні Properties(Свойства) і налаго­дити параметри її форматування:

4.4. Для розмішення рисунка встановити курсор у відведене місце таблиці та виконати команди Insert (Вставка) – Image (Рисунок):

Відкриється діалогове вікно, в якому слід вибрати необхідний графічний файл:

У результаті розміщення рисунків сторінка буде мати такий вигляд:

4.5. У зарезервовані місця ввести текстову інформацію:

ПРИМІТКА: допускається відхилення від наведеного у прикладі розміщення елементів сторінки, але наявність усіх вищенаведених елементів є обов’язковою.