 |
|
Робота з підручником
Практичне завдання
Розмістимо на сторінці три документи про навчальні заклади (див. вправу 2.5). Як видно з таблиці, сторінку поділено спочатку на два рядки у спів відношенні приблизно 60 % та 40 %, перший рядок поділено на впіл на два стовпці, а в утворених комірках розташовано відповідні веб-сторінки про навчальні заклади. Документи 1.html, 2.html та 3.html лежать в папці ЗАГАЛЬНЕ/ВЕБ-ДИЗАЙН/
1. Створіть файл головної сторінки та збережіть його як main.html
у тій самій папці, що й решту документів.
<HTML>
<ТІТLЕ>Навчальні заклади</ТІТLЕ>
<FRAMESET ROWS="60%, 40%">
<FRAMESET COLS="50%, 50%">
<FRAME SRC="2.html">
<FRAME SRC="3.html">
</FRAMESET>
<FRAME SRC="l.html">
</FRAMESET>
</HTML>
2. Відкрийте файл main.html. Всі файли, відображені у вікні браузера одночасно, а оскільки документи не вмістилися у визначені для них області, то кадри мають смуги прокручування.
Використання посилань у фреймах
Якщо заплановано використовувати певний фрейм для відображення інформації, яка змінюватиметься після вибору відвідувачами іншого посилання, то йому надають ім'я. Наприклад, <FRAME NAME="framel". Веб-сторінка з гіперпосиланнями, що виконуватиме роль навігаційної панелі, складається із сукупності тегів <А>...</А>. У них крім адреси файлу, пов'язаного з гіперпосиланням, слід зазначити ім'я фрейму, в якому цей файл відображатиметься. Для цього використовують атрибут TARGET, значенням якого є ім'я відповідного фрейму. Наприклад:
<А HREF="2.html" TARGET="fгате1">Гімназія «Сихівська»</А>
3. Сформуємо веб-сторінку з навігаційною панеллю та областю відображення документів. Використайте файли з описами навчальних закладів із вправи 2.5, а сторінку np.htmlз навігаційною панеллю та поділену на фрейми сторінку index.htmlстворіть самостійно. 1. Створіть HTML-документ, який розмітьте за допомогою фреймів і збережіть у файлі index.html.
<HTML>
<FRAMESET COLS="20%,*"> <FRAME SRC="np.html"> <FRAME NAME="framel"> </FRAMESET> </HTML>
4. Створіть HTML-документ, який міститиме навігаційну панель,
і збережіть його у файлі np.html.
<HTML>
<ТІТЬЕ>Школи, ліцеї, гімназії</ТІТЬЕ>
<BODY>
<Н2ХА HREF="l.html" TARGET="fгате1">Школа «Дивосвіт»
</АХ/Н2>
<Н2ХА HREF="2.html" TARGET="fгате1">Гімназія
«Сихівська»</АХ/Н2>
<Н2ХА HREF="3.html" TARGET="fгате1">Ліцей «Оріяна»</А>
</Н2>
</BODY>
</HTML>
5. Відкрийте файл index.htmlу вікні браузера.
Підведення підсумків.
Ми завершили роботу по створенню найпростішого веб-сайту.
Домашнє завдання.
Запишіть вивчені теги до словника.Підготуйтеся до захисту своєї роботи. Продумайте план захисту, слова, якими ви розкажете про свою сторінку.
Для підготовки використайте таку літературу:
О.Г. Пасічник, О.В.Пасічник, І.В. Стеценко «Основи веб-дизайну»
Додаток 1