Завдання до лабораторної роботи
Завдання 1. Створення титульної сторінки сайту.
Створити новий документ, вибрати ВИД – Веб-Документ.
Вибрати фон. При виборі фона зверніть особливу увагу на те, що для оформлення сторінок найчастіше використовуються не кольори, а відтінки. Для цього виберіть ФОРМАТ – ФОН – Інші кольори – Спектр (рис. 9.5). Лівою кнопкою миші виберіть колір за допомогою білого перехрестя на панелі кольорів, потім виберіть відтінок, за допомогою чорного вказівника й вертикальної лінійки відтінку праворуч від панелі кольорів. Обраний відтінок, відображається в полосі НОВИЙ.
Рис. 9.5. Вибір кольору
Вставити таблицю розмірами не менш 5 стовпців, 4 рядків. Виділіть таблицю (хрестик ліворуч над таблицею), увійдіть ВЛАСТИВОСТІ ТАБЛИЦІ – таблиця – границі й заливання, виберіть НЕМАЄ ГРАНИЦЬ, закрийте вікно. При цьому границі стануть сірими й будуть видні в документі, але не будуть видні в браузері.
У комірки таблиці ввести текст – назва сайту й отформатувати його.
У вільні комірки ввести картинки по темі сайту (поставити курсор у комірку, вибрати ВСТАВКА – МАЛЮНОК З ФАЙЛУ – Вставити малюнок.). Вставити об'єкти WordArt (заголовки, рекламу й т.д.). Обов'язкова назва сайту, дані про зміст (анонс), набір барвистих картинок (вони вставляються в поля таблиці), кнопка або автофігура для переходу, дані про розроблювача. Вирівняти об'єкти в комірках таблиці. Зберегти першу сторінку з ім'ям Index.html у папці своє прізвище_web. Приклад титульної сторінки на рис.9.6.
Рис.9.6. Приклад титульної сторінки сайту
Завдання 2. Створення другої сторінки у вигляді фреймової структури.
Для цього включіть панель рамки. Установіть рамку зверху й рамку знизу, лівою кнопкою миші перетягніть границі так як на рис. 9.7. Установіть курсор у середню частину сторінки. Установіть ліву границю й перетягніть її відповідно до малюнка. Увійдить в опцію ФОРМАТ і для всіх частин установіть однакову тему.
У верхній фрейм ввести заголовок сторінки (назва сайту). У лівий фрейм опції меню. У правий – барвисту картинку по темі. У нижній – електронну адресу й поштову скриньку. Збережіть файл у своїй папці з назвою pages.html.
Установіть гіперпосилання у файлі index.html на будь-якому з елементів, бажано на кнопці або автофігурі, на файл pages.html.
Рис. 9.7. Друга сторінка
Створити третю й наступні сторінки по подобію першої, розташувавши на них тематичний матеріал і зберігти їх з назвами page2.html, page3.html, page4.html.
Установити гіперпосилання із фрейму з меню (з кожного пункту меню відповідно) сторінки pages.html на кожну зі сторінок page№.html і відобразити їх. Для цього необхідно виділити відповідний пункт меню у файлі pages.html, вибрати вставку гіперпосилання, указати об'єкт і вибрати фрейм у якому об'єкт повинен відобразитися як на рис. 9.8.
Рис 9.8. Вибір рамки
Завдання 3. Використовуючи MS Word виконайте відповідне завдання:
Розробіть сайт-поздоровлення до будь-якого свята (наприклад, 8 березня, дня Валентина) по сценарію.
Головна сторінка повинна мати безфреймову структуру, бути виконана у вигляді таблиці, залитої фоном і містити:
- назву сайту, його тематику,
- графіку,
- свій логотип або відомості про розроблювача.
Друга сторінка має фреймову структуру й містить:
- у лівому фреймі меню (поздоровлення й побажання, вірш або розповідь, фотоальбом),
- у правому фреймі вміст 3-х сторінок відповідних пунктам меню,
- у верхньому фреймі назву сайту,
- у нижньому фреймі, контактну інформацію,
Оформлення сайту за допомогою теми.
При оформленні використовувати позиціонування елементів через таблицю.
Зробити гіперпосилання на файли й усередині одного з файлів (необов'язкове завдання).
Для переходів усередині використовувати кнопки у вигляді автофігур.
Додатково оцінюється вкус і фантазія.